@blank-utils/llm 0.3.17 → 0.3.18

package/dist/{chunk-CU46QZJ4.js → chunk-VJDH5U3G.js}

@@ -1006,7 +1006,7 @@ ${newText}` : newText);
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: `relative flex flex-col bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500 transition-all p-3 ${className}`,
+      className: `relative flex flex-col bg-[#fafafa] dark:bg-black border-2 border-black dark:border-white rounded-none focus-within:ring-0 focus-within:border-black dark:focus-within:border-white transition-none p-4 font-mono ${className}`,
       onDragOver: (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -1014,9 +1014,9 @@ ${newText}` : newText);
       onDragLeave: () => setIsDragging(false),
       onDrop: handleDrop,
       children: [
-        isDragging && /* @__PURE__ */ jsxs2("div", { className: "absolute inset-0 bg-white/90 dark:bg-zinc-900/90 flex flex-col items-center justify-center z-20 border-2 border-dashed border-blue-500 rounded-2xl", children: [
-          /* @__PURE__ */ jsx2(ImagePlus, { className: "w-8 h-8 text-blue-500 mb-2" }),
-          /* @__PURE__ */ jsx2("span", { className: "text-blue-500 font-medium tracking-wide", children: "Drop file to attach" })
+        isDragging && /* @__PURE__ */ jsxs2("div", { className: "absolute inset-x-0 inset-y-0 bg-[#fafafa]/90 dark:bg-black/90 flex flex-col items-center justify-center z-20 border-4 border-dashed border-black dark:border-white rounded-none mx-2 my-2", children: [
+          /* @__PURE__ */ jsx2(ImagePlus, { className: "w-10 h-10 text-black dark:text-white mb-4" }),
+          /* @__PURE__ */ jsx2("span", { className: "text-black dark:text-white font-bold tracking-widest uppercase text-lg", children: "Drop file to attach" })
         ] }),
         /* @__PURE__ */ jsx2(
           "input",
@@ -1029,15 +1029,15 @@ ${newText}` : newText);
             onChange: handleFileSelect
           }
         ),
-        images.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2 mb-3 px-2", children: images.map((img) => /* @__PURE__ */ jsxs2("div", { className: "relative w-14 h-14 overflow-hidden border border-zinc-200 dark:border-zinc-700 rounded-xl group select-none", children: [
-          /* @__PURE__ */ jsx2("img", { src: img.dataUrl, alt: "attachment", className: "w-full h-full object-cover transition-transform group-hover:scale-105" }),
+        images.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-3 mb-4 px-2 mt-2", children: images.map((img) => /* @__PURE__ */ jsxs2("div", { className: "relative w-20 h-20 overflow-hidden border-2 border-black dark:border-white 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-1 right-1 w-5 h-5 bg-black/50 hover:bg-black/80 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all backdrop-blur-sm",
+              className: "absolute top-0 right-0 w-6 h-6 bg-black text-white dark:bg-white dark:text-black border-l-2 border-b-2 border-black dark:border-white rounded-none flex items-center justify-center opacity-0 group-hover:opacity-100 transition-none",
               onClick: () => onImageRemove?.(img.id),
-              children: /* @__PURE__ */ jsx2(X, { className: "w-3 h-3" })
+              children: /* @__PURE__ */ jsx2(X, { className: "w-4 h-4" })
             }
           )
         ] }, img.id)) }),
