The second part of improvements

Author: therustmonk

vocs-docs/docs/components/Array.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useState } from 'react';
+
+export default function Array() {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <span style={{ position: 'relative', display: 'inline-block', cursor: 'help' }}>
+      <span
+        style={{ cursor: 'help' }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        ⛁
+      </span>
+      {hovered && (
+        <span style={{
+          visibility: 'visible',
+          maxWidth: '200px',
+          backgroundColor: 'black',
+          color: 'white',
+          textAlign: 'center',
+          borderRadius: '20px',
+          padding: '5px 12px',
+          position: 'absolute',
+          zIndex: 1,
+          bottom: '125%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          whiteSpace: 'normal',
+          wordWrap: 'break-word',
+        }}>
+          array
+        </span>
+      )}
+    </span>
+  );
+}

vocs-docs/docs/components/BatchedArray.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+export default function Array() {
+  const [hovered, setHovered] = useState(false);
+  const iconRef = useRef<HTMLSpanElement | null>(null);
+  const [tooltipPos, setTooltipPos] = useState<{ top: number; left: number } | null>(null);
+
+  useEffect(() => {
+    if (hovered && iconRef.current) {
+      const rect = iconRef.current.getBoundingClientRect();
+      setTooltipPos({
+        top: rect.top - 50, // adjust offset
+        left: rect.left + rect.width / 2,
+      });
+    }
+  }, [hovered]);
+
+  return (
+    <>
+      <span style={{ position: 'relative', display: 'inline-block', cursor: 'help' }}>
+        <span
+          ref={iconRef}
+          style={{ cursor: 'help' }}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          *
+        </span>
+      </span>
+
+      {hovered && tooltipPos &&
+        ReactDOM.createPortal(
+          <div
+            style={{
+              position: 'fixed',
+              top: tooltipPos.top,
+              left: tooltipPos.left,
+              transform: 'translateX(-50%)',
+              maxWidth: '200px',
+              backgroundColor: 'black',
+              color: 'white',
+              textAlign: 'center',
+              borderRadius: '20px',
+              padding: '5px 12px',
+              zIndex: 1,
+              whiteSpace: 'normal',
+              wordWrap: 'break-word',
+              pointerEvents: 'none',
+            }}
+          >
+            array if batched
+          </div>,
+          document.body
+        )
+      }
+    </>
+  );
+}

vocs-docs/docs/components/CustomLayout.tsx

@@ -1,4 +1,6 @@
 // components/CustomLayout.tsx
+import React from 'react';
+
 export default function CustomLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="custom-layout">

vocs-docs/docs/components/Opt.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useState } from 'react';
+
+export default function Opt() {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <span style={{ position: 'relative', display: 'inline-block', cursor: 'help' }}>
+      <span
+        style={{ cursor: 'help' }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        ⊕
+      </span>
+      {hovered && (
+        <span style={{
+          visibility: 'visible',
+          maxWidth: '200px',
+          backgroundColor: 'black',
+          color: 'white',
+          textAlign: 'center',
+          borderRadius: '20px',
+          padding: '5px 12px',
+          position: 'absolute',
+          zIndex: 1,
+          bottom: '125%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          whiteSpace: 'normal',
+          wordWrap: 'break-word'
+        }}>
+          optional
+        </span>
+      )}
+    </span>
+  );
+}