auramaxx 1.0.0-alpha.4

package/src/components/vault/CredentialWalletWidget.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Copy, ExternalLink, Wallet } from 'lucide-react';
+import { api, Api } from '@/lib/api';
+import type { WalletLinkMetaV1 } from './types';
+
+interface WalletSummary {
+  address: string;
+  tier: 'cold' | 'hot' | 'temp';
+  chain: string;
+  balance?: string;
+  name?: string;
+  label?: string;
+}
+
+interface CredentialWalletWidgetProps {
+  walletLink: WalletLinkMetaV1;
+}
+
+const shortAddress = (addr: string) => `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+
+function explorerUrl(chain: string, address: string): string {
+  if (chain === 'solana' || chain === 'solana-devnet') return `https://solscan.io/account/${address}`;
+  if (chain === 'polygon') return `https://polygonscan.com/address/${address}`;
+  if (chain === 'ethereum') return `https://etherscan.io/address/${address}`;
+  return `https://basescan.org/address/${address}`;
+}
+
+export const CredentialWalletWidget: React.FC<CredentialWalletWidgetProps> = ({ walletLink }) => {
+  const [wallet, setWallet] = useState<WalletSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copyOk, setCopyOk] = useState(false);
+  const normalizedChain = walletLink.chain.toLowerCase();
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const res = await api.get<{ wallets: WalletSummary[] }>(Api.Wallet, '/wallets');
+        const match = (res.wallets || []).find((w) =>
+          w.address.toLowerCase() === walletLink.walletAddress.toLowerCase() && w.chain.toLowerCase() === normalizedChain,
+        ) || null;
+        if (mounted) setWallet(match);
+      } catch {
+        if (mounted) setWallet(null);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    })();
+    return () => { mounted = false; };
+  }, [walletLink.walletAddress, normalizedChain, walletLink.chain]);
+
+  const resolvedName = useMemo(() => wallet?.name || wallet?.label || walletLink.label || 'Linked Wallet', [wallet, walletLink.label]);
+
+  return (
+    <div className="mt-2 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-background-alt,#f4f4f5)] p-3">
+      <div className="flex items-center justify-between mb-2">
+        <div className="font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] inline-flex items-center gap-1">
+          <Wallet size={11} /> Linked Wallet
+        </div>
+        <div className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+          {walletLink.tier} · {walletLink.chain}
+        </div>
+      </div>
+
+      <div className="font-mono text-[11px] text-[var(--color-text,#0a0a0a)] mb-1">{resolvedName}</div>
+      <div className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)] mb-2 break-all">
+        {walletLink.walletAddress}
+      </div>
+
+      {loading ? (
+        <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)]">Loading wallet state…</div>
+      ) : wallet ? (
+        <div className="font-mono text-[9px] text-[var(--color-success,#22c55e)] mb-2">Wallet resolved{wallet.balance ? ` · Balance: ${wallet.balance}` : ''}</div>
+      ) : (
+        <div className="font-mono text-[9px] text-[var(--color-warning,#f59e0b)] mb-2">Stale link: wallet not found in current wallet list</div>
+      )}
+
+      <div className="flex gap-2">
+        <button
+          type="button"
+          className="px-2 py-1 border border-[var(--color-border,#d4d4d8)] font-mono text-[9px]"
+          onClick={async () => {
+            await navigator.clipboard.writeText(walletLink.walletAddress);
+            setCopyOk(true);
+            setTimeout(() => setCopyOk(false), 1200);
+          }}
+        >
+          <span className="inline-flex items-center gap-1"><Copy size={10} /> {copyOk ? 'COPIED' : shortAddress(walletLink.walletAddress)}</span>
+        </button>
+        <a
+          href={explorerUrl(normalizedChain, walletLink.walletAddress)}
+          target="_blank"
+          rel="noreferrer"
+          className="px-2 py-1 border border-[var(--color-border,#d4d4d8)] font-mono text-[9px] inline-flex items-center gap-1"
+        >
+          <ExternalLink size={10} /> Explorer
+        </a>
+      </div>
+    </div>
+  );
+};

package/src/components/vault/ImportCredentialsModal.tsx

