@reframejs/unframer 4.2.0-reframe.0

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

@@ -0,0 +1,2 @@
+export declare const useStore: any;
+//# sourceMappingURL=store.d.ts.map

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

@@ -0,0 +1,10 @@
+import { create } from 'zustand';
+export const useStore = create((set) => ({
+    isConnected: false,
+    isSocketOpen: false,
+    isExpanded: true,
+    isUiHidden: false,
+    error: undefined,
+}));
+//# sourceMappingURL=store.js.map
+//# sourceMappingURL=store.js.map

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

@@ -0,0 +1,6 @@
+export declare const ITEMS_PER_ITERATION = 30;
+export declare function bfsFramerLayersTree(tree: any): any[];
+export declare function mergeCloseChunks(chunks: any, maxSize: any): any;
+export declare function mergeChunksTooSmall(chunks: any, maxSize: any): any;
+export declare function splitTreeInChunks(tree: any, maxChunkTreeSize?: number): any[];
+//# sourceMappingURL=tree-utils.d.ts.map

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

@@ -0,0 +1,141 @@
+import { addNodeCount } from './xml.js';
+export const ITEMS_PER_ITERATION = 30;
+export function bfsFramerLayersTree(tree) {
+    const result = [];
+    const queue = [...tree];
+    while (queue.length > 0) {
+        const node = queue.shift();
+        if (!node)
+            continue;
+        result.push(node);
+        if (node.children) {
+            queue.push(...node.children);
+        }
+    }
+    return result;
+}
+export function mergeCloseChunks(chunks, maxSize) {
+    // If we have 1 or fewer chunks, just return them as-is
+    if (chunks.length <= 1) {
+        return chunks;
+    }
+    const result = [];
+    let currentChunk = chunks[0];
+    // Iterate through chunks starting from the second one
+    for (let i = 1; i < chunks.length; i++) {
+        const nextChunk = chunks[i];
+        const combinedSize = getChunkSize(currentChunk) + getChunkSize(nextChunk);
+        // If combining the chunks would exceed maxSize,
+        // add current chunk to result and start new chunk
+        if (combinedSize > maxSize) {
+            result.push(currentChunk);
+            currentChunk = nextChunk;
+        }
+        else {
+            // Merge the chunks by concatenating their arrays
+            currentChunk = [...currentChunk, ...nextChunk];
+        }
+    }
+    // Don't forget to add the last chunk
+    result.push(currentChunk);
+    return result;
+}
+export function mergeChunksTooSmall(chunks, maxSize) {
+    // If we have 1 or fewer chunks, just return them as-is
+    if (chunks.length <= 1) {
+        return chunks;
+    }
+    const minSize = maxSize / 2;
+    let result = [...chunks];
+    // Keep merging small chunks until no more merges are possible
+    let madeChanges = true;
+    while (madeChanges) {
+        madeChanges = false;
+        // Find first small chunk that can be merged
+        for (let i = 0; i < result.length; i++) {
+            const currentSize = getChunkSize(result[i]);
+            if (currentSize < minSize) {
+                // Get sizes of previous and next chunks if they exist
+                const prevSize = i > 0 ? getChunkSize(result[i - 1]) : Infinity;
+                const nextSize = i < result.length - 1
+                    ? getChunkSize(result[i + 1])
+                    : Infinity;
+                // Determine which neighbor is smaller
+                if (prevSize <= nextSize && i > 0) {
+                    // Merge with previous chunk
+                    const combinedSize = currentSize + prevSize;
+                    if (combinedSize < maxSize) {
+                        result[i - 1] = [...result[i - 1], ...result[i]];
+                        result.splice(i, 1);
+                        madeChanges = true;
+                        break;
+                    }
+                }
+                else if (i < result.length - 1) {
+                    // Merge with next chunk
+                    const combinedSize = currentSize + nextSize;
+                    if (combinedSize < maxSize) {
+                        result[i] = [...result[i], ...result[i + 1]];
+                        result.splice(i + 1, 1);
+                        madeChanges = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}
+// Helper function to calculate total size of a chunk
+function getChunkSize(chunk) {
+    return chunk.reduce((sum, node) => sum + (node.count || 0), 0);
+}
+export function splitTreeInChunks(tree, maxChunkTreeSize = ITEMS_PER_ITERATION) {
+    addNodeCount(tree);
+    const chunks = splitTreeInChunksRecursive(tree, maxChunkTreeSize, []);
+    let prevLength = -1;
+    let currentChunks = chunks;
+    while (currentChunks.length !== prevLength) {
+        prevLength = currentChunks.length;
+        currentChunks = mergeCloseChunks(currentChunks, maxChunkTreeSize);
+    }
+    currentChunks = mergeChunksTooSmall(currentChunks, maxChunkTreeSize * 1.2);
+    return currentChunks;
+}
+function findFirstChildrenLayer(tree) {
+    let currentLayer = tree;
+    let parents = [];
+    while (currentLayer.length === 1 && currentLayer[0].children?.length) {
+        parents.push({ ...currentLayer[0], children: [] });
+        currentLayer = currentLayer[0].children;
+    }
+    return { layer: currentLayer, parents };
+}
+function splitTreeInChunksRecursive(tree, maxChunkTreeSize, initialParents) {
+    let result = [];
+    // Find the first layer with more than one child
+    const { layer: currentLayer, parents } = findFirstChildrenLayer(tree);
+    const allParents = [...initialParents, ...parents];
+    for (const node of currentLayer) {
+        if (node.count <= maxChunkTreeSize) {
+            const chunk = createChunkWithParents(allParents, [node]);
+            result.push(chunk);
+        }
+        else {
+            result.push(...splitTreeInChunksRecursive([node], maxChunkTreeSize, allParents));
+        }
+    }
+    return result;
+}
+function createChunkWithParents(parents, children) {
+    if (parents.length === 0) {
+        return children;
+    }
+    let currentParent = { ...parents[parents.length - 1], children };
+    for (let i = parents.length - 2; i >= 0; i--) {
+        currentParent = { ...parents[i], children: [currentParent] };
+    }
+    return addNodeCount([currentParent]);
+}
+//# sourceMappingURL=tree-utils.js.map
+//# sourceMappingURL=tree-utils.js.map

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

@@ -0,0 +1,46 @@
+/**
+ * Vendored upstream-only tunnel DO for Cloudflare Workers with WebSocket hibernation.
+ *
+ * Extracted from cloudflare-tunnel library — keeps only what McpTunnel uses:
+ * - Upstream WebSocket acceptance with hibernation tags
+ * - Upstream replacement (close old with 4009)
+ * - Ping auto-response (avoids waking DO)
+ * - handleTunnelFetch router
+ * - addCors helper
+ *
+ * Dropped: downstream relay, multiplexer, wildcard subscribers, standalone worker export.
+ */
+/**
+ * Route /_tunnel/* requests to a Tunnel Durable Object.
+ * Use in the worker's fetch handler to add tunnel support.
+ */
+export declare function handleTunnelFetch({ req, doNamespace }: {
+    doNamespace: any;
+    req: any;
+}): any;
+/**
+ * Upstream-only Tunnel Durable Object.
+ *
+ * Accepts upstream WebSocket connections with hibernation. Each upstream is
+ * tagged as `up:${id}` so it can be looked up by id. Only one upstream per id
+ * is allowed — connecting a second closes the first with code 4009.
+ *
+ * Ping messages are auto-responded without waking the DO:
+ * - 'ping' → 'pong'
+ * - '{"type":"ping"}' → '{"type":"pong"}'
+ */
+export declare class Tunnel {
+    ctx: any;
+    env: any;
+    constructor(state: any, env: any);
+    fetch(req: any): Promise<Response>;
+    webSocketMessage(_ws: any, _message: any): Promise<void>;
+    webSocketClose(_ws: any, _code: any, _reason: any, _wasClean: any): Promise<void>;
+    webSocketError(_ws: any, _error: any): Promise<void>;
+    closeUpstreamsForId(id: any, { code, reason }: {
+        code: any;
+        reason: any;
+    }): void;
+}
+export declare const addCors: (r: any) => Response;
+//# sourceMappingURL=tunnel.d.ts.map

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

@@ -0,0 +1,117 @@
+/**
+ * Vendored upstream-only tunnel DO for Cloudflare Workers with WebSocket hibernation.
+ *
+ * Extracted from cloudflare-tunnel library — keeps only what McpTunnel uses:
+ * - Upstream WebSocket acceptance with hibernation tags
+ * - Upstream replacement (close old with 4009)
+ * - Ping auto-response (avoids waking DO)
+ * - handleTunnelFetch router
+ * - addCors helper
+ *
+ * Dropped: downstream relay, multiplexer, wildcard subscribers, standalone worker export.
+ */
+/**
+ * Route /_tunnel/* requests to a Tunnel Durable Object.
+ * Use in the worker's fetch handler to add tunnel support.
+ */
+export function handleTunnelFetch({ req, doNamespace, }) {
+    const url = new URL(req.url);
+    if (!url.pathname.startsWith('/_tunnel/')) {
+        return null;
+    }
+    url.pathname = url.pathname.replace('/_tunnel', '');
+    const ids = url.searchParams.getAll('id');
+    const doName = ids[0] ?? 'default';
+    const doId = doNamespace.idFromName(doName);
+    return doNamespace
+        .get(doId)
+        .fetch(new Request(url.toString(), req))
+        .then(addCors);
+}
+/**
+ * Upstream-only Tunnel Durable Object.
+ *
+ * Accepts upstream WebSocket connections with hibernation. Each upstream is
+ * tagged as `up:${id}` so it can be looked up by id. Only one upstream per id
+ * is allowed — connecting a second closes the first with code 4009.
+ *
+ * Ping messages are auto-responded without waking the DO:
+ * - 'ping' → 'pong'
+ * - '{"type":"ping"}' → '{"type":"pong"}'
+ */
+export class Tunnel {
+    ctx;
+    env;
+    constructor(state, env) {
+        this.ctx = state;
+        this.env = env;
+        // Only one auto-response pair can be active (second call replaces first).
+        // Plugin sends {"type":"ping"} every 5s — must match exactly.
+        this.ctx.setWebSocketAutoResponse(new WebSocketRequestResponsePair('{"type":"ping"}', '{"type":"pong"}'));
+    }
+    async fetch(req) {
+        if (req.headers.get('Upgrade') !== 'websocket') {
+            return addCors(new Response('Upgrade required', { status: 400 }));
+        }
+        const url = new URL(req.url);
+        const ids = url.searchParams.getAll('id');
+        const id = ids[0];
+        if (!url.pathname.startsWith('/upstream') || !id) {
+            return addCors(new Response('Only upstream connections with id are supported', { status: 400 }));
+        }
+        this.closeUpstreamsForId(id, { code: 4009, reason: 'Upstream already connected' });
+        const connectionOrdinal = this.ctx
+            .getWebSockets(`up:${id}`)
+            .map((socket) => {
+            const attachment = socket.deserializeAttachment();
+            return attachment?.connectionOrdinal || 0;
+        })
+            .reduce((maxOrdinal, ordinal) => {
+            return Math.max(maxOrdinal, ordinal);
+        }, 0) + 1;
+        const pair = new WebSocketPair();
+        const [client, server] = Object.values(pair);
+        this.ctx.acceptWebSocket(server, [`up:${id}`]);
+        server.serializeAttachment({
+            role: 'up',
+            ids: [id],
+            connectionId: crypto.randomUUID(),
+            connectionOrdinal,
+            connectedAt: Date.now(),
+            readyAcked: false,
+        });
+        return addCors(new Response(null, { status: 101, webSocket: client }));
+    }
+    async webSocketMessage(_ws, _message) {
+        // No relay — McpTunnel overrides this entirely
+    }
+    async webSocketClose(_ws, _code, _reason, _wasClean) {
+        // No downstream notification — McpTunnel overrides this
+    }
+    async webSocketError(_ws, _error) {
+        // No downstream notification — McpTunnel overrides this
+    }
+    closeUpstreamsForId(id, { code, reason }) {
+        const ups = this.ctx.getWebSockets(`up:${id}`);
+        for (const up of ups) {
+            try {
+                up.close(code, reason);
+            }
+            catch { }
+        }
+    }
+}
+export const addCors = (r) => {
+    const newHeaders = new Headers(r.headers);
+    newHeaders.set('Access-Control-Allow-Origin', '*');
+    newHeaders.set('Access-Control-Allow-Headers', '*');
+    newHeaders.set('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+    return new Response(r.body, {
+        status: r.status,
+        statusText: r.statusText,
+        headers: newHeaders,
+        webSocket: r.webSocket,
+    });
+};
+//# sourceMappingURL=tunnel.js.map
+//# sourceMappingURL=tunnel.js.map

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

@@ -0,0 +1,110 @@
+import { z } from 'zod';
+export declare const mcpTools: {
+    getProjectXml: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    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;
+    };
+    getProjectColorStyles: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+    };
+    getProjectTextStyles: {
+        description: string;
+        input: z.ZodObject<{}, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    updateXmlForNode: {
+        description: string;
+        input: z.ZodObject<{
+            nodeId: z.ZodString;
+            xml: z.ZodString;
+        }, z.core.$strip>;
+        output: z.ZodAny;
+    };
+    updateColorStyle: {
+        description: string;
+        input: z.ZodObject<{
+            stylePath: z.ZodString;
+            updates: 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;
+    };
+    updateTextStyle: {
+        description: string;
+        input: z.ZodObject<{
+            stylePath: z.ZodString;
+            updates: z.ZodObject<{
+                name: z.ZodOptional<z.ZodString>;
+                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>;
+            }, 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;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,188 @@
+import { z } from 'zod';
+import dedent from 'string-dedent';
+/* ──────────────────────────── Schemas ─────────────────────────── */
+const NodeId = z.string().min(1);
+const Role = z.enum(['background', 'text', 'border']);
+/* ──────────────────────────── Tool Definitions ─────────────────────────── */
+export const mcpTools = {
+    getProjectXml: {
+        description: dedent `
+        Gets the project pages and components XML, with information of the currently focused page or component.
+
+        The referenced nodeIds can be used with getNodeXml to get the XML of a specific page or component.
+
+        `,
+        input: z.object({}),
+        output: z.any(),
+    },
+    getSelectedNodesXml: {
+        description: 'Gets the currently selected nodes as xml',
+        input: z.object({}),
+        output: z.any(),
+    },
+    zoomIntoView: {
+        description: 'Zooms the canvas to center on the given node ID. It will navigate to the right page or component first.',
+        input: z.object({
+            nodeId: NodeId.describe('The ID of the node to zoom into view'),
+        }),
+        output: z.any(),
+    },
+    getNodeXml: {
+        description: 'Get a specific Framer node as XML. You first need to get a node id via getProjectXml or call getSelectedNodesXml instead',
+        input: z.object({
+            nodeId: NodeId.describe('The ID of the node to get as XML'),
+        }),
+        output: z.any(),
+    },
+    getProjectColorStyles: {
+        description: 'Gets all project-level color styles',
+        input: z.object({}),
+    },
+    getProjectTextStyles: {
+        description: 'Gets all project-level text styles',
+        input: z.object({}),
+        output: z.any(),
+    },
+    updateXmlForNode: {
+        description: dedent `
+              Update the XML for a specific node using its nodeId and passing a new XML string. It can be used to update nodes text or attributes.
+
+              You can pass a partial a XML string, there is no need to include the full XML structure, missing nodes will not be updated. You can also omit attributes, omitted attributes will not be updated and will be ignored.
+
+              You can use this tool to
+              - Update text for one or multiple text nodes
+              - Update attributes of existing nodes
+
+              This tool cannot duplicate or delete nodes.
+
+              `,
+        input: z.object({
+            nodeId: NodeId.describe('The ID of the node to update'),
+            xml: z
+                .string()
+                .min(1)
+                .describe('XML string containing the updates. Can include multiple nodes with their nodeId attributes'),
+        }),
+        output: z.any(),
+    },
+    updateColorStyle: {
+        description: 'Updates a color style by its path. Can modify the name, light color, and dark color.',
+        input: z.object({
+            stylePath: z
+                .string()
+                .describe('The path of the color style to update. Must start with /'),
+            updates: z
+                .object({
+                name: z
+                    .string()
+                    .optional()
+                    .describe('New name for the color style'),
+                light: z
+                    .string()
+                    .optional()
+                    .describe('Light theme color in any CSS color format (e.g., "rgb(255, 0, 0)", "#FF0000", "red")'),
+                dark: z
+                    .string()
+                    .nullable()
+                    .optional()
+                    .describe('Dark theme color in any CSS color format, or null to remove dark variant'),
+            })
+                .describe('Properties to update on the color style'),
+        }),
+        output: z.any(),
+    },
+    updateTextStyle: {
+        description: 'Updates a text style by its path. Can modify various typography properties.',
+        input: z.object({
+            stylePath: z
+                .string()
+                .describe('The path of the text style to update. Must start with /'),
+            updates: z
+                .object({
+                name: z
+                    .string()
+                    .optional()
+                    .describe('New name for the text style'),
+                fontSize: z
+                    .string()
+                    .optional()
+                    .describe('Font size with units (e.g., "16px", "1.5rem")'),
+                lineHeight: z
+                    .string()
+                    .optional()
+                    .describe('Line height with units (e.g., "24px", "1.5em", "150%")'),
+                letterSpacing: z
+                    .string()
+                    .optional()
+                    .describe('Letter spacing with units (e.g., "0px", "0.05em")'),
+                paragraphSpacing: z
+                    .number()
+                    .optional()
+                    .describe('Space between paragraphs in pixels'),
+                transform: z
+                    .enum(['none', 'uppercase', 'lowercase', 'capitalize'])
+                    .optional()
+                    .describe('Text transformation'),
+                alignment: z
+                    .enum(['left', 'center', 'right', 'justify'])
+                    .optional()
+                    .describe('Text alignment'),
+                decoration: z
+                    .enum(['none', 'underline', 'line-through'])
+                    .optional()
+                    .describe('Text decoration'),
+                balance: z
+                    .boolean()
+                    .optional()
+                    .describe('Enable balanced text wrapping for better legibility'),
+            })
+                .describe('Properties to update on the text style'),
+        }),
+        output: z.any(),
+    },
+    searchFonts: {
+        description: dedent `
+            Search for fonts by selector substring. Returns max 20 results. Use specific search terms for better results.
+
+            IMPORTANT: The returned 'selector' field is what you use in XML font attributes:
+            <Text font="GF;Inter-600">Bold text</Text>
+
+            NOTE: You can only apply a font attribute to text nodes that do NOT have an inlineTextStyle.
+            If a text node has inlineTextStyle="/Heading xl", you must remove it before applying a custom font.
+            Text nodes can use EITHER inlineTextStyle (project text style) OR font (custom font), not both.
+        `,
+        input: z.object({
+            query: z
+                .string()
+                .min(1)
+                .describe('Search query to match against font selector (e.g., "Inter", "bold", "italic")'),
+        }),
+        output: z.any(),
+    },
+    deleteNode: {
+        description: dedent `
+            Deletes a Framer node, removing it from the page or component. This permanently removes the node and all its children.
+
+            IMPORTANT: This action cannot be undone. Use with caution.
+            Cannot delete certain protected nodes like the root frame of a component or page.
+        `,
+        input: z.object({
+            nodeId: NodeId.describe('The ID of the node to delete'),
+        }),
+        output: z.any(),
+    },
+    duplicateNode: {
+        description: dedent `
+            Duplicate a node in the Framer project. Creates an exact copy of the node and all its children.
+
+            The duplicated node will be placed as a sibling of the original node, slightly offset if it's a visual node.
+            Returns the ID of the newly created duplicate node.
+        `,
+        input: z.object({
+            nodeId: NodeId.describe('The ID of the node to duplicate'),
+        }),
+        output: z.any(),
+    },
+};
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/plugin-mcp-dist/lib/upstream-socket.d.ts

@@ -0,0 +1,13 @@
+export declare function getAttachmentConnectionId(attachment: any): any;
+export declare function getAttachmentConnectionOrdinal(attachment: any): any;
+export declare function getAttachmentConnectedAt(attachment: any): any;
+export declare function isAttachmentReadyForRequests(attachment: any): boolean;
+export declare function isSocketUsable(socket: any): boolean;
+export declare function pickActiveUpstreamSocket({ sockets }: {
+    sockets: any;
+}): any;
+export declare function matchesPendingRequestSocket({ attachment, pendingRequest }: {
+    attachment: any;
+    pendingRequest: any;
+}): boolean;
+//# sourceMappingURL=upstream-socket.d.ts.map