@seanmozeik/markdown-display 0.3.5 → 0.4.0

package/src/ui/themes/index.ts

@@ -0,0 +1,58 @@
+// Src/ui/themes/index.ts
+import { type ThemeId, themeIds, themes } from './generated';
+import type { ThemePalette } from './types';
+
+const DEFAULT_THEME: ThemeId = 'catppuccin-frappe';
+const fallbackTheme: ThemePalette = {
+  colors: {
+    accent: '#8caaee',
+    auxiliary: '#232634',
+    bg: '#303446',
+    emphasis: '#c6d0f5',
+    error: '#e78284',
+    info: '#8caaee',
+    muted: '#838ba7',
+    subtle: '#51576d',
+    success: '#a6d189',
+    surface: '#292c3c',
+    text: '#c6d0f5',
+    warning: '#ef9f76',
+  },
+  id: DEFAULT_THEME,
+  name: 'Catppuccin Frappe',
+  shikiTheme: DEFAULT_THEME,
+  type: 'dark',
+};
+
+const requireTheme = (id: ThemeId): ThemePalette => {
+  const palette = themes[id];
+  return palette ?? themes[DEFAULT_THEME] ?? fallbackTheme;
+};
+
+let activeTheme: ThemePalette = requireTheme(DEFAULT_THEME);
+
+/** Check if a theme ID is valid */
+const isValidTheme = (id: string): id is ThemeId => id in themes;
+
+/** Get a theme by ID, returns default theme if not found */
+const getTheme = (id: string): ThemePalette => {
+  if (isValidTheme(id)) {
+    return requireTheme(id);
+  }
+  return requireTheme(DEFAULT_THEME);
+};
+
+/** Set the active theme */
+const loadTheme = (id: string): void => {
+  activeTheme = getTheme(id);
+};
+
+/** Get the currently active theme */
+const theme = (): ThemePalette => activeTheme;
+
+/** Get all available theme IDs */
+const availableThemes = (): readonly ThemeId[] => themeIds;
+
+export type { ThemeColors, ThemeOverrides, ThemePalette } from './types';
+export { ansiBg, ansiBold, ansiFg, ansiFgBg, ansiItalic, hexToAnsi256 } from './ansi';
+export { availableThemes, getTheme, isValidTheme, loadTheme, theme, themeIds, type ThemeId };

package/src/ui/themes/overrides.ts

