feat: enhance layer mask handling and opacity management

- Introduced `getLayerMask` utility to streamline layer mask retrieval.
- Updated layer rendering logic to incorporate layer masks and opacity adjustments.
- Added functionality to prevent dropping a group into its descendants.
- Enhanced image texture rendering to support opacity parameters across various rendering functions.
- Implemented group layer bounds application for better scaling and positioning.
- Added tests to ensure correct behavior when handling layer masks and group layers.
- Created new types for asset generation provenance to track generated assets more effectively.

editor/transform-targets.ts

@@ -1,6 +1,7 @@
 import type { ImageDocument } from "@core/document";
 import type { Rect } from "@core/geometry";
 import type { Layer } from "@core/layer";
+import { getLayerMask } from "@core/layer-mask-utils";
 import type { ArtboardId, LayerId } from "@core/id";
 import type { TransformTarget } from "./transform";
 
@@ -35,7 +36,11 @@ export function selectedTransformTarget(document: ImageDocument, selection: { ar
 
 function applyLayerBounds(document: ImageDocument, layerId: LayerId, bounds: Rect): ImageDocument {
   const layer = findLayer(document, layerId);
-  const targetLayerIds = layer?.clippingMask ? [layerId, layer.clippingMask.maskLayerId] : [layerId];
+  if (!layer) return document;
+  if (layer.type === "group") return applyGroupLayerBounds(document, layer.id, bounds);
+
+  const layerMask = getLayerMask(layer);
+  const targetLayerIds = layerMask ? [layerId, layerMask.maskLayerId] : [layerId];
 
   return targetLayerIds.reduce(
     (nextDocument, targetLayerId) => ({
@@ -49,6 +54,67 @@ function applyLayerBounds(document: ImageDocument, layerId: LayerId, bounds: Rec
   );
 }
 
+function applyGroupLayerBounds(document: ImageDocument, groupId: LayerId, bounds: Rect): ImageDocument {
+  const group = findLayer(document, groupId);
+  if (!group || group.type !== "group") return document;
+
+  const initialBounds = resolveLayerBounds(document, group);
+  if (!initialBounds || initialBounds.w === 0 || initialBounds.h === 0) return document;
+
+  const scale = {
+    x: bounds.w / initialBounds.w,
+    y: bounds.h / initialBounds.h,
+  };
+
+  return {
+    ...document,
+    artboards: document.artboards.map((artboard) => ({
+      ...artboard,
+      layers: applyGroupLayerBoundsInTree(document, artboard.layers, groupId, initialBounds, bounds, scale),
+    })),
+  };
+}
+
+function applyGroupLayerBoundsInTree(document: ImageDocument, layers: Layer[], groupId: LayerId, initialBounds: Rect, bounds: Rect, scale: { x: number; y: number }): Layer[] {
+  return layers.map((layer) => {
+    if (layer.type === "group" && layer.id === groupId) {
+      return {
+        ...layer,
+        children: layer.children.map((child) => scaleLayerSubtree(document, child, initialBounds, bounds, scale)),
+      };
+    }
+    if (layer.type === "group") return { ...layer, children: applyGroupLayerBoundsInTree(document, layer.children, groupId, initialBounds, bounds, scale) };
+    return layer;
+  });
+}
+
+function scaleLayerSubtree(document: ImageDocument, layer: Layer, initialBounds: Rect, bounds: Rect, scale: { x: number; y: number }): Layer {
+  if (layer.type === "group") {
+    return {
+      ...layer,
+      children: layer.children.map((child) => scaleLayerSubtree(document, child, initialBounds, bounds, scale)),
+    };
+  }
+
+  const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
+  if (!asset) return layer;
+
+  return {
+    ...layer,
+    transform: {
+      ...layer.transform,
+      position: {
+        x: bounds.x + (layer.transform.position.x - initialBounds.x) * scale.x,
+        y: bounds.y + (layer.transform.position.y - initialBounds.y) * scale.y,
+      },
+      scale: {
+        x: layer.transform.scale.x * scale.x,
+        y: layer.transform.scale.y * scale.y,
+      },
+    },
+  };
+}
+
 function applyLayerBoundsInTree(document: ImageDocument, layers: Layer[], layerId: LayerId, bounds: Rect): Layer[] {
   return layers.map((layer) => {
     if (layer.id === layerId && (layer.type === "image" || layer.type === "raster")) {