@blank-utils/llm 0.3.20 → 0.4.0

package/dist/{chunk-7YC6ECAU.js → chunk-PTPT4EPO.js}

@@ -894,7 +894,7 @@ import { useRef as useRef3, useEffect as useEffect3, useState as useState3, useM
 // src/react/chat-input.tsx
 import "react";
 import { useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useState as useState2 } from "react";
-import { Square, ImagePlus, X } from "lucide-react";
+import "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChatInput({
   value,
@@ -1006,7 +1006,7 @@ ${newText}` : newText);
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: `relative flex flex-col bg-black border border-white/30 rounded-none focus-within:border-white/60 transition-colors p-3 font-mono ${className}`,
+      className: `relative flex flex-col bg-transparent rounded-none transition-colors p-0 font-mono ${className}`,
       onDragOver: (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -1014,10 +1014,7 @@ ${newText}` : newText);
       onDragLeave: () => setIsDragging(false),
       onDrop: handleDrop,
       children: [
-        isDragging && /* @__PURE__ */ jsxs2("div", { className: "absolute inset-x-0 inset-y-0 bg-black/90 flex flex-col items-center justify-center z-20 border border-dashed border-white/50 rounded-none m-1", children: [
-          /* @__PURE__ */ jsx2(ImagePlus, { className: "w-8 h-8 text-white mb-2" }),
-          /* @__PURE__ */ jsx2("span", { className: "text-white font-light tracking-widest uppercase text-xs", children: "Drop file to attach" })
-        ] }),
+        isDragging && /* @__PURE__ */ jsx2("div", { className: "absolute inset-x-0 inset-y-0 bg-current/90 flex flex-col items-center justify-center z-20 backdrop-blur-sm", children: /* @__PURE__ */ jsx2("span", { className: "text-black dark:text-white font-light tracking-[0.2em] uppercase text-xs", children: "DROP FILE TO ATTACH" }) }),
         /* @__PURE__ */ jsx2(
           "input",
           {
@@ -1029,15 +1026,15 @@ ${newText}` : newText);
             onChange: handleFileSelect
           }
         ),
-        images.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2 mb-3", children: images.map((img) => /* @__PURE__ */ jsxs2("div", { className: "relative w-16 h-16 overflow-hidden border border-white/30 rounded-none group select-none", children: [
+        images.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2 mb-6", children: images.map((img) => /* @__PURE__ */ jsxs2("div", { className: "relative w-16 h-16 overflow-hidden border border-current/20 rounded-none group select-none", children: [
           /* @__PURE__ */ jsx2("img", { src: img.dataUrl, alt: "attachment", className: "w-full h-full object-cover grayscale transition-all group-hover:grayscale-0" }),
           /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
-              className: "absolute top-0 right-0 w-5 h-5 bg-black/80 text-white border-l border-b border-white/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
+              className: "absolute top-0 right-0 w-5 h-5 bg-black/80 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-[8px]",
               onClick: () => onImageRemove?.(img.id),
-              children: /* @__PURE__ */ jsx2(X, { className: "w-3 h-3" })
+              children: "[X]"
             }
           )
         ] }, img.id)) }),
@@ -1052,43 +1049,40 @@ ${newText}` : newText);
             placeholder,
             disabled: disabled && !isGenerating,
             rows: 1,
-            className: "w-full min-h-[24px] max-h-[200px] resize-none border-none outline-none bg-transparent text-white text-sm font-light font-mono leading-relaxed p-0 m-0 placeholder:text-white/30 placeholder:uppercase placeholder:tracking-widest scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
+            className: "w-full min-h-[24px] max-h-[200px] resize-none border-none outline-none bg-transparent text-current text-[13px] font-light font-mono leading-relaxed p-0 m-0 placeholder:text-current placeholder:opacity-30 placeholder:uppercase placeholder:tracking-[0.2em] scrollbar-none"
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-white/10", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-            modelSelector && /* @__PURE__ */ jsx2("div", { className: "mr-2", children: modelSelector }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between mt-6", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4", children: [
+            modelSelector && /* @__PURE__ */ jsx2("div", { children: modelSelector }),
             /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
-                className: "flex items-center justify-center w-8 h-8 rounded-none text-white/50 hover:text-white transition-colors",
+                className: "text-[11px] uppercase tracking-[0.2em] text-current opacity-50 hover:opacity-100 transition-opacity font-light",
                 onClick: () => fileInputRef.current?.click(),
                 title: "Attach image or PDF (Ctrl+V to paste)",
-                children: /* @__PURE__ */ jsx2(ImagePlus, { className: "w-4 h-4" })
+                children: "[ FILE ]"
               }
             ),
             actions
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: isGenerating ? /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-4", children: isGenerating ? /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
-              className: "flex items-center justify-center h-8 px-4 rounded-none border border-red-500/50 bg-red-500/10 text-red-500 hover:bg-red-500/20 font-light text-[10px] uppercase tracking-widest transition-colors gap-2 cursor-pointer",
+              className: "text-red-500 hover:opacity-70 font-light text-[11px] uppercase tracking-[0.2em] transition-opacity cursor-pointer",
               onClick: onStop,
