refactor: rename sub-stores to slices

packages/core/components/AutoField/fields/ArrayField/index.tsx

@@ -7,7 +7,7 @@ import { reorder, replace } from "../../../../lib";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types";
-import { useAppStore, useAppStoreApi } from "../../../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../../../store";
 import { Sortable, SortableProvider } from "../../../Sortable";
 import { NestedFieldProvider, useNestedFieldContext } from "../../context";
 

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";
 

packages/core/components/ComponentList/index.tsx

@@ -1,7 +1,7 @@
 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";
 

packages/core/components/DragDropContext/index.tsx

@@ -1,5 +1,5 @@
 import { DragDropProvider } from "@dnd-kit/react";
-import { useAppStore, useAppStoreApi } from "../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../store";
 import {
   createContext,
   Dispatch,

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, useAppStoreApi } from "../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../store";
 import { Loader } from "../Loader";
 import { ActionBar } from "../ActionBar";
 

packages/core/components/DropZone/context.tsx

@@ -8,7 +8,7 @@ import {
 } 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 }>;

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";
 

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[],

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";

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 { useAppStoreApi } from "../../../stores/app-store";
+import { useAppStoreApi } from "../../../store";
 
 export const useMinEmptyHeight = ({
   zoneCompound,

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 { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 
 const getClassName = getClassNameFactory("LayerTree", styles);
 const getClassNameLayer = getClassNameFactory("Layer", styles);

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 { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 
 const getClassName = getClassNameFactory("MenuBar", styles);
 

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";

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";
 

packages/core/components/Puck/components/Fields/index.tsx

@@ -8,17 +8,13 @@ import {
 } from "../../../../reducer";
 import { UiState } from "../../../../types";
 import { AutoFieldPrivate } from "../../../AutoField";
-import {
-  AppStore,
-  useAppStore,
-  useAppStoreApi,
-} 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 } from "../../../../stores/field-store";
+import { useRegisterFieldsSlice } from "../../../../store/slices/fields";
 import { useShallow } from "zustand/react/shallow";
 import { StoreApi } from "zustand";
 
@@ -191,7 +187,7 @@ export const Fields = ({ wrapFields = true }: { wrapFields?: boolean }) => {
   const itemSelector = useAppStore(useShallow((s) => s.state.ui.itemSelector));
   const id = useAppStore((s) => s.selectedItem?.props.id);
   const appStore = useAppStoreApi();
-  useRegisterFieldStore(appStore, id);
+  useRegisterFieldsSlice(appStore, id);
 
   const fieldsLoading = useAppStore((s) => s.fields.loading);
   const fieldNames = useAppStore(

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 { useAppStore, useAppStoreApi } from "../../../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../../../store";
 import { dropZoneContext } from "../../../DropZone";
 import { useCallback, useMemo } from "react";
 import { ItemSelector } from "../../../../lib/get-item";

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";

packages/core/components/Puck/index.tsx

@@ -43,14 +43,13 @@ import {
   useAppStore,
   useAppStoreApi,
   appStoreContext,
-} from "../../stores/app-store";
+} 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";
@@ -59,8 +58,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";
 
@@ -265,7 +265,7 @@ function PuckProvider<
     _initialHistory?.index || blendedHistories.length - 1;
   const initialAppState = blendedHistories[initialHistoryIndex].state;
 
-  useRegisterHistoryStore(appStore, {
+  useRegisterHistorySlice(appStore, {
     histories: blendedHistories,
     index: initialHistoryIndex,
     initialAppState,
@@ -294,8 +294,8 @@ function PuckProvider<
     });
   }, []);
 
-  useRegisterNodeStore(appStore);
-  useRegisterPermissionsStore(appStore, permissions);
+  useRegisterNodesSlice(appStore);
+  useRegisterPermissionsSlice(appStore, permissions);
 
   useEffect(() => {
     const { state, resolveData } = appStore.getState();

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);

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";
 

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";
 

packages/core/lib/__tests__/resolve-data.spec.tsx

@@ -1,5 +1,5 @@
 import { resolveData } from "../resolve-data";
-import { createAppStore, defaultAppStore } from "../../stores/app-store";
+import { createAppStore, defaultAppStore } from "../../store";
 import { Config, AppState, Data } from "../../types";
 import { waitFor } from "@testing-library/react";
 

packages/core/lib/__tests__/use-breadcrumbs.spec.tsx

@@ -1,8 +1,8 @@
 import { renderHook, render } from "@testing-library/react";
 import { useBreadcrumbs } from "../use-breadcrumbs";
-import { createAppStore, appStoreContext } from "../../stores/app-store";
+import { createAppStore, appStoreContext } from "../../store";
 import { ComponentData, Config } from "../../types";
-import { useRegisterNodeStore } from "../../stores/node-store";
+import { useRegisterNodesSlice } from "../../store/slices/nodes";
 import { PropsWithChildren } from "react";
 
 const appStore = createAppStore();
@@ -56,7 +56,7 @@ describe("useBreadcrumbs", () => {
       props: { id: "item-2" },
     };
 
-    renderHook(() => useRegisterNodeStore(appStore));
+    renderHook(() => useRegisterNodesSlice(appStore));
 
     appStore.setState({
       config,
@@ -116,7 +116,7 @@ describe("useBreadcrumbs", () => {
       props: { id: "item-2" },
     };
 
-    renderHook(() => useRegisterNodeStore(appStore));
+    renderHook(() => useRegisterNodesSlice(appStore));
 
     appStore.setState({
       config,
@@ -174,7 +174,7 @@ describe("useBreadcrumbs", () => {
       props: { id: "item-2" },
     };
 
-    renderHook(() => useRegisterNodeStore(appStore));
+    renderHook(() => useRegisterNodesSlice(appStore));
 
     appStore.setState({
       config,

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";

packages/core/lib/resolve-data.ts

@@ -3,9 +3,8 @@ import { resolveComponentData } from "./resolve-component-data";
 import { applyDynamicProps } from "./apply-dynamic-props";
 import { resolveRootData } from "./resolve-root-data";
 import { flattenData } from "./flatten-data";
-import { AppStore } from "../stores/app-store";
+import { AppStore } from "../store";
 import fdeq from "fast-deep-equal";
-import { StoreApi } from "zustand";
 
 export const resolveData = (newAppState: AppState, appStoreData: AppStore) => {
   const {

packages/core/lib/use-breadcrumbs.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useAppStore, useAppStoreApi } from "../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../store";
 import { ItemSelector } from "./get-item";
 
 export type Breadcrumb = {

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[]>();

packages/core/lib/use-parent.ts

@@ -1,4 +1,4 @@
-import { useAppStore, useAppStoreApi } from "../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../store";
 
 export const useParent = () => {
   const appStore = useAppStoreApi();

packages/core/lib/use-preview-mode-hotkeys.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { useHotkey } from "./use-hotkey";
-import { useAppStoreApi } from "../stores/app-store";
+import { useAppStoreApi } from "../store";
 
 export const usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();

packages/core/lib/use-puck.ts

@@ -1,15 +1,8 @@
 import { useShallow } from "zustand/react/shallow";
-import {
-  defaultAppStore,
-  useAppStore,
-  useAppStoreApi,
-} from "../stores/app-store";
+import { defaultAppStore, useAppStore, useAppStoreApi } from "../store";
 import { Config, UserGenerics } from "../types";
 import { useCallback } from "react";
-import {
-  GetPermissions,
-  RefreshPermissions,
-} from "../stores/permissions-store";
+import { GetPermissions, RefreshPermissions } from "../store/permissions-store";
 
 export const usePuck = <
   UserConfig extends Config = Config,

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");
 

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,