e.stopPropagation()} className={'relative bg-white rounded-2xl shadow-pop border border-slate-100 overflow-hidden '+width} style={{boxShadow:'0 12px 40px -12px rgba(8,11,18,0.25), 0 4px 12px -4px rgba(8,11,18,0.08)', animation:'slideUp 220ms'}}>

{title}

{subtitle &&

{subtitle}

}

{children}

{footer &&

{footer}

}

; } // ---- Drawer (right-side slide-in) function Drawer({open, onClose, title, subtitle, children, width='w-[480px]'}) { if (!open) return null; return

e.stopPropagation()} className={'absolute right-0 top-0 bottom-0 bg-white border-l border-slate-100 overflow-hidden flex flex-col '+width} style={{boxShadow:'-20px 0 40px -20px rgba(8,11,18,0.25)', animation:'slideLeft 220ms'}}>

{title}

{subtitle &&

{subtitle}

}

{children}

; } // ---- Input, Select, Textarea function Field({label, children, hint, error}) { return {label &&

{label}

} {children} {hint &&

{hint}

} {error &&

{error}

} ; } function Input(props) { return ; } function Select({children, ...props}) { return ; } function Textarea(props) { return

;
}

// ---- Toast system
function useToast() {
  const [toasts, setToasts] = _useState([]);
  const push = (msg, tone='ok') => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, {id, msg, tone}]);
    setTimeout(()=>setToasts(t => t.filter(x=>x.id!==id)), 3200);
  };
  const ToastHost = () => <div className="fixed bottom-5 right-5 z-[60] flex flex-col gap-2">
    {toasts.map(t => <div key={t.id}
      className={'px-3.5 py-2.5 rounded-xl shadow-pop border text-[12.5px] font-medium flex items-center gap-2 bg-white '+(
        t.tone==='danger'?'border-[#E04B4B]/30 text-[#B93535]':
        t.tone==='warn'?'border-[#EEA028]/30 text-[#D28513]':
        'border-[#2EA571]/30 text-[#1E8057]'
      )} style={{boxShadow:'0 12px 40px -12px rgba(8,11,18,0.25)', animation:'slideUp 220ms'}}>
      <span className={'w-2 h-2 rounded-full '+(t.tone==='danger'?'bg-[#E04B4B]':t.tone==='warn'?'bg-[#EEA028]':'bg-[#2EA571]')}/>
      {t.msg}
    </div>)}
  </div>;
  return {push, ToastHost};
}

// Resolve icon by string name from either Icon or ExtraIcons set
function IconOf({name, c='w-4 h-4'}) {
  const Cmp = (window.ExtraIcons && window.ExtraIcons[name]) || (window.Icon && window.Icon[name]) || null;
  if (!Cmp) return null;
  return <Cmp c={c}/>;
}

// ---- FilterSelect: custom dropdown with consistent design system styling
// Use for inline/toolbar filters. `align`: 'left' (default) or 'right' to anchor panel from the right.
function FilterSelect({label, value, onChange, options, align='left', minWidth=140}) {
  const [open, setOpen] = _useState(false);
  const ref = _useRef(null);
  _useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
  }, [open]);

return <div className="inline-flex items-center gap-1.5 text-[11px] text-ink-500 relative" ref={ref}>
    {label && <span className="font-mono uppercase tracking-wider text-[9.5px] font-semibold">{label}</span>}
    <button type="button" onClick={()=>setOpen(o=>!o)}
      className={'inline-flex items-center gap-1.5 pl-2.5 pr-2 py-1 text-[11.5px] bg-white border rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-helios-400/50 cursor-pointer transition-colors '+(open?'border-helios-400 text-ink-800 ring-2 ring-helios-400/50':'border-slate-200 text-ink-700 hover:border-slate-300')}>
      <span>{value}</span>
      <svg className={'w-3 h-3 text-ink-400 transition-transform '+(open?'rotate-180':'')} viewBox="0 0 12 12" fill="none"><path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </button>
    {open && <div className={'absolute top-full mt-1 z-30 bg-white border border-slate-200 rounded-lg shadow-[0_8px_24px_-6px_rgba(15,23,42,0.18),0_2px_6px_-2px_rgba(15,23,42,0.08)] py-1 animate-[fadeIn_120ms_ease-out] max-h-[280px] overflow-auto '+(align==='right'?'right-0':'left-auto')}
      style={{minWidth, [align==='right'?'right':'left']:0}}>
      {options.map(o => {
        const sel = o === value;
        return <button key={o} type="button" onClick={()=>{onChange(o); setOpen(false);}}
          className={'w-full flex items-center justify-between gap-2 px-2.5 py-1.5 text-[12px] text-left transition-colors '+(sel?'bg-helios-50 text-helios-700 font-semibold':'text-ink-700 hover:bg-slate-50')}>
          <span className="truncate">{o}</span>
          {sel && <svg className="w-3.5 h-3.5 shrink-0" viewBox="0 0 14 14" fill="none"><path d="M3 7.5L6 10.5L11 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>}
        </button>;
      })}
    </div>}
  </div>;
}

Object.assign(window, {ExtraIcons, IconOf, Tabs, Modal, Drawer, Field, Input, Select, Textarea, useToast, FilterSelect});