feat(editor): add tool interaction state

editor/index.ts

@@ -1,4 +1,6 @@
 export type { AppState, EditorState, SelectionState, ViewportState } from "./state";
+export type { InteractionMode, ToolId, ToolState } from "./tools";
+export { initialToolState } from "./tools";
 export { createInitialAppState, initialEditorState } from "./initial-state";
 export type { AppStore, StateListener } from "./store";
 export { createAppStore } from "./store";

editor/initial-state.ts

@@ -1,4 +1,5 @@
 import type { AppState, EditorState } from "./state";
+import { initialToolState } from "./tools";
 
 export const initialEditorState: EditorState = {
   viewport: {
@@ -10,6 +11,7 @@ export const initialEditorState: EditorState = {
   selection: {
     layerIds: [],
   },
+  tools: initialToolState,
 };
 
 export function createInitialAppState(name = "Untitled"): AppState {

editor/state.ts

@@ -1,6 +1,7 @@
 import type { ImageDocument } from "@core/document";
 import type { Angle, Size, Vec2D } from "@core/geometry";
 import type { ArtboardId, LayerId } from "@core/id";
+import type { ToolState } from "./tools";
 
 export type ViewportState = {
   center: Vec2D;
@@ -17,6 +18,7 @@ export type SelectionState = {
 export type EditorState = {
   viewport: ViewportState;
   selection: SelectionState;
+  tools: ToolState;
 };
 
 export type AppState = {

editor/tools.ts

@@ -0,0 +1,15 @@
+export type ToolId = "select" | "pan";
+
+export type InteractionMode =
+  | { type: "tool"; tool: ToolId }
+  | { type: "temporary-pan"; previousTool: ToolId };
+
+export type ToolState = {
+  activeTool: ToolId;
+  interactionMode: InteractionMode;
+};
+
+export const initialToolState: ToolState = {
+  activeTool: "select",
+  interactionMode: { type: "tool", tool: "select" },
+};