Fix imports in FK

Prompt box handles both web and desktop.

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

Cargo.lock

@@ -12021,6 +12021,7 @@ dependencies = [
  "tauri-plugin-log",
  "tempdir",
  "tempfile",
+ "tokens",
  "tokio",
  "tokio-util",
  "workspace-build-acceleration",

Cargo.toml

@@ -168,12 +168,14 @@ sha3 = "0.10.8"
 thiserror = "2"
 toml = "0.7.4"
 url = "2.5.4"
+
 # Internal libs
 crockford = { path = "crates/lib/data/crockford" }
 errors = { path = "crates/lib/errors" }
 filesys = { path = "crates/lib/files/filesys" }
 memory_caching = { path = "crates/lib/caching/memory_caching" }
-shared_service_components = { path = "crates/lib/shared_service_components" }
 openai_sora_client = { path = "crates/lib/api_clients/openai_sora_client" }
 primitives = { path = "crates/lib/data/primitives" }
+shared_service_components = { path = "crates/lib/shared_service_components" }
 subprocess_common = { path = "crates/lib/subprocess_common" }
+tokens = { path = "crates/_types/tokens" }

crates/desktop/tauri-artcraft/Cargo.toml

@@ -30,6 +30,7 @@ memory_caching = { workspace = true }
 openai_sora_client = { workspace = true }
 primitives = { workspace = true }
 subprocess_common = { workspace = true }
+tokens = { workspace = true }
 
 # External
 #openssl = { version = "0.10", features = ["vendored"] }

crates/desktop/tauri-artcraft/src/commands/mod.rs

@@ -1,3 +1,2 @@
 pub mod flip_image;
-pub mod image_generation_command;
-pub mod open_login_command;
+pub mod sora;

crates/desktop/tauri-artcraft/src/commands/sora/mod.rs

@@ -0,0 +1,3 @@
+pub mod open_sora_login_command;
+pub mod sora_image_generation_command;
+pub mod sora_image_remix_command;

crates/desktop/tauri-artcraft/src/commands/sora/open_sora_login_command.rs

@@ -4,7 +4,7 @@ use once_cell::sync::Lazy;
 use tauri::{AppHandle, Manager, Url, WebviewUrl, WebviewWindowBuilder, WindowBuilder};
 use tokio::time::sleep_until;
 use errors::AnyhowResult;
-use crate::threads::login_thread::{LOGIN_WINDOW_NAME, SORA_LOGIN_URL};
+use crate::threads::sora_session_login_thread::{LOGIN_WINDOW_NAME, SORA_LOGIN_URL};
 use crate::utils::clear_all_webview_cookies::clear_all_webview_cookies;
 
 pub const START_URL_STR: &str = "https://storyteller.ai/";
@@ -20,7 +20,7 @@ pub static SORA_HOMEPAGE_URL : Lazy<Url> = Lazy::new(|| {
 });
 
 #[tauri::command]
-pub async fn open_login_command(
+pub async fn open_sora_login_command(
   app: AppHandle,
 ) -> Result<String, String> {
   info!("open_login_command called");

crates/desktop/tauri-artcraft/src/commands/sora/sora_image_generation_command.rs

@@ -15,18 +15,15 @@ use openai_sora_client::upload::upload_media_from_file::SoraMediaUploadRequest;
 use crate::state::app_dir::AppDataRoot;
 
 #[tauri::command]
-pub async fn image_generation_command(
-  image: &str,
+pub async fn sora_image_generation_command(
   prompt: &str,
-  app: AppHandle,
+  image: Option<&str>,
+  _app: AppHandle,
   app_data_root: State<'_, AppDataRoot>,
 ) -> Result<String, String> {
   info!("image_generation_command called; processing image...");
 
-  let bytes = BASE64_STANDARD.decode(image)
-    .map_err(|err| format!("Base64 decode error: {}", err))?;
-
-  generate_image(bytes, prompt, &app_data_root)
+  generate_image(image, prompt, &app_data_root)
     .await
     .map_err(|err| {
       error!("error: {:?}", err);
@@ -36,19 +33,25 @@ pub async fn image_generation_command(
   Ok("success".to_string())
 }
 
-pub async fn generate_image(file_bytes: Vec<u8>, prompt: &str, app_data_root: &AppDataRoot) -> AnyhowResult<()> {
+pub async fn generate_image(maybe_image: Option<&str>, prompt: &str, app_data_root: &AppDataRoot) -> AnyhowResult<()> {
   let sora_credentials = get_credentials(app_data_root)?;
 
-  let filename = "image.png".to_string();
+  let mut sora_media_tokens = vec![];
 
-  let response= sora_media_upload_from_bytes(file_bytes, filename, &sora_credentials)
-      .await
-      .map_err(|err| {
-        error!("Failed to upload image to Sora: {:?}", err);
-        err
-      })?;
+  if let Some(image) = maybe_image {
+    let image_bytes = BASE64_STANDARD.decode(image)?;
 
-  let sora_media_tokens = vec![response.id];
+    let filename = "image.png".to_string();
+
+    let response = sora_media_upload_from_bytes(image_bytes, filename, &sora_credentials)
+        .await
+        .map_err(|err| {
+          error!("Failed to upload image to Sora: {:?}", err);
+          err
+        })?;
+
+    sora_media_tokens.push(response.id);
+  }
 
   let response = sora_image_gen_remix(SoraImageGenRemixRequest {
     prompt: prompt.to_string(),

crates/desktop/tauri-artcraft/src/commands/sora/sora_image_remix_command.rs

@@ -0,0 +1,100 @@
+use base64::Engine;
+use base64::prelude::BASE64_STANDARD;
+use crate::state::app_dir::AppDataRoot;
+use errors::AnyhowResult;
+use image::codecs::png::{CompressionType, FilterType, PngEncoder};
+use image::{DynamicImage, ImageReader};
+use log::{error, info};
+use openai_sora_client::credentials::SoraCredentials;
+use openai_sora_client::image_gen::common::{ImageSize, NumImages};
+use openai_sora_client::image_gen::sora_image_gen_remix::{sora_image_gen_remix, SoraImageGenRemixRequest};
+use openai_sora_client::upload::upload_media_from_bytes::sora_media_upload_from_bytes;
+use openai_sora_client::upload::upload_media_from_file::SoraMediaUploadRequest;
+use serde_derive::Deserialize;
+use std::fs::read_to_string;
+use std::io::Cursor;
+use tauri::{AppHandle, Manager, State};
+use tokens::tokens::media_files::MediaFileToken;
+
+#[derive(Deserialize)]
+pub struct SoraImageRemixCommand {
+  /// Image media file; the engine or canvas snapshot (screenshot).
+  pub snapshot_media_token: MediaFileToken,
+
+  /// The user's image generation prompt.
+  pub prompt: String,
+
+  /// Turn off the system prompt.
+  pub disable_system_prompt: Option<bool>,
+
+  /// Additional images to include (optional). Up to nine images.
+  pub maybe_additional_images: Option<Vec<MediaFileToken>>,
+
+  pub maybe_number_of_samples: Option<u32>,
+}
+
+#[tauri::command]
+pub async fn sora_image_remix_command(
+  _app: AppHandle,
+  request: SoraImageRemixCommand,
+  app_data_root: State<'_, AppDataRoot>,
+) -> Result<String, String> {
+  info!("image_generation_command called; processing image...");
+
+  generate_image(request, &app_data_root)
+    .await
+    .map_err(|err| {
+      error!("error: {:?}", err);
+      "there was an error".to_string()
+    })?;
+
+  Ok("success".to_string())
+}
+
+pub async fn generate_image(request: SoraImageRemixCommand, app_data_root: &AppDataRoot) -> AnyhowResult<()> {
+  let sora_credentials = get_credentials(app_data_root)?;
+
+  let sora_media_tokens = vec![];
+
+  // TODO(bt,2025-04-21): Download media tokens.
+  //  Note: This is incredibly inefficient. We should keep a local cache.
+  //  Also, if they've already been uploaded to OpenAI, we shouldn't continue to re-upload.
+
+  let response = sora_image_gen_remix(SoraImageGenRemixRequest {
+    prompt: request.prompt.to_string(),
+    num_images: NumImages::One,
+    image_size: ImageSize::Square,
+    sora_media_tokens: sora_media_tokens.clone(),
+    credentials: &sora_credentials,
+  }).await
+      .map_err(|err| {
+        error!("Failed to call Sora image generation: {:?}", err);
+        err
+      })?;
+
+  println!(">> TASK ID: {:?} ", response.task_id);
+
+  Ok(())
+}
+
+fn get_credentials(app_data_root: &AppDataRoot) -> AnyhowResult<SoraCredentials> {
+  let cookie_file = app_data_root.get_sora_cookie_file_path();
+
+  let bearer = read_to_string("/Users/bt/dev/storyteller/storyteller-rust/test_data/temp/bearer.txt")?
+      .trim()
+      .to_string();
+
+  let cookie= read_to_string(cookie_file)?
+      .trim()
+      .to_string();
+
+  let sentinel = read_to_string("/Users/bt/dev/storyteller/storyteller-rust/test_data/temp/sentinel.txt")?
+      .trim()
+      .to_string();
+
+  Ok(SoraCredentials {
+    bearer_token: bearer,
+    cookie: cookie,
+    sentinel: Some(sentinel),
+  })
+}

crates/desktop/tauri-artcraft/src/lib.rs

@@ -6,10 +6,11 @@ pub mod transfer;
 pub mod utils;
 
 use crate::commands::flip_image::flip_image;
-use crate::commands::image_generation_command::image_generation_command;
-use crate::commands::open_login_command::open_login_command;
+use crate::commands::sora::open_sora_login_command::open_sora_login_command;
+use crate::commands::sora::sora_image_generation_command::sora_image_generation_command;
+use crate::commands::sora::sora_image_remix_command::sora_image_remix_command;
 use crate::state::app_config::AppConfig;
-use crate::threads::login_thread::login_thread;
+use crate::threads::sora_session_login_thread::sora_session_login_thread;
 
 use tauri_plugin_log::Target;
 use tauri_plugin_log::TargetKind;
@@ -49,7 +50,7 @@ pub fn run() {
       //}
       let app = app.handle().clone();
 
-      tauri::async_runtime::spawn(login_thread(app, app_data_root2));
+      tauri::async_runtime::spawn(sora_session_login_thread(app, app_data_root2));
 
       Ok(())
     })
@@ -57,8 +58,9 @@ pub fn run() {
     .manage(app_data_root)
     .invoke_handler(tauri::generate_handler![
       flip_image,
-      image_generation_command,
-      open_login_command,
+      open_sora_login_command,
+      sora_image_generation_command,
+      sora_image_remix_command,
     ])
     .run(tauri::generate_context!("tauri.conf.json"))
     .expect("error while running tauri application");

crates/desktop/tauri-artcraft/src/threads/mod.rs

@@ -1 +1 @@
-pub mod login_thread;
+pub mod sora_session_login_thread;

crates/desktop/tauri-artcraft/src/threads/sora_session_login_thread.rs

@@ -23,7 +23,7 @@ pub static SORA_ROOT_URL: Lazy<Url> = Lazy::new(|| {
   Url::parse(SORA_ROOT_URL_STR).expect("URL should parse")
 });
 
-pub async fn login_thread(app: AppHandle, app_data_root: AppDataRoot) -> ! {
+pub async fn sora_session_login_thread(app: AppHandle, app_data_root: AppDataRoot) -> ! {
   loop {
     for (window_name, webview) in app.webviews() {
       if window_name == LOGIN_WINDOW_NAME {

crates/service/web/storyteller_web/Cargo.toml

@@ -68,7 +68,7 @@ reusable_types = { path = "../../../_types/reusable_types" }
 server_environment = { path = "../../../lib/server_environment" }
 shared_service_components = { workspace = true }
 thumbnail_generator = { path = "../../../lib/api_clients/thumbnail_generator" }
-tokens = { path = "../../../_types/tokens" }
+tokens = { workspace = true }
 tts_common = { path = "../../../lib/tts_common" }
 url_config = { path = "../../../lib/url_config" }
 user_input_common = { path = "../../../lib/user_input_common" }

frontend/apps/editor2d/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts

@@ -520,24 +520,47 @@ export class RealTimeDrawEngine {
     if (!this.captureCanvas) {
       return;
     }
-    const scaleFactor = 1;
+    const scaleFactor = 0.9;
     // Store old values for calculating delta
     const oldPositionX = this.positionX;
     const oldPositionY = this.positionY;
 
-    // If width/height aren't provided, use window dimensions
+    const oldWidth = this.width;
+    const oldHeight = this.height;
+
+    // Original aspect ratio
+    const originalAspectRatio = oldWidth / oldHeight;
+
+    // Calculate new dimensions based on window size
+    let newWidth: number;
+    let newHeight: number;
+
     if (width === undefined) {
-      this.width = window.innerWidth * scaleFactor; // Using 80% of window width
+      newWidth = window.innerWidth * scaleFactor;
     } else {
-      this.width = width * scaleFactor;
+      newWidth = width * scaleFactor;
     }
 
     if (height === undefined) {
-      this.height = window.innerHeight * scaleFactor; // Using 80% of window height
+      newHeight = window.innerHeight * scaleFactor;
     } else {
-      this.height = height * scaleFactor;
+      newHeight = height * scaleFactor;
     }
 
+    // Preserve aspect ratio
+    const newAspectRatio = newWidth / newHeight;
+
+    if (newAspectRatio > originalAspectRatio) {
+      // Width is constraining factor
+      newWidth = newHeight * originalAspectRatio;
+    } else {
+      // Height is constraining factor
+      newHeight = newWidth / originalAspectRatio;
+    }
+
+    this.width = newWidth;
+    this.height = newHeight;
+
     console.log("New dimensions:", this.width, this.height);
 
     // Calculate new position to center the canvas in the window
@@ -553,9 +576,12 @@ export class RealTimeDrawEngine {
     });
     this.captureCanvas.size({ width: this.width, height: this.height });
 
-    // Calculate the change in position
-    const deltaX = this.positionX - oldPositionX;
-    const deltaY = this.positionY - oldPositionY;
+    // Calculate scale factors to maintain proportions
+    const scaleX = this.width / oldWidth;
+    const scaleY = this.height / oldHeight;
+
+    // Use a uniform scale factor to preserve aspect ratio
+    const uniformScale = Math.min(scaleX, scaleY);
 
     // Update all children except the capture canvas
     var children = this.mediaLayerRef.getChildren();
@@ -566,11 +592,27 @@ export class RealTimeDrawEngine {
       if (node.name() === "CaptureCanvas") {
         continue;
       }
+
       const pos = node.getPosition();
+      const oldScale = node.scale();
+
+      // Apply both position shift and scaling to maintain relative positioning
       node.setPosition({
-        x: pos.x + deltaX,
-        y: pos.y + deltaY,
+        x: (pos.x - oldPositionX) * uniformScale + this.positionX,
+        y: (pos.y - oldPositionY) * uniformScale + this.positionY,
       });
+
+      // Update scale proportionally if the node has a scale property
+      if (
+        oldScale &&
+        typeof oldScale.x === "number" &&
+        typeof oldScale.y === "number"
+      ) {
+        node.scale({
+          x: oldScale.x * uniformScale,
+          y: oldScale.y * uniformScale,
+        });
+      }
     }
 
     this.mediaLayerRef.batchDraw();

frontend/apps/editor2d/src/app/pages/main/index.tsx

@@ -134,7 +134,7 @@ export const Main = withProtectionRoute(() => {
             iconFlip={true}
             onClick={async () => {
               if (isTauri()) {
-                await invoke('open_login_command');
+                await invoke('open_sora_login_command');
                 setFirstTimeDialogOpen(false);
               } else {
                 console.error('Tauri is not available in this environment');

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

@@ -177,7 +177,100 @@ export const PromptBox = () => {
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setPrompt(e.target.value);
   };
+  const handleTauriEnqueue = async () => {
+    const api = new Api();
+    let image = getCanvasRenderBitmap();
+    if (image === undefined) {
+      return;
+    }
+    const base64Bitmap = await EncodeImageBitmapToBase64(image);
 
+    const byteString = atob(base64Bitmap);
+    const mimeString = "image/png";
+
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+
+    const uuid = crypto.randomUUID(); // Generate a new UUID
+    const file = new File([ab], `${uuid}.png`, { type: mimeString });
+
+    const snapshotMediaToken = await api.uploadSceneSnapshot({
+      screenshot: file,
+    });
+
+    if (snapshotMediaToken.data === undefined) {
+      toast.error("Error: Unable to upload scene snapshot Please try again.");
+      return;
+    }
+    console.log("useSystemPrompt", useSystemPrompt);
+    console.log("Snapshot media token:", snapshotMediaToken.data);
+
+    const generateResponse = await invoke("sora_image_generation_command", {
+      snapshot_media_token: snapshotMediaToken.data,
+      disable_system_prompt: !useSystemPrompt,
+      prompt: prompt,
+      maybe_additional_images: referenceImages.map((image) => image.mediaToken),
+      maybe_number_of_samples: 1,
+    });
+    toast.success("Please wait while we process your image.");
+  };
+
+  const handleWebEnqueue = async () => {
+    const api = new Api();
+    let image = getCanvasRenderBitmap();
+    if (image === undefined) {
+      toast.error(
+        "Error: Unable to generate image. Please check the input and try again.",
+      );
+      return;
+    }
+    const base64Bitmap = await EncodeImageBitmapToBase64(image);
+
+    const byteString = atob(base64Bitmap);
+    const mimeString = "image/png";
+
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+
+    const uuid = crypto.randomUUID(); // Generate a new UUID
+    const file = new File([ab], `${uuid}.png`, { type: mimeString });
+
+    const snapshotMediaToken = await api.uploadSceneSnapshot({
+      screenshot: file,
+    });
+
+    if (snapshotMediaToken.data === undefined) {
+      toast.error("Error: Unable to upload scene snapshot Please try again.");
+      return;
+    }
+    console.log("useSystemPrompt", useSystemPrompt);
+    console.log("Snapshot media token:", snapshotMediaToken.data);
+
+    const response = await api.enqueueImageGeneration({
+      disableSystemPrompt: !useSystemPrompt,
+      prompt: prompt,
+      snapshotMediaToken: snapshotMediaToken.data,
+      additionalImages: referenceImages.map((image) => image.mediaToken),
+    });
+
+    if (response.success === true) {
+      toast.success("Please wait while we process your image.");
+      if (response.data) {
+        addJobToken(response.data);
+      }
+      return;
+    } else {
+      toast.error("Failed to enqueue image generation. Please try again.");
+    }
+  };
   const handleEnqueue = async () => {
     if (!prompt.trim()) return;
 
@@ -191,69 +284,10 @@ export const PromptBox = () => {
         referenceImages,
       );
 
-      if (isDesktopApp) {
-        let image = getCanvasRenderBitmap();
-        if (image === undefined) {
-          return;
-        }
-        const base64Bitmap = await EncodeImageBitmapToBase64(image);
-        const generateResponse = await invoke("image_generation_command", {
-          image: base64Bitmap,
-          prompt: prompt,
-        });
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-      }
-
-      if (!isDesktopApp) {
-        const api = new Api();
-        let image = getCanvasRenderBitmap();
-        if (image === undefined) {
-          toast.error(
-            "Error: Unable to generate image. Please check the input and try again.",
-          );
-          return;
-        }
-        const base64Bitmap = await EncodeImageBitmapToBase64(image);
-        const byteString = atob(base64Bitmap);
-        const mimeString = "image/png";
-        const ab = new ArrayBuffer(byteString.length);
-        const ia = new Uint8Array(ab);
-
-        for (let i = 0; i < byteString.length; i++) {
-          ia[i] = byteString.charCodeAt(i);
-        }
-
-        const uuid = crypto.randomUUID(); // Generate a new UUID
-        const file = new File([ab], `${uuid}.png`, { type: mimeString });
-
-        const snapshotMediaToken = await api.uploadSceneSnapshot({
-          screenshot: file,
-        });
-
-        if (snapshotMediaToken.data === undefined) {
-          toast.error(
-            "Error: Unable to upload scene snapshot Please try again.",
-          );
-          return;
-        }
-        console.log("useSystemPrompt", useSystemPrompt);
-        console.log("Snapshot media token:", snapshotMediaToken.data);
-        const response = await api.enqueueImageGeneration({
-          disableSystemPrompt: !useSystemPrompt,
-          prompt: prompt,
-          snapshotMediaToken: snapshotMediaToken.data,
-          additionalImages: referenceImages.map((image) => image.mediaToken),
-        });
-
-        if (response.success === true) {
-          toast.success("Please wait while we process your image.");
-          if (response.data) {
-            addJobToken(response.data);
-          }
-          return;
-        } else {
-          toast.error("Failed to enqueue image generation. Please try again.");
-        }
+      if (isDesktopApp == true) {
+        handleTauriEnqueue();
+      } else {
+        handleWebEnqueue();
       }
     } catch (error) {
       console.error("Error during image generation:", error);

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

@@ -13,6 +13,7 @@ import { getCurrentLocationWithoutParams } from "~/utilities";
 import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity";
 import { LibraryModal } from "~/pages/PageEnigma/comps/LibraryModal/LibraryModal";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
+import { Tooltip } from "@storyteller/ui-tooltip";
 
 function isEditorPath(path: string) {
   if (path === "/") return true;
@@ -75,12 +76,14 @@ export const TopBar = ({ pageName }: Props) => {
 
           <div className="flex justify-end gap-3.5">
             <div className="flex gap-2">
-              <Button
-                variant="secondary"
-                icon={faGear}
-                className="h-[38px] w-[38px]"
-                onClick={() => setIsSettingsModalOpen(true)}
-              />
+              <Tooltip content="Settings" position="bottom" delay={300}>
+                <Button
+                  variant="secondary"
+                  icon={faGear}
+                  className="h-[38px] w-[38px]"
+                  onClick={() => setIsSettingsModalOpen(true)}
+                />
+              </Tooltip>
               <Button
                 variant="secondary"
                 icon={faImages}

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/KinHelpers/FKBoneFilter.ts

@@ -0,0 +1,23 @@
+export const FKBoneBlacklistStrings = [
+  "def",
+  "toe_end",
+  "thumb",
+  "index",
+  "handmiddle",
+  "handring",
+  "pinky",
+  "headtop",
+  "ear",
+  "teeth",
+  "eye",
+  "lid",
+  "jaw",
+  "tongue",
+  "lip",
+  "chin",
+  "brow",
+  "cheek",
+  "forehead",
+  "nose",
+  "temple"
+];

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/KinHelpers/FKHelper.ts

@@ -1,5 +1,6 @@
-import { TransformControls } from "three/examples/jsm/Addons";
 import * as THREE from "three";
+import { TransformControls } from "three/examples/jsm/Addons";
+import { FKBoneBlacklistStrings } from "./FKBoneFilter";
 
 export const FKHelperSphereName = "__FKHelperSphere__";
 
@@ -50,10 +51,21 @@ export class FKHelper {
     // TODO: Highlight all the necessary bones
     this.clear();
     target.traverse((child) => {
+      // Skip if not bone
       if (child.type !== "Bone") {
         return;
       }
 
+      // Skip if bones is one of the blacklisted ones
+      // This step could probably be optimized better
+      for (const blacklistedBone of FKBoneBlacklistStrings) {
+        if (child.name.toLowerCase().includes(blacklistedBone)) {
+          return;
+        }
+      }
+
+      console.log(child.name);
+
       // For each target bone, display a sphere to show the FK target and raycast intersect
       const geometry = new THREE.SphereGeometry(0.015, 16, 16);
       const material = new THREE.MeshBasicMaterial({ color: 0xff0000, depthTest: false, transparent: true });
@@ -75,6 +87,7 @@ export class FKHelper {
 
     this.skeletonHelper = new THREE.SkeletonHelper(target);
     this.scene.add(this.skeletonHelper);
+    console.log("All bones:", this.skeletonHelper.bones.map((b) => b.name));
   }
 
   onMouseClick(mouse: THREE.Vector2) {

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx

@@ -14,9 +14,18 @@ import {
   faImage,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, CloseButton, Input, Tooltip } from "~/components";
+import { Tooltip } from "@storyteller/ui-tooltip";
+import { Button } from "@storyteller/ui-button";
+import { CloseButton } from "@storyteller/ui-close-button";
+import { Input } from "@storyteller/ui-input";
 import { TabSelector } from "~/components/reusable/TabSelector";
-import { useState, useEffect, useMemo, useRef } from "react";
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  ChangeEvent,
+} from "react";
 import { ItemElements } from "../SidePanelTabs/sharedComps/ItemElements";
 import {
   demoSkyboxItems,
@@ -412,6 +421,7 @@ export const AssetModal = () => {
         onClose={handleClose}
         className="h-[640px] max-w-4xl"
         childPadding={false}
+        showClose={false}
       >
         <div className="grid h-full grid-cols-12 gap-3">
           <div className="relative col-span-3 flex h-full flex-col p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-gray-200 after:dark:bg-white/10">
@@ -498,7 +508,9 @@ export const AssetModal = () => {
                       inputClassName="pr-2.5"
                       icon={faSearch}
                       value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setSearchTerm(e.target.value)
+                      }
                       iconClassName="text-white/60"
                     />
                     {searchTerm && (

frontend/apps/editor3d/package.json

@@ -89,9 +89,9 @@
     "@storybook/test": "^8.1.10",
     "@types/deep-equal": "^1.0.4",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.20",
+    "@types/react": "^19.0.0",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^19.0.0",
     "@types/react-helmet": "^6.1.11",
     "@types/three": "^0.162.0",
     "@types/uuid": "^9.0.8",

frontend/apps/editor3d/tsconfig.json

@@ -21,9 +21,24 @@
     "noEmit": true
   },
   "references": [
+    {
+      "path": "../../libs/components/input"
+    },
+    {
+      "path": "../../libs/components/close-button"
+    },
+    {
+      "path": "../../libs/components/button"
+    },
+    {
+      "path": "../../libs/components/modal"
+    },
     {
       "path": "../../libs/components/toaster"
     },
+    {
+      "path": "../../libs/components/tooltip"
+    },
     {
       "path": "../../libs/components/settings-modal"
     }

frontend/libs/components/tooltip/.babelrc

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

frontend/libs/components/tooltip/README.md

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

frontend/libs/components/tooltip/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-tooltip",
+  "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/tooltip/src/index.ts

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

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

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

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

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

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

@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+interface TooltipProps {
+  children: React.ReactElement;
+  content: React.ReactNode;
+  position: "top" | "bottom" | "left" | "right";
+  className?: string;
+  delay?: number;
+  closeOnClick?: boolean;
+}
+
+export const Tooltip = ({
+  children,
+  content,
+  position,
+  className,
+  delay = 300,
+  closeOnClick = false,
+}: TooltipProps) => {
+  const [isShowing, setIsShowing] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  const checkForOpenPopovers = () => {
+    if (!triggerRef.current) return false;
+    return (
+      triggerRef.current.querySelectorAll('[data-headlessui-state="open"]')
+        .length > 0
+    );
+  };
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "data-headlessui-state"
+        ) {
+          const target = mutation.target as HTMLElement;
+          if (target.getAttribute("data-headlessui-state") === "open") {
+            setIsShowing(false);
+          }
+        }
+      });
+    });
+
+    if (triggerRef.current) {
+      observer.observe(triggerRef.current, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ["data-headlessui-state"],
+      });
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const getStyleForPosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      switch (position) {
+        case "top":
+          return {
+            bottom: rect.height + 10,
+            left: "50%",
+            transform: "translateX(-50%)",
+          };
+        case "bottom":
+          return {
+            top: rect.height + 10,
+            left: "50%",
+            transform: "translateX(-50%)",
+          };
+        case "left":
+          return {
+            right: rect.width + 10,
+            top: "50%",
+            transform: "translateY(-50%)",
+          };
+        case "right":
+          return {
+            left: rect.width + 10,
+            top: "50%",
+            transform: "translateY(-50%)",
+          };
+        default:
+          return {};
+      }
+    }
+    return {};
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (closeOnClick) {
+      setIsShowing(false);
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    <div
+      ref={triggerRef}
+      onMouseEnter={() => {
+        if (!checkForOpenPopovers()) {
+          setIsShowing(true);
+        }
+      }}
+      onMouseLeave={() => {
+        setIsShowing(false);
+      }}
+      onClick={handleClick}
+      className="relative"
+    >
+      {children}
+      <Transition
+        show={isShowing}
+        enter={twMerge(
+          "transition ease-out duration-200",
+          delay ? `delay-[${delay}ms]` : "delay-[300ms]"
+        )}
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div
+          ref={tooltipRef}
+          style={{
+            ...getStyleForPosition(),
+            transitionDelay: `${delay}ms`,
+            transitionProperty: "opacity",
+            transitionDuration: "200ms",
+            transitionTimingFunction: "ease-out",
+          }}
+          className={twMerge(
+            "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 : ""
+          )}
+        >
+          {content}
+        </div>
+      </Transition>
+    </div>
+  );
+};
+
+export default Tooltip;

frontend/libs/components/tooltip/tsconfig.json

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

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

@@ -0,0 +1,41 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["dom", "esnext"],
+    "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/tooltip/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/tooltip/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/tooltip',
+  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-tooltip',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));

frontend/package-lock.json

@@ -1206,9 +1206,9 @@
         "@storybook/test": "^8.1.10",
         "@types/deep-equal": "^1.0.4",
         "@types/jest": "^29.5.12",
-        "@types/react": "^18.2.20",
+        "@types/react": "^19.0.0",
         "@types/react-copy-to-clipboard": "^5.0.7",
-        "@types/react-dom": "^18.2.7",
+        "@types/react-dom": "^19.0.0",
         "@types/react-helmet": "^6.1.11",
         "@types/three": "^0.162.0",
         "@types/uuid": "^9.0.8",
@@ -1651,27 +1651,6 @@
         "react": "^16.14.0 || 17.x || 18.x || 19.x"
       }
     },
-    "apps/editor3d/node_modules/@types/react": {
-      "version": "18.3.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
-      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "apps/editor3d/node_modules/@types/react-dom": {
-      "version": "18.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
-      "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^18.0.0"
-      }
-    },
     "apps/editor3d/node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -2054,6 +2033,10 @@
       "name": "@storyteller/ui-toaster",
       "version": "0.0.1"
     },
+    "libs/components/tooltip": {
+      "name": "@storyteller/ui-tooltip",
+      "version": "0.0.1"
+    },
     "libs/login": {
       "name": "@frontend/login",
       "version": "0.0.1"
@@ -10096,6 +10079,10 @@
       "resolved": "libs/components/toaster",
       "link": true
     },
+    "node_modules/@storyteller/ui-tooltip": {
+      "resolved": "libs/components/tooltip",
+      "link": true
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",

frontend/tsconfig.json

@@ -38,6 +38,9 @@
     },
     {
       "path": "./libs/components/select"
+    },
+    {
+      "path": "./libs/components/tooltip"
     }
   ]
 }

script/desktop/launch_desktop_2d.sh

@@ -12,8 +12,8 @@ if lsof -i tcp:5741 &>/dev/null; then
 else
   echo "No process running on port 5741"
 fi
+
 # TODO(bt,2025-02-13): This is not the correct way to get the root dir
-brew install pkg-config pixman cairo pango libpng jpeg giflib librsvg
 root_dir=$(pwd)
 frontend_path="${root_dir}/frontend"
 
@@ -30,3 +30,4 @@ export CONFIG_PATH="${TAURI_APP_PATH}/tauri.artcraft_2d.conf.toml"
 
 # TODO: --no-watch
 cargo tauri dev --config "${CONFIG_PATH}"
+