@popmelt.com/core 0.8.3 → 0.8.5

package/dist/canvas.mjs

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

package/dist/chunk-AK32Z7EA.mjs

@@ -0,0 +1 @@
+import{a as p}from"./chunk-NOHXTT24.mjs";import{request as c}from"http";function u(){let e=process.env.POPMELT_BRIDGE_URL;if(!e)return null;try{let t=new URL(e);return{port:t.port?Number.parseInt(t.port,10):null,projectId:process.env.POPMELT_PROJECT_ID||null,leaseEligible:!1}}catch{return null}}async function m(e,t,n){let o=u();if(e?.bridge===!1||o)return o??{port:null,projectId:null,leaseEligible:!1};try{let{startPopmelt:i}=await import("./server-AQ4RRAIQ.mjs"),r=t.config?.server?.host,l=r===!0?"0.0.0.0":r||"localhost",s=t.config?.server?.port??n,d=`http://${l==="0.0.0.0"?"localhost":l}:${s}`,a=await i({port:e?.port,projectRoot:e?.projectRoot,devOrigin:d,force:!0,detached:!0,manageLease:!1});return console.log(`[popmelt] bridge ready at http://localhost:${a.port}`),{port:a.port,projectId:a.projectId,leaseEligible:!0}}catch(i){let r=i instanceof Error?i.message:String(i);return console.warn("[popmelt] bridge failed to start:",r),{port:null,projectId:null,leaseEligible:!1}}}async function v(e,t,n=fetch){if(!e.leaseEligible||e.port===null)return null;let o=await p({port:e.port,projectId:e.projectId},n);if(!o)return null;let i=()=>{r()},r=async()=>{process.removeListener("beforeExit",i),await o.release()};return process.once("beforeExit",i),t.httpServer?.once("close",()=>{r()}),{id:o.id,release:r}}function g(e,t,n){if(n.port===null||!t.startsWith(e))return null;let o=t.slice(e.length),i=o==="/status"?"/status":`/canvas${o}`,r=new URL(i,`http://localhost:${n.port}`);return n.projectId&&r.searchParams.set("projectId",n.projectId),r}function b(e,t){return(n,o,i)=>{let r=g(e,n.url||"",t());if(!r)return i();let l=c(r,{method:n.method,headers:{...n.headers,host:r.host}},s=>{o.writeHead(s.statusCode||502,s.headers),s.pipe(o)});l.on("error",()=>{o.writeHead(502,{"Content-Type":"text/plain"}),o.end(`Popmelt bridge not running on port ${t().port}`)}),n.pipe(l)}}function P(e){let t=e.port===null?null:`http://localhost:${e.port}`;return`window.__POPMELT_BRIDGE_URL__=${JSON.stringify(t)};window.__POPMELT_PROJECT_ID__=${JSON.stringify(e.projectId)};`}export{m as a,v as b,b as c,P as d};

package/dist/chunk-NOHXTT24.mjs

@@ -0,0 +1 @@
+import{randomUUID as u}from"crypto";var g=5e3,f=250;function c(n){return{"Content-Type":"application/json",...n.projectId?{"X-Popmelt-Project-Id":n.projectId}:{}}}async function S(n,r=fetch){let t=`${process.pid}-${u()}`,s=`http://127.0.0.1:${n.port}`,o=!1,e=!1,a=async()=>(await r(`${s}/leases`,{method:"POST",headers:c(n),body:JSON.stringify({leaseId:t,ownerPid:process.pid})})).ok;try{if(!await a())return null}catch(i){return console.warn("[popmelt] failed to register bridge lease:",i instanceof Error?i.message:String(i)),null}let d=async()=>{if(!(o||e)){e=!0;try{(await r(`${s}/leases/${encodeURIComponent(t)}`,{method:"PATCH",headers:c(n)})).status===404&&!o&&await a()}catch{}finally{e=!1}}},l=setInterval(()=>{d()},g);return l.unref?.(),{id:t,release:async()=>{if(!o){o=!0,clearInterval(l);try{await r(`${s}/leases/${encodeURIComponent(t)}`,{method:"DELETE",headers:c(n),keepalive:!0})}catch{}}}}}function h(n,r=process){let t=!1,s=new Map,o=()=>{if(!t){t=!0;for(let[e,a]of s)r.removeListener(e,a);s.clear()}};for(let e of["SIGINT","SIGTERM"]){let a=()=>{let d=r.listenerCount(e),l=n.release();if(d>0)return;let p=new Promise(i=>{setTimeout(i,f)});Promise.race([l,p]).finally(()=>{o(),r.kill(r.pid,e)})};s.set(e,a),r.prependOnceListener(e,a)}return o}export{S as a,h as b};