@pie-element/cli 0.1.1 → 0.1.2-next.0

package/dist/lib/upstream/sync-imports.js

@@ -32,7 +32,21 @@
  *    - Student-facing UI only needs minimal fallback configuration
  *    - Inline empty defaults object to avoid the dependency
  */
+import { existsSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import ts from 'typescript';
+import { PRESET_IDS, shouldTransformConfigUiMathjsSource, shouldTransformReactInputAutosizeSource, } from './sync-presets.js';
+import { applySourceEdits, rewriteModuleSpecifiers } from './sync-source-edit.js';
+const SOURCE_PATH_PRESET_RULES = {
+    [PRESET_IDS.transformTextSelectTokenTypesReexport]: (sourcePath) => sourcePath.includes('text-select') && sourcePath.includes('token-select/index'),
+    [PRESET_IDS.transformChartingUtilsTypeFix]: (sourcePath) => sourcePath.includes('charting') && sourcePath.includes('utils'),
+    [PRESET_IDS.transformTranslatorIndexTypeFix]: (sourcePath) => sourcePath.includes('translator') && sourcePath.includes('/src/index'),
+    [PRESET_IDS.transformRenderUiInlineMenuExport]: (sourcePath) => sourcePath.includes('render-ui/src/index.js'),
+};
+function sourcePathMatchesPreset(sourcePath, presetId) {
+    return !!sourcePath && SOURCE_PATH_PRESET_RULES[presetId](sourcePath);
+}
 /**
  * Fix import statements in a file to handle default export conversions
  *
@@ -62,6 +76,67 @@ export async function fixImportsInFile(filePath, defaultExportFiles) {
     }
     return modified;
 }
+/**
+ * Rewrite relative ESM specifiers to explicit `.js` extensions for NodeNext compatibility.
+ *
+ * This is applied after sync so TypeScript source uses runtime-valid ESM specifiers:
+ * - `./foo` -> `./foo.js`
+ * - `./bar` (directory with index file) -> `./bar/index.js`
+ */
+export async function rewriteRelativeSpecifiersForNodeEsm(filePath) {
+    let content = await readFile(filePath, 'utf-8');
+    let modified = false;
+    const rewriteSpecifier = (specifier) => {
+        if (!specifier.startsWith('./') && !specifier.startsWith('../')) {
+            return specifier;
+        }
+        // Keep explicit extensions as-is (css/json/svg/js/etc.).
+        if (/\.[a-z0-9]+$/i.test(specifier)) {
+            return specifier;
+        }
+        const basePath = join(dirname(filePath), specifier);
+        const moduleFileExtensions = ['.ts', '.tsx', '.mts', '.cts', '.js', '.jsx', '.mjs', '.cjs'];
+        const indexFileExtensions = moduleFileExtensions.map((ext) => `/index${ext}`);
+        const hasModuleFile = moduleFileExtensions.some((ext) => existsSync(`${basePath}${ext}`));
+        if (hasModuleFile) {
+            return `${specifier}.js`;
+        }
+        const hasIndexFile = indexFileExtensions.some((suffix) => existsSync(`${basePath}${suffix}`));
+        if (hasIndexFile) {
+            return `${specifier.replace(/\/$/, '')}/index.js`;
+        }
+        // Do not guess unresolved paths.
+        return specifier;
+    };
+    content = content.replace(/(from\s+)(['"])(\.\.?\/[^'"]+)\2/g, (match, prefix, quote, specifier) => {
+        const rewritten = rewriteSpecifier(specifier);
+        if (rewritten !== specifier) {
+            modified = true;
+            return `${prefix}${quote}${rewritten}${quote}`;
+        }
+        return match;
+    });
+    content = content.replace(/(import\(\s*)(['"])(\.\.?\/[^'"]+)\2(\s*\))/g, (match, start, quote, specifier, end) => {
+        const rewritten = rewriteSpecifier(specifier);
+        if (rewritten !== specifier) {
+            modified = true;
+            return `${start}${quote}${rewritten}${quote}${end}`;
+        }
+        return match;
+    });
+    content = content.replace(/\bimport\s+(['"])(\.\.?\/[^'"]+)\1/g, (match, quote, specifier) => {
+        const rewritten = rewriteSpecifier(specifier);
+        if (rewritten !== specifier) {
+            modified = true;
+            return `import ${quote}${rewritten}${quote}`;
+        }
+        return match;
+    });
+    if (modified) {
+        await writeFile(filePath, content, 'utf-8');
+    }
+    return modified;
+}
 /**
  * Check if code contains JSX syntax
  */
@@ -97,7 +172,7 @@ const ${importName} = {
  */
 export function reexportTokenTypes(code, filePath) {
     // Only apply to text-select token-select/index file
-    if (!filePath.includes('text-select') || !filePath.includes('token-select/index')) {
+    if (!sourcePathMatchesPreset(filePath, PRESET_IDS.transformTextSelectTokenTypesReexport)) {
         return code;
     }
     // Check if file imports TokenTypes from ./token
@@ -202,47 +277,273 @@ export function convertModuleExportsToEsm(content) {
     const esmExports = exports.join('\n\n');
     return content.replace(fullMatch, esmExports);
 }
+const VENDORED_LODASH_PACKAGE = '@pie-element/shared-lodash';
+function lodashMemberFromPath(path) {
+    return path.replace(/\.js$/i, '').split('/').pop() ?? path;
+}
 /**
- * Transform lodash imports to lodash-es for ESM compatibility
+ * Transform lodash and lodash-es imports to the vendored shared lodash package.
  *
- * Handles all lodash import patterns:
- * - Individual module imports: import isEmpty from 'lodash/isEmpty'
- * - Named imports: import { isEmpty, isEqual } from 'lodash'
- * - Default import: import _ from 'lodash'
- * - Namespace import: import * as _ from 'lodash'
+ * The vendored package is intentionally a narrow ESM implementation of the
+ * lodash helpers used by synced PIE sources, avoiding CDN/runtime lodash
+ * resolution while keeping import shapes tree-shakeable.
+ */
+export function transformLodashToVendoredLodash(content) {
+    const sourceFile = ts.createSourceFile('source.tsx', content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const edits = [];
+    const dynamicDeepImportMembers = new Set();
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
+            const path = lodashDeepImportPath(node.moduleSpecifier.text);
+            if (path) {
+                const member = lodashMemberFromPath(path);
+                edits.push({
+                    start: node.getStart(sourceFile),
+                    end: node.getEnd(),
+                    text: lodashImportReplacement(node, sourceFile, member),
+                });
+            }
+        }
+        else if (ts.isExportDeclaration(node) &&
+            node.moduleSpecifier &&
+            ts.isStringLiteral(node.moduleSpecifier)) {
+            const path = lodashDeepImportPath(node.moduleSpecifier.text);
+            if (path) {
+                const member = lodashMemberFromPath(path);
+                edits.push({
+                    start: node.getStart(sourceFile),
+                    end: node.getEnd(),
+                    text: lodashExportReplacement(node, sourceFile, member),
+                });
+            }
+        }
+        else if (isDynamicStringImport(node)) {
+            const path = lodashDeepImportPath(node.arguments[0].text);
+            if (path) {
+                const member = lodashMemberFromPath(path);
+                dynamicDeepImportMembers.add(member);
+                edits.push({
+                    start: node.getStart(sourceFile),
+                    end: node.getEnd(),
+                    text: `Promise.resolve({ default: ${member}, ${member} })`,
+                });
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let transformed = applySourceEdits(content, edits);
+    // Root imports keep their local import shape.
+    transformed = rewriteModuleSpecifiers(transformed, (specifier) => specifier === 'lodash' || specifier === 'lodash-es' ? VENDORED_LODASH_PACKAGE : undefined);
+    if (dynamicDeepImportMembers.size > 0) {
+        const imports = [...dynamicDeepImportMembers].sort().join(', ');
+        transformed = `import { ${imports} } from '${VENDORED_LODASH_PACKAGE}';\n${transformed}`;
+    }
+    return transformed;
+}
+function lodashDeepImportPath(specifier) {
+    const match = specifier.match(/^(?:lodash|lodash-es)\/(.+)$/);
+    return match?.[1] ?? null;
+}
+function isDynamicStringImport(node) {
+    return (ts.isCallExpression(node) &&
+        node.expression.kind === ts.SyntaxKind.ImportKeyword &&
+        node.arguments.length === 1 &&
+        ts.isStringLiteral(node.arguments[0]));
+}
+function quoteLike(specifier, originalText) {
+    const delimiter = originalText.startsWith('"') ? '"' : "'";
+    const escaped = specifier.replace(/\\/g, '\\\\').replaceAll(delimiter, `\\${delimiter}`);
+    return `${delimiter}${escaped}${delimiter}`;
+}
+function lodashImportReplacement(node, sourceFile, member) {
+    const packageSpecifier = quoteLike(VENDORED_LODASH_PACKAGE, node.moduleSpecifier.getText(sourceFile));
+    const importClause = node.importClause;
+    if (!importClause) {
+        return `import ${packageSpecifier};`;
+    }
+    if (importClause.name) {
+        return `import { ${formatLodashBinding(member, importClause.name.text)} } from ${packageSpecifier};`;
+    }
+    const namedBindings = importClause.namedBindings;
+    if (namedBindings && ts.isNamespaceImport(namedBindings)) {
+        return `import { ${formatLodashBinding(member, namedBindings.name.text)} } from ${packageSpecifier};`;
+    }
+    if (namedBindings && ts.isNamedImports(namedBindings)) {
+        const bindings = namedBindings.elements
+            .map((specifier) => lodashImportSpecifierBinding(member, specifier))
+            .join(', ');
+        const typeOnly = importClause.isTypeOnly ? 'type ' : '';
+        return `import ${typeOnly}{ ${bindings} } from ${packageSpecifier};`;
+    }
+    return `import ${packageSpecifier};`;
+}
+function lodashExportReplacement(node, sourceFile, member) {
+    const packageSpecifier = quoteLike(VENDORED_LODASH_PACKAGE, node.moduleSpecifier?.getText(sourceFile) ?? `'${VENDORED_LODASH_PACKAGE}'`);
+    const exportClause = node.exportClause;
+    if (!exportClause) {
+        return `export { ${member} } from ${packageSpecifier};`;
+    }
+    if (ts.isNamespaceExport(exportClause)) {
+        return `export { ${formatLodashBinding(member, exportClause.name.text)} } from ${packageSpecifier};`;
+    }
+    const bindings = exportClause.elements
+        .map((specifier) => lodashExportSpecifierBinding(member, specifier))
+        .join(', ');
+    const typeOnly = node.isTypeOnly ? 'type ' : '';
+    return `export ${typeOnly}{ ${bindings} } from ${packageSpecifier};`;
+}
+function lodashImportSpecifierBinding(member, specifier) {
+    const imported = specifier.propertyName?.text ?? specifier.name.text;
+    const local = specifier.name.text;
+    if (imported === 'default') {
+        return formatLodashBinding(member, local);
+    }
+    return imported === local ? imported : `${imported} as ${local}`;
+}
+function lodashExportSpecifierBinding(member, specifier) {
+    const exported = specifier.name.text;
+    const local = specifier.propertyName?.text ?? exported;
+    if (local === 'default') {
+        return formatLodashBinding(member, exported);
+    }
+    return local === exported ? exported : `${local} as ${exported}`;
+}
+function formatLodashBinding(imported, local) {
+    return imported === local ? imported : `${imported} as ${local}`;
+}
+export const transformLodashToLodashEs = transformLodashToVendoredLodash;
+/**
+ * Transform classnames imports to clsx.
  *
- * Converts them to use lodash-es which is a pure ESM package.
+ * clsx preserves the call shape used by classnames while offering a browser ESM
+ * entrypoint, so synced source should prefer it over the CommonJS-era package.
  */
-export function transformLodashToLodashEs(content) {
-    let transformed = content;
-    // Pattern 1: Individual module imports
-    // import isEmpty from 'lodash/isEmpty' → import { isEmpty } from 'lodash-es'
-    // import cloneDeep from 'lodash/cloneDeep' → import { cloneDeep } from 'lodash-es'
-    transformed = transformed.replace(/import\s+(\w+)\s+from\s+['"]lodash\/(\w+)['"]/g, "import { $1 } from 'lodash-es'");
-    // Pattern 2: Named imports, default imports, and namespace imports from main module
-    // import { isEmpty, isEqual } from 'lodash' → import { isEmpty, isEqual } from 'lodash-es'
-    // import _ from 'lodash' → import _ from 'lodash-es'
-    // import * as _ from 'lodash' → import * as _ from 'lodash-es'
-    transformed = transformed.replace(/from\s+['"]lodash['"]/g, "from 'lodash-es'");
+export function transformClassnamesToClsx(content) {
+    return rewriteModuleSpecifiers(content, (specifier) => specifier === 'classnames' ? 'clsx' : undefined);
+}
+/**
+ * Replace react-input-autosize with the local ESM autosize input component.
+ *
+ * The upstream dependency is CommonJS-era and only used by graph label inputs.
+ * Synced packages generate a tiny local component instead of carrying the
+ * dependency into browser ESM output.
+ */
+export function transformReactInputAutosizeToLocal(content, sourcePath) {
+    if (!shouldTransformReactInputAutosizeSource(sourcePath)) {
+        return content;
+    }
+    const sourceFile = ts.createSourceFile('source.tsx', content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const edits = [];
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node) &&
+            ts.isStringLiteral(node.moduleSpecifier) &&
+            node.moduleSpecifier.text === 'react-input-autosize') {
+            const importName = node.importClause?.name?.text;
+            if (importName) {
+                edits.push({
+                    start: node.getStart(sourceFile),
+                    end: node.getEnd(),
+                    text: importName === 'AutosizeInput'
+                        ? "import { AutosizeInput } from './autosize-input.js';"
+                        : `import { AutosizeInput as ${importName} } from './autosize-input.js';`,
+                });
+            }
+        }
+        else if (isAutosizeInputComponentAdapter(node, sourceFile)) {
+            edits.push({
+                start: node.getStart(sourceFile),
+                end: node.getEnd(),
+                text: '',
+            });
+        }
+        else if (isAutosizeInputComponentJsxTag(node)) {
+            edits.push({
+                start: node.tagName.getStart(sourceFile),
+                end: node.tagName.getEnd(),
+                text: 'AutosizeInput',
+            });
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return applySourceEdits(content, edits);
+}
+function isAutosizeInputComponentAdapter(node, sourceFile) {
+    if (!ts.isVariableStatement(node) || node.declarationList.declarations.length !== 1) {
+        return false;
+    }
+    const declaration = node.declarationList.declarations[0];
+    if (!ts.isIdentifier(declaration.name) || declaration.name.text !== 'AutosizeInputComponent') {
+        return false;
+    }
+    return (declaration.initializer?.getText(sourceFile).replace(/\s+/g, '') ===
+        'AutosizeInput?.default??AutosizeInput');
+}
+function isAutosizeInputComponentJsxTag(node) {
+    return ((ts.isJsxOpeningElement(node) ||
+        ts.isJsxClosingElement(node) ||
+        ts.isJsxSelfClosingElement(node)) &&
+        ts.isIdentifier(node.tagName) &&
+        node.tagName.text === 'AutosizeInputComponent');
+}
+/**
+ * Replace config-ui's tiny mathjs usage with a local fraction-to-number helper.
+ *
+ * number-text-field-custom only uses `math.number(math.fraction(value))` to
+ * compare custom fraction values. Keep mathjs for number-line where the surface
+ * includes exact rational arithmetic, comparisons, snapping, and expression
+ * parsing.
+ */
+export function transformConfigUiMathjsToLocalFraction(content, sourcePath) {
+    if (!shouldTransformConfigUiMathjsSource(sourcePath)) {
+        return content;
+    }
+    let transformed = content.replace(/math\.number\(\s*math\.fraction\(([^()]+?)\)\s*\)/g, 'fractionToNumber($1)');
+    if (transformed === content) {
+        return content;
+    }
+    if (!/\bmath\./.test(transformed)) {
+        transformed = transformed.replace(/import\s+\*\s+as\s+math\s+from\s+(['"])mathjs\1;?/, "import { fractionToNumber } from './fraction-to-number.js';");
+    }
+    else if (!transformed.includes("from './fraction-to-number.js'")) {
+        transformed = transformed.replace(/import\s+\*\s+as\s+math\s+from\s+(['"])mathjs\1;?/, (match) => `${match}\nimport { fractionToNumber } from './fraction-to-number.js';`);
+    }
     return transformed;
 }
 /**
- * Transform package.json dependencies from lodash to lodash-es
+ * Compatibility wrapper retained for older callers. Lodash imports now target
+ * the vendored shared package rather than lodash-es deep modules.
+ */
+export function transformLodashEsDeepImportsToFullySpecified(content) {
+    return transformLodashToVendoredLodash(content);
+}
+/**
+ * Ensure known strict-ESM deep imports include explicit file extensions.
+ *
+ * Webpack's fully-specified ESM resolution requires `.js` on deep imports like:
+ * - react-konva/lib/ReactKonvaCore -> react-konva/lib/ReactKonvaCore.js
+ */
+export function transformKnownDeepImportsToFullySpecified(content) {
+    return rewriteModuleSpecifiers(content, (specifier) => specifier === 'react-konva/lib/ReactKonvaCore' ? 'react-konva/lib/ReactKonvaCore.js' : undefined);
+}
+/**
+ * Transform package.json dependencies from lodash/lodash-es to the vendored package.
  *
- * Replaces lodash with lodash-es version 4.17.22 (latest ESM version)
- * Also removes @types/lodash as lodash-es includes built-in TypeScript types
+ * The browser/runtime dependency is a workspace package that vendors the small
+ * lodash helper surface needed by synced sources.
  */
 export function transformPackageJsonLodash(packageJson) {
     const transformed = { ...packageJson };
-    // Replace lodash with lodash-es in dependencies
-    if (transformed.dependencies?.lodash) {
-        transformed.dependencies['lodash-es'] = '^4.17.22';
+    if (transformed.dependencies?.lodash || transformed.dependencies?.['lodash-es']) {
+        transformed.dependencies[VENDORED_LODASH_PACKAGE] = 'workspace:*';
         delete transformed.dependencies.lodash;
+        delete transformed.dependencies['lodash-es'];
     }
-    // Replace lodash with lodash-es in devDependencies
-    if (transformed.devDependencies?.lodash) {
-        transformed.devDependencies['lodash-es'] = '^4.17.22';
+    if (transformed.devDependencies?.lodash || transformed.devDependencies?.['lodash-es']) {
+        transformed.devDependencies[VENDORED_LODASH_PACKAGE] = 'workspace:*';
         delete transformed.devDependencies.lodash;
+        delete transformed.devDependencies['lodash-es'];
     }
     // Remove @types/lodash if present (lodash-es has built-in types)
     if (transformed.dependencies?.['@types/lodash']) {
@@ -261,14 +562,74 @@ export function transformPackageJsonLodash(packageJson) {
  */
 export function transformPackageJsonRecharts(packageJson) {
     const transformed = { ...packageJson };
-    // Upgrade recharts to 3.x in dependencies
+    // Keep recharts on the current ESM-capable major.
     if (transformed.dependencies?.recharts) {
-        // Only upgrade if it's 2.x
-        const version = transformed.dependencies.recharts;
-        if (version.includes('2.')) {
-            transformed.dependencies.recharts = '^3.7.0';
+        transformed.dependencies.recharts = '^3.8.1';
+    }
+    return transformed;
+}
+/**
+ * Apply browser-ESM dependency replacements and upgrades for synced packages.
+ *
+ * This is intentionally dependency policy, not build-output patching: upstream
+ * sync rewrites package manifests toward packages that can participate in the
+ * browser ESM graph directly.
+ */
+export function transformPackageJsonBrowserEsmDependencies(packageJson, options = {}) {
+    const transformed = { ...packageJson };
+    const deps = transformed.dependencies;
+    if (!deps) {
+        return transformed;
+    }
+    if (deps.classnames) {
+        deps.clsx = '^2.1.1';
+        delete deps.classnames;
+    }
+    if (options.removeReactInputAutosize) {
+        delete deps['react-input-autosize'];
+    }
+    if (options.removeMathjs) {
+        delete deps.mathjs;
+    }
+    // Ranges forced onto synced packages after the copy.
+    //
+    // Only pin a dependency here when this repo has a reason upstream does not
+    // share, and state that reason. A pin silently overrides whatever upstream
+    // declares, so a pin that has outlived its reason quietly undoes upstream's
+    // decisions on every sync.
+    //
+    // mathjs is pinned to satisfy two constraints that pull in opposite
+    // directions:
+    //   - This repo needs an `exports` map. mathjs 7.x (upstream's range) has
+    //     none, so it resolves to its CJS `main` and reintroduces the runtime
+    //     require leaks that "fix: stabilize browser ESM packaging" (481671b0)
+    //     removed from the browser ESM bundles.
+    //   - Upstream needs fraction.js 4. mathjs >= 14 depends on fraction.js ^5,
+    //     which uses BigInt and breaks number-line bundling (PIE-926, PIE-1005).
+    // mathjs 13.2.3 is the newest release that has an `exports` map AND still
+    // depends on fraction.js ^4.3.7, so it satisfies both. Do not raise this to
+    // 14+ without resolving the BigInt problem first.
+    //
+    // react-draggable is deliberately NOT pinned: upstream moved the synced
+    // packages to ^4.7.1 and fixed the v4 drag regressions against that exact
+    // version, so a pin here would downgrade away from the code those fixes were
+    // written for.
+    const versionPins = {
+        '@types/react': '^18.2.0',
+        '@types/react-dom': '^18.2.0',
+        clsx: '^2.1.1',
+        mathjs: '^13.2.3',
+        'react-is': '^18.3.1',
+        'react-redux': '^9.3.0',
+        redux: '^5.0.1',
+    };
+    for (const [name, version] of Object.entries(versionPins)) {
+        if (deps[name]) {
+            deps[name] = version;
         }
     }
+    delete deps.react;
+    delete deps['react-dom'];
     return transformed;
 }
 /**
@@ -279,12 +640,15 @@ export function transformPackageJsonRecharts(packageJson) {
  * - @pie-framework/pie-configure-events → @pie-element/shared-configure-events
  */
 export function transformPieFrameworkEventImports(content) {
-    let transformed = content;
-    // Transform pie-player-events imports
-    transformed = transformed.replace(/from\s+['"]@pie-framework\/pie-player-events['"]/g, "from '@pie-element/shared-player-events'");
-    // Transform pie-configure-events imports
-    transformed = transformed.replace(/from\s+['"]@pie-framework\/pie-configure-events['"]/g, "from '@pie-element/shared-configure-events'");
-    return transformed;
+    return rewriteModuleSpecifiers(content, (specifier) => {
+        if (specifier === '@pie-framework/pie-player-events') {
+            return '@pie-element/shared-player-events';
+        }
+        if (specifier === '@pie-framework/pie-configure-events') {
+            return '@pie-element/shared-configure-events';
+        }
+        return undefined;
+    });
 }
 /**
  * Transform @pie-lib/controller-utils imports to internal @pie-element/shared-controller-utils
@@ -296,7 +660,7 @@ export function transformPieFrameworkEventImports(content) {
  * and no lodash/debug dependencies.
  */
 export function transformControllerUtilsImports(content) {
-    return content.replace(/from\s+['"]@pie-lib\/controller-utils['"]/g, "from '@pie-element/shared-controller-utils'");
+    return rewriteModuleSpecifiers(content, (specifier) => specifier === '@pie-lib/controller-utils' ? '@pie-element/shared-controller-utils' : undefined);
 }
 /**
  * Transform @pie-lib shared package imports to internal @pie-element/shared-* packages
@@ -307,24 +671,29 @@ export function transformControllerUtilsImports(content) {
  * These packages have been moved to shared/ for better version control and consistency.
  */
 export function transformSharedPackageImports(content) {
-    let transformed = content;
-    // Transform math-rendering
-    transformed = transformed.replace(/from\s+['"]@pie-lib\/math-rendering['"]/g, "from '@pie-element/shared-math-rendering-mathjax'");
-    // Transform feedback
-    transformed = transformed.replace(/from\s+['"]@pie-lib\/feedback['"]/g, "from '@pie-element/shared-feedback'");
-    return transformed;
+    return rewriteModuleSpecifiers(content, (specifier) => {
+        if (specifier === '@pie-lib/math-rendering') {
+            return '@pie-element/shared-math-rendering-mathjax';
+        }
+        if (specifier === '@pie-lib/feedback') {
+            return '@pie-element/shared-feedback';
+        }
+        return undefined;
+    });
 }
 /**
- * Transform @pie-framework/mathquill imports to internal @pie-element/shared-mathquill
+ * Rewrite legacy configure subpath imports to author entrypoints.
  *
- * Handles:
- * - @pie-framework/mathquill → @pie-element/shared-mathquill
+ * Upstream sometimes imports configure elements via:
+ * - @pie-element/<element-name>/configure/lib
  *
- * Our internal mathquill package is a fork from the PIE org with matrix support,
- * accessibility features, and modernized ESM code.
+ * In this repo, configure code is synced into `src/author` and packages expose that via
+ * the `./author` export. Rewriting to `/author` preserves author-vs-delivery boundaries.
  */
-export function transformMathquillImports(content) {
-    return content.replace(/from\s+['"]@pie-framework\/mathquill['"]/g, "from '@pie-element/shared-mathquill'");
+export function transformLegacyConfigureLibImports(content) {
+    return rewriteModuleSpecifiers(content, (specifier) => /^@pie-element\/[^/]+\/configure\/lib$/.test(specifier)
+        ? specifier.replace(/\/configure\/lib$/, '/author')
+        : undefined);
 }
 /**
  * Transform package.json dependencies for PIE Framework event packages
@@ -396,24 +765,6 @@ export function transformPackageJsonSharedPackages(packageJson) {
     }
     return transformed;
 }
-/**
- * Transform package.json dependencies for @pie-framework/mathquill
- *
- * Replaces @pie-framework/mathquill with internal @pie-element/shared-mathquill
- */
-export function transformPackageJsonMathquill(packageJson) {
-    const transformed = { ...packageJson };
-    // Replace @pie-framework/mathquill with internal package
-    if (transformed.dependencies?.['@pie-framework/mathquill']) {
-        transformed.dependencies['@pie-element/shared-mathquill'] = 'workspace:*';
-        delete transformed.dependencies['@pie-framework/mathquill'];
-    }
-    if (transformed.devDependencies?.['@pie-framework/mathquill']) {
-        transformed.devDependencies['@pie-element/shared-mathquill'] = 'workspace:*';
-        delete transformed.devDependencies['@pie-framework/mathquill'];
-    }
-    return transformed;
-}
 /**
  * Transform direct property assignment patterns to use assignProps utility
  *
@@ -502,50 +853,22 @@ export function transformConfigureUtilsImports(content, relativePath) {
     if (!configureRootFilePattern.test(relativePath)) {
         return content;
     }
-    // Transform '../utils' to './utils' (only exact match, not '../utils/something')
-    let transformed = content;
-    transformed = transformed.replace(/from\s+['"]\.\.\/utils['"]/g, "from './utils'");
-    return transformed;
+    // Transform '../utils' to './utils.js' (only exact match, not '../utils/something')
+    // Keep explicit runtime extension for Node ESM consistency.
+    return rewriteModuleSpecifiers(content, (specifier) => specifier === '../utils' ? './utils.js' : undefined);
 }
 /**
- * Transform SSR-unsafe require() calls to standard ESM imports
- *
- * Upstream pie-lib code uses this pattern for SSR compatibility with MathQuill:
- *
- * ```js
- * // - mathquill error window not defined
- * let EditableHtml;
- * let StyledEditableHTML;
- * if (typeof window !== 'undefined') {
- *   EditableHtml = require('@pie-lib/editable-html-tip-tap')['default'];
- *   StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
- *     fontFamily: theme.typography.fontFamily,
- *   }));
- * }
- * ```
- *
- * This doesn't work in browser ESM (require is not defined). Transform to:
+ * Transform legacy SSR-gated `require()` for pie-lib editors into static ESM imports.
  *
- * ```tsx
- * import EditableHtmlImport from '@pie-lib/editable-html-tip-tap';
- *
- * const EditableHtml = EditableHtmlImport;
- * const StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
- *   fontFamily: theme.typography.fontFamily,
- * }));
- * ```
- *
- * We use direct imports instead of React.lazy because:
- * - Simpler code (no Suspense wrapper needed)
- * - No loading flicker
- * - Modern bundlers handle ESM imports correctly for SSR
- * - The component is always needed (no code-splitting benefit)
+ * Older upstream pie-lib used `typeof window` + `require()` so heavy editor code did not
+ * run under SSR. That breaks in browser ESM where `require` is undefined. When this pattern
+ * is still present in synced sources, rewrite it to a normal default import plus styled()
+ * wrapper. If upstream has already moved to ESM imports, this is a no-op.
  */
-export function transformSsrRequireToReactLazy(content) {
+export function transformSsrRequireToEsmImport(content) {
     let transformed = content;
     // Pattern 1: SSR check with require() for editable-html-tip-tap with styled wrapper
     // Matches:
-    //   // - mathquill error window not defined
     //   let EditableHtml;
     //   let StyledEditableHTML;
     //   if (typeof window !== 'undefined') {
@@ -558,7 +881,6 @@ export function transformSsrRequireToReactLazy(content) {
     const match = transformed.match(ssrRequirePattern);
     if (match) {
         const [fullMatch, componentVar, styledVar, importPath, styleParams] = match;
-        // Generate direct import replacement (better than React.lazy - simpler, no Suspense needed)
         const importVarName = `${componentVar}Import`;
         const replacement = `import ${importVarName} from '${importPath}';
 
@@ -578,7 +900,6 @@ const ${styledVar} = styled(${componentVar})(${styleParams});`;
     if (simpleMatch && !match) {
         // Only apply if we didn't already match the styled pattern
         const [fullMatch, componentVar, importPath] = simpleMatch;
-        // Generate direct import replacement (better than React.lazy - simpler, no Suspense needed)
         const importVarName = `${componentVar}Import`;
         const replacement = `import ${importVarName} from '${importPath}';
 
@@ -607,12 +928,11 @@ export function fixStyledComponentTypes(content) {
     // Match any identifier, not just those starting with "Styled"
     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(':');
@@ -647,53 +967,27 @@ export function fixStyledComponentTypes(content) {
  * @returns Transformed content with relative imports
  */
 export function transformSelfReferentialImports(content, packageName, sourceFilePath) {
-    let transformed = content;
     // Extract element name from package name (@pie-element/fraction-model → fraction-model)
     const elementName = packageName.replace('@pie-element/', '');
-    // Pattern: import { X } from '@pie-element/element-name' or import X from '@pie-element/element-name'
-    const selfImportPattern = new RegExp(`import\\s+(?:\\{\\s*([^}]+)\\s*\\}|([\\w]+))\\s+from\\s+['"]@pie-element/${elementName}['"]`, 'g');
-    const matches = Array.from(transformed.matchAll(selfImportPattern));
-    for (const match of matches) {
-        const [fullMatch, namedImports, defaultImport] = match;
-        // Determine source directory (configure/src → author, src → delivery)
-        let targetPath = '';
-        if (sourceFilePath.startsWith('configure/src/')) {
-            // Configure files reference delivery components
-            // configure/src/main.jsx → author/main.tsx
-            // Relative path from author/ to delivery/
-            targetPath = '../delivery';
-        }
-        else if (sourceFilePath.startsWith('src/')) {
-            // Main src files shouldn't self-reference, but handle it anyway
-            targetPath = '.';
-        }
-        else {
-            // Unknown structure, skip
-            continue;
-        }
-        // Strategy: Self-referential imports typically come from the package's main
-        // index file which re-exports from various locations. Rather than trying to
-        // guess individual file locations (which often fails for namespace exports
-        // and re-exports), we keep the import pointing to the index (delivery folder)
-        // which handles all re-exports correctly.
-        //
-        // Examples:
-        // - import { NumberLineComponent, dataConverter, tickUtils } from '@pie-element/number-line'
-        //   → import { NumberLineComponent, dataConverter, tickUtils } from '../delivery'
-        // - import FractionModel from '@pie-element/fraction-model'
-        //   → import FractionModel from '../delivery'
-        if (namedImports) {
-            // Named imports - keep them as a single import from the index
-            const replacement = `import { ${namedImports} } from '${targetPath}'`;
-            transformed = transformed.replace(fullMatch, replacement);
-        }
-        else if (defaultImport) {
-            // Default import - reference main index
-            const replacement = `import ${defaultImport} from '${targetPath}'`;
-            transformed = transformed.replace(fullMatch, replacement);
-        }
+    let targetPath = null;
+    if (sourceFilePath.startsWith('configure/src/')) {
+        // Configure files reference delivery components
+        // configure/src/main.jsx → author/main.tsx
+        // Relative path from author/ to delivery/
+        targetPath = '../delivery';
     }
-    return transformed;
+    else if (sourceFilePath.startsWith('src/')) {
+        // Main src files shouldn't self-reference, but handle it anyway
+        targetPath = '.';
+    }
+    if (!targetPath) {
+        return content;
+    }
+    // Strategy: Self-referential imports typically come from the package's main
+    // index file which re-exports from various locations. Rather than trying to
+    // guess individual file locations (which often fails for namespace exports
+    // and re-exports), we keep the import pointing to the index.
+    return rewriteModuleSpecifiers(content, (specifier) => specifier === `@pie-element/${elementName}` ? `${targetPath}/index.js` : undefined);
 }
 /**
  * Fix type inference errors for exported functions with complex return types
@@ -706,14 +1000,14 @@ export function transformSelfReferentialImports(content, packageName, sourceFile
 export function fixExportedFunctionTypes(content, sourcePath) {
     let transformed = content;
     // Only apply to specific files that are known to have issues
-    if (sourcePath?.includes('charting') && sourcePath.includes('utils')) {
+    if (sourcePathMatchesPreset(sourcePath, PRESET_IDS.transformChartingUtilsTypeFix)) {
         // Fix: export const dataToXBand = (...) => { ... }
         // Pattern: export const functionName = (params) => {
         transformed = transformed.replace(/export const dataToXBand = \(/g, 'export const dataToXBand: any = (');
     }
     // Fix translator package default export type inference issue
     // The spread operator `...i18next` causes TypeScript to require a reference to i18next types
-    if (sourcePath?.includes('translator') && sourcePath?.includes('/src/index')) {
+    if (sourcePathMatchesPreset(sourcePath, PRESET_IDS.transformTranslatorIndexTypeFix)) {
         // Add type imports
         if (!transformed.includes('type i18n')) {
             transformed = transformed.replace(/import i18next from 'i18next';/, "import i18next, { type i18n, type TOptions } from 'i18next';");
@@ -756,21 +1050,40 @@ const translatorModule: TranslatorModule = `;
  * @returns Transformed content with Menu imports replaced
  */
 export function transformMenuToInlineMenu(content) {
-    let transformed = content;
-    // Pattern 1: import Menu from '@mui/material/Menu'
-    // → import { InlineMenu as Menu } from '@pie-lib/render-ui'
-    if (/import\s+Menu\s+from\s+['"]@mui\/material\/Menu['"]/.test(transformed)) {
-        transformed = transformed.replace(/import\s+Menu\s+from\s+['"]@mui\/material\/Menu['"]/g, "import { InlineMenu as Menu } from '@pie-lib/render-ui'");
-    }
-    // Pattern 2: import Menu, { MenuProps } from '@mui/material/Menu'
-    // → import { InlineMenu as Menu } from '@pie-lib/render-ui'
-    //   import type { MenuProps } from '@mui/material/Menu'
-    const namedImportMatch = transformed.match(/import\s+Menu\s*,\s*\{([^}]+)\}\s+from\s+['"]@mui\/material\/Menu['"]/);
-    if (namedImportMatch) {
-        const namedImports = namedImportMatch[1];
-        transformed = transformed.replace(/import\s+Menu\s*,\s*\{([^}]+)\}\s+from\s+['"]@mui\/material\/Menu['"]/, `import { InlineMenu as Menu } from '@pie-lib/render-ui';\nimport type {${namedImports}} from '@mui/material/Menu'`);
+    const sourceFile = ts.createSourceFile('source.tsx', content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const edits = [];
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node) &&
+            ts.isStringLiteral(node.moduleSpecifier) &&
+            node.moduleSpecifier.text === '@mui/material/Menu') {
+            const defaultName = node.importClause?.name?.text;
+            if (!defaultName) {
+                return;
+            }
+            const namedImports = menuNamedImportsText(node, sourceFile);
+            const replacement = [
+                `import { InlineMenu as ${defaultName} } from '@pie-lib/render-ui';`,
+                namedImports ? `import type { ${namedImports} } from '@mui/material/Menu';` : null,
+            ]
+                .filter((line) => !!line)
+                .join('\n');
+            edits.push({
+                start: node.getStart(sourceFile),
+                end: node.getEnd(),
+                text: replacement,
+            });
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return applySourceEdits(content, edits);
+}
+function menuNamedImportsText(node, sourceFile) {
+    const namedBindings = node.importClause?.namedBindings;
+    if (!namedBindings || !ts.isNamedImports(namedBindings)) {
+        return null;
     }
-    return transformed;
+    return namedBindings.elements.map((element) => element.getText(sourceFile)).join(', ');
 }
 /**
  * Add InlineMenu export to render-ui index file
@@ -789,7 +1102,7 @@ export function transformMenuToInlineMenu(content) {
 export function addInlineMenuExport(content, sourcePath) {
     // Only apply to render-ui root index file (not subdirectories like collapsible/index.tsx)
     // sourcePath format: pie-lib/packages/render-ui/src/index.js
-    if (!sourcePath?.includes('render-ui/src/index.js')) {
+    if (!sourcePathMatchesPreset(sourcePath, PRESET_IDS.transformRenderUiInlineMenuExport)) {
         return content;
     }
     // Check if InlineMenu export already exists
@@ -801,16 +1114,176 @@ export function addInlineMenuExport(content, sourcePath) {
     return content.trimEnd() + exportStatement;
 }
 /**
- * Transform MathQuill.getInterface(2) to getInterface(3)
+ * Transform React component imports that may resolve as module objects in IIFE builds.
  *
- * Interface version 2 requires jQuery, but pie-elements-ng uses interface version 3
- * which has a jQuery-free API. This transform updates calls to use version 3.
+ * Some libraries export React components as objects (e.g. forwardRef) or wrapped modules,
+ * which can trigger React invariant #130 in certain bundled interop paths.
  *
- * @param content - Source code content
- * @returns Transformed content with getInterface(3) instead of getInterface(2)
+ * This transform rewrites known-risk imports to pass through a small runtime unwrap helper:
+ * - `@mdi/react` default import
+ * - `react-konva` named imports
  */
-export function transformMathQuillInterface(content) {
-    // Replace MathQuill.getInterface(2) with MathQuill.getInterface(3)
-    return content.replace(/MathQuill\.getInterface\(2\)/g, 'MathQuill.getInterface(3)');
+export function transformReactInteropComponentImports(content) {
+    let transformed = content;
+    let touched = false;
+    // Handle default import from @mdi/react:
+    // import Icon from '@mdi/react'
+    // ->
+    // import IconImport from '@mdi/react'
+    // const Icon = unwrapReactInteropSymbol(IconImport, 'Icon');
+    transformed = transformed.replace(/^import\s+([A-Za-z_$][\w$]*)\s+from\s+['"]@mdi\/react['"];?\s*$/m, (match, localName) => {
+        if (localName.endsWith('Import')) {
+            return match;
+        }
+        touched = true;
+        return `import ${localName}Import from '@mdi/react';`;
+    });
+    const mdiMatch = transformed.match(/^import\s+([A-Za-z_$][\w$]*)Import\s+from\s+['"]@mdi\/react['"];?\s*$/m);
+    if (mdiMatch) {
+        const localName = mdiMatch[1];
+        const declaration = `const ${localName} = unwrapReactInteropSymbol(${localName}Import, '${localName}');`;
+        if (!transformed.includes(declaration)) {
+            touched = true;
+            transformed = transformed.replace(mdiMatch[0], `${mdiMatch[0]}\n${declaration}`);
+        }
+    }
+    // Handle named imports from react-konva:
+    // import { Stage, Layer } from 'react-konva'
+    // ->
+    // import { Stage as StageImport, Layer as LayerImport } from 'react-konva'
+    // const Stage = unwrapReactInteropSymbol(StageImport, 'Stage');
+    // const Layer = unwrapReactInteropSymbol(LayerImport, 'Layer');
+    const konvaImportRegex = /^import\s+\{([^}]+)\}\s+from\s+['"]react-konva['"];?\s*$/m;
+    const konvaMatch = transformed.match(konvaImportRegex);
+    if (konvaMatch) {
+        const rawSpec = konvaMatch[1]
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        const parsed = rawSpec
+            .map((entry) => {
+            const aliasMatch = entry.match(/^([A-Za-z_$][\w$]*)\s+as\s+([A-Za-z_$][\w$]*)$/);
+            if (aliasMatch) {
+                return { exported: aliasMatch[1], local: aliasMatch[2] };
+            }
+            const singleMatch = entry.match(/^([A-Za-z_$][\w$]*)$/);
+            if (singleMatch) {
+                return { exported: singleMatch[1], local: singleMatch[1] };
+            }
+            return null;
+        })
+            .filter((v) => !!v);
+        if (parsed.length) {
+            const rewrittenSpecs = parsed.map(({ exported, local }) => `${exported} as ${local}Import`);
+            const declarations = parsed.map(({ exported, local }) => `const ${local} = unwrapReactInteropSymbol(${local}Import, '${exported}');`);
+            transformed = transformed.replace(konvaImportRegex, `import { ${rewrittenSpecs.join(', ')} } from 'react-konva';`);
+            for (const declaration of declarations) {
+                if (!transformed.includes(declaration)) {
+                    transformed = transformed.replace(/^import\s+\{[^}]+\}\s+from\s+['"]react-konva['"];?\s*$/m, (line) => `${line}\n${declaration}`);
+                }
+            }
+            touched = true;
+        }
+    }
+    // Handle mixed named imports from @pie-lib/render-ui where React components
+    // may resolve through nested/default interop in IIFE bundles.
+    // Example:
+    // import { Collapsible, color, PreviewPrompt } from '@pie-lib/render-ui'
+    // ->
+    // import { Collapsible as CollapsibleImport, color, PreviewPrompt as PreviewPromptImport } from '@pie-lib/render-ui';
+    // const Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible');
+    // const PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt');
+    const renderUiImportRegex = /^import\s+\{([^}]+)\}\s+from\s+['"]@pie-lib\/render-ui['"];?\s*$/m;
+    const renderUiMatch = transformed.match(renderUiImportRegex);
+    if (renderUiMatch) {
+        const rawSpec = renderUiMatch[1]
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        const parsed = rawSpec
+            .map((entry) => {
+            const aliasMatch = entry.match(/^([A-Za-z_$][\w$]*)\s+as\s+([A-Za-z_$][\w$]*)$/);
+            if (aliasMatch) {
+                return { exported: aliasMatch[1], local: aliasMatch[2] };
+            }
+            const singleMatch = entry.match(/^([A-Za-z_$][\w$]*)$/);
+            if (singleMatch) {
+                return { exported: singleMatch[1], local: singleMatch[1] };
+            }
+            return null;
+        })
+            .filter((v) => !!v);
+        // Heuristic: only wrap React component-like imports (PascalCase symbols).
+        const componentLike = parsed.filter(({ exported, local }) => /^[A-Z]/.test(exported) && /^[A-Z]/.test(local) && !local.endsWith('Import'));
+        if (componentLike.length) {
+            const rewrittenSpecs = parsed.map(({ exported, local }) => {
+                const shouldWrap = componentLike.some((entry) => entry.exported === exported && entry.local === local);
+                return shouldWrap
+                    ? `${exported} as ${local}Import`
+                    : exported === local
+                        ? local
+                        : `${exported} as ${local}`;
+            });
+            const declarations = componentLike.map(({ exported, local }) => `const ${local} = unwrapReactInteropSymbol(${local}Import, '${exported}');`);
+            transformed = transformed.replace(renderUiImportRegex, `import { ${rewrittenSpecs.join(', ')} } from '@pie-lib/render-ui';`);
+            // Add a namespace import so wrapped component imports can fall back to module members
+            // when named import interop resolves unexpectedly in IIFE bundles.
+            if (!/^import\s+\*\s+as\s+RenderUiNamespace\s+from\s+['"]@pie-lib\/render-ui['"];?\s*$/m.test(transformed)) {
+                transformed = transformed.replace(/^import\s+\{[^}]+\}\s+from\s+['"]@pie-lib\/render-ui['"];?\s*$/m, (line) => `${line}\nimport * as RenderUiNamespace from '@pie-lib/render-ui';`);
+            }
+            const renderUiInteropPrelude = `const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;`;
+            if (!transformed.includes('const renderUiNamespaceAny = RenderUiNamespace as any;')) {
+                transformed = transformed.replace(/^import\s+\*\s+as\s+RenderUiNamespace\s+from\s+['"]@pie-lib\/render-ui['"];?\s*$/m, (line) => `${line}\n${renderUiInteropPrelude}`);
+            }
+            for (const declaration of declarations) {
+                const withFallback = declaration.replace(/unwrapReactInteropSymbol\((\w+)Import, '(\w+)'\);$/, "unwrapReactInteropSymbol($1Import, '$2') || unwrapReactInteropSymbol(renderUi.$2, '$2');");
+                if (!transformed.includes(declaration) && !transformed.includes(withFallback)) {
+                    transformed = transformed.replace(/^import\s+\{[^}]+\}\s+from\s+['"]@pie-lib\/render-ui['"];?\s*$/m, (line) => `${line}\n${withFallback}`);
+                }
+            }
+            touched = true;
+        }
+    }
+    if (!touched) {
+        return transformed;
+    }
+    if (!transformed.includes('function isRenderableReactInteropType(')) {
+        const helperBlock = `function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+`;
+        // Capture top-of-file import blocks, including multiline imports.
+        const importBlockMatch = transformed.match(/^(?:(?:\s*\/\/[^\n]*\n|\s*\/\*[\s\S]*?\*\/\s*\n|\s*\n)*)((?:import[\s\S]*?;\s*\n)+)/);
+        if (importBlockMatch) {
+            const insertAt = importBlockMatch[0].length;
+            transformed =
+                transformed.slice(0, insertAt) + '\n' + helperBlock + transformed.slice(insertAt);
+        }
+        else {
+            transformed = `${helperBlock}\n${transformed}`;
+        }
+    }
+    return transformed;
 }
 //# sourceMappingURL=sync-imports.js.map