removed background gallery to fix build issue

frontend/apps/editor2d/package.json

@@ -22,7 +22,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@devnomic/marquee": "^1.0.3",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/pro-regular-svg-icons": "^6.7.2",
@@ -52,8 +51,8 @@
     "@preact/signals-react-transform": "^0.4.0",
     "@tauri-apps/cli": "^2.4.0",
     "@types/deep-equal": "^1.0.4",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",

frontend/apps/editor2d/src/GenerationRootComponent/BackgroundGallery.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Marquee } from "@devnomic/marquee";
+// import { Marquee } from "@devnomic/marquee";
 import "@devnomic/marquee/dist/index.css";
 
 function getRandomImages(count: number) {
@@ -21,16 +21,18 @@ interface ImageColumnProps {
   duration?: number;
 }
 
-function ImageColumn({
-  images,
-  delay,
-  reverse = false,
-  duration = 100,
-  isLoaded,
-}: ImageColumnProps) {
+function ImageColumn(
+  {
+    // images,
+    // delay,
+    // reverse = false,
+    // duration = 100,
+    // isLoaded,
+  }: ImageColumnProps,
+) {
   return (
     <div className="flex h-screen flex-col gap-6">
-      <Marquee
+      {/* <Marquee
         fade={false}
         direction="up"
         reverse={reverse}
@@ -59,7 +61,7 @@ function ImageColumn({
             />
           </div>
         ))}
-      </Marquee>
+      </Marquee> */}
     </div>
   );
 }

frontend/apps/editor2d/src/GenerationRootComponent/GenerationRootComponent.tsx

@@ -4,7 +4,7 @@ import { Button, LoadingSpinner } from "~/components/ui";
 import { useRenderCounter } from "~/hooks/useRenderCounter";
 import { GenerationLoadingState, generationSignal } from "~/signals";
 import { useRef, useState } from "react";
-import BackgroundGallery from "./BackgroundGallery";
+// import BackgroundGallery from "./BackgroundGallery";
 import { twMerge } from "tailwind-merge";
 import { Transition } from "@headlessui/react";
 import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
@@ -138,7 +138,7 @@ export const GenerationRootComponent = ({
         </div>
       </div>
 
-      <Transition
+      {/* <Transition
         show={generationState.loadingState === GenerationLoadingState.INIT}
         enter="transition-opacity duration-700"
         enterFrom="opacity-0"
@@ -149,7 +149,7 @@ export const GenerationRootComponent = ({
         as="div"
       >
         <BackgroundGallery />
-      </Transition>
+      </Transition> */}
     </>
   );
 };

frontend/apps/editor2d/src/components/PromptBox.tsx

@@ -36,6 +36,7 @@ import { PopoverItem } from "~/components/reusable/Popover";
 import { Api, ApiManager } from "~/KonvaApp/Api";
 import { useJobContext } from "~/components/JobContext";
 import { IsDesktopApp } from "@storyteller/tauri-utils";
+import { GalleryItem, GalleryModal } from "@storyteller/ui-gallery-modal";
 
 interface ReferenceImage {
   id: string;
@@ -56,6 +57,11 @@ export const PromptBox = () => {
   const [prompt, setPrompt] = useState("");
   const [isEnqueueing, setisEnqueueing] = useState(false);
   const [useSystemPrompt, setUseSystemPrompt] = useState(true);
+  const [isGalleryModalOpen, setIsGalleryModalOpen] = useState(false);
+  const [selectedGalleryImages, setSelectedGalleryImages] = useState<string[]>(
+    [],
+  );
+  const [activeGalleryTab, setActiveGalleryTab] = useState("my-media");
   const [referenceImages, setReferenceImages] = useState<ReferenceImage[]>([]);
   const [uploadingImages, setUploadingImages] = useState<
     { id: string; file: File }[]
@@ -153,8 +159,40 @@ export const PromptBox = () => {
     fileInputRef.current?.click();
   };
 
-  const handleLibrarySelect = () => {
-    console.log("Opening library selector");
+  const handleGallerySelect = () => {
+    setIsGalleryModalOpen(true);
+  };
+
+  const handleGalleryClose = () => {
+    setIsGalleryModalOpen(false);
+    setSelectedGalleryImages([]);
+  };
+
+  const handleImageSelect = (id: string) => {
+    setSelectedGalleryImages((prev) => {
+      if (prev.includes(id)) {
+        return prev.filter((imageId) => imageId !== id);
+      }
+      if (prev.length >= 4) {
+        return prev;
+      }
+      return [...prev, id];
+    });
+  };
+
+  const handleGalleryImages = (selectedItems: GalleryItem[]) => {
+    selectedItems.forEach((item) => {
+      if (!item.fullImage) return;
+      const referenceImage: ReferenceImage = {
+        id: Math.random().toString(36).substring(7),
+        url: item.fullImage,
+        file: new File([], "library-image"),
+        mediaToken: item.id,
+      };
+      setReferenceImages((prev) => [...prev, referenceImage]);
+    });
+    setIsGalleryModalOpen(false);
+    setSelectedGalleryImages([]);
   };
 
   const handleAction = (action: string) => {
@@ -162,8 +200,8 @@ export const PromptBox = () => {
       case "upload":
         handleUploadClick();
         break;
-      case "library":
-        handleLibrarySelect();
+      case "gallery":
+        handleGallerySelect();
         break;
       default:
         console.log("Unknown action:", action);
@@ -292,7 +330,7 @@ export const PromptBox = () => {
       );
 
       const isDesktop = IsDesktopApp();
-      console.log('Is this a desktop app?', isDesktop);
+      console.log("Is this a desktop app?", isDesktop);
 
       if (isDesktop) {
         handleTauriEnqueue();
@@ -324,158 +362,176 @@ export const PromptBox = () => {
   };
 
   return (
-    <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col gap-3">
-      {(referenceImages.length > 0 || uploadingImages.length > 0) && (
-        <div className="flex w-full gap-2">
-          {referenceImages.map((image) => (
-            <div
-              key={image.id}
-              className="glass relative aspect-square w-20 rounded-lg"
-            >
-              <img
-                src={image.url}
-                alt="Reference"
-                className="h-full w-full rounded-lg object-cover"
-              />
-              <button
-                onClick={() => handleRemoveReference(image.id)}
-                className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-black/40 text-white backdrop-blur-md transition-colors hover:bg-black"
-              >
-                <FontAwesomeIcon icon={faTimes} className="h-2.5 w-2.5" />
-              </button>
-            </div>
-          ))}
-          {uploadingImages.map(({ id, file }) => {
-            const previewUrl = URL.createObjectURL(file);
-            return (
+    <>
+      <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col gap-3">
+        {(referenceImages.length > 0 || uploadingImages.length > 0) && (
+          <div className="flex w-full gap-2">
+            {referenceImages.map((image) => (
               <div
-                key={id}
-                className="glass relative aspect-square w-20 overflow-hidden rounded-lg"
+                key={image.id}
+                className="glass relative aspect-square w-20 rounded-lg"
               >
-                <div className="absolute inset-0">
-                  <img
-                    src={previewUrl}
-                    alt="Uploading preview"
-                    className="h-full w-full object-cover blur-sm"
-                  />
+                <img
+                  src={image.url}
+                  alt="Reference"
+                  className="h-full w-full rounded-lg object-cover"
+                />
+                <button
+                  onClick={() => handleRemoveReference(image.id)}
+                  className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-black/40 text-white backdrop-blur-md transition-colors hover:bg-black"
+                >
+                  <FontAwesomeIcon icon={faTimes} className="h-2.5 w-2.5" />
+                </button>
+              </div>
+            ))}
+            {uploadingImages.map(({ id, file }) => {
+              const previewUrl = URL.createObjectURL(file);
+              return (
+                <div
+                  key={id}
+                  className="glass relative aspect-square w-20 overflow-hidden rounded-lg"
+                >
+                  <div className="absolute inset-0">
+                    <img
+                      src={previewUrl}
+                      alt="Uploading preview"
+                      className="h-full w-full object-cover blur-sm"
+                    />
+                  </div>
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/20">
+                    <FontAwesomeIcon
+                      icon={faSpinnerThird}
+                      className="h-6 w-6 animate-spin text-white"
+                    />
+                  </div>
                 </div>
-                <div className="absolute inset-0 flex items-center justify-center bg-black/20">
+              );
+            })}
+          </div>
+        )}
+        <div className="glass w-[730px] rounded-xl p-4">
+          <input
+            type="file"
+            ref={fileInputRef}
+            className="hidden"
+            accept="image/*"
+            onChange={handleFileUpload}
+            multiple
+          />
+          <div className="flex justify-center gap-2">
+            <PopoverMenu
+              mode="button"
+              panelTitle="Add Image"
+              items={[
+                {
+                  label: "Upload from device",
+                  selected: false,
+                  icon: <FontAwesomeIcon icon={faUpload} className="h-4 w-4" />,
+                  action: "upload",
+                },
+                {
+                  label: "Choose from library",
+                  selected: false,
+                  icon: <FontAwesomeIcon icon={faImages} className="h-4 w-4" />,
+                  action: "gallery",
+                },
+              ]}
+              onPanelAction={handleAction}
+              showIconsInList
+              buttonClassName="backdrop-blur-none bg-transparent hover:bg-transparent py-1.5 px-0 pr-1 m-0 hover:opacity-50 transition-opacity duration-100 ring-0 border-none focus:ring-0 outline-none"
+              triggerIcon={
+                <FontAwesomeIcon icon={faPlus} className="text-xl" />
+              }
+            />
+
+            <textarea
+              ref={textareaRef}
+              rows={1}
+              placeholder="Describe your image..."
+              className="text-md mb-2 max-h-[5.5em] flex-1 resize-none overflow-y-auto rounded bg-transparent pb-2 pr-2 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none"
+              value={prompt}
+              onChange={handleChange}
+              onPaste={handlePaste}
+              onKeyDown={handleKeyDown}
+              onFocus={() => {}}
+              onBlur={() => {}}
+            />
+          </div>
+          <div className="mt-2 flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Tooltip
+                content="Aspect ratio"
+                position="top"
+                className="z-50"
+                closeOnClick={true}
+              >
+                <PopoverMenu
+                  items={aspectRatioList}
+                  onSelect={handleAspectRatioSelect}
+                  mode="toggle"
+                  panelTitle="Aspect Ratio"
+                  showIconsInList
+                  triggerIcon={
+                    <FontAwesomeIcon
+                      icon={getCurrentAspectRatioIcon()}
+                      className="h-4 w-4"
+                    />
+                  }
+                />
+              </Tooltip>
+              <Tooltip
+                content={
+                  useSystemPrompt
+                    ? "Use system prompt: ON"
+                    : "Use system prompt: OFF"
+                }
+                position="top"
+                className="z-50"
+                delay={200}
+              >
+                <ToggleButton
+                  isActive={useSystemPrompt}
+                  icon={faMessageXmark}
+                  activeIcon={faMessageCheck}
+                  onClick={() => setUseSystemPrompt(!useSystemPrompt)}
+                />
+              </Tooltip>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                className="flex items-center border-none bg-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+                icon={!isEnqueueing ? faSparkles : undefined}
+                onClick={handleEnqueue}
+                disabled={isEnqueueing || !prompt.trim()}
+              >
+                {isEnqueueing ? (
                   <FontAwesomeIcon
                     icon={faSpinnerThird}
-                    className="h-6 w-6 animate-spin text-white"
+                    className="animate-spin text-lg"
                   />
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-      <div className="glass w-[730px] rounded-xl p-4">
-        <input
-          type="file"
-          ref={fileInputRef}
-          className="hidden"
-          accept="image/*"
-          onChange={handleFileUpload}
-          multiple
-        />
-        <div className="flex justify-center gap-2">
-          <PopoverMenu
-            mode="button"
-            panelTitle="Add Image"
-            items={[
-              {
-                label: "Upload from device",
-                selected: false,
-                icon: <FontAwesomeIcon icon={faUpload} className="h-4 w-4" />,
-                action: "upload",
-              },
-              {
-                label: "Choose from library",
-                selected: false,
-                icon: <FontAwesomeIcon icon={faImages} className="h-4 w-4" />,
-                action: "library",
-                disabled: true,
-              },
-            ]}
-            onPanelAction={handleAction}
-            showIconsInList
-            buttonClassName="backdrop-blur-none bg-transparent hover:bg-transparent py-1.5 px-0 pr-1 m-0 hover:opacity-50 transition-opacity duration-100 ring-0 border-none focus:ring-0 outline-none"
-            triggerIcon={<FontAwesomeIcon icon={faPlus} className="text-xl" />}
-          />
-
-          <textarea
-            ref={textareaRef}
-            rows={1}
-            placeholder="Describe your image..."
-            className="text-md mb-2 max-h-[5.5em] flex-1 resize-none overflow-y-auto rounded bg-transparent pb-2 pr-2 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none"
-            value={prompt}
-            onChange={handleChange}
-            onPaste={handlePaste}
-            onKeyDown={handleKeyDown}
-            onFocus={() => {}}
-            onBlur={() => {}}
-          />
-        </div>
-        <div className="mt-2 flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
-            <Tooltip
-              content="Aspect ratio"
-              position="top"
-              className="z-50"
-              closeOnClick={true}
-            >
-              <PopoverMenu
-                items={aspectRatioList}
-                onSelect={handleAspectRatioSelect}
-                mode="toggle"
-                panelTitle="Aspect Ratio"
-                showIconsInList
-                triggerIcon={
-                  <FontAwesomeIcon
-                    icon={getCurrentAspectRatioIcon()}
-                    className="h-4 w-4"
-                  />
-                }
-              />
-            </Tooltip>
-            <Tooltip
-              content={
-                useSystemPrompt
-                  ? "Use system prompt: ON"
-                  : "Use system prompt: OFF"
-              }
-              position="top"
-              className="z-50"
-              delay={200}
-            >
-              <ToggleButton
-                isActive={useSystemPrompt}
-                icon={faMessageXmark}
-                activeIcon={faMessageCheck}
-                onClick={() => setUseSystemPrompt(!useSystemPrompt)}
-              />
-            </Tooltip>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              className="flex items-center border-none bg-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
-              icon={!isEnqueueing ? faSparkles : undefined}
-              onClick={handleEnqueue}
-              disabled={isEnqueueing || !prompt.trim()}
-            >
-              {isEnqueueing ? (
-                <FontAwesomeIcon
-                  icon={faSpinnerThird}
-                  className="animate-spin text-lg"
-                />
-              ) : (
-                "Generate"
-              )}
-            </Button>
+                ) : (
+                  "Generate"
+                )}
+              </Button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+      <GalleryModal
+        isOpen={isGalleryModalOpen}
+        onClose={handleGalleryClose}
+        mode="select"
+        selectedItemIds={selectedGalleryImages}
+        onSelectItem={handleImageSelect}
+        maxSelections={4}
+        onUseSelected={handleGalleryImages}
+        tabs={[
+          { id: "my-media", label: "My generations" },
+          { id: "uploads", label: "My uploads" },
+        ]}
+        activeTab={activeGalleryTab}
+        onTabChange={setActiveGalleryTab}
+      />
+    </>
   );
 };

frontend/apps/editor2d/src/components/features/ToolbarTopRight/index.tsx

@@ -1,15 +1,16 @@
-import { faGear } from "@fortawesome/pro-solid-svg-icons";
+import { faGear, faImages } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
 import { Activity } from "~/components/ui/Activity/Activity";
-// import { paperWrapperStyles } from "~/components/styles";
-// import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
-// import { ToolbarButton } from "~/components/features/ToolbarButton";
+import { GalleryModal } from "@storyteller/ui-gallery-modal";
 import { Button } from "@storyteller/ui-button";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { useState } from "react";
 
 export const ToolbarTopRight = () => {
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+  const [isGalleryModalOpen, setIsGalleryModalOpen] = useState(false);
+  const [activeGalleryTab, setActiveGalleryTab] = useState("my-media");
+
   return (
     <>
       <div
@@ -20,6 +21,13 @@ export const ToolbarTopRight = () => {
           className="h-[42px] w-[42px] bg-[#5F5F68]/60 backdrop-blur-lg hover:bg-[#5F5F68]/90"
           onClick={() => setIsSettingsModalOpen(true)}
         />
+        <Button
+          icon={faImages}
+          className="h-[42px] bg-[#5F5F68]/60 backdrop-blur-lg hover:bg-[#5F5F68]/90"
+          onClick={() => setIsGalleryModalOpen(true)}
+        >
+          My Gallery
+        </Button>
         <Activity />
       </div>
 
@@ -27,6 +35,18 @@ export const ToolbarTopRight = () => {
         isOpen={isSettingsModalOpen}
         onClose={() => setIsSettingsModalOpen(false)}
       />
+
+      <GalleryModal
+        isOpen={isGalleryModalOpen}
+        onClose={() => setIsGalleryModalOpen(false)}
+        mode="view"
+        tabs={[
+          { id: "my-media", label: "My generations" },
+          { id: "uploads", label: "My uploads" },
+        ]}
+        activeTab={activeGalleryTab}
+        onTabChange={setActiveGalleryTab}
+      />
     </>
   );
 };

frontend/apps/editor2d/tsconfig.app.json

@@ -34,6 +34,9 @@
     {
       "path": "../../libs/components/button/tsconfig.lib.json"
     },
+    {
+      "path": "../../libs/components/gallery-modal/tsconfig.lib.json"
+    },
     {
       "path": "../../libs/tauri-utils/tsconfig.lib.json"
     },

frontend/apps/editor2d/tsconfig.json

@@ -7,6 +7,9 @@
     {
       "path": "../../libs/components/button"
     },
+    {
+      "path": "../../libs/components/gallery-modal"
+    },
     {
       "path": "../../libs/tauri-utils"
     },

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

@@ -11,7 +11,7 @@ import { AuthButtons } from "./AuthButtons";
 import { SceneTitleInput } from "./SceneTitleInput";
 import { getCurrentLocationWithoutParams } from "~/utilities";
 import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity";
-import { LibraryModal } from "~/pages/PageEnigma/comps/LibraryModal/LibraryModal";
+import { GalleryModal } from "@storyteller/ui-gallery-modal";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { Tooltip } from "@storyteller/ui-tooltip";
 
@@ -106,13 +106,13 @@ export const TopBar = ({ pageName }: Props) => {
         onClose={() => setIsSettingsModalOpen(false)}
       />
 
-      <LibraryModal
+      <GalleryModal
         isOpen={isLibraryModalOpen}
         onClose={() => setIsLibraryModalOpen(false)}
         mode="view"
         tabs={[
-          { id: "my-media", label: "My media" },
-          { id: "uploads", label: "Uploads" },
+          { id: "my-media", label: "My generations" },
+          { id: "uploads", label: "My uploads" },
         ]}
         activeTab={activeLibraryTab}
         onTabChange={setActiveLibraryTab}

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PromptBox/PromptBox.tsx

@@ -38,8 +38,6 @@ import {
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-import { LibraryModal } from "../LibraryModal/LibraryModal";
-import type { LibraryItem } from "../LibraryModal/LibraryModal";
 import {
   cameras,
   selectedCameraId,
@@ -61,6 +59,7 @@ import { EngineApi } from "~/Classes/ApiManager/EngineApi";
 import { UploaderStates } from "~/enums/UploaderStates";
 import { CameraSettingsModal } from "../CameraSettingsModal";
 import { twMerge } from "tailwind-merge";
+import { GalleryModal, GalleryItem } from "@storyteller/ui-gallery-modal";
 
 export const PromptBox = () => {
   useSignals();
@@ -92,11 +91,11 @@ export const PromptBox = () => {
     },
   ]);
   const [isCameraSettingsOpen, setIsCameraSettingsOpen] = useState(false);
-  const [isLibraryModalOpen, setIsLibraryModalOpen] = useState(false);
-  const [selectedLibraryImages, setSelectedLibraryImages] = useState<string[]>(
+  const [isGalleryModalOpen, setIsGalleryModalOpen] = useState(false);
+  const [selectedGalleryImages, setSelectedGalleryImages] = useState<string[]>(
     [],
   );
-  const [activeLibraryTab, setActiveLibraryTab] = useState("my-media");
+  const [activeGalleryTab, setActiveGalleryTab] = useState("my-media");
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -359,17 +358,17 @@ export const PromptBox = () => {
     fileInputRef.current?.click();
   };
 
-  const handleLibrarySelect = () => {
-    setIsLibraryModalOpen(true);
+  const handleGallerySelect = () => {
+    setIsGalleryModalOpen(true);
   };
 
-  const handleLibraryClose = () => {
-    setIsLibraryModalOpen(false);
-    setSelectedLibraryImages([]);
+  const handleGalleryClose = () => {
+    setIsGalleryModalOpen(false);
+    setSelectedGalleryImages([]);
   };
 
   const handleImageSelect = (id: string) => {
-    setSelectedLibraryImages((prev) => {
+    setSelectedGalleryImages((prev) => {
       if (prev.includes(id)) {
         return prev.filter((imageId) => imageId !== id);
       }
@@ -380,19 +379,19 @@ export const PromptBox = () => {
     });
   };
 
-  const handleLibraryImages = (selectedItems: LibraryItem[]) => {
+  const handleGalleryImages = (selectedItems: GalleryItem[]) => {
     selectedItems.forEach((item) => {
       if (!item.fullImage) return;
       const referenceImage: ReferenceImage = {
         id: Math.random().toString(36).substring(7),
         url: item.fullImage,
-        file: new File([], "library-image"),
+        file: new File([], "gallery-image"),
         mediaToken: item.id,
       };
       setReferenceImages((prev) => [...prev, referenceImage]);
     });
-    setIsLibraryModalOpen(false);
-    setSelectedLibraryImages([]);
+    setIsGalleryModalOpen(false);
+    setSelectedGalleryImages([]);
   };
 
   const handleAction = (action: string) => {
@@ -400,8 +399,8 @@ export const PromptBox = () => {
       case "upload":
         handleUploadClick();
         break;
-      case "library":
-        handleLibrarySelect();
+      case "gallery":
+        handleGallerySelect();
         break;
       default:
         console.log("Unknown action:", action);
@@ -581,7 +580,7 @@ export const PromptBox = () => {
                   label: "Choose from library",
                   selected: false,
                   icon: <FontAwesomeIcon icon={faImages} className="h-4 w-4" />,
-                  action: "library",
+                  action: "gallery",
                 },
               ]}
               onPanelAction={handleAction}
@@ -762,20 +761,20 @@ export const PromptBox = () => {
           onDeleteCamera={deleteCamera}
         />
       </div>
-      <LibraryModal
-        isOpen={isLibraryModalOpen}
-        onClose={handleLibraryClose}
+      <GalleryModal
+        isOpen={isGalleryModalOpen}
+        onClose={handleGalleryClose}
         mode="select"
-        selectedItemIds={selectedLibraryImages}
+        selectedItemIds={selectedGalleryImages}
         onSelectItem={handleImageSelect}
         maxSelections={4}
-        onUseSelected={handleLibraryImages}
+        onUseSelected={handleGalleryImages}
         tabs={[
-          { id: "my-media", label: "My media" },
-          { id: "uploads", label: "Uploads" },
+          { id: "my-media", label: "My generations" },
+          { id: "uploads", label: "My uploads" },
         ]}
-        activeTab={activeLibraryTab}
-        onTabChange={setActiveLibraryTab}
+        activeTab={activeGalleryTab}
+        onTabChange={setActiveGalleryTab}
       />
     </>
   );

frontend/apps/editor3d/tsconfig.json

@@ -44,6 +44,9 @@
     },
     {
       "path": "../../libs/components/settings-modal"
+    },
+    {
+      "path": "../../libs/components/gallery-modal"
     }
   ]
 }

frontend/libs/api/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./lib/enums/index.js";
 export * from "./lib/AnalyticsApi.js";
 export * from "./lib/BillingApi.js";
 export * from "./lib/CommentsApi.js";
@@ -14,3 +15,5 @@ export * from "./lib/UserBookmarksApi.js";
 export * from "./lib/UsersApi.js";
 export * from "./lib/VideoApi.js";
 export * from "./lib/WeightsApi.js";
+export * from "./lib/GetCdnOrigin.js";
+export * from "./lib/GalleryModalApi.js";

frontend/libs/api/src/lib/GalleryModalApi.ts

@@ -0,0 +1,33 @@
+import { MediaFilesApi } from "./MediaFilesApi.js";
+import {
+  FilterMediaClasses,
+  FilterMediaType,
+  FilterEngineCategories,
+} from "./enums/QueryFilters.js";
+
+interface ListUserMediaQuery {
+  username: string;
+  filter_media_classes?: FilterMediaClasses[];
+  filter_media_type?: FilterMediaType[];
+  filter_engine_categories?: FilterEngineCategories[];
+  user_uploads_only?: boolean;
+  include_user_uploads?: boolean;
+}
+
+export class GalleryModalApi extends MediaFilesApi {
+  constructor() {
+    super();
+  }
+
+  public async listUserMediaFiles(query: ListUserMediaQuery) {
+    return await this.ListUserMediaFiles({
+      ...query,
+      filter_media_classes: query.filter_media_classes,
+      filter_media_type: query.filter_media_type,
+      filter_engine_categories: query.filter_engine_categories,
+      username: query.username,
+      user_uploads_only: query.user_uploads_only,
+      include_user_uploads: query.include_user_uploads,
+    });
+  }
+}

frontend/libs/api/src/lib/GetCdnOrigin.ts

@@ -0,0 +1,45 @@
+// import { GetFrontendEnvironment } from "~/Classes/GetFrontendEnvironment";
+
+/**
+ * Return the CDN origin (scheme + host + optional port, but no path)
+ * See: https://web.dev/articles/url-parts
+ *
+ * TODO(bt,2025-02-10): Make this easier to configure in development
+ */
+// class CdnHostHelper {
+//   private static instance: CdnHostHelper;
+//   private readonly origin: string;
+
+//   public static getInstance(): CdnHostHelper {
+//     if (CdnHostHelper.instance !== undefined) {
+//       return CdnHostHelper.instance;
+//     }
+
+//     const isLocalDev = GetFrontendEnvironment().getIsLocalDev();
+
+//     let origin;
+//     if (isLocalDev) {
+//       //origin = 'https://pub-c8a4a5bdbdb048f286b77bdf9f786ff2.r2.dev';
+//       origin = "https://cdn-2.fakeyou.com";
+//     } else {
+//       origin = "https://cdn-2.fakeyou.com";
+//     }
+//     const instance = new CdnHostHelper(origin);
+//     CdnHostHelper.instance = instance;
+//     return instance;
+//   }
+
+//   public getOrigin(): string {
+//     return this.origin;
+//   }
+
+//   private constructor(origin: string) {
+//     this.origin = origin;
+//   }
+// }
+
+// TODO(bt,2025-02-10): Consolidate all of this logic.
+export function GetCdnOrigin(): string {
+  //   return CdnHostHelper.getInstance().getOrigin();
+  return "https://cdn-2.fakeyou.com";
+}

frontend/libs/api/src/lib/MediaFilesApi.ts

@@ -27,6 +27,8 @@ interface ListUserMediaQuery {
   filter_media_classes?: FilterMediaClasses[];
   filter_media_type?: FilterMediaType[];
   filter_engine_categories?: FilterEngineCategories[];
+  user_uploads_only?: boolean;
+  include_user_uploads?: boolean;
 }
 
 interface SearchFeaturedMediaQuery {
@@ -115,7 +117,7 @@ export class MediaFilesApi extends ApiManager {
   }
 
   public async ListMediaFiles(
-    query: ListMediaQuery,
+    query: ListMediaQuery
   ): Promise<ApiResponse<MediaFile[], PaginationInfinite>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/list`;
     const queryWithStrings = {
@@ -149,7 +151,7 @@ export class MediaFilesApi extends ApiManager {
   }
 
   public async ListFeaturedMediaFiles(
-    query: ListMediaQuery,
+    query: ListMediaQuery
   ): Promise<ApiResponse<MediaFile[], PaginationInfinite>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/list_featured`;
     const queryWithStrings = {
@@ -183,13 +185,13 @@ export class MediaFilesApi extends ApiManager {
   }
 
   public async ListUserMediaFiles(
-    query: ListUserMediaQuery,
+    query: ListUserMediaQuery
   ): Promise<ApiResponse<MediaFile[], Pagination>> {
     const userName = query.username;
     const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/list/user/${userName}`;
     const queryWithStrings = {
       ...query,
-      include_user_uploads: true,
+      include_user_uploads: query.include_user_uploads,
       filter_media_classes: query.filter_media_classes
         ? query.filter_media_classes.join(",")
         : undefined,
@@ -205,11 +207,17 @@ export class MediaFilesApi extends ApiManager {
       results: MediaFile[];
       pagination?: Pagination;
     }>({ endpoint, query: queryWithStrings })
-      .then((response) => ({
-        success: response.success,
-        data: response.results ?? [],
-        pagination: response.pagination,
-      }))
+      .then((response) => {
+        let results = response.results ?? [];
+        if (query.user_uploads_only) {
+          results = results.filter((file) => file.origin_category === "upload");
+        }
+        return {
+          success: response.success,
+          data: results,
+          pagination: response.pagination,
+        };
+      })
       .catch((err) => {
         return {
           success: false,
@@ -219,7 +227,7 @@ export class MediaFilesApi extends ApiManager {
   }
 
   public async SearchFeaturedMediaFiles(
-    query: SearchFeaturedMediaQuery,
+    query: SearchFeaturedMediaQuery
   ): Promise<ApiResponse<MediaFile[], Pagination>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/search_featured`;
     const queryWithStrings = {
@@ -251,7 +259,7 @@ export class MediaFilesApi extends ApiManager {
   }
 
   public async SearchUserMediaFiles(
-    query: SearchFeaturedMediaQuery,
+    query: SearchFeaturedMediaQuery
   ): Promise<ApiResponse<MediaFile[], Pagination>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/search_session`;
     const queryWithStrings = {

frontend/libs/api/src/lib/enums/index.ts

@@ -0,0 +1 @@
+export * from "./QueryFilters.js";

frontend/libs/api/tsconfig.lib.json

@@ -2,6 +2,9 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
+    "paths": {
+      "lib/*": ["./src/lib/*"]
+    },
     "rootDir": "src",
     "outDir": "dist",
     "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",

frontend/libs/components/gallery-modal/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

frontend/libs/components/gallery-modal/README.md

@@ -0,0 +1,7 @@
+# @storyteller/ui-gallery-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-gallery-modal` to execute the unit tests via [Vitest](https://vitest.dev/).

frontend/libs/components/gallery-modal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-gallery-modal",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}

frontend/libs/components/gallery-modal/src/index.ts

@@ -0,0 +1,2 @@
+
+export * from './lib/gallery-modal';

frontend/libs/components/gallery-modal/src/lib/gallery-modal.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

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

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import GalleryModal from './gallery-modal';
+
+describe('GalleryModal', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<GalleryModal />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});

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

@@ -0,0 +1,352 @@
+import { Modal } from "@storyteller/ui-modal";
+import { LightboxModal } from "@storyteller/ui-lightbox-modal";
+import { TabSelector } from "@storyteller/ui-tab-selector";
+import { faCheck } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button } from "@storyteller/ui-button";
+import { CloseButton } from "@storyteller/ui-close-button";
+import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  GetCdnOrigin,
+  FilterMediaClasses,
+  GalleryModalApi,
+  UsersApi,
+} from "@storyteller/api";
+import { twMerge } from "tailwind-merge";
+
+export interface GalleryItem {
+  id: string;
+  label: string;
+  thumbnail: string | null;
+  fullImage?: string | null;
+  createdAt: string;
+}
+
+interface GroupedItems {
+  [date: string]: GalleryItem[];
+}
+
+type ModalMode = "select" | "view";
+
+interface GalleryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  mode: ModalMode;
+  selectedItemIds?: string[];
+  onSelectItem?: (id: string) => void;
+  maxSelections?: number;
+  onUseSelected?: (selectedItems: GalleryItem[]) => void;
+  tabs: { id: string; label: string }[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
+
+export const GalleryModal = React.memo(
+  ({
+    isOpen,
+    onClose,
+    mode = "view",
+    selectedItemIds = [],
+    onSelectItem,
+    maxSelections = 4,
+    onUseSelected,
+    tabs,
+    activeTab,
+    onTabChange,
+  }: GalleryModalProps) => {
+    const [groupedItems, setGroupedItems] = useState<GroupedItems>({});
+    const [loading, setLoading] = useState(false);
+    const [lightboxImage, setLightboxImage] = useState<GalleryItem | null>(
+      null
+    );
+    const [isLightboxVisible, setIsLightboxVisible] = useState(false);
+    const [failedImageUrls] = useState<Set<string>>(new Set());
+    const [username, setUsername] = useState<string>("");
+    const cdnOrigin = GetCdnOrigin();
+    const imageUrl = lightboxImage?.fullImage || "";
+    const api = useMemo(() => new GalleryModalApi(), []);
+    const usersApi = useMemo(() => new UsersApi(), []);
+
+    const formatDate = useCallback((date: string) => {
+      const d = new Date(date);
+      return d.toLocaleDateString("en-US", {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+      });
+    }, []);
+
+    const groupItemsByDate = useCallback(
+      (items: GalleryItem[]) => {
+        const grouped = items.reduce((acc: GroupedItems, item) => {
+          const dateKey = formatDate(item.createdAt);
+          if (!acc[dateKey]) {
+            acc[dateKey] = [];
+          }
+          acc[dateKey].push(item);
+          return acc;
+        }, {});
+
+        // Sort dates in descending order
+        return Object.fromEntries(
+          Object.entries(grouped).sort(
+            (a, b) =>
+              new Date(b[1][0].createdAt).getTime() -
+              new Date(a[1][0].createdAt).getTime()
+          )
+        );
+      },
+      [formatDate]
+    );
+
+    const handleImageError = useCallback(
+      (url: string) => {
+        failedImageUrls.add(url);
+      },
+      [failedImageUrls]
+    );
+
+    const getImageUrl = useCallback(
+      (path: string | undefined | null) => {
+        if (!path) return null;
+        const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+        const url = `${cdnOrigin}${normalizedPath}`;
+        return failedImageUrls.has(url) ? null : url;
+      },
+      [cdnOrigin, failedImageUrls]
+    );
+
+    useEffect(() => {
+      const getUsername = async () => {
+        const session = await usersApi.GetSession();
+        if (session.success && session.data?.user) {
+          setUsername(session.data.user.username);
+        }
+      };
+      getUsername();
+    }, [usersApi]);
+
+    useEffect(() => {
+      const loadItems = async () => {
+        if (!username) return;
+        setLoading(true);
+        try {
+          const response = await api.listUserMediaFiles({
+            filter_media_classes: [FilterMediaClasses.IMAGE],
+            username: username,
+            include_user_uploads: activeTab === "uploads",
+            user_uploads_only: activeTab === "uploads",
+          });
+          if (response.success && response.data) {
+            const newItems = response.data.map((item: any) => ({
+              id: item.token,
+              label: item.maybe_title || "Image Generation",
+              thumbnail: getImageUrl(item.public_bucket_path),
+              fullImage: getImageUrl(item.public_bucket_path),
+              createdAt: item.created_at,
+            }));
+            setGroupedItems(groupItemsByDate(newItems));
+          }
+        } catch (error) {
+          console.error("Failed to fetch library items:", error);
+        }
+        setLoading(false);
+      };
+
+      if (isOpen) {
+        loadItems();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeTab, isOpen, username]);
+
+    // useEffect(() => {
+    //   console.log("LibraryModal render caused by:", {
+    //     isOpen,
+    //     activeTab,
+    //     selectedItemIds,
+    //   });
+    // }, [isOpen, activeTab, selectedItemIds]);
+
+    const handleItemClick = useCallback(
+      (item: GalleryItem) => {
+        if (mode === "select" && onSelectItem) {
+          onSelectItem(item.id);
+        } else {
+          setLightboxImage(item);
+          setIsLightboxVisible(true);
+        }
+      },
+      [mode, onSelectItem]
+    );
+
+    const handleCloseLightbox = useCallback(() => {
+      setIsLightboxVisible(false);
+      // Wait for animation to complete before removing the image
+      setTimeout(() => setLightboxImage(null), 300);
+    }, []);
+
+    const handleDeselectAll = useCallback(() => {
+      selectedItemIds.forEach((id: any) => onSelectItem?.(id));
+    }, [selectedItemIds, onSelectItem]);
+
+    const handleUseSelected = useCallback(() => {
+      const selectedItems = Object.values(groupedItems)
+        .flat()
+        .filter((item) => selectedItemIds.includes(item.id));
+      onUseSelected?.(selectedItems);
+    }, [groupedItems, selectedItemIds, onUseSelected]);
+
+    return (
+      <>
+        <Modal
+          isOpen={isOpen}
+          onClose={onClose}
+          className={twMerge(
+            "h-[620px] max-w-4xl",
+            mode === "view" && "h-[80vh] max-h-[870px] max-w-7xl"
+          )}
+          childPadding={false}
+          showClose={false}
+        >
+          <div className="flex h-full flex-col">
+            <div className="border-b border-white/10 p-4 py-3">
+              <div className="grid grid-cols-3 items-center">
+                <h2 className="text-xl font-semibold">
+                  {mode === "select" ? "Select Images" : "Gallery"}
+                </h2>
+                <div className="flex items-center justify-center">
+                  <TabSelector
+                    tabs={tabs}
+                    activeTab={activeTab}
+                    onTabChange={onTabChange}
+                    className="w-auto"
+                  />
+                </div>
+                <div className="flex justify-end">
+                  <CloseButton onClick={onClose} />
+                </div>
+              </div>
+            </div>
+
+            <div className="flex-1 overflow-y-auto">
+              {loading ? (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-white/60">
+                    <LoadingSpinner className="h-12 w-12" />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-6 p-4">
+                  {Object.entries(groupedItems).map(([date, dateItems]) => (
+                    <div key={date}>
+                      <h3 className="text-md mb-2 font-medium text-white/60">
+                        {date}
+                      </h3>
+                      <div
+                        className={twMerge(
+                          "grid grid-cols-5 gap-1",
+                          mode === "view" && "grid-cols-5"
+                        )}
+                      >
+                        {dateItems.map((item) => (
+                          <button
+                            key={item.id}
+                            className={twMerge(
+                              "group relative aspect-square overflow-hidden rounded-md border-[3px] transition-all",
+                              mode === "select" &&
+                                selectedItemIds.includes(item.id)
+                                ? "border-primary"
+                                : "border-transparent hover:border-white"
+                            )}
+                            onClick={() => handleItemClick(item)}
+                          >
+                            <div className="relative h-full w-full">
+                              {!item.thumbnail ? (
+                                <div className="flex h-full w-full items-center justify-center bg-gray-800">
+                                  <span className="text-white/60">
+                                    Image not available
+                                  </span>
+                                </div>
+                              ) : (
+                                <img
+                                  src={item.thumbnail}
+                                  alt={item.label}
+                                  className="h-full w-full object-cover"
+                                  onError={() =>
+                                    handleImageError(item.thumbnail!)
+                                  }
+                                  crossOrigin="anonymous"
+                                  referrerPolicy="no-referrer"
+                                />
+                              )}
+                              {mode === "select" &&
+                                selectedItemIds.includes(item.id) && (
+                                  <div className="absolute inset-0 bg-white/30" />
+                                )}
+                            </div>
+                            {mode === "select" &&
+                              selectedItemIds.includes(item.id) && (
+                                <div className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary">
+                                  <FontAwesomeIcon
+                                    icon={faCheck}
+                                    className="text-sm"
+                                  />
+                                </div>
+                              )}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {mode === "select" && (
+              <div className="flex items-center justify-between border-t border-white/10 bg-black/25 p-4">
+                <div className="flex items-center gap-3">
+                  <div className="text-sm font-semibold text-white/80">
+                    {selectedItemIds.length}/{maxSelections} selected
+                  </div>
+                  {selectedItemIds.length > 0 && (
+                    <span className="text-white/10">|</span>
+                  )}
+                  {selectedItemIds.length > 0 && (
+                    <button
+                      onClick={handleDeselectAll}
+                      className="text-sm text-white/60 hover:text-white"
+                    >
+                      Deselect All
+                    </button>
+                  )}
+                </div>
+                <Button
+                  onClick={handleUseSelected}
+                  disabled={selectedItemIds.length === 0}
+                >
+                  Use selected
+                </Button>
+              </div>
+            )}
+          </div>
+        </Modal>
+
+        <LightboxModal
+          isOpen={isLightboxVisible}
+          onClose={handleCloseLightbox}
+          imageUrl={imageUrl}
+          imageAlt={lightboxImage?.label || ""}
+          onImageError={() => imageUrl && handleImageError(imageUrl)}
+          title={lightboxImage?.label}
+          createdAt={lightboxImage?.createdAt}
+          downloadUrl={imageUrl}
+        />
+      </>
+    );
+  }
+);
+
+GalleryModal.displayName = "GalleryModal";
+
+export default GalleryModal;

frontend/libs/components/gallery-modal/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../../api"
+    },
+    {
+      "path": "../loading-spinner"
+    },
+    {
+      "path": "../close-button"
+    },
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../tab-selector"
+    },
+    {
+      "path": "../lightbox-modal"
+    },
+    {
+      "path": "../modal"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

frontend/libs/components/gallery-modal/tsconfig.lib.json

@@ -0,0 +1,68 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../../api/tsconfig.lib.json"
+    },
+    {
+      "path": "../loading-spinner/tsconfig.lib.json"
+    },
+    {
+      "path": "../close-button/tsconfig.lib.json"
+    },
+    {
+      "path": "../button/tsconfig.lib.json"
+    },
+    {
+      "path": "../tab-selector/tsconfig.lib.json"
+    },
+    {
+      "path": "../lightbox-modal/tsconfig.lib.json"
+    },
+    {
+      "path": "../modal/tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/gallery-modal/tsconfig.spec.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/gallery-modal/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/gallery-modal',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-gallery-modal',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));

frontend/libs/components/lightbox-modal/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

frontend/libs/components/lightbox-modal/README.md

@@ -0,0 +1,7 @@
+# @storyteller/ui-lightbox-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-lightbox-modal` to execute the unit tests via [Vitest](https://vitest.dev/).

frontend/libs/components/lightbox-modal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-lightbox-modal",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}

frontend/libs/components/lightbox-modal/src/index.ts

@@ -0,0 +1,2 @@
+
+export * from './lib/lightbox-modal';

frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

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

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import LightboxModal from './lightbox-modal';
+
+describe('LightboxModal', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<LightboxModal />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});

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

@@ -0,0 +1,125 @@
+import { CloseButton } from "@storyteller/ui-close-button";
+import { Button } from "@storyteller/ui-button";
+import { Transition, TransitionChild } from "@headlessui/react";
+import { createPortal } from "react-dom";
+import dayjs from "dayjs";
+import { faDownToLine } from "@fortawesome/pro-solid-svg-icons";
+
+interface LightboxModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  imageUrl?: string | null;
+  imageAlt?: string;
+  onImageError?: () => void;
+  title?: string;
+  createdAt?: string;
+  additionalInfo?: React.ReactNode;
+  downloadUrl?: string;
+}
+
+export function LightboxModal({
+  isOpen,
+  onClose,
+  imageUrl,
+  imageAlt = "",
+  onImageError,
+  title,
+  createdAt,
+  additionalInfo,
+  downloadUrl,
+}: LightboxModalProps) {
+  return createPortal(
+    <Transition appear show={isOpen}>
+      <div className="fixed inset-0 z-[100]">
+        <TransitionChild
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div
+            className="fixed inset-0 cursor-pointer bg-black/60"
+            onClick={onClose}
+          />
+        </TransitionChild>
+        <div
+          className="fixed inset-0 flex items-center justify-center p-4"
+          onClick={onClose}
+        >
+          <TransitionChild
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <div
+              className="relative h-[90vh] w-[80vw] rounded-xl bg-[#2C2C2C]"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <CloseButton
+                onClick={onClose}
+                className="absolute right-4 top-4 z-10"
+              />
+              <div className="grid h-full grid-cols-3 gap-6">
+                <div className="col-span-2 flex h-full items-center justify-center overflow-hidden rounded-l-xl bg-black/40">
+                  {!imageUrl ? (
+                    <div className="flex h-full w-full items-center justify-center bg-gray-800">
+                      <span className="text-white/60">Image not available</span>
+                    </div>
+                  ) : (
+                    <img
+                      src={imageUrl}
+                      alt={imageAlt}
+                      className="h-full w-full object-contain"
+                      onError={onImageError}
+                      crossOrigin="anonymous"
+                      referrerPolicy="no-referrer"
+                    />
+                  )}
+                </div>
+                <div className="flex h-full flex-col py-5 pe-5">
+                  <div className="flex-1 space-y-4">
+                    <div className="text-xl font-medium">
+                      {title || "Image Generation"}
+                    </div>
+                    {createdAt && (
+                      <div className="text-sm text-white/60">
+                        Created:{" "}
+                        {dayjs(createdAt).format("MMM D, YYYY HH:mm:ss")}
+                      </div>
+                    )}
+                    {additionalInfo}
+                  </div>
+                  {downloadUrl && (
+                    <div className="flex justify-end">
+                      <a
+                        href={downloadUrl}
+                        download
+                        onClick={(e) => e.stopPropagation()}
+                        className="no-underline"
+                      >
+                        <Button
+                          icon={faDownToLine}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          Download
+                        </Button>
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Transition>,
+    document.body
+  );
+}
+
+export default LightboxModal;

frontend/libs/components/lightbox-modal/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../close-button"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

frontend/libs/components/lightbox-modal/tsconfig.lib.json

@@ -0,0 +1,53 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../button/tsconfig.lib.json"
+    },
+    {
+      "path": "../close-button/tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/lightbox-modal/tsconfig.spec.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/lightbox-modal/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/lightbox-modal',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-lightbox-modal',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));

frontend/libs/components/loading-spinner/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

frontend/libs/components/loading-spinner/README.md

@@ -0,0 +1,7 @@
+# @storyteller/ui-loading-spinner
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-loading-spinner` to execute the unit tests via [Vitest](https://vitest.dev/).

frontend/libs/components/loading-spinner/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-loading-spinner",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}

frontend/libs/components/loading-spinner/src/index.ts

@@ -0,0 +1,2 @@
+
+export * from './lib/loading-spinner';

frontend/libs/components/loading-spinner/src/lib/loading-spinner.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

frontend/libs/components/loading-spinner/src/lib/loading-spinner.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import LoadingSpinner from './loading-spinner';
+
+describe('LoadingSpinner', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<LoadingSpinner />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});

frontend/libs/components/loading-spinner/src/lib/loading-spinner.tsx

@@ -0,0 +1,36 @@
+import { twMerge } from "tailwind-merge";
+
+interface LoadingSpinnerProps {
+  className?: string;
+  thickness?: number;
+}
+
+export const LoadingSpinner = ({
+  className,
+  thickness = 4,
+}: LoadingSpinnerProps) => {
+  return (
+    <svg
+      className={twMerge("h-6 w-6 animate-spin", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth={thickness}
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+};
+
+export default LoadingSpinner;

frontend/libs/components/loading-spinner/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

frontend/libs/components/loading-spinner/tsconfig.lib.json

@@ -0,0 +1,45 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

frontend/libs/components/loading-spinner/tsconfig.spec.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/loading-spinner/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/loading-spinner',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-loading-spinner',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));

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

@@ -64,7 +64,7 @@ export const Modal = ({
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-[70]" onClose={onClose}>
         <DialogBackdrop className={backdropClassName} />
-        <div className="fixed inset-0 overflow-y-auto">
+        <div className="fixed inset-0">
           <div className="flex min-h-full items-center justify-center p-4 text-center">
             <TransitionChild
               as="div"
@@ -83,7 +83,7 @@ export const Modal = ({
               )}
             >
               <DialogPanel
-                className="w-full relative"
+                className="w-full h-full"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();

frontend/libs/components/tab-selector/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

frontend/libs/components/tab-selector/README.md

@@ -0,0 +1,7 @@
+# @storyteller/ui-tab-selector
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-tab-selector` to execute the unit tests via [Vitest](https://vitest.dev/).

frontend/libs/components/tab-selector/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-tab-selector",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}

frontend/libs/components/tab-selector/src/index.ts

@@ -0,0 +1,2 @@
+
+export * from './lib/tab-selector';

frontend/libs/components/tab-selector/src/lib/tab-selector.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

frontend/libs/components/tab-selector/src/lib/tab-selector.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import TabSelector from './tab-selector';
+
+describe('TabSelector', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<TabSelector />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});

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

@@ -0,0 +1,115 @@
+import React, { useRef, useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { Tooltip } from "@storyteller/ui-tooltip";
+import { TabGroup, TabList, Tab } from "@headlessui/react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+interface TabSelectorProps {
+  tabs: TabItem[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+  disabled?: boolean;
+  disabledMessage?: string;
+}
+
+export const TabSelector: React.FC<TabSelectorProps> = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  className,
+  disabled,
+  disabledMessage,
+}) => {
+  // Find the index of the active tab
+  const selectedIndex = tabs.findIndex((tab) => tab.id === activeTab);
+  const tabsRef = useRef<(HTMLElement | null)[]>([]);
+  const [indicatorStyle, setIndicatorStyle] = useState({
+    left: 0,
+    width: 0,
+  });
+
+  // Handle tab change
+  const handleTabChange = (index: number) => {
+    onTabChange(tabs[index].id);
+  };
+
+  // Update the indicator position when the selected tab changes
+  useEffect(() => {
+    if (selectedIndex >= 0 && tabsRef.current[selectedIndex]) {
+      const currentTab = tabsRef.current[selectedIndex];
+      if (currentTab) {
+        setIndicatorStyle({
+          left: (currentTab as HTMLDivElement).offsetLeft,
+          width: (currentTab as HTMLDivElement).offsetWidth,
+        });
+      }
+    }
+  }, [selectedIndex, tabs]);
+
+  const TabGroupElement = (
+    <div
+      className={twMerge(
+        "w-full",
+        className,
+        disabled ? "cursor-not-allowed opacity-60" : ""
+      )}
+    >
+      <TabGroup selectedIndex={selectedIndex} onChange={handleTabChange}>
+        <TabList className="glass glass-no-hover relative inline-flex min-w-fit overflow-x-auto rounded-lg p-0.5 py-1 !shadow-none">
+          {/* Animated indicator */}
+          <div
+            className="absolute top-1 z-10 h-[calc(100%-8px)] rounded-md bg-primary/30 transition-all duration-200 ease-in-out"
+            style={{
+              left: indicatorStyle.left,
+              width: indicatorStyle.width,
+            }}
+          />
+
+          {tabs.map((tab, index) => (
+            <Tab
+              key={tab.id}
+              ref={(el) => {
+                if (el) {
+                  tabsRef.current[index] = el;
+                }
+              }}
+              disabled={disabled}
+              className={({ selected }) =>
+                twMerge(
+                  "relative z-20 mx-0.5 min-w-max rounded-md border-2 border-transparent px-4 py-0.5 text-center text-sm font-semibold transition-all duration-200 ease-in-out",
+                  selected ? "text-white" : "text-gray-300 hover:text-white",
+                  disabled ? "cursor-not-allowed opacity-60" : ""
+                )
+              }
+            >
+              {tab.label}
+            </Tab>
+          ))}
+        </TabList>
+      </TabGroup>
+    </div>
+  );
+
+  return (
+    <>
+      {disabled && (
+        <Tooltip
+          content={
+            disabledMessage ?? "Cannot change tab. Generation in progress."
+          }
+          position="bottom"
+        >
+          {TabGroupElement}
+        </Tooltip>
+      )}
+      {!disabled && TabGroupElement}
+    </>
+  );
+};
+
+export default TabSelector;

frontend/libs/components/tab-selector/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../tooltip"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

frontend/libs/components/tab-selector/tsconfig.lib.json

@@ -0,0 +1,50 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../tooltip/tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/tab-selector/tsconfig.spec.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/tab-selector/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/tab-selector',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-tab-selector',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));

frontend/package-lock.json

@@ -82,7 +82,6 @@
     "apps/editor2d": {
       "version": "0.0.0",
       "dependencies": {
-        "@devnomic/marquee": "^1.0.3",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
         "@fortawesome/free-brands-svg-icons": "^6.7.2",
         "@fortawesome/pro-regular-svg-icons": "^6.7.2",
@@ -112,8 +111,8 @@
         "@preact/signals-react-transform": "^0.4.0",
         "@tauri-apps/cli": "^2.4.0",
         "@types/deep-equal": "^1.0.4",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
         "@types/uuid": "^10.0.0",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.20",
@@ -136,22 +135,6 @@
         "vite-tsconfig-paths": "^5.0.1"
       }
     },
-    "apps/editor2d/node_modules/@devnomic/marquee": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@devnomic/marquee/-/marquee-1.0.3.tgz",
-      "integrity": "sha512-q8QUtNO8ff+UvfrKJsHBtxh4fbOfhGk6SSdK0Uu/XZFdEzrmiGJ/l0FuVHRYsPAmzgnhVVnz1dGNB5CWGLMVvw==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.1.0",
-        "tailwind-merge": "^2.2.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^18.2.47",
-        "@types/react-dom": "^18.2.18",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
     "apps/editor2d/node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -607,25 +590,6 @@
         "react": "^16.14.0 || 17.x || 18.x || 19.x"
       }
     },
-    "apps/editor2d/node_modules/@types/react": {
-      "version": "18.3.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
-      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "apps/editor2d/node_modules/@types/react-dom": {
-      "version": "18.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
-      "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^18.0.0"
-      }
-    },
     "apps/editor2d/node_modules/@types/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
@@ -699,15 +663,6 @@
         "concat-map": "0.0.1"
       }
     },
-    "apps/editor2d/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "apps/editor2d/node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2235,6 +2190,10 @@
       "name": "@storyteller/ui-demo-modal",
       "version": "0.0.1"
     },
+    "libs/components/gallery-modal": {
+      "name": "@storyteller/ui-gallery-modal",
+      "version": "0.0.1"
+    },
     "libs/components/input": {
       "name": "@storyteller/ui-input",
       "version": "0.0.1"
@@ -2243,6 +2202,14 @@
       "name": "@storyteller/ui-label",
       "version": "0.0.1"
     },
+    "libs/components/lightbox-modal": {
+      "name": "@storyteller/ui-lightbox-modal",
+      "version": "0.0.1"
+    },
+    "libs/components/loading-spinner": {
+      "name": "@storyteller/ui-loading-spinner",
+      "version": "0.0.1"
+    },
     "libs/components/modal": {
       "name": "@storyteller/ui-modal",
       "version": "0.0.1"
@@ -2255,6 +2222,10 @@
       "name": "@storyteller/ui-settings-modal",
       "version": "0.0.1"
     },
+    "libs/components/tab-selector": {
+      "name": "@storyteller/ui-tab-selector",
+      "version": "0.0.1"
+    },
     "libs/components/toaster": {
       "name": "@storyteller/ui-toaster",
       "version": "0.0.1"
@@ -10297,6 +10268,10 @@
       "resolved": "libs/components/demo-modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-gallery-modal": {
+      "resolved": "libs/components/gallery-modal",
+      "link": true
+    },
     "node_modules/@storyteller/ui-input": {
       "resolved": "libs/components/input",
       "link": true
@@ -10305,6 +10280,14 @@
       "resolved": "libs/components/label",
       "link": true
     },
+    "node_modules/@storyteller/ui-lightbox-modal": {
+      "resolved": "libs/components/lightbox-modal",
+      "link": true
+    },
+    "node_modules/@storyteller/ui-loading-spinner": {
+      "resolved": "libs/components/loading-spinner",
+      "link": true
+    },
     "node_modules/@storyteller/ui-modal": {
       "resolved": "libs/components/modal",
       "link": true
@@ -10317,6 +10300,10 @@
       "resolved": "libs/components/settings-modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-tab-selector": {
+      "resolved": "libs/components/tab-selector",
+      "link": true
+    },
     "node_modules/@storyteller/ui-toaster": {
       "resolved": "libs/components/toaster",
       "link": true

frontend/tsconfig.base.json

@@ -5,9 +5,7 @@
     "emitDeclarationOnly": true,
     "importHelpers": true,
     "isolatedModules": true,
-    "lib": [
-      "es2022"
-    ],
+    "lib": ["es2022", "dom"],
     "module": "esnext",
     "moduleResolution": "bundler",
     "noEmitOnError": true,
@@ -18,14 +16,10 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "es2022",
-    "customConditions": [
-      "development"
-    ],
+    "customConditions": ["development"],
     "baseUrl": ".",
     "paths": {
-      "@frontend/login": [
-        "libs/login/src/index.ts"
-      ]
+      "@frontend/login": ["libs/login/src/index.ts"]
     }
   }
 }

frontend/tsconfig.json

@@ -50,6 +50,18 @@
     },
     {
       "path": "./apps/artcraft-website"
+    },
+    {
+      "path": "./libs/components/gallery-modal"
+    },
+    {
+      "path": "./libs/components/lightbox-modal"
+    },
+    {
+      "path": "./libs/components/tab-selector"
+    },
+    {
+      "path": "./libs/components/loading-spinner"
     }
   ]
 }