From 5147752c4537543582131bdbd76067cb65fe23e5 Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Mon, 15 Jun 2026 17:09:57 -0700
Subject: [PATCH] webapp: add "Edit on Canvas" lightbox button -> PageDraw

Open any image output in the image editor straight from the lightbox,
matching the existing Make Video / Recreate handoffs. Mirrors the Tauri
app handleEditFromGallery flow: RESET the lib store, seed the image as
base (and into history), then route to /edit-image.

Gated to images (hidden for video/3D), so it shows on create-image,
library, and task-queue lightboxes via the shared LightboxDetails.
---
 .../components/lightbox/LightboxDetails.tsx   | 12 +++++++++
 .../src/components/lightbox/lightbox.tsx      | 13 +++++++++
 .../src/pages/pagedraw/edit-on-canvas.ts      | 27 +++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 frontend/apps/artcraft-webapp/src/pages/pagedraw/edit-on-canvas.ts

diff --git a/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx b/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx
index df679d8606..3b3148bd7a 100644
--- a/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/lightbox/LightboxDetails.tsx
@@ -75,6 +75,7 @@ export interface LightboxDetailsProps {
   onClose?: () => void;
   onRecreate?: () => void;
   onMakeVideo?: () => void;
+  onEditOnCanvas?: () => void;
   onDelete?: () => void;
   showDownloadAppCta?: boolean;
 }
@@ -90,6 +91,7 @@ export function LightboxDetails({
   onClose,
   onRecreate,
   onMakeVideo,
+  onEditOnCanvas,
   onDelete,
   showDownloadAppCta,
 }: LightboxDetailsProps) {
@@ -474,6 +476,16 @@ export function LightboxDetails({
             Make Video
           </Button>
         )}
+        {onEditOnCanvas && (
+          <Button
+            icon={faPencil}
+            className="w-full border border-ui-panel-border bg-ui-controls/40 hover:bg-ui-controls/60 text-white"
+            variant="secondary"
+            onClick={onEditOnCanvas}
+          >
+            Edit on Canvas
+          </Button>
+        )}
         {onRecreate && promptData.hasToken && (
           <Button
             icon={faArrowRotateRight}
diff --git a/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx b/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx
index 6de5cd44a6..d463f139b1 100644
--- a/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/lightbox/lightbox.tsx
@@ -23,6 +23,7 @@ import {
   type PromptData,
 } from "./shared";
 import { LightboxDetails } from "./LightboxDetails";
+import { applyEditOnCanvasFromImage } from "../../pages/pagedraw/edit-on-canvas";
 import {
   applyMakeVideoFromImage,
   applyRecreateFromMediaToken,
@@ -334,6 +335,13 @@ export function Lightbox({
     applyMakeVideoFromImage(selectedMediaToken, selectedImageUrl, navigate);
   }, [selectedMediaToken, selectedImageUrl, canMakeVideo, navigate, onClose]);
 
+  const canEditOnCanvas = !isVideo && !is3D;
+  const handleEditOnCanvas = useCallback(() => {
+    if (!selectedMediaToken || !selectedImageUrl || !canEditOnCanvas) return;
+    onClose();
+    applyEditOnCanvasFromImage(selectedMediaToken, selectedImageUrl, navigate);
+  }, [selectedMediaToken, selectedImageUrl, canEditOnCanvas, navigate, onClose]);
+
   return (
     <>
       <Modal
@@ -505,6 +513,11 @@ export function Lightbox({
                 ? handleMakeVideo
                 : undefined
             }
+            onEditOnCanvas={
+              canEditOnCanvas && selectedMediaToken && selectedImageUrl
+                ? handleEditOnCanvas
+                : undefined
+            }
             onDelete={
               selectedMediaToken
                 ? () => setConfirmDeleteOpen(true)
diff --git a/frontend/apps/artcraft-webapp/src/pages/pagedraw/edit-on-canvas.ts b/frontend/apps/artcraft-webapp/src/pages/pagedraw/edit-on-canvas.ts
new file mode 100644
index 0000000000..efd68ed4dd
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/pages/pagedraw/edit-on-canvas.ts
@@ -0,0 +1,27 @@
+// "Edit on Canvas" handoff: open an existing image in the PageDraw editor.
+//
+// Mirrors the Tauri app's handleEditFromGallery — RESET the editor, seed the
+// chosen image as the base (and into history), then route to /edit-image.
+// Seeding the lib's store before navigating means the editor mounts straight
+// into the image, same store-based handoff the create-image/create-video
+// "Recreate" and "Make Video" buttons use (see lib/recreate.ts).
+
+import type { NavigateFunction } from "react-router-dom";
+import { useSceneStore } from "@storyteller/ui-pagedraw";
+
+export function applyEditOnCanvasFromImage(
+  mediaToken: string,
+  mediaUrl: string,
+  navigate: NavigateFunction,
+): void {
+  const store = useSceneStore.getState();
+  const baseImage = {
+    url: mediaUrl,
+    mediaToken,
+    fullImageUrl: mediaUrl,
+  };
+  store.RESET();
+  store.addHistoryImageBundle({ images: [baseImage] });
+  store.setBaseImageInfo(baseImage);
+  navigate("/edit-image");
+}