tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxLiveMetrics.tsx

@@ -1,315 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  createElement,
-  type CSSProperties,
-} from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface MetricItem {
-  id: string;
-  label: string;
-  value: number | string;
-  unit?: string;
-  previousValue?: number;
-  trend?: 'up' | 'down' | 'flat';
-  trendValue?: string;
-  color?: string;
-  sparkline?: number[];
-  status?: 'normal' | 'warning' | 'critical';
-}
-
-export interface TkxLiveMetricsProps {
-  metrics: MetricItem[];
-  columns?: number;
-  animate?: boolean;
-  refreshInterval?: number;
-  onMetricClick?: (metric: MetricItem) => void;
-}
-
-// ── CSS injection ────────────────────────────────────────────────────────────
-
-let metricsStylesInjected = false;
-function injectMetricsStyles() {
-  if (metricsStylesInjected || typeof document === 'undefined') return;
-  metricsStylesInjected = true;
-  const el = document.createElement('style');
-  el.id = 'tkx-live-metrics-styles';
-  el.textContent = `
-@keyframes tkx-metric-pulse {
-  0%   { opacity: 1; }
-  40%  { opacity: 0.4; }
-  100% { opacity: 1; }
-}
-@keyframes tkx-metric-shimmer {
-  0%   { background-position: -200% 0; }
-  100% { background-position:  200% 0; }
-}
-.tkx-metric-shimmer {
-  animation: tkx-metric-shimmer 0.6s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .tkx-metric-shimmer { animation: none; }
-  .tkx-metric-pulse   { animation: none; }
-}
-  `.trim();
-  document.head.appendChild(el);
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function formatValue(val: number | string, unit?: string): string {
-  if (typeof val === 'string') return val;
-  const formatted = val >= 1_000_000
-    ? `${(val / 1_000_000).toFixed(1)}M`
-    : val >= 1_000
-    ? `${(val / 1_000).toFixed(1)}k`
-    : String(Number.isInteger(val) ? val : val.toFixed(2));
-  return unit ? `${formatted}${unit}` : formatted;
-}
-
-function getStatusColor(status: MetricItem['status'], theme: ReturnType<typeof useTheme>): string {
-  switch (status) {
-    case 'warning':  return theme.warning;
-    case 'critical': return theme.danger;
-    default:         return theme.primary;
-  }
-}
-
-// ── useCountUp ───────────────────────────────────────────────────────────────
-
-function useReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(() =>
-    typeof window !== 'undefined'
-      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-      : false
-  );
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
-    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, []);
-  return reduced;
-}
-
-function useCountUp(target: number, duration: number, enabled: boolean): number {
-  const [displayed, setDisplayed] = useState(target);
-  const startRef = useRef(target);
-  const startTimeRef = useRef<number | null>(null);
-  const rafRef = useRef<number | null>(null);
-  const reducedMotion = useReducedMotion();
-
-  useEffect(() => {
-    if (!enabled || reducedMotion) {
-      setDisplayed(target);
-      startRef.current = target;
-      return;
-    }
-    const from = startRef.current;
-    if (from === target) return;
-    startTimeRef.current = null;
-
-    const step = (now: number) => {
-      if (startTimeRef.current === null) startTimeRef.current = now;
-      const elapsed = now - startTimeRef.current;
-      const progress = Math.min(elapsed / duration, 1);
-      // ease-out cubic
-      const eased = 1 - Math.pow(1 - progress, 3);
-      setDisplayed(from + (target - from) * eased);
-      if (progress < 1) {
-        rafRef.current = requestAnimationFrame(step);
-      } else {
-        startRef.current = target;
-      }
-    };
-
-    rafRef.current = requestAnimationFrame(step);
-    return () => {
-      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-    };
-  }, [target, duration, enabled, reducedMotion]);
-
-  return displayed;
-}
-
-// ── Sparkline ────────────────────────────────────────────────────────────────
-
-function Sparkline({ data, color }: { data: number[]; color: string }) {
-  if (data.length < 2) return null;
-
-  const W = 80;
-  const H = 24;
-  const minV = Math.min(...data);
-  const maxV = Math.max(...data);
-  const range = maxV - minV || 1;
-
-  const points = data.map((v, i) => {
-    const x = (i / (data.length - 1)) * W;
-    const y = H - ((v - minV) / range) * (H - 2) - 1;
-    return `${x.toFixed(1)},${y.toFixed(1)}`;
-  });
-
-  return createElement(
-    'svg',
-    { width: W, height: H, viewBox: `0 0 ${W} ${H}`, 'aria-hidden': 'true' },
-    createElement('polyline', {
-      points: points.join(' '),
-      fill: 'none',
-      stroke: color,
-      strokeWidth: 1.5,
-      strokeLinejoin: 'round',
-      strokeLinecap: 'round',
-    }),
-  );
-}
-
-// ── TrendIcon ────────────────────────────────────────────────────────────────
-
-function TrendIcon({ trend, theme }: { trend: MetricItem['trend']; theme: ReturnType<typeof useTheme> }) {
-  if (trend === 'up')   return createElement('span', { style: { color: theme.success, fontSize: 14, fontWeight: 700 } }, '▲');
-  if (trend === 'down') return createElement('span', { style: { color: theme.danger,  fontSize: 14, fontWeight: 700 } }, '▼');
-  return createElement('span', { style: { color: theme.textMuted, fontSize: 14 } }, '→');
-}
-
-// ── MetricCard ───────────────────────────────────────────────────────────────
-
-interface MetricCardProps {
-  metric: MetricItem;
-  animate: boolean;
-  onMetricClick?: (metric: MetricItem) => void;
-  theme: ReturnType<typeof useTheme>;
-}
-
-function MetricCard({ metric, animate, onMetricClick, theme }: MetricCardProps) {
-  const accentColor = metric.color ?? getStatusColor(metric.status, theme);
-  const numericValue = typeof metric.value === 'number' ? metric.value : NaN;
-  const animatedValue = useCountUp(isNaN(numericValue) ? 0 : numericValue, 600, animate && !isNaN(numericValue));
-
-  const [shimmer, setShimmer] = useState(false);
-  const prevValueRef = useRef(metric.value);
-
-  useEffect(() => {
-    if (prevValueRef.current !== metric.value) {
-      prevValueRef.current = metric.value;
-      setShimmer(true);
-      const t = window.setTimeout(() => setShimmer(false), 700);
-      return () => clearTimeout(t);
-    }
-    return undefined;
-  }, [metric.value]);
-
-  const hasPrev = metric.previousValue !== undefined && metric.previousValue !== numericValue;
-
-  const cardStyle: CSSProperties = {
-    background: theme.surface,
-    border: `1px solid ${theme.border}`,
-    borderLeft: `4px solid ${accentColor}`,
-    borderRadius: 8,
-    padding: '14px 16px',
-    cursor: onMetricClick ? 'pointer' : 'default',
-    position: 'relative',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-  };
-
-  const shimmerOverlay: CSSProperties = shimmer
-    ? {
-        position: 'absolute',
-        inset: 0,
-        background: `linear-gradient(90deg, transparent 0%, ${accentColor}22 50%, transparent 100%)`,
-        backgroundSize: '200% 100%',
-        animation: 'tkx-metric-shimmer 0.6s ease-in-out',
-        pointerEvents: 'none',
-      }
-    : {};
-
-  const displayedText = isNaN(numericValue)
-    ? sanitizeString(String(metric.value))
-    : formatValue(animatedValue, metric.unit);
-
-  return createElement(
-    'div',
-    {
-      style: cardStyle,
-      className: shimmer ? 'tkx-metric-shimmer' : undefined,
-      onClick: onMetricClick ? () => onMetricClick(metric) : undefined,
-      role: onMetricClick ? 'button' : undefined,
-      tabIndex: onMetricClick ? 0 : undefined,
-    },
-    // Shimmer overlay
-    shimmer && createElement('div', { style: shimmerOverlay }),
-    // Label
-    createElement('div', { style: { fontSize: 12, color: theme.textMuted, marginBottom: 6, fontWeight: 500, letterSpacing: '0.03em' } }, sanitizeString(metric.label)),
-    // Value row
-    createElement(
-      'div',
-      { style: { display: 'flex', alignItems: 'flex-end', gap: 6, marginBottom: 6 } },
-      createElement('span', { style: { fontSize: 28, fontWeight: 700, color: theme.text, lineHeight: 1 } }, displayedText),
-      metric.unit && isNaN(numericValue) && createElement('span', { style: { fontSize: 14, color: theme.textMuted, marginBottom: 2 } }, sanitizeString(metric.unit)),
-    ),
-    // Trend row
-    (metric.trend || metric.trendValue) && createElement(
-      'div',
-      { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: metric.sparkline ? 8 : 0 } },
-      metric.trend && createElement(TrendIcon, { trend: metric.trend, theme }),
-      metric.trendValue && createElement('span', { style: { fontSize: 12, color: theme.textMuted } }, sanitizeString(metric.trendValue)),
-    ),
-    // Previous value
-    hasPrev && createElement(
-      'div',
-      { style: { fontSize: 11, color: theme.textMuted, marginTop: 2 } },
-      `was ${formatValue(metric.previousValue as number)}`,
-    ),
-    // Sparkline
-    metric.sparkline && metric.sparkline.length >= 2 && createElement(
-      'div',
-      { style: { marginTop: 8 } },
-      createElement(Sparkline, { data: metric.sparkline, color: accentColor }),
-    ),
-  );
-}
-
-// ── TkxLiveMetrics ───────────────────────────────────────────────────────────
-
-export function TkxLiveMetrics({
-  metrics,
-  columns = 3,
-  animate = true,
-  onMetricClick,
-}: TkxLiveMetricsProps) {
-  const theme = useTheme();
-  injectMetricsStyles();
-
-  const gridStyle: CSSProperties = {
-    display: 'grid',
-    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-    gap: 16,
-  };
-
-  return createElement(
-    'div',
-    { style: gridStyle },
-    ...metrics.map((metric) =>
-      createElement(MetricCard, {
-        key: metric.id,
-        metric,
-        animate,
-        onMetricClick,
-        theme,
-      }),
-    ),
-  );
-}
-
-// Satisfy import requirement
-void tkx;

