auramaxx 0.0.1

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,88 @@
+'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;
+}
+
+/* Thin barcode strip rendered inside the primary button's right edge */
+const BarcodeStrip: React.FC = () => (
+  <span
+    className="absolute right-0 top-0 bottom-0 w-[6px] pointer-events-none opacity-25"
+    aria-hidden="true"
+    style={{
+      backgroundImage:
+        'repeating-linear-gradient(to bottom, var(--color-surface,#ffffff) 0px, var(--color-surface,#ffffff) 2px, transparent 2px, transparent 3px, var(--color-surface,#ffffff) 3px, var(--color-surface,#ffffff) 4px, transparent 4px, transparent 7px)',
+    }}
+  />
+);
+
+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-[var(--space-1)] transition-all disabled:opacity-50 disabled:cursor-not-allowed';
+
+  const isPrimary = variant === 'primary';
+
+  const variantStyles = {
+    primary: [
+      'relative clip-specimen-sm',
+      'bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] border border-[var(--color-text,#0a0a0a)]',
+      'shadow-mech hover:shadow-mech-hover active:shadow-mech-active',
+      'hover:bg-[var(--color-accent,#ccff00)] hover:text-[var(--color-accent-foreground,#0a0a0a)] hover:border-[var(--color-accent,#ccff00)]',
+      'hover:-translate-y-[1px] hover:-translate-x-[1px] active:translate-y-0 active:translate-x-0',
+    ].join(' '),
+    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-[var(--control-height-sm)] px-[var(--space-2)] text-[length:var(--font-size-xs)]',
+    md: 'h-[var(--control-height-md)] px-[var(--space-3)] text-[length:var(--font-size-sm)]',
+    lg: 'h-[var(--control-height-lg)] px-[var(--space-4)] text-[length:var(--font-size-md)]',
+  };
+
+  const loaderSize = size === 'sm'
+    ? 'var(--font-size-xs)'
+    : size === 'md'
+      ? 'var(--font-size-sm)'
+      : 'var(--font-size-md)';
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <>
+          {isPrimary && (
+            <span
+              className="absolute inset-0 pointer-events-none animate-ticker bg-hazard-stripes opacity-40"
+              aria-hidden="true"
+            />
+          )}
+          <Loader2 className="animate-spin relative z-[1]" style={{ width: loaderSize, height: loaderSize }} />
+        </>
+      ) : icon ? (
+        icon
+      ) : null}
+      <span className="relative z-[1]">{children}</span>
+      {isPrimary && !loading && <BarcodeStrip />}
+    </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-[var(--control-height-sm)]',
+      padding: 'px-[var(--space-2)]',
+      iconSize: 14,
+      text: 'text-[length:var(--font-size-xs)]',
+    },
+    md: {
+      height: 'h-[var(--control-height-md)]',
+      padding: 'px-[var(--space-3)]',
+      iconSize: 16,
+      text: 'text-[length:var(--font-size-sm)]',
+    },
+  };
+
+  const styles = sizeStyles[size];
+
+  return (
+    <div
+      className={`${styles.height} ${styles.padding} flex items-center gap-[var(--space-1)] 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,147 @@
+'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();
+      const scale = Number.parseFloat(
+        window.getComputedStyle(document.documentElement).getPropertyValue('--ui-scale-factor'),
+      ) || 1;
+      setPosition({
+        top: rect.bottom + Math.round(4 * scale),
+        left: rect.left,
+        width: Math.max(rect.width, 100),
+      });
+    }
+  }, [isOpen]);
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      {label && (
+        <label className="block text-[length:var(--font-size-xs)] font-mono font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mb-[var(--space-1)] px-[var(--space-1)] pointer-events-none">
+          {label}
+        </label>
+      )}
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`
+          w-full ${compact ? 'h-[var(--control-height-sm)] text-[length:var(--font-size-xs)]' : 'h-[calc(var(--control-height-lg)+var(--space-2))] text-[length:var(--font-size-md)]'} flex items-center justify-between px-[var(--space-2)] outline-none group
+          bg-[var(--color-background-alt,#f4f4f5)] border font-mono 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-mech'
+            : 'border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]'
+          }
+        `}
+      >
+        <span className="flex items-center gap-[var(--space-1)] truncate">
+          <span style={{ color: chainColor }}>
+            <ChainIcon size={compact ? 10 : 12} />
+          </span>
+          <span className="uppercase">{value}</span>
+        </span>
+        <ChevronDown
+          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)]' : ''}`}
+          style={{
+            width: compact ? 'var(--font-size-sm)' : 'var(--font-size-md)',
+            height: compact ? 'var(--font-size-sm)' : 'var(--font-size-md)',
+          }}
+        />
+      </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-mech overflow-y-auto"
+            style={{
+              top: position?.top,
+              left: position?.left,
+              width: position?.width,
+              maxHeight: 'calc(12rem * var(--ui-scale-factor, 1))',
+            }}
+          >
+            {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-[var(--space-2)] py-[var(--space-2)] text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] font-mono ${compact ? 'text-[length:var(--font-size-xs)]' : 'text-[length:var(--font-size-sm)]'} border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0 flex items-center gap-[var(--space-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,107 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Modal } from './Modal';
+import { Button } from './Button';
+
+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',
+      border: 'border-[var(--color-warning,#ff4d00)]',
+      buttonVariant: 'danger' as const,
+      buttonClassName: '',
+    },
+    warning: {
+      icon: 'text-[var(--color-warning-alt,#ff9500)]',
+      iconBg: 'bg-[var(--color-warning-alt,#ff9500)]/10',
+      border: 'border-[var(--color-warning-alt,#ff9500)]',
+      buttonVariant: 'secondary' as const,
+      buttonClassName: '!bg-[var(--color-warning-alt,#ff9500)] !text-white !border-[var(--color-warning-alt,#ff9500)] hover:!bg-[var(--color-warning-alt,#ff9500)]/90',
+    },
+    default: {
+      icon: 'text-[var(--color-text,#0a0a0a)]',
+      iconBg: 'bg-[var(--color-text,#0a0a0a)]/10',
+      border: 'border-[var(--color-text,#0a0a0a)]',
+      buttonVariant: 'primary' as const,
+      buttonClassName: '',
+    },
+  };
+
+  const styles = variantStyles[variant];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      icon={
+        <AlertTriangle style={{ width: 'var(--font-size-lg)', height: 'var(--font-size-lg)' }} className={styles.icon} />
+      }
+      size="sm"
+    >
+      <div className="space-y-[var(--space-4)]">
+        <p className="font-mono text-[length:var(--font-size-sm)] text-[var(--color-text-muted,#6b7280)] leading-relaxed">
+          {message}
+        </p>
+
+        {variant === 'danger' && (
+          <div className={`p-[var(--space-3)] ${styles.iconBg} border ${styles.border} border-dashed`}>
+            <div className="flex items-center gap-[var(--space-2)]">
+              <AlertTriangle style={{ width: 'var(--font-size-sm)', height: 'var(--font-size-sm)' }} className={styles.icon} />
+              <span className="font-mono text-[length:var(--font-size-sm)] text-[var(--color-text-muted,#6b7280)]">
+                This action cannot be undone.
+              </span>
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-[var(--space-2)] pt-[var(--space-2)]">
+          <Button
+            onClick={onClose}
+            disabled={loading}
+            variant="secondary"
+            size="lg"
+            className="flex-1"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            onClick={onConfirm}
+            disabled={loading}
+            variant={styles.buttonVariant}
+            size="lg"
+            loading={loading}
+            className={`flex-1 ${styles.buttonClassName}`}
+          >
+            {loading ? '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-[var(--space-3)]">
+        <p className="font-mono text-[length:var(--font-size-sm)] text-[var(--color-text-muted,#6b7280)] leading-relaxed">
+          {message}
+        </p>
+
+        {confirmDisabled && confirmDisabledReason && (
+          <div className="p-[var(--space-2)] bg-[var(--color-warning,#ff4d00)]/10 border border-[var(--color-warning,#ff4d00)]/30">
+            <p className="font-mono text-[length:var(--font-size-xs)] text-[var(--color-warning,#ff4d00)]">
+              {confirmDisabledReason}
+            </p>
+          </div>
+        )}
+
+        <div className="flex gap-[var(--space-2)] pt-[var(--space-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/DownloadButton.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Download } from 'lucide-react';
+
+interface DownloadAsset {
+  label: string;
+  href: string;
+}
+
+interface DownloadButtonProps {
+  /** Icon-only mode (e.g. for compact sidebars) */
+  compact?: boolean;
+}
+
+/** Known public download assets — checked via HEAD on mount. */
+const KNOWN_ASSETS: DownloadAsset[] = [
+  { label: 'Mac', href: '/Aura-1.0.0-alpha.9-arm64.dmg' },
+  { label: 'Windows', href: '/Aura Setup 1.0.0-alpha.9.exe' },
+];
+
+function isElectron(): boolean {
+  return typeof window !== 'undefined' && Boolean((window as unknown as Record<string, unknown>).auraDesktop);
+}
+
+export const DownloadButton: React.FC<DownloadButtonProps> = ({ compact = false }) => {
+  const [assets, setAssets] = useState<DownloadAsset[]>([]);
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Probe which assets actually exist and hide on Electron
+  useEffect(() => {
+    setMounted(true);
+
+    if (isElectron()) return; // already running the desktop app
+
+    let cancelled = false;
+    (async () => {
+      const available: DownloadAsset[] = [];
+      await Promise.all(
+        KNOWN_ASSETS.map(async (asset) => {
+          try {
+            const res = await fetch(asset.href, { method: 'HEAD' });
+            if (!cancelled && res.ok) available.push(asset);
+          } catch {
+            // asset not available
+          }
+        }),
+      );
+      if (!cancelled) {
+        // preserve original order
+        setAssets(KNOWN_ASSETS.filter((a) => available.includes(a)));
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
+  // Close on outside click / Escape
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        menuRef.current && !menuRef.current.contains(target) &&
+        triggerRef.current && !triggerRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  const toggle = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPos({ top: rect.bottom + 4, left: rect.right - 140 });
+    }
+    setOpen((prev) => !prev);
+  };
+
+  // Nothing to download → render nothing
+  if (assets.length === 0) return null;
+
+  return (
+    <>
+      {compact ? (
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={toggle}
+          className="flex items-center justify-center w-6 h-6 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors"
+          title="Download"
+          aria-label="Download"
+        >
+          <Download size={10} />
+        </button>
+      ) : (
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={toggle}
+          className="flex items-center gap-1 px-1.5 py-1 text-[8px] font-mono font-bold tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+          title="Download"
+          aria-expanded={open}
+        >
+          DOWNLOAD
+          <ChevronDown size={8} className={`transition-transform ${open ? 'rotate-180' : ''}`} />
+        </button>
+      )}
+
+      {open && mounted && createPortal(
+        <>
+          <div className="fixed inset-0 z-[9998]" onClick={() => setOpen(false)} />
+          <div
+            ref={menuRef}
+            className="fixed w-[140px] bg-[var(--color-surface,#ffffff)] border border-[var(--color-border-focus,#0a0a0a)] shadow-mech z-[9999] font-mono"
+            style={pos ? { top: pos.top, left: Math.max(4, pos.left) } : undefined}
+          >
+            {assets.map((asset, i) => (
+              <a
+                key={asset.href}
+                href={asset.href}
+                download
+                className={`w-full flex items-center gap-2 px-3 py-2 text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors ${i < assets.length - 1 ? 'border-b border-[var(--color-border-muted,#e5e5e5)]' : ''}`}
+                onClick={() => setOpen(false)}
+              >
+                <div className="w-1.5 h-1.5 bg-[var(--color-border,#d4d4d8)]" />
+                {asset.label}
+              </a>
+            ))}
+          </div>
+        </>,
+        document.body,
+      )}
+    </>
+  );
+};