diff --git a/editor/app/(tools)/(playground)/playground/image/_page.tsx b/editor/app/(tools)/(playground)/playground/image/_page.tsx
index 9f3a34b1b..de35ec8f5 100644
--- a/editor/app/(tools)/(playground)/playground/image/_page.tsx
+++ b/editor/app/(tools)/(playground)/playground/image/_page.tsx
@@ -43,7 +43,7 @@ import {
   ViewportRoot,
   EditorSurface,
   AutoInitialFitTransformer,
-  useDocument,
+  useCurrentEditor,
 } from "@/grida-canvas-react";
 import { FontFamilyListProvider } from "@/scaffolds/sidecontrol/controls/font-family";
 import { useEditorHotKeys } from "@/grida-canvas-react/viewport/hotkeys";
@@ -124,15 +124,13 @@ export default function ImagePlayground() {
 function CanvasConsumer() {
   const { withAuth, session } = useContinueWithAuth();
   const credits = useCredits();
-  const editor = useDocument();
+  const editor = useCurrentEditor();
   const [prompt, setPrompt] = useState("");
   const model = useImageModelConfig("black-forest-labs/flux-schnell");
   const { generate, key, loading, image, start, end } = useGenerateImage();
 
   const onCommit = (value: { text: string }) => {
-    const id = editor.createNodeId();
-    editor.insertNode({
-      _$id: id,
+    const id = editor.insertNode({
       type: "image",
       name: value.text,
       width: model.width,
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/design/template-duo-001-viewer.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/design/template-duo-001-viewer.tsx
index c87fb23eb..d2c1cf5cc 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/design/template-duo-001-viewer.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/design/template-duo-001-viewer.tsx
@@ -12,7 +12,7 @@ import {
   AutoInitialFitTransformer,
   StandaloneSceneBackground,
   UserCustomTemplatesProvider,
-  useDocument,
+  useCurrentEditor,
 } from "@/grida-canvas-react";
 import { Zoom } from "@/scaffolds/sidecontrol/sidecontrol-node-selection";
 import { WorkbenchUI } from "@/components/workbench";
@@ -21,7 +21,6 @@ import { PreviewProvider } from "@/grida-canvas-react-starter-kit/starterkit-pre
 import { Platform } from "@/lib/platform";
 import { TemplateData } from "@/theme/templates/west-referral/templates";
 import { ReadonlyPropsEditorInstance } from "@/scaffolds/props-editor";
-import { useTransform } from "@/grida-canvas-react/provider";
 import MessageAppFrame from "@/components/frames/message-app-frame";
 import { editor } from "@/grida-canvas";
 import { useEditor } from "@/grida-canvas-react";
@@ -276,14 +275,13 @@ export function CampaignTemplateDuo001Viewer({
 
 // will be removed after useEditor is ready
 function EditorUXServer({ focus }: { focus: { node?: string } }) {
-  const { select } = useDocument();
-  const { fit } = useTransform();
+  const editor = useCurrentEditor();
 
   useEffect(
     () => {
       if (focus.node) {
-        select([focus.node]);
-        fit([focus.node], { margin: 64, animate: true });
+        editor.select([focus.node]);
+        editor.fit([focus.node], { margin: 64, animate: true });
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/editor/app/(workbench)/[org]/[proj]/[id]/form/start/page.tsx b/editor/app/(workbench)/[org]/[proj]/[id]/form/start/page.tsx
index b396b7eee..30a172f11 100644
--- a/editor/app/(workbench)/[org]/[proj]/[id]/form/start/page.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/[id]/form/start/page.tsx
@@ -53,7 +53,6 @@ import {
   StandaloneDocumentEditor,
   ViewportRoot,
   EditorSurface,
-  useDocument,
   useRootTemplateInstanceNode,
 } from "@/grida-canvas-react";
 import { composeEditorDocumentAction } from "@/scaffolds/editor/action";
diff --git a/editor/grida-canvas-react-starter-kit/starterkit-artboard-list/index.tsx b/editor/grida-canvas-react-starter-kit/starterkit-artboard-list/index.tsx
index 60e70e3ba..d890f774c 100644
--- a/editor/grida-canvas-react-starter-kit/starterkit-artboard-list/index.tsx
+++ b/editor/grida-canvas-react-starter-kit/starterkit-artboard-list/index.tsx
@@ -6,7 +6,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { useDocument } from "@/grida-canvas-react";
+import { useCurrentEditor } from "@/grida-canvas-react";
 
 type ArtboardData = {
   name: string;
@@ -15,10 +15,10 @@ type ArtboardData = {
 };
 
 const ArtboardList = () => {
-  const { insertNode } = useDocument();
+  const editor = useCurrentEditor();
 
   const onClickItem = (item: ArtboardData) => {
-    insertNode({
+    editor.insertNode({
       type: "container",
       position: "absolute",
       name: item.name,
diff --git a/editor/grida-canvas-react-starter-kit/starterkit-hierarchy/index.tsx b/editor/grida-canvas-react-starter-kit/starterkit-hierarchy/index.tsx
index 177d43323..a2f8578cc 100644
--- a/editor/grida-canvas-react-starter-kit/starterkit-hierarchy/index.tsx
+++ b/editor/grida-canvas-react-starter-kit/starterkit-hierarchy/index.tsx
@@ -7,7 +7,7 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import { useDocument } from "@/grida-canvas-react";
+import { useCurrentEditor, useEditorState } from "@/grida-canvas-react";
 import {
   Tree,
   TreeDragLine,
@@ -35,11 +35,7 @@ import {
   EyeClosedIcon,
   LockOpen1Icon,
 } from "@radix-ui/react-icons";
-import {
-  useCurrentScene,
-  useNodeAction,
-  useTransform,
-} from "@/grida-canvas-react/provider";
+import { useCurrentSceneState } from "@/grida-canvas-react/provider";
 import { NodeTypeIcon } from "@/grida-canvas-react-starter-kit/starterkit-icons/node-type-icon";
 import { cn } from "@/components/lib/utils";
 import grida from "@grida/schema";
@@ -52,7 +48,7 @@ function SceneItemContextMenuWrapper({
   scene_id: string;
   onStartRenaming?: () => void;
 }>) {
-  const { deleteScene, duplicateScene } = useDocument();
+  const editor = useCurrentEditor();
 
   return (
     <ContextMenu>
@@ -71,7 +67,7 @@ function SceneItemContextMenuWrapper({
         </ContextMenuItem>
         <ContextMenuItem
           onSelect={() => {
-            duplicateScene(scene_id);
+            editor.duplicateScene(scene_id);
           }}
           className="text-xs"
         >
@@ -80,7 +76,7 @@ function SceneItemContextMenuWrapper({
         <ContextMenuSeparator />
         <ContextMenuItem
           onSelect={() => {
-            deleteScene(scene_id);
+            editor.deleteScene(scene_id);
           }}
           className="text-xs"
         >
@@ -92,7 +88,9 @@ function SceneItemContextMenuWrapper({
 }
 
 export function ScenesList() {
-  const { scenes: scenesmap, scene_id, loadScene, renameScene } = useDocument();
+  const editor = useCurrentEditor();
+  const scenesmap = useEditorState(editor, (state) => state.document.scenes);
+  const scene_id = useEditorState(editor, (state) => state.scene_id);
 
   const scenes = useMemo(() => {
     return Object.values(scenesmap).sort(
@@ -110,7 +108,7 @@ export function ScenesList() {
       selectedItems: scene_id ? [scene_id] : [],
     },
     setSelectedItems: (items) => {
-      loadScene((items as string[])[0]);
+      editor.loadScene((items as string[])[0]);
     },
     getItemName: (item) => {
       if (item.getId() === "<document>") return "<document>";
@@ -174,7 +172,7 @@ export function ScenesList() {
                   isRenaming={isRenaming}
                   initialValue={scene.name}
                   onValueCommit={(name) => {
-                    renameScene(scene.id, name);
+                    editor.renameScene(scene.id, name);
                     tree.abortRenaming();
                   }}
                   className="font-normal h-8 text-xs! px-2! py-1.5!"
@@ -196,9 +194,7 @@ function NodeHierarchyItemContextMenuWrapper({
   node_id: string;
   onStartRenaming?: () => void;
 }>) {
-  const { copy, deleteNode, order } = useDocument();
-  const { fit } = useTransform();
-  const change = useNodeAction(node_id)!;
+  const editor = useCurrentEditor();
 
   return (
     <ContextMenu>
@@ -206,7 +202,7 @@ function NodeHierarchyItemContextMenuWrapper({
       <ContextMenuContent className="min-w-52">
         <ContextMenuItem
           onSelect={() => {
-            copy(node_id);
+            editor.copy(node_id);
           }}
           className="text-xs"
         >
@@ -225,14 +221,14 @@ function NodeHierarchyItemContextMenuWrapper({
         {/* <ContextMenuItem onSelect={() => {}}>Copy</ContextMenuItem> */}
         {/* <ContextMenuItem>Paste here</ContextMenuItem> */}
         <ContextMenuItem
-          onSelect={() => order(node_id, "front")}
+          onSelect={() => editor.order(node_id, "front")}
           className="text-xs"
         >
           Bring to front
           <ContextMenuShortcut>{"]"}</ContextMenuShortcut>
         </ContextMenuItem>
         <ContextMenuItem
-          onSelect={() => order(node_id, "back")}
+          onSelect={() => editor.order(node_id, "back")}
           className="text-xs"
         >
           Send to back
@@ -240,27 +236,33 @@ function NodeHierarchyItemContextMenuWrapper({
         </ContextMenuItem>
         <ContextMenuSeparator />
         {/* <ContextMenuItem>Add Container</ContextMenuItem> */}
-        <ContextMenuItem onSelect={change.toggleActive} className="text-xs">
+        <ContextMenuItem
+          onSelect={() => editor.toggleNodeActive(node_id)}
+          className="text-xs"
+        >
           Set Active/Inactive
           <ContextMenuShortcut>{"⌘⇧H"}</ContextMenuShortcut>
         </ContextMenuItem>
         <ContextMenuItem
           onSelect={() => {
-            fit([node_id], { margin: 64, animate: true });
+            editor.fit([node_id], { margin: 64, animate: true });
           }}
           className="text-xs"
         >
           Zoom to fit
           <ContextMenuShortcut>{"⇧1"}</ContextMenuShortcut>
         </ContextMenuItem>
-        <ContextMenuItem onSelect={change.toggleLocked} className="text-xs">
+        <ContextMenuItem
+          onSelect={() => editor.toggleNodeLocked(node_id)}
+          className="text-xs"
+        >
           Lock/Unlock
           <ContextMenuShortcut>{"⌘⇧L"}</ContextMenuShortcut>
         </ContextMenuItem>
         <ContextMenuSeparator />
         <ContextMenuItem
           onSelect={() => {
-            deleteNode(node_id);
+            editor.deleteNode(node_id);
           }}
           className="text-xs"
         >
@@ -273,37 +275,24 @@ function NodeHierarchyItemContextMenuWrapper({
 }
 
 export function NodeHierarchyList() {
-  const {
-    document,
-    mv,
-    select,
-    hoverNode,
-    toggleNodeLocked,
-    toggleNodeActive,
-    changeNodeName,
-  } = useDocument();
-
-  const { id, name, children, selection, hovered_node_id } = useCurrentScene();
+  const editor = useCurrentEditor();
+  const document_ctx = useEditorState(editor, (state) => state.document_ctx);
 
-  const expandedItems = useMemo(() => {
-    return children.filter(
-      (id) => (document.nodes[id] as grida.program.nodes.UnknwonNode).expanded
-    );
-  }, [id, children]);
+  const { id, name, children, selection, hovered_node_id } =
+    useCurrentSceneState();
 
   // root item id must be "<root>"
   const tree = useTree<grida.program.nodes.Node>({
     rootItemId: "<root>",
     canReorder: true,
     initialState: {
-      expandedItems: expandedItems,
       selectedItems: selection,
     },
     state: {
       selectedItems: selection,
     },
     setSelectedItems: (items) => {
-      select(items as string[]);
+      editor.select(items as string[]);
     },
     getItemName: (item) => {
       if (item.getId() === "<root>") {
@@ -320,21 +309,18 @@ export function NodeHierarchyList() {
       const target_id = target.item.getId();
       const index =
         "insertionIndex" in target ? target.insertionIndex : undefined;
-      mv(ids, target_id, index);
+      editor.mv(ids, target_id, index);
     },
     indent: 6,
     dataLoader: {
       getItem(itemId) {
-        return document.nodes[itemId];
+        return editor.state.document.nodes[itemId];
       },
       getChildren: (itemId) => {
         if (itemId === "<root>") {
           return children;
         }
-        const node = document.nodes[itemId];
-        return (
-          (node as grida.program.nodes.i.IChildrenReference)?.children || []
-        );
+        return editor.state.document_ctx.__ctx_nid_to_children_ids[itemId];
       },
     },
     features: [
@@ -347,7 +333,7 @@ export function NodeHierarchyList() {
 
   useEffect(() => {
     tree.rebuildTree();
-  }, [document]);
+  }, [document_ctx]);
 
   return (
     <Tree tree={tree} indent={6}>
@@ -373,10 +359,10 @@ export function NodeHierarchyList() {
               item={item}
               className="w-full h-7 max-h-7 py-0.5"
               onPointerEnter={() => {
-                hoverNode(node.id, "enter");
+                editor.hoverNode(node.id, "enter");
               }}
               onPointerLeave={() => {
-                hoverNode(node.id, "leave");
+                editor.hoverNode(node.id, "leave");
               }}
             >
               <TreeItemLabel
@@ -397,7 +383,7 @@ export function NodeHierarchyList() {
                       isRenaming={isRenaming}
                       initialValue={node.name}
                       onValueCommit={(name) => {
-                        changeNodeName(node.id, name);
+                        editor.changeNodeName(node.id, name);
                         tree.abortRenaming();
                       }}
                       className="px-1 py-0.5 font-normal text-[11px]"
@@ -411,7 +397,7 @@ export function NodeHierarchyList() {
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
-                      toggleNodeLocked(node.id);
+                      editor.toggleNodeLocked(node.id);
                     }}
                   >
                     {node.locked ? (
@@ -423,7 +409,7 @@ export function NodeHierarchyList() {
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
-                      toggleNodeActive(node.id);
+                      editor.toggleNodeActive(node.id);
                     }}
                   >
                     {node.active ? (
diff --git a/editor/grida-canvas-react-starter-kit/starterkit-preview/index.tsx b/editor/grida-canvas-react-starter-kit/starterkit-preview/index.tsx
index 1a4ec76da..8539275a1 100644
--- a/editor/grida-canvas-react-starter-kit/starterkit-preview/index.tsx
+++ b/editor/grida-canvas-react-starter-kit/starterkit-preview/index.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import {
-  useDocument,
+  useDocumentState,
   StandaloneRootNodeContent,
   StandaloneSceneBackground,
   type StandaloneDocumentContentProps,
@@ -22,7 +22,7 @@ import {
 } from "@radix-ui/react-icons";
 import { toast } from "sonner";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useCurrentScene } from "@/grida-canvas-react/provider";
+import { useCurrentSceneState } from "@/grida-canvas-react/provider";
 import Resizable from "./resizable";
 import ErrorBoundary from "@/scaffolds/playground-canvas/error-boundary";
 import { Input } from "@/components/ui/input";
@@ -44,8 +44,8 @@ const Context = React.createContext<{
 export function PreviewProvider({
   children,
 }: React.PropsWithChildren<StandaloneDocumentContentProps>) {
-  const { document, document_ctx } = useDocument();
-  const scene = useCurrentScene();
+  const { document, document_ctx } = useDocumentState();
+  const scene = useCurrentSceneState();
   const [mode, setMode] = useState<"framed" | "fullscreen">("framed");
   const [open, setOpen] = useState(false);
   const [id, setId] = useState<string>();
diff --git a/editor/grida-canvas-react-starter-kit/starterkit-toolbar/brush-toolbar.tsx b/editor/grida-canvas-react-starter-kit/starterkit-toolbar/brush-toolbar.tsx
index 9c7886c31..f7840fc2f 100644
--- a/editor/grida-canvas-react-starter-kit/starterkit-toolbar/brush-toolbar.tsx
+++ b/editor/grida-canvas-react-starter-kit/starterkit-toolbar/brush-toolbar.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useCallback } from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "@/components/lib/utils";
-import { useBrush, useDocument } from "@/grida-canvas-react/provider";
+import { useBrushState, useCurrentEditor } from "@/grida-canvas-react";
 import {
   DotsHorizontalIcon,
   TransparencyGridIcon,
@@ -46,9 +46,8 @@ export function useSliderState() {
 }
 
 export default function BrushToolbar() {
-  const { brush, changeBrush, changeBrushSize, changeBrushOpacity } =
-    useBrush();
-
+  const editor = useCurrentEditor();
+  const brush = useBrushState();
   const sizepop = useSliderState();
   const opacitypop = useSliderState();
   const [detailOpen, setDetailOpen] = useState(false);
@@ -75,7 +74,7 @@ export default function BrushToolbar() {
               }}
               onValueChange={(values) => {
                 sizepop.onValueChange();
-                changeBrushSize({ type: "set", value: values[0] });
+                editor.changeBrushSize({ type: "set", value: values[0] });
               }}
             />
           </div>
@@ -105,7 +104,7 @@ export default function BrushToolbar() {
               onValueChange={(values) => {
                 opacitypop.onValueChange();
                 const v = values[0] / 100;
-                changeBrushOpacity({ type: "set", value: v });
+                editor.changeBrushOpacity({ type: "set", value: v });
               }}
             />
           </div>
@@ -152,7 +151,7 @@ export default function BrushToolbar() {
                   thumbnail={item.thumbnail}
                   selected={selected}
                   onClick={() => {
-                    changeBrush(item.brush);
+                    editor.changeBrush(item.brush);
                     if (selected) {
                       setDetailOpen(true);
                     }
@@ -294,7 +293,7 @@ function BrushItem({
 }
 
 function EyedropButton() {
-  const { setClipboardColor } = useDocument();
+  const editor = useCurrentEditor();
   const { isSupported, open } = useEyeDropper();
 
   const mod = () => {
@@ -302,7 +301,7 @@ function EyedropButton() {
       open()?.then((result) => {
         const rgba = cmath.color.hex_to_rgba8888(result.sRGBHex);
         // editor clipboard
-        setClipboardColor(rgba);
+        editor.setClipboardColor(rgba);
       });
     } else {
       toast.error("This feature is not supported in your browser.");
diff --git a/editor/grida-canvas-react-starter-kit/starterkit-toolbar/index.tsx b/editor/grida-canvas-react-starter-kit/starterkit-toolbar/index.tsx
index 0c00dc810..933f3f183 100644
--- a/editor/grida-canvas-react-starter-kit/starterkit-toolbar/index.tsx
+++ b/editor/grida-canvas-react-starter-kit/starterkit-toolbar/index.tsx
@@ -26,7 +26,11 @@ import {
   ToolbarToolType,
 } from "@/grida-canvas-react-starter-kit/starterkit-toolbar/utils";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { useEditorFlags, useTool } from "@/grida-canvas-react/provider";
+import {
+  useCurrentEditor,
+  useEditorFlagsState,
+  useToolState,
+} from "@/grida-canvas-react";
 import { cn } from "@/components/lib/utils";
 
 export function ToolbarPosition({
@@ -48,8 +52,9 @@ export function ToolbarPosition({
 }
 
 export default function Toolbar() {
-  const { setTool, tool } = useTool();
-  const { flags } = useEditorFlags();
+  const editor = useCurrentEditor();
+  const { tool } = useToolState();
+  const { flags } = useEditorFlagsState();
   const value = toolmode_to_toolbar_value(tool);
 
   const tools = useMemo(() => {
@@ -74,7 +79,7 @@ export default function Toolbar() {
     <div className="rounded-full flex gap-4 border bg-background shadow px-4 py-2 pointer-events-auto">
       <ToggleGroup
         onValueChange={(v) => {
-          setTool(
+          editor.setTool(
             v
               ? toolbar_value_to_cursormode(v as ToolbarToolType)
               : { type: "cursor" }
@@ -91,7 +96,7 @@ export default function Toolbar() {
             { value: "hand", label: "Hand tool", shortcut: "H" },
           ]}
           onValueChange={(v) => {
-            setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
+            editor.setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
           }}
         />
         <VerticalDivider />
@@ -110,14 +115,14 @@ export default function Toolbar() {
             { value: "image", label: "Image" },
           ]}
           onValueChange={(v) => {
-            setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
+            editor.setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
           }}
         />
         <ToolsGroup
           value={value}
           options={tools}
           onValueChange={(v) => {
-            setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
+            editor.setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
           }}
         />
       </ToggleGroup>
diff --git a/editor/scaffolds/playground-canvas/__unsafe-console.tsx b/editor/grida-canvas-react/devtools/__unsafe-console.tsx
similarity index 96%
rename from editor/scaffolds/playground-canvas/__unsafe-console.tsx
rename to editor/grida-canvas-react/devtools/__unsafe-console.tsx
index 139b99a26..0d42b292b 100644
--- a/editor/scaffolds/playground-canvas/__unsafe-console.tsx
+++ b/editor/grida-canvas-react/devtools/__unsafe-console.tsx
@@ -2,9 +2,8 @@
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import * as monaco from "monaco-editor";
-import { toast } from "sonner";
-import { useEditorApi } from "@/grida-canvas-react/provider";
 import { AutoHeightThemedMonacoEditor } from "@/components/monaco";
+import { toast } from "sonner";
 
 const IS_UNSAFE_SANDBOX =
   process.env.NEXT_PUBLIC_GRIDA_UNSAFE_DEVELOPER_SANDBOX === "1";
@@ -44,13 +43,6 @@ export function __UNSAFE_CONSOLE() {
   const entriesRef = useRef(entries); // Ref to track the latest entries state
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
 
-  const api = useEditorApi();
-
-  useEffect(() => {
-    // @ts-expect-error
-    globalThis["grida"] = api;
-  }, [api]);
-
   // Keep the ref in sync with the state
   useEffect(() => {
     entriesRef.current = entries;
diff --git a/editor/grida-canvas-react/devtools/api-host.tsx b/editor/grida-canvas-react/devtools/api-host.tsx
new file mode 100644
index 000000000..d930c9eba
--- /dev/null
+++ b/editor/grida-canvas-react/devtools/api-host.tsx
@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+import { useCurrentEditor } from "../use-editor";
+
+export function useWindowCurrentEditor() {
+  const editor = useCurrentEditor();
+  useEffect(() => {
+    // @ts-expect-error
+    globalThis["grida"] = editor;
+    return () => {
+      // @ts-expect-error
+      delete globalThis["grida"];
+    };
+  }, [editor]);
+}
+
+export function WindowCurrentEditorProvider() {
+  useWindowCurrentEditor();
+  return null;
+}
diff --git a/editor/grida-canvas-react/devtools/index.tsx b/editor/grida-canvas-react/devtools/index.tsx
index cfcd6ea96..6fc9b19b0 100644
--- a/editor/grida-canvas-react/devtools/index.tsx
+++ b/editor/grida-canvas-react/devtools/index.tsx
@@ -20,10 +20,11 @@ import {
 } from "@/components/ui/collapsible";
 import { ThemedMonacoEditor } from "@/components/monaco";
 import { useDialogState } from "@/components/hooks/use-dialog-state";
-import { __UNSAFE_CONSOLE } from "@/scaffolds/playground-canvas/__unsafe-console";
+import { __UNSAFE_CONSOLE } from "@/grida-canvas-react/devtools/__unsafe-console";
 import { useGoogleFontsList } from "@/grida-canvas-react/components/google-fonts";
 import type grida from "@grida/schema";
-import { useCurrentEditor, useEditorState, useRecorder } from "../use-editor";
+import { useCurrentEditor, useEditorState } from "../use-editor";
+import { useRecorder } from "../plugins/use-recorder";
 import { saveAs } from "file-saver";
 
 export function DevtoolsPanel() {
diff --git a/editor/grida-canvas-react/index.ts b/editor/grida-canvas-react/index.ts
index b00a914ac..6945ac332 100644
--- a/editor/grida-canvas-react/index.ts
+++ b/editor/grida-canvas-react/index.ts
@@ -1,15 +1,14 @@
-export {
-  useEditor,
-  useEditorState,
-  useCurrentEditor,
-  useRecorder,
-} from "./use-editor";
+export { useEditor, useEditorState, useCurrentEditor } from "./use-editor";
 export {
   StandaloneDocumentEditor,
-  useDocument,
+  useDocumentState,
   useNode,
-  useEventTarget,
+  useBrushState,
   useComputedNode,
+  useNodeActions,
+  useTransformState,
+  useToolState,
+  useEditorFlagsState,
   useRootTemplateInstanceNode,
   useTemplateDefinition,
 } from "./provider";
diff --git a/editor/grida-canvas-react/plugins/use-recorder.ts b/editor/grida-canvas-react/plugins/use-recorder.ts
new file mode 100644
index 000000000..f814ed8cf
--- /dev/null
+++ b/editor/grida-canvas-react/plugins/use-recorder.ts
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Editor } from "@/grida-canvas/editor";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
+import { EditorRecorder } from "@/grida-canvas/plugins/recorder";
+import deepEqual from "fast-deep-equal/es6/react.js";
+
+export function useRecorder(editor: Editor) {
+  const [recorder] = React.useState(new EditorRecorder(editor));
+
+  const state = useSyncExternalStoreWithSelector(
+    recorder.subscribe.bind(recorder),
+    recorder.snapshot.bind(recorder),
+    recorder.snapshot.bind(recorder),
+    (s) => s,
+    deepEqual
+  );
+
+  return React.useMemo(
+    () => ({
+      status: state.status,
+      nframes: state.nframes,
+      start: () => recorder.start(),
+      stop: () => recorder.stop(),
+      clear: () => recorder.clear(),
+      replay: () => recorder.play(),
+      exit: () => recorder.exit(),
+      dumps: () => recorder.dumps(),
+    }),
+    [state, recorder]
+  );
+}
diff --git a/editor/grida-canvas-react/provider.tsx b/editor/grida-canvas-react/provider.tsx
index 0270e2bf3..85e863a02 100644
--- a/editor/grida-canvas-react/provider.tsx
+++ b/editor/grida-canvas-react/provider.tsx
@@ -2,9 +2,9 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { editor } from "@/grida-canvas";
-import type { tokens } from "@grida/tokens";
 import grida from "@grida/schema";
 import iosvg from "@grida/io-svg";
+import type { tokens } from "@grida/tokens";
 import type cg from "@grida/cg";
 import { useComputed } from "./nodes/use-computed";
 import {
@@ -14,17 +14,11 @@ import {
 import { GoogleFontsManager } from "./components/google-fonts";
 import { domapi } from "../grida-canvas/backends/dom";
 import cmath from "@grida/cmath";
-import type {
-  Action,
-  TCanvasEventTargetDragGestureState,
-  TChange,
-} from "@/grida-canvas/action";
+import type { Action } from "@/grida-canvas/action";
 import mixed, { PropertyCompareFn } from "@grida/mixed-properties";
 import deepEqual from "deep-equal";
 import { toast } from "sonner";
-import { BitmapEditorBrush } from "@grida/bitmap";
 import { is_direct_component_consumer } from "@/grida-canvas-utils/utils/supports";
-import nid from "@/grida-canvas/reducers/tools/id";
 import { Editor } from "@/grida-canvas/editor";
 import { EditorContext, useCurrentEditor, useEditorState } from "./use-editor";
 import assert from "assert";
@@ -92,392 +86,6 @@ export function StandaloneDocumentEditor({
   );
 }
 
-function __useNodeActions(dispatch: Dispatcher): editor.api.INodeChangeActions {
-  const actions = {
-    toggleNodeActive: (node_id: string) =>
-      dispatch({
-        type: "node/toggle/active",
-        node_id: node_id,
-      }),
-    toggleNodeLocked: (node_id: string) =>
-      dispatch({
-        type: "node/toggle/locked",
-        node_id: node_id,
-      }),
-    toggleNodeBold: (node_id: string) =>
-      dispatch({
-        type: "node/toggle/bold",
-        node_id: node_id,
-      }),
-    changeNodeProps: (
-      node_id: string,
-      key: string,
-      value?: tokens.StringValueExpression
-    ) =>
-      dispatch({
-        type: "node/change/props",
-        node_id: node_id,
-        props: {
-          [key]: value,
-        },
-      }),
-    changeNodeComponent: (node_id: string, component_id: string) =>
-      dispatch({
-        type: "node/change/component",
-        node_id: node_id,
-        component_id: component_id,
-      }),
-    changeNodeText: (node_id: string, text?: tokens.StringValueExpression) =>
-      dispatch({
-        type: "node/change/text",
-        node_id: node_id,
-        text,
-      }),
-    changeNodeName: (node_id: string, name: string) =>
-      dispatch({
-        type: "node/change/name",
-        node_id: node_id,
-        name: name,
-      }),
-    changeNodeUserData: (node_id: string, userdata: unknown) =>
-      dispatch({
-        type: "node/change/userdata",
-        node_id: node_id,
-        userdata: userdata as any,
-      }),
-    changeNodeActive: (node_id: string, active: boolean) =>
-      dispatch({
-        type: "node/change/active",
-        node_id: node_id,
-        active: active,
-      }),
-    changeNodeLocked: (node_id: string, locked: boolean) =>
-      dispatch({
-        type: "node/change/locked",
-        node_id: node_id,
-        locked: locked,
-      }),
-    changeNodePositioning: (
-      node_id: string,
-      positioning: grida.program.nodes.i.IPositioning
-    ) =>
-      dispatch({
-        type: "node/change/positioning",
-        node_id: node_id,
-        positioning,
-      }),
-    changeNodePositioningMode: (
-      node_id: string,
-      position: grida.program.nodes.i.IPositioning["position"]
-    ) =>
-      dispatch({
-        type: "node/change/positioning-mode",
-        node_id: node_id,
-        position,
-      }),
-    changeNodeSrc: (node_id: string, src?: tokens.StringValueExpression) =>
-      dispatch({
-        type: "node/change/src",
-        node_id: node_id,
-        src,
-      }),
-    changeNodeHref: (
-      node_id: string,
-      href?: grida.program.nodes.i.IHrefable["href"]
-    ) =>
-      dispatch({
-        type: "node/change/href",
-        node_id: node_id,
-        href,
-      }),
-    changeNodeTarget: (
-      node_id: string,
-      target?: grida.program.nodes.i.IHrefable["target"]
-    ) =>
-      dispatch({
-        type: "node/change/target",
-        node_id: node_id,
-        target,
-      }),
-    changeNodeOpacity: (node_id: string, opacity: TChange<number>) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/opacity",
-          node_id: node_id,
-          opacity,
-        });
-      }),
-    changeNodeRotation: (node_id: string, rotation: TChange<number>) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/rotation",
-          node_id: node_id,
-          rotation,
-        });
-      }),
-    changeNodeSize: (
-      node_id: string,
-      axis: "width" | "height",
-      value: grida.program.css.LengthPercentage | "auto"
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/size",
-          node_id: node_id,
-          axis,
-          value: value,
-        });
-      }),
-    changeNodeFill: (
-      node_id: string,
-      fill:
-        | grida.program.nodes.i.props.SolidPaintToken
-        | cg.PaintWithoutID
-        | null
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/fill",
-          node_id: node_id,
-          fill,
-        });
-      }),
-    changeNodeStroke: (
-      node_id: string,
-      stroke:
-        | grida.program.nodes.i.props.SolidPaintToken
-        | cg.PaintWithoutID
-        | null
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/stroke",
-          node_id: node_id,
-          stroke,
-        });
-      }),
-    changeNodeStrokeWidth: (node_id: string, strokeWidth: TChange<number>) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/stroke-width",
-          node_id: node_id,
-          strokeWidth,
-        });
-      }),
-    changeNodeStrokeCap: (node_id: string, strokeCap: cg.StrokeCap) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/stroke-cap",
-          node_id: node_id,
-          strokeCap,
-        });
-      }),
-    changeNodeFit: (node_id: string, fit: cg.BoxFit) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/fit",
-          node_id: node_id,
-          fit,
-        });
-      }),
-    changeNodeCornerRadius: (
-      node_id: string,
-      cornerRadius: grida.program.nodes.i.IRectangleCorner["cornerRadius"]
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/cornerRadius",
-          node_id: node_id,
-          cornerRadius,
-        });
-      }),
-    // text style
-    changeTextNodeFontFamily: (
-      node_id: string,
-      fontFamily: string | undefined
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/fontFamily",
-          node_id: node_id,
-          fontFamily,
-        });
-      }),
-    changeTextNodeFontWeight: (node_id: string, fontWeight: cg.NFontWeight) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/fontWeight",
-          node_id: node_id,
-          fontWeight,
-        });
-      }),
-    changeTextNodeFontSize: (node_id: string, fontSize: TChange<number>) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/fontSize",
-          node_id: node_id,
-          fontSize,
-        });
-      }),
-    changeTextNodeTextAlign: (node_id: string, textAlign: cg.TextAlign) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/textAlign",
-          node_id: node_id,
-          textAlign,
-        });
-      }),
-    changeTextNodeTextAlignVertical: (
-      node_id: string,
-      textAlignVertical: cg.TextAlignVertical
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/textAlignVertical",
-          node_id: node_id,
-          textAlignVertical,
-        });
-      }),
-    changeTextNodeLineHeight: (
-      node_id: string,
-      lineHeight: TChange<grida.program.nodes.TextNode["lineHeight"]>
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/lineHeight",
-          node_id: node_id,
-          lineHeight,
-        });
-      }),
-    changeTextNodeLetterSpacing: (
-      node_id: string,
-      letterSpacing: TChange<grida.program.nodes.TextNode["letterSpacing"]>
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/letterSpacing",
-          node_id: node_id,
-          letterSpacing,
-        });
-      }),
-    changeTextNodeMaxlength: (node_id: string, maxlength: number | undefined) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/maxlength",
-          node_id: node_id,
-          maxlength,
-        });
-      }),
-    //
-    changeNodeBorder: (
-      node_id: string,
-      border: grida.program.css.Border | undefined
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/border",
-          node_id: node_id,
-          border: border,
-        });
-      }),
-    //
-    changeContainerNodePadding: (
-      node_id: string,
-      padding: grida.program.nodes.i.IPadding["padding"]
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/padding",
-          node_id: node_id,
-          padding,
-        });
-      }),
-    changeNodeBoxShadow: (node_id: string, boxShadow?: cg.BoxShadow) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/box-shadow",
-          node_id: node_id,
-          boxShadow,
-        });
-      }),
-    changeContainerNodeLayout: (
-      node_id: string,
-      layout: grida.program.nodes.i.IFlexContainer["layout"]
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/layout",
-          node_id: node_id,
-          layout,
-        });
-      }),
-    changeFlexContainerNodeDirection: (node_id: string, direction: cg.Axis) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/direction",
-          node_id: node_id,
-          direction,
-        });
-      }),
-    changeFlexContainerNodeMainAxisAlignment: (
-      node_id: string,
-      mainAxisAlignment: cg.MainAxisAlignment
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/mainAxisAlignment",
-          node_id: node_id,
-          mainAxisAlignment,
-        });
-      }),
-    changeFlexContainerNodeCrossAxisAlignment: (
-      node_id: string,
-      crossAxisAlignment: cg.CrossAxisAlignment
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/crossAxisAlignment",
-          node_id: node_id,
-          crossAxisAlignment,
-        });
-      }),
-    changeFlexContainerNodeGap: (
-      node_id: string,
-      gap: number | { mainAxisGap: number; crossAxisGap: number }
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/gap",
-          node_id: node_id,
-          gap,
-        });
-      }),
-    //
-    changeNodeMouseCursor: (node_id: string, cursor: cg.SystemMouseCursor) =>
-      dispatch({
-        type: "node/change/mouse-cursor",
-        node_id,
-        cursor,
-      }),
-    changeNodeStyle: (
-      node_id: string,
-      key: keyof grida.program.css.ExplicitlySupportedCSSProperties,
-      value: any
-    ) =>
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "node/change/style",
-          node_id: node_id,
-          style: {
-            [key]: value,
-          },
-        });
-      }),
-  } satisfies editor.api.INodeChangeActions;
-
-  return useMemo(() => actions, [dispatch]);
-}
-
 function __useGestureNudgeState(dispatch: Dispatcher) {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -508,139 +116,131 @@ function __useGestureNudgeState(dispatch: Dispatcher) {
   return __gesture_nudge_debounced;
 }
 
-export function useNodeAction(node_id: string | undefined) {
+export function useNodeActions(node_id: string | undefined) {
   const instance = useCurrentEditor();
-  const dispatch = React.useCallback(
-    (action: Action) => instance.dispatch(action),
-    [instance]
-  );
-  const nodeActions = __useNodeActions(dispatch);
 
   return useMemo(() => {
     if (!node_id) return;
     return {
-      toggleLocked: () => nodeActions.toggleNodeLocked(node_id),
-      toggleActive: () => nodeActions.toggleNodeActive(node_id),
-      toggleBold: () => nodeActions.toggleNodeBold(node_id),
+      toggleLocked: () => instance.toggleNodeLocked(node_id),
+      toggleActive: () => instance.toggleNodeActive(node_id),
+      toggleBold: () => instance.toggleNodeBold(node_id),
       component: (component_id: string) =>
-        nodeActions.changeNodeComponent(node_id, component_id),
-      text: (text?: tokens.StringValueExpression) =>
-        nodeActions.changeNodeText(node_id, text),
+        instance.changeNodeComponent(node_id, component_id),
+      text: (text: tokens.StringValueExpression | null) =>
+        instance.changeNodeText(node_id, text),
       style: (
         key: keyof grida.program.css.ExplicitlySupportedCSSProperties,
         value: any
-      ) => nodeActions.changeNodeStyle(node_id, key, value),
+      ) => instance.changeNodeStyle(node_id, key, value),
       value: (key: string, value: any) =>
-        nodeActions.changeNodeProps(node_id, key, value),
+        instance.changeNodeProps(node_id, key, value),
       // attributes
-      userdata: (value: any) => nodeActions.changeNodeUserData(node_id, value),
-      name: (name: string) => nodeActions.changeNodeName(node_id, name),
-      active: (active: boolean) =>
-        nodeActions.changeNodeActive(node_id, active),
-      locked: (locked: boolean) =>
-        nodeActions.changeNodeLocked(node_id, locked),
+      userdata: (value: any) => instance.changeNodeUserData(node_id, value),
+      name: (name: string) => instance.changeNodeName(node_id, name),
+      active: (active: boolean) => instance.changeNodeActive(node_id, active),
+      locked: (locked: boolean) => instance.changeNodeLocked(node_id, locked),
       src: (src?: tokens.StringValueExpression) =>
-        nodeActions.changeNodeSrc(node_id, src),
+        instance.changeNodeSrc(node_id, src),
       href: (href?: grida.program.nodes.i.IHrefable["href"]) =>
-        nodeActions.changeNodeHref(node_id, href),
+        instance.changeNodeHref(node_id, href),
       target: (target?: grida.program.nodes.i.IHrefable["target"]) =>
-        nodeActions.changeNodeTarget(node_id, target),
+        instance.changeNodeTarget(node_id, target),
 
       positioning: (value: grida.program.nodes.i.IPositioning) =>
-        nodeActions.changeNodePositioning(node_id, value),
+        instance.changeNodePositioning(node_id, value),
       positioningMode: (value: "absolute" | "relative") =>
-        nodeActions.changeNodePositioningMode(node_id, value),
+        instance.changeNodePositioningMode(node_id, value),
 
       //
       cornerRadius: (
         value: grida.program.nodes.i.IRectangleCorner["cornerRadius"]
-      ) => nodeActions.changeNodeCornerRadius(node_id, value),
+      ) => instance.changeNodeCornerRadius(node_id, value),
       fill: (
         value:
           | grida.program.nodes.i.props.SolidPaintToken
           | cg.PaintWithoutID
           | null
-      ) => nodeActions.changeNodeFill(node_id, value),
+      ) => instance.changeNodeFill(node_id, value),
       stroke: (
         value:
           | grida.program.nodes.i.props.SolidPaintToken
           | cg.PaintWithoutID
           | null
-      ) => nodeActions.changeNodeStroke(node_id, value),
-      strokeWidth: (change: TChange<number>) =>
-        nodeActions.changeNodeStrokeWidth(node_id, change),
+      ) => instance.changeNodeStroke(node_id, value),
+      strokeWidth: (change: editor.api.NumberChange) =>
+        instance.changeNodeStrokeWidth(node_id, change),
       strokeCap: (value: cg.StrokeCap) =>
-        nodeActions.changeNodeStrokeCap(node_id, value),
-      fit: (value: cg.BoxFit) => nodeActions.changeNodeFit(node_id, value),
+        instance.changeNodeStrokeCap(node_id, value),
+      fit: (value: cg.BoxFit) => instance.changeNodeFit(node_id, value),
       // stylable
-      opacity: (change: TChange<number>) =>
-        nodeActions.changeNodeOpacity(node_id, change),
-      rotation: (change: TChange<number>) =>
-        nodeActions.changeNodeRotation(node_id, change),
+      opacity: (change: editor.api.NumberChange) =>
+        instance.changeNodeOpacity(node_id, change),
+      rotation: (change: editor.api.NumberChange) =>
+        instance.changeNodeRotation(node_id, change),
       width: (value: grida.program.css.LengthPercentage | "auto") =>
-        nodeActions.changeNodeSize(node_id, "width", value),
+        instance.changeNodeSize(node_id, "width", value),
       height: (value: grida.program.css.LengthPercentage | "auto") =>
-        nodeActions.changeNodeSize(node_id, "height", value),
+        instance.changeNodeSize(node_id, "height", value),
 
       // text style
       fontFamily: (value: string) =>
-        nodeActions.changeTextNodeFontFamily(node_id, value),
+        instance.changeTextNodeFontFamily(node_id, value),
       fontWeight: (value: cg.NFontWeight) =>
-        nodeActions.changeTextNodeFontWeight(node_id, value),
-      fontSize: (change: TChange<number>) =>
-        nodeActions.changeTextNodeFontSize(node_id, change),
+        instance.changeTextNodeFontWeight(node_id, value),
+      fontSize: (change: editor.api.NumberChange) =>
+        instance.changeTextNodeFontSize(node_id, change),
       textAlign: (value: cg.TextAlign) =>
-        nodeActions.changeTextNodeTextAlign(node_id, value),
+        instance.changeTextNodeTextAlign(node_id, value),
       textAlignVertical: (value: cg.TextAlignVertical) =>
-        nodeActions.changeTextNodeTextAlignVertical(node_id, value),
-      lineHeight: (
-        change: TChange<grida.program.nodes.TextNode["lineHeight"]>
-      ) => nodeActions.changeTextNodeLineHeight(node_id, change),
+        instance.changeTextNodeTextAlignVertical(node_id, value),
+      lineHeight: (change: editor.api.NumberChange) =>
+        instance.changeTextNodeLineHeight(node_id, change),
       letterSpacing: (
-        change: TChange<grida.program.nodes.TextNode["letterSpacing"]>
-      ) => nodeActions.changeTextNodeLetterSpacing(node_id, change),
+        change: editor.api.TChange<
+          grida.program.nodes.TextNode["letterSpacing"]
+        >
+      ) => instance.changeTextNodeLetterSpacing(node_id, change),
       maxLength: (value: number | undefined) =>
-        nodeActions.changeTextNodeMaxlength(node_id, value),
+        instance.changeTextNodeMaxlength(node_id, value),
 
       // border
       border: (value: grida.program.css.Border | undefined) =>
-        nodeActions.changeNodeBorder(node_id, value),
+        instance.changeNodeBorder(node_id, value),
 
       padding: (value: grida.program.nodes.i.IPadding["padding"]) =>
-        nodeActions.changeContainerNodePadding(node_id, value),
+        instance.changeContainerNodePadding(node_id, value),
       // margin: (value?: number) =>
       //   changeNodeStyle(node_id, "margin", value),
       boxShadow: (value?: cg.BoxShadow) =>
-        nodeActions.changeNodeBoxShadow(node_id, value),
+        instance.changeNodeBoxShadow(node_id, value),
 
       // layout
       layout: (value: grida.program.nodes.i.IFlexContainer["layout"]) =>
-        nodeActions.changeContainerNodeLayout(node_id, value),
+        instance.changeContainerNodeLayout(node_id, value),
       direction: (value: cg.Axis) =>
-        nodeActions.changeFlexContainerNodeDirection(node_id, value),
+        instance.changeFlexContainerNodeDirection(node_id, value),
       // flexWrap: (value?: string) =>
       //   changeNodeStyle(node_id, "flexWrap", value),
       mainAxisAlignment: (value: cg.MainAxisAlignment) =>
-        nodeActions.changeFlexContainerNodeMainAxisAlignment(node_id, value),
+        instance.changeFlexContainerNodeMainAxisAlignment(node_id, value),
       crossAxisAlignment: (value: cg.CrossAxisAlignment) =>
-        nodeActions.changeFlexContainerNodeCrossAxisAlignment(node_id, value),
+        instance.changeFlexContainerNodeCrossAxisAlignment(node_id, value),
       gap: (value: number | { mainAxisGap: number; crossAxisGap: number }) =>
-        nodeActions.changeFlexContainerNodeGap(node_id, value),
+        instance.changeFlexContainerNodeGap(node_id, value),
 
       // css style
       aspectRatio: (value?: number) =>
-        nodeActions.changeNodeStyle(node_id, "aspectRatio", value),
+        instance.changeNodeStyle(node_id, "aspectRatio", value),
       cursor: (value: cg.SystemMouseCursor) =>
-        nodeActions.changeNodeMouseCursor(node_id, value),
+        instance.changeNodeMouseCursor(node_id, value),
     };
-  }, [node_id, nodeActions]);
+  }, [node_id, instance]);
 }
 
-const compareProperty: PropertyCompareFn<grida.program.nodes.UnknwonNode> = (
-  key,
-  a,
-  b
-): boolean => {
+const compareNodeProperty: PropertyCompareFn<
+  grida.program.nodes.UnknwonNode
+> = (key, a, b): boolean => {
   switch (key) {
     case "fill":
     case "stroke":
@@ -652,17 +252,13 @@ const compareProperty: PropertyCompareFn<grida.program.nodes.UnknwonNode> = (
   return deepEqual(a, b);
 };
 
-export function useSelection() {
+export function useCurrentSelection() {
   const instance = useCurrentEditor();
   const state = useEditorState(instance, (state) => ({
     selection: state.selection,
     document: state.document,
   }));
-  const dispatch = React.useCallback(
-    (action: Action) => instance.dispatch(action),
-    [instance]
-  );
-  const __actions = __useNodeActions(dispatch);
+
   const selection = state.selection;
 
   const nodes = useMemo(() => {
@@ -678,7 +274,7 @@ export function useSelection() {
         {
           idKey: "id",
           ignoredKey: ["id", "type", "userdata"],
-          compare: compareProperty,
+          compare: compareNodeProperty,
           mixed: grida.mixed,
         }
       ),
@@ -688,152 +284,154 @@ export function useSelection() {
   const name = useCallback(
     (value: string) => {
       selection.forEach((id) => {
-        __actions.changeNodeName(id, value);
+        instance.changeNodeName(id, value);
       });
     },
-    [selection, __actions]
+    [selection, instance.changeNodeName]
   );
 
   const copy = useCallback(() => {
-    dispatch({
-      type: "copy",
-      target: "selection",
-    });
-  }, [dispatch]);
+    instance.copy("selection");
+  }, [instance]);
 
   const active = useCallback(
     (value: boolean) => {
       selection.forEach((id) => {
-        __actions.changeNodeActive(id, value);
+        instance.changeNodeActive(id, value);
       });
     },
-    [selection, __actions]
+    [selection, instance.changeNodeActive]
   );
 
   const locked = useCallback(
     (value: boolean) => {
       selection.forEach((id) => {
-        __actions.changeNodeLocked(id, value);
+        instance.changeNodeLocked(id, value);
       });
     },
-    [selection, __actions]
+    [selection, instance.changeNodeLocked]
   );
 
   const rotation = useCallback(
-    (change: TChange<number>) => {
+    (change: editor.api.NumberChange) => {
       mixedProperties.rotation?.ids.forEach((id) => {
-        __actions.changeNodeRotation(id, change);
+        instance.changeNodeRotation(id, change);
       });
     },
-    [mixedProperties.rotation?.ids, __actions]
+    [mixedProperties.rotation?.ids, instance.changeNodeRotation]
   );
 
   const opacity = useCallback(
-    (change: TChange<number>) => {
+    (change: editor.api.NumberChange) => {
       mixedProperties.opacity?.ids.forEach((id) => {
-        __actions.changeNodeOpacity(id, change);
+        instance.changeNodeOpacity(id, change);
       });
     },
-    [mixedProperties.opacity?.ids, __actions]
+    [mixedProperties.opacity?.ids, instance.changeNodeOpacity]
   );
 
   const width = useCallback(
     (value: grida.program.css.LengthPercentage | "auto") => {
       mixedProperties.width?.ids.forEach((id) => {
-        __actions.changeNodeSize(id, "width", value);
+        instance.changeNodeSize(id, "width", value);
       });
     },
-    [mixedProperties.width?.ids, __actions]
+    [mixedProperties.width?.ids, instance.changeNodeSize]
   );
 
   const height = useCallback(
     (value: grida.program.css.LengthPercentage | "auto") => {
       mixedProperties.height?.ids.forEach((id) => {
-        __actions.changeNodeSize(id, "height", value);
+        instance.changeNodeSize(id, "height", value);
       });
     },
-    [mixedProperties.height?.ids, __actions]
+    [mixedProperties.height?.ids, instance.changeNodeSize]
   );
 
   const positioningMode = useCallback(
     (position: grida.program.nodes.i.IPositioning["position"]) => {
       mixedProperties.position?.ids.forEach((id) => {
-        __actions.changeNodePositioningMode(id, position);
+        instance.changeNodePositioningMode(id, position);
       });
     },
-    [mixedProperties.position?.ids, __actions]
+    [mixedProperties.position?.ids, instance.changeNodePositioningMode]
   );
 
   const fontFamily = useCallback(
     (value: string) => {
       mixedProperties.fontFamily?.ids.forEach((id) => {
-        __actions.changeTextNodeFontFamily(id, value);
+        instance.changeTextNodeFontFamily(id, value);
       });
     },
-    [mixedProperties.fontFamily?.ids, __actions]
+    [mixedProperties.fontFamily?.ids, instance.changeTextNodeFontFamily]
   );
 
   const fontWeight = useCallback(
     (value: cg.NFontWeight) => {
       mixedProperties.fontWeight?.ids.forEach((id) => {
-        __actions.changeTextNodeFontWeight(id, value);
+        instance.changeTextNodeFontWeight(id, value);
       });
     },
-    [mixedProperties.fontWeight?.ids, __actions]
+    [mixedProperties.fontWeight?.ids, instance.changeTextNodeFontWeight]
   );
 
   const fontSize = useCallback(
-    (change: TChange<number>) => {
+    (change: editor.api.NumberChange) => {
       mixedProperties.fontSize?.ids.forEach((id) => {
-        __actions.changeTextNodeFontSize(id, change);
+        instance.changeTextNodeFontSize(id, change);
       });
     },
-    [mixedProperties.fontSize?.ids, __actions]
+    [mixedProperties.fontSize?.ids, instance.changeTextNodeFontSize]
   );
 
   const lineHeight = useCallback(
-    (change: TChange<grida.program.nodes.TextNode["lineHeight"]>) => {
+    (change: editor.api.NumberChange) => {
       mixedProperties.lineHeight?.ids.forEach((id) => {
-        __actions.changeTextNodeLineHeight(id, change);
+        instance.changeTextNodeLineHeight(id, change);
       });
     },
-    [mixedProperties.lineHeight?.ids, __actions]
+    [mixedProperties.lineHeight?.ids, instance.changeTextNodeLineHeight]
   );
 
   const letterSpacing = useCallback(
-    (change: TChange<grida.program.nodes.TextNode["letterSpacing"]>) => {
+    (
+      change: editor.api.TChange<grida.program.nodes.TextNode["letterSpacing"]>
+    ) => {
       mixedProperties.letterSpacing?.ids.forEach((id) => {
-        __actions.changeTextNodeLetterSpacing(id, change);
+        instance.changeTextNodeLetterSpacing(id, change);
       });
     },
-    [mixedProperties.letterSpacing?.ids, __actions]
+    [mixedProperties.letterSpacing?.ids, instance.changeTextNodeLetterSpacing]
   );
 
   const textAlign = useCallback(
     (value: cg.TextAlign) => {
       mixedProperties.textAlign?.ids.forEach((id) => {
-        __actions.changeTextNodeTextAlign(id, value);
+        instance.changeTextNodeTextAlign(id, value);
       });
     },
-    [mixedProperties.textAlign?.ids, __actions]
+    [mixedProperties.textAlign?.ids, instance.changeTextNodeTextAlign]
   );
 
   const textAlignVertical = useCallback(
     (value: cg.TextAlignVertical) => {
       mixedProperties.textAlignVertical?.ids.forEach((id) => {
-        __actions.changeTextNodeTextAlignVertical(id, value);
+        instance.changeTextNodeTextAlignVertical(id, value);
       });
     },
-    [mixedProperties.textAlignVertical?.ids, __actions]
+    [
+      mixedProperties.textAlignVertical?.ids,
+      instance.changeTextNodeTextAlignVertical,
+    ]
   );
 
   const fit = useCallback(
     (value: cg.BoxFit) => {
       mixedProperties.fit?.ids.forEach((id) => {
-        __actions.changeNodeFit(id, value);
+        instance.changeNodeFit(id, value);
       });
     },
-    [mixedProperties.fit?.ids, __actions]
+    [mixedProperties.fit?.ids, instance.changeNodeFit]
   );
 
   const fill = useCallback(
@@ -844,10 +442,10 @@ export function useSelection() {
         | null
     ) => {
       mixedProperties.fill?.ids.forEach((id) => {
-        __actions.changeNodeFill(id, value);
+        instance.changeNodeFill(id, value);
       });
     },
-    [mixedProperties.fill?.ids, __actions]
+    [mixedProperties.fill?.ids, instance.changeNodeFill]
   );
 
   const stroke = useCallback(
@@ -858,82 +456,88 @@ export function useSelection() {
         | null
     ) => {
       mixedProperties.stroke?.ids.forEach((id) => {
-        __actions.changeNodeStroke(id, value);
+        instance.changeNodeStroke(id, value);
       });
     },
-    [mixedProperties.stroke?.ids, __actions]
+    [mixedProperties.stroke?.ids, instance.changeNodeStroke]
   );
 
   const strokeWidth = useCallback(
-    (change: TChange<number>) => {
+    (change: editor.api.NumberChange) => {
       mixedProperties.strokeWidth?.ids.forEach((id) => {
-        __actions.changeNodeStrokeWidth(id, change);
+        instance.changeNodeStrokeWidth(id, change);
       });
     },
-    [mixedProperties.strokeWidth?.ids, __actions]
+    [mixedProperties.strokeWidth?.ids, instance.changeNodeStrokeWidth]
   );
 
   const strokeCap = useCallback(
     (value: cg.StrokeCap) => {
       mixedProperties.strokeCap?.ids.forEach((id) => {
-        __actions.changeNodeStrokeCap(id, value);
+        instance.changeNodeStrokeCap(id, value);
       });
     },
-    [mixedProperties.strokeCap?.ids, __actions]
+    [mixedProperties.strokeCap?.ids, instance.changeNodeStrokeCap]
   );
 
   const layout = useCallback(
     (value: grida.program.nodes.i.IFlexContainer["layout"]) => {
       mixedProperties.layout?.ids.forEach((id) => {
-        __actions.changeContainerNodeLayout(id, value);
+        instance.changeContainerNodeLayout(id, value);
       });
     },
-    [mixedProperties.layout?.ids, __actions]
+    [mixedProperties.layout?.ids, instance.changeContainerNodeLayout]
   );
 
   const direction = useCallback(
     (value: cg.Axis) => {
       mixedProperties.direction?.ids.forEach((id) => {
-        __actions.changeFlexContainerNodeDirection(id, value);
+        instance.changeFlexContainerNodeDirection(id, value);
       });
     },
-    [mixedProperties.direction?.ids, __actions]
+    [mixedProperties.direction?.ids, instance.changeFlexContainerNodeDirection]
   );
 
   const mainAxisAlignment = useCallback(
     (value: cg.MainAxisAlignment) => {
       mixedProperties.mainAxisAlignment?.ids.forEach((id) => {
-        __actions.changeFlexContainerNodeMainAxisAlignment(id, value);
+        instance.changeFlexContainerNodeMainAxisAlignment(id, value);
       });
     },
-    [mixedProperties.mainAxisAlignment?.ids, __actions]
+    [
+      mixedProperties.mainAxisAlignment?.ids,
+      instance.changeFlexContainerNodeMainAxisAlignment,
+    ]
   );
 
   const crossAxisAlignment = useCallback(
     (value: cg.CrossAxisAlignment) => {
       mixedProperties.crossAxisAlignment?.ids.forEach((id) => {
-        __actions.changeFlexContainerNodeCrossAxisAlignment(id, value);
+        instance.changeFlexContainerNodeCrossAxisAlignment(id, value);
       });
     },
-    [mixedProperties.crossAxisAlignment?.ids, __actions]
+    [
+      mixedProperties.crossAxisAlignment?.ids,
+      instance.changeFlexContainerNodeCrossAxisAlignment,
+    ]
   );
 
   const cornerRadius = useCallback(
     (value: grida.program.nodes.i.IRectangleCorner["cornerRadius"]) => {
       mixedProperties.cornerRadius?.ids.forEach((id) => {
-        __actions.changeNodeCornerRadius(id, value);
+        instance.changeNodeCornerRadius(id, value);
       });
     },
-    [mixedProperties.cornerRadius?.ids, __actions]
+    [mixedProperties.cornerRadius?.ids, instance.changeNodeCornerRadius]
   );
 
   const cursor = useCallback(
     (value: cg.SystemMouseCursor) => {
       mixedProperties.cursor?.ids.forEach((id) => {
-        __actions.changeNodeMouseCursor(id, value);
+        instance.changeNodeMouseCursor(id, value);
       });
     },
-    [mixedProperties.cursor?.ids, __actions]
+    [mixedProperties.cursor?.ids, instance.changeNodeMouseCursor]
   );
 
   const actions = useMemo(
@@ -1015,11 +619,7 @@ export function useSelectionPaints() {
     document: state.document,
     document_ctx: state.document_ctx,
   }));
-  const dispatch = React.useCallback(
-    (action: Action) => instance.dispatch(action),
-    [instance]
-  );
-  const __actions = __useNodeActions(dispatch);
+
   const selection = state.selection;
 
   const ids = useMemo(
@@ -1052,7 +652,7 @@ export function useSelectionPaints() {
               // "stroke"
             ].includes(key);
           },
-          compare: compareProperty,
+          compare: compareNodeProperty,
           mixed: grida.mixed,
         }
       ),
@@ -1072,10 +672,10 @@ export function useSelectionPaints() {
     ) => {
       const group = paints[index];
       group.ids.forEach((id) => {
-        __actions.changeNodeFill(id, value);
+        instance.changeNodeFill(id, value);
       });
     },
-    [paints, __actions]
+    [paints, instance.changeNodeFill]
   );
 
   return useMemo(() => {
@@ -1088,7 +688,7 @@ export function useSelectionPaints() {
   }, [selection, paints, ids, setPaint]);
 }
 
-export function useEditorFlags() {
+export function useEditorFlagsState() {
   const instance = useCurrentEditor();
   const flags = useEditorState(instance, (state) => state.flags);
   const debug = useEditorState(instance, (state) => state.debug);
@@ -1101,1471 +701,177 @@ export function useEditorFlags() {
   }, [flags, debug]);
 }
 
-export function useDocument(): editor.api.IDocumentEditorActions &
-  editor.api.INodeChangeActions & {
-    selection: editor.state.IEditorState["selection"];
-    document: editor.state.IEditorState["document"];
-    document_ctx: editor.state.IEditorState["document_ctx"];
-    scenes: editor.state.IEditorState["document"]["scenes"];
-    scene_id: editor.state.IEditorState["scene_id"];
-    hovered_node_id: editor.state.IEditorState["hovered_node_id"];
-    templates: editor.state.IEditorState["templates"];
-    clipboardColor: editor.state.IEditorState["user_clipboard_color"];
-  } {
-  const instance = useCurrentEditor();
-  const state = useEditorState(instance, (state) => ({
+interface UseSelectionState {
+  selection: editor.state.IEditorState["selection"];
+  hovered_node_id: editor.state.IEditorState["hovered_node_id"];
+}
+
+export function useSelectionState(): UseSelectionState {
+  const editor = useCurrentEditor();
+  return useEditorState<UseSelectionState>(editor, (state) => ({
     selection: state.selection,
-    document: state.document,
-    document_ctx: state.document_ctx,
-    scenes: state.document.scenes,
-    scene_id: state.scene_id,
     hovered_node_id: state.hovered_node_id,
-    templates: state.templates,
-    user_clipboard_color: state.user_clipboard_color,
   }));
+}
 
-  const dispatch = React.useCallback(
-    (action: Action) => instance.dispatch(action),
-    [instance]
-  );
-
-  const {
-    selection,
-    document,
-    document_ctx,
-    scene_id,
-    scenes,
-    hovered_node_id,
-    templates,
-    user_clipboard_color,
-  } = state;
+interface UseDocumentState {
+  document: editor.state.IEditorState["document"];
+  document_ctx: editor.state.IEditorState["document_ctx"];
+}
 
-  const nodeActions = __useNodeActions(dispatch);
+export function useDocumentState(): UseDocumentState {
+  const editor = useCurrentEditor();
+  return useEditorState<UseDocumentState>(
+    editor,
+    (state) =>
+      ({
+        document: state.document,
+        document_ctx: state.document_ctx,
+      }) satisfies UseDocumentState
+  );
+}
 
-  const createNodeId: editor.api.IDocumentEditorActions["createNodeId"] =
-    useCallback(() => {
-      return nid();
-    }, []);
+type UseSceneState = grida.program.document.Scene & {
+  selection: editor.state.IEditorState["selection"];
+  hovered_node_id: editor.state.IEditorState["hovered_node_id"];
+  hovered_vertex_idx: editor.state.IEditorState["hovered_vertex_idx"];
+  document_ctx: editor.state.IEditorState["document_ctx"];
+};
 
-  const loadScene: editor.api.IDocumentEditorActions["loadScene"] = useCallback(
-    (scene: string) => {
-      dispatch({
-        type: "load",
-        scene,
-      });
-    },
-    [dispatch]
-  );
+export function useSceneState(scene_id: string): UseSceneState {
+  const editor = useCurrentEditor();
+  return useEditorState(editor, (state) => {
+    return {
+      selection: state.selection,
+      hovered_node_id: state.hovered_node_id,
+      hovered_vertex_idx: state.hovered_vertex_idx,
+      document_ctx: state.document_ctx,
+      ...state.document.scenes[scene_id],
+    } satisfies Omit<UseSceneState, "setBackgroundColor">;
+  });
+}
 
-  const createScene: editor.api.IDocumentEditorActions["createScene"] =
-    useCallback(
-      (scene?: grida.program.document.SceneInit) => {
-        dispatch({
-          type: "scenes/new",
-          scene,
-        });
-      },
-      [dispatch]
-    );
+export function useCurrentSceneState(): UseSceneState {
+  const editor = useCurrentEditor();
+  const scene_id = useEditorState(editor, (state) => {
+    return state.scene_id!;
+  });
+  return useSceneState(scene_id);
+}
 
-  const deleteScene: editor.api.IDocumentEditorActions["deleteScene"] =
-    useCallback(
-      (scene: string) => {
-        dispatch({
-          type: "scenes/delete",
-          scene,
-        });
-      },
-      [dispatch]
-    );
+export function useTransformState() {
+  const editor = useCurrentEditor();
+  const transform = useEditorState(editor, (state) => state.transform);
 
-  const duplicateScene: editor.api.IDocumentEditorActions["duplicateScene"] =
-    useCallback(
-      (scene: string) => {
-        dispatch({
-          type: "scenes/duplicate",
-          scene,
-        });
-      },
-      [dispatch]
-    );
+  return useMemo(() => {
+    const scaleX = transform[0][0];
+    const scaleY = transform[1][1];
+    const matrix = `matrix(${transform[0][0]}, ${transform[1][0]}, ${transform[0][1]}, ${transform[1][1]}, ${transform[0][2]}, ${transform[1][2]})`;
+    return {
+      transform,
+      scaleX,
+      scaleY,
+      style: {
+        transformOrigin: "0 0",
+        transform: matrix,
+      } as React.CSSProperties,
+    };
+  }, [transform]);
+}
 
-  const renameScene: editor.api.IDocumentEditorActions["renameScene"] =
-    useCallback(
-      (scene: string, name: string) => {
-        dispatch({
-          type: "scenes/change/name",
-          scene,
-          name,
-        });
-      },
-      [dispatch]
-    );
+export function useEventTargetCSSCursor() {
+  const editor = useCurrentEditor();
+  const tool = useEditorState(editor, (state) => state.tool);
 
-  const hoverNode: editor.api.IDocumentEditorActions["hoverNode"] = useCallback(
-    (node_id: string, event: "enter" | "leave") => {
-      dispatch({
-        type: "hover",
-        target: node_id,
-        event,
-      });
-    },
-    [dispatch]
-  );
+  return useMemo(() => {
+    switch (tool.type) {
+      case "cursor":
+        return "default";
+      case "hand":
+        return "grab";
+      case "zoom":
+        return "zoom-in";
+      case "insert": {
+        switch (tool.node) {
+          case "text":
+            return "text";
+          case "rectangle":
+          case "ellipse":
+          case "container":
+          case "image":
+            return "crosshair";
+        }
+      }
+      case "draw":
+        return "crosshair";
+      case "path":
+        return "crosshair";
+      case "brush":
+      case "eraser":
+      case "flood-fill":
+        return "cell";
+    }
+  }, [tool]);
+}
 
-  const hoverEnterNode: editor.api.IDocumentEditorActions["hoverEnterNode"] =
-    useCallback((node_id: string) => hoverNode(node_id, "enter"), [hoverNode]);
+export function usePointerState(): editor.state.IEditorState["pointer"] {
+  const editor = useCurrentEditor();
+  return useEditorState(editor, (state) => state.pointer);
+}
 
-  const hoverLeaveNode: editor.api.IDocumentEditorActions["hoverLeaveNode"] =
-    useCallback((node_id: string) => hoverNode(node_id, "leave"), [hoverNode]);
+interface UseToolState {
+  tool: editor.state.IEditorState["tool"];
+  content_edit_mode: editor.state.IEditorState["content_edit_mode"];
+}
 
-  const select: editor.api.IDocumentEditorActions["select"] = useCallback(
-    (...selectors: grida.program.document.Selector[]) =>
-      dispatch({
-        type: "select",
-        selectors: selectors,
-      }),
-    [dispatch]
+export function useToolState(): UseToolState {
+  const editor = useCurrentEditor();
+  const tool = useEditorState(editor, (state) => state.tool);
+  const content_edit_mode = useEditorState(
+    editor,
+    (state) => state.content_edit_mode
   );
 
-  const blur: editor.api.IDocumentEditorActions["blur"] = useCallback(
-    () =>
-      dispatch({
-        type: "blur",
-      }),
-    [dispatch]
-  );
+  return useMemo(() => {
+    return {
+      tool,
+      content_edit_mode,
+    };
+  }, [tool, content_edit_mode]);
+}
 
-  const undo: editor.api.IDocumentEditorActions["undo"] = useCallback(() => {
-    dispatch({
-      type: "undo",
-    });
-  }, [dispatch]);
+export function useBrushState() {
+  const editor = useCurrentEditor();
+  return useEditorState(editor, (state) => state.brush);
+}
 
-  const redo: editor.api.IDocumentEditorActions["redo"] = useCallback(() => {
-    dispatch({
-      type: "redo",
-    });
-  }, [dispatch]);
+interface UseMultipleSelectionOverlayClick {
+  multipleSelectionOverlayClick: (
+    selection: string[],
+    event: MouseEvent
+  ) => void;
+}
 
-  const cut: editor.api.IDocumentEditorActions["cut"] = useCallback(
-    (target: "selection" | (string & {}) = "selection") => {
-      dispatch({
-        type: "cut",
-        target: target,
-      });
+export function useMultipleSelectionOverlayClick(): UseMultipleSelectionOverlayClick {
+  const instance = useCurrentEditor();
+  const dispatch = useCallback(
+    (action: Action) => {
+      instance.dispatch(action);
     },
-    [dispatch]
+    [instance]
   );
 
-  const copy: editor.api.IDocumentEditorActions["copy"] = useCallback(
-    (target: "selection" | (string & {}) = "selection") => {
-      dispatch({
-        type: "copy",
-        target: target,
-      });
-    },
-    [dispatch]
-  );
-
-  const paste: editor.api.IDocumentEditorActions["paste"] = useCallback(() => {
-    dispatch({
-      type: "paste",
-    });
-  }, [dispatch]);
-
-  const duplicate: editor.api.IDocumentEditorActions["duplicate"] = useCallback(
-    (target: "selection" | (string & {}) = "selection") => {
-      dispatch({
-        type: "duplicate",
-        target,
-      });
-    },
-    [dispatch]
-  );
-
-  const clipboardColor = state.user_clipboard_color;
-
-  const setClipboardColor: editor.api.IDocumentEditorActions["setClipboardColor"] =
-    useCallback(
-      (color: cg.RGBA8888) => {
-        dispatch({
-          type: "clip/color",
-          color,
-        });
-      },
-      [dispatch]
-    );
-
-  const deleteNode: editor.api.IDocumentEditorActions["deleteNode"] =
-    useCallback(
-      (target: "selection" | (string & {}) = "selection") => {
-        dispatch({
-          type: "delete",
-          target: target,
-        });
-      },
-      [dispatch]
-    );
-
-  const getNodeById: editor.api.IDocumentEditorActions["getNodeById"] =
-    useCallback(
-      (node_id: string): grida.program.nodes.Node => {
-        return editor.dq.__getNodeById(state, node_id);
-      },
-      [state.document.nodes]
-    );
-
-  const getNodeDepth: editor.api.IDocumentEditorActions["getNodeDepth"] =
-    useCallback(
-      (node_id: string) => {
-        return editor.dq.getDepth(state.document_ctx, node_id);
-      },
-      [state.document_ctx]
-    );
-
-  const getNodeAbsoluteRotation: editor.api.IDocumentEditorActions["getNodeAbsoluteRotation"] =
-    useCallback(
-      (node_id: string) => {
-        const parent_ids = editor.dq.getAncestors(state.document_ctx, node_id);
-
-        let rotation = 0;
-        // Calculate the absolute rotation
-        try {
-          for (const parent_id of parent_ids) {
-            const parent_node = getNodeById(parent_id);
-            assert(parent_node, `parent node not found: ${parent_id}`);
-            if ("rotation" in parent_node) {
-              rotation += parent_node.rotation ?? 0;
-            }
-          }
-
-          // finally, add the node's own rotation
-          const node = getNodeById(node_id);
-          assert(node, `node not found: ${node_id}`);
-          if ("rotation" in node) {
-            rotation += node.rotation ?? 0;
-          }
-        } catch (e) {
-          reportError(e);
-        }
-
-        return rotation;
-      },
-      [state.document_ctx, getNodeById]
-    );
-
-  const insertNode: editor.api.IDocumentEditorActions["insertNode"] =
-    useCallback(
-      (prototype: grida.program.nodes.NodePrototype) => {
-        dispatch({
-          type: "insert",
-          prototype,
-        });
-      },
-      [dispatch]
-    );
-
-  const __gesture_nudge = useCallback(
-    (state: "on" | "off") => {
-      dispatch({
-        type: "gesture/nudge",
-        state,
-      });
-    },
-    [dispatch]
-  );
-
-  const __gesture_nudge_debounced = __useGestureNudgeState(dispatch);
-
-  const nudge: editor.api.IDocumentEditorActions["nudge"] = useCallback(
-    (
-      target: "selection" | (string & {}) = "selection",
-      axis: "x" | "y",
-      delta: number = 1,
-      config: editor.api.NudgeUXConfig = {
-        delay: 500,
-        gesture: true,
-      }
-    ) => {
-      const { gesture = true, delay = 500 } = config;
-
-      if (gesture) {
-        // Trigger gesture
-        __gesture_nudge("on");
-
-        // Debounce to turn off gesture
-        __gesture_nudge_debounced("off", delay);
-      }
-
-      dispatch({
-        type: "nudge",
-        delta,
-        axis,
-        target,
-      });
-    },
-    [dispatch]
-  );
-
-  const nudgeResize: editor.api.IDocumentEditorActions["nudgeResize"] =
-    useCallback(
-      (
-        target: "selection" | (string & {}) = "selection",
-        axis: "x" | "y",
-        delta: number = 1
-      ) => {
-        dispatch({
-          type: "nudge-resize",
-          delta,
-          axis,
-          target,
-        });
-      },
-      [dispatch]
-    );
-
-  const a11yarrow: editor.api.IDocumentEditorActions["a11yarrow"] = useCallback(
-    (
-      target: "selection" | (string & {}) = "selection",
-      direction: "up" | "down" | "left" | "right",
-      shiftKey: boolean = false,
-      config: editor.api.NudgeUXConfig = {
-        delay: 500,
-        gesture: true,
-      }
-    ) => {
-      const { gesture = true, delay = 500 } = config;
-
-      const a11ytypes = {
-        up: "a11y/up",
-        down: "a11y/down",
-        left: "a11y/left",
-        right: "a11y/right",
-      } as const;
-
-      if (gesture) {
-        // Trigger gesture
-        __gesture_nudge("on");
-
-        // Debounce to turn off gesture
-        __gesture_nudge_debounced("off", delay);
-      }
-
-      dispatch({
-        type: a11ytypes[direction],
-        target,
-        shiftKey,
-      });
-    },
-    [dispatch]
-  );
-
-  const align: editor.api.IDocumentEditorActions["align"] = useCallback(
-    (
-      target: "selection" | (string & {}) = "selection",
-      alignment: {
-        horizontal?: "none" | "min" | "max" | "center";
-        vertical?: "none" | "min" | "max" | "center";
-      }
-    ) => {
-      dispatch({
-        type: "align",
-        target,
-        alignment,
-      });
-    },
-    [dispatch]
-  );
-
-  const order: editor.api.IDocumentEditorActions["order"] = useCallback(
-    (
-      target: "selection" | (string & {}) = "selection",
-      order: "back" | "front" | number
-    ) => {
-      dispatch({
-        type: "order",
-        target: target,
-        order,
-      });
-    },
-    [dispatch]
-  );
-
-  const mv: editor.api.IDocumentEditorActions["mv"] = useCallback(
-    (source: string[], target: string, index?: number) => {
-      dispatch({
-        type: "mv",
-        source,
-        target,
-        index,
-      });
-    },
-    [dispatch]
-  );
-
-  const distributeEvenly: editor.api.IDocumentEditorActions["distributeEvenly"] =
-    useCallback(
-      (target: "selection" | string[] = "selection", axis: "x" | "y") => {
-        dispatch({
-          type: "distribute-evenly",
-          target,
-          axis,
-        });
-      },
-      [dispatch]
-    );
-
-  const autoLayout: editor.api.IDocumentEditorActions["autoLayout"] =
-    useCallback(
-      (target: "selection" | string[] = "selection") => {
-        dispatch({
-          type: "autolayout",
-          target,
-        });
-      },
-      [dispatch]
-    );
-
-  const contain: editor.api.IDocumentEditorActions["contain"] = useCallback(
-    (target: "selection" | string[] = "selection") => {
-      dispatch({
-        type: "contain",
-        target,
-      });
-    },
-    [dispatch]
-  );
-
-  const configureSurfaceRaycastTargeting: editor.api.IDocumentEditorActions["configureSurfaceRaycastTargeting"] =
-    useCallback(
-      (config: Partial<editor.state.HitTestingConfig>) => {
-        dispatch({
-          type: "config/surface/raycast-targeting",
-          config,
-        });
-      },
-      [dispatch]
-    );
-
-  const configureMeasurement: editor.api.IDocumentEditorActions["configureMeasurement"] =
-    useCallback(
-      (measurement: "on" | "off") => {
-        dispatch({
-          type: "config/surface/measurement",
-          measurement,
-        });
-      },
-      [dispatch]
-    );
-
-  const configureTranslateWithCloneModifier: editor.api.IDocumentEditorActions["configureTranslateWithCloneModifier"] =
-    useCallback(
-      (translate_with_clone: "on" | "off") => {
-        dispatch({
-          type: "config/modifiers/translate-with-clone",
-          translate_with_clone,
-        });
-      },
-      [dispatch]
-    );
-
-  const configureTranslateWithAxisLockModifier: editor.api.IDocumentEditorActions["configureTranslateWithAxisLockModifier"] =
-    useCallback(
-      (tarnslate_with_axis_lock: "on" | "off") => {
-        dispatch({
-          type: "config/modifiers/translate-with-axis-lock",
-          tarnslate_with_axis_lock,
-        });
-      },
-      [dispatch]
-    );
-
-  const configureTransformWithCenterOriginModifier: editor.api.IDocumentEditorActions["configureTransformWithCenterOriginModifier"] =
-    useCallback(
-      (transform_with_center_origin: "on" | "off") => {
-        dispatch({
-          type: "config/modifiers/transform-with-center-origin",
-          transform_with_center_origin,
-        });
-      },
-      [dispatch]
-    );
-
-  const configureTransformWithPreserveAspectRatioModifier: editor.api.IDocumentEditorActions["configureTransformWithPreserveAspectRatioModifier"] =
-    useCallback(
-      (transform_with_preserve_aspect_ratio: "on" | "off") => {
-        dispatch({
-          type: "config/modifiers/transform-with-preserve-aspect-ratio",
-          transform_with_preserve_aspect_ratio,
-        });
-      },
-      [dispatch]
-    );
-
-  const configureRotateWithQuantizeModifier: editor.api.IDocumentEditorActions["configureRotateWithQuantizeModifier"] =
-    useCallback(
-      (rotate_with_quantize: number | "off") => {
-        dispatch({
-          type: "config/modifiers/rotate-with-quantize",
-          rotate_with_quantize,
-        });
-      },
-      [dispatch]
-    );
-
-  const toggleActive: editor.api.IDocumentEditorActions["toggleActive"] =
-    useCallback(
-      (target: "selection" | (string & {}) = "selection") => {
-        const target_ids = target === "selection" ? selection : [target];
-        target_ids.forEach((node_id) => {
-          dispatch({
-            type: "node/toggle/active",
-            node_id: node_id,
-          });
-        });
-      },
-      [dispatch, selection]
-    );
-
-  const toggleLocked: editor.api.IDocumentEditorActions["toggleLocked"] =
-    useCallback(
-      (target: "selection" | (string & {}) = "selection") => {
-        const target_ids = target === "selection" ? selection : [target];
-        target_ids.forEach((node_id) => {
-          dispatch({
-            type: "node/toggle/locked",
-            node_id: node_id,
-          });
-        });
-      },
-      [dispatch, selection]
-    );
-
-  const toggleBold: editor.api.IDocumentEditorActions["toggleBold"] =
-    useCallback(
-      (target: "selection" | (string & {}) = "selection") => {
-        const target_ids = target === "selection" ? selection : [target];
-        target_ids.forEach((node_id) => {
-          dispatch({
-            type: "node/toggle/bold",
-            node_id: node_id,
-          });
-        });
-      },
-      [dispatch, selection]
-    );
-
-  const setOpacity: editor.api.IDocumentEditorActions["setOpacity"] =
-    useCallback(
-      (target: "selection" | (string & {}) = "selection", opacity: number) => {
-        const target_ids = target === "selection" ? selection : [target];
-        target_ids.forEach((node_id) => {
-          dispatch({
-            type: "node/change/opacity",
-            node_id: node_id,
-            opacity: { type: "set", value: opacity },
-          });
-        });
-      },
-      [dispatch, selection]
-    );
-
-  const schemaDefineProperty: editor.api.IDocumentEditorActions["schemaDefineProperty"] =
-    useCallback(
-      (name?: string, definition?: grida.program.schema.PropertyDefinition) => {
-        dispatch({
-          type: "document/properties/define",
-          key: name,
-          definition: definition,
-        });
-      },
-      [dispatch]
-    );
-
-  const schemaRenameProperty: editor.api.IDocumentEditorActions["schemaRenameProperty"] =
-    useCallback(
-      (key: string, newName: string) => {
-        dispatch({
-          type: "document/properties/rename",
-          key: key,
-          newKey: newName,
-        });
-      },
-      [dispatch]
-    );
-
-  const schemaUpdateProperty: editor.api.IDocumentEditorActions["schemaUpdateProperty"] =
-    useCallback(
-      (key: string, definition: grida.program.schema.PropertyDefinition) => {
-        dispatch({
-          type: "document/properties/update",
-          key: key,
-          definition: definition,
-        });
-      },
-      [dispatch]
-    );
-
-  const schemaPutProperty: editor.api.IDocumentEditorActions["schemaPutProperty"] =
-    useCallback(
-      (key: string, definition: grida.program.schema.PropertyDefinition) => {
-        dispatch({
-          type: "document/properties/put",
-          key: key,
-          definition: definition,
-        });
-      },
-      [dispatch]
-    );
-
-  const schemaDeleteProperty: editor.api.IDocumentEditorActions["schemaDeleteProperty"] =
-    useCallback(
-      (key: string) => {
-        dispatch({ type: "document/properties/delete", key: key });
-      },
-      [dispatch]
-    );
-
-  return useMemo(() => {
-    return {
-      selection,
-      document,
-      document_ctx,
-      scene_id,
-      scenes,
-      hovered_node_id,
-      templates,
-      user_clipboard_color,
-      //
-      loadScene,
-      createScene,
-      deleteScene,
-      duplicateScene,
-      renameScene,
-
-      //
-      hoverNode,
-      hoverEnterNode,
-      hoverLeaveNode,
-      //
-      select,
-      blur,
-      undo,
-      redo,
-      cut,
-      copy,
-      paste,
-      duplicate,
-      clipboardColor,
-      setClipboardColor,
-      deleteNode,
-      nudge,
-      nudgeResize,
-      a11yarrow,
-      align,
-      order,
-      mv,
-      distributeEvenly,
-      autoLayout,
-      contain,
-      configureSurfaceRaycastTargeting,
-      configureMeasurement,
-      configureTranslateWithCloneModifier,
-      configureTranslateWithAxisLockModifier,
-      configureTransformWithCenterOriginModifier,
-      configureTransformWithPreserveAspectRatioModifier,
-      configureRotateWithQuantizeModifier,
-      //
-      toggleActive,
-      toggleLocked,
-      toggleBold,
-      //
-      setOpacity,
-      //
-      createNodeId,
-      getNodeById,
-      getNodeDepth,
-      getNodeAbsoluteRotation,
-      insertNode,
-      ...nodeActions,
-      schemaDefineProperty,
-      schemaRenameProperty,
-      schemaUpdateProperty,
-      schemaPutProperty,
-      schemaDeleteProperty,
-    };
-  }, [
-    selection,
-    document,
-    document_ctx,
-    scene_id,
-    scenes,
-    hovered_node_id,
-    templates,
-    user_clipboard_color,
-    //
-    scenes,
-    scene_id,
-    loadScene,
-    createScene,
-    deleteScene,
-    duplicateScene,
-    renameScene,
-    //
-    hoverNode,
-    hoverEnterNode,
-    hoverLeaveNode,
-    //
-    select,
-    blur,
-    undo,
-    redo,
-    cut,
-    copy,
-    paste,
-    duplicate,
-    clipboardColor,
-    setClipboardColor,
-    deleteNode,
-    nudge,
-    nudgeResize,
-    a11yarrow,
-    align,
-    order,
-    mv,
-    distributeEvenly,
-    autoLayout,
-    contain,
-    configureSurfaceRaycastTargeting,
-    configureMeasurement,
-    configureTranslateWithCloneModifier,
-    configureTranslateWithAxisLockModifier,
-    configureTransformWithCenterOriginModifier,
-    configureTransformWithPreserveAspectRatioModifier,
-    configureRotateWithQuantizeModifier,
-    //
-    toggleActive,
-    toggleLocked,
-    toggleBold,
-    //
-    setOpacity,
-    //
-    createNodeId,
-    getNodeById,
-    getNodeDepth,
-    getNodeAbsoluteRotation,
-    insertNode,
-    nodeActions,
-    schemaDefineProperty,
-    schemaRenameProperty,
-    schemaUpdateProperty,
-    schemaPutProperty,
-    schemaDeleteProperty,
-  ]);
-}
-
-type UseScene = grida.program.document.Scene & {
-  selection: editor.state.IEditorState["selection"];
-  hovered_node_id: editor.state.IEditorState["hovered_node_id"];
-  hovered_vertex_idx: editor.state.IEditorState["hovered_vertex_idx"];
-  document_ctx: editor.state.IEditorState["document_ctx"];
-  setBackgroundColor: (
-    backgroundColor: grida.program.document.ISceneBackground["backgroundColor"]
-  ) => void;
-};
-
-export function useScene(scene_id: string): UseScene {
-  const editor = useCurrentEditor();
-  const state = useEditorState(editor, (state) => {
-    return {
-      selection: state.selection,
-      hovered_node_id: state.hovered_node_id,
-      hovered_vertex_idx: state.hovered_vertex_idx,
-      document_ctx: state.document_ctx,
-      ...state.document.scenes[scene_id],
-    } satisfies Omit<UseScene, "setBackgroundColor">;
-  });
-
-  const dispatch = React.useCallback(
-    (action: Action) => {
-      editor.dispatch(action);
-    },
-    [editor]
-  );
-
-  const setBackgroundColor = useCallback(
-    (
-      backgroundColor: grida.program.document.ISceneBackground["backgroundColor"]
-    ) => {
-      if (!scene_id) return;
-      dispatch({
-        type: "scenes/change/background-color",
-        scene: scene_id,
-        backgroundColor,
-      });
-    },
-    [dispatch, scene_id]
-  );
-
-  return {
-    ...state,
-    setBackgroundColor,
-  };
-}
-
-export function useCurrentScene(): UseScene {
-  const editor = useCurrentEditor();
-  const scene_id = useEditorState(editor, (state) => {
-    return state.scene_id!;
-  });
-  return useScene(scene_id);
-}
-
-function animateTransformTo(
-  from: cmath.Transform,
-  to: cmath.Transform,
-  update: (t: cmath.Transform) => void
-) {
-  const duration = 200; // ms
-  const start = performance.now();
-
-  function lerp(a: number, b: number, t: number) {
-    return a + (b - a) * t;
-  }
-
-  function step(now: number) {
-    const elapsed = now - start;
-    const progress = Math.min(elapsed / duration, 1);
-
-    const next: cmath.Transform = [
-      [0, 0, 0],
-      [0, 0, 0],
-    ] as cmath.Transform;
-
-    for (let i = 0; i < 2; i++) {
-      for (let j = 0; j < 3; j++) {
-        next[i][j] = lerp(from[i][j], to[i][j], progress);
-      }
-    }
-
-    update(next);
-
-    if (progress < 1) {
-      requestAnimationFrame(step);
-    }
-  }
-
-  requestAnimationFrame(step);
-}
-
-export function useTransform() {
-  const instance = useCurrentEditor();
-  const scene = useCurrentScene();
-  const transform = useEditorState(instance, (state) => state.transform);
-  const dispatch = useCallback(
-    (action: Action) => {
-      instance.dispatch(action);
-    },
-    [instance]
-  );
-
-  const scale = useCallback(
-    (
-      factor: number | cmath.Vector2,
-      origin: cmath.Vector2 | "center" = "center"
-    ) => {
-      const [fx, fy] = typeof factor === "number" ? [factor, factor] : factor;
-      const _scale = transform[0][0];
-      let ox, oy: number;
-      if (origin === "center") {
-        // Canvas size (you need to know or pass this)
-        const { width, height } = domapi.get_viewport_rect();
-
-        // Calculate the absolute transform origin
-        ox = width / 2;
-        oy = height / 2;
-      } else {
-        [ox, oy] = origin;
-      }
-
-      const sx = cmath.clamp(
-        fx,
-        editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MIN,
-        editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MAX
-      );
-
-      const sy = cmath.clamp(
-        fy,
-        editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MIN,
-        editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MAX
-      );
-
-      const [tx, ty] = cmath.transform.getTranslate(transform);
-
-      // calculate the offset that should be applied with scale with css transform.
-      const [newx, newy] = [
-        ox - (ox - tx) * (sx / _scale),
-        oy - (oy - ty) * (sy / _scale),
-      ];
-
-      const next: cmath.Transform = [
-        [sx, transform[0][1], newx],
-        [transform[1][0], sy, newy],
-      ];
-
-      dispatch({
-        type: "transform",
-        transform: next,
-      });
-    },
-    [dispatch, transform]
-  );
-
-  /**
-   * Transform to fit
-   */
-  const fit = useCallback(
-    (
-      selector: grida.program.document.Selector,
-      options: {
-        margin?: number | [number, number, number, number];
-        animate?: boolean;
-      } = {
-        margin: 64,
-        animate: false,
-      }
-    ) => {
-      const ids = editor.dq.querySelector(
-        scene.document_ctx,
-        scene.selection,
-        selector
-      );
-
-      const cdom = new domapi.CanvasDOM(transform);
-
-      const rects = ids
-        .map((id) => cdom.getNodeBoundingRect(id))
-        .filter((r) => r) as cmath.Rectangle[];
-
-      if (rects.length === 0) {
-        return;
-      }
-
-      const area = cmath.rect.union(rects);
-
-      const _view = domapi.get_viewport_rect();
-      const view = { x: 0, y: 0, width: _view.width, height: _view.height };
-
-      const next_transform = cmath.ext.viewport.transformToFit(
-        view,
-        area,
-        options.margin
-      );
-
-      if (options.animate) {
-        animateTransformTo(transform, next_transform, (t) => {
-          dispatch({
-            type: "transform",
-            transform: t,
-          });
-        });
-      } else {
-        dispatch({
-          type: "transform",
-          transform: next_transform,
-        });
-      }
-    },
-    [dispatch, transform, scene.document_ctx, scene.selection, scene.children]
-  );
-
-  const zoomIn = useCallback(() => {
-    const prevscale = transform[0][0];
-    const nextscale = cmath.quantize(prevscale * 2, 0.01);
-
-    scale(nextscale);
-    //
-  }, [scale, transform]);
-
-  const zoomOut = useCallback(() => {
-    const prevscale = transform[0][0];
-    const nextscale = cmath.quantize(prevscale / 2, 0.01);
-
-    scale(nextscale);
-    //
-  }, [scale, transform]);
-
-  const setTransform = useCallback(
-    (transform: cmath.Transform) => {
-      dispatch({
-        type: "transform",
-        transform,
-      });
-    },
-    [dispatch]
-  );
-
-  return useMemo(() => {
-    const scaleX = transform[0][0];
-    const scaleY = transform[1][1];
-    const matrix = `matrix(${transform[0][0]}, ${transform[1][0]}, ${transform[0][1]}, ${transform[1][1]}, ${transform[0][2]}, ${transform[1][2]})`;
-    return {
-      transform,
-      scaleX,
-      scaleY,
-      style: {
-        transformOrigin: "0 0",
-        transform: matrix,
-      } as React.CSSProperties,
-      setTransform,
-      scale,
-      fit,
-      zoomIn,
-      zoomOut,
-    };
-  }, [transform, setTransform, scale, fit, zoomIn, zoomOut]);
-}
-
-function throttle<T extends (...args: any[]) => void>(
-  func: T,
-  limit: number
-): T {
-  let inThrottle: boolean;
-  return function (this: any, ...args: Parameters<T>) {
-    if (!inThrottle) {
-      func.apply(this, args);
-      inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
-    }
-  } as T;
-}
-
-export function useEventTargetCSSCursor() {
-  const editor = useCurrentEditor();
-  const tool = useEditorState(editor, (state) => state.tool);
-
-  return useMemo(() => {
-    switch (tool.type) {
-      case "cursor":
-        return "default";
-      case "hand":
-        return "grab";
-      case "zoom":
-        return "zoom-in";
-      case "insert": {
-        switch (tool.node) {
-          case "text":
-            return "text";
-          case "rectangle":
-          case "ellipse":
-          case "container":
-          case "image":
-            return "crosshair";
-        }
-      }
-      case "draw":
-        return "crosshair";
-      case "path":
-        return "crosshair";
-      case "brush":
-      case "eraser":
-      case "flood-fill":
-        return "cell";
-    }
-  }, [tool]);
-}
-
-export function usePointer() {
-  const editor = useCurrentEditor();
-  return useEditorState(editor, (state) => state.pointer);
-}
-
-interface UseTool {
-  tool: editor.state.IEditorState["tool"];
-  content_edit_mode: editor.state.IEditorState["content_edit_mode"];
-  setTool: (tool: editor.state.ToolMode) => void;
-  tryExitContentEditMode: () => void;
-  tryToggleContentEditMode: () => void;
-  tryEnterContentEditMode: () => void;
-}
-
-export function useTool(): UseTool {
-  const editor = useCurrentEditor();
-  const tool = useEditorState(editor, (state) => state.tool);
-  const content_edit_mode = useEditorState(
-    editor,
-    (state) => state.content_edit_mode
-  );
-
-  const dispatch = useCallback(
-    (action: Action) => {
-      editor.dispatch(action);
-    },
-    [editor]
-  );
-
-  const setTool = useCallback(
-    (tool: editor.state.ToolMode) => {
-      dispatch({
-        type: "surface/tool",
-        tool: tool,
-      });
-    },
-    [dispatch]
-  );
-
-  /**
-   * Try to enter content edit mode - only works when the selected node is a text or vector node
-   *
-   * when triggered on such invalid context, it should be a no-op
-   */
-  const tryEnterContentEditMode = useCallback(() => {
-    dispatch({
-      type: "surface/content-edit-mode/try-enter",
-    });
-  }, [dispatch]);
-
-  const tryExitContentEditMode = useCallback(() => {
-    dispatch({
-      type: "surface/content-edit-mode/try-exit",
-    });
-  }, [dispatch]);
-
-  const tryToggleContentEditMode = useCallback(() => {
-    if (content_edit_mode) {
-      tryExitContentEditMode();
-    } else {
-      tryEnterContentEditMode();
-    }
-  }, [content_edit_mode]);
-
-  return useMemo(() => {
-    return {
-      tool,
-      setTool,
-      content_edit_mode,
-      tryEnterContentEditMode,
-      tryExitContentEditMode,
-      tryToggleContentEditMode,
-    };
-  }, [
-    tool,
-    setTool,
-    content_edit_mode,
-    tryEnterContentEditMode,
-    tryExitContentEditMode,
-    tryToggleContentEditMode,
-  ]);
-}
-
-export function useBrush() {
-  const editor = useCurrentEditor();
-  const brush = useEditorState(editor, (state) => state.brush);
-
-  const dispatch = useCallback(
-    (action: Action) => {
-      editor.dispatch(action);
-    },
-    [editor]
-  );
-
-  const changeBrush = useCallback(
-    (brush: BitmapEditorBrush) => {
-      dispatch({
-        type: "surface/brush",
-        brush,
-      });
-    },
-    [dispatch]
-  );
-
-  const changeBrushSize = useCallback(
-    (size: TChange<number>) => {
-      dispatch({
-        type: "surface/brush/size",
-        size,
-      });
-    },
-    [dispatch]
-  );
-
-  const changeBrushOpacity = useCallback(
-    (opacity: TChange<number>) => {
-      dispatch({
-        type: "surface/brush/opacity",
-        opacity,
-      });
-    },
-    [dispatch]
-  );
-
-  return useMemo(() => {
-    return {
-      brush,
-      changeBrush,
-      changeBrushSize,
-      changeBrushOpacity,
-    };
-  }, [brush, changeBrush, changeBrushSize, changeBrushOpacity]);
-}
-
-interface UseEventTarget {
-  transform: editor.state.IEditorState["transform"];
-  gesture: editor.state.IEditorState["gesture"];
-  dragging: editor.state.IEditorState["dragging"];
-  hovered_node_id: editor.state.IEditorState["hovered_node_id"];
-  dropzone: editor.state.IEditorState["dropzone"];
-  surface_snapping: editor.state.IEditorState["surface_snapping"];
-  is_node_transforming: boolean;
-  is_node_translating: boolean;
-  is_node_scaling: boolean;
-
-  selection: editor.state.IEditorState["selection"];
-  marquee: editor.state.IEditorState["marquee"];
-  edges: grida.program.document.Edge2D[];
-  guides: grida.program.document.Guide2D[];
-  pixelgrid: editor.state.IEditorState["pixelgrid"];
-  ruler: editor.state.IEditorState["ruler"];
-
-  // Actions/callbacks (write)
-  zoom: (delta: number, origin: cmath.Vector2) => void;
-  pan: (delta: [number, number]) => void;
-  //
-  setPixelGridState: (state: "on" | "off") => void;
-  setRulerState: (state: "on" | "off") => void;
-  deleteGuide: (idx: number) => void;
-
-  startGuideGesture: (axis: cmath.Axis, idx: number | -1) => void;
-  startScaleGesture: (
-    selection: string | string[],
-    direction: cmath.CardinalDirection
-  ) => void;
-  startSortGesture: (selection: string | string[], node_id: string) => void;
-  startGapGesture: (selection: string | string[], axis: "x" | "y") => void;
-  startCornerRadiusGesture: (selection: string) => void;
-  startRotateGesture: (selection: string) => void;
-
-  pointerDown: (event: PointerEvent) => void;
-  pointerUp: (event: PointerEvent) => void;
-  pointerMove: (event: PointerEvent) => void;
-
-  click: (event: MouseEvent) => void;
-  doubleClick: (event: MouseEvent) => void;
-
-  dragStart: (event: PointerEvent) => void;
-  dragEnd: (event: PointerEvent) => void;
-  drag: (event: TCanvasEventTargetDragGestureState) => void;
-
-  multipleSelectionOverlayClick: (
-    selection: string[],
-    event: MouseEvent
-  ) => void;
-}
-
-export function useEventTarget(): UseEventTarget {
-  // const [state, dispatch] = __useInternal();
-  const instance = useCurrentEditor();
-  const state = useEditorState(instance, (state) => ({
-    transform: state.transform,
-    surface_snapping: state.surface_snapping,
-    gesture: state.gesture,
-    dragging: state.dragging,
-    hovered_node_id: state.hovered_node_id,
-    dropzone: state.dropzone,
-    selection: state.selection,
-    content_edit_mode: state.content_edit_mode,
-    tool: state.tool,
-    brush: state.brush,
-    marquee: state.marquee,
-    debug: state.debug,
-    pixelgrid: state.pixelgrid,
-    ruler: state.ruler,
-    flags: state.flags,
-  }));
-  const scene = useCurrentScene();
-
-  const dispatch = useCallback(
-    (action: Action) => {
-      instance.dispatch(action);
-    },
-    [instance]
-  );
-
-  const { guides, edges } = scene;
-
-  const {
-    transform,
-    surface_snapping,
-    gesture,
-    dragging,
-    hovered_node_id,
-    dropzone,
-    selection,
-    content_edit_mode,
-    tool,
-    brush,
-    marquee,
-    debug,
-    pixelgrid,
-    ruler,
-    flags,
-  } = state;
-
-  const is_node_transforming = gesture.type !== "idle";
-  const is_node_translating =
-    gesture.type === "translate" ||
-    gesture.type === "sort" ||
-    gesture.type === "nudge" ||
-    gesture.type === "gap";
-  const is_node_scaling = gesture.type === "scale";
-
-  const setRulerState = useCallback(
-    (state: "on" | "off") => {
-      dispatch({
-        type: "surface/ruler",
-        state,
-      });
-    },
-    [dispatch]
-  );
-
-  const setPixelGridState = useCallback(
-    (state: "on" | "off") => {
-      dispatch({
-        type: "surface/pixel-grid",
-        state,
-      });
-    },
-    [dispatch]
-  );
-
-  const _throttled_pointer_move_with_raycast = useCallback(
-    throttle((event: PointerEvent, position) => {
-      // this is throttled - as it is expensive
-      const els = domapi.get_grida_node_elements_from_point(
-        event.clientX,
-        event.clientY
-      );
-
-      dispatch({
-        type: "event-target/event/on-pointer-move-raycast",
-        node_ids_from_point: els.map((n) => n.id),
-        position,
-        shiftKey: event.shiftKey,
-      });
-    }, 30),
-    [dispatch]
-  );
-
-  const __canvas_space_position = (
-    pointer_event: PointerEvent | MouseEvent
-  ) => {
-    const { clientX, clientY } = pointer_event;
-
-    const canvas_rect = domapi.get_viewport_rect();
-    const position = {
-      x: clientX - canvas_rect.left,
-      y: clientY - canvas_rect.top,
-    };
-
-    return position;
-  };
-
-  const zoom = useCallback(
-    (delta: number, origin: cmath.Vector2) => {
-      const _scale = transform[0][0];
-      // the origin point of the zooming point in x, y (surface space)
-      const [ox, oy] = origin;
-
-      // Apply proportional zooming
-      const scale = _scale + _scale * delta;
-
-      const newscale = cmath.clamp(
-        scale,
-        editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MIN,
-        editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MAX
-      );
-      const [tx, ty] = cmath.transform.getTranslate(transform);
-
-      // calculate the offset that should be applied with scale with css transform.
-      const [newx, newy] = [
-        ox - (ox - tx) * (newscale / _scale),
-        oy - (oy - ty) * (newscale / _scale),
-      ];
-
-      const next: cmath.Transform = [
-        [newscale, transform[0][1], newx],
-        [transform[1][0], newscale, newy],
-      ];
-
-      dispatch({
-        type: "transform",
-        transform: next,
-      });
-    },
-    [dispatch, transform]
-  );
-
-  const pan = useCallback(
-    (delta: [dx: number, dy: number]) => {
-      dispatch({
-        type: "transform",
-        transform: cmath.transform.translate(transform, delta),
-      });
-    },
-    [dispatch, transform]
-  );
-
-  const pointerMove = useCallback(
-    (event: PointerEvent) => {
-      const position = __canvas_space_position(event);
-
-      dispatch({
-        type: "event-target/event/on-pointer-move",
-        position_canvas: position,
-        position_client: { x: event.clientX, y: event.clientY },
-      });
-
-      _throttled_pointer_move_with_raycast(event, position);
-    },
-    [dispatch, _throttled_pointer_move_with_raycast]
-  );
-
-  const pointerDown = useCallback(
-    (event: PointerEvent) => {
-      const els = domapi.get_grida_node_elements_from_point(
-        event.clientX,
-        event.clientY
-      );
-
-      dispatch({
-        type: "event-target/event/on-pointer-down",
-        node_ids_from_point: els.map((n) => n.id),
-        shiftKey: event.shiftKey,
-      });
-    },
-    [dispatch]
-  );
-
-  const pointerUp = useCallback(
-    (event: PointerEvent) => {
-      dispatch({
-        type: "event-target/event/on-pointer-up",
-      });
-    },
-    [dispatch]
-  );
-
-  const click = useCallback(
-    (event: MouseEvent) => {
+  //
+  const multipleSelectionOverlayClick = useCallback(
+    (selection: string[], event: MouseEvent) => {
       const els = domapi.get_grida_node_elements_from_point(
         event.clientX,
         event.clientY
       );
 
       dispatch({
-        type: "event-target/event/on-click",
+        type: "event-target/event/multiple-selection-overlay/on-click",
+        selection: selection,
         node_ids_from_point: els.map((n) => n.id),
         shiftKey: event.shiftKey,
       });
@@ -2573,286 +879,140 @@ export function useEventTarget(): UseEventTarget {
     [dispatch]
   );
 
-  const doubleClick = useCallback(
-    (event: MouseEvent) => {
-      dispatch({
-        type: "event-target/event/on-double-click",
-      });
+  return useMemo(() => {
+    return {
+      multipleSelectionOverlayClick,
+    };
+  }, [multipleSelectionOverlayClick]);
+}
+
+interface UseA11yActions {
+  a11yarrow: (
+    target: "selection" | editor.NodeID,
+    direction: "up" | "down" | "left" | "right",
+    shiftKey: boolean,
+    config?: editor.api.NudgeUXConfig
+  ) => void;
+  nudge: (
+    target: "selection" | editor.NodeID,
+    axis: "x" | "y",
+    delta: number,
+    config?: editor.api.NudgeUXConfig
+  ) => void;
+}
+export function useA11yActions(): UseA11yActions {
+  const instance = useCurrentEditor();
+  const dispatch = useCallback(
+    (action: Action) => {
+      instance.dispatch(action);
     },
-    [dispatch]
+    [instance]
   );
 
-  const dragStart = useCallback(
-    (event: PointerEvent) => {
+  // Keep React-specific functions
+  const __gesture_nudge = useCallback(
+    (state: "on" | "off") => {
       dispatch({
-        type: "event-target/event/on-drag-start",
-        shiftKey: event.shiftKey,
+        type: "gesture/nudge",
+        state,
       });
     },
     [dispatch]
   );
 
-  const dragEnd = useCallback(
-    (event: PointerEvent) => {
-      if (marquee) {
-        // test area in canvas space
-        const area = cmath.rect.fromPoints([marquee.a, marquee.b]);
-
-        const cdom = new domapi.CanvasDOM(transform);
-        const contained = cdom.getNodesIntersectsArea(area);
-
-        dispatch({
-          type: "event-target/event/on-drag-end",
-          node_ids_from_area: contained,
-          shiftKey: event.shiftKey,
-        });
+  const __gesture_nudge_debounced = __useGestureNudgeState(dispatch);
 
-        return;
+  const nudge = useCallback(
+    (
+      target: "selection" | editor.NodeID = "selection",
+      axis: "x" | "y",
+      delta: number = 1,
+      config: editor.api.NudgeUXConfig = {
+        delay: 500,
+        gesture: true,
       }
-      dispatch({
-        type: "event-target/event/on-drag-end",
-        shiftKey: event.shiftKey,
-      });
-    },
-    [dispatch, marquee, transform]
-  );
+    ) => {
+      const { gesture = true, delay = 500 } = config;
 
-  const drag = useCallback(
-    (event: TCanvasEventTargetDragGestureState) => {
-      requestAnimationFrame(() => {
-        dispatch({
-          type: "event-target/event/on-drag",
-          event,
-        });
-      });
-    },
-    [dispatch]
-  );
+      if (gesture) {
+        // Trigger gesture
+        __gesture_nudge("on");
 
-  //
-  const multipleSelectionOverlayClick = useCallback(
-    (selection: string[], event: MouseEvent) => {
-      const els = domapi.get_grida_node_elements_from_point(
-        event.clientX,
-        event.clientY
-      );
+        // Debounce to turn off gesture
+        __gesture_nudge_debounced("off", delay);
+      }
 
       dispatch({
-        type: "event-target/event/multiple-selection-overlay/on-click",
-        selection: selection,
-        node_ids_from_point: els.map((n) => n.id),
-        shiftKey: event.shiftKey,
+        type: "nudge",
+        delta,
+        axis,
+        target,
       });
     },
     [dispatch]
   );
 
-  //
+  const a11yarrow = useCallback(
+    (
+      target: "selection" | editor.NodeID,
+      direction: "up" | "down" | "left" | "right",
+      shiftKey: boolean,
+      config: editor.api.NudgeUXConfig = {
+        delay: 500,
+        gesture: true,
+      }
+    ) => {
+      const { gesture = true, delay = 500 } = config;
 
-  const startGuideGesture = useCallback(
-    (axis: cmath.Axis, idx: number | -1) => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          idx: idx,
-          type: "guide",
-          axis,
-        },
-      });
-    },
-    [dispatch]
-  );
+      if (gesture) {
+        // Trigger gesture
+        __gesture_nudge("on");
 
-  const deleteGuide = useCallback(
-    (idx: number) => {
-      dispatch({
-        type: "surface/guide/delete",
-        idx,
-      });
-    },
-    [dispatch]
-  );
+        // Debounce to turn off gesture
+        __gesture_nudge_debounced("off", delay);
+      }
 
-  const startScaleGesture = useCallback(
-    (selection: string | string[], direction: cmath.CardinalDirection) => {
       dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "scale",
-          selection: Array.isArray(selection) ? selection : [selection],
-          direction,
-        },
+        type: `a11y/${direction}`,
+        target,
+        shiftKey,
       });
     },
     [dispatch]
   );
 
-  const startSortGesture = useCallback(
-    (selection: string | string[], node_id: string) => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "sort",
-          selection: Array.isArray(selection) ? selection : [selection],
-          node_id,
-        },
-      });
-    },
-    [dispatch]
-  );
+  return {
+    nudge,
+    a11yarrow,
+  };
+}
 
-  const startGapGesture = useCallback(
-    (selection: string | string[], axis: "x" | "y") => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "gap",
-          selection: selection,
-          axis,
-        },
-      });
-    },
-    [dispatch]
-  );
+interface UseGestureState {
+  gesture: editor.state.IEditorState["gesture"];
+  is_node_transforming: boolean;
+  is_node_translating: boolean;
+  is_node_scaling: boolean;
+}
 
-  // #region drag resize handle
-  const startCornerRadiusGesture = useCallback(
-    (selection: string) => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "corner-radius",
-          node_id: selection,
-        },
-      });
-    },
-    [dispatch]
-  );
-  // #endregion drag resize handle
+export function useGestureState(): UseGestureState {
+  const instance = useCurrentEditor();
 
-  const startRotateGesture = useCallback(
-    (selection: string) => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "rotate",
-          selection,
-        },
-      });
-    },
-    [dispatch]
-  );
+  const gesture = useEditorState(instance, (state) => state.gesture);
 
-  return useMemo(() => {
-    return {
-      zoom,
-      pan,
-      //
-      transform,
-      debug,
-      flags,
-      gesture,
-      dragging,
-      surface_snapping,
-      //
-      marquee,
-      tool,
-      brush,
-      //
-      ruler,
-      setRulerState,
-      guides,
-      startGuideGesture,
-      deleteGuide,
-      //
-      edges,
-      //
-      pixelgrid,
-      setPixelGridState,
-      //
-      hovered_node_id,
-      dropzone,
-      selection,
-      is_node_transforming,
-      is_node_translating,
-      is_node_scaling,
-      content_edit_mode,
-      //
+  const is_node_transforming = gesture.type !== "idle";
+  const is_node_translating =
+    gesture.type === "translate" ||
+    gesture.type === "sort" ||
+    gesture.type === "nudge" ||
+    gesture.type === "gap";
+  const is_node_scaling = gesture.type === "scale";
 
-      startScaleGesture,
-      startSortGesture,
-      startGapGesture,
-      startCornerRadiusGesture,
-      startRotateGesture,
-      //
-      pointerMove,
-      pointerDown,
-      pointerUp,
-      click,
-      doubleClick,
-      //
-      dragStart,
-      dragEnd,
-      drag,
-      //
-      multipleSelectionOverlayClick,
-      //
-    };
-  }, [
-    zoom,
-    pan,
-    //
-    transform,
-    debug,
-    flags,
+  return {
     gesture,
-    dragging,
-    surface_snapping,
-    //
-    marquee,
-    tool,
-    brush,
-    //
-    ruler,
-    setRulerState,
-    guides,
-    startGuideGesture,
-    deleteGuide,
-    //
-    edges,
-    //
-    pixelgrid,
-    setPixelGridState,
-    //
-    hovered_node_id,
-    dropzone,
-    selection,
-    //
     is_node_transforming,
     is_node_translating,
     is_node_scaling,
-    //
-    content_edit_mode,
-    //
-    startScaleGesture,
-    startSortGesture,
-    startGapGesture,
-    startCornerRadiusGesture,
-    startRotateGesture,
-    //
-    pointerMove,
-    pointerDown,
-    pointerUp,
-    click,
-    doubleClick,
-    //
-    dragStart,
-    dragEnd,
-    drag,
-    //
-    multipleSelectionOverlayClick,
-    //
-  ]);
+  };
 }
 
 export function useDataTransferEventTarget() {
@@ -2861,13 +1021,6 @@ export function useDataTransferEventTarget() {
     transform: state.transform,
   }));
 
-  const dispatch = useCallback(
-    (action: Action) => {
-      instance.dispatch(action);
-    },
-    [instance]
-  );
-
   const canvasXY = useCallback(
     (xy: cmath.Vector2) => {
       const viewportdomrect = domapi.get_viewport_rect();
@@ -2881,22 +1034,6 @@ export function useDataTransferEventTarget() {
     [state.transform]
   );
 
-  const paste = useCallback(() => {
-    dispatch({
-      type: "paste",
-    });
-  }, [dispatch]);
-
-  const insertNode = useCallback(
-    (prototype: grida.program.nodes.NodePrototype) => {
-      dispatch({
-        type: "insert",
-        prototype,
-      });
-    },
-    [dispatch]
-  );
-
   const insertText = useCallback(
     (
       text: string,
@@ -2917,9 +1054,9 @@ export function useDataTransferEventTarget() {
         left: x,
         top: y,
       } satisfies grida.program.nodes.NodePrototype;
-      insertNode(node);
+      instance.insertNode(node);
     },
-    [insertNode, canvasXY]
+    [instance, canvasXY]
   );
 
   const insertImage = useCallback(
@@ -2946,9 +1083,9 @@ export function useDataTransferEventTarget() {
         left: x,
         top: y,
       } satisfies grida.program.nodes.NodePrototype;
-      insertNode(node);
+      instance.insertNode(node);
     },
-    [insertNode, canvasXY]
+    [instance, canvasXY]
   );
 
   const insertSVG = useCallback(
@@ -2986,13 +1123,13 @@ export function useDataTransferEventTarget() {
 
             result.left = x;
             result.top = y;
-            insertNode(result);
+            instance.insertNode(result);
           } else {
             throw new Error("Failed to convert SVG");
           }
         });
     },
-    [insertNode, canvasXY]
+    [instance, canvasXY]
   );
 
   const insertFromFile = useCallback(
@@ -3044,7 +1181,7 @@ export function useDataTransferEventTarget() {
       if (event.target instanceof HTMLTextAreaElement) return;
 
       if (!event.clipboardData) {
-        paste();
+        instance.paste();
         return;
       }
 
@@ -3075,10 +1212,10 @@ export function useDataTransferEventTarget() {
 
       if (!pasted_from_data_transfer) {
         event.preventDefault();
-        paste();
+        instance.paste();
       }
     },
-    [insertFromFile, insertText]
+    [instance, insertFromFile, insertText]
   );
 
   const ondragover = (event: React.DragEvent<HTMLDivElement>) => {
@@ -3130,16 +1267,16 @@ export function useDataTransferEventTarget() {
 }
 
 export function useClipboardSync() {
-  // const { state } = useDocument();
   const instance = useCurrentEditor();
-  const state = useEditorState(instance, (state) => ({
-    user_clipboard: state.user_clipboard,
-  }));
+  const user_clipboard = useEditorState(
+    instance,
+    (state) => state.user_clipboard
+  );
 
   useEffect(() => {
     try {
-      if (state.user_clipboard) {
-        const serializedData = JSON.stringify(state.user_clipboard);
+      if (user_clipboard) {
+        const serializedData = JSON.stringify(user_clipboard);
         const htmltxt = `<meta>${serializedData}`;
         const blob = new Blob([htmltxt], {
           type: "text/html",
@@ -3156,12 +1293,11 @@ export function useClipboardSync() {
     } catch (e) {
       //
     }
-  }, [state.user_clipboard]);
+  }, [user_clipboard]);
   //
 }
 
 export function useSurfacePathEditor() {
-  // const [state, dispatch] = __useInternal();
   const instance = useCurrentEditor();
   const state = useEditorState(instance, (state) => ({
     content_edit_mode: state.content_edit_mode,
@@ -3169,10 +1305,7 @@ export function useSurfacePathEditor() {
     hovered_vertex_idx: state.hovered_vertex_idx,
     tool: state.tool,
   }));
-  const dispatch = React.useCallback(
-    (action: Action) => instance.dispatch(action),
-    [instance]
-  );
+
   assert(state.content_edit_mode && state.content_edit_mode.type === "path");
 
   const { hovered_vertex_idx: hovered_point, tool } = state;
@@ -3191,71 +1324,37 @@ export function useSurfacePathEditor() {
       if (tool.type === "path") {
         return;
       }
-      dispatch({
-        type: "select-vertex",
-        target: {
-          node_id,
-          vertex,
-        },
-      });
+      instance.selectVertex(node_id, vertex);
     },
-    [tool.type, dispatch, node_id]
+    [tool.type, instance.selectVertex, node_id]
   );
 
   const onVertexHover = useCallback(
     (vertex: number, eventType: "enter" | "leave") => {
-      dispatch({
-        type: "hover-vertex",
-        event: eventType,
-        target: {
-          node_id,
-          vertex,
-        },
-      });
+      instance.hoverVertex(node_id, vertex, eventType);
     },
-    [dispatch, node_id]
+    [instance, node_id]
   );
 
   const onVertexDragStart = useCallback(
     (vertex: number) => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "translate-vertex",
-          vertex,
-          node_id,
-        },
-      });
+      instance.startTranslateVertexGesture(node_id, vertex);
     },
-    [dispatch, node_id]
+    [instance, node_id]
   );
 
   const onVertexDelete = useCallback(
     (vertex: number) => {
-      dispatch({
-        type: "delete-vertex",
-        target: {
-          node_id,
-          vertex: vertex,
-        },
-      });
+      instance.deleteVertex(node_id, vertex);
     },
-    [node_id, dispatch]
+    [node_id, instance.deleteVertex]
   );
 
   const onCurveControlPointDragStart = useCallback(
     (segment: number, control: "ta" | "tb") => {
-      dispatch({
-        type: "surface/gesture/start",
-        gesture: {
-          type: "curve",
-          node_id,
-          control,
-          segment,
-        },
-      });
+      instance.startCurveGesture(node_id, segment, control);
     },
-    [dispatch, node_id]
+    [instance, node_id]
   );
 
   return useMemo(
@@ -3299,7 +1398,9 @@ export function useSurfacePathEditor() {
  * Must be used when root node is {@link grida.program.nodes.TemplateInstanceNode} node
  */
 export function useRootTemplateInstanceNode(root_id: string) {
-  const { document, templates, changeNodeProps } = useDocument();
+  const editor = useCurrentEditor();
+  const templates = useEditorState(editor, (state) => state.templates);
+  const { document } = useDocumentState();
 
   const rootnode = document.nodes[root_id];
 
@@ -3312,9 +1413,9 @@ export function useRootTemplateInstanceNode(root_id: string) {
 
   const changeRootProps = useCallback(
     (key: string, value: any) => {
-      changeNodeProps(root_id, key, value);
+      editor.changeNodeProps(root_id, key, value);
     },
-    [changeNodeProps, root_id]
+    [editor, root_id]
   );
 
   return useMemo(
@@ -3328,22 +1429,6 @@ export function useRootTemplateInstanceNode(root_id: string) {
   );
 }
 
-class EditorConsumerError extends Error {
-  context: any;
-  constructor(message: string, context: any) {
-    super(message); // Pass message to the parent Error class
-    this.name = this.constructor.name; // Set the error name
-    this.context = context; // Attach the context object
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, this.constructor);
-    }
-  }
-
-  toString(): string {
-    return `${this.name}: ${this.message} - Context: ${JSON.stringify(this.context)}`;
-  }
-}
-
 export type NodeWithMeta = grida.program.nodes.UnknwonNode & {
   meta: {
     is_component_consumer: boolean;
@@ -3351,6 +1436,21 @@ export type NodeWithMeta = grida.program.nodes.UnknwonNode & {
   };
 };
 
+export function useNodeState<Selected>(
+  node_id: string,
+  selector: (state: grida.program.nodes.UnknwonNode) => Selected
+) {
+  const instance = useCurrentEditor();
+  return useEditorState(instance, (state) => {
+    const node = state.document.nodes[node_id];
+    return selector(node as grida.program.nodes.UnknwonNode);
+  });
+}
+
+/**
+ * @deprecated use {@link useNodeState} instead
+ * @returns
+ */
 export function useNode(node_id: string): NodeWithMeta {
   assert(node_id, "node_id is required");
   // const { state } = useDocument();
@@ -3374,7 +1474,7 @@ export function useNode(node_id: string): NodeWithMeta {
   } else {
     assert(
       templates,
-      new EditorConsumerError(
+      new editor.api.EditorConsumerVerboseError(
         `node '${node_id}' is not found under "nodes", but templates are not provided for additional lookup`,
         { state }
       )
@@ -3434,25 +1534,20 @@ export function useNode(node_id: string): NodeWithMeta {
   };
 }
 
-/**
- * @param node_id self or child node id
- */
-export function useTopNode(node_id: string) {
-  // const { state } = useDocument();
-  const instance = useCurrentEditor();
-  const state = useEditorState(instance, (state) => ({
-    document_ctx: state.document_ctx,
-  }));
-  const top_id = editor.dq.getTopId(state.document_ctx, node_id)!;
-  return useNode(top_id);
-}
-
 export function useComputedNode(
   node_id: string
 ): grida.program.nodes.UnknwonComputedNode {
-  const node = useNode(node_id);
-  const { active, style, component_id, props, text, html, src, href, fill } =
-    node;
+  const { props, text, html, src, href, fill } = useNodeState(
+    node_id,
+    (node) => ({
+      props: node.props,
+      text: node.text,
+      html: node.html,
+      src: node.src,
+      href: node.href,
+      fill: node.fill,
+    })
+  );
 
   const computed = useComputed(
     {
@@ -3469,198 +1564,9 @@ export function useComputedNode(
   return computed as grida.program.nodes.UnknownNodeProperties as grida.program.nodes.UnknwonComputedNode;
 }
 
-namespace internal {
-  /**
-   * @deprecated
-   * @returns
-   * This model does not work. it's a proof of concept. - will be removed
-   */
-  export function __createApiProxyNode_experimental(
-    node: grida.program.nodes.Node,
-    context: {
-      dispatcher: Dispatcher;
-    }
-  ): grida.program.nodes.Node {
-    const p = new Proxy(
-      { ...node },
-      {
-        get(target, prop, receiver) {
-          return Reflect.get(target, prop, receiver);
-        },
-        set(target, prop, value, receiver) {
-          switch (prop as keyof grida.program.nodes.UnknwonNode) {
-            case "width":
-              context.dispatcher({
-                type: "node/change/size",
-                axis: "width",
-                node_id: node.id,
-                value: value,
-              });
-              return true;
-            case "height":
-              context.dispatcher({
-                type: "node/change/size",
-                axis: "height",
-                node_id: node.id,
-                value: value,
-              });
-              return true;
-            case "top":
-            case "right":
-            case "bottom":
-            case "left":
-              context.dispatcher({
-                type: "node/change/positioning",
-                node_id: node.id,
-                positioning: {
-                  position: "absolute",
-                  [prop]: value,
-                },
-              });
-              return true;
-            case "opacity": {
-              context.dispatcher({
-                type: "node/change/opacity",
-                node_id: node.id,
-                opacity: value,
-              });
-              return true;
-            }
-            case "rotation": {
-              context.dispatcher({
-                type: "node/change/rotation",
-                node_id: node.id,
-                rotation: value,
-              });
-              return true;
-            }
-            case "fill": {
-              context.dispatcher({
-                type: "node/change/fill",
-                node_id: node.id,
-                fill: value,
-              });
-              return true;
-            }
-            case "cornerRadius": {
-              context.dispatcher({
-                type: "node/change/cornerRadius",
-                node_id: node.id,
-                cornerRadius: value,
-              });
-              return true;
-            }
-            default:
-              console.error(`Unsupported property: ${prop.toString()}`);
-          }
-
-          return false;
-        },
-      }
-    );
-    return p;
-  }
-}
-
 export function useTemplateDefinition(template_id: string) {
-  // const {
-  //   state: { templates },
-  // } = useDocument();
-  const instance = useCurrentEditor();
-  const templates = useEditorState(instance, (state) => state.templates);
+  const editor = useCurrentEditor();
+  const templates = useEditorState(editor, (state) => state.templates);
 
   return templates![template_id];
 }
-
-const __not_implemented = (...args: any): any => {
-  throw new Error("not implemented");
-};
-
-export function useEditorApi() {
-  const instance = useCurrentEditor();
-  const document = useDocument();
-  const dispatcher = instance.dispatch;
-
-  const getNodeById: editor.api.IStandaloneEditorApi["getNodeById"] =
-    useCallback(
-      (id: editor.NodeID) => {
-        const nodedata = document.document.nodes[id];
-        return internal.__createApiProxyNode_experimental(nodedata, {
-          dispatcher,
-        });
-      },
-      [document.document.nodes]
-    );
-
-  const createRectangle = useCallback(
-    (props: Omit<grida.program.nodes.NodePrototype, "type"> = {}) => {
-      dispatcher({
-        type: "insert",
-        prototype: {
-          type: "rectangle",
-          ...props,
-        } as grida.program.nodes.NodePrototype,
-      });
-    },
-    [dispatcher]
-  );
-
-  const createEllipse = useCallback(
-    (props: Omit<grida.program.nodes.NodePrototype, "type">) => {
-      dispatcher({
-        type: "insert",
-        prototype: {
-          type: "ellipse",
-          ...props,
-        } as grida.program.nodes.NodePrototype,
-      });
-    },
-    [dispatcher]
-  );
-
-  const editor: editor.api.IStandaloneEditorApi = useMemo(() => {
-    return {
-      selection: document.selection,
-      getNodeById,
-      createRectangle,
-      createEllipse,
-      createText: __not_implemented,
-      getNodeDepth: document.getNodeDepth,
-      getNodeAbsoluteRotation: document.getNodeAbsoluteRotation,
-      select: document.select,
-      blur: document.blur,
-      undo: document.undo,
-      redo: document.redo,
-      cut: document.cut,
-      copy: document.copy,
-      paste: document.paste,
-      duplicate: document.duplicate,
-      delete: document.deleteNode,
-      rename: document.changeNodeName,
-      nudge: document.nudge,
-      nudgeResize: document.nudgeResize,
-      align: document.align,
-      order: document.order,
-      distributeEvenly: document.distributeEvenly,
-      configureSurfaceRaycastTargeting:
-        document.configureSurfaceRaycastTargeting,
-      configureMeasurement: document.configureMeasurement,
-      configureTranslateWithCloneModifier:
-        document.configureTranslateWithCloneModifier,
-      configureTranslateWithAxisLockModifier:
-        document.configureTranslateWithAxisLockModifier,
-      configureTransformWithCenterOriginModifier:
-        document.configureTransformWithCenterOriginModifier,
-      configureTransformWithPreserveAspectRatioModifier:
-        document.configureTransformWithPreserveAspectRatioModifier,
-      configureRotateWithQuantizeModifier:
-        document.configureRotateWithQuantizeModifier,
-      toggleActive: document.toggleActive,
-      toggleLocked: document.toggleLocked,
-      toggleBold: document.toggleBold,
-      setOpacity: document.setOpacity,
-    };
-  }, [document, getNodeById, createRectangle, createEllipse]);
-
-  return editor;
-}
diff --git a/editor/grida-canvas-react/renderer.tsx b/editor/grida-canvas-react/renderer.tsx
index 832746841..56ee15c39 100644
--- a/editor/grida-canvas-react/renderer.tsx
+++ b/editor/grida-canvas-react/renderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useContext, useEffect, useMemo } from "react";
-import { useCurrentScene, useTransform } from "./provider";
+import { useCurrentSceneState, useTransformState } from "./provider";
 import { useCurrentEditor, useEditorState } from "./use-editor";
 import { NodeElement } from "./nodes/node";
 import { domapi } from "../grida-canvas/backends/dom";
@@ -50,7 +50,7 @@ export function StandaloneSceneContent({
   primary = true,
   ...props
 }: React.HTMLAttributes<HTMLDivElement> & StandaloneDocumentContentProps) {
-  const { children } = useCurrentScene();
+  const { children } = useCurrentSceneState();
 
   return (
     <div
@@ -138,7 +138,7 @@ export function StandaloneSceneBackground({
 }
 
 export function Transformer({ children }: React.PropsWithChildren<{}>) {
-  const { style } = useTransform();
+  const { style } = useTransformState();
 
   return (
     <div
@@ -156,17 +156,16 @@ function useFitInitiallyEffect() {
   const editor = useCurrentEditor();
   const documentKey = useEditorState(editor, (state) => state.document_key);
   const sceneId = useEditorState(editor, (state) => state.scene_id);
-  const { fit } = useTransform();
 
   useEffect(() => {
-    fit("*");
+    editor.fit("*");
   }, [documentKey, sceneId]);
 }
 
 export function AutoInitialFitTransformer({
   children,
 }: React.PropsWithChildren<{}>) {
-  const { style } = useTransform();
+  const { style } = useTransformState();
 
   useFitInitiallyEffect();
 
diff --git a/editor/grida-canvas-react/use-editor.tsx b/editor/grida-canvas-react/use-editor.tsx
index 96abe1c40..aee00a242 100644
--- a/editor/grida-canvas-react/use-editor.tsx
+++ b/editor/grida-canvas-react/use-editor.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Editor } from "@/grida-canvas/editor";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
-import { EditorRecorder } from "@/grida-canvas/plugins/recorder";
+
 import type { editor } from "@/grida-canvas";
 import deepEqual from "fast-deep-equal/es6/react.js";
 
@@ -45,29 +45,3 @@ export function useEditorState<Selected>(
     isEqual
   );
 }
-
-export function useRecorder(editor: Editor) {
-  const [recorder] = React.useState(new EditorRecorder(editor));
-
-  const state = useSyncExternalStoreWithSelector(
-    recorder.subscribe.bind(recorder),
-    recorder.snapshot.bind(recorder),
-    recorder.snapshot.bind(recorder),
-    (s) => s,
-    deepEqual
-  );
-
-  return React.useMemo(
-    () => ({
-      status: state.status,
-      nframes: state.nframes,
-      start: () => recorder.start(),
-      stop: () => recorder.stop(),
-      clear: () => recorder.clear(),
-      replay: () => recorder.play(),
-      exit: () => recorder.exit(),
-      dumps: () => recorder.dumps(),
-    }),
-    [state, recorder]
-  );
-}
diff --git a/editor/grida-canvas-react/viewport/hooks/use-edge-scrolling.ts b/editor/grida-canvas-react/viewport/hooks/use-edge-scrolling.ts
index 635b095b4..c95bd3ec5 100644
--- a/editor/grida-canvas-react/viewport/hooks/use-edge-scrolling.ts
+++ b/editor/grida-canvas-react/viewport/hooks/use-edge-scrolling.ts
@@ -2,13 +2,13 @@
 
 import { useEffect } from "react";
 import {
-  useEventTarget,
-  usePointer,
-  useTool,
-  useTransform,
+  usePointerState,
+  useToolState,
+  useTransformState,
 } from "../../provider";
 import { useViewport } from "../context";
 import cmath from "@grida/cmath";
+import { useCurrentEditor, useEditorState } from "@/grida-canvas-react";
 
 const EDGE_SCROLLING_THRESHOLD = 16;
 
@@ -24,10 +24,11 @@ export function EdgeScrollingEffect(
 }
 
 export function useEdgeScrolling({ enabled = true }: EdgeScrollingProps) {
-  const { dragging } = useEventTarget();
-  const { tool } = useTool();
-  const { transform, setTransform } = useTransform();
-  const pointer = usePointer();
+  const instance = useCurrentEditor();
+  const dragging = useEditorState(instance, (state) => state.dragging);
+  const { tool } = useToolState();
+  const { transform } = useTransformState();
+  const pointer = usePointerState();
   const viewport = useViewport();
 
   useEffect(() => {
@@ -58,7 +59,7 @@ export function useEdgeScrolling({ enabled = true }: EdgeScrollingProps) {
 
       const next = cmath.transform.translate(transform, delta);
 
-      setTransform(next);
+      instance.transform(next);
       rafId = requestAnimationFrame(loop);
     };
 
diff --git a/editor/grida-canvas-react/viewport/hotkeys.tsx b/editor/grida-canvas-react/viewport/hotkeys.tsx
index 56755324a..9bdc9b4ad 100644
--- a/editor/grida-canvas-react/viewport/hotkeys.tsx
+++ b/editor/grida-canvas-react/viewport/hotkeys.tsx
@@ -1,17 +1,10 @@
 import { useHotkeys } from "react-hotkeys-hook";
-import {
-  useBrush,
-  useDocument,
-  useEventTarget,
-  useSelection,
-  useTool,
-  useTransform,
-} from "../provider";
+import { useCurrentSelection, useToolState, useA11yActions } from "../provider";
 import { toast } from "sonner";
-import grida from "@grida/schema";
 import type cg from "@grida/cg";
 import { useEffect, useRef } from "react";
 import cmath from "@grida/cmath";
+import { useCurrentEditor } from "../use-editor";
 
 export const keybindings_sheet = [
   {
@@ -324,72 +317,27 @@ function useSingleDoublePressHotkey(
 }
 
 export function useEditorHotKeys() {
-  const { ruler, setRulerState, pixelgrid, setPixelGridState } =
-    useEventTarget();
-  const { changeBrushSize } = useBrush();
-  const {
-    tool,
-    setTool,
-    content_edit_mode,
-    tryExitContentEditMode,
-    tryToggleContentEditMode,
-  } = useTool();
-  const { scale, fit, zoomIn, zoomOut } = useTransform();
-  const {
-    select,
-    blur,
-    undo,
-    redo,
-    cut,
-    copy,
-    duplicate,
-    setClipboardColor,
-    deleteNode,
-    a11yarrow,
-    nudgeResize,
-    align,
-    order,
-    distributeEvenly,
-    autoLayout,
-    contain,
-    configureSurfaceRaycastTargeting,
-    configureMeasurement,
-    configureTranslateWithCloneModifier,
-    configureTranslateWithAxisLockModifier,
-    configureTransformWithCenterOriginModifier,
-    configureTransformWithPreserveAspectRatioModifier,
-    configureRotateWithQuantizeModifier,
-    toggleActive,
-    toggleLocked,
-    toggleBold,
-    setOpacity,
-  } = useDocument();
-
-  const { selection, actions } = useSelection();
+  const editor = useCurrentEditor();
+  const { tool, content_edit_mode } = useToolState();
+  const { a11yarrow } = useA11yActions();
+
+  const { selection, actions } = useCurrentSelection();
 
   useEffect(() => {
     const cb = (e: any) => {
-      configureSurfaceRaycastTargeting({ target: "auto" });
-      configureMeasurement("off");
-      configureTranslateWithCloneModifier("off");
-      configureTransformWithCenterOriginModifier("off");
-      configureTranslateWithAxisLockModifier("off");
-      configureTransformWithPreserveAspectRatioModifier("off");
-      configureRotateWithQuantizeModifier("off");
+      editor.configureSurfaceRaycastTargeting({ target: "auto" });
+      editor.configureMeasurement("off");
+      editor.configureTranslateWithCloneModifier("off");
+      editor.configureTransformWithCenterOriginModifier("off");
+      editor.configureTranslateWithAxisLockModifier("off");
+      editor.configureTransformWithPreserveAspectRatioModifier("off");
+      editor.configureRotateWithQuantizeModifier("off");
     };
     window.addEventListener("blur", cb);
     return () => {
       window.removeEventListener("blur", cb);
     };
-  }, [
-    configureMeasurement,
-    configureRotateWithQuantizeModifier,
-    configureSurfaceRaycastTargeting,
-    configureTransformWithCenterOriginModifier,
-    configureTransformWithPreserveAspectRatioModifier,
-    configureTranslateWithAxisLockModifier,
-    configureTranslateWithCloneModifier,
-  ]);
+  }, [editor]);
 
   // always triggering. (alt, meta, ctrl, shift)
   useHotkeys(
@@ -398,19 +346,19 @@ export function useEditorHotKeys() {
       switch (e.key) {
         case "Meta":
         case "Control":
-          configureSurfaceRaycastTargeting({ target: "deepest" });
+          editor.configureSurfaceRaycastTargeting({ target: "deepest" });
           break;
         case "Alt":
-          configureMeasurement("on");
-          configureTranslateWithCloneModifier("on");
-          configureTransformWithCenterOriginModifier("on");
+          editor.configureMeasurement("on");
+          editor.configureTranslateWithCloneModifier("on");
+          editor.configureTransformWithCenterOriginModifier("on");
           // NOTE: on some systems, the alt key focuses to the browser menu, so we need to prevent that. (e.g. alt key on windows/chrome)
           e.preventDefault();
           break;
         case "Shift":
-          configureTranslateWithAxisLockModifier("on");
-          configureTransformWithPreserveAspectRatioModifier("on");
-          configureRotateWithQuantizeModifier(15);
+          editor.configureTranslateWithAxisLockModifier("on");
+          editor.configureTransformWithPreserveAspectRatioModifier("on");
+          editor.configureRotateWithQuantizeModifier(15);
           break;
       }
       //
@@ -427,17 +375,17 @@ export function useEditorHotKeys() {
       switch (e.key) {
         case "Meta":
         case "Control":
-          configureSurfaceRaycastTargeting({ target: "auto" });
+          editor.configureSurfaceRaycastTargeting({ target: "auto" });
           break;
         case "Alt":
-          configureMeasurement("off");
-          configureTranslateWithCloneModifier("off");
-          configureTransformWithCenterOriginModifier("off");
+          editor.configureMeasurement("off");
+          editor.configureTranslateWithCloneModifier("off");
+          editor.configureTransformWithCenterOriginModifier("off");
           break;
         case "Shift":
-          configureTranslateWithAxisLockModifier("off");
-          configureTransformWithPreserveAspectRatioModifier("off");
-          configureRotateWithQuantizeModifier("off");
+          editor.configureTranslateWithAxisLockModifier("off");
+          editor.configureTransformWithPreserveAspectRatioModifier("off");
+          editor.configureRotateWithQuantizeModifier("off");
           break;
       }
       //
@@ -460,11 +408,11 @@ export function useEditorHotKeys() {
       // check if up or down
       switch (e.type) {
         case "keydown":
-          setTool({ type: "hand" });
+          editor.setTool({ type: "hand" });
           __hand_tool_triggered_by_hotkey.current = true;
           break;
         case "keyup":
-          setTool({ type: "cursor" });
+          editor.setTool({ type: "cursor" });
           __hand_tool_triggered_by_hotkey.current = false;
           break;
       }
@@ -488,11 +436,11 @@ export function useEditorHotKeys() {
       // check if up or down
       switch (e.type) {
         case "keydown":
-          setTool({ type: "zoom" });
+          editor.setTool({ type: "zoom" });
           __zoom_tool_triggered_by_hotkey.current = true;
           break;
         case "keyup":
-          setTool({ type: "cursor" });
+          editor.setTool({ type: "cursor" });
           __zoom_tool_triggered_by_hotkey.current = false;
           break;
       }
@@ -509,7 +457,7 @@ export function useEditorHotKeys() {
   useHotkeys(
     "meta+a, ctrl+a",
     () => {
-      select("selection", "~");
+      editor.select("selection", "~");
     },
     {
       preventDefault: true,
@@ -547,7 +495,7 @@ export function useEditorHotKeys() {
               // copy to clipboard if no selection
               else {
                 // editor clipboard
-                setClipboardColor(rgba);
+                editor.setClipboardColor(rgba);
                 // os clipboard
                 window.navigator.clipboard
                   .writeText(result.sRGBHex)
@@ -574,10 +522,10 @@ export function useEditorHotKeys() {
   useHotkeys(
     "enter",
     () => {
-      select(">");
+      editor.select(">");
 
       // TODO: check if select(">") is possible first, then toggle when not possible
-      tryToggleContentEditMode();
+      editor.tryToggleContentEditMode();
     },
     {
       preventDefault: true,
@@ -589,7 +537,7 @@ export function useEditorHotKeys() {
   useHotkeys(
     "shift+enter, \\",
     () => {
-      select("..");
+      editor.select("..");
     },
     {
       preventDefault: true,
@@ -625,14 +573,14 @@ export function useEditorHotKeys() {
   );
 
   useHotkeys("escape, clear", (e) => {
-    tryExitContentEditMode();
-    blur();
+    editor.tryExitContentEditMode();
+    editor.blur();
   });
 
   useHotkeys(
     "meta+shift+h, ctrl+shift+h",
     () => {
-      toggleActive("selection");
+      editor.toggleActive("selection");
     },
     {
       preventDefault: true,
@@ -640,38 +588,36 @@ export function useEditorHotKeys() {
   );
 
   useHotkeys("meta+shift+l, ctrl+shift+l", () => {
-    toggleLocked("selection");
+    editor.toggleLocked("selection");
   });
   // #endregion
 
   useHotkeys("undo, meta+z, ctrl+z", () => {
-    undo();
+    editor.undo();
   });
 
   useHotkeys("redo, meta+shift+z, ctrl+shift+z", () => {
-    redo();
+    editor.redo();
   });
 
   useHotkeys("meta+b, ctrl+b", () => {
-    toggleBold("selection");
+    editor.toggleBold("selection");
   });
 
   useHotkeys("shift+r", () => {
-    const next = ruler === "on" ? "off" : "on";
-    setRulerState(next);
-    toast.success(`Ruler ${next}`);
+    const v = editor.toggleRuler();
+    toast.success(`Ruler ${v === "on" ? "on" : "off"}`);
   });
 
   useHotkeys("shift+\", shift+'", () => {
-    const next = pixelgrid === "on" ? "off" : "on";
-    setPixelGridState(next);
-    toast.success(`Pixel Grid ${next}`);
+    const v = editor.togglePixelGrid();
+    toast.success(`Pixel Grid ${v === "on" ? "on" : "off"}`);
   });
 
   useHotkeys(
     "meta+d, ctrl+d",
     () => {
-      duplicate("selection");
+      editor.duplicate("selection");
     },
     {
       preventDefault: true,
@@ -688,13 +634,13 @@ export function useEditorHotKeys() {
     toast.error("[flip vertical] is not implemented yet");
   });
 
-  useHotkeys("cut, meta+x, ctrl+x", () => cut("selection"), {
+  useHotkeys("cut, meta+x, ctrl+x", () => editor.cut("selection"), {
     preventDefault: true,
     enableOnContentEditable: false,
     enableOnFormTags: false,
   });
 
-  useHotkeys("copy, meta+c, ctrl+c", () => copy("selection"), {
+  useHotkeys("copy, meta+c, ctrl+c", () => editor.copy("selection"), {
     preventDefault: false,
     enableOnContentEditable: false,
     enableOnFormTags: false,
@@ -707,7 +653,7 @@ export function useEditorHotKeys() {
   //   enableOnFormTags: false,
   // });
 
-  useHotkeys("backspace, delete", () => deleteNode("selection"), {
+  useHotkeys("backspace, delete", () => editor.deleteNode("selection"), {
     preventDefault: true,
     enableOnContentEditable: false,
     enableOnFormTags: false,
@@ -743,90 +689,90 @@ export function useEditorHotKeys() {
   //
 
   useHotkeys("ctrl+alt+arrowright", () => {
-    nudgeResize("selection", "x", 1);
+    editor.nudgeResize("selection", "x", 1);
   });
 
   useHotkeys("ctrl+alt+shift+arrowright", () => {
-    nudgeResize("selection", "x", 10);
+    editor.nudgeResize("selection", "x", 10);
   });
 
   useHotkeys("ctrl+alt+arrowleft", () => {
-    nudgeResize("selection", "x", -1);
+    editor.nudgeResize("selection", "x", -1);
   });
 
   useHotkeys("ctrl+alt+shift+arrowleft", () => {
-    nudgeResize("selection", "x", -10);
+    editor.nudgeResize("selection", "x", -10);
   });
 
   useHotkeys("ctrl+alt+arrowup", () => {
-    nudgeResize("selection", "y", -1);
+    editor.nudgeResize("selection", "y", -1);
   });
 
   useHotkeys("ctrl+alt+shift+arrowup", () => {
-    nudgeResize("selection", "y", -10);
+    editor.nudgeResize("selection", "y", -10);
   });
 
   useHotkeys("ctrl+alt+arrowdown", () => {
-    nudgeResize("selection", "y", 1);
+    editor.nudgeResize("selection", "y", 1);
   });
 
   useHotkeys("ctrl+alt+shift+arrowdown", () => {
-    nudgeResize("selection", "y", 10);
+    editor.nudgeResize("selection", "y", 10);
   });
 
   // keyup
 
   useHotkeys("v, escape", () => {
-    setTool({ type: "cursor" });
+    editor.setTool({ type: "cursor" });
   });
 
   useHotkeys("h", () => {
-    setTool({ type: "hand" });
+    editor.setTool({ type: "hand" });
   });
 
   useHotkeys("a, f", () => {
-    setTool({ type: "insert", node: "container" });
+    editor.setTool({ type: "insert", node: "container" });
   });
 
   useHotkeys("r", () => {
-    setTool({ type: "insert", node: "rectangle" });
+    editor.setTool({ type: "insert", node: "rectangle" });
   });
 
   useHotkeys("o", () => {
-    setTool({ type: "insert", node: "ellipse" });
+    editor.setTool({ type: "insert", node: "ellipse" });
   });
 
   useHotkeys("t", () => {
-    setTool({ type: "insert", node: "text" });
+    editor.setTool({ type: "insert", node: "text" });
   });
 
   useHotkeys("l", () => {
-    setTool({ type: "draw", tool: "line" });
+    editor.setTool({ type: "draw", tool: "line" });
   });
 
   useHotkeys("p", () => {
-    setTool({ type: "path" });
+    editor.setTool({ type: "path" });
   });
 
   useHotkeys("shift+p", () => {
-    setTool({ type: "draw", tool: "pencil" });
+    editor.setTool({ type: "draw", tool: "pencil" });
   });
 
   useHotkeys("b", () => {
-    setTool({
+    editor.setTool({
       type: "brush",
     });
   });
 
   useHotkeys("e", () => {
-    setTool({
+    editor.setTool({
       type: "eraser",
     });
   });
 
   useHotkeys("g", () => {
     if (content_edit_mode?.type === "bitmap") {
-      setTool({
+      editor.setTool({
         type: "flood-fill",
       });
     }
@@ -836,36 +782,36 @@ export function useEditorHotKeys() {
     if (selection.length) {
       const i = parseInt(e.key);
       const o = i / 10;
-      setOpacity("selection", o);
+      editor.setOpacity("selection", o);
       toast.success(`opacity: ${o}`);
     }
   });
 
   useSingleDoublePressHotkey("0", (type) => {
     const o = type === "single" ? 1 : 0;
-    setOpacity("selection", o);
+    editor.setOpacity("selection", o);
     toast.success(`opacity: ${o}`);
   });
 
   useHotkeys("shift+0", (e) => {
-    scale(1, "center");
+    editor.scale(1, "center");
     toast.success(`Zoom to 100%`);
   });
 
   useHotkeys("shift+1, shift+9", (e) => {
-    fit("*", { margin: 64 });
+    editor.fit("*", { margin: 64 });
     toast.success(`Zoom to fit`);
   });
 
   useHotkeys("shift+2", (e) => {
-    fit("selection", { margin: 64, animate: true });
+    editor.fit("selection", { margin: 64, animate: true });
     toast.success(`Zoom to selection`);
   });
 
   useHotkeys(
     "meta+=, ctrl+=, meta+plus, ctrl+plus",
     () => {
-      zoomIn();
+      editor.zoomIn();
     },
     { preventDefault: true }
   );
@@ -873,73 +819,73 @@ export function useEditorHotKeys() {
   useHotkeys(
     "meta+minus, ctrl+minus",
     () => {
-      zoomOut();
+      editor.zoomOut();
     },
     { preventDefault: true }
   );
 
   useHotkeys("]", (e) => {
     if (tool.type === "brush") {
-      changeBrushSize({ type: "delta", value: 1 });
+      editor.changeBrushSize({ type: "delta", value: 1 });
     } else {
-      order("selection", "front");
+      editor.order("selection", "front");
     }
   });
 
   useHotkeys("[", (e) => {
     if (tool.type === "brush") {
-      changeBrushSize({ type: "delta", value: -1 });
+      editor.changeBrushSize({ type: "delta", value: -1 });
     } else {
-      order("selection", "back");
+      editor.order("selection", "back");
     }
   });
 
   useHotkeys("alt+a", (e) => {
-    align("selection", {
+    editor.align("selection", {
       horizontal: "min",
     });
   });
   useHotkeys(
     "alt+d",
     (e) => {
-      align("selection", {
+      editor.align("selection", {
         horizontal: "max",
       });
     },
     { preventDefault: true }
   );
   useHotkeys("alt+w", (e) => {
-    align("selection", {
+    editor.align("selection", {
       vertical: "min",
     });
   });
   useHotkeys("alt+s", (e) => {
-    align("selection", {
+    editor.align("selection", {
       vertical: "max",
     });
   });
 
   useHotkeys("alt+v", (e) => {
-    align("selection", {
+    editor.align("selection", {
       vertical: "center",
     });
   });
   useHotkeys("alt+h", (e) => {
-    align("selection", {
+    editor.align("selection", {
       horizontal: "center",
     });
   });
 
   useHotkeys("alt+ctrl+v", (e) => {
-    distributeEvenly("selection", "x");
+    editor.distributeEvenly("selection", "x");
   });
 
   useHotkeys("alt+ctrl+h", (e) => {
-    distributeEvenly("selection", "y");
+    editor.distributeEvenly("selection", "y");
   });
 
   useHotkeys("shift+a", (e) => {
-    autoLayout("selection");
+    editor.autoLayout("selection");
   });
 
   useHotkeys(
@@ -954,7 +900,7 @@ export function useEditorHotKeys() {
   );
 
   useHotkeys("ctrl+alt+g, meta+alt+g", () => {
-    contain("selection");
+    editor.contain("selection");
   });
 
   useHotkeys("alt+meta+k, alt+ctrl+k", (e) => {
diff --git a/editor/grida-canvas-react/viewport/surface-context-menu.tsx b/editor/grida-canvas-react/viewport/surface-context-menu.tsx
index c5a54b11f..740eee10c 100644
--- a/editor/grida-canvas-react/viewport/surface-context-menu.tsx
+++ b/editor/grida-canvas-react/viewport/surface-context-menu.tsx
@@ -8,20 +8,21 @@ import {
 } from "@/components/ui/context-menu";
 import {
   useDataTransferEventTarget,
-  useDocument,
-  useSelection,
+  useCurrentSelection,
+  useSelectionState,
 } from "../provider";
 import { toast } from "sonner";
 import { cn } from "@/components/lib/utils";
+import { useCurrentEditor } from "../use-editor";
 
 export function EditorSurfaceContextMenu({
   children,
   className,
 }: React.PropsWithChildren<{ className?: string }>) {
-  const { selection, paste, order, autoLayout, contain, deleteNode } =
-    useDocument();
+  const editor = useCurrentEditor();
+  const { selection } = useSelectionState();
   const { insertText } = useDataTransferEventTarget();
-  const { actions } = useSelection();
+  const { actions } = useCurrentSelection();
 
   const has_selection = selection.length > 0;
   const can_copy = has_selection;
@@ -49,7 +50,7 @@ export function EditorSurfaceContextMenu({
           }
         }
       }
-      paste();
+      editor.paste();
     } catch (e) {}
   };
 
@@ -80,7 +81,7 @@ export function EditorSurfaceContextMenu({
         <ContextMenuItem
           disabled={!can_bring_to_front}
           onSelect={() => {
-            order("selection", "front");
+            editor.order("selection", "front");
           }}
           className="text-xs"
         >
@@ -90,7 +91,7 @@ export function EditorSurfaceContextMenu({
         <ContextMenuItem
           disabled={!can_send_to_back}
           onSelect={() => {
-            order("selection", "back");
+            editor.order("selection", "back");
           }}
           className="text-xs"
         >
@@ -101,7 +102,7 @@ export function EditorSurfaceContextMenu({
         <ContextMenuItem
           disabled={!has_selection}
           onSelect={() => {
-            contain("selection");
+            editor.contain("selection");
           }}
           className="text-xs"
         >
@@ -111,7 +112,7 @@ export function EditorSurfaceContextMenu({
         <ContextMenuItem
           disabled={!has_selection}
           onSelect={() => {
-            autoLayout("selection");
+            editor.autoLayout("selection");
           }}
           className="text-xs"
         >
@@ -122,7 +123,7 @@ export function EditorSurfaceContextMenu({
         <ContextMenuItem
           disabled={!has_selection}
           onSelect={() => {
-            deleteNode("selection");
+            editor.deleteNode("selection");
           }}
           className="text-xs"
         >
diff --git a/editor/grida-canvas-react/viewport/surface-hooks.ts b/editor/grida-canvas-react/viewport/surface-hooks.ts
index f0f91853a..f3deaabd2 100644
--- a/editor/grida-canvas-react/viewport/surface-hooks.ts
+++ b/editor/grida-canvas-react/viewport/surface-hooks.ts
@@ -1,9 +1,9 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useDocument } from "@/grida-canvas-react";
+import { useCurrentEditor, useDocumentState } from "@/grida-canvas-react";
 import { analyzeDistribution } from "./ui/distribution";
 import { domapi } from "@/grida-canvas/backends/dom";
 import cmath from "@grida/cmath";
-import { NodeWithMeta, useTransform } from "../provider";
+import { NodeWithMeta, useTransformState } from "../provider";
 import { is_direct_component_consumer } from "@/grida-canvas-utils/utils/supports";
 import { editor } from "@/grida-canvas";
 import type { ObjectsDistributionAnalysis } from "./ui/distribution";
@@ -243,8 +243,8 @@ function computeSurfaceSelectionGroup({
 export function useSelectionGroups(
   ...node_ids: string[]
 ): SurfaceSelectionGroup[] {
-  const { document, document_ctx } = useDocument();
-  const { transform } = useTransform();
+  const { document, document_ctx } = useDocumentState();
+  const { transform } = useTransformState();
 
   // Use stable node IDs to avoid unnecessary re-renders
   const __node_ids = useStableNodeIds(node_ids);
@@ -295,8 +295,9 @@ export function useSingleSelection(
     enabled: boolean;
   } = { enabled: true }
 ): SurfaceSingleSelection | undefined {
-  const { document, document_ctx, getNodeAbsoluteRotation } = useDocument();
-  const { transform } = useTransform();
+  const instance = useCurrentEditor();
+  const { document, document_ctx } = useDocumentState();
+  const { transform } = useTransformState();
   const node = document.nodes[node_id];
 
   const [data, setData] = useState<SurfaceSingleSelection | undefined>(
@@ -342,7 +343,7 @@ export function useSingleSelection(
     const width = element.clientWidth;
     const height = element.clientHeight;
     const size: cmath.Vector2 = [width, height];
-    const absolute_rotation = getNodeAbsoluteRotation(node_id);
+    const absolute_rotation = instance.getNodeAbsoluteRotation(node_id);
 
     const centerX = boundingSurfaceRect.x + boundingSurfaceRect.width / 2;
     const centerY = boundingSurfaceRect.y + boundingSurfaceRect.height / 2;
@@ -404,7 +405,7 @@ export function useSingleSelection(
         },
       },
     });
-  }, [getNodeAbsoluteRotation, node, node_id, transform, enabled]);
+  }, [node, node_id, transform, enabled]);
 
   return data;
 }
diff --git a/editor/grida-canvas-react/viewport/surface.tsx b/editor/grida-canvas-react/viewport/surface.tsx
index a9b3bef0c..b4c11683d 100644
--- a/editor/grida-canvas-react/viewport/surface.tsx
+++ b/editor/grida-canvas-react/viewport/surface.tsx
@@ -1,18 +1,20 @@
 "use client";
 
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { useEventTarget } from "@/grida-canvas-react";
 import { useGesture as __useGesture, useGesture } from "@use-gesture/react";
 import {
-  useBrush,
+  useBrushState,
   useClipboardSync,
-  useCurrentScene,
-  useDocument,
+  useCurrentSceneState,
+  useDocumentState,
   useEventTargetCSSCursor,
+  useGestureState,
+  useMultipleSelectionOverlayClick,
   useNode,
-  usePointer,
-  useTool,
-  useTransform,
+  usePointerState,
+  useSelectionState,
+  useToolState,
+  useTransformState,
 } from "../provider";
 import { useCurrentEditor, useEditorState } from "../use-editor";
 import { useIsWindowResizing } from "./hooks/window-resizing";
@@ -134,31 +136,15 @@ function SurfaceGroup({
 
 export function EditorSurface() {
   const isWindowResizing = useIsWindowResizing();
-  const { transform } = useTransform();
-  const {
-    zoom,
-    pan,
-    ruler,
-    pixelgrid,
-    edges,
-    marquee,
-    hovered_node_id,
-    dropzone,
-    selection,
-    is_node_transforming,
-    is_node_translating,
-    pointerMove,
-    pointerDown,
-    pointerUp,
-    click,
-    doubleClick,
-    drag,
-    dragStart,
-    dragEnd,
-  } = useEventTarget();
-  const { brush } = useBrush();
-  const { tool, setTool, content_edit_mode, tryToggleContentEditMode } =
-    useTool();
+  const editor = useCurrentEditor();
+  const { transform } = useTransformState();
+  const { is_node_transforming, is_node_translating } = useGestureState();
+  const { hovered_node_id, selection } = useSelectionState();
+  const { tool, content_edit_mode } = useToolState();
+  const pixelgrid = useEditorState(editor, (state) => state.pixelgrid);
+  const ruler = useEditorState(editor, (state) => state.ruler);
+  const dropzone = useEditorState(editor, (state) => state.dropzone);
+  const brush = useBrushState();
   const cursor = useEventTargetCSSCursor();
   const eventTargetRef = useRef<HTMLDivElement>(null);
   const portalRef = useRef<HTMLDivElement>(null);
@@ -184,7 +170,7 @@ export function EditorSurface() {
       if (event.defaultPrevented) return;
       // for performance reasons, we don't want to update the overlay when transforming (except for translate)
       if (is_node_transforming && !is_node_translating) return;
-      pointerMove(event);
+      editor.pointerMove(event);
     };
 
     et.addEventListener("pointermove", handlePointerMove, {
@@ -205,7 +191,7 @@ export function EditorSurface() {
         if (event.defaultPrevented) return;
         if (event.button === 1) {
           __hand_tool_triggered_by_aux_button.current = true;
-          setTool({ type: "hand" });
+          editor.setTool({ type: "hand" });
         }
       },
       onMouseUp: ({ event }) => {
@@ -213,40 +199,40 @@ export function EditorSurface() {
         if (event.button === 1) {
           if (__hand_tool_triggered_by_aux_button.current) {
             __hand_tool_triggered_by_aux_button.current = false;
-            setTool({ type: "cursor" });
+            editor.setTool({ type: "cursor" });
           }
         }
       },
       onPointerDown: ({ event }) => {
         if (event.defaultPrevented) return;
-        pointerDown(event);
+        editor.pointerDown(event);
       },
       onPointerUp: ({ event }) => {
         if (event.defaultPrevented) return;
-        pointerUp(event);
+        editor.pointerUp(event);
       },
       onClick: ({ event }) => {
         if (event.defaultPrevented) return;
-        click(event);
+        editor.click(event);
       },
       onDoubleClick: ({ event }) => {
         if (event.defaultPrevented) return;
 
         // [order matters] - otherwise, it will always try to enter the content edit mode
-        tryToggleContentEditMode(); // 1
-        doubleClick(event); // 2
+        editor.tryToggleContentEditMode(); // 1
+        editor.doubleClick(event); // 2
       },
       onDragStart: ({ event }) => {
         if (event.defaultPrevented) return;
-        dragStart(event as PointerEvent);
+        editor.dragStart(event as PointerEvent);
       },
       onDragEnd: ({ event }) => {
         if (event.defaultPrevented) return;
-        dragEnd(event as PointerEvent);
+        editor.dragEnd(event as PointerEvent);
       },
       onDrag: (e) => {
         if (e.event.defaultPrevented) return;
-        drag({
+        editor.drag({
           delta: e.delta,
           distance: e.distance,
           movement: e.movement,
@@ -285,10 +271,10 @@ export function EditorSurface() {
           const d = delta[1];
           const sensitivity = 0.01;
           const zoom_delta = -d * sensitivity;
-          zoom(zoom_delta, origin);
+          editor.zoom(zoom_delta, origin);
         } else {
           const sensitivity = 2;
-          pan(
+          editor.pan(
             cmath.vector2.invert(
               cmath.vector2.multiply(delta, [sensitivity, sensitivity])
             )
@@ -333,7 +319,7 @@ export function EditorSurface() {
           (e.target as HTMLDivElement).scrollLeft = 0;
         }}
       >
-        <NetworkOverlay edges={edges} transform={transform} />
+        <NetworkOverlay transform={transform} />
         {ruler === "on" && <RulerGuideOverlay />}
         {pixelgrid === "on" && <PixelGridOverlay />}
         <FloatingCursorTooltip />
@@ -347,17 +333,7 @@ export function EditorSurface() {
           }}
         >
           {/* <DebugPointer position={toSurfaceSpace(pointer.position, transform)} /> */}
-          {marquee && (
-            <div
-              id="marquee-container"
-              className="absolute top-0 left-0 w-0 h-0"
-            >
-              <MarqueeArea
-                a={cmath.vector2.transform(marquee.a, transform)}
-                b={cmath.vector2.transform(marquee.b, transform)}
-              />
-            </div>
-          )}
+          <MarqueeOverlay />
         </div>
         <div
           className="w-full h-full"
@@ -399,9 +375,7 @@ export function EditorSurface() {
             hidden={isWindowResizing || content_edit_mode?.type === "path"}
           >
             <SurfaceGroup
-              hidden={
-                !!marquee || tool.type !== "cursor" || is_node_transforming
-              }
+              hidden={tool.type !== "cursor" || is_node_transforming}
             >
               {hovered_node_id && (
                 // general hover
@@ -417,8 +391,24 @@ export function EditorSurface() {
   );
 }
 
+function MarqueeOverlay() {
+  const editor = useCurrentEditor();
+  const marquee = useEditorState(editor, (state) => state.marquee);
+  const { transform } = useTransformState();
+
+  if (!marquee) return null;
+  return (
+    <div id="marquee-container" className="absolute top-0 left-0 w-0 h-0">
+      <MarqueeArea
+        a={cmath.vector2.transform(marquee.a, transform)}
+        b={cmath.vector2.transform(marquee.b, transform)}
+      />
+    </div>
+  );
+}
+
 function DropzoneOverlay(props: editor.state.DropzoneIndication) {
-  const { transform } = useTransform();
+  const { transform } = useTransformState();
   switch (props.type) {
     case "node":
       return <NodeOverlay node_id={props.node_id} readonly />;
@@ -439,8 +429,9 @@ function DropzoneOverlay(props: editor.state.DropzoneIndication) {
 }
 
 function RootFramesBarOverlay() {
-  const { selection, document, hovered_node_id } = useDocument();
-  const scene = useCurrentScene();
+  const { selection, hovered_node_id } = useSelectionState();
+  const { document } = useDocumentState();
+  const scene = useCurrentSceneState();
   const rootframes = useMemo(() => {
     const children = scene.children.map((id) => document.nodes[id]);
     return children.filter(
@@ -503,24 +494,24 @@ function NodeTitleBar({
   node_id: string;
   state: "idle" | "hover" | "active";
 }>) {
-  const { select, hoverEnterNode, changeNodeName } = useDocument();
+  const editor = useCurrentEditor();
 
   // TODO: knwon issue: when initially firing up the drag on not-selected node, it will cause the root to fire onDragEnd as soon as the drag starts.
   const bind = useSurfaceGesture(
     {
       onPointerMove: ({ event }) => {
-        hoverEnterNode(node.id);
+        editor.hoverEnterNode(node.id);
       },
       onDoubleClick: ({ event }) => {
         const name = prompt("rename", node.name);
-        if (name) changeNodeName(node.id, name);
+        if (name) editor.changeNodeName(node.id, name);
       },
       onPointerDown: ({ event }) => {
         event.preventDefault();
         if (event.shiftKey) {
-          select("selection", [node.id]);
+          editor.select("selection", [node.id]);
         } else {
-          select([node.id]);
+          editor.select([node.id]);
         }
       },
     },
@@ -557,9 +548,9 @@ export function EditorSurfaceClipboardSyncProvider({
 }
 
 function FloatingCursorTooltip() {
-  const { gesture } = useEventTarget();
-  const { transform } = useTransform();
-  const pointer = usePointer();
+  const { gesture } = useGestureState();
+  const { transform } = useTransformState();
+  const pointer = usePointerState();
   const pos = cmath.vector2.transform(pointer.position, transform);
   const value = get_cursor_tooltip_value(gesture);
   if (value) {
@@ -583,8 +574,8 @@ function FloatingCursorTooltip() {
 }
 
 function BrushCursor({ brush }: { brush: BitmapEditorBrush }) {
-  const { transform, scaleX, scaleY } = useTransform();
-  const pointer = usePointer();
+  const { transform, scaleX, scaleY } = useTransformState();
+  const pointer = usePointerState();
   const pos = cmath.vector2.transform(
     // quantize position to canvas space 1.
     cmath.vector2.quantize(pointer.position, 1),
@@ -660,7 +651,8 @@ function SingleSelectionOverlay({
   node_id: string;
   readonly?: boolean;
 }) {
-  const { is_node_translating, gesture, startGapGesture } = useEventTarget();
+  const editor = useCurrentEditor();
+  const { gesture, is_node_translating } = useGestureState();
   const data = useSingleSelection(node_id);
   if (!data) return <></>;
 
@@ -680,7 +672,7 @@ function SingleSelectionOverlay({
                 distribution={distribution}
                 style={style}
                 onGapGestureStart={(axis) => {
-                  startGapGesture(node_id, axis);
+                  editor.startGapGesture(node_id, axis);
                 }}
               />
             </>
@@ -694,7 +686,8 @@ function SingleSelectionOverlay({
 }
 
 function MultpleSelectionGroupsOverlay({ readonly }: { readonly?: boolean }) {
-  const { is_node_translating, gesture, startGapGesture } = useEventTarget();
+  const editor = useCurrentEditor();
+  const { gesture, is_node_translating } = useGestureState();
   const groups = useSurfaceSelectionGroups();
 
   return (
@@ -708,7 +701,7 @@ function MultpleSelectionGroupsOverlay({ readonly }: { readonly?: boolean }) {
                 distribution={g.distribution}
                 style={g.style}
                 onGapGestureStart={(axis) => {
-                  startGapGesture(g.ids, axis);
+                  editor.startGapGesture(g.ids, axis);
                 }}
               />
             )}
@@ -729,10 +722,9 @@ function SelectionGroupOverlay({
 }: SurfaceSelectionGroup & {
   readonly?: boolean;
 }) {
-  const { tool } = useTool();
-  const { multipleSelectionOverlayClick } = useEventTarget();
-
-  const { distributeEvenly } = useDocument();
+  const editor = useCurrentEditor();
+  const { tool } = useToolState();
+  const { multipleSelectionOverlayClick } = useMultipleSelectionOverlayClick();
 
   const { style, ids, boundingSurfaceRect, size, distribution } = groupdata;
 
@@ -787,7 +779,7 @@ function SelectionGroupOverlay({
         <DistributeButton
           axis={preferredDistributeEvenlyActionAxis}
           onClick={(axis) => {
-            distributeEvenly("selection", axis);
+            editor.distributeEvenly("selection", axis);
           }}
         />
         {boundingSurfaceRect && (
@@ -820,7 +812,7 @@ function NodeOverlay({
   zIndex?: number;
   focused?: boolean;
 }) {
-  const { scaleX, scaleY } = useTransform();
+  const { scaleX, scaleY } = useTransformState();
 
   const data = useSingleSelection(node_id);
 
@@ -908,12 +900,12 @@ function NodeOverlayCornerRadiusHandle({
   margin?: number;
   size?: number;
 }) {
-  const { startCornerRadiusGesture } = useEventTarget();
+  const editor = useCurrentEditor();
 
   const bind = useSurfaceGesture({
     onDragStart: ({ event }) => {
       event.preventDefault();
-      startCornerRadiusGesture(node_id);
+      editor.startCornerRadiusGesture(node_id);
     },
   });
 
@@ -954,15 +946,14 @@ function LayerOverlayRotationHandle({
   offset?: number;
   size?: number;
 }) {
-  const { getNodeAbsoluteRotation } = useDocument();
-  const { startRotateGesture } = useEventTarget();
+  const editor = useCurrentEditor();
 
-  const rotation = getNodeAbsoluteRotation(node_id);
+  const rotation = editor.getNodeAbsoluteRotation(node_id);
 
   const bind = useSurfaceGesture({
     onDragStart: ({ event }) => {
       event.preventDefault();
-      startRotateGesture(node_id);
+      editor.startRotateGesture(node_id);
     },
   });
 
@@ -1010,7 +1001,7 @@ function LayerOverlayResizeHandle({
   anchor: "nw" | "ne" | "sw" | "se" | "n" | "e" | "s" | "w";
   size?: number;
 }) {
-  const { startScaleGesture } = useEventTarget();
+  const editor = useCurrentEditor();
 
   const bind = useSurfaceGesture({
     onPointerDown: ({ event }) => {
@@ -1018,20 +1009,15 @@ function LayerOverlayResizeHandle({
     },
     onDragStart: ({ event }) => {
       event.preventDefault();
-      startScaleGesture(selection, anchor);
+      editor.startScaleGesture(selection, anchor);
     },
   });
 
   return <Knob size={size} {...bind()} anchor={anchor} />;
 }
 
-function NetworkOverlay({
-  edges,
-  transform,
-}: {
-  edges: grida.program.document.Edge2D[] | undefined | null;
-  transform: cmath.Transform;
-}) {
+function NetworkOverlay({ transform }: { transform: cmath.Transform }) {
+  const { edges } = useCurrentSceneState();
   return (
     <>
       {edges?.map((edge) => {
@@ -1050,7 +1036,7 @@ function Edge({
   transform: cmath.Transform;
 }) {
   // normalize a/b to surface space position
-  const { getNodeById } = useDocument();
+  const editor = useCurrentEditor();
 
   const get_pos = (p: grida.program.document.EdgePoint) => {
     switch (p.type) {
@@ -1058,7 +1044,7 @@ function Edge({
         return cmath.vector2.transform([p.x, p.y], transform);
       case "anchor":
         try {
-          const n = getNodeById(p.target);
+          const n = editor.getNodeSnapshotById(p.target);
           const cx = (n as any).left + (n as any).width / 2;
           const cy = (n as any).top + (n as any).height / 2;
           return cmath.vector2.transform([cx, cy], transform);
@@ -1114,14 +1100,14 @@ function RedDotSortHandle({
   node_id: string;
   selection: string[];
 }) {
-  const { startSortGesture } = useEventTarget();
+  const editor = useCurrentEditor();
   const bind = useSurfaceGesture({
     onPointerDown: ({ event }) => {
       event.preventDefault();
     },
     onDragStart: ({ event }) => {
       event.preventDefault();
-      startSortGesture(selection, node_id);
+      editor.startSortGesture(selection, node_id);
     },
   });
 
@@ -1140,7 +1126,7 @@ function GapOverlay({
 } & {
   onGapGestureStart?: (axis: cmath.Axis) => void;
 }) {
-  const { transform } = useTransform();
+  const { transform } = useTransformState();
 
   const { x, y, rects: _rects } = distribution;
 
@@ -1217,7 +1203,7 @@ function GapWithHandle({
   offset?: cmath.Vector2;
   onGapGestureStart?: (axis: cmath.Axis) => void;
 }) {
-  const { gesture } = useEventTarget();
+  const { gesture } = useGestureState();
 
   const r = useMemo(() => {
     const intersection = cmath.rect.axisProjectionIntersection([a, b], axis)!;
@@ -1371,21 +1357,22 @@ function PixelGridOverlay() {
 }
 
 function RulerGuideOverlay() {
-  const { guides, startGuideGesture } = useEventTarget();
-  const { scaleX, scaleY, transform } = useTransform();
+  const editor = useCurrentEditor();
+  const { guides } = useCurrentSceneState();
+  const { scaleX, scaleY, transform } = useTransformState();
   const viewport = useViewport();
   const d = useSurfaceSelectionGroups();
 
   const bindX = useSurfaceGesture({
     onDragStart: ({ event }) => {
-      startGuideGesture("y", -1);
+      editor.startGuideGesture("y", -1);
       event.preventDefault();
     },
   });
 
   const bindY = useSurfaceGesture({
     onDragStart: ({ event }) => {
-      startGuideGesture("x", -1);
+      editor.startGuideGesture("x", -1);
       event.preventDefault();
     },
   });
@@ -1498,8 +1485,8 @@ function Guide({
   offset,
   idx,
 }: grida.program.document.Guide2D & { idx: number }) {
-  const { transform } = useTransform();
-  const { startGuideGesture, deleteGuide } = useEventTarget();
+  const editor = useCurrentEditor();
+  const { transform } = useTransformState();
   const o = cmath.delta.transform(offset, axis, transform);
   const [hover, setHover] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -1524,7 +1511,7 @@ function Guide({
     },
     onKeyDown: ({ event }) => {
       if (event.key === "Delete" || event.key === "Backspace") {
-        deleteGuide(idx);
+        editor.deleteGuide(idx);
       }
       if (event.key === "Escape") {
         (event.currentTarget as HTMLElement)?.blur();
@@ -1532,7 +1519,7 @@ function Guide({
       event.stopPropagation();
     },
     onDragStart: ({ event }) => {
-      startGuideGesture(axis, idx);
+      editor.startGuideGesture(axis, idx);
       event.preventDefault();
     },
   });
diff --git a/editor/grida-canvas-react/viewport/ui/measurement.tsx b/editor/grida-canvas-react/viewport/ui/measurement.tsx
index e0a1b0529..026125b4b 100644
--- a/editor/grida-canvas-react/viewport/ui/measurement.tsx
+++ b/editor/grida-canvas-react/viewport/ui/measurement.tsx
@@ -5,7 +5,7 @@ import {
 import { MeterLabel } from "./meter";
 import { cn } from "@/components/lib/utils";
 import cmath from "@grida/cmath";
-import { useTransform } from "@/grida-canvas-react/provider";
+import { useTransformState } from "@/grida-canvas-react/provider";
 import { useEditorState, useCurrentEditor } from "@/grida-canvas-react";
 import { useLayoutEffect, useState } from "react";
 import { domapi } from "@/grida-canvas/backends/dom";
@@ -64,7 +64,7 @@ function useMeasurement() {
 
 export function MeasurementGuide() {
   const measurement = useMeasurement();
-  const { transform } = useTransform();
+  const { transform } = useTransformState();
 
   if (!measurement) return <></>;
 
diff --git a/editor/grida-canvas-react/viewport/ui/path-editor.tsx b/editor/grida-canvas-react/viewport/ui/path-editor.tsx
index a5c161652..cd2e6e09e 100644
--- a/editor/grida-canvas-react/viewport/ui/path-editor.tsx
+++ b/editor/grida-canvas-react/viewport/ui/path-editor.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import {
-  useEditorFlags,
+  useEditorFlagsState,
   useSurfacePathEditor,
-  useTool,
-  useTransform,
+  useToolState,
+  useTransformState,
 } from "@/grida-canvas-react/provider";
 import cmath from "@grida/cmath";
 import { useGesture } from "@use-gesture/react";
@@ -12,9 +12,9 @@ import { svg } from "@/grida-canvas-utils/svg";
 import assert from "assert";
 
 export function SurfacePathEditor({ node_id: _node_id }: { node_id: string }) {
-  const { debug } = useEditorFlags();
-  const { tool } = useTool();
-  const { transform } = useTransform();
+  const { debug } = useEditorFlagsState();
+  const { tool } = useToolState();
+  const { transform } = useTransformState();
   const {
     node_id,
     offset,
diff --git a/editor/grida-canvas-react/viewport/ui/snap.tsx b/editor/grida-canvas-react/viewport/ui/snap.tsx
index 037c5fdac..4ade3a321 100644
--- a/editor/grida-canvas-react/viewport/ui/snap.tsx
+++ b/editor/grida-canvas-react/viewport/ui/snap.tsx
@@ -1,5 +1,9 @@
 import React, { useMemo } from "react";
-import { useEventTarget, useTransform } from "@/grida-canvas-react/provider";
+import {
+  useGestureState,
+  useTransformState,
+} from "@/grida-canvas-react/provider";
+import { useCurrentEditor, useEditorState } from "@/grida-canvas-react";
 import cmath from "@grida/cmath";
 import { guide } from "@grida/cmath/_snap";
 import { Crosshair } from "./crosshair";
@@ -7,8 +11,13 @@ import { Rule } from "./rule";
 import { Line } from "./line";
 
 function useSnapGuide(): guide.SnapGuide | undefined {
-  const { transform } = useTransform();
-  const { gesture, surface_snapping } = useEventTarget();
+  const editor = useCurrentEditor();
+  const surface_snapping = useEditorState(
+    editor,
+    (state) => state.surface_snapping
+  );
+  const { transform } = useTransformState();
+  const { gesture } = useGestureState();
 
   return useMemo(() => {
     if (
diff --git a/editor/grida-canvas-react/viewport/ui/text-editor.tsx b/editor/grida-canvas-react/viewport/ui/text-editor.tsx
index 877aee168..9b56841d2 100644
--- a/editor/grida-canvas-react/viewport/ui/text-editor.tsx
+++ b/editor/grida-canvas-react/viewport/ui/text-editor.tsx
@@ -1,20 +1,18 @@
 import {
   useNode,
-  useNodeAction,
-  useTool,
-  useTransform,
-} from "@/grida-canvas-react/provider";
+  useTransformState,
+  useCurrentEditor,
+} from "@/grida-canvas-react";
 import { useEffect, useRef } from "react";
 import { useSingleSelection } from "../surface-hooks";
-import grida from "@grida/schema";
 import { css } from "@/grida-canvas-utils/css";
+import grida from "@grida/schema";
 import cmath from "@grida/cmath";
 
 export function SurfaceTextEditor({ node_id }: { node_id: string }) {
   const inputref = useRef<HTMLTextAreaElement>(null);
-  const change = useNodeAction(node_id)!;
-  const { transform } = useTransform();
-  const { tryExitContentEditMode } = useTool();
+  const editor = useCurrentEditor();
+  const { transform } = useTransformState();
   const data = useSingleSelection(node_id);
   const node = useNode(node_id!);
 
@@ -58,7 +56,7 @@ export function SurfaceTextEditor({ node_id }: { node_id: string }) {
             onPointerDown={stopPropagation}
             value={node.text as string}
             maxLength={node.maxLength}
-            onBlur={tryExitContentEditMode}
+            onBlur={editor.tryExitContentEditMode}
             onKeyDown={(e) => {
               stopPropagation(e);
               if (e.key === "Escape") {
@@ -66,7 +64,7 @@ export function SurfaceTextEditor({ node_id }: { node_id: string }) {
               }
             }}
             onChange={(e) => {
-              change.text(e.target.value);
+              editor.changeNodeText(node_id, e.target.value);
             }}
             className="m-0 p-0 border-none outline-none appearance-none bg-transparent h-full overflow-visible resize-none"
             style={{
diff --git a/editor/grida-canvas/action.ts b/editor/grida-canvas/action.ts
index 01651a05e..a1fe1eea2 100644
--- a/editor/grida-canvas/action.ts
+++ b/editor/grida-canvas/action.ts
@@ -1,4 +1,3 @@
-import type { tokens } from "@grida/tokens";
 import type { editor } from "@/grida-canvas";
 import type cmath from "@grida/cmath";
 import type { BitmapEditorBrush } from "@grida/bitmap";
@@ -43,7 +42,6 @@ export type DocumentAction =
   | SurfaceAction
   //
   | NodeChangeAction
-  | NodeToggleBasePropertyAction
   | NodeToggleBoldAction
   | TemplateNodeOverrideChangeAction
   | TemplateEditorSetTemplatePropsAction
@@ -505,12 +503,12 @@ export interface EditorSurface_ChangeBrushAction {
 
 export interface EditorSurface_ChangeBrushSizeAction {
   type: "surface/brush/size";
-  size: TChange<number>;
+  size: editor.api.NumberChange;
 }
 
 export interface EditorSurface_ChangeBrushOpacityAction {
   type: "surface/brush/opacity";
-  opacity: TChange<number>;
+  opacity: editor.api.NumberChange;
 }
 
 export interface EditorSurface_DeleteGuideAction {
@@ -572,254 +570,41 @@ interface ITemplateInstanceNodeID {
   template_instance_node_id: string;
 }
 
-interface INodeChangeNameAction extends INodeID {
-  name: string;
-}
-
-interface INodeChangeUserDataAction extends INodeID {
-  userdata: grida.program.nodes.i.IBaseNode["userdata"];
-}
-
-interface INodeChangeActiveAction extends INodeID {
-  active: boolean;
-}
-
-interface INodeChangeLockedAction extends INodeID {
-  locked: boolean;
-}
-
-interface INodeChangePositioningAction extends INodeID {
-  positioning: Partial<grida.program.nodes.i.IPositioning>;
-}
-
-interface INodeChangePositioningModeAction extends INodeID {
-  position: grida.program.nodes.i.IPositioning["position"];
-}
+type INodeChangePositioningAction = INodeID &
+  Partial<grida.program.nodes.i.IPositioning>;
 
-interface INodeChangeComponentAction extends INodeID {
-  component_id: string;
-}
-
-interface INodeChangeTextAction extends INodeID {
-  text?: tokens.StringValueExpression;
-}
-
-interface INodeChangeOpacityAction extends INodeID {
-  opacity: TChange<number>;
-}
-
-interface INodeChangeSizeAction extends INodeID {
-  axis: "width" | "height";
-  value: grida.program.css.LengthPercentage | "auto";
-}
+type INodeChangePositioningModeAction = INodeID &
+  Required<Pick<grida.program.nodes.UnknwonNode, "position">>;
 
-export type TChange<T> =
-  | {
-      type: "set";
-      value: T;
-    }
-  | {
-      type: "delta";
-      value: NonNullable<T>;
-    };
-
-interface INodeChangeRotationAction extends INodeID {
-  rotation: TChange<grida.program.nodes.i.IRotation["rotation"]>;
-}
-
-interface INodeChangeCornerRadiusAction extends INodeID {
-  cornerRadius: number | grida.program.nodes.i.IRectangleCorner["cornerRadius"];
-}
-
-interface INodeChangeFillAction extends INodeID {
-  fill: Omit<grida.program.nodes.i.props.PropsPaintValue, "id"> | null;
-}
-
-interface INodeChangeStrokeAction extends INodeID {
-  stroke: Omit<grida.program.nodes.i.props.PropsPaintValue, "id"> | null;
-}
-
-interface INodeChangeStrokeWidthAction extends INodeID {
-  strokeWidth: TChange<number>;
-}
-
-interface INodeChangeStrokeCapAction extends INodeID {
-  strokeCap: cg.StrokeCap;
-}
-
-interface INodeChangeBorderAction extends INodeID {
-  border: grida.program.css.Border | undefined;
-}
-
-interface INodeChangeFitAction extends INodeID {
-  fit: cg.BoxFit;
-}
+type INodeChangeComponentAction = INodeID &
+  Required<Pick<grida.program.nodes.UnknwonNode, "component_id">>;
 
 interface ITextNodeChangeFontFamilyAction extends INodeID {
   fontFamily: string | undefined;
 }
 
-interface ITextNodeChangeFontWeightAction extends INodeID {
-  fontWeight: cg.NFontWeight;
-}
-interface ITextNodeChangeFontSizeAction extends INodeID {
-  fontSize: TChange<number>;
-}
-interface ITextNodeChangeTextAlignAction extends INodeID {
-  textAlign: cg.TextAlign;
-}
-
-interface ITextNodeChangeTextAlignVerticalAction extends INodeID {
-  textAlignVertical: cg.TextAlignVertical;
-}
-
-interface ITextNodeChangeLineHeightAction extends INodeID {
-  lineHeight: TChange<grida.program.nodes.TextNode["lineHeight"]>;
-}
-
-interface ITextNodeChangeLetterSpacingAction extends INodeID {
-  letterSpacing: TChange<grida.program.nodes.TextNode["letterSpacing"]>;
-}
-
-interface ITextNodeChangeMaxlengthAction extends INodeID {
-  maxlength: number | undefined;
-}
-
-//
-interface INodeChangePaddingAction extends INodeID {
-  padding: grida.program.nodes.i.IPadding["padding"];
-}
-
-interface INodeChangeBoxShadowAction extends INodeID {
-  boxShadow?: grida.program.nodes.i.IBoxShadow["boxShadow"];
-}
-
-// #region layout
-interface INodeChangeLayoutAction extends INodeID {
-  layout: grida.program.nodes.i.IFlexContainer["layout"];
-}
-
-interface IFlexContainerNodeChangeDirectionAction extends INodeID {
-  direction: grida.program.nodes.i.IFlexContainer["direction"];
-}
-
-interface IFlexContainerNodeChangeMainAxisAlignmentAction extends INodeID {
-  mainAxisAlignment: grida.program.nodes.i.IFlexContainer["mainAxisAlignment"];
-}
-
-interface IFlexContainerNodeChangeCrossAxisAlignmentAction extends INodeID {
-  crossAxisAlignment: grida.program.nodes.i.IFlexContainer["crossAxisAlignment"];
-}
-
-interface IFlexContainerNodeChangeGapAction extends INodeID {
-  gap: number | { mainAxisGap: number; crossAxisGap: number };
-}
-
-interface IFlexContainerNodeChangeMainAxisGapAction extends INodeID {
-  mainAxisGap: grida.program.nodes.i.IFlexContainer["mainAxisGap"];
-}
-
-interface IFlexContainerNodeChangeCrossAxisGapAction extends INodeID {
-  crossAxisGap: grida.program.nodes.i.IFlexContainer["crossAxisGap"];
-}
-
-interface INodeChangeMouseCursorAction extends INodeID {
-  cursor: cg.SystemMouseCursor;
-}
-
 interface INodeChangeStyleAction extends INodeID {
   style: Partial<React.CSSProperties>;
 }
 
-interface INodeChangeSrcAction extends INodeID {
-  src?: tokens.StringValueExpression;
-}
-
-interface INodeChangeHrefAction extends INodeID {
-  href?: grida.program.nodes.i.IHrefable["href"];
-}
-
-interface INodeChangeTargetAction extends INodeID {
-  target?: grida.program.nodes.i.IHrefable["target"];
-}
-
 interface INodeChangePropsAction extends INodeID {
   props: Partial<grida.program.nodes.i.IProps["props"]>;
 }
 
 export type NodeChangeAction =
-  | ({ type: "node/change/name" } & INodeChangeNameAction)
-  | ({ type: "node/change/userdata" } & INodeChangeUserDataAction)
-  | ({ type: "node/change/active" } & INodeChangeActiveAction)
-  | ({ type: "node/change/locked" } & INodeChangeLockedAction)
+  | ({
+      type: "node/change/*";
+      node_id: string;
+    } & Partial<Omit<grida.program.nodes.UnknwonNode, "type">>)
   | ({ type: "node/change/positioning" } & INodeChangePositioningAction)
   | ({
       type: "node/change/positioning-mode";
     } & INodeChangePositioningModeAction)
   | ({ type: "node/change/component" } & INodeChangeComponentAction)
-  | ({ type: "node/change/text" } & INodeChangeTextAction)
-  | ({ type: "node/change/opacity" } & INodeChangeOpacityAction)
-  | ({ type: "node/change/rotation" } & INodeChangeRotationAction)
-  | ({ type: "node/change/size" } & INodeChangeSizeAction)
-  | ({ type: "node/change/cornerRadius" } & INodeChangeCornerRadiusAction)
-  | ({ type: "node/change/fill" } & INodeChangeFillAction)
-  | ({ type: "node/change/stroke" } & INodeChangeStrokeAction)
-  | ({ type: "node/change/stroke-width" } & INodeChangeStrokeWidthAction)
-  | ({ type: "node/change/stroke-cap" } & INodeChangeStrokeCapAction)
-  | ({ type: "node/change/border" } & INodeChangeBorderAction)
-  | ({ type: "node/change/fit" } & INodeChangeFitAction)
-  //
   | ({ type: "node/change/fontFamily" } & ITextNodeChangeFontFamilyAction)
-  | ({ type: "node/change/fontWeight" } & ITextNodeChangeFontWeightAction)
-  | ({ type: "node/change/fontSize" } & ITextNodeChangeFontSizeAction)
-  | ({ type: "node/change/textAlign" } & ITextNodeChangeTextAlignAction)
-  | ({
-      type: "node/change/textAlignVertical";
-    } & ITextNodeChangeTextAlignVerticalAction)
-  | ({ type: "node/change/lineHeight" } & ITextNodeChangeLineHeightAction)
-  | ({ type: "node/change/letterSpacing" } & ITextNodeChangeLetterSpacingAction)
-  | ({ type: "node/change/maxlength" } & ITextNodeChangeMaxlengthAction)
-  //
-  | ({
-      type: "node/change/padding";
-    } & INodeChangePaddingAction)
-  | ({
-      type: "node/change/box-shadow";
-    } & INodeChangeBoxShadowAction)
-  //
-  | ({
-      type: "node/change/layout";
-    } & INodeChangeLayoutAction)
-  | ({
-      type: "node/change/direction";
-    } & IFlexContainerNodeChangeDirectionAction)
-  | ({
-      type: "node/change/mainAxisAlignment";
-    } & IFlexContainerNodeChangeMainAxisAlignmentAction)
-  | ({
-      type: "node/change/crossAxisAlignment";
-    } & IFlexContainerNodeChangeCrossAxisAlignmentAction)
-  | ({
-      type: "node/change/gap";
-    } & IFlexContainerNodeChangeGapAction)
-  | ({
-      type: "node/change/mainAxisGap";
-    } & IFlexContainerNodeChangeMainAxisGapAction)
-  | ({
-      type: "node/change/crossAxisGap";
-    } & IFlexContainerNodeChangeCrossAxisGapAction)
-  //
-  | ({ type: "node/change/mouse-cursor" } & INodeChangeMouseCursorAction)
   | ({ type: "node/change/style" } & INodeChangeStyleAction)
-  | ({ type: "node/change/src" } & INodeChangeSrcAction)
-  | ({ type: "node/change/href" } & INodeChangeHrefAction)
-  | ({ type: "node/change/target" } & INodeChangeTargetAction)
   | ({ type: "node/change/props" } & INodeChangePropsAction);
 
-export type NodeToggleBasePropertyAction =
-  | ({ type: "node/toggle/active" } & INodeID)
-  | ({ type: "node/toggle/locked" } & INodeID);
-
 export type NodeToggleBoldAction = { type: "node/toggle/bold" } & INodeID;
 
 export type TemplateNodeOverrideChangeAction = ITemplateInstanceNodeID & {
diff --git a/editor/grida-canvas/animation.ts b/editor/grida-canvas/animation.ts
new file mode 100644
index 000000000..ec3138db9
--- /dev/null
+++ b/editor/grida-canvas/animation.ts
@@ -0,0 +1,38 @@
+import cmath from "@grida/cmath";
+
+export function animateTransformTo(
+  from: cmath.Transform,
+  to: cmath.Transform,
+  update: (t: cmath.Transform) => void
+) {
+  const duration = 200; // ms
+  const start = performance.now();
+
+  function lerp(a: number, b: number, t: number) {
+    return a + (b - a) * t;
+  }
+
+  function step(now: number) {
+    const elapsed = now - start;
+    const progress = Math.min(elapsed / duration, 1);
+
+    const next: cmath.Transform = [
+      [0, 0, 0],
+      [0, 0, 0],
+    ] as cmath.Transform;
+
+    for (let i = 0; i < 2; i++) {
+      for (let j = 0; j < 3; j++) {
+        next[i][j] = lerp(from[i][j], to[i][j], progress);
+      }
+    }
+
+    update(next);
+
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    }
+  }
+
+  requestAnimationFrame(step);
+}
diff --git a/editor/grida-canvas/backends/dom.ts b/editor/grida-canvas/backends/dom.ts
index 05a7db1b5..7c9e8daf5 100644
--- a/editor/grida-canvas/backends/dom.ts
+++ b/editor/grida-canvas/backends/dom.ts
@@ -3,6 +3,8 @@ import cmath from "@grida/cmath";
 
 /**
  * A dom api for the canvas html backend.
+ *
+ * @deprecated
  */
 export namespace domapi {
   export namespace k {
diff --git a/editor/grida-canvas/editor.ts b/editor/grida-canvas/editor.ts
index eb236da01..3054edb9f 100644
--- a/editor/grida-canvas/editor.ts
+++ b/editor/grida-canvas/editor.ts
@@ -2,18 +2,87 @@ import produce from "immer";
 import { Action, editor } from ".";
 import reducer from "./reducers";
 import grida from "@grida/schema";
+import cg from "@grida/cg";
+import nid from "./reducers/tools/id";
+import type { tokens } from "@grida/tokens";
+import type { BitmapEditorBrush } from "@grida/bitmap";
+import cmath from "@grida/cmath";
+import assert from "assert";
+import { domapi } from "./backends/dom";
+import { animateTransformTo } from "./animation";
+import { TCanvasEventTargetDragGestureState } from "./action";
 
-export class Editor {
+function throttle<T extends (...args: any[]) => void>(
+  func: T,
+  limit: number
+): T {
+  let inThrottle: boolean;
+  return function (this: any, ...args: Parameters<T>) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  } as T;
+}
+
+function resolveNumberChangeValue(
+  node: grida.program.nodes.UnknwonNode,
+  key: keyof grida.program.nodes.UnknwonNode,
+  change: editor.api.NumberChange
+): number {
+  switch (change.type) {
+    case "set":
+      return change.value;
+    case "delta": {
+      if (node[key] === null || node[key] === undefined) {
+        throw new Error(`Node ${key} is not set`);
+      }
+      assert(typeof node[key] === "number", `Node ${key} is not a number`);
+      return node[key] + change.value;
+    }
+    default:
+      throw new Error(
+        `Invalid number change type: ${(change as editor.api.NumberChange).type}`
+      );
+  }
+}
+
+export class Editor
+  implements
+    editor.api.IDocumentEditorActions,
+    editor.api.ISchemaActions,
+    editor.api.INodeChangeActions,
+    editor.api.IBrushToolActions,
+    editor.api.IPixelGridActions,
+    editor.api.IRulerActions,
+    editor.api.IGuide2DActions,
+    editor.api.ICameraActions,
+    editor.api.IEventTargetActions
+{
+  private readonly __pointer_move_throttle_ms: number = 30;
   private listeners: Set<(editor: this, action?: Action) => void>;
   private mstate: editor.state.IEditorState;
+  get state(): Readonly<editor.state.IEditorState> {
+    return this.mstate;
+  }
 
-  constructor(initialState: editor.state.IEditorStateInit) {
-    this.listeners = new Set();
+  constructor(
+    initialState: editor.state.IEditorStateInit,
+    instanceConfig: {
+      pointer_move_throttle_ms: number;
+    } = { pointer_move_throttle_ms: 30 }
+  ) {
     this.mstate = editor.state.init(initialState);
+    this.listeners = new Set();
+    this.__pointer_move_throttle_ms = instanceConfig.pointer_move_throttle_ms;
   }
 
   private _locked: boolean = false;
 
+  /**
+   * If the editor is locked, no actions will be dispatched. (unless forced)
+   */
   get locked() {
     return this._locked;
   }
@@ -48,6 +117,11 @@ export class Editor {
     );
   }
 
+  private __createNodeId(): editor.NodeID {
+    // TODO: use a instance-wise generator
+    return nid();
+  }
+
   public insert(
     payload:
       | {
@@ -75,7 +149,7 @@ export class Editor {
     return () => this.listeners.delete(fn);
   }
 
-  public getSnapshot() {
+  public getSnapshot(): Readonly<editor.state.IEditorState> {
     return this.mstate;
   }
 
@@ -86,4 +160,1412 @@ export class Editor {
   public getDocumentJson(): unknown {
     return JSON.parse(JSON.stringify(this.mstate.document));
   }
+
+  // #region IDocumentEditorActions implementation
+  public loadScene(scene_id: string) {
+    this.dispatch({
+      type: "load",
+      scene: scene_id,
+    });
+  }
+
+  public createScene(scene?: grida.program.document.SceneInit) {
+    this.dispatch({
+      type: "scenes/new",
+      scene: scene,
+    });
+  }
+
+  public deleteScene(scene_id: string) {
+    this.dispatch({
+      type: "scenes/delete",
+      scene: scene_id,
+    });
+  }
+
+  public duplicateScene(scene_id: string) {
+    this.dispatch({
+      type: "scenes/duplicate",
+      scene: scene_id,
+    });
+  }
+
+  public renameScene(scene_id: string, name: string) {
+    this.dispatch({
+      type: "scenes/change/name",
+      scene: scene_id,
+      name,
+    });
+  }
+
+  public changeSceneBackground(
+    scene_id: string,
+    backgroundColor: grida.program.document.ISceneBackground["backgroundColor"]
+  ) {
+    this.dispatch({
+      type: "scenes/change/background-color",
+      scene: scene_id,
+      backgroundColor,
+    });
+  }
+
+  setTool(tool: editor.state.ToolMode) {
+    this.dispatch({
+      type: "surface/tool",
+      tool: tool,
+    });
+  }
+
+  /**
+   * Try to enter content edit mode - only works when the selected node is a text or vector node
+   *
+   * when triggered on such invalid context, it should be a no-op
+   */
+  tryEnterContentEditMode() {
+    this.dispatch({
+      type: "surface/content-edit-mode/try-enter",
+    });
+  }
+
+  tryExitContentEditMode() {
+    this.dispatch({
+      type: "surface/content-edit-mode/try-exit",
+    });
+  }
+
+  tryToggleContentEditMode() {
+    if (this.mstate.content_edit_mode) {
+      this.tryExitContentEditMode();
+    } else {
+      this.tryEnterContentEditMode();
+    }
+  }
+
+  public select(...selectors: grida.program.document.Selector[]) {
+    this.dispatch({
+      type: "select",
+      selectors,
+    });
+  }
+
+  public blur() {
+    this.dispatch({
+      type: "blur",
+    });
+  }
+
+  public undo() {
+    this.dispatch({
+      type: "undo",
+    });
+  }
+
+  public redo() {
+    this.dispatch({
+      type: "redo",
+    });
+  }
+
+  public cut(target: "selection" | editor.NodeID) {
+    this.dispatch({
+      type: "cut",
+      target,
+    });
+  }
+
+  public copy(target: "selection" | editor.NodeID) {
+    this.dispatch({
+      type: "copy",
+      target,
+    });
+  }
+
+  public paste() {
+    this.dispatch({
+      type: "paste",
+    });
+  }
+
+  public duplicate(target: "selection" | editor.NodeID) {
+    this.dispatch({
+      type: "duplicate",
+      target,
+    });
+  }
+
+  public setClipboardColor(color: cg.RGBA8888) {
+    this.dispatch({
+      type: "clip/color",
+      color,
+    });
+  }
+
+  public deleteNode(target: "selection" | editor.NodeID) {
+    this.dispatch({
+      type: "delete",
+      target,
+    });
+  }
+
+  public selectVertex(node_id: editor.NodeID, vertex: number) {
+    this.dispatch({
+      type: "select-vertex",
+      target: {
+        node_id,
+        vertex,
+      },
+    });
+  }
+
+  public deleteVertex(node_id: editor.NodeID, vertex: number) {
+    this.dispatch({
+      type: "delete-vertex",
+      target: {
+        node_id,
+        vertex,
+      },
+    });
+  }
+
+  public getNodeSnapshotById(
+    node_id: editor.NodeID
+  ): Readonly<grida.program.nodes.Node> {
+    return editor.dq.__getNodeById(this.mstate, node_id);
+  }
+
+  public getNodeById(
+    node_id: editor.NodeID
+  ): NodeProxy<grida.program.nodes.Node> {
+    return new NodeProxy(this, node_id);
+  }
+
+  public getNodeDepth(node_id: editor.NodeID): number {
+    return editor.dq.getDepth(this.mstate.document_ctx, node_id);
+  }
+
+  public getNodeAbsoluteRotation(node_id: editor.NodeID): number {
+    const parent_ids = editor.dq.getAncestors(this.state.document_ctx, node_id);
+
+    let rotation = 0;
+    // Calculate the absolute rotation
+    try {
+      for (const parent_id of parent_ids) {
+        const parent_node = this.getNodeSnapshotById(parent_id);
+        assert(parent_node, `parent node not found: ${parent_id}`);
+        if ("rotation" in parent_node) {
+          rotation += parent_node.rotation ?? 0;
+        }
+      }
+
+      // finally, add the node's own rotation
+      const node = this.getNodeSnapshotById(node_id);
+      assert(node, `node not found: ${node_id}`);
+      if ("rotation" in node) {
+        rotation += node.rotation ?? 0;
+      }
+    } catch (e) {
+      reportError(e);
+    }
+
+    return rotation;
+  }
+
+  public insertNode(prototype: grida.program.nodes.NodePrototype) {
+    const id = this.__createNodeId();
+    this.dispatch({
+      type: "insert",
+      id,
+      prototype,
+    });
+    return id;
+  }
+
+  public nudgeResize(
+    target: "selection" | editor.NodeID = "selection",
+    axis: "x" | "y",
+    delta: number = 1
+  ) {
+    this.dispatch({
+      type: "nudge-resize",
+      delta,
+      axis,
+      target,
+    });
+  }
+
+  public align(
+    target: "selection" | editor.NodeID,
+    alignment: {
+      horizontal?: "none" | "min" | "max" | "center";
+      vertical?: "none" | "min" | "max" | "center";
+    }
+  ) {
+    this.dispatch({
+      type: "align",
+      target,
+      alignment,
+    });
+  }
+
+  public order(
+    target: "selection" | editor.NodeID,
+    order: "back" | "front" | number
+  ) {
+    this.dispatch({
+      type: "order",
+      target,
+      order,
+    });
+  }
+
+  public mv(source: editor.NodeID[], target: editor.NodeID, index?: number) {
+    this.dispatch({
+      type: "mv",
+      source,
+      target,
+      index,
+    });
+  }
+
+  public distributeEvenly(
+    target: "selection" | editor.NodeID[],
+    axis: "x" | "y"
+  ) {
+    this.dispatch({
+      type: "distribute-evenly",
+      target,
+      axis,
+    });
+  }
+
+  public autoLayout(target: "selection" | editor.NodeID[]) {
+    this.dispatch({
+      type: "autolayout",
+      target,
+    });
+  }
+
+  public contain(target: "selection" | editor.NodeID[]) {
+    this.dispatch({
+      type: "contain",
+      target,
+    });
+  }
+
+  public configureSurfaceRaycastTargeting(
+    config: Partial<editor.state.HitTestingConfig>
+  ) {
+    this.dispatch({
+      type: "config/surface/raycast-targeting",
+      config,
+    });
+  }
+
+  public configureMeasurement(measurement: "on" | "off") {
+    this.dispatch({
+      type: "config/surface/measurement",
+      measurement,
+    });
+  }
+
+  public configureTranslateWithCloneModifier(
+    translate_with_clone: "on" | "off"
+  ) {
+    this.dispatch({
+      type: "config/modifiers/translate-with-clone",
+      translate_with_clone,
+    });
+  }
+
+  public configureTranslateWithAxisLockModifier(
+    tarnslate_with_axis_lock: "on" | "off"
+  ) {
+    this.dispatch({
+      type: "config/modifiers/translate-with-axis-lock",
+      tarnslate_with_axis_lock,
+    });
+  }
+
+  public configureTransformWithCenterOriginModifier(
+    transform_with_center_origin: "on" | "off"
+  ) {
+    this.dispatch({
+      type: "config/modifiers/transform-with-center-origin",
+      transform_with_center_origin,
+    });
+  }
+
+  public configureTransformWithPreserveAspectRatioModifier(
+    transform_with_preserve_aspect_ratio: "on" | "off"
+  ) {
+    this.dispatch({
+      type: "config/modifiers/transform-with-preserve-aspect-ratio",
+      transform_with_preserve_aspect_ratio,
+    });
+  }
+
+  public configureRotateWithQuantizeModifier(
+    rotate_with_quantize: number | "off"
+  ) {
+    this.dispatch({
+      type: "config/modifiers/rotate-with-quantize",
+      rotate_with_quantize,
+    });
+  }
+
+  public toggleActive(target: "selection" | editor.NodeID = "selection") {
+    const target_ids =
+      target === "selection" ? this.mstate.selection : [target];
+
+    for (const node_id of target_ids) {
+      this.toggleNodeActive(node_id);
+    }
+  }
+
+  public toggleLocked(target: "selection" | editor.NodeID = "selection") {
+    const target_ids =
+      target === "selection" ? this.mstate.selection : [target];
+    for (const node_id of target_ids) {
+      this.toggleNodeLocked(node_id);
+    }
+  }
+
+  public toggleBold(target: "selection" | editor.NodeID = "selection") {
+    const target_ids =
+      target === "selection" ? this.mstate.selection : [target];
+    target_ids.forEach((node_id) => {
+      this.dispatch({
+        type: "node/toggle/bold",
+        node_id,
+      });
+    });
+  }
+
+  public setOpacity(
+    target: "selection" | editor.NodeID = "selection",
+    opacity: number
+  ) {
+    const target_ids =
+      target === "selection" ? this.mstate.selection : [target];
+    for (const node_id of target_ids) {
+      this.changeNodeOpacity(node_id, { type: "set", value: opacity });
+    }
+  }
+
+  // #endregion IDocumentEditorActions implementation
+
+  // #region ISchemaActions implementation
+  public schemaDefineProperty(
+    key?: string,
+    definition?: grida.program.schema.PropertyDefinition
+  ) {
+    this.dispatch({
+      type: "document/properties/define",
+      key,
+      definition,
+    });
+  }
+
+  public schemaRenameProperty(key: string, newName: string) {
+    this.dispatch({
+      type: "document/properties/rename",
+      key,
+      newKey: newName,
+    });
+  }
+
+  public schemaUpdateProperty(
+    key: string,
+    definition: grida.program.schema.PropertyDefinition
+  ) {
+    this.dispatch({
+      type: "document/properties/update",
+      key,
+      definition,
+    });
+  }
+
+  public schemaPutProperty(key: string, value: any) {
+    this.dispatch({
+      type: "document/properties/put",
+      key,
+      definition: value,
+    });
+  }
+
+  public schemaDeleteProperty(key: string) {
+    this.dispatch({
+      type: "document/properties/delete",
+      key,
+    });
+  }
+  // #endregion ISchemaActions implementation
+
+  // #region INodeChangeActions
+
+  toggleNodeActive(node_id: string) {
+    const next = !this.getNodeSnapshotById(node_id).active;
+    this.changeNodeActive(node_id, next);
+    return next;
+  }
+  toggleNodeLocked(node_id: string) {
+    const next = !this.getNodeSnapshotById(node_id).locked;
+    this.changeNodeLocked(node_id, next);
+    return next;
+  }
+  toggleNodeBold(node_id: string) {
+    this.dispatch({
+      type: "node/toggle/bold",
+      node_id: node_id,
+    });
+  }
+  changeNodeProps(
+    node_id: string,
+    key: string,
+    value?: tokens.StringValueExpression
+  ) {
+    this.dispatch({
+      type: "node/change/props",
+      node_id: node_id,
+      props: {
+        [key]: value,
+      },
+    });
+  }
+  changeNodeComponent(node_id: string, component_id: string) {
+    this.dispatch({
+      type: "node/change/component",
+      node_id: node_id,
+      component_id: component_id,
+    });
+  }
+  changeNodeText(node_id: string, text: tokens.StringValueExpression | null) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      text,
+    });
+  }
+  changeNodeName(node_id: string, name: string) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      name: name ?? "",
+    });
+  }
+  changeNodeUserData(node_id: string, userdata: unknown) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      userdata: userdata as any,
+    });
+  }
+  changeNodeActive(node_id: string, active: boolean) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      active: active,
+    });
+  }
+  changeNodeLocked(node_id: string, locked: boolean) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      locked: locked,
+    });
+  }
+  changeNodePositioning(
+    node_id: string,
+    positioning: Partial<grida.program.nodes.i.IPositioning>
+  ) {
+    this.dispatch({
+      type: "node/change/positioning",
+      node_id: node_id,
+      ...positioning,
+    });
+  }
+  changeNodePositioningMode(
+    node_id: string,
+    position: grida.program.nodes.i.IPositioning["position"]
+  ) {
+    this.dispatch({
+      type: "node/change/positioning-mode",
+      node_id: node_id,
+      position,
+    });
+  }
+  changeNodeSrc(node_id: string, src?: tokens.StringValueExpression) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      src,
+    });
+  }
+  changeNodeHref(
+    node_id: string,
+    href?: grida.program.nodes.i.IHrefable["href"]
+  ) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      href,
+    });
+  }
+  changeNodeTarget(
+    node_id: string,
+    target?: grida.program.nodes.i.IHrefable["target"]
+  ) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      target,
+    });
+  }
+  changeNodeOpacity(node_id: string, opacity: editor.api.NumberChange) {
+    requestAnimationFrame(() => {
+      try {
+        const value = resolveNumberChangeValue(
+          this.getNodeSnapshotById(node_id) as grida.program.nodes.UnknwonNode,
+          "opacity",
+          opacity
+        );
+
+        this.dispatch({
+          type: "node/change/*",
+          node_id: node_id,
+          opacity: value,
+        });
+      } catch (e) {
+        reportError(e);
+        return;
+      }
+    });
+  }
+  changeNodeRotation(node_id: string, rotation: editor.api.NumberChange) {
+    requestAnimationFrame(() => {
+      try {
+        const value = resolveNumberChangeValue(
+          this.getNodeSnapshotById(node_id) as grida.program.nodes.UnknwonNode,
+          "rotation",
+          rotation
+        );
+
+        this.dispatch({
+          type: "node/change/*",
+          node_id: node_id,
+          rotation: value,
+        });
+      } catch (e) {
+        reportError(e);
+        return;
+      }
+    });
+  }
+  changeNodeSize(
+    node_id: string,
+    axis: "width" | "height",
+    value: grida.program.css.LengthPercentage | "auto"
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        [axis]: value,
+      });
+    });
+  }
+  changeNodeFill(
+    node_id: string,
+    fill: grida.program.nodes.i.props.SolidPaintToken | cg.PaintWithoutID | null
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        fill: fill as cg.Paint,
+      });
+    });
+  }
+  changeNodeStroke(
+    node_id: string,
+    stroke:
+      | grida.program.nodes.i.props.SolidPaintToken
+      | cg.PaintWithoutID
+      | null
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        stroke: stroke as cg.Paint,
+      });
+    });
+  }
+  changeNodeStrokeWidth(node_id: string, strokeWidth: editor.api.NumberChange) {
+    try {
+      const value = resolveNumberChangeValue(
+        this.getNodeSnapshotById(node_id) as grida.program.nodes.UnknwonNode,
+        "strokeWidth",
+        strokeWidth
+      );
+
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        strokeWidth: value,
+      });
+    } catch (e) {
+      reportError(e);
+      return;
+    }
+  }
+  changeNodeStrokeCap(node_id: string, strokeCap: cg.StrokeCap) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      strokeCap,
+    });
+  }
+  changeNodeFit(node_id: string, fit: cg.BoxFit) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      fit,
+    });
+  }
+  changeNodeCornerRadius(
+    node_id: string,
+    cornerRadius: grida.program.nodes.i.IRectangleCorner["cornerRadius"]
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        cornerRadius,
+      });
+    });
+  }
+  // text style
+  changeTextNodeFontFamily(node_id: string, fontFamily: string | undefined) {
+    this.dispatch({
+      type: "node/change/fontFamily",
+      node_id: node_id,
+      fontFamily,
+    });
+  }
+  changeTextNodeFontWeight(node_id: string, fontWeight: cg.NFontWeight) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      fontWeight,
+    });
+  }
+  changeTextNodeFontSize(node_id: string, fontSize: editor.api.NumberChange) {
+    try {
+      const value = resolveNumberChangeValue(
+        this.getNodeSnapshotById(node_id) as grida.program.nodes.UnknwonNode,
+        "fontSize",
+        fontSize
+      );
+
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        fontSize: value,
+      });
+    } catch (e) {
+      reportError(e);
+      return;
+    }
+  }
+  changeTextNodeTextAlign(node_id: string, textAlign: cg.TextAlign) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      textAlign,
+    });
+  }
+  changeTextNodeTextAlignVertical(
+    node_id: string,
+    textAlignVertical: cg.TextAlignVertical
+  ) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      textAlignVertical,
+    });
+  }
+
+  changeTextNodeLineHeight(
+    node_id: string,
+    lineHeight: editor.api.NumberChange
+  ) {
+    try {
+      const value = resolveNumberChangeValue(
+        this.getNodeSnapshotById(node_id) as grida.program.nodes.UnknwonNode,
+        "lineHeight",
+        lineHeight
+      );
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        lineHeight: value,
+      });
+    } catch (e) {
+      reportError(e);
+      return;
+    }
+  }
+
+  changeTextNodeLetterSpacing(
+    node_id: string,
+    letterSpacing: editor.api.TChange<
+      grida.program.nodes.TextNode["letterSpacing"]
+    >
+  ) {
+    try {
+      let value: number | undefined;
+      if (letterSpacing.value === undefined) {
+        value = undefined;
+      } else {
+        value = resolveNumberChangeValue(
+          this.getNodeSnapshotById(node_id) as grida.program.nodes.UnknwonNode,
+          "letterSpacing",
+          letterSpacing as editor.api.NumberChange
+        );
+      }
+
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        letterSpacing: value,
+      });
+    } catch (e) {
+      reportError(e);
+      return;
+    }
+  }
+
+  changeTextNodeMaxlength(node_id: string, maxLength: number | undefined) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      maxLength,
+    });
+  }
+
+  //
+  changeNodeBorder(
+    node_id: string,
+    border: grida.program.css.Border | undefined
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        border: border,
+      });
+    });
+  }
+  //
+  changeContainerNodePadding(
+    node_id: string,
+    padding: grida.program.nodes.i.IPadding["padding"]
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        padding,
+      });
+    });
+  }
+
+  changeNodeBoxShadow(node_id: string, boxShadow?: cg.BoxShadow) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        boxShadow,
+      });
+    });
+  }
+
+  changeContainerNodeLayout(
+    node_id: string,
+    layout: grida.program.nodes.i.IFlexContainer["layout"]
+  ) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      layout,
+    });
+  }
+
+  changeFlexContainerNodeDirection(node_id: string, direction: cg.Axis) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      direction,
+    });
+  }
+
+  changeFlexContainerNodeMainAxisAlignment(
+    node_id: string,
+    mainAxisAlignment: cg.MainAxisAlignment
+  ) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      mainAxisAlignment,
+    });
+  }
+
+  changeFlexContainerNodeCrossAxisAlignment(
+    node_id: string,
+    crossAxisAlignment: cg.CrossAxisAlignment
+  ) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id: node_id,
+      crossAxisAlignment,
+    });
+  }
+  changeFlexContainerNodeGap(
+    node_id: string,
+    gap: number | { mainAxisGap: number; crossAxisGap: number }
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/*",
+        node_id: node_id,
+        mainAxisGap: typeof gap === "number" ? gap : gap.mainAxisGap,
+        crossAxisGap: typeof gap === "number" ? gap : gap.crossAxisGap,
+      });
+    });
+  }
+  //
+  changeNodeMouseCursor(node_id: string, cursor: cg.SystemMouseCursor) {
+    this.dispatch({
+      type: "node/change/*",
+      node_id,
+      cursor,
+    });
+  }
+  changeNodeStyle(
+    node_id: string,
+    key: keyof grida.program.css.ExplicitlySupportedCSSProperties,
+    value: any
+  ) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "node/change/style",
+        node_id: node_id,
+        style: {
+          [key]: value,
+        },
+      });
+    });
+  }
+  // #endregion INodeChangeActions
+
+  // #region IBrushToolActions implementation
+  changeBrush(brush: BitmapEditorBrush) {
+    this.dispatch({
+      type: "surface/brush",
+      brush,
+    });
+  }
+  changeBrushSize(size: editor.api.NumberChange) {
+    this.dispatch({
+      type: "surface/brush/size",
+      size,
+    });
+  }
+  changeBrushOpacity(opacity: editor.api.NumberChange) {
+    this.dispatch({
+      type: "surface/brush/opacity",
+      opacity,
+    });
+  }
+  // #endregion IBrushToolActions implementation
+
+  // #region IPixelGridActions implementation
+  configurePixelGrid(state: "on" | "off") {
+    this.dispatch({
+      type: "surface/pixel-grid",
+      state,
+    });
+  }
+  togglePixelGrid(): "on" | "off" {
+    const { pixelgrid } = this.state;
+    const next = pixelgrid === "on" ? "off" : "on";
+    this.configurePixelGrid(next);
+    return next;
+  }
+  // #endregion IPixelGridActions implementation
+
+  // #region IRulerActions implementation
+  configureRuler(state: "on" | "off") {
+    this.dispatch({
+      type: "surface/ruler",
+      state,
+    });
+  }
+  toggleRuler(): "on" | "off" {
+    const { ruler } = this.state;
+    const next = ruler === "on" ? "off" : "on";
+    this.configureRuler(next);
+    return next;
+  }
+  // #endregion IRulerActions implementation
+
+  // #region IGuide2DActions implementation
+
+  /**
+   * TODO: use id instead of idx
+   */
+  deleteGuide(idx: number) {
+    this.dispatch({
+      type: "surface/guide/delete",
+      idx,
+    });
+  }
+  // #endregion IGuide2DActions implementation
+
+  // #region ICameraActions implementation
+  transform(transform: cmath.Transform) {
+    this.dispatch({
+      type: "transform",
+      transform,
+    });
+  }
+
+  zoom(delta: number, origin: cmath.Vector2) {
+    const { transform } = this.state;
+    const _scale = transform[0][0];
+    // the origin point of the zooming point in x, y (surface space)
+    const [ox, oy] = origin;
+
+    // Apply proportional zooming
+    const scale = _scale + _scale * delta;
+
+    const newscale = cmath.clamp(
+      scale,
+      editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MIN,
+      editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MAX
+    );
+    const [tx, ty] = cmath.transform.getTranslate(transform);
+
+    // calculate the offset that should be applied with scale with css transform.
+    const [newx, newy] = [
+      ox - (ox - tx) * (newscale / _scale),
+      oy - (oy - ty) * (newscale / _scale),
+    ];
+
+    const next: cmath.Transform = [
+      [newscale, transform[0][1], newx],
+      [transform[1][0], newscale, newy],
+    ];
+
+    this.dispatch({
+      type: "transform",
+      transform: next,
+    });
+  }
+
+  pan(delta: [dx: number, dy: number]) {
+    this.dispatch({
+      type: "transform",
+      transform: cmath.transform.translate(this.state.transform, delta),
+    });
+  }
+
+  scale(
+    factor: number | cmath.Vector2,
+    origin: cmath.Vector2 | "center" = "center"
+  ) {
+    const { transform } = this.state;
+    const [fx, fy] = typeof factor === "number" ? [factor, factor] : factor;
+    const _scale = transform[0][0];
+    let ox, oy: number;
+    if (origin === "center") {
+      // Canvas size (you need to know or pass this)
+      const { width, height } = domapi.get_viewport_rect();
+
+      // Calculate the absolute transform origin
+      ox = width / 2;
+      oy = height / 2;
+    } else {
+      [ox, oy] = origin;
+    }
+
+    const sx = cmath.clamp(
+      fx,
+      editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MIN,
+      editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MAX
+    );
+
+    const sy = cmath.clamp(
+      fy,
+      editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MIN,
+      editor.config.DEFAULT_CANVAS_TRANSFORM_SCALE_MAX
+    );
+
+    const [tx, ty] = cmath.transform.getTranslate(transform);
+
+    // calculate the offset that should be applied with scale with css transform.
+    const [newx, newy] = [
+      ox - (ox - tx) * (sx / _scale),
+      oy - (oy - ty) * (sy / _scale),
+    ];
+
+    const next: cmath.Transform = [
+      [sx, transform[0][1], newx],
+      [transform[1][0], sy, newy],
+    ];
+
+    this.transform(next);
+  }
+
+  /**
+   * Transform to fit
+   */
+  fit(
+    selector: grida.program.document.Selector,
+    options: {
+      margin?: number | [number, number, number, number];
+      animate?: boolean;
+    } = {
+      margin: 64,
+      animate: false,
+    }
+  ) {
+    const { document_ctx, selection, transform } = this.state;
+    const ids = editor.dq.querySelector(document_ctx, selection, selector);
+
+    const cdom = new domapi.CanvasDOM(transform);
+
+    const rects = ids
+      .map((id) => cdom.getNodeBoundingRect(id))
+      .filter((r) => r) as cmath.Rectangle[];
+
+    if (rects.length === 0) {
+      return;
+    }
+
+    const area = cmath.rect.union(rects);
+
+    const _view = domapi.get_viewport_rect();
+    const view = { x: 0, y: 0, width: _view.width, height: _view.height };
+
+    const next_transform = cmath.ext.viewport.transformToFit(
+      view,
+      area,
+      options.margin
+    );
+
+    if (options.animate) {
+      animateTransformTo(transform, next_transform, (t) => {
+        this.transform(t);
+      });
+    } else {
+      this.transform(next_transform);
+    }
+  }
+
+  zoomIn() {
+    const { transform } = this.state;
+    const prevscale = transform[0][0];
+    const nextscale = cmath.quantize(prevscale * 2, 0.01);
+
+    this.scale(nextscale);
+  }
+
+  zoomOut() {
+    const { transform } = this.state;
+    const prevscale = transform[0][0];
+    const nextscale = cmath.quantize(prevscale / 2, 0.01);
+
+    this.scale(nextscale);
+  }
+  // #endregion ICameraActions implementation
+
+  // #region IEventTargetActions implementation
+
+  pointerDown(event: PointerEvent) {
+    const els = domapi.get_grida_node_elements_from_point(
+      event.clientX,
+      event.clientY
+    );
+
+    this.dispatch({
+      type: "event-target/event/on-pointer-down",
+      node_ids_from_point: els.map((n) => n.id),
+      shiftKey: event.shiftKey,
+    });
+  }
+
+  pointerUp(event: PointerEvent) {
+    this.dispatch({
+      type: "event-target/event/on-pointer-up",
+    });
+  }
+
+  private __canvas_space_position = (
+    pointer_event: PointerEvent | MouseEvent
+  ) => {
+    const { clientX, clientY } = pointer_event;
+
+    const canvas_rect = domapi.get_viewport_rect();
+    const position = {
+      x: clientX - canvas_rect.left,
+      y: clientY - canvas_rect.top,
+    };
+
+    return position;
+  };
+
+  private _throttled_pointer_move_with_raycast = throttle(
+    (event: PointerEvent, position: { x: number; y: number }) => {
+      // this is throttled - as it is expensive
+      const els = domapi.get_grida_node_elements_from_point(
+        event.clientX,
+        event.clientY
+      );
+
+      this.dispatch({
+        type: "event-target/event/on-pointer-move-raycast",
+        node_ids_from_point: els.map((n) => n.id),
+        position,
+        shiftKey: event.shiftKey,
+      });
+    },
+    this.__pointer_move_throttle_ms
+  );
+
+  pointerMove(event: PointerEvent) {
+    const position = this.__canvas_space_position(event);
+
+    this.dispatch({
+      type: "event-target/event/on-pointer-move",
+      position_canvas: position,
+      position_client: { x: event.clientX, y: event.clientY },
+    });
+
+    this._throttled_pointer_move_with_raycast(event, position);
+  }
+
+  click(event: MouseEvent) {
+    const els = domapi.get_grida_node_elements_from_point(
+      event.clientX,
+      event.clientY
+    );
+
+    this.dispatch({
+      type: "event-target/event/on-click",
+      node_ids_from_point: els.map((n) => n.id),
+      shiftKey: event.shiftKey,
+    });
+  }
+
+  doubleClick(event: MouseEvent) {
+    this.dispatch({
+      type: "event-target/event/on-double-click",
+    });
+  }
+
+  dragStart(event: PointerEvent) {
+    this.dispatch({
+      type: "event-target/event/on-drag-start",
+      shiftKey: event.shiftKey,
+    });
+  }
+
+  dragEnd(event: PointerEvent) {
+    const { transform, marquee } = this.state;
+    if (marquee) {
+      // test area in canvas space
+      const area = cmath.rect.fromPoints([marquee.a, marquee.b]);
+
+      const cdom = new domapi.CanvasDOM(transform);
+      const contained = cdom.getNodesIntersectsArea(area);
+
+      this.dispatch({
+        type: "event-target/event/on-drag-end",
+        node_ids_from_area: contained,
+        shiftKey: event.shiftKey,
+      });
+
+      return;
+    }
+    this.dispatch({
+      type: "event-target/event/on-drag-end",
+      shiftKey: event.shiftKey,
+    });
+  }
+
+  drag(event: TCanvasEventTargetDragGestureState) {
+    requestAnimationFrame(() => {
+      this.dispatch({
+        type: "event-target/event/on-drag",
+        event,
+      });
+    });
+  }
+
+  //
+
+  public hoverNode(node_id: string, event: "enter" | "leave") {
+    this.dispatch({
+      type: "hover",
+      target: node_id,
+      event,
+    });
+  }
+
+  public hoverEnterNode(node_id: string) {
+    this.hoverNode(node_id, "enter");
+  }
+
+  public hoverLeaveNode(node_id: string) {
+    this.hoverNode(node_id, "leave");
+  }
+
+  public hoverVertex(
+    node_id: string,
+    vertex: number,
+    event: "enter" | "leave"
+  ) {
+    this.dispatch({
+      type: "hover-vertex",
+      event: event,
+      target: {
+        node_id,
+        vertex,
+      },
+    });
+  }
+
+  startGuideGesture(axis: cmath.Axis, idx: number | -1) {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        idx: idx,
+        type: "guide",
+        axis,
+      },
+    });
+  }
+
+  startScaleGesture(
+    selection: string | string[],
+    direction: cmath.CardinalDirection
+  ) {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "scale",
+        selection: Array.isArray(selection) ? selection : [selection],
+        direction,
+      },
+    });
+  }
+
+  startSortGesture(selection: string | string[], node_id: string) {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "sort",
+        selection: Array.isArray(selection) ? selection : [selection],
+        node_id,
+      },
+    });
+  }
+
+  startGapGesture(selection: string | string[], axis: "x" | "y") {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "gap",
+        selection: selection,
+        axis,
+      },
+    });
+  }
+
+  // #region drag resize handle
+  startCornerRadiusGesture(selection: string) {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "corner-radius",
+        node_id: selection,
+      },
+    });
+  }
+  // #endregion drag resize handle
+
+  startRotateGesture(selection: string) {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "rotate",
+        selection,
+      },
+    });
+  }
+
+  startTranslateVertexGesture(node_id: string, vertex: number) {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "translate-vertex",
+        vertex,
+        node_id,
+      },
+    });
+  }
+
+  startCurveGesture(node_id: string, segment: number, control: "ta" | "tb") {
+    this.dispatch({
+      type: "surface/gesture/start",
+      gesture: {
+        type: "curve",
+        node_id,
+        control,
+        segment,
+      },
+    });
+  }
+
+  // #endregion IEventTargetActions implementation
+}
+
+export class NodeProxy<T extends grida.program.nodes.Node> {
+  constructor(
+    private editor: Editor,
+    private node_id: string
+  ) {
+    // @ts-expect-error - this is a workaround to allow the proxy to be used as a node
+    return new Proxy(this, {
+      get: (target, prop: string) => {
+        return (target.editor.getNodeSnapshotById(target.node_id) as T)[
+          prop as keyof T
+        ];
+      },
+      set: (target, prop: string, value) => {
+        try {
+          target.editor.dispatch({
+            type: "node/change/*",
+            node_id: target.node_id,
+            [prop]: value,
+          });
+          return true;
+        } catch (e) {
+          return false; // unknown prop
+        }
+      },
+    }) as T;
+  }
 }
diff --git a/editor/grida-canvas/index.ts b/editor/grida-canvas/index.ts
index 0e39813d4..debe1559c 100644
--- a/editor/grida-canvas/index.ts
+++ b/editor/grida-canvas/index.ts
@@ -1,8 +1,13 @@
-import type { Action, EditorAction, TChange } from "@/grida-canvas/action";
+import type {
+  Action,
+  EditorAction,
+  TCanvasEventTargetDragGestureState,
+} from "@/grida-canvas/action";
 import type { BitmapEditorBrush, BitmapLayerEditor } from "@grida/bitmap";
 import type cg from "@grida/cg";
 import type { SnapToObjectsResult } from "@grida/cmath/_snap";
 import type { tokens } from "@grida/tokens";
+import type { NodeProxy } from "./editor";
 import cmath from "@grida/cmath";
 import grida from "@grida/schema";
 import assert from "assert";
@@ -1714,6 +1719,37 @@ export namespace editor.a11y {
 }
 
 export namespace editor.api {
+  export class EditorConsumerVerboseError extends Error {
+    context: any;
+    constructor(message: string, context: any) {
+      super(message); // Pass message to the parent Error class
+      this.name = this.constructor.name; // Set the error name
+      this.context = context; // Attach the context object
+      if (Error.captureStackTrace) {
+        Error.captureStackTrace(this, this.constructor);
+      }
+    }
+
+    toString(): string {
+      return `${this.name}: ${this.message} - Context: ${JSON.stringify(this.context)}`;
+    }
+  }
+
+  export type TChange<T> =
+    | {
+        type: "set";
+        value: T;
+      }
+    | {
+        type: "delta";
+        value: NonNullable<T>;
+      };
+
+  /**
+   * Numeric value change payload.
+   */
+  export type NumberChange = TChange<number>;
+
   export type NudgeUXConfig = {
     /**
      * when gesture is true, it will set the gesture state to trigger the surface guide rendering.
@@ -1731,312 +1767,319 @@ export namespace editor.api {
   };
 
   export interface INodeChangeActions {
-    toggleNodeActive: (node_id: NodeID) => void;
-    toggleNodeLocked: (node_id: NodeID) => void;
-    toggleNodeBold: (node_id: NodeID) => void;
-    changeNodeActive: (node_id: NodeID, active: boolean) => void;
-    changeNodeLocked: (node_id: NodeID, locked: boolean) => void;
-    changeNodeName: (node_id: NodeID, name: string) => void;
-    changeNodeUserData: (node_id: NodeID, userdata: unknown) => void;
-    changeNodeSize: (
+    toggleNodeActive(node_id: NodeID): void;
+    toggleNodeLocked(node_id: NodeID): void;
+    toggleNodeBold(node_id: NodeID): void;
+    changeNodeActive(node_id: NodeID, active: boolean): void;
+    changeNodeLocked(node_id: NodeID, locked: boolean): void;
+    changeNodeName(node_id: NodeID, name: string): void;
+    changeNodeUserData(node_id: NodeID, userdata: unknown): void;
+    changeNodeSize(
       node_id: NodeID,
       axis: "width" | "height",
       value: grida.program.css.LengthPercentage | "auto"
-    ) => void;
-    changeNodeBorder: (
+    ): void;
+    changeNodeBorder(
       node_id: NodeID,
       border: grida.program.css.Border | undefined
-    ) => void;
-    changeNodeProps: (
+    ): void;
+    changeNodeProps(
       node_id: string,
       key: string,
       value?: tokens.StringValueExpression
-    ) => void;
-    changeNodeComponent: (node_id: NodeID, component: string) => void;
-    changeNodeText: (
-      node_id: NodeID,
-      text?: tokens.StringValueExpression
-    ) => void;
-    changeNodeStyle: (
+    ): void;
+    changeNodeComponent(node_id: NodeID, component: string): void;
+    changeNodeText(node_id: NodeID, text: tokens.StringValueExpression): void;
+    changeNodeStyle(
       node_id: NodeID,
       key: keyof grida.program.css.ExplicitlySupportedCSSProperties,
       value: any
-    ) => void;
-    changeNodeMouseCursor: (
+    ): void;
+    changeNodeMouseCursor(
       node_id: NodeID,
       mouseCursor: cg.SystemMouseCursor
-    ) => void;
-    changeNodeSrc: (
-      node_id: NodeID,
-      src?: tokens.StringValueExpression
-    ) => void;
-    changeNodeHref: (
+    ): void;
+    changeNodeSrc(node_id: NodeID, src?: tokens.StringValueExpression): void;
+    changeNodeHref(
       node_id: NodeID,
       href?: grida.program.nodes.i.IHrefable["href"]
-    ) => void;
-    changeNodeTarget: (
+    ): void;
+    changeNodeTarget(
       node_id: NodeID,
       target?: grida.program.nodes.i.IHrefable["target"]
-    ) => void;
-    changeNodePositioning: (
+    ): void;
+    changeNodePositioning(
       node_id: NodeID,
       positioning: grida.program.nodes.i.IPositioning
-    ) => void;
-    changeNodePositioningMode: (
+    ): void;
+    changeNodePositioningMode(
       node_id: NodeID,
       positioningMode: "absolute" | "relative"
-    ) => void;
-    changeNodeCornerRadius: (
+    ): void;
+    changeNodeCornerRadius(
       node_id: NodeID,
       cornerRadius: grida.program.nodes.i.IRectangleCorner["cornerRadius"]
-    ) => void;
-    changeNodeFill: (
+    ): void;
+    changeNodeFill(
       node_id: NodeID,
       fill:
         | grida.program.nodes.i.props.SolidPaintToken
         | cg.PaintWithoutID
         | null
-    ) => void;
-    changeNodeStroke: (
+    ): void;
+    changeNodeStroke(
       node_id: NodeID,
       stroke:
         | grida.program.nodes.i.props.SolidPaintToken
         | cg.PaintWithoutID
         | null
-    ) => void;
-    changeNodeStrokeWidth: (
+    ): void;
+    changeNodeStrokeWidth(
       node_id: NodeID,
-      strokeWidth: TChange<number>
-    ) => void;
-    changeNodeStrokeCap: (node_id: NodeID, strokeCap: cg.StrokeCap) => void;
-    changeNodeFit: (node_id: NodeID, fit: cg.BoxFit) => void;
-    changeNodeOpacity: (node_id: NodeID, opacity: TChange<number>) => void;
-    changeNodeRotation: (node_id: NodeID, rotation: TChange<number>) => void;
-    changeTextNodeFontFamily: (node_id: NodeID, fontFamily: string) => void;
-    changeTextNodeFontWeight: (
+      strokeWidth: editor.api.NumberChange
+    ): void;
+    changeNodeStrokeCap(node_id: NodeID, strokeCap: cg.StrokeCap): void;
+    changeNodeFit(node_id: NodeID, fit: cg.BoxFit): void;
+    changeNodeOpacity(node_id: NodeID, opacity: editor.api.NumberChange): void;
+    changeNodeRotation(
       node_id: NodeID,
-      fontWeight: cg.NFontWeight
-    ) => void;
-    changeTextNodeFontSize: (
+      rotation: editor.api.NumberChange
+    ): void;
+    changeTextNodeFontFamily(node_id: NodeID, fontFamily: string): void;
+    changeTextNodeFontWeight(node_id: NodeID, fontWeight: cg.NFontWeight): void;
+    changeTextNodeFontSize(
       node_id: NodeID,
-      fontSize: TChange<number>
-    ) => void;
-    changeTextNodeTextAlign: (node_id: NodeID, textAlign: cg.TextAlign) => void;
-    changeTextNodeTextAlignVertical: (
+      fontSize: editor.api.NumberChange
+    ): void;
+    changeTextNodeTextAlign(node_id: NodeID, textAlign: cg.TextAlign): void;
+    changeTextNodeTextAlignVertical(
       node_id: NodeID,
       textAlignVertical: cg.TextAlignVertical
-    ) => void;
-    changeTextNodeLineHeight: (
+    ): void;
+    changeTextNodeLineHeight(
       node_id: NodeID,
       lineHeight: TChange<grida.program.nodes.TextNode["lineHeight"]>
-    ) => void;
-    changeTextNodeLetterSpacing: (
+    ): void;
+    changeTextNodeLetterSpacing(
       node_id: NodeID,
       letterSpacing: TChange<grida.program.nodes.TextNode["letterSpacing"]>
-    ) => void;
-    changeTextNodeMaxlength: (
+    ): void;
+    changeTextNodeMaxlength(
       node_id: NodeID,
       maxlength: number | undefined
-    ) => void;
-    changeContainerNodePadding: (
+    ): void;
+    changeContainerNodePadding(
       node_id: NodeID,
       padding: grida.program.nodes.i.IPadding["padding"]
-    ) => void;
-    changeNodeBoxShadow: (node_id: NodeID, boxShadow?: cg.BoxShadow) => void;
-    changeContainerNodeLayout: (
+    ): void;
+    changeNodeBoxShadow(node_id: NodeID, boxShadow?: cg.BoxShadow): void;
+    changeContainerNodeLayout(
       node_id: NodeID,
       layout: grida.program.nodes.i.IFlexContainer["layout"]
-    ) => void;
-    changeFlexContainerNodeDirection: (
-      node_id: string,
-      direction: cg.Axis
-    ) => void;
-    changeFlexContainerNodeMainAxisAlignment: (
+    ): void;
+    changeFlexContainerNodeDirection(node_id: string, direction: cg.Axis): void;
+    changeFlexContainerNodeMainAxisAlignment(
       node_id: string,
       mainAxisAlignment: cg.MainAxisAlignment
-    ) => void;
-    changeFlexContainerNodeCrossAxisAlignment: (
+    ): void;
+    changeFlexContainerNodeCrossAxisAlignment(
       node_id: string,
       crossAxisAlignment: cg.CrossAxisAlignment
-    ) => void;
-    changeFlexContainerNodeGap: (
+    ): void;
+    changeFlexContainerNodeGap(
       node_id: string,
       gap: number | { mainAxisGap: number; crossAxisGap: number }
-    ) => void;
+    ): void;
+  }
+
+  export interface IBrushToolActions {
+    changeBrush(brush: BitmapEditorBrush): void;
+    changeBrushSize(size: editor.api.NumberChange): void;
+    changeBrushOpacity(opacity: editor.api.NumberChange): void;
+  }
+
+  export interface IPixelGridActions {
+    configurePixelGrid(state: "on" | "off"): void;
+    togglePixelGrid(): "on" | "off";
+  }
+
+  export interface IRulerActions {
+    configureRuler(state: "on" | "off"): void;
+    toggleRuler(): "on" | "off";
+  }
+
+  export interface IGuide2DActions {
+    deleteGuide(idx: number): void;
+  }
+
+  export interface ICameraActions {
+    transform(transform: cmath.Transform): void;
+
+    /**
+     * zoom the camera by the given delta
+     * @param delta the delta to zoom by
+     * @param origin the origin of the zoom
+     */
+    zoom(delta: number, origin: cmath.Vector2): void;
+    /**
+     * pan the camera by the given delta
+     * @param delta the delta to pan by
+     */
+    pan(delta: [number, number]): void;
+
+    scale(
+      factor: number | cmath.Vector2,
+      origin: cmath.Vector2 | "center"
+    ): void;
+    fit(
+      selector: grida.program.document.Selector,
+      options?: {
+        margin?: number | [number, number, number, number];
+        animate?: boolean;
+      }
+    ): void;
+    zoomIn(): void;
+    zoomOut(): void;
+  }
+
+  export interface IEventTargetActions {
+    hoverNode(node_id: string, event: "enter" | "leave"): void;
+    hoverEnterNode(node_id: string): void;
+    hoverLeaveNode(node_id: string): void;
+    hoverVertex(
+      node_id: string,
+      vertex: number,
+      event: "enter" | "leave"
+    ): void;
+
+    startGuideGesture(axis: cmath.Axis, idx: number | -1): void;
+    startScaleGesture(
+      selection: string | string[],
+      direction: cmath.CardinalDirection
+    ): void;
+    startSortGesture(selection: string | string[], node_id: string): void;
+    startGapGesture(selection: string | string[], axis: "x" | "y"): void;
+    startCornerRadiusGesture(selection: string): void;
+    startRotateGesture(selection: string): void;
+    startTranslateVertexGesture(node_id: string, vertex: number): void;
+    startCurveGesture(
+      node_id: string,
+      segment: number,
+      control: "ta" | "tb"
+    ): void;
+
+    pointerDown(event: PointerEvent): void;
+    pointerUp(event: PointerEvent): void;
+    pointerMove(event: PointerEvent): void;
+
+    click(event: MouseEvent): void;
+    doubleClick(event: MouseEvent): void;
+
+    dragStart(event: PointerEvent): void;
+    dragEnd(event: PointerEvent): void;
+    drag(event: TCanvasEventTargetDragGestureState): void;
   }
 
   export interface IDocumentEditorActions {
-    loadScene: (scene_id: string) => void;
-    createScene: (scene?: grida.program.document.SceneInit) => void;
-    deleteScene: (scene_id: string) => void;
-    duplicateScene: (scene_id: string) => void;
-    renameScene: (scene_id: string, name: string) => void;
+    loadScene(scene_id: string): void;
+    createScene(scene?: grida.program.document.SceneInit): void;
+    deleteScene(scene_id: string): void;
+    duplicateScene(scene_id: string): void;
+    renameScene(scene_id: string, name: string): void;
+    changeSceneBackground(
+      scene_id: string,
+      backgroundColor: grida.program.document.ISceneBackground["backgroundColor"]
+    ): void;
+    //
+    setTool(tool: editor.state.ToolMode): void;
+    tryExitContentEditMode(): void;
+    tryToggleContentEditMode(): void;
+    tryEnterContentEditMode(): void;
+    //
 
     //
-    hoverNode: (node_id: string, event: "enter" | "leave") => void;
-    hoverEnterNode: (node_id: string) => void;
-    hoverLeaveNode: (node_id: string) => void;
+    select(...selectors: grida.program.document.Selector[]): void;
+    blur(): void;
+    undo(): void;
+    redo(): void;
+    cut(target: "selection" | NodeID): void;
+    copy(target: "selection" | NodeID): void;
+    paste(): void;
+    duplicate(target: "selection" | NodeID): void;
+
+    setClipboardColor(color: cg.RGBA8888): void;
+    deleteNode(target: "selection" | NodeID): void;
 
     //
-    select: (...selectors: grida.program.document.Selector[]) => void;
-    blur: () => void;
-    undo: () => void;
-    redo: () => void;
-    cut: (target: "selection" | NodeID) => void;
-    copy: (target: "selection" | NodeID) => void;
-    paste: () => void;
-    duplicate: (target: "selection" | NodeID) => void;
-
-    setClipboardColor: (color: cg.RGBA8888) => void;
-    deleteNode: (target: "selection" | NodeID) => void;
+    selectVertex(node_id: NodeID, vertex: number): void;
+    deleteVertex(node_id: NodeID, vertex: number): void;
+    //
 
     //
-    createNodeId: () => NodeID;
-    getNodeById: (node_id: NodeID) => grida.program.nodes.Node;
-    getNodeDepth: (node_id: NodeID) => number;
-    getNodeAbsoluteRotation: (node_id: NodeID) => number;
-    insertNode: (prototype: grida.program.nodes.NodePrototype) => void;
+    getNodeSnapshotById(node_id: NodeID): Readonly<grida.program.nodes.Node>;
+    getNodeById(node_id: NodeID): NodeProxy<grida.program.nodes.Node>;
+    getNodeDepth(node_id: NodeID): number;
+    getNodeAbsoluteRotation(node_id: NodeID): number;
+    insertNode(prototype: grida.program.nodes.NodePrototype): NodeID;
 
     //
-    nudge: (
-      target: "selection" | NodeID,
-      axis: "x" | "y",
-      delta: number,
-      config?: NudgeUXConfig
-    ) => void;
-    nudgeResize: (
+    nudgeResize(
       target: "selection" | NodeID,
       axis: "x" | "y",
       delta: number
-    ) => void;
-    a11yarrow: (
-      target: "selection" | NodeID,
-      direction: "up" | "down" | "left" | "right",
-      shiftKey: boolean,
-      config?: NudgeUXConfig
-    ) => void;
-    align: (
+    ): void;
+    align(
       target: "selection" | NodeID,
       alignment: {
         horizontal?: "none" | "min" | "max" | "center";
         vertical?: "none" | "min" | "max" | "center";
       }
-    ) => void;
-    order: (
-      target: "selection" | NodeID,
-      order: "back" | "front" | number
-    ) => void;
-    mv: (source: NodeID[], target: NodeID, index?: number) => void;
+    ): void;
+    order(target: "selection" | NodeID, order: "back" | "front" | number): void;
+    mv(source: NodeID[], target: NodeID, index?: number): void;
     //
-    distributeEvenly: (target: "selection" | NodeID[], axis: "x" | "y") => void;
-    autoLayout: (target: "selection" | NodeID[]) => void;
-    contain: (target: "selection" | NodeID[]) => void;
-    configureSurfaceRaycastTargeting: (
+    distributeEvenly(target: "selection" | NodeID[], axis: "x" | "y"): void;
+    autoLayout(target: "selection" | NodeID[]): void;
+    contain(target: "selection" | NodeID[]): void;
+    configureSurfaceRaycastTargeting(
       config: Partial<state.HitTestingConfig>
-    ) => void;
-    configureMeasurement: (measurement: "on" | "off") => void;
-    configureTranslateWithCloneModifier: (
+    ): void;
+    configureMeasurement(measurement: "on" | "off"): void;
+    configureTranslateWithCloneModifier(
       translate_with_clone: "on" | "off"
-    ) => void;
-    configureTranslateWithAxisLockModifier: (
+    ): void;
+    configureTranslateWithAxisLockModifier(
       tarnslate_with_axis_lock: "on" | "off"
-    ) => void;
-    configureTransformWithCenterOriginModifier: (
+    ): void;
+    configureTransformWithCenterOriginModifier(
       transform_with_center_origin: "on" | "off"
-    ) => void;
-    configureTransformWithPreserveAspectRatioModifier: (
+    ): void;
+    configureTransformWithPreserveAspectRatioModifier(
       transform_with_preserve_aspect_ratio: "on" | "off"
-    ) => void;
-    configureRotateWithQuantizeModifier: (
+    ): void;
+    configureRotateWithQuantizeModifier(
       rotate_with_quantize: number | "off"
-    ) => void;
+    ): void;
     // //
-    toggleActive: (target: "selection" | NodeID) => void;
-    toggleLocked: (target: "selection" | NodeID) => void;
-    toggleBold: (target: "selection" | NodeID) => void;
+    toggleActive(target: "selection" | NodeID): void;
+    toggleLocked(target: "selection" | NodeID): void;
+    toggleBold(target: "selection" | NodeID): void;
     // //
-    setOpacity: (target: "selection" | NodeID, opacity: number) => void;
+    setOpacity(target: "selection" | NodeID, opacity: number): void;
+  }
+
+  export interface ISchemaActions {
     // //
-    schemaDefineProperty: (
+    schemaDefineProperty(
       key?: string,
       definition?: grida.program.schema.PropertyDefinition
-    ) => void;
-    schemaRenameProperty: (key: string, newName: string) => void;
-    schemaUpdateProperty: (
+    ): void;
+    schemaRenameProperty(key: string, newName: string): void;
+    schemaUpdateProperty(
       key: string,
       definition: grida.program.schema.PropertyDefinition
-    ) => void;
-    schemaPutProperty: (key: string, value: any) => void;
-    schemaDeleteProperty: (key: string) => void;
-  }
-
-  export interface IStandaloneEditorApi {
-    selection: ReadonlyArray<NodeID>;
-    getNodeById: (node_id: NodeID) => grida.program.nodes.Node;
-    getNodeDepth: (node_id: NodeID) => number;
-    getNodeAbsoluteRotation: (node_id: NodeID) => number;
-
-    select: (...selectors: grida.program.document.Selector[]) => void;
-    blur: () => void;
-    undo: () => void;
-    redo: () => void;
-    cut: (target: "selection" | NodeID) => void;
-    copy: (target: "selection" | NodeID) => void;
-    paste: () => void;
-    duplicate: (target: "selection" | NodeID) => void;
-    delete: (target: "selection" | NodeID) => void;
-    rename: (target: "selection" | NodeID, name: string) => void;
-
-    nudge: (
-      target: "selection" | NodeID,
-      axis: "x" | "y",
-      delta: number
-    ) => void;
-    nudgeResize: (
-      target: "selection" | NodeID,
-      axis: "x" | "y",
-      delta: number
-    ) => void;
-
-    align: (
-      target: "selection" | NodeID,
-      alignment: {
-        horizontal?: "none" | "min" | "max" | "center";
-        vertical?: "none" | "min" | "max" | "center";
-      }
-    ) => void;
-    order: (
-      target: "selection" | NodeID,
-      order: "back" | "front" | number
-    ) => void;
-    distributeEvenly: (target: "selection" | NodeID[], axis: "x" | "y") => void;
-
-    toggleActive: (target: "selection" | NodeID) => void;
-    toggleLocked: (target: "selection" | NodeID) => void;
-    toggleBold: (target: "selection" | NodeID) => void;
-    setOpacity: (target: "selection" | NodeID, opacity: number) => void;
-
-    createRectangle(
-      props: Omit<grida.program.nodes.NodePrototype, "type">
     ): void;
-    createEllipse(props: Omit<grida.program.nodes.NodePrototype, "type">): void;
-    createText(props: Omit<grida.program.nodes.NodePrototype, "type">): void;
-
-    configureMeasurement: (measurement: "on" | "off") => void;
-    configureTranslateWithCloneModifier: (
-      translate_with_clone: "on" | "off"
-    ) => void;
-    configureTranslateWithAxisLockModifier: (
-      tarnslate_with_axis_lock: "on" | "off"
-    ) => void;
-    configureTransformWithCenterOriginModifier: (
-      transform_with_center_origin: "on" | "off"
-    ) => void;
-    configureTransformWithPreserveAspectRatioModifier: (
-      transform_with_preserve_aspect_ratio: "on" | "off"
-    ) => void;
-    configureRotateWithQuantizeModifier: (
-      rotate_with_quantize: number | "off"
-    ) => void;
+    schemaPutProperty(key: string, value: any): void;
+    schemaDeleteProperty(key: string): void;
   }
 }
diff --git a/editor/grida-canvas/reducers/document.reducer.ts b/editor/grida-canvas/reducers/document.reducer.ts
index 0e3a18c38..47cc6f30b 100644
--- a/editor/grida-canvas/reducers/document.reducer.ts
+++ b/editor/grida-canvas/reducers/document.reducer.ts
@@ -4,7 +4,6 @@ import type {
   DocumentAction,
   EditorSelectAction,
   NodeChangeAction,
-  NodeToggleBasePropertyAction,
   TemplateEditorSetTemplatePropsAction,
   TemplateNodeOverrideChangeAction,
   NodeToggleBoldAction,
@@ -792,47 +791,13 @@ export default function documentReducer<S extends editor.state.IEditorState>(
     //   });
     // }
 
-    case "node/change/active":
-    case "node/change/locked":
-    case "node/change/name":
-    case "node/change/userdata":
+    case "node/change/*":
     case "node/change/positioning":
     case "node/change/positioning-mode":
-    case "node/change/size":
     case "node/change/component":
-    case "node/change/href":
-    case "node/change/target":
-    case "node/change/mouse-cursor":
-    case "node/change/src":
     case "node/change/props":
-    case "node/change/opacity":
-    case "node/change/rotation":
-    case "node/change/cornerRadius":
-    case "node/change/fill":
-    case "node/change/border":
-    case "node/change/stroke":
-    case "node/change/stroke-width":
-    case "node/change/stroke-cap":
-    case "node/change/fit":
-    case "node/change/padding":
-    case "node/change/box-shadow":
-    case "node/change/layout":
-    case "node/change/direction":
-    case "node/change/mainAxisAlignment":
-    case "node/change/crossAxisAlignment":
-    case "node/change/gap":
-    case "node/change/mainAxisGap":
-    case "node/change/crossAxisGap":
     case "node/change/style":
-    case "node/change/fontSize":
-    case "node/change/fontWeight":
-    case "node/change/fontFamily":
-    case "node/change/letterSpacing":
-    case "node/change/lineHeight":
-    case "node/change/textAlign":
-    case "node/change/textAlignVertical":
-    case "node/change/maxlength":
-    case "node/change/text": {
+    case "node/change/fontFamily": {
       const { node_id } = <NodeChangeAction>action;
       return produce(state, (draft) => {
         const node = editor.dq.__getNodeById(draft, node_id);
@@ -848,22 +813,6 @@ export default function documentReducer<S extends editor.state.IEditorState>(
       });
     }
     //
-    case "node/toggle/locked": {
-      return produce(state, (draft) => {
-        const { node_id } = <NodeToggleBasePropertyAction>action;
-        const node = editor.dq.__getNodeById(draft, node_id);
-        assert(node, `node not found with node_id: "${node_id}"`);
-        node.locked = !node.locked;
-      });
-    }
-    case "node/toggle/active": {
-      return produce(state, (draft) => {
-        const { node_id } = <NodeToggleBasePropertyAction>action;
-        const node = editor.dq.__getNodeById(draft, node_id);
-        assert(node, `node not found with node_id: "${node_id}"`);
-        node.active = !node.active;
-      });
-    }
     case "node/toggle/bold": {
       return produce(state, (draft) => {
         const { node_id } = <NodeToggleBoldAction>action;
@@ -995,7 +944,10 @@ function __self_order(
   }
 
   ichildren.children = reordered;
-  // draft.document_ctx.__ctx_nid_to_children_ids[parent_id] = reordered; // TODO: remove me verified not required
+
+  // update the hierarchy graph
+  const context = editor.dq.Context.from(draft.document);
+  draft.document_ctx = context.snapshot();
 }
 
 function __self_nudge(
diff --git a/editor/grida-canvas/reducers/event-target.reducer.ts b/editor/grida-canvas/reducers/event-target.reducer.ts
index fd1d156aa..e24191970 100644
--- a/editor/grida-canvas/reducers/event-target.reducer.ts
+++ b/editor/grida-canvas/reducers/event-target.reducer.ts
@@ -932,7 +932,7 @@ function __self_evt_on_drag(
           Math.min(maxRaius ?? Infinity, Math.max(0, nextRadius))
         );
         draft.document.nodes[node_id] = nodeReducer(node, {
-          type: "node/change/cornerRadius",
+          type: "node/change/*",
           // TODO: resolve by anchor
           cornerRadius: nextRadiusClamped,
           node_id,
@@ -992,9 +992,10 @@ function __self_evt_on_drag(
 
             const container = editor.dq.__getNodeById(draft, layout.group);
             draft.document.nodes[layout.group] = nodeReducer(container, {
-              type: "node/change/gap",
-              gap: gap,
+              type: "node/change/*",
               node_id: container.id,
+              mainAxisGap: gap,
+              crossAxisGap: gap,
             });
 
             draft.gesture.gap = gap;
diff --git a/editor/grida-canvas/reducers/methods/transform.ts b/editor/grida-canvas/reducers/methods/transform.ts
index 6ab40705b..d9538c535 100644
--- a/editor/grida-canvas/reducers/methods/transform.ts
+++ b/editor/grida-canvas/reducers/methods/transform.ts
@@ -604,8 +604,8 @@ function __self_update_gesture_transform_rotate(
 
   draft.gesture.rotation = angle;
   draft.document.nodes[selection] = nodeReducer(node, {
-    type: "node/change/rotation",
-    rotation: { type: "set", value: angle },
+    type: "node/change/*",
     node_id: selection,
+    rotation: angle,
   });
 }
diff --git a/editor/grida-canvas/reducers/node.reducer.ts b/editor/grida-canvas/reducers/node.reducer.ts
index d842abd7d..623765b5a 100644
--- a/editor/grida-canvas/reducers/node.reducer.ts
+++ b/editor/grida-canvas/reducers/node.reducer.ts
@@ -1,54 +1,412 @@
 import { produce, type Draft } from "immer";
-import grida from "@grida/schema";
+import type grida from "@grida/schema";
 import type { NodeChangeAction } from "../action";
 import type cg from "@grida/cg";
 import { v4 } from "uuid";
 import assert from "assert";
 
+function defineNodeProperty<
+  K extends keyof grida.program.nodes.UnknwonNode,
+>(handlers: {
+  assert?: (node: grida.program.nodes.UnknwonNode) => boolean;
+  apply: (
+    draft: grida.program.nodes.UnknownNodeProperties,
+    value: NonNullable<grida.program.nodes.UnknwonNode[K]>,
+    prev?: grida.program.nodes.UnknwonNode[K]
+  ) => void;
+}) {
+  return handlers;
+}
+
+/**
+ * properties without side effects (re-layout)
+ */
+const safe_properties: Partial<
+  Omit<
+    grida.program.nodes.UnknownNodeProperties<{
+      assert?: (node: grida.program.nodes.UnknwonNode) => boolean;
+      apply: (
+        draft: grida.program.nodes.UnknownNodeProperties,
+        value: any,
+        prev?: any
+      ) => void;
+    }>,
+    "type"
+  >
+> = {
+  active: defineNodeProperty<"active">({
+    assert: (node) => typeof node.active === "boolean",
+    apply: (draft, value, prev) => {
+      draft.active = value;
+    },
+  }),
+  locked: defineNodeProperty<"locked">({
+    assert: (node) => typeof node.locked === "boolean",
+    apply: (draft, value, prev) => {
+      draft.locked = value;
+    },
+  }),
+  name: defineNodeProperty<"name">({
+    assert: (node) => typeof node.name === "string",
+    apply: (draft, value, prev) => {
+      draft.name = value;
+    },
+  }),
+  width: defineNodeProperty<"width">({
+    apply: (draft, value, prev) => {
+      if (typeof value === "number") {
+        draft.width = ranged(0, value);
+      } else {
+        draft.width = value;
+      }
+    },
+  }),
+  height: defineNodeProperty<"height">({
+    apply: (draft, value, prev) => {
+      if (typeof value === "number") {
+        draft.height = ranged(0, value);
+      } else {
+        draft.height = value;
+      }
+    },
+  }),
+  rotation: defineNodeProperty<"rotation">({
+    assert: (node) => typeof node.rotation === "number",
+    apply: (draft, value, prev) => {
+      draft.rotation = value;
+    },
+  }),
+  href: defineNodeProperty<"href">({
+    assert: (node) => typeof node.href === "string",
+    apply: (draft, value, prev) => {
+      draft.href = value;
+    },
+  }),
+  target: defineNodeProperty<"target">({
+    assert: (node) => typeof node.target === "string",
+    apply: (draft, value, prev) => {
+      draft.target = value;
+    },
+  }),
+  cursor: defineNodeProperty<"cursor">({
+    assert: (node) => typeof node.cursor === "string",
+    apply: (draft, value, prev) => {
+      draft.cursor = value;
+    },
+  }),
+  src: defineNodeProperty<"src">({
+    assert: (node) => typeof node.src === "string",
+    apply: (draft, value, prev) => {
+      draft.src = value;
+    },
+  }),
+  opacity: defineNodeProperty<"opacity">({
+    assert: (node) => typeof node.opacity === "number",
+    apply: (draft, value, prev) => {
+      draft.opacity = ranged(0, value, 1);
+    },
+  }),
+  fill: defineNodeProperty<"fill">({
+    assert: (node) =>
+      node.type === "vector" ||
+      node.type === "path" ||
+      node.type === "image" ||
+      node.type === "rectangle" ||
+      node.type === "ellipse" ||
+      node.type === "text" ||
+      node.type === "richtext" ||
+      node.type === "container" ||
+      node.type === "component",
+    apply: (draft, value, prev) => {
+      if (value === null) {
+        draft.fill = undefined;
+        return;
+      }
+
+      switch (value.type) {
+        case "linear_gradient":
+        case "radial_gradient":
+          draft.fill = {
+            ...(value as cg.LinearGradientPaint | cg.RadialGradientPaint),
+            id: `gradient-${v4()}`,
+          };
+          break;
+        case "solid":
+          draft.fill = value as
+            | grida.program.nodes.i.props.SolidPaintToken
+            | cg.SolidPaint;
+          break;
+      }
+    },
+  }),
+  cornerRadius: defineNodeProperty<"cornerRadius">({
+    assert: (node) =>
+      node.type === "rectangle" ||
+      node.type === "image" ||
+      node.type === "video" ||
+      node.type === "container" ||
+      node.type === "component",
+    apply: (draft, value, prev) => {
+      // TODO: make [cornerRadius < (Math.min(width, height) / 2)]
+
+      const each =
+        typeof value == "number"
+          ? {
+              tl: Math.max(value, 0),
+              tr: Math.max(value, 0),
+              br: Math.max(value, 0),
+              bl: Math.max(value, 0),
+            }
+          : {
+              tl: Math.max(value[0], 0),
+              tr: Math.max(value[1], 0),
+              br: Math.max(value[2], 0),
+              bl: Math.max(value[3], 0),
+            };
+      if (each.tl === each.tr && each.tl === each.br && each.tl === each.bl) {
+        draft.cornerRadius = each.tl;
+      } else {
+        draft.cornerRadius = [each.tl, each.tr, each.br, each.bl];
+      }
+    },
+  }),
+  border: defineNodeProperty<"border">({
+    assert: (node) =>
+      // node.type === "text" ||
+      node.type === "image" ||
+      node.type === "video" ||
+      node.type === "container" ||
+      node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.border = value;
+    },
+  }),
+  stroke: defineNodeProperty<"stroke">({
+    assert: (node) =>
+      node.type === "path" ||
+      node.type === "line" ||
+      node.type === "rectangle" ||
+      node.type === "ellipse",
+    apply: (draft, value, prev) => {
+      if (value === null) {
+        draft.stroke = undefined;
+        return;
+      }
+
+      switch (value.type) {
+        case "linear_gradient":
+        case "radial_gradient":
+          draft.stroke = {
+            ...(value as cg.LinearGradientPaint | cg.RadialGradientPaint),
+            id: `gradient-${v4()}`,
+          };
+          break;
+        case "solid":
+          draft.stroke = value as
+            | grida.program.nodes.i.props.SolidPaintToken
+            | cg.SolidPaint;
+          break;
+      }
+    },
+  }),
+  strokeWidth: defineNodeProperty<"strokeWidth">({
+    assert: (node) =>
+      node.type === "path" ||
+      node.type === "line" ||
+      node.type === "rectangle" ||
+      node.type === "ellipse",
+    apply: (draft, value, prev) => {
+      draft.strokeWidth = ranged(0, value);
+    },
+  }),
+  strokeCap: defineNodeProperty<"strokeCap">({
+    assert: (node) =>
+      node.type === "path" ||
+      node.type === "line" ||
+      node.type === "rectangle" ||
+      node.type === "ellipse",
+    apply: (draft, value, prev) => {
+      draft.strokeCap = value;
+    },
+  }),
+  boxShadow: defineNodeProperty<"boxShadow">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.boxShadow = value;
+    },
+  }),
+  zIndex: defineNodeProperty<"zIndex">({
+    assert: (node) => typeof node.zIndex === "number",
+    apply: (draft, value, prev) => {
+      draft.zIndex = value;
+    },
+  }),
+  fit: defineNodeProperty<"fit">({
+    assert: (node) => node.type === "image",
+    apply: (draft, value, prev) => {
+      draft.fit = value;
+    },
+  }),
+  padding: defineNodeProperty<"padding">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.padding = value;
+    },
+  }),
+  layout: defineNodeProperty<"layout">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.layout = value;
+      if (prev !== "flex" && value === "flex") {
+        // initialize flex layout
+        // each property cannot be undefined, but for older version compatibility, we need to set default value (only when not set)
+        if (!draft.direction) draft.direction = "horizontal";
+        if (!draft.mainAxisAlignment) draft.mainAxisAlignment = "start";
+        if (!draft.crossAxisAlignment) draft.crossAxisAlignment = "start";
+        if (!draft.mainAxisGap) draft.mainAxisGap = 0;
+        if (!draft.crossAxisGap) draft.crossAxisGap = 0;
+      }
+    },
+  }),
+  direction: defineNodeProperty<"direction">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.direction = value;
+    },
+  }),
+  mainAxisAlignment: defineNodeProperty<"mainAxisAlignment">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.mainAxisAlignment = value;
+    },
+  }),
+  crossAxisAlignment: defineNodeProperty<"crossAxisAlignment">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.crossAxisAlignment = value;
+    },
+  }),
+  mainAxisGap: defineNodeProperty<"mainAxisGap">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.mainAxisGap = value;
+    },
+  }),
+  crossAxisGap: defineNodeProperty<"crossAxisGap">({
+    assert: (node) => node.type === "container" || node.type === "component",
+    apply: (draft, value, prev) => {
+      draft.crossAxisGap = value;
+    },
+  }),
+  textAlign: defineNodeProperty<"textAlign">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.textAlign = value;
+    },
+  }),
+  textAlignVertical: defineNodeProperty<"textAlignVertical">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.textAlignVertical = value;
+    },
+  }),
+  fontWeight: defineNodeProperty<"fontWeight">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.fontWeight = value;
+    },
+  }),
+  fontSize: defineNodeProperty<"fontSize">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.fontSize = ranged(1, value);
+    },
+  }),
+  lineHeight: defineNodeProperty<"lineHeight">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.lineHeight = value;
+    },
+  }),
+  letterSpacing: defineNodeProperty<"letterSpacing">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.letterSpacing = value;
+    },
+  }),
+  maxLength: defineNodeProperty<"maxLength">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.maxLength = value;
+    },
+  }),
+  text: defineNodeProperty<"text">({
+    assert: (node) => node.type === "text",
+    apply: (draft, value, prev) => {
+      draft.text = value ?? null;
+    },
+  }),
+  userdata: defineNodeProperty<"userdata">({
+    apply: (draft, value, prev) => {
+      assert(
+        value === undefined ||
+          value === null ||
+          (typeof value === "object" && !Array.isArray(value)),
+        "userdata must be an k:v object"
+      );
+      draft.userdata = value;
+    },
+  }),
+};
+
+function applyNodeProperty<K extends keyof grida.program.nodes.UnknwonNode>(
+  draft: grida.program.nodes.UnknownNodeProperties,
+  key: K,
+  value: any
+) {
+  "use strict";
+  if (!(key in safe_properties)) {
+    throw new Error(`property handler not found: "${key}"`);
+  }
+  const property = safe_properties[key as keyof typeof safe_properties];
+  if (property) {
+    const prev = (draft as any)[key];
+    // TODO: assert - decide pre or after
+    property.apply(draft, value, prev);
+  }
+}
+
 export default function nodeReducer<
   N extends Partial<grida.program.nodes.Node>,
 >(node: N, action: NodeChangeAction): N {
   return produce(node, (draft) => {
     switch (action.type) {
-      case "node/change/active": {
-        draft.active = action.active;
-        break;
-      }
-      case "node/change/userdata": {
-        const { userdata } = action;
-        // double check if the userdata is serializable and k:v structure
-        assert(
-          userdata === undefined ||
-            userdata === null ||
-            (typeof userdata === "object" && !Array.isArray(userdata)),
-          "userdata must be an k:v object"
-        );
-        draft.userdata = userdata;
-        break;
-      }
-      case "node/change/locked": {
-        draft.locked = action.locked;
-        break;
-      }
-      case "node/change/name": {
-        (draft as grida.program.nodes.i.IBaseNode).name =
-          action.name || (node.type as string);
+      case "node/change/*": {
+        const { type: _, node_id: __, ...values } = action;
+        for (const [key, value] of Object.entries(values)) {
+          applyNodeProperty(
+            draft as grida.program.nodes.UnknownNodeProperties,
+            key as keyof grida.program.nodes.UnknwonNode,
+            value
+          );
+        }
         break;
       }
+      // keep
       case "node/change/positioning": {
-        const { positioning } = action;
         const pos = draft as grida.program.nodes.i.IPositioning;
-        if ("position" in positioning) {
-          if (positioning.position) {
-            pos.position = positioning.position;
+        if ("position" in action) {
+          if (action.position) {
+            pos.position = action.position;
           }
         }
-        if ("left" in positioning) pos.left = positioning.left;
-        if ("top" in positioning) pos.top = positioning.top;
-        if ("right" in positioning) pos.right = positioning.right;
-        if ("bottom" in positioning) pos.bottom = positioning.bottom;
+        if ("left" in action) pos.left = action.left;
+        if ("top" in action) pos.top = action.top;
+        if ("right" in action) pos.right = action.right;
+        if ("bottom" in action) pos.bottom = action.bottom;
         break;
       }
+      // keep
       case "node/change/positioning-mode": {
         const { position } = action;
         (draft as grida.program.nodes.i.IPositioning).position = position;
@@ -65,279 +423,16 @@ export default function nodeReducer<
         }
         break;
       }
-      case "node/change/size": {
-        const { axis, value: length } = action;
-        // TODO: check the sizing model (fixed or css)
-        (draft as grida.program.nodes.i.ICSSDimension)[axis] = length;
-        break;
-      }
-      case "node/change/href": {
-        (draft as grida.program.nodes.i.IHrefable).href = action.href;
-        break;
-      }
-      case "node/change/target": {
-        (draft as grida.program.nodes.i.IHrefable).target = action.target;
-        break;
-      }
-      case "node/change/mouse-cursor": {
-        (draft as grida.program.nodes.i.IMouseCursor).cursor = action.cursor;
-        break;
-      }
       case "node/change/component": {
         assert(draft.type === "instance");
         draft.component_id = action.component_id;
         break;
       }
-      case "node/change/src": {
-        assert(draft.type === "image");
-        draft.src = action.src;
-        break;
-      }
       case "node/change/props": {
         assert(draft.type === "instance" || draft.type === "template_instance");
         draft.props = Object.assign({}, draft.props, action.props);
         break;
       }
-      case "node/change/opacity": {
-        const node = draft as Draft<grida.program.nodes.i.ICSSStylable>;
-        switch (action.opacity.type) {
-          case "set":
-            node.opacity = ranged(0, action.opacity.value, 1);
-            break;
-          case "delta":
-            node.opacity = ranged(0, node.opacity + action.opacity.value, 1);
-            break;
-        }
-        break;
-      }
-      case "node/change/rotation": {
-        const node = draft as Draft<grida.program.nodes.i.ICSSStylable>;
-        switch (action.rotation.type) {
-          case "set":
-            node.rotation = action.rotation.value;
-            break;
-          case "delta":
-            node.rotation += action.rotation.value;
-            break;
-        }
-        break;
-      }
-      case "node/change/cornerRadius": {
-        assert(
-          draft.type === "rectangle" ||
-            draft.type === "image" ||
-            draft.type === "video" ||
-            draft.type === "container" ||
-            draft.type === "component",
-          "node type does not support cornerRadius"
-        );
-
-        // TODO: make [cornerRadius < (Math.min(width, height) / 2)]
-
-        const each =
-          typeof action.cornerRadius == "number"
-            ? {
-                tl: Math.max(action.cornerRadius, 0),
-                tr: Math.max(action.cornerRadius, 0),
-                br: Math.max(action.cornerRadius, 0),
-                bl: Math.max(action.cornerRadius, 0),
-              }
-            : {
-                tl: Math.max(action.cornerRadius[0], 0),
-                tr: Math.max(action.cornerRadius[1], 0),
-                br: Math.max(action.cornerRadius[2], 0),
-                bl: Math.max(action.cornerRadius[3], 0),
-              };
-        if (each.tl === each.tr && each.tl === each.br && each.tl === each.bl) {
-          draft.cornerRadius = each.tl;
-        } else {
-          draft.cornerRadius = [each.tl, each.tr, each.br, each.bl];
-        }
-        break;
-      }
-      case "node/change/fill": {
-        assert(
-          draft.type === "vector" ||
-            draft.type === "path" ||
-            draft.type === "image" ||
-            draft.type === "rectangle" ||
-            draft.type === "ellipse" ||
-            draft.type === "text" ||
-            draft.type === "richtext" ||
-            draft.type === "container" ||
-            draft.type === "component"
-        );
-
-        if (action.fill === null) {
-          draft.fill = undefined;
-          break;
-        }
-
-        switch (action.fill.type) {
-          case "linear_gradient":
-          case "radial_gradient":
-            draft.fill = {
-              ...(action.fill as
-                | cg.LinearGradientPaint
-                | cg.RadialGradientPaint),
-              id: `gradient-${v4()}`,
-            };
-            break;
-          case "solid":
-            draft.fill = action.fill as
-              | grida.program.nodes.i.props.SolidPaintToken
-              | cg.SolidPaint;
-            break;
-        }
-        break;
-      }
-      case "node/change/border": {
-        assert(
-          // draft.type === "text" ||
-          draft.type === "image" ||
-            draft.type === "video" ||
-            draft.type === "container" ||
-            draft.type === "component"
-        );
-        draft.border = action.border;
-        break;
-      }
-      case "node/change/stroke":
-      case "node/change/stroke-width":
-      case "node/change/stroke-cap": {
-        assert(
-          draft.type === "path" ||
-            draft.type === "line" ||
-            draft.type === "rectangle" ||
-            draft.type === "ellipse"
-        );
-        switch (action.type) {
-          case "node/change/stroke": {
-            if (action.stroke === null) {
-              draft.stroke = undefined;
-              break;
-            }
-
-            switch (action.stroke.type) {
-              case "linear_gradient":
-              case "radial_gradient":
-                draft.stroke = {
-                  ...(action.stroke as
-                    | cg.LinearGradientPaint
-                    | cg.RadialGradientPaint),
-                  id: `gradient-${v4()}`,
-                };
-                break;
-              case "solid":
-                // FIXME:
-                // @ts-expect-error
-                draft.stroke = action.stroke as
-                  | grida.program.nodes.i.props.SolidPaintToken
-                  | cg.SolidPaint;
-                break;
-            }
-            break;
-          }
-          case "node/change/stroke-width": {
-            switch (action.strokeWidth.type) {
-              case "set":
-                draft.strokeWidth = ranged(0, action.strokeWidth.value);
-                break;
-              case "delta":
-                if (draft.strokeWidth !== undefined) {
-                  draft.strokeWidth = ranged(
-                    0,
-                    draft.strokeWidth + action.strokeWidth.value
-                  );
-                }
-
-                break;
-            }
-            break;
-          }
-          case "node/change/stroke-cap": {
-            draft.strokeCap = action.strokeCap;
-            break;
-          }
-        }
-        break;
-      }
-      case "node/change/fit": {
-        assert(draft.type === "image");
-        draft.fit = action.fit;
-        break;
-      }
-      case "node/change/padding": {
-        assert(draft.type === "container" || draft.type === "component");
-        draft.padding = action.padding;
-        break;
-      }
-      case "node/change/box-shadow": {
-        assert(draft.type === "container" || draft.type === "component");
-        draft.boxShadow = action.boxShadow;
-        break;
-      }
-      case "node/change/layout": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(action.layout, "layout is required");
-        draft.layout = action.layout;
-        if (action.layout === "flex") {
-          // initialize flex layout
-          // each property cannot be undefined, but for older version compatibility, we need to set default value (only when not set)
-          if (!draft.direction) draft.direction = "horizontal";
-          if (!draft.mainAxisAlignment) draft.mainAxisAlignment = "start";
-          if (!draft.crossAxisAlignment) draft.crossAxisAlignment = "start";
-          if (!draft.mainAxisGap) draft.mainAxisGap = 0;
-          if (!draft.crossAxisGap) draft.crossAxisGap = 0;
-        }
-        break;
-      }
-      case "node/change/direction": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(action.direction, "direction is required");
-        draft.direction = action.direction;
-        break;
-      }
-      case "node/change/mainAxisAlignment": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(action.mainAxisAlignment, "mainAxisAlignment is required");
-        draft.mainAxisAlignment = action.mainAxisAlignment;
-        break;
-      }
-      case "node/change/crossAxisAlignment": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(action.crossAxisAlignment, "crossAxisAlignment is required");
-        draft.crossAxisAlignment = action.crossAxisAlignment;
-        break;
-      }
-      case "node/change/gap": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(
-          typeof action.gap === "number" ||
-            typeof action.gap.mainAxisGap === "number",
-          "invalid gap value"
-        );
-        if (typeof action.gap === "number") {
-          draft.mainAxisGap = action.gap;
-          draft.crossAxisGap = action.gap;
-        } else {
-          draft.mainAxisGap = action.gap.mainAxisGap;
-          draft.crossAxisGap = action.gap.crossAxisGap;
-        }
-        break;
-      }
-      case "node/change/mainAxisGap": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(typeof action.mainAxisGap === "number", "invalid gap value");
-        draft.mainAxisGap = action.mainAxisGap;
-        break;
-      }
-      case "node/change/crossAxisGap": {
-        assert(draft.type === "container" || draft.type === "component");
-        assert(typeof action.crossAxisGap === "number", "invalid gap value");
-        draft.crossAxisGap = action.crossAxisGap;
-        break;
-      }
       case "node/change/style": {
         // assert(draft.type !== 'template_instance')
         (draft as Draft<grida.program.nodes.i.ICSSStylable>).style =
@@ -348,81 +443,11 @@ export default function nodeReducer<
           );
         break;
       }
-      case "node/change/text": {
-        assert(draft.type === "text");
-        draft.text = action.text ?? null;
-        break;
-      }
       case "node/change/fontFamily": {
         assert(draft.type === "text");
         draft.fontFamily = action.fontFamily;
         break;
       }
-      case "node/change/fontSize": {
-        assert(draft.type === "text");
-        switch (action.fontSize.type) {
-          case "set":
-            draft.fontSize = ranged(0, action.fontSize.value);
-            break;
-          case "delta":
-            if (draft.fontSize !== undefined) {
-              draft.fontSize = ranged(
-                0,
-                draft.fontSize + action.fontSize.value
-              );
-            }
-            break;
-        }
-        break;
-      }
-      case "node/change/fontWeight": {
-        assert(draft.type === "text");
-        draft.fontWeight = action.fontWeight;
-        break;
-      }
-      case "node/change/letterSpacing": {
-        assert(draft.type === "text");
-        switch (action.letterSpacing.type) {
-          case "set":
-            draft.letterSpacing = action.letterSpacing.value;
-            break;
-          case "delta":
-            if (draft.letterSpacing !== undefined) {
-              draft.letterSpacing += action.letterSpacing.value;
-            }
-            break;
-        }
-        break;
-      }
-      case "node/change/lineHeight": {
-        assert(draft.type === "text");
-        switch (action.lineHeight.type) {
-          case "set":
-            draft.lineHeight = action.lineHeight.value;
-            break;
-          case "delta":
-            if (draft.lineHeight !== undefined) {
-              draft.lineHeight += action.lineHeight.value;
-            }
-            break;
-        }
-        break;
-      }
-      case "node/change/textAlign": {
-        assert(draft.type === "text");
-        draft.textAlign = action.textAlign;
-        break;
-      }
-      case "node/change/textAlignVertical": {
-        assert(draft.type === "text");
-        draft.textAlignVertical = action.textAlignVertical;
-        break;
-      }
-      case "node/change/maxlength": {
-        assert(draft.type === "text");
-        draft.maxLength = action.maxlength;
-        break;
-      }
 
       default: {
         throw new Error(
diff --git a/editor/grida-canvas/reducers/surface.reducer.ts b/editor/grida-canvas/reducers/surface.reducer.ts
index d47cf0e78..125cf76a6 100644
--- a/editor/grida-canvas/reducers/surface.reducer.ts
+++ b/editor/grida-canvas/reducers/surface.reducer.ts
@@ -1,10 +1,6 @@
 import { produce, type Draft } from "immer";
 
-import type {
-  SurfaceAction,
-  EditorSurface_StartGesture,
-  TChange,
-} from "../action";
+import type { SurfaceAction, EditorSurface_StartGesture } from "../action";
 import { editor } from "@/grida-canvas";
 import { getInitialCurveGesture } from "./tools/gesture";
 import assert from "assert";
@@ -200,7 +196,7 @@ function __self_set_brush(
 
 function __self_set_brush_size(
   draft: editor.state.IEditorState,
-  size: TChange<number>
+  size: editor.api.NumberChange
 ) {
   if (!(draft.tool.type === "brush" || draft.tool.type === "eraser")) return;
   switch (size.type) {
@@ -219,7 +215,7 @@ function __self_set_brush_size(
 
 function __self_set_brush_opacity(
   draft: editor.state.IEditorState,
-  opacity: TChange<number>
+  opacity: editor.api.NumberChange
 ) {
   if (draft.tool.type !== "brush") return;
   switch (opacity.type) {
diff --git a/editor/grida-canvas/reducers/tools/id.ts b/editor/grida-canvas/reducers/tools/id.ts
index fe82b2979..84e28599e 100644
--- a/editor/grida-canvas/reducers/tools/id.ts
+++ b/editor/grida-canvas/reducers/tools/id.ts
@@ -4,6 +4,7 @@ let i = 0;
 
 /**
  * Node ID generator
+ * @deprecated use editor.id() instead
  * @returns
  */
 export default function nid() {
diff --git a/editor/scaffolds/playground-canvas/playground.tsx b/editor/scaffolds/playground-canvas/playground.tsx
index dc4779714..55f71259c 100644
--- a/editor/scaffolds/playground-canvas/playground.tsx
+++ b/editor/scaffolds/playground-canvas/playground.tsx
@@ -26,11 +26,13 @@ import {
   StandaloneSceneBackground,
   UserCustomTemplatesProvider,
   type UserCustomTemplatesProps,
-  useDocument,
   useEditorState,
   useCurrentEditor,
 } from "@/grida-canvas-react";
-import { useCurrentScene, useTool } from "@/grida-canvas-react/provider";
+import {
+  useCurrentSceneState,
+  useToolState,
+} from "@/grida-canvas-react/provider";
 import { GridaLogo } from "@/components/grida-logo";
 import { DevtoolsPanel } from "@/grida-canvas-react/devtools";
 import { FontFamilyListProvider } from "@/scaffolds/sidecontrol/controls/font-family";
@@ -121,6 +123,7 @@ import iofigma from "@grida/io-figma";
 import { editor } from "@/grida-canvas";
 import { useEditor } from "@/grida-canvas-react";
 import useDisableSwipeBack from "@/grida-canvas-react/viewport/hooks/use-disable-browser-swipe-back";
+import { WindowCurrentEditorProvider } from "@/grida-canvas-react/devtools/api-host";
 
 type UIConfig = {
   sidebar: "hidden" | "visible";
@@ -268,6 +271,7 @@ export default function CanvasPlayground({
           />
           <ErrorBoundary>
             <StandaloneDocumentEditor editor={instance}>
+              <WindowCurrentEditorProvider />
               <SettingsDialog {...settingsDialog.props} />
               <UserCustomTemplatesProvider templates={templates}>
                 <FontFamilyListProvider fonts={fonts}>
@@ -503,8 +507,8 @@ export default function CanvasPlayground({
 }
 
 function useArtboardListCondition() {
-  const { tool } = useTool();
-  const { constraints } = useCurrentScene();
+  const { tool } = useToolState();
+  const { constraints } = useCurrentSceneState();
   const should_show_artboards_list =
     tool.type === "insert" &&
     tool.node === "container" &&
@@ -564,7 +568,7 @@ function SidebarRight() {
 }
 
 function BrushToolbarPosition({ children }: React.PropsWithChildren<{}>) {
-  const { tool } = useTool();
+  const { tool } = useToolState();
 
   if (!(tool.type === "brush" || tool.type === "eraser")) return null;
 
@@ -703,7 +707,7 @@ const widgets = [
 ];
 
 function LibraryContent() {
-  const { insertNode } = useDocument();
+  const editor = useCurrentEditor();
 
   const icons_data = useReflectIconsData();
   const icons = useMemo(() => {
@@ -729,7 +733,7 @@ function LibraryContent() {
     }
 
     // insert widget tree
-    insertNode(pre);
+    editor.insertNode(pre);
   };
 
   const onInsertSvgSrc = (name: string, src: string) => {
@@ -746,7 +750,7 @@ function LibraryContent() {
           })
           .then((result) => {
             if (result) {
-              insertNode(result);
+              editor.insertNode(result);
             } else {
               throw new Error("Failed to convert SVG");
             }
diff --git a/editor/scaffolds/playground-canvas/toolbar.tsx b/editor/scaffolds/playground-canvas/toolbar.tsx
index ed3d6a8f9..9a1a8c847 100644
--- a/editor/scaffolds/playground-canvas/toolbar.tsx
+++ b/editor/scaffolds/playground-canvas/toolbar.tsx
@@ -1,9 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { generate } from "@/app/(dev)/canvas/actions";
-import { useDocument, useEventTarget } from "@/grida-canvas-react";
-import { OpenAILogo } from "@/components/logos/openai";
+import {
+  useCurrentEditor,
+  useDocumentState,
+  useEditorState,
+} from "@/grida-canvas-react";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
@@ -14,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import grida from "@grida/schema";
 import { useMetaEnter } from "@/hooks/use-meta-enter";
-import { Cross2Icon, FrameIcon, MixIcon } from "@radix-ui/react-icons";
+import { Cross2Icon, FrameIcon } from "@radix-ui/react-icons";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { readStreamableValue } from "ai/rsc";
@@ -36,7 +39,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useTool } from "@/grida-canvas-react/provider";
+import { useToolState } from "@/grida-canvas-react/provider";
 
 function useGenerate() {
   const streamGeneration = useCallback(
@@ -62,7 +65,8 @@ function useGenerate() {
 }
 
 function useTextRewriteDemo() {
-  const { document, changeNodeText } = useDocument();
+  const editor = useCurrentEditor();
+  const { document } = useDocumentState();
   const [delta, setDelta] = useState<{} | undefined>();
   const [loading, setLoading] = useState(false);
   const [aiSettings] = useLocalStorage<string | undefined>(
@@ -127,7 +131,7 @@ ${userprompt}
           const { changes } = d as any;
           changes?.forEach((change: { id: string; text: string }) => {
             if (!(change.id && change.text)) return;
-            changeNodeText(change.id, change.text);
+            editor.changeNodeText(change.id, change.text);
           });
         },
         () => {
@@ -135,14 +139,15 @@ ${userprompt}
         }
       );
     },
-    [changeNodeText, generate, editableTextNodes]
+    [editor, generate, editableTextNodes]
   );
 
   return { action, delta, loading };
 }
 
 export function PlaygroundToolbar() {
-  const { setTool, tool, content_edit_mode } = useTool();
+  const editor = useCurrentEditor();
+  const { tool, content_edit_mode } = useToolState();
 
   const value = toolmode_to_toolbar_value(tool);
 
@@ -156,7 +161,7 @@ export function PlaygroundToolbar() {
       <div className="rounded-full flex gap-4 border bg-background shadow px-4 py-2 pointer-events-auto select-none">
         <ToggleGroup
           onValueChange={(v) => {
-            setTool(
+            editor.setTool(
               v
                 ? toolbar_value_to_cursormode(v as ToolbarToolType)
                 : { type: "cursor" }
@@ -173,7 +178,7 @@ export function PlaygroundToolbar() {
               { value: "hand", label: "Hand tool", shortcut: "H" },
             ]}
             onValueChange={(v) => {
-              setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
+              editor.setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
             }}
           />
           <VerticalDivider />
@@ -192,7 +197,7 @@ export function PlaygroundToolbar() {
               { value: "image", label: "Image" },
             ]}
             onValueChange={(v) => {
-              setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
+              editor.setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
             }}
           />
           <ToolsGroup
@@ -204,7 +209,7 @@ export function PlaygroundToolbar() {
               { value: "eraser", label: "Eraser tool", shortcut: "E" },
             ]}
             onValueChange={(v) => {
-              setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
+              editor.setTool(toolbar_value_to_cursormode(v as ToolbarToolType));
             }}
           />
           <VerticalDivider />
@@ -235,7 +240,8 @@ export function PlaygroundToolbar() {
 }
 
 function BitmapEditModeAuxiliaryToolbar() {
-  const { tool, setTool, tryExitContentEditMode } = useTool();
+  const editor = useCurrentEditor();
+  const { tool } = useToolState();
 
   return (
     <div className="rounded-full flex justify-center items-center gap-2 border bg-background shadow px-3 py-1 pointer-events-auto select-none">
@@ -247,7 +253,7 @@ function BitmapEditModeAuxiliaryToolbar() {
               pressed={tool.type === "flood-fill"}
               onPressedChange={(pressed) => {
                 if (pressed) {
-                  setTool({ type: "flood-fill" });
+                  editor.setTool({ type: "flood-fill" });
                 }
               }}
             >
@@ -264,7 +270,7 @@ function BitmapEditModeAuxiliaryToolbar() {
             variant="ghost"
             size="icon"
             className="p-0.5"
-            onClick={tryExitContentEditMode}
+            onClick={editor.tryExitContentEditMode}
           >
             <Cross2Icon className="w-3.5 h-3.5" />
           </Button>
@@ -300,7 +306,8 @@ const defaultColors = {
 };
 
 function ClipboardColor() {
-  const { clipboardColor, setClipboardColor } = useDocument();
+  const editor = useCurrentEditor();
+  const clipboardColor = useEditorState(editor, (s) => s.user_clipboard_color);
 
   const color = clipboardColor ?? { r: 0, g: 0, b: 0, a: 1 };
 
@@ -333,7 +340,7 @@ function ClipboardColor() {
       >
         <ColorPicker
           color={color}
-          onColorChange={setClipboardColor}
+          onColorChange={editor.setClipboardColor}
           options={options}
         />
       </PopoverContent>
diff --git a/editor/scaffolds/sidebar/sidebar-node-hierarchy-list.tsx b/editor/scaffolds/sidebar/sidebar-node-hierarchy-list.tsx
index d6517e378..fd293dc3f 100644
--- a/editor/scaffolds/sidebar/sidebar-node-hierarchy-list.tsx
+++ b/editor/scaffolds/sidebar/sidebar-node-hierarchy-list.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { useDocument } from "@/grida-canvas-react";
+import { useCurrentEditor } from "@/grida-canvas-react";
 import {
   SidebarGroup,
   SidebarGroupAction,
@@ -15,7 +15,7 @@ import {
 } from "@/grida-canvas-react-starter-kit/starterkit-hierarchy";
 
 export function ScenesGroup() {
-  const { createScene } = useDocument();
+  const editor = useCurrentEditor();
 
   return (
     <SidebarGroup
@@ -24,7 +24,7 @@ export function ScenesGroup() {
     >
       <SidebarGroupLabel>
         Scenes
-        <SidebarGroupAction onClick={() => createScene()}>
+        <SidebarGroupAction onClick={() => editor.createScene()}>
           <PlusIcon />
           <span className="sr-only">New Scene</span>
         </SidebarGroupAction>
diff --git a/editor/scaffolds/sidecontrol/controls/ext-zoom.tsx b/editor/scaffolds/sidecontrol/controls/ext-zoom.tsx
index d27f49d27..47dfd0526 100644
--- a/editor/scaffolds/sidecontrol/controls/ext-zoom.tsx
+++ b/editor/scaffolds/sidecontrol/controls/ext-zoom.tsx
@@ -10,17 +10,19 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { WorkbenchUI } from "@/components/workbench";
-import cmath from "@grida/cmath";
 import { Input } from "@/components/ui/input";
-import { useEventTarget, useTransform } from "@/grida-canvas-react/provider";
+import { useTransformState } from "@/grida-canvas-react/provider";
 import { cn } from "@/components/lib/utils";
+import {
+  useCurrentEditor,
+  useEditorState,
+} from "@/grida-canvas-react/use-editor";
 
 export function ZoomControl({ className }: { className?: string }) {
-  const { transform, scale, fit, zoomIn, zoomOut } = useTransform();
-  const { ruler, setRulerState, pixelgrid, setPixelGridState } =
-    useEventTarget();
-
-  const [scaleX, scaleY] = cmath.transform.getScale(transform);
+  const editor = useCurrentEditor();
+  const ruler = useEditorState(editor, (state) => state.ruler);
+  const pixelgrid = useEditorState(editor, (state) => state.pixelgrid);
+  const { scaleX } = useTransformState();
 
   const pct = Math.round(scaleX * 100);
 
@@ -39,14 +41,14 @@ export function ZoomControl({ className }: { className?: string }) {
           max={256}
           onChange={(e) => {
             const v = parseInt(e.target.value) / 100;
-            if (v) scale(v, "center");
+            if (v) editor.scale(v, "center");
           }}
           className={WorkbenchUI.inputVariants({ size: "sm" })}
         />
         <DropdownMenuSeparator />
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={zoomIn}
+          onSelect={editor.zoomIn}
           className="text-xs"
         >
           Zoom in
@@ -54,7 +56,7 @@ export function ZoomControl({ className }: { className?: string }) {
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={zoomOut}
+          onSelect={editor.zoomOut}
           className="text-xs"
         >
           Zoom out
@@ -62,7 +64,7 @@ export function ZoomControl({ className }: { className?: string }) {
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={() => fit("*")}
+          onSelect={() => editor.fit("*")}
           className="text-xs"
         >
           Zoom to fit
@@ -70,7 +72,7 @@ export function ZoomControl({ className }: { className?: string }) {
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={() => fit("selection")}
+          onSelect={() => editor.fit("selection")}
           className="text-xs"
         >
           Zoom to selection
@@ -78,14 +80,14 @@ export function ZoomControl({ className }: { className?: string }) {
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={() => scale(0.5, "center")}
+          onSelect={() => editor.scale(0.5, "center")}
           className="text-xs"
         >
           Zoom to 50%
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={() => scale(1, "center")}
+          onSelect={() => editor.scale(1, "center")}
           className="text-xs"
         >
           Zoom to 100%
@@ -93,7 +95,7 @@ export function ZoomControl({ className }: { className?: string }) {
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           checked={false}
-          onSelect={() => scale(2, "center")}
+          onSelect={() => editor.scale(2, "center")}
           className="text-xs"
         >
           Zoom to 200%
@@ -102,8 +104,7 @@ export function ZoomControl({ className }: { className?: string }) {
         <DropdownMenuCheckboxItem
           checked={pixelgrid === "on"}
           onSelect={() => {
-            if (pixelgrid === "on") setPixelGridState("off");
-            if (pixelgrid === "off") setPixelGridState("on");
+            editor.togglePixelGrid();
           }}
           className="text-xs"
         >
@@ -113,8 +114,7 @@ export function ZoomControl({ className }: { className?: string }) {
         <DropdownMenuCheckboxItem
           checked={ruler === "on"}
           onSelect={() => {
-            if (ruler === "on") setRulerState("off");
-            if (ruler === "off") setRulerState("on");
+            editor.toggleRuler();
           }}
           className="text-xs"
         >
diff --git a/editor/scaffolds/sidecontrol/controls/font-size.tsx b/editor/scaffolds/sidecontrol/controls/font-size.tsx
index 0dc3e529c..1d8d411a8 100644
--- a/editor/scaffolds/sidecontrol/controls/font-size.tsx
+++ b/editor/scaffolds/sidecontrol/controls/font-size.tsx
@@ -1,12 +1,11 @@
-import { Input } from "@/components/ui/input";
-import { WorkbenchUI } from "@/components/workbench";
 import { Select } from "@radix-ui/react-select";
 import { SelectContent, SelectItem } from "@/components/ui/select";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Button } from "@/components/ui-editor/button";
 import { CaretDownIcon } from "@radix-ui/react-icons";
 import { cn } from "@/components/lib/utils";
-import { TChange, TMixed } from "./utils/types";
+import type { editor } from "@/grida-canvas";
+import type { TMixed } from "./utils/types";
 import { PropertyNumber } from "../ui";
 
 export function FontSizeControl({
@@ -14,7 +13,7 @@ export function FontSizeControl({
   onValueChange,
 }: {
   value?: TMixed<number>;
-  onValueChange?: (change: TChange<number>) => void;
+  onValueChange?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <div className="relative">
diff --git a/editor/scaffolds/sidecontrol/controls/letter-spacing.tsx b/editor/scaffolds/sidecontrol/controls/letter-spacing.tsx
index 54eda7855..01b4ea18f 100644
--- a/editor/scaffolds/sidecontrol/controls/letter-spacing.tsx
+++ b/editor/scaffolds/sidecontrol/controls/letter-spacing.tsx
@@ -1,4 +1,5 @@
-import { TChange, TMixed } from "./utils/types";
+import type { TMixed } from "./utils/types";
+import type { editor } from "@/grida-canvas";
 import { PropertyNumber } from "../ui";
 
 export function LetterSpacingControl({
@@ -6,7 +7,7 @@ export function LetterSpacingControl({
   onValueChange,
 }: {
   value?: TMixed<number>;
-  onValueChange?: (change: TChange<number>) => void;
+  onValueChange?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <PropertyNumber
diff --git a/editor/scaffolds/sidecontrol/controls/line-height.tsx b/editor/scaffolds/sidecontrol/controls/line-height.tsx
index ab637a255..7f5a2d10c 100644
--- a/editor/scaffolds/sidecontrol/controls/line-height.tsx
+++ b/editor/scaffolds/sidecontrol/controls/line-height.tsx
@@ -1,5 +1,6 @@
 import { WorkbenchUI } from "@/components/workbench";
-import type { TChange, TMixed } from "./utils/types";
+import type { TMixed } from "./utils/types";
+import type { editor } from "@/grida-canvas";
 import { PropertyNumber } from "../ui";
 
 export function LineHeightControl({
@@ -7,7 +8,7 @@ export function LineHeightControl({
   onValueChange,
 }: {
   value?: TMixed<number>;
-  onValueChange?: (change: TChange<number>) => void;
+  onValueChange?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <PropertyNumber
diff --git a/editor/scaffolds/sidecontrol/controls/opacity.tsx b/editor/scaffolds/sidecontrol/controls/opacity.tsx
index 05e3ef077..02b3db407 100644
--- a/editor/scaffolds/sidecontrol/controls/opacity.tsx
+++ b/editor/scaffolds/sidecontrol/controls/opacity.tsx
@@ -2,14 +2,15 @@ import { Slider } from "./utils/slider";
 import { WorkbenchUI } from "@/components/workbench";
 import { PropertyNumber } from "../ui";
 import grida from "@grida/schema";
-import type { TChange, TMixed } from "./utils/types";
+import type { editor } from "@/grida-canvas";
+import type { TMixed } from "./utils/types";
 
 export function OpacityControl({
   value,
   onValueChange,
 }: {
   value?: TMixed<number>;
-  onValueChange?: (change: TChange<number>) => void;
+  onValueChange?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <div
diff --git a/editor/scaffolds/sidecontrol/controls/rotate.tsx b/editor/scaffolds/sidecontrol/controls/rotate.tsx
index e1081bd59..f16533496 100644
--- a/editor/scaffolds/sidecontrol/controls/rotate.tsx
+++ b/editor/scaffolds/sidecontrol/controls/rotate.tsx
@@ -1,4 +1,5 @@
-import type { TChange, TMixed } from "./utils/types";
+import type { TMixed } from "./utils/types";
+import type { editor } from "@/grida-canvas";
 import { PropertyNumber } from "../ui";
 
 export function RotateControl({
@@ -6,7 +7,7 @@ export function RotateControl({
   onValueChange,
 }: {
   value?: TMixed<number>;
-  onValueChange?: (change: TChange<number>) => void;
+  onValueChange?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <PropertyNumber
diff --git a/editor/scaffolds/sidecontrol/controls/stroke-width.tsx b/editor/scaffolds/sidecontrol/controls/stroke-width.tsx
index 0e8e32c06..dd1a85e15 100644
--- a/editor/scaffolds/sidecontrol/controls/stroke-width.tsx
+++ b/editor/scaffolds/sidecontrol/controls/stroke-width.tsx
@@ -1,4 +1,5 @@
-import type { TChange, TMixed } from "./utils/types";
+import type { TMixed } from "./utils/types";
+import type { editor } from "@/grida-canvas";
 import { PropertyNumber } from "../ui";
 
 export function StrokeWidthControl({
@@ -6,7 +7,7 @@ export function StrokeWidthControl({
   onValueChange,
 }: {
   value?: TMixed<number>;
-  onValueChange?: (change: TChange<number>) => void;
+  onValueChange?: (change: editor.api.NumberChange) => void;
 }) {
   return (
     <PropertyNumber
diff --git a/editor/scaffolds/sidecontrol/controls/utils/types.ts b/editor/scaffolds/sidecontrol/controls/utils/types.ts
index 4f84d7e7f..f76537e23 100644
--- a/editor/scaffolds/sidecontrol/controls/utils/types.ts
+++ b/editor/scaffolds/sidecontrol/controls/utils/types.ts
@@ -1,13 +1,3 @@
 import type grida from "@grida/schema";
 
-export type TChange<T> =
-  | {
-      type: "set";
-      value: T;
-    }
-  | {
-      type: "delta";
-      value: T;
-    };
-
 export type TMixed<T> = typeof grida.mixed | T;
diff --git a/editor/scaffolds/sidecontrol/sidecontrol-doctype-form.tsx b/editor/scaffolds/sidecontrol/sidecontrol-doctype-form.tsx
index 5f83f02ff..c7074fa6f 100644
--- a/editor/scaffolds/sidecontrol/sidecontrol-doctype-form.tsx
+++ b/editor/scaffolds/sidecontrol/sidecontrol-doctype-form.tsx
@@ -22,7 +22,7 @@ import { PropertyLine, PropertyLineLabel } from "./ui";
 import { EditBinaryExpression } from "../panels/extensions/v-edit";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { Align, Selection } from "./sidecontrol-node-selection";
-import { useDocument } from "@/grida-canvas-react/provider";
+import { useSelectionState } from "@/grida-canvas-react/provider";
 
 export function SideControlDoctypeForm() {
   const [state] = useEditorState();
@@ -53,7 +53,7 @@ function SelectedPageForm() {
 }
 
 function SelectedPageFormStart() {
-  const { selection } = useDocument();
+  const { selection } = useSelectionState();
   if (selection.length === 0) {
     return <SideControlGlobal />;
   } else {
diff --git a/editor/scaffolds/sidecontrol/sidecontrol-doctype-site.tsx b/editor/scaffolds/sidecontrol/sidecontrol-doctype-site.tsx
index cfa37c8ae..e9f5ead7e 100644
--- a/editor/scaffolds/sidecontrol/sidecontrol-doctype-site.tsx
+++ b/editor/scaffolds/sidecontrol/sidecontrol-doctype-site.tsx
@@ -2,7 +2,6 @@
 
 import React from "react";
 import { Align, Selection, Zoom } from "./sidecontrol-node-selection";
-import { SidebarSection } from "@/components/sidebar";
 import { DocumentProperties } from "./sidecontrol-document-properties";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,7 +11,7 @@ import {
 import { Rnd } from "react-rnd";
 import { Portal } from "@radix-ui/react-portal";
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { useDocument } from "@/grida-canvas-react";
+import { useCurrentEditor } from "@/grida-canvas-react";
 import parsecolor from "color-parse";
 import { PreviewButton } from "@/grida-canvas-react-starter-kit/starterkit-preview";
 import { cn } from "@/components/lib/utils";
@@ -66,7 +65,7 @@ function ThemeEditorPortal({
   // persistanceKey?: string;
   onOpenChange?: (open: boolean) => void;
 }) {
-  const { schemaPutProperty } = useDocument();
+  const editor = useCurrentEditor();
 
   return (
     <Portal className="fixed inset-0 z-50 pointer-events-none">
@@ -137,7 +136,7 @@ function ThemeEditorPortal({
                 }
                 `;
 
-                schemaPutProperty("user-custom-css", {
+                editor.schemaPutProperty("user-custom-css", {
                   type: "string",
                   default: propertiescss,
                 });
diff --git a/editor/scaffolds/sidecontrol/sidecontrol-document-properties.tsx b/editor/scaffolds/sidecontrol/sidecontrol-document-properties.tsx
index 9e7694b55..c5acd4570 100644
--- a/editor/scaffolds/sidecontrol/sidecontrol-document-properties.tsx
+++ b/editor/scaffolds/sidecontrol/sidecontrol-document-properties.tsx
@@ -22,7 +22,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { useDocument, useNode } from "@/grida-canvas-react";
+import { useCurrentEditor, useDocumentState } from "@/grida-canvas-react";
 import grida from "@grida/schema";
 import type cg from "@grida/cg";
 import { RGBAColorControl } from "./controls/color";
@@ -31,17 +31,18 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useCurrentScene } from "@/grida-canvas-react/provider";
+import { useCurrentSceneState } from "@/grida-canvas-react/provider";
 
 function SceneBackgroundPropertyLine() {
-  const { backgroundColor, setBackgroundColor } = useCurrentScene();
+  const editor = useCurrentEditor();
+  const { id: scene_id, backgroundColor } = useCurrentSceneState();
 
   return (
     <PropertyLine>
       <RGBAColorControl
         value={backgroundColor ? backgroundColor : undefined}
         onValueChange={(color) => {
-          setBackgroundColor(color);
+          editor.changeSceneBackground(scene_id, color);
         }}
       />
     </PropertyLine>
@@ -49,18 +50,13 @@ function SceneBackgroundPropertyLine() {
 }
 
 export function DocumentProperties({ className }: { className?: string }) {
-  const {
-    document,
-    schemaDefineProperty,
-    schemaRenameProperty,
-    schemaDeleteProperty,
-    schemaUpdateProperty,
-  } = useDocument();
+  const editor = useCurrentEditor();
+  const { document } = useDocumentState();
 
   const keys = Object.keys(document.properties ?? {});
 
   const addProperty = () => {
-    schemaDefineProperty();
+    editor.schemaDefineProperty();
   };
 
   return (
@@ -97,13 +93,13 @@ export function DocumentProperties({ className }: { className?: string }) {
                 definition={property}
                 name={key}
                 onNameChange={(newName) => {
-                  schemaRenameProperty(key, newName);
+                  editor.schemaRenameProperty(key, newName);
                 }}
                 onDefinitionChange={(value) => {
-                  schemaUpdateProperty(key, value);
+                  editor.schemaUpdateProperty(key, value);
                 }}
                 onRemove={() => {
-                  schemaDeleteProperty(key);
+                  editor.schemaDeleteProperty(key);
                 }}
               />
             );
diff --git a/editor/scaffolds/sidecontrol/sidecontrol-global.tsx b/editor/scaffolds/sidecontrol/sidecontrol-global.tsx
index 4ff608976..a359037e1 100644
--- a/editor/scaffolds/sidecontrol/sidecontrol-global.tsx
+++ b/editor/scaffolds/sidecontrol/sidecontrol-global.tsx
@@ -72,7 +72,7 @@ import { useDialogState } from "@/components/hooks/use-dialog-state";
 import { FormStartPage } from "@/theme/templates/formstart";
 import { PropsControl } from "./controls/props";
 import {
-  useDocument,
+  useDocumentState,
   useNode,
   useTemplateDefinition,
 } from "@/grida-canvas-react/provider";
@@ -86,6 +86,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { useCurrentEditor } from "@/grida-canvas-react";
 
 const { default: all, ...variants } = _variants;
 
@@ -154,7 +155,7 @@ export function SideControlGlobal() {
 }
 
 function FormStartPageControl() {
-  const { changeNodeProps } = useDocument();
+  const editor = useCurrentEditor();
 
   // FIXME: 250303 UNKNOWN
   const { props, template_id, properties } = useNode("page");
@@ -184,7 +185,7 @@ function FormStartPageControl() {
             properties={properties!}
             props={shallowProps}
             onValueChange={(k, v) => {
-              changeNodeProps("page", k, v);
+              editor.changeNodeProps("page", k, v);
             }}
           />
         </SidebarMenuSectionContent>
diff --git a/editor/scaffolds/sidecontrol/sidecontrol-node-selection.tsx b/editor/scaffolds/sidecontrol/sidecontrol-node-selection.tsx
index 83bad4e9f..67cdcb96c 100644
--- a/editor/scaffolds/sidecontrol/sidecontrol-node-selection.tsx
+++ b/editor/scaffolds/sidecontrol/sidecontrol-node-selection.tsx
@@ -45,7 +45,12 @@ import { LengthPercentageControl } from "./controls/length-percentage";
 import { LayoutControl } from "./controls/layout";
 import { AxisControl } from "./controls/axis";
 import { MaxlengthControl } from "./controls/maxlength";
-import { useComputedNode, useDocument, useNode } from "@/grida-canvas-react";
+import {
+  useComputedNode,
+  useCurrentEditor,
+  useDocumentState,
+  useEditorState,
+} from "@/grida-canvas-react";
 import {
   Crosshair2Icon,
   LockClosedIcon,
@@ -58,12 +63,13 @@ import { StrokeCapControl } from "./controls/stroke-cap";
 import grida from "@grida/schema";
 import assert from "assert";
 import {
-  useCurrentScene,
-  useEditorFlags,
-  useNodeAction,
-  useSelection,
+  useCurrentSceneState,
+  useEditorFlagsState,
+  useNodeActions,
+  useNodeState,
+  useCurrentSelection,
   useSelectionPaints,
-  useTopNode,
+  useSelectionState,
 } from "@/grida-canvas-react/provider";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Toggle } from "@/components/ui/toggle";
@@ -84,9 +90,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { PropertyAccessExpressionControl } from "./controls/props-property-access-expression";
+import { editor } from "@/grida-canvas";
 
 export function Align() {
-  const { selection, align, distributeEvenly } = useDocument();
+  const editor = useCurrentEditor();
+  const { selection } = useSelectionState();
   const has_selection = selection.length >= 1;
 
   return (
@@ -94,10 +102,10 @@ export function Align() {
       <_AlignControl
         disabled={!has_selection}
         onAlign={(alignment) => {
-          align("selection", alignment);
+          editor.align("selection", alignment);
         }}
         onDistributeEvenly={(axis) => {
-          distributeEvenly("selection", axis);
+          editor.distributeEvenly("selection", axis);
         }}
       />
     </SidebarSection>
@@ -113,7 +121,8 @@ export function Selection({
   empty?: React.ReactNode;
   config?: ControlsConfig;
 }) {
-  const { selection } = useDocument();
+  const instance = useCurrentEditor();
+  const selection = useEditorState(instance, (state) => state.selection);
 
   const selection_length = selection.length;
 
@@ -158,9 +167,14 @@ function SelectionMixedProperties({
 }: {
   config?: ControlsConfig;
 }) {
-  const scene = useCurrentScene();
+  const scene = useCurrentSceneState();
 
-  const { selection: ids, nodes, properties, actions: change } = useSelection();
+  const {
+    selection: ids,
+    nodes,
+    properties,
+    actions: change,
+  } = useCurrentSelection();
   const {
     id,
     name,
@@ -214,7 +228,7 @@ function SelectionMixedProperties({
   } = properties;
 
   const sid = ids.join(",");
-  const is_root = ids.length === 0 && scene.children.includes(ids[0]); // assuming when root is selected, only root is selected
+  // const is_root = ids.length === 0 && scene.children.includes(ids[0]); // assuming when root is selected, only root is selected
   const types = new Set(nodes.map((n) => n.type));
   const _types = Array.from(types);
 
@@ -658,16 +672,67 @@ function SelectedNodeProperties({
 }: {
   config?: ControlsConfig;
 }) {
-  const { selection, document } = useDocument();
-  const { debug } = useEditorFlags();
-  const scene = useCurrentScene();
+  const instance = useCurrentEditor();
+  const selection = useEditorState(instance, (state) => state.selection);
+  const documentProperties = useEditorState(
+    instance,
+    (state) => state.document.properties
+  );
+  const { debug } = useEditorFlagsState();
 
   assert(selection.length === 1);
   const node_id = selection[0];
-  const actions = useNodeAction(node_id)!;
+  const actions = useNodeActions(node_id)!;
+
+  // const node = useNode(node_id);
+  const node = useNodeState(node_id, (node) => ({
+    id: node.id,
+    name: node.name,
+    active: node.active,
+    locked: node.locked,
+    component_id: node.component_id,
+    properties: node.properties,
+    src: node.src,
+    text: node.text,
+    type: node.type,
+    opacity: node.opacity,
+    cornerRadius: node.cornerRadius,
+    fill: node.fill,
+    stroke: node.stroke,
+    strokeWidth: node.strokeWidth,
+    strokeCap: node.strokeCap,
+    fit: node.fit,
+    fontFamily: node.fontFamily,
+    fontWeight: node.fontWeight,
+    fontSize: node.fontSize,
+    lineHeight: node.lineHeight,
+    letterSpacing: node.letterSpacing,
+    textAlign: node.textAlign,
+    textAlignVertical: node.textAlignVertical,
+    maxLength: node.maxLength,
+
+    //
+    border: node.border,
+    //
+    padding: node.padding,
+    boxShadow: node.boxShadow,
 
-  const node = useNode(node_id);
-  const root = useTopNode(node_id);
+    //
+    layout: node.layout,
+    direction: node.direction,
+    mainAxisAlignment: node.mainAxisAlignment,
+    crossAxisAlignment: node.crossAxisAlignment,
+    mainAxisGap: node.mainAxisGap,
+    crossAxisGap: node.crossAxisGap,
+
+    //
+    href: node.href,
+    target: node.target,
+    cursor: node.cursor,
+
+    // x
+    userdata: node.userdata,
+  }));
   const computed = useComputedNode(node_id);
   const {
     id,
@@ -675,22 +740,13 @@ function SelectedNodeProperties({
     active,
     locked,
     component_id,
-    style,
     type,
     opacity,
     cornerRadius,
-    rotation,
     fill,
     stroke,
     strokeWidth,
     strokeCap,
-    position,
-    width,
-    height,
-    left,
-    top,
-    right,
-    bottom,
     fit,
     fontFamily,
     fontWeight,
@@ -724,26 +780,19 @@ function SelectedNodeProperties({
     userdata,
   } = node;
 
-  const document_properties = document.properties;
-  const properties = node.properties;
-  const root_properties = root.properties;
-
   // const istemplate = type?.startsWith("templates/");
   const is_instance = type === "instance";
   const is_templateinstance = type === "template_instance";
   const is_text = type === "text";
   const is_image = type === "image";
   const is_container = type === "container";
-  const is_root = node_id === root.id;
-  const is_single_mode_root =
-    scene.constraints.children === "single" && is_root;
   const is_flex_container = is_container && layout === "flex";
   const is_stylable = type !== "template_instance";
 
   return (
     <SchemaProvider
       schema={{
-        properties: document_properties,
+        properties: documentProperties,
       }}
     >
       <div key={node_id} className="mt-4 mb-10">
@@ -788,67 +837,9 @@ function SelectedNodeProperties({
             )}
           </SidebarMenuSectionContent>
         </SidebarSection>
-        <SidebarSection
-          hidden={config.position === "off" || is_single_mode_root}
-          className="border-b pb-4"
-        >
-          <SidebarSectionHeaderItem>
-            <SidebarSectionHeaderLabel>Position</SidebarSectionHeaderLabel>
-          </SidebarSectionHeaderItem>
-          <SidebarMenuSectionContent className="space-y-2">
-            <PropertyLine>
-              <PositioningConstraintsControl
-                value={{
-                  position: position!,
-                  top,
-                  left,
-                  right,
-                  bottom,
-                }}
-                onValueChange={actions.positioning}
-              />
-            </PropertyLine>
-            <PropertyLine>
-              <PropertyLineLabel>Mode</PropertyLineLabel>
-              <PositioningModeControl
-                value={position}
-                //
-                onValueChange={actions.positioningMode}
-              />
-            </PropertyLine>
-            <PropertyLine>
-              <PropertyLineLabel>Rotate</PropertyLineLabel>
-              <RotateControl
-                value={rotation}
-                onValueChange={actions.rotation}
-              />
-            </PropertyLine>
-          </SidebarMenuSectionContent>
-        </SidebarSection>
-        <SidebarSection
-          hidden={config.size === "off"}
-          className="border-b pb-4"
-        >
-          <SidebarSectionHeaderItem>
-            <SidebarSectionHeaderLabel>Size</SidebarSectionHeaderLabel>
-          </SidebarSectionHeaderItem>
-          <SidebarMenuSectionContent className="space-y-2">
-            <PropertyLine>
-              <PropertyLineLabel>Width</PropertyLineLabel>
-              <LengthPercentageControl
-                value={width}
-                onValueChange={actions.width}
-              />
-            </PropertyLine>
-            <PropertyLine>
-              <PropertyLineLabel>Height</PropertyLineLabel>
-              <LengthPercentageControl
-                value={height}
-                onValueChange={actions.height}
-              />
-            </PropertyLine>
-          </SidebarMenuSectionContent>
-        </SidebarSection>
+        {config.position !== "off" && <SectionPosition node_id={node_id} />}
+        {config.size !== "off" && <SectionDimension node_id={node_id} />}
+
         <SidebarSection
           hidden={config.template === "off" || !is_templateinstance}
           className="border-b pb-4"
@@ -871,10 +862,10 @@ function SelectedNodeProperties({
             <SidebarSectionHeaderLabel>Props</SidebarSectionHeaderLabel>
           </SidebarSectionHeaderItem>
 
-          {properties && Object.keys(properties).length ? (
+          {node.properties && Object.keys(node.properties).length ? (
             <SidebarMenuSectionContent className="space-y-2">
               <PropsControl
-                properties={properties}
+                properties={node.properties}
                 props={computed.props || {}}
                 onValueChange={actions.value}
               />
@@ -901,7 +892,7 @@ function SelectedNodeProperties({
               <StringValueControl
                 value={node.text}
                 maxlength={maxLength}
-                onValueChange={actions.text}
+                onValueChange={(value) => actions.text(value ?? null)}
               />
             </PropertyLine>
             <PropertyLine>
@@ -1201,8 +1192,99 @@ function SelectedNodeProperties({
   );
 }
 
+function SectionPosition({ node_id }: { node_id: string }) {
+  const instance = useCurrentEditor();
+  const document_ctx = useEditorState(instance, (state) => state.document_ctx);
+  const scene = useCurrentSceneState();
+  const top_id = editor.dq.getTopId(document_ctx, node_id)!;
+  const is_root = node_id === top_id;
+  const is_single_mode_root =
+    scene.constraints.children === "single" && is_root;
+
+  const actions = useNodeActions(node_id)!;
+
+  const { position, rotation, top, left, right, bottom } = useNodeState(
+    node_id,
+    (node) => ({
+      position: node.position,
+      rotation: node.rotation,
+      top: node.top,
+      left: node.left,
+      right: node.right,
+      bottom: node.bottom,
+    })
+  );
+
+  return (
+    <SidebarSection hidden={is_single_mode_root} className="border-b pb-4">
+      <SidebarSectionHeaderItem>
+        <SidebarSectionHeaderLabel>Position</SidebarSectionHeaderLabel>
+      </SidebarSectionHeaderItem>
+      <SidebarMenuSectionContent className="space-y-2">
+        <PropertyLine>
+          <PositioningConstraintsControl
+            value={{
+              position: position!,
+              top,
+              left,
+              right,
+              bottom,
+            }}
+            onValueChange={actions.positioning}
+          />
+        </PropertyLine>
+        <PropertyLine>
+          <PropertyLineLabel>Mode</PropertyLineLabel>
+          <PositioningModeControl
+            value={position}
+            //
+            onValueChange={actions.positioningMode}
+          />
+        </PropertyLine>
+        <PropertyLine>
+          <PropertyLineLabel>Rotate</PropertyLineLabel>
+          <RotateControl value={rotation} onValueChange={actions.rotation} />
+        </PropertyLine>
+      </SidebarMenuSectionContent>
+    </SidebarSection>
+  );
+}
+
+function SectionDimension({ node_id }: { node_id: string }) {
+  const { width, height } = useNodeState(node_id, (node) => ({
+    width: node.width,
+    height: node.height,
+  }));
+
+  const actions = useNodeActions(node_id)!;
+
+  return (
+    <SidebarSection className="border-b pb-4">
+      <SidebarSectionHeaderItem>
+        <SidebarSectionHeaderLabel>Size</SidebarSectionHeaderLabel>
+      </SidebarSectionHeaderItem>
+      <SidebarMenuSectionContent className="space-y-2">
+        <PropertyLine>
+          <PropertyLineLabel>Width</PropertyLineLabel>
+          <LengthPercentageControl
+            value={width}
+            onValueChange={actions.width}
+          />
+        </PropertyLine>
+        <PropertyLine>
+          <PropertyLineLabel>Height</PropertyLineLabel>
+          <LengthPercentageControl
+            value={height}
+            onValueChange={actions.height}
+          />
+        </PropertyLine>
+      </SidebarMenuSectionContent>
+    </SidebarSection>
+  );
+}
+
 function SelectionColors() {
-  const { select } = useDocument();
+  const editor = useCurrentEditor();
   const { ids, paints, setPaint } = useSelectionPaints();
 
   // this should show when,
@@ -1235,7 +1317,7 @@ function SelectionColors() {
                 size="xs"
                 className="opacity-0 group-hover:opacity-100"
                 onClick={() => {
-                  select(ids);
+                  editor.select(ids);
                 }}
               >
                 <Crosshair2Icon className="size-3" />
diff --git a/editor/scaffolds/sidecontrol/ui/index.tsx b/editor/scaffolds/sidecontrol/ui/index.tsx
index 643019d51..f478d1841 100644
--- a/editor/scaffolds/sidecontrol/ui/index.tsx
+++ b/editor/scaffolds/sidecontrol/ui/index.tsx
@@ -11,10 +11,10 @@ import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { WorkbenchUI } from "@/components/workbench";
 import grida from "@grida/schema";
-import { TChange } from "@/grida-canvas/action";
 import { cn } from "@/components/lib/utils";
 import { TMixed } from "../controls/utils/types";
 import { ToggleGroup, ToggleGroupItem } from "../controls/utils/toggle-group";
+import type { editor } from "@/grida-canvas";
 
 export function PropertyLine({
   children,
@@ -184,7 +184,7 @@ type NumericPropertyControlProps = Omit<
 } & (
     | {
         mode?: "auto";
-        onValueChange?: (change: TChange<number>) => void;
+        onValueChange?: (change: editor.api.NumberChange) => void;
       }
     | {
         mode?: "fixed";
@@ -222,13 +222,13 @@ export function PropertyNumber({
         switch (mode) {
           case "auto":
             if (e.key === "ArrowUp") {
-              (onValueChange as (change: TChange<number>) => void)?.({
+              (onValueChange as (change: editor.api.NumberChange) => void)?.({
                 type: "delta",
                 value: step * multiplier,
               });
               e.preventDefault();
             } else if (e.key === "ArrowDown") {
-              (onValueChange as (change: TChange<number>) => void)?.({
+              (onValueChange as (change: editor.api.NumberChange) => void)?.({
                 type: "delta",
                 value: -step * multiplier,
               });
@@ -244,7 +244,7 @@ export function PropertyNumber({
         const value = type === "integer" ? parseInt(txt) : parseFloat(txt) || 0;
         switch (mode) {
           case "auto":
-            (onValueChange as (change: TChange<number>) => void)?.({
+            (onValueChange as (change: editor.api.NumberChange) => void)?.({
               type: "set",
               value,
             });
diff --git a/editor/theme/templates/formcollection/page.tsx b/editor/theme/templates/formcollection/page.tsx
index 34b16e478..dc9cf3b97 100644
--- a/editor/theme/templates/formcollection/page.tsx
+++ b/editor/theme/templates/formcollection/page.tsx
@@ -17,13 +17,13 @@ import {
   DataProvider,
 } from "@/grida-react-program-context/data-context";
 import ArrayMap from "@/grida-react-program-context/data-context/array";
-import { useDocument } from "@/grida-canvas-react/provider";
+import { useDocumentState } from "@/grida-canvas-react/provider";
 import assert from "assert";
 
 type ISample = (typeof samples)[keyof typeof samples];
 
 export default function FormCollectionPage() {
-  const { document } = useDocument();
+  const { document } = useDocumentState();
 
   // FIXME: UNKNOWN
   const root = document.nodes["root"];
diff --git a/packages/grida-canvas-schema/grida.ts b/packages/grida-canvas-schema/grida.ts
index b090e7cad..80ee139f0 100644
--- a/packages/grida-canvas-schema/grida.ts
+++ b/packages/grida-canvas-schema/grida.ts
@@ -870,7 +870,7 @@ export namespace grida.program.nodes {
   } & i.IBaseNode &
     i.ISceneNode;
 
-  export type UnknownNodeProperties = Record<keyof UnknwonNode, unknown>;
+  export type UnknownNodeProperties<T = unknown> = Record<keyof UnknwonNode, T>;
 
   // #region node prototypes
   export type TextNodePrototype = __TPrototypeNode<
@@ -1187,7 +1187,8 @@ export namespace grida.program.nodes {
      * Node that can be filled with color - such as rectangle, ellipse, etc.
      */
     export interface IFill<T> {
-      fill?: T;
+      // FIXME: make it nullable
+      fill?: T | undefined;
     }
 
     /**