shared toaster component

Co-authored-by: Michael Chung <michaelchung@michaels-mbp-2.home>

crates/lib/api_clients/openai_sora_client/src/image_gen/image_gen_status.rs

@@ -83,16 +83,16 @@ pub struct Generation {
   pub created_at: String,
   pub deleted_at: Option<String>,
   pub url: String,
-  pub seed: i64,
-  pub can_download: bool,
-  pub download_status: String,
-  pub is_favorite: bool,
-  pub is_liked: bool,
-  pub is_public: bool,
-  pub is_archived: bool,
-  pub is_featured: bool,
-  pub has_feedback: bool,
-  pub like_count: i32,
+  pub seed: Option<i64>,
+  pub can_download: Option<bool>,
+  pub download_status: Option<String>,
+  pub is_favorite: Option<bool>,
+  pub is_liked: Option<bool>,
+  pub is_public: Option<bool>,
+  pub is_archived: Option<bool>,
+  pub is_featured: Option<bool>,
+  pub has_feedback: Option<bool>,
+  pub like_count: Option<i32>,
   pub cloudflare_metadata: Option<serde_json::Value>,
   pub cf_thumbnail_url: Option<String>,
   pub encodings: Encodings,

crates/lib/api_clients/openai_sora_client/src/lib.rs

@@ -2,4 +2,5 @@ pub mod credentials;
 pub mod image_gen;
 pub mod job;
 pub mod upload;
-pub mod sentinel_refresh;
+pub mod sentinel_refresh;
+mod sora_error;

crates/lib/api_clients/openai_sora_client/src/sora_error.rs

@@ -0,0 +1,48 @@
+use std::error::Error;
+use std::fmt::{Display, Formatter};
+
+#[derive(Debug)]
+pub enum SoraError {
+  /// Unauthorized, cookie and/or bearer token expired. We'll need to ask for a refreshed login.
+  ///
+  /// Example message, e.g. from the upload endpoint:
+  ///   {
+  ///     "error": {
+  ///       "message": "Your authentication token has expired. Please try signing in again.",
+  ///       "type": "invalid_request_error",
+  ///       "param": null,
+  ///       "code": "token_expired"
+  ///     }
+  ///   }
+  UnauthorizedCookieOrBearerExpired,
+
+  /// Another error occurred.
+  OtherBadStatus(anyhow::Error),
+
+  /// Reqwest Error
+  ReqwestError(reqwest::Error),
+}
+
+impl Error for SoraError {}
+
+impl Display for SoraError {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+    match self {
+      SoraError::UnauthorizedCookieOrBearerExpired => {
+        write!(f, "Unauthorized: cookie and/or bearer token expired")
+      }
+      SoraError::OtherBadStatus(err) => {
+        write!(f, "Other error: {}", err)
+      }
+      SoraError::ReqwestError(err) => {
+        write!(f, "Reqwest error: {}", err)
+      }
+    }
+  }
+}
+
+impl From<reqwest::Error> for SoraError {
+  fn from(err: reqwest::Error) -> SoraError {
+    SoraError::ReqwestError(err)
+  }
+}

crates/lib/api_clients/openai_sora_client/src/upload/upload_media_http_request.rs

@@ -3,6 +3,7 @@ use errors::AnyhowResult;
 use reqwest::multipart::{Form, Part};
 use reqwest::Client;
 use serde::Deserialize;
+use crate::sora_error::SoraError;
 
 const SORA_UPLOAD_MEDIA_URL: &str = "https://sora.com/backend/uploads";
 
@@ -25,6 +26,17 @@ Response:
   "size_bytes": 118501,
   "thumbnail_url": "https://videos.openai.com/vg-assets/assets%2Fclient_upload%2Fmedia%2Fuser-9wf6JFdgRSJLjvSJ53LNAbV8%2Fmedia_01jqt9vt20erx9zvryf3v1pecx.jpg?st=2025-04-02T02%3A39%3A01Z&se=2025-04-08T03%3A39%3A01Z&sks=b&skt=2025-04-02T02%3A39%3A01Z&ske=2025-04-08T03%3A39%3A01Z&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skoid=3d249c53-07fa-4ba4-9b65-0bf8eb4ea46a&skv=2019-02-02&sv=2018-11-09&sr=b&sp=r&spr=https%2Chttp&sig=9aU9xKI0BkhRtrTb0RD05%2BT6prBnmXk1I7nV2nTsFbY%3D&az=oaivgprodscus"
 }
+
+Error response:
+
+Failed to upload scene media to Sora: Upload failed with status 401 Unauthorized: {
+      "error": {
+        "message": "Your authentication token has expired. Please try signing in again.",
+        "type": "invalid_request_error",
+        "param": null,
+        "code": "token_expired"
+      }
+    }
 */
 
 #[derive(Debug, Deserialize)]
@@ -50,7 +62,13 @@ pub (crate) struct SoraMediaUploadRequest<'a> {
   pub credentials: &'a SoraCredentials,
 }
 
