@reframejs/unframer 4.2.0-reframe.0

package/dist/plugin-mcp-dist/lib/upstream-socket.js

@@ -0,0 +1,56 @@
+/**
+ * Helper functions for picking the active upstream plugin socket and matching
+ * in-flight requests to the socket that sent them.
+ */
+const WS_OPEN = 1;
+export function getAttachmentConnectionId(attachment) {
+    return attachment?.connectionId || '';
+}
+export function getAttachmentConnectionOrdinal(attachment) {
+    return attachment?.connectionOrdinal || 0;
+}
+export function getAttachmentConnectedAt(attachment) {
+    return attachment?.connectedAt || 0;
+}
+export function isAttachmentReadyForRequests(attachment) {
+    return attachment?.readyAcked !== false;
+}
+export function isSocketUsable(socket) {
+    if (typeof socket.readyState === 'undefined') {
+        return true;
+    }
+    return socket.readyState === WS_OPEN;
+}
+export function pickActiveUpstreamSocket({ sockets, }) {
+    return sockets
+        .filter((socket) => {
+        return isSocketUsable(socket);
+    })
+        .filter((socket) => {
+        return isAttachmentReadyForRequests(socket.deserializeAttachment());
+    })
+        .sort((left, right) => {
+        const rightOrdinal = getAttachmentConnectionOrdinal(right.deserializeAttachment());
+        const leftOrdinal = getAttachmentConnectionOrdinal(left.deserializeAttachment());
+        if (rightOrdinal !== leftOrdinal) {
+            return rightOrdinal - leftOrdinal;
+        }
+        return (getAttachmentConnectedAt(right.deserializeAttachment()) -
+            getAttachmentConnectedAt(left.deserializeAttachment()));
+    })[0];
+}
+export function matchesPendingRequestSocket({ attachment, pendingRequest, }) {
+    const attachmentConnectionId = getAttachmentConnectionId(attachment);
+    if (attachmentConnectionId && pendingRequest.upstreamConnectionId) {
+        return attachmentConnectionId === pendingRequest.upstreamConnectionId;
+    }
+    const attachmentConnectionOrdinal = getAttachmentConnectionOrdinal(attachment);
+    if (attachmentConnectionOrdinal && pendingRequest.upstreamConnectionOrdinal) {
+        return attachmentConnectionOrdinal === pendingRequest.upstreamConnectionOrdinal;
+    }
+    const attachmentConnectedAt = getAttachmentConnectedAt(attachment);
+    const pendingConnectedAt = pendingRequest.upstreamConnectedAt || 0;
+    return attachmentConnectedAt === pendingConnectedAt;
+}
+//# sourceMappingURL=upstream-socket.js.map
+//# sourceMappingURL=upstream-socket.js.map

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

@@ -0,0 +1,13 @@
+export declare const pluginApiClient: import("spiceflow/client").SpiceflowFetch<import("spiceflow/dist/spiceflow").AnySpiceflow>;
+export declare const noop: () => void;
+export declare function isTruthy(val: any): boolean;
+export declare var Paths: any;
+export declare var RouteIds: any;
+export declare const globalState: {};
+export declare var LocalStorageKeys: any;
+export declare function getMcpPluginData(): {
+    sessionKey: string;
+};
+export declare function withMode(path: any, params: any): string;
+export declare function sleep(ms: any): Promise<unknown>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/plugin-mcp-dist/lib/utils.js

