peekr-ui 0.1.0

package/app-dist/assets/index-1MZtsq3m.js

@@ -0,0 +1,10 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Ch1Vufae.js","assets/router-DSqugVLU.js"])))=>i.map(i=>d[i]);
+var he=Object.defineProperty;var me=(t,r,s)=>r in t?he(t,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[r]=s;var Z=(t,r,s)=>me(t,typeof r!="symbol"?r+"":r,s);import{r as o,a as pe,u as ge,b as be,R as ne,H as ve}from"./router-DSqugVLU.js";(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))a(i);new MutationObserver(i=>{for(const l of i)if(l.type==="childList")for(const c of l.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&a(c)}).observe(document,{childList:!0,subtree:!0});function s(i){const l={};return i.integrity&&(l.integrity=i.integrity),i.referrerPolicy&&(l.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?l.credentials="include":i.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function a(i){if(i.ep)return;i.ep=!0;const l=s(i);fetch(i.href,l)}})();var oe={exports:{}},H={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ye=o,ke=Symbol.for("react.element"),je=Symbol.for("react.fragment"),we=Object.prototype.hasOwnProperty,Ne=ye.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Ce={key:!0,ref:!0,__self:!0,__source:!0};function le(t,r,s){var a,i={},l=null,c=null;s!==void 0&&(l=""+s),r.key!==void 0&&(l=""+r.key),r.ref!==void 0&&(c=r.ref);for(a in r)we.call(r,a)&&!Ce.hasOwnProperty(a)&&(i[a]=r[a]);if(t&&t.defaultProps)for(a in r=t.defaultProps,r)i[a]===void 0&&(i[a]=r[a]);return{$$typeof:ke,type:t,key:l,ref:c,props:i,_owner:Ne.current}}H.Fragment=je;H.jsx=le;H.jsxs=le;oe.exports=H;var e=oe.exports,ie,Q=pe;ie=Q.createRoot,Q.hydrateRoot;const ee=new Map;let W=null;async function Ee(){return W||(W=fetch("/__peek/components").then(t=>{if(!t.ok)throw new Error(`Failed to fetch components: ${t.status}`);return t.json()}).catch(t=>{throw W=null,t}),W)}function Se(){W=null}async function Re(t,r){const s=`${t}::${r}`,a=ee.get(s);if(a)return a.promise;const i=fetch(`/__peek/types?file=${encodeURIComponent(t)}&export=${encodeURIComponent(r)}`).then(l=>{if(!l.ok)throw new Error(`Failed to fetch types: ${l.status}`);return l.json()}).catch(()=>[]);return ee.set(s,{promise:i,ts:Date.now()}),i}function Pe(){const[t,r]=o.useState([]),[s,a]=o.useState(!0),[i,l]=o.useState(null),c=o.useCallback(async(u=!1)=>{u&&Se(),a(!0),l(null);try{const d=await Ee();r(d)}catch(d){l(d.message??"Failed to load components")}finally{a(!1)}},[]);return o.useEffect(()=>{c()},[c]),{components:t,loading:s,error:i,refresh:()=>c(!0)}}function _e(t,r){const[s,a]=o.useState([]),[i,l]=o.useState(!1),[c,u]=o.useState(null),d=o.useRef(0);return o.useEffect(()=>{if(!t||!r){a([]),l(!1),u(null);return}const n=++d.current;l(!0),u(null),Re(t,r).then(m=>{d.current===n&&(a(m),u(null))}).catch(m=>{d.current===n&&(u(m.message??"Failed to parse prop types"),a([]))}).finally(()=>{d.current===n&&l(!1)})},[t,r]),{props:s,loading:i,error:c}}function Le(t){const r=new Map;for(const s of t){const a=s.folder||".",i=r.get(a)??[];i.push(s),r.set(a,i)}return r}function ce(t,r,s){return`/__peek/frame?${new URLSearchParams({file:t,export:r,theme:s}).toString()}`}function te(t,r){const s={};for(const a of t)if(r.has(a.name)){const i=r.get(a.name);s[a.name]=de(i,a.type)}else a.defaultValue!==void 0?s[a.name]=a.defaultValue:s[a.name]=De(a.type,a.options);return s}function De(t,r){switch(t){case"boolean":return!1;case"number":return 0;case"string":return"";case"select":return(r==null?void 0:r[0])??"";case"node":return"";case"color":return"#6366f1";case"function":return;default:return}}function de(t,r){switch(r){case"boolean":return t==="true";case"number":return isNaN(Number(t))?0:Number(t);default:return t}}function w(...t){return t.filter(Boolean).join(" ")}function Te(){const t=ge(),r=be(),s=o.useCallback(()=>{const l=r.pathname==="/"||r.pathname===""?null:r.pathname.slice(1),c=new URLSearchParams(r.search),u=c.get("export")??"default",d={};return c.forEach((n,m)=>{m!=="export"&&(d[m]=n)}),{filePath:l,exportName:u,props:d}},[r]),a=o.useCallback((l,c,u,d)=>{const n=new URLSearchParams;n.set("export",c);for(const[m,x]of Object.entries(u))x!=null&&typeof x!="function"&&n.set(m,String(x));t(`/${l}?${n.toString()}`,{replace:!0})},[t]),i=o.useCallback((l,c)=>{const u={};for(const d of c)l.has(d.name)&&(u[d.name]=de(l.get(d.name),d.type));return u},[]);return{parseUrl:s,updateUrl:a,hydrateProps:i}}function Ue({searchQuery:t,onSearch:r,theme:s,onToggleTheme:a,shareUrl:i}){const[l,c]=o.useState(!1),u=o.useCallback(async()=>{const d=i??window.location.href;try{await navigator.clipboard.writeText(d),c(!0),setTimeout(()=>c(!1),2e3)}catch{const n=document.createElement("textarea");n.value=d,document.body.appendChild(n),n.select(),document.execCommand("copy"),document.body.removeChild(n),c(!0),setTimeout(()=>c(!1),2e3)}},[i]);return e.jsxs("header",{className:"flex items-center gap-3 px-4 h-11 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center gap-2 shrink-0 select-none",children:[e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 32 32",fill:"none","aria-hidden":!0,children:[e.jsx("rect",{width:"32",height:"32",rx:"6",fill:"#6366f1"}),e.jsx("circle",{cx:"16",cy:"16",r:"4",fill:"white"}),e.jsx("path",{d:"M8 16c0-4.418 3.582-8 8-8s8 3.582 8 8",stroke:"white",strokeWidth:"2",strokeLinecap:"round",fill:"none"})]}),e.jsx("span",{className:"font-semibold text-sm",style:{color:"var(--text-primary)"},children:"peekr"})]}),e.jsxs("div",{className:"flex-1 max-w-xs relative",children:[e.jsxs("svg",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none",width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"m21 21-4.35-4.35"})]}),e.jsx("input",{type:"text",placeholder:"Search components...",value:t,onChange:d=>r(d.target.value),className:"peek-input pl-8 h-7 text-xs",style:{maxWidth:"100%"},"aria-label":"Search components"}),t&&e.jsx("button",{onClick:()=>r(""),className:"absolute right-2 top-1/2 -translate-y-1/2 text-xs",style:{color:"var(--text-tertiary)"},"aria-label":"Clear search",children:"✕"})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("button",{onClick:a,title:s==="dark"?"Switch to light mode":"Switch to dark mode",className:w("w-7 h-7 rounded-md flex items-center justify-center transition-colors text-base","hover:bg-gray-100 dark:hover:bg-gray-800"),"aria-label":"Toggle theme",children:s==="dark"?"☀️":"🌙"}),e.jsx("button",{onClick:u,title:"Copy shareable URL",className:w("flex items-center gap-1.5 px-2.5 h-7 rounded-md text-xs font-medium transition-colors",l?"bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300":"bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900"),"aria-label":"Copy shareable URL",children:l?e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"M20 6 9 17l-5-5"})}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e.jsx("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]}),"Share"]})})]})]})}function Me({components:t,selectedId:r,searchQuery:s,onSelect:a,collapsed:i,onToggleCollapse:l}){const[c,u]=o.useState(new Set(["all"])),d=o.useMemo(()=>{if(!s.trim())return t;const x=s.toLowerCase();return t.filter(p=>p.name.toLowerCase().includes(x)||p.filePath.toLowerCase().includes(x)||p.folder.toLowerCase().includes(x))},[t,s]),n=o.useMemo(()=>Le(d),[d]),m=x=>{u(p=>{const f=new Set(p);return f.has(x)?f.delete(x):f.add(x),f})};return o.useMemo(()=>{u(x=>{const p=new Set(x);for(const[f,g]of n)(g.some(j=>j.id===r)||s)&&p.add(f);return p})},[r,s,n]),i?e.jsx("div",{className:"flex flex-col items-center py-2 border-r shrink-0",style:{width:40,borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("button",{onClick:l,title:"Expand sidebar",className:"w-7 h-7 rounded-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors mt-1","aria-label":"Expand sidebar",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})})})}):e.jsxs("aside",{className:"flex flex-col border-r shrink-0 overflow-hidden",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center justify-between px-3 h-9 border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsxs("span",{className:"text-xs font-medium uppercase tracking-wider",style:{color:"var(--text-tertiary)"},children:["Components (",d.length,")"]}),e.jsx("button",{onClick:l,title:"Collapse sidebar",className:"w-5 h-5 rounded flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors","aria-label":"Collapse sidebar",children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m15 18-6-6 6-6"})})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto py-1",children:[d.length===0&&e.jsxs("div",{className:"px-3 py-4 text-center",children:[e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:s?"No components match your search.":"No components detected."}),!s&&e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"Make sure your .tsx/.jsx files export React components."})]}),Array.from(n.entries()).map(([x,p])=>e.jsx(Fe,{folder:x,components:p,selectedId:r,isExpanded:c.has(x),onToggle:()=>m(x),onSelect:a},x))]})]})}function Fe({folder:t,components:r,selectedId:s,isExpanded:a,onToggle:i,onSelect:l}){const c=t==="."?"(root)":t;return e.jsxs("div",{children:[e.jsxs("button",{onClick:i,className:"w-full flex items-center gap-1.5 px-3 py-1 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:w("transition-transform shrink-0",a?"rotate-90":""),style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})}),e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"currentColor",className:"shrink-0",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"M20 7H4C2.9 7 2 7.9 2 9v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM4 5h7l2 2h7c1.1 0 2 .9 2 2H4V5z"})}),e.jsx("span",{className:"text-xs truncate",style:{color:"var(--text-secondary)"},title:c,children:c}),e.jsx("span",{className:"ml-auto text-xs shrink-0",style:{color:"var(--text-tertiary)"},children:r.length})]}),a&&e.jsx("div",{children:r.map(u=>e.jsx(Oe,{component:u,isSelected:u.id===s,onSelect:()=>l(u)},u.id))})]})}function Oe({component:t,isSelected:r,onSelect:s}){return e.jsxs("button",{onClick:s,className:w("w-full flex items-center gap-2 pl-8 pr-3 py-1.5 text-left transition-colors text-xs group",r?"bg-indigo-50 dark:bg-indigo-950/50":"hover:bg-gray-50 dark:hover:bg-gray-800/50"),title:t.filePath,"aria-current":r?"page":void 0,children:[e.jsx("span",{className:w("w-4 h-4 rounded flex items-center justify-center shrink-0 text-[9px] font-bold",r?"bg-indigo-500 text-white":"bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400"),"aria-hidden":!0,children:t.name[0]}),e.jsx("span",{className:w("truncate flex-1",r?"text-indigo-700 dark:text-indigo-300 font-medium":"text-gray-700 dark:text-gray-300"),children:t.name}),!t.isDefault&&e.jsx("span",{className:"text-[10px] shrink-0 px-1 rounded",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},title:`Named export: ${t.exportName}`,children:t.exportName})]})}const J={mobile:375,tablet:768,desktop:1280,custom:0},We=[{key:"mobile",icon:"📱",label:"Mobile (375px)"},{key:"tablet",icon:"💻",label:"Tablet (768px)"},{key:"desktop",icon:"🖥",label:"Desktop (1280px)"}];function $e({viewport:t,customWidth:r,onViewportChange:s,theme:a,onThemeChange:i,isDiffMode:l,onToggleDiff:c,selectedComponent:u}){const[d,n]=o.useState(!1),[m,x]=o.useState(""),p=t==="custom"?r:J[t];return e.jsxs("div",{className:"flex items-center gap-2 px-3 h-10 border-b shrink-0 flex-wrap",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:We.map(({key:f,icon:g,label:j})=>e.jsx("button",{onClick:()=>s(f),title:j,className:w("px-2 h-6 rounded text-xs transition-colors flex items-center gap-1",t===f?"bg-white dark:bg-gray-700 shadow-sm text-indigo-600 dark:text-indigo-400 font-medium":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:e.jsx("span",{className:"text-sm leading-none",children:g})},f))}),e.jsx("div",{className:"flex items-center gap-1 px-2 h-6 rounded-md cursor-pointer select-none",style:{background:"var(--surface-overlay)",color:"var(--text-secondary)",fontSize:11,minWidth:64},title:"Click to set custom width",onClick:()=>{n(!0),x(String(p))},children:d?e.jsx("input",{autoFocus:!0,type:"number",value:m,onChange:f=>x(f.target.value),onBlur:()=>{const f=parseInt(m,10);!isNaN(f)&&f>0&&s("custom",f),n(!1)},onKeyDown:f=>{if(f.key==="Enter"){const g=parseInt(m,10);!isNaN(g)&&g>0&&s("custom",g),n(!1)}f.key==="Escape"&&n(!1)},className:"w-16 bg-transparent border-none outline-none text-xs",style:{color:"var(--text-primary)"},onClick:f=>f.stopPropagation()}):e.jsxs("span",{className:"font-mono",children:[p,"px"]})}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:["light","dark"].map(f=>e.jsx("button",{onClick:()=>i(f),className:w("px-2.5 h-6 rounded text-xs capitalize transition-colors",a===f?"bg-white dark:bg-gray-700 shadow-sm font-medium text-indigo-600 dark:text-indigo-400":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:f},f))}),e.jsx("div",{className:"flex-1"}),u&&e.jsxs("button",{onClick:c,className:w("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",l?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"),title:l?"Exit compare mode":"Compare two variants",children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("rect",{x:"3",y:"3",width:"7",height:"18",rx:"1"}),e.jsx("rect",{x:"14",y:"3",width:"7",height:"18",rx:"1"})]}),l?"Exit Compare":"Compare"]})]})}function Ie({filePath:t,exportName:r,props:s,theme:a,viewport:i,customWidth:l}){const c=o.useRef(null),[u,d]=o.useState("idle"),[n,m]=o.useState(null),x=o.useRef(null),p=i==="custom"?l:J[i],f=t&&r?ce(t,r,a):null;o.useEffect(()=>{const _=y=>{if(c.current&&y.source!==c.current.contentWindow)return;const b=y.data;b.type==="FRAME_READY"&&(d("loading"),g({type:"UPDATE_PROPS",props:s}),g({type:"SET_THEME",theme:a})),b.type==="RENDER_SUCCESS"&&(d("ready"),m(null)),b.type==="RENDER_ERROR"&&(d("error"),m({message:b.message,stack:b.stack}))};return window.addEventListener("message",_),()=>window.removeEventListener("message",_)},[s,a]);const g=o.useCallback(_=>{var y,b;(b=(y=c.current)==null?void 0:y.contentWindow)==null||b.postMessage(_,"*")},[]),j=o.useRef(s),P=o.useRef(a);return o.useEffect(()=>{u!=="ready"&&u!=="loading"||j.current!==s&&(j.current=s,g({type:"UPDATE_PROPS",props:s}))},[s,u,g]),o.useEffect(()=>{u!=="ready"&&u!=="loading"||P.current!==a&&(P.current=a,g({type:"SET_THEME",theme:a}))},[a,u,g]),o.useEffect(()=>{f!==x.current&&(x.current=f,d(f?"loading":"idle"),m(null))},[f]),f?e.jsxs("div",{className:"flex-1 relative overflow-hidden flex items-start justify-center p-6",style:{background:"var(--surface-raised)"},children:[u==="loading"&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10 pointer-events-none",children:e.jsx("div",{className:"w-5 h-5 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin opacity-70"})}),u==="error"&&n&&e.jsx("div",{className:"absolute inset-0 flex items-start justify-center pt-8 z-20 px-6 pointer-events-none",children:e.jsxs("div",{className:"w-full max-w-lg rounded-xl border p-5 shadow-lg pointer-events-auto",style:{background:"var(--surface)",borderColor:"#fca5a5"},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx("span",{className:"text-red-500 text-lg",children:"⚠"}),e.jsx("span",{className:"text-sm font-semibold text-red-600 dark:text-red-400",children:"Component Error"})]}),e.jsx("pre",{className:"text-xs overflow-auto whitespace-pre-wrap break-words rounded p-3",style:{background:"#fef2f2",color:"#dc2626",maxHeight:200,fontFamily:"ui-monospace, monospace"},children:n.message}),n.stack&&e.jsxs("details",{className:"mt-2",children:[e.jsx("summary",{className:"text-xs cursor-pointer",style:{color:"var(--text-tertiary)"},children:"Stack trace"}),e.jsx("pre",{className:"text-xs mt-1 overflow-auto rounded p-2",style:{background:"var(--surface-raised)",color:"var(--text-secondary)",maxHeight:150,fontFamily:"ui-monospace, monospace"},children:n.stack})]})]})}),e.jsxs("div",{className:w("relative transition-all duration-200 shadow-md rounded-lg overflow-hidden",u==="loading"?"opacity-50":"opacity-100"),style:{width:p,maxWidth:"100%",minHeight:200,background:a==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[e.jsxs("div",{className:"absolute top-0 right-0 px-2 py-0.5 text-[10px] rounded-bl-md z-10 font-mono select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:[p,"px"]}),e.jsx("iframe",{ref:c,src:f,title:"Component preview",className:"w-full border-none",style:{height:Math.max(300,600),display:"block",colorScheme:a},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})]}):e.jsx("div",{className:"flex-1 flex items-center justify-center animate-fade-in",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"text-5xl mb-4 opacity-30 select-none",children:"⚡"}),e.jsx("p",{className:"text-sm font-medium",style:{color:"var(--text-secondary)"},children:"Select a component from the sidebar"}),e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"peekr auto-detects your React components"})]})})}function ue({props:t,values:r,onChange:s,loading:a,componentName:i}){return i?a?e.jsxs("div",{className:"flex items-center justify-center h-full gap-2",children:[e.jsx("div",{className:"w-4 h-4 border border-indigo-400 border-t-transparent rounded-full animate-spin"}),e.jsx("span",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Parsing props..."})]}):t.length===0?e.jsxs("div",{className:"flex flex-col items-center justify-center h-full gap-2 px-4 text-center",children:[e.jsx("p",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:"No props detected"}),e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Add TypeScript prop types to see controls here."})]}):e.jsx("div",{className:"overflow-y-auto h-full",children:e.jsxs("table",{className:"w-full border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b",style:{borderColor:"var(--border)"},children:[e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)",width:"35%"},children:"Prop"}),e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)"},children:"Control"})]})}),e.jsx("tbody",{children:t.map(l=>e.jsx(Ae,{prop:l,value:r[l.name],onChange:c=>s(l.name,c)},l.name))})]})}):e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Select a component to see its props"})})}function Ae({prop:t,value:r,onChange:s}){return e.jsxs("tr",{className:"border-b hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors group",style:{borderColor:"var(--border)"},children:[e.jsxs("td",{className:"px-3 py-2 align-middle",style:{width:"35%"},children:[e.jsx("div",{className:"flex items-center gap-1.5",children:e.jsxs("span",{className:"text-xs font-medium font-mono truncate",style:{color:"var(--text-primary)"},title:t.description??t.name,children:[t.name,t.required&&e.jsx("span",{className:"text-red-400 ml-0.5",title:"Required",children:"*"})]})}),e.jsx("div",{className:"flex items-center gap-1 mt-0.5",children:e.jsx(Be,{type:t.type})}),t.description&&e.jsx("p",{className:"text-[10px] mt-0.5 leading-relaxed",style:{color:"var(--text-tertiary)"},children:t.description})]}),e.jsx("td",{className:"px-3 py-2 align-middle",children:e.jsx(ze,{prop:t,value:r,onChange:s})})]})}function Be({type:t}){const r={string:"bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400",number:"bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400",boolean:"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400",select:"bg-purple-50 text-purple-600 dark:bg-purple-950 dark:text-purple-400",function:"bg-orange-50 text-orange-600 dark:bg-orange-950 dark:text-orange-400",node:"bg-pink-50 text-pink-600 dark:bg-pink-950 dark:text-pink-400",color:"bg-teal-50 text-teal-600 dark:bg-teal-950 dark:text-teal-400",unknown:"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"};return e.jsx("span",{className:w("px-1.5 py-0.5 rounded text-[10px] font-mono",r[t]??r.unknown),children:t})}function ze({prop:t,value:r,onChange:s}){switch(t.type){case"boolean":return e.jsx(Ve,{value:r,onChange:s});case"number":return e.jsx(He,{value:r,onChange:s});case"select":return e.jsx(qe,{options:t.options??[],value:r,onChange:s});case"function":return e.jsx(Ye,{name:t.name,onChange:s});case"node":return e.jsx(Ke,{value:r,onChange:s});case"color":return e.jsx(Ge,{value:r,onChange:s});case"string":default:return e.jsx(xe,{value:r,onChange:s})}}function xe({value:t,onChange:r}){return e.jsx("input",{type:"text",className:"peek-input",value:t??"",onChange:s=>r(s.target.value),placeholder:"string value"})}function He({value:t,onChange:r}){return e.jsx("input",{type:"number",className:"peek-input w-24",value:t??0,onChange:s=>r(parseFloat(s.target.value)||0)})}function Ve({value:t,onChange:r}){const s=!!t;return e.jsx("button",{onClick:()=>r(!s),className:w("relative inline-flex items-center w-9 h-5 rounded-full transition-colors focus:outline-none","focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1",s?"bg-indigo-500":"bg-gray-300 dark:bg-gray-600"),role:"switch","aria-checked":s,children:e.jsx("span",{className:w("inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transform transition-transform",s?"translate-x-4":"translate-x-0.5")})})}function qe({options:t,value:r,onChange:s}){return t.length===0?e.jsx(xe,{value:r,onChange:s}):e.jsx("select",{className:"peek-select",value:r??t[0]??"",onChange:a=>s(a.target.value),children:t.map(a=>e.jsx("option",{value:a,children:a},a))})}function Ye({name:t,onChange:r}){const s=o.useRef(0);return e.jsxs("button",{onClick:()=>{s.current++,console.log(`[peekr] Fired: ${t}() (call #${s.current})`),r(()=>{console.log(`[peekr] ${t}() fired`)})},className:"flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors bg-orange-50 text-orange-700 hover:bg-orange-100 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("path",{d:"M8 5v14l11-7z"})}),"Fire Event"]})}function Ke({value:t,onChange:r}){return e.jsx("textarea",{className:"peek-input resize-none",rows:2,value:t??"",onChange:s=>r(s.target.value),placeholder:"React node content (text or HTML)",style:{fontFamily:"ui-monospace, monospace",fontSize:11}})}function Ge({value:t,onChange:r}){return e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",className:"w-7 h-7 rounded cursor-pointer border border-gray-200 dark:border-gray-700 p-0.5 bg-transparent",value:t??"#6366f1",onChange:s=>r(s.target.value)}),e.jsx("input",{type:"text",className:"peek-input w-24 font-mono text-xs",value:t??"#6366f1",onChange:s=>r(s.target.value),placeholder:"#000000"})]})}const Je="modulepreload",Xe=function(t){return"/__peek/app/"+t},re={},se=function(r,s,a){let i=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const c=document.querySelector("meta[property=csp-nonce]"),u=(c==null?void 0:c.nonce)||(c==null?void 0:c.getAttribute("nonce"));i=Promise.allSettled(s.map(d=>{if(d=Xe(d),d in re)return;re[d]=!0;const n=d.endsWith(".css"),m=n?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${d}"]${m}`))return;const x=document.createElement("link");if(x.rel=n?"stylesheet":Je,n||(x.as="script"),x.crossOrigin="",x.href=d,u&&x.setAttribute("nonce",u),document.head.appendChild(x),n)return new Promise((p,f)=>{x.addEventListener("load",p),x.addEventListener("error",()=>f(new Error(`Unable to preload CSS for ${d}`)))})}))}function l(c){const u=new Event("vite:preloadError",{cancelable:!0});if(u.payload=c,window.dispatchEvent(u),!u.defaultPrevented)throw c}return i.then(c=>{for(const u of c||[])u.status==="rejected"&&l(u.reason);return r().catch(l)})};function Ze({filePath:t,exportName:r,propDefs:s,propsLoading:a,defaultProps:i,theme:l,viewport:c,customWidth:u}){const[d,n]=o.useState(i),[m,x]=o.useState(i),[p,f]=o.useState(!1),[g,j]=o.useState(!1),[P,_]=o.useState(null),y=o.useRef(null),b=o.useRef(null),V=o.useRef("loading"),q=o.useRef("loading"),L=c==="custom"?u:J[c],$=ce(t,r,l),N=o.useCallback((C,S)=>{var v,R;(R=(v=C.current)==null?void 0:v.contentWindow)==null||R.postMessage(S,"*")},[]);o.useEffect(()=>{const C=S=>{var R,E;const v=S.data;v!=null&&v.type&&(S.source===((R=y.current)==null?void 0:R.contentWindow)&&(v.type==="FRAME_READY"&&(N(y,{type:"UPDATE_PROPS",props:d}),N(y,{type:"SET_THEME",theme:l})),v.type==="RENDER_SUCCESS"&&(V.current="ready")),S.source===((E=b.current)==null?void 0:E.contentWindow)&&(v.type==="FRAME_READY"&&(N(b,{type:"UPDATE_PROPS",props:m}),N(b,{type:"SET_THEME",theme:l})),v.type==="RENDER_SUCCESS"&&(q.current="ready")))};return window.addEventListener("message",C),()=>window.removeEventListener("message",C)},[d,m,l,N]),o.useEffect(()=>{N(y,{type:"UPDATE_PROPS",props:d})},[d,N]),o.useEffect(()=>{N(b,{type:"UPDATE_PROPS",props:m})},[m,N]),o.useEffect(()=>{n(i),x(i)},[i]);const Y=o.useCallback(async()=>{var C,S,v,R;j(!0),_(null);try{const E=(await se(async()=>{const{default:G}=await import("./html2canvas.esm-CBrSDip1.js");return{default:G}},[])).default,K=(await se(async()=>{const{default:G}=await import("./index-Ch1Vufae.js").then(fe=>fe.i);return{default:G}},__vite__mapDeps([0,1]))).default,F=(S=(C=y.current)==null?void 0:C.contentDocument)==null?void 0:S.body,A=(R=(v=b.current)==null?void 0:v.contentDocument)==null?void 0:R.body;if(!F||!A){j(!1);return}const[D,T]=await Promise.all([E(F,{logging:!1,useCORS:!0}),E(A,{logging:!1,useCORS:!0})]),I=Math.max(D.width,T.width),h=Math.max(D.height,T.height),k=D.getContext("2d"),U=T.getContext("2d"),M=k.getImageData(0,0,D.width,D.height),B=U.getImageData(0,0,T.width,T.height),O=document.createElement("canvas");O.width=I,O.height=h;const z=O.getContext("2d"),X=z.createImageData(I,h),at=K(M.data,B.data,X.data,I,h,{threshold:.1});z.putImageData(X,0,0),_(O.toDataURL())}catch(E){console.error("[peekr] Diff computation failed:",E)}finally{j(!1)}},[]);return e.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-3 px-4 h-10 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsxs("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:["Comparing: ",e.jsx("span",{style:{color:"var(--accent)"},children:r==="default"?t.split("/").pop():r})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:()=>{f(!p),p||Y()},disabled:g,className:w("flex items-center gap-1.5 px-3 h-7 rounded-md text-xs font-medium transition-colors",p&&P?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"),children:[g?e.jsx("span",{className:"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin"}):e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("path",{d:"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"})]}),p&&P?"Hide Diff":"Show Visual Diff"]})]}),e.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[e.jsx(ae,{label:"Variant A",iframeRef:y,frameUrl:$,props:d,propDefs:s,propsLoading:a,onPropsChange:n,viewportWidth:L,theme:l,diffOverlay:p&&P?P:null}),e.jsx("div",{className:"w-px shrink-0",style:{background:"var(--border)"}}),e.jsx(ae,{label:"Variant B",iframeRef:b,frameUrl:`${$}&_r=1`,props:m,propDefs:s,propsLoading:a,onPropsChange:x,viewportWidth:L,theme:l,diffOverlay:null})]})]})}function ae({label:t,iframeRef:r,frameUrl:s,props:a,propDefs:i,propsLoading:l,onPropsChange:c,viewportWidth:u,theme:d,diffOverlay:n}){return e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("span",{className:"text-xs font-semibold",style:{color:"var(--text-secondary)"},children:t})}),e.jsx("div",{className:"flex-1 flex items-start justify-center p-4 overflow-auto",style:{background:"var(--surface-raised)"},children:e.jsxs("div",{className:"relative shadow-md rounded-lg overflow-hidden",style:{width:Math.min(u,600),maxWidth:"100%",background:d==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[n&&e.jsx("img",{src:n,alt:"Visual diff",className:"absolute inset-0 w-full h-full object-contain z-10 pointer-events-none mix-blend-difference opacity-80"}),e.jsx("iframe",{ref:r,src:s,title:`${t} preview`,className:"w-full border-none",style:{height:400,display:"block"},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})}),e.jsxs("div",{className:"border-t shrink-0",style:{borderColor:"var(--border)",height:200,background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"})}),e.jsx("div",{style:{height:"calc(100% - 32px)",overflow:"auto"},children:e.jsx(ue,{props:i,values:a,onChange:(m,x)=>c({...a,[m]:x}),loading:l,componentName:t})})]})]})}class Qe extends ne.Component{constructor(){super(...arguments);Z(this,"state",{error:null})}static getDerivedStateFromError(s){return{error:s}}componentDidCatch(s,a){console.error("[peekr] Uncaught error:",s,a)}render(){return this.state.error?this.props.fallback??e.jsx("div",{className:"flex items-center justify-center h-screen bg-red-50 dark:bg-red-950 p-8",children:e.jsxs("div",{className:"max-w-lg w-full bg-white dark:bg-gray-900 rounded-xl border border-red-200 dark:border-red-800 p-6 shadow-sm",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("span",{className:"text-2xl",children:"⚠️"}),e.jsx("h2",{className:"text-base font-semibold text-red-700 dark:text-red-400",children:"Something went wrong"})]}),e.jsx("pre",{className:"text-xs text-red-600 dark:text-red-300 bg-red-50 dark:bg-red-900/30 rounded p-3 overflow-auto whitespace-pre-wrap break-words",children:this.state.error.message}),e.jsx("button",{onClick:()=>this.setState({error:null}),className:"mt-4 px-3 py-1.5 text-xs bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 text-red-700 dark:text-red-300 rounded-md transition-colors",children:"Try again"})]})}):this.props.children}}function et(){const{parseUrl:t,updateUrl:r,hydrateProps:s}=Te(),a=t(),{components:i,loading:l,error:c}=Pe(),[u,d]=o.useState(null),[n,m]=o.useState(null);o.useEffect(()=>{if(a.filePath&&i.length>0&&!n){const h=i.find(k=>k.filePath===a.filePath&&k.exportName===a.exportName);h&&(d(h.id),m(h))}},[i]);const{props:x,loading:p}=_e((n==null?void 0:n.filePath)??null,(n==null?void 0:n.exportName)??null),[f,g]=o.useState({}),j=o.useRef(null);o.useEffect(()=>{if(!n||p||j.current===n.filePath)return;j.current=n.filePath;const h=new URLSearchParams(window.location.search),k=s(h,x),U=te(x,h);g({...U,...k})},[x,n,p,s]);const P=o.useCallback((h,k)=>{g(U=>{const M={...U,[h]:k};return n&&r(n.filePath,n.exportName,M,x),M})},[n,x,r]),_=o.useCallback(h=>{d(h.id),m(h),g({}),j.current=null,r(h.filePath,h.exportName,{})},[r]),[y,b]=o.useState(""),[V,q]=o.useState(!1),[L,$]=o.useState("light"),[N,Y]=o.useState("desktop"),[C,S]=o.useState(1280),[v,R]=o.useState(!1),[E,K]=o.useState(280),F=o.useRef(!1);o.useEffect(()=>{document.documentElement.className=L==="dark"?"dark":""},[L]);const A=o.useCallback(()=>{$(h=>h==="dark"?"light":"dark")},[]),D=o.useCallback((h,k)=>{Y(h),h==="custom"&&k&&S(k)},[]),T=o.useCallback(h=>{h.preventDefault(),F.current=!0;const k=h.clientY,U=E,M=O=>{if(!F.current)return;const z=k-O.clientY;K(Math.max(120,Math.min(600,U+z)))},B=()=>{F.current=!1,document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",B)};document.addEventListener("mousemove",M),document.addEventListener("mouseup",B)},[E]);o.useEffect(()=>{},[n]);const I=n?`${window.location.origin}${window.location.pathname}#/${n.filePath}?export=${n.exportName}${Object.entries(f).filter(([,h])=>h!==void 0&&typeof h!="function").map(([h,k])=>`&${encodeURIComponent(h)}=${encodeURIComponent(String(k))}`).join("")}`:null;return e.jsx(Qe,{children:e.jsxs("div",{className:"h-screen flex flex-col overflow-hidden",style:{background:"var(--surface)"},children:[e.jsx(Ue,{searchQuery:y,onSearch:b,theme:L,onToggleTheme:A,shareUrl:I}),e.jsxs("div",{className:"flex flex-1 min-h-0 overflow-hidden",children:[l&&i.length===0?e.jsx(tt,{}):c?e.jsx(rt,{error:c}):e.jsx(Me,{components:i,selectedId:u,searchQuery:y,onSelect:_,collapsed:V,onToggleCollapse:()=>q(h=>!h)}),e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx($e,{viewport:N,customWidth:C,onViewportChange:D,theme:L,onThemeChange:$,isDiffMode:v,onToggleDiff:()=>R(h=>!h),selectedComponent:(n==null?void 0:n.name)??null}),v&&n?e.jsx(Ze,{filePath:n.filePath,exportName:n.exportName,propDefs:x,propsLoading:p,defaultProps:f,theme:L,viewport:N,customWidth:C}):e.jsxs("div",{className:"flex-1 flex flex-col min-h-0 overflow-hidden",children:[e.jsx("div",{className:"flex-1 min-h-0 overflow-hidden flex",children:e.jsx(Ie,{filePath:(n==null?void 0:n.filePath)??null,exportName:(n==null?void 0:n.exportName)??null,props:f,theme:L,viewport:N,customWidth:C})}),n&&e.jsx("div",{onMouseDown:T,className:"resizer-handle h-1.5 shrink-0 transition-colors",style:{background:"var(--border)",cursor:"row-resize"},role:"separator","aria-label":"Resize props panel","aria-orientation":"horizontal"}),n&&e.jsxs("div",{className:"shrink-0 border-t overflow-hidden flex flex-col",style:{height:E,borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"}),x.length>0&&e.jsx("span",{className:"ml-2 text-xs px-1.5 rounded-full",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:x.length}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{onClick:()=>{const h=te(x,new URLSearchParams);g(h),n&&r(n.filePath,n.exportName,h)},className:"text-xs px-2 h-5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",style:{color:"var(--text-tertiary)"},title:"Reset all props to defaults",children:"Reset"})]}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto",children:e.jsx(ue,{props:x,values:f,onChange:P,loading:p,componentName:(n==null?void 0:n.name)??null})})]})]})]})]})]})})}function tt(){return e.jsxs("div",{className:"flex flex-col border-r shrink-0",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-9 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("div",{className:"h-3 w-24 rounded animate-pulse",style:{background:"var(--surface-overlay)"}})}),e.jsx("div",{className:"p-3 space-y-2",children:Array.from({length:8}).map((t,r)=>e.jsx("div",{className:"h-6 rounded animate-pulse",style:{background:"var(--surface-overlay)",width:`${60+r%3*20}%`}},r))})]})}function rt({error:t}){return e.jsxs("div",{className:"flex flex-col border-r shrink-0 p-3",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("p",{className:"text-xs text-red-500 font-medium mb-1",children:"Failed to load components"}),e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:t})]})}const st=document.getElementById("root");ie(st).render(e.jsx(ne.StrictMode,{children:e.jsx(ve,{children:e.jsx(et,{})})}));

package/app-dist/assets/index-6L7HbM6T.js

@@ -0,0 +1,14 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Ch1Vufae.js","assets/router-DSqugVLU.js"])))=>i.map(i=>d[i]);
+var ve=Object.defineProperty;var ke=(r,t,s)=>t in r?ve(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s;var se=(r,t,s)=>ke(r,typeof t!="symbol"?t+"":t,s);import{r as o,a as je,u as we,b as Ne,R as de,H as Ce}from"./router-DSqugVLU.js";(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))n(l);new MutationObserver(l=>{for(const i of l)if(i.type==="childList")for(const d of i.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&n(d)}).observe(document,{childList:!0,subtree:!0});function s(l){const i={};return l.integrity&&(i.integrity=l.integrity),l.referrerPolicy&&(i.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?i.credentials="include":l.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function n(l){if(l.ep)return;l.ep=!0;const i=s(l);fetch(l.href,i)}})();var ue={exports:{}},X={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ee=o,Se=Symbol.for("react.element"),Re=Symbol.for("react.fragment"),_e=Object.prototype.hasOwnProperty,Pe=Ee.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Le={key:!0,ref:!0,__self:!0,__source:!0};function xe(r,t,s){var n,l={},i=null,d=null;s!==void 0&&(i=""+s),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(d=t.ref);for(n in t)_e.call(t,n)&&!Le.hasOwnProperty(n)&&(l[n]=t[n]);if(r&&r.defaultProps)for(n in t=r.defaultProps,t)l[n]===void 0&&(l[n]=t[n]);return{$$typeof:Se,type:r,key:i,ref:d,props:l,_owner:Pe.current}}X.Fragment=Re;X.jsx=xe;X.jsxs=xe;ue.exports=X;var e=ue.exports,fe,ae=je;fe=ae.createRoot,ae.hydrateRoot;const ne=new Map;let B=null;async function De(){return B||(B=fetch("/__peek/components").then(r=>{if(!r.ok)throw new Error(`Failed to fetch components: ${r.status}`);return r.json()}).catch(r=>{throw B=null,r}),B)}function Te(){B=null}async function Me(r,t){const s=`${r}::${t}`,n=ne.get(s);if(n)return n.promise;const l=fetch(`/__peek/types?file=${encodeURIComponent(r)}&export=${encodeURIComponent(t)}`).then(i=>{if(!i.ok)throw new Error(`Failed to fetch types: ${i.status}`);return i.json()}).catch(()=>[]);return ne.set(s,{promise:l,ts:Date.now()}),l}let J=null;async function Fe(){return J||(J=fetch("/__peek/root-layout").then(r=>r.ok?r.json():null).catch(()=>null),J)}function Ue(){const[r,t]=o.useState([]),[s,n]=o.useState(!0),[l,i]=o.useState(null),d=o.useCallback(async(u=!1)=>{u&&Te(),n(!0),i(null);try{const x=await De();t(x)}catch(x){i(x.message??"Failed to load components")}finally{n(!1)}},[]);return o.useEffect(()=>{d()},[d]),{components:r,loading:s,error:l,refresh:()=>d(!0)}}function Oe(r,t){const[s,n]=o.useState([]),[l,i]=o.useState(!1),[d,u]=o.useState(null),x=o.useRef(0);return o.useEffect(()=>{if(!r||!t){n([]),i(!1),u(null);return}const a=++x.current;i(!0),u(null),Me(r,t).then(f=>{x.current===a&&(n(f),u(null))}).catch(f=>{x.current===a&&(u(f.message??"Failed to parse prop types"),n([]))}).finally(()=>{x.current===a&&i(!1)})},[r,t]),{props:s,loading:l,error:d}}function Ie(r){const t=new Map;for(const s of r){const n=s.folder||".",l=t.get(n)??[];l.push(s),t.set(n,l)}return t}function he(r,t,s,n=!1){const l=new URLSearchParams({file:r,export:t,theme:s});return n&&l.set("fullContext","true"),`/__peek/frame?${l.toString()}`}function oe(r,t){const s={};for(const n of r)if(t.has(n.name)){const l=t.get(n.name);s[n.name]=me(l,n.type)}else n.defaultValue!==void 0?s[n.name]=n.defaultValue:s[n.name]=Ae(n.type,n.options);return s}function Ae(r,t){switch(r){case"boolean":return!1;case"number":return 0;case"string":return"";case"select":return(t==null?void 0:t[0])??"";case"node":return"";case"color":return"#6366f1";case"function":return;default:return}}function me(r,t){switch(t){case"boolean":return r==="true";case"number":return isNaN(Number(r))?0:Number(r);default:return r}}function j(...r){return r.filter(Boolean).join(" ")}function We(){const r=we(),t=Ne(),s=o.useCallback(()=>{const i=t.pathname==="/"||t.pathname===""?null:t.pathname.slice(1),d=new URLSearchParams(t.search),u=d.get("export")??"default",x={};return d.forEach((a,f)=>{f!=="export"&&(x[f]=a)}),{filePath:i,exportName:u,props:x}},[t]),n=o.useCallback((i,d,u,x)=>{const a=new URLSearchParams;a.set("export",d);for(const[f,c]of Object.entries(u))c!=null&&typeof c!="function"&&a.set(f,String(c));r(`/${i}?${a.toString()}`,{replace:!0})},[r]),l=o.useCallback((i,d)=>{const u={};for(const x of d)i.has(x.name)&&(u[x.name]=me(i.get(x.name),x.type));return u},[]);return{parseUrl:s,updateUrl:n,hydrateProps:l}}function $e({searchQuery:r,onSearch:t,theme:s,onToggleTheme:n,shareUrl:l}){const[i,d]=o.useState(!1),u=o.useRef(null);o.useEffect(()=>{const f=c=>{var m,y,g;(c.metaKey||c.ctrlKey)&&c.key==="k"&&(c.preventDefault(),(m=u.current)==null||m.focus(),(y=u.current)==null||y.select()),c.key==="Escape"&&document.activeElement===u.current&&(t(""),(g=u.current)==null||g.blur())};return document.addEventListener("keydown",f),()=>document.removeEventListener("keydown",f)},[t]);const x=o.useCallback(async()=>{const f=l??window.location.href;try{await navigator.clipboard.writeText(f),d(!0),setTimeout(()=>d(!1),2e3)}catch{const c=document.createElement("textarea");c.value=f,document.body.appendChild(c),c.select(),document.execCommand("copy"),document.body.removeChild(c),d(!0),setTimeout(()=>d(!1),2e3)}},[l]),a=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform);return e.jsxs("header",{className:"flex items-center gap-3 px-4 h-11 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center gap-2 shrink-0 select-none",children:[e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 32 32",fill:"none","aria-hidden":!0,children:[e.jsx("rect",{width:"32",height:"32",rx:"6",fill:"#6366f1"}),e.jsx("circle",{cx:"16",cy:"16",r:"4",fill:"white"}),e.jsx("path",{d:"M8 16c0-4.418 3.582-8 8-8s8 3.582 8 8",stroke:"white",strokeWidth:"2",strokeLinecap:"round",fill:"none"})]}),e.jsx("span",{className:"font-semibold text-sm",style:{color:"var(--text-primary)"},children:"peekr"})]}),e.jsxs("div",{className:"flex-1 max-w-xs relative",children:[e.jsxs("svg",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none",width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"m21 21-4.35-4.35"})]}),e.jsx("input",{ref:u,type:"text",placeholder:"Search components...",value:r,onChange:f=>t(f.target.value),className:"peek-input pl-8 pr-14 h-7 text-xs",style:{maxWidth:"100%"},"aria-label":"Search components"}),!r&&e.jsx("kbd",{className:"absolute right-2 top-1/2 -translate-y-1/2 text-[10px] px-1 py-0.5 rounded pointer-events-none select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)",border:"1px solid var(--border)",lineHeight:1},"aria-hidden":!0,children:a?"⌘K":"Ctrl+K"}),r&&e.jsx("button",{onClick:()=>t(""),className:"absolute right-2 top-1/2 -translate-y-1/2 text-xs",style:{color:"var(--text-tertiary)"},"aria-label":"Clear search",children:"✕"})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("button",{onClick:n,title:s==="dark"?"Switch to light mode":"Switch to dark mode",className:j("w-7 h-7 rounded-md flex items-center justify-center transition-colors text-base","hover:bg-gray-100 dark:hover:bg-gray-800"),"aria-label":"Toggle theme",children:s==="dark"?"☀️":"🌙"}),e.jsx("button",{onClick:x,title:"Copy shareable URL",className:j("flex items-center gap-1.5 px-2.5 h-7 rounded-md text-xs font-medium transition-colors",i?"bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300":"bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900"),"aria-label":"Copy shareable URL",children:i?e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"M20 6 9 17l-5-5"})}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e.jsx("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]}),"Share"]})})]})]})}function ee(r,t){if(!t)return!0;const s=r.toLowerCase(),n=t.toLowerCase();let l=0;for(let i=0;i<s.length&&l<n.length;i++)s[i]===n[l]&&l++;return l===n.length}function Be({components:r,selectedId:t,searchQuery:s,onSelect:n,collapsed:l,onToggleCollapse:i}){const[d,u]=o.useState(new Set(["all"])),x=o.useMemo(()=>{const c=s.trim();return c?r.filter(m=>ee(m.name,c)||ee(m.filePath,c)||ee(m.folder,c)):r},[r,s]),a=o.useMemo(()=>Ie(x),[x]),f=c=>{u(m=>{const y=new Set(m);return y.has(c)?y.delete(c):y.add(c),y})};return o.useMemo(()=>{u(c=>{const m=new Set(c);for(const[y,g]of a)(g.some(w=>w.id===t)||s)&&m.add(y);return m})},[t,s,a]),l?e.jsx("div",{className:"flex flex-col items-center py-2 border-r shrink-0",style:{width:40,borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("button",{onClick:i,title:"Expand sidebar",className:"w-7 h-7 rounded-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors mt-1","aria-label":"Expand sidebar",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})})})}):e.jsxs("aside",{className:"flex flex-col border-r shrink-0 overflow-hidden",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center justify-between px-3 h-9 border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsxs("span",{className:"text-xs font-medium uppercase tracking-wider",style:{color:"var(--text-tertiary)"},children:["Components (",x.length,")"]}),e.jsx("button",{onClick:i,title:"Collapse sidebar",className:"w-5 h-5 rounded flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors","aria-label":"Collapse sidebar",children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m15 18-6-6 6-6"})})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto py-1",children:[x.length===0&&e.jsxs("div",{className:"px-3 py-4 text-center",children:[e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:s?"No components match your search.":"No components detected."}),!s&&e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"Make sure your .tsx/.jsx files export React components."})]}),Array.from(a.entries()).map(([c,m])=>e.jsx(ze,{folder:c,components:m,selectedId:t,isExpanded:d.has(c),onToggle:()=>f(c),onSelect:n},c))]})]})}function ze({folder:r,components:t,selectedId:s,isExpanded:n,onToggle:l,onSelect:i}){const d=r==="."?"(root)":r;return e.jsxs("div",{children:[e.jsxs("button",{onClick:l,className:"w-full flex items-center gap-1.5 px-3 py-1 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:j("transition-transform shrink-0",n?"rotate-90":""),style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})}),e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"currentColor",className:"shrink-0",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"M20 7H4C2.9 7 2 7.9 2 9v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM4 5h7l2 2h7c1.1 0 2 .9 2 2H4V5z"})}),e.jsx("span",{className:"text-xs truncate",style:{color:"var(--text-secondary)"},title:d,children:d}),e.jsx("span",{className:"ml-auto text-xs shrink-0",style:{color:"var(--text-tertiary)"},children:t.length})]}),n&&e.jsx("div",{children:t.map(u=>e.jsx(He,{component:u,isSelected:u.id===s,onSelect:()=>i(u)},u.id))})]})}function He({component:r,isSelected:t,onSelect:s}){return e.jsxs("button",{onClick:s,className:j("w-full flex items-center gap-2 pl-8 pr-3 py-1.5 text-left transition-colors text-xs group",t?"bg-indigo-50 dark:bg-indigo-950/50":"hover:bg-gray-50 dark:hover:bg-gray-800/50"),title:r.filePath,"aria-current":t?"page":void 0,children:[e.jsx("span",{className:j("w-4 h-4 rounded flex items-center justify-center shrink-0 text-[9px] font-bold",t?"bg-indigo-500 text-white":"bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400"),"aria-hidden":!0,children:r.name[0]}),e.jsx("span",{className:j("truncate flex-1",t?"text-indigo-700 dark:text-indigo-300 font-medium":"text-gray-700 dark:text-gray-300"),children:r.name}),!r.isDefault&&e.jsx("span",{className:"text-[10px] shrink-0 px-1 rounded",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},title:`Named export: ${r.exportName}`,children:r.exportName})]})}const te={mobile:375,tablet:768,desktop:1280,custom:0},Ve=[{key:"mobile",icon:"📱",label:"Mobile (375px)"},{key:"tablet",icon:"💻",label:"Tablet (768px)"},{key:"desktop",icon:"🖥",label:"Desktop (1280px)"}];function Ke({viewport:r,customWidth:t,onViewportChange:s,theme:n,onThemeChange:l,isDiffMode:i,onToggleDiff:d,selectedComponent:u,hasRootLayout:x,fullContextMode:a,onToggleFullContext:f,mockApiMode:c,onToggleMockApi:m}){const[y,g]=o.useState(!1),[w,R]=o.useState(""),E=r==="custom"?t:te[r];return e.jsxs("div",{className:"flex items-center gap-2 px-3 h-10 border-b shrink-0 flex-wrap",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:Ve.map(({key:p,icon:b,label:M})=>e.jsx("button",{onClick:()=>s(p),title:M,className:j("px-2 h-6 rounded text-xs transition-colors flex items-center gap-1",r===p?"bg-white dark:bg-gray-700 shadow-sm text-indigo-600 dark:text-indigo-400 font-medium":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:e.jsx("span",{className:"text-sm leading-none",children:b})},p))}),e.jsx("div",{className:"flex items-center gap-1 px-2 h-6 rounded-md cursor-pointer select-none",style:{background:"var(--surface-overlay)",color:"var(--text-secondary)",fontSize:11,minWidth:64},title:"Click to set custom width",onClick:()=>{g(!0),R(String(E))},children:y?e.jsx("input",{autoFocus:!0,type:"number",value:w,onChange:p=>R(p.target.value),onBlur:()=>{const p=parseInt(w,10);!isNaN(p)&&p>0&&s("custom",p),g(!1)},onKeyDown:p=>{if(p.key==="Enter"){const b=parseInt(w,10);!isNaN(b)&&b>0&&s("custom",b),g(!1)}p.key==="Escape"&&g(!1)},className:"w-16 bg-transparent border-none outline-none text-xs",style:{color:"var(--text-primary)"},onClick:p=>p.stopPropagation()}):e.jsxs("span",{className:"font-mono",children:[E,"px"]})}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:["light","dark"].map(p=>e.jsx("button",{onClick:()=>l(p),className:j("px-2.5 h-6 rounded text-xs capitalize transition-colors",n===p?"bg-white dark:bg-gray-700 shadow-sm font-medium text-indigo-600 dark:text-indigo-400":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:p},p))}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:x?f:void 0,disabled:!x,className:j("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",x?a?"bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300":"opacity-40 cursor-not-allowed text-gray-400 dark:text-gray-600"),title:x?a?"Full App Context — click to switch to Isolated Mode":"Isolated Mode — click to enable Full App Context (wraps in your root layout/providers)":"No root layout detected (app/layout.tsx, pages/_app.tsx, or src/App.tsx)",children:[e.jsx("span",{className:"text-sm leading-none","aria-hidden":!0,children:x?a?"🟣":"🟢":"○"}),a?"Full Context":"Isolated"]}),e.jsxs("button",{onClick:m,className:j("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",c?"bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"),title:c?"Mock API active — fetch/XHR return empty {}. Click to disable.":"Enable Mock API — intercepts fetch/XHR to return empty responses (useful for components that make API calls)",children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"}),e.jsx("line",{x1:"4",y1:"22",x2:"4",y2:"15"})]}),"Mock API"]}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),u&&e.jsxs("button",{onClick:d,className:j("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",i?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"),title:i?"Exit compare mode":"Compare two variants",children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("rect",{x:"3",y:"3",width:"7",height:"18",rx:"1"}),e.jsx("rect",{x:"14",y:"3",width:"7",height:"18",rx:"1"})]}),i?"Exit Compare":"Compare"]})]})}function qe({filePath:r,exportName:t,props:s,theme:n,viewport:l,customWidth:i,fullContextMode:d,mockApiMode:u}){const x=o.useRef(null),[a,f]=o.useState("idle"),[c,m]=o.useState(null),[y,g]=o.useState(null),w=o.useRef(null),R=l==="custom"?i:te[l],E=r&&t?he(r,t,n,d):null;function p(_){const v={};for(const[k,P]of Object.entries(_))typeof P=="function"?v[k]={__peekrFn:!0,name:k}:v[k]=P;return v}o.useEffect(()=>{const _=v=>{if(x.current&&v.source!==x.current.contentWindow)return;const k=v.data;k.type==="FRAME_READY"&&(f("loading"),g(null),b({type:"UPDATE_PROPS",props:p(s)}),b({type:"SET_THEME",theme:n}),u&&b({type:"SET_MOCK_MODE",enabled:!0})),k.type==="RENDER_SUCCESS"&&(f("ready"),m(null)),k.type==="RENDER_ERROR"&&(f("error"),m({message:k.message,stack:k.stack})),k.type==="FULLCONTEXT_FALLBACK"&&g(k.reason),k.type==="FULLCONTEXT_READY"&&g(null)};return window.addEventListener("message",_),()=>window.removeEventListener("message",_)},[s,n,u]);const b=o.useCallback(_=>{var v,k;(k=(v=x.current)==null?void 0:v.contentWindow)==null||k.postMessage(_,"*")},[]),M=o.useRef(s),U=o.useRef(n);o.useEffect(()=>{a!=="ready"&&a!=="loading"||M.current!==s&&(M.current=s,b({type:"UPDATE_PROPS",props:p(s)}))},[s,a,b]),o.useEffect(()=>{a!=="ready"&&a!=="loading"||U.current!==n&&(U.current=n,b({type:"SET_THEME",theme:n}))},[n,a,b]);const O=o.useRef(u);return o.useEffect(()=>{a!=="ready"&&a!=="loading"||O.current!==u&&(O.current=u,b({type:"SET_MOCK_MODE",enabled:u}))},[u,a,b]),o.useEffect(()=>{E!==w.current&&(w.current=E,f(E?"loading":"idle"),m(null),g(null))},[E]),E?e.jsxs("div",{className:"flex-1 relative overflow-hidden flex items-start justify-center p-6",style:{background:"var(--surface-raised)"},children:[a==="loading"&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10 pointer-events-none",children:e.jsx("div",{className:"w-5 h-5 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin opacity-70"})}),a==="error"&&c&&e.jsx("div",{className:"absolute inset-0 flex items-start justify-center pt-8 z-20 px-6 pointer-events-none",children:e.jsxs("div",{className:"w-full max-w-lg rounded-xl border p-5 shadow-lg pointer-events-auto",style:{background:"var(--surface)",borderColor:"#fca5a5"},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx("span",{className:"text-red-500 text-lg",children:"⚠"}),e.jsx("span",{className:"text-sm font-semibold text-red-600 dark:text-red-400",children:"Component Error"})]}),e.jsx("pre",{className:"text-xs overflow-auto whitespace-pre-wrap break-words rounded p-3",style:{background:"#fef2f2",color:"#dc2626",maxHeight:200,fontFamily:"ui-monospace, monospace"},children:c.message}),c.stack&&e.jsxs("details",{className:"mt-2",children:[e.jsx("summary",{className:"text-xs cursor-pointer",style:{color:"var(--text-tertiary)"},children:"Stack trace"}),e.jsx("pre",{className:"text-xs mt-1 overflow-auto rounded p-2",style:{background:"var(--surface-raised)",color:"var(--text-secondary)",maxHeight:150,fontFamily:"ui-monospace, monospace"},children:c.stack})]})]})}),e.jsxs("div",{className:j("relative transition-all duration-200 shadow-md rounded-lg overflow-hidden",a==="loading"?"opacity-50":"opacity-100"),style:{width:R,maxWidth:"100%",minHeight:200,background:n==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[d&&y&&e.jsxs("div",{className:"absolute top-0 left-0 right-0 px-3 py-1 text-[10px] z-10 flex items-center gap-1.5",style:{background:"#fef9c3",color:"#92400e",borderBottom:"1px solid #fde68a"},title:`Full App Context failed to load: ${y}`,children:[e.jsx("span",{children:"⚠"}),e.jsx("span",{className:"font-medium",children:"Isolated fallback"}),e.jsx("span",{className:"opacity-70 truncate",children:y})]}),e.jsxs("div",{className:"absolute top-0 right-0 px-2 py-0.5 text-[10px] rounded-bl-md z-10 font-mono select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:[R,"px"]}),e.jsx("iframe",{ref:x,src:E,title:"Component preview",className:"w-full border-none",style:{height:Math.max(300,600),display:"block",colorScheme:n},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})]}):e.jsx("div",{className:"flex-1 flex items-center justify-center animate-fade-in",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"text-5xl mb-4 opacity-30 select-none",children:"⚡"}),e.jsx("p",{className:"text-sm font-medium",style:{color:"var(--text-secondary)"},children:"Select a component from the sidebar"}),e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"peekr auto-detects your React components"})]})})}function pe({props:r,values:t,onChange:s,onPropsReset:n,loading:l,componentName:i}){return i?l?e.jsxs("div",{className:"flex items-center justify-center h-full gap-2",children:[e.jsx("div",{className:"w-4 h-4 border border-indigo-400 border-t-transparent rounded-full animate-spin"}),e.jsx("span",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Parsing props..."})]}):r.length===0?e.jsx(st,{componentName:i,onPropsReset:n}):e.jsx("div",{className:"overflow-y-auto h-full",children:e.jsxs("table",{className:"w-full border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b",style:{borderColor:"var(--border)"},children:[e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)",width:"35%"},children:"Prop"}),e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)"},children:"Control"})]})}),e.jsx("tbody",{children:r.map(d=>e.jsx(Ye,{prop:d,value:t[d.name],onChange:u=>s(d.name,u)},d.name))})]})}):e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Select a component to see its props"})})}function Ye({prop:r,value:t,onChange:s}){return e.jsxs("tr",{className:"border-b hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors group",style:{borderColor:"var(--border)"},children:[e.jsxs("td",{className:"px-3 py-2 align-middle",style:{width:"35%"},children:[e.jsx("div",{className:"flex items-center gap-1.5",children:e.jsxs("span",{className:"text-xs font-medium font-mono truncate",style:{color:"var(--text-primary)"},title:r.description??r.name,children:[r.name,r.required&&e.jsx("span",{className:"text-red-400 ml-0.5",title:"Required",children:"*"})]})}),e.jsx("div",{className:"flex items-center gap-1 mt-0.5",children:e.jsx(Je,{type:r.type})}),r.description&&e.jsx("p",{className:"text-[10px] mt-0.5 leading-relaxed",style:{color:"var(--text-tertiary)"},children:r.description})]}),e.jsx("td",{className:"px-3 py-2 align-middle",children:e.jsx(Xe,{prop:r,value:t,onChange:s})})]})}function Je({type:r}){const t={string:"bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400",number:"bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400",boolean:"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400",select:"bg-purple-50 text-purple-600 dark:bg-purple-950 dark:text-purple-400",function:"bg-orange-50 text-orange-600 dark:bg-orange-950 dark:text-orange-400",node:"bg-pink-50 text-pink-600 dark:bg-pink-950 dark:text-pink-400",color:"bg-teal-50 text-teal-600 dark:bg-teal-950 dark:text-teal-400",unknown:"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"};return e.jsx("span",{className:j("px-1.5 py-0.5 rounded text-[10px] font-mono",t[r]??t.unknown),children:r})}function Xe({prop:r,value:t,onChange:s}){switch(r.type){case"boolean":return e.jsx(Ze,{value:t,onChange:s});case"number":return e.jsx(Ge,{value:t,onChange:s});case"select":return e.jsx(Qe,{options:r.options??[],value:t,onChange:s});case"function":return e.jsx(et,{name:r.name,onChange:s});case"node":return e.jsx(tt,{value:t,onChange:s});case"color":return e.jsx(rt,{value:t,onChange:s});case"string":default:return e.jsx(ge,{value:t,onChange:s})}}function ge({value:r,onChange:t}){return e.jsx("input",{type:"text",className:"peek-input",value:r??"",onChange:s=>t(s.target.value),placeholder:"string value"})}function Ge({value:r,onChange:t}){return e.jsx("input",{type:"number",className:"peek-input w-24",value:r??0,onChange:s=>t(parseFloat(s.target.value)||0)})}function Ze({value:r,onChange:t}){const s=!!r;return e.jsx("button",{onClick:()=>t(!s),className:j("relative inline-flex items-center w-9 h-5 rounded-full transition-colors focus:outline-none","focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1",s?"bg-indigo-500":"bg-gray-300 dark:bg-gray-600"),role:"switch","aria-checked":s,children:e.jsx("span",{className:j("inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transform transition-transform",s?"translate-x-4":"translate-x-0.5")})})}function Qe({options:r,value:t,onChange:s}){return r.length===0?e.jsx(ge,{value:t,onChange:s}):e.jsx("select",{className:"peek-select",value:t??r[0]??"",onChange:n=>s(n.target.value),children:r.map(n=>e.jsx("option",{value:n,children:n},n))})}function et({name:r,onChange:t}){const s=o.useRef(0);return e.jsxs("button",{onClick:()=>{s.current++,console.log(`[peekr] Fired: ${r}() (call #${s.current})`),t(()=>{console.log(`[peekr] ${r}() fired`)})},className:"flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors bg-orange-50 text-orange-700 hover:bg-orange-100 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("path",{d:"M8 5v14l11-7z"})}),"Fire Event"]})}function tt({value:r,onChange:t}){return e.jsx("textarea",{className:"peek-input resize-none",rows:2,value:r??"",onChange:s=>t(s.target.value),placeholder:"React node content (text or HTML)",style:{fontFamily:"ui-monospace, monospace",fontSize:11}})}function rt({value:r,onChange:t}){return e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",className:"w-7 h-7 rounded cursor-pointer border border-gray-200 dark:border-gray-700 p-0.5 bg-transparent",value:r??"#6366f1",onChange:s=>t(s.target.value)}),e.jsx("input",{type:"text",className:"peek-input w-24 font-mono text-xs",value:r??"#6366f1",onChange:s=>t(s.target.value),placeholder:"#000000"})]})}function st({componentName:r,onPropsReset:t}){const[s,n]=o.useState("{}"),[l,i]=o.useState(null),[d,u]=o.useState(!0);o.useEffect(()=>{n("{}"),i(null),u(!0),t==null||t({})},[r]);const x=a=>{const f=a.target.value;if(n(f),f.trim()===""||f.trim()==="{}"){i(null),u(!0),t==null||t({});return}try{const c=JSON.parse(f);if(typeof c!="object"||Array.isArray(c)||c===null){i("Must be a JSON object { }"),u(!1);return}const m={};for(const[y,g]of Object.entries(c))typeof g=="string"&&(g.trim().startsWith("() =>")||g.trim().startsWith("function"))?m[y]=()=>{}:m[y]=g;i(null),u(!0),t==null||t(m)}catch(c){i(c.message),u(!1)}};return e.jsxs("div",{className:"flex flex-col h-full p-3 gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:"Raw props (JSON)"}),e.jsx("span",{className:j("text-[10px] px-1.5 py-0.5 rounded font-mono",d?"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400":"bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-400"),children:d?"valid":"invalid"}),e.jsx("span",{className:"text-[10px] ml-auto",style:{color:"var(--text-tertiary)"},children:"No TS types found"})]}),e.jsx("textarea",{className:"flex-1 text-xs rounded-md p-2 resize-none",style:{background:"var(--surface-overlay)",color:"var(--text-primary)",border:`1px solid ${l?"#f87171":"var(--border)"}`,outline:"none",fontFamily:"ui-monospace, monospace",lineHeight:1.6,minHeight:80},value:s,onChange:x,spellCheck:!1,placeholder:`{
+  "label": "Click me",
+  "disabled": false,
+  "onClick": "() => {}"
+}`}),l&&e.jsx("p",{className:"text-[10px] leading-relaxed",style:{color:"#f87171"},children:l}),e.jsxs("p",{className:"text-[10px] leading-relaxed",style:{color:"var(--text-tertiary)"},children:["Type props as JSON. Use ",e.jsxs("code",{style:{fontFamily:"ui-monospace, monospace"},children:['"() => ',"{}",'"']})," for callbacks. Add TypeScript types to get auto-generated controls."]})]})}const at="modulepreload",nt=function(r){return"/__peek/app/"+r},le={},ie=function(t,s,n){let l=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const d=document.querySelector("meta[property=csp-nonce]"),u=(d==null?void 0:d.nonce)||(d==null?void 0:d.getAttribute("nonce"));l=Promise.allSettled(s.map(x=>{if(x=nt(x),x in le)return;le[x]=!0;const a=x.endsWith(".css"),f=a?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${x}"]${f}`))return;const c=document.createElement("link");if(c.rel=a?"stylesheet":at,a||(c.as="script"),c.crossOrigin="",c.href=x,u&&c.setAttribute("nonce",u),document.head.appendChild(c),a)return new Promise((m,y)=>{c.addEventListener("load",m),c.addEventListener("error",()=>y(new Error(`Unable to preload CSS for ${x}`)))})}))}function i(d){const u=new Event("vite:preloadError",{cancelable:!0});if(u.payload=d,window.dispatchEvent(u),!u.defaultPrevented)throw d}return l.then(d=>{for(const u of d||[])u.status==="rejected"&&i(u.reason);return t().catch(i)})};function ot({filePath:r,exportName:t,propDefs:s,propsLoading:n,defaultProps:l,theme:i,viewport:d,customWidth:u}){const[x,a]=o.useState(l),[f,c]=o.useState(l),[m,y]=o.useState(!1),[g,w]=o.useState(!1),[R,E]=o.useState(null),p=o.useRef(null),b=o.useRef(null),M=o.useRef("loading"),U=o.useRef("loading"),O=d==="custom"?u:te[d],_=he(r,t,i),v=o.useCallback((P,C)=>{var N,L;(L=(N=P.current)==null?void 0:N.contentWindow)==null||L.postMessage(C,"*")},[]);o.useEffect(()=>{const P=C=>{var L,D;const N=C.data;N!=null&&N.type&&(C.source===((L=p.current)==null?void 0:L.contentWindow)&&(N.type==="FRAME_READY"&&(v(p,{type:"UPDATE_PROPS",props:x}),v(p,{type:"SET_THEME",theme:i})),N.type==="RENDER_SUCCESS"&&(M.current="ready")),C.source===((D=b.current)==null?void 0:D.contentWindow)&&(N.type==="FRAME_READY"&&(v(b,{type:"UPDATE_PROPS",props:f}),v(b,{type:"SET_THEME",theme:i})),N.type==="RENDER_SUCCESS"&&(U.current="ready")))};return window.addEventListener("message",P),()=>window.removeEventListener("message",P)},[x,f,i,v]),o.useEffect(()=>{v(p,{type:"UPDATE_PROPS",props:x})},[x,v]),o.useEffect(()=>{v(b,{type:"UPDATE_PROPS",props:f})},[f,v]),o.useEffect(()=>{a(l),c(l)},[l]);const k=o.useCallback(async()=>{var P,C,N,L;w(!0),E(null);try{const D=(await ie(async()=>{const{default:T}=await import("./html2canvas.esm-CBrSDip1.js");return{default:T}},[])).default,z=(await ie(async()=>{const{default:T}=await import("./index-Ch1Vufae.js").then(W=>W.i);return{default:T}},__vite__mapDeps([0,1]))).default,q=(C=(P=p.current)==null?void 0:P.contentDocument)==null?void 0:C.body,H=(L=(N=b.current)==null?void 0:N.contentDocument)==null?void 0:L.body;if(!q||!H){w(!1);return}const[I,F]=await Promise.all([D(q,{logging:!1,useCORS:!0}),D(H,{logging:!1,useCORS:!0})]),V=Math.max(I.width,F.width),A=Math.max(I.height,F.height),G=I.getContext("2d"),K=F.getContext("2d"),Z=G.getImageData(0,0,I.width,I.height),Q=K.getImageData(0,0,F.width,F.height),$=document.createElement("canvas");$.width=V,$.height=A;const Y=$.getContext("2d"),h=Y.createImageData(V,A),S=z(Z.data,Q.data,h.data,V,A,{threshold:.1});Y.putImageData(h,0,0),E($.toDataURL())}catch(D){console.error("[peekr] Diff computation failed:",D)}finally{w(!1)}},[]);return e.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-3 px-4 h-10 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsxs("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:["Comparing: ",e.jsx("span",{style:{color:"var(--accent)"},children:t==="default"?r.split("/").pop():t})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:()=>{y(!m),m||k()},disabled:g,className:j("flex items-center gap-1.5 px-3 h-7 rounded-md text-xs font-medium transition-colors",m&&R?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"),children:[g?e.jsx("span",{className:"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin"}):e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("path",{d:"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"})]}),m&&R?"Hide Diff":"Show Visual Diff"]})]}),e.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[e.jsx(ce,{label:"Variant A",iframeRef:p,frameUrl:_,props:x,propDefs:s,propsLoading:n,onPropsChange:a,viewportWidth:O,theme:i,diffOverlay:m&&R?R:null}),e.jsx("div",{className:"w-px shrink-0",style:{background:"var(--border)"}}),e.jsx(ce,{label:"Variant B",iframeRef:b,frameUrl:`${_}&_r=1`,props:f,propDefs:s,propsLoading:n,onPropsChange:c,viewportWidth:O,theme:i,diffOverlay:null})]})]})}function ce({label:r,iframeRef:t,frameUrl:s,props:n,propDefs:l,propsLoading:i,onPropsChange:d,viewportWidth:u,theme:x,diffOverlay:a}){return e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("span",{className:"text-xs font-semibold",style:{color:"var(--text-secondary)"},children:r})}),e.jsx("div",{className:"flex-1 flex items-start justify-center p-4 overflow-auto",style:{background:"var(--surface-raised)"},children:e.jsxs("div",{className:"relative shadow-md rounded-lg overflow-hidden",style:{width:Math.min(u,600),maxWidth:"100%",background:x==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[a&&e.jsx("img",{src:a,alt:"Visual diff",className:"absolute inset-0 w-full h-full object-contain z-10 pointer-events-none mix-blend-difference opacity-80"}),e.jsx("iframe",{ref:t,src:s,title:`${r} preview`,className:"w-full border-none",style:{height:400,display:"block"},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})}),e.jsxs("div",{className:"border-t shrink-0",style:{borderColor:"var(--border)",height:200,background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"})}),e.jsx("div",{style:{height:"calc(100% - 32px)",overflow:"auto"},children:e.jsx(pe,{props:l,values:n,onChange:(f,c)=>d({...n,[f]:c}),loading:i,componentName:r})})]})]})}class lt extends de.Component{constructor(){super(...arguments);se(this,"state",{error:null})}static getDerivedStateFromError(s){return{error:s}}componentDidCatch(s,n){console.error("[peekr] Uncaught error:",s,n)}render(){return this.state.error?this.props.fallback??e.jsx("div",{className:"flex items-center justify-center h-screen bg-red-50 dark:bg-red-950 p-8",children:e.jsxs("div",{className:"max-w-lg w-full bg-white dark:bg-gray-900 rounded-xl border border-red-200 dark:border-red-800 p-6 shadow-sm",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("span",{className:"text-2xl",children:"⚠️"}),e.jsx("h2",{className:"text-base font-semibold text-red-700 dark:text-red-400",children:"Something went wrong"})]}),e.jsx("pre",{className:"text-xs text-red-600 dark:text-red-300 bg-red-50 dark:bg-red-900/30 rounded p-3 overflow-auto whitespace-pre-wrap break-words",children:this.state.error.message}),e.jsx("button",{onClick:()=>this.setState({error:null}),className:"mt-4 px-3 py-1.5 text-xs bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 text-red-700 dark:text-red-300 rounded-md transition-colors",children:"Try again"})]})}):this.props.children}}function it(){const{parseUrl:r,updateUrl:t,hydrateProps:s}=We(),n=r(),{components:l,loading:i,error:d}=Ue(),[u,x]=o.useState(null),[a,f]=o.useState(null);o.useEffect(()=>{if(n.filePath&&l.length>0&&!a){const h=l.find(S=>S.filePath===n.filePath&&S.exportName===n.exportName);h&&(x(h.id),f(h))}},[l]);const{props:c,loading:m}=Oe((a==null?void 0:a.filePath)??null,(a==null?void 0:a.exportName)??null),[y,g]=o.useState({}),w=o.useRef(null);o.useEffect(()=>{if(!a||m||w.current===a.filePath)return;w.current=a.filePath;const h=new URLSearchParams(window.location.search),S=s(h,c),T=oe(c,h);g({...T,...S})},[c,a,m,s]);const R=o.useCallback((h,S)=>{g(T=>{const W={...T,[h]:S};return a&&t(a.filePath,a.exportName,W,c),W})},[a,c,t]),E=o.useCallback(h=>{g(h),a&&t(a.filePath,a.exportName,h,c)},[a,c,t]),p=o.useCallback(h=>{x(h.id),f(h),g({}),w.current=null,t(h.filePath,h.exportName,{})},[t]),[b,M]=o.useState(null),[U,O]=o.useState(!1);o.useEffect(()=>{Fe().then(M)},[]),o.useEffect(()=>{},[]);const[_,v]=o.useState(""),[k,P]=o.useState(!1),[C,N]=o.useState("light"),[L,D]=o.useState("desktop"),[z,q]=o.useState(1280),[H,I]=o.useState(!1),[F,V]=o.useState(!1),[A,G]=o.useState(280),K=o.useRef(!1);o.useEffect(()=>{document.documentElement.className=C==="dark"?"dark":""},[C]);const Z=o.useCallback(()=>{N(h=>h==="dark"?"light":"dark")},[]),Q=o.useCallback((h,S)=>{D(h),h==="custom"&&S&&q(S)},[]),$=o.useCallback(h=>{h.preventDefault(),K.current=!0;const S=h.clientY,T=A,W=ye=>{if(!K.current)return;const be=S-ye.clientY;G(Math.max(120,Math.min(600,T+be)))},re=()=>{K.current=!1,document.removeEventListener("mousemove",W),document.removeEventListener("mouseup",re)};document.addEventListener("mousemove",W),document.addEventListener("mouseup",re)},[A]);o.useEffect(()=>{},[a]);const Y=a?`${window.location.origin}${window.location.pathname}#/${a.filePath}?export=${a.exportName}${Object.entries(y).filter(([,h])=>h!==void 0&&typeof h!="function").map(([h,S])=>`&${encodeURIComponent(h)}=${encodeURIComponent(String(S))}`).join("")}`:null;return e.jsx(lt,{children:e.jsxs("div",{className:"h-screen flex flex-col overflow-hidden",style:{background:"var(--surface)"},children:[e.jsx($e,{searchQuery:_,onSearch:v,theme:C,onToggleTheme:Z,shareUrl:Y}),e.jsxs("div",{className:"flex flex-1 min-h-0 overflow-hidden",children:[i&&l.length===0?e.jsx(ct,{}):d?e.jsx(dt,{error:d}):e.jsx(Be,{components:l,selectedId:u,searchQuery:_,onSelect:p,collapsed:k,onToggleCollapse:()=>P(h=>!h)}),e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx(Ke,{viewport:L,customWidth:z,onViewportChange:Q,theme:C,onThemeChange:N,isDiffMode:H,onToggleDiff:()=>I(h=>!h),selectedComponent:(a==null?void 0:a.name)??null,hasRootLayout:b!==null,fullContextMode:U,onToggleFullContext:()=>O(h=>!h),mockApiMode:F,onToggleMockApi:()=>V(h=>!h)}),H&&a?e.jsx(ot,{filePath:a.filePath,exportName:a.exportName,propDefs:c,propsLoading:m,defaultProps:y,theme:C,viewport:L,customWidth:z}):e.jsxs("div",{className:"flex-1 flex flex-col min-h-0 overflow-hidden",children:[e.jsx("div",{className:"flex-1 min-h-0 overflow-hidden flex",children:e.jsx(qe,{filePath:(a==null?void 0:a.filePath)??null,exportName:(a==null?void 0:a.exportName)??null,props:y,theme:C,viewport:L,customWidth:z,fullContextMode:U,mockApiMode:F})}),a&&e.jsx("div",{onMouseDown:$,className:"resizer-handle h-1.5 shrink-0 transition-colors",style:{background:"var(--border)",cursor:"row-resize"},role:"separator","aria-label":"Resize props panel","aria-orientation":"horizontal"}),a&&e.jsxs("div",{className:"shrink-0 border-t overflow-hidden flex flex-col",style:{height:A,borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"}),c.length>0&&e.jsx("span",{className:"ml-2 text-xs px-1.5 rounded-full",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:c.length}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{onClick:()=>{const h=oe(c,new URLSearchParams);g(h),a&&t(a.filePath,a.exportName,h)},className:"text-xs px-2 h-5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",style:{color:"var(--text-tertiary)"},title:"Reset all props to defaults",children:"Reset"})]}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto",children:e.jsx(pe,{props:c,values:y,onChange:R,onPropsReset:E,loading:m,componentName:(a==null?void 0:a.name)??null})})]})]})]})]})]})})}function ct(){return e.jsxs("div",{className:"flex flex-col border-r shrink-0",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-9 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("div",{className:"h-3 w-24 rounded animate-pulse",style:{background:"var(--surface-overlay)"}})}),e.jsx("div",{className:"p-3 space-y-2",children:Array.from({length:8}).map((r,t)=>e.jsx("div",{className:"h-6 rounded animate-pulse",style:{background:"var(--surface-overlay)",width:`${60+t%3*20}%`}},t))})]})}function dt({error:r}){return e.jsxs("div",{className:"flex flex-col border-r shrink-0 p-3",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("p",{className:"text-xs text-red-500 font-medium mb-1",children:"Failed to load components"}),e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:r})]})}const ut=document.getElementById("root");fe(ut).render(e.jsx(de.StrictMode,{children:e.jsx(Ce,{children:e.jsx(it,{})})}));

package/app-dist/assets/index-B0RUQXnF.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.left-0{left:0}.left-2\.5{left:.625rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1\/2{top:50%}.z-10{z-index:10}.z-20{z-index:20}.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-0\.5{margin-left:.125rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.h-screen{height:100vh}.min-h-0{min-height:0px}.w-16{width:4rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-7{width:1.75rem}.w-9{width:2.25rem}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0px}.max-w-lg{max-width:32rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0\.5{--tw-translate-x: .125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-4{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .1s ease-out}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-bl-md{border-bottom-left-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-current{border-color:currentColor}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-indigo-400{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity, 1))}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))}.border-t-transparent{border-top-color:transparent}.bg-amber-50{--tw-bg-opacity: 1;background-color:rgb(255 251 235 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-orange-50{--tw-bg-opacity: 1;background-color:rgb(255 247 237 / var(--tw-bg-opacity, 1))}.bg-pink-50{--tw-bg-opacity: 1;background-color:rgb(253 242 248 / var(--tw-bg-opacity, 1))}.bg-purple-100{--tw-bg-opacity: 1;background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))}.bg-purple-50{--tw-bg-opacity: 1;background-color:rgb(250 245 255 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-teal-50{--tw-bg-opacity: 1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-100{--tw-bg-opacity: 1;background-color:rgb(237 233 254 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-8{padding-left:2rem}.pr-14{padding-right:3.5rem}.pr-3{padding-right:.75rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-600{--tw-text-opacity: 1;color:rgb(217 119 6 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.text-orange-700{--tw-text-opacity: 1;color:rgb(194 65 12 / var(--tw-text-opacity, 1))}.text-pink-600{--tw-text-opacity: 1;color:rgb(219 39 119 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity: 1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-purple-700{--tw-text-opacity: 1;color:rgb(126 34 206 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity: 1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-violet-700{--tw-text-opacity: 1;color:rgb(109 40 217 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-100{opacity:1}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.mix-blend-difference{mix-blend-mode:difference}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}:root{--surface: #ffffff;--surface-raised: #f8fafc;--surface-overlay: #f1f5f9;--border: #e2e8f0;--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #94a3b8;--accent: #6366f1;--accent-hover: #4f46e5;--accent-fg: #ffffff;--sidebar-width: 240px;--props-height: 300px}.dark{--surface: #0f172a;--surface-raised: #1e293b;--surface-overlay: #334155;--border: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-tertiary: #64748b;--accent: #818cf8;--accent-hover: #6366f1;--accent-fg: #ffffff}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;background:var(--surface);color:var(--text-primary);overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.resizer-handle{cursor:row-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.resizer-handle:hover,.resizer-handle.active{background:var(--accent)!important}.peek-input{width:100%;padding:4px 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text-primary);font-size:12px;font-family:inherit;outline:none;transition:border-color .1s}.peek-input:focus{border-color:var(--accent)}.dark .peek-input{background:var(--surface-raised)}.peek-select{width:100%;padding:4px 28px 4px 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text-primary);font-size:12px;font-family:inherit;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.peek-select:focus{border-color:var(--accent)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.toast{animation:toast-in .15s ease-out}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50\/50:hover{background-color:#f9fafb80}.hover\:bg-indigo-100:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))}.hover\:bg-orange-100:hover{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))}.hover\:bg-red-200:hover{--tw-bg-opacity: 1;background-color:rgb(254 202 202 / var(--tw-bg-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-indigo-500:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width: 1px}.dark\:border-gray-700:is(.dark *){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.dark\:border-red-800:is(.dark *){--tw-border-opacity: 1;border-color:rgb(153 27 27 / var(--tw-border-opacity, 1))}.dark\:bg-amber-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(69 26 3 / var(--tw-bg-opacity, 1))}.dark\:bg-blue-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(23 37 84 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-600:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.dark\:bg-green-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(20 83 45 / var(--tw-bg-opacity, 1))}.dark\:bg-green-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(5 46 22 / var(--tw-bg-opacity, 1))}.dark\:bg-indigo-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(30 27 75 / var(--tw-bg-opacity, 1))}.dark\:bg-indigo-950\/50:is(.dark *){background-color:#1e1b4b80}.dark\:bg-orange-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(67 20 7 / var(--tw-bg-opacity, 1))}.dark\:bg-pink-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(80 7 36 / var(--tw-bg-opacity, 1))}.dark\:bg-purple-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(59 7 100 / var(--tw-bg-opacity, 1))}.dark\:bg-red-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(127 29 29 / var(--tw-bg-opacity, 1))}.dark\:bg-red-900\/30:is(.dark *){background-color:#7f1d1d4d}.dark\:bg-red-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(69 10 10 / var(--tw-bg-opacity, 1))}.dark\:bg-teal-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(4 47 46 / var(--tw-bg-opacity, 1))}.dark\:bg-violet-950:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(46 16 101 / var(--tw-bg-opacity, 1))}.dark\:text-amber-400:is(.dark *){--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.dark\:text-blue-400:is(.dark *){--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:text-gray-600:is(.dark *){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.dark\:text-green-300:is(.dark *){--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.dark\:text-indigo-300:is(.dark *){--tw-text-opacity: 1;color:rgb(165 180 252 / var(--tw-text-opacity, 1))}.dark\:text-indigo-400:is(.dark *){--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.dark\:text-orange-300:is(.dark *){--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.dark\:text-orange-400:is(.dark *){--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.dark\:text-pink-400:is(.dark *){--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.dark\:text-purple-300:is(.dark *){--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.dark\:text-purple-400:is(.dark *){--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.dark\:text-red-300:is(.dark *){--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.dark\:text-teal-400:is(.dark *){--tw-text-opacity: 1;color:rgb(45 212 191 / var(--tw-text-opacity, 1))}.dark\:text-violet-300:is(.dark *){--tw-text-opacity: 1;color:rgb(196 181 253 / var(--tw-text-opacity, 1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-gray-800:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-gray-800\/30:hover:is(.dark *){background-color:#1f29374d}.dark\:hover\:bg-gray-800\/50:hover:is(.dark *){background-color:#1f293780}.dark\:hover\:bg-indigo-900:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(49 46 129 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-orange-900:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(124 45 18 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-red-800:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(153 27 27 / var(--tw-bg-opacity, 1))}.dark\:hover\:text-gray-300:hover:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}

package/app-dist/assets/index-BEvgfipD.js

@@ -0,0 +1,14 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Ch1Vufae.js","assets/router-DSqugVLU.js"])))=>i.map(i=>d[i]);
+var ye=Object.defineProperty;var be=(r,t,s)=>t in r?ye(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s;var re=(r,t,s)=>be(r,typeof t!="symbol"?t+"":t,s);import{r as o,a as ve,u as ke,b as je,R as ce,H as we}from"./router-DSqugVLU.js";(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))a(l);new MutationObserver(l=>{for(const i of l)if(i.type==="childList")for(const d of i.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&a(d)}).observe(document,{childList:!0,subtree:!0});function s(l){const i={};return l.integrity&&(i.integrity=l.integrity),l.referrerPolicy&&(i.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?i.credentials="include":l.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function a(l){if(l.ep)return;l.ep=!0;const i=s(l);fetch(l.href,i)}})();var de={exports:{}},Y={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ne=o,Ce=Symbol.for("react.element"),Ee=Symbol.for("react.fragment"),Se=Object.prototype.hasOwnProperty,Re=Ne.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_e={key:!0,ref:!0,__self:!0,__source:!0};function ue(r,t,s){var a,l={},i=null,d=null;s!==void 0&&(i=""+s),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(d=t.ref);for(a in t)Se.call(t,a)&&!_e.hasOwnProperty(a)&&(l[a]=t[a]);if(r&&r.defaultProps)for(a in t=r.defaultProps,t)l[a]===void 0&&(l[a]=t[a]);return{$$typeof:Ce,type:r,key:i,ref:d,props:l,_owner:Re.current}}Y.Fragment=Ee;Y.jsx=ue;Y.jsxs=ue;de.exports=Y;var e=de.exports,xe,se=ve;xe=se.createRoot,se.hydrateRoot;const ae=new Map;let W=null;async function Pe(){return W||(W=fetch("/__peek/components").then(r=>{if(!r.ok)throw new Error(`Failed to fetch components: ${r.status}`);return r.json()}).catch(r=>{throw W=null,r}),W)}function Le(){W=null}async function De(r,t){const s=`${r}::${t}`,a=ae.get(s);if(a)return a.promise;const l=fetch(`/__peek/types?file=${encodeURIComponent(r)}&export=${encodeURIComponent(t)}`).then(i=>{if(!i.ok)throw new Error(`Failed to fetch types: ${i.status}`);return i.json()}).catch(()=>[]);return ae.set(s,{promise:l,ts:Date.now()}),l}let q=null;async function Te(){return q||(q=fetch("/__peek/root-layout").then(r=>r.ok?r.json():null).catch(()=>null),q)}function Fe(){const[r,t]=o.useState([]),[s,a]=o.useState(!0),[l,i]=o.useState(null),d=o.useCallback(async(x=!1)=>{x&&Le(),a(!0),i(null);try{const u=await Pe();t(u)}catch(u){i(u.message??"Failed to load components")}finally{a(!1)}},[]);return o.useEffect(()=>{d()},[d]),{components:r,loading:s,error:l,refresh:()=>d(!0)}}function Ue(r,t){const[s,a]=o.useState([]),[l,i]=o.useState(!1),[d,x]=o.useState(null),u=o.useRef(0);return o.useEffect(()=>{if(!r||!t){a([]),i(!1),x(null);return}const n=++u.current;i(!0),x(null),De(r,t).then(f=>{u.current===n&&(a(f),x(null))}).catch(f=>{u.current===n&&(x(f.message??"Failed to parse prop types"),a([]))}).finally(()=>{u.current===n&&i(!1)})},[r,t]),{props:s,loading:l,error:d}}function Me(r){const t=new Map;for(const s of r){const a=s.folder||".",l=t.get(a)??[];l.push(s),t.set(a,l)}return t}function fe(r,t,s,a=!1){const l=new URLSearchParams({file:r,export:t,theme:s});return a&&l.set("fullContext","true"),`/__peek/frame?${l.toString()}`}function ne(r,t){const s={};for(const a of r)if(t.has(a.name)){const l=t.get(a.name);s[a.name]=he(l,a.type)}else a.defaultValue!==void 0?s[a.name]=a.defaultValue:s[a.name]=Oe(a.type,a.options);return s}function Oe(r,t){switch(r){case"boolean":return!1;case"number":return 0;case"string":return"";case"select":return(t==null?void 0:t[0])??"";case"node":return"";case"color":return"#6366f1";case"function":return;default:return}}function he(r,t){switch(t){case"boolean":return r==="true";case"number":return isNaN(Number(r))?0:Number(r);default:return r}}function w(...r){return r.filter(Boolean).join(" ")}function Ae(){const r=ke(),t=je(),s=o.useCallback(()=>{const i=t.pathname==="/"||t.pathname===""?null:t.pathname.slice(1),d=new URLSearchParams(t.search),x=d.get("export")??"default",u={};return d.forEach((n,f)=>{f!=="export"&&(u[f]=n)}),{filePath:i,exportName:x,props:u}},[t]),a=o.useCallback((i,d,x,u)=>{const n=new URLSearchParams;n.set("export",d);for(const[f,c]of Object.entries(x))c!=null&&typeof c!="function"&&n.set(f,String(c));r(`/${i}?${n.toString()}`,{replace:!0})},[r]),l=o.useCallback((i,d)=>{const x={};for(const u of d)i.has(u.name)&&(x[u.name]=he(i.get(u.name),u.type));return x},[]);return{parseUrl:s,updateUrl:a,hydrateProps:l}}function Ie({searchQuery:r,onSearch:t,theme:s,onToggleTheme:a,shareUrl:l}){const[i,d]=o.useState(!1),x=o.useRef(null);o.useEffect(()=>{const f=c=>{var m,g,y;(c.metaKey||c.ctrlKey)&&c.key==="k"&&(c.preventDefault(),(m=x.current)==null||m.focus(),(g=x.current)==null||g.select()),c.key==="Escape"&&document.activeElement===x.current&&(t(""),(y=x.current)==null||y.blur())};return document.addEventListener("keydown",f),()=>document.removeEventListener("keydown",f)},[t]);const u=o.useCallback(async()=>{const f=l??window.location.href;try{await navigator.clipboard.writeText(f),d(!0),setTimeout(()=>d(!1),2e3)}catch{const c=document.createElement("textarea");c.value=f,document.body.appendChild(c),c.select(),document.execCommand("copy"),document.body.removeChild(c),d(!0),setTimeout(()=>d(!1),2e3)}},[l]),n=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform);return e.jsxs("header",{className:"flex items-center gap-3 px-4 h-11 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center gap-2 shrink-0 select-none",children:[e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 32 32",fill:"none","aria-hidden":!0,children:[e.jsx("rect",{width:"32",height:"32",rx:"6",fill:"#6366f1"}),e.jsx("circle",{cx:"16",cy:"16",r:"4",fill:"white"}),e.jsx("path",{d:"M8 16c0-4.418 3.582-8 8-8s8 3.582 8 8",stroke:"white",strokeWidth:"2",strokeLinecap:"round",fill:"none"})]}),e.jsx("span",{className:"font-semibold text-sm",style:{color:"var(--text-primary)"},children:"peekr"})]}),e.jsxs("div",{className:"flex-1 max-w-xs relative",children:[e.jsxs("svg",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none",width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"m21 21-4.35-4.35"})]}),e.jsx("input",{ref:x,type:"text",placeholder:"Search components...",value:r,onChange:f=>t(f.target.value),className:"peek-input pl-8 pr-14 h-7 text-xs",style:{maxWidth:"100%"},"aria-label":"Search components"}),!r&&e.jsx("kbd",{className:"absolute right-2 top-1/2 -translate-y-1/2 text-[10px] px-1 py-0.5 rounded pointer-events-none select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)",border:"1px solid var(--border)",lineHeight:1},"aria-hidden":!0,children:n?"⌘K":"Ctrl+K"}),r&&e.jsx("button",{onClick:()=>t(""),className:"absolute right-2 top-1/2 -translate-y-1/2 text-xs",style:{color:"var(--text-tertiary)"},"aria-label":"Clear search",children:"✕"})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("button",{onClick:a,title:s==="dark"?"Switch to light mode":"Switch to dark mode",className:w("w-7 h-7 rounded-md flex items-center justify-center transition-colors text-base","hover:bg-gray-100 dark:hover:bg-gray-800"),"aria-label":"Toggle theme",children:s==="dark"?"☀️":"🌙"}),e.jsx("button",{onClick:u,title:"Copy shareable URL",className:w("flex items-center gap-1.5 px-2.5 h-7 rounded-md text-xs font-medium transition-colors",i?"bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300":"bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900"),"aria-label":"Copy shareable URL",children:i?e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"M20 6 9 17l-5-5"})}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e.jsx("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]}),"Share"]})})]})]})}function ee(r,t){if(!t)return!0;const s=r.toLowerCase(),a=t.toLowerCase();let l=0;for(let i=0;i<s.length&&l<a.length;i++)s[i]===a[l]&&l++;return l===a.length}function We({components:r,selectedId:t,searchQuery:s,onSelect:a,collapsed:l,onToggleCollapse:i}){const[d,x]=o.useState(new Set(["all"])),u=o.useMemo(()=>{const c=s.trim();return c?r.filter(m=>ee(m.name,c)||ee(m.filePath,c)||ee(m.folder,c)):r},[r,s]),n=o.useMemo(()=>Me(u),[u]),f=c=>{x(m=>{const g=new Set(m);return g.has(c)?g.delete(c):g.add(c),g})};return o.useMemo(()=>{x(c=>{const m=new Set(c);for(const[g,y]of n)(y.some(N=>N.id===t)||s)&&m.add(g);return m})},[t,s,n]),l?e.jsx("div",{className:"flex flex-col items-center py-2 border-r shrink-0",style:{width:40,borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("button",{onClick:i,title:"Expand sidebar",className:"w-7 h-7 rounded-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors mt-1","aria-label":"Expand sidebar",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})})})}):e.jsxs("aside",{className:"flex flex-col border-r shrink-0 overflow-hidden",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center justify-between px-3 h-9 border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsxs("span",{className:"text-xs font-medium uppercase tracking-wider",style:{color:"var(--text-tertiary)"},children:["Components (",u.length,")"]}),e.jsx("button",{onClick:i,title:"Collapse sidebar",className:"w-5 h-5 rounded flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors","aria-label":"Collapse sidebar",children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m15 18-6-6 6-6"})})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto py-1",children:[u.length===0&&e.jsxs("div",{className:"px-3 py-4 text-center",children:[e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:s?"No components match your search.":"No components detected."}),!s&&e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"Make sure your .tsx/.jsx files export React components."})]}),Array.from(n.entries()).map(([c,m])=>e.jsx($e,{folder:c,components:m,selectedId:t,isExpanded:d.has(c),onToggle:()=>f(c),onSelect:a},c))]})]})}function $e({folder:r,components:t,selectedId:s,isExpanded:a,onToggle:l,onSelect:i}){const d=r==="."?"(root)":r;return e.jsxs("div",{children:[e.jsxs("button",{onClick:l,className:"w-full flex items-center gap-1.5 px-3 py-1 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:w("transition-transform shrink-0",a?"rotate-90":""),style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})}),e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"currentColor",className:"shrink-0",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"M20 7H4C2.9 7 2 7.9 2 9v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM4 5h7l2 2h7c1.1 0 2 .9 2 2H4V5z"})}),e.jsx("span",{className:"text-xs truncate",style:{color:"var(--text-secondary)"},title:d,children:d}),e.jsx("span",{className:"ml-auto text-xs shrink-0",style:{color:"var(--text-tertiary)"},children:t.length})]}),a&&e.jsx("div",{children:t.map(x=>e.jsx(Be,{component:x,isSelected:x.id===s,onSelect:()=>i(x)},x.id))})]})}function Be({component:r,isSelected:t,onSelect:s}){return e.jsxs("button",{onClick:s,className:w("w-full flex items-center gap-2 pl-8 pr-3 py-1.5 text-left transition-colors text-xs group",t?"bg-indigo-50 dark:bg-indigo-950/50":"hover:bg-gray-50 dark:hover:bg-gray-800/50"),title:r.filePath,"aria-current":t?"page":void 0,children:[e.jsx("span",{className:w("w-4 h-4 rounded flex items-center justify-center shrink-0 text-[9px] font-bold",t?"bg-indigo-500 text-white":"bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400"),"aria-hidden":!0,children:r.name[0]}),e.jsx("span",{className:w("truncate flex-1",t?"text-indigo-700 dark:text-indigo-300 font-medium":"text-gray-700 dark:text-gray-300"),children:r.name}),!r.isDefault&&e.jsx("span",{className:"text-[10px] shrink-0 px-1 rounded",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},title:`Named export: ${r.exportName}`,children:r.exportName})]})}const te={mobile:375,tablet:768,desktop:1280,custom:0},ze=[{key:"mobile",icon:"📱",label:"Mobile (375px)"},{key:"tablet",icon:"💻",label:"Tablet (768px)"},{key:"desktop",icon:"🖥",label:"Desktop (1280px)"}];function He({viewport:r,customWidth:t,onViewportChange:s,theme:a,onThemeChange:l,isDiffMode:i,onToggleDiff:d,selectedComponent:x,hasRootLayout:u,fullContextMode:n,onToggleFullContext:f}){const[c,m]=o.useState(!1),[g,y]=o.useState(""),N=r==="custom"?t:te[r];return e.jsxs("div",{className:"flex items-center gap-2 px-3 h-10 border-b shrink-0 flex-wrap",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:ze.map(({key:p,icon:b,label:E})=>e.jsx("button",{onClick:()=>s(p),title:E,className:w("px-2 h-6 rounded text-xs transition-colors flex items-center gap-1",r===p?"bg-white dark:bg-gray-700 shadow-sm text-indigo-600 dark:text-indigo-400 font-medium":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:e.jsx("span",{className:"text-sm leading-none",children:b})},p))}),e.jsx("div",{className:"flex items-center gap-1 px-2 h-6 rounded-md cursor-pointer select-none",style:{background:"var(--surface-overlay)",color:"var(--text-secondary)",fontSize:11,minWidth:64},title:"Click to set custom width",onClick:()=>{m(!0),y(String(N))},children:c?e.jsx("input",{autoFocus:!0,type:"number",value:g,onChange:p=>y(p.target.value),onBlur:()=>{const p=parseInt(g,10);!isNaN(p)&&p>0&&s("custom",p),m(!1)},onKeyDown:p=>{if(p.key==="Enter"){const b=parseInt(g,10);!isNaN(b)&&b>0&&s("custom",b),m(!1)}p.key==="Escape"&&m(!1)},className:"w-16 bg-transparent border-none outline-none text-xs",style:{color:"var(--text-primary)"},onClick:p=>p.stopPropagation()}):e.jsxs("span",{className:"font-mono",children:[N,"px"]})}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:["light","dark"].map(p=>e.jsx("button",{onClick:()=>l(p),className:w("px-2.5 h-6 rounded text-xs capitalize transition-colors",a===p?"bg-white dark:bg-gray-700 shadow-sm font-medium text-indigo-600 dark:text-indigo-400":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:p},p))}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:u?f:void 0,disabled:!u,className:w("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",u?n?"bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300":"opacity-40 cursor-not-allowed text-gray-400 dark:text-gray-600"),title:u?n?"Full App Context — click to switch to Isolated Mode":"Isolated Mode — click to enable Full App Context (wraps in your root layout/providers)":"No root layout detected (app/layout.tsx, pages/_app.tsx, or src/App.tsx)",children:[e.jsx("span",{className:"text-sm leading-none","aria-hidden":!0,children:u?n?"🟣":"🟢":"○"}),n?"Full Context":"Isolated"]}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),x&&e.jsxs("button",{onClick:d,className:w("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",i?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"),title:i?"Exit compare mode":"Compare two variants",children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("rect",{x:"3",y:"3",width:"7",height:"18",rx:"1"}),e.jsx("rect",{x:"14",y:"3",width:"7",height:"18",rx:"1"})]}),i?"Exit Compare":"Compare"]})]})}function Ve({filePath:r,exportName:t,props:s,theme:a,viewport:l,customWidth:i,fullContextMode:d}){const x=o.useRef(null),[u,n]=o.useState("idle"),[f,c]=o.useState(null),[m,g]=o.useState(null),y=o.useRef(null),N=l==="custom"?i:te[l],p=r&&t?fe(r,t,a,d):null;o.useEffect(()=>{const F=P=>{if(x.current&&P.source!==x.current.contentWindow)return;const v=P.data;v.type==="FRAME_READY"&&(n("loading"),g(null),b({type:"UPDATE_PROPS",props:s}),b({type:"SET_THEME",theme:a})),v.type==="RENDER_SUCCESS"&&(n("ready"),c(null)),v.type==="RENDER_ERROR"&&(n("error"),c({message:v.message,stack:v.stack})),v.type==="FULLCONTEXT_FALLBACK"&&g(v.reason),v.type==="FULLCONTEXT_READY"&&g(null)};return window.addEventListener("message",F),()=>window.removeEventListener("message",F)},[s,a]);const b=o.useCallback(F=>{var P,v;(v=(P=x.current)==null?void 0:P.contentWindow)==null||v.postMessage(F,"*")},[]),E=o.useRef(s),R=o.useRef(a);return o.useEffect(()=>{u!=="ready"&&u!=="loading"||E.current!==s&&(E.current=s,b({type:"UPDATE_PROPS",props:s}))},[s,u,b]),o.useEffect(()=>{u!=="ready"&&u!=="loading"||R.current!==a&&(R.current=a,b({type:"SET_THEME",theme:a}))},[a,u,b]),o.useEffect(()=>{p!==y.current&&(y.current=p,n(p?"loading":"idle"),c(null),g(null))},[p]),p?e.jsxs("div",{className:"flex-1 relative overflow-hidden flex items-start justify-center p-6",style:{background:"var(--surface-raised)"},children:[u==="loading"&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10 pointer-events-none",children:e.jsx("div",{className:"w-5 h-5 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin opacity-70"})}),u==="error"&&f&&e.jsx("div",{className:"absolute inset-0 flex items-start justify-center pt-8 z-20 px-6 pointer-events-none",children:e.jsxs("div",{className:"w-full max-w-lg rounded-xl border p-5 shadow-lg pointer-events-auto",style:{background:"var(--surface)",borderColor:"#fca5a5"},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx("span",{className:"text-red-500 text-lg",children:"⚠"}),e.jsx("span",{className:"text-sm font-semibold text-red-600 dark:text-red-400",children:"Component Error"})]}),e.jsx("pre",{className:"text-xs overflow-auto whitespace-pre-wrap break-words rounded p-3",style:{background:"#fef2f2",color:"#dc2626",maxHeight:200,fontFamily:"ui-monospace, monospace"},children:f.message}),f.stack&&e.jsxs("details",{className:"mt-2",children:[e.jsx("summary",{className:"text-xs cursor-pointer",style:{color:"var(--text-tertiary)"},children:"Stack trace"}),e.jsx("pre",{className:"text-xs mt-1 overflow-auto rounded p-2",style:{background:"var(--surface-raised)",color:"var(--text-secondary)",maxHeight:150,fontFamily:"ui-monospace, monospace"},children:f.stack})]})]})}),e.jsxs("div",{className:w("relative transition-all duration-200 shadow-md rounded-lg overflow-hidden",u==="loading"?"opacity-50":"opacity-100"),style:{width:N,maxWidth:"100%",minHeight:200,background:a==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[d&&m&&e.jsxs("div",{className:"absolute top-0 left-0 right-0 px-3 py-1 text-[10px] z-10 flex items-center gap-1.5",style:{background:"#fef9c3",color:"#92400e",borderBottom:"1px solid #fde68a"},title:`Full App Context failed to load: ${m}`,children:[e.jsx("span",{children:"⚠"}),e.jsx("span",{className:"font-medium",children:"Isolated fallback"}),e.jsx("span",{className:"opacity-70 truncate",children:m})]}),e.jsxs("div",{className:"absolute top-0 right-0 px-2 py-0.5 text-[10px] rounded-bl-md z-10 font-mono select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:[N,"px"]}),e.jsx("iframe",{ref:x,src:p,title:"Component preview",className:"w-full border-none",style:{height:Math.max(300,600),display:"block",colorScheme:a},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})]}):e.jsx("div",{className:"flex-1 flex items-center justify-center animate-fade-in",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"text-5xl mb-4 opacity-30 select-none",children:"⚡"}),e.jsx("p",{className:"text-sm font-medium",style:{color:"var(--text-secondary)"},children:"Select a component from the sidebar"}),e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"peekr auto-detects your React components"})]})})}function me({props:r,values:t,onChange:s,onPropsReset:a,loading:l,componentName:i}){return i?l?e.jsxs("div",{className:"flex items-center justify-center h-full gap-2",children:[e.jsx("div",{className:"w-4 h-4 border border-indigo-400 border-t-transparent rounded-full animate-spin"}),e.jsx("span",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Parsing props..."})]}):r.length===0?e.jsx(tt,{componentName:i,onPropsReset:a}):e.jsx("div",{className:"overflow-y-auto h-full",children:e.jsxs("table",{className:"w-full border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b",style:{borderColor:"var(--border)"},children:[e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)",width:"35%"},children:"Prop"}),e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)"},children:"Control"})]})}),e.jsx("tbody",{children:r.map(d=>e.jsx(qe,{prop:d,value:t[d.name],onChange:x=>s(d.name,x)},d.name))})]})}):e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Select a component to see its props"})})}function qe({prop:r,value:t,onChange:s}){return e.jsxs("tr",{className:"border-b hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors group",style:{borderColor:"var(--border)"},children:[e.jsxs("td",{className:"px-3 py-2 align-middle",style:{width:"35%"},children:[e.jsx("div",{className:"flex items-center gap-1.5",children:e.jsxs("span",{className:"text-xs font-medium font-mono truncate",style:{color:"var(--text-primary)"},title:r.description??r.name,children:[r.name,r.required&&e.jsx("span",{className:"text-red-400 ml-0.5",title:"Required",children:"*"})]})}),e.jsx("div",{className:"flex items-center gap-1 mt-0.5",children:e.jsx(Ye,{type:r.type})}),r.description&&e.jsx("p",{className:"text-[10px] mt-0.5 leading-relaxed",style:{color:"var(--text-tertiary)"},children:r.description})]}),e.jsx("td",{className:"px-3 py-2 align-middle",children:e.jsx(Je,{prop:r,value:t,onChange:s})})]})}function Ye({type:r}){const t={string:"bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400",number:"bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400",boolean:"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400",select:"bg-purple-50 text-purple-600 dark:bg-purple-950 dark:text-purple-400",function:"bg-orange-50 text-orange-600 dark:bg-orange-950 dark:text-orange-400",node:"bg-pink-50 text-pink-600 dark:bg-pink-950 dark:text-pink-400",color:"bg-teal-50 text-teal-600 dark:bg-teal-950 dark:text-teal-400",unknown:"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"};return e.jsx("span",{className:w("px-1.5 py-0.5 rounded text-[10px] font-mono",t[r]??t.unknown),children:r})}function Je({prop:r,value:t,onChange:s}){switch(r.type){case"boolean":return e.jsx(Xe,{value:t,onChange:s});case"number":return e.jsx(Ke,{value:t,onChange:s});case"select":return e.jsx(Ge,{options:r.options??[],value:t,onChange:s});case"function":return e.jsx(Ze,{name:r.name,onChange:s});case"node":return e.jsx(Qe,{value:t,onChange:s});case"color":return e.jsx(et,{value:t,onChange:s});case"string":default:return e.jsx(pe,{value:t,onChange:s})}}function pe({value:r,onChange:t}){return e.jsx("input",{type:"text",className:"peek-input",value:r??"",onChange:s=>t(s.target.value),placeholder:"string value"})}function Ke({value:r,onChange:t}){return e.jsx("input",{type:"number",className:"peek-input w-24",value:r??0,onChange:s=>t(parseFloat(s.target.value)||0)})}function Xe({value:r,onChange:t}){const s=!!r;return e.jsx("button",{onClick:()=>t(!s),className:w("relative inline-flex items-center w-9 h-5 rounded-full transition-colors focus:outline-none","focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1",s?"bg-indigo-500":"bg-gray-300 dark:bg-gray-600"),role:"switch","aria-checked":s,children:e.jsx("span",{className:w("inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transform transition-transform",s?"translate-x-4":"translate-x-0.5")})})}function Ge({options:r,value:t,onChange:s}){return r.length===0?e.jsx(pe,{value:t,onChange:s}):e.jsx("select",{className:"peek-select",value:t??r[0]??"",onChange:a=>s(a.target.value),children:r.map(a=>e.jsx("option",{value:a,children:a},a))})}function Ze({name:r,onChange:t}){const s=o.useRef(0);return e.jsxs("button",{onClick:()=>{s.current++,console.log(`[peekr] Fired: ${r}() (call #${s.current})`),t(()=>{console.log(`[peekr] ${r}() fired`)})},className:"flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors bg-orange-50 text-orange-700 hover:bg-orange-100 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("path",{d:"M8 5v14l11-7z"})}),"Fire Event"]})}function Qe({value:r,onChange:t}){return e.jsx("textarea",{className:"peek-input resize-none",rows:2,value:r??"",onChange:s=>t(s.target.value),placeholder:"React node content (text or HTML)",style:{fontFamily:"ui-monospace, monospace",fontSize:11}})}function et({value:r,onChange:t}){return e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",className:"w-7 h-7 rounded cursor-pointer border border-gray-200 dark:border-gray-700 p-0.5 bg-transparent",value:r??"#6366f1",onChange:s=>t(s.target.value)}),e.jsx("input",{type:"text",className:"peek-input w-24 font-mono text-xs",value:r??"#6366f1",onChange:s=>t(s.target.value),placeholder:"#000000"})]})}function tt({componentName:r,onPropsReset:t}){const[s,a]=o.useState("{}"),[l,i]=o.useState(null),[d,x]=o.useState(!0);o.useEffect(()=>{a("{}"),i(null),x(!0),t==null||t({})},[r]);const u=n=>{const f=n.target.value;if(a(f),f.trim()===""||f.trim()==="{}"){i(null),x(!0),t==null||t({});return}try{const c=JSON.parse(f);if(typeof c!="object"||Array.isArray(c)||c===null){i("Must be a JSON object { }"),x(!1);return}const m={};for(const[g,y]of Object.entries(c))typeof y=="string"&&(y.trim().startsWith("() =>")||y.trim().startsWith("function"))?m[g]=()=>{}:m[g]=y;i(null),x(!0),t==null||t(m)}catch(c){i(c.message),x(!1)}};return e.jsxs("div",{className:"flex flex-col h-full p-3 gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:"Raw props (JSON)"}),e.jsx("span",{className:w("text-[10px] px-1.5 py-0.5 rounded font-mono",d?"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400":"bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-400"),children:d?"valid":"invalid"}),e.jsx("span",{className:"text-[10px] ml-auto",style:{color:"var(--text-tertiary)"},children:"No TS types found"})]}),e.jsx("textarea",{className:"flex-1 text-xs rounded-md p-2 resize-none",style:{background:"var(--surface-overlay)",color:"var(--text-primary)",border:`1px solid ${l?"#f87171":"var(--border)"}`,outline:"none",fontFamily:"ui-monospace, monospace",lineHeight:1.6,minHeight:80},value:s,onChange:u,spellCheck:!1,placeholder:`{
+  "label": "Click me",
+  "disabled": false,
+  "onClick": "() => {}"
+}`}),l&&e.jsx("p",{className:"text-[10px] leading-relaxed",style:{color:"#f87171"},children:l}),e.jsxs("p",{className:"text-[10px] leading-relaxed",style:{color:"var(--text-tertiary)"},children:["Type props as JSON. Use ",e.jsxs("code",{style:{fontFamily:"ui-monospace, monospace"},children:['"() => ',"{}",'"']})," for callbacks. Add TypeScript types to get auto-generated controls."]})]})}const rt="modulepreload",st=function(r){return"/__peek/app/"+r},oe={},le=function(t,s,a){let l=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const d=document.querySelector("meta[property=csp-nonce]"),x=(d==null?void 0:d.nonce)||(d==null?void 0:d.getAttribute("nonce"));l=Promise.allSettled(s.map(u=>{if(u=st(u),u in oe)return;oe[u]=!0;const n=u.endsWith(".css"),f=n?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${u}"]${f}`))return;const c=document.createElement("link");if(c.rel=n?"stylesheet":rt,n||(c.as="script"),c.crossOrigin="",c.href=u,x&&c.setAttribute("nonce",x),document.head.appendChild(c),n)return new Promise((m,g)=>{c.addEventListener("load",m),c.addEventListener("error",()=>g(new Error(`Unable to preload CSS for ${u}`)))})}))}function i(d){const x=new Event("vite:preloadError",{cancelable:!0});if(x.payload=d,window.dispatchEvent(x),!x.defaultPrevented)throw d}return l.then(d=>{for(const x of d||[])x.status==="rejected"&&i(x.reason);return t().catch(i)})};function at({filePath:r,exportName:t,propDefs:s,propsLoading:a,defaultProps:l,theme:i,viewport:d,customWidth:x}){const[u,n]=o.useState(l),[f,c]=o.useState(l),[m,g]=o.useState(!1),[y,N]=o.useState(!1),[p,b]=o.useState(null),E=o.useRef(null),R=o.useRef(null),F=o.useRef("loading"),P=o.useRef("loading"),v=d==="custom"?x:te[d],$=fe(r,t,i),_=o.useCallback((L,C)=>{var k,S;(S=(k=L.current)==null?void 0:k.contentWindow)==null||S.postMessage(C,"*")},[]);o.useEffect(()=>{const L=C=>{var S,D;const k=C.data;k!=null&&k.type&&(C.source===((S=E.current)==null?void 0:S.contentWindow)&&(k.type==="FRAME_READY"&&(_(E,{type:"UPDATE_PROPS",props:u}),_(E,{type:"SET_THEME",theme:i})),k.type==="RENDER_SUCCESS"&&(F.current="ready")),C.source===((D=R.current)==null?void 0:D.contentWindow)&&(k.type==="FRAME_READY"&&(_(R,{type:"UPDATE_PROPS",props:f}),_(R,{type:"SET_THEME",theme:i})),k.type==="RENDER_SUCCESS"&&(P.current="ready")))};return window.addEventListener("message",L),()=>window.removeEventListener("message",L)},[u,f,i,_]),o.useEffect(()=>{_(E,{type:"UPDATE_PROPS",props:u})},[u,_]),o.useEffect(()=>{_(R,{type:"UPDATE_PROPS",props:f})},[f,_]),o.useEffect(()=>{n(l),c(l)},[l]);const J=o.useCallback(async()=>{var L,C,k,S;N(!0),b(null);try{const D=(await le(async()=>{const{default:I}=await import("./html2canvas.esm-CBrSDip1.js");return{default:I}},[])).default,B=(await le(async()=>{const{default:I}=await import("./index-Ch1Vufae.js").then(Q=>Q.i);return{default:I}},__vite__mapDeps([0,1]))).default,V=(C=(L=E.current)==null?void 0:L.contentDocument)==null?void 0:C.body,z=(S=(k=R.current)==null?void 0:k.contentDocument)==null?void 0:S.body;if(!V||!z){N(!1);return}const[M,T]=await Promise.all([D(V,{logging:!1,useCORS:!0}),D(z,{logging:!1,useCORS:!0})]),H=Math.max(M.width,T.width),O=Math.max(M.height,T.height),K=M.getContext("2d"),X=T.getContext("2d"),G=K.getImageData(0,0,M.width,M.height),Z=X.getImageData(0,0,T.width,T.height),h=document.createElement("canvas");h.width=H,h.height=O;const j=h.getContext("2d"),U=j.createImageData(H,O),A=B(G.data,Z.data,U.data,H,O,{threshold:.1});j.putImageData(U,0,0),b(h.toDataURL())}catch(D){console.error("[peekr] Diff computation failed:",D)}finally{N(!1)}},[]);return e.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-3 px-4 h-10 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsxs("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:["Comparing: ",e.jsx("span",{style:{color:"var(--accent)"},children:t==="default"?r.split("/").pop():t})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:()=>{g(!m),m||J()},disabled:y,className:w("flex items-center gap-1.5 px-3 h-7 rounded-md text-xs font-medium transition-colors",m&&p?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"),children:[y?e.jsx("span",{className:"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin"}):e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("path",{d:"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"})]}),m&&p?"Hide Diff":"Show Visual Diff"]})]}),e.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[e.jsx(ie,{label:"Variant A",iframeRef:E,frameUrl:$,props:u,propDefs:s,propsLoading:a,onPropsChange:n,viewportWidth:v,theme:i,diffOverlay:m&&p?p:null}),e.jsx("div",{className:"w-px shrink-0",style:{background:"var(--border)"}}),e.jsx(ie,{label:"Variant B",iframeRef:R,frameUrl:`${$}&_r=1`,props:f,propDefs:s,propsLoading:a,onPropsChange:c,viewportWidth:v,theme:i,diffOverlay:null})]})]})}function ie({label:r,iframeRef:t,frameUrl:s,props:a,propDefs:l,propsLoading:i,onPropsChange:d,viewportWidth:x,theme:u,diffOverlay:n}){return e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("span",{className:"text-xs font-semibold",style:{color:"var(--text-secondary)"},children:r})}),e.jsx("div",{className:"flex-1 flex items-start justify-center p-4 overflow-auto",style:{background:"var(--surface-raised)"},children:e.jsxs("div",{className:"relative shadow-md rounded-lg overflow-hidden",style:{width:Math.min(x,600),maxWidth:"100%",background:u==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[n&&e.jsx("img",{src:n,alt:"Visual diff",className:"absolute inset-0 w-full h-full object-contain z-10 pointer-events-none mix-blend-difference opacity-80"}),e.jsx("iframe",{ref:t,src:s,title:`${r} preview`,className:"w-full border-none",style:{height:400,display:"block"},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})}),e.jsxs("div",{className:"border-t shrink-0",style:{borderColor:"var(--border)",height:200,background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"})}),e.jsx("div",{style:{height:"calc(100% - 32px)",overflow:"auto"},children:e.jsx(me,{props:l,values:a,onChange:(f,c)=>d({...a,[f]:c}),loading:i,componentName:r})})]})]})}class nt extends ce.Component{constructor(){super(...arguments);re(this,"state",{error:null})}static getDerivedStateFromError(s){return{error:s}}componentDidCatch(s,a){console.error("[peekr] Uncaught error:",s,a)}render(){return this.state.error?this.props.fallback??e.jsx("div",{className:"flex items-center justify-center h-screen bg-red-50 dark:bg-red-950 p-8",children:e.jsxs("div",{className:"max-w-lg w-full bg-white dark:bg-gray-900 rounded-xl border border-red-200 dark:border-red-800 p-6 shadow-sm",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("span",{className:"text-2xl",children:"⚠️"}),e.jsx("h2",{className:"text-base font-semibold text-red-700 dark:text-red-400",children:"Something went wrong"})]}),e.jsx("pre",{className:"text-xs text-red-600 dark:text-red-300 bg-red-50 dark:bg-red-900/30 rounded p-3 overflow-auto whitespace-pre-wrap break-words",children:this.state.error.message}),e.jsx("button",{onClick:()=>this.setState({error:null}),className:"mt-4 px-3 py-1.5 text-xs bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 text-red-700 dark:text-red-300 rounded-md transition-colors",children:"Try again"})]})}):this.props.children}}function ot(){const{parseUrl:r,updateUrl:t,hydrateProps:s}=Ae(),a=r(),{components:l,loading:i,error:d}=Fe(),[x,u]=o.useState(null),[n,f]=o.useState(null);o.useEffect(()=>{if(a.filePath&&l.length>0&&!n){const h=l.find(j=>j.filePath===a.filePath&&j.exportName===a.exportName);h&&(u(h.id),f(h))}},[l]);const{props:c,loading:m}=Ue((n==null?void 0:n.filePath)??null,(n==null?void 0:n.exportName)??null),[g,y]=o.useState({}),N=o.useRef(null);o.useEffect(()=>{if(!n||m||N.current===n.filePath)return;N.current=n.filePath;const h=new URLSearchParams(window.location.search),j=s(h,c),U=ne(c,h);y({...U,...j})},[c,n,m,s]);const p=o.useCallback((h,j)=>{y(U=>{const A={...U,[h]:j};return n&&t(n.filePath,n.exportName,A,c),A})},[n,c,t]),b=o.useCallback(h=>{y(h),n&&t(n.filePath,n.exportName,h,c)},[n,c,t]),E=o.useCallback(h=>{u(h.id),f(h),y({}),N.current=null,t(h.filePath,h.exportName,{})},[t]),[R,F]=o.useState(null),[P,v]=o.useState(!1);o.useEffect(()=>{Te().then(F)},[]),o.useEffect(()=>{},[]);const[$,_]=o.useState(""),[J,L]=o.useState(!1),[C,k]=o.useState("light"),[S,D]=o.useState("desktop"),[B,V]=o.useState(1280),[z,M]=o.useState(!1),[T,H]=o.useState(280),O=o.useRef(!1);o.useEffect(()=>{document.documentElement.className=C==="dark"?"dark":""},[C]);const K=o.useCallback(()=>{k(h=>h==="dark"?"light":"dark")},[]),X=o.useCallback((h,j)=>{D(h),h==="custom"&&j&&V(j)},[]),G=o.useCallback(h=>{h.preventDefault(),O.current=!0;const j=h.clientY,U=T,A=Q=>{if(!O.current)return;const ge=j-Q.clientY;H(Math.max(120,Math.min(600,U+ge)))},I=()=>{O.current=!1,document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",I)};document.addEventListener("mousemove",A),document.addEventListener("mouseup",I)},[T]);o.useEffect(()=>{},[n]);const Z=n?`${window.location.origin}${window.location.pathname}#/${n.filePath}?export=${n.exportName}${Object.entries(g).filter(([,h])=>h!==void 0&&typeof h!="function").map(([h,j])=>`&${encodeURIComponent(h)}=${encodeURIComponent(String(j))}`).join("")}`:null;return e.jsx(nt,{children:e.jsxs("div",{className:"h-screen flex flex-col overflow-hidden",style:{background:"var(--surface)"},children:[e.jsx(Ie,{searchQuery:$,onSearch:_,theme:C,onToggleTheme:K,shareUrl:Z}),e.jsxs("div",{className:"flex flex-1 min-h-0 overflow-hidden",children:[i&&l.length===0?e.jsx(lt,{}):d?e.jsx(it,{error:d}):e.jsx(We,{components:l,selectedId:x,searchQuery:$,onSelect:E,collapsed:J,onToggleCollapse:()=>L(h=>!h)}),e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx(He,{viewport:S,customWidth:B,onViewportChange:X,theme:C,onThemeChange:k,isDiffMode:z,onToggleDiff:()=>M(h=>!h),selectedComponent:(n==null?void 0:n.name)??null,hasRootLayout:R!==null,fullContextMode:P,onToggleFullContext:()=>v(h=>!h)}),z&&n?e.jsx(at,{filePath:n.filePath,exportName:n.exportName,propDefs:c,propsLoading:m,defaultProps:g,theme:C,viewport:S,customWidth:B}):e.jsxs("div",{className:"flex-1 flex flex-col min-h-0 overflow-hidden",children:[e.jsx("div",{className:"flex-1 min-h-0 overflow-hidden flex",children:e.jsx(Ve,{filePath:(n==null?void 0:n.filePath)??null,exportName:(n==null?void 0:n.exportName)??null,props:g,theme:C,viewport:S,customWidth:B,fullContextMode:P})}),n&&e.jsx("div",{onMouseDown:G,className:"resizer-handle h-1.5 shrink-0 transition-colors",style:{background:"var(--border)",cursor:"row-resize"},role:"separator","aria-label":"Resize props panel","aria-orientation":"horizontal"}),n&&e.jsxs("div",{className:"shrink-0 border-t overflow-hidden flex flex-col",style:{height:T,borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"}),c.length>0&&e.jsx("span",{className:"ml-2 text-xs px-1.5 rounded-full",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:c.length}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{onClick:()=>{const h=ne(c,new URLSearchParams);y(h),n&&t(n.filePath,n.exportName,h)},className:"text-xs px-2 h-5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",style:{color:"var(--text-tertiary)"},title:"Reset all props to defaults",children:"Reset"})]}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto",children:e.jsx(me,{props:c,values:g,onChange:p,onPropsReset:b,loading:m,componentName:(n==null?void 0:n.name)??null})})]})]})]})]})]})})}function lt(){return e.jsxs("div",{className:"flex flex-col border-r shrink-0",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-9 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("div",{className:"h-3 w-24 rounded animate-pulse",style:{background:"var(--surface-overlay)"}})}),e.jsx("div",{className:"p-3 space-y-2",children:Array.from({length:8}).map((r,t)=>e.jsx("div",{className:"h-6 rounded animate-pulse",style:{background:"var(--surface-overlay)",width:`${60+t%3*20}%`}},t))})]})}function it({error:r}){return e.jsxs("div",{className:"flex flex-col border-r shrink-0 p-3",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("p",{className:"text-xs text-red-500 font-medium mb-1",children:"Failed to load components"}),e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:r})]})}const ct=document.getElementById("root");xe(ct).render(e.jsx(ce.StrictMode,{children:e.jsx(we,{children:e.jsx(ot,{})})}));

