create-visualbuild-app 0.1.0 → 1.0.1

package/visual-app-builder/src/stores/useAppStore.ts

@@ -1,1265 +1,2385 @@
-import { v4 as uuid } from 'uuid'
-import { create } from 'zustand'
-import { primitiveRegistry } from '../data/primitiveRegistry'
-import type {
-  AppShell,
-  AppState,
-  ComponentType,
-  Page,
-  PrimitiveType,
-  VisualNode,
-} from '../types'
-import { createPageSourcePath } from '../utils/codegen'
-import {
-  createProjectSchema,
-  loadProjectSchema,
-  saveProjectSchema,
-  syncTailwindClasses,
-} from '../utils/projectPersistence'
-
-const generateId = () => uuid()
-const projectCacheKey = 'visualbuild:project-cache'
-
-const defaultAppShell: AppShell = {
-  header: null,
-  footer: null,
-}
-const defaultProjectName = 'my-blog'
-
-const defaultPage: Page = {
-  id: 'page-home',
-  name: 'Home',
-  route: '/',
-  sourcePath: createPageSourcePath('Home'),
-  root: createPageRoot('page-home'),
-  components: [
-    createComponentPreset('Navbar', {
-      navId: 'shell-navbar',
-      logo: 'My Blog',
-    }),
-    createComponentPreset('Hero', {
-      sectionId: 'home-hero',
-      title: 'Welcome to My Blog',
-      subtitle: 'Built visually. Owned as React code.',
-      cta: 'Start Building',
-    }),
-  ],
-}
-
-const cachedProject = readCachedProject()
-let tailwindSyncTimeout: number | null = null
-let activeProjectId = ''
-
-export const useAppStore = create<AppState>((set, get) => ({
-  projectName: cachedProject?.projectName ?? defaultProjectName,
-  appShell: cachedProject?.appShell ?? defaultAppShell,
-  pages: cachedProject?.pages ?? [],
-  activePageId: cachedProject?.activePageId ?? '',
-  selectedComponentId: null,
-  viewport: 'desktop',
-  previewMode: false,
-  isProjectLoaded: false,
-
-  loadProject: async () => {
-    const schema = await loadProjectSchema().catch((error: unknown) => {
-      console.warn('Failed to load visualbuild/pages.json', error)
-      return null
-    })
-
-    if (!schema || schema.pages.length === 0) {
-      if (cachedProject) {
-        activeProjectId = cachedProject.projectId
-        scheduleTailwindSync(cachedProject.pages, cachedProject.appShell)
-        set({
-          projectName: cachedProject.projectName,
-          appShell: cachedProject.appShell,
-          pages: cachedProject.pages,
-          activePageId: cachedProject.activePageId,
-          selectedComponentId: null,
-          isProjectLoaded: true,
-        })
-        return
-      }
-
-      activeProjectId = defaultProjectName
-      if (get().isProjectLoaded) {
-        return
-      }
-
-      cacheProject([defaultPage], defaultAppShell, false, defaultProjectName)
-
-      set({
-        projectName: defaultProjectName,
-        appShell: defaultAppShell,
-        pages: [defaultPage],
-        activePageId: defaultPage.id,
-        selectedComponentId: null,
-        isProjectLoaded: true,
-      })
-      return
-    }
-
-    const projectName = schema.meta?.projectName ?? defaultProjectName
-    activeProjectId = schema.runtimeProjectId ?? projectName
-
-    if (
-      cachedProject?.dirty &&
-      cachedProject.projectId === activeProjectId
-    ) {
-      scheduleTailwindSync(cachedProject.pages, cachedProject.appShell)
-      set({
-        projectName: cachedProject.projectName,
-        appShell: cachedProject.appShell,
-        pages: cachedProject.pages,
-        activePageId: cachedProject.activePageId,
-        selectedComponentId: null,
-        isProjectLoaded: true,
-      })
-      return
-    }
-
-    const { pages, appShell, changed } = normalizeLoadedProject(
-      schema.pages,
-      schema.appShell ?? defaultAppShell
-    )
-    cacheProject(pages, appShell, false, projectName)
-
-    set({
-      projectName,
-      appShell,
-      pages,
-      activePageId: pages[0].id,
-      selectedComponentId: null,
-      isProjectLoaded: true,
-    })
-
-    if (changed) {
-      persistProject(pages, appShell, projectName)
-    }
-  },
-
-  refreshProjectFromDisk: async (force = false) => {
-    const schema = await loadProjectSchema().catch((error: unknown) => {
-      console.warn('Failed to refresh visualbuild/pages.json', error)
-      return null
-    })
-
-    if (!schema || schema.pages.length === 0) {
-      return 'failed'
-    }
-
-    const projectName = schema.meta?.projectName ?? defaultProjectName
-    const nextProjectId = schema.runtimeProjectId ?? projectName
-    const currentCache = readCachedProject()
-
-    if (
-      !force &&
-      currentCache?.dirty &&
-      currentCache.projectId === nextProjectId
-    ) {
-      return 'skipped-dirty'
-    }
-
-    const { pages, appShell } = normalizeLoadedProject(
-      schema.pages,
-      schema.appShell ?? defaultAppShell
-    )
-    const currentActivePageId = get().activePageId
-    const activePageId = pages.some(
-      (page) => page.id === currentActivePageId
-    )
-      ? currentActivePageId
-      : pages[0].id
-
-    activeProjectId = nextProjectId
-    cacheProject(pages, appShell, false, projectName)
-    set({
-      projectName,
-      appShell,
-      pages,
-      activePageId,
-      selectedComponentId: null,
-      isProjectLoaded: true,
-    })
-
-    return 'updated'
-  },
-
-  saveProject: async () => {
-    const { pages, appShell, isProjectLoaded, projectName } = get()
-
-    if (!isProjectLoaded) {
-      return
-    }
-
-    cacheProject(pages, appShell, true, projectName)
-    await saveProjectSchema(pages, appShell, projectName)
-    cacheProject(pages, appShell, false, projectName)
-  },
-
-  addPage: (name, route) => {
-    const pageId = generateId()
-    const page: Page = {
-      id: pageId,
-      name,
-      route,
-      sourcePath: createPageSourcePath(name),
-      root: createPageRoot(pageId),
-      components: [],
-    }
-
-    set((state) => {
-      const pages = [
-        ...state.pages,
-        page,
-      ]
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return { pages }
-    })
-
-    return page
-  },
-
-  registerPage: (page) =>
-    set((state) => {
-      const pages = [...state.pages, page]
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return {
-        pages,
-        activePageId: page.id,
-        selectedComponentId: null,
-      }
-    }),
-
-  deletePage: (id) =>
-    set((state) => {
-      if (state.pages.length === 1) return state
-      const pages = state.pages.filter((page) => page.id !== id)
-      const activePageId =
-        state.activePageId === id ? pages[0].id : state.activePageId
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return {
-        pages,
-        activePageId,
-        selectedComponentId:
-          state.activePageId === id ? null : state.selectedComponentId,
-      }
-    }),
-
-  setActivePage: (id) => set({ activePageId: id, selectedComponentId: null }),
-
-  setSelectedComponent: (id) => set({ selectedComponentId: id }),
-
-  setViewport: (viewport) => set({ viewport }),
-
-  togglePreviewMode: () =>
-    set((state) => ({ previewMode: !state.previewMode })),
-
-  addComponent: (pageId, type) => {
-    get().addComponentAt(pageId, type, Number.POSITIVE_INFINITY)
-  },
-
-  addComponentAt: (pageId, type, index) =>
-    set((state) => {
-      const node = createComponentPreset(type)
-      const pages = state.pages.map((page) =>
-        page.id === pageId ? insertNodeAtRoot(page, node, index) : page
-      )
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return { pages, selectedComponentId: node.id }
-    }),
-
-  addPrimitive: (pageId, type) => {
-    get().addPrimitiveAt(pageId, type, Number.POSITIVE_INFINITY)
-  },
-
-  addPrimitiveAt: (pageId, type, index) =>
-    set((state) => {
-      const node = createPrimitive(type)
-      const pages = state.pages.map((page) =>
-        page.id === pageId ? insertNodeAtRoot(page, node, index) : page
-      )
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return { pages, selectedComponentId: node.id }
-    }),
-
-  addPrimitiveToNode: (parentNodeId, type) => {
-    get().addPrimitiveToNodeAt(parentNodeId, type, Number.POSITIVE_INFINITY)
-  },
-
-  addPrimitiveToNodeAt: (parentNodeId, type, index) =>
-    set((state) => {
-      const node = createPrimitive(type)
-      const pages = state.pages.map((page) => ({
-        ...page,
-        components: addChildNodeAt(page.components, parentNodeId, node, index),
-      }))
-      const appShell = addChildToAppShell(
-        state.appShell,
-        parentNodeId,
-        node,
-        index
-      )
-
-      persistProject(pages, appShell, state.projectName)
-
-      return { appShell, pages, selectedComponentId: node.id }
-    }),
-
-  addComponentToNode: (parentNodeId, type) => {
-    get().addComponentToNodeAt(parentNodeId, type, Number.POSITIVE_INFINITY)
-  },
-
-  addComponentToNodeAt: (parentNodeId, type, index) =>
-    set((state) => {
-      const node = createComponentPreset(type)
-      const pages = state.pages.map((page) => ({
-        ...page,
-        components: addChildNodeAt(page.components, parentNodeId, node, index),
-      }))
-      const appShell = addChildToAppShell(
-        state.appShell,
-        parentNodeId,
-        node,
-        index
-      )
-
-      persistProject(pages, appShell, state.projectName)
-
-      return { appShell, pages, selectedComponentId: node.id }
-    }),
-
-  removeNode: (nodeId) =>
-    set((state) => {
-      const appShell = removeShellNodeById(state.appShell, nodeId)
-      const pages = state.pages.map((page) => ({
-        ...page,
-        components: removeNodeById(page.components, nodeId),
-      }))
-
-      persistProject(pages, appShell, state.projectName)
-
-      return {
-        appShell,
-        pages,
-        selectedComponentId:
-          state.selectedComponentId === nodeId ? null : state.selectedComponentId,
-      }
-    }),
-
-  moveNode: (pageId, nodeId, targetParentNodeId, targetIndex) =>
-    set((state) => {
-      const movedProject = moveNodeInProject(
-        state.pages,
-        state.appShell,
-        pageId,
-        nodeId,
-        targetParentNodeId,
-        targetIndex
-      )
-
-      if (!movedProject) {
-        return state
-      }
-
-      persistProject(
-        movedProject.pages,
-        movedProject.appShell,
-        state.projectName
-      )
-
-      return {
-        pages: movedProject.pages,
-        appShell: movedProject.appShell,
-        selectedComponentId: nodeId,
-      }
-    }),
-
-  moveComponent: (pageId, nodeId, targetIndex) =>
-    set((state) => {
-      const pages = state.pages.map((page) =>
-        page.id === pageId ? moveRootNode(page, nodeId, targetIndex) : page
-      )
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return { pages }
-    }),
-
-  removeComponent: (pageId, nodeId) =>
-    set((state) => {
-      const pages = state.pages.map((page) =>
-        page.id === pageId
-          ? { ...page, components: removeNodeById(page.components, nodeId) }
-          : page
-      )
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return {
-        pages,
-        selectedComponentId:
-          state.selectedComponentId === nodeId ? null : state.selectedComponentId,
-      }
-    }),
-
-  setAppShellComponent: (_slot, type) => {
-    const slot = type === 'Footer' ? 'footer' : 'header'
-
-    set((state) => {
-      const node = createComponentPreset(type)
-      const appShell = {
-        ...state.appShell,
-        [slot]: node,
-      }
-
-      persistProject(state.pages, appShell, state.projectName)
-
-      return {
-        appShell,
-        selectedComponentId: node.id,
-      }
-    })
-  },
-
-  removeAppShellComponent: (slot) =>
-    set((state) => {
-      const removedNodeId = state.appShell[slot]?.id
-      const appShell = {
-        ...state.appShell,
-        [slot]: null,
-      }
-
-      persistProject(state.pages, appShell, state.projectName)
-
-      return {
-        appShell,
-        selectedComponentId:
-          state.selectedComponentId === removedNodeId
-            ? null
-            : state.selectedComponentId,
-      }
-    }),
-
-  updateComponentProps: (_pageId, nodeId, props) => {
-    get().updateNodeProps(nodeId, props)
-  },
-
-  updateNodeProps: (nodeId, props) =>
-    set((state) => {
-      const appShell = updateShellNodeProps(state.appShell, nodeId, props)
-      const pages = state.pages.map((page) => ({
-        ...page,
-        components: updateNodeProps(page.components, nodeId, props),
-      }))
-
-      persistProject(pages, appShell, state.projectName)
-
-      return { appShell, pages }
-    }),
-
-  updatePageRoot: (pageId, updates) =>
-    set((state) => {
-      const pages = state.pages.map((page) => {
-        if (page.id !== pageId) {
-          return page
-        }
-
-        const nextType = updates.type ?? page.root.type
-        const defaultProps =
-          updates.type && updates.type !== page.root.type
-            ? primitiveRegistry[nextType].defaultProps
-            : {}
-
-        return {
-          ...page,
-          root: {
-            ...page.root,
-            type: nextType,
-            props: {
-              ...defaultProps,
-              ...page.root.props,
-              ...(updates.props ?? {}),
-            },
-          },
-        }
-      })
-
-      persistProject(pages, state.appShell, state.projectName)
-
-      return { pages }
-    }),
-
-  updateAppShellProps: (slot, props) =>
-    set((state) => {
-      const node = state.appShell[slot]
-
-      if (!node) {
-        return state
-      }
-
-      const appShell = {
-        ...state.appShell,
-        [slot]: {
-          ...node,
-          props: {
-            ...node.props,
-            ...props,
-          },
-        },
-      }
-
-      persistProject(state.pages, appShell, state.projectName)
-
-      return { appShell }
-    }),
-}))
-
-function createPageRoot(pageId: string, type: PrimitiveType = 'div'): VisualNode {
-  return {
-    id: `${pageId}:root`,
-    type,
-    label: 'Page root',
-    props: {
-      ...primitiveRegistry[type].defaultProps,
-      className: 'min-h-screen',
-    },
-    children: [],
-  }
-}
-
-function createPrimitive(type: PrimitiveType, props = {}): VisualNode {
-  return {
-    id: generateId(),
-    type,
-    props: { ...primitiveRegistry[type].defaultProps, ...props },
-    children: [],
-  }
-}
-
-function createComponentPreset(
-  type: ComponentType,
-  overrides: Record<string, unknown> = {}
-): VisualNode {
-  if (type === 'Navbar') {
-    return {
-      id: String(overrides.navId ?? generateId()),
-      type: 'nav',
-      label: 'Navbar',
-      props: {
-        ...primitiveRegistry.nav.defaultProps,
-        className:
-          'flex items-center justify-between px-6 py-3 bg-gray-900 text-white',
-      },
-      children: [
-        createPrimitive('span', {
-          text: String(overrides.logo ?? 'My Blog'),
-          className: 'font-bold text-sm',
-        }),
-        createPrimitive('div', {
-          className: 'flex items-center gap-4',
-        }),
-        createPrimitive('div', {
-          className: 'flex items-center gap-2',
-        }),
-      ],
-    }
-  }
-
-  if (type === 'Hero') {
-    return {
-      id: String(overrides.sectionId ?? generateId()),
-      type: 'section',
-      label: 'Hero',
-      props: {
-        className:
-          'bg-gradient-to-br from-blue-600 to-indigo-700 text-white px-8 py-12 text-center',
-      },
-      children: [
-        createPrimitive('h1', {
-          text: String(overrides.title ?? 'Welcome to My Blog'),
-          className: 'text-2xl font-bold mb-2',
-        }),
-        createPrimitive('p', {
-          text: String(
-            overrides.subtitle ?? 'Built visually. Owned as React code.'
-          ),
-          className: 'text-sm text-blue-100 mb-6',
-        }),
-        createPrimitive('button', {
-          text: String(overrides.cta ?? 'Start Building'),
-          className:
-            'px-5 py-2 bg-white text-blue-700 rounded-full text-sm font-semibold',
-        }),
-      ],
-    }
-  }
-
-  if (type === 'Card') {
-    return {
-      id: generateId(),
-      type: 'article',
-      label: 'Card',
-      props: { ...primitiveRegistry.article.defaultProps },
-      children: [
-        createPrimitive('h3', {
-          text: 'Card Title',
-          className: 'font-semibold text-gray-900 mb-1',
-        }),
-        createPrimitive('p', {
-          text: 'Card description goes here.',
-          className: 'text-sm text-gray-500',
-        }),
-      ],
-    }
-  }
-
-  if (type === 'Button') {
-    return createPrimitive('button', {
-      text: 'Click me',
-      className: 'px-4 py-1.5 rounded text-sm font-medium bg-blue-600 text-white',
-    })
-  }
-
-  return {
-    id: generateId(),
-    type: 'footer',
-    label: 'Footer',
-    props: { ...primitiveRegistry.footer.defaultProps },
-    children: [
-      createPrimitive('span', {
-        text: 'Copyright 2026 MySite',
-        className: '',
-      }),
-    ],
-  }
-}
-
-function insertNodeAtRoot(page: Page, node: VisualNode, index: number): Page {
-  const components = [...page.components]
-  const safeIndex = Math.max(0, Math.min(index, components.length))
-
-  components.splice(safeIndex, 0, node)
-
-  return { ...page, components }
-}
-
-function addChildNodeAt(
-  nodes: VisualNode[],
-  parentNodeId: string,
-  child: VisualNode,
-  index: number
-): VisualNode[] {
-  return nodes.map((node) =>
-    node.id === parentNodeId
-      ? { ...node, children: insertNodeAt(node.children, child, index) }
-      : {
-          ...node,
-          children: addChildNodeAt(node.children, parentNodeId, child, index),
-        }
-  )
-}
-
-function addChildToAppShell(
-  appShell: AppShell,
-  parentNodeId: string,
-  child: VisualNode,
-  index: number
-): AppShell {
-  return {
-    header: appShell.header
-      ? insertChildIntoTree(appShell.header, parentNodeId, child, index)
-      : null,
-    footer: appShell.footer
-      ? insertChildIntoTree(appShell.footer, parentNodeId, child, index)
-      : null,
-  }
-}
-
-function removeNodeById(nodes: VisualNode[], nodeId: string): VisualNode[] {
-  return nodes
-    .filter((node) => node.id !== nodeId)
-    .map((node) => ({
-      ...node,
-      children: removeNodeById(node.children, nodeId),
-    }))
-}
-
-function removeShellNodeById(appShell: AppShell, nodeId: string): AppShell {
-  return {
-    header:
-      appShell.header?.id === nodeId
-        ? null
-        : appShell.header
-          ? {
-              ...appShell.header,
-              children: removeNodeById(appShell.header.children, nodeId),
-            }
-          : null,
-    footer:
-      appShell.footer?.id === nodeId
-        ? null
-        : appShell.footer
-          ? {
-              ...appShell.footer,
-              children: removeNodeById(appShell.footer.children, nodeId),
-            }
-          : null,
-  }
-}
-
-function updateNodeProps(
-  nodes: VisualNode[],
-  nodeId: string,
-  props: Record<string, unknown>
-): VisualNode[] {
-  return nodes.map((node) =>
-    node.id === nodeId
-      ? { ...node, props: { ...node.props, ...props } }
-      : { ...node, children: updateNodeProps(node.children, nodeId, props) }
-  )
-}
-
-function updateShellNodeProps(
-  appShell: AppShell,
-  nodeId: string,
-  props: Record<string, unknown>
-): AppShell {
-  return {
-    header: appShell.header
-      ? updateNodeInTree(appShell.header, nodeId, props)
-      : null,
-    footer: appShell.footer
-      ? updateNodeInTree(appShell.footer, nodeId, props)
-      : null,
-  }
-}
-
-function updateNodeInTree(
-  node: VisualNode,
-  nodeId: string,
-  props: Record<string, unknown>
-): VisualNode {
-  if (node.id === nodeId) {
-    return { ...node, props: { ...node.props, ...props } }
-  }
-
-  return {
-    ...node,
-    children: node.children.map((child) =>
-      updateNodeInTree(child, nodeId, props)
-    ),
-  }
-}
-
-type NodeScope = `page:${string}` | 'shell:header' | 'shell:footer'
-
-interface NodeLocation {
-  node: VisualNode
-  parentNodeId: string | null
-  index: number
-  scope: NodeScope
-}
-
-function moveNodeInProject(
-  pages: Page[],
-  appShell: AppShell,
-  pageId: string,
-  nodeId: string,
-  targetParentNodeId: string | null,
-  targetIndex: number
-) {
-  const source = findMovableNode(pages, appShell, nodeId)
-
-  if (!source) {
-    return null
-  }
-
-  if (
-    targetParentNodeId === nodeId ||
-    (targetParentNodeId !== null &&
-      containsNode(source.node, targetParentNodeId))
-  ) {
-    return null
-  }
-
-  const destination = findDestination(
-    pages,
-    appShell,
-    pageId,
-    targetParentNodeId
-  )
-
-  if (!destination) {
-    return null
-  }
-
-  if (
-    destination.parentNode &&
-    !primitiveRegistry[destination.parentNode.type].acceptsChildren
-  ) {
-    return null
-  }
-
-  let insertionIndex = targetIndex
-
-  if (
-    source.scope === destination.scope &&
-    source.parentNodeId === targetParentNodeId &&
-    source.index < targetIndex
-  ) {
-    insertionIndex -= 1
-  }
-
-  let nextPages = pages.map((page) => ({
-    ...page,
-    components: removeNodeById(page.components, nodeId),
-  }))
-  let nextAppShell: AppShell = {
-    header: appShell.header
-      ? {
-          ...appShell.header,
-          children: removeNodeById(appShell.header.children, nodeId),
-        }
-      : null,
-    footer: appShell.footer
-      ? {
-          ...appShell.footer,
-          children: removeNodeById(appShell.footer.children, nodeId),
-        }
-      : null,
-  }
-
-  if (targetParentNodeId === null) {
-    nextPages = nextPages.map((page) =>
-      page.id === pageId
-        ? insertNodeAtRoot(page, source.node, insertionIndex)
-        : page
-    )
-  } else {
-    nextPages = nextPages.map((page) => ({
-      ...page,
-      components: addChildNodeAt(
-        page.components,
-        targetParentNodeId,
-        source.node,
-        insertionIndex
-      ),
-    }))
-    nextAppShell = addChildToAppShell(
-      nextAppShell,
-      targetParentNodeId,
-      source.node,
-      insertionIndex
-    )
-  }
-
-  return { pages: nextPages, appShell: nextAppShell }
-}
-
-function findMovableNode(
-  pages: Page[],
-  appShell: AppShell,
-  nodeId: string
-): NodeLocation | null {
-  for (const page of pages) {
-    const location = findNodeLocation(
-      page.components,
-      nodeId,
-      null,
-      `page:${page.id}`
-    )
-
-    if (location) {
-      return location
-    }
-  }
-
-  if (appShell.header) {
-    const location = findNodeLocation(
-      appShell.header.children,
-      nodeId,
-      appShell.header.id,
-      'shell:header'
-    )
-
-    if (location) {
-      return location
-    }
-  }
-
-  if (appShell.footer) {
-    return findNodeLocation(
-      appShell.footer.children,
-      nodeId,
-      appShell.footer.id,
-      'shell:footer'
-    )
-  }
-
-  return null
-}
-
-function findNodeLocation(
-  nodes: VisualNode[],
-  nodeId: string,
-  parentNodeId: string | null,
-  scope: NodeScope
-): NodeLocation | null {
-  for (const [index, node] of nodes.entries()) {
-    if (node.id === nodeId) {
-      return { node, parentNodeId, index, scope }
-    }
-
-    const childLocation = findNodeLocation(
-      node.children,
-      nodeId,
-      node.id,
-      scope
-    )
-
-    if (childLocation) {
-      return childLocation
-    }
-  }
-
-  return null
-}
-
-function findDestination(
-  pages: Page[],
-  appShell: AppShell,
-  pageId: string,
-  parentNodeId: string | null
-): { scope: NodeScope; parentNode: VisualNode | null } | null {
-  if (parentNodeId === null) {
-    return pages.some((page) => page.id === pageId)
-      ? { scope: `page:${pageId}`, parentNode: null }
-      : null
-  }
-
-  for (const page of pages) {
-    const parentNode = findNodeInTreeList(page.components, parentNodeId)
-
-    if (parentNode) {
-      return { scope: `page:${page.id}`, parentNode }
-    }
-  }
-
-  if (appShell.header) {
-    const parentNode = findNodeInTree(appShell.header, parentNodeId)
-
-    if (parentNode) {
-      return { scope: 'shell:header', parentNode }
-    }
-  }
-
-  if (appShell.footer) {
-    const parentNode = findNodeInTree(appShell.footer, parentNodeId)
-
-    if (parentNode) {
-      return { scope: 'shell:footer', parentNode }
-    }
-  }
-
-  return null
-}
-
-function findNodeInTreeList(nodes: VisualNode[], nodeId: string) {
-  for (const node of nodes) {
-    const match = findNodeInTree(node, nodeId)
-
-    if (match) {
-      return match
-    }
-  }
-
-  return null
-}
-
-function findNodeInTree(
-  node: VisualNode,
-  nodeId: string
-): VisualNode | null {
-  if (node.id === nodeId) {
-    return node
-  }
-
-  return findNodeInTreeList(node.children, nodeId)
-}
-
-function containsNode(node: VisualNode, nodeId: string): boolean {
-  return (
-    node.id === nodeId ||
-    node.children.some((child) => containsNode(child, nodeId))
-  )
-}
-
-function insertChildIntoTree(
-  node: VisualNode,
-  parentNodeId: string,
-  child: VisualNode,
-  index: number
-): VisualNode {
-  if (node.id === parentNodeId) {
-    return { ...node, children: insertNodeAt(node.children, child, index) }
-  }
-
-  return {
-    ...node,
-    children: node.children.map((nestedChild) =>
-      insertChildIntoTree(nestedChild, parentNodeId, child, index)
-    ),
-  }
-}
-
-function insertNodeAt(
-  nodes: VisualNode[],
-  node: VisualNode,
-  index: number
-) {
-  const nextNodes = [...nodes]
-  const safeIndex = Math.max(0, Math.min(index, nextNodes.length))
-
-  nextNodes.splice(safeIndex, 0, node)
-
-  return nextNodes
-}
-
-function moveRootNode(page: Page, nodeId: string, targetIndex: number): Page {
-  const fromIndex = page.components.findIndex((node) => node.id === nodeId)
-
-  if (fromIndex === -1) {
-    return page
-  }
-
-  const components = [...page.components]
-  const [node] = components.splice(fromIndex, 1)
-  const safeIndex = Math.max(0, Math.min(targetIndex, components.length))
-
-  components.splice(safeIndex, 0, node)
-
-  return { ...page, components }
-}
-
-function normalizeLoadedProject(pages: Page[], appShell: AppShell) {
-  let changed = false
-  const normalizedAppShell: AppShell = {
-    header: appShell.header ? normalizeUnknownNode(appShell.header) : null,
-    footer: appShell.footer ? normalizeUnknownNode(appShell.footer) : null,
-  }
-
-  const normalizedPages = pages.map((page) => {
-    const rawPage = page as Page & { root?: unknown; sourcePath?: string }
-    const root = rawPage.root
-      ? normalizePageRoot(rawPage.root, page.id)
-      : createPageRoot(page.id)
-    const normalizedComponents: VisualNode[] = []
-
-    for (const rawNode of page.components) {
-      const node = normalizeUnknownNode(rawNode)
-
-      if (node.label === 'Navbar' && !normalizedAppShell.header) {
-        normalizedAppShell.header = node
-        changed = true
-        continue
-      }
-
-      if (node.label === 'Footer' && !normalizedAppShell.footer) {
-        normalizedAppShell.footer = node
-        changed = true
-        continue
-      }
-
-      normalizedComponents.push(node)
-    }
-
-    if (!rawPage.root) {
-      changed = true
-    }
-
-    const sourcePath =
-      rawPage.sourcePath?.replace(/\\/g, '/') ||
-      createPageSourcePath(page.name)
-
-    if (!rawPage.sourcePath || rawPage.sourcePath !== sourcePath) {
-      changed = true
-    }
-
-    return {
-      ...page,
-      sourcePath,
-      root,
-      components: normalizedComponents,
-    }
-  })
-
-  return {
-    pages: normalizedPages,
-    appShell: normalizedAppShell,
-    changed,
-  }
-}
-
-function normalizePageRoot(rawRoot: unknown, pageId: string): VisualNode {
-  const root = normalizeUnknownNode(rawRoot)
-
-  if (!primitiveRegistry[root.type].acceptsChildren) {
-    return createPageRoot(pageId)
-  }
-
-  return {
-    ...root,
-    id: root.id || `${pageId}:root`,
-    label: 'Page root',
-    children: [],
-  }
-}
-
-function normalizeUnknownNode(rawNode: unknown): VisualNode {
-  const node = rawNode as {
-    id?: string
-    type?: string
-    label?: string
-    props?: Record<string, unknown>
-    children?: unknown[]
-  }
-
-  if (isPrimitiveType(node.type)) {
-    return {
-      id: node.id ?? generateId(),
-      type: node.type,
-      label: node.label,
-      props: node.props ?? {},
-      children: (node.children ?? []).map((child) => normalizeUnknownNode(child)),
-    }
-  }
-
-  if (node.type === 'Navbar') {
-    return createComponentPreset('Navbar', {
-      navId: node.id,
-      logo: node.props?.logo,
-    })
-  }
-
-  if (node.type === 'Hero') {
-    return createComponentPreset('Hero', {
-      sectionId: node.id,
-      title: node.props?.title,
-      subtitle: node.props?.subtitle,
-      cta: node.props?.cta,
-    })
-  }
-
-  if (node.type === 'Card' || node.type === 'Button' || node.type === 'Footer') {
-    return createComponentPreset(node.type)
-  }
-
-  return createPrimitive('div')
-}
-
-function isPrimitiveType(type: unknown): type is PrimitiveType {
-  return typeof type === 'string' && type in primitiveRegistry
-}
-
-function persistProject(
-  pages: Page[],
-  appShell: AppShell,
-  projectName: string
-) {
-  cacheProject(pages, appShell, true, projectName)
-}
-
-function cacheProject(
-  pages: Page[],
-  appShell: AppShell,
-  dirty: boolean,
-  projectName: string
-) {
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  try {
-    window.localStorage.setItem(
-      projectCacheKey,
-      JSON.stringify({
-        ...createProjectSchema(pages, appShell, projectName),
-        dirty,
-        cachedAt: Date.now(),
-        projectId: activeProjectId,
-      })
-    )
-    scheduleTailwindSync(pages, appShell)
-  } catch (error) {
-    console.warn('Failed to cache visualbuild project state', error)
-  }
-}
-
-function scheduleTailwindSync(pages: Page[], appShell: AppShell) {
-  if (tailwindSyncTimeout !== null) {
-    window.clearTimeout(tailwindSyncTimeout)
-  }
-
-  tailwindSyncTimeout = window.setTimeout(() => {
-    tailwindSyncTimeout = null
-    void syncTailwindClasses(pages, appShell).catch((error: unknown) => {
-      console.warn('Failed to update live Tailwind classes', error)
-    })
-  }, 100)
-}
-
-function readCachedProject() {
-  if (typeof window === 'undefined') {
-    return null
-  }
-
-  try {
-    const cached = window.localStorage.getItem(projectCacheKey)
-
-    if (!cached) {
-      return null
-    }
-
-    const schema = JSON.parse(cached) as {
-      meta?: {
-        projectName?: string
-      }
-      appShell?: AppShell
-      pages?: Page[]
-      dirty?: boolean
-      projectId?: string
-    }
-
-    if (!schema.pages || schema.pages.length === 0) {
-      return null
-    }
-
-    const { pages, appShell } = normalizeLoadedProject(
-      schema.pages,
-      schema.appShell ?? defaultAppShell
-    )
-
-    return {
-      projectName: schema.meta?.projectName ?? defaultProjectName,
-      appShell,
-      pages,
-      activePageId: pages[0].id,
-      dirty: schema.dirty === true,
-      projectId: schema.projectId ?? '',
-    }
-  } catch (error) {
-    console.warn('Failed to restore cached visualbuild project state', error)
-    return null
-  }
-}
+import { v4 as uuid } from 'uuid'
+import { create } from 'zustand'
+import { primitiveRegistry } from '../data/primitiveRegistry'
+import type {
+  AppShell,
+  AppState,
+  ComponentType,
+  CustomComponentDefinition,
+  Page,
+  PrimitiveType,
+  VisualBuildRuntimeConfig,
+  VisualNode,
+} from '../types'
+import { createPageSourcePath } from '../utils/codegen'
+import {
+  createProjectSchema,
+  loadProjectConfig,
+  loadProjectSchema,
+  saveProjectSchema,
+  syncTailwindClasses,
+} from '../utils/projectPersistence'
+
+const generateId = () => uuid()
+const projectCacheKey = 'visualbuild:project-cache'
+
+const defaultAppShell: AppShell = {
+  header: null,
+  footer: null,
+}
+const defaultProjectName = 'my-app'
+const defaultProjectConfig: VisualBuildRuntimeConfig = {
+  paths: {
+    sourceDir: 'src',
+    pagesDir: 'src/pages',
+    layoutsDir: 'src/layouts',
+    appFile: 'src/App.tsx',
+    schemaFile: 'visualbuild/pages.json',
+    componentRegistryFile: 'visualbuild/components.json',
+    generatedManifestFile: 'visualbuild/generated-files.json',
+  },
+  editor: {
+    theme: 'dark',
+    defaultViewport: 'desktop',
+    responsiveWidths: {
+      mobile: 390,
+      tablet: 768,
+      desktop: 'fluid',
+    },
+    panels: {
+      leftOpen: true,
+      leftTab: 'elements',
+      rightOpen: true,
+      rightTab: 'properties',
+      codeView: 'page',
+    },
+  },
+  generator: {
+    emitApp: true,
+    emitLayout: true,
+    cleanStaleFiles: true,
+  },
+  deployment: {
+    provider: 'vercel',
+    outputDirectory: 'dist',
+  },
+}
+
+const defaultPage: Page = {
+  id: 'page-home',
+  name: 'Home',
+  route: '/',
+  sourcePath: createPageSourcePath('Home'),
+  root: createPageRoot('page-home'),
+  components: [
+    createComponentPreset('Navbar', {
+      navId: 'shell-navbar',
+      logo: 'My App',
+    }),
+    createComponentPreset('Hero', {
+      sectionId: 'home-hero',
+      title: 'Welcome to My App',
+      subtitle: 'Built visually. Owned as React code.',
+      cta: 'Start Building',
+    }),
+  ],
+}
+
+const cachedProject = readCachedProject()
+let tailwindSyncTimeout: number | null = null
+let activeProjectId = ''
+
+export const useAppStore = create<AppState>((set, get) => ({
+  projectName: cachedProject?.projectName ?? defaultProjectName,
+  appShell: cachedProject?.appShell ?? defaultAppShell,
+  pages: cachedProject?.pages ?? [],
+  activePageId: cachedProject?.activePageId ?? '',
+  selectedComponentId: null,
+  viewport: 'desktop',
+  previewMode: false,
+  isProjectLoaded: false,
+  customComponents: [],
+  projectConfig: defaultProjectConfig,
+
+  loadProject: async () => {
+    const config = await loadProjectConfig().catch((error: unknown) => {
+      console.warn('Failed to load visualbuild.config.ts', error)
+      return { ...defaultProjectConfig, customComponents: [] }
+    })
+    const schema = await loadProjectSchema().catch((error: unknown) => {
+      console.warn('Failed to load visualbuild/pages.json', error)
+      return null
+    })
+
+    if (!schema || schema.pages.length === 0) {
+      if (cachedProject) {
+        const normalized = normalizeLoadedProject(
+          cachedProject.pages,
+          cachedProject.appShell,
+          config.customComponents,
+          config.paths.pagesDir
+        )
+        activeProjectId = cachedProject.projectId
+        scheduleTailwindSync(normalized.pages, normalized.appShell)
+        set({
+          projectName: cachedProject.projectName,
+          appShell: normalized.appShell,
+          pages: normalized.pages,
+          activePageId: cachedProject.activePageId,
+          selectedComponentId: null,
+          viewport: config.editor.defaultViewport,
+          isProjectLoaded: true,
+          customComponents: config.customComponents,
+          projectConfig: config,
+        })
+        return
+      }
+
+      activeProjectId = defaultProjectName
+      if (get().isProjectLoaded) {
+        return
+      }
+
+      cacheProject([defaultPage], defaultAppShell, false, defaultProjectName)
+
+      set({
+        projectName: defaultProjectName,
+        appShell: defaultAppShell,
+        pages: [defaultPage],
+        activePageId: defaultPage.id,
+        selectedComponentId: null,
+        viewport: config.editor.defaultViewport,
+        isProjectLoaded: true,
+        customComponents: config.customComponents,
+        projectConfig: config,
+      })
+      return
+    }
+
+    const projectName = schema.meta?.projectName ?? defaultProjectName
+    activeProjectId = schema.runtimeProjectId ?? projectName
+
+    if (
+      cachedProject?.dirty &&
+      cachedProject.projectId === activeProjectId
+    ) {
+      const normalized = normalizeLoadedProject(
+        cachedProject.pages,
+        cachedProject.appShell,
+        config.customComponents,
+        config.paths.pagesDir
+      )
+      scheduleTailwindSync(normalized.pages, normalized.appShell)
+      set({
+        projectName: cachedProject.projectName,
+        appShell: normalized.appShell,
+        pages: normalized.pages,
+        activePageId: cachedProject.activePageId,
+        selectedComponentId: null,
+        viewport: config.editor.defaultViewport,
+        isProjectLoaded: true,
+        customComponents: config.customComponents,
+        projectConfig: config,
+      })
+      return
+    }
+
+    const { pages, appShell, changed } = normalizeLoadedProject(
+      schema.pages,
+      schema.appShell ?? defaultAppShell,
+      config.customComponents,
+      config.paths.pagesDir
+    )
+    cacheProject(pages, appShell, false, projectName)
+
+    set({
+      projectName,
+      appShell,
+      pages,
+      activePageId: pages[0].id,
+      selectedComponentId: null,
+      viewport: config.editor.defaultViewport,
+      isProjectLoaded: true,
+      customComponents: config.customComponents,
+      projectConfig: config,
+    })
+
+    if (changed) {
+      persistProject(pages, appShell, projectName)
+    }
+  },
+
+  refreshCustomComponents: async () => {
+    const config = await loadProjectConfig()
+    set((state) => {
+      const normalized = normalizeLoadedProject(
+        state.pages,
+        state.appShell,
+        config.customComponents,
+        config.paths.pagesDir
+      )
+      const refreshed = replaceCustomComponentTreesFromDefinitions(
+        normalized.pages,
+        normalized.appShell,
+        config.customComponents
+      )
+
+      if (normalized.changed || refreshed.changed) {
+        persistProject(
+          refreshed.pages,
+          refreshed.appShell,
+          state.projectName
+        )
+      }
+
+      return {
+        customComponents: config.customComponents,
+        projectConfig: config,
+        pages: refreshed.pages,
+        appShell: refreshed.appShell,
+      }
+    })
+  },
+
+  refreshProjectFromDisk: async (force = false) => {
+    const schema = await loadProjectSchema().catch((error: unknown) => {
+      console.warn('Failed to refresh visualbuild/pages.json', error)
+      return null
+    })
+
+    if (!schema || schema.pages.length === 0) {
+      return 'failed'
+    }
+
+    const projectName = schema.meta?.projectName ?? defaultProjectName
+    const nextProjectId = schema.runtimeProjectId ?? projectName
+    const currentCache = readCachedProject()
+
+    if (
+      !force &&
+      currentCache?.dirty &&
+      currentCache.projectId === nextProjectId
+    ) {
+      return 'skipped-dirty'
+    }
+
+    const { pages, appShell } = normalizeLoadedProject(
+      schema.pages,
+      schema.appShell ?? defaultAppShell,
+      get().customComponents,
+      get().projectConfig.paths.pagesDir
+    )
+    const currentActivePageId = get().activePageId
+    const activePageId = pages.some(
+      (page) => page.id === currentActivePageId
+    )
+      ? currentActivePageId
+      : pages[0].id
+
+    activeProjectId = nextProjectId
+    cacheProject(pages, appShell, false, projectName)
+    set({
+      projectName,
+      appShell,
+      pages,
+      activePageId,
+      selectedComponentId: null,
+      isProjectLoaded: true,
+    })
+
+    return 'updated'
+  },
+
+  saveProject: async () => {
+    const { pages, appShell, isProjectLoaded, projectName } = get()
+
+    if (!isProjectLoaded) {
+      return
+    }
+
+    cacheProject(pages, appShell, true, projectName)
+    await saveProjectSchema(pages, appShell, projectName)
+    cacheProject(pages, appShell, false, projectName)
+  },
+
+  addPage: (name, route) => {
+    const pageId = generateId()
+    const page: Page = {
+      id: pageId,
+      name,
+      route,
+      sourcePath: createPageSourcePath(
+        name,
+        get().projectConfig.paths.pagesDir
+      ),
+      root: createPageRoot(pageId),
+      components: [],
+    }
+
+    set((state) => {
+      const pages = [
+        ...state.pages,
+        page,
+      ]
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return { pages }
+    })
+
+    return page
+  },
+
+  registerPage: (page) =>
+    set((state) => {
+      const pages = [...state.pages, page]
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return {
+        pages,
+        activePageId: page.id,
+        selectedComponentId: null,
+      }
+    }),
+
+  deletePage: (id) =>
+    set((state) => {
+      if (state.pages.length === 1) return state
+      const pages = state.pages.filter((page) => page.id !== id)
+      const activePageId =
+        state.activePageId === id ? pages[0].id : state.activePageId
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return {
+        pages,
+        activePageId,
+        selectedComponentId:
+          state.activePageId === id ? null : state.selectedComponentId,
+      }
+    }),
+
+  setActivePage: (id) => set({ activePageId: id, selectedComponentId: null }),
+
+  setSelectedComponent: (id) => set({ selectedComponentId: id }),
+
+  setViewport: (viewport) => set({ viewport }),
+
+  togglePreviewMode: () =>
+    set((state) => ({ previewMode: !state.previewMode })),
+
+  addComponent: (pageId, type) => {
+    get().addComponentAt(pageId, type, Number.POSITIVE_INFINITY)
+  },
+
+  addComponentAt: (pageId, type, index) =>
+    set((state) => {
+      const node = createComponentPreset(type)
+      const pages = state.pages.map((page) =>
+        page.id === pageId ? insertNodeAtRoot(page, node, index) : page
+      )
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return { pages, selectedComponentId: node.id }
+    }),
+
+  addPrimitive: (pageId, type) => {
+    get().addPrimitiveAt(pageId, type, Number.POSITIVE_INFINITY)
+  },
+
+  addPrimitiveAt: (pageId, type, index) =>
+    set((state) => {
+      const node = createPrimitive(type)
+      const pages = state.pages.map((page) =>
+        page.id === pageId ? insertNodeAtRoot(page, node, index) : page
+      )
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return { pages, selectedComponentId: node.id }
+    }),
+
+  addPrimitiveToNode: (parentNodeId, type) => {
+    get().addPrimitiveToNodeAt(parentNodeId, type, Number.POSITIVE_INFINITY)
+  },
+
+  addPrimitiveToNodeAt: (parentNodeId, type, index) =>
+    set((state) => {
+      const node = createPrimitive(type)
+      const customOwner = findCustomComponentOwner(
+        getProjectNodes(state.pages, state.appShell),
+        parentNodeId,
+        state.customComponents
+      )
+      if (customOwner) {
+        const targetIsCustomRoot = customOwner.node.id === parentNodeId
+        const updated = updateCustomComponentDefinitionTree(
+          state.pages,
+          state.appShell,
+          customOwner.type,
+          (children) =>
+            targetIsCustomRoot
+              ? insertNodeAt(children, node, index)
+              : addChildNodeAt(children, parentNodeId, node, index)
+        )
+        persistProject(updated.pages, updated.appShell, state.projectName)
+        return {
+          ...updated,
+          selectedComponentId: node.id,
+        }
+      }
+      const pages = state.pages.map((page) => ({
+        ...page,
+        components: addChildNodeAt(page.components, parentNodeId, node, index),
+      }))
+      const appShell = addChildToAppShell(
+        state.appShell,
+        parentNodeId,
+        node,
+        index
+      )
+
+      persistProject(pages, appShell, state.projectName)
+
+      return { appShell, pages, selectedComponentId: node.id }
+    }),
+
+  addComponentToNode: (parentNodeId, type) => {
+    get().addComponentToNodeAt(parentNodeId, type, Number.POSITIVE_INFINITY)
+  },
+
+  addComponentToNodeAt: (parentNodeId, type, index) =>
+    set((state) => {
+      const node = createComponentPreset(type)
+      const customOwner = findCustomComponentOwner(
+        getProjectNodes(state.pages, state.appShell),
+        parentNodeId,
+        state.customComponents
+      )
+      if (customOwner) {
+        const targetIsCustomRoot = customOwner.node.id === parentNodeId
+        const updated = updateCustomComponentDefinitionTree(
+          state.pages,
+          state.appShell,
+          customOwner.type,
+          (children) =>
+            targetIsCustomRoot
+              ? insertNodeAt(children, node, index)
+              : addChildNodeAt(children, parentNodeId, node, index)
+        )
+        persistProject(updated.pages, updated.appShell, state.projectName)
+        return {
+          ...updated,
+          selectedComponentId: node.id,
+        }
+      }
+      const pages = state.pages.map((page) => ({
+        ...page,
+        components: addChildNodeAt(page.components, parentNodeId, node, index),
+      }))
+      const appShell = addChildToAppShell(
+        state.appShell,
+        parentNodeId,
+        node,
+        index
+      )
+
+      persistProject(pages, appShell, state.projectName)
+
+      return { appShell, pages, selectedComponentId: node.id }
+    }),
+
+  addCustomComponent: (pageId, name) => {
+    get().addCustomComponentAt(pageId, name, Number.POSITIVE_INFINITY)
+  },
+
+  addCustomComponentAt: (pageId, name, index) =>
+    set((state) => {
+      const definition = findCustomComponent(state.customComponents, name)
+      const node = createCustomComponentNode(definition)
+      const pages = state.pages.map((page) =>
+        page.id === pageId ? insertNodeAtRoot(page, node, index) : page
+      )
+
+      persistProject(pages, state.appShell, state.projectName)
+      return { pages, selectedComponentId: node.id }
+    }),
+
+  addCustomComponentToNode: (parentNodeId, name) => {
+    get().addCustomComponentToNodeAt(
+      parentNodeId,
+      name,
+      Number.POSITIVE_INFINITY
+    )
+  },
+
+  addCustomComponentToNodeAt: (parentNodeId, name, index) =>
+    set((state) => {
+      const definition = findCustomComponent(state.customComponents, name)
+      const node = createCustomComponentNode(definition)
+      const customOwner = findCustomComponentOwner(
+        getProjectNodes(state.pages, state.appShell),
+        parentNodeId,
+        state.customComponents
+      )
+      if (customOwner) {
+        const targetIsCustomRoot = customOwner.node.id === parentNodeId
+        const updated = updateCustomComponentDefinitionTree(
+          state.pages,
+          state.appShell,
+          customOwner.type,
+          (children) =>
+            targetIsCustomRoot
+              ? insertNodeAt(children, node, index)
+              : addChildNodeAt(children, parentNodeId, node, index)
+        )
+        persistProject(updated.pages, updated.appShell, state.projectName)
+        return {
+          ...updated,
+          selectedComponentId: node.id,
+        }
+      }
+      const pages = state.pages.map((page) => ({
+        ...page,
+        components: addChildNodeAt(page.components, parentNodeId, node, index),
+      }))
+      const appShell = addChildToAppShell(
+        state.appShell,
+        parentNodeId,
+        node,
+        index
+      )
+
+      persistProject(pages, appShell, state.projectName)
+      return { appShell, pages, selectedComponentId: node.id }
+    }),
+
+  registerCustomComponent: (definition) =>
+    set((state) => ({
+      customComponents: state.customComponents.some(
+        (component) => component.name === definition.name
+      )
+        ? state.customComponents
+        : [...state.customComponents, definition],
+    })),
+
+  removeNode: (nodeId) =>
+    set((state) => {
+      const customOwner = findCustomComponentOwner(
+        getProjectNodes(state.pages, state.appShell),
+        nodeId,
+        state.customComponents,
+        false
+      )
+      if (customOwner) {
+        const updated = updateCustomComponentDefinitionTree(
+          state.pages,
+          state.appShell,
+          customOwner.type,
+          (children) => removeNodeById(children, nodeId)
+        )
+        persistProject(updated.pages, updated.appShell, state.projectName)
+        return {
+          ...updated,
+          selectedComponentId: null,
+        }
+      }
+      const appShell = removeShellNodeById(state.appShell, nodeId)
+      const pages = state.pages.map((page) => ({
+        ...page,
+        components: removeNodeById(page.components, nodeId),
+      }))
+
+      persistProject(pages, appShell, state.projectName)
+
+      return {
+        appShell,
+        pages,
+        selectedComponentId:
+          state.selectedComponentId === nodeId ? null : state.selectedComponentId,
+      }
+    }),
+
+  moveNode: (pageId, nodeId, targetParentNodeId, targetIndex) =>
+    set((state) => {
+      const projectNodes = getProjectNodes(state.pages, state.appShell)
+      const customOwner = findCustomComponentOwner(
+        projectNodes,
+        nodeId,
+        state.customComponents,
+        false
+      )
+      const targetOwner = targetParentNodeId
+        ? findCustomComponentOwner(
+            projectNodes,
+            targetParentNodeId,
+            state.customComponents
+          )
+        : null
+      if (
+        customOwner &&
+        targetOwner?.type === customOwner.type
+      ) {
+        const targetIsRoot =
+          targetOwner.node.id === targetParentNodeId
+        const updated = updateCustomComponentDefinitionTree(
+          state.pages,
+          state.appShell,
+          customOwner.type,
+          (children) =>
+            moveNodeWithinDefinition(
+              children,
+              nodeId,
+              targetIsRoot ? null : targetParentNodeId,
+              targetIndex
+            )
+        )
+        persistProject(updated.pages, updated.appShell, state.projectName)
+        return {
+          ...updated,
+          selectedComponentId: nodeId,
+        }
+      }
+      const movedProject = moveNodeInProject(
+        state.pages,
+        state.appShell,
+        pageId,
+        nodeId,
+        targetParentNodeId,
+        targetIndex,
+        state.customComponents
+      )
+
+      if (!movedProject) {
+        return state
+      }
+
+      persistProject(
+        movedProject.pages,
+        movedProject.appShell,
+        state.projectName
+      )
+
+      return {
+        pages: movedProject.pages,
+        appShell: movedProject.appShell,
+        selectedComponentId: nodeId,
+      }
+    }),
+
+  moveComponent: (pageId, nodeId, targetIndex) =>
+    set((state) => {
+      const pages = state.pages.map((page) =>
+        page.id === pageId ? moveRootNode(page, nodeId, targetIndex) : page
+      )
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return { pages }
+    }),
+
+  removeComponent: (pageId, nodeId) =>
+    set((state) => {
+      const pages = state.pages.map((page) =>
+        page.id === pageId
+          ? { ...page, components: removeNodeById(page.components, nodeId) }
+          : page
+      )
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return {
+        pages,
+        selectedComponentId:
+          state.selectedComponentId === nodeId ? null : state.selectedComponentId,
+      }
+    }),
+
+  setAppShellComponent: (_slot, type) => {
+    const slot = type === 'Footer' ? 'footer' : 'header'
+
+    set((state) => {
+      const node = createComponentPreset(type)
+      const appShell = {
+        ...state.appShell,
+        [slot]: node,
+      }
+
+      persistProject(state.pages, appShell, state.projectName)
+
+      return {
+        appShell,
+        selectedComponentId: node.id,
+      }
+    })
+  },
+
+  removeAppShellComponent: (slot) =>
+    set((state) => {
+      const removedNodeId = state.appShell[slot]?.id
+      const appShell = {
+        ...state.appShell,
+        [slot]: null,
+      }
+
+      persistProject(state.pages, appShell, state.projectName)
+
+      return {
+        appShell,
+        selectedComponentId:
+          state.selectedComponentId === removedNodeId
+            ? null
+            : state.selectedComponentId,
+      }
+    }),
+
+  updateComponentProps: (_pageId, nodeId, props) => {
+    get().updateNodeProps(nodeId, props)
+  },
+
+  updateNodeProps: (nodeId, props) =>
+    set((state) => {
+      const projectNodes = getProjectNodes(state.pages, state.appShell)
+      const definitionOwner = findCustomComponentOwner(
+        projectNodes,
+        nodeId
+        ,
+        state.customComponents,
+        false
+      )
+      if (definitionOwner) {
+        const updated = updateCustomComponentDefinitionTree(
+          state.pages,
+          state.appShell,
+          definitionOwner.type,
+          (children) => updateNodeProps(children, nodeId, props)
+        )
+        persistProject(updated.pages, updated.appShell, state.projectName)
+        return updated
+      }
+      const selectedNode = findNodeInTreeList(projectNodes, nodeId)
+      const customType = state.customComponents.some(
+        (component) => component.name === selectedNode?.type
+      )
+        ? selectedNode?.type
+        : null
+      const appShell = customType
+        ? updateShellNodesByType(state.appShell, customType, props)
+        : updateShellNodeProps(state.appShell, nodeId, props)
+      const pages = state.pages.map((page) => ({
+        ...page,
+        components: customType
+          ? updateNodesByType(page.components, customType, props)
+          : updateNodeProps(page.components, nodeId, props),
+      }))
+
+      persistProject(pages, appShell, state.projectName)
+
+      return { appShell, pages }
+    }),
+
+  updatePageRoot: (pageId, updates) =>
+    set((state) => {
+      const pages = state.pages.map((page) => {
+        if (page.id !== pageId) {
+          return page
+        }
+
+        const nextType = (
+          updates.type ?? page.root.type
+        ) as PrimitiveType
+        const defaultProps =
+          updates.type && updates.type !== page.root.type
+            ? primitiveRegistry[nextType].defaultProps
+            : {}
+
+        return {
+          ...page,
+          root: {
+            ...page.root,
+            type: nextType,
+            props: {
+              ...defaultProps,
+              ...page.root.props,
+              ...(updates.props ?? {}),
+            },
+          },
+        }
+      })
+
+      persistProject(pages, state.appShell, state.projectName)
+
+      return { pages }
+    }),
+
+  updateAppShellProps: (slot, props) =>
+    set((state) => {
+      const node = state.appShell[slot]
+
+      if (!node) {
+        return state
+      }
+
+      const appShell = {
+        ...state.appShell,
+        [slot]: {
+          ...node,
+          props: {
+            ...node.props,
+            ...props,
+          },
+        },
+      }
+
+      persistProject(state.pages, appShell, state.projectName)
+
+      return { appShell }
+    }),
+}))
+
+function createPageRoot(pageId: string, type: PrimitiveType = 'div'): VisualNode {
+  return {
+    id: `${pageId}:root`,
+    type,
+    label: 'Page root',
+    props: {
+      ...primitiveRegistry[type].defaultProps,
+      className: 'min-h-screen',
+    },
+    children: [],
+  }
+}
+
+function createPrimitive(type: PrimitiveType, props = {}): VisualNode {
+  return {
+    id: generateId(),
+    type,
+    props: { ...primitiveRegistry[type].defaultProps, ...props },
+    children: [],
+  }
+}
+
+function createPresetNode(
+  type: PrimitiveType,
+  label: string,
+  props: Record<string, unknown>,
+  children: VisualNode[] = []
+): VisualNode {
+  return {
+    id: generateId(),
+    type,
+    label,
+    props: { ...primitiveRegistry[type].defaultProps, ...props },
+    children,
+  }
+}
+
+function findCustomComponent(
+  definitions: CustomComponentDefinition[],
+  name: string
+) {
+  const definition = definitions.find((candidate) => candidate.name === name)
+
+  if (!definition) {
+    throw new Error(`Custom component "${name}" is not registered`)
+  }
+
+  return definition
+}
+
+function createCustomComponentNode(
+  definition: CustomComponentDefinition
+): VisualNode {
+  return {
+    id: generateId(),
+    type: definition.name,
+    label: definition.label,
+    props: {
+      ...definition.defaultProps,
+      componentTree: {
+        children: cloneVisualNodes(
+          definition.preview?.children.filter(
+            (node) => node.type !== customComponentChildrenSlotType
+          ) ?? []
+        ),
+      },
+    },
+    children: [],
+  }
+}
+
+export function createComponentPreset(
+  type: ComponentType,
+  overrides: Record<string, unknown> = {}
+): VisualNode {
+  if (type === 'Navbar') {
+    return {
+      id: String(overrides.navId ?? generateId()),
+      type: 'nav',
+      label: 'Navbar',
+      props: {
+        ...primitiveRegistry.nav.defaultProps,
+        className:
+          'flex items-center justify-between px-6 py-3 bg-gray-900 text-white',
+      },
+      children: [
+        createPrimitive('span', {
+          text: String(overrides.logo ?? 'My App'),
+          className: 'font-bold text-sm',
+        }),
+        createPrimitive('div', {
+          className: 'flex items-center gap-4',
+        }),
+        createPrimitive('div', {
+          className: 'flex items-center gap-2',
+        }),
+      ],
+    }
+  }
+
+  if (type === 'Hero') {
+    return {
+      id: String(overrides.sectionId ?? generateId()),
+      type: 'section',
+      label: 'Hero',
+      props: {
+        className:
+          'bg-gradient-to-br from-blue-600 to-indigo-700 text-white px-8 py-12 text-center',
+      },
+      children: [
+        createPrimitive('h1', {
+          text: String(overrides.title ?? 'Welcome to My App'),
+          className: 'text-2xl font-bold mb-2',
+        }),
+        createPrimitive('p', {
+          text: String(
+            overrides.subtitle ?? 'Built visually. Owned as React code.'
+          ),
+          className: 'text-sm text-blue-100 mb-6',
+        }),
+        createPrimitive('button', {
+          text: String(overrides.cta ?? 'Start Building'),
+          className:
+            'px-5 py-2 bg-white text-blue-700 rounded-full text-sm font-semibold',
+        }),
+      ],
+    }
+  }
+
+  if (type === 'Card') {
+    return {
+      id: generateId(),
+      type: 'article',
+      label: 'Card',
+      props: { ...primitiveRegistry.article.defaultProps },
+      children: [
+        createPrimitive('h3', {
+          text: 'Card Title',
+          className: 'font-semibold text-gray-900 mb-1',
+        }),
+        createPrimitive('p', {
+          text: 'Card description goes here.',
+          className: 'text-sm text-gray-500',
+        }),
+      ],
+    }
+  }
+
+  if (type === 'Button') {
+    return createPrimitive('button', {
+      text: 'Click me',
+      className: 'px-4 py-1.5 rounded text-sm font-medium bg-blue-600 text-white',
+    })
+  }
+
+  if (type === 'Footer') {
+    return createPresetNode(
+      'footer',
+      'Footer',
+      {},
+      [
+        createPrimitive('span', {
+          text: 'Copyright 2026 MySite',
+          className: '',
+        }),
+      ]
+    )
+  }
+
+  if (type === 'Grid') {
+    return createPresetNode(
+      'section',
+      'Grid',
+      { className: 'w-full px-6 py-10' },
+      [
+        createPrimitive('h2', {
+          text: 'Explore the collection',
+          className: 'mb-6 text-2xl font-semibold text-gray-900',
+        }),
+        createPresetNode(
+          'div',
+          'Grid items',
+          {
+            className:
+              'grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3',
+          },
+          ['One', 'Two', 'Three'].map((title) =>
+            createPresetNode(
+              'article',
+              'Grid item',
+              {
+                className:
+                  'rounded-lg border border-gray-200 bg-white p-5 shadow-sm',
+              },
+              [
+                createPrimitive('h3', {
+                  text: `Item ${title}`,
+                  className: 'text-lg font-semibold text-gray-900',
+                }),
+                createPrimitive('p', {
+                  text: 'Add your content here.',
+                  className: 'mt-2 text-sm text-gray-600',
+                }),
+              ]
+            )
+          )
+        ),
+      ]
+    )
+  }
+
+  if (type === 'Testimonials') {
+    return createPresetNode(
+      'section',
+      'Testimonials',
+      { className: 'w-full bg-gray-50 px-6 py-12' },
+      [
+        createPrimitive('h2', {
+          text: 'What customers say',
+          className: 'mb-8 text-center text-2xl font-semibold text-gray-900',
+        }),
+        createPresetNode(
+          'div',
+          'Testimonial list',
+          { className: 'grid grid-cols-1 gap-5 md:grid-cols-3' },
+          ['Alex Morgan', 'Sam Rivera', 'Jamie Lee'].map((name) =>
+            createPresetNode(
+              'blockquote',
+              'Testimonial',
+              {
+                className:
+                  'rounded-lg border border-gray-200 bg-white p-6 shadow-sm',
+              },
+              [
+                createPrimitive('p', {
+                  text: 'This product made our workflow faster and clearer.',
+                  className: 'text-sm leading-6 text-gray-700',
+                }),
+                createPrimitive('cite', {
+                  text: name,
+                  className: 'mt-4 block text-sm font-semibold text-gray-900',
+                }),
+              ]
+            )
+          )
+        ),
+      ]
+    )
+  }
+
+  if (type === 'Pricing') {
+    return createPresetNode(
+      'section',
+      'Pricing',
+      { className: 'w-full px-6 py-12' },
+      [
+        createPrimitive('h2', {
+          text: 'Simple pricing',
+          className: 'mb-8 text-center text-2xl font-semibold text-gray-900',
+        }),
+        createPresetNode(
+          'div',
+          'Pricing plans',
+          { className: 'grid grid-cols-1 gap-5 md:grid-cols-3' },
+          [
+            ['Starter', '$9'],
+            ['Professional', '$29'],
+            ['Team', '$59'],
+          ].map(([name, price]) =>
+            createPresetNode(
+              'article',
+              'Pricing plan',
+              {
+                className:
+                  'rounded-lg border border-gray-200 bg-white p-6 text-center shadow-sm',
+              },
+              [
+                createPrimitive('h3', {
+                  text: name,
+                  className: 'text-lg font-semibold text-gray-900',
+                }),
+                createPrimitive('p', {
+                  text: `${price} / month`,
+                  className: 'my-4 text-2xl font-bold text-blue-600',
+                }),
+                createPrimitive('button', {
+                  text: 'Choose plan',
+                  className:
+                    'rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white',
+                }),
+              ]
+            )
+          )
+        ),
+      ]
+    )
+  }
+
+  if (type === 'Form') {
+    return createPresetNode(
+      'form',
+      'Form',
+      {
+        className:
+          'mx-auto w-full max-w-xl space-y-4 rounded-lg border border-gray-200 bg-white p-6 shadow-sm',
+      },
+      [
+        createPrimitive('h2', {
+          text: 'Tell us about yourself',
+          className: 'text-xl font-semibold text-gray-900',
+        }),
+        createPrimitive('label', {
+          text: 'Name',
+          className: 'block text-sm font-medium text-gray-700',
+        }),
+        createPrimitive('input', {
+          type: 'text',
+          placeholder: 'Your name',
+          className:
+            'w-full rounded-md border border-gray-300 px-3 py-2 text-sm',
+        }),
+        createPrimitive('button', {
+          text: 'Submit',
+          className:
+            'rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white',
+        }),
+      ]
+    )
+  }
+
+  if (type === 'Image') {
+    return createPresetNode(
+      'figure',
+      'Image',
+      { className: 'w-full overflow-hidden rounded-lg bg-gray-100' },
+      [
+        createPrimitive('img', {
+          src: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80',
+          alt: 'Workspace with a laptop',
+          className: 'h-72 w-full object-cover',
+        }),
+        createPrimitive('figcaption', {
+          text: 'Replace this image and caption with your own.',
+          className: 'px-4 py-3 text-sm text-gray-600',
+        }),
+      ]
+    )
+  }
+
+  if (type === 'Features') {
+    return createPresetNode(
+      'section',
+      'Features',
+      { className: 'w-full px-6 py-12' },
+      [
+        createPrimitive('h2', {
+          text: 'Everything you need',
+          className: 'mb-8 text-center text-2xl font-semibold text-gray-900',
+        }),
+        createPresetNode(
+          'div',
+          'Feature list',
+          { className: 'grid grid-cols-1 gap-6 md:grid-cols-3' },
+          ['Fast setup', 'Flexible design', 'Owned source code'].map(
+            (title, index) =>
+              createPresetNode(
+                'article',
+                'Feature',
+                { className: 'rounded-lg bg-gray-50 p-5' },
+                [
+                  createPrimitive('span', {
+                    text: String(index + 1).padStart(2, '0'),
+                    className: 'text-xs font-bold text-blue-600',
+                  }),
+                  createPrimitive('h3', {
+                    text: title,
+                    className: 'mt-3 text-lg font-semibold text-gray-900',
+                  }),
+                  createPrimitive('p', {
+                    text: 'Describe this product benefit in one clear sentence.',
+                    className: 'mt-2 text-sm text-gray-600',
+                  }),
+                ]
+              )
+          )
+        ),
+      ]
+    )
+  }
+
+  if (type === 'Gallery') {
+    return createPresetNode(
+      'section',
+      'Gallery',
+      { className: 'w-full px-6 py-12' },
+      [
+        createPrimitive('h2', {
+          text: 'Gallery',
+          className: 'mb-6 text-2xl font-semibold text-gray-900',
+        }),
+        createPresetNode(
+          'div',
+          'Gallery grid',
+          { className: 'grid grid-cols-2 gap-3 md:grid-cols-3' },
+          [1015, 1016, 1025].map((imageId, index) =>
+            createPresetNode(
+              'figure',
+              'Gallery image',
+              { className: 'overflow-hidden rounded-lg bg-gray-100' },
+              [
+                createPrimitive('img', {
+                  src: `https://picsum.photos/id/${imageId}/800/600`,
+                  alt: `Gallery item ${index + 1}`,
+                  className: 'aspect-[4/3] w-full object-cover',
+                }),
+              ]
+            )
+          )
+        ),
+      ]
+    )
+  }
+
+  if (type === 'FAQ') {
+    return createPresetNode(
+      'section',
+      'FAQ',
+      { className: 'mx-auto w-full max-w-3xl px-6 py-12' },
+      [
+        createPrimitive('h2', {
+          text: 'Frequently asked questions',
+          className: 'mb-6 text-2xl font-semibold text-gray-900',
+        }),
+        ...[
+          'Can I edit every element?',
+          'Does the builder generate React code?',
+          'Can I use Tailwind classes?',
+        ].map((question) =>
+          createPresetNode(
+            'details',
+            'FAQ item',
+            { className: 'border-b border-gray-200 py-4' },
+            [
+              createPrimitive('summary', {
+                text: question,
+                className: 'cursor-pointer font-medium text-gray-900',
+              }),
+              createPrimitive('p', {
+                text: 'Add a concise answer for this question.',
+                className: 'mt-3 text-sm text-gray-600',
+              }),
+            ]
+          )
+        ),
+      ]
+    )
+  }
+
+  if (type === 'ContactForm') {
+    return createPresetNode(
+      'section',
+      'Contact Form',
+      { className: 'w-full bg-gray-50 px-6 py-12' },
+      [
+        createPresetNode(
+          'form',
+          'Contact form fields',
+          {
+            className:
+              'mx-auto w-full max-w-xl space-y-4 rounded-lg bg-white p-6 shadow-sm',
+          },
+          [
+            createPrimitive('h2', {
+              text: 'Contact us',
+              className: 'text-2xl font-semibold text-gray-900',
+            }),
+            createPrimitive('input', {
+              type: 'text',
+              placeholder: 'Name',
+              className:
+                'w-full rounded-md border border-gray-300 px-3 py-2 text-sm',
+            }),
+            createPrimitive('input', {
+              type: 'email',
+              placeholder: 'Email',
+              className:
+                'w-full rounded-md border border-gray-300 px-3 py-2 text-sm',
+            }),
+            createPrimitive('textarea', {
+              placeholder: 'Message',
+              className:
+                'min-h-32 w-full rounded-md border border-gray-300 px-3 py-2 text-sm',
+            }),
+            createPrimitive('button', {
+              text: 'Send message',
+              className:
+                'rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white',
+            }),
+          ]
+        ),
+      ]
+    )
+  }
+
+  return createPresetNode(
+    'section',
+    'Login Form',
+    { className: 'flex w-full justify-center bg-gray-50 px-6 py-12' },
+    [
+      createPresetNode(
+        'form',
+        'Login form fields',
+        {
+          className:
+            'w-full max-w-sm space-y-4 rounded-lg bg-white p-6 shadow-sm',
+        },
+        [
+          createPrimitive('h2', {
+            text: 'Welcome back',
+            className: 'text-2xl font-semibold text-gray-900',
+          }),
+          createPrimitive('input', {
+            type: 'email',
+            placeholder: 'Email',
+            className:
+              'w-full rounded-md border border-gray-300 px-3 py-2 text-sm',
+          }),
+          createPrimitive('input', {
+            type: 'password',
+            placeholder: 'Password',
+            className:
+              'w-full rounded-md border border-gray-300 px-3 py-2 text-sm',
+          }),
+          createPrimitive('button', {
+            text: 'Sign in',
+            className:
+              'w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-semibold text-white',
+          }),
+        ]
+      ),
+    ]
+  )
+}
+
+function insertNodeAtRoot(page: Page, node: VisualNode, index: number): Page {
+  const components = [...page.components]
+  const safeIndex = Math.max(0, Math.min(index, components.length))
+
+  components.splice(safeIndex, 0, node)
+
+  return { ...page, components }
+}
+
+function addChildNodeAt(
+  nodes: VisualNode[],
+  parentNodeId: string,
+  child: VisualNode,
+  index: number
+): VisualNode[] {
+  return nodes.map((node) =>
+    node.id === parentNodeId
+      ? { ...node, children: insertNodeAt(node.children, child, index) }
+      : {
+          ...node,
+          children: addChildNodeAt(node.children, parentNodeId, child, index),
+        }
+  )
+}
+
+function addChildToAppShell(
+  appShell: AppShell,
+  parentNodeId: string,
+  child: VisualNode,
+  index: number
+): AppShell {
+  return {
+    header: appShell.header
+      ? insertChildIntoTree(appShell.header, parentNodeId, child, index)
+      : null,
+    footer: appShell.footer
+      ? insertChildIntoTree(appShell.footer, parentNodeId, child, index)
+      : null,
+  }
+}
+
+function removeNodeById(nodes: VisualNode[], nodeId: string): VisualNode[] {
+  return nodes
+    .filter((node) => node.id !== nodeId)
+    .map((node) => ({
+      ...node,
+      children: removeNodeById(node.children, nodeId),
+    }))
+}
+
+function removeShellNodeById(appShell: AppShell, nodeId: string): AppShell {
+  return {
+    header:
+      appShell.header?.id === nodeId
+        ? null
+        : appShell.header
+          ? {
+              ...appShell.header,
+              children: removeNodeById(appShell.header.children, nodeId),
+            }
+          : null,
+    footer:
+      appShell.footer?.id === nodeId
+        ? null
+        : appShell.footer
+          ? {
+              ...appShell.footer,
+              children: removeNodeById(appShell.footer.children, nodeId),
+            }
+          : null,
+  }
+}
+
+function updateNodeProps(
+  nodes: VisualNode[],
+  nodeId: string,
+  props: Record<string, unknown>
+): VisualNode[] {
+  return nodes.map((node) =>
+    node.id === nodeId
+      ? { ...node, props: { ...node.props, ...props } }
+      : { ...node, children: updateNodeProps(node.children, nodeId, props) }
+  )
+}
+
+function updateShellNodeProps(
+  appShell: AppShell,
+  nodeId: string,
+  props: Record<string, unknown>
+): AppShell {
+  return {
+    header: appShell.header
+      ? updateNodeInTree(appShell.header, nodeId, props)
+      : null,
+    footer: appShell.footer
+      ? updateNodeInTree(appShell.footer, nodeId, props)
+      : null,
+  }
+}
+
+function updateNodesByType(
+  nodes: VisualNode[],
+  type: string,
+  props: Record<string, unknown>
+): VisualNode[] {
+  return nodes.map((node) => ({
+    ...node,
+    props:
+      node.type === type ? { ...node.props, ...props } : node.props,
+    children: updateNodesByType(node.children, type, props),
+  }))
+}
+
+function updateShellNodesByType(
+  appShell: AppShell,
+  type: string,
+  props: Record<string, unknown>
+): AppShell {
+  const updateRoot = (node: VisualNode | null) =>
+    node
+      ? {
+          ...node,
+          props:
+            node.type === type ? { ...node.props, ...props } : node.props,
+          children: updateNodesByType(node.children, type, props),
+        }
+      : null
+
+  return {
+    header: updateRoot(appShell.header),
+    footer: updateRoot(appShell.footer),
+  }
+}
+
+function updateNodeInTree(
+  node: VisualNode,
+  nodeId: string,
+  props: Record<string, unknown>
+): VisualNode {
+  if (node.id === nodeId) {
+    return { ...node, props: { ...node.props, ...props } }
+  }
+
+  return {
+    ...node,
+    children: node.children.map((child) =>
+      updateNodeInTree(child, nodeId, props)
+    ),
+  }
+}
+
+type NodeScope = `page:${string}` | 'shell:header' | 'shell:footer'
+
+interface NodeLocation {
+  node: VisualNode
+  parentNodeId: string | null
+  index: number
+  scope: NodeScope
+}
+
+function moveNodeInProject(
+  pages: Page[],
+  appShell: AppShell,
+  pageId: string,
+  nodeId: string,
+  targetParentNodeId: string | null,
+  targetIndex: number,
+  customComponents: CustomComponentDefinition[] = []
+) {
+  const source = findMovableNode(pages, appShell, nodeId)
+
+  if (!source) {
+    return null
+  }
+
+  if (
+    targetParentNodeId === nodeId ||
+    (targetParentNodeId !== null &&
+      containsNode(source.node, targetParentNodeId))
+  ) {
+    return null
+  }
+
+  const destination = findDestination(
+    pages,
+    appShell,
+    pageId,
+    targetParentNodeId
+  )
+
+  if (!destination) {
+    return null
+  }
+
+  if (
+    destination.parentNode &&
+    !(
+      (isPrimitiveType(destination.parentNode.type) &&
+        primitiveRegistry[destination.parentNode.type].acceptsChildren) ||
+      customComponents.some(
+        (component) =>
+          component.name === destination.parentNode?.type &&
+          component.acceptsChildren
+      )
+    )
+  ) {
+    return null
+  }
+
+  let insertionIndex = targetIndex
+
+  if (
+    source.scope === destination.scope &&
+    source.parentNodeId === targetParentNodeId &&
+    source.index < targetIndex
+  ) {
+    insertionIndex -= 1
+  }
+
+  let nextPages = pages.map((page) => ({
+    ...page,
+    components: removeNodeById(page.components, nodeId),
+  }))
+  let nextAppShell: AppShell = {
+    header: appShell.header
+      ? {
+          ...appShell.header,
+          children: removeNodeById(appShell.header.children, nodeId),
+        }
+      : null,
+    footer: appShell.footer
+      ? {
+          ...appShell.footer,
+          children: removeNodeById(appShell.footer.children, nodeId),
+        }
+      : null,
+  }
+
+  if (targetParentNodeId === null) {
+    nextPages = nextPages.map((page) =>
+      page.id === pageId
+        ? insertNodeAtRoot(page, source.node, insertionIndex)
+        : page
+    )
+  } else {
+    nextPages = nextPages.map((page) => ({
+      ...page,
+      components: addChildNodeAt(
+        page.components,
+        targetParentNodeId,
+        source.node,
+        insertionIndex
+      ),
+    }))
+    nextAppShell = addChildToAppShell(
+      nextAppShell,
+      targetParentNodeId,
+      source.node,
+      insertionIndex
+    )
+  }
+
+  return { pages: nextPages, appShell: nextAppShell }
+}
+
+function findMovableNode(
+  pages: Page[],
+  appShell: AppShell,
+  nodeId: string
+): NodeLocation | null {
+  for (const page of pages) {
+    const location = findNodeLocation(
+      page.components,
+      nodeId,
+      null,
+      `page:${page.id}`
+    )
+
+    if (location) {
+      return location
+    }
+  }
+
+  if (appShell.header) {
+    const location = findNodeLocation(
+      appShell.header.children,
+      nodeId,
+      appShell.header.id,
+      'shell:header'
+    )
+
+    if (location) {
+      return location
+    }
+  }
+
+  if (appShell.footer) {
+    return findNodeLocation(
+      appShell.footer.children,
+      nodeId,
+      appShell.footer.id,
+      'shell:footer'
+    )
+  }
+
+  return null
+}
+
+function findNodeLocation(
+  nodes: VisualNode[],
+  nodeId: string,
+  parentNodeId: string | null,
+  scope: NodeScope
+): NodeLocation | null {
+  for (const [index, node] of nodes.entries()) {
+    if (node.id === nodeId) {
+      return { node, parentNodeId, index, scope }
+    }
+
+    const childLocation = findNodeLocation(
+      node.children,
+      nodeId,
+      node.id,
+      scope
+    )
+
+    if (childLocation) {
+      return childLocation
+    }
+  }
+
+  return null
+}
+
+function findDestination(
+  pages: Page[],
+  appShell: AppShell,
+  pageId: string,
+  parentNodeId: string | null
+): { scope: NodeScope; parentNode: VisualNode | null } | null {
+  if (parentNodeId === null) {
+    return pages.some((page) => page.id === pageId)
+      ? { scope: `page:${pageId}`, parentNode: null }
+      : null
+  }
+
+  for (const page of pages) {
+    const parentNode = findNodeInTreeList(page.components, parentNodeId)
+
+    if (parentNode) {
+      return { scope: `page:${page.id}`, parentNode }
+    }
+  }
+
+  if (appShell.header) {
+    const parentNode = findNodeInTree(appShell.header, parentNodeId)
+
+    if (parentNode) {
+      return { scope: 'shell:header', parentNode }
+    }
+  }
+
+  if (appShell.footer) {
+    const parentNode = findNodeInTree(appShell.footer, parentNodeId)
+
+    if (parentNode) {
+      return { scope: 'shell:footer', parentNode }
+    }
+  }
+
+  return null
+}
+
+function findNodeInTreeList(nodes: VisualNode[], nodeId: string) {
+  for (const node of nodes) {
+    const match = findNodeInTree(node, nodeId)
+
+    if (match) {
+      return match
+    }
+  }
+
+  return null
+}
+
+function findNodeInTree(
+  node: VisualNode,
+  nodeId: string
+): VisualNode | null {
+  if (node.id === nodeId) {
+    return node
+  }
+
+  return findNodeInTreeList(node.children, nodeId)
+}
+
+function getProjectNodes(pages: Page[], appShell: AppShell) {
+  return [
+    ...(appShell.header ? [appShell.header] : []),
+    ...pages.flatMap((page) => page.components),
+    ...(appShell.footer ? [appShell.footer] : []),
+  ]
+}
+
+function findCustomComponentOwner(
+  nodes: VisualNode[],
+  nodeId: string,
+  definitions: CustomComponentDefinition[],
+  includeRoot = true
+): { type: string; node: VisualNode } | null {
+  const names = new Set(definitions.map((definition) => definition.name))
+
+  const visit = (node: VisualNode): { type: string; node: VisualNode } | null => {
+    if (names.has(node.type)) {
+      if (
+        (includeRoot && node.id === nodeId) ||
+        findNodeInTreeList(getCustomComponentTreeChildren(node), nodeId)
+      ) {
+        return { type: node.type, node }
+      }
+    }
+
+    for (const child of node.children) {
+      const owner = visit(child)
+      if (owner) return owner
+    }
+
+    return null
+  }
+
+  for (const node of nodes) {
+    const owner = visit(node)
+    if (owner) return owner
+  }
+
+  return null
+}
+
+function updateCustomComponentDefinitionTree(
+  pages: Page[],
+  appShell: AppShell,
+  type: string,
+  update: (children: VisualNode[], instance: VisualNode) => VisualNode[]
+) {
+  const updateNode = (node: VisualNode): VisualNode => {
+    const nextNode =
+      node.type === type
+        ? {
+            ...node,
+            props: {
+              ...node.props,
+              componentTree: {
+                children: update(
+                  getCustomComponentTreeChildren(node),
+                  node
+                ),
+              },
+            },
+          }
+        : node
+
+    return {
+      ...nextNode,
+      children: nextNode.children.map(updateNode),
+    }
+  }
+
+  return {
+    pages: pages.map((page) => ({
+      ...page,
+      components: page.components.map(updateNode),
+    })),
+    appShell: {
+      header: appShell.header ? updateNode(appShell.header) : null,
+      footer: appShell.footer ? updateNode(appShell.footer) : null,
+    },
+  }
+}
+
+function moveNodeWithinDefinition(
+  children: VisualNode[],
+  nodeId: string,
+  targetParentNodeId: string | null,
+  targetIndex: number
+) {
+  const source = findNodeLocation(
+    children,
+    nodeId,
+    null,
+    'page:definition'
+  )
+
+  if (
+    !source ||
+    targetParentNodeId === nodeId ||
+    (targetParentNodeId &&
+      containsNode(source.node, targetParentNodeId))
+  ) {
+    return children
+  }
+
+  let insertionIndex = targetIndex
+  if (
+    source.parentNodeId === targetParentNodeId &&
+    source.index < targetIndex
+  ) {
+    insertionIndex -= 1
+  }
+
+  const withoutSource = removeNodeById(children, nodeId)
+  return targetParentNodeId
+    ? addChildNodeAt(
+        withoutSource,
+        targetParentNodeId,
+        source.node,
+        insertionIndex
+      )
+    : insertNodeAt(withoutSource, source.node, insertionIndex)
+}
+
+function containsNode(node: VisualNode, nodeId: string): boolean {
+  return (
+    node.id === nodeId ||
+    node.children.some((child) => containsNode(child, nodeId))
+  )
+}
+
+function insertChildIntoTree(
+  node: VisualNode,
+  parentNodeId: string,
+  child: VisualNode,
+  index: number
+): VisualNode {
+  if (node.id === parentNodeId) {
+    return { ...node, children: insertNodeAt(node.children, child, index) }
+  }
+
+  return {
+    ...node,
+    children: node.children.map((nestedChild) =>
+      insertChildIntoTree(nestedChild, parentNodeId, child, index)
+    ),
+  }
+}
+
+function insertNodeAt(
+  nodes: VisualNode[],
+  node: VisualNode,
+  index: number
+) {
+  const nextNodes = [...nodes]
+  const safeIndex = Math.max(0, Math.min(index, nextNodes.length))
+
+  nextNodes.splice(safeIndex, 0, node)
+
+  return nextNodes
+}
+
+function moveRootNode(page: Page, nodeId: string, targetIndex: number): Page {
+  const fromIndex = page.components.findIndex((node) => node.id === nodeId)
+
+  if (fromIndex === -1) {
+    return page
+  }
+
+  const components = [...page.components]
+  const [node] = components.splice(fromIndex, 1)
+  const safeIndex = Math.max(0, Math.min(targetIndex, components.length))
+
+  components.splice(safeIndex, 0, node)
+
+  return { ...page, components }
+}
+
+const customComponentChildrenSlotType =
+  '__visualbuild_children_slot__'
+
+function normalizeLoadedProject(
+  pages: Page[],
+  appShell: AppShell,
+  customComponents: CustomComponentDefinition[] = [],
+  pagesDir = 'src/pages'
+) {
+  let changed = false
+  const normalizedAppShell: AppShell = {
+    header: appShell.header ? normalizeUnknownNode(appShell.header) : null,
+    footer: appShell.footer ? normalizeUnknownNode(appShell.footer) : null,
+  }
+
+  const normalizedPages = pages.map((page) => {
+    const rawPage = page as Page & { root?: unknown; sourcePath?: string }
+    const root = rawPage.root
+      ? normalizePageRoot(rawPage.root, page.id)
+      : createPageRoot(page.id)
+    const normalizedComponents: VisualNode[] = []
+
+    for (const rawNode of page.components) {
+      const node = normalizeUnknownNode(rawNode)
+
+      if (node.label === 'Navbar' && !normalizedAppShell.header) {
+        normalizedAppShell.header = node
+        changed = true
+        continue
+      }
+
+      if (node.label === 'Footer' && !normalizedAppShell.footer) {
+        normalizedAppShell.footer = node
+        changed = true
+        continue
+      }
+
+      normalizedComponents.push(node)
+    }
+
+    if (!rawPage.root) {
+      changed = true
+    }
+
+    const sourcePath =
+      rawPage.sourcePath?.replace(/\\/g, '/') ||
+      createPageSourcePath(page.name, pagesDir)
+
+    if (!rawPage.sourcePath || rawPage.sourcePath !== sourcePath) {
+      changed = true
+    }
+
+    return {
+      ...page,
+      sourcePath,
+      root,
+      components: normalizedComponents,
+    }
+  })
+
+  const hydrated = hydrateCustomComponentTrees(
+    normalizedPages,
+    normalizedAppShell,
+    customComponents
+  )
+
+  return {
+    pages: hydrated.pages,
+    appShell: hydrated.appShell,
+    changed: changed || hydrated.changed,
+  }
+}
+
+function hydrateCustomComponentTrees(
+  pages: Page[],
+  appShell: AppShell,
+  definitions: CustomComponentDefinition[]
+) {
+  const definitionByName = new Map(
+    definitions.map((definition) => [definition.name, definition])
+  )
+  const treesByName = new Map<string, VisualNode[]>()
+  let changed = false
+
+  const hydrateNode = (node: VisualNode): VisualNode => {
+    const definition = definitionByName.get(node.type)
+
+    if (!definition) {
+      return {
+        ...node,
+        children: node.children.map(hydrateNode),
+      }
+    }
+
+    let definitionChildren = treesByName.get(node.type)
+
+    if (!definitionChildren) {
+      const storedChildren = getCustomComponentTreeChildren(node)
+      const sourceChildren = cloneVisualNodes(
+        definition.preview?.children.filter(
+          (child) => child.type !== customComponentChildrenSlotType
+        ) ?? []
+      )
+      const instanceChildren = node.children.map(hydrateNode)
+      definitionChildren =
+        storedChildren.length > 0
+          ? cloneVisualNodes(storedChildren)
+          : [...sourceChildren, ...instanceChildren]
+      treesByName.set(node.type, definitionChildren)
+    }
+
+    if (
+      node.children.length > 0 ||
+      !hasCustomComponentTree(node)
+    ) {
+      changed = true
+    }
+
+    return {
+      ...node,
+      props: {
+        ...node.props,
+        componentTree: {
+          children: cloneVisualNodes(definitionChildren),
+        },
+      },
+      children: [],
+    }
+  }
+
+  const nextPages = pages.map((page) => ({
+    ...page,
+    components: page.components.map(hydrateNode),
+  }))
+  const nextAppShell = {
+    header: appShell.header ? hydrateNode(appShell.header) : null,
+    footer: appShell.footer ? hydrateNode(appShell.footer) : null,
+  }
+
+  return { pages: nextPages, appShell: nextAppShell, changed }
+}
+
+function replaceCustomComponentTreesFromDefinitions(
+  pages: Page[],
+  appShell: AppShell,
+  definitions: CustomComponentDefinition[]
+) {
+  const definitionByName = new Map(
+    definitions.map((definition) => [definition.name, definition])
+  )
+  const treesByName = new Map<string, VisualNode[]>()
+  let changed = false
+
+  const refreshNode = (node: VisualNode): VisualNode => {
+    const definition = definitionByName.get(node.type)
+
+    if (!definition?.preview) {
+      return {
+        ...node,
+        children: node.children.map(refreshNode),
+      }
+    }
+
+    let nextChildren = treesByName.get(node.type)
+    if (!nextChildren) {
+      nextChildren = reconcileVisualNodeIds(
+        definition.preview.children.filter(
+          (child) => child.type !== customComponentChildrenSlotType
+        ),
+        getCustomComponentTreeChildren(node)
+      )
+      treesByName.set(node.type, nextChildren)
+    }
+
+    if (
+      JSON.stringify(getCustomComponentTreeChildren(node)) !==
+      JSON.stringify(nextChildren)
+    ) {
+      changed = true
+    }
+
+    return {
+      ...node,
+      props: {
+        ...node.props,
+        componentTree: {
+          children: cloneVisualNodes(nextChildren),
+        },
+      },
+      children: [],
+    }
+  }
+
+  return {
+    pages: pages.map((page) => ({
+      ...page,
+      components: page.components.map(refreshNode),
+    })),
+    appShell: {
+      header: appShell.header ? refreshNode(appShell.header) : null,
+      footer: appShell.footer ? refreshNode(appShell.footer) : null,
+    },
+    changed,
+  }
+}
+
+function reconcileVisualNodeIds(
+  incoming: VisualNode[],
+  current: VisualNode[]
+): VisualNode[] {
+  return incoming.map((node, index) => {
+    const existing =
+      current[index]?.type === node.type
+        ? current[index]
+        : current.find((candidate) => candidate.type === node.type)
+
+    return {
+      ...node,
+      id: existing?.id ?? node.id,
+      props: { ...node.props },
+      children: reconcileVisualNodeIds(
+        node.children,
+        existing?.children ?? []
+      ),
+    }
+  })
+}
+
+function hasCustomComponentTree(node: VisualNode) {
+  const tree = node.props.componentTree
+  return (
+    typeof tree === 'object' &&
+    tree !== null &&
+    Array.isArray((tree as { children?: unknown }).children)
+  )
+}
+
+function getCustomComponentTreeChildren(node: VisualNode): VisualNode[] {
+  if (!hasCustomComponentTree(node)) return []
+
+  return (node.props.componentTree as { children: VisualNode[] }).children
+}
+
+function cloneVisualNodes(nodes: VisualNode[]): VisualNode[] {
+  return nodes.map((node) => ({
+    ...node,
+    props: { ...node.props },
+    children: cloneVisualNodes(node.children),
+  }))
+}
+
+function normalizePageRoot(rawRoot: unknown, pageId: string): VisualNode {
+  const root = normalizeUnknownNode(rawRoot)
+
+  if (
+    !isPrimitiveType(root.type) ||
+    !primitiveRegistry[root.type].acceptsChildren
+  ) {
+    return createPageRoot(pageId)
+  }
+
+  return {
+    ...root,
+    id: root.id || `${pageId}:root`,
+    label: 'Page root',
+    children: [],
+  }
+}
+
+function normalizeUnknownNode(rawNode: unknown): VisualNode {
+  const node = rawNode as {
+    id?: string
+    type?: string
+    label?: string
+    props?: Record<string, unknown>
+    children?: unknown[]
+  }
+
+  if (isPrimitiveType(node.type)) {
+    return {
+      id: node.id ?? generateId(),
+      type: node.type,
+      label: node.label,
+      props: node.props ?? {},
+      children: (node.children ?? []).map((child) => normalizeUnknownNode(child)),
+    }
+  }
+
+  if (node.type === 'Navbar') {
+    return createComponentPreset('Navbar', {
+      navId: node.id,
+      logo: node.props?.logo,
+    })
+  }
+
+  if (node.type === 'Hero') {
+    return createComponentPreset('Hero', {
+      sectionId: node.id,
+      title: node.props?.title,
+      subtitle: node.props?.subtitle,
+      cta: node.props?.cta,
+    })
+  }
+
+  if (
+    node.type === 'Card' ||
+    node.type === 'Button' ||
+    node.type === 'Footer' ||
+    node.type === 'Grid' ||
+    node.type === 'Testimonials' ||
+    node.type === 'Pricing' ||
+    node.type === 'Form' ||
+    node.type === 'Image' ||
+    node.type === 'Features' ||
+    node.type === 'Gallery' ||
+    node.type === 'FAQ' ||
+    node.type === 'ContactForm' ||
+    node.type === 'LoginForm'
+  ) {
+    return createComponentPreset(node.type)
+  }
+
+  return {
+    id: node.id ?? generateId(),
+    type: String(node.type ?? 'div'),
+    label: node.label,
+    props: node.props ?? {},
+    children: (node.children ?? []).map((child) => normalizeUnknownNode(child)),
+  }
+}
+
+function isPrimitiveType(type: unknown): type is PrimitiveType {
+  return typeof type === 'string' && type in primitiveRegistry
+}
+
+function persistProject(
+  pages: Page[],
+  appShell: AppShell,
+  projectName: string
+) {
+  cacheProject(pages, appShell, true, projectName)
+}
+
+function cacheProject(
+  pages: Page[],
+  appShell: AppShell,
+  dirty: boolean,
+  projectName: string
+) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  try {
+    window.localStorage.setItem(
+      projectCacheKey,
+      JSON.stringify({
+        ...createProjectSchema(pages, appShell, projectName),
+        dirty,
+        cachedAt: Date.now(),
+        projectId: activeProjectId,
+      })
+    )
+    scheduleTailwindSync(pages, appShell)
+  } catch (error) {
+    console.warn('Failed to cache visualbuild project state', error)
+  }
+}
+
+function scheduleTailwindSync(pages: Page[], appShell: AppShell) {
+  if (tailwindSyncTimeout !== null) {
+    window.clearTimeout(tailwindSyncTimeout)
+  }
+
+  tailwindSyncTimeout = window.setTimeout(() => {
+    tailwindSyncTimeout = null
+    void syncTailwindClasses(pages, appShell).catch((error: unknown) => {
+      console.warn('Failed to update live Tailwind classes', error)
+    })
+  }, 100)
+}
+
+function readCachedProject() {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  try {
+    const cached = window.localStorage.getItem(projectCacheKey)
+
+    if (!cached) {
+      return null
+    }
+
+    const schema = JSON.parse(cached) as {
+      meta?: {
+        projectName?: string
+      }
+      appShell?: AppShell
+      pages?: Page[]
+      dirty?: boolean
+      projectId?: string
+    }
+
+    if (!schema.pages || schema.pages.length === 0) {
+      return null
+    }
+
+    const { pages, appShell } = normalizeLoadedProject(
+      schema.pages,
+      schema.appShell ?? defaultAppShell
+    )
+
+    return {
+      projectName: schema.meta?.projectName ?? defaultProjectName,
+      appShell,
+      pages,
+      activePageId: pages[0].id,
+      dirty: schema.dirty === true,
+      projectId: schema.projectId ?? '',
+    }
+  } catch (error) {
+    console.warn('Failed to restore cached visualbuild project state', error)
+    return null
+  }
+}