refactor(commands): centralize command ids

view/ToolOverlay.tsx

@@ -1,4 +1,5 @@
 import { Cursor, Hand } from "@phosphor-icons/react";
+import { commandIds } from "@commands/ids";
 import type { AppStore } from "@editor/store";
 import type { InteractionMode, ToolId } from "@editor/tools";
 import { availableToolIds } from "@editor/tools";
@@ -28,7 +29,7 @@ export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverl
             aria-pressed={active}
             title={labelForTool(tool)}
             className={buttonClass(active)}
-            onClick={() => dispatch("tool.setActive", { tool })}
+            onClick={() => dispatch(commandIds.toolSetActive, { tool })}
           >
             <Icon size={22} weight={active ? "fill" : "regular"} />
           </button>

view/canvas/useCanvasResize.ts

@@ -1,5 +1,6 @@
 import { useEffect, type RefObject } from "react";
 import type { Dispatch } from "@commands/dispatcher";
+import { commandIds } from "@commands/ids";
 
 export function useCanvasResize(canvasRef: RefObject<HTMLCanvasElement | null>, dispatch: Dispatch) {
   useEffect(() => {
@@ -11,7 +12,7 @@ export function useCanvasResize(canvasRef: RefObject<HTMLCanvasElement | null>,
 
       const width = Math.floor(entry.contentRect.width);
       const height = Math.floor(entry.contentRect.height);
-      dispatch("viewport.setSize", { w: width, h: height });
+      dispatch(commandIds.viewportSetSize, { w: width, h: height });
     });
 
     resizeObserver.observe(canvas);