feat(viewport): add fit artboard command

commands/viewport.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import { createInitialAppState } from "@editor/initial-state";
 import {
+  viewportFitArtboardCommand,
   viewportPanCommand,
   viewportResetCommand,
   viewportSetSizeCommand,
@@ -34,6 +35,36 @@ describe("viewport commands", () => {
     expect(next.editor.viewport.center).toEqual({ x: 25, y: 0 });
   });
 
+  test("fits an artboard in the viewport", () => {
+    const state = {
+      ...viewportSetSizeCommand.execute(context(), { w: 1000, h: 800 }),
+      document: {
+        ...context().state.document,
+        artboards: [{ id: "artboard-1", name: "Artboard", bounds: { x: -400, y: -300, w: 800, h: 600 }, backgroundColor: "transparent", layers: [] }],
+      },
+    };
+
+    const next = viewportFitArtboardCommand.execute({ state }, { artboardId: "artboard-1", padding: 100 });
+
+    expect(next.editor.viewport.center).toEqual({ x: 0, y: 0 });
+    expect(next.editor.viewport.zoom).toBe(1);
+  });
+
+  test("fit artboard centers even before viewport size is known", () => {
+    const state = {
+      ...context().state,
+      document: {
+        ...context().state.document,
+        artboards: [{ id: "artboard-1", name: "Artboard", bounds: { x: 10, y: 20, w: 100, h: 200 }, backgroundColor: "transparent", layers: [] }],
+      },
+    };
+
+    const next = viewportFitArtboardCommand.execute({ state }, { artboardId: "artboard-1" });
+
+    expect(next.editor.viewport.center).toEqual({ x: 60, y: 120 });
+    expect(next.editor.viewport.zoom).toBe(1);
+  });
+
   test("resets viewport but preserves size", () => {
     const sized = viewportSetSizeCommand.execute(context(), { w: 640, h: 480 });
     const panned = viewportPanCommand.execute({ state: sized }, { delta: { x: 4, y: 8 } });