feat(record-mode): unify mouse tool and enhance visuals

components/record-mode/RecordModeOverlay.tsx

@@ -70,8 +70,9 @@ export function RecordModeOverlay() {
             selector,
             duration: lastInteractionType === 'click' ? 1000 : 1500,
             zoom: 1,
-            description: `${lastInteractionType === 'click' ? 'Click' : 'Hover'} on ${tagName}`,
+            description: `Mouse ${lastInteractionType === 'click' ? '(Click)' : '(Hover)'} on ${tagName}`,
             motionBlur: false,
+            realClick: false,
             rect,
           });
         } else if (pickingMode === 'scroll') {
@@ -125,7 +126,12 @@ export function RecordModeOverlay() {
 
   if (!isActive) {
     // Failsafe: Never render host toggle in embedded mode
-    if (typeof window !== 'undefined' && (window.self !== window.top || window.name === 'record-mode-iframe' || window.location.search.includes('embedded=true'))) {
+    if (
+      typeof window !== 'undefined' &&
+      (window.self !== window.top ||
+        window.name === 'record-mode-iframe' ||
+        window.location.search.includes('embedded=true'))
+    ) {
       return null;
     }
 
@@ -144,13 +150,16 @@ export function RecordModeOverlay() {
       {/* 1. Global Toolbar - Slim Industrial Bar */}
       <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
         <div className="bg-black/80 backdrop-blur-2xl border border-white/10 p-2 rounded-[24px] shadow-[0_32px_80px_rgba(0,0,0,0.8)] flex items-center gap-2">
-
           {/* Identity Tag */}
           <div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-[16px] border border-white/5 mx-1">
             <div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
             <div className="flex flex-col">
-              <span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">Event Builder</span>
-              <span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">Manual Mode</span>
+              <span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">
+                Event Builder
+              </span>
+              <span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">
+                Manual Mode
+              </span>
             </div>
           </div>
 
@@ -163,21 +172,10 @@ export function RecordModeOverlay() {
                 setPickingMode('mouse');
                 setLastInteractionType('click');
               }}
-              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'mouse' && lastInteractionType === 'click' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'mouse' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
             >
               <MousePointer2 size={16} />
-              <span>Click</span>
-            </button>
-
-            <button
-              onClick={() => {
-                setPickingMode('mouse');
-                setLastInteractionType('hover');
-              }}
-              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'mouse' && lastInteractionType === 'hover' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
-            >
-              <Eye size={16} />
-              <span>Hover</span>
+              <span>Mouse</span>
             </button>
 
             <button
@@ -189,13 +187,15 @@ export function RecordModeOverlay() {
             </button>
 
             <button
-              onClick={() => addEvent({
-                type: 'wait',
-                duration: 2000,
-                zoom: 1,
-                description: 'Wait for 2s',
-                motionBlur: false
-              })}
+              onClick={() =>
+                addEvent({
+                  type: 'wait',
+                  duration: 2000,
+                  zoom: 1,
+                  description: 'Wait for 2s',
+                  motionBlur: false,
+                })
+              }
               className="flex items-center gap-2 px-4 py-2.5 rounded-[16px] text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs font-bold uppercase tracking-wide"
             >
               <Plus size={16} />
@@ -258,7 +258,11 @@ export function RecordModeOverlay() {
 
             <button
               onClick={() => {
-                const data = JSON.stringify({ events, name: 'Recording', createdAt: new Date().toISOString() }, null, 2);
+                const data = JSON.stringify(
+                  { events, name: 'Recording', createdAt: new Date().toISOString() },
+                  null,
+                  2,
+                );
                 const blob = new Blob([data], { type: 'application/json' });
                 const url = URL.createObjectURL(blob);
                 const a = document.createElement('a');
@@ -294,7 +298,9 @@ export function RecordModeOverlay() {
             <div className="flex items-center justify-between mb-6">
               <div>
                 <h4 className="text-white font-bold text-lg leading-none">Recording Track</h4>
-                <p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">{events.length} Actions Recorded</p>
+                <p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">
+                  {events.length} Actions Recorded
+                </p>
               </div>
               <button
                 onClick={clearEvents}
@@ -332,12 +338,18 @@ export function RecordModeOverlay() {
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2">
                         <span className="text-white text-[10px] font-black uppercase tracking-widest">
-                          {event.type === 'mouse' ? event.interactionType : event.type}
+                          {event.type === 'mouse' ? `Mouse (${event.interactionType})` : event.type}
+                        </span>
+                        {event.clickOrigin &&
+                          event.clickOrigin !== 'center' &&
+                          event.interactionType === 'click' && (
+                            <span className="text-[8px] bg-accent/20 text-accent px-1.5 py-0.5 rounded uppercase font-bold">
+                              {event.clickOrigin}
+                            </span>
+                          )}
+                        <span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">
+                          {event.duration}ms
                         </span>
-                        {event.clickOrigin && event.clickOrigin !== 'center' && event.interactionType === 'click' && (
-                          <span className="text-[8px] bg-accent/20 text-accent px-1.5 py-0.5 rounded uppercase font-bold">{event.clickOrigin}</span>
-                        )}
-                        <span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">{event.duration}ms</span>
                       </div>
                       <p className="text-[9px] text-white/30 truncate font-mono mt-1 opacity-60">
                         {event.selector || 'system:wait'}
@@ -377,7 +389,9 @@ export function RecordModeOverlay() {
           <div className="bg-accent text-primary-dark px-6 py-3 rounded-full flex items-center gap-4 shadow-[0_20px_40px_rgba(130,237,32,0.4)] animate-reveal border border-primary-dark/10">
             <div className="flex items-center gap-2">
               <div className="w-2 h-2 rounded-full bg-primary-dark animate-pulse" />
-              <span className="font-black uppercase tracking-widest text-xs">Assigning {pickingMode}</span>
+              <span className="font-black uppercase tracking-widest text-xs">
+                Assigning {pickingMode}
+              </span>
             </div>
             <div className="w-px h-6 bg-primary-dark/20" />
             <button
@@ -400,8 +414,13 @@ export function RecordModeOverlay() {
         {editingEventId && (
           <div className="fixed inset-y-0 right-0 w-[350px] bg-black/95 backdrop-blur-3xl border-l border-white/10 z-[11000] pointer-events-auto p-8 shadow-[-40px_0_100px_rgba(0,0,0,0.9)] flex flex-col">
             <div className="flex items-center justify-between mb-8">
-              <h3 className="text-white font-black uppercase tracking-tighter text-xl">Event Options</h3>
-              <button onClick={() => setEditingEventId(null)} className="p-2 text-white/40 hover:text-white transition-colors">
+              <h3 className="text-white font-black uppercase tracking-tighter text-xl">
+                Event Options
+              </h3>
+              <button
+                onClick={() => setEditingEventId(null)}
+                className="p-2 text-white/40 hover:text-white transition-colors"
+              >
                 <X size={20} />
               </button>
             </div>
@@ -409,31 +428,37 @@ export function RecordModeOverlay() {
             <div className="flex-1 space-y-8 overflow-y-auto pr-2 scrollbar-hide">
               {/* Type Display */}
               <div className="space-y-3">
-                <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">Interaction Type</label>
+                <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">
+                  Interaction Type
+                </label>
                 <div className="flex gap-2 p-1 bg-white/5 rounded-2xl border border-white/5">
                   <button
-                    onClick={() => setEditForm(prev => ({ ...prev, type: 'mouse', interactionType: 'click' }))}
+                    onClick={() =>
+                      setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'click' }))
+                    }
                     className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'click' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
                   >
                     <MousePointer2 size={14} />
                     <span className="text-[10px] font-black uppercase">Click</span>
                   </button>
                   <button
-                    onClick={() => setEditForm(prev => ({ ...prev, type: 'mouse', interactionType: 'hover' }))}
+                    onClick={() =>
+                      setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'hover' }))
+                    }
                     className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'hover' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
                   >
                     <Eye size={14} />
                     <span className="text-[10px] font-black uppercase">Hover</span>
                   </button>
                   <button
-                    onClick={() => setEditForm(prev => ({ ...prev, type: 'scroll' }))}
+                    onClick={() => setEditForm((prev) => ({ ...prev, type: 'scroll' }))}
                     className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'scroll' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
                   >
                     <Scroll size={14} />
                     <span className="text-[10px] font-black uppercase">Scroll</span>
                   </button>
                   <button
-                    onClick={() => setEditForm(prev => ({ ...prev, type: 'wait' }))}
+                    onClick={() => setEditForm((prev) => ({ ...prev, type: 'wait' }))}
                     className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'wait' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
                   >
                     <Clock size={14} />
@@ -445,15 +470,22 @@ export function RecordModeOverlay() {
               {/* Precise Click Origin */}
               {editForm.type === 'mouse' && editForm.interactionType === 'click' && (
                 <div className="space-y-4">
-                  <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">Click Origin</label>
+                  <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">
+                    Click Origin
+                  </label>
                   <div className="grid grid-cols-3 gap-2 p-2 bg-white/5 rounded-2xl border border-white/5">
                     {[
-                      { id: 'top-left', label: 'TL' }, { id: 'top-right', label: 'TR' }, { id: 'center', label: 'CTR' },
-                      { id: 'bottom-left', label: 'BL' }, { id: 'bottom-right', label: 'BR' }
+                      { id: 'top-left', label: 'TL' },
+                      { id: 'top-right', label: 'TR' },
+                      { id: 'center', label: 'CTR' },
+                      { id: 'bottom-left', label: 'BL' },
+                      { id: 'bottom-right', label: 'BR' },
                     ].map((origin) => (
                       <button
                         key={origin.id}
-                        onClick={() => setEditForm(prev => ({ ...prev, clickOrigin: origin.id as any }))}
+                        onClick={() =>
+                          setEditForm((prev) => ({ ...prev, clickOrigin: origin.id as any }))
+                        }
                         className={`py-3 rounded-xl text-[10px] font-black uppercase tracking-tighter transition-all border ${editForm.clickOrigin === origin.id ? 'bg-accent text-primary-dark border-accent' : 'bg-transparent text-white/40 border-white/5 hover:border-white/20'}`}
                       >
                         {origin.label}
@@ -475,7 +507,9 @@ export function RecordModeOverlay() {
                   max="5000"
                   step="100"
                   value={editForm.duration || 1000}
-                  onChange={(e) => setEditForm(prev => ({ ...prev, duration: parseInt(e.target.value) }))}
+                  onChange={(e) =>
+                    setEditForm((prev) => ({ ...prev, duration: parseInt(e.target.value) }))
+                  }
                   className="w-full h-1 bg-white/10 rounded-lg appearance-none cursor-pointer accent-accent"
                 />
               </div>
@@ -485,7 +519,9 @@ export function RecordModeOverlay() {
                 <div className="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:border-white/20 transition-all">
                   <div className="flex items-center gap-3">
                     <Maximize2 size={18} className="text-white/40" />
-                    <span className="text-xs font-bold text-white uppercase tracking-wider">Zoom Shift</span>
+                    <span className="text-xs font-bold text-white uppercase tracking-wider">
+                      Zoom Shift
+                    </span>
                   </div>
                   <input
                     type="number"
@@ -493,13 +529,15 @@ export function RecordModeOverlay() {
                     min="1"
                     max="3"
                     value={editForm.zoom || 1}
-                    onChange={(e) => setEditForm(prev => ({ ...prev, zoom: parseFloat(e.target.value) }))}
+                    onChange={(e) =>
+                      setEditForm((prev) => ({ ...prev, zoom: parseFloat(e.target.value) }))
+                    }
                     className="w-16 bg-white/10 border border-white/10 rounded-lg px-2 py-1 text-xs text-white text-center font-mono"
                   />
                 </div>
 
                 <button
-                  onClick={() => setEditForm(prev => ({ ...prev, motionBlur: !prev.motionBlur }))}
+                  onClick={() => setEditForm((prev) => ({ ...prev, motionBlur: !prev.motionBlur }))}
                   className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.motionBlur ? 'bg-accent/10 border-accent/30 text-accent' : 'bg-white/5 border-white/5 text-white/40'}`}
                 >
                   <div className="flex items-center gap-3">
@@ -511,14 +549,18 @@ export function RecordModeOverlay() {
 
                 {editForm.type === 'mouse' && editForm.interactionType === 'click' && (
                   <button
-                    onClick={() => setEditForm(prev => ({ ...prev, realClick: !prev.realClick }))}
+                    onClick={() => setEditForm((prev) => ({ ...prev, realClick: !prev.realClick }))}
                     className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.realClick ? 'bg-orange-500/10 border-orange-500/30 text-orange-400' : 'bg-white/5 border-white/5 text-white/40'}`}
                   >
                     <div className="flex items-center gap-3">
                       <ExternalLink size={18} />
                       <div className="flex flex-col items-start">
-                        <span className="text-xs font-bold uppercase tracking-wider">Trigger Navigation</span>
-                        <span className="text-[8px] opacity-60">Allows URL transitions in Studio</span>
+                        <span className="text-xs font-bold uppercase tracking-wider">
+                          Trigger Navigation
+                        </span>
+                        <span className="text-[8px] opacity-60">
+                          Allows URL transitions in Studio
+                        </span>
                       </div>
                     </div>
                     {editForm.realClick ? <Check size={18} /> : <div className="w-[18px]" />}