tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxWatermark.tsx

@@ -1,145 +0,0 @@
-'use client';
-
-import { type ReactNode, useRef, useEffect, useMemo, useState, useCallback } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface TkxWatermarkProps {
-  text: string | string[];
-  children: ReactNode;
-  rotate?: number;
-  gap?: [number, number];
-  fontSize?: number;
-  color?: string;
-  zIndex?: number;
-}
-
-// ── Canvas Renderer ──────────────────────────────────────────────────────────
-
-function renderWatermarkPattern(
-  lines: string[],
-  rotate: number,
-  gap: [number, number],
-  fontSize: number,
-  fillColor: string,
-): string {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return '';
-
-  const lineHeight = fontSize * 1.5;
-  const totalTextHeight = lines.length * lineHeight;
-
-  // Calculate canvas dimensions based on text length and gap
-  const maxTextWidth = Math.max(...lines.map((l) => l.length)) * fontSize * 0.6;
-  const canvasW = gap[0] + maxTextWidth;
-  const canvasH = gap[1] + totalTextHeight;
-
-  // High-DPI rendering
-  const dpr = 2;
-  canvas.width = canvasW * dpr;
-  canvas.height = canvasH * dpr;
-  ctx.scale(dpr, dpr);
-
-  // Move origin to center for rotation
-  ctx.translate(canvasW / 2, canvasH / 2);
-  ctx.rotate((rotate * Math.PI) / 180);
-
-  // Text styling
-  ctx.font = `${fontSize}px sans-serif`;
-  ctx.fillStyle = fillColor;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-
-  // Draw each line centered
-  lines.forEach((line, i) => {
-    const y = (i - (lines.length - 1) / 2) * lineHeight;
-    ctx.fillText(line, 0, y);
-  });
-
-  return canvas.toDataURL();
-}
-
-// ── Component ────────────────────────────────────────────────────────────────
-
-export function TkxWatermark({
-  text,
-  children,
-  rotate = -22,
-  gap = [100, 100],
-  fontSize = 14,
-  color,
-  zIndex = 10,
-}: TkxWatermarkProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [bgImage, setBgImage] = useState('');
-
-  // Sanitize text lines
-  const lines = useMemo(
-    () => (Array.isArray(text) ? text : [text]).map((t) => sanitizeString(t)),
-    [text],
-  );
-
-  const fillColor = color ?? `${theme.textMuted}22`;
-
-  // Memoize the render function
-  const generatePattern = useCallback(() => {
-    return renderWatermarkPattern(lines, rotate, gap, fontSize, fillColor);
-  }, [lines, rotate, gap, fontSize, fillColor]);
-
-  // Generate the watermark canvas pattern
-  useEffect(() => {
-    const dataUrl = generatePattern();
-    if (dataUrl) {
-      setBgImage(`url(${dataUrl})`);
-    }
-  }, [generatePattern]);
-
-  // Prevent tampering via MutationObserver
-  useEffect(() => {
-    const overlay = containerRef.current?.querySelector<HTMLElement>('[data-watermark]');
-    if (!overlay) return;
-
-    const observer = new MutationObserver(() => {
-      // Re-apply watermark if someone modifies it
-      const dataUrl = generatePattern();
-      if (dataUrl) {
-        overlay.style.backgroundImage = `url(${dataUrl})`;
-      }
-    });
-
-    observer.observe(overlay, {
-      attributes: true,
-      attributeFilter: ['style'],
-    });
-
-    return () => observer.disconnect();
-  }, [generatePattern]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={tkx('relative')}
-      style={{ overflow: 'hidden' }}
-    >
-      {children}
-      <div
-        data-watermark
-        aria-hidden="true"
-        className={tkx('absolute inset-0 pointer-events-none')}
-        style={{
-          zIndex,
-          backgroundImage: bgImage,
-          backgroundRepeat: 'repeat',
-          animation: reducedMotion ? 'none' : 'tkxFadeIn 0.3s ease',
-        }}
-      />
-    </div>
-  );
-}

package/src/components/index.ts

@@ -1,80 +0,0 @@
-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';
-export * from './TkxBreadcrumb';
-export * from './TkxPopover';
-export * from './TkxAutocomplete';
-export * from './TkxTreeView';
-export * from './TkxToolbar';
-export * from './TkxTransferList';
-export * from './TkxSpeedDial';
-export * from './TkxAppBar';
-export * from './TkxBottomNav';
-export * from './TkxSnackbar';
-export * from './TkxDataGrid';
-export * from './TkxMasonry';
-export * from './TkxRichTextDisplay';
-export * from './TkxMarkdown';
-export * from './TkxForm';
-export * from './TkxLayout';
-export * from './TkxConfigProvider';
-export * from './TkxTypography';
-export * from './TkxSpin';
-export * from './TkxEmpty';
-export * from './TkxStatistic';
-export * from './TkxSegmented';
-export * from './TkxMentions';
-export * from './TkxQRCode';
-export * from './TkxResult';
-export * from './TkxTour';
-export * from './TkxWatermark';
-export * from './TkxAffix';
-export * from './TkxAnchor';
-export * from './TkxCascader';
-export * from './TkxList';
-// Heavy components moved to subpath entries to keep main bundle lean:
-//   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';

package/src/engine/css.ts

@@ -1,126 +0,0 @@
-// ── 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

@@ -1,12 +0,0 @@
-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';
-export * from './quantum-ai';
-export { QuantumAI } from './quantum-ai';