feat: implement document actions for managing artboards, zoom, and history; update UI components to utilize new actions

app/app.ts

@@ -14,6 +14,7 @@ import { projectCommands } from "@commands/project";
 import { createInitialAppState } from "@editor/initial-state";
 import { createAppStore } from "@editor/store";
 import { createGenerationWorkflow } from "@operations/generation/workflow";
+import { createDocumentActions } from "./document-actions";
 
 export type ImageStudioApp = ReturnType<typeof createImageStudioApp>;
 
@@ -21,6 +22,7 @@ export function createImageStudioApp(options?: { documentName?: string; createDe
   const registry = createCommandRegistry([...projectCommands, ...viewportCommands, ...selectionCommands, ...documentCommands, ...toolCommands, ...generationCommands, ...transformCommands, ...historyCommands, ...commandPaletteCommands, ...workspaceCommands, ...editorCommands]);
   const store = createAppStore(createInitialAppState(options?.documentName), registry);
   const generation = createGenerationWorkflow(store);
+  const documentActions = createDocumentActions(store, generation);
 
   if (options?.createDefaultArtboard !== false) {
     const artboardId = crypto.randomUUID();
@@ -29,12 +31,13 @@ export function createImageStudioApp(options?: { documentName?: string; createDe
       name: "Artboard 1",
       bounds: { x: -400, y: -300, w: 800, h: 600 },
     });
-    store.dispatch(commandIds.viewportFitArtboard, { artboardId });
+    documentActions.fitArtboard(artboardId);
   }
 
   return {
     registry,
     store,
+    actions: { document: documentActions },
     workflows: { generation },
   };
 }