diff --git a/dist/immac_style_mixer/StyleMixerPanel-Cgx4HgTP.js b/dist/immac_style_mixer/StyleMixerPanel-C2nCmlGN.js similarity index 78% rename from dist/immac_style_mixer/StyleMixerPanel-Cgx4HgTP.js rename to dist/immac_style_mixer/StyleMixerPanel-C2nCmlGN.js index 032ea94..c9909d0 100644 --- a/dist/immac_style_mixer/StyleMixerPanel-Cgx4HgTP.js +++ b/dist/immac_style_mixer/StyleMixerPanel-C2nCmlGN.js @@ -1,4 +1,4 @@ -import{j as e}from"./main.js";import{r as n,b as oe}from"./vendor-DPfS0z4g.js";const X={styles:[],mixes:[],current_mix_id:null},Y="/immac_style_mixer/api/data";function ne(){const[t,l]=n.useState(X),[f,a]=n.useState(!0),[g,h]=n.useState(null),[d,b]=n.useState(!1),v=n.useRef(X),C=n.useRef(null);n.useEffect(()=>{fetch(Y).then(c=>{if(!c.ok)throw new Error(`HTTP ${c.status}`);return c.json()}).then(c=>{v.current=c,l(c)}).catch(c=>h(String(c))).finally(()=>a(!1))},[]);const k=n.useCallback(c=>{var w,D,I,M;const S=v.current,y=typeof c=="function"?c(S):c;v.current=y,l(y);const m=y.mixes.length-S.mixes.length,E=y.styles.length-S.styles.length;if(m<0||E<0){try{(D=(w=window.app)==null?void 0:w.refreshComboInNodes)==null||D.call(w),(M=(I=window.app)==null?void 0:I.toast)==null||M.add({severity:"warn",summary:"Style Mixer",detail:"A mix or style was deleted — node combo lists have been refreshed.",life:4e3})}catch(N){console.warn("[ImmacStyleMixer] refreshComboInNodes/toast failed",N)}b(!1)}else(m>0||E>0)&&b(!0);C.current&&clearTimeout(C.current),C.current=setTimeout(()=>{fetch(Y,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(y)}).catch(N=>console.error("[ImmacStyleMixer] Save failed",N))},400)},[]),j=n.useCallback(()=>{var c,S;try{(S=(c=window.app)==null?void 0:c.refreshComboInNodes)==null||S.call(c)}catch(y){console.warn("[ImmacStyleMixer] refreshComboInNodes failed",y)}b(!1)},[]);return{data:t,loading:f,error:g,update:k,pendingRefresh:d,refreshNodes:j}}async function re(t){const l=new FormData;l.append("image",t),l.append("subfolder","immac_style_mixer/styles"),l.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:l});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function L(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function ae(t){const l=new FormData;l.append("image",t),l.append("subfolder","immac_style_mixer/mixes"),l.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:l});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function G(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function K({src:t,alt:l,onClose:f}){return n.useEffect(()=>{function a(g){g.key==="Escape"&&f()}return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[f]),oe.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:l??"",onClick:a=>a.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 te({value:t,onChange:l,min:f=0,max:a=1,step:g=.05,pixelsPerStep:h=2,width:d=72,decimals:b=2}){const[v,C]=n.useState(!1),[k,j]=n.useState(""),c=n.useRef(null),S=n.useCallback(()=>{const x=parseFloat(k);isNaN(x)||l(x),C(!1)},[k,l]);n.useEffect(()=>{var x,z;v&&((x=c.current)==null||x.focus(),(z=c.current)==null||z.select())},[v]);const y=n.useRef(!1),m=n.useRef(0),E=n.useRef(0),w=n.useRef(!1),D=n.useCallback(x=>{v||(x.currentTarget.setPointerCapture(x.pointerId),y.current=!0,w.current=!1,m.current=x.clientX,E.current=Math.max(f,Math.min(a,t)))},[v,t,f,a]),I=n.useCallback(x=>{if(!y.current)return;const z=x.clientX-m.current;Math.abs(z)>2&&(w.current=!0);const H=z/h,T=E.current+H*g,O=Math.round(T/g)*g,i=parseFloat(Math.max(f,Math.min(a,O)).toFixed(b));l(i)},[g,h,b,f,a,l]),M=n.useCallback(()=>{y.current&&!w.current&&(j(t.toFixed(b)),C(!0)),y.current=!1},[t,b]),N=Math.max(0,Math.min(1,(t-f)/(a-f)))*100;return v?e.jsx("input",{ref:c,type:"text",inputMode:"decimal",value:k,onChange:x=>j(x.target.value),onBlur:S,onKeyDown:x=>{x.key==="Enter"&&S(),x.key==="Escape"&&C(!1)},style:{width:d,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",{style:{position:"relative",width:d,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:D,onPointerMove:I,onPointerUp:M,children:[e.jsx("div",{style:{position:"absolute",inset:0,width:`${N}%`,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(b)})]})}function se({mix:t,styles:l,isActive:f,isDirty:a,onActivate:g,onUpdate:h,onDelete:d,onDuplicate:b,onRefreshCache:v}){function C(o){o.target.closest("button, input, select, textarea, a")||g()}const[k,j]=n.useState(!1),[c,S]=n.useState(t.name),[y,m]=n.useState(!1),[E,w]=n.useState(!1),[D,I]=n.useState(!1),[M,N]=n.useState(!1),[x,z]=n.useState(!1),[H,T]=n.useState(!1),O=n.useRef(null);function i(){const o=t.styles.filter(p=>p.enabled).map(p=>{var _;return((_=l.find(P=>P.id===p.style_id))==null?void 0:_.value)??""}).filter(Boolean);o.length!==0&&navigator.clipboard.writeText(o.join(", ")).then(()=>{z(!0),setTimeout(()=>z(!1),1500)})}async function r(o){if(o.type.startsWith("image/")){m(!0);try{const p=await ae(o);h({...t,image_filename:p})}catch(p){console.error("[ImmacStyleMixer] Mix image upload failed",p)}finally{m(!1)}}}function s(){j(!1),c.trim()!==t.name&&h({...t,name:c.trim()||t.name})}function u(o,p){const _=t.styles.map((P,ie)=>ie===o?{...P,...p}:P);h({...t,styles:_})}function R(o){h({...t,styles:t.styles.filter((p,_)=>_!==o)})}function B(o){t.styles.some(p=>p.style_id===o)||h({...t,styles:[...t.styles,{style_id:o,weight:1,enabled:!0}]})}const A=l.filter(o=>!t.styles.some(p=>p.style_id===o.id));return e.jsxs("div",{style:{border:`2px solid ${H?"#88aaff":f?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:8,padding:10,background:H?"rgba(100,130,255,0.07)":"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:8,width:"100%",position:"relative",overflow:"hidden",cursor:"pointer",transition:"border-color 0.15s, background 0.15s"},onClick:C,onDragOver:o=>{o.dataTransfer.types.includes("application/x-immac-style-id")&&(o.preventDefault(),o.dataTransfer.dropEffect="copy",T(!0))},onDragLeave:o=>{o.currentTarget.contains(o.relatedTarget)||T(!1)},onDrop:o=>{T(!1);const p=o.dataTransfer.getData("application/x-immac-style-id");p&&(o.preventDefault(),o.stopPropagation(),B(p))},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[k?e.jsx("input",{autoFocus:!0,value:c,onChange:o=>S(o.target.value),onBlur:s,onKeyDown:o=>{o.key==="Enter"&&s(),o.key==="Escape"&&j(!1)},style:q}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{S(t.name),j(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),a&&e.jsx("button",{title:"Pending node-cache changes — click to reload",onClick:o=>{o.stopPropagation(),v()},style:{...F,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:()=>h({...t,favorite:!t.favorite}),style:F,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Duplicate mix",onClick:b,style:{...F,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-copy"})}),(()=>{const o=t.styles.some(p=>{var _;return p.enabled&&((_=l.find(P=>P.id===p.style_id))==null?void 0:_.value)});return e.jsx("button",{title:o?"Copy combined prompt":"No enabled styles with prompt text",onClick:p=>{p.stopPropagation(),i()},disabled:!o,style:{...F,color:x?"#6c6":"var(--p-text-muted-color, #888)",opacity:o?1:.35},children:e.jsx("i",{className:x?"pi pi-check":"pi pi-clipboard"})})})(),e.jsx("button",{title:"Delete mix",onClick:()=>I(!0),style:{...F,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]}),D&&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:()=>I(!1),style:{...J},children:"Cancel"}),e.jsx("button",{onClick:d,style:{...J,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),children:[e.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var o;return(o=O.current)==null?void 0:o.click()},onDragOver:o=>o.preventDefault(),onDrop:o=>{o.preventDefault();const p=o.dataTransfer.files[0];p&&r(p)},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:y?"Uploading…":t.image_filename?e.jsx("img",{src:G(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover",transition:"transform 0.3s ease",transform:M?"scale(1.05)":"scale(1)"}}):"+ cover image"}),!y&&t.image_filename&&M&&e.jsx("button",{title:"View full size",onClick:o=>{o.stopPropagation(),w(!0)},style:le,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),E&&t.image_filename&&e.jsx(K,{src:G(t.image_filename),alt:t.name,onClose:()=>w(!1)}),e.jsx("input",{ref:O,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{var _;const p=(_=o.target.files)==null?void 0:_[0];p&&r(p),o.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((o,p)=>{const _=l.find(P=>P.id===o.style_id);return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("button",{title:o.enabled?"Disable":"Enable",onClick:()=>u(p,{enabled:!o.enabled}),style:{...F,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:o.enabled?"var(--p-primary-color, #557755)":"transparent",color:o.enabled?"#fff":"#888",minWidth:32},children:o.enabled?"ON":"OFF"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(_==null?void 0:_.name)??o.style_id}),e.jsx(te,{value:o.weight,onChange:P=>u(p,{weight:P}),min:0,max:1,step:.05,width:64}),e.jsx("button",{title:"Remove from mix",onClick:()=>R(p),style:{...F,color:"#e55",fontSize:13},children:"✕"})]},o.style_id)})]}),e.jsxs("select",{value:"",disabled:A.length===0,onChange:o=>{o.target.value&&B(o.target.value)},style:{...q,cursor:A.length===0?"not-allowed":"pointer",opacity:A.length===0?.45:1},title:A.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:A.length===0?"— all styles already added —":"+ add style…"}),A.map(o=>e.jsx("option",{value:o.id,children:o.name},o.id))]})]})}const J={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},F={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},le={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)"},q={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 n,b as oe}from"./vendor-DPfS0z4g.js";const X={styles:[],mixes:[],current_mix_id:null},Y="/immac_style_mixer/api/data";function ne(){const[t,l]=n.useState(X),[f,a]=n.useState(!0),[g,h]=n.useState(null),[d,y]=n.useState(!1),v=n.useRef(X),C=n.useRef(null);n.useEffect(()=>{fetch(Y).then(c=>{if(!c.ok)throw new Error(`HTTP ${c.status}`);return c.json()}).then(c=>{v.current=c,l(c)}).catch(c=>h(String(c))).finally(()=>a(!1))},[]);const k=n.useCallback(c=>{var w,D,I,M;const S=v.current,b=typeof c=="function"?c(S):c;v.current=b,l(b);const m=b.mixes.length-S.mixes.length,E=b.styles.length-S.styles.length;if(m<0||E<0){try{(D=(w=window.app)==null?void 0:w.refreshComboInNodes)==null||D.call(w),(M=(I=window.app)==null?void 0:I.toast)==null||M.add({severity:"warn",summary:"Style Mixer",detail:"A mix or style was deleted — node combo lists have been refreshed.",life:4e3})}catch(N){console.warn("[ImmacStyleMixer] refreshComboInNodes/toast failed",N)}y(!1)}else(m>0||E>0)&&y(!0);C.current&&clearTimeout(C.current),C.current=setTimeout(()=>{fetch(Y,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(b)}).catch(N=>console.error("[ImmacStyleMixer] Save failed",N))},400)},[]),j=n.useCallback(()=>{var c,S;try{(S=(c=window.app)==null?void 0:c.refreshComboInNodes)==null||S.call(c)}catch(b){console.warn("[ImmacStyleMixer] refreshComboInNodes failed",b)}y(!1)},[]);return{data:t,loading:f,error:g,update:k,pendingRefresh:d,refreshNodes:j}}async function re(t){const l=new FormData;l.append("image",t),l.append("subfolder","immac_style_mixer/styles"),l.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:l});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function L(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function ae(t){const l=new FormData;l.append("image",t),l.append("subfolder","immac_style_mixer/mixes"),l.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:l});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function G(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function K({src:t,alt:l,onClose:f}){return n.useEffect(()=>{function a(g){g.key==="Escape"&&f()}return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[f]),oe.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:l??"",onClick:a=>a.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 te({value:t,onChange:l,min:f=0,max:a=1,step:g=.05,pixelsPerStep:h=2,width:d=72,decimals:y=2}){const[v,C]=n.useState(!1),[k,j]=n.useState(""),c=n.useRef(null),S=n.useCallback(()=>{const x=parseFloat(k);isNaN(x)||l(x),C(!1)},[k,l]);n.useEffect(()=>{var x,z;v&&((x=c.current)==null||x.focus(),(z=c.current)==null||z.select())},[v]);const b=n.useRef(!1),m=n.useRef(0),E=n.useRef(0),w=n.useRef(!1),D=n.useCallback(x=>{v||(x.currentTarget.setPointerCapture(x.pointerId),b.current=!0,w.current=!1,m.current=x.clientX,E.current=Math.max(f,Math.min(a,t)))},[v,t,f,a]),I=n.useCallback(x=>{if(!b.current)return;const z=x.clientX-m.current;Math.abs(z)>2&&(w.current=!0);const H=z/h,T=E.current+H*g,O=Math.round(T/g)*g,i=parseFloat(Math.max(f,Math.min(a,O)).toFixed(y));l(i)},[g,h,y,f,a,l]),M=n.useCallback(()=>{b.current&&!w.current&&(j(t.toFixed(y)),C(!0)),b.current=!1},[t,y]),N=Math.max(0,Math.min(1,(t-f)/(a-f)))*100;return v?e.jsx("input",{ref:c,type:"text",inputMode:"decimal",value:k,onChange:x=>j(x.target.value),onBlur:S,onKeyDown:x=>{x.key==="Enter"&&S(),x.key==="Escape"&&C(!1)},style:{width:d,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",{style:{position:"relative",width:d,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:D,onPointerMove:I,onPointerUp:M,children:[e.jsx("div",{style:{position:"absolute",inset:0,width:`${N}%`,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(y)})]})}function se({mix:t,styles:l,isActive:f,isDirty:a,onActivate:g,onUpdate:h,onDelete:d,onDuplicate:y,onRefreshCache:v}){function C(o){o.target.closest("button, input, select, textarea, a")||g()}const[k,j]=n.useState(!1),[c,S]=n.useState(t.name),[b,m]=n.useState(!1),[E,w]=n.useState(!1),[D,I]=n.useState(!1),[M,N]=n.useState(!1),[x,z]=n.useState(!1),[H,T]=n.useState(!1),O=n.useRef(null);function i(){const o=t.styles.filter(p=>p.enabled).map(p=>{var _;return((_=l.find(P=>P.id===p.style_id))==null?void 0:_.value)??""}).filter(Boolean);o.length!==0&&navigator.clipboard.writeText(o.join(", ")).then(()=>{z(!0),setTimeout(()=>z(!1),1500)})}async function r(o){if(o.type.startsWith("image/")){m(!0);try{const p=await ae(o);h({...t,image_filename:p})}catch(p){console.error("[ImmacStyleMixer] Mix image upload failed",p)}finally{m(!1)}}}function s(){j(!1),c.trim()!==t.name&&h({...t,name:c.trim()||t.name})}function u(o,p){const _=t.styles.map((P,ie)=>ie===o?{...P,...p}:P);h({...t,styles:_})}function R(o){h({...t,styles:t.styles.filter((p,_)=>_!==o)})}function B(o){t.styles.some(p=>p.style_id===o)||h({...t,styles:[...t.styles,{style_id:o,weight:1,enabled:!0}]})}const A=l.filter(o=>!t.styles.some(p=>p.style_id===o.id));return e.jsxs("div",{style:{border:`2px solid ${H?"#88aaff":f?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:8,padding:10,background:H?"rgba(100,130,255,0.07)":"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:8,width:"100%",position:"relative",overflow:"hidden",cursor:"pointer",transition:"border-color 0.15s, background 0.15s"},onClick:C,onDragOver:o=>{o.dataTransfer.types.includes("application/x-immac-style-id")&&(o.preventDefault(),o.dataTransfer.dropEffect="copy",T(!0))},onDragLeave:o=>{o.currentTarget.contains(o.relatedTarget)||T(!1)},onDrop:o=>{T(!1);const p=o.dataTransfer.getData("application/x-immac-style-id");p&&(o.preventDefault(),o.stopPropagation(),B(p))},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[k?e.jsx("input",{autoFocus:!0,value:c,onChange:o=>S(o.target.value),onBlur:s,onKeyDown:o=>{o.key==="Enter"&&s(),o.key==="Escape"&&j(!1)},style:q}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{S(t.name),j(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),a&&e.jsx("button",{title:"Pending node-cache changes — click to reload",onClick:o=>{o.stopPropagation(),v()},style:{...F,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:()=>h({...t,favorite:!t.favorite}),style:F,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Duplicate mix",onClick:y,style:{...F,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-copy"})}),(()=>{const o=t.styles.some(p=>{var _;return p.enabled&&((_=l.find(P=>P.id===p.style_id))==null?void 0:_.value)});return e.jsx("button",{title:o?"Copy combined prompt":"No enabled styles with prompt text",onClick:p=>{p.stopPropagation(),i()},disabled:!o,style:{...F,color:x?"#6c6":"var(--p-text-muted-color, #888)",opacity:o?1:.35},children:e.jsx("i",{className:x?"pi pi-check":"pi pi-clipboard"})})})(),e.jsx("button",{title:"Delete mix",onClick:()=>I(!0),style:{...F,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]}),D&&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:()=>I(!1),style:{...J},children:"Cancel"}),e.jsx("button",{onClick:d,style:{...J,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),children:[e.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var o;return(o=O.current)==null?void 0:o.click()},onDragOver:o=>o.preventDefault(),onDrop:o=>{o.preventDefault();const p=o.dataTransfer.files[0];p&&r(p)},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:b?"Uploading…":t.image_filename?e.jsx("img",{src:G(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover",transition:"transform 0.3s ease",transform:M?"scale(1.05)":"scale(1)"}}):"+ cover image"}),!b&&t.image_filename&&M&&e.jsx("button",{title:"View full size",onClick:o=>{o.stopPropagation(),w(!0)},style:le,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),E&&t.image_filename&&e.jsx(K,{src:G(t.image_filename),alt:t.name,onClose:()=>w(!1)}),e.jsx("input",{ref:O,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{var _;const p=(_=o.target.files)==null?void 0:_[0];p&&r(p),o.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((o,p)=>{const _=l.find(P=>P.id===o.style_id);return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("button",{title:o.enabled?"Disable":"Enable",onClick:()=>u(p,{enabled:!o.enabled}),style:{...F,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:o.enabled?"var(--p-primary-color, #557755)":"transparent",color:o.enabled?"#fff":"#888",minWidth:32},children:o.enabled?"ON":"OFF"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(_==null?void 0:_.name)??o.style_id}),e.jsx(te,{value:o.weight,onChange:P=>u(p,{weight:P}),min:0,max:1,step:.05,width:64}),e.jsx("button",{title:"Remove from mix",onClick:()=>R(p),style:{...F,color:"#e55",fontSize:13},children:"✕"})]},o.style_id)})]}),e.jsxs("select",{value:"",disabled:A.length===0,onChange:o=>{o.target.value&&B(o.target.value)},style:{...q,cursor:A.length===0?"not-allowed":"pointer",opacity:A.length===0?.45:1},title:A.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:A.length===0?"— all styles already added —":"+ add style…"}),A.map(o=>e.jsx("option",{value:o.id,children:o.name},o.id))]})]})}const J={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},F={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},le={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)"},q={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 de({style:t,onUpdate:l,onDelete:f,inCurrentMix:a,onAddToMix:g,onRemoveFromMix:h}){const[d,b]=n.useState(!1),[v,C]=n.useState(!1),[k,j]=n.useState(t.name),[c,S]=n.useState(t.value),[y,m]=n.useState(!1),[E,w]=n.useState(!1),[D,I]=n.useState(!1),[M,N]=n.useState(!1),[x,z]=n.useState(!1),H=n.useRef(null),T=!!(g||h);function O(){t.value&&navigator.clipboard.writeText(t.value).then(()=>{z(!0),setTimeout(()=>z(!1),1500)})}function i(){b(!1),k.trim()!==t.name&&l({...t,name:k.trim()||t.name})}function r(){C(!1),c!==t.value&&l({...t,value:c})}async function s(u){if(u.type.startsWith("image/")){m(!0);try{const R=await re(u);l({...t,image_filename:R})}catch(R){console.error("[ImmacStyleMixer] Image upload failed",R)}finally{m(!1)}}}return e.jsxs("div",{draggable:!0,onDragStart:u=>{u.dataTransfer.setData("application/x-immac-style-id",t.id),u.dataTransfer.effectAllowed="copy"},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",cursor:"grab"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>l({...t,favorite:!t.favorite}),style:$,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsxs("div",{style:{display:"flex",gap:2},children:[a?e.jsx("button",{title:"Remove from current mix",onClick:h,style:{...$,color:"#e66"},children:e.jsx("i",{className:"pi pi-minus"})}):e.jsx("button",{title:T?"Add to current mix":"No active mix",onClick:g,disabled:!T,style:{...$,color:"var(--p-text-muted-color, #888)",opacity:T?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:O,disabled:!t.value,style:{...$,color:x?"#6c6":"var(--p-text-muted-color, #888)",opacity:t.value?1:.35},children:e.jsx("i",{className:x?"pi pi-check":"pi pi-clipboard"})}),e.jsx("button",{title:"Delete style",onClick:()=>I(!0),style:{...$,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]})]}),D&&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:()=>I(!1),style:{...Q},children:"Cancel"}),e.jsx("button",{onClick:f,style:{...Q,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),children:[e.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var u;return(u=H.current)==null?void 0:u.click()},onDragOver:u=>u.preventDefault(),onDrop:u=>{u.preventDefault();const R=u.dataTransfer.files[0];R&&s(R)},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:y?"Uploading…":t.image_filename?e.jsx("img",{src:L(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover",transition:"transform 0.3s ease",transform:M?"scale(1.05)":"scale(1)"}}):"+ image"}),!y&&t.image_filename&&M&&e.jsx("button",{title:"View full size",onClick:u=>{u.stopPropagation(),w(!0)},style:ce,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),E&&t.image_filename&&e.jsx(K,{src:L(t.image_filename),alt:t.name,onClose:()=>w(!1)}),e.jsx("input",{ref:H,type:"file",accept:"image/*",style:{display:"none"},onChange:u=>{var B;const R=(B=u.target.files)==null?void 0:B[0];R&&s(R),u.target.value=""}}),d?e.jsx("input",{autoFocus:!0,value:k,onChange:u=>j(u.target.value),onBlur:i,onKeyDown:u=>{u.key==="Enter"&&i(),u.key==="Escape"&&b(!1)},style:Z}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{j(t.name),b(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),v?e.jsx("textarea",{autoFocus:!0,value:c,onChange:u=>S(u.target.value),onBlur:r,onKeyDown:u=>{u.key==="Escape"&&C(!1)},rows:3,style:{...Z,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{S(t.value),C(!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 Q={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},$={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},ce={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)"},Z={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 ue({styles:t,onUpdate:l,onDelete:f,onAdd:a,currentMixStyleIds:g,onAddToMix:h,onRemoveFromMix:d}){const[b,v]=n.useState(""),[C,k]=n.useState(!1);function j(){const m=b.trim();m&&(a(m),v(""),k(!1))}const c=t.filter(m=>m.favorite),S=t.filter(m=>!m.favorite),y=[...c,...S];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:[y.map(m=>e.jsx(de,{style:m,onUpdate:l,onDelete:()=>f(m.id),inCurrentMix:g==null?void 0:g.has(m.id),onAddToMix:h?()=>h(m.id):void 0,onRemoveFromMix:d?()=>d(m.id):void 0},m.id)),C?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:b,onChange:m=>v(m.target.value),onKeyDown:m=>{m.key==="Enter"&&j(),m.key==="Escape"&&k(!1)},style:pe}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:j,style:ee,children:"Add"}),e.jsx("button",{onClick:()=>{k(!1),v("")},style:{...ee,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>k(!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 pe={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},ee={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function W(){return crypto.randomUUID()}function V({title:t,children:l,defaultOpen:f=!0,grow:a=!0}){const[g,h]=n.useState(f);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:g&&a?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>h(d=>!d),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:l})]})}function xe(){const{data:t,loading:l,error:f,update:a,pendingRefresh:g,refreshNodes:h}=ne(),d=t.mixes.find(i=>i.id===t.current_mix_id)??null,[b,v]=n.useState(null),[C,k]=n.useState(null),[j,c]=n.useState(!1),S=n.useCallback(i=>{const r={id:W(),name:i,value:"",favorite:!1,image_filename:null};a(s=>({...s,styles:[...s.styles,r]}))},[a]),y=n.useCallback(i=>{a(r=>({...r,styles:r.styles.map(s=>s.id===i.id?i:s)}))},[a]),m=n.useCallback(i=>{a(r=>({...r,styles:r.styles.filter(s=>s.id!==i),mixes:r.mixes.map(s=>({...s,styles:s.styles.filter(u=>u.style_id!==i)}))}))},[a]),E=n.useCallback(i=>{const r={...i,id:W(),name:`${i.name} (copy)`,favorite:!1};a(s=>{const u=s.mixes.findIndex(B=>B.id===i.id),R=[...s.mixes];return R.splice(u+1,0,r),{...s,mixes:R}})},[a]),w=n.useCallback(()=>{const i={id:W(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};a(r=>({...r,mixes:[...r.mixes,i]}))},[t.mixes.length,a]),D=n.useCallback(i=>{a(r=>({...r,mixes:r.mixes.map(s=>s.id===i.id?i:s)}))},[a]),I=n.useCallback(i=>{d&&(d.styles.some(r=>r.style_id===i)||D({...d,styles:[...d.styles,{style_id:i,weight:1,enabled:!0}]}))},[d,D]),M=n.useCallback(i=>{d&&D({...d,styles:d.styles.filter(r=>r.style_id!==i)})},[d,D]),N=n.useCallback(i=>{a(r=>({...r,mixes:r.mixes.filter(s=>s.id!==i),current_mix_id:r.current_mix_id===i?null:r.current_mix_id}))},[a]),x=n.useCallback(i=>{a(r=>({...r,current_mix_id:i}))},[a]),z=n.useCallback((i,r)=>{d&&D({...d,styles:d.styles.map(s=>s.style_id===i?{...s,...r}:s)})},[d,D]);if(l)return e.jsx("div",{style:U,children:"Loading…"});if(f)return e.jsxs("div",{style:{...U,color:"#e55"},children:["Error: ",f]});const H=t.mixes.filter(i=>i.favorite),T=t.mixes.filter(i=>!i.favorite),O=[...H,...T];return e.jsxs("div",{style:U,children:[e.jsx(V,{title:"Current Mix",grow:!1,children:d?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:d.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap",borderRadius:6,border:`1px dashed ${j?"#88aaff":"transparent"}`,background:j?"rgba(100,130,255,0.07)":"transparent",padding:j?4:0,transition:"border-color 0.15s, background 0.15s, padding 0.1s",minHeight:40},onDragOver:i=>{i.dataTransfer.types.includes("application/x-immac-style-id")&&(i.preventDefault(),i.dataTransfer.dropEffect="copy",c(!0))},onDragLeave:i=>{i.currentTarget.contains(i.relatedTarget)||c(!1)},onDrop:i=>{c(!1);const r=i.dataTransfer.getData("application/x-immac-style-id");r&&(i.preventDefault(),I(r))},children:[d.styles.length===0&&!j&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),d.styles.map(i=>{const r=t.styles.find(s=>s.id===i.style_id);return e.jsxs("div",{onMouseEnter:()=>k(i.style_id),onMouseLeave:()=>k(null),style:{border:`1px solid ${i.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,overflow:"hidden",background:"var(--p-surface-section, #1e1e1e)",opacity:i.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:r!=null&&r.image_filename?e.jsx("img",{src:L(r.image_filename),alt:r.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block",transition:"transform 0.3s ease",transform:C===i.style_id?"scale(1.05)":"scale(1)"}}):e.jsx("i",{className:"pi pi-image",style:{fontSize:20,color:"#555"}})}),(r==null?void 0:r.image_filename)&&C===i.style_id&&e.jsx("button",{title:"View full size",onClick:()=>v(L(r.image_filename)),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:(r==null?void 0:r.name)??"?"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("button",{title:i.enabled?"Disable style":"Enable style",onClick:s=>{s.stopPropagation(),z(i.style_id,{enabled:!i.enabled})},style:{background:i.enabled?"var(--p-primary-color, #557755)":"transparent",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,color:i.enabled?"#fff":"#888",cursor:"pointer",fontSize:10,padding:"1px 4px",lineHeight:1,flexShrink:0},children:i.enabled?"ON":"OFF"}),e.jsx("div",{style:{flex:1,minWidth:0},onClick:s=>s.stopPropagation(),children:e.jsx(te,{value:i.weight,onChange:s=>z(i.style_id,{weight:s}),min:0,max:1,step:.05,width:"100%"})}),e.jsx("button",{title:"Remove from mix",onClick:s=>{s.stopPropagation(),M(i.style_id)},style:{background:"none",border:"none",cursor:"pointer",color:"#e66",fontSize:13,padding:"0 2px",lineHeight:1,flexShrink:0},children:"✕"})]})]})]},i.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(V,{title:"Mixes",children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(280px, 1fr))",gap:10},children:[O.map(i=>e.jsx(se,{mix:i,styles:t.styles,isActive:i.id===t.current_mix_id,isDirty:g,onActivate:()=>x(i.id),onUpdate:D,onDelete:()=>N(i.id),onDuplicate:()=>E(i),onRefreshCache:h},i.id)),e.jsx("button",{title:"Add a new mix",onClick:w,style:{width:"100%",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22},children:"+"})]})}),e.jsx(V,{title:"Styles",children:e.jsx(ue,{styles:t.styles,onUpdate:y,onDelete:m,onAdd:S,currentMixStyleIds:d?new Set(d.styles.map(i=>i.style_id)):void 0,onAddToMix:d?I:void 0,onRemoveFromMix:d?M:void 0})}),b&&e.jsx(K,{src:b,onClose:()=>v(null)})]})}const U={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{xe as default}; +}`,document.head.appendChild(t)})();function de({style:t,onUpdate:l,onDelete:f,inCurrentMix:a,onAddToMix:g,onRemoveFromMix:h}){const[d,y]=n.useState(!1),[v,C]=n.useState(!1),[k,j]=n.useState(t.name),[c,S]=n.useState(t.value),[b,m]=n.useState(!1),[E,w]=n.useState(!1),[D,I]=n.useState(!1),[M,N]=n.useState(!1),[x,z]=n.useState(!1),H=n.useRef(null),T=!!(g||h);function O(){t.value&&navigator.clipboard.writeText(t.value).then(()=>{z(!0),setTimeout(()=>z(!1),1500)})}function i(){y(!1),k.trim()!==t.name&&l({...t,name:k.trim()||t.name})}function r(){C(!1),c!==t.value&&l({...t,value:c})}async function s(u){if(u.type.startsWith("image/")){m(!0);try{const R=await re(u);l({...t,image_filename:R})}catch(R){console.error("[ImmacStyleMixer] Image upload failed",R)}finally{m(!1)}}}return e.jsxs("div",{draggable:!0,onDragStart:u=>{u.dataTransfer.setData("application/x-immac-style-id",t.id),u.dataTransfer.effectAllowed="copy"},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",cursor:"grab"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>l({...t,favorite:!t.favorite}),style:$,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsxs("div",{style:{display:"flex",gap:2},children:[a?e.jsx("button",{title:"Remove from current mix",onClick:h,style:{...$,color:"#e66"},children:e.jsx("i",{className:"pi pi-minus"})}):e.jsx("button",{title:T?"Add to current mix":"No active mix",onClick:g,disabled:!T,style:{...$,color:"var(--p-text-muted-color, #888)",opacity:T?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:O,disabled:!t.value,style:{...$,color:x?"#6c6":"var(--p-text-muted-color, #888)",opacity:t.value?1:.35},children:e.jsx("i",{className:x?"pi pi-check":"pi pi-clipboard"})}),e.jsx("button",{title:"Delete style",onClick:()=>I(!0),style:{...$,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]})]}),D&&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:()=>I(!1),style:{...Q},children:"Cancel"}),e.jsx("button",{onClick:f,style:{...Q,background:"#c33",color:"#fff",borderColor:"#c33"},children:"Delete"})]})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),children:[e.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var u;return(u=H.current)==null?void 0:u.click()},onDragOver:u=>u.preventDefault(),onDrop:u=>{u.preventDefault();const R=u.dataTransfer.files[0];R&&s(R)},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:b?"Uploading…":t.image_filename?e.jsx("img",{src:L(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover",transition:"transform 0.3s ease",transform:M?"scale(1.05)":"scale(1)"}}):"+ image"}),!b&&t.image_filename&&M&&e.jsx("button",{title:"View full size",onClick:u=>{u.stopPropagation(),w(!0)},style:ce,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),E&&t.image_filename&&e.jsx(K,{src:L(t.image_filename),alt:t.name,onClose:()=>w(!1)}),e.jsx("input",{ref:H,type:"file",accept:"image/*",style:{display:"none"},onChange:u=>{var B;const R=(B=u.target.files)==null?void 0:B[0];R&&s(R),u.target.value=""}}),d?e.jsx("input",{autoFocus:!0,value:k,onChange:u=>j(u.target.value),onBlur:i,onKeyDown:u=>{u.key==="Enter"&&i(),u.key==="Escape"&&y(!1)},style:Z}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{j(t.name),y(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),v?e.jsx("textarea",{autoFocus:!0,value:c,onChange:u=>S(u.target.value),onBlur:r,onKeyDown:u=>{u.key==="Escape"&&C(!1)},rows:3,style:{...Z,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{S(t.value),C(!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 Q={background:"transparent",border:"1px solid #666",borderRadius:5,color:"#ccc",cursor:"pointer",fontSize:12,padding:"4px 12px"},$={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},ce={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)"},Z={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 ue({styles:t,onUpdate:l,onDelete:f,onAdd:a,currentMixStyleIds:g,onAddToMix:h,onRemoveFromMix:d}){const[y,v]=n.useState(""),[C,k]=n.useState(!1);function j(){const m=y.trim();m&&(a(m),v(""),k(!1))}const c=t.filter(m=>m.favorite),S=t.filter(m=>!m.favorite),b=[...c,...S];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:[b.map(m=>e.jsx(de,{style:m,onUpdate:l,onDelete:()=>f(m.id),inCurrentMix:g==null?void 0:g.has(m.id),onAddToMix:h?()=>h(m.id):void 0,onRemoveFromMix:d?()=>d(m.id):void 0},m.id)),C?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:y,onChange:m=>v(m.target.value),onKeyDown:m=>{m.key==="Enter"&&j(),m.key==="Escape"&&k(!1)},style:pe}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:j,style:ee,children:"Add"}),e.jsx("button",{onClick:()=>{k(!1),v("")},style:{...ee,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>k(!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 pe={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},ee={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function W(){return crypto.randomUUID()}function V({title:t,children:l,defaultOpen:f=!0,grow:a=!0}){const[g,h]=n.useState(f);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:g&&a?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>h(d=>!d),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:l})]})}function xe(){const{data:t,loading:l,error:f,update:a,pendingRefresh:g,refreshNodes:h}=ne(),d=t.mixes.find(i=>i.id===t.current_mix_id)??null,[y,v]=n.useState(null),[C,k]=n.useState(null),[j,c]=n.useState(!1),S=n.useCallback(i=>{const r={id:W(),name:i,value:"",favorite:!1,image_filename:null};a(s=>({...s,styles:[...s.styles,r]}))},[a]),b=n.useCallback(i=>{a(r=>({...r,styles:r.styles.map(s=>s.id===i.id?i:s)}))},[a]),m=n.useCallback(i=>{a(r=>({...r,styles:r.styles.filter(s=>s.id!==i),mixes:r.mixes.map(s=>({...s,styles:s.styles.filter(u=>u.style_id!==i)}))}))},[a]),E=n.useCallback(i=>{const r={...i,id:W(),name:`${i.name} (copy)`,favorite:!1};a(s=>{const u=s.mixes.findIndex(B=>B.id===i.id),R=[...s.mixes];return R.splice(u+1,0,r),{...s,mixes:R}})},[a]),w=n.useCallback(()=>{const i={id:W(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};a(r=>({...r,mixes:[...r.mixes,i]}))},[t.mixes.length,a]),D=n.useCallback(i=>{a(r=>({...r,mixes:r.mixes.map(s=>s.id===i.id?i:s)}))},[a]),I=n.useCallback(i=>{d&&(d.styles.some(r=>r.style_id===i)||D({...d,styles:[...d.styles,{style_id:i,weight:1,enabled:!0}]}))},[d,D]),M=n.useCallback(i=>{d&&D({...d,styles:d.styles.filter(r=>r.style_id!==i)})},[d,D]),N=n.useCallback(i=>{a(r=>({...r,mixes:r.mixes.filter(s=>s.id!==i),current_mix_id:r.current_mix_id===i?null:r.current_mix_id}))},[a]),x=n.useCallback(i=>{a(r=>({...r,current_mix_id:i}))},[a]),z=n.useCallback((i,r)=>{d&&D({...d,styles:d.styles.map(s=>s.style_id===i?{...s,...r}:s)})},[d,D]);if(l)return e.jsx("div",{style:U,children:"Loading…"});if(f)return e.jsxs("div",{style:{...U,color:"#e55"},children:["Error: ",f]});const H=t.mixes.filter(i=>i.favorite),T=t.mixes.filter(i=>!i.favorite),O=[...H,...T];return e.jsxs("div",{style:U,children:[e.jsx(V,{title:"Current Mix",grow:!1,children:d?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:d.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap",borderRadius:6,border:`1px dashed ${j?"#88aaff":"transparent"}`,background:j?"rgba(100,130,255,0.07)":"transparent",padding:j?4:0,transition:"border-color 0.15s, background 0.15s, padding 0.1s",minHeight:40},onDragOver:i=>{i.dataTransfer.types.includes("application/x-immac-style-id")&&(i.preventDefault(),i.dataTransfer.dropEffect="copy",c(!0))},onDragLeave:i=>{i.currentTarget.contains(i.relatedTarget)||c(!1)},onDrop:i=>{c(!1);const r=i.dataTransfer.getData("application/x-immac-style-id");r&&(i.preventDefault(),I(r))},children:[d.styles.length===0&&!j&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),d.styles.map(i=>{const r=t.styles.find(s=>s.id===i.style_id);return e.jsxs("div",{onMouseEnter:()=>k(i.style_id),onMouseLeave:()=>k(null),onDoubleClick:()=>z(i.style_id,{enabled:!i.enabled}),style:{border:`1px solid ${i.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,overflow:"hidden",background:"var(--p-surface-section, #1e1e1e)",opacity:i.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:r!=null&&r.image_filename?e.jsx("img",{src:L(r.image_filename),alt:r.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block",transition:"transform 0.3s ease",transform:C===i.style_id?"scale(1.05)":"scale(1)"}}):e.jsx("i",{className:"pi pi-image",style:{fontSize:20,color:"#555"}})}),(r==null?void 0:r.image_filename)&&C===i.style_id&&e.jsx("button",{title:"View full size",onClick:()=>v(L(r.image_filename)),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:(r==null?void 0:r.name)??"?"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("button",{title:i.enabled?"Disable style":"Enable style",onClick:s=>{s.stopPropagation(),z(i.style_id,{enabled:!i.enabled})},style:{background:i.enabled?"var(--p-primary-color, #557755)":"transparent",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,color:i.enabled?"#fff":"#888",cursor:"pointer",fontSize:10,padding:"1px 4px",lineHeight:1,flexShrink:0},children:i.enabled?"ON":"OFF"}),e.jsx("div",{style:{flex:1,minWidth:0},onClick:s=>s.stopPropagation(),children:e.jsx(te,{value:i.weight,onChange:s=>z(i.style_id,{weight:s}),min:0,max:1,step:.05,width:"100%"})}),e.jsx("button",{title:"Remove from mix",onClick:s=>{s.stopPropagation(),M(i.style_id)},style:{background:"none",border:"none",cursor:"pointer",color:"#e66",fontSize:13,padding:"0 2px",lineHeight:1,flexShrink:0},children:"✕"})]})]})]},i.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(V,{title:"Mixes",children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(280px, 1fr))",gap:10},children:[O.map(i=>e.jsx(se,{mix:i,styles:t.styles,isActive:i.id===t.current_mix_id,isDirty:g,onActivate:()=>x(i.id),onUpdate:D,onDelete:()=>N(i.id),onDuplicate:()=>E(i),onRefreshCache:h},i.id)),e.jsx("button",{title:"Add a new mix",onClick:w,style:{width:"100%",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22},children:"+"})]})}),e.jsx(V,{title:"Styles",children:e.jsx(ue,{styles:t.styles,onUpdate:b,onDelete:m,onAdd:S,currentMixStyleIds:d?new Set(d.styles.map(i=>i.style_id)):void 0,onAddToMix:d?I:void 0,onRemoveFromMix:d?M:void 0})}),y&&e.jsx(K,{src:y,onClose:()=>v(null)})]})}const U={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{xe as default}; diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js index fe49b68..1f93922 100644 --- a/dist/immac_style_mixer/main.js +++ b/dist/immac_style_mixer/main.js @@ -1,4 +1,4 @@ -const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-Cgx4HgTP.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]); +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-C2nCmlGN.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]); import{r as P,a as M,R as I}from"./vendor-DPfS0z4g.js";const j="modulepreload",k=function(t){return"/"+t},E={},O=function(e,i,r){let d=Promise.resolve();if(i&&i.length>0){document.getElementsByTagName("link");const n=document.querySelector("meta[property=csp-nonce]"),a=(n==null?void 0:n.nonce)||(n==null?void 0:n.getAttribute("nonce"));d=Promise.allSettled(i.map(c=>{if(c=k(c),c in E)return;E[c]=!0;const o=c.endsWith(".css"),y=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${y}`))return;const s=document.createElement("link");if(s.rel=o?"stylesheet":j,o||(s.as="script"),s.crossOrigin="",s.href=c,a&&s.setAttribute("nonce",a),document.head.appendChild(s),o)return new Promise((f,h)=>{s.addEventListener("load",f),s.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${c}`)))})}))}function p(n){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=n,window.dispatchEvent(a),!a.defaultPrevented)throw n}return d.then(n=>{for(const a of n||[])a.status==="rejected"&&p(a.reason);return e().catch(p)})};var R={exports:{}},v={};/** * @license React * react-jsx-runtime.production.min.js @@ -7,4 +7,4 @@ import{r as P,a as M,R as I}from"./vendor-DPfS0z4g.js";const j="modulepreload",k * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - */var z=P,L=Symbol.for("react.element"),T=Symbol.for("react.fragment"),U=Object.prototype.hasOwnProperty,D=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,$={key:!0,ref:!0,__self:!0,__source:!0};function C(t,e,i){var r,d={},p=null,n=null;i!==void 0&&(p=""+i),e.key!==void 0&&(p=""+e.key),e.ref!==void 0&&(n=e.ref);for(r in e)U.call(e,r)&&!$.hasOwnProperty(r)&&(d[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)d[r]===void 0&&(d[r]=e[r]);return{$$typeof:L,type:t,key:p,ref:n,props:d,_owner:D.current}}v.Fragment=T;v.jsx=C;v.jsxs=C;R.exports=v;var x=R.exports,_={},b=M;_.createRoot=b.createRoot,_.hydrateRoot=b.hydrateRoot;const W=I.lazy(()=>O(()=>import("./StyleMixerPanel-Cgx4HgTP.js"),__vite__mapDeps([0,1])));function A(){return new Promise(t=>{function e(){if(window.app){t();return}const i=setInterval(()=>{window.app&&(clearInterval(i),t())},50);setTimeout(()=>{clearInterval(i),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),t()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()})}async function F(){if(await A(),!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:t=>{const e=document.createElement("div");e.id="immac-style-mixer-root",e.style.position="absolute",e.style.inset="0",e.style.overflow="hidden",t.style.position="relative",t.style.height="100%",t.appendChild(e),_.createRoot(e).render(x.jsx(I.StrictMode,{children:x.jsx(P.Suspense,{fallback:x.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:x.jsx(W,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer",nodeCreated(t){var c;if(t.comfyClass!=="StyleMixImmacStyleMixer")return;const e=(c=t.widgets)==null?void 0:c.find(o=>o.name==="mix");if(!e)return;const i=document.createElement("img");i.style.cssText="width:100%;height:100%;display:none;object-fit:contain;border-radius:4px";const r=document.createElement("div");r.style.cssText="padding:4px;box-sizing:border-box",r.appendChild(i),r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),t.addDOMWidget("immac_mix_preview","div",r,{serialize:!1});function d(o,y){var g,w,l,S;const s=((g=t.size)==null?void 0:g[0])??300,f=y/o,h=Math.round((s-8)*f),m=Math.max(80,Math.min(h,600));r.style.setProperty("--comfy-widget-min-height",String(m)),r.style.setProperty("--comfy-widget-height",String(m));const u=(w=t.computeSize)==null?void 0:w.call(t);u&&t.setSize([Math.max(t.size[0],u[0]),Math.max(t.size[1],u[1])]),(S=(l=window.app)==null?void 0:l.graph)==null||S.setDirtyCanvas(!0)}function p(){var o,y;r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),i.style.display="none",(y=(o=window.app)==null?void 0:o.graph)==null||y.setDirtyCanvas(!0)}async function n(o){var y,s;try{const f=await fetch("/immac_style_mixer/api/data");if(!f.ok)return;const h=await f.json(),m=(y=h.mixes)==null?void 0:y.find(g=>g.name===o);let u="";if(m!=null&&m.image_filename)u=`/view?filename=${encodeURIComponent(m.image_filename)}&subfolder=immac_style_mixer%2Fmixes&type=input`;else if((s=m==null?void 0:m.styles)!=null&&s.length){const g=Object.fromEntries((h.styles??[]).map(l=>[l.id,l])),w=m.styles.filter(l=>l.enabled!==!1).map(l=>g[l.style_id]).find(l=>l==null?void 0:l.image_filename);w&&(u=`/view?filename=${encodeURIComponent(w.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input`)}if(!u){p();return}i.onload=()=>{i.style.display="block",d(i.naturalWidth,i.naturalHeight)},i.onerror=()=>{p()},i.src=u}catch(f){console.error("[ImmacStyleMixer] Preview update failed",f)}}const a=e.callback;e.callback=function(...o){a==null||a.apply(this,o),n(String(e.value??""))},e.value&&n(String(e.value))}})}F().catch(console.error);export{x as j}; + */var z=P,L=Symbol.for("react.element"),T=Symbol.for("react.fragment"),U=Object.prototype.hasOwnProperty,D=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,$={key:!0,ref:!0,__self:!0,__source:!0};function C(t,e,i){var r,d={},p=null,n=null;i!==void 0&&(p=""+i),e.key!==void 0&&(p=""+e.key),e.ref!==void 0&&(n=e.ref);for(r in e)U.call(e,r)&&!$.hasOwnProperty(r)&&(d[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)d[r]===void 0&&(d[r]=e[r]);return{$$typeof:L,type:t,key:p,ref:n,props:d,_owner:D.current}}v.Fragment=T;v.jsx=C;v.jsxs=C;R.exports=v;var x=R.exports,_={},b=M;_.createRoot=b.createRoot,_.hydrateRoot=b.hydrateRoot;const W=I.lazy(()=>O(()=>import("./StyleMixerPanel-C2nCmlGN.js"),__vite__mapDeps([0,1])));function A(){return new Promise(t=>{function e(){if(window.app){t();return}const i=setInterval(()=>{window.app&&(clearInterval(i),t())},50);setTimeout(()=>{clearInterval(i),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),t()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()})}async function F(){if(await A(),!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:t=>{const e=document.createElement("div");e.id="immac-style-mixer-root",e.style.position="absolute",e.style.inset="0",e.style.overflow="hidden",t.style.position="relative",t.style.height="100%",t.appendChild(e),_.createRoot(e).render(x.jsx(I.StrictMode,{children:x.jsx(P.Suspense,{fallback:x.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:x.jsx(W,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer",nodeCreated(t){var c;if(t.comfyClass!=="StyleMixImmacStyleMixer")return;const e=(c=t.widgets)==null?void 0:c.find(o=>o.name==="mix");if(!e)return;const i=document.createElement("img");i.style.cssText="width:100%;height:100%;display:none;object-fit:contain;border-radius:4px";const r=document.createElement("div");r.style.cssText="padding:4px;box-sizing:border-box",r.appendChild(i),r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),t.addDOMWidget("immac_mix_preview","div",r,{serialize:!1});function d(o,y){var g,w,l,S;const s=((g=t.size)==null?void 0:g[0])??300,f=y/o,h=Math.round((s-8)*f),m=Math.max(80,Math.min(h,600));r.style.setProperty("--comfy-widget-min-height",String(m)),r.style.setProperty("--comfy-widget-height",String(m));const u=(w=t.computeSize)==null?void 0:w.call(t);u&&t.setSize([Math.max(t.size[0],u[0]),Math.max(t.size[1],u[1])]),(S=(l=window.app)==null?void 0:l.graph)==null||S.setDirtyCanvas(!0)}function p(){var o,y;r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),i.style.display="none",(y=(o=window.app)==null?void 0:o.graph)==null||y.setDirtyCanvas(!0)}async function n(o){var y,s;try{const f=await fetch("/immac_style_mixer/api/data");if(!f.ok)return;const h=await f.json(),m=(y=h.mixes)==null?void 0:y.find(g=>g.name===o);let u="";if(m!=null&&m.image_filename)u=`/view?filename=${encodeURIComponent(m.image_filename)}&subfolder=immac_style_mixer%2Fmixes&type=input`;else if((s=m==null?void 0:m.styles)!=null&&s.length){const g=Object.fromEntries((h.styles??[]).map(l=>[l.id,l])),w=m.styles.filter(l=>l.enabled!==!1).map(l=>g[l.style_id]).find(l=>l==null?void 0:l.image_filename);w&&(u=`/view?filename=${encodeURIComponent(w.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input`)}if(!u){p();return}i.onload=()=>{i.style.display="block",d(i.naturalWidth,i.naturalHeight)},i.onerror=()=>{p()},i.src=u}catch(f){console.error("[ImmacStyleMixer] Preview update failed",f)}}const a=e.callback;e.callback=function(...o){a==null||a.apply(this,o),n(String(e.value??""))},e.value&&n(String(e.value))}})}F().catch(console.error);export{x as j}; diff --git a/ui/src/components/StyleMixerPanel.tsx b/ui/src/components/StyleMixerPanel.tsx index 5bd7507..6919ab9 100644 --- a/ui/src/components/StyleMixerPanel.tsx +++ b/ui/src/components/StyleMixerPanel.tsx @@ -204,6 +204,7 @@ export default function StyleMixerPanel() { key={entry.style_id} onMouseEnter={() => setHoveredChipId(entry.style_id)} onMouseLeave={() => setHoveredChipId(null)} + onDoubleClick={() => updateCurrentMixEntry(entry.style_id, { enabled: !entry.enabled })} style={{ border: `1px solid ${entry.enabled ? 'var(--p-primary-color, #6c6)' : 'var(--p-surface-border, #444)'}`, borderRadius: 6,