feat(view): add contextual layer controls

view/App.tsx

@@ -1,8 +1,11 @@
+import { useState } from "react";
 import type { ImageStudioApp } from "@app/app";
 import { BottomControlsIsland } from "./BottomControlsIsland";
 import { CanvasViewport } from "./CanvasViewport";
+import { LayersSheet } from "./LayersSheet";
 import { ToolOverlay } from "./ToolOverlay";
 import { labelForTool } from "./toolLabels";
+import { getSelectionSummary } from "./selectionSummary";
 import { useAppState } from "./useAppState";
 import { useViewportActivityIsland } from "./useViewportActivityIsland";
 import "./index.css";
@@ -15,9 +18,11 @@ export function App({ app }: AppProps) {
   const state = useAppState(app.store);
   const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
   const viewportActivityIsland = useViewportActivityIsland(state.editor.viewport);
+  const [layersOpen, setLayersOpen] = useState(false);
+  const selectionSummary = getSelectionSummary(state.document, state.editor.selection);
 
   return (
-    <main className="relative h-full bg-background text-foreground">
+    <main className="relative h-full overflow-hidden bg-background text-foreground">
       <header className="pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between px-3 text-white">
         <h1 className="text-sm font-medium">Image Studio</h1>
         <div className="text-xs">
@@ -32,12 +37,15 @@ export function App({ app }: AppProps) {
           dispatch={app.store.dispatch}
         />
       </div>
+      <LayersSheet document={state.document} selection={state.editor.selection} open={layersOpen} onClose={() => setLayersOpen(false)} />
       <div className="absolute inset-x-0 bottom-4 z-10 flex justify-center">
         <BottomControlsIsland
           viewport={state.editor.viewport}
-          visible={viewportActivityIsland.visible}
+          visible={selectionSummary.type !== "none" || viewportActivityIsland.visible}
           action={viewportActivityIsland.action}
+          selection={selectionSummary}
           dispatch={app.store.dispatch}
+          onOpenLayers={() => setLayersOpen(true)}
         />
       </div>
       <CanvasViewport store={app.store} />