@@ -0,0 +1,57 @@
+import { redirect } from 'react-router';
+import { createSpiceflowFetch } from 'spiceflow/client';
+import { superjsonOnResponse } from 'website/src/lib/superjson-client';
+const PUBLIC_URL = process.env.PUBLIC_URL || 'https://unframer.co';
+export const pluginApiClient = createSpiceflowFetch(PUBLIC_URL, {
+    onResponse: [
+        async (response) => {
+            if (response.status === 401) {
+                console.log('clearing session because api returned 401');
+                localStorage.removeItem(LocalStorageKeys.sessionId);
+                throw redirect(withMode(Paths.login));
+            }
+        },
+        superjsonOnResponse,
+    ],
+    async onRequest() {
+        const { sessionKey } = getMcpPluginData();
+        return {
+            headers: {
+                sessionKey,
+            },
+        };
+    },
+});
+export const noop = () => { };
+export function isTruthy(val) {
+    return Boolean(val);
+}
+export var Paths;
+(function (Paths) {
+    Paths["login"] = "/login";
+    Paths["main"] = "/";
+})(Paths || (Paths = {}));
+export var RouteIds;
+(function (RouteIds) {
+    RouteIds["root"] = "root";
+})(RouteIds || (RouteIds = {}));
+export const globalState = {};
+export var LocalStorageKeys;
+(function (LocalStorageKeys) {
+    LocalStorageKeys["sessionId"] = "framer-mcp-session-id";
+})(LocalStorageKeys || (LocalStorageKeys = {}));
+export function getMcpPluginData() {
+    const sessionKey = localStorage.getItem(LocalStorageKeys.sessionId);
+    return {
+        sessionKey: sessionKey || '',
+    };
+}
+export function withMode(path, params) {
+    const searchParams = new URLSearchParams(params);
+    return `${path}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+}
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/plugin-mcp-dist/lib/websocket-server.d.ts

@@ -0,0 +1,10 @@
+export declare function createWebsocketHandling({ ws, defaultTimeout }: {
+    defaultTimeout?: number | undefined;
+    ws: any;
+}): {
+    send: ({ idempotenceKey, payload, }: {
+        idempotenceKey: any;
+        payload: any;
+    }) => Promise<unknown>;
+};
+//# sourceMappingURL=websocket-server.d.ts.map

package/dist/plugin-mcp-dist/lib/websocket-server.js

@@ -0,0 +1,88 @@
+export function createWebsocketHandling({ ws, defaultTimeout = 1000 * 5, }) {
+    const pendingRequests = new Map();
+    const usedIdempotenceIds = new Set();
+    const send = async ({ idempotenceKey, payload, }) => {
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            throw new Error('WebSocket instance not open.');
+        }
+        const id = crypto.randomUUID();
+        const message = {
+            id,
+            payload,
+        };
+        return new Promise((resolve, reject) => {
+            // If idempotenceKey is specified and already used, return resolved promise immediately
+            if (idempotenceKey && usedIdempotenceIds.has(idempotenceKey)) {
+                console.log(`Idempotence ID ${idempotenceKey} already used, skipping docs payload set payload`);
+                return Promise.resolve(undefined);
+            }
+            const timeout = setTimeout(() => {
+                pendingRequests.delete(id);
+                reject(new Error(`Request ${id} timed out after ${defaultTimeout}ms`));
+            }, defaultTimeout);
+            pendingRequests.set(id, { resolve, reject, timeout });
+            ws.send(JSON.stringify(message));
+            if (idempotenceKey) {
+                usedIdempotenceIds.add(idempotenceKey);
+            }
+        });
+    };
+    function onMessage(event) {
+        let msg;
+        try {
+            // Handle both string and Blob data
+            if (typeof event.data === 'string') {
+                msg = JSON.parse(event.data);
+            }
+            else if (event.data instanceof Blob) {
+                // Skip binary data
+                return;
+            }
+        }
+        catch (err) {
+            // ignore parse errors
+            return;
+        }
+        if (!msg)
+            return;
+        const { id, payload, error } = msg;
+        if (!id)
+            return;
+        const pending = pendingRequests.get(id);
+        if (!pending)
+            return;
+        pendingRequests.delete(id);
+        clearTimeout(pending.timeout);
+        if (error) {
+            pending.reject(new Error(error));
+        }
+        else {
+            pending.resolve(payload?.output ?? null);
+        }
+    }
+    // Attach ws 'message' event handler
+    ws.addEventListener('message', onMessage);
+    const cleanup = async () => {
+        ws.removeEventListener('message', onMessage);
+        send({
+            payload: { type: 'close' },
+        });
+        // Clean up any pending requests
+        for (const [id, pending] of Array.from(pendingRequests)) {
+            clearTimeout(pending.timeout);
+            pending.reject(new Error('RPC client cleanup'));
+        }
+        pendingRequests.clear();
+        usedIdempotenceIds.clear();
+        ws.close();
+    };
+    // Register cleanup on ws close
+    ws.addEventListener('close', () => {
+        cleanup();
+    });
+    return {
+        send,
+    };
+}
+//# sourceMappingURL=websocket-server.js.map
+//# sourceMappingURL=websocket-server.js.map

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

@@ -0,0 +1,10 @@
+export declare function rewriteXmlContentForTests({ xml: xml, newContent }: {
+    newContent: any;
+    xml: any;
+}): string;
+export declare const TEMP_NODE_ID_PREFIX = "_temp_";
+export declare function extractObjectsFromXmlContent(xml: any, options: any): any[];
+export declare function xmlToFramerLayersTree(xml: any): any;
+export declare function framerLayersTreeToXml(tree: any, options?: {}): string;
+export declare function addNodeCount(tree: any): any;
+//# sourceMappingURL=xml.d.ts.map

package/dist/plugin-mcp-dist/lib/xml.js

@@ -0,0 +1,395 @@
+import { DomHandler, Parser, ElementType } from 'htmlparser2';
+import domSerializer from 'dom-serializer';
+import camelCase from 'camelcase';
+export function rewriteXmlContentForTests({ xml: xml, newContent, }) {
+    const handler = new DomHandler((error, dom) => {
+        if (error) {
+            console.error(error);
+        }
+        else {
+            const dfs = (node) => {
+                if (node.type === ElementType.Tag &&
+                    node.attribs &&
+                    node.attribs.nodeId) {
+                    const nodeId = node.attribs.nodeId;
+                    const matchingContent = newContent.find((item) => item.nodeId === nodeId);
+                    if (matchingContent?.newContent) {
+                        node.children.forEach((child) => {
+                            if (child.type === 'text') {
+                                const initialSpace = child.data.match(/^\s+/)?.toString() || '';
+                                const endSpace = child.data.match(/\s+$/)?.toString() || '';
+                                const text = matchingContent.newContent || '';
+                                child.data = initialSpace + text + endSpace;
+                            }
+                        });
+                    }
+                }
+                if (node.children) {
+                    node.children.forEach(dfs);
+                }
+            };
+            dom.forEach(dfs);
+        }
+    });
+    const parser = new Parser(handler, { xmlMode: true });
+    parser.write(xml);
+    parser.end();
+    const serialized = domSerializer(handler.dom, {
+        xmlMode: true,
+        encodeEntities: false,
+        decodeEntities: false,
+    });
+    return serialized;
+}
+function deIndent(str) {
+    if (!str) {
+        return str;
+    }
+    const lines = str.split('\n').filter(Boolean);
+    if (lines.length === 0) {
+        return str;
+    }
+    const minIndent = Math.min(...lines.map((line) => {
+        const match = line.match(/^\s*/);
+        return match ? match[0].length : 0;
+    }));
+    return lines.map((line) => line.slice(minIndent)).join('\n');
+}
+// Constant for temporary node ID prefix
+export const TEMP_NODE_ID_PREFIX = '_temp_';
+function determineNodeType(node, attributes) {
+    // Check if it has direct text content (Text node)
+    if (node.children) {
+        const hasDirectText = node.children.some((child) => child.type === 'text' && child.data.trim());
+        // If it has text content and no other identifying attributes, it's a Text node
+        if (hasDirectText &&
+            !attributes.layout &&
+            !attributes.svg &&
+            !attributes.componentId) {
+            return 'Text';
+        }
+    }
+    // Check for component instance
+    if (attributes.componentId || attributes.insertUrl) {
+        return 'ComponentInstance';
+    }
+    // Check for SVG
+    if (attributes.svg) {
+        return 'SVG';
+    }
+    // Otherwise it's a Frame (including those with layout="stack" or layout="grid")
+    return 'Frame';
+}
+export function extractObjectsFromXmlContent(xml, options) {
+    const results = [];
+    let tempIdCounter = 0;
+    const enableNodeCreation = options?.enableNodeCreation ?? false;
+    const handler = new DomHandler((error, dom) => {
+        if (error) {
+            console.error('error', error);
+        }
+        else {
+            const dfs = (node, lastParentWithId) => {
+                let currentParentId = lastParentWithId;
+                if (node.type === ElementType.Tag) {
+                    let nodeId = node.attribs?.nodeId;
+                    const hasExistingId = !!nodeId;
+                    // Only process nodes that have an ID or when node creation is enabled
+                    if (!hasExistingId && !enableNodeCreation) {
+                        // Skip this node but continue processing children
+                        if (node.children) {
+                            node.children.forEach((child) => dfs(child, lastParentWithId));
+                        }
+                        return;
+                    }
+                    // Assign temporary ID for new nodes when creation is enabled
+                    if (!nodeId && enableNodeCreation) {
+                        nodeId = `${TEMP_NODE_ID_PREFIX}${++tempIdCounter}`;
+                    }
+                    let text = '';
+                    // Only get direct text children, not all descendants
+                    if (node.children) {
+                        node.children.forEach((child) => {
+                            if (child.type === 'text') {
+                                text += child.data;
+                            }
+                        });
+                    }
+                    const attributes = { ...node.attribs };
+                    delete attributes.nodeId;
+                    const extractedNode = {
+                        nodeId: nodeId,
+                        newContent: deIndent(text).trim(),
+                        attributes,
+                    };
+                    // Determine node type for new nodes
+                    if (!hasExistingId && enableNodeCreation) {
+                        extractedNode.nodeType = determineNodeType(node, attributes);
+                    }
+                    // Add parent information if available
+                    if (lastParentWithId) {
+                        extractedNode.parentId = lastParentWithId;
+                    }
+                    // This node becomes the parent for its children
+                    currentParentId = nodeId;
+                    results.push(extractedNode);
+                }
+                if (node.children) {
+                    // Pass the current parent ID (either this node's ID or the last parent with ID)
+                    node.children.forEach((child) => dfs(child, currentParentId));
+                }
+            };
+            dom.forEach((node) => dfs(node));
+            // Group nodes by their parent
+            const nodesByParent = new Map();
+            results.forEach((node) => {
+                const parentId = node.parentId;
+                if (!nodesByParent.has(parentId)) {
+                    nodesByParent.set(parentId, []);
+                }
+                nodesByParent.get(parentId).push(node);
+            });
+            // Calculate siblings for each group
+            nodesByParent.forEach((siblings) => {
+                siblings.forEach((node, index) => {
+                    // Set beforeNodeId if there's a previous sibling
+                    if (index > 0) {
+                        node.beforeNodeId = siblings[index - 1].nodeId;
+                    }
+                    // Set afterNodeId if there's a next sibling
+                    if (index < siblings.length - 1) {
+                        node.afterNodeId = siblings[index + 1].nodeId;
+                    }
+                });
+            });
+        }
+    });
+    const parser = new Parser(handler, { xmlMode: true });
+    parser.write(xml);
+    parser.end();
+    return results;
+}
+export function xmlToFramerLayersTree(xml) {
+    const handler = new DomHandler();
+    const parser = new Parser(handler, { xmlMode: true });
+    parser.write(xml);
+    parser.end();
+    function processNode(node) {
+        if (node.type !== 'tag') {
+            return null;
+        }
+        const result = {
+            name: node.name,
+        };
+        if (node.attribs) {
+            const { nodeId, ...attrs } = node.attribs;
+            if (nodeId) {
+                result.nodeId = nodeId;
+            }
+            if (Object.keys(attrs).length > 0) {
+                result.attributes = attrs;
+            }
+        }
+        if (node.children) {
+            const textNodes = node.children.filter((child) => child.type === 'text');
+            if (textNodes.length > 0) {
+                result.content = textNodes
+                    .map((node) => node.data.trim())
+                    .join('\n')
+                    .trim();
+            }
+            const childElements = node.children.filter((child) => child.type === 'tag');
+            if (childElements.length > 0) {
+                const children = childElements
+                    .map(processNode)
+                    .filter((n) => n !== null);
+                if (children.length > 0) {
+                    result.children = children;
+                }
+            }
+        }
+        return result;
+    }
+    const rootNodes = handler.dom
+        .filter((node) => node.type === 'tag')
+        .map(processNode)
+        .filter((n) => n !== null);
+    return addNodeCount(rootNodes);
+}
+export function framerLayersTreeToXml(tree, options = {}) {
+    const { shouldAddNodeIdAlways = false, indent = '', maxCharacters = 15000, currentDepth = 0, currentCharCount = 0, } = options;
+    let xml = '';
+    let charCount = currentCharCount;
+    const seenComponentIds = new Set();
+    for (const node of tree) {
+        if (!node) {
+            continue;
+        }
+        if (node.name === '') {
+            if (node.content) {
+                const line = `${indent}${escapeXml(node.content)}\n`;
+                xml += line;
+                charCount += line.length;
+            }
+            if (node.children && node.children.length > 0) {
+                const childXml = framerLayersTreeToXml(node.children, {
+                    shouldAddNodeIdAlways,
+                    indent,
+                    maxCharacters,
+                    currentDepth: currentDepth + 1,
+                    currentCharCount: charCount,
+                });
+                xml += childXml;
+                charCount += childXml.length;
+            }
+            continue;
+        }
+        let name = node.name || 'Container';
+        let nodeName = camelCase(name?.replace(/[^a-zA-Z0-9\s_-]+/g, ' ') || 'None', {
+            pascalCase: true,
+        }) || 'Node';
+        let max = 60;
+        if (nodeName.length > max) {
+            const lastUnderscoreIndex = nodeName.indexOf('_', max);
+            if (lastUnderscoreIndex > 0) {
+                nodeName = nodeName.substring(0, lastUnderscoreIndex);
+            }
+            else {
+                nodeName = nodeName.substring(0, max);
+            }
+        }
+        const attributes = [];
+        let shouldAddNodeId = shouldAddNodeIdAlways || !node?.children?.length;
+        if (shouldAddNodeId && node.nodeId) {
+            attributes.push(`nodeId="${node.nodeId}"`);
+        }
+        // Track componentId to avoid duplicate comments
+        const componentId = node.attributes?.componentId;
+        const shouldShowComments = !componentId || !seenComponentIds.has(componentId);
+        if (componentId && shouldShowComments) {
+            seenComponentIds.add(componentId);
+        }
+        let hasComments = false;
+        if (node.attributes) {
+            for (const [key, value] of Object.entries(node.attributes)) {
+                if (value !== undefined && value !== null) {
+                    const comment = node.attrControlsComments?.[key];
+                    // Only show comments if this is the first instance of this componentId
+                    // or if it's not a component-specific attribute comment
+                    const isComponentSpecificComment = comment &&
+                        ![
+                            'componentId',
+                            'inlineTextStyle',
+                            'backgroundImage',
+                            'backgroundColor',
+                        ].includes(key);
+                    if (comment != null &&
+                        comment &&
+                        (shouldShowComments || !isComponentSpecificComment)) {
+                        hasComments = true;
+                        attributes.push(`<!-- ${comment} -->\n${indent}    ${key}="${value}"`);
+                    }
+                    else {
+                        attributes.push(`${key}="${value}"`);
+                    }
+                }
+            }
+        }
+        const attributesString = attributes.length > 0
+            ? hasComments || attributes.length >= 3
+                ? '\n' +
+                    indent +
+                    '    ' +
+                    attributes.join('\n' + indent + '    ') +
+                    '\n' +
+                    indent
+                : ' ' + attributes.join(' ')
+            : '';
+        // Add node comment before the element if present
+        if (node.comment) {
+            xml += `${indent}<!-- ${node.comment} -->\n`;
+        }
+        // Check if this should be a self-closing tag
+        const hasContent = node.content && node.content.trim() !== '';
+        const hasChildren = node.children && node.children.length > 0;
+        const isSelfClosing = !hasContent && !hasChildren && !node.disableSelfClosing;
+        if (isSelfClosing) {
+            const line = `${indent}<${nodeName}${attributesString} />\n`;
+            xml += line;
+            charCount += line.length;
+        }
+        else {
+            const openTag = `${indent}<${nodeName}${attributesString}>\n`;
+            xml += openTag;
+            charCount += openTag.length;
+            if (node.content) {
+                const contentLine = `${indent}  ${escapeXml(node.content)}\n`;
+                xml += contentLine;
+                charCount += contentLine.length;
+            }
+            if (node.children && node.children.length > 0) {
+                // If we're at depth 1 and we've already exceeded the limit, add comment instead of rendering children
+                if (currentDepth === 1 && charCount > maxCharacters) {
+                    const comment = `${indent}  <!-- Call getNodeXml on this node to get more details, character limit was reached -->\n`;
+                    xml += comment;
+                    charCount += comment.length;
+                }
+                else {
+                    // Otherwise render children normally
+                    const childXml = framerLayersTreeToXml(node.children, {
+                        shouldAddNodeIdAlways,
+                        indent: indent + '  ',
+                        maxCharacters,
+                        currentDepth: currentDepth + 1,
+                        currentCharCount: charCount,
+                    });
+                    xml += childXml;
+                    charCount += childXml.length;
+                }
+            }
+            const closeTag = `${indent}</${nodeName}>\n`;
+            xml += closeTag;
+            charCount += closeTag.length;
+        }
+    }
+    return xml;
+}
+function escapeXml(unsafe) {
+    return unsafe.replace(/[<>&'"]/g, (c) => {
+        switch (c) {
+            case '<':
+                return '&lt;';
+            case '>':
+                return '&gt;';
+            case '&':
+                return '&amp;';
+            case "'":
+                return '&apos;';
+            case '"':
+                return '&quot;';
+            default:
+                return c;
+        }
+    });
+}
+export function addNodeCount(tree) {
+    const result = [];
+    if (tree?.length === 0)
+        return result;
+    function countNodes(node) {
+        let count = 1;
+        if (node.children) {
+            for (const child of node.children) {
+                count += countNodes(child);
+            }
+        }
+        node.count = count;
+        return count;
+    }
+    for (const rootNode of tree) {
+        countNodes(rootNode);
+    }
+    return tree;
+}
+//# sourceMappingURL=xml.js.map
+//# sourceMappingURL=xml.js.map