From d65e62c46efc31ee7a19e377d049cac34ca935f0 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Wed, 26 Feb 2025 10:24:24 +0000
Subject: [PATCH] refactor: tidy up implementation after performance changes

---
 apps/docs/components/Preview/index.tsx        |   2 +-
 .../AutoField/fields/ArrayField/index.tsx     |  15 +-
 packages/core/components/AutoField/index.tsx  |   2 +-
 .../core/components/ComponentList/index.tsx   |   7 +-
 .../core/components/DragDropContext/index.tsx |  13 +-
 .../components/DraggableComponent/index.tsx   |  18 +-
 packages/core/components/DropZone/context.tsx |   2 +-
 packages/core/components/DropZone/index.tsx   |   7 +-
 .../DropZone/lib/use-content-with-preview.ts  |   2 +-
 .../components/DropZone/lib/use-drag-axis.ts  |   2 +-
 .../DropZone/lib/use-min-empty-height.ts      |   5 +-
 packages/core/components/LayerTree/index.tsx  |   4 +-
 packages/core/components/MenuBar/index.tsx    |  10 +-
 .../Puck/components/Canvas/index.tsx          |   2 +-
 .../Puck/components/Components/index.tsx      |   2 +-
 .../Puck/components/Fields/index.tsx          |  41 +--
 .../Puck/components/Outline/index.tsx         |   7 +-
 .../Puck/components/Preview/index.tsx         |   8 +-
 packages/core/components/Puck/index.tsx       | 212 +++++++++-----
 .../core/components/SidebarSection/index.tsx  |   2 +-
 .../components/ViewportControls/index.tsx     |   2 +-
 .../lib/__tests__/insert-component.spec.tsx   |   2 +-
 .../lib/__tests__/is-child-of-zone.spec.tsx   |  55 ----
 .../core/lib/__tests__/resolve-data.spec.tsx  |  74 ++---
 .../lib/__tests__/use-breadcrumbs.spec.tsx    | 192 ++++++-------
 packages/core/lib/get-item.ts                 |  12 +-
 packages/core/lib/resolve-data.ts             |  10 +-
 packages/core/lib/use-breadcrumbs.ts          |   8 +-
 packages/core/lib/use-component-list.tsx      |   2 +-
 packages/core/lib/use-parent.ts               |  13 +-
 packages/core/lib/use-preview-mode-hotkeys.ts |   9 +-
 packages/core/lib/use-puck.ts                 |  41 +--
 packages/core/reducer/__tests__/data.spec.tsx |   2 +-
 .../core/reducer/__tests__/state.spec.tsx     |   2 +-
 packages/core/store/index.ts                  | 267 ++++++++++++++++++
 .../slices/__tests__/fields.spec.tsx}         | 151 +++++-----
 .../slices/__tests__/history.spec.tsx}        | 110 ++++----
 .../slices/__tests__/nodes.spec.tsx}          |  96 +++----
 .../slices/__tests__/permissions.spec.tsx}    | 133 ++++-----
 .../field-store.ts => store/slices/fields.ts} |  77 ++---
 packages/core/store/slices/history.ts         | 192 +++++++++++++
 .../node-store.ts => store/slices/nodes.ts}   | 139 ++++-----
 .../slices/permissions.ts}                    |  85 +++---
 packages/core/stores/app-store.ts             | 196 -------------
 packages/core/stores/history-store.ts         | 184 ------------
 45 files changed, 1284 insertions(+), 1133 deletions(-)
 delete mode 100644 packages/core/lib/__tests__/is-child-of-zone.spec.tsx
 create mode 100644 packages/core/store/index.ts
 rename packages/core/{stores/__tests__/field-store.spec.tsx => store/slices/__tests__/fields.spec.tsx} (72%)
 rename packages/core/{stores/__tests__/history-store.spec.tsx => store/slices/__tests__/history.spec.tsx} (62%)
 rename packages/core/{stores/__tests__/node-store.spec.tsx => store/slices/__tests__/nodes.spec.tsx} (59%)
 rename packages/core/{stores/__tests__/permissions-store.spec.tsx => store/slices/__tests__/permissions.spec.tsx} (76%)
 rename packages/core/{stores/field-store.ts => store/slices/fields.ts} (51%)
 create mode 100644 packages/core/store/slices/history.ts
 rename packages/core/{stores/node-store.ts => store/slices/nodes.ts} (57%)
 rename packages/core/{stores/permissions-store.ts => store/slices/permissions.ts} (73%)
 delete mode 100644 packages/core/stores/app-store.ts
 delete mode 100644 packages/core/stores/history-store.ts