package/app-dist/assets/index-BILhrFul.js

@@ -0,0 +1,14 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Ch1Vufae.js","assets/router-DSqugVLU.js"])))=>i.map(i=>d[i]);
+var ye=Object.defineProperty;var be=(r,t,s)=>t in r?ye(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s;var re=(r,t,s)=>be(r,typeof t!="symbol"?t+"":t,s);import{r as o,a as ve,u as ke,b as je,R as ce,H as we}from"./router-DSqugVLU.js";(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))a(l);new MutationObserver(l=>{for(const i of l)if(i.type==="childList")for(const d of i.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&a(d)}).observe(document,{childList:!0,subtree:!0});function s(l){const i={};return l.integrity&&(i.integrity=l.integrity),l.referrerPolicy&&(i.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?i.credentials="include":l.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function a(l){if(l.ep)return;l.ep=!0;const i=s(l);fetch(l.href,i)}})();var de={exports:{}},Y={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ne=o,Ce=Symbol.for("react.element"),Ee=Symbol.for("react.fragment"),Se=Object.prototype.hasOwnProperty,Re=Ne.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_e={key:!0,ref:!0,__self:!0,__source:!0};function ue(r,t,s){var a,l={},i=null,d=null;s!==void 0&&(i=""+s),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(d=t.ref);for(a in t)Se.call(t,a)&&!_e.hasOwnProperty(a)&&(l[a]=t[a]);if(r&&r.defaultProps)for(a in t=r.defaultProps,t)l[a]===void 0&&(l[a]=t[a]);return{$$typeof:Ce,type:r,key:i,ref:d,props:l,_owner:Re.current}}Y.Fragment=Ee;Y.jsx=ue;Y.jsxs=ue;de.exports=Y;var e=de.exports,xe,se=ve;xe=se.createRoot,se.hydrateRoot;const ae=new Map;let $=null;async function Pe(){return $||($=fetch("/__peek/components").then(r=>{if(!r.ok)throw new Error(`Failed to fetch components: ${r.status}`);return r.json()}).catch(r=>{throw $=null,r}),$)}function Le(){$=null}async function De(r,t){const s=`${r}::${t}`,a=ae.get(s);if(a)return a.promise;const l=fetch(`/__peek/types?file=${encodeURIComponent(r)}&export=${encodeURIComponent(t)}`).then(i=>{if(!i.ok)throw new Error(`Failed to fetch types: ${i.status}`);return i.json()}).catch(()=>[]);return ae.set(s,{promise:l,ts:Date.now()}),l}let q=null;async function Te(){return q||(q=fetch("/__peek/root-layout").then(r=>r.ok?r.json():null).catch(()=>null),q)}function Fe(){const[r,t]=o.useState([]),[s,a]=o.useState(!0),[l,i]=o.useState(null),d=o.useCallback(async(x=!1)=>{x&&Le(),a(!0),i(null);try{const u=await Pe();t(u)}catch(u){i(u.message??"Failed to load components")}finally{a(!1)}},[]);return o.useEffect(()=>{d()},[d]),{components:r,loading:s,error:l,refresh:()=>d(!0)}}function Ue(r,t){const[s,a]=o.useState([]),[l,i]=o.useState(!1),[d,x]=o.useState(null),u=o.useRef(0);return o.useEffect(()=>{if(!r||!t){a([]),i(!1),x(null);return}const n=++u.current;i(!0),x(null),De(r,t).then(f=>{u.current===n&&(a(f),x(null))}).catch(f=>{u.current===n&&(x(f.message??"Failed to parse prop types"),a([]))}).finally(()=>{u.current===n&&i(!1)})},[r,t]),{props:s,loading:l,error:d}}function Me(r){const t=new Map;for(const s of r){const a=s.folder||".",l=t.get(a)??[];l.push(s),t.set(a,l)}return t}function fe(r,t,s,a=!1){const l=new URLSearchParams({file:r,export:t,theme:s});return a&&l.set("fullContext","true"),`/__peek/frame?${l.toString()}`}function ne(r,t){const s={};for(const a of r)if(t.has(a.name)){const l=t.get(a.name);s[a.name]=he(l,a.type)}else a.defaultValue!==void 0?s[a.name]=a.defaultValue:s[a.name]=Oe(a.type,a.options);return s}function Oe(r,t){switch(r){case"boolean":return!1;case"number":return 0;case"string":return"";case"select":return(t==null?void 0:t[0])??"";case"node":return"";case"color":return"#6366f1";case"function":return;default:return}}function he(r,t){switch(t){case"boolean":return r==="true";case"number":return isNaN(Number(r))?0:Number(r);default:return r}}function w(...r){return r.filter(Boolean).join(" ")}function Ae(){const r=ke(),t=je(),s=o.useCallback(()=>{const i=t.pathname==="/"||t.pathname===""?null:t.pathname.slice(1),d=new URLSearchParams(t.search),x=d.get("export")??"default",u={};return d.forEach((n,f)=>{f!=="export"&&(u[f]=n)}),{filePath:i,exportName:x,props:u}},[t]),a=o.useCallback((i,d,x,u)=>{const n=new URLSearchParams;n.set("export",d);for(const[f,c]of Object.entries(x))c!=null&&typeof c!="function"&&n.set(f,String(c));r(`/${i}?${n.toString()}`,{replace:!0})},[r]),l=o.useCallback((i,d)=>{const x={};for(const u of d)i.has(u.name)&&(x[u.name]=he(i.get(u.name),u.type));return x},[]);return{parseUrl:s,updateUrl:a,hydrateProps:l}}function Ie({searchQuery:r,onSearch:t,theme:s,onToggleTheme:a,shareUrl:l}){const[i,d]=o.useState(!1),x=o.useRef(null);o.useEffect(()=>{const f=c=>{var m,g,y;(c.metaKey||c.ctrlKey)&&c.key==="k"&&(c.preventDefault(),(m=x.current)==null||m.focus(),(g=x.current)==null||g.select()),c.key==="Escape"&&document.activeElement===x.current&&(t(""),(y=x.current)==null||y.blur())};return document.addEventListener("keydown",f),()=>document.removeEventListener("keydown",f)},[t]);const u=o.useCallback(async()=>{const f=l??window.location.href;try{await navigator.clipboard.writeText(f),d(!0),setTimeout(()=>d(!1),2e3)}catch{const c=document.createElement("textarea");c.value=f,document.body.appendChild(c),c.select(),document.execCommand("copy"),document.body.removeChild(c),d(!0),setTimeout(()=>d(!1),2e3)}},[l]),n=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform);return e.jsxs("header",{className:"flex items-center gap-3 px-4 h-11 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center gap-2 shrink-0 select-none",children:[e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 32 32",fill:"none","aria-hidden":!0,children:[e.jsx("rect",{width:"32",height:"32",rx:"6",fill:"#6366f1"}),e.jsx("circle",{cx:"16",cy:"16",r:"4",fill:"white"}),e.jsx("path",{d:"M8 16c0-4.418 3.582-8 8-8s8 3.582 8 8",stroke:"white",strokeWidth:"2",strokeLinecap:"round",fill:"none"})]}),e.jsx("span",{className:"font-semibold text-sm",style:{color:"var(--text-primary)"},children:"peekr"})]}),e.jsxs("div",{className:"flex-1 max-w-xs relative",children:[e.jsxs("svg",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none",width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"m21 21-4.35-4.35"})]}),e.jsx("input",{ref:x,type:"text",placeholder:"Search components...",value:r,onChange:f=>t(f.target.value),className:"peek-input pl-8 pr-14 h-7 text-xs",style:{maxWidth:"100%"},"aria-label":"Search components"}),!r&&e.jsx("kbd",{className:"absolute right-2 top-1/2 -translate-y-1/2 text-[10px] px-1 py-0.5 rounded pointer-events-none select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)",border:"1px solid var(--border)",lineHeight:1},"aria-hidden":!0,children:n?"⌘K":"Ctrl+K"}),r&&e.jsx("button",{onClick:()=>t(""),className:"absolute right-2 top-1/2 -translate-y-1/2 text-xs",style:{color:"var(--text-tertiary)"},"aria-label":"Clear search",children:"✕"})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("button",{onClick:a,title:s==="dark"?"Switch to light mode":"Switch to dark mode",className:w("w-7 h-7 rounded-md flex items-center justify-center transition-colors text-base","hover:bg-gray-100 dark:hover:bg-gray-800"),"aria-label":"Toggle theme",children:s==="dark"?"☀️":"🌙"}),e.jsx("button",{onClick:u,title:"Copy shareable URL",className:w("flex items-center gap-1.5 px-2.5 h-7 rounded-md text-xs font-medium transition-colors",i?"bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300":"bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900"),"aria-label":"Copy shareable URL",children:i?e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"M20 6 9 17l-5-5"})}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e.jsx("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]}),"Share"]})})]})]})}function ee(r,t){if(!t)return!0;const s=r.toLowerCase(),a=t.toLowerCase();let l=0;for(let i=0;i<s.length&&l<a.length;i++)s[i]===a[l]&&l++;return l===a.length}function We({components:r,selectedId:t,searchQuery:s,onSelect:a,collapsed:l,onToggleCollapse:i}){const[d,x]=o.useState(new Set(["all"])),u=o.useMemo(()=>{const c=s.trim();return c?r.filter(m=>ee(m.name,c)||ee(m.filePath,c)||ee(m.folder,c)):r},[r,s]),n=o.useMemo(()=>Me(u),[u]),f=c=>{x(m=>{const g=new Set(m);return g.has(c)?g.delete(c):g.add(c),g})};return o.useMemo(()=>{x(c=>{const m=new Set(c);for(const[g,y]of n)(y.some(N=>N.id===t)||s)&&m.add(g);return m})},[t,s,n]),l?e.jsx("div",{className:"flex flex-col items-center py-2 border-r shrink-0",style:{width:40,borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("button",{onClick:i,title:"Expand sidebar",className:"w-7 h-7 rounded-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors mt-1","aria-label":"Expand sidebar",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})})})}):e.jsxs("aside",{className:"flex flex-col border-r shrink-0 overflow-hidden",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"flex items-center justify-between px-3 h-9 border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsxs("span",{className:"text-xs font-medium uppercase tracking-wider",style:{color:"var(--text-tertiary)"},children:["Components (",u.length,")"]}),e.jsx("button",{onClick:i,title:"Collapse sidebar",className:"w-5 h-5 rounded flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors","aria-label":"Collapse sidebar",children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:e.jsx("path",{d:"m15 18-6-6 6-6"})})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto py-1",children:[u.length===0&&e.jsxs("div",{className:"px-3 py-4 text-center",children:[e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:s?"No components match your search.":"No components detected."}),!s&&e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"Make sure your .tsx/.jsx files export React components."})]}),Array.from(n.entries()).map(([c,m])=>e.jsx($e,{folder:c,components:m,selectedId:t,isExpanded:d.has(c),onToggle:()=>f(c),onSelect:a},c))]})]})}function $e({folder:r,components:t,selectedId:s,isExpanded:a,onToggle:l,onSelect:i}){const d=r==="."?"(root)":r;return e.jsxs("div",{children:[e.jsxs("button",{onClick:l,className:"w-full flex items-center gap-1.5 px-3 py-1 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:w("transition-transform shrink-0",a?"rotate-90":""),style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"m9 18 6-6-6-6"})}),e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"currentColor",className:"shrink-0",style:{color:"var(--text-tertiary)"},"aria-hidden":!0,children:e.jsx("path",{d:"M20 7H4C2.9 7 2 7.9 2 9v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM4 5h7l2 2h7c1.1 0 2 .9 2 2H4V5z"})}),e.jsx("span",{className:"text-xs truncate",style:{color:"var(--text-secondary)"},title:d,children:d}),e.jsx("span",{className:"ml-auto text-xs shrink-0",style:{color:"var(--text-tertiary)"},children:t.length})]}),a&&e.jsx("div",{children:t.map(x=>e.jsx(Be,{component:x,isSelected:x.id===s,onSelect:()=>i(x)},x.id))})]})}function Be({component:r,isSelected:t,onSelect:s}){return e.jsxs("button",{onClick:s,className:w("w-full flex items-center gap-2 pl-8 pr-3 py-1.5 text-left transition-colors text-xs group",t?"bg-indigo-50 dark:bg-indigo-950/50":"hover:bg-gray-50 dark:hover:bg-gray-800/50"),title:r.filePath,"aria-current":t?"page":void 0,children:[e.jsx("span",{className:w("w-4 h-4 rounded flex items-center justify-center shrink-0 text-[9px] font-bold",t?"bg-indigo-500 text-white":"bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400"),"aria-hidden":!0,children:r.name[0]}),e.jsx("span",{className:w("truncate flex-1",t?"text-indigo-700 dark:text-indigo-300 font-medium":"text-gray-700 dark:text-gray-300"),children:r.name}),!r.isDefault&&e.jsx("span",{className:"text-[10px] shrink-0 px-1 rounded",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},title:`Named export: ${r.exportName}`,children:r.exportName})]})}const te={mobile:375,tablet:768,desktop:1280,custom:0},ze=[{key:"mobile",icon:"📱",label:"Mobile (375px)"},{key:"tablet",icon:"💻",label:"Tablet (768px)"},{key:"desktop",icon:"🖥",label:"Desktop (1280px)"}];function He({viewport:r,customWidth:t,onViewportChange:s,theme:a,onThemeChange:l,isDiffMode:i,onToggleDiff:d,selectedComponent:x,hasRootLayout:u,fullContextMode:n,onToggleFullContext:f}){const[c,m]=o.useState(!1),[g,y]=o.useState(""),N=r==="custom"?t:te[r];return e.jsxs("div",{className:"flex items-center gap-2 px-3 h-10 border-b shrink-0 flex-wrap",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:ze.map(({key:p,icon:R,label:v})=>e.jsx("button",{onClick:()=>s(p),title:v,className:w("px-2 h-6 rounded text-xs transition-colors flex items-center gap-1",r===p?"bg-white dark:bg-gray-700 shadow-sm text-indigo-600 dark:text-indigo-400 font-medium":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:e.jsx("span",{className:"text-sm leading-none",children:R})},p))}),e.jsx("div",{className:"flex items-center gap-1 px-2 h-6 rounded-md cursor-pointer select-none",style:{background:"var(--surface-overlay)",color:"var(--text-secondary)",fontSize:11,minWidth:64},title:"Click to set custom width",onClick:()=>{m(!0),y(String(N))},children:c?e.jsx("input",{autoFocus:!0,type:"number",value:g,onChange:p=>y(p.target.value),onBlur:()=>{const p=parseInt(g,10);!isNaN(p)&&p>0&&s("custom",p),m(!1)},onKeyDown:p=>{if(p.key==="Enter"){const R=parseInt(g,10);!isNaN(R)&&R>0&&s("custom",R),m(!1)}p.key==="Escape"&&m(!1)},className:"w-16 bg-transparent border-none outline-none text-xs",style:{color:"var(--text-primary)"},onClick:p=>p.stopPropagation()}):e.jsxs("span",{className:"font-mono",children:[N,"px"]})}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),e.jsx("div",{className:"flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5",children:["light","dark"].map(p=>e.jsx("button",{onClick:()=>l(p),className:w("px-2.5 h-6 rounded text-xs capitalize transition-colors",a===p?"bg-white dark:bg-gray-700 shadow-sm font-medium text-indigo-600 dark:text-indigo-400":"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"),children:p},p))}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:u?f:void 0,disabled:!u,className:w("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",u?n?"bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300":"opacity-40 cursor-not-allowed text-gray-400 dark:text-gray-600"),title:u?n?"Full App Context — click to switch to Isolated Mode":"Isolated Mode — click to enable Full App Context (wraps in your root layout/providers)":"No root layout detected (app/layout.tsx, pages/_app.tsx, or src/App.tsx)",children:[e.jsx("span",{className:"text-sm leading-none","aria-hidden":!0,children:u?n?"🟣":"🟢":"○"}),n?"Full Context":"Isolated"]}),e.jsx("div",{className:"w-px h-4 bg-gray-200 dark:bg-gray-700"}),x&&e.jsxs("button",{onClick:d,className:w("flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors",i?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"),title:i?"Exit compare mode":"Compare two variants",children:[e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("rect",{x:"3",y:"3",width:"7",height:"18",rx:"1"}),e.jsx("rect",{x:"14",y:"3",width:"7",height:"18",rx:"1"})]}),i?"Exit Compare":"Compare"]})]})}function Ve({filePath:r,exportName:t,props:s,theme:a,viewport:l,customWidth:i,fullContextMode:d}){const x=o.useRef(null),[u,n]=o.useState("idle"),[f,c]=o.useState(null),[m,g]=o.useState(null),y=o.useRef(null),N=l==="custom"?i:te[l],p=r&&t?fe(r,t,a,d):null;function R(L){const E={};for(const[b,S]of Object.entries(L))typeof S=="function"?E[b]={__peekrFn:!0,name:b}:E[b]=S;return E}o.useEffect(()=>{const L=E=>{if(x.current&&E.source!==x.current.contentWindow)return;const b=E.data;b.type==="FRAME_READY"&&(n("loading"),g(null),v({type:"UPDATE_PROPS",props:R(s)}),v({type:"SET_THEME",theme:a})),b.type==="RENDER_SUCCESS"&&(n("ready"),c(null)),b.type==="RENDER_ERROR"&&(n("error"),c({message:b.message,stack:b.stack})),b.type==="FULLCONTEXT_FALLBACK"&&g(b.reason),b.type==="FULLCONTEXT_READY"&&g(null)};return window.addEventListener("message",L),()=>window.removeEventListener("message",L)},[s,a]);const v=o.useCallback(L=>{var E,b;(b=(E=x.current)==null?void 0:E.contentWindow)==null||b.postMessage(L,"*")},[]),P=o.useRef(s),A=o.useRef(a);return o.useEffect(()=>{u!=="ready"&&u!=="loading"||P.current!==s&&(P.current=s,v({type:"UPDATE_PROPS",props:R(s)}))},[s,u,v]),o.useEffect(()=>{u!=="ready"&&u!=="loading"||A.current!==a&&(A.current=a,v({type:"SET_THEME",theme:a}))},[a,u,v]),o.useEffect(()=>{p!==y.current&&(y.current=p,n(p?"loading":"idle"),c(null),g(null))},[p]),p?e.jsxs("div",{className:"flex-1 relative overflow-hidden flex items-start justify-center p-6",style:{background:"var(--surface-raised)"},children:[u==="loading"&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10 pointer-events-none",children:e.jsx("div",{className:"w-5 h-5 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin opacity-70"})}),u==="error"&&f&&e.jsx("div",{className:"absolute inset-0 flex items-start justify-center pt-8 z-20 px-6 pointer-events-none",children:e.jsxs("div",{className:"w-full max-w-lg rounded-xl border p-5 shadow-lg pointer-events-auto",style:{background:"var(--surface)",borderColor:"#fca5a5"},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx("span",{className:"text-red-500 text-lg",children:"⚠"}),e.jsx("span",{className:"text-sm font-semibold text-red-600 dark:text-red-400",children:"Component Error"})]}),e.jsx("pre",{className:"text-xs overflow-auto whitespace-pre-wrap break-words rounded p-3",style:{background:"#fef2f2",color:"#dc2626",maxHeight:200,fontFamily:"ui-monospace, monospace"},children:f.message}),f.stack&&e.jsxs("details",{className:"mt-2",children:[e.jsx("summary",{className:"text-xs cursor-pointer",style:{color:"var(--text-tertiary)"},children:"Stack trace"}),e.jsx("pre",{className:"text-xs mt-1 overflow-auto rounded p-2",style:{background:"var(--surface-raised)",color:"var(--text-secondary)",maxHeight:150,fontFamily:"ui-monospace, monospace"},children:f.stack})]})]})}),e.jsxs("div",{className:w("relative transition-all duration-200 shadow-md rounded-lg overflow-hidden",u==="loading"?"opacity-50":"opacity-100"),style:{width:N,maxWidth:"100%",minHeight:200,background:a==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[d&&m&&e.jsxs("div",{className:"absolute top-0 left-0 right-0 px-3 py-1 text-[10px] z-10 flex items-center gap-1.5",style:{background:"#fef9c3",color:"#92400e",borderBottom:"1px solid #fde68a"},title:`Full App Context failed to load: ${m}`,children:[e.jsx("span",{children:"⚠"}),e.jsx("span",{className:"font-medium",children:"Isolated fallback"}),e.jsx("span",{className:"opacity-70 truncate",children:m})]}),e.jsxs("div",{className:"absolute top-0 right-0 px-2 py-0.5 text-[10px] rounded-bl-md z-10 font-mono select-none",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:[N,"px"]}),e.jsx("iframe",{ref:x,src:p,title:"Component preview",className:"w-full border-none",style:{height:Math.max(300,600),display:"block",colorScheme:a},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})]}):e.jsx("div",{className:"flex-1 flex items-center justify-center animate-fade-in",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"text-5xl mb-4 opacity-30 select-none",children:"⚡"}),e.jsx("p",{className:"text-sm font-medium",style:{color:"var(--text-secondary)"},children:"Select a component from the sidebar"}),e.jsx("p",{className:"text-xs mt-1",style:{color:"var(--text-tertiary)"},children:"peekr auto-detects your React components"})]})})}function me({props:r,values:t,onChange:s,onPropsReset:a,loading:l,componentName:i}){return i?l?e.jsxs("div",{className:"flex items-center justify-center h-full gap-2",children:[e.jsx("div",{className:"w-4 h-4 border border-indigo-400 border-t-transparent rounded-full animate-spin"}),e.jsx("span",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Parsing props..."})]}):r.length===0?e.jsx(tt,{componentName:i,onPropsReset:a}):e.jsx("div",{className:"overflow-y-auto h-full",children:e.jsxs("table",{className:"w-full border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b",style:{borderColor:"var(--border)"},children:[e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)",width:"35%"},children:"Prop"}),e.jsx("th",{className:"text-left px-3 py-2 text-xs font-medium uppercase tracking-wide",style:{color:"var(--text-tertiary)"},children:"Control"})]})}),e.jsx("tbody",{children:r.map(d=>e.jsx(qe,{prop:d,value:t[d.name],onChange:x=>s(d.name,x)},d.name))})]})}):e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:"Select a component to see its props"})})}function qe({prop:r,value:t,onChange:s}){return e.jsxs("tr",{className:"border-b hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors group",style:{borderColor:"var(--border)"},children:[e.jsxs("td",{className:"px-3 py-2 align-middle",style:{width:"35%"},children:[e.jsx("div",{className:"flex items-center gap-1.5",children:e.jsxs("span",{className:"text-xs font-medium font-mono truncate",style:{color:"var(--text-primary)"},title:r.description??r.name,children:[r.name,r.required&&e.jsx("span",{className:"text-red-400 ml-0.5",title:"Required",children:"*"})]})}),e.jsx("div",{className:"flex items-center gap-1 mt-0.5",children:e.jsx(Ye,{type:r.type})}),r.description&&e.jsx("p",{className:"text-[10px] mt-0.5 leading-relaxed",style:{color:"var(--text-tertiary)"},children:r.description})]}),e.jsx("td",{className:"px-3 py-2 align-middle",children:e.jsx(Je,{prop:r,value:t,onChange:s})})]})}function Ye({type:r}){const t={string:"bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400",number:"bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400",boolean:"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400",select:"bg-purple-50 text-purple-600 dark:bg-purple-950 dark:text-purple-400",function:"bg-orange-50 text-orange-600 dark:bg-orange-950 dark:text-orange-400",node:"bg-pink-50 text-pink-600 dark:bg-pink-950 dark:text-pink-400",color:"bg-teal-50 text-teal-600 dark:bg-teal-950 dark:text-teal-400",unknown:"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"};return e.jsx("span",{className:w("px-1.5 py-0.5 rounded text-[10px] font-mono",t[r]??t.unknown),children:r})}function Je({prop:r,value:t,onChange:s}){switch(r.type){case"boolean":return e.jsx(Xe,{value:t,onChange:s});case"number":return e.jsx(Ke,{value:t,onChange:s});case"select":return e.jsx(Ge,{options:r.options??[],value:t,onChange:s});case"function":return e.jsx(Ze,{name:r.name,onChange:s});case"node":return e.jsx(Qe,{value:t,onChange:s});case"color":return e.jsx(et,{value:t,onChange:s});case"string":default:return e.jsx(pe,{value:t,onChange:s})}}function pe({value:r,onChange:t}){return e.jsx("input",{type:"text",className:"peek-input",value:r??"",onChange:s=>t(s.target.value),placeholder:"string value"})}function Ke({value:r,onChange:t}){return e.jsx("input",{type:"number",className:"peek-input w-24",value:r??0,onChange:s=>t(parseFloat(s.target.value)||0)})}function Xe({value:r,onChange:t}){const s=!!r;return e.jsx("button",{onClick:()=>t(!s),className:w("relative inline-flex items-center w-9 h-5 rounded-full transition-colors focus:outline-none","focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1",s?"bg-indigo-500":"bg-gray-300 dark:bg-gray-600"),role:"switch","aria-checked":s,children:e.jsx("span",{className:w("inline-block w-3.5 h-3.5 rounded-full bg-white shadow-sm transform transition-transform",s?"translate-x-4":"translate-x-0.5")})})}function Ge({options:r,value:t,onChange:s}){return r.length===0?e.jsx(pe,{value:t,onChange:s}):e.jsx("select",{className:"peek-select",value:t??r[0]??"",onChange:a=>s(a.target.value),children:r.map(a=>e.jsx("option",{value:a,children:a},a))})}function Ze({name:r,onChange:t}){const s=o.useRef(0);return e.jsxs("button",{onClick:()=>{s.current++,console.log(`[peekr] Fired: ${r}() (call #${s.current})`),t(()=>{console.log(`[peekr] ${r}() fired`)})},className:"flex items-center gap-1.5 px-2.5 h-6 rounded-md text-xs font-medium transition-colors bg-orange-50 text-orange-700 hover:bg-orange-100 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900",children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("path",{d:"M8 5v14l11-7z"})}),"Fire Event"]})}function Qe({value:r,onChange:t}){return e.jsx("textarea",{className:"peek-input resize-none",rows:2,value:r??"",onChange:s=>t(s.target.value),placeholder:"React node content (text or HTML)",style:{fontFamily:"ui-monospace, monospace",fontSize:11}})}function et({value:r,onChange:t}){return e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",className:"w-7 h-7 rounded cursor-pointer border border-gray-200 dark:border-gray-700 p-0.5 bg-transparent",value:r??"#6366f1",onChange:s=>t(s.target.value)}),e.jsx("input",{type:"text",className:"peek-input w-24 font-mono text-xs",value:r??"#6366f1",onChange:s=>t(s.target.value),placeholder:"#000000"})]})}function tt({componentName:r,onPropsReset:t}){const[s,a]=o.useState("{}"),[l,i]=o.useState(null),[d,x]=o.useState(!0);o.useEffect(()=>{a("{}"),i(null),x(!0),t==null||t({})},[r]);const u=n=>{const f=n.target.value;if(a(f),f.trim()===""||f.trim()==="{}"){i(null),x(!0),t==null||t({});return}try{const c=JSON.parse(f);if(typeof c!="object"||Array.isArray(c)||c===null){i("Must be a JSON object { }"),x(!1);return}const m={};for(const[g,y]of Object.entries(c))typeof y=="string"&&(y.trim().startsWith("() =>")||y.trim().startsWith("function"))?m[g]=()=>{}:m[g]=y;i(null),x(!0),t==null||t(m)}catch(c){i(c.message),x(!1)}};return e.jsxs("div",{className:"flex flex-col h-full p-3 gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:"Raw props (JSON)"}),e.jsx("span",{className:w("text-[10px] px-1.5 py-0.5 rounded font-mono",d?"bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400":"bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-400"),children:d?"valid":"invalid"}),e.jsx("span",{className:"text-[10px] ml-auto",style:{color:"var(--text-tertiary)"},children:"No TS types found"})]}),e.jsx("textarea",{className:"flex-1 text-xs rounded-md p-2 resize-none",style:{background:"var(--surface-overlay)",color:"var(--text-primary)",border:`1px solid ${l?"#f87171":"var(--border)"}`,outline:"none",fontFamily:"ui-monospace, monospace",lineHeight:1.6,minHeight:80},value:s,onChange:u,spellCheck:!1,placeholder:`{
+  "label": "Click me",
+  "disabled": false,
+  "onClick": "() => {}"
+}`}),l&&e.jsx("p",{className:"text-[10px] leading-relaxed",style:{color:"#f87171"},children:l}),e.jsxs("p",{className:"text-[10px] leading-relaxed",style:{color:"var(--text-tertiary)"},children:["Type props as JSON. Use ",e.jsxs("code",{style:{fontFamily:"ui-monospace, monospace"},children:['"() => ',"{}",'"']})," for callbacks. Add TypeScript types to get auto-generated controls."]})]})}const rt="modulepreload",st=function(r){return"/__peek/app/"+r},oe={},le=function(t,s,a){let l=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const d=document.querySelector("meta[property=csp-nonce]"),x=(d==null?void 0:d.nonce)||(d==null?void 0:d.getAttribute("nonce"));l=Promise.allSettled(s.map(u=>{if(u=st(u),u in oe)return;oe[u]=!0;const n=u.endsWith(".css"),f=n?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${u}"]${f}`))return;const c=document.createElement("link");if(c.rel=n?"stylesheet":rt,n||(c.as="script"),c.crossOrigin="",c.href=u,x&&c.setAttribute("nonce",x),document.head.appendChild(c),n)return new Promise((m,g)=>{c.addEventListener("load",m),c.addEventListener("error",()=>g(new Error(`Unable to preload CSS for ${u}`)))})}))}function i(d){const x=new Event("vite:preloadError",{cancelable:!0});if(x.payload=d,window.dispatchEvent(x),!x.defaultPrevented)throw d}return l.then(d=>{for(const x of d||[])x.status==="rejected"&&i(x.reason);return t().catch(i)})};function at({filePath:r,exportName:t,propDefs:s,propsLoading:a,defaultProps:l,theme:i,viewport:d,customWidth:x}){const[u,n]=o.useState(l),[f,c]=o.useState(l),[m,g]=o.useState(!1),[y,N]=o.useState(!1),[p,R]=o.useState(null),v=o.useRef(null),P=o.useRef(null),A=o.useRef("loading"),L=o.useRef("loading"),E=d==="custom"?x:te[d],b=fe(r,t,i),S=o.useCallback((D,C)=>{var k,_;(_=(k=D.current)==null?void 0:k.contentWindow)==null||_.postMessage(C,"*")},[]);o.useEffect(()=>{const D=C=>{var _,T;const k=C.data;k!=null&&k.type&&(C.source===((_=v.current)==null?void 0:_.contentWindow)&&(k.type==="FRAME_READY"&&(S(v,{type:"UPDATE_PROPS",props:u}),S(v,{type:"SET_THEME",theme:i})),k.type==="RENDER_SUCCESS"&&(A.current="ready")),C.source===((T=P.current)==null?void 0:T.contentWindow)&&(k.type==="FRAME_READY"&&(S(P,{type:"UPDATE_PROPS",props:f}),S(P,{type:"SET_THEME",theme:i})),k.type==="RENDER_SUCCESS"&&(L.current="ready")))};return window.addEventListener("message",D),()=>window.removeEventListener("message",D)},[u,f,i,S]),o.useEffect(()=>{S(v,{type:"UPDATE_PROPS",props:u})},[u,S]),o.useEffect(()=>{S(P,{type:"UPDATE_PROPS",props:f})},[f,S]),o.useEffect(()=>{n(l),c(l)},[l]);const J=o.useCallback(async()=>{var D,C,k,_;N(!0),R(null);try{const T=(await le(async()=>{const{default:W}=await import("./html2canvas.esm-CBrSDip1.js");return{default:W}},[])).default,B=(await le(async()=>{const{default:W}=await import("./index-Ch1Vufae.js").then(Q=>Q.i);return{default:W}},__vite__mapDeps([0,1]))).default,V=(C=(D=v.current)==null?void 0:D.contentDocument)==null?void 0:C.body,z=(_=(k=P.current)==null?void 0:k.contentDocument)==null?void 0:_.body;if(!V||!z){N(!1);return}const[M,F]=await Promise.all([T(V,{logging:!1,useCORS:!0}),T(z,{logging:!1,useCORS:!0})]),H=Math.max(M.width,F.width),O=Math.max(M.height,F.height),K=M.getContext("2d"),X=F.getContext("2d"),G=K.getImageData(0,0,M.width,M.height),Z=X.getImageData(0,0,F.width,F.height),h=document.createElement("canvas");h.width=H,h.height=O;const j=h.getContext("2d"),U=j.createImageData(H,O),I=B(G.data,Z.data,U.data,H,O,{threshold:.1});j.putImageData(U,0,0),R(h.toDataURL())}catch(T){console.error("[peekr] Diff computation failed:",T)}finally{N(!1)}},[]);return e.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-3 px-4 h-10 border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface-raised)"},children:[e.jsxs("span",{className:"text-xs font-medium",style:{color:"var(--text-secondary)"},children:["Comparing: ",e.jsx("span",{style:{color:"var(--accent)"},children:t==="default"?r.split("/").pop():t})]}),e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:()=>{g(!m),m||J()},disabled:y,className:w("flex items-center gap-1.5 px-3 h-7 rounded-md text-xs font-medium transition-colors",m&&p?"bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300":"bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"),children:[y?e.jsx("span",{className:"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin"}):e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("path",{d:"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"})]}),m&&p?"Hide Diff":"Show Visual Diff"]})]}),e.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[e.jsx(ie,{label:"Variant A",iframeRef:v,frameUrl:b,props:u,propDefs:s,propsLoading:a,onPropsChange:n,viewportWidth:E,theme:i,diffOverlay:m&&p?p:null}),e.jsx("div",{className:"w-px shrink-0",style:{background:"var(--border)"}}),e.jsx(ie,{label:"Variant B",iframeRef:P,frameUrl:`${b}&_r=1`,props:f,propDefs:s,propsLoading:a,onPropsChange:c,viewportWidth:E,theme:i,diffOverlay:null})]})]})}function ie({label:r,iframeRef:t,frameUrl:s,props:a,propDefs:l,propsLoading:i,onPropsChange:d,viewportWidth:x,theme:u,diffOverlay:n}){return e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)",background:"var(--surface)"},children:e.jsx("span",{className:"text-xs font-semibold",style:{color:"var(--text-secondary)"},children:r})}),e.jsx("div",{className:"flex-1 flex items-start justify-center p-4 overflow-auto",style:{background:"var(--surface-raised)"},children:e.jsxs("div",{className:"relative shadow-md rounded-lg overflow-hidden",style:{width:Math.min(x,600),maxWidth:"100%",background:u==="dark"?"#0f172a":"#fff",border:"1px solid var(--border)"},children:[n&&e.jsx("img",{src:n,alt:"Visual diff",className:"absolute inset-0 w-full h-full object-contain z-10 pointer-events-none mix-blend-difference opacity-80"}),e.jsx("iframe",{ref:t,src:s,title:`${r} preview`,className:"w-full border-none",style:{height:400,display:"block"},sandbox:"allow-scripts allow-same-origin allow-popups allow-forms"})]})}),e.jsxs("div",{className:"border-t shrink-0",style:{borderColor:"var(--border)",height:200,background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-8 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"})}),e.jsx("div",{style:{height:"calc(100% - 32px)",overflow:"auto"},children:e.jsx(me,{props:l,values:a,onChange:(f,c)=>d({...a,[f]:c}),loading:i,componentName:r})})]})]})}class nt extends ce.Component{constructor(){super(...arguments);re(this,"state",{error:null})}static getDerivedStateFromError(s){return{error:s}}componentDidCatch(s,a){console.error("[peekr] Uncaught error:",s,a)}render(){return this.state.error?this.props.fallback??e.jsx("div",{className:"flex items-center justify-center h-screen bg-red-50 dark:bg-red-950 p-8",children:e.jsxs("div",{className:"max-w-lg w-full bg-white dark:bg-gray-900 rounded-xl border border-red-200 dark:border-red-800 p-6 shadow-sm",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("span",{className:"text-2xl",children:"⚠️"}),e.jsx("h2",{className:"text-base font-semibold text-red-700 dark:text-red-400",children:"Something went wrong"})]}),e.jsx("pre",{className:"text-xs text-red-600 dark:text-red-300 bg-red-50 dark:bg-red-900/30 rounded p-3 overflow-auto whitespace-pre-wrap break-words",children:this.state.error.message}),e.jsx("button",{onClick:()=>this.setState({error:null}),className:"mt-4 px-3 py-1.5 text-xs bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 text-red-700 dark:text-red-300 rounded-md transition-colors",children:"Try again"})]})}):this.props.children}}function ot(){const{parseUrl:r,updateUrl:t,hydrateProps:s}=Ae(),a=r(),{components:l,loading:i,error:d}=Fe(),[x,u]=o.useState(null),[n,f]=o.useState(null);o.useEffect(()=>{if(a.filePath&&l.length>0&&!n){const h=l.find(j=>j.filePath===a.filePath&&j.exportName===a.exportName);h&&(u(h.id),f(h))}},[l]);const{props:c,loading:m}=Ue((n==null?void 0:n.filePath)??null,(n==null?void 0:n.exportName)??null),[g,y]=o.useState({}),N=o.useRef(null);o.useEffect(()=>{if(!n||m||N.current===n.filePath)return;N.current=n.filePath;const h=new URLSearchParams(window.location.search),j=s(h,c),U=ne(c,h);y({...U,...j})},[c,n,m,s]);const p=o.useCallback((h,j)=>{y(U=>{const I={...U,[h]:j};return n&&t(n.filePath,n.exportName,I,c),I})},[n,c,t]),R=o.useCallback(h=>{y(h),n&&t(n.filePath,n.exportName,h,c)},[n,c,t]),v=o.useCallback(h=>{u(h.id),f(h),y({}),N.current=null,t(h.filePath,h.exportName,{})},[t]),[P,A]=o.useState(null),[L,E]=o.useState(!1);o.useEffect(()=>{Te().then(A)},[]),o.useEffect(()=>{},[]);const[b,S]=o.useState(""),[J,D]=o.useState(!1),[C,k]=o.useState("light"),[_,T]=o.useState("desktop"),[B,V]=o.useState(1280),[z,M]=o.useState(!1),[F,H]=o.useState(280),O=o.useRef(!1);o.useEffect(()=>{document.documentElement.className=C==="dark"?"dark":""},[C]);const K=o.useCallback(()=>{k(h=>h==="dark"?"light":"dark")},[]),X=o.useCallback((h,j)=>{T(h),h==="custom"&&j&&V(j)},[]),G=o.useCallback(h=>{h.preventDefault(),O.current=!0;const j=h.clientY,U=F,I=Q=>{if(!O.current)return;const ge=j-Q.clientY;H(Math.max(120,Math.min(600,U+ge)))},W=()=>{O.current=!1,document.removeEventListener("mousemove",I),document.removeEventListener("mouseup",W)};document.addEventListener("mousemove",I),document.addEventListener("mouseup",W)},[F]);o.useEffect(()=>{},[n]);const Z=n?`${window.location.origin}${window.location.pathname}#/${n.filePath}?export=${n.exportName}${Object.entries(g).filter(([,h])=>h!==void 0&&typeof h!="function").map(([h,j])=>`&${encodeURIComponent(h)}=${encodeURIComponent(String(j))}`).join("")}`:null;return e.jsx(nt,{children:e.jsxs("div",{className:"h-screen flex flex-col overflow-hidden",style:{background:"var(--surface)"},children:[e.jsx(Ie,{searchQuery:b,onSearch:S,theme:C,onToggleTheme:K,shareUrl:Z}),e.jsxs("div",{className:"flex flex-1 min-h-0 overflow-hidden",children:[i&&l.length===0?e.jsx(lt,{}):d?e.jsx(it,{error:d}):e.jsx(We,{components:l,selectedId:x,searchQuery:b,onSelect:v,collapsed:J,onToggleCollapse:()=>D(h=>!h)}),e.jsxs("div",{className:"flex-1 flex flex-col min-w-0 overflow-hidden",children:[e.jsx(He,{viewport:_,customWidth:B,onViewportChange:X,theme:C,onThemeChange:k,isDiffMode:z,onToggleDiff:()=>M(h=>!h),selectedComponent:(n==null?void 0:n.name)??null,hasRootLayout:P!==null,fullContextMode:L,onToggleFullContext:()=>E(h=>!h)}),z&&n?e.jsx(at,{filePath:n.filePath,exportName:n.exportName,propDefs:c,propsLoading:m,defaultProps:g,theme:C,viewport:_,customWidth:B}):e.jsxs("div",{className:"flex-1 flex flex-col min-h-0 overflow-hidden",children:[e.jsx("div",{className:"flex-1 min-h-0 overflow-hidden flex",children:e.jsx(Ve,{filePath:(n==null?void 0:n.filePath)??null,exportName:(n==null?void 0:n.exportName)??null,props:g,theme:C,viewport:_,customWidth:B,fullContextMode:L})}),n&&e.jsx("div",{onMouseDown:G,className:"resizer-handle h-1.5 shrink-0 transition-colors",style:{background:"var(--border)",cursor:"row-resize"},role:"separator","aria-label":"Resize props panel","aria-orientation":"horizontal"}),n&&e.jsxs("div",{className:"shrink-0 border-t overflow-hidden flex flex-col",style:{height:F,borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsxs("div",{className:"px-3 h-8 flex items-center border-b shrink-0",style:{borderColor:"var(--border)"},children:[e.jsx("span",{className:"text-xs font-medium",style:{color:"var(--text-tertiary)"},children:"Props"}),c.length>0&&e.jsx("span",{className:"ml-2 text-xs px-1.5 rounded-full",style:{background:"var(--surface-overlay)",color:"var(--text-tertiary)"},children:c.length}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{onClick:()=>{const h=ne(c,new URLSearchParams);y(h),n&&t(n.filePath,n.exportName,h)},className:"text-xs px-2 h-5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",style:{color:"var(--text-tertiary)"},title:"Reset all props to defaults",children:"Reset"})]}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto",children:e.jsx(me,{props:c,values:g,onChange:p,onPropsReset:R,loading:m,componentName:(n==null?void 0:n.name)??null})})]})]})]})]})]})})}function lt(){return e.jsxs("div",{className:"flex flex-col border-r shrink-0",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("div",{className:"px-3 h-9 flex items-center border-b",style:{borderColor:"var(--border)"},children:e.jsx("div",{className:"h-3 w-24 rounded animate-pulse",style:{background:"var(--surface-overlay)"}})}),e.jsx("div",{className:"p-3 space-y-2",children:Array.from({length:8}).map((r,t)=>e.jsx("div",{className:"h-6 rounded animate-pulse",style:{background:"var(--surface-overlay)",width:`${60+t%3*20}%`}},t))})]})}function it({error:r}){return e.jsxs("div",{className:"flex flex-col border-r shrink-0 p-3",style:{width:"var(--sidebar-width)",borderColor:"var(--border)",background:"var(--surface)"},children:[e.jsx("p",{className:"text-xs text-red-500 font-medium mb-1",children:"Failed to load components"}),e.jsx("p",{className:"text-xs",style:{color:"var(--text-tertiary)"},children:r})]})}const ct=document.getElementById("root");xe(ct).render(e.jsx(ce.StrictMode,{children:e.jsx(we,{children:e.jsx(ot,{})})}));