auramaxx 1.0.0-alpha.4

package/src/components/design-system/Modal.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  hideHeader?: boolean;
+  hideTitle?: boolean;
+  contentClassName?: string;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  icon,
+  size = 'sm',
+  hideHeader = false,
+  hideTitle = false,
+  contentClassName,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setVisible(true);
+      setClosing(false);
+    } else if (visible) {
+      setClosing(true);
+    }
+  }, [isOpen, visible]);
+
+  const handleAnimationEnd = useCallback(() => {
+    if (closing) {
+      setVisible(false);
+      setClosing(false);
+    }
+  }, [closing]);
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (visible && !closing) {
+      document.body.style.overflow = 'hidden';
+    } else if (!visible) {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [visible, closing]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (visible && !closing) {
+      window.addEventListener('keydown', handleEscape);
+    }
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [visible, closing, onClose]);
+
+  const sizeClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg'
+  };
+
+  if (!visible) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className={`absolute inset-0 bg-[var(--color-background-alt,#f4f4f5)]/95 backdrop-blur-md ${closing ? 'animate-fade-out' : 'animate-fade-in'}`}
+          onClick={onClose}
+          onAnimationEnd={handleAnimationEnd}
+        >
+          {/* Noise overlay */}
+          <div className="absolute inset-0 opacity-[0.1] bg-[radial-gradient(var(--color-text,#000)_1px,transparent_1px)] bg-[size:3px_3px]" />
+
+          {/* Corner brackets */}
+          <div className="absolute top-8 left-8 w-6 h-6 border-l-2 border-t-2 border-[var(--color-text,#0a0a0a)]/20" />
+          <div className="absolute top-8 right-8 w-6 h-6 border-r-2 border-t-2 border-[var(--color-text,#0a0a0a)]/20" />
+          <div className="absolute bottom-8 left-8 w-6 h-6 border-l-2 border-b-2 border-[var(--color-text,#0a0a0a)]/20" />
+          <div className="absolute bottom-8 right-8 w-6 h-6 border-r-2 border-b-2 border-[var(--color-text,#0a0a0a)]/20" />
+        </div>
+
+        {/* Modal */}
+        <div className={`relative z-10 w-full ${sizeClasses[size]} max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] flex flex-col bg-[var(--color-surface,#ffffff)] border border-[var(--color-border,#d4d4d8)] shadow-[0_20px_50px_-12px_rgba(0,0,0,0.15)] ${closing ? 'animate-terminal-close' : 'animate-terminal'}`}>
+
+          {!hideHeader && (
+            <div className="h-10 shrink-0 border-b border-[var(--color-border-muted,#e5e5e5)] flex items-center justify-between px-4 bg-[var(--color-background-alt,#f4f4f5)]/50">
+              <div className="flex items-center gap-2">
+                <div className="w-1.5 h-1.5 bg-[var(--color-accent,#ccff00)] animate-pulse" />
+                <span className="font-mono text-[9px] font-bold text-[var(--color-text-muted,#6b7280)] uppercase tracking-widest">
+                  {subtitle || 'System_Message'}
+                </span>
+              </div>
+              <button
+                onClick={onClose}
+                className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+          )}
+
+          {/* Content */}
+          <div className={`p-6 relative overflow-y-auto min-h-0 ${contentClassName ?? ''}`}>
+            {/* Watermark */}
+            <div className="absolute -bottom-6 -right-6 w-32 h-32 opacity-[0.03] pointer-events-none rotate-12">
+              <div className="w-full h-full border-4 border-[var(--color-text,#000)] flex flex-wrap gap-1 p-1">
+                {Array.from({ length: 36 }).map((_, i) => (
+                  <div key={i} className="bg-[var(--color-text,#000)] w-4 h-4" style={{ opacity: Math.random() }} />
+                ))}
+              </div>
+            </div>
+
+            {!hideTitle && title && (
+              <div className="flex items-start gap-4 mb-4">
+                {icon && (
+                  <div className="w-10 h-10 bg-[var(--color-text,#0a0a0a)]/5 border border-[var(--color-text,#0a0a0a)]/10 flex items-center justify-center shrink-0">
+                    {icon}
+                  </div>
+                )}
+                <div className="relative z-10">
+                  <h3 className="font-bold text-lg text-[var(--color-text,#0a0a0a)] leading-tight">{title}</h3>
+                </div>
+              </div>
+            )}
+
+            {/* Children */}
+            <div className="relative z-10">
+              {children}
+            </div>
+          </div>
+
+          {/* Decorations */}
+          <div className="absolute top-0 left-0 w-[1px] h-full bg-[var(--color-border-muted,#e5e5e5)]" />
+          <div className="absolute bottom-0 right-0 w-3 h-3 border-b border-r border-[var(--color-border,#d4d4d8)]" />
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes terminal-open {
+          0% {
+            opacity: 0;
+            transform: scaleY(0) scaleX(0.95);
+            filter: blur(4px);
+          }
+          100% {
+            opacity: 1;
+            transform: scaleY(1) scaleX(1);
+            filter: blur(0);
+          }
+        }
+        @keyframes terminal-close {
+          0% {
+            opacity: 1;
+            transform: scaleY(1) scaleX(1);
+            filter: blur(0);
+          }
+          100% {
+            opacity: 0;
+            transform: scaleY(0) scaleX(0.95);
+            filter: blur(4px);
+          }
+        }
+        @keyframes fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes fade-out {
+          from { opacity: 1; }
+          to { opacity: 0; }
+        }
+        .animate-terminal {
+          animation: terminal-open 0.15s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+          transform-origin: center;
+        }
+        .animate-terminal-close {
+          animation: terminal-close 0.12s cubic-bezier(0.55, 0, 1, 0.45) forwards;
+          transform-origin: center;
+        }
+        .animate-fade-in {
+          animation: fade-in 0.2s ease-out forwards;
+        }
+        .animate-fade-out {
+          animation: fade-out 0.15s ease-in forwards;
+        }
+      `}</style>
+    </>
+  );
+};

package/src/components/design-system/Popover.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PopoverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+  anchor?: 'left' | 'right';
+  /** Element to position the popover relative to (enables portal mode) */
+  anchorEl?: HTMLElement | null;
+}
+
+export const Popover: React.FC<PopoverProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className = '',
+  anchor = 'right',
+  anchorEl,
+}) => {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<{ top?: number; bottom?: number; left: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Ensure we're on the client
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Calculate position based on anchor element (auto-flips above if not enough space below)
+  useEffect(() => {
+    if (isOpen && anchorEl) {
+      const rect = anchorEl.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const flipUp = spaceBelow < 250;
+      const left = anchor === 'left' ? rect.left : rect.right;
+
+      if (flipUp) {
+        setPosition({ bottom: window.innerHeight - rect.top + 4, left });
+      } else {
+        setPosition({ top: rect.bottom + 4, left });
+      }
+    }
+  }, [isOpen, anchorEl, anchor]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      // Delay to prevent immediate close
+      setTimeout(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+      }, 0);
+    }
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, onClose]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleEscape);
+    }
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  // Use portal when anchorEl is provided (for proper z-index stacking)
+  const usePortal = !!anchorEl && mounted;
+
+  const popoverContent = (
+    <div
+      ref={popoverRef}
+      className={`
+        bg-[var(--color-surface)] border border-[var(--color-border-focus,#0a0a0a)] shadow-[4px_4px_0_rgba(204,255,0,0.2)]
+        min-w-[200px] animate-popover
+        ${usePortal ? 'fixed z-[9999]' : `absolute z-50 ${anchor === 'right' ? 'right-0' : 'left-0'}`}
+        ${className}
+      `}
+      style={usePortal && position ? {
+        ...(position.top !== undefined ? { top: position.top } : {}),
+        ...(position.bottom !== undefined ? { bottom: position.bottom } : {}),
+        left: anchor === 'left' ? position.left : undefined,
+        right: anchor === 'right' ? window.innerWidth - position.left : undefined,
+      } : undefined}
+    >
+      {title && (
+        <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--color-border)]">
+          <span className="text-[9px] font-mono text-[var(--color-text-muted)] uppercase tracking-widest">{title}</span>
+          <div className="flex gap-0.5">
+            <div className="w-1 h-1 bg-[var(--color-text-muted)]" />
+            <div className="w-1 h-1 bg-[var(--color-border)]" />
+          </div>
+        </div>
+      )}
+
+      <div className="p-3">
+        {children}
+      </div>
+
+      {/* Decorative corners */}
+      <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)]" />
+      <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)]" />
+
+      <style jsx>{`
+        @keyframes popover-open {
+          0% {
+            opacity: 0;
+            transform: translateY(-4px) scale(0.98);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+        .animate-popover {
+          animation: popover-open 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+      `}</style>
+    </div>
+  );
+
+  if (usePortal) {
+    return createPortal(popoverContent, document.body);
+  }
+
+  return popoverContent;
+};

package/src/components/design-system/TextInput.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  hint?: string;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  compact?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+}
+
+export const TextInput: React.FC<TextInputProps> = ({
+  label,
+  error,
+  errorMessage,
+  hint,
+  leftElement,
+  rightElement,
+  compact = false,
+  inputRef,
+  className = '',
+  ...props
+}) => {
+  const hasLabel = label && label.length > 0;
+  const hasError = error && (errorMessage || !errorMessage);
+
+  return (
+    <div className={`flex flex-col gap-1.5 w-full group ${className}`}>
+      {(hasLabel || hasError) && (
+        <div className="flex justify-between items-end px-1">
+          {hasLabel && (
+            <label className="font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] group-focus-within:text-[var(--color-text,#0a0a0a)] transition-colors">
+              {label}
+            </label>
+          )}
+          {error && errorMessage && (
+            <span className="font-mono text-[8px] text-[var(--color-danger,#ef4444)] uppercase">{errorMessage}</span>
+          )}
+          {error && !errorMessage && (
+            <span className="font-mono text-[9px] text-[var(--color-warning,#ff4d00)] font-bold">ERR_NULL</span>
+          )}
+        </div>
+      )}
+
+      <div className="relative flex">
+        {leftElement && (
+          <div className="absolute left-0 top-0 h-full flex items-center pl-2 pointer-events-none text-[var(--color-text-muted,#6b7280)]">
+            {leftElement}
+          </div>
+        )}
+        <input
+          ref={inputRef}
+          className={`
+            w-full ${compact ? 'h-8 text-[10px]' : 'h-12 text-sm'} bg-[var(--color-background-alt,#f4f4f5)] border outline-none font-mono text-[var(--color-text,#0a0a0a)] placeholder-[var(--color-text-muted,#6b7280)]
+            transition-all duration-200
+            border-[var(--color-border,#d4d4d8)]
+            hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]
+            focus:border-[var(--color-border-focus,#0a0a0a)] focus:bg-[var(--color-surface,#ffffff)] focus:shadow-[2px_2px_0_rgba(204,255,0,0.2)]
+            ${error ? 'border-[var(--color-danger,#ef4444)]/50 focus:border-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/5' : ''}
+            ${leftElement ? 'pl-7' : 'px-3'}
+            ${rightElement ? 'pr-8' : 'pr-3'}
+          `}
+          {...props}
+        />
+
+        {rightElement && (
+          <div className="absolute right-0 top-0 h-full flex items-center pr-2">
+            {rightElement}
+          </div>
+        )}
+
+        <div className={`absolute top-0 right-0 w-1.5 h-1.5 border-t border-r transition-opacity ${error ? 'border-[var(--color-danger,#ef4444)] opacity-100' : 'border-[var(--color-border-focus,#0a0a0a)] opacity-0 group-focus-within:opacity-100'
+          }`} />
+        <div className={`absolute bottom-0 left-0 w-1.5 h-1.5 border-b border-l transition-opacity ${error ? 'border-[var(--color-danger,#ef4444)] opacity-100' : 'border-[var(--color-border-focus,#0a0a0a)] opacity-0 group-focus-within:opacity-100'
+          }`} />
+      </div>
+
+      {hint && (
+        <span className="font-mono text-[8px] text-[var(--color-text-muted,#6b7280)] px-1">{hint}</span>
+      )}
+    </div>
+  );
+};

package/src/components/design-system/Toggle.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+}
+
+export const Toggle: React.FC<ToggleProps> = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  size = 'md',
+}) => {
+  const trackSize = size === 'sm' ? 'w-8 h-4' : 'w-10 h-5';
+  const knobSize = size === 'sm' ? 'w-3 h-3' : 'w-3.5 h-3.5';
+  const knobTranslate = size === 'sm' ? 'translate-x-4' : 'translate-x-5';
+
+  return (
+    <label
+      className={`flex items-center gap-2 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+    >
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`
+          ${trackSize} rounded-full relative transition-colors duration-200 flex-shrink-0
+          ${checked
+            ? 'bg-[var(--color-accent,#ccff00)]'
+            : 'bg-[var(--color-border,#d4d4d8)]'
+          }
+          ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+        `}
+      >
+        <span
+          className={`
+            ${knobSize} rounded-full absolute top-1/2 -translate-y-1/2 left-0.5
+            bg-[var(--color-text,#0a0a0a)] transition-transform duration-200
+            ${checked ? knobTranslate : 'translate-x-0'}
+          `}
+        />
+      </button>
+      {label && (
+        <span className="font-mono tracking-widest uppercase text-[9px] text-[var(--color-text,#0a0a0a)] select-none">
+          {label}
+        </span>
+      )}
+    </label>
+  );
+};

package/src/components/design-system/index.ts

@@ -0,0 +1,11 @@
+export { Button } from './Button';
+export { TextInput } from './TextInput';
+export { FilterDropdown } from './FilterDropdown';
+export { Drawer } from './Drawer';
+export { Modal } from './Modal';
+export { Popover } from './Popover';
+export { ConfirmationModal } from './ConfirmationModal';
+export { ConfirmationPopover } from './ConfirmationPopover';
+export { ChainIndicator } from './ChainIndicator';
+export { ChainSelector } from './ChainSelector';
+export { Toggle } from './Toggle';

package/src/components/docs/DocsThemeToggle.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, applyThemeToCSSVariables } from '@/lib/theme';
+
+export default function DocsThemeToggle() {
+  const [mode, setMode] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const stored = localStorage.getItem('docs-theme');
+    if (stored === 'dark') {
+      setMode('dark');
+      applyThemeToCSSVariables(DEFAULT_DARK_THEME);
+    }
+  }, []);
+
+  const toggle = () => {
+    const next = mode === 'light' ? 'dark' : 'light';
+    setMode(next);
+    localStorage.setItem('docs-theme', next);
+    applyThemeToCSSVariables(next === 'dark' ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME);
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+      aria-label={mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+    >
+      {mode === 'light' ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      ) : (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      )}
+    </button>
+  );
+}