tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxAIConfidenceBar.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import { useEffect, useRef, type CSSProperties } from 'react';
-import { useTheme } from '../themes';
-import { cx, tkx } from '../engine/tkx';
-
-export interface TkxAIConfidenceBarProps {
-  /** 0–100 confidence value */
-  value: number;
-  /** Optional label for the metric being shown */
-  label?: string;
-  /** Show numeric percentage text */
-  showLabel?: boolean;
-  /** Size of the bar */
-  size?: 'sm' | 'md' | 'lg';
-  /** Animate on mount */
-  animate?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const HEIGHT: Record<NonNullable<TkxAIConfidenceBarProps['size']>, number> = {
-  sm: 4, md: 8, lg: 12,
-};
-
-function confidenceColor(value: number, primary: string): string {
-  if (value >= 80) return '#10b981';  // green
-  if (value >= 55) return primary;    // brand
-  if (value >= 30) return '#f59e0b';  // amber
-  return '#ef4444';                   // red
-}
-
-export function TkxAIConfidenceBar({
-  value,
-  label,
-  showLabel = true,
-  size = 'md',
-  animate = true,
-  className,
-  style,
-}: TkxAIConfidenceBarProps) {
-  const theme = useTheme();
-  const fillRef = useRef<HTMLDivElement>(null);
-  const clamped = Math.max(0, Math.min(100, value));
-  const color = confidenceColor(clamped, theme.primary);
-  const h = HEIGHT[size];
-
-  useEffect(() => {
-    if (!animate || !fillRef.current) return;
-    const el = fillRef.current;
-    el.style.width = '0%';
-    const raf = requestAnimationFrame(() => {
-      el.style.transition = 'width 0.9s cubic-bezier(0.4, 0, 0.2, 1)';
-      el.style.width = `${clamped}%`;
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [clamped, animate]);
-
-  const label_ = typeof clamped === 'number'
-    ? `${clamped.toFixed(0)}% AI confidence${label ? ` for ${label}` : ''}`
-    : label;
-
-  return (
-    <div
-      className={cx(tkx('flex flex-col gap-1'), className)}
-      style={style}
-      role="meter"
-      aria-valuenow={clamped}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-label={label_}
-    >
-      {(label || showLabel) && (
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
-          {label && (
-            <span style={{ fontSize: 12, fontWeight: 600, color: theme.textMuted }}>
-              {label}
-            </span>
-          )}
-          {showLabel && (
-            <span style={{ fontSize: 12, fontWeight: 700, color, marginLeft: 'auto' }}>
-              {clamped.toFixed(0)}%
-            </span>
-          )}
-        </div>
-      )}
-
-      {/* Track */}
-      <div style={{
-        height: h,
-        borderRadius: h,
-        background: `${theme.border}`,
-        overflow: 'hidden',
-        position: 'relative',
-      }}>
-        {/* Shimmer */}
-        <div style={{
-          position: 'absolute', inset: 0,
-          background: `linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%)`,
-          backgroundSize: '200% 100%',
-          animation: 'tkx-ai-shimmer 2s linear infinite',
-          pointerEvents: 'none',
-          zIndex: 1,
-        }} />
-        {/* Fill */}
-        <div
-          ref={fillRef}
-          style={{
-            height: '100%',
-            width: animate ? '0%' : `${clamped}%`,
-            background: `linear-gradient(90deg, ${color}cc, ${color})`,
-            borderRadius: h,
-            boxShadow: `0 0 8px ${color}66`,
-            transition: animate ? undefined : 'width 0.3s ease',
-          }}
-        />
-      </div>
-
-      {/* Confidence label */}
-      <div style={{ fontSize: 10, color: theme.textMuted, marginTop: 2, display: 'flex', gap: 4, alignItems: 'center' }}>
-        <span style={{ width: 6, height: 6, borderRadius: '50%', background: color, display: 'inline-block', flexShrink: 0 }} />
-        {clamped >= 80 ? 'High confidence' : clamped >= 55 ? 'Moderate confidence' : clamped >= 30 ? 'Low confidence' : 'Very low — review manually'}
-      </div>
-
-      <style>{`
-        @keyframes tkx-ai-shimmer {
-          0%   { background-position: -200% 0; }
-          100% { background-position:  200% 0; }
-        }
-      `}</style>
-    </div>
-  );
-}

package/src/components/TkxAIThinking.tsx

@@ -1,193 +0,0 @@
-'use client';
-
-import { useState, useEffect, type CSSProperties } from 'react';
-import { useTheme } from '../themes';
-import { cx, tkx } from '../engine/tkx';
-
-export interface TkxAIThinkingProps {
-  /** Text shown while thinking */
-  label?: string;
-  /** What steps the AI is working through (optional animated list) */
-  steps?: string[];
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg';
-  /** Visual style */
-  variant?: 'dots' | 'pulse' | 'wave' | 'orbit';
-  /** Whether actively thinking (false = done) */
-  active?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-function DotsIndicator({ color }: { color: string }) {
-  return (
-    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-      {[0, 1, 2].map(i => (
-        <div key={i} style={{
-          width: 7, height: 7, borderRadius: '50%',
-          background: color,
-          animation: `tkx-thinking-dot 1.2s ease-in-out ${i * 0.18}s infinite`,
-        }} />
-      ))}
-    </div>
-  );
-}
-
-function PulseIndicator({ color }: { color: string }) {
-  return (
-    <div style={{ position: 'relative', width: 24, height: 24 }}>
-      <div style={{
-        position: 'absolute', inset: 0, borderRadius: '50%',
-        background: color, opacity: 0.15,
-        animation: 'tkx-thinking-pulse 1.5s ease-out infinite',
-      }} />
-      <div style={{
-        position: 'absolute', inset: 4, borderRadius: '50%',
-        background: color, opacity: 0.6,
-        animation: 'tkx-thinking-pulse 1.5s ease-out 0.3s infinite',
-      }} />
-      <div style={{
-        position: 'absolute', inset: 8, borderRadius: '50%',
-        background: color,
-      }} />
-    </div>
-  );
-}
-
-function WaveIndicator({ color }: { color: string }) {
-  return (
-    <div style={{ display: 'flex', gap: 3, alignItems: 'center', height: 20 }}>
-      {[0, 1, 2, 3, 4].map(i => (
-        <div key={i} style={{
-          width: 3, borderRadius: 3,
-          background: color,
-          animation: `tkx-thinking-wave 1s ease-in-out ${i * 0.1}s infinite`,
-        }} />
-      ))}
-    </div>
-  );
-}
-
-function OrbitIndicator({ color }: { color: string }) {
-  return (
-    <div style={{ position: 'relative', width: 28, height: 28 }}>
-      <div style={{
-        position: 'absolute', inset: 0, borderRadius: '50%',
-        border: `2px solid ${color}33`,
-      }} />
-      <div style={{
-        position: 'absolute', inset: 0, borderRadius: '50%',
-        border: `2px solid transparent`,
-        borderTopColor: color,
-        animation: 'tkx-thinking-orbit 0.8s linear infinite',
-      }} />
-      <div style={{
-        position: 'absolute', inset: '38%', borderRadius: '50%',
-        background: color, opacity: 0.8,
-      }} />
-    </div>
-  );
-}
-
-const FONT: Record<NonNullable<TkxAIThinkingProps['size']>, number> = {
-  sm: 12, md: 14, lg: 16,
-};
-
-export function TkxAIThinking({
-  label = 'Thinking…',
-  steps,
-  size = 'md',
-  variant = 'dots',
-  active = true,
-  className,
-  style,
-}: TkxAIThinkingProps) {
-  const theme = useTheme();
-  const [stepIdx, setStepIdx] = useState(0);
-
-  useEffect(() => {
-    if (!steps?.length || !active) return;
-    const id = setInterval(() => {
-      setStepIdx(i => (i + 1) % steps.length);
-    }, 1800);
-    return () => clearInterval(id);
-  }, [steps, active]);
-
-  const color = theme.primary;
-  const fs = FONT[size];
-
-  const indicator = {
-    dots: <DotsIndicator color={color} />,
-    pulse: <PulseIndicator color={color} />,
-    wave: <WaveIndicator color={color} />,
-    orbit: <OrbitIndicator color={color} />,
-  }[variant];
-
-  return (
-    <div
-      className={cx(tkx('inline-flex flex-col gap-2'), className)}
-      style={style}
-      role="status"
-      aria-live="polite"
-      aria-label={active ? label : 'Done thinking'}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-        {/* Indicator */}
-        <div style={{ opacity: active ? 1 : 0.35, transition: 'opacity 0.3s' }}>
-          {active ? indicator : (
-            <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#10b981', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <span style={{ color: '#fff', fontSize: 11, fontWeight: 900 }}>✓</span>
-            </div>
-          )}
-        </div>
-
-        {/* Label / step text */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <span style={{
-            fontSize: fs, fontWeight: 600,
-            color: active ? theme.text : theme.textMuted,
-            transition: 'color 0.3s',
-          }}>
-            {active ? (steps ? steps[stepIdx] : label) : 'Done'}
-          </span>
-          {active && (
-            <span style={{ fontSize: fs - 2, color: theme.textMuted }}>
-              ⚛ Quantum AI · Amplitude Amplification
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Step progress dots */}
-      {steps && steps.length > 1 && (
-        <div style={{ display: 'flex', gap: 4, paddingLeft: 2 }}>
-          {steps.map((_, i) => (
-            <div key={i} style={{
-              width: i === stepIdx ? 16 : 6, height: 4, borderRadius: 4,
-              background: i === stepIdx ? color : `${color}44`,
-              transition: 'all 0.3s ease',
-            }} />
-          ))}
-        </div>
-      )}
-
-      <style>{`
-        @keyframes tkx-thinking-dot {
-          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-          40%            { transform: scale(1);   opacity: 1;   }
-        }
-        @keyframes tkx-thinking-pulse {
-          0%   { transform: scale(0.6); opacity: 0.8; }
-          100% { transform: scale(2);   opacity: 0;   }
-        }
-        @keyframes tkx-thinking-wave {
-          0%, 100% { height: 6px;  }
-          50%      { height: 18px; }
-        }
-        @keyframes tkx-thinking-orbit {
-          to { transform: rotate(360deg); }
-        }
-      `}</style>
-    </div>
-  );
-}