cynx-ui 1.0.0

package/BrandingCard.jsx

@@ -0,0 +1,145 @@
+import { useState, useEffect } from 'react';
+import { Pencil, Trash2, Upload } from 'lucide-react';
+import { Modal } from './Modal';
+import Input from './Input';
+import Button from './Button';
+
+export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, option, cardStyle }) {
+  const [editOpen, setEditOpen] = useState(false);
+  const [pendingFile, setPendingFile] = useState(null);
+  const [pendingUrl, setPendingUrl]     = useState('');
+  const [uploading, setUploading]       = useState(false);
+  const [previewOpen, setPreviewOpen]   = useState(false);
+
+  const fullview = option === 'fullview';
+
+  // Pre-fill URL when modal opens
+  useEffect(() => {
+    if (editOpen && value && !pendingFile) setPendingUrl(value);
+  }, [editOpen]);
+
+  const hasExisting = !!value;
+  const filename = pendingFile ? pendingFile.name : value?.split('/').pop() || null;
+  const previewUrl = pendingFile ? URL.createObjectURL(pendingFile) : value;
+
+  function handleFileDrop(file) {
+    setPendingFile(file);
+    setPendingUrl('');
+  }
+
+  async function handleSave() {
+    setUploading(true);
+    try {
+      if (pendingFile) {
+        await onUpload(pendingFile);
+      } else if (pendingUrl) {
+        await onUpload(pendingUrl);
+      }
+      setEditOpen(false);
+      setPendingFile(null);
+      setPendingUrl('');
+    } catch (e) {
+      // error handled by parent toast
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function handleRemove() {
+    setPendingFile(null);
+    setPendingUrl('');
+    onRemove();
+  }
+
+  return (
+    <div>
+      <div style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '10px 12px', borderRadius: 'var(--rads)',
+        border: '1px solid var(--border-light)', background: 'var(--surface)',
+        boxShadow: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)',
+        ...cardStyle,
+      }}>
+        {(hasExisting || previewUrl) ? (
+          <img src={previewUrl} alt={label} onClick={() => fullview && setPreviewOpen(true)}
+            style={{ height: fullview ? 24 : 32, width: fullview ? 'auto' : 32, objectFit: 'contain', borderRadius: 4, flexShrink: 0, cursor: fullview ? 'pointer' : 'default' }} />
+        ) : (
+          <div style={{ width: fullview ? 24 : 32, height: fullview ? 24 : 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>
+        )}
+        {!fullview && (
+          <div style={{ flex: 1, fontSize: '.78rem', color: filename ? 'var(--primary-text)' : 'var(--muted)', fontFamily: filename ? 'var(--mono)' : 'inherit', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {filename || 'Not set'}
+          </div>
+        )}
+        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+          <Button variant="ghost" size="xs" type="button" icon={<Pencil size={11} />} onClick={() => setEditOpen(true)} style={cardStyle ? { background: '#fff', color: '#333' } : undefined}>Edit</Button>
+          {hasExisting && (
+            <Button variant="ghost" size="xs" type="button" icon={<Trash2 size={11} />} style={cardStyle ? { background: '#fff', color: 'var(--danger)' } : { color: 'var(--danger)' }}
+              onClick={handleRemove} disabled={saving}>Remove</Button>
+          )}
+        </div>
+      </div>
+      <div style={{ fontSize: '.68rem', color: 'var(--muted)', marginTop: 4 }}>{hint}</div>
+
+      {previewOpen && (
+        <Modal title={label} open={previewOpen} onClose={() => setPreviewOpen(false)}
+          footer={<Button variant="ghost" size="sm" onClick={() => setPreviewOpen(false)}>Close</Button>}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
+            <img src={previewUrl} alt={label} style={{ maxWidth: '100%', maxHeight: 400, objectFit: 'contain', borderRadius: 6 }} />
+          </div>
+        </Modal>
+      )}
+
+      {editOpen && (
+        <Modal title={`Edit ${label}`} open={editOpen} onClose={() => { setEditOpen(false); setPendingFile(null); setPendingUrl(''); }}
+          footer={
+            <>
+              <Button variant="ghost" size="sm" onClick={() => { setEditOpen(false); setPendingFile(null); setPendingUrl(''); }}>Cancel</Button>
+              <Button variant="primary" size="sm" disabled={saving || uploading} onClick={handleSave}>
+                {uploading ? 'Uploading...' : saving ? 'Saving...' : 'Save'}
+              </Button>
+            </>
+          }>
+          <label
+            onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--accent)'; }}
+            onDragLeave={e => { e.currentTarget.style.borderColor = pendingFile ? 'var(--accent)' : 'var(--border)'; }}
+            onDrop={e => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) handleFileDrop(f); }}
+            style={{
+              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads)',
+              border: `1.5px dashed ${pendingFile ? 'var(--accent)' : 'var(--border)'}`,
+              background: 'var(--grey-1)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
+            }}>
+            <input type="file" accept="image/*,.ico" style={{ display: 'none' }}
+              onChange={e => { const f = e.target.files[0]; if (f) handleFileDrop(f); }} />
+            {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={pendingUrl}
+            onChange={e => { setPendingUrl(e.target.value); setPendingFile(null); }}
+            style={{ width: '100%', fontSize: '.82rem' }} />
+        </Modal>
+      )}
+    </div>
+  );
+}

