flowspec-mcp 4.1.0 → 4.2.1

package/dist/db.js

@@ -13,6 +13,89 @@ if (MODE === 'cloud') {
             'Find your User ID at: https://flowspec.app/account (under "MCP Configuration").');
     sql = neon(DATABASE_URL);
 }
+// ─── Helper: reconstruct canvas_state from normalized rows ──────────
+function buildCanvasState(nodes, edges, screens, regions, regionElements) {
+    const canvasNodes = nodes.map(n => ({
+        id: n.id,
+        type: n.type,
+        position: { x: n.position_x, y: n.position_y },
+        data: { ...n.data, label: n.label ?? n.data.label }
+    }));
+    const canvasEdges = edges.map(e => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        type: e.type,
+        data: e.data
+    }));
+    const canvasScreens = screens.map(s => {
+        const screenRegions = regions
+            .filter(r => r.screen_id === s.id)
+            .map(r => {
+            const elementIds = regionElements
+                .filter(re => re.region_id === r.id)
+                .sort((a, b) => a.position_order - b.position_order)
+                .map(re => re.node_id);
+            return {
+                id: r.id,
+                label: r.label ?? undefined,
+                position: { x: r.position_x, y: r.position_y },
+                size: { width: r.size_width, height: r.size_height },
+                elementIds,
+                componentNodeId: r.component_node_id ?? undefined
+            };
+        });
+        return {
+            id: s.id,
+            name: s.name,
+            imageUrl: s.image_url,
+            imageWidth: s.image_width,
+            imageHeight: s.image_height,
+            imageFilename: s.image_filename ?? undefined,
+            regions: screenRegions
+        };
+    });
+    return {
+        nodes: canvasNodes,
+        edges: canvasEdges,
+        screens: canvasScreens.length > 0 ? canvasScreens : undefined
+    };
+}
+// ─── Helper: fetch full project from normalized tables (cloud) ──────
+async function getProjectFromNormalized(projectId) {
+    const projectRows = await sql `
+    SELECT id, name, thumbnail_url, user_id, is_public, created_at, updated_at
+    FROM projects
+    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+  `;
+    if (projectRows.length === 0)
+        return null;
+    const meta = projectRows[0];
+    const [nodesRaw, edgesRaw, screensRaw, regionsRaw, regionElementsRaw] = await Promise.all([
+        sql `SELECT id, project_id, type, position_x, position_y, label, data FROM nodes WHERE project_id = ${projectId}`,
+        sql `SELECT id, project_id, source, target, type, data FROM edges WHERE project_id = ${projectId}`,
+        sql `SELECT id, project_id, name, image_url, local_image_path, image_filename, image_width, image_height FROM screens WHERE project_id = ${projectId}`,
+        sql `SELECT id, screen_id, project_id, label, position_x, position_y, size_width, size_height, component_node_id FROM screen_regions WHERE project_id = ${projectId}`,
+        sql `
+      SELECT re.region_id, re.node_id, re.position_order
+      FROM region_elements re
+      INNER JOIN screen_regions sr ON re.region_id = sr.id
+      WHERE sr.project_id = ${projectId}
+      ORDER BY re.region_id, re.position_order
+    `
+    ]);
+    const canvas_state = buildCanvasState(nodesRaw, edgesRaw, screensRaw, regionsRaw, regionElementsRaw);
+    return {
+        id: meta.id,
+        name: meta.name,
+        canvas_state,
+        thumbnail_url: meta.thumbnail_url ?? null,
+        user_id: meta.user_id,
+        is_public: meta.is_public,
+        created_at: meta.created_at,
+        updated_at: meta.updated_at
+    };
+}
 // ─── Local mode (HTTP to desktop server) ───────────────────────────
 async function fetchLocal(path, options) {
     const token = getLocalAuthToken();
@@ -48,16 +131,10 @@ export async function getProject(projectId) {
             return null;
         return res.json();
     }
-    const rows = await sql `
-    SELECT id, name, canvas_state, thumbnail_url, user_id, is_public, created_at, updated_at
-    FROM projects
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
-  `;
-    return rows[0] ?? null;
+    return getProjectFromNormalized(projectId);
 }
 export async function searchNodes(query, nodeType) {
     if (MODE === 'local') {
-        // In local mode, fetch all projects and search client-side (same logic as cloud)
         const res = await fetchLocal('/api/projects');
         const summaries = await res.json();
         const results = [];
@@ -87,36 +164,27 @@ export async function searchNodes(query, nodeType) {
         }
         return results;
     }
+    // Cloud mode: indexed query on normalized nodes table
+    const typeFilter = nodeType ? nodeType : null;
     const rows = await sql `
-    SELECT id, name, canvas_state
-    FROM projects
-    WHERE user_id = ${FLOWSPEC_USER_ID}
+    SELECT n.id AS node_id, n.type AS node_type, n.label,
+           p.id AS project_id, p.name AS project_name
+    FROM nodes n
+    INNER JOIN projects p ON n.project_id = p.id
+    WHERE p.user_id = ${FLOWSPEC_USER_ID}
+      AND n.type != 'image'
+      AND n.label ILIKE ${'%' + query + '%'}
+      AND (${typeFilter}::text IS NULL OR n.type = ${typeFilter})
   `;
-    const results = [];
-    const lowerQuery = query.toLowerCase();
-    for (const row of rows) {
-        const project = row;
-        const nodes = project.canvas_state?.nodes ?? [];
-        for (const node of nodes) {
-            if (node.type === 'image')
-                continue;
-            if (nodeType && node.type !== nodeType)
-                continue;
-            const label = node.data?.label ?? '';
-            if (label.toLowerCase().includes(lowerQuery)) {
-                results.push({
-                    projectId: project.id,
-                    projectName: project.name,
-                    nodeId: node.id,
-                    nodeType: node.type,
-                    label,
-                });
-            }
-        }
-    }
-    return results;
+    return rows.map(row => ({
+        projectId: row.project_id,
+        projectName: row.project_name,
+        nodeId: row.node_id,
+        nodeType: row.node_type,
+        label: row.label
+    }));
 }
