@reframejs/unframer 4.2.0-reframe.0

package/dist/plugin-mcp-dist/lib/react-export.js

@@ -0,0 +1,358 @@
+import { framer, isFrameNode, isWebPageNode, } from '#framer-client';
+import { getComponentPropertyControls, getInstanceComponentId, getParentNodesArray, replaceEnumIdsForControls, } from './framer.js';
+function isTruthy(val) {
+    return Boolean(val);
+}
+import { Sema } from 'sema4';
+async function getParentNodesWithOrdering(node) {
+    if (typeof node === 'string') {
+        node = await framer.getNode(node);
+    }
+    if (!node) {
+        return [];
+    }
+    const result = [];
+    let parent = await node.getParent();
+    if (!parent) {
+        return [];
+    }
+    let currentChild = node;
+    while (parent) {
+        const siblings = await parent.getChildren();
+        const ordering = siblings.findIndex((x) => x.id === currentChild.id);
+        result.push({ node: parent, ordering });
+        currentChild = parent;
+        // if (isComponentNode(parent) || isComponentNode(parent)) {
+        //   break
+        // }
+        const newParent = await parent.getParent();
+        if (!newParent) {
+            // console.log('no parent found, last one was', parent)
+            return result;
+        }
+        parent = newParent;
+    }
+    return result;
+}
+function deduplicateByKey(items, getKey) {
+    const seen = new Map();
+    for (const item of items) {
+        const key = getKey(item);
+        if (!seen.has(key)) {
+            seen.set(key, item);
+        }
+    }
+    return Array.from(seen.values());
+}
+function groupBy(items, keyFn) {
+    const map = new Map();
+    for (const item of items) {
+        const key = keyFn(item);
+        const collection = map.get(key) || [];
+        collection.push(item);
+        map.set(key, collection);
+    }
+    return map;
+}
+// Main export functions
+export async function getInstancesWithOrderAndDepth({ allInstances, webPageIds, components, projectId, }) {
+    const componentIds = new Set(components.map((x) => x?.id));
+    const componentsAlreadyProcessed = new Set();
+    // Limit concurrency to avoid hammering the Framer API with hundreds of
+    // parallel getParent/getChildren calls and dynamic import() fetches.
+    const semaphore = new Sema(6);
+    const rawComponentInstances = await Promise.all(allInstances.map(async (x) => {
+        const componentId = getInstanceComponentId(x);
+        if (!componentId) {
+            return;
+        }
+        if (!componentIds.has(componentId) ||
+            componentsAlreadyProcessed.has(componentId)) {
+            return;
+        }
+        await semaphore.acquire();
+        try {
+            // Re-check after acquiring: another task may have processed
+            // this componentId while we were waiting on the semaphore.
+            if (componentsAlreadyProcessed.has(componentId)) {
+                return;
+            }
+            // Claim immediately so other tasks in this batch skip it
+            componentsAlreadyProcessed.add(componentId);
+            const parents = await getParentNodesWithOrdering(x);
+            const parentsOrderings = parents.map((x) => x.ordering);
+            const pageParent = parents.find((x) => isWebPageNode(x.node));
+            const webPageId = pageParent?.node?.id || '';
+            const { propertyControls } = await getComponentPropertyControls(components.find((x) => x.id === componentId)
+                ?.insertURL);
+            const styles = {
+                position: x.position ?? null,
+                top: x.top ?? null,
+                right: x.right ?? null,
+                bottom: x.bottom ?? null,
+                left: x.left ?? null,
+                centerX: x.centerX ?? null,
+                centerY: x.centerY ?? null,
+                width: x.width ?? null,
+                height: x.height ?? null,
+                minWidth: x.minWidth ?? null,
+                maxWidth: x.maxWidth ?? null,
+                minHeight: x.minHeight ?? null,
+                maxHeight: x.maxHeight ?? null,
+                aspectRatio: x.aspectRatio ?? null,
+                rotation: x.rotation ?? null,
+                opacity: x.opacity ?? null,
+            };
+            const instance = {
+                componentId,
+                controls: replaceEnumIdsForControls(x.controls, propertyControls),
+                parentsOrderings,
+                webPageId,
+                projectId,
+                nodeDepth: parents.length - 1,
+                styles,
+            };
+            return instance;
+        }
+        finally {
+            semaphore.release();
+        }
+    }));
+    const instancesGroups = Array.from(groupBy(rawComponentInstances.filter(isTruthy), (x) => x.webPageId).values());
+    let componentInstances = instancesGroups.flatMap((group) => {
+        return group
+            .sort((a, b) => {
+            const minParentLength = Math.min(a.parentsOrderings?.length, b.parentsOrderings?.length);
+            for (let i = 0; i < minParentLength; i++) {
+                if (a.parentsOrderings[i] < b.parentsOrderings[i]) {
+                    return -1;
+                }
+                if (a.parentsOrderings[i] > b.parentsOrderings[i]) {
+                    return 1;
+                }
+            }
+            // If all parent orderings are the same up to the minimum length,
+            // the shorter array should come first
+            return a.parentsOrderings.length - b.parentsOrderings.length;
+        })
+            .map((x, pageOrdering) => {
+            const { parentsOrderings, ...rest } = x;
+            const instance = {
+                ...rest,
+                controls: JSON.parse(JSON.stringify(x.controls || {})) || {},
+                pageOrdering,
+            };
+            return instance;
+        });
+    });
+    componentInstances = deduplicateByKey(componentInstances, (x) => x.webPageId + x.componentId);
+    return componentInstances;
+}
+export async function getComponentsWithBreakpoints({ selectedComponentIds, components, allInstances, }) {
+    const filteredComponents = components.filter((component) => component.id &&
+        component.insertURL &&
+        selectedComponentIds.has(component.id));
+    if (!filteredComponents.length) {
+        console.warn(`[react export] no components selected with insertUrl`);
+    }
+    // Limit concurrency for breakpoint detection since each instance
+    // calls getParentNodesArray which walks the tree sequentially.
+    const bpSemaphore = new Sema(6);
+    const componentsWithBreakpoints = await Promise.all(filteredComponents.map(async (component) => {
+        try {
+            const instances = allInstances.filter((instance) => {
+                const id = getInstanceComponentId(instance);
+                return id === component.id;
+            });
+            if (!instances.length) {
+                console.warn(`no component instances found for ${component.name}`);
+            }
+            let breakpoints = await Promise.all(instances.map(async (instance) => {
+                const variantId = String(instance.controls?.variant || '');
+                if (!variantId) {
+                    return;
+                }
+                await bpSemaphore.acquire();
+                try {
+                    const parents = (await getParentNodesArray(instance)).reverse();
+                    let [root, breakpointNode] = parents;
+                    if (!isFrameNode(breakpointNode)) {
+                        breakpointNode = root;
+                    }
+                    if (!isFrameNode(breakpointNode)) {
+                        return;
+                    }
+                    const breakpointName = breakpointNode?.name;
+                    let rect = await breakpointNode?.getRect();
+                    return {
+                        variantId,
+                        width: rect?.width || 0,
+                        breakpointName: breakpointName || '',
+                    };
+                }
+                finally {
+                    bpSemaphore.release();
+                }
+            }));
+            const filteredBreakpoints = breakpoints.filter((x) => Boolean(x?.breakpointName && x?.width && x?.variantId));
+            const deduplicatedBreakpoints = deduplicateByKey(filteredBreakpoints, (x) => x.variantId);
+            return { component, breakpoints: deduplicatedBreakpoints };
+        }
+        catch (err) {
+            console.error('error getting component breakpoints', err);
+            return { component };
+        }
+    }));
+    const allBreakpointsCount = componentsWithBreakpoints.reduce((acc, curr) => acc + (curr.breakpoints?.length || 0), 0);
+    console.log(`[react export] found ${allBreakpointsCount} breakpoints in ${componentsWithBreakpoints.length} components`);
+    if (!allBreakpointsCount) {
+        console.warn(`[react export] found 0 breakpoints for ${componentsWithBreakpoints.length} components`);
+    }
+    return componentsWithBreakpoints;
+}
+export async function processReactExportData({ selectedComponentIds, }) {
+    let [publishInfo, components, pages, styles, projectInfo, locales, allInstances, { id: framerUserId }, codeFiles,] = await Promise.all([
+        framer.getPublishInfo().catch((e) => null),
+        framer.getNodesWithType('ComponentNode'),
+        framer.getNodesWithType('WebPageNode'),
+        framer.getColorStyles(),
+        framer.getProjectInfo(),
+        framer.getLocales?.()?.catch((err) => {
+            console.error('Error getting locales', err);
+            return [];
+        }),
+        framer.getNodesWithType('ComponentInstanceNode'),
+        framer.getCurrentUser(),
+        framer.getCodeFiles(),
+    ]);
+    const { id: fullFramerProjectId, name: projectName } = projectInfo;
+    if (!fullFramerProjectId) {
+        throw new Error('No project id found');
+    }
+    // Separate code file IDs from component node IDs
+    const codeFileIds = new Set();
+    const componentNodeIds = new Set();
+    for (const id of selectedComponentIds) {
+        // Check if it's a code file
+        const isCodeFile = codeFiles.some((file) => file.id === id);
+        if (isCodeFile) {
+            codeFileIds.add(id);
+        }
+        else {
+            componentNodeIds.add(id);
+        }
+    }
+    const componentsWithBreakpoints = await getComponentsWithBreakpoints({
+        selectedComponentIds: componentNodeIds,
+        components,
+        allInstances,
+    });
+    let websiteUrl = publishInfo?.staging?.currentPageUrl ||
+        publishInfo?.staging?.url ||
+        publishInfo?.production?.currentPageUrl ||
+        publishInfo?.production?.url;
+    pages = pages.sort((a, b) => (a.path?.length || 0) - (b.path?.length || 0));
+    const indexPage = pages.find((x) => x);
+    const [pageContainer] = (await indexPage.getChildren()) || [];
+    let pageBackgroundColor = '';
+    if (isFrameNode(pageContainer) && pageContainer.backgroundColor) {
+        if (typeof pageContainer.backgroundColor === 'string') {
+            pageBackgroundColor = pageContainer.backgroundColor;
+        }
+        else {
+            pageBackgroundColor = pageContainer.backgroundColor?.light;
+        }
+    }
+    const componentInstances = await getInstancesWithOrderAndDepth({
+        allInstances,
+        webPageIds: new Set(pages.slice(1).map((x) => x.id)),
+        components,
+        projectId: projectInfo.id,
+    }).catch((e) => {
+        console.error('error getting component instances', e);
+        return [];
+    });
+    return {
+        projectId: fullFramerProjectId,
+        projectName,
+        fullFramerProjectId,
+        framerUserId,
+        websiteUrl,
+        pageBackgroundColor,
+        colorStyles: styles.map((x) => {
+            const { dark, light, name, id } = x;
+            return {
+                name,
+                id,
+                projectId: fullFramerProjectId,
+                lightColor: light,
+                darkColor: dark ?? light,
+            };
+        }),
+        components: [
+            // Regular component nodes
+            ...componentsWithBreakpoints.map(({ component }) => {
+                const { name, id, insertURL, componentName, componentIdentifier, } = component;
+                return {
+                    name: name ?? '',
+                    id,
+                    url: insertURL ?? '',
+                    projectId: fullFramerProjectId,
+                    componentIdentifier,
+                    componentType: 'component',
+                };
+            }),
+            // Code file components (only default exports)
+            ...codeFiles
+                .filter((file) => codeFileIds.has(file.id))
+                .filter((file) => file.exports.some((exp) => exp.type === 'component' && exp.isDefaultExport))
+                .map((file) => {
+                const componentExport = file.exports.find((exp) => exp.type === 'component' && exp.isDefaultExport);
+                const name = file.name.replace(/\.(jsx?|tsx?)$/, '');
+                return {
+                    name,
+                    id: file.id,
+                    url: componentExport && 'insertURL' in componentExport
+                        ? componentExport.insertURL
+                        : '',
+                    projectId: fullFramerProjectId,
+                    componentIdentifier: '',
+                    componentType: 'codeFile',
+                };
+            }),
+        ],
+        breakpoints: componentsWithBreakpoints.flatMap(({ breakpoints, component }) => {
+            return (breakpoints?.map((breakpoint) => {
+                const { variantId, width, breakpointName } = breakpoint;
+                return {
+                    variantId: variantId,
+                    width: width || 0,
+                    breakpointName: breakpointName || '',
+                    componentId: component.id,
+                    projectId: fullFramerProjectId,
+                };
+            }) || []);
+        }),
+        pages: pages.map((page) => {
+            const { id, collectionId, path } = page;
+            return {
+                path: path ?? '',
+                webPageId: id,
+                projectId: fullFramerProjectId,
+            };
+        }),
+        locales: locales?.map((locale) => {
+            const { id, name, slug, code } = locale;
+            return {
+                id,
+                name,
+                slug,
+                code,
+                projectId: fullFramerProjectId,
+            };
+        }),
+        componentInstances,
+    };
+}
+//# sourceMappingURL=react-export.js.map
+//# sourceMappingURL=react-export.js.map

