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.

view/LayersSheet.tsx

@@ -4,6 +4,7 @@ import { commandIds } from "@commands/ids";
 import type { Asset } from "@core/asset";
 import type { ImageDocument } from "@core/document";
 import type { Layer } from "@core/layer";
+import { getLayerMask } from "@core/layer-mask-utils";
 import type { ArtboardId } from "@core/id";
 import { createDocumentReadIndex, resolveIndexedLayerBounds, type DocumentReadIndex, type IndexedLayerInfo } from "@editor/document-indexes";
 import type { MaskEditState, SelectionState } from "@editor/state";
@@ -220,10 +221,11 @@ function LayerRow({
 
   const selected = selectedLayerIds.includes(layer.id);
   const layerInfo = documentIndex.layerInfoById.get(layer.id);
-  const maskLayer = layer.clippingMask ? documentIndex.layerById.get(layer.clippingMask.maskLayerId) : undefined;
+  const layerMask = getLayerMask(layer);
+  const maskLayer = layerMask ? documentIndex.layerById.get(layerMask.maskLayerId) : undefined;
   const maskAsset = maskLayer && maskLayer.type !== "group" ? documentIndex.assetById.get(maskLayer.assetId) : undefined;
-  const canAddMask = Boolean(layerInfo && layer.type !== "group" && !layer.clippingMask);
-  const editingMask = Boolean(maskEdit && layer.clippingMask && maskEdit.targetLayerId === layer.id && maskEdit.maskLayerId === layer.clippingMask.maskLayerId);
+  const canAddMask = Boolean(layerInfo && layer.type !== "group" && !layerMask);
+  const editingMask = Boolean(maskEdit && layerMask && maskEdit.targetLayerId === layer.id && maskEdit.maskLayerId === layerMask.maskLayerId);
   const rowPadding = 12 + depth * 16;
 
   return (
@@ -273,7 +275,7 @@ function LayerRow({
             {layer.name}
           </button>
         )}
-        {layer.clippingMask ? (
+        {layerMask ? (
           <span className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs ${editingMask || selected ? "bg-black/10 text-black/65" : "bg-sky-400/10 text-sky-100/70"}`}>
             <Stack size={13} weight="fill" /> Mask
           </span>
@@ -290,7 +292,7 @@ function LayerRow({
           {layer.locked ? <Lock size={24} weight="regular" /> : <LockOpen size={24} weight="regular" />}
         </button>
       </div>
-      {layer.clippingMask ? (
+      {layerMask ? (
         <div className="mt-2 flex min-h-14 flex-wrap items-center gap-2 rounded-[1.5rem] py-2 pl-4 pr-2 text-sm text-sky-100/70 hover:bg-white/[0.04]">
           <Stack size={24} weight="fill" className="shrink-0" />
           <span className="min-w-28 flex-1 truncate">{maskLayer ? "Layer mask" : "Layer mask missing"}</span>
@@ -303,7 +305,7 @@ function LayerRow({
                 onClick={() =>
                   editingMask
                     ? dispatch(commandIds.toolExitMaskEdit, undefined)
-                    : dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: layer.clippingMask!.maskLayerId })
+                    : dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: layerMask.maskLayerId })
                 }
               >
                 {editingMask ? "Done" : "Edit"}
@@ -313,7 +315,7 @@ function LayerRow({
                 className={maskActionButtonClass()}
                 title="Paint reveal"
                 onClick={() => {
-                  dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: layer.clippingMask!.maskLayerId });
+                  dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: layerMask.maskLayerId });
                   dispatch(commandIds.toolSetActive, { tool: "brush" });
                 }}
               >
@@ -324,7 +326,7 @@ function LayerRow({
                 className={maskActionButtonClass()}
                 title="Paint hide"
                 onClick={() => {
-                  dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: layer.clippingMask!.maskLayerId });
+                  dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: layerMask.maskLayerId });
                   dispatch(commandIds.toolSetActive, { tool: "eraser" });
                 }}
               >
@@ -592,7 +594,8 @@ function moveLayer(documentIndex: DocumentReadIndex, info: IndexedLayerInfo, dir
   const blocks = siblings.flatMap((layer, index) => {
     if (maskLayerIds.has(layer.id)) return [];
 
-    const maskIndex = layer.clippingMask ? siblings.findIndex((candidate) => candidate.id === layer.clippingMask?.maskLayerId) : -1;
+    const layerMask = getLayerMask(layer);
+    const maskIndex = layerMask ? siblings.findIndex((candidate) => candidate.id === layerMask.maskLayerId) : -1;
     const start = maskIndex >= 0 ? Math.min(maskIndex, index) : index;
     const end = maskIndex >= 0 ? Math.max(maskIndex, index) : index;
     return [{ layerId: layer.id, start, end, size: end - start + 1 }];