fix: stabilize graphing ESM runtime and targeted strategy tests

Prevent autosize sync rewrites from generating invalid graphing labels in ESM mode, and make unified strategy tests target graphing parabola demos and strategy subsets for focused regression coverage.

Made-with: Cursor

Author: chillenious

apps/element-demo/test/e2e/unified-player-strategy.spec.ts

@@ -1,7 +1,14 @@
 import { expect, test, type Page } from '@playwright/test';
 
 const ELEMENT = process.env.UNIFIED_PLAYER_E2E_ELEMENT?.trim() || 'multiple-choice';
-const DEMO_QUERY = ELEMENT === 'multiple-choice' ? '&demo=math-algebra-quadratic' : '';
+const DEMO_ID =
+  process.env.UNIFIED_PLAYER_E2E_DEMO?.trim() ||
+  (ELEMENT === 'multiple-choice' ? 'math-algebra-quadratic' : ELEMENT === 'graphing' ? 'parabola-vertex' : '');
+const DEMO_QUERY = DEMO_ID ? `&demo=${DEMO_ID}` : '';
+const STRATEGIES = (process.env.UNIFIED_PLAYER_E2E_STRATEGIES?.trim() || 'esm,iife')
+  .split(',')
+  .map((s) => s.trim())
+  .filter((s): s is 'esm' | 'iife' => s === 'esm' || s === 'iife');
 
 async function waitForHostSettled(page: Page) {
   await page.waitForFunction(
@@ -26,7 +33,7 @@ test.describe('Unified element player strategy host', () => {
   test('delivery uses one host for esm and iife', async ({ page }) => {
     test.setTimeout(120_000);
 
-    for (const strategy of ['esm', 'iife'] as const) {
+    for (const strategy of STRATEGIES) {
       await page.goto(
         `/${ELEMENT}/deliver?mode=gather&role=student&player=${strategy}${DEMO_QUERY}`
       );
@@ -52,7 +59,7 @@ test.describe('Unified element player strategy host', () => {
   test('author and print mount through one host', async ({ page }) => {
     test.setTimeout(120_000);
 
-    for (const strategy of ['esm', 'iife'] as const) {
+    for (const strategy of STRATEGIES) {
       await page.goto(`/${ELEMENT}/author?player=${strategy}`);
       await page.waitForSelector('pie-element-player[view="author"]', { timeout: 45_000 });
       await waitForHostSettled(page);

bun.lock

@@ -192,7 +192,10 @@ function attachInstanceHandlers(viewMode: ElementPlayerView) {
     modelHandler = (event: Event) => {
       const customEvent = event as CustomEvent;
       const detail = customEvent.detail as any;
-      dispatch('model-changed', detail?.update ?? detail);
+      // Many elements emit partial updates in model.updated detail;
+      // emit a full model snapshot to keep host state consistent.
+      const nextModel = (elementInstance as any)?.model ?? detail?.model ?? detail?.update ?? detail;
+      dispatch('model-changed', nextModel);
     };
     elementInstance.addEventListener('model.updated', modelHandler);
   }

packages/element-player/src/players/PieElementPlayer.svelte

@@ -115,7 +115,7 @@ export const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, po
 };
 
 const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange }) => (
-  <AutosizeInputComponentComponent
+  <AutosizeInputComponent
     inputRef={(r) => {
       _ref(r);
       externalInputRef(r);

packages/lib-react/graphing/src/mark-label.tsx

@@ -81,6 +81,10 @@ export function getPostSyncTextPatches(projectRoot: string): PostSyncTextPatch[]
           from: '<AutosizeInput',
           to: '<AutosizeInputComponent',
         },
+        {
+          from: '<AutosizeInputComponentComponent',
+          to: '<AutosizeInputComponent',
+        },
         {
           from: 'const AutosizeInputComponent = AutosizeInput?.default ?? AutosizeInput;\nconst AutosizeInputComponent = AutosizeInput?.default ?? AutosizeInput;',
           to: 'const AutosizeInputComponent = AutosizeInput?.default ?? AutosizeInput;',
@@ -100,6 +104,10 @@ export function getPostSyncTextPatches(projectRoot: string): PostSyncTextPatch[]
           from: '<AutosizeInput',
           to: '<AutosizeInputComponent',
         },
+        {
+          from: '<AutosizeInputComponentComponent',
+          to: '<AutosizeInputComponent',
+        },
         {
           from: 'const AutosizeInputComponent = AutosizeInput?.default ?? AutosizeInput;\nconst AutosizeInputComponent = AutosizeInput?.default ?? AutosizeInput;',
           to: 'const AutosizeInputComponent = AutosizeInput?.default ?? AutosizeInput;',