feat: implement brush availability hints and enhance layer rendering order

view/App.tsx

@@ -3,6 +3,7 @@ import { DownloadSimple, FolderOpen, Stack } from "@phosphor-icons/react";
 import type { ImageStudioApp } from "@app/app";
 import { commandIds } from "@commands/ids";
 import { BottomControlsIsland } from "./BottomControlsIsland";
+import { brushUnavailableHint } from "./canvas/brush";
 import { CanvasViewport } from "./CanvasViewport";
 import { LayersSheet } from "./LayersSheet";
 import { ToolOverlay } from "./ToolOverlay";
@@ -67,6 +68,7 @@ export function App({ app }: AppProps) {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [app.store]);
   const transformBounds = transformTarget ? resolveTransformTargetBounds(state.document, transformTarget) : undefined;
+  const brushHint = brushUnavailableHint(state.document, state.editor);
 
   return (
     <main className="relative h-full overflow-hidden bg-[radial-gradient(circle_at_20%_18%,rgba(148,163,184,0.18),transparent_34%),radial-gradient(circle_at_82%_22%,rgba(71,85,105,0.22),transparent_36%),radial-gradient(circle_at_48%_88%,rgba(30,41,59,0.28),transparent_40%),linear-gradient(135deg,#020617_0%,#0f172a_46%,#111827_100%)] text-foreground">
@@ -107,6 +109,7 @@ export function App({ app }: AppProps) {
           brushSettings={state.editor.tools.brush}
           editingMask={Boolean(state.editor.maskEdit)}
           maskViewMode={state.editor.maskEdit?.viewMode ?? "composite"}
+          brushHint={brushHint}
           transformBounds={viewportActivityIsland.visible ? undefined : transformBounds}
           transformTarget={viewportActivityIsland.visible ? undefined : transformTarget}
           dispatch={app.store.dispatch}