@popmelt.com/core 0.6.6 → 0.6.8

package/dist/canvas.mjs

@@ -1 +1 @@
-var se=Object.defineProperty,ae=Object.defineProperties;var le=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var W=(e,o,t)=>o in e?se(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,g=(e,o)=>{for(var t in o||(o={}))de.call(o,t)&&W(e,t,o[t]);if(_)for(var t of _(o))ce.call(o,t)&&W(e,t,o[t]);return e},h=(e,o)=>ae(e,le(o));import{createRoot as Me}from"react-dom/client";import{createElement as Te}from"react";import{useEffect as oe,useMemo as Se,useReducer as we,useRef as be,useState as xe}from"react";var G="popmelt-canvas";function D(e){return Math.round(e/24)*24}var H={viewport:{offsetX:0,offsetY:0,scale:1},components:[],selectedId:null,highlightedName:null,dragState:null};function V(){var e,o;try{let t=localStorage.getItem(G);if(!t)return{};let r=JSON.parse(t);return{components:(e=r.components)!=null?e:[],viewport:(o=r.viewport)!=null?o:H.viewport}}catch(t){return{}}}function $(e){try{let o={components:e.components,viewport:e.viewport};localStorage.setItem(G,JSON.stringify(o))}catch(o){}}function B(e,o){switch(o.type){case"PLACE_COMPONENT":{let t=o.component,r=h(g({},t),{x:D(t.x),y:D(t.y),width:D(t.width),height:D(t.height)});return h(g({},e),{components:[...e.components,r],selectedId:r.id})}case"REMOVE_COMPONENT":return h(g({},e),{components:e.components.filter(t=>t.id!==o.id),selectedId:e.selectedId===o.id?null:e.selectedId});case"MOVE_COMPONENT":return h(g({},e),{components:e.components.map(t=>t.id===o.id?h(g({},t),{x:D(o.x),y:D(o.y)}):t)});case"RESIZE_COMPONENT":return h(g({},e),{components:e.components.map(t=>t.id===o.id?h(g({},t),{width:Math.max(200,o.width),height:Math.max(150,o.height)}):t)});case"SELECT":return h(g({},e),{selectedId:o.id});case"SET_VIEWPORT":return h(g({},e),{viewport:o.viewport});case"PAN":return h(g({},e),{viewport:h(g({},e.viewport),{offsetX:e.viewport.offsetX+o.deltaX,offsetY:e.viewport.offsetY+o.deltaY})});case"START_DRAG":return h(g({},e),{dragState:o.dragState});case"END_DRAG":return h(g({},e),{dragState:null});case"HIGHLIGHT":return h(g({},e),{highlightedName:o.name});default:return e}}function F(e,o,t){return{x:(e-t.offsetX)/t.scale,y:(o-t.offsetY)/t.scale}}import{useCallback as fe,useEffect as A,useRef as Y}from"react";import{useCallback as k,useRef as J,useState as z}from"react";var pe="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Z={borderWidth:3,borderStyle:"solid",borderImage:`url("${pe}") 4 / 1.9 / 0 round`};import{jsx as C,jsxs as M}from"react/jsx-runtime";function Q({component:e,selected:o,highlighted:t,isDragging:r,viewport:x,dispatch:m}){let S=J(null),a=J(null),[i,b]=z(null),[u,d]=z(!1),[n,c]=z(!1),l=e.entry.routes&&e.entry.routes.length>0,s=k(()=>{var w,P;d(!1),c(!1);try{let R=(P=(w=a.current)==null?void 0:w.contentWindow)==null?void 0:P.location.pathname;if(!R)return;let I=new URL(e.iframeUrl).pathname;R!==I&&b(R)}catch(R){}setTimeout(()=>{var R;try{let I=(R=a.current)==null?void 0:R.contentDocument;I!=null&&I.querySelector("nextjs-portal")&&d(!0)}catch(I){}},2e3)},[e.iframeUrl]),p=k(w=>{w.stopPropagation(),m({type:"SELECT",id:e.id});let P={type:"move",componentId:e.id,startX:w.clientX,startY:w.clientY,originX:e.x,originY:e.y};m({type:"START_DRAG",dragState:P})},[e.id,e.x,e.y,m]),v=k(w=>{w.stopPropagation(),w.preventDefault(),m({type:"SELECT",id:e.id});let P={type:"resize",componentId:e.id,startX:w.clientX,startY:w.clientY,originW:e.width,originH:e.height};m({type:"START_DRAG",dragState:P})},[e.id,e.width,e.height,m]),y=k(w=>{w.stopPropagation(),m({type:"REMOVE_COMPONENT",id:e.id})},[e.id,m]),T=k(w=>{w.stopPropagation(),m({type:"SELECT",id:e.id})},[e.id,m]),f=1/x.scale,O=o||t,L=3*f,ie=4*f;return M("div",{onMouseDown:T,style:{position:"absolute",left:e.x,top:e.y,width:e.width,height:e.height,background:"#ffffff",display:"flex",flexDirection:"column",boxShadow:O?`0 ${2*f}px ${12*f}px rgba(0,0,0,0.12)`:`0 ${f}px ${4*f}px rgba(0,0,0,0.06)`,borderWidth:L,borderStyle:"solid",borderImage:Z.borderImage,opacity:O?1:void 0},children:[C("div",{onMouseDown:T,style:{position:"absolute",inset:-(L+ie),pointerEvents:"auto"}}),!O&&C("div",{style:{position:"absolute",inset:-L,pointerEvents:"none",background:"rgba(255,255,255,0.75)"}}),M("div",{ref:S,onMouseDown:p,style:{height:28*f,background:u?"#fef2f2":"#f9fafb",display:"flex",alignItems:"center",padding:`0 ${8*f}px`,cursor:"grab",userSelect:"none",borderBottom:`${f}px solid rgba(0,0,0,0.06)`,flexShrink:0,position:"relative"},children:[M("span",{style:{flex:1,fontSize:11*f,fontWeight:600,color:"#1f2937",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"inherit",display:"flex",alignItems:"center",gap:4*f},children:[e.entry.name,!l&&C("span",{style:{fontSize:9*f,color:"#d1d5db",fontWeight:400},children:"(no route)"}),u&&C("span",{style:{fontSize:9*f,color:"#ef4444",fontWeight:600},children:"build error"}),i&&M("span",{style:{fontSize:9*f,color:"#f59e0b",fontWeight:400},children:["\u2192 ",i]})]}),M("span",{style:{fontSize:10*f,color:"#9ca3af",marginRight:6*f,whiteSpace:"nowrap",fontFamily:"inherit"},children:[Math.round(e.width),"\xD7",Math.round(e.height)]}),C("button",{onClick:y,style:{background:"none",border:"none",color:"#9ca3af",cursor:"pointer",fontSize:12*f,lineHeight:1,padding:`${2*f}px ${4*f}px`,fontFamily:"inherit"},children:"\u2715"})]}),M("div",{style:{flex:1,position:"relative",overflow:"hidden"},children:[C("iframe",{ref:a,src:e.iframeUrl,onLoad:s,sandbox:"allow-scripts allow-same-origin allow-forms allow-popups allow-modals",style:{width:"100%",height:"100%",border:"none",pointerEvents:r?"none":"auto",background:"#fff"},title:e.entry.name}),u&&!n&&M("div",{style:{position:"absolute",inset:0,background:"#fff",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:24,zIndex:2},children:[C("div",{style:{fontSize:13,color:"#991b1b",fontWeight:600},children:"Build error"}),M("div",{style:{fontSize:11,color:"#6b7280",marginTop:6,textAlign:"center"},children:["This component has unresolvable imports.",C("br",{}),"Other components are not affected."]}),C("button",{onClick:()=>c(!0),style:{marginTop:14,fontSize:11,color:"#6b7280",background:"none",border:"1px solid #e5e7eb",padding:"4px 12px",cursor:"pointer",fontFamily:"inherit"},children:"Show details"})]})]}),C("div",{onMouseDown:v,style:{position:"absolute",right:0,bottom:0,width:14*f,height:14*f,cursor:"nwse-resize",background:"linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.15) 50%)",zIndex:1}})]})}import{jsx as K,jsxs as X}from"react/jsx-runtime";var ue=.1,ge=3,me=.004;function U({state:e,dispatch:o}){let t=Y(null),{viewport:r,components:x,selectedId:m,highlightedName:S,dragState:a}=e,i=Y({x:0,y:0}),b=Y({viewport:r,dispatch:o});b.current={viewport:r,dispatch:o};function u(n,c,l,s,p,v){let y=Math.min(ge,Math.max(ue,s)),T=y/c.scale;l({type:"SET_VIEWPORT",viewport:{scale:y,offsetX:p-(p-c.offsetX)*T,offsetY:v-(v-c.offsetY)*T}})}A(()=>{let n=t.current;if(!n)return;let c=s=>{s.preventDefault();let{viewport:p,dispatch:v}=b.current,y=n.getBoundingClientRect();if(i.current={x:s.clientX-y.left,y:s.clientY-y.top},s.ctrlKey||s.metaKey){let T=1-s.deltaY*me;u(n,p,v,p.scale*T,i.current.x,i.current.y)}else v({type:"PAN",deltaX:-s.deltaX,deltaY:-s.deltaY})},l=s=>{let p=n.getBoundingClientRect();i.current={x:s.clientX-p.left,y:s.clientY-p.top}};return n.addEventListener("wheel",c,{passive:!1}),n.addEventListener("mousemove",l),()=>{n.removeEventListener("wheel",c),n.removeEventListener("mousemove",l)}},[]),A(()=>{let n=t.current;if(!n)return;let c=l=>{if(!l.metaKey&&!l.ctrlKey)return;let{viewport:s,dispatch:p}=b.current,{x:v,y}=i.current;l.key==="0"?(l.preventDefault(),u(n,s,p,1,v,y)):l.key==="="||l.key==="+"?(l.preventDefault(),u(n,s,p,s.scale+.25,v,y)):l.key==="-"&&(l.preventDefault(),u(n,s,p,s.scale-.25,v,y))};return window.addEventListener("keydown",c,{capture:!0}),()=>window.removeEventListener("keydown",c,{capture:!0})},[]);let d=fe(n=>{var c;n.target!==n.currentTarget&&n.target!==((c=t.current)==null?void 0:c.firstChild)||(o({type:"SELECT",id:null}),o({type:"START_DRAG",dragState:{type:"pan",startX:n.clientX,startY:n.clientY,originOffsetX:r.offsetX,originOffsetY:r.offsetY}}))},[r.offsetX,r.offsetY,o]);return A(()=>{if(!a)return;let n=l=>{let s=l.clientX-a.startX,p=l.clientY-a.startY;switch(a.type){case"pan":o({type:"SET_VIEWPORT",viewport:h(g({},r),{offsetX:a.originOffsetX+s,offsetY:a.originOffsetY+p})});break;case"move":o({type:"MOVE_COMPONENT",id:a.componentId,x:a.originX+s/r.scale,y:a.originY+p/r.scale});break;case"resize":{let v=s/r.scale,y=p/r.scale;l.shiftKey&&(Math.abs(v)>Math.abs(y)?y=0:v=0),o({type:"RESIZE_COMPONENT",id:a.componentId,width:a.originW+v,height:a.originH+y});break}}},c=()=>{o({type:"END_DRAG"})};return window.addEventListener("mousemove",n),window.addEventListener("mouseup",c),()=>{window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",c)}},[a,r,o]),X("div",{ref:t,onMouseDown:d,style:{flex:1,overflow:"hidden",position:"relative",background:"#f9fafb",cursor:(a==null?void 0:a.type)==="pan"?"grabbing":"default"},children:[X("div",{style:{transform:`translate(${r.offsetX}px, ${r.offsetY}px) scale(${r.scale})`,transformOrigin:"0 0",position:"absolute",top:0,left:0},children:[K("div",{onMouseDown:d,style:{position:"fixed",top:-1e4,left:-1e4,width:2e4,height:2e4,backgroundImage:"radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px)",backgroundSize:"24px 24px",pointerEvents:"auto"}}),x.map(n=>K(Q,{component:n,selected:n.id===m,highlighted:n.entry.name===S,isDragging:!!a,viewport:r,dispatch:o},n.id))]}),X("div",{style:{position:"absolute",bottom:12,right:12,fontSize:10,color:"#6b7280",background:"#ffffff",padding:"3px 8px",border:"1px solid rgba(0,0,0,0.08)",userSelect:"none",fontFamily:"inherit"},children:[Math.round(r.scale*100),"%"]})]})}import{useCallback as q,useMemo as ve,useState as ee}from"react";function j(e,o){let t=`${e}::${o}`,r=5381;for(let x=0;x<t.length;x++)r=(r<<5)+r+t.charCodeAt(x)&4294967295;return(r>>>0).toString(16).padStart(8,"0")}import{jsx as E,jsxs as N}from"react/jsx-runtime";var ye=Date.now();function te({manifest:e,viewport:o,dispatch:t,devOrigin:r,selectedName:x,highlightedName:m}){let[S,a]=ee(""),i=ve(()=>{var c;if(!e)return new Map;let d=new Map,n=S.toLowerCase();for(let l of e.components){if(n&&!l.name.toLowerCase().includes(n))continue;let s=l.category||"root",p=(c=d.get(s))!=null?c:[];p.push(l),d.set(s,p)}return d},[e,S]),b=q(d=>{let n={x:(window.innerWidth-260)/2+260,y:window.innerHeight/2},c=F(n.x,n.y,o),l=400,s=300,p=j(d.filePath,d.name),v=`${r}/popmelt/render/${p}`,y={id:`placed-${++ye}`,entry:d,x:c.x-l/2,y:c.y-s/2,width:l,height:s,iframeUrl:v};t({type:"PLACE_COMPONENT",component:y})},[o,t,r]),u=q(d=>{t({type:"HIGHLIGHT",name:d})},[t]);return N("div",{style:{width:260,height:"100%",background:"#ffffff",borderRight:"1px solid rgba(0,0,0,0.08)",display:"flex",flexDirection:"column",flexShrink:0,overflow:"hidden"},children:[N("div",{style:{padding:"12px 12px 8px",borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[E("div",{style:{fontSize:11,fontWeight:700,color:"#1f2937",marginBottom:8,letterSpacing:"0.5px",textTransform:"uppercase"},children:"Components"}),E("input",{type:"text",placeholder:"search...",value:S,onChange:d=>a(d.target.value),style:{width:"100%",padding:"5px 8px",fontSize:12,background:"#f9fafb",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,color:"#1f2937",outline:"none",boxSizing:"border-box",fontFamily:"inherit"}})]}),N("div",{style:{flex:1,overflowY:"auto",overflowX:"hidden",padding:"4px 0"},children:[!e&&E("div",{style:{padding:12,fontSize:11,color:"#9ca3af"},children:"loading..."}),e&&i.size===0&&E("div",{style:{padding:12,fontSize:11,color:"#9ca3af"},children:"no components found"}),[...i.entries()].map(([d,n])=>E(he,{category:d,entries:n,onPlace:b,onHover:u,selectedName:x,highlightedName:m},d))]})]})}function he({category:e,entries:o,onPlace:t,onHover:r,selectedName:x,highlightedName:m}){let[S,a]=ee(!1);return N("div",{children:[N("div",{onClick:()=>a(i=>!i),style:{padding:"6px 12px",fontSize:10,fontWeight:700,color:S?"#9ca3af":"#1f2937",textTransform:"uppercase",letterSpacing:"0.5px",cursor:"pointer",userSelect:"none",display:"flex",alignItems:"center",gap:4,transition:"color 0.15s"},children:[E("span",{style:{color:"#9ca3af",fontWeight:400},children:S?"[+]":"[-]"}),e,E("span",{style:{color:"#d1d5db",marginLeft:"auto",fontWeight:400},children:o.length})]}),!S&&o.map(i=>{let b=i.name===x,u=i.name===m,d=b||u;return N("div",{onClick:()=>t(i),onMouseEnter:()=>r(i.name),onMouseLeave:()=>r(null),style:{padding:"5px 12px 5px 24px",cursor:"pointer",borderLeft:d?"2px solid #1f2937":"2px solid transparent",background:d?"#f9fafb":"transparent",transition:"background 0.1s, border-color 0.1s"},children:[E("div",{style:{fontSize:12,color:"#1f2937",fontWeight:600},children:i.name}),E("div",{style:{fontSize:10,color:"#9ca3af",marginTop:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:i.filePath}),i.routes&&i.routes.length>0?E("div",{style:{display:"flex",gap:3,marginTop:3,flexWrap:"wrap"},children:i.routes.map(n=>E("span",{style:{fontSize:9,padding:"1px 4px",background:"#f3f4f6",color:"#6b7280",border:"1px solid rgba(0,0,0,0.06)"},children:n},n))}):E("div",{style:{fontSize:9,color:"#d1d5db",marginTop:3},children:"(no route)"})]},i.name+i.filePath)})]})}import{jsx as ne,jsxs as Ce}from"react/jsx-runtime";var Ee='"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';function re({devOrigin:e,bridgeOrigin:o}){let[t,r]=we(B,H,i=>g(g({},i),V())),[x,m]=xe(null),S=be();oe(()=>(clearTimeout(S.current),S.current=setTimeout(()=>$(t),300),()=>clearTimeout(S.current)),[t.components,t.viewport]);let a=Se(()=>{var i,b;return t.selectedId&&(b=(i=t.components.find(u=>u.id===t.selectedId))==null?void 0:i.entry.name)!=null?b:null},[t.selectedId,t.components]);return oe(()=>{let i=!1;async function b(){try{let u=await fetch(`${o}/canvas/manifest`);if(!u.ok)throw new Error(`HTTP ${u.status}`);let d=await u.json();i||m(d)}catch(u){console.error("[Popmelt Canvas] Failed to load manifest:",u)}}return b(),()=>{i=!0}},[o]),Ce("div",{style:{display:"flex",flexDirection:"row",width:"100vw",height:"100vh",fontFamily:Ee,color:"#1f2937",background:"#ffffff"},children:[ne(te,{manifest:x,viewport:t.viewport,dispatch:r,devOrigin:e,selectedName:a,highlightedName:t.highlightedName}),ne(U,{state:t,dispatch:r})]})}function ot(e,o){Me(e).render(Te(re,o))}export{ot as mountCanvas};
+var ae=Object.defineProperty,se=Object.defineProperties;var le=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var _=(e,o,t)=>o in e?ae(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,u=(e,o)=>{for(var t in o||(o={}))de.call(o,t)&&_(e,t,o[t]);if(X)for(var t of X(o))ce.call(o,t)&&_(e,t,o[t]);return e},y=(e,o)=>se(e,le(o));import{createRoot as Me}from"react-dom/client";import{createElement as Te}from"react";import{useEffect as oe,useMemo as be,useReducer as we,useRef as Se,useState as xe}from"react";var G="popmelt-canvas";function D(e){return Math.round(e/24)*24}var H={viewport:{offsetX:0,offsetY:0,scale:1},components:[],selectedId:null,highlightedName:null,dragState:null};function V(){var e,o;try{let t=localStorage.getItem(G);if(!t)return{};let r=JSON.parse(t);return{components:(e=r.components)!=null?e:[],viewport:(o=r.viewport)!=null?o:H.viewport}}catch(t){return{}}}function B(e){try{let o={components:e.components,viewport:e.viewport};localStorage.setItem(G,JSON.stringify(o))}catch(o){}}function $(e,o){switch(o.type){case"PLACE_COMPONENT":{let t=o.component,r=y(u({},t),{x:D(t.x),y:D(t.y),width:D(t.width),height:D(t.height)});return y(u({},e),{components:[...e.components,r],selectedId:r.id})}case"REMOVE_COMPONENT":return y(u({},e),{components:e.components.filter(t=>t.id!==o.id),selectedId:e.selectedId===o.id?null:e.selectedId});case"MOVE_COMPONENT":return y(u({},e),{components:e.components.map(t=>t.id===o.id?y(u({},t),{x:D(o.x),y:D(o.y)}):t)});case"RESIZE_COMPONENT":return y(u({},e),{components:e.components.map(t=>t.id===o.id?y(u({},t),{width:Math.max(200,o.width),height:Math.max(150,o.height)}):t)});case"SELECT":return y(u({},e),{selectedId:o.id});case"SET_VIEWPORT":return y(u({},e),{viewport:o.viewport});case"PAN":return y(u({},e),{viewport:y(u({},e.viewport),{offsetX:e.viewport.offsetX+o.deltaX,offsetY:e.viewport.offsetY+o.deltaY})});case"START_DRAG":return y(u({},e),{dragState:o.dragState});case"END_DRAG":return y(u({},e),{dragState:null});case"HIGHLIGHT":return y(u({},e),{highlightedName:o.name});default:return e}}function F(e,o,t){return{x:(e-t.offsetX)/t.scale,y:(o-t.offsetY)/t.scale}}import{useCallback as fe,useEffect as A,useRef as Y}from"react";import{useCallback as O,useRef as J,useState as z}from"react";var pe="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Z={borderWidth:3,borderStyle:"solid",borderImage:`url("${pe}") 4 / 1.9 / 0 round`};import{jsx as E,jsxs as M}from"react/jsx-runtime";function Q({component:e,selected:o,highlighted:t,isDragging:r,viewport:x,dispatch:m}){let b=J(null),s=J(null),[i,S]=z(null),[g,d]=z(!1),[n,c]=z(!1),l=e.entry.routes&&e.entry.routes.length>0,a=O(()=>{var w,R;d(!1),c(!1);try{let P=(R=(w=s.current)==null?void 0:w.contentWindow)==null?void 0:R.location.pathname;if(!P)return;let I=new URL(e.iframeUrl).pathname;P!==I&&S(P)}catch(P){}setTimeout(()=>{var P;try{let I=(P=s.current)==null?void 0:P.contentDocument;I!=null&&I.querySelector("nextjs-portal")&&d(!0)}catch(I){}},2e3)},[e.iframeUrl]),p=O(w=>{w.stopPropagation(),m({type:"SELECT",id:e.id});let R={type:"move",componentId:e.id,startX:w.clientX,startY:w.clientY,originX:e.x,originY:e.y};m({type:"START_DRAG",dragState:R})},[e.id,e.x,e.y,m]),v=O(w=>{w.stopPropagation(),w.preventDefault(),m({type:"SELECT",id:e.id});let R={type:"resize",componentId:e.id,startX:w.clientX,startY:w.clientY,originW:e.width,originH:e.height};m({type:"START_DRAG",dragState:R})},[e.id,e.width,e.height,m]),h=O(w=>{w.stopPropagation(),m({type:"REMOVE_COMPONENT",id:e.id})},[e.id,m]),T=O(w=>{w.stopPropagation(),m({type:"SELECT",id:e.id})},[e.id,m]),f=1/x.scale,N=o||t,L=3*f,ie=4*f;return M("div",{onMouseDown:T,style:{position:"absolute",left:e.x,top:e.y,width:e.width,height:e.height,background:"#ffffff",display:"flex",flexDirection:"column",boxShadow:N?`0 ${2*f}px ${12*f}px rgba(0,0,0,0.12)`:`0 ${f}px ${4*f}px rgba(0,0,0,0.06)`,borderWidth:L,borderStyle:"solid",borderImage:Z.borderImage,opacity:N?1:void 0},children:[E("div",{onMouseDown:T,style:{position:"absolute",inset:-(L+ie),pointerEvents:"auto"}}),!N&&E("div",{style:{position:"absolute",inset:-L,pointerEvents:"none",background:"rgba(255,255,255,0.75)"}}),M("div",{ref:b,onMouseDown:p,style:{height:28*f,background:g?"#fef2f2":"#f9fafb",display:"flex",alignItems:"center",padding:`0 ${8*f}px`,cursor:"grab",userSelect:"none",borderBottom:`${f}px solid rgba(0,0,0,0.06)`,flexShrink:0,position:"relative"},children:[M("span",{style:{flex:1,fontSize:11*f,fontWeight:600,color:"#1f2937",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"inherit",display:"flex",alignItems:"center",gap:4*f},children:[e.entry.name,!l&&E("span",{style:{fontSize:9*f,color:"#d1d5db",fontWeight:400},children:"(no route)"}),g&&E("span",{style:{fontSize:9*f,color:"#ef4444",fontWeight:600},children:"build error"}),i&&M("span",{style:{fontSize:9*f,color:"#f59e0b",fontWeight:400},children:["\u2192 ",i]})]}),M("span",{style:{fontSize:10*f,color:"#9ca3af",marginRight:6*f,whiteSpace:"nowrap",fontFamily:"inherit"},children:[Math.round(e.width),"\xD7",Math.round(e.height)]}),E("button",{onClick:h,style:{background:"none",border:"none",color:"#9ca3af",cursor:"pointer",fontSize:12*f,lineHeight:1,padding:`${2*f}px ${4*f}px`,fontFamily:"inherit"},children:"\u2715"})]}),M("div",{style:{flex:1,position:"relative",overflow:"hidden"},children:[E("iframe",{ref:s,src:e.iframeUrl,onLoad:a,sandbox:"allow-scripts allow-same-origin allow-forms allow-popups allow-modals",style:{width:"100%",height:"100%",border:"none",pointerEvents:r?"none":"auto",background:"#fff"},title:e.entry.name}),g&&!n&&M("div",{style:{position:"absolute",inset:0,background:"#fff",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:24,zIndex:2},children:[E("div",{style:{fontSize:13,color:"#991b1b",fontWeight:600},children:"Build error"}),M("div",{style:{fontSize:11,color:"#6b7280",marginTop:6,textAlign:"center"},children:["This component has unresolvable imports.",E("br",{}),"Other components are not affected."]}),E("button",{onClick:()=>c(!0),style:{marginTop:14,fontSize:11,color:"#6b7280",background:"none",border:"1px solid #e5e7eb",padding:"4px 12px",cursor:"pointer",fontFamily:"inherit"},children:"Show details"})]})]}),E("div",{onMouseDown:v,style:{position:"absolute",right:0,bottom:0,width:14*f,height:14*f,cursor:"nwse-resize",background:"linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.15) 50%)",zIndex:1}})]})}import{jsx as K,jsxs as W}from"react/jsx-runtime";var ue=.1,ge=3,me=.004;function U({state:e,dispatch:o}){let t=Y(null),{viewport:r,components:x,selectedId:m,highlightedName:b,dragState:s}=e,i=Y({x:0,y:0}),S=Y({viewport:r,dispatch:o});S.current={viewport:r,dispatch:o};function g(n,c,l,a,p,v){let h=Math.min(ge,Math.max(ue,a)),T=h/c.scale;l({type:"SET_VIEWPORT",viewport:{scale:h,offsetX:p-(p-c.offsetX)*T,offsetY:v-(v-c.offsetY)*T}})}A(()=>{let n=t.current;if(!n)return;let c=a=>{a.preventDefault();let{viewport:p,dispatch:v}=S.current,h=n.getBoundingClientRect();if(i.current={x:a.clientX-h.left,y:a.clientY-h.top},a.ctrlKey||a.metaKey){let T=1-a.deltaY*me;g(n,p,v,p.scale*T,i.current.x,i.current.y)}else v({type:"PAN",deltaX:-a.deltaX,deltaY:-a.deltaY})},l=a=>{let p=n.getBoundingClientRect();i.current={x:a.clientX-p.left,y:a.clientY-p.top}};return n.addEventListener("wheel",c,{passive:!1}),n.addEventListener("mousemove",l),()=>{n.removeEventListener("wheel",c),n.removeEventListener("mousemove",l)}},[]),A(()=>{let n=t.current;if(!n)return;let c=l=>{if(!l.metaKey&&!l.ctrlKey)return;let{viewport:a,dispatch:p}=S.current,{x:v,y:h}=i.current;l.key==="0"?(l.preventDefault(),g(n,a,p,1,v,h)):l.key==="="||l.key==="+"?(l.preventDefault(),g(n,a,p,a.scale+.25,v,h)):l.key==="-"&&(l.preventDefault(),g(n,a,p,a.scale-.25,v,h))};return window.addEventListener("keydown",c,{capture:!0}),()=>window.removeEventListener("keydown",c,{capture:!0})},[]);let d=fe(n=>{var c;n.target!==n.currentTarget&&n.target!==((c=t.current)==null?void 0:c.firstChild)||(o({type:"SELECT",id:null}),o({type:"START_DRAG",dragState:{type:"pan",startX:n.clientX,startY:n.clientY,originOffsetX:r.offsetX,originOffsetY:r.offsetY}}))},[r.offsetX,r.offsetY,o]);return A(()=>{if(!s)return;let n=l=>{let a=l.clientX-s.startX,p=l.clientY-s.startY;switch(s.type){case"pan":o({type:"SET_VIEWPORT",viewport:y(u({},r),{offsetX:s.originOffsetX+a,offsetY:s.originOffsetY+p})});break;case"move":o({type:"MOVE_COMPONENT",id:s.componentId,x:s.originX+a/r.scale,y:s.originY+p/r.scale});break;case"resize":{let v=a/r.scale,h=p/r.scale;l.shiftKey&&(Math.abs(v)>Math.abs(h)?h=0:v=0),o({type:"RESIZE_COMPONENT",id:s.componentId,width:s.originW+v,height:s.originH+h});break}}},c=()=>{o({type:"END_DRAG"})};return window.addEventListener("mousemove",n),window.addEventListener("mouseup",c),()=>{window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",c)}},[s,r,o]),W("div",{ref:t,onMouseDown:d,style:{flex:1,overflow:"hidden",position:"relative",background:"#f9fafb",cursor:(s==null?void 0:s.type)==="pan"?"grabbing":"default"},children:[W("div",{style:{transform:`translate(${r.offsetX}px, ${r.offsetY}px) scale(${r.scale})`,transformOrigin:"0 0",position:"absolute",top:0,left:0},children:[K("div",{onMouseDown:d,style:{position:"fixed",top:-1e4,left:-1e4,width:2e4,height:2e4,backgroundImage:"radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px)",backgroundSize:"24px 24px",pointerEvents:"auto"}}),x.map(n=>K(Q,{component:n,selected:n.id===m,highlighted:n.entry.name===b,isDragging:!!s,viewport:r,dispatch:o},n.id))]}),W("div",{style:{position:"absolute",bottom:12,right:12,fontSize:10,color:"#6b7280",background:"#ffffff",padding:"3px 8px",border:"1px solid rgba(0,0,0,0.08)",userSelect:"none",fontFamily:"inherit"},children:[Math.round(r.scale*100),"%"]})]})}import{useCallback as q,useMemo as ve,useState as ee}from"react";function j(e,o){let t=`${e}::${o}`,r=5381;for(let x=0;x<t.length;x++)r=(r<<5)+r+t.charCodeAt(x)&4294967295;return(r>>>0).toString(16).padStart(8,"0")}import{jsx as C,jsxs as k}from"react/jsx-runtime";var he=Date.now();function te({manifest:e,viewport:o,dispatch:t,devOrigin:r,selectedName:x,highlightedName:m}){let[b,s]=ee(""),i=ve(()=>{var c;if(!e)return new Map;let d=new Map,n=b.toLowerCase();for(let l of e.components){if(n&&!l.name.toLowerCase().includes(n))continue;let a=l.category||"root",p=(c=d.get(a))!=null?c:[];p.push(l),d.set(a,p)}return d},[e,b]),S=q(d=>{let n={x:(window.innerWidth-260)/2+260,y:window.innerHeight/2},c=F(n.x,n.y,o),l=400,a=300,p=j(d.filePath,d.name),v=`${r}/popmelt/render/${p}`,h={id:`placed-${++he}`,entry:d,x:c.x-l/2,y:c.y-a/2,width:l,height:a,iframeUrl:v};t({type:"PLACE_COMPONENT",component:h})},[o,t,r]),g=q(d=>{t({type:"HIGHLIGHT",name:d})},[t]);return k("div",{style:{width:260,height:"100%",background:"#ffffff",borderRight:"1px solid rgba(0,0,0,0.08)",display:"flex",flexDirection:"column",flexShrink:0,overflow:"hidden"},children:[k("div",{style:{padding:"12px 12px 8px",borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[C("div",{style:{fontSize:11,fontWeight:700,color:"#1f2937",marginBottom:8,letterSpacing:"0.5px",textTransform:"uppercase"},children:"Components"}),C("input",{type:"text",placeholder:"search...",value:b,onChange:d=>s(d.target.value),style:{width:"100%",padding:"5px 8px",fontSize:12,background:"#f9fafb",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,color:"#1f2937",outline:"none",boxSizing:"border-box",fontFamily:"inherit"}})]}),k("div",{style:{flex:1,overflowY:"auto",overflowX:"hidden",padding:"4px 0"},children:[!e&&C("div",{style:{padding:12,fontSize:11,color:"#9ca3af"},children:"loading..."}),e&&i.size===0&&C("div",{style:{padding:12,fontSize:11,color:"#9ca3af"},children:"no components found"}),[...i.entries()].map(([d,n])=>C(ye,{category:d,entries:n,onPlace:S,onHover:g,selectedName:x,highlightedName:m},d))]})]})}function ye({category:e,entries:o,onPlace:t,onHover:r,selectedName:x,highlightedName:m}){let[b,s]=ee(!1);return k("div",{children:[k("div",{onClick:()=>s(i=>!i),style:{padding:"6px 12px",fontSize:10,fontWeight:700,color:b?"#9ca3af":"#1f2937",textTransform:"uppercase",letterSpacing:"0.5px",cursor:"pointer",userSelect:"none",display:"flex",alignItems:"center",gap:4,transition:"color 0.15s"},children:[C("span",{style:{color:"#9ca3af",fontWeight:400},children:b?"[+]":"[-]"}),e,C("span",{style:{color:"#d1d5db",marginLeft:"auto",fontWeight:400},children:o.length})]}),!b&&o.map(i=>{let S=i.name===x,g=i.name===m,d=S||g;return k("div",{onClick:()=>t(i),onMouseEnter:()=>r(i.name),onMouseLeave:()=>r(null),style:{padding:"5px 12px 5px 24px",cursor:"pointer",borderLeft:d?"2px solid #1f2937":"2px solid transparent",background:d?"#f9fafb":"transparent",transition:"background 0.1s, border-color 0.1s"},children:[C("div",{style:{fontSize:12,color:"#1f2937",fontWeight:600},children:i.name}),C("div",{style:{fontSize:10,color:"#9ca3af",marginTop:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:i.filePath}),i.routes&&i.routes.length>0?C("div",{style:{display:"flex",gap:3,marginTop:3,flexWrap:"wrap"},children:i.routes.map(n=>C("span",{style:{fontSize:9,padding:"1px 4px",background:"#f3f4f6",color:"#6b7280",border:"1px solid rgba(0,0,0,0.06)"},children:n},n))}):C("div",{style:{fontSize:9,color:"#d1d5db",marginTop:3},children:"(no route)"})]},i.name+i.filePath)})]})}import{jsx as ne,jsxs as Ee}from"react/jsx-runtime";var Ce='"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';function re({devOrigin:e,bridgeOrigin:o}){let[t,r]=we($,H,i=>u(u({},i),V())),[x,m]=xe(null),b=Se();oe(()=>(clearTimeout(b.current),b.current=setTimeout(()=>B(t),300),()=>clearTimeout(b.current)),[t.components,t.viewport]);let s=be(()=>{var i,S;return t.selectedId&&(S=(i=t.components.find(g=>g.id===t.selectedId))==null?void 0:i.entry.name)!=null?S:null},[t.selectedId,t.components]);return oe(()=>{let i=!1;async function S(){try{let g=await fetch(`${o}/canvas/manifest`);if(!g.ok)throw new Error(`HTTP ${g.status}`);let d=await g.json();i||m(d)}catch(g){console.error("[Popmelt Canvas] Failed to load manifest:",g)}}return S(),()=>{i=!0}},[o]),Ee("div",{style:{display:"flex",flexDirection:"row",width:"100vw",height:"100vh",fontFamily:Ce,color:"#1f2937",background:"#ffffff"},children:[ne(te,{manifest:x,viewport:t.viewport,dispatch:r,devOrigin:e,selectedName:s,highlightedName:t.highlightedName}),ne(U,{state:t,dispatch:r})]})}function nt(e,o){Me(e).render(Te(re,o))}export{nt as mountCanvas};