@@ -0,0 +1,83 @@
+// Src/ui/themes/overrides.ts
+import type { ThemeOverrides } from './types';
+
+/**
+ * Manual overrides for themes with specific character.
+ * Only define what differs from the auto-extracted base palette.
+ */
+export const themeOverrides: Record<string, ThemeOverrides> = {
+  'catppuccin-frappe': {
+    // Pink
+    bold: '#f4b8e4',
+    // Mauve
+    h1: '#ca9ee6',
+    // Lavender
+    h2: '#babbf1',
+    // Blue
+    h3: '#8caaee',
+    // Teal
+    h4: '#81c8be',
+    // Rosewater on mantle
+    inlineCode: { bg: '#292c3c', fg: '#f2d5cf' },
+    // Sky
+    italic: '#99d1db',
+  },
+  'catppuccin-latte': {
+    bold: '#ea76cb',
+    h1: '#8839ef',
+    h2: '#7287fd',
+    h3: '#1e66f5',
+    h4: '#179299',
+    inlineCode: { bg: '#e6e9ef', fg: '#dc8a78' },
+    italic: '#04a5e5',
+  },
+  'catppuccin-macchiato': {
+    bold: '#f5bde6',
+    h1: '#c6a0f6',
+    h2: '#b7bdf8',
+    h3: '#8aadf4',
+    h4: '#8bd5ca',
+    inlineCode: { bg: '#1e2030', fg: '#f4dbd6' },
+    italic: '#91d7e3',
+  },
+  'catppuccin-mocha': {
+    bold: '#f5c2e7',
+    h1: '#cba6f7',
+    h2: '#b4befe',
+    h3: '#89b4fa',
+    h4: '#94e2d5',
+    inlineCode: { bg: '#181825', fg: '#f5e0dc' },
+    italic: '#89dceb',
+  },
+  dracula: { bold: '#ff79c6', h1: '#bd93f9', h2: '#ff79c6', h3: '#8be9fd', italic: '#8be9fd' },
+  'dracula-soft': {
+    bold: '#ff79c6',
+    h1: '#bd93f9',
+    h2: '#ff79c6',
+    h3: '#8be9fd',
+    italic: '#8be9fd',
+  },
+  nord: { bold: '#88c0d0', h1: '#88c0d0', h2: '#81a1c1', h3: '#5e81ac', italic: '#81a1c1' },
+  'rose-pine': { bold: '#ebbcba', h1: '#c4a7e7', h2: '#ebbcba', h3: '#9ccfd8', italic: '#9ccfd8' },
+  'rose-pine-dawn': {
+    bold: '#d7827e',
+    h1: '#907aa9',
+    h2: '#d7827e',
+    h3: '#56949f',
+    italic: '#56949f',
+  },
+  'rose-pine-moon': {
+    bold: '#ebbcba',
+    h1: '#c4a7e7',
+    h2: '#ebbcba',
+    h3: '#9ccfd8',
+    italic: '#9ccfd8',
+  },
+  'tokyo-night': {
+    bold: '#bb9af7',
+    h1: '#bb9af7',
+    h2: '#7aa2f7',
+    h3: '#7dcfff',
+    italic: '#7dcfff',
+  },
+};

package/src/ui/themes/semantic.ts

@@ -0,0 +1,125 @@
+// Src/ui/themes/semantic.ts
+
+import { ansiBold, ansiFg, ansiFgBg, ansiFgTransition, ansiItalic } from './ansi';
+import { theme } from './index';
+
+type StyleFn = (text: string) => string;
+
+interface HexColors {
+  accent: string;
+  h1: string;
+  subtle: string;
+}
+
+interface GradientColors {
+  banner: string[];
+  error: string[];
+  success: string[];
+}
+
+/** Get bold text style (uses override or emphasis color) */
+export const getBoldStyle = (): StyleFn => {
+  const t = theme();
+  const color = t.overrides?.bold ?? t.colors.emphasis;
+  return ansiBold(color);
+};
+
+/** Get italic text style (uses override or auxiliary color) */
+export const getItalicStyle = (): StyleFn => {
+  const t = theme();
+  const color = t.overrides?.italic ?? t.colors.auxiliary;
+  return ansiItalic(color);
+};
+
+/** Get inline code style (fg + bg) */
+export const getInlineCodeStyle = (): StyleFn => {
+  const t = theme();
+  if (t.overrides?.inlineCode) {
+    return ansiFgBg(t.overrides.inlineCode.fg, t.overrides.inlineCode.bg);
+  }
+  return ansiFgBg(t.colors.accent, t.colors.surface);
+};
+
+/** Get heading color by level (1-5) */
+export const getHeadingColor = (level: number): StyleFn => {
+  const t = theme();
+  const o = t.overrides;
+  const heading = o?.heading;
+
+  switch (level) {
+    case 1: {
+      return ansiFg(o?.h1 ?? heading ?? t.colors.accent);
+    }
+    case 2: {
+      return ansiFg(o?.h2 ?? heading ?? t.colors.accent);
+    }
+    case 3: {
+      return ansiFg(o?.h3 ?? heading ?? t.colors.info);
+    }
+    case 4: {
+      return ansiFg(o?.h4 ?? heading ?? t.colors.auxiliary);
+    }
+    default: {
+      return ansiFg(t.colors.muted);
+    }
+  }
+};
+
+/** Get link color */
+export const getLinkColor = (): StyleFn => {
+  const t = theme();
+  return ansiFg(t.overrides?.link ?? t.colors.accent);
+};
+
+/** Get body text color */
+export const getTextColor = (): StyleFn => ansiFg(theme().colors.text);
+
+/** Get muted/secondary text color */
+export const getMutedColor = (): StyleFn => ansiFg(theme().colors.muted);
+
+/** Get subtle/border color */
+export const getSubtleColor = (): StyleFn => ansiFg(theme().colors.subtle);
+
+/** Get error color */
+export const getErrorColor = (): StyleFn => ansiFg(theme().colors.error);
+
+/** Get success color */
+export const getSuccessColor = (): StyleFn => ansiFg(theme().colors.success);
+
+/** Get accent color (headings, links, list markers) */
+export const getAccentColor = (): StyleFn => ansiFg(theme().colors.accent);
+
+/** Get hex color values for libraries that need hex (boxen, gradient-string) */
+export const getHexColors = (): HexColors => {
+  const t = theme();
+  return {
+    accent: t.colors.accent,
+    h1: t.overrides?.h1 ?? t.overrides?.heading ?? t.colors.accent,
+    subtle: t.colors.subtle,
+  };
+};
+
+/** Style box title that transitions back to border color instead of resetting */
+export const getBoxTitleStyle = (): StyleFn => {
+  const t = theme();
+  const titleColor = t.overrides?.link ?? t.colors.accent;
+  const borderColor = t.colors.subtle;
+  return ansiFgTransition(titleColor, borderColor);
+};
+
+/** Get gradient color arrays for gradient-string library */
+export const getGradientColors = (): GradientColors => {
+  const t = theme();
+  const o = t.overrides;
+
+  const banner = [
+    o?.h1 ?? o?.heading ?? t.colors.accent,
+    o?.bold ?? o?.h2 ?? t.colors.emphasis,
+    o?.h2 ?? t.colors.info,
+  ];
+
+  const success = [t.colors.success, t.colors.info];
+  const error = [t.colors.error, t.colors.warning];
+
+  return { banner, error, success };
+};