package/Button.jsx

@@ -0,0 +1,76 @@
+import { Spinner } from './Spinner';
+
+const STYLES = `
+.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--rads,8px);font-family:var(--f,var(--sans,inherit));font-weight:500;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:all .14s;letter-spacing:-.01em;outline:none;box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))}
+.cbtn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
+.cbtn:active:not(:disabled){ }
+
+.cbtn-xs{padding:4px 8px;font-size:12px;height:28px}
+.cbtn-sm{padding:4px 8px;font-size:12px;height:32px}
+.cbtn-md{padding:8px 16px;font-size:13px;height:38px}
+.cbtn-lg{padding:10px 20px;font-size:14px;height:44px}
+.cbtn-icon{padding:0;width:30px;height:30px;border-radius:var(--rads,8px);display:inline-flex;align-items:center;justify-content:center;line-height:0}
+.cbtn-icon svg{margin:-1px 0 0 -1px}
+
+.cbtn-default{background:#fff;color:var(--def-btn-text,#0f111c);border-color:var(--bd,#d7d8e0)}
+.cbtn-default:hover:not(:disabled){background:var(--grey-1,#f5f5f8);color:var(--def-btn-text,#0f111c);border-color:var(--grey-2,#ebebee)}
+.cbtn-default:active:not(:disabled){background:var(--grey-1,#f5f5f8);color:var(--def-btn-text,#0f111c);border-color:var(--grey-2,#ebebee)}
+.cbtn-primary{background:var(--accent,#f99e2c);color:#fff;border-color:transparent}
+.cbtn-primary:hover:not(:disabled){background:var(--accent-hover,#e68d1f);box-shadow:0 2px 8px rgba(249,158,44,.35)}
+.cbtn-secondary{background:var(--blue-bg,rgba(39,130,228,.1));color:var(--blue,#2782e4);border-color:rgba(39,130,228,.2)}
+.cbtn-secondary:hover:not(:disabled){background:rgba(39,130,228,.18);box-shadow:0 2px 8px rgba(39,130,228,.25)}
+.cbtn-danger{background:var(--danger-bg,rgba(246,71,71,.1));color:var(--danger,#f64747);border-color:rgba(246,71,71,.2)}
+.cbtn-danger:hover:not(:disabled){background:rgba(246,71,71,.18);box-shadow:0 2px 8px rgba(246,71,71,.25)}
+.cbtn-success{background:var(--success-bg,rgba(39,174,96,.1));color:var(--success,#27ae60);border-color:rgba(39,174,96,.2)}
+.cbtn-success:hover:not(:disabled){background:rgba(39,174,96,.18);box-shadow:0 2px 8px rgba(39,174,96,.25)}
+.cbtn-warning{background:var(--accent-bg,rgba(249,158,44,.1));color:var(--accent,#f99e2c);border-color:var(--accent-border,rgba(249,158,44,.25))}
+.cbtn-warning:hover:not(:disabled){background:rgba(249,158,44,.18);box-shadow:0 2px 8px rgba(249,158,44,.25)}
+.cbtn-ghost{background:transparent;color:var(--t2,#797b8d);border-color:var(--bd,#d7d8e0)}
+.cbtn-ghost:hover:not(:disabled){color:var(--t1,#1a1a2e);background:var(--grey-1,#f5f5f8);border-color:var(--grey-2,#ebebee)}
+.cbtn-outline{background:transparent;color:var(--accent,#f99e2c);border-color:var(--accent,#f99e2c)}
+.cbtn-outline:hover:not(:disabled){background:var(--accent-bg,rgba(249,158,44,.1))}
+.cbtn-link{background:transparent;color:var(--accent,#f99e2c);border-color:transparent;padding-left:4px;padding-right:4px;box-shadow:none}
+.cbtn-link:hover:not(:disabled){text-decoration:underline}
+.cbtn-no-line{background:none;border:none!important;box-shadow:none!important;color:var(--t3,#8a96b0);padding:6px 14px;border-radius:var(--rmd,8px);transition:color var(--tr,150ms),background var(--tr,150ms)}
+.cbtn-no-line:hover:not(:disabled){color:var(--p,var(--accent,#f99e2c));background:var(--pd,var(--accent-bg,rgba(249,158,44,.1)))}
+`;
+
+let styleInjected = false;
+
+export default function Button({
+  children,
+  variant = 'default',
+  size = 'md',
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  loading = false,
+  onClick = null,
+  style = {},
+  className = '',
+  ...props
+}) {
+  if (!styleInjected && typeof document !== 'undefined') {
+    const tag = document.createElement('style');
+    tag.textContent = STYLES;
+    document.head.appendChild(tag);
+    styleInjected = true;
+  }
+
+  const classes = `cbtn cbtn-${variant} cbtn-${size}${loading ? ' cbtn-loading' : ''}${className ? ' ' + className : ''}`;
+
+  return (
+    <button
+      className={classes}
+      disabled={disabled || loading}
+      onClick={onClick}
+      style={style}
+      {...props}
+    >
+      {loading && <Spinner size={14} inline color="currentColor" />}
+      {!loading && icon && icon}
+      {!loading && children}
+      {!loading && iconRight && iconRight}
+    </button>
+  );
+}

