@run0/jiki-ui 0.1.0

package/src/theme.ts

@@ -0,0 +1,144 @@
+import type { AccentColor, TerminalLine } from "./types";
+
+export interface EditorTheme {
+  saveButtonActive: string;
+  caret: string;
+  selection: string;
+}
+
+export interface TerminalTheme {
+  commandStyle: string;
+  promptColor: string;
+  spinnerBorder: string;
+  inputCaret: string;
+}
+
+const EDITOR_THEMES: Record<AccentColor, EditorTheme> = {
+  emerald: {
+    saveButtonActive:
+      "bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 border border-emerald-500/30",
+    caret: "caret-emerald-400",
+    selection: "selection:bg-emerald-500/20",
+  },
+  violet: {
+    saveButtonActive:
+      "bg-violet-500/20 text-violet-400 hover:bg-violet-500/30 border border-violet-500/30",
+    caret: "caret-violet-400",
+    selection: "selection:bg-violet-500/20",
+  },
+  orange: {
+    saveButtonActive:
+      "bg-orange-500/20 text-orange-400 hover:bg-orange-500/30 border border-orange-500/30",
+    caret: "caret-orange-400",
+    selection: "selection:bg-orange-500/20",
+  },
+  blue: {
+    saveButtonActive:
+      "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/30",
+    caret: "caret-blue-400",
+    selection: "selection:bg-blue-500/20",
+  },
+  pink: {
+    saveButtonActive:
+      "bg-pink-500/20 text-pink-400 hover:bg-pink-500/30 border border-pink-500/30",
+    caret: "caret-pink-400",
+    selection: "selection:bg-pink-500/20",
+  },
+  green: {
+    saveButtonActive:
+      "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/30",
+    caret: "caret-green-400",
+    selection: "selection:bg-green-500/20",
+  },
+  amber: {
+    saveButtonActive:
+      "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/30",
+    caret: "caret-amber-400",
+    selection: "selection:bg-amber-500/20",
+  },
+};
+
+const TERMINAL_THEMES: Record<AccentColor, TerminalTheme> = {
+  emerald: {
+    commandStyle: "text-emerald-400 font-semibold",
+    promptColor: "text-emerald-500",
+    spinnerBorder: "border-t-emerald-400",
+    inputCaret: "caret-emerald-400",
+  },
+  violet: {
+    commandStyle: "text-violet-400 font-semibold",
+    promptColor: "text-violet-500",
+    spinnerBorder: "border-t-violet-400",
+    inputCaret: "caret-violet-400",
+  },
+  orange: {
+    commandStyle: "text-orange-400 font-semibold",
+    promptColor: "text-orange-500",
+    spinnerBorder: "border-t-orange-400",
+    inputCaret: "caret-orange-400",
+  },
+  blue: {
+    commandStyle: "text-blue-400 font-semibold",
+    promptColor: "text-blue-500",
+    spinnerBorder: "border-t-blue-400",
+    inputCaret: "caret-blue-400",
+  },
+  pink: {
+    commandStyle: "text-pink-400 font-semibold",
+    promptColor: "text-pink-500",
+    spinnerBorder: "border-t-pink-400",
+    inputCaret: "caret-pink-400",
+  },
+  green: {
+    commandStyle: "text-green-400 font-semibold",
+    promptColor: "text-green-500",
+    spinnerBorder: "border-t-green-400",
+    inputCaret: "caret-green-400",
+  },
+  amber: {
+    commandStyle: "text-amber-400 font-semibold",
+    promptColor: "text-amber-500",
+    spinnerBorder: "border-t-amber-400",
+    inputCaret: "caret-amber-400",
+  },
+};
+
+export interface FileExplorerTheme {
+  selected: string;
+}
+
+const FILE_EXPLORER_THEMES: Record<AccentColor, FileExplorerTheme> = {
+  emerald: { selected: "bg-emerald-500/15 text-emerald-300" },
+  violet: { selected: "bg-violet-500/15 text-violet-300" },
+  orange: { selected: "bg-orange-500/15 text-orange-300" },
+  blue: { selected: "bg-blue-500/15 text-blue-300" },
+  pink: { selected: "bg-pink-500/15 text-pink-300" },
+  green: { selected: "bg-green-500/15 text-green-300" },
+  amber: { selected: "bg-amber-500/15 text-amber-300" },
+};
+
+export function getFileExplorerTheme(color: AccentColor): FileExplorerTheme {
+  return FILE_EXPLORER_THEMES[color];
+}
+
+export function getEditorTheme(color: AccentColor): EditorTheme {
+  return EDITOR_THEMES[color];
+}
+
+export function getTerminalTheme(color: AccentColor): TerminalTheme {
+  return TERMINAL_THEMES[color];
+}
+
+export function getLineStyles(
+  color: AccentColor,
+  overrides?: Partial<Record<TerminalLine["type"], string>>,
+): Record<TerminalLine["type"], string> {
+  return {
+    command: TERMINAL_THEMES[color].commandStyle,
+    stdout: "text-zinc-300",
+    stderr: "text-red-400",
+    info: "text-blue-400 italic",
+    success: "text-emerald-400",
+    ...overrides,
+  };
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+export interface TerminalLine {
+  id: number;
+  type: "command" | "stdout" | "stderr" | "info" | "success";
+  text: string;
+}
+
+export type AccentColor =
+  | "emerald"
+  | "violet"
+  | "orange"
+  | "blue"
+  | "pink"
+  | "green"
+  | "amber";
+
+export interface FileEntry {
+  name: string;
+  path: string;
+  isDir: boolean;
+  children?: FileEntry[];
+}

package/src/use-shiki-highlighter.ts

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from "react";
+import type { Highlighter } from "shiki";
+import { getShikiLang } from "./shiki-languages";
+
+// Module-level singleton — shared across all CodeEditor instances
+let highlighterInstance: Highlighter | null = null;
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+async function getOrCreateHighlighter(): Promise<Highlighter> {
+  if (highlighterInstance) return highlighterInstance;
+  if (highlighterPromise) return highlighterPromise;
+
+  highlighterPromise = import("shiki")
+    .then(({ createHighlighter }) =>
+      createHighlighter({ themes: ["github-dark"], langs: [] }),
+    )
+    .then(h => {
+      highlighterInstance = h;
+      return h;
+    });
+
+  return highlighterPromise;
+}
+
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export function buildFallbackHtml(code: string): string {
+  return `<pre style="margin:0;background:transparent"><code style="color:#e4e4e7">${escapeHtml(code)}</code></pre>`;
+}
+
+async function doHighlight(
+  code: string,
+  filename: string | null,
+  el: HTMLDivElement | null,
+): Promise<void> {
+  if (!el || !highlighterInstance) return;
+
+  const lang = getShikiLang(filename);
+
+  if (
+    lang !== "plaintext" &&
+    !highlighterInstance.getLoadedLanguages().includes(lang)
+  ) {
+    try {
+      await highlighterInstance.loadLanguage(
+        lang as Parameters<typeof highlighterInstance.loadLanguage>[0],
+      );
+    } catch {
+      el.innerHTML = buildFallbackHtml(code);
+      return;
+    }
+  }
+
+  try {
+    el.innerHTML = highlighterInstance.codeToHtml(code, {
+      lang,
+      theme: "github-dark",
+    });
+  } catch {
+    el.innerHTML = buildFallbackHtml(code);
+  }
+}
+
+/**
+ * Manages Shiki syntax highlighting via direct DOM updates — no React state,
+ * no re-renders. Updates the target element's innerHTML directly.
+ */
+export function useShikiHighlighter(
+  code: string,
+  filename: string | null,
+  targetRef: React.RefObject<HTMLDivElement | null>,
+): void {
+  const readyRef = useRef(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+
+  // Initialize highlighter singleton on first mount
+  useEffect(() => {
+    let cancelled = false;
+    getOrCreateHighlighter().then(() => {
+      if (cancelled) return;
+      readyRef.current = true;
+      doHighlight(code, filename, targetRef.current);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Debounced highlight on code/filename change — direct DOM mutation
+  useEffect(() => {
+    if (!readyRef.current) {
+      // Show fallback while Shiki loads
+      if (targetRef.current) {
+        targetRef.current.innerHTML = buildFallbackHtml(code);
+      }
+      return;
+    }
+
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      doHighlight(code, filename, targetRef.current);
+    }, 30);
+
+    return () => clearTimeout(debounceRef.current);
+  }, [code, filename]);
+}

package/src/useMediaQuery.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}