From 5c974cdbffb2d91d63c9cb3bd2be9afa3f581740 Mon Sep 17 00:00:00 2001 From: Immac Date: Sun, 1 Mar 2026 22:27:59 -0600 Subject: [PATCH] fix: move mixFilter useState before early returns (Rules of Hooks violation) --- ...tyleMixerPanel-Cud08EkC.js => StyleMixerPanel-DH-FljKx.js} | 2 +- dist/immac_style_mixer/main.js | 4 ++-- ui/src/components/StyleMixerPanel.tsx | 3 +-- 3 files changed, 4 insertions(+), 5 deletions(-) rename dist/immac_style_mixer/{StyleMixerPanel-Cud08EkC.js => StyleMixerPanel-DH-FljKx.js} (64%) diff --git a/dist/immac_style_mixer/StyleMixerPanel-Cud08EkC.js b/dist/immac_style_mixer/StyleMixerPanel-DH-FljKx.js similarity index 64% rename from dist/immac_style_mixer/StyleMixerPanel-Cud08EkC.js rename to dist/immac_style_mixer/StyleMixerPanel-DH-FljKx.js index c870502..4fe4c43 100644 --- a/dist/immac_style_mixer/StyleMixerPanel-Cud08EkC.js +++ b/dist/immac_style_mixer/StyleMixerPanel-DH-FljKx.js @@ -1 +1 @@ -import{j as t}from"./main.js";import{r as a,b as H}from"./vendor-DPfS0z4g.js";const P={styles:[],mixes:[],current_mix_id:null},E="/immac_style_mixer/api/data";function $(){const[e,d]=a.useState(P),[c,l]=a.useState(!0),[f,y]=a.useState(null),m=a.useRef(null);a.useEffect(()=>{fetch(E).then(u=>{if(!u.ok)throw new Error(`HTTP ${u.status}`);return u.json()}).then(u=>d(u)).catch(u=>y(String(u))).finally(()=>l(!1))},[]);const x=a.useCallback(u=>{d(h=>{const g=typeof u=="function"?u(h):u;return m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{fetch(E,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(g)}).catch(b=>console.error("[ImmacStyleMixer] Save failed",b))},400),g})},[]);return{data:e,loading:c,error:f,update:x}}async function L(e){const d=new FormData;d.append("image",e),d.append("subfolder","immac_style_mixer/styles"),d.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:d});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function M(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function U(e){const d=new FormData;d.append("image",e),d.append("subfolder","immac_style_mixer/mixes"),d.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:d});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function F(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function O({src:e,alt:d,onClose:c}){return a.useEffect(()=>{function l(f){f.key==="Escape"&&c()}return window.addEventListener("keydown",l),()=>window.removeEventListener("keydown",l)},[c]),H.createPortal(t.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:[t.jsx("img",{src:e,alt:d??"",onClick:l=>l.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),t.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 V({mix:e,styles:d,isActive:c,onActivate:l,onUpdate:f,onDelete:y}){const[m,x]=a.useState(!1),[u,h]=a.useState(e.name),[g,b]=a.useState(!1),[k,j]=a.useState(!1),v=a.useRef(null);async function s(n){if(n.type.startsWith("image/")){b(!0);try{const p=await U(n);f({...e,image_filename:p})}catch(p){console.error("[ImmacStyleMixer] Mix image upload failed",p)}finally{b(!1)}}}function w(){x(!1),u.trim()!==e.name&&f({...e,name:u.trim()||e.name})}function C(n,p){const S=e.styles.map((_,A)=>A===n?{..._,...p}:_);f({...e,styles:S})}function r(n){f({...e,styles:e.styles.filter((p,S)=>S!==n)})}function i(n){e.styles.some(p=>p.style_id===n)||f({...e,styles:[...e.styles,{style_id:n,weight:1,enabled:!0}]})}const o=d.filter(n=>!e.styles.some(p=>p.style_id===n.id));return t.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:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[t.jsx("input",{type:"radio",title:"Set as current mix",checked:c,onChange:l,style:{cursor:"pointer",flexShrink:0}}),m?t.jsx("input",{autoFocus:!0,value:u,onChange:n=>h(n.target.value),onBlur:w,onKeyDown:n=>{n.key==="Enter"&&w(),n.key==="Escape"&&x(!1)},style:D}):t.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{h(e.name),x(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:e.name}),t.jsx("button",{title:e.favorite?"Unfavorite":"Favorite",onClick:()=>f({...e,favorite:!e.favorite}),style:z,children:e.favorite?"★":"☆"}),t.jsx("button",{title:"Delete mix",onClick:y,style:{...z,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 n;return(n=v.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const p=n.dataTransfer.files[0];p&&s(p)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888",flexShrink:0},children:g?"Uploading…":e.image_filename?t.jsx("img",{src:F(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ cover image"}),!g&&e.image_filename&&t.jsx("button",{title:"View full size",onClick:n=>{n.stopPropagation(),j(!0)},style:K,children:t.jsx("i",{className:"pi pi-search-plus"})})]}),k&&e.image_filename&&t.jsx(O,{src:F(e.image_filename),alt:e.name,onClose:()=>j(!1)}),t.jsx("input",{ref:v,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var S;const p=(S=n.target.files)==null?void 0:S[0];p&&s(p),n.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((n,p)=>{const S=d.find(_=>_.id===n.style_id);return t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[t.jsx("button",{title:n.enabled?"Disable":"Enable",onClick:()=>C(p,{enabled:!n.enabled}),style:{...z,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"}),t.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(S==null?void 0:S.name)??n.style_id}),t.jsx("input",{type:"number",min:0,max:2,step:.05,value:n.weight,onChange:_=>C(p,{weight:parseFloat(_.target.value)||0}),style:{...D,width:52,textAlign:"right"}}),t.jsx("button",{title:"Remove from mix",onClick:()=>r(p),style:{...z,color:"#e55",fontSize:13},children:"✕"})]},n.style_id)})]}),t.jsxs("select",{value:"",disabled:o.length===0,onChange:n=>{n.target.value&&i(n.target.value)},style:{...D,cursor:o.length===0?"not-allowed":"pointer",opacity:o.length===0?.45:1},title:o.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[t.jsx("option",{value:"",children:o.length===0?"— all styles already added —":"+ add style…"}),o.map(n=>t.jsx("option",{value:n.id,children:n.name},n.id))]})]})}const z={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)"},D={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:d,onDelete:c}){const[l,f]=a.useState(!1),[y,m]=a.useState(!1),[x,u]=a.useState(e.name),[h,g]=a.useState(e.value),[b,k]=a.useState(!1),[j,v]=a.useState(!1),s=a.useRef(null);function w(){f(!1),x.trim()!==e.name&&d({...e,name:x.trim()||e.name})}function C(){m(!1),h!==e.value&&d({...e,value:h})}async function r(i){if(i.type.startsWith("image/")){k(!0);try{const o=await L(i);d({...e,image_filename:o})}catch(o){console.error("[ImmacStyleMixer] Image upload failed",o)}finally{k(!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?"Unfavorite":"Favorite",onClick:()=>d({...e,favorite:!e.favorite}),style:N,children:e.favorite?"★":"☆"}),t.jsx("button",{title:"Delete style",onClick:c,style:{...N,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 i;return(i=s.current)==null?void 0:i.click()},onDragOver:i=>i.preventDefault(),onDrop:i=>{i.preventDefault();const o=i.dataTransfer.files[0];o&&r(o)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888"},children:b?"Uploading…":e.image_filename?t.jsx("img",{src:M(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!b&&e.image_filename&&t.jsx("button",{title:"View full size",onClick:i=>{i.stopPropagation(),v(!0)},style:G,children:t.jsx("i",{className:"pi pi-search-plus"})})]}),j&&e.image_filename&&t.jsx(O,{src:M(e.image_filename),alt:e.name,onClose:()=>v(!1)}),t.jsx("input",{ref:s,type:"file",accept:"image/*",style:{display:"none"},onChange:i=>{var n;const o=(n=i.target.files)==null?void 0:n[0];o&&r(o),i.target.value=""}}),l?t.jsx("input",{autoFocus:!0,value:x,onChange:i=>u(i.target.value),onBlur:w,onKeyDown:i=>{i.key==="Enter"&&w(),i.key==="Escape"&&f(!1)},style:T}):t.jsx("div",{title:"Click to rename",onDoubleClick:()=>{u(e.name),f(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:e.name}),y?t.jsx("textarea",{autoFocus:!0,value:h,onChange:i=>g(i.target.value),onBlur:C,onKeyDown:i=>{i.key==="Escape"&&m(!1)},rows:3,style:{...T,resize:"vertical"}}):t.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{g(e.value),m(!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 N={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)"},T={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:d,onDelete:c,onAdd:l}){const[f,y]=a.useState(""),[m,x]=a.useState(!1),[u,h]=a.useState("");function g(){const s=f.trim();s&&(l(s),y(""),x(!1))}const b=e.filter(s=>s.favorite),k=e.filter(s=>!s.favorite),j=[...b,...k],v=u.trim()?j.filter(s=>s.name.toLowerCase().includes(u.toLowerCase())):j;return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[t.jsx("input",{placeholder:"Filter styles…",value:u,onChange:s=>h(s.target.value),style:X}),t.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[v.map(s=>t.jsx(Y,{style:s,onUpdate:d,onDelete:()=>c(s.id)},s.id)),m?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:f,onChange:s=>y(s.target.value),onKeyDown:s=>{s.key==="Enter"&&g(),s.key==="Escape"&&x(!1)},style:q}),t.jsxs("div",{style:{display:"flex",gap:6},children:[t.jsx("button",{onClick:g,style:W,children:"Add"}),t.jsx("button",{onClick:()=>{x(!1),y("")},style:{...W,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 X={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-surface-border, #444)",borderRadius:4,color:"inherit",padding:"4px 8px",fontSize:12},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},W={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function B(){return crypto.randomUUID()}function I({title:e,children:d}){return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[t.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:e}),d]})}function te(){const{data:e,loading:d,error:c,update:l}=$(),f=e.mixes.find(r=>r.id===e.current_mix_id)??null,y=a.useCallback(r=>{const i={id:B(),name:r,value:"",favorite:!1,image_filename:null};l(o=>({...o,styles:[...o.styles,i]}))},[l]),m=a.useCallback(r=>{l(i=>({...i,styles:i.styles.map(o=>o.id===r.id?r:o)}))},[l]),x=a.useCallback(r=>{l(i=>({...i,styles:i.styles.filter(o=>o.id!==r),mixes:i.mixes.map(o=>({...o,styles:o.styles.filter(n=>n.style_id!==r)}))}))},[l]),u=a.useCallback(()=>{const r={id:B(),name:`Mix ${e.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};l(i=>({...i,mixes:[...i.mixes,r]}))},[e.mixes.length,l]),h=a.useCallback(r=>{l(i=>({...i,mixes:i.mixes.map(o=>o.id===r.id?r:o)}))},[l]),g=a.useCallback(r=>{l(i=>({...i,mixes:i.mixes.filter(o=>o.id!==r),current_mix_id:i.current_mix_id===r?null:i.current_mix_id}))},[l]),b=a.useCallback(r=>{l(i=>({...i,current_mix_id:r}))},[l]);if(d)return t.jsx("div",{style:R,children:"Loading…"});if(c)return t.jsxs("div",{style:{...R,color:"#e55"},children:["Error: ",c]});const k=e.mixes.filter(r=>r.favorite),j=e.mixes.filter(r=>!r.favorite),v=[...k,...j],[s,w]=a.useState(""),C=s.trim()?v.filter(r=>r.name.toLowerCase().includes(s.toLowerCase())):v;return t.jsxs("div",{style:R,children:[t.jsx(I,{title:"Current Mix",children:f?t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[t.jsx("div",{style:{fontWeight:600,fontSize:14},children:f.name}),t.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[f.styles.length===0&&t.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),f.styles.map(r=>{const i=e.styles.find(o=>o.id===r.style_id);return t.jsxs("div",{style:{border:`1px solid ${r.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:r.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[t.jsx("span",{style:{fontWeight:600},children:(i==null?void 0:i.name)??"?"}),t.jsxs("span",{style:{color:"#aaa"},children:["×",r.weight.toFixed(2)]})]},r.style_id)})]})]}):t.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),t.jsxs(I,{title:"Mixes",children:[t.jsx("input",{placeholder:"Filter mixes…",value:s,onChange:r=>w(r.target.value),style:Q}),t.jsxs("div",{style:{display:"flex",gap:10,overflowX:"auto",flexWrap:"nowrap",paddingBottom:6},children:[C.map(r=>t.jsx(V,{mix:r,styles:e.styles,isActive:r.id===e.current_mix_id,onActivate:()=>b(r.id),onUpdate:h,onDelete:()=>g(r.id)},r.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",flexShrink:0},children:"+"})]})]}),t.jsx(I,{title:"Styles",children:t.jsx(J,{styles:e.styles,onUpdate:m,onDelete:x,onAdd:y})})]})}const Q={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-surface-border, #444)",borderRadius:4,color:"inherit",padding:"4px 8px",fontSize:12},R={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{te as default}; +import{j as t}from"./main.js";import{r as a,b as H}from"./vendor-DPfS0z4g.js";const P={styles:[],mixes:[],current_mix_id:null},E="/immac_style_mixer/api/data";function $(){const[e,s]=a.useState(P),[c,l]=a.useState(!0),[f,y]=a.useState(null),x=a.useRef(null);a.useEffect(()=>{fetch(E).then(u=>{if(!u.ok)throw new Error(`HTTP ${u.status}`);return u.json()}).then(u=>s(u)).catch(u=>y(String(u))).finally(()=>l(!1))},[]);const m=a.useCallback(u=>{s(h=>{const g=typeof u=="function"?u(h):u;return x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{fetch(E,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(g)}).catch(b=>console.error("[ImmacStyleMixer] Save failed",b))},400),g})},[]);return{data:e,loading:c,error:f,update:m}}async function L(e){const s=new FormData;s.append("image",e),s.append("subfolder","immac_style_mixer/styles"),s.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:s});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function M(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function U(e){const s=new FormData;s.append("image",e),s.append("subfolder","immac_style_mixer/mixes"),s.append("type","input");const c=await fetch("/upload/image",{method:"POST",body:s});if(!c.ok)throw new Error(`Upload failed: HTTP ${c.status}`);return(await c.json()).name}function F(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function O({src:e,alt:s,onClose:c}){return a.useEffect(()=>{function l(f){f.key==="Escape"&&c()}return window.addEventListener("keydown",l),()=>window.removeEventListener("keydown",l)},[c]),H.createPortal(t.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:[t.jsx("img",{src:e,alt:s??"",onClick:l=>l.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),t.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 V({mix:e,styles:s,isActive:c,onActivate:l,onUpdate:f,onDelete:y}){const[x,m]=a.useState(!1),[u,h]=a.useState(e.name),[g,b]=a.useState(!1),[k,S]=a.useState(!1),j=a.useRef(null);async function d(n){if(n.type.startsWith("image/")){b(!0);try{const p=await U(n);f({...e,image_filename:p})}catch(p){console.error("[ImmacStyleMixer] Mix image upload failed",p)}finally{b(!1)}}}function w(){m(!1),u.trim()!==e.name&&f({...e,name:u.trim()||e.name})}function C(n,p){const v=e.styles.map((_,A)=>A===n?{..._,...p}:_);f({...e,styles:v})}function r(n){f({...e,styles:e.styles.filter((p,v)=>v!==n)})}function i(n){e.styles.some(p=>p.style_id===n)||f({...e,styles:[...e.styles,{style_id:n,weight:1,enabled:!0}]})}const o=s.filter(n=>!e.styles.some(p=>p.style_id===n.id));return t.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:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[t.jsx("input",{type:"radio",title:"Set as current mix",checked:c,onChange:l,style:{cursor:"pointer",flexShrink:0}}),x?t.jsx("input",{autoFocus:!0,value:u,onChange:n=>h(n.target.value),onBlur:w,onKeyDown:n=>{n.key==="Enter"&&w(),n.key==="Escape"&&m(!1)},style:D}):t.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{h(e.name),m(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:e.name}),t.jsx("button",{title:e.favorite?"Unfavorite":"Favorite",onClick:()=>f({...e,favorite:!e.favorite}),style:z,children:e.favorite?"★":"☆"}),t.jsx("button",{title:"Delete mix",onClick:y,style:{...z,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 n;return(n=j.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const p=n.dataTransfer.files[0];p&&d(p)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888",flexShrink:0},children:g?"Uploading…":e.image_filename?t.jsx("img",{src:F(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ cover image"}),!g&&e.image_filename&&t.jsx("button",{title:"View full size",onClick:n=>{n.stopPropagation(),S(!0)},style:K,children:t.jsx("i",{className:"pi pi-search-plus"})})]}),k&&e.image_filename&&t.jsx(O,{src:F(e.image_filename),alt:e.name,onClose:()=>S(!1)}),t.jsx("input",{ref:j,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var v;const p=(v=n.target.files)==null?void 0:v[0];p&&d(p),n.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((n,p)=>{const v=s.find(_=>_.id===n.style_id);return t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[t.jsx("button",{title:n.enabled?"Disable":"Enable",onClick:()=>C(p,{enabled:!n.enabled}),style:{...z,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"}),t.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(v==null?void 0:v.name)??n.style_id}),t.jsx("input",{type:"number",min:0,max:2,step:.05,value:n.weight,onChange:_=>C(p,{weight:parseFloat(_.target.value)||0}),style:{...D,width:52,textAlign:"right"}}),t.jsx("button",{title:"Remove from mix",onClick:()=>r(p),style:{...z,color:"#e55",fontSize:13},children:"✕"})]},n.style_id)})]}),t.jsxs("select",{value:"",disabled:o.length===0,onChange:n=>{n.target.value&&i(n.target.value)},style:{...D,cursor:o.length===0?"not-allowed":"pointer",opacity:o.length===0?.45:1},title:o.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[t.jsx("option",{value:"",children:o.length===0?"— all styles already added —":"+ add style…"}),o.map(n=>t.jsx("option",{value:n.id,children:n.name},n.id))]})]})}const z={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)"},D={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:s,onDelete:c}){const[l,f]=a.useState(!1),[y,x]=a.useState(!1),[m,u]=a.useState(e.name),[h,g]=a.useState(e.value),[b,k]=a.useState(!1),[S,j]=a.useState(!1),d=a.useRef(null);function w(){f(!1),m.trim()!==e.name&&s({...e,name:m.trim()||e.name})}function C(){x(!1),h!==e.value&&s({...e,value:h})}async function r(i){if(i.type.startsWith("image/")){k(!0);try{const o=await L(i);s({...e,image_filename:o})}catch(o){console.error("[ImmacStyleMixer] Image upload failed",o)}finally{k(!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?"Unfavorite":"Favorite",onClick:()=>s({...e,favorite:!e.favorite}),style:N,children:e.favorite?"★":"☆"}),t.jsx("button",{title:"Delete style",onClick:c,style:{...N,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 i;return(i=d.current)==null?void 0:i.click()},onDragOver:i=>i.preventDefault(),onDrop:i=>{i.preventDefault();const o=i.dataTransfer.files[0];o&&r(o)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888"},children:b?"Uploading…":e.image_filename?t.jsx("img",{src:M(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!b&&e.image_filename&&t.jsx("button",{title:"View full size",onClick:i=>{i.stopPropagation(),j(!0)},style:G,children:t.jsx("i",{className:"pi pi-search-plus"})})]}),S&&e.image_filename&&t.jsx(O,{src:M(e.image_filename),alt:e.name,onClose:()=>j(!1)}),t.jsx("input",{ref:d,type:"file",accept:"image/*",style:{display:"none"},onChange:i=>{var n;const o=(n=i.target.files)==null?void 0:n[0];o&&r(o),i.target.value=""}}),l?t.jsx("input",{autoFocus:!0,value:m,onChange:i=>u(i.target.value),onBlur:w,onKeyDown:i=>{i.key==="Enter"&&w(),i.key==="Escape"&&f(!1)},style:T}):t.jsx("div",{title:"Click to rename",onDoubleClick:()=>{u(e.name),f(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:e.name}),y?t.jsx("textarea",{autoFocus:!0,value:h,onChange:i=>g(i.target.value),onBlur:C,onKeyDown:i=>{i.key==="Escape"&&x(!1)},rows:3,style:{...T,resize:"vertical"}}):t.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{g(e.value),x(!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 N={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)"},T={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:s,onDelete:c,onAdd:l}){const[f,y]=a.useState(""),[x,m]=a.useState(!1),[u,h]=a.useState("");function g(){const d=f.trim();d&&(l(d),y(""),m(!1))}const b=e.filter(d=>d.favorite),k=e.filter(d=>!d.favorite),S=[...b,...k],j=u.trim()?S.filter(d=>d.name.toLowerCase().includes(u.toLowerCase())):S;return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[t.jsx("input",{placeholder:"Filter styles…",value:u,onChange:d=>h(d.target.value),style:X}),t.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[j.map(d=>t.jsx(Y,{style:d,onUpdate:s,onDelete:()=>c(d.id)},d.id)),x?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:f,onChange:d=>y(d.target.value),onKeyDown:d=>{d.key==="Enter"&&g(),d.key==="Escape"&&m(!1)},style:q}),t.jsxs("div",{style:{display:"flex",gap:6},children:[t.jsx("button",{onClick:g,style:W,children:"Add"}),t.jsx("button",{onClick:()=>{m(!1),y("")},style:{...W,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):t.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-surface-border, #444)",borderRadius:4,color:"inherit",padding:"4px 8px",fontSize:12},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},W={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function B(){return crypto.randomUUID()}function I({title:e,children:s}){return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[t.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:e}),s]})}function te(){const{data:e,loading:s,error:c,update:l}=$(),[f,y]=a.useState(""),x=e.mixes.find(r=>r.id===e.current_mix_id)??null,m=a.useCallback(r=>{const i={id:B(),name:r,value:"",favorite:!1,image_filename:null};l(o=>({...o,styles:[...o.styles,i]}))},[l]),u=a.useCallback(r=>{l(i=>({...i,styles:i.styles.map(o=>o.id===r.id?r:o)}))},[l]),h=a.useCallback(r=>{l(i=>({...i,styles:i.styles.filter(o=>o.id!==r),mixes:i.mixes.map(o=>({...o,styles:o.styles.filter(n=>n.style_id!==r)}))}))},[l]),g=a.useCallback(()=>{const r={id:B(),name:`Mix ${e.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};l(i=>({...i,mixes:[...i.mixes,r]}))},[e.mixes.length,l]),b=a.useCallback(r=>{l(i=>({...i,mixes:i.mixes.map(o=>o.id===r.id?r:o)}))},[l]),k=a.useCallback(r=>{l(i=>({...i,mixes:i.mixes.filter(o=>o.id!==r),current_mix_id:i.current_mix_id===r?null:i.current_mix_id}))},[l]),S=a.useCallback(r=>{l(i=>({...i,current_mix_id:r}))},[l]);if(s)return t.jsx("div",{style:R,children:"Loading…"});if(c)return t.jsxs("div",{style:{...R,color:"#e55"},children:["Error: ",c]});const j=e.mixes.filter(r=>r.favorite),d=e.mixes.filter(r=>!r.favorite),w=[...j,...d],C=f.trim()?w.filter(r=>r.name.toLowerCase().includes(f.toLowerCase())):w;return t.jsxs("div",{style:R,children:[t.jsx(I,{title:"Current Mix",children:x?t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[t.jsx("div",{style:{fontWeight:600,fontSize:14},children:x.name}),t.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[x.styles.length===0&&t.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),x.styles.map(r=>{const i=e.styles.find(o=>o.id===r.style_id);return t.jsxs("div",{style:{border:`1px solid ${r.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:r.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[t.jsx("span",{style:{fontWeight:600},children:(i==null?void 0:i.name)??"?"}),t.jsxs("span",{style:{color:"#aaa"},children:["×",r.weight.toFixed(2)]})]},r.style_id)})]})]}):t.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})}),t.jsxs(I,{title:"Mixes",children:[t.jsx("input",{placeholder:"Filter mixes…",value:f,onChange:r=>y(r.target.value),style:Q}),t.jsxs("div",{style:{display:"flex",gap:10,overflowX:"auto",flexWrap:"nowrap",paddingBottom:6},children:[C.map(r=>t.jsx(V,{mix:r,styles:e.styles,isActive:r.id===e.current_mix_id,onActivate:()=>S(r.id),onUpdate:b,onDelete:()=>k(r.id)},r.id)),t.jsx("button",{title:"Add a new mix",onClick:g,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",flexShrink:0},children:"+"})]})]}),t.jsx(I,{title:"Styles",children:t.jsx(J,{styles:e.styles,onUpdate:u,onDelete:h,onAdd:m})})]})}const Q={width:"100%",boxSizing:"border-box",background:"var(--p-surface-ground, #141414)",border:"1px solid var(--p-surface-border, #444)",borderRadius:4,color:"inherit",padding:"4px 8px",fontSize:12},R={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{te as default}; diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js index 3810941..99d7efe 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-Cud08EkC.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-DH-FljKx.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]); import{r as h,a as R,R as v}from"./vendor-DPfS0z4g.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-DPfS0z4g.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-Cud08EkC.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-DH-FljKx.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/StyleMixerPanel.tsx b/ui/src/components/StyleMixerPanel.tsx index f5294fe..94fc7ee 100644 --- a/ui/src/components/StyleMixerPanel.tsx +++ b/ui/src/components/StyleMixerPanel.tsx @@ -31,6 +31,7 @@ function Section({ title, children }: { title: string; children: React.ReactNode export default function StyleMixerPanel() { const { data, loading, error, update } = useStyleMixerData() + const [mixFilter, setMixFilter] = useState('') const currentMix = data.mixes.find((m) => m.id === data.current_mix_id) ?? null @@ -91,8 +92,6 @@ export default function StyleMixerPanel() { const favoritesMixes = data.mixes.filter((m) => m.favorite) const restMixes = data.mixes.filter((m) => !m.favorite) const sortedMixes = [...favoritesMixes, ...restMixes] - - const [mixFilter, setMixFilter] = useState('') const filteredMixes = mixFilter.trim() ? sortedMixes.filter((m) => m.name.toLowerCase().includes(mixFilter.toLowerCase())) : sortedMixes