package/Card.jsx

@@ -0,0 +1,62 @@
+import { Pagination } from './Pagination';
+
+export function PageShell({ title, children }) {
+  return (
+    <div className="page-shell" style={{ padding: '20px 24px' }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCard({ children }) {
+  return <div className="table-card">{children}</div>;
+}
+export function TableCardFilters({ children }) {
+  return <div className="table-card-filters">{children}</div>;
+}
+export function TableCardBody({ children }) {
+  return <div className="table-card-body">{children}</div>;
+}
+export function TableCardFooter({ total, page, limit, pages, onChange }) {
+  const from = total === 0 ? 0 : (page - 1) * limit + 1;
+  const to   = Math.min(page * limit, total);
+  return (
+    <div className="table-card-footer">
+      <span className="table-card-footer-count">
+        {total === 0 ? 'No records' : `${from}–${to} of ${total}`}
+      </span>
+      <Pagination page={page} pages={pages} onChange={onChange} />
+    </div>
+  );
+}
+
+export function CardHdr({ title, icon: Icon, tabs, children }) {
+  return (
+    <div className="card-hdr">
+      <div className="card-title">
+        {Icon && <Icon size={14} />}
+        {title}
+        {tabs && <span style={{ marginLeft: 12 }}>{tabs}</span>}
+      </div>
+      {children && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>}
+    </div>
+  );
+}
+
+export function StatCard({ label, value, sub }) {
+  return (
+    <div className="stat">
+      <div className="stat-label">{label}</div>
+      <div className="stat-val">{value ?? '—'}</div>
+      {sub && <div className="stat-sub">{sub}</div>}
+    </div>
+  );
+}
+export function StatCardSkeleton() {
+  return (
+    <div className="stat-skeleton">
+      <div className="skeleton skeleton-text short" style={{ marginBottom: 10 }} />
+      <div className="skeleton skeleton-text mid" style={{ height: 28, marginBottom: 6 }} />
+    </div>
+  );
+}

package/Checkbox.jsx

@@ -0,0 +1,59 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Checkbox — custom styled checkbox component
+ * Props:
+ *   checked:      bool
+ *   indeterminate: bool — shows dash instead of check
+ *   onChange:     fn(checked)
+ *   disabled:     bool
+ *   size:         'sm' | 'md' (default 'md')
+ *   label:        string — optional label text
+ *   style:        object — optional extra styles on wrapper
+ */
+export default function Checkbox({ checked, indeterminate, onChange, disabled = false, size = 'md', label, style }) {
+  const inputRef = useRef(null);
+  useEffect(() => { if (inputRef.current) inputRef.current.indeterminate = !!indeterminate; }, [indeterminate]);
+
+  const dims = size === 'sm' ? { w: 14, h: 14, icon: 8 } : { w: 16, h: 16, icon: 10 };
+
+  return (
+    <label style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      userSelect: 'none', margin: 0, padding: 0, lineHeight: 1,
+      opacity: disabled ? 0.45 : 1,
+      ...style,
+    }}>
+      <span style={{
+        position: 'relative', width: dims.w, height: dims.h, flexShrink: 0,
+        border: `1.5px solid ${checked || indeterminate ? 'var(--accent)' : 'var(--border)'}`,
+        borderRadius: size === 'sm' ? 3 : 4,
+        background: checked || indeterminate ? 'var(--accent)' : 'var(--input-bg)',
+        transition: 'all .14s',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      }}>
+        {indeterminate ? (
+          <svg style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+            width={dims.icon} height={dims.icon} viewBox="0 0 10 10" fill="none">
+            <line x1="2" y1="5" x2="8" y2="5" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
+          </svg>
+        ) : checked ? (
+          <svg style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+            width={dims.icon} height={dims.icon} viewBox="0 0 10 10" fill="none">
+            <polyline points="1.5,5 4,7.5 8.5,2.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        ) : null}
+      </span>
+      {label && <span style={{ fontSize: size === 'sm' ? '.72rem' : '.78rem' }}>{label}</span>}
+      <input
+        ref={inputRef}
+        type="checkbox"
+        checked={!!checked}
+        disabled={disabled}
+        onChange={e => onChange?.(e.target.checked)}
+        style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
+      />
+    </label>
+  );
+}

package/ChipSelect.jsx

@@ -0,0 +1,54 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * ChipSelect — reusable multi-select chip/toggle group
+ * Props:
+ *   options:    [{ value, label }]
+ *   value:      string[] — selected values
+ *   onChange:   fn(string[]) — called with updated selection
+ *   size:       'sm' | 'md' (default 'md')
+ */
+export default function ChipSelect({ options, value = [], onChange, size = 'md' }) {
+  const dims = size === 'sm' ? { h: 14, icon: 8, px: 10, py: 5, gap: 6, font: '.72rem' } : { h: 16, icon: 10, px: 14, py: 7, gap: 7, font: '.78rem' };
+
+  function toggle(val) {
+    const next = value.includes(val) ? value.filter(v => v !== val) : [...value, val];
+    onChange?.(next);
+  }
+
+  return (
+    <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
+      {options.map(opt => {
+        const active = value.includes(opt.value);
+        return (
+          <div key={opt.value}
+            onClick={() => toggle(opt.value)}
+            style={{
+              display:'flex', alignItems:'center', gap: dims.gap,
+              padding:`${dims.py}px ${dims.px}px`, cursor:'pointer',
+              borderRadius: 8,
+              background: 'var(--grey-1)',
+              transition: 'all .14s',
+              userSelect: 'none',
+            }}>
+            <span style={{
+              position:'relative', width: dims.h, height: dims.h, flexShrink:0,
+              borderRadius: 4,
+              background: active ? 'var(--accent)' : 'var(--input-bg)',
+              border: `1.5px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
+              transition: 'all .14s',
+              display:'flex', alignItems:'center', justifyContent:'center',
+            }}>
+              {active && (
+                <svg width={dims.icon} height={dims.icon} viewBox="0 0 10 10" fill="none">
+                  <polyline points="1.5,5 4,7.5 8.5,2.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              )}
+            </span>
+            <span style={{ fontSize: dims.font, fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', color: 'var(--muted)' }}>{opt.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/CircularProgress.jsx

@@ -0,0 +1,163 @@
+import { useEffect, useRef } from 'react';
+
+const SIZES = {
+  xs: { svg: 48, stroke: 4, fontSize: '.7rem' },
+  sm: { svg: 64, stroke: 5, fontSize: '.85rem' },
+  md: { svg: 80, stroke: 6, fontSize: '1rem' },
+  lg: { svg: 100, stroke: 7, fontSize: '1.15rem' },
+  xl: { svg: 120, stroke: 8, fontSize: '1.3rem' },
+};
+
+export default function CircularProgress({
+  value = 0,
+  size = 'md',
+  customSize,
+  color = 'var(--blue)',
+  trackColor = '#e0e0e4',
+  label = '',
+  showPercent = true,
+  animated = true,
+  rounded = false,
+  indeterminate = false,
+  speed = 1,
+  strokeWidth,
+  gap = 4,
+  className = '',
+  style = {},
+}) {
+  const base = SIZES[size] || SIZES.md;
+  const svg = customSize || base.svg;
+  const stroke = strokeWidth ?? (customSize ? Math.max(3, svg * 0.06) : base.stroke);
+  const fontSize = customSize ? `${Math.max(11, svg * 0.13)}px` : base.fontSize;
+  const cx = svg / 2;
+  const cy = svg / 2;
+  const r = (svg - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  const pct = Math.min(100, Math.max(0, value));
+  const BIG = c * 4;
+  const cap = rounded ? 'round' : 'butt';
+
+  const userGap = gap !== undefined ? gap : (rounded ? c * 0.05 : c * 0.03);
+  const capOverrun = rounded ? stroke : 0;
+  const gapSize = userGap + capOverrun;
+  const total = c - 2 * gapSize;
+
+  const isFull = pct >= 100;
+  const isEmpty = pct <= 0;
+
+  let indDash, indOffset, trackDash, trackOffset, indOpacity;
+  let indStartDeg, indEndDeg, trackStartDeg, trackEndDeg;
+
+  if (isEmpty) {
+    indDash = `0,${BIG}`; indOffset = 0;
+    trackDash = `${c},${BIG}`; trackOffset = 0;
+    indOpacity = 0;
+    indStartDeg = indEndDeg = trackStartDeg = trackEndDeg = 0;
+  } else if (isFull) {
+    indDash = `${c + stroke * 2},${BIG}`; indOffset = 0;
+    trackDash = `0,${BIG}`; trackOffset = 0;
+    indOpacity = 1;
+    indStartDeg = 0; indEndDeg = 360;
+    trackStartDeg = trackEndDeg = 0;
+  } else {
+    const activeLen = (pct / 100) * total;
+    const inactiveLen = total - activeLen;
+    indDash = `${activeLen},${BIG}`; indOffset = 0;
+    trackDash = `${inactiveLen},${BIG}`; trackOffset = -(activeLen + gapSize);
+    indOpacity = 1;
+    indStartDeg = 0; indEndDeg = (pct / 100) * 360;
+    trackStartDeg = (pct / 100) * 360; trackEndDeg = 360;
+  }
+
+  const gRef = useRef(null);
+  const indRef = useRef(null);
+  const trackRef = useRef(null);
+
+  useEffect(() => {
+    if (!indeterminate) return;
+    const capRad = (180 / Math.PI) * (stroke / r) / 2;
+    const gapRad = (180 / Math.PI) * (gapSize / r);
+    const gapArcLen = (capRad + gapRad) / 360 * c;
+    let angle = -90, arcFrac = 0.45, arcDir = 1, raf;
+    let lastTime = performance.now();
+    function tick(now) {
+      const dt = (now - lastTime) / 16.67;
+      lastTime = now;
+      angle = (angle + 3.6 * speed * dt) % 360;
+      arcFrac += 0.006 * arcDir * speed * dt;
+      if (arcFrac >= 0.72) { arcFrac = 0.72; arcDir = -1; }
+      if (arcFrac <= 0.18) { arcFrac = 0.18; arcDir = 1; }
+      const indLen = c * arcFrac;
+      const trackLen = Math.max(0, c - indLen - gapArcLen * 2);
+      if (gRef.current) gRef.current.style.transform = `rotate(${angle}deg)`;
+      if (indRef.current) indRef.current.setAttribute('stroke-dasharray', `${indLen.toFixed(2)},9999`);
+      if (trackRef.current) {
+        trackRef.current.setAttribute('stroke-dasharray', `${trackLen.toFixed(2)},9999`);
+        trackRef.current.setAttribute('stroke-dashoffset', `${(-(indLen + gapArcLen)).toFixed(2)}`);
+      }
+      raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [indeterminate, c, stroke, r, gapSize, speed]);
+
+  return (
+    <div className={className} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4, ...style }}>
+      <div style={{ position: 'relative', width: svg, height: svg }}>
+        <svg width={svg} height={svg} viewBox={`0 0 ${svg} ${svg}`}>
+          {indeterminate ? (
+            <g ref={gRef} style={{ transformOrigin: `${cx}px ${cy}px` }}>
+              <circle
+                ref={trackRef}
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={trackColor} strokeWidth={stroke} strokeLinecap={cap}
+              />
+              <circle
+                ref={indRef}
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={color} strokeWidth={stroke} strokeLinecap={cap}
+              />
+            </g>
+          ) : (
+            <>
+              <circle
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={trackColor} strokeWidth={stroke}
+                strokeLinecap={cap}
+                strokeDasharray={trackDash} strokeDashoffset={trackOffset}
+                style={{
+                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)' : 'none',
+                }}
+              />
+              <circle
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={color} strokeWidth={stroke}
+                strokeLinecap={cap}
+                strokeDasharray={indDash} strokeDashoffset={indOffset}
+                style={{
+                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                  opacity: indOpacity,
+                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), opacity .2s' : 'none',
+                }}
+              />
+            </>
+          )}
+        </svg>
+        {showPercent && !indeterminate && (
+          <div style={{
+            position: 'absolute', inset: 0,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            fontSize, fontWeight: 600, color: 'var(--primary-text)',
+            fontVariantNumeric: 'tabular-nums',
+          }}>
+            {Math.round(pct)}%
+          </div>
+        )}
+      </div>
+      {label && (
+        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+      )}
+    </div>
+  );
+}

package/Confirm.jsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import Button from './Button.jsx';
+
+let _show = null;
+
+export function ConfirmRoot() {
+  const [state,   setState]   = useState(null);
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    _show = (opts) => new Promise(resolve => {
+      setClosing(false);
+      setState({ ...opts, resolve });
+    });
+    return () => { _show = null; };
+  }, []);
+
+  if (!state) return null;
+
+  function answer(val) {
+    setClosing(true);
+    setTimeout(() => { state.resolve(val); setState(null); }, 250);
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0,
+        background: 'rgba(20,22,41,.5)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 99999, padding: 20,
+        animation: `${closing ? 'backdropClose' : 'backdropFade'} .25s ease forwards`,
+      }}
+      onClick={e => e.target === e.currentTarget && answer(false)}
+    >
+      <div style={{
+        background: 'var(--surface)', border: '1px solid var(--border)',
+        borderRadius: 14, width: '100%', maxWidth: 400,
+        boxShadow: '0 20px 60px rgba(0,0,0,.4)',
+        animation: `${closing ? 'modalClose' : 'modalPop'} .25s cubic-bezier(.4,0,.2,1) forwards`,
+      }}>
+        <div style={{ padding: '20px 20px 0', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
+          <div style={{
+            width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
+            background: state.danger ? 'rgba(246,71,71,.1)' : 'rgba(249,158,44,.1)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+            <AlertTriangle size={17} color={state.danger ? 'var(--danger)' : 'var(--warning)'} />
+          </div>
+          <div>
+            <div style={{ fontWeight: 700, fontSize: '.9rem', marginBottom: 6 }}>
+              {state.title || 'Are you sure?'}
+            </div>
+            <div style={{ fontSize: '.8rem', color: 'var(--muted)', lineHeight: 1.6 }}>
+              {state.message}
+            </div>
+          </div>
+        </div>
+        <div style={{
+          display: 'flex', justifyContent: 'flex-end', gap: 8,
+          padding: '16px 20px', marginTop: 18,
+          borderTop: '1px solid var(--border-light)',
+          background: 'var(--grey-1)', borderRadius: '0 0 14px 14px',
+        }}>
+          <Button variant="ghost" size="sm" onClick={() => answer(false)}>Cancel</Button>
+          <Button variant={state.danger ? 'ghost' : 'primary'} size="sm" style={state.danger ? { background: 'var(--danger)', color: '#fff', border: 'none' } : {}} onClick={() => answer(true)}>
+            {state.confirmLabel || 'Confirm'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function confirm(opts) {
+  if (!_show) return Promise.resolve(false);
+  return _show(typeof opts === 'string' ? { message: opts } : opts);
+}