copy client

all camera updates

- adding cameras
- switching cameras
- adjusting focal length for each
- save cameras to scene

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

@@ -27,18 +27,18 @@ export const TopBar = ({ pageName }: Props) => {
 
   return (
     <>
-      <header className="fixed left-0 top-0 z-30 w-full border-b border-ui-panel-border bg-ui-background">
+      <header className="fixed left-0 top-0 z-30 w-full border-b border-white/5 bg-ui-background">
         <nav
-          className="mx-auto grid h-[64px] w-screen grid-cols-3 items-center justify-between p-3"
+          className="mx-auto grid h-[56px] w-screen grid-cols-3 items-center justify-between px-3"
           aria-label="Global"
         >
           <div className="flex gap-4">
             <a href="/" className="">
-              <span className="sr-only">Storyteller.ai</span>
+              <span className="sr-only">ArtCraft</span>
               <img
-                className="h-[39px] w-auto pb-[3px]"
-                src="/resources/images/Storyteller-Logo-1.png"
-                alt="Logo StoryTeller.ai"
+                className="h-[30px] w-auto"
+                src="/resources/images/artcraft-logo-3.png"
+                alt="Logo ArtCraft"
               />
             </a>
             {!isEditorPath(currentLocation) && (

frontend/apps/editor3d/app/pages/PageEnigma/Editor/editor.ts

@@ -706,6 +706,18 @@ class Editor {
     const wasGridVisible = gridVisibility.value;
     gridVisibility.value = false;
 
+    // Store and hide transform controls
+    const wasControlVisible = this.control?.visible ?? false;
+    if (this.control) {
+      this.control.visible = false;
+    }
+
+    // Store and disable outline pass
+    const wasOutlineEnabled = this.outlinePass?.enabled ?? false;
+    if (this.outlinePass) {
+      this.outlinePass.enabled = false;
+    }
+
     // High quality dimensions for each aspect ratio
     let targetWidth: number;
     let targetHeight: number;
@@ -799,6 +811,16 @@ class Editor {
     // Restore grid visibility
     gridVisibility.value = wasGridVisible;
 
+    // Restore transform controls visibility
+    if (this.control) {
+      this.control.visible = wasControlVisible;
+    }
+
+    // Restore outline pass
+    if (this.outlinePass) {
+      this.outlinePass.enabled = wasOutlineEnabled;
+    }
+
     if (shouldDownload) {
       const link = document.createElement("a");
       link.download = "scene-snapshot.png";

frontend/apps/editor3d/app/pages/PageEnigma/Editor/free_cam.ts

@@ -70,7 +70,7 @@ class FreeCam extends EventDispatcher {
   }
 
   keydown(event: KeyboardEvent) {
-    if (event.altKey || !this.enabled) {
+    if (!this.enabled) {
       return;
     }
 

frontend/apps/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts

@@ -335,8 +335,19 @@ export class MouseControls {
       }
     }
 
+    // Prevent browser shortcuts for Alt combinations
+    if (
+      event.altKey &&
+      (event.key === "Alt" || event.key.toLowerCase() === "d")
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
     if (event.shiftKey) {
       this.cameraViewControls.movementSpeed = 4;
+    } else if (event.altKey) {
+      this.cameraViewControls.movementSpeed = 0.1;
     } else {
       this.cameraViewControls.movementSpeed = 1.15;
     }

frontend/apps/editor3d/app/pages/PageEnigma/PageEditor.tsx

@@ -52,11 +52,11 @@ export const PageEditor = () => {
     : pageWidth.value - 84;
   const height =
     dndTimelineHeight.value > -1
-      ? pageHeight.value - dndTimelineHeight.value - 64
-      : pageHeight.value - timelineHeight.value - 64;
+      ? pageHeight.value - dndTimelineHeight.value - 56
+      : pageHeight.value - timelineHeight.value - 56;
 
   const getScale = () => {
-    const height = pageHeight.value - timelineHeight.value - 64;
+    const height = pageHeight.value - timelineHeight.value - 56;
     const scaleHeight = height < 610 ? height / 610 : 1;
 
     if (

frontend/apps/editor3d/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -164,7 +164,7 @@ export const ControlPanelSceneObject = () => {
   };
 
   const getScale = () => {
-    const height = pageHeight.value - timelineHeight.value - 64;
+    const height = pageHeight.value - timelineHeight.value - 56;
     return height < 620 ? height / 620 : 1;
   };
 

frontend/apps/editor3d/app/pages/PageEnigma/comps/LibraryModal/LibraryModal.tsx

@@ -1,9 +1,15 @@
 import { TransitionDialogue } from "~/components/reusable/TransitionDialogue";
-import { faCheck, faXmark } from "@fortawesome/pro-solid-svg-icons";
+import { faCheck } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, LoadingSpinner, CloseButton } from "~/components";
 import { TabSelector } from "~/components/reusable/TabSelector";
-import { useState, useEffect, Fragment } from "react";
+import React, {
+  useState,
+  useEffect,
+  Fragment,
+  useCallback,
+  useMemo,
+} from "react";
 import { LibraryModalApi } from "./LibraryModalApi";
 import { FilterMediaClasses } from "../../../../enums";
 import { BucketConfig } from "../../../../api/BucketConfig";
@@ -38,323 +44,351 @@ interface LibraryModalProps {
   onTabChange: (tabId: string) => void;
 }
 
-export const LibraryModal = ({
-  isOpen,
-  onClose,
-  mode = "view",
-  selectedItemIds = [],
-  onSelectItem,
-  maxSelections = 4,
-  onUseSelected,
-  tabs,
-  activeTab,
-  onTabChange,
-}: LibraryModalProps) => {
-  const [groupedItems, setGroupedItems] = useState<GroupedItems>({});
-  const [loading, setLoading] = useState(false);
-  const [lightboxImage, setLightboxImage] = useState<LibraryItem | null>(null);
-  const [isLightboxVisible, setIsLightboxVisible] = useState(false);
-  const [failedImageUrls] = useState<Set<string>>(new Set());
-  const bucketConfig = new BucketConfig();
-  const api = new LibraryModalApi();
-
-  const formatDate = (date: string) => {
-    const d = new Date(date);
-    return d.toLocaleDateString("en-US", {
-      weekday: "short",
-      month: "short",
-      day: "numeric",
-    });
-  };
-
-  const groupItemsByDate = (items: LibraryItem[]) => {
-    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(),
-      ),
+export const LibraryModal = React.memo(
+  ({
+    isOpen,
+    onClose,
+    mode = "view",
+    selectedItemIds = [],
+    onSelectItem,
+    maxSelections = 4,
+    onUseSelected,
+    tabs,
+    activeTab,
+    onTabChange,
+  }: LibraryModalProps) => {
+    const [groupedItems, setGroupedItems] = useState<GroupedItems>({});
+    const [loading, setLoading] = useState(false);
+    const [lightboxImage, setLightboxImage] = useState<LibraryItem | null>(
+      null,
     );
-  };
+    const [isLightboxVisible, setIsLightboxVisible] = useState(false);
+    const [failedImageUrls] = useState<Set<string>>(new Set());
+    const bucketConfig = useMemo(() => new BucketConfig(), []);
+    const api = useMemo(() => new LibraryModalApi(), []);
 
-  const handleImageError = (url: string) => {
-    failedImageUrls.add(url);
-  };
+    const formatDate = useCallback((date: string) => {
+      const d = new Date(date);
+      return d.toLocaleDateString("en-US", {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+      });
+    }, []);
 
-  const getImageUrl = (path: string | undefined | null) => {
-    if (!path) return null;
-    const url = bucketConfig.getGcsUrl(path);
-    return failedImageUrls.has(url) ? null : url;
-  };
+    const groupItemsByDate = useCallback(
+      (items: LibraryItem[]) => {
+        const grouped = items.reduce((acc: GroupedItems, item) => {
+          const dateKey = formatDate(item.createdAt);
+          if (!acc[dateKey]) {
+            acc[dateKey] = [];
+          }
+          acc[dateKey].push(item);
+          return acc;
+        }, {});
 
-  useEffect(() => {
-    const loadItems = async () => {
-      setLoading(true);
-      try {
-        const response = await api.listUserMediaFiles({
-          filter_media_classes: [FilterMediaClasses.IMAGE],
-        });
-        if (response.success && response.data) {
-          const newItems = response.data.map((item) => ({
-            id: item.token,
-            label: item.maybe_title || "Untitled",
-            thumbnail: getImageUrl(
-              item.cover_image.maybe_cover_image_public_bucket_path ||
-                item.public_bucket_path,
-            ),
-            fullImage: getImageUrl(item.public_bucket_path),
-            createdAt: item.created_at,
-          }));
-          setGroupedItems(groupItemsByDate(newItems));
+        // 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 url = bucketConfig.getGcsUrl(path);
+        return failedImageUrls.has(url) ? null : url;
+      },
+      [bucketConfig, failedImageUrls],
+    );
+
+    useEffect(() => {
+      const loadItems = async () => {
+        setLoading(true);
+        try {
+          const response = await api.listUserMediaFiles({
+            filter_media_classes: [FilterMediaClasses.IMAGE],
+          });
+          if (response.success && response.data) {
+            const newItems = response.data.map((item) => ({
+              id: item.token,
+              label: item.maybe_title || "Untitled",
+              thumbnail: getImageUrl(
+                item.cover_image.maybe_cover_image_public_bucket_path ||
+                  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);
         }
-      } catch (error) {
-        console.error("Failed to fetch library items:", error);
+        setLoading(false);
+      };
+
+      if (isOpen) {
+        loadItems();
       }
-      setLoading(false);
-    };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeTab, isOpen]);
 
-    if (isOpen) {
-      loadItems();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, isOpen]);
+    // useEffect(() => {
+    //   console.log("LibraryModal render caused by:", {
+    //     isOpen,
+    //     activeTab,
+    //     selectedItemIds,
+    //   });
+    // }, [isOpen, activeTab, selectedItemIds]);
 
-  const handleItemClick = (item: LibraryItem) => {
-    if (mode === "select" && onSelectItem) {
-      onSelectItem(item.id);
-    } else {
-      setLightboxImage(item);
-      setIsLightboxVisible(true);
-    }
-  };
+    const handleItemClick = useCallback(
+      (item: LibraryItem) => {
+        if (mode === "select" && onSelectItem) {
+          onSelectItem(item.id);
+        } else {
+          setLightboxImage(item);
+          setIsLightboxVisible(true);
+        }
+      },
+      [mode, onSelectItem],
+    );
 
-  const handleCloseLightbox = () => {
-    setIsLightboxVisible(false);
-    // Wait for animation to complete before removing the image
-    setTimeout(() => setLightboxImage(null), 300);
-  };
+    const handleCloseLightbox = useCallback(() => {
+      setIsLightboxVisible(false);
+      // Wait for animation to complete before removing the image
+      setTimeout(() => setLightboxImage(null), 300);
+    }, []);
 
-  return (
-    <>
-      <TransitionDialogue
-        isOpen={isOpen}
-        onClose={onClose}
-        className={twMerge(
-          "h-[620px] max-w-4xl",
-          mode === "view" && "h-[80vh] max-h-[870px] max-w-7xl",
-        )}
-        childPadding={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" : "My 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>
+    const handleDeselectAll = useCallback(() => {
+      selectedItemIds.forEach((id) => onSelectItem?.(id));
+    }, [selectedItemIds, onSelectItem]);
 
-          <div className="flex-1 overflow-y-auto p-4">
-            {loading ? (
-              <div className="flex h-full items-center justify-center">
-                <div className="text-white/60">
-                  <LoadingSpinner className="h-12 w-12" />
+    const handleUseSelected = useCallback(() => {
+      const selectedItems = Object.values(groupedItems)
+        .flat()
+        .filter((item) => selectedItemIds.includes(item.id));
+      onUseSelected?.(selectedItems);
+    }, [groupedItems, selectedItemIds, onUseSelected]);
+
+    return (
+      <>
+        <TransitionDialogue
+          isOpen={isOpen}
+          onClose={onClose}
+          className={twMerge(
+            "h-[620px] max-w-4xl",
+            mode === "view" && "h-[80vh] max-h-[870px] max-w-7xl",
+          )}
+          childPadding={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" : "My 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 className="space-y-6">
-                {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-brand-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"
-                              />
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-4">
+              {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">
+                  {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-brand-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 inset-0 bg-white/30" />
+                                <div className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-brand-primary">
+                                  <FontAwesomeIcon
+                                    icon={faCheck}
+                                    className="text-sm"
+                                  />
+                                </div>
                               )}
-                          </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-brand-primary">
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-sm"
-                                />
-                              </div>
-                            )}
-                        </button>
-                      ))}
+                          </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>
+        </TransitionDialogue>
 
-          {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={() => {
-                      selectedItemIds.forEach((id) => onSelectItem?.(id));
-                    }}
-                    className="text-sm text-white/60 hover:text-white"
-                  >
-                    Deselect All
-                  </button>
-                )}
-              </div>
-              <Button
-                onClick={() => {
-                  const selectedItems = Object.values(groupedItems)
-                    .flat()
-                    .filter((item) => selectedItemIds.includes(item.id));
-                  onUseSelected?.(selectedItems);
-                }}
-                disabled={selectedItemIds.length === 0}
-              >
-                Use selected
-              </Button>
-            </div>
-          )}
-        </div>
-      </TransitionDialogue>
-
-      {/* Lightbox Modal */}
-      {lightboxImage &&
-        createPortal(
-          <Transition appear show={isLightboxVisible} as={Fragment}>
-            <div className="fixed inset-0 z-[100]">
-              <Transition.Child
-                as={Fragment}
-                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={handleCloseLightbox}
-                />
-              </Transition.Child>
-              <div
-                className="fixed inset-0 flex items-center justify-center p-4"
-                onClick={handleCloseLightbox}
-              >
+        {/* Lightbox Modal */}
+        {lightboxImage &&
+          createPortal(
+            <Transition appear show={isLightboxVisible} as={Fragment}>
+              <div className="fixed inset-0 z-[100]">
                 <Transition.Child
-                  as={Fragment}
                   enter="ease-out duration-300"
-                  enterFrom="opacity-0 scale-95"
-                  enterTo="opacity-100 scale-100"
+                  enterFrom="opacity-0"
+                  enterTo="opacity-100"
                   leave="ease-in duration-200"
-                  leaveFrom="opacity-100 scale-100"
-                  leaveTo="opacity-0 scale-95"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
                 >
                   <div
-                    className="relative h-[90vh] w-[80vw] rounded-xl bg-[#2C2C2C]"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <CloseButton
-                      onClick={handleCloseLightbox}
-                      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 bg-black/40">
-                        {!lightboxImage.fullImage ? (
-                          <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={lightboxImage.fullImage}
-                            alt={lightboxImage.label}
-                            className="h-full w-full object-contain"
-                            onError={() =>
-                              handleImageError(lightboxImage.fullImage!)
-                            }
-                            crossOrigin="anonymous"
-                            referrerPolicy="no-referrer"
-                          />
-                        )}
-                      </div>
-                      <div className="py-5">Prompt</div>
-                    </div>
-                  </div>
+                    className="fixed inset-0 cursor-pointer bg-black/60"
+                    onClick={handleCloseLightbox}
+                  />
                 </Transition.Child>
+                <div
+                  className="fixed inset-0 flex items-center justify-center p-4"
+                  onClick={handleCloseLightbox}
+                >
+                  <Transition.Child
+                    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={handleCloseLightbox}
+                        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 bg-black/40">
+                          {!lightboxImage.fullImage ? (
+                            <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={lightboxImage.fullImage}
+                              alt={lightboxImage.label}
+                              className="h-full w-full object-contain"
+                              onError={() =>
+                                handleImageError(lightboxImage.fullImage!)
+                              }
+                              crossOrigin="anonymous"
+                              referrerPolicy="no-referrer"
+                            />
+                          )}
+                        </div>
+                        <div className="py-5">Prompt</div>
+                      </div>
+                    </div>
+                  </Transition.Child>
+                </div>
               </div>
-            </div>
-          </Transition>,
-          document.body,
-        )}
-    </>
-  );
-};
+            </Transition>,
+            document.body,
+          )}
+      </>
+    );
+  },
+);
+
+LibraryModal.displayName = "LibraryModal";

frontend/apps/editor3d/app/pages/PageEnigma/comps/Outliner/Outliner.tsx

@@ -140,7 +140,7 @@ export const Outliner = () => {
 
   useEffect(() => {
     const updateEditorHeight = () => {
-      setEditorHeight(pageHeight.value - timelineHeight.value - 64);
+      setEditorHeight(pageHeight.value - timelineHeight.value - 56);
     };
 
     updateEditorHeight();

frontend/apps/editor3d/app/pages/PageEnigma/comps/PreviewFrameImage.tsx

@@ -27,7 +27,7 @@ export const PreviewFrameImage = () => {
               pageWidth.value -
               (sidePanelVisible.value ? sidePanelWidth.value : 0) -
               84,
-            height: pageHeight.value - timelineHeight.value - 64,
+            height: pageHeight.value - timelineHeight.value - 56,
           }}
         >
           <div className="relative flex h-full w-full flex-col items-center justify-center gap-5">
@@ -48,7 +48,7 @@ export const PreviewFrameImage = () => {
               pageWidth.value -
               (sidePanelVisible.value ? sidePanelWidth.value : 0) -
               84,
-            height: pageHeight.value - timelineHeight.value - 64,
+            height: pageHeight.value - timelineHeight.value - 56,
           }}
         />
       );

frontend/apps/editor3d/app/pages/PageEnigma/comps/SceneContainer/SceneContainer.tsx

@@ -11,7 +11,7 @@ export const SceneContainer = ({ children }: { children: React.ReactNode }) => {
 
   const containerWidth = pageWidth.value;
 
-  const containerHeight = pageHeight.value - timelineHeight.value - 64;
+  const containerHeight = pageHeight.value - timelineHeight.value - 56;
 
   const callbackRef = useCallback(
     (node: HTMLDivElement) => {

frontend/apps/editor3d/app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx

@@ -35,7 +35,7 @@ export const SidePanelMenu = ({
         sidePanelVisible.value ? "border-transparent" : "border-[#363636]",
       )}
       style={{
-        height: pageHeight.value - 64,
+        height: pageHeight.value - 56,
       }}
     >
       <div className="flex w-full flex-col gap-2">

frontend/apps/editor3d/app/styles/base.css

@@ -52,7 +52,7 @@ img {
 }
 
 .topbar-spacer {
-  height: 64px;
+  height: 56px;
   width: 100vw;
 }
 

frontend/apps/editor3d/netlify.toml

@@ -1,5 +1,5 @@
 [build]
-command = "./script/netlify_build.sh"
+#command = "./script/netlify_build.sh"
 #publish = "build/client"
 publish = "apps/editor3d/dist/"
 

frontend/apps/editor3d/script/netlify_build.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-set -euxo pipefail 
+#set -euxo pipefail 
 
 #   echo "Run build script"
 #   npm install
@@ -23,19 +23,74 @@ set -euxo pipefail
 #   # echo "List files after build"
 #   # find dist/
 
+#printf "==================================="
+#echo "List Env"
+#env
+
+printf "==================================="
 echo "Run build script (TODO: Make strict)"
 nx build editor3d
 
+printf "==================================="
+echo "Current dir (1)"
+pwd
+
+printf "==================================="
+echo "List directory files (1)"
+pwd
+ls -lA .
+
+printf "==================================="
+echo "List directory files (2)"
+#find / | grep build/server
+find / 2> /dev/null | grep build/server
+
+
+printf "==================================="
+echo "LIST DIRECTORY FILES (3)"
+#find / | grep build/server
+find / 2> /dev/null | grep EnvironmentVar
+find / 2> /dev/null | grep PageEnigma
+
+
+printf "==================================="
+echo "Find build manifest"
+find . | grep manifest.json
+
+printf "==================================="
 echo "Change to project dir"
 pushd apps/editor3d/
 
+printf "==================================="
+echo "Current dir (2)"
+pwd
+
+printf "==================================="
+echo "List directory files (4)"
+pwd
+ls -lA .
+
+printf "==================================="
+echo "List build directory files"
+ls -lA build/
+
+mkdir dist/
+
+printf "==================================="
+echo "Copy files"
+cp -r build/server/* dist/
+cp -r build/client/* dist/
+
 #echo "Copy netlify configs into dist"
-#cp _headers dist/
+cp _headers dist/
 #cp _redirects dist/
 
 #echo "Copy netlify 404.html page into dist"
 #cp "404.html" dist/
 
+
+printf "==================================="
 echo "List files after build"
 find dist/
 
+