@run0/jiki-ui 0.1.0

package/src/MobileTabBar.tsx

@@ -0,0 +1,133 @@
+import { useRef, useEffect, useState } from "react";
+import type { AccentColor } from "./types";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface MobileTabBarProps {
+  tabs: TabItem[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+  accentColor?: AccentColor;
+}
+
+const ACTIVE_BG: Record<AccentColor, string> = {
+  emerald: "bg-emerald-500/15",
+  violet: "bg-violet-500/15",
+  orange: "bg-orange-500/15",
+  blue: "bg-blue-500/15",
+  pink: "bg-pink-500/15",
+  green: "bg-green-500/15",
+  amber: "bg-amber-500/15",
+};
+
+const ACTIVE_TEXT: Record<AccentColor, string> = {
+  emerald: "text-emerald-300",
+  violet: "text-violet-300",
+  orange: "text-orange-300",
+  blue: "text-blue-300",
+  pink: "text-pink-300",
+  green: "text-green-300",
+  amber: "text-amber-300",
+};
+
+export function MobileTabBar({
+  tabs,
+  activeTab,
+  onTabChange,
+  accentColor = "emerald",
+}: MobileTabBarProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const activeIndex = tabs.findIndex(t => t.id === activeTab);
+    if (activeIndex < 0) return;
+    const buttons = containerRef.current.querySelectorAll<HTMLButtonElement>(
+      "[data-tab-id]",
+    );
+    const btn = buttons[activeIndex];
+    if (!btn) return;
+    setIndicator({
+      left: btn.offsetLeft,
+      width: btn.offsetWidth,
+    });
+  }, [activeTab, tabs]);
+
+  return (
+    <div className="flex-shrink-0 px-3 py-1.5 border-b border-zinc-800 bg-zinc-950">
+      <div
+        ref={containerRef}
+        className="relative flex rounded-lg bg-zinc-900 border border-zinc-800 p-0.5">
+        {/* Sliding indicator */}
+        <div
+          className={`absolute top-0.5 bottom-0.5 rounded-md ${ACTIVE_BG[accentColor]} transition-all duration-200 ease-out`}
+          style={{ left: indicator.left, width: indicator.width }}
+        />
+        {tabs.map(tab => {
+          const isActive = tab.id === activeTab;
+          return (
+            <button
+              key={tab.id}
+              data-tab-id={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`relative z-10 flex-1 flex items-center justify-center gap-1.5
+                          rounded-md py-1.5 px-3 font-mono text-[11px] tracking-wide
+                          transition-colors duration-150
+                          ${isActive ? ACTIVE_TEXT[accentColor] : "text-zinc-500 hover:text-zinc-400"}`}>
+              {tab.icon}
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ── Preset icon SVGs ────────────────────────────────────────── */
+
+export function ChatIcon({ className = "w-3.5 h-3.5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+    </svg>
+  );
+}
+
+export function PreviewIcon({ className = "w-3.5 h-3.5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+    </svg>
+  );
+}
+
+export function CodeIcon({ className = "w-3.5 h-3.5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+    </svg>
+  );
+}
+
+export function TerminalIcon({ className = "w-3.5 h-3.5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+    </svg>
+  );
+}
+
+export function FilesIcon({ className = "w-3.5 h-3.5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+    </svg>
+  );
+}

package/src/PanelToggle.tsx

@@ -0,0 +1,101 @@
+import type { AccentColor } from "./types";
+
+export interface PanelToggleProps {
+  collapsed: boolean;
+  onClick: () => void;
+  label: string;
+  side?: "left" | "right";
+  accentColor?: AccentColor;
+}
+
+const ACCENT_LABELS: Record<AccentColor, string> = {
+  emerald: "text-emerald-500/70",
+  violet: "text-violet-500/70",
+  orange: "text-orange-500/70",
+  blue: "text-blue-500/70",
+  pink: "text-pink-500/70",
+  green: "text-green-500/70",
+  amber: "text-amber-500/70",
+};
+
+const ACCENT_CHEVRONS: Record<AccentColor, string> = {
+  emerald: "text-emerald-400",
+  violet: "text-violet-400",
+  orange: "text-orange-400",
+  blue: "text-blue-400",
+  pink: "text-pink-400",
+  green: "text-green-400",
+  amber: "text-amber-400",
+};
+
+const ACCENT_HOVER_BG: Record<AccentColor, string> = {
+  emerald: "hover:bg-emerald-500/5",
+  violet: "hover:bg-violet-500/5",
+  orange: "hover:bg-orange-500/5",
+  blue: "hover:bg-blue-500/5",
+  pink: "hover:bg-pink-500/5",
+  green: "hover:bg-green-500/5",
+  amber: "hover:bg-amber-500/5",
+};
+
+export function PanelToggle({
+  collapsed,
+  onClick,
+  label,
+  side = "left",
+  accentColor = "emerald",
+}: PanelToggleProps) {
+  const chevronRight = (
+    <>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M9 6l6 6l-6 6" />
+    </>
+  );
+  const chevronLeft = (
+    <>
+      <path stroke="none" d="M0 0h24v24H0z" />
+      <path d="m15 6-6 6 6 6" />
+    </>
+  );
+
+  if (collapsed) {
+    return (
+      <button
+        onClick={onClick}
+        className="flex-shrink-0 w-7 flex flex-col items-center gap-2 pt-3 pb-3
+                   border-r border-zinc-800 bg-zinc-900/40
+                   hover:bg-zinc-800/60 transition-colors cursor-pointer"
+        title={`Show ${label}`}>
+        <svg
+          className={`w-3 h-3 ${ACCENT_CHEVRONS[accentColor]}`}
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          fill="none">
+          {side === "left" ? chevronRight : chevronLeft}
+        </svg>
+        <span
+          className={`text-[10px] font-mono tracking-wider uppercase select-none ${ACCENT_LABELS[accentColor]}`}
+          style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}>
+          {label}
+        </span>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={`flex-shrink-0 w-[9px] flex items-center justify-center
+                  border-r border-zinc-800 bg-transparent
+                  ${ACCENT_HOVER_BG[accentColor]} transition-colors cursor-pointer group`}
+      title={`Hide ${label}`}>
+      <svg
+        className={`w-2.5 h-2.5 text-zinc-600 opacity-0 group-hover:opacity-100
+                    transition-opacity ${ACCENT_CHEVRONS[accentColor]}`}
+        viewBox="0 0 16 16"
+        fill="currentColor">
+        {side === "left" ? chevronLeft : chevronRight}
+      </svg>
+    </button>
+  );
+}

package/src/Terminal.tsx

@@ -0,0 +1,178 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import type { AccentColor, TerminalLine } from "./types";
+import { getTerminalTheme, getLineStyles } from "./theme";
+
+export interface TerminalProps {
+  lines: TerminalLine[];
+  onCommand?: (cmd: string) => Promise<void>;
+  onClear: () => void;
+  accentColor?: AccentColor;
+  variant?: "default" | "compact";
+  title?: string;
+  lineStyles?: Partial<Record<TerminalLine["type"], string>>;
+}
+
+export function Terminal({
+  lines,
+  onCommand,
+  onClear,
+  accentColor = "emerald",
+  variant = "default",
+  title = "Terminal",
+  lineStyles: lineStyleOverrides,
+}: TerminalProps) {
+  const [input, setInput] = useState("");
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const [isRunning, setIsRunning] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const termTheme = getTerminalTheme(accentColor);
+  const styles = getLineStyles(accentColor, lineStyleOverrides);
+
+  const isCompact = variant === "compact";
+  const hasInput = !!onCommand;
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [lines]);
+
+  const executeCommand = useCallback(
+    async (cmd: string) => {
+      if (cmd === "clear") {
+        onClear();
+        return;
+      }
+      if (!onCommand) return;
+      setIsRunning(true);
+      await onCommand(cmd);
+      setIsRunning(false);
+      inputRef.current?.focus();
+    },
+    [onCommand, onClear],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const cmd = e.currentTarget.value.trim();
+        if (!cmd || isRunning) return;
+        setInput("");
+        setHistory(prev => [...prev, cmd]);
+        setHistoryIdx(-1);
+        executeCommand(cmd);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (history.length === 0) return;
+        const newIdx =
+          historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);
+        setHistoryIdx(newIdx);
+        setInput(history[newIdx]);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (historyIdx === -1) return;
+        const newIdx = historyIdx + 1;
+        if (newIdx >= history.length) {
+          setHistoryIdx(-1);
+          setInput("");
+        } else {
+          setHistoryIdx(newIdx);
+          setInput(history[newIdx]);
+        }
+      }
+    },
+    [history, historyIdx, isRunning, executeCommand],
+  );
+
+  // Size tokens based on variant
+  const headerPy = isCompact ? "py-1" : "py-1.5";
+  const dotSize = isCompact ? "h-2 w-2" : "h-2.5 w-2.5";
+  const dotOpacity = isCompact ? "bg-red-500/60" : "bg-red-500/70";
+  const dotYellow = isCompact ? "bg-yellow-500/60" : "bg-yellow-500/70";
+  const dotGreen = isCompact ? "bg-green-500/60" : "bg-green-500/70";
+  const titleSize = isCompact ? "text-[10px]" : "text-[11px]";
+  const titleMl = isCompact ? "ml-1" : "";
+  const clearSize = isCompact ? "text-[10px]" : "text-[11px]";
+  const outputClass = isCompact
+    ? "flex-1 overflow-y-auto px-3 py-1.5 font-mono text-[11px] leading-4"
+    : "flex-1 overflow-y-auto p-3 font-mono text-[13px] leading-5";
+  const inputPy = isCompact ? "py-1.5" : "py-2";
+  const inputGap = isCompact ? "gap-1.5" : "gap-2";
+  const promptSize = isCompact ? "text-[11px]" : "text-sm";
+  const inputFontSize = isCompact ? "text-[11px]" : "text-[13px]";
+  const spinnerSize = isCompact ? "h-2.5 w-2.5" : "h-3 w-3";
+
+  return (
+    <div className="h-full flex flex-col bg-zinc-950">
+      {/* Header */}
+      <div
+        className={`flex items-center justify-between px-3 ${headerPy} bg-zinc-900/50 border-b border-zinc-800`}>
+        <div className="flex items-center gap-1.5">
+          <div className="flex gap-1">
+            <div className={`${dotSize} rounded-full ${dotOpacity}`} />
+            <div className={`${dotSize} rounded-full ${dotYellow}`} />
+            <div className={`${dotSize} rounded-full ${dotGreen}`} />
+          </div>
+          <span
+            className={`${titleSize} font-semibold uppercase tracking-wider text-zinc-500 ${titleMl}`}>
+            {title}
+          </span>
+        </div>
+        <button
+          onClick={onClear}
+          className={`${clearSize} text-zinc-600 hover:text-zinc-400 transition-colors`}>
+          Clear
+        </button>
+      </div>
+
+      {/* Output area */}
+      <div
+        ref={scrollRef}
+        data-testid="terminal-output"
+        className={outputClass}>
+        {lines.map(line => (
+          <div key={line.id} className={styles[line.type]}>
+            {line.text.split("\n").map((segment, i) => (
+              <div key={i}>{segment || "\u00A0"}</div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Input (only when onCommand is provided) */}
+      {hasInput && (
+        <div className="flex-shrink-0 border-t border-zinc-800">
+          <div className={`flex items-center px-3 ${inputPy} ${inputGap}`}>
+            <span
+              className={`${termTheme.promptColor} font-mono ${promptSize} font-bold select-none`}>
+              $
+            </span>
+            <input
+              ref={inputRef}
+              type="text"
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isRunning}
+              placeholder={isRunning ? "Running..." : "Type a command..."}
+              className={`
+                flex-1 bg-transparent text-zinc-200 ${inputFontSize} font-mono
+                outline-none placeholder:text-zinc-700
+                disabled:opacity-50
+                ${termTheme.inputCaret}
+              `}
+            />
+            {isRunning && (
+              <div
+                className={`${spinnerSize} animate-spin rounded-full border border-zinc-600 ${termTheme.spinnerBorder}`}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/chat-theme.ts

@@ -0,0 +1,81 @@
+import type { AccentColor } from "./types";
+
+export interface ChatTheme {
+  userBubble: string;
+  assistantBubble: string;
+  sendButton: string;
+  sendButtonDisabled: string;
+  streamingDot: string;
+  inputCaret: string;
+  modelBadge: string;
+}
+
+const CHAT_THEMES: Record<AccentColor, ChatTheme> = {
+  emerald: {
+    userBubble: "bg-emerald-500/15 border border-emerald-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-emerald-500 hover:bg-emerald-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-emerald-400",
+    inputCaret: "caret-emerald-400",
+    modelBadge: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+  },
+  violet: {
+    userBubble: "bg-violet-500/15 border border-violet-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-violet-500 hover:bg-violet-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-violet-400",
+    inputCaret: "caret-violet-400",
+    modelBadge: "bg-violet-500/10 text-violet-400 border-violet-500/20",
+  },
+  orange: {
+    userBubble: "bg-orange-500/15 border border-orange-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-orange-500 hover:bg-orange-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-orange-400",
+    inputCaret: "caret-orange-400",
+    modelBadge: "bg-orange-500/10 text-orange-400 border-orange-500/20",
+  },
+  blue: {
+    userBubble: "bg-blue-500/15 border border-blue-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-blue-500 hover:bg-blue-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-blue-400",
+    inputCaret: "caret-blue-400",
+    modelBadge: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+  },
+  pink: {
+    userBubble: "bg-pink-500/15 border border-pink-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-pink-500 hover:bg-pink-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-pink-400",
+    inputCaret: "caret-pink-400",
+    modelBadge: "bg-pink-500/10 text-pink-400 border-pink-500/20",
+  },
+  green: {
+    userBubble: "bg-green-500/15 border border-green-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-green-500 hover:bg-green-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-green-400",
+    inputCaret: "caret-green-400",
+    modelBadge: "bg-green-500/10 text-green-400 border-green-500/20",
+  },
+  amber: {
+    userBubble: "bg-amber-500/15 border border-amber-500/20",
+    assistantBubble: "bg-zinc-800/50 border border-zinc-700/50",
+    sendButton: "bg-amber-500 hover:bg-amber-600 text-white",
+    sendButtonDisabled: "bg-zinc-700 text-zinc-500",
+    streamingDot: "bg-amber-400",
+    inputCaret: "caret-amber-400",
+    modelBadge: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+  },
+};
+
+export function getChatTheme(color: AccentColor): ChatTheme {
+  return CHAT_THEMES[color];
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+export { CodeEditor } from "./CodeEditor";
+export type { CodeEditorProps } from "./CodeEditor";
+export { Terminal } from "./Terminal";
+export type { TerminalProps } from "./Terminal";
+export { BrowserWindow } from "./BrowserWindow";
+export type { BrowserWindowProps, InspectedElement } from "./BrowserWindow";
+export { FileExplorer } from "./FileExplorer";
+export type { FileExplorerProps } from "./FileExplorer";
+export { PanelToggle } from "./PanelToggle";
+export type { PanelToggleProps } from "./PanelToggle";
+export {
+  MobileTabBar,
+  ChatIcon,
+  PreviewIcon,
+  CodeIcon,
+  TerminalIcon,
+  FilesIcon,
+} from "./MobileTabBar";
+export type { MobileTabBarProps, TabItem } from "./MobileTabBar";
+export { useMediaQuery } from "./useMediaQuery";
+export type { TerminalLine, AccentColor, FileEntry } from "./types";
+export { AIChatPanel } from "./AIChatPanel";
+export type { AIChatPanelProps, ChatMessage } from "./AIChatPanel";
+export { getLanguageLabel } from "./language-labels";
+export {
+  getEditorTheme,
+  getTerminalTheme,
+  getLineStyles,
+  getFileExplorerTheme,
+} from "./theme";
+export type { EditorTheme, TerminalTheme, FileExplorerTheme } from "./theme";
+export { getChatTheme } from "./chat-theme";
+export type { ChatTheme } from "./chat-theme";

package/src/language-labels.ts

@@ -0,0 +1,26 @@
+const LANGUAGE_MAP: Record<string, string> = {
+  js: "JavaScript",
+  jsx: "JSX",
+  mjs: "JavaScript",
+  cjs: "JavaScript",
+  ts: "TypeScript",
+  tsx: "TSX",
+  mts: "TypeScript",
+  cts: "TypeScript",
+  json: "JSON",
+  md: "Markdown",
+  html: "HTML",
+  css: "CSS",
+  vue: "Vue SFC",
+  svelte: "Svelte",
+  astro: "Astro",
+  yaml: "YAML",
+  yml: "YAML",
+  toml: "TOML",
+  sh: "Shell",
+};
+
+export function getLanguageLabel(filename: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  return LANGUAGE_MAP[ext || ""] || "Plain Text";
+}

package/src/shiki-languages.ts

@@ -0,0 +1,27 @@
+const SHIKI_LANG_MAP: Record<string, string> = {
+  js: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  ts: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  jsx: "jsx",
+  tsx: "tsx",
+  json: "json",
+  html: "html",
+  css: "css",
+  md: "markdown",
+  vue: "vue",
+  svelte: "svelte",
+  astro: "astro",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  sh: "shellscript",
+};
+
+export function getShikiLang(filename: string | null): string {
+  if (!filename) return "plaintext";
+  const ext = filename.split(".").pop()?.toLowerCase();
+  return SHIKI_LANG_MAP[ext || ""] || "plaintext";
+}