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.test.ts

@@ -44,6 +44,10 @@ describe("transform targets", () => {
     expect(resolveTransformTargetBounds(document, { type: "layer", id: "l1" })).toEqual({ x: 10, y: 20, w: 100, h: 200 });
   });
 
+  test("resolves group bounds from descendant layers", () => {
+    expect(resolveTransformTargetBounds(groupDocument(), { type: "layer", id: "g1" })).toEqual({ x: 10, y: 20, w: 300, h: 200 });
+  });
+
   test("applies image layer bounds to transform", () => {
     const next = applyTransformTargetBounds(document, { type: "layer", id: "l1" }, { x: 30, y: 40, w: 400, h: 50 });
     const layer = next.artboards[0]?.layers[0];
@@ -81,8 +85,49 @@ describe("transform targets", () => {
     expect(next.artboards[0]?.layers[1]?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
   });
 
+  test("applies group bounds to descendant layer transforms", () => {
+    const next = applyTransformTargetBounds(groupDocument(), { type: "layer", id: "g1" }, { x: 20, y: 40, w: 600, h: 100 });
+    const group = next.artboards[0]?.layers[0];
+    const first = group?.type === "group" ? group.children[0] : undefined;
+    const second = group?.type === "group" ? group.children[1] : undefined;
+
+    expect(first?.transform).toEqual({ position: { x: 20, y: 40 }, scale: { x: 1, y: 1 }, rotation: 0 });
+    expect(second?.transform).toEqual({ position: { x: 420, y: 90 }, scale: { x: 1, 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 });
   });
 });
+
+function groupDocument(): ImageDocument {
+  return {
+    ...document,
+    artboards: [
+      {
+        ...document.artboards[0]!,
+        layers: [
+          {
+            id: "g1",
+            type: "group",
+            name: "Group",
+            visible: true,
+            locked: false,
+            opacity: 1,
+            transform: { position: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, rotation: 0 },
+            children: [
+              document.artboards[0]!.layers[0]!,
+              {
+                ...document.artboards[0]!.layers[0]!,
+                id: "l2",
+                name: "Second Layer",
+                transform: { position: { x: 210, y: 120 }, scale: { x: 0.5, y: 1 }, rotation: 0 },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+}