tekivex-ui 2.5.15 → 2.6.0

package/src/charts/TkxPieChart.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import {
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  Legend,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { useReducedMotion } from '../hooks';
-import { getDefaultColors, tooltipStyle } from './shared';
-
-export interface TkxPieChartSlice {
-  name: string;
-  value: number;
-  color?: string;
-}
-
-export interface TkxPieChartProps {
-  data: TkxPieChartSlice[];
-  height?: number;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  showLabels?: boolean;
-  /** Outer radius as a number (px) or percentage string. Default: '70%' */
-  outerRadius?: number | string;
-  /** Start angle in degrees. Default: 90 (12 o'clock) */
-  startAngle?: number;
-  ariaLabel?: string;
-}
-
-export function TkxPieChart({
-  data,
-  height = 300,
-  showLegend = true,
-  showTooltip = true,
-  showLabels = false,
-  outerRadius = '70%',
-  startAngle = 90,
-  ariaLabel = 'Pie chart',
-}: TkxPieChartProps) {
-  const theme = useTheme();
-  const reduced = useReducedMotion();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-  // Force ResponsiveContainer to re-measure after the parent layout settles.
-  // Without this, recharts can compute 0x0 on first paint inside CSS grids/flex
-  // and the chart silently disappears.
-  // When reduced motion is preferred, skip the animation and mount immediately.
-  const [mounted, setMounted] = useState(reduced);
-  useEffect(() => {
-    if (reduced) { setMounted(true); return; }
-    const id = requestAnimationFrame(() => setMounted(true));
-    return () => cancelAnimationFrame(id);
-  }, [reduced]);
-
-  return (
-    <div
-      role="img"
-      aria-label={ariaLabel}
-      style={{ width: '100%', minWidth: 240, height, position: 'relative' }}
-    >
-      {mounted && (
-      <ResponsiveContainer width="100%" height="100%" debounce={50}>
-        <PieChart>
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-            />
-          )}
-          {showLegend && (
-            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted }} />
-          )}
-          <Pie
-            data={data}
-            dataKey="value"
-            nameKey="name"
-            outerRadius={outerRadius}
-            startAngle={startAngle}
-            endAngle={startAngle - 360}
-            label={showLabels ? ({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)` : undefined}
-            labelLine={showLabels}
-            strokeWidth={2}
-            stroke={theme.bg}
-          >
-            {data.map((entry, i) => (
-              <Cell
-                key={entry.name}
-                fill={entry.color ?? colors[i % colors.length]}
-              />
-            ))}
-          </Pie>
-        </PieChart>
-      </ResponsiveContainer>
-      )}
-    </div>
-  );
-}

package/src/charts/TkxRadarChart.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import {
-  ResponsiveContainer,
-  RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  Radar,
-  Legend,
-  Tooltip,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { getDefaultColors, tooltipStyle } from './shared';
-
-export interface TkxRadarSeries {
-  key: string;
-  label?: string;
-  color?: string;
-  fillOpacity?: number;
-}
-
-export interface TkxRadarChartProps {
-  data: Record<string, any>[];
-  series: TkxRadarSeries[];
-  /** Key in data for the axis labels (e.g. 'subject', 'metric') */
-  angleKey: string;
-  height?: number;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  /** Outer radius as percentage string or number. Default: '70%' */
-  outerRadius?: string | number;
-  ariaLabel?: string;
-}
-
-export function TkxRadarChart({
-  data,
-  series,
-  angleKey,
-  height = 300,
-  showLegend = true,
-  showTooltip = true,
-  outerRadius = '70%',
-  ariaLabel = 'Radar chart',
-}: TkxRadarChartProps) {
-  const theme = useTheme();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-
-  return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <RadarChart data={data} outerRadius={outerRadius}>
-          <PolarGrid stroke={theme.border} />
-          <PolarAngleAxis
-            dataKey={angleKey}
-            tick={{ fill: theme.textMuted, fontSize: 12 }}
-          />
-          <PolarRadiusAxis
-            tick={{ fill: theme.textMuted, fontSize: 10 }}
-            axisLine={false}
-            tickLine={false}
-          />
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-            />
-          )}
-          {showLegend && (
-            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted }} />
-          )}
-          {series.map((s, i) => {
-            const color = s.color ?? colors[i % colors.length];
-            return (
-              <Radar
-                key={s.key}
-                name={s.label ?? s.key}
-                dataKey={s.key}
-                stroke={color}
-                fill={color}
-                fillOpacity={s.fillOpacity ?? 0.2}
-                strokeWidth={2}
-              />
-            );
-          })}
-        </RadarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}

package/src/charts/TkxScatterChart.tsx

@@ -1,104 +0,0 @@
-'use client';
-
-import {
-  ResponsiveContainer,
-  ScatterChart,
-  Scatter,
-  XAxis,
-  YAxis,
-  ZAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts';
-import { useTheme } from '../themes';
-import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
-
-export interface TkxScatterSeries {
-  data: { x: number; y: number; z?: number; label?: string }[];
-  name?: string;
-  color?: string;
-}
-
-export interface TkxScatterChartProps {
-  series: TkxScatterSeries[];
-  height?: number;
-  margin?: ChartMargin;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  showTooltip?: boolean;
-  xLabel?: string;
-  yLabel?: string;
-  xTickFormatter?: (value: any) => string;
-  yTickFormatter?: (value: any) => string;
-  /** Z-axis range (bubble size). Default: [20, 400] */
-  zRange?: [number, number];
-  ariaLabel?: string;
-}
-
-export function TkxScatterChart({
-  series,
-  height = 300,
-  margin = DEFAULT_MARGIN,
-  showGrid = true,
-  showLegend = true,
-  showTooltip = true,
-  xTickFormatter,
-  yTickFormatter,
-  zRange = [20, 400],
-  ariaLabel = 'Scatter chart',
-}: TkxScatterChartProps) {
-  const theme = useTheme();
-  const colors = getDefaultColors(theme);
-  const tt = tooltipStyle(theme);
-  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
-
-  return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ScatterChart margin={margin}>
-          {showGrid && (
-            <CartesianGrid strokeDasharray="3 3" stroke={theme.border} />
-          )}
-          <XAxis
-            type="number"
-            dataKey="x"
-            tick={tickStyle}
-            axisLine={{ stroke: theme.border }}
-            tickLine={false}
-            tickFormatter={xTickFormatter}
-          />
-          <YAxis
-            type="number"
-            dataKey="y"
-            tick={tickStyle}
-            axisLine={false}
-            tickLine={false}
-            tickFormatter={yTickFormatter}
-          />
-          <ZAxis type="number" dataKey="z" range={zRange} />
-          {showTooltip && (
-            <Tooltip
-              contentStyle={tt.contentStyle}
-              labelStyle={tt.labelStyle}
-              itemStyle={tt.itemStyle}
-              cursor={{ strokeDasharray: '3 3' }}
-            />
-          )}
-          {showLegend && (
-            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }} />
-          )}
-          {series.map((s, i) => (
-            <Scatter
-              key={s.name ?? i}
-              name={s.name}
-              data={s.data}
-              fill={s.color ?? colors[i % colors.length]}
-              fillOpacity={0.8}
-            />
-          ))}
-        </ScatterChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}

package/src/charts/index.ts

@@ -1,22 +0,0 @@
-'use client';
-
-// ── @tekivex/ui/charts ───────────────────────────────────────────────────────
-// Theme-aware chart components built on Recharts.
-// Import from '@tekivex/ui/charts' — zero impact on the main bundle.
-// ─────────────────────────────────────────────────────────────────────────────
-
-export { TkxAreaChart } from './TkxAreaChart';
-export { TkxBarChart } from './TkxBarChart';
-export { TkxLineChart } from './TkxLineChart';
-export { TkxPieChart } from './TkxPieChart';
-export { TkxDonutChart } from './TkxDonutChart';
-export { TkxScatterChart } from './TkxScatterChart';
-export { TkxRadarChart } from './TkxRadarChart';
-
-export type { TkxAreaChartProps } from './TkxAreaChart';
-export type { TkxBarChartProps } from './TkxBarChart';
-export type { TkxLineChartProps } from './TkxLineChart';
-export type { TkxPieChartProps } from './TkxPieChart';
-export type { TkxDonutChartProps } from './TkxDonutChart';
-export type { TkxScatterChartProps } from './TkxScatterChart';
-export type { TkxRadarChartProps } from './TkxRadarChart';

package/src/charts/shared.ts

@@ -1,47 +0,0 @@
-'use client';
-
-// ── Shared chart utilities ───────────────────────────────────────────────────
-
-import type { ThemeTokens } from '../themes';
-
-/** Default palette: uses theme tokens then falls back to categorical colors */
-export function getDefaultColors(theme: ThemeTokens): string[] {
-  return [
-    theme.primary,
-    theme.secondary,
-    theme.info,
-    theme.success,
-    theme.warning,
-    theme.danger,
-    theme.primary + 'aa',   // primary at 67% opacity
-    theme.secondary + 'aa', // secondary at 67% opacity
-    theme.info + 'aa',      // info at 67% opacity
-    theme.success + 'aa',   // success at 67% opacity
-  ];
-}
-
-export interface ChartMargin {
-  top?: number;
-  right?: number;
-  bottom?: number;
-  left?: number;
-}
-
-export const DEFAULT_MARGIN: ChartMargin = { top: 10, right: 30, bottom: 10, left: 0 };
-
-/** Common recharts tooltip style that matches TekiVex theme */
-export function tooltipStyle(theme: ThemeTokens) {
-  return {
-    contentStyle: {
-      backgroundColor: theme.surface,
-      border: `1px solid ${theme.border}`,
-      borderRadius: 8,
-      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-      color: theme.text,
-      fontSize: 13,
-    },
-    labelStyle: { color: theme.textMuted, fontWeight: 600, marginBottom: 4 },
-    itemStyle: { color: theme.text },
-    cursor: { fill: `${theme.primary}15` },
-  };
-}

package/src/components/TkxAIChatBubble.tsx

@@ -1,256 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
-import { useTheme } from '../themes';
-import { cx, tkx } from '../engine/tkx';
-import { sanitizeString } from '../engine/security';
-
-export type AIRole = 'user' | 'assistant' | 'system';
-
-export interface TkxAIChatBubbleProps {
-  /** Who sent this message */
-  role: AIRole;
-  /** Message text (will be sanitized) or arbitrary ReactNode */
-  content: string | ReactNode;
-  /** Optional avatar URL or initials */
-  avatar?: string;
-  /** Optional display name */
-  name?: string;
-  /** ISO timestamp string */
-  timestamp?: string;
-  /** Animate text in character-by-character (streaming effect) */
-  streaming?: boolean;
-  /** AI confidence 0–100 — renders a mini confidence bar when provided */
-  confidence?: number;
-  /** Show copy-to-clipboard button */
-  copyable?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-function confidenceColor(v: number, primary: string) {
-  if (v >= 80) return '#10b981';
-  if (v >= 55) return primary;
-  if (v >= 30) return '#f59e0b';
-  return '#ef4444';
-}
-
-function Avatar({ src, name, size = 32 }: { src?: string; name?: string; size?: number }) {
-  const theme = useTheme();
-  const initials = name
-    ? name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-    : '?';
-
-  if (src) {
-    return (
-      <img src={src} alt={name ?? 'avatar'} width={size} height={size}
-        style={{ borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
-    );
-  }
-  return (
-    <div style={{
-      width: size, height: size, borderRadius: '50%', flexShrink: 0,
-      background: `${theme.primary}22`, border: `1px solid ${theme.primary}44`,
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      fontSize: size * 0.35, fontWeight: 700, color: theme.primary,
-    }}>
-      {initials}
-    </div>
-  );
-}
-
-export function TkxAIChatBubble({
-  role,
-  content,
-  avatar,
-  name,
-  timestamp,
-  streaming = false,
-  confidence,
-  copyable = false,
-  className,
-  style,
-}: TkxAIChatBubbleProps) {
-  const theme = useTheme();
-  const isUser = role === 'user';
-  const isSystem = role === 'system';
-
-  // Streaming typewriter effect
-  const fullText = typeof content === 'string' ? sanitizeString(content) : '';
-  const [displayed, setDisplayed] = useState(streaming ? '' : fullText);
-  const [copied, setCopied] = useState(false);
-  // Debounced text exposed to assistive tech. We deliberately avoid
-  // announcing each keystroke — screen readers would read every character.
-  // Instead we publish on word boundaries (~350ms idle) and on completion.
-  const [liveAnnouncement, setLiveAnnouncement] = useState(streaming ? '' : fullText);
-  const idxRef = useRef(0);
-  const liveDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (!streaming || typeof content !== 'string') {
-      setLiveAnnouncement(fullText);
-      return;
-    }
-    idxRef.current = 0;
-    setDisplayed('');
-    setLiveAnnouncement('');
-    const interval = setInterval(() => {
-      idxRef.current++;
-      const next = fullText.slice(0, idxRef.current);
-      setDisplayed(next);
-      // Queue a debounced live-region update. Clear prior timer so
-      // only the latest pause flushes — AT hears words, not letters.
-      if (liveDebounceRef.current) clearTimeout(liveDebounceRef.current);
-      liveDebounceRef.current = setTimeout(() => setLiveAnnouncement(next), 350);
-      if (idxRef.current >= fullText.length) {
-        clearInterval(interval);
-        if (liveDebounceRef.current) clearTimeout(liveDebounceRef.current);
-        setLiveAnnouncement(fullText);
-      }
-    }, 18);
-    return () => {
-      clearInterval(interval);
-      if (liveDebounceRef.current) clearTimeout(liveDebounceRef.current);
-    };
-  }, [fullText, streaming, content]);
-
-  const handleCopy = () => {
-    navigator.clipboard?.writeText(fullText);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  // System message style
-  if (isSystem) {
-    return (
-      <div style={{
-        display: 'flex', justifyContent: 'center', padding: '8px 0',
-      }}>
-        <div style={{
-          padding: '6px 16px', borderRadius: 999, fontSize: 12,
-          background: `${theme.border}`, color: theme.textMuted,
-          fontStyle: 'italic',
-        }}>
-          {typeof content === 'string' ? sanitizeString(content) : content}
-        </div>
-      </div>
-    );
-  }
-
-  const bubbleStyle: CSSProperties = {
-    maxWidth: '75%',
-    padding: '12px 16px',
-    borderRadius: isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
-    background: isUser
-      ? `linear-gradient(135deg, ${theme.primary}, ${theme.primary}cc)`
-      : `${theme.surface}`,
-    border: isUser ? 'none' : `1px solid ${theme.border}`,
-    color: isUser ? '#fff' : theme.text,
-    fontSize: 14,
-    lineHeight: 1.65,
-    boxShadow: isUser
-      ? `0 4px 16px -4px ${theme.primary}55`
-      : `0 2px 8px -2px rgba(0,0,0,0.2)`,
-    position: 'relative',
-    wordBreak: 'break-word',
-  };
-
-  return (
-    <div
-      className={cx(tkx('flex gap-2'), className)}
-      style={{
-        flexDirection: isUser ? 'row-reverse' : 'row',
-        alignItems: 'flex-end',
-        ...style,
-      }}
-    >
-      {/* Avatar */}
-      <Avatar src={avatar} name={name ?? (isUser ? 'You' : 'AI')} />
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: isUser ? 'flex-end' : 'flex-start' }}>
-        {/* Name + timestamp */}
-        {(name || timestamp) && (
-          <div style={{ display: 'flex', gap: 8, alignItems: 'center', paddingInline: 4 }}>
-            {name && <span style={{ fontSize: 11, fontWeight: 700, color: theme.textMuted }}>{name}</span>}
-            {timestamp && <span style={{ fontSize: 10, color: theme.textMuted }}>{timestamp}</span>}
-          </div>
-        )}
-
-        {/* Bubble */}
-        <div style={bubbleStyle} role="article" aria-label={isUser ? 'Your message' : 'Assistant message'}>
-          {typeof content === 'string' ? (
-            <>
-              {/* Visible (noisy) streamed text: hidden from AT during streaming
-                  so screen readers aren't spammed with every character. */}
-              <span aria-hidden={streaming ? 'true' : undefined}>
-                {streaming ? displayed : sanitizeString(content)}
-              </span>
-              {streaming && displayed.length < fullText.length && (
-                <span aria-hidden="true" style={{ display: 'inline-block', width: 2, height: 14, background: isUser ? '#fff' : theme.primary, marginLeft: 2, animation: 'tkx-blink 1s step-end infinite', verticalAlign: 'text-bottom' }} />
-              )}
-              {/* Debounced polite live region — announces completed words, not keystrokes. */}
-              {streaming && (
-                <span
-                  aria-live="polite"
-                  aria-atomic="false"
-                  style={{
-                    position: 'absolute',
-                    width: 1,
-                    height: 1,
-                    padding: 0,
-                    margin: -1,
-                    overflow: 'hidden',
-                    clip: 'rect(0,0,0,0)',
-                    whiteSpace: 'nowrap',
-                    border: 0,
-                  }}
-                >
-                  {liveAnnouncement}
-                </span>
-              )}
-            </>
-          ) : content}
-
-          {/* Copy button */}
-          {copyable && !isUser && (
-            <button
-              onClick={handleCopy}
-              title="Copy message"
-              style={{
-                position: 'absolute', top: 8, right: 8,
-                background: 'none', border: 'none', cursor: 'pointer',
-                fontSize: 13, color: copied ? '#10b981' : theme.textMuted,
-                padding: '2px 4px', borderRadius: 4,
-                transition: 'color 0.2s',
-              }}
-            >
-              {copied ? '✓' : '⎘'}
-            </button>
-          )}
-        </div>
-
-        {/* Confidence bar (AI only) */}
-        {!isUser && confidence !== undefined && (
-          <div style={{ paddingInline: 4, width: '100%', maxWidth: 240 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <div style={{ flex: 1, height: 3, borderRadius: 3, background: theme.border, overflow: 'hidden' }}>
-                <div style={{
-                  height: '100%', width: `${confidence}%`,
-                  background: confidenceColor(confidence, theme.primary),
-                  borderRadius: 3, transition: 'width 0.8s ease',
-                }} />
-              </div>
-              <span style={{ fontSize: 10, color: theme.textMuted, whiteSpace: 'nowrap' }}>
-                {confidence}% confident
-              </span>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <style>{`
-        @keyframes tkx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-      `}</style>
-    </div>
-  );
-}