cynx-ui 1.0.0

package/Select.jsx

@@ -0,0 +1,218 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Check, X } from 'lucide-react';
+
+const STYLES = `
+.sel-wrap{position:relative;width:100%;font-family:var(--f,var(--sans));font-size:var(--fsz,13px)}
+.sel-wrap.disabled{opacity:.5;pointer-events:none}
+.sel-trigger{
+  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
+  padding:8px 11px;height:35px;
+  background:var(--sf,var(--surface));border:1.5px solid var(--bd2,var(--border));
+  border-radius:var(--rmd,var(--rads));cursor:pointer;
+  font-family:var(--f,var(--sans,inherit));font-size:12.5px;line-height:1;
+  color:var(--t,var(--primary-text));outline:none;
+  transition:border-color var(--tr,.15s),box-shadow var(--tr,.15s);
+  box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))
+}
+.sel-trigger:hover{border-color:var(--bd2,var(--grey-2))}
+.sel-trigger.open{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
+.sel-trigger-inner{flex:1;min-width:0;display:flex;align-items:center}
+.sel-value{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sel-placeholder{color:var(--t3,var(--grey-3));font-weight:400}
+.sel-chevron{flex-shrink:0;color:var(--t3,var(--grey-3));transition:transform .2s ease}
+.sel-trigger.open .sel-chevron{transform:rotate(180deg)}
+.sel-tags{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
+.sel-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background:var(--pd,var(--accent-bg));border:1px solid var(--accent);border-radius:4px;font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap;max-width:140px;opacity:.85}
+.sel-tag-x{cursor:pointer;flex-shrink:0;opacity:.5;transition:opacity .15s}
+.sel-tag-x:hover{opacity:1}
+.sel-dropdown{
+  position:fixed;z-index:9000;
+  background:var(--sf,var(--surface));border:1px solid var(--bd,var(--border));
+  border-radius:var(--rmd,var(--rads));box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1));
+  padding:4px;animation:selFadeIn .15s ease;overflow:hidden
+}
+@keyframes selFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+.sel-search-wrap{padding:4px}
+.sel-search{
+  width:100%;padding:7px 10px;height:35px;
+  background:var(--sf2,var(--grey-1));border:1.5px solid var(--bd2,var(--border));
+  border-radius:var(--rmd,var(--rads));font-family:var(--f,var(--sans));font-size:12.5px;line-height:1;
+  color:var(--t,var(--primary-text));outline:none;
+  transition:border-color var(--tr,.15s),box-shadow var(--tr,.15s)
+}
+.sel-search::placeholder{color:var(--t3,var(--grey-3))}
+.sel-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
+.sel-options{max-height:200px;overflow-y:auto}
+.sel-options::-webkit-scrollbar{width:4px}
+.sel-options::-webkit-scrollbar-thumb{background:var(--bd2,var(--grey-2));border-radius:99px}
+.sel-option{
+  display:flex;align-items:center;gap:8px;padding:8px 10px;
+  border-radius:var(--rmd,var(--rads));cursor:pointer;
+  color:var(--t,var(--primary-text));font-size:12.5px;
+  font-weight:400 !important;transition:background .1s;user-select:none
+}
+.sel-option:hover{background:var(--sf2,var(--hover-bg))}
+.sel-option.selected{color:var(--accent);background:var(--pd,var(--accent-bg))}
+.sel-option.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
+.sel-opt-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sel-check{flex-shrink:0;color:var(--accent)}
+.sel-check-box{width:15px;height:15px;border:1.5px solid var(--bd2,var(--border));border-radius:3px;flex-shrink:0;position:relative;transition:all .15s}
+.sel-check-box.checked{background:var(--accent);border-color:var(--accent)}
+.sel-check-box.checked::after{content:'';position:absolute;top:1px;left:3.5px;width:4.5px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
+.sel-empty{padding:14px 10px;text-align:center;color:var(--t3,var(--grey-3));font-size:11px}
+`;
+
+let styleInjected = false;
+
+export default function Select({
+  options = [],
+  value,
+  onChange,
+  placeholder = 'Select...',
+  disabled = false,
+  multi = false,
+  searchable = false,
+  style = {},
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+  const wrapRef = useRef(null);
+  const dropRef = useRef(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (!styleInjected) {
+      const tag = document.createElement('style');
+      tag.textContent = STYLES;
+      document.head.appendChild(tag);
+      styleInjected = true;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function updatePos() {
+      if (wrapRef.current) {
+        const r = wrapRef.current.getBoundingClientRect();
+        setPos({ top: r.bottom + 4, left: r.left, width: r.width });
+      }
+    }
+    function close(e) {
+      const inTrigger = wrapRef.current && wrapRef.current.contains(e.target);
+      const inDrop = dropRef.current && dropRef.current.contains(e.target);
+      if (!inTrigger && !inDrop) setOpen(false);
+    }
+    document.addEventListener('mousedown', close, true);
+    window.addEventListener('scroll', updatePos, true);
+    window.addEventListener('resize', updatePos);
+    return () => {
+      document.removeEventListener('mousedown', close, true);
+      window.removeEventListener('scroll', updatePos, true);
+      window.removeEventListener('resize', updatePos);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (open && searchable && inputRef.current) inputRef.current.focus();
+  }, [open, searchable]);
+
+  useEffect(() => {
+    if (!open) setQuery('');
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!query) return options;
+    const q = query.toLowerCase();
+    return options.filter(o => o.label.toLowerCase().includes(q));
+  }, [options, query]);
+
+  function handleOpen() {
+    if (disabled) return;
+    if (!open && wrapRef.current) {
+      const r = wrapRef.current.getBoundingClientRect();
+      setPos({ top: r.bottom + 4, left: r.left, width: r.width });
+    }
+    setOpen(o => !o);
+  }
+
+  function toggleOption(optVal) {
+    if (multi) {
+      const arr = Array.isArray(value) ? value : [];
+      const next = arr.includes(optVal) ? arr.filter(v => v !== optVal) : [...arr, optVal];
+      onChange(next);
+    } else {
+      onChange(optVal);
+      setOpen(false);
+    }
+  }
+
+  function removeTag(e, val) {
+    e.stopPropagation();
+    onChange((Array.isArray(value) ? value : []).filter(v => v !== val));
+  }
+
+  function isSelected(optVal) {
+    return multi ? (Array.isArray(value) && value.includes(optVal)) : value === optVal;
+  }
+
+  function getLabel(optVal) {
+    const opt = options.find(o => o.value === optVal);
+    return opt ? opt.label : optVal;
+  }
+
+  const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value ? [value] : []);
+
+  return (
+    <div className={`sel-wrap${disabled ? ' disabled' : ''}${multi ? ' multi' : ''}`} ref={wrapRef} style={style}>
+      <div className={`sel-trigger${open ? ' open' : ''}`} onClick={handleOpen}>
+        <div className="sel-trigger-inner">
+          {multi && selectedValues.length > 0 ? (
+            <div className="sel-tags">
+              {selectedValues.map(v => (
+                <span key={v} className="sel-tag">
+                  {getLabel(v)}
+                  <X size={11} className="sel-tag-x" onMouseDown={(e) => removeTag(e, v)} />
+                </span>
+              ))}
+            </div>
+          ) : !multi && selectedValues.length > 0 ? (
+            <span className="sel-value">{getLabel(selectedValues[0])}</span>
+          ) : (
+            <span className="sel-placeholder">{placeholder}</span>
+          )}
+        </div>
+        <ChevronDown size={13} className="sel-chevron" />
+      </div>
+
+      {open && createPortal(
+        <div ref={dropRef} className="sel-dropdown" style={{ top: pos.top, left: pos.left, width: pos.width }}>
+          {searchable && (
+            <div className="sel-search-wrap">
+              <input ref={inputRef} className="sel-search" type="text" placeholder="Search..."
+                value={query} onChange={e => setQuery(e.target.value)}
+                onMouseDown={e => e.stopPropagation()} />
+            </div>
+          )}
+          <div className="sel-options">
+            {filtered.length === 0 ? (
+              <div className="sel-empty">No options found</div>
+            ) : (
+              filtered.map(opt => (
+                <div key={opt.value}
+                  className={`sel-option${isSelected(opt.value) ? ' selected' : ''}${opt.disabled ? ' disabled' : ''}`}
+                  onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); if (!opt.disabled) toggleOption(opt.value); }}>
+                  {multi && <span className={`sel-check-box${isSelected(opt.value) ? ' checked' : ''}`} />}
+                  <span className="sel-opt-label">{opt.label}</span>
+                  {!multi && isSelected(opt.value) && <Check size={13} className="sel-check" />}
+                </div>
+              ))
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}

package/Skeleton.jsx

@@ -0,0 +1,126 @@
+/**
+ * Reusable skeleton loading component.
+ *
+ * Usage:
+ *   <Skeleton />                          — single block (default 100% x 12px)
+ *   <Skeleton width={80} height={12} />   — custom size
+ *   <Skeleton circle size={32} />         — circle (avatar, icon)
+ *   <SkeletonText lines={3} />            — multiple text lines
+ *   <SkeletonCard />                      — card-shaped skeleton
+ *   <SkeletonCard rows={4} />             — card with more rows
+ */
+
+const STYLES = `
+@keyframes sk-shimmer {
+  0%   { background-position: -600px 0; }
+  100% { background-position: 600px 0; }
+}
+.sk {
+  background: linear-gradient(90deg, var(--grey-1, #f0f1f5) 25%, var(--border-light, #e8e8ec) 50%, var(--grey-1, #f0f1f5) 75%);
+  background-size: 600px 100%;
+  animation: sk-shimmer 1.4s ease infinite;
+  border-radius: var(--radxs, 4px);
+  flex-shrink: 0;
+}
+.sk-card {
+  background: var(--surface, #fff);
+  border: 1px solid var(--border-light, #ebebf0);
+  border-radius: var(--rad, 10px);
+  padding: 14px 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.04);
+}
+.sk-card-head {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 12px;
+}
+`;
+
+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 Skeleton({ width = '100%', height = 12, circle, size, radius, style = {}, className = '' }) {
+  ensureStyles();
+  const w = circle ? size : width;
+  const h = circle ? size : height;
+  return (
+    <div
+      className={`sk ${className}`}
+      style={{
+        width: w,
+        height: h,
+        borderRadius: circle ? '50%' : radius,
+        ...style,
+      }}
+    />
+  );
+}
+
+export function SkeletonText({ lines = 3, widths, style = {} }) {
+  ensureStyles();
+  const defaultWidths = ['100%', '90%', '65%', '80%', '50%'];
+  const ws = widths || defaultWidths;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, ...style }}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className="sk"
+          style={{
+            width: ws[i % ws.length],
+            height: 12,
+            borderRadius: 'var(--radxs, 4px)',
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonCard({ rows = 3, style = {} }) {
+  ensureStyles();
+  return (
+    <div className="sk-card" style={style}>
+      <div className="sk-card-head">
+        <Skeleton width={140} height={14} />
+        <Skeleton width={70} height={26} radius="var(--rads, 6px)" />
+      </div>
+      <SkeletonText lines={rows} />
+    </div>
+  );
+}
+
+export default Skeleton;
+
+export function SkeletonRows({ cols = 5, rows = 5 }) {
+  return Array.from({ length: rows }).map((_, i) => (
+    <tr key={i}>
+      {Array.from({ length: cols }).map((_, j) => (
+        <td key={j}>
+          <div className="sk" style={{ width: `${50 + Math.random() * 40}%`, height: 12 }} />
+        </td>
+      ))}
+    </tr>
+  ));
+}
+
+export function SkeletonStats({ count = 4 }) {
+  ensureStyles();
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} style={{ flex: 1 }}>
+          <Skeleton width="40%" height={10} style={{ marginBottom: 10 }} />
+          <Skeleton width="50%" height={28} style={{ marginBottom: 8 }} />
+          <Skeleton width="30%" height={10} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/Spinner.jsx

@@ -0,0 +1,36 @@
+export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  const s = inline ? 14 : size;
+  const svg = (
+    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
+      stroke={color} strokeWidth="2.5" strokeLinecap="round">
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>
+  );
+
+  if (fullPage) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--bg)',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 16,
+        zIndex: 9999,
+      }}>
+        {svg}
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) return svg;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      {svg}
+    </div>
+  );
+}
+
+export default Spinner;

