@earendil-works/pi-coding-agent 0.87.1 → 0.99.0

package/dist/modes/interactive/theme/theme.js

@@ -1,11 +1,13 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { getCapabilities, } from "@earendil-works/pi-tui";
+import { backgroundAnsi, colorToHex, colorToOklch, foregroundAnsi, getTerminalColorMode, indexedColor, mixColors, parseColor, rgbColor, styleTextWithAnsi, } from "@earendil-works/pi-tui";
 import chalk from "chalk";
 import { getCustomThemesDir, getThemesDir } from "../../../config.js";
 import { closeWatcher, watchWithErrorHandler } from "../../../utils/fs-watch.js";
 import { highlight, supportsLanguage } from "../../../utils/syntax-highlight.js";
 import { stripBom } from "../../../utils/text.js";
+import { generateSystemThemeColors, SYSTEM_THEME_NAME, terminalAppearance } from "./system-theme.js";
+export { SYSTEM_THEME_NAME } from "./system-theme.js";
 let themeJsonValidator;
 /**
  * Install full theme validation. Without it, documents are accepted as-is, which is what built-in
@@ -18,122 +20,8 @@ export function setThemeJsonValidator(validator) {
 // ============================================================================
 // Color Utilities
 // ============================================================================
-function hexToRgb(hex) {
-    const cleaned = hex.replace("#", "");
-    if (cleaned.length !== 6) {
-        throw new Error(`Invalid hex color: ${hex}`);
-    }
-    const r = parseInt(cleaned.substring(0, 2), 16);
-    const g = parseInt(cleaned.substring(2, 4), 16);
-    const b = parseInt(cleaned.substring(4, 6), 16);
-    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-        throw new Error(`Invalid hex color: ${hex}`);
-    }
-    return { r, g, b };
-}
-// The 6x6x6 color cube channel values (indices 0-5)
-const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
-// Grayscale ramp values (indices 232-255, 24 grays from 8 to 238)
-const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
-function findClosestCubeIndex(value) {
-    let minDist = Infinity;
-    let minIdx = 0;
-    for (let i = 0; i < CUBE_VALUES.length; i++) {
-        const dist = Math.abs(value - CUBE_VALUES[i]);
-        if (dist < minDist) {
-            minDist = dist;
-            minIdx = i;
-        }
-    }
-    return minIdx;
-}
-function findClosestGrayIndex(gray) {
-    let minDist = Infinity;
-    let minIdx = 0;
-    for (let i = 0; i < GRAY_VALUES.length; i++) {
-        const dist = Math.abs(gray - GRAY_VALUES[i]);
-        if (dist < minDist) {
-            minDist = dist;
-            minIdx = i;
-        }
-    }
-    return minIdx;
-}
-function colorDistance(r1, g1, b1, r2, g2, b2) {
-    // Weighted Euclidean distance (human eye is more sensitive to green)
-    const dr = r1 - r2;
-    const dg = g1 - g2;
-    const db = b1 - b2;
-    return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
-}
-function rgbTo256(r, g, b) {
-    // Find closest color in the 6x6x6 cube
-    const rIdx = findClosestCubeIndex(r);
-    const gIdx = findClosestCubeIndex(g);
-    const bIdx = findClosestCubeIndex(b);
-    const cubeR = CUBE_VALUES[rIdx];
-    const cubeG = CUBE_VALUES[gIdx];
-    const cubeB = CUBE_VALUES[bIdx];
-    const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
-    const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
-    // Find closest grayscale
-    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
-    const grayIdx = findClosestGrayIndex(gray);
-    const grayValue = GRAY_VALUES[grayIdx];
-    const grayIndex = 232 + grayIdx;
-    const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
-    // Check if color has noticeable saturation (hue matters)
-    // If max-min spread is significant, prefer cube to preserve tint
-    const maxC = Math.max(r, g, b);
-    const minC = Math.min(r, g, b);
-    const spread = maxC - minC;
-    // Only consider grayscale if color is nearly neutral (spread < 10)
-    // AND grayscale is actually closer
-    if (spread < 10 && grayDist < cubeDist) {
-        return grayIndex;
-    }
-    return cubeIndex;
-}
-function hexTo256(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    return rgbTo256(r, g, b);
-}
-function fgAnsi(color, mode) {
-    if (color === "")
-        return "\x1b[39m";
-    if (typeof color === "number")
-        return `\x1b[38;5;${color}m`;
-    if (color.startsWith("#")) {
-        if (mode === "truecolor") {
-            const { r, g, b } = hexToRgb(color);
-            return `\x1b[38;2;${r};${g};${b}m`;
-        }
-        else {
-            const index = hexTo256(color);
-            return `\x1b[38;5;${index}m`;
-        }
-    }
-    throw new Error(`Invalid color value: ${color}`);
-}
-function bgAnsi(color, mode) {
-    if (color === "")
-        return "\x1b[49m";
-    if (typeof color === "number")
-        return `\x1b[48;5;${color}m`;
-    if (color.startsWith("#")) {
-        if (mode === "truecolor") {
-            const { r, g, b } = hexToRgb(color);
-            return `\x1b[48;2;${r};${g};${b}m`;
-        }
-        else {
-            const index = hexTo256(color);
-            return `\x1b[48;5;${index}m`;
-        }
-    }
-    throw new Error(`Invalid color value: ${color}`);
-}
 function resolveVarRefs(value, vars, visited = new Set()) {
-    if (typeof value === "number" || value === "" || value.startsWith("#")) {
+    if (typeof value === "number" || value === "" || value.startsWith("#") || /^ok(lch|hsl)\(/i.test(value)) {
         return value;
     }
     if (visited.has(value)) {
@@ -162,6 +50,53 @@ function withThemeColorFallbacks(colors) {
         searchMatchText: colors.searchMatchText ?? colors.text,
     };
 }
+// The terminal's reported colors. Replaced (never mutated) on update, so themes can cache resolved colors
+// by identity.
+let terminalColors = {};
+// While the terminal color query is in flight, the system theme renders in grayscale.
+let terminalColorsPending = false;
+// The terminal's last light/dark report (mode 2031). Only used while it has not reported a background.
+let terminalColorScheme;
+/**
+ * Record the terminal's reported colors. Themes use the default colors for tokens set to "" (terminal
+ * default); the system theme is generated from all of them. Ends the pending state.
+ */
+export function setTerminalColors(colors) {
+    terminalColors = { ...colors };
+    terminalColorsPending = false;
+}
+/** Record the terminal's light/dark report, the fallback for terminals that do not report their background. */
+export function setTerminalColorScheme(scheme) {
+    terminalColorScheme = scheme;
+}
+/** Render the system theme in grayscale until `setTerminalColors()` reports the terminal's colors. */
+export function markTerminalColorsPending() {
+    terminalColorsPending = true;
+}
+/** Assumed terminal default colors when the terminal does not report them. */
+const GUESSED_DEFAULT_COLORS = {
+    dark: { foreground: parseColor("#e5e5e7"), background: parseColor("#000000") },
+    light: { foreground: parseColor("#000000"), background: parseColor("#ffffff") },
+};
+function averageLightness(colors) {
+    // Palette colors 0-15 follow the user's terminal palette, so they say nothing about the theme.
+    const fixed = colors.filter((color) => color.kind !== "indexed" || color.index >= 16);
+    if (fixed.length === 0)
+        return undefined;
+    return fixed.reduce((sum, color) => sum + colorToOklch(color).l, 0) / fixed.length;
+}
+/** Detect the background a theme is designed for from the lightness of its own colors. */
+function detectAppearance(foregrounds, backgrounds) {
+    const fg = averageLightness(foregrounds);
+    const bg = averageLightness(backgrounds);
+    if (fg !== undefined && bg !== undefined)
+        return bg < fg ? "dark" : "light";
+    if (bg !== undefined)
+        return bg < 0.5 ? "dark" : "light";
+    if (fg !== undefined)
+        return fg > 0.5 ? "dark" : "light";
+    return undefined;
+}
 // ============================================================================
 // Theme Class
 // ============================================================================