-              children: [
-                /* @__PURE__ */ jsx2(Square, { className: "w-3 h-3 fill-current" }),
-                " STOP"
-              ]
+              children: "[ STOP ]"
             }
           ) : /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
-              className: `flex items-center justify-center h-8 px-4 rounded-none border text-[10px] font-light uppercase tracking-widest transition-colors gap-2 ${canSend ? "border-white/30 bg-transparent text-white hover:bg-white hover:text-black cursor-pointer" : "border-white/10 bg-transparent text-white/20 cursor-not-allowed"}`,
+              className: `text-[11px] font-light uppercase tracking-[0.2em] transition-opacity ${canSend ? "text-current opacity-100 hover:opacity-70 cursor-pointer" : "text-current opacity-20 cursor-not-allowed"}`,
               onClick: onSend,
               disabled: !canSend,
-              children: "SEND"
+              children: "[ SEND ]"
             }
           ) })
         ] })
@@ -1098,7 +1092,7 @@ ${newText}` : newText);
 }
 
 // src/react/components.tsx
-import { RotateCcw, ChevronDown, AlertCircle } from "lucide-react";
+import { AlertCircle } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Streamdown, parseMarkdownIntoBlocks } from "streamdown";
@@ -1203,26 +1197,27 @@ function ModelSelector({
     return label;
   }, [currentModel]);
   return /* @__PURE__ */ jsxs3("div", { className: "relative font-mono", ref, children: [
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
-        className: "flex items-center gap-2 px-3 py-1.5 border border-white/30 bg-transparent text-white hover:bg-white hover:text-black text-xs font-light uppercase tracking-widest transition-colors",
+        className: "flex items-center gap-2 px-0 py-1.5 bg-transparent text-current hover:opacity-70 text-[11px] font-light uppercase tracking-widest transition-opacity",
         onClick: () => setIsOpen(!isOpen),
-        children: [
-          /* @__PURE__ */ jsx3("span", { children: displayModel }),
-          /* @__PURE__ */ jsx3(ChevronDown, { className: "w-4 h-4" })
-        ]
+        children: /* @__PURE__ */ jsxs3("span", { children: [
+          "[ ",
+          displayModel,
+          " ]"
+        ] })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute top-[calc(100%+8px)] left-0 w-72 max-h-[300px] overflow-y-auto bg-black border border-white/30 z-50 p-2 scrollbar-none", children: [
-      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[10px] font-light text-white/50 uppercase tracking-widest border-b border-white/10 mb-1", children: "WebLLM" }),
+    isOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute top-[calc(100%+8px)] left-0 w-72 max-h-[300px] overflow-y-auto bg-black dark:bg-white border border-white/20 dark:border-black/20 z-50 p-2 scrollbar-none", children: [
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[10px] font-light text-current opacity-50 uppercase tracking-widest border-b border-white/10 dark:border-black/10 mb-1", children: "WebLLM" }),
       Object.entries(WEBLLM_MODELS).map(([key, value]) => /* @__PURE__ */ jsxs3(
         "button",
         {
           className: cn(
-            "block w-full text-left px-3 py-2.5 text-xs font-light uppercase tracking-wider truncate transition-colors",
-            currentModel === value ? "bg-white text-black" : "text-white hover:bg-white/10"
+            "block w-full text-left px-3 py-2.5 text-[11px] font-light uppercase tracking-widest truncate transition-colors text-current",
+            currentModel === value ? "bg-white text-black dark:bg-black dark:text-white" : "hover:bg-white/10 dark:hover:bg-black/10"
           ),
           onClick: () => {
             onSelect(value);
@@ -1231,18 +1226,18 @@ function ModelSelector({
           children: [
             key,
             " ",
-            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-2 px-1.5 py-0.5 border border-current text-[9px]", children: "VISION" })
+            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-2 text-[9px] opacity-50", children: "[VISION]" })
           ]
         },
         key
       )),
-      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[10px] font-light text-white/50 uppercase tracking-widest mt-4 border-b border-white/10 mb-1", children: "Transformers.js" }),
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[10px] font-light opacity-50 uppercase tracking-widest mt-4 border-b border-white/10 dark:border-black/10 mb-1", children: "Transformers.js" }),
       Object.entries(TRANSFORMERS_MODELS).map(([key, value]) => /* @__PURE__ */ jsxs3(
         "button",
         {
           className: cn(
-            "block w-full text-left px-3 py-2.5 text-xs font-light uppercase tracking-wider truncate transition-colors",
-            currentModel === value ? "bg-white text-black" : "text-white hover:bg-white/10"
+            "block w-full text-left px-3 py-2.5 text-[11px] font-light uppercase tracking-widest truncate transition-colors text-current",
+            currentModel === value ? "bg-white text-black dark:bg-black dark:text-white" : "hover:bg-white/10 dark:hover:bg-black/10"
           ),
           onClick: () => {
             onSelect(value);
@@ -1251,7 +1246,7 @@ function ModelSelector({
           children: [
             key,
             " ",
-            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-2 px-1.5 py-0.5 border border-current text-[9px]", children: "VISION" })
+            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-2 text-[9px] opacity-50", children: "[VISION]" })
           ]
         },
         key
@@ -1394,66 +1389,75 @@ ${systemPrompt}` : systemPrompt;
       setStreamingText("");
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col bg-black text-white font-mono rounded-none overflow-hidden", className), style: { maxHeight, height: "100%" }, children: [
-    showHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4 bg-black border-b border-white/30", children: [
-      onModelChange ? /* @__PURE__ */ jsx3(
-        ModelSelector,
+  const [localTheme, setLocalTheme] = useState3(theme || "dark");
+  useEffect3(() => {
+    if (theme) setLocalTheme(theme);
+  }, [theme]);
+  const toggleTheme = () => {
+    setLocalTheme((prev) => prev === "dark" ? "light" : "dark");
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn(
+    "flex flex-col font-mono rounded-none overflow-hidden transition-colors duration-300",
+    localTheme === "dark" ? "bg-black text-[#fafafa] dark" : "bg-[#fafafa] text-black",
+    className
+  ), style: { maxHeight, height: "100%" }, children: [
+    showHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-6 bg-transparent border-b border-current/10", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-[11px] font-light tracking-[0.2em] uppercase opacity-70", children: error ? "ERR" : isReady ? "RDY" : isLoading ? "LOD" : "IDL" }),
+        onModelChange ? /* @__PURE__ */ jsx3(
+          ModelSelector,
+          {
+            currentModel: modelId,
+            onSelect: onModelChange
+          }
+        ) : /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs3("span", { className: "text-[11px] font-light uppercase tracking-[0.2em]", children: [
+          "[ ",
+          modelId?.split("/").pop(),
+          " ]"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxs3(
+        "button",
         {
-          currentModel: modelId,
-          onSelect: onModelChange
+          onClick: toggleTheme,
+          className: "text-[11px] tracking-[0.2em] uppercase font-light opacity-50 hover:opacity-100 transition-opacity",
+          children: [
+            "[ ",
+            localTheme === "dark" ? "LIGHT" : "DARK",
+            " ]"
+          ]
         }
-      ) : /* @__PURE__ */ jsxs3("div", { className: "px-3 py-1.5 border border-white/30 flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-xs font-light uppercase tracking-widest text-white", children: modelId?.split("/").pop() }),
-        modelId && isVisionModel2(modelId) && /* @__PURE__ */ jsx3("span", { className: "px-1.5 py-0.5 border border-white/30 text-[9px] font-light uppercase tracking-widest text-white bg-transparent", children: "VISION" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-light tracking-widest text-white uppercase opacity-70", children: error ? "ERR" : isReady ? "RDY" : isLoading ? "LOD" : "IDL" }),
-        /* @__PURE__ */ jsx3("div", { className: cn(
-          "w-2 h-2 rounded-none",
-          error ? "bg-red-500" : isReady ? "bg-white" : "bg-white/30 animate-pulse"
-        ) })
-      ] })
+      ) })
     ] }),