package/src/ui/themes/types.ts

@@ -0,0 +1,67 @@
+// Src/ui/themes/types.ts
+
+/** Core color roles for markdown rendering */
+export interface ThemeColors {
+  /** Main background */
+  bg: string;
+  /** Elevated surfaces (code blocks, boxes) */
+  surface: string;
+  /** Body text */
+  text: string;
+  /** Secondary text, blockquotes */
+  muted: string;
+  /** Borders, decorations */
+  subtle: string;
+  /** Headings, links */
+  accent: string;
+  /** Bold text */
+  emphasis: string;
+  /** Italic text */
+  auxiliary: string;
+  error: string;
+  warning: string;
+  success: string;
+  info: string;
+}
+
+/** Optional overrides for theme-specific character */
+export interface ThemeOverrides {
+  bold?: string;
+  italic?: string;
+  inlineCode?: { fg: string; bg: string };
+  link?: string;
+  heading?: string;
+  h1?: string;
+  h2?: string;
+  h3?: string;
+  h4?: string;
+}
+
+/** Complete theme definition */
+export interface ThemePalette {
+  /** Display name (e.g., "Catppuccin Frappe") */
+  name: string;
+  /** Theme ID (e.g., "catppuccin-frappe") */
+  id: string;
+  /** Shiki theme ID for code highlighting */
+  shikiTheme: string;
+  type: 'light' | 'dark';
+  colors: ThemeColors;
+  overrides?: ThemeOverrides;
+}
+
+/** Mapping from Shiki theme JSON keys to our color roles */
+export interface ShikiColorMapping {
+  bg: string;
+  surface: string;
+  text: string;
+  muted: string;
+  subtle: string;
+  accent: string;
+  emphasis: string;
+  auxiliary: string;
+  error: string;
+  warning: string;
+  success: string;
+  info: string;
+}