@michaeltangseng/schemaai 0.0.1

package/dist/core/EditorStore.js

@@ -0,0 +1,1007 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useReducer } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { INITIAL_TREE, COMPONENT_REGISTRY } from '../../../constants';
+import { findNodeAndParent, regenerateIds, findNodeByQueryId } from '../../../utils/nodeUtils';
+// NOTE: 该文件为从主工程 `store/EditorStore.tsx` 复制的初始版本，
+// 仍然依赖主工程的 `types/constants/utils`，后续会在 `schemaAI` 包内部重新抽象这些依赖。
+// --- Default Theme ---
+const DEFAULT_THEME = {
+    colors: {
+        primary: '#3b82f6',
+        secondary: '#64748b',
+        success: '#22c55e',
+        danger: '#ef4444',
+        dark: '#1e293b',
+        light: '#f8fafc',
+        white: '#ffffff'
+    },
+    borderRadius: {
+        none: '0px',
+        sm: '4px',
+        md: '8px',
+        lg: '16px',
+        full: '9999px'
+    }
+};
+// --- Reducer ---
+const editorReducer = (state, action) => {
+    // Helper to push history before mutation (scoped to current page logic usually, but simplified here)
+    const pushHistory = (currentState) => ({
+        ...currentState,
+        history: {
+            past: [...currentState.history.past, structuredClone(currentState.tree)],
+            future: [] // Clear future on new change
+        }
+    });
+    // Helper to sync the modified 'tree' back into the 'pages' array
+    const syncTreeToPages = (state, newTree) => {
+        // If we are editing the active page, sync it
+        // Note: If we are updating a node in a background page (e.g. via openModal data transfer), 
+        // the 'tree' reference might be the active one, but we need to update the correct page in 'pages'.
+        // Strategy: Since findNodeAndParent/UpdateNode usually works on 'state.tree',
+        // For cross-page updates, we handle it explicitly in the action or ensure 'state.tree' is temporarily swapped?
+        // Actually, UPDATE_NODE logic below assumes 'state.tree'. 
+        // To support updating non-active pages, we need to find which page the node belongs to.
+        // For now, simpler sync:
+        return state.pages.map(p => p.id === state.activePageId ? { ...p, tree: newTree } : p);
+    };
+    switch (action.type) {
+        // --- Page Management ---
+        case 'ADD_PAGE': {
+            const newPageId = uuidv4();
+            // Correctly clone INITIAL_TREE and regenerate child IDs so they are unique
+            // We keep root ID as 'root' because the editor relies on top-level being 'root'
+            const baseTree = structuredClone(INITIAL_TREE);
+            const newTree = {
+                ...baseTree,
+                id: 'root', // Maintain root ID for editor compatibility
+                children: baseTree.children?.map(child => regenerateIds(child)) || [],
+                // Sub-pages: default init handler to receive senddata from open('PageName', { senddata })
+                ...(action.payload.isSubPage ? {
+                    eventHandlers: [
+                        {
+                            id: uuidv4(),
+                            name: 'onOpenData',
+                            eventType: 'onOverlayInit',
+                            code: '// 接收主页面 open() 传入的 senddata，参数为 data\n// 例如: const ds = data; 或 将 data 赋给子组件',
+                            input: 'data'
+                        }
+                    ]
+                } : {})
+            };
+            const newPage = {
+                id: newPageId,
+                name: action.payload.name,
+                slug: action.payload.slug,
+                tree: newTree,
+                isSubPage: action.payload.isSubPage || false,
+            };
+            return {
+                ...state,
+                pages: [...state.pages, newPage],
+                activePageId: newPageId,
+                tree: newTree,
+                selectedId: null,
+                history: { past: [], future: [] }
+            };
+        }
+        case 'DELETE_PAGE': {
+            const pageToDelete = state.pages.find(p => p.id === action.payload);
+            // Only block deletion when removing the last MAIN page (sub-pages can always be deleted)
+            if (!pageToDelete?.isSubPage) {
+                const mainPageCount = state.pages.filter(p => !p.isSubPage).length;
+                if (mainPageCount <= 1) {
+                    alert("Cannot delete the last page.");
+                    return state;
+                }
+            }
+            const newPages = state.pages.filter(p => p.id !== action.payload);
+            let newActiveId = state.activePageId;
+            let newTree = state.tree;
+            // If we deleted the active page, prefer switching to a main page
+            if (state.activePageId === action.payload) {
+                const nextMainPage = newPages.find(p => !p.isSubPage);
+                const nextPage = nextMainPage || newPages[0];
+                newActiveId = nextPage.id;
+                newTree = nextPage.tree;
+            }
+            return {
+                ...state,
+                pages: newPages,
+                activePageId: newActiveId,
+                tree: newTree,
+                selectedId: null,
+                history: { past: [], future: [] }
+            };
+        }
+        case 'UPDATE_PAGE_META': {
+            return {
+                ...state,
+                pages: state.pages.map(p => p.id === action.payload.id
+                    ? { ...p, ...action.payload }
+                    : p)
+            };
+        }
+        case 'SWITCH_PAGE': {
+            const targetPage = state.pages.find(p => p.id === action.payload);
+            if (!targetPage)
+                return state;
+            return {
+                ...state,
+                activePageId: targetPage.id,
+                tree: targetPage.tree,
+                selectedId: null,
+                history: { past: [], future: [] },
+                bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null },
+                modals: [],
+                overlayDesignerId: null, // Close designer when switching pages
+            };
+        }
+        case 'REORDER_PAGE': {
+            const { sourceIndex, targetIndex } = action.payload;
+            if (sourceIndex === targetIndex)
+                return state;
+            const newPages = [...state.pages];
+            const [movedPage] = newPages.splice(sourceIndex, 1);
+            newPages.splice(targetIndex, 0, movedPage);
+            return {
+                ...state,
+                pages: newPages
+            };
+        }
+        case 'SET_FULL_STATE': {
+            return {
+                ...state,
+                pages: action.payload.pages,
+                activePageId: action.payload.activePageId,
+                tree: action.payload.pages.find(p => p.id === action.payload.activePageId)?.tree || INITIAL_TREE,
+                version: state.version + 1
+            };
+        }
+        // --- Modals ---
+        case 'OPEN_MODAL': {
+            const modal = action.payload;
+            let nextPages = state.pages;
+            // When overlay is opened with senddata, set the target page's root Page.Rendered_data.datasource so bindings work
+            if (modal.senddata !== undefined && modal.senddata !== null) {
+                nextPages = state.pages.map(p => {
+                    if (p.id !== modal.pageId)
+                        return p;
+                    const tree = structuredClone(p.tree);
+                    if (tree.props)
+                        tree.props = { ...tree.props, datasource: modal.senddata };
+                    else
+                        tree.props = { datasource: modal.senddata };
+                    return { ...p, tree };
+                });
+            }
+            return {
+                ...state,
+                pages: nextPages,
+                modals: [...state.modals, modal]
+            };
+        }
+        case 'CLOSE_MODAL': {
+            if (action.payload) {
+                return {
+                    ...state,
+                    modals: state.modals.filter(m => m.id !== action.payload)
+                };
+            }
+            // Close last one
+            return {
+                ...state,
+                modals: state.modals.slice(0, -1)
+            };
+        }
+        // --- Node Operations ---
+        case 'SELECT_NODE':
+            return {
+                ...state,
+                selectedId: action.payload,
+                bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null }
+            };
+        case 'HOVER_NODE':
+            return { ...state, hoveredId: action.payload };
+        case 'SET_DRAGGED_ITEM':
+            return { ...state, draggedItem: action.payload };
+        case 'SET_VIEWPORT':
+            return { ...state, viewport: action.payload };
+        case 'SET_PREVIEW_FIT':
+            return { ...state, previewFitCanvas: action.payload };
+        case 'SET_MODE': {
+            let runtimeValues = {};
+            if (action.payload === 'preview') {
+                state.variables.forEach(v => {
+                    let val = v.defaultValue;
+                    if (v.type === 'number')
+                        val = Number(v.defaultValue);
+                    if (v.type === 'boolean')
+                        val = v.defaultValue === 'true';
+                    if (v.type === 'object') {
+                        try {
+                            val = JSON.parse(v.defaultValue);
+                        }
+                        catch (e) {
+                            val = {};
+                        }
+                    }
+                    runtimeValues[v.id] = val;
+                });
+            }
+            return {
+                ...state,
+                mode: action.payload,
+                selectedId: null,
+                hoveredId: null,
+                runtimeValues,
+                bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null },
+                modals: [],
+                overlayDesignerId: null, // Close designer on mode change
+            };
+        }
+        /**
+         * Preview Runtime Hydration (for iframe preview)
+         * - The host editor sends a snapshot of runtime state to the iframe via postMessage.
+         * - We apply it in ONE reducer step to avoid flicker and to avoid `SET_MODE('preview')`
+         *   overwriting runtimeValues before variables are set.
+         */
+        case 'HYDRATE_PREVIEW': {
+            const nextPages = action.payload.pages || [];
+            const nextActivePageId = action.payload.activePageId || nextPages[0]?.id || state.activePageId;
+            const nextTree = nextPages.find(p => p.id === nextActivePageId)?.tree || INITIAL_TREE;
+            return {
+                ...state,
+                mode: 'preview',
+                viewport: action.payload.viewport || state.viewport,
+                pages: nextPages,
+                activePageId: nextActivePageId,
+                tree: nextTree,
+                themeConfig: action.payload.themeConfig || state.themeConfig,
+                variables: action.payload.variables || [],
+                runtimeValues: action.payload.runtimeValues || {},
+                queryResults: action.payload.queryResults || {},
+                // Reset editor-only UI state in runtime
+                selectedId: null,
+                hoveredId: null,
+                draggedItem: null,
+                clipboard: null,
+                contextMenu: null,
+                bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null },
+                history: { past: [], future: [] },
+                modals: [],
+                overlayDesignerId: null,
+                isDataSourceDrawerOpen: false,
+                isEventDrawerOpen: false,
+                version: state.version + 1
+            };
+        }
+        // One-time migration for preview: fill/patch props.__rb_layout for existing absolute nodes
+        // IMPORTANT: no history pollution (does not call pushHistory)
+        case 'MIGRATE_RB_LAYOUT': {
+            const { updates } = action.payload;
+            if (!updates || updates.length === 0)
+                return state;
+            const newState = structuredClone(state);
+            let touched = false;
+            for (const u of updates) {
+                if (!u?.id || u.id === 'root')
+                    continue;
+                const res = findNodeAndParent(newState.tree, u.id);
+                if (!res?.node)
+                    continue;
+                const target = res.node;
+                if (target.style?.position !== 'absolute')
+                    continue;
+                if (!target.props)
+                    target.props = {};
+                const prev = target.props.__rb_layout || {};
+                target.props.__rb_layout = { ...prev, ...u.layout };
+                touched = true;
+            }
+            if (!touched)
+                return state;
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            // Do NOT bump version here: EditorLayout keys Canvas by `state.version`, bumping would remount Canvas
+            // which would rerun the migration effect and cause an infinite update loop.
+            return newState;
+        }
+        case 'OPEN_CONTEXT_MENU':
+            return { ...state, contextMenu: action.payload, selectedId: action.payload.nodeId };
+        case 'CLOSE_CONTEXT_MENU':
+            return { ...state, contextMenu: null };
+        case 'UNDO': {
+            const { past, future } = state.history;
+            if (past.length === 0)
+                return state;
+            const previous = past[past.length - 1];
+            const newPast = past.slice(0, -1);
+            return {
+                ...state,
+                tree: previous,
+                pages: syncTreeToPages(state, previous), // Sync
+                history: {
+                    past: newPast,
+                    future: [state.tree, ...future]
+                },
+                version: state.version + 1
+            };
+        }
+        case 'REDO': {
+            const { past, future } = state.history;
+            if (future.length === 0)
+                return state;
+            const next = future[0];
+            const newFuture = future.slice(1);
+            return {
+                ...state,
+                tree: next,
+                pages: syncTreeToPages(state, next), // Sync
+                history: {
+                    past: [...past, state.tree],
+                    future: newFuture
+                },
+                version: state.version + 1
+            };
+        }
+        case 'COPY_NODE': {
+            if (!state.selectedId || state.selectedId === 'root')
+                return state;
+            const result = findNodeAndParent(state.tree, state.selectedId);
+            if (!result)
+                return state;
+            return { ...state, clipboard: structuredClone(result.node) };
+        }
+        case 'PASTE_NODE': {
+            if (!state.clipboard)
+                return state;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const newNode = regenerateIds(state.clipboard);
+            newNode.name = `${newNode.type.toLowerCase()}_${newNode.id.slice(0, 4)}`;
+            let targetParentId = 'root';
+            let insertIndex = undefined;
+            if (state.selectedId) {
+                const selectedResult = findNodeAndParent(newState.tree, state.selectedId);
+                if (selectedResult) {
+                    const meta = COMPONENT_REGISTRY[selectedResult.node.type];
+                    if (meta && meta.isContainer) {
+                        targetParentId = state.selectedId;
+                    }
+                    else {
+                        targetParentId = selectedResult.parent?.id || 'root';
+                        if (selectedResult.parent && selectedResult.parent.children) {
+                            const idx = selectedResult.parent.children.findIndex(n => n.id === state.selectedId);
+                            if (idx !== -1)
+                                insertIndex = idx + 1;
+                        }
+                    }
+                }
+            }
+            const targetResult = findNodeAndParent(newState.tree, targetParentId);
+            if (targetResult && targetResult.node) {
+                if (!targetResult.node.children)
+                    targetResult.node.children = [];
+                if (insertIndex !== undefined) {
+                    targetResult.node.children.splice(insertIndex, 0, newNode);
+                }
+                else {
+                    targetResult.node.children.push(newNode);
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            return newState;
+        }
+        case 'DUPLICATE_NODE': {
+            if (!action.payload || action.payload === 'root')
+                return state;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload);
+            if (result && result.parent && result.parent.children) {
+                const index = result.parent.children.findIndex(n => n.id === action.payload);
+                if (index !== -1) {
+                    const newNode = regenerateIds(result.node);
+                    newNode.name = `${newNode.type.toLowerCase()}_${newNode.id.slice(0, 4)}`;
+                    result.parent.children.splice(index + 1, 0, newNode);
+                    newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+                    return { ...newState, selectedId: newNode.id };
+                }
+            }
+            return state;
+        }
+        case 'REORDER_NODE': {
+            const { nodeId, direction } = action.payload;
+            if (nodeId === 'root')
+                return state;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, nodeId);
+            if (result && result.parent && result.parent.children) {
+                const children = result.parent.children;
+                const index = children.findIndex(n => n.id === nodeId);
+                if (index === -1)
+                    return state;
+                if (direction === 'up') {
+                    if (index > 0) {
+                        [children[index], children[index - 1]] = [children[index - 1], children[index]];
+                    }
+                }
+                else {
+                    if (index < children.length - 1) {
+                        [children[index], children[index + 1]] = [children[index + 1], children[index]];
+                    }
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            return newState;
+        }
+        case 'ADD_NODE': {
+            const { parentId, node, index, position } = action.payload;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, parentId);
+            if (result && result.node) {
+                if (!result.node.children)
+                    result.node.children = [];
+                if (position) {
+                    node.style = {
+                        ...node.style,
+                        position: 'absolute',
+                        left: `${position.x}px`,
+                        top: `${position.y}px`
+                    };
+                }
+                if (!node.name) {
+                    node.name = `${node.type.toLowerCase()}_${node.id.slice(0, 4)}`;
+                }
+                // Initialize deleted props cache for new nodes
+                if (!node.props)
+                    node.props = {};
+                if (!node.props.__rb_deletedProps) {
+                    node.props.__rb_deletedProps = [];
+                }
+                if (typeof index === 'number' && index >= 0) {
+                    result.node.children.splice(index, 0, node);
+                }
+                else {
+                    result.node.children.push(node);
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            return newState;
+        }
+        case 'UPDATE_NODE': {
+            const { id, props, data, style, events, eventHandlers, name, replace } = action.payload;
+            // We need to handle updates across ANY page, not just the active one
+            // But finding the node efficiently requires searching all pages if not active.
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            // 1. Try active tree first
+            let result = findNodeAndParent(newState.tree, id);
+            // 2. If not found, search other pages
+            if (!result) {
+                for (const page of newState.pages) {
+                    if (page.id !== newState.activePageId) {
+                        result = findNodeAndParent(page.tree, id);
+                        if (result)
+                            break; // Found in another page
+                    }
+                }
+            }
+            if (result && result.node) {
+                if (props) {
+                    result.node.props = replace?.props ? props : { ...result.node.props, ...props };
+                }
+                if (data) {
+                    const current = result.node.data || {};
+                    result.node.data = replace?.data ? data : { ...current, ...data };
+                }
+                if (style) {
+                    result.node.style = replace?.style ? style : { ...result.node.style, ...style };
+                }
+                if (events) {
+                    const current = result.node.events || {};
+                    result.node.events = replace?.events ? events : { ...current, ...events };
+                }
+                if (eventHandlers)
+                    result.node.eventHandlers = eventHandlers;
+                if (name !== undefined)
+                    result.node.name = name;
+            }
+            // If the node was in the active tree, this sync works. 
+            // If it was in another page, 'result.node' is a reference to that page's tree node inside 'newState.pages'
+            // because we cloned 'newState' which cloned 'pages'. So the mutation above is already applied to 'newState.pages'.
+            // We just need to ensure active tree is synced back IF we were editing active tree.
+            // Re-sync active tree just in case we mutated it via 'newState.tree'
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'UPDATE_NODE_IN_PAGE': {
+            const { pageId, id, props: propsPatch, data: dataPatch, style: stylePatch } = action.payload;
+            const page = state.pages.find(p => p.id === pageId);
+            if (!page)
+                return state;
+            const treeClone = structuredClone(page.tree);
+            const result = findNodeAndParent(treeClone, id);
+            if (result?.node) {
+                if (propsPatch)
+                    result.node.props = { ...result.node.props, ...propsPatch };
+                if (dataPatch)
+                    result.node.data = { ...(result.node.data || {}), ...dataPatch };
+                if (stylePatch)
+                    result.node.style = { ...result.node.style, ...stylePatch };
+            }
+            return {
+                ...state,
+                pages: state.pages.map(p => p.id === pageId ? { ...p, tree: treeClone } : p)
+            };
+        }
+        case 'REPLACE_NODE': {
+            const { id, node } = action.payload;
+            if (id === 'root') {
+                const stateWithHistory = pushHistory(state);
+                const newTree = { ...node, id: 'root' };
+                return {
+                    ...stateWithHistory,
+                    tree: newTree,
+                    pages: syncTreeToPages(stateWithHistory, newTree), // Sync
+                    version: state.version + 1
+                };
+            }
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, id);
+            if (result && result.parent && result.parent.children) {
+                const index = result.parent.children.findIndex(n => n.id === id);
+                if (index !== -1) {
+                    const newNode = { ...node, id };
+                    result.parent.children[index] = newNode;
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            return { ...newState, version: state.version + 1 };
+        }
+        case 'MOVE_NODE': {
+            const { nodeId, targetParentId, index, position, layout } = action.payload;
+            if (nodeId === 'root')
+                return state;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const sourceResult = findNodeAndParent(newState.tree, nodeId);
+            if (!sourceResult || !sourceResult.parent)
+                return state;
+            const nodeToMove = sourceResult.node;
+            const isDescendant = (parent, childId) => {
+                if (parent.children) {
+                    for (const child of parent.children) {
+                        if (child.id === childId)
+                            return true;
+                        if (isDescendant(child, childId))
+                            return true;
+                    }
+                }
+                return false;
+            };
+            if (isDescendant(nodeToMove, targetParentId))
+                return state;
+            sourceResult.parent.children = sourceResult.parent.children.filter(child => child.id !== nodeId);
+            if (position) {
+                // Drag-based positioning: override with mouse-computed px values.
+                // This covers both "drop into new parent" (cross-parent) and "re-drag within same parent"
+                // (isSelfDrop), so any previously-configured % position is intentionally overwritten here.
+                nodeToMove.style = {
+                    ...nodeToMove.style,
+                    position: 'absolute',
+                    left: `${position.x}px`,
+                    top: `${position.y}px`,
+                    marginTop: '0px',
+                    marginLeft: '0px'
+                };
+                // Store percent-based layout metadata for preview rendering (optional)
+                if (layout) {
+                    if (!nodeToMove.props)
+                        nodeToMove.props = {};
+                    const prev = nodeToMove.props.__rb_layout || {};
+                    nodeToMove.props.__rb_layout = { ...prev, ...layout };
+                }
+            }
+            else {
+                // No explicit position provided.
+                // Scenario 2: if the node carries a manually-configured % position (left/top ending with '%'),
+                // keep it as-is so it auto-adapts to the new parent container.
+                // Otherwise fall back to the original behaviour: reset to relative flow positioning.
+                const leftVal = nodeToMove.style?.left;
+                const topVal = nodeToMove.style?.top;
+                const hasPercentPos = (typeof leftVal === 'string' && leftVal.trim().endsWith('%')) ||
+                    (typeof topVal === 'string' && topVal.trim().endsWith('%'));
+                if (hasPercentPos) {
+                    // Preserve absolute + % position so CSS auto-resolves against the new parent.
+                    nodeToMove.style = { ...nodeToMove.style, position: 'absolute' };
+                }
+                else {
+                    // Original: strip left/top and switch to relative flow.
+                    const { position: pos, left, top, ...restStyle } = nodeToMove.style;
+                    nodeToMove.style = { ...restStyle, position: 'relative' };
+                }
+            }
+            const targetResult = findNodeAndParent(newState.tree, targetParentId);
+            if (targetResult && targetResult.node) {
+                if (!targetResult.node.children)
+                    targetResult.node.children = [];
+                if (typeof index === 'number' && index >= 0) {
+                    targetResult.node.children.splice(index, 0, nodeToMove);
+                }
+                else {
+                    targetResult.node.children.push(nodeToMove);
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            return newState;
+        }
+        case 'DELETE_NODE': {
+            if (action.payload === 'root')
+                return state;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload);
+            if (result && result.parent && result.parent.children) {
+                result.parent.children = result.parent.children.filter(n => n.id !== action.payload);
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree); // Sync
+            return { ...newState, selectedId: null, contextMenu: null };
+        }
+        case 'SAVE_PRESET': {
+            if (!action.payload || action.payload === 'root')
+                return state;
+            const result = findNodeAndParent(state.tree, action.payload);
+            if (!result)
+                return state;
+            const preset = regenerateIds(structuredClone(result.node));
+            preset.displayName = `${preset.type} Preset`;
+            return {
+                ...state,
+                presets: [...state.presets, preset]
+            };
+        }
+        case 'DELETE_PRESET': {
+            return {
+                ...state,
+                presets: state.presets.filter(p => p.id !== action.payload)
+            };
+        }
+        case 'UPDATE_THEME_TOKEN': {
+            const { category, name, value } = action.payload;
+            return {
+                ...state,
+                themeConfig: {
+                    ...state.themeConfig,
+                    [category]: {
+                        ...state.themeConfig[category],
+                        [name]: value
+                    }
+                }
+            };
+        }
+        case 'ADD_VARIABLE': {
+            return {
+                ...state,
+                variables: [...state.variables, action.payload]
+            };
+        }
+        case 'UPDATE_VARIABLE': {
+            return {
+                ...state,
+                variables: state.variables.map(v => v.id === action.payload.id ? action.payload : v)
+            };
+        }
+        case 'DELETE_VARIABLE': {
+            return {
+                ...state,
+                variables: state.variables.filter(v => v.id !== action.payload)
+            };
+        }
+        case 'SET_RUNTIME_VALUE': {
+            return {
+                ...state,
+                runtimeValues: {
+                    ...state.runtimeValues,
+                    [action.payload.id]: action.payload.value
+                }
+            };
+        }
+        case 'ADD_QUERY': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload.ownerId || '');
+            if (result && result.node) {
+                if (!result.node.queries)
+                    result.node.queries = [];
+                result.node.queries.push(action.payload);
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'UPDATE_QUERY': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const ownerId = action.payload.ownerId || '';
+            let targetNode = null;
+            if (ownerId) {
+                const result = findNodeAndParent(newState.tree, ownerId);
+                if (result)
+                    targetNode = result.node;
+            }
+            if (!targetNode) {
+                targetNode = findNodeByQueryId(newState.tree, action.payload.id);
+            }
+            if (targetNode && targetNode.queries) {
+                targetNode.queries = targetNode.queries.map(q => q.id === action.payload.id ? action.payload : q);
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'DELETE_QUERY': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const targetNode = findNodeByQueryId(newState.tree, action.payload);
+            if (targetNode && targetNode.queries) {
+                targetNode.queries = targetNode.queries.filter(q => q.id !== action.payload);
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'SET_DATA_SOURCE_DRAWER_OPEN': {
+            return {
+                ...state,
+                isDataSourceDrawerOpen: action.payload,
+                isEventDrawerOpen: action.payload ? false : state.isEventDrawerOpen
+            };
+        }
+        case 'SET_EVENT_DRAWER_OPEN': {
+            return {
+                ...state,
+                isEventDrawerOpen: action.payload,
+                isDataSourceDrawerOpen: action.payload ? false : state.isDataSourceDrawerOpen
+            };
+        }
+        case 'ADD_EVENT_HANDLER': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload.nodeId);
+            if (result && result.node) {
+                if (!result.node.eventHandlers)
+                    result.node.eventHandlers = [];
+                result.node.eventHandlers.push(action.payload.handler);
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'UPDATE_EVENT_HANDLER': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload.nodeId);
+            if (result && result.node && result.node.eventHandlers) {
+                const index = result.node.eventHandlers.findIndex(h => h.id === action.payload.handler.id);
+                if (index !== -1) {
+                    result.node.eventHandlers[index] = action.payload.handler;
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'DELETE_EVENT_HANDLER': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload.nodeId);
+            if (result && result.node && result.node.eventHandlers) {
+                result.node.eventHandlers = result.node.eventHandlers.filter(h => h.id !== action.payload.handlerId);
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'REORDER_EVENT_HANDLER': {
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const result = findNodeAndParent(newState.tree, action.payload.nodeId);
+            if (result && result.node && result.node.eventHandlers) {
+                const handlers = result.node.eventHandlers;
+                const { sourceIndex, targetIndex } = action.payload;
+                if (sourceIndex >= 0 && sourceIndex < handlers.length && targetIndex >= 0 && targetIndex < handlers.length) {
+                    const [removed] = handlers.splice(sourceIndex, 1);
+                    handlers.splice(targetIndex, 0, removed);
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return newState;
+        }
+        case 'SET_BINDING_STATE': {
+            return {
+                ...state,
+                bindingState: action.payload
+            };
+        }
+        case 'APPLY_BINDING': {
+            const { targetNodeId, targetField, targetType } = state.bindingState;
+            if (!targetNodeId || !targetField)
+                return state;
+            const stateWithHistory = pushHistory(state);
+            const newState = structuredClone(stateWithHistory);
+            const path = action.payload;
+            if (targetType === 'query') {
+                const nodeWithQuery = findNodeByQueryId(newState.tree, targetNodeId);
+                if (nodeWithQuery && nodeWithQuery.queries) {
+                    const queryIndex = nodeWithQuery.queries.findIndex(q => q.id === targetNodeId);
+                    if (queryIndex !== -1) {
+                        const query = nodeWithQuery.queries[queryIndex];
+                        const fieldParts = targetField.split('.');
+                        if (fieldParts.length === 1) {
+                            const key = targetField;
+                            if (typeof query[key] === 'string') {
+                                query[key] = (query[key] || '') + path;
+                            }
+                        }
+                        else if (fieldParts.length === 3) {
+                            const [collection, indexStr, key] = fieldParts;
+                            const idx = parseInt(indexStr);
+                            const colKey = collection;
+                            if (query[colKey] && query[colKey][idx]) {
+                                const existing = query[colKey][idx][key] || '';
+                                query[colKey][idx][key] = existing + path;
+                            }
+                        }
+                    }
+                }
+            }
+            else if (targetType === 'prop' || targetType === 'data') {
+                const result = findNodeAndParent(newState.tree, targetNodeId);
+                if (result && result.node) {
+                    if (targetType === 'prop') {
+                        const existingVal = result.node.props[targetField] || '';
+                        result.node.props[targetField] = `${existingVal}${path}`;
+                    }
+                    else if (targetType === 'data') {
+                        if (!result.node.data)
+                            result.node.data = {};
+                        const existingVal = result.node.data[targetField] || '';
+                        result.node.data[targetField] = `${existingVal}${path}`;
+                    }
+                }
+            }
+            newState.pages = syncTreeToPages(newState, newState.tree);
+            return {
+                ...newState,
+                bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null }
+            };
+        }
+        case 'SET_QUERY_RESULT': {
+            return {
+                ...state,
+                queryResults: {
+                    ...state.queryResults,
+                    [action.payload.id]: action.payload.data
+                }
+            };
+        }
+        // --- Persistence ---
+        case 'SET_TREE': {
+            // Legacy support mostly, but adapted to update active page
+            const stateWithHistory = pushHistory(state);
+            return {
+                ...stateWithHistory,
+                tree: action.payload,
+                pages: syncTreeToPages(stateWithHistory, action.payload),
+                selectedId: null,
+                bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null },
+                version: state.version + 1
+            };
+        }
+        case 'BUMP_VERSION': {
+            return {
+                ...state,
+                version: state.version + 1
+            };
+        }
+        case 'SET_OVERLAY_DESIGNER': {
+            return { ...state, overlayDesignerId: action.payload };
+        }
+        default:
+            return state;
+    }
+};
+const EditorContext = createContext(undefined);
+export const EditorProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(editorReducer, {
+        pages: [{ id: 'init', name: 'Home', slug: '/', tree: INITIAL_TREE }],
+        activePageId: 'init',
+        modals: [],
+        tree: INITIAL_TREE,
+        selectedId: null,
+        hoveredId: null,
+        draggedItem: null,
+        history: {
+            past: [],
+            future: []
+        },
+        clipboard: null,
+        viewport: 'ratio-16-9',
+        previewFitCanvas: true,
+        mode: 'edit',
+        contextMenu: null,
+        presets: [],
+        themeConfig: DEFAULT_THEME,
+        variables: [],
+        isDataSourceDrawerOpen: false,
+        isEventDrawerOpen: false,
+        runtimeValues: {},
+        bindingState: { isActive: false, targetNodeId: null, targetField: null, targetType: null },
+        queryResults: {},
+        version: 0,
+        overlayDesignerId: null
+    });
+    const actions = {
+        addNode: (parentId, node, index, position) => dispatch({ type: 'ADD_NODE', payload: { parentId, node, index, position } }),
+        updateNode: (id, updates) => dispatch({ type: 'UPDATE_NODE', payload: { id, ...updates } }),
+        updateNodeInPage: (pageId, id, updates) => dispatch({ type: 'UPDATE_NODE_IN_PAGE', payload: { pageId, id, ...updates } }),
+        replaceNode: (id, node) => dispatch({ type: 'REPLACE_NODE', payload: { id, node } }),
+        moveNode: (nodeId, targetParentId, index, position, layout) => dispatch({ type: 'MOVE_NODE', payload: { nodeId, targetParentId, index, position, layout } }),
+        deleteNode: (id) => dispatch({ type: 'DELETE_NODE', payload: id }),
+        selectNode: (id) => dispatch({ type: 'SELECT_NODE', payload: id }),
+        hoverNode: (id) => dispatch({ type: 'HOVER_NODE', payload: id }),
+        undo: () => dispatch({ type: 'UNDO' }),
+        redo: () => dispatch({ type: 'REDO' }),
+        copyNode: () => dispatch({ type: 'COPY_NODE' }),
+        pasteNode: () => dispatch({ type: 'PASTE_NODE' }),
+        setViewport: (mode) => dispatch({ type: 'SET_VIEWPORT', payload: mode }),
+        setPreviewFitCanvas: (fit) => dispatch({ type: 'SET_PREVIEW_FIT', payload: fit }),
+        setMode: (mode) => dispatch({ type: 'SET_MODE', payload: mode }),
+        hydratePreview: (payload) => dispatch({ type: 'HYDRATE_PREVIEW', payload }),
+        migrateRbLayout: (updates) => dispatch({ type: 'MIGRATE_RB_LAYOUT', payload: { updates } }),
+        openContextMenu: (payload) => dispatch({ type: 'OPEN_CONTEXT_MENU', payload }),
+        closeContextMenu: () => dispatch({ type: 'CLOSE_CONTEXT_MENU' }),
+        duplicateNode: (id) => dispatch({ type: 'DUPLICATE_NODE', payload: id }),
+        reorderNode: (nodeId, direction) => dispatch({ type: 'REORDER_NODE', payload: { nodeId, direction } }),
+        savePreset: (id) => dispatch({ type: 'SAVE_PRESET', payload: id }),
+        deletePreset: (id) => dispatch({ type: 'DELETE_PRESET', payload: id }),
+        updateThemeToken: (category, name, value) => dispatch({ type: 'UPDATE_THEME_TOKEN', payload: { category, name, value } }),
+        addVariable: (variable) => dispatch({ type: 'ADD_VARIABLE', payload: variable }),
+        updateVariable: (variable) => dispatch({ type: 'UPDATE_VARIABLE', payload: variable }),
+        deleteVariable: (id) => dispatch({ type: 'DELETE_VARIABLE', payload: id }),
+        setRuntimeValue: (id, value) => dispatch({ type: 'SET_RUNTIME_VALUE', payload: { id, value } }),
+        addQuery: (query) => dispatch({ type: 'ADD_QUERY', payload: query }),
+        updateQuery: (query) => dispatch({ type: 'UPDATE_QUERY', payload: query }),
+        deleteQuery: (id) => dispatch({ type: 'DELETE_QUERY', payload: id }),
+        setDataSourceDrawerOpen: (isOpen) => dispatch({ type: 'SET_DATA_SOURCE_DRAWER_OPEN', payload: isOpen }),
+        setBindingState: (state) => dispatch({ type: 'SET_BINDING_STATE', payload: state }),
+        applyBinding: (ref) => dispatch({ type: 'APPLY_BINDING', payload: ref }),
+        setQueryResult: (id, data) => dispatch({ type: 'SET_QUERY_RESULT', payload: { id, data } }),
+        setTree: (tree) => dispatch({ type: 'SET_TREE', payload: tree }),
+        // Events
+        setEventDrawerOpen: (isOpen) => dispatch({ type: 'SET_EVENT_DRAWER_OPEN', payload: isOpen }),
+        addEventHandler: (nodeId, handler) => dispatch({ type: 'ADD_EVENT_HANDLER', payload: { nodeId, handler } }),
+        updateEventHandler: (nodeId, handler) => dispatch({ type: 'UPDATE_EVENT_HANDLER', payload: { nodeId, handler } }),
+        deleteEventHandler: (nodeId, handlerId) => dispatch({ type: 'DELETE_EVENT_HANDLER', payload: { nodeId, handlerId } }),
+        reorderEventHandler: (nodeId, sourceIndex, targetIndex) => dispatch({ type: 'REORDER_EVENT_HANDLER', payload: { nodeId, sourceIndex, targetIndex } }),
+        // Pages
+        addPage: (name, slug, isSubPage) => dispatch({ type: 'ADD_PAGE', payload: { name, slug, isSubPage } }),
+        deletePage: (id) => dispatch({ type: 'DELETE_PAGE', payload: id }),
+        updatePageMeta: (id, meta) => dispatch({ type: 'UPDATE_PAGE_META', payload: { id, ...meta } }),
+        setOverlayDesigner: (pageId) => dispatch({ type: 'SET_OVERLAY_DESIGNER', payload: pageId }),
+        switchPage: (id) => dispatch({ type: 'SWITCH_PAGE', payload: id }),
+        reorderPage: (sourceIndex, targetIndex) => dispatch({ type: 'REORDER_PAGE', payload: { sourceIndex, targetIndex } }),
+        setFullState: (pages, activePageId) => dispatch({ type: 'SET_FULL_STATE', payload: { pages, activePageId } }),
+        // Modals
+        openModal: (modal) => dispatch({ type: 'OPEN_MODAL', payload: modal }),
+        closeModal: (id) => dispatch({ type: 'CLOSE_MODAL', payload: id }),
+        // UI helpers
+        bumpVersion: () => dispatch({ type: 'BUMP_VERSION' })
+    };
+    return (_jsx(EditorContext.Provider, { value: { state, dispatch, actions }, children: children }));
+};
+export const useEditor = () => {
+    const context = useContext(EditorContext);
+    if (!context)
+        throw new Error('useEditor must be used within an EditorProvider');
+    return context;
+};