shared toaster component

.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-    "files.exclude": {
-        "**/*~": true,
-        "frontend_old/**": true
-    }
-}

Cargo.lock

@@ -802,6 +802,47 @@ dependencies = [
  "num",
 ]
 
+[[package]]
+name = "artcraft"
+version = "0.1.0"
+dependencies = [
+ "anyhow",
+ "assertor",
+ "base64 0.22.1",
+ "bytes 1.10.0",
+ "chrono",
+ "const_format",
+ "crockford",
+ "directories 6.0.0",
+ "dirs 6.0.0",
+ "errors",
+ "filesys",
+ "futures 0.3.29",
+ "image",
+ "libloading 0.8.6",
+ "log",
+ "memory_caching",
+ "once_cell",
+ "openai_sora_client",
+ "primitives",
+ "rand 0.9.0",
+ "reqwest 0.12.15",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "serde_yaml",
+ "serial_test",
+ "subprocess_common",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-log",
+ "tempdir",
+ "tempfile",
+ "tokio",
+ "tokio-util",
+ "workspace-build-acceleration",
+]
+
 [[package]]
 name = "ascii"
 version = "0.9.3"
@@ -11985,47 +12026,6 @@ dependencies = [
  "windows 0.60.0",
 ]
 
-[[package]]
-name = "tauri-artcraft"
-version = "0.1.0"
-dependencies = [
- "anyhow",
- "assertor",
- "base64 0.22.1",
- "bytes 1.10.0",
- "chrono",
- "const_format",
- "crockford",
- "directories 6.0.0",
- "dirs 6.0.0",
- "errors",
- "filesys",
- "futures 0.3.29",
- "image",
- "libloading 0.8.6",
- "log",
- "memory_caching",
- "once_cell",
- "openai_sora_client",
- "primitives",
- "rand 0.9.0",
- "reqwest 0.12.15",
- "serde",
- "serde_derive",
- "serde_json",
- "serde_yaml",
- "serial_test",
- "subprocess_common",
- "tauri",
- "tauri-build",
- "tauri-plugin-log",
- "tempdir",
- "tempfile",
- "tokio",
- "tokio-util",
- "workspace-build-acceleration",
-]
-
 [[package]]
 name = "tauri-build"
 version = "2.1.1"

Cargo.toml

@@ -24,7 +24,7 @@ members = [
   "crates/cli/production/migration-tool",
 
   # Desktop apps
-  "crates/desktop/tauri-artcraft",
+  "crates/desktop/tauri-4o",
   "crates/desktop/tauri-realtime",
 
   # Shared libraries

crates/desktop/tauri-4o/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "tauri-artcraft"
+name = "artcraft"
 version = "0.1.0"
 description = "Artcraft"
 authors = ["you"]
@@ -12,7 +12,7 @@ publish = false
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [lib]
-name = "tauri_artcraft_app_lib"
+name = "app_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 
 [build-dependencies]

crates/desktop/tauri-4o/src/main.rs

@@ -2,5 +2,5 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 fn main() {
-  tauri_artcraft_app_lib::run();
+  app_lib::run();
 }

crates/desktop/tauri-4o/tauri.conf.json

@@ -2,12 +2,12 @@
   "$schema": "https://schema.tauri.app/config/2.0.0-rc",
   "productName": "ArtCraft",
   "version": "0.1.0",
-  "identifier": "ai.artcraft.app",
+  "identifier": "com.unique.value.thing.why",
   "build": {
-    "frontendDist": "../../../frontend/apps/editor3d/dist",
-    "devUrl": "http://localhost:5173",
-    "beforeDevCommand": "nx run editor3d:dev",
-    "beforeBuildCommand": "nx run editor3d:build"
+    "frontendDist": "../../../frontend/realtime/dist",
+    "devUrl": "http://localhost:5174",
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build2"
   },
   "app": {
     "windows": [

crates/desktop/tauri-4o/tests/test_dynamic_library_loading.rs

@@ -0,0 +1,7 @@
+
+#[test]
+fn test_dynamic_library_loading() {
+  let name = libloading::library_filename("cublas");
+
+  assert_eq!(name, "libcublas.so");
+}

crates/desktop/tauri-artcraft/tauri.artcraft_2d.conf.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
-  "productName": "ArtCraft 2D",
-  "version": "0.1.0",
-  "identifier": "ai.artcraft.app",
-  "build": {
-    "frontendDist": "../../../frontend/apps/editor2d/dist",
-    "devUrl": "http://localhost:5173",
-    "beforeDevCommand": "nx run editor2d:dev",
-    "beforeBuildCommand": "nx run editor2d:build"
-  },
-  "app": {
-    "windows": [
-      {
-        "title": "ArtCraft 2D",
-        "width": 2400,
-        "height": 1300,
-        "resizable": true,
-        "fullscreen": false
-      }
-    ],
-    "security": {
-      "csp": null
-    }
-  },
-  "bundle": {
-    "active": true,
-    "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ]
-  }
-}

crates/desktop/tauri-artcraft/tauri.artcraft_2d.conf.toml

@@ -1,5 +0,0 @@
-# For some reason, we can't pass json files to the tauri dev command
-[build]
-frontendDist = "../../../frontend/apps/editor2d/dist"
-beforeDevCommand = "nx run editor2d:dev"
-devUrl = "http://localhost:5741"

crates/desktop/tauri-artcraft/tauri.artcraft_3d.conf.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
-  "productName": "ArtCraft 3D",
-  "version": "0.1.0",
-  "identifier": "ai.artcraft.app",
-  "build": {
-    "frontendDist": "../../../frontend/apps/editor3d/dist",
-    "devUrl": "http://localhost:5173",
-    "beforeDevCommand": "nx run editor3d:dev",
-    "beforeBuildCommand": "nx run editor3d:build"
-  },
-  "app": {
-    "windows": [
-      {
-        "title": "ArtCraft 3D",
-        "width": 2400,
-        "height": 1300,
-        "resizable": true,
-        "fullscreen": false
-      }
-    ],
-    "security": {
-      "csp": null
-    }
-  },
-  "bundle": {
-    "active": true,
-    "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ]
-  }
-}

frontend/apps/editor2d/src/app/global.css

@@ -125,10 +125,6 @@
     @apply relative border border-ui-border shadow-lg backdrop-blur-xl transition-colors duration-300;
     @apply bg-ui-controls/50 hover:bg-ui-controls/90 !important;
   }