diff --git a/apps/docs/components/Preview/index.tsx b/apps/docs/components/Preview/index.tsx
index 22706bbd52..21b4d408be 100644
--- a/apps/docs/components/Preview/index.tsx
+++ b/apps/docs/components/Preview/index.tsx
@@ -86,7 +86,7 @@ const ConfigPreviewInner = ({
       {componentConfig.render && (
         <div className={getClassNameConfigPreview("preview")}>
           {componentConfig.render({
-            ...appState.data["content"][0].props,
+            ...appState.data["content"][0]?.props,
             puck: { renderDropZone: () => <div />, isEditing: false },
           })}
         </div>
diff --git a/packages/core/components/AutoField/fields/ArrayField/index.tsx b/packages/core/components/AutoField/fields/ArrayField/index.tsx
index 1019aaf339..05b4a40366 100644
--- a/packages/core/components/AutoField/fields/ArrayField/index.tsx
+++ b/packages/core/components/AutoField/fields/ArrayField/index.tsx
@@ -7,10 +7,9 @@ import { reorder, replace } from "../../../../lib";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types";
-import { getAppStore, useAppStore } from "../../../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../../../store";
 import { Sortable, SortableProvider } from "../../../Sortable";
 import { NestedFieldProvider, useNestedFieldContext } from "../../context";
-import { usePermissionsStore } from "../../../../stores/permissions-store";
 
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);
@@ -47,9 +46,11 @@ export const ArrayField = ({
     setLocalState({ arrayState, value });
   }, [value, thisArrayState]);
 
+  const appStore = useAppStoreApi();
+
   const mapArrayStateToUi = useCallback(
     (partialArrayState: Partial<ArrayState>) => {
-      const state = getAppStore().state;
+      const state = appStore.getState().state;
       return {
         arrayState: {
           ...state.ui.arrayState,
@@ -57,7 +58,7 @@ export const ArrayField = ({
         },
       };
     },
-    [arrayState]
+    [arrayState, appStore]
   );
 
   const getHighestIndex = useCallback(() => {
@@ -105,8 +106,8 @@ export const ArrayField = ({
 
   const [isDragging, setIsDragging] = useState(false);
 
-  const canEdit = usePermissionsStore(
-    (s) => s.getPermissions({ item: getAppStore().selectedItem }).edit
+  const canEdit = useAppStore(
+    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
 
   const forceReadOnly = !canEdit;
@@ -138,7 +139,7 @@ export const ArrayField = ({
             move.target
           );
 
-          const state = getAppStore().state;
+          const state = appStore.getState().state;
 
           const newUi = {
             arrayState: {
diff --git a/packages/core/components/AutoField/index.tsx b/packages/core/components/AutoField/index.tsx
index 8e88abae70..49cd268ebe 100644
--- a/packages/core/components/AutoField/index.tsx
+++ b/packages/core/components/AutoField/index.tsx
@@ -22,7 +22,7 @@ import {
 } from "./fields";
 import { Lock } from "lucide-react";
 import { ObjectField } from "./fields/ObjectField";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { useSafeId } from "../../lib/use-safe-id";
 import { NestedFieldContext } from "./context";
 
diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
index 6277880470..b9f0ce84d9 100644
--- a/packages/core/components/ComponentList/index.tsx
+++ b/packages/core/components/ComponentList/index.tsx
@@ -1,10 +1,9 @@
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { ReactNode } from "react";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Drawer } from "../Drawer";
-import { usePermissionsStore } from "../../stores/permissions-store";
 
 const getClassName = getClassNameFactory("ComponentList", styles);
 
@@ -17,9 +16,9 @@ const ComponentListItem = ({
   index?: number; // TODO deprecate
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const canInsert = usePermissionsStore(
+  const canInsert = useAppStore(
     (s) =>
-      s.getPermissions({
+      s.permissions.getPermissions({
         type: name,
       }).insert
   );
diff --git a/packages/core/components/DragDropContext/index.tsx b/packages/core/components/DragDropContext/index.tsx
index 2adf52d822..1f845d2be1 100644
--- a/packages/core/components/DragDropContext/index.tsx
+++ b/packages/core/components/DragDropContext/index.tsx
@@ -1,5 +1,5 @@
 import { DragDropProvider } from "@dnd-kit/react";
-import { getAppStore, useAppStore } from "../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../store";
 import {
   createContext,
   Dispatch,
@@ -29,7 +29,6 @@ import { generateId } from "../../lib/generate-id";
 import { createStore } from "zustand";
 import { getDeepDir } from "../../lib/get-deep-dir";
 import { useSensors } from "../../lib/dnd/use-sensors";
-import { useNodeStore } from "../../stores/node-store";
 
 const DEBUG = false;
 
@@ -108,6 +107,7 @@ const DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const resolveData = useAppStore((s) => s.resolveData);
   const metadata = useAppStore((s) => s.metadata);
+  const appStore = useAppStoreApi();
 
   const id = useId();
 
@@ -331,7 +331,7 @@ const DragDropContextClient = ({
               if (thisPreview) {
                 zoneStore.setState({ previewIndex: {} });
 
-                const state = getAppStore().state;
+                const state = appStore.getState().state;
 
                 if (thisPreview.type === "insert") {
                   insertComponent(
@@ -427,7 +427,7 @@ const DragDropContextClient = ({
               targetIndex = 0;
             }
 
-            const path = useNodeStore.getState().nodes[target.id]?.path || [];
+            const path = appStore.getState().nodes.nodes[target.id]?.path || [];
 
             // Abort if dragging over self or descendant
             if (
@@ -464,7 +464,8 @@ const DragDropContextClient = ({
 
               const item = getItem(
                 initialSelector.current,
-                getAppStore().state.data
+                appStore.getState().state.data,
+                {}
               );
 
               if (item) {
@@ -496,7 +497,7 @@ const DragDropContextClient = ({
 
             if (source && source.type !== "void") {
               const sourceData = source.data as ComponentDndData;
-              const { data } = getAppStore().state;
+              const { data } = appStore.getState().state;
 
               const item = getItem(
                 {
diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
index 66acb29bc1..159088b66d 100644
--- a/packages/core/components/DraggableComponent/index.tsx
+++ b/packages/core/components/DraggableComponent/index.tsx
@@ -14,7 +14,7 @@ import styles from "./styles.module.css";
 import "./styles.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Copy, CornerLeftUp, Trash } from "lucide-react";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../store";
 import { Loader } from "../Loader";
 import { ActionBar } from "../ActionBar";
 
@@ -28,8 +28,6 @@ import { useSortableSafe } from "../../lib/dnd/dnd-kit/safe";
 import { getDeepScrollPosition } from "../../lib/get-deep-scroll-position";
 import { ZoneStoreContext } from "../DropZone/context";
 import { useContextStore } from "../../lib/use-context-store";
-import { useNodeStore } from "../../stores/node-store";
-import { usePermissionsStore } from "../../stores/permissions-store";
 import { useShallow } from "zustand/react/shallow";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
@@ -150,12 +148,12 @@ export const DraggableComponent = ({
   const containsActiveZone =
     Object.values(localZones).filter(Boolean).length > 0;
 
-  const path = useNodeStore((s) => s.nodes[id]?.path);
+  const path = useAppStore((s) => s.nodes.nodes[id]?.path);
 
-  const item = useNodeStore((s) => s.nodes[id]?.data);
+  const item = useAppStore((s) => s.nodes.nodes[id]?.data);
 
-  const permissions = usePermissionsStore(
-    useShallow((s) => s.getPermissions({ item }))
+  const permissions = useAppStore(
+    useShallow((s) => s.permissions.getPermissions({ item }))
   );
 
   const userIsDragging = useContextStore(
@@ -273,7 +271,7 @@ export const DraggableComponent = ({
     }
   }, [ref.current, userIsDragging]);
 
-  const registerNode = useNodeStore((s) => s.registerNode);
+  const registerNode = useAppStore((s) => s.nodes.registerNode);
 
   useEffect(() => {
     registerNode(id, { methods: { sync }, element: ref.current ?? null });
@@ -302,8 +300,10 @@ export const DraggableComponent = ({
     [index, zoneCompound, id]
   );
 
+  const appStore = useAppStoreApi();
+
   const onSelectParent = useCallback(() => {
-    const { nodes } = useNodeStore.getState();
+    const { nodes } = appStore.getState().nodes;
     const node = nodes[id];
     const parentNode = node?.parentId ? nodes[node?.parentId] : null;
 
diff --git a/packages/core/components/DropZone/context.tsx b/packages/core/components/DropZone/context.tsx
index 97fe1e4267..7a8b8c84cc 100644
--- a/packages/core/components/DropZone/context.tsx
+++ b/packages/core/components/DropZone/context.tsx
@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import type { Draggable } from "@dnd-kit/dom";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { createStore, StoreApi } from "zustand";
 
 export type PathData = Record<string, { path: string[]; label: string }>;
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index 7850eb1425..637e571c0a 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -18,7 +18,7 @@ import {
   ZoneStoreContext,
   dropZoneContext,
 } from "./context";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { DropZoneProps } from "./types";
 import { Content, DragAxis, PuckContext } from "../../types";
 
@@ -33,7 +33,6 @@ import { useContentIdsWithPreview } from "./lib/use-content-with-preview";
 import { useDragAxis } from "./lib/use-drag-axis";
 import { useContextStore } from "../../lib/use-context-store";
 import { useShallow } from "zustand/react/shallow";
-import { useNodeStore } from "../../stores/node-store";
 import { renderContext } from "../Render";
 
 const getClassName = getClassNameFactory("DropZone", styles);
@@ -217,7 +216,9 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       activeZones,
     } = ctx!;
 
-    const path = useNodeStore((s) => (areaId ? s.nodes[areaId]?.path : null));
+    const path = useAppStore((s) =>
+      areaId ? s.nodes.nodes[areaId]?.path : null
+    );
 
     let zoneCompound = rootDroppableId;
 
diff --git a/packages/core/components/DropZone/lib/use-content-with-preview.ts b/packages/core/components/DropZone/lib/use-content-with-preview.ts
index 971cab4e37..9b4e4e93db 100644
--- a/packages/core/components/DropZone/lib/use-content-with-preview.ts
+++ b/packages/core/components/DropZone/lib/use-content-with-preview.ts
@@ -4,7 +4,7 @@ import { useRenderedCallback } from "../../../lib/dnd/use-rendered-callback";
 import { insert } from "../../../lib/insert";
 import { ZoneStoreContext } from "../context";
 import { useContextStore } from "../../../lib/use-context-store";
-import { useAppStore } from "../../../stores/app-store";
+import { useAppStore } from "../../../store";
 
 export const useContentIdsWithPreview = (
   contentIds: string[],
diff --git a/packages/core/components/DropZone/lib/use-drag-axis.ts b/packages/core/components/DropZone/lib/use-drag-axis.ts
index 44233da46f..cfa5d88121 100644
--- a/packages/core/components/DropZone/lib/use-drag-axis.ts
+++ b/packages/core/components/DropZone/lib/use-drag-axis.ts
@@ -1,6 +1,6 @@
 import { RefObject, useCallback, useEffect, useState } from "react";
 import { DragAxis } from "../../../types";
-import { useAppStore } from "../../../stores/app-store";
+import { useAppStore } from "../../../store";
 
 const GRID_DRAG_AXIS: DragAxis = "dynamic";
 const FLEX_ROW_DRAG_AXIS: DragAxis = "x";
diff --git a/packages/core/components/DropZone/lib/use-min-empty-height.ts b/packages/core/components/DropZone/lib/use-min-empty-height.ts
index 56b789ce85..b27c60f2d1 100644
--- a/packages/core/components/DropZone/lib/use-min-empty-height.ts
+++ b/packages/core/components/DropZone/lib/use-min-empty-height.ts
@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from "react";
 import { ZoneStoreContext } from "./../context";
 import { useContextStore } from "../../../lib/use-context-store";
-import { useNodeStore } from "../../../stores/node-store";
+import { useAppStoreApi } from "../../../store";
 
 export const useMinEmptyHeight = ({
   zoneCompound,
@@ -12,6 +12,7 @@ export const useMinEmptyHeight = ({
   userMinEmptyHeight: number;
   ref: RefObject<HTMLDivElement | null>;
 }) => {
+  const appStore = useAppStoreApi();
   const [prevHeight, setPrevHeight] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
@@ -36,7 +37,7 @@ export const useMinEmptyHeight = ({
 
     setPrevHeight(0);
     setTimeout(() => {
-      const { nodes } = useNodeStore.getState();
+      const { nodes } = appStore.getState().nodes;
 
       Object.entries(nodes).forEach(([_, node]) => {
         node?.methods.sync();
diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx
index 58288992e6..701d8cd5ab 100644
--- a/packages/core/components/LayerTree/index.tsx
+++ b/packages/core/components/LayerTree/index.tsx
@@ -11,7 +11,7 @@ import { findZonesForArea } from "../../lib/find-zones-for-area";
 import { getZoneId } from "../../lib/get-zone-id";
 import { getFrame } from "../../lib/get-frame";
 import { onScrollEnd } from "../../lib/on-scroll-end";
-import { useNodeStore } from "../../stores/node-store";
+import { useAppStore } from "../../store";
 
 const getClassName = getClassNameFactory("LayerTree", styles);
 const getClassNameLayer = getClassNameFactory("Layer", styles);
@@ -37,7 +37,7 @@ export const LayerTree = ({
   const ctx = useContext(dropZoneContext);
 
   // TODO change this for performance
-  const nodes = useNodeStore((s) => s.nodes);
+  const nodes = useAppStore((s) => s.nodes.nodes);
 
   return (
     <>
diff --git a/packages/core/components/MenuBar/index.tsx b/packages/core/components/MenuBar/index.tsx
index 7e022c00b8..85ed300fed 100644
--- a/packages/core/components/MenuBar/index.tsx
+++ b/packages/core/components/MenuBar/index.tsx
@@ -7,7 +7,7 @@ import { PuckAction } from "../../reducer";
 import type { Data } from "../../types";
 
 import styles from "./styles.module.css";
-import { useHistoryStore } from "../../stores/history-store";
+import { useAppStore } from "../../store";
 
 const getClassName = getClassNameFactory("MenuBar", styles);
 
@@ -22,10 +22,10 @@ export function MenuBar<UserData extends Data>({
   renderHeaderActions?: () => ReactElement;
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
 }) {
-  const back = useHistoryStore((s) => s.back);
-  const forward = useHistoryStore((s) => s.forward);
-  const hasFuture = useHistoryStore((s) => s.hasFuture());
-  const hasPast = useHistoryStore((s) => s.hasPast());
+  const back = useAppStore((s) => s.history.back);
+  const forward = useAppStore((s) => s.history.forward);
+  const hasFuture = useAppStore((s) => s.history.hasFuture());
+  const hasPast = useAppStore((s) => s.history.hasPast());
 
   return (
     <div
diff --git a/packages/core/components/Puck/components/Canvas/index.tsx b/packages/core/components/Puck/components/Canvas/index.tsx
index db0922eb0c..48cafaa1bf 100644
--- a/packages/core/components/Puck/components/Canvas/index.tsx
+++ b/packages/core/components/Puck/components/Canvas/index.tsx
@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useAppStore } from "../../../../stores/app-store";
+import { useAppStore } from "../../../../store";
 import { ViewportControls } from "../../../ViewportControls";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
diff --git a/packages/core/components/Puck/components/Components/index.tsx b/packages/core/components/Puck/components/Components/index.tsx
index 726cbcf66e..da4184bd4f 100644
--- a/packages/core/components/Puck/components/Components/index.tsx
+++ b/packages/core/components/Puck/components/Components/index.tsx
@@ -1,5 +1,5 @@
 import { useComponentList } from "../../../../lib/use-component-list";
-import { useAppStore } from "../../../../stores/app-store";
+import { useAppStore } from "../../../../store";
 import { ComponentList } from "../../../ComponentList";
 import { useMemo } from "react";
 
diff --git a/packages/core/components/Puck/components/Fields/index.tsx b/packages/core/components/Puck/components/Fields/index.tsx
index 93dbe824a0..f6b6a71ea1 100644
--- a/packages/core/components/Puck/components/Fields/index.tsx
+++ b/packages/core/components/Puck/components/Fields/index.tsx
@@ -8,18 +8,15 @@ import {
 } from "../../../../reducer";
 import { UiState } from "../../../../types";
 import { AutoFieldPrivate } from "../../../AutoField";
-import { getAppStore, useAppStore } from "../../../../stores/app-store";
+import { AppStore, useAppStore, useAppStoreApi } from "../../../../store";
 
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
 import { ReactNode, useCallback, useMemo } from "react";
 import { ItemSelector } from "../../../../lib/get-item";
-import {
-  useRegisterFieldStore,
-  useFieldStore,
-} from "../../../../stores/field-store";
+import { useRegisterFieldsSlice } from "../../../../store/slices/fields";
 import { useShallow } from "zustand/react/shallow";
-import { usePermissionsStore } from "../../../../stores/permissions-store";
+import { StoreApi } from "zustand";
 
 const getClassName = getClassNameFactory("PuckFields", styles);
 
@@ -34,11 +31,12 @@ const DefaultFields = ({
 };
 
 const createOnChange =
-  (fieldName: string) => (value: any, updatedUi?: Partial<UiState>) => {
+  (fieldName: string, appStore: StoreApi<AppStore>) =>
+  (value: any, updatedUi?: Partial<UiState>) => {
     let currentProps;
 
     const { dispatch, resolveData, config, state, selectedItem } =
-      getAppStore();
+      appStore.getState();
 
     const { data, ui } = state;
     const { itemSelector } = ui;
@@ -120,7 +118,7 @@ const createOnChange =
   };
 
 const FieldsChild = ({ fieldName }: { fieldName: string }) => {
-  const field = useFieldStore((s) => s.fields[fieldName]);
+  const field = useAppStore((s) => s.fields.fields[fieldName]);
   const isReadOnly = useAppStore(
     (s) =>
       ((s.selectedItem
@@ -145,17 +143,21 @@ const FieldsChild = ({ fieldName }: { fieldName: string }) => {
       : `root_${field.type}_${fieldName}`;
   });
 
-  const permissions = usePermissionsStore(
+  const permissions = useAppStore(
     useShallow((s) => {
-      const { selectedItem } = getAppStore();
+      const { selectedItem, permissions } = s;
 
       return selectedItem
-        ? s.getPermissions({ item: selectedItem })
-        : s.getPermissions({ root: true });
+        ? permissions.getPermissions({ item: selectedItem })
+        : permissions.getPermissions({ root: true });
     })
   );
 
-  const onChange = useCallback(createOnChange(fieldName), [fieldName]);
+  const appStore = useAppStoreApi();
+
+  const onChange = useCallback(createOnChange(fieldName, appStore), [
+    fieldName,
+  ]);
 
   if (!field || !id) return null;
 
@@ -183,11 +185,14 @@ export const Fields = ({ wrapFields = true }: { wrapFields?: boolean }) => {
     return (loadingCount ?? 0) > 0;
   });
   const itemSelector = useAppStore(useShallow((s) => s.state.ui.itemSelector));
+  const id = useAppStore((s) => s.selectedItem?.props.id);
+  const appStore = useAppStoreApi();
+  useRegisterFieldsSlice(appStore, id);
 
-  useRegisterFieldStore();
-
-  const fieldsLoading = useFieldStore((s) => s.loading);
-  const fieldNames = useFieldStore(useShallow((s) => Object.keys(s.fields)));
+  const fieldsLoading = useAppStore((s) => s.fields.loading);
+  const fieldNames = useAppStore(
+    useShallow((s) => Object.keys(s.fields.fields))
+  );
 
   const isLoading = fieldsLoading || componentResolving;
 
diff --git a/packages/core/components/Puck/components/Outline/index.tsx b/packages/core/components/Puck/components/Outline/index.tsx
index 3131be00d0..0c6cff76f5 100644
--- a/packages/core/components/Puck/components/Outline/index.tsx
+++ b/packages/core/components/Puck/components/Outline/index.tsx
@@ -2,7 +2,7 @@ import { areaContainsZones } from "../../../../lib/area-contains-zones";
 import { findZonesForArea } from "../../../../lib/find-zones-for-area";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
 import { LayerTree } from "../../../LayerTree";
-import { getAppStore, useAppStore } from "../../../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../../../store";
 import { dropZoneContext } from "../../../DropZone";
 import { useCallback, useMemo } from "react";
 import { ItemSelector } from "../../../../lib/get-item";
@@ -13,17 +13,18 @@ export const Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const { data, ui } = state;
   const { itemSelector } = ui;
+  const appStore = useAppStoreApi();
 
   const setItemSelector = useCallback(
     (newItemSelector: ItemSelector | null) => {
-      const { dispatch } = getAppStore();
+      const { dispatch } = appStore.getState();
 
       dispatch({
         type: "setUi",
         ui: { itemSelector: newItemSelector },
       });
     },
-    []
+    [appStore]
   );
 
   const Wrapper = useMemo(() => outlineOverride || "div", [outlineOverride]);
diff --git a/packages/core/components/Puck/components/Preview/index.tsx b/packages/core/components/Puck/components/Preview/index.tsx
index 97e13b6cb1..b53160766a 100644
--- a/packages/core/components/Puck/components/Preview/index.tsx
+++ b/packages/core/components/Puck/components/Preview/index.tsx
@@ -1,7 +1,7 @@
 import { DropZonePure } from "../../../DropZone";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
 import { RefObject, useCallback, useEffect, useRef, useMemo } from "react";
-import { useAppStore } from "../../../../stores/app-store";
+import { useAppStore } from "../../../../store";
 import AutoFrame, { autoFrameContext } from "../../../AutoFrame";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
@@ -114,6 +114,12 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
     <Render data={renderData} config={config} />
   );
 
+  useEffect(() => {
+    if (!iframe.enabled) {
+      setStatus("READY");
+    }
+  }, [iframe.enabled]);
+
   return (
     <div
       className={getClassName()}
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 93240dbc68..f64964f013 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -1,7 +1,11 @@
 import {
+  Context,
+  createContext,
+  PropsWithChildren,
   ReactElement,
   ReactNode,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -35,17 +39,18 @@ import { IconButton } from "../IconButton/IconButton";
 import { PuckAction } from "../../reducer";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import {
+  createAppStore,
   defaultAppState,
-  getAppStore,
   useAppStore,
-} from "../../stores/app-store";
+  useAppStoreApi,
+  appStoreContext,
+} from "../../store";
 import { MenuBar } from "../MenuBar";
 import styles from "./styles.module.css";
 import { Fields } from "./components/Fields";
 import { Components } from "./components/Components";
 import { Preview } from "./components/Preview";
 import { Outline } from "./components/Outline";
-import { useRegisterHistoryStore } from "../../stores/history-store";
 import { Canvas } from "./components/Canvas";
 import { defaultViewports } from "../ViewportControls/default-viewports";
 import { Viewports } from "../../types";
@@ -54,8 +59,9 @@ import { useLoadedOverrides } from "../../lib/use-loaded-overrides";
 import { DefaultOverride } from "../DefaultOverride";
 import { useInjectGlobalCss } from "../../lib/use-inject-css";
 import { usePreviewModeHotkeys } from "../../lib/use-preview-mode-hotkeys";
-import { useRegisterNodeStore } from "../../stores/node-store";
-import { useRegisterPermissionsStore } from "../../stores/permissions-store";
+import { useRegisterHistorySlice } from "../../store/slices/history";
+import { useRegisterNodesSlice } from "../../store/slices/nodes";
+import { useRegisterPermissionsSlice } from "../../store/slices/permissions";
 import { monitorHotkeys, useMonitorHotkeys } from "../../lib/use-hotkey";
 import { getFrame } from "../../lib/get-frame";
 
@@ -77,30 +83,10 @@ const FieldSideBar = () => {
   );
 };
 
-export function Puck<
+type PuckProps<
   UserConfig extends Config = Config,
   G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
->({
-  children,
-  config,
-  data: initialData,
-  ui: initialUi,
-  onChange,
-  onPublish,
-  onAction,
-  permissions = {},
-  plugins,
-  overrides,
-  renderHeader,
-  renderHeaderActions,
-  headerTitle,
-  headerPath,
-  viewports = defaultViewports,
-  iframe: _iframe,
-  dnd,
-  initialHistory: _initialHistory,
-  metadata,
-}: {
+> = {
   children?: ReactNode;
   config: UserConfig;
   data: Partial<G["UserData"] | Data>;
@@ -129,14 +115,48 @@ export function Puck<
   };
   initialHistory?: InitialHistory;
   metadata?: Metadata;
-}) {
+};
+
+const propsContext = createContext<Partial<PuckProps>>({});
+
+function PropsProvider<UserConfig extends Config = Config>(
+  props: PuckProps<UserConfig>
+) {
+  return (
+    <propsContext.Provider value={props as PuckProps}>
+      {props.children}
+    </propsContext.Provider>
+  );
+}
+
+const usePuckContext = () =>
+  useContext<PuckProps>(propsContext as Context<PuckProps>);
+
+function PuckProvider<
+  UserConfig extends Config = Config,
+  G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
+>({ children }: PropsWithChildren) {
+  const {
+    config,
+    data: initialData,
+    ui: initialUi,
+    onChange,
+    permissions = {},
+    plugins,
+    overrides,
+    viewports = defaultViewports,
+    iframe: _iframe,
+    initialHistory: _initialHistory,
+    metadata,
+  } = usePuckContext();
+
   const iframe: IframeConfig = {
     enabled: true,
     waitForStyles: true,
     ..._iframe,
   };
 
-  useInjectGlobalCss(iframe.enabled);
+  const [appStore] = useState(createAppStore);
 
   const [generatedAppState] = useState<G["UserAppState"]>(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
@@ -248,13 +268,79 @@ export function Puck<
     _initialHistory?.index || blendedHistories.length - 1;
   const initialAppState = blendedHistories[initialHistoryIndex].state;
 
-  useRegisterHistoryStore({
+  useRegisterHistorySlice(appStore, {
     histories: blendedHistories,
     index: initialHistoryIndex,
     initialAppState,
   });
 
-  const dispatch = useAppStore((s) => s.dispatch);
+  useEffect(() => {
+    appStore.subscribe((s) => {
+      if (onChange) onChange(s.state.data as G["UserData"]);
+    });
+  }, []);
+
+  // Load all plugins into the overrides
+  const loadedOverrides = useLoadedOverrides({
+    overrides: overrides,
+    plugins: plugins,
+  });
+
+  useEffect(() => {
+    appStore.setState({
+      state: initialAppState,
+      config,
+      plugins: plugins || [],
+      overrides: loadedOverrides,
+      viewports,
+      iframe,
+    });
+  }, []);
+
+  useEffect(() => {
+    appStore.setState({ metadata });
+  }, [metadata]);
+
+  useRegisterNodesSlice(appStore);
+  useRegisterPermissionsSlice(appStore, permissions);
+
+  useEffect(() => {
+    const { state, resolveData } = appStore.getState();
+
+    resolveData(state);
+  }, []);
+
+  return (
+    <appStoreContext.Provider value={appStore}>
+      {children}
+    </appStoreContext.Provider>
+  );
+}
+
+function PuckLayout<
+  UserConfig extends Config = Config,
+  G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
+>({ children }: PropsWithChildren) {
+  const {
+    onChange,
+    onPublish,
+    onAction,
+    renderHeader,
+    renderHeaderActions,
+    headerTitle,
+    headerPath,
+    iframe: _iframe,
+    dnd,
+    initialHistory: _initialHistory,
+  } = usePuckContext();
+
+  const iframe: IframeConfig = {
+    enabled: true,
+    waitForStyles: true,
+    ..._iframe,
+  };
+
+  useInjectGlobalCss(iframe.enabled);
 
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
   const rightSideBarVisible = useAppStore(
@@ -263,18 +349,22 @@ export function Puck<
 
   const [menuOpen, setMenuOpen] = useState(false);
 
+  const appStore = useAppStoreApi();
+
   useEffect(() => {
     // TODO use selector
-    useAppStore.subscribe((s) => {
+    return appStore.subscribe((s) => {
       if (onChange) onChange(s.state.data as G["UserData"]);
     });
-  }, []);
+  }, [appStore]);
 
   // DEPRECATED
   const rootProps = useAppStore(
     (s) => s.state.data.root.props || s.state.data.root.props
   );
 
+  const dispatch = useAppStore((s) => s.dispatch);
+
   const toggleSidebars = useCallback(
     (sidebar: "left" | "right") => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
@@ -370,24 +460,20 @@ export function Puck<
     return DefaultOverride;
   }, [renderHeader]);
 
-  // Load all plugins into the overrides
-  const loadedOverrides = useLoadedOverrides({
-    overrides: overrides,
-    plugins: plugins,
-  });
+  const overrides = useAppStore((s) => s.overrides);
 
   const CustomPuck = useMemo(
-    () => loadedOverrides.puck || DefaultOverride,
-    [loadedOverrides]
+    () => overrides.puck || DefaultOverride,
+    [overrides]
   );
 
   const CustomHeader = useMemo(
-    () => loadedOverrides.header || defaultHeaderRender,
-    [loadedOverrides]
+    () => overrides.header || defaultHeaderRender,
+    [overrides]
   );
   const CustomHeaderActions = useMemo(
-    () => loadedOverrides.headerActions || defaultHeaderActionsRender,
-    [loadedOverrides]
+    () => overrides.headerActions || defaultHeaderActionsRender,
+    [overrides]
   );
 
   const [mounted, setMounted] = useState(false);
@@ -396,21 +482,6 @@ export function Puck<
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    useAppStore.setState({
-      state: initialAppState,
-      config,
-      plugins: plugins || [],
-      overrides: loadedOverrides,
-      viewports,
-      iframe,
-    });
-  }, []);
-
-  useRegisterNodeStore();
-
-  useRegisterPermissionsStore(permissions);
-
   const ready = useAppStore((s) => s.status === "READY");
 
   useMonitorHotkeys();
@@ -427,12 +498,6 @@ export function Puck<
 
   usePreviewModeHotkeys();
 
-  useEffect(() => {
-    const { state, resolveData } = getAppStore();
-
-    resolveData(state);
-  }, []);
-
   return (
     <div className={`Puck ${getClassName()}`}>
       <DragDropContext disableAutoScroll={dnd?.disableAutoScroll}>
@@ -453,7 +518,7 @@ export function Puck<
                       <CustomHeaderActions>
                         <Button
                           onClick={() => {
-                            const data = useAppStore.getState().state.data;
+                            const data = appStore.getState().state.data;
                             onPublish && onPublish(data as G["UserData"]);
                           }}
                           icon={<Globe size="14px" />}
@@ -530,7 +595,7 @@ export function Puck<
                             <CustomHeaderActions>
                               <Button
                                 onClick={() => {
-                                  const data = useAppStore.getState().state
+                                  const data = appStore.getState().state
                                     .data as G["UserData"];
                                   onPublish && onPublish(data);
                                 }}
@@ -568,6 +633,19 @@ export function Puck<
   );
 }
 
+export function Puck<
+  UserConfig extends Config = Config,
+  G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
+>(props: PuckProps<UserConfig>) {
+  return (
+    <PropsProvider {...props}>
+      <PuckProvider {...props}>
+        <PuckLayout {...props} />
+      </PuckProvider>
+    </PropsProvider>
+  );
+}
+
 Puck.Components = Components;
 Puck.Fields = Fields;
 Puck.Outline = Outline;
diff --git a/packages/core/components/SidebarSection/index.tsx b/packages/core/components/SidebarSection/index.tsx
index ccc4c42bd5..d40fb40f85 100644
--- a/packages/core/components/SidebarSection/index.tsx
+++ b/packages/core/components/SidebarSection/index.tsx
@@ -4,7 +4,7 @@ import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Heading } from "../Heading";
 import { ChevronRight } from "lucide-react";
 import { useBreadcrumbs } from "../../lib/use-breadcrumbs";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { Loader } from "../Loader";
 
 const getClassName = getClassNameFactory("SidebarSection", styles);
diff --git a/packages/core/components/ViewportControls/index.tsx b/packages/core/components/ViewportControls/index.tsx
index 893db4ea18..656af76494 100644
--- a/packages/core/components/ViewportControls/index.tsx
+++ b/packages/core/components/ViewportControls/index.tsx
@@ -1,6 +1,6 @@
 import { Monitor, Smartphone, Tablet, ZoomIn, ZoomOut } from "lucide-react";
 import { IconButton } from "../IconButton";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { getClassNameFactory } from "../../lib";
 
diff --git a/packages/core/lib/__tests__/insert-component.spec.tsx b/packages/core/lib/__tests__/insert-component.spec.tsx
index e911727a7c..21d43e1f7d 100644
--- a/packages/core/lib/__tests__/insert-component.spec.tsx
+++ b/packages/core/lib/__tests__/insert-component.spec.tsx
@@ -1,7 +1,7 @@
 import { cleanup } from "@testing-library/react";
 import { AppState, Config, Data } from "../../types";
 import { PuckAction } from "../../reducer";
-import { defaultAppState } from "../../stores/app-store";
+import { defaultAppState } from "../../store";
 import { insertComponent } from "../insert-component";
 import { rootDroppableId } from "../root-droppable-id";
 
diff --git a/packages/core/lib/__tests__/is-child-of-zone.spec.tsx b/packages/core/lib/__tests__/is-child-of-zone.spec.tsx
deleted file mode 100644
index 292f5ea9dc..0000000000
--- a/packages/core/lib/__tests__/is-child-of-zone.spec.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { DropZoneContext } from "../../components/DropZone/context";
-import { Config, Data } from "../../types";
-import { isChildOfZone } from "../is-child-of-zone";
-
-const item1 = { type: "MyComponent", props: { id: "MyComponent-1" } };
-const item2 = { type: "MyComponent", props: { id: "MyComponent-2" } };
-const item3 = { type: "MyComponent", props: { id: "MyComponent-3" } };
-
-const data: Data = {
-  root: { props: { title: "" } },
-  content: [item1],
-  zones: {
-    "MyComponent-1:zone": [item2],
-    "MyComponent-2:zone": [item3],
-  },
-};
-
-const config: Config = {
-  components: {
-    Comp: {
-      defaultProps: { prop: "example" },
-      render: () => <div />,
-    },
-  },
-};
-
-const dropzoneContext: DropZoneContext = {
-  data,
-  config,
-  pathData: {
-    "MyComponent-1": { path: [], label: "MyComponent" },
-    "MyComponent-2": { path: ["MyComponent-1:zone"], label: "MyComponent" },
-    "MyComponent-3": {
-      path: ["MyComponent-1:zone", "MyComponent-2:zone"],
-      label: "MyComponent",
-    },
-  },
-  path: [],
-  depth: 0,
-  metadata: {},
-};
-
-describe("is-child-of-zone", () => {
-  it("should return true when item is child of zone for first item", () => {
-    expect(isChildOfZone(item1, item2, dropzoneContext)).toBe(true);
-  });
-
-  it("should return true when item is child of zone for second item", () => {
-    expect(isChildOfZone(item2, item3, dropzoneContext)).toBe(true);
-  });
-
-  it("should return false when item is not child of zone", () => {
-    expect(isChildOfZone(item2, item1, dropzoneContext)).toBe(false);
-  });
-});
diff --git a/packages/core/lib/__tests__/resolve-data.spec.tsx b/packages/core/lib/__tests__/resolve-data.spec.tsx
index 04aea5215e..695ae0c6f5 100644
--- a/packages/core/lib/__tests__/resolve-data.spec.tsx
+++ b/packages/core/lib/__tests__/resolve-data.spec.tsx
@@ -1,6 +1,5 @@
 import { resolveData } from "../resolve-data";
-import { useAppStore, defaultAppStore } from "../../stores/app-store";
-import { usePermissionsStore } from "../../stores/permissions-store";
+import { createAppStore, defaultAppStore } from "../../store";
 import { Config, AppState, Data } from "../../types";
 import { waitFor } from "@testing-library/react";
 
@@ -8,6 +7,8 @@ const item1 = { type: "MyComponent", props: { id: "MyComponent-1" } };
 const item2 = { type: "MyComponent", props: { id: "MyComponent-2" } };
 const item3 = { type: "MyComponent", props: { id: "MyComponent-3" } };
 
+const appStore = createAppStore();
+
 const data: Data = {
   root: { props: { title: "" } },
   content: [item1],
@@ -46,32 +47,32 @@ const config: Config = {
 
 describe("resolveData", () => {
   beforeEach(() => {
-    useAppStore.setState({ ...useAppStore.getInitialState() }, true);
+    appStore.setState({ ...appStore.getInitialState() }, true);
   });
 
   it("should update store state with resolved data", async () => {
     let dispatchCount = 0;
 
-    useAppStore.setState({
+    appStore.setState({
       state: baseState,
       config,
       dispatch: (action: any) => {
         dispatchCount += 1;
 
-        useAppStore.getInitialState().dispatch(action);
+        appStore.getInitialState().dispatch(action);
       },
     });
 
     expect(dispatchCount).toBe(0);
 
-    await resolveData(useAppStore.getState().state);
+    await resolveData(appStore.getState().state, appStore.getState());
     expect(dispatchCount).toBe(4);
 
-    await resolveData(useAppStore.getState().state);
+    await resolveData(appStore.getState().state, appStore.getState());
     expect(dispatchCount).toBe(4); // Check we don't run again
 
     // Assert
-    const finalAppState = useAppStore.getState().state;
+    const finalAppState = appStore.getState().state;
 
     // We expect all MyComponent props to be "Hello, world", etc.
     // Snapshot or normal expect checks
@@ -85,50 +86,56 @@ describe("resolveData", () => {
   });
 
   it("should NOT set updated UI on the first resolveData call", async () => {
-    useAppStore.setState({
+    appStore.setState({
       state: baseState,
       config,
     });
 
     // Pretend new UI has changed, but this is the first run
-    const initialState = useAppStore.getState().state;
-    await resolveData({
-      ...initialState,
-      ui: { ...initialState.ui, leftSideBarVisible: false },
-    });
+    const initialState = appStore.getState().state;
+    await resolveData(
+      {
+        ...initialState,
+        ui: { ...initialState.ui, leftSideBarVisible: false },
+      },
+      appStore.getState()
+    );
 
-    const finalAppState = useAppStore.getState().state;
+    const finalAppState = appStore.getState().state;
     // The new UI should NOT have been merged on the first call
     expect(finalAppState.ui.leftSideBarVisible).toBe(true);
   });
 
   it("should set updated UI on subsequent calls", async () => {
-    useAppStore.setState({
+    appStore.setState({
       state: baseState,
       config,
     });
 
     // Counter is outside of lib, so modify manually
-    useAppStore.setState({ resolveDataRuns: 1 });
+    appStore.setState({ resolveDataRuns: 1 });
 
     // Now call again with changed UI
-    await resolveData({
-      ...useAppStore.getState().state,
-      ui: { ...useAppStore.getState().state.ui, leftSideBarVisible: false },
-    });
+    await resolveData(
+      {
+        ...appStore.getState().state,
+        ui: { ...appStore.getState().state.ui, leftSideBarVisible: false },
+      },
+      appStore.getState()
+    );
 
-    const finalAppState = useAppStore.getState().state;
+    const finalAppState = appStore.getState().state;
     expect(finalAppState.ui.leftSideBarVisible).toBe(false);
   });
 
   it("should skip dispatch if there are no resolvers", async () => {
     const mockDispatch = jest.fn();
 
-    useAppStore.setState({
+    appStore.setState({
       dispatch: mockDispatch,
     });
 
-    await resolveData(useAppStore.getState().state);
+    await resolveData(appStore.getState().state, appStore.getState());
 
     // Because data won't change, no dispatch is expected
     expect(mockDispatch).not.toHaveBeenCalled();
@@ -136,7 +143,7 @@ describe("resolveData", () => {
 
   it("should call set/unset componentLoading when data is resolved, after a delay", async () => {
     const loadingCalls: Record<string, boolean> = {};
-    useAppStore.setState({
+    appStore.setState({
       state: baseState,
       config,
       setComponentLoading: (id) => {
@@ -147,7 +154,7 @@ describe("resolveData", () => {
       },
     });
 
-    await resolveData(useAppStore.getState().state);
+    await resolveData(appStore.getState().state, appStore.getState());
 
     expect(loadingCalls["MyComponent-1"]).toBeUndefined();
 
@@ -160,19 +167,22 @@ describe("resolveData", () => {
   });
 
   it("should resolve permissions for each item", async () => {
-    useAppStore.setState({
+    appStore.setState({
       state: baseState,
       config,
     });
 
     const calledFor: string[] = [];
-    usePermissionsStore.setState({
-      resolvePermissions: ({ item }: any) => {
-        if (item) calledFor.push(item.props.id);
+    appStore.setState({
+      permissions: {
+        ...appStore.getState().permissions,
+        resolvePermissions: ({ item }: any) => {
+          if (item) calledFor.push(item.props.id);
+        },
       },
-    } as any);
+    });
 
-    await resolveData(useAppStore.getState().state);
+    await resolveData(appStore.getState().state, appStore.getState());
     expect(calledFor).toContain("MyComponent-1");
     expect(calledFor).toContain("MyComponent-2");
     expect(calledFor).toContain("MyComponent-3");
diff --git a/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx b/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx
index 061672f0a7..b21427b5f5 100644
--- a/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx
+++ b/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx
@@ -1,23 +1,25 @@
-// lib/__tests__/use-breadcrumbs.spec.ts
-import { renderHook, act } from "@testing-library/react";
+import { renderHook, render } from "@testing-library/react";
 import { useBreadcrumbs } from "../use-breadcrumbs";
-import { useAppStore } from "../../stores/app-store";
-import { useNodeStore } from "../../stores/node-store";
+import { createAppStore, appStoreContext } from "../../store";
 import { ComponentData, Config } from "../../types";
+import { useRegisterNodesSlice } from "../../store/slices/nodes";
+import { PropsWithChildren } from "react";
 
-function resetStores() {
-  // Reset the main app store
-  useAppStore.setState(
-    {
-      ...useAppStore.getInitialState(),
-    },
-    true
+const appStore = createAppStore();
+
+const Context = (props: PropsWithChildren) => {
+  return (
+    <appStoreContext.Provider value={appStore}>
+      {props.children}
+    </appStoreContext.Provider>
   );
+};
 
-  // Reset node store
-  useNodeStore.setState(
+function resetStores() {
+  // Reset the main app store
+  appStore.setState(
     {
-      ...useNodeStore.getInitialState(),
+      ...appStore.getInitialState(),
     },
     true
   );
@@ -35,7 +37,6 @@ describe("useBreadcrumbs", () => {
   });
 
   it("returns a breadcrumb path including 'Page' for root", () => {
-    // 1) Set up the config & selected item in the app store
     const config: Config = {
       components: {
         MyComponent: {
@@ -55,49 +56,47 @@ describe("useBreadcrumbs", () => {
       props: { id: "item-2" },
     };
 
-    // 2) Assign config & selected item to the app store
-    useAppStore.setState({
+    renderHook(() => useRegisterNodesSlice(appStore));
+
+    appStore.setState({
       config,
+      state: {
+        ui: appStore.getState().state.ui,
+        data: {
+          content: [testItem],
+          root: {},
+          zones: {
+            "item-1:zone": [testItem2],
+          },
+        },
+      },
       selectedItem: testItem2,
     });
 
-    // 3) We'll manually populate the node store with path info
-    // Typical usage would be from generateNodeStore, but we can do it inline for this test
-    act(() => {
-      useNodeStore.getState().registerNode("root", {
-        data: { type: "root", props: { id: "root" } },
-      });
-      useNodeStore.getState().registerNode("item-1", {
-        data: testItem,
-        parentId: "root",
-        zone: "default-zone",
-        path: ["root"],
-        index: 0,
-      });
-      useNodeStore.getState().registerNode("item-2", {
-        data: testItem2,
-        parentId: "item-1",
-        zone: "zone",
-        path: ["root", "item-1:zone"],
-        index: 0,
-      });
-    });
+    let result: any;
 
-    // 4) Now call the hook
-    const { result } = renderHook(() => useBreadcrumbs());
+    const Comp = () => {
+      result = useBreadcrumbs();
+      return <></>;
+    };
+
+    render(
+      <Context>
+        <Comp />
+      </Context>
+    );
 
     // 5) Expect the result to include the "Page" crumb plus the item crumb
-    expect(result.current).toEqual([
+    expect(result).toEqual([
       { label: "Page", selector: null },
       {
         label: "My Component Label",
-        selector: { index: 0, zone: "root" },
+        selector: { index: 0, zone: "root:default-zone" },
       },
     ]);
   });
 
   it("truncates the breadcrumb list to renderCount if provided", () => {
-    // 1) Set up the config & selected item in the app store
     const config: Config = {
       components: {
         MyComponent: {
@@ -117,42 +116,40 @@ describe("useBreadcrumbs", () => {
       props: { id: "item-2" },
     };
 
-    // 2) Assign config & selected item to the app store
-    useAppStore.setState({
+    renderHook(() => useRegisterNodesSlice(appStore));
+
+    appStore.setState({
       config,
+      state: {
+        ui: appStore.getState().state.ui,
+        data: {
+          content: [testItem],
+          root: {},
+          zones: {
+            "item-1:zone": [testItem2],
+          },
+        },
+      },
       selectedItem: testItem2,
     });
 
-    // 3) We'll manually populate the node store with path info
-    // Typical usage would be from generateNodeStore, but we can do it inline for this test
-    act(() => {
-      useNodeStore.getState().registerNode("root", {
-        data: { type: "root", props: { id: "root" } },
-      });
-      useNodeStore.getState().registerNode("item-1", {
-        data: testItem,
-        parentId: "root",
-        zone: "default-zone",
-        path: ["root"],
-        index: 0,
-      });
-      useNodeStore.getState().registerNode("item-2", {
-        data: testItem2,
-        parentId: "item-1",
-        zone: "zone",
-        path: ["root", "item-1:zone"],
-        index: 0,
-      });
-    });
+    let result: any;
+
+    const Comp = () => {
+      result = useBreadcrumbs(1);
+      return <></>;
+    };
 
-    // 4) Now call the hook
-    const { result } = renderHook(() => useBreadcrumbs(1));
+    render(
+      <Context>
+        <Comp />
+      </Context>
+    );
 
-    // 5) Expect the result to include the "Page" crumb plus the item crumb
-    expect(result.current).toEqual([
+    expect(result).toEqual([
       {
         label: "My Component Label",
-        selector: { index: 0, zone: "root" },
+        selector: { index: 0, zone: "root:default-zone" },
       },
     ]);
   });
@@ -177,43 +174,42 @@ describe("useBreadcrumbs", () => {
       props: { id: "item-2" },
     };
 
-    // 2) Assign config & selected item to the app store
-    useAppStore.setState({
+    renderHook(() => useRegisterNodesSlice(appStore));
+
+    appStore.setState({
       config,
+      state: {
+        ui: appStore.getState().state.ui,
+        data: {
+          content: [testItem],
+          root: {},
+          zones: {
+            "item-1:zone": [testItem2],
+          },
+        },
+      },
       selectedItem: testItem2,
     });
 
-    // 3) We'll manually populate the node store with path info
-    // Typical usage would be from generateNodeStore, but we can do it inline for this test
-    act(() => {
-      useNodeStore.getState().registerNode("root", {
-        data: { type: "root", props: { id: "root" } },
-      });
-      useNodeStore.getState().registerNode("item-1", {
-        data: testItem,
-        parentId: "root",
-        zone: "default-zone",
-        path: ["root"],
-        index: 0,
-      });
-      useNodeStore.getState().registerNode("item-2", {
-        data: testItem2,
-        parentId: "item-1",
-        zone: "zone",
-        path: ["root", "item-1:zone"],
-        index: 0,
-      });
-    });
+    let result: any;
 
-    // 4) Now call the hook
-    const { result } = renderHook(() => useBreadcrumbs());
+    const Comp = () => {
+      result = useBreadcrumbs();
+      return <></>;
+    };
+
+    render(
+      <Context>
+        <Comp />
+      </Context>
+    );
 
     // 5) Expect the result to include the "Page" crumb plus the item crumb
-    expect(result.current).toEqual([
+    expect(result).toEqual([
       { label: "Page", selector: null },
       {
         label: "MyComponent", // Fall back to type name
-        selector: { index: 0, zone: "root" },
+        selector: { index: 0, zone: "root:default-zone" },
       },
     ]);
   });
diff --git a/packages/core/lib/get-item.ts b/packages/core/lib/get-item.ts
index b6f829f742..93d24d35bc 100644
--- a/packages/core/lib/get-item.ts
+++ b/packages/core/lib/get-item.ts
@@ -1,4 +1,4 @@
-import { useAppStore } from "../stores/app-store";
+import { useAppStore } from "../store";
 import { Data } from "../types";
 import { rootDroppableId } from "./root-droppable-id";
 import { setupZone } from "./setup-zone";
@@ -10,22 +10,18 @@ export type ItemSelector = {
 
 export function getItem<UserData extends Data>(
   selector: ItemSelector,
-  data?: UserData,
+  data: UserData,
   dynamicProps: Record<string, any> = {}
 ): UserData["content"][0] | undefined {
-  const _data = data ?? useAppStore.getState().state.data;
-
-  if (!_data) return;
-
   if (!selector.zone || selector.zone === rootDroppableId) {
-    const item = _data.content[selector.index];
+    const item = data.content[selector.index];
 
     return item?.props
       ? { ...item, props: dynamicProps[item.props.id] || item.props }
       : undefined;
   }
 
-  const item = setupZone(_data, selector.zone).zones[selector.zone][
+  const item = setupZone(data, selector.zone).zones[selector.zone][
     selector.index
   ];
 
diff --git a/packages/core/lib/resolve-data.ts b/packages/core/lib/resolve-data.ts
index 7f62b07ffa..8f39a74448 100644
--- a/packages/core/lib/resolve-data.ts
+++ b/packages/core/lib/resolve-data.ts
@@ -3,11 +3,10 @@ import { resolveComponentData } from "./resolve-component-data";
 import { applyDynamicProps } from "./apply-dynamic-props";
 import { resolveRootData } from "./resolve-root-data";
 import { flattenData } from "./flatten-data";
-import { getAppStore } from "../stores/app-store";
+import { AppStore } from "../store";
 import fdeq from "fast-deep-equal";
-import { usePermissionsStore } from "../stores/permissions-store";
 
-export const resolveData = (newAppState: AppState) => {
+export const resolveData = (newAppState: AppState, appStoreData: AppStore) => {
   const {
     state: appState,
     config,
@@ -16,7 +15,8 @@ export const resolveData = (newAppState: AppState) => {
     setComponentLoading,
     unsetComponentLoading,
     metadata,
-  } = getAppStore();
+    permissions,
+  } = appStoreData;
 
   const deferredSetStates: Record<string, NodeJS.Timeout> = {};
 
@@ -97,7 +97,7 @@ export const resolveData = (newAppState: AppState) => {
       promises.push(
         (async () => {
           // Don't wait for resolver to complete to update permissions
-          usePermissionsStore.getState().resolvePermissions({ item }, true);
+          permissions.resolvePermissions({ item }, true);
 
           const dynamicData: ComponentData = await resolveComponentData(
             item,
diff --git a/packages/core/lib/use-breadcrumbs.ts b/packages/core/lib/use-breadcrumbs.ts
index a59b8bd350..9415c54c00 100644
--- a/packages/core/lib/use-breadcrumbs.ts
+++ b/packages/core/lib/use-breadcrumbs.ts
@@ -1,7 +1,6 @@
 import { useMemo } from "react";
-import { useAppStore } from "../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../store";
 import { ItemSelector } from "./get-item";
-import { useNodeStore } from "../stores/node-store";
 
 export type Breadcrumb = {
   label: string;
@@ -12,7 +11,8 @@ export type Breadcrumb = {
 export const useBreadcrumbs = (renderCount?: number) => {
   const selectedId = useAppStore((s) => s.selectedItem?.props.id);
   const config = useAppStore((s) => s.config);
-  const path = useNodeStore((s) => s.nodes[selectedId]?.path);
+  const path = useAppStore((s) => s.nodes.nodes[selectedId]?.path);
+  const appStore = useAppStoreApi();
 
   return useMemo<Breadcrumb[]>(() => {
     const breadcrumbs =
@@ -26,7 +26,7 @@ export const useBreadcrumbs = (renderCount?: number) => {
           };
         }
 
-        const node = useNodeStore.getState().nodes[componentId];
+        const node = appStore.getState().nodes.nodes[componentId];
 
         const label = node
           ? config.components[node.data.type]?.label ?? node.data.type
diff --git a/packages/core/lib/use-component-list.tsx b/packages/core/lib/use-component-list.tsx
index b6fef41d34..818904499a 100644
--- a/packages/core/lib/use-component-list.tsx
+++ b/packages/core/lib/use-component-list.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
 import { ComponentList } from "../components/ComponentList";
-import { useAppStore } from "../stores/app-store";
+import { useAppStore } from "../store";
 
 export const useComponentList = () => {
   const [componentList, setComponentList] = useState<ReactNode[]>();
diff --git a/packages/core/lib/use-parent.ts b/packages/core/lib/use-parent.ts
index 9a1af7c3f0..5c3da24f24 100644
--- a/packages/core/lib/use-parent.ts
+++ b/packages/core/lib/use-parent.ts
@@ -1,11 +1,12 @@
-import { getAppStore } from "../stores/app-store";
-import { useNodeStore } from "../stores/node-store";
+import { useAppStore, useAppStoreApi } from "../store";
 
 export const useParent = () => {
-  const selectedItem = getAppStore().selectedItem;
-  const parent = useNodeStore((s) => {
-    const node = s.nodes[selectedItem?.props.id];
-    return node ? s.nodes[node.parentId] : null;
+  const appStore = useAppStoreApi();
+
+  const selectedItem = appStore.getState().selectedItem;
+  const parent = useAppStore((s) => {
+    const node = s.nodes.nodes[selectedItem?.props.id];
+    return node?.parentId ? s.nodes.nodes[node.parentId] : null;
   });
 
   return parent?.data ?? null;
diff --git a/packages/core/lib/use-preview-mode-hotkeys.ts b/packages/core/lib/use-preview-mode-hotkeys.ts
index e1e7dd0cf1..5e69e9f2af 100644
--- a/packages/core/lib/use-preview-mode-hotkeys.ts
+++ b/packages/core/lib/use-preview-mode-hotkeys.ts
@@ -1,12 +1,11 @@
 import { useCallback } from "react";
 import { useHotkey } from "./use-hotkey";
-import { getAppStore } from "../stores/app-store";
+import { useAppStoreApi } from "../store";
 
 export const usePreviewModeHotkeys = () => {
+  const appStore = useAppStoreApi();
   const toggleInteractive = useCallback(() => {
-    console.log("toggle preview", getAppStore().state.ui.previewMode);
-
-    const dispatch = getAppStore().dispatch;
+    const dispatch = appStore.getState().dispatch;
 
     dispatch({
       type: "setUi",
@@ -14,7 +13,7 @@ export const usePreviewModeHotkeys = () => {
         previewMode: ui.previewMode === "edit" ? "interactive" : "edit",
       }),
     });
-  }, []);
+  }, [appStore]);
 
   useHotkey({ meta: true, i: true }, toggleInteractive);
   useHotkey({ ctrl: true, i: true }, toggleInteractive); // Windows
diff --git a/packages/core/lib/use-puck.ts b/packages/core/lib/use-puck.ts
index 5840935a06..a5f53edb16 100644
--- a/packages/core/lib/use-puck.ts
+++ b/packages/core/lib/use-puck.ts
@@ -1,13 +1,8 @@
 import { useShallow } from "zustand/react/shallow";
-import { defaultAppStore, useAppStore } from "../stores/app-store";
+import { defaultAppStore, useAppStore, useAppStoreApi } from "../store";
 import { Config, UserGenerics } from "../types";
-import { useHistoryStore } from "../stores/history-store";
 import { useCallback } from "react";
-import {
-  GetPermissions,
-  RefreshPermissions,
-  usePermissionsStore,
-} from "../stores/permissions-store";
+import { GetPermissions, RefreshPermissions } from "../store/permissions-store";
 
 export const usePuck = <
   UserConfig extends Config = Config,
@@ -20,31 +15,37 @@ export const usePuck = <
     (s) => s.config as G["UserConfig"]
   );
   const dispatch = useAppStore((s) => s.dispatch);
-  const currentItem = useAppStore((s) => s.selectedItem);
+  const currentItem = useAppStore<G["UserComponentData"]>(
+    (s) => s.selectedItem as G["UserComponentData"]
+  );
+
+  const appStore = useAppStoreApi();
 
-  const historyApi = useHistoryStore(
+  const historyApi = useAppStore(
     useShallow((s) => ({
-      back: s.back,
-      forward: s.forward,
-      setHistories: s.setHistories,
-      setHistoryIndex: s.setHistoryIndex,
-      hasPast: s.hasPast(),
-      hasFuture: s.hasFuture(),
-      histories: s.histories,
-      index: s.index,
+      back: s.history.back,
+      forward: s.history.forward,
+      setHistories: s.history.setHistories,
+      setHistoryIndex: s.history.setHistoryIndex,
+      hasPast: s.history.hasPast(),
+      hasFuture: s.history.hasFuture(),
+      histories: s.history.histories,
+      index: s.history.index,
     }))
   );
 
-  const resolvedPermissions = usePermissionsStore((s) => s.resolvedPermissions);
+  const resolvedPermissions = useAppStore(
+    (s) => s.permissions.resolvedPermissions
+  );
 
   const getPermissions: GetPermissions<UserConfig> = useCallback(
-    (params) => usePermissionsStore.getState().getPermissions(params as any),
+    (params) => appStore.getState().permissions.getPermissions(params as any),
     [resolvedPermissions]
   );
 
   const refreshPermissions: RefreshPermissions<UserConfig> = useCallback(
     (params) =>
-      usePermissionsStore.getState().resolvePermissions(params as any),
+      appStore.getState().permissions.resolvePermissions(params as any),
     []
   );
 
diff --git a/packages/core/reducer/__tests__/data.spec.tsx b/packages/core/reducer/__tests__/data.spec.tsx
index 2fa79b89b1..d29e02f30d 100644
--- a/packages/core/reducer/__tests__/data.spec.tsx
+++ b/packages/core/reducer/__tests__/data.spec.tsx
@@ -14,7 +14,7 @@ import { AppState, Config, Data, UiState } from "../../types";
 import { rootDroppableId } from "../../lib/root-droppable-id";
 
 import { generateId } from "../../lib/generate-id";
-import { defaultAppState } from "../../stores/app-store";
+import { defaultAppState } from "../../store";
 
 jest.mock("../../lib/generate-id");
 
diff --git a/packages/core/reducer/__tests__/state.spec.tsx b/packages/core/reducer/__tests__/state.spec.tsx
index 6f954e46c3..501e1519c5 100644
--- a/packages/core/reducer/__tests__/state.spec.tsx
+++ b/packages/core/reducer/__tests__/state.spec.tsx
@@ -1,4 +1,4 @@
-import { defaultAppState } from "../../stores/app-store";
+import { defaultAppState } from "../../store";
 import { rootDroppableId } from "../../lib/root-droppable-id";
 import {
   DuplicateAction,
diff --git a/packages/core/store/index.ts b/packages/core/store/index.ts
new file mode 100644
index 0000000000..ae26b9d032
--- /dev/null
+++ b/packages/core/store/index.ts
@@ -0,0 +1,267 @@
+import {
+  Config,
+  IframeConfig,
+  Overrides,
+  AppState,
+  UiState,
+  Plugin,
+  UserGenerics,
+  Field,
+  ComponentConfig,
+  Metadata,
+} from "../types";
+import { createReducer, PuckAction } from "../reducer";
+import { getItem } from "../lib/get-item";
+import { defaultViewports } from "../components/ViewportControls/default-viewports";
+import { Viewports } from "../types";
+import { create, useStore } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+import { resolveData } from "../lib/resolve-data";
+import { createContext, useContext } from "react";
+import { createHistorySlice, type HistorySlice } from "./slices/history";
+import { createNodesSlice, type NodesSlice } from "./slices/nodes";
+import {
+  createPermissionsSlice,
+  type PermissionsSlice,
+} from "./slices/permissions";
+import { createFieldsStore, type FieldsSlice } from "./slices/fields";
+
+export const defaultAppState: AppState = {
+  data: { content: [], root: {}, zones: {} },
+  ui: {
+    leftSideBarVisible: true,
+    rightSideBarVisible: true,
+    arrayState: {},
+    itemSelector: null,
+    componentList: {},
+    isDragging: false,
+    previewMode: "edit",
+    viewports: {
+      current: {
+        width: defaultViewports[0].width,
+        height: defaultViewports[0].height || "auto",
+      },
+      options: [],
+      controlsVisible: true,
+    },
+    field: { focus: null },
+  },
+};
+
+export type Status = "LOADING" | "MOUNTED" | "READY";
+
+type ZoomConfig = {
+  autoZoom: number;
+  rootHeight: number;
+  zoom: number;
+};
+
+type ComponentState = Record<string, { loadingCount: number }>;
+
+export type AppStore<
+  UserConfig extends Config = Config,
+  G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
+> = {
+  state: G["UserAppState"];
+  dispatch: (action: PuckAction) => void;
+  config: UserConfig;
+  componentState: ComponentState;
+  setComponentState: (componentState: ComponentState) => void;
+  setComponentLoading: (id: string) => void;
+  unsetComponentLoading: (id: string) => void;
+  resolveDataRuns: number;
+  resolveData: (newAppState: AppState) => void;
+  plugins: Plugin[];
+  overrides: Partial<Overrides>;
+  viewports: Viewports;
+  zoomConfig: ZoomConfig;
+  setZoomConfig: (zoomConfig: ZoomConfig) => void;
+  status: Status;
+  setStatus: (status: Status) => void;
+  iframe: IframeConfig;
+  selectedItem?: G["UserData"]["content"][0] | null;
+  setUi: (ui: Partial<UiState>, recordHistory?: boolean) => void;
+  getComponentConfig: (type?: string) => ComponentConfig | null | undefined;
+  metadata: Metadata;
+  fields: FieldsSlice;
+  history: HistorySlice;
+  nodes: NodesSlice;
+  permissions: PermissionsSlice;
+};
+
+export const defaultAppStore: AppStore = {
+  state: defaultAppState,
+  dispatch: () => null,
+  config: { components: {} },
+  componentState: {},
+  setComponentState: () => {},
+  setComponentLoading: () => {},
+  unsetComponentLoading: () => {},
+  resolveDataRuns: 0,
+  resolveData: () => {},
+  plugins: [],
+  overrides: {},
+  viewports: defaultViewports,
+  zoomConfig: {
+    autoZoom: 1,
+    rootHeight: 0,
+    zoom: 1,
+  },
+  setZoomConfig: () => null,
+  status: "LOADING",
+  setStatus: () => null,
+  iframe: {},
+  setUi: () => null,
+  getComponentConfig: () => null,
+  metadata: {},
+  fields: {
+    fields: {},
+    loading: false,
+    lastResolvedData: {},
+  },
+  history: {
+    index: -1,
+    hasPast: () => false,
+    hasFuture: () => false,
+    histories: [],
+    record: () => {},
+    back: () => {},
+    forward: () => {},
+    currentHistory: () => ({ id: "", state: {} }),
+    nextHistory: () => null,
+    prevHistory: () => null,
+    setHistories: () => null,
+    setHistoryIndex: () => null,
+    initialAppState: defaultAppState,
+  },
+  nodes: {
+    nodes: {},
+    registerNode: () => {},
+    unregisterNode: () => {},
+  },
+  permissions: {
+    cache: {},
+    globalPermissions: {
+      drag: true,
+      edit: true,
+      delete: true,
+      duplicate: true,
+      insert: true,
+    },
+    getPermissions: () => ({
+      drag: true,
+      edit: true,
+      delete: true,
+      duplicate: true,
+      insert: true,
+    }),
+    resolvePermissions: () => {},
+    resolvedPermissions: {},
+  },
+};
+
+const defaultPageFields: Record<string, Field> = {
+  title: { type: "text" },
+};
+
+export const createAppStore = () =>
+  create<AppStore>()(
+    subscribeWithSelector((set, get) => ({
+      ...defaultAppStore,
+      fields: createFieldsStore(set, get),
+      history: createHistorySlice(set, get),
+      nodes: createNodesSlice(set, get),
+      permissions: createPermissionsSlice(set, get),
+      getComponentConfig: (type?: string) => {
+        const { config, selectedItem } = get();
+        const rootFields = config.root?.fields || defaultPageFields;
+
+        return type && type !== "root"
+          ? config.components[type]
+          : selectedItem
+          ? config.components[selectedItem.type]
+          : ({ ...config.root, fields: rootFields } as ComponentConfig);
+      },
+      dispatch: (action: PuckAction) =>
+        set((s) => {
+          const { record } = get().history;
+
+          const dispatch = createReducer({ config: s.config, record });
+
+          const state = dispatch(s.state, action);
+
+          const selectedItem = state.ui.itemSelector
+            ? getItem(state.ui.itemSelector, state.data)
+            : null;
+
+          return { ...s, state, selectedItem };
+        }),
+      setZoomConfig: (zoomConfig) => set({ zoomConfig }),
+      setStatus: (status) => set({ status }),
+      setComponentState: (componentState) => set({ componentState }),
+      setComponentLoading: (id: string) => {
+        const { setComponentState, componentState } = get();
+
+        setComponentState({
+          ...componentState,
+          [id]: {
+            ...componentState[id],
+            loadingCount: (componentState[id]?.loadingCount || 0) + 1,
+          },
+        });
+      },
+      unsetComponentLoading: (id: string) => {
+        const { setComponentState, componentState } = get();
+
+        setComponentState({
+          ...componentState,
+          [id]: {
+            ...componentState[id],
+            loadingCount: Math.max(
+              (componentState[id]?.loadingCount || 0) - 1,
+              0
+            ),
+          },
+        });
+      },
+      // Helper
+      setUi: (ui: Partial<UiState>, recordHistory?: boolean) =>
+        set((s) => {
+          const dispatch = createReducer({
+            config: s.config,
+            record: () => {},
+          });
+
+          const state = dispatch(s.state, {
+            type: "setUi",
+            ui,
+            recordHistory,
+          });
+
+          const selectedItem = state.ui.itemSelector
+            ? getItem(state.ui.itemSelector, state.data)
+            : null;
+
+          return { ...s, state, selectedItem };
+        }),
+      resolveDataRuns: 0,
+      resolveData: (newAppState) =>
+        set((s) => {
+          resolveData(newAppState, get());
+
+          return { ...s, resolveDataRuns: s.resolveDataRuns + 1 };
+        }),
+    }))
+  );
+
+export const appStoreContext = createContext(createAppStore());
+
+export function useAppStore<T>(selector: (state: AppStore) => T) {
+  const context = useContext(appStoreContext);
+
+  return useStore(context, selector);
+}
+
+export function useAppStoreApi() {
+  return useContext(appStoreContext);
+}
diff --git a/packages/core/stores/__tests__/field-store.spec.tsx b/packages/core/store/slices/__tests__/fields.spec.tsx
similarity index 72%
rename from packages/core/stores/__tests__/field-store.spec.tsx
rename to packages/core/store/slices/__tests__/fields.spec.tsx
index 1d1df1e6a3..2f960336e7 100644
--- a/packages/core/stores/__tests__/field-store.spec.tsx
+++ b/packages/core/store/slices/__tests__/fields.spec.tsx
@@ -1,8 +1,8 @@
 import { renderHook, act, waitFor } from "@testing-library/react";
-import { useFieldStore, useRegisterFieldStore } from "../field-store";
-import { generateNodeStore, useNodeStore } from "../node-store";
-import { defaultAppState, useAppStore } from "../app-store";
-import { Config, ComponentData, AppState } from "../../types";
+import { useRegisterFieldsSlice } from "../fields";
+import { generateNodesSlice } from "../nodes";
+import { createAppStore, defaultAppState } from "../..";
+import { Config, ComponentData, AppState } from "../../../types";
 
 const baseState: AppState = {
   ...defaultAppState,
@@ -18,32 +18,34 @@ const baseState: AppState = {
   },
 };
 
+const appStore = createAppStore();
+
 function resetStores() {
   // Reset main app store:
-  useAppStore.setState(
-    { ...useAppStore.getInitialState(), state: baseState },
-    true
-  );
-
-  // Reset node store:
-  useNodeStore.setState(useNodeStore.getInitialState());
-
-  // Reset field store:
-  useFieldStore.setState(useFieldStore.getInitialState());
+  appStore.setState({ ...appStore.getInitialState(), state: baseState }, true);
 }
 
 const selectFirst = (config: Config) => {
-  useAppStore.setState({
-    ...useAppStore.getState(),
+  appStore.setState({
+    ...appStore.getState(),
     config,
-    selectedItem: useAppStore.getState().state.data.content[0],
+    selectedItem: appStore.getState().state.data.content[0],
+    state: {
+      ...appStore.getState().state,
+      ui: {
+        ...appStore.getState().state.ui,
+        itemSelector: {
+          index: 0,
+        },
+      },
+    },
   });
 };
 
-describe("field-store", () => {
+describe("fields slice", () => {
   beforeEach(() => {
     resetStores();
-    generateNodeStore(useAppStore.getState().state.data);
+    generateNodesSlice(appStore.getState().state.data, appStore);
   });
 
   it("returns default fields if no resolver is defined", async () => {
@@ -58,9 +60,9 @@ describe("field-store", () => {
 
     selectFirst(config);
 
-    renderHook(() => useRegisterFieldStore());
+    renderHook(() => useRegisterFieldsSlice(appStore, "heading-1"));
 
-    const { fields, loading } = useFieldStore.getState();
+    const { fields, loading } = appStore.getState().fields;
 
     expect(fields).toEqual({ title: { type: "text" } });
     expect(loading).toBe(false);
@@ -83,11 +85,11 @@ describe("field-store", () => {
       },
     };
 
-    useAppStore.setState({
+    appStore.setState({
       config,
     });
 
-    renderHook(() => useRegisterFieldStore());
+    renderHook(() => useRegisterFieldsSlice(appStore));
     expect(mockResolveFields).toHaveBeenCalledTimes(1);
     expect(mockResolveFields).toHaveBeenCalledWith(
       {
@@ -95,7 +97,7 @@ describe("field-store", () => {
         type: "root",
       },
       {
-        appState: useAppStore.getState().state,
+        appState: appStore.getState().state,
         changed: {
           id: true,
         },
@@ -107,7 +109,7 @@ describe("field-store", () => {
     );
 
     await waitFor(() => {
-      const { fields, loading } = useFieldStore.getState();
+      const { fields, loading } = appStore.getState().fields;
       expect(fields).toEqual({ title: { type: "textarea" } });
       expect(loading).toBe(false);
     });
@@ -118,18 +120,20 @@ describe("field-store", () => {
       title: { type: "textarea" },
     });
 
-    selectFirst({
+    const config: Config = {
       components: {
         Heading: {
           fields: { title: { type: "text" } },
           render: () => <div />,
-          // Our test resolver:
           resolveFields: mockResolveFields,
         },
       },
-    });
+    };
+
+    selectFirst(config);
+
+    renderHook(() => useRegisterFieldsSlice(appStore, "heading-1"));
 
-    renderHook(() => useRegisterFieldStore());
     expect(mockResolveFields).toHaveBeenCalledTimes(1);
     expect(mockResolveFields).toHaveBeenCalledWith(
       {
@@ -137,7 +141,7 @@ describe("field-store", () => {
         type: "Heading",
       },
       {
-        appState: useAppStore.getState().state,
+        appState: appStore.getState().state,
         changed: {
           id: true,
           title: true,
@@ -152,7 +156,7 @@ describe("field-store", () => {
     // We set a short timeout in the store (50 ms) before loading = true,
     // so let's wait for that plus the async resolution:
     await waitFor(() => {
-      const { fields, loading } = useFieldStore.getState();
+      const { fields, loading } = appStore.getState().fields;
       // Once resolved, we expect the store to hold the new fields:
       expect(fields).toEqual({ title: { type: "textarea" } });
       expect(loading).toBe(false);
@@ -164,46 +168,46 @@ describe("field-store", () => {
       title: { type: "textarea" },
     });
 
-    selectFirst({
+    const config: Config = {
       components: {
         Heading: {
           fields: { title: { type: "text" } },
           render: () => <div />,
-          // Our test resolver:
           resolveFields: mockResolveFields,
         },
       },
-    });
+    };
 
-    renderHook(() => useRegisterFieldStore());
+    selectFirst(config);
+
+    renderHook(() => useRegisterFieldsSlice(appStore, "heading-1"));
+
+    expect(mockResolveFields).toHaveBeenCalledTimes(1);
 
     // We set a short timeout in the store (50 ms) before loading = true,
     // so let's wait for that plus the async resolution:
     await waitFor(() => {
-      const { fields } = useFieldStore.getState();
+      const { fields } = appStore.getState().fields;
       expect(fields).toEqual({ title: { type: "textarea" } });
     });
 
     mockResolveFields.mockReset();
 
-    // Change data and check result
-    act(() => {
-      useAppStore.getState().dispatch({
-        type: "replace",
-        data: {
-          ...useAppStore.getState().selectedItem,
-          props: {
-            ...useAppStore.getState().selectedItem?.props,
-            title: "Hello, world",
-          },
+    appStore.getState().dispatch({
+      type: "replace",
+      data: {
+        ...appStore.getState().selectedItem,
+        props: {
+          ...appStore.getState().selectedItem?.props,
+          title: "Hello, world",
         },
-        destinationIndex: 0,
-        destinationZone: "root:default-zone",
-      });
-
-      generateNodeStore(useAppStore.getState().state.data);
+      },
+      destinationIndex: 0,
+      destinationZone: "root:default-zone",
     });
 
+    generateNodesSlice(appStore.getState().state.data, appStore);
+
     expect(mockResolveFields).toHaveBeenCalledTimes(1);
     expect(mockResolveFields).toHaveBeenCalledWith(
       {
@@ -211,7 +215,7 @@ describe("field-store", () => {
         type: "Heading",
       },
       {
-        appState: useAppStore.getState().state,
+        appState: appStore.getState().state,
         changed: {
           id: false,
           title: true,
@@ -232,29 +236,32 @@ describe("field-store", () => {
       title: { type: "textarea" },
     });
 
-    selectFirst({
+    const config: Config = {
       components: {
         Heading: {
           fields: { title: { type: "text" } },
           render: () => <div />,
-          // Our test resolver:
           resolveFields: mockResolveFields,
         },
         Block: {
           fields: { title: { type: "number" } },
           render: () => <div />,
-          // Our test resolver:
           resolveFields: mockResolveFields,
         },
       },
-    });
+    };
 
-    renderHook(() => useRegisterFieldStore());
+    selectFirst(config);
+
+    const { rerender } = renderHook(
+      ({ id }: { id: string }) => useRegisterFieldsSlice(appStore, id),
+      { initialProps: { id: "heading-1" } }
+    );
 
     // We set a short timeout in the store (50 ms) before loading = true,
     // so let's wait for that plus the async resolution:
     await waitFor(() => {
-      const { fields } = useFieldStore.getState();
+      const { fields } = appStore.getState().fields;
       expect(fields).toEqual({ title: { type: "textarea" } });
     });
 
@@ -267,20 +274,22 @@ describe("field-store", () => {
         type: "Block",
       };
 
-      useAppStore.setState({
+      appStore.setState({
         state: {
-          ...useAppStore.getState().state,
+          ...appStore.getState().state,
           data: {
-            ...useAppStore.getState().state.data,
-            content: [...useAppStore.getState().state.data.content, newItem],
+            ...appStore.getState().state.data,
+            content: [...appStore.getState().state.data.content, newItem],
           },
         },
         selectedItem: newItem,
       });
 
-      generateNodeStore(useAppStore.getState().state.data);
+      generateNodesSlice(appStore.getState().state.data, appStore);
     });
 
+    rerender({ id: "block-1" });
+
     expect(mockResolveFields).toHaveBeenCalledTimes(1);
     expect(mockResolveFields).toHaveBeenCalledWith(
       {
@@ -288,7 +297,7 @@ describe("field-store", () => {
         type: "Block",
       },
       {
-        appState: useAppStore.getState().state,
+        appState: appStore.getState().state,
         changed: {
           id: true,
           title: true,
@@ -328,16 +337,16 @@ describe("field-store", () => {
 
     selectFirst(config);
 
-    renderHook(() => useRegisterFieldStore());
+    renderHook(() => useRegisterFieldsSlice(appStore, "heading-1"));
 
     // After 50ms, loading should become true:
     await waitFor(() => {
-      expect(useFieldStore.getState().loading).toBe(true);
+      expect(appStore.getState().fields.loading).toBe(true);
     });
 
     // After 100ms total, the resolver finishes:
     await waitFor(() => {
-      const { fields, loading } = useFieldStore.getState();
+      const { fields, loading } = appStore.getState().fields;
       expect(fields).toEqual({
         title: { type: "text" },
         body: { type: "textarea" },
@@ -364,27 +373,27 @@ describe("field-store", () => {
 
     selectFirst(config);
 
-    renderHook(() => useRegisterFieldStore());
+    renderHook(() => useRegisterFieldsSlice(appStore, "heading-1"));
 
     // First call
     expect(mockResolveFields).toHaveBeenCalledTimes(1);
 
     // Now let's simulate a data change
-    const selectedItem = useAppStore.getState().selectedItem;
+    const selectedItem = appStore.getState().selectedItem;
     const updatedItem = {
       ...selectedItem,
       props: { ...selectedItem?.props, title: "Newly changed" },
     };
 
     act(() => {
-      useAppStore.getState().dispatch({
+      appStore.getState().dispatch({
         type: "replace",
         data: updatedItem,
         destinationIndex: 0,
         destinationZone: "root:default-zone",
       });
 
-      generateNodeStore(useAppStore.getState().state.data);
+      generateNodesSlice(appStore.getState().state.data, appStore);
     });
 
     // The subscription should trigger a second resolve:
diff --git a/packages/core/stores/__tests__/history-store.spec.tsx b/packages/core/store/slices/__tests__/history.spec.tsx
similarity index 62%
rename from packages/core/stores/__tests__/history-store.spec.tsx
rename to packages/core/store/slices/__tests__/history.spec.tsx
index 7c24704e21..9ce829be07 100644
--- a/packages/core/stores/__tests__/history-store.spec.tsx
+++ b/packages/core/store/slices/__tests__/history.spec.tsx
@@ -1,31 +1,26 @@
 import { renderHook, act, waitFor } from "@testing-library/react";
-import { useHistoryStore, useRegisterHistoryStore } from "../history-store";
-import { useAppStore, defaultAppState } from "../app-store";
-import { AppState } from "../../types";
+import { useRegisterHistorySlice } from "../history";
+import { defaultAppState, createAppStore } from "../../";
+
+const appStore = createAppStore();
 
 function resetStores() {
-  useAppStore.setState(
+  appStore.setState(
     {
-      ...useAppStore.getInitialState(),
+      ...appStore.getInitialState(),
     },
     true
   );
-
-  useHistoryStore.setState({
-    initialAppState: defaultAppState,
-    index: 0,
-    histories: [],
-  });
 }
 
-describe("history-store", () => {
+describe("history slice", () => {
   beforeEach(() => {
     resetStores();
   });
 
   it("initializes with given histories and index", () => {
     renderHook(() =>
-      useRegisterHistoryStore({
+      useRegisterHistorySlice(appStore, {
         histories: [
           { id: "initial", state: { ...defaultAppState, data: "foo" } },
           { id: "second", state: { ...defaultAppState, data: "bar" } },
@@ -35,7 +30,8 @@ describe("history-store", () => {
       })
     );
 
-    const { histories, index, hasPast, hasFuture } = useHistoryStore.getState();
+    const { histories, index, hasPast, hasFuture } =
+      appStore.getState().history;
 
     expect(histories.length).toBe(2);
     expect(index).toBe(1);
@@ -45,10 +41,10 @@ describe("history-store", () => {
 
   describe("record()", () => {
     it("tracks the history", () => {
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
       // register an initial set of histories
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [{ id: "initial", state: defaultAppState }],
           index: 0,
           initialAppState: defaultAppState,
@@ -57,14 +53,14 @@ describe("history-store", () => {
 
       act(() => {
         // call record with some data
-        useHistoryStore.getState().record({
+        appStore.getState().history.record({
           ...defaultAppState,
           data: { content: [], root: { props: { title: "Hello, world" } } },
         });
       });
 
       waitFor(() => {
-        const { histories } = useHistoryStore.getState();
+        const { histories } = appStore.getState().history;
         expect(histories.length).toBe(2);
         expect(histories[1].state.data.root.props?.title).toBe("Hello, world");
       });
@@ -74,26 +70,26 @@ describe("history-store", () => {
   describe("back()", () => {
     it("does nothing if no past", () => {
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [{ id: "init", state: defaultAppState }],
           index: 0,
           initialAppState: defaultAppState,
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().back();
+        appStore.getState().history.back();
       });
 
-      expect(useHistoryStore.getState().index).toBe(0);
-      expect(useAppStore.getState().dispatch).not.toHaveBeenCalled();
+      expect(appStore.getState().history.index).toBe(0);
+      expect(appStore.getState().dispatch).not.toHaveBeenCalled();
     });
 
     it("rewinds if hasPast", () => {
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [
             { id: "0", state: { ...defaultAppState, data: "A" } },
             { id: "1", state: { ...defaultAppState, data: "B" } },
@@ -103,16 +99,16 @@ describe("history-store", () => {
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().back();
+        appStore.getState().history.back();
       });
 
-      expect(useHistoryStore.getState().index).toBe(0);
-      expect(useHistoryStore.getState().hasPast()).toBe(false);
-      expect(useHistoryStore.getState().hasFuture()).toBe(true);
-      expect(useAppStore.getState().dispatch).toHaveBeenCalledWith({
+      expect(appStore.getState().history.index).toBe(0);
+      expect(appStore.getState().history.hasPast()).toBe(false);
+      expect(appStore.getState().history.hasFuture()).toBe(true);
+      expect(appStore.getState().dispatch).toHaveBeenCalledWith({
         type: "set",
         state: {
           ...defaultAppState,
@@ -125,26 +121,26 @@ describe("history-store", () => {
   describe("forward()", () => {
     it("does nothing if no future", () => {
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [{ id: "0", state: { ...defaultAppState, data: "A" } }],
           index: 0,
           initialAppState: defaultAppState,
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().forward();
+        appStore.getState().history.forward();
       });
 
-      expect(useHistoryStore.getState().index).toBe(0);
-      expect(useAppStore.getState().dispatch).not.toHaveBeenCalled();
+      expect(appStore.getState().history.index).toBe(0);
+      expect(appStore.getState().dispatch).not.toHaveBeenCalled();
     });
 
     it("fast-forwards if hasFuture", () => {
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [
             { id: "0", state: { ...defaultAppState, data: "A" } },
             { id: "1", state: { ...defaultAppState, data: "B" } },
@@ -154,16 +150,16 @@ describe("history-store", () => {
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().forward();
+        appStore.getState().history.forward();
       });
 
-      expect(useHistoryStore.getState().index).toBe(1);
-      expect(useHistoryStore.getState().hasPast()).toBe(true);
-      expect(useHistoryStore.getState().hasFuture()).toBe(false);
-      expect(useAppStore.getState().dispatch).toHaveBeenCalledWith({
+      expect(appStore.getState().history.index).toBe(1);
+      expect(appStore.getState().history.hasPast()).toBe(true);
+      expect(appStore.getState().history.hasFuture()).toBe(false);
+      expect(appStore.getState().dispatch).toHaveBeenCalledWith({
         type: "set",
         state: {
           ...defaultAppState,
@@ -176,17 +172,17 @@ describe("history-store", () => {
   describe("setHistories()", () => {
     it("updates the state appropriately", () => {
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [{ id: "init", state: defaultAppState }],
           index: 0,
           initialAppState: defaultAppState,
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().setHistories([
+        appStore.getState().history.setHistories([
           {
             id: "1",
             state: { ...defaultAppState, data: "One" },
@@ -198,11 +194,11 @@ describe("history-store", () => {
         ]);
       });
 
-      const { histories, index } = useHistoryStore.getState();
+      const { histories, index } = appStore.getState().history;
       expect(histories.length).toBe(2);
       expect(histories[1].state.data).toBe("Two");
       expect(index).toBe(1);
-      expect(useAppStore.getState().dispatch).toHaveBeenCalledWith({
+      expect(appStore.getState().dispatch).toHaveBeenCalledWith({
         type: "set",
         state: defaultAppState, // from the old store’s last item or initialAppState
       });
@@ -212,7 +208,7 @@ describe("history-store", () => {
   describe("setHistoryIndex()", () => {
     it("sets the store index and dispatches that state's data", () => {
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [
             { id: "0", state: { ...defaultAppState, data: "A" } },
             { id: "1", state: { ...defaultAppState, data: "B" } },
@@ -222,14 +218,14 @@ describe("history-store", () => {
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().setHistoryIndex(0);
+        appStore.getState().history.setHistoryIndex(0);
       });
 
-      expect(useHistoryStore.getState().index).toBe(0);
-      expect(useAppStore.getState().dispatch).toHaveBeenCalledWith({
+      expect(appStore.getState().history.index).toBe(0);
+      expect(appStore.getState().dispatch).toHaveBeenCalledWith({
         type: "set",
         state: { ...defaultAppState, data: "B" }, // The code sets with store.histories[store.index] before it changes index
       });
@@ -238,24 +234,24 @@ describe("history-store", () => {
     it("does nothing if out of bounds", () => {
       // By default no histories, or just one:
       renderHook(() =>
-        useRegisterHistoryStore({
+        useRegisterHistorySlice(appStore, {
           histories: [{ id: "0", state: defaultAppState }],
           index: 0,
           initialAppState: defaultAppState,
         })
       );
 
-      jest.spyOn(useAppStore.getState(), "dispatch");
+      jest.spyOn(appStore.getState(), "dispatch");
 
       act(() => {
-        useHistoryStore.getState().setHistoryIndex(5);
+        appStore.getState().history.setHistoryIndex(5);
       });
 
       // The new code always calls dispatch with the "current" index's state before setting the new index,
       // so if the store doesn't check bounds, it might still dispatch once.
       // If your final code checks bounds, you'd expect no dispatch. Adjust the check as needed:
-      expect(useAppStore.getState().dispatch).toHaveBeenCalledTimes(1); // or 0 if you disallow out-of-bounds fully
-      expect(useHistoryStore.getState().index).toBe(5);
+      expect(appStore.getState().dispatch).toHaveBeenCalledTimes(1); // or 0 if you disallow out-of-bounds fully
+      expect(appStore.getState().history.index).toBe(5);
     });
   });
 });
diff --git a/packages/core/stores/__tests__/node-store.spec.tsx b/packages/core/store/slices/__tests__/nodes.spec.tsx
similarity index 59%
rename from packages/core/stores/__tests__/node-store.spec.tsx
rename to packages/core/store/slices/__tests__/nodes.spec.tsx
index bb3855ec4b..0cf4fe16c5 100644
--- a/packages/core/stores/__tests__/node-store.spec.tsx
+++ b/packages/core/store/slices/__tests__/nodes.spec.tsx
@@ -1,32 +1,22 @@
 import { renderHook, act } from "@testing-library/react";
-import {
-  useNodeStore,
-  generateNodeStore,
-  useRegisterNodeStore,
-} from "../node-store";
-import { useAppStore, defaultAppState } from "../app-store";
-import { Data, ComponentData } from "../../types";
-import { rootAreaId, rootZone } from "../../lib/root-droppable-id";
+import { generateNodesSlice, useRegisterNodesSlice } from "../nodes";
+import { defaultAppState, createAppStore } from "../../";
+import { Data, ComponentData } from "../../../types";
+import { rootAreaId, rootZone } from "../../../lib/root-droppable-id";
+
+const appStore = createAppStore();
 
 function resetStores() {
   // Reset the main app store
-  useAppStore.setState(
-    {
-      ...useAppStore.getInitialState(),
-    },
-    true
-  );
-
-  // Reset node store
-  useNodeStore.setState(
+  appStore.setState(
     {
-      ...useNodeStore.getInitialState(),
+      ...appStore.getInitialState(),
     },
     true
   );
 }
 
-describe("node-store", () => {
+describe("nodes slice", () => {
   beforeEach(() => {
     resetStores();
   });
@@ -50,10 +40,10 @@ describe("node-store", () => {
     };
 
     act(() => {
-      generateNodeStore(data);
+      generateNodesSlice(data, appStore);
     });
 
-    const { nodes } = useNodeStore.getState();
+    const { nodes } = appStore.getState().nodes;
 
     expect(nodes["item-1"]).toBeDefined();
     expect(nodes["item-1"]?.parentId).toBe(rootAreaId);
@@ -77,10 +67,10 @@ describe("node-store", () => {
     };
 
     act(() => {
-      generateNodeStore(data1);
+      generateNodesSlice(data1, appStore);
     });
 
-    expect(useNodeStore.getState().nodes["old-item"]).toBeDefined();
+    expect(appStore.getState().nodes.nodes["old-item"]).toBeDefined();
 
     const data2: Data = {
       root: { props: {} },
@@ -89,36 +79,36 @@ describe("node-store", () => {
     };
 
     act(() => {
-      generateNodeStore(data2);
+      generateNodesSlice(data2, appStore);
     });
 
-    expect(useNodeStore.getState().nodes["old-item"]).toBeUndefined();
-    expect(useNodeStore.getState().nodes["new-item"]).toBeDefined();
+    expect(appStore.getState().nodes.nodes["old-item"]).toBeUndefined();
+    expect(appStore.getState().nodes.nodes["new-item"]).toBeDefined();
   });
 
   it("registerNode merges changed data", () => {
-    expect(Object.keys(useNodeStore.getState().nodes)).toHaveLength(0);
+    expect(Object.keys(appStore.getState().nodes.nodes)).toHaveLength(0);
 
     act(() => {
-      useNodeStore.getState().registerNode("test-1", {
+      appStore.getState().nodes.registerNode("test-1", {
         data: { type: "SomeType", props: { id: "test-1" } },
         parentId: "fake-parent",
         zone: "fake-zone",
       });
     });
 
-    const initialNode = useNodeStore.getState().nodes["test-1"];
+    const initialNode = appStore.getState().nodes.nodes["test-1"];
     expect(initialNode).toBeDefined();
     expect(initialNode?.zone).toBe("fake-zone");
 
     // Re-register with partial changes
     act(() => {
-      useNodeStore.getState().registerNode("test-1", {
+      appStore.getState().nodes.registerNode("test-1", {
         zone: "new-zone",
       });
     });
 
-    const updatedNode = useNodeStore.getState().nodes["test-1"];
+    const updatedNode = appStore.getState().nodes.nodes["test-1"];
     expect(updatedNode).toBeDefined();
     expect(updatedNode?.zone).toBe("new-zone");
     // The rest stays the same
@@ -126,74 +116,74 @@ describe("node-store", () => {
 
     // If partial data hasn't changed, it won't overwrite
     act(() => {
-      useNodeStore.getState().registerNode("test-1", {
+      appStore.getState().nodes.registerNode("test-1", {
         zone: "new-zone", // same as before
       });
     });
     // Confirm it's not overwritten incorrectly
-    expect(useNodeStore.getState().nodes["test-1"]?.zone).toBe("new-zone");
+    expect(appStore.getState().nodes.nodes["test-1"]?.zone).toBe("new-zone");
   });
 
   it("registerNode does not update the node at all if data doesn't change", () => {
-    expect(Object.keys(useNodeStore.getState().nodes)).toHaveLength(0);
+    expect(Object.keys(appStore.getState().nodes.nodes)).toHaveLength(0);
 
     act(() => {
-      useNodeStore.getState().registerNode("test-1", {
+      appStore.getState().nodes.registerNode("test-1", {
         data: { type: "SomeType", props: { id: "test-1" } },
         parentId: "fake-parent",
         zone: "fake-zone",
       });
     });
 
-    const initialNode = useNodeStore.getState().nodes["test-1"];
+    const initialNode = appStore.getState().nodes.nodes["test-1"];
     expect(initialNode).toBeDefined();
     expect(initialNode?.zone).toBe("fake-zone");
 
     // Re-register with partial changes
     act(() => {
-      useNodeStore.getState().registerNode("test-1", {
+      appStore.getState().nodes.registerNode("test-1", {
         data: { type: "SomeType", props: { id: "test-1" } },
         parentId: "fake-parent",
         zone: "fake-zone",
       });
     });
 
-    const updatedNode = useNodeStore.getState().nodes["test-1"];
+    const updatedNode = appStore.getState().nodes.nodes["test-1"];
     expect(updatedNode).toBe(initialNode); // Check refs are the same
   });
 
   it("unregisterNode removes from the store", () => {
     act(() => {
-      useNodeStore.getState().registerNode("test-2", {
+      appStore.getState().nodes.registerNode("test-2", {
         data: { type: "SomeType", props: { id: "test-2" } },
       });
     });
-    expect(useNodeStore.getState().nodes["test-2"]).toBeDefined();
+    expect(appStore.getState().nodes.nodes["test-2"]).toBeDefined();
 
     act(() => {
-      useNodeStore.getState().unregisterNode("test-2");
+      appStore.getState().nodes.unregisterNode("test-2");
     });
-    expect(useNodeStore.getState().nodes["test-2"]).toBeUndefined();
+    expect(appStore.getState().nodes.nodes["test-2"]).toBeUndefined();
   });
 
-  it("useRegisterNodeStore sets up a subscription that calls generateNodeStore when data changes", () => {
-    // We'll spy on generateNodeStore
-    const spyGenerateNodeStore = jest.spyOn(
-      require("../node-store"),
-      "generateNodeStore"
+  it("useRegisterNodesSlice sets up a subscription that calls generateNodesSlice when data changes", () => {
+    // We'll spy on generateNodesSlice
+    const spyGenerateNodesSlice = jest.spyOn(
+      require("../nodes"),
+      "generateNodesSlice"
     );
 
     // Render the hook to create the subscription
-    renderHook(() => useRegisterNodeStore());
+    renderHook(() => useRegisterNodesSlice(appStore));
 
-    // Initially, it won't call generateNodeStore until data changes
-    expect(spyGenerateNodeStore).not.toHaveBeenCalled();
+    // Initially, it won't call generateNodesSlice until data changes
+    expect(spyGenerateNodesSlice).not.toHaveBeenCalled();
 
     // Now let's modify the data in the app store
     const sampleItem: ComponentData = { type: "X", props: { id: "x1" } };
 
     act(() => {
-      useAppStore.setState({
+      appStore.setState({
         state: {
           ...defaultAppState,
           data: {
@@ -204,9 +194,9 @@ describe("node-store", () => {
       });
     });
 
-    expect(spyGenerateNodeStore).toHaveBeenCalledTimes(1);
+    expect(spyGenerateNodesSlice).toHaveBeenCalledTimes(1);
 
     // Cleanup
-    spyGenerateNodeStore.mockRestore();
+    spyGenerateNodesSlice.mockRestore();
   });
 });
diff --git a/packages/core/stores/__tests__/permissions-store.spec.tsx b/packages/core/store/slices/__tests__/permissions.spec.tsx
similarity index 76%
rename from packages/core/stores/__tests__/permissions-store.spec.tsx
rename to packages/core/store/slices/__tests__/permissions.spec.tsx
index 3eacba3829..9516820d6a 100644
--- a/packages/core/stores/__tests__/permissions-store.spec.tsx
+++ b/packages/core/store/slices/__tests__/permissions.spec.tsx
@@ -1,33 +1,20 @@
 import { renderHook, act, waitFor } from "@testing-library/react";
-import {
-  usePermissionsStore,
-  useRegisterPermissionsStore,
-} from "../permissions-store";
-import { useAppStore, defaultAppState } from "../app-store";
-import { rootDroppableId } from "../../lib/root-droppable-id";
+import { useRegisterPermissionsSlice } from "../permissions";
+import { defaultAppState, createAppStore } from "../../";
+import { rootDroppableId } from "../../../lib/root-droppable-id";
+
+const appStore = createAppStore();
 
 function resetStores() {
-  useAppStore.setState(
+  appStore.setState(
     {
-      ...useAppStore.getInitialState(),
+      ...appStore.getInitialState(),
     },
     true
   );
-
-  usePermissionsStore.setState({
-    cache: {},
-    globalPermissions: {
-      drag: true,
-      edit: true,
-      delete: true,
-      duplicate: true,
-      insert: true,
-    },
-    resolvedPermissions: {},
-  });
 }
 
-describe("permissions-store", () => {
+describe("permissions slice", () => {
   beforeEach(() => {
     resetStores();
   });
@@ -35,7 +22,7 @@ describe("permissions-store", () => {
   it("resolves on load", async () => {
     const mockResolvePermissions = jest.fn().mockReturnValue({});
 
-    useAppStore.setState({
+    appStore.setState({
       config: {
         root: {
           render: () => <div />,
@@ -53,7 +40,7 @@ describe("permissions-store", () => {
       },
     });
 
-    renderHook(() => useRegisterPermissionsStore({ foo: true }));
+    renderHook(() => useRegisterPermissionsSlice(appStore, { foo: true }));
 
     expect(mockResolvePermissions).toHaveBeenCalledTimes(1);
   });
@@ -61,7 +48,7 @@ describe("permissions-store", () => {
   it("auto-resolves when appStore data changes", async () => {
     const mockResolvePermissions = jest.fn().mockReturnValue({});
 
-    useAppStore.setState({
+    appStore.setState({
       config: {
         root: {
           render: () => <div />,
@@ -79,15 +66,15 @@ describe("permissions-store", () => {
       },
     });
 
-    renderHook(() => useRegisterPermissionsStore({ foo: true }));
+    renderHook(() => useRegisterPermissionsSlice(appStore, { foo: true }));
 
     expect(mockResolvePermissions).toHaveBeenCalledTimes(1);
 
-    useAppStore.setState({
+    appStore.setState({
       state: {
         ...defaultAppState,
         data: {
-          ...useAppStore.getState().state.data,
+          ...appStore.getState().state.data,
           root: {
             props: {
               title: "Goodbye, world",
@@ -105,7 +92,7 @@ describe("permissions-store", () => {
     let unloadingCalled = false;
 
     // Mock to see if they are called
-    useAppStore.setState({
+    appStore.setState({
       setComponentLoading: () => {
         loadingCalled = true;
       },
@@ -114,10 +101,12 @@ describe("permissions-store", () => {
       },
     });
 
-    renderHook(() => useRegisterPermissionsStore({ globalTest: true }));
+    renderHook(() =>
+      useRegisterPermissionsSlice(appStore, { globalTest: true })
+    );
 
     await act(async () => {
-      usePermissionsStore.getState().resolvePermissions();
+      appStore.getState().permissions.resolvePermissions();
     });
 
     expect(loadingCalled).toBe(false);
@@ -127,7 +116,7 @@ describe("permissions-store", () => {
     loadingCalled = false;
     unloadingCalled = false;
 
-    useAppStore.setState({
+    appStore.setState({
       config: {
         components: {
           MyComponent: {
@@ -151,10 +140,12 @@ describe("permissions-store", () => {
       },
     });
 
-    renderHook(() => useRegisterPermissionsStore({ globalTest: true }));
+    renderHook(() =>
+      useRegisterPermissionsSlice(appStore, { globalTest: true })
+    );
 
     await act(async () => {
-      usePermissionsStore.getState().resolvePermissions();
+      appStore.getState().permissions.resolvePermissions();
     });
 
     // Now we expect calls
@@ -164,15 +155,17 @@ describe("permissions-store", () => {
 
   describe("getPermissions()", () => {
     it("returns global permissions by default", () => {
-      renderHook(() => useRegisterPermissionsStore({ testGlobal: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { testGlobal: true })
+      );
 
-      const perms = usePermissionsStore.getState().getPermissions();
+      const perms = appStore.getState().permissions.getPermissions();
       expect(perms.testGlobal).toBe(true);
       expect(perms.drag).toBe(true); // default
     });
 
     it("returns merged component permissions if present", () => {
-      useAppStore.setState({
+      appStore.setState({
         config: {
           components: {
             MyComponent: {
@@ -183,9 +176,11 @@ describe("permissions-store", () => {
         },
       });
 
-      renderHook(() => useRegisterPermissionsStore({ fromGlobal: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { fromGlobal: true })
+      );
 
-      const perms = usePermissionsStore.getState().getPermissions({
+      const perms = appStore.getState().permissions.getPermissions({
         item: { type: "MyComponent", props: { id: "component-1" } },
       });
       expect(perms.fromGlobal).toBe(true);
@@ -193,7 +188,7 @@ describe("permissions-store", () => {
     });
 
     it("returns merged root permissions if present", () => {
-      useAppStore.setState({
+      appStore.setState({
         config: {
           root: {
             permissions: { rootPerm: true },
@@ -202,11 +197,13 @@ describe("permissions-store", () => {
         },
       });
 
-      renderHook(() => useRegisterPermissionsStore({ fromGlobal: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { fromGlobal: true })
+      );
 
-      const perms = usePermissionsStore
+      const perms = appStore
         .getState()
-        .getPermissions({ root: true });
+        .permissions.getPermissions({ root: true });
       expect(perms.fromGlobal).toBe(true);
       expect(perms.rootPerm).toBe(true);
     });
@@ -218,8 +215,8 @@ describe("permissions-store", () => {
         resolved: true,
       });
 
-      useAppStore.setState({
-        ...useAppStore.getInitialState(),
+      appStore.setState({
+        ...appStore.getInitialState(),
         config: {
           components: {
             MyComponent: {
@@ -238,11 +235,13 @@ describe("permissions-store", () => {
         },
       });
 
-      renderHook(() => useRegisterPermissionsStore({ globalTest: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { globalTest: true })
+      );
 
       await act(async () => {
-        await usePermissionsStore.getState().resolvePermissions();
-        await usePermissionsStore.getState().resolvePermissions(); // Double calls shouldn't run resolvers if data hasn't changed
+        await appStore.getState().permissions.resolvePermissions();
+        await appStore.getState().permissions.resolvePermissions(); // Double calls shouldn't run resolvers if data hasn't changed
       });
 
       expect(resolvePermissions).toHaveBeenCalledTimes(2);
@@ -252,7 +251,7 @@ describe("permissions-store", () => {
           type: "MyComponent",
         },
         {
-          appState: useAppStore.getState().state,
+          appState: appStore.getState().state,
           changed: { id: true },
           lastData: null,
           lastPermissions: null,
@@ -269,7 +268,7 @@ describe("permissions-store", () => {
       );
 
       // Confirm that getPermissions merges in resolved perms
-      const perms = usePermissionsStore.getState().getPermissions({
+      const perms = appStore.getState().permissions.getPermissions({
         item: { type: "MyComponent", props: { id: "comp-1" } },
       });
       expect(perms.resolved).toBe(true);
@@ -281,7 +280,7 @@ describe("permissions-store", () => {
         resolved: true,
       });
 
-      useAppStore.setState({
+      appStore.setState({
         config: {
           components: {
             MyComponent: {
@@ -300,12 +299,14 @@ describe("permissions-store", () => {
         },
       });
 
-      renderHook(() => useRegisterPermissionsStore({ globalTest: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { globalTest: true })
+      );
 
       await act(async () => {
-        await usePermissionsStore.getState().resolvePermissions();
+        await appStore.getState().permissions.resolvePermissions();
 
-        const { dispatch } = useAppStore.getState();
+        const { dispatch } = appStore.getState();
 
         // Will auto trigger an update
         dispatch({
@@ -326,7 +327,7 @@ describe("permissions-store", () => {
           type: "MyComponent",
         },
         {
-          appState: useAppStore.getState().state,
+          appState: appStore.getState().state,
           changed: { id: false, title: true },
           lastData: {
             props: { id: "comp-1" },
@@ -346,7 +347,7 @@ describe("permissions-store", () => {
       );
 
       // Confirm that getPermissions merges in resolved perms
-      const perms = usePermissionsStore.getState().getPermissions({
+      const perms = appStore.getState().permissions.getPermissions({
         item: { type: "MyComponent", props: { id: "comp-1" } },
       });
       expect(perms.resolved).toBe(true);
@@ -355,7 +356,7 @@ describe("permissions-store", () => {
 
     it("updates if item changes or if force = true", async () => {
       let resolveCalls = 0;
-      useAppStore.setState({
+      appStore.setState({
         config: {
           components: {
             MyComponent: {
@@ -379,28 +380,30 @@ describe("permissions-store", () => {
         },
       });
 
-      renderHook(() => useRegisterPermissionsStore({ testGlobal: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { testGlobal: true })
+      );
 
       // Initial
       await act(async () => {
-        await usePermissionsStore.getState().resolvePermissions();
+        await appStore.getState().permissions.resolvePermissions();
       });
       expect(resolveCalls).toBe(2);
 
       // If nothing changed, calling again won't re-resolve
       await act(async () => {
-        await usePermissionsStore.getState().resolvePermissions();
+        await appStore.getState().permissions.resolvePermissions();
       });
       expect(resolveCalls).toBe(2);
 
       // Force => resolves again
       await act(async () => {
-        await usePermissionsStore.getState().resolvePermissions({}, true);
+        await appStore.getState().permissions.resolvePermissions({}, true);
       });
       expect(resolveCalls).toBe(3);
 
       // Change item => triggers new resolution
-      useAppStore.setState({
+      appStore.setState({
         state: {
           ...defaultAppState,
           data: {
@@ -419,7 +422,7 @@ describe("permissions-store", () => {
   describe("integration with useAppStore subscriptions", () => {
     it("auto-resolves when appStore config changes", async () => {
       let resolveCalled = false;
-      useAppStore.setState({
+      appStore.setState({
         config: {
           components: {
             MyComponent: {
@@ -441,11 +444,13 @@ describe("permissions-store", () => {
         },
       });
 
-      renderHook(() => useRegisterPermissionsStore({ fromGlobal: true }));
+      renderHook(() =>
+        useRegisterPermissionsSlice(appStore, { fromGlobal: true })
+      );
 
       // config is already set before hooking, so do a manual "change" to trigger subscription
       await act(async () => {
-        useAppStore.setState({
+        appStore.setState({
           config: {
             components: {
               MyComponent: {
diff --git a/packages/core/stores/field-store.ts b/packages/core/store/slices/fields.ts
similarity index 51%
rename from packages/core/stores/field-store.ts
rename to packages/core/store/slices/fields.ts
index 2c9f9be5f5..d119aeaf69 100644
--- a/packages/core/stores/field-store.ts
+++ b/packages/core/store/slices/fields.ts
@@ -1,37 +1,42 @@
-import { ComponentData } from "../types";
-import type { Fields as FieldsType } from "../types";
-import { getAppStore, useAppStore } from "../stores/app-store";
+import { ComponentData } from "../../types";
+import type { Fields } from "../../types";
+import { AppStore, useAppStoreApi } from "../";
 import { useCallback, useEffect } from "react";
-import { getChanged } from "../lib/get-changed";
-import { useNodeStore } from "../stores/node-store";
-import { create } from "zustand";
+import { getChanged } from "../../lib/get-changed";
 
 type ComponentOrRootData = Omit<ComponentData<any>, "type">;
 
-export const useFieldStore = create<{
-  fields: FieldsType | Partial<FieldsType>;
+export type FieldsSlice = {
+  fields: Fields | Partial<Fields>;
   loading: boolean;
   lastResolvedData: Partial<ComponentOrRootData>;
-}>(() => ({
-  fields: {},
-  loading: false,
-  lastResolvedData: {},
-}));
+};
 
-export const useRegisterFieldStore = () => {
-  const id = useAppStore((s) => s.selectedItem?.props.id as string | undefined);
+export const createFieldsStore = (
+  _set: (newState: Partial<AppStore>) => void,
+  _get: () => AppStore
+): FieldsSlice => {
+  return {
+    fields: {},
+    loading: false,
+    lastResolvedData: {},
+  };
+};
 
+export const useRegisterFieldsSlice = (
+  appStore: ReturnType<typeof useAppStoreApi>,
+  id?: string
+) => {
   const resolveFields = useCallback(
     async (reset?: boolean) => {
-      const { fields, lastResolvedData } = useFieldStore.getState();
-
-      const nodeStore = useNodeStore.getState();
+      const { fields, lastResolvedData } = appStore.getState().fields;
+      const nodeStore = appStore.getState().nodes;
       const node = nodeStore.nodes[id || "root"];
       const componentData = node?.data;
       const parentNode = node?.parentId ? nodeStore.nodes[node.parentId] : null;
       const parent = parentNode?.data || null;
 
-      const { getComponentConfig, state } = getAppStore();
+      const { getComponentConfig, state } = appStore.getState();
 
       const componentConfig = getComponentConfig(componentData?.type);
 
@@ -39,17 +44,21 @@ export const useRegisterFieldStore = () => {
 
       const defaultFields = componentConfig.fields || {};
       const resolver = componentConfig.resolveFields;
-      let lastFields: FieldsType | null = fields as FieldsType;
+      let lastFields: Fields | null = fields as Fields;
 
       if (reset) {
-        useFieldStore.setState({ fields: defaultFields });
+        appStore.setState((s) => ({
+          fields: { ...s.fields, fields: defaultFields },
+        }));
 
         lastFields = defaultFields;
       }
 
       if (resolver) {
         const timeout = setTimeout(() => {
-          useFieldStore.setState({ loading: true });
+          appStore.setState((s) => ({
+            fields: { ...s.fields, loading: true },
+          }));
         }, 50);
 
         const lastData =
@@ -69,17 +78,21 @@ export const useRegisterFieldStore = () => {
         clearTimeout(timeout);
 
         // Abort if item has changed during resolution (happens with history)
-        if (getAppStore().selectedItem?.props.id !== id) {
+        if (appStore.getState().selectedItem?.props.id !== id) {
           return;
         }
 
-        useFieldStore.setState({
-          fields: newFields,
-          loading: false,
-          lastResolvedData: componentData,
+        appStore.setState({
+          fields: {
+            fields: newFields,
+            loading: false,
+            lastResolvedData: componentData,
+          },
         });
       } else {
-        useFieldStore.setState({ fields: defaultFields });
+        appStore.setState((s) => ({
+          fields: { ...s.fields, fields: defaultFields },
+        }));
       }
     },
     [id]
@@ -88,11 +101,9 @@ export const useRegisterFieldStore = () => {
   useEffect(() => {
     resolveFields(true);
 
-    return useNodeStore.subscribe(
-      (s) => s.nodes[id || "root"],
-      () => {
-        resolveFields();
-      }
+    return appStore.subscribe(
+      (s) => s.nodes.nodes[id || "root"],
+      () => resolveFields()
     );
   }, [id]);
 };
diff --git a/packages/core/store/slices/history.ts b/packages/core/store/slices/history.ts
new file mode 100644
index 0000000000..bbf7818928
--- /dev/null
+++ b/packages/core/store/slices/history.ts
@@ -0,0 +1,192 @@
+import { AppState, History } from "../../types";
+import { generateId } from "../../lib/generate-id";
+import { AppStore, useAppStoreApi } from "../";
+import { useEffect } from "react";
+import { useHotkey } from "../../lib/use-hotkey";
+
+export type HistorySlice<D = any> = {
+  index: number;
+  hasPast: () => boolean;
+  hasFuture: () => boolean;
+  histories: History<D>[];
+  record: (data: D) => void;
+  back: VoidFunction;
+  forward: VoidFunction;
+  currentHistory: () => History;
+  nextHistory: () => History<D> | null;
+  prevHistory: () => History<D> | null;
+  setHistories: (histories: History[]) => void;
+  setHistoryIndex: (index: number) => void;
+  initialAppState: D;
+};
+
+const EMPTY_HISTORY_INDEX = 0;
+
+function debounce(func: Function, timeout = 300) {
+  let timer: NodeJS.Timeout;
+
+  return (...args: any) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, timeout);
+  };
+}
+
+export type PuckHistory = {
+  back: VoidFunction;
+  forward: VoidFunction;
+  setHistories: (histories: History[]) => void;
+  setHistoryIndex: (index: number) => void;
+  HistorySlice: HistorySlice;
+};
+
+// Tidy the state before going back or forward
+const tidyState = (state: AppState): AppState => {
+  return {
+    ...state,
+    ui: {
+      ...state.ui,
+      field: {
+        focus: null,
+      },
+    },
+  };
+};
+
+export const createHistorySlice = (
+  set: (newState: Partial<AppStore>) => void,
+  get: () => AppStore
+): HistorySlice => {
+  const record = debounce((state: AppState) => {
+    const { histories, index } = get().history;
+
+    const history: History = {
+      state,
+      id: generateId("history"),
+    };
+
+    // Don't use setHistories due to callback
+    const newHistories = [...histories.slice(0, index + 1), history];
+
+    set({
+      history: {
+        ...get().history,
+        histories: newHistories,
+        index: newHistories.length - 1,
+      },
+    });
+  }, 250);
+
+  return {
+    initialAppState: {} as AppState,
+    index: EMPTY_HISTORY_INDEX,
+    histories: [],
+    hasPast: () => get().history.index > EMPTY_HISTORY_INDEX,
+    hasFuture: () => get().history.index < get().history.histories.length - 1,
+    prevHistory: () => {
+      const { history } = get();
+
+      return history.hasPast() ? history.histories[history.index - 1] : null;
+    },
+    nextHistory: () => {
+      const s = get().history;
+
+      return s.hasFuture() ? s.histories[s.index + 1] : null;
+    },
+    currentHistory: () => get().history.histories[get().history.index],
+    back: () => {
+      const { history, dispatch } = get();
+
+      if (history.hasPast()) {
+        const state = tidyState(
+          history.prevHistory()?.state || history.initialAppState
+        );
+
+        dispatch({
+          type: "set",
+          state,
+        });
+
+        set({ history: { ...history, index: history.index - 1 } });
+      }
+    },
+    forward: () => {
+      const { history, dispatch } = get();
+
+      if (history.hasFuture()) {
+        const state = history.nextHistory()?.state;
+
+        dispatch({ type: "set", state: state ? tidyState(state) : {} });
+
+        set({ history: { ...history, index: history.index + 1 } });
+      }
+    },
+    setHistories: (histories: History[]) => {
+      const { dispatch, history } = get();
+
+      dispatch({
+        type: "set",
+        state:
+          history.histories[history.histories.length - 1]?.state ||
+          history.initialAppState,
+      });
+
+      set({ history: { ...history, histories, index: histories.length - 1 } });
+    },
+    setHistoryIndex: (index: number) => {
+      const { dispatch, history } = get();
+
+      dispatch({
+        type: "set",
+        state:
+          history.histories[history.index]?.state || history.initialAppState,
+      });
+
+      set({ history: { ...history, index } });
+    },
+    record,
+  };
+};
+
+export function useRegisterHistorySlice(
+  appStore: ReturnType<typeof useAppStoreApi>,
+  {
+    histories,
+    index,
+    initialAppState,
+  }: {
+    histories: History<any>[];
+    index: number;
+    initialAppState: AppState;
+  }
+) {
+  useEffect(
+    () =>
+      appStore.setState({
+        history: {
+          ...appStore.getState().history,
+          histories,
+          index,
+          initialAppState,
+        },
+      }),
+    [histories, index, initialAppState]
+  );
+
+  const back = () => {
+    appStore.getState().history.back();
+  };
+
+  const forward = () => {
+    appStore.getState().history.forward();
+  };
+
+  useHotkey({ meta: true, z: true }, back);
+  useHotkey({ meta: true, shift: true, z: true }, forward);
+  useHotkey({ meta: true, y: true }, forward);
+
+  useHotkey({ ctrl: true, z: true }, back);
+  useHotkey({ ctrl: true, shift: true, z: true }, forward);
+  useHotkey({ ctrl: true, y: true }, forward);
+}
diff --git a/packages/core/stores/node-store.ts b/packages/core/store/slices/nodes.ts
similarity index 57%
rename from packages/core/stores/node-store.ts
rename to packages/core/store/slices/nodes.ts
index 72e5b8eb34..0036996cef 100644
--- a/packages/core/stores/node-store.ts
+++ b/packages/core/store/slices/nodes.ts
@@ -1,14 +1,13 @@
-import { create } from "zustand";
-import { ComponentData, Data } from "../types";
+import { StoreApi } from "zustand";
+import { ComponentData, Data } from "../../types";
 import deepEqual from "fast-deep-equal";
-import { subscribeWithSelector } from "zustand/middleware";
 import { useEffect } from "react";
-import { useAppStore } from "../stores/app-store";
+import { AppStore, useAppStoreApi } from "../";
 import {
   rootAreaId,
   rootDroppableId,
   rootZone,
-} from "../lib/root-droppable-id";
+} from "../../lib/root-droppable-id";
 
 const partialDeepEqual = (
   newItem: Record<string, any>,
@@ -37,7 +36,10 @@ type PuckNode = {
   element: HTMLElement | null;
 };
 
-export const generateNodeStore = (data: Data) => {
+export const generateNodesSlice = (
+  data: Data,
+  appStore: StoreApi<AppStore>
+) => {
   const nodeIndex: Record<
     string,
     {
@@ -74,9 +76,9 @@ export const generateNodeStore = (data: Data) => {
     nodeIndex[data.props.id] = { data, parentId, zone, path: [], index };
   });
 
-  const nodeStore = useNodeStore.getState();
+  const nodes = appStore.getState().nodes;
 
-  const registerNode = nodeStore.registerNode;
+  const registerNode = nodes.registerNode;
 
   Object.keys(nodeIndex).forEach((componentId) => {
     const details = nodeIndex[componentId];
@@ -104,82 +106,89 @@ export const generateNodeStore = (data: Data) => {
   });
 
   // Remove old nodes
-  Object.keys(nodeStore.nodes).forEach((key) => {
+  Object.keys(nodes.nodes).forEach((key) => {
     if (!nodeIndex[key] && key !== "root") {
-      nodeStore.unregisterNode(key);
+      nodes.unregisterNode(key);
     }
   });
 };
 
-type NodeStore = {
+export type NodesSlice = {
   nodes: Record<string, PuckNode | undefined>;
   registerNode: (id: string, node: Partial<PuckNode>) => void;
   unregisterNode: (id: string, node?: Partial<PuckNode>) => void;
 };
 
-export const useNodeStore = create<NodeStore>()(
-  subscribeWithSelector((set) => ({
-    nodes: {},
-    registerNode: (id: string, node: Partial<PuckNode>) => {
-      set((s) => {
-        // Only update node if it changes
-        if (s.nodes[id] && partialDeepEqual(node, s.nodes[id])) {
-          return s;
-        }
-
-        const emptyNode: PuckNode = {
-          id,
-          methods: { sync: () => null },
-          data: { props: { id }, type: "unknown" },
-          parentId: "",
-          zone: "",
-          path: [],
-          element: null,
-          index: -1,
-        };
-
-        const existingNode: PuckNode | undefined = s.nodes[id];
-
-        return {
-          ...s,
-          nodes: {
-            ...s.nodes,
-            [id]: {
-              ...emptyNode,
-              ...existingNode,
-              ...node,
-              id,
-            },
-          },
-        };
-      });
-    },
-    unregisterNode: (id: string) => {
-      set((s) => {
-        const existingNode: PuckNode | undefined = s.nodes[id];
+export const createNodesSlice = (
+  set: (newState: Partial<AppStore>) => void,
+  get: () => AppStore
+): NodesSlice => ({
+  nodes: {},
+  registerNode: (id: string, node: Partial<PuckNode>) => {
+    const s = get().nodes;
+
+    // Only update node if it changes
+    if (s.nodes[id] && partialDeepEqual(node, s.nodes[id])) {
+      return;
+    }
 
-        if (existingNode) {
-          const newNodes = { ...s.nodes };
+    const emptyNode: PuckNode = {
+      id,
+      methods: { sync: () => null },
+      data: { props: { id }, type: "unknown" },
+      parentId: "",
+      zone: "",
+      path: [],
+      element: null,
+      index: -1,
+    };
+
+    const existingNode: PuckNode | undefined = s.nodes[id];
+
+    set({
+      nodes: {
+        ...s,
+        nodes: {
+          ...s.nodes,
+          [id]: {
+            ...emptyNode,
+            ...existingNode,
+            ...node,
+            id,
+          },
+        },
+      },
+    });
+  },
+  unregisterNode: (id) => {
+    const s = get().nodes;
+    const existingNode: PuckNode | undefined = s.nodes[id];
 
-          delete newNodes[id];
+    if (existingNode) {
+      const newNodes = { ...s.nodes };
 
-          return {
-            ...s,
-            nodes: newNodes,
-          };
-        }
+      delete newNodes[id];
 
-        return s;
+      set({
+        nodes: {
+          ...s,
+          nodes: newNodes,
+        },
       });
-    },
-  }))
-);
+    }
+  },
+});
 
 /**
  * Reindex the entire tree whenever the state changes
  */
-export const useRegisterNodeStore = () => {
+export const useRegisterNodesSlice = (
+  appStore: ReturnType<typeof useAppStoreApi>
+) => {
   useEffect(() => {
-    return useAppStore.subscribe((s) => s.state.data, generateNodeStore);
+    return appStore.subscribe(
+      (s) => s.state.data,
+      (data) => generateNodesSlice(data, appStore)
+    );
   }, []);
 };
diff --git a/packages/core/stores/permissions-store.ts b/packages/core/store/slices/permissions.ts
similarity index 73%
rename from packages/core/stores/permissions-store.ts
rename to packages/core/store/slices/permissions.ts
index 8c5ae57838..3c0609addf 100644
--- a/packages/core/stores/permissions-store.ts
+++ b/packages/core/store/slices/permissions.ts
@@ -1,9 +1,8 @@
 import { useEffect } from "react";
-import { flattenData } from "../lib/flatten-data";
-import { ComponentData, Config, Permissions, UserGenerics } from "../types";
-import { getChanged } from "../lib/get-changed";
-import { create } from "zustand";
-import { getAppStore, useAppStore } from "../stores/app-store";
+import { flattenData } from "../../lib/flatten-data";
+import { ComponentData, Config, Permissions, UserGenerics } from "../../types";
+import { getChanged } from "../../lib/get-changed";
+import { AppStore, useAppStoreApi } from "../";
 
 type PermissionsArgs<
   UserConfig extends Config = Config,
@@ -36,13 +35,18 @@ type Cache = Record<
   }
 >;
 
-export const usePermissionsStore = create<{
+export type PermissionsSlice = {
   cache: Cache;
   globalPermissions: Permissions;
   resolvedPermissions: Record<string, Partial<Permissions> | undefined>;
   getPermissions: GetPermissions<Config>;
   resolvePermissions: ResolvePermissions<Config>;
-}>((set, get) => ({
+};
+
+export const createPermissionsSlice = (
+  set: (newState: Partial<AppStore>) => void,
+  get: () => AppStore
+): PermissionsSlice => ({
   cache: {},
   globalPermissions: {
     drag: true,
@@ -53,8 +57,8 @@ export const usePermissionsStore = create<{
   },
   resolvedPermissions: {},
   getPermissions: ({ item, type, root } = {}) => {
-    const { config } = getAppStore();
-    const { globalPermissions, resolvedPermissions } = get();
+    const { config, permissions } = get();
+    const { globalPermissions, resolvedPermissions } = permissions;
 
     if (item) {
       const componentConfig = config.components[item.type];
@@ -98,8 +102,8 @@ export const usePermissionsStore = create<{
     return globalPermissions;
   },
   resolvePermissions: async (params = {}, force) => {
-    const { cache, globalPermissions } = get();
-    const { state } = getAppStore<Config>();
+    const { state, permissions } = get();
+    const { cache, globalPermissions } = permissions;
 
     const resolveDataForItem = async (
       item: ComponentData,
@@ -110,7 +114,7 @@ export const usePermissionsStore = create<{
         state: appState,
         setComponentLoading,
         unsetComponentLoading,
-      } = getAppStore<Config>();
+      } = get();
       const componentConfig =
         item.type === "root" ? config.root : config.components[item.type];
 
@@ -140,19 +144,22 @@ export const usePermissionsStore = create<{
             }
           );
 
-          const latest = get();
+          const latest = get().permissions;
 
           set({
-            cache: {
-              ...latest.cache,
-              [item.props.id]: {
-                lastData: item,
-                lastPermissions: resolvedPermissions,
+            permissions: {
+              ...latest,
+              cache: {
+                ...latest.cache,
+                [item.props.id]: {
+                  lastData: item,
+                  lastPermissions: resolvedPermissions,
+                },
+              },
+              resolvedPermissions: {
+                ...latest.resolvedPermissions,
+                [item.props.id]: resolvedPermissions,
               },
-            },
-            resolvedPermissions: {
-              ...latest.resolvedPermissions,
-              [item.props.id]: resolvedPermissions,
             },
           });
 
@@ -162,7 +169,7 @@ export const usePermissionsStore = create<{
     };
 
     const resolveDataForRoot = (force = false) => {
-      const { state: appState } = getAppStore();
+      const { state: appState } = get();
 
       resolveDataForItem(
         // Shim the root data in by conforming to component data shape
@@ -197,38 +204,42 @@ export const usePermissionsStore = create<{
       });
     }
   },
-}));
+});
 
-export const useRegisterPermissionsStore = (
+export const useRegisterPermissionsSlice = (
+  appStore: ReturnType<typeof useAppStoreApi>,
   globalPermissions: Partial<Permissions>
 ) => {
   useEffect(() => {
-    const { globalPermissions: existingGlobalPermissions } =
-      usePermissionsStore.getState();
-    usePermissionsStore.setState({
-      globalPermissions: {
-        ...existingGlobalPermissions,
-        ...globalPermissions,
-      } as Permissions,
+    const { permissions } = appStore.getState();
+    const { globalPermissions: existingGlobalPermissions } = permissions;
+    appStore.setState({
+      permissions: {
+        ...permissions,
+        globalPermissions: {
+          ...existingGlobalPermissions,
+          ...globalPermissions,
+        } as Permissions,
+      },
     });
 
-    usePermissionsStore.getState().resolvePermissions();
+    permissions.resolvePermissions();
   }, [globalPermissions]);
 
   useEffect(() => {
-    return useAppStore.subscribe(
+    return appStore.subscribe(
       (s) => s.state.data,
       () => {
-        usePermissionsStore.getState().resolvePermissions();
+        appStore.getState().permissions.resolvePermissions();
       }
     );
   }, []);
 
   useEffect(() => {
-    return useAppStore.subscribe(
+    return appStore.subscribe(
       (s) => s.config,
       () => {
-        usePermissionsStore.getState().resolvePermissions();
+        appStore.getState().permissions.resolvePermissions();
       }
     );
   }, []);
diff --git a/packages/core/stores/app-store.ts b/packages/core/stores/app-store.ts
deleted file mode 100644
index 92c86e85b6..0000000000
--- a/packages/core/stores/app-store.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import {
-  Config,
-  IframeConfig,
-  Overrides,
-  AppState,
-  UiState,
-  Plugin,
-  UserGenerics,
-  Field,
-  ComponentConfig,
-  Metadata,
-} from "../types";
-import { createReducer, PuckAction } from "../reducer";
-import { getItem } from "../lib/get-item";
-import { defaultViewports } from "../components/ViewportControls/default-viewports";
-import { Viewports } from "../types";
-import { create } from "zustand";
-import { subscribeWithSelector } from "zustand/middleware";
-import { resolveData } from "../lib/resolve-data";
-import { useHistoryStore } from "./history-store";
-
-export const defaultAppState: AppState = {
-  data: { content: [], root: {}, zones: {} },
-  ui: {
-    leftSideBarVisible: true,
-    rightSideBarVisible: true,
-    arrayState: {},
-    itemSelector: null,
-    componentList: {},
-    isDragging: false,
-    previewMode: "edit",
-    viewports: {
-      current: {
-        width: defaultViewports[0].width,
-        height: defaultViewports[0].height || "auto",
-      },
-      options: [],
-      controlsVisible: true,
-    },
-    field: { focus: null },
-  },
-};
-
-export type Status = "LOADING" | "MOUNTED" | "READY";
-
-type ZoomConfig = {
-  autoZoom: number;
-  rootHeight: number;
-  zoom: number;
-};
-
-type ComponentState = Record<string, { loadingCount: number }>;
-
-export type AppStore<
-  UserConfig extends Config = Config,
-  G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
-> = {
-  state: G["UserAppState"];
-  dispatch: (action: PuckAction) => void;
-  config: UserConfig;
-  componentState: ComponentState;
-  setComponentState: (componentState: ComponentState) => void;
-  setComponentLoading: (id: string) => void;
-  unsetComponentLoading: (id: string) => void;
-  resolveDataRuns: number;
-  resolveData: (newAppState: AppState) => void;
-  plugins: Plugin[];
-  overrides: Partial<Overrides>;
-  viewports: Viewports;
-  zoomConfig: ZoomConfig;
-  setZoomConfig: (zoomConfig: ZoomConfig) => void;
-  status: Status;
-  setStatus: (status: Status) => void;
-  iframe: IframeConfig;
-  selectedItem?: G["UserData"]["content"][0] | null;
-  setUi: (ui: Partial<UiState>, recordHistory?: boolean) => void;
-  getComponentConfig: (type?: string) => ComponentConfig | null | undefined;
-  metadata: Metadata;
-};
-
-export const defaultAppStore: AppStore = {
-  state: defaultAppState,
-  dispatch: () => null,
-  config: { components: {} },
-  componentState: {},
-  setComponentState: () => {},
-  setComponentLoading: () => {},
-  unsetComponentLoading: () => {},
-  resolveDataRuns: 0,
-  resolveData: () => {},
-  plugins: [],
-  overrides: {},
-  viewports: defaultViewports,
-  zoomConfig: {
-    autoZoom: 1,
-    rootHeight: 0,
-    zoom: 1,
-  },
-  setZoomConfig: () => null,
-  status: "LOADING",
-  setStatus: () => null,
-  iframe: {},
-  setUi: () => null,
-  getComponentConfig: () => null,
-  metadata: {},
-};
-
-const defaultPageFields: Record<string, Field> = {
-  title: { type: "text" },
-};
-
-export const useAppStore = create<AppStore>()(
-  subscribeWithSelector((set, get) => ({
-    ...defaultAppStore,
-    getComponentConfig: (type?: string) => {
-      const { config, selectedItem } = get();
-      const rootFields = config.root?.fields || defaultPageFields;
-
-      return type && type !== "root"
-        ? config.components[type]
-        : selectedItem
-        ? config.components[selectedItem.type]
-        : ({ ...config.root, fields: rootFields } as ComponentConfig);
-    },
-    dispatch: (action: PuckAction) =>
-      set((s) => {
-        const { record } = useHistoryStore.getState();
-
-        const dispatch = createReducer({ config: s.config, record });
-
-        const state = dispatch(s.state, action);
-
-        const selectedItem = state.ui.itemSelector
-          ? getItem(state.ui.itemSelector, state.data)
-          : null;
-
-        return { ...s, state, selectedItem };
-      }),
-    setZoomConfig: (zoomConfig) => set({ zoomConfig }),
-    setStatus: (status) => set({ status }),
-    setComponentState: (componentState) => set({ componentState }),
-    setComponentLoading: (id: string) => {
-      const { setComponentState, componentState } = get();
-
-      setComponentState({
-        ...componentState,
-        [id]: {
-          ...componentState[id],
-          loadingCount: (componentState[id]?.loadingCount || 0) + 1,
-        },
-      });
-    },
-    unsetComponentLoading: (id: string) => {
-      const { setComponentState, componentState } = get();
-
-      setComponentState({
-        ...componentState,
-        [id]: {
-          ...componentState[id],
-          loadingCount: Math.max(
-            (componentState[id]?.loadingCount || 0) - 1,
-            0
-          ),
-        },
-      });
-    },
-    // Helper
-    setUi: (ui: Partial<UiState>, recordHistory?: boolean) =>
-      set((s) => {
-        const dispatch = createReducer({ config: s.config, record: () => {} });
-
-        const state = dispatch(s.state, {
-          type: "setUi",
-          ui,
-          recordHistory,
-        });
-
-        const selectedItem = state.ui.itemSelector
-          ? getItem(state.ui.itemSelector, state.data)
-          : null;
-
-        return { ...s, state, selectedItem };
-      }),
-    resolveDataRuns: 0,
-    resolveData: (newAppState) =>
-      set((s) => {
-        resolveData(newAppState);
-
-        return { ...s, resolveDataRuns: s.resolveDataRuns + 1 };
-      }),
-  }))
-);
-
-export function getAppStore<UserConfig extends Config = Config>() {
-  return useAppStore.getState() as unknown as AppStore<UserConfig>;
-}
diff --git a/packages/core/stores/history-store.ts b/packages/core/stores/history-store.ts
deleted file mode 100644
index 2da673b825..0000000000
--- a/packages/core/stores/history-store.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { AppState, History } from "../types";
-import { generateId } from "../lib/generate-id";
-import { create } from "zustand";
-import { getAppStore } from "./app-store";
-import { useEffect } from "react";
-import { useHotkey } from "../lib/use-hotkey";
-
-export type HistoryStore<D = any> = {
-  index: number;
-  hasPast: () => boolean;
-  hasFuture: () => boolean;
-  histories: History<D>[];
-  record: (data: D) => void;
-  back: VoidFunction;
-  forward: VoidFunction;
-  currentHistory: () => History;
-  nextHistory: () => History<D> | null;
-  prevHistory: () => History<D> | null;
-  setHistories: (histories: History[]) => void;
-  setHistoryIndex: (index: number) => void;
-  initialAppState: D;
-};
-
-const EMPTY_HISTORY_INDEX = 0;
-
-function debounce(func: Function, timeout = 300) {
-  let timer: NodeJS.Timeout;
-
-  return (...args: any) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func(...args);
-    }, timeout);
-  };
-}
-
-export type PuckHistory = {
-  back: VoidFunction;
-  forward: VoidFunction;
-  setHistories: (histories: History[]) => void;
-  setHistoryIndex: (index: number) => void;
-  historyStore: HistoryStore;
-};
-
-const record = debounce((state: AppState) => {
-  const { histories, index } = useHistoryStore.getState();
-
-  const history: History = {
-    state,
-    id: generateId("history"),
-  };
-
-  // Don't use setHistories due to callback
-  const newHistories = [...histories.slice(0, index + 1), history];
-
-  useHistoryStore.setState({
-    histories: newHistories,
-    index: newHistories.length - 1,
-  });
-}, 250);
-
-// Tidy the state before going back or forward
-const tidyState = (state: AppState): AppState => {
-  return {
-    ...state,
-    ui: {
-      ...state.ui,
-      field: {
-        focus: null,
-      },
-    },
-  };
-};
-
-export const useHistoryStore = create<HistoryStore<AppState>>((set, get) => ({
-  initialAppState: {} as AppState,
-  index: EMPTY_HISTORY_INDEX,
-  histories: [],
-  hasPast: () => get().index > EMPTY_HISTORY_INDEX,
-  hasFuture: () => get().index < get().histories.length - 1,
-  prevHistory: () => {
-    const s = get();
-
-    return s.hasPast() ? s.histories[s.index - 1] : null;
-  },
-  nextHistory: () => {
-    const s = get();
-
-    return s.hasFuture() ? s.histories[s.index + 1] : null;
-  },
-  currentHistory: () => get().histories[get().index],
-  back: () => {
-    const store = get();
-
-    if (store.hasPast()) {
-      const { dispatch } = getAppStore();
-
-      const state = tidyState(
-        store.prevHistory()?.state || store.initialAppState
-      );
-
-      dispatch({
-        type: "set",
-        state,
-      });
-
-      set((s) => ({ index: s.index - 1 }));
-    }
-  },
-  forward: () => {
-    const store = get();
-
-    if (store.hasFuture()) {
-      const { dispatch } = getAppStore();
-
-      const state = store.nextHistory()?.state;
-
-      dispatch({ type: "set", state: state ? tidyState(state) : {} });
-
-      set((s) => ({ index: s.index + 1 }));
-    }
-  },
-  setHistories: (histories: History[]) => {
-    const store = get();
-    const { dispatch } = getAppStore();
-
-    dispatch({
-      type: "set",
-      state:
-        store.histories[store.histories.length - 1]?.state ||
-        store.initialAppState,
-    });
-
-    set({ histories, index: histories.length - 1 });
-  },
-  setHistoryIndex: (index) => {
-    const store = get();
-    const { dispatch } = getAppStore();
-
-    dispatch({
-      type: "set",
-      state: store.histories[store.index]?.state || store.initialAppState,
-    });
-
-    set({ index });
-  },
-  record,
-}));
-
-export function useRegisterHistoryStore({
-  histories,
-  index,
-  initialAppState,
-}: {
-  histories: History<any>[];
-  index: number;
-  initialAppState: AppState;
-}) {
-  useEffect(
-    () =>
-      useHistoryStore.setState({
-        histories,
-        index,
-        initialAppState,
-      }),
-    [histories, index, initialAppState]
-  );
-
-  const back = () => {
-    useHistoryStore.getState().back();
-  };
-
-  const forward = () => {
-    useHistoryStore.getState().forward();
-  };
-
-  useHotkey({ meta: true, z: true }, back);
-  useHotkey({ meta: true, shift: true, z: true }, forward);
-  useHotkey({ meta: true, y: true }, forward);
-
-  useHotkey({ ctrl: true, z: true }, back);
-  useHotkey({ ctrl: true, shift: true, z: true }, forward);
-  useHotkey({ ctrl: true, y: true }, forward);
-}