diff --git a/__pycache__/__init__.cpython-312.pyc b/__pycache__/__init__.cpython-312.pyc index 4f3ac3a..ea9f8a9 100644 Binary files a/__pycache__/__init__.cpython-312.pyc and b/__pycache__/__init__.cpython-312.pyc differ diff --git a/dist/immac_style_mixer/StyleMixerPanel-D9g09ymf.js b/dist/immac_style_mixer/StyleMixerPanel-D9g09ymf.js deleted file mode 100644 index dd158b6..0000000 --- a/dist/immac_style_mixer/StyleMixerPanel-D9g09ymf.js +++ /dev/null @@ -1 +0,0 @@ -import{j as i}from"./main.js";import{r as l}from"./vendor-wGySg1uH.js";const I={styles:[],mixes:[],current_mix_id:null},_="/immac_style_mixer/api/data";function M(){const[t,d]=l.useState(I),[p,o]=l.useState(!0),[c,g]=l.useState(null),x=l.useRef(null);l.useEffect(()=>{fetch(_).then(a=>{if(!a.ok)throw new Error(`HTTP ${a.status}`);return a.json()}).then(a=>d(a)).catch(a=>g(String(a))).finally(()=>o(!1))},[]);const f=l.useCallback(a=>{d(m=>{const y=typeof a=="function"?a(m):a;return x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{fetch(_,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(y)}).catch(h=>console.error("[ImmacStyleMixer] Save failed",h))},400),y})},[]);return{data:t,loading:p,error:c,update:f}}async function N(t){const d=new FormData;d.append("image",t),d.append("subfolder","immac_style_mixer/styles"),d.append("type","input");const p=await fetch("/upload/image",{method:"POST",body:d});if(!p.ok)throw new Error(`Upload failed: HTTP ${p.status}`);return(await p.json()).name}function T(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}function W({mix:t,styles:d,isActive:p,onActivate:o,onUpdate:c,onDelete:g}){const[x,f]=l.useState(!1),[a,m]=l.useState(t.name);function y(){f(!1),a.trim()!==t.name&&c({...t,name:a.trim()||t.name})}function h(e,r){const n=t.styles.map((u,S)=>S===e?{...u,...r}:u);c({...t,styles:n})}function s(e){c({...t,styles:t.styles.filter((r,n)=>n!==e)})}function v(e){t.styles.some(r=>r.style_id===e)||c({...t,styles:[...t.styles,{style_id:e,weight:1,enabled:!0}]})}const b=d.filter(e=>!t.styles.some(r=>r.style_id===e.id));return i.jsxs("div",{style:{border:`2px solid ${p?"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:220,maxWidth:300,flexShrink:0},children:[i.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[i.jsx("input",{type:"radio",title:"Set as current mix",checked:p,onChange:o,style:{cursor:"pointer",flexShrink:0}}),x?i.jsx("input",{autoFocus:!0,value:a,onChange:e=>m(e.target.value),onBlur:y,onKeyDown:e=>{e.key==="Enter"&&y(),e.key==="Escape"&&f(!1)},style:k}):i.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{m(t.name),f(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),i.jsx("button",{title:t.favorite?"Unfavorite":"Favorite",onClick:()=>c({...t,favorite:!t.favorite}),style:j,children:t.favorite?"★":"☆"}),i.jsx("button",{title:"Delete mix",onClick:g,style:{...j,color:"#e55"},children:"✕"})]}),i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[t.styles.length===0&&i.jsx("div",{style:{fontSize:11,color:"#666"},children:"No styles added yet."}),t.styles.map((e,r)=>{const n=d.find(u=>u.id===e.style_id);return i.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[i.jsx("button",{title:e.enabled?"Disable":"Enable",onClick:()=>h(r,{enabled:!e.enabled}),style:{...j,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:e.enabled?"var(--p-primary-color, #557755)":"transparent",color:e.enabled?"#fff":"#888",minWidth:32},children:e.enabled?"ON":"OFF"}),i.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(n==null?void 0:n.name)??e.style_id}),i.jsx("input",{type:"number",min:0,max:2,step:.05,value:e.weight,onChange:u=>h(r,{weight:parseFloat(u.target.value)||0}),style:{...k,width:52,textAlign:"right"}}),i.jsx("button",{title:"Remove from mix",onClick:()=>s(r),style:{...j,color:"#e55",fontSize:13},children:"✕"})]},e.style_id)})]}),b.length>0&&i.jsxs("select",{value:"",onChange:e=>{e.target.value&&v(e.target.value)},style:{...k,cursor:"pointer"},children:[i.jsx("option",{value:"",children:"+ add style…"}),b.map(e=>i.jsx("option",{value:e.id,children:e.name},e.id))]})]})}const j={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},k={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 F({style:t,onUpdate:d,onDelete:p}){const[o,c]=l.useState(!1),[g,x]=l.useState(!1),[f,a]=l.useState(t.name),[m,y]=l.useState(t.value),[h,s]=l.useState(!1),v=l.useRef(null);function b(){c(!1),f.trim()!==t.name&&d({...t,name:f.trim()||t.name})}function e(){x(!1),m!==t.value&&d({...t,value:m})}async function r(n){if(n.type.startsWith("image/")){s(!0);try{const u=await N(n);d({...t,image_filename:u})}catch(u){console.error("[ImmacStyleMixer] Image upload failed",u)}finally{s(!1)}}}return i.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:[i.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[i.jsx("button",{title:t.favorite?"Unfavorite":"Favorite",onClick:()=>d({...t,favorite:!t.favorite}),style:D,children:t.favorite?"★":"☆"}),i.jsx("button",{title:"Delete style",onClick:p,style:{...D,color:"#e55"},children:"✕"})]}),i.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var n;return(n=v.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const u=n.dataTransfer.files[0];u&&r(u)},style:{width:"100%",aspectRatio:"1",borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888",flexShrink:0},children:h?"Uploading…":t.image_filename?i.jsx("img",{src:T(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),i.jsx("input",{ref:v,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var S;const u=(S=n.target.files)==null?void 0:S[0];u&&r(u),n.target.value=""}}),o?i.jsx("input",{autoFocus:!0,value:f,onChange:n=>a(n.target.value),onBlur:b,onKeyDown:n=>{n.key==="Enter"&&b(),n.key==="Escape"&&c(!1)},style:z}):i.jsx("div",{title:"Click to rename",onDoubleClick:()=>{a(t.name),c(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),g?i.jsx("textarea",{autoFocus:!0,value:m,onChange:n=>y(n.target.value),onBlur:e,onKeyDown:n=>{n.key==="Escape"&&x(!1)},rows:3,style:{...z,resize:"vertical"}}):i.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{y(t.value),x(!0)},style:{fontSize:11,color:"#aaa",cursor:"text",wordBreak:"break-word",minHeight:32},children:t.value||i.jsx("span",{style:{color:"#555"},children:"double-click to add prompt…"})})]})}const D={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},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 A({styles:t,onUpdate:d,onDelete:p,onAdd:o}){const[c,g]=l.useState(""),[x,f]=l.useState(!1);function a(){const s=c.trim();s&&(o(s),g(""),f(!1))}const m=t.filter(s=>s.favorite),y=t.filter(s=>!s.favorite),h=[...m,...y];return i.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:i.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[h.map(s=>i.jsx(F,{style:s,onUpdate:d,onDelete:()=>p(s.id)},s.id)),x?i.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:[i.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:c,onChange:s=>g(s.target.value),onKeyDown:s=>{s.key==="Enter"&&a(),s.key==="Escape"&&f(!1)},style:B}),i.jsxs("div",{style:{display:"flex",gap:6},children:[i.jsx("button",{onClick:a,style:E,children:"Add"}),i.jsx("button",{onClick:()=>{f(!1),g("")},style:{...E,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):i.jsx("button",{title:"Add a new style",onClick:()=>f(!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 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:"4px 6px",fontSize:13},E={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function R(){return crypto.randomUUID()}function w({title:t,children:d}){return i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[i.jsx("div",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em",color:"#888",borderBottom:"1px solid var(--p-surface-border, #333)",paddingBottom:4},children:t}),d]})}function O(){const{data:t,loading:d,error:p,update:o}=M(),c=t.mixes.find(e=>e.id===t.current_mix_id)??null,g=l.useCallback(e=>{const r={id:R(),name:e,value:"",favorite:!1,image_filename:null};o(n=>({...n,styles:[...n.styles,r]}))},[o]),x=l.useCallback(e=>{o(r=>({...r,styles:r.styles.map(n=>n.id===e.id?e:n)}))},[o]),f=l.useCallback(e=>{o(r=>({...r,styles:r.styles.filter(n=>n.id!==e),mixes:r.mixes.map(n=>({...n,styles:n.styles.filter(u=>u.style_id!==e)}))}))},[o]),a=l.useCallback(()=>{const e={id:R(),name:`Mix ${t.mixes.length+1}`,favorite:!1,styles:[]};o(r=>({...r,mixes:[...r.mixes,e]}))},[t.mixes.length,o]),m=l.useCallback(e=>{o(r=>({...r,mixes:r.mixes.map(n=>n.id===e.id?e:n)}))},[o]),y=l.useCallback(e=>{o(r=>({...r,mixes:r.mixes.filter(n=>n.id!==e),current_mix_id:r.current_mix_id===e?null:r.current_mix_id}))},[o]),h=l.useCallback(e=>{o(r=>({...r,current_mix_id:e}))},[o]);if(d)return i.jsx("div",{style:C,children:"Loading…"});if(p)return i.jsxs("div",{style:{...C,color:"#e55"},children:["Error: ",p]});const s=t.mixes.filter(e=>e.favorite),v=t.mixes.filter(e=>!e.favorite),b=[...s,...v];return i.jsxs("div",{style:C,children:[i.jsx(w,{title:"Current Mix",children:c?i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[i.jsx("div",{style:{fontWeight:600,fontSize:14},children:c.name}),i.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[c.styles.length===0&&i.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),c.styles.map(e=>{const r=t.styles.find(n=>n.id===e.style_id);return i.jsxs("div",{style:{border:`1px solid ${e.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:e.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[i.jsx("span",{style:{fontWeight:600},children:(r==null?void 0:r.name)??"?"}),i.jsxs("span",{style:{color:"#aaa"},children:["×",e.weight.toFixed(2)]})]},e.style_id)})]})]}):i.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),i.jsx(w,{title:"Mixes",children:i.jsxs("div",{style:{display:"flex",gap:10,flexWrap:"wrap"},children:[b.map(e=>i.jsx(W,{mix:e,styles:t.styles,isActive:e.id===t.current_mix_id,onActivate:()=>h(e.id),onUpdate:m,onDelete:()=>y(e.id)},e.id)),i.jsx("button",{title:"Add a new mix",onClick:a,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:"+"})]})}),i.jsx(w,{title:"Styles",children:i.jsx(A,{styles:t.styles,onUpdate:x,onDelete:f,onAdd:g})})]})}const C={padding:"12px 12px",display:"flex",flexDirection:"column",gap:20,height:"100%",overflowY:"auto",color:"var(--p-text-color, #eee)",fontSize:13,boxSizing:"border-box"};export{O as default}; diff --git a/dist/immac_style_mixer/StyleMixerPanel-DHbEPNR6.js b/dist/immac_style_mixer/StyleMixerPanel-DHbEPNR6.js new file mode 100644 index 0000000..5786366 --- /dev/null +++ b/dist/immac_style_mixer/StyleMixerPanel-DHbEPNR6.js @@ -0,0 +1 @@ +import{j as i}from"./main.js";import{r as a}from"./vendor-wGySg1uH.js";const I={styles:[],mixes:[],current_mix_id:null},_="/immac_style_mixer/api/data";function M(){const[t,d]=a.useState(I),[p,o]=a.useState(!0),[c,h]=a.useState(null),x=a.useRef(null);a.useEffect(()=>{fetch(_).then(l=>{if(!l.ok)throw new Error(`HTTP ${l.status}`);return l.json()}).then(l=>d(l)).catch(l=>h(String(l))).finally(()=>o(!1))},[]);const f=a.useCallback(l=>{d(m=>{const y=typeof l=="function"?l(m):l;return x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{fetch(_,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(y)}).catch(b=>console.error("[ImmacStyleMixer] Save failed",b))},400),y})},[]);return{data:t,loading:p,error:c,update:f}}async function N(t){const d=new FormData;d.append("image",t),d.append("subfolder","immac_style_mixer/styles"),d.append("type","input");const p=await fetch("/upload/image",{method:"POST",body:d});if(!p.ok)throw new Error(`Upload failed: HTTP ${p.status}`);return(await p.json()).name}function T(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}function W({mix:t,styles:d,isActive:p,onActivate:o,onUpdate:c,onDelete:h}){const[x,f]=a.useState(!1),[l,m]=a.useState(t.name);function y(){f(!1),l.trim()!==t.name&&c({...t,name:l.trim()||t.name})}function b(e,r){const n=t.styles.map((u,S)=>S===e?{...u,...r}:u);c({...t,styles:n})}function s(e){c({...t,styles:t.styles.filter((r,n)=>n!==e)})}function v(e){t.styles.some(r=>r.style_id===e)||c({...t,styles:[...t.styles,{style_id:e,weight:1,enabled:!0}]})}const g=d.filter(e=>!t.styles.some(r=>r.style_id===e.id));return i.jsxs("div",{style:{border:`2px solid ${p?"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:[i.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[i.jsx("input",{type:"radio",title:"Set as current mix",checked:p,onChange:o,style:{cursor:"pointer",flexShrink:0}}),x?i.jsx("input",{autoFocus:!0,value:l,onChange:e=>m(e.target.value),onBlur:y,onKeyDown:e=>{e.key==="Enter"&&y(),e.key==="Escape"&&f(!1)},style:k}):i.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{m(t.name),f(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),i.jsx("button",{title:t.favorite?"Unfavorite":"Favorite",onClick:()=>c({...t,favorite:!t.favorite}),style:j,children:t.favorite?"★":"☆"}),i.jsx("button",{title:"Delete mix",onClick:h,style:{...j,color:"#e55"},children:"✕"})]}),i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,maxHeight:240,overflowY:"auto"},children:[t.styles.length===0&&i.jsx("div",{style:{fontSize:11,color:"#666"},children:"No styles added yet."}),t.styles.map((e,r)=>{const n=d.find(u=>u.id===e.style_id);return i.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[i.jsx("button",{title:e.enabled?"Disable":"Enable",onClick:()=>b(r,{enabled:!e.enabled}),style:{...j,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:e.enabled?"var(--p-primary-color, #557755)":"transparent",color:e.enabled?"#fff":"#888",minWidth:32},children:e.enabled?"ON":"OFF"}),i.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(n==null?void 0:n.name)??e.style_id}),i.jsx("input",{type:"number",min:0,max:2,step:.05,value:e.weight,onChange:u=>b(r,{weight:parseFloat(u.target.value)||0}),style:{...k,width:52,textAlign:"right"}}),i.jsx("button",{title:"Remove from mix",onClick:()=>s(r),style:{...j,color:"#e55",fontSize:13},children:"✕"})]},e.style_id)})]}),i.jsxs("select",{value:"",disabled:g.length===0,onChange:e=>{e.target.value&&v(e.target.value)},style:{...k,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:[i.jsx("option",{value:"",children:g.length===0?"— all styles already added —":"+ add style…"}),g.map(e=>i.jsx("option",{value:e.id,children:e.name},e.id))]})]})}const j={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},k={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 A({style:t,onUpdate:d,onDelete:p}){const[o,c]=a.useState(!1),[h,x]=a.useState(!1),[f,l]=a.useState(t.name),[m,y]=a.useState(t.value),[b,s]=a.useState(!1),v=a.useRef(null);function g(){c(!1),f.trim()!==t.name&&d({...t,name:f.trim()||t.name})}function e(){x(!1),m!==t.value&&d({...t,value:m})}async function r(n){if(n.type.startsWith("image/")){s(!0);try{const u=await N(n);d({...t,image_filename:u})}catch(u){console.error("[ImmacStyleMixer] Image upload failed",u)}finally{s(!1)}}}return i.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:[i.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[i.jsx("button",{title:t.favorite?"Unfavorite":"Favorite",onClick:()=>d({...t,favorite:!t.favorite}),style:D,children:t.favorite?"★":"☆"}),i.jsx("button",{title:"Delete style",onClick:p,style:{...D,color:"#e55"},children:"✕"})]}),i.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var n;return(n=v.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const u=n.dataTransfer.files[0];u&&r(u)},style:{width:"100%",aspectRatio:"1",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?i.jsx("img",{src:T(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),i.jsx("input",{ref:v,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var S;const u=(S=n.target.files)==null?void 0:S[0];u&&r(u),n.target.value=""}}),o?i.jsx("input",{autoFocus:!0,value:f,onChange:n=>l(n.target.value),onBlur:g,onKeyDown:n=>{n.key==="Enter"&&g(),n.key==="Escape"&&c(!1)},style:z}):i.jsx("div",{title:"Click to rename",onDoubleClick:()=>{l(t.name),c(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),h?i.jsx("textarea",{autoFocus:!0,value:m,onChange:n=>y(n.target.value),onBlur:e,onKeyDown:n=>{n.key==="Escape"&&x(!1)},rows:3,style:{...z,resize:"vertical"}}):i.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{y(t.value),x(!0)},style:{fontSize:11,color:"#aaa",cursor:"text",wordBreak:"break-word",minHeight:32},children:t.value||i.jsx("span",{style:{color:"#555"},children:"double-click to add prompt…"})})]})}const D={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},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 F({styles:t,onUpdate:d,onDelete:p,onAdd:o}){const[c,h]=a.useState(""),[x,f]=a.useState(!1);function l(){const s=c.trim();s&&(o(s),h(""),f(!1))}const m=t.filter(s=>s.favorite),y=t.filter(s=>!s.favorite),b=[...m,...y];return i.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:i.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[b.map(s=>i.jsx(A,{style:s,onUpdate:d,onDelete:()=>p(s.id)},s.id)),x?i.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:[i.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:c,onChange:s=>h(s.target.value),onKeyDown:s=>{s.key==="Enter"&&l(),s.key==="Escape"&&f(!1)},style:B}),i.jsxs("div",{style:{display:"flex",gap:6},children:[i.jsx("button",{onClick:l,style:E,children:"Add"}),i.jsx("button",{onClick:()=>{f(!1),h("")},style:{...E,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):i.jsx("button",{title:"Add a new style",onClick:()=>f(!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 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:"4px 6px",fontSize:13},E={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function R(){return crypto.randomUUID()}function w({title:t,children:d}){return i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[i.jsx("div",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em",color:"#888",borderBottom:"1px solid var(--p-surface-border, #333)",paddingBottom:4},children:t}),d]})}function O(){const{data:t,loading:d,error:p,update:o}=M(),c=t.mixes.find(e=>e.id===t.current_mix_id)??null,h=a.useCallback(e=>{const r={id:R(),name:e,value:"",favorite:!1,image_filename:null};o(n=>({...n,styles:[...n.styles,r]}))},[o]),x=a.useCallback(e=>{o(r=>({...r,styles:r.styles.map(n=>n.id===e.id?e:n)}))},[o]),f=a.useCallback(e=>{o(r=>({...r,styles:r.styles.filter(n=>n.id!==e),mixes:r.mixes.map(n=>({...n,styles:n.styles.filter(u=>u.style_id!==e)}))}))},[o]),l=a.useCallback(()=>{const e={id:R(),name:`Mix ${t.mixes.length+1}`,favorite:!1,styles:[]};o(r=>({...r,mixes:[...r.mixes,e]}))},[t.mixes.length,o]),m=a.useCallback(e=>{o(r=>({...r,mixes:r.mixes.map(n=>n.id===e.id?e:n)}))},[o]),y=a.useCallback(e=>{o(r=>({...r,mixes:r.mixes.filter(n=>n.id!==e),current_mix_id:r.current_mix_id===e?null:r.current_mix_id}))},[o]),b=a.useCallback(e=>{o(r=>({...r,current_mix_id:e}))},[o]);if(d)return i.jsx("div",{style:C,children:"Loading…"});if(p)return i.jsxs("div",{style:{...C,color:"#e55"},children:["Error: ",p]});const s=t.mixes.filter(e=>e.favorite),v=t.mixes.filter(e=>!e.favorite),g=[...s,...v];return i.jsxs("div",{style:C,children:[i.jsx(w,{title:"Current Mix",children:c?i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[i.jsx("div",{style:{fontWeight:600,fontSize:14},children:c.name}),i.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[c.styles.length===0&&i.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),c.styles.map(e=>{const r=t.styles.find(n=>n.id===e.style_id);return i.jsxs("div",{style:{border:`1px solid ${e.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:e.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[i.jsx("span",{style:{fontWeight:600},children:(r==null?void 0:r.name)??"?"}),i.jsxs("span",{style:{color:"#aaa"},children:["×",e.weight.toFixed(2)]})]},e.style_id)})]})]}):i.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),i.jsx(w,{title:"Mixes",children:i.jsxs("div",{style:{display:"flex",gap:10,flexWrap:"wrap"},children:[g.map(e=>i.jsx(W,{mix:e,styles:t.styles,isActive:e.id===t.current_mix_id,onActivate:()=>b(e.id),onUpdate:m,onDelete:()=>y(e.id)},e.id)),i.jsx("button",{title:"Add a new mix",onClick:l,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:"+"})]})}),i.jsx(w,{title:"Styles",children:i.jsx(F,{styles:t.styles,onUpdate:x,onDelete:f,onAdd:h})})]})}const C={padding:"12px 12px",display:"flex",flexDirection:"column",gap:20,height:"100%",overflowY:"auto",color:"var(--p-text-color, #eee)",fontSize:13,boxSizing:"border-box"};export{O as default}; diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js index b86b612..f78dcb7 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-D9g09ymf.js","immac_style_mixer/vendor-wGySg1uH.js"])))=>i.map(i=>d[i]); +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-DHbEPNR6.js","immac_style_mixer/vendor-wGySg1uH.js"])))=>i.map(i=>d[i]); import{r as h,a as R,R as v}from"./vendor-wGySg1uH.js";const g="modulepreload",I=function(r){return"/"+r},f={},P=function(e,o,n){let c=Promise.resolve();if(o&&o.length>0){document.getElementsByTagName("link");const t=document.querySelector("meta[property=csp-nonce]"),i=(t==null?void 0:t.nonce)||(t==null?void 0:t.getAttribute("nonce"));c=Promise.allSettled(o.map(a=>{if(a=I(a),a in f)return;f[a]=!0;const d=a.endsWith(".css"),w=d?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${a}"]${w}`))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 l(t){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=t,window.dispatchEvent(i),!i.defaultPrevented)throw t}return c.then(t=>{for(const i of t||[])i.status==="rejected"&&l(i.reason);return e().catch(l)})};var x={exports:{}},u={};/** * @license React * react-jsx-runtime.production.min.js @@ -7,4 +7,4 @@ import{r as h,a as R,R as v}from"./vendor-wGySg1uH.js";const g="modulepreload",I * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - */var b=h,j=Symbol.for("react.element"),k=Symbol.for("react.fragment"),O=Object.prototype.hasOwnProperty,L=b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,C={key:!0,ref:!0,__self:!0,__source:!0};function _(r,e,o){var n,c={},l=null,t=null;o!==void 0&&(l=""+o),e.key!==void 0&&(l=""+e.key),e.ref!==void 0&&(t=e.ref);for(n in e)O.call(e,n)&&!C.hasOwnProperty(n)&&(c[n]=e[n]);if(r&&r.defaultProps)for(n in e=r.defaultProps,e)c[n]===void 0&&(c[n]=e[n]);return{$$typeof:j,type:r,key:l,ref:t,props:c,_owner:L.current}}u.Fragment=k;u.jsx=_;u.jsxs=_;x.exports=u;var m=x.exports,p={},y=R;p.createRoot=y.createRoot,p.hydrateRoot=y.hydrateRoot;const T=v.lazy(()=>P(()=>import("./StyleMixerPanel-D9g09ymf.js"),__vite__mapDeps([0,1])));function U(){return new Promise(r=>{function e(){if(window.app){r();return}const o=setInterval(()=>{window.app&&(clearInterval(o),r())},50);setTimeout(()=>{clearInterval(o),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),r()},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:r=>{const e=document.createElement("div");e.id="immac-style-mixer-root",e.style.height="100%",r.appendChild(e),p.createRoot(e).render(m.jsx(v.StrictMode,{children:m.jsx(h.Suspense,{fallback:m.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:m.jsx(T,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer"})}M().catch(console.error);export{m as j}; + */var b=h,j=Symbol.for("react.element"),k=Symbol.for("react.fragment"),O=Object.prototype.hasOwnProperty,L=b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,C={key:!0,ref:!0,__self:!0,__source:!0};function _(r,e,o){var n,c={},l=null,t=null;o!==void 0&&(l=""+o),e.key!==void 0&&(l=""+e.key),e.ref!==void 0&&(t=e.ref);for(n in e)O.call(e,n)&&!C.hasOwnProperty(n)&&(c[n]=e[n]);if(r&&r.defaultProps)for(n in e=r.defaultProps,e)c[n]===void 0&&(c[n]=e[n]);return{$$typeof:j,type:r,key:l,ref:t,props:c,_owner:L.current}}u.Fragment=k;u.jsx=_;u.jsxs=_;x.exports=u;var m=x.exports,p={},y=R;p.createRoot=y.createRoot,p.hydrateRoot=y.hydrateRoot;const T=v.lazy(()=>P(()=>import("./StyleMixerPanel-DHbEPNR6.js"),__vite__mapDeps([0,1])));function U(){return new Promise(r=>{function e(){if(window.app){r();return}const o=setInterval(()=>{window.app&&(clearInterval(o),r())},50);setTimeout(()=>{clearInterval(o),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),r()},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:r=>{const e=document.createElement("div");e.id="immac-style-mixer-root",e.style.height="100%",r.appendChild(e),p.createRoot(e).render(m.jsx(v.StrictMode,{children:m.jsx(h.Suspense,{fallback:m.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:m.jsx(T,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer"})}M().catch(console.error);export{m as j}; diff --git a/ui/src/components/MixCard.tsx b/ui/src/components/MixCard.tsx index 84c12b4..82752c3 100644 --- a/ui/src/components/MixCard.tsx +++ b/ui/src/components/MixCard.tsx @@ -45,8 +45,8 @@ export default function MixCard({ mix, styles, isActive, onActivate, onUpdate, o display: 'flex', flexDirection: 'column', gap: 8, - minWidth: 220, - maxWidth: 300, + minWidth: 240, + maxWidth: 340, flexShrink: 0, }} > @@ -92,7 +92,7 @@ export default function MixCard({ mix, styles, isActive, onActivate, onUpdate, o {/* Style entries */} -
+
{mix.styles.length === 0 && (
No styles added yet.
)} @@ -141,19 +141,25 @@ export default function MixCard({ mix, styles, isActive, onActivate, onUpdate, o })}
- {/* Add style dropdown */} - {unusedStyles.length > 0 && ( - - )} + {/* Add style dropdown — always visible */} +
) }