fix: stabilize complex-rubric esm loading and author sync output

Prevent sync from producing invalid `: any` assignment code in complex-rubric author output, harden local ESM module resolution, and extend matrix coverage for loader/registry import failures across elements.

Made-with: Cursor

Author: chillenious

apps/element-demo/scripts/generate-element-imports.ts

@@ -36,7 +36,7 @@ function packageSpecifier(
   entryPoint: 'delivery' | 'controller' | 'author' | 'print'
 ): string {
   if (entryPoint === 'delivery') {
-    return `@pie-element/${elementName}`;
+    return `@pie-element/${elementName}/delivery`;
   }
   return `@pie-element/${elementName}/${entryPoint}`;
 }

apps/element-demo/test/e2e/smoke-matrix.spec.ts

@@ -35,6 +35,9 @@ const CRITICAL_CONSOLE_PATTERNS = [
   /window\.pie not found/i,
   /Module not found:/i,
   /Can't resolve/i,
+  /Failed to resolve module specifier/i,
+  /\[element-player\/demo\] Failed registry import/i,
+  /\[element-loader\] Failed to load element/i,
   /Cannot update an unmounted root/i,
 ];
 

apps/element-demo/vite.config.ts

@@ -118,6 +118,22 @@ export default defineConfig({
       // Force Vite to use the main field (lib/index.js) instead
       '@pie-framework/math-validation': '@pie-framework/math-validation/lib/index.js',
     },
+    // Keep a single ProseMirror instance across workspace packages.
+    // Without this, mixed tiptap/prosemirror imports can register duplicate
+    // selection IDs (e.g. gapcursor) and crash module evaluation.
+    dedupe: [
+      '@tiptap/pm',
+      'prosemirror-state',
+      'prosemirror-model',
+      'prosemirror-view',
+      'prosemirror-transform',
+      'prosemirror-history',
+      'prosemirror-commands',
+      'prosemirror-keymap',
+      'prosemirror-inputrules',
+      'prosemirror-gapcursor',
+      'prosemirror-schema-list',
+    ],
   },
 
   server: {

bun.lock

@@ -44,7 +44,11 @@ async function resolveModule(
   const modulePath = request.cdnUrl
     ? `${request.cdnUrl}/${request.packagePath}`
     : request.packagePath;
-  return import(/* @vite-ignore */ modulePath);
+  if (request.cdnUrl) {
+    return import(/* @vite-ignore */ modulePath);
+  }
+  // Let Vite resolve local workspace specifiers in ESM mode.
+  return import(modulePath);
 }
 
 /**

packages/element-player/src/lib/element-loader.ts

@@ -11,8 +11,8 @@
 import { ModelUpdatedEvent } from '@pie-element/shared-configure-events';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import RubricConfigure from '@pie-element/rubric';
-import MultiTraitRubricConfigure from '@pie-element/multi-trait-rubric';
+import RubricConfigure from '@pie-element/rubric/author';
+import MultiTraitRubricConfigure from '@pie-element/multi-trait-rubric/author';
 import debug from 'debug';
 import { defaults } from 'lodash-es';
 import Main from './main.js';

packages/elements-react/complex-rubric/src/author/index.ts

@@ -88,7 +88,7 @@ export class Main extends React.Component {
       switch (rubricType) {
         case RUBRIC_TYPES.SIMPLE_RUBRIC:
         default:
-          rubricTag: any = (
+          rubricTag = (
             <rubric-configure
               id="simpleRubric"
               key="simple-rubric"
@@ -104,7 +104,7 @@ export class Main extends React.Component {
           break;
 
         case RUBRIC_TYPES.MULTI_TRAIT_RUBRIC:
-          rubricTag: any = (
+          rubricTag = (
             <multi-trait-rubric-configure
               id="multiTraitRubric"
               key="multi-trait-rubric"
@@ -121,7 +121,7 @@ export class Main extends React.Component {
           break;
 
         case RUBRIC_TYPES.RUBRICLESS:
-          rubricTag: any = (
+          rubricTag = (
             <rubric-configure
               id="rubricless"
               key="rubricless"

packages/elements-react/complex-rubric/src/author/main.tsx

@@ -821,12 +821,11 @@ export function fixStyledComponentTypes(content: string): string {
   const constStyledRegex = /const (\w+) = styled\(/g;
   transformed = transformed.replace(constStyledRegex, 'const $1: any = styled(');
 
-  // Pattern 3: Class methods/arrow functions that might return styled components
-  // Add `: any` return type to methods that are missing type annotations
-  // Match: methodName = () => { or methodName = (params) => {
-  // But only at start of line (class methods), not property assignments like reader.onload =
-  // And only if they don't already have a type annotation
-  const methodRegex = /^(\s*)(\w+)\s*=\s*\([^)]*\)\s*=>\s*\{/gm;
+  // Pattern 3: Class field arrow functions that might return styled components
+  // Add `: any` return type to class fields missing type annotations.
+  // IMPORTANT: keep this line-scoped so we do not accidentally match multiline JSX
+  // assignments such as `foo = (<Component ref={(r) => { ... }} />)`.
+  const methodRegex = /^(\s*)(\w+)\s*=\s*\([^)\n]*\)\s*=>\s*\{/gm;
   transformed = transformed.replace(methodRegex, (match) => {
     // Check if already has type annotation (: type = )
     const hasTypeAnnotation = match.includes(':');

tools/cli/src/lib/upstream/sync-imports.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import {
+  fixStyledComponentTypes,
   transformConfigureUtilsImports,
   transformLegacyConfigureLibImports,
   transformSelfReferentialImports,
@@ -65,3 +66,35 @@ import { FractionModelChart } from '@pie-element/fraction-model';
     expect(output).toContain("from '../delivery/index.js'");
   });
 });
+
+describe('fixStyledComponentTypes', () => {
+  it('does not rewrite multiline JSX assignments that contain inline arrow functions', () => {
+    const input = `
+class Main {
+  onModelChanged = (model) => {
+    return model;
+  };
+
+  render() {
+    let rubricTag = '';
+    rubricTag = (
+      <rubric-configure
+        ref={(ref) => {
+          if (ref) {
+            this.simpleRubric = ref;
+          }
+        }}
+      />
+    );
+    return rubricTag;
+  }
+}
+`;
+
+    const output = fixStyledComponentTypes(input);
+
+    expect(output).toContain('onModelChanged: any = (model) => {');
+    expect(output).toContain('rubricTag = (');
+    expect(output).not.toContain('rubricTag: any = (');
+  });
+});