@reframejs/unframer 4.2.0-reframe.0

package/dist/compat.d.ts

@@ -0,0 +1,2 @@
+export declare function propCamelCaseJustLikeFramer(str?: string): string;
+//# sourceMappingURL=compat.d.ts.map

package/dist/compat.js

@@ -0,0 +1,23 @@
+export function propCamelCaseJustLikeFramer(str) {
+    if (!str) {
+        return '';
+    }
+    // Handle consecutive uppercase letters followed by lowercase, this is a bug in Framer, makes it match Framer
+    str = str.replace(/([A-Z]{2,})([a-z])/g, (_, upper, lower) => {
+        return upper + lower.toUpperCase();
+    });
+    // Remove spaces (e.g. "Foo Bar" -> "fooBar")
+    str = str.replace(/\s+(.)/g, (_, c) => c.toUpperCase());
+    // Convert dashes to camelCase (e.g. foo-bar -> fooBar)
+    str = str.replace(/-([\w])/g, (g) => g[1].toUpperCase());
+    // Convert underscores to camelCase (e.g. foo_bar -> fooBar)
+    str = str.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
+    // Ensure first character is lowercase
+    str = str[0].toLowerCase() + str.slice(1);
+    // Add underscore prefix if starts with number
+    if (/^\d/.test(str)) {
+        str = '_' + str;
+    }
+    return str;
+}
+//# sourceMappingURL=compat.js.map

package/dist/config.d.ts

@@ -0,0 +1,18 @@
+import type { CachedMcpTools } from '@goke/mcp';
+export type McpMode = 'plugin' | 'server-api';
+export interface UnframerConfig {
+    /** MCP mode: 'plugin' uses WebSocket tunnel, 'server-api' uses framer-api directly */
+    mode?: McpMode;
+    /** MCP URL for plugin mode (from Framer MCP plugin) */
+    mcpUrl?: string;
+    /** Framer API key for server-api mode */
+    framerApiKey?: string;
+    /** Default Framer project URL for server-api mode */
+    framerProjectUrl?: string;
+    /** Cached MCP tools schema */
+    cachedMcpTools?: CachedMcpTools;
+}
+export declare function loadConfig(): UnframerConfig;
+export declare function saveConfig(config: UnframerConfig): void;
+export declare function getConfigPath(): string;
+//# sourceMappingURL=config.d.ts.map

package/dist/config.js

