@reframejs/unframer 4.2.0-reframe.0

package/dist/styles/reset.css

@@ -0,0 +1,37 @@
+:root {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    box-sizing: border-box;
+    -webkit-font-smoothing: inherit;
+}
+
+:where(
+    .unframer h1,
+    .unframer h2,
+    .unframer h3,
+    .unframer h4,
+    .unframer h5,
+    .unframer h6,
+    .unframer p,
+    .unframer figure
+) {
+    margin: 0;
+}
+
+:where(.unframer) {
+    line-height: normal;
+}
+
+:where(
+    .unframer,
+    .unframer input,
+    .unframer textarea,
+    .unframer select,
+    .unframer button
+) {
+    font-size: 12px;
+    font-family: sans-serif;
+}

package/dist/typescript.d.ts

@@ -0,0 +1,24 @@
+import type { PropertyControls } from './framer-types.js';
+export declare function componentCamelCase(str: string): string;
+export declare function componentImportedName({ componentPath, duplicateLeafNames }: {
+    componentPath: string;
+    duplicateLeafNames: ReadonlySet<string>;
+}): string;
+/**
+ * Generates TypeDoc comments that will be injected into JSX files
+ * instead of generating separate .d.ts files
+ */
+export declare function propControlsToTypedocComments({ locales, componentImportedName, propertyControls, logger, includeLocaleTypes }: {
+    propertyControls: PropertyControls;
+    componentImportedName: string;
+    locales?: Array<{
+        slug: string;
+    }>;
+    logger: any;
+    includeLocaleTypes?: boolean;
+}): {
+    headerComment: string;
+    responsiveComment: string;
+    defaultExportComment: string;
+};
+//# sourceMappingURL=typescript.d.ts.map

package/dist/typescript.js

