Merge branch 'main' into feature/model-flags

- history stack styling
- selected image highlighted
- left reset all button with confirm modal before action

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -22,6 +22,7 @@ import {
   GalleryModal,
   galleryModalVisibleViewMode,
   galleryModalVisibleDuringDrag,
+  galleryModalLightboxVisible,
 } from "@storyteller/ui-gallery-modal";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { Tooltip } from "@storyteller/ui-tooltip";
@@ -48,6 +49,8 @@ import {
   useTauriWindowControls,
   useTauriPlatform,
 } from "@storyteller/tauri-utils";
+import { useEditStore } from "../../../pages/PageEdit/stores/EditState";
+import { BaseSelectorImage } from "../../../pages/PageEdit/BaseImageSelector";
 
 interface Props {
   pageName: string;
@@ -137,6 +140,30 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
     }
   };
 
+  const handleEditFromGallery = async (url: string, mediaId?: string) => {
+    try {
+      // Reset editor state
+      useEditStore.getState().RESET();
+
+      // Switch to EDIT tab
+      useTabStore.getState().setActiveTab("EDIT");
+
+      // Select the image for editing
+      const baseImage: BaseSelectorImage = {
+        url,
+        mediaToken: mediaId || "",
+      };
+      useEditStore.getState().setBaseImageInfo(baseImage);
+
+      // Close gallery modal and lightbox if open
+      galleryModalVisibleViewMode.value = false;
+      galleryModalVisibleDuringDrag.value = false;
+      galleryModalLightboxVisible.value = false;
+    } catch (e) {
+      // no-op
+    }
+  };
+
   const getPageTitle = (): string => {
     switch (tabStore.activeTabId) {
       case "2D":
@@ -171,7 +198,9 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
         >
           <div className="flex items-center gap-3" data-tauri-drag-region>
             <div className="mr-2" data-tauri-drag-region>
-              <span className="sr-only" data-tauri-drag-region>ArtCraft</span>
+              <span className="sr-only" data-tauri-drag-region>
+                ArtCraft
+              </span>
               <img
                 className="h-[24px] w-auto"
                 src="/resources/images/artcraft-logo-3.png"
@@ -295,7 +324,11 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
         globalAccountLogoutCallback={() => setLogoutStates()}
       />
 
-      <GalleryModal mode="view" onDownloadClicked={downloadFile} />
+      <GalleryModal
+        mode="view"
+        onDownloadClicked={downloadFile}
+        onEditClicked={handleEditFromGallery}
+      />
     </>
   );
 };

frontend/apps/editor3d/app/src/pages/PageEdit/HistoryStack.tsx

@@ -1,7 +1,8 @@
 import { Button } from "@storyteller/ui-button";
-import { EditedImage, useImageEditCompleteEvent } from "@storyteller/tauri-events";
+import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
 import { faTrash } from "@fortawesome/pro-solid-svg-icons";
 import { useState } from "react";