-// ─── Write operations (local mode only for now) ────────────────────
+// ─── Write operations ───────────────────────────────────────────────
 export async function createProjectViaApi(name, canvasState) {
     if (MODE === 'local') {
         const res = await fetchLocal('/api/projects', {
@@ -127,13 +195,36 @@ export async function createProjectViaApi(name, canvasState) {
             throw new Error(`Failed to create project: ${res.status}`);
         return res.json();
     }
-    // Cloud mode: direct SQL insert
-    const rows = await sql `
-    INSERT INTO projects (name, canvas_state, user_id)
-    VALUES (${name}, ${JSON.stringify(canvasState ?? { nodes: [], edges: [] })}, ${FLOWSPEC_USER_ID})
-    RETURNING id, name, canvas_state, thumbnail_url, created_at, updated_at
+    // Cloud mode: insert project metadata, then decompose canvas_state into normalized tables
+    const projectId = randomUUID();
+    await sql `
+    INSERT INTO projects (id, name, user_id, created_at, updated_at)
+    VALUES (${projectId}, ${name}, ${FLOWSPEC_USER_ID}, NOW(), NOW())
   `;
-    return rows[0];
+    // If canvas_state provided, decompose into normalized tables
+    const cs = (canvasState ?? { nodes: [], edges: [] });
+    if (cs.nodes && cs.nodes.length > 0) {
+        for (const node of cs.nodes) {
+            const nodeId = node.id ?? randomUUID();
+            await sql `
+        INSERT INTO nodes (id, project_id, type, position_x, position_y, label, data, created_at, updated_at)
+        VALUES (${nodeId}, ${projectId}, ${node.type ?? 'datapoint'}, ${node.position?.x ?? 0}, ${node.position?.y ?? 0},
+                ${node.data?.label ?? null}, ${JSON.stringify(node.data ?? {})}::jsonb, NOW(), NOW())
+      `;
+        }
+    }
+    if (cs.edges && cs.edges.length > 0) {
+        for (const edge of cs.edges) {
+            const edgeId = edge.id ?? randomUUID();
+            await sql `
+        INSERT INTO edges (id, project_id, source, target, type, data, created_at, updated_at)
+        VALUES (${edgeId}, ${projectId}, ${edge.source}, ${edge.target},
+                ${edge.data?.edgeType ?? edge.type ?? 'flows-to'}, ${JSON.stringify(edge.data ?? {})}::jsonb, NOW(), NOW())
+      `;
+        }
+    }
+    const project = await getProjectFromNormalized(projectId);
+    return project;
 }
 export async function updateProjectViaApi(projectId, updates) {
     if (MODE === 'local') {
@@ -145,17 +236,75 @@ export async function updateProjectViaApi(projectId, updates) {
             return null;
         return res.json();
     }
-    const name = updates.name;
-    const canvasState = updates.canvas_state;
-    const rows = await sql `
-    UPDATE projects
-    SET name = COALESCE(${name ?? null}, name),
-        canvas_state = COALESCE(${canvasState ? JSON.stringify(canvasState) : null}::jsonb, canvas_state),
-        updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
-    RETURNING id, name, canvas_state, thumbnail_url, created_at, updated_at
-  `;
-    return rows[0] ?? null;
+    // Cloud mode: update name if provided
+    if (updates.name) {
+        await sql `
+      UPDATE projects SET name = ${updates.name}, updated_at = NOW()
+      WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    `;
+    }
+    // If canvas_state provided, replace all entities
+    if (updates.canvas_state) {
+        const cs = updates.canvas_state;
+        // Delete existing entities (cascade handles region_elements)
+        await sql `DELETE FROM nodes WHERE project_id = ${projectId}`;
+        await sql `DELETE FROM edges WHERE project_id = ${projectId}`;
+        await sql `DELETE FROM screens WHERE project_id = ${projectId}`;
+        // Re-insert nodes
+        if (cs.nodes) {
+            for (const node of cs.nodes) {
+                const nodeId = node.id ?? randomUUID();
+                await sql `
+          INSERT INTO nodes (id, project_id, type, position_x, position_y, label, data, created_at, updated_at)
+          VALUES (${nodeId}, ${projectId}, ${node.type ?? 'datapoint'}, ${node.position?.x ?? 0}, ${node.position?.y ?? 0},
+                  ${node.data?.label ?? null}, ${JSON.stringify(node.data ?? {})}::jsonb, NOW(), NOW())
+        `;
+            }
+        }
+        // Re-insert edges
+        if (cs.edges) {
+            for (const edge of cs.edges) {
+                const edgeId = edge.id ?? randomUUID();
+                await sql `
+          INSERT INTO edges (id, project_id, source, target, type, data, created_at, updated_at)
+          VALUES (${edgeId}, ${projectId}, ${edge.source}, ${edge.target},
+                  ${edge.data?.edgeType ?? edge.type ?? 'flows-to'}, ${JSON.stringify(edge.data ?? {})}::jsonb, NOW(), NOW())
+        `;
+            }
+        }
+        // Re-insert screens + regions + region_elements
+        if (cs.screens) {
+            for (const screen of cs.screens) {
+                const screenId = screen.id ?? randomUUID();
+                await sql `
+          INSERT INTO screens (id, project_id, name, image_url, image_filename, image_width, image_height, created_at, updated_at)
+          VALUES (${screenId}, ${projectId}, ${screen.name}, ${screen.imageUrl ?? ''}, ${screen.imageFilename ?? null},
+                  ${screen.imageWidth ?? 0}, ${screen.imageHeight ?? 0}, NOW(), NOW())
+        `;
+                if (screen.regions) {
+                    for (const region of screen.regions) {
+                        const regionId = region.id ?? randomUUID();
+                        await sql `
+              INSERT INTO screen_regions (id, screen_id, project_id, label, position_x, position_y, size_width, size_height, component_node_id, created_at, updated_at)
+              VALUES (${regionId}, ${screenId}, ${projectId}, ${region.label ?? null},
+                      ${region.position?.x ?? 0}, ${region.position?.y ?? 0},
+                      ${region.size?.width ?? 0}, ${region.size?.height ?? 0},
+                      ${region.componentNodeId ?? null}, NOW(), NOW())
+            `;
+                        if (region.elementIds) {
+                            for (let i = 0; i < region.elementIds.length; i++) {
+                                await sql `
+                  INSERT INTO region_elements (region_id, node_id, position_order, created_at)
+                  VALUES (${regionId}, ${region.elementIds[i]}, ${i}, NOW())
+                `;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return getProjectFromNormalized(projectId);
 }
 export async function deleteProjectViaApi(projectId) {
     if (MODE === 'local') {
@@ -179,19 +328,18 @@ export async function createNodeViaApi(projectId, node) {
             return null;
         return res.json();
     }
-    // Cloud mode: read-modify-write on canvas_state
-    const project = await getProject(projectId);
-    if (!project)
+    // Verify project ownership
+    const check = await sql `SELECT id FROM projects WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}`;
+    if (check.length === 0)
         return null;
     const nodeId = randomUUID();
-    const newNode = { id: nodeId, ...node };
-    project.canvas_state.nodes.push(newNode);
+    const label = node.data.label ?? null;
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    INSERT INTO nodes (id, project_id, type, position_x, position_y, label, data, created_at, updated_at)
+    VALUES (${nodeId}, ${projectId}, ${node.type}, ${node.position.x}, ${node.position.y},
+            ${label}, ${JSON.stringify(node.data)}::jsonb, NOW(), NOW())
   `;
-    return newNode;
+    return { id: nodeId, type: node.type, position: node.position, data: node.data };
 }
 export async function updateNodeViaApi(projectId, nodeId, updates) {
     if (MODE === 'local') {
@@ -203,41 +351,47 @@ export async function updateNodeViaApi(projectId, nodeId, updates) {
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project)
-        return null;
-    const idx = project.canvas_state.nodes.findIndex((n) => n.id === nodeId);
-    if (idx === -1)
+    // Fetch current node
+    const nodeRows = await sql `
+    SELECT id, type, position_x, position_y, label, data
+    FROM nodes WHERE id = ${nodeId} AND project_id = ${projectId}
+  `;
+    if (nodeRows.length === 0)
         return null;
-    const existing = project.canvas_state.nodes[idx];
-    const updated = { ...existing, ...updates, id: nodeId, data: { ...existing.data, ...(updates.data ?? {}) } };
-    project.canvas_state.nodes[idx] = updated;
+    const existing = nodeRows[0];
+    const existingData = existing.data;
+    const updatedData = updates.data
+        ? { ...existingData, ...updates.data }
+        : existingData;
+    const position = updates.position;
+    const label = updatedData.label ?? existing.label;
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    UPDATE nodes
+    SET position_x = COALESCE(${position?.x ?? null}, position_x),
+        position_y = COALESCE(${position?.y ?? null}, position_y),
+        label = ${label},
+        data = ${JSON.stringify(updatedData)}::jsonb,
+        updated_at = NOW()
+    WHERE id = ${nodeId} AND project_id = ${projectId}
   `;
-    return updated;
+    return {
+        id: nodeId,
+        type: updates.type ?? existing.type,
+        position: position ?? { x: existing.position_x, y: existing.position_y },
+        data: updatedData
+    };
 }
 export async function deleteNodeViaApi(projectId, nodeId) {
     if (MODE === 'local') {
         const res = await fetchLocal(`/api/projects/${projectId}/nodes/${nodeId}`, { method: 'DELETE' });
         return res.ok;
     }
-    const project = await getProject(projectId);
-    if (!project)
-        return false;
-    const idx = project.canvas_state.nodes.findIndex((n) => n.id === nodeId);
-    if (idx === -1)
-        return false;
-    project.canvas_state.nodes.splice(idx, 1);
-    project.canvas_state.edges = project.canvas_state.edges.filter((e) => e.source !== nodeId && e.target !== nodeId);
-    await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    // Edges cascade-delete via FK, so just delete the node
+    const rows = await sql `
+    DELETE FROM nodes WHERE id = ${nodeId} AND project_id = ${projectId}
+    RETURNING id
   `;
-    return true;
+    return rows.length > 0;
 }
 export async function createEdgeViaApi(projectId, edge) {
     if (MODE === 'local') {
@@ -249,37 +403,29 @@ export async function createEdgeViaApi(projectId, edge) {
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project)
+    // Verify project ownership
+    const check = await sql `SELECT id FROM projects WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}`;
+    if (check.length === 0)
         return null;
     const edgeId = randomUUID();
-    const newEdge = { id: edgeId, source: edge.source, target: edge.target, type: edge.type ?? 'typed', data: edge.data ?? {} };
-    project.canvas_state.edges.push(newEdge);
+    const edgeType = edge.data?.edgeType ?? edge.type ?? 'flows-to';
+    const data = edge.data ?? {};
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    INSERT INTO edges (id, project_id, source, target, type, data, created_at, updated_at)
+    VALUES (${edgeId}, ${projectId}, ${edge.source}, ${edge.target}, ${edgeType}, ${JSON.stringify(data)}::jsonb, NOW(), NOW())
   `;
-    return newEdge;
+    return { id: edgeId, source: edge.source, target: edge.target, type: edgeType, data };
 }
 export async function deleteEdgeViaApi(projectId, edgeId) {
     if (MODE === 'local') {
         const res = await fetchLocal(`/api/projects/${projectId}/edges/${edgeId}`, { method: 'DELETE' });
         return res.ok;
     }
-    const project = await getProject(projectId);
-    if (!project)
-        return false;
-    const idx = project.canvas_state.edges.findIndex((e) => e.id === edgeId);
-    if (idx === -1)
-        return false;
-    project.canvas_state.edges.splice(idx, 1);
-    await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    const rows = await sql `
+    DELETE FROM edges WHERE id = ${edgeId} AND project_id = ${projectId}
+    RETURNING id
   `;
-    return true;
+    return rows.length > 0;
 }
 // ─── v3.0 API functions ────────────────────────────────────────────
 export async function cloneProjectViaApi(projectId) {
@@ -290,15 +436,12 @@ export async function cloneProjectViaApi(projectId) {
         const data = await res.json();
         return data.id;
     }
-    const project = await getProject(projectId);
+    const project = await getProjectFromNormalized(projectId);
     if (!project)
         return null;
-    const rows = await sql `
-    INSERT INTO projects (name, canvas_state, user_id)
-    VALUES (${project.name + ' (Copy)'}, ${JSON.stringify(project.canvas_state)}, ${FLOWSPEC_USER_ID})
-    RETURNING id
-  `;
-    return rows[0].id;
+    // Create new project with cloned canvas_state
+    const newProject = await createProjectViaApi(project.name + ' (Copy)', project.canvas_state);
+    return newProject.id;
 }
 export async function uploadImageViaApi(base64Data, filename, contentType) {
     if (MODE !== 'local') {
@@ -322,27 +465,15 @@ export async function createScreenViaApi(projectId, name, imageUrl, imageWidth,
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project)
+    // Verify project ownership
+    const check = await sql `SELECT id FROM projects WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}`;
+    if (check.length === 0)
         return null;
     const screenId = randomUUID();
-    const newScreen = {
-        id: screenId,
-        name,
-        imageUrl: imageUrl ?? null,
-        imageWidth: imageWidth ?? null,
-        imageHeight: imageHeight ?? null,
-        imageFilename: imageFilename ?? null,
-        regions: [],
-    };
-    if (!project.canvas_state.screens) {
-        project.canvas_state.screens = [];
-    }
-    project.canvas_state.screens.push(newScreen);
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    INSERT INTO screens (id, project_id, name, image_url, image_filename, image_width, image_height, created_at, updated_at)
+    VALUES (${screenId}, ${projectId}, ${name}, ${imageUrl ?? ''}, ${imageFilename ?? null},
+            ${imageWidth ?? 0}, ${imageHeight ?? 0}, NOW(), NOW())
   `;
     return { id: screenId, name };
 }
@@ -356,38 +487,35 @@ export async function updateScreenViaApi(projectId, screenId, updates) {
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project || !project.canvas_state.screens)
-        return null;
-    const screen = project.canvas_state.screens.find((s) => s.id === screenId);
-    if (!screen)
+    // Verify screen exists in project
+    const screenRows = await sql `
+    SELECT id, name FROM screens WHERE id = ${screenId} AND project_id = ${projectId}
+  `;
+    if (screenRows.length === 0)
         return null;
-    Object.assign(screen, updates);
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    UPDATE screens
+    SET name = COALESCE(${updates.name ?? null}, name),
+        image_url = COALESCE(${updates.imageUrl ?? null}, image_url),
+        image_width = COALESCE(${updates.imageWidth ?? null}, image_width),
+        image_height = COALESCE(${updates.imageHeight ?? null}, image_height),
+        updated_at = NOW()
+    WHERE id = ${screenId} AND project_id = ${projectId}
   `;
-    return { id: screenId, name: screen.name };
+    const updatedName = updates.name ?? screenRows[0].name;
+    return { id: screenId, name: updatedName };
 }
 export async function deleteScreenViaApi(projectId, screenId) {
     if (MODE === 'local') {
         const res = await fetchLocal(`/api/projects/${projectId}/screens/${screenId}`, { method: 'DELETE' });
         return res.ok;
     }
-    const project = await getProject(projectId);
-    if (!project || !project.canvas_state.screens)
-        return false;
-    const idx = project.canvas_state.screens.findIndex((s) => s.id === screenId);
-    if (idx === -1)
-        return false;
-    project.canvas_state.screens.splice(idx, 1);
-    await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    // Cascade deletes regions and region_elements via FK
+    const rows = await sql `
+    DELETE FROM screens WHERE id = ${screenId} AND project_id = ${projectId}
+    RETURNING id
   `;
-    return true;
+    return rows.length > 0;
 }
 export async function addRegionViaApi(projectId, screenId, region) {
     if (MODE === 'local') {
@@ -399,29 +527,29 @@ export async function addRegionViaApi(projectId, screenId, region) {
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project || !project.canvas_state.screens)
-        return null;
-    const screen = project.canvas_state.screens.find((s) => s.id === screenId);
-    if (!screen)
+    // Verify screen exists
+    const screenCheck = await sql `
+    SELECT id FROM screens WHERE id = ${screenId} AND project_id = ${projectId}
+  `;
+    if (screenCheck.length === 0)
         return null;
     const regionId = randomUUID();
-    const newRegion = {
-        id: regionId,
-        label: region.label ?? null,
-        position: region.position,
-        size: region.size,
-        elementIds: region.elementIds ?? [],
-        componentNodeId: region.componentNodeId ?? null,
-    };
-    if (!screen.regions)
-        screen.regions = [];
-    screen.regions.push(newRegion);
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    INSERT INTO screen_regions (id, screen_id, project_id, label, position_x, position_y, size_width, size_height, component_node_id, created_at, updated_at)
+    VALUES (${regionId}, ${screenId}, ${projectId}, ${region.label ?? null},
+            ${region.position.x}, ${region.position.y},
+            ${region.size.width}, ${region.size.height},
+            ${region.componentNodeId ?? null}, NOW(), NOW())
   `;
+    // Insert element references
+    if (region.elementIds && region.elementIds.length > 0) {
+        for (let i = 0; i < region.elementIds.length; i++) {
+            await sql `
+        INSERT INTO region_elements (region_id, node_id, position_order, created_at)
+        VALUES (${regionId}, ${region.elementIds[i]}, ${i}, NOW())
+      `;
+        }
+    }
     return { id: regionId, label: region.label };
 }
 export async function updateRegionViaApi(projectId, screenId, regionId, updates) {
@@ -434,21 +562,33 @@ export async function updateRegionViaApi(projectId, screenId, regionId, updates)
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project || !project.canvas_state.screens)
-        return null;
-    const screen = project.canvas_state.screens.find((s) => s.id === screenId);
-    if (!screen || !screen.regions)
-        return null;
-    const region = screen.regions.find((r) => r.id === regionId);
-    if (!region)
+    // Verify region exists
+    const regionCheck = await sql `
+    SELECT id FROM screen_regions WHERE id = ${regionId} AND screen_id = ${screenId} AND project_id = ${projectId}
+  `;
+    if (regionCheck.length === 0)
         return null;
-    Object.assign(region, updates);
+    // Update region fields
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    UPDATE screen_regions
+    SET label = COALESCE(${updates.label ?? null}, label),
+        position_x = COALESCE(${updates.position?.x ?? null}, position_x),
+        position_y = COALESCE(${updates.position?.y ?? null}, position_y),
+        size_width = COALESCE(${updates.size?.width ?? null}, size_width),
+        size_height = COALESCE(${updates.size?.height ?? null}, size_height),
+        updated_at = NOW()
+    WHERE id = ${regionId}
   `;
+    // Replace element IDs if provided
+    if (updates.elementIds !== undefined) {
+        await sql `DELETE FROM region_elements WHERE region_id = ${regionId}`;
+        for (let i = 0; i < updates.elementIds.length; i++) {
+            await sql `
+        INSERT INTO region_elements (region_id, node_id, position_order, created_at)
+        VALUES (${regionId}, ${updates.elementIds[i]}, ${i}, NOW())
+      `;
+        }
+    }
     return { id: regionId };
 }
 export async function removeRegionViaApi(projectId, screenId, regionId) {
@@ -456,22 +596,12 @@ export async function removeRegionViaApi(projectId, screenId, regionId) {
         const res = await fetchLocal(`/api/projects/${projectId}/screens/${screenId}/regions/${regionId}`, { method: 'DELETE' });
         return res.ok;
     }
-    const project = await getProject(projectId);
-    if (!project || !project.canvas_state.screens)
-        return false;
-    const screen = project.canvas_state.screens.find((s) => s.id === screenId);
-    if (!screen || !screen.regions)
-        return false;
-    const idx = screen.regions.findIndex((r) => r.id === regionId);
-    if (idx === -1)
-        return false;
-    screen.regions.splice(idx, 1);
-    await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    // Cascade deletes region_elements via FK
+    const rows = await sql `
+    DELETE FROM screen_regions WHERE id = ${regionId} AND screen_id = ${screenId} AND project_id = ${projectId}
+    RETURNING id
   `;
-    return true;
+    return rows.length > 0;
 }
 export async function updateEdgeViaApi(projectId, edgeId, updates) {
     if (MODE === 'local') {
@@ -483,22 +613,22 @@ export async function updateEdgeViaApi(projectId, edgeId, updates) {
             return null;
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project)
-        return null;
-    const edge = project.canvas_state.edges.find((e) => e.id === edgeId);
-    if (!edge)
+    // Verify edge exists
+    const edgeRows = await sql `
+    SELECT id, data FROM edges WHERE id = ${edgeId} AND project_id = ${projectId}
+  `;
+    if (edgeRows.length === 0)
         return null;
-    Object.assign(edge, updates);
-    if (updates.label !== undefined) {
-        if (!edge.data)
-            edge.data = {};
-        edge.data.label = updates.label;
-    }
+    const existingData = (edgeRows[0].data ?? {});
+    const newData = { ...existingData };
+    if (updates.label !== undefined)
+        newData.label = updates.label;
     await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
+    UPDATE edges
+    SET type = COALESCE(${updates.type ?? null}, type),
+        data = ${JSON.stringify(newData)}::jsonb,
+        updated_at = NOW()
+    WHERE id = ${edgeId} AND project_id = ${projectId}
   `;
     return { id: edgeId };
 }
@@ -512,121 +642,69 @@ export async function bulkImportCanvasState(projectId, canvasState, merge) {
             throw new Error(`Failed to import: ${res.status}`);
         return res.json();
     }
-    const project = await getProject(projectId);
-    if (!project)
+    // Verify project ownership
+    const check = await sql `SELECT id FROM projects WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}`;
+    if (check.length === 0)
         throw new Error('Project not found');
-    if (merge) {
-        // Merge mode: add new nodes/edges/screens
-        project.canvas_state.nodes.push(...canvasState.nodes);
-        project.canvas_state.edges.push(...canvasState.edges);
-        if (canvasState.screens) {
-            if (!project.canvas_state.screens)
-                project.canvas_state.screens = [];
-            project.canvas_state.screens.push(...canvasState.screens);
-        }
-    }
-    else {
-        // Replace mode: replace entire canvas state
-        project.canvas_state = canvasState;
-    }
-    await sql `
-    UPDATE projects
-    SET canvas_state = ${JSON.stringify(project.canvas_state)}::jsonb, updated_at = NOW()
-    WHERE id = ${projectId} AND user_id = ${FLOWSPEC_USER_ID}
-  `;
-    return {
-        nodeCount: canvasState.nodes.length,
-        edgeCount: canvasState.edges.length,
-        screenCount: canvasState.screens?.length ?? 0,
-    };
-}
-// ─── v4.1 Subview operations ───────────────────────────────────
-export async function createSubviewViaApi(projectId, name, description, nodePositions = []) {
-    if (MODE === 'local') {
-        const res = await fetchLocal(`/api/projects/${projectId}/subviews`, {
-            method: 'POST',
-            body: JSON.stringify({ name, description, nodePositions }),
-        });
-        if (!res.ok)
-            return null;
-        return res.json();
+    if (!merge) {
+        // Replace mode: clear existing entities first
+        await sql `DELETE FROM nodes WHERE project_id = ${projectId}`;
+        await sql `DELETE FROM edges WHERE project_id = ${projectId}`;
+        await sql `DELETE FROM screens WHERE project_id = ${projectId}`;
     }
-    // Cloud mode: direct SQL insert
-    const subviewId = randomUUID();
-    await sql `
-    INSERT INTO subviews (id, project_id, name, description)
-    VALUES (${subviewId}, ${projectId}, ${name}, ${description ?? null})
-  `;
-    if (nodePositions.length > 0) {
-        const subviewIds = nodePositions.map(() => subviewId);
-        const nodeIds = nodePositions.map((np) => np.nodeId);
-        const xPositions = nodePositions.map((np) => np.x);
-        const yPositions = nodePositions.map((np) => np.y);
+    // Insert nodes
+    for (const node of canvasState.nodes) {
+        const nodeId = node.id ?? randomUUID();
         await sql `
-      INSERT INTO subview_nodes (subview_id, node_id, position_x, position_y)
-      SELECT * FROM UNNEST(
-        ${subviewIds}::text[],
-        ${nodeIds}::text[],
-        ${xPositions}::real[],
-        ${yPositions}::real[]
-      )
+      INSERT INTO nodes (id, project_id, type, position_x, position_y, label, data, created_at, updated_at)
+      VALUES (${nodeId}, ${projectId}, ${node.type ?? 'datapoint'}, ${node.position?.x ?? 0}, ${node.position?.y ?? 0},
+              ${node.data?.label ?? null}, ${JSON.stringify(node.data ?? {})}::jsonb, NOW(), NOW())
     `;
     }
-    return { id: subviewId, name, description, nodePositions };
-}
-export async function updateSubviewViaApi(projectId, subviewId, updates) {
-    if (MODE === 'local') {
-        const res = await fetchLocal(`/api/projects/${projectId}/subviews/${subviewId}`, {
-            method: 'PATCH',
-            body: JSON.stringify(updates),
-        });
-        if (!res.ok)
-            return null;
-        return res.json();
+    // Insert edges
+    for (const edge of canvasState.edges) {
+        const edgeId = edge.id ?? randomUUID();
+        await sql `
+      INSERT INTO edges (id, project_id, source, target, type, data, created_at, updated_at)
+      VALUES (${edgeId}, ${projectId}, ${edge.source}, ${edge.target},
+              ${edge.data?.edgeType ?? edge.type ?? 'flows-to'}, ${JSON.stringify(edge.data ?? {})}::jsonb, NOW(), NOW())
+    `;
     }
-    // Cloud mode: direct SQL update
-    const name = updates.name;
-    const description = updates.description;
-    await sql `
-    UPDATE subviews
-    SET name = COALESCE(${name ?? null}, name),
-        description = COALESCE(${description ?? null}, description),
-        updated_at = NOW()
-    WHERE id = ${subviewId}
-  `;
-    if (updates.nodePositions !== undefined) {
-        // Delete existing positions
-        await sql `DELETE FROM subview_nodes WHERE subview_id = ${subviewId}`;
-        // Insert new positions
-        if (updates.nodePositions.length > 0) {
-            const subviewIds = updates.nodePositions.map(() => subviewId);
-            const nodeIds = updates.nodePositions.map((np) => np.nodeId);
-            const xPositions = updates.nodePositions.map((np) => np.x);
-            const yPositions = updates.nodePositions.map((np) => np.y);
+    // Insert screens + regions
+    if (canvasState.screens) {
+        for (const screen of canvasState.screens) {
+            const screenId = screen.id ?? randomUUID();
             await sql `
-        INSERT INTO subview_nodes (subview_id, node_id, position_x, position_y)
-        SELECT * FROM UNNEST(
-          ${subviewIds}::text[],
-          ${nodeIds}::text[],
-          ${xPositions}::real[],
-          ${yPositions}::real[]
-        )
+        INSERT INTO screens (id, project_id, name, image_url, image_filename, image_width, image_height, created_at, updated_at)
+        VALUES (${screenId}, ${projectId}, ${screen.name}, ${screen.imageUrl ?? ''}, ${screen.imageFilename ?? null},
+                ${screen.imageWidth ?? 0}, ${screen.imageHeight ?? 0}, NOW(), NOW())
       `;
+            if (screen.regions) {
+                for (const region of screen.regions) {
+                    const regionId = region.id ?? randomUUID();
+                    await sql `
+            INSERT INTO screen_regions (id, screen_id, project_id, label, position_x, position_y, size_width, size_height, component_node_id, created_at, updated_at)
+            VALUES (${regionId}, ${screenId}, ${projectId}, ${region.label ?? null},
+                    ${region.position?.x ?? 0}, ${region.position?.y ?? 0},
+                    ${region.size?.width ?? 0}, ${region.size?.height ?? 0},
+                    ${region.componentNodeId ?? null}, NOW(), NOW())
+          `;
+                    if (region.elementIds) {
+                        for (let i = 0; i < region.elementIds.length; i++) {
+                            await sql `
+                INSERT INTO region_elements (region_id, node_id, position_order, created_at)
+                VALUES (${regionId}, ${region.elementIds[i]}, ${i}, NOW())
+              `;
+                        }
+                    }
+                }
+            }
         }
     }
-    return { id: subviewId };
-}
-export async function deleteSubviewViaApi(projectId, subviewId) {
-    if (MODE === 'local') {
-        const res = await fetchLocal(`/api/projects/${projectId}/subviews/${subviewId}`, { method: 'DELETE' });
-        return res.ok;
-    }
-    // Cloud mode: direct SQL delete (cascades to subview_nodes)
-    const rows = await sql `
-    DELETE FROM subviews
-    WHERE id = ${subviewId}
-    RETURNING id
-  `;
-    return rows.length > 0;
+    return {
+        nodeCount: canvasState.nodes.length,
+        edgeCount: canvasState.edges.length,
+        screenCount: canvasState.screens?.length ?? 0,
+    };
 }
 //# sourceMappingURL=db.js.map