@hanzo/ui 5.3.19 → 5.3.21

package/dist/code/preview.mjs

@@ -1,8 +1,51 @@
-import*as s from'react';import {cva}from'class-variance-authority';import {Check,Copy,Eye,EyeOff,Terminal,RefreshCw,Play,Square,Settings,AlertTriangle,X}from'lucide-react';import {cn}from'@hanzo/ui/lib/utils';import {Badge}from'@hanzo/ui/badge';import {Button}from'@hanzo/ui/button';import {CodeSnippet}from'@hanzo/ui/code/snippet';import {Separator}from'@hanzo/ui/separator';import {Tabs,TabsList,TabsTrigger,TabsContent}from'@hanzo/ui/tabs';import {Toggle}from'@hanzo/ui/toggle';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var W=Object.defineProperty;var u=(l,d)=>W(l,"name",{value:d,configurable:true});var pe=cva("relative overflow-hidden rounded-lg border bg-background",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),ge=u(l=>{let d=l.find(r=>r.type==="html"),n=l.filter(r=>r.type==="css"),f=l.filter(r=>r.type==="js"),c=d?.content||"<div>No HTML file provided</div>";if(n.length>0&&(c=`<style>${n.map(m=>m.content).join(`
-`)}</style>
-${c}`),f.length>0){let r=f.map(m=>m.content).join(`
-`);c=`${c}
-<script>${r}</script>`;}return c},"runHTMLCode"),ue=`
+"use client";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Check, Copy, Eye, EyeOff, Terminal, RefreshCw, Play, Square, Settings, AlertTriangle, X } from 'lucide-react';
+import { cn } from '@hanzo/ui/lib/utils';
+import { Badge } from '@hanzo/ui/badge';
+import { Button } from '@hanzo/ui/button';
+import { CodeSnippet } from '@hanzo/ui/code/snippet';
+import { Separator } from '@hanzo/ui/separator';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hanzo/ui/tabs';
+import { Toggle } from '@hanzo/ui/toggle';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var codePreviewVariants = cva(
+  "relative overflow-hidden rounded-lg border bg-background",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var runHTMLCode = /* @__PURE__ */ __name((files) => {
+  const htmlFile = files.find((f) => f.type === "html");
+  const cssFiles = files.filter((f) => f.type === "css");
+  const jsFiles = files.filter((f) => f.type === "js");
+  let html = htmlFile?.content || "<div>No HTML file provided</div>";
+  if (cssFiles.length > 0) {
+    const cssContent = cssFiles.map((f) => f.content).join("\n");
+    html = `<style>${cssContent}</style>
+${html}`;
+  }
+  if (jsFiles.length > 0) {
+    const jsContent = jsFiles.map((f) => f.content).join("\n");
+    html = `${html}
+<script>${jsContent}</script>`;
+  }
+  return html;
+}, "runHTMLCode");
+var consoleScript = `
 <script>
   const originalConsole = window.console;
   const logs = [];
@@ -39,4 +82,296 @@ ${c}`),f.length>0){let r=f.map(m=>m.content).join(`
     }, '*');
   });
 </script>
