cynx-ui 1.0.0

package/ImageUpload.jsx

@@ -0,0 +1,147 @@
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Pencil, Upload, X, Trash2 } from 'lucide-react';
+import Button from './Button.jsx';
+
+export default function ImageUpload({ value, file, onChange, onRemove, label = 'Image' }) {
+  const [editOpen, setEditOpen] = useState(false);
+  const [urlInput, setUrlInput] = useState(value || '');
+  const [pendingFile, setPendingFile] = useState(null);
+  const [dragOver, setDragOver] = useState(false);
+  const [closing, setClosing] = useState(false);
+
+  const previewUrl = file ? URL.createObjectURL(file) : value;
+  const filename = file ? file.name : value ? value.split('/').pop() : null;
+  const hasImage = !!(file || value);
+
+  useEffect(() => {
+    if (!editOpen) return;
+    function onKey(e) { if (e.key === 'Escape') handleClose(); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [editOpen]);
+
+  function handleFile(f) {
+    if (f && f.type.startsWith('image/')) {
+      setPendingFile(f);
+      setUrlInput('');
+    }
+  }
+
+  function handleSave() {
+    if (pendingFile) {
+      onChange({ file: pendingFile, url: '' });
+    } else if (urlInput.trim()) {
+      onChange({ file: null, url: urlInput.trim() });
+    }
+    handleClose();
+  }
+
+  function handleClose() {
+    setClosing(true);
+    setTimeout(() => {
+      setEditOpen(false);
+      setClosing(false);
+      setPendingFile(null);
+      setUrlInput(value || '');
+    }, 260);
+  }
+
+  function openEdit() {
+    setUrlInput(value || '');
+    setPendingFile(null);
+    setEditOpen(true);
+  }
+
+  const modal = editOpen && createPortal(
+    <div className="modal-backdrop"
+      style={{ animation: `${closing ? 'backdropClose' : 'backdropFade'} .26s ease forwards` }}
+      onClick={e => { if (e.target === e.currentTarget) handleClose(); }}>
+      <div className="modal" style={{
+        maxWidth: 420,
+        animation: `${closing ? 'modalClose' : 'modalPop'} .26s cubic-bezier(.4,0,.2,1) forwards`,
+      }}>
+        <div className="modal-hdr">
+          <div className="modal-title">Edit {label}</div>
+          <Button variant="no-line" size="sm" icon={<X size={14} />} onClick={handleClose} />
+        </div>
+        <div className="modal-body" style={{ overflow: 'visible' }}>
+          <label
+            style={{
+              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads)',
+              border: `1.5px dashed ${dragOver ? 'var(--accent)' : 'var(--border)'}`,
+              background: 'var(--grey-1)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
+            }}
+            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={e => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files[0]); }}
+          >
+            <input type="file" accept="image/*,.ico" style={{ display: 'none' }}
+              onChange={e => handleFile(e.target.files[0])} />
+            {pendingFile ? (
+              <>
+                <img src={URL.createObjectURL(pendingFile)} alt="preview" style={{ height: 48, maxWidth: 160, objectFit: 'contain', borderRadius: 4 }} />
+                <div style={{ fontSize: '.76rem', fontWeight: 600, color: 'var(--accent)' }}>{pendingFile.name}</div>
+                <div style={{ fontSize: '.68rem', color: 'var(--muted)' }}>{(pendingFile.size / 1024).toFixed(1)} KB — click to change</div>
+              </>
+            ) : (
+              <>
+                <Upload size={20} style={{ color: 'var(--muted)' }} />
+                <div style={{ fontSize: '.82rem', fontWeight: 600 }}>Click or drag to upload</div>
+                <div style={{ fontSize: '.72rem', color: 'var(--muted)' }}>PNG, JPG, SVG, ICO up to 2MB</div>
+              </>
+            )}
+          </label>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 4px' }}>
+            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
+            <span style={{ fontSize: '.72rem', color: 'var(--muted)' }}>or enter URL directly</span>
+            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
+          </div>
+          <input
+            type="url" placeholder="https://example.com/logo.png"
+            value={urlInput}
+            onChange={e => { setUrlInput(e.target.value); setPendingFile(null); }}
+            style={{
+              width: '100%', padding: '8px 10px', fontSize: '.82rem',
+              border: '1px solid var(--border)', borderRadius: 'var(--rads)',
+              background: 'var(--input-bg)', color: 'var(--primary-text)',
+              fontFamily: 'var(--sans)', outline: 'none',
+            }}
+          />
+        </div>
+        <div className="modal-footer">
+          <Button variant="ghost" size="xs" onClick={handleClose}>Cancel</Button>
+          <Button variant="primary" size="xs" onClick={handleSave} disabled={!pendingFile && !urlInput.trim()}>Save</Button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
+  return (
+    <>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: 12,
+        padding: '10px 12px', borderRadius: 'var(--rads)',
+        border: '1px solid var(--border)', background: 'var(--grey-1)',
+      }}>
+        {hasImage ? (
+          <img src={previewUrl} alt={label} style={{ height: 32, maxWidth: 80, objectFit: 'contain', borderRadius: 4, flexShrink: 0 }} />
+        ) : (
+          <div style={{ width: 32, height: 32, borderRadius: 4, background: 'var(--grey-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+          </div>
+        )}
+        <div style={{ flex: 1, fontSize: '.78rem', color: filename ? 'var(--primary-text)' : 'var(--muted)', fontFamily: filename ? 'var(--mono)' : 'inherit', wordBreak: 'break-all' }}>
+          {filename || 'Not set yet'}
+        </div>
+        <Button variant="ghost" size="xs" icon={<Pencil size={12} />} onClick={openEdit} style={{ flexShrink: 0 }}>Edit</Button>
+        {hasImage && (
+          <Button variant="ghost" size="xs" icon={<Trash2 size={12} />} style={{ color: 'var(--danger)', flexShrink: 0 }} onClick={onRemove}>Remove</Button>
+        )}
+      </div>
+      {modal}
+    </>
+  );
+}