package/StatBarCard.jsx

@@ -0,0 +1,25 @@
+import LineProgress from './LineProgress';
+
+export default function StatBarCard({ title, icon, items, style }) {
+  const total = items.reduce((s, i) => s + (i.value || 0), 0);
+
+  return (
+    <div style={{
+      background: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+      padding: '12px 14px', minWidth: 220, ...style,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+        <div style={{ fontSize: '.58rem', fontWeight: 700, color: 'var(--muted, #9ca3af)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
+          {title}{total ? ` (${total})` : ''}
+        </div>
+        {icon && <span style={{ color: 'var(--muted, #9ca3af)' }}>{icon}</span>}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {items.map((item, i) => (
+          <LineProgress key={i} value={item.value} total={total} color={item.color} label={item.label} size="sm" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/StatsBar.jsx

@@ -0,0 +1,88 @@
+import { Users, Monitor, ShieldAlert, Activity, WifiOff } from 'lucide-react';
+
+const itemStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 5,
+  padding: '4px 8px',
+  fontSize: '.8rem',
+  fontWeight: 600,
+  color: 'var(--t)',
+};
+
+const iconWrap = (color) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 20,
+  height: 20,
+  borderRadius: 5,
+  background: color + '18',
+  color: color,
+  flexShrink: 0,
+});
+
+const sep = {
+  width: 1,
+  height: 14,
+  background: 'var(--border-light)',
+  margin: '0 3px',
+  flexShrink: 0,
+};
+
+const groupStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 0,
+  padding: '3px 8px',
+  minHeight: 32,
+  borderRadius: 7,
+  border: '1px solid var(--border)',
+  background: 'var(--surface)',
+  boxShadow: '0 1px 2px rgba(0,0,0,.05)',
+};
+
+export default function StatsBar({ total = 0, active = 0, blocked = 0, actions = 0, type }) {
+  const dotted = type === 'dotted';
+  const dot = (color) => dotted ? <span style={{ color, fontSize: '.8rem', fontWeight: 700 }}>•</span> : null;
+
+  return (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      {/* Device group */}
+      <div style={groupStyle}>
+        <div style={itemStyle}>
+          <span style={iconWrap('#6366f1')}><Monitor size={10} /></span>
+          {dot('#6366f1')}
+          <span>{total}</span>
+        </div>
+        <div style={sep} />
+        <div style={itemStyle}>
+          <span style={iconWrap('#22c55e')}><Users size={10} /></span>
+          {dot('#22c55e')}
+          <span>{active}</span>
+        </div>
+      </div>
+
+      {/* Status group */}
+      <div style={groupStyle}>
+        <div style={itemStyle}>
+          <span style={iconWrap('#ef4444')}><ShieldAlert size={10} /></span>
+          {dot('#ef4444')}
+          <span>{blocked}</span>
+        </div>
+        <div style={sep} />
+        <div style={itemStyle}>
+          <span style={iconWrap('#f59e0b')}><Activity size={10} /></span>
+          {dot('#f59e0b')}
+          <span>{actions}</span>
+        </div>
+        <div style={sep} />
+        <div style={itemStyle}>
+          <span style={iconWrap('#94a3b8')}><WifiOff size={10} /></span>
+          {dot('#94a3b8')}
+          <span>{total - active}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/StatsCard.jsx

@@ -0,0 +1,97 @@
+import CircularProgress from './CircularProgress';
+
+const STYLES = `
+.scard{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;min-height:68px;border-radius:var(--rad,10px);background:var(--surface,#fff);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);min-width:0;transition:border-color .15s}
+.scard:hover{border-color:var(--border,#d7d8e0)}
+.scard-left{display:flex;flex-direction:column;min-width:0;flex:1}
+.scard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
+.scard-head-left{display:flex;align-items:center;gap:6px}
+.scard-icon{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
+.scard-icon svg{width:12px;height:12px}
+.scard-title{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#9b9daa)}
+.scard-value{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--primary-text,#0f111c);line-height:1.2;min-height:1.32em}
+.scard-sub{font-size:.62rem;color:var(--muted,#9b9daa);font-weight:500;margin-top:1px;min-height:1em}
+.scard-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
+.scard-simple{padding:12px 14px;flex-direction:column;align-items:flex-start;justify-content:flex-start}
+.scard-simple .scard-head{width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
+.scard-simple .scard-icon-simple{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
+.scard-simple .scard-icon-simple svg{width:14px;height:14px}
+.scard-simple .scard-value{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;min-height:1.375em}
+`;
+
+let styleInjected = false;
+
+export default function StatsCard({
+  variant = 'default',
+  icon,
+  iconColor = 'var(--blue)',
+  iconBg = 'rgba(39,130,228,.1)',
+  title,
+  value,
+  subtitle,
+  percent,
+  percentColor,
+  progressSize = 'sm',
+  progressTrackColor = '#e8e8ec',
+  headRight,
+  className = '',
+  style = {},
+  children,
+}) {
+  if (!styleInjected && typeof document !== 'undefined') {
+    const tag = document.createElement('style');
+    tag.textContent = STYLES;
+    document.head.appendChild(tag);
+    styleInjected = true;
+  }
+
+  if (variant === 'simple') {
+    return (
+      <div className={`scard scard-simple${className ? ' ' + className : ''}`} style={style}>
+        <div className="scard-head">
+          {title && <div className="scard-title">{title}</div>}
+          {icon && (
+            <div className="scard-icon-simple" style={{ color: iconColor }}>
+              {icon}
+            </div>
+          )}
+        </div>
+        {value !== undefined && <div className="scard-value">{value}</div>}
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`scard${className ? ' ' + className : ''}`} style={style}>
+      <div className="scard-left">
+        <div className="scard-head">
+          <div className="scard-head-left">
+            {icon && (
+              <div className="scard-icon" style={{ background: iconBg, color: iconColor }}>
+                {icon}
+              </div>
+            )}
+            {title && <div className="scard-title">{title}</div>}
+          </div>
+          {headRight}
+        </div>
+        {value !== undefined && <div className="scard-value">{value}</div>}
+        <div className="scard-sub" style={{ minHeight: 14 }}>{subtitle || '\u00A0'}</div>
+        {children}
+      </div>
+      <div className="scard-right">
+        {percent !== undefined && (
+          <CircularProgress
+            value={percent}
+            size={progressSize}
+            color={percentColor}
+            trackColor={progressTrackColor}
+            showPercent
+            rounded
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/TabBar.jsx

@@ -0,0 +1,92 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * TabBar — sliding underline indicator tabs
+ * Props:
+ *   tabs:         [{ id, label, icon?, count? }]
+ *   active:       string (active tab id)
+ *   onChange:     fn(id)
+ *   capitalize:   bool — when true, tab labels are text-transform: capitalize
+ *   padding:      string — override button padding (default '10px 16px')
+ */
+export default function TabBar({ tabs, active, onChange, capitalize = false, padding = '10px 16px' }) {
+  const barRef   = useRef(null);
+  const indRef   = useRef(null);
+  const initDone = useRef(false);
+
+  useEffect(() => {
+    const bar = barRef.current;
+    const ind = indRef.current;
+    if (!bar || !ind) return;
+
+    const activeBtn = bar.querySelector(`[data-tabid="${active}"]`);
+    if (!activeBtn) return;
+
+    const barRect = bar.getBoundingClientRect();
+    const btnRect = activeBtn.getBoundingClientRect();
+    const x = btnRect.left - barRect.left;
+    const w = btnRect.width;
+
+    if (!initDone.current) {
+      ind.style.transition = 'none';
+      ind.style.width      = w + 'px';
+      ind.style.transform  = `translateX(${x}px)`;
+      requestAnimationFrame(() => { ind.style.transition = ''; });
+      initDone.current = true;
+    } else {
+      ind.style.width     = w + 'px';
+      ind.style.transform = `translateX(${x}px)`;
+    }
+  }, [active, tabs]);
+
+  return (
+    <div ref={barRef} style={{ display:'flex', position:'relative' }}>
+      {/* sliding underline */}
+      <div ref={indRef} style={{
+        position:'absolute', bottom:'-1px', left:0,
+        height:2, width:0,
+        background:'var(--accent)',
+        borderRadius:'2px 2px 0 0',
+        transition:'transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1)',
+        pointerEvents:'none', zIndex:2,
+      }} />
+
+      {tabs.map(t => {
+        const isActive = active === t.id;
+        return (
+          <button
+            key={t.id}
+            data-tabid={t.id}
+            onClick={() => onChange(t.id)}
+            style={{
+              display:'flex', alignItems:'center', gap:6,
+              padding,
+              border:'none', background:'none',
+              fontSize:'.82rem', fontWeight:500,
+              color: isActive ? 'var(--accent)' : 'var(--muted)',
+              cursor:'pointer',
+              transition:'color .18s',
+              marginBottom:'-1px',
+              position:'relative', zIndex:1,
+              fontFamily:'inherit',
+              whiteSpace:'nowrap',
+              textTransform: capitalize ? 'capitalize' : 'none',
+            }}
+          >
+            {t.icon}{t.label}
+            {t.count != null && t.count > 0 && (
+              <span style={{
+                background: isActive ? 'var(--accent-bg)' : 'var(--grey-1)',
+                color:      isActive ? 'var(--accent)'    : 'var(--muted)',
+                borderRadius: 10,
+                padding: '1px 6px',
+                fontSize: '.68rem',
+                transition: 'background .18s, color .18s',
+              }}>{t.count}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}