@@ -0,0 +1,515 @@
+'use client';
+
+import React, { useState, useRef, useCallback } from 'react';
+import { Upload, FileText, AlertCircle, CheckCircle, Info } from 'lucide-react';
+import { Modal, Button } from '@/components/design-system';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ImportSource {
+  label: string;
+  format: string;
+  supported: boolean;
+}
+
+const IMPORT_SOURCES: ImportSource[] = [
+  { label: '1Password', format: '1password-csv', supported: true },
+  { label: 'Bitwarden', format: 'bitwarden-csv', supported: true },
+  { label: 'Chrome', format: 'chrome-csv', supported: true },
+  { label: 'Firefox', format: 'firefox-csv', supported: true },
+  { label: 'iCloud Keychain', format: 'icloud-csv', supported: false },
+  { label: 'LastPass', format: 'lastpass-csv', supported: false },
+];
+
+type DuplicateStrategy = 'skip' | 'rename' | 'overwrite';
+
+const STRATEGY_LABELS: Record<DuplicateStrategy, string> = {
+  skip: 'Skip',
+  rename: 'Rename',
+  overwrite: 'Create Anyway',
+};
+
+interface PreviewCredential {
+  name: string;
+  type: string;
+  url?: string;
+  fieldCount: number;
+  isDuplicate: boolean;
+  duplicateMatch?: string;
+}
+
+interface PreviewResult {
+  success: boolean;
+  total: number;
+  duplicates: number;
+  credentials: PreviewCredential[];
+  error?: string;
+}
+
+interface ImportResult {
+  success: boolean;
+  imported: number;
+  skipped: number;
+  errors: { row: number; reason: string }[];
+  error?: string;
+}
+
+type Step = 'select' | 'preview' | 'result';
+
+interface ImportCredentialsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onComplete: () => void;
+  vaultId: string | null;
+  vaultName: string;
+  walletBaseUrl: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getToken(): string | null {
+  if (typeof window === 'undefined') return null;
+  return sessionStorage.getItem('aurawallet_admin_token');
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export const ImportCredentialsModal: React.FC<ImportCredentialsModalProps> = ({
+  isOpen,
+  onClose,
+  onComplete,
+  vaultId,
+  vaultName,
+  walletBaseUrl,
+}) => {
+  const [step, setStep] = useState<Step>('select');
+  const [selectedFormat, setSelectedFormat] = useState<string>('1password-csv');
+  const [file, setFile] = useState<File | null>(null);
+  const [duplicateStrategy, setDuplicateStrategy] = useState<DuplicateStrategy>('skip');
+  const [preview, setPreview] = useState<PreviewResult | null>(null);
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const reset = useCallback(() => {
+    setStep('select');
+    setSelectedFormat('1password-csv');
+    setFile(null);
+    setDuplicateStrategy('skip');
+    setPreview(null);
+    setResult(null);
+    setLoading(false);
+    setError(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }, []);
+
+  const handleClose = useCallback(() => {
+    reset();
+    onClose();
+  }, [reset, onClose]);
+
+  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0] ?? null;
+    if (f && f.size > MAX_FILE_SIZE) {
+      setError(`File too large (${(f.size / 1024 / 1024).toFixed(1)}MB). Maximum is 10MB.`);
+      setFile(null);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+      return;
+    }
+    setFile(f);
+    setError(null);
+  }, []);
+
+  const buildFormData = useCallback(
+    (dryRun: boolean) => {
+      if (!file) return null;
+      const fd = new FormData();
+      fd.append('file', file);
+      fd.append('format', selectedFormat);
+      fd.append('vaultId', vaultId || 'primary');
+      if (dryRun) fd.append('dryRun', 'true');
+      fd.append('duplicateStrategy', duplicateStrategy);
+      return fd;
+    },
+    [file, selectedFormat, vaultId, duplicateStrategy],
+  );
+
+  const handlePreview = useCallback(async () => {
+    if (!file) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const fd = buildFormData(true);
+      if (!fd) return;
+      const token = getToken();
+      const res = await fetch(`${walletBaseUrl}/credentials/import`, {
+        method: 'POST',
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        body: fd,
+      });
+      const contentType = res.headers.get('content-type') || '';
+      if (!contentType.includes('application/json')) {
+        setError(`Server error: ${res.status} ${res.statusText}`);
+        return;
+      }
+      const data: PreviewResult = await res.json();
+      if (!res.ok || !data.success) {
+        setError(data.error || `Request failed: ${res.status}`);
+        return;
+      }
+      setPreview(data);
+      setStep('preview');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Preview failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [file, buildFormData, walletBaseUrl]);
+
+  const handleImport = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const fd = buildFormData(false);
+      if (!fd) return;
+      const token = getToken();
+      const res = await fetch(`${walletBaseUrl}/credentials/import`, {
+        method: 'POST',
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        body: fd,
+      });
+      const ct = res.headers.get('content-type') || '';
+      if (!ct.includes('application/json')) {
+        setError(`Server error: ${res.status} ${res.statusText}`);
+        return;
+      }
+      const data: ImportResult = await res.json();
+      if (!res.ok) {
+        setError(data.error || `Request failed: ${res.status}`);
+        return;
+      }
+      setResult(data);
+      setStep('result');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Import failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [buildFormData, walletBaseUrl]);
+
+  const handleDone = useCallback(() => {
+    onComplete();
+    handleClose();
+  }, [onComplete, handleClose]);
+
+  // -------------------------------------------------------------------------
+  // Render helpers
+  // -------------------------------------------------------------------------
+
+  const selectedSource = IMPORT_SOURCES.find((s) => s.format === selectedFormat);
+
+  const renderSelectStep = () => (
+    <div className="space-y-5">
+      {/* Source selector */}
+      <div>
+        <label className="block text-[9px] font-bold tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] mb-2">
+          Source
+        </label>
+        <div className="grid grid-cols-1 gap-1.5">
+          {IMPORT_SOURCES.map((source) => (
+            <button
+              key={source.format}
+              onClick={() => source.supported && setSelectedFormat(source.format)}
+              disabled={!source.supported}
+              className={`flex items-center gap-2 px-3 py-2 text-left transition-colors border ${
+                selectedFormat === source.format
+                  ? 'border-[var(--color-accent,#ccff00)] bg-[var(--color-accent,#ccff00)]/5'
+                  : source.supported
+                    ? 'border-[var(--color-border,#d4d4d8)] hover:bg-[var(--color-background-alt,#f4f4f5)]'
+                    : 'border-[var(--color-border,#d4d4d8)] opacity-40 cursor-not-allowed'
+              }`}
+            >
+              <FileText size={12} className="text-[var(--color-text-muted,#6b7280)] flex-shrink-0" />
+              <span className="text-[10px] font-mono tracking-wider uppercase text-[var(--color-text,#0a0a0a)]">
+                {source.label}
+              </span>
+              {!source.supported && (
+                <span className="ml-auto text-[8px] font-mono tracking-wider uppercase text-[var(--color-text-faint,#9ca3af)]">
+                  Coming soon
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* File input */}
+      <div>
+        <label className="block text-[9px] font-bold tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] mb-2">
+          File
+        </label>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".csv"
+          onChange={handleFileChange}
+          className="hidden"
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="w-full flex items-center justify-center gap-2 px-4 py-4 border-2 border-dashed border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-text-muted,#6b7280)] transition-colors"
+        >
+          <Upload size={14} className="text-[var(--color-text-muted,#6b7280)]" />
+          <span className="text-[10px] font-mono tracking-wider text-[var(--color-text-muted,#6b7280)]">
+            {file ? file.name : 'Choose CSV file'}
+          </span>
+        </button>
+      </div>
+
+      {/* Vault target */}
+      <div className="flex items-center gap-2 px-2 py-1.5 bg-[var(--color-background-alt,#f4f4f5)]">
+        <Info size={10} className="text-[var(--color-text-faint,#9ca3af)] flex-shrink-0" />
+        <span className="text-[9px] font-mono tracking-wider text-[var(--color-text-muted,#6b7280)]">
+          Importing to <strong className="text-[var(--color-text,#0a0a0a)]">{vaultName}</strong>
+        </span>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="flex items-start gap-2 px-3 py-2 bg-red-50 border border-red-200">
+          <AlertCircle size={12} className="text-red-500 flex-shrink-0 mt-0.5" />
+          <span className="text-[10px] font-mono text-red-700">{error}</span>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex gap-2 justify-end">
+        <Button variant="secondary" size="sm" onClick={handleClose}>
+          CANCEL
+        </Button>
+        <Button
+          size="sm"
+          onClick={handlePreview}
+          loading={loading}
+          disabled={!file || !selectedSource?.supported}
+        >
+          PREVIEW
+        </Button>
+      </div>
+    </div>
+  );
+
+  const renderPreviewStep = () => {
+    if (!preview) return null;
+    return (
+      <div className="space-y-4">
+        {/* Summary */}
+        <div className="flex gap-4">
+          <div className="text-center">
+            <div className="text-[18px] font-bold font-mono text-[var(--color-text,#0a0a0a)]">
+              {preview.total}
+            </div>
+            <div className="text-[8px] font-mono tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+              Total
+            </div>
+          </div>
+          {preview.duplicates > 0 && (
+            <div className="text-center">
+              <div className="text-[18px] font-bold font-mono text-amber-600">
+                {preview.duplicates}
+              </div>
+              <div className="text-[8px] font-mono tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+                Duplicates
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Preview list */}
+        <div className="max-h-[240px] overflow-y-auto border border-[var(--color-border,#d4d4d8)]">
+          {preview.credentials.length === 0 ? (
+            <div className="px-4 py-8 text-center text-[10px] font-mono text-[var(--color-text-muted,#6b7280)]">
+              No credentials found in file
+            </div>
+          ) : (
+            preview.credentials.map((c, i) => (
+              <div
+                key={i}
+                className={`flex items-center gap-2 px-3 py-1.5 border-b border-[var(--color-border,#d4d4d8)] last:border-b-0 ${
+                  c.isDuplicate ? 'bg-amber-50/50' : ''
+                }`}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="text-[10px] font-mono text-[var(--color-text,#0a0a0a)] truncate">
+                    {c.name}
+                  </div>
+                  {c.url && (
+                    <div className="text-[8px] font-mono text-[var(--color-text-faint,#9ca3af)] truncate">
+                      {c.url}
+                    </div>
+                  )}
+                </div>
+                <span className="text-[8px] font-mono tracking-wider uppercase text-[var(--color-text-faint,#9ca3af)] flex-shrink-0">
+                  {c.type}
+                </span>
+                {c.isDuplicate && (
+                  <span className="text-[8px] font-mono tracking-wider uppercase text-amber-600 flex-shrink-0">
+                    DUP
+                  </span>
+                )}
+              </div>
+            ))
+          )}
+          {preview.total > preview.credentials.length && (
+            <div className="px-3 py-1.5 text-[9px] font-mono text-[var(--color-text-faint,#9ca3af)] text-center">
+              + {preview.total - preview.credentials.length} more
+            </div>
+          )}
+        </div>
+
+        {/* Duplicate strategy */}
+        {preview.duplicates > 0 && (
+          <div>
+            <label className="block text-[9px] font-bold tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] mb-1.5">
+              Duplicate handling
+            </label>
+            <div className="flex gap-1.5">
+              {(['skip', 'rename', 'overwrite'] as DuplicateStrategy[]).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => setDuplicateStrategy(s)}
+                  className={`px-3 py-1.5 text-[9px] font-mono tracking-wider uppercase border transition-colors ${
+                    duplicateStrategy === s
+                      ? 'border-[var(--color-accent,#ccff00)] bg-[var(--color-accent,#ccff00)]/10 text-[var(--color-text,#0a0a0a)]'
+                      : 'border-[var(--color-border,#d4d4d8)] text-[var(--color-text-muted,#6b7280)] hover:bg-[var(--color-background-alt,#f4f4f5)]'
+                  }`}
+                >
+                  {STRATEGY_LABELS[s]}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="flex items-start gap-2 px-3 py-2 bg-red-50 border border-red-200">
+            <AlertCircle size={12} className="text-red-500 flex-shrink-0 mt-0.5" />
+            <span className="text-[10px] font-mono text-red-700">{error}</span>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 justify-end">
+          <Button variant="secondary" size="sm" onClick={() => { setStep('select'); setError(null); if (fileInputRef.current) fileInputRef.current.value = ''; }}>
+            BACK
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleImport}
+            loading={loading}
+            disabled={preview.credentials.length === 0}
+          >
+            IMPORT {duplicateStrategy === 'skip' ? preview.total - preview.duplicates : preview.total} CREDENTIAL{(duplicateStrategy === 'skip' ? preview.total - preview.duplicates : preview.total) !== 1 ? 'S' : ''}
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderResultStep = () => {
+    if (!result) return null;
+    const hasErrors = result.errors.length > 0;
+    return (
+      <div className="space-y-4">
+        {/* Result icon */}
+        <div className="flex items-center gap-3">
+          {result.success ? (
+            <CheckCircle size={20} className="text-green-600" />
+          ) : (
+            <AlertCircle size={20} className="text-red-500" />
+          )}
+          <div>
+            <div className="text-[11px] font-mono font-bold text-[var(--color-text,#0a0a0a)]">
+              {result.success ? 'Import Complete' : 'Import Failed'}
+            </div>
+          </div>
+        </div>
+
+        {/* Counts */}
+        <div className="flex gap-6">
+          <div className="text-center">
+            <div className="text-[18px] font-bold font-mono text-green-600">{result.imported}</div>
+            <div className="text-[8px] font-mono tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+              Imported
+            </div>
+          </div>
+          {result.skipped > 0 && (
+            <div className="text-center">
+              <div className="text-[18px] font-bold font-mono text-[var(--color-text-muted,#6b7280)]">
+                {result.skipped}
+              </div>
+              <div className="text-[8px] font-mono tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+                Skipped
+              </div>
+            </div>
+          )}
+          {hasErrors && (
+            <div className="text-center">
+              <div className="text-[18px] font-bold font-mono text-red-500">
+                {result.errors.length}
+              </div>
+              <div className="text-[8px] font-mono tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+                Errors
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Error details */}
+        {hasErrors && (
+          <div className="max-h-[120px] overflow-y-auto border border-red-200 bg-red-50">
+            {result.errors.map((e, i) => (
+              <div
+                key={i}
+                className="px-3 py-1 text-[9px] font-mono text-red-700 border-b border-red-100 last:border-b-0"
+              >
+                Row {e.row}: {e.reason}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end">
+          <Button size="sm" onClick={handleDone}>
+            DONE
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Import Credentials"
+      subtitle="Credential_Import"
+      size="md"
+    >
+      {step === 'select' && renderSelectStep()}
+      {step === 'preview' && renderPreviewStep()}
+      {step === 'result' && renderResultStep()}
+    </Modal>
+  );
+};

package/src/components/vault/LargeTypeModal.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { Modal } from '@/components/design-system';
+
+interface LargeTypeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  value: string;
+}
+
+export const LargeTypeModal: React.FC<LargeTypeModalProps> = ({ isOpen, onClose, value }) => {
+  const characters = Array.from(value ?? '');
+
+  const renderCharacter = (char: string): string => {
+    if (char === ' ') return '␠';
+    if (char === '\n') return '↵';
+    if (char === '\t') return '⇥';
+    return char;
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title=""
+      size="lg"
+      hideHeader
+      hideTitle
+      contentClassName="!p-0"
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        className="w-full min-h-[360px] px-6 py-8 flex flex-col items-center justify-center text-center"
+      >
+        <div className="w-full max-w-[900px] max-h-[70vh] overflow-auto px-1">
+          <div className="grid gap-2 [grid-template-columns:repeat(auto-fit,minmax(56px,1fr))]">
+            {characters.map((char, index) => (
+              <div
+                key={`${index}-${char}`}
+                data-testid={`large-type-char-${index + 1}`}
+                className="rounded-sm border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)] px-1 py-2"
+              >
+                <div className="font-mono text-3xl font-bold leading-none text-[var(--color-text,#0a0a0a)] select-all">
+                  {renderCharacter(char)}
+                </div>
+                <div
+                  data-testid={`large-type-index-${index + 1}`}
+                  className="mt-2 font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)]"
+                >
+                  {index + 1}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-8 font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-faint,#9ca3af)]">
+          Click anywhere to dismiss
+        </div>
+      </button>
+    </Modal>
+  );
+};