Sessions 5-7a: 955 tests, deployment ready

2026-06-08 18:35:13 -04:00
parent 06b82624a2
commit 1fa04dc776
371 changed files with 49366 additions and 955 deletions
@@ -0,0 +1,46 @@
+'use client';
+
+import { useExplainMode } from '@/contexts/ExplainModeContext';
+
+interface ExplainTooltipProps {
+  explanation: string;
+  children: React.ReactNode;
+  inline?: boolean;
+}
+
+// Wraps an element. When Explain Mode is on, renders a small annotation
+// directly below `children` describing what the wrapped element means.
+// When off, renders children unchanged with no DOM cost.
+
+export default function ExplainTooltip({ explanation, children, inline = false }: ExplainTooltipProps) {
+  const { explainMode } = useExplainMode();
+
+  if (!explainMode) return <>{children}</>;
+
+  const wrapperTag = inline ? 'span' : 'div';
+  const Wrapper = wrapperTag as 'span';
+  return (
+    <Wrapper className="explain-wrap" style={{ display: inline ? 'inline-block' : 'block' }}>
+      {children}
+      <span
+        role="note"
+        className="explain-tip"
+        style={{
+          display: 'block',
+          marginTop: 6,
+          padding: '6px 10px',
+          fontSize: 12,
+          fontFamily: 'var(--font-mono, monospace)',
+          color: 'var(--text-secondary)',
+          background: 'rgba(0, 212, 160, 0.10)',
+          border: '1px solid rgba(0, 212, 160, 0.30)',
+          borderRadius: 6,
+          lineHeight: 1.4,
+        }}
+      >
+        <span aria-hidden="true" style={{ marginRight: 6, opacity: 0.7 }}>?</span>
+        {explanation}
+      </span>
+    </Wrapper>
+  );
+}