auramaxx 1.0.0-alpha.4

package/src/components/apps/index.ts

@@ -0,0 +1,13 @@
+export { App } from './App';
+export { AppGrid } from './AppGrid';
+export { DraggableApp, type AppColor } from './DraggableApp';
+export { AgentKeysApp } from './AgentKeysApp';
+export { LogsApp } from './LogsApp';
+export { DetailedAddressDrawer } from './DetailedAddressDrawer';
+export { WalletDetailApp } from './WalletDetailApp';
+
+// Standalone apps (for app registry)
+export { default as SendApp } from './SendApp';
+export { default as IFrameApp } from './IFrameApp';
+export { default as TokenApp } from './TokenApp';
+

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

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  icon,
+  children,
+  disabled,
+  className = '',
+  ...props
+}) => {
+  const baseStyles = 'font-mono tracking-widest flex items-center justify-center gap-1.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed';
+
+  const variantStyles = {
+    primary: 'bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] hover:text-[var(--color-accent,#ccff00)] border border-[var(--color-text,#0a0a0a)]',
+    secondary: 'bg-[var(--color-surface,#ffffff)] border border-[var(--color-border,#d4d4d8)] text-[var(--color-text-muted,#6b7280)] hover:border-[var(--color-text,#0a0a0a)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)]',
+    danger: 'bg-[var(--color-surface,#ffffff)] border-2 border-[var(--color-warning,#ff4d00)] text-[var(--color-warning,#ff4d00)] hover:bg-[var(--color-warning,#ff4d00)] hover:text-white',
+    ghost: 'bg-transparent text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)]',
+  };
+
+  const sizeStyles = {
+    sm: 'h-8 px-2 text-[8px]',
+    md: 'h-9 px-3 text-[9px]',
+    lg: 'h-10 px-4 text-[10px]',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <Loader2 size={size === 'sm' ? 10 : size === 'md' ? 12 : 14} className="animate-spin" />
+      ) : icon ? (
+        icon
+      ) : null}
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+import { getChainIcon } from '@/components/icons/ChainIcons';
+
+// Chain colors for the indicator dot
+const CHAIN_COLORS: Record<string, string> = {
+  base: '#0052FF',
+  ethereum: '#627EEA',
+  arbitrum: '#28A0F0',
+  optimism: '#FF0420',
+  polygon: '#8247E5',
+  solana: '#9945FF',
+  'solana-devnet': '#9945FF',
+};
+
+interface ChainIndicatorProps {
+  chain: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export const ChainIndicator: React.FC<ChainIndicatorProps> = ({
+  chain,
+  size = 'sm',
+  className = '',
+}) => {
+  const ChainIcon = getChainIcon(chain);
+  const chainColor = CHAIN_COLORS[chain.toLowerCase()] || '#888';
+
+  const sizeStyles = {
+    sm: {
+      height: 'h-8',
+      padding: 'px-2',
+      iconSize: 10,
+      text: 'text-[9px]',
+    },
+    md: {
+      height: 'h-9',
+      padding: 'px-2.5',
+      iconSize: 12,
+      text: 'text-[10px]',
+    },
+  };
+
+  const styles = sizeStyles[size];
+
+  return (
+    <div
+      className={`${styles.height} ${styles.padding} flex items-center gap-1.5 font-mono ${styles.text} tracking-widest uppercase ${className}`}
+      style={{
+        background: 'var(--color-surface-alt, #f5f5f5)',
+        border: '1px solid var(--color-border, #d4d4d8)',
+        color: 'var(--color-text, #0a0a0a)',
+      }}
+    >
+      <span style={{ color: chainColor }}>
+        <ChainIcon size={styles.iconSize} />
+      </span>
+      <span>{chain.toUpperCase()}</span>
+    </div>
+  );
+};
+
+export default ChainIndicator;

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

@@ -0,0 +1,137 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+import { getChainIcon } from '@/components/icons/ChainIcons';
+
+const CHAIN_COLORS: Record<string, string> = {
+  base: '#0052FF',
+  ethereum: '#627EEA',
+  arbitrum: '#28A0F0',
+  optimism: '#FF0420',
+  polygon: '#8247E5',
+};
+
+interface ChainSelectorProps {
+  value: string;
+  onChange: (chain: string) => void;
+  chains: string[];
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+  className?: string;
+  label?: string;
+}
+
+export const ChainSelector: React.FC<ChainSelectorProps> = ({
+  value,
+  onChange,
+  chains,
+  disabled = false,
+  size = 'sm',
+  className = '',
+  label,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [position, setPosition] = useState<{ top: number; left: number; width: number } | null>(null);
+
+  const ChainIcon = getChainIcon(value);
+  const chainColor = CHAIN_COLORS[value.toLowerCase()] || '#888';
+  const compact = size === 'sm';
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: Math.max(rect.width, 100),
+      });
+    }
+  }, [isOpen]);
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      {label && (
+        <label className="block text-[9px] font-mono font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mb-1.5 px-1 pointer-events-none">
+          {label}
+        </label>
+      )}
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`
+          w-full ${compact ? 'h-8' : 'h-12'} flex items-center justify-between px-2 outline-none group
+          bg-[var(--color-background-alt,#f4f4f5)] border font-mono ${compact ? 'text-[9px]' : 'text-sm'} font-bold tracking-wider text-[var(--color-text,#0a0a0a)]
+          transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed
+          ${isOpen
+            ? 'border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)] shadow-[4px_4px_0_rgba(204,255,0,0.2)]'
+            : 'border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]'
+          }
+        `}
+      >
+        <span className="flex items-center gap-1.5 truncate">
+          <span style={{ color: chainColor }}>
+            <ChainIcon size={compact ? 10 : 12} />
+          </span>
+          <span className="uppercase">{value}</span>
+        </span>
+        <ChevronDown size={compact ? 12 : 14} className={`transform transition-transform text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] ${isOpen ? 'rotate-180 text-[var(--color-text,#0a0a0a)]' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <>
+          <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
+          <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
+        </>
+      )}
+
+      {isOpen && mounted && createPortal(
+        <>
+          <div className="fixed inset-0 z-[9998]" onClick={() => setIsOpen(false)} />
+          <div
+            className="fixed z-[9999] bg-[var(--color-surface,#ffffff)] border border-[var(--color-border-focus,#0a0a0a)] shadow-[4px_4px_0_rgba(204,255,0,0.2)] max-h-48 overflow-y-auto"
+            style={{
+              top: position?.top,
+              left: position?.left,
+              width: position?.width,
+            }}
+          >
+            {chains.map((chain) => {
+              const OptionChainIcon = getChainIcon(chain);
+              const optionColor = CHAIN_COLORS[chain.toLowerCase()] || '#888';
+              return (
+                <button
+                  key={chain}
+                  type="button"
+                  onClick={() => {
+                    onChange(chain);
+                    setIsOpen(false);
+                  }}
+                  className={`w-full text-left px-2 py-2.5 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-accent,#ccff00)] font-mono ${compact ? 'text-[9px]' : 'text-xs'} border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0 flex items-center gap-2 group/item uppercase tracking-wider`}
+                >
+                  <span style={{ color: optionColor }}>
+                    <OptionChainIcon size={compact ? 10 : 12} />
+                  </span>
+                  <span className="truncate">{chain}</span>
+                  <div className={`ml-auto w-1.5 h-1.5 flex-shrink-0 ${chain === value ? 'bg-[var(--color-text,#0a0a0a)]' : 'bg-[var(--color-border,#d4d4d8)] group-hover/item:bg-[var(--color-text,#0a0a0a)]'}`} />
+                </button>
+              );
+            })}
+          </div>
+        </>,
+        document.body
+      )}
+    </div>
+  );
+};
+
+export default ChainSelector;

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

