tekivex-ui 2.0.0

package/src/components/index.ts

@@ -0,0 +1,40 @@
+export * from './TkxButton';
+export * from './TkxCard';
+export * from './TkxInput';
+export * from './TkxBadge';
+export * from './TkxProgress';
+export * from './TkxToggle';
+export * from './TkxAlert';
+export * from './TkxModal';
+export * from './TkxTabs';
+export * from './TkxTooltip';
+export * from './TkxSkeleton';
+export * from './TkxAvatar';
+export * from './TkxTable';
+export * from './TkxDivider';
+export * from './TkxIcon';
+export * from './TkxLogo';
+export * from './TkxSelect';
+export * from './TkxCheckbox';
+export * from './TkxRadio';
+export * from './TkxToast';
+export * from './TkxAccordion';
+export * from './TkxDrawer';
+export * from './TkxChat';
+export * from './TkxTag';
+export * from './TkxTimeline';
+export * from './TkxDatePicker';
+export * from './TkxSlider';
+export * from './TkxPagination';
+export * from './TkxImage';
+export * from './TkxFileUpload';
+export * from './TkxRating';
+export * from './TkxMenu';
+export * from './TkxClock';
+export * from './TkxVideoPlayer';
+export * from './TkxStepper';
+export * from './TkxColorPicker';
+export * from './TkxNumberInput';
+export * from './TkxOTP';
+export * from './TkxCommand';
+export * from './TkxCarousel';

package/src/engine/css.ts

