@zen-ui-capri/system 0.0.0-stage → 1.1.0

package/src/lib/components/ZenAmbientBackground.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useRef } from 'react';
+import { useZenTheme } from '../theme/ZenThemeProvider';
+
+export type ZenBackgroundVariant =
+  | 'blackwall-lattice'
+  | 'aurora-mesh'
+  | 'swiss-blueprint'
+  | 'minimal-void';
+
+export interface ZenAmbientBackgroundProps {
+  readonly variant?: ZenBackgroundVariant;
+  readonly interactive?: boolean;
+  readonly paused?: boolean;
+}
+
+interface DataNode {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  phase: number;
+}
+
+export function ZenAmbientBackground({
+  variant = 'blackwall-lattice',
+  interactive = true,
+  paused = false,
+}: ZenAmbientBackgroundProps) {
+  const { themeMeta, reducedMotion } = useZenTheme();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const pointerRef = useRef<{ x: number; y: number }>({ x: 0.5, y: 0.35 });
+
+  useEffect(() => {
+    if (!interactive) return;
+    const onMove = (e: PointerEvent) => {
+      pointerRef.current = {
+        x: e.clientX / Math.max(1, window.innerWidth),
+        y: e.clientY / Math.max(1, window.innerHeight),
+      };
+    };
+    window.addEventListener('pointermove', onMove, { passive: true });
+    return () => window.removeEventListener('pointermove', onMove);
+  }, [interactive]);
+
+  useEffect(() => {
+    if (variant === 'minimal-void') return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const nodes: DataNode[] = Array.from({ length: 56 }, (_, idx) => ({
+      x: (idx * 73) % 1000,
+      y: (idx * 137) % 1000,
+      vx: ((idx % 5) - 2) * 0.22,
+      vy: -0.35 - (idx % 4) * 0.18,
+      size: 1.2 + (idx % 3) * 0.9,
+      phase: idx * 0.6,
+    }));
+
+    let rafId = 0;
+    let time = 0;
+
+    const render = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+        canvas.width = w * dpr;
+        canvas.height = h * dpr;
+      }
+
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, w, h);
+
+      if (!reducedMotion && !paused) {
+        time += 0.014;
+      }
+
+      const primary = themeMeta.accentHex;
+      const secondary = themeMeta.secondaryHex;
+      const isDark = themeMeta.polarity === 'dark';
+      const px = pointerRef.current.x * w;
+      const py = pointerRef.current.y * h;
+
+      if (variant === 'aurora-mesh') {
+        const g1 = ctx.createRadialGradient(
+          w * (0.25 + Math.sin(time * 0.7) * 0.12),
+          h * (0.28 + Math.cos(time * 0.5) * 0.1),
+          20,
+          w * 0.35,
+          h * 0.35,
+          Math.max(w, h) * 0.55
+        );
+        g1.addColorStop(0, `${primary}${isDark ? '24' : '18'}`);
+        g1.addColorStop(1, 'transparent');
+        ctx.fillStyle = g1;
+        ctx.fillRect(0, 0, w, h);
+
+        const g2 = ctx.createRadialGradient(
+          w * (0.75 + Math.cos(time * 0.6) * 0.12),
+          h * (0.65 + Math.sin(time * 0.8) * 0.1),
+          20,
+          w * 0.7,
+          h * 0.65,
+          Math.max(w, h) * 0.5
+        );
+        g2.addColorStop(0, `${secondary}${isDark ? '20' : '14'}`);
+        g2.addColorStop(1, 'transparent');
+        ctx.fillStyle = g2;
+        ctx.fillRect(0, 0, w, h);
+      } else if (variant === 'swiss-blueprint') {
+        const step = 48;
+        ctx.strokeStyle = isDark ? `${primary}14` : `${primary}16`;
+        ctx.lineWidth = 1;
+
+        for (let x = 0; x < w; x += step) {
+          ctx.beginPath();
+          ctx.moveTo(x, 0);
+          ctx.lineTo(x, h);
+          ctx.stroke();
+        }
+        for (let y = 0; y < h; y += step) {
+          ctx.beginPath();
+          ctx.moveTo(0, y);
+          ctx.lineTo(w, y);
+          ctx.stroke();
+        }
+
+        for (let x = step; x < w; x += step * 2) {
+          for (let y = step; y < h; y += step * 2) {
+            const dist = Math.hypot(x - px, y - py);
+            const highlight = Math.max(0, 1 - dist / 280);
+            ctx.fillStyle = highlight > 0.2 ? primary : secondary;
+            ctx.globalAlpha = (isDark ? 0.22 : 0.28) + highlight * 0.55;
+            ctx.fillRect(x - 1.5, y - 1.5, 3, 3);
+          }
+        }
+      } else {
+        const spot = ctx.createRadialGradient(px, py, 10, px, py, 460);
+        spot.addColorStop(0, `${primary}${isDark ? '1c' : '14'}`);
+        spot.addColorStop(0.5, `${secondary}${isDark ? '0d' : '08'}`);
+        spot.addColorStop(1, 'transparent');
+        ctx.fillStyle = spot;
+        ctx.fillRect(0, 0, w, h);
+
+        const horizonY = h * 0.52;
+        ctx.strokeStyle = `${primary}${isDark ? '1f' : '22'}`;
+        ctx.lineWidth = 1;
+
+        const cols = 18;
+        for (let i = -cols; i <= cols; i++) {
+          const topX = w * 0.5 + i * (w / cols) * 0.32;
+          const botX = w * 0.5 + i * (w / cols) * 1.45;
+          ctx.beginPath();
+          ctx.moveTo(topX, horizonY);
+          ctx.lineTo(botX, h);
+          ctx.stroke();
+        }
+
+        const rows = 10;
+        const offset = (time * 0.8) % 1;
+        for (let r = 0; r < rows; r++) {
+          const p = Math.pow((r + offset) / rows, 1.75);
+          const y = horizonY + p * (h - horizonY);
+          ctx.globalAlpha = p * (isDark ? 0.35 : 0.28);
+          ctx.beginPath();
+          ctx.moveTo(0, y);
+          ctx.lineTo(w, y);
+          ctx.stroke();
+        }
+
+        for (let i = 0; i < nodes.length; i++) {
+          const n = nodes[i];
+          if (!reducedMotion && !paused) {
+            n.x = (n.x + n.vx + 1000) % 1000;
+            n.y = (n.y + n.vy + 1000) % 1000;
+          }
+          const nx = (n.x / 1000) * w;
+          const ny = (n.y / 1000) * h;
+
+          ctx.globalAlpha =
+            (isDark ? 0.35 : 0.4) + Math.sin(time * 2 + n.phase) * 0.2;
+          ctx.fillStyle = i % 3 === 0 ? secondary : primary;
+          ctx.fillRect(nx, ny, n.size, n.size * 3.2);
+        }
+      }
+
+      ctx.restore();
+      rafId = window.requestAnimationFrame(render);
+    };
+
+    rafId = window.requestAnimationFrame(render);
+    return () => window.cancelAnimationFrame(rafId);
+  }, [variant, themeMeta, reducedMotion, paused]);
+
+  if (variant === 'minimal-void') {
+    return null;
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className="fixed inset-0 z-0 pointer-events-none"
+    />
+  );
+}