package/Input.jsx

@@ -0,0 +1,121 @@
+import { useRef } from 'react';
+
+const STYLES = `
+.cinp{display:block;width:100%;background:var(--input-bg,#fff);border:1px solid var(--bd,#d7d8e0);border-radius:var(--rads,8px);color:var(--t1,#1a1a2e);font-family:var(--f,var(--sans,inherit));font-size:13px;padding:0 11px;outline:none;transition:border-color .14s,box-shadow .14s;box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))}
+.cinp::placeholder{color:var(--t3,#9b9daa)}
+.cinp:focus{border-color:var(--accent,#f99e2c);box-shadow:0 0 0 3px rgba(249,158,44,.12),var(--shadow,0 1px 3px rgba(20,22,41,.1))}
+.cinp:disabled{opacity:.5;cursor:not-allowed;background:var(--grey-1,#f5f5f8)}
+.cinp-error{border-color:var(--danger,#f64747)}
+.cinp-error:focus{border-color:var(--danger,#f64747);box-shadow:0 0 0 3px rgba(246,71,71,.12)}
+
+.cinp-xs{height:30px;font-size:11px;padding:0 8px}
+.cinp-sm{height:32px;font-size:12px;padding:0 9px}
+.cinp-md{height:34px;font-size:13px}
+.cinp-lg{height:40px;font-size:14px;padding:0 14px}
+
+.cinp-wrap{display:flex;flex-direction:column;gap:5px}
+.cinp-wrap-xs .cinp-label{font-size:9px}
+.cinp-label{font-size:11px;font-weight:600;color:var(--t2,#797b8d);text-transform:uppercase;letter-spacing:.08em}
+.cinp-req{color:var(--danger,#f64747);margin-left:2px}
+.cinp-hint{font-size:11px;color:var(--t3,#9b9daa)}
+.cinp-err{font-size:11px;color:var(--danger,#f64747)}
+
+.cinp-icon-left{position:relative}
+.cinp-icon-left .cinp{padding-left:34px}
+.cinp-icon-left .cinp-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3,#9b9daa);pointer-events:none;line-height:0}
+.cinp-icon-left .cinp-icon svg{width:14px;height:14px}
+
+.cinp-icon-right{position:relative}
+.cinp-icon-right .cinp{padding-right:34px}
+.cinp-icon-right .cinp-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--t3,#9b9daa);pointer-events:none}
+.cinp-icon-right .cinp-icon svg{width:14px;height:14px}
+
+.cinp-wrap-clearable{position:relative}
+.cinp-wrap-clearable .cinp{padding-right:30px}
+.cinp-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:var(--t3,#9b9daa);padding:0;transition:background .12s,color .12s;line-height:0}
+.cinp-clear:hover{background:var(--grey-1,#f0f0f4);color:var(--t1,#1a1a2e)}
+
+.cinp-wrap-suffix{position:relative}
+.cinp-wrap-suffix .cinp{padding-right:40px}
+.cinp-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;pointer-events:none}
+
+textarea.cinp{resize:vertical;min-height:72px;height:auto;padding-top:8px;padding-bottom:8px;line-height:1.5}
+`;
+
+let styleInjected = false;
+
+export default function Input({
+  label,
+  required = false,
+  hint,
+  error,
+  size = 'md',
+  icon,
+  iconRight,
+  clearable = false,
+  suffix,
+  onClear,
+  className = '',
+  style = {},
+  value,
+  ...props
+}) {
+  const inputRef = useRef(null);
+
+  if (!styleInjected && typeof document !== 'undefined') {
+    const tag = document.createElement('style');
+    tag.textContent = STYLES;
+    document.head.appendChild(tag);
+    styleInjected = true;
+  }
+
+  function handleClear() {
+    if (props.onChange) props.onChange({ target: { value: '' } });
+    if (onClear) onClear();
+    inputRef.current?.focus();
+  }
+
+  const hasIconLeft = !!icon;
+  const hasIconRight = !!iconRight;
+  const showClear = clearable && !!value && !props.disabled;
+  const hasSuffix = !!suffix;
+  const showRightSlot = showClear || hasSuffix;
+
+  const wrapClasses = [
+    'cinp-wrap',
+    `cinp-wrap-${size}`,
+    hasIconLeft && 'cinp-icon-left',
+    (hasIconRight || showRightSlot) && 'cinp-icon-right',
+    showRightSlot && !hasIconRight && 'cinp-wrap-clearable',
+  ].filter(Boolean).join(' ');
+
+  const inputClass = `cinp cinp-${size}${error ? ' cinp-error' : ''}${className ? ' ' + className : ''}`;
+
+  const input = (
+    <input ref={inputRef} className={inputClass} style={style} value={value} {...props} />
+  );
+
+  return (
+    <div className={wrapClasses}>
+      {label && (
+        <label className="cinp-label">
+          {label}
+          {required && <span className="cinp-req">*</span>}
+        </label>
+      )}
+      {hasIconLeft && <span className="cinp-icon">{icon}</span>}
+      {hasIconRight && <span className="cinp-icon">{iconRight}</span>}
+      {input}
+      {showClear && (
+        <button type="button" className="cinp-clear" tabIndex={-1} onClick={handleClear}>
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+            <line x1="1" y1="1" x2="9" y2="9" />
+            <line x1="9" y1="1" x2="1" y2="9" />
+          </svg>
+        </button>
+      )}
+      {hint && !error && <span className="cinp-hint">{hint}</span>}
+      {error && <span className="cinp-err">{error}</span>}
+    </div>
+  );
+}