-`,fe=s.forwardRef(({className:l,size:d,files:n,defaultFile:f,showPreview:c=true,showConsole:r=true,autoRun:m=false,maxHeight:M="600px",previewHeight:z="300px",consoleHeight:B="150px",allowFullscreen:D=true,customRunner:x,...I},A)=>{let [b,T]=s.useState(f||n[0]?.filename||""),[$,O]=s.useState(""),[P,R]=s.useState(false),[p,v]=s.useState([]),[w,q]=s.useState(c),[y,J]=s.useState(r),[g,k]=s.useState(false),[X$1,S]=s.useState({}),N=s.useRef(null);n.find(e=>e.filename===b)||n[0];s.useEffect(()=>{let e=u(a=>{(a.data?.type==="console"||a.data?.type==="error")&&v(i=>[...i,a.data.data]);},"handleMessage");return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[]);let C=s.useCallback(async()=>{R(true),v([]);try{let e;if(x?e=await x(n):e=ge(n),e=ue+e,O(e),N.current){let a=N.current.contentDocument;a&&(a.open(),a.write(e),a.close());}}catch(e){v([{type:"error",content:e instanceof Error?e.message:String(e),timestamp:Date.now()}]);}finally{R(false);}},[n,x]);s.useEffect(()=>{if(m){let e=setTimeout(C,1e3);return ()=>clearTimeout(e)}},[n,m,C]);let G=s.useCallback(async e=>{let a=n.find(i=>i.filename===e);if(a)try{await navigator.clipboard.writeText(a.content),S(i=>({...i,[e]:!0})),setTimeout(()=>{S(i=>({...i,[e]:!1}));},2e3);}catch(i){console.error("Failed to copy code:",i);}},[n]),K=u(()=>{v([]);},"clearConsole"),Q=u(()=>jsxs("div",{className:"flex flex-col h-full",children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(Terminal,{className:"h-4 w-4"}),jsx("span",{className:"text-sm font-medium",children:"Console"}),p.length>0&&jsx(Badge,{variant:"secondary",className:"text-xs",children:p.length})]}),jsx(Button,{variant:"ghost",size:"sm",onClick:K,className:"h-8 w-8 p-0",children:jsx(X,{className:"h-3.5 w-3.5"})})]}),jsx("div",{className:"flex-1 overflow-auto p-2 space-y-1 font-mono text-xs",children:p.length===0?jsx("div",{className:"text-muted-foreground italic",children:"No output"}):p.map((e,a)=>jsxs("div",{className:cn("flex items-start gap-2 p-2 rounded",e.type==="error"&&"bg-red-500/10 text-red-600 dark:text-red-400",e.type==="log"&&"bg-blue-500/10 text-blue-600 dark:text-blue-400",e.type==="output"&&"bg-green-500/10 text-green-600 dark:text-green-400"),children:[jsx("span",{className:"text-xs text-muted-foreground",children:new Date(e.timestamp).toLocaleTimeString()}),jsx("pre",{className:"flex-1 whitespace-pre-wrap break-words",children:e.content})]},a))})]}),"renderConsole"),U=g?"fixed inset-0 z-50 bg-background":"";return jsxs("div",{ref:A,className:cn(pe({size:d}),U,l),style:{maxHeight:g?"100vh":M},...I,children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2",children:[jsx(Tabs,{value:b,onValueChange:T,className:"flex-1",children:jsx(TabsList,{className:"h-auto p-0 bg-transparent",children:n.map(e=>jsxs(TabsTrigger,{value:e.filename,className:"relative flex items-center gap-2 data-[state=active]:bg-muted",children:[jsx("span",{children:e.filename}),jsx(Badge,{variant:"outline",className:"text-xs",children:e.language}),jsx(Button,{variant:"ghost",size:"sm",onClick:a=>{a.stopPropagation(),G(e.filename);},className:"h-6 w-6 p-0 opacity-0 group-hover:opacity-100",children:X$1[e.filename]?jsx(Check,{className:"h-3 w-3 text-green-500"}):jsx(Copy,{className:"h-3 w-3"})})]},e.filename))})}),jsxs("div",{className:"flex items-center gap-2",children:[jsx(Toggle,{pressed:w,onPressedChange:q,"aria-label":"Toggle preview",size:"sm",children:w?jsx(Eye,{className:"h-4 w-4"}):jsx(EyeOff,{className:"h-4 w-4"})}),jsx(Toggle,{pressed:y,onPressedChange:J,"aria-label":"Toggle console",size:"sm",children:jsx(Terminal,{className:"h-4 w-4"})}),jsxs(Button,{variant:"outline",size:"sm",onClick:C,disabled:P,className:"gap-2",children:[P?jsx(RefreshCw,{className:"h-4 w-4 animate-spin"}):jsx(Play,{className:"h-4 w-4"}),"Run"]}),D&&jsx(Button,{variant:"ghost",size:"sm",onClick:()=>k(!g),className:"h-8 w-8 p-0",children:g?jsx(Square,{className:"h-4 w-4"}):jsx(Settings,{className:"h-4 w-4"})})]})]}),jsxs("div",{className:"flex flex-col h-full",children:[jsx("div",{className:"flex-1 min-h-0",children:jsx(Tabs,{value:b,onValueChange:T,children:n.map(e=>jsx(TabsContent,{value:e.filename,className:"m-0 h-full",children:jsx(CodeSnippet,{code:e.content,language:e.language,showLineNumbers:true,showCopyButton:false,showHeader:false,maxHeight:"100%",className:"border-0 rounded-none"})},e.filename))})}),(w||y)&&jsxs(Fragment,{children:[jsx(Separator,{}),jsxs("div",{className:"flex flex-col lg:flex-row min-h-0",children:[w&&jsxs("div",{className:"flex-1 min-h-0 border-r last:border-r-0",style:{height:z},children:[jsxs("div",{className:"flex items-center gap-2 border-b px-4 py-2 bg-muted/30",children:[jsx(Eye,{className:"h-4 w-4"}),jsx("span",{className:"text-sm font-medium",children:"Preview"}),p.filter(e=>e.type==="error").length>0&&jsx(AlertTriangle,{className:"h-4 w-4 text-red-500"})]}),jsx("iframe",{ref:N,className:"w-full h-full bg-white",sandbox:"allow-scripts allow-same-origin",srcDoc:$})]}),y&&jsx("div",{className:"flex-1 min-h-0",style:{height:B},children:Q()})]})]})]}),g&&jsx("div",{className:"absolute inset-0 bg-black/50",onClick:()=>k(false)})]})});fe.displayName="CodePreview";export{fe as CodePreview,pe as codePreviewVariants};
+`;
+var CodePreview = React.forwardRef(
+  ({
+    className,
+    size,
+    files,
+    defaultFile,
+    showPreview = true,
+    showConsole = true,
+    autoRun = false,
+    maxHeight = "600px",
+    previewHeight = "300px",
+    consoleHeight = "150px",
+    allowFullscreen = true,
+    customRunner,
+    ...props
+  }, ref) => {
+    const [activeFile, setActiveFile] = React.useState(
+      defaultFile || files[0]?.filename || ""
+    );
+    const [previewContent, setPreviewContent] = React.useState("");
+    const [isRunning, setIsRunning] = React.useState(false);
+    const [results, setResults] = React.useState([]);
+    const [isPreviewVisible, setIsPreviewVisible] = React.useState(showPreview);
+    const [isConsoleVisible, setIsConsoleVisible] = React.useState(showConsole);
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const [copied, setCopied] = React.useState({});
+    const iframeRef = React.useRef(null);
+    files.find((f) => f.filename === activeFile) || files[0];
+    React.useEffect(() => {
+      const handleMessage = /* @__PURE__ */ __name((event) => {
+        if (event.data?.type === "console" || event.data?.type === "error") {
+          setResults((prev) => [...prev, event.data.data]);
+        }
+      }, "handleMessage");
+      window.addEventListener("message", handleMessage);
+      return () => window.removeEventListener("message", handleMessage);
+    }, []);
+    const runCode = React.useCallback(async () => {
+      setIsRunning(true);
+      setResults([]);
+      try {
+        let output;
+        if (customRunner) {
+          output = await customRunner(files);
+        } else {
+          output = runHTMLCode(files);
+        }
+        output = consoleScript + output;
+        setPreviewContent(output);
+        if (iframeRef.current) {
+          const doc = iframeRef.current.contentDocument;
+          if (doc) {
+            doc.open();
+            doc.write(output);
+            doc.close();
+          }
+        }
+      } catch (error) {
+        setResults([
+          {
+            type: "error",
+            content: error instanceof Error ? error.message : String(error),
+            timestamp: Date.now()
+          }
+        ]);
+      } finally {
+        setIsRunning(false);
+      }
+    }, [files, customRunner]);
+    React.useEffect(() => {
+      if (autoRun) {
+        const timer = setTimeout(runCode, 1e3);
+        return () => clearTimeout(timer);
+      }
+    }, [files, autoRun, runCode]);
+    const copyFileContent = React.useCallback(
+      async (filename) => {
+        const file = files.find((f) => f.filename === filename);
+        if (!file) return;
+        try {
+          await navigator.clipboard.writeText(file.content);
+          setCopied((prev) => ({ ...prev, [filename]: true }));
+          setTimeout(() => {
+            setCopied((prev) => ({ ...prev, [filename]: false }));
+          }, 2e3);
+        } catch (error) {
+          console.error("Failed to copy code:", error);
+        }
+      },
+      [files]
+    );
+    const clearConsole = /* @__PURE__ */ __name(() => {
+      setResults([]);
+    }, "clearConsole");
+    const renderConsole = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Console" }),
+          results.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: results.length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: clearConsole,
+            className: "h-8 w-8 p-0",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-2 space-y-1 font-mono text-xs", children: results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground italic", children: "No output" }) : results.map((result, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-start gap-2 p-2 rounded",
+            result.type === "error" && "bg-red-500/10 text-red-600 dark:text-red-400",
+            result.type === "log" && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+            result.type === "output" && "bg-green-500/10 text-green-600 dark:text-green-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(result.timestamp).toLocaleTimeString() }),
+            /* @__PURE__ */ jsx("pre", { className: "flex-1 whitespace-pre-wrap break-words", children: result.content })
+          ]
+        },
+        index
+      )) })
+    ] }), "renderConsole");
+    const layout = isFullscreen ? "fixed inset-0 z-50 bg-background" : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(codePreviewVariants({ size }), layout, className),
+        style: { maxHeight: isFullscreen ? "100vh" : maxHeight },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [
+            /* @__PURE__ */ jsx(
+              Tabs,
+              {
+                value: activeFile,
+                onValueChange: setActiveFile,
+                className: "flex-1",
+                children: /* @__PURE__ */ jsx(TabsList, { className: "h-auto p-0 bg-transparent", children: files.map((file) => /* @__PURE__ */ jsxs(
+                  TabsTrigger,
+                  {
+                    value: file.filename,
+                    className: "relative flex items-center gap-2 data-[state=active]:bg-muted",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: file.filename }),
+                      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: file.language }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            copyFileContent(file.filename);
+                          },
+                          className: "h-6 w-6 p-0 opacity-0 group-hover:opacity-100",
+                          children: copied[file.filename] ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
+                  },
+                  file.filename
+                )) })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Toggle,
+                {
+                  pressed: isPreviewVisible,
+                  onPressedChange: setIsPreviewVisible,
+                  "aria-label": "Toggle preview",
+                  size: "sm",
+                  children: isPreviewVisible ? /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Toggle,
+                {
+                  pressed: isConsoleVisible,
+                  onPressedChange: setIsConsoleVisible,
+                  "aria-label": "Toggle console",
+                  size: "sm",
+                  children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: runCode,
+                  disabled: isRunning,
+                  className: "gap-2",
+                  children: [
+                    isRunning ? /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
+                    "Run"
+                  ]
+                }
+              ),
+              allowFullscreen && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setIsFullscreen(!isFullscreen),
+                  className: "h-8 w-8 p-0",
+                  children: isFullscreen ? /* @__PURE__ */ jsx(Square, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(Tabs, { value: activeFile, onValueChange: setActiveFile, children: files.map((file) => /* @__PURE__ */ jsx(
+              TabsContent,
+              {
+                value: file.filename,
+                className: "m-0 h-full",
+                children: /* @__PURE__ */ jsx(
+                  CodeSnippet,
+                  {
+                    code: file.content,
+                    language: file.language,
+                    showLineNumbers: true,
+                    showCopyButton: false,
+                    showHeader: false,
+                    maxHeight: "100%",
+                    className: "border-0 rounded-none"
+                  }
+                )
+              },
+              file.filename
+            )) }) }),
+            (isPreviewVisible || isConsoleVisible) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Separator, {}),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row min-h-0", children: [
+                isPreviewVisible && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex-1 min-h-0 border-r last:border-r-0",
+                    style: { height: previewHeight },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-2 bg-muted/30", children: [
+                        /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Preview" }),
+                        results.filter((r) => r.type === "error").length > 0 && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500" })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "iframe",
+                        {
+                          ref: iframeRef,
+                          className: "w-full h-full bg-white",
+                          sandbox: "allow-scripts allow-same-origin",
+                          srcDoc: previewContent
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isConsoleVisible && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 min-h-0",
+                    style: { height: consoleHeight },
+                    children: renderConsole()
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          isFullscreen && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50",
+              onClick: () => setIsFullscreen(false)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodePreview.displayName = "CodePreview";
+
+export { CodePreview, codePreviewVariants };

package/dist/code/snippet.js

@@ -1,2 +1,274 @@
-'use strict';var t=require('react'),classVarianceAuthority=require('class-variance-authority'),lucideReact=require('lucide-react'),shiki=require('shiki'),utils=require('@hanzo/ui/lib/utils'),badge=require('@hanzo/ui/badge'),button=require('@hanzo/ui/button'),skeleton=require('@hanzo/ui/skeleton'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var t__namespace=/*#__PURE__*/_interopNamespace(t);var U=Object.defineProperty;var b=(l,o)=>U(l,"name",{value:o,configurable:true});var B=classVarianceAuthority.cva("relative group",{variants:{variant:{default:"rounded-lg border bg-muted/50",inline:"inline-block rounded-md bg-muted px-2 py-1",minimal:"bg-transparent"},theme:{dark:"bg-slate-950 border-slate-800",light:"bg-slate-50 border-slate-200",github:"bg-white border-slate-200","github-dark":"bg-slate-900 border-slate-700",terminal:"bg-black border-green-500/30 text-green-400",retro:"bg-amber-50 border-amber-200 text-amber-900"},size:{xs:"text-xs",sm:"text-sm",default:"text-sm",lg:"text-base"}},defaultVariants:{variant:"default",theme:"dark",size:"default"}}),I=t__namespace.forwardRef(({className:l,variant:o,theme:c,size:p,code:i,language:d="text",filename:f,showLineNumbers:w=false,highlightLines:z=[],showCopyButton:v=true,showLanguageBadge:V=true,showHeader:_=true,maxHeight:P,expandable:h=false,collapsedHeight:A="200px",wrapLines:x=false,startLineNumber:D=1,...F},j)=>{let[k,C]=t__namespace.useState(""),[y,H]=t__namespace.useState(false),[q,L]=t__namespace.useState(true),[m,O]=t__namespace.useState(!h),G={dark:"github-dark",light:"github-light",github:"github-light","github-dark":"github-dark",terminal:"github-dark",retro:"github-light"};t__namespace.useEffect(()=>{b(async()=>{L(true);try{let a=Object.keys(shiki.bundledLanguages).includes(d),s=await shiki.codeToHtml(i,{lang:a?d:"text",theme:G[c||"dark"]}),u=document.createElement("div");u.innerHTML=s;let Q=u.querySelector("code");C(Q?.innerHTML||s);}catch(a){console.error("Failed to highlight code:",a);let s=i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");C(s);}finally{L(false);}},"highlightCode")();},[i,d,c]);let T=t__namespace.useCallback(async()=>{try{await navigator.clipboard.writeText(i),H(!0),setTimeout(()=>H(!1),2e3);}catch(n){console.error("Failed to copy code:",n);}},[i]),M=k.split(`
-`).filter((n,a,s)=>n.trim()!==""||a<s.length-1),J=b(()=>jsxRuntime.jsx("code",{className:utils.cn(B({variant:o,theme:c,size:p}),"font-mono",l),dangerouslySetInnerHTML:{__html:k}}),"renderInline"),K=b(()=>jsxRuntime.jsxs("div",{ref:j,className:utils.cn(B({variant:o,theme:c,size:p}),"overflow-hidden",l),...F,children:[_&&(f||d||v||h)&&jsxRuntime.jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[f&&jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5",children:[jsxRuntime.jsx(lucideReact.FileText,{className:"h-3.5 w-3.5 text-muted-foreground"}),jsxRuntime.jsx("span",{className:"text-sm font-medium",children:f})]}),V&&d&&jsxRuntime.jsx(badge.Badge,{variant:"secondary",className:"text-xs",children:d})]}),jsxRuntime.jsxs("div",{className:"flex items-center gap-1",children:[h&&jsxRuntime.jsxs(button.Button,{variant:"ghost",size:"sm",onClick:()=>O(!m),className:"h-8 w-8 p-0",children:[m?jsxRuntime.jsx(lucideReact.Minimize2,{className:"h-3.5 w-3.5"}):jsxRuntime.jsx(lucideReact.Maximize2,{className:"h-3.5 w-3.5"}),jsxRuntime.jsx("span",{className:"sr-only",children:m?"Collapse":"Expand"})]}),v&&jsxRuntime.jsxs(button.Button,{variant:"ghost",size:"sm",onClick:T,className:"h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",children:[y?jsxRuntime.jsx(lucideReact.Check,{className:"h-3.5 w-3.5 text-green-500"}):jsxRuntime.jsx(lucideReact.Copy,{className:"h-3.5 w-3.5"}),jsxRuntime.jsx("span",{className:"sr-only",children:y?"Copied":"Copy code"})]})]})]}),jsxRuntime.jsx("div",{className:utils.cn("overflow-auto",!x&&"overflow-x-auto"),style:{maxHeight:m?P:A},children:q?jsxRuntime.jsx("div",{className:"p-4 space-y-2",children:Array.from({length:Math.min(M.length||5,10)}).map((n,a)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-4",children:[w&&jsxRuntime.jsx(skeleton.Skeleton,{className:"h-4 w-8"}),jsxRuntime.jsx(skeleton.Skeleton,{className:"h-4 flex-1"})]},a))}):jsxRuntime.jsx("div",{className:"font-mono",children:M.map((n,a)=>{let s=a+D,u=z.includes(s);return jsxRuntime.jsxs("div",{className:utils.cn("group relative flex min-h-[1.5rem] items-center px-4 py-0.5",u&&"bg-blue-500/10 border-l-2 border-l-blue-500",!x&&"whitespace-nowrap"),children:[w&&jsxRuntime.jsx("span",{className:"mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground",children:s}),jsxRuntime.jsx("div",{className:utils.cn("flex-1",x?"whitespace-pre-wrap break-words":"overflow-x-auto"),dangerouslySetInnerHTML:{__html:n}})]},a)})})}),h&&!m&&jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none"}),o==="minimal"&&v&&jsxRuntime.jsx(button.Button,{variant:"ghost",size:"sm",onClick:T,className:"absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",children:y?jsxRuntime.jsx(lucideReact.Check,{className:"h-3.5 w-3.5 text-green-500"}):jsxRuntime.jsx(lucideReact.Copy,{className:"h-3.5 w-3.5"})})]}),"renderBlock");return o==="inline"?J():K()});I.displayName="CodeSnippet";var ae=t__namespace.forwardRef(({children:l,language:o,className:c,...p},i)=>jsxRuntime.jsx(I,{ref:i,code:l,language:o,variant:"inline",showCopyButton:false,showLanguageBadge:false,showHeader:false,className:c,...p}));ae.displayName="InlineCode";exports.CodeSnippet=I;exports.InlineCode=ae;exports.codeSnippetVariants=B;
+"use client";
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var shiki = require('shiki');
+var utils = require('@hanzo/ui/lib/utils');
+var badge = require('@hanzo/ui/badge');
+var button = require('@hanzo/ui/button');
+var skeleton = require('@hanzo/ui/skeleton');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var codeSnippetVariants = classVarianceAuthority.cva("relative group", {
+  variants: {
+    variant: {
+      default: "rounded-lg border bg-muted/50",
+      inline: "inline-block rounded-md bg-muted px-2 py-1",
+      minimal: "bg-transparent"
+    },
+    theme: {
+      dark: "bg-slate-950 border-slate-800",
+      light: "bg-slate-50 border-slate-200",
+      github: "bg-white border-slate-200",
+      "github-dark": "bg-slate-900 border-slate-700",
+      terminal: "bg-black border-green-500/30 text-green-400",
+      retro: "bg-amber-50 border-amber-200 text-amber-900"
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    theme: "dark",
+    size: "default"
+  }
+});
+var CodeSnippet = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    theme,
+    size,
+    code,
+    language = "text",
+    filename,
+    showLineNumbers = false,
+    highlightLines = [],
+    showCopyButton = true,
+    showLanguageBadge = true,
+    showHeader = true,
+    maxHeight,
+    expandable = false,
+    collapsedHeight = "200px",
+    wrapLines = false,
+    startLineNumber = 1,
+    ...props
+  }, ref) => {
+    const [highlightedCode, setHighlightedCode] = React__namespace.useState("");
+    const [copied, setCopied] = React__namespace.useState(false);
+    const [isLoading, setIsLoading] = React__namespace.useState(true);
+    const [isExpanded, setIsExpanded] = React__namespace.useState(!expandable);
+    const themeMap = {
+      dark: "github-dark",
+      light: "github-light",
+      github: "github-light",
+      "github-dark": "github-dark",
+      terminal: "github-dark",
+      retro: "github-light"
+    };
+    React__namespace.useEffect(() => {
+      const highlightCode = /* @__PURE__ */ __name(async () => {
+        setIsLoading(true);
+        try {
+          const supportedLang = Object.keys(shiki.bundledLanguages).includes(language);
+          const highlighted = await shiki.codeToHtml(code, {
+            lang: supportedLang ? language : "text",
+            theme: themeMap[theme || "dark"]
+          });
+          const tempDiv = document.createElement("div");
+          tempDiv.innerHTML = highlighted;
+          const codeElement = tempDiv.querySelector("code");
+          setHighlightedCode(codeElement?.innerHTML || highlighted);
+        } catch (error) {
+          console.error("Failed to highlight code:", error);
+          const escaped = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          setHighlightedCode(escaped);
+        } finally {
+          setIsLoading(false);
+        }
+      }, "highlightCode");
+      highlightCode();
+    }, [code, language, theme]);
+    const copyToClipboard = React__namespace.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch (error) {
+        console.error("Failed to copy code:", error);
+      }
+    }, [code]);
+    const lines = highlightedCode.split("\n").filter((line, index, array) => {
+      return line.trim() !== "" || index < array.length - 1;
+    });
+    const renderInline = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        className: utils.cn(
+          codeSnippetVariants({ variant, theme, size }),
+          "font-mono",
+          className
+        ),
+        dangerouslySetInnerHTML: { __html: highlightedCode }
+      }
+    ), "renderInline");
+    const renderBlock = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          codeSnippetVariants({ variant, theme, size }),
+          "overflow-hidden",
+          className
+        ),
+        ...props,
+        children: [
+          showHeader && (filename || language || showCopyButton || expandable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              filename && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: filename })
+              ] }),
+              showLanguageBadge && language && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "secondary", className: "text-xs", children: language })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              expandable && /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setIsExpanded(!isExpanded),
+                  className: "h-8 w-8 p-0",
+                  children: [
+                    isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: isExpanded ? "Collapse" : "Expand" })
+                  ]
+                }
+              ),
+              showCopyButton && /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: copyToClipboard,
+                  className: "h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
+                  children: [
+                    copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: copied ? "Copied" : "Copy code" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn("overflow-auto", !wrapLines && "overflow-x-auto"),
+              style: {
+                maxHeight: isExpanded ? maxHeight : collapsedHeight
+              },
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-2", children: Array.from({ length: Math.min(lines.length || 5, 10) }).map(
+                (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                  showLineNumbers && /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-8" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 flex-1" })
+                ] }, i)
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono", children: lines.map((line, index) => {
+                const lineNumber = index + startLineNumber;
+                const isHighlighted = highlightLines.includes(lineNumber);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: utils.cn(
+                      "group relative flex min-h-[1.5rem] items-center px-4 py-0.5",
+                      isHighlighted && "bg-blue-500/10 border-l-2 border-l-blue-500",
+                      !wrapLines && "whitespace-nowrap"
+                    ),
+                    children: [
+                      showLineNumbers && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground", children: lineNumber }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: utils.cn(
+                            "flex-1",
+                            wrapLines ? "whitespace-pre-wrap break-words" : "overflow-x-auto"
+                          ),
+                          dangerouslySetInnerHTML: { __html: line }
+                        }
+                      )
+                    ]
+                  },
+                  index
+                );
+              }) })
+            }
+          ),
+          expandable && !isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
+          variant === "minimal" && showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: copyToClipboard,
+              className: "absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
+              children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    ), "renderBlock");
+    if (variant === "inline") {
+      return renderInline();
+    }
+    return renderBlock();
+  }
+);
+CodeSnippet.displayName = "CodeSnippet";
+var InlineCode = React__namespace.forwardRef(({ children, language, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CodeSnippet,
+    {
+      ref,
+      code: children,
+      language,
+      variant: "inline",
+      showCopyButton: false,
+      showLanguageBadge: false,
+      showHeader: false,
+      className,
+      ...props
+    }
+  );
+});
+InlineCode.displayName = "InlineCode";
+
+exports.CodeSnippet = CodeSnippet;
+exports.InlineCode = InlineCode;
+exports.codeSnippetVariants = codeSnippetVariants;