almost working with library imports, dev mode not working

- Also match all the shape sizes

crates/lib/mysql_queries/src/queries/generic_inference/web/list_session_jobs.rs

@@ -21,9 +21,14 @@ use crate::helpers::boolean_converters::i8_to_bool;
 use crate::payloads::generic_inference_args::generic_inference_args::{GenericInferenceArgs, PolymorphicInferenceArgs};
 use crate::queries::generic_inference::web::job_status::{GenericInferenceJobStatus, RequestDetails, ResultDetails, UserDetails};
 
+pub enum SessionUser<'a> {
+  User(&'a UserToken),
+  Anonymous(&'a AnonymousVisitorTrackingToken),
+}
+
 pub struct ListSessionJobsForUserArgs<'a> {
   // TODO(bt,2024-04-23): Support AnonymousVisitorToken
-  pub user_token: &'a UserToken,
+  pub user: SessionUser<'a>,
   pub maybe_include_job_statuses: Option<&'a HashSet<JobStatusPlus>>,
   pub maybe_exclude_job_statuses: Option<&'a HashSet<JobStatusPlus>>,
 }
@@ -63,14 +68,29 @@ pub async fn list_session_jobs_from_connection(
   // Furthermore, even though the join query's `created_at` lacks an index, sort
   // by id will accomplish this quickly.
   {
-    query_builder.push(r#"
-    INNER JOIN (
-       SELECT id
-       FROM generic_inference_jobs
-       WHERE maybe_creator_user_token =
-    "#);
-
-    query_builder.push_bind(args.user_token.to_string());
+    match args.user {
+      SessionUser::User(user_token) => {
+        query_builder.push(r#"
+          INNER JOIN (
+             SELECT id
+             FROM generic_inference_jobs
+             WHERE maybe_creator_user_token =
+          "#);
+        query_builder.push_bind(user_token.to_string());
+      }
+      SessionUser::Anonymous(avt_token) => {
+        query_builder.push(r#"
+          INNER JOIN (
+             SELECT id
+             FROM generic_inference_jobs
+             WHERE maybe_creator_anonymous_visitor_token =
+          "#);
+        query_builder.push_bind(avt_token.to_string());
+        query_builder.push(r#"
+            AND maybe_creator_user_token IS NULL
+        "#);
+      }
+    }
 
     query_builder.push(r#"
        AND created_at > DATE_SUB(NOW(), INTERVAL 36 HOUR)

crates/service/web/storyteller_web/src/http_server/endpoints/inference_job/list/list_session_jobs_handler.rs

@@ -31,7 +31,7 @@ use enums::by_table::generic_inference_jobs::inference_category::InferenceCatego
 use enums::common::job_status_plus::JobStatusPlus;
 use enums::no_table::style_transfer::style_transfer_name::StyleTransferName;
 use mysql_queries::queries::generic_inference::web::job_status::GenericInferenceJobStatus;
-use mysql_queries::queries::generic_inference::web::list_session_jobs::{list_session_jobs_from_connection, ListSessionJobsForUserArgs};
+use mysql_queries::queries::generic_inference::web::list_session_jobs::{list_session_jobs_from_connection, ListSessionJobsForUserArgs, SessionUser};
 use primitives::numerics::i64_to_u64_zero_clamped::i64_to_u64_zero_clamped;
 use redis_common::redis_keys::RedisKeys;
 use tokens::tokens::generic_inference_jobs::InferenceJobToken;
@@ -238,11 +238,6 @@ pub async fn list_session_jobs_handler(
         ListSessionJobsError::ServerError
       })?;
 
-  let session = match maybe_user_session {
-    Some(session) => session,
-    None => return Err(ListSessionJobsError::NotAuthorized),
-  };
-
   let include_states = query.include_states
       .as_deref()
       .map(|s| s.split(",")
@@ -255,8 +250,23 @@ pub async fn list_session_jobs_handler(
           .filter_map(|status| JobStatusPlus::from_str(status).ok())
           .collect::<HashSet<_>>());
 
+  let user;
+
+  match (maybe_user_session.as_ref(), maybe_avt_token.as_ref()) {
+    (Some(session), _) => {
+      user = SessionUser::User(&session.user_token_typed);
+    }
+    (None, Some(avt_token)) => {
+      user = SessionUser::Anonymous(avt_token);
+    }
+    (None, None) => {
+      // TODO(bt,2025-04-15): We should install an AVT cookie.
+      return Err(ListSessionJobsError::NotAuthorized);
+    }
+  }
+
   let args = ListSessionJobsForUserArgs {
-    user_token: &session.user_token_typed,
+    user,
     maybe_include_job_statuses: include_states.as_ref(),
     maybe_exclude_job_statuses: exclude_states.as_ref(),
   };

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",
@@ -15,6 +22,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@storyteller/api": "file:../../libs/utils/api",
+    "@storyteller/login": "file:../../libs/components/login",
     "@devnomic/marquee": "^1.0.3",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",

frontend/apps/editor2d/src/KonvaApp/Nodes/ShapeNode.ts

@@ -56,11 +56,8 @@ export class ShapeNode extends NetworkedNode {
     switch (shapeType) {
       case ShapeType.CIRCLE:
         shape = new Konva.Ellipse({
-          x: size.width,
-          y: size.height,
-          radiusX: size.width,
-          radiusY: size.height,
-          ...transform,
+          radiusX: size.width / 2,
+          radiusY: size.height / 2,
           fill: color,
           strokeScaleEnabled: false,
           draggable: true,
@@ -80,8 +77,6 @@ export class ShapeNode extends NetworkedNode {
 
       case ShapeType.TRIANGLE:
         shape = new Konva.Shape({
-          x: 0,
-          y: 0,
           width: size.width,
           height: size.height,
           ...transform,
@@ -113,12 +108,20 @@ export class ShapeNode extends NetworkedNode {
     this.size = size;
     this.color = color;
 
-    // Add shape to group
+    // Center the shape
     const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
       canvasOffset: canvasPosition,
-      componentSize: canvasSize,
+      componentSize: this.size,
       maxSize: canvasSize,
     });
+
+    // If the shape is an ellipse, the center is the origin so we need to offset it
+    if (shapeType === ShapeType.CIRCLE) {
+      centerPosition.x += size.width / 2;
+      centerPosition.y += size.height / 2;
+    }
+
+    // Add shape to group
     // bring to the front
     this.kNode.moveToTop();
     this.kNode.setPosition(centerPosition);

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

@@ -35,6 +35,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverItem } from "~/components/reusable/Popover";
 import { Api, ApiManager } from "~/KonvaApp/Api";
 import { useJobContext } from "~/components/JobContext";
+import { Login } from "@storyteller/login";
+//import { ApiFoo } from "@storyteller/api";
 interface ReferenceImage {
   id: string;
   url: string;
@@ -47,6 +49,11 @@ export const PromptBox = () => {
   const isDesktopApp = window.navigator.userAgent.includes("Tauri");
   console.log("Is this a desktop app?", isDesktopApp);
 
+
+  //const apiFoo = new ApiFoo();
+  //const result = apiFoo.add(1, 2);
+  //console.log("Result of apiFoo.add(1, 2):", result);
+
   const { jobTokens, addJobToken, removeJobToken, clearJobTokens } =
     useJobContext();
 
@@ -281,6 +288,7 @@ export const PromptBox = () => {
 
   return (
     <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col gap-3">
+      <Login />
       {(referenceImages.length > 0 || uploadingImages.length > 0) && (
         <div className="flex w-full gap-2">
           {referenceImages.map((image) => (

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

@@ -27,6 +27,8 @@ import { OnboardingHelper } from "./comps/OnboardingHelper";
 import { focalLengthDragging } from "./signals/camera";
 import { FocalLengthDisplay } from "./comps/FocalLengthDisplay/FocalLengthDisplay";
 
+import { Login } from "@storyteller/login";
+
 export const PageEditor = () => {
   useSignals();
 
@@ -83,6 +85,7 @@ export const PageEditor = () => {
   return (
     <div className="w-screen">
       <TopBar pageName="Edit Scene" />
+      <Login />
       <OnboardingHelper />
       <div
         className="relative flex w-screen"

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,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@storyteller/api": "file:../../libs/api",
+    "@storyteller/api": "file:../../libs/utils/api",
+    "@storyteller/login": "file:../../libs/components/login",
     "@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

@@ -30,5 +30,10 @@
     },
     // Vite takes care of building everything, not tsc.
     "noEmit": true
-  }
+  },
+  "references": [
+    {
+      "path": "../../libs/components/login"
+    }
+  ]
 }

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

@@ -2,8 +2,15 @@
 
 set -euxo pipefail
 
+echo "NX reset..."
+npx nx reset
+
 echo "Removing Node Modules..."
 rm -rf ./node_modules/
 rm -rf ./apps/editor2d/node_modules/
 rm -rf ./apps/editor3d/node_modules/
 
+echo "Removing Build Directories..."
+rm -rf ./libs/components/login/dist/
+rm -rf ./libs/utils/api/dist/
+

frontend/libs/api/src/index.ts

@@ -1 +0,0 @@
-export * from './lib/api.js';

frontend/libs/components/login/.babelrc

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

frontend/libs/components/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/components/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/components/login/package.json

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

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

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

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

frontend/libs/components/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/components/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 foo!</h1>
+    </div>
+  );
+}
+
+export default Login;
+
+
+

frontend/libs/components/login/src/server.ts

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

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

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

frontend/libs/components/login/tsconfig.json

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

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

@@ -0,0 +1,48 @@
+{
+  "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",
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

frontend/libs/components/login/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/login/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/login',
+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/login',
+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: {setupFiles: ['./src/test-setup.ts'],
+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/utils/api/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "../../.eslintrc.json"
+    "../../../.eslintrc.json"
   ],
   "ignorePatterns": [
     "!**/*"

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

@@ -0,0 +1,2 @@
+export * from './lib/api.js';
+export * from './lib/ApiFoo.js';

frontend/libs/utils/api/src/lib/ApiFoo.ts

@@ -0,0 +1,10 @@
+class ApiFoo {
+  constructor() {
+    console.log("ApiFoo constructor");
+  }
+  public add(a: number, b: number) {
+    return a + b;
+  }
+}
+
+export default ApiFoo;

frontend/libs/utils/api/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.json",
   "files": [],
   "include": [],
   "references": [

frontend/libs/utils/api/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
     "rootDir": "src",

frontend/libs/utils/api/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./out-tsc/vitest",
     "types": [

frontend/nx.json

@@ -89,7 +89,8 @@
       },
       "library": {
         "style": "css",
-        "linter": "none"
+        "linter": "none",
+        "unitTestRunner": "vitest"
       }
     }
   },
@@ -99,5 +100,9 @@
         "^build"
       ]
     }
+  },
+  "workspaceLayout": {
+    "appsDir": "apps",
+    "libsDir": "libs"
   }
 }

frontend/package-lock.json

@@ -16,10 +16,12 @@
         "@preact/signals-react": "^3.0.1",
         "@remix-run/serve": "^2.15.0",
         "pnpm": "^10.8.1",
-        "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
       },
       "devDependencies": {
+        "@babel/core": "^7.14.5",
+        "@babel/preset-react": "^7.14.5",
         "@netlify/remix-edge-adapter": "^3.4.3",
         "@nx/eslint": "20.7.2",
         "@nx/eslint-plugin": "20.7.2",
@@ -34,6 +36,9 @@
         "@swc-node/register": "~1.9.1",
         "@swc/core": "~1.5.7",
         "@swc/helpers": "~0.5.11",
+        "@testing-library/jest-dom": "6.4.2",
+        "@testing-library/react": "16.1.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/node": "^20.0.0",
         "@types/react": "19.0.0",
         "@types/react-dom": "19.0.0",
@@ -44,6 +49,10 @@
         "@vitest/ui": "^3.0.0",
         "eslint": "~8.57.0",
         "eslint-config-prettier": "^10.0.0",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-jsx-a11y": "6.10.1",
+        "eslint-plugin-react": "7.35.0",
+        "eslint-plugin-react-hooks": "5.0.0",
         "jiti": "2.4.2",
         "jsdom": "~22.1.0",
         "jsonc-eslint-parser": "^2.1.0",
@@ -1059,31 +1068,6 @@
         }
       }
     },
-    "apps/editor2d/node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "apps/editor2d/node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
     "apps/editor2d/node_modules/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
@@ -1195,7 +1179,8 @@
         "@remix-run/react": "^2.8.1",
         "@remix-run/router": "^1.15.3",
         "@remix-run/serve": "^2.8.1",
-        "@storyteller/api": "file:../../libs/api",
+        "@storyteller/api": "file:../../libs/utils/api",
+        "@storyteller/login": "file:../../libs/components/login",
         "@tweenjs/tween.js": "^18.6.4",
         "@types/lodash": "^4.17.6",
         "@types/react-virtualized": "^9.22.2",
@@ -1826,6 +1811,19 @@
         "eslint": ">=7.0.0"
       }
     },
+    "apps/editor3d/node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
     "apps/editor3d/node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -2016,6 +2014,20 @@
       "extraneous": true
     },
     "libs/api": {
+      "name": "@storyteller/api",
+      "version": "0.0.1",
+      "extraneous": true
+    },
+    "libs/components/login": {
+      "name": "@storyteller/login",
+      "version": "0.0.1"
+    },
+    "libs/login": {
+      "name": "@frontend/login",
+      "version": "0.0.1",
+      "extraneous": true
+    },
+    "libs/utils/api": {
       "name": "@storyteller/api",
       "version": "0.0.1"
     },
@@ -9811,6 +9823,27 @@
         "storybook": "^8.6.12"
       }
     },
+    "node_modules/@storybook/test/node_modules/@testing-library/jest-dom": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
+      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/@storybook/test/node_modules/@vitest/expect": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
@@ -9869,6 +9902,27 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@storybook/test/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@storybook/test/node_modules/tinyrainbow": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
@@ -9894,7 +9948,11 @@
       }
     },
     "node_modules/@storyteller/api": {
-      "resolved": "libs/api",
+      "resolved": "libs/utils/api",
+      "link": true
+    },
+    "node_modules/@storyteller/login": {
+      "resolved": "libs/components/login",
       "link": true
     },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
@@ -10782,24 +10840,49 @@
       "license": "MIT"
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
-      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz",
+      "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@adobe/css-tools": "^4.4.0",
+        "@adobe/css-tools": "^4.3.2",
+        "@babel/runtime": "^7.9.2",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
         "css.escape": "^1.5.1",
         "dom-accessibility-api": "^0.6.3",
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.15",
         "redent": "^3.0.0"
       },
       "engines": {
         "node": ">=14",
         "npm": ">=6",
         "yarn": ">=1"
+      },
+      "peerDependencies": {
+        "@jest/globals": ">= 28",
+        "@types/bun": "latest",
+        "@types/jest": ">= 28",
+        "jest": ">= 28",
+        "vitest": ">= 0.32"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "@types/bun": {
+          "optional": true
+        },
+        "@types/jest": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
       }
     },
     "node_modules/@testing-library/jest-dom/node_modules/chalk": {
@@ -10823,6 +10906,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@testing-library/react": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz",
+      "integrity": "sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "14.5.2",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
@@ -16777,9 +16888,9 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
-      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.1.tgz",
+      "integrity": "sha512-zHByM9WTUMnfsDTafGXRiqxp6lFtNoSOWBY6FonVRn3A+BUwN1L/tdBXT40BcBJi0cZjOGTXZ0eD/rTG9fEJ0g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -16791,6 +16902,7 @@
         "axobject-query": "^4.1.0",
         "damerau-levenshtein": "^1.0.8",
         "emoji-regex": "^9.2.2",
+        "es-iterator-helpers": "^1.1.0",
         "hasown": "^2.0.2",
         "jsx-ast-utils": "^3.3.5",
         "language-tags": "^1.0.9",
@@ -16848,29 +16960,29 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.37.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
-      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "version": "7.35.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
+      "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.2",
         "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.2.1",
+        "es-iterator-helpers": "^1.0.19",
         "estraverse": "^5.3.0",
         "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.9",
+        "object.entries": "^1.1.8",
         "object.fromentries": "^2.0.8",
-        "object.values": "^1.2.1",
+        "object.values": "^1.2.0",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.matchall": "^4.0.11",
         "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
@@ -16881,16 +16993,16 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz",
+      "integrity": "sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
@@ -26976,9 +27088,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -27059,16 +27171,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-drag-drop-files": {

frontend/package.json

@@ -8,10 +8,12 @@
     "@preact/signals-react": "^3.0.1",
     "@remix-run/serve": "^2.15.0",
     "pnpm": "^10.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
     "@netlify/remix-edge-adapter": "^3.4.3",
     "@nx/eslint": "20.7.2",
     "@nx/eslint-plugin": "20.7.2",
@@ -26,6 +28,9 @@
     "@swc-node/register": "~1.9.1",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.0.0",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
@@ -36,6 +41,10 @@
     "@vitest/ui": "^3.0.0",
     "eslint": "~8.57.0",
     "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.1",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "5.0.0",
     "jiti": "2.4.2",
     "jsdom": "~22.1.0",
     "jsonc-eslint-parser": "^2.1.0",

frontend/tsconfig.base.json

@@ -5,7 +5,9 @@
     "emitDeclarationOnly": true,
     "importHelpers": true,
     "isolatedModules": true,
-    "lib": ["es2022"],
+    "lib": [
+      "es2022"
+    ],
     "module": "esnext",
     "moduleResolution": "bundler",
     "noEmitOnError": true,
@@ -16,6 +18,8 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "es2022",
-    "customConditions": ["development"]
+    "customConditions": [
+      "development"
+    ]
   }
 }

frontend/tsconfig.json

@@ -4,13 +4,10 @@
   "files": [],
   "references": [
     {
-      "path": "./apps/editor2d"
+      "path": "./libs/utils/api"
     },
     {
-      "path": "./apps/editor3d"
-    },
-    {
-      "path": "./libs/api"
+      "path": "./libs/components/login"
     }
   ]
 }