-pub (crate) async fn upload_media_http_request(file_bytes: Vec<u8>, filename: String, mime_type: &str, credentials: &SoraCredentials) -> AnyhowResult<SoraMediaUploadResponse> {
+pub (crate) async fn upload_media_http_request(
+  file_bytes: Vec<u8>,
+  filename: String,
+  mime_type: &str,
+  credentials: &SoraCredentials,
+) -> Result<SoraMediaUploadResponse, SoraError> {
+
   // Create multipart form
   let part = Part::bytes(file_bytes) // NB: Reqwest needs to own the bytes.
     .file_name(filename) // NB: Reqwest needs to own the bytes
@@ -70,12 +88,29 @@ pub (crate) async fn upload_media_http_request(file_bytes: Vec<u8>, filename: St
 
   // Check response status
   if !response.status().is_success() {
-    let status = response.status();
-    let text = response.text().await?;
-    return Err(anyhow::anyhow!("Upload failed with status {}: {}", status, text));
+    let error = classify_error(response).await;
+    return Err(error);
   }
 
   // Parse response
   let upload_response = response.json::<SoraMediaUploadResponse>().await?;
   Ok(upload_response)
 }
+
+async fn classify_error(response: reqwest::Response) -> SoraError {
+  let status = response.status();
+  let message = match response.text().await {
+    Ok(text) => text,
+    Err(err) => return SoraError::ReqwestError(err),
+  };
+
+  let cookie_expired =
+      message.contains("Your authentication token has expired. Please try signing in again.")
+      || message.contains("token_expired");
+
+  if cookie_expired {
+    SoraError::UnauthorizedCookieOrBearerExpired
+  } else {
+    SoraError::OtherBadStatus(anyhow::anyhow!("Upload failed with status {}: {}", status, message))
+  }
+}

crates/lib/deprecated/config/src/shared_constants.rs

@@ -4,7 +4,6 @@
 /// NB: `sqlx::query` is spammy and dumps all queries as "info"-level log lines.
 /// NB: `hyper::proto::h1::io` is incredibly spammy and logs every chunk of bytes in very large files being downloaded.
 pub const DEFAULT_RUST_LOG: &str = concat!(
-  "debug,",
   "actix_web=info,",
   "sqlx::query=warn,",
   "hyper::proto::h1::io=warn,",

frontend/README.md

@@ -27,4 +27,21 @@ Run dev server:
 nx dev editor3d
 ```
 
+```
+call when starting on main or a new branch:
+./clean_modules
+
+The names for @frontend and @storyteller come from the package.json file in the libs folder.
+import { Login } from "@frontend/login";
+import { api } from "@storyteller/api";
+
+building:
+npx nx build editor3d
+npx nx build editor2d
+
+dev:
+npx nx dev editor3d
+npx nx dev editor2d
+```
+
 

frontend/apps/editor2d/package.json

@@ -4,7 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "nx": {
-    "name": "editor2d"
+    "name": "editor2d",
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   },
   "scripts": {
     "dev": "echo 'editor2d' && vite",

frontend/apps/editor2d/src/GalleryRootComponent/LibraryModal.tsx

@@ -1,333 +0,0 @@
-import { faCheck } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { CloseButton } from "@headlessui/react";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { twMerge } from "tailwind-merge";
-import { Button, LoadingSpinner, TransitionDialogue } from "~/components/reusable";
-import { TabSelector } from "~/components/ui";
-
-export function GetCdnOrigin(): string {
-  return 'https://cdn-2.fakeyou.com';
-}
-export enum FilterMediaClasses {
-  AUDIO = "audio",
-  IMAGE = "image",
-  VIDEO = "video",
-}
-
-export interface LibraryItem {
-  id: string;
-  label: string;
-  thumbnail: string | null;
-  fullImage?: string | null;
-  createdAt: string;
-}
-
-interface GroupedItems {
-  [date: string]: LibraryItem[];
-}
-
-type ModalMode = "select" | "view";
-
-interface LibraryModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  mode: ModalMode;
-  selectedItemIds?: string[];
-  onSelectItem?: (id: string) => void;
-  maxSelections?: number;
-  onUseSelected?: (selectedItems: LibraryItem[]) => void;
-  tabs: { id: string; label: string }[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-}
-
-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 cdnOrigin = GetCdnOrigin();
-    const imageUrl = lightboxImage?.fullImage || "";
-    const api = useMemo(() => new LibraryModalApi(), []);
-
-    const formatDate = useCallback((date: string) => {
-      const d = new Date(date);
-      return d.toLocaleDateString("en-US", {
-        weekday: "short",
-        month: "short",
-        day: "numeric",
-      });
-    }, []);
-
-    const groupItemsByDate = useCallback(
-      (items: 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(),
-          ),
-        );
-      },
-      [formatDate],
-    );
-
-    const handleImageError = useCallback(
-      (url: string) => {
-        failedImageUrls.add(url);
-      },
-      [failedImageUrls],
-    );
-
-    const getImageUrl = useCallback(
-      (path: string | undefined | null) => {
-        if (!path) return null;
-        const normalizedPath = path.startsWith("/") ? path : `/${path}`;
-        const url = `${cdnOrigin}${normalizedPath}`;
-        return failedImageUrls.has(url) ? null : url;
-      },
-      [cdnOrigin, failedImageUrls],
-    );
-
-    useEffect(() => {
-      const 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 || "Image Generation",
-              thumbnail: getImageUrl(item.public_bucket_path),
-              fullImage: getImageUrl(item.public_bucket_path),
-              createdAt: item.created_at,
-            }));
-            setGroupedItems(groupItemsByDate(newItems));
-          }
-        } catch (error) {
-          console.error("Failed to fetch library items:", error);
-        }
-        setLoading(false);
-      };
-
-      if (isOpen) {
-        loadItems();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeTab, isOpen]);
-
-    // useEffect(() => {
-    //   console.log("LibraryModal render caused by:", {
-    //     isOpen,
-    //     activeTab,
-    //     selectedItemIds,
-    //   });
-    // }, [isOpen, activeTab, selectedItemIds]);
-
-    const handleItemClick = useCallback(
-      (item: LibraryItem) => {
-        if (mode === "select" && onSelectItem) {
-          onSelectItem(item.id);
-        } else {
-          setLightboxImage(item);
-          setIsLightboxVisible(true);
-        }
-      },
-      [mode, onSelectItem],
-    );
-
-    const handleCloseLightbox = useCallback(() => {
-      setIsLightboxVisible(false);
-      // Wait for animation to complete before removing the image
-      setTimeout(() => setLightboxImage(null), 300);
-    }, []);
-
-    const handleDeselectAll = useCallback(() => {
-      selectedItemIds.forEach((id) => onSelectItem?.(id));
-    }, [selectedItemIds, onSelectItem]);
-
-    const handleUseSelected = useCallback(() => {
-      const selectedItems = Object.values(groupedItems)
-        .flat()
-        .filter((item) => selectedItemIds.includes(item.id));
-      onUseSelected?.(selectedItems);
-    }, [groupedItems, selectedItemIds, onUseSelected]);
-
-    return (
-      <>
-        <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>
-
-            <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 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>
-                        ))}
-                      </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>
-
-        <LightboxModal
-          isOpen={isLightboxVisible}
-          onClose={handleCloseLightbox}
-          imageUrl={imageUrl}
-          imageAlt={lightboxImage?.label || ""}
-          onImageError={() => imageUrl && handleImageError(imageUrl)}
-          title={lightboxImage?.label}
-          createdAt={lightboxImage?.createdAt}
-          downloadUrl={imageUrl}
-        />
-      </>
-    );
-  },
-);
-
-LibraryModal.displayName = "LibraryModal";

frontend/apps/editor2d/src/GalleryRootComponent/LibraryModalApi.ts

@@ -1,26 +0,0 @@
-import { FilterEngineCategories, FilterMediaClasses, FilterMediaType } from "~/Classes/ApiManager/enums/QueryFilters";
-import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
-
-interface ListUserMediaQuery {
-  include_user_uploads?: boolean;
-  filter_media_classes?: FilterMediaClasses[];
-  filter_media_type?: FilterMediaType[];
-  filter_engine_categories?: FilterEngineCategories[];
-  page?: number;
-  limit?: number;
-}
-
-export class LibraryModalApi extends MediaFilesApi {
-  constructor() {
-    super();
-  }
-
-  public async listUserMediaFiles(query: ListUserMediaQuery) {
-    return await this.ListUserMediaFiles({
-      ...query,
-      filter_media_classes: query.filter_media_classes,
-      filter_media_type: query.filter_media_type,
-      filter_engine_categories: query.filter_engine_categories,
-    });
-  }
-}

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

@@ -41,9 +41,9 @@ export const ToolbarTopLeft = () => {
       )}
     >
       <img
-        src="/brand/mira-logo.png"
+        src="/brand/artcraft-logo.png"
         alt="logo"
-        className="h-[30px] select-none pb-1"
+        className="h-[28px] select-none"
       />
 
       <TabSelector

frontend/apps/editor3d/app/components/reusable/Button/Button.tsx

@@ -45,7 +45,7 @@ export const Button = ({
   );
 
   const className = twMerge(
-    "text-sm font-medium rounded-lg px-3 py-2 border border-[#363636] shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150 flex gap-2 items-center justify-center",
+    "text-sm font-medium rounded-lg px-3 py-2 border border-transparent shadow-sm focus-visible:outline focus-visible:outline-0 focus-visible:outline-offset-0 transition-all duration-150 flex gap-2 items-center justify-center",
     getVariantClassNames(propsVariant),
     propsClassName,
     disabledClass,

frontend/apps/editor3d/app/components/reusable/Tooltip.tsx

@@ -137,7 +137,7 @@ export const Tooltip = ({
             transitionTimingFunction: "ease-out",
           }}
           className={twMerge(
-            "pointer-events-none absolute z-10 w-max rounded-lg bg-[#5F5F68] px-2.5 py-1.5 text-sm font-medium text-white shadow-xl",
+            "pointer-events-none absolute z-10 w-max rounded-lg bg-[#5F5F68] px-2.5 py-1.5 text-[13px] font-medium text-white shadow-xl",
             className ? className : "",
           )}
         >

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

@@ -30,7 +30,7 @@ export const TopBar = ({ pageName }: Props) => {
       <header className="fixed left-0 top-0 z-[60] w-full border-b border-white/5 bg-ui-background">
         <nav
           className="mx-auto grid h-[56px] w-screen grid-cols-3 items-center justify-between px-3"
-          aria-label="Global"
+          aria-label="navigation"
         >
           <div className="flex gap-4">
             <a href="/">
@@ -52,7 +52,7 @@ export const TopBar = ({ pageName }: Props) => {
             <SceneTitleInput pageName={pageName} />
           </div>
 
-          <div className="flex justify-end gap-5">
+          <div className="flex justify-end gap-3.5">
             <div className="flex gap-2">
               <Button
                 variant="secondary"

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

@@ -17,7 +17,11 @@ import { SceneManager, SceneObject } from "./scene_manager_api";
 import { FreeCam } from "./free_cam";
 import Stats from "three/examples/jsm/libs/stats.module.js";
 import { FKHelper } from "./KinHelpers/FKHelper";
-import { selectedMode } from "../signals/selectedMode";
+import {
+  selectedMode,
+  poseMode,
+  showPoseControls,
+} from "../signals/selectedMode";
 
 export enum KinMode {
   FK,
@@ -122,6 +126,10 @@ export class MouseControls {
       scene: this.scene,
       onDragChange: this.onFKControlsDragging.bind(this),
     });
+
+    // Expose handlePoseModeChange to window
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).__mouseControls = this;
   }
 
   onFKControlsDragging(dragging: boolean) {
@@ -185,7 +193,11 @@ export class MouseControls {
     this.setSelected(this.selected);
     this.publishSelect();
 
-    // this.editor.update_properties()
+    if (currentObject.userData.isCharacter) {
+      showPoseControls.value = true;
+    }
+
+    // Normal selection behavior
     if (currentObject.userData["locked"] !== true && this.control) {
       this.scene.add(this.control);
       this.control.attach(currentObject);
@@ -235,6 +247,9 @@ export class MouseControls {
       this.fkHelper.clear();
       this.kinMode = KinMode.NONE;
       this.reattachTransformControls();
+      if (poseMode.value === "pose") {
+        poseMode.value = "select";
+      }
       console.log("FK mode off");
       return;
     }
@@ -255,6 +270,9 @@ export class MouseControls {
     this.hideTransformControls();
     this.kinMode = KinMode.FK;
     this.fkHelper.setTarget(this.selected[0]);
+    if (poseMode.value === "select") {
+      poseMode.value = "pose";
+    }
     console.log("FK mode on");
     return;
   }
@@ -305,30 +323,20 @@ export class MouseControls {
 
     if ((event.ctrlKey || event.metaKey) && !this.isProcessing) {
       if (event.key === "Z" || event.key === "z") {
-        if (event.shiftKey) {
-          // redo
-          this.isProcessing = true;
-          await this.sceneManager?.redo();
-          this.isProcessing = false;
-        } else {
-          // undo
-          this.isProcessing = true;
-          await this.sceneManager?.undo();
-          this.isProcessing = false;
-        }
-        return;
+        // redo
+        this.isProcessing = true;
+        await this.sceneManager?.redo();
+        this.isProcessing = false;
       } else if (event.key === "c") {
         // redo
         this.isProcessing = true;
         await this.sceneManager?.copy();
         this.isProcessing = false;
-        return;
       } else if (event.key === "v") {
         // redo
         this.isProcessing = true;
         await this.sceneManager?.paste();
         this.isProcessing = false;
-        return;
       } else if (event.key === "0") {
         // Stats Menu
         this.enable_stats();
@@ -351,6 +359,17 @@ export class MouseControls {
     } else {
       this.cameraViewControls.movementSpeed = 1.15;
     }
+
+    if (event.key === "Escape") {
+      if (poseMode.value === "pose") {
+        this.toggleFKMode();
+        return;
+      } else if (this.selected && this.selected.length > 0) {
+        this.removeTransformControls();
+        hideObjectPanel();
+        showPoseControls.value = false;
+      }
+    }
   }
 
   // Sets new mouse location usually used in raycasts.
@@ -454,7 +473,8 @@ export class MouseControls {
       this.selected = [];
       this.setSelected(this.selected);
       this.removeTransformControls();
-      //hideObjectPanel();
+      hideObjectPanel();
+      showPoseControls.value = false;
     }
 
     if (this.sceneManager) {

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

@@ -1,18 +1,16 @@
 import React, { useEffect } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
-import { LoadingDots, Toaster, TopBar } from "~/components";
+import { LoadingDots, TopBar } from "~/components";
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject";
 import { PreviewEngineCamera } from "./comps/PreviewEngineCamera";
 import { PreviewFrameImage } from "./comps/PreviewFrameImage";
 import { pageHeight, pageWidth } from "~/signals";
-
+import { PoseModeSelector } from "./comps/PoseModeSelector";
 import {
   timelineHeight,
   sidePanelWidth,
-  sidePanelVisible,
-  dndSidePanelWidth,
   dndTimelineHeight,
   editorLoader,
   cameraAspectRatio,
@@ -24,12 +22,13 @@ import { Outliner } from "./comps/Outliner";
 import { CameraAspectRatio } from "./enums";
 import { PromptBox } from "./comps/PromptBox";
 import { OnboardingHelper } from "./comps/OnboardingHelper";
-import { focalLengthDragging } from "./signals/camera";
 import { FocalLengthDisplay } from "./comps/FocalLengthDisplay/FocalLengthDisplay";
+// import { api } from "@storyteller/api";
+// import { AnalyticsApi } from "@storyteller/api";
 
 export const PageEditor = () => {
   useSignals();
-
+  //console.log(api());
   //To prevent the click event from propagating to the canvas: TODO: HANDLE THIS BETTER?
   const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -43,13 +42,6 @@ export const PageEditor = () => {
     };
   }, []);
 
-  const dndWidth =
-    dndSidePanelWidth.value > -1
-      ? dndSidePanelWidth.value
-      : sidePanelWidth.value;
-  const width = sidePanelVisible.value
-    ? pageWidth.value - dndWidth - 84
-    : pageWidth.value - 84;
   const height =
     dndTimelineHeight.value > -1
       ? pageHeight.value - dndTimelineHeight.value - 56
@@ -98,7 +90,6 @@ export const PageEditor = () => {
         >
           <div className="relative w-full overflow-hidden bg-transparent">
             <SceneContainer>
-              <Toaster />
               <EditorCanvas />
               <PreviewFrameImage />
             </SceneContainer>
@@ -106,6 +97,9 @@ export const PageEditor = () => {
             {/* Focal Length Display */}
             <FocalLengthDisplay />
 
+            {/* Pose Mode Selector */}
+            <PoseModeSelector />
+
             {/* Top controls */}
             <div
               className="absolute left-0 top-0 w-full"

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

@@ -6,9 +6,8 @@ import { useBackgroundLoadingMedia } from "~/hooks/useBackgroundLoadingMedia";
 import { useQueueHandler } from "./hooks/useQueueHandler";
 import { ErrorDialog, LoadingDots } from "~/components";
 import { GenerateModals } from "~/pages/PageEnigma/comps/GenerateModals/GenerateModals";
-
+import { Toaster } from "@storyteller/ui-toaster";
 import { EditorLoadingBar } from "./comps/EditorLoadingBar";
-
 import { Wizard } from "~/pages/PageEnigma/Wizard/Wizard";
 import { useSignals } from "@preact/signals-react/runtime";
 import { useEffect, useState } from "react";
@@ -16,6 +15,13 @@ import * as gpu from "detect-gpu";
 import { UsersApi } from "~/Classes/ApiManager";
 import { PageEnigmaComponent } from "~/pages/PageEnigma/PageEnigmaComponent";
 import { TurnOnGpu } from "~/pages/PageEnigma/TurnOnGpu";
+import { PrecisionSelector } from "./comps/PrecisionSelector/PrecisionSelector";
+import {
+  precisionSelectedValue,
+  precisionSelectorMenuCoords,
+  precisionSelectorValues,
+  showPrecisionSelector,
+} from "./signals/precisionSelectorMenu";
 
 export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   useSignals();
@@ -71,7 +77,7 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
         case "apple gpu (Apple GPU)":
           // TODO(bt,2025-04-08): We may want to disable this heuristic.
           // We're getting lack of hardware acceleration using Tauri on Mac and Linux.
-          isValid = true; 
+          isValid = true;
           break;
         default:
           break;
@@ -93,11 +99,18 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
       <EngineProvider sceneToken={sceneToken}>
         <PageEnigmaComponent />
         <DragComponent />
+        <PrecisionSelector
+          showSignal={showPrecisionSelector}
+          coordSignal={precisionSelectorMenuCoords}
+          valuesSignal={precisionSelectorValues}
+          selectedValueSignal={precisionSelectedValue}
+        />
         <GenerateModals />
         <ErrorDialog />
         <Wizard />
       </EngineProvider>
       <EditorLoadingBar />
+      <Toaster offsetTop={70} offsetRight={12} />
     </TrackProvider>
   );
 };

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

@@ -22,6 +22,7 @@ import { sanitize } from "./utils/sanitize";
 import { objectMismatch } from "~/pages/PageEnigma/comps/ControlPanelSceneObject/utils/objectMismatch";
 import { XYZ } from "~/pages/PageEnigma/datastructures/common";
 import { pageHeight } from "~/signals";
+import { DraggablePrecisionMutator } from "./DraggablePrecisionMutator";
 
 // TODO this will be useful later to fix the bug on leading zeros
 // const formatNumber = (input: string): number => {
@@ -147,6 +148,15 @@ export const ControlPanelSceneObject = () => {
     setLocalRotation(xyz);
   };
 
+  const handleUniformScaleChange = (scale: number) => {
+    const updatedScaleValues: Record<string, string> = {};
+    updatedScaleValues.x = (parseFloat(localScale.x) + scale).toString();
+    updatedScaleValues.y = (parseFloat(localScale.y) + scale).toString();
+    updatedScaleValues.z = (parseFloat(localScale.z) + scale).toString();
+
+    handleScaleChange(updatedScaleValues);
+  }
+
   const handleScaleChange = (xyz: Record<string, string>) => {
     if (isInvalid(xyz)) {
       setLocalScale(xyz);
@@ -255,7 +265,9 @@ export const ControlPanelSceneObject = () => {
         </div>
 
         <div className="mb-1 flex flex-col gap-1">
-          <H5>Scale</H5>
+          <DraggablePrecisionMutator onChange={handleUniformScaleChange}>
+            <h5>Scale</h5>
+          </DraggablePrecisionMutator>
           <InputVector
             x={localScale.x.toString()}
             y={localScale.y.toString()}

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

@@ -0,0 +1,101 @@
+import { useCallback, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import { precisionSelectedValue, precisionSelectorMenuCoords, precisionSelectorValues, showPrecisionSelector } from "../../signals/precisionSelectorMenu";
+
+const DEFAULT_PRECISIONS = [
+  10,
+  1,
+  0.1,
+  0.01,
+  0.001
+]
+
+export const DraggablePrecisionMutator = ({
+  precisions = DEFAULT_PRECISIONS,
+  className = "",
+  initialValue = 0,
+  onChange = () => { },
+  onCommit = () => { },
+  children
+}: {
+  precisions?: number[],
+  className?: string,
+  initialValue?: number,
+  onChange?: (value: number) => void,
+  onCommit?: (value: number) => void,
+  children?: React.ReactNode
+}) => {
+  const classes = twMerge(["cursor-ew-resize", className]);
+  const divRef = useRef<HTMLDivElement>(null);
+
+  const isDraggingRef = useRef(false);
+  const dragStartCoordsRef = useRef<{ x: number, y: number } | null>(null);
+  const localAdjustedValueRef = useRef(initialValue);
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    // Ignore mouse movement if we're not even dragging
+    // or if the menu is still open (we're selecting the precision)
+    if (!isDraggingRef.current || showPrecisionSelector.value) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    // Record the initial drag coordinates if they haven't been set yet
+    if (!dragStartCoordsRef.current) {
+      dragStartCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      return;
+    }
+
+    // Check how far the mouse has moved, and calculate the updated change
+    const distX = event.x - dragStartCoordsRef.current.x;
+    const scaledDistX = distX / 10;
+    const scaledPrecision = Math.round(scaledDistX) * precisionSelectedValue.value;
+    localAdjustedValueRef.current = initialValue + scaledPrecision;
+
+    // Update the listeners
+    onChange(localAdjustedValueRef.current);
+  }, [initialValue, onChange]);
+
+  const handleMouseUp = useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+    showPrecisionSelector.value = false;
+    isDraggingRef.current = false;
+    dragStartCoordsRef.current = null;
+
+    // clean up the mouse listeners
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+
+    // Call back the commit listener
+    onCommit(localAdjustedValueRef.current);
+  }, [handleMouseMove, onCommit]);
+
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
+    if (event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    precisionSelectorMenuCoords.value = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    precisionSelectorValues.value = precisions;
+    showPrecisionSelector.value = true;
+    isDraggingRef.current = true;
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [handleMouseMove, handleMouseUp, precisions]);
+
+  return (
+    <div className={classes} ref={divRef} onMouseDown={handleMouseDown}>
+      {children}
+    </div>
+  )
+}

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

@@ -15,7 +15,7 @@ export const FocalLengthDisplay = () => {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="absolute left-1/2 top-16 -translate-x-1/2 transform">
+      <div className="absolute left-1/2 top-16 z-10 -translate-x-1/2 transform">
         <div className="glass rounded-xl px-5 py-2.5 text-center text-2xl font-bold text-white">
           {focalLengthDragging.value.focalLength}mm
         </div>

frontend/apps/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx

@@ -4,11 +4,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverMenu } from "~/components/reusable/Popover/Popover";
 import { CompletedCard } from "./CompletedCard";
 import { InProgressCard } from "./InProgressCard";
-import { H3, P, Tooltip } from "~/components";
-import { activeImageGenerationJobs, toasts, userMovies } from "~/signals";
-import { useEffect, useState } from "react";
+import { H3, Tooltip } from "~/components";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { JobsApi } from "~/Classes/ApiManager/JobsApi";
-import { toast } from "sonner";
+import { toast } from "@storyteller/ui-toaster";
 import { ActiveJob } from "~/pages/PageEnigma/models";
 // TODO ensure we de-dupe all this extra code.
 interface CompletedItem {
@@ -60,26 +59,49 @@ interface CompletedItem {
 export function Activity() {
   useSignals();
   const [completedItems, setCompletedItems] = useState<CompletedItem[]>([]);
-  const [loading, setLoading] = useState(true);
   const [jobs, setJobs] = useState<ActiveJob[]>([]);
+  const processedJobs = useRef(new Set<string>());
+  const isFirstLoad = useRef(true);
+  const toastTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Debounced toast function
+  const showToast = useCallback((items: CompletedItem[]) => {
+    if (toastTimeoutRef.current) {
+      clearTimeout(toastTimeoutRef.current);
+    }
+
+    toastTimeoutRef.current = setTimeout(() => {
+      const count = items.length;
+      toast.success(
+        count === 1
+          ? `${items[0].maybe_title} completed successfully`
+          : `${count} images completed successfully`,
+      );
+      toastTimeoutRef.current = null;
+    }, 100); // Small delay to catch potential double calls
+  }, []);
 
   useEffect(() => {
-    const pollData = async () => {
-      const fetchJobs = async () => {
-        try {
-          const jobsApi = new JobsApi();
-          const jobsResponse = await jobsApi.ListRecentJobs();
+    let mounted = true;
 
-          if (jobsResponse.success && jobsResponse.data) {
-            // Process active jobs
-            const activeJobs = jobsResponse.data
-              .filter((job) => {
-                const status = job.status?.status?.toLowerCase();
-                return (
-                  status && status !== "complete_success" && status !== "failed"
-                );
-              })
-              .map((job) => ({
+    async function fetchJobs() {
+      try {
+        const jobsApi = new JobsApi();
+        const response = await jobsApi.ListRecentJobs();
+
+        if (!mounted || !response.success || !response.data) return;
+
+        // Handle active jobs
+        const activeJobs = response.data
+          .filter((job) => {
+            const status = job.status?.status?.toLowerCase();
+            return (
+              status && status !== "complete_success" && status !== "failed"
+            );
+          })
+          .map(
+            (job) =>
+              ({
                 job_token: job.job_token,
                 request: {
                   maybe_model_title:
@@ -89,79 +111,78 @@ export function Activity() {
                   status: job.status?.status?.toUpperCase() || "",
                   progress_percentage: job.status?.progress_percentage || 0,
                 },
-              }));
-
-            // Process completed items
-            // Get completed items and filter out any that are already in our list
-            const successfulJobs = jobsResponse.data.filter(
-              (job) => job.status?.status?.toLowerCase() === "complete_success",
-            );
-
-            // Create a set of existing tokens for faster lookup
-            const existingTokens = new Set(
-              completedItems.map((item) => item.token),
-            );
-
-            // Filter out jobs we already have in our list
-            const newCompletedItems = successfulJobs
-              .filter((job) => !existingTokens.has(job.job_token))
-              .map((job) => ({
-                token: job.job_token,
-                maybe_title:
-                  job.request?.maybe_model_title || "Image Generation",
-                public_bucket_path:
-                  job.maybe_result?.maybe_public_bucket_media_path || "",
+                created_at: job.created_at || new Date().toISOString(),
                 updated_at: job.updated_at || new Date().toISOString(),
-              }));
+                maybe_result: job.maybe_result || null,
+              }) as ActiveJob,
+          );
 
-            // Show toast notification for newly completed items
-            if (newCompletedItems.length > 0) {
-              const count = newCompletedItems.length;
-              const message =
-                count === 1
-                  ? `${newCompletedItems[0].maybe_title} completed successfully`
-                  : `${count} images completed successfully`;
-              toast.success(message);
-            }
+        // Handle completed jobs
+        const newlyCompleted = response.data.filter(
+          (job) =>
+            job.status?.status?.toLowerCase() === "complete_success" &&
+            !processedJobs.current.has(job.job_token),
+        );
 
-            // Update completed items with a maximum limit of 50 items
-            setCompletedItems((prev) => {
-              const combined = [...newCompletedItems, ...prev];
-              // Remove duplicates based on token
-              const uniqueItems = Array.from(
-                new Map(combined.map((item) => [item.token, item])).values(),
-              );
-              // Sort by updated_at in descending order and limit to 50 items
-              return uniqueItems
-                .sort(
-                  (a, b) =>
-                    new Date(b.updated_at).getTime() -
-                    new Date(a.updated_at).getTime(),
-                )
-                .slice(0, 50);
-            });
-            setJobs(activeJobs as ActiveJob[]);
-            setLoading(false);
+        if (newlyCompleted.length > 0) {
+          // Add to processed set
+          newlyCompleted.forEach((job) =>
+            processedJobs.current.add(job.job_token),
+          );
+
+          // Create completed items
+          const newItems = newlyCompleted.map((job) => ({
+            token: job.job_token,
+            maybe_title: job.request?.maybe_model_title || "Image Generation",
+            public_bucket_path:
+              job.maybe_result?.maybe_public_bucket_media_path || "",
+            updated_at: job.updated_at || new Date().toISOString(),
+          }));
+
+          // Show toast only if not first load
+          if (!isFirstLoad.current) {
+            showToast(newItems);
           }
-        } catch (error) {
-          toast.error("Error Fetching Recent Jobs");
-          console.error("Failed to fetch recent jobs:", error);
+
+          // Update state
+          setCompletedItems((prev) => {
+            const combined = [...newItems, ...prev];
+            return combined
+              .filter(
+                (item, index, self) =>
+                  index === self.findIndex((t) => t.token === item.token),
+              )
+              .sort(
+                (a, b) =>
+                  new Date(b.updated_at).getTime() -
+                  new Date(a.updated_at).getTime(),
+              )
+              .slice(0, 50);
+          });
         }
-      };
-      await fetchJobs();
+
+        setJobs(activeJobs);
+        isFirstLoad.current = false;
+      } catch (error) {
+        console.error("Failed to fetch jobs:", error);
+      }
+    }
+
+    // Initial fetch
+    fetchJobs();
+
+    // Set up polling
+    const interval = setInterval(fetchJobs, 5000);
+
+    // Cleanup
+    return () => {
+      mounted = false;
+      clearInterval(interval);
+      if (toastTimeoutRef.current) {
+        clearTimeout(toastTimeoutRef.current);
+      }
     };
-
-    // Initial load
-    // Initial call to pollData
-    pollData();
-    // Set up polling interval (every 5 seconds)
-    const interval = setInterval(async () => {
-      await pollData();
-    }, 5000);
-
-    return () => clearInterval(interval);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [showToast]);
 
   return (
     <Tooltip content="Activity" position="bottom" closeOnClick={true}>
@@ -173,20 +194,19 @@ export function Activity() {
         align="end"
         triggerIcon={
           <div>
-            {jobs && jobs.length > 0 ? (
+            {jobs.length > 0 ? (
               <FontAwesomeIcon icon={faSpinnerThird} className="animate-spin" />
             ) : (
               <FontAwesomeIcon icon={faBell} />
             )}
-            {jobs && jobs.length > 0 && (
-              <div className="bg-blue-500 absolute -right-1 -top-1 h-3 w-3 animate-pulse rounded-full" />
+            {jobs.length > 0 && (
+              <div className="absolute -right-1 -top-1 h-3 w-3 animate-pulse rounded-full bg-brand-primary-400" />
             )}
           </div>
         }
       >
         <div className="max-h-[480px] overflow-y-auto">
-          {/* In progress */}
-          {jobs && jobs.length > 0 && (
+          {jobs.length > 0 && (
             <div>
               {jobs.map((job) => (
                 <InProgressCard key={job.job_token} job={job} />
@@ -194,7 +214,7 @@ export function Activity() {
             </div>
           )}
 
-          {!userMovies.value && !activeImageGenerationJobs.value ? (
+          {isFirstLoad.current ? (
             <div className="flex h-48 w-full flex-col justify-center gap-4 p-4 text-center align-middle">
               <FontAwesomeIcon
                 icon={faSpinnerThird}
@@ -204,18 +224,12 @@ export function Activity() {
               />
               <H3 className="text-gray-300">Retrieving Activities</H3>
             </div>
-          ) : userMovies.value &&
-            userMovies.value.length === 0 &&
-            !activeImageGenerationJobs.value ? (
+          ) : jobs.length === 0 && completedItems.length === 0 ? (
             <div className="flex h-48 w-full flex-col justify-center gap-4 p-4 text-center align-middle">
-              <H3 className="text-gray-300">No activities yet</H3>
-              <P className="text-gray-400">
-                Try generating something new from the featured scenes
-              </P>
+              <h3 className="text-lg text-gray-300">No activities yet</h3>
             </div>
           ) : (
             <div>
-              {/* Completed */}
               <div className="flex flex-col">
                 {completedItems.map((item) => (
                   <CompletedCard key={item.token} job={item} />

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { poseMode, showPoseControls } from "../signals/selectedMode";
+import { Button, Tooltip } from "~/components";
+import {
+  faCheck,
+  faCheckDouble,
+  faPersonRunning,
+} from "@fortawesome/pro-solid-svg-icons";
+
+declare global {
+  interface Window {
+    __mouseControls?: {
+      toggleFKMode: () => void;
+    };
+  }
+}
+
+interface PoseModeSelectorProps {}
+
+export const PoseModeSelector: React.FC<PoseModeSelectorProps> = () => {
+  useSignals();
+
+  const handleModeChange = () => {
+    if (poseMode.value === "select") {
+      poseMode.value = "pose";
+    } else {
+      poseMode.value = "select";
+    }
+    window.__mouseControls?.toggleFKMode();
+  };
+
+  if (showPoseControls.value === false) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className="fixed left-1/2 top-32 flex -translate-x-1/2 transform items-center justify-center gap-2"
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <Tooltip
+          content={"Toggle pose mode (K)"}
+          position={"bottom"}
+          delay={300}
+          closeOnClick={true}
+        >
+          <>
+            {poseMode.value === "select" ? (
+              <Button
+                icon={faPersonRunning}
+                onClick={handleModeChange}
+                className="rounded-xl shadow-xl outline-none focus-visible:outline-none"
+              >
+                Enter Pose Mode
+              </Button>
+            ) : (
+              <Button
+                icon={faCheck}
+                onClick={handleModeChange}
+                className="rounded-xl outline-none  focus-visible:outline-none"
+              >
+                Done
+              </Button>
+            )}
+          </>
+        </Tooltip>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { Signal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
+
+export const PrecisionSelector = ({
+  showSignal,
+  coordSignal,
+  valuesSignal,
+  selectedValueSignal
+}: {
+  showSignal: Signal<boolean>,
+  coordSignal: Signal<{ x: number; y: number }>,
+  valuesSignal: Signal<number[]>
+  selectedValueSignal: Signal<number>
+}) => {
+  useSignals();
+
+  const handleMouseLeave = () => {
+    showSignal.value = false;
+  }
+
+  const handleMouseEnterItem = (scale: number) => {
+    selectedValueSignal.value = scale;
+    console.log("selectedValueSignal", selectedValueSignal.value);
+  }
+
+  return (
+    <div
+      className="fixed z-50 bg-red-600 -translate-x-1/2 -translate-y-1/2 flex-col gap-[1px] shadow-md bg-ui-divider border-ui-divider border-2 rounded-md overflow-clip"
+      style={{
+        top: coordSignal.value.y,
+        left: coordSignal.value.x,
+        display: showSignal.value ? "flex" : "none"
+      }}
+      onMouseLeave={handleMouseLeave}
+    >
+      {valuesSignal.value.map((scale, index) => (
+        <span onMouseEnter={() => handleMouseEnterItem(scale)} key={index}
+          className="flex bg-ui-panel text-sm justify-center align-middle justify-items-center px-2 hover:bg-ui-controls"
+        >{scale}</span>
+      ))}
+    </div>
+  )
+}

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

@@ -48,6 +48,7 @@ import {
   updateCamera,
   focalLengthDragging,
 } from "~/pages/PageEnigma/signals/camera";
+import { toast } from "@storyteller/ui-toaster";
 
 interface ReferenceImage {
   id: string;
@@ -430,7 +431,7 @@ export const PromptBox = () => {
           screenshot: snapshot.file,
           sceneMediaToken: "",
         });
-        
+
         console.log("useSystemPrompt", useSystemPrompt);
         await engineApi.enqueueImageGeneration({
           disableSystemPrompt: !useSystemPrompt,
@@ -451,6 +452,7 @@ export const PromptBox = () => {
         await new Promise((resolve) => setTimeout(resolve, 2000));
       } finally {
         setisEnqueueing(false);
+        toast.success("Image added to queue");
       }
     }
     setisEnqueueing(false);

frontend/apps/editor3d/app/pages/PageEnigma/signals/precisionSelectorMenu.ts

@@ -0,0 +1,6 @@
+import { Signal, signal } from "@preact/signals-react";
+
+export const showPrecisionSelector = signal(false);
+export const precisionSelectorMenuCoords = signal({ x: 0, y: 0 });
+export const precisionSelectorValues: Signal<number[]> = signal([]);
+export const precisionSelectedValue = signal(0);

frontend/apps/editor3d/app/pages/PageEnigma/signals/selectedMode.ts

@@ -1,3 +1,5 @@
 import { signal } from "@preact/signals-react";
 
 export const selectedMode = signal("move");
+export const showPoseControls = signal(false);
+export const poseMode = signal("select");

frontend/apps/editor3d/package.json

@@ -4,7 +4,14 @@
   "sideEffects": false,
   "type": "module",
   "nx": {
-    "name": "editor3d"
+    "name": "editor3d",
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   },
   "scripts": {
     "build": "remix vite:build",
@@ -21,7 +28,6 @@
     "test": "jest"
   },
   "dependencies": {
-    "@storyteller/api": "file:../../libs/api",
     "@awesome.me/kit-fde2be5eb0": "^1.0.7",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",

frontend/apps/editor3d/script/netlify_build.sh

@@ -2,8 +2,11 @@
 
 set -euxo pipefail 
 
+echo "Install packages"
+npm install
+
 echo "Build Editor 3D"
-nx build editor3d
+nx build editor3d --verbose
 
 echo "Change to project dir"
 pushd apps/editor3d/

frontend/apps/editor3d/tsconfig.json

@@ -1,34 +1,31 @@
 {
-  "include": [
-    "env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "netlify-edge-plugin.ts"
-  ],
+  "extends": "../../tsconfig.base.json",
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "netlify-edge-plugin.ts"],
   "compilerOptions": {
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "target": "ESNext",
     "strict": true,
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
     "paths": {
-      "~/*": [
-        "./app/*"
-      ]
+      "~/*": ["apps/editor3d/app/*"]
     },
     // Vite takes care of building everything, not tsc.
     "noEmit": true
-  }
+  },
+  "references": [
+    {
+      "path": "../../libs/login"
+    },
+    {
+      "path": "../../libs/components/toaster"
+    }
+  ]
 }

frontend/apps/editor3d/vite.config.ts

@@ -14,6 +14,15 @@ export default defineConfig({
   //    'kalidokit': `${path.resolve(__dirname, 'src')}/`,
   //  },
   //},
+  //resolve: {
+  //  alias: [
+  //    {
+  //      find: /@frontend\/login/,
+  //      //replacement: path.resolve(__dirname, 'node_modules', '@frontend', 'login'),
+  //      replacement: path.resolve(__dirname, '../', '../', 'libs', 'login'),
+  //    },
+  //  ],
+  //},
   //rollupOptions: {
   //  // make sure to externalize deps that shouldn't be bundled
   //  // into your library

frontend/clean_modules.sh

@@ -3,6 +3,7 @@
 set -euxo pipefail
 
 echo "Removing Node Modules..."
+npx nx reset
 rm -rf ./node_modules/
 rm -rf ./apps/editor2d/node_modules/
 rm -rf ./apps/editor3d/node_modules/

frontend/libs/api/src/index.ts

@@ -1 +1,17 @@
 export * from './lib/api.js';
+export * from "./lib/AnalyticsApi.js";
+export * from "./lib/BillingApi.js";
+export * from "./lib/CommentsApi.js";
+export * from "./lib/EngineApi.js";
+export * from "./lib/FeaturedItemsApi.js";
+export * from "./lib/JobsApi.js";
+export * from "./lib/MediaFilesApi.js";
+export * from "./lib/MediaUploadApi.js";
+export * from "./lib/MiscApi.js";
+export * from "./lib/ModerationApi.js";
+export * from "./lib/PromptsApi.js";
+export * from "./lib/TtsApi.js";
+export * from "./lib/UserBookmarksApi.js";
+export * from "./lib/UsersApi.js";
+export * from "./lib/VideoApi.js";
+export * from "./lib/WeightsApi.js";

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

@@ -0,0 +1,38 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+
+export class AnalyticsApi extends ApiManager {
+  public PostAnalytics({
+    maybeLastAction,
+    maybeLogToken,
+  }: {
+    maybeLastAction: string;
+    maybeLogToken: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/analytics/log_session`;
+
+    const body = {
+      maybe_last_action: maybeLastAction,
+      maybe_log_token: maybeLogToken,
+    };
+
+    return this.post<
+      {
+        maybe_last_action: string;
+        maybe_log_token: string;
+      },
+      {
+        success?: boolean;
+        log_token?: string;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.log_token,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,17 @@
+// import { GetCdnOrigin } from "~/api/GetCdnOrigin";
+// import environmentVariables from "./EnvironmentVariables";
+
+// export async function get_media_url(mediaId: string) {
+//   //This is for prod when we have the proper info on the url.
+//   const api_base_url = environmentVariables.values.BASE_API;
+//   const url = `${api_base_url}/v1/media_files/file/${mediaId}`;
+
+//   const response = await fetch(url);
+//   const json = await JSON.parse(await response.text());
+//   const bucketPath = json["media_file"]["public_bucket_path"];
+
+//   const media_api_base_url = GetCdnOrigin();
+
+//   const media_url = `${media_api_base_url}${bucketPath}`;
+//   return media_url;
+// }

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

@@ -0,0 +1,235 @@
+// import { bool } from "@techstark/opencv-js";
+import { API_TARGETS } from "./enums/Api.js";
+
+type NonNullableObject<T extends object> = NonNullable<T>;
+
+export interface ApiResponse<T, P = undefined> {
+  success: boolean;
+  errorMessage?: string;
+  data?: T;
+  pagination?: P;
+}
+
+export class ApiManager {
+  ApiTargets: Record<string, string> = {};
+
+  constructor() {
+    this.ApiTargets = {
+      BaseApi: API_TARGETS.BASE_API,
+      GoggleApi: API_TARGETS.GOOGLE_API,
+      FunnelApi: API_TARGETS.FUNNEL_API,
+      CdnApi: API_TARGETS.CDN_API,
+      GravatarApi: API_TARGETS.GRAVATAR_API,
+    };
+  }
+
+  public async fetch<B, T>(
+    endpoint: string,
+    {
+      method,
+      query,
+      body,
+    }: {
+      method: string;
+      query?: Record<string, string | boolean | number | undefined>;
+      body?: B;
+    },
+  ): Promise<T> {
+    const queryInString =
+      query &&
+      Object.entries(query).reduce(
+        (allOptions, [key, value]) => {
+          if (!value) {
+            return allOptions;
+          }
+          allOptions[key] = value.toString();
+          return allOptions;
+        },
+        {} as Record<string, string>,
+      );
+
+    const endpointWithQueries = queryInString
+      ? endpoint + "?" + new URLSearchParams(queryInString)
+      : endpoint;
+
+    const bodyInString = JSON.stringify(body);
+
+    const response = await fetch(endpointWithQueries, {
+      method,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: bodyInString,
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  public async fetchMultipartFormData<T>(
+    endpoint: string,
+    {
+      method,
+      body,
+    }: {
+      method: string;
+      body: FormData;
+    },
+  ): Promise<T> {
+    const response = await fetch(endpoint, {
+      method,
+      headers: {
+        Accept: "application/json",
+      },
+      credentials: "include",
+      body: body,
+    });
+    return response.json();
+  }
+
+  protected get<T>({
+    endpoint,
+    query,
+  }: {
+    endpoint: string;
+    query?: Record<string, string | boolean | number | undefined>;
+  }): Promise<T> {
+    return this.fetch<null, T>(endpoint, { method: "GET", query });
+  }
+
+  protected post<B, T>({
+    endpoint,
+    query,
+    body,
+  }: {
+    endpoint: string;
+    query?: Record<string, string | boolean | number | undefined>;
+    body?: B;
+  }): Promise<T> {
+    return this.fetch<B, T>(endpoint, {
+      method: "POST",
+      query,
+      body,
+    });
+  }
+
+  protected delete<B, T>({
+    endpoint,
+    query,
+    body,
+  }: {
+    endpoint: string;
+    query?: Record<string, string | boolean | number | undefined>;
+    body?: B;
+  }): Promise<T> {
+    return this.fetch<B, T>(endpoint, {
+      method: "DELETE",
+      query,
+      body,
+    });
+  }
+
+  protected async postFormVideo<T>({
+    endpoint,
+    formRecord,
+    uuid,
+    blob,
+    blobFileName,
+  }: {
+    endpoint: string;
+    formRecord: Record<string, string>;
+    uuid: string;
+    blob?: Blob | File;
+    blobFileName?: string;
+  }): Promise<T> {
+    const formData = new FormData();
+    formData.append("uuid_idempotency_token", uuid);
+    Object.entries(formRecord).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+
+    if (blob && blobFileName) {
+      formData.append("video", blob, blobFileName);
+    } else if (blob) {
+      formData.append("video", blob);
+    }
+
+    return this.fetchMultipartFormData<T>(endpoint, {
+      method: "POST",
+      body: formData,
+    });
+  }
+
+  protected async postForm<T>({
+    endpoint,
+    formRecord,
+    uuid,
+    blob,
+    blobFileName,
+  }: {
+    endpoint: string;
+    formRecord: Record<string, string>;
+    uuid: string;
+    blob?: Blob | File;
+    blobFileName?: string;
+  }): Promise<T> {
+    const formData = new FormData();
+    formData.append("uuid_idempotency_token", uuid);
+    Object.entries(formRecord).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+
+    if (blob && blobFileName) {
+      formData.append("file", blob, blobFileName);
+    } else if (blob) {
+      formData.append("file", blob);
+    }
+
+    return this.fetchMultipartFormData<T>(endpoint, {
+      method: "POST",
+      body: formData,
+    });
+  }
+
+  protected camelToSnakeCase(str: string) {
+    return str.replace(/([a-z0])([A-Z])/g, "$1_$2").toLowerCase();
+  }
+
+  protected parseQueryValues(
+    params: Record<string, string | string[] | boolean | number | undefined>,
+  ): Record<string, string> {
+    return Object.entries(params).reduce(
+      (allParams, [key, value]) => {
+        if (!value) {
+          return allParams;
+        }
+        const snakeKey = this.camelToSnakeCase(key);
+        if (Array.isArray(value)) {
+          return { ...allParams, [snakeKey]: value.join(",") };
+        }
+        return { ...allParams, [snakeKey]: value.toString() };
+      },
+      {} as Record<string, string>,
+    );
+  }
+
+  protected parseBodyValues<T extends object, B extends object>(
+    params: NonNullableObject<T>,
+  ): B {
+    return Object.entries(params).reduce((allParams, [key, value]) => {
+      if (!value) {
+        return allParams;
+      }
+      const snakeKey = this.camelToSnakeCase(key);
+      if (Array.isArray(value)) {
+        return { ...allParams, [snakeKey]: value };
+      }
+      return { ...allParams, [snakeKey]: value };
+    }, {} as B);
+  }
+}

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

@@ -0,0 +1,33 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { Subscription } from "./models/Billing.js";
+import { LoyaltyProgram } from "./enums/Billing.js";
+
+export class BillingApi extends ApiManager {
+  public async ListActiveSubscriptions(): Promise<
+    ApiResponse<{
+      active_subscriptions: Subscription[];
+      maybe_loyalty_program?: LoyaltyProgram;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/billing/active_subscriptions`;
+    return await this.get<{
+      success: boolean;
+      active_subscriptions?: Subscription[];
+      maybe_loyalty_program?: LoyaltyProgram;
+      error_message?: string;
+    }>({ endpoint: endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: {
+          active_subscriptions: response.active_subscriptions || [],
+          maybe_loyalty_program: response.maybe_loyalty_program,
+        },
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+}

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

@@ -0,0 +1,91 @@
+import { ApiManager, ApiResponse } from "../apis/ApiManager";
+
+export class CommentsApi extends ApiManager {
+  public CreateComment({
+    commentMarkdown,
+    entityToken,
+    entityType,
+    uuidIdempotencyToken,
+  }: {
+    commentMarkdown: string;
+    entityToken: string;
+    entityType: string;
+    uuidIdempotencyToken: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/new`;
+
+    const body = {
+      comment_markdown: commentMarkdown,
+      entity_token: entityToken,
+      entity_type: entityType,
+      uuid_idempotency_token: uuidIdempotencyToken,
+    };
+
+    return this.post<
+      {
+        comment_markdown: string;
+        entity_token: string;
+        entity_type: string;
+        uuid_idempotency_token: string;
+      },
+      {
+        success?: boolean;
+        comment_token?: string;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.comment_token,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public DeleteComment({
+    commentToken,
+  }: {
+    commentToken: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/delete/${commentToken}`;
+
+    return this.post<
+      { as_mod: boolean },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body: { as_mod: true } })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListCommentsByEntity({
+    entityType,
+    entityToken,
+  }: {
+    entityType: string;
+    entityToken: string;
+  }): Promise<ApiResponse<string[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/list/${entityType}/${entityToken}`;
+
+    return this.get<{
+      success: boolean;
+      comments: string[];
+    }>({ endpoint })
+      .then((response) => ({
+        success: true,
+        data: response.comments,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,213 @@
+import { ApiManager, ApiResponse } from "./ApiManager";
+
+export class EngineApi extends ApiManager {
+  public async ConvertTbxToGltf({
+    mediaFileToken,
+    uuidIdempotencyToken,
+  }: {
+    mediaFileToken: string;
+    uuidIdempotencyToken: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/conversion/enqueue_fbx_to_gltf`;
+
+    const body = {
+      media_file_token: mediaFileToken,
+      uuid_idempotency_token: uuidIdempotencyToken,
+    };
+
+    return this.post<
+      { media_file_token: string; uuid_idempotency_token: string },
+      { success?: boolean; inference_job_token?: string; BadInput?: string }
+    >({
+      endpoint,
+      body: body,
+    })
+      .then((response) => {
+        return {
+          success: response.success ?? false,
+          data: response.inference_job_token,
+          errorMessage: response.BadInput,
+        };
+      })
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async uploadSceneSnapshot({
+    screenshot,
+    sceneMediaToken,
+  }: {
+    screenshot: File; // base64 encoded PNG
+    sceneMediaToken?: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/scene_snapshot`;
+    const formData = new FormData();
+    formData.append("snapshot", screenshot); // Changed from "screenshot" to "snapshot" to match API spec
+    if (sceneMediaToken) {
+      formData.append("scene_media_token", sceneMediaToken);
+    }
+
+    // for now ...
+    const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
+    formData.append("uuid_idempotency_token", uuidIdempotencyToken); // Added uuid_idempotency_token
+
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+      },
+      credentials: "include",
+      body: formData,
+    });
+
+    const postResponse = await response.json();
+
+    console.log(postResponse);
+
+    let result: { success: boolean; data?: string; errorMessage?: string };
+
+    if (postResponse.success) {
+      result = {
+        success: true,
+        data: postResponse.snapshot_media_token,
+        errorMessage: undefined,
+      };
+    } else {
+      result = {
+        success: false,
+        errorMessage: postResponse.BadInput,
+      };
+    }
+
+    return result;
+  }
+
+  public async enqueueImageGeneration({
+    disableSystemPrompt,
+    prompt,
+    snapshotMediaToken,
+    additionalImages,
+  }: {
+    disableSystemPrompt: boolean;
+    prompt: string;
+    snapshotMediaToken: string;
+    additionalImages?: string[];
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/prompt`;
+    
+    const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
+    const body = {
+      uuid_idempotency_token: uuidIdempotencyToken,
+      disable_system_prompt: disableSystemPrompt,
+      prompt,
+      snapshot_media_token: snapshotMediaToken, // Changed from scene_media_token to snapshot_media_token
+      additional_images: additionalImages,
+    };
+
+    const postResponse = await this.post<
+      {
+        uuid_idempotency_token: string;
+        disable_system_prompt: boolean;
+        prompt: string;
+        snapshot_media_token: string;
+        additional_images?: string[];
+      },
+      { success?: boolean; job_token?: string; BadInput?: string }
+    >({
+      endpoint,
+      body,
+    });
+
+    // Check if the response is successful
+    const isSuccess = postResponse.success ?? false;
+
+    // Prepare the result object
+    const result = {
+      success: isSuccess,
+      data: isSuccess ? postResponse.job_token : undefined,
+      errorMessage: isSuccess ? undefined : postResponse.BadInput,
+    };
+
+    return result;
+  }
+
+  public async pollJobSession(jobToken: string): Promise<
+    ApiResponse<{
+      status: string;
+      result: {
+        generated_images?: string[];
+        error?: string;
+      };
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/jobs/session/${jobToken}`;
+
+    const response = await this.get<{
+      success?: boolean;
+      status?: string;
+      result?: {
+        generated_images?: string[];
+        error?: string;
+      };
+      BadInput?: string;
+    }>({
+      endpoint,
+    });
+
+    const success = response.success ?? false;
+    const status = response.status ?? "";
+    const result = response.result ?? {
+      generated_images: [],
+      error: undefined,
+    };
+    const errorMessage = response.BadInput;
+
+    return {
+      success,
+      data: { status, result },
+      errorMessage,
+    };
+  }
+
+  public async pollStudioSessionJobs(jobToken: string): Promise<
+    ApiResponse<{
+      status: string;
+      result: {
+        generated_images?: string[];
+        error?: string;
+      };
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/session_jobs/${jobToken}`;
+
+    const response = await this.get<{
+      success?: boolean;
+      status?: string;
+      result?: {
+        generated_images?: string[];
+        error?: string;
+      };
+      BadInput?: string;
+    }>({
+      endpoint,
+    });
+
+    const success = response.success ?? false;
+    const status = response.status ?? "";
+    const result = response.result ?? {
+      generated_images: [],
+      error: undefined,
+    };
+    const errorMessage = response.BadInput;
+
+    return {
+      success,
+      data: { status, result },
+      errorMessage,
+    };
+  }
+}

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

@@ -0,0 +1,96 @@
+import { ApiManager, ApiResponse } from "../apis/ApiManager";
+
+export class FeaturedItemsApi extends ApiManager {
+  public CreateFeaturedItem({
+    entityToken,
+    entityType,
+  }: {
+    entityToken: string;
+    entityType: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/create`;
+
+    const body = {
+      entity_token: entityToken,
+      entity_type: entityType,
+    };
+
+    return this.post<
+      {
+        entity_token: string;
+        entity_type: string;
+      },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public DeleteFeaturedItem({
+    entityToken,
+    entityType,
+  }: {
+    entityToken: string;
+    entityType: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/delete`;
+
+    const body = {
+      entity_token: entityToken,
+      entity_type: entityType,
+    };
+
+    return this.delete<
+      {
+        entity_token: string;
+        entity_type: string;
+      },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public CheckFeaturedItem({
+    entityType,
+    entityToken,
+  }: {
+    entityType: string;
+    entityToken: string;
+  }): Promise<ApiResponse<boolean>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/is_featured/${entityType}/${entityToken}`;
+
+    return this.post<
+      undefined,
+      {
+        success?: boolean;
+        is_featured?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.is_featured,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,93 @@
+// libs/api-client/src/JobsApi.ts
+import { ApiManager, ApiResponse } from "../../../api/src/lib/ApiManager.js";
+import { Job, JobPreview } from "./models/Job.js";
+import { JobState } from "./models/JobState.js";
+
+export class JobsApi extends ApiManager {
+  public GetPreviewStatusByJobToken({
+    token,
+  }: {
+    token: string;
+  }): Promise<ApiResponse<JobPreview>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/workflows/preview_status/${token}`;
+
+    return this.get<ApiResponse<JobPreview>>({ endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: response.data,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public GetJobByToken({
+    token,
+  }: {
+    token: string;
+  }): Promise<ApiResponse<JobState>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/jobs/job/${token}`;
+
+    return this.get<{
+      success: boolean;
+      state: JobState;
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: response.state,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListJobs(): Promise<ApiResponse<JobState[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/jobs/batch`;
+
+    return this.get<{
+      success: boolean;
+      job_states: JobState[];
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: response.job_states,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListRecentJobs(): Promise<ApiResponse<Job[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/jobs/session`;
+    
+    return this.get<{
+      success: boolean;
+      jobs: Job[];
+      error_reason?: string;
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: response.jobs,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public DeleteJobByToken(jobToken: string): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/jobs/job/${jobToken}`;
+
+    return this.delete<
+      undefined,
+      {
+        success: boolean;
+      }
+    >({ endpoint })
+      .then((response) => ({
+        success: response.success,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,364 @@
+import { MediaFile } from "./models/MediaFile.js";
+import { Pagination, PaginationInfinite } from "./models/Pagination.js";
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { Visibility } from "./enums/Visibility.js";
+
+import {
+  FilterEngineCategories,
+  FilterMediaClasses,
+  FilterMediaType,
+} from "./enums/QueryFilters.js";
+
+interface ListMediaQuery {
+  sort_ascending?: boolean;
+  page_size?: number;
+  cursor?: string;
+  cursor_is_reversed?: boolean;
+  filter_media_classes?: FilterMediaClasses[];
+  filter_media_type?: FilterMediaType[];
+  filter_engine_categories?: FilterEngineCategories[];
+}
+
+interface ListUserMediaQuery {
+  username: string;
+  sort_ascending?: boolean;
+  page_size?: number;
+  page_index?: number;
+  filter_media_classes?: FilterMediaClasses[];
+  filter_media_type?: FilterMediaType[];
+  filter_engine_categories?: FilterEngineCategories[];
+}
+
+interface SearchFeaturedMediaQuery {
+  search_term: string;
+  filter_media_classes?: FilterMediaClasses[];
+  filter_media_type?: FilterMediaType[];
+  filter_engine_categories?: FilterEngineCategories[];
+}
+
+export class MediaFilesApi extends ApiManager {
+  public async DeleteMediaFileByToken({
+    mediaFileToken,
+    asMod = true,
+    setDelete = true,
+  }: {
+    mediaFileToken: string;
+    asMod?: boolean;
+    setDelete?: boolean;
+  }): Promise<ApiResponse<MediaFile>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/file/${mediaFileToken}`;
+
+    const body = { as_mod: asMod, set_delete: setDelete };
+    return await this.delete<
+      {
+        as_mod: boolean;
+        set_delete: boolean;
+      },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async ListMediaFilesByTokens({
+    mediaTokens,
+  }: {
+    mediaTokens: string[];
+  }): Promise<ApiResponse<MediaFile[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/batch`;
+
+    return await this.get<{
+      success: boolean;
+      media_files: MediaFile[];
+      error_reason?: string;
+    }>({ endpoint, query: { tokens: mediaTokens.join(",") } })
+      .then((response) => ({
+        success: response.success,
+        data: response.media_files,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public async GetMediaFileByToken({
+    mediaFileToken,
+  }: {
+    mediaFileToken: string;
+  }): Promise<ApiResponse<MediaFile>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/file/${mediaFileToken}`;
+    return await this.get<{
+      success: boolean;
+      media_file: MediaFile;
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: response.media_file,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async ListMediaFiles(
+    query: ListMediaQuery,
+  ): Promise<ApiResponse<MediaFile[], PaginationInfinite>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/list`;
+    const queryWithStrings = {
+      ...query,
+      filter_media_classes: query.filter_media_classes
+        ? query.filter_media_classes.join(",")
+        : undefined,
+      filter_media_type: query.filter_media_type
+        ? query.filter_media_type.join(",")
+        : undefined,
+      filter_engine_categories: query.filter_engine_categories
+        ? query.filter_engine_categories.join(",")
+        : undefined,
+    };
+    return await this.get<{
+      success: boolean;
+      results: MediaFile[];
+      pagination?: PaginationInfinite;
+    }>({ endpoint, query: queryWithStrings })
+      .then((response) => ({
+        success: response.success,
+        data: response.results ?? [],
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async ListFeaturedMediaFiles(
+    query: ListMediaQuery,
+  ): Promise<ApiResponse<MediaFile[], PaginationInfinite>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/list_featured`;
+    const queryWithStrings = {
+      ...query,
+      filter_media_classes: query.filter_media_classes
+        ? query.filter_media_classes.join(",")
+        : undefined,
+      filter_media_type: query.filter_media_type
+        ? query.filter_media_type.join(",")
+        : undefined,
+      filter_engine_categories: query.filter_engine_categories
+        ? query.filter_engine_categories.join(",")
+        : undefined,
+    };
+    return await this.get<{
+      success: boolean;
+      results: MediaFile[];
+      pagination: PaginationInfinite;
+    }>({ endpoint, query: queryWithStrings })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async ListUserMediaFiles(
+    query: ListUserMediaQuery,
+  ): Promise<ApiResponse<MediaFile[], Pagination>> {
+    const userName = query.username;
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/list/user/${userName}`;
+    const queryWithStrings = {
+      ...query,
+      include_user_uploads: true,
+      filter_media_classes: query.filter_media_classes
+        ? query.filter_media_classes.join(",")
+        : undefined,
+      filter_media_type: query.filter_media_type
+        ? query.filter_media_type.join(",")
+        : undefined,
+      filter_engine_categories: query.filter_engine_categories
+        ? query.filter_engine_categories.join(",")
+        : undefined,
+    };
+    return await this.get<{
+      success: boolean;
+      results: MediaFile[];
+      pagination?: Pagination;
+    }>({ endpoint, query: queryWithStrings })
+      .then((response) => ({
+        success: response.success,
+        data: response.results ?? [],
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async SearchFeaturedMediaFiles(
+    query: SearchFeaturedMediaQuery,
+  ): Promise<ApiResponse<MediaFile[], Pagination>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/search_featured`;
+    const queryWithStrings = {
+      search_term: query.search_term,
+      filter_media_classes: query.filter_media_classes
+        ? query.filter_media_classes.join(",")
+        : undefined,
+      filter_media_type: query.filter_media_type
+        ? query.filter_media_type.join(",")
+        : undefined,
+      filter_engine_categories: query.filter_engine_categories
+        ? query.filter_engine_categories.join(",")
+        : undefined,
+    };
+    return await this.get<{
+      success: boolean;
+      results: MediaFile[];
+      pagination: Pagination;
+    }>({ endpoint, query: queryWithStrings })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => ({
+        success: false,
+        errorMessage: err.message,
+      }));
+  }
+
+  public async SearchUserMediaFiles(
+    query: SearchFeaturedMediaQuery,
+  ): Promise<ApiResponse<MediaFile[], Pagination>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/search_session`;
+    const queryWithStrings = {
+      search_term: query.search_term,
+      filter_media_classes: query.filter_media_classes
+        ? query.filter_media_classes.join(",")
+        : undefined,
+      filter_media_type: query.filter_media_type
+        ? query.filter_media_type.join(",")
+        : undefined,
+      filter_engine_categories: query.filter_engine_categories
+        ? query.filter_engine_categories.join(",")
+        : undefined,
+    };
+    return await this.get<{
+      success: boolean;
+      results: MediaFile[];
+      pagination: Pagination;
+    }>({ endpoint, query: queryWithStrings })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => ({
+        success: false,
+        errorMessage: err.message,
+      }));
+  }
+
+  public async RenameMediaFileByToken({
+    mediaToken,
+    name,
+  }: {
+    mediaToken: string;
+    name: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/rename/${mediaToken}`;
+    const body = { name };
+
+    return await this.post<
+      { name: string },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public async UpdateCoverImage({
+    mediaFileToken,
+    imageToken,
+  }: {
+    mediaFileToken: string;
+    imageToken: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/cover_image/${mediaFileToken}`;
+    return await this.post<
+      { cover_image_media_file_token: string },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body: { cover_image_media_file_token: imageToken } })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async UpdateVisibility({
+    mediaFileToken,
+    visibility,
+  }: {
+    mediaFileToken: string;
+    visibility: Visibility;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/visibility/${mediaFileToken}`;
+    return await this.post<
+      { creator_set_visibility: string },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body: { creator_set_visibility: visibility } })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+}

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

@@ -0,0 +1,341 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { FilterEngineCategories } from "./enums/QueryFilters.js";
+import { Visibility } from "./enums/Visibility.js";
+import { EIntermediateFile } from "./enums/EIntermediateFile.js";
+export class MediaUploadApi extends ApiManager {
+  private sessionToken = "";
+
+  private async getSessionTokenForUploadStudioShot() {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/session_token`;
+    return await this.get<{
+      maybe_signed_session: string;
+    }>({ endpoint })
+      .then((response) => {
+        return {
+          success: true,
+          data: response["maybe_signed_session"],
+        };
+      })
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async UploadStudioShot({
+    maybe_title,
+    uuid_idempotency_token,
+    blob,
+    fileName,
+    maybe_visibility,
+  }: {
+    maybe_title?: string;
+    uuid_idempotency_token: string;
+    blob: Blob | null;
+    fileName: string;
+    maybe_visibility?: Visibility;
+  }): Promise<ApiResponse<string>> {
+    // This function is a bit special it requires that
+    const endpoint = `${this.ApiTargets.uploadApi}/v1/media_files/upload/studio_shot`;
+
+    if (!this.sessionToken) {
+      console.log("Session Token");
+      const response = await this.getSessionTokenForUploadStudioShot();
+      if (response.success && response.data) {
+        this.sessionToken = response.data;
+        console.log(`Token ${this.sessionToken}`);
+      } else {
+        return {
+          success: false,
+          errorMessage: "Could not obtain session tokens.",
+        };
+      }
+    } else {
+      console.log(`Session Token: ${this.sessionToken}`);
+    }
+
+    const options: Record<string, string | number | undefined> = {
+      maybe_title,
+      maybe_frame_rate_fps: 60,
+      maybe_visibility: maybe_visibility?.toString(),
+    };
+
+    const formRecord = Object.entries(options).reduce(
+      (allOptions, [key, value]) => {
+        if (value === undefined) {
+          return allOptions;
+        }
+        return { ...allOptions, [key]: value.toString() };
+      },
+      {} as Record<string, string>,
+    );
+
+    const formData = new FormData();
+    formData.append("uuid_idempotency_token", uuid_idempotency_token);
+    Object.entries(formRecord).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+    if (blob && fileName) {
+      formData.append("file", blob, fileName);
+    } else if (blob) {
+      formData.append("file", blob);
+    }
+
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        Session: this.sessionToken,
+      },
+      credentials: "include",
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.success && result.media_file_token) {
+      return { success: true, data: result.media_file_token };
+    } else {
+      return { success: false, errorMessage: "Failed to Get Media Token" };
+    }
+  }
+
+  private async Upload({
+    endpoint,
+    uuid,
+    blob,
+    fileName,
+    options,
+  }: {
+    endpoint: string;
+    blob: Blob | File;
+    fileName: string;
+    uuid: string;
+    options: Record<string, string | number | undefined>;
+  }): Promise<ApiResponse<string>> {
+    const formRecord = Object.entries(options).reduce(
+      (allOptions, [key, value]) => {
+        if (value === undefined) {
+          return allOptions;
+        }
+        return { ...allOptions, [key]: value.toString() };
+      },
+      {} as Record<string, string>,
+    );
+
+    return await this.postForm<{
+      success: boolean;
+      media_file_token?: string;
+      BadInput?: string;
+    }>({ endpoint, formRecord, blob, blobFileName: fileName, uuid })
+      .then((response) => ({
+        success: Boolean(response.success ?? false),
+        data: response.media_file_token,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async UploadAudio({
+    blob,
+    fileName,
+    uuid,
+    maybe_title,
+    maybe_visibility = Visibility.Public,
+  }: {
+    blob: Blob;
+    fileName: string;
+    uuid: string;
+    maybe_title?: string | undefined;
+    maybe_visibility?: Visibility | undefined;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/audio`;
+    const options: Record<string, string | number | undefined> = {
+      maybe_title,
+      maybe_visibility: maybe_visibility?.toString(),
+    };
+    return this.Upload({ endpoint, blob, fileName, uuid, options });
+  }
+
+  public async UploadImage({
+    blob,
+    fileName,
+    uuid,
+    maybe_title,
+    maybe_visibility = Visibility.Public,
+    is_intermediate_system_file = EIntermediateFile.true
+  }: {
+    blob: Blob;
+    fileName: string;
+    uuid: string;
+    maybe_title?: string | undefined;
+    maybe_visibility?: Visibility | undefined;
+    is_intermediate_system_file?: EIntermediateFile;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/image`;
+    const options: Record<string, string | number | undefined> = {
+      is_intermediate_system_file: EIntermediateFile[is_intermediate_system_file],
+      maybe_title,
+      maybe_visibility: maybe_visibility?.toString(),
+    };
+    return this.Upload({ endpoint, blob, fileName, uuid, options });
+  }
+
+  public async UploadNewEngineAsset({
+    file,
+    fileName,
+    uuid,
+    engine_category,
+    maybe_animation_type,
+    maybe_duration_millis,
+    maybe_title,
+    maybe_visibility = Visibility.Public,
+  }: {
+    file: File;
+    fileName: string;
+    uuid: string;
+    engine_category: FilterEngineCategories;
+    maybe_animation_type?: string;
+    maybe_duration_millis?: number;
+    maybe_title?: string;
+    maybe_visibility?: Visibility;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/new_engine_asset`;
+    const options: Record<string, string | number | undefined> = {
+      engine_category,
+      maybe_title,
+      maybe_visibility: maybe_visibility?.toString(),
+      maybe_animation_type,
+      maybe_duration_millis,
+    };
+    return this.Upload({ endpoint, blob: file, fileName, uuid, options });
+  }
+
+  public async UploadNewScene({
+    blob,
+    fileName,
+    uuid,
+    maybe_title,
+    maybe_visibility = Visibility.Public,
+  }: {
+    blob: Blob;
+    fileName: string;
+    uuid: string;
+    maybe_title?: string;
+    maybe_visibility?: Visibility;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/new_scene`;
+    const options: Record<string, string | number | undefined> = {
+      maybe_title,
+      maybe_visibility: maybe_visibility?.toString(),
+    };
+    return this.Upload({ endpoint, blob, fileName, uuid, options });
+  }
+
+  public async UploadNewVideo({
+    blob,
+    fileName,
+    uuid,
+    maybe_title,
+    maybe_visibility = Visibility.Public,
+    maybe_style_name,
+    maybe_scene_source_media_file_token,
+  }: {
+    blob: Blob;
+    fileName: string;
+    uuid: string;
+    maybe_title?: string;
+    maybe_visibility?: Visibility;
+    maybe_style_name?: string;
+    maybe_scene_source_media_file_token?: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/new_video`;
+    const options: Record<string, string | number | undefined> = {
+      is_intermediate_system_file: "true",
+      maybe_title,
+      maybe_visibility: maybe_visibility?.toString(),
+      maybe_style_name,
+      maybe_scene_source_media_file_token,
+    };
+    return this.Upload({ endpoint, blob, fileName, uuid, options });
+  }
+
+  public async UploadPmx({
+    file,
+    fileName,
+    uuid,
+    engine_category,
+    maybe_animation_type,
+    maybe_duration_millis,
+    maybe_title,
+    maybe_visibility = Visibility.Public,
+  }: {
+    file: File;
+    fileName: string;
+    uuid: string;
+    engine_category?: string;
+    maybe_animation_type?: string;
+    maybe_duration_millis?: number;
+    maybe_title?: string;
+    maybe_visibility?: Visibility;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/pmx`;
+    const options: Record<string, string | number | undefined> = {
+      is_intermediate_system_file: "true",
+      engine_category,
+      maybe_animation_type,
+      maybe_duration_millis,
+      maybe_title,
+      maybe_visibility,
+    };
+    return this.Upload({ endpoint, blob: file, fileName, uuid, options });
+  }
+
+  public async UploadSavedScene({
+    blob,
+    fileName,
+    uuid,
+    mediaToken,
+  }: {
+    blob: Blob;
+    fileName: string;
+    uuid: string;
+    mediaToken: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/saved_scene/${mediaToken}`;
+    const options: Record<string, string | number | undefined> = {};
+    return this.Upload({ endpoint, blob, fileName, uuid, options });
+  }
+
+  // this is used to send the scene snapshot to the vst upload endpoint this creates a snapshot of the scene where in we can remix from the og.
+  public async UploadSceneSnapshotMediaFileForm({
+    blob,
+    uuid,
+    maybe_title, // title of the scene at the time
+    maybe_scene_source_media_file_token, // original token that started it all
+  }: {
+    blob: Blob;
+    uuid: string;
+    maybe_title: string;
+    maybe_scene_source_media_file_token: string | undefined;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/scene_snapshot`;
+
+    const options: Record<string, string | number | undefined> = {
+      maybe_title: maybe_title,
+      maybe_scene_source_media_file_token: maybe_scene_source_media_file_token,
+    };
+
+    const fileName = `${maybe_title}-${uuid}`;
+    return this.Upload({ endpoint, blob, fileName, uuid, options }); // token comes back and send it VST
+  }
+}
+
+

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

@@ -0,0 +1,26 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { StatusAlert } from "./models/StatusAlert.js";
+
+export class MiscApi extends ApiManager {
+  public GetStatusAlertCheck(): Promise<ApiResponse<StatusAlert>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/session`;
+    return this.get<{
+      success: boolean;
+      maybe_alert?: Omit<StatusAlert, "refresh_interval_millis">;
+      refresh_interval_millis: number;
+    }>({ endpoint: endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: {
+          ...response.maybe_alert,
+          refresh_interval_millis: response.refresh_interval_millis,
+        },
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.mesasge,
+        };
+      });
+  }
+}

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

@@ -0,0 +1,42 @@
+import { ApiManager, ApiResponse } from "../apis/ApiManager";
+
+export class ModerationApi extends ApiManager {
+  public async UpdateFeatureFlagsByToken({
+    usernameOrToken,
+    flags,
+  }: {
+    usernameOrToken: string;
+    flags: string[];
+  }): Promise<
+    ApiResponse<{
+      inference_job_token?: string;
+      inference_job_token_type?: string;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/moderation/user_feature_flags/${usernameOrToken}`;
+
+    const body = {
+      action: {
+        AddFlags: {
+          flags,
+        },
+      },
+    };
+
+    return this.post<
+      { action: { AddFlags: { flags: string[] } } },
+      { success?: boolean; BadInput?: string }
+    >({
+      endpoint,
+      body: body,
+    })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => ({
+        success: false,
+        errorMessage: err.message,
+      }));
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ApiManager, ApiResponse } from  "./ApiManager.js";
+import { Prompts } from "./models/Prompts.js";
+
+export class PromptsApi extends ApiManager {
+  public GetPromptsByToken({
+    token,
+  }: {
+    token: string;
+  }): Promise<ApiResponse<Prompts>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/prompts/${token}`;
+
+    return this.get<{
+      success: boolean;
+      prompt: Prompts;
+      error_reason?: string;
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: response.prompt,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,84 @@
+import { ApiManager } from "./ApiManager.js";
+import { v4 as uuidv4 } from "uuid";
+
+export interface Coordinates {
+  coordinates: [number, number];
+  include: boolean;
+}
+
+export interface ObjectData {
+  style: {
+    color: SegmentationColor;
+  };
+  object_id: number;
+  points: Coordinates[];
+}
+
+export type SegmentationColor = [number, number, number];
+
+export interface RequestFrame {
+  timestamp: number;
+  objects: ObjectData[];
+}
+export interface ResponseFrame {
+  b64_image_data: number;
+  idx: number;
+  timestamp: number;
+  objects: ObjectData[];
+  preview_image_url: string;
+}
+
+export interface SegmentationRequest {
+  session_id: string;
+  fps: number;
+  frames: RequestFrame[];
+  propagate: boolean;
+}
+
+export interface SegmentationResponse {
+  session_id: string;
+  fps: number;
+  masked_video_cdn_url: string;
+  frames: ResponseFrame[];
+  propagate: boolean;
+}
+
+export class SegmentationApi extends ApiManager {
+  // returns uuid
+  public async createSession(
+    blobVideo: File | Blob,
+  ): Promise<{ session_id: string }> {
+    const endpoint = `https://hax.storyteller.ai/segmentation/new_session`;
+    const id = uuidv4().toString();
+    return this.postFormVideo<{ session_id: "fix-mimetype" }>({
+      endpoint: endpoint,
+      formRecord: {
+        session_id: "fix-mimetype",
+      },
+      uuid: id,
+      blobFileName: id,
+      blob: blobVideo,
+    });
+  }
+
+  public addPointsToSession(
+    session_id: string,
+    fps: number,
+    frames: RequestFrame[],
+    propagate: boolean,
+  ): Promise<SegmentationResponse> {
+    const endpoint = `https://hax.storyteller.ai/segmentation/generate_masks`;
+
+    const segmentationRequest: SegmentationRequest = {
+      session_id: session_id,
+      fps: fps,
+      frames: frames,
+      propagate: propagate,
+    };
+
+    return this.post<SegmentationRequest, SegmentationResponse>({
+      endpoint: endpoint,
+      body: segmentationRequest,
+    });
+  }
+}

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

@@ -0,0 +1,64 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { GenerateTtsAudioErrorType } from "./enums/Tts.js";
+import { Visibility } from "./enums/Visibility.js";
+
+export interface GenerateTtsAudioRequest {
+  creator_set_visibility?: Visibility;
+  uuid_idempotency_token: string;
+  tts_model_token: string;
+  inference_text: string;
+  is_storyteller_demo?: boolean;
+}
+
+export interface GenerateTtsAudioResponse {
+  success?: boolean;
+  inference_job_token?: string;
+  inference_job_token_type?: string;
+  BadInput?: string;
+}
+
+export class TtsApi extends ApiManager {
+  public async GenerateTtsAudio(request: GenerateTtsAudioRequest): Promise<
+    ApiResponse<{
+      inference_job_token?: string;
+      inference_job_token_type?: string;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/tts/inference`;
+
+    const body = {
+      ...request,
+      ...(request.creator_set_visibility
+        ? {}
+        : { creator_set_visibility: Visibility.Public }),
+    };
+
+    return this.post<GenerateTtsAudioRequest, GenerateTtsAudioResponse>({
+      endpoint,
+      body: body,
+    })
+      .then((response) => {
+        if (!response.success) {
+          return {
+            success: false,
+            errorMessage: response.BadInput,
+            data: {},
+          };
+        }
+        return {
+          success: true,
+          data: {
+            inference_job_token: response.inference_job_token,
+            inference_job_token_type: response.inference_job_token_type,
+          },
+        };
+      })
+      .catch(() => {
+        return {
+          success: false,
+          errorMessage: GenerateTtsAudioErrorType.UnknownError,
+          data: {},
+        };
+      });
+  }
+}

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

@@ -0,0 +1,201 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import {
+  UserBookmarkBatch,
+  UserBookmarkByEntity,
+  UserBookmarkByUser,
+} from "./models/UserBookmark.js";
+import { Pagination } from "./models/Pagination.js";
+
+export enum ScopedEntityTypes {
+  USER = "user",
+  TTS_MODEL = "tts-model",
+  TTS_RESULT = "tts-result",
+  W2L_TEMPLATE = "w2l-template",
+  W2L_RESULT = "w2l-result",
+  MEDIA_FILE = "media_file",
+  MODEL_WEIGHT = "model_weight",
+  VOICE_CONVERSION_MODEL = "voice_conversion_model",
+  ZS_VOICE = "z_voice",
+}
+
+export enum ScopedWeightTypes {
+  HIFIGAN_TTl2 = "hifigan_tt2",
+  RVC_V2 = "rvc_v2",
+  SD_1_5 = "sd_1.5",
+  SDXL = "sdxl",
+  SO_VITS_SVC = "so_vits_svc",
+  TT2 = "tt2",
+  LORA = "loRA",
+  VALL_E = "vall_e",
+  COMFY_UI = "comfy_ui",
+}
+
+export enum ScopedMediaFileType {
+  IMAGE_GENERATION = "image_generation",
+  TEXT_TO_SPEECH = "text_to_speech",
+  VOCODER = "vocoder",
+  VOICE_CONVERSION = "voice_conversion",
+  WORKFLOW_CONFIG = "workflow_config",
+}
+
+interface ListUserBookmarksByUserRequest {
+  username: string;
+  sort_ascending?: boolean;
+  page_size?: number;
+  page_index?: number;
+  maybe_scoped_entity_type?: ScopedEntityTypes[];
+  maybe_scoped_weight_type?: ScopedWeightTypes[];
+  maybe_scoped_media_file_type?: ScopedMediaFileType[];
+}
+
+export class UserBookmarksApi extends ApiManager {
+  public CreateUserBookmark({
+    entityToken,
+    entityType,
+  }: {
+    entityToken: string;
+    entityType: string;
+  }): Promise<
+    ApiResponse<{
+      new_bookmark_count_for_entity?: number;
+      user_bookmark_token?: string;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_bookmarks/create`;
+    const body = {
+      entity_token: entityToken,
+      entity_type: entityType,
+    };
+
+    return this.post<
+      {
+        entity_token: string;
+        entity_type: string;
+      },
+      {
+        success?: boolean;
+        new_bookmark_count_for_entity?: number;
+        user_bookmark_token: string;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: {
+          new_bookmark_count_for_entity: response.new_bookmark_count_for_entity,
+          user_bookmark_token: response.user_bookmark_token,
+        },
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public DeleteUserBookmark({
+    entityToken,
+  }: {
+    entityToken: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_bookmarks/delete/${entityToken}`;
+
+    return this.delete<
+      { as_mod: boolean },
+      {
+        success?: boolean;
+        BadInput?: string;
+      }
+    >({ endpoint, body: { as_mod: true } })
+      .then((response) => ({
+        success: response.success ?? false,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListUserBookmarks(): Promise<ApiResponse<UserBookmarkBatch[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_bookmarks/batch`;
+
+    return this.get<{
+      success?: boolean;
+      bookmarks?: UserBookmarkBatch[];
+      BadInput?: string;
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.bookmarks,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListUserBookmarksByUser({
+    username,
+    sort_ascending,
+    page_size,
+    page_index,
+    maybe_scoped_entity_type,
+    maybe_scoped_weight_type,
+    maybe_scoped_media_file_type,
+  }: ListUserBookmarksByUserRequest): Promise<
+    ApiResponse<UserBookmarkByUser[], Pagination>
+  > {
+    const user = username;
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_bookmarks/list/${user}`;
+
+    const query = {
+      sort_ascending,
+      page_size,
+      page_index,
+      maybe_scoped_entity_type: maybe_scoped_entity_type
+        ? maybe_scoped_entity_type.join(",")
+        : undefined,
+      maybe_scoped_weight_type: maybe_scoped_weight_type
+        ? maybe_scoped_weight_type.join(",")
+        : undefined,
+      maybe_scoped_media_file_type: maybe_scoped_media_file_type
+        ? maybe_scoped_media_file_type.join(",")
+        : undefined,
+    };
+
+    return this.get<{
+      success?: boolean;
+      pagination?: Pagination;
+      results: UserBookmarkByUser[];
+    }>({ endpoint, query })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListUserBookmarksByEntity({
+    entityType,
+    entityToken,
+  }: {
+    entityType: string;
+    entityToken: string;
+  }): Promise<ApiResponse<UserBookmarkByEntity[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_bookmarks/list/${entityType}/${entityToken}`;
+
+    return this.get<{
+      success: boolean;
+      user_bookmarks: UserBookmarkByEntity[];
+    }>({ endpoint })
+      .then((response) => ({
+        success: true,
+        data: response.user_bookmarks,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,92 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+
+export interface UserRating {
+  entity_token: string;
+  entity_type: string;
+  rating_value: string;
+}
+
+export class UserRatingApi extends ApiManager {
+  public ListUserRatings(): Promise<ApiResponse<UserRating[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_rating/batch`;
+
+    return this.get<{
+      success?: boolean;
+      ratings?: UserRating[];
+      BadInput?: string;
+    }>({ endpoint })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.ratings,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public PostUserRating({
+    entityToken,
+    entityType,
+    ratingValue,
+  }: {
+    entityToken: string;
+    entityType: string;
+    ratingValue: string;
+  }): Promise<ApiResponse<number>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_rating/rate`;
+
+    const body = {
+      entity_token: entityToken,
+      entity_type: entityType,
+      rating_value: ratingValue,
+    };
+
+    return this.post<
+      {
+        entity_token: string;
+        entity_type: string;
+        rating_value: string;
+      },
+      {
+        success?: boolean;
+        new_positive_rating_count_for_entity?: number;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.new_positive_rating_count_for_entity,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListUserRatingByEntity({
+    entityType,
+    entityToken,
+  }: {
+    entityType: string;
+    entityToken: string;
+  }): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user_rating/view/${entityType}/${entityToken}`;
+
+    return this.get<{
+      success?: boolean;
+      maybe_rating_value?: string;
+      BadInput?: string;
+    }>({ endpoint })
+      .then((response) => {
+        return {
+          success: response.success ?? false,
+          data: response.maybe_rating_value,
+          errorMessage: response.BadInput,
+        };
+      })
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,161 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { UserInfo } from "./models/Users.js";
+
+export class UsersApi extends ApiManager {
+  public GetSession(): Promise<
+    ApiResponse<{
+      loggedIn: boolean;
+      user?: UserInfo;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/session`;
+    return this.get<{
+      success: boolean;
+      logged_in: boolean;
+      user?: UserInfo;
+      error_message?: string;
+    }>({ endpoint: endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: {
+          loggedIn: response.logged_in,
+          user: response.user,
+        },
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.mesasge,
+        };
+      });
+  }
+
+  public GetUserProfile(username: string): Promise<
+    ApiResponse<{
+      user?: UserInfo;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/user/${username}/profile`;
+    return this.get<{
+      success: boolean;
+      user?: UserInfo;
+      error_message?: string;
+    }>({ endpoint: endpoint })
+      .then((response) => ({
+        success: response.success,
+        data: {
+          user: response.user,
+        },
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          error_message: err.message,
+        };
+      });
+  }
+
+  public async Login({
+    usernameOrEmail,
+    password,
+  }: {
+    usernameOrEmail: string;
+    password: string;
+  }): Promise<ApiResponse<{ signedSession?: string }>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/login`;
+    const body = {
+      username_or_email: usernameOrEmail,
+      password: password,
+    };
+    return await this.post<
+      { username_or_email: string; password: string },
+      {
+        success: boolean;
+        signed_session?: string;
+        error_message?: string;
+        error_type?: string;
+      }
+    >({
+      endpoint: endpoint,
+      body: body,
+    })
+      .then((response) => ({
+        success: response.success,
+        data: { signedSession: response.signed_session },
+        errorMessage: response.error_message,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          error_message: err.message,
+        };
+      });
+  }
+
+  public Logout(): Promise<ApiResponse<null>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/logout`;
+    return this.post<null, { success: boolean; error_message?: string }>({
+      endpoint: endpoint,
+    })
+      .then((response) => ({
+        success: response.success,
+      }))
+      .catch((err) => {
+        return {
+          success: false,
+          errorMessage: err.message,
+        };
+      });
+  }
+
+  public async Signup({
+    username,
+    email,
+    password,
+    passwordConfirmation,
+  }: {
+    username: string;
+    email: string;
+    password: string;
+    passwordConfirmation: string;
+  }): Promise<ApiResponse<{ signedSession?: string }>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/create_account`;
+    const body = {
+      email_address: email,
+      password,
+      password_confirmation: passwordConfirmation,
+      username,
+    };
+    return await this.post<
+      {
+        username: string;
+        email_address: string;
+        password: string;
+        password_confirmation: string;
+      },
+      {
+        success: boolean;
+        signed_session?: string;
+        error_fields?: Record<string, string>;
+        error_message?: string;
+        error_type?: string;
+      }
+    >({
+      endpoint: endpoint,
+      body: body,
+    })
+      .then((response) => {
+        return {
+          success: response.success,
+          data: { signedSession: response.signed_session },
+          errorMessage: Object.values(response.error_fields ?? {}).join(","),
+        };
+      })
+      .catch((err) => {
+        return {
+          success: false,
+          error_message: err.message,
+        };
+      });
+  }
+}

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

@@ -0,0 +1,70 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { Visibility } from "./enums/Visibility.js";
+
+interface GenerateVideoStyleTransferRequest {
+  creator_set_visibility: string;
+  disable_lcm: boolean;
+  enable_lipsync: boolean;
+  frame_skip: number;
+  global_ipa_media_token: string;
+  input_depth_file: string;
+  input_file: string;
+  input_normal_file: string;
+  input_outline_file: string;
+  negative_prompt: string;
+  prompt: string;
+  remove_watermark: boolean;
+  style: string;
+  travel_prompt: string;
+  trim_end_millis: number;
+  trim_start_millis: number;
+  use_cinematic: boolean;
+  use_face_detailer: boolean;
+  use_strength: number;
+  use_upscaler: boolean;
+  uuid_idempotency_token: string;
+}
+
+export class VideoApi extends ApiManager {
+  public async EnqueueStudio({
+    enqueueVideo,
+  }: {
+    enqueueVideo: GenerateVideoStyleTransferRequest;
+  }): Promise<
+    ApiResponse<{
+      inference_job_token?: string;
+      inference_job_token_type?: string;
+    }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/workflows/enqueue_studio`;
+
+    const body = {
+      ...enqueueVideo,
+      ...(enqueueVideo.creator_set_visibility
+        ? {}
+        : { creator_set_visibility: Visibility.Public }),
+    };
+
+    return await this.post<
+      GenerateVideoStyleTransferRequest,
+      {
+        success?: boolean;
+        inference_job_token?: string;
+        inference_job_token_type?: string;
+        BadInput?: string;
+      }
+    >({ endpoint, body: body })
+      .then((response) => ({
+        success: Boolean(response.success ?? false),
+        data: {
+          inference_job_token: response.inference_job_token,
+          inference_job_token_type: response.inference_job_token_type,
+        },
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        console.log(err.message);
+        return { success: false, error_reason: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,53 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+
+interface VoiceConversionParams {
+  autoPredictF0?: boolean;
+  creatorSetVisibility?: string;
+  isStorytellerDemo?: boolean;
+  overrideF0Method?: string;
+  sourceMediaUploadToken: string;
+  transpose?: number;
+  uuidIdempotencyToken: string;
+  voiceConversionModelToken: string;
+}
+
+interface VoiceConversionRequest {
+  auto_predict_f0: boolean;
+  creator_set_visibility: string;
+  is_storyteller_demo: boolean;
+  override_f0_method: string;
+  source_media_upload_token: string;
+  transpose: number;
+  uuid_idempotency_token: string;
+  voice_conversion_model_token: string;
+}
+
+export class VoiceConversionApi extends ApiManager {
+  public ConvertVoice(
+    params: VoiceConversionParams,
+  ): Promise<ApiResponse<string>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/voice_conversion/inference`;
+
+    const body = this.parseBodyValues<
+      VoiceConversionParams,
+      VoiceConversionRequest
+    >(params);
+
+    return this.post<
+      VoiceConversionRequest,
+      {
+        success?: boolean;
+        inference_job_token?: string;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        data: response.inference_job_token,
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,77 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { Pagination } from "./models/Pagination.js";
+import { ZsDataset } from "./models/Dataset.js";
+
+interface VoiceDesignerParams {
+  text: string;
+  uuidIdempotencyToken: string;
+  voiceToken: string;
+}
+
+interface VoiceDesignerRequest {
+  text: string;
+  uuid_idempotency_token: string;
+  voice_token: string;
+}
+
+export class VoiceDesignerApi extends ApiManager {
+  public EnqueueTts(
+    params: VoiceDesignerParams,
+  ): Promise<
+    ApiResponse<{ inference_job_token?: string; voice_token?: string }>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/voice_designer/enqueue_tts`;
+
+    const body = this.parseBodyValues<
+      VoiceDesignerParams,
+      VoiceDesignerRequest
+    >(params);
+
+    return this.post<
+      VoiceDesignerRequest,
+      {
+        success?: boolean;
+        inference_job_token?: string;
+        voice_token: string;
+        BadInput?: string;
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: response.success ?? false,
+        ...(response.success
+          ? {
+              data: {
+                inference_job_token: response.inference_job_token,
+                voice_token: response.voice_token,
+              },
+            }
+          : {}),
+        errorMessage: response.BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListDatasetsByUser({
+    username,
+  }: {
+    username: string;
+  }): Promise<ApiResponse<ZsDataset[]>> {
+    const user = username;
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/voice_designer/user/${user}/list`;
+
+    return this.get<{
+      success: boolean;
+      datasets: ZsDataset[];
+      pagination: Pagination;
+    }>({ endpoint })
+      .then((response) => ({
+        success: true,
+        data: response.datasets,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,295 @@
+import { ApiManager, ApiResponse } from "./ApiManager.js";
+import { Weight } from "./models/Weight.js";
+import { Pagination, PaginationInfinite } from "./models/Pagination.js";
+import {
+  FilterEngineCategories,
+  FilterMediaClasses,
+  FilterMediaType,
+} from "./enums/QueryFilters.js";
+import { Visibility } from "./enums/Visibility.js";
+
+export enum ScopedWeightType {
+  HIFIGAN_TT2 = "hifigan_tt2",
+  RVC_V2 = "rvc_v2",
+  SD_1_5 = "sd_1.5",
+  SDXL = "sdxl",
+  SO_VITS_SVC = "so_vits_svc",
+  TT2 = "tt2",
+  LORA = "loRA",
+  VALL_E = "vall_e",
+  COMFY_UI = "comfy_ui",
+}
+export enum ScopedWeightCategory {
+  IMAGE_GENERATION = "image_generation",
+  TEXT_TO_SPEECH = "text_to_speech",
+  VOCODER = "vocoder",
+  VOICE_CONVERSION = "voice_conversion",
+  WORKFLOW_CONFIG = "workflow_config",
+}
+
+interface WeightsRequest {
+  pageSize?: number;
+  weightType?: ScopedWeightType[];
+  weightCategory?: ScopedWeightCategory[];
+  //TODO: what is scoped??
+  scopedWeightType?: ScopedWeightType[];
+  scopedWeightCategory?: ScopedWeightCategory[];
+}
+
+export interface ListWeightsByUserRequest extends WeightsRequest {
+  username: string;
+  pageIndex?: number;
+  sortAscending?: boolean;
+}
+
+export interface ListWeightsRequest extends WeightsRequest {
+  cursor?: string;
+  cursorIsReversed?: boolean;
+}
+
+export interface ListFeaturedWeightsRequest {
+  sortAscending?: boolean;
+  pageSize?: number;
+  cursor?: string;
+  cursorIsReversed?: boolean;
+  filterMediaClasses?: FilterMediaClasses[];
+  filterMediaType?: FilterMediaType[];
+  filterEngineCategories?: FilterEngineCategories[];
+}
+
+export interface SearchWeightParams {
+  ietfLanguageSubtag: string;
+  searchTerm: string;
+  weightCategory: ScopedWeightCategory;
+  weightType: ScopedWeightType;
+}
+
+export interface SearchWeightRequest {
+  ietf_language_subtag: string;
+  search_term: string;
+  weight_category: string;
+  weight_type: string;
+}
+
+interface GetWeightByTokenResponse extends Weight {
+  success: boolean;
+}
+
+export interface UpdateWeightByTokenParams {
+  weightToken: string;
+  coverImageMediaFileToken: string;
+  descriptionMarkdown: string;
+  title: string;
+  visibility: Visibility;
+}
+export interface UpdateWeightByTokenRequest {
+  cover_image_media_file_token: string;
+  description_markdown: string;
+  title: string;
+  visibility: Visibility;
+}
+
+export class WeightsApi extends ApiManager {
+  public ListWeightsByUser({
+    username,
+    ...params
+  }: ListWeightsByUserRequest): Promise<ApiResponse<Weight[], Pagination>> {
+    const user = username;
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/by_user/${user}`;
+
+    const query = this.parseQueryValues(params);
+
+    return this.get<{
+      success: boolean;
+      results: Weight[];
+      pagination: Pagination;
+    }>({ endpoint, query })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListWeights({
+    ...params
+  }: ListWeightsRequest): Promise<ApiResponse<Weight[], PaginationInfinite>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/list`;
+
+    const query = this.parseQueryValues(params);
+
+    return this.get<{
+      success: boolean;
+      results: Weight[];
+      pagination: PaginationInfinite;
+    }>({ endpoint, query })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListWeightsFeatured({
+    ...params
+  }: ListFeaturedWeightsRequest): Promise<
+    ApiResponse<Weight[], PaginationInfinite>
+  > {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/list_featured`;
+
+    const query = this.parseQueryValues(params);
+
+    return this.get<{
+      success: boolean;
+      results: Weight[];
+      pagination: PaginationInfinite;
+    }>({ endpoint, query })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+        pagination: response.pagination,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public ListWeightsPinned(): Promise<ApiResponse<Weight[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/list_pinned`;
+
+    return this.get<{
+      success: boolean;
+      results: Weight[];
+    }>({ endpoint })
+      .then((response) => ({
+        success: true,
+        data: response.results,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public SearchWeights(
+    params: SearchWeightParams,
+  ): Promise<ApiResponse<Weight[]>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/search`;
+
+    const body = this.parseBodyValues<SearchWeightParams, SearchWeightRequest>(
+      params,
+    );
+
+    return this.post<
+      SearchWeightRequest,
+      {
+        success: boolean;
+        weights: Weight[];
+      }
+    >({ endpoint, body })
+      .then((response) => ({
+        success: true,
+        data: response.weights,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public GetWeightByToken({
+    weightToken,
+  }: {
+    weightToken: string;
+  }): Promise<ApiResponse<Weight>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/weight/${weightToken}`;
+
+    return this.get<GetWeightByTokenResponse>({ endpoint })
+      .then(({ success, ...mediaFile }) => ({
+        success: success,
+        data: mediaFile,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public UpdateWeightByToken({
+    weightToken,
+    ...params
+  }: UpdateWeightByTokenParams): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/weight/${weightToken}`;
+
+    const body = this.parseBodyValues<
+      Omit<UpdateWeightByTokenParams, "weightToken">,
+      UpdateWeightByTokenRequest
+    >(params);
+
+    return this.post<
+      UpdateWeightByTokenRequest,
+      { success?: boolean; BadInput?: string }
+    >({ endpoint, body })
+      .then(({ success, BadInput }) => ({
+        success: success ?? false,
+        errorMessage: BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public DeleteWeightByToken({
+    weightToken,
+  }: {
+    weightToken: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/weight/${weightToken}`;
+
+    const body = {
+      as_mod: true,
+      set_delete: true,
+    };
+
+    return this.delete<
+      { as_mod: boolean; set_delete: boolean },
+      { success?: boolean; BadInput?: string }
+    >({ endpoint, body })
+      .then(({ success, BadInput }) => ({
+        success: success ?? false,
+        errorMessage: BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+
+  public UpdateWeightCoverImageByToken({
+    weightToken,
+    coverImageMediaFileToken,
+  }: {
+    weightToken: string;
+    coverImageMediaFileToken: string;
+  }): Promise<ApiResponse<undefined>> {
+    const endpoint = `${this.ApiTargets.BaseApi}/v1/weights/${weightToken}/cover_image`;
+
+    const body = {
+      cover_image_media_file_token: coverImageMediaFileToken,
+    };
+
+    return this.post<
+      { cover_image_media_file_token: string },
+      { success?: boolean; BadInput?: string }
+    >({ endpoint, body })
+      .then(({ success, BadInput }) => ({
+        success: success ?? false,
+        errorMessage: BadInput,
+      }))
+      .catch((err) => {
+        return { success: false, errorMessage: err.message };
+      });
+  }
+}

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

@@ -0,0 +1,7 @@
+export enum API_TARGETS {
+  BASE_API = "https://api.storyteller.ai",
+  GOOGLE_API = "https://storage.googleapis.com",
+  FUNNEL_API = "https://style.storyteller.ai",
+  CDN_API = "https://cdn.storyteller.ai",
+  GRAVATAR_API = "https://www.gravatar.com",
+}

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

@@ -0,0 +1,11 @@
+export enum SubscriptionNamespace {
+  FAKEYOU = "fakeyou",
+}
+export enum SubscriptionProduct {
+  PLUS = "fakeyou_plus",
+  PRO = "fakeyou_pro",
+  ELITE = "fakeyou_elite",
+}
+export enum LoyaltyProgram {
+  CONTRIBUTOR = "fakeyou_contributor",
+}

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

@@ -0,0 +1,4 @@
+export enum EIntermediateFile {
+  "true",
+  "false"
+}

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

@@ -0,0 +1,16 @@
+export enum JobStatus {
+  PENDING = "pending",
+  STARTED = "started",
+  ATTEMPT_FAILED = "attempt_failed",
+  COMPLETE_SUCCESS = "complete_success",
+  COMPLETE_FAILURE = "complete_failure",
+  DEAD = "dead",
+  CANCELLED_BY_USER = "cancelled_by_user",
+  CANCELLED_BY_SYSTEM = "cancelled_by_system",
+}
+
+export enum JobType {
+  TextToSpeech = "text_to_speech",
+  VoiceConversion = "voice_conversion",
+  VideoStyleTransfer = "workflow",
+}

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

@@ -0,0 +1,26 @@
+export enum MediaFileClass {
+  /// Unknown (default value)
+  /// This will be present until we migrate all old files.
+  Unknown = "unknown",
+
+  /// Audio files: wav, mp3, etc.
+  Audio = "audio",
+
+  /// Image files: png, jpeg, etc.
+  Image = "image",
+
+  /// Video files: mp4, etc.
+  Video = "video",
+
+  /// Engine "animations"
+  Animation = "animation",
+
+  /// Engine "characters"
+  Character = "character",
+
+  /// Engine "prop" items
+  Prop = "prop",
+
+  /// Engine scenes (internal and external scenes)
+  Scene = "scene",
+}

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

@@ -0,0 +1,58 @@
+export enum MediaFileType {
+  Audio = "audio",
+  Video = "video",
+  Image = "image",
+
+  // BVH is a very popular file format for motion capture.
+  // It is compatible with our engine.
+  BVH = "bvh",
+
+  // GLTF is the text-based format of GLB. Unforunately it requires a
+  // second file to include the visual data, so we strongly discourage
+  // the use of this format in favor of GLB.
+  GLTF = "gltf",
+
+  // GLB is the format we convert FBX files into. It's a very popular
+  // open source 3D file format.
+  GLB = "glb",
+
+  // MMD is the format for anime characters.
+  // open source 3D file format.
+  MMD = "mmd",
+
+  // FBX isn't supported by Storyteller Engine, but we can get
+  // uploads in this format. It's a very popular 3D graphics format.
+  FBX = "fbx",
+
+  // Full Storyteller Engine scenes (RON = Rusty Object Notation)
+  // This is a temporary format that will eventually go away.
+  Scene = "scene",
+
+  None = "none",
+}
+
+export enum MediaFileSubtype {
+  /// Animation file from Mixamo
+  /// Primarily used for FBX and GLB.
+  Mixamo = "mixamo",
+
+  /// Animation file from MocapNet
+  /// Primarily used for BVH.
+  MocapNet = "mocap_net",
+
+  /// Generic animation case
+  /// Used for BVH files, but can also pertain to animation-only files of other types.
+  AnimationOnly = "animation_only",
+
+  // TODO(bt,2024-03-08): Migrate records and code, then remove
+  /// DEPRECATED: Use `SceneImport` instead.
+  Scene = "scene",
+
+  /// Generic 3D scene file.
+  /// Can pertain to glTF, glB, FBX, etc.
+  SceneImport = "scene_import",
+
+  /// Native Storyteller scene format.
+  /// Typically stored in a `.scn.ron` file.
+  StorytellerScene = "storyteller_scene",
+}

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

@@ -0,0 +1,29 @@
+export enum FilterMediaClasses {
+  AUDIO = "audio",
+  IMAGE = "image",
+  VIDEO = "video",
+}
+
+export enum FilterMediaType {
+  SCENE_JSON = "scene_json",
+  GLB = "glb",
+  GLTF = "gltf",
+  PMX = "pmx",
+  PMD = "pmd",
+  VMD = "vmd",
+}
+
+export enum FilterEngineCategories {
+  ANIMATION = "animation",
+  AUDIO = "audio",
+  CHARACTER = "character",
+  CREATURE = "creature",
+  EXPRESSION = "expression",
+  IMAGE_PLANE = "image_plane",
+  LOCATION = "location",
+  OBJECT = "object",
+  SCENE = "scene",
+  SET_DRESSING = "set_dressing",
+  SKYBOX = "skybox",
+  VIDEO_PLANE = "video_plane",
+}

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

@@ -0,0 +1,7 @@
+export enum GenerateTtsAudioErrorType {
+  BadRequest = "bad_request",
+  NotFound = "not_found",
+  TooManyRequests = "too_many_requests",
+  ServerError = "server_error",
+  UnknownError = "unknown_error",
+}

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

@@ -0,0 +1,6 @@
+export enum USER_FEATURE_FLAGS {
+  EXPLORE_MEDIA = "explore_media",
+  STUDIO = "studio",
+  UPLOAD_3D = "upload_3d",
+  VIDEO_STYLE_TRANSFER = "video_style_transfer",
+}

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

@@ -0,0 +1,5 @@
+export enum Visibility {
+  Public = "public",
+  Hidden = "hidden",
+  Private = "private",
+}

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

@@ -0,0 +1,8 @@
+export enum WeightCategory {
+  TTS = "text_to_speech",
+  VOCODER = "vocoder",
+  VC = "voice_conversion",
+  ZS = "zero_shot",
+  SD = "image_generation",
+  WF = "workflow_config",
+}

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

@@ -0,0 +1,11 @@
+export enum WeightType {
+  TT2 = "tt2",
+  HIFIGAN_TT2 = "hifigan_tt2",
+  RVCv2 = "rvc_v2",
+  SD_15 = "sd_1.5",
+  SDXL = "sdxl",
+  SVC = "so_vits_svc",
+  LORA = "loRA",
+  VALL_E = "vall_e",
+  NONE = "none",
+}

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

@@ -0,0 +1,18 @@
+// https://storyteller-docs.netlify.app/#/
+export * from "./AnalyticsApi";
+export * from "./BetaKeysApi";
+export * from "./BillingApi";
+export * from "./CommentsApi";
+export * from "./EngineApi";
+export * from "./FeaturedItemsApi";
+export * from "./JobsApi";
+export * from "./MediaFilesApi";
+export * from "./MediaUploadApi";
+export * from "./MiscApi";
+export * from "./ModerationApi";
+export * from "./PromptsApi";
+export * from "./TtsApi";
+export * from "./UserBookmarksApi";
+export * from "./UsersApi";
+export * from "./VideoApi";
+export * from "./WeightsApi";

frontend/libs/api/src/lib/models/BetaKeys.ts

@@ -0,0 +1,26 @@
+interface DefaultAvatar {
+  color_index: number;
+  image_index: number;
+}
+
+interface User {
+  default_avatar: DefaultAvatar;
+  display_name: string;
+  gravatar_hash: string;
+  user_token: string;
+  username: string;
+}
+
+export interface BetaKey {
+  created_at: string;
+  creator: User;
+  is_distributed: boolean;
+  key_value: string;
+  maybe_note?: string;
+  maybe_note_html?: string;
+  maybe_redeemed_at?: string;
+  maybe_redeemer?: User;
+  maybe_referrer?: User;
+  product: string;
+  token: string;
+}

frontend/libs/api/src/lib/models/Billing.ts

@@ -0,0 +1,17 @@
+import {
+  LoyaltyProgram,
+  SubscriptionNamespace,
+  SubscriptionProduct,
+} from "../enums/Billing.js";
+
+export interface ActiveSubscriptions {
+  // user's list of subscriptions
+  active_subscriptions: Subscription[];
+  // special programs that the user could be in
+  maybe_loyalty_program?: LoyaltyProgram;
+}
+
+export interface Subscription {
+  namespace: SubscriptionNamespace;
+  product_slug: SubscriptionProduct;
+}

frontend/libs/api/src/lib/models/Dataset.ts

@@ -0,0 +1,23 @@
+export interface ZsDataset {
+  created_at: string; // ISO 8601 date-time string
+  creator: UserDetailsLight;
+  creator_set_visibility: string; // Enum or specific string values
+  dataset_token: string;
+  ietf_language_tag: string;
+  ietf_primary_language_subtag: string;
+  title: string;
+  updated_at: string; // ISO 8601 date-time string
+}
+
+interface UserDetailsLight {
+  default_avatar: UserDefaultAvatarInfo;
+  display_name: string;
+  gravatar_hash: string;
+  user_token: string;
+  username: string;
+}
+
+interface UserDefaultAvatarInfo {
+  color_index: number;
+  image_index: number;
+}

frontend/libs/api/src/lib/models/Job.ts

@@ -0,0 +1,72 @@
+import { JobStatus } from "../enums/Job.js";
+
+export interface Job {
+  created_at: string;
+  job_token: string;
+  maybe_result: JobMaybeResult;
+  request: JobRequest;
+  status: JobStatusResponse;
+  updated_at: string;
+}
+
+export interface JobMaybeResult {
+  entity_token: string;
+  entity_type: string;
+  // maybe_public_bucket_media_path: string;
+  maybe_successfully_completed_at: string;
+  media_links: {
+    cdn_url: string;
+  };
+}
+export interface JobRequest {
+  inference_category: string;
+  maybe_model_title: string;
+  maybe_model_token: string;
+  maybe_model_type: string;
+  maybe_raw_inference_text: string;
+  maybe_style_name: string;
+}
+
+export interface JobStatusResponse {
+  attempt_count: number;
+  maybe_assigned_cluster: string;
+  maybe_assigned_worker: string;
+  maybe_extra_status_description: string;
+  maybe_failure_category: string;
+  maybe_first_started_at: string;
+  requires_keepalive: boolean;
+  progress_percentage: number;
+  status: JobStatus;
+}
+
+export interface JobPreview {
+  success: boolean;
+  state: {
+    job_token: string;
+    request: Record<string, unknown>;
+    status: {
+      status: string;
+      maybe_extra_status_description: string | null;
+      maybe_assigned_worker: string;
+      maybe_assigned_cluster: string;
+      maybe_first_started_at: string;
+      attempt_count: number;
+      requires_keepalive: boolean;
+      maybe_failure_category: string;
+      progress_percentage: number;
+    };
+    maybe_result: {
+      expected_stages: number;
+      currently_active_stage: number;
+      per_stage_frame_count: number;
+      stages: Array<{
+        stage_progress: number;
+        expected_frame_count: number;
+        stage_complete: boolean;
+        frames: string[];
+      }>;
+    };
+    created_at: string;
+    updated_at: string;
+  };
+}

frontend/libs/api/src/lib/models/JobState.ts

@@ -0,0 +1,35 @@
+interface MaybeResult {
+  entity_token: string;
+  entity_type: string;
+  maybe_public_bucket_media_path: string;
+  maybe_successfully_completed_at: string;
+}
+
+interface Request {
+  inference_category: string;
+  maybe_model_title?: string;
+  maybe_model_token: string;
+  maybe_model_type: string;
+  maybe_raw_inference_text: string;
+  maybe_style_name: string;
+}
+
+interface Status {
+  attempt_count: number;
+  maybe_assigned_cluster?: string;
+  maybe_assigned_worker?: string;
+  maybe_extra_status_description?: string;
+  maybe_failure_category?: string;
+  maybe_first_started_at: string;
+  requires_keepalive: boolean;
+  status: string;
+}
+
+export interface JobState {
+  created_at: string;
+  job_token: string;
+  maybe_result?: MaybeResult;
+  request: Request;
+  status: Status;
+  updated_at: string;
+}

frontend/libs/api/src/lib/models/MediaFile.ts

@@ -0,0 +1,59 @@
+import { MediaFileClass } from "../enums/MediaFileClass";
+import { MediaFileType, MediaFileSubtype } from "../enums/MediaFileType";
+import { WeightCategory } from "../enums/WeightCategory";
+import { WeightType } from "../enums/WeightType";
+import { UserInfo } from "./Users";
+
+export interface MediaFile {
+  token: string;
+  media_type: MediaFileType;
+  media_class: MediaFileClass | null;
+  maybe_animation_type: string | null;
+  maybe_media_subtype: MediaFileSubtype | null;
+  maybe_engine_extension: string | null;
+  maybe_batch_token: string;
+  maybe_original_filename: string | null;
+  maybe_creator_user: UserInfo | null;
+  maybe_prompt_token: string | null;
+  origin: {
+    origin_category: string;
+    product_category: string;
+    maybe_model: { title: string } | null;
+  };
+  origin_category: string;
+  origin_product_category: string;
+  maybe_origin_model_type: null | string;
+  maybe_origin_model_token: null | string;
+  maybe_duration_millis: number | null;
+  maybe_style_name: null | string;
+  public_bucket_path: string;
+  public_bucket_url: string;
+  media_links: {
+    cdn_url: string;
+    thumbnail_template: string;
+  };
+  cover_image: {
+    maybe_cover_image_public_bucket_path: null | string;
+    default_cover: {
+      image_index: number;
+      color_index: number;
+    };
+  };
+  creator_set_visibility: string;
+  maybe_title: null | string;
+  maybe_text_transcript: null | string;
+  stats: {
+    positive_rating_count: number;
+    bookmark_count: number;
+  };
+  maybe_model_weight_info: {
+    title: string;
+    weight_token: string;
+    weight_category: WeightCategory;
+    weight_type: WeightType;
+    maybe_weight_creator: UserInfo;
+    maybe_cover_image_public_bucket_path: string;
+  };
+  created_at: string;
+  updated_at: string;
+}

frontend/libs/api/src/lib/models/Pagination.ts

@@ -0,0 +1,9 @@
+export interface Pagination {
+  current: number;
+  total_page_count: number;
+}
+export interface PaginationInfinite {
+  cursor_is_reversed: boolean;
+  maybe_next?: string;
+  maybe_previous?: string;
+}

frontend/libs/api/src/lib/models/Prompts.ts

@@ -0,0 +1,16 @@
+export interface Prompts {
+  created_at: string;
+  lcm_disabled: boolean;
+  lipsync_enabled: boolean;
+  maybe_inference_duration_millis: number;
+  maybe_moderator_fields: string;
+  maybe_negative_prompt: string;
+  maybe_positive_prompt: string;
+  maybe_strength: number;
+  maybe_style_name: string;
+  prompt_type: string;
+  token: string;
+  use_cinematic: boolean;
+  used_face_detailer: boolean;
+  used_upscaler: boolean;
+}

frontend/libs/api/src/lib/models/StatusAlert.ts

@@ -0,0 +1,9 @@
+export interface StatusAlert {
+  maybe_alert?: MaybeAlert;
+  refresh_interval_millis: number;
+}
+
+interface MaybeAlert {
+  maybe_category?: string;
+  maybe_message?: string;
+}

frontend/libs/api/src/lib/models/UserBookmark.ts

@@ -0,0 +1,75 @@
+export interface UserBookmarkBatch {
+  entity_token: string;
+  entity_type: string;
+  is_bookmarked: boolean;
+  maybe_bookmark_token: string;
+}
+
+interface DefaultAvatar {
+  color_index: number;
+  image_index: number;
+}
+
+interface User {
+  default_avatar: DefaultAvatar;
+  display_name: string;
+  gravatar_hash: string;
+  user_token: string;
+  username: string;
+}
+
+export interface UserBookmarkByEntity {
+  created_at: string;
+  token: string;
+  updated_at: string;
+  user: User;
+}
+
+interface DefaultAvatar {
+  color_index: number;
+  image_index: number;
+}
+
+interface Creator {
+  default_avatar: DefaultAvatar;
+  display_name: string;
+  gravatar_hash: string;
+  user_token: string;
+  username: string;
+}
+
+interface MediaFileData {
+  maybe_creator: Creator;
+  media_type: string; // Adjust type as per your specific schema
+  public_bucket_path: string;
+}
+
+interface WeightData {
+  maybe_cover_image_public_bucket_path: string;
+  maybe_creator: Creator;
+  title: string;
+  weight_category: string; // Adjust type as per your specific schema
+  weight_type: string; // Adjust type as per your specific schema
+}
+
+interface Stats {
+  bookmark_count: number;
+  positive_rating_count: number;
+}
+
+interface Details {
+  entity_token: string;
+  entity_type: string; // Adjust type as per your specific schema
+  maybe_media_file_data?: MediaFileData;
+  maybe_summary_text?: string;
+  maybe_thumbnail_url?: string;
+  maybe_weight_data?: WeightData;
+  stats: Stats;
+}
+
+export interface UserBookmarkByUser {
+  created_at: string;
+  details: Details;
+  token: string;
+  updated_at: string;
+}

frontend/libs/api/src/lib/models/Users.ts

@@ -0,0 +1,50 @@
+import { USER_FEATURE_FLAGS } from "../../libs/api/src/lib/enums/UserFeatures";
+
+export interface CoreInfo {
+  default_avatar: {
+    color_index: number;
+    image_index: number;
+  };
+  display_name: string;
+  gravatar_hash: string;
+  user_token: string;
+  username: string;
+}
+
+export interface UserInfo {
+  user_token: string;
+  username: string;
+  display_name: string;
+  email_gravatar_hash: string;
+
+  core_info: CoreInfo;
+
+  // Rollout feature flags
+  can_access_studio: boolean;
+  maybe_feature_flags: USER_FEATURE_FLAGS[];
+
+  // Usage
+  can_use_tts: boolean;
+  can_use_w2l: boolean;
+  can_delete_own_tts_results: boolean;
+  can_delete_own_w2l_results: boolean;
+  can_delete_own_account: boolean;
+
+  // Contribution
+  can_upload_tts_models: boolean;
+  can_upload_w2l_templates: boolean;
+  can_delete_own_tts_models: boolean;
+  can_delete_own_w2l_templates: boolean;
+
+  // Moderation
+  can_approve_w2l_templates: boolean;
+  can_edit_other_users_profiles: boolean;
+  can_edit_other_users_tts_models: boolean;
+  can_edit_other_users_w2l_templates: boolean;
+  can_delete_other_users_tts_models: boolean;
+  can_delete_other_users_tts_results: boolean;
+  can_delete_other_users_w2l_templates: boolean;
+  can_delete_other_users_w2l_results: boolean;
+  can_ban_users: boolean;
+  can_delete_users: boolean;
+}

frontend/libs/api/src/lib/models/Weight.ts

@@ -0,0 +1,40 @@
+interface CoverImage {
+  default_cover: {
+    color_index: number;
+    image_index: number;
+  };
+  maybe_cover_image_public_bucket_path: string;
+}
+
+interface DefaultAvatar {
+  color_index: number;
+  image_index: number;
+}
+
+interface Creator {
+  default_avatar: DefaultAvatar;
+  display_name: string;
+  gravatar_hash: string;
+  user_token: string;
+  username: string;
+}
+
+interface Stats {
+  bookmark_count: number;
+  positive_rating_count: number;
+}
+
+export interface Weight {
+  cover_image: CoverImage;
+  created_at: string;
+  creator: Creator;
+  creator_set_visibility: string;
+  file_checksum_sha2: string;
+  file_size_bytes: number;
+  stats: Stats;
+  title: string;
+  updated_at: string;
+  weight_category: string;
+  weight_token: string;
+  weight_type: string;
+}

frontend/libs/components/toaster/.babelrc

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

frontend/libs/components/toaster/README.md

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

frontend/libs/components/toaster/package.json

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

frontend/libs/components/toaster/src/index.ts

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

frontend/libs/components/toaster/src/lib/toaster.module.css

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

frontend/libs/components/toaster/src/lib/toaster.spec.tsx

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

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

@@ -0,0 +1,49 @@
+import toast, { Toaster as RHToaster } from "react-hot-toast";
+
+interface ToasterProps {
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  offsetTop?: number;
+  offsetBottom?: number;
+  offsetLeft?: number;
+  offsetRight?: number;
+  zIndex?: number;
+}
+
+export function Toaster({
+  position = "top-right",
+  offsetTop = 12,
+  offsetBottom = 12,
+  offsetLeft = 12,
+  offsetRight = 12,
+  zIndex = 9,
+}: ToasterProps) {
+  return (
+    <RHToaster
+      position={position}
+      toastOptions={{
+        success: {
+          style: {
+            background: "#ffffff",
+          },
+        },
+        error: {
+          style: {
+            background: "#ffffff",
+          },
+        },
+      }}
+      containerStyle={{
+        top: offsetTop,
+        left: offsetLeft,
+        bottom: offsetBottom,
+        right: offsetRight,
+        zIndex: zIndex,
+      }}
+      containerClassName="text-[15px] font-medium"
+    />
+  );
+}
+
+export default Toaster;
+
+export { toast };

frontend/libs/components/toaster/tsconfig.json

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

frontend/libs/components/toaster/tsconfig.lib.json

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

frontend/libs/components/toaster/tsconfig.spec.json

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

frontend/libs/components/toaster/vite.config.ts

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

frontend/libs/login/.babelrc

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

frontend/libs/login/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": [
+    "plugin:@nx/react",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*",
+    "**/vite.config.*.timestamp*",
+    "**/vitest.config.*.timestamp*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    }
+  ]
+}

frontend/libs/login/README.md

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

frontend/libs/login/package.json

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

frontend/libs/login/src/index.ts

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

frontend/libs/login/src/lib/login.module.css

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

frontend/libs/login/src/lib/login.spec.tsx

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

frontend/libs/login/src/lib/login.tsx

@@ -0,0 +1,15 @@
+
+import styles from './login.module.css';
+
+export function Login() {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to Login!</h1>
+    </div>
+  );
+}
+
+export default Login;
+
+
+

frontend/libs/login/src/server.ts

@@ -0,0 +1 @@
+// This file should be used to export ONLY server-code from the library.

frontend/libs/login/src/test-setup.ts

@@ -0,0 +1,3 @@
+import { installGlobals } from '@remix-run/node';
+import "@testing-library/jest-dom/matchers";
+installGlobals();