+import { twMerge } from "tailwind-merge";
 import { BaseSelectorImage } from "./BaseImageSelector";
 
 export interface ImageBundle {
@@ -16,43 +17,74 @@ interface HistoryStackProps {
 
 export const HistoryStack = ({
   onClear,
-  onImageSelect = () => { },
+  onImageSelect = () => {},
   startingBundles = [],
 }: HistoryStackProps) => {
-
-  const [imageBundles, setImageBundles] = useState<ImageBundle[]>(startingBundles);
+  const [imageBundles, setImageBundles] =
+    useState<ImageBundle[]>(startingBundles);
+  const [selectedImageToken, setSelectedImageToken] = useState<string | null>(
+    startingBundles.length > 0 && startingBundles[0].images.length > 0
+      ? startingBundles[0].images[0].mediaToken
+      : null,
+  );
   useImageEditCompleteEvent(async (event) => {
     const newBundle: ImageBundle = {
-      images: event.edited_images.map((editedImage) => ({
-        url: editedImage.cdn_url,
-        mediaToken: editedImage.media_token,
-      } as BaseSelectorImage)),
+      images: event.edited_images.map(
+        (editedImage) =>
+          ({
+            url: editedImage.cdn_url,
+            mediaToken: editedImage.media_token,
+          }) as BaseSelectorImage,
+      ),
     };
 
-    imageBundles.push(newBundle);
-    setImageBundles(imageBundles);
+    setImageBundles([...imageBundles, newBundle]);
+    const newlySelected = newBundle.images[0];
+    if (newlySelected) {
+      setSelectedImageToken(newlySelected.mediaToken);
+      onImageSelect(newlySelected);
+    }
   });
 
   const handleClear = () => {
     setImageBundles(startingBundles);
+    setSelectedImageToken(null);
     onClear();
-  }
+  };
 
   return (
-    <div className="w-16 h-auto max-h-1/2 overflow-y-auto rounded-lg bg-white">
-      <div className="flex flex-col-reverse items-center justify-center">
-        <Button icon={faTrash} type="reset" onClick={handleClear} />
+    <div className="max-h-1/2 glass h-auto w-16 overflow-y-auto rounded-lg p-1">
+      <div className="flex flex-col-reverse items-center justify-center gap-2">
+        <Button
+          className="h-7 w-full rounded-md opacity-80"
+          iconClassName="h-3 w-3"
+          icon={faTrash}
+          type="reset"
+          onClick={handleClear}
+          variant="destructive"
+        />
         {imageBundles.map((bundle) => (
           <>
-            <hr className="border-none bg-red w-full rounded-md h-2" />
+            <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />
             {bundle.images.map((image, imgIndex) => (
-              <Button key={imgIndex} className="w-full h-24" onClick={() => { onImageSelect(image) }}>
+              <Button
+                key={imgIndex}
+                className={twMerge(
+                  "aspect-square h-full w-full border-2 border-white bg-transparent p-0 hover:bg-transparent hover:opacity-80",
+                  selectedImageToken === image.mediaToken &&
+                    "border-primary hover:opacity-100",
+                )}
+                onClick={() => {
+                  setSelectedImageToken(image.mediaToken);
+                  onImageSelect(image);
+                }}
+              >
                 {/* TODO: Fix CORS issue here */}
                 <img
                   src={image.url + "?historystack+" + Math.random()}
                   alt=""
                   crossOrigin="anonymous"
-                  className="w-full h-full rounded-lg"
+                  className="h-full w-full rounded-lg object-cover"
                 />
               </Button>
             ))}
@@ -61,4 +93,4 @@ export const HistoryStack = ({
       </div>
     </div>
   );
-}
+};

frontend/apps/editor3d/app/src/pages/PageEdit/LeftResetStack.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark, faTrashXmark } from "@fortawesome/pro-solid-svg-icons";
+import { Tooltip } from "@storyteller/ui-tooltip";
+import {
+  showActionReminder,
+  isActionReminderOpen,
+} from "@storyteller/ui-action-reminder-modal";
+
+interface LeftResetStackProps {
+  onReset: () => void;
+  className?: string;
+}
+
+const LeftResetStack: React.FC<LeftResetStackProps> = ({
+  onReset,
+  className = "",
+}) => {
+  return (
+    <div
+      className={`glass rounded-xl border-2 border-red/50 shadow-lg hover:border-red/80 ${className}`}
+    >
+      <div className="relative h-full">
+        <Tooltip
+          content="Reset All"
+          position="right"
+          closeOnClick={true}
+          className="ms-1 rounded-md bg-red px-3 py-1"
+          delay={100}
+        >
+          <button
+            className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-transparent text-white transition-colors hover:bg-red/50"
+            onClick={() =>
+              showActionReminder({
+                reminderType: "default",
+                title: "Reset All",
+                primaryActionIcon: faTrashXmark,
+                primaryActionBtnClassName: "bg-red hover:bg-red/80",
+                message: (
+                  <p className="text-sm text-white/70">
+                    Are you sure you want to reset all? This will clear all your
+                    work and cannot be undone.
+                  </p>
+                ),
+                primaryActionText: "Reset all",
+                onPrimaryAction: () => {
+                  onReset();
+                  isActionReminderOpen.value = false;
+                },
+              })
+            }
+          >
+            <FontAwesomeIcon icon={faXmark} className="h-5 w-5 text-xl" />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default LeftResetStack;

frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx

@@ -20,9 +20,11 @@ import {
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
-import { ModelInfo } from "@storyteller/model-list";
+import { lookupModelByTauriId, ModelInfo } from "@storyteller/model-list";
 import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
 import { HistoryStack, ImageBundle } from "./HistoryStack";
+import { ModelTag } from "libs/model-list/src/lib/ModelTag";
+import LeftResetStack from "./LeftResetStack";
 
 const PAGE_ID: ModelPage = ModelPage.ImageEditor;
 
@@ -30,13 +32,15 @@ const PageEdit = () => {
   //useStateSceneLoader();
   const { selectedModels } = useModelSelectorStore();
 
-  const selectedModel =
+  const selectedModelLabel =
     selectedModels[PAGE_ID] || IMAGE_EDITOR_PAGE_MODEL_LIST[0]?.label;
 
+  const selectedModel = IMAGE_EDITOR_PAGE_MODEL_LIST.find(
+    (m) => m.label === selectedModelLabel,
+  );
+
   const selectedModelInfo: ModelInfo | undefined =
-    IMAGE_EDITOR_PAGE_MODEL_LIST.find(
-      (m) => m.label === selectedModel,
-    )?.modelInfo;
+    selectedModel?.modelInfo;
 
   // State for canvas dimensions
   const canvasWidth = useRef<number>(1024);
@@ -140,7 +144,6 @@ const PageEdit = () => {
     };
   }, [store]);
 
-
   const onFitPressed = useCallback(async () => {
     // Get the stage and its container dimensions
     const stage = stageRef.current;
@@ -188,7 +191,6 @@ const PageEdit = () => {
     // When baseImageBitmap changes from null to an actual image, call onFitPressed
     // Use a slight delay to ensure the image dimensions are properly loaded
     onFitPressed();
-
   }, [onFitPressed, store.baseImageBitmap]);
 
   // Create a function to use the left layer ref and download the bitmap from it
@@ -228,37 +230,63 @@ const PageEdit = () => {
     return new Uint8Array(arrayBuffer);
   };
 
-  const handleGenerate = useCallback(async (prompt: string) => {
-    if (isEnqueuing) {
-      console.warn("Already enqueuing an image, please wait.");
-      return;
-    }
+  const handleGenerate = useCallback(
+    async (prompt: string) => {
+      if (isEnqueuing) {
+        console.warn("Already enqueuing an image, please wait.");
+        return;
+      }
 
-    setIsEnqueuing(true);
+      setIsEnqueuing(true);
 
-    const editedImageToken = store.baseImageInfo?.mediaToken;
+      const editedImageToken = store.baseImageInfo?.mediaToken;
 
-    if (!editedImageToken) {
-      console.error("Base image is not available");
-      return;
-    }
+      if (!editedImageToken) {
+        console.error("Base image is not available");
+        return;
+      }
 
-    // TODO: Call inference API here
-    const arrayBuffer = await getMaskArrayBuffer();
+      // TODO: Call inference API here
+      const arrayBuffer = await getMaskArrayBuffer();
 
-    try {
-      await EnqueueImageInpaint({
-        model: selectedModelInfo,
-        image_media_token: editedImageToken,
-        mask_image_raw_bytes: arrayBuffer,
-        prompt: prompt,
-        image_count: generationCount,
-        frontend_caller: "image_editor",
-      });
-    } finally {
-      setIsEnqueuing(false);
-    }
-  }, [generationCount, isEnqueuing, selectedModelInfo, store.baseImageInfo?.mediaToken]);
+      try {
+        await EnqueueImageInpaint({
+          model: selectedModelInfo,
+          image_media_token: editedImageToken,
+          mask_image_raw_bytes: arrayBuffer,
+          prompt: prompt,
+          image_count: generationCount,
+          frontend_caller: "image_editor",
+        });
+      } finally {
+        setIsEnqueuing(false);
+      }
+    },
+    [
+      generationCount,
+      isEnqueuing,
+      selectedModelInfo,
+      store.baseImageInfo?.mediaToken,
+    ],
+  );
+
+  const modelConfig = lookupModelByTauriId(selectedModelInfo!.tauri_id);
+  const supportsMaskedInpainting = modelConfig?.tags?.includes(ModelTag.MaskedInpainting) ?? false;
+
+  if (!supportsMaskedInpainting && (store.activeTool !== "select" || store.lineNodes.length > 0)) {
+    // TODO: Implement a new mode for unsupported masking and hide the nodes layer instead of clearing
+    store.setActiveTool("select");
+    store.clearLineNodes();
+  }
+
+  /*
+    *
+    * Only component logic below this
+    *
+    *
+    *
+    *
+    */
 
   // Display image selector on launch, otherwise hide it
   // Also show loading state if info is set but image is loading
@@ -284,8 +312,9 @@ const PageEdit = () => {
   return (
     <>
       <div
-        className={`preserve-aspect-ratio fixed left-1/2 top-0 z-10 -translate-x-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
-          }`}
+        className={`preserve-aspect-ratio fixed left-1/2 top-0 z-10 -translate-x-1/2 transform ${
+          isSelecting ? "pointer-events-none" : "pointer-events-auto"
+        }`}
         style={{ display: store.activeTool === "edit" ? "block" : "none" }}
       >
         <DrawToolControlBar
@@ -296,21 +325,32 @@ const PageEdit = () => {
         />
       </div>
       <div
-        className={`preserve-aspect-ratio fixed right-4 top-1/2 z-10 -translate-y-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
-          }`}
+        className={`preserve-aspect-ratio fixed left-4 top-1/2 z-10 -translate-y-1/2 transform ${
+          isSelecting ? "pointer-events-none" : "pointer-events-auto"
+        }`}
+      >
+        <LeftResetStack onReset={() => store.RESET()} />
+      </div>
+      <div
+        className={`preserve-aspect-ratio fixed right-4 top-1/2 z-10 -translate-y-1/2 transform ${
+          isSelecting ? "pointer-events-none" : "pointer-events-auto"
+        }`}
       >
         <HistoryStack
-          onClear={() => { store.RESET(); }}
+          onClear={() => {
+            store.RESET();
+          }}
           startingBundles={[{ images: [store.baseImageInfo] } as ImageBundle]}
           onImageSelect={(baseImage) => {
             store.clearLineNodes();
-            store.setBaseImageInfo(baseImage)
+            store.setBaseImageInfo(baseImage);
           }}
         />
       </div>
       <div
-        className={`preserve-aspect-ratio fixed bottom-0 left-1/2 z-10 -translate-x-1/2 transform ${isSelecting ? "pointer-events-none" : "pointer-events-auto"
-          }`}
+        className={`preserve-aspect-ratio fixed bottom-0 left-1/2 z-10 -translate-x-1/2 transform ${
+          isSelecting ? "pointer-events-none" : "pointer-events-auto"
+        }`}
       >
         <PromptEditor
           modelInfo={selectedModelInfo}
@@ -323,6 +363,7 @@ const PageEdit = () => {
           isDisabled={isEnqueuing}
           generationCount={generationCount}
           onGenerationCountChange={setGenerationCount}
+          supportsMaskedInpainting={supportsMaskedInpainting}
         />
       </div>
       <div className="relative z-0">

frontend/apps/editor3d/app/src/pages/PageEdit/PromptEditor/PromptEditor.tsx

@@ -10,6 +10,7 @@ const PromptEditor: React.FC<PromptBoxEditProps> = ({
   modelInfo,
   generationCount,
   onGenerationCountChange,
+  supportsMaskedInpainting
 }) => {
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col space-y-2">
@@ -22,6 +23,7 @@ const PromptEditor: React.FC<PromptBoxEditProps> = ({
         modelInfo={modelInfo}
         generationCount={generationCount}
         onGenerationCountChange={onGenerationCountChange}
+        supportsMaskedInpainting={supportsMaskedInpainting}
       />
     </div>
   );

frontend/apps/editor3d/app/src/pages/PageEdit/stores/EditState.ts

@@ -810,7 +810,14 @@ export const useEditStore = create<EditState>((set, get, store) => ({
   },
 
   // Toolbar actions
-  setActiveTool: (tool: ActiveEditTool) => set({ activeTool: tool }),
+  setActiveTool: (tool: ActiveEditTool) => {
+    // Avoid triggering state change if the tool is same
+    if (tool === get().activeTool) {
+      return;
+    }
+
+    set({ activeTool: tool })
+  },
   setEditOperation: (mode: EditOperation) => set({ editOperation: mode }),
   setBrushColor: (color: string) => set({ brushColor: color }),
   setBrushSize: (size: number) => set({ brushSize: size }),

frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx

@@ -72,6 +72,7 @@ interface GalleryModalProps {
   ) => Promise<void>;
   isOpen?: boolean;
   forceFilter?: string;
+  onEditClicked?: (url: string, media_id?: string) => Promise<void> | void;
 }
 
 export const GalleryModal = React.memo(
@@ -86,6 +87,7 @@ export const GalleryModal = React.memo(
     onAddToSceneClicked,
     isOpen,
     forceFilter,
+    onEditClicked,
   }: GalleryModalProps) => {
     const [loading, setLoading] = useState(false);
     // Lightbox state is now handled via signals
@@ -658,6 +660,7 @@ export const GalleryModal = React.memo(
             onDownloadClicked={onDownloadClicked}
             onAddToSceneClicked={onAddToSceneClicked}
             mediaClass={lightboxImageSignal.value?.mediaClass}
+            onEditClicked={onEditClicked}
           />
         )}
       </>

frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx

@@ -1,7 +1,7 @@
 import { Modal } from "@storyteller/ui-modal";
 import { Button } from "@storyteller/ui-button";
 import dayjs from "dayjs";
-import { faDownToLine } from "@fortawesome/pro-solid-svg-icons";
+import { faDownToLine, faPencil } from "@fortawesome/pro-solid-svg-icons";
 import {
   EnqueueImageTo3dObject,
   EnqueueImageTo3dObjectModel,
@@ -40,6 +40,7 @@ interface LightboxModalProps {
   ) => Promise<void>;
   mediaClass?: string;
   onPromptCopy?: (prompt: string) => void;
+  onEditClicked?: (url: string, media_id?: string) => Promise<void> | void;
 }
 
 export function LightboxModal({
@@ -57,6 +58,7 @@ export function LightboxModal({
   onDownloadClicked,
   onAddToSceneClicked,
   mediaClass,
+  onEditClicked,
 }: LightboxModalProps) {
   // NB(bt,2025-06-14): We add ?cors=1 to the image url to prevent caching "sec-fetch-mode: no-cors" from
   // the <image> tag request from being cached. If we then drag it into the canvas after it's been cached,
@@ -402,6 +404,19 @@ export function LightboxModal({
                 3D
               </Button>
 
+              {onEditClicked && downloadUrl && (
+                <Button
+                  icon={faPencil}
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    gtagEvent("edit_image_clicked");
+                    await onEditClicked(downloadUrl, mediaId);
+                  }}
+                >
+                  Edit
+                </Button>
+              )}
+
               {onAddToSceneClicked && downloadUrl && (
                 <Button
                   onClick={async (e) => {

frontend/libs/components/model-selector/src/lib/model-selector.tsx

@@ -1,6 +1,6 @@
 import { PopoverMenu, type PopoverItem } from "@storyteller/ui-popover";
 import { useModelSelectorStore } from "./model-selector-store";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { ModelPage } from "./model-pages";
 
 interface ModelSelectorProps {
@@ -22,6 +22,14 @@ export function ModelSelector({
   const { selectedModels, setSelectedModel } = useModelSelectorStore();
   const selectedModel = selectedModels[page] || items[0]?.label;
 
+  // For the first mount, make sure the selected model is set for other components to listen
+  useEffect(() => {
+    // Initialize selected model if not set
+    if (!selectedModels[page] && items[0]) {
+      setSelectedModel(page, items[0].label);
+    }
+  }, []);
+
   const handleModelSelect = (item: PopoverItem) => {
     setSelectedModel(page, item.label);
   };

frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx

@@ -26,6 +26,7 @@ export interface PromptBoxEditProps {
   modelInfo?: ModelInfo;
   generationCount?: number;
   onGenerationCountChange?: (count: number) => void;
+  supportsMaskedInpainting?: boolean;
 }
 
 export const PromptBoxEdit = ({
@@ -37,6 +38,7 @@ export const PromptBoxEdit = ({
   modelInfo,
   generationCount: generationCountProp,
   onGenerationCountChange,
+  supportsMaskedInpainting = false,
 }: PromptBoxEditProps) => {
   const [prompt, setPrompt] = useState("");
   const [useSystemPrompt, setUseSystemPrompt] = useState(true);
@@ -180,17 +182,19 @@ export const PromptBoxEdit = ({
               onChange={handleChange}
               onPaste={handlePaste}
               onKeyDown={handleKeyDown}
-              onFocus={() => {}}
-              onBlur={() => {}}
+              onFocus={() => { }}
+              onBlur={() => { }}
             />
           </div>
           <div className="mt-2 flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <ButtonIconSelect
-                options={modes}
-                onOptionChange={onModeSelectionChange}
-                selectedOption={selectedMode}
-              />
+              {supportsMaskedInpainting && (
+                <ButtonIconSelect
+                  options={modes}
+                  onOptionChange={onModeSelectionChange}
+                  selectedOption={selectedMode}
+                />
+              )}
 
               <Tooltip
                 content={