diff --git a/dist/immac_style_mixer/StyleMixerPanel-CIia_tO9.js b/dist/immac_style_mixer/StyleMixerPanel-CZp6RP7C.js similarity index 90% rename from dist/immac_style_mixer/StyleMixerPanel-CIia_tO9.js rename to dist/immac_style_mixer/StyleMixerPanel-CZp6RP7C.js index c772656..4779a6e 100644 --- a/dist/immac_style_mixer/StyleMixerPanel-CIia_tO9.js +++ b/dist/immac_style_mixer/StyleMixerPanel-CZp6RP7C.js @@ -1 +1 @@ -import{j as e}from"./main.js";import{r as l,b as L}from"./vendor-DPfS0z4g.js";const U={styles:[],mixes:[],current_mix_id:null},O="/immac_style_mixer/api/data";function V(){const[t,a]=l.useState(U),[c,r]=l.useState(!0),[u,h]=l.useState(null),m=l.useRef(null);l.useEffect(()=>{fetch(O).then(p=>{if(!p.ok)throw new Error(`HTTP ${p.status}`);return p.json()}).then(p=>a(p)).catch(p=>h(String(p))).finally(()=>r(!1))},[]);const g=l.useCallback(p=>{a(y=>{const b=typeof p=="function"?p(y):p;return m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{fetch(O,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(b)}).catch(v=>console.error("[ImmacStyleMixer] Save failed",v))},400),b})},[]);return{data:t,loading:c,error:u,update:g}}async function K(t){const a=new FormData;a.append("image",t),a.append("subfolder","immac_style_mixer/styles"),a.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:a});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function B(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function Y(t){const a=new FormData;a.append("image",t),a.append("subfolder","immac_style_mixer/mixes"),a.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:a});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function W(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function P({src:t,alt:a,onClose:c}){return l.useEffect(()=>{function r(u){u.key==="Escape"&&c()}return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[c]),L.createPortal(e.jsxs("div",{onClick:c,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:a??"",onClick:r=>r.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:c,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 G({mix:t,styles:a,isActive:c,onActivate:r,onUpdate:u,onDelete:h,onDuplicate:m}){const[g,p]=l.useState(!1),[y,b]=l.useState(t.name),[v,f]=l.useState(!1),[I,_]=l.useState(!1),[R,i]=l.useState(!1),o=l.useRef(null);async function d(n){if(n.type.startsWith("image/")){f(!0);try{const x=await Y(n);u({...t,image_filename:x})}catch(x){console.error("[ImmacStyleMixer] Mix image upload failed",x)}finally{f(!1)}}}function w(){p(!1),y.trim()!==t.name&&u({...t,name:y.trim()||t.name})}function C(n,x){const k=t.styles.map((z,$)=>$===n?{...z,...x}:z);u({...t,styles:k})}function s(n){u({...t,styles:t.styles.filter((x,k)=>k!==n)})}function j(n){t.styles.some(x=>x.style_id===n)||u({...t,styles:[...t.styles,{style_id:n,weight:1,enabled:!0}]})}const S=a.filter(n=>!t.styles.some(x=>x.style_id===n.id));return e.jsxs("div",{style:{border:`2px solid ${c?"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:c,onChange:r,style:{cursor:"pointer",flexShrink:0}}),g?e.jsx("input",{autoFocus:!0,value:y,onChange:n=>b(n.target.value),onBlur:w,onKeyDown:n=>{n.key==="Enter"&&w(),n.key==="Escape"&&p(!1)},style:E}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{b(t.name),p(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>u({...t,favorite:!t.favorite}),style:D,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Duplicate mix",onClick:m,style:{...D,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-copy"})}),R?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:()=>i(!1),style:{...D,fontSize:11,color:"var(--p-text-muted-color, #888)"},children:"Cancel"}),e.jsx("button",{title:"Confirm delete",onClick:h,style:{...D,color:"#e55"},children:e.jsx("i",{className:"pi pi-trash"})})]}):e.jsx("button",{title:"Delete mix",onClick:()=>i(!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 n;return(n=o.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const x=n.dataTransfer.files[0];x&&d(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:n=>{n.stopPropagation(),_(!0)},style:J,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),I&&t.image_filename&&e.jsx(P,{src:W(t.image_filename),alt:t.name,onClose:()=>_(!1)}),e.jsx("input",{ref:o,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var k;const x=(k=n.target.files)==null?void 0:k[0];x&&d(x),n.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((n,x)=>{const k=a.find(z=>z.id===n.style_id);return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("button",{title:n.enabled?"Disable":"Enable",onClick:()=>C(x,{enabled:!n.enabled}),style:{...D,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:n.enabled?"var(--p-primary-color, #557755)":"transparent",color:n.enabled?"#fff":"#888",minWidth:32},children:n.enabled?"ON":"OFF"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(k==null?void 0:k.name)??n.style_id}),e.jsx("input",{type:"number",min:0,max:2,step:.05,value:n.weight,onChange:z=>C(x,{weight:parseFloat(z.target.value)||0}),style:{...E,width:52,textAlign:"right"}}),e.jsx("button",{title:"Remove from mix",onClick:()=>s(x),style:{...D,color:"#e55",fontSize:13},children:"✕"})]},n.style_id)})]}),e.jsxs("select",{value:"",disabled:S.length===0,onChange:n=>{n.target.value&&j(n.target.value)},style:{...E,cursor:S.length===0?"not-allowed":"pointer",opacity:S.length===0?.45:1},title:S.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:S.length===0?"— all styles already added —":"+ add style…"}),S.map(n=>e.jsx("option",{value:n.id,children:n.name},n.id))]})]})}const D={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},J={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 q({style:t,onUpdate:a,onDelete:c}){const[r,u]=l.useState(!1),[h,m]=l.useState(!1),[g,p]=l.useState(t.name),[y,b]=l.useState(t.value),[v,f]=l.useState(!1),[I,_]=l.useState(!1),[R,i]=l.useState(!1),o=l.useRef(null);function d(){u(!1),g.trim()!==t.name&&a({...t,name:g.trim()||t.name})}function w(){m(!1),y!==t.value&&a({...t,value:y})}async function C(s){if(s.type.startsWith("image/")){f(!0);try{const j=await K(s);a({...t,image_filename:j})}catch(j){console.error("[ImmacStyleMixer] Image upload failed",j)}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:[R?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:()=>i(!1),style:{...N,fontSize:12,color:"var(--p-text-muted-color, #888)"},children:"Cancel"}),e.jsx("button",{title:"Confirm delete",onClick:c,style:{...N,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:()=>a({...t,favorite:!t.favorite}),style:N,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Delete style",onClick:()=>i(!0),style:{...N,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 s;return(s=o.current)==null?void 0:s.click()},onDragOver:s=>s.preventDefault(),onDrop:s=>{s.preventDefault();const j=s.dataTransfer.files[0];j&&C(j)},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:v?"Uploading…":t.image_filename?e.jsx("img",{src:B(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!v&&t.image_filename&&e.jsx("button",{title:"View full size",onClick:s=>{s.stopPropagation(),_(!0)},style:Q,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),I&&t.image_filename&&e.jsx(P,{src:B(t.image_filename),alt:t.name,onClose:()=>_(!1)}),e.jsx("input",{ref:o,type:"file",accept:"image/*",style:{display:"none"},onChange:s=>{var S;const j=(S=s.target.files)==null?void 0:S[0];j&&C(j),s.target.value=""}}),r?e.jsx("input",{autoFocus:!0,value:g,onChange:s=>p(s.target.value),onBlur:d,onKeyDown:s=>{s.key==="Enter"&&d(),s.key==="Escape"&&u(!1)},style:A}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{p(t.name),u(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),h?e.jsx("textarea",{autoFocus:!0,value:y,onChange:s=>b(s.target.value),onBlur:w,onKeyDown:s=>{s.key==="Escape"&&m(!1)},rows:3,style:{...A,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{b(t.value),m(!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 N={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)"},A={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 X({styles:t,onUpdate:a,onDelete:c,onAdd:r}){const[u,h]=l.useState(""),[m,g]=l.useState(!1);function p(){const f=u.trim();f&&(r(f),h(""),g(!1))}const y=t.filter(f=>f.favorite),b=t.filter(f=>!f.favorite),v=[...y,...b];return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[v.map(f=>e.jsx(q,{style:f,onUpdate:a,onDelete:()=>c(f.id)},f.id)),m?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:u,onChange:f=>h(f.target.value),onKeyDown:f=>{f.key==="Enter"&&p(),f.key==="Escape"&&g(!1)},style:Z}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:p,style:H,children:"Add"}),e.jsx("button",{onClick:()=>{g(!1),h("")},style:{...H,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>g(!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 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:"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 M(){return crypto.randomUUID()}function F({title:t,children:a,defaultOpen:c=!0,grow:r=!0}){const[u,h]=l.useState(c);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:u&&r?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>h(m=>!m),style:{display:"flex",alignItems:"center",gap:6,background:"none",border:"none",cursor:"pointer",padding:"8px 0",width:"100%",textAlign:"left",color:"#888",flexShrink:0},children:[e.jsx("i",{className:`pi ${u?"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})]}),u&&e.jsx("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:8},children:a})]})}function ie(){const{data:t,loading:a,error:c,update:r}=V(),u=t.mixes.find(i=>i.id===t.current_mix_id)??null,h=l.useCallback(i=>{const o={id:M(),name:i,value:"",favorite:!1,image_filename:null};r(d=>({...d,styles:[...d.styles,o]}))},[r]),m=l.useCallback(i=>{r(o=>({...o,styles:o.styles.map(d=>d.id===i.id?i:d)}))},[r]),g=l.useCallback(i=>{r(o=>({...o,styles:o.styles.filter(d=>d.id!==i),mixes:o.mixes.map(d=>({...d,styles:d.styles.filter(w=>w.style_id!==i)}))}))},[r]),p=l.useCallback(i=>{const o={...i,id:M(),name:`${i.name} (copy)`,favorite:!1};r(d=>{const w=d.mixes.findIndex(s=>s.id===i.id),C=[...d.mixes];return C.splice(w+1,0,o),{...d,mixes:C}})},[r]),y=l.useCallback(()=>{const i={id:M(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};r(o=>({...o,mixes:[...o.mixes,i]}))},[t.mixes.length,r]),b=l.useCallback(i=>{r(o=>({...o,mixes:o.mixes.map(d=>d.id===i.id?i:d)}))},[r]),v=l.useCallback(i=>{r(o=>({...o,mixes:o.mixes.filter(d=>d.id!==i),current_mix_id:o.current_mix_id===i?null:o.current_mix_id}))},[r]),f=l.useCallback(i=>{r(o=>({...o,current_mix_id:i}))},[r]);if(a)return e.jsx("div",{style:T,children:"Loading…"});if(c)return e.jsxs("div",{style:{...T,color:"#e55"},children:["Error: ",c]});const I=t.mixes.filter(i=>i.favorite),_=t.mixes.filter(i=>!i.favorite),R=[...I,..._];return e.jsxs("div",{style:T,children:[e.jsx(F,{title:"Current Mix",grow:!1,children:u?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:u.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[u.styles.length===0&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),u.styles.map(i=>{const o=t.styles.find(d=>d.id===i.style_id);return e.jsxs("div",{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:80,flexShrink:0},children:[e.jsx("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:o!=null&&o.image_filename?e.jsx("img",{src:B(o.image_filename),alt:o.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}):e.jsx("i",{className:"pi pi-image",style:{fontSize:20,color:"#555"}})})}),e.jsxs("div",{style:{padding:"4px 6px",textAlign:"center",width:"100%",boxSizing:"border-box"},children:[e.jsx("div",{style:{fontWeight:600,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:(o==null?void 0:o.name)??"?"}),e.jsxs("div",{style:{color:"#aaa",fontSize:11},children:["×",i.weight.toFixed(2)]})]})]},i.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(F,{title:"Mixes",children:e.jsxs("div",{style:{display:"flex",gap:10,flexWrap:"wrap"},children:[R.map(i=>e.jsx(G,{mix:i,styles:t.styles,isActive:i.id===t.current_mix_id,onActivate:()=>f(i.id),onUpdate:b,onDelete:()=>v(i.id),onDuplicate:()=>p(i)},i.id)),e.jsx("button",{title:"Add a new mix",onClick:y,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(F,{title:"Styles",children:e.jsx(X,{styles:t.styles,onUpdate:m,onDelete:g,onAdd:h})})]})}const T={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{ie as default}; +import{j as e}from"./main.js";import{r as l,b as L}from"./vendor-DPfS0z4g.js";const U={styles:[],mixes:[],current_mix_id:null},O="/immac_style_mixer/api/data";function V(){const[t,a]=l.useState(U),[c,r]=l.useState(!0),[u,h]=l.useState(null),m=l.useRef(null);l.useEffect(()=>{fetch(O).then(p=>{if(!p.ok)throw new Error(`HTTP ${p.status}`);return p.json()}).then(p=>a(p)).catch(p=>h(String(p))).finally(()=>r(!1))},[]);const g=l.useCallback(p=>{a(y=>{const b=typeof p=="function"?p(y):p;return m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{fetch(O,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(b)}).catch(v=>console.error("[ImmacStyleMixer] Save failed",v))},400),b})},[]);return{data:t,loading:c,error:u,update:g}}async function K(t){const a=new FormData;a.append("image",t),a.append("subfolder","immac_style_mixer/styles"),a.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:a});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function B(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function Y(t){const a=new FormData;a.append("image",t),a.append("subfolder","immac_style_mixer/mixes"),a.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:a});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function W(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function P({src:t,alt:a,onClose:c}){return l.useEffect(()=>{function r(u){u.key==="Escape"&&c()}return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[c]),L.createPortal(e.jsxs("div",{onClick:c,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:a??"",onClick:r=>r.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:c,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 G({mix:t,styles:a,isActive:c,onActivate:r,onUpdate:u,onDelete:h,onDuplicate:m}){const[g,p]=l.useState(!1),[y,b]=l.useState(t.name),[v,f]=l.useState(!1),[I,_]=l.useState(!1),[R,i]=l.useState(!1),o=l.useRef(null);async function d(n){if(n.type.startsWith("image/")){f(!0);try{const x=await Y(n);u({...t,image_filename:x})}catch(x){console.error("[ImmacStyleMixer] Mix image upload failed",x)}finally{f(!1)}}}function w(){p(!1),y.trim()!==t.name&&u({...t,name:y.trim()||t.name})}function C(n,x){const k=t.styles.map((z,$)=>$===n?{...z,...x}:z);u({...t,styles:k})}function s(n){u({...t,styles:t.styles.filter((x,k)=>k!==n)})}function j(n){t.styles.some(x=>x.style_id===n)||u({...t,styles:[...t.styles,{style_id:n,weight:1,enabled:!0}]})}const S=a.filter(n=>!t.styles.some(x=>x.style_id===n.id));return e.jsxs("div",{style:{border:`2px solid ${c?"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:c,onChange:r,style:{cursor:"pointer",flexShrink:0}}),g?e.jsx("input",{autoFocus:!0,value:y,onChange:n=>b(n.target.value),onBlur:w,onKeyDown:n=>{n.key==="Enter"&&w(),n.key==="Escape"&&p(!1)},style:E}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{b(t.name),p(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),e.jsx("button",{title:t.favorite?"Remove bookmark":"Bookmark",onClick:()=>u({...t,favorite:!t.favorite}),style:D,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Duplicate mix",onClick:m,style:{...D,color:"var(--p-text-muted-color, #888)"},children:e.jsx("i",{className:"pi pi-copy"})}),R?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:()=>i(!1),style:{...D,fontSize:11,color:"var(--p-text-muted-color, #888)"},children:"Cancel"}),e.jsx("button",{title:"Confirm delete",onClick:h,style:{...D,color:"#e55"},children:e.jsx("i",{className:"pi pi-trash"})})]}):e.jsx("button",{title:"Delete mix",onClick:()=>i(!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 n;return(n=o.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const x=n.dataTransfer.files[0];x&&d(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:n=>{n.stopPropagation(),_(!0)},style:J,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),I&&t.image_filename&&e.jsx(P,{src:W(t.image_filename),alt:t.name,onClose:()=>_(!1)}),e.jsx("input",{ref:o,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var k;const x=(k=n.target.files)==null?void 0:k[0];x&&d(x),n.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((n,x)=>{const k=a.find(z=>z.id===n.style_id);return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("button",{title:n.enabled?"Disable":"Enable",onClick:()=>C(x,{enabled:!n.enabled}),style:{...D,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:n.enabled?"var(--p-primary-color, #557755)":"transparent",color:n.enabled?"#fff":"#888",minWidth:32},children:n.enabled?"ON":"OFF"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(k==null?void 0:k.name)??n.style_id}),e.jsx("input",{type:"number",min:0,max:2,step:.05,value:n.weight,onChange:z=>C(x,{weight:parseFloat(z.target.value)||0}),style:{...E,width:52,textAlign:"right"}}),e.jsx("button",{title:"Remove from mix",onClick:()=>s(x),style:{...D,color:"#e55",fontSize:13},children:"✕"})]},n.style_id)})]}),e.jsxs("select",{value:"",disabled:S.length===0,onChange:n=>{n.target.value&&j(n.target.value)},style:{...E,cursor:S.length===0?"not-allowed":"pointer",opacity:S.length===0?.45:1},title:S.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:S.length===0?"— all styles already added —":"+ add style…"}),S.map(n=>e.jsx("option",{value:n.id,children:n.name},n.id))]})]})}const D={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},J={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 q({style:t,onUpdate:a,onDelete:c}){const[r,u]=l.useState(!1),[h,m]=l.useState(!1),[g,p]=l.useState(t.name),[y,b]=l.useState(t.value),[v,f]=l.useState(!1),[I,_]=l.useState(!1),[R,i]=l.useState(!1),o=l.useRef(null);function d(){u(!1),g.trim()!==t.name&&a({...t,name:g.trim()||t.name})}function w(){m(!1),y!==t.value&&a({...t,value:y})}async function C(s){if(s.type.startsWith("image/")){f(!0);try{const j=await K(s);a({...t,image_filename:j})}catch(j){console.error("[ImmacStyleMixer] Image upload failed",j)}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:[R?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:()=>i(!1),style:{...N,fontSize:12,color:"var(--p-text-muted-color, #888)"},children:"Cancel"}),e.jsx("button",{title:"Confirm delete",onClick:c,style:{...N,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:()=>a({...t,favorite:!t.favorite}),style:N,children:e.jsx("i",{className:t.favorite?"pi pi-bookmark-fill":"pi pi-bookmark"})}),e.jsx("button",{title:"Delete style",onClick:()=>i(!0),style:{...N,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 s;return(s=o.current)==null?void 0:s.click()},onDragOver:s=>s.preventDefault(),onDrop:s=>{s.preventDefault();const j=s.dataTransfer.files[0];j&&C(j)},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:v?"Uploading…":t.image_filename?e.jsx("img",{src:B(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!v&&t.image_filename&&e.jsx("button",{title:"View full size",onClick:s=>{s.stopPropagation(),_(!0)},style:Q,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),I&&t.image_filename&&e.jsx(P,{src:B(t.image_filename),alt:t.name,onClose:()=>_(!1)}),e.jsx("input",{ref:o,type:"file",accept:"image/*",style:{display:"none"},onChange:s=>{var S;const j=(S=s.target.files)==null?void 0:S[0];j&&C(j),s.target.value=""}}),r?e.jsx("input",{autoFocus:!0,value:g,onChange:s=>p(s.target.value),onBlur:d,onKeyDown:s=>{s.key==="Enter"&&d(),s.key==="Escape"&&u(!1)},style:A}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{p(t.name),u(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),h?e.jsx("textarea",{autoFocus:!0,value:y,onChange:s=>b(s.target.value),onBlur:w,onKeyDown:s=>{s.key==="Escape"&&m(!1)},rows:3,style:{...A,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{b(t.value),m(!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 N={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)"},A={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 X({styles:t,onUpdate:a,onDelete:c,onAdd:r}){const[u,h]=l.useState(""),[m,g]=l.useState(!1);function p(){const f=u.trim();f&&(r(f),h(""),g(!1))}const y=t.filter(f=>f.favorite),b=t.filter(f=>!f.favorite),v=[...y,...b];return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[v.map(f=>e.jsx(q,{style:f,onUpdate:a,onDelete:()=>c(f.id)},f.id)),m?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:u,onChange:f=>h(f.target.value),onKeyDown:f=>{f.key==="Enter"&&p(),f.key==="Escape"&&g(!1)},style:Z}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:p,style:H,children:"Add"}),e.jsx("button",{onClick:()=>{g(!1),h("")},style:{...H,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):e.jsx("button",{title:"Add a new style",onClick:()=>g(!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 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:"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 M(){return crypto.randomUUID()}function F({title:t,children:a,defaultOpen:c=!0,grow:r=!0}){const[u,h]=l.useState(c);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",flex:u&&r?"1 1 0":"0 0 auto",minHeight:0,borderBottom:"1px solid var(--p-surface-border, #333)"},children:[e.jsxs("button",{onClick:()=>h(m=>!m),style:{display:"flex",alignItems:"center",gap:6,background:"none",border:"none",cursor:"pointer",padding:"8px 0",width:"100%",textAlign:"left",color:"#888",flexShrink:0},children:[e.jsx("i",{className:`pi ${u?"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})]}),u&&e.jsx("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:8},children:a})]})}function ie(){const{data:t,loading:a,error:c,update:r}=V(),u=t.mixes.find(i=>i.id===t.current_mix_id)??null,h=l.useCallback(i=>{const o={id:M(),name:i,value:"",favorite:!1,image_filename:null};r(d=>({...d,styles:[...d.styles,o]}))},[r]),m=l.useCallback(i=>{r(o=>({...o,styles:o.styles.map(d=>d.id===i.id?i:d)}))},[r]),g=l.useCallback(i=>{r(o=>({...o,styles:o.styles.filter(d=>d.id!==i),mixes:o.mixes.map(d=>({...d,styles:d.styles.filter(w=>w.style_id!==i)}))}))},[r]),p=l.useCallback(i=>{const o={...i,id:M(),name:`${i.name} (copy)`,favorite:!1};r(d=>{const w=d.mixes.findIndex(s=>s.id===i.id),C=[...d.mixes];return C.splice(w+1,0,o),{...d,mixes:C}})},[r]),y=l.useCallback(()=>{const i={id:M(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};r(o=>({...o,mixes:[...o.mixes,i]}))},[t.mixes.length,r]),b=l.useCallback(i=>{r(o=>({...o,mixes:o.mixes.map(d=>d.id===i.id?i:d)}))},[r]),v=l.useCallback(i=>{r(o=>({...o,mixes:o.mixes.filter(d=>d.id!==i),current_mix_id:o.current_mix_id===i?null:o.current_mix_id}))},[r]),f=l.useCallback(i=>{r(o=>({...o,current_mix_id:i}))},[r]);if(a)return e.jsx("div",{style:T,children:"Loading…"});if(c)return e.jsxs("div",{style:{...T,color:"#e55"},children:["Error: ",c]});const I=t.mixes.filter(i=>i.favorite),_=t.mixes.filter(i=>!i.favorite),R=[...I,..._];return e.jsxs("div",{style:T,children:[e.jsx(F,{title:"Current Mix",grow:!1,children:u?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:u.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[u.styles.length===0&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),u.styles.map(i=>{const o=t.styles.find(d=>d.id===i.style_id);return e.jsxs("div",{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.jsx("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:o!=null&&o.image_filename?e.jsx("img",{src:B(o.image_filename),alt:o.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}):e.jsx("i",{className:"pi pi-image",style:{fontSize:20,color:"#555"}})})}),e.jsxs("div",{style:{padding:"4px 6px",textAlign:"center",width:"100%",boxSizing:"border-box"},children:[e.jsx("div",{style:{fontWeight:600,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:(o==null?void 0:o.name)??"?"}),e.jsxs("div",{style:{color:"#aaa",fontSize:11},children:["×",i.weight.toFixed(2)]})]})]},i.style_id)})]})]}):e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),e.jsx(F,{title:"Mixes",children:e.jsxs("div",{style:{display:"flex",gap:10,flexWrap:"wrap"},children:[R.map(i=>e.jsx(G,{mix:i,styles:t.styles,isActive:i.id===t.current_mix_id,onActivate:()=>f(i.id),onUpdate:b,onDelete:()=>v(i.id),onDuplicate:()=>p(i)},i.id)),e.jsx("button",{title:"Add a new mix",onClick:y,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(F,{title:"Styles",children:e.jsx(X,{styles:t.styles,onUpdate:m,onDelete:g,onAdd:h})})]})}const T={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{ie as default}; diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js index 43c425e..fc004b4 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-CIia_tO9.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-CZp6RP7C.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-CIia_tO9.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-CZp6RP7C.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/StyleMixerPanel.tsx b/ui/src/components/StyleMixerPanel.tsx index 2834c7c..cc28137 100644 --- a/ui/src/components/StyleMixerPanel.tsx +++ b/ui/src/components/StyleMixerPanel.tsx @@ -163,7 +163,7 @@ export default function StyleMixerPanel() { display: 'flex', flexDirection: 'column', alignItems: 'center', - width: 80, + width: 180, flexShrink: 0, }} >