diff --git a/dist/immac_style_mixer/StyleMixerPanel-317gZSvY.js b/dist/immac_style_mixer/StyleMixerPanel-317gZSvY.js
new file mode 100644
index 0000000..1f26f48
--- /dev/null
+++ b/dist/immac_style_mixer/StyleMixerPanel-317gZSvY.js
@@ -0,0 +1 @@
+import{j as e}from"./main.js";import{r as a,b as $}from"./vendor-DPfS0z4g.js";const L={styles:[],mixes:[],current_mix_id:null},T="/immac_style_mixer/api/data";function U(){const[t,l]=a.useState(L),[s,o]=a.useState(!0),[d,y]=a.useState(null),h=a.useRef(null);a.useEffect(()=>{fetch(T).then(u=>{if(!u.ok)throw new Error(`HTTP ${u.status}`);return u.json()}).then(u=>l(u)).catch(u=>y(String(u))).finally(()=>o(!1))},[]);const m=a.useCallback(u=>{l(b=>{const v=typeof u=="function"?u(b):u;return h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{fetch(T,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(v)}).catch(j=>console.error("[ImmacStyleMixer] Save failed",j))},400),v})},[]);return{data:t,loading:s,error:d,update:m}}async function V(t){const l=new FormData;l.append("image",t),l.append("subfolder","immac_style_mixer/styles"),l.append("type","input");const s=await fetch("/upload/image",{method:"POST",body:l});if(!s.ok)throw new Error(`Upload failed: HTTP ${s.status}`);return(await s.json()).name}function F(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function K(t){const l=new FormData;l.append("image",t),l.append("subfolder","immac_style_mixer/mixes"),l.append("type","input");const s=await fetch("/upload/image",{method:"POST",body:l});if(!s.ok)throw new Error(`Upload failed: HTTP ${s.status}`);return(await s.json()).name}function W(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function P({src:t,alt:l,onClose:s}){return a.useEffect(()=>{function o(d){d.key==="Escape"&&s()}return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[s]),$.createPortal(e.jsxs("div",{onClick:s,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:o=>o.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:s,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 Y({mix:t,styles:l,isActive:s,onActivate:o,onUpdate:d,onDelete:y}){const[h,m]=a.useState(!1),[u,b]=a.useState(t.name),[v,j]=a.useState(!1),[f,w]=a.useState(!1),[C,n]=a.useState(!1),r=a.useRef(null);async function p(i){if(i.type.startsWith("image/")){j(!0);try{const x=await K(i);d({...t,image_filename:x})}catch(x){console.error("[ImmacStyleMixer] Mix image upload failed",x)}finally{j(!1)}}}function S(){m(!1),u.trim()!==t.name&&d({...t,name:u.trim()||t.name})}function z(i,x){const k=t.styles.map((_,A)=>A===i?{..._,...x}:_);d({...t,styles:k})}function I(i){d({...t,styles:t.styles.filter((x,k)=>k!==i)})}function c(i){t.styles.some(x=>x.style_id===i)||d({...t,styles:[...t.styles,{style_id:i,weight:1,enabled:!0}]})}const g=l.filter(i=>!t.styles.some(x=>x.style_id===i.id));return e.jsxs("div",{style:{border:`2px solid ${s?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:8,padding:10,background:"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:8,minWidth:240,maxWidth:340,flexShrink:0},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("input",{type:"radio",title:"Set as current mix",checked:s,onChange:o,style:{cursor:"pointer",flexShrink:0}}),h?e.jsx("input",{autoFocus:!0,value:u,onChange:i=>b(i.target.value),onBlur:S,onKeyDown:i=>{i.key==="Enter"&&S(),i.key==="Escape"&&m(!1)},style:E}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{b(t.name),m(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>d({...t,favorite:!t.favorite}),style:D,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),C?e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{fontSize:11,color:"var(--p-text-muted-color, #888)",whiteSpace:"nowrap"},children:"Delete?"}),e.jsx("button",{title:"Cancel",onClick:()=>n(!1),style:{...D,fontSize:11,color:"var(--p-text-muted-color, #888)"},children:"Cancel"}),e.jsx("button",{title:"Confirm delete",onClick:y,style:{...D,color:"#e55"},children:e.jsx("i",{className:"pi pi-trash"})})]}):e.jsx("button",{title:"Delete mix",onClick:()=>n(!0),style:{...D,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[e.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var i;return(i=r.current)==null?void 0:i.click()},onDragOver:i=>i.preventDefault(),onDrop:i=>{i.preventDefault();const x=i.dataTransfer.files[0];x&&p(x)},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:v?"Uploading…":t.image_filename?e.jsx("img",{src:W(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ cover image"}),!v&&t.image_filename&&e.jsx("button",{title:"View full size",onClick:i=>{i.stopPropagation(),w(!0)},style:G,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),f&&t.image_filename&&e.jsx(P,{src:W(t.image_filename),alt:t.name,onClose:()=>w(!1)}),e.jsx("input",{ref:r,type:"file",accept:"image/*",style:{display:"none"},onChange:i=>{var k;const x=(k=i.target.files)==null?void 0:k[0];x&&p(x),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,x)=>{const k=l.find(_=>_.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:()=>z(x,{enabled:!i.enabled}),style:{...D,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:(k==null?void 0:k.name)??i.style_id}),e.jsx("input",{type:"number",min:0,max:2,step:.05,value:i.weight,onChange:_=>z(x,{weight:parseFloat(_.target.value)||0}),style:{...E,width:52,textAlign:"right"}}),e.jsx("button",{title:"Remove from mix",onClick:()=>I(x),style:{...D,color:"#e55",fontSize:13},children:"✕"})]},i.style_id)})]}),e.jsxs("select",{value:"",disabled:g.length===0,onChange:i=>{i.target.value&&c(i.target.value)},style:{...E,cursor:g.length===0?"not-allowed":"pointer",opacity:g.length===0?.45:1},title:g.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:g.length===0?"— all styles already added —":"+ add style…"}),g.map(i=>e.jsx("option",{value:i.id,children:i.name},i.id))]})]})}const D={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},G={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)"},E={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"};function J({style:t,onUpdate:l,onDelete:s}){const[o,d]=a.useState(!1),[y,h]=a.useState(!1),[m,u]=a.useState(t.name),[b,v]=a.useState(t.value),[j,f]=a.useState(!1),[w,C]=a.useState(!1),[n,r]=a.useState(!1),p=a.useRef(null);function S(){d(!1),m.trim()!==t.name&&l({...t,name:m.trim()||t.name})}function z(){h(!1),b!==t.value&&l({...t,value:b})}async function I(c){if(c.type.startsWith("image/")){f(!0);try{const g=await V(c);l({...t,image_filename:g})}catch(g){console.error("[ImmacStyleMixer] Image upload failed",g)}finally{f(!1)}}}return e.jsxs("div",{style:{border:"1px solid var(--p-surface-border, #444)",borderRadius:8,padding:8,width:180,flexShrink:0,background:"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:6,position:"relative"},children:[n?e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4},children:[e.jsx("span",{style:{flex:1,fontSize:11,color:"var(--p-text-muted-color, #888)"},children:"Delete style?"}),e.jsx("button",{title:"Cancel",onClick:()=>r(!1),style:{...R,fontSize:12,color:"var(--p-text-muted-color, #888)"},children:"Cancel"}),e.jsx("button",{title:"Confirm delete",onClick:s,style:{...R,fontSize:12,color:"#e55",fontWeight:600},children:e.jsx("i",{className:"pi pi-trash"})})]}):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:R,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Delete style",onClick:()=>r(!0),style:{...R,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-trash"})})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[e.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var c;return(c=p.current)==null?void 0:c.click()},onDragOver:c=>c.preventDefault(),onDrop:c=>{c.preventDefault();const g=c.dataTransfer.files[0];g&&I(g)},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:j?"Uploading…":t.image_filename?e.jsx("img",{src:F(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!j&&t.image_filename&&e.jsx("button",{title:"View full size",onClick:c=>{c.stopPropagation(),C(!0)},style:q,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),w&&t.image_filename&&e.jsx(P,{src:F(t.image_filename),alt:t.name,onClose:()=>C(!1)}),e.jsx("input",{ref:p,type:"file",accept:"image/*",style:{display:"none"},onChange:c=>{var i;const g=(i=c.target.files)==null?void 0:i[0];g&&I(g),c.target.value=""}}),o?e.jsx("input",{autoFocus:!0,value:m,onChange:c=>u(c.target.value),onBlur:S,onKeyDown:c=>{c.key==="Enter"&&S(),c.key==="Escape"&&d(!1)},style:B}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{u(t.name),d(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),y?e.jsx("textarea",{autoFocus:!0,value:b,onChange:c=>v(c.target.value),onBlur:z,onKeyDown:c=>{c.key==="Escape"&&h(!1)},rows:3,style:{...B,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{v(t.value),h(!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 R={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},q={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)"},B={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 Q({styles:t,onUpdate:l,onDelete:s,onAdd:o}){const[d,y]=a.useState(""),[h,m]=a.useState(!1);function u(){const f=d.trim();f&&(o(f),y(""),m(!1))}const b=t.filter(f=>f.favorite),v=t.filter(f=>!f.favorite),j=[...b,...v];return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[j.map(f=>e.jsx(J,{style:f,onUpdate:l,onDelete:()=>s(f.id)},f.id)),h?e.jsxs("div",{style:{border:"1px dashed var(--p-primary-color, #6c6)",borderRadius:8,padding:10,width:180,display:"flex",flexDirection:"column",gap:8,background:"var(--p-surface-section, #1e1e1e)",flexShrink:0},children:[e.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:d,onChange:f=>y(f.target.value),onKeyDown:f=>{f.key==="Enter"&&u(),f.key==="Escape"&&m(!1)},style:X}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:u,style:H,children:"Add"}),e.jsx("button",{onClick:()=>{m(!1),y("")},style:{...H,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>m(!0),style:{width:180,aspectRatio:"unset",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:24,flexShrink:0},children:"+"})]})})}const X={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},H={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function O(){return crypto.randomUUID()}function N({title:t,children:l,defaultOpen:s=!0,grow:o=!0}){const[d,y]=a.useState(s);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:d&&o?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>y(h=>!h),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 ${d?"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})]}),d&&e.jsx("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:8},children:l})]})}function te(){const{data:t,loading:l,error:s,update:o}=U(),d=t.mixes.find(n=>n.id===t.current_mix_id)??null,y=a.useCallback(n=>{const r={id:O(),name:n,value:"",favorite:!1,image_filename:null};o(p=>({...p,styles:[...p.styles,r]}))},[o]),h=a.useCallback(n=>{o(r=>({...r,styles:r.styles.map(p=>p.id===n.id?n:p)}))},[o]),m=a.useCallback(n=>{o(r=>({...r,styles:r.styles.filter(p=>p.id!==n),mixes:r.mixes.map(p=>({...p,styles:p.styles.filter(S=>S.style_id!==n)}))}))},[o]),u=a.useCallback(()=>{const n={id:O(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};o(r=>({...r,mixes:[...r.mixes,n]}))},[t.mixes.length,o]),b=a.useCallback(n=>{o(r=>({...r,mixes:r.mixes.map(p=>p.id===n.id?n:p)}))},[o]),v=a.useCallback(n=>{o(r=>({...r,mixes:r.mixes.filter(p=>p.id!==n),current_mix_id:r.current_mix_id===n?null:r.current_mix_id}))},[o]),j=a.useCallback(n=>{o(r=>({...r,current_mix_id:n}))},[o]);if(l)return e.jsx("div",{style:M,children:"Loading…"});if(s)return e.jsxs("div",{style:{...M,color:"#e55"},children:["Error: ",s]});const f=t.mixes.filter(n=>n.favorite),w=t.mixes.filter(n=>!n.favorite),C=[...f,...w];return e.jsxs("div",{style:M,children:[e.jsx(N,{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"},children:[d.styles.length===0&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),d.styles.map(n=>{const r=t.styles.find(p=>p.id===n.style_id);return e.jsxs("div",{style:{border:`1px solid ${n.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:n.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[e.jsx("span",{style:{fontWeight:600},children:(r==null?void 0:r.name)??"?"}),e.jsxs("span",{style:{color:"#aaa"},children:["×",n.weight.toFixed(2)]})]},n.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(N,{title:"Mixes",children:e.jsxs("div",{style:{display:"flex",gap:10,flexWrap:"wrap"},children:[C.map(n=>e.jsx(Y,{mix:n,styles:t.styles,isActive:n.id===t.current_mix_id,onActivate:()=>j(n.id),onUpdate:b,onDelete:()=>v(n.id)},n.id)),e.jsx("button",{title:"Add a new mix",onClick:u,style:{minWidth:80,minHeight:60,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22,alignSelf:"flex-start"},children:"+"})]})}),e.jsx(N,{title:"Styles",children:e.jsx(Q,{styles:t.styles,onUpdate:h,onDelete:m,onAdd:y})})]})}const M={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{te as default};
diff --git a/dist/immac_style_mixer/StyleMixerPanel-DxBlfZqC.js b/dist/immac_style_mixer/StyleMixerPanel-DxBlfZqC.js
deleted file mode 100644
index 266c744..0000000
--- a/dist/immac_style_mixer/StyleMixerPanel-DxBlfZqC.js
+++ /dev/null
@@ -1 +0,0 @@
-import{j as t}from"./main.js";import{r as a,b as A}from"./vendor-DPfS0z4g.js";const P={styles:[],mixes:[],current_mix_id:null},E="/immac_style_mixer/api/data";function $(){const[e,l]=a.useState(P),[s,o]=a.useState(!0),[d,h]=a.useState(null),y=a.useRef(null);a.useEffect(()=>{fetch(E).then(u=>{if(!u.ok)throw new Error(`HTTP ${u.status}`);return u.json()}).then(u=>l(u)).catch(u=>h(String(u))).finally(()=>o(!1))},[]);const x=a.useCallback(u=>{l(b=>{const v=typeof u=="function"?u(b):u;return y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{fetch(E,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(v)}).catch(k=>console.error("[ImmacStyleMixer] Save failed",k))},400),v})},[]);return{data:e,loading:s,error:d,update:x}}async function L(e){const l=new FormData;l.append("image",e),l.append("subfolder","immac_style_mixer/styles"),l.append("type","input");const s=await fetch("/upload/image",{method:"POST",body:l});if(!s.ok)throw new Error(`Upload failed: HTTP ${s.status}`);return(await s.json()).name}function M(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function U(e){const l=new FormData;l.append("image",e),l.append("subfolder","immac_style_mixer/mixes"),l.append("type","input");const s=await fetch("/upload/image",{method:"POST",body:l});if(!s.ok)throw new Error(`Upload failed: HTTP ${s.status}`);return(await s.json()).name}function N(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function H({src:e,alt:l,onClose:s}){return a.useEffect(()=>{function o(d){d.key==="Escape"&&s()}return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[s]),A.createPortal(t.jsxs("div",{onClick:s,style:{position:"fixed",inset:0,zIndex:99999,background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:[t.jsx("img",{src:e,alt:l??"",onClick:o=>o.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),t.jsx("button",{onClick:s,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 V({mix:e,styles:l,isActive:s,onActivate:o,onUpdate:d,onDelete:h}){const[y,x]=a.useState(!1),[u,b]=a.useState(e.name),[v,k]=a.useState(!1),[p,w]=a.useState(!1),S=a.useRef(null);async function n(i){if(i.type.startsWith("image/")){k(!0);try{const m=await U(i);d({...e,image_filename:m})}catch(m){console.error("[ImmacStyleMixer] Mix image upload failed",m)}finally{k(!1)}}}function r(){x(!1),u.trim()!==e.name&&d({...e,name:u.trim()||e.name})}function f(i,m){const j=e.styles.map((_,O)=>O===i?{..._,...m}:_);d({...e,styles:j})}function C(i){d({...e,styles:e.styles.filter((m,j)=>j!==i)})}function c(i){e.styles.some(m=>m.style_id===i)||d({...e,styles:[...e.styles,{style_id:i,weight:1,enabled:!0}]})}const g=l.filter(i=>!e.styles.some(m=>m.style_id===i.id));return t.jsxs("div",{style:{border:`2px solid ${s?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:8,padding:10,background:"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:8,minWidth:240,maxWidth:340,flexShrink:0},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[t.jsx("input",{type:"radio",title:"Set as current mix",checked:s,onChange:o,style:{cursor:"pointer",flexShrink:0}}),y?t.jsx("input",{autoFocus:!0,value:u,onChange:i=>b(i.target.value),onBlur:r,onKeyDown:i=>{i.key==="Enter"&&r(),i.key==="Escape"&&x(!1)},style:z}):t.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{b(e.name),x(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:e.name}),t.jsx("button",{title:e.favorite?"Remove bookmark":"Bookmark",onClick:()=>d({...e,favorite:!e.favorite}),style:D,children:t.jsx("i",{className:e.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),t.jsx("button",{title:"Delete mix",onClick:h,style:{...D,color:"#e55"},children:"✕"})]}),t.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[t.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var i;return(i=S.current)==null?void 0:i.click()},onDragOver:i=>i.preventDefault(),onDrop:i=>{i.preventDefault();const m=i.dataTransfer.files[0];m&&n(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",flexShrink:0},children:v?"Uploading…":e.image_filename?t.jsx("img",{src:N(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ cover image"}),!v&&e.image_filename&&t.jsx("button",{title:"View full size",onClick:i=>{i.stopPropagation(),w(!0)},style:K,children:t.jsx("i",{className:"pi pi-search-plus"})})]}),p&&e.image_filename&&t.jsx(H,{src:N(e.image_filename),alt:e.name,onClose:()=>w(!1)}),t.jsx("input",{ref:S,type:"file",accept:"image/*",style:{display:"none"},onChange:i=>{var j;const m=(j=i.target.files)==null?void 0:j[0];m&&n(m),i.target.value=""}}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,maxHeight:240,overflowY:"auto"},children:[e.styles.length===0&&t.jsx("div",{style:{fontSize:11,color:"#666"},children:"No styles added yet."}),e.styles.map((i,m)=>{const j=l.find(_=>_.id===i.style_id);return t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[t.jsx("button",{title:i.enabled?"Disable":"Enable",onClick:()=>f(m,{enabled:!i.enabled}),style:{...D,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"}),t.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(j==null?void 0:j.name)??i.style_id}),t.jsx("input",{type:"number",min:0,max:2,step:.05,value:i.weight,onChange:_=>f(m,{weight:parseFloat(_.target.value)||0}),style:{...z,width:52,textAlign:"right"}}),t.jsx("button",{title:"Remove from mix",onClick:()=>C(m),style:{...D,color:"#e55",fontSize:13},children:"✕"})]},i.style_id)})]}),t.jsxs("select",{value:"",disabled:g.length===0,onChange:i=>{i.target.value&&c(i.target.value)},style:{...z,cursor:g.length===0?"not-allowed":"pointer",opacity:g.length===0?.45:1},title:g.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[t.jsx("option",{value:"",children:g.length===0?"— all styles already added —":"+ add style…"}),g.map(i=>t.jsx("option",{value:i.id,children:i.name},i.id))]})]})}const D={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},K={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={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"};function Y({style:e,onUpdate:l,onDelete:s}){const[o,d]=a.useState(!1),[h,y]=a.useState(!1),[x,u]=a.useState(e.name),[b,v]=a.useState(e.value),[k,p]=a.useState(!1),[w,S]=a.useState(!1),n=a.useRef(null);function r(){d(!1),x.trim()!==e.name&&l({...e,name:x.trim()||e.name})}function f(){y(!1),b!==e.value&&l({...e,value:b})}async function C(c){if(c.type.startsWith("image/")){p(!0);try{const g=await L(c);l({...e,image_filename:g})}catch(g){console.error("[ImmacStyleMixer] Image upload failed",g)}finally{p(!1)}}}return t.jsxs("div",{style:{border:"1px solid var(--p-surface-border, #444)",borderRadius:8,padding:8,width:180,flexShrink:0,background:"var(--p-surface-section, #1e1e1e)",display:"flex",flexDirection:"column",gap:6,position:"relative"},children:[t.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[t.jsx("button",{title:e.favorite?"Remove bookmark":"Bookmark",onClick:()=>l({...e,favorite:!e.favorite}),style:T,children:t.jsx("i",{className:e.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),t.jsx("button",{title:"Delete style",onClick:s,style:{...T,color:"#e55"},children:"✕"})]}),t.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[t.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var c;return(c=n.current)==null?void 0:c.click()},onDragOver:c=>c.preventDefault(),onDrop:c=>{c.preventDefault();const g=c.dataTransfer.files[0];g&&C(g)},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:k?"Uploading…":e.image_filename?t.jsx("img",{src:M(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!k&&e.image_filename&&t.jsx("button",{title:"View full size",onClick:c=>{c.stopPropagation(),S(!0)},style:G,children:t.jsx("i",{className:"pi pi-search-plus"})})]}),w&&e.image_filename&&t.jsx(H,{src:M(e.image_filename),alt:e.name,onClose:()=>S(!1)}),t.jsx("input",{ref:n,type:"file",accept:"image/*",style:{display:"none"},onChange:c=>{var i;const g=(i=c.target.files)==null?void 0:i[0];g&&C(g),c.target.value=""}}),o?t.jsx("input",{autoFocus:!0,value:x,onChange:c=>u(c.target.value),onBlur:r,onKeyDown:c=>{c.key==="Enter"&&r(),c.key==="Escape"&&d(!1)},style:B}):t.jsx("div",{title:"Click to rename",onDoubleClick:()=>{u(e.name),d(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:e.name}),h?t.jsx("textarea",{autoFocus:!0,value:b,onChange:c=>v(c.target.value),onBlur:f,onKeyDown:c=>{c.key==="Escape"&&y(!1)},rows:3,style:{...B,resize:"vertical"}}):t.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{v(e.value),y(!0)},style:{fontSize:11,color:"#aaa",cursor:"text",wordBreak:"break-word",minHeight:32},children:e.value||t.jsx("span",{style:{color:"#555"},children:"double-click to add prompt…"})})]})}const T={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},G={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)"},B={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 J({styles:e,onUpdate:l,onDelete:s,onAdd:o}){const[d,h]=a.useState(""),[y,x]=a.useState(!1);function u(){const p=d.trim();p&&(o(p),h(""),x(!1))}const b=e.filter(p=>p.favorite),v=e.filter(p=>!p.favorite),k=[...b,...v];return t.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:t.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[k.map(p=>t.jsx(Y,{style:p,onUpdate:l,onDelete:()=>s(p.id)},p.id)),y?t.jsxs("div",{style:{border:"1px dashed var(--p-primary-color, #6c6)",borderRadius:8,padding:10,width:180,display:"flex",flexDirection:"column",gap:8,background:"var(--p-surface-section, #1e1e1e)",flexShrink:0},children:[t.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:d,onChange:p=>h(p.target.value),onKeyDown:p=>{p.key==="Enter"&&u(),p.key==="Escape"&&x(!1)},style:q}),t.jsxs("div",{style:{display:"flex",gap:6},children:[t.jsx("button",{onClick:u,style:F,children:"Add"}),t.jsx("button",{onClick:()=>{x(!1),h("")},style:{...F,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):t.jsx("button",{title:"Add a new style",onClick:()=>x(!0),style:{width:180,aspectRatio:"unset",minHeight:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:24,flexShrink:0},children:"+"})]})})}const q={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},F={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 R({title:e,children:l,defaultOpen:s=!0,grow:o=!0}){const[d,h]=a.useState(s);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:d&&o?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[t.jsxs("button",{onClick:()=>h(y=>!y),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:[t.jsx("i",{className:`pi ${d?"pi-chevron-down":"pi-chevron-right"}`,style:{fontSize:10,flexShrink:0}}),t.jsx("span",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em"},children:e})]}),d&&t.jsx("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:8},children:l})]})}function Z(){const{data:e,loading:l,error:s,update:o}=$(),d=e.mixes.find(n=>n.id===e.current_mix_id)??null,h=a.useCallback(n=>{const r={id:W(),name:n,value:"",favorite:!1,image_filename:null};o(f=>({...f,styles:[...f.styles,r]}))},[o]),y=a.useCallback(n=>{o(r=>({...r,styles:r.styles.map(f=>f.id===n.id?n:f)}))},[o]),x=a.useCallback(n=>{o(r=>({...r,styles:r.styles.filter(f=>f.id!==n),mixes:r.mixes.map(f=>({...f,styles:f.styles.filter(C=>C.style_id!==n)}))}))},[o]),u=a.useCallback(()=>{const n={id:W(),name:`Mix ${e.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};o(r=>({...r,mixes:[...r.mixes,n]}))},[e.mixes.length,o]),b=a.useCallback(n=>{o(r=>({...r,mixes:r.mixes.map(f=>f.id===n.id?n:f)}))},[o]),v=a.useCallback(n=>{o(r=>({...r,mixes:r.mixes.filter(f=>f.id!==n),current_mix_id:r.current_mix_id===n?null:r.current_mix_id}))},[o]),k=a.useCallback(n=>{o(r=>({...r,current_mix_id:n}))},[o]);if(l)return t.jsx("div",{style:I,children:"Loading…"});if(s)return t.jsxs("div",{style:{...I,color:"#e55"},children:["Error: ",s]});const p=e.mixes.filter(n=>n.favorite),w=e.mixes.filter(n=>!n.favorite),S=[...p,...w];return t.jsxs("div",{style:I,children:[t.jsx(R,{title:"Current Mix",grow:!1,children:d?t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[t.jsx("div",{style:{fontWeight:600,fontSize:14},children:d.name}),t.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[d.styles.length===0&&t.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),d.styles.map(n=>{const r=e.styles.find(f=>f.id===n.style_id);return t.jsxs("div",{style:{border:`1px solid ${n.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:n.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[t.jsx("span",{style:{fontWeight:600},children:(r==null?void 0:r.name)??"?"}),t.jsxs("span",{style:{color:"#aaa"},children:["×",n.weight.toFixed(2)]})]},n.style_id)})]})]}):t.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),t.jsx(R,{title:"Mixes",children:t.jsxs("div",{style:{display:"flex",gap:10,flexWrap:"wrap"},children:[S.map(n=>t.jsx(V,{mix:n,styles:e.styles,isActive:n.id===e.current_mix_id,onActivate:()=>k(n.id),onUpdate:b,onDelete:()=>v(n.id)},n.id)),t.jsx("button",{title:"Add a new mix",onClick:u,style:{minWidth:80,minHeight:60,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22,alignSelf:"flex-start"},children:"+"})]})}),t.jsx(R,{title:"Styles",children:t.jsx(J,{styles:e.styles,onUpdate:y,onDelete:x,onAdd:h})})]})}const I={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{Z as default};
diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js
index 17a14c1..3e56908 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-DxBlfZqC.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-317gZSvY.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]);
 import{r as v,a as R,R as h}from"./vendor-DPfS0z4g.js";const g="modulepreload",b=function(t){return"/"+t},f={},I=function(e,n,o){let l=Promise.resolve();if(n&&n.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),i=(r==null?void 0:r.nonce)||(r==null?void 0:r.getAttribute("nonce"));l=Promise.allSettled(n.map(a=>{if(a=b(a),a in f)return;f[a]=!0;const d=a.endsWith(".css"),_=d?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${a}"]${_}`))return;const s=document.createElement("link");if(s.rel=d?"stylesheet":g,d||(s.as="script"),s.crossOrigin="",s.href=a,i&&s.setAttribute("nonce",i),document.head.appendChild(s),d)return new Promise((E,S)=>{s.addEventListener("load",E),s.addEventListener("error",()=>S(new Error(`Unable to preload CSS for ${a}`)))})}))}function c(r){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=r,window.dispatchEvent(i),!i.defaultPrevented)throw r}return l.then(r=>{for(const i of r||[])i.status==="rejected"&&c(i.reason);return e().catch(c)})};var x={exports:{}},m={};/**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -7,4 +7,4 @@ import{r as v,a as R,R as h}from"./vendor-DPfS0z4g.js";const g="modulepreload",b
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var P=v,j=Symbol.for("react.element"),k=Symbol.for("react.fragment"),O=Object.prototype.hasOwnProperty,L=P.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,C={key:!0,ref:!0,__self:!0,__source:!0};function w(t,e,n){var o,l={},c=null,r=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(r=e.ref);for(o in e)O.call(e,o)&&!C.hasOwnProperty(o)&&(l[o]=e[o]);if(t&&t.defaultProps)for(o in e=t.defaultProps,e)l[o]===void 0&&(l[o]=e[o]);return{$$typeof:j,type:t,key:c,ref:r,props:l,_owner:L.current}}m.Fragment=k;m.jsx=w;m.jsxs=w;x.exports=m;var u=x.exports,p={},y=R;p.createRoot=y.createRoot,p.hydrateRoot=y.hydrateRoot;const T=h.lazy(()=>I(()=>import("./StyleMixerPanel-DxBlfZqC.js"),__vite__mapDeps([0,1])));function U(){return new Promise(t=>{function e(){if(window.app){t();return}const n=setInterval(()=>{window.app&&(clearInterval(n),t())},50);setTimeout(()=>{clearInterval(n),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),t()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()})}async function M(){if(await U(),!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),p.createRoot(e).render(u.jsx(h.StrictMode,{children:u.jsx(v.Suspense,{fallback:u.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:u.jsx(T,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer"})}M().catch(console.error);export{u as j};
+ */var P=v,j=Symbol.for("react.element"),k=Symbol.for("react.fragment"),O=Object.prototype.hasOwnProperty,L=P.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,C={key:!0,ref:!0,__self:!0,__source:!0};function w(t,e,n){var o,l={},c=null,r=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(r=e.ref);for(o in e)O.call(e,o)&&!C.hasOwnProperty(o)&&(l[o]=e[o]);if(t&&t.defaultProps)for(o in e=t.defaultProps,e)l[o]===void 0&&(l[o]=e[o]);return{$$typeof:j,type:t,key:c,ref:r,props:l,_owner:L.current}}m.Fragment=k;m.jsx=w;m.jsxs=w;x.exports=m;var u=x.exports,p={},y=R;p.createRoot=y.createRoot,p.hydrateRoot=y.hydrateRoot;const T=h.lazy(()=>I(()=>import("./StyleMixerPanel-317gZSvY.js"),__vite__mapDeps([0,1])));function U(){return new Promise(t=>{function e(){if(window.app){t();return}const n=setInterval(()=>{window.app&&(clearInterval(n),t())},50);setTimeout(()=>{clearInterval(n),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),t()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()})}async function M(){if(await U(),!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),p.createRoot(e).render(u.jsx(h.StrictMode,{children:u.jsx(v.Suspense,{fallback:u.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:u.jsx(T,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer"})}M().catch(console.error);export{u as j};
diff --git a/ui/src/components/MixCard.tsx b/ui/src/components/MixCard.tsx
index 4ab1be5..5154009 100644
--- a/ui/src/components/MixCard.tsx
+++ b/ui/src/components/MixCard.tsx
@@ -17,6 +17,7 @@ export default function MixCard({ mix, styles, isActive, onActivate, onUpdate, o
   const [nameInput, setNameInput] = useState(mix.name)
   const [uploading, setUploading] = useState(false)
   const [lightboxOpen, setLightboxOpen] = useState(false)
+  const [pendingDelete, setPendingDelete] = useState(false)
   const fileRef = useRef<HTMLInputElement>(null)
 
   async function handleImageFile(file: File) {
@@ -104,9 +105,29 @@ export default function MixCard({ mix, styles, isActive, onActivate, onUpdate, o
         >
           <i className={mix.favorite ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'} />
         </button>
-        <button title="Delete mix" onClick={onDelete} style={{ ...iconBtn, color: '#e55' }}>
-          ✕
-        </button>
+        {pendingDelete ? (
+          <>
+            <span style={{ fontSize: 11, color: 'var(--p-text-muted-color, #888)', whiteSpace: 'nowrap' }}>Delete?</span>
+            <button
+              title="Cancel"
+              onClick={() => setPendingDelete(false)}
+              style={{ ...iconBtn, fontSize: 11, color: 'var(--p-text-muted-color, #888)' }}
+            >
+              Cancel
+            </button>
+            <button
+              title="Confirm delete"
+              onClick={onDelete}
+              style={{ ...iconBtn, color: '#e55' }}
+            >
+              <i className="pi pi-trash" />
+            </button>
+          </>
+        ) : (
+          <button title="Delete mix" onClick={() => setPendingDelete(true)} style={{ ...iconBtn, color: 'var(--p-text-muted-color, #888)' }}>
+            <i className="pi pi-trash" />
+          </button>
+        )}
       </div>
 
       {/* Cover image */}
diff --git a/ui/src/components/StyleCard.tsx b/ui/src/components/StyleCard.tsx
index 605acb7..9916289 100644
--- a/ui/src/components/StyleCard.tsx
+++ b/ui/src/components/StyleCard.tsx
@@ -16,6 +16,7 @@ export default function StyleCard({ style, onUpdate, onDelete }: Props) {
   const [valueInput, setValueInput] = useState(style.value)
   const [uploading, setUploading] = useState(false)
   const [lightboxOpen, setLightboxOpen] = useState(false)
+  const [pendingDelete, setPendingDelete] = useState(false)
   const fileRef = useRef<HTMLInputElement>(null)
 
   function commitName() {
@@ -56,19 +57,39 @@ export default function StyleCard({ style, onUpdate, onDelete }: Props) {
         position: 'relative',
       }}
     >
-      {/* Favorite + Delete row */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <button
-          title={style.favorite ? 'Remove bookmark' : 'Bookmark'}
-          onClick={() => onUpdate({ ...style, favorite: !style.favorite })}
-          style={iconBtn}
-        >
-          <i className={style.favorite ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'} />
-        </button>
-        <button title="Delete style" onClick={onDelete} style={{ ...iconBtn, color: '#e55' }}>
-          ✕
-        </button>
-      </div>
+      {/* Bookmark + Delete row */}
+      {pendingDelete ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <span style={{ flex: 1, fontSize: 11, color: 'var(--p-text-muted-color, #888)' }}>Delete style?</span>
+          <button
+            title="Cancel"
+            onClick={() => setPendingDelete(false)}
+            style={{ ...iconBtn, fontSize: 12, color: 'var(--p-text-muted-color, #888)' }}
+          >
+            Cancel
+          </button>
+          <button
+            title="Confirm delete"
+            onClick={onDelete}
+            style={{ ...iconBtn, fontSize: 12, color: '#e55', fontWeight: 600 }}
+          >
+            <i className="pi pi-trash" />
+          </button>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <button
+            title={style.favorite ? 'Remove bookmark' : 'Bookmark'}
+            onClick={() => onUpdate({ ...style, favorite: !style.favorite })}
+            style={iconBtn}
+          >
+            <i className={style.favorite ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'} />
+          </button>
+          <button title="Delete style" onClick={() => setPendingDelete(true)} style={{ ...iconBtn, color: 'var(--p-text-muted-color, #888)' }}>
+            <i className="pi pi-trash" />
+          </button>
+        </div>
+      )}
 
       {/* Image area */}
       <div style={{ position: 'relative', width: '100%', paddingBottom: '100%' }}>