@@ -0,0 +1,126 @@
+// ── TKX-CSS Engine ───────────────────────────────────────────────────────────
+// Content-hashed class names, responsive helpers, keyframes, CSS variables, SSR
+
+import { fnv1aHash } from './quantum';
+
+// ── Internal style sheet registry ────────────────────────────────────────────
+
+const styleSheet = new Map<string, string>();
+
+function kebabCase(str: string): string {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+function generateClassName(styles: string): string {
+  return 'tkx-' + fnv1aHash(styles);
+}
+
+function register(styles: string): string {
+  const className = generateClassName(styles);
+  if (!styleSheet.has(className)) {
+    styleSheet.set(className, styles);
+  }
+  return className;
+}
+
+// ── Template Literal CSS ─────────────────────────────────────────────────────
+
+export interface ProcessedCSS {
+  className: string;
+  styles: string;
+}
+
+export function css(strings: TemplateStringsArray, ...values: unknown[]): ProcessedCSS {
+  const styles = strings.reduce<string>((acc, str, i) => {
+    return acc + str + (values[i] !== undefined ? String(values[i]) : '');
+  }, '');
+  const className = register(styles.trim());
+  return { className, styles: styles.trim() };
+}
+
+// ── From Style Object ────────────────────────────────────────────────────────
+
+export function fromObject(styleObject: Record<string, unknown>): ProcessedCSS {
+  const styles = Object.entries(styleObject)
+    .map(([key, value]) => `${kebabCase(key)}: ${value};`)
+    .join(' ');
+  const className = register(styles);
+  return { className, styles };
+}
+
+// ── Responsive Breakpoints ───────────────────────────────────────────────────
+
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+const BREAKPOINTS: Record<Breakpoint, string> = {
+  xs: '480px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+};
+
+export function responsive(breakpoint: Breakpoint, styles: string): string {
+  return `@media (min-width: ${BREAKPOINTS[breakpoint]}) { ${styles} }`;
+}
+
+// ── Keyframes ────────────────────────────────────────────────────────────────
+
+export function keyframes(
+  name: string,
+  frames: Record<string, Record<string, unknown>>,
+): string {
+  const stops = Object.entries(frames)
+    .map(([stop, styles]) => {
+      const declarations = Object.entries(styles)
+        .map(([k, v]) => `${kebabCase(k)}: ${v};`)
+        .join(' ');
+      return `${stop} { ${declarations} }`;
+    })
+    .join(' ');
+  return `@keyframes ${name} { ${stops} }`;
+}
+
+// ── CSS Variables ────────────────────────────────────────────────────────────
+
+export function cssVar(name: string, value?: string): string {
+  if (value !== undefined) {
+    return `--tkx-${name}: ${value};`;
+  }
+  return `var(--tkx-${name})`;
+}
+
+// ── SSR Extraction and Client Injection ──────────────────────────────────────
+
+export function extractCSS(): string {
+  return Array.from(styleSheet.entries())
+    .map(([className, styles]) => `.${className} { ${styles} }`)
+    .join('\n');
+}
+
+export function resetStyles(): void {
+  styleSheet.clear();
+}
+
+export function injectStyles(): void {
+  if (typeof document === 'undefined') return;
+  let styleEl = document.getElementById('tkx-styles') as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = 'tkx-styles';
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = extractCSS();
+}
+
+export const TKX = {
+  css,
+  fromObject,
+  responsive,
+  keyframes,
+  cssVar,
+  extractCSS,
+  injectStyles,
+  resetStyles,
+};

package/src/engine/index.ts

@@ -0,0 +1,10 @@
+export * from './quantum';
+export * from './security';
+export * from './wcag';
+export * from './css';
+export * from './tkx';
+
+export { Quantum } from './quantum';
+export { Shield } from './security';
+export { WCAGEngine } from './wcag';
+export { TKX } from './css';

package/src/engine/quantum.ts

@@ -0,0 +1,207 @@
+// ── Quantum Render Engine ────────────────────────────────────────────────────
+// FNV-1a hashing, LRU memoization, priority render queues, microtask batching
+
+// ── FNV-1a Hash ─────────────────────────────────────────────────────────────
+
+const FNV_OFFSET = 2166136261;
+const FNV_PRIME = 16777619;
+
+export function fnv1aHash(input: string): string {
+  let hash = FNV_OFFSET;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = (Math.imul(hash, FNV_PRIME)) >>> 0;
+  }
+  return hash.toString(16).padStart(8, '0');
+}
+
+// ── LRU Cache ────────────────────────────────────────────────────────────────
+
+export class LRUCache<K, V> {
+  private cache = new Map<K, V>();
+  private hits = 0;
+  private misses = 0;
+  readonly ceiling: number;
+
+  constructor(ceiling = 512) {
+    this.ceiling = Math.min(ceiling, 512);
+  }
+
+  get(key: K): V | undefined {
+    if (!this.cache.has(key)) {
+      this.misses++;
+      return undefined;
+    }
+    this.hits++;
+    const value = this.cache.get(key)!;
+    // Move to end (most-recently-used)
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return value;
+  }
+
+  set(key: K, value: V): void {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.ceiling) {
+      // Evict least-recently-used (first in insertion order)
+      this.cache.delete(this.cache.keys().next().value!);
+    }
+    this.cache.set(key, value);
+  }
+
+  has(key: K): boolean {
+    return this.cache.has(key);
+  }
+
+  invalidate(key?: K): void {
+    if (key !== undefined) {
+      this.cache.delete(key);
+    } else {
+      this.cache.clear();
+    }
+  }
+
+  get size(): number {
+    return this.cache.size;
+  }
+
+  get cacheHitRate(): number {
+    const total = this.hits + this.misses;
+    return total === 0 ? 0 : (this.hits / total) * 100;
+  }
+}
+
+// ── Memoization via global LRU cache ────────────────────────────────────────
+
+const globalCache = new LRUCache<string, unknown>(512);
+
+export function memoize<T>(key: string, fn: () => T): T {
+  const cached = globalCache.get(key);
+  if (cached !== undefined) return cached as T;
+  const result = fn();
+  globalCache.set(key, result);
+  return result;
+}
+
+// ── Priority Render Queue ────────────────────────────────────────────────────
+
+export type Priority = 'critical' | 'normal' | 'low';
+
+const PRIORITY_WEIGHTS: Record<Priority, number> = {
+  critical: 3,
+  normal: 2,
+  low: 1,
+};
+
+interface QueueEntry {
+  id: string;
+  priority: Priority;
+  task: () => void;
+  weight: number;
+}
+
+export class RenderQueue {
+  private queue: QueueEntry[] = [];
+
+  enqueue(id: string, task: () => void, priority: Priority = 'normal'): void {
+    this.queue.push({ id, task, priority, weight: PRIORITY_WEIGHTS[priority] });
+  }
+
+  flush(): void {
+    this.queue.sort((a, b) => b.weight - a.weight);
+    for (const entry of this.queue) {
+      try {
+        entry.task();
+      } catch {
+        // Swallow per-task errors so the queue continues
+      }
+    }
+    this.queue = [];
+  }
+
+  get depth(): number {
+    return this.queue.length;
+  }
+}
+
+// ── Microtask Batch Updates ──────────────────────────────────────────────────
+
+interface RenderMetric {
+  duration: number;
+  timestamp: number;
+}
+
+const pendingBatch: Array<() => void> = [];
+let scheduledFlush = false;
+const renderMetrics: RenderMetric[] = [];
+let totalRenderTime = 0;
+let renderCount = 0;
+
+function flushBatch(): void {
+  const tasks = pendingBatch.splice(0);
+  const start = performance.now();
+  for (const task of tasks) {
+    try {
+      task();
+    } catch {
+      // Continue queue on error
+    }
+  }
+  const duration = performance.now() - start;
+  totalRenderTime += duration;
+  renderCount++;
+  renderMetrics.push({ duration, timestamp: Date.now() });
+  if (renderMetrics.length > 100) renderMetrics.shift();
+}
+
+export function batchUpdate(fn: () => void): void {
+  pendingBatch.push(fn);
+  if (!scheduledFlush) {
+    scheduledFlush = true;
+    queueMicrotask(() => {
+      flushBatch();
+      scheduledFlush = false;
+    });
+  }
+}
+
+// ── Profiling API ────────────────────────────────────────────────────────────
+
+export interface Metrics {
+  avgRenderTime: number;
+  cacheHitRate: number;
+  renderCount: number;
+}
+
+export function getMetrics(n?: number): Metrics & { recent: RenderMetric[] } {
+  const recent = n !== undefined ? renderMetrics.slice(-n) : renderMetrics.slice();
+  return {
+    avgRenderTime: renderCount === 0 ? 0 : totalRenderTime / renderCount,
+    cacheHitRate: globalCache.cacheHitRate,
+    renderCount,
+    recent,
+  };
+}
+
+export function invalidateCache(key?: string): void {
+  if (key !== undefined) {
+    globalCache.invalidate(key);
+  } else {
+    globalCache.invalidate();
+  }
+}
+
+export const Quantum = {
+  hash: fnv1aHash,
+  memoize,
+  batchUpdate,
+  invalidate: invalidateCache,
+  get avgRenderTime() {
+    return renderCount === 0 ? 0 : totalRenderTime / renderCount;
+  },
+  get cacheHitRate() {
+    return globalCache.cacheHitRate;
+  },
+  getMetrics,
+};