package/dist/plugin-mcp-dist/lib/schema.d.ts

@@ -0,0 +1,276 @@
+import { z } from 'zod';
+export declare const codeComponentsResourceUri = "mcp://mcp.unframer.co/prompts/how-to-write-framer-code-files.md";
+export declare const mcpTools: {
+    getProjectXml: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+        outputPrefix: string;
+    };
+    getSelectedNodesXml: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    zoomIntoView: {
+        description: string;
+        input: z.ZodObject<{
+            nodeId: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    getNodeXml: {
+        description: string;
+        input: z.ZodObject<{
+            nodeId: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    updateXmlForNode: {
+        description: string;
+        input: z.ZodObject<{
+            nodeId: z.ZodString;
+            xml: z.ZodString;
+            zoomIntoView: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    manageColorStyle: {
+        description: string;
+        input: z.ZodObject<{
+            type: z.ZodEnum<{
+                create: "create";
+                update: "update";
+            }>;
+            stylePath: z.ZodString;
+            properties: z.ZodObject<{
+                name: z.ZodOptional<z.ZodString>;
+                light: z.ZodOptional<z.ZodString>;
+                dark: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    manageTextStyle: {
+        description: string;
+        input: z.ZodObject<{
+            type: z.ZodEnum<{
+                create: "create";
+                update: "update";
+            }>;
+            stylePath: z.ZodString;
+            properties: z.ZodObject<{
+                tag: z.ZodOptional<z.ZodEnum<{
+                    h1: "h1";
+                    h2: "h2";
+                    h3: "h3";
+                    h4: "h4";
+                    h5: "h5";
+                    h6: "h6";
+                    p: "p";
+                }>>;
+                fontSize: z.ZodOptional<z.ZodString>;
+                lineHeight: z.ZodOptional<z.ZodString>;
+                letterSpacing: z.ZodOptional<z.ZodString>;
+                paragraphSpacing: z.ZodOptional<z.ZodNumber>;
+                transform: z.ZodOptional<z.ZodEnum<{
+                    capitalize: "capitalize";
+                    lowercase: "lowercase";
+                    none: "none";
+                    uppercase: "uppercase";
+                }>>;
+                alignment: z.ZodOptional<z.ZodEnum<{
+                    center: "center";
+                    justify: "justify";
+                    left: "left";
+                    right: "right";
+                }>>;
+                decoration: z.ZodOptional<z.ZodEnum<{
+                    "line-through": "line-through";
+                    none: "none";
+                    underline: "underline";
+                }>>;
+                balance: z.ZodOptional<z.ZodBoolean>;
+                color: z.ZodOptional<z.ZodString>;
+                font: z.ZodOptional<z.ZodString>;
+                boldFont: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                italicFont: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                boldItalicFont: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                decorationColor: z.ZodOptional<z.ZodString>;
+                decorationThickness: z.ZodOptional<z.ZodString>;
+                decorationStyle: z.ZodOptional<z.ZodEnum<{
+                    dashed: "dashed";
+                    dotted: "dotted";
+                    double: "double";
+                    solid: "solid";
+                    wavy: "wavy";
+                }>>;
+                decorationSkipInk: z.ZodOptional<z.ZodEnum<{
+                    all: "all";
+                    auto: "auto";
+                    none: "none";
+                }>>;
+                decorationOffset: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    searchFonts: {
+        description: string;
+        input: z.ZodObject<{
+            query: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    deleteNode: {
+        description: string;
+        input: z.ZodObject<{
+            nodeId: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    duplicateNode: {
+        description: string;
+        input: z.ZodObject<{
+            nodeId: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    exportReactComponents: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    createCodeFile: {
+        description: string;
+        input: z.ZodObject<{
+            name: z.ZodString;
+            content: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    readCodeFile: {
+        description: string;
+        input: z.ZodObject<{
+            codeFileId: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    updateCodeFile: {
+        description: string;
+        input: z.ZodObject<{
+            codeFileId: z.ZodString;
+            content: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    getComponentInsertUrlAndTypes: {
+        description: string;
+        input: z.ZodObject<{
+            id: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodString;
+    };
+    getProjectWebsiteUrl: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    getCMSCollections: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+        outputPrefix: string;
+    };
+    getCMSItems: {
+        description: string;
+        input: z.ZodObject<{
+            collectionId: z.ZodString;
+            skip: z.ZodOptional<z.ZodNumber>;
+            limit: z.ZodOptional<z.ZodNumber>;
+            filter: z.ZodOptional<z.ZodObject<{
+                query: z.ZodOptional<z.ZodString>;
+                fieldName: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    upsertCMSItem: {
+        description: string;
+        input: z.ZodObject<{
+            collectionId: z.ZodString;
+            itemId: z.ZodOptional<z.ZodString>;
+            slug: z.ZodOptional<z.ZodString>;
+            fieldData: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                type: z.ZodString;
+                value: z.ZodUnknown;
+                contentType: z.ZodOptional<z.ZodEnum<{
+                    html: "html";
+                    markdown: "markdown";
+                }>>;
+            }, z.core.$loose>>>;
+            draft: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    deleteCMSItem: {
+        description: string;
+        input: z.ZodObject<{
+            collectionId: z.ZodString;
+            itemId: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    createCMSCollection: {
+        description: string;
+        input: z.ZodObject<{
+            name: z.ZodString;
+            fields: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodObject<{
+                id: z.ZodString;
+                name: z.ZodString;
+                type: z.ZodEnum<{
+                    boolean: "boolean";
+                    collectionReference: "collectionReference";
+                    color: "color";
+                    date: "date";
+                    enum: "enum";
+                    file: "file";
+                    formattedText: "formattedText";
+                    image: "image";
+                    link: "link";
+                    multiCollectionReference: "multiCollectionReference";
+                    number: "number";
+                    string: "string";
+                }>;
+                required: z.ZodOptional<z.ZodBoolean>;
+                allowedFileTypes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                cases: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                    id: z.ZodString;
+                    name: z.ZodString;
+                }, z.core.$strip>>>;
+                collectionId: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>>>>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    createComponent: {
+        description: string;
+        input: z.ZodObject<{
+            name: z.ZodString;
+            nodeIds: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    createPage: {
+        description: string;
+        input: z.ZodObject<{
+            name: z.ZodString;
+            type: z.ZodEnum<{
+                design: "design";
+                web: "web";
+            }>;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+};
+//# sourceMappingURL=schema.d.ts.map