@@ -169,45 +104,115 @@ export class Theme {
     name;
     sourcePath;
     sourceInfo;
-    fgColors;
-    bgColors;
     mode;
+    // Precomputed escape sequences keep fg()/bg() on the render hot path to a lookup and concat.
+    fgAnsi = new Map();
+    bgAnsi = new Map();
+    // Tokens set to "" have no color of their own; `colors` fills them from the terminal defaults.
+    concreteColors = {};
+    defaultForegroundTokens = [];
+    defaultBackgroundTokens = [];
+    // Foreground tokens rendered faint (SGR 2) on top of their color.
+    dimTokens;
+    ownAppearance;
+    resolvedColors;
     constructor(fgColors, bgColors, mode, options = {}) {
         this.name = options.name;
         this.sourcePath = options.sourcePath;
         this.sourceInfo = options.sourceInfo;
         this.mode = mode;
-        this.fgColors = new Map();
-        const colors = {
+        this.dimTokens = new Set(options.dim);
+        const foregrounds = {
             ...fgColors,
             scrollbarTrack: fgColors.scrollbarTrack ?? fgColors.muted,
             scrollbarThumb: fgColors.scrollbarThumb ?? fgColors.text,
             thinkingMax: fgColors.thinkingMax ?? fgColors.thinkingXhigh,
             searchMatchText: fgColors.searchMatchText ?? fgColors.text,
         };
-        for (const [key, value] of Object.entries(colors)) {
-            this.fgColors.set(key, fgAnsi(value, mode));
-        }
-        this.bgColors = new Map();
-        const backgrounds = {
-            ...bgColors,
-            searchMatchBg: bgColors.searchMatchBg ?? bgColors.selectedBg,
+        const backgrounds = { ...bgColors, searchMatchBg: bgColors.searchMatchBg ?? bgColors.selectedBg };
+        const concreteForegrounds = [];
+        const concreteBackgrounds = [];
+        // Returns the escape sequence for the token's own slot.
+        const addToken = (token, value, isBackground) => {
+            if (value === "") {
+                (isBackground ? this.defaultBackgroundTokens : this.defaultForegroundTokens).push(token);
+                return isBackground ? "\x1b[49m" : "\x1b[39m";
+            }
+            const color = parseColor(value);
+            this.concreteColors[token] = color;
+            (isBackground ? concreteBackgrounds : concreteForegrounds).push(color);
+            return isBackground ? backgroundAnsi(color, mode) : foregroundAnsi(color, mode);
         };
-        for (const [key, value] of Object.entries(backgrounds)) {
-            this.bgColors.set(key, bgAnsi(value, mode));
+        for (const [token, value] of Object.entries(foregrounds)) {
+            this.fgAnsi.set(token, addToken(token, value, false));
+        }
+        for (const [token, value] of Object.entries(backgrounds)) {
+            this.bgAnsi.set(token, addToken(token, value, true));
         }
+        this.ownAppearance = options.appearance ?? detectAppearance(concreteForegrounds, concreteBackgrounds);
+    }
+    /**
+     * The background the theme is designed for: declared in the theme JSON, detected from its colors,
+     * or, for themes without usable colors, the terminal's appearance.
+     */
+    get appearance() {
+        return this.ownAppearance ?? getTerminalTheme();
+    }
+    /**
+     * Concrete colors for all tokens. Tokens set to "" (terminal default) use the terminal's reported
+     * default colors, or a guess based on `appearance` when the terminal did not report them. Faint
+     * tokens are approximated by mixing their color toward the background.
+     */
+    get colors() {
+        const terminal = terminalColors;
+        if (this.resolvedColors?.terminal !== terminal) {
+            const guess = GUESSED_DEFAULT_COLORS[this.appearance];
+            const toColor = (rgb, fallback) => rgb ? rgbColor(rgb.r, rgb.g, rgb.b) : fallback;
+            const foreground = toColor(terminal.foreground, guess.foreground);
+            const background = toColor(terminal.background, guess.background);
+            const colors = { ...this.concreteColors };
+            for (const token of this.defaultForegroundTokens)
+                colors[token] = foreground;
+            for (const token of this.defaultBackgroundTokens)
+                colors[token] = background;
+            for (const token of this.dimTokens) {
+                const color = colors[token];
+                if (color)
+                    colors[token] = mixColors(color, background, 0.4);
+            }
+            this.resolvedColors = { terminal, colors: Object.freeze(colors) };
+        }
+        return this.resolvedColors.colors;
+    }
+    style(text, options) {
+        const { fg, bg } = options;
+        if (typeof fg === "string" && this.dimTokens.has(fg))
+            options = { ...options, dim: true };
+        return styleTextWithAnsi(text, fg === undefined
+            ? undefined
+            : typeof fg === "string"
+                ? this.tokenAnsi(this.fgAnsi, fg)
+                : foregroundAnsi(fg, this.mode), bg === undefined
+            ? undefined
+            : typeof bg === "string"
+                ? this.tokenAnsi(this.bgAnsi, bg)
+                : backgroundAnsi(bg, this.mode), options);
     }
     fg(color, text) {
-        const ansi = this.fgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme color: ${color}`);
-        return `${ansi}${text}\x1b[39m`; // Reset only foreground color
+        const ansi = this.tokenAnsi(this.fgAnsi, color);
+        if (this.dimTokens.has(color))
+            return `${ansi}\x1b[2m${text}\x1b[22;39m`;
+        return `${ansi}${text}\x1b[39m`;
     }
     bg(color, text) {
-        const ansi = this.bgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme background color: ${color}`);
-        return `${ansi}${text}\x1b[49m`; // Reset only background color
+        const ansi = this.tokenAnsi(this.bgAnsi, color);
+        return `${ansi}${text}\x1b[49m`;
+    }
+    tokenAnsi(ansi, token) {
+        const value = ansi.get(token);
+        if (value === undefined)
+            throw new Error(`Unknown theme color: ${token}`);
+        return value;
     }
     bold(text) {
         return chalk.bold(text);
@@ -224,17 +229,13 @@ export class Theme {
     strikethrough(text) {
         return chalk.strikethrough(text);
     }
+    /** Opening escape sequence for a foreground token. Faint tokens include SGR 2, which `\x1b[22m` closes. */
     getFgAnsi(color) {
-        const ansi = this.fgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme color: ${color}`);
-        return ansi;
+        const ansi = this.tokenAnsi(this.fgAnsi, color);
+        return this.dimTokens.has(color) ? `${ansi}\x1b[2m` : ansi;
     }
     getBgAnsi(color) {
-        const ansi = this.bgColors.get(color);
-        if (!ansi)
-            throw new Error(`Unknown theme background color: ${color}`);
-        return ansi;
+        return this.tokenAnsi(this.bgAnsi, color);
     }
     getColorMode() {
         return this.mode;
@@ -294,7 +295,8 @@ export function getAvailableThemesWithPaths() {
         seen.add(themeInfo.name);
         result.push(themeInfo);
     };
-    // Built-in themes
+    // Built-in themes. The system theme is generated, so it has no file.
+    addTheme({ name: SYSTEM_THEME_NAME, path: undefined });
     for (const name of Object.keys(getBuiltinThemes())) {
         addTheme({ name, path: path.join(themesDir, `${name}.json`) });
     }
@@ -305,7 +307,8 @@ export function getAvailableThemesWithPaths() {
     for (const [name, theme] of registeredThemes.entries()) {
         addTheme({ name, path: theme.sourcePath });
     }
-    return result.sort((a, b) => a.name.localeCompare(b.name));
+    // The system theme comes first: it is the default and adapts to every terminal.
+    return result.sort((a, b) => a.name === SYSTEM_THEME_NAME ? -1 : b.name === SYSTEM_THEME_NAME ? 1 : a.name.localeCompare(b.name));
 }
 function getCustomThemeInfos() {
     const customThemesDir = getCustomThemesDir();
@@ -375,31 +378,50 @@ function loadThemeJson(name) {
     const content = fs.readFileSync(themePath, "utf-8");
     return parseThemeJsonContent(name, content);
 }
-function createTheme(themeJson, mode, sourcePath) {
-    const colorMode = mode ?? (getCapabilities().trueColor ? "truecolor" : "256color");
-    const resolvedColors = resolveThemeColors(withThemeColorFallbacks(themeJson.colors), themeJson.vars);
+const BACKGROUND_TOKENS = new Set([
+    "selectedBg",
+    "searchMatchBg",
+    "userMessageBg",
+    "customMessageBg",
+    "toolPendingBg",
+    "toolSuccessBg",
+    "toolErrorBg",
+]);
+function splitThemeColors(colors) {
     const fgColors = {};
     const bgColors = {};
-    const bgColorKeys = new Set([
-        "selectedBg",
-        "searchMatchBg",
-        "userMessageBg",
-        "customMessageBg",
-        "toolPendingBg",
-        "toolSuccessBg",
-        "toolErrorBg",
-    ]);
-    for (const [key, value] of Object.entries(resolvedColors)) {
-        if (bgColorKeys.has(key)) {
+    for (const [key, value] of Object.entries(colors)) {
+        if (BACKGROUND_TOKENS.has(key)) {
             bgColors[key] = value;
         }
         else {
             fgColors[key] = value;
         }
     }
+    return { fgColors, bgColors };
+}
+function createTheme(themeJson, mode, sourcePath) {
+    const colorMode = mode ?? getTerminalColorMode();
+    const resolvedColors = resolveThemeColors(withThemeColorFallbacks(themeJson.colors), themeJson.vars);
+    const { fgColors, bgColors } = splitThemeColors(resolvedColors);
     return new Theme(fgColors, bgColors, colorMode, {
         name: themeJson.name,
         sourcePath,
+        appearance: themeJson.appearance,
+    });
+}
+/** Generate the system theme from the terminal's reported colors (grayscale while they are pending). */
+function createSystemTheme(mode) {
+    const generated = generateSystemThemeColors({
+        ...terminalColors,
+        saturation: terminalColorsPending ? 0 : 1,
+        appearanceHint: getTerminalTheme(),
+    });
+    const { fgColors, bgColors } = splitThemeColors(generated.colors);
+    return new Theme(fgColors, bgColors, mode ?? getTerminalColorMode(), {
+        name: SYSTEM_THEME_NAME,
+        appearance: generated.appearance,
+        dim: generated.dim,
     });
 }
 export function loadThemeFromPath(themePath, mode) {
@@ -408,6 +430,9 @@ export function loadThemeFromPath(themePath, mode) {
     return createTheme(themeJson, mode, themePath);
 }
 function loadTheme(name, mode) {
+    // The system theme name is reserved: it takes precedence over custom themes of the same name.
+    if (name === SYSTEM_THEME_NAME)
+        return createSystemTheme(mode);
     const registeredTheme = registeredThemes.get(name);
     if (registeredTheme) {
         return registeredTheme;
@@ -448,95 +473,45 @@ export function resolveThemeSetting(themeSetting, terminalTheme) {
         return themeSetting;
     return undefined;
 }
-function getColorFgBgBackgroundIndex(colorfgbg) {
-    const parts = colorfgbg.split(";");
-    for (let i = parts.length - 1; i >= 0; i--) {
-        const bg = parseInt(parts[i].trim(), 10);
-        if (Number.isInteger(bg) && bg >= 0 && bg <= 255) {
-            return bg;
-        }
-    }
-    return undefined;
-}
-function getRgbColorLuminance({ r, g, b }) {
-    const toLinear = (channel) => {
-        const value = channel / 255;
-        return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
-    };
-    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-}
-function getAnsiColorLuminance(index) {
-    return getRgbColorLuminance(hexToRgb(ansi256ToHex(index)));
-}
-export function getThemeForRgbColor(rgb) {
-    return getRgbColorLuminance(rgb) >= 0.5 ? "light" : "dark";
-}
-export function detectTerminalBackgroundFromEnv(options = {}) {
-    const env = options.env ?? process.env;
-    const colorfgbg = env.COLORFGBG || "";
-    const bg = getColorFgBgBackgroundIndex(colorfgbg);
-    if (bg !== undefined) {
-        return {
-            theme: getAnsiColorLuminance(bg) >= 0.5 ? "light" : "dark",
-            source: "COLORFGBG",
-            detail: `background color index ${bg}`,
-            confidence: "high",
-        };
-    }
-    return {
-        theme: "dark",
-        source: "fallback",
-        detail: "no terminal background hint found",
-        confidence: "low",
-    };
-}
-export async function detectTerminalBackgroundTheme({ ui, timeoutMs, env, }) {
-    try {
-        const rgb = await ui.queryTerminalBackgroundColor({ timeoutMs });
-        if (rgb) {
-            return {
-                theme: getThemeForRgbColor(rgb),
-                source: "terminal background",
-                detail: `OSC 11 background rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`,
-                confidence: "high",
-            };
-        }
-    }
-    catch {
-        // Fall back to environment-based detection when the terminal query fails.
-    }
-    return detectTerminalBackgroundFromEnv({ env });
+/**
+ * Dark or light from the `COLORFGBG` environment variable some terminals set, or undefined without a
+ * usable background index. The value is `fg;bg` or `fg;xpm;bg` (rxvt), where a field is an ANSI color
+ * index or `default` when the color is not in the palette. The index refers to the terminal's own palette,
+ * whose colors are unknown here, so it is classified by index like Vim does: 0-6 and 8 (bright black, e.g.
+ * Solarized Dark's background) are dark, 7 and 9-15 are light.
+ */
+export function detectColorFgBgTheme(env = process.env) {
+    const bg = env.COLORFGBG?.split(";").at(-1)?.trim();
+    if (!bg || !/^\d{1,2}$/.test(bg))
+        return undefined;
+    const index = Number(bg);
+    if (index > 15)
+        return undefined;
+    return index <= 6 || index === 8 ? "dark" : "light";
 }
-export async function detectTerminalThemeForAuto({ ui, timeoutMs, env, }) {
-    let colorSchemePromise;
-    try {
-        colorSchemePromise = ui.queryTerminalColorScheme?.({ timeoutMs });
-    }
-    catch {
-        // Fall back to OSC 11 / COLORFGBG detection when starting the color-scheme query fails.
-    }
-    const backgroundThemePromise = detectTerminalBackgroundTheme({ ui, timeoutMs, env });
-    try {
-        const colorScheme = await colorSchemePromise;
-        if (colorScheme)
-            return colorScheme;
-    }
-    catch {
-        // Fall back to the concurrently queried OSC 11 / COLORFGBG detection.
-    }
-    return (await backgroundThemePromise).theme;
+/**
+ * Whether the terminal is dark or light. The background it renders decides, classified the same way the
+ * system theme does. Without a reported background: the terminal's light/dark report, then COLORFGBG,
+ * then dark.
+ */
+export function detectTerminalTheme(colors = {}, reportedScheme, env = process.env) {
+    const { background, foreground } = colors;
+    if (background)
+        return terminalAppearance(background, foreground);
+    return reportedScheme ?? detectColorFgBgTheme(env) ?? "dark";
 }
-export function getDefaultTheme() {
-    return detectTerminalBackgroundFromEnv().theme;
+/** Whether the terminal is dark or light, from everything it reported so far. See `detectTerminalTheme()`. */
+export function getTerminalTheme() {
+    return detectTerminalTheme(terminalColors, terminalColorScheme);
 }
 // ============================================================================
 // Global Theme Instance
 // ============================================================================
-// Use globalThis to share theme across module loaders (tsx + jiti in dev mode)
+// Use globalThis to share theme across module loaders (node + jiti in dev mode)
 const THEME_KEY = Symbol.for("@earendil-works/pi-coding-agent:theme");
 const THEME_KEY_OLD = Symbol.for("@mariozechner/pi-coding-agent:theme");
 // Export theme as a getter that reads from globalThis
-// This ensures all module instances (tsx, jiti) see the same theme
+// This ensures all module instances (node, jiti) see the same theme
 export const theme = new Proxy({}, {
     get(_target, prop) {
         const t = globalThis[THEME_KEY];
@@ -564,7 +539,7 @@ export function setRegisteredThemes(themes) {
     }
 }
 export function initTheme(themeName, enableWatcher = false) {
-    const name = themeName ?? getDefaultTheme();
+    const name = themeName ?? SYSTEM_THEME_NAME;
     currentThemeName = name;
     try {
         setGlobalTheme(loadTheme(name));
@@ -573,9 +548,9 @@ export function initTheme(themeName, enableWatcher = false) {
         }
     }
     catch (_error) {
-        // Theme is invalid - fall back to dark theme silently
-        currentThemeName = "dark";
-        setGlobalTheme(loadTheme("dark"));
+        // Theme is invalid - fall back to the system theme silently
+        currentThemeName = SYSTEM_THEME_NAME;
+        setGlobalTheme(loadTheme(SYSTEM_THEME_NAME));
         // Don't start watcher for fallback theme
     }
 }
@@ -592,9 +567,9 @@ export function setTheme(name, enableWatcher = false) {
         return { success: true };
     }
     catch (error) {
-        // Theme is invalid - fall back to dark theme
-        currentThemeName = "dark";
-        setGlobalTheme(loadTheme("dark"));
+        // Theme is invalid - fall back to the system theme
+        currentThemeName = SYSTEM_THEME_NAME;
+        setGlobalTheme(loadTheme(SYSTEM_THEME_NAME));
         // Don't start watcher for fallback theme
         return {
             success: false,
@@ -616,7 +591,10 @@ export function onThemeChange(callback) {
 function startThemeWatcher() {
     stopThemeWatcher();
     // Only watch if it's a custom theme (not built-in)
-    if (!currentThemeName || currentThemeName === "dark" || currentThemeName === "light") {
+    if (!currentThemeName ||
+        currentThemeName === "dark" ||
+        currentThemeName === "light" ||
+        currentThemeName === SYSTEM_THEME_NAME) {
         return;
     }
     const customThemesDir = getCustomThemesDir();
@@ -685,102 +663,45 @@ export function stopThemeWatcher() {
 // ============================================================================
 // HTML Export Helpers
 // ============================================================================
-/**
- * Convert a 256-color index to hex string.
- * Indices 0-15: basic colors (approximate)
- * Indices 16-231: 6x6x6 color cube
- * Indices 232-255: grayscale ramp
- */
-function ansi256ToHex(index) {
-    // Basic colors (0-15) - approximate common terminal values
-    const basicColors = [
-        "#000000",
-        "#800000",
-        "#008000",
-        "#808000",
-        "#000080",
-        "#800080",
-        "#008080",
-        "#c0c0c0",
-        "#808080",
-        "#ff0000",
-        "#00ff00",
-        "#ffff00",
-        "#0000ff",
-        "#ff00ff",
-        "#00ffff",
-        "#ffffff",
-    ];
-    if (index < 16) {
-        return basicColors[index];
-    }
-    // Color cube (16-231): 6x6x6 = 216 colors
-    if (index < 232) {
-        const cubeIndex = index - 16;
-        const r = Math.floor(cubeIndex / 36);
-        const g = Math.floor((cubeIndex % 36) / 6);
-        const b = cubeIndex % 6;
-        const toHex = (n) => (n === 0 ? 0 : 55 + n * 40).toString(16).padStart(2, "0");
-        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-    }
-    // Grayscale (232-255): 24 shades
-    const gray = 8 + (index - 232) * 10;
-    const grayHex = gray.toString(16).padStart(2, "0");
-    return `#${grayHex}${grayHex}${grayHex}`;
-}
 /**
  * Get resolved theme colors as CSS-compatible hex strings.
  * Used by HTML export to generate CSS custom properties.
  */
 export function getResolvedThemeColors(themeName) {
-    const name = themeName ?? currentThemeName ?? getDefaultTheme();
-    const isLight = name === "light";
-    const themeJson = loadThemeJson(name);
-    const resolved = resolveThemeColors(withThemeColorFallbacks(themeJson.colors), themeJson.vars);
-    // Default text color for empty values (terminal uses default fg color)
-    const defaultText = isLight ? "#000000" : "#e5e5e7";
-    const cssColors = {};
-    for (const [key, value] of Object.entries(resolved)) {
-        if (typeof value === "number") {
-            cssColors[key] = ansi256ToHex(value);
-        }
-        else if (value === "") {
-            // Empty means default terminal color - use sensible fallback for HTML
-            cssColors[key] = defaultText;
-        }
-        else {
-            cssColors[key] = value;
-        }
-    }
-    return cssColors;
+    const colors = loadTheme(themeName ?? currentThemeName ?? SYSTEM_THEME_NAME).colors;
+    return Object.fromEntries(Object.entries(colors).map(([token, color]) => [token, colorToHex(color)]));
 }
 /**
  * Check if a theme is a "light" theme (for CSS that needs light/dark variants).
  */
 export function isLightTheme(themeName) {
-    // Currently just check the name - could be extended to analyze colors
-    return themeName === "light";
+    return loadTheme(themeName ?? currentThemeName ?? SYSTEM_THEME_NAME).appearance === "light";
 }
 /**
  * Get explicit export colors from theme JSON, if specified.
  * Returns undefined for each color that isn't explicitly set.
  */
 export function getThemeExportColors(themeName) {
-    const name = themeName ?? currentThemeName ?? getDefaultTheme();
+    const name = themeName ?? currentThemeName ?? SYSTEM_THEME_NAME;
+    if (name === SYSTEM_THEME_NAME)
+        return {};
     try {
         const themeJson = loadThemeJson(name);
         const exportSection = themeJson.export;
         if (!exportSection)
             return {};
         const vars = themeJson.vars ?? {};
+        // Export colors end up in CSS, which understands hex and oklch() values directly but not okhsl().
         const resolve = (value) => {
             if (value === undefined)
                 return undefined;
             const resolved = resolveVarRefs(value, vars);
             if (typeof resolved === "number")
-                return ansi256ToHex(resolved);
+                return colorToHex(indexedColor(resolved));
             if (resolved === "")
                 return undefined;
+            if (/^okhsl\(/i.test(resolved))
+                return colorToHex(parseColor(resolved));
             return resolved;
         };
         return {
@@ -940,7 +861,7 @@ export function getMarkdownTheme() {
         bold: (text) => theme.bold(text),
         italic: (text) => theme.italic(text),
         underline: (text) => theme.underline(text),
-        strikethrough: (text) => chalk.strikethrough(text),
+        strikethrough: (text) => theme.strikethrough(text),
         highlightCode: (code, lang) => {
             // Validate language before highlighting to avoid stderr spam from cli-highlight
             const validLang = lang && supportsLanguage(lang) ? lang : undefined;