package/src/components/TkxLogo.tsx

@@ -1,299 +0,0 @@
-'use client';
-
-import { type ReactNode, type CSSProperties } from 'react';
-import { useTheme } from '../themes';
-import { useReducedMotion } from '../hooks';
-import { cx } from '../engine/tkx';
-
-// ── Props ──────────────────────────────────────────────────────────────────────
-
-export type LogoVariant = 'full' | 'icon-only' | 'text-only';
-export type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
-export type LogoOrientation = 'horizontal' | 'stacked';
-
-export interface TkxLogoProps {
-  text?: string;
-  tagline?: string;
-  variant?: LogoVariant;
-  size?: LogoSize;
-  orientation?: LogoOrientation;
-  mark?: ReactNode;
-  color?: string;
-  className?: string;
-  style?: CSSProperties;
-  onClick?: () => void;
-}
-
-// ── Size config ────────────────────────────────────────────────────────────────
-
-const SIZE_CONFIG: Record<LogoSize, {
-  markSize: number;
-  fontSize: number;
-  taglineSize: number;
-  gap: number;
-  letterSpacing: string;
-}> = {
-  sm: { markSize: 24, fontSize: 14, taglineSize: 10, gap: 6, letterSpacing: '-0.01em' },
-  md: { markSize: 32, fontSize: 18, taglineSize: 11, gap: 8, letterSpacing: '-0.02em' },
-  lg: { markSize: 44, fontSize: 26, taglineSize: 13, gap: 12, letterSpacing: '-0.03em' },
-  xl: { markSize: 60, fontSize: 36, taglineSize: 15, gap: 16, letterSpacing: '-0.04em' },
-};
-
-// ── Default SVG Mark ───────────────────────────────────────────────────────────
-// Hexagonal quantum mark with a lightning bolt inside.
-
-interface DefaultMarkProps {
-  size: number;
-  primaryColor: string;
-  reducedMotion: boolean;
-}
-
-function DefaultMark({ size, primaryColor, reducedMotion }: DefaultMarkProps) {
-  const id = 'tkx-logo-gradient';
-  const glowId = 'tkx-logo-glow';
-
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      style={{
-        filter: !reducedMotion ? `drop-shadow(0 0 ${size * 0.15}px ${primaryColor}60)` : undefined,
-        flexShrink: 0,
-      }}
-    >
-      <defs>
-        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor={primaryColor} stopOpacity="1" />
-          <stop offset="100%" stopColor={primaryColor} stopOpacity="0.6" />
-        </linearGradient>
-        <filter id={glowId} x="-20%" y="-20%" width="140%" height="140%">
-          <feGaussianBlur stdDeviation="1.5" result="blur" />
-          <feMerge>
-            <feMergeNode in="blur" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-
-      {/* Outer hexagon */}
-      <polygon
-        points="24,3 42,13.5 42,34.5 24,45 6,34.5 6,13.5"
-        stroke={primaryColor}
-        strokeWidth="2"
-        fill={`${primaryColor}12`}
-        strokeLinejoin="round"
-      />
-
-      {/* Inner hexagon (rotated) */}
-      <polygon
-        points="24,9 37,16.5 37,31.5 24,39 11,31.5 11,16.5"
-        stroke={primaryColor}
-        strokeWidth="1"
-        strokeOpacity="0.3"
-        fill="none"
-        strokeLinejoin="round"
-      />
-
-      {/* Lightning bolt */}
-      <path
-        d="M27 10 L18 26 L24 26 L21 38 L30 22 L24 22 Z"
-        fill={`url(#${id})`}
-        stroke={primaryColor}
-        strokeWidth="0.5"
-        strokeLinejoin="round"
-        filter={`url(#${glowId})`}
-      />
-
-      {/* Corner accents */}
-      <circle cx="24" cy="3" r="1.5" fill={primaryColor} opacity="0.7" />
-      <circle cx="42" cy="13.5" r="1.5" fill={primaryColor} opacity="0.5" />
-      <circle cx="42" cy="34.5" r="1.5" fill={primaryColor} opacity="0.5" />
-      <circle cx="24" cy="45" r="1.5" fill={primaryColor} opacity="0.7" />
-      <circle cx="6" cy="34.5" r="1.5" fill={primaryColor} opacity="0.5" />
-      <circle cx="6" cy="13.5" r="1.5" fill={primaryColor} opacity="0.5" />
-    </svg>
-  );
-}
-
-// ── Glow animation style injection ────────────────────────────────────────────
-
-let glowStyleInjected = false;
-
-function injectGlowStyle() {
-  if (glowStyleInjected || typeof document === 'undefined') return;
-  glowStyleInjected = true;
-  const style = document.createElement('style');
-  style.id = 'tkx-logo-glow-anim';
-  style.textContent = `
-    @media (prefers-reduced-motion: no-preference) {
-      .tkx-logo-glow {
-        animation: tkx-logo-pulse 3s ease-in-out infinite;
-      }
-      @keyframes tkx-logo-pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.75; }
-      }
-    }
-  `;
-  document.head.appendChild(style);
-}
-
-// ── TkxLogo Component ──────────────────────────────────────────────────────────
-
-export function TkxLogo({
-  text = 'TekiVex',
-  tagline,
-  variant = 'full',
-  size = 'md',
-  orientation = 'horizontal',
-  mark,
-  color,
-  className,
-  style,
-  onClick,
-}: TkxLogoProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const primaryColor = color ?? theme.primary;
-  const config = SIZE_CONFIG[size];
-
-  // Inject glow animation on first render
-  injectGlowStyle();
-
-  const showMark = variant !== 'text-only';
-  const showText = variant !== 'icon-only';
-
-  const isStacked = orientation === 'stacked';
-  const isClickable = typeof onClick === 'function';
-
-  const containerStyle: CSSProperties = {
-    display: 'inline-flex',
-    flexDirection: isStacked ? 'column' : 'row',
-    alignItems: isStacked ? 'center' : 'center',
-    gap: config.gap,
-    cursor: isClickable ? 'pointer' : 'default',
-    userSelect: 'none',
-    textDecoration: 'none',
-    ...style,
-  };
-
-  const textGroupStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: isStacked ? 'center' : 'flex-start',
-    gap: 2,
-  };
-
-  const brandTextStyle: CSSProperties = {
-    fontSize: config.fontSize,
-    fontWeight: 800,
-    letterSpacing: config.letterSpacing,
-    lineHeight: 1,
-    color: theme.text,
-    fontFamily: 'inherit',
-    margin: 0,
-    padding: 0,
-  };
-
-  const taglineStyle: CSSProperties = {
-    fontSize: config.taglineSize,
-    fontWeight: 500,
-    color: theme.textMuted,
-    letterSpacing: '0.04em',
-    lineHeight: 1,
-    margin: 0,
-    padding: 0,
-  };
-
-  // Brand name: "Teki" in theme text color, "Vex" in primary color
-  const brandParts = splitBrand(text, primaryColor, theme.text);
-
-  const ariaLabel = tagline
-    ? `${text} — ${tagline}`
-    : text;
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault();
-      onClick?.();
-    }
-  };
-
-  return (
-    <div
-      className={cx('tkx-logo-glow', className ?? '')}
-      style={containerStyle}
-      role="img"
-      aria-label={ariaLabel}
-      onClick={isClickable ? onClick : undefined}
-      onKeyDown={isClickable ? handleKeyDown : undefined}
-      tabIndex={isClickable ? 0 : undefined}
-    >
-      {showMark && (
-        mark ?? (
-          <DefaultMark
-            size={config.markSize}
-            primaryColor={primaryColor}
-            reducedMotion={reducedMotion}
-          />
-        )
-      )}
-
-      {showText && (
-        <div style={textGroupStyle}>
-          <span style={brandTextStyle} aria-hidden="true">
-            {brandParts}
-          </span>
-          {tagline && (
-            <span style={taglineStyle} aria-hidden="true">
-              {tagline}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-TkxLogo.displayName = 'TkxLogo';
-
-// ── Helpers ────────────────────────────────────────────────────────────────────
-
-/**
- * Splits the brand text so the last 3 characters are colored with the primary color.
- * For "TekiVex" → "Teki" (text color) + "Vex" (primary color).
- * Falls back to splitting at the midpoint for short names.
- */
-function splitBrand(
-  text: string,
-  primaryColor: string,
-  textColor: string,
-): ReactNode {
-  if (text.length <= 3) {
-    return <span style={{ color: primaryColor }}>{text}</span>;
-  }
-
-  // Try to find a natural camelCase split point
-  const camelMatch = text.match(/^([A-Za-z]+?)([A-Z][a-z]*)$/);
-  if (camelMatch) {
-    return (
-      <>
-        <span style={{ color: textColor }}>{camelMatch[1]}</span>
-        <span style={{ color: primaryColor }}>{camelMatch[2]}</span>
-      </>
-    );
-  }
-
-  // Default: last 3 chars get primary color
-  const split = text.length - 3;
-  return (
-    <>
-      <span style={{ color: textColor }}>{text.slice(0, split)}</span>
-      <span style={{ color: primaryColor }}>{text.slice(split)}</span>
-    </>
-  );
-}