-
-  .glass-no-hover {
-    @apply hover:bg-ui-controls/50 !important;
-  }
 }
 
 @keyframes glow {

frontend/apps/editor2d/src/app/pages/login.tsx

@@ -1,9 +1,12 @@
 import { useRef } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
+
 import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { Button, Input, LoadingSpinner } from "~/components/ui";
 import { authentication } from "~/signals";
+
+import { paperWrapperStyles } from "~/components/styles";
 import { twMerge } from "tailwind-merge";
 
 export const Login = () => {
@@ -59,21 +62,24 @@ export const Login = () => {
   });
 
   return (
-    <div className="pegboard fixed flex h-full w-full flex-col items-center justify-center bg-center bg-repeat">
-      <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
+    <div className="fixed flex h-full w-full flex-col items-center justify-center bg-[url('/svg/bg-dots.svg')] bg-[length:200px_200px] bg-center bg-repeat">
+      <div className="my-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
         <img
-          src="/brand/artcraft-logo.png"
-          alt="ArtCraft Logo"
-          className="h-9 select-none"
+          src="/brand/Storyteller-Logo-Black.png"
+          alt="Storyteller Logo"
+          className="h-11 select-none"
         />
       </div>
       <div className="w-full max-w-xl rounded-xl shadow-lg">
         <div
           className={twMerge(
-            "glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none",
+            paperWrapperStyles,
+            "relative mx-auto w-full rounded-none rounded-t-xl p-8 shadow-none",
           )}
         >
-          <h1 className="mb-6 text-center text-2xl font-bold">Log in</h1>
+          <h1 className="mb-9 text-center text-2xl font-bold">
+            Log in to Board
+          </h1>
           <form
             ref={formRef}
             onSubmit={handleOnSumbit}
@@ -100,7 +106,7 @@ export const Login = () => {
               required
             />
 
-            <Button className="mt-4 py-3">Continue</Button>
+            <Button className="mt-6 py-3">Continue</Button>
           </form>
           {shouldShowLoader && (
             <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
@@ -108,10 +114,10 @@ export const Login = () => {
             </div>
           )}
         </div>
-        <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
+        <div className="align-items flex w-full max-w-xl rounded-b-xl border border-t-0 bg-gray-100 px-8 py-4">
           <a
             href="https://storyteller.ai/password-reset"
-            className="grow text-sm !text-primary-400 transition-all duration-150 hover:!text-primary-300"
+            className="text-brand-primary hover:text-brand-primary-400 grow text-sm transition-all duration-150"
           >
             Forgot your password?
           </a>

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

@@ -14,17 +14,10 @@ import { appMode } from "~/signals";
 import { useSignals } from "@preact/signals-react/runtime";
 import { GenerationRootComponent } from "~/GenerationRootComponent/GenerationRootComponent";
 import { EditModeRootComponent } from "~/EditModeRootComponent/EditModeRootComponent";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { EngineType } from "~/KonvaApp";
 import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
 import { GalleryRootComponent } from "~/GalleryRootComponent";
-import { BaseDialog } from "~/components/ui/BaseDialog";
-import { Button } from "~/components/ui/Button";
-import {
-  faArrowRight,
-  faMagicWandSparkles,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -39,7 +32,6 @@ export const Main = withProtectionRoute(() => {
 
   const realtimeEngineRef = useRef<EngineType | null>(null);
   const generationEngineRef = useRef<GenerationEngine | null>(null);
-  const [firstTimeDialogOpen, setFirstTimeDialogOpen] = useState(true);
 
   const appModeValue = appMode.value;
   let childView;
@@ -68,72 +60,25 @@ export const Main = withProtectionRoute(() => {
   }
 
   return (
-    <>
-      <div className="fixed h-full w-full">
-        <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
-          {childView}
-        </div>
-        <div className="absolute top-0 w-full p-3.5">
-          <div className="relative flex w-full">
-            <div className="absolute left-0">
-              <ToolbarTopLeft />
-            </div>
-            <div className="flex w-full justify-center">
-              <ToolbarTopCenter />
-            </div>
-            <div className="absolute right-0">
-              <ToolbarTopRight />
-            </div>
-          </div>
-        </div>
-        {appModeValue === "gallery" && (
-          <GalleryRootComponent className="z-1 fixed h-full w-full bg-black" />
-        )}
+    <div className="fixed h-full w-full">
+      <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
+        {childView}
       </div>
-      <BaseDialog
-        isOpen={firstTimeDialogOpen}
-        onClose={() => {
-          setFirstTimeDialogOpen(false);
-        }}
-        className="max-w-5xl"
-      >
-        <div className="flex flex-col items-center justify-center gap-6">
-          <div className="flex flex-col items-center gap-3">
-            <h1 className="text-3xl font-bold">
-              <FontAwesomeIcon
-                icon={faMagicWandSparkles}
-                className="mr-3 text-[24px]"
-              />
-              Welcome to ArtCraft
-            </h1>
-            <div className="text-center">
-              <p className="text-lg font-medium text-white/80">
-                Your creative canvas for digital art and design
-              </p>
-              <p className="text-white/60">
-                Draw freely, create collages, and design with our intuitive
-                tool. Bring your ideas to life in seconds!
-              </p>
-            </div>
+      <div className="absolute top-0 w-full p-3.5">
+        <div className="relative flex w-full">
+          <div className="absolute left-0">
+            <ToolbarTopLeft />
           </div>
-
-          <div className="aspect-video w-full overflow-hidden rounded-md">
-            <video autoPlay muted loop controls={false}>
-              <source src="/videos/demo_video.mp4" type="video/mp4" />
-            </video>
+          <div className="flex w-full justify-center">
+            <ToolbarTopCenter />
+          </div>
+          <div className="absolute right-0">
+            <ToolbarTopRight />
           </div>
-          <Button
-            className="px-4 py-3 font-semibold"
-            icon={faArrowRight}
-            iconFlip={true}
-            onClick={() => {
-              setFirstTimeDialogOpen(false);
-            }}
-          >
-            Start creating now
-          </Button>
         </div>
-      </BaseDialog>
-    </>
+      </div>
+      {appModeValue === "gallery" &&
+      (<GalleryRootComponent className="fixed h-full w-full z-1 bg-black" />)}
+    </div>
   );
 });

frontend/apps/editor2d/src/app/pages/signup.tsx

@@ -1,9 +1,12 @@
 import { useRef } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
+
 import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { Button, Input, LoadingSpinner } from "~/components/ui";
 import { authentication } from "~/signals";
+
+import { paperWrapperStyles } from "~/components/styles";
 import { twMerge } from "tailwind-merge";
 
 export const Signup = () => {
@@ -74,21 +77,22 @@ export const Signup = () => {
   });
 
   return (
-    <div className="pegboard fixed flex h-full w-full flex-col items-center justify-center bg-center bg-repeat">
-      <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
+    <div className="fixed flex h-full w-full flex-col items-center justify-center bg-[url('/svg/bg-dots.svg')] bg-[length:200px_200px] bg-center bg-repeat">
+      <div className="my-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
         <img
-          src="/brand/artcraft-logo.png"
-          alt="ArtCraft Logo"
-          className="h-9 select-none"
+          src="/brand/Storyteller-Logo-Black.png"
+          alt="Storyteller Logo"
+          className="h-11 select-none"
         />
       </div>
       <div className="w-full max-w-xl rounded-xl shadow-lg">
         <div
           className={twMerge(
-            "glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none",
+            paperWrapperStyles,
+            "relative mx-auto w-full rounded-none rounded-t-xl p-8 shadow-none",
           )}
         >
-          <h1 className="mb-6 text-center text-2xl font-bold">
+          <h1 className="mb-9 text-center text-2xl font-bold">
             Create your Account
           </h1>
           <form
@@ -135,7 +139,7 @@ export const Signup = () => {
               required
             />
 
-            <Button className="mt-4 py-3">Create Account</Button>
+            <Button className="mt-6 py-3">Create Account</Button>
           </form>
           {shouldShowLoader && (
             <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
@@ -143,7 +147,7 @@ export const Signup = () => {
             </div>
           )}
         </div>
-        <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
+        <div className="align-items flex w-full max-w-xl rounded-b-xl border border-t-0 bg-gray-100 px-8 py-4">
           <div className="flex w-full justify-end gap-1 text-sm">
             <p className="opacity-75">Already have an account?</p>
             <Link to="/login">Log In</Link>

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

@@ -7,8 +7,6 @@ import {
   GenerationLoadingState,
   generationSignal,
 } from "~/signals";
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
-import { Button } from "~/components/ui/Button";
 
 // import { paperWrapperStyles } from "~/components/styles";
 // import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
@@ -34,10 +32,6 @@ export const ToolbarTopLeft = () => {
 
   const generationState = generationSignal.value;
 
-  const handleClick = () => {
-    window.location.href = "https://storyteller-3d.netlify.app/";
-  };
-
   console.log(appMode.value);
 
   return (
@@ -52,25 +46,14 @@ export const ToolbarTopLeft = () => {
         className="h-[28px] select-none"
       />
 
-      <Button
-        variant="secondary"
-        icon={faChevronRight}
-        iconClassName="text-xs"
-        iconFlip={true}
-        onClick={handleClick}
-        className="bg-transparent p-0 text-sm text-white/80 hover:bg-transparent hover:text-white hover:underline hover:underline-offset-2"
-      >
-        Go to 3D Stage Editor
-      </Button>
-
-      {/* <TabSelector
+      <TabSelector
         tabs={tabs}
         activeTab={activeTab.value}
         onTabChange={handleTabChange}
         disabled={
           generationState.loadingState === GenerationLoadingState.GENERATING
         }
-      /> */}
+      />
 
       {/* <ToolbarButton icon={faPlus}>
         <span className="font-semibold">New Board</span>

frontend/apps/editor3d/.husky/.gitignore

@@ -0,0 +1 @@
+_

frontend/apps/editor3d/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

frontend/apps/editor3d/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../**/*.mdx", "../**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {
+      builder: {
+        viteConfigPath: "sb-vite.config.ts",
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

frontend/apps/editor3d/.storybook/middleware.js

@@ -0,0 +1,34 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function expressMiddleware(router) {
+  router.use(
+    "/v1",
+    createProxyMiddleware({
+      target: "https://api.storyteller.ai/v1",
+      changeOrigin: true,
+      on: {
+        proxyReq: async (req, res) => {
+          req.setHeader("Access-Control-Allow-Origin", "*");
+          req.setHeader("Origin", "http://localhost:5173");
+          req.setHeader("Referer", "http://localhost:5173");
+        },
+      },
+      logger: console,
+    }),
+  );
+  router.use(
+    "/cdn-cgi",
+    createProxyMiddleware({
+      target: "https://cdn.storyteller.ai/cdn-cgi",
+      changeOrigin: true,
+      on: {
+        proxyReq: async (req, res) => {
+          req.setHeader("Access-Control-Allow-Origin", "*");
+          req.setHeader("Origin", "http://localhost:5173");
+          req.setHeader("Referer", "http://localhost:5173");
+        },
+      },
+      logger: console,
+    }),
+  );
+};

frontend/apps/editor3d/.storybook/preview-body.html

@@ -0,0 +1,7 @@
+<style>
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
+      Roboto, "Helvetica Neue", Arial, sans-serif;
+    color: white;
+  }
+</style>

frontend/apps/editor3d/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+  rel="stylesheet"
+/>

frontend/apps/editor3d/.storybook/preview.tsx

@@ -0,0 +1,23 @@
+import type { Preview } from "@storybook/react";
+import "tailwindcss/tailwind.css";
+import "../app/styles/tailwind.css";
+import "../app/styles/normalize.css?url";
+import "../app//styles/tailwind.css?url";
+import "../app//styles/base.css?url";
+import { MemoryRouter } from "react-router";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>,
+  ],
+};
+
+export default preview;