feat(v1.2.1): add security monitoring components

- Add Storage Indicator (browser localStorage/sessionStorage monitor)
- Add Security Warnings (educational panel on JS limitations)
- Add Clipboard Tracker (copy event detection with clear function)
- Add data-sensitive attributes to sensitive fields

Security Features:
- Real-time storage monitoring with sensitive data highlighting
- Clipboard activity tracking with character count
- System clipboard clearing functionality
- Collapsible floating widgets (non-intrusive)
- Auto-refresh storage display every 2s
- Educational warnings about GC, string immutability, etc.

UI/UX:
- Floating widgets: Storage (bottom-right), Warnings (bottom-left), Clipboard (bottom-right stacked)
- Color-coded alerts (red=sensitive, orange=activity, yellow=warnings)
- Responsive and clean design with TailwindCSS

src/components/SecurityWarnings.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+
+export const SecurityWarnings = () => {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    return (
+        <div className="fixed bottom-4 left-4 z-50 max-w-sm">
+            <div className="bg-yellow-50 border-2 border-yellow-400 rounded-lg shadow-lg">
+
+                {/* Header */}
+                <div
+                    className="px-4 py-3 cursor-pointer flex items-center justify-between hover:bg-yellow-100 transition-colors rounded-t-lg"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                >
+                    <div className="flex items-center gap-2">
+                        <span className="text-lg">⚠️</span>
+                        <span className="font-semibold text-sm text-yellow-900">Security Limitations</span>
+                    </div>
+                    <span className="text-yellow-600 text-sm">{isExpanded ? '▼' : '▶'}</span>
+                </div>
+
+                {/* Expanded Content */}
+                {isExpanded && (
+                    <div className="px-4 py-3 border-t border-yellow-300 space-y-3 max-h-96 overflow-y-auto">
+
+                        <Warning
+                            icon="🧵"
+                            title="JavaScript Strings are Immutable"
+                            description="Strings cannot be overwritten in memory. Copies persist until garbage collection runs (timing unpredictable)."
+                        />
+
+                        <Warning
+                            icon="🗑️"
+                            title="No Guaranteed Memory Wiping"
+                            description="JavaScript has no secure memory clearing. Sensitive data may linger in RAM until GC or browser restart."
+                        />
+
+                        <Warning
+                            icon="📋"
+                            title="Clipboard Exposure"
+                            description="Copied data is accessible to other tabs/apps. Browser extensions can read clipboard contents."
+                        />
+
+                        <Warning
+                            icon="💾"
+                            title="Browser Storage Persistence"
+                            description="localStorage survives browser restart. sessionStorage survives page refresh. Both readable by any script on this domain."
+                        />
+
+                        <Warning
+                            icon="🔍"
+                            title="DevTools Access"
+                            description="All app state, memory, and storage visible in browser DevTools. Never use on untrusted devices."
+                        />
+
+                        <Warning
+                            icon="🌐"
+                            title="Network Risks (When Online)"
+                            description="If hosted online: DNS, HTTPS, CDN, and browser can see usage patterns. Use offline/local for maximum security."
+                        />
+
+                        <div className="pt-2 border-t border-yellow-300 text-xs text-yellow-800">
+                            <strong>Recommendation:</strong> Use this tool on a dedicated offline device.
+                            Clear browser data after each use. Never use on shared/public computers.
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const Warning = ({ icon, title, description }: { icon: string; title: string; description: string }) => (
+    <div className="flex gap-2 text-xs">
+        <span className="text-base flex-shrink-0">{icon}</span>
+        <div>
+            <div className="font-semibold text-yellow-900 mb-0.5">{title}</div>
+            <div className="text-yellow-800 leading-relaxed">{description}</div>
+        </div>
+    </div>
+);