cynx-lib 1.3.28

package/ui/components/Select.jsx

@@ -0,0 +1,415 @@
+import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Check, X } from 'lucide-react';
+
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, searchHeight: 22, searchFont: 10.5, itemMinHeight: 18, itemPadding: '3px 5px' },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, searchHeight: 26, searchFont: 11.5, itemMinHeight: 22, itemPadding: '4.5px 7px' },
+  md: { height: 32, fontSize: 13, paddingH: 10, searchHeight: 32, searchFont: 12.5, itemMinHeight: 28, itemPadding: '8px 10px' },
+  lg: { height: 36, fontSize: 14, paddingH: 14, searchHeight: 34, searchFont: 13, itemMinHeight: 32, itemPadding: '9px 12px' },
+};
+
+const KEYFRAMES = `
+@keyframes selFadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+@keyframes selFadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+`;
+let _id = 'cynx-select-styles';
+
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = KEYFRAMES;
+  document.head.appendChild(tag);
+}
+
+export default function Select({
+  options = [],
+  value,
+  onChange,
+  placeholder = 'Select...',
+  disabled = false,
+  multi = false,
+  searchable = false,
+  clearable = false,
+  onClear,
+  size = 'md',
+  style = {},
+  rounded = false,
+  showCount = false,
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0, openUp: false, maxHeight: 200 });
+  const wrapRef = useRef(null);
+  const dropRef = useRef(null);
+  const inputRef = useRef(null);
+
+  ensureStyles();
+
+  const calcPosition = useCallback(() => {
+    if (!wrapRef.current) return;
+    const r = wrapRef.current.getBoundingClientRect();
+    const dropEl = dropRef.current;
+    const dropHeight = dropEl ? dropEl.offsetHeight : 220;
+    const spaceBelow = window.innerHeight - r.bottom;
+    const spaceAbove = r.top;
+    
+    // If not enough space below (< dropHeight + 10) and more space above, open up
+    const openUp = spaceBelow < Math.min(dropHeight, 220) + 12 && spaceAbove > spaceBelow;
+    
+    // Dynamic max-height for inner list to prevent overflow
+    const availableSpace = openUp ? spaceAbove - 16 : spaceBelow - 16;
+    const calculatedMaxHeight = Math.max(90, Math.min(220, availableSpace - (searchable ? 46 : 14)));
+
+    let top;
+    if (openUp) {
+      top = Math.max(8, r.top - (dropEl ? dropEl.offsetHeight : dropHeight) - 4);
+    } else {
+      top = Math.min(window.innerHeight - 40, r.bottom + 4);
+    }
+
+    let left = r.left;
+    const width = r.width;
+    if (left + width > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - width - 8);
+    }
+
+    setPos({
+      top,
+      left,
+      width,
+      openUp,
+      maxHeight: calculatedMaxHeight,
+    });
+  }, [searchable]);
+
+  useEffect(() => {
+    if (!open) return;
+    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', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
+    return () => {
+      document.removeEventListener('mousedown', close, true);
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
+    };
+  }, [open, calcPosition]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      calcPosition();
+      requestAnimationFrame(calcPosition);
+    }
+  }, [open, calcPosition]);
+
+  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().trim();
+    return options.filter(o => {
+      for (const [key, val] of Object.entries(o)) {
+        if (key === 'displayLabel') continue;
+        if (val != null && typeof val !== 'function' && typeof val !== 'object') {
+          if (String(val).toLowerCase().includes(q)) return true;
+        }
+      }
+      return false;
+    });
+  }, [options, query]);
+
+  function handleOpen() {
+    if (disabled) return;
+    if (!open && wrapRef.current) {
+      calcPosition();
+    }
+    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.displayLabel || opt.label) : optVal;
+  }
+
+  const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value !== undefined && value !== null ? [value] : []);
+
+  const s = SIZES[size] || SIZES.md;
+  const heightVal = s.height;
+  const paddingVal = `0 ${s.paddingH}px`;
+  const fontSizeVal = `${s.fontSize}px`;
+
+  let radiusVal = rounded
+    ? (typeof rounded === 'string'
+        ? (rounded.endsWith('px') || rounded.endsWith('rem') || rounded.startsWith('var') ? rounded : `${rounded}px`)
+        : typeof rounded === 'number'
+          ? `${rounded}px`
+          : '6px')
+    : (s.height <= 26 ? '4px' : s.height <= 28 ? '6px' : 'var(--rmd,var(--rads, 8px))');
+
+  return (
+    <div
+      ref={wrapRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        boxSizing: 'border-box',
+        fontFamily: 'var(--f,var(--sans, inherit))',
+        opacity: disabled ? 0.5 : 1,
+        pointerEvents: disabled ? 'none' : undefined,
+        ...style,
+      }}
+    >
+      <div
+        onClick={handleOpen}
+        style={{
+          width: '100%',
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 4,
+          padding: paddingVal,
+          height: heightVal,
+          background: 'var(--sf,var(--surface, #ffffff))',
+          border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
+          borderRadius: radiusVal,
+          cursor: 'pointer',
+          fontFamily: 'var(--f,var(--sans,inherit))',
+          fontSize: fontSizeVal,
+          lineHeight: 1.2,
+          color: 'var(--t,var(--primary-text, #0f172a))',
+          outline: 'none',
+          transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+          boxShadow: open ? 'var(--infd, rgba(37,99,235,.1))' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+        }}
+      >
+        <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
+          {multi && selectedValues.length > 0 ? (
+            showCount ? (
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--t,var(--primary-text, #0f172a))' }}>
+                {typeof showCount === 'function'
+                  ? showCount(selectedValues.length)
+                  : selectedValues.length === 1
+                    ? getLabel(selectedValues[0])
+                    : `Выбрано: ${selectedValues.length}`}
+              </span>
+            ) : (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
+                {selectedValues.map(v => (
+                  <span key={v} style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    padding: '2px 6px',
+                    background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
+                    border: '1px solid var(--accent, #f99e2c)',
+                    borderRadius: 4,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: 'var(--accent, #f99e2c)',
+                    whiteSpace: 'nowrap',
+                    maxWidth: 140,
+                    opacity: 0.85,
+                  }}>
+                    {getLabel(v)}
+                    <X
+                      size={11}
+                      style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
+                      onMouseDown={(e) => removeTag(e, v)}
+                    />
+                  </span>
+                ))}
+              </div>
+            )
+          ) : !multi && selectedValues.length > 0 ? (
+            <span style={{ fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {getLabel(selectedValues[0]) || '\u00A0'}
+            </span>
+          ) : (
+            <span style={{ color: 'var(--t3,var(--grey-3, #cbd5e1))', fontWeight: 400 }}>{placeholder}</span>
+          )}
+        </div>
+        {selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+              if (onClear) onClear();
+              else onChange?.(multi ? [] : '');
+            }}
+            title="Сбросить выбор"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              color: 'var(--muted, #64748b)',
+              padding: '0 2px',
+              flexShrink: 0,
+              borderRadius: 'var(--radxs, 4px)',
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--danger, #ef4444)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted, #64748b)'; }}
+          >
+            <X size={12} />
+          </span>
+        ) : (
+          <ChevronDown
+            size={12}
+            style={{
+              flexShrink: 0,
+              color: 'var(--t3,var(--grey-3, #cbd5e1))',
+              transition: 'transform .2s ease',
+              transform: open ? 'rotate(180deg)' : undefined,
+            }}
+          />
+        )}
+      </div>
+
+      {open && createPortal(
+        <div
+          ref={dropRef}
+          style={{
+            position: 'fixed',
+            zIndex: 9000,
+            top: pos.top,
+            left: pos.left,
+            width: pos.width,
+            boxSizing: 'border-box',
+            background: 'var(--sf,var(--surface, #ffffff))',
+            border: '1px solid var(--bd,var(--border, #e2e8f0))',
+            borderRadius: radiusVal,
+            boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+            padding: 3,
+            animation: `${pos.openUp ? 'selFadeInUp' : 'selFadeInDown'} .15s ease`,
+            overflow: 'hidden',
+          }}
+        >
+          {searchable && (
+            <div style={{ padding: 3 }}>
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder="Поиск..."
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                onMouseDown={e => e.stopPropagation()}
+                style={{
+                  width: '100%',
+                  boxSizing: 'border-box',
+                  padding: s.height <= 26 ? '2px 5px' : s.height <= 28 ? '3px 6px' : '7px 10px',
+                  height: s.searchHeight,
+                  background: 'var(--sf2,var(--grey-1, #f5f5f8))',
+                  border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
+                  borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                  fontFamily: 'var(--f,var(--sans, inherit))',
+                  fontSize: `${s.searchFont}px`,
+                  lineHeight: 1,
+                  color: 'var(--t,var(--primary-text, #0f172a))',
+                  outline: 'none',
+                  transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+                }}
+              />
+            </div>
+          )}
+          <div style={{ maxHeight: pos.maxHeight || 200, overflowY: 'auto' }}>
+            {filtered.length === 0 ? (
+              <div style={{ padding: '10px 8px', textAlign: 'center', color: 'var(--t3,var(--grey-3, #cbd5e1))', fontSize: 11 }}>
+                Ничего не найдено
+              </div>
+            ) : (
+              filtered.map(opt => (
+                <div
+                  key={opt.value}
+                  onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); if (!opt.disabled) toggleOption(opt.value); }}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    minHeight: s.itemMinHeight,
+                    padding: s.itemPadding,
+                    borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                    cursor: opt.disabled ? 'not-allowed' : 'pointer',
+                    color: isSelected(opt.value) ? 'var(--accent, #f99e2c)' : 'var(--t,var(--primary-text, #0f172a))',
+                    background: isSelected(opt.value) ? 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))' : undefined,
+                    fontSize: `${s.searchFont}px`,
+                    fontWeight: 400,
+                    transition: 'background .1s',
+                    userSelect: 'none',
+                    opacity: opt.disabled ? 0.4 : 1,
+                    pointerEvents: opt.disabled ? 'none' : undefined,
+                  }}
+                >
+                  {multi && (
+                    <span style={{
+                      width: 13,
+                      height: 13,
+                      border: `1.5px solid ${isSelected(opt.value) ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
+                      borderRadius: 3,
+                      flexShrink: 0,
+                      position: 'relative',
+                      transition: 'all .15s',
+                      background: isSelected(opt.value) ? 'var(--accent, #f99e2c)' : undefined,
+                    }}>
+                      {isSelected(opt.value) && (
+                        <span style={{
+                          position: 'absolute',
+                          top: 1,
+                          left: 3.5,
+                          width: 4,
+                          height: 6,
+                          border: 'solid var(--def-btn-text,#fff)',
+                          borderWidth: '0 1.5px 1.5px 0',
+                          transform: 'rotate(45deg)',
+                        }} />
+                      )}
+                    </span>
+                  )}
+                  <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minHeight: '1em' }}>
+                    {opt.displayLabel || opt.label || '\u00A0'}
+                  </span>
+                  {!multi && isSelected(opt.value) && (
+                    <Check size={12} style={{ flexShrink: 0, color: 'var(--accent, #f99e2c)' }} />
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}

package/ui/components/Skeleton.jsx

@@ -0,0 +1,118 @@
+const STYLES = `
+@keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
+@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
+.skeleton{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)}
+.skeleton-text{height:12px;margin-bottom:6px}
+`;
+let _id = 'cynx-skeleton-styles';
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+// Auto-inject on module load so raw className="skeleton" works everywhere
+if (typeof document !== 'undefined') ensureStyles();
+
+const SK_BASE = {
+  background: 'linear-gradient(90deg, var(--grey-1, #f0f1f5) 25%, var(--border-light, #e8e8ec) 50%, var(--grey-1, #f0f1f5) 75%)',
+  backgroundSize: '600px 100%',
+  animation: 'sk-shimmer 1.4s ease infinite',
+  borderRadius: 'var(--radxs, 4px)',
+  flexShrink: 0,
+};
+
+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={className}
+      style={{
+        ...SK_BASE,
+        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}
+          style={{
+            ...SK_BASE,
+            width: ws[i % ws.length],
+            height: 12,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonCard({ rows = 3, style = {} }) {
+  ensureStyles();
+  return (
+    <div style={{
+      background: 'var(--surface, #fff)',
+      border: '1px solid var(--border-light, #ebebf0)',
+      borderRadius: 'var(--rad, 10px)',
+      padding: '14px 16px',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.04))',
+      ...style,
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+      }}>
+        <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 style={{ ...SK_BASE, 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/ui/components/Spinner.jsx

@@ -0,0 +1,108 @@
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}.v-progress-circular--indeterminate>svg{animation:progress-circular-rotate .8s linear infinite;transform-origin:center center;transition:all .2s ease-in-out}.v-progress-circular>svg{width:100%;height:100%;margin:auto;position:absolute;inset:0;z-index:0}@keyframes progress-circular-rotate{100%{transform:rotate(270deg)}}@keyframes progress-circular-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.v-progress-circular--indeterminate .v-progress-circular__overlay{animation:progress-circular-dash 1.4s ease-in-out infinite;stroke-linecap:round}`;
+
+let _id = 'cynx-spinner-styles';
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+// Auto-inject on module load
+if (typeof document !== 'undefined') ensureStyles();
+
+export function SpinnerClassic({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  ensureStyles();
+  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, #f8fafc)',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 16,
+        zIndex: 9999,
+      }}>
+        {svg}
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono, ui-monospace, monospace)', color: 'var(--muted, #797b8d)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) return svg;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      {svg}
+    </div>
+  );
+}
+
+export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  ensureStyles();
+  const s = inline ? 14 : size;
+
+  const svg = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.42 42.42"
+      style={{ width: s, height: s, transform: 'rotate(-90deg)' }}>
+      <circle fill="transparent" cx="50%" cy="50%" r="20"
+        stroke="var(--grey-2, #e0e0e0)" strokeWidth="2.42" strokeDasharray="125.66" strokeDashoffset="0" />
+      <circle className="v-progress-circular__overlay" fill="transparent" cx="50%" cy="50%" r="20"
+        stroke={color} strokeWidth="2.42" strokeDasharray="125.66" strokeDashoffset="125.66" />
+    </svg>
+  );
+
+  if (fullPage) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--bg, #f8fafc)',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 16,
+        zIndex: 9999,
+      }}>
+        <div className="v-progress-circular v-progress-circular--indeterminate" style={{ width: s, height: s }}>
+          {svg}
+        </div>
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono, ui-monospace, monospace)', color: 'var(--muted, #797b8d)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) {
+    return (
+      <div className="v-progress-circular v-progress-circular--indeterminate"
+        style={{ width: s, height: s, position: 'relative', display: 'inline-flex', flexShrink: 0 }}>
+        <svg viewBox="0 0 42.42 42.42"
+          style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>
+          <circle className="v-progress-circular__overlay" fill="transparent" cx="50%" cy="50%" r="20"
+            stroke={color} strokeWidth="2.42" strokeDasharray="125.66" strokeDashoffset="125.66" />
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      <div className="v-progress-circular v-progress-circular--indeterminate" style={{ width: s, height: s }}>
+        {svg}
+      </div>
+    </div>
+  );
+}
+
+export { Spinner as SpinnerNew };
+export default Spinner;

package/ui/components/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: 'var(--surface,#fff)', border: '1px solid var(--border, #e2e8f0)', borderRadius: 'var(--rad, 10px)',
+      boxShadow: 'var(--shadow, 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>
+  );
+}