@@ -0,0 +1,27 @@
+// CLI config persistence for MCP auth mode, credentials, and cached tool metadata.
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+const CONFIG_DIR = path.join(os.homedir(), '.unframer');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+export function loadConfig() {
+    if (!fs.existsSync(CONFIG_FILE)) {
+        return {};
+    }
+    try {
+        return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function saveConfig(config) {
+    if (!fs.existsSync(CONFIG_DIR)) {
+        fs.mkdirSync(CONFIG_DIR, { recursive: true });
+    }
+    fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+}
+export function getConfigPath() {
+    return CONFIG_FILE;
+}
+//# sourceMappingURL=config.js.map

package/dist/css-core.d.ts

@@ -0,0 +1,50 @@
+export interface ComponentFont {
+    cssFamilyName?: string;
+    family?: string;
+    url: string;
+    style?: string;
+    weight?: string | number;
+    unicodeRange?: string;
+}
+export type ComponentFontBundle = {
+    /**
+     * This flag specifies whether the font bundle includes the specific font
+     * weights of Framer’s Inter font that the component uses. New smart
+     * components do that (which means we can emit CSS only for Inter fonts that
+     * are actually used); older smart components don’t (which means some places
+     * will emit CSS for all Inter fonts if this flag is not set).
+     * https://www.notion.so/framer/RFC-ComponentFont-v2-d5fd3e822fb049ffb6971554ab0e4e42
+     */
+    explicitInter: boolean;
+    fileName?: string;
+    fonts: ComponentFont[];
+};
+export declare function logFontsUsage(fontsBundles: ComponentFontBundle[]): string;
+export declare function getFontsStyles(_fontsDefs: ComponentFontBundle[]): string;
+export declare const defaultBreakpointSizes: {
+    readonly base: 0;
+    readonly sm: 320;
+    readonly md: 768;
+    readonly lg: 960;
+    readonly xl: 1200;
+    readonly '2xl': 1536;
+};
+export type BreakpointSizes = typeof defaultBreakpointSizes;
+export declare const breakpointsStylesLegacy: (breakpointSizes?: {
+    readonly base: 0;
+    readonly sm: 320;
+    readonly md: 768;
+    readonly lg: 960;
+    readonly xl: 1200;
+    readonly '2xl': 1536;
+} | undefined) => string;
+export declare const breakpointsStyles: (breakpointSizes?: {
+    readonly base: 0;
+    readonly sm: 320;
+    readonly md: 768;
+    readonly lg: 960;
+    readonly xl: 1200;
+    readonly '2xl': 1536;
+} | undefined) => string;
+export declare function groupBy<T>(arr: T[], key: (x: T) => string): Map<string, T[]>;
+//# sourceMappingURL=css-core.d.ts.map

package/dist/css-core.js

@@ -0,0 +1,231 @@
+/**
+ * Pure CSS generation helpers for exported Framer components.
+ * This file must not import React or framer.js so server-only tools can use it
+ * without loading the generated Framer runtime in React Server Components.
+ */
+import dedent from 'string-dedent';
+function getFontFamilyName(font) {
+    return font.cssFamilyName || font.family;
+}
+function deduplicateByKey(arr, key) {
+    const map = new Map();
+    for (const item of arr) {
+        const value = key(item);
+        if (map.has(value)) {
+            continue;
+        }
+        map.set(value, item);
+    }
+    return Array.from(map.values());
+}
+export function logFontsUsage(fontsBundles) {
+    if (!fontsBundles.length) {
+        return '';
+    }
+    const familyToFilenames = new Map();
+    for (const fontDefBundle of fontsBundles) {
+        const filename = fontDefBundle.fileName;
+        for (const font of fontDefBundle.fonts) {
+            const familyName = getFontFamilyName(font);
+            if (!familyName)
+                continue;
+            if (familyToFilenames.has(familyName)) {
+                familyToFilenames.get(familyName).add(filename);
+            }
+            else {
+                familyToFilenames.set(familyName, new Set([filename]));
+            }
+        }
+    }
+    let str = `There are ${familyToFilenames.size} fonts used:\n`;
+    for (const [family, filenames] of familyToFilenames.entries()) {
+        str += `${JSON.stringify(family)}, used by\n`;
+        for (const filename of filenames) {
+            str += `  - ${filename}\n`;
+        }
+    }
+    return str;
+}
+export function getFontsStyles(_fontsDefs) {
+    if (!_fontsDefs.length) {
+        return '';
+    }
+    const urlToFilenames = new Map();
+    for (const fontDefBundle of _fontsDefs) {
+        const filename = fontDefBundle.fileName;
+        for (const font of fontDefBundle.fonts) {
+            if (urlToFilenames.has(font.url)) {
+                urlToFilenames.get(font.url).add(filename);
+            }
+            else {
+                urlToFilenames.set(font.url, new Set([filename]));
+            }
+        }
+    }
+    const allFonts = deduplicateByKey(_fontsDefs.flatMap((x) => x.fonts), (x) => x?.url)
+        .filter((x) => {
+        if (!x.url)
+            return false;
+        const familyName = getFontFamilyName(x);
+        if (!familyName) {
+            console.log('Font missing family field:', JSON.stringify(x, null, 2));
+            return false;
+        }
+        return true;
+    })
+        .sort((a, b) => a.url.localeCompare(b.url));
+    const grouped = groupBy(allFonts, (x) => {
+        return [...(urlToFilenames.get(x.url) || [])].sort().join(', ');
+    });
+    let str = '\n\n';
+    for (let [groupComment, fonts] of grouped.entries()) {
+        fonts = sortByKey(fonts, (x) => x.url);
+        str += `/* used by ${groupComment} */\n`;
+        str +=
+            '\n' +
+                fonts
+                    .map((x) => {
+                    let str = '';
+                    const familyName = getFontFamilyName(x);
+                    str += dedent `
+                    @font-face {
+                        font-family: "${familyName}";
+                        src: url('${x.url}');\n
+                    `;
+                    if (x.style) {
+                        str += `    font-style: ${x.style};\n`;
+                    }
+                    if (x.weight) {
+                        str += `    font-weight: ${x.weight};\n`;
+                    }
+                    if (x.unicodeRange) {
+                        str += `    unicode-range: ${x.unicodeRange};\n`;
+                    }
+                    str += `}\n`;
+                    return str;
+                })
+                    .join('\n') +
+                '\n';
+    }
+    return str;
+}
+export const defaultBreakpointSizes = {
+    base: 0,
+    sm: 320,
+    md: 768,
+    lg: 960,
+    xl: 1200,
+    '2xl': 1536,
+};
+export const breakpointsStylesLegacy = (breakpointSizes) => {
+    breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes };
+    return /* css */ `
+/* Base */
+@media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
+    .unframer-hidden.unframer-base {
+        display: contents;
+    }
+}
+
+/* Small */
+@media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
+    .unframer-hidden.unframer-sm {
+        display: contents;
+    }
+}
+
+/* Medium */
+@media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
+    .unframer-hidden.unframer-md {
+        display: contents;
+    }
+}
+
+/* Large */
+@media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
+    .unframer-hidden.unframer-lg {
+        display: contents;
+    }
+}
+
+/* Extra Large */
+@media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
+    .unframer-hidden.unframer-xl {
+        display: contents;
+    }
+}
+
+/* 2 Extra Large */
+@media (min-width: ${breakpointSizes['2xl']}px) {
+    .unframer-hidden.unframer-2xl {
+        display: contents;
+    }
+}
+
+.unframer-hidden {
+    display: none;
+}
+`;
+};
+export const breakpointsStyles = (breakpointSizes) => {
+    breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes };
+    return /* css */ `
+
+/* Base */
+@media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
+    .unframer-hidden:not(.unframer-base) {
+        display: none !important;
+    }
+}
+
+/* Small */
+@media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
+    .unframer-hidden:not(.unframer-sm) {
+        display: none !important;
+    }
+}
+
+/* Medium */
+@media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
+    .unframer-hidden:not(.unframer-md) {
+        display: none !important;
+    }
+}
+
+/* Large */
+@media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
+    .unframer-hidden:not(.unframer-lg) {
+        display: none !important;
+    }
+}
+
+/* Extra Large */
+@media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
+    .unframer-hidden:not(.unframer-xl) {
+        display: none !important;
+    }
+}
+
+/* 2 Extra Large */
+@media (min-width: ${breakpointSizes['2xl']}px) {
+    .unframer-hidden:not(.unframer-2xl) {
+        display: none !important;
+    }
+}
+`;
+};
+export function groupBy(arr, key) {
+    const map = new Map();
+    for (const item of arr) {
+        const k = key(item);
+        if (!map.has(k)) {
+            map.set(k, []);
+        }
+        map.get(k)?.push(item);
+    }
+    return map;
+}
+function sortByKey(arr, key) {
+    return arr.slice().sort((a, b) => key(a).localeCompare(key(b)));
+}
+//# sourceMappingURL=css-core.js.map

