chore: establish learning module baseline

OpenMAIC/app/eval/whiteboard/page.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ScreenElement } from '@/components/slide-renderer/Editor/ScreenElement';
+import { SceneProvider } from '@/lib/contexts/scene-context';
+import { useStageStore } from '@/lib/store/stage';
+import type { PPTElement } from '@openmaic/dsl';
+
+const EVAL_STAGE_ID = '__eval_stage__';
+const EVAL_SCENE_ID = '__eval_scene__';
+const CANVAS_WIDTH = 1000;
+const CANVAS_HEIGHT = 563;
+
+function WhiteboardCanvas() {
+  const [elements, setElements] = useState<PPTElement[]>([]);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    // Bootstrap store with a synthetic stage + scene
+    const store = useStageStore.getState();
+    store.setStage({
+      id: EVAL_STAGE_ID,
+      name: 'eval',
+      createdAt: 0,
+      updatedAt: 0,
+    });
+    store.setScenes([
+      {
+        id: EVAL_SCENE_ID,
+        stageId: EVAL_STAGE_ID,
+        type: 'slide',
+        title: 'eval',
+        order: 0,
+        content: {
+          type: 'slide',
+          canvas: {
+            id: EVAL_SCENE_ID,
+            viewportSize: CANVAS_WIDTH,
+            viewportRatio: CANVAS_HEIGHT / CANVAS_WIDTH,
+            theme: {
+              backgroundColor: '#ffffff',
+              themeColors: ['#5b9bd5'],
+              fontColor: '#333333',
+              fontName: 'Microsoft YaHei',
+            },
+            elements: [],
+          },
+        },
+      },
+    ]);
+    store.setCurrentSceneId(EVAL_SCENE_ID);
+
+    // Expose setter for Playwright
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).__setElements = (incoming: PPTElement[]) => {
+      setElements(incoming);
+      // Also update the store so SceneProvider/ScreenElement reads the theme
+      useStageStore.getState().updateScene(EVAL_SCENE_ID, {
+        content: {
+          type: 'slide',
+          canvas: {
+            id: EVAL_SCENE_ID,
+            viewportSize: CANVAS_WIDTH,
+            viewportRatio: CANVAS_HEIGHT / CANVAS_WIDTH,
+            theme: {
+              backgroundColor: '#ffffff',
+              themeColors: ['#5b9bd5'],
+              fontColor: '#333333',
+              fontName: 'Microsoft YaHei',
+            },
+            elements: incoming,
+          },
+        },
+      });
+    };
+
+    // Signal readiness
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).__evalReady = true;
+    // Defer setReady to avoid cascading render warning
+    queueMicrotask(() => setReady(true));
+  }, []);
+
+  if (!ready) return null;
+
+  return (
+    <SceneProvider>
+      <div
+        style={{
+          position: 'relative',
+          width: CANVAS_WIDTH,
+          height: CANVAS_HEIGHT,
+          backgroundColor: '#ffffff',
+          overflow: 'hidden',
+        }}
+      >
+        {elements.map((element, index) => (
+          <ScreenElement key={element.id} elementInfo={element} elementIndex={index} />
+        ))}
+      </div>
+    </SceneProvider>
+  );
+}
+
+export default function EvalWhiteboardPage() {
+  return <WhiteboardCanvas />;
+}