-    showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxs3("div", { className: "px-6 py-4 border-b border-white/30 bg-black", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mb-2 font-mono uppercase tracking-widest text-[10px]", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-white/70 font-light truncate pr-4", children: loadProgress.status }),
-        /* @__PURE__ */ jsxs3("span", { className: "font-light text-white/70", children: [
+    showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxs3("div", { className: "px-6 py-4 border-b border-current/10 bg-transparent", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mb-2 font-mono uppercase tracking-[0.2em] text-[10px]", children: [
+        /* @__PURE__ */ jsx3("span", { className: "opacity-50 font-light truncate pr-4", children: loadProgress.status }),
+        /* @__PURE__ */ jsxs3("span", { className: "font-light opacity-50", children: [
           Math.round(loadProgress.progress),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx3("div", { className: "h-1 w-full bg-white/10 rounded-none overflow-hidden relative", children: /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx3("div", { className: "h-[1px] w-full bg-current/10 rounded-none overflow-hidden relative", children: /* @__PURE__ */ jsx3(
         "div",
         {
-          className: "h-full bg-white transition-all duration-300 ease-out",
+          className: "h-full bg-current transition-all duration-300 ease-out",
           style: { width: `${Math.min(100, loadProgress.progress)}%` }
         }
       ) })
     ] }),
-    error && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between mx-6 mt-6 p-4 border border-red-500/50 bg-red-500/10 rounded-none gap-4", children: [
-      /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-red-500 font-light uppercase tracking-wider", children: error.message }),
-      /* @__PURE__ */ jsxs3(
-        "button",
-        {
-          className: "flex items-center gap-2 px-3 py-1.5 bg-transparent text-red-500 border border-red-500/50 hover:bg-red-500/20 transition-colors rounded-none text-[10px] font-light uppercase tracking-widest",
-          onClick: reload,
-          children: [
-            /* @__PURE__ */ jsx3(RotateCcw, { className: "w-3 h-3" }),
-            " REBOOT"
-          ]
-        }
-      )
+    error && /* @__PURE__ */ jsxs3("div", { className: "mx-6 mt-6 p-4 border border-red-500/30 text-red-500 bg-transparent flex justify-between items-center text-[10px] tracking-[0.2em] uppercase", children: [
+      /* @__PURE__ */ jsx3("span", { className: "font-light", children: error.message }),
+      /* @__PURE__ */ jsx3("button", { onClick: reload, className: "hover:opacity-70 transition-opacity", children: "[ REBOOT ]" })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto p-6 flex flex-col gap-6 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent", children: [
-      !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col items-center justify-center text-center mt-12 mb-8 p-8 border border-white/10", children: [
-        /* @__PURE__ */ jsx3("div", { className: "w-16 h-16 border border-white/30 mb-6 flex items-center justify-center text-xl font-light bg-transparent text-white/50", children: "//" }),
-        /* @__PURE__ */ jsx3("h3", { className: "text-xl font-light uppercase tracking-widest text-white/70 mb-4", children: "SYSTEM READY" }),
-        /* @__PURE__ */ jsx3("p", { className: "text-white/40 max-w-sm uppercase text-[10px] leading-relaxed tracking-widest font-light", children: "[ MARKDOWN | MATH | MERMAID ] INITIALIZED. AWAITING INPUT." })
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto p-6 flex flex-col gap-12 scrollbar-none", children: [
+      !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col items-center justify-center text-center p-8", children: [
+        /* @__PURE__ */ jsx3("h3", { className: "text-sm font-light uppercase tracking-[0.3em] opacity-50 mb-4", children: "SYSTEM READY" }),
+        /* @__PURE__ */ jsx3("p", { className: "opacity-30 max-w-sm uppercase text-[10px] leading-relaxed tracking-[0.2em] font-light", children: "MARKDOWN INTERPRETER ACTIVE. AWAITING INPUT." })
       ] }),
-      messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: "flex flex-col w-full", children: msg.role === "user" ? /* @__PURE__ */ jsxs3("div", { className: "bg-transparent text-white/50 px-4 py-4 border border-white/10 rounded-none w-full", children: [
-        /* @__PURE__ */ jsx3("div", { className: "mb-2 text-[10px] tracking-widest uppercase opacity-50", children: "USER" }),
-        msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-3 mb-4", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "w-24 h-24 object-cover border border-white/30", alt: "attachment" }, img.id)) }),
-        /* @__PURE__ */ jsx3("div", { className: "prose prose-base dark:prose-invert max-w-none font-mono", children: /* @__PURE__ */ jsx3(
+      messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: "flex flex-col w-full", children: msg.role === "user" ? /* @__PURE__ */ jsxs3("div", { className: "bg-transparent text-current py-2 w-full", children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-4 text-[10px] tracking-[0.2em] uppercase opacity-30", children: "USER" }),
+        msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-3 mb-4", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "w-24 h-24 object-cover border border-current/20 grayscale", alt: "attachment" }, img.id)) }),
+        /* @__PURE__ */ jsx3("div", { className: "prose prose-base dark:prose-invert max-w-none font-mono !text-current", children: /* @__PURE__ */ jsx3(
           Streamdown,
           {
             plugins: { code, mermaid, math },
@@ -1466,8 +1470,8 @@ ${systemPrompt}` : systemPrompt;
             children: msg.content
           }
         ) })
-      ] }) : /* @__PURE__ */ jsxs3("div", { className: "prose prose-base dark:prose-invert max-w-none px-4 py-4 w-full min-w-0 font-mono border border-white/10 bg-transparent mt-1", children: [
-        /* @__PURE__ */ jsx3("div", { className: "mb-2 text-[10px] tracking-widest uppercase opacity-50 text-white", children: "SYSTEM" }),
+      ] }) : /* @__PURE__ */ jsxs3("div", { className: "prose prose-base dark:prose-invert max-w-none py-2 w-full min-w-0 font-mono bg-transparent mt-2 !text-current", children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-4 text-[10px] tracking-[0.2em] uppercase opacity-30 text-current", children: "SYSTEM" }),
         /* @__PURE__ */ jsx3(
           Streamdown,
           {
@@ -1482,8 +1486,8 @@ ${systemPrompt}` : systemPrompt;
           }
         )
       ] }) }, i)),
-      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col w-full mt-1", children: /* @__PURE__ */ jsxs3("div", { className: "prose prose-base dark:prose-invert max-w-none px-4 py-4 w-full min-w-0 font-mono border border-white/10 bg-transparent", children: [
-        /* @__PURE__ */ jsx3("div", { className: "mb-2 text-[10px] tracking-widest uppercase opacity-50 text-white", children: "SYSTEM" }),
+      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col w-full mt-2", children: /* @__PURE__ */ jsxs3("div", { className: "prose prose-base dark:prose-invert max-w-none py-2 w-full min-w-0 font-mono bg-transparent !text-current", children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-4 text-[10px] tracking-[0.2em] uppercase opacity-30 text-current animate-pulse", children: "SYSTEM GENERATING" }),
         /* @__PURE__ */ jsx3(
           Streamdown,
           {
@@ -1501,7 +1505,7 @@ ${systemPrompt}` : systemPrompt;
       ] }) }),
       /* @__PURE__ */ jsx3("div", { ref: messagesEndRef, className: "h-4" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "p-4 bg-black border-t border-white/30", children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3("div", { className: "p-6 bg-transparent", children: /* @__PURE__ */ jsx3(
       ChatInput,
       {
         value: input,

package/dist/index.css

@@ -2214,9 +2214,6 @@ video {
 .m-0 {
   margin: 0px;
 }
-.m-1 {
-  margin: 0.25rem;
-}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -2251,9 +2248,6 @@ video {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -2263,15 +2257,9 @@ video {
 .ml-6 {
   margin-left: 1.5rem;
 }
-.mr-2 {
-  margin-right: 0.5rem;
-}
 .mt-1 {
   margin-top: 0.25rem;
 }
-.mt-12 {
-  margin-top: 3rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -2316,21 +2304,12 @@ video {
   width: 100%;
   height: 100%;
 }
-.h-1 {
-  height: 0.25rem;
-}
 .h-16 {
   height: 4rem;
 }
-.h-2 {
-  height: 0.5rem;
-}
 .h-24 {
   height: 6rem;
 }
-.h-3 {
-  height: 0.75rem;
-}
 .h-4 {
   height: 1rem;
 }
@@ -2340,6 +2319,9 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-\[1px\] {
+  height: 1px;
+}
 .h-\[46px\] {
   height: 46px;
 }
@@ -2367,15 +2349,9 @@ video {
 .w-16 {
   width: 4rem;
 }
-.w-2 {
-  width: 0.5rem;
-}
 .w-24 {
   width: 6rem;
 }
-.w-3 {
-  width: 0.75rem;
-}
 .w-4 {
   width: 1rem;
 }
@@ -2477,9 +2453,6 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
-.items-start {
-  align-items: flex-start;
-}
 .items-center {
   align-items: center;
 }
@@ -2495,6 +2468,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-12 {
+  gap: 3rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
@@ -2578,21 +2554,12 @@ video {
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-l-4 {
   border-left-width: 4px;
 }
 .border-r {
   border-right-width: 1px;
 }
-.border-t {
-  border-top-width: 1px;
-}
-.border-dashed {
-  border-style: dashed;
-}
 .border-none {
   border-style: none;
 }
@@ -2602,17 +2569,21 @@ video {
 .border-red-500\/20 {
   border-color: rgb(239 68 68 / 0.2);
 }
-.border-red-500\/50 {
-  border-color: rgb(239 68 68 / 0.5);
+.border-red-500\/30 {
+  border-color: rgb(239 68 68 / 0.3);
 }
 .border-white\/10 {
   border-color: rgb(255 255 255 / 0.1);
 }
+.border-white\/20 {
+  border-color: rgb(255 255 255 / 0.2);
+}
 .border-white\/30 {
   border-color: rgb(255 255 255 / 0.3);
 }
-.border-white\/50 {
-  border-color: rgb(255 255 255 / 0.5);
+.bg-\[\#fafafa\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
 }
 .bg-\[var\(--sdm-tbg\)\] {
   background-color: var(--sdm-tbg);
@@ -2627,8 +2598,8 @@ video {
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
-.bg-black\/90 {
-  background-color: rgb(0 0 0 / 0.9);
+.bg-current {
+  background-color: currentColor;
 }
 .bg-red-100 {
   --tw-bg-opacity: 1;
@@ -2638,10 +2609,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
-}
 .bg-red-500\/10 {
   background-color: rgb(239 68 68 / 0.1);
 }
@@ -2655,15 +2622,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-.bg-white\/10 {
-  background-color: rgb(255 255 255 / 0.1);
-}
-.bg-white\/30 {
-  background-color: rgb(255 255 255 / 0.3);
-}
-.fill-current {
-  fill: currentColor;
-}
 .object-cover {
   -o-object-fit: cover;
   object-fit: cover;
@@ -2692,6 +2650,10 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -2732,6 +2694,10 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2741,9 +2707,6 @@ video {
 .pr-4 {
   padding-right: 1rem;
 }
-.pt-3 {
-  padding-top: 0.75rem;
-}
 .text-left {
   text-align: left;
 }
@@ -2782,6 +2745,15 @@ video {
 .text-\[10px\] {
   font-size: 10px;
 }
+.text-\[11px\] {
+  font-size: 11px;
+}
+.text-\[13px\] {
+  font-size: 13px;
+}
+.text-\[8px\] {
+  font-size: 8px;
+}
 .text-\[9px\] {
   font-size: 9px;
 }
@@ -2826,15 +2798,25 @@ video {
 .leading-relaxed {
   line-height: 1.625;
 }
+.tracking-\[0\.2em\] {
+  letter-spacing: 0.2em;
+}
+.tracking-\[0\.3em\] {
+  letter-spacing: 0.3em;
+}
 .tracking-tight {
   letter-spacing: -0.025em;
 }
-.tracking-wider {
-  letter-spacing: 0.05em;
-}
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.\!text-current {
+  color: currentColor !important;
+}
+.text-\[\#fafafa\] {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+}
 .text-\[var\(--sdm-c\,inherit\)\] {
   color: var(--sdm-c,inherit);
 }
@@ -2842,6 +2824,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
+.text-current {
+  color: currentColor;
+}
 .text-red-400\/80 {
   color: rgb(248 113 113 / 0.8);
 }
@@ -2865,21 +2850,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.text-white\/20 {
-  color: rgb(255 255 255 / 0.2);
-}
-.text-white\/40 {
-  color: rgb(255 255 255 / 0.4);
-}
 .text-white\/50 {
   color: rgb(255 255 255 / 0.5);
 }
 .text-white\/60 {
   color: rgb(255 255 255 / 0.6);
 }
-.text-white\/70 {
-  color: rgb(255 255 255 / 0.7);
-}
 .text-white\/80 {
   color: rgb(255 255 255 / 0.8);
 }
@@ -2889,6 +2865,15 @@ video {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
+.opacity-20 {
+  opacity: 0.2;
+}
+.opacity-30 {
+  opacity: 0.3;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -3021,17 +3006,23 @@ video {
 .placeholder\:uppercase::placeholder {
   text-transform: uppercase;
 }
-.placeholder\:tracking-widest::-moz-placeholder {
-  letter-spacing: 0.1em;
+.placeholder\:tracking-\[0\.2em\]::-moz-placeholder {
+  letter-spacing: 0.2em;
 }
-.placeholder\:tracking-widest::placeholder {
-  letter-spacing: 0.1em;
+.placeholder\:tracking-\[0\.2em\]::placeholder {
+  letter-spacing: 0.2em;
+}
+.placeholder\:text-current::-moz-placeholder {
+  color: currentColor;
+}
+.placeholder\:text-current::placeholder {
+  color: currentColor;
 }
-.placeholder\:text-white\/30::-moz-placeholder {
-  color: rgb(255 255 255 / 0.3);
+.placeholder\:opacity-30::-moz-placeholder {
+  opacity: 0.3;
 }
-.placeholder\:text-white\/30::placeholder {
-  color: rgb(255 255 255 / 0.3);
+.placeholder\:opacity-30::placeholder {
+  opacity: 0.3;
 }
 .before\:mr-4::before {
   content: var(--tw-content);
@@ -3100,12 +3091,6 @@ video {
   --tw-content: var(--streamdown-caret);
   content: var(--tw-content);
 }
-.focus-within\:border-white\/60:focus-within {
-  border-color: rgb(255 255 255 / 0.6);
-}
-.hover\:bg-red-500\/20:hover {
-  background-color: rgb(239 68 68 / 0.2);
-}
 .hover\:bg-red-500\/30:hover {
   background-color: rgb(239 68 68 / 0.3);
 }
@@ -3123,9 +3108,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+.hover\:opacity-70:hover {
+  opacity: 0.7;
 }
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
@@ -3153,21 +3140,34 @@ video {
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   }
 }
-@media (min-width: 640px) {
-  .sm\:flex-row {
-    flex-direction: row;
+@media (prefers-color-scheme: dark) {
+  .dark\:border-black\/10 {
+    border-color: rgb(0 0 0 / 0.1);
   }
-  .sm\:items-center {
-    align-items: center;
+  .dark\:border-black\/20 {
+    border-color: rgb(0 0 0 / 0.2);
   }
-}
-@media (prefers-color-scheme: dark) {
   .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-tbg\)\)\] {
     background-color: var(--shiki-dark-bg,var(--sdm-tbg));
   }
+  .dark\:bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  }
+  .dark\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  }
   .dark\:text-\[var\(--shiki-dark\,var\(--sdm-c\,inherit\)\)\] {
     color: var(--shiki-dark,var(--sdm-c,inherit));
   }
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  }
+  .dark\:hover\:bg-black\/10:hover {
+    background-color: rgb(0 0 0 / 0.1);
+  }
 }
 .\[\&\:not\(\:first-child\)\]\:mt-4:not(:first-child) {
   margin-top: 1rem;

package/dist/index.js

@@ -26,7 +26,7 @@ import {
   useCompletion,
   useLLM,
   useStream
-} from "./chunk-7YC6ECAU.js";
+} from "./chunk-PTPT4EPO.js";
 export {
   Chat,
   ChatInput,

package/dist/react/index.css

@@ -2214,9 +2214,6 @@ video {
 .m-0 {
   margin: 0px;
 }
-.m-1 {
-  margin: 0.25rem;
-}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -2251,9 +2248,6 @@ video {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -2263,15 +2257,9 @@ video {
 .ml-6 {
   margin-left: 1.5rem;
 }
-.mr-2 {
-  margin-right: 0.5rem;
-}
 .mt-1 {
   margin-top: 0.25rem;
 }
-.mt-12 {
-  margin-top: 3rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -2316,21 +2304,12 @@ video {
   width: 100%;
   height: 100%;
 }
-.h-1 {
-  height: 0.25rem;
-}
 .h-16 {
   height: 4rem;
 }
-.h-2 {
-  height: 0.5rem;
-}
 .h-24 {
   height: 6rem;
 }
-.h-3 {
-  height: 0.75rem;
-}
 .h-4 {
   height: 1rem;
 }
@@ -2340,6 +2319,9 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-\[1px\] {
+  height: 1px;
+}
 .h-\[46px\] {
   height: 46px;
 }
@@ -2367,15 +2349,9 @@ video {
 .w-16 {
   width: 4rem;
 }
-.w-2 {
-  width: 0.5rem;
-}
 .w-24 {
   width: 6rem;
 }
-.w-3 {
-  width: 0.75rem;
-}
 .w-4 {
   width: 1rem;
 }
@@ -2477,9 +2453,6 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
-.items-start {
-  align-items: flex-start;
-}
 .items-center {
   align-items: center;
 }
@@ -2495,6 +2468,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-12 {
+  gap: 3rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
@@ -2578,21 +2554,12 @@ video {
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-l-4 {
   border-left-width: 4px;
 }
 .border-r {
   border-right-width: 1px;
 }
-.border-t {
-  border-top-width: 1px;
-}
-.border-dashed {
-  border-style: dashed;
-}
 .border-none {
   border-style: none;
 }
@@ -2602,17 +2569,21 @@ video {
 .border-red-500\/20 {
   border-color: rgb(239 68 68 / 0.2);
 }
-.border-red-500\/50 {
-  border-color: rgb(239 68 68 / 0.5);
+.border-red-500\/30 {
+  border-color: rgb(239 68 68 / 0.3);
 }
 .border-white\/10 {
   border-color: rgb(255 255 255 / 0.1);
 }
+.border-white\/20 {
+  border-color: rgb(255 255 255 / 0.2);
+}
 .border-white\/30 {
   border-color: rgb(255 255 255 / 0.3);
 }
-.border-white\/50 {
-  border-color: rgb(255 255 255 / 0.5);
+.bg-\[\#fafafa\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
 }
 .bg-\[var\(--sdm-tbg\)\] {
   background-color: var(--sdm-tbg);
@@ -2627,8 +2598,8 @@ video {
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
-.bg-black\/90 {
-  background-color: rgb(0 0 0 / 0.9);
+.bg-current {
+  background-color: currentColor;
 }
 .bg-red-100 {
   --tw-bg-opacity: 1;
@@ -2638,10 +2609,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
-}
 .bg-red-500\/10 {
   background-color: rgb(239 68 68 / 0.1);
 }
@@ -2655,15 +2622,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-.bg-white\/10 {
-  background-color: rgb(255 255 255 / 0.1);
-}
-.bg-white\/30 {
-  background-color: rgb(255 255 255 / 0.3);
-}
-.fill-current {
-  fill: currentColor;
-}
 .object-cover {
   -o-object-fit: cover;
   object-fit: cover;
@@ -2692,6 +2650,10 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -2732,6 +2694,10 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2741,9 +2707,6 @@ video {
 .pr-4 {
   padding-right: 1rem;
 }
-.pt-3 {
-  padding-top: 0.75rem;
-}
 .text-left {
   text-align: left;
 }
@@ -2782,6 +2745,15 @@ video {
 .text-\[10px\] {
   font-size: 10px;
 }
+.text-\[11px\] {
+  font-size: 11px;
+}
+.text-\[13px\] {
+  font-size: 13px;
+}
+.text-\[8px\] {
+  font-size: 8px;
+}
 .text-\[9px\] {
   font-size: 9px;
 }
@@ -2826,15 +2798,25 @@ video {
 .leading-relaxed {
   line-height: 1.625;
 }
+.tracking-\[0\.2em\] {
+  letter-spacing: 0.2em;
+}
+.tracking-\[0\.3em\] {
+  letter-spacing: 0.3em;
+}
 .tracking-tight {
   letter-spacing: -0.025em;
 }
-.tracking-wider {
-  letter-spacing: 0.05em;
-}
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.\!text-current {
+  color: currentColor !important;
+}
+.text-\[\#fafafa\] {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+}
 .text-\[var\(--sdm-c\,inherit\)\] {
   color: var(--sdm-c,inherit);
 }
@@ -2842,6 +2824,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
+.text-current {
+  color: currentColor;
+}
 .text-red-400\/80 {
   color: rgb(248 113 113 / 0.8);
 }
@@ -2865,21 +2850,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.text-white\/20 {
-  color: rgb(255 255 255 / 0.2);
-}
-.text-white\/40 {
-  color: rgb(255 255 255 / 0.4);
-}
 .text-white\/50 {
   color: rgb(255 255 255 / 0.5);
 }
 .text-white\/60 {
   color: rgb(255 255 255 / 0.6);
 }
-.text-white\/70 {
-  color: rgb(255 255 255 / 0.7);
-}
 .text-white\/80 {
   color: rgb(255 255 255 / 0.8);
 }
@@ -2889,6 +2865,15 @@ video {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
+.opacity-20 {
+  opacity: 0.2;
+}
+.opacity-30 {
+  opacity: 0.3;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -3021,17 +3006,23 @@ video {
 .placeholder\:uppercase::placeholder {
   text-transform: uppercase;
 }
-.placeholder\:tracking-widest::-moz-placeholder {
-  letter-spacing: 0.1em;
+.placeholder\:tracking-\[0\.2em\]::-moz-placeholder {
+  letter-spacing: 0.2em;
 }
-.placeholder\:tracking-widest::placeholder {
-  letter-spacing: 0.1em;
+.placeholder\:tracking-\[0\.2em\]::placeholder {
+  letter-spacing: 0.2em;
+}
+.placeholder\:text-current::-moz-placeholder {
+  color: currentColor;
+}
+.placeholder\:text-current::placeholder {
+  color: currentColor;
 }
-.placeholder\:text-white\/30::-moz-placeholder {
-  color: rgb(255 255 255 / 0.3);
+.placeholder\:opacity-30::-moz-placeholder {
+  opacity: 0.3;
 }
-.placeholder\:text-white\/30::placeholder {
-  color: rgb(255 255 255 / 0.3);
+.placeholder\:opacity-30::placeholder {
+  opacity: 0.3;
 }
 .before\:mr-4::before {
   content: var(--tw-content);
@@ -3100,12 +3091,6 @@ video {
   --tw-content: var(--streamdown-caret);
   content: var(--tw-content);
 }
-.focus-within\:border-white\/60:focus-within {
-  border-color: rgb(255 255 255 / 0.6);
-}
-.hover\:bg-red-500\/20:hover {
-  background-color: rgb(239 68 68 / 0.2);
-}
 .hover\:bg-red-500\/30:hover {
   background-color: rgb(239 68 68 / 0.3);
 }
@@ -3123,9 +3108,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+.hover\:opacity-70:hover {
+  opacity: 0.7;
 }
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
@@ -3153,21 +3140,34 @@ video {
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   }
 }
-@media (min-width: 640px) {
-  .sm\:flex-row {
-    flex-direction: row;
+@media (prefers-color-scheme: dark) {
+  .dark\:border-black\/10 {
+    border-color: rgb(0 0 0 / 0.1);
   }
-  .sm\:items-center {
-    align-items: center;
+  .dark\:border-black\/20 {
+    border-color: rgb(0 0 0 / 0.2);
   }
-}
-@media (prefers-color-scheme: dark) {
   .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-tbg\)\)\] {
     background-color: var(--shiki-dark-bg,var(--sdm-tbg));
   }
+  .dark\:bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  }
+  .dark\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  }
   .dark\:text-\[var\(--shiki-dark\,var\(--sdm-c\,inherit\)\)\] {
     color: var(--shiki-dark,var(--sdm-c,inherit));
   }
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  }
+  .dark\:hover\:bg-black\/10:hover {
+    background-color: rgb(0 0 0 / 0.1);
+  }
 }
 .\[\&\:not\(\:first-child\)\]\:mt-4:not(:first-child) {
   margin-top: 1rem;

package/dist/react/index.js

@@ -9,7 +9,7 @@ import {
   useCompletion,
   useLLM,
   useStream
-} from "../chunk-7YC6ECAU.js";
+} from "../chunk-PTPT4EPO.js";
 export {
   Chat,
   ChatApp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blank-utils/llm",
-  "version": "0.3.20",
+  "version": "0.4.0",
   "description": "Run LLMs directly in your browser with WebGPU acceleration. Supports React hooks and eager background loading.",
   "type": "module",
   "main": "./dist/index.js",