From dcfcb057ebbf0fcd3cceea8ae6a12ca835e67cb6 Mon Sep 17 00:00:00 2001 From: Immac Date: Sun, 1 Mar 2026 22:49:39 -0600 Subject: [PATCH] feat: use react-resizable-panels for resizable section dividers --- .../StyleMixerPanel-B4CBSKrc.js | 1 - .../StyleMixerPanel-YndEdIPa.js | 1 + dist/immac_style_mixer/main.js | 4 +- ui/package-lock.json | 13 +- ui/package.json | 3 +- ui/src/components/StyleMixerPanel.tsx | 269 +++++++----------- 6 files changed, 123 insertions(+), 168 deletions(-) delete mode 100644 dist/immac_style_mixer/StyleMixerPanel-B4CBSKrc.js create mode 100644 dist/immac_style_mixer/StyleMixerPanel-YndEdIPa.js diff --git a/dist/immac_style_mixer/StyleMixerPanel-B4CBSKrc.js b/dist/immac_style_mixer/StyleMixerPanel-B4CBSKrc.js deleted file mode 100644 index 5d75348..0000000 --- a/dist/immac_style_mixer/StyleMixerPanel-B4CBSKrc.js +++ /dev/null @@ -1 +0,0 @@ -import{j as e}from"./main.js";import{r,b as ee}from"./vendor-DPfS0z4g.js";const te={styles:[],mixes:[],current_mix_id:null},P="/immac_style_mixer/api/data";function ie(){const[t,c]=r.useState(te),[f,s]=r.useState(!0),[p,b]=r.useState(null),m=r.useRef(null);r.useEffect(()=>{fetch(P).then(u=>{if(!u.ok)throw new Error(`HTTP ${u.status}`);return u.json()}).then(u=>c(u)).catch(u=>b(String(u))).finally(()=>s(!1))},[]);const g=r.useCallback(u=>{c(h=>{const y=typeof u=="function"?u(h):u;return m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{fetch(P,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(y)}).catch(v=>console.error("[ImmacStyleMixer] Save failed",v))},400),y})},[]);return{data:t,loading:f,error:p,update:g}}async function ne(t){const c=new FormData;c.append("image",t),c.append("subfolder","immac_style_mixer/styles"),c.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:c});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function A(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function oe(t){const c=new FormData;c.append("image",t),c.append("subfolder","immac_style_mixer/mixes"),c.append("type","input");const f=await fetch("/upload/image",{method:"POST",body:c});if(!f.ok)throw new Error(`Upload failed: HTTP ${f.status}`);return(await f.json()).name}function $(t){return`/view?filename=${encodeURIComponent(t)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function q({src:t,alt:c,onClose:f}){return r.useEffect(()=>{function s(p){p.key==="Escape"&&f()}return window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s)},[f]),ee.createPortal(e.jsxs("div",{onClick:f,style:{position:"fixed",inset:0,zIndex:99999,background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:[e.jsx("img",{src:t,alt:c??"",onClick:s=>s.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),e.jsx("button",{onClick:f,title:"Close",style:{position:"fixed",top:16,right:20,background:"none",border:"none",color:"#fff",fontSize:28,cursor:"pointer",lineHeight:1,opacity:.8},children:"✕"})]}),document.body)}function re({mix:t,styles:c,isActive:f,onActivate:s,onUpdate:p,onDelete:b}){const[m,g]=r.useState(!1),[u,h]=r.useState(t.name),[y,v]=r.useState(!1),[k,j]=r.useState(!1),S=r.useRef(null);async function l(n){if(n.type.startsWith("image/")){v(!0);try{const i=await oe(n);p({...t,image_filename:i})}catch(i){console.error("[ImmacStyleMixer] Mix image upload failed",i)}finally{v(!1)}}}function w(){g(!1),u.trim()!==t.name&&p({...t,name:u.trim()||t.name})}function C(n,i){const o=t.styles.map((d,D)=>D===n?{...d,...i}:d);p({...t,styles:o})}function _(n){p({...t,styles:t.styles.filter((i,o)=>o!==n)})}function a(n){t.styles.some(i=>i.style_id===n)||p({...t,styles:[...t.styles,{style_id:n,weight:1,enabled:!0}]})}const x=c.filter(n=>!t.styles.some(i=>i.style_id===n.id));return e.jsxs("div",{style:{border:`2px solid ${f?"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:f,onChange:s,style:{cursor:"pointer",flexShrink:0}}),m?e.jsx("input",{autoFocus:!0,value:u,onChange:n=>h(n.target.value),onBlur:w,onKeyDown:n=>{n.key==="Enter"&&w(),n.key==="Escape"&&g(!1)},style:F}):e.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{h(t.name),g(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:t.name}),e.jsx("button",{title:t.favorite?"Unfavorite":"Favorite",onClick:()=>p({...t,favorite:!t.favorite}),style:z,children:t.favorite?"★":"☆"}),e.jsx("button",{title:"Delete mix",onClick:b,style:{...z,color:"#e55"},children:"✕"})]}),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=S.current)==null?void 0:n.click()},onDragOver:n=>n.preventDefault(),onDrop:n=>{n.preventDefault();const i=n.dataTransfer.files[0];i&&l(i)},style:{position:"absolute",inset:0,borderRadius:6,border:"1px dashed var(--p-surface-border, #555)",overflow:"hidden",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--p-surface-ground, #141414)",fontSize:11,color:"#888",flexShrink:0},children:y?"Uploading…":t.image_filename?e.jsx("img",{src:$(t.image_filename),alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ cover image"}),!y&&t.image_filename&&e.jsx("button",{title:"View full size",onClick:n=>{n.stopPropagation(),j(!0)},style:se,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),k&&t.image_filename&&e.jsx(q,{src:$(t.image_filename),alt:t.name,onClose:()=>j(!1)}),e.jsx("input",{ref:S,type:"file",accept:"image/*",style:{display:"none"},onChange:n=>{var o;const i=(o=n.target.files)==null?void 0:o[0];i&&l(i),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,i)=>{const o=c.find(d=>d.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(i,{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"}),e.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(o==null?void 0:o.name)??n.style_id}),e.jsx("input",{type:"number",min:0,max:2,step:.05,value:n.weight,onChange:d=>C(i,{weight:parseFloat(d.target.value)||0}),style:{...F,width:52,textAlign:"right"}}),e.jsx("button",{title:"Remove from mix",onClick:()=>_(i),style:{...z,color:"#e55",fontSize:13},children:"✕"})]},n.style_id)})]}),e.jsxs("select",{value:"",disabled:x.length===0,onChange:n=>{n.target.value&&a(n.target.value)},style:{...F,cursor:x.length===0?"not-allowed":"pointer",opacity:x.length===0?.45:1},title:x.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[e.jsx("option",{value:"",children:x.length===0?"— all styles already added —":"+ add style…"}),x.map(n=>e.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},se={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)"},F={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 ae({style:t,onUpdate:c,onDelete:f}){const[s,p]=r.useState(!1),[b,m]=r.useState(!1),[g,u]=r.useState(t.name),[h,y]=r.useState(t.value),[v,k]=r.useState(!1),[j,S]=r.useState(!1),l=r.useRef(null);function w(){p(!1),g.trim()!==t.name&&c({...t,name:g.trim()||t.name})}function C(){m(!1),h!==t.value&&c({...t,value:h})}async function _(a){if(a.type.startsWith("image/")){k(!0);try{const x=await ne(a);c({...t,image_filename:x})}catch(x){console.error("[ImmacStyleMixer] Image upload failed",x)}finally{k(!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:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("button",{title:t.favorite?"Unfavorite":"Favorite",onClick:()=>c({...t,favorite:!t.favorite}),style:U,children:t.favorite?"★":"☆"}),e.jsx("button",{title:"Delete style",onClick:f,style:{...U,color:"#e55"},children:"✕"})]}),e.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[e.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var a;return(a=l.current)==null?void 0:a.click()},onDragOver:a=>a.preventDefault(),onDrop:a=>{a.preventDefault();const x=a.dataTransfer.files[0];x&&_(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"},children:v?"Uploading…":t.image_filename?e.jsx("img",{src:A(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:a=>{a.stopPropagation(),S(!0)},style:le,children:e.jsx("i",{className:"pi pi-search-plus"})})]}),j&&t.image_filename&&e.jsx(q,{src:A(t.image_filename),alt:t.name,onClose:()=>S(!1)}),e.jsx("input",{ref:l,type:"file",accept:"image/*",style:{display:"none"},onChange:a=>{var n;const x=(n=a.target.files)==null?void 0:n[0];x&&_(x),a.target.value=""}}),s?e.jsx("input",{autoFocus:!0,value:g,onChange:a=>u(a.target.value),onBlur:w,onKeyDown:a=>{a.key==="Enter"&&w(),a.key==="Escape"&&p(!1)},style:V}):e.jsx("div",{title:"Click to rename",onDoubleClick:()=>{u(t.name),p(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:t.name}),b?e.jsx("textarea",{autoFocus:!0,value:h,onChange:a=>y(a.target.value),onBlur:C,onKeyDown:a=>{a.key==="Escape"&&m(!1)},rows:3,style:{...V,resize:"vertical"}}):e.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{y(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 U={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},le={position:"absolute",top:6,left:6,background:"rgba(255,255,255,0.92)",border:"none",borderRadius:6,cursor:"pointer",fontSize:13,padding:"3px 6px",lineHeight:1,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.25)"},V={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 de({styles:t,onUpdate:c,onDelete:f,onAdd:s}){const[p,b]=r.useState(""),[m,g]=r.useState(!1),[u,h]=r.useState("");function y(){const l=p.trim();l&&(s(l),b(""),g(!1))}const v=t.filter(l=>l.favorite),k=t.filter(l=>!l.favorite),j=[...v,...k],S=u.trim()?j.filter(l=>l.name.toLowerCase().includes(u.toLowerCase())):j;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsx("input",{placeholder:"Filter styles…",value:u,onChange:l=>h(l.target.value),style:ce}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[S.map(l=>e.jsx(ae,{style:l,onUpdate:c,onDelete:()=>f(l.id)},l.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:p,onChange:l=>b(l.target.value),onKeyDown:l=>{l.key==="Enter"&&y(),l.key==="Escape"&&g(!1)},style:ue}),e.jsxs("div",{style:{display:"flex",gap:6},children:[e.jsx("button",{onClick:y,style:Y,children:"Add"}),e.jsx("button",{onClick:()=>{g(!1),b("")},style:{...Y,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 ce={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},ue={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},Y={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function K(){return crypto.randomUUID()}function H({title:t}){return e.jsx("div",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em",color:"#888",borderBottom:"1px solid var(--p-surface-border, #333)",paddingBottom:4,marginBottom:8,flexShrink:0},children:t})}const Q=6,X=.08;function me(){const{data:t,loading:c,error:f,update:s}=ie(),[p,b]=r.useState(""),[m,g]=r.useState([1,2,2]),u=r.useRef(null),h=t.mixes.find(i=>i.id===t.current_mix_id)??null,y=r.useCallback(i=>{const o={id:K(),name:i,value:"",favorite:!1,image_filename:null};s(d=>({...d,styles:[...d.styles,o]}))},[s]),v=r.useCallback(i=>{s(o=>({...o,styles:o.styles.map(d=>d.id===i.id?i:d)}))},[s]),k=r.useCallback(i=>{s(o=>({...o,styles:o.styles.filter(d=>d.id!==i),mixes:o.mixes.map(d=>({...d,styles:d.styles.filter(D=>D.style_id!==i)}))}))},[s]),j=r.useCallback(()=>{const i={id:K(),name:`Mix ${t.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};s(o=>({...o,mixes:[...o.mixes,i]}))},[t.mixes.length,s]),S=r.useCallback(i=>{s(o=>({...o,mixes:o.mixes.map(d=>d.id===i.id?i:d)}))},[s]),l=r.useCallback(i=>{s(o=>({...o,mixes:o.mixes.filter(d=>d.id!==i),current_mix_id:o.current_mix_id===i?null:o.current_mix_id}))},[s]),w=r.useCallback(i=>{s(o=>({...o,current_mix_id:i}))},[s]);function C(i,o){const d=u.current;if(!d)return;const D=d.clientHeight-Q*2,R=[...m],E=R.reduce((I,W)=>I+W,0);function B(I){const O=(I.clientY-o)/D*E;g(Z=>{const M=[...Z];return M[i]=Math.max(X*E,R[i]+O),M[i+1]=Math.max(X*E,R[i+1]-O),M})}function L(){document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",L),document.body.style.cursor="",document.body.style.userSelect=""}document.body.style.cursor="ns-resize",document.body.style.userSelect="none",document.addEventListener("mousemove",B),document.addEventListener("mouseup",L)}if(c)return e.jsx("div",{style:N,children:"Loading…"});if(f)return e.jsxs("div",{style:{...N,color:"#e55"},children:["Error: ",f]});const _=t.mixes.filter(i=>i.favorite),a=t.mixes.filter(i=>!i.favorite),x=[..._,...a],n=p.trim()?x.filter(i=>i.name.toLowerCase().includes(p.toLowerCase())):x;return e.jsxs("div",{ref:u,style:N,children:[e.jsx("div",{style:{flex:m[0],minHeight:0,overflow:"hidden",display:"flex",flexDirection:"column"},children:e.jsxs("div",{style:T,children:[e.jsx(H,{title:"Current Mix"}),h?e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[e.jsx("div",{style:{fontWeight:600,fontSize:14},children:h.name}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[h.styles.length===0&&e.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),h.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,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:i.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[e.jsx("span",{style:{fontWeight:600},children:(o==null?void 0:o.name)??"?"}),e.jsxs("span",{style:{color:"#aaa"},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("div",{onMouseDown:i=>C(0,i.clientY),style:G,title:"Drag to resize",children:e.jsx("div",{style:J})}),e.jsx("div",{style:{flex:m[1],minHeight:0,overflow:"hidden",display:"flex",flexDirection:"column"},children:e.jsxs("div",{style:T,children:[e.jsx(H,{title:"Mixes"}),e.jsx("input",{placeholder:"Filter mixes…",value:p,onChange:i=>b(i.target.value),style:{...fe,marginBottom:8}}),e.jsxs("div",{style:{display:"flex",gap:10,overflowX:"auto",flexWrap:"nowrap",paddingBottom:6,flex:1},children:[n.map(i=>e.jsx(re,{mix:i,styles:t.styles,isActive:i.id===t.current_mix_id,onActivate:()=>w(i.id),onUpdate:S,onDelete:()=>l(i.id)},i.id)),e.jsx("button",{title:"Add a new mix",onClick:j,style:{minWidth:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22,alignSelf:"flex-start",flexShrink:0,aspectRatio:"1"},children:"+"})]})]})}),e.jsx("div",{onMouseDown:i=>C(1,i.clientY),style:G,title:"Drag to resize",children:e.jsx("div",{style:J})}),e.jsx("div",{style:{flex:m[2],minHeight:0,overflow:"hidden",display:"flex",flexDirection:"column"},children:e.jsxs("div",{style:T,children:[e.jsx(H,{title:"Styles"}),e.jsx(de,{styles:t.styles,onUpdate:v,onDelete:k,onAdd:y})]})})]})}const N={display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",color:"var(--p-text-color, #eee)",fontSize:13},T={padding:"10px 12px",height:"100%",overflowY:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column"},G={flexShrink:0,height:Q,cursor:"ns-resize",background:"var(--p-surface-border, #333)",display:"flex",alignItems:"center",justifyContent:"center"},J={width:32,height:2,borderRadius:2,background:"#666"},fe={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,flexShrink:0};export{me as default}; diff --git a/dist/immac_style_mixer/StyleMixerPanel-YndEdIPa.js b/dist/immac_style_mixer/StyleMixerPanel-YndEdIPa.js new file mode 100644 index 0000000..18e6d2e --- /dev/null +++ b/dist/immac_style_mixer/StyleMixerPanel-YndEdIPa.js @@ -0,0 +1 @@ +var Ie=e=>{throw TypeError(e)};var Te=(e,t,n)=>t.has(e)||Ie("Cannot "+n);var oe=(e,t,n)=>(Te(e,t,"read from private field"),n?n.call(e):t.get(e)),_e=(e,t,n)=>t.has(e)?Ie("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,n),Fe=(e,t,n,o)=>(Te(e,t,"write to private field"),o?o.call(e,n):t.set(e,n),n);import{j as m}from"./main.js";import{r as z,b as Dt}from"./vendor-DPfS0z4g.js";function Lt(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function Et(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function Mt(e){return e/100*window.innerHeight}function It(e){return e/100*window.innerWidth}function Tt(e){switch(typeof e){case"number":return[e,"px"];case"string":{const t=parseFloat(e);return e.endsWith("%")?[t,"%"]:e.endsWith("px")?[t,"px"]:e.endsWith("rem")?[t,"rem"]:e.endsWith("em")?[t,"em"]:e.endsWith("vh")?[t,"vh"]:e.endsWith("vw")?[t,"vw"]:[t,"%"]}}}function le({groupSize:e,panelElement:t,styleProp:n}){let o;const[i,s]=Tt(n);switch(s){case"%":{o=i/100*e;break}case"px":{o=i;break}case"rem":{o=Et(t,i);break}case"em":{o=Lt(t,i);break}case"vh":{o=Mt(i);break}case"vw":{o=It(i);break}}return o}function I(e){return parseFloat(e.toFixed(3))}function ee({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,i)=>(o+=t==="horizontal"?i.element.offsetWidth:i.element.offsetHeight,o),0)}function be(e){const{panels:t}=e,n=ee({group:e});return n===0?t.map(o=>({groupResizeBehavior:o.panelConstraints.groupResizeBehavior,collapsedSize:0,collapsible:o.panelConstraints.collapsible===!0,defaultSize:void 0,disabled:o.panelConstraints.disabled,minSize:0,maxSize:100,panelId:o.id})):t.map(o=>{const{element:i,panelConstraints:s}=o;let d=0;if(s.collapsedSize!==void 0){const p=le({groupSize:n,panelElement:i,styleProp:s.collapsedSize});d=I(p/n*100)}let r;if(s.defaultSize!==void 0){const p=le({groupSize:n,panelElement:i,styleProp:s.defaultSize});r=I(p/n*100)}let a=0;if(s.minSize!==void 0){const p=le({groupSize:n,panelElement:i,styleProp:s.minSize});a=I(p/n*100)}let f=100;if(s.maxSize!==void 0){const p=le({groupSize:n,panelElement:i,styleProp:s.maxSize});f=I(p/n*100)}return{groupResizeBehavior:s.groupResizeBehavior,collapsedSize:d,collapsible:s.collapsible===!0,defaultSize:r,disabled:s.disabled,minSize:a,maxSize:f,panelId:o.id}})}function R(e,t="Assertion error"){if(!e)throw Error(t)}function Se(e,t){return Array.from(t).sort(e==="horizontal"?_t:Ft)}function _t(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function Ft(e,t){const n=e.element.offsetTop-t.element.offsetTop;return n!==0?n:e.element.offsetHeight-t.element.offsetHeight}function lt(e){return e!==null&&typeof e=="object"&&"nodeType"in e&&e.nodeType===Node.ELEMENT_NODE}function ut(e,t){return{x:e.x>=t.left&&e.x<=t.right?0:Math.min(Math.abs(e.x-t.left),Math.abs(e.x-t.right)),y:e.y>=t.top&&e.y<=t.bottom?0:Math.min(Math.abs(e.y-t.top),Math.abs(e.y-t.bottom))}}function Ot({orientation:e,rects:t,targetRect:n}){const o={x:n.x+n.width/2,y:n.y+n.height/2};let i,s=Number.MAX_VALUE;for(const d of t){const{x:r,y:a}=ut(o,d),f=e==="horizontal"?r:a;f({element:S}))).map(({element:S})=>S),d=[];let r=!1,a=!1,f=-1,p=-1,b=0,y,C=[];{let S=-1;for(const c of s)c.hasAttribute("data-panel")&&(S++,c.ariaDisabled===null&&(b++,f===-1&&(f=S),p=S))}if(b>1){let S=-1;for(const c of s)if(c.hasAttribute("data-panel")){S++;const x=o.find(v=>v.element===c);if(x){if(y){const v=y.element.getBoundingClientRect(),g=c.getBoundingClientRect();let u;if(a){const h=n==="horizontal"?new DOMRect(v.right,v.top,0,v.height):new DOMRect(v.left,v.bottom,v.width,0),l=n==="horizontal"?new DOMRect(g.left,g.top,0,g.height):new DOMRect(g.left,g.top,g.width,0);switch(C.length){case 0:{u=[h,l];break}case 1:{const w=C[0],k=Ot({orientation:n,rects:[v,g],targetRect:w.element.getBoundingClientRect()});u=[w,k===v?l:h];break}default:{u=C;break}}}else C.length?u=C:u=[n==="horizontal"?new DOMRect(v.right,g.top,g.left-v.right,g.height):new DOMRect(g.left,v.bottom,g.width,g.top-v.bottom)];for(const h of u){let l="width"in h?h:h.element.getBoundingClientRect();const w=Nt()?e.resizeTargetMinimumSize.coarse:e.resizeTargetMinimumSize.fine;if(l.widthp;!r&&!k&&d.push({group:e,groupSize:ee({group:e}),panels:[y,x],separator:"width"in h?void 0:h,rect:l}),r=!1}}a=!1,y=x,C=[]}}else if(c.hasAttribute("data-separator")){c.ariaDisabled!==null&&(r=!0);const x=i.find(v=>v.element===c);x?C.push(x):(y=void 0,C=[])}else a=!0}return d}var W;class ct{constructor(){_e(this,W,{})}addListener(t,n){const o=oe(this,W)[t];return o===void 0?oe(this,W)[t]=[n]:o.includes(n)||o.push(n),()=>{this.removeListener(t,n)}}emit(t,n){const o=oe(this,W)[t];if(o!==void 0)if(o.length===1)o[0].call(null,n);else{let i=!1,s=null;const d=Array.from(o);for(let r=0;r=0&&o.splice(i,1)}}}W=new WeakMap;let F=new Map;const ft=new ct;function $t(e){F=new Map(F),F.delete(e)}function Oe(e,t){for(const[n]of F)if(n.id===e)return n}function H(e,t){for(const[n,o]of F)if(n.id===e)return o;if(t)throw Error(`Could not find data for Group with id ${e}`)}function Y(){return F}function we(e,t){return ft.addListener("groupChange",n=>{n.group.id===e&&t(n)})}function $(e,t){const n=F.get(e);F=new Map(F),F.set(e,t),ft.emit("groupChange",{group:e,prev:n,next:t})}function At(e,t,n){let o,i={x:1/0,y:1/0};for(const s of t){const d=ut(n,s.rect);switch(e){case"horizontal":{d.x<=i.x&&(o=s,i=d);break}case"vertical":{d.y<=i.y&&(o=s,i=d);break}}}return o?{distance:i,hitRegion:o}:void 0}function Bt(e){return e!==null&&typeof e=="object"&&"nodeType"in e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE}function Wt(e,t){if(e===t)throw new Error("Cannot compare node with itself");const n={a:Ae(e),b:Ae(t)};let o;for(;n.a.at(-1)===n.b.at(-1);)o=n.a.pop(),n.b.pop();R(o,"Stacking order can only be calculated for elements with a common ancestor");const i={a:$e(Ne(n.a)),b:$e(Ne(n.b))};if(i.a===i.b){const s=o.childNodes,d={a:n.a.at(-1),b:n.b.at(-1)};let r=s.length;for(;r--;){const a=s[r];if(a===d.a)return 1;if(a===d.b)return-1}}return Math.sign(i.a-i.b)}const Ht=/\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;function Gt(e){const t=getComputedStyle(pt(e)??e).display;return t==="flex"||t==="inline-flex"}function Vt(e){const t=getComputedStyle(e);return!!(t.position==="fixed"||t.zIndex!=="auto"&&(t.position!=="static"||Gt(e))||+t.opacity<1||"transform"in t&&t.transform!=="none"||"webkitTransform"in t&&t.webkitTransform!=="none"||"mixBlendMode"in t&&t.mixBlendMode!=="normal"||"filter"in t&&t.filter!=="none"||"webkitFilter"in t&&t.webkitFilter!=="none"||"isolation"in t&&t.isolation==="isolate"||Ht.test(t.willChange)||t.webkitOverflowScrolling==="touch")}function Ne(e){let t=e.length;for(;t--;){const n=e[t];if(R(n,"Missing node"),Vt(n))return n}return null}function $e(e){return e&&Number(getComputedStyle(e).zIndex)||0}function Ae(e){const t=[];for(;e;)t.push(e),e=pt(e);return t}function pt(e){const{parentNode:t}=e;return Bt(t)?t.host:t}function Ut(e,t){return e.xt.x&&e.yt.y}function Xt({groupElement:e,hitRegion:t,pointerEventTarget:n}){if(!lt(n)||n.contains(e)||e.contains(n))return!0;if(Wt(n,e)>0){let o=n;for(;o;){if(o.contains(e))return!0;if(Ut(o.getBoundingClientRect(),t))return!1;o=o.parentElement}}return!0}function Ce(e,t){const n=[];return t.forEach((o,i)=>{if(i.disabled)return;const s=dt(i),d=At(i.orientation,s,{x:e.clientX,y:e.clientY});d&&d.distance.x<=0&&d.distance.y<=0&&Xt({groupElement:i.element,hitRegion:d.hitRegion.rect,pointerEventTarget:e.target})&&n.push(d.hitRegion)}),n}function Yt(e,t){if(e.length!==t.length)return!1;for(let n=0;nt?1:-1}function q({overrideDisabledPanels:e,panelConstraints:t,prevSize:n,size:o}){const{collapsedSize:i=0,collapsible:s,disabled:d,maxSize:r=100,minSize:a=0}=t;if(d&&!e)return n;if(_(o,a)<0)if(s){const f=(i+a)/2;_(o,f)<0?o=i:o=a}else o=a;return o=Math.min(r,o),o=I(o),o}function ie({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:i,trigger:s}){if(M(e,0))return t;const d=s==="imperative-api",r=Object.values(t),a=Object.values(i),f=[...r],[p,b]=o;R(p!=null,"Invalid first pivot index"),R(b!=null,"Invalid second pivot index");let y=0;switch(s){case"keyboard":{{const c=e<0?b:p,x=n[c];R(x,`Panel constraints not found for index ${c}`);const{collapsedSize:v=0,collapsible:g,minSize:u=0}=x;if(g){const h=r[c];if(R(h!=null,`Previous layout not found for panel index ${c}`),M(h,v)){const l=u-h;_(l,Math.abs(e))>0&&(e=e<0?0-l:l)}}}{const c=e<0?p:b,x=n[c];R(x,`No panel constraints found for index ${c}`);const{collapsedSize:v=0,collapsible:g,minSize:u=0}=x;if(g){const h=r[c];if(R(h!=null,`Previous layout not found for panel index ${c}`),M(h,u)){const l=h-v;_(l,Math.abs(e))>0&&(e=e<0?0-l:l)}}}break}default:{const c=e<0?b:p,x=n[c];R(x,`Panel constraints not found for index ${c}`);const v=r[c],{collapsible:g,collapsedSize:u,minSize:h}=x;if(g&&_(v,h)<0)if(e>0){const l=h-u,w=l/2,k=v+e;_(k,h)<0&&(e=_(e,w)<=0?0:l)}else{const l=h-u,w=100-l/2,k=v-e;_(k,h)<0&&(e=_(100+e,w)>0?0:-l)}break}}{const c=e<0?1:-1;let x=e<0?b:p,v=0;for(;;){const u=r[x];R(u!=null,`Previous layout not found for panel index ${x}`);const h=q({overrideDisabledPanels:d,panelConstraints:n[x],prevSize:u,size:100})-u;if(v+=h,x+=c,x<0||x>=n.length)break}const g=Math.min(Math.abs(e),Math.abs(v));e=e<0?0-g:g}{let c=e<0?p:b;for(;c>=0&&c=0))break;e<0?c--:c++}}if(Yt(a,f))return i;{const c=e<0?b:p,x=r[c];R(x!=null,`Previous layout not found for panel index ${c}`);const v=x+y,g=q({overrideDisabledPanels:d,panelConstraints:n[c],prevSize:x,size:v});if(f[c]=g,!M(g,v)){let u=v-g,h=e<0?b:p;for(;h>=0&&h0?h--:h++}}}const C=Object.values(f).reduce((c,x)=>x+c,0);if(!M(C,100,.1))return i;const S=Object.keys(i);return f.reduce((c,x,v)=>(c[S[v]]=x,c),{})}function V(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(t[n]===void 0||_(e[n],t[n])!==0)return!1;return!0}function U({layout:e,panelConstraints:t}){const n=Object.values(e),o=[...n],i=o.reduce((r,a)=>r+a,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(r=>`${r}%`).join(", ")}`);if(!M(i,100)&&o.length>0)for(let r=0;r(r[d[f]]=a,r),{})}function gt({groupId:e,panelId:t}){const n=()=>{const r=Y();for(const[a,{defaultLayoutDeferred:f,derivedPanelConstraints:p,layout:b,groupSize:y,separatorToPanels:C}]of r)if(a.id===e)return{defaultLayoutDeferred:f,derivedPanelConstraints:p,group:a,groupSize:y,layout:b,separatorToPanels:C};throw Error(`Group ${e} not found`)},o=()=>{const r=n().derivedPanelConstraints.find(a=>a.panelId===t);if(r!==void 0)return r;throw Error(`Panel constraints not found for Panel ${t}`)},i=()=>{const r=n().group.panels.find(a=>a.id===t);if(r!==void 0)return r;throw Error(`Layout not found for Panel ${t}`)},s=()=>{const r=n().layout[t];if(r!==void 0)return r;throw Error(`Layout not found for Panel ${t}`)},d=r=>{const a=s();if(r===a)return;const{defaultLayoutDeferred:f,derivedPanelConstraints:p,group:b,groupSize:y,layout:C,separatorToPanels:S}=n(),c=b.panels.findIndex(u=>u.id===t),x=c===b.panels.length-1,v=ie({delta:x?a-r:r-a,initialLayout:C,panelConstraints:p,pivotIndices:x?[c-1,c]:[c,c+1],prevLayout:C,trigger:"imperative-api"}),g=U({layout:v,panelConstraints:p});V(C,g)||$(b,{defaultLayoutDeferred:f,derivedPanelConstraints:p,groupSize:y,layout:g,separatorToPanels:S})};return{collapse:()=>{const{collapsible:r,collapsedSize:a}=o(),{mutableValues:f}=i(),p=s();r&&p!==a&&(f.expandToSize=p,d(a))},expand:()=>{const{collapsible:r,collapsedSize:a,minSize:f}=o(),{mutableValues:p}=i(),b=s();if(r&&b===a){let y=p.expandToSize??f;y===0&&(y=1),d(y)}},getSize:()=>{const{group:r}=n(),a=s(),{element:f}=i(),p=r.orientation==="horizontal"?f.offsetWidth:f.offsetHeight;return{asPercentage:a,inPixels:p}},isCollapsed:()=>{const{collapsible:r,collapsedSize:a}=o(),f=s();return r&&M(a,f)},resize:r=>{if(s()!==r){let a;switch(typeof r){case"number":{const{group:f}=n(),p=ee({group:f});a=I(r/p*100);break}case"string":{a=parseFloat(r);break}}d(a)}}}}function Be(e){if(e.defaultPrevented)return;const t=Y();Ce(e,t).forEach(n=>{if(n.separator){const o=n.panels.find(i=>i.panelConstraints.defaultSize!==void 0);if(o){const i=o.panelConstraints.defaultSize,s=gt({groupId:n.group.id,panelId:o.id});s&&i!==void 0&&(s.resize(i),e.preventDefault())}}})}function fe(e){const t=Y();for(const[n]of t)if(n.separators.some(o=>o.element===e))return n;throw Error("Could not find parent Group for separator element")}function ht({groupId:e}){const t=()=>{const n=Y();for(const[o,i]of n)if(o.id===e)return{group:o,...i};throw Error(`Could not find Group with id "${e}"`)};return{getLayout(){const{defaultLayoutDeferred:n,layout:o}=t();return n?{}:o},setLayout(n){const{defaultLayoutDeferred:o,derivedPanelConstraints:i,group:s,groupSize:d,layout:r,separatorToPanels:a}=t(),f=U({layout:n,panelConstraints:i});return o?r:(V(r,f)||$(s,{defaultLayoutDeferred:o,derivedPanelConstraints:i,groupSize:d,layout:f,separatorToPanels:a}),f)}}}function G(e,t){const n=fe(e),o=H(n.id,!0),i=n.separators.find(p=>p.element===e);R(i,"Matching separator not found");const s=o.separatorToPanels.get(i);R(s,"Matching panels not found");const d=s.map(p=>n.panels.indexOf(p)),r=ht({groupId:n.id}).getLayout(),a=ie({delta:t,initialLayout:r,panelConstraints:o.derivedPanelConstraints,pivotIndices:d,prevLayout:r,trigger:"keyboard"}),f=U({layout:a,panelConstraints:o.derivedPanelConstraints});V(r,f)||$(n,{defaultLayoutDeferred:o.defaultLayoutDeferred,derivedPanelConstraints:o.derivedPanelConstraints,groupSize:o.groupSize,layout:f,separatorToPanels:o.separatorToPanels})}function We(e){if(e.defaultPrevented)return;const t=e.currentTarget,n=fe(t);if(!n.disabled)switch(e.key){case"ArrowDown":{e.preventDefault(),n.orientation==="vertical"&&G(t,5);break}case"ArrowLeft":{e.preventDefault(),n.orientation==="horizontal"&&G(t,-5);break}case"ArrowRight":{e.preventDefault(),n.orientation==="horizontal"&&G(t,5);break}case"ArrowUp":{e.preventDefault(),n.orientation==="vertical"&&G(t,-5);break}case"End":{e.preventDefault(),G(t,100);break}case"Enter":{e.preventDefault();const o=fe(t),i=H(o.id,!0),{derivedPanelConstraints:s,layout:d,separatorToPanels:r}=i,a=o.separators.find(y=>y.element===t);R(a,"Matching separator not found");const f=r.get(a);R(f,"Matching panels not found");const p=f[0],b=s.find(y=>y.panelId===p.id);if(R(b,"Panel metadata not found"),b.collapsible){const y=d[p.id],C=b.collapsedSize===y?o.mutableState.expandedPanelSizes[p.id]??b.minSize:b.collapsedSize;G(t,C-y)}break}case"F6":{e.preventDefault();const o=fe(t).separators.map(d=>d.element),i=Array.from(o).findIndex(d=>d===e.currentTarget);R(i!==null,"Index not found");const s=e.shiftKey?i>0?i-1:o.length-1:i+10)return;const t=Y(),n=Ce(e,t),o=new Map;let i=!1;n.forEach(s=>{s.separator&&(i||(i=!0,s.separator.element.focus()));const d=t.get(s.group);d&&o.set(s.group,d.layout)}),Q({cursorFlags:0,hitRegions:n,initialLayoutMap:o,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}),n.length&&e.preventDefault()}const qt=e=>e,he=()=>{},mt=1,yt=2,vt=4,xt=8,Ge=3,Ve=12;let de;function Ue(){return de===void 0&&(de=!1,typeof window<"u"&&(window.navigator.userAgent.includes("Chrome")||window.navigator.userAgent.includes("Firefox"))&&(de=!0)),de}function Zt({cursorFlags:e,groups:t,state:n}){let o=0,i=0;switch(n){case"active":case"hover":t.forEach(s=>{if(!s.mutableState.disableCursor)switch(s.orientation){case"horizontal":{o++;break}case"vertical":{i++;break}}})}if(!(o===0&&i===0)){switch(n){case"active":{if(e&&Ue()){const s=(e&mt)!==0,d=(e&yt)!==0,r=(e&vt)!==0,a=(e&xt)!==0;if(s)return r?"se-resize":a?"ne-resize":"e-resize";if(d)return r?"sw-resize":a?"nw-resize":"w-resize";if(r)return"s-resize";if(a)return"n-resize"}break}}return Ue()?o>0&&i>0?"move":o>0?"ew-resize":"ns-resize":o>0&&i>0?"grab":o>0?"col-resize":"row-resize"}}const Xe=new WeakMap;function je(e){if(e.defaultView===null||e.defaultView===void 0)return;let{prevStyle:t,styleSheet:n}=Xe.get(e)??{};n===void 0&&(n=new e.defaultView.CSSStyleSheet,e.adoptedStyleSheets&&e.adoptedStyleSheets.push(n));const o=X();switch(o.state){case"active":case"hover":{const i=Zt({cursorFlags:o.cursorFlags,groups:o.hitRegions.map(d=>d.group),state:o.state}),s=`*, *:hover {cursor: ${i} !important; }`;if(t===s)return;t=s,i?n.cssRules.length===0?n.insertRule(s):n.replaceSync(s):n.cssRules.length===1&&n.deleteRule(0);break}case"inactive":{t=void 0,n.cssRules.length===1&&n.deleteRule(0);break}}Xe.set(e,{prevStyle:t,styleSheet:n})}function bt({document:e,event:t,hitRegions:n,initialLayoutMap:o,mountedGroups:i,pointerDownAtPoint:s,prevCursorFlags:d}){let r=0;n.forEach(f=>{const{group:p,groupSize:b}=f,{orientation:y,panels:C}=p,{disableCursor:S}=p.mutableState;let c=0;s?y==="horizontal"?c=(t.clientX-s.x)/b*100:c=(t.clientY-s.y)/b*100:y==="horizontal"?c=t.clientX<0?-100:100:c=t.clientY<0?-100:100;const x=o.get(p),v=i.get(p);if(!x||!v)return;const{defaultLayoutDeferred:g,derivedPanelConstraints:u,groupSize:h,layout:l,separatorToPanels:w}=v;if(u&&l&&w){const k=ie({delta:c,initialLayout:x,panelConstraints:u,pivotIndices:f.panels.map(D=>C.indexOf(D)),prevLayout:l,trigger:"mouse-or-touch"});if(V(k,l)){if(c!==0&&!S)switch(y){case"horizontal":{r|=c<0?mt:yt;break}case"vertical":{r|=c<0?vt:xt;break}}}else $(f.group,{defaultLayoutDeferred:g,derivedPanelConstraints:u,groupSize:h,layout:k,separatorToPanels:w})}});let a=0;t.movementX===0?a|=d&Ge:a|=r&Ge,t.movementY===0?a|=d&Ve:a|=r&Ve,Kt(a),je(e)}function Ye(e){const t=Y(),n=X();switch(n.state){case"active":bt({document:e.currentTarget,event:e,hitRegions:n.hitRegions,initialLayoutMap:n.initialLayoutMap,mountedGroups:t,prevCursorFlags:n.cursorFlags})}}function Je(e){if(e.defaultPrevented)return;const t=X(),n=Y();switch(t.state){case"active":{if(e.buttons===0){Q({cursorFlags:0,state:"inactive"}),t.hitRegions.forEach(o=>{const i=H(o.group.id,!0);$(o.group,i)});return}bt({document:e.currentTarget,event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n,pointerDownAtPoint:t.pointerDownAtPoint,prevCursorFlags:t.cursorFlags});break}default:{const o=Ce(e,n);o.length===0?t.state!=="inactive"&&Q({cursorFlags:0,state:"inactive"}):Q({cursorFlags:0,hitRegions:o,state:"hover"}),je(e.currentTarget);break}}}function Ke(e){if(e.relatedTarget instanceof HTMLIFrameElement)switch(X().state){case"hover":Q({cursorFlags:0,state:"inactive"})}}function qe(e){if(e.defaultPrevented||e.pointerType==="mouse"&&e.button>0)return;const t=X();switch(t.state){case"active":Q({cursorFlags:0,state:"inactive"}),t.hitRegions.length>0&&(je(e.currentTarget),t.hitRegions.forEach(n=>{const o=H(n.group.id,!0);$(n.group,o)}),e.preventDefault())}}function Ze(e){let t=0,n=0;const o={};for(const s of e)if(s.defaultSize!==void 0){t++;const d=I(s.defaultSize);n+=d,o[s.panelId]=d}else o[s.panelId]=void 0;const i=e.length-t;if(i!==0){const s=I((100-n)/i);for(const d of e)d.defaultSize===void 0&&(o[d.panelId]=s)}return o}function Qt(e,t,n){if(!n[0])return;const o=e.panels.find(a=>a.element===t);if(!o||!o.onResize)return;const i=ee({group:e}),s=e.orientation==="horizontal"?o.element.offsetWidth:o.element.offsetHeight,d=o.mutableValues.prevSize,r={asPercentage:I(s/i*100),inPixels:s};o.mutableValues.prevSize=r,o.onResize(r,o.id,d)}function en(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(e[n]!==t[n])return!1;return!0}function tn({group:e,nextGroupSize:t,prevGroupSize:n,prevLayout:o}){if(n<=0||t<=0||n===t)return o;let i=0,s=0,d=!1;const r=new Map,a=[];for(const b of e.panels){const y=o[b.id]??0;switch(b.panelConstraints.groupResizeBehavior){case"preserve-pixel-size":{d=!0;const C=y/100*n,S=I(C/t*100);r.set(b.id,S),i+=S;break}case"preserve-relative-size":default:{a.push(b.id),s+=y;break}}}if(!d||a.length===0)return o;const f=100-i,p={...o};if(r.forEach((b,y)=>{p[y]=b}),s>0)for(const b of a){const y=o[b]??0;p[b]=I(y/s*f)}else{const b=I(f/a.length);for(const y of a)p[y]=b}return p}function nn(e,t){const n=e.map(i=>i.id),o=Object.keys(t);if(n.length!==o.length)return!1;for(const i of n)if(!o.includes(i))return!1;return!0}const K=new Map;function on(e){let t=!0;R(e.element.ownerDocument.defaultView,"Cannot register an unmounted Group");const n=e.element.ownerDocument.defaultView.ResizeObserver,o=new Set,i=new Set,s=new n(S=>{for(const c of S){const{borderBoxSize:x,target:v}=c;if(v===e.element){if(t){const g=ee({group:e});if(g===0)return;const u=H(e.id);if(!u)return;const h=be(e),l=u.defaultLayoutDeferred?Ze(h):u.layout,w=tn({group:e,nextGroupSize:g,prevGroupSize:u.groupSize,prevLayout:l}),k=U({layout:w,panelConstraints:h});if(!u.defaultLayoutDeferred&&V(u.layout,k)&&en(u.derivedPanelConstraints,h)&&u.groupSize===g)return;$(e,{defaultLayoutDeferred:!1,derivedPanelConstraints:h,groupSize:g,layout:k,separatorToPanels:u.separatorToPanels})}}else Qt(e,v,x)}});s.observe(e.element),e.panels.forEach(S=>{R(!o.has(S.id),`Panel ids must be unique; id "${S.id}" was used more than once`),o.add(S.id),S.onResize&&s.observe(S.element)});const d=ee({group:e}),r=be(e),a=e.panels.map(({id:S})=>S).join(",");let f=e.mutableState.defaultLayout;f&&(nn(e.panels,f)||(f=void 0));const p=e.mutableState.layouts[a]??f??Ze(r),b=U({layout:p,panelConstraints:r}),y=e.element.ownerDocument;K.set(y,(K.get(y)??0)+1);const C=new Map;return dt(e).forEach(S=>{S.separator&&C.set(S.separator,S.panels)}),$(e,{defaultLayoutDeferred:d===0,derivedPanelConstraints:r,groupSize:d,layout:b,separatorToPanels:C}),e.separators.forEach(S=>{R(!i.has(S.id),`Separator ids must be unique; id "${S.id}" was used more than once`),i.add(S.id),S.element.addEventListener("keydown",We)}),K.get(y)===1&&(y.addEventListener("dblclick",Be,!0),y.addEventListener("pointerdown",He,!0),y.addEventListener("pointerleave",Ye),y.addEventListener("pointermove",Je),y.addEventListener("pointerout",Ke),y.addEventListener("pointerup",qe,!0)),function(){t=!1,K.set(y,Math.max(0,(K.get(y)??0)-1)),$t(e),e.separators.forEach(S=>{S.element.removeEventListener("keydown",We)}),K.get(y)||(y.removeEventListener("dblclick",Be,!0),y.removeEventListener("pointerdown",He,!0),y.removeEventListener("pointerleave",Ye),y.removeEventListener("pointermove",Je),y.removeEventListener("pointerout",Ke),y.removeEventListener("pointerup",qe,!0)),s.disconnect()}}function rn(){const[e,t]=z.useState({}),n=z.useCallback(()=>t({}),[]);return[e,n]}function Pe(e){const t=z.useId();return`${e??t}`}const J=typeof window<"u"?z.useLayoutEffect:z.useEffect;function re(e){const t=z.useRef(e);return J(()=>{t.current=e},[e]),z.useCallback((...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[t])}function Re(...e){return re(t=>{e.forEach(n=>{if(n)switch(typeof n){case"function":{n(t);break}case"object":{n.current=t;break}}})})}function De(e){const t=z.useRef({...e});return J(()=>{for(const n in e)t.current[n]=e[n]},[e]),t.current}const St=z.createContext(null);function an(e,t){const n=z.useRef({getLayout:()=>({}),setLayout:qt});z.useImperativeHandle(t,()=>n.current,[]),J(()=>{Object.assign(n.current,ht({groupId:e}))})}function zt({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:i,elementRef:s,groupRef:d,id:r,onLayoutChange:a,onLayoutChanged:f,orientation:p="horizontal",resizeTargetMinimumSize:b={coarse:20,fine:10},style:y,...C}){const S=z.useRef({onLayoutChange:{},onLayoutChanged:{}}),c=re(j=>{V(S.current.onLayoutChange,j)||(S.current.onLayoutChange=j,a==null||a(j))}),x=re(j=>{V(S.current.onLayoutChanged,j)||(S.current.onLayoutChanged=j,f==null||f(j))}),v=Pe(r),g=z.useRef(null),[u,h]=rn(),l=z.useRef({lastExpandedPanelSizes:{},layouts:{},panels:[],resizeTargetMinimumSize:b,separators:[]}),w=Re(g,s);an(v,d);const k=re((j,P)=>{const L=X(),E=Oe(j),T=H(j);if(T){let O=!1;switch(L.state){case"active":{O=L.hitRegions.some(te=>te.group===E);break}}return{flexGrow:T.layout[P]??1,pointerEvents:O?"none":void 0}}return{flexGrow:(n==null?void 0:n[P])??1}}),D=De({defaultLayout:n,disableCursor:o}),A=z.useMemo(()=>({get disableCursor(){return!!D.disableCursor},getPanelStyles:k,id:v,orientation:p,registerPanel:j=>{const P=l.current;return P.panels=Se(p,[...P.panels,j]),h(),()=>{P.panels=P.panels.filter(L=>L!==j),h()}},registerSeparator:j=>{const P=l.current;return P.separators=Se(p,[...P.separators,j]),h(),()=>{P.separators=P.separators.filter(L=>L!==j),h()}},togglePanelDisabled:(j,P)=>{const L=l.current.panels.find(O=>O.id===j);L&&(L.panelConstraints.disabled=P);const E=Oe(v),T=H(v);E&&T&&$(E,{...T,derivedPanelConstraints:be(E)})},toggleSeparatorDisabled:(j,P)=>{const L=l.current.separators.find(E=>E.id===j);L&&(L.disabled=P)}}),[k,v,h,p,D]),B=z.useRef(null);return J(()=>{const j=g.current;if(j===null)return;const P=l.current;let L;if(D.defaultLayout!==void 0&&Object.keys(D.defaultLayout).length===P.panels.length){L={};for(const ne of P.panels){const ae=D.defaultLayout[ne.id];ae!==void 0&&(L[ne.id]=ae)}}const E={disabled:!!i,element:j,id:v,mutableState:{defaultLayout:L,disableCursor:!!D.disableCursor,expandedPanelSizes:l.current.lastExpandedPanelSizes,layouts:l.current.layouts},orientation:p,panels:P.panels,resizeTargetMinimumSize:P.resizeTargetMinimumSize,separators:P.separators};B.current=E;const T=on(E),{defaultLayoutDeferred:O,derivedPanelConstraints:te,layout:Ee}=H(E.id,!0);!O&&te.length>0&&(c(Ee),x(Ee));const Ct=we(v,ne=>{const{defaultLayoutDeferred:ae,derivedPanelConstraints:Me,layout:se}=ne.next;if(ae||Me.length===0)return;const kt=E.panels.map(({id:N})=>N).join(",");E.mutableState.layouts[kt]=se,Me.forEach(N=>{if(N.collapsible){const{layout:ge}=ne.prev??{};if(ge){const Pt=M(N.collapsedSize,se[N.panelId]),Rt=M(N.collapsedSize,ge[N.panelId]);Pt&&!Rt&&(E.mutableState.expandedPanelSizes[N.panelId]=ge[N.panelId])}}});const jt=X().state!=="active";c(se),jt&&x(se)});return()=>{B.current=null,T(),Ct()}},[i,v,x,c,p,u,D]),z.useEffect(()=>{const j=B.current;j&&(j.mutableState.defaultLayout=n,j.mutableState.disableCursor=!!o)}),m.jsx(St.Provider,{value:A,children:m.jsx("div",{...C,className:t,"data-group":!0,"data-testid":v,id:v,ref:w,style:{height:"100%",width:"100%",overflow:"hidden",...y,display:"flex",flexDirection:p==="horizontal"?"row":"column",flexWrap:"nowrap",touchAction:p==="horizontal"?"pan-y":"pan-x"},children:e})})}zt.displayName="Group";function Le(){const e=z.useContext(St);return R(e,"Group Context not found; did you render a Panel or Separator outside of a Group?"),e}function sn(e,t){const{id:n}=Le(),o=z.useRef({collapse:he,expand:he,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:he});z.useImperativeHandle(t,()=>o.current,[]),J(()=>{Object.assign(o.current,gt({groupId:n,panelId:e}))})}function pe({children:e,className:t,collapsedSize:n="0%",collapsible:o=!1,defaultSize:i,disabled:s,elementRef:d,groupResizeBehavior:r="preserve-relative-size",id:a,maxSize:f="100%",minSize:p="0%",onResize:b,panelRef:y,style:C,...S}){const c=!!a,x=Pe(a),v=De({disabled:s}),g=z.useRef(null),u=Re(g,d),{getPanelStyles:h,id:l,orientation:w,registerPanel:k,togglePanelDisabled:D}=Le(),A=b!==null,B=re((P,L,E)=>{b==null||b(P,a,E)});J(()=>{const P=g.current;if(P!==null){const L={element:P,id:x,idIsStable:c,mutableValues:{expandToSize:void 0,prevSize:void 0},onResize:A?B:void 0,panelConstraints:{groupResizeBehavior:r,collapsedSize:n,collapsible:o,defaultSize:i,disabled:v.disabled,maxSize:f,minSize:p}};return k(L)}},[r,n,o,i,A,x,c,f,p,B,k,v]),z.useEffect(()=>{D(x,!!s)},[s,x,D]),sn(x,y);const j=z.useSyncExternalStore(P=>we(l,P),()=>JSON.stringify(h(l,x)),()=>JSON.stringify(h(l,x)));return m.jsx("div",{...S,"aria-disabled":s||void 0,"data-panel":!0,"data-testid":x,id:x,ref:u,style:{...ln,display:"flex",flexBasis:0,flexShrink:1,overflow:"hidden",...JSON.parse(j)},children:m.jsx("div",{className:t,style:{maxHeight:"100%",maxWidth:"100%",flexGrow:1,...C,touchAction:w==="horizontal"?"pan-y":"pan-x"},children:e})})}pe.displayName="Panel";const ln={minHeight:0,maxHeight:"100%",height:"auto",minWidth:0,maxWidth:"100%",width:"auto",border:"none",borderWidth:0,padding:0,margin:0};function un({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let i,s;const d=e[n],r=t.find(a=>a.panelId===n);if(r){const a=r.maxSize,f=r.collapsible?r.collapsedSize:r.minSize,p=[o,o+1];s=U({layout:ie({delta:f-d,initialLayout:e,panelConstraints:t,pivotIndices:p,prevLayout:e}),panelConstraints:t})[n],i=U({layout:ie({delta:a-d,initialLayout:e,panelConstraints:t,pivotIndices:p,prevLayout:e}),panelConstraints:t})[n]}return{valueControls:n,valueMax:i,valueMin:s,valueNow:d}}function ze({children:e,className:t,disabled:n,elementRef:o,id:i,style:s,...d}){const r=Pe(i),a=De({disabled:n}),[f,p]=z.useState({}),[b,y]=z.useState("inactive"),C=z.useRef(null),S=Re(C,o),{disableCursor:c,id:x,orientation:v,registerSeparator:g,toggleSeparatorDisabled:u}=Le(),h=v==="horizontal"?"vertical":"horizontal";J(()=>{const w=C.current;if(w!==null){const k={disabled:a.disabled,element:w,id:r},D=g(k),A=Jt(j=>{y(j.next.state!=="inactive"&&j.next.hitRegions.some(P=>P.separator===k)?j.next.state:"inactive")}),B=we(x,j=>{const{derivedPanelConstraints:P,layout:L,separatorToPanels:E}=j.next,T=E.get(k);if(T){const O=T[0],te=T.indexOf(O);p(un({layout:L,panelConstraints:P,panelId:O.id,panelIndex:te}))}});return()=>{A(),B(),D()}}},[x,r,g,a]),z.useEffect(()=>{u(r,!!n)},[n,r,u]);let l;return n&&!c&&(l="not-allowed"),m.jsx("div",{...d,"aria-controls":f.valueControls,"aria-disabled":n||void 0,"aria-orientation":h,"aria-valuemax":f.valueMax,"aria-valuemin":f.valueMin,"aria-valuenow":f.valueNow,children:e,className:t,"data-separator":n?"disabled":b,"data-testid":r,id:r,ref:S,role:"separator",style:{flexBasis:"auto",cursor:l,...s,flexGrow:0,flexShrink:0,touchAction:"none"},tabIndex:n?void 0:0})}ze.displayName="Separator";const dn={styles:[],mixes:[],current_mix_id:null},Qe="/immac_style_mixer/api/data";function cn(){const[e,t]=z.useState(dn),[n,o]=z.useState(!0),[i,s]=z.useState(null),d=z.useRef(null);z.useEffect(()=>{fetch(Qe).then(a=>{if(!a.ok)throw new Error(`HTTP ${a.status}`);return a.json()}).then(a=>t(a)).catch(a=>s(String(a))).finally(()=>o(!1))},[]);const r=z.useCallback(a=>{t(f=>{const p=typeof a=="function"?a(f):a;return d.current&&clearTimeout(d.current),d.current=setTimeout(()=>{fetch(Qe,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(p)}).catch(b=>console.error("[ImmacStyleMixer] Save failed",b))},400),p})},[]);return{data:e,loading:n,error:i,update:r}}async function fn(e){const t=new FormData;t.append("image",e),t.append("subfolder","immac_style_mixer/styles"),t.append("type","input");const n=await fetch("/upload/image",{method:"POST",body:t});if(!n.ok)throw new Error(`Upload failed: HTTP ${n.status}`);return(await n.json()).name}function et(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fstyles&type=input`}async function pn(e){const t=new FormData;t.append("image",e),t.append("subfolder","immac_style_mixer/mixes"),t.append("type","input");const n=await fetch("/upload/image",{method:"POST",body:t});if(!n.ok)throw new Error(`Upload failed: HTTP ${n.status}`);return(await n.json()).name}function tt(e){return`/view?filename=${encodeURIComponent(e)}&subfolder=immac_style_mixer%2Fmixes&type=input`}function wt({src:e,alt:t,onClose:n}){return z.useEffect(()=>{function o(i){i.key==="Escape"&&n()}return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[n]),Dt.createPortal(m.jsxs("div",{onClick:n,style:{position:"fixed",inset:0,zIndex:99999,background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:[m.jsx("img",{src:e,alt:t??"",onClick:o=>o.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",borderRadius:8,boxShadow:"0 8px 40px rgba(0,0,0,0.7)",cursor:"default"}}),m.jsx("button",{onClick:n,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 gn({mix:e,styles:t,isActive:n,onActivate:o,onUpdate:i,onDelete:s}){const[d,r]=z.useState(!1),[a,f]=z.useState(e.name),[p,b]=z.useState(!1),[y,C]=z.useState(!1),S=z.useRef(null);async function c(l){if(l.type.startsWith("image/")){b(!0);try{const w=await pn(l);i({...e,image_filename:w})}catch(w){console.error("[ImmacStyleMixer] Mix image upload failed",w)}finally{b(!1)}}}function x(){r(!1),a.trim()!==e.name&&i({...e,name:a.trim()||e.name})}function v(l,w){const k=e.styles.map((D,A)=>A===l?{...D,...w}:D);i({...e,styles:k})}function g(l){i({...e,styles:e.styles.filter((w,k)=>k!==l)})}function u(l){e.styles.some(w=>w.style_id===l)||i({...e,styles:[...e.styles,{style_id:l,weight:1,enabled:!0}]})}const h=t.filter(l=>!e.styles.some(w=>w.style_id===l.id));return m.jsxs("div",{style:{border:`2px solid ${n?"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:[m.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[m.jsx("input",{type:"radio",title:"Set as current mix",checked:n,onChange:o,style:{cursor:"pointer",flexShrink:0}}),d?m.jsx("input",{autoFocus:!0,value:a,onChange:l=>f(l.target.value),onBlur:x,onKeyDown:l=>{l.key==="Enter"&&x(),l.key==="Escape"&&r(!1)},style:me}):m.jsx("span",{title:"Double-click to rename",onDoubleClick:()=>{f(e.name),r(!0)},style:{fontWeight:600,flex:1,cursor:"text",fontSize:13},children:e.name}),m.jsx("button",{title:e.favorite?"Unfavorite":"Favorite",onClick:()=>i({...e,favorite:!e.favorite}),style:ce,children:e.favorite?"★":"☆"}),m.jsx("button",{title:"Delete mix",onClick:s,style:{...ce,color:"#e55"},children:"✕"})]}),m.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[m.jsx("div",{title:"Click or drop an image to set mix cover",onClick:()=>{var l;return(l=S.current)==null?void 0:l.click()},onDragOver:l=>l.preventDefault(),onDrop:l=>{l.preventDefault();const w=l.dataTransfer.files[0];w&&c(w)},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:p?"Uploading…":e.image_filename?m.jsx("img",{src:tt(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ cover image"}),!p&&e.image_filename&&m.jsx("button",{title:"View full size",onClick:l=>{l.stopPropagation(),C(!0)},style:hn,children:m.jsx("i",{className:"pi pi-search-plus"})})]}),y&&e.image_filename&&m.jsx(wt,{src:tt(e.image_filename),alt:e.name,onClose:()=>C(!1)}),m.jsx("input",{ref:S,type:"file",accept:"image/*",style:{display:"none"},onChange:l=>{var k;const w=(k=l.target.files)==null?void 0:k[0];w&&c(w),l.target.value=""}}),m.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,maxHeight:240,overflowY:"auto"},children:[e.styles.length===0&&m.jsx("div",{style:{fontSize:11,color:"#666"},children:"No styles added yet."}),e.styles.map((l,w)=>{const k=t.find(D=>D.id===l.style_id);return m.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[m.jsx("button",{title:l.enabled?"Disable":"Enable",onClick:()=>v(w,{enabled:!l.enabled}),style:{...ce,fontSize:11,padding:"2px 5px",border:"1px solid var(--p-surface-border, #555)",borderRadius:4,background:l.enabled?"var(--p-primary-color, #557755)":"transparent",color:l.enabled?"#fff":"#888",minWidth:32},children:l.enabled?"ON":"OFF"}),m.jsx("span",{style:{fontSize:12,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:(k==null?void 0:k.name)??l.style_id}),m.jsx("input",{type:"number",min:0,max:2,step:.05,value:l.weight,onChange:D=>v(w,{weight:parseFloat(D.target.value)||0}),style:{...me,width:52,textAlign:"right"}}),m.jsx("button",{title:"Remove from mix",onClick:()=>g(w),style:{...ce,color:"#e55",fontSize:13},children:"✕"})]},l.style_id)})]}),m.jsxs("select",{value:"",disabled:h.length===0,onChange:l=>{l.target.value&&u(l.target.value)},style:{...me,cursor:h.length===0?"not-allowed":"pointer",opacity:h.length===0?.45:1},title:h.length===0?"All library styles are already in this mix":"Add a style to this mix",children:[m.jsx("option",{value:"",children:h.length===0?"— all styles already added —":"+ add style…"}),h.map(l=>m.jsx("option",{value:l.id,children:l.name},l.id))]})]})}const ce={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1,flexShrink:0},hn={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)"},me={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 mn({style:e,onUpdate:t,onDelete:n}){const[o,i]=z.useState(!1),[s,d]=z.useState(!1),[r,a]=z.useState(e.name),[f,p]=z.useState(e.value),[b,y]=z.useState(!1),[C,S]=z.useState(!1),c=z.useRef(null);function x(){i(!1),r.trim()!==e.name&&t({...e,name:r.trim()||e.name})}function v(){d(!1),f!==e.value&&t({...e,value:f})}async function g(u){if(u.type.startsWith("image/")){y(!0);try{const h=await fn(u);t({...e,image_filename:h})}catch(h){console.error("[ImmacStyleMixer] Image upload failed",h)}finally{y(!1)}}}return m.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:[m.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[m.jsx("button",{title:e.favorite?"Unfavorite":"Favorite",onClick:()=>t({...e,favorite:!e.favorite}),style:nt,children:e.favorite?"★":"☆"}),m.jsx("button",{title:"Delete style",onClick:n,style:{...nt,color:"#e55"},children:"✕"})]}),m.jsxs("div",{style:{position:"relative",width:"100%",paddingBottom:"100%"},children:[m.jsx("div",{title:"Click or drop to upload image",onClick:()=>{var u;return(u=c.current)==null?void 0:u.click()},onDragOver:u=>u.preventDefault(),onDrop:u=>{u.preventDefault();const h=u.dataTransfer.files[0];h&&g(h)},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?m.jsx("img",{src:et(e.image_filename),alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover"}}):"+ image"}),!b&&e.image_filename&&m.jsx("button",{title:"View full size",onClick:u=>{u.stopPropagation(),S(!0)},style:yn,children:m.jsx("i",{className:"pi pi-search-plus"})})]}),C&&e.image_filename&&m.jsx(wt,{src:et(e.image_filename),alt:e.name,onClose:()=>S(!1)}),m.jsx("input",{ref:c,type:"file",accept:"image/*",style:{display:"none"},onChange:u=>{var l;const h=(l=u.target.files)==null?void 0:l[0];h&&g(h),u.target.value=""}}),o?m.jsx("input",{autoFocus:!0,value:r,onChange:u=>a(u.target.value),onBlur:x,onKeyDown:u=>{u.key==="Enter"&&x(),u.key==="Escape"&&i(!1)},style:ot}):m.jsx("div",{title:"Click to rename",onDoubleClick:()=>{a(e.name),i(!0)},style:{fontWeight:600,fontSize:13,cursor:"text",wordBreak:"break-word"},children:e.name}),s?m.jsx("textarea",{autoFocus:!0,value:f,onChange:u=>p(u.target.value),onBlur:v,onKeyDown:u=>{u.key==="Escape"&&d(!1)},rows:3,style:{...ot,resize:"vertical"}}):m.jsx("div",{title:"Click to edit prompt text",onDoubleClick:()=>{p(e.value),d(!0)},style:{fontSize:11,color:"#aaa",cursor:"text",wordBreak:"break-word",minHeight:32},children:e.value||m.jsx("span",{style:{color:"#555"},children:"double-click to add prompt…"})})]})}const nt={background:"none",border:"none",cursor:"pointer",fontSize:16,padding:"0 2px",color:"inherit",lineHeight:1},yn={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)"},ot={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 vn({styles:e,onUpdate:t,onDelete:n,onAdd:o}){const[i,s]=z.useState(""),[d,r]=z.useState(!1),[a,f]=z.useState("");function p(){const c=i.trim();c&&(o(c),s(""),r(!1))}const b=e.filter(c=>c.favorite),y=e.filter(c=>!c.favorite),C=[...b,...y],S=a.trim()?C.filter(c=>c.name.toLowerCase().includes(a.toLowerCase())):C;return m.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[m.jsx("input",{placeholder:"Filter styles…",value:a,onChange:c=>f(c.target.value),style:xn}),m.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:10},children:[S.map(c=>m.jsx(mn,{style:c,onUpdate:t,onDelete:()=>n(c.id)},c.id)),d?m.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:[m.jsx("input",{autoFocus:!0,placeholder:"Style name…",value:i,onChange:c=>s(c.target.value),onKeyDown:c=>{c.key==="Enter"&&p(),c.key==="Escape"&&r(!1)},style:bn}),m.jsxs("div",{style:{display:"flex",gap:6},children:[m.jsx("button",{onClick:p,style:rt,children:"Add"}),m.jsx("button",{onClick:()=>{r(!1),s("")},style:{...rt,background:"transparent",color:"#aaa"},children:"Cancel"})]})]}):m.jsx("button",{title:"Add a new style",onClick:()=>r(!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 xn={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},bn={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},rt={flex:1,background:"var(--p-primary-color, #557755)",border:"none",borderRadius:4,color:"#fff",cursor:"pointer",padding:"4px 8px",fontSize:12};function it(){return crypto.randomUUID()}function ye({title:e}){return m.jsx("div",{style:{fontWeight:700,fontSize:12,textTransform:"uppercase",letterSpacing:"0.08em",color:"#888",borderBottom:"1px solid var(--p-surface-border, #333)",paddingBottom:4,marginBottom:8,flexShrink:0},children:e})}function kn(){const{data:e,loading:t,error:n,update:o}=cn(),[i,s]=z.useState(""),d=e.mixes.find(g=>g.id===e.current_mix_id)??null,r=z.useCallback(g=>{const u={id:it(),name:g,value:"",favorite:!1,image_filename:null};o(h=>({...h,styles:[...h.styles,u]}))},[o]),a=z.useCallback(g=>{o(u=>({...u,styles:u.styles.map(h=>h.id===g.id?g:h)}))},[o]),f=z.useCallback(g=>{o(u=>({...u,styles:u.styles.filter(h=>h.id!==g),mixes:u.mixes.map(h=>({...h,styles:h.styles.filter(l=>l.style_id!==g)}))}))},[o]),p=z.useCallback(()=>{const g={id:it(),name:`Mix ${e.mixes.length+1}`,favorite:!1,image_filename:null,styles:[]};o(u=>({...u,mixes:[...u.mixes,g]}))},[e.mixes.length,o]),b=z.useCallback(g=>{o(u=>({...u,mixes:u.mixes.map(h=>h.id===g.id?g:h)}))},[o]),y=z.useCallback(g=>{o(u=>({...u,mixes:u.mixes.filter(h=>h.id!==g),current_mix_id:u.current_mix_id===g?null:u.current_mix_id}))},[o]),C=z.useCallback(g=>{o(u=>({...u,current_mix_id:g}))},[o]);if(t)return m.jsx("div",{style:ve,children:"Loading…"});if(n)return m.jsxs("div",{style:{...ve,color:"#e55"},children:["Error: ",n]});const S=e.mixes.filter(g=>g.favorite),c=e.mixes.filter(g=>!g.favorite),x=[...S,...c],v=i.trim()?x.filter(g=>g.name.toLowerCase().includes(i.toLowerCase())):x;return m.jsxs(zt,{orientation:"vertical",style:ve,children:[m.jsxs(pe,{defaultSize:20,minSize:8,style:xe,children:[m.jsx(ye,{title:"Current Mix"}),d?m.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[m.jsx("div",{style:{fontWeight:600,fontSize:14},children:d.name}),m.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[d.styles.length===0&&m.jsx("div",{style:{fontSize:12,color:"#666"},children:"No styles in this mix yet."}),d.styles.map(g=>{const u=e.styles.find(h=>h.id===g.style_id);return m.jsxs("div",{style:{border:`1px solid ${g.enabled?"var(--p-primary-color, #6c6)":"var(--p-surface-border, #444)"}`,borderRadius:6,padding:"6px 10px",background:"var(--p-surface-section, #1e1e1e)",opacity:g.enabled?1:.45,fontSize:12,display:"flex",flexDirection:"column",alignItems:"center",gap:4,minWidth:80},children:[m.jsx("span",{style:{fontWeight:600},children:(u==null?void 0:u.name)??"?"}),m.jsxs("span",{style:{color:"#aaa"},children:["×",g.weight.toFixed(2)]})]},g.style_id)})]})]}):m.jsx("div",{style:{fontSize:12,color:"#666"},children:"No mix active — select one from Mixes below."})]}),m.jsx(ze,{style:at,children:m.jsx("div",{style:st})}),m.jsxs(pe,{defaultSize:40,minSize:8,style:xe,children:[m.jsx(ye,{title:"Mixes"}),m.jsx("input",{placeholder:"Filter mixes…",value:i,onChange:g=>s(g.target.value),style:{...Sn,marginBottom:8}}),m.jsxs("div",{style:{display:"flex",gap:10,overflowX:"auto",flexWrap:"nowrap",paddingBottom:4,flex:1},children:[v.map(g=>m.jsx(gn,{mix:g,styles:e.styles,isActive:g.id===e.current_mix_id,onActivate:()=>C(g.id),onUpdate:b,onDelete:()=>y(g.id)},g.id)),m.jsx("button",{title:"Add a new mix",onClick:p,style:{minWidth:80,border:"1px dashed var(--p-surface-border, #555)",borderRadius:8,background:"transparent",color:"#666",cursor:"pointer",fontSize:22,alignSelf:"flex-start",flexShrink:0,aspectRatio:"1"},children:"+"})]})]}),m.jsx(ze,{style:at,children:m.jsx("div",{style:st})}),m.jsxs(pe,{defaultSize:40,minSize:8,style:xe,children:[m.jsx(ye,{title:"Styles"}),m.jsx(vn,{styles:e.styles,onUpdate:a,onDelete:f,onAdd:r})]})]})}const ve={height:"100%",color:"var(--p-text-color, #eee)",fontSize:13},xe={padding:"10px 12px",overflowY:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column"},at={height:6,background:"var(--p-surface-border, #333)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"ns-resize",flexShrink:0},st={width:32,height:2,borderRadius:2,background:"#666"},Sn={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,flexShrink:0};export{kn as default}; diff --git a/dist/immac_style_mixer/main.js b/dist/immac_style_mixer/main.js index 442b4b7..39bbd17 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-B4CBSKrc.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-YndEdIPa.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-B4CBSKrc.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-YndEdIPa.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/package-lock.json b/ui/package-lock.json index 631a68d..1dad65e 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -9,7 +9,8 @@ "version": "0.1.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-resizable-panels": "^4.7.0" }, "devDependencies": { "@comfyorg/comfyui-frontend-types": "^1.20.2", @@ -1713,6 +1714,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-resizable-panels": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.7.0.tgz", + "integrity": "sha512-QJTeh8KJR6lKzDwVez+WGPPUPuarIjR3ptg23thJ0G5dAMYJH4iSN1AnNY0DuSP+PgH8s9eYfwrR7AlmX6TvYA==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/rollup": { "version": "4.59.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz", diff --git a/ui/package.json b/ui/package.json index 9b03be5..b39a85f 100644 --- a/ui/package.json +++ b/ui/package.json @@ -12,7 +12,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-resizable-panels": "^4.7.0" }, "devDependencies": { "@comfyorg/comfyui-frontend-types": "^1.20.2", diff --git a/ui/src/components/StyleMixerPanel.tsx b/ui/src/components/StyleMixerPanel.tsx index 2caedbd..f9b7f0d 100644 --- a/ui/src/components/StyleMixerPanel.tsx +++ b/ui/src/components/StyleMixerPanel.tsx @@ -1,4 +1,5 @@ -import { useCallback, useRef, useState } from 'react' +import { useCallback, useState } from 'react' +import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from 'react-resizable-panels' import { useStyleMixerData } from '../hooks/useStyleMixerData' import { Mix, MixEntry, Style, StyleMixerData } from '../types' import MixCard from './MixCard' @@ -28,15 +29,10 @@ function SectionHeader({ title }: { title: string }) { ) } -const DIVIDER_PX = 6 -const MIN_FLEX = 0.08 // minimum section size as a fraction of total flex export default function StyleMixerPanel() { const { data, loading, error, update } = useStyleMixerData() const [mixFilter, setMixFilter] = useState('') - // flex-grow proportions for the three panes; sum can be anything - const [sizes, setSizes] = useState([1, 2, 2]) - const containerRef = useRef(null) const currentMix = data.mixes.find((m) => m.id === data.current_mix_id) ?? null @@ -91,39 +87,6 @@ export default function StyleMixerPanel() { update((prev) => ({ ...prev, current_mix_id: id })) }, [update]) - // ── Drag-to-resize dividers ────────────────────────────────────────────────── - - function startDrag(dividerIndex: number, startY: number) { - const container = containerRef.current - if (!container) return - const totalH = container.clientHeight - DIVIDER_PX * 2 - const snapshot = [...sizes] - const snapshotTotal = snapshot.reduce((a, b) => a + b, 0) - - function onMove(e: MouseEvent) { - const dy = e.clientY - startY - const delta = (dy / totalH) * snapshotTotal - setSizes((prev) => { - const next = [...prev] - next[dividerIndex] = Math.max(MIN_FLEX * snapshotTotal, snapshot[dividerIndex] + delta) - next[dividerIndex + 1] = Math.max(MIN_FLEX * snapshotTotal, snapshot[dividerIndex + 1] - delta) - return next - }) - } - - function onUp() { - document.removeEventListener('mousemove', onMove) - document.removeEventListener('mouseup', onUp) - document.body.style.cursor = '' - document.body.style.userSelect = '' - } - - document.body.style.cursor = 'ns-resize' - document.body.style.userSelect = 'none' - document.addEventListener('mousemove', onMove) - document.addEventListener('mouseup', onUp) - } - if (loading) return
Loading…
if (error) return
Error: {error}
@@ -135,159 +98,139 @@ export default function StyleMixerPanel() { : sortedMixes return ( -
+ - {/* ── Pane 0: Current Mix ──────────────────────────────────────────── */} -
-
- - {!currentMix ? ( -
No mix active — select one from Mixes below.
- ) : ( -
-
{currentMix.name}
-
- {currentMix.styles.length === 0 && ( -
No styles in this mix yet.
- )} - {currentMix.styles.map((entry) => { - const style = data.styles.find((s) => s.id === entry.style_id) - return ( -
- {style?.name ?? '?'} - ×{entry.weight.toFixed(2)} -
- ) - })} -
+ {/* ── Pane 0: Current Mix ─────────────────────────────────────────── */} + + + {!currentMix ? ( +
No mix active — select one from Mixes below.
+ ) : ( +
+
{currentMix.name}
+
+ {currentMix.styles.length === 0 && ( +
No styles in this mix yet.
+ )} + {currentMix.styles.map((entry) => { + const style = data.styles.find((s) => s.id === entry.style_id) + return ( +
+ {style?.name ?? '?'} + ×{entry.weight.toFixed(2)} +
+ ) + })}
- )} -
-
- - {/* ── Divider 0 ────────────────────────────────────────────────────── */} -
startDrag(0, e.clientY)} - style={dividerStyle} - title="Drag to resize" - > -
-
- - {/* ── Pane 1: Mixes ────────────────────────────────────────────────── */} -
-
- - setMixFilter(e.target.value)} - style={{ ...filterInput, marginBottom: 8 }} - /> -
- {filteredMixes.map((mix) => ( - setCurrentMix(mix.id)} - onUpdate={updateMix} - onDelete={() => deleteMix(mix.id)} - /> - ))} -
+ )} + + + +
+ + + {/* ── Pane 1: Mixes ───────────────────────────────────────────────── */} + + + setMixFilter(e.target.value)} + style={{ ...filterInput, marginBottom: 8 }} + /> +
+ {filteredMixes.map((mix) => ( + setCurrentMix(mix.id)} + onUpdate={updateMix} + onDelete={() => deleteMix(mix.id)} + /> + ))} +
-
+ - {/* ── Divider 1 ────────────────────────────────────────────────────── */} -
startDrag(1, e.clientY)} - style={dividerStyle} - title="Drag to resize" - > -
-
+ +
+ - {/* ── Pane 2: Styles ───────────────────────────────────────────────── */} -
-
- - -
-
+ {/* ── Pane 2: Styles ──────────────────────────────────────────────── */} + + + + -
+ ) } const panelShell: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', height: '100%', - overflow: 'hidden', color: 'var(--p-text-color, #eee)', fontSize: 13, } -const paneInner: React.CSSProperties = { +const panelInner: React.CSSProperties = { padding: '10px 12px', - height: '100%', overflowY: 'auto', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', } -const dividerStyle: React.CSSProperties = { - flexShrink: 0, - height: DIVIDER_PX, - cursor: 'ns-resize', +const resizeHandle: React.CSSProperties = { + height: 6, background: 'var(--p-surface-border, #333)', display: 'flex', alignItems: 'center', justifyContent: 'center', + cursor: 'ns-resize', + flexShrink: 0, } -const dividerHandle: React.CSSProperties = { +const resizeHandlePill: React.CSSProperties = { width: 32, height: 2, borderRadius: 2,