package/src/lib/components/ZenBadge.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react';
+
+export type ZenBadgeTone =
+  | 'gold'
+  | 'amber'
+  | 'emerald'
+  | 'coral'
+  | 'cyan'
+  | 'neutral';
+
+export interface ZenBadgeProps {
+  readonly tone?: ZenBadgeTone;
+  readonly pulse?: boolean;
+  readonly icon?: ReactNode;
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+
+const TONE_STYLES: Record<
+  ZenBadgeTone,
+  { readonly pill: string; readonly dot: string }
+> = {
+  gold: {
+    pill: 'bg-[var(--zen-accent-subtle)] text-[var(--zen-accent-primary)] border-[var(--zen-accent-border)]',
+    dot: 'bg-[var(--zen-accent-primary)]',
+  },
+  amber: {
+    pill: 'bg-[color-mix(in_srgb,var(--zen-status-warning)_15%,transparent)] text-[var(--zen-status-warning)] border-[color-mix(in_srgb,var(--zen-status-warning)_45%,transparent)]',
+    dot: 'bg-[var(--zen-status-warning)]',
+  },
+  emerald: {
+    pill: 'bg-[color-mix(in_srgb,var(--zen-status-success)_15%,transparent)] text-[var(--zen-status-success)] border-[color-mix(in_srgb,var(--zen-status-success)_45%,transparent)]',
+    dot: 'bg-[var(--zen-status-success)]',
+  },
+  coral: {
+    pill: 'bg-[color-mix(in_srgb,var(--zen-status-danger)_15%,transparent)] text-[var(--zen-status-danger)] border-[color-mix(in_srgb,var(--zen-status-danger)_45%,transparent)]',
+    dot: 'bg-[var(--zen-status-danger)]',
+  },
+  cyan: {
+    pill: 'bg-[color-mix(in_srgb,var(--zen-status-info)_15%,transparent)] text-[var(--zen-status-info)] border-[color-mix(in_srgb,var(--zen-status-info)_45%,transparent)]',
+    dot: 'bg-[var(--zen-status-info)]',
+  },
+  neutral: {
+    pill: 'bg-[var(--zen-surface-subtle)] text-[var(--zen-ink-secondary)] border-[var(--zen-border-default)]',
+    dot: 'bg-[var(--zen-ink-muted)]',
+  },
+};
+
+export function ZenBadge({
+  tone = 'neutral',
+  pulse = false,
+  icon,
+  children,
+  className = '',
+}: ZenBadgeProps) {
+  const style = TONE_STYLES[tone];
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full border zen-font-mono text-[11px] font-medium tracking-wide ${style.pill} ${className}`.trim()}
+    >
+      {pulse && (
+        <span
+          className={`w-1.5 h-1.5 rounded-full animate-pulse ${style.dot}`}
+          aria-hidden="true"
+        />
+      )}
+      {icon && <span className="shrink-0 inline-flex">{icon}</span>}
+      <span>{children}</span>
+    </span>
+  );
+}
+
+export interface ZenTagListProps {
+  readonly tags: readonly string[];
+  readonly className?: string;
+}
+
+export function ZenTagList({ tags, className = '' }: ZenTagListProps) {
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`.trim()}>
+      {tags.map((tag) => (
+        <span
+          key={tag}
+          className="px-3 py-1 rounded-full border border-[var(--zen-border-default)] bg-[var(--zen-surface-subtle)] zen-font-mono text-[11px] text-[var(--zen-ink-secondary)]"
+        >
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export interface ZenKbdProps {
+  readonly keys: readonly string[];
+  readonly className?: string;
+}
+
+export function ZenKbd({ keys, className = '' }: ZenKbdProps) {
+  return (
+    <span className={`inline-flex items-center gap-1 ${className}`.trim()}>
+      {keys.map((k) => (
+        <kbd
+          key={k}
+          className="px-1.5 py-0.5 rounded-md border border-[var(--zen-border-default)] bg-[var(--zen-surface-subtle)] zen-font-mono text-[11px] text-[var(--zen-ink-secondary)] shadow-xs"
+        >
+          {k}
+        </kbd>
+      ))}
+    </span>
+  );
+}

package/src/lib/components/ZenButton.tsx

@@ -0,0 +1,127 @@
+import { useState, useRef, useEffect, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { Check, Copy, Loader2 } from 'lucide-react';
+
+export type ZenButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ZenButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ZenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  readonly variant?: ZenButtonVariant;
+  readonly size?: ZenButtonSize;
+  readonly pressed?: boolean;
+  readonly mono?: boolean;
+  readonly loading?: boolean;
+  readonly iconLeft?: ReactNode;
+  readonly iconRight?: ReactNode;
+  readonly children: ReactNode;
+}
+
+const SIZE_CLASSES: Record<ZenButtonSize, string> = {
+  sm: 'px-3.5 py-1.5 text-xs',
+  md: 'px-5 py-2.5 text-xs sm:text-sm',
+  lg: 'px-6 py-3.5 text-sm',
+};
+
+const VARIANT_CLASSES: Record<ZenButtonVariant, string> = {
+  primary: 'zen-btn-primary',
+  secondary: 'zen-btn-secondary',
+  ghost: 'zen-btn-ghost',
+  danger: 'zen-btn-danger',
+};
+
+export function ZenButton({
+  variant = 'primary',
+  size = 'md',
+  pressed,
+  mono = false,
+  loading = false,
+  iconLeft,
+  iconRight,
+  disabled,
+  className = '',
+  children,
+  ...rest
+}: ZenButtonProps) {
+  const isPressed = pressed === true;
+  const pressedClasses =
+    isPressed && variant !== 'primary'
+      ? 'bg-[var(--zen-accent-primary)] text-[var(--zen-ink-on-accent)] border-[var(--zen-accent-primary)] shadow-[var(--zen-shadow-btn-primary)]'
+      : '';
+
+  return (
+    <button
+      type="button"
+      data-zen-occlude="true"
+      aria-pressed={pressed}
+      disabled={disabled || loading}
+      className={`zen-btn-base zen-focus-ring ${VARIANT_CLASSES[variant]} ${SIZE_CLASSES[size]} ${
+        mono ? 'zen-font-mono' : 'zen-font-sans'
+      } ${pressedClasses} ${className}`.trim()}
+      {...rest}
+    >
+      {loading ? (
+        <Loader2 className="w-4 h-4 animate-spin shrink-0" />
+      ) : (
+        iconLeft && <span className="shrink-0 inline-flex">{iconLeft}</span>
+      )}
+      <span>{children}</span>
+      {iconRight && <span className="shrink-0 inline-flex">{iconRight}</span>}
+    </button>
+  );
+}
+
+export interface ZenCopyButtonProps {
+  readonly value: string;
+  readonly label?: string;
+  readonly copiedLabel?: string;
+  readonly size?: ZenButtonSize;
+  readonly variant?: ZenButtonVariant;
+  readonly className?: string;
+}
+
+export function ZenCopyButton({
+  value,
+  label = 'COPY',
+  copiedLabel = 'COPIED',
+  size = 'md',
+  variant = 'secondary',
+  className = '',
+}: ZenCopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(value);
+    setCopied(true);
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <ZenButton
+      variant={variant}
+      size={size}
+      mono
+      onClick={handleCopy}
+      className={className}
+      iconLeft={
+        copied ? (
+          <Check className="w-3.5 h-3.5 text-[var(--zen-accent-primary)]" />
+        ) : (
+          <Copy className="w-3.5 h-3.5 text-[var(--zen-accent-primary)]" />
+        )
+      }
+    >
+      {copied ? copiedLabel : label}
+    </ZenButton>
+  );
+}

package/src/lib/components/ZenCard.tsx

@@ -0,0 +1,180 @@
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import { CheckCircle2 } from 'lucide-react';
+
+export type ZenCardVariant = 'static' | 'interactive' | 'selected';
+export type ZenCardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface ZenCardProps extends HTMLAttributes<HTMLDivElement> {
+  readonly variant?: ZenCardVariant;
+  readonly selected?: boolean;
+  readonly disabled?: boolean;
+  readonly padding?: ZenCardPadding;
+  readonly onSelect?: () => void;
+  readonly selectOnHover?: boolean;
+  readonly children: ReactNode;
+}
+
+const PADDING_MAP: Record<ZenCardPadding, string> = {
+  none: 'p-0',
+  sm: 'p-3.5 sm:p-5',
+  md: 'p-4 sm:p-6 lg:p-8',
+  lg: 'p-5 sm:p-8 lg:p-12',
+};
+
+export function ZenCard({
+  variant = 'static',
+  selected = false,
+  disabled = false,
+  padding = 'md',
+  onSelect,
+  selectOnHover = false,
+  className = '',
+  children,
+  onClick,
+  onMouseEnter,
+  onKeyDown,
+  ...rest
+}: ZenCardProps) {
+  const isInteractive = variant === 'interactive' || Boolean(onSelect);
+  const isSelected = selected || variant === 'selected';
+
+  const surfaceClass = isInteractive
+    ? 'zen-surface-interactive zen-focus-ring cursor-pointer'
+    : isSelected
+      ? 'zen-surface-selected'
+      : 'zen-surface-static';
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(e);
+    if (!disabled && isInteractive && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onSelect?.();
+    }
+  };
+
+  return (
+    <div
+      data-zen-occlude="true"
+      data-selected={isSelected ? 'true' : 'false'}
+      data-disabled={disabled ? 'true' : 'false'}
+      role={isInteractive ? 'button' : undefined}
+      aria-pressed={isInteractive ? isSelected : undefined}
+      aria-disabled={disabled ? true : undefined}
+      tabIndex={isInteractive && !disabled ? 0 : undefined}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!disabled) {
+          onSelect?.();
+        }
+      }}
+      onMouseEnter={(e) => {
+        onMouseEnter?.(e);
+        if (!disabled && selectOnHover) {
+          onSelect?.();
+        }
+      }}
+      onKeyDown={handleKeyDown}
+      className={`rounded-3xl ${surfaceClass} ${PADDING_MAP[padding]} ${
+        disabled ? 'opacity-50 pointer-events-none' : ''
+      } ${className}`.trim()}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface ZenMetricItem {
+  readonly value: string;
+  readonly label: string;
+  readonly accent?: boolean;
+}
+
+export interface ZenMetricStripProps {
+  readonly metrics: readonly ZenMetricItem[];
+  readonly columns?: 2 | 3 | 4;
+  readonly className?: string;
+}
+
+export function ZenMetricStrip({
+  metrics,
+  columns = 4,
+  className = '',
+}: ZenMetricStripProps) {
+  const colClass =
+    columns === 2
+      ? 'grid-cols-2'
+      : columns === 3
+        ? 'grid-cols-2 sm:grid-cols-3'
+        : 'grid-cols-2 sm:grid-cols-4';
+
+  return (
+    <div
+      className={`grid ${colClass} gap-2.5 p-3 rounded-2xl bg-[var(--zen-surface-subtle)] border border-[var(--zen-border-subtle)] text-center ${className}`.trim()}
+    >
+      {metrics.map((m) => (
+        <div key={m.label}>
+          <div
+            className={`zen-font-display font-bold text-xs sm:text-sm ${
+              m.accent
+                ? 'text-[var(--zen-accent-primary)]'
+                : 'text-[var(--zen-ink-primary)]'
+            }`}
+          >
+            {m.value}
+          </div>
+          <div className="zen-telemetry-label mt-0.5">{m.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export interface ZenArchitectureNoteProps {
+  readonly label?: string;
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+
+export function ZenArchitectureNote({
+  label = 'SYSTEM ARCHITECTURE NOTE',
+  children,
+  className = '',
+}: ZenArchitectureNoteProps) {
+  return (
+    <div
+      className={`p-4 rounded-2xl bg-[var(--zen-surface-subtle)] border border-[var(--zen-border-default)] ${className}`.trim()}
+    >
+      <div className="zen-telemetry-label text-[var(--zen-accent-secondary)] mb-1">
+        {label}
+      </div>
+      <p className="text-sm leading-relaxed text-[var(--zen-ink-secondary)]">
+        {children}
+      </p>
+    </div>
+  );
+}
+
+export interface ZenCheckListProps {
+  readonly items: readonly string[];
+  readonly className?: string;
+}
+
+export function ZenCheckList({ items, className = '' }: ZenCheckListProps) {
+  return (
+    <ul className={`space-y-2 ${className}`.trim()}>
+      {items.map((item) => (
+        <li
+          key={item}
+          className="flex items-start gap-2 text-xs sm:text-sm text-[var(--zen-ink-secondary)]"
+        >
+          <CheckCircle2
+            className="w-3.5 h-3.5 text-[var(--zen-accent-primary)] shrink-0 mt-0.5"
+            aria-hidden="true"
+          />
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}