tekivex-ui 2.5.10 → 2.5.11

package/dist/src/components/TkxAIChatBubble.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ReactNode } from 'react';
+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;
+}
+export declare function TkxAIChatBubble({ role, content, avatar, name, timestamp, streaming, confidence, copyable, className, style, }: TkxAIChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TkxAIChatBubble.d.ts.map

package/dist/src/components/TkxAIChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TkxAIChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/TkxAIChatBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxF,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAiCD,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,EACT,SAAiB,EACjB,UAAU,EACV,QAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,2CA0ItB"}

package/dist/src/components/TkxAIConfidenceBar.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties } from 'react';
+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;
+}
+export declare function TkxAIConfidenceBar({ value, label, showLabel, size, animate, className, style, }: TkxAIConfidenceBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TkxAIConfidenceBar.d.ts.map

package/dist/src/components/TkxAIConfidenceBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TkxAIConfidenceBar.d.ts","sourceRoot":"","sources":["../../../src/components/TkxAIConfidenceBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,WAAW,uBAAuB;IACtC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAaD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,SAAgB,EAChB,IAAW,EACX,OAAc,EACd,SAAS,EACT,KAAK,GACN,EAAE,uBAAuB,2CA4FzB"}

package/dist/src/components/TkxAIThinking.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties } from 'react';
+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;
+}
+export declare function TkxAIThinking({ label, steps, size, variant, active, className, style, }: TkxAIThinkingProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TkxAIThinking.d.ts.map

package/dist/src/components/TkxAIThinking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TkxAIThinking.d.ts","sourceRoot":"","sources":["../../../src/components/TkxAIThinking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAIhE,MAAM,WAAW,kBAAkB;IACjC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4ED,wBAAgB,aAAa,CAAC,EAC5B,KAAmB,EACnB,KAAK,EACL,IAAW,EACX,OAAgB,EAChB,MAAa,EACb,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,2CAyFpB"}

package/dist/src/components/index.d.ts

@@ -69,4 +69,7 @@ export * from './TkxAnchor';
 export * from './TkxCascader';
 export * from './TkxList';
 export * from './TkxDropdown';
+export * from './TkxAIConfidenceBar';
+export * from './TkxAIChatBubble';
+export * from './TkxAIThinking';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAI1B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAI1B,cAAc,eAAe,CAAC;AAG9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tekivex-ui",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "description": "Production-grade React component library — 70+ components, WCAG 2.1 AAA, WAI-ARIA 1.2, built-in charts, headless primitives, zero-runtime CSS engine, TypeScript-first.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/TkxAIChatBubble.tsx

@@ -0,0 +1,209 @@
+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);
+  const idxRef = useRef(0);
+
+  useEffect(() => {
+    if (!streaming || typeof content !== 'string') return;
+    idxRef.current = 0;
+    setDisplayed('');
+    const interval = setInterval(() => {
+      idxRef.current++;
+      setDisplayed(fullText.slice(0, idxRef.current));
+      if (idxRef.current >= fullText.length) clearInterval(interval);
+    }, 18);
+    return () => clearInterval(interval);
+  }, [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}>
+          {typeof content === 'string' ? (
+            <>
+              {streaming ? displayed : sanitizeString(content)}
+              {streaming && displayed.length < fullText.length && (
+                <span 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' }} />
+              )}
+            </>
+          ) : 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>
+  );
+}

package/src/components/TkxAIConfidenceBar.tsx

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,191 @@
+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>
+  );
+}

package/src/components/index.ts

@@ -72,3 +72,8 @@ export * from './TkxList';
 //   TkxQuantumForm, TkxThemeBuilder, TkxPlayground → '@tekivex/ui/quantum'
 //   TkxLiveFeed, TkxLiveMetrics, TkxRealTimeChart, TkxLiveLog → '@tekivex/ui/realtime'
 export * from './TkxDropdown';
+
+// ── AI-native components ──────────────────────────────────────────────────────
+export * from './TkxAIConfidenceBar';
+export * from './TkxAIChatBubble';
+export * from './TkxAIThinking';