@@ -0,0 +1,197 @@
+import { propCamelCaseJustLikeFramer } from './compat.js';
+import { ControlType } from './framer-types.js';
+export function componentCamelCase(str) {
+    str = str?.replace(/\.jsx?$/, '');
+    if (!str) {
+        return 'FramerComponent';
+    }
+    // Use the leaf component name by default so generated imports stay stable.
+    str = str.split('/').filter(Boolean).pop() || '';
+    // Replace all non-alphanumeric characters with space
+    // This handles spaces, special chars, underscores, hyphens, etc.
+    const words = str.replace(/[^a-zA-Z0-9]+/g, ' ').trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return 'FramerComponent';
+    }
+    str = words
+        .map((word, index) => {
+        if (index === 0) {
+            return word[0].toUpperCase() + word.slice(1);
+        }
+        return word[0].toUpperCase() + word.slice(1);
+    })
+        .join('');
+    // If component name starts with a number, add prefix 'Framer'
+    if (/^[0-9]/.test(str)) {
+        str = 'Framer' + str;
+    }
+    str = str + 'FramerComponent';
+    return str;
+}
+export function componentImportedName({ componentPath, duplicateLeafNames, }) {
+    const normalizedPath = componentPath?.replace(/\.jsx?$/, '') || '';
+    const pathSegments = normalizedPath.split('/').filter(Boolean);
+    const leafName = pathSegments[pathSegments.length - 1] || '';
+    if (!duplicateLeafNames.has(leafName)) {
+        return componentCamelCase(normalizedPath);
+    }
+    const words = pathSegments
+        .flatMap((segment) => {
+        return segment
+            .replace(/[^a-zA-Z0-9]+/g, ' ')
+            .trim()
+            .split(/\s+/)
+            .filter(Boolean);
+    });
+    if (words.length === 0) {
+        return 'FramerComponent';
+    }
+    let result = words
+        .map((word) => {
+        return word[0].toUpperCase() + word.slice(1);
+    })
+        .join('');
+    if (/^[0-9]/.test(result)) {
+        result = 'Framer' + result;
+    }
+    return result + 'FramerComponent';
+}
+/**
+ * Generates TypeDoc comments that will be injected into JSX files
+ * instead of generating separate .d.ts files
+ */
+export function propControlsToTypedocComments({ locales, componentImportedName, propertyControls, logger, includeLocaleTypes = false, }) {
+    try {
+        const types = Object.entries(propertyControls || {})
+            .map(([key, value]) => {
+            if (!value) {
+                return;
+            }
+            const typescriptType = (value) => {
+                if (!value?.type) {
+                    return 'any';
+                }
+                switch (value.type) {
+                    case ControlType.Color:
+                        return 'string';
+                    case ControlType.Boolean:
+                        return 'boolean';
+                    case ControlType.Number:
+                        return 'number';
+                    case ControlType.String:
+                        return 'string';
+                    case ControlType.Enum: {
+                        const options = value.optionTitles || value.options;
+                        return options.map((x) => `'${x}'`).join(' | ');
+                    }
+                    case ControlType.File:
+                        return 'string';
+                    case ControlType.Image:
+                        return 'string';
+                    case ControlType.ComponentInstance:
+                        return 'React.ReactNode';
+                    case ControlType.Array:
+                        return `${typescriptType(value.control)}[]`;
+                    case ControlType.Object:
+                        return `{${Object.entries(value.controls)
+                            .map(([k, v]) => {
+                            return `${k}: ${typescriptType(v)}`;
+                        })
+                            .join(', ')}`;
+                    case ControlType.Date:
+                        return 'string | Date';
+                    case ControlType.Link:
+                        return 'string';
+                    case ControlType.ResponsiveImage:
+                        return `{src: string, srcSet?: string, alt?: string}`;
+                    case ControlType.FusedNumber:
+                        return 'number';
+                    case ControlType.Transition:
+                        return 'any';
+                    case ControlType.EventHandler:
+                        return 'Function';
+                    default:
+                        return 'any';
+                }
+            };
+            let name = propCamelCaseJustLikeFramer(value.title || key || '');
+            if (!name) {
+                return '';
+            }
+            return ` * ${name}?: ${typescriptType(value)} // ${value.title || name}`;
+        })
+            .filter(Boolean)
+            .join('\n');
+        const componentName = componentImportedName;
+        const defaultPropsJsDoc = [
+            ' * children?: React.ReactNode',
+            includeLocaleTypes ? ' * locale?: Locale' : null,
+            ' * style?: React.CSSProperties',
+            ' * className?: string',
+            ' * id?: string',
+            ' * ref?: any',
+            ' * width?: any',
+            ' * height?: any',
+            ' * layoutId?: string',
+        ]
+            .filter(Boolean)
+            .join('\n');
+        // Generate header comment with type definitions
+        let headerComment = '';
+        if (includeLocaleTypes) {
+            headerComment += '/**\n';
+            headerComment += ' * @typedef Locale\n';
+            // Generate union type from locales if available
+            const localeType = (() => {
+                if (locales && Array.isArray(locales) && locales.length > 0) {
+                    return 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 */';
+        // Generate responsive comment
+        let responsiveComment = '/**\n';
+        responsiveComment +=
+            ' * @type {import("unframer").UnframerBreakpoint}\n';
+        responsiveComment +=
+            ' * Represents a responsive breakpoint for unframer.\n';
+        responsiveComment += ' */\n\n';
+        responsiveComment += '/**\n';
+        responsiveComment += ' * @typedef VariantsMap\n';
+        responsiveComment +=
+            " * Partial record of UnframerBreakpoint to Props.variant, with a mandatory 'base' key.\n";
+        responsiveComment +=
+            " * { [key in UnframerBreakpoint]?: Props['variant'] } & { base: Props['variant'] }\n";
+        responsiveComment += ' */\n\n';
+        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) {
+        logger.error(e.message);
+        logger.error('cannot generate typedoc comments', e.stack);
+        return {
+            headerComment: '',
+            responsiveComment: '',
+            defaultExportComment: '',
+        };
+    }
+}
+//# sourceMappingURL=typescript.js.map

package/dist/undici-dispatcher.d.ts

@@ -0,0 +1,2 @@
+export declare const dispatcher: import("undici").Dispatcher.ComposedDispatcher;
+//# sourceMappingURL=undici-dispatcher.d.ts.map

package/dist/undici-dispatcher.js

@@ -0,0 +1,10 @@
+import { Agent, interceptors, setGlobalDispatcher } from 'undici';
+import { FlatCacheStore } from './flat-cache-interceptor.js';
+export const dispatcher = new Agent({
+    keepAliveTimeout: 20,
+    keepAliveMaxTimeout: 20,
+}).compose(interceptors.cache({
+    store: new FlatCacheStore({ cacheDir: `.unframer` }),
+}));
+setGlobalDispatcher(dispatcher);
+//# sourceMappingURL=undici-dispatcher.js.map

package/dist/unframer-loader.d.ts

@@ -0,0 +1,2 @@
+export declare function resolve(specifier: any, context: any, defaultResolve: any): Promise<any>;
+//# sourceMappingURL=unframer-loader.d.ts.map

package/dist/unframer-loader.js

@@ -0,0 +1,12 @@
+const mapPackages = JSON.parse(process.env.UNFRAMER_MAP_PACKAGES || '{}');
+export async function resolve(specifier, context, defaultResolve) {
+    if (mapPackages[specifier]) {
+        return {
+            url: mapPackages[specifier],
+            // format: 'module', // Specify that unframer is an ES module
+            shortCircuit: true, // Signal that we're intentionally not calling next hook
+        };
+    }
+    return defaultResolve(specifier, context, defaultResolve);
+}
+//# sourceMappingURL=unframer-loader.js.map

package/dist/utils.d.ts

@@ -0,0 +1,20 @@
+import dedent from 'string-dedent';
+export declare function terminalMarkdown(markdown: string): string;
+export declare const logger: {
+    debug: boolean;
+    log(...args: any[]): void;
+    start(x?: string | undefined): void;
+    stop(x?: string | undefined): void;
+    info(...args: any[]): void;
+    update(...args: any[]): void;
+    green(...args: any[]): void;
+    error(...args: any[]): void;
+};
+export declare const spinner: import("nanospinner").Spinner;
+export declare function componentNameToPath(name: string): string;
+export declare function sleep(ms: number): Promise<unknown>;
+export declare function kebabCase(str: string): string;
+export declare function isTruthy<T>(x: T | null | undefined | false | 0 | ''): x is T;
+export declare const stackblitzDemoExample: string | undefined;
+export { dedent };
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.js

@@ -0,0 +1,81 @@
+import dedent from 'string-dedent';
+import pico from 'picocolors';
+import { createSpinner } from 'nanospinner';
+export function terminalMarkdown(markdown) {
+    return markdown;
+}
+const shouldDebugUnframer = !!process.env.DEBUG_UNFRAMER;
+const prefix = '[unframer]';
+export const logger = {
+    debug: shouldDebugUnframer,
+    log(...args) {
+        if (!logger.debug) {
+            return;
+        }
+        console.log(prefix, ...args);
+    },
+    start(x) {
+        if (!x)
+            return;
+        console.log(prefix, x);
+    },
+    stop(x) {
+        if (!x)
+            return;
+        console.log(prefix, x);
+    },
+    info(...args) {
+        console.log(prefix, ...args);
+    },
+    update(...args) {
+        console.log(prefix, ...args);
+    },
+    green(...args) {
+        console.log([prefix, ...args].map((x) => pico.green(x)).join(' '));
+    },
+    error(...args) {
+        console.error([prefix, ...args].map((x) => pico.red(x)).join(' '));
+    },
+};
+export const spinner = createSpinner('Unframer');
+export function componentNameToPath(name) {
+    return (name
+        .split('/')
+        .filter(Boolean)
+        .map((part) => kebabCase(part))
+        .join('/') || 'component-without-name');
+}
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+// https://www.npmjs.com/package/just-kebab-case?activeTab=readme
+// any combination of spaces and punctuation characters
+// thanks to http://stackoverflow.com/a/25575009
+var wordSeparators = /[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/;
+var capital_plus_lower = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g;
+var capitals = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g;
+export function kebabCase(str) {
+    // replace word starts with space + lower case equivalent for later parsing
+    // 1) treat cap + lower as start of new word
+    str = str.replace(capital_plus_lower, function (match) {
+        // match is one caps followed by one non-cap
+        return ' ' + (match[0].toLowerCase() || match[0]) + match[1];
+    });
+    // 2) treat all remaining capitals as words
+    str = str.replace(capitals, function (match) {
+        // match is a series of caps
+        return ' ' + match.toLowerCase();
+    });
+    return str
+        .trim()
+        .split(wordSeparators)
+        .join('-')
+        .replace(/^-/, '')
+        .replace(/-\s*$/, '');
+}
+export function isTruthy(x) {
+    return Boolean(x);
+}
+export const stackblitzDemoExample = process.env.STACKBLITZ_DEMO_EXAMPLE;
+export { dedent };
+//# sourceMappingURL=utils.js.map

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+export declare const version = "4.2.0-reframe.0";
+//# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -0,0 +1,2 @@
+export const version = '4.2.0-reframe.0';
+//# sourceMappingURL=version.js.map

package/package.json

@@ -0,0 +1,131 @@
+{
+    "name": "@reframejs/unframer",
+    "version": "4.2.0-reframe.0",
+    "type": "module",
+    "description": "Reframe-maintained runtime for importing Framer components into React apps",
+    "sideEffects": false,
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Elixir-Piloting/reframe.git",
+        "directory": "packages/unframer/unframer"
+    },
+    "bugs": {
+        "url": "https://github.com/Elixir-Piloting/reframe/issues"
+    },
+    "homepage": "https://reframe.elxr.studio/docs",
+    "imports": {
+        "#framer-client": {
+            "types": "./dist/plugin-mcp-dist/lib/framer-client.server.d.ts",
+            "default": "./dist/plugin-mcp-dist/lib/framer-client.server.js"
+        }
+    },
+    "scripts": {
+        "build": "pnpm tsgo && node scripts/copy-build-assets.mjs",
+        "test": "vitest",
+        "prepublishOnly": "node scripts/prepare-package.mjs && pnpm build",
+        "download-framer": "tsx scripts/download.ts",
+        "watch": "pnpm tsc -w"
+    },
+    "bin": {
+        "unframer": "bin.js"
+    },
+    "files": [
+        "dist",
+        "bin.js",
+        "!dist/**/*.test.*",
+        "!dist/**/*.map",
+        "README.md"
+    ],
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./framer.js": {
+            "types": "./dist/framer.d.ts",
+            "default": "./dist/framer.js"
+        },
+        "./dist/exporter": {
+            "types": "./dist/exporter.d.ts",
+            "default": "./dist/exporter.js"
+        },
+        "./styles/*": {
+            "default": "./dist/styles/*"
+        },
+        "./package.json": "./package.json"
+    },
+    "keywords": [
+        "reframe",
+        "framer",
+        "react",
+        "typescript"
+    ],
+    "author": "Reframe, with Unframer contributions by Tommaso De Rossi",
+    "license": "",
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {
+        "@antfu/ni": "^25.0.0",
+        "@babel/core": "^7.28.6",
+        "@biomejs/js-api": "^0.7.1",
+        "@biomejs/wasm-nodejs": "^1.9.4",
+        "@goke/mcp": "^0.0.4",
+        "@inquirer/prompts": "^8.2.0",
+        "@modelcontextprotocol/sdk": "^1.25.3",
+        "async-sema": "^3.1.1",
+        "camelcase": "^9.0.0",
+        "diff": "^7.0.0",
+        "dom-serializer": "^2.0.0",
+        "esbuild": "^0.28.0",
+        "framer-api": "^0.1.2",
+        "goke": "^6.12.1",
+        "htmlparser2": "^10.1.0",
+        "nanospinner": "^1.2.2",
+        "picocolors": "^1.1.1",
+        "react-router": "^7.12.0",
+        "real-framer-motion": "npm:framer-motion@^12.34.2",
+        "sema4": "^0.1.3",
+        "spiceflow": "^1.18.0",
+        "string-dedent": "^3.0.1",
+        "undici": "^7.18.2",
+        "zod": "^4.3.6"
+    },
+    "devDependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-environment-visitor": "^7.24.7",
+        "@babel/helper-split-export-declaration": "^7.24.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.25.9",
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@types/babel__core": "^7.20.5",
+        "@types/babel__traverse": "^7.28.0",
+        "@types/bun": "^1.1.6",
+        "@types/node": "^22.15.21",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@typescript/native-preview": "7.0.0-dev.20260117.1",
+        "@xmorse/deployment-utils": "^0.7.5",
+        "concurrently": "^9.1.2",
+        "dprint-node": "^1.0.8",
+        "lightningcss": "^1.32.0",
+        "openai": "^4.80.1",
+        "posthtml": "^0.16.6",
+        "react": "19.2.7",
+        "react-dom": "19.2.7",
+        "tiktoken": "^1.0.18",
+        "tsx": "^4.23.13",
+        "typescript": "^5.9.3",
+        "vite": "^8.3.0",
+        "vitest": "^3.2.7"
+    }
+}