- {/* Terminal Preview */}
-
-
-
- {SAMPLE_LOGS.map((log, i) => (
-
- ))}
-
-
-
- Theme: {currentThemeName}
-
-
-
-
- {/* Browser Console Preview */}
-
-
-
-
- Browser Console
-
-
-
- {SAMPLE_LOGS.map((log, i) => (
-
- ))}
-
-
-
- Theme: {currentThemeName}
-
-
-
+
+
- {/* Integration Examples */}
Quick Integration
-
-
-
- {`import { getLogsDX } from 'logsdx'
+
-
-
- Theme: {currentThemeName}
-
-
-
-
-
-
-
-
- Auto Theme Detection
-
-
-
- {`import { getLogsDX } from 'logsdx'
+ />
+
-
-
- Theme: {currentThemeName}
-
-
-
+// Logs adapt to user's theme preference
+console.log(logger.processLine('[INFO] Adaptive theming'))`}
+ />
- {/* Popular Logger Integration */}
Logger Integration Examples
-
-
-
- {`import winston from 'winston'
+ {
return logsDX.processLine(info.message)
})
})`}
-
-
-
- Theme: {currentThemeName}
-
-
-
-
-
-
-
- {`import pino from 'pino'
+ />
+
-
-
- Theme: {currentThemeName}
-
-
-
-
-
-
-
-
- Console Override
-
-
-
- {`import { getLogsDX } from 'logsdx'
-
-const logsDX = getLogsDX('${currentThemeName}')
+ />
+ {
)
originalLog(...styled)
}`}
-
-
-
- Theme: {currentThemeName}
-
-
-
+ />
diff --git a/site/components/log-playground/ThemeSelector.tsx b/site/components/log-playground/ThemeSelector.tsx
new file mode 100644
index 0000000..6df715d
--- /dev/null
+++ b/site/components/log-playground/ThemeSelector.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { AVAILABLE_THEMES, THEME_LABELS } from "./constants";
+
+interface ThemeSelectorProps {
+ value: string;
+ onChange: (theme: string) => void;
+}
+
+export function ThemeSelector({ value, onChange }: ThemeSelectorProps) {
+ return (
+
+
+
+
+ );
+}
diff --git a/site/components/log-playground/constants.ts b/site/components/log-playground/constants.ts
new file mode 100644
index 0000000..c3aebd9
--- /dev/null
+++ b/site/components/log-playground/constants.ts
@@ -0,0 +1,71 @@
+export const DEFAULT_LOGS = `[2024-01-15 10:23:45] INFO: Application starting...
+[2024-01-15 10:23:46] DEBUG: Loading configuration from /etc/app/config.json
+[2024-01-15 10:23:47] SUCCESS: Database connected to postgres://localhost:5432/myapp
+[2024-01-15 10:23:48] WARN: Memory usage at 75% - consider scaling
+[2024-01-15 10:23:49] ERROR: Failed to connect to Redis: ECONNREFUSED 127.0.0.1:6379
+GET /api/users 200 OK (45ms)
+POST /api/auth/login 401 Unauthorized (12ms)
+{"level":"info","message":"User logged in","userId":123,"timestamp":"2024-01-15T10:23:50Z"}
+Processing batch job... [āāāāāāāāāāāāāāāāāāāā] 100%
+ā All 42 tests passed in 3.2s`;
+
+export const AVAILABLE_THEMES = [
+ "oh-my-zsh",
+ "dracula",
+ "nord",
+ "monokai",
+ "github-light",
+ "github-dark",
+ "solarized-light",
+ "solarized-dark",
+] as const;
+
+export const THEME_LABELS: Record
= {
+ "oh-my-zsh": "Oh My Zsh",
+ dracula: "Dracula",
+ nord: "Nord",
+ monokai: "Monokai",
+ "github-light": "GitHub Light",
+ "github-dark": "GitHub Dark",
+ "solarized-light": "Solarized Light",
+ "solarized-dark": "Solarized Dark",
+};
+
+export const TEXT_TITLE_HIGHLIGHT = "Live";
+export const TEXT_TITLE_REST = "Log Playground";
+export const TEXT_DESCRIPTION =
+ "Paste your logs below and see them transformed in real-time";
+export const TEXT_CARD_TITLE = "Try It Yourself";
+export const TEXT_LABEL_INPUT_LOGS = "Input Logs";
+export const TEXT_LABEL_INPUT_PLACEHOLDER = "Paste your logs here...";
+export const TEXT_LABEL_BROWSER_CONSOLE = "Browser Console";
+export const TEXT_LABEL_TERMINAL = "Terminal";
+export const TEXT_LABEL_RESET = "Reset";
+
+export const CLASS_SECTION = "py-24 bg-white dark:bg-slate-950";
+export const CLASS_CONTAINER = "container mx-auto px-4";
+export const CLASS_WRAPPER = "mx-auto max-w-6xl";
+export const CLASS_HEADER_TITLE =
+ "mb-4 text-center text-5xl lg:text-6xl font-bold";
+export const CLASS_HEADER_GRADIENT =
+ "bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent";
+export const CLASS_HEADER_DESCRIPTION =
+ "mb-12 text-center text-xl text-slate-600 dark:text-slate-400";
+export const CLASS_CARD_HEADER =
+ "flex flex-row items-center justify-between pb-4";
+export const CLASS_CARD_TITLE = "text-xl";
+export const CLASS_CARD_CONTROLS = "flex items-center gap-4";
+export const CLASS_CARD_CONTENT = "pt-0";
+export const CLASS_MAIN_GRID = "grid lg:grid-cols-3 gap-4";
+export const CLASS_PANE_WRAPPER =
+ "border rounded-lg overflow-hidden dark:border-slate-700";
+export const CLASS_PANE_HEADER =
+ "px-4 py-2 bg-slate-800 text-white text-sm font-medium";
+export const CLASS_TEXTAREA =
+ "w-full h-full min-h-[400px] p-4 font-mono text-sm bg-slate-50 dark:bg-slate-900 border-0 resize-none focus:outline-none";
+export const CLASS_OUTPUT_CONTENT =
+ "flex-1 p-4 font-mono text-xs overflow-auto min-h-[400px]";
+
+export const HEADER_DROP_SHADOW = "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))";
+export const LIGHT_BG = "#ffffff";
+export const DARK_BG = "#1e1e1e";
diff --git a/site/components/log-playground/index.tsx b/site/components/log-playground/index.tsx
new file mode 100644
index 0000000..ac9a2ae
--- /dev/null
+++ b/site/components/log-playground/index.tsx
@@ -0,0 +1,325 @@
+"use client";
+
+import React, { useState, useCallback, useMemo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { RotateCcw } from "lucide-react";
+import { useThemeProcessor } from "@/hooks/useThemeProcessor";
+import { ThemeSelector } from "./ThemeSelector";
+import { GhosttyTerminal } from "../output-comparison/GhosttyTerminal";
+import { themeToGhostty } from "../output-comparison/utils";
+import type { GhosttyTheme } from "../output-comparison/types";
+import type {
+ LogPlaygroundProps,
+ OutputPaneProps,
+ CardControlsProps,
+ TerminalPaneProps,
+ PlaygroundPanelsProps,
+ InputPaneProps,
+} from "./types";
+import {
+ DEFAULT_LOGS,
+ TEXT_TITLE_HIGHLIGHT,
+ TEXT_TITLE_REST,
+ TEXT_DESCRIPTION,
+ TEXT_CARD_TITLE,
+ TEXT_LABEL_INPUT_LOGS,
+ TEXT_LABEL_INPUT_PLACEHOLDER,
+ TEXT_LABEL_BROWSER_CONSOLE,
+ TEXT_LABEL_TERMINAL,
+ TEXT_LABEL_RESET,
+ CLASS_SECTION,
+ CLASS_CONTAINER,
+ CLASS_WRAPPER,
+ CLASS_HEADER_TITLE,
+ CLASS_HEADER_GRADIENT,
+ CLASS_HEADER_DESCRIPTION,
+ CLASS_CARD_HEADER,
+ CLASS_CARD_TITLE,
+ CLASS_CARD_CONTROLS,
+ CLASS_CARD_CONTENT,
+ CLASS_MAIN_GRID,
+ CLASS_PANE_WRAPPER,
+ CLASS_PANE_HEADER,
+ CLASS_TEXTAREA,
+ CLASS_OUTPUT_CONTENT,
+ HEADER_DROP_SHADOW,
+ LIGHT_BG,
+ DARK_BG,
+} from "./constants";
+
+const HEADER_STYLE = { filter: HEADER_DROP_SHADOW };
+
+function OutputPaneHeader({ title }: { title: string }) {
+ return {title}
;
+}
+
+function OutputPaneLoading({ backgroundColor }: { backgroundColor: string }) {
+ return (
+
+ );
+}
+
+function OutputPaneItems({
+ content,
+ backgroundColor,
+}: {
+ content: string[];
+ backgroundColor: string;
+}) {
+ const items = content.map((line, i) => {
+ const htmlContent = { __html: line };
+ return (
+
+ );
+ });
+ return (
+
+ );
+}
+
+function OutputPaneContent({
+ content,
+ backgroundColor,
+ isLoading,
+}: Omit) {
+ if (isLoading) return ;
+ return (
+
+ );
+}
+
+function OutputPane({
+ title,
+ content,
+ backgroundColor,
+ isLoading,
+}: OutputPaneProps) {
+ const wrapperClass = `${CLASS_PANE_WRAPPER} flex flex-col h-full`;
+ return (
+
+
+
+
+ );
+}
+
+function InputPane({ value, onChange, placeholder }: InputPaneProps) {
+ const handleChange = (e: React.ChangeEvent) =>
+ onChange(e.target.value);
+ const wrapperClass = `${CLASS_PANE_WRAPPER} flex flex-col h-full`;
+ return (
+
+
{TEXT_LABEL_INPUT_LOGS}
+
+
+
+ {TEXT_TITLE_HIGHLIGHT}{" "}
+ {TEXT_TITLE_REST}
+
+
{TEXT_DESCRIPTION}
+
+
+
+
+ );
+}
+
+function TerminalPaneLoading({ bgColor }: { bgColor: string }) {
+ return (
+
+ );
+}
+
+function TerminalPane({
+ ansiContent,
+ ghosttyTheme,
+ isLoading,
+ bgColor,
+}: TerminalPaneProps) {
+ const wrapperClass = `${CLASS_PANE_WRAPPER} flex flex-col h-full`;
+ const showLoading = !ghosttyTheme || isLoading;
+
+ return (
+
+
+ {showLoading &&
}
+ {ghosttyTheme && !isLoading && (
+
+
+
+ )}
+
+
+
+
+
+ );
+}
+
+export function LogPlayground({
+ defaultTheme = "dracula",
+ defaultLogs = DEFAULT_LOGS,
+}: LogPlaygroundProps) {
+ const state = usePlaygroundState(defaultLogs, defaultTheme);
+
+ return (
+
+
+
+
+
+
+
+ {TEXT_CARD_TITLE}
+
+
+
+
+
+
+
+
+
Preview
;
+}
+
+export function NavCard({
+ title,
+ href,
+ previewLight,
+ previewDark,
+}: NavCardProps) {
+ const [mounted, setMounted] = useState(false);
+ const { resolvedTheme } = useTheme();
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ const handleClick = () => {
+ const element = document.querySelector(href);
+ if (element) {
+ element.scrollIntoView({ behavior: "smooth" });
+ }
+ };
+
+ const lightSrc = previewLight || previewDark;
+ const darkSrc = previewDark || previewLight;
+ const isDark = mounted && resolvedTheme === "dark";
+ const preview = isDark ? darkSrc : lightSrc;
+
+ const previewContent = preview ? (
+
+ ) : (
+
+ );
+
+ return (
+
+ );
+}
+
+export type { NavCardProps } from "./types";
diff --git a/site/components/nav-card/types.ts b/site/components/nav-card/types.ts
new file mode 100644
index 0000000..c61c998
--- /dev/null
+++ b/site/components/nav-card/types.ts
@@ -0,0 +1,6 @@
+export interface NavCardProps {
+ title: string;
+ href: string;
+ previewLight?: string;
+ previewDark?: string;
+}
diff --git a/site/components/output-comparison/GhosttyTerminal.tsx b/site/components/output-comparison/GhosttyTerminal.tsx
new file mode 100644
index 0000000..e78c1bb
--- /dev/null
+++ b/site/components/output-comparison/GhosttyTerminal.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import type { GhosttyTerminalProps } from "./types";
+import { TERMINAL } from "./constants";
+
+export function GhosttyTerminal({
+ ansiOutputs,
+ isLoading,
+ theme,
+}: GhosttyTerminalProps) {
+ const containerRef = useRef(null);
+ const terminalRef = useRef(null);
+ const [isInitialized, setIsInitialized] = useState(false);
+ const [error, setError] = useState(null);
+ const [retryCount, setRetryCount] = useState(0);
+
+ const initTerminal = useCallback(
+ async (mounted: { current: boolean }) => {
+ if (!containerRef.current) return;
+
+ setError(null);
+
+ try {
+ const initPromise = (async () => {
+ const ghostty = await import("ghostty-web");
+ await ghostty.init();
+ return ghostty;
+ })();
+
+ const timeoutPromise = new Promise((_, reject) => {
+ setTimeout(
+ () => reject(new Error("Terminal initialization timed out")),
+ TERMINAL.initTimeoutMs,
+ );
+ });
+
+ const ghostty = (await Promise.race([
+ initPromise,
+ timeoutPromise,
+ ])) as typeof import("ghostty-web");
+
+ if (!mounted.current || !containerRef.current) return;
+
+ containerRef.current.innerHTML = "";
+
+ const term = new ghostty.Terminal({
+ fontSize: TERMINAL.fontSize,
+ fontFamily: TERMINAL.fontFamily,
+ theme,
+ });
+
+ term.open(containerRef.current);
+ terminalRef.current = term;
+ setIsInitialized(true);
+ } catch (err) {
+ console.error("Failed to initialize Ghostty terminal:", err);
+ if (mounted.current) {
+ setError(
+ err instanceof Error ? err.message : "Failed to load terminal",
+ );
+ }
+ }
+ },
+ [theme],
+ );
+
+ const handleRetry = useCallback(() => {
+ setRetryCount((c) => c + 1);
+ setError(null);
+ setIsInitialized(false);
+ }, []);
+
+ useEffect(() => {
+ const mounted = { current: true };
+
+ initTerminal(mounted);
+
+ return () => {
+ mounted.current = false;
+ if (
+ terminalRef.current &&
+ typeof (terminalRef.current as { dispose?: () => void }).dispose ===
+ "function"
+ ) {
+ (terminalRef.current as { dispose: () => void }).dispose();
+ }
+ };
+ }, [initTerminal, retryCount]);
+
+ useEffect(() => {
+ if (!isInitialized || !terminalRef.current || isLoading) return;
+
+ const term = terminalRef.current as {
+ write: (data: string) => void;
+ clear: () => void;
+ };
+
+ term.clear();
+
+ for (const output of ansiOutputs) {
+ term.write(output + "\r\n");
+ }
+ }, [ansiOutputs, isInitialized, isLoading]);
+
+ if (error) {
+ return (
+
+
+
Terminal failed to load
+
{error}
+
+
+
+
+
Loading terminal...
+
Powered by Ghostty WASM
+
+
+ {showLoading && loadingOverlay}
+
+
+ {TEXT.labels.loadingTerminal}
+
+);
+
+const GhosttyTerminal = dynamic(
+ () => import("./GhosttyTerminal").then((mod) => mod.GhosttyTerminal),
+ { ssr: false, loading: TerminalLoader },
+);
+
+function escapeHtmlForDisplay(html: string): string {
+ return html
+ .replace(/&/g, "&")
+ .replace(//g, ">");
+}
+
+const WINDOW_DOTS = ["red", "yellow", "green"] as const;
+const MODE_BUTTONS = [
+ { id: "rendered", label: "Rendered" },
+ { id: "source", label: "Source" },
+] as const;
+
+interface TerminalWindowProps {
+ title: string;
+ mode: ViewMode;
+ onModeChange: (mode: ViewMode) => void;
+ bgColor: string;
+ children: React.ReactNode;
+}
+
+function TerminalWindowDots() {
+ const dots = WINDOW_DOTS.map((color) => {
+ const dotClass = CLASSES.terminal.dot[color];
+ return ;
+ });
+ return {dots}
;
+}
+
+interface ModeButtonsProps {
+ mode: ViewMode;
+ onModeChange: (mode: ViewMode) => void;
+}
+
+function getModeButtonClass(isActive: boolean): string {
+ const base = "px-2 py-1 text-xs rounded transition-colors";
+ if (isActive) return `${base} bg-white/20 text-white`;
+ return `${base} text-white/60 hover:text-white hover:bg-white/10`;
+}
+
+function ModeButtons({ mode, onModeChange }: ModeButtonsProps) {
+ const buttons = MODE_BUTTONS.map(({ id, label }) => {
+ const isActive = mode === id;
+ const className = getModeButtonClass(isActive);
+ const handleClick = () => onModeChange(id as ViewMode);
+ return (
+
+ );
+ });
+ return {buttons}
;
+}
+
+function TerminalWindow({
+ title,
+ mode,
+ onModeChange,
+ bgColor,
+ children,
+}: TerminalWindowProps) {
+ const wrapperClass = `${CLASSES.terminal.wrapper} h-full flex flex-col`;
+ const contentClass = `${CLASSES.terminal.content} flex-1`;
+ const contentStyle = { backgroundColor: bgColor };
+
+ return (
+
+
+
+ {title}
+
+
+
+ {children}
+
+
+
+
+
{themeButtons}
+
+
{TEXT.labels.significance}
+
+ {output.ansiVisible}
+
+ ));
+ return {items}
;
+}
+
+function TerminalContent({
+ isLoading,
+ mode,
+ outputs,
+ ghosttyTheme,
+}: TerminalContentProps) {
+ if (isLoading) {
+ return (
+
+ {TEXT.labels.processing}
+
+ );
+ }
+ if (mode === "rendered") {
+ const ansiOutputs = outputs.map((o) => o.ansi);
+ return (
+
+ );
+ }
+ return ;
+}
+
+interface BrowserContentProps {
+ isLoading: boolean;
+ mode: ViewMode;
+ outputs: ProcessedOutput[];
+}
+
+function BrowserContentRendered({ outputs }: { outputs: ProcessedOutput[] }) {
+ const items = outputs.map((output, i) => {
+ const htmlContent = { __html: output.html };
+ return (
+
+ );
+ });
+ return {items}
;
+}
+
+function BrowserContentSource({ outputs }: { outputs: ProcessedOutput[] }) {
+ const items = outputs.map((output, i) => {
+ const escaped = escapeHtmlForDisplay(output.html);
+ return (
+
+ {escaped}
+
+ );
+ });
+ return {items}
;
+}
+
+function BrowserContent({ isLoading, mode, outputs }: BrowserContentProps) {
+ if (isLoading) {
+ return (
+
+ {TEXT.labels.processing}
+
+ );
+ }
+ if (mode === "rendered") {
+ return ;
+ }
+ return ;
+}
+
+function useThemeLoader(themeName: string) {
+ const [outputs, setOutputs] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [ghosttyTheme, setGhosttyTheme] = useState(DEFAULT_GHOSTTY_THEME);
+
+ useEffect(() => {
+ let cancelled = false;
+ setIsLoading(true);
+
+ getTheme(themeName)
+ .then((loadedTheme) => {
+ if (cancelled) return;
+ setGhosttyTheme(themeToGhostty(loadedTheme));
+ setOutputs(processLogsWithTheme(SAMPLE_LOGS, loadedTheme));
+ })
+ .catch(
+ (err) => !cancelled && console.error("Failed to process logs:", err),
+ )
+ .finally(() => !cancelled && setIsLoading(false));
+
+ return () => {
+ cancelled = true;
+ };
+ }, [themeName]);
+
+ return { outputs, isLoading, ghosttyTheme };
+}
+
+function SectionHeader() {
+ const headerStyle = { filter: STYLES.headerDropShadow };
+ return (
+ <>
+
+ {TEXT.title.highlight}{" "}
+ {TEXT.title.rest}
+
+ {TEXT.description}
+
+ );
+}
+
+interface OutputPanelsProps {
+ terminalMode: ViewMode;
+ browserMode: ViewMode;
+ onTerminalModeChange: (mode: ViewMode) => void;
+ onBrowserModeChange: (mode: ViewMode) => void;
+ outputs: ProcessedOutput[];
+ isLoading: boolean;
+ ghosttyTheme: GhosttyTheme;
+}
+
+function OutputPanels({
+ terminalMode,
+ browserMode,
+ onTerminalModeChange,
+ onBrowserModeChange,
+ outputs,
+ isLoading,
+ ghosttyTheme,
+}: OutputPanelsProps) {
+ const bgColor = ghosttyTheme.background;
+ return (
+
+ );
+}
+
+function useOutputComparisonState() {
+ const [themeName, setThemeName] = useState("dracula");
+ const [terminalMode, setTerminalMode] = useState("rendered");
+ const [browserMode, setBrowserMode] = useState("rendered");
+ const themeData = useThemeLoader(themeName);
+ return {
+ themeName,
+ setThemeName,
+ terminalMode,
+ setTerminalMode,
+ browserMode,
+ setBrowserMode,
+ ...themeData,
+ };
+}
+
+function buildPanelProps(
+ state: ReturnType,
+): OutputPanelsProps {
+ return {
+ terminalMode: state.terminalMode,
+ browserMode: state.browserMode,
+ onTerminalModeChange: state.setTerminalMode,
+ onBrowserModeChange: state.setBrowserMode,
+ outputs: state.outputs,
+ isLoading: state.isLoading,
+ ghosttyTheme: state.ghosttyTheme,
+ };
+}
+
+function OutputComparisonContent() {
+ const state = useOutputComparisonState();
+ const panelProps = buildPanelProps(state);
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+
+export function OutputComparison() {
+ return (
+
+ );
+}
+
+export { GhosttyTerminal } from "./GhosttyTerminal";
+export type {
+ OutputComparisonProps,
+ OutputView,
+ ViewMode,
+ GhosttyTerminalProps,
+} from "./types";
diff --git a/site/components/output-comparison/types.ts b/site/components/output-comparison/types.ts
new file mode 100644
index 0000000..5005f4d
--- /dev/null
+++ b/site/components/output-comparison/types.ts
@@ -0,0 +1,42 @@
+export interface OutputComparisonProps {
+ initialTheme?: string;
+}
+
+export interface ProcessedOutput {
+ ansi: string;
+ html: string;
+ ansiVisible: string;
+}
+
+export type OutputView = "terminal" | "html";
+export type ViewMode = "rendered" | "source";
+
+export interface GhosttyTerminalProps {
+ ansiOutputs: string[];
+ isLoading: boolean;
+ theme: GhosttyTheme;
+}
+
+export interface GhosttyTheme {
+ background: string;
+ foreground: string;
+ cursor: string;
+ cursorAccent: string;
+ selectionBackground: string;
+ black: string;
+ red: string;
+ green: string;
+ yellow: string;
+ blue: string;
+ magenta: string;
+ cyan: string;
+ white: string;
+ brightBlack: string;
+ brightRed: string;
+ brightGreen: string;
+ brightYellow: string;
+ brightBlue: string;
+ brightMagenta: string;
+ brightCyan: string;
+ brightWhite: string;
+}
diff --git a/site/components/output-comparison/utils.ts b/site/components/output-comparison/utils.ts
new file mode 100644
index 0000000..6f8dcbb
--- /dev/null
+++ b/site/components/output-comparison/utils.ts
@@ -0,0 +1,133 @@
+import type { Theme } from "logsdx";
+import { renderLine } from "logsdx";
+import type { GhosttyTheme, ProcessedOutput } from "./types";
+import { ANSI_ESCAPE_REPLACEMENTS } from "./constants";
+
+function escapeAnsiForDisplay(ansi: string): string {
+ return ANSI_ESCAPE_REPLACEMENTS.reduce(
+ (s, [pattern, replacement]) => s.replace(pattern, replacement),
+ ansi,
+ );
+}
+
+export function processLogsWithTheme(
+ logs: string[],
+ theme: Theme,
+): ProcessedOutput[] {
+ return logs.map((log) => {
+ const ansi = renderLine(log, theme, { outputFormat: "ansi" });
+ const html = renderLine(log, theme, {
+ outputFormat: "html",
+ htmlStyleFormat: "css",
+ escapeHtml: true,
+ });
+ return { ansi, html, ansiVisible: escapeAnsiForDisplay(ansi) };
+ });
+}
+
+function adjustBrightness(hex: string, percent: number): string {
+ const num = parseInt(hex.replace("#", ""), 16);
+ const r = Math.min(
+ 255,
+ Math.max(0, ((num >> 16) & 255) + Math.round((255 * percent) / 100)),
+ );
+ const g = Math.min(
+ 255,
+ Math.max(0, ((num >> 8) & 255) + Math.round((255 * percent) / 100)),
+ );
+ const b = Math.min(
+ 255,
+ Math.max(0, (num & 255) + Math.round((255 * percent) / 100)),
+ );
+ return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
+}
+
+const DARK = {
+ bg: "#1e1e1e",
+ fg: "#d4d4d4",
+ black: "#000000",
+ white: "",
+ selBrightness: 20,
+};
+const LIGHT = {
+ bg: "#ffffff",
+ fg: "#1e1e1e",
+ black: "",
+ white: "#e5e5e5",
+ selBrightness: -15,
+};
+const ANSI = {
+ red: "#cd3131",
+ green: "#0dbc79",
+ yellow: "#e5e510",
+ blue: "#2472c8",
+ magenta: "#bc3fbc",
+ cyan: "#11a8cd",
+ muted: "#666666",
+};
+
+function or(a: T | undefined, b: T): T {
+ if (a !== undefined) return a;
+ return b;
+}
+
+function getModeDefaults(theme: Theme) {
+ if (theme.mode === "dark" || theme.mode === "auto") return DARK;
+ return LIGHT;
+}
+
+function getSemanticColors(colors: NonNullable) {
+ const blue = or(colors.primary, or(colors.info, ANSI.blue));
+ const cyan = or(colors.info, or(colors.secondary, ANSI.cyan));
+ return {
+ red: or(colors.error, ANSI.red),
+ green: or(colors.success, ANSI.green),
+ yellow: or(colors.warning, ANSI.yellow),
+ blue,
+ magenta: or(colors.debug, ANSI.magenta),
+ cyan,
+ muted: or(colors.muted, ANSI.muted),
+ };
+}
+
+function getBrightColors(base: ReturnType) {
+ return {
+ brightRed: adjustBrightness(base.red, 15),
+ brightGreen: adjustBrightness(base.green, 15),
+ brightYellow: adjustBrightness(base.yellow, 15),
+ brightBlue: adjustBrightness(base.blue, 15),
+ brightMagenta: adjustBrightness(base.magenta, 15),
+ brightCyan: adjustBrightness(base.cyan, 15),
+ };
+}
+
+function getDerivedColors(mode: typeof DARK, bg: string, fg: string) {
+ const black = mode.black || adjustBrightness(bg, -10);
+ const white = mode.white || fg;
+ const selection = adjustBrightness(bg, mode.selBrightness);
+ return { black, white, selection };
+}
+
+export function themeToGhostty(theme: Theme): GhosttyTheme {
+ const mode = getModeDefaults(theme);
+ const colors = theme.colors || {};
+ const bg = or(colors.background, mode.bg);
+ const fg = or(colors.text, mode.fg);
+ const semantic = getSemanticColors(colors);
+ const bright = getBrightColors(semantic);
+ const derived = getDerivedColors(mode, bg, fg);
+
+ return {
+ background: bg,
+ foreground: fg,
+ cursor: fg,
+ cursorAccent: bg,
+ selectionBackground: derived.selection,
+ black: derived.black,
+ white: derived.white,
+ ...semantic,
+ brightBlack: semantic.muted,
+ ...bright,
+ brightWhite: "#ffffff",
+ };
+}
diff --git a/site/components/schema-viz/constants.ts b/site/components/schema-viz/constants.ts
new file mode 100644
index 0000000..9d3ab1e
--- /dev/null
+++ b/site/components/schema-viz/constants.ts
@@ -0,0 +1,228 @@
+import type { SchemaSection } from "./types";
+
+export const TEXT = {
+ title: {
+ highlight: "Theme",
+ rest: "Schema",
+ },
+ description: "Understand how themes work under the hood",
+ labels: {
+ matchingPriority: "Matching Priority",
+ exampleTheme: "Example Theme",
+ howMatching: "How Matching Works",
+ required: "required",
+ themeJson: "my-theme.json",
+ },
+ matchingSteps: [
+ "Log line is tokenized into individual words and symbols",
+ "Each token is checked against matching rules in priority order",
+ "First matching rule determines the token's style",
+ "Unmatched tokens use defaultStyle",
+ "Styled tokens are rendered as ANSI or HTML",
+ ],
+} as const;
+
+export const CLASSES = {
+ section: "py-24",
+ container: "container mx-auto px-4",
+ wrapper: "mx-auto max-w-6xl",
+ header: {
+ title: "mb-4 text-center text-5xl lg:text-6xl font-bold",
+ gradient:
+ "bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent",
+ description: "mb-12 text-center text-xl text-slate-600 dark:text-slate-400",
+ },
+ grid: "grid gap-8 lg:grid-cols-2",
+ tabs: {
+ wrapper: "flex gap-2 mb-6 flex-wrap",
+ button: {
+ base: "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
+ active: "bg-blue-600 text-white",
+ inactive:
+ "bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600",
+ },
+ },
+ card: "bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700",
+ sectionTitle: "text-xl font-bold mb-2 text-blue-600 dark:text-blue-400",
+ sectionDescription: "text-slate-600 dark:text-slate-400 mb-6",
+ propertyList: "space-y-4",
+ property: {
+ wrapper: "border-l-2 border-blue-600/30 pl-4",
+ header: "flex items-center gap-2 mb-1",
+ name: "text-blue-600 dark:text-blue-400 font-semibold",
+ required:
+ "text-xs bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 px-1.5 py-0.5 rounded",
+ type: "text-xs text-slate-500 dark:text-slate-400",
+ description: "text-sm text-slate-600 dark:text-slate-400",
+ example: "text-xs text-slate-500 dark:text-slate-500 mt-1 block",
+ },
+ priority: {
+ wrapper: "space-y-2",
+ item: "flex items-center gap-3",
+ number:
+ "w-6 h-6 rounded-full bg-blue-600/20 text-blue-600 dark:text-blue-400 text-xs flex items-center justify-center font-bold",
+ name: "text-sm text-blue-600 dark:text-blue-400",
+ description: "text-xs text-slate-500",
+ },
+ terminal: {
+ wrapper: "rounded-lg overflow-hidden border border-slate-700",
+ header: "bg-slate-800 px-4 py-2 flex items-center gap-2",
+ dots: "flex gap-1.5",
+ dot: {
+ red: "w-3 h-3 rounded-full bg-red-500",
+ yellow: "w-3 h-3 rounded-full bg-yellow-500",
+ green: "w-3 h-3 rounded-full bg-green-500",
+ },
+ title: "text-xs text-white/60 ml-2",
+ content: "p-4 bg-slate-900 text-sm overflow-auto max-h-[600px]",
+ code: "text-slate-300",
+ },
+ howMatching: {
+ wrapper:
+ "mt-6 bg-gradient-to-r from-blue-600/10 to-purple-600/10 rounded-lg p-6 border border-blue-600/20",
+ title: "font-semibold mb-3 text-blue-600 dark:text-blue-400",
+ list: "space-y-3 text-sm text-slate-600 dark:text-slate-400",
+ item: "flex gap-2",
+ number: "text-blue-600",
+ },
+ sectionLabel: "font-semibold mb-4 text-slate-900 dark:text-white",
+} as const;
+
+export const STYLES = {
+ headerDropShadow: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))",
+} as const;
+
+export const SCHEMA_SECTIONS: SchemaSection[] = [
+ {
+ title: "Theme",
+ description: "Root theme object that defines styling rules",
+ properties: [
+ {
+ name: "name",
+ type: "string",
+ description: "Unique identifier for the theme",
+ required: true,
+ example: '"dracula"',
+ },
+ {
+ name: "description",
+ type: "string",
+ description: "Human-readable description",
+ example: '"A dark theme inspired by Dracula"',
+ },
+ {
+ name: "mode",
+ type: '"light" | "dark" | "auto"',
+ description: "Theme color mode for terminal detection",
+ example: '"dark"',
+ },
+ {
+ name: "schema",
+ type: "SchemaConfig",
+ description: "Matching rules and styling definitions",
+ required: true,
+ },
+ {
+ name: "colors",
+ type: "Record",
+ description: "Named color palette for the theme",
+ example: '{ error: "#ff5555", info: "#8be9fd" }',
+ },
+ ],
+ },
+ {
+ title: "SchemaConfig",
+ description: "Defines how log content is matched and styled",
+ properties: [
+ {
+ name: "defaultStyle",
+ type: "StyleOptions",
+ description: "Default styling for unmatched content",
+ example: '{ color: "#f8f8f2" }',
+ },
+ {
+ name: "matchWords",
+ type: "Record",
+ description: "Exact word matches (case-insensitive)",
+ example: '{ "ERROR": { color: "#ff5555", styleCodes: ["bold"] } }',
+ },
+ {
+ name: "matchStartsWith",
+ type: "Record",
+ description: "Match tokens starting with a prefix",
+ example: '{ "[": { color: "#6272a4" } }',
+ },
+ {
+ name: "matchEndsWith",
+ type: "Record",
+ description: "Match tokens ending with a suffix",
+ example: '{ "ms": { color: "#bd93f9" } }',
+ },
+ {
+ name: "matchContains",
+ type: "Record",
+ description: "Match tokens containing a substring",
+ example: '{ "://": { color: "#8be9fd" } }',
+ },
+ {
+ name: "matchPatterns",
+ type: "PatternMatch[]",
+ description: "Regex patterns for complex matching",
+ example: '{ pattern: /\\d+\\.\\d+/, options: { color: "#bd93f9" } }',
+ },
+ ],
+ },
+ {
+ title: "StyleOptions",
+ description: "Styling applied to matched content",
+ properties: [
+ {
+ name: "color",
+ type: "string",
+ description: "Hex color code for the text",
+ required: true,
+ example: '"#ff5555"',
+ },
+ {
+ name: "styleCodes",
+ type: "StyleCode[]",
+ description: "Text decorations: bold, italic, underline, dim, etc.",
+ example: '["bold", "underline"]',
+ },
+ {
+ name: "htmlStyleFormat",
+ type: '"css" | "className"',
+ description: "HTML output format preference",
+ example: '"css"',
+ },
+ ],
+ },
+];
+
+export const MATCHING_PRIORITY = [
+ { name: "matchPatterns", description: "Checked first, highest priority" },
+ { name: "matchWords", description: "Exact word match" },
+ { name: "matchStartsWith", description: "Prefix match" },
+ { name: "matchEndsWith", description: "Suffix match" },
+ { name: "matchContains", description: "Substring match" },
+ { name: "defaultStyle", description: "Fallback for unmatched tokens" },
+];
+
+export const EXAMPLE_THEME = `{
+ "name": "my-theme",
+ "mode": "dark",
+ "schema": {
+ "defaultStyle": { "color": "#f8f8f2" },
+ "matchWords": {
+ "ERROR": { "color": "#ff5555", "styleCodes": ["bold"] },
+ "WARN": { "color": "#ffb86c" },
+ "INFO": { "color": "#8be9fd" }
+ },
+ "matchPatterns": [
+ {
+ "pattern": "\\\\d{4}-\\\\d{2}-\\\\d{2}",
+ "options": { "color": "#6272a4" }
+ }
+ ]
+ }
+}`;
diff --git a/site/components/schema-viz/index.tsx b/site/components/schema-viz/index.tsx
new file mode 100644
index 0000000..aad6985
--- /dev/null
+++ b/site/components/schema-viz/index.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+ SCHEMA_SECTIONS,
+ MATCHING_PRIORITY,
+ EXAMPLE_THEME,
+ TEXT,
+ CLASSES,
+ STYLES,
+} from "./constants";
+
+export function SchemaVisualization() {
+ const [activeSection, setActiveSection] = useState(0);
+ const section = SCHEMA_SECTIONS[activeSection];
+
+ return (
+
+
+
+
+
+ {TEXT.title.highlight}
+ {" "}
+ {TEXT.title.rest}
+
+
{TEXT.description}
+
+
+
+
+ {SCHEMA_SECTIONS.map((s, i) => (
+
+ ))}
+
+
+
+
{section.title}
+
+ {section.description}
+
+
+
+ {section.properties.map((prop) => (
+
+
+
+ {prop.name}
+
+ {prop.required && (
+
+ {TEXT.labels.required}
+
+ )}
+
+ {prop.type}
+
+
+
+ {prop.description}
+
+ {prop.example && (
+
+ {prop.example}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {TEXT.labels.matchingPriority}
+
+
+ {MATCHING_PRIORITY.map((item, i) => (
+
+ {i + 1}
+ {item.name}
+
+ {item.description}
+
+
+ ))}
+
+
+
+
+
+
+ {TEXT.labels.exampleTheme}
+
+
+
+
+
+ {TEXT.labels.themeJson}
+
+
+
+ {EXAMPLE_THEME}
+
+
+
+
+
+ {TEXT.labels.howMatching}
+
+
+ {TEXT.matchingSteps.map((step, i) => (
+ -
+
+ {i + 1}.
+
+ {step}
+
+ ))}
+
+
+
+
+
+
- {/* Browser Pane */}
-
-
- {/* Browser header */}
-
-
- Browser
-
-
-
- {/* Browser content with styled logs */}
-
- {styledLogs.slice(0, 6).map((log, i) => (
-
- ))}
-
-
-
-
- {/* Terminal Pane */}
-
-
- {/* Terminal header */}
-
-
- Terminal
-
-
-
- {/* Terminal content with styled logs */}
-
- {styledLogs.slice(0, 6).map((log, i) => (
-
- ))}
-
-
-
-
+
+
+ {title}
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+ logs.map((log, i) => (
+
+ ))
+ )}
+
+
+ {children}
+
+ );
+}
diff --git a/site/content/docs/api/logsdx.mdx b/site/content/docs/api/logsdx.mdx
new file mode 100644
index 0000000..f04312f
--- /dev/null
+++ b/site/content/docs/api/logsdx.mdx
@@ -0,0 +1,165 @@
+---
+title: LogsDX Class
+description: Main API for processing and styling logs
+---
+
+## Overview
+
+The `LogsDX` class is the primary interface for processing and styling log content. It provides a singleton instance that manages themes and output formats.
+
+## Quick Start
+
+```typescript
+import { getLogsDX } from "logsdx";
+
+const logsdx = await getLogsDX({ theme: "dracula" });
+const styled = logsdx.processLine("[INFO] Application started");
+console.log(styled);
+```
+
+## Factory Function
+
+### getLogsDX(options?)
+
+Creates or retrieves the LogsDX singleton instance.
+
+```typescript
+const logsdx = await getLogsDX({
+ theme: "nord",
+ outputFormat: "ansi",
+});
+```
+
+## Options
+
+| Option | Type | Default | Description |
+| -------------------- | ------------------------------ | ------------- | ----------------------------------- |
+| `theme` | `string \| Theme \| ThemePair` | `'oh-my-zsh'` | Theme to use for styling |
+| `outputFormat` | `'ansi' \| 'html'` | `'ansi'` | Output format |
+| `htmlStyleFormat` | `'css' \| 'className'` | `'css'` | HTML styling method |
+| `escapeHtml` | `boolean` | `true` | Escape HTML entities |
+| `autoAdjustTerminal` | `boolean` | `true` | Auto-adjust for terminal background |
+| `debug` | `boolean` | `false` | Enable debug logging |
+
+## Instance Methods
+
+### processLine(line)
+
+Process a single log line with current theme.
+
+```typescript
+const styled = logsdx.processLine("[ERROR] Connection failed");
+```
+
+### processLines(lines)
+
+Process multiple log lines.
+
+```typescript
+const lines = ["[INFO] Start", "[WARN] Memory high"];
+const styled = logsdx.processLines(lines);
+```
+
+### processLog(content)
+
+Process entire log content (string with newlines).
+
+```typescript
+const content = fs.readFileSync("app.log", "utf-8");
+const styled = logsdx.processLog(content);
+```
+
+### setTheme(theme)
+
+Change the current theme.
+
+```typescript
+await logsdx.setTheme("github-dark");
+// or with custom theme
+await logsdx.setTheme({
+ name: "custom",
+ schema: {
+ /* ... */
+ },
+});
+```
+
+### getCurrentTheme()
+
+Get the currently active theme.
+
+```typescript
+const theme = logsdx.getCurrentTheme();
+console.log(theme.name); // 'dracula'
+```
+
+### setOutputFormat(format)
+
+Switch between ANSI and HTML output.
+
+```typescript
+logsdx.setOutputFormat("html");
+```
+
+### setHtmlStyleFormat(format)
+
+Switch HTML styling method.
+
+```typescript
+logsdx.setHtmlStyleFormat("className");
+```
+
+### getAllThemes()
+
+Get all available themes.
+
+```typescript
+const themes = logsdx.getAllThemes();
+// { dracula: Theme, nord: Theme, ... }
+```
+
+### getThemeNames()
+
+Get list of theme names.
+
+```typescript
+const names = logsdx.getThemeNames();
+// ['dracula', 'nord', 'monokai', ...]
+```
+
+## Static Methods
+
+### LogsDX.getInstance(options?)
+
+Get or create the singleton instance.
+
+```typescript
+const logsdx = await LogsDX.getInstance({ theme: "nord" });
+```
+
+### LogsDX.resetInstance()
+
+Reset the singleton (useful for testing).
+
+```typescript
+LogsDX.resetInstance();
+```
+
+## Theme Pair
+
+Use different themes based on terminal background:
+
+```typescript
+const logsdx = await getLogsDX({
+ theme: {
+ light: "github-light",
+ dark: "github-dark",
+ },
+});
+```
+
+## TypeScript Types
+
+```typescript
+import type { Theme, ThemePair, StyleOptions, LogsDXOptions } from "logsdx";
+```
diff --git a/site/content/docs/api/renderer.mdx b/site/content/docs/api/renderer.mdx
new file mode 100644
index 0000000..22306ad
--- /dev/null
+++ b/site/content/docs/api/renderer.mdx
@@ -0,0 +1,203 @@
+---
+title: Renderer API
+description: Convert styled tokens to ANSI or HTML output
+---
+
+## Overview
+
+The renderer converts styled tokens into ANSI escape codes for terminals or HTML markup for browsers.
+
+## Functions
+
+### renderLine(line, theme?, options?)
+
+Render a single log line with styling.
+
+```typescript
+import { renderLine, getTheme } from "logsdx";
+
+const theme = await getTheme("dracula");
+const ansi = renderLine("[INFO] Started", theme);
+const html = renderLine("[INFO] Started", theme, { outputFormat: "html" });
+```
+
+### Render Options
+
+| Option | Type | Default | Description |
+| ----------------- | ---------------------- | -------- | -------------------- |
+| `outputFormat` | `'ansi' \| 'html'` | `'ansi'` | Output format |
+| `htmlStyleFormat` | `'css' \| 'className'` | `'css'` | HTML styling method |
+| `escapeHtml` | `boolean` | `true` | Escape HTML entities |
+
+## Token Rendering
+
+### tokensToString(tokens, forceColors?)
+
+Convert tokens to ANSI string.
+
+```typescript
+import { tokensToString } from "logsdx";
+
+const ansi = tokensToString(styledTokens);
+```
+
+### tokensToHtml(tokens, options?)
+
+Convert tokens to HTML with inline styles.
+
+```typescript
+import { tokensToHtml } from "logsdx";
+
+const html = tokensToHtml(styledTokens);
+// ERROR
+```
+
+### tokensToClassNames(tokens, options?)
+
+Convert tokens to HTML with CSS classes.
+
+```typescript
+import { tokensToClassNames } from "logsdx";
+
+const html = tokensToClassNames(styledTokens);
+// ERROR
+```
+
+## Background Detection
+
+### detectBackground()
+
+Detect terminal/browser background color.
+
+```typescript
+import { detectBackground } from "logsdx";
+
+const info = detectBackground();
+// { scheme: 'dark', confidence: 0.9 }
+```
+
+### isDarkBackground()
+
+Check if background is dark.
+
+```typescript
+import { isDarkBackground } from "logsdx";
+
+if (isDarkBackground()) {
+ // Use dark theme
+}
+```
+
+### getRecommendedThemeMode()
+
+Get recommended theme mode based on environment.
+
+```typescript
+import { getRecommendedThemeMode } from "logsdx";
+
+const mode = getRecommendedThemeMode();
+// 'dark' or 'light'
+```
+
+### watchBackgroundChanges(callback)
+
+Watch for background color changes (browser).
+
+```typescript
+import { watchBackgroundChanges } from "logsdx";
+
+const unsubscribe = watchBackgroundChanges((info) => {
+ console.log("Background changed:", info.scheme);
+});
+
+// Later: unsubscribe();
+```
+
+## Style Application
+
+### applyColor(text, color)
+
+Apply color to text (ANSI).
+
+```typescript
+import { applyColor } from "logsdx";
+
+const colored = applyColor("ERROR", "#ff5555");
+```
+
+### Style Functions
+
+```typescript
+import { applyBold, applyItalic, applyUnderline, applyDim } from "logsdx";
+
+const bold = applyBold("Important");
+const italic = applyItalic("Note");
+const underlined = applyUnderline("Link");
+const dimmed = applyDim("Debug info");
+```
+
+## LightBox Rendering
+
+For highlighted/boxed output:
+
+### renderLightBox(content, options?)
+
+Render content in a highlighted box.
+
+```typescript
+import { renderLightBox } from "logsdx";
+
+const boxed = renderLightBox("Important message");
+```
+
+### renderLightBoxLine(line)
+
+Render a single line with highlight background.
+
+```typescript
+import { renderLightBoxLine } from "logsdx";
+
+const highlighted = renderLightBoxLine("[CRITICAL] System failure");
+```
+
+## Color Utilities
+
+### fg256(code)
+
+Generate 256-color ANSI code.
+
+```typescript
+import { fg256 } from "logsdx";
+
+const orange = fg256(208);
+```
+
+### fgRGB(r, g, b)
+
+Generate true color ANSI code.
+
+```typescript
+import { fgRGB } from "logsdx";
+
+const custom = fgRGB(255, 128, 0);
+```
+
+## TypeScript Types
+
+```typescript
+import type { RenderOptions, BackgroundInfo, ColorScheme } from "logsdx";
+
+interface RenderOptions {
+ outputFormat?: "ansi" | "html";
+ htmlStyleFormat?: "css" | "className";
+ escapeHtml?: boolean;
+ theme?: Theme;
+}
+
+interface BackgroundInfo {
+ scheme: ColorScheme;
+ confidence: number;
+}
+
+type ColorScheme = "dark" | "light" | "unknown";
+```
diff --git a/site/content/docs/api/themes.mdx b/site/content/docs/api/themes.mdx
new file mode 100644
index 0000000..9f4b4fe
--- /dev/null
+++ b/site/content/docs/api/themes.mdx
@@ -0,0 +1,219 @@
+---
+title: Themes API
+description: Theme loading, registration, and creation utilities
+---
+
+## Overview
+
+logsDX provides utilities for loading built-in themes, registering custom themes, and creating new themes programmatically.
+
+## Loading Themes
+
+### getTheme(name)
+
+Load a theme by name (async).
+
+```typescript
+import { getTheme } from "logsdx";
+
+const theme = await getTheme("dracula");
+```
+
+### getAllThemes()
+
+Get all loaded themes.
+
+```typescript
+import { getAllThemes } from "logsdx";
+
+const themes = getAllThemes();
+// { dracula: Theme, nord: Theme, ... }
+```
+
+### getThemeNames()
+
+Get list of available theme names.
+
+```typescript
+import { getThemeNames } from "logsdx";
+
+const names = getThemeNames();
+// ['dracula', 'nord', 'monokai', ...]
+```
+
+## Preloading
+
+### preloadTheme(name)
+
+Preload a theme for faster access.
+
+```typescript
+import { preloadTheme } from "logsdx";
+
+await preloadTheme("dracula");
+```
+
+### preloadAllThemes()
+
+Preload all built-in themes.
+
+```typescript
+import { preloadAllThemes } from "logsdx";
+
+await preloadAllThemes();
+```
+
+## Registration
+
+### registerTheme(theme)
+
+Register a custom theme.
+
+```typescript
+import { registerTheme } from "logsdx";
+
+registerTheme({
+ name: "my-theme",
+ mode: "dark",
+ schema: {
+ defaultStyle: { color: "#f8f8f2" },
+ matchWords: {
+ ERROR: { color: "#ff5555", styleCodes: ["bold"] },
+ },
+ },
+});
+```
+
+### registerThemeLoader(name, loader)
+
+Register a lazy-loaded theme.
+
+```typescript
+import { registerThemeLoader } from "logsdx";
+
+registerThemeLoader("my-theme", async () => {
+ const response = await fetch("/themes/my-theme.json");
+ return response.json();
+});
+```
+
+## Theme Builder
+
+### ThemeBuilder
+
+Fluent API for building themes.
+
+```typescript
+import { ThemeBuilder } from "logsdx";
+
+const theme = new ThemeBuilder("my-theme")
+ .mode("dark")
+ .defaultStyle({ color: "#f8f8f2" })
+ .matchWord("ERROR", { color: "#ff5555", styleCodes: ["bold"] })
+ .matchWord("WARN", { color: "#ffb86c" })
+ .matchWord("INFO", { color: "#8be9fd" })
+ .matchPattern(/\d{4}-\d{2}-\d{2}/, { color: "#6272a4" })
+ .build();
+```
+
+### createTheme(config)
+
+Create a theme from configuration.
+
+```typescript
+import { createTheme } from "logsdx";
+
+const theme = createTheme({
+ name: "my-theme",
+ mode: "dark",
+ colors: {
+ error: "#ff5555",
+ warning: "#ffb86c",
+ info: "#8be9fd",
+ },
+ schema: {
+ defaultStyle: { color: "#f8f8f2" },
+ matchWords: {
+ ERROR: { color: "#ff5555" },
+ },
+ },
+});
+```
+
+### createSimpleTheme(config)
+
+Create a theme with simplified configuration.
+
+```typescript
+import { createSimpleTheme } from "logsdx";
+
+const theme = createSimpleTheme({
+ name: "simple",
+ mode: "dark",
+ colors: {
+ error: "#ff0000",
+ warning: "#ffff00",
+ info: "#00ffff",
+ success: "#00ff00",
+ debug: "#808080",
+ },
+});
+```
+
+### extendTheme(base, overrides)
+
+Extend an existing theme.
+
+```typescript
+import { extendTheme, getTheme } from "logsdx";
+
+const dracula = await getTheme("dracula");
+const customDracula = extendTheme(dracula, {
+ name: "dracula-custom",
+ schema: {
+ matchWords: {
+ CUSTOM: { color: "#ff79c6" },
+ },
+ },
+});
+```
+
+## Built-in Themes
+
+| Theme | Mode | Description |
+| ----------------- | ----- | -------------------- |
+| `dracula` | dark | Vibrant dark theme |
+| `github-dark` | dark | GitHub dark mode |
+| `github-light` | light | GitHub light mode |
+| `nord` | dark | Arctic color palette |
+| `monokai` | dark | Classic Monokai |
+| `solarized-dark` | dark | Solarized dark |
+| `solarized-light` | light | Solarized light |
+| `oh-my-zsh` | dark | Oh My Zsh inspired |
+
+## Theme Validation
+
+### validateTheme(theme)
+
+Validate a theme object.
+
+```typescript
+import { validateTheme } from "logsdx";
+
+const validated = validateTheme(myTheme);
+```
+
+### validateThemeSafe(theme)
+
+Validate without throwing errors.
+
+```typescript
+import { validateThemeSafe } from "logsdx";
+
+const result = validateThemeSafe(myTheme);
+if (result.success) {
+ console.log(result.data);
+} else {
+ console.error(result.error);
+}
+```
diff --git a/site/content/docs/api/tokenizer.mdx b/site/content/docs/api/tokenizer.mdx
new file mode 100644
index 0000000..0fae41d
--- /dev/null
+++ b/site/content/docs/api/tokenizer.mdx
@@ -0,0 +1,164 @@
+---
+title: Tokenizer API
+description: Low-level tokenization and theme application
+---
+
+## Overview
+
+The tokenizer breaks log lines into tokens and applies theme-based styling. This is the core engine that powers logsDX's pattern matching.
+
+## Functions
+
+### tokenize(line, theme?)
+
+Tokenize a log line into individual tokens.
+
+```typescript
+import { tokenize } from "logsdx";
+
+const tokens = tokenize("[INFO] Server started", theme);
+// Returns TokenList array
+```
+
+### applyTheme(tokens, theme)
+
+Apply theme styling to tokens.
+
+```typescript
+import { tokenize, applyTheme } from "logsdx";
+
+const tokens = tokenize(line, theme);
+const styledTokens = applyTheme(tokens, theme);
+```
+
+## Token Structure
+
+Each token has the following structure:
+
+```typescript
+interface Token {
+ content: string;
+ metadata?: {
+ matchType: MatcherType;
+ matchPattern: string;
+ style?: StyleOptions;
+ };
+}
+
+type TokenList = Token[];
+```
+
+## Match Types
+
+Tokens are categorized by how they were matched:
+
+| Type | Description |
+| ----------- | ----------------------------- |
+| `word` | Matched via `matchWords` |
+| `regex` | Matched via `matchPatterns` |
+| `timestamp` | Timestamp pattern |
+| `level` | Log level (INFO, ERROR, etc.) |
+| `space` | Single space |
+| `spaces` | Multiple spaces |
+| `tab` | Tab character |
+| `newline` | Newline character |
+| `default` | No specific match |
+
+## Lexer API
+
+For advanced use cases, you can create custom lexers:
+
+### createLexer(theme?)
+
+Create a lexer instance.
+
+```typescript
+import { createLexer } from "logsdx/tokenizer";
+
+const lexer = createLexer(theme);
+const tokens = lexer.tokenize(line);
+```
+
+### SimpleLexer
+
+Low-level lexer class.
+
+```typescript
+import { SimpleLexer } from "logsdx/tokenizer";
+
+const lexer = new SimpleLexer();
+
+// Add rules
+lexer.rule(/\d+/, (ctx) => {
+ ctx.accept("number");
+});
+
+lexer.rule(/[a-z]+/i, (ctx) => {
+ ctx.accept("word");
+});
+
+// Tokenize
+const tokens = lexer.tokenize("hello 123 world");
+```
+
+### Adding Rules
+
+```typescript
+import {
+ addWhitespaceRules,
+ addDefaultLogRules,
+ addWordMatchRules,
+ addPatternMatchRules,
+} from "logsdx/tokenizer";
+
+const lexer = new SimpleLexer();
+addWhitespaceRules(lexer);
+addDefaultLogRules(lexer);
+addWordMatchRules(lexer, { ERROR: { color: "#ff0000" } });
+```
+
+## Pattern Matching Priority
+
+When tokenizing, patterns are matched in this order:
+
+1. **matchPatterns** - Regex patterns (highest priority)
+2. **matchWords** - Exact word matches
+3. **matchStartsWith** - Prefix matches
+4. **matchEndsWith** - Suffix matches
+5. **matchContains** - Substring matches
+6. **defaultStyle** - Fallback (lowest priority)
+
+## Example: Custom Tokenization
+
+```typescript
+import { tokenize, applyTheme } from "logsdx";
+
+const theme = {
+ name: "custom",
+ schema: {
+ defaultStyle: { color: "#ffffff" },
+ matchWords: {
+ ERROR: { color: "#ff0000", styleCodes: ["bold"] },
+ WARN: { color: "#ffff00" },
+ },
+ matchPatterns: [
+ {
+ pattern: "\\d{4}-\\d{2}-\\d{2}",
+ options: { color: "#888888" },
+ },
+ ],
+ },
+};
+
+const line = "[2024-01-15] ERROR: Connection failed";
+const tokens = tokenize(line, theme);
+const styled = applyTheme(tokens, theme);
+
+// styled tokens now have style metadata attached
+```
+
+## TypeScript Types
+
+```typescript
+import type { Token, TokenList, MatcherType } from "logsdx";
+```
diff --git a/site/content/docs/guides/cli-usage.mdx b/site/content/docs/guides/cli-usage.mdx
new file mode 100644
index 0000000..2c59d3c
--- /dev/null
+++ b/site/content/docs/guides/cli-usage.mdx
@@ -0,0 +1,92 @@
+---
+title: CLI Usage
+description: Style your logs from anywhere with a single command
+---
+
+## Installation
+
+Install logsDX globally using your preferred package manager:
+
+```bash
+# npm
+npm install -g logsdx
+
+# pnpm
+pnpm add -g logsdx
+
+# bun
+bun add -g logsdx
+```
+
+## Commands
+
+### Pipe Logs
+
+Pipe any log output through logsdx for instant styling:
+
+```bash
+cat server.log | logsdx --theme dracula
+```
+
+### Process Files
+
+Process log files directly with your chosen theme:
+
+```bash
+logsdx process app.log --theme github-dark
+```
+
+### Interactive Theme Creator
+
+Create custom themes with an interactive wizard:
+
+```bash
+logsdx create-theme
+```
+
+### Preview Themes
+
+Preview any theme with sample logs before using:
+
+```bash
+logsdx preview --theme nord
+```
+
+### Tail with Style
+
+Follow logs in real-time with beautiful styling:
+
+```bash
+tail -f /var/log/app.log | logsdx --theme monokai
+```
+
+### List Themes
+
+View all available built-in themes:
+
+```bash
+logsdx themes
+```
+
+## Available Themes
+
+logsDX comes with several built-in themes:
+
+- **dracula** - Dark theme with vibrant colors
+- **github-dark** - GitHub's dark mode
+- **github-light** - GitHub's light mode
+- **nord** - Arctic, north-bluish color palette
+- **monokai** - Classic Monokai colors
+- **solarized-dark** - Solarized dark variant
+- **solarized-light** - Solarized light variant
+- **oh-my-zsh** - Inspired by Oh My Zsh
+
+## Options
+
+| Option | Description |
+| ----------------- | ------------------------------- |
+| `--theme ` | Specify theme to use |
+| `--output ` | Save output to file |
+| `--format ` | Output format: `ansi` or `html` |
+| `--help` | Show help information |
+| `--version` | Show version number |
diff --git a/site/content/docs/guides/custom-themes.mdx b/site/content/docs/guides/custom-themes.mdx
new file mode 100644
index 0000000..88cc68a
--- /dev/null
+++ b/site/content/docs/guides/custom-themes.mdx
@@ -0,0 +1,239 @@
+---
+title: Custom Themes
+description: Create and customize your own logsDX themes
+---
+
+## Overview
+
+logsDX themes define how log content is styled. You can create custom themes to match your preferences or brand.
+
+## Theme Structure
+
+A theme consists of:
+
+```typescript
+interface Theme {
+ name: string;
+ description?: string;
+ mode?: "light" | "dark" | "auto";
+ schema: SchemaConfig;
+ colors?: Record;
+}
+```
+
+## Creating a Theme
+
+### Using ThemeBuilder
+
+The easiest way to create a theme:
+
+```typescript
+import { ThemeBuilder } from "logsdx";
+
+const theme = new ThemeBuilder("my-theme")
+ .mode("dark")
+ .description("My custom dark theme")
+ .defaultStyle({ color: "#f8f8f2" })
+ .matchWord("ERROR", { color: "#ff5555", styleCodes: ["bold"] })
+ .matchWord("WARN", { color: "#ffb86c" })
+ .matchWord("INFO", { color: "#8be9fd" })
+ .matchWord("DEBUG", { color: "#6272a4" })
+ .matchWord("SUCCESS", { color: "#50fa7b" })
+ .matchPattern(/\d{4}-\d{2}-\d{2}/, { color: "#6272a4" })
+ .matchPattern(/\d{2}:\d{2}:\d{2}/, { color: "#6272a4" })
+ .build();
+```
+
+### Using JSON
+
+Create a JSON file:
+
+```json
+{
+ "name": "my-theme",
+ "mode": "dark",
+ "description": "My custom theme",
+ "schema": {
+ "defaultStyle": { "color": "#f8f8f2" },
+ "matchWords": {
+ "ERROR": { "color": "#ff5555", "styleCodes": ["bold"] },
+ "WARN": { "color": "#ffb86c" },
+ "INFO": { "color": "#8be9fd" },
+ "DEBUG": { "color": "#6272a4" }
+ },
+ "matchPatterns": [
+ {
+ "pattern": "\\d{4}-\\d{2}-\\d{2}",
+ "options": { "color": "#6272a4" }
+ }
+ ]
+ }
+}
+```
+
+## Matching Rules
+
+### matchWords
+
+Exact word matches (case-insensitive):
+
+```typescript
+matchWords: {
+ 'ERROR': { color: '#ff5555', styleCodes: ['bold'] },
+ 'WARN': { color: '#ffb86c' },
+ 'INFO': { color: '#8be9fd' },
+}
+```
+
+### matchStartsWith
+
+Match tokens starting with a prefix:
+
+```typescript
+matchStartsWith: {
+ '[': { color: '#6272a4' },
+ 'http': { color: '#8be9fd' },
+}
+```
+
+### matchEndsWith
+
+Match tokens ending with a suffix:
+
+```typescript
+matchEndsWith: {
+ 'ms': { color: '#bd93f9' },
+ 's': { color: '#bd93f9' },
+}
+```
+
+### matchContains
+
+Match tokens containing a substring:
+
+```typescript
+matchContains: {
+ '://': { color: '#8be9fd' },
+ '@': { color: '#ff79c6' },
+}
+```
+
+### matchPatterns
+
+Regex patterns for complex matching:
+
+```typescript
+matchPatterns: [
+ {
+ name: "timestamp",
+ pattern: "\\d{4}-\\d{2}-\\d{2}",
+ options: { color: "#6272a4" },
+ },
+ {
+ name: "ip-address",
+ pattern: "\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}",
+ options: { color: "#bd93f9" },
+ },
+ {
+ name: "uuid",
+ pattern: "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}",
+ options: { color: "#ff79c6" },
+ },
+];
+```
+
+## Style Options
+
+Each match can have these style options:
+
+```typescript
+interface StyleOptions {
+ color: string; // Hex color code
+ styleCodes?: StyleCode[]; // Text decorations
+ htmlStyleFormat?: "css" | "className";
+}
+
+type StyleCode =
+ | "bold"
+ | "italic"
+ | "underline"
+ | "dim"
+ | "blink"
+ | "reverse"
+ | "strikethrough";
+```
+
+## Extending Themes
+
+Extend an existing theme:
+
+```typescript
+import { extendTheme, getTheme } from "logsdx";
+
+const dracula = await getTheme("dracula");
+
+const myTheme = extendTheme(dracula, {
+ name: "dracula-extended",
+ schema: {
+ matchWords: {
+ CUSTOM: { color: "#ff79c6" },
+ SPECIAL: { color: "#50fa7b", styleCodes: ["bold"] },
+ },
+ },
+});
+```
+
+## Registering Themes
+
+### Register Immediately
+
+```typescript
+import { registerTheme } from "logsdx";
+
+registerTheme(myTheme);
+```
+
+### Lazy Loading
+
+```typescript
+import { registerThemeLoader } from "logsdx";
+
+registerThemeLoader("my-theme", async () => {
+ const response = await fetch("/themes/my-theme.json");
+ return response.json();
+});
+```
+
+## Color Palette
+
+Define reusable colors:
+
+```typescript
+const theme = {
+ name: "my-theme",
+ colors: {
+ background: "#282a36",
+ foreground: "#f8f8f2",
+ error: "#ff5555",
+ warning: "#ffb86c",
+ info: "#8be9fd",
+ success: "#50fa7b",
+ debug: "#6272a4",
+ },
+ schema: {
+ defaultStyle: { color: "#f8f8f2" },
+ matchWords: {
+ ERROR: { color: "#ff5555" },
+ // Use colors from palette
+ },
+ },
+};
+```
+
+## Best Practices
+
+1. **Use semantic names** for patterns (`timestamp`, `log-level`)
+2. **Test with real logs** before deploying
+3. **Consider accessibility** - ensure sufficient contrast
+4. **Start simple** - add patterns as needed
+5. **Use `mode`** to help auto-detection work correctly
diff --git a/site/content/docs/guides/integrations.mdx b/site/content/docs/guides/integrations.mdx
new file mode 100644
index 0000000..4a60f9d
--- /dev/null
+++ b/site/content/docs/guides/integrations.mdx
@@ -0,0 +1,291 @@
+---
+title: Integrations
+description: Use logsDX with popular tools and frameworks
+---
+
+## Node.js
+
+### Basic Usage
+
+```typescript
+import { getLogsDX } from "logsdx";
+
+const logsdx = await getLogsDX({ theme: "dracula" });
+
+// Style console output
+const originalLog = console.log;
+console.log = (...args) => {
+ const styled = args.map((arg) =>
+ typeof arg === "string" ? logsdx.processLine(arg) : arg,
+ );
+ originalLog(...styled);
+};
+```
+
+### With Winston
+
+```typescript
+import winston from "winston";
+import { getLogsDX } from "logsdx";
+
+const logsdx = await getLogsDX({ theme: "nord" });
+
+const styledFormat = winston.format((info) => {
+ info.message = logsdx.processLine(info.message);
+ return info;
+});
+
+const logger = winston.createLogger({
+ format: winston.format.combine(styledFormat(), winston.format.simple()),
+ transports: [new winston.transports.Console()],
+});
+```
+
+### With Pino
+
+```typescript
+import pino from "pino";
+import { getLogsDX } from "logsdx";
+
+const logsdx = await getLogsDX({ theme: "monokai" });
+
+const logger = pino({
+ transport: {
+ target: "pino-pretty",
+ options: {
+ messageFormat: (log) => logsdx.processLine(log.msg),
+ },
+ },
+});
+```
+
+## Browser
+
+### React
+
+```tsx
+import { useEffect, useState } from "react";
+import { getLogsDX } from "logsdx";
+
+function LogViewer({ logs }: { logs: string[] }) {
+ const [styled, setStyled] = useState([]);
+
+ useEffect(() => {
+ async function styleLogs() {
+ const logsdx = await getLogsDX({
+ theme: "dracula",
+ outputFormat: "html",
+ });
+ setStyled(logs.map((log) => logsdx.processLine(log)));
+ }
+ styleLogs();
+ }, [logs]);
+
+ return (
+
+ {styled.map((html, i) => (
+
+ ))}
+