From 830c19ea3af6424b546074c4cc8d14a550ffd5a0 Mon Sep 17 00:00:00 2001 From: Immac Date: Wed, 4 Mar 2026 08:14:58 -0600 Subject: [PATCH] fix: import app directly from /scripts/app.js instead of polling window.app (root cause of timeout) --- ...leMixerPanel-B66F9prP.js => StyleMixerPanel-BsqgMyeW.js} | 4 ++-- dist/immac_style_mixer/main.js | 6 +++--- ui/src/main.tsx | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) rename dist/immac_style_mixer/{StyleMixerPanel-B66F9prP.js => StyleMixerPanel-BsqgMyeW.js} (52%) diff --git a/dist/immac_style_mixer/StyleMixerPanel-B66F9prP.js b/dist/immac_style_mixer/StyleMixerPanel-BsqgMyeW.js similarity index 52% rename from dist/immac_style_mixer/StyleMixerPanel-B66F9prP.js rename to dist/immac_style_mixer/StyleMixerPanel-BsqgMyeW.js index 0e910d4..148a81b 100644 --- a/dist/immac_style_mixer/StyleMixerPanel-B66F9prP.js +++ b/dist/immac_style_mixer/StyleMixerPanel-BsqgMyeW.js @@ -1,4 +1,4 @@ -import{j as e}from"./main.js";import{r as o,b as me}from"./vendor-DPfS0z4g.js";const oe={styles:[],mixes:[],current_mix_id:null},ae="/immac_style_mixer/api/data";function xe(){const[t,r]=o.useState(oe),[f,l]=o.useState(!0),[g,b]=o.useState(null),[m,j]=o.useState(!1),C=o.useRef(oe),w=o.useRef(null);o.useEffect(()=>{fetch(ae).then(p=>{if(!p.ok)throw new Error(`HTTP ${p.status}`);return p.json()}).then(p=>{C.current=p,r(p)}).catch(p=>b(String(p))).finally(()=>l(!1))},[]);const E=o.useCallback((p,k)=>{var _,T,H,F,x,z,O,P;const h=C.current,v=typeof p=="function"?p(h):p;C.current=v,r(v);const D=v.mixes.length-h.mixes.length,c=v.styles.length-h.styles.length;if(D<0||c<0){try{(T=(_=window.app)==null?void 0:_.refreshComboInNodes)==null||T.call(_),(F=(H=window.app)==null?void 0:H.toast)==null||F.add({severity:"warn",summary:"Style Mixer",detail:"A mix or style was deleted — node combo lists have been refreshed.",life:4e3})}catch(I){console.warn("[ImmacStyleMixer] refreshComboInNodes/toast failed",I)}j(!1)}else if(D>0||c>0){const I=c>0&&h.styles.length===0,n=D>0&&h.mixes.length===0;if(I||n){try{(z=(x=window.app)==null?void 0:x.refreshComboInNodes)==null||z.call(x),(P=(O=window.app)==null?void 0:O.toast)==null||P.add({severity:"info",summary:"Style Mixer",detail:"First item added — node combo lists refreshed.",life:4e3})}catch(a){console.warn("[ImmacStyleMixer] refreshComboInNodes/toast failed",a)}j(!1)}else k!=null&&k.silent||j(!0)}w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{fetch(ae,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(v)}).then(()=>{var I,n,a;try{(a=(n=(I=window.app)==null?void 0:I.graph)==null?void 0:n.nodes)==null||a.forEach(s=>{typeof s._immacUpdatePreview=="function"&&s._immacUpdatePreview()})}catch{}}).catch(I=>console.error("[ImmacStyleMixer] Save failed",I))},400)},[]),S=o.useCallback(()=>{var p,k,h,v,D;try{(k=(p=window.app)==null?void 0:p.refreshComboInNodes)==null||k.call(p),(D=(v=(h=window.app)==null?void 0:h.graph)==null?void 0:v.nodes)==null||D.forEach(c=>{typeof c._immacUpdatePreview=="function"&&c._immacUpdatePreview()})}catch(c){console.warn("[ImmacStyleMixer] refreshComboInNodes failed",c)}j(!1)},[]);return{data:t,loading:f,error:g,update:E,pendingRefresh:m,refreshNodes:S}}async function ge(t){const r=new FormData;r.append("image",t),r.append("subfolder","immac_style_mixer/styles"),r.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:r});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function Q(t,r){const f=r?`&t=${r}`:"";return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input${f}`}async function he(t){const r=new FormData;r.append("image",t),r.append("subfolder","immac_style_mixer/mixes"),r.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:r});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function re(t,r){const f=r?`&t=${r}`:"";return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input${f}`}function ne({src:t,alt:r,onClose:f}){return o.useEffect(()=>{function l(g){g.key==="Escape"&&f()}return window.addEventListener("keydown",l),()=>window.removeEventListener("keydown",l)},[f]),me.createPortal(e.jsxs("div",{onClick:f,style:{position:"fixed",inset:0,zIndex:99999,background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:[e.jsx("img",{src:t,alt:r??"",onClick:l=>l.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),e.jsx("button",{onClick:f,title:"Close",style:{position:"fixed",top:16,right:20,background:"none",border:"none",color:"#fff",fontSize:28,cursor:"pointer",lineHeight:1,opacity:.8},children:"✕"})]}),document.body)}function pe({value:t,onChange:r,dragMin:f=0,dragMax:l=1,step:g=.01,pixelsPerStep:b=2,width:m=72,decimals:j=2}){const[C,w]=o.useState(!1),[E,S]=o.useState(""),p=o.useRef(null),k=o.useCallback(()=>{const x=parseFloat(E);isNaN(x)||r(x),w(!1)},[E,r]);o.useEffect(()=>{var x,z;C&&((x=p.current)==null||x.focus(),(z=p.current)==null||z.select())},[C]);const h=o.useRef(!1),v=o.useRef(0),D=o.useRef(0),c=o.useRef(!1),_=o.useCallback(x=>{C||(x.currentTarget.setPointerCapture(x.pointerId),h.current=!0,c.current=!1,v.current=x.clientX,D.current=Math.max(f,Math.min(l,t)))},[C,t,f,l]),T=o.useCallback(x=>{if(!h.current)return;const z=x.clientX-v.current;Math.abs(z)>2&&(c.current=!0);const O=z/b,P=D.current+O*g,I=Math.round(P/g)*g,n=parseFloat(Math.max(f,Math.min(l,I)).toFixed(j));r(n)},[g,b,j,f,l,r]),H=o.useCallback(()=>{h.current&&!c.current&&(S(t.toFixed(j)),w(!0)),h.current=!1},[t,j]),F=Math.max(0,Math.min(1,(t-f)/(l-f)))*100;return C?e.jsx("input",{ref:p,type:"text",inputMode:"decimal",value:E,onChange:x=>S(x.target.value),onBlur:k,onKeyDown:x=>{x.key==="Enter"&&k(),x.key==="Escape"&&w(!1)},style:{width:m,background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-primary-color, #6c6)",borderRadius:4,color:"inherit",padding:"2px 4px",fontSize:12,boxSizing:"border-box",textAlign:"center",outline:"none"}}):e.jsxs("div",{draggable:!1,onMouseDown:x=>x.stopPropagation(),onDragStart:x=>x.stopPropagation(),style:{position:"relative",width:m,height:20,borderRadius:4,overflow:"hidden",cursor:"ew-resize",userSelect:"none",flexShrink:0,border:"1px solid var(--p-surface-border, #555)",background:"var(--p-surface-ground, #141414)",boxSizing:"border-box"},onPointerDown:_,onPointerMove:T,onPointerUp:H,children:[e.jsx("div",{style:{position:"absolute",inset:0,width:`${F}%`,background:"var(--p-primary-color, #4a7a4a)",opacity:.55,pointerEvents:"none"}}),e.jsx("span",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,color:"var(--p-text-color, #ddd)",pointerEvents:"none",fontVariantNumeric:"tabular-nums"},children:t.toFixed(j)})]})}function ye({mix:t,styles:r,isActive:f,isDirty:l,onActivate:g,onUpdate:b,onDelete:m,onDuplicate:j,onRefreshCache:C}){function w(i){i.target.closest("button, input, select, textarea, a")||g()}const[E,S]=o.useState(!1),[p,k]=o.useState(t.name),[h,v]=o.useState(!1),[D,c]=o.useState(!1),[_,T]=o.useState(!1),[H,F]=o.useState(!1),[x,z]=o.useState(!1),[O,P]=o.useState(!1),I=o.useRef(null);function n(){const i=t.styles.filter(u=>u.enabled).map(u=>{var y;return((y=r.find(N=>N.id===u.style_id))==null?void 0:y.value)??""}).filter(Boolean);i.length!==0&&navigator.clipboard.writeText(i.join(", ")).then(()=>{z(!0),setTimeout(()=>z(!1),1500)})}async function a(i){if(i.type.startsWith("image/")){v(!0);try{const u=await he(i);b({...t,image_filename:u,image_updated_at:Date.now()})}catch(u){console.error("[ImmacStyleMixer] Mix image upload failed",u)}finally{v(!1)}}}function s(){S(!1),p.trim()!==t.name&&b({...t,name:p.trim()||t.name})}function R(i,u){const y=t.styles.map((N,B)=>B===i?{...N,...u}:N);b({...t,styles:y},{silent:!0})}function L(i){b({...t,styles:t.styles.filter((u,y)=>y!==i)},{silent:!0})}function U(i){t.styles.some(u=>u.style_id===i)||b({...t,styles:[...t.styles,{style_id:i,weight:1,enabled:!0}]},{silent:!0})}const d=r.filter(i=>!t.styles.some(u=>u.style_id===i.id));function M(){return{draggable:!0,onDragStart:i=>{i.dataTransfer.effectAllowed="copy",i.dataTransfer.setData("application/x-immac-mix-name",t.name)},onDragEnd:i=>{var K,X,Y,G,J,q,ie;const u=(K=window.app)==null?void 0:K.canvas;if(!u)return;const y=u.canvas;if(!y||document.elementFromPoint(i.clientX,i.clientY)!==y)return;const N=u.convertEventToCanvasOffset(i),B=window.LiteGraph,$=B==null?void 0:B.createNode("StyleMixImmacStyleMixer");if(!$)return;$.pos=N,(Y=(X=window.app)==null?void 0:X.graph)==null||Y.add($);const A=(G=$.widgets)==null?void 0:G.find(fe=>fe.name==="mix");A&&(A.value=t.name,(J=A.callback)==null||J.call(A,t.name,null,null,null,$)),(ie=(q=window.app)==null?void 0:q.graph)==null||ie.setDirtyCanvas(!0,!0)}}}return e.jsxs("div",{style:{border:`2px solid ${O?"#88aaff":f?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:8,padding:10,background:O?"rgba(100,130,255,0.07)":"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:8,width:"100%",position:"relative",overflow:"hidden",transition:"border-color 0.15s, background 0.15s"},onClick:w,onDragOver:i=>{i.dataTransfer.types.includes("application/x-immac-style-id")&&(i.preventDefault(),i.dataTransfer.dropEffect="copy",P(!0))},onDragLeave:i=>{i.currentTarget.contains(i.relatedTarget)||P(!1)},onDrop:i=>{P(!1);const u=i.dataTransfer.getData("application/x-immac-style-id");u&&(i.preventDefault(),i.stopPropagation(),U(u))},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("span",{...M(),title:"Drag to canvas",style:{cursor:"grab",color:"#666",fontSize:14,flexShrink:0,lineHeight:1,userSelect:"none"},children:"⠿"}),E?e.jsx("input",{autoFocus:!0,value:p,onChange:i=>k(i.target.value),onBlur:s,onKeyDown:i=>{i.key==="Enter"&&s(),i.key==="Escape"&&S(!1)},style:le}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{k(t.name),S(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),l&&e.jsx("button",{title:"Pending node-cache changes — click to reload",onClick:i=>{i.stopPropagation(),C()},style:{...W,color:"#f5a623",fontSize:14,animation:"immac-pulse 1.8s ease-in-out infinite"},children:e.jsx("i",{className:"pi pi-exclamation-circle"})}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>b({...t,favorite:!t.favorite}),style:W,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Duplicate mix",onClick:j,style:{...W,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-copy"})}),(()=>{const i=t.styles.some(u=>{var y;return u.enabled&&((y=r.find(N=>N.id===u.style_id))==null?void 0:y.value)});return e.jsx("button",{title:i?"Copy combined prompt":"No enabled styles with prompt text",onClick:u=>{u.stopPropagation(),n()},disabled:!i,style:{...W,color:x?"#6c6":"var(--p-text-muted-color, #888)",opacity:i?1:.35},children:e.jsx("i",{className:x?"pi pi-check":"pi pi-clipboard"})})})(),e.jsx("button",{title:"Delete mix",onClick:()=>T(!0),style:{...W,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]}),_&&e.jsxs("div",{style:{position:"absolute",inset:0,background:"rgba(20,20,20,0.92)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:12,zIndex:10},children:[e.jsx("i",{className:"pi pi-trash",style:{fontSize:22,color:"#e55"}}),e.jsxs("span",{style:{fontSize:13,color:"#ddd",fontWeight:600},children:['Delete "',t.name,'"?']}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>T(!1),style:{...se},children:"Cancel"}),e.jsx("button",{onClick:m,style:{...se,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[e.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var i;return(i=I.current)==null?void 0:i.click()},onDragOver:i=>i.preventDefault(),onDrop:i=>{i.preventDefault();const u=i.dataTransfer.files[0];u&&a(u)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888",flexShrink:0},children:h?"Uploading…":t.image_filename?e.jsx("img",{src:re(t.image_filename,t.image_updated_at),alt:t.name,style:{width:"100%",height:"100%",objectFit:"contain",transition:"transform 0.3s ease",transform:H?"scale(1.05)":"scale(1)"}}):"+ cover image"}),!h&&t.image_filename&&H&&e.jsx("button",{title:"View full size",onClick:i=>{i.stopPropagation(),c(!0)},style:be,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),D&&t.image_filename&&e.jsx(ne,{src:re(t.image_filename,t.image_updated_at),alt:t.name,onClose:()=>c(!1)}),e.jsx("input",{ref:I,type:"file",accept:"image/*",style:{display:"none"},onChange:i=>{var y;const u=(y=i.target.files)==null?void 0:y[0];u&&a(u),i.target.value=""}}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,maxHeight:240,overflowY:"auto"},children:[t.styles.length===0&&e.jsx("div",{style:{fontSize:11,color:"#666"},children:"No styles added yet."}),t.styles.map((i,u)=>{const y=r.find(N=>N.id===i.style_id);return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("button",{title:i.enabled?"Disable":"Enable",onClick:()=>R(u,{enabled:!i.enabled}),style:{...W,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:i.enabled?"var(--p-primary-color, #557755)":"transparent",color:i.enabled?"#fff":"#888",minWidth:32},children:i.enabled?"ON":"OFF"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(y==null?void 0:y.name)??i.style_id}),e.jsx(pe,{value:i.weight,onChange:N=>R(u,{weight:N}),step:.01,width:64}),e.jsx("button",{title:"Remove from mix",onClick:()=>L(u),style:{...W,color:"#e55",fontSize:13},children:"✕"})]},i.style_id)})]}),e.jsxs("select",{value:"",disabled:d.length===0,onChange:i=>{i.target.value&&U(i.target.value)},style:{...le,cursor:d.length===0?"not-allowed":"pointer",opacity:d.length===0?.45:1},title:d.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:d.length===0?"— all styles already added —":"+ add style…"}),d.map(i=>e.jsx("option",{value:i.id,children:i.name},i.id))]})]})}const se={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},W={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},be={position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},le={background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-surface-border, #444)",borderRadius:4,color:"inherit",padding:"2px 4px",fontSize:12,boxSizing:"border-box"};(()=>{if(document.getElementById("immac-pulse-style"))return;const t=document.createElement("style");t.id="immac-pulse-style",t.textContent=`@keyframes immac-pulse { +import{j as e}from"./main.js";import{r as o,b as me}from"./vendor-DPfS0z4g.js";import"/scripts/app.js";const oe={styles:[],mixes:[],current_mix_id:null},ae="/immac_style_mixer/api/data";function xe(){const[t,r]=o.useState(oe),[f,l]=o.useState(!0),[g,b]=o.useState(null),[m,j]=o.useState(!1),C=o.useRef(oe),w=o.useRef(null);o.useEffect(()=>{fetch(ae).then(p=>{if(!p.ok)throw new Error(`HTTP ${p.status}`);return p.json()}).then(p=>{C.current=p,r(p)}).catch(p=>b(String(p))).finally(()=>l(!1))},[]);const E=o.useCallback((p,k)=>{var _,T,H,F,x,z,O,P;const h=C.current,v=typeof p=="function"?p(h):p;C.current=v,r(v);const D=v.mixes.length-h.mixes.length,c=v.styles.length-h.styles.length;if(D<0||c<0){try{(T=(_=window.app)==null?void 0:_.refreshComboInNodes)==null||T.call(_),(F=(H=window.app)==null?void 0:H.toast)==null||F.add({severity:"warn",summary:"Style Mixer",detail:"A mix or style was deleted — node combo lists have been refreshed.",life:4e3})}catch(I){console.warn("[ImmacStyleMixer] refreshComboInNodes/toast failed",I)}j(!1)}else if(D>0||c>0){const I=c>0&&h.styles.length===0,n=D>0&&h.mixes.length===0;if(I||n){try{(z=(x=window.app)==null?void 0:x.refreshComboInNodes)==null||z.call(x),(P=(O=window.app)==null?void 0:O.toast)==null||P.add({severity:"info",summary:"Style Mixer",detail:"First item added — node combo lists refreshed.",life:4e3})}catch(a){console.warn("[ImmacStyleMixer] refreshComboInNodes/toast failed",a)}j(!1)}else k!=null&&k.silent||j(!0)}w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{fetch(ae,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(v)}).then(()=>{var I,n,a;try{(a=(n=(I=window.app)==null?void 0:I.graph)==null?void 0:n.nodes)==null||a.forEach(s=>{typeof s._immacUpdatePreview=="function"&&s._immacUpdatePreview()})}catch{}}).catch(I=>console.error("[ImmacStyleMixer] Save failed",I))},400)},[]),S=o.useCallback(()=>{var p,k,h,v,D;try{(k=(p=window.app)==null?void 0:p.refreshComboInNodes)==null||k.call(p),(D=(v=(h=window.app)==null?void 0:h.graph)==null?void 0:v.nodes)==null||D.forEach(c=>{typeof c._immacUpdatePreview=="function"&&c._immacUpdatePreview()})}catch(c){console.warn("[ImmacStyleMixer] refreshComboInNodes failed",c)}j(!1)},[]);return{data:t,loading:f,error:g,update:E,pendingRefresh:m,refreshNodes:S}}async function ge(t){const r=new FormData;r.append("image",t),r.append("subfolder","immac_style_mixer/styles"),r.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:r});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function Q(t,r){const f=r?`&t=${r}`:"";return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input${f}`}async function he(t){const r=new FormData;r.append("image",t),r.append("subfolder","immac_style_mixer/mixes"),r.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:r});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function re(t,r){const f=r?`&t=${r}`:"";return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input${f}`}function ne({src:t,alt:r,onClose:f}){return o.useEffect(()=>{function l(g){g.key==="Escape"&&f()}return window.addEventListener("keydown",l),()=>window.removeEventListener("keydown",l)},[f]),me.createPortal(e.jsxs("div",{onClick:f,style:{position:"fixed",inset:0,zIndex:99999,background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:[e.jsx("img",{src:t,alt:r??"",onClick:l=>l.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),e.jsx("button",{onClick:f,title:"Close",style:{position:"fixed",top:16,right:20,background:"none",border:"none",color:"#fff",fontSize:28,cursor:"pointer",lineHeight:1,opacity:.8},children:"✕"})]}),document.body)}function pe({value:t,onChange:r,dragMin:f=0,dragMax:l=1,step:g=.01,pixelsPerStep:b=2,width:m=72,decimals:j=2}){const[C,w]=o.useState(!1),[E,S]=o.useState(""),p=o.useRef(null),k=o.useCallback(()=>{const x=parseFloat(E);isNaN(x)||r(x),w(!1)},[E,r]);o.useEffect(()=>{var x,z;C&&((x=p.current)==null||x.focus(),(z=p.current)==null||z.select())},[C]);const h=o.useRef(!1),v=o.useRef(0),D=o.useRef(0),c=o.useRef(!1),_=o.useCallback(x=>{C||(x.currentTarget.setPointerCapture(x.pointerId),h.current=!0,c.current=!1,v.current=x.clientX,D.current=Math.max(f,Math.min(l,t)))},[C,t,f,l]),T=o.useCallback(x=>{if(!h.current)return;const z=x.clientX-v.current;Math.abs(z)>2&&(c.current=!0);const O=z/b,P=D.current+O*g,I=Math.round(P/g)*g,n=parseFloat(Math.max(f,Math.min(l,I)).toFixed(j));r(n)},[g,b,j,f,l,r]),H=o.useCallback(()=>{h.current&&!c.current&&(S(t.toFixed(j)),w(!0)),h.current=!1},[t,j]),F=Math.max(0,Math.min(1,(t-f)/(l-f)))*100;return C?e.jsx("input",{ref:p,type:"text",inputMode:"decimal",value:E,onChange:x=>S(x.target.value),onBlur:k,onKeyDown:x=>{x.key==="Enter"&&k(),x.key==="Escape"&&w(!1)},style:{width:m,background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-primary-color, #6c6)",borderRadius:4,color:"inherit",padding:"2px 4px",fontSize:12,boxSizing:"border-box",textAlign:"center",outline:"none"}}):e.jsxs("div",{draggable:!1,onMouseDown:x=>x.stopPropagation(),onDragStart:x=>x.stopPropagation(),style:{position:"relative",width:m,height:20,borderRadius:4,overflow:"hidden",cursor:"ew-resize",userSelect:"none",flexShrink:0,border:"1px solid var(--p-surface-border, #555)",background:"var(--p-surface-ground, #141414)",boxSizing:"border-box"},onPointerDown:_,onPointerMove:T,onPointerUp:H,children:[e.jsx("div",{style:{position:"absolute",inset:0,width:`${F}%`,background:"var(--p-primary-color, #4a7a4a)",opacity:.55,pointerEvents:"none"}}),e.jsx("span",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,color:"var(--p-text-color, #ddd)",pointerEvents:"none",fontVariantNumeric:"tabular-nums"},children:t.toFixed(j)})]})}function ye({mix:t,styles:r,isActive:f,isDirty:l,onActivate:g,onUpdate:b,onDelete:m,onDuplicate:j,onRefreshCache:C}){function w(i){i.target.closest("button, input, select, textarea, a")||g()}const[E,S]=o.useState(!1),[p,k]=o.useState(t.name),[h,v]=o.useState(!1),[D,c]=o.useState(!1),[_,T]=o.useState(!1),[H,F]=o.useState(!1),[x,z]=o.useState(!1),[O,P]=o.useState(!1),I=o.useRef(null);function n(){const i=t.styles.filter(u=>u.enabled).map(u=>{var y;return((y=r.find(N=>N.id===u.style_id))==null?void 0:y.value)??""}).filter(Boolean);i.length!==0&&navigator.clipboard.writeText(i.join(", ")).then(()=>{z(!0),setTimeout(()=>z(!1),1500)})}async function a(i){if(i.type.startsWith("image/")){v(!0);try{const u=await he(i);b({...t,image_filename:u,image_updated_at:Date.now()})}catch(u){console.error("[ImmacStyleMixer] Mix image upload failed",u)}finally{v(!1)}}}function s(){S(!1),p.trim()!==t.name&&b({...t,name:p.trim()||t.name})}function R(i,u){const y=t.styles.map((N,B)=>B===i?{...N,...u}:N);b({...t,styles:y},{silent:!0})}function L(i){b({...t,styles:t.styles.filter((u,y)=>y!==i)},{silent:!0})}function U(i){t.styles.some(u=>u.style_id===i)||b({...t,styles:[...t.styles,{style_id:i,weight:1,enabled:!0}]},{silent:!0})}const d=r.filter(i=>!t.styles.some(u=>u.style_id===i.id));function M(){return{draggable:!0,onDragStart:i=>{i.dataTransfer.effectAllowed="copy",i.dataTransfer.setData("application/x-immac-mix-name",t.name)},onDragEnd:i=>{var K,X,Y,G,J,q,ie;const u=(K=window.app)==null?void 0:K.canvas;if(!u)return;const y=u.canvas;if(!y||document.elementFromPoint(i.clientX,i.clientY)!==y)return;const N=u.convertEventToCanvasOffset(i),B=window.LiteGraph,$=B==null?void 0:B.createNode("StyleMixImmacStyleMixer");if(!$)return;$.pos=N,(Y=(X=window.app)==null?void 0:X.graph)==null||Y.add($);const A=(G=$.widgets)==null?void 0:G.find(fe=>fe.name==="mix");A&&(A.value=t.name,(J=A.callback)==null||J.call(A,t.name,null,null,null,$)),(ie=(q=window.app)==null?void 0:q.graph)==null||ie.setDirtyCanvas(!0,!0)}}}return e.jsxs("div",{style:{border:`2px solid ${O?"#88aaff":f?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:8,padding:10,background:O?"rgba(100,130,255,0.07)":"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:8,width:"100%",position:"relative",overflow:"hidden",transition:"border-color 0.15s, background 0.15s"},onClick:w,onDragOver:i=>{i.dataTransfer.types.includes("application/x-immac-style-id")&&(i.preventDefault(),i.dataTransfer.dropEffect="copy",P(!0))},onDragLeave:i=>{i.currentTarget.contains(i.relatedTarget)||P(!1)},onDrop:i=>{P(!1);const u=i.dataTransfer.getData("application/x-immac-style-id");u&&(i.preventDefault(),i.stopPropagation(),U(u))},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("span",{...M(),title:"Drag to canvas",style:{cursor:"grab",color:"#666",fontSize:14,flexShrink:0,lineHeight:1,userSelect:"none"},children:"⠿"}),E?e.jsx("input",{autoFocus:!0,value:p,onChange:i=>k(i.target.value),onBlur:s,onKeyDown:i=>{i.key==="Enter"&&s(),i.key==="Escape"&&S(!1)},style:le}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{k(t.name),S(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),l&&e.jsx("button",{title:"Pending node-cache changes — click to reload",onClick:i=>{i.stopPropagation(),C()},style:{...W,color:"#f5a623",fontSize:14,animation:"immac-pulse 1.8s ease-in-out infinite"},children:e.jsx("i",{className:"pi pi-exclamation-circle"})}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>b({...t,favorite:!t.favorite}),style:W,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Duplicate mix",onClick:j,style:{...W,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-copy"})}),(()=>{const i=t.styles.some(u=>{var y;return u.enabled&&((y=r.find(N=>N.id===u.style_id))==null?void 0:y.value)});return e.jsx("button",{title:i?"Copy combined prompt":"No enabled styles with prompt text",onClick:u=>{u.stopPropagation(),n()},disabled:!i,style:{...W,color:x?"#6c6":"var(--p-text-muted-color, #888)",opacity:i?1:.35},children:e.jsx("i",{className:x?"pi pi-check":"pi pi-clipboard"})})})(),e.jsx("button",{title:"Delete mix",onClick:()=>T(!0),style:{...W,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]}),_&&e.jsxs("div",{style:{position:"absolute",inset:0,background:"rgba(20,20,20,0.92)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:12,zIndex:10},children:[e.jsx("i",{className:"pi pi-trash",style:{fontSize:22,color:"#e55"}}),e.jsxs("span",{style:{fontSize:13,color:"#ddd",fontWeight:600},children:['Delete "',t.name,'"?']}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>T(!1),style:{...se},children:"Cancel"}),e.jsx("button",{onClick:m,style:{...se,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[e.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var i;return(i=I.current)==null?void 0:i.click()},onDragOver:i=>i.preventDefault(),onDrop:i=>{i.preventDefault();const u=i.dataTransfer.files[0];u&&a(u)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888",flexShrink:0},children:h?"Uploading…":t.image_filename?e.jsx("img",{src:re(t.image_filename,t.image_updated_at),alt:t.name,style:{width:"100%",height:"100%",objectFit:"contain",transition:"transform 0.3s ease",transform:H?"scale(1.05)":"scale(1)"}}):"+ cover image"}),!h&&t.image_filename&&H&&e.jsx("button",{title:"View full size",onClick:i=>{i.stopPropagation(),c(!0)},style:be,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),D&&t.image_filename&&e.jsx(ne,{src:re(t.image_filename,t.image_updated_at),alt:t.name,onClose:()=>c(!1)}),e.jsx("input",{ref:I,type:"file",accept:"image/*",style:{display:"none"},onChange:i=>{var y;const u=(y=i.target.files)==null?void 0:y[0];u&&a(u),i.target.value=""}}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,maxHeight:240,overflowY:"auto"},children:[t.styles.length===0&&e.jsx("div",{style:{fontSize:11,color:"#666"},children:"No styles added yet."}),t.styles.map((i,u)=>{const y=r.find(N=>N.id===i.style_id);return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("button",{title:i.enabled?"Disable":"Enable",onClick:()=>R(u,{enabled:!i.enabled}),style:{...W,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:i.enabled?"var(--p-primary-color, #557755)":"transparent",color:i.enabled?"#fff":"#888",minWidth:32},children:i.enabled?"ON":"OFF"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(y==null?void 0:y.name)??i.style_id}),e.jsx(pe,{value:i.weight,onChange:N=>R(u,{weight:N}),step:.01,width:64}),e.jsx("button",{title:"Remove from mix",onClick:()=>L(u),style:{...W,color:"#e55",fontSize:13},children:"✕"})]},i.style_id)})]}),e.jsxs("select",{value:"",disabled:d.length===0,onChange:i=>{i.target.value&&U(i.target.value)},style:{...le,cursor:d.length===0?"not-allowed":"pointer",opacity:d.length===0?.45:1},title:d.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:d.length===0?"— all styles already added —":"+ add style…"}),d.map(i=>e.jsx("option",{value:i.id,children:i.name},i.id))]})]})}const se={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},W={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},be={position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},le={background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-surface-border, #444)",borderRadius:4,color:"inherit",padding:"2px 4px",fontSize:12,boxSizing:"border-box"};(()=>{if(document.getElementById("immac-pulse-style"))return;const t=document.createElement("style");t.id="immac-pulse-style",t.textContent=`@keyframes immac-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.55; transform:scale(1.15); } -}`,document.head.appendChild(t)})();function ve({style:t,onUpdate:r,onDelete:f,inCurrentMix:l,onAddToMix:g,onRemoveFromMix:b,isDirty:m,onRefreshCache:j}){const[C,w]=o.useState(!1),[E,S]=o.useState(!1),[p,k]=o.useState(t.name),[h,v]=o.useState(t.value),[D,c]=o.useState(!1),[_,T]=o.useState(!1),[H,F]=o.useState(!1),[x,z]=o.useState(!1),[O,P]=o.useState(!1),I=o.useRef(null),n=!!(g||b);function a(){t.value&&navigator.clipboard.writeText(t.value).then(()=>{P(!0),setTimeout(()=>P(!1),1500)})}function s(){w(!1),p.trim()!==t.name&&r({...t,name:p.trim()||t.name})}function R(){S(!1),h!==t.value&&r({...t,value:h})}async function L(d){if(d.type.startsWith("image/")){c(!0);try{const M=await ge(d);r({...t,image_filename:M,image_updated_at:Date.now()})}catch(M){console.error("[ImmacStyleMixer] Image upload failed",M)}finally{c(!1)}}}const U={draggable:!0,onDragStart:d=>{d.dataTransfer.setData("application/x-immac-style-id",t.id),d.dataTransfer.setData("application/x-immac-style-name",t.name),d.dataTransfer.effectAllowed="copy"},onDragEnd:d=>{var $,A,K,X,Y,G,J;const M=($=window.app)==null?void 0:$.canvas;if(!M)return;const i=M.canvas;if(!i||document.elementFromPoint(d.clientX,d.clientY)!==i)return;const u=M.convertEventToCanvasOffset(d),y=window.LiteGraph,N=y==null?void 0:y.createNode("StylePickImmacStyleMixer");if(!N)return;N.pos=u,(K=(A=window.app)==null?void 0:A.graph)==null||K.add(N);const B=(X=N.widgets)==null?void 0:X.find(q=>q.name==="style");B&&(B.value=t.name,(Y=B.callback)==null||Y.call(B,t.name,null,null,null,N)),(J=(G=window.app)==null?void 0:G.graph)==null||J.setDirtyCanvas(!0,!0)}};return e.jsxs("div",{style:{border:"1px solid var(--p-surface-border, #444)",borderRadius:8,padding:8,width:"100%",background:"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:6,position:"relative",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{...U,title:"Drag to canvas",style:{cursor:"grab",color:"#666",fontSize:14,lineHeight:1,userSelect:"none",flexShrink:0},children:"⠿"}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>r({...t,favorite:!t.favorite}),style:V,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsxs("div",{style:{display:"flex",gap:2},children:[l?e.jsx("button",{title:"Remove from current mix",onClick:b,style:{...V,color:"#e66"},children:e.jsx("i",{className:"pi pi-minus"})}):e.jsx("button",{title:n?"Add to current mix":"No active mix",onClick:g,disabled:!n,style:{...V,color:"var(--p-text-muted-color, #888)",opacity:n?1:.35},children:e.jsx("i",{className:"pi pi-plus"})}),e.jsx("button",{title:t.value?"Copy prompt text":"No prompt text to copy",onClick:a,disabled:!t.value,style:{...V,color:O?"#6c6":"var(--p-text-muted-color, #888)",opacity:t.value?1:.35},children:e.jsx("i",{className:O?"pi pi-check":"pi pi-clipboard"})}),m&&e.jsx("button",{title:"Node combo lists may be stale — click to refresh",onClick:j,style:{...V,color:"#f5a623",fontSize:14,animation:"immac-pulse 1.8s ease-in-out infinite"},children:e.jsx("i",{className:"pi pi-exclamation-circle"})}),e.jsx("button",{title:"Delete style",onClick:()=>F(!0),style:{...V,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]})]}),H&&e.jsxs("div",{style:{position:"absolute",inset:0,background:"rgba(20,20,20,0.92)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:12,zIndex:10},children:[e.jsx("i",{className:"pi pi-trash",style:{fontSize:22,color:"#e55"}}),e.jsxs("span",{style:{fontSize:13,color:"#ddd",fontWeight:600},children:['Delete "',t.name,'"?']}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>F(!1),style:{...ce},children:"Cancel"}),e.jsx("button",{onClick:f,style:{...ce,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1),children:[e.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var d;return(d=I.current)==null?void 0:d.click()},onDragOver:d=>d.preventDefault(),onDrop:d=>{d.preventDefault();const M=d.dataTransfer.files[0];M&&L(M)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888"},children:D?"Uploading…":t.image_filename?e.jsx("img",{src:Q(t.image_filename,t.image_updated_at),alt:t.name,style:{width:"100%",height:"100%",objectFit:"contain",transition:"transform 0.3s ease",transform:x?"scale(1.05)":"scale(1)"}}):"+ image"}),!D&&t.image_filename&&x&&e.jsx("button",{title:"View full size",onClick:d=>{d.stopPropagation(),T(!0)},style:ke,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),_&&t.image_filename&&e.jsx(ne,{src:Q(t.image_filename,t.image_updated_at),alt:t.name,onClose:()=>T(!1)}),e.jsx("input",{ref:I,type:"file",accept:"image/*",style:{display:"none"},onChange:d=>{var i;const M=(i=d.target.files)==null?void 0:i[0];M&&L(M),d.target.value=""}}),C?e.jsx("input",{autoFocus:!0,value:p,onChange:d=>k(d.target.value),onBlur:s,onKeyDown:d=>{d.key==="Enter"&&s(),d.key==="Escape"&&w(!1)},style:de}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{k(t.name),w(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),E?e.jsx("textarea",{autoFocus:!0,value:h,onChange:d=>v(d.target.value),onBlur:R,onKeyDown:d=>{d.key==="Escape"&&S(!1)},rows:3,style:{...de,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{v(t.value),S(!0)},style:{fontSize:11,color:"#aaa",cursor:"text",wordBreak:"break-word",minHeight:32},children:t.value||e.jsx("span",{style:{color:"#555"},children:"double-click to add prompt…"})})]})}const ce={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},V={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},ke={position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},de={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-primary-color, #6c6)",borderRadius:4,color:"inherit",padding:"2px 4px",fontSize:12};function je({styles:t,onUpdate:r,onDelete:f,onAdd:l,currentMixStyleIds:g,onAddToMix:b,onRemoveFromMix:m,isDirty:j,onRefreshCache:C}){const[w,E]=o.useState(""),[S,p]=o.useState(!1);function k(){const c=w.trim();c&&(l(c),E(""),p(!1))}const h=t.filter(c=>c.favorite),v=t.filter(c=>!c.favorite),D=[...h,...v];return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(180px, 1fr))",gap:10},children:[D.map(c=>e.jsx(ve,{style:c,onUpdate:r,onDelete:()=>f(c.id),inCurrentMix:g==null?void 0:g.has(c.id),onAddToMix:b?()=>b(c.id):void 0,onRemoveFromMix:m?()=>m(c.id):void 0,isDirty:j,onRefreshCache:C},c.id)),S?e.jsxs("div",{style:{border:"1px dashed var(--p-primary-color, #6c6)",borderRadius:8,padding:10,display:"flex",flexDirection:"column",gap:8,background:"var(--p-surface-section, #1e1e1e)",flexShrink:0},children:[e.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:w,onChange:c=>E(c.target.value),onKeyDown:c=>{c.key==="Enter"&&k(),c.key==="Escape"&&p(!1)},style:we}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:k,style:ue,children:"Add"}),e.jsx("button",{onClick:()=>{p(!1),E("")},style:{...ue,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>p(!0),style:{width:"100%",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:24},children:"+"})]})})}const we={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-primary-color, #6c6)",borderRadius:4,color:"inherit",padding:"4px 6px",fontSize:13},ue={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function Z(){return crypto.randomUUID()}function ee({title:t,children:r,defaultOpen:f=!0,grow:l=!0}){const[g,b]=o.useState(f);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:g&&l?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>b(m=>!m),style:{display:"flex",alignItems:"center",gap:6,background:"none",border:"none",cursor:"pointer",padding:"8px 0",width:"100%",textAlign:"left",color:"#888",flexShrink:0},children:[e.jsx("i",{className:`pi ${g?"pi-chevron-down":"pi-chevron-right"}`,style:{fontSize:10,flexShrink:0}}),e.jsx("span",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em"},children:t})]}),g&&e.jsx("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:8},children:r})]})}function De(){const{data:t,loading:r,error:f,update:l,pendingRefresh:g,refreshNodes:b}=xe(),m=t.mixes.find(n=>n.id===t.current_mix_id)??null,[j,C]=o.useState(null),[w,E]=o.useState(null),[S,p]=o.useState(!1),k=o.useCallback(n=>{const a={id:Z(),name:n,value:"",favorite:!1,image_filename:null};l(s=>({...s,styles:[...s.styles,a]}))},[l]),h=o.useCallback(n=>{l(a=>({...a,styles:a.styles.map(s=>s.id===n.id?n:s)}))},[l]),v=o.useCallback(n=>{l(a=>({...a,styles:a.styles.filter(s=>s.id!==n),mixes:a.mixes.map(s=>({...s,styles:s.styles.filter(R=>R.style_id!==n)}))}))},[l]),D=o.useCallback(n=>{const a={...n,id:Z(),name:`${n.name} (copy)`,favorite:!1};l(s=>{const R=s.mixes.findIndex(U=>U.id===n.id),L=[...s.mixes];return L.splice(R+1,0,a),{...s,mixes:L}})},[l]),c=o.useCallback(()=>{const n={id:Z(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};l(a=>({...a,mixes:[...a.mixes,n]}))},[t.mixes.length,l]),_=o.useCallback((n,a)=>{l(s=>({...s,mixes:s.mixes.map(R=>R.id===n.id?n:R)}),a)},[l]),T=o.useCallback(n=>{m&&(m.styles.some(a=>a.style_id===n)||_({...m,styles:[...m.styles,{style_id:n,weight:1,enabled:!0}]},{silent:!0}))},[m,_]),H=o.useCallback(n=>{m&&_({...m,styles:m.styles.filter(a=>a.style_id!==n)},{silent:!0})},[m,_]),F=o.useCallback(n=>{l(a=>({...a,mixes:a.mixes.filter(s=>s.id!==n),current_mix_id:a.current_mix_id===n?null:a.current_mix_id}))},[l]),x=o.useCallback(n=>{l(a=>({...a,current_mix_id:n}))},[l]),z=o.useCallback((n,a,s)=>{m&&_({...m,styles:m.styles.map(R=>R.style_id===n?{...R,...a}:R)},s)},[m,_]);if(r)return e.jsx("div",{style:te,children:"Loading…"});if(f)return e.jsxs("div",{style:{...te,color:"#e55"},children:["Error: ",f]});const O=t.mixes.filter(n=>n.favorite),P=t.mixes.filter(n=>!n.favorite),I=[...O,...P];return e.jsxs("div",{style:te,children:[e.jsx(ee,{title:"Current Mix",grow:!1,children:m?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:m.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"nowrap",overflowX:"auto",borderRadius:6,border:`1px dashed ${S?"#88aaff":"transparent"}`,background:S?"rgba(100,130,255,0.07)":"transparent",padding:S?4:0,transition:"border-color 0.15s, background 0.15s, padding 0.1s",minHeight:40,paddingBottom:6},onDragOver:n=>{n.dataTransfer.types.includes("application/x-immac-style-id")&&(n.preventDefault(),n.dataTransfer.dropEffect="copy",p(!0))},onDragLeave:n=>{n.currentTarget.contains(n.relatedTarget)||p(!1)},onDrop:n=>{p(!1);const a=n.dataTransfer.getData("application/x-immac-style-id");a&&(n.preventDefault(),T(a))},children:[m.styles.length===0&&!S&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),m.styles.map(n=>{const a=t.styles.find(s=>s.id===n.style_id);return e.jsxs("div",{onMouseEnter:()=>E(n.style_id),onMouseLeave:()=>E(null),onDoubleClick:()=>z(n.style_id,{enabled:!n.enabled},{silent:!0}),style:{border:`1px solid ${n.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,overflow:"hidden",background:"var(--p-surface-section, #1e1e1e)",opacity:n.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",width:180,flexShrink:0},children:[e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[e.jsx("div",{style:{position:"absolute",inset:0,background:"var(--p-surface-ground, #141414)",display:"flex",alignItems:"center",justifyContent:"center"},children:a!=null&&a.image_filename?e.jsx("img",{src:Q(a.image_filename,a.image_updated_at),alt:a.name,style:{width:"100%",height:"100%",objectFit:"contain",display:"block",transition:"transform 0.3s ease",transform:w===n.style_id?"scale(1.05)":"scale(1)"}}):e.jsx("i",{className:"pi pi-image",style:{fontSize:20,color:"#555"}})}),(a==null?void 0:a.image_filename)&&w===n.style_id&&e.jsx("button",{title:"View full size",onClick:()=>C(Q(a.image_filename,a.image_updated_at)),style:{position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},children:e.jsx("i",{className:"pi pi-search-plus"})})]}),e.jsxs("div",{style:{padding:"4px 6px",width:"100%",boxSizing:"border-box",display:"flex",flexDirection:"column",gap:4},children:[e.jsx("div",{style:{fontWeight:600,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center",fontSize:12},children:(a==null?void 0:a.name)??"?"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("button",{title:n.enabled?"Disable style":"Enable style",onClick:s=>{s.stopPropagation(),z(n.style_id,{enabled:!n.enabled},{silent:!0})},style:{background:n.enabled?"var(--p-primary-color, #557755)":"transparent",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,color:n.enabled?"#fff":"#888",cursor:"pointer",fontSize:10,padding:"1px 4px",lineHeight:1,flexShrink:0},children:n.enabled?"ON":"OFF"}),e.jsx("div",{style:{flex:1,minWidth:0},onClick:s=>s.stopPropagation(),children:e.jsx(pe,{value:n.weight,onChange:s=>z(n.style_id,{weight:s},{silent:!0}),step:.01,width:"100%"})}),e.jsx("button",{title:"Remove from mix",onClick:s=>{s.stopPropagation(),H(n.style_id)},style:{background:"none",border:"none",cursor:"pointer",color:"#e66",fontSize:13,padding:"0 2px",lineHeight:1,flexShrink:0},children:"✕"})]})]})]},n.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(ee,{title:"Mixes",children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:10,paddingBottom:4},children:[I.map(n=>e.jsx("div",{style:{flex:"0 0 280px"},children:e.jsx(ye,{mix:n,styles:t.styles,isActive:n.id===t.current_mix_id,isDirty:g,onActivate:()=>x(n.id),onUpdate:_,onDelete:()=>F(n.id),onDuplicate:()=>D(n),onRefreshCache:b})},n.id)),e.jsx("button",{title:"Add a new mix",onClick:c,style:{flex:"0 0 120px",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22},children:"+"})]})}),e.jsx(ee,{title:"Styles",children:e.jsx(je,{styles:t.styles,onUpdate:h,onDelete:v,onAdd:k,currentMixStyleIds:m?new Set(m.styles.map(n=>n.style_id)):void 0,onAddToMix:m?T:void 0,onRemoveFromMix:m?H:void 0,isDirty:g,onRefreshCache:b})}),j&&e.jsx(ne,{src:j,onClose:()=>C(null)})]})}const te={position:"absolute",inset:0,padding:"0 12px",display:"flex",flexDirection:"column",overflow:"hidden",color:"var(--p-text-color, #eee)",fontSize:13,boxSizing:"border-box"};export{De as default}; +}`,document.head.appendChild(t)})();function ve({style:t,onUpdate:r,onDelete:f,inCurrentMix:l,onAddToMix:g,onRemoveFromMix:b,isDirty:m,onRefreshCache:j}){const[C,w]=o.useState(!1),[E,S]=o.useState(!1),[p,k]=o.useState(t.name),[h,v]=o.useState(t.value),[D,c]=o.useState(!1),[_,T]=o.useState(!1),[H,F]=o.useState(!1),[x,z]=o.useState(!1),[O,P]=o.useState(!1),I=o.useRef(null),n=!!(g||b);function a(){t.value&&navigator.clipboard.writeText(t.value).then(()=>{P(!0),setTimeout(()=>P(!1),1500)})}function s(){w(!1),p.trim()!==t.name&&r({...t,name:p.trim()||t.name})}function R(){S(!1),h!==t.value&&r({...t,value:h})}async function L(d){if(d.type.startsWith("image/")){c(!0);try{const M=await ge(d);r({...t,image_filename:M,image_updated_at:Date.now()})}catch(M){console.error("[ImmacStyleMixer] Image upload failed",M)}finally{c(!1)}}}const U={draggable:!0,onDragStart:d=>{d.dataTransfer.setData("application/x-immac-style-id",t.id),d.dataTransfer.setData("application/x-immac-style-name",t.name),d.dataTransfer.effectAllowed="copy"},onDragEnd:d=>{var $,A,K,X,Y,G,J;const M=($=window.app)==null?void 0:$.canvas;if(!M)return;const i=M.canvas;if(!i||document.elementFromPoint(d.clientX,d.clientY)!==i)return;const u=M.convertEventToCanvasOffset(d),y=window.LiteGraph,N=y==null?void 0:y.createNode("StylePickImmacStyleMixer");if(!N)return;N.pos=u,(K=(A=window.app)==null?void 0:A.graph)==null||K.add(N);const B=(X=N.widgets)==null?void 0:X.find(q=>q.name==="style");B&&(B.value=t.name,(Y=B.callback)==null||Y.call(B,t.name,null,null,null,N)),(J=(G=window.app)==null?void 0:G.graph)==null||J.setDirtyCanvas(!0,!0)}};return e.jsxs("div",{style:{border:"1px solid var(--p-surface-border, #444)",borderRadius:8,padding:8,width:"100%",background:"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:6,position:"relative",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{...U,title:"Drag to canvas",style:{cursor:"grab",color:"#666",fontSize:14,lineHeight:1,userSelect:"none",flexShrink:0},children:"⠿"}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>r({...t,favorite:!t.favorite}),style:V,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsxs("div",{style:{display:"flex",gap:2},children:[l?e.jsx("button",{title:"Remove from current mix",onClick:b,style:{...V,color:"#e66"},children:e.jsx("i",{className:"pi pi-minus"})}):e.jsx("button",{title:n?"Add to current mix":"No active mix",onClick:g,disabled:!n,style:{...V,color:"var(--p-text-muted-color, #888)",opacity:n?1:.35},children:e.jsx("i",{className:"pi pi-plus"})}),e.jsx("button",{title:t.value?"Copy prompt text":"No prompt text to copy",onClick:a,disabled:!t.value,style:{...V,color:O?"#6c6":"var(--p-text-muted-color, #888)",opacity:t.value?1:.35},children:e.jsx("i",{className:O?"pi pi-check":"pi pi-clipboard"})}),m&&e.jsx("button",{title:"Node combo lists may be stale — click to refresh",onClick:j,style:{...V,color:"#f5a623",fontSize:14,animation:"immac-pulse 1.8s ease-in-out infinite"},children:e.jsx("i",{className:"pi pi-exclamation-circle"})}),e.jsx("button",{title:"Delete style",onClick:()=>F(!0),style:{...V,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]})]}),H&&e.jsxs("div",{style:{position:"absolute",inset:0,background:"rgba(20,20,20,0.92)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:12,zIndex:10},children:[e.jsx("i",{className:"pi pi-trash",style:{fontSize:22,color:"#e55"}}),e.jsxs("span",{style:{fontSize:13,color:"#ddd",fontWeight:600},children:['Delete "',t.name,'"?']}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>F(!1),style:{...ce},children:"Cancel"}),e.jsx("button",{onClick:f,style:{...ce,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1),children:[e.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var d;return(d=I.current)==null?void 0:d.click()},onDragOver:d=>d.preventDefault(),onDrop:d=>{d.preventDefault();const M=d.dataTransfer.files[0];M&&L(M)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888"},children:D?"Uploading…":t.image_filename?e.jsx("img",{src:Q(t.image_filename,t.image_updated_at),alt:t.name,style:{width:"100%",height:"100%",objectFit:"contain",transition:"transform 0.3s ease",transform:x?"scale(1.05)":"scale(1)"}}):"+ image"}),!D&&t.image_filename&&x&&e.jsx("button",{title:"View full size",onClick:d=>{d.stopPropagation(),T(!0)},style:ke,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),_&&t.image_filename&&e.jsx(ne,{src:Q(t.image_filename,t.image_updated_at),alt:t.name,onClose:()=>T(!1)}),e.jsx("input",{ref:I,type:"file",accept:"image/*",style:{display:"none"},onChange:d=>{var i;const M=(i=d.target.files)==null?void 0:i[0];M&&L(M),d.target.value=""}}),C?e.jsx("input",{autoFocus:!0,value:p,onChange:d=>k(d.target.value),onBlur:s,onKeyDown:d=>{d.key==="Enter"&&s(),d.key==="Escape"&&w(!1)},style:de}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{k(t.name),w(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),E?e.jsx("textarea",{autoFocus:!0,value:h,onChange:d=>v(d.target.value),onBlur:R,onKeyDown:d=>{d.key==="Escape"&&S(!1)},rows:3,style:{...de,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{v(t.value),S(!0)},style:{fontSize:11,color:"#aaa",cursor:"text",wordBreak:"break-word",minHeight:32},children:t.value||e.jsx("span",{style:{color:"#555"},children:"double-click to add prompt…"})})]})}const ce={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},V={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},ke={position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},de={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-primary-color, #6c6)",borderRadius:4,color:"inherit",padding:"2px 4px",fontSize:12};function je({styles:t,onUpdate:r,onDelete:f,onAdd:l,currentMixStyleIds:g,onAddToMix:b,onRemoveFromMix:m,isDirty:j,onRefreshCache:C}){const[w,E]=o.useState(""),[S,p]=o.useState(!1);function k(){const c=w.trim();c&&(l(c),E(""),p(!1))}const h=t.filter(c=>c.favorite),v=t.filter(c=>!c.favorite),D=[...h,...v];return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(180px, 1fr))",gap:10},children:[D.map(c=>e.jsx(ve,{style:c,onUpdate:r,onDelete:()=>f(c.id),inCurrentMix:g==null?void 0:g.has(c.id),onAddToMix:b?()=>b(c.id):void 0,onRemoveFromMix:m?()=>m(c.id):void 0,isDirty:j,onRefreshCache:C},c.id)),S?e.jsxs("div",{style:{border:"1px dashed var(--p-primary-color, #6c6)",borderRadius:8,padding:10,display:"flex",flexDirection:"column",gap:8,background:"var(--p-surface-section, #1e1e1e)",flexShrink:0},children:[e.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:w,onChange:c=>E(c.target.value),onKeyDown:c=>{c.key==="Enter"&&k(),c.key==="Escape"&&p(!1)},style:we}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:k,style:ue,children:"Add"}),e.jsx("button",{onClick:()=>{p(!1),E("")},style:{...ue,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>p(!0),style:{width:"100%",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:24},children:"+"})]})})}const we={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-primary-color, #6c6)",borderRadius:4,color:"inherit",padding:"4px 6px",fontSize:13},ue={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function Z(){return crypto.randomUUID()}function ee({title:t,children:r,defaultOpen:f=!0,grow:l=!0}){const[g,b]=o.useState(f);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:g&&l?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>b(m=>!m),style:{display:"flex",alignItems:"center",gap:6,background:"none",border:"none",cursor:"pointer",padding:"8px 0",width:"100%",textAlign:"left",color:"#888",flexShrink:0},children:[e.jsx("i",{className:`pi ${g?"pi-chevron-down":"pi-chevron-right"}`,style:{fontSize:10,flexShrink:0}}),e.jsx("span",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em"},children:t})]}),g&&e.jsx("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:8},children:r})]})}function _e(){const{data:t,loading:r,error:f,update:l,pendingRefresh:g,refreshNodes:b}=xe(),m=t.mixes.find(n=>n.id===t.current_mix_id)??null,[j,C]=o.useState(null),[w,E]=o.useState(null),[S,p]=o.useState(!1),k=o.useCallback(n=>{const a={id:Z(),name:n,value:"",favorite:!1,image_filename:null};l(s=>({...s,styles:[...s.styles,a]}))},[l]),h=o.useCallback(n=>{l(a=>({...a,styles:a.styles.map(s=>s.id===n.id?n:s)}))},[l]),v=o.useCallback(n=>{l(a=>({...a,styles:a.styles.filter(s=>s.id!==n),mixes:a.mixes.map(s=>({...s,styles:s.styles.filter(R=>R.style_id!==n)}))}))},[l]),D=o.useCallback(n=>{const a={...n,id:Z(),name:`${n.name} (copy)`,favorite:!1};l(s=>{const R=s.mixes.findIndex(U=>U.id===n.id),L=[...s.mixes];return L.splice(R+1,0,a),{...s,mixes:L}})},[l]),c=o.useCallback(()=>{const n={id:Z(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};l(a=>({...a,mixes:[...a.mixes,n]}))},[t.mixes.length,l]),_=o.useCallback((n,a)=>{l(s=>({...s,mixes:s.mixes.map(R=>R.id===n.id?n:R)}),a)},[l]),T=o.useCallback(n=>{m&&(m.styles.some(a=>a.style_id===n)||_({...m,styles:[...m.styles,{style_id:n,weight:1,enabled:!0}]},{silent:!0}))},[m,_]),H=o.useCallback(n=>{m&&_({...m,styles:m.styles.filter(a=>a.style_id!==n)},{silent:!0})},[m,_]),F=o.useCallback(n=>{l(a=>({...a,mixes:a.mixes.filter(s=>s.id!==n),current_mix_id:a.current_mix_id===n?null:a.current_mix_id}))},[l]),x=o.useCallback(n=>{l(a=>({...a,current_mix_id:n}))},[l]),z=o.useCallback((n,a,s)=>{m&&_({...m,styles:m.styles.map(R=>R.style_id===n?{...R,...a}:R)},s)},[m,_]);if(r)return e.jsx("div",{style:te,children:"Loading…"});if(f)return e.jsxs("div",{style:{...te,color:"#e55"},children:["Error: ",f]});const O=t.mixes.filter(n=>n.favorite),P=t.mixes.filter(n=>!n.favorite),I=[...O,...P];return e.jsxs("div",{style:te,children:[e.jsx(ee,{title:"Current Mix",grow:!1,children:m?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:m.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"nowrap",overflowX:"auto",borderRadius:6,border:`1px dashed ${S?"#88aaff":"transparent"}`,background:S?"rgba(100,130,255,0.07)":"transparent",padding:S?4:0,transition:"border-color 0.15s, background 0.15s, padding 0.1s",minHeight:40,paddingBottom:6},onDragOver:n=>{n.dataTransfer.types.includes("application/x-immac-style-id")&&(n.preventDefault(),n.dataTransfer.dropEffect="copy",p(!0))},onDragLeave:n=>{n.currentTarget.contains(n.relatedTarget)||p(!1)},onDrop:n=>{p(!1);const a=n.dataTransfer.getData("application/x-immac-style-id");a&&(n.preventDefault(),T(a))},children:[m.styles.length===0&&!S&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),m.styles.map(n=>{const a=t.styles.find(s=>s.id===n.style_id);return e.jsxs("div",{onMouseEnter:()=>E(n.style_id),onMouseLeave:()=>E(null),onDoubleClick:()=>z(n.style_id,{enabled:!n.enabled},{silent:!0}),style:{border:`1px solid ${n.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,overflow:"hidden",background:"var(--p-surface-section, #1e1e1e)",opacity:n.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",width:180,flexShrink:0},children:[e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[e.jsx("div",{style:{position:"absolute",inset:0,background:"var(--p-surface-ground, #141414)",display:"flex",alignItems:"center",justifyContent:"center"},children:a!=null&&a.image_filename?e.jsx("img",{src:Q(a.image_filename,a.image_updated_at),alt:a.name,style:{width:"100%",height:"100%",objectFit:"contain",display:"block",transition:"transform 0.3s ease",transform:w===n.style_id?"scale(1.05)":"scale(1)"}}):e.jsx("i",{className:"pi pi-image",style:{fontSize:20,color:"#555"}})}),(a==null?void 0:a.image_filename)&&w===n.style_id&&e.jsx("button",{title:"View full size",onClick:()=>C(Q(a.image_filename,a.image_updated_at)),style:{position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},children:e.jsx("i",{className:"pi pi-search-plus"})})]}),e.jsxs("div",{style:{padding:"4px 6px",width:"100%",boxSizing:"border-box",display:"flex",flexDirection:"column",gap:4},children:[e.jsx("div",{style:{fontWeight:600,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center",fontSize:12},children:(a==null?void 0:a.name)??"?"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("button",{title:n.enabled?"Disable style":"Enable style",onClick:s=>{s.stopPropagation(),z(n.style_id,{enabled:!n.enabled},{silent:!0})},style:{background:n.enabled?"var(--p-primary-color, #557755)":"transparent",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,color:n.enabled?"#fff":"#888",cursor:"pointer",fontSize:10,padding:"1px 4px",lineHeight:1,flexShrink:0},children:n.enabled?"ON":"OFF"}),e.jsx("div",{style:{flex:1,minWidth:0},onClick:s=>s.stopPropagation(),children:e.jsx(pe,{value:n.weight,onChange:s=>z(n.style_id,{weight:s},{silent:!0}),step:.01,width:"100%"})}),e.jsx("button",{title:"Remove from mix",onClick:s=>{s.stopPropagation(),H(n.style_id)},style:{background:"none",border:"none",cursor:"pointer",color:"#e66",fontSize:13,padding:"0 2px",lineHeight:1,flexShrink:0},children:"✕"})]})]})]},n.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(ee,{title:"Mixes",children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:10,paddingBottom:4},children:[I.map(n=>e.jsx("div",{style:{flex:"0 0 280px"},children:e.jsx(ye,{mix:n,styles:t.styles,isActive:n.id===t.current_mix_id,isDirty:g,onActivate:()=>x(n.id),onUpdate:_,onDelete:()=>F(n.id),onDuplicate:()=>D(n),onRefreshCache:b})},n.id)),e.jsx("button",{title:"Add a new mix",onClick:c,style:{flex:"0 0 120px",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22},children:"+"})]})}),e.jsx(ee,{title:"Styles",children:e.jsx(je,{styles:t.styles,onUpdate:h,onDelete:v,onAdd:k,currentMixStyleIds:m?new Set(m.styles.map(n=>n.style_id)):void 0,onAddToMix:m?T:void 0,onRemoveFromMix:m?H:void 0,isDirty:g,onRefreshCache:b})}),j&&e.jsx(ne,{src:j,onClose:()=>C(null)})]})}const te={position:"absolute",inset:0,padding:"0 12px",display:"flex",flexDirection:"column",overflow:"hidden",color:"var(--p-text-color, #eee)",fontSize:13,boxSizing:"border-box"};export{_e as default}; diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js index eaacb02..fb8231e 100644 --- a/dist/immac_style_mixer/main.js +++ b/dist/immac_style_mixer/main.js @@ -1,5 +1,5 @@ -const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-B66F9prP.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]); -import{r as j,a as N,R as z}from"./vendor-DPfS0z4g.js";const F="modulepreload",L=function(f){return"/"+f},T={},B=function(p,w,g){let e=Promise.resolve();if(w&&w.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),a=(r==null?void 0:r.nonce)||(r==null?void 0:r.getAttribute("nonce"));e=Promise.allSettled(w.map(t=>{if(t=L(t),t in T)return;T[t]=!0;const c=t.endsWith(".css"),s=c?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${t}"]${s}`))return;const n=document.createElement("link");if(n.rel=c?"stylesheet":F,c||(n.as="script"),n.crossOrigin="",n.href=t,a&&n.setAttribute("nonce",a),document.head.appendChild(n),c)return new Promise((y,m)=>{n.addEventListener("load",y),n.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${t}`)))})}))}function i(r){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=r,window.dispatchEvent(a),!a.defaultPrevented)throw r}return e.then(r=>{for(const a of r||[])a.status==="rejected"&&i(a.reason);return p().catch(i)})};var U={exports:{}},M={};/** +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-BsqgMyeW.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]); +import{r as z,a as B,R as U}from"./vendor-DPfS0z4g.js";import{app as I}from"/scripts/app.js";const F="modulepreload",L=function(S){return"/"+S},T={},H=function(y,w,f){let e=Promise.resolve();if(w&&w.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),a=(r==null?void 0:r.nonce)||(r==null?void 0:r.getAttribute("nonce"));e=Promise.allSettled(w.map(t=>{if(t=L(t),t in T)return;T[t]=!0;const c=t.endsWith(".css"),s=c?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${t}"]${s}`))return;const n=document.createElement("link");if(n.rel=c?"stylesheet":F,c||(n.as="script"),n.crossOrigin="",n.href=t,a&&n.setAttribute("nonce",a),document.head.appendChild(n),c)return new Promise((u,m)=>{n.addEventListener("load",u),n.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${t}`)))})}))}function i(r){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=r,window.dispatchEvent(a),!a.defaultPrevented)throw r}return e.then(r=>{for(const a of r||[])a.status==="rejected"&&i(a.reason);return y().catch(i)})};var A={exports:{}},E={};/** * @license React * react-jsx-runtime.production.min.js * @@ -7,4 +7,4 @@ import{r as j,a as N,R as z}from"./vendor-DPfS0z4g.js";const F="modulepreload",L * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - */var D=j,H=Symbol.for("react.element"),W=Symbol.for("react.fragment"),Z=Object.prototype.hasOwnProperty,J=D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,q={key:!0,ref:!0,__self:!0,__source:!0};function A(f,p,w){var g,e={},i=null,r=null;w!==void 0&&(i=""+w),p.key!==void 0&&(i=""+p.key),p.ref!==void 0&&(r=p.ref);for(g in p)Z.call(p,g)&&!q.hasOwnProperty(g)&&(e[g]=p[g]);if(f&&f.defaultProps)for(g in p=f.defaultProps,p)e[g]===void 0&&(e[g]=p[g]);return{$$typeof:H,type:f,key:i,ref:r,props:e,_owner:J.current}}M.Fragment=W;M.jsx=A;M.jsxs=A;U.exports=M;var P=U.exports,R={},O=N;R.createRoot=O.createRoot,R.hydrateRoot=O.hydrateRoot;const G=z.lazy(()=>B(()=>import("./StyleMixerPanel-B66F9prP.js"),__vite__mapDeps([0,1])));function V(){return new Promise(f=>{function p(){if(window.app){f();return}const w=setInterval(()=>{window.app&&(clearInterval(w),f())},50);setTimeout(()=>{clearInterval(w),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),f()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",p):p()})}async function Y(){if(await V(),!window.app){console.error("[ImmacStyleMixer] ComfyUI app not available");return}window.app.extensionManager.registerSidebarTab({id:"immac-style-mixer",icon:"pi pi-palette",title:"Style Mixer",tooltip:"Immac Style Mixer",type:"custom",render:e=>{const i=document.createElement("div");i.id="immac-style-mixer-root",i.style.position="absolute",i.style.inset="0",i.style.overflow="hidden",e.style.position="relative",e.style.height="100%",e.appendChild(i),R.createRoot(i).render(P.jsx(z.StrictMode,{children:P.jsx(j.Suspense,{fallback:P.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:P.jsx(G,{})})}))}});const f="/immac_style_mixer/api/data";async function p(){const e=await fetch(f);if(!e.ok){alert(`Backup failed: HTTP ${e.status}`);return}const i=await e.json(),r=new Blob([JSON.stringify(i,null,2)],{type:"application/json"}),a=URL.createObjectURL(r),t=document.createElement("a");t.href=a,t.download=`style_mixer_backup_${new Date().toISOString().slice(0,10)}.json`,t.click(),URL.revokeObjectURL(a)}function w(){const e=document.createElement("a");e.href="/immac_style_mixer/api/backup.zip",e.download=`style_mixer_backup_${new Date().toISOString().slice(0,10)}.zip`,e.click()}function g(){const e=document.createElement("input");e.type="file",e.accept=".json,.zip,application/json,application/zip",e.onchange=()=>{var a;const i=(a=e.files)==null?void 0:a[0];if(!i)return;if(i.name.endsWith(".zip")||i.type==="application/zip")i.arrayBuffer().then(async t=>{var c,s;try{const n=await fetch("/immac_style_mixer/api/restore.zip",{method:"POST",headers:{"Content-Type":"application/zip"},body:t});if(!n.ok){const m=await n.text();throw new Error(`HTTP ${n.status}: ${m.slice(0,300)}`)}const y=await n.json();try{(s=(c=window.app)==null?void 0:c.toast)==null||s.add({severity:"success",summary:"Style Mixer",detail:`ZIP restored: ${y.styles} styles, ${y.mixes} mixes, ${y.images} images. Reload the Style Mixer panel to see changes.`,life:6e3})}catch{}}catch(n){alert(`Failed to restore ZIP backup: ${n.message}`)}}).catch(t=>alert(`Could not read file: ${t.message}`));else{const t=new FileReader;t.onload=async c=>{var s,n,y;try{const m=JSON.parse((s=c.target)==null?void 0:s.result);if(!Array.isArray(m.styles)||!Array.isArray(m.mixes))throw new Error("Invalid backup: missing styles or mixes arrays.");const $=await fetch(f,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(m)});if(!$.ok)throw new Error(`Save failed: HTTP ${$.status}`);try{(y=(n=window.app)==null?void 0:n.toast)==null||y.add({severity:"success",summary:"Style Mixer",detail:`Backup restored: ${m.styles.length} styles, ${m.mixes.length} mixes. Reload the Style Mixer panel to see changes.`,life:6e3})}catch{}}catch(m){alert(`Failed to restore backup: ${m.message}`)}},t.readAsText(i)}},e.click()}window.app.registerExtension({name:"ImmacStyleMixer",settings:[{id:"ImmacStyleMixer.BackupRestore",name:"Style Mixer — Backup & Restore",type:(e,i,r)=>{const a=document.createElement("div");a.style.cssText="display:flex;gap:8px;align-items:center";const t=document.createElement("button");t.textContent="⬇ Download backup (JSON)",t.title="Save all styles and mixes to a JSON file",t.style.cssText="cursor:pointer;padding:4px 10px;border-radius:4px",t.onclick=()=>p().catch(console.error);const c=document.createElement("button");c.textContent="⬇ Download ZIP (with images)",c.title="Save styles, mixes and all images to a ZIP file",c.style.cssText="cursor:pointer;padding:4px 10px;border-radius:4px",c.onclick=()=>w();const s=document.createElement("button");return s.textContent="⬆ Restore (JSON or ZIP)",s.title="Restore from a JSON or ZIP backup — auto-detected",s.style.cssText="cursor:pointer;padding:4px 10px;border-radius:4px",s.onclick=()=>g(),a.appendChild(t),a.appendChild(c),a.appendChild(s),a},defaultValue:null}],nodeCreated(e){var C;if(e.comfyClass!=="StyleMixImmacStyleMixer"&&e.comfyClass!=="StylePickImmacStyleMixer")return;const i=e.comfyClass==="StylePickImmacStyleMixer",r=i?"style":"mix",a=(C=e.widgets)==null?void 0:C.find(l=>l.name===r);if(!a)return;const t=document.createElement("img");t.style.cssText="width:100%;height:100%;display:none;object-fit:contain;border-radius:4px";const c=document.createElement("div");c.style.cssText="padding:4px;box-sizing:border-box",c.appendChild(t);let s=0;e.addDOMWidget("immac_preview","div",c,{serialize:!1,getMinHeight:()=>s,getHeight:()=>s});function n(){var u,_,x,S;const l=!!e.graph,d=!!((u=window.app)!=null&&u.canvas);console.log(`[ImmacStyleMixer][${e.id}] triggerRedraw — graph:${l} canvas:${d} previewHeight:${s}`),(_=e.graph)==null||_.setDirtyCanvas(!0,!0),(S=(x=window.app)==null?void 0:x.canvas)==null||S.setDirty(!0,!0)}function y(l,d){var S,o,v;const u=((S=e.size)==null?void 0:S[0])??300,_=d/l;s=Math.max(80,Math.min(Math.round((u-8)*_),600)),console.log(`[ImmacStyleMixer][${e.id}] applyImageSize natW:${l} natH:${d} previewHeight:${s} nodeWidth:${u}`);const x=(o=e.computeSize)==null?void 0:o.call(e);x&&e.setSize([Math.max(e.size[0],x[0]),Math.max(e.size[1],x[1])]),(v=e.onResize)==null||v.call(e,e.size),n(),requestAnimationFrame(n)}function m(){console.log(`[ImmacStyleMixer][${e.id}] clearImageSize`),s=0,t.style.display="none",n()}function $(l){console.log(`[ImmacStyleMixer][${e.id}] showUrl`,l),t.onload=()=>{console.log(`[ImmacStyleMixer][${e.id}] imgEl.onload natW:${t.naturalWidth} natH:${t.naturalHeight}`),t.style.display="block",y(t.naturalWidth,t.naturalHeight)},t.onerror=()=>{console.warn(`[ImmacStyleMixer][${e.id}] imgEl.onerror src:${t.src}`),m()},t.src=l}async function I(l){var d,u,_;console.log(`[ImmacStyleMixer][${e.id}] updatePreview value:"${l}" isPickNode:${i}`);try{const x=await fetch("/immac_style_mixer/api/data");if(!x.ok){console.warn(`[ImmacStyleMixer][${e.id}] api/data HTTP ${x.status}`);return}const S=await x.json();if(console.log(`[ImmacStyleMixer][${e.id}] api/data styles:${((d=S.styles)==null?void 0:d.length)??0} mixes:${((u=S.mixes)==null?void 0:u.length)??0}`),i){const o=(S.styles??[]).find(b=>b.name===l);if(console.log(`[ImmacStyleMixer][${e.id}] style found:`,o==null?void 0:o.name,"image:",o==null?void 0:o.image_filename),!(o!=null&&o.image_filename)){m();return}const v=o.image_updated_at?`&t=${o.image_updated_at}`:"";$(`/view?filename=${encodeURIComponent(o.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input${v}`)}else{const o=(S.mixes??[]).find(b=>b.name===l);let v="";if(o!=null&&o.image_filename){const b=o.image_updated_at?`&t=${o.image_updated_at}`:"";v=`/view?filename=${encodeURIComponent(o.image_filename)}&subfolder=immac_style_mixer%2Fmixes&type=input${b}`}else if((_=o==null?void 0:o.styles)!=null&&_.length){const b=Object.fromEntries((S.styles??[]).map(h=>[h.id,h])),k=o.styles.filter(h=>h.enabled!==!1).map(h=>b[h.style_id]).find(h=>h==null?void 0:h.image_filename);if(k){const h=k.image_updated_at?`&t=${k.image_updated_at}`:"";v=`/view?filename=${encodeURIComponent(k.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input${h}`}}if(console.log(`[ImmacStyleMixer][${e.id}] mix url:`,v),!v){m();return}$(v)}}catch(x){console.error(`[ImmacStyleMixer][${e.id}] updatePreview failed`,x)}}const E=a.callback;a.callback=function(...l){var u;E==null||E.apply(this,l);const d=(u=e.widgets)==null?void 0:u.find(_=>_.name===r);I(String((d==null?void 0:d.value)??""))},e._immacUpdatePreview=l=>{var u;const d=(u=e.widgets)==null?void 0:u.find(_=>_.name===r);I(l??String((d==null?void 0:d.value)??""))},e._immacPreviewScheduled=!0,console.log(`[ImmacStyleMixer][${e.id}] nodeCreated class:${e.comfyClass} widget:${r}`),requestAnimationFrame(()=>{var d;if(!e._immacPreviewScheduled){console.log(`[ImmacStyleMixer][${e.id}] nodeCreated rAF cancelled (loadedGraphNode took over)`);return}const l=(d=e.widgets)==null?void 0:d.find(u=>u.name===r);console.log(`[ImmacStyleMixer][${e.id}] nodeCreated rAF firing, w.value:"${l==null?void 0:l.value}"`),l!=null&&l.value&&I(String(l.value))})},loadedGraphNode(e){var c;if(typeof e._immacUpdatePreview!="function")return;e._immacPreviewScheduled=!1;const i=e.comfyClass==="StylePickImmacStyleMixer",r=i?"style":"mix",a=(c=e.widgets)==null?void 0:c.find(s=>s.name===r),t=String((a==null?void 0:a.value)??"");console.log(`[ImmacStyleMixer][${e.id}] loadedGraphNode class:${e.comfyClass} currentVal:"${t}"`),requestAnimationFrame(()=>{console.log(`[ImmacStyleMixer][${e.id}] loadedGraphNode rAF firing, currentVal:"${t}"`),t==="(no styles saved)"||t==="(no mixes saved)"?fetch("/immac_style_mixer/api/data").then(s=>s.json()).then(s=>{var m,$;const n=i?s.styles??[]:s.mixes??[],y=(m=e.widgets)==null?void 0:m.find(I=>I.name===r);n.length>0&&y&&(y.value=n[0].name,Array.isArray(($=y.options)==null?void 0:$.values)&&(y.options.values=n.map(I=>I.name))),e._immacUpdatePreview()}).catch(()=>e._immacUpdatePreview()):e._immacUpdatePreview(t)})}})}Y().catch(console.error);export{P as j}; + */var D=z,W=Symbol.for("react.element"),Z=Symbol.for("react.fragment"),J=Object.prototype.hasOwnProperty,q=D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,G={key:!0,ref:!0,__self:!0,__source:!0};function N(S,y,w){var f,e={},i=null,r=null;w!==void 0&&(i=""+w),y.key!==void 0&&(i=""+y.key),y.ref!==void 0&&(r=y.ref);for(f in y)J.call(y,f)&&!G.hasOwnProperty(f)&&(e[f]=y[f]);if(S&&S.defaultProps)for(f in y=S.defaultProps,y)e[f]===void 0&&(e[f]=y[f]);return{$$typeof:W,type:S,key:i,ref:r,props:e,_owner:q.current}}E.Fragment=Z;E.jsx=N;E.jsxs=N;A.exports=E;var M=A.exports,C={},j=B;C.createRoot=j.createRoot,C.hydrateRoot=j.hydrateRoot;const V=U.lazy(()=>H(()=>import("./StyleMixerPanel-BsqgMyeW.js"),__vite__mapDeps([0,1])));console.log("[ImmacStyleMixer] module loaded, app:",typeof I,!!I);async function Y(){I.extensionManager.registerSidebarTab({id:"immac-style-mixer",icon:"pi pi-palette",title:"Style Mixer",tooltip:"Immac Style Mixer",type:"custom",render:e=>{const i=document.createElement("div");i.id="immac-style-mixer-root",i.style.position="absolute",i.style.inset="0",i.style.overflow="hidden",e.style.position="relative",e.style.height="100%",e.appendChild(i),C.createRoot(i).render(M.jsx(U.StrictMode,{children:M.jsx(z.Suspense,{fallback:M.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:M.jsx(V,{})})}))}});const S="/immac_style_mixer/api/data";async function y(){const e=await fetch(S);if(!e.ok){alert(`Backup failed: HTTP ${e.status}`);return}const i=await e.json(),r=new Blob([JSON.stringify(i,null,2)],{type:"application/json"}),a=URL.createObjectURL(r),t=document.createElement("a");t.href=a,t.download=`style_mixer_backup_${new Date().toISOString().slice(0,10)}.json`,t.click(),URL.revokeObjectURL(a)}function w(){const e=document.createElement("a");e.href="/immac_style_mixer/api/backup.zip",e.download=`style_mixer_backup_${new Date().toISOString().slice(0,10)}.zip`,e.click()}function f(){const e=document.createElement("input");e.type="file",e.accept=".json,.zip,application/json,application/zip",e.onchange=()=>{var a;const i=(a=e.files)==null?void 0:a[0];if(!i)return;if(i.name.endsWith(".zip")||i.type==="application/zip")i.arrayBuffer().then(async t=>{var c,s;try{const n=await fetch("/immac_style_mixer/api/restore.zip",{method:"POST",headers:{"Content-Type":"application/zip"},body:t});if(!n.ok){const m=await n.text();throw new Error(`HTTP ${n.status}: ${m.slice(0,300)}`)}const u=await n.json();try{(s=(c=I)==null?void 0:c.toast)==null||s.add({severity:"success",summary:"Style Mixer",detail:`ZIP restored: ${u.styles} styles, ${u.mixes} mixes, ${u.images} images. Reload the Style Mixer panel to see changes.`,life:6e3})}catch{}}catch(n){alert(`Failed to restore ZIP backup: ${n.message}`)}}).catch(t=>alert(`Could not read file: ${t.message}`));else{const t=new FileReader;t.onload=async c=>{var s,n,u;try{const m=JSON.parse((s=c.target)==null?void 0:s.result);if(!Array.isArray(m.styles)||!Array.isArray(m.mixes))throw new Error("Invalid backup: missing styles or mixes arrays.");const $=await fetch(S,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(m)});if(!$.ok)throw new Error(`Save failed: HTTP ${$.status}`);try{(u=(n=I)==null?void 0:n.toast)==null||u.add({severity:"success",summary:"Style Mixer",detail:`Backup restored: ${m.styles.length} styles, ${m.mixes.length} mixes. Reload the Style Mixer panel to see changes.`,life:6e3})}catch{}}catch(m){alert(`Failed to restore backup: ${m.message}`)}},t.readAsText(i)}},e.click()}I.registerExtension({name:"ImmacStyleMixer",settings:[{id:"ImmacStyleMixer.BackupRestore",name:"Style Mixer — Backup & Restore",type:(e,i,r)=>{const a=document.createElement("div");a.style.cssText="display:flex;gap:8px;align-items:center";const t=document.createElement("button");t.textContent="⬇ Download backup (JSON)",t.title="Save all styles and mixes to a JSON file",t.style.cssText="cursor:pointer;padding:4px 10px;border-radius:4px",t.onclick=()=>y().catch(console.error);const c=document.createElement("button");c.textContent="⬇ Download ZIP (with images)",c.title="Save styles, mixes and all images to a ZIP file",c.style.cssText="cursor:pointer;padding:4px 10px;border-radius:4px",c.onclick=()=>w();const s=document.createElement("button");return s.textContent="⬆ Restore (JSON or ZIP)",s.title="Restore from a JSON or ZIP backup — auto-detected",s.style.cssText="cursor:pointer;padding:4px 10px;border-radius:4px",s.onclick=()=>f(),a.appendChild(t),a.appendChild(c),a.appendChild(s),a},defaultValue:null}],nodeCreated(e){var O;if(e.comfyClass!=="StyleMixImmacStyleMixer"&&e.comfyClass!=="StylePickImmacStyleMixer")return;const i=e.comfyClass==="StylePickImmacStyleMixer",r=i?"style":"mix",a=(O=e.widgets)==null?void 0:O.find(l=>l.name===r);if(!a)return;const t=document.createElement("img");t.style.cssText="width:100%;height:100%;display:none;object-fit:contain;border-radius:4px";const c=document.createElement("div");c.style.cssText="padding:4px;box-sizing:border-box",c.appendChild(t);let s=0;e.addDOMWidget("immac_preview","div",c,{serialize:!1,getMinHeight:()=>s,getHeight:()=>s});function n(){var p,h,g,_;const l=!!e.graph,d=!!((p=I)!=null&&p.canvas);console.log(`[ImmacStyleMixer][${e.id}] triggerRedraw — graph:${l} canvas:${d} previewHeight:${s}`),(h=e.graph)==null||h.setDirtyCanvas(!0,!0),(_=(g=I)==null?void 0:g.canvas)==null||_.setDirty(!0,!0)}function u(l,d){var _,o,v;const p=((_=e.size)==null?void 0:_[0])??300,h=d/l;s=Math.max(80,Math.min(Math.round((p-8)*h),600)),console.log(`[ImmacStyleMixer][${e.id}] applyImageSize natW:${l} natH:${d} previewHeight:${s} nodeWidth:${p}`);const g=(o=e.computeSize)==null?void 0:o.call(e);g&&e.setSize([Math.max(e.size[0],g[0]),Math.max(e.size[1],g[1])]),(v=e.onResize)==null||v.call(e,e.size),n(),requestAnimationFrame(n)}function m(){console.log(`[ImmacStyleMixer][${e.id}] clearImageSize`),s=0,t.style.display="none",n()}function $(l){console.log(`[ImmacStyleMixer][${e.id}] showUrl`,l),t.onload=()=>{console.log(`[ImmacStyleMixer][${e.id}] imgEl.onload natW:${t.naturalWidth} natH:${t.naturalHeight}`),t.style.display="block",u(t.naturalWidth,t.naturalHeight)},t.onerror=()=>{console.warn(`[ImmacStyleMixer][${e.id}] imgEl.onerror src:${t.src}`),m()},t.src=l}async function b(l){var d,p,h;console.log(`[ImmacStyleMixer][${e.id}] updatePreview value:"${l}" isPickNode:${i}`);try{const g=await fetch("/immac_style_mixer/api/data");if(!g.ok){console.warn(`[ImmacStyleMixer][${e.id}] api/data HTTP ${g.status}`);return}const _=await g.json();if(console.log(`[ImmacStyleMixer][${e.id}] api/data styles:${((d=_.styles)==null?void 0:d.length)??0} mixes:${((p=_.mixes)==null?void 0:p.length)??0}`),i){const o=(_.styles??[]).find(k=>k.name===l);if(console.log(`[ImmacStyleMixer][${e.id}] style found:`,o==null?void 0:o.name,"image:",o==null?void 0:o.image_filename),!(o!=null&&o.image_filename)){m();return}const v=o.image_updated_at?`&t=${o.image_updated_at}`:"";$(`/view?filename=${encodeURIComponent(o.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input${v}`)}else{const o=(_.mixes??[]).find(k=>k.name===l);let v="";if(o!=null&&o.image_filename){const k=o.image_updated_at?`&t=${o.image_updated_at}`:"";v=`/view?filename=${encodeURIComponent(o.image_filename)}&subfolder=immac_style_mixer%2Fmixes&type=input${k}`}else if((h=o==null?void 0:o.styles)!=null&&h.length){const k=Object.fromEntries((_.styles??[]).map(x=>[x.id,x])),P=o.styles.filter(x=>x.enabled!==!1).map(x=>k[x.style_id]).find(x=>x==null?void 0:x.image_filename);if(P){const x=P.image_updated_at?`&t=${P.image_updated_at}`:"";v=`/view?filename=${encodeURIComponent(P.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input${x}`}}if(console.log(`[ImmacStyleMixer][${e.id}] mix url:`,v),!v){m();return}$(v)}}catch(g){console.error(`[ImmacStyleMixer][${e.id}] updatePreview failed`,g)}}const R=a.callback;a.callback=function(...l){var p;R==null||R.apply(this,l);const d=(p=e.widgets)==null?void 0:p.find(h=>h.name===r);b(String((d==null?void 0:d.value)??""))},e._immacUpdatePreview=l=>{var p;const d=(p=e.widgets)==null?void 0:p.find(h=>h.name===r);b(l??String((d==null?void 0:d.value)??""))},e._immacPreviewScheduled=!0,console.log(`[ImmacStyleMixer][${e.id}] nodeCreated class:${e.comfyClass} widget:${r}`),requestAnimationFrame(()=>{var d;if(!e._immacPreviewScheduled){console.log(`[ImmacStyleMixer][${e.id}] nodeCreated rAF cancelled (loadedGraphNode took over)`);return}const l=(d=e.widgets)==null?void 0:d.find(p=>p.name===r);console.log(`[ImmacStyleMixer][${e.id}] nodeCreated rAF firing, w.value:"${l==null?void 0:l.value}"`),l!=null&&l.value&&b(String(l.value))})},loadedGraphNode(e){var c;if(typeof e._immacUpdatePreview!="function")return;e._immacPreviewScheduled=!1;const i=e.comfyClass==="StylePickImmacStyleMixer",r=i?"style":"mix",a=(c=e.widgets)==null?void 0:c.find(s=>s.name===r),t=String((a==null?void 0:a.value)??"");console.log(`[ImmacStyleMixer][${e.id}] loadedGraphNode class:${e.comfyClass} currentVal:"${t}"`),requestAnimationFrame(()=>{console.log(`[ImmacStyleMixer][${e.id}] loadedGraphNode rAF firing, currentVal:"${t}"`),t==="(no styles saved)"||t==="(no mixes saved)"?fetch("/immac_style_mixer/api/data").then(s=>s.json()).then(s=>{var m,$;const n=i?s.styles??[]:s.mixes??[],u=(m=e.widgets)==null?void 0:m.find(b=>b.name===r);n.length>0&&u&&(u.value=n[0].name,Array.isArray(($=u.options)==null?void 0:$.values)&&(u.options.values=n.map(b=>b.name))),e._immacUpdatePreview()}).catch(()=>e._immacUpdatePreview()):e._immacUpdatePreview(t)})}})}Y().catch(console.error);export{M as j}; diff --git a/ui/src/main.tsx b/ui/src/main.tsx index ff80296..5500304 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -1,5 +1,6 @@ // /scripts/app.js is an external — types declared in src/comfy.d.ts, // module resolved to ComfyUI's runtime at runtime (not bundled by Vite). +// @ts-ignore — tsc can't resolve absolute URL externals; Vite handles this correctly. import { app } from '/scripts/app.js' import React, { Suspense } from 'react' import ReactDOM from 'react-dom/client' @@ -194,7 +195,7 @@ async function init(): Promise { function triggerRedraw() { const hasGraph = !!node.graph - const hasCanvas = !!(window.app as any)?.canvas + const hasCanvas = !!(app as any)?.canvas console.log(`[ImmacStyleMixer][${node.id}] triggerRedraw — graph:${hasGraph} canvas:${hasCanvas} previewHeight:${previewHeight}`) node.graph?.setDirtyCanvas(true, true) ;(app as any)?.canvas?.setDirty(true, true)