unframer 2.27.2 → 3.0.0

package/dist/exporter.js

@@ -4,19 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundle = bundle;
+exports.resolvePackageVersion = resolvePackageVersion;
 exports.resolvePackage = resolvePackage;
-exports.checkUnframerVersion = checkUnframerVersion;
 exports.getDarkModeSelector = getDarkModeSelector;
 exports.getStyleTokensCss = getStyleTokensCss;
 exports.findRelativeLinks = findRelativeLinks;
 exports.extractPropControlsUnsafe = extractPropControlsUnsafe;
-exports.propControlsToType = propControlsToType;
+exports.propControlsToTypedocComments = propControlsToTypedocComments;
 exports.parsePropertyControls = parsePropertyControls;
 exports.extractTokenInfo = extractTokenInfo;
 exports.componentCamelCase = componentCamelCase;
+exports.indentWithTabs = indentWithTabs;
 exports.createExampleComponentCode = createExampleComponentCode;
+exports.isVersionGreater = isVersionGreater;
 const esbuild_1 = require("esbuild");
-const package_json_1 = __importDefault(require("../package.json"));
 const url_1 = __importDefault(require("url"));
 const async_sema_1 = require("async-sema");
 const esbuild_plugins_node_modules_polyfill_1 = require("esbuild-plugins-node-modules-polyfill");
@@ -27,12 +28,15 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const utils_js_1 = require("./utils.js");
 const babel_jsx_js_1 = require("./babel-jsx.js");
+const babel_typedoc_js_1 = require("./babel-typedoc.js");
 const compat_js_1 = require("./compat.js");
 const css_js_1 = require("./css.js");
 const esbuild_2 = require("./esbuild");
 const framer_js_1 = require("./framer.js");
 const sentry_1 = require("./sentry");
 const utils_js_2 = require("./utils.js");
+const package_manager_js_1 = require("./package-manager.js");
+const version_js_1 = require("./version.js");
 const js_api_1 = require("@biomejs/js-api");
 let biome;
 async function bundle({ config, cwd: out = '', watch = false, signal = undefined, }) {
@@ -43,6 +47,24 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
         await fs_1.default.promises.mkdir(out, { recursive: true });
     }
     catch (e) { }
+    // Prefix for temporary .js files to avoid HMR issues
+    const tempJsPrefix = 'temp_';
+    // Helper function to handle file path transformations with temp prefix
+    function getFilePaths(filePath, outDir) {
+        const baseName = path_1.default.basename(filePath);
+        const dirName = path_1.default.dirname(filePath);
+        const tempFileName = tempJsPrefix + baseName;
+        const tempFilePath = path_1.default.join(dirName, tempFileName);
+        return {
+            originalPath: filePath,
+            tempJsPath: path_1.default.resolve(outDir, tempFilePath),
+            finalJsPath: path_1.default.resolve(outDir, filePath),
+            jsxPath: path_1.default.resolve(outDir, filePath.replace(/\.js$/, '.jsx')),
+            tempFilePath,
+            baseName,
+            dirName,
+        };
+    }
     utils_js_2.spinner.start('exporting components...');
     const otherRoutes = Object.fromEntries((config.framerWebPages || []).map((page) => [
         page.webPageId,
@@ -59,7 +81,7 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
         };
     }
     const fn = watch ? esbuild_1.context : fakeContext;
-    let foundError = false;
+    const missingPackages = new Set();
     const buildContext = await fn({
         absWorkingDir: out,
         entryPoints: Object.keys(components)
@@ -88,9 +110,12 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                 signal,
                 externalPackages: config.externalPackages,
                 externalizeNpm: config.allExternal,
-                outDir: config.outDir,
+                outDir: out,
                 onMissingPackage: (e) => {
-                    foundError = true;
+                    // No longer needed - packages are auto-installed
+                },
+                onCollectMissingPackage: (pkg) => {
+                    missingPackages.add(pkg);
                 },
             }),
             (0, esbuild_plugins_node_modules_polyfill_1.nodeModulesPolyfillPlugin)({}),
@@ -105,6 +130,13 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                     });
                     build.onLoad({ filter: /.*/, namespace: 'virtual' }, async (args) => {
                         const name = args.path;
+                        // Handle virtual routes module
+                        if (name === '__routes') {
+                            return {
+                                contents: `export const routes = ${JSON.stringify(otherRoutes, null, 2)};`,
+                                loader: 'js',
+                            };
+                        }
                         const url = components[name];
                         const componentBreakpoints = config.componentBreakpoints?.filter((x) => x.componentName === name) || [];
                         const brk = breakpointSizes
@@ -126,6 +158,8 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                                 ...brk.slice(1),
                             ])
                             : {};