package/Layout.jsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react';
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+import { useBranding } from '../hooks/useBranding';
+import { getDevices } from '../lib/api';
+import useSSE from '../hooks/useSSE';
+import { SSEProvider } from '../hooks/SSEContext';
+import StatsBar from './StatsBar';
+import Input from './Input';
+import {
+  LayoutDashboard, Monitor, FileText,
+  Settings, LogOut, Bell, Search,
+  Cpu, Usb
+} from 'lucide-react';
+
+const NAV = [
+  { label: 'Dashboard',     to: '/admin/dashboard',    icon: LayoutDashboard, perm: 'dashboard.view' },
+  { label: 'Devices',       to: '/admin/devices',      icon: Monitor,         perm: 'devices.view_list' },
+  // { label: 'Audit Log',     to: '/admin/audit',        icon: FileText,        perm: 'audit.view_logs' },
+  { label: 'Firmware',      to: '/admin/firmware',     icon: Cpu,             perm: 'firmware.view_list' },
+  { label: 'Settings',      to: '/admin/settings',     icon: Settings,        permAny: ['settings.roles.view','settings.admins.view_all','settings.admins.view_own','settings.branding.app_name','settings.sso.add','settings.general.token_expiry','settings.generate.keypair','settings.view'] },
+];
+
+function BrandIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <rect x="1"   y="10" width="2.5" height="5"  rx="1" fill="rgba(255,255,255,.55)"/>
+      <rect x="4.5" y="7"  width="2.5" height="8"  rx="1" fill="rgba(255,255,255,.7)"/>
+      <rect x="8"   y="4"  width="2.5" height="11" rx="1" fill="rgba(255,255,255,.85)"/>
+      <rect x="11.5" y="1" width="2.5" height="14" rx="1" fill="#fff"/>
+    </svg>
+  );
+}
+
+export default function Layout() {
+  const { user, logout, hasPermission, hasAnyPermission } = useAuth();
+  const branding         = useBranding();
+  const navigate         = useNavigate();
+  const [stats, setStats] = useState({ total: 0, active: 0, blocked: 0, actions: 0 });
+  const [server, setServer] = useState(null);
+
+  useSSE('/api/events', {
+    'dashboard': (data) => {
+      setStats({
+        total: data.totalDevices || 0,
+        active: (data.totalDevices || 0) - (data.totalBlocked || 0),
+        blocked: data.totalBlocked || 0,
+        actions: data.totalActions || 0,
+      });
+      if (data.server) setServer(data.server);
+    },
+  });
+
+  function handleLogout() { logout(); navigate('/admin/login'); }
+
+  const initial = (user?.username || 'A')[0].toUpperCase();
+  const appName = branding.app_name || 'CAN';
+
+  return (
+    <div className="layout">
+      <aside className="sidebar">
+        <div className="sidebar-logo">
+          <div className="sidebar-logo-inner">
+            {branding.logo_light ? (
+              <img src={branding.logo_light} alt={appName}
+                style={{ height: 28, maxWidth: 120, objectFit: 'contain', flexShrink: 0 }} />
+            ) : (
+              <>
+                <div className="sidebar-logo-icon brand-icon"><BrandIcon /></div>
+                <span className="sidebar-logo-name">{appName}</span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <nav className="sidebar-nav">
+          {NAV.filter(item => {
+            if (item.permAny) return hasAnyPermission(item.permAny);
+            return !item.perm || hasPermission(item.perm);
+          }).map(item => (
+            <NavLink key={item.to} to={item.to} end={item.end}
+              className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}>
+              <item.icon size={15} />
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="sidebar-footer">
+          <div className="sidebar-user" onClick={handleLogout} title="Logout">
+            <div className="avatar">{initial}</div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="user-name">{user?.username}</div>
+              <div className="user-role">{user?.role}</div>
+            </div>
+            <LogOut size={13} color="rgba(255,255,255,.3)" />
+          </div>
+        </div>
+      </aside>
+
+      <div className="main">
+        <header className="topbar">
+          <div className="topbar-left">
+            <Input
+              size="sm"
+              placeholder="Search device"
+              icon={<Search size={14} />}
+              style={{ width: 220, background: 'var(--surface)', borderRadius: 8 }}
+            />
+          </div>
+          <div className="topbar-center">
+            <StatsBar {...stats} />
+          </div>
+          <div className="topbar-right">
+            <button className="topbar-icon-btn" title="Notifications">
+              <Bell size={18} />
+            </button>
+          </div>
+        </header>
+        <div className="content">
+          <SSEProvider value={{ devices: null, stats, server }}>
+            <Outlet />
+          </SSEProvider>
+        </div>
+      </div>
+    </div>
+  );
+}

package/LineProgress.jsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef } from 'react';
+
+const SIZES = {
+  xs: { height: 4, fontSize: '.68rem' },
+  sm: { height: 5, fontSize: '.75rem' },
+  md: { height: 6, fontSize: '.82rem' },
+  lg: { height: 8, fontSize: '.9rem' },
+  xl: { height: 10, fontSize: '1rem' },
+};
+
+export default function LineProgress({
+  value = 0,
+  size = 'md',
+  customSize,
+  color = 'var(--blue)',
+  trackColor = '#e0e0e4',
+  label = '',
+  showPercent = true,
+  animated = true,
+  rounded = true,
+  indeterminate = false,
+  speed = 1,
+  height,
+  gap = 5,
+  labelGap = 2,
+  className = '',
+  style = {},
+}) {
+  const base = SIZES[size] || SIZES.md;
+  const barHeight = height ?? (customSize || base.height);
+  const fontSize = customSize ? `${Math.max(11, customSize * 1.6)}px` : base.fontSize;
+  const pct = Math.min(100, Math.max(0, value));
+  const radius = rounded ? barHeight / 2 : 0;
+
+  const barRef = useRef(null);
+
+  // Indeterminate animation
+  useEffect(() => {
+    if (!indeterminate || !barRef.current) return;
+    let pos = -40, direction = 1, raf;
+    let lastTime = performance.now();
+
+    function tick(now) {
+      const dt = (now - lastTime) / 16.67;
+      lastTime = now;
+      pos += direction * 1.2 * speed * dt;
+      if (pos > 100) { pos = 100; direction = -1; }
+      if (pos < -40) { pos = -40; direction = 1; }
+      if (barRef.current) {
+        barRef.current.style.left = pos + '%';
+        barRef.current.style.width = '40%';
+      }
+      raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [indeterminate, speed]);
+
+  const transitionStyle = animated ? 'flex .5s cubic-bezier(0.4,0,0.2,1)' : 'none';
+
+  return (
+    <div className={className} style={{ display: 'inline-flex', flexDirection: 'column', gap: labelGap, width: '100%', ...style }}>
+      {(label || showPercent) && (
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+          {label && <span style={{ fontSize, fontWeight: 600, color: 'var(--primary-text, #1a1a2e)' }}>{label}</span>}
+          {showPercent && !indeterminate && (
+            <span style={{ fontSize, fontWeight: 600, color: 'var(--muted, #9ca3af)', fontVariantNumeric: 'tabular-nums', marginLeft: label ? 0 : 'auto' }}>
+              {Math.round(pct)}%
+            </span>
+          )}
+        </div>
+      )}
+      <div style={{
+        height: barHeight, borderRadius: radius,
+        background: 'transparent', position: 'relative',
+        display: 'flex', gap: gap, overflow: 'hidden',
+      }}>
+        {indeterminate ? (
+          <>
+            <div style={{ flex: 1, borderRadius: radius, background: trackColor }} />
+            <div
+              ref={barRef}
+              style={{
+                position: 'absolute', top: 0, height: '100%',
+                width: '40%', borderRadius: radius,
+                background: color, opacity: 0.85,
+              }}
+            />
+          </>
+        ) : (
+          <>
+            <div ref={barRef} style={{
+              flex: pct > 0 ? pct : 0, minWidth: pct > 0 ? barHeight : 0,
+              borderRadius: radius, background: color,
+              transition: transitionStyle,
+            }} />
+            {pct < 100 && (
+              <div style={{
+                flex: 100 - pct,
+                borderRadius: radius, background: trackColor,
+                transition: transitionStyle,
+              }} />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/Modal.jsx

@@ -0,0 +1,98 @@
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import Button from './Button';
+
+export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, bodyStyle }) {
+  const [closing, setClosing] = useState(false);
+  const mounted = useRef(open);
+
+  useEffect(() => {
+    if (open) {
+      mounted.current = true;
+      setClosing(false);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [open]);
+
+  function close() {
+    if (closing) return;
+    if (onBeforeClose && onBeforeClose() === false) return;
+    setClosing(true);
+    setTimeout(() => {
+      mounted.current = false;
+      setClosing(false);
+      onClose();
+    }, 260);
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) { if (e.key === 'Escape') close(); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, closing]);
+
+  if (!open && !closing) return null;
+
+  const resolvedFooter = typeof footer === 'function' ? footer(close) : footer;
+  const resolvedChildren = typeof children === 'function' ? children(close) : children;
+
+  return createPortal(
+    <div
+      className="modal-backdrop"
+      style={{ animation: `${closing ? 'modalFadeOut' : 'modalFadeIn'} .26s ease forwards` }}
+      onMouseDown={e => { if (e.target === e.currentTarget) close(); }}
+    >
+      <div
+        className="modal-card"
+        style={{
+          maxWidth,
+          animation: `${closing ? 'modalCardOut' : 'modalCardIn'} .26s cubic-bezier(.4,0,.2,1) forwards`,
+        }}
+        onMouseDown={e => e.stopPropagation()}
+      >
+        <div className="modal-hdr">
+          <span className="modal-title">{title}</span>
+          <button className="modal-close" onClick={close}>
+            <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor"
+              strokeWidth="2" strokeLinecap="round">
+              <line x1="1.5" y1="1.5" x2="11.5" y2="11.5"/>
+              <line x1="11.5" y1="1.5" x2="1.5" y2="11.5"/>
+            </svg>
+          </button>
+        </div>
+        <div className="modal-body" style={{ overflowX: 'hidden', overflowY: 'auto', flex: 1, minHeight: 0, ...bodyStyle }}>{resolvedChildren}</div>
+        {resolvedFooter && <div className="modal-footer">{resolvedFooter}</div>}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export function Confirm({ open, onClose, onConfirm, title, message, variant = 'danger', confirmLabel = 'Confirm', loading = false }) {
+  const iconColor  = { danger: 'var(--danger)', warning: 'var(--accent)', info: 'var(--blue)' }[variant] || 'var(--danger)';
+  const btnVariant = variant === 'danger' ? 'danger' : 'primary';
+
+  const icon = variant === 'danger'
+    ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+    : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>;
+
+  return (
+    <Modal open={open} onClose={onClose} title="" maxWidth={400}
+      footer={
+        <>
+          <Button variant="ghost" size="sm" onClick={onClose} disabled={loading}>Cancel</Button>
+          <Button variant={btnVariant} size="sm" onClick={onConfirm} disabled={loading}>
+            {loading ? 'Please wait...' : confirmLabel}
+          </Button>
+        </>
+      }>
+      <div style={{ textAlign: 'center', padding: '4px 0 8px' }}>
+        <div className={`confirm-icon ${variant}`}>{icon}</div>
+        <div style={{ fontSize: '.9rem', fontWeight: 700, marginBottom: 8 }}>{title}</div>
+        {message && <div style={{ fontSize: '.8rem', color: 'var(--muted)', lineHeight: 1.5 }}>{message}</div>}
+      </div>
+    </Modal>
+  );
+}