@@ -0,0 +1,106 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+import { Modal } from './Modal';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'default';
+  loading?: boolean;
+}
+
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'CONFIRM',
+  cancelText = 'CANCEL',
+  variant = 'default',
+  loading = false,
+}) => {
+  const variantStyles = {
+    danger: {
+      icon: 'text-[var(--color-warning,#ff4d00)]',
+      iconBg: 'bg-[var(--color-warning,#ff4d00)]/10',
+      button: 'bg-[var(--color-warning,#ff4d00)] hover:bg-[var(--color-warning,#ff4d00)]/90 text-white',
+      border: 'border-[var(--color-warning,#ff4d00)]',
+    },
+    warning: {
+      icon: 'text-[var(--color-warning-alt,#ff9500)]',
+      iconBg: 'bg-[var(--color-warning-alt,#ff9500)]/10',
+      button: 'bg-[var(--color-warning-alt,#ff9500)] hover:bg-[var(--color-warning-alt,#ff9500)]/90 text-white',
+      border: 'border-[var(--color-warning-alt,#ff9500)]',
+    },
+    default: {
+      icon: 'text-[var(--color-text,#0a0a0a)]',
+      iconBg: 'bg-[var(--color-text,#0a0a0a)]/10',
+      button: 'bg-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-text,#0a0a0a)]/90 text-white hover:text-[var(--color-accent,#ccff00)]',
+      border: 'border-[var(--color-text,#0a0a0a)]',
+    },
+  };
+
+  const styles = variantStyles[variant];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      subtitle={variant === 'danger' ? 'Warning' : 'Confirm'}
+      icon={
+        <AlertTriangle size={20} className={styles.icon} />
+      }
+      size="sm"
+    >
+      <div className="space-y-4">
+        <p className="font-mono text-xs text-[var(--color-text-muted,#6b7280)] leading-relaxed">
+          {message}
+        </p>
+
+        {variant === 'danger' && (
+          <div className={`p-3 ${styles.iconBg} border ${styles.border} border-dashed`}>
+            <div className="flex items-center gap-2">
+              <AlertTriangle size={12} className={styles.icon} />
+              <span className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">
+                This action cannot be undone.
+              </span>
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-2">
+          <button
+            onClick={onClose}
+            disabled={loading}
+            className="flex-1 h-10 border border-[var(--color-border,#d4d4d8)] font-mono text-[10px] tracking-widest text-[var(--color-text-muted,#6b7280)] hover:border-[var(--color-text,#0a0a0a)] hover:text-[var(--color-text,#0a0a0a)] transition-colors disabled:opacity-50"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={loading}
+            className={`flex-1 h-10 font-mono text-[10px] tracking-widest flex items-center justify-center gap-2 transition-colors disabled:opacity-50 ${styles.button}`}
+          >
+            {loading ? (
+              <>
+                <Loader2 size={12} className="animate-spin" />
+                PROCESSING...
+              </>
+            ) : (
+              confirmText
+            )}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,81 @@
+'use client';
+
+import React from 'react';
+import { Popover } from './Popover';
+import { Button } from './Button';
+
+interface ConfirmationPopoverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmDisabled?: boolean;
+  confirmDisabledReason?: string;
+  loading?: boolean;
+  anchorEl?: HTMLElement | null;
+  anchor?: 'left' | 'right';
+}
+
+export const ConfirmationPopover: React.FC<ConfirmationPopoverProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = 'CONFIRM',
+  cancelLabel = 'CANCEL',
+  confirmDisabled = false,
+  confirmDisabledReason,
+  loading = false,
+  anchorEl,
+  anchor = 'right',
+}) => {
+  return (
+    <Popover
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      anchorEl={anchorEl}
+      anchor={anchor}
+      className="min-w-[240px] max-w-[300px]"
+    >
+      <div className="space-y-3">
+        <p className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)] leading-relaxed">
+          {message}
+        </p>
+
+        {confirmDisabled && confirmDisabledReason && (
+          <div className="p-2 bg-[var(--color-warning,#ff4d00)]/10 border border-[var(--color-warning,#ff4d00)]/30">
+            <p className="font-mono text-[9px] text-[var(--color-warning,#ff4d00)]">
+              {confirmDisabledReason}
+            </p>
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-1">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={onClose}
+            className="flex-1"
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={onConfirm}
+            disabled={confirmDisabled || loading}
+            loading={loading}
+            className="flex-1"
+          >
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  width?: 'sm' | 'md' | 'lg' | 'full';
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  width = 'md'
+}) => {
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      // Small delay to ensure DOM is ready before animation
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsAnimating(true);
+        });
+      });
+    } else {
+      setIsAnimating(false);
+      // Wait for exit animation to complete
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  // 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]);
+
+  const widthClasses = {
+    sm: 'w-80',
+    md: 'w-[400px]',
+    lg: 'w-[520px]',
+    full: 'w-full',
+  };
+
+  if (!shouldRender) return null;
+
+  return (
+    <div className={`absolute right-0 top-0 h-full ${widthClasses[width]} overflow-hidden z-40`}>
+      <div
+        className={`
+          h-full bg-[var(--color-surface,#ffffff)] border-l border-[var(--color-border,#d4d4d8)] flex flex-col
+          transition-transform duration-200 ease-out
+          ${isAnimating ? 'translate-x-0' : 'translate-x-full'}
+        `}
+      >
+        {/* Header */}
+        <div className="px-5 py-4 border-b border-[var(--color-border-muted,#e5e5e5)] bg-[var(--color-surface-alt,#fafafa)] relative">
+          {/* Corner accents */}
+          <div className="absolute top-2 left-2 w-2 h-2 border-l border-t border-[var(--color-border,#d4d4d8)]" />
+          <div className="absolute top-2 right-12 w-2 h-2 border-r border-t border-[var(--color-border,#d4d4d8)]" />
+
+          <div className="flex items-start justify-between">
+            <div>
+              <div className="flex items-center gap-2 mb-0.5">
+                <div className="w-1 h-1 bg-[var(--color-accent,#ccff00)]" />
+                <span className="font-mono text-[8px] text-[var(--color-text-muted,#6b7280)] tracking-widest uppercase">PANEL</span>
+              </div>
+              <h2 className="font-bold text-sm text-[var(--color-text,#0a0a0a)] tracking-tight">{title}</h2>
+              {subtitle && (
+                <p className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] mt-0.5">{subtitle}</p>
+              )}
+            </div>
+            <button
+              onClick={onClose}
+              className="p-1.5 hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors group -mr-1"
+            >
+              <X size={14} className="text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] transition-colors" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-5 relative bg-[var(--color-surface-alt,#fafafa)]">
+          {/* Subtle dot pattern */}
+          <div className="absolute inset-0 opacity-[0.03] bg-[radial-gradient(var(--color-text,#000)_1px,transparent_1px)] bg-[size:8px_8px] pointer-events-none" />
+
+          <div className="relative z-10">
+            {children}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-2 border-t border-[var(--color-border-muted,#e5e5e5)] bg-[var(--color-surface,#ffffff)]">
+          <div className="flex items-center justify-between">
+            <span className="font-mono text-[7px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">AURA_WALLET</span>
+            <div className="flex items-center gap-0.5">
+              <div className="w-1 h-1 bg-[var(--color-accent,#ccff00)]" />
+              <div className="w-1 h-1 bg-[var(--color-border,#d4d4d8)]" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface FilterDropdownProps {
+  options: { value: string; label: string }[];
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  compact?: boolean;
+}
+
+export const FilterDropdown: React.FC<FilterDropdownProps> = ({ options, value, onChange, label, compact = false }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedOption = options.find(opt => opt.value === value);
+
+  return (
+    <div className={`relative w-full group ${isOpen ? 'z-50' : 'z-20'}`}>
+      {label && (
+        <label className="block text-[9px] font-mono font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mb-1.5 px-1 pointer-events-none">
+          {label}
+        </label>
+      )}
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+            w-full ${compact ? 'h-8' : 'h-12'} flex items-center justify-between px-4 outline-none
+            bg-[var(--color-background-alt,#f4f4f5)] border font-mono ${compact ? 'text-[10px]' : 'text-sm'} font-bold tracking-wider text-[var(--color-text,#0a0a0a)]
+            transition-all duration-200
+            ${isOpen
+            ? 'border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)] shadow-[4px_4px_0_rgba(204,255,0,0.2)]'
+            : 'border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]'
+          }
+        `}
+      >
+        <span className="truncate">{selectedOption?.label || 'SELECT'}</span>
+        <ChevronDown size={14} className={`transform transition-transform text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] ${isOpen ? 'rotate-180 text-[var(--color-text,#0a0a0a)]' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <>
+          <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
+          <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
+        </>
+      )}
+
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+          <div className="absolute top-full left-0 w-full mt-1 bg-[var(--color-surface,#ffffff)] border border-[var(--color-border-focus,#0a0a0a)] shadow-[4px_4px_0_rgba(204,255,0,0.2)] max-h-48 overflow-y-auto z-50">
+            {options.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => {
+                  onChange(opt.value);
+                  setIsOpen(false);
+                }}
+                className={`w-full text-left px-4 py-2.5 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-accent,#ccff00)] font-mono ${compact ? 'text-[10px]' : 'text-xs'} border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0 flex items-center gap-2 group/item`}
+              >
+                <div className={`w-1.5 h-1.5 flex-shrink-0 ${opt.value === value ? 'bg-[var(--color-text,#0a0a0a)]' : 'bg-[var(--color-border,#d4d4d8)] group-hover/item:bg-[var(--color-text,#0a0a0a)]'}`} />
+                <span className="truncate">{opt.label}</span>
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};