+                        // Use virtual routes module
+                        const routesImportPath = 'virtual:__routes';
                         return {
                             contents: /** js **/ `
                                 'use client'
@@ -136,30 +170,31 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                                 signal,
                             })}'
                                 import { WithFramerBreakpoints } from 'unframer'
+                                import { routes } from '${routesImportPath}'
                                 const locales = ${JSON.stringify(config.locales) || '[]'}
                                 const defaultResponsiveVariants = ${JSON.stringify(responsiveVariants, null, 2)}
 
-                                Component.Responsive = ({ locale, ...rest }) => {
+
+                                function ComponentWithRoot({ locale, ...rest }) {
                                     return (
                                         <ContextProviders
-                                            routes={${JSON.stringify(otherRoutes)}}
-                                            children={<WithFramerBreakpoints
-                                                        Component={Component}
-                                                        variants={defaultResponsiveVariants}
-                                                        {...rest}
-                                                    />}
+                                            routes={routes}
+                                            children={<Component {...rest} />}
                                             framerSiteId={${JSON.stringify(config.fullFramerProjectId)}}
                                             locale={locale}
                                             locales={locales}
                                         />
                                     )
                                 }
-
-                                export default function ComponentWithRoot({ locale, ...rest }) {
+                                ComponentWithRoot.Responsive = ({ locale, ...rest }) => {
                                     return (
                                         <ContextProviders
-                                            routes={${JSON.stringify(otherRoutes, null, 2)}}
-                                            children={<Component {...rest} />}
+                                            routes={routes}
+                                            children={<WithFramerBreakpoints
+                                                        Component={Component}
+                                                        variants={defaultResponsiveVariants}
+                                                        {...rest}
+                                                    />}
                                             framerSiteId={${JSON.stringify(config.fullFramerProjectId)}}
                                             locale={locale}
                                             locales={locales}
@@ -167,6 +202,7 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                                     )
                                 }
                                 Object.assign(ComponentWithRoot, Component)
+                                export default ComponentWithRoot
                                 `,
                             loader: 'jsx',
                         };
