cynx-ui 1.2.6 → 1.2.8

package/components/LineProgress.jsx

@@ -1,109 +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>
-  );
-}
+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/components/Modal.jsx

@@ -2,10 +2,100 @@ import { useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import Button from './Button';
 
+const STYLES = `
+/* ── Modal ─────────────────────────────────────────────────── */
+.modal-backdrop {
+  position: fixed; inset: 0;
+  background: rgba(20,22,41,.45);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 8000; padding: 20px;
+}
+.modal {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 14px; width: 100%; max-width: 480px;
+  box-shadow: var(--shadow-lg);
+  overflow: visible;
+}
+.modal-hdr {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 15px 20px; border-bottom: 1px solid var(--border-light);
+  border-radius: 14px 14px 0 0;
+}
+.modal-title { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
+.modal-body  { padding: 20px; overflow: visible; }
+.modal-footer {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 13px 20px; border-top: 1px solid var(--border-light);
+  background: var(--grey-1); border-radius: 0 0 14px 14px;
+}
+.modal-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 14px; width: 100%; max-width: 480px;
+  box-shadow: var(--shadow-lg); overflow: visible;
+  display: flex; flex-direction: column;
+}
+.modal-close {
+  background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px;
+  color: var(--muted); display: flex; align-items: center; transition: all .14s;
+}
+.modal-close:hover { color: var(--primary-text); background: var(--grey-1); }
+.confirm-icon {
+  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px;
+  display: flex; align-items: center; justify-content: center;
+}
+.confirm-icon.danger { background: rgba(246,71,71,.1); }
+.confirm-icon.warning { background: rgba(249,158,44,.1); }
+.confirm-icon.info { background: rgba(39,130,228,.1); }
+
+/* Modal scale */
+@keyframes modalIn {
+  from { opacity: 0; transform: scale(.97); }
+  to   { opacity: 1; transform: scale(1); }
+}
+.modal { animation: modalIn .16s ease; }
+
+/* ── Modal open animation ──────────────────────────────────── */
+@keyframes modalPop {
+  from { opacity: 0; transform: scale(.96) translateY(-8px); }
+  to   { opacity: 1; transform: scale(1)   translateY(0); }
+}
+@keyframes backdropFade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Modal close animations ────────────────────────────────── */
+@keyframes modalClose {
+  from { opacity: 1; transform: scale(1)   translateY(0); }
+  to   { opacity: 0; transform: scale(.96) translateY(-8px); }
+}
+@keyframes backdropClose {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* ── cynx-ui Modal keyframes ────────────────────────────────── */
+@keyframes modalFadeIn { from { opacity:0 } to { opacity:1 } }
+@keyframes modalFadeOut { from { opacity:1 } to { opacity:0 } }
+@keyframes modalCardIn { from { opacity:0; transform:scale(.96) translateY(-8px) } to { opacity:1; transform:scale(1) translateY(0) } }
+@keyframes modalCardOut { from { opacity:1; transform:scale(1) translateY(0) } to { opacity:0; transform:scale(.96) translateY(-8px) } }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === 'undefined') return;
+  const tag = document.createElement('style');
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+  injected = true;
+}
+
 export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, bodyStyle }) {
   const [closing, setClosing] = useState(false);
   const mounted = useRef(open);
 
+  ensureStyles();
+
   useEffect(() => {
     if (open) {
       mounted.current = true;
@@ -41,20 +131,38 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
   return createPortal(
     <div
       className="modal-backdrop"
-      style={{ animation: `${closing ? 'modalFadeOut' : 'modalFadeIn'} .26s ease forwards` }}
+      style={{
+        position: 'fixed', inset: 0,
+        background: 'rgba(20,22,41,.45)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 8000, padding: 20,
+        animation: `${closing ? 'modalFadeOut' : 'modalFadeIn'} .26s ease forwards`,
+      }}
       onMouseDown={e => { if (e.target === e.currentTarget) close(); }}
     >
       <div
         className="modal-card"
         style={{
-          maxWidth,
+          background: 'var(--surface)', border: '1px solid var(--border)',
+          borderRadius: 14, width: '100%', maxWidth,
+          boxShadow: '0 20px 60px rgba(0,0,0,.25)',
+          overflow: 'visible', display: 'flex', flexDirection: 'column',
           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}>
+        <div className="modal-hdr" style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '15px 20px', borderBottom: '1px solid var(--border-light)',
+          borderRadius: '14px 14px 0 0',
+        }}>
+          <span className="modal-title" style={{ fontSize: '.88rem', fontWeight: 700, letterSpacing: '-.01em' }}>{title}</span>
+          <button className="modal-close" onClick={close} style={{
+            background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6,
+            color: 'var(--muted)', display: 'flex', alignItems: 'center', transition: 'all .14s',
+          }}
+          onMouseEnter={e => { e.currentTarget.style.color = 'var(--primary-text)'; e.currentTarget.style.background = 'var(--grey-1)'; }}
+          onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.background = 'none'; }}>
             <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"/>
@@ -62,8 +170,12 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
             </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 className="modal-body" style={{ padding: 20, overflowX: 'hidden', overflowY: 'auto', flex: 1, minHeight: 0, ...bodyStyle }}>{resolvedChildren}</div>
+        {resolvedFooter && <div className="modal-footer" style={{
+          display: 'flex', justifyContent: 'flex-end', gap: 8,
+          padding: '13px 20px', borderTop: '1px solid var(--border-light)',
+          background: 'var(--grey-1)', borderRadius: '0 0 14px 14px',
+        }}>{resolvedFooter}</div>}
       </div>
     </div>,
     document.body
@@ -89,7 +201,11 @@ export function Confirm({ open, onClose, onConfirm, title, message, variant = 'd
         </>
       }>
       <div style={{ textAlign: 'center', padding: '4px 0 8px' }}>
-        <div className={`confirm-icon ${variant}`}>{icon}</div>
+        <div className={`confirm-icon ${variant}`} style={{
+          width: 48, height: 48, borderRadius: '50%', margin: '0 auto 12px',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: variant === 'danger' ? 'rgba(246,71,71,.1)' : variant === 'warning' ? 'rgba(249,158,44,.1)' : 'rgba(39,130,228,.1)',
+        }}>{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>

package/components/Pagination.jsx

@@ -1,41 +1,41 @@
-import Button from './Button';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-export function Pagination({ page, pages, total, perPage, onChange }) {
-  const totalPages = pages || (total && perPage ? Math.ceil(total / perPage) : 0);
-  if (!totalPages || totalPages <= 1) return null;
-
-  const items = [];
-  for (let i = 1; i <= totalPages; i++) {
-    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) items.push(i);
-    else if (items[items.length - 1] !== '...') items.push('...');
-  }
-
-  const start = perPage ? (page - 1) * perPage + 1 : null;
-  const end = perPage ? Math.min(page * perPage, total) : null;
-
-  return (
-    <div style={{
-      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-      padding: '10px 16px',
-      borderTop: '1px solid var(--border-light)',
-      background: 'var(--surface)',
-      borderRadius: '0 0 var(--rad) var(--rad)',
-    }}>
-      {start !== null && (
-        <div style={{ fontSize: '.72rem', color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
-          {start}–{end} of {total}
-        </div>
-      )}
-      <div style={{ display: 'flex', gap: 4, alignItems: 'center', marginLeft: start !== null ? 'auto' : 0 }}>
-        <Button variant="ghost" size="xs" icon={<ChevronLeft size={14} />} onClick={() => onChange(page - 1)} disabled={page <= 1} />
-        {items.map((item, i) =>
-          item === '...'
-            ? <span key={`e${i}`} style={{ padding: '0 4px', color: 'var(--muted)', fontSize: '.78rem' }}>…</span>
-            : <Button key={item} variant={item === page ? 'primary' : 'no-line'} size="xs" onClick={() => onChange(item)} style={{ minWidth: 28 }}>{item}</Button>
-        )}
-        <Button variant="ghost" size="xs" icon={<ChevronRight size={14} />} onClick={() => onChange(page + 1)} disabled={page >= totalPages} />
-      </div>
-    </div>
-  );
-}
+import Button from './Button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export function Pagination({ page, pages, total, perPage, onChange }) {
+  const totalPages = pages || (total && perPage ? Math.ceil(total / perPage) : 0);
+  if (!totalPages || totalPages <= 1) return null;
+
+  const items = [];
+  for (let i = 1; i <= totalPages; i++) {
+    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) items.push(i);
+    else if (items[items.length - 1] !== '...') items.push('...');
+  }
+
+  const start = perPage ? (page - 1) * perPage + 1 : null;
+  const end = perPage ? Math.min(page * perPage, total) : null;
+
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      padding: '10px 16px',
+      borderTop: '1px solid var(--border-light)',
+      background: 'var(--surface)',
+      borderRadius: '0 0 var(--rad) var(--rad)',
+    }}>
+      {start !== null && (
+        <div style={{ fontSize: '.72rem', color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
+          {start}–{end} of {total}
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center', marginLeft: start !== null ? 'auto' : 0 }}>
+        <Button variant="ghost" size="xs" icon={<ChevronLeft size={14} />} onClick={() => onChange(page - 1)} disabled={page <= 1} />
+        {items.map((item, i) =>
+          item === '...'
+            ? <span key={`e${i}`} style={{ padding: '0 4px', color: 'var(--muted)', fontSize: '.78rem' }}>…</span>
+            : <Button key={item} variant={item === page ? 'primary' : 'no-line'} size="xs" onClick={() => onChange(item)} style={{ minWidth: 28 }}>{item}</Button>
+        )}
+        <Button variant="ghost" size="xs" icon={<ChevronRight size={14} />} onClick={() => onChange(page + 1)} disabled={page >= totalPages} />
+      </div>
+    </div>
+  );
+}

package/components/PulseDot.jsx

@@ -1,58 +1,76 @@
-const STYLES = `
-.pdot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:8px;height:8px;flex-shrink:0}
-.pdot-core{width:8px;height:8px;border-radius:50%;background:var(--grey-4,#797b8d)}
-.pdot-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--grey-4,#797b8d);opacity:0;animation:pdot-pulse 1.1s ease-out infinite}
-.pdot-live .pdot-ring{animation-play-state:running}
-.pdot-paused .pdot-ring{animation-play-state:paused}
-
-.pdot-sm .pdot-core{width:6px;height:6px}
-.pdot-sm .pdot-ring{inset:-2px;border-width:1.5px}
-.pdot-lg .pdot-core{width:10px;height:10px}
-.pdot-lg .pdot-ring{inset:-4px}
-
-.pdot-ok .pdot-core{background:var(--success,#27ae60)}
-.pdot-ok .pdot-ring{border-color:var(--success,#27ae60)}
-.pdot-err .pdot-core{background:var(--danger,#f64747)}
-.pdot-err .pdot-ring{border-color:var(--danger,#f64747)}
-.pdot-warn .pdot-core{background:var(--accent,#f99e2c)}
-.pdot-warn .pdot-ring{border-color:var(--accent,#f99e2c)}
-.pdot-blue .pdot-core{background:var(--blue,#2782e4)}
-.pdot-blue .pdot-ring{border-color:var(--blue,#2782e4)}
-.pdot-purple .pdot-core{background:#8b5cf6}
-.pdot-purple .pdot-ring{border-color:#8b5cf6}
-.pdot-teal .pdot-core{background:#14b8a6}
-.pdot-teal .pdot-ring{border-color:#14b8a6}
-.pdot-pink .pdot-core{background:#ec4899}
-.pdot-pink .pdot-ring{border-color:#ec4899}
-
-.pdot-off .pdot-core{background:var(--t3,#9b9daa)}
-.pdot-off .pdot-ring{display:none}
-
-@keyframes pdot-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.3);opacity:0}}
-`;
-
-let styleInjected = false;
-
-export default function PulseDot({
-  variant = 'dim',
-  size = 'md',
-  pulse = true,
-  className = '',
-  style = {},
-}) {
-  if (!styleInjected && typeof document !== 'undefined') {
-    const tag = document.createElement('style');
-    tag.textContent = STYLES;
-    document.head.appendChild(tag);
-    styleInjected = true;
-  }
-
-  const classes = `pdot pdot-${variant} pdot-${size}${pulse ? ' pdot-live' : ' pdot-paused'}${className ? ' ' + className : ''}`;
-
-  return (
-    <span className={classes} style={style}>
-      <span className="pdot-core" />
-      <span className="pdot-ring" />
-    </span>
-  );
-}
+const VARIANTS = {
+  dim:     { bg: 'var(--grey-4,#797b8d)', ring: 'var(--grey-4,#797b8d)' },
+  ok:      { bg: 'var(--success,#27ae60)', ring: 'var(--success,#27ae60)' },
+  err:     { bg: 'var(--danger,#f64747)', ring: 'var(--danger,#f64747)' },
+  warn:    { bg: 'var(--accent,#f99e2c)', ring: 'var(--accent,#f99e2c)' },
+  blue:    { bg: 'var(--blue,#2782e4)', ring: 'var(--blue,#2782e4)' },
+  purple:  { bg: '#8b5cf6', ring: '#8b5cf6' },
+  teal:    { bg: '#14b8a6', ring: '#14b8a6' },
+  pink:    { bg: '#ec4899', ring: '#ec4899' },
+  off:     { bg: 'var(--t3,#9b9daa)', ring: 'var(--t3,#9b9daa)' },
+};
+
+const SIZES = {
+  sm: { core: 6, ring: { inset: '-2px', borderWidth: '1.5px' } },
+  md: { core: 8, ring: { inset: '-3px', borderWidth: '2px' } },
+  lg: { core: 10, ring: { inset: '-4px', borderWidth: '2px' } },
+};
+
+const KEYFRAMES = `@keyframes pdot-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.3);opacity:0}}`;
+let styleInjected = false;
+
+function ensureStyles() {
+  if (styleInjected || typeof document === 'undefined') return;
+  const tag = document.createElement('style');
+  tag.textContent = KEYFRAMES;
+  document.head.appendChild(tag);
+  styleInjected = true;
+}
+
+export default function PulseDot({
+  variant = 'dim',
+  size = 'md',
+  pulse = true,
+  className = '',
+  style = {},
+}) {
+  ensureStyles();
+
+  const v = VARIANTS[variant] || VARIANTS.dim;
+  const s = SIZES[size] || SIZES.md;
+  const isOff = variant === 'off';
+
+  return (
+    <span
+      className={className}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: s.core,
+        height: s.core,
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      <span style={{
+        width: s.core,
+        height: s.core,
+        borderRadius: '50%',
+        background: v.bg,
+      }} />
+      {!isOff && (
+        <span style={{
+          position: 'absolute',
+          inset: s.ring.inset,
+          borderRadius: '50%',
+          border: `${s.ring.borderWidth} solid ${v.ring}`,
+          opacity: 0,
+          animation: `pdot-pulse 1.1s ease-out infinite`,
+          animationPlayState: pulse ? 'running' : 'paused',
+        }} />
+      )}
+    </span>
+  );
+}