package/src/engine/security.ts

@@ -0,0 +1,217 @@
+// ── Security Shield ──────────────────────────────────────────────────────────
+// XSS prevention, CSP, prop validation, immutable audit trail
+
+import { fnv1aHash } from './quantum';
+
+// ── XSS Sanitization ─────────────────────────────────────────────────────────
+
+const HTML_ENTITIES: Record<string, string> = {
+  '<': '&lt;',
+  '>': '&gt;',
+  '&': '&amp;',
+  "'": '&#39;',
+  '"': '&quot;',
+};
+
+export function sanitizeString(input: unknown): string {
+  return String(input).replace(/[<>&'"]/g, (char) => HTML_ENTITIES[char] ?? char);
+}
+
+export function sanitizeProps<T extends Record<string, unknown>>(props: T): T {
+  const result: Record<string, unknown> = {};
+  for (const key of Object.keys(props)) {
+    result[key] = sanitizeValue(props[key]);
+  }
+  return result as T;
+}
+
+function sanitizeValue(value: unknown): unknown {
+  if (typeof value === 'string') return sanitizeString(value);
+  if (Array.isArray(value)) return value.map(sanitizeValue);
+  if (value !== null && typeof value === 'object' && !isReactElement(value)) {
+    return sanitizeProps(value as Record<string, unknown>);
+  }
+  return value;
+}
+
+function isReactElement(value: unknown): boolean {
+  return typeof value === 'object' && value !== null && '$$typeof' in value;
+}
+
+// ── Runtime Prop Validation ──────────────────────────────────────────────────
+
+export interface PropSchema {
+  type: 'string' | 'number' | 'boolean' | 'function' | 'object';
+  required?: boolean;
+  min?: number;
+  max?: number;
+  pattern?: RegExp;
+  enum?: unknown[];
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+export function validateProps(
+  props: Record<string, unknown>,
+  schema: Record<string, PropSchema>,
+): ValidationResult {
+  const errors: string[] = [];
+
+  for (const [key, rule] of Object.entries(schema)) {
+    const value = props[key];
+    const missing = value === undefined || value === null;
+
+    if (rule.required && missing) {
+      errors.push(`prop '${key}' is required`);
+      continue;
+    }
+
+    if (missing) continue;
+
+    if (typeof value !== rule.type) {
+      errors.push(`prop '${key}' must be of type ${rule.type}, got ${typeof value}`);
+      continue;
+    }
+
+    if (rule.type === 'number' && typeof value === 'number') {
+      if (rule.min !== undefined && value < rule.min) {
+        errors.push(`prop '${key}' must be >= ${rule.min}`);
+      }
+      if (rule.max !== undefined && value > rule.max) {
+        errors.push(`prop '${key}' must be <= ${rule.max}`);
+      }
+    }
+
+    if (rule.type === 'string' && typeof value === 'string') {
+      if (rule.pattern && !rule.pattern.test(value)) {
+        errors.push(`prop '${key}' does not match pattern ${rule.pattern}`);
+      }
+    }
+
+    if (rule.enum && !rule.enum.includes(value)) {
+      errors.push(`prop '${key}' must be one of: ${rule.enum.join(', ')}`);
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+// ── CSP Permission Model ─────────────────────────────────────────────────────
+
+export interface ComponentPermissions {
+  allowInlineStyles?: boolean;
+  allowDataUrls?: boolean;
+  allowExternalSrc?: boolean;
+  allowScripts?: boolean;
+}
+
+export interface CSPDirectives {
+  componentId: string;
+  permissions: ComponentPermissions;
+  directives: Record<string, string[]>;
+}
+
+const cspRegistry = new Map<string, CSPDirectives>();
+
+export function createCSP(componentId: string, permissions: ComponentPermissions): CSPDirectives {
+  const directives: Record<string, string[]> = {
+    'default-src': ["'self'"],
+    'style-src': permissions.allowInlineStyles ? ["'self'", "'unsafe-inline'"] : ["'self'"],
+    'img-src': permissions.allowDataUrls
+      ? ["'self'", 'data:']
+      : permissions.allowExternalSrc
+        ? ["'self'", '*']
+        : ["'self'"],
+    'script-src': permissions.allowScripts ? ["'self'"] : ["'none'"],
+  };
+
+  const csp: CSPDirectives = { componentId, permissions, directives };
+  cspRegistry.set(componentId, csp);
+  return csp;
+}
+
+export function hasPermission(componentId: string, permission: keyof ComponentPermissions): boolean {
+  const csp = cspRegistry.get(componentId);
+  return csp?.permissions[permission] === true;
+}
+
+// ── Immutable Audit Trail ────────────────────────────────────────────────────
+
+export interface AuditEntry {
+  readonly timestamp: number;
+  readonly component: string;
+  readonly action: string;
+  readonly propsHash: string;
+  readonly chainHash: string;
+}
+
+export interface AuditFilter {
+  component?: string;
+  action?: string;
+  limit?: number;
+}
+
+let auditTrail: readonly AuditEntry[] = [];
+
+export function audit(
+  action: string,
+  component: string,
+  meta?: Record<string, unknown>,
+): AuditEntry {
+  const propsHash = fnv1aHash(JSON.stringify(meta ?? {}));
+  const prevChainHash = auditTrail.length > 0 ? auditTrail[auditTrail.length - 1].chainHash : '00000000';
+  const chainHash = fnv1aHash(prevChainHash + propsHash + component + action);
+
+  const entry: AuditEntry = Object.freeze({
+    timestamp: Date.now(),
+    component,
+    action,
+    propsHash,
+    chainHash,
+  });
+
+  auditTrail = Object.freeze([...auditTrail, entry]);
+  return entry;
+}
+
+export function getAuditLog(filter?: AuditFilter): readonly AuditEntry[] {
+  let result = auditTrail;
+
+  if (filter?.component) {
+    result = result.filter((e) => e.component === filter.component);
+  }
+  if (filter?.action) {
+    result = result.filter((e) => e.action === filter.action);
+  }
+  if (filter?.limit) {
+    result = result.slice(-filter.limit);
+  }
+
+  return result;
+}
+
+export function verifyAuditIntegrity(): boolean {
+  let prevChainHash = '00000000';
+
+  for (const entry of auditTrail) {
+    const expectedChain = fnv1aHash(prevChainHash + entry.propsHash + entry.component + entry.action);
+    if (expectedChain !== entry.chainHash) return false;
+    prevChainHash = entry.chainHash;
+  }
+
+  return true;
+}
+
+export const Shield = {
+  sanitize: sanitizeString,
+  sanitizeProps,
+  validateProps,
+  createCSP,
+  hasPermission,
+  audit,
+  getAuditLog,
+  verifyAuditIntegrity,
+};