feat: enhance layer masking functionality and brush controls

- Refactor LayersSheet component to support mask editing state and improve layer visibility handling.
- Introduce functions to collect mask layer IDs and count display layers excluding masks.
- Update BrushControls to include mask view mode options and a Done button for exiting mask editing.
- Modify brush session handling to support brush previews when editing masks.
- Implement a new BrushPreviewRenderer for rendering brush strokes with visual feedback.
- Add document geometry utilities for transforming points and resolving layer bounds.
- Ensure proper cleanup of brush preview on pointer leave and other interactions.

editor/initial-state.ts

@@ -13,7 +13,9 @@ export const initialEditorState: EditorState = {
   },
   tools: initialToolState,
   transformSession: undefined,
-  maskEditLayerId: undefined,
+  maskEdit: undefined,
+  brushPreview: undefined,
+  brushStrokePreview: undefined,
 };
 
 export function createInitialAppState(name = "Untitled"): AppState {

editor/state.ts

@@ -1,6 +1,6 @@
 import type { ImageDocument } from "@core/document";
 import type { Angle, Size, Vec2D } from "@core/geometry";
-import type { ArtboardId, LayerId } from "@core/id";
+import type { ArtboardId, AssetId, LayerId } from "@core/id";
 import type { ToolState } from "./tools";
 import type { TransformSession } from "./transform";
 
@@ -16,12 +16,32 @@ export type SelectionState = {
   layerIds: LayerId[];
 };
 
+export type MaskViewMode = "composite" | "blackWhite" | "alpha" | "overlay";
+
+export type MaskEditState = {
+  targetLayerId: LayerId;
+  maskLayerId: LayerId;
+  viewMode?: MaskViewMode;
+};
+
+export type BrushPreviewState = {
+  position: Vec2D;
+};
+
+export type BrushStrokePreviewState = {
+  layerId: LayerId;
+  assetId: AssetId;
+  source: string;
+};
+
 export type EditorState = {
   viewport: ViewportState;
   selection: SelectionState;
   tools: ToolState;
   transformSession?: TransformSession;
-  maskEditLayerId?: LayerId;
+  maskEdit?: MaskEditState;
+  brushPreview?: BrushPreviewState;
+  brushStrokePreview?: BrushStrokePreviewState;
 };
 
 export type HistorySnapshot = {

editor/transform-targets.test.ts

@@ -51,6 +51,36 @@ describe("transform targets", () => {
     expect(layer?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
   });
 
+  test("keeps attached mask bounds in sync with transformed layers", () => {
+    const maskedDocument: ImageDocument = {
+      ...document,
+      assets: [...document.assets, { id: "mask-asset", name: "Mask", mimeType: "image/png", source: "asset://mask", intrinsicSize: { w: 200, h: 100 } }],
+      artboards: [
+        {
+          ...document.artboards[0]!,
+          layers: [
+            {
+              id: "mask",
+              type: "raster",
+              name: "Mask",
+              visible: true,
+              locked: false,
+              opacity: 1,
+              assetId: "mask-asset",
+              transform: { position: { x: 10, y: 20 }, scale: { x: 0.5, y: 2 }, rotation: 0 },
+            },
+            { ...document.artboards[0]!.layers[0]!, clippingMask: { maskLayerId: "mask" } },
+          ],
+        },
+      ],
+    };
+
+    const next = applyTransformTargetBounds(maskedDocument, { type: "layer", id: "l1" }, { x: 30, y: 40, w: 400, h: 50 });
+
+    expect(next.artboards[0]?.layers[0]?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
+    expect(next.artboards[0]?.layers[1]?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
+  });
+
   test("applies artboard bounds", () => {
     const next = applyTransformTargetBounds(document, { type: "artboard", id: "a1" }, { x: 10, y: 20, w: 200, h: 160 });
     expect(next.artboards[0]?.bounds).toEqual({ x: 10, y: 20, w: 200, h: 160 });

editor/transform-targets.ts

@@ -34,13 +34,19 @@ export function selectedTransformTarget(document: ImageDocument, selection: { ar
 }
 
 function applyLayerBounds(document: ImageDocument, layerId: LayerId, bounds: Rect): ImageDocument {
-  return {
-    ...document,
-    artboards: document.artboards.map((artboard) => ({
-      ...artboard,
-      layers: applyLayerBoundsInTree(document, artboard.layers, layerId, bounds),
-    })),
-  };
+  const layer = findLayer(document, layerId);
+  const targetLayerIds = layer?.clippingMask ? [layerId, layer.clippingMask.maskLayerId] : [layerId];
+
+  return targetLayerIds.reduce(
+    (nextDocument, targetLayerId) => ({
+      ...nextDocument,
+      artboards: nextDocument.artboards.map((artboard) => ({
+        ...artboard,
+        layers: applyLayerBoundsInTree(nextDocument, artboard.layers, targetLayerId, bounds),
+      })),
+    }),
+    document,
+  );
 }
 
 function applyLayerBoundsInTree(document: ImageDocument, layers: Layer[], layerId: LayerId, bounds: Rect): Layer[] {