@@ -179,10 +215,27 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
     });
     const doNotEditComment = `/* This file was generated by Unframer for Framer project ${config.projectId || ''} "${config.projectName}", do not edit manually */\n`;
     async function rebuild() {
+        // Clear missing packages for each rebuild (important for watch mode)
+        missingPackages.clear();
+        try {
+            const installedVersion = await resolvePackageVersion({
+                cwd: out,
+                pkg: 'unframer',
+            });
+            if (isVersionGreater(installedVersion || '0.0.0', version_js_1.version || '0.0.0')) {
+                // Version mismatch, add with specific version
+                missingPackages.add(`unframer@${version_js_1.version}`);
+                utils_js_2.spinner.info(`Different unframer version detected (${installedVersion}), will install unframer@${version_js_1.version}`);
+            }
+        }
+        catch (e) {
+            // Unframer not installed, add with specific version
+            missingPackages.add(`unframer@${version_js_1.version}`);
+            utils_js_2.spinner.info(`Missing package detected: unframer@${version_js_1.version}`);
+        }
         const prevFiles = await recursiveReaddir(out);
         const buildResult = await buildContext.rebuild().catch((e) => {
             if (e.message.includes('No matching export ')) {
-                foundError = true;
                 utils_js_2.spinner.error(`esbuild failed to import from an external package, this usually means that the npm package version in Framer is older than the latest.`);
                 utils_js_2.spinner.error(`Use --external to make all npm packagess external, then install the right version`);
                 process.exit(1);
@@ -190,105 +243,31 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
             throw e;
         });
         utils_js_2.spinner.update('Finished build');
-        for (let file of buildResult.outputFiles) {
-            const resultPathAbsJs = path_1.default.resolve(out, file.path);
-            const resultPathAbsJsx = resultPathAbsJs.replace(/\.js$/, '.jsx');
-            const existing = await fs_1.default.promises
-                .readFile(resultPathAbsJsx, 'utf-8')
-                .catch(() => null);
-            const tooBigSize = 0.7 * 1024 * 1024;
-            let formatted = file.text;
-            let tooBig = file.text.length >= tooBigSize;
-            let didFormat = false;
-            if (config.jsx &&
-                !tooBig &&
-                !resultPathAbsJs.includes('/chunks/') &&
-                !resultPathAbsJs.includes('\\chunks\\')) {
-                try {
-                    let res = (0, core_1.transform)(file.text || '', {
-                        babelrc: false,
-                        sourceType: 'module',
-                        plugins: [
-                            // babelPluginDeduplicateImports,
-                            babel_jsx_js_1.babelPluginJsxTransform,
-                            babel_jsx_js_1.removeJsxExpressionContainer,
-                        ],
-                        // ast: true,
-                        // code: false,
-                        filename: 'x.jsx',
-                        compact: false,
-                        sourceMaps: false,
-                    });
-                    if (res?.code) {
-                        if (!biome) {
-                            biome = await js_api_1.Biome.create({
-                                distribution: js_api_1.Distribution.NODE,
-                            });
-                        }
-                        let result = biome.formatContent(res.code, {
-                            filePath: 'example.jsx',
-                        });
-                        didFormat = true;
-                        formatted = result.content;
-                    }
-                }
-                catch (e) {
-                    (0, sentry_1.notifyError)(e, 'babel transform and format');
-                }
+        // Install missing packages if any were collected
+        if (missingPackages.size > 0) {
+            const packagesToInstall = Array.from(missingPackages);
+            utils_js_2.logger.log(`Installing missing packages: ${packagesToInstall.join(', ')}`);
+            const installResult = await (0, package_manager_js_1.installPackagesBatch)({
+                packageNames: packagesToInstall,
+                cwd: out,
+                isDev: false,
+            });
+            if (!installResult.success) {
+                utils_js_2.spinner.error(`Failed to install packages: ${installResult.error}`);
+                // Don't fail the build, just warn
             }
-            // let inputCode = res!.code!
-            // let shouldFormat = !tooBig && !file.path.includes('chunks')
-            // if (shouldFormat) {
-            //     spinner.update(`Formatting ${path.relative(out, file.path)}`)
-            //     formatted = dprint.format('file.jsx', file.text, {
-            //         lineWidth: 140,
-            //         quoteStyle: 'alwaysSingle',
-            //         trailingCommas: 'always',
-            //         semiColons: 'always',
-            //     })
-            // }
-            // if (tooBig) {
-            //     spinner.info(
-            //         `skipping formatting ${path.relative(
-            //             out,
-            //             file.path,
-            //         )}, too big`,
-            //     )
-            // }
-            // if (framerWebPages?.length) {
-            //     codeNew = replaceWebPageIds({
-            //         code: codeNew,
-            //         elements: framerWebPages,
-            //     })
-            // }
-            // const lines = findRelativeLinks(codeNew)
-            // if (lines.length) {
-            //     spinner.error(
-            //         `found broken links for ${path.relative(out, file.path)}`,
-            //     )
-            //     lines.forEach((line) => {
-            //         logger.log(`${path.resolve(out, file.path)}:${line + 1}`)
-            //     })
-            // }
+        }
+        // First, write raw JS files for type extraction with temp prefix
+        for (let file of buildResult.outputFiles) {
+            const paths = getFilePaths(file.path, out);
             const prefix = `// @ts-nocheck\n` + `/* eslint-disable */\n` + doNotEditComment;
-            const codeJsx = prefix + formatted;
             const codeJs = prefix + file.text;
-            // if (existing === codeJsx) {
-            //     continue
-            // }
-            utils_js_2.logger.log(`writing`, path_1.default.relative(out, file.path));
-            await fs_1.default.promises.mkdir(path_1.default.dirname(resultPathAbsJsx), {
+            utils_js_2.logger.log(`writing temp JS`, path_1.default.relative(out, paths.tempFilePath));
+            await fs_1.default.promises.mkdir(path_1.default.dirname(paths.tempJsPath), {
                 recursive: true,
             });
-            if (codeJs !== codeJsx || !didFormat) {
-                await fs_1.default.promises.writeFile(resultPathAbsJs, codeJs, 'utf-8');
-            }
-            if (didFormat) {
-                await fs_1.default.promises.writeFile(resultPathAbsJsx, codeJsx, 'utf-8');
-            }
+            await fs_1.default.promises.writeFile(paths.tempJsPath, codeJs, 'utf-8');
         }
-        utils_js_2.spinner.stop();
-        await fs_1.default.promises.writeFile(path_1.default.resolve(out, '.cursorignore'), `**/*.js\nchunks\n`, 'utf-8');
         if (!buildResult?.outputFiles) {
             throw new Error('Failed to generate result');
         }
@@ -304,7 +283,8 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                 const name = path_1.default
                     .relative(out, file.path)
                     .replace(/\.jsx?$/, '');
-                const resultPathAbs = path_1.default.resolve(out, file.path);
+                const paths = getFilePaths(file.path, out);
+                const resultPathAbs = paths.tempJsPath;
                 if (!components[name]) {
                     return;
                 }
@@ -313,6 +293,7 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                     return;
                 }
                 utils_js_2.logger.log(`extracting types for ${name}`);
+                utils_js_2.spinner.info(`Extracting types for component: ${name}`);
                 utils_js_2.spinner.update(`Extracting types for ${name}`);
                 const { propertyControls, fonts } = await extractPropControlsUnsafe(resultPathAbs, name);
                 if (!propertyControls) {
@@ -322,17 +303,20 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                     ...x,
                     fileName: path_1.default.basename(file.path),
                 })));
-                const types = propControlsToType({
+                const typedocComments = propControlsToTypedocComments({
                     controls: propertyControls,
                     fileName: name,
                     config,
                 });
+                utils_js_2.logger.log(`Generated TypeDoc comments for ${name}: ${!!typedocComments.headerComment}`);
                 await fs_1.default.promises.mkdir(out, { recursive: true });
-                await fs_1.default.promises.writeFile(path_1.default.resolve(out, `${name}.d.ts`), types);
+                // .d.ts generation removed – types are now injected as typedoc
+                // comments directly inside the generated JSX file.
                 return {
                     propertyControls,
                     fonts,
                     name,
+                    typedocComments,
                 };
             }
             finally {
@@ -346,7 +330,6 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                 // Ignore error if file doesn't exist or can't be deleted
             }
         });
-        // spinner.stop()
         const cssString = doNotEditComment +
             '/* This css file has all the necessary styles to run all your components */\n' +
             '\n' +
@@ -364,24 +347,27 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
             .forEach((x) => utils_js_2.logger.log(x));
         const jsxFiles = buildResult.outputFiles
             .filter((x) => x.path.endsWith('.js') &&
-            fs_1.default.existsSync(x.path.replace(/\.js$/, '.jsx')))
-            .map((x) => x.path.replace(/\.js$/, '.jsx'));
+            fs_1.default.existsSync(getFilePaths(x.path, out).jsxPath))
+            .map((x) => getFilePaths(x.path, out).jsxPath);
         const outFiles = buildResult.outputFiles
