added resize and mutation observer

Author: spaansba

docs/src/components/ForesightPreview/index.tsx

@@ -27,12 +27,6 @@ export default function ForesightPreview(): ReactNode {
       </div>
       <div className={styles.descriptionText}>
         Hover over or move your cursor toward any button to see how Foresight predicts user intent.
-        {debugMode && (
-          <p>
-            Debug mode is active - you can see the trajectory visualization and adjust settings in
-            the panel.
-          </p>
-        )}
       </div>
       <section className={styles.features}>
         <InteractiveButton color="#3498db" label="Button 1" name="button-name" />
@@ -42,10 +36,6 @@ export default function ForesightPreview(): ReactNode {
         <InteractiveButton color="#9b59b6" label="Button 5" />
         <InteractiveButton color="#1abc9c" label="Button 6" />
       </section>
-      <div className={styles.statsPanel}>
-        <p>Move your cursor toward a button to see intent prediction in action.</p>
-        <p>The callback will trigger before you physically hover the element.</p>
-      </div>
     </div>
   )
 }
@@ -66,6 +56,7 @@ function InteractiveButton({ color, label, name }: InteractiveButtonProps) {
         buttonRef.current,
         () => {
           setActivated(true)
+          unregister()
           setTimeout(() => setActivated(false), 1000)
         },
         40, // Add hit slop of 40px around the button

docs/src/components/ForesightPreview/styles.module.css

@@ -55,14 +55,11 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   gap: 1.5rem;
   padding: 3rem 0;
   width: 100%;
   min-height: 300px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .previewButton {
@@ -86,16 +83,6 @@
   animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1);
 }
 
-.statsPanel {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  background-color: #ffffff;
-  border: 1px solid #e9ecef;
-  border-radius: 8px;
-  color: #495057;
-  text-align: center;
-}
-
 @keyframes pulse {
   0%,
   100% {