tekivex-ui 2.2.0 → 2.3.0

package/src/components/TkxList.tsx

@@ -0,0 +1,242 @@
+import { type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface ListItem {
+  key: string;
+  title: string;
+  description?: string;
+  avatar?: ReactNode;
+  actions?: ReactNode;
+  extra?: ReactNode;
+}
+
+export interface TkxListProps {
+  items: ListItem[];
+  header?: ReactNode;
+  footer?: ReactNode;
+  bordered?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  emptyText?: string;
+  grid?: { column?: number; gutter?: number };
+}
+
+// ── Size Tokens ──────────────────────────────────────────────────────────────
+
+const SIZE_PADDING = {
+  sm: '8px 12px',
+  md: '12px 16px',
+  lg: '16px 20px',
+} as const;
+
+// ── Loading Skeleton ─────────────────────────────────────────────────────────
+
+function Skeleton({ theme, reducedMotion }: { theme: ReturnType<typeof useTheme>; reducedMotion: boolean }) {
+  return (
+    <div className={tkx('flex items-center gap-3 px-4 py-3')} aria-hidden="true">
+      <div
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: '50%',
+          backgroundColor: theme.surfaceAlt,
+          animation: reducedMotion ? 'none' : 'tkxPulse 1.5s ease infinite',
+        }}
+      />
+      <div className={tkx('flex-1')}>
+        <div
+          style={{
+            width: '60%',
+            height: 14,
+            borderRadius: 4,
+            backgroundColor: theme.surfaceAlt,
+            marginBottom: 8,
+            animation: reducedMotion ? 'none' : 'tkxPulse 1.5s ease infinite',
+          }}
+        />
+        <div
+          style={{
+            width: '40%',
+            height: 12,
+            borderRadius: 4,
+            backgroundColor: theme.surfaceAlt,
+            animation: reducedMotion ? 'none' : 'tkxPulse 1.5s ease infinite',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxList({
+  items,
+  header,
+  footer,
+  bordered = true,
+  size = 'md',
+  loading = false,
+  emptyText = 'No data',
+  grid,
+}: TkxListProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const safeEmptyText = sanitizeString(emptyText);
+  const padding = SIZE_PADDING[size];
+
+  const isGrid = !!grid;
+  const columns = grid?.column ?? 1;
+  const gutter = grid?.gutter ?? 16;
+
+  return (
+    <div
+      role="list"
+      aria-label="List"
+      aria-busy={loading}
+      className={tkx('font-sans rounded-lg overflow-hidden')}
+      style={{
+        border: bordered ? `1px solid ${theme.border}` : 'none',
+        backgroundColor: theme.surface,
+      }}
+    >
+      {/* Header */}
+      {header && (
+        <div
+          className={tkx('font-semibold text-sm')}
+          style={{
+            padding,
+            color: theme.text,
+            borderBottom: `1px solid ${theme.border}`,
+            backgroundColor: theme.surfaceAlt,
+          }}
+        >
+          {header}
+        </div>
+      )}
+
+      {/* Loading */}
+      {loading && (
+        <div>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} theme={theme} reducedMotion={reducedMotion} />
+          ))}
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!loading && items.length === 0 && (
+        <div
+          role="status"
+          className={tkx('text-center py-12 text-sm')}
+          style={{ color: theme.textMuted }}
+        >
+          {safeEmptyText}
+        </div>
+      )}
+
+      {/* Items */}
+      {!loading && items.length > 0 && (
+        <div
+          style={
+            isGrid
+              ? {
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                  gap: gutter,
+                  padding: gutter,
+                }
+              : undefined
+          }
+        >
+          {items.map((item, idx) => {
+            const safeTitle = sanitizeString(item.title);
+            const safeDesc = item.description ? sanitizeString(item.description) : undefined;
+
+            return (
+              <div
+                key={item.key}
+                role="listitem"
+                className={tkx('flex items-start gap-3')}
+                style={{
+                  padding: isGrid ? padding : padding,
+                  borderBottom:
+                    !isGrid && idx < items.length - 1
+                      ? `1px solid ${theme.border}`
+                      : 'none',
+                  ...(isGrid
+                    ? {
+                        border: `1px solid ${theme.border}`,
+                        borderRadius: 8,
+                        backgroundColor: theme.surface,
+                      }
+                    : {}),
+                  animation: reducedMotion ? 'none' : `tkxFadeIn 0.2s ease ${idx * 0.03}s both`,
+                }}
+              >
+                {/* Avatar */}
+                {item.avatar && (
+                  <div aria-hidden="true" className={tkx('shrink-0')}>
+                    {item.avatar}
+                  </div>
+                )}
+
+                {/* Content */}
+                <div className={tkx('flex-1 min-w-0')}>
+                  <div
+                    className={tkx('text-sm font-medium')}
+                    style={{ color: theme.text }}
+                  >
+                    {safeTitle}
+                  </div>
+                  {safeDesc && (
+                    <div
+                      className={tkx('text-xs mt-1 leading-relaxed')}
+                      style={{ color: theme.textMuted }}
+                    >
+                      {safeDesc}
+                    </div>
+                  )}
+                </div>
+
+                {/* Extra */}
+                {item.extra && (
+                  <div className={tkx('shrink-0 ml-auto')} style={{ color: theme.textMuted }}>
+                    {item.extra}
+                  </div>
+                )}
+
+                {/* Actions */}
+                {item.actions && (
+                  <div className={tkx('shrink-0 flex items-center gap-2')}>
+                    {item.actions}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Footer */}
+      {footer && (
+        <div
+          className={tkx('text-sm')}
+          style={{
+            padding,
+            color: theme.textMuted,
+            borderTop: `1px solid ${theme.border}`,
+            backgroundColor: theme.surfaceAlt,
+          }}
+        >
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TkxMentions.tsx

@@ -0,0 +1,210 @@
+import { type ReactNode, useState, useRef, useCallback, useEffect } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface MentionOption {
+  value: string;
+  label: string;
+  avatar?: string;
+}
+
+export interface TkxMentionsProps {
+  options: MentionOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  trigger?: string;
+  placeholder?: string;
+  label?: string;
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxMentions({
+  options,
+  value = '',
+  onChange,
+  trigger = '@',
+  placeholder,
+  label,
+}: TkxMentionsProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const dropdownRef = useRef<HTMLUListElement>(null);
+  const [text, setText] = useState(value);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [query, setQuery] = useState('');
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [triggerPos, setTriggerPos] = useState(-1);
+
+  useEffect(() => {
+    if (value !== undefined) setText(value);
+  }, [value]);
+
+  const filtered = options.filter((o) =>
+    o.label.toLowerCase().includes(query.toLowerCase()),
+  );
+
+  const handleInput = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const val = e.target.value;
+      setText(val);
+      onChange?.(val);
+
+      const cursorPos = e.target.selectionStart ?? val.length;
+      const beforeCursor = val.slice(0, cursorPos);
+      const lastTrigger = beforeCursor.lastIndexOf(trigger);
+
+      if (lastTrigger >= 0) {
+        const afterTrigger = beforeCursor.slice(lastTrigger + trigger.length);
+        if (!/\s/.test(afterTrigger)) {
+          setQuery(afterTrigger);
+          setTriggerPos(lastTrigger);
+          setShowDropdown(true);
+          setActiveIdx(0);
+          return;
+        }
+      }
+      setShowDropdown(false);
+    },
+    [trigger, onChange],
+  );
+
+  const insertMention = useCallback(
+    (opt: MentionOption) => {
+      const before = text.slice(0, triggerPos);
+      const after = text.slice(
+        triggerPos + trigger.length + query.length,
+      );
+      const newText = `${before}${trigger}${opt.value} ${after}`;
+      setText(newText);
+      onChange?.(newText);
+      setShowDropdown(false);
+      inputRef.current?.focus();
+    },
+    [text, triggerPos, trigger, query, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!showDropdown) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIdx((i) => (i + 1) % filtered.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIdx((i) => (i - 1 + filtered.length) % filtered.length);
+      } else if (e.key === 'Enter' && filtered[activeIdx]) {
+        e.preventDefault();
+        insertMention(filtered[activeIdx]);
+      } else if (e.key === 'Escape') {
+        setShowDropdown(false);
+      }
+    },
+    [showDropdown, filtered, activeIdx, insertMention],
+  );
+
+  // Scroll active option into view
+  useEffect(() => {
+    if (!showDropdown || !dropdownRef.current) return;
+    const active = dropdownRef.current.children[activeIdx] as HTMLElement;
+    active?.scrollIntoView({ block: 'nearest' });
+  }, [activeIdx, showDropdown]);
+
+  const safeLabel = label ? sanitizeString(label) : undefined;
+  const safePlaceholder = placeholder ? sanitizeString(placeholder) : undefined;
+
+  return (
+    <div className={tkx('relative font-sans')} style={{ width: '100%' }}>
+      {safeLabel && (
+        <label
+          className={tkx('block text-sm font-medium mb-1')}
+          style={{ color: theme.text }}
+        >
+          {safeLabel}
+        </label>
+      )}
+
+      <textarea
+        ref={inputRef}
+        role="combobox"
+        aria-expanded={showDropdown}
+        aria-haspopup="listbox"
+        aria-autocomplete="list"
+        aria-label={safeLabel ?? 'Mentions input'}
+        value={text}
+        placeholder={safePlaceholder}
+        onChange={handleInput}
+        onKeyDown={handleKeyDown}
+        onBlur={() => setTimeout(() => setShowDropdown(false), 200)}
+        className={tkx('w-full rounded-lg border px-3 py-2 text-sm resize-y')}
+        style={{
+          backgroundColor: theme.surface,
+          borderColor: theme.border,
+          color: theme.text,
+          minHeight: 80,
+          outline: 'none',
+        }}
+        rows={3}
+      />
+
+      {showDropdown && filtered.length > 0 && (
+        <ul
+          ref={dropdownRef}
+          role="listbox"
+          aria-label="Mention suggestions"
+          className={tkx('absolute left-0 right-0 z-50 rounded-lg border overflow-auto')}
+          style={{
+            backgroundColor: theme.surface,
+            borderColor: theme.border,
+            maxHeight: 200,
+            top: '100%',
+            marginTop: 4,
+            listStyle: 'none',
+            padding: 0,
+            boxShadow: `0 4px 12px ${theme.bg}80`,
+            animation: reducedMotion ? 'none' : 'tkxFadeIn 0.15s ease',
+          }}
+        >
+          {filtered.map((opt, idx) => (
+            <li
+              key={opt.value}
+              role="option"
+              aria-selected={idx === activeIdx}
+              className={tkx('flex items-center gap-3 px-3 py-2 cursor-pointer text-sm')}
+              style={{
+                backgroundColor: idx === activeIdx ? theme.surfaceAlt : 'transparent',
+                color: theme.text,
+              }}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                insertMention(opt);
+              }}
+              onMouseEnter={() => setActiveIdx(idx)}
+            >
+              {opt.avatar && (
+                <img
+                  src={sanitizeString(opt.avatar)}
+                  alt=""
+                  aria-hidden="true"
+                  width={24}
+                  height={24}
+                  className={tkx('rounded-full')}
+                  style={{ objectFit: 'cover' }}
+                />
+              )}
+              <span>{sanitizeString(opt.label)}</span>
+              <span style={{ color: theme.textMuted, marginLeft: 'auto' }}>
+                {trigger}{sanitizeString(opt.value)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/components/TkxQRCode.tsx

@@ -0,0 +1,174 @@
+import { useRef, useEffect, useMemo } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface TkxQRCodeProps {
+  value: string;
+  size?: number;
+  color?: string;
+  bgColor?: string;
+  errorLevel?: 'L' | 'M' | 'Q' | 'H';
+  icon?: string;
+  bordered?: boolean;
+}
+
+// ── Hash Utility ─────────────────────────────────────────────────────────────
+
+function simpleHash(str: string): number {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash + str.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+// Deterministic PRNG from seed
+function seededRandom(seed: number): () => number {
+  let s = seed;
+  return () => {
+    s = (s * 1664525 + 1013904223) | 0;
+    return ((s >>> 0) / 0xffffffff);
+  };
+}
+
+// ── Grid Generator ───────────────────────────────────────────────────────────
+
+const ERROR_DENSITY: Record<string, number> = { L: 0.38, M: 0.42, Q: 0.48, H: 0.55 };
+
+function generateGrid(value: string, gridSize: number, errorLevel: string): boolean[][] {
+  const hash = simpleHash(value);
+  const rand = seededRandom(hash);
+  const density = ERROR_DENSITY[errorLevel] ?? 0.42;
+  const grid: boolean[][] = Array.from({ length: gridSize }, () =>
+    Array.from({ length: gridSize }, () => false),
+  );
+
+  // Finder patterns (top-left, top-right, bottom-left)
+  const drawFinder = (startR: number, startC: number) => {
+    for (let r = 0; r < 7; r++) {
+      for (let c = 0; c < 7; c++) {
+        const isEdge = r === 0 || r === 6 || c === 0 || c === 6;
+        const isInner = r >= 2 && r <= 4 && c >= 2 && c <= 4;
+        grid[startR + r][startC + c] = isEdge || isInner;
+      }
+    }
+  };
+
+  drawFinder(0, 0);
+  drawFinder(0, gridSize - 7);
+  drawFinder(gridSize - 7, 0);
+
+  // Timing patterns
+  for (let i = 7; i < gridSize - 7; i++) {
+    grid[6][i] = i % 2 === 0;
+    grid[i][6] = i % 2 === 0;
+  }
+
+  // Data area: fill with deterministic pseudo-random pattern
+  for (let r = 0; r < gridSize; r++) {
+    for (let c = 0; c < gridSize; c++) {
+      const inFinder =
+        (r < 8 && c < 8) ||
+        (r < 8 && c >= gridSize - 8) ||
+        (r >= gridSize - 8 && c < 8);
+      const isTiming = r === 6 || c === 6;
+      if (inFinder || isTiming) continue;
+      grid[r][c] = rand() < density;
+    }
+  }
+
+  return grid;
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxQRCode({
+  value,
+  size = 160,
+  color,
+  bgColor,
+  errorLevel = 'M',
+  icon,
+  bordered = true,
+}: TkxQRCodeProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const safeValue = sanitizeString(value);
+  const fg = color ?? theme.text;
+  const bg = bgColor ?? theme.surface;
+
+  const gridSize = 25;
+  const grid = useMemo(
+    () => generateGrid(safeValue, gridSize, errorLevel),
+    [safeValue, errorLevel],
+  );
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = size * dpr;
+    canvas.height = size * dpr;
+    ctx.scale(dpr, dpr);
+
+    const cellSize = size / gridSize;
+
+    // Background
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, size, size);
+
+    // Cells
+    ctx.fillStyle = fg;
+    for (let r = 0; r < gridSize; r++) {
+      for (let c = 0; c < gridSize; c++) {
+        if (grid[r][c]) {
+          ctx.fillRect(c * cellSize, r * cellSize, cellSize, cellSize);
+        }
+      }
+    }
+
+    // Center icon area (clear a zone for icon)
+    if (icon) {
+      const iconSize = size * 0.22;
+      const offset = (size - iconSize) / 2;
+      ctx.fillStyle = bg;
+      ctx.fillRect(offset - 2, offset - 2, iconSize + 4, iconSize + 4);
+
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
+        ctx.drawImage(img, offset, offset, iconSize, iconSize);
+      };
+      img.src = sanitizeString(icon);
+    }
+  }, [grid, size, fg, bg, icon]);
+
+  return (
+    <div
+      role="img"
+      aria-label={`QR code for: ${safeValue}`}
+      className={tkx('inline-block rounded-lg')}
+      style={{
+        padding: bordered ? 12 : 0,
+        backgroundColor: bordered ? bg : 'transparent',
+        border: bordered ? `1px solid ${theme.border}` : 'none',
+        lineHeight: 0,
+        animation: reducedMotion ? 'none' : 'tkxFadeIn 0.2s ease',
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
+        style={{ width: size, height: size, display: 'block' }}
+      />
+    </div>
+  );
+}