cynx-ui 1.0.0

package/DatePicker.jsx

@@ -0,0 +1,262 @@
+import { useState, useRef, useEffect } from 'react';
+import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
+
+// DatePicker — reusable date picker component
+// Props:
+//   value        – Date object or null
+//   onChange     – called with Date object
+//   placeholder  – string shown when no date selected
+//   badges       – object { 'YYYY-MM-DD': { dot: true, color: 'var(--accent)' } } for day badges
+//   minDate      – Date object, days before this are disabled
+//   maxDate      – Date object, days after this are disabled
+//   disabled     – boolean
+//   style        – container style overrides
+
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function pad(n) { return String(n).padStart(2, '0'); }
+function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
+function isSameDay(a, b) { return a && b && a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate(); }
+function isToday(y, m, d) { const t = new Date(); return t.getFullYear()===y && t.getMonth()===m && t.getDate()===d; }
+
+export function DatePicker({ value, onChange, placeholder = 'Select date', badges = {}, minDate, maxDate, disabled, style }) {
+  const [open,    setOpen]    = useState(false);
+  const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
+  const [cursor,  setCursor]  = useState(() => value ? new Date(value) : new Date());
+  const ref = useRef(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    function close(e) { if (!ref.current?.contains(e.target)) { setOpen(false); setView('day'); } }
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  // Sync cursor when value changes externally
+  useEffect(() => { if (value) setCursor(new Date(value)); }, [value]);
+
+  function pick(date) {
+    onChange?.(date);
+    setOpen(false);
+    setView('day');
+  }
+
+  function nav(dir) {
+    const c = new Date(cursor);
+    if (view === 'day')   { c.setMonth(c.getMonth() + dir); }
+    if (view === 'month') { c.setFullYear(c.getFullYear() + dir); }
+    if (view === 'year')  { c.setFullYear(c.getFullYear() + dir * 12); }
+    setCursor(c);
+  }
+
+  function cycleView() {
+    setView(v => v === 'day' ? 'month' : v === 'month' ? 'year' : 'year');
+  }
+
+  const formatted = value
+    ? `${MONTHS[value.getMonth()]} ${value.getDate()}, ${value.getFullYear()}`
+    : null;
+
+  // ── Day grid ─────────────────────────────────────────────────
+  function renderDays() {
+    const y = cursor.getFullYear(), m = cursor.getMonth();
+    const first = new Date(y, m, 1).getDay(); // 0=Sun
+    const offset = first === 0 ? 6 : first === 1 ? 7 : first - 1; // 0=Sun→6, 1=Mon→7(show prev week), else Mon-start
+    const daysInMonth = new Date(y, m + 1, 0).getDate();
+    const prevDays = new Date(y, m, 0).getDate();
+
+    const cells = [];
+    // Prev month filler
+    for (let i = offset - 1; i >= 0; i--)
+      cells.push({ day: prevDays - i, cur: false, next: false });
+    // Current month
+    for (let d = 1; d <= daysInMonth; d++)
+      cells.push({ day: d, cur: true, next: false });
+    // Next month filler — complete last row + always show at least one full next month week
+    const totalSoFar = cells.length;
+    let remaining = (7 - (totalSoFar % 7)) % 7;
+    if (remaining === 0) remaining = 7;
+    for (let d = 1; d <= remaining; d++)
+      cells.push({ day: d, cur: false, next: true });
+
+    return (
+      <div>
+        {/* Weekday headers */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 4 }}>
+          {DAYS.map(d => (
+            <div key={d} style={{ textAlign: 'center', fontSize: '.68rem', fontWeight: 700, color: 'var(--muted)', padding: '4px 0', fontFamily: 'var(--mono)' }}>{d}</div>
+          ))}
+        </div>
+        {/* Day cells */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 1 }}>
+          {cells.map((c, i) => {
+            if (!c.cur) {
+              const isPrev = !c.next;
+              const date = isPrev
+                ? new Date(y, m - 1, c.day)
+                : new Date(y, m + 1, c.day);
+              return (
+                <div key={i} onClick={() => { pick(date); }}
+                  style={{ textAlign: 'center', padding: '6px 2px', fontSize: '.78rem', color: 'var(--muted)', cursor: 'pointer', borderRadius: 6, transition: 'background .12s' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+                  {c.day}
+                </div>
+              );
+            }
+            const date   = new Date(y, m, c.day);
+            const key    = toKey(y, m, c.day);
+            const badge  = badges[key];
+            const sel    = isSameDay(date, value);
+            const today  = isToday(y, m, c.day);
+            const disMin = minDate && date < new Date(minDate.setHours(0,0,0,0));
+            const disMax = maxDate && date > new Date(maxDate.setHours(23,59,59,999));
+            const dis    = disMin || disMax;
+            return (
+              <div key={i} onClick={() => !dis && pick(date)} style={{
+                position: 'relative', textAlign: 'center', padding: '6px 2px',
+                fontSize: '.8rem', fontWeight: sel ? 700 : today ? 600 : 400,
+                borderRadius: 6, cursor: dis ? 'not-allowed' : 'pointer',
+                background: sel ? 'var(--accent)' : 'transparent',
+                color: sel ? '#fff' : dis ? 'var(--border)' : today ? 'var(--accent)' : 'var(--primary-text)',
+                border: today && !sel ? '1.5px solid var(--accent)' : '1.5px solid transparent',
+                transition: 'background .12s, color .12s',
+              }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}>
+                {c.day}
+                {badge && (
+                  <span style={{
+                    position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)',
+                    width: 4, height: 4, borderRadius: '50%',
+                    background: badge.color || 'var(--accent)',
+                  }} />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Month grid ───────────────────────────────────────────────
+  function renderMonths() {
+    const y = cursor.getFullYear();
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 0' }}>
+        {MONTHS.map((name, i) => {
+          const sel = value && value.getFullYear() === y && value.getMonth() === i;
+          return (
+            <div key={i} onClick={() => { const c = new Date(cursor); c.setMonth(i); setCursor(c); setView('day'); }}
+              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 6, fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
+                background: sel ? 'var(--accent)' : 'transparent', color: sel ? '#fff' : 'var(--primary-text)',
+                transition: 'background .12s', }}
+              onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent'; }}>
+              {name}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ── Year grid ────────────────────────────────────────────────
+  function renderYears() {
+    const base = Math.floor(cursor.getFullYear() / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => base + i);
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 0' }}>
+        {years.map(yr => {
+          const sel = value && value.getFullYear() === yr;
+          return (
+            <div key={yr} onClick={() => { const c = new Date(cursor); c.setFullYear(yr); setCursor(c); setView('month'); }}
+              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 6, fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
+                background: sel ? 'var(--accent)' : 'transparent', color: sel ? '#fff' : 'var(--primary-text)',
+                transition: 'background .12s', }}
+              onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent'; }}>
+              {yr}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  const headerLabel = view === 'day'
+    ? `${MONTHS[cursor.getMonth()]} ${cursor.getFullYear()}`
+    : view === 'month'
+    ? `${cursor.getFullYear()}`
+    : `${Math.floor(cursor.getFullYear()/12)*12} – ${Math.floor(cursor.getFullYear()/12)*12+11}`;
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'inline-block', ...style }}>
+      {/* Trigger */}
+      <button type="button" onClick={() => !disabled && setOpen(o => !o)} style={{
+        display: 'flex', alignItems: 'center', gap: 7,
+        padding: '5px 10px', borderRadius: 'var(--rads)',
+        border: '1px solid var(--border)', background: 'var(--surface)',
+        cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
+        fontSize: '.8rem', color: formatted ? 'var(--primary-text)' : 'var(--muted)',
+        fontFamily: 'var(--sans)', transition: 'border-color .15s',
+        whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow)',
+      }}
+      onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent)'; }}
+      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
+        <Calendar size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
+        <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
+        {value && (
+          <span
+            onClick={e => { e.stopPropagation(); onChange?.(null); }}
+            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
+            onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger)'; }}
+            onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; }}>
+            ✕
+          </span>
+        )}
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <div style={{
+          position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 999,
+          background: 'var(--surface)', border: '1px solid var(--border)',
+          borderRadius: 10, boxShadow: 'var(--shadow-lg)',
+          padding: '10px 12px', width: 252,
+          animation: 'dp-in .12s ease',
+        }}>
+          {/* Calendar header */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+            <button type="button" onClick={() => nav(-1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+              <ChevronLeft size={15} />
+            </button>
+            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text)', padding: '4px 8px', borderRadius: 6, fontFamily: 'var(--sans)' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+              {headerLabel}
+            </button>
+            <button type="button" onClick={() => nav(1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+              <ChevronRight size={15} />
+            </button>
+          </div>
+
+          {/* Calendar body */}
+          {view === 'day'   && renderDays()}
+          {view === 'month' && renderMonths()}
+          {view === 'year'  && renderYears()}
+
+        </div>
+      )}
+
+      <style>{`@keyframes dp-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }`}</style>
+    </div>
+  );
+}

package/DeleteConfirmModal.jsx

@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import Modal from './Modal.jsx';
+import { useAuth } from '../hooks/useAuth.jsx';
+import Input from './Input.jsx';
+import Spinner from './Spinner.jsx';
+
+export default function DeleteConfirmModal({ title, warning, confirm: confirmMsg, matchText, onConfirm, onClose }) {
+  const { prefs } = useAuth();
+  const mode = prefs?.delete_confirm_mode || 'password';
+  const confirmText = prefs?.delete_confirm_text || 'delete';
+  const [step,     setStep]     = useState(1);
+  const [value,    setValue]    = useState('');
+  const [error,    setError]    = useState('');
+  const [loading,  setLoading]  = useState(false);
+  const [showPass, setShowPass] = useState(false);
+
+  async function handleConfirm() {
+    setError('');
+    if (mode === 'text' && value !== confirmText) {
+      setError(`Type "${confirmText}" exactly to confirm`);
+      return;
+    }
+    if (mode === 'password' && !value) {
+      setError('Password required');
+      return;
+    }
+    setLoading(true);
+    try {
+      await onConfirm(mode === 'password' ? value : null);
+    } catch (e) {
+      setError(e.message || 'Confirmation failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const EyeIcon = () => (
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      {showPass
+        ? <><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></>
+        : <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>
+      }
+    </svg>
+  );
+
+  return (
+    <Modal
+      title={title}
+      onClose={onClose}
+      footer={close => (
+        step === 1 ? (
+          <>
+            <button className="btn btn-ghost" onClick={close}>Cancel</button>
+            <button className="btn btn-danger" onClick={() => setStep(2)}>Continue</button>
+          </>
+        ) : (
+          <>
+            <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
+            <button className="btn btn-danger" onClick={handleConfirm} disabled={loading || !value}>
+              {loading ? <><Spinner inline /> Deleting...</> : 'Delete'}
+            </button>
+          </>
+        )
+      )}
+    >
+      {step === 1 ? (
+        <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
+          <div style={{ width:36, height:36, borderRadius:'50%', background:'var(--danger-bg, #fff0f0)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+              <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
+            </svg>
+          </div>
+          <div style={{ fontSize:'.88rem', lineHeight:1.6 }}>{warning}</div>
+        </div>
+      ) : (
+        <div>
+          <p style={{ fontSize:'.88rem', marginBottom:16, lineHeight:1.6 }}>{confirmMsg}</p>
+          {mode === 'password' ? (
+            <div className="form-group" style={{ marginBottom:0 }}>
+              <label>Enter your password to confirm</label>
+              <div style={{ position:'relative' }}>
+                <Input
+                  type={showPass ? 'text' : 'password'}
+                  placeholder="Your account password"
+                  value={value}
+                  onChange={e => setValue(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleConfirm()}
+                  style={{ width:'100%', paddingRight:36 }}
+                  autoFocus
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPass(v => !v)}
+                  style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', color:'var(--muted)', padding:0, display:'flex', alignItems:'center' }}
+                >
+                  <EyeIcon />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="form-group" style={{ marginBottom:0 }}>
+              <label>Type <strong>{confirmText}</strong> to confirm</label>
+              <Input
+                type="text"
+                placeholder={confirmText}
+                value={value}
+                onChange={e => setValue(e.target.value)}
+                onKeyDown={e => e.key === 'Enter' && handleConfirm()}
+                autoFocus
+              />
+            </div>
+          )}
+          {error && <div style={{ color:'var(--danger)', fontSize:'.78rem', marginTop:8 }}>{error}</div>}
+        </div>
+      )}
+    </Modal>
+  );
+}

package/Dropdown.jsx

@@ -0,0 +1,108 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Check } from 'lucide-react';
+
+export default function Dropdown({ value, onChange, options, placeholder = 'Select...', disabled }) {
+  const [open, setOpen] = useState(false);
+  const [rect, setRect]  = useState(null);
+  const btnRef = useRef();
+  const menuRef = useRef();
+
+  const updateRect = useCallback(() => {
+    if (btnRef.current) setRect(btnRef.current.getBoundingClientRect());
+  }, []);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (!btnRef.current?.contains(e.target) && !menuRef.current?.contains(e.target))
+        setOpen(false);
+    }
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [open]);
+
+  // Update position on scroll/resize while open
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener('scroll', updateRect, true);
+    window.addEventListener('resize', updateRect);
+    return () => {
+      window.removeEventListener('scroll', updateRect, true);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [open, updateRect]);
+
+  function toggle() {
+    if (disabled) return;
+    updateRect();
+    setOpen(o => !o);
+  }
+
+  const selected = options.find(o => String(o.value) === String(value));
+
+  const menu = open && rect && createPortal(
+    <div
+      ref={menuRef}
+      style={{
+        position: 'fixed',
+        top:   rect.bottom + 4,
+        left:  rect.left,
+        width: rect.width,
+        background: 'var(--surface)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--rads)',
+        boxShadow: 'var(--shadow-lg)',
+        zIndex: 999999,
+        animation: 'dropdownOpen .2s cubic-bezier(.16,1,.3,1)',
+      }}>
+      {options.map(o => {
+        const active = String(o.value) === String(value);
+        return (
+          <div key={o.value}
+            onMouseDown={e => e.preventDefault()}
+            onClick={() => { onChange(o.value); setOpen(false); }}
+            onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'var(--hover-bg)'; }}
+            onMouseLeave={e => { e.currentTarget.style.background = active ? 'var(--accent-bg)' : 'transparent'; }}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              padding: '9px 12px', cursor: 'pointer', fontSize: '.82rem',
+              color: active ? 'var(--accent)' : 'var(--primary-text)',
+              background: active ? 'var(--accent-bg)' : 'transparent',
+              fontWeight: active ? 600 : 400,
+            }}>
+            <span>{o.label}</span>
+            {active && <Check size={12} />}
+          </div>
+        );
+      })}
+    </div>,
+    document.body
+  );
+
+  return (
+    <div ref={btnRef} style={{ position: 'relative' }}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={toggle}
+        style={{
+          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '8px 11px', background: 'var(--input-bg)',
+          border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
+          boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+          borderRadius: 'var(--rads)', cursor: disabled ? 'not-allowed' : 'pointer',
+          color: selected ? 'var(--primary-text)' : 'var(--muted)',
+          fontSize: '.82rem', fontFamily: 'var(--sans)', transition: 'all .14s',
+          opacity: disabled ? .5 : 1, gap: 8,
+        }}>
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
+      </button>
+      {menu}
+    </div>
+  );
+}

package/Dropzone.jsx

@@ -0,0 +1,29 @@
+import { useState, useRef } from 'react';
+
+export function Dropzone({ onFile, accept, hint, file }) {
+  const [over, setOver] = useState(false);
+  const inputRef = useRef(null);
+  return (
+    <div className={`dropzone${over ? ' over' : ''}`}
+      onDragOver={e => { e.preventDefault(); setOver(true); }}
+      onDragLeave={() => setOver(false)}
+      onDrop={e => { e.preventDefault(); setOver(false); const f = e.dataTransfer.files[0]; if (f) onFile(f); }}
+      onClick={() => inputRef.current?.click()}>
+      <input ref={inputRef} type="file" accept={accept}
+        onChange={e => e.target.files[0] && onFile(e.target.files[0])} style={{ display: 'none' }} />
+      <div className="dropzone-icon">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--grey-3)" strokeWidth="1.5" strokeLinecap="round">
+          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+        </svg>
+      </div>
+      {file ? (
+        <div className="dropzone-file">{file.name}</div>
+      ) : (
+        <>
+          <div className="dropzone-text"><b>Click to select</b> or drag &amp; drop</div>
+          {hint && <div className="dropzone-hint">{hint}</div>}
+        </>
+      )}
+    </div>
+  );
+}

package/HoverCard.jsx

@@ -0,0 +1,81 @@
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * HoverCard — reusable tooltip/popover on hover
+ *
+ * Props:
+ *   trigger      — React node as hover target
+ *   children     — popup content
+ *   position     — 'top' | 'bottom' (default: 'top')
+ *   width        — min-width (default: 180)
+ *   style        — extra popup styles
+ *   triggerStyle — extra trigger wrapper styles
+ */
+export default function HoverCard({ trigger, children, position = 'top', width = 180, style, triggerStyle }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (open && wrapRef.current) {
+      const r = wrapRef.current.getBoundingClientRect();
+      setPos({ x: r.left + r.width / 2, y: position === 'top' ? r.top : r.bottom });
+    }
+  }, [open, position]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  return (
+    <div
+      ref={wrapRef}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      style={{ display: 'inline-block', position: 'relative', ...triggerStyle }}
+    >
+      {trigger}
+      {open && (
+        <div style={{
+          position: 'fixed',
+          left: pos.x,
+          top: position === 'top' ? 'auto' : pos.y + 6,
+          bottom: position === 'top' ? window.innerHeight - pos.y + 6 : 'auto',
+          transform: 'translateX(-50%)',
+          zIndex: 9999,
+          minWidth: width,
+          background: '#fff',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--rads, 8px)',
+          padding: '10px 14px',
+          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
+          pointerEvents: 'none',
+          animation: 'hoverCardIn .15s ease',
+          ...style,
+        }}>
+          {children}
+          <div style={{
+            position: 'absolute', left: '50%',
+            [position === 'top' ? 'bottom' : 'top']: -5,
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: 8, height: 8, background: '#fff',
+            borderRight: '1px solid var(--border)',
+            borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
+            borderTop: position === 'top' ? '1px solid var(--border)' : 'none',
+          }} />
+        </div>
+      )}
+      <style>{`
+        @keyframes hoverCardIn {
+          from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+          to { opacity: 1; transform: translateX(-50%) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}