@@ -1052,45 +1052,45 @@ ${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-zinc-900 dark:text-zinc-100 text-[15px] leading-relaxed px-2 m-0 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700"
+            className: "w-full min-h-[24px] max-h-[200px] resize-none border-none outline-none bg-transparent text-black dark:text-white text-base font-mono leading-relaxed px-2 py-1 m-0 placeholder:text-black/30 dark:placeholder:text-white/30 placeholder:uppercase placeholder:tracking-widest scrollbar-thin scrollbar-thumb-black dark:scrollbar-thumb-white scrollbar-track-transparent"
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-end justify-between mt-3 px-1", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-end justify-between mt-6 px-2", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
             modelSelector && /* @__PURE__ */ jsx2("div", { className: "mr-2", children: modelSelector }),
             /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
-                className: "flex items-center justify-center w-8 h-8 rounded-full text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-200/50 dark:hover:bg-zinc-800 transition-colors",
+                className: "flex items-center justify-center w-10 h-10 border-2 border-black dark:border-white rounded-none text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors",
                 onClick: () => fileInputRef.current?.click(),
                 title: "Attach image or PDF (Ctrl+V to paste)",
-                children: /* @__PURE__ */ jsx2(ImagePlus, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx2(ImagePlus, { className: "w-5 h-5" })
               }
             ),
             actions
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: isGenerating ? /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-3", children: isGenerating ? /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: "flex items-center justify-center h-8 px-4 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-300 dark:hover:bg-zinc-700 text-xs font-semibold tracking-wide transition-colors gap-1.5 cursor-pointer shadow-sm",
+              className: "flex items-center justify-center h-10 px-6 rounded-none border-2 border-red-500 bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400 hover:bg-red-500 hover:text-white font-bold uppercase tracking-widest transition-colors gap-2 cursor-pointer shadow-none",
               onClick: onStop,
               children: [
-                /* @__PURE__ */ jsx2(Square, { className: "w-3 h-3 fill-current" }),
-                " Stop"
+                /* @__PURE__ */ jsx2(Square, { className: "w-4 h-4 fill-current" }),
+                " STOP"
               ]
             }
           ) : /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: `flex items-center justify-center h-8 px-4 rounded-full text-xs font-semibold tracking-wide transition-all gap-1.5 ${canSend ? "bg-black dark:bg-white text-white dark:text-black shadow-md hover:scale-[1.02] active:scale-[0.98] cursor-pointer" : "bg-zinc-200 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-600 cursor-not-allowed"}`,
+              className: `flex items-center justify-center h-10 px-6 rounded-none border-2 font-bold uppercase tracking-widest transition-none gap-2 ${canSend ? "border-black dark:border-white bg-black dark:bg-white text-[#fafafa] dark:text-black hover:bg-transparent hover:text-black dark:hover:bg-transparent dark:hover:text-white cursor-pointer" : "border-black/20 dark:border-white/20 bg-transparent text-black/20 dark:text-white/20 cursor-not-allowed"}`,
               onClick: onSend,
               disabled: !canSend,
               children: [
-                "Send ",
-                /* @__PURE__ */ jsx2(Send, { className: "w-3.5 h-3.5" })
+                "SEND ",
+                /* @__PURE__ */ jsx2(Send, { className: "w-4 h-4" })
               ]
             }
           ) })
