import{r as o,j as e}from"./vendor-react-96lCPsRK.js";const k=[{label:"Mobile",value:"320",icon:"M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"},{label:"Tablet",value:"768",icon:"M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"},{label:"Desktop",value:"100%",icon:"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"}],f=`
<script>
(function() {
  var origLog = console.log;
  var origError = console.error;
  var origWarn = console.warn;
  function send(level, args) {
    try {
      window.parent.postMessage({ type: 'preview-console', level: level, message: Array.from(args).map(function(a) { return typeof a === 'object' ? JSON.stringify(a) : String(a); }).join(' ') }, '*');
    } catch(e) {}
  }
  console.log = function() { send('log', arguments); origLog.apply(console, arguments); };
  console.error = function() { send('error', arguments); origError.apply(console, arguments); };
  console.warn = function() { send('warn', arguments); origWarn.apply(console, arguments); };
  window.onerror = function(msg, url, line) { send('error', [msg + ' (line ' + line + ')']); };
})();
<\/script>
`,N=`<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; color: #1a1a1a; }
    h1 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Live Preview</h1>
  <p>Paste or write HTML here to preview it live.</p>
</body>
</html>`;function L({initialHtml:t}){const[a,c]=o.useState(t||N),[l,g]=o.useState("100%"),[i,u]=o.useState(!t),[s,x]=o.useState(!1),[m,d]=o.useState([]),[p,v]=o.useState(0),b=o.useRef(null);o.useEffect(()=>{const r=n=>{var h;((h=n.data)==null?void 0:h.type)==="preview-console"&&(d(y=>[...y.slice(-99),{level:n.data.level,message:n.data.message}]),s||x(!0))};return window.addEventListener("message",r),()=>window.removeEventListener("message",r)},[s]),o.useEffect(()=>{t&&(c(t),u(!1))},[t]);const w=o.useCallback(()=>{v(r=>r+1),d([])},[]),j=a.includes("<head>")?a.replace("<head>",`<head>${f}`):f+a;return e.jsxs("div",{className:"h-full flex flex-col bg-background",children:[e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30 flex-shrink-0",children:[e.jsx("div",{className:"flex items-center gap-1 bg-muted/50 rounded-lg p-0.5",children:k.map(r=>e.jsx("button",{onClick:()=>g(r.value),className:`px-2 py-1 rounded-md text-xs transition-colors ${l===r.value?"bg-card text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,title:`${r.label}${r.value!=="100%"?` (${r.value}px)`:""}`,children:e.jsx("svg",{className:"w-3.5 h-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:r.icon})})},r.value))}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{onClick:w,className:"p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors min-w-[36px] min-h-[36px] flex items-center justify-center",title:"Refresh preview",children:e.jsx("svg",{className:"w-3.5 h-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"})})}),e.jsx("button",{onClick:()=>x(!s),className:`p-1.5 rounded-md transition-colors min-w-[36px] min-h-[36px] flex items-center justify-center ${s?"text-foreground bg-muted":"text-muted-foreground hover:text-foreground hover:bg-muted"}`,title:"Toggle console",children:e.jsx("svg",{className:"w-3.5 h-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})}),e.jsx("button",{onClick:()=>u(!i),className:`p-1.5 rounded-md transition-colors min-w-[36px] min-h-[36px] flex items-center justify-center ${i?"text-foreground bg-muted":"text-muted-foreground hover:text-foreground hover:bg-muted"}`,title:"Toggle source editor",children:e.jsx("svg",{className:"w-3.5 h-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"})})})]}),e.jsxs("div",{className:"flex-1 flex flex-col sm:flex-row min-h-0 overflow-hidden",children:[i&&e.jsxs("div",{className:"w-full sm:w-1/2 max-h-[40vh] sm:max-h-none border-b sm:border-b-0 border-r-0 sm:border-r border-border flex flex-col min-h-0",children:[e.jsx("div",{className:"px-3 py-1.5 border-b border-border/50 bg-muted/20 flex-shrink-0",children:e.jsx("span",{className:"text-[10px] font-medium text-muted-foreground uppercase tracking-wider",children:"Source"})}),e.jsx("textarea",{ref:b,value:a,onChange:r=>c(r.target.value),className:"flex-1 w-full resize-none bg-card text-foreground font-mono text-xs p-3 outline-none overflow-auto",spellCheck:!1})]}),e.jsx("div",{className:"flex-1 flex items-start justify-center bg-gray-100 dark:bg-gray-900/50 p-4 overflow-auto min-h-0",children:e.jsx("div",{className:"bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-200 h-full",style:{width:l==="100%"?"100%":`${l}px`,maxWidth:"100%"},children:e.jsx("iframe",{srcDoc:j,sandbox:"allow-scripts",className:"w-full h-full border-0",title:"Preview"},p)})})]}),s&&e.jsxs("div",{className:"border-t border-border max-h-[150px] overflow-y-auto bg-gray-950 flex-shrink-0",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-1 border-b border-gray-800 sticky top-0 bg-gray-950",children:[e.jsx("span",{className:"text-[10px] font-medium text-gray-400 uppercase tracking-wider",children:"Console"}),e.jsx("button",{onClick:()=>d([]),className:"text-[10px] text-gray-500 hover:text-gray-300",children:"Clear"})]}),m.length===0?e.jsx("div",{className:"px-3 py-2 text-xs text-gray-600",children:"No console output"}):e.jsx("div",{className:"divide-y divide-gray-800/30",children:m.map((r,n)=>e.jsxs("div",{className:`px-3 py-1 text-xs font-mono ${r.level==="error"?"text-red-400 bg-red-900/10":r.level==="warn"?"text-yellow-400 bg-yellow-900/10":"text-gray-300"}`,children:[e.jsx("span",{className:"text-[10px] opacity-50 mr-2",children:r.level}),r.message]},n))})]})]})}export{L as default};