-            .map((x) => path_1.default.resolve(out, x.path))
+            .map((x) => {
+            const paths = getFilePaths(x.path, out);
+            if (x.path.endsWith('.js') && fs_1.default.existsSync(paths.jsxPath)) {
+                return null; // Will be handled by jsx files
+            }
+            return paths.finalJsPath;
+        })
+            .filter(Boolean)
             .concat([
             path_1.default.resolve(out, 'meta.json'),
             path_1.default.resolve(out, 'tokens.css'),
             path_1.default.resolve(out, '.cursorignore'),
             path_1.default.resolve(out, 'styles.css'),
         ])
-            .concat(jsxFiles)
-            .concat(buildResult.outputFiles.map((x) => path_1.default.resolve(out, x.path.replace(/\.jsx?$/, '.d.ts'))));
+            .concat(jsxFiles);
         const filesToDelete = prevFiles
             .filter((x) => !outFiles.includes(x))
-            .concat(buildResult.outputFiles
-            .map((x) => x.path)
-            .filter((js) => js.endsWith('.js') &&
-            jsxFiles.some((x) => x.startsWith(js))));
+            .filter((x) => !x.includes(tempJsPrefix)); // Don't delete temp files here, they're handled separately
         for (let file of filesToDelete) {
             utils_js_2.logger.log('deleting', path_1.default.relative(out, file));
             try {
@@ -398,12 +384,6 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
         if (watch) {
             utils_js_2.logger.log('waiting for components or config changes');
         }
-        if (!tokens?.length) {
-            const tokensCss = "/* This css file contains your color variables, sometimes these get desynced when updated in Framer so it's good that you copy and paste this snippet into your app css */\n" +
-                '/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
-                getTokensCss({ out, result: buildResult });
-            await fs_1.default.promises.writeFile(path_1.default.resolve(out, 'tokens.css'), tokensCss, 'utf-8');
-        }
         const res = {
             components: Object.entries(components).map(([name, v]) => {
                 const propControls = propControlsData.find((x) => x?.name === name);
@@ -416,6 +396,131 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
                 };
             }),
         };
+        // Process and write JSX files with TypeDoc comments
+        utils_js_2.spinner.update('Processing JSX files with TypeDoc comments');
+        for (let file of buildResult.outputFiles) {
+            const paths = getFilePaths(file.path, out);
+            const componentName = path_1.default
+                .relative(out, file.path)
+                .replace(/\.js$/, '');
+            const propData = propControlsData.find((p) => p?.name === componentName);
+            const typedocComments = propData?.typedocComments;
+            utils_js_2.logger.log(`Processing component: ${componentName}`);
+            utils_js_2.spinner.update(`Processing JSX for ${componentName}`);
+            if (!propData) {
+                utils_js_2.logger.log(`  No propData found for ${componentName}`);
+            }
+            else {
+                utils_js_2.logger.log(`  PropData found for ${componentName}, has propertyControls: ${!!propData.propertyControls}`);
+                if (!typedocComments) {
+                    utils_js_2.logger.log(`  No typedocComments for ${componentName}`);
+                }
+                else {
+                    utils_js_2.logger.log(`  TypeDoc comments available for ${componentName}`);
+                }
+            }
+            const existing = await fs_1.default.promises
+                .readFile(paths.jsxPath, 'utf-8')
+                .catch(() => null);
+            const tooBigSize = 0.7 * 1024 * 1024;
+            let formatted = file.text;
+            let tooBig = file.text.length >= tooBigSize;
+            let didFormat = false;
+            if (config.jsx &&
+                !tooBig &&
+                !paths.tempJsPath.includes('/chunks/') &&
+                !paths.tempJsPath.includes('\\chunks\\')) {
+                try {
+                    const plugins = [
+                        // babelPluginDeduplicateImports,
+                        babel_jsx_js_1.babelPluginJsxTransform,
+                        babel_jsx_js_1.removeJsxExpressionContainer,
+                    ];
+                    // Add TypeDoc plugin if we have comments for this component
+                    if (typedocComments) {
+                        utils_js_2.logger.log(`  Adding TypeDoc plugin for ${componentName}`);
+                        plugins.push((0, babel_typedoc_js_1.babelPluginTypedoc)(typedocComments));
+                    }
+                    else {
+                        utils_js_2.logger.log(`  No TypeDoc comments to add for ${componentName}`);
+                    }
+                    let res = (0, core_1.transform)(file.text || '', {
+                        babelrc: false,
+                        sourceType: 'module',
+                        parserOpts: {
+                            plugins: ['jsx'],
+                        },
+                        plugins,
+                        // ast: true,
+                        // code: false,
+                        filename: 'x.jsx',
+                        compact: false,
+                        sourceMaps: false,
+                    });
+                    if (res?.code) {
+                        if (!biome) {
+                            biome = await js_api_1.Biome.create({
+                                distribution: js_api_1.Distribution.NODE,
+                            });
+                        }
+                        let result = biome.formatContent(res.code, {
+                            filePath: 'example.jsx',
+                        });
+                        didFormat = true;
+                        formatted = result.content;
+                    }
+                }
+                catch (e) {
+                    (0, sentry_1.notifyError)(e, 'babel transform and format');
+                }
+            }
+            const prefix = `// @ts-nocheck\n` + `/* eslint-disable */\n` + doNotEditComment;
+            const codeJsx = prefix + formatted;
+            const codeJs = prefix + file.text;
+            utils_js_2.logger.log(`writing`, path_1.default.relative(out, file.path));
+            await fs_1.default.promises.mkdir(path_1.default.dirname(paths.jsxPath), {
+                recursive: true,
+            });
+            // Always write the temp .js file for type extraction
+            await fs_1.default.promises.writeFile(paths.tempJsPath, codeJs, 'utf-8');
+            // Only write .jsx file if it's different from existing or if formatting was done
+            if (didFormat && codeJsx !== existing) {
+                await fs_1.default.promises.writeFile(paths.jsxPath, codeJsx, 'utf-8');
+            }
+        }
+        utils_js_2.spinner.stop();
+        // await fs.promises.writeFile(
+        //     path.resolve(out, '.cursorignore'),
+        //     `**/*.js\nchunks\n`,
+        //     'utf-8',
+        // )
+        // Clean up temp .js files and handle prefixes
+        for (let file of buildResult.outputFiles) {
+            if (file.path.endsWith('.js')) {
+                const paths = getFilePaths(file.path, out);
+                if (fs_1.default.existsSync(paths.jsxPath)) {
+                    // Remove temp .js file if .jsx equivalent exists
+                    utils_js_2.logger.log('removing temp JS file with JSX equivalent:', path_1.default.relative(out, paths.tempJsPath));
+                    try {
+                        await fs_1.default.promises.rm(paths.tempJsPath);
+                        await fs_1.default.promises.rm(paths.finalJsPath);
+                    }
+                    catch (error) {
+                        // Ignore error if file doesn't exist
+                    }
+                }
+                else {
+                    // Rename temp .js file to final name if no .jsx equivalent
+                    utils_js_2.logger.log('renaming temp JS file to final name:', path_1.default.relative(out, paths.tempJsPath), '->', path_1.default.relative(out, paths.finalJsPath));
+                    try {
+                        await fs_1.default.promises.rename(paths.tempJsPath, paths.finalJsPath);
+                    }
+                    catch (error) {
+                        // Ignore error if file doesn't exist
+                    }
+                }
+            }
+        }
         utils_js_2.spinner.info(`Build completed`);
         return res;
     }
