feat: add contextual layer inspector

view/BottomControlsIsland.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import type { AppStore } from "@editor/store";
 import type { ImageDocument } from "@core/document";
 import type { GenerationState, MaskViewMode, SelectionState, ViewportState } from "@editor/state";
@@ -13,6 +14,7 @@ import type { Rect } from "@core/geometry";
 import type { TransformTarget } from "@editor/transform";
 import type { GenerationWorkflow } from "@operations/generation/workflow";
 import type { DocumentActions } from "@app/document-actions";
+import { createDocumentReadIndex } from "@editor/document-indexes";
 export type BottomControlsAction = "pan" | "zoom";
 
 export type BottomControlsIslandProps = {
@@ -39,6 +41,8 @@ export type BottomControlsIslandProps = {
 };
 
 export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, operation, brushSettings, generateSettings, generation, chromaKeySettings, magicWandSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch, generationWorkflow, documentActions }: BottomControlsIslandProps) {
+  const documentIndex = useMemo(() => createDocumentReadIndex(document), [document]);
+  const selectedLayerInfo = selection.layerIds.length === 1 && selection.layerIds[0] ? documentIndex.layerInfoById.get(selection.layerIds[0]) : undefined;
   const zoomPercent = Math.round(viewport.zoom * 100);
   const x = Math.round(viewport.center.x);
   const y = Math.round(viewport.center.y);
@@ -61,7 +65,7 @@ export function BottomControlsIsland({ document, selection, viewport, visible, a
       ) : activeTool === "magicWand" ? (
         <MagicWandControls settings={magicWandSettings} dispatch={dispatch} />
       ) : transformBounds && transformTarget ? (
-        <TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
+        <TransformControls bounds={transformBounds} target={transformTarget} documentIndex={documentIndex} layerInfo={selectedLayerInfo} dispatch={dispatch} />
       ) : action === "pan" ? (
         <PanControls x={x} y={y} />
       ) : (