package/dist/css.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export * from './css-core.js';
+/**
+ * Custom withCSS function that restores the previous behavior
+ * of rendering inline style tags instead of using cssCollector.
+ *
+ * On the client we return withCSSOriginal so the component tree structure
+ * matches what framer.js internal components produce (just <Component/>,
+ * no Fragment wrapper). On the server we render <style> + <Component>
+ * inside a Fragment to inject CSS into the SSR HTML. The tree differs
+ * between server and client but suppressHydrationWarning on the Component
+ * handles the mismatch.
+ */
+export declare function withCSS(Component: any, escapedCSS: any, componentSerializationId?: string): React.ForwardRefExoticComponent<object & React.RefAttributes<unknown>> | ((props: any) => React.JSX.Element);
+//# sourceMappingURL=css.d.ts.map

package/dist/css.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withCSS as withCSSOriginal } from './framer.js';
+export * from './css-core.js';
+/**
+ * Custom withCSS function that restores the previous behavior
+ * of rendering inline style tags instead of using cssCollector.
+ *
+ * On the client we return withCSSOriginal so the component tree structure
+ * matches what framer.js internal components produce (just <Component/>,
+ * no Fragment wrapper). On the server we render <style> + <Component>
+ * inside a Fragment to inject CSS into the SSR HTML. The tree differs
+ * between server and client but suppressHydrationWarning on the Component
+ * handles the mismatch.
+ */
+export function withCSS(Component, escapedCSS, componentSerializationId) {
+    const framerCSSMarker = 'data-framer-css-ssr';
+    if (typeof window !== 'undefined' && typeof window.document !== 'undefined')
+        return withCSSOriginal(Component, escapedCSS, componentSerializationId || '');
+    return (props) => {
+        const isBrowser = typeof window !== 'undefined' &&
+            typeof window.document !== 'undefined';
+        if (!isBrowser) {
+            const id = componentSerializationId;
+            const cssContent = typeof escapedCSS === 'function'
+                ? escapedCSS('EXPORT')
+                : Array.isArray(escapedCSS)
+                    ? escapedCSS.join('\n')
+                    : escapedCSS;
+            return (_jsxs(_Fragment, { children: [
+                    _jsx("style", { [framerCSSMarker]: true, "data-framer-component": id, dangerouslySetInnerHTML: { __html: cssContent } }), _jsx(Component, { ...props })
+                ] }));
+        }
+        return _jsx(Component, { ...props });
+    };
+}
+//# sourceMappingURL=css.js.map

package/dist/esbuild.d.ts

@@ -0,0 +1,31 @@
+import { fetch } from 'undici';
+import { Plugin } from 'esbuild';
+export declare const defaultExternalPackages: string[];
+export declare const replaceWebPageIds: ({ elements, code, }: {
+    elements: {
+        webPageId: string;
+        path: string;
+    }[];
+    code: string;
+}) => string;
+export declare function esbuildPluginBundleDependencies({ signal, externalPackages, externalizeNpm, outDir, onCollectMissingPackage, onFetch }: {
+    externalPackages?: string[] | undefined;
+    externalizeNpm?: boolean | undefined;
+    onCollectMissingPackage?: ((pkg: string) => void) | undefined;
+    onFetch?: ((info: {
+        url: string;
+        resolvedUrl: string;
+    }) => void) | undefined;
+    outDir: any;
+    signal?: AbortSignal | undefined;
+}): Plugin;
+export declare function resolveRedirect({ redirectCache, signal, url }: {
+    url?: string;
+    redirectCache?: any;
+    signal?: AbortSignal;
+}): Promise<any>;
+export declare function recursiveResolveRedirect(url?: string, signal?: AbortSignal): Promise<string | undefined>;
+export declare const fetchWithRetry: typeof fetch;
+export declare function retryTwice<F extends Function>(fn: Function): Function;
+export declare function getPackageName(importPath: string): string;
+//# sourceMappingURL=esbuild.d.ts.map