@@ -441,8 +546,11 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
     const result = await rebuild();
     console.log();
     console.log();
-    const outDirForExample = path_1.default.posix.relative(process.cwd(), out).replace(/^src\//, '') ||
-        'framer'; // remove src so file works inside src
+    const outDirForExample = path_1.default
+        .relative(process.cwd(), out)
+        .split(path_1.default.sep)
+        .join('/')
+        .replace(/^src\//, '') || 'framer'; // remove src so file works inside src
     const { exampleCode } = await createExampleComponentCode({
         outDir: out,
         // buildResult: result,
@@ -455,38 +563,31 @@ async function bundle({ config, cwd: out = '', watch = false, signal = undefined
         });
         await fs_1.default.promises.writeFile(utils_js_2.stackblitzDemoExample, exampleCode);
     }
-    if (!foundError) {
-        console.log((0, utils_js_2.terminalMarkdown)((0, utils_js_1.dedent) `
-        # How to use the Framer components
+    console.log((0, utils_js_2.terminalMarkdown)((0, utils_js_1.dedent) `
+    # How to use the Framer components
 
-        Your components are exported to \`${outDirForExample}\` folder. Now please install the \`unframer\` runtime dependency:
+    Your components are exported to \`${outDirForExample}\` folder.
 
-        \`\`\`sh
-        npm install unframer
-        \`\`\`
+    Each component has a \`.Responsive\` variant that allows you to specify different variants for different breakpoints.
 
-        Each component has a \`.Responsive\` variant that allows you to specify different variants for different breakpoints.
+    You can use the components like this (try copy pasting the code below into your React app):
 
-        You can use the components like this (try copy pasting the code below into your React app):
+    \`\`\`jsx
+    ${exampleCode}
+    \`\`\`
 
-        \`\`\`jsx
-        ${exampleCode}
-        \`\`\`
+    It's very important to import the \`styles.css\` file to include the necessary styles for the components.
 
-        It's very important to import the \`styles.css\` file to include the necessary styles for the components.
+    To style components you can pass a \`style\` or \`className\` prop (but remember to use !important to increase the specificity).
 
-        To style components you can pass a \`style\` or \`className\` prop (but remember to use !important to increase the specificity).
+    Read more on GitHub: https://github.com/remorses/unframer
 
-        Read more on GitHub: https://github.com/remorses/unframer
-
-        `));
-    }
-    await checkUnframerVersion({ cwd: out });
+    `));
     console.log();
     return { result, rebuild, buildContext };
 }
 const packageVersionCache = new Map();
-function resolvePackage({ cwd, pkg }) {
+function resolvePackageVersion({ cwd, pkg }) {
     if (packageVersionCache.has(pkg)) {
         return Promise.resolve(packageVersionCache.get(pkg));
     }
@@ -501,7 +602,7 @@ function resolvePackage({ cwd, pkg }) {
             cwd,
         }, (error, stdout, stderr) => {
             if (error) {
-                utils_js_2.logger.log(stderr);
+                // Package not installed - this is expected and handled by auto-install
                 reject(new Error(`${pkg} is not installed in your project`));
                 return;
             }
@@ -511,17 +612,25 @@ function resolvePackage({ cwd, pkg }) {
         });
     });
 }
-async function checkUnframerVersion({ cwd }) {
-    const currentVersion = package_json_1.default.version;
-    try {
-        const installedVersion = await resolvePackage({ cwd, pkg: 'unframer' });
-        if (installedVersion !== currentVersion) {
-            utils_js_2.spinner.error(`IMPORTANT: Unframer version mismatch. Please run: npm update unframer@latest`);
-        }
-    }
-    catch (e) {
-        utils_js_2.spinner.error('IMPORTANT: Unframer is not installed in your project. Please run: npm install unframer');
-    }
+function resolvePackage({ cwd, pkg }) {
+    return new Promise((resolve) => {
+        const code = `import('${pkg}/package.json', { with: { type: 'json' } }).then(()=>console.log('true')).catch(()=>import('${pkg}').then(()=>console.log('true')).catch(()=>console.log('false')));`;
+        const command = [
+            JSON.stringify(nodePath),
+            '-e',
+            JSON.stringify(code),
+        ].join(' ');
+        (0, child_process_1.exec)(command, {
+            cwd,
+        }, (error, stdout) => {
+            if (error) {
+                resolve(false);
+                return;
+            }
+            const exists = stdout.trim().split('\n').pop() === 'true';
+            resolve(exists);
+        });
+    });
 }
 function getDarkModeSelector(opts) {
     const { darkModeType = 'class', content } = opts;
@@ -615,7 +724,7 @@ async function extractPropControlsSafe(text, name) {
         utils_js_2.logger.error(`Cannot get property controls for ${name}`, e.stack);
     }
 }
-function getTokensCss({ out, result, }) {
+async function getTokensCss({ out, result, }) {
     const allTokens = [];
     for (let file of result.outputFiles) {
         const code = fs_1.default.readFileSync(path_1.default.resolve(out, file.path), 'utf-8');
@@ -745,7 +854,11 @@ function safeJsonParse(text) {
         return null;
     }
 }
-function propControlsToType({ config, fileName, controls, }) {
+/**
+ * Generates TypeDoc comments that will be injected into JSX files
+ * instead of generating separate .d.ts files
+ */
+function propControlsToTypedocComments({ config, fileName, controls, }) {
     try {
         const types = Object.entries(controls || {})
             .map(([key, value]) => {
@@ -803,40 +916,76 @@ function propControlsToType({ config, fileName, controls, }) {
             if (!name) {
                 return '';
             }
-            return `    ${JSON.stringify(name)}?: ${typescriptType(value)}`;
+            return ` * ${name}?: ${typescriptType(value)} // ${value.title || name}`;
         })
             .filter(Boolean)
             .join('\n');
         const componentName = componentCamelCase(fileName);
-        const defaultPropsTypes = [
-            'children?: React.ReactNode',
-            'locale?: Locale',
-            'style?: React.CSSProperties',
-            'className?: string',
-            'id?: string',
-            'width?: any',
-            'height?: any',
-            'layoutId?: string',
-        ]
-            .map((line) => `    ${line}`)
-            .join('\n') + '\n';
-        let t = '';
-        t += '/* This file was generated by Unframer, do not edit manually */\n';
-        t += 'import * as React from "react"\n\n';
-        t += 'import { UnframerBreakpoint } from "unframer"\n\n';
-        t += `type Locale = ${config.locales?.length
-            ? config.locales.map((l) => `'${l.code}'`).join(' | ')
-            : 'string'}\n`;
-        t += `export interface Props {\n${defaultPropsTypes}${types}\n}\n\n`;
-        t += `const ${componentName} = (props: Props) => any\n\n`;
-        t += `type VariantsMap = Partial<Record<UnframerBreakpoint, Props['variant']>> & { base: Props['variant'] }\n\n`;
-        t += `${componentName}.Responsive = (props: Omit<Props, 'variant'> & {variants?: VariantsMap}) => any\n\n`;
-        t += `export default ${componentName}\n\n`;
-        return t;
+        const defaultPropsJsDoc = [
+            ' * children?: React.ReactNode',
+            ' * locale?: Locale',
+            ' * style?: React.CSSProperties',
+            ' * className?: string',
+            ' * id?: string',
+            ' * ref?: any',
+            ' * width?: any',
+            ' * height?: any',
+            ' * layoutId?: string',
+        ].join('\n');
+        // Generate header comment with type definitions
+        let headerComment = '/**\n';
+        headerComment += ' * @typedef Locale\n';
+        // Generate union type from config.locales if available
+        const localeType = (() => {
+            if (config?.locales &&
+                Array.isArray(config.locales) &&
+                config.locales.length > 0) {
+                return config.locales
+                    .map((locale) => `'${locale.slug}'`)
+                    .join(' | ');
+            }
+            return 'string';
+        })();
+        headerComment += ` * ${localeType}\n`;
+        headerComment += ' */\n\n';
+        headerComment += '/**\n';
+        headerComment +=
+            ' * @typedef {{\n';
+        headerComment += defaultPropsJsDoc;
+        if (types) {
+            headerComment += '\n' + types;
+        }
+        headerComment += `\n}} Props\n`;
+        headerComment += '\n */\n\n';
+        headerComment += '/**\n';
+        headerComment += ' * @type {import("unframer").UnframerBreakpoint}\n';
+        headerComment += ' * Represents a responsive breakpoint for unframer.\n';
+        headerComment += ' */\n\n';
+        headerComment += '/**\n';
+        headerComment += ' * @typedef VariantsMap\n';
+        headerComment +=
+            " * Partial record of UnframerBreakpoint to Props.variant, with a mandatory 'base' key.\n";
+        headerComment +=
+            " * { [key in UnframerBreakpoint]?: Props['variant'] } & { base: Props['variant'] }\n";
+        headerComment += ' */';
+        // Generate responsive comment
+        const responsiveComment = `/**\n * Renders ${componentName} for all breakpoints with a variants map. Variant prop is inferred per breakpoint.\n * @function\n * @param {Omit<Props, 'variant'> & {variants?: VariantsMap}} props\n * @returns {any}\n */`;
+        // Generate default export comment - use inline function type instead of referencing undefined type
+        const defaultExportComment = `/** @type {function(Props): any} */`;
+        return {
+            headerComment,
+            responsiveComment,
+            defaultExportComment,
+        };
     }
     catch (e) {
-        utils_js_2.logger.error('cannot generate types', e.stack);
-        return '';
+        utils_js_2.logger.error(e.message);
+        utils_js_2.logger.error('cannot generate typedoc comments', e.stack);
+        return {
+            headerComment: '',
+            responsiveComment: '',
+            defaultExportComment: '',
+        };
     }
 }
 function parsePropertyControls(code) {
@@ -1021,8 +1170,10 @@ function indentWithTabs(str, tabs) {
         .join('\n');
 }
 async function createExampleComponentCode({ outDir, config, }) {
-    const outDirForExample = path_1.default.posix
+    const outDirForExample = path_1.default
         .relative(process.cwd(), outDir)
+        .split(path_1.default.sep)
+        .join('/')
         .replace(/^src\//, ''); // remove src so file works inside src
     const instances = config?.componentInstancesInIndexPage?.sort((a, b) => {
         // Order first by nodeDepth (lower is better)
@@ -1068,7 +1219,42 @@ async function createExampleComponentCode({ outDir, config, }) {
       };
       `;
     return {
+        outDirForExample,
         exampleCode,
     };
 }
+/**
+ * Compares two semantic version strings.
+ * Returns true if versionB is greater than versionA.
+ * Handles x.y.z, x.y, x, and optional pre-release (-alpha, etc).
+ */
+function isVersionGreater(versionA, versionB) {
+    try {
+        function parseVersion(version) {
+            // Remove pre-release (e.g. -alpha.1)
+            let [core] = version.trim().split('-');
+            return core.split('.').map((x) => parseInt(x, 10));
+        }
+        const [a1 = 0, a2 = 0, a3 = 0] = parseVersion(versionA);
+        const [b1 = 0, b2 = 0, b3 = 0] = parseVersion(versionB);
+        if (b1 > a1)
+            return true;
+        if (b1 < a1)
+            return false;
+        if (b2 > a2)
+            return true;
+        if (b2 < a2)
+            return false;
+        if (b3 > a3)
+            return true;
+        if (b3 < a3)
+            return false;
+        // If all equal, not greater
+        return false;
+    }
+    catch (error) {
+        utils_js_2.spinner.error(`Error comparing versions "${versionA}" and "${versionB}": ${error?.stack || error?.message || error}`);
+        return true;
+    }
+}
 //# sourceMappingURL=exporter.js.map