@@ -1166,20 +1166,20 @@ function isVisionModel2(modelId) {
   return lower.includes("vl") || lower.includes("vision") || lower.includes("moondream");
 }
 var markdownComponents = {
-  h1: ({ children }) => /* @__PURE__ */ jsx3("h1", { className: "text-3xl font-bold tracking-tight mt-6 mb-4 text-zinc-900 dark:text-zinc-100", children }),
-  h2: ({ children }) => /* @__PURE__ */ jsx3("h2", { className: "text-2xl font-semibold tracking-tight mt-6 mb-4 text-zinc-900 dark:text-zinc-100 border-b border-zinc-200 dark:border-zinc-800 pb-2", children }),
-  h3: ({ children }) => /* @__PURE__ */ jsx3("h3", { className: "text-xl font-semibold tracking-tight mt-6 mb-3 text-zinc-900 dark:text-zinc-100", children }),
-  h4: ({ children }) => /* @__PURE__ */ jsx3("h4", { className: "text-lg font-semibold tracking-tight mt-4 mb-2 text-zinc-900 dark:text-zinc-100", children }),
-  p: ({ children }) => /* @__PURE__ */ jsx3("p", { className: "leading-7 [&:not(:first-child)]:mt-4 text-zinc-800 dark:text-zinc-300", children }),
-  ul: ({ children }) => /* @__PURE__ */ jsx3("ul", { className: "my-4 ml-6 list-disc [&>li]:mt-2 text-zinc-800 dark:text-zinc-300", children }),
-  ol: ({ children }) => /* @__PURE__ */ jsx3("ol", { className: "my-4 ml-6 list-decimal [&>li]:mt-2 text-zinc-800 dark:text-zinc-300", children }),
+  h1: ({ children }) => /* @__PURE__ */ jsx3("h1", { className: "text-3xl font-bold uppercase tracking-tight mt-8 mb-4 text-black dark:text-white border-b-2 border-black dark:border-white pb-2", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx3("h2", { className: "text-2xl font-bold uppercase tracking-tight mt-8 mb-4 text-black dark:text-white border-b-2 border-black dark:border-white pb-2", children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx3("h3", { className: "text-xl font-bold uppercase tracking-tight mt-6 mb-3 text-black dark:text-white", children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx3("h4", { className: "text-lg font-bold uppercase tracking-tight mt-4 mb-2 text-black dark:text-white", children }),
+  p: ({ children }) => /* @__PURE__ */ jsx3("p", { className: "leading-relaxed [&:not(:first-child)]:mt-5 text-black dark:text-white text-base font-mono", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx3("ul", { className: "my-5 ml-6 list-square [&>li]:mt-2 text-black dark:text-white font-mono", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx3("ol", { className: "my-5 ml-6 list-decimal [&>li]:mt-2 text-black dark:text-white font-mono", children }),
   li: ({ children }) => /* @__PURE__ */ jsx3("li", { children }),
-  blockquote: ({ children }) => /* @__PURE__ */ jsx3("blockquote", { className: "mt-4 border-l-2 border-zinc-300 dark:border-zinc-700 pl-4 italic text-zinc-600 dark:text-zinc-400", children }),
-  a: ({ href, children }) => /* @__PURE__ */ jsx3("a", { href, className: "font-medium text-blue-600 hover:underline dark:text-blue-400", target: "_blank", rel: "noopener noreferrer", children }),
-  table: ({ children }) => /* @__PURE__ */ jsx3("div", { className: "my-4 w-full overflow-y-auto", children: /* @__PURE__ */ jsx3("table", { className: "w-full text-sm", children }) }),
-  tr: ({ children }) => /* @__PURE__ */ jsx3("tr", { className: "m-0 border-t border-zinc-200 dark:border-zinc-800 p-0 even:bg-zinc-50 dark:even:bg-zinc-900/50", children }),
-  th: ({ children }) => /* @__PURE__ */ jsx3("th", { className: "border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 px-4 py-2 font-semibold text-zinc-900 dark:text-zinc-100 text-left [&[align=center]]:text-center [&[align=right]]:text-right", children }),
-  td: ({ children }) => /* @__PURE__ */ jsx3("td", { className: "border border-zinc-200 dark:border-zinc-700 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right text-zinc-700 dark:text-zinc-300", children })
+  blockquote: ({ children }) => /* @__PURE__ */ jsx3("blockquote", { className: "mt-5 border-l-4 border-black dark:border-white pl-4 italic text-black dark:text-white font-mono", children }),
+  a: ({ href, children }) => /* @__PURE__ */ jsx3("a", { href, className: "font-bold underline text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors", target: "_blank", rel: "noopener noreferrer", children }),
+  table: ({ children }) => /* @__PURE__ */ jsx3("div", { className: "my-5 w-full overflow-y-auto border-2 border-black dark:border-white", children: /* @__PURE__ */ jsx3("table", { className: "w-full text-base font-mono", children }) }),
+  tr: ({ children }) => /* @__PURE__ */ jsx3("tr", { className: "m-0 border-b-2 border-black dark:border-white p-0 even:bg-black/5 dark:even:bg-white/5", children }),
+  th: ({ children }) => /* @__PURE__ */ jsx3("th", { className: "border-r-2 last:border-r-0 border-black dark:border-white bg-black dark:bg-white text-white dark:text-black px-4 py-2 font-bold uppercase text-left", children }),
+  td: ({ children }) => /* @__PURE__ */ jsx3("td", { className: "border-r-2 last:border-r-0 border-black dark:border-white px-4 py-2 text-left text-black dark:text-white", children })
 };
 function ModelSelector({
   currentModel,
@@ -1205,27 +1205,27 @@ function ModelSelector({
     }
     return label;
   }, [currentModel]);
-  return /* @__PURE__ */ jsxs3("div", { className: "relative", ref, children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "relative font-mono", ref, children: [
     /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
-        className: "flex items-center gap-1.5 px-3 py-1.5 bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-medium tracking-wide rounded-full transition-colors",
+        className: "flex items-center gap-2 px-3 py-1.5 border-2 border-black dark:border-white bg-transparent text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black text-xs font-bold uppercase tracking-widest transition-colors",
         onClick: () => setIsOpen(!isOpen),
         children: [
           /* @__PURE__ */ jsx3("span", { children: displayModel }),
-          /* @__PURE__ */ jsx3(ChevronDown, { className: "w-3.5 h-3.5 opacity-70" })
+          /* @__PURE__ */ jsx3(ChevronDown, { className: "w-4 h-4" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute top-[calc(100%+8px)] left-0 w-72 max-h-[300px] overflow-y-auto bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl z-50 py-2 scrollbar-thin", children: [
-      /* @__PURE__ */ jsx3("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider", children: "WebLLM" }),
+    isOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute top-[calc(100%+8px)] left-0 w-72 max-h-[300px] overflow-y-auto bg-[#fafafa] dark:bg-black border-2 border-black dark:border-white z-50 p-2 scrollbar-none", children: [
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[10px] font-bold text-black/50 dark:text-white/50 uppercase tracking-widest border-b-2 border-black/10 dark:border-white/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 text-xs font-medium truncate transition-colors",
-            currentModel === value ? "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400" : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
+            "block w-full text-left px-3 py-2.5 text-xs font-bold uppercase tracking-wider truncate transition-colors",
+            currentModel === value ? "bg-black text-white dark:bg-white dark:text-black" : "text-black dark:text-white hover:bg-black/10 dark:hover:bg-white/10"
           ),
           onClick: () => {
             onSelect(value);
@@ -1234,18 +1234,18 @@ function ModelSelector({
           children: [
             key,
             " ",
-            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[9px] bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700", children: "VISION" })
+            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-2 px-1.5 py-0.5 border border-current text-[9px]", children: "VISION" })
           ]
         },
         key
       )),
-      /* @__PURE__ */ jsx3("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mt-2 border-t border-zinc-100 dark:border-zinc-800 pt-3", children: "Transformers.js" }),
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-[10px] font-bold text-black/50 dark:text-white/50 uppercase tracking-widest mt-4 border-b-2 border-black/10 dark:border-white/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 text-xs font-medium truncate transition-colors",
-            currentModel === value ? "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400" : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
+            "block w-full text-left px-3 py-2.5 text-xs font-bold uppercase tracking-wider truncate transition-colors",
+            currentModel === value ? "bg-black text-white dark:bg-white dark:text-black" : "text-black dark:text-white hover:bg-black/10 dark:hover:bg-white/10"
           ),
           onClick: () => {
             onSelect(value);
@@ -1254,7 +1254,7 @@ function ModelSelector({
           children: [
             key,
             " ",
-            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[9px] bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700", children: "VISION" })
+            isVisionModel2(value) && /* @__PURE__ */ jsx3("span", { className: "ml-2 px-1.5 py-0.5 border border-current text-[9px]", children: "VISION" })
           ]
         },
         key
@@ -1397,65 +1397,65 @@ ${systemPrompt}` : systemPrompt;
       setStreamingText("");
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col bg-white dark:bg-[#09090b] border border-zinc-200 dark:border-zinc-800 rounded-3xl overflow-hidden shadow-sm", className), style: { maxHeight, height: "100%" }, children: [
-    showHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-5 py-4 border-b border-zinc-100 dark:border-zinc-800/60 bg-white/50 dark:bg-zinc-900/20 backdrop-blur-md", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col bg-[#fafafa] dark:bg-black border-2 border-black dark:border-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-5 border-b-2 border-black dark:border-white bg-[#fafafa] dark:bg-black", children: [
       onModelChange ? /* @__PURE__ */ jsx3(
         ModelSelector,
         {
           currentModel: modelId,
           onSelect: onModelChange
         }
-      ) : /* @__PURE__ */ jsxs3("div", { className: "px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-full flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-xs font-semibold tracking-wide text-zinc-700 dark:text-zinc-300", children: modelId?.split("/").pop() }),
-        modelId && isVisionModel2(modelId) && /* @__PURE__ */ jsx3("span", { className: "px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 border border-blue-200 dark:border-blue-800", children: "VISION" })
+      ) : /* @__PURE__ */ jsxs3("div", { className: "px-4 py-1.5 border-2 border-black dark:border-white flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-sm font-bold uppercase tracking-widest text-black dark:text-white", children: modelId?.split("/").pop() }),
+        modelId && isVisionModel2(modelId) && /* @__PURE__ */ jsx3("span", { className: "px-2 py-0.5 border border-black dark:border-white text-[10px] font-bold uppercase tracking-widest text-black dark:text-white bg-transparent", children: "VISION" })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400 capitalize", children: error ? "Error" : isReady ? "Ready" : isLoading ? "Loading" : "Idle" }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-xs font-bold tracking-widest text-black dark:text-white uppercase", children: error ? "ERR" : isReady ? "RDY" : isLoading ? "LOD" : "IDL" }),
         /* @__PURE__ */ jsx3("div", { className: cn(
-          "w-2 h-2 rounded-full",
-          error ? "bg-red-500" : isReady ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" : "bg-zinc-300 dark:bg-zinc-700 animate-pulse"
+          "w-3 h-3 border border-black dark:border-white rounded-none",
+          error ? "bg-red-500" : isReady ? "bg-black dark:bg-white" : "bg-transparent animate-pulse"
         ) })
       ] })
     ] }),
-    showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxs3("div", { className: "px-5 py-3 border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/30", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mb-1.5", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400 truncate pr-4", children: loadProgress.status }),
-        /* @__PURE__ */ jsxs3("span", { className: "text-xs font-bold text-zinc-900 dark:text-zinc-100", children: [
+    showProgress && isLoading && loadProgress && /* @__PURE__ */ jsxs3("div", { className: "px-6 py-4 border-b-2 border-black dark:border-white bg-[#fafafa] dark:bg-black", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mb-2 font-mono uppercase tracking-widest text-xs", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-black dark:text-white font-bold truncate pr-4", children: loadProgress.status }),
+        /* @__PURE__ */ jsxs3("span", { className: "font-bold text-black dark:text-white", children: [
           Math.round(loadProgress.progress),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx3("div", { className: "h-1.5 w-full bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx3("div", { className: "h-4 w-full border-2 border-black dark:border-white bg-transparent rounded-none overflow-hidden relative", children: /* @__PURE__ */ jsx3(
         "div",
         {
-          className: "h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-300 ease-out",
+          className: "h-full bg-black dark:bg-white transition-all duration-300 ease-out",
           style: { width: `${Math.min(100, loadProgress.progress)}%` }
         }
       ) })
     ] }),
-    error && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mx-5 mt-4 p-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/50 rounded-xl", children: [
-      /* @__PURE__ */ jsx3("span", { className: "text-sm text-red-700 dark:text-red-400 font-medium", children: error.message }),
+    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-2 border-red-500 bg-red-50 dark:bg-red-950/20 rounded-none gap-4", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-sm text-red-600 dark:text-red-400 font-bold uppercase tracking-wider", children: error.message }),
       /* @__PURE__ */ jsxs3(
         "button",
         {
-          className: "flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-black border border-red-200 dark:border-red-900 shadow-sm rounded-lg text-xs font-semibold text-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors",
+          className: "flex items-center gap-2 px-4 py-2 bg-red-500 text-white border-2 border-red-500 hover:bg-transparent hover:text-red-600 dark:hover:text-red-400 transition-colors rounded-none text-xs font-bold uppercase tracking-widest",
           onClick: reload,
           children: [
-            /* @__PURE__ */ jsx3(RotateCcw, { className: "w-3.5 h-3.5" }),
-            " Retry"
+            /* @__PURE__ */ jsx3(RotateCcw, { className: "w-4 h-4" }),
+            " REBOOT"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col gap-6 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-800", children: [
-      !isLoading && messages.length === 0 && !error && /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col items-center justify-center text-center opacity-80 mt-12 mb-8 transition-opacity hover:opacity-100", children: [
-        /* @__PURE__ */ jsx3("div", { className: "w-16 h-16 bg-gradient-to-tr from-blue-500 to-cyan-400 rounded-2xl shadow-xl shadow-blue-500/20 mb-6 flex items-center justify-center transform rotate-3", children: /* @__PURE__ */ jsx3("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }),
-        /* @__PURE__ */ jsx3("h3", { className: "text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 mb-2", children: welcomeMessage }),
-        /* @__PURE__ */ jsx3("p", { className: "text-zinc-500 dark:text-zinc-400 max-w-sm", children: "Use Markdown, paste images (Ctrl+V), create Mermaid diagrams, and write math equations safely." })
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto p-6 flex flex-col gap-8 scrollbar-thin scrollbar-thumb-black dark:scrollbar-thumb-white 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-2 border-black dark:border-white", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-20 h-20 border-4 border-black dark:border-white mb-6 flex items-center justify-center text-3xl font-black bg-black text-white dark:bg-white dark:text-black", children: "//" }),
+        /* @__PURE__ */ jsx3("h3", { className: "text-3xl font-black uppercase tracking-widest text-black dark:text-white mb-4", children: "SYSTEM READY" }),
+        /* @__PURE__ */ jsx3("p", { className: "text-black/70 dark:text-white/70 max-w-sm uppercase text-sm leading-relaxed tracking-wider font-bold", children: "[ MARKDOWN | MATH | MERMAID ] INITIALIZED. AWAITING INPUT." })
       ] }),
-      messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: cn("flex flex-col max-w-[85%]", msg.role === "user" ? "self-end" : "self-start w-full"), children: msg.role === "user" ? /* @__PURE__ */ jsxs3("div", { className: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-5 py-3.5 rounded-[24px] rounded-br-[8px] sm:px-6 shadow-sm border border-zinc-200 dark:border-zinc-700/50", children: [
-        msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2 mb-3 mt-1", children: msg.images.map((img) => /* @__PURE__ */ jsx3("img", { src: img.dataUrl, className: "w-24 h-24 object-cover rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm", alt: "attachment" }, img.id)) }),
-        /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx3(
+      messages.map((msg, i) => /* @__PURE__ */ jsx3("div", { className: cn("flex flex-col max-w-[90%]", msg.role === "user" ? "self-end" : "self-start w-full"), children: msg.role === "user" ? /* @__PURE__ */ jsxs3("div", { className: "bg-black text-[#fafafa] dark:bg-white dark:text-black px-6 py-5 border-2 border-black dark:border-white rounded-none", children: [
+        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-32 h-32 object-cover border-2 border-current shadow-none", alt: "attachment" }, img.id)) }),
+        /* @__PURE__ */ jsx3("div", { className: "prose prose-base dark:prose-invert max-w-none font-mono", children: /* @__PURE__ */ jsx3(
           Streamdown,
           {
             plugins: { code, mermaid, math },
@@ -1468,7 +1468,7 @@ ${systemPrompt}` : systemPrompt;
             children: msg.content
           }
         ) })
-      ] }) : /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(
+      ] }) : /* @__PURE__ */ jsx3("div", { className: "prose prose-base dark:prose-invert max-w-none p-6 w-full min-w-0 font-mono border-2 border-black dark:border-white bg-[#fafafa] dark:bg-black", children: /* @__PURE__ */ jsx3(
         Streamdown,
         {
           plugins: { code, mermaid, math },
@@ -1481,7 +1481,7 @@ ${systemPrompt}` : systemPrompt;
           children: msg.content
         }
       ) }) }, i)),
-      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col self-start w-full max-w-[85%]", children: /* @__PURE__ */ jsx3("div", { className: "prose prose-sm dark:prose-invert max-w-none px-2 w-full min-w-0", children: /* @__PURE__ */ jsx3(
+      streamingText && /* @__PURE__ */ jsx3("div", { className: "flex flex-col self-start w-full max-w-[90%]", children: /* @__PURE__ */ jsx3("div", { className: "prose prose-base dark:prose-invert max-w-none p-6 w-full min-w-0 font-mono border-2 border-black dark:border-white bg-[#fafafa] dark:bg-black", children: /* @__PURE__ */ jsx3(
         Streamdown,
         {
           plugins: { code, mermaid, math },
@@ -1497,7 +1497,7 @@ ${systemPrompt}` : systemPrompt;
       ) }) }),
       /* @__PURE__ */ jsx3("div", { ref: messagesEndRef, className: "h-4" })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "p-4 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-t border-zinc-100 dark:border-zinc-800/80", children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3("div", { className: "p-6 bg-[#fafafa] dark:bg-black border-t-2 border-black dark:border-white", children: /* @__PURE__ */ jsx3(
       ChatInput,
       {
         value: input,