PageEnigma -> PageScene: rename to match the route param and the page title

The directory was named after a stale codename. The route is
/$sceneToken, the top bar reads "Edit Scene", and the page is the main
scene-editing workspace. Renaming the directory, top-level component,
and Zustand store accordingly:

- pages/PageEnigma/ -> pages/PageScene/
- pages/PageScene/PageEnigma.tsx -> PageScene.tsx
- pages/PageScene/PageEnigmaStore.ts -> PageSceneStore.ts
- usePageEnigmaStore -> usePageSceneStore (function rename across the
  whole codebase via sed)
- All ~/pages/PageEnigma/* import paths -> ~/pages/PageScene/*
- Component name PageEnigma -> PageScene in routes/_index.tsx and
  routes/$sceneToken.tsx

234 files touched, all mechanical. Typecheck error count holds at 144;
zero new errors introduced by the rename.

frontend/apps/artcraft/app/src/Classes/ApiManager/BetaKeysApi.ts

@@ -1,6 +1,6 @@
 import { ApiManager, ApiResponse } from "./ApiManager";
 import { BetaKey } from "~/models";
-import { Pagination } from "~/pages/PageEnigma/models";
+import { Pagination } from "~/pages/PageScene/models";
 
 export class BetaKeysApi extends ApiManager {
   public CreateBetaKey({

frontend/apps/artcraft/app/src/Classes/ApiManager/MediaFilesApi.ts

@@ -3,7 +3,7 @@ import {
   MediaInfo,
   Pagination,
   PaginationInfinite,
-} from "~/pages/PageEnigma/models";
+} from "~/pages/PageScene/models";
 import { ApiManager, ApiResponse } from "./ApiManager";
 import { authentication } from "~/signals";
 import type { Property } from "csstype";

frontend/apps/artcraft/app/src/Classes/ApiManager/PromptsApi.ts

@@ -1,5 +1,5 @@
 import { ApiManager, ApiResponse } from "./ApiManager";
-import { Prompts } from "~/pages/PageEnigma/models";
+import { Prompts } from "~/pages/PageScene/models";
 
 export class PromptsApi extends ApiManager {
   public GetPromptsByToken({

frontend/apps/artcraft/app/src/Classes/ApiManager/TtsApi.ts

@@ -1,5 +1,5 @@
 import { ApiManager, ApiResponse } from "./ApiManager";
-import { GenerateTtsAudioErrorType } from "~/pages/PageEnigma/enums";
+import { GenerateTtsAudioErrorType } from "~/pages/PageScene/enums";
 import { Visibility } from "~/enums";
 
 export interface GenerateTtsAudioRequest {

frontend/apps/artcraft/app/src/Classes/ApiManager/UserBookmarksApi.ts

@@ -4,7 +4,7 @@ import {
   UserBookmarkBatch,
   UserBookmarkByEntity,
   UserBookmarkByUser,
-} from "~/pages/PageEnigma/models";
+} from "~/pages/PageScene/models";
 import { authentication } from "~/signals";
 
 export enum ScopedEntityTypes {

frontend/apps/artcraft/app/src/Classes/ApiManager/VoiceDesignerApi.ts

@@ -1,5 +1,5 @@
 import { ApiManager, ApiResponse } from "./ApiManager";
-import { Pagination } from "~/pages/PageEnigma/models";
+import { Pagination } from "~/pages/PageScene/models";
 import { authentication } from "~/signals";
 import { ZsDataset } from "~/models/Dataset";
 

frontend/apps/artcraft/app/src/Classes/ApiManager/WeightsApi.ts

@@ -1,7 +1,7 @@
 import { ApiManager, ApiResponse } from "./ApiManager";
 import { authentication } from "~/signals";
 import { Weight } from "~/models";
-import { Pagination, PaginationInfinite } from "~/pages/PageEnigma/models";
+import { Pagination, PaginationInfinite } from "~/pages/PageScene/models";
 import {
   FilterEngineCategories,
   FilterMediaClasses,

frontend/apps/artcraft/app/src/components/experiences/ImageTo3DExperience.tsx

@@ -25,11 +25,11 @@ import {
 import { toast } from "react-hot-toast";
 import { v4 as uuidv4 } from "uuid";
 import { useTabStore } from "../../pages/Stores/TabState";
-import { addObject } from "../../pages/PageEnigma/actions";
-import { getActiveEditor } from "../../pages/PageEnigma/contexts/EngineContext";
-import { set3DPageMounted } from "../../pages/PageEnigma/Editor/editor";
+import { addObject } from "../../pages/PageScene/actions";
+import { getActiveEditor } from "../../pages/PageScene/contexts/EngineContext";
+import { set3DPageMounted } from "../../pages/PageScene/Editor/editor";
 import { AssetType } from "~/enums";
-import type { MediaItem } from "../../pages/PageEnigma/models";
+import type { MediaItem } from "../../pages/PageScene/models";
 import { SPLAT_MODELS } from "@storyteller/model-list";
 import {
   ClassyModelSelector,

frontend/apps/artcraft/app/src/components/signaled/ErrorDialog.tsx

@@ -3,11 +3,11 @@ import { useShallow } from "zustand/shallow";
 
 import { Modal } from "@storyteller/ui-modal";
 import { Button } from "@storyteller/ui-button";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 
 export function ErrorDialog() {
   const { showErrorDialog, errorDialogTitle, errorDialogMessage, setShowErrorDialog } =
-    usePageEnigmaStore(
+    usePageSceneStore(
       useShallow((s) => ({
         showErrorDialog: s.showErrorDialog,
         errorDialogTitle: s.errorDialogTitle,

frontend/apps/artcraft/app/src/components/signaled/TopBar/MyMoviesButton.tsx

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { faFilm } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "@storyteller/ui-button";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 
 import { activeWorkflowJobs } from "~/signals";
 
@@ -18,7 +18,7 @@ export const MyMoviesButton = () => {
       <Button
         variant="action"
         onClick={() => {
-          const store = usePageEnigmaStore.getState();
+          const store = usePageSceneStore.getState();
           store.setGenerateMovieId("");
           store.setViewMyMovies(true);
         }}

frontend/apps/artcraft/app/src/components/signaled/TopBar/SceneTitleInput.tsx

@@ -4,7 +4,7 @@ import { useSignals } from "@preact/signals-react/runtime";
 import { faPencil, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { scene, signalScene, authentication } from "~/signals";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 import { Input } from "@storyteller/ui-input";
 import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
 import { getCreatorIcon, ModelCreator } from "@storyteller/model-list";
@@ -32,7 +32,7 @@ export const SceneTitleInput = ({ pageName }: Props) => {
   };
 
   const handleShowErrorDialog = (errorMessage: string) => {
-    usePageEnigmaStore.getState().setErrorDialog("Error", errorMessage);
+    usePageSceneStore.getState().setErrorDialog("Error", errorMessage);
   };
 
   const handleChangeSceneTitle = (e: React.ChangeEvent<HTMLInputElement>) => {

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

@@ -65,7 +65,7 @@ import {
   is3DEditorInitialized,
   is3DSceneLoaded,
   set3DPageMounted,
-} from "~/pages/PageEnigma/Editor/editor";
+} from "~/pages/PageScene/Editor/editor";
 import { useImageTo3DStore } from "~/pages/PageImageTo3DObject/ImageTo3DStore";
 import { useImageTo3DWorldStore } from "~/pages/PageImageTo3DWorld/ImageTo3DWorldStore";
 import { useRemoveBackgroundStore } from "~/pages/PageRemoveBackground/RemoveBackgroundStore";

frontend/apps/artcraft/app/src/config/appMenu.tsx

@@ -17,7 +17,7 @@ import {
   useStoryboardPageEnabled,
 } from "@storyteller/ui-settings-modal";
 import { useTabStore, TabId } from "~/pages/Stores/TabState";
-import { set3DPageMounted } from "~/pages/PageEnigma/Editor/editor";
+import { set3DPageMounted } from "~/pages/PageScene/Editor/editor";
 
 export type AppId =
   | "IMAGE"

frontend/apps/artcraft/app/src/index.tsx

@@ -1,7 +1,7 @@
 import { StrictMode, useEffect } from "react";
 import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 import { BrowserRouter } from "react-router-dom";
-import { PageEnigma } from "./pages/PageEnigma/PageEnigma";
+import { PageScene } from "./pages/PageScene/PageScene";
 import { GlobalFileDropHandler } from "./components/GlobalFileDropHandler/GlobalFileDropHandler";
 import { createRoot } from "react-dom/client";
 import "./styles/normalize.css";
@@ -94,7 +94,7 @@ createRoot(document.getElementById("root")!).render(
       <BrowserRouter>
         <GlobalSettingsManager env={ENV} />
         <div className="topbar-spacer" data-tauri-drag-region={true} />
-        <PageEnigma />
+        <PageScene />
         <GlobalFileDropHandler />
       </BrowserRouter>
     </StrictMode>

frontend/apps/artcraft/app/src/pages/PageEnigma/index.tsx

@@ -1 +0,0 @@
-export { PageEnigma } from "./PageEnigma";

frontend/apps/artcraft/app/src/pages/PageMoodboard/cardLayout.ts

@@ -0,0 +1,37 @@
+import { CardNode, MoodboardNode } from "./types";
+
+export const DEFAULT_CARD_WIDTH = 280;
+export const DEFAULT_CARD_PADDING = 8;
+export const DEFAULT_CARD_COLOR = "#FFFFFF";
+
+// Height of one child when laid out inside a card: child's native aspect
+// ratio applied to (cardWidth - 2*padding), falling back to the child's own
+// height when aspect isn't available (text nodes, nested containers).
+export const childRenderedHeight = (
+  child: MoodboardNode,
+  innerWidth: number,
+): number => {
+  if (child.kind === "image" || child.kind === "video") {
+    const ratio =
+      child.naturalH > 0 && child.naturalW > 0
+        ? child.naturalH / child.naturalW
+        : child.height / Math.max(child.width, 1);
+    return innerWidth * ratio;
+  }
+  if (child.kind === "text") return child.height;
+  return child.height;
+};
+
+export const computeCardHeight = (
+  card: CardNode,
+  nodes: Record<string, MoodboardNode>,
+): number => {
+  const innerW = Math.max(card.width - card.padding * 2, 1);
+  let total = card.padding;
+  for (const cid of card.childIds) {
+    const c = nodes[cid];
+    if (!c) continue;
+    total += childRenderedHeight(c, innerW) + card.padding;
+  }
+  return Math.max(total, card.padding * 2);
+};

frontend/apps/artcraft/app/src/pages/PageMoodboardHtml/MoodboardHtmlColorPicker.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useRef, useState } from "react";
+import { HexColorPicker, RgbColorPicker } from "react-colorful";
+import { useShallow } from "zustand/react/shallow";
+import { useMoodboardStore } from "../PageMoodboard/MoodboardStore";
+
+const PRESETS = [
+  "#FFFFFF",
+  "#F5F5F0",
+  "#FFF8E1",
+  "#E3F2FD",
+  "#E8F5E9",
+  "#FCE4EC",
+  "#F3E5F5",
+  "#ECEFF1",
+  "#1F2937",
+];
+
+type Mode = "hex" | "rgb";
+
+const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const n = parseInt(full || "0", 16);
+  return {
+    r: (n >> 16) & 255,
+    g: (n >> 8) & 255,
+    b: n & 255,
+  };
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
+  const h = (clamp(r) << 16) | (clamp(g) << 8) | clamp(b);
+  return `#${h.toString(16).padStart(6, "0").toUpperCase()}`;
+};
+
+// Floating color-picker toolbar, pinned to the bottom-left of the moodboard.
+// Renders only when the selection contains exactly one card. Offers a row of
+// preset swatches, the current color, and a toggleable advanced picker
+// (hex / RGB).
+export const MoodboardHtmlColorPicker = () => {
+  const { selectedIds, nodes } = useMoodboardStore(
+    useShallow((s) => ({ selectedIds: s.selectedIds, nodes: s.nodes })),
+  );
+  const setCardColor = useMoodboardStore((s) => s.setCardColor);
+  const [expanded, setExpanded] = useState(false);
+  const [mode, setMode] = useState<Mode>("hex");
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  const ids = Array.from(selectedIds);
+  const only = ids.length === 1 ? nodes[ids[0]] : null;
+  const card = only && only.kind === "card" ? only : null;
+
+  // Collapse the advanced picker whenever the selection changes to a
+  // different card — keeps the UI from lingering open unexpectedly.
+  useEffect(() => {
+    setExpanded(false);
+  }, [card?.id]);
+
+  // Outside-click closes the advanced picker. The preset row stays visible
+  // regardless since it lives in the always-mounted toolbar.
+  useEffect(() => {
+    if (!expanded) return undefined;
+    const handler = (e: MouseEvent) => {
+      const el = rootRef.current;
+      if (!el) return;
+      if (e.target instanceof Node && el.contains(e.target)) return;
+      setExpanded(false);
+    };
+    window.addEventListener("mousedown", handler);
+    return () => window.removeEventListener("mousedown", handler);
+  }, [expanded]);
+
+  if (!card) return null;
+
+  const current = card.backgroundColor;
+  const rgb = hexToRgb(current);
+
+  return (
+    <div
+      ref={rootRef}
+      // Stop stage pointerdowns from clearing selection when the user
+      // interacts with the picker panel itself.
+      onPointerDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      style={{
+        position: "absolute",
+        left: 16,
+        bottom: 16,
+        zIndex: 20,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 10,
+        borderRadius: 10,
+        background: "rgba(24,24,27,0.92)",
+        boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
+        color: "#e5e7eb",
+        fontSize: 12,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <span style={{ opacity: 0.7 }}>Card color</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+        {PRESETS.map((c) => (
+          <button
+            key={c}
+            type="button"
+            aria-label={`Set color ${c}`}
+            onClick={() => setCardColor(card.id, c)}
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: "50%",
+              background: c,
+              border:
+                c.toLowerCase() === current.toLowerCase()
+                  ? "2px solid #3b82f6"
+                  : "1px solid rgba(255,255,255,0.25)",
+              cursor: "pointer",
+              padding: 0,
+            }}
+          />
+        ))}
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          aria-label="Custom color"
+          style={{
+            width: 22,
+            height: 22,
+            borderRadius: "50%",
+            background:
+              "conic-gradient(#f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f472b6, #f87171)",
+            border: "1px solid rgba(255,255,255,0.35)",
+            cursor: "pointer",
+            padding: 0,
+          }}
+        />
+      </div>
+      {expanded && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+            paddingTop: 6,
+          }}
+        >
+          <div style={{ display: "flex", gap: 4 }}>
+            <ModeTab label="HEX" active={mode === "hex"} onClick={() => setMode("hex")} />
+            <ModeTab label="RGB" active={mode === "rgb"} onClick={() => setMode("rgb")} />
+          </div>
+          {mode === "hex" ? (
+            <>
+              <HexColorPicker
+                color={current}
+                onChange={(c) => setCardColor(card.id, c.toUpperCase())}
+                style={{ width: 180, height: 140 }}
+              />
+              <input
+                type="text"
+                value={current}
+                onChange={(e) => {
+                  const v = e.target.value.trim();
+                  if (/^#?[0-9a-fA-F]{6}$/.test(v)) {
+                    setCardColor(card.id, v.startsWith("#") ? v.toUpperCase() : `#${v.toUpperCase()}`);
+                  }
+                }}
+                style={{
+                  width: "100%",
+                  background: "rgba(255,255,255,0.08)",
+                  color: "#fff",
+                  border: "1px solid rgba(255,255,255,0.15)",
+                  borderRadius: 4,
+                  padding: "4px 6px",
+                  fontFamily: "monospace",
+                }}
+              />
+            </>
+          ) : (
+            <>
+              <RgbColorPicker
+                color={rgb}
+                onChange={(c) => setCardColor(card.id, rgbToHex(c.r, c.g, c.b))}
+                style={{ width: 180, height: 140 }}
+              />
+              <div style={{ display: "flex", gap: 4 }}>
+                {(["r", "g", "b"] as const).map((key) => (
+                  <input
+                    key={key}
+                    type="number"
+                    min={0}
+                    max={255}
+                    value={rgb[key]}
+                    onChange={(e) => {
+                      const n = Math.max(0, Math.min(255, Number(e.target.value) || 0));
+                      const next = { ...rgb, [key]: n };
+                      setCardColor(card.id, rgbToHex(next.r, next.g, next.b));
+                    }}
+                    style={{
+                      flex: 1,
+                      background: "rgba(255,255,255,0.08)",
+                      color: "#fff",
+                      border: "1px solid rgba(255,255,255,0.15)",
+                      borderRadius: 4,
+                      padding: "4px 6px",
+                      fontFamily: "monospace",
+                    }}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface ModeTabProps {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+const ModeTab = ({ label, active, onClick }: ModeTabProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    style={{
+      flex: 1,
+      padding: "4px 8px",
+      borderRadius: 4,
+      fontSize: 11,
+      cursor: "pointer",
+      background: active ? "rgba(59,130,246,0.35)" : "rgba(255,255,255,0.06)",
+      border: active
+        ? "1px solid #3b82f6"
+        : "1px solid rgba(255,255,255,0.1)",
+      color: "#fff",
+    }}
+  >
+    {label}
+  </button>
+);

frontend/apps/artcraft/app/src/pages/PageMoodboardHtml/interactions/findDropTarget.ts

@@ -0,0 +1,79 @@
+import { useMoodboardStore } from "../../PageMoodboard/MoodboardStore";
+import { worldPointFromClient } from "./htmlStagePointer";
+
+// Returns the id of the top-level node under the given client-space point, or
+// null if the point is over bare canvas. Skips the dragged node, groups, and
+// any nodes inside groups/cards.
+//
+// Used by node drag handlers on pointer-up to decide whether the release
+// should either (a) form a new card with that target + the dragged node, or
+// (b) append the dragged node to an existing card.
+export const findDropTargetAt = (
+  clientX: number,
+  clientY: number,
+  draggedId: string,
+): string | null => {
+  const container = document.querySelector<HTMLDivElement>(
+    "[data-moodboard-html-stage]",
+  );
+  if (!container) return null;
+  const { nodes, rootOrder, viewport } = useMoodboardStore.getState();
+  const p = worldPointFromClient(container, clientX, clientY, viewport);
+  if (!p) return null;
+  // Iterate in reverse z-order so the topmost overlap wins.
+  for (let i = rootOrder.length - 1; i >= 0; i--) {
+    const id = rootOrder[i];
+    if (id === draggedId) continue;
+    const n = nodes[id];
+    if (!n) continue;
+    if (n.kind === "group") continue;
+    if (
+      p.x >= n.x &&
+      p.x <= n.x + n.width &&
+      p.y >= n.y &&
+      p.y <= n.y + n.height
+    ) {
+      return id;
+    }
+  }
+  return null;
+};
+
+// Applies the drop result: forms a new card (target is a regular node) or
+// appends (target is already a card). Returns true if any mutation happened.
+export const applyDropOnto = (
+  draggedId: string,
+  targetId: string,
+): boolean => {
+  const state = useMoodboardStore.getState();
+  const target = state.nodes[targetId];
+  if (!target) return false;
+  if (target.kind === "card") {
+    state.appendToCard(targetId, draggedId);
+    return true;
+  }
+  if (target.kind === "image" || target.kind === "video" || target.kind === "text") {
+    state.createCardFromDrop(draggedId, targetId);
+    return true;
+  }
+  return false;
+};
+
+// Recomputes the hover target under the pointer and publishes the result to
+// the store's transient `dragPreview` so overlay UI can react. Safe to call
+// on every pointermove — the setter is a shallow equality in practice since
+// we always emit a fresh object, but targets change rarely during a drag.
+export const updateDragPreview = (
+  clientX: number,
+  clientY: number,
+  draggedId: string,
+): void => {
+  const targetId = findDropTargetAt(clientX, clientY, draggedId);
+  useMoodboardStore
+    .getState()
+    .setDragPreview({ draggedId, targetId });
+};
+
+export const clearDragPreview = (): void => {
+  useMoodboardStore.getState().setDragPreview(null);
+};

frontend/apps/artcraft/app/src/pages/PageMoodboardHtml/nodes/CardNodeHtml.tsx

@@ -0,0 +1,192 @@
+import { memo, useRef } from "react";
+import { useShallow } from "zustand/react/shallow";
+import {
+  CardNode as CardNodeData,
+  MoodboardNode,
+} from "../../PageMoodboard/types";
+import { useMoodboardStore } from "../../PageMoodboard/MoodboardStore";
+
+interface Props {
+  node: CardNodeData;
+  draggable: boolean;
+  onSelect: (id: string, additive: boolean) => void;
+}
+
+// Cards render their children in a vertical flex column. Children fill the
+// card's inner width; their height follows the child's natural aspect ratio
+// (images/videos) or own height (text). The card itself absorbs clicks —
+// children inside a card aren't independently selectable, same pattern as
+// GroupNodeHtml.
+const CardNodeHtmlInner = ({ node, draggable, onSelect }: Props) => {
+  const updateNode = useMoodboardStore((s) => s.updateNode);
+  const pushHistory = useMoodboardStore((s) => s.pushHistory);
+  const children = useMoodboardStore(
+    useShallow((s) =>
+      node.childIds
+        .map((id) => s.nodes[id])
+        .filter((n): n is MoodboardNode => Boolean(n)),
+    ),
+  );
+  const dragStateRef = useRef<{
+    active: boolean;
+    startClient: { x: number; y: number };
+    startNode: { x: number; y: number };
+    moved: boolean;
+  } | null>(null);
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    if (!draggable) return;
+    e.stopPropagation();
+    const additive = e.shiftKey;
+    onSelect(node.id, additive);
+    dragStateRef.current = {
+      active: true,
+      startClient: { x: e.clientX, y: e.clientY },
+      startNode: { x: node.x, y: node.y },
+      moved: false,
+    };
+    const onMove = (ev: PointerEvent) => {
+      const st = dragStateRef.current;
+      if (!st || !st.active) return;
+      const { zoom } = useMoodboardStore.getState().viewport;
+      const dx = (ev.clientX - st.startClient.x) / zoom;
+      const dy = (ev.clientY - st.startClient.y) / zoom;
+      if (!st.moved && (Math.abs(dx) > 1 || Math.abs(dy) > 1)) {
+        st.moved = true;
+        pushHistory();
+      }
+      if (st.moved) {
+        updateNode(node.id, {
+          x: st.startNode.x + dx,
+          y: st.startNode.y + dy,
+        });
+      }
+    };
+    const onUp = () => {
+      dragStateRef.current = null;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+
+  const innerW = Math.max(node.width - node.padding * 2, 1);
+
+  return (
+    <div
+      data-moodboard-html-card={node.id}
+      onPointerDown={handlePointerDown}
+      style={{
+        position: "absolute",
+        left: node.x,
+        top: node.y,
+        width: node.width,
+        height: node.height,
+        transform: `rotate(${node.rotation}deg)`,
+        transformOrigin: "0 0",
+        background: node.backgroundColor,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.18)",
+        borderRadius: 6,
+        cursor: draggable ? "move" : "default",
+        userSelect: "none",
+        touchAction: "none",
+        boxSizing: "border-box",
+        padding: node.padding,
+        display: "flex",
+        flexDirection: "column",
+        gap: node.padding,
+        overflow: "hidden",
+      }}
+    >
+      {children.map((child) => (
+        <CardChildSlot
+          key={child.id}
+          child={child}
+          innerWidth={innerW}
+        />
+      ))}
+    </div>
+  );
+};
+
+interface SlotProps {
+  child: MoodboardNode;
+  innerWidth: number;
+}
+
+// Each card slot renders a single child at full card-inner-width. We don't
+// reuse ImageNodeHtml/VideoNodeHtml here because those position via absolute
+// x/y — inside a card we want flex-driven layout instead.
+export const CardChildSlot = ({ child, innerWidth }: SlotProps) => {
+  if (child.kind === "image") {
+    const ratio =
+      child.naturalH > 0 && child.naturalW > 0
+        ? child.naturalH / child.naturalW
+        : 1;
+    return (
+      <img
+        src={child.src}
+        draggable={false}
+        alt=""
+        style={{
+          width: innerWidth,
+          height: innerWidth * ratio,
+          display: "block",
+          objectFit: "fill",
+          userSelect: "none",
+          pointerEvents: "none",
+          borderRadius: 4,
+        }}
+      />
+    );
+  }
+  if (child.kind === "video") {
+    const ratio =
+      child.naturalH > 0 && child.naturalW > 0
+        ? child.naturalH / child.naturalW
+        : 1;
+    return (
+      <video
+        src={child.src}
+        autoPlay={child.autoplay}
+        muted={child.muted}
+        loop={child.loop}
+        playsInline
+        preload="metadata"
+        style={{
+          width: innerWidth,
+          height: innerWidth * ratio,
+          display: "block",
+          objectFit: "fill",
+          pointerEvents: "none",
+          borderRadius: 4,
+        }}
+      />
+    );
+  }
+  if (child.kind === "text") {
+    return (
+      <div
+        style={{
+          width: innerWidth,
+          height: child.height,
+          padding: 4,
+          color: child.color,
+          fontSize: child.fontSize,
+          fontFamily: "inherit",
+          whiteSpace: "pre-wrap",
+          overflow: "hidden",
+          boxSizing: "border-box",
+          lineHeight: 1.2,
+        }}
+      >
+        {child.text || "Note"}
+      </div>
+    );
+  }
+  return null;
+};
+
+export const CardNodeHtml = memo(CardNodeHtmlInner);

frontend/apps/artcraft/app/src/pages/PageScene/DragAndDrop/DndAsset.ts

@@ -1,19 +1,19 @@
 import React from "react";
-import { MediaItem } from "~/pages/PageEnigma/models";
+import { MediaItem } from "~/pages/PageScene/models";
 import {
   canDrop,
   currPosition,
   dragItem,
-} from "~/pages/PageEnigma/signals";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+} from "~/pages/PageScene/signals";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 import { pageHeight, pageWidth } from "~/signals";
 import { AssetType } from "~/enums";
-import type Editor from "~/pages/PageEnigma/Editor/editor";
+import type Editor from "~/pages/PageScene/Editor/editor";
 import {
   addCharacter,
   addObject,
   addShape,
-} from "~/pages/PageEnigma/actions";
+} from "~/pages/PageScene/actions";
 
 class DndAsset {
   public dropId: string = "";
@@ -48,7 +48,7 @@ class DndAsset {
       this.isDragging = false;
       canDrop.value = false;
       this.notDropText = "";
-      usePageEnigmaStore.getState().setAssetModalVisibleDuringDrag(false);
+      usePageSceneStore.getState().setAssetModalVisibleDuringDrag(false);
       window.addEventListener("pointerup", this.onPointerUp);
       window.addEventListener("pointermove", this.onPointerMove);
     }
@@ -60,7 +60,7 @@ class DndAsset {
       canDrop.value = false;
       this.overElement = null;
       this.notDropText = "";
-      const store = usePageEnigmaStore.getState();
+      const store = usePageSceneStore.getState();
       store.setAssetModalVisibleDuringDrag(store.reopenAfterDrag);
     }
     this.editor = null;
@@ -81,7 +81,7 @@ class DndAsset {
     window.removeEventListener("pointermove", this.onPointerMove);
 
     if (!this.isDragging) {
-      usePageEnigmaStore.getState().setAssetModalVisibleDuringDrag(true);
+      usePageSceneStore.getState().setAssetModalVisibleDuringDrag(true);
       dragItem.value = null;
       currPosition.value = { currX: 0, currY: 0 };
       this.editor = null;

frontend/apps/artcraft/app/src/pages/PageScene/Editor/SceneMetadata.ts

@@ -1,13 +1,13 @@
 import { getArtStyle } from "~/enums/ArtStyle";
-import { SceneGenereationMetaData as SceneGenerationMetaData } from "~/pages/PageEnigma/models/sceneGenerationMetadata";
+import { SceneGenereationMetaData as SceneGenerationMetaData } from "~/pages/PageScene/models/sceneGenerationMetadata";
 import Editor from "./editor";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export const getSceneGenerationMetaData = (
   editorEngine: Editor,
 ): SceneGenerationMetaData => {
   // when this is called, editor engine is guarunteed by it's caller
-  const s = usePageEnigmaStore.getState();
+  const s = usePageSceneStore.getState();
   return {
     positivePrompt: editorEngine.positive_prompt,
     negativePrompt: editorEngine.negative_prompt,

frontend/apps/artcraft/app/src/pages/PageScene/Editor/editor.ts

@@ -13,7 +13,7 @@ import { SMAAPass } from "three/addons/postprocessing/SMAAPass.js";
 import { SAOPass } from "three/addons/postprocessing/SAOPass.js";
 import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
 import { PointerLockControls } from "three/addons/controls/PointerLockControls.js";
-import { EditorStates, CameraAspectRatio } from "~/pages/PageEnigma/enums";
+import { EditorStates, CameraAspectRatio } from "~/pages/PageScene/enums";
 import { AssetType, ClipGroup } from "~/enums";
 import { XYZ } from "../datastructures/common";
 import { SceneUtils } from "./helper";
@@ -36,10 +36,10 @@ import { CustomOutlinePass } from "./CustomOutlinePass.js";
 import FindSurfaces from "./FindSurfaces.js";
 
 import Stats from "three/examples/jsm/libs/stats.module.js";
-import { cameras, selectedCameraId } from "~/pages/PageEnigma/signals/camera";
+import { cameras, selectedCameraId } from "~/pages/PageScene/signals/camera";
 import { SparkRenderer } from "@sparkjsdev/spark";
 import { SSAOPass } from "three/examples/jsm/Addons.js";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export type EditorInitializeConfig = {
   sceneToken: string;
@@ -692,7 +692,7 @@ class Editor {
       return null;
     }
 
-    const store = usePageEnigmaStore.getState();
+    const store = usePageSceneStore.getState();
     const currentAspectRatio = store.cameraAspectRatio;
 
     // Store grid visibility state and hide grid
@@ -805,7 +805,7 @@ class Editor {
     }
 
     // Restore grid visibility
-    usePageEnigmaStore.getState().setGridVisible(wasGridVisible);
+    usePageSceneStore.getState().setGridVisible(wasGridVisible);
 
     // Restore transform controls visibility
     if (this.control) {
@@ -849,7 +849,7 @@ class Editor {
       ownerToken: authentication.userInfo.value?.user_token,
       isModified: false,
     });
-    usePageEnigmaStore.getState().resetScene();
+    usePageSceneStore.getState().resetScene();
 
     if (this.outliner_feature_flag) {
       const result = this.sceneManager?.render_outliner(
@@ -1315,7 +1315,7 @@ class Editor {
     this.control.space =
       type === "scale"
         ? "local"
-        : usePageEnigmaStore.getState().transformSpace;
+        : usePageSceneStore.getState().transformSpace;
     this.transform_interaction = true;
   }
 
@@ -1323,7 +1323,7 @@ class Editor {
     if (this.control == undefined || this.control.mode === "scale") {
       return;
     }
-    const store = usePageEnigmaStore.getState();
+    const store = usePageSceneStore.getState();
     const next = store.transformSpace === "world" ? "local" : "world";
     store.setTransformSpace(next);
     this.control.space = next;
@@ -1336,7 +1336,7 @@ class Editor {
   async switchPreview() {
     if (!this.switchPreviewToggle) {
       this.switchPreviewToggle = true;
-      usePageEnigmaStore.getState().setEditorState(EditorStates.PREVIEW);
+      usePageSceneStore.getState().setEditorState(EditorStates.PREVIEW);
       await this.generateFrame();
     }
   }
@@ -1348,7 +1348,7 @@ class Editor {
       this.rawRenderPass
     ) {
       this.switchPreviewToggle = false;
-      usePageEnigmaStore.getState().setEditorState(EditorStates.EDIT);
+      usePageSceneStore.getState().setEditorState(EditorStates.EDIT);
       setTimeout(() => {
         // if (!this.canvasRenderCamReference) {
         //   this.canvasRenderCamReference =
@@ -1573,7 +1573,7 @@ class Editor {
   }
 
   publishSelect() {
-    const store = usePageEnigmaStore.getState();
+    const store = usePageSceneStore.getState();
     const target = this.outliner_feature_flag
       ? this.sceneManager?.selected_objects?.[0]
       : this.selected;
@@ -1591,7 +1591,7 @@ class Editor {
   // character list, which is the source of truth for which scene objects
   // are characters.
   isCharacterUuid(uuid: string): boolean {
-    return usePageEnigmaStore
+    return usePageSceneStore
       .getState()
       .characters.some((c) => c.id === uuid);
   }
@@ -1600,7 +1600,7 @@ class Editor {
   // SceneManager.render_outliner to know which scene objects to render as
   // characters.
   getCharactersByUuid(): { [uuid: string]: ClipGroup } {
-    const characters = usePageEnigmaStore.getState().characters;
+    const characters = usePageSceneStore.getState().characters;
     const result: { [uuid: string]: ClipGroup } = {};
     for (const c of characters) {
       result[c.id] = ClipGroup.CHARACTER;

frontend/apps/artcraft/app/src/pages/PageScene/Editor/free_cam.ts

@@ -6,8 +6,8 @@ import {
   MathUtils,
 } from "three";
 import * as THREE from "three";
-import { cameras, selectedCameraId } from "~/pages/PageEnigma/signals/camera";
-import { isPromptBoxFocused } from "~/pages/PageEnigma/signals/promptBox";
+import { cameras, selectedCameraId } from "~/pages/PageScene/signals/camera";
+import { isPromptBoxFocused } from "~/pages/PageScene/signals/promptBox";
 
 
 export const isSafariOrWebKit = () => {

frontend/apps/artcraft/app/src/pages/PageScene/Editor/helper.ts

@@ -4,7 +4,7 @@ import * as THREE from "three";
 import { XYZ } from "../datastructures/common";
 import { EditorStates } from "../enums";
 import { hideObjectPanel } from "../signals";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export class SceneUtils {
   scene: Scene;
@@ -140,7 +140,7 @@ export class SceneUtils {
         this.editor.selected = this.editor.cam_obj;
         this.editor.publishSelect();
         this.editor.updateSelectedUI();
-        usePageEnigmaStore.getState().setEditorState(EditorStates.CAMERA_VIEW);
+        usePageSceneStore.getState().setEditorState(EditorStates.CAMERA_VIEW);
         if (this.editor.activeScene.hot_items) {
           this.editor.activeScene.hot_items.forEach((element) => {
             element.visible = false;
@@ -173,7 +173,7 @@ export class SceneUtils {
         }
 
         hideObjectPanel();
-        usePageEnigmaStore.getState().setEditorState(EditorStates.EDIT);
+        usePageSceneStore.getState().setEditorState(EditorStates.EDIT);
       }
     }
   }
@@ -271,7 +271,7 @@ function removeObject3D(object3D) {
       (obj as THREE.Mesh).geometry.dispose()
     }
 
-    usePageEnigmaStore.getState().removeSceneObject(uuid);
+    usePageSceneStore.getState().removeSceneObject(uuid);
     this.editor.selected = undefined;
     this.editor.publishSelect();
     hideObjectPanel();

frontend/apps/artcraft/app/src/pages/PageScene/Editor/keybinds_controls.ts

@@ -4,7 +4,7 @@ import {
   outlinerState,
   showObjectPanel,
 } from "../signals";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 import {
   OrbitControls,
   OutlinePass,
@@ -220,7 +220,7 @@ export class MouseControls {
     this.publishSelect();
 
     if (currentObject.userData.isCharacter) {
-      usePageEnigmaStore.getState().setShowPoseControls(true);
+      usePageSceneStore.getState().setShowPoseControls(true);
     }
 
     // Normal selection behavior
@@ -273,8 +273,8 @@ export class MouseControls {
       this.fkHelper.clear();
       this.kinMode = KinMode.NONE;
       this.reattachTransformControls();
-      if (usePageEnigmaStore.getState().poseMode === "pose") {
-        usePageEnigmaStore.getState().setPoseMode("select");
+      if (usePageSceneStore.getState().poseMode === "pose") {
+        usePageSceneStore.getState().setPoseMode("select");
       }
       console.log("FK mode off");
       return;
@@ -296,8 +296,8 @@ export class MouseControls {
     this.hideTransformControls();
     this.kinMode = KinMode.FK;
     this.fkHelper.setTarget(this.selected[0]);
-    if (usePageEnigmaStore.getState().poseMode === "select") {
-      usePageEnigmaStore.getState().setPoseMode("pose");
+    if (usePageSceneStore.getState().poseMode === "select") {
+      usePageSceneStore.getState().setPoseMode("pose");
     }
     console.log("FK mode on");
     return;
@@ -308,7 +308,7 @@ export class MouseControls {
       return;
     }
 
-    if (usePageEnigmaStore.getState().hotkeyStatus.disabled) {
+    if (usePageSceneStore.getState().hotkeyStatus.disabled) {
       return;
     } else if (event.key === "f" && this.selected && this.lockControls) {
       this.focus();
@@ -327,47 +327,47 @@ export class MouseControls {
             this.toggleFKMode();
           }
           this.removeTransformControls();
-          usePageEnigmaStore.getState().setShowPoseControls(false);
+          usePageSceneStore.getState().setShowPoseControls(false);
         });
       }
       return;
     } else if (event.key === "t") {
       // transform
       this.control?.setMode("translate");
-      const ts = usePageEnigmaStore.getState().transformSpace;
+      const ts = usePageSceneStore.getState().transformSpace;
       if (this.control) this.control.space = ts;
-      usePageEnigmaStore.getState().setSelectedMode("move");
+      usePageSceneStore.getState().setSelectedMode("move");
       return;
     } else if (event.key === "x") {
       // toggle world/local space (blocked in scale mode)
       if (this.control?.mode === "scale") return;
       const next =
-        usePageEnigmaStore.getState().transformSpace === "world"
+        usePageSceneStore.getState().transformSpace === "world"
           ? "local"
           : "world";
-      usePageEnigmaStore.getState().setTransformSpace(next);
+      usePageSceneStore.getState().setTransformSpace(next);
       if (this.control) this.control.space = next;
       return;
     } else if (event.key === "r" && !event.ctrlKey) {
       // rotate
       this.control?.setMode("rotate");
       if (this.control)
-        this.control.space = usePageEnigmaStore.getState().transformSpace;
-      usePageEnigmaStore.getState().setSelectedMode("rotate");
+        this.control.space = usePageSceneStore.getState().transformSpace;
+      usePageSceneStore.getState().setSelectedMode("rotate");
       return;
     } else if (event.key === "g") {
       // scale
       this.control?.setMode("scale");
       if (this.control)
-        this.control.space = usePageEnigmaStore.getState().transformSpace;
-      usePageEnigmaStore.getState().setSelectedMode("scale");
+        this.control.space = usePageSceneStore.getState().transformSpace;
+      usePageSceneStore.getState().setSelectedMode("scale");
       return;
     } else if (event.key === "k") {
       this.toggleFKMode();
       return;
     } else if (event.key === "b") {
       // Open asset modal
-      const store = usePageEnigmaStore.getState();
+      const store = usePageSceneStore.getState();
       store.setAssetModalVisible(true);
       store.setAssetModalVisibleDuringDrag(true);
       return;
@@ -446,13 +446,13 @@ export class MouseControls {
     }
 
     if (event.key === "Escape") {
-      if (usePageEnigmaStore.getState().poseMode === "pose") {
+      if (usePageSceneStore.getState().poseMode === "pose") {
         this.toggleFKMode();
         return;
       } else if (this.selected && this.selected.length > 0) {
         this.removeTransformControls();
         hideObjectPanel();
-        usePageEnigmaStore.getState().setShowPoseControls(false);
+        usePageSceneStore.getState().setShowPoseControls(false);
       }
     }
   }
@@ -612,7 +612,7 @@ export class MouseControls {
       this.setSelected(this.selected);
       this.removeTransformControls();
       hideObjectPanel();
-      usePageEnigmaStore.getState().setShowPoseControls(false);
+      usePageSceneStore.getState().setShowPoseControls(false);
     }
 
     if (this.sceneManager) {

frontend/apps/artcraft/app/src/pages/PageScene/Editor/save_manager.ts

@@ -3,12 +3,12 @@ import { SceneGenereationMetaData } from "../models/sceneGenerationMetadata";
 import { StoryTellerProxyScene } from "../proxy/storyteller_proxy_scene";
 
 import { setCameraAspectRatio } from "../signals";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 const showEditorLoader = (message?: string) =>
-  usePageEnigmaStore.getState().showEditorLoader(message);
+  usePageSceneStore.getState().showEditorLoader(message);
 const hideEditorLoader = () =>
-  usePageEnigmaStore.getState().hideEditorLoader();
+  usePageSceneStore.getState().hideEditorLoader();
 import Editor from "./editor";
 import { getArtStyle } from "~/enums";
 import { cameras, selectedCameraId, Camera } from "../signals/camera";
@@ -236,7 +236,7 @@ export class SaveManager {
     // this calls the signal function to propagate the data to the UI
     // Restore scene generation metadata into the Zustand store
     {
-      const store = usePageEnigmaStore.getState();
+      const store = usePageSceneStore.getState();
       if (scene_json.positivePrompt && scene_json.positivePrompt !== "") {
         store.setPositivePrompt(scene_json.positivePrompt);
         store.setIsUserInputPositive(true);
@@ -260,7 +260,7 @@ export class SaveManager {
     // these propogate the values into the editor
     if (scene_json.globalIpAdapterImageMediaToken) {
       // this should be populated right after
-      usePageEnigmaStore
+      usePageSceneStore
         .getState()
         .setGlobalIPAMediaToken(scene_json.globalIpAdapterImageMediaToken);
     }

frontend/apps/artcraft/app/src/pages/PageScene/Editor/scene.ts

@@ -9,7 +9,7 @@ import { MMDAnimationHelper, Water } from "three/examples/jsm/Addons.js";
 import { MediaFileType } from "../enums";
 import { ChromaKeyMaterial } from "./chromakey";
 import { LoadWithoutCors } from "@storyteller/tauri-api";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 import { InfiniteGridHelper } from "./InfiniteGridHelper";
 import { cameras, selectedCameraId } from "../signals/camera";
 import { MediaFilesApi } from "@storyteller/api";
@@ -92,7 +92,7 @@ class Scene {
     this.scene.userData["helper"] = this.helper;
 
     // Subscribe to grid visibility changes from the store
-    usePageEnigmaStore.subscribe((state, prev) => {
+    usePageSceneStore.subscribe((state, prev) => {
       if (state.gridVisible === prev.gridVisible || !this.gridHelper) return;
       if (state.gridVisible) {
         if (!this.scene.children.includes(this.gridHelper)) {
@@ -1094,7 +1094,7 @@ class Scene {
 
   // Update grid visibility based on the store
   updateGridVisibility() {
-    if (usePageEnigmaStore.getState().gridVisible) {
+    if (usePageSceneStore.getState().gridVisible) {
       if (!this.scene.children.includes(this.gridHelper)) {
         this.scene.add(this.gridHelper);
       }

frontend/apps/artcraft/app/src/pages/PageScene/Editor/scene_manager_api.ts

@@ -9,7 +9,7 @@ import Scene from "./scene";
 import { MouseControls } from "./keybinds_controls";
 import { ClipGroup } from "~/enums";
 import { AssetType } from "~/enums";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 import {
   CommandInputTypes,
   CreationSceneItem,
@@ -329,7 +329,7 @@ export class SceneManager implements SceneManagerAPI {
       this.mouse_controls.selectObject(obj);
       this.updateOutliner();
 
-      const store = usePageEnigmaStore.getState();
+      const store = usePageSceneStore.getState();
       if (wasCharacter) {
         store.addCharacter({
           id: obj.uuid,

frontend/apps/artcraft/app/src/pages/PageScene/Editor/video_generation.ts

@@ -1,13 +1,13 @@
 import Editor from "./editor";
-import { EditorStates } from "~/pages/PageEnigma/enums";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { EditorStates } from "~/pages/PageScene/enums";
+import { usePageSceneStore } from "../PageSceneStore";
 import { ToastTypes, ClipType } from "~/enums";
 
 import { Visibility } from "./api_manager.js";
 import * as THREE from "three";
 import { getSceneSignals, addToast, startPollingActiveJobs } from "~/signals";
 import { v4 as uuidv4 } from "uuid";
-import { SceneGenereationMetaData as SceneGenerationMetaData } from "~/pages/PageEnigma/models/sceneGenerationMetadata";
+import { SceneGenereationMetaData as SceneGenerationMetaData } from "~/pages/PageScene/models/sceneGenerationMetadata";
 import { MediaUploadApi, StudioGen2Api, VideoApi } from "~/Classes/ApiManager";
 
 
@@ -108,7 +108,7 @@ export class VideoGeneration {
         });
       }
 
-      usePageEnigmaStore.getState().setPreviewSrc("");
+      usePageSceneStore.getState().setPreviewSrc("");
 
       this.editor.rawRenderer.setSize(
         this.editor.render_width,
@@ -131,7 +131,7 @@ export class VideoGeneration {
 
       if (!this.editor.camera_person_mode) {
         this.editor.switchCameraView();
-        usePageEnigmaStore.getState().setEditorState(EditorStates.PREVIEW);
+        usePageSceneStore.getState().setEditorState(EditorStates.PREVIEW);
       }
 
       this.editor.generating_preview = false;
@@ -145,7 +145,7 @@ export class VideoGeneration {
           this.editor.negative_prompt,
         );
 
-        usePageEnigmaStore.getState().setPreviewSrc(url);
+        usePageSceneStore.getState().setPreviewSrc(url);
         return Promise.resolve(url);
       } catch (err: unknown) {
         const errorMessage =
@@ -227,7 +227,7 @@ export class VideoGeneration {
 
     // update the signal with this information
     if (ipa_image_token) {
-      usePageEnigmaStore.getState().setGlobalIPAMediaToken(ipa_image_token);
+      usePageSceneStore.getState().setGlobalIPAMediaToken(ipa_image_token);
     }
 
     // TODO Remove so many of these around wtf. SceneGenereationMetaData should only be one place
@@ -346,7 +346,7 @@ export class VideoGeneration {
         use_upscaler: this.editor.generation_options.upscale,
         uuid_idempotency_token: uuidv4(),
         global_ipa_media_token:
-          usePageEnigmaStore.getState().globalIPAMediaToken ?? "",
+          usePageSceneStore.getState().globalIPAMediaToken ?? "",
         input_depth_file: "",
         input_normal_file: "",
         input_outline_file: "",

frontend/apps/artcraft/app/src/pages/PageScene/PageEditor.tsx

@@ -26,9 +26,9 @@ import {
   outlinerIsShowing,
   gridVisibility,
   setGridVisibility,
-} from "~/pages/PageEnigma/signals";
-import { DomLevels } from "~/pages/PageEnigma/PageEnigmaStore";
-import { setCameraAspect } from "~/pages/PageEnigma/actions";
+} from "~/pages/PageScene/signals";
+import { DomLevels } from "~/pages/PageScene/PageSceneStore";
+import { setCameraAspect } from "~/pages/PageScene/actions";
 import { EditorCanvas } from "./comps/EngineCanvases";
 import { SceneContainer } from "./comps/SceneContainer";
 import { Outliner } from "./comps/Outliner";
@@ -57,10 +57,10 @@ import {
 } from "~/components/signaled/TopBar/TopBar";
 import { uploadPlaneFromMediaToken } from "~/components/reusable/UploadModalMedia/uploadPlane";
 import { addObject, addCharacter } from "./actions";
-import { usePageEnigmaStore } from "./PageEnigmaStore";
+import { usePageSceneStore } from "./PageSceneStore";
 import { AssetType, AUTH_STATUS } from "~/enums";
 import { v4 as uuidv4 } from "uuid";
-import { MediaItem } from "~/pages/PageEnigma/models";
+import { MediaItem } from "~/pages/PageScene/models";
 import { UploaderState } from "~/models";
 import * as THREE from "three";
 import {
@@ -103,16 +103,16 @@ export const PageEditor = () => {
 
   const tabStore = useTabStore();
   const storyboardPageEnabled = useStoryboardPageEnabled();
-  const camAspect = usePageEnigmaStore((s) => s.cameraAspectRatio);
-  const editorLoader = usePageEnigmaStore((s) => s.editorLoader);
-  const disableHotkeyInput = usePageEnigmaStore((s) => s.disableHotkeyInput);
-  const enableHotkeyInput = usePageEnigmaStore((s) => s.enableHotkeyInput);
+  const camAspect = usePageSceneStore((s) => s.cameraAspectRatio);
+  const editorLoader = usePageSceneStore((s) => s.editorLoader);
+  const disableHotkeyInput = usePageSceneStore((s) => s.disableHotkeyInput);
+  const enableHotkeyInput = usePageSceneStore((s) => s.enableHotkeyInput);
   const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
   };
 
   useEffect(() => {
-    usePageEnigmaStore.getState().setSidePanelWidth(340);
+    usePageSceneStore.getState().setSidePanelWidth(340);
     window.onbeforeunload = () => {
       return "You may have unsaved changes.";
     };

frontend/apps/artcraft/app/src/pages/PageScene/PageScene.tsx

@@ -1,9 +1,9 @@
-import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent";
+import { DragComponent } from "~/pages/PageScene/comps/DragComponent/DragComponent";
 import { EngineProvider } from "./contexts/EngineContext";
 import { useActiveJobs } from "~/hooks/useActiveJobs";
 import { useBackgroundLoadingMedia } from "~/hooks/useBackgroundLoadingMedia";
 import { ErrorDialog } from "~/components";
-import { GenerateModals } from "~/pages/PageEnigma/comps/GenerateModals/GenerateModals";
+import { GenerateModals } from "~/pages/PageScene/comps/GenerateModals/GenerateModals";
 import { toast, Toaster } from "@storyteller/ui-toaster";
 import { EditorLoadingBar } from "./comps/EditorLoadingBar";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -17,8 +17,8 @@ import {
   precisionSelectorValues,
   showPrecisionSelector,
 } from "./signals/precisionSelectorMenu";
-import { InstallSounds } from "~/pages/PageEnigma/InstallSounds";
-import { PageEditor } from "~/pages/PageEnigma/PageEditor";
+import { InstallSounds } from "~/pages/PageScene/InstallSounds";
+import { PageEditor } from "~/pages/PageScene/PageEditor";
 import { GalleryDragComponent } from "@storyteller/ui-gallery-modal";
 import {
   PricingModal,
@@ -41,7 +41,7 @@ import { useTextToImageStore } from "~/pages/PageImage/TextToImageStore";
 import { GetAppPreferences } from "@storyteller/tauri-api";
 import { SoundRegistry } from "@storyteller/soundboard";
 
-export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
+export const PageScene = ({ sceneToken }: { sceneToken?: string }) => {
   useSignals();
   useActiveJobs();
   useBackgroundLoadingMedia();

frontend/apps/artcraft/app/src/pages/PageScene/PageSceneStore.ts

@@ -72,7 +72,7 @@ const DEFAULT_CAMERAS: CameraEntry[] = [
   },
 ];
 
-interface PageEnigmaState {
+interface PageSceneState {
   // scene contents
   objects: SceneObject[];
   characters: SceneObject[];
@@ -206,7 +206,7 @@ interface PageEnigmaState {
   resetSceneGenerationMetadata: () => void;
 }
 
-export const usePageEnigmaStore = create<PageEnigmaState>((set, get) => ({
+export const usePageSceneStore = create<PageSceneState>((set, get) => ({
   // initial state
   objects: [],
   characters: [],

frontend/apps/artcraft/app/src/pages/PageScene/actions/addCharacter.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import type Editor from "../Editor/editor";
 import { MediaItem } from "../models";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export async function addCharacter(
   editor: Editor,
@@ -17,7 +17,7 @@ export async function addCharacter(
 
   obj.userData.isCharacter = true;
 
-  usePageEnigmaStore.getState().addCharacter({
+  usePageSceneStore.getState().addCharacter({
     id: obj.uuid,
     kind: "character",
     name: obj.name || (item.name ?? "character"),

frontend/apps/artcraft/app/src/pages/PageScene/actions/addObject.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import type Editor from "../Editor/editor";
 import { MediaItem } from "../models";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export async function addObject(
   editor: Editor,
@@ -15,7 +15,7 @@ export async function addObject(
   );
   if (!obj) return undefined;
 
-  usePageEnigmaStore.getState().addObject({
+  usePageSceneStore.getState().addObject({
     id: obj.uuid,
     kind: "object",
     name: obj.name || (item.name ?? "object"),

frontend/apps/artcraft/app/src/pages/PageScene/actions/addShape.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import type Editor from "../Editor/editor";
 import { MediaItem } from "../models";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export async function addShape(
   editor: Editor,
@@ -15,7 +15,7 @@ export async function addShape(
   );
   if (!obj) return undefined;
 
-  usePageEnigmaStore.getState().addShape({
+  usePageSceneStore.getState().addShape({
     id: obj.uuid,
     kind: "shape",
     name: obj.name || (item.name ?? "shape"),

frontend/apps/artcraft/app/src/pages/PageScene/actions/deleteObject.ts

@@ -2,7 +2,7 @@ import type Editor from "../Editor/editor";
 
 // Editor.deleteObject already removes the THREE.js object via SceneUtils
 // and updates the store via the helper that calls
-// usePageEnigmaStore.getState().removeSceneObject. This action exists for
+// usePageSceneStore.getState().removeSceneObject. This action exists for
 // symmetry with addObject and to give callers a single import surface.
 export function deleteObject(editor: Editor, id: string): void {
   editor.deleteObject(id);

frontend/apps/artcraft/app/src/pages/PageScene/actions/setCameraAspect.ts

@@ -1,14 +1,14 @@
 import type Editor from "../Editor/editor";
 import { CameraAspectRatio } from "../enums";
 import { setCameraAspectRatio as setCameraAspectSignal } from "../signals/engine";
-import { usePageEnigmaStore } from "../PageEnigmaStore";
+import { usePageSceneStore } from "../PageSceneStore";
 
 export function setCameraAspect(
   editor: Editor,
   ratio: CameraAspectRatio,
 ): void {
   editor.changeRenderCameraAspectRatio(ratio);
-  usePageEnigmaStore.getState().setCameraAspectRatio(ratio);
+  usePageSceneStore.getState().setCameraAspectRatio(ratio);
   // Keep the legacy signal in sync until Phase 5 retires it.
   setCameraAspectSignal(ratio);
 }

frontend/apps/artcraft/app/src/pages/PageScene/actions/setTransformMode.ts

@@ -1,5 +1,5 @@
 import type Editor from "../Editor/editor";
-import { usePageEnigmaStore, TransformMode } from "../PageEnigmaStore";
+import { usePageSceneStore, TransformMode } from "../PageSceneStore";
 
 const ENGINE_MODE: Record<TransformMode, "translate" | "rotate" | "scale"> = {
   move: "translate",
@@ -9,7 +9,7 @@ const ENGINE_MODE: Record<TransformMode, "translate" | "rotate" | "scale"> = {
 
 export function setTransformMode(editor: Editor, mode: TransformMode): void {
   editor.change_mode(ENGINE_MODE[mode]);
-  const store = usePageEnigmaStore.getState();
+  const store = usePageSceneStore.getState();
   store.setTransformMode(mode);
   store.setSelectedMode(mode);
 }

frontend/apps/artcraft/app/src/pages/PageScene/comps/AspectRatioMenu/AspectRatioMenu.tsx

@@ -4,10 +4,10 @@ import {
   faSquare,
 } from "@fortawesome/pro-solid-svg-icons";
 import { useContext } from "react";
-import { CameraAspectRatio } from "~/pages/PageEnigma/enums";
-import { setCameraAspect } from "~/pages/PageEnigma/actions";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+import { CameraAspectRatio } from "~/pages/PageScene/enums";
+import { setCameraAspect } from "~/pages/PageScene/actions";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
+import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
 import { ButtonDropdown } from "@storyteller/ui-button-dropdown";
 
 const ICON_BY_RATIO: Record<CameraAspectRatio, typeof faRectangle> = {
@@ -27,7 +27,7 @@ const LABEL_BY_RATIO: Record<CameraAspectRatio, string> = {
 };
 
 export const AspectRatioMenu = () => {
-  const aspect = usePageEnigmaStore((s) => s.cameraAspectRatio);
+  const aspect = usePageSceneStore((s) => s.cameraAspectRatio);
   const editor = useContext(EngineContext);
 
   const handleChangeAspectRatio = (newRatio: CameraAspectRatio) => {

frontend/apps/artcraft/app/src/pages/PageScene/comps/AssetMenu/AssetMenu.tsx

@@ -3,13 +3,13 @@ import { Tooltip } from "~/components";
 import { Button } from "@storyteller/ui-button";
 import { useState } from "react";
 import { AssetModal } from "./AssetModal";
-import { usePageEnigmaStore } from "../../PageEnigmaStore";
+import { usePageSceneStore } from "../../PageSceneStore";
 
 export const AssetMenu = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleOpenModal = () => {
-    usePageEnigmaStore.getState().setAssetModalVisibleDuringDrag(true);
+    usePageSceneStore.getState().setAssetModalVisibleDuringDrag(true);
     setIsModalOpen(true);
   };
 

frontend/apps/artcraft/app/src/pages/PageScene/comps/AssetMenu/AssetModal.tsx

@@ -34,7 +34,7 @@ import {
   demoMemeItems,
 } from "../../signals";
 import { useShallow } from "zustand/shallow";
-import { usePageEnigmaStore } from "../../PageEnigmaStore";
+import { usePageSceneStore } from "../../PageSceneStore";
 import { MediaItem } from "../../models";
 import { useUserObjects, useFeaturedObjects } from "../SidePanelTabs/hooks";
 import { FilterEngineCategories, FilterMediaType } from "~/enums";
@@ -110,7 +110,7 @@ export const AssetModal = () => {
     reopenAfterDrag,
     setAssetModalVisible,
     setReopenAfterDrag,
-  } = usePageEnigmaStore(
+  } = usePageSceneStore(
     useShallow((s) => ({
       assetModalVisible: s.assetModalVisible,
       assetModalVisibleDuringDrag: s.assetModalVisibleDuringDrag,

frontend/apps/artcraft/app/src/pages/PageScene/comps/CameraSettingsModal/CameraSettingsModal.tsx

@@ -6,7 +6,7 @@ import { Input } from "@storyteller/ui-input";
 import { Label } from "@storyteller/ui-label";
 import { Button } from "@storyteller/ui-button";
 import { SliderV2 } from "@storyteller/ui-sliderv2";
-import { focalLengthDragging } from "~/pages/PageEnigma/signals/camera";
+import { focalLengthDragging } from "~/pages/PageScene/signals/camera";
 import { useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 import { Tooltip } from "@storyteller/ui-tooltip";

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -10,15 +10,15 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { objectPanel as objectPanelSignals } from "../../signals";
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
 import { InputVector } from "@storyteller/ui-input";
 import { Button } from "@storyteller/ui-button";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 import { twMerge } from "tailwind-merge";
-import { EditorStates } from "~/pages/PageEnigma/enums";
+import { EditorStates } from "~/pages/PageScene/enums";
 import { sanitize } from "./utils/sanitize";
-import { objectMismatch } from "~/pages/PageEnigma/comps/ControlPanelSceneObject/utils/objectMismatch";
-import { XYZ } from "~/pages/PageEnigma/datastructures/common";
+import { objectMismatch } from "~/pages/PageScene/comps/ControlPanelSceneObject/utils/objectMismatch";
+import { XYZ } from "~/pages/PageScene/datastructures/common";
 import { pageHeight } from "~/signals";
 import { DraggablePrecisionMutator } from "./DraggablePrecisionMutator";
 
@@ -39,9 +39,9 @@ const defaultAxises: Record<string, string> = {
 
 export const ControlPanelSceneObject = () => {
   useSignals();
-  const editorState = usePageEnigmaStore((s) => s.editorState);
-  const disableHotkeyInput = usePageEnigmaStore((s) => s.disableHotkeyInput);
-  const enableHotkeyInput = usePageEnigmaStore((s) => s.enableHotkeyInput);
+  const editorState = usePageSceneStore((s) => s.editorState);
+  const disableHotkeyInput = usePageSceneStore((s) => s.disableHotkeyInput);
+  const enableHotkeyInput = usePageSceneStore((s) => s.enableHotkeyInput);
   const { isShowing, currentObject } = objectPanelSignals;
 
   const editorEngine = useContext(EngineContext);

frontend/apps/artcraft/app/src/pages/PageScene/comps/Controls3D/Controls3D.tsx

@@ -15,7 +15,7 @@ import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { EngineContext } from "../../contexts/EngineContext";
 import { useContext, useEffect, useState } from "react";
 import { useShallow } from "zustand/shallow";
-import { usePageEnigmaStore } from "../../PageEnigmaStore";
+import { usePageSceneStore } from "../../PageSceneStore";
 import { useTabStore } from "~/pages/Stores/TabState";
 // import { v4 as uuidv4 } from "uuid";
 // import { addObject } from "../../signals/objectGroup/addObject";
@@ -24,7 +24,7 @@ import { useTabStore } from "~/pages/Stores/TabState";
 // import { AssetType } from "~/enums";
 import { AssetModal } from "../AssetMenu/AssetModal";
 import { setTransformMode } from "../../actions";
-import { TransformMode } from "../../PageEnigmaStore";
+import { TransformMode } from "../../PageSceneStore";
 import { useSignals } from "@preact/signals-react/runtime";
 import { outlinerState } from "../../signals/outliner/outliner";
 // eslint-disable-next-line import/no-unresolved
@@ -49,7 +49,7 @@ export const Controls3D = () => {
     setAssetModalVisibleDuringDrag,
     selectedMode,
     transformSpace,
-  } = usePageEnigmaStore(
+  } = usePageSceneStore(
     useShallow((s) => ({
       assetModalVisible: s.assetModalVisible,
       setAssetModalVisible: s.setAssetModalVisible,

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -7,18 +7,18 @@ import {
   faKeyboard,
   faSquare,
 } from "@fortawesome/pro-solid-svg-icons";
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
 import { ToastTypes } from "~/enums";
 import { scene, signalScene, authentication, addToast } from "~/signals";
-import { outlinerIsShowing } from "~/pages/PageEnigma/signals/outliner/outliner";
+import { outlinerIsShowing } from "~/pages/PageScene/signals/outliner/outliner";
 import { ButtonDropdown } from "@storyteller/ui-button-dropdown";
 import { Input } from "@storyteller/ui-input";
 import { Button } from "@storyteller/ui-button";
 import { TestFeaturesButtons } from "./TestFeaturesButtons";
 import { LoadUserScenes } from "./LoadUserScenes";
 import { getCurrentLocationWithoutParams, isNumberString } from "~/utilities";
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
-import { CameraAspectRatio } from "~/pages/PageEnigma/enums";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
+import { CameraAspectRatio } from "~/pages/PageScene/enums";
 import { twMerge } from "tailwind-merge";
 import { Help } from "./Help";
 import { Modal } from "@storyteller/ui-modal";
@@ -42,7 +42,7 @@ export const ControlsTopButtons = () => {
   };
 
   const handleResetScene = () => {
-    usePageEnigmaStore.getState().resetSceneGenerationMetadata();
+    usePageSceneStore.getState().resetSceneGenerationMetadata();
     editorEngine?.changeRenderCameraAspectRatio(
       CameraAspectRatio.HORIZONTAL_3_2,
     );

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlsTopButtons/LoadUserScenes/LoadUserScenes.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import dayjs from "dayjs";
-import { MediaInfo } from "~/pages/PageEnigma/models";
+import { MediaInfo } from "~/pages/PageScene/models";
 import { FilterEngineCategories, ToastTypes } from "~/enums";
 import { addToast } from "~/signals";
 import { ScenePicker, SceneTypes } from "../ScenePicker";

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlsTopButtons/NewSceneFromTemplate/NewSceneFromTemplate.tsx

@@ -7,7 +7,7 @@ import {
 } from "react";
 import dayjs from "dayjs";
 
-import { MediaInfo } from "~/pages/PageEnigma/models";
+import { MediaInfo } from "~/pages/PageScene/models";
 import { FilterEngineCategories, ToastTypes } from "~/enums";
 
 import { ScenePicker, SceneTypes } from "../ScenePicker";

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlsTopButtons/ScenePicker/ScenePicker.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { SceneCard } from "~/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard";
+import { SceneCard } from "~/pages/PageScene/comps/ControlsTopButtons/ScenePicker/SceneCard";
 
 export type SceneTypes = {
   token: string;

frontend/apps/artcraft/app/src/pages/PageScene/comps/ControlsTopButtons/TestFeaturesButtons.tsx

@@ -2,7 +2,7 @@
 
 import { useContext } from "react";
 import { Button } from "@storyteller/ui-button" 
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+import { EngineContext } from "~/pages/PageScene/contexts/EngineContext";
 
 export const TestFeaturesButtons = ({ debug }: { debug: boolean }) => {
   if (!debug) return null;

frontend/apps/artcraft/app/src/pages/PageScene/comps/DragComponent/DragComponent.tsx

@@ -1,4 +1,4 @@
-import { currPosition, dragItem } from "~/pages/PageEnigma/signals";
+import { currPosition, dragItem } from "~/pages/PageScene/signals";
 import { useSignals } from "@preact/signals-react/runtime";
 
 export const DragComponent = () => {

frontend/apps/artcraft/app/src/pages/PageScene/comps/EngineCanvases.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from "react";
-import { camViewCanvasSignal, editorCanvasSignal, EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+import { camViewCanvasSignal, editorCanvasSignal, EngineContext } from "~/pages/PageScene/contexts/EngineContext";
 
 export const EditorCanvas = () => {
   const canvasCallbackRef = useCallback(

frontend/apps/artcraft/app/src/pages/PageScene/comps/FocalLengthDisplay/FocalLengthDisplay.tsx

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { useSignals } from "@preact/signals-react/runtime";
-import { focalLengthDragging } from "~/pages/PageEnigma/signals/camera";
+import { focalLengthDragging } from "~/pages/PageScene/signals/camera";
 
 export const FocalLengthDisplay = () => {
   useSignals();

frontend/apps/artcraft/app/src/pages/PageScene/comps/GenerateModals/Activity.tsx

@@ -8,7 +8,7 @@ import { Tooltip } from "@storyteller/ui-tooltip";
 import { useEffect, useState, useRef, useCallback } from "react";
 import { JobsApi } from "~/Classes/ApiManager/JobsApi";
 import { toast } from "@storyteller/ui-toaster";
-import { ActiveJob } from "~/pages/PageEnigma/models";
+import { ActiveJob } from "~/pages/PageScene/models";
 import { IsJobPollingDisabled } from "~/flags/DevConsoleFlags";
 
 // TODO ensure we de-dupe all this extra code.

frontend/apps/artcraft/app/src/pages/PageScene/comps/GenerateModals/GenerateModals.tsx

@@ -1,19 +1,19 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { MediaFile } from "~/pages/PageEnigma/models";
+import { MediaFile } from "~/pages/PageScene/models";
 
-import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
+import { usePageSceneStore } from "~/pages/PageScene/PageSceneStore";
 import { ToastTypes } from "~/enums";
 import { addToast } from "~/signals";
 
-import { MyMovies } from "~/pages/PageEnigma/comps/GenerateModals/MyMovies";
-import { Sharing } from "~/pages/PageEnigma/comps/GenerateModals/Sharing";
+import { MyMovies } from "~/pages/PageScene/comps/GenerateModals/MyMovies";
+import { Sharing } from "~/pages/PageScene/comps/GenerateModals/Sharing";
 import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
 
 export function GenerateModals() {
   const [mediaFile, setMediaFile] = useState<MediaFile | null>(null);
-  const generateMovieId = usePageEnigmaStore((s) => s.generateMovieId);
-  const setGenerateMovieId = usePageEnigmaStore((s) => s.setGenerateMovieId);
+  const generateMovieId = usePageSceneStore((s) => s.generateMovieId);
+  const setGenerateMovieId = usePageSceneStore((s) => s.setGenerateMovieId);
 
   const GetMediaFileByToken = useCallback(async (movieId: string) => {
     const mediaFilesApi = new MediaFilesApi();

frontend/apps/artcraft/app/src/pages/PageScene/comps/GenerateModals/InProgressCard.tsx

@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
 import { ToastTypes } from "~/enums";
 import { addToast } from "~/signals";
-import { JobState } from "~/pages/PageEnigma/enums";
-import { ActiveJob } from "~/pages/PageEnigma/models";
+import { JobState } from "~/pages/PageScene/enums";
+import { ActiveJob } from "~/pages/PageScene/models";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { JobsApi } from "~/Classes/ApiManager";
 import { PollRecentJobs } from "~/hooks/useActiveJobs/utilities";