@run0/jiki-ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1720 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+const EDITOR_THEMES = {
+  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 = {
+  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"
+  }
+};
+const FILE_EXPLORER_THEMES = {
+  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" }
+};
+function getFileExplorerTheme(color) {
+  return FILE_EXPLORER_THEMES[color];
+}
+function getEditorTheme(color) {
+  return EDITOR_THEMES[color];
+}
+function getTerminalTheme(color) {
+  return TERMINAL_THEMES[color];
+}
+function getLineStyles(color, overrides) {
+  return {
+    command: TERMINAL_THEMES[color].commandStyle,
+    stdout: "text-zinc-300",
+    stderr: "text-red-400",
+    info: "text-blue-400 italic",
+    success: "text-emerald-400",
+    ...overrides
+  };
+}
+const LANGUAGE_MAP = {
+  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"
+};
+function getLanguageLabel(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  return LANGUAGE_MAP[ext || ""] || "Plain Text";
+}
+const SHIKI_LANG_MAP = {
+  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"
+};
+function getShikiLang(filename) {
+  if (!filename) return "plaintext";
+  const ext = filename.split(".").pop()?.toLowerCase();
+  return SHIKI_LANG_MAP[ext || ""] || "plaintext";
+}
+let highlighterInstance = null;
+let highlighterPromise = null;
+async function getOrCreateHighlighter() {
+  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;
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function buildFallbackHtml(code) {
+  return `<pre style="margin:0;background:transparent"><code style="color:#e4e4e7">${escapeHtml(code)}</code></pre>`;
+}
+async function doHighlight(code, filename, el) {
+  if (!el || !highlighterInstance) return;
+  const lang = getShikiLang(filename);
+  if (lang !== "plaintext" && !highlighterInstance.getLoadedLanguages().includes(lang)) {
+    try {
+      await highlighterInstance.loadLanguage(
+        lang
+      );
+    } catch {
+      el.innerHTML = buildFallbackHtml(code);
+      return;
+    }
+  }
+  try {
+    el.innerHTML = highlighterInstance.codeToHtml(code, {
+      lang,
+      theme: "github-dark"
+    });
+  } catch {
+    el.innerHTML = buildFallbackHtml(code);
+  }
+}
+function useShikiHighlighter(code, filename, targetRef) {
+  const readyRef = useRef(false);
+  const debounceRef = useRef(
+    void 0
+  );
+  useEffect(() => {
+    let cancelled = false;
+    getOrCreateHighlighter().then(() => {
+      if (cancelled) return;
+      readyRef.current = true;
+      doHighlight(code, filename, targetRef.current);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!readyRef.current) {
+      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]);
+}
+function CodeEditor({
+  filename,
+  content,
+  onSave,
+  accentColor = "emerald"
+}) {
+  const [localContent, setLocalContent] = useState(content);
+  const [isDirty, setIsDirty] = useState(false);
+  const textareaRef = useRef(null);
+  const lineCountRef = useRef(null);
+  const highlightRef = useRef(null);
+  const theme = getEditorTheme(accentColor);
+  useShikiHighlighter(localContent, filename, highlightRef);
+  useEffect(() => {
+    setLocalContent(content);
+    setIsDirty(false);
+  }, [content, filename]);
+  const handleChange = useCallback(
+    (e) => {
+      setLocalContent(e.target.value);
+      setIsDirty(e.target.value !== content);
+    },
+    [content]
+  );
+  const handleSave = useCallback(() => {
+    if (filename && isDirty) {
+      onSave(filename, localContent);
+      setIsDirty(false);
+    }
+  }, [filename, isDirty, localContent, onSave]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        handleSave();
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.current;
+        if (!ta) return;
+        const start = ta.selectionStart;
+        const end = ta.selectionEnd;
+        const val = ta.value;
+        const newVal = val.substring(0, start) + "  " + val.substring(end);
+        setLocalContent(newVal);
+        setIsDirty(newVal !== content);
+        requestAnimationFrame(() => {
+          ta.selectionStart = ta.selectionEnd = start + 2;
+        });
+      }
+    },
+    [handleSave, content]
+  );
+  const handleScroll = useCallback(() => {
+    if (textareaRef.current) {
+      if (lineCountRef.current) {
+        lineCountRef.current.scrollTop = textareaRef.current.scrollTop;
+      }
+      if (highlightRef.current) {
+        highlightRef.current.scrollTop = textareaRef.current.scrollTop;
+        highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
+      }
+    }
+  }, []);
+  if (!filename) {
+    return /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center text-zinc-600 text-sm", children: "Select a file to edit" });
+  }
+  const lineCount = localContent.split("\n").length;
+  const lineNumbers = useMemo(
+    () => Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-3 text-right text-zinc-600 text-[12px] leading-5",
+        style: { minWidth: "3rem" },
+        children: i + 1
+      },
+      i
+    )),
+    [lineCount]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 bg-zinc-900/50 border-b border-zinc-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-mono text-zinc-300", children: filename }),
+        isDirty && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block h-2 w-2 rounded-full bg-amber-400",
+            title: "Unsaved changes"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-zinc-600", children: getLanguageLabel(filename) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSave,
+            disabled: !isDirty,
+            className: `
+              text-[11px] px-2.5 py-1 rounded font-medium transition-colors
+              ${isDirty ? theme.saveButtonActive : "bg-zinc-800 text-zinc-600 border border-zinc-700 cursor-not-allowed"}
+            `,
+            children: "Save"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden relative font-mono text-[13px] leading-5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: lineCountRef,
+          className: "flex-shrink-0 overflow-hidden bg-zinc-900/30 select-none",
+          children: lineNumbers
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 relative min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: highlightRef,
+            className: "absolute inset-0 overflow-hidden p-2 pointer-events-none [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:!font-[inherit] [&_pre]:![font-size:inherit] [&_pre]:![line-height:inherit] [&_pre]:![letter-spacing:inherit] [&_pre]:![white-space:pre] [&_pre]:![word-wrap:normal] [&_code]:!font-[inherit] [&_code]:![font-size:inherit] [&_code]:![line-height:inherit] [&_.shiki]:!overflow-visible",
+            style: { tabSize: 2 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: localContent,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            onScroll: handleScroll,
+            wrap: "off",
+            spellCheck: false,
+            className: `
+              absolute inset-0 w-full h-full resize-none bg-transparent p-2
+              text-transparent outline-none overflow-auto whitespace-pre
+              ${theme.caret} ${theme.selection}
+            `,
+            style: { tabSize: 2, overflowWrap: "normal", wordBreak: "normal" }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1 bg-zinc-900/30 border-t border-zinc-800 text-[11px] text-zinc-600", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        lineCount,
+        " lines"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: "Ctrl+S / Cmd+S to save" })
+    ] })
+  ] });
+}
+function Terminal({
+  lines,
+  onCommand,
+  onClear,
+  accentColor = "emerald",
+  variant = "default",
+  title = "Terminal",
+  lineStyles: lineStyleOverrides
+}) {
+  const [input, setInput] = useState("");
+  const [history, setHistory] = useState([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const [isRunning, setIsRunning] = useState(false);
+  const scrollRef = useRef(null);
+  const inputRef = useRef(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) => {
+      if (cmd === "clear") {
+        onClear();
+        return;
+      }
+      if (!onCommand) return;
+      setIsRunning(true);
+      await onCommand(cmd);
+      setIsRunning(false);
+      inputRef.current?.focus();
+    },
+    [onCommand, onClear]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      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]
+  );
+  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 /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-zinc-950", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center justify-between px-3 ${headerPy} bg-zinc-900/50 border-b border-zinc-800`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: `${dotSize} rounded-full ${dotOpacity}` }),
+              /* @__PURE__ */ jsx("div", { className: `${dotSize} rounded-full ${dotYellow}` }),
+              /* @__PURE__ */ jsx("div", { className: `${dotSize} rounded-full ${dotGreen}` })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${titleSize} font-semibold uppercase tracking-wider text-zinc-500 ${titleMl}`,
+                children: title
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClear,
+              className: `${clearSize} text-zinc-600 hover:text-zinc-400 transition-colors`,
+              children: "Clear"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        "data-testid": "terminal-output",
+        className: outputClass,
+        children: lines.map((line) => /* @__PURE__ */ jsx("div", { className: styles[line.type], children: line.text.split("\n").map((segment, i) => /* @__PURE__ */ jsx("div", { children: segment || " " }, i)) }, line.id))
+      }
+    ),
+    hasInput && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-zinc-800", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center px-3 ${inputPy} ${inputGap}`, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${termTheme.promptColor} font-mono ${promptSize} font-bold select-none`,
+          children: "$"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "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 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${spinnerSize} animate-spin rounded-full border border-zinc-600 ${termTheme.spinnerBorder}`
+        }
+      )
+    ] }) })
+  ] });
+}
+function BrowserWindow({
+  htmlSrc,
+  url,
+  canGoBack,
+  canGoForward,
+  onBack,
+  onForward,
+  onRefresh,
+  onNavigate,
+  port = 3e3,
+  title = "App Preview",
+  previewUrl,
+  onInspectElement
+}) {
+  const iframeRef = useRef(null);
+  const [docTitle, setDocTitle] = useState(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [inspecting, setInspecting] = useState(false);
+  const inspectCleanupRef = useRef(null);
+  const displayUrl = previewUrl ? `${previewUrl}${url === "/" ? "" : url}` : `http://localhost:${port}${url === "/" ? "" : url}`;
+  const lastSrcdocRef = useRef("");
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    if (previewUrl) {
+      iframe.src = `${previewUrl}${url === "/" ? "/" : url}`;
+    } else if (htmlSrc !== lastSrcdocRef.current) {
+      lastSrcdocRef.current = htmlSrc;
+      iframe.srcdoc = htmlSrc;
+    }
+  }, [htmlSrc, previewUrl]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || previewUrl) return;
+    try {
+      iframe.contentWindow?.postMessage({ type: "navigate", path: url }, "*");
+    } catch {
+    }
+  }, [url, previewUrl]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    let observer;
+    const observe = () => {
+      try {
+        const doc = iframe.contentDocument;
+        if (!doc) return;
+        const readTitle = () => {
+          const t = doc.title;
+          if (t) setDocTitle(t);
+        };
+        readTitle();
+        const head = doc.head ?? doc.documentElement;
+        if (!head) return;
+        observer = new MutationObserver(readTitle);
+        observer.observe(head, {
+          childList: true,
+          subtree: true,
+          characterData: true
+        });
+      } catch {
+      }
+    };
+    iframe.addEventListener("load", observe);
+    return () => {
+      iframe.removeEventListener("load", observe);
+      observer?.disconnect();
+    };
+  }, [htmlSrc, previewUrl]);
+  useEffect(() => {
+    if (inspecting) {
+      inspectCleanupRef.current?.();
+      inspectCleanupRef.current = null;
+      const timer = setTimeout(() => {
+        if (inspecting) injectInspectMode();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [htmlSrc]);
+  const injectInspectMode = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    try {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+      let currentHighlight = null;
+      const OUTLINE = "2px solid #3b82f6";
+      const OUTLINE_OFFSET = "-2px";
+      const onMouseOver = (e) => {
+        const target = e.target;
+        if (target === doc.body || target === doc.documentElement) return;
+        if (currentHighlight) {
+          currentHighlight.style.outline = "";
+          currentHighlight.style.outlineOffset = "";
+        }
+        target.style.outline = OUTLINE;
+        target.style.outlineOffset = OUTLINE_OFFSET;
+        currentHighlight = target;
+      };
+      const onMouseOut = (e) => {
+        const target = e.target;
+        target.style.outline = "";
+        target.style.outlineOffset = "";
+        if (currentHighlight === target) currentHighlight = null;
+      };
+      const onClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const target = e.target;
+        target.style.outline = "";
+        target.style.outlineOffset = "";
+        const text = (target.textContent || "").trim().slice(0, 200);
+        const html = target.outerHTML.slice(0, 500);
+        onInspectElement?.({
+          tagName: target.tagName.toLowerCase(),
+          className: target.className || "",
+          textContent: text,
+          outerHTML: html
+        });
+        cleanup();
+        setInspecting(false);
+      };
+      doc.addEventListener("mouseover", onMouseOver, true);
+      doc.addEventListener("mouseout", onMouseOut, true);
+      doc.addEventListener("click", onClick, true);
+      doc.body.style.cursor = "crosshair";
+      const cleanup = () => {
+        doc.removeEventListener("mouseover", onMouseOver, true);
+        doc.removeEventListener("mouseout", onMouseOut, true);
+        doc.removeEventListener("click", onClick, true);
+        doc.body.style.cursor = "";
+        if (currentHighlight) {
+          currentHighlight.style.outline = "";
+          currentHighlight.style.outlineOffset = "";
+          currentHighlight = null;
+        }
+      };
+      inspectCleanupRef.current = cleanup;
+    } catch {
+    }
+  }, [onInspectElement]);
+  const toggleInspect = useCallback(() => {
+    if (inspecting) {
+      inspectCleanupRef.current?.();
+      inspectCleanupRef.current = null;
+      setInspecting(false);
+    } else {
+      setInspecting(true);
+      requestAnimationFrame(() => injectInspectMode());
+    }
+  }, [inspecting, injectInspectMode]);
+  const handleAddressKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        const val = e.currentTarget.value.trim();
+        try {
+          const parsed = new URL(
+            val.startsWith("http") ? val : `http://localhost:${port}${val}`
+          );
+          onNavigate(parsed.pathname || "/");
+        } catch {
+          onNavigate(val.startsWith("/") ? val : `/${val}`);
+        }
+      }
+    },
+    [onNavigate, port]
+  );
+  const tabLabel = docTitle || title;
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col rounded-xl overflow-hidden border border-zinc-800 bg-zinc-950 shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_8px_40px_-12px_rgba(0,0,0,0.6)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 flex items-center gap-2 h-10 px-3 bg-zinc-900/80 border-b border-zinc-800/80 select-none", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[6px] mr-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "block h-[10px] w-[10px] rounded-full bg-[#ff5f57] ring-1 ring-black/10" }),
+        /* @__PURE__ */ jsx("span", { className: "block h-[10px] w-[10px] rounded-full bg-[#febc2e] ring-1 ring-black/10" }),
+        /* @__PURE__ */ jsx("span", { className: "block h-[10px] w-[10px] rounded-full bg-[#28c840] ring-1 ring-black/10" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onBack,
+            disabled: !canGoBack,
+            className: "p-1 rounded-md text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:text-zinc-700 disabled:hover:bg-transparent transition-colors",
+            title: "Back",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx("path", { d: "M10.354 3.354a.5.5 0 0 0-.708-.708l-5 5a.5.5 0 0 0 0 .708l5 5a.5.5 0 0 0 .708-.708L5.707 8l4.647-4.646z" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onForward,
+            disabled: !canGoForward,
+            className: "p-1 rounded-md text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:text-zinc-700 disabled:hover:bg-transparent transition-colors",
+            title: "Forward",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx("path", { d: "M5.646 3.354a.5.5 0 0 1 .708-.708l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708-.708L10.293 8 5.646 3.354z" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onRefresh,
+            className: "p-1 rounded-md text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors",
+            title: "Refresh",
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M2.5 8a5.5 5.5 0 0 1 9.22-4.05M13.5 8a5.5 5.5 0 0 1-9.22 4.05" }),
+                  /* @__PURE__ */ jsx("path", { d: "M13.5 2.5v3h-3M2.5 13.5v-3h3" })
+                ]
+              }
+            )
+          }
+        ),
+        onInspectElement && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: toggleInspect,
+            className: `p-1 rounded-md transition-colors ${inspecting ? "text-blue-400 bg-blue-500/15" : "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800"}`,
+            title: inspecting ? "Cancel inspect" : "Inspect element",
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M3 12l3 0" }),
+                  /* @__PURE__ */ jsx("path", { d: "M12 3l0 3" }),
+                  /* @__PURE__ */ jsx("path", { d: "M7.8 7.8l-2.2 -2.2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M16.2 7.8l2.2 -2.2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M7.8 16.2l-2.2 2.2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M12 12l9 3l-4 2l-2 4l-3 -9" })
+                ]
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex-1 flex items-center gap-2 h-[26px] rounded-md px-2.5 transition-colors ${isFocused ? "bg-zinc-950 ring-1 ring-zinc-600" : "bg-zinc-800/60 hover:bg-zinc-800"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3 h-3 flex-shrink-0 text-zinc-500",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M8 1a4.5 4.5 0 0 0-4.5 4.5V7H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.5V5.5A4.5 4.5 0 0 0 8 1zm2.5 6V5.5a2.5 2.5 0 0 0-5 0V7h5z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                defaultValue: displayUrl,
+                onKeyDown: handleAddressKeyDown,
+                onFocus: () => setIsFocused(true),
+                onBlur: () => setIsFocused(false),
+                className: "flex-1 bg-transparent text-[11px] text-zinc-400 outline-none font-mono leading-none placeholder:text-zinc-600",
+                spellCheck: false
+              },
+              displayUrl
+            ),
+            tabLabel && /* @__PURE__ */ jsx("span", { className: "hidden sm:block text-[10px] text-zinc-600 truncate max-w-[120px] leading-none", children: tabLabel })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 bg-white relative", children: [
+      /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref: iframeRef,
+          title: docTitle || title,
+          sandbox: "allow-scripts allow-forms allow-popups allow-same-origin",
+          className: "absolute inset-0 w-full h-full border-0"
+        }
+      ),
+      inspecting && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-1/2 -translate-x-1/2 z-10 px-3 py-1 rounded-full bg-blue-500/90 text-white text-[10px] font-mono shadow-lg pointer-events-none", children: "Click an element to inspect" })
+    ] })
+  ] });
+}
+const FILE_COLOR_MAP = {
+  js: "text-yellow-400",
+  mjs: "text-yellow-400",
+  cjs: "text-yellow-400",
+  jsx: "text-cyan-400",
+  ts: "text-blue-400",
+  tsx: "text-cyan-400",
+  json: "text-amber-300",
+  html: "text-orange-400",
+  css: "text-pink-400",
+  md: "text-blue-400",
+  vue: "text-emerald-400",
+  svelte: "text-orange-400",
+  astro: "text-orange-400",
+  yaml: "text-blue-400",
+  yml: "text-blue-400",
+  toml: "text-blue-400",
+  sh: "text-green-400",
+  svg: "text-emerald-400"
+};
+function FileIcon({
+  isDir,
+  name,
+  compact
+}) {
+  const iconSize = compact ? "text-[11px] w-3.5" : "text-xs w-4";
+  if (isDir) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `text-amber-400 ${iconSize} inline-block text-center mr-1.5`,
+        children: "📁"
+      }
+    );
+  }
+  const ext = name.split(".").pop()?.toLowerCase();
+  const color = FILE_COLOR_MAP[ext || ""] || "text-zinc-400";
+  return /* @__PURE__ */ jsx("span", { className: `${color} ${iconSize} inline-block text-center mr-1.5`, children: "📄" });
+}
+function TreeNode({
+  entry,
+  depth,
+  selectedFile,
+  onSelect,
+  theme,
+  compact
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const isSelected = entry.path === selectedFile;
+  const py = compact ? "py-[3px]" : "py-0.5";
+  const px = compact ? "px-1.5" : "px-2";
+  const fontSize = compact ? "text-[12px]" : "text-[13px]";
+  const arrowSize = compact ? "text-[9px] w-2.5" : "text-[10px] w-3";
+  const indent = compact ? depth * 10 + 6 : depth * 12 + 8;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => entry.isDir ? setExpanded(!expanded) : onSelect(entry.path),
+        className: `
+          w-full text-left flex items-center ${py} ${px} rounded ${fontSize} font-mono
+          transition-colors duration-75
+          ${isSelected ? theme.selected : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"}
+        `,
+        style: { paddingLeft: `${indent}px` },
+        children: [
+          entry.isDir && /* @__PURE__ */ jsx("span", { className: `${arrowSize} mr-1 text-zinc-500 inline-block`, children: expanded ? "▾" : "▸" }),
+          !entry.isDir && /* @__PURE__ */ jsx("span", { className: `${arrowSize} inline-block` }),
+          /* @__PURE__ */ jsx(FileIcon, { isDir: entry.isDir, name: entry.name, compact }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.name })
+        ]
+      }
+    ),
+    entry.isDir && expanded && entry.children?.map((child) => /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        entry: child,
+        depth: depth + 1,
+        selectedFile,
+        onSelect,
+        theme,
+        compact
+      },
+      child.path
+    ))
+  ] });
+}
+function FileExplorer({
+  files,
+  selectedFile,
+  onSelect,
+  accentColor = "emerald",
+  variant = "default"
+}) {
+  const theme = getFileExplorerTheme(accentColor);
+  const compact = variant === "compact";
+  if (files.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `p-2 ${compact ? "text-[11px]" : "text-xs"} text-zinc-600 italic`,
+        children: "No files"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: compact ? "py-0.5" : "py-1", children: files.map((entry) => /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      entry,
+      depth: 0,
+      selectedFile,
+      onSelect,
+      theme,
+      compact
+    },
+    entry.path
+  )) });
+}
+const ACCENT_LABELS = {
+  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 = {
+  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 = {
+  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"
+};
+function PanelToggle({
+  collapsed,
+  onClick,
+  label,
+  side = "left",
+  accentColor = "emerald"
+}) {
+  const chevronRight = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 6l6 6l-6 6" })
+  ] });
+  const chevronLeft = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 6-6 6 6 6" })
+  ] });
+  if (collapsed) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick,
+        className: "flex-shrink-0 w-7 flex flex-col items-center gap-2 pt-3 pb-3\n                   border-r border-zinc-800 bg-zinc-900/40\n                   hover:bg-zinc-800/60 transition-colors cursor-pointer",
+        title: `Show ${label}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `w-3 h-3 ${ACCENT_CHEVRONS[accentColor]}`,
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              fill: "none",
+              children: side === "left" ? chevronRight : chevronLeft
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-[10px] font-mono tracking-wider uppercase select-none ${ACCENT_LABELS[accentColor]}`,
+              style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      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}`,
+      children: /* @__PURE__ */ jsx(
+        "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",
+          children: side === "left" ? chevronLeft : chevronRight
+        }
+      )
+    }
+  );
+}
+const ACTIVE_BG = {
+  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 = {
+  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"
+};
+function MobileTabBar({
+  tabs,
+  activeTab,
+  onTabChange,
+  accentColor = "emerald"
+}) {
+  const containerRef = useRef(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(
+      "[data-tab-id]"
+    );
+    const btn = buttons[activeIndex];
+    if (!btn) return;
+    setIndicator({
+      left: btn.offsetLeft,
+      width: btn.offsetWidth
+    });
+  }, [activeTab, tabs]);
+  return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-3 py-1.5 border-b border-zinc-800 bg-zinc-950", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative flex rounded-lg bg-zinc-900 border border-zinc-800 p-0.5",
+      children: [
+        /* @__PURE__ */ jsx(
+          "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 /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "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"}`,
+              children: [
+                tab.icon,
+                tab.label
+              ]
+            },
+            tab.id
+          );
+        })
+      ]
+    }
+  ) });
+}
+function ChatIcon({ className = "w-3.5 h-3.5" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("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" }) });
+}
+function PreviewIcon({ className = "w-3.5 h-3.5" }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+    /* @__PURE__ */ jsx("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" })
+  ] });
+}
+function CodeIcon({ className = "w-3.5 h-3.5" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) });
+}
+function TerminalIcon({ className = "w-3.5 h-3.5" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("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" }) });
+}
+function FilesIcon({ className = "w-3.5 h-3.5" }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("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" }) });
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+const CHAT_THEMES = {
+  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"
+  }
+};
+function getChatTheme(color) {
+  return CHAT_THEMES[color];
+}
+function CodeBlock({ lang, content }) {
+  const [collapsed, setCollapsed] = useState(false);
+  const lineCount = content.split("\n").length;
+  return /* @__PURE__ */ jsxs("div", { className: "my-2 rounded-lg bg-zinc-900 border border-zinc-700/50 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between px-3 py-1.5 bg-zinc-800/50 cursor-pointer select-none",
+        onClick: () => setCollapsed((c) => !c),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            lang && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 font-mono uppercase tracking-wider", children: lang }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-600 font-mono", children: [
+              lineCount,
+              " lines"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `w-3 h-3 text-zinc-500 transition-transform ${collapsed ? "" : "rotate-180"}`,
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" })
+            }
+          )
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx("pre", { className: "p-3 overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[12px] font-mono text-zinc-300 leading-relaxed whitespace-pre", children: content }) })
+  ] });
+}
+function renderContent(text) {
+  const parts = [];
+  const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = codeBlockRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ type: "text", content: text.slice(lastIndex, match.index) });
+    }
+    parts.push({
+      type: "code",
+      content: match[2],
+      lang: match[1] || void 0
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push({ type: "text", content: text.slice(lastIndex) });
+  }
+  if (parts.length === 0) {
+    parts.push({ type: "text", content: text });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, i) => {
+    if (part.type === "code") {
+      return /* @__PURE__ */ jsx(CodeBlock, { lang: part.lang, content: part.content }, i);
+    }
+    return /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap", children: part.content }, i);
+  }) });
+}
+function renderUserContent(text) {
+  const parts = text.split(/(@\/[^\s]+)/g);
+  return /* @__PURE__ */ jsx(Fragment, { children: parts.map(
+    (part, i) => part.startsWith("@/") ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-0.5 px-1 py-0.5 rounded bg-blue-500/20 text-blue-300 font-mono text-[11px]",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-2.5 h-2.5 flex-shrink-0",
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M3.75 1.5A2.25 2.25 0 0 0 1.5 3.75v8.5A2.25 2.25 0 0 0 3.75 14.5h8.5a2.25 2.25 0 0 0 2.25-2.25V6.621a2.25 2.25 0 0 0-.659-1.591L10.47 1.659A2.25 2.25 0 0 0 8.879 1.5H3.75z" })
+            }
+          ),
+          part.slice(1)
+        ]
+      },
+      i
+    ) : /* @__PURE__ */ jsx("span", { children: part }, i)
+  ) });
+}
+function MessageBubble({
+  msg,
+  theme
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const hasCode = msg.role === "assistant" && /```/.test(msg.content);
+  const isLong = msg.content.length > 500;
+  const canCollapse = (hasCode || isLong) && !msg.isStreaming;
+  if (msg.role === "user") {
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `max-w-[85%] rounded-xl px-3.5 py-2.5 text-[13px] leading-relaxed ${theme.userBubble} text-zinc-200`,
+        children: renderUserContent(msg.content)
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "text-[13px] leading-relaxed text-zinc-300", children: collapsed ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => setCollapsed(false),
+      className: "flex items-center gap-1.5 text-left",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-2.5 h-2.5 text-zinc-600 flex-shrink-0",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx("path", { d: "M6.646 3.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L9.293 7 6.646 4.354a.5.5 0 0 1 0-.708z" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-zinc-600", children: [
+          msg.content.split("\n")[0].replace(/```\w*/, "").trim().slice(0, 60) || "Response",
+          "..."
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs("div", { children: [
+    renderContent(msg.content),
+    msg.isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 ml-1", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `inline-block h-1.5 w-1.5 rounded-full ${theme.streamingDot} animate-pulse`
+      }
+    ) }),
+    canCollapse && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setCollapsed(true),
+        className: "mt-1 flex items-center gap-1 text-zinc-600 hover:text-zinc-400 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-2.5 h-2.5",
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "Collapse" })
+        ]
+      }
+    )
+  ] }) });
+}
+function AIChatPanel({
+  messages,
+  onSendMessage,
+  isStreaming = false,
+  accentColor = "blue",
+  title = "Chat",
+  modelLabel,
+  onLoadMore,
+  hasMoreMessages = false,
+  filePaths = [],
+  inspectedElement,
+  onClearInspectedElement
+}) {
+  const [input, setInput] = useState("");
+  const scrollRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const textareaRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  const [mentionQuery, setMentionQuery] = useState(null);
+  const [mentionStart, setMentionStart] = useState(0);
+  const [mentionIdx, setMentionIdx] = useState(0);
+  const theme = getChatTheme(accentColor);
+  const mentionFiltered = useMemo(() => {
+    if (mentionQuery === null) return [];
+    const q = mentionQuery.toLowerCase();
+    return filePaths.filter((p) => p.toLowerCase().includes(q)).slice(0, 8);
+  }, [mentionQuery, filePaths]);
+  useEffect(() => {
+    setMentionIdx(0);
+  }, [mentionFiltered.length]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el && isAtBottomRef.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [messages]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const handleScroll = () => {
+      const threshold = 40;
+      isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, []);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !onLoadMore || !hasMoreMessages) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onLoadMore();
+        }
+      },
+      { root: scrollRef.current, threshold: 0 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [onLoadMore, hasMoreMessages]);
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
+  }, [input]);
+  const handleInputChange = useCallback(
+    (e) => {
+      const val = e.target.value;
+      setInput(val);
+      const cursorPos = e.target.selectionStart;
+      const textBefore = val.slice(0, cursorPos);
+      const atMatch = textBefore.match(/(?:^|\s)@([^\s]*)$/);
+      if (atMatch) {
+        setMentionQuery(atMatch[1]);
+        setMentionStart(cursorPos - atMatch[1].length - 1);
+      } else {
+        setMentionQuery(null);
+      }
+    },
+    []
+  );
+  const handleMentionSelect = useCallback(
+    (path) => {
+      const before = input.slice(0, mentionStart);
+      const after = input.slice(mentionStart + 1 + (mentionQuery?.length ?? 0));
+      const newInput = `${before}@${path}${after ? after : " "}`;
+      setInput(newInput);
+      setMentionQuery(null);
+      requestAnimationFrame(() => {
+        const ta = textareaRef.current;
+        if (ta) {
+          ta.focus();
+          const pos = before.length + 1 + path.length + 1;
+          ta.selectionStart = pos;
+          ta.selectionEnd = pos;
+        }
+      });
+    },
+    [input, mentionStart, mentionQuery]
+  );
+  const handleSend = useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed || isStreaming) return;
+    let messageContent = trimmed;
+    if (inspectedElement) {
+      const ctx = `[Inspected element: <${inspectedElement.tagName} class="${inspectedElement.className}"> "${inspectedElement.textContent.slice(0, 100)}"]
+
+`;
+      messageContent = ctx + trimmed;
+      onClearInspectedElement?.();
+    }
+    onSendMessage(messageContent);
+    setInput("");
+    setMentionQuery(null);
+    isAtBottomRef.current = true;
+  }, [
+    input,
+    isStreaming,
+    onSendMessage,
+    inspectedElement,
+    onClearInspectedElement
+  ]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (mentionQuery !== null && mentionFiltered.length > 0) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setMentionIdx((i) => (i + 1) % mentionFiltered.length);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setMentionIdx(
+            (i) => (i - 1 + mentionFiltered.length) % mentionFiltered.length
+          );
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          e.preventDefault();
+          handleMentionSelect(mentionFiltered[mentionIdx]);
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setMentionQuery(null);
+          return;
+        }
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [
+      handleSend,
+      mentionQuery,
+      mentionFiltered,
+      mentionIdx,
+      handleMentionSelect
+    ]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-zinc-950", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 bg-zinc-900/50 border-b border-zinc-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-red-500/70" }),
+          /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-yellow-500/70" }),
+          /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-green-500/70" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500", children: title })
+      ] }),
+      modelLabel && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-[10px] font-mono px-2 py-0.5 rounded-full border ${theme.modelBadge}`,
+          children: modelLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: scrollRef,
+        className: "flex-1 overflow-y-auto px-3 py-3 space-y-3",
+        children: [
+          hasMoreMessages && /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: "flex justify-center py-2", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border border-zinc-600 border-t-zinc-400" }) }),
+          messages.map((msg) => /* @__PURE__ */ jsx(MessageBubble, { msg, theme }, msg.id))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-zinc-800 p-3", children: [
+      inspectedElement && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "w-3.5 h-3.5 text-blue-400 flex-shrink-0",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M3 12l3 0" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 3l0 3" }),
+              /* @__PURE__ */ jsx("path", { d: "M7.8 7.8l-2.2 -2.2" }),
+              /* @__PURE__ */ jsx("path", { d: "M16.2 7.8l2.2 -2.2" }),
+              /* @__PURE__ */ jsx("path", { d: "M7.8 16.2l-2.2 2.2" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 12l9 3l-4 2l-2 4l-3 -9" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-mono text-blue-300", children: [
+            "<",
+            inspectedElement.tagName,
+            ">"
+          ] }),
+          inspectedElement.textContent && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-zinc-500 ml-1.5 truncate", children: [
+            '"',
+            inspectedElement.textContent.slice(0, 40),
+            inspectedElement.textContent.length > 40 ? "..." : "",
+            '"'
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClearInspectedElement,
+            className: "text-zinc-500 hover:text-zinc-300 transition-colors flex-shrink-0",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-end gap-2", children: [
+        mentionQuery !== null && mentionFiltered.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-0 right-0 mb-1 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl overflow-hidden z-10", children: mentionFiltered.map((path, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleMentionSelect(path);
+            },
+            onMouseEnter: () => setMentionIdx(i),
+            className: `w-full text-left px-3 py-1.5 text-[12px] font-mono flex items-center gap-2 transition-colors ${i === mentionIdx ? "bg-blue-500/15 text-blue-300" : "text-zinc-400 hover:bg-zinc-800"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-3 h-3 flex-shrink-0 text-zinc-500",
+                  viewBox: "0 0 16 16",
+                  fill: "currentColor",
+                  children: /* @__PURE__ */ jsx("path", { d: "M3.75 1.5A2.25 2.25 0 0 0 1.5 3.75v8.5A2.25 2.25 0 0 0 3.75 14.5h8.5a2.25 2.25 0 0 0 2.25-2.25V6.621a2.25 2.25 0 0 0-.659-1.591L10.47 1.659A2.25 2.25 0 0 0 8.879 1.5H3.75z" })
+                }
+              ),
+              path
+            ]
+          },
+          path
+        )) }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: input,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            disabled: isStreaming,
+            placeholder: isStreaming ? "Generating..." : "Describe a component... (@ to reference files)",
+            rows: 1,
+            className: `
+              flex-1 resize-none overflow-hidden bg-zinc-900 border border-zinc-700/50 rounded-lg px-3 py-2
+              text-[13px] text-zinc-200 font-mono outline-none
+              placeholder:text-zinc-600 disabled:opacity-50
+              focus:border-zinc-600 transition-colors
+              min-h-[60px]
+              ${theme.inputCaret}
+            `
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSend,
+            disabled: isStreaming || !input.trim(),
+            className: `
+              flex-shrink-0 h-9 w-9 rounded-lg flex items-center justify-center
+              transition-colors disabled:cursor-not-allowed
+              ${isStreaming || !input.trim() ? theme.sendButtonDisabled : theme.sendButton}
+            `,
+            children: isStreaming ? /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border border-zinc-500 border-t-zinc-300" }) : /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M1.724 1.053a.5.5 0 0 0-.714.545l1.403 4.85a.5.5 0 0 0 .397.354l5.69.953c.268.045.268.545 0 .59l-5.69.953a.5.5 0 0 0-.397.354l-1.403 4.85a.5.5 0 0 0 .714.545l13-6.5a.5.5 0 0 0 0-.894l-13-6.5z" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-zinc-600 mt-1.5 px-1", children: "Enter to send · Shift+Enter for newline · @ to reference files" })
+    ] })
+  ] });
+}
+export {
+  AIChatPanel,
+  BrowserWindow,
+  ChatIcon,
+  CodeEditor,
+  CodeIcon,
+  FileExplorer,
+  FilesIcon,
+  MobileTabBar,
+  PanelToggle,
+  PreviewIcon,
+  Terminal,
+  TerminalIcon,
+  getChatTheme,
+  getEditorTheme,
+  getFileExplorerTheme,
+  getLanguageLabel,
+  getLineStyles,
+  getTerminalTheme,
+  useMediaQuery
+};
+//# sourceMappingURL=index.mjs.map