feat: add editor polish (mobile handling, loading states, accessibility)

- Show desktop-recommended message on mobile viewports (<768px)
- Add LoadingOverlay component for canvas loading/progress states
- Add ARIA tablist/tab/aria-selected to right panel tabs
- Add "Open in Editor" link in review panel after tool processing

apps/web/src/pages/editor-page.tsx

@@ -1,4 +1,5 @@
 // apps/web/src/pages/editor-page.tsx
+import { Monitor } from "lucide-react";
 import { useCallback, useEffect } from "react";
 import { WelcomeScreen } from "@/components/editor/common/welcome-screen";
 import { EditorCanvas } from "@/components/editor/editor-canvas";
@@ -6,9 +7,11 @@ import { EditorOptionsBar } from "@/components/editor/editor-options-bar";
 import { EditorRightPanel } from "@/components/editor/editor-right-panel";
 import { EditorStatusBar } from "@/components/editor/editor-status-bar";
 import { EditorToolbar } from "@/components/editor/editor-toolbar";
+import { useMobile } from "@/hooks/use-mobile";
 import { useEditorStore } from "@/stores/editor-store";
 
 export function EditorPage() {
+  const isMobile = useMobile();
   const sourceImageUrl = useEditorStore((s) => s.sourceImageUrl);
   const isDirty = useEditorStore((s) => s.isDirty);
   const loadImage = useEditorStore((s) => s.loadImage);
@@ -59,6 +62,19 @@ export function EditorPage() {
     }
   }, [loadImage]);
 
+  if (isMobile) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+        <Monitor size={48} className="text-muted-foreground mb-4" />
+        <h2 className="text-lg font-semibold text-foreground mb-2">Desktop Recommended</h2>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          The image editor works best on desktop screens. Please switch to a device with a larger
+          display for the full editing experience.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full overflow-hidden">
       <EditorOptionsBar />