From 2cd3d54ab3b9ff27e7277b6bf06e81b7065bbf54 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 11:01:36 +0900
Subject: [PATCH 01/24] chore: clean pnpm workspace from unused elements

---
 pnpm-workspace.yaml | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9fb5654..817245e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -75,24 +75,3 @@ catalogs:
     playwright: ^1.60.0
     vitest: ^4.1.7
     vitest-browser-svelte: ^2.1.1
-
-minimumReleaseAgeExclude:
-  - '@iconify-json/material-icon-theme@1.2.66'
-  - '@nanoforge-dev/actions@2.0.0'
-  - '@nanoforge-dev/common@1.3.0'
-  - '@nanoforge-dev/ecs-lib@1.3.0'
-  - '@typescript-eslint/eslint-plugin@8.60.0'
-  - '@typescript-eslint/parser@8.60.0'
-  - '@typescript-eslint/project-service@8.60.0'
-  - '@typescript-eslint/scope-manager@8.60.0'
-  - '@typescript-eslint/tsconfig-utils@8.60.0'
-  - '@typescript-eslint/type-utils@8.60.0'
-  - '@typescript-eslint/types@8.60.0'
-  - '@typescript-eslint/typescript-estree@8.60.0'
-  - '@typescript-eslint/utils@8.60.0'
-  - '@typescript-eslint/visitor-keys@8.60.0'
-  - typescript-eslint@8.60.0
-
-onlyBuiltDependencies:
-  - bun
-  - esbuild

From 212641c30e83fa730ae8b9aed169b63e01335b9f Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 11:02:11 +0900
Subject: [PATCH 02/24] feat: add library and get packages routes

---
 .../action/repositories/library.repository.ts |  8 +++
 .../action/repositories/package.repository.ts | 20 ++++--
 src/lib/client/action/types/index.ts          |  1 +
 src/lib/client/action/types/library.type.ts   |  6 ++
 src/lib/client/action/types/package.type.ts   |  9 +--
 .../project/library/install-library.action.ts | 16 +++++
 .../project/package/add-components.action.ts  |  4 +-
 .../project/package/add-systems.action.ts     |  4 +-
 .../package/create-component.action.ts        |  4 +-
 .../project/package/create-system.action.ts   |  4 +-
 .../project/package/get-components.action.ts  |  9 +++
 .../project/package/get-systems.action.ts     |  7 +++
 src/lib/server/cli/cli.ts                     |  4 +-
 src/lib/server/project/library/index.ts       |  1 +
 .../server/project/library/library-handler.ts | 36 +++++++++++
 .../server/project/library/library.type.ts    |  5 ++
 src/lib/server/project/package/index.ts       |  1 +
 .../server/project/package/package-handler.ts | 35 +++++++----
 .../server/project/package/package.type.ts    |  4 +-
 src/lib/server/project/project-handler.ts     |  7 +++
 src/lib/utils/format.ts                       | 61 +++++++++++++------
 src/lib/utils/types/save.type.ts              |  1 +
 .../actions/project/library/+page.server.ts   |  5 ++
 .../actions/project/package/+page.server.ts   |  4 ++
 24 files changed, 201 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/client/action/repositories/library.repository.ts
 create mode 100644 src/lib/client/action/types/library.type.ts
 create mode 100644 src/lib/server/actions/project/library/install-library.action.ts
 create mode 100644 src/lib/server/actions/project/package/get-components.action.ts
 create mode 100644 src/lib/server/actions/project/package/get-systems.action.ts
 create mode 100644 src/lib/server/project/library/index.ts
 create mode 100644 src/lib/server/project/library/library-handler.ts
 create mode 100644 src/lib/server/project/library/library.type.ts
 create mode 100644 src/lib/server/project/package/index.ts
 create mode 100644 src/routes/actions/project/library/+page.server.ts

diff --git a/src/lib/client/action/repositories/library.repository.ts b/src/lib/client/action/repositories/library.repository.ts
new file mode 100644
index 0000000..5ed4341
--- /dev/null
+++ b/src/lib/client/action/repositories/library.repository.ts
@@ -0,0 +1,8 @@
+import { BaseRepository } from '../base.repository';
+import type { InstallLibraryActionInput, InstallLibraryPackageResult } from '../types';
+
+export class ProjectLibraryRepository extends BaseRepository {
+  install(input: InstallLibraryActionInput): Promise<InstallLibraryPackageResult[]> {
+    return this.run(`/actions/project/library?/install`, input);
+  }
+}
diff --git a/src/lib/client/action/repositories/package.repository.ts b/src/lib/client/action/repositories/package.repository.ts
index a3e98d7..daeb816 100644
--- a/src/lib/client/action/repositories/package.repository.ts
+++ b/src/lib/client/action/repositories/package.repository.ts
@@ -4,28 +4,28 @@ import { BaseRepository } from '../base.repository';
 import type {
   AddComponentsActionInput,
   AddSystemsActionInput,
+  ComponentPackageResult,
   CreateComponentActionInput,
   CreateSystemActionInput,
   GetComponentsManifestsActionInput,
   GetSystemsManifestsActionInput,
-  NewComponentPackageResult,
-  NewSystemPackageResult,
+  SystemPackageResult,
 } from '../types';
 
 export class ProjectPackageRepository extends BaseRepository {
-  addComponents(input: AddComponentsActionInput): Promise<NewComponentPackageResult[]> {
+  addComponents(input: AddComponentsActionInput): Promise<ComponentPackageResult[]> {
     return this.run(`/actions/project/package?/add-components`, input);
   }
 
-  addSystems(input: AddSystemsActionInput): Promise<NewSystemPackageResult[]> {
+  addSystems(input: AddSystemsActionInput): Promise<SystemPackageResult[]> {
     return this.run(`/actions/project/package?/add-systems`, input);
   }
 
-  createComponent(input: CreateComponentActionInput): Promise<NewComponentPackageResult> {
+  createComponent(input: CreateComponentActionInput): Promise<ComponentPackageResult> {
     return this.run(`/actions/project/package?/create-component`, input);
   }
 
-  createSystem(input: CreateSystemActionInput): Promise<NewSystemPackageResult> {
+  createSystem(input: CreateSystemActionInput): Promise<SystemPackageResult> {
     return this.run(`/actions/project/package?/create-system`, input);
   }
 
@@ -38,4 +38,12 @@ export class ProjectPackageRepository extends BaseRepository {
   getSystemsManifests(input: GetSystemsManifestsActionInput): Promise<EditorSystemManifest[]> {
     return this.run(`/actions/project/package?/get-systems-manifests`, input);
   }
+
+  getComponents(): Promise<ComponentPackageResult[]> {
+    return this.run(`/actions/project/package?/get-components`);
+  }
+
+  getSystems(): Promise<SystemPackageResult[]> {
+    return this.run(`/actions/project/package?/get-systems`);
+  }
 }
diff --git a/src/lib/client/action/types/index.ts b/src/lib/client/action/types/index.ts
index 78759b4..bd622f2 100644
--- a/src/lib/client/action/types/index.ts
+++ b/src/lib/client/action/types/index.ts
@@ -1,4 +1,5 @@
 export * from './fs.type';
+export * from './library.type';
 export * from './loader.type';
 export * from './project.type';
 export * from './package.type';
diff --git a/src/lib/client/action/types/library.type.ts b/src/lib/client/action/types/library.type.ts
new file mode 100644
index 0000000..c3a3880
--- /dev/null
+++ b/src/lib/client/action/types/library.type.ts
@@ -0,0 +1,6 @@
+import type { InstallLibraryBody } from '$lib/server/actions/project/library/install-library.action';
+import type { LibraryPackage } from '$lib/server/project/library';
+
+export type InstallLibraryActionInput = InstallLibraryBody;
+
+export type InstallLibraryPackageResult = LibraryPackage;
diff --git a/src/lib/client/action/types/package.type.ts b/src/lib/client/action/types/package.type.ts
index c347943..645db8c 100644
--- a/src/lib/client/action/types/package.type.ts
+++ b/src/lib/client/action/types/package.type.ts
@@ -4,14 +4,11 @@ import type { CreateComponentBody } from '$lib/server/actions/project/package/cr
 import type { CreateSystemBody } from '$lib/server/actions/project/package/create-system.action';
 import type { GetComponentManifestBody } from '$lib/server/actions/project/package/get-components-manifests.action';
 import type { GetSystemManifestBody } from '$lib/server/actions/project/package/get-systems-manifests.action';
-import type {
-  NewComponentPackage,
-  NewSystemPackage,
-} from '$lib/server/project/package/package.type';
+import type { ComponentPackage, SystemPackage } from '$lib/server/project/package/package.type';
 
-export type NewComponentPackageResult = NewComponentPackage;
+export type ComponentPackageResult = ComponentPackage;
 
-export type NewSystemPackageResult = NewSystemPackage;
+export type SystemPackageResult = SystemPackage;
 
 export type AddComponentsActionInput = AddComponentBody;
 
diff --git a/src/lib/server/actions/project/library/install-library.action.ts b/src/lib/server/actions/project/library/install-library.action.ts
new file mode 100644
index 0000000..5109b9c
--- /dev/null
+++ b/src/lib/server/actions/project/library/install-library.action.ts
@@ -0,0 +1,16 @@
+import type { LibraryPackage } from '$lib/server/project/library';
+
+import { useActionHandler } from '@utils-server/request-handler';
+
+export class InstallLibraryBody {
+  libraryName!: string;
+}
+
+export const installLibraryProjectAction = useActionHandler(
+  async ({ body, project }): Promise<LibraryPackage> => {
+    return await project.client.library.installLibrary(body.libraryName);
+  },
+  {
+    body: InstallLibraryBody,
+  },
+);
diff --git a/src/lib/server/actions/project/package/add-components.action.ts b/src/lib/server/actions/project/package/add-components.action.ts
index 670c0e6..1d7e495 100644
--- a/src/lib/server/actions/project/package/add-components.action.ts
+++ b/src/lib/server/actions/project/package/add-components.action.ts
@@ -1,4 +1,4 @@
-import type { NewComponentPackage } from '$lib/server/project/package/package.type';
+import type { ComponentPackage } from '$lib/server/project/package/package.type';
 
 import { useActionHandler } from '@utils-server/request-handler';
 
@@ -7,7 +7,7 @@ export class AddComponentBody {
 }
 
 export const addComponentsProjectAction = useActionHandler(
-  async ({ body, project }): Promise<NewComponentPackage[]> => {
+  async ({ body, project }): Promise<ComponentPackage[]> => {
     return await Promise.all(
       body.componentNames.map((componentName) =>
         project.client.package.installComponent(componentName),
diff --git a/src/lib/server/actions/project/package/add-systems.action.ts b/src/lib/server/actions/project/package/add-systems.action.ts
index 96a4e92..96d7658 100644
--- a/src/lib/server/actions/project/package/add-systems.action.ts
+++ b/src/lib/server/actions/project/package/add-systems.action.ts
@@ -1,4 +1,4 @@
-import type { NewSystemPackage } from '$lib/server/project/package/package.type';
+import type { SystemPackage } from '$lib/server/project/package/package.type';
 
 import { useActionHandler } from '@utils-server/request-handler';
 
@@ -7,7 +7,7 @@ export class AddSystemBody {
 }
 
 export const addSystemsProjectAction = useActionHandler(
-  async ({ body, project }): Promise<NewSystemPackage[]> => {
+  async ({ body, project }): Promise<SystemPackage[]> => {
     return await Promise.all(
       body.systemNames.map((systemName) => project.client.package.installSystem(systemName)),
     );
diff --git a/src/lib/server/actions/project/package/create-component.action.ts b/src/lib/server/actions/project/package/create-component.action.ts
index 01adc91..a826e9d 100644
--- a/src/lib/server/actions/project/package/create-component.action.ts
+++ b/src/lib/server/actions/project/package/create-component.action.ts
@@ -1,4 +1,4 @@
-import type { NewComponentPackage } from '$lib/server/project/package/package.type';
+import type { ComponentPackage } from '$lib/server/project/package/package.type';
 
 import { useActionHandler } from '@utils-server/request-handler';
 
@@ -7,7 +7,7 @@ export class CreateComponentBody {
 }
 
 export const createComponentProjectAction = useActionHandler(
-  async ({ body, project }): Promise<NewComponentPackage> => {
+  async ({ body, project }): Promise<ComponentPackage> => {
     return project.client.package.createComponent(body.componentName);
   },
   {
diff --git a/src/lib/server/actions/project/package/create-system.action.ts b/src/lib/server/actions/project/package/create-system.action.ts
index 12c102d..97963ef 100644
--- a/src/lib/server/actions/project/package/create-system.action.ts
+++ b/src/lib/server/actions/project/package/create-system.action.ts
@@ -1,4 +1,4 @@
-import type { NewSystemPackage } from '$lib/server/project/package/package.type';
+import type { SystemPackage } from '$lib/server/project/package/package.type';
 
 import { useActionHandler } from '@utils-server/request-handler';
 
@@ -7,7 +7,7 @@ export class CreateSystemBody {
 }
 
 export const createSystemProjectAction = useActionHandler(
-  async ({ body, project }): Promise<NewSystemPackage> => {
+  async ({ body, project }): Promise<SystemPackage> => {
     return project.client.package.createSystem(body.systemName);
   },
   {
diff --git a/src/lib/server/actions/project/package/get-components.action.ts b/src/lib/server/actions/project/package/get-components.action.ts
new file mode 100644
index 0000000..31387d8
--- /dev/null
+++ b/src/lib/server/actions/project/package/get-components.action.ts
@@ -0,0 +1,9 @@
+import type { ComponentPackage } from '$lib/server/project/package';
+
+import { useActionHandler } from '@utils-server/request-handler';
+
+export const getComponentsAction = useActionHandler(
+  async ({ project }): Promise<ComponentPackage[]> => {
+    return await project.client.package.getComponents();
+  },
+);
diff --git a/src/lib/server/actions/project/package/get-systems.action.ts b/src/lib/server/actions/project/package/get-systems.action.ts
new file mode 100644
index 0000000..53b9c0b
--- /dev/null
+++ b/src/lib/server/actions/project/package/get-systems.action.ts
@@ -0,0 +1,7 @@
+import type { SystemPackage } from '$lib/server/project/package';
+
+import { useActionHandler } from '@utils-server/request-handler';
+
+export const getSystemsAction = useActionHandler(async ({ project }): Promise<SystemPackage[]> => {
+  return await project.client.package.getSystems();
+});
diff --git a/src/lib/server/cli/cli.ts b/src/lib/server/cli/cli.ts
index 67f8da6..7eb578a 100644
--- a/src/lib/server/cli/cli.ts
+++ b/src/lib/server/cli/cli.ts
@@ -10,7 +10,7 @@ import {
   CLI_START_DEFAULTS,
 } from '$lib/server/cli/cli-defaults';
 
-import { camelToKebab } from '@utils/format';
+import { formatFrom } from '@utils/format';
 
 import type { Context } from '@utils-server/request-handler';
 
@@ -173,7 +173,7 @@ export class Cli {
   ): string[] {
     const params = [];
     for (const [key, value] of Object.entries(this.mergeParams(defaultOpts, opts))) {
-      const name = camelToKebab(key);
+      const name = formatFrom.camel(key).toKebab();
 
       if (typeof value === 'boolean') {
         if (value) params.push(`--${name}`);
diff --git a/src/lib/server/project/library/index.ts b/src/lib/server/project/library/index.ts
new file mode 100644
index 0000000..a08aaeb
--- /dev/null
+++ b/src/lib/server/project/library/index.ts
@@ -0,0 +1 @@
+export * from './library.type';
diff --git a/src/lib/server/project/library/library-handler.ts b/src/lib/server/project/library/library-handler.ts
new file mode 100644
index 0000000..7373816
--- /dev/null
+++ b/src/lib/server/project/library/library-handler.ts
@@ -0,0 +1,36 @@
+import { type ProjectHandler } from '$lib/server/project';
+
+import { formatFrom } from '@utils/format';
+
+import { type LibraryPackage } from './library.type';
+
+export class LibraryHandler {
+  private readonly handler: ProjectHandler;
+
+  constructor(handler: ProjectHandler) {
+    this.handler = handler;
+  }
+
+  async installLibrary(name: string): Promise<LibraryPackage> {
+    this.handler._cli.install([name], {
+      server: this.handler._part === 'server' || undefined,
+      lib: true,
+    });
+
+    return {
+      save: {
+        id: this._resolveIdFromName(name),
+        type: '',
+        name: '',
+        path: name,
+      },
+    };
+  }
+
+  private _resolveIdFromName(name: string): string {
+    const [org, pkg] = name.split('/');
+    if (!org || !pkg) throw new Error('Invalid library name');
+    const id = !pkg ? org : pkg;
+    return `${formatFrom.kebab(id).toCamel()}Library`;
+  }
+}
diff --git a/src/lib/server/project/library/library.type.ts b/src/lib/server/project/library/library.type.ts
new file mode 100644
index 0000000..20096aa
--- /dev/null
+++ b/src/lib/server/project/library/library.type.ts
@@ -0,0 +1,5 @@
+import type { SaveLibrary } from '@utils/types';
+
+export interface LibraryPackage {
+  save: SaveLibrary;
+}
diff --git a/src/lib/server/project/package/index.ts b/src/lib/server/project/package/index.ts
new file mode 100644
index 0000000..defaadf
--- /dev/null
+++ b/src/lib/server/project/package/index.ts
@@ -0,0 +1 @@
+export * from './package.type';
diff --git a/src/lib/server/project/package/package-handler.ts b/src/lib/server/project/package/package-handler.ts
index 4ec20ed..e86083f 100644
--- a/src/lib/server/project/package/package-handler.ts
+++ b/src/lib/server/project/package/package-handler.ts
@@ -4,10 +4,10 @@ import { join } from 'path';
 import { FileSystemError } from '$lib/server/file-system/file-system-error';
 import { type ProjectHandler } from '$lib/server/project';
 
-import { toCamelCase, toKebabCase, toPascalCase } from '@utils/format';
+import { formatFrom } from '@utils/format';
 
 import { resolveManifest } from './manifest-resolver';
-import { type NewComponentPackage, type NewSystemPackage, PackageTypeEnum } from './package.type';
+import { type ComponentPackage, PackageTypeEnum, type SystemPackage } from './package.type';
 
 export class PackageHandler {
   private readonly handler: ProjectHandler;
@@ -16,7 +16,7 @@ export class PackageHandler {
     this.handler = handler;
   }
 
-  async installComponent(name: string): Promise<NewComponentPackage> {
+  async installComponent(name: string): Promise<ComponentPackage> {
     const rc = await this.handler._api.registry.getPackage(name);
     if (rc.type !== 'component') throw new Error(`Can only add component: ${name} is a ${rc.type}`);
     this.handler._cli.install([name], { server: this.handler._part === 'server' || undefined });
@@ -24,7 +24,7 @@ export class PackageHandler {
     return this._getNewComponentPackage(rc.name, rc._file);
   }
 
-  async installSystem(name: string): Promise<NewSystemPackage> {
+  async installSystem(name: string): Promise<SystemPackage> {
     const rs = await this.handler._api.registry.getPackage(name);
     if (rs.type !== 'system') throw new Error(`Can only add system: ${name} is a ${rs.type}`);
     this.handler._cli.install([name], { server: this.handler._part === 'server' || undefined });
@@ -38,11 +38,11 @@ export class PackageHandler {
    *
    * @param {string} name - Name of the component
    */
-  createComponent(name: string): NewComponentPackage {
+  createComponent(name: string): ComponentPackage {
     this._createPackage(PackageTypeEnum.COMPONENT, name);
     return this._getNewComponentPackage(
-      toPascalCase(name) + 'Component',
-      toKebabCase(name) + '.component',
+      formatFrom.all(name).toPascal() + 'Component',
+      formatFrom.all(name).toKebab() + '.component',
     );
   }
 
@@ -52,9 +52,12 @@ export class PackageHandler {
    *
    * @param {string} name - Name of the system
    */
-  createSystem(name: string): NewSystemPackage {
+  createSystem(name: string): SystemPackage {
     this._createPackage(PackageTypeEnum.SYSTEM, name);
-    return this._getNewSystemPackage(toCamelCase(name) + 'System', toKebabCase(name) + '.system');
+    return this._getNewSystemPackage(
+      formatFrom.all(name).toCamel() + 'System',
+      formatFrom.all(name).toKebab() + '.system',
+    );
   }
 
   /**
@@ -81,7 +84,17 @@ export class PackageHandler {
     return this._getPackageManifest(PackageTypeEnum.SYSTEM, path);
   }
 
-  private _getNewComponentPackage(name: string, fileName: string): NewComponentPackage {
+  async getComponents(): Promise<ComponentPackage[]> {
+    // @todo implement it
+    return Promise.reject('Not implemented yet');
+  }
+
+  async getSystems(): Promise<SystemPackage[]> {
+    // @todo implement it
+    return Promise.reject('Not implemented yet');
+  }
+
+  private _getNewComponentPackage(name: string, fileName: string): ComponentPackage {
     const path = `./components/${fileName}`;
 
     const manifest = this._findPackageManifest(this.getComponentManifest, path);
@@ -96,7 +109,7 @@ export class PackageHandler {
     };
   }
 
-  private _getNewSystemPackage(name: string, fileName: string): NewSystemPackage {
+  private _getNewSystemPackage(name: string, fileName: string): SystemPackage {
     const path = `./systems/${fileName}`;
     return {
       manifest: this._findPackageManifest(this.getSystemManifest, path),
diff --git a/src/lib/server/project/package/package.type.ts b/src/lib/server/project/package/package.type.ts
index ce231b2..6858487 100644
--- a/src/lib/server/project/package/package.type.ts
+++ b/src/lib/server/project/package/package.type.ts
@@ -7,12 +7,12 @@ export enum PackageTypeEnum {
   SYSTEM = 'system',
 }
 
-export interface NewComponentPackage {
+export interface ComponentPackage {
   manifest: EditorComponentManifest;
   save: SaveComponent;
 }
 
-export interface NewSystemPackage {
+export interface SystemPackage {
   manifest: EditorSystemManifest;
   save: SaveSystem;
 }
diff --git a/src/lib/server/project/project-handler.ts b/src/lib/server/project/project-handler.ts
index f5af6fd..dc3cdd2 100644
--- a/src/lib/server/project/project-handler.ts
+++ b/src/lib/server/project/project-handler.ts
@@ -9,6 +9,7 @@ import type { Part } from '@utils/types';
 
 import { type Context, type Handler } from '@utils-server/request-handler';
 
+import { LibraryHandler } from './library/library-handler';
 import { Loader } from './loader';
 import { PackageHandler } from './package/package-handler';
 import { SaveHandler } from './save/save-handler';
@@ -24,6 +25,7 @@ export class ProjectHandler {
   private _loader: Loader | undefined;
   private _save: SaveHandler | undefined;
   private _package: PackageHandler | undefined;
+  private _library: LibraryHandler | undefined;
 
   constructor(handler: Handler, context: Context, part: Part) {
     if (!context.project) throw new Exception('Bad Request', 'Project missing in context', 400);
@@ -60,4 +62,9 @@ export class ProjectHandler {
     if (!this._package) this._package = new PackageHandler(this);
     return this._package;
   }
+
+  get library(): LibraryHandler {
+    if (!this._library) this._library = new LibraryHandler(this);
+    return this._library;
+  }
 }
diff --git a/src/lib/utils/format.ts b/src/lib/utils/format.ts
index de3e61e..5d45c6e 100644
--- a/src/lib/utils/format.ts
+++ b/src/lib/utils/format.ts
@@ -1,3 +1,27 @@
+class WordList {
+  words: string[];
+
+  constructor(words: string[]) {
+    this.words = words;
+  }
+
+  toKebab() {
+    return this.words.join('-');
+  }
+
+  toPascal() {
+    return this.words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+  }
+
+  toCamel() {
+    return this.words
+      .map((word, i) =>
+        i === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1),
+      )
+      .join('');
+  }
+}
+
 const toWords = (str: string): string[] => {
   return str
     .replace(/([a-z])([A-Z])/g, '$1 $2')
@@ -8,26 +32,23 @@ const toWords = (str: string): string[] => {
     .filter(Boolean);
 };
 
-export const toKebabCase = (str: string): string => {
-  return toWords(str)
-    .map((word) => word.toLowerCase())
-    .join('-');
-};
+const fromKebab = (str: string): WordList => new WordList(str.split('-'));
 
-export const toPascalCase = (str: string): string => {
-  return toWords(str)
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join('');
-};
+const fromPascal = (str: string): WordList =>
+  new WordList(str.split(/(?=[A-Z])/).map((word) => word.toLowerCase()));
 
-export const toCamelCase = (str: string): string => {
-  const words = toWords(str);
-  return words
-    .map((word, i) =>
-      i === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
-    )
-    .join('');
-};
+const fromCamel = (str: string): WordList =>
+  new WordList(str.split(/(?=[A-Z])/).map((word) => word.toLowerCase()));
+
+const fromSnake = (str: string): WordList => new WordList(str.split('_'));
 
-export const camelToKebab = (str: string) =>
-  str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+const fromAll = (str: string): WordList =>
+  new WordList(toWords(str).map((word) => word.toLowerCase()));
+
+export const formatFrom = {
+  kebab: fromKebab,
+  pascal: fromPascal,
+  camel: fromCamel,
+  snake: fromSnake,
+  all: fromAll,
+};
diff --git a/src/lib/utils/types/save.type.ts b/src/lib/utils/types/save.type.ts
index efadb04..1f79a46 100644
--- a/src/lib/utils/types/save.type.ts
+++ b/src/lib/utils/types/save.type.ts
@@ -27,6 +27,7 @@ export interface SaveSystem {
 
 export interface SaveEntity {
   id: string;
+  treePath: string;
   components: Record<string, Record<string, any>>;
 }
 
diff --git a/src/routes/actions/project/library/+page.server.ts b/src/routes/actions/project/library/+page.server.ts
new file mode 100644
index 0000000..a9ca426
--- /dev/null
+++ b/src/routes/actions/project/library/+page.server.ts
@@ -0,0 +1,5 @@
+import { installLibraryProjectAction } from '$lib/server/actions/project/library/install-library.action';
+
+export const actions = {
+  install: installLibraryProjectAction,
+};
diff --git a/src/routes/actions/project/package/+page.server.ts b/src/routes/actions/project/package/+page.server.ts
index c3e244e..2650b05 100644
--- a/src/routes/actions/project/package/+page.server.ts
+++ b/src/routes/actions/project/package/+page.server.ts
@@ -3,7 +3,9 @@ import { addSystemsProjectAction } from '$lib/server/actions/project/package/add
 import { createComponentProjectAction } from '$lib/server/actions/project/package/create-component.action';
 import { createSystemProjectAction } from '$lib/server/actions/project/package/create-system.action';
 import { getComponentsManifestsAction } from '$lib/server/actions/project/package/get-components-manifests.action';
+import { getComponentsAction } from '$lib/server/actions/project/package/get-components.action';
 import { getSystemsManifestsAction } from '$lib/server/actions/project/package/get-systems-manifests.action';
+import { getSystemsAction } from '$lib/server/actions/project/package/get-systems.action';
 
 export const actions = {
   'add-components': addComponentsProjectAction,
@@ -12,4 +14,6 @@ export const actions = {
   'create-system': createSystemProjectAction,
   'get-components-manifests': getComponentsManifestsAction,
   'get-systems-manifests': getSystemsManifestsAction,
+  'get-components': getComponentsAction,
+  'get-systems': getSystemsAction,
 };

From 537e667e78b26daf36cae8a05c4b7cca98515658 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 12:39:51 +0900
Subject: [PATCH 03/24] feat: add shadcn context menu

---
 .../context-menu-checkbox-item.svelte         | 41 +++++++++++++++
 .../context-menu/context-menu-content.svelte  | 28 ++++++++++
 .../context-menu-group-heading.svelte         | 21 ++++++++
 .../ui/context-menu/context-menu-group.svelte |  7 +++
 .../ui/context-menu/context-menu-item.svelte  | 27 ++++++++++
 .../ui/context-menu/context-menu-label.svelte | 27 ++++++++++
 .../context-menu/context-menu-portal.svelte   |  7 +++
 .../context-menu-radio-group.svelte           | 16 ++++++
 .../context-menu-radio-item.svelte            | 35 +++++++++++++
 .../context-menu-separator.svelte             | 17 ++++++
 .../context-menu/context-menu-shortcut.svelte | 23 ++++++++
 .../context-menu-sub-content.svelte           | 20 +++++++
 .../context-menu-sub-trigger.svelte           | 29 +++++++++++
 .../ui/context-menu/context-menu-sub.svelte   |  7 +++
 .../context-menu/context-menu-trigger.svelte  | 17 ++++++
 .../ui/context-menu/context-menu.svelte       |  7 +++
 src/lib/components/ui/context-menu/index.ts   | 52 +++++++++++++++++++
 17 files changed, 381 insertions(+)
 create mode 100644 src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-content.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-group-heading.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-group.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-label.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-portal.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-radio-group.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-radio-item.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-separator.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-shortcut.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub-content.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-sub.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu-trigger.svelte
 create mode 100644 src/lib/components/ui/context-menu/context-menu.svelte
 create mode 100644 src/lib/components/ui/context-menu/index.ts

diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100644
index 0000000..4b36704
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '@utils/ui';
+  import type { Snippet } from 'svelte';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    inset,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+    inset?: boolean;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="context-menu-checkbox-item"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span class="absolute right-2 pointer-events-none">
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
new file mode 100644
index 0000000..b924d91
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+  import ContextMenuPortal from './context-menu-portal.svelte';
+  import type { ComponentProps } from 'svelte';
+  import type { WithoutChildrenOrChild } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    portalProps,
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+  } = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+  <ContextMenuPrimitive.Content
+    bind:ref
+    data-slot="context-menu-content"
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto outline-none',
+      className,
+    )}
+    {...restProps}
+  />
+</ContextMenuPortal>
diff --git a/src/lib/components/ui/context-menu/context-menu-group-heading.svelte b/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
new file mode 100644
index 0000000..446e838
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ContextMenuPrimitive.GroupHeadingProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="context-menu-group-heading"
+  data-inset={inset}
+  class={cn('text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-group.svelte b/src/lib/components/ui/context-menu/context-menu-group.svelte
new file mode 100644
index 0000000..19f694b
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
new file mode 100644
index 0000000..a59c9e5
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = 'default',
+    ...restProps
+  }: ContextMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+  bind:ref
+  data-slot="context-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-label.svelte b/src/lib/components/ui/context-menu/context-menu-label.svelte
new file mode 100644
index 0000000..f08196c
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="context-menu-label"
+  data-inset={inset}
+  class={cn(
+    'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-inset:pl-8',
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/context-menu/context-menu-portal.svelte b/src/lib/components/ui/context-menu/context-menu-portal.svelte
new file mode 100644
index 0000000..2897cc0
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 0000000..b1abdf3
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    ...restProps
+  }: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="context-menu-radio-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
new file mode 100644
index 0000000..9354465
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '@utils/ui';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="context-menu-radio-item"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span class="absolute right-2 pointer-events-none">
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</ContextMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-separator.svelte b/src/lib/components/ui/context-menu/context-menu-separator.svelte
new file mode 100644
index 0000000..9dcf853
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+  bind:ref
+  data-slot="context-menu-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
new file mode 100644
index 0000000..5e13d6c
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="context-menu-shortcut"
+  class={cn(
+    'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
new file mode 100644
index 0000000..bc441dd
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+  bind:ref
+  data-slot="context-menu-sub-content"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100',
+    className,
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100644
index 0000000..d309e4c
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '@utils/ui';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="context-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ml-auto" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/context-menu/context-menu-sub.svelte b/src/lib/components/ui/context-menu/context-menu-sub.svelte
new file mode 100644
index 0000000..0ba70c9
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/src/lib/components/ui/context-menu/context-menu-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-trigger.svelte
new file mode 100644
index 0000000..3831cca
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+  bind:ref
+  data-slot="context-menu-trigger"
+  class={cn('cn-context-menu-trigger select-none', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/context-menu/context-menu.svelte b/src/lib/components/ui/context-menu/context-menu.svelte
new file mode 100644
index 0000000..4b6908e
--- /dev/null
+++ b/src/lib/components/ui/context-menu/context-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/components/ui/context-menu/index.ts b/src/lib/components/ui/context-menu/index.ts
new file mode 100644
index 0000000..4177ab6
--- /dev/null
+++ b/src/lib/components/ui/context-menu/index.ts
@@ -0,0 +1,52 @@
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Content from './context-menu-content.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Group from './context-menu-group.svelte';
+import Item from './context-menu-item.svelte';
+import Label from './context-menu-label.svelte';
+import Portal from './context-menu-portal.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import Sub from './context-menu-sub.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Root from './context-menu.svelte';
+
+export {
+  Root,
+  Sub,
+  Portal,
+  Item,
+  GroupHeading,
+  Label,
+  Group,
+  Trigger,
+  Content,
+  Shortcut,
+  Separator,
+  RadioItem,
+  SubContent,
+  SubTrigger,
+  RadioGroup,
+  CheckboxItem,
+  //
+  Root as ContextMenu,
+  Sub as ContextMenuSub,
+  Portal as ContextMenuPortal,
+  Item as ContextMenuItem,
+  GroupHeading as ContextMenuGroupHeading,
+  Group as ContextMenuGroup,
+  Content as ContextMenuContent,
+  Trigger as ContextMenuTrigger,
+  Shortcut as ContextMenuShortcut,
+  RadioItem as ContextMenuRadioItem,
+  Separator as ContextMenuSeparator,
+  RadioGroup as ContextMenuRadioGroup,
+  SubContent as ContextMenuSubContent,
+  SubTrigger as ContextMenuSubTrigger,
+  CheckboxItem as ContextMenuCheckboxItem,
+  Label as ContextMenuLabel,
+};

From bf6c658439548beda44c3e85d44cb60cc271c90a Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 12:46:16 +0900
Subject: [PATCH 04/24] feat: add shadcn tabs

---
 src/lib/components/ui/tabs/index.ts           | 18 +++++++++
 .../components/ui/tabs/tabs-content.svelte    | 17 ++++++++
 src/lib/components/ui/tabs/tabs-list.svelte   | 40 +++++++++++++++++++
 .../components/ui/tabs/tabs-trigger.svelte    | 23 +++++++++++
 src/lib/components/ui/tabs/tabs.svelte        | 19 +++++++++
 5 files changed, 117 insertions(+)
 create mode 100644 src/lib/components/ui/tabs/index.ts
 create mode 100644 src/lib/components/ui/tabs/tabs-content.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs-list.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs-trigger.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs.svelte

diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..d0de3b1
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import Content from './tabs-content.svelte';
+import List, { type TabsListVariant, tabsListVariants } from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+import Root from './tabs.svelte';
+
+export {
+  Root,
+  Content,
+  List,
+  Trigger,
+  tabsListVariants,
+  type TabsListVariant,
+  //
+  Root as Tabs,
+  Content as TabsContent,
+  List as TabsList,
+  Trigger as TabsTrigger,
+};
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..091c3e4
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+  bind:ref
+  data-slot="tabs-content"
+  class={cn('text-sm flex-1 outline-none', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..89f5a27
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const tabsListVariants = tv({
+    base: 'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+    variants: {
+      variant: {
+        default: 'cn-tabs-list-variant-default bg-muted',
+        line: 'cn-tabs-list-variant-line gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
+</script>
+
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ListProps & {
+    variant?: TabsListVariant;
+  } = $props();
+</script>
+
+<TabsPrimitive.List
+  bind:ref
+  data-slot="tabs-list"
+  data-variant={variant}
+  class={cn(tabsListVariants({ variant }), className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..0f4d47b
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+  bind:ref
+  data-slot="tabs-trigger"
+  class={cn(
+    "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+    'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+    'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+    className,
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs.svelte b/src/lib/components/ui/tabs/tabs.svelte
new file mode 100644
index 0000000..6ed5951
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+  bind:ref
+  bind:value
+  data-slot="tabs"
+  class={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}
+  {...restProps}
+/>

From e73f407d0e7c92e358be430b9fa6627bc4c3f96e Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 12:47:13 +0900
Subject: [PATCH 05/24] feat: add shadcn kbd

---
 src/lib/components/ui/kbd/index.ts         | 10 ++++++++++
 src/lib/components/ui/kbd/kbd-group.svelte | 20 +++++++++++++++++++
 src/lib/components/ui/kbd/kbd.svelte       | 23 ++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 src/lib/components/ui/kbd/index.ts
 create mode 100644 src/lib/components/ui/kbd/kbd-group.svelte
 create mode 100644 src/lib/components/ui/kbd/kbd.svelte

diff --git a/src/lib/components/ui/kbd/index.ts b/src/lib/components/ui/kbd/index.ts
new file mode 100644
index 0000000..185d5ff
--- /dev/null
+++ b/src/lib/components/ui/kbd/index.ts
@@ -0,0 +1,10 @@
+import Group from './kbd-group.svelte';
+import Root from './kbd.svelte';
+
+export {
+  Root,
+  Group,
+  //
+  Root as Kbd,
+  Group as KbdGroup,
+};
diff --git a/src/lib/components/ui/kbd/kbd-group.svelte b/src/lib/components/ui/kbd/kbd-group.svelte
new file mode 100644
index 0000000..d84d187
--- /dev/null
+++ b/src/lib/components/ui/kbd/kbd-group.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+  bind:this={ref}
+  data-slot="kbd-group"
+  class={cn('gap-1 inline-flex items-center', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</kbd>
diff --git a/src/lib/components/ui/kbd/kbd.svelte b/src/lib/components/ui/kbd/kbd.svelte
new file mode 100644
index 0000000..4911b45
--- /dev/null
+++ b/src/lib/components/ui/kbd/kbd.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+  bind:this={ref}
+  data-slot="kbd"
+  class={cn(
+    "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</kbd>

From 973b121d99535d7c130ae82495ea4e1e30a80662 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 12:49:30 +0900
Subject: [PATCH 06/24] feat: add shadcn badge

---
 src/lib/components/ui/badge/badge.svelte | 50 ++++++++++++++++++++++++
 src/lib/components/ui/badge/index.ts     |  2 +
 2 files changed, 52 insertions(+)
 create mode 100644 src/lib/components/ui/badge/badge.svelte
 create mode 100644 src/lib/components/ui/badge/index.ts

diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..16be78a
--- /dev/null
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const badgeVariants = tv({
+    base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+  } = $props();
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  bind:this={ref}
+  data-slot="badge"
+  {href}
+  class={cn(badgeVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..f05fb87
--- /dev/null
+++ b/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';

From 8cfceb9e3de456e223a33d856987a6193f3a1e80 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Thu, 28 May 2026 18:32:19 +0900
Subject: [PATCH 07/24] feat: add shadcn dropdown menu

---
 .../dropdown-menu-checkbox-group.svelte       | 16 ++++++
 .../dropdown-menu-checkbox-item.svelte        | 44 +++++++++++++++
 .../dropdown-menu-content.svelte              | 31 +++++++++++
 .../dropdown-menu-group-heading.svelte        | 22 ++++++++
 .../dropdown-menu/dropdown-menu-group.svelte  |  7 +++
 .../dropdown-menu/dropdown-menu-item.svelte   | 27 ++++++++++
 .../dropdown-menu/dropdown-menu-label.svelte  | 27 ++++++++++
 .../dropdown-menu/dropdown-menu-portal.svelte |  7 +++
 .../dropdown-menu-radio-group.svelte          | 16 ++++++
 .../dropdown-menu-radio-item.svelte           | 34 ++++++++++++
 .../dropdown-menu-separator.svelte            | 17 ++++++
 .../dropdown-menu-shortcut.svelte             | 23 ++++++++
 .../dropdown-menu-sub-content.svelte          | 20 +++++++
 .../dropdown-menu-sub-trigger.svelte          | 29 ++++++++++
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |  7 +++
 .../dropdown-menu-trigger.svelte              |  7 +++
 .../ui/dropdown-menu/dropdown-menu.svelte     |  7 +++
 src/lib/components/ui/dropdown-menu/index.ts  | 54 +++++++++++++++++++
 18 files changed, 395 insertions(+)
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/index.ts

diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..6b4d728
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable([]),
+    ...restProps
+  }: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-checkbox-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..4f59a7d
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { cn, type WithoutChildrenOrChild } from '@utils/ui';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="dropdown-menu-checkbox-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked, indeterminate })}
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-checkbox-item-indicator"
+    >
+      {#if indeterminate}
+        <MinusIcon />
+      {:else if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..4e9143f
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '@utils/ui';
+  import DropdownMenuPortal from './dropdown-menu-portal.svelte';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    align = 'start',
+    portalProps,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+  } = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    data-slot="dropdown-menu-content"
+    {sideOffset}
+    {align}
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+      className,
+    )}
+    {...restProps}
+  />
+</DropdownMenuPortal>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..321802b
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="dropdown-menu-group-heading"
+  data-inset={inset}
+  class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..bf972af
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..38a5269
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from '@utils/ui';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = 'default',
+    ...restProps
+  }: DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+  bind:ref
+  data-slot="dropdown-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..9066564
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dropdown-menu-label"
+  data-inset={inset}
+  class={cn(
+    'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8',
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..130c20f
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..7452366
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    ...restProps
+  }: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-radio-group"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..b37cfd3
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { cn, type WithoutChild } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="dropdown-menu-radio-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-radio-item-indicator"
+    >
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..343ae2c
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  data-slot="dropdown-menu-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..02254af
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..05fe6a2
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+  bind:ref
+  data-slot="dropdown-menu-sub-content"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto',
+    className,
+  )}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..4f3e045
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { cn } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="dropdown-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..02f5f63
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..7409c77
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..5c2776c
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..6ec2de8
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import Root from './dropdown-menu.svelte';
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};

From 4946d17981e39c3e96eae6d5cc267d7be6a5c1e6 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Fri, 29 May 2026 12:15:50 +0900
Subject: [PATCH 08/24] feat: add shadcn text area

---
 src/lib/components/ui/textarea/index.ts       |  7 ++++++
 .../components/ui/textarea/textarea.svelte    | 23 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/lib/components/ui/textarea/index.ts
 create mode 100644 src/lib/components/ui/textarea/textarea.svelte

diff --git a/src/lib/components/ui/textarea/index.ts b/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..a1bd626
--- /dev/null
+++ b/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+  Root,
+  //
+  Root as Textarea,
+};
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..cb58edf
--- /dev/null
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef, type WithoutChildren } from '@utils/ui.js';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    'data-slot': dataSlot = 'textarea',
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+  bind:this={ref}
+  data-slot={dataSlot}
+  class={cn(
+    'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
+  bind:value
+  {...restProps}
+></textarea>

From 55bc475df5146e88cc13c9789ad51fe578f72c17 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Fri, 29 May 2026 12:16:09 +0900
Subject: [PATCH 09/24] feat: add shadcn input group

---
 src/lib/components/ui/input-group/index.ts    | 22 ++++++++
 .../ui/input-group/input-group-addon.svelte   | 53 +++++++++++++++++++
 .../ui/input-group/input-group-button.svelte  | 49 +++++++++++++++++
 .../ui/input-group/input-group-input.svelte   | 23 ++++++++
 .../ui/input-group/input-group-text.svelte    | 22 ++++++++
 .../input-group/input-group-textarea.svelte   | 23 ++++++++
 .../ui/input-group/input-group.svelte         | 24 +++++++++
 7 files changed, 216 insertions(+)
 create mode 100644 src/lib/components/ui/input-group/index.ts
 create mode 100644 src/lib/components/ui/input-group/input-group-addon.svelte
 create mode 100644 src/lib/components/ui/input-group/input-group-button.svelte
 create mode 100644 src/lib/components/ui/input-group/input-group-input.svelte
 create mode 100644 src/lib/components/ui/input-group/input-group-text.svelte
 create mode 100644 src/lib/components/ui/input-group/input-group-textarea.svelte
 create mode 100644 src/lib/components/ui/input-group/input-group.svelte

diff --git a/src/lib/components/ui/input-group/index.ts b/src/lib/components/ui/input-group/index.ts
new file mode 100644
index 0000000..00f6d4f
--- /dev/null
+++ b/src/lib/components/ui/input-group/index.ts
@@ -0,0 +1,22 @@
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+import Root from './input-group.svelte';
+
+export {
+  Root,
+  Addon,
+  Button,
+  Input,
+  Text,
+  Textarea,
+  //
+  Root as InputGroup,
+  Addon as InputGroupAddon,
+  Button as InputGroupButton,
+  Input as InputGroupInput,
+  Text as InputGroupText,
+  Textarea as InputGroupTextarea,
+};
diff --git a/src/lib/components/ui/input-group/input-group-addon.svelte b/src/lib/components/ui/input-group/input-group-addon.svelte
new file mode 100644
index 0000000..5a27b20
--- /dev/null
+++ b/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -0,0 +1,53 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+  export const inputGroupAddonVariants = tv({
+    base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+    variants: {
+      align: {
+        'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'block-end':
+          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  });
+
+  export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    align = 'inline-start',
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  role="group"
+  data-slot="input-group-addon"
+  data-align={align}
+  class={cn(inputGroupAddonVariants({ align }), className)}
+  onclick={(e) => {
+    if ((e.target as HTMLElement).closest('button')) {
+      return;
+    }
+    e.currentTarget.parentElement?.querySelector('input')?.focus();
+  }}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/input-group/input-group-button.svelte b/src/lib/components/ui/input-group/input-group-button.svelte
new file mode 100644
index 0000000..e52202d
--- /dev/null
+++ b/src/lib/components/ui/input-group/input-group-button.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const inputGroupButtonVariants = tv({
+    base: 'gap-2 text-sm flex items-center shadow-none',
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: 'cn-input-group-button-size-sm',
+        'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  });
+
+  export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+  import { cn } from '@utils/ui';
+  import type { ComponentProps } from 'svelte';
+  import { Button } from '$lib/components/ui/button/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    type = 'button',
+    variant = 'ghost',
+    size = 'xs',
+    ...restProps
+  }: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+  } = $props();
+</script>
+
+<Button
+  bind:ref
+  {type}
+  data-size={size}
+  {variant}
+  class={cn(inputGroupButtonVariants({ size }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</Button>
diff --git a/src/lib/components/ui/input-group/input-group-input.svelte b/src/lib/components/ui/input-group/input-group-input.svelte
new file mode 100644
index 0000000..d8adc72
--- /dev/null
+++ b/src/lib/components/ui/input-group/input-group-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '@utils/ui';
+  import type { ComponentProps } from 'svelte';
+  import { Input } from '$lib/components/ui/input/index.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...props
+  }: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+  bind:ref
+  data-slot="input-group-control"
+  class={cn(
+    'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+    className,
+  )}
+  bind:value
+  {...props}
+/>
diff --git a/src/lib/components/ui/input-group/input-group-text.svelte b/src/lib/components/ui/input-group/input-group-text.svelte
new file mode 100644
index 0000000..af33024
--- /dev/null
+++ b/src/lib/components/ui/input-group/input-group-text.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cn(
+    "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/input-group/input-group-textarea.svelte b/src/lib/components/ui/input-group/input-group-textarea.svelte
new file mode 100644
index 0000000..f01d918
--- /dev/null
+++ b/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '@utils/ui';
+  import { Textarea } from '$lib/components/ui/textarea/index.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...props
+  }: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+  bind:ref
+  data-slot="input-group-control"
+  class={cn(
+    'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
+    className,
+  )}
+  bind:value
+  {...props}
+/>
diff --git a/src/lib/components/ui/input-group/input-group.svelte b/src/lib/components/ui/input-group/input-group.svelte
new file mode 100644
index 0000000..08d068c
--- /dev/null
+++ b/src/lib/components/ui/input-group/input-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '@utils/ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...props
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="input-group"
+  role="group"
+  class={cn(
+    'group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+    className,
+  )}
+  {...props}
+>
+  {@render children?.()}
+</div>

From 046c679e97690250338c4f21a72557bc7a49af58 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Fri, 29 May 2026 12:26:33 +0900
Subject: [PATCH 10/24] feat: add shadcn scroll area

---
 src/lib/components/ui/scroll-area/index.ts    | 10 +++++
 .../scroll-area/scroll-area-scrollbar.svelte  | 30 +++++++++++++
 .../ui/scroll-area/scroll-area.svelte         | 43 +++++++++++++++++++
 .../components/ui/textarea/textarea.svelte    |  2 +-
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/ui/scroll-area/index.ts
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area.svelte

diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..1a68afe
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+
+export {
+  Root,
+  Scrollbar,
+  //,
+  Root as ScrollArea,
+  Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..e12c88f
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    children,
+    ...restProps
+  }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+  bind:ref
+  data-slot="scroll-area-scrollbar"
+  data-orientation={orientation}
+  {orientation}
+  class={cn(
+    'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ScrollAreaPrimitive.Thumb
+    data-slot="scroll-area-thumb"
+    class="rounded-full bg-border relative flex-1"
+  />
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..8038aea
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+  import { Scrollbar } from './index.js';
+  import { cn, type WithoutChild } from '@utils/ui';
+
+  let {
+    ref = $bindable(null),
+    viewportRef = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    scrollbarXClasses = '',
+    scrollbarYClasses = '',
+    children,
+    ...restProps
+  }: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
+  } = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+  bind:ref
+  data-slot="scroll-area"
+  class={cn('relative', className)}
+  {...restProps}
+>
+  <ScrollAreaPrimitive.Viewport
+    bind:ref={viewportRef}
+    data-slot="scroll-area-viewport"
+    class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+  >
+    {@render children?.()}
+  </ScrollAreaPrimitive.Viewport>
+  {#if orientation === 'vertical' || orientation === 'both'}
+    <Scrollbar orientation="vertical" class={scrollbarYClasses} />
+  {/if}
+  {#if orientation === 'horizontal' || orientation === 'both'}
+    <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+  {/if}
+  <ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
index cb58edf..d4fcb30 100644
--- a/src/lib/components/ui/textarea/textarea.svelte
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cn, type WithElementRef, type WithoutChildren } from '@utils/ui.js';
+  import { cn, type WithElementRef, type WithoutChildren } from '@utils/ui';
   import type { HTMLTextareaAttributes } from 'svelte/elements';
 
   let {

From d4e1497d8ebd7c37ce36c6f4be41e1035f141bc0 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sat, 30 May 2026 16:03:13 +0900
Subject: [PATCH 11/24] fix: style issues

---
 src/lib/components/Menu/MenuButton.svelte          |  2 +-
 .../Widget/content-browser/header.svelte           |  2 +-
 .../Widget/content-browser/side-item.svelte        |  2 +-
 src/lib/components/ui/button/button.svelte         |  2 +-
 .../ui/context-menu/context-menu-item.svelte       |  2 +-
 src/lib/components/ui/dialog/dialog-footer.svelte  |  2 +-
 src/lib/components/ui/select/select-item.svelte    |  2 +-
 src/lib/components/ui/tabs/tabs-trigger.svelte     |  8 ++++----
 src/routes/+page.svelte                            |  2 +-
 src/routes/components/cache-project.svelte         |  4 +++-
 .../components/offline-project-buttons.svelte      | 14 ++------------
 .../components/online-project-buttons.svelte       | 12 ++----------
 uno.config.ts                                      |  4 ++--
 13 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/Menu/MenuButton.svelte b/src/lib/components/Menu/MenuButton.svelte
index 31ddc26..8ed942d 100644
--- a/src/lib/components/Menu/MenuButton.svelte
+++ b/src/lib/components/Menu/MenuButton.svelte
@@ -13,7 +13,7 @@
 
 <div>
   <Button
-    class="cursor-pointer rounded-none py-1 hover:bg-neutral-800 {isOpen
+    class="rounded-none py-1 hover:bg-neutral-800 {isOpen
       ? 'bg-neutral-800 '
       : ''} px-4 text-xs text-white font-normal"
   >
diff --git a/src/lib/components/Widget/content-browser/header.svelte b/src/lib/components/Widget/content-browser/header.svelte
index fbcedd3..fc02d22 100644
--- a/src/lib/components/Widget/content-browser/header.svelte
+++ b/src/lib/components/Widget/content-browser/header.svelte
@@ -22,7 +22,7 @@
     <Breadcrumb.List>
       {#each dirs as dir, i (i)}
         <Breadcrumb.Item>
-          <Button variant="ghost" class="cursor-pointer" onclick={() => onDirClick(i)}>
+          <Button variant="ghost" onclick={() => onDirClick(i)}>
             {dir}
           </Button>
         </Breadcrumb.Item>
diff --git a/src/lib/components/Widget/content-browser/side-item.svelte b/src/lib/components/Widget/content-browser/side-item.svelte
index 9ad3633..5d70bb2 100644
--- a/src/lib/components/Widget/content-browser/side-item.svelte
+++ b/src/lib/components/Widget/content-browser/side-item.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <button
-  class="h-7 flex items-center justify-start text-left gap-1 text-neutral-200 text-md hover:bg-neutral-800 text-nowrapcursor-pointer"
+  class="h-7 flex items-center justify-start text-left gap-1 text-neutral-200 text-md hover:bg-neutral-800 text-nowrap cursor-pointer"
   style={`padding-left: ${tab * 8}px`}
   onclick={handleOpen}
 >
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 5a572e1..9d24463 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -4,7 +4,7 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const buttonVariants = tv({
-    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 disable:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
index a59c9e5..f7db975 100644
--- a/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -20,7 +20,7 @@
   data-inset={inset}
   data-variant={variant}
   class={cn(
-    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-3 py-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     className,
   )}
   {...restProps}
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index 5283c65..5ef8a1e 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -19,7 +19,7 @@
   bind:this={ref}
   data-slot="dialog-footer"
   class={cn(
-    'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+    'bg-muted/50 -mx-4 -mb-4 rounded-b-xl p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
     className,
   )}
   {...restProps}
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
index 5217b07..5404261 100644
--- a/src/lib/components/ui/select/select-item.svelte
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -18,7 +18,7 @@
   {value}
   data-slot="select-item"
   class={cn(
-    "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default items-center outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-2 pr-8 pl-4 text-sm [&_svg:not([class*='size-'])]:size-4 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default items-center outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     className,
   )}
   {...restProps}
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index 0f4d47b..daa9dcc 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -13,10 +13,10 @@
   bind:ref
   data-slot="tabs-trigger"
   class={cn(
-    "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-    'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
-    'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+    "gap-1.5 rounded-md border-b-2 border-transparent duration-300 px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
+    'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input data-[state=active]:border-primary dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
+    'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
     className,
   )}
   {...restProps}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ec11de2..d9cabb8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -103,7 +103,7 @@
             <Button
               type="button"
               variant="ghost"
-              class="text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors cursor-pointer self-end justify-self-end"
+              class="text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors self-end justify-self-end"
               onclick={handleClearCache}
             >
               Clear cache
diff --git a/src/routes/components/cache-project.svelte b/src/routes/components/cache-project.svelte
index b06f35e..8de4f81 100644
--- a/src/routes/components/cache-project.svelte
+++ b/src/routes/components/cache-project.svelte
@@ -37,7 +37,9 @@
   </button>
   <div class="h-full aspect-square">
     {#if isLoading}
-      <Spinner />
+      <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="text-xl" />
+      </div>
     {:else}
       <button
         aria-label="Remove project"
diff --git a/src/routes/components/offline-project-buttons.svelte b/src/routes/components/offline-project-buttons.svelte
index c7ce14f..fba858e 100644
--- a/src/routes/components/offline-project-buttons.svelte
+++ b/src/routes/components/offline-project-buttons.svelte
@@ -9,22 +9,12 @@
   const { handleCreateProject, handleOpenProject }: Props = $props();
 </script>
 
-<Button
-  variant="ghost"
-  size="lg"
-  class="justify-start gap-2 w-full cursor-pointer"
-  onclick={handleCreateProject}
->
+<Button variant="ghost" size="lg" class="justify-start gap-2 w-full" onclick={handleCreateProject}>
   <span class="i-ic-baseline-add"></span>
   Create project
 </Button>
 
-<Button
-  variant="ghost"
-  size="lg"
-  class="justify-start gap-2 w-full cursor-pointer"
-  onclick={handleOpenProject}
->
+<Button variant="ghost" size="lg" class="justify-start gap-2 w-full" onclick={handleOpenProject}>
   <span class="i-ic-baseline-folder-open"></span>
   Open project
 </Button>
diff --git a/src/routes/components/online-project-buttons.svelte b/src/routes/components/online-project-buttons.svelte
index 799fd21..e992a9a 100644
--- a/src/routes/components/online-project-buttons.svelte
+++ b/src/routes/components/online-project-buttons.svelte
@@ -8,22 +8,14 @@
 </script>
 
 <a href={createProjectPath}>
-  <Button
-    variant="link"
-    size="lg"
-    class="justify-start gap-2 w-full text-foreground cursor-pointer"
-  >
+  <Button variant="link" size="lg" class="justify-start gap-2 w-full text-foreground">
     <span class="i-ic-baseline-open-in-new"></span>
     Create project
   </Button>
 </a>
 
 <a href={openProjectPath}>
-  <Button
-    variant="link"
-    size="lg"
-    class="justify-start gap-2 w-full text-foreground cursor-pointer"
-  >
+  <Button variant="link" size="lg" class="justify-start gap-2 w-full text-foreground">
     <span class="i-ic-baseline-open-in-new"></span>
     Open project
   </Button>
diff --git a/uno.config.ts b/uno.config.ts
index fe69817..e6057f0 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -135,10 +135,10 @@ export default defineConfig({
     ],
     ['toggle-row-title', 'text-sm text-foreground font-medium leading-tight'],
     ['toggle-row-desc', 'text-xs text-muted-foreground mt-0.5'],
-    ['btn-ghost', 'px-4 py-2 text-sm rounded-lg transition-all duration-150 cursor-pointer'],
+    ['btn-ghost', 'px-4 py-2 text-sm rounded-lg transition-all duration-150'],
     [
       'btn-primary',
-      'flex items-center hover:bg-primary/80 gap-2 px-5 py-2 text-sm font-medium rounded-lg transition-colors duration-150 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer',
+      'flex items-center hover:bg-primary/80 gap-2 px-5 py-2 text-sm font-medium rounded-lg transition-colors duration-150 disabled:opacity-40',
     ],
   ],
   presets: [

From de4739faf9b40626202a8cf39903fef9112227e5 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sat, 30 May 2026 16:04:08 +0900
Subject: [PATCH 12/24] feat: add icon packages

---
 package.json        |   2 +
 pnpm-lock.yaml      | 672 +++++++++++++++++++++++---------------------
 pnpm-workspace.yaml |   2 +
 3 files changed, 352 insertions(+), 324 deletions(-)

diff --git a/package.json b/package.json
index d80d240..95e3a4a 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,9 @@
     "@commitlint/cli": "catalog:ci",
     "@commitlint/config-conventional": "catalog:ci",
     "@favware/cliff-jumper": "catalog:ci",
+    "@iconify-json/clarity": "catalog:icons",
     "@iconify-json/ic": "catalog:icons",
+    "@iconify-json/icomoon-free": "^1.2.1",
     "@iconify-json/material-icon-theme": "catalog:icons",
     "@iconify-json/solar": "catalog:icons",
     "@inlang/paraglide-js": "catalog:i18n",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f661cd4..f7edf53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,7 +65,7 @@ catalogs:
       version: 1.3.14
     svelte:
       specifier: ^5.55.9
-      version: 5.55.9
+      version: 5.55.10
     svelte-check:
       specifier: ^4.4.8
       version: 4.4.8
@@ -111,6 +111,9 @@ catalogs:
       specifier: ^2.18.1
       version: 2.18.1
   icons:
+    '@iconify-json/clarity':
+      specifier: ^1.2.4
+      version: 1.2.4
     '@iconify-json/ic':
       specifier: ^1.2.4
       version: 1.2.4
@@ -122,7 +125,7 @@ catalogs:
       version: 1.2.5
     '@lucide/svelte':
       specifier: ^1.16.0
-      version: 1.16.0
+      version: 1.17.0
   libs-back:
     dotenv:
       specifier: ^17.4.2
@@ -130,7 +133,7 @@ catalogs:
   libs-front:
     '@internationalized/date':
       specifier: ^3.12.1
-      version: 3.12.1
+      version: 3.12.2
     '@tanstack/svelte-query':
       specifier: ^6.1.33
       version: 6.1.33
@@ -164,7 +167,7 @@ catalogs:
       version: 10.4.0
     eslint-plugin-svelte:
       specifier: ^3.17.1
-      version: 3.17.1
+      version: 3.18.0
     globals:
       specifier: ^17.6.0
       version: 17.6.0
@@ -213,9 +216,15 @@ importers:
       '@favware/cliff-jumper':
         specifier: catalog:ci
         version: 6.1.0
+      '@iconify-json/clarity':
+        specifier: catalog:icons
+        version: 1.2.4
       '@iconify-json/ic':
         specifier: catalog:icons
         version: 1.2.4
+      '@iconify-json/icomoon-free':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@iconify-json/material-icon-theme':
         specifier: catalog:icons
         version: 1.2.66
@@ -227,10 +236,10 @@ importers:
         version: 2.18.1(typescript@6.0.3)
       '@internationalized/date':
         specifier: catalog:libs-front
-        version: 3.12.1
+        version: 3.12.2
       '@lucide/svelte':
         specifier: catalog:icons
-        version: 1.16.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 1.17.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       '@nanoforge-dev/actions':
         specifier: catalog:ci
         version: 2.0.0
@@ -248,16 +257,16 @@ importers:
         version: 1.60.0
       '@sveltejs/kit':
         specifier: catalog:core
-        version: 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+        version: 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
       '@sveltejs/vite-plugin-svelte':
         specifier: catalog:core
-        version: 7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+        version: 7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
       '@tanstack/svelte-query':
         specifier: catalog:libs-front
-        version: 6.1.33(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 6.1.33(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       '@trivago/prettier-plugin-sort-imports':
         specifier: catalog:lint
-        version: 6.0.2(prettier-plugin-svelte@4.0.1(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0)))(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 6.0.2(prettier-plugin-svelte@4.0.1(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0)))(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       '@tsconfig/svelte':
         specifier: catalog:build
         version: 5.0.8
@@ -284,7 +293,7 @@ importers:
         version: 4.1.7(@vitest/browser@4.1.7)(vitest@4.1.7)
       bits-ui:
         specifier: catalog:components
-        version: 2.18.1(@internationalized/date@3.12.1)(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 2.18.1(@internationalized/date@3.12.2)(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       bun:
         specifier: catalog:core
         version: 1.3.14
@@ -299,16 +308,16 @@ importers:
         version: 10.4.0(jiti@2.7.0)
       eslint-plugin-svelte:
         specifier: catalog:lint
-        version: 3.17.1(eslint@10.4.0(jiti@2.7.0))(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 3.18.0(eslint@10.4.0(jiti@2.7.0))(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       flowbite:
         specifier: catalog:components
         version: 4.0.2
       flowbite-svelte:
         specifier: catalog:components
-        version: 1.33.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))(tailwindcss@4.3.0)
+        version: 1.33.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))(tailwindcss@4.3.0)
       formsnap:
         specifier: catalog:libs-front
-        version: 2.0.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))(sveltekit-superforms@2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3))
+        version: 2.0.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))(sveltekit-superforms@2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3))
       globals:
         specifier: catalog:lint
         version: 17.6.0
@@ -320,7 +329,7 @@ importers:
         version: 17.0.5
       mode-watcher:
         specifier: catalog:libs-front
-        version: 1.1.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 1.1.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       monaco-editor:
         specifier: catalog:components
         version: 0.55.1
@@ -332,25 +341,25 @@ importers:
         version: 3.8.3
       prettier-plugin-svelte:
         specifier: catalog:lint
-        version: 4.0.1(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 4.0.1(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       svelte:
         specifier: catalog:core
-        version: 5.55.9(@typescript-eslint/types@8.60.0)
+        version: 5.55.10(@typescript-eslint/types@8.60.0)
       svelte-adapter-bun:
         specifier: catalog:build
-        version: 1.0.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(typescript@6.0.3)
+        version: 1.0.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(typescript@6.0.3)
       svelte-check:
         specifier: catalog:core
-        version: 4.4.8(picomatch@4.0.4)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)
+        version: 4.4.8(picomatch@4.0.4)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)
       svelte-kit-sessions:
         specifier: catalog:core
-        version: 0.4.0(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 0.4.0(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       svelte-sonner:
         specifier: catalog:libs-front
-        version: 1.1.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+        version: 1.1.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       sveltekit-superforms:
         specifier: catalog:libs-front
-        version: 2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)
+        version: 2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)
       tailwind-merge:
         specifier: catalog:css
         version: 3.6.0
@@ -377,7 +386,7 @@ importers:
         version: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
       vitest-browser-svelte:
         specifier: catalog:test
-        version: 2.1.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vitest@4.1.7)
+        version: 2.1.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vitest@4.1.7)
       zod:
         specifier: catalog:libs-front
         version: 4.4.3
@@ -646,9 +655,15 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/clarity@1.2.4':
+    resolution: {integrity: sha512-9hQ405dgvK2b2BWQdAIb/+ayH02k5VE4lKw2456wpjtq+57shHXE4Kk8bFa7RwchQHFuTtJBItVhlU4kjejxDw==}
+
   '@iconify-json/ic@1.2.4':
     resolution: {integrity: sha512-pzPMmrZrBQuwT7nmtrYdkttun8KalRGgZPIL1Ny9KpF2zjRGIUPN+npTfuD3lrgO/OnSwAoJWuekQwBpt/Cqrw==}
 
+  '@iconify-json/icomoon-free@1.2.1':
+    resolution: {integrity: sha512-Me5L0/vH/LlhVr5R85TFah0LcJD7an6mv+5dagvXY/YnXQsOx3eB7GUioXheSoB8tObhvCuZFbvujMYKPKNWfw==}
+
   '@iconify-json/material-icon-theme@1.2.66':
     resolution: {integrity: sha512-TxWgH1twATqzvdMOafXf3V7NtgdLGkg77ySoEUo0uKv4cmzsy/8fHUZWNn6t9s7ZAzAjxf41ZIDdWIwxIsMrbQ==}
 
@@ -677,8 +692,8 @@ packages:
     resolution: {integrity: sha512-E/SxcSji8WIt4DqQG9APlOs6tVtJxrrOUS3dE4ho3pWRCLLIY0PIVzgNwSukuFT+m8LuJDFwpRY5VY3ryzyGWQ==}
     engines: {node: '>=20.0.0'}
 
-  '@internationalized/date@3.12.1':
-    resolution: {integrity: sha512-6IedsVWXyq4P9Tj+TxuU8WGWM70hYLl12nbYU8jkikVpa6WXapFazPUcHUMDMoWftIDE2ILDkFFte6W2nFCkRQ==}
+  '@internationalized/date@3.12.2':
+    resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
 
   '@isaacs/ttlcache@1.4.1':
     resolution: {integrity: sha512-RQgQ4uQ+pLbqXfOmieB91ejmLwvSgv9nLx6sT6sD83s7umBypgg+OIBOBbEUiJXrfpnp9j0mRhYYdzp9uqq3lA==}
@@ -707,8 +722,8 @@ packages:
   '@lix-js/server-protocol-schema@0.1.1':
     resolution: {integrity: sha512-jBeALB6prAbtr5q4vTuxnRZZv1M2rKe8iNqRQhFJ4Tv7150unEa0vKyz0hs8Gl3fUGsWaNJBh3J8++fpbrpRBQ==}
 
-  '@lucide/svelte@1.16.0':
-    resolution: {integrity: sha512-AvvPJnaWxeiNkAljI5MsSEc84yHPLMaWQIAJOcbX7k9au/f9ITS7cxTTQiautDiOFKVOXiYdZ+d6mtl88J+Kbg==}
+  '@lucide/svelte@1.17.0':
+    resolution: {integrity: sha512-q06YCFBN5CO8cd1ADmLCxWRVMVb7xxvHzqC0lvNoxGa+FLW6Cd1Y1AOxgbQk4Iwe68vkAMCRveNHint4WoaVKg==}
     peerDependencies:
       svelte: ^5
 
@@ -779,8 +794,8 @@ packages:
     resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
     engines: {node: '>= 20'}
 
-  '@octokit/request@10.0.9':
-    resolution: {integrity: sha512-o8Bi3f608eyM+7BmBiUWxFsdjLb3/ym1cQek5LZOv9KkZcxRrHCPhhRzm6xjO6HVZ85ItD6+sTsjxo821SVa/A==}
+  '@octokit/request@10.0.10':
+    resolution: {integrity: sha512-KxNC2pTqqhszMNrf12ZRd4PonRgyJdsM4F/jySiddQK+DsRcfBtUvqn8t7UsyZhnRJHvX46OohDt5N3VqIWC2w==}
     engines: {node: '>= 20'}
 
   '@octokit/types@16.0.0':
@@ -999,6 +1014,9 @@ packages:
   '@oxc-project/types@0.132.0':
     resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
+  '@oxc-project/types@0.133.0':
+    resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
+
   '@oxfmt/binding-android-arm-eabi@0.35.0':
     resolution: {integrity: sha512-BaRKlM3DyG81y/xWTsE6gZiv89F/3pHe2BqX2H4JbiB8HNVlWWtplzgATAE5IDSdwChdeuWLDTQzJ92Lglw3ZA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1121,9 +1139,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@pkgr/core@0.2.9':
-    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+  '@pkgr/core@0.3.6':
+    resolution: {integrity: sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
 
   '@playwright/test@1.60.0':
     resolution: {integrity: sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==}
@@ -1148,30 +1166,60 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@rolldown/binding-android-arm64@1.0.3':
+    resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@rolldown/binding-darwin-arm64@1.0.2':
     resolution: {integrity: sha512-vdFA9+C/rekyGce7WqHs/xoT0ioZEWaOFyZLIV1mEeNFaFDUQrPIo8Vs2GvJ6eetb3rzDUtUBgzto3ExpXJB3w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    resolution: {integrity: sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-x64@1.0.2':
     resolution: {integrity: sha512-BewSOwTHazv77DTYiAZXSqqKZ4KP/KonFisDMVU7PImxoWfB2aepnPhd2E4SWz3zDzYgDNbs6jBmTdgNnF02GA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-x64@1.0.3':
+    resolution: {integrity: sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@rolldown/binding-freebsd-x64@1.0.2':
     resolution: {integrity: sha512-m41o7M0YWtUdqk61Tb+jnKb2rN++iRdIASlExkUoKfIAH30DOHCB8fVLzSUpbWHHU8esmEioY62PxzexE8MBuA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    resolution: {integrity: sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
     resolution: {integrity: sha512-jcojB9H7W/jS29pMKWAK1N+fU99vXodHDTatS3b3y/XSOCiHo0kkA74pL3jJmkoQtYpOCxDvaKs1fo2Ij/1X5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    resolution: {integrity: sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@rolldown/binding-linux-arm64-gnu@1.0.2':
     resolution: {integrity: sha512-1jn6qDU5iiOgFgygDzKUuKP0maTi0/f1+sBLgvij/76C77Nm3ts6ufz9Bjg5q5dduxiUIxtq86JIoBvo1xQ4Ig==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1179,6 +1227,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    resolution: {integrity: sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-arm64-musl@1.0.2':
     resolution: {integrity: sha512-QVLO/czFMdoMFSqlX3bcswcJNm/23r+qoa/jgtmFc/qEp6/jXmIkDjF/XIo8dPfGaiwy1xfQn8o77L79GeXFgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1186,6 +1241,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    resolution: {integrity: sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-linux-ppc64-gnu@1.0.2':
     resolution: {integrity: sha512-hgO5Abm0w5UL6FEa2iFnZqo2KlK7TQ5QhV5x09hujBf7t5KzHQ1VmfPuTpqRy/rNlSxua3eWH374xxiVrP+lcA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1193,6 +1255,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    resolution: {integrity: sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-s390x-gnu@1.0.2':
     resolution: {integrity: sha512-fy8rXxuYEu602abC8MUNaPjYLIFzReOaEIEMKMUa0rFEUxNpVXhs15KSSQ4qlqSaM7B6rcj9rDZgADh/IGDzLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1200,6 +1269,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    resolution: {integrity: sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-x64-gnu@1.0.2':
     resolution: {integrity: sha512-0+bOkiQ779+r1WpoHOWHqncvyySci0vKph+myNDYb+im6meJAzHQXay6oEgnkHuUGouM1LKTZwqKpBow6Kj7CQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1207,6 +1283,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    resolution: {integrity: sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-x64-musl@1.0.2':
     resolution: {integrity: sha512-mjSkrzZK5Qsl0a9d1JgILOiuZOSDTVdKENcSXBoqbzSrspLR/4/IRVDo5wd2GgZjNss/viBFJdeq+j7qH2nypw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1214,29 +1297,59 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    resolution: {integrity: sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-openharmony-arm64@1.0.2':
     resolution: {integrity: sha512-1v5vHasdfQAZoEHakBV72LIFAC9JjnymsiKxp+GEr/ma3+NJCPSaYK+qavInOovJkgwFrs7GccX2d6IgDA3Z5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    resolution: {integrity: sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@rolldown/binding-wasm32-wasi@1.0.2':
     resolution: {integrity: sha512-mb1VobWn6NheziTk5/WEaR6AKVbrwT5sOi6C7zk3gy/pD1qtJfU1j4PgTo2NJnOtbL9Dl3Aeei8w9jJ7qC2jZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    resolution: {integrity: sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
   '@rolldown/binding-win32-arm64-msvc@1.0.2':
     resolution: {integrity: sha512-SqKonF56vA/L2yHwHYcEp2P34URpOZ7d1fS635cTkpDnUtEGdUbhI6NzsPdqeSWvAAeGDrxjWjNmibDIdFf9/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    resolution: {integrity: sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@rolldown/binding-win32-x64-msvc@1.0.2':
     resolution: {integrity: sha512-v7qRI7gXLRINcOGXt+7YmAZ6iFuyZVMIoXAxhd8oP+DR9dLfL9GfNIx7PLMxmhZdvq8waUJBQiWN9EKNy+TRBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/pluginutils@1.0.1':
     resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
@@ -1328,8 +1441,8 @@ packages:
       svelte: ^5.46.4
       vite: ^8.0.0-beta.7 || ^8.0.0
 
-  '@swc/helpers@0.5.21':
-    resolution: {integrity: sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg==}
+  '@swc/helpers@0.5.23':
+    resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
 
   '@tailwindcss/node@4.3.0':
     resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
@@ -1514,14 +1627,6 @@ packages:
       '@types/json-schema':
         optional: true
 
-  '@typescript-eslint/eslint-plugin@8.59.4':
-    resolution: {integrity: sha512-PegsU+XfyJJNjd4+u/k6f9yTyp0lEXXiPopUNobZcIAUJFGICFLN+sP0Rb3JehVmiij1Ph0dFGYqODoRo/2+6A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.59.4
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/eslint-plugin@8.60.0':
     resolution: {integrity: sha512-QYb/sa74/s7OKMbACMjrYnGspj9Hs5YI5aaffSL65UfeBUzVzBJfVo3oWSpbzPurvm7yaCCo2Lk7lVj610HqKw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1530,13 +1635,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/parser@8.59.4':
-    resolution: {integrity: sha512-zORHqO/tuhxY1zWuTvMUqddRxpiFJ72xVfcNoWpqdLjs6lfPbuQBJuW4pk+49/uBMy7Ssr4bzgjiKmmDB1UbZQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/parser@8.60.0':
     resolution: {integrity: sha512-fcqpj/MyK4sxDPcbe7STNPbpQL4RLZOPWuaTmwZYuc+hJKzRf58yRxfhqGpc6PIq9ZyfSBpfHgmUHmHs0KwHwg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1544,45 +1642,22 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/project-service@8.59.4':
-    resolution: {integrity: sha512-Ly00Vu4oAacfDeHp2Zg85ioNG6l8HG+tN1D7J+xTHSxu9y0awYKJ2zH1rFBn8ZSfuGK+7FxK3Cgl3uAz0aZZLg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/project-service@8.60.0':
     resolution: {integrity: sha512-aZu74NNKJeUWqCjDddzdiKaS82dgYgV/vmf+Ui3ZdZejmgfXR/q+pRumgobnQ2cCJTgGTWp4ypiwsuofFubavg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/scope-manager@8.59.4':
-    resolution: {integrity: sha512-mUeR/3H1WrTAddJrwut8OoPjfauaztMQmRwV5fQTUyNVJCLiUXXe4lGEyYIL2oFDpP7UtgbGJXCt72wT0z2S3Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.60.0':
     resolution: {integrity: sha512-pFzqhllJMs+jghLQWzV00ds39xLzuyqPSev5pd8f4Ir0rtKR3ZLUB4/4dhjOFighWb9larvtfJvqL+4yKDI3Xw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.59.4':
-    resolution: {integrity: sha512-DLCpnKgD4alVxTBSKulK+gU1KCqOgUXfDRDXh2mZgzokQKa/70ax93I2uVO3m/LLvIAtWZIFoiifudmIqAxpMA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/tsconfig-utils@8.60.0':
     resolution: {integrity: sha512-BZPR3RGYlAXnly6ymAxfkVn5rCbZzQNou0rxv3GfWZ8cTQp+hhVd73khbGLAd8k1TlAPLISH337M+tAgAnaJDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/type-utils@8.59.4':
-    resolution: {integrity: sha512-uonTuPAAKr9XaBGqJ3LjYTh72zy5DyGesljO9gtmk/eFW0W1fRHjnwVYKB35Lm8d5Q5CluEW3gPHjTvZTmgrfA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/type-utils@8.60.0':
     resolution: {integrity: sha512-SX46wEUtitCpq7AN38HkUU/+zvUpdKf7ephtWAFgckH8O7PQIyL5gvrhQgBLuEYgLfuKWOVvWVskMbuFHAz5xg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1590,33 +1665,16 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/types@8.59.4':
-    resolution: {integrity: sha512-F1o7WJcCq+bc8dwcO/YsSEOudAH8RDtaOhM6wcAQhcUsFhnWQl81JKy48q1hoxAU0qrzM89+31GYh1515Zde3Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.60.0':
     resolution: {integrity: sha512-AsE7x2XaAK+CVbeih0Fvbn+r1qHxtpLDJ3XUuFcIinT318T90yHMJC+Zgv+jUuDjQQd06HKwxnDu6sz1IcTilA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.59.4':
-    resolution: {integrity: sha512-F+RuOmcDXo4+TPdfd/TCLS3m2nw8gE9XXyZLrA3JBfaA5tz9TtdkyD3YJFmPxulyc2cKbEok/CvFE3MgSLWnag==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/typescript-estree@8.60.0':
     resolution: {integrity: sha512-3AcZNBGMClm6CXDyo8kYvVGT/sx29sS0oBsIb9oZI2gunA4Vm2M3YHzRLPvsUBBsl+yB5FPtltq7gGH0iTlp9g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/utils@8.59.4':
-    resolution: {integrity: sha512-cYXeNAUsG4lJo5dbc1FcKm+JwIWrj1/UpTORsC6tGMjEZ81DYcvIr9/ueikhMa/Y/gDQYGp+YX9/xQrXje5BJw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/utils@8.60.0':
     resolution: {integrity: sha512-HtXuPfrHTyBDkameWpl+vJb1Uevu2tznAyahM1Oc4AENidCLTPiZDWIo4GfcxNdC/RcfGcadzzkqbRG87dUrQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1624,10 +1682,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/visitor-keys@8.59.4':
-    resolution: {integrity: sha512-U3gxVaDVnuZKhSspW/MzMxE1kq7zOdc072FcSNoqA1I9p8HyKbBFfEHoWckBAMgNMph4MamwS5iTVzFmrnt8TQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.60.0':
     resolution: {integrity: sha512-9WI52t8ZGLVGrPMBet25yAftqY/n95+zmoUUtJBBQTKDSKUu7OsPTroT2op7U9JatkoRccL0YkWDNMFfC4Sjxg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2018,8 +2072,8 @@ packages:
   date-fns@4.3.0:
     resolution: {integrity: sha512-OYcL+3N/jyWbYdFGqoMAhytDgxP9pbYPUUiRCOgn4Fewaadk9l/Wam4Avciiyp2BgkpfQyBV9B+ehnVJych+eQ==}
 
-  dayjs@1.11.20:
-    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
+  dayjs@1.11.21:
+    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -2085,8 +2139,8 @@ packages:
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
-  enhanced-resolve@5.22.0:
-    resolution: {integrity: sha512-xYcDWrpELkFzz9SpZ3PlI6Eu6eD93Yf0WLDRxikGhWJ3MAir2SNZTIVCVZqZ/NUyx8AdMc2gT9C0gPiw18kG+A==}
+  enhanced-resolve@5.22.1:
+    resolution: {integrity: sha512-6QEuw3zoX1SJQc7b87aBXke/no+mG2bTBgw29gWMQonLmpEkWoCAVkl+M49e48AZlWzxiDzDZzYdp6kobcyLww==}
     engines: {node: '>=10.13.0'}
 
   env-paths@2.2.1:
@@ -2141,8 +2195,8 @@ packages:
     peerDependencies:
       eslint: ^8.40.0 || ^9.0.0 || ^10.0.0
 
-  eslint-plugin-prettier@5.5.5:
-    resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==}
+  eslint-plugin-prettier@5.5.6:
+    resolution: {integrity: sha512-ifetmTcxWfz+4qRW3pH/ujdTq2jQIj59AxJMIN26K5avYgU8dxycUETQonWiW+wPrYXA0j3Try0l1CnwVQtDqQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       '@types/eslint': '>=8.0.0'
@@ -2155,8 +2209,8 @@ packages:
       eslint-config-prettier:
         optional: true
 
-  eslint-plugin-svelte@3.17.1:
-    resolution: {integrity: sha512-NyiXHtS3Ni7e532RBwS9OXlMKDIrENg3gY+/+ODjZzQx2xhU3NlJ+nIl1a93iUUQeiJL3lS8KLmY+W8hklzweQ==}
+  eslint-plugin-svelte@3.18.0:
+    resolution: {integrity: sha512-vc3P37lrDronWDb2kPXiG8sqkuiMqitGXSSaflb7Y+jpDgNoAzW8i7tdqyJKpcLZmFIqZCD+je2oZRf9qyRyBw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.1 || ^9.0.0 || ^10.0.0
@@ -2259,9 +2313,6 @@ packages:
     resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==}
     engines: {node: '>=8.0.0'}
 
-  fast-content-type-parse@3.0.0:
-    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -2429,8 +2480,8 @@ packages:
     resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==}
     engines: {node: '>=12'}
 
-  hasown@2.0.3:
-    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
   html-escaper@2.0.2:
@@ -3040,6 +3091,11 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  rolldown@1.0.3:
+    resolution: {integrity: sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   runed@0.23.4:
     resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
     peerDependencies:
@@ -3217,8 +3273,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  svelte@5.55.9:
-    resolution: {integrity: sha512-fTjjT8cHLDwigcu2j3pv7Jq04LklXevPB8uBgyHNiTXv+RMNvVnrjS4UEYrLMkhuq1vpCodHjiW+z/95SDs/fg==}
+  svelte@5.55.10:
+    resolution: {integrity: sha512-v9mFVBY1USosyIWdXE7Cg4AN0ywyKCMcAhONvli8doMowEhFhMdNLKD1j7O/UnsrdVTHaUOk/jv8hD/HClVy+g==}
     engines: {node: '>=18'}
 
   sveltekit-superforms@2.30.1:
@@ -3227,8 +3283,8 @@ packages:
       '@sveltejs/kit': 1.x || 2.x
       svelte: 3.x || 4.x || >=5.0.0-next.51
 
-  synckit@0.11.12:
-    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
+  synckit@0.11.13:
+    resolution: {integrity: sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
   tabbable@6.4.0:
@@ -3314,15 +3370,8 @@ packages:
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
-  typebox@1.1.38:
-    resolution: {integrity: sha512-pZ0aQPmMmXoUvSbeuWf/Hzsc+avNw/Zd6VeE8CFgkVGWyuHPJvqeJJDeJqLve+K70LvjYIoleGcoJHPT17cWoA==}
-
-  typescript-eslint@8.59.4:
-    resolution: {integrity: sha512-Rw6+44QNFaXtgHSjPy+Kw8hrJniMYzR85E9yLmOLcfZ91/rz+JXQbDTCmc6ccxMPY6K6PgAq26f0JCBfR7LIPQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
+  typebox@1.1.39:
+    resolution: {integrity: sha512-vj0afVtOfLQvv0GR0VxVagYxsXN64btL7Z9XoaG0ZggH3mruMMkOO6hXdgMsjCY3shZgEvooAWVeznQVs5c43w==}
 
   typescript-eslint@8.60.0:
     resolution: {integrity: sha512-9f65qWLZdAW9m1JaxBDUHcqRUfL8bkxxXL7XxEfI+F09q56PkBvIfCjLF3yInsDM/BBmwkqmCQdCZe/RYlIWEw==}
@@ -3348,8 +3397,8 @@ packages:
   undici-types@7.24.6:
     resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
 
-  undici@6.25.0:
-    resolution: {integrity: sha512-ZgpWDC5gmNiuY9CnLVXEH8rl50xhRCuLNA97fAUnKi8RRuV4E6KG31pDTsLVUKnohJE0I3XDrTeEydAXRw47xg==}
+  undici@6.26.0:
+    resolution: {integrity: sha512-4yqz8a3n5HmGTlsbADNtr/dJlhkh/55Rq798G6ibiULcXbDtaLpTl1pvdqcbFfeoj3iSi52lePFM7h9H21cw/A==}
     engines: {node: '>=18.17'}
 
   unicorn-magic@0.3.0:
@@ -3601,19 +3650,19 @@ snapshots:
       '@octokit/core': 7.0.6
       '@octokit/plugin-paginate-rest': 14.0.0(@octokit/core@7.0.6)
       '@octokit/plugin-rest-endpoint-methods': 17.0.0(@octokit/core@7.0.6)
-      '@octokit/request': 10.0.9
+      '@octokit/request': 10.0.10
       '@octokit/request-error': 7.1.0
-      undici: 6.25.0
+      undici: 6.26.0
 
   '@actions/http-client@3.0.2':
     dependencies:
       tunnel: 0.0.6
-      undici: 6.25.0
+      undici: 6.26.0
 
   '@actions/http-client@4.0.1':
     dependencies:
       tunnel: 0.0.6
-      undici: 6.25.0
+      undici: 6.26.0
 
   '@actions/io@3.0.2': {}
 
@@ -3922,10 +3971,18 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/clarity@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ic@1.2.4':
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/icomoon-free@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/material-icon-theme@1.2.66':
     dependencies:
       '@iconify/types': 2.0.0
@@ -3970,9 +4027,9 @@ snapshots:
     transitivePeerDependencies:
       - babel-plugin-macros
 
-  '@internationalized/date@3.12.1':
+  '@internationalized/date@3.12.2':
     dependencies:
-      '@swc/helpers': 0.5.21
+      '@swc/helpers': 0.5.23
 
   '@isaacs/ttlcache@1.4.1': {}
 
@@ -4009,9 +4066,9 @@ snapshots:
 
   '@lix-js/server-protocol-schema@0.1.1': {}
 
-  '@lucide/svelte@1.16.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))':
+  '@lucide/svelte@1.17.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))':
     dependencies:
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
   '@nanoforge-dev/actions@2.0.0':
     dependencies:
@@ -4033,9 +4090,9 @@ snapshots:
       eslint-config-prettier: 10.1.8(eslint@10.4.0(jiti@2.7.0))
       eslint-formatter-pretty: 7.1.0
       eslint-plugin-format: 1.5.0(eslint@10.4.0(jiti@2.7.0))
-      eslint-plugin-prettier: 5.5.5(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.4.0(jiti@2.7.0)))(eslint@10.4.0(jiti@2.7.0))(prettier@3.8.3)
+      eslint-plugin-prettier: 5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.4.0(jiti@2.7.0)))(eslint@10.4.0(jiti@2.7.0))(prettier@3.8.3)
       globals: 16.5.0
-      typescript-eslint: 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
+      typescript-eslint: 8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
     transitivePeerDependencies:
       - '@types/eslint'
       - eslint
@@ -4058,7 +4115,7 @@ snapshots:
     dependencies:
       '@octokit/auth-token': 6.0.0
       '@octokit/graphql': 9.0.3
-      '@octokit/request': 10.0.9
+      '@octokit/request': 10.0.10
       '@octokit/request-error': 7.1.0
       '@octokit/types': 16.0.0
       before-after-hook: 4.0.0
@@ -4071,7 +4128,7 @@ snapshots:
 
   '@octokit/graphql@9.0.3':
     dependencies:
-      '@octokit/request': 10.0.9
+      '@octokit/request': 10.0.10
       '@octokit/types': 16.0.0
       universal-user-agent: 7.0.3
 
@@ -4098,13 +4155,12 @@ snapshots:
     dependencies:
       '@octokit/types': 16.0.0
 
-  '@octokit/request@10.0.9':
+  '@octokit/request@10.0.10':
     dependencies:
       '@octokit/endpoint': 11.0.3
       '@octokit/request-error': 7.1.0
       '@octokit/types': 16.0.0
       content-type: 2.0.0
-      fast-content-type-parse: 3.0.0
       json-with-bigint: 3.5.8
       universal-user-agent: 7.0.3
 
@@ -4228,6 +4284,8 @@ snapshots:
 
   '@oxc-project/types@0.132.0': {}
 
+  '@oxc-project/types@0.133.0': {}
+
   '@oxfmt/binding-android-arm-eabi@0.35.0':
     optional: true
 
@@ -4285,7 +4343,7 @@ snapshots:
   '@oxfmt/binding-win32-x64-msvc@0.35.0':
     optional: true
 
-  '@pkgr/core@0.2.9': {}
+  '@pkgr/core@0.3.6': {}
 
   '@playwright/test@1.60.0':
     dependencies:
@@ -4305,39 +4363,75 @@ snapshots:
   '@rolldown/binding-android-arm64@1.0.2':
     optional: true
 
+  '@rolldown/binding-android-arm64@1.0.3':
+    optional: true
+
   '@rolldown/binding-darwin-arm64@1.0.2':
     optional: true
 
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    optional: true
+
   '@rolldown/binding-darwin-x64@1.0.2':
     optional: true
 
+  '@rolldown/binding-darwin-x64@1.0.3':
+    optional: true
+
   '@rolldown/binding-freebsd-x64@1.0.2':
     optional: true
 
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-arm64-gnu@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-arm64-musl@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-ppc64-gnu@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-s390x-gnu@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-x64-gnu@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    optional: true
+
   '@rolldown/binding-linux-x64-musl@1.0.2':
     optional: true
 
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    optional: true
+
   '@rolldown/binding-openharmony-arm64@1.0.2':
     optional: true
 
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    optional: true
+
   '@rolldown/binding-wasm32-wasi@1.0.2':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -4345,12 +4439,25 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
   '@rolldown/binding-win32-arm64-msvc@1.0.2':
     optional: true
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    optional: true
+
   '@rolldown/binding-win32-x64-msvc@1.0.2':
     optional: true
 
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    optional: true
+
   '@rolldown/pluginutils@1.0.1': {}
 
   '@rollup/plugin-node-resolve@15.3.1':
@@ -4402,11 +4509,11 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
-  '@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.10(acorn@8.16.0)
-      '@sveltejs/vite-plugin-svelte': 7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@sveltejs/vite-plugin-svelte': 7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
       '@types/cookie': 0.6.0
       acorn: 8.16.0
       cookie: 0.6.0
@@ -4417,28 +4524,28 @@ snapshots:
       mrmime: 2.0.1
       set-cookie-parser: 3.1.0
       sirv: 3.0.2
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
       vite: 8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)
     optionalDependencies:
       typescript: 6.0.3
 
-  '@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
       deepmerge: 4.3.1
       magic-string: 0.30.21
       obug: 2.1.1
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
       vite: 8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)
       vitefu: 1.1.3(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
 
-  '@swc/helpers@0.5.21':
+  '@swc/helpers@0.5.23':
     dependencies:
       tslib: 2.8.1
 
   '@tailwindcss/node@4.3.0':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.22.0
+      enhanced-resolve: 5.22.1
       jiti: 2.7.0
       lightningcss: 1.32.0
       magic-string: 0.30.21
@@ -4506,16 +4613,16 @@ snapshots:
 
   '@tanstack/query-core@5.100.14': {}
 
-  '@tanstack/svelte-query@6.1.33(svelte@5.55.9(@typescript-eslint/types@8.60.0))':
+  '@tanstack/svelte-query@6.1.33(svelte@5.55.10(@typescript-eslint/types@8.60.0))':
     dependencies:
       '@tanstack/query-core': 5.100.14
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  '@testing-library/svelte-core@1.0.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))':
+  '@testing-library/svelte-core@1.0.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))':
     dependencies:
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  '@trivago/prettier-plugin-sort-imports@6.0.2(prettier-plugin-svelte@4.0.1(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0)))(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0))':
+  '@trivago/prettier-plugin-sort-imports@6.0.2(prettier-plugin-svelte@4.0.1(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0)))(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0))':
     dependencies:
       '@babel/generator': 7.29.7
       '@babel/parser': 7.29.7
@@ -4527,8 +4634,8 @@ snapshots:
       parse-imports-exports: 0.2.4
       prettier: 3.8.3
     optionalDependencies:
-      prettier-plugin-svelte: 4.0.1(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0))
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      prettier-plugin-svelte: 4.0.1(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0))
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -4588,22 +4695,6 @@ snapshots:
       '@types/json-schema': 7.0.15
     optional: true
 
-  '@typescript-eslint/eslint-plugin@8.59.4(@typescript-eslint/parser@8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/scope-manager': 8.59.4
-      '@typescript-eslint/type-utils': 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.59.4
-      eslint: 10.4.0(jiti@2.7.0)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.60.0(@typescript-eslint/parser@8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -4620,18 +4711,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.59.4
-      '@typescript-eslint/types': 8.59.4
-      '@typescript-eslint/typescript-estree': 8.59.4(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.59.4
-      debug: 4.4.3
-      eslint: 10.4.0(jiti@2.7.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.60.0
@@ -4644,15 +4723,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.59.4(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.59.4(typescript@6.0.3)
-      '@typescript-eslint/types': 8.59.4
-      debug: 4.4.3
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/project-service@8.60.0(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.60.0(typescript@6.0.3)
@@ -4662,36 +4732,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.59.4':
-    dependencies:
-      '@typescript-eslint/types': 8.59.4
-      '@typescript-eslint/visitor-keys': 8.59.4
-
   '@typescript-eslint/scope-manager@8.60.0':
     dependencies:
       '@typescript-eslint/types': 8.60.0
       '@typescript-eslint/visitor-keys': 8.60.0
 
-  '@typescript-eslint/tsconfig-utils@8.59.4(typescript@6.0.3)':
-    dependencies:
-      typescript: 6.0.3
-
   '@typescript-eslint/tsconfig-utils@8.60.0(typescript@6.0.3)':
     dependencies:
       typescript: 6.0.3
 
-  '@typescript-eslint/type-utils@8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.59.4
-      '@typescript-eslint/typescript-estree': 8.59.4(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      debug: 4.4.3
-      eslint: 10.4.0(jiti@2.7.0)
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/types': 8.60.0
@@ -4704,25 +4753,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.59.4': {}
-
   '@typescript-eslint/types@8.60.0': {}
 
-  '@typescript-eslint/typescript-estree@8.59.4(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.59.4(typescript@6.0.3)
-      '@typescript-eslint/tsconfig-utils': 8.59.4(typescript@6.0.3)
-      '@typescript-eslint/types': 8.59.4
-      '@typescript-eslint/visitor-keys': 8.59.4
-      debug: 4.4.3
-      minimatch: 10.2.5
-      semver: 7.8.1
-      tinyglobby: 0.2.16
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.60.0(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.60.0(typescript@6.0.3)
@@ -4738,17 +4770,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.0(jiti@2.7.0))
-      '@typescript-eslint/scope-manager': 8.59.4
-      '@typescript-eslint/types': 8.59.4
-      '@typescript-eslint/typescript-estree': 8.59.4(typescript@6.0.3)
-      eslint: 10.4.0(jiti@2.7.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.0(jiti@2.7.0))
@@ -4760,11 +4781,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.59.4':
-    dependencies:
-      '@typescript-eslint/types': 8.59.4
-      eslint-visitor-keys: 5.0.1
-
   '@typescript-eslint/visitor-keys@8.60.0':
     dependencies:
       '@typescript-eslint/types': 8.60.0
@@ -4932,7 +4948,7 @@ snapshots:
       '@types/validator': 13.15.10
       '@vinejs/compiler': 3.0.0
       camelcase: 8.0.0
-      dayjs: 1.11.20
+      dayjs: 1.11.21
       dlv: 1.1.3
       normalize-url: 8.1.1
       validator: 13.15.35
@@ -5091,15 +5107,15 @@ snapshots:
 
   before-after-hook@4.0.0: {}
 
-  bits-ui@2.18.1(@internationalized/date@3.12.1)(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  bits-ui@2.18.1(@internationalized/date@3.12.2)(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       '@floating-ui/core': 1.7.5
       '@floating-ui/dom': 1.7.6
-      '@internationalized/date': 3.12.1
+      '@internationalized/date': 3.12.2
       esm-env: 1.2.2
-      runed: 0.35.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
-      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+      runed: 0.35.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
+      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       tabbable: 6.4.0
     transitivePeerDependencies:
       - '@sveltejs/kit'
@@ -5264,7 +5280,7 @@ snapshots:
 
   date-fns@4.3.0: {}
 
-  dayjs@1.11.20:
+  dayjs@1.11.21:
     optional: true
 
   debug@4.4.3:
@@ -5310,7 +5326,7 @@ snapshots:
 
   emoji-regex@10.6.0: {}
 
-  enhanced-resolve@5.22.0:
+  enhanced-resolve@5.22.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.3
@@ -5366,19 +5382,19 @@ snapshots:
       ohash: 2.0.11
       oxfmt: 0.35.0
       prettier: 3.8.3
-      synckit: 0.11.12
+      synckit: 0.11.13
 
-  eslint-plugin-prettier@5.5.5(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.4.0(jiti@2.7.0)))(eslint@10.4.0(jiti@2.7.0))(prettier@3.8.3):
+  eslint-plugin-prettier@5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.4.0(jiti@2.7.0)))(eslint@10.4.0(jiti@2.7.0))(prettier@3.8.3):
     dependencies:
       eslint: 10.4.0(jiti@2.7.0)
       prettier: 3.8.3
       prettier-linter-helpers: 1.0.1
-      synckit: 0.11.12
+      synckit: 0.11.13
     optionalDependencies:
       '@types/eslint': 9.6.1
       eslint-config-prettier: 10.1.8(eslint@10.4.0(jiti@2.7.0))
 
-  eslint-plugin-svelte@3.17.1(eslint@10.4.0(jiti@2.7.0))(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  eslint-plugin-svelte@3.18.0(eslint@10.4.0(jiti@2.7.0))(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.0(jiti@2.7.0))
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -5390,9 +5406,9 @@ snapshots:
       postcss-load-config: 3.1.4(postcss@8.5.15)
       postcss-safe-parser: 7.0.1(postcss@8.5.15)
       semver: 7.8.1
-      svelte-eslint-parser: 1.6.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+      svelte-eslint-parser: 1.6.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))
     optionalDependencies:
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
     transitivePeerDependencies:
       - ts-node
 
@@ -5517,8 +5533,6 @@ snapshots:
       pure-rand: 6.1.0
     optional: true
 
-  fast-content-type-parse@3.0.0: {}
-
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -5567,7 +5581,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  flowbite-svelte@1.33.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))(tailwindcss@4.3.0):
+  flowbite-svelte@1.33.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))(tailwindcss@4.3.0):
     dependencies:
       '@floating-ui/dom': 1.7.6
       '@floating-ui/utils': 0.2.11
@@ -5576,7 +5590,7 @@ snapshots:
       date-fns: 4.3.0
       esm-env: 1.2.2
       flowbite: 3.1.2
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
       tailwind-merge: 3.6.0
       tailwind-variants: 3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.0)
       tailwindcss: 4.3.0
@@ -5610,11 +5624,11 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  formsnap@2.0.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))(sveltekit-superforms@2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)):
+  formsnap@2.0.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))(sveltekit-superforms@2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)):
     dependencies:
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
-      svelte-toolbelt: 0.5.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))
-      sveltekit-superforms: 2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
+      svelte-toolbelt: 0.5.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))
+      sveltekit-superforms: 2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)
 
   fsevents@2.3.2:
     optional: true
@@ -5692,7 +5706,7 @@ snapshots:
 
   has-flag@5.0.1: {}
 
-  hasown@2.0.3:
+  hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
 
@@ -5732,7 +5746,7 @@ snapshots:
 
   is-core-module@2.16.2:
     dependencies:
-      hasown: 2.0.3
+      hasown: 2.0.4
 
   is-extglob@2.1.1: {}
 
@@ -5982,11 +5996,11 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.4
 
-  mode-watcher@1.1.0(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  mode-watcher@1.1.0(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
-      runed: 0.25.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
-      svelte-toolbelt: 0.7.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+      runed: 0.25.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
+      svelte-toolbelt: 0.7.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))
 
   monaco-editor@0.55.1:
     dependencies:
@@ -6187,10 +6201,10 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-svelte@4.0.1(prettier@3.8.3)(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  prettier-plugin-svelte@4.0.1(prettier@3.8.3)(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       prettier: 3.8.3
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
   prettier@2.5.1: {}
 
@@ -6257,29 +6271,50 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.2
       '@rolldown/binding-win32-x64-msvc': 1.0.2
 
-  runed@0.23.4(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  rolldown@1.0.3:
+    dependencies:
+      '@oxc-project/types': 0.133.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.3
+      '@rolldown/binding-darwin-arm64': 1.0.3
+      '@rolldown/binding-darwin-x64': 1.0.3
+      '@rolldown/binding-freebsd-x64': 1.0.3
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.3
+      '@rolldown/binding-linux-arm64-gnu': 1.0.3
+      '@rolldown/binding-linux-arm64-musl': 1.0.3
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.3
+      '@rolldown/binding-linux-s390x-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-musl': 1.0.3
+      '@rolldown/binding-openharmony-arm64': 1.0.3
+      '@rolldown/binding-wasm32-wasi': 1.0.3
+      '@rolldown/binding-win32-arm64-msvc': 1.0.3
+      '@rolldown/binding-win32-x64-msvc': 1.0.3
+
+  runed@0.23.4(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  runed@0.25.0(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  runed@0.25.0(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  runed@0.28.0(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  runed@0.28.0(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  runed@0.35.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  runed@0.35.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       dequal: 2.0.3
       esm-env: 1.2.2
       lz-string: 1.5.0
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
     optionalDependencies:
-      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
 
   sade@1.8.1:
     dependencies:
@@ -6367,25 +6402,25 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-adapter-bun@1.0.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(typescript@6.0.3):
+  svelte-adapter-bun@1.0.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(typescript@6.0.3):
     dependencies:
-      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
-      rolldown: 1.0.2
+      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+      rolldown: 1.0.3
       typescript: 6.0.3
 
-  svelte-check@4.4.8(picomatch@4.0.4)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3):
+  svelte-check@4.4.8(picomatch@4.0.4)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       chokidar: 4.0.3
       fdir: 6.5.0(picomatch@4.0.4)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
       typescript: 6.0.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.6.1(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  svelte-eslint-parser@1.6.1(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -6395,42 +6430,42 @@ snapshots:
       postcss-selector-parser: 7.1.1
       semver: 7.8.1
     optionalDependencies:
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  svelte-kit-sessions@0.4.0(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  svelte-kit-sessions@0.4.0(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       '@isaacs/ttlcache': 1.4.1
-      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  svelte-sonner@1.1.1(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  svelte-sonner@1.1.1(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
-      runed: 0.28.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      runed: 0.28.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  svelte-toolbelt@0.10.6(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  svelte-toolbelt@0.10.6(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       clsx: 2.1.1
-      runed: 0.35.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+      runed: 0.35.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       style-to-object: 1.0.14
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
     transitivePeerDependencies:
       - '@sveltejs/kit'
 
-  svelte-toolbelt@0.5.0(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  svelte-toolbelt@0.5.0(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       clsx: 2.1.1
       style-to-object: 1.0.14
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  svelte-toolbelt@0.7.1(svelte@5.55.9(@typescript-eslint/types@8.60.0)):
+  svelte-toolbelt@0.7.1(svelte@5.55.10(@typescript-eslint/types@8.60.0)):
     dependencies:
       clsx: 2.1.1
-      runed: 0.23.4(svelte@5.55.9(@typescript-eslint/types@8.60.0))
+      runed: 0.23.4(svelte@5.55.10(@typescript-eslint/types@8.60.0))
       style-to-object: 1.0.14
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
 
-  svelte@5.55.9(@typescript-eslint/types@8.60.0):
+  svelte@5.55.10(@typescript-eslint/types@8.60.0):
     dependencies:
       '@jridgewell/remapping': 2.3.5
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -6451,12 +6486,12 @@ snapshots:
     transitivePeerDependencies:
       - '@typescript-eslint/types'
 
-  sveltekit-superforms@2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3):
+  sveltekit-superforms@2.30.1(@sveltejs/kit@2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(@types/json-schema@7.0.15)(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3):
     dependencies:
-      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.9(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@sveltejs/kit': 2.61.1(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.55.10(@typescript-eslint/types@8.60.0))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
       devalue: 5.8.1
       memoize-weak: 1.0.2
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
       ts-deepmerge: 7.0.3
     optionalDependencies:
       '@exodus/schemasafe': 1.3.0
@@ -6470,7 +6505,7 @@ snapshots:
       joi: 17.13.3
       json-schema-to-ts: 3.1.1
       superstruct: 2.0.2
-      typebox: 1.1.38
+      typebox: 1.1.39
       valibot: 1.4.1(typescript@6.0.3)
       yup: 1.7.1
       zod: 4.4.3
@@ -6479,9 +6514,9 @@ snapshots:
       - '@types/json-schema'
       - typescript
 
-  synckit@0.11.12:
+  synckit@0.11.13:
     dependencies:
-      '@pkgr/core': 0.2.9
+      '@pkgr/core': 0.3.6
 
   tabbable@6.4.0: {}
 
@@ -6540,20 +6575,9 @@ snapshots:
 
   type-level-regexp@0.1.17: {}
 
-  typebox@1.1.38:
+  typebox@1.1.39:
     optional: true
 
-  typescript-eslint@8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3):
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.59.4(@typescript-eslint/parser@8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/parser': 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/typescript-estree': 8.59.4(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.59.4(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
-      eslint: 10.4.0(jiti@2.7.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   typescript-eslint@8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.60.0(@typescript-eslint/parser@8.60.0(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)
@@ -6584,7 +6608,7 @@ snapshots:
 
   undici-types@7.24.6: {}
 
-  undici@6.25.0: {}
+  undici@6.26.0: {}
 
   unicorn-magic@0.3.0: {}
 
@@ -6659,10 +6683,10 @@ snapshots:
     optionalDependencies:
       vite: 8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)
 
-  vitest-browser-svelte@2.1.1(svelte@5.55.9(@typescript-eslint/types@8.60.0))(vitest@4.1.7):
+  vitest-browser-svelte@2.1.1(svelte@5.55.10(@typescript-eslint/types@8.60.0))(vitest@4.1.7):
     dependencies:
-      '@testing-library/svelte-core': 1.0.0(svelte@5.55.9(@typescript-eslint/types@8.60.0))
-      svelte: 5.55.9(@typescript-eslint/types@8.60.0)
+      '@testing-library/svelte-core': 1.0.0(svelte@5.55.10(@typescript-eslint/types@8.60.0))
+      svelte: 5.55.10(@typescript-eslint/types@8.60.0)
       vitest: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0))
 
   vitest@4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(vite@8.0.14(@types/node@25.9.1)(jiti@2.7.0)(yaml@2.9.0)):
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 817245e..872da56 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -44,7 +44,9 @@ catalogs:
   i18n:
     '@inlang/paraglide-js': ^2.18.1
   icons:
+    '@iconify-json/clarity': ^1.2.4
     '@iconify-json/ic': ^1.2.4
+    '@iconify-json/icomoon-free': ^1.2.1
     '@iconify-json/material-icon-theme': ^1.2.66
     '@iconify-json/solar': ^1.2.5
     '@lucide/svelte': ^1.16.0

From 35fa9f0305d6ff0379cece58b57a4e372ccd7ba9 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sat, 30 May 2026 21:57:17 +0900
Subject: [PATCH 13/24] feat: add ecs handler

---
 .../client/ecs/component/component-handle.ts  | 28 ++++++++
 .../client/ecs/component/component-manager.ts | 47 ++++++++++++++
 .../client/ecs/component/component.type.ts    | 10 +++
 src/lib/client/ecs/ecs-handler.ts             | 55 ++++++++++++++++
 src/lib/client/ecs/index.ts                   | 26 ++++++++
 .../entity/component/component-handle.ts      | 35 ++++++++++
 .../entity/component/component-manager.ts     | 60 +++++++++++++++++
 .../component/component-param-handle.ts       | 40 ++++++++++++
 .../component/component-param-manager.ts      | 58 +++++++++++++++++
 .../client/ecs/scene/entity/entity-handle.ts  | 42 ++++++++++++
 .../client/ecs/scene/entity/entity-manager.ts | 49 ++++++++++++++
 .../client/ecs/scene/entity/entity.type.ts    |  6 ++
 src/lib/client/ecs/scene/scene-handle.ts      | 58 +++++++++++++++++
 src/lib/client/ecs/scene/scene-manager.ts     | 64 +++++++++++++++++++
 src/lib/client/ecs/scene/scene.type.ts        | 11 ++++
 .../client/ecs/scene/system/system-handle.ts  | 24 +++++++
 .../client/ecs/scene/system/system-manager.ts | 45 +++++++++++++
 src/lib/client/ecs/system/system-handle.ts    | 28 ++++++++
 src/lib/client/ecs/system/system-manager.ts   | 48 ++++++++++++++
 src/lib/client/ecs/system/system.type.ts      |  5 ++
 src/lib/client/ecs/transformers.ts            | 36 +++++++++++
 src/lib/client/project/package-handler.ts     |  2 +-
 src/lib/client/project/project.ts             |  8 +++
 .../server/project/package/package-handler.ts | 48 ++++++++++++--
 24 files changed, 828 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/client/ecs/component/component-handle.ts
 create mode 100644 src/lib/client/ecs/component/component-manager.ts
 create mode 100644 src/lib/client/ecs/component/component.type.ts
 create mode 100644 src/lib/client/ecs/ecs-handler.ts
 create mode 100644 src/lib/client/ecs/index.ts
 create mode 100644 src/lib/client/ecs/scene/entity/component/component-handle.ts
 create mode 100644 src/lib/client/ecs/scene/entity/component/component-manager.ts
 create mode 100644 src/lib/client/ecs/scene/entity/component/component-param-handle.ts
 create mode 100644 src/lib/client/ecs/scene/entity/component/component-param-manager.ts
 create mode 100644 src/lib/client/ecs/scene/entity/entity-handle.ts
 create mode 100644 src/lib/client/ecs/scene/entity/entity-manager.ts
 create mode 100644 src/lib/client/ecs/scene/entity/entity.type.ts
 create mode 100644 src/lib/client/ecs/scene/scene-handle.ts
 create mode 100644 src/lib/client/ecs/scene/scene-manager.ts
 create mode 100644 src/lib/client/ecs/scene/scene.type.ts
 create mode 100644 src/lib/client/ecs/scene/system/system-handle.ts
 create mode 100644 src/lib/client/ecs/scene/system/system-manager.ts
 create mode 100644 src/lib/client/ecs/system/system-handle.ts
 create mode 100644 src/lib/client/ecs/system/system-manager.ts
 create mode 100644 src/lib/client/ecs/system/system.type.ts
 create mode 100644 src/lib/client/ecs/transformers.ts

diff --git a/src/lib/client/ecs/component/component-handle.ts b/src/lib/client/ecs/component/component-handle.ts
new file mode 100644
index 0000000..dbe0a73
--- /dev/null
+++ b/src/lib/client/ecs/component/component-handle.ts
@@ -0,0 +1,28 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import type { ComponentManager } from './component-manager';
+import type { Component } from './component.type';
+
+export class ComponentHandle {
+  private _manager: ComponentManager;
+  private readonly _store: Writable<Component>;
+  public readonly id: string;
+
+  constructor(manager: ComponentManager, component: Component) {
+    this._manager = manager;
+    this._store = writable(component);
+    this.id = component.id;
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  update(component: Partial<Component>) {
+    this._store.set({ ...get(this._store), ...component });
+  }
+
+  delete() {
+    this._manager.delete(this.id);
+  }
+}
diff --git a/src/lib/client/ecs/component/component-manager.ts b/src/lib/client/ecs/component/component-manager.ts
new file mode 100644
index 0000000..9aa44e9
--- /dev/null
+++ b/src/lib/client/ecs/component/component-manager.ts
@@ -0,0 +1,47 @@
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+
+import { ComponentHandle } from './component-handle';
+import type { Component } from './component.type';
+
+export class ComponentManager {
+  private readonly _store: Writable<Component[]>;
+  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  constructor(components: Component[]) {
+    this._store = writable<Component[]>(components);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  add(component: Component) {
+    const components = get(this._store);
+    components.push(component);
+    this._store.set(components);
+  }
+
+  get(id: string): ComponentHandle {
+    const component = get(this._store).find((component) => component.id === id);
+    if (!component) throw new Error(`Component with id ${id} not found`);
+    const handle = new ComponentHandle(this, component);
+
+    this._subscriptions[id] = handle.store.subscribe((component) => this._update(id, component));
+    return handle;
+  }
+
+  delete(id: string) {
+    const components = get(this._store);
+    this._store.set(components.filter((component) => component.id !== id));
+
+    if (id in this._subscriptions) this._subscriptions[id]();
+  }
+
+  private _update(id: string, component: Component) {
+    const components = get(this._store);
+    const index = components.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    components[index] = component;
+    this._store.set(components);
+  }
+}
diff --git a/src/lib/client/ecs/component/component.type.ts b/src/lib/client/ecs/component/component.type.ts
new file mode 100644
index 0000000..cd70660
--- /dev/null
+++ b/src/lib/client/ecs/component/component.type.ts
@@ -0,0 +1,10 @@
+import type { EditorComponentManifest } from '@nanoforge-dev/ecs-lib';
+
+export type ComponentParam = EditorComponentManifest['params'][number];
+
+export interface Component {
+  id: string;
+  name: string;
+  path: string;
+  params: ComponentParam[];
+}
diff --git a/src/lib/client/ecs/ecs-handler.ts b/src/lib/client/ecs/ecs-handler.ts
new file mode 100644
index 0000000..2bc7cf2
--- /dev/null
+++ b/src/lib/client/ecs/ecs-handler.ts
@@ -0,0 +1,55 @@
+import {
+  componentsTransformer,
+  scenesTransformer,
+  systemsTransformer,
+} from '$lib/client/ecs/transformers';
+import type { Project } from '$lib/client/project';
+
+import { ComponentManager } from './component/component-manager';
+import { SceneManager } from './scene/scene-manager';
+import { SystemManager } from './system/system-manager';
+
+export class ECSHandler {
+  private readonly _project: Project;
+
+  private _sceneManager: SceneManager | undefined;
+  private _componentManager: ComponentManager | undefined;
+  private _systemManager: SystemManager | undefined;
+
+  constructor(project: Project) {
+    this._project = project;
+  }
+
+  async init() {
+    /**
+     * @todo
+     * This init is only made for the current version of the editor
+     * When scenes will be implemented, this init must be changed accordingly
+     */
+
+    const components = await this._project.actions.package.getComponents();
+    const systems = await this._project.actions.package.getSystems();
+    // Cannot use save handler as it needs to use ecs handler to subscribe to ecs changes
+    const save = await this._project.actions.save.get();
+
+    this._componentManager = new ComponentManager(componentsTransformer(components));
+    this._systemManager = new SystemManager(systemsTransformer(systems));
+    // Scene Manager needs others managers to be initialized
+    this._sceneManager = new SceneManager(this, scenesTransformer(save), 'default');
+  }
+
+  get scenes(): SceneManager {
+    if (!this._sceneManager) throw new Error('ECS handler not initialized');
+    return this._sceneManager;
+  }
+
+  get components(): ComponentManager {
+    if (!this._componentManager) throw new Error('ECS handler not initialized');
+    return this._componentManager;
+  }
+
+  get systems(): SystemManager {
+    if (!this._systemManager) throw new Error('ECS handler not initialized');
+    return this._systemManager;
+  }
+}
diff --git a/src/lib/client/ecs/index.ts b/src/lib/client/ecs/index.ts
new file mode 100644
index 0000000..100673c
--- /dev/null
+++ b/src/lib/client/ecs/index.ts
@@ -0,0 +1,26 @@
+export { ECSHandler } from './ecs-handler';
+
+export { ComponentHandle } from './component/component-handle';
+export { ComponentManager } from './component/component-manager';
+export type { Component, ComponentParam } from './component/component.type';
+
+export { SystemManager } from './system/system-manager';
+export { SystemHandle } from './system/system-handle';
+export type { System } from './system/system.type';
+
+export { SceneHandle } from './scene/scene-handle';
+export { SceneManager } from './scene/scene-manager';
+export type { Scene } from './scene/scene.type';
+
+export { SceneSystemManager } from './scene/system/system-manager';
+export { SceneSystemHandle } from './scene/system/system-handle';
+
+export { SceneEntityHandle } from './scene/entity/entity-handle';
+export { SceneEntityManager } from './scene/entity/entity-manager';
+export type { Entity } from './scene/entity/entity.type';
+
+export { EntityComponentHandle } from './scene/entity/component/component-handle';
+export { EntityComponentManager } from './scene/entity/component/component-manager';
+
+export { ComponentParamHandle } from './scene/entity/component/component-param-handle';
+export { ComponentParamManager } from './scene/entity/component/component-param-manager';
diff --git a/src/lib/client/ecs/scene/entity/component/component-handle.ts b/src/lib/client/ecs/scene/entity/component/component-handle.ts
new file mode 100644
index 0000000..c27bf7c
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/component/component-handle.ts
@@ -0,0 +1,35 @@
+import { type Writable } from 'svelte/store';
+
+import type { Component } from '../../../component/component.type';
+import type { EntityComponentManager } from './component-manager';
+import { ComponentParamManager } from './component-param-manager';
+
+export class EntityComponentHandle {
+  public readonly manager: EntityComponentManager;
+  public readonly id: string;
+  private readonly _store: Writable<Component>;
+  private readonly _params: ComponentParamManager;
+
+  constructor(
+    manager: EntityComponentManager,
+    componentId: string,
+    params: Record<string, string>,
+  ) {
+    this.manager = manager;
+    this._store = manager.entity.manager.scene.manager.ecs.components.get(componentId).store;
+    this.id = componentId;
+    this._params = new ComponentParamManager(this, params);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  get params(): ComponentParamManager {
+    return this._params;
+  }
+
+  delete() {
+    this.manager.delete(this.id);
+  }
+}
diff --git a/src/lib/client/ecs/scene/entity/component/component-manager.ts b/src/lib/client/ecs/scene/entity/component/component-manager.ts
new file mode 100644
index 0000000..efb433e
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/component/component-manager.ts
@@ -0,0 +1,60 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import type { SceneEntityHandle } from '../entity-handle';
+import { EntityComponentHandle } from './component-handle';
+
+export class EntityComponentManager {
+  public readonly entity: SceneEntityHandle;
+  private readonly _store: Writable<Record<string, Record<string, string>>>;
+
+  constructor(entity: SceneEntityHandle, components: Record<string, Record<string, string>>) {
+    this.entity = entity;
+    this._store = writable(components);
+
+    this._listen();
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  add(component: string) {
+    const components = get(this._store);
+    components[component] = {};
+    this._store.set(components);
+  }
+
+  get(id: string) {
+    const params = get(this._store)[id];
+    if (!params) throw new Error(`Component with id ${id} not found`);
+    const handle = new EntityComponentHandle(this, id, params);
+    handle.params.values.subscribe((params) => this._update(id, params));
+    return handle;
+  }
+
+  delete(id: string) {
+    const components = get(this._store);
+    const newComponents: Record<string, Record<string, string>> = {};
+    Object.entries(components).forEach(([key, params]) => {
+      if (key !== id) newComponents[key] = params;
+    });
+    this._store.set(newComponents);
+  }
+
+  private _listen() {
+    this.entity.manager.scene.manager.ecs.components.store.subscribe((components) => {
+      const entityComponents = get(this._store);
+      const newComponents: Record<string, Record<string, string>> = {};
+      Object.entries(entityComponents).forEach(([key, params]) => {
+        if (components.find((s) => s.id === key)) newComponents[key] = params;
+      });
+      this._store.set(newComponents);
+    });
+  }
+
+  private _update(id: string, params: Record<string, string>) {
+    const component = get(this._store);
+    component[id] = params;
+    this._store.set(component);
+  }
+}
diff --git a/src/lib/client/ecs/scene/entity/component/component-param-handle.ts b/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
new file mode 100644
index 0000000..fd46190
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
@@ -0,0 +1,40 @@
+import { type Writable, writable } from 'svelte/store';
+
+import type { ComponentParam } from '../../../component/component.type';
+import type { ComponentParamManager } from './component-param-manager';
+
+export class ComponentParamHandle {
+  public readonly manager: ComponentParamManager;
+  public readonly id: string;
+  private readonly _store: Writable<ComponentParam>;
+  private readonly _valueStore: Writable<any | undefined>;
+
+  constructor(manager: ComponentParamManager, param: ComponentParam, value: any | undefined) {
+    this.manager = manager;
+    this._store = writable(param);
+    this._valueStore = writable(value);
+    this.id = param.name;
+
+    this._listen();
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  get value() {
+    return this._valueStore;
+  }
+
+  delete() {
+    this.manager.delete(this.id);
+  }
+
+  private _listen() {
+    this.manager.component.store.subscribe((component) => {
+      const newParam = component.params.find((param) => param.name === this.id);
+      if (!newParam) return;
+      this._store.set(newParam);
+    });
+  }
+}
diff --git a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
new file mode 100644
index 0000000..82f08d3
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
@@ -0,0 +1,58 @@
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+
+import type { ComponentParam } from '../../../component/component.type';
+import { type EntityComponentHandle } from './component-handle';
+import { ComponentParamHandle } from './component-param-handle';
+
+export class ComponentParamManager {
+  public readonly component: EntityComponentHandle;
+  private readonly _store: Writable<ComponentParam[]>;
+  private readonly _valuesStore: Writable<Record<string, string>>;
+  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  constructor(component: EntityComponentHandle, params: Record<string, string>) {
+    this.component = component;
+    this._store = writable(get(component.store).params);
+    this._valuesStore = writable(params);
+
+    this._listen();
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  get values() {
+    return this._valuesStore;
+  }
+
+  get(id: string) {
+    const param = get(this._store).find((param) => param.name === id);
+    if (!param) throw new Error(`Param with id ${id} not found`);
+
+    const value = get(this._valuesStore)[id];
+    const handle = new ComponentParamHandle(this, param, value);
+    this._subscriptions[id] = handle.value.subscribe((param) => this._updateParam(id, param));
+
+    return handle;
+  }
+
+  delete(id: string) {
+    const params = get(this._store);
+    this._store.set(
+      params.map((param) => (param.name === id ? { ...param, value: undefined } : param)),
+    );
+  }
+
+  private _listen() {
+    this.component.store.subscribe((component) => {
+      this._store.set(component.params);
+    });
+  }
+
+  private _updateParam(id: string, value: any | undefined) {
+    const params = get(this._valuesStore);
+    params[id] = value;
+    this._valuesStore.set(params);
+  }
+}
diff --git a/src/lib/client/ecs/scene/entity/entity-handle.ts b/src/lib/client/ecs/scene/entity/entity-handle.ts
new file mode 100644
index 0000000..94133ac
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/entity-handle.ts
@@ -0,0 +1,42 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import { EntityComponentManager } from './component/component-manager';
+import type { SceneEntityManager } from './entity-manager';
+import type { Entity } from './entity.type';
+
+export class SceneEntityHandle {
+  public readonly manager: SceneEntityManager;
+  public readonly id: string;
+  private readonly _store: Writable<Entity>;
+  private readonly _components: EntityComponentManager;
+
+  constructor(manager: SceneEntityManager, entity: Entity) {
+    this.manager = manager;
+    this._store = writable(entity);
+    this.id = entity.id;
+
+    this._components = new EntityComponentManager(this, entity.components);
+
+    this._listen();
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  update(entity: Partial<Entity>) {
+    this._store.set({ ...get(this._store), ...entity });
+  }
+
+  delete() {
+    this.manager.delete(this.id);
+  }
+
+  private _listen() {
+    this._components.store.subscribe((components) => {
+      const entity = get(this._store);
+      entity.components = components;
+      this._store.set(entity);
+    });
+  }
+}
diff --git a/src/lib/client/ecs/scene/entity/entity-manager.ts b/src/lib/client/ecs/scene/entity/entity-manager.ts
new file mode 100644
index 0000000..0aa61a4
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/entity-manager.ts
@@ -0,0 +1,49 @@
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+
+import type { SceneHandle } from '../scene-handle';
+import { SceneEntityHandle } from './entity-handle';
+import type { Entity } from './entity.type';
+
+export class SceneEntityManager {
+  public readonly scene: SceneHandle;
+  private readonly _store: Writable<Entity[]>;
+  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  constructor(scene: SceneHandle, entities: Entity[]) {
+    this.scene = scene;
+    this._store = writable(entities);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  add(entity: Entity) {
+    const entities = get(this._store);
+    entities.push(entity);
+    this._store.set(entities);
+  }
+
+  get(id: string) {
+    const entity = get(this._store).find((entity) => entity.id === id);
+    if (!entity) throw new Error(`Entity with id ${id} not found`);
+
+    const handle = new SceneEntityHandle(this, entity);
+    this._subscriptions[id] = handle.store.subscribe((entity) => this._update(id, entity));
+
+    return handle;
+  }
+
+  delete(id: string) {
+    const entities = get(this._store);
+    this._store.set(entities.filter((entity) => entity.id !== id));
+  }
+
+  private _update(id: string, entity: Entity) {
+    const entities = get(this._store);
+    const index = entities.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    entities[index] = entity;
+    this._store.set(entities);
+  }
+}
diff --git a/src/lib/client/ecs/scene/entity/entity.type.ts b/src/lib/client/ecs/scene/entity/entity.type.ts
new file mode 100644
index 0000000..50e6edd
--- /dev/null
+++ b/src/lib/client/ecs/scene/entity/entity.type.ts
@@ -0,0 +1,6 @@
+export interface Entity {
+  id: string;
+  name: string;
+  treePath: string;
+  components: Record<string, Record<string, string>>;
+}
diff --git a/src/lib/client/ecs/scene/scene-handle.ts b/src/lib/client/ecs/scene/scene-handle.ts
new file mode 100644
index 0000000..5f10ef5
--- /dev/null
+++ b/src/lib/client/ecs/scene/scene-handle.ts
@@ -0,0 +1,58 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import { SceneEntityManager } from './entity/entity-manager';
+import type { SceneManager } from './scene-manager';
+import type { Scene } from './scene.type';
+import { SceneSystemManager } from './system/system-manager';
+
+export class SceneHandle {
+  public readonly manager: SceneManager;
+  public readonly id: string;
+  private readonly _store: Writable<Scene>;
+  private readonly _entities: SceneEntityManager;
+  private readonly _systems: SceneSystemManager;
+
+  constructor(manager: SceneManager, scene: Scene) {
+    this.manager = manager;
+    this._store = writable(scene);
+    this.id = scene.id;
+
+    this._entities = new SceneEntityManager(this, scene.entities);
+    this._systems = new SceneSystemManager(this, scene.systems);
+
+    this._listen();
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  update(scene: Partial<Scene>) {
+    this._store.set({ ...get(this._store), ...scene });
+  }
+
+  delete() {
+    this.manager.delete(this.id);
+  }
+
+  entities() {
+    return this._entities;
+  }
+
+  systems() {
+    return this._systems;
+  }
+
+  private _listen() {
+    this._entities.store.subscribe((entities) => {
+      const scene = get(this._store);
+      scene.entities = entities;
+      this._store.set(scene);
+    });
+    this._systems.store.subscribe((systems) => {
+      const scene = get(this._store);
+      scene.systems = systems;
+      this._store.set(scene);
+    });
+  }
+}
diff --git a/src/lib/client/ecs/scene/scene-manager.ts b/src/lib/client/ecs/scene/scene-manager.ts
new file mode 100644
index 0000000..3098860
--- /dev/null
+++ b/src/lib/client/ecs/scene/scene-manager.ts
@@ -0,0 +1,64 @@
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+
+import type { ECSHandler } from '../ecs-handler';
+import { SceneHandle } from './scene-handle';
+import type { Scene } from './scene.type';
+
+export class SceneManager {
+  public readonly ecs: ECSHandler;
+  private readonly _store: Writable<Scene[]>;
+  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+  private _activeScene: SceneHandle;
+
+  constructor(ecs: ECSHandler, scenes: Scene[], defaultSceneId: string) {
+    this.ecs = ecs;
+    this._store = writable<Scene[]>(scenes);
+
+    const defaultScene = scenes.find((scene) => scene.id === defaultSceneId);
+    if (!defaultScene) throw new Error(`Default scene with id ${defaultSceneId} not found`);
+    this._activeScene = new SceneHandle(this, defaultScene);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  get activeScene(): SceneHandle {
+    return this._activeScene;
+  }
+
+  set activeScene(handle: SceneHandle) {
+    this._activeScene = handle;
+  }
+
+  add(scene: Scene) {
+    const scenes = get(this._store);
+    scenes.push(scene);
+    this._store.set(scenes);
+  }
+
+  get(id: string) {
+    const scene = get(this._store).find((scene) => scene.id === id);
+    if (!scene) throw new Error(`Scene with id ${id} not found`);
+
+    const handle = new SceneHandle(this, scene);
+    this._subscriptions[id] = handle.store.subscribe((scene) => this._update(id, scene));
+
+    return handle;
+  }
+
+  delete(id: string) {
+    const scenes = get(this._store);
+    this._store.set(scenes.filter((scene) => scene.id !== id));
+
+    if (id in this._subscriptions) this._subscriptions[id]();
+  }
+
+  private _update(id: string, scene: Scene) {
+    const scenes = get(this._store);
+    const index = scenes.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    scenes[index] = scene;
+    this._store.set(scenes);
+  }
+}
diff --git a/src/lib/client/ecs/scene/scene.type.ts b/src/lib/client/ecs/scene/scene.type.ts
new file mode 100644
index 0000000..c7c8330
--- /dev/null
+++ b/src/lib/client/ecs/scene/scene.type.ts
@@ -0,0 +1,11 @@
+import type { Entity } from './entity/entity.type';
+
+export interface Scene {
+  id: string;
+  name: string;
+  path: string;
+  subScenes: string[];
+  assets: string[];
+  systems: string[];
+  entities: Entity[];
+}
diff --git a/src/lib/client/ecs/scene/system/system-handle.ts b/src/lib/client/ecs/scene/system/system-handle.ts
new file mode 100644
index 0000000..5c1a1ed
--- /dev/null
+++ b/src/lib/client/ecs/scene/system/system-handle.ts
@@ -0,0 +1,24 @@
+import { type Writable } from 'svelte/store';
+
+import type { System } from '../../system/system.type';
+import type { SceneSystemManager } from './system-manager';
+
+export class SceneSystemHandle {
+  public readonly manager: SceneSystemManager;
+  public readonly id: string;
+  private readonly _store: Writable<System>;
+
+  constructor(manager: SceneSystemManager, systemId: string) {
+    this.manager = manager;
+    this._store = manager.scene.manager.ecs.systems.get(systemId).store;
+    this.id = systemId;
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  delete() {
+    this.manager.delete(this.id);
+  }
+}
diff --git a/src/lib/client/ecs/scene/system/system-manager.ts b/src/lib/client/ecs/scene/system/system-manager.ts
new file mode 100644
index 0000000..1042587
--- /dev/null
+++ b/src/lib/client/ecs/scene/system/system-manager.ts
@@ -0,0 +1,45 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import type { SceneHandle } from '../scene-handle';
+import { SceneSystemHandle } from './system-handle';
+
+export class SceneSystemManager {
+  public readonly scene: SceneHandle;
+  private readonly _store: Writable<string[]>;
+
+  constructor(scene: SceneHandle, systems: string[]) {
+    this.scene = scene;
+    this._store = writable<string[]>(systems);
+
+    this._listen();
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  add(system: string) {
+    const systems = get(this._store);
+    systems.push(system);
+    this._store.set(systems);
+  }
+
+  get(id: string) {
+    const system = get(this._store).find((system) => system === id);
+    if (!system) throw new Error(`System with id ${id} not found`);
+    return new SceneSystemHandle(this, system);
+  }
+
+  delete(id: string) {
+    const systems = get(this._store);
+    this._store.set(systems.filter((system) => system !== id));
+  }
+
+  private _listen() {
+    this.scene.manager.ecs.systems.store.subscribe((systems) => {
+      const sceneSystems = get(this._store);
+      sceneSystems.filter((system) => systems.find((s) => s.id === system));
+      this._store.set(sceneSystems);
+    });
+  }
+}
diff --git a/src/lib/client/ecs/system/system-handle.ts b/src/lib/client/ecs/system/system-handle.ts
new file mode 100644
index 0000000..1fe7e03
--- /dev/null
+++ b/src/lib/client/ecs/system/system-handle.ts
@@ -0,0 +1,28 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import type { SystemManager } from './system-manager';
+import type { System } from './system.type';
+
+export class SystemHandle {
+  private _manager: SystemManager;
+  public readonly id: string;
+  private readonly _store: Writable<System>;
+
+  constructor(manager: SystemManager, system: System) {
+    this._manager = manager;
+    this._store = writable(system);
+    this.id = system.id;
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  update(system: Partial<System>) {
+    this._store.set({ ...get(this._store), ...system });
+  }
+
+  delete() {
+    this._manager.delete(this.id);
+  }
+}
diff --git a/src/lib/client/ecs/system/system-manager.ts b/src/lib/client/ecs/system/system-manager.ts
new file mode 100644
index 0000000..fc6157c
--- /dev/null
+++ b/src/lib/client/ecs/system/system-manager.ts
@@ -0,0 +1,48 @@
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+
+import { SystemHandle } from '$lib/client/ecs/system/system-handle';
+
+import type { System } from './system.type';
+
+export class SystemManager {
+  private readonly _store: Writable<System[]>;
+  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  constructor(systems: System[]) {
+    this._store = writable<System[]>(systems);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  add(system: System) {
+    const systems = get(this._store);
+    systems.push(system);
+    this._store.set(systems);
+  }
+
+  get(id: string): SystemHandle {
+    const system = get(this._store).find((system) => system.id === id);
+    if (!system) throw new Error(`System with id ${id} not found`);
+    const handle = new SystemHandle(this, system);
+
+    this._subscriptions[id] = handle.store.subscribe((system) => this._update(id, system));
+    return handle;
+  }
+
+  delete(id: string) {
+    const systems = get(this._store);
+    this._store.set(systems.filter((system) => system.id !== id));
+
+    if (id in this._subscriptions) this._subscriptions[id]();
+  }
+
+  private _update(id: string, system: System) {
+    const systems = get(this._store);
+    const index = systems.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    systems[index] = system;
+    this._store.set(systems);
+  }
+}
diff --git a/src/lib/client/ecs/system/system.type.ts b/src/lib/client/ecs/system/system.type.ts
new file mode 100644
index 0000000..1fb33ea
--- /dev/null
+++ b/src/lib/client/ecs/system/system.type.ts
@@ -0,0 +1,5 @@
+export interface System {
+  id: string;
+  name: string;
+  path: string;
+}
diff --git a/src/lib/client/ecs/transformers.ts b/src/lib/client/ecs/transformers.ts
new file mode 100644
index 0000000..1c7e857
--- /dev/null
+++ b/src/lib/client/ecs/transformers.ts
@@ -0,0 +1,36 @@
+import type { Component, Scene, System } from '$lib/client/ecs';
+import type { ComponentPackage, SystemPackage } from '$lib/server/project/package';
+
+import type { Save } from '@utils/types';
+
+export const componentsTransformer = (components: ComponentPackage[]): Component[] =>
+  components.map((component) => ({
+    id: component.manifest.name,
+    name: component.manifest.name,
+    path: component.save.path,
+    params: component.manifest.params,
+  }));
+
+export const systemsTransformer = (systems: SystemPackage[]): System[] =>
+  systems.map((system) => ({
+    id: system.manifest.name,
+    name: system.manifest.name,
+    path: system.save.path,
+  }));
+
+export const scenesTransformer = (save: Save): Scene[] => [
+  {
+    id: 'default',
+    name: 'Default',
+    path: 'unknown',
+    subScenes: [],
+    assets: [],
+    systems: save.systems.map((system) => system.name),
+    entities: save.entities.map((entity) => ({
+      id: entity.id,
+      name: entity.id,
+      treePath: entity.treePath,
+      components: entity.components,
+    })),
+  },
+];
diff --git a/src/lib/client/project/package-handler.ts b/src/lib/client/project/package-handler.ts
index d3e0a01..14f6472 100644
--- a/src/lib/client/project/package-handler.ts
+++ b/src/lib/client/project/package-handler.ts
@@ -3,7 +3,7 @@ import type { EditorComponentManifest, EditorSystemManifest } from '@nanoforge-d
 import type { Project } from '$lib/client/project';
 
 export class PackageHandler {
-  private _project: Project;
+  private readonly _project: Project;
 
   private _componentsManifests: Map<string, EditorComponentManifest> = new Map();
   private _systemsManifests: Map<string, EditorSystemManifest> = new Map();
diff --git a/src/lib/client/project/project.ts b/src/lib/client/project/project.ts
index e2ef54c..537a6bb 100644
--- a/src/lib/client/project/project.ts
+++ b/src/lib/client/project/project.ts
@@ -1,4 +1,5 @@
 import { type ActionClient, getActionClient } from '$lib/client/action';
+import { ECSHandler } from '$lib/client/ecs';
 import { EventHandler } from '$lib/client/event';
 import { InfoHandler } from '$lib/client/info';
 import { Loader } from '$lib/client/loader';
@@ -14,6 +15,7 @@ export class Project {
   private _save: SaveHandler | undefined;
   private _packageHandler: PackageHandler | undefined;
   private _eventHandler: EventHandler | undefined;
+  private _ecsHandler: ECSHandler | undefined;
 
   private _inited = false;
 
@@ -28,6 +30,7 @@ export class Project {
 
   async init(): Promise<Project> {
     await this.fs.init();
+    await this.ecs.init();
     await this.save.init();
     await this.packages.init();
     this._inited = true;
@@ -72,4 +75,9 @@ export class Project {
     if (!this._eventHandler) this._eventHandler = new EventHandler();
     return this._eventHandler;
   }
+
+  get ecs(): ECSHandler {
+    if (!this._ecsHandler) this._ecsHandler = new ECSHandler(this);
+    return this._ecsHandler;
+  }
 }
diff --git a/src/lib/server/project/package/package-handler.ts b/src/lib/server/project/package/package-handler.ts
index e86083f..b751f8c 100644
--- a/src/lib/server/project/package/package-handler.ts
+++ b/src/lib/server/project/package/package-handler.ts
@@ -2,6 +2,7 @@ import type { EditorComponentManifest, EditorSystemManifest } from '@nanoforge-d
 import { join } from 'path';
 
 import { FileSystemError } from '$lib/server/file-system/file-system-error';
+import type { DirectoryContent } from '$lib/server/file-system/project-directory';
 import { type ProjectHandler } from '$lib/server/project';
 
 import { formatFrom } from '@utils/format';
@@ -85,13 +86,52 @@ export class PackageHandler {
   }
 
   async getComponents(): Promise<ComponentPackage[]> {
-    // @todo implement it
-    return Promise.reject('Not implemented yet');
+    return this._resolvesPackages(PackageTypeEnum.COMPONENT);
   }
 
   async getSystems(): Promise<SystemPackage[]> {
-    // @todo implement it
-    return Promise.reject('Not implemented yet');
+    return this._resolvesPackages(PackageTypeEnum.SYSTEM);
+  }
+
+  private _resolvesPackages<T extends PackageTypeEnum>(
+    type: T,
+  ): (T extends PackageTypeEnum.COMPONENT ? ComponentPackage : SystemPackage)[] {
+    const basePath = type === PackageTypeEnum.COMPONENT ? './components' : './systems';
+    const dir = this.handler.fs.getDirectory(basePath);
+    const content = dir.read(true);
+    const paths = this._resolvesPackageFilesPathFromContent(content);
+    return paths.map((path) => this._resolvesPackage<T>(type, join(basePath, path)));
+  }
+
+  private _resolvesPackage<T extends PackageTypeEnum>(
+    type: T,
+    path: string,
+  ): T extends PackageTypeEnum.COMPONENT ? ComponentPackage : SystemPackage {
+    const manifest = this._getPackageManifest(type, path);
+    const res: any = {
+      manifest,
+      save: {
+        name: manifest.name,
+        path,
+      },
+    };
+    if (type === PackageTypeEnum.COMPONENT) {
+      res.save.params = manifest.params.map(({ name }: { name: string }) => name);
+    }
+    return res;
+  }
+
+  private _resolvesPackageFilesPathFromContent(
+    content: DirectoryContent,
+    path: string = '',
+  ): string[] {
+    const files = content.files.map((file) => join(path, file));
+    const directories = Object.entries(content.directories).map(([key, value]) => {
+      if (!value) return [];
+      return this._resolvesPackageFilesPathFromContent(value, join(path, key)).filter(Boolean);
+    });
+
+    return [...files, ...directories.flat()];
   }
 
   private _getNewComponentPackage(name: string, fileName: string): ComponentPackage {

From dc740eb68f01d48381c3fe66b57aab18fb250753 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sat, 30 May 2026 22:10:51 +0900
Subject: [PATCH 14/24] fix: change generated imports on ui

---
 src/lib/components/ui/input-group/input-group-input.svelte    | 2 +-
 src/lib/components/ui/input-group/input-group-textarea.svelte | 2 +-
 src/lib/components/ui/scroll-area/scroll-area.svelte          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ui/input-group/input-group-input.svelte b/src/lib/components/ui/input-group/input-group-input.svelte
index d8adc72..91b78c1 100644
--- a/src/lib/components/ui/input-group/input-group-input.svelte
+++ b/src/lib/components/ui/input-group/input-group-input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { cn } from '@utils/ui';
   import type { ComponentProps } from 'svelte';
-  import { Input } from '$lib/components/ui/input/index.js';
+  import { Input } from '$lib/components/ui/input';
 
   let {
     ref = $bindable(null),
diff --git a/src/lib/components/ui/input-group/input-group-textarea.svelte b/src/lib/components/ui/input-group/input-group-textarea.svelte
index f01d918..1882b9f 100644
--- a/src/lib/components/ui/input-group/input-group-textarea.svelte
+++ b/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cn } from '@utils/ui';
-  import { Textarea } from '$lib/components/ui/textarea/index.js';
+  import { Textarea } from '$lib/components/ui/textarea';
   import type { ComponentProps } from 'svelte';
 
   let {
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
index 8038aea..e0f459e 100644
--- a/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-  import { Scrollbar } from './index.js';
+  import Scrollbar from './scroll-area-scrollbar.svelte';
   import { cn, type WithoutChild } from '@utils/ui';
 
   let {

From d14100c8f3bfdc2d47e3ebede41f4487050d044d Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 14:10:12 +0900
Subject: [PATCH 15/24] fix: ecs handler

---
 .../client/ecs/component/component-handle.ts  |  4 ++
 .../client/ecs/component/component-manager.ts | 15 ++++-
 src/lib/client/ecs/ecs-handler.ts             |  2 +-
 src/lib/client/ecs/index.ts                   | 28 ++++-----
 .../entity/component/component-handle.ts      |  8 ++-
 .../entity/component/component-manager.ts     | 23 ++++++-
 .../component/component-param-handle.ts       |  4 +-
 .../component/component-param-manager.ts      | 15 ++++-
 .../client/ecs/scene/entity/entity-handle.ts  | 12 ++++
 .../client/ecs/scene/entity/entity-manager.ts | 32 +++++++++-
 src/lib/client/ecs/scene/scene-handle.ts      | 20 +++++--
 src/lib/client/ecs/scene/scene-manager.ts     | 60 ++++++++++++++++---
 .../client/ecs/scene/system/system-handle.ts  |  8 ++-
 .../client/ecs/scene/system/system-manager.ts |  4 ++
 src/lib/client/ecs/system/system-handle.ts    |  4 ++
 src/lib/client/ecs/system/system-manager.ts   | 16 ++++-
 16 files changed, 207 insertions(+), 48 deletions(-)

diff --git a/src/lib/client/ecs/component/component-handle.ts b/src/lib/client/ecs/component/component-handle.ts
index dbe0a73..8c7b74d 100644
--- a/src/lib/client/ecs/component/component-handle.ts
+++ b/src/lib/client/ecs/component/component-handle.ts
@@ -18,6 +18,10 @@ export class ComponentHandle {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   update(component: Partial<Component>) {
     this._store.set({ ...get(this._store), ...component });
   }
diff --git a/src/lib/client/ecs/component/component-manager.ts b/src/lib/client/ecs/component/component-manager.ts
index 9aa44e9..0c8f534 100644
--- a/src/lib/client/ecs/component/component-manager.ts
+++ b/src/lib/client/ecs/component/component-manager.ts
@@ -8,13 +8,17 @@ export class ComponentManager {
   private readonly _subscriptions: Record<string, Unsubscriber> = {};
 
   constructor(components: Component[]) {
-    this._store = writable<Component[]>(components);
+    this._store = writable(components);
   }
 
   get store() {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   add(component: Component) {
     const components = get(this._store);
     components.push(component);
@@ -26,7 +30,8 @@ export class ComponentManager {
     if (!component) throw new Error(`Component with id ${id} not found`);
     const handle = new ComponentHandle(this, component);
 
-    this._subscriptions[id] = handle.store.subscribe((component) => this._update(id, component));
+    this._subscribe(id, handle);
+
     return handle;
   }
 
@@ -37,6 +42,12 @@ export class ComponentManager {
     if (id in this._subscriptions) this._subscriptions[id]();
   }
 
+  private _subscribe(id: string, handle: ComponentHandle) {
+    setTimeout(() => {
+      this._subscriptions[id] = handle.store.subscribe((component) => this._update(id, component));
+    }, 0);
+  }
+
   private _update(id: string, component: Component) {
     const components = get(this._store);
     const index = components.findIndex((s) => s.id === id);
diff --git a/src/lib/client/ecs/ecs-handler.ts b/src/lib/client/ecs/ecs-handler.ts
index 2bc7cf2..f0bbd10 100644
--- a/src/lib/client/ecs/ecs-handler.ts
+++ b/src/lib/client/ecs/ecs-handler.ts
@@ -35,7 +35,7 @@ export class ECSHandler {
     this._componentManager = new ComponentManager(componentsTransformer(components));
     this._systemManager = new SystemManager(systemsTransformer(systems));
     // Scene Manager needs others managers to be initialized
-    this._sceneManager = new SceneManager(this, scenesTransformer(save), 'default');
+    this._sceneManager = new SceneManager(this, scenesTransformer(save), ['default'], 'default');
   }
 
   get scenes(): SceneManager {
diff --git a/src/lib/client/ecs/index.ts b/src/lib/client/ecs/index.ts
index 100673c..be1c475 100644
--- a/src/lib/client/ecs/index.ts
+++ b/src/lib/client/ecs/index.ts
@@ -1,26 +1,26 @@
 export { ECSHandler } from './ecs-handler';
 
-export { ComponentHandle } from './component/component-handle';
-export { ComponentManager } from './component/component-manager';
+export type { ComponentHandle } from './component/component-handle';
+export type { ComponentManager } from './component/component-manager';
 export type { Component, ComponentParam } from './component/component.type';
 
-export { SystemManager } from './system/system-manager';
-export { SystemHandle } from './system/system-handle';
+export type { SystemManager } from './system/system-manager';
+export type { SystemHandle } from './system/system-handle';
 export type { System } from './system/system.type';
 
-export { SceneHandle } from './scene/scene-handle';
-export { SceneManager } from './scene/scene-manager';
+export type { SceneHandle } from './scene/scene-handle';
+export type { SceneManager } from './scene/scene-manager';
 export type { Scene } from './scene/scene.type';
 
-export { SceneSystemManager } from './scene/system/system-manager';
-export { SceneSystemHandle } from './scene/system/system-handle';
+export type { SceneSystemManager } from './scene/system/system-manager';
+export type { SceneSystemHandle } from './scene/system/system-handle';
 
-export { SceneEntityHandle } from './scene/entity/entity-handle';
-export { SceneEntityManager } from './scene/entity/entity-manager';
+export type { SceneEntityHandle } from './scene/entity/entity-handle';
+export type { SceneEntityManager } from './scene/entity/entity-manager';
 export type { Entity } from './scene/entity/entity.type';
 
-export { EntityComponentHandle } from './scene/entity/component/component-handle';
-export { EntityComponentManager } from './scene/entity/component/component-manager';
+export type { EntityComponentHandle } from './scene/entity/component/component-handle';
+export type { EntityComponentManager } from './scene/entity/component/component-manager';
 
-export { ComponentParamHandle } from './scene/entity/component/component-param-handle';
-export { ComponentParamManager } from './scene/entity/component/component-param-manager';
+export type { ComponentParamHandle } from './scene/entity/component/component-param-handle';
+export type { ComponentParamManager } from './scene/entity/component/component-param-manager';
diff --git a/src/lib/client/ecs/scene/entity/component/component-handle.ts b/src/lib/client/ecs/scene/entity/component/component-handle.ts
index c27bf7c..27be6f6 100644
--- a/src/lib/client/ecs/scene/entity/component/component-handle.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-handle.ts
@@ -1,4 +1,4 @@
-import { type Writable } from 'svelte/store';
+import { type Readable, get } from 'svelte/store';
 
 import type { Component } from '../../../component/component.type';
 import type { EntityComponentManager } from './component-manager';
@@ -7,7 +7,7 @@ import { ComponentParamManager } from './component-param-manager';
 export class EntityComponentHandle {
   public readonly manager: EntityComponentManager;
   public readonly id: string;
-  private readonly _store: Writable<Component>;
+  private readonly _store: Readable<Component>;
   private readonly _params: ComponentParamManager;
 
   constructor(
@@ -25,6 +25,10 @@ export class EntityComponentHandle {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   get params(): ComponentParamManager {
     return this._params;
   }
diff --git a/src/lib/client/ecs/scene/entity/component/component-manager.ts b/src/lib/client/ecs/scene/entity/component/component-manager.ts
index efb433e..842d835 100644
--- a/src/lib/client/ecs/scene/entity/component/component-manager.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-manager.ts
@@ -1,4 +1,4 @@
-import { type Writable, get, writable } from 'svelte/store';
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
 import type { SceneEntityHandle } from '../entity-handle';
 import { EntityComponentHandle } from './component-handle';
@@ -6,6 +6,7 @@ import { EntityComponentHandle } from './component-handle';
 export class EntityComponentManager {
   public readonly entity: SceneEntityHandle;
   private readonly _store: Writable<Record<string, Record<string, string>>>;
+  private readonly _subscriptions: Record<string, Unsubscriber> = {};
 
   constructor(entity: SceneEntityHandle, components: Record<string, Record<string, string>>) {
     this.entity = entity;
@@ -18,17 +19,23 @@ export class EntityComponentManager {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   add(component: string) {
     const components = get(this._store);
     components[component] = {};
     this._store.set(components);
   }
 
-  get(id: string) {
+  get(id: string): EntityComponentHandle {
     const params = get(this._store)[id];
     if (!params) throw new Error(`Component with id ${id} not found`);
     const handle = new EntityComponentHandle(this, id, params);
-    handle.params.values.subscribe((params) => this._update(id, params));
+
+    this._subscribe(id, handle);
+
     return handle;
   }
 
@@ -39,6 +46,8 @@ export class EntityComponentManager {
       if (key !== id) newComponents[key] = params;
     });
     this._store.set(newComponents);
+
+    if (id in this._subscriptions) this._subscriptions[id]();
   }
 
   private _listen() {
@@ -52,6 +61,14 @@ export class EntityComponentManager {
     });
   }
 
+  private _subscribe(id: string, handle: EntityComponentHandle) {
+    setTimeout(() => {
+      this._subscriptions[id] = handle.params.values.subscribe((params) =>
+        this._update(id, params),
+      );
+    }, 0);
+  }
+
   private _update(id: string, params: Record<string, string>) {
     const component = get(this._store);
     component[id] = params;
diff --git a/src/lib/client/ecs/scene/entity/component/component-param-handle.ts b/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
index fd46190..8c91042 100644
--- a/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
@@ -1,4 +1,4 @@
-import { type Writable, writable } from 'svelte/store';
+import { type Readable, type Writable, writable } from 'svelte/store';
 
 import type { ComponentParam } from '../../../component/component.type';
 import type { ComponentParamManager } from './component-param-manager';
@@ -18,7 +18,7 @@ export class ComponentParamHandle {
     this._listen();
   }
 
-  get store() {
+  get store(): Readable<ComponentParam> {
     return this._store;
   }
 
diff --git a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
index 82f08d3..ff463dc 100644
--- a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
@@ -26,13 +26,14 @@ export class ComponentParamManager {
     return this._valuesStore;
   }
 
-  get(id: string) {
+  get(id: string): ComponentParamHandle {
     const param = get(this._store).find((param) => param.name === id);
     if (!param) throw new Error(`Param with id ${id} not found`);
 
     const value = get(this._valuesStore)[id];
     const handle = new ComponentParamHandle(this, param, value);
-    this._subscriptions[id] = handle.value.subscribe((param) => this._updateParam(id, param));
+
+    this._subscribe(id, handle);
 
     return handle;
   }
@@ -42,6 +43,8 @@ export class ComponentParamManager {
     this._store.set(
       params.map((param) => (param.name === id ? { ...param, value: undefined } : param)),
     );
+
+    if (id in this._subscriptions) this._subscriptions[id]();
   }
 
   private _listen() {
@@ -50,7 +53,13 @@ export class ComponentParamManager {
     });
   }
 
-  private _updateParam(id: string, value: any | undefined) {
+  private _subscribe(id: string, handle: ComponentParamHandle) {
+    setTimeout(() => {
+      this._subscriptions[id] = handle.store.subscribe((param) => this._update(id, param));
+    }, 0);
+  }
+
+  private _update(id: string, value: any | undefined) {
     const params = get(this._valuesStore);
     params[id] = value;
     this._valuesStore.set(params);
diff --git a/src/lib/client/ecs/scene/entity/entity-handle.ts b/src/lib/client/ecs/scene/entity/entity-handle.ts
index 94133ac..21a33bf 100644
--- a/src/lib/client/ecs/scene/entity/entity-handle.ts
+++ b/src/lib/client/ecs/scene/entity/entity-handle.ts
@@ -24,6 +24,14 @@ export class SceneEntityHandle {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
+  get components() {
+    return this._components;
+  }
+
   update(entity: Partial<Entity>) {
     this._store.set({ ...get(this._store), ...entity });
   }
@@ -32,6 +40,10 @@ export class SceneEntityHandle {
     this.manager.delete(this.id);
   }
 
+  setSelected() {
+    this.manager.selected = this;
+  }
+
   private _listen() {
     this._components.store.subscribe((components) => {
       const entity = get(this._store);
diff --git a/src/lib/client/ecs/scene/entity/entity-manager.ts b/src/lib/client/ecs/scene/entity/entity-manager.ts
index 0aa61a4..ab22545 100644
--- a/src/lib/client/ecs/scene/entity/entity-manager.ts
+++ b/src/lib/client/ecs/scene/entity/entity-manager.ts
@@ -4,6 +4,8 @@ import type { SceneHandle } from '../scene-handle';
 import { SceneEntityHandle } from './entity-handle';
 import type { Entity } from './entity.type';
 
+const selectedEntity = writable<SceneEntityHandle | undefined>(undefined);
+
 export class SceneEntityManager {
   public readonly scene: SceneHandle;
   private readonly _store: Writable<Entity[]>;
@@ -18,18 +20,34 @@ export class SceneEntityManager {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
+  get selected(): SceneEntityHandle | undefined {
+    return get(selectedEntity);
+  }
+
+  get selectedStore(): Writable<SceneEntityHandle | undefined> {
+    return selectedEntity;
+  }
+
+  set selected(entity: SceneEntityHandle | undefined) {
+    selectedEntity.set(entity);
+  }
+
   add(entity: Entity) {
     const entities = get(this._store);
     entities.push(entity);
     this._store.set(entities);
   }
 
-  get(id: string) {
+  get(id: string): SceneEntityHandle {
     const entity = get(this._store).find((entity) => entity.id === id);
     if (!entity) throw new Error(`Entity with id ${id} not found`);
-
     const handle = new SceneEntityHandle(this, entity);
-    this._subscriptions[id] = handle.store.subscribe((entity) => this._update(id, entity));
+
+    this._subscribe(id, handle);
 
     return handle;
   }
@@ -37,6 +55,14 @@ export class SceneEntityManager {
   delete(id: string) {
     const entities = get(this._store);
     this._store.set(entities.filter((entity) => entity.id !== id));
+
+    if (id in this._subscriptions) this._subscriptions[id]();
+  }
+
+  private _subscribe(id: string, handle: SceneEntityHandle) {
+    setTimeout(() => {
+      this._subscriptions[id] = handle.store.subscribe((entity) => this._update(id, entity));
+    }, 0);
   }
 
   private _update(id: string, entity: Entity) {
diff --git a/src/lib/client/ecs/scene/scene-handle.ts b/src/lib/client/ecs/scene/scene-handle.ts
index 5f10ef5..baeb4a5 100644
--- a/src/lib/client/ecs/scene/scene-handle.ts
+++ b/src/lib/client/ecs/scene/scene-handle.ts
@@ -27,6 +27,18 @@ export class SceneHandle {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
+  get entities() {
+    return this._entities;
+  }
+
+  get systems() {
+    return this._systems;
+  }
+
   update(scene: Partial<Scene>) {
     this._store.set({ ...get(this._store), ...scene });
   }
@@ -35,12 +47,12 @@ export class SceneHandle {
     this.manager.delete(this.id);
   }
 
-  entities() {
-    return this._entities;
+  setActive() {
+    this.manager.active = this;
   }
 
-  systems() {
-    return this._systems;
+  setDefault() {
+    this.manager.default = this.id;
   }
 
   private _listen() {
diff --git a/src/lib/client/ecs/scene/scene-manager.ts b/src/lib/client/ecs/scene/scene-manager.ts
index 3098860..f70c482 100644
--- a/src/lib/client/ecs/scene/scene-manager.ts
+++ b/src/lib/client/ecs/scene/scene-manager.ts
@@ -7,28 +7,64 @@ import type { Scene } from './scene.type';
 export class SceneManager {
   public readonly ecs: ECSHandler;
   private readonly _store: Writable<Scene[]>;
+  private readonly _rootScenes: Writable<string[]>;
   private readonly _subscriptions: Record<string, Unsubscriber> = {};
-  private _activeScene: SceneHandle;
+  private readonly _activeScene: Writable<SceneHandle>;
+  private readonly _defaultScene: Writable<string>;
 
-  constructor(ecs: ECSHandler, scenes: Scene[], defaultSceneId: string) {
+  constructor(ecs: ECSHandler, scenes: Scene[], rootScenes: string[], defaultSceneId: string) {
     this.ecs = ecs;
     this._store = writable<Scene[]>(scenes);
 
     const defaultScene = scenes.find((scene) => scene.id === defaultSceneId);
     if (!defaultScene) throw new Error(`Default scene with id ${defaultSceneId} not found`);
-    this._activeScene = new SceneHandle(this, defaultScene);
+    this._activeScene = writable(new SceneHandle(this, defaultScene));
+    this._defaultScene = writable(defaultSceneId);
+    this._rootScenes = writable(rootScenes);
   }
 
   get store() {
     return this._store;
   }
 
-  get activeScene(): SceneHandle {
+  get data() {
+    return get(this._store);
+  }
+
+  get active(): SceneHandle {
+    return get(this._activeScene);
+  }
+
+  get activeStore(): Writable<SceneHandle> {
     return this._activeScene;
   }
 
-  set activeScene(handle: SceneHandle) {
-    this._activeScene = handle;
+  set active(handle: SceneHandle) {
+    this._activeScene.set(handle);
+  }
+
+  get default(): string {
+    return get(this._defaultScene);
+  }
+
+  get defaultStore(): Writable<string> {
+    return this._defaultScene;
+  }
+
+  set default(handle: string) {
+    this._defaultScene.set(handle);
+  }
+
+  get rootScenes(): string[] {
+    return get(this._rootScenes);
+  }
+
+  get rootScenesStore(): Writable<string[]> {
+    return this._rootScenes;
+  }
+
+  set rootScenes(scenes: string[]) {
+    this._rootScenes.set(scenes);
   }
 
   add(scene: Scene) {
@@ -37,12 +73,12 @@ export class SceneManager {
     this._store.set(scenes);
   }
 
-  get(id: string) {
+  get(id: string): SceneHandle {
     const scene = get(this._store).find((scene) => scene.id === id);
     if (!scene) throw new Error(`Scene with id ${id} not found`);
-
     const handle = new SceneHandle(this, scene);
-    this._subscriptions[id] = handle.store.subscribe((scene) => this._update(id, scene));
+
+    this._subscribe(id, handle);
 
     return handle;
   }
@@ -54,6 +90,12 @@ export class SceneManager {
     if (id in this._subscriptions) this._subscriptions[id]();
   }
 
+  private _subscribe(id: string, handle: SceneHandle) {
+    setTimeout(() => {
+      this._subscriptions[id] = handle.store.subscribe((scene) => this._update(id, scene));
+    }, 0);
+  }
+
   private _update(id: string, scene: Scene) {
     const scenes = get(this._store);
     const index = scenes.findIndex((s) => s.id === id);
diff --git a/src/lib/client/ecs/scene/system/system-handle.ts b/src/lib/client/ecs/scene/system/system-handle.ts
index 5c1a1ed..9d5a2ab 100644
--- a/src/lib/client/ecs/scene/system/system-handle.ts
+++ b/src/lib/client/ecs/scene/system/system-handle.ts
@@ -1,4 +1,4 @@
-import { type Writable } from 'svelte/store';
+import { type Readable } from 'svelte/store';
 
 import type { System } from '../../system/system.type';
 import type { SceneSystemManager } from './system-manager';
@@ -6,7 +6,7 @@ import type { SceneSystemManager } from './system-manager';
 export class SceneSystemHandle {
   public readonly manager: SceneSystemManager;
   public readonly id: string;
-  private readonly _store: Writable<System>;
+  private readonly _store: Readable<System>;
 
   constructor(manager: SceneSystemManager, systemId: string) {
     this.manager = manager;
@@ -18,6 +18,10 @@ export class SceneSystemHandle {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   delete() {
     this.manager.delete(this.id);
   }
diff --git a/src/lib/client/ecs/scene/system/system-manager.ts b/src/lib/client/ecs/scene/system/system-manager.ts
index 1042587..da9b6b7 100644
--- a/src/lib/client/ecs/scene/system/system-manager.ts
+++ b/src/lib/client/ecs/scene/system/system-manager.ts
@@ -18,6 +18,10 @@ export class SceneSystemManager {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   add(system: string) {
     const systems = get(this._store);
     systems.push(system);
diff --git a/src/lib/client/ecs/system/system-handle.ts b/src/lib/client/ecs/system/system-handle.ts
index 1fe7e03..677c2e0 100644
--- a/src/lib/client/ecs/system/system-handle.ts
+++ b/src/lib/client/ecs/system/system-handle.ts
@@ -18,6 +18,10 @@ export class SystemHandle {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   update(system: Partial<System>) {
     this._store.set({ ...get(this._store), ...system });
   }
diff --git a/src/lib/client/ecs/system/system-manager.ts b/src/lib/client/ecs/system/system-manager.ts
index fc6157c..a827980 100644
--- a/src/lib/client/ecs/system/system-manager.ts
+++ b/src/lib/client/ecs/system/system-manager.ts
@@ -1,7 +1,6 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
-import { SystemHandle } from '$lib/client/ecs/system/system-handle';
-
+import { SystemHandle } from './system-handle';
 import type { System } from './system.type';
 
 export class SystemManager {
@@ -16,6 +15,10 @@ export class SystemManager {
     return this._store;
   }
 
+  get data() {
+    return get(this._store);
+  }
+
   add(system: System) {
     const systems = get(this._store);
     systems.push(system);
@@ -27,7 +30,8 @@ export class SystemManager {
     if (!system) throw new Error(`System with id ${id} not found`);
     const handle = new SystemHandle(this, system);
 
-    this._subscriptions[id] = handle.store.subscribe((system) => this._update(id, system));
+    this._subscribe(id, handle);
+
     return handle;
   }
 
@@ -38,6 +42,12 @@ export class SystemManager {
     if (id in this._subscriptions) this._subscriptions[id]();
   }
 
+  private _subscribe(id: string, handle: SystemHandle) {
+    setTimeout(() => {
+      this._subscriptions[id] = handle.store.subscribe((system) => this._update(id, system));
+    }, 0);
+  }
+
   private _update(id: string, system: System) {
     const systems = get(this._store);
     const index = systems.findIndex((s) => s.id === id);

From b9c4e8727354464a5c5ecf4675ec8cd635cd16bf Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 14:12:40 +0900
Subject: [PATCH 16/24] chore: add base ecs tree

---
 .../components/Widget/ECSTree/ECSTree.svelte  |  30 --
 .../Widget/ECSTree/EntityItem.svelte          |  22 --
 .../EntityInspectorWidget.svelte              |   5 +-
 .../ecs-tree/components/component.items.ts    |   9 +
 .../ecs-tree/components/components-tab.svelte |  12 +
 src/lib/components/Widget/ecs-tree/const.ts   |   1 +
 .../ecs-tree/dialogs/dialog-name-path.svelte  |  43 +++
 .../ecs-tree/dialogs/dialog-name.svelte       |  52 +++
 .../ecs-tree/dialogs/dialog-select.svelte     |  64 ++++
 src/lib/components/Widget/ecs-tree/index.ts   |   3 +
 .../packages/dialog-create-package.svelte     |  13 +
 .../packages/dialog-import-package.svelte     |  19 ++
 .../ecs-tree/packages/package-row.svelte      | 116 +++++++
 .../ecs-tree/packages/package-tab.svelte      | 131 ++++++++
 .../ecs-tree/scenes/dialog-edit-scene.svelte  |  19 ++
 .../ecs-tree/scenes/dialog-new-scene.svelte   |  12 +
 .../entities/dialog-delete-entity.svelte      |  15 +
 .../scenes/entities/dialog-edit-entity.svelte |  22 ++
 .../scenes/entities/dialog-new-entity.svelte  |  15 +
 .../scenes/entities/entity-tree-node.svelte   | 144 ++++++++
 .../scenes/entities/entity-tree.svelte        | 317 ++++++++++++++++++
 .../scenes/entities/folder-tree-node.svelte   | 186 ++++++++++
 .../ecs-tree/scenes/scene-detail.svelte       |  49 +++
 .../Widget/ecs-tree/scenes/scene-list.svelte  | 261 ++++++++++++++
 .../Widget/ecs-tree/scenes/scene-row.svelte   | 140 ++++++++
 .../Widget/ecs-tree/scenes/scenes-tab.svelte  |  25 ++
 .../systems/dialog-add-scene-system.svelte    |  20 ++
 .../scenes/systems/scene-systems-list.svelte  |  89 +++++
 .../store.ts}                                 |   0
 .../Widget/ecs-tree/systems/system.items.ts   |   9 +
 .../ecs-tree/systems/systems-tab.svelte       |  12 +
 src/lib/components/Widget/ecs-tree/types.ts   |  22 ++
 src/lib/components/Widget/ecs-tree/utils.ts   |  55 +++
 .../components/Widget/ecs-tree/widget.svelte  |  34 ++
 src/lib/components/Widget/widgets.ts          |   2 +-
 src/lib/components/dialogs/base-dialog.svelte |  65 ++++
 .../dialogs/delete-confirm-dialog.svelte      |  71 ++++
 src/lib/components/dialogs/index.ts           |   5 +
 .../components/dialogs/input-dialog.svelte    |  25 ++
 .../components/ui/tabs/tabs-trigger.svelte    |   2 +-
 src/lib/utils/string.ts                       |   2 +
 41 files changed, 2080 insertions(+), 58 deletions(-)
 delete mode 100644 src/lib/components/Widget/ECSTree/ECSTree.svelte
 delete mode 100644 src/lib/components/Widget/ECSTree/EntityItem.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/components/component.items.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/components/components-tab.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/const.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/index.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/packages/package-row.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/dialog-edit-scene.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/dialog-new-scene.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/entities/dialog-delete-entity.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/entities/dialog-edit-entity.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/entities/dialog-new-entity.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
 rename src/lib/components/Widget/{ECSTree/entity-selected.store.svelte.ts => ecs-tree/store.ts} (100%)
 create mode 100644 src/lib/components/Widget/ecs-tree/systems/system.items.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/systems/systems-tab.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/types.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/utils.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/widget.svelte
 create mode 100644 src/lib/components/dialogs/base-dialog.svelte
 create mode 100644 src/lib/components/dialogs/delete-confirm-dialog.svelte
 create mode 100644 src/lib/components/dialogs/index.ts
 create mode 100644 src/lib/components/dialogs/input-dialog.svelte

diff --git a/src/lib/components/Widget/ECSTree/ECSTree.svelte b/src/lib/components/Widget/ECSTree/ECSTree.svelte
deleted file mode 100644
index 6fa5e02..0000000
--- a/src/lib/components/Widget/ECSTree/ECSTree.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import EntityItem from './EntityItem.svelte';
-
-  import { useProject } from '$lib/client/project';
-
-  const { save } = useProject();
-</script>
-
-<div class="h-full w-full flex flex-col bg-neutral-800">
-  <div class="flex justify-between p-2">
-    <input
-      class="h-7 rounded-md bg-black p-2 text-sm outline-1 outline-neutral-700"
-      placeholder="Search entity"
-    />
-    <button
-      class="w-fit flex cursor-pointer items-center gap-1 rounded-md bg-neutral-700 px-2 py-1 text-neutral-200 text-sm text-sm hover:bg-neutral-600"
-    >
-      <span class="i-ic-baseline-add"></span>
-      Add Entity
-    </button>
-  </div>
-  <span class="text-xl px-3 py-1"> Entities </span>
-  <div class="h-full flex flex-col bg-neutral-900 p-1">
-    {#if save.save}
-      {#each save.save.entities as entity (entity.id)}
-        <EntityItem item={entity} />
-      {/each}
-    {/if}
-  </div>
-</div>
diff --git a/src/lib/components/Widget/ECSTree/EntityItem.svelte b/src/lib/components/Widget/ECSTree/EntityItem.svelte
deleted file mode 100644
index d34400f..0000000
--- a/src/lib/components/Widget/ECSTree/EntityItem.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-  import { selectedEntityId } from './entity-selected.store.svelte';
-  import type { SaveEntity } from '@utils/types';
-
-  interface Props {
-    item: SaveEntity;
-  }
-  let { item }: Props = $props();
-</script>
-
-<button
-  class="{$selectedEntityId
-    ? 'bg-neutral-700'
-    : 'hover:bg-neutral-800'} cursor-pointer py-3 flex items-center h-5 text-neutral-200 gap-1"
-  style="padding-left: 8px"
-  onclick={() => {
-    $selectedEntityId = item.id;
-  }}
->
-  <span class="i-solar-accessibility-linear ml-3"></span>
-  <span>{item.id}</span>
-</button>
diff --git a/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte b/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte
index c80d581..bcf8287 100644
--- a/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte
+++ b/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-  import {
-    selectedEntityId,
-    selectedEntity,
-  } from '$lib/components/Widget/ECSTree/entity-selected.store.svelte';
+  import { selectedEntityId, selectedEntity } from '$lib/components/Widget/ecs-tree/store';
   import ComponentSelector from '$lib/components/Widget/EntityInspector/ComponentSelector.svelte';
   import { CoreEvents } from '$lib/client/event';
   import { useProject } from '$lib/client/project';
diff --git a/src/lib/components/Widget/ecs-tree/components/component.items.ts b/src/lib/components/Widget/ecs-tree/components/component.items.ts
new file mode 100644
index 0000000..0fd5cd7
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/components/component.items.ts
@@ -0,0 +1,9 @@
+import type { PackageItems } from '../types';
+
+export const COMPONENT_ITEMS: PackageItems = {
+  icon: {
+    name: 'i-ic-baseline-token',
+    color: 'text-blue-400',
+  },
+  addTooltip: 'Add to selected entity',
+};
diff --git a/src/lib/components/Widget/ecs-tree/components/components-tab.svelte b/src/lib/components/Widget/ecs-tree/components/components-tab.svelte
new file mode 100644
index 0000000..de72152
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/components/components-tab.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import PackageTab from '../packages/package-tab.svelte';
+  import type { ComponentManager } from '$lib/client/ecs';
+
+  interface Props {
+    manager: ComponentManager;
+  }
+
+  const { manager }: Props = $props();
+</script>
+
+<PackageTab type="component" {manager} />
diff --git a/src/lib/components/Widget/ecs-tree/const.ts b/src/lib/components/Widget/ecs-tree/const.ts
new file mode 100644
index 0000000..fa90766
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/const.ts
@@ -0,0 +1 @@
+export const ENTITY_DRAG_KEY = 'ecs-entity-drag';
diff --git a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte
new file mode 100644
index 0000000..d21788e
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Input } from '$lib/components/ui/input';
+  import { InputDialog } from '$lib/components/dialogs';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    nameText?: string;
+    pathText?: string;
+    confirmText?: string;
+    onConfirm?: (name: string, path: string) => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    nameText,
+    pathText,
+    confirmText,
+    onConfirm,
+  }: Props = $props();
+
+  let name = $state('');
+  let path = $state('');
+
+  const handleConfirm = () => {
+    const n = name.trim();
+    if (!n) throw 'Name is required';
+    onConfirm?.(n, path.trim() || `./${n}.ts`);
+  };
+
+  const reset = () => {
+    name = '';
+    path = '';
+  };
+</script>
+
+<InputDialog {title} {confirmText} bind:open onConfirm={handleConfirm} {reset}>
+  <div class="flex flex-col gap-3 py-2">
+    <Input placeholder={nameText ?? 'Name'} bind:value={name} />
+    <Input placeholder={pathText ?? 'Path (optional)'} bind:value={path} />
+  </div>
+</InputDialog>
diff --git a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
new file mode 100644
index 0000000..ca5b9a9
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Input } from '$lib/components/ui/input';
+  import { InputDialog } from '$lib/components/dialogs';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    nameText?: string;
+    nameValue?: string;
+    confirmText?: string;
+    onConfirm?: (name: string) => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    nameText,
+    nameValue = $bindable(''),
+    confirmText,
+    onConfirm,
+  }: Props = $props();
+
+  const handleEnterConfirm = (confirm: () => void) => (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      confirm();
+    }
+  };
+
+  const handleConfirm = () => {
+    const n = nameValue.trim();
+    if (!n) throw 'Name is required';
+    onConfirm?.(n);
+  };
+
+  const reset = () => {
+    nameValue = '';
+  };
+</script>
+
+<InputDialog {title} {confirmText} bind:open onConfirm={handleConfirm} {reset}>
+  {#snippet children(confirm)}
+    <div class="flex flex-col gap-3 py-2">
+      <Input
+        placeholder={nameText ?? 'Name'}
+        bind:value={nameValue}
+        onkeydown={handleEnterConfirm(confirm)}
+      />
+    </div>
+  {/snippet}
+</InputDialog>
diff --git a/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte b/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte
new file mode 100644
index 0000000..56150af
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { InputDialog } from '$lib/components/dialogs';
+  import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    text?: string;
+    value?: string;
+    options: (string | { label: string; value: string })[];
+    confirmText?: string;
+    onConfirm?: (name: string) => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    text,
+    value = $bindable(''),
+    options,
+    confirmText,
+    onConfirm,
+  }: Props = $props();
+
+  const handleConfirm = () => {
+    if (!value) throw 'Value is required';
+    onConfirm?.(getValue(value));
+  };
+
+  const reset = () => {
+    value = '';
+  };
+
+  let selectedLabel = $derived.by(() => {
+    const selected = options.find((opt) => {
+      return getValue(opt) === value;
+    });
+    if (selected) return getLabel(selected);
+    return text ?? 'Pick a system';
+  });
+
+  const getLabel = (opt: string | { label: string; value: string }) => {
+    if (typeof opt === 'string') return opt;
+    return opt.label;
+  };
+
+  const getValue = (opt: string | { label: string; value: string }) => {
+    if (typeof opt === 'string') return opt;
+    return opt.value;
+  };
+</script>
+
+<InputDialog {title} {confirmText} bind:open onConfirm={handleConfirm} {reset}>
+  <div class="py-2">
+    <Select type="single" bind:value>
+      <SelectTrigger class="w-full">{selectedLabel}</SelectTrigger>
+      <SelectContent>
+        {#each options as opt (getValue(opt))}
+          <SelectItem value={getValue(opt)}>{getLabel(opt)}</SelectItem>
+        {/each}
+      </SelectContent>
+    </Select>
+  </div>
+</InputDialog>
diff --git a/src/lib/components/Widget/ecs-tree/index.ts b/src/lib/components/Widget/ecs-tree/index.ts
new file mode 100644
index 0000000..4592399
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/index.ts
@@ -0,0 +1,3 @@
+import Widget from './widget.svelte';
+
+export { Widget, Widget as ECSTreeWidget };
diff --git a/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte b/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte
new file mode 100644
index 0000000..a1b6bed
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import DialogNamePath from '../dialogs/dialog-name-path.svelte';
+
+  interface Props {
+    name: string;
+    open: boolean;
+    onConfirm: (name: string, path: string) => void;
+  }
+
+  let { name, open = $bindable(false), onConfirm }: Props = $props();
+</script>
+
+<DialogNamePath title={`Create ${name}`} nameText={`${name} name`} bind:open {onConfirm} />
diff --git a/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte b/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte
new file mode 100644
index 0000000..fdd5b96
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import DialogNamePath from '../dialogs/dialog-name-path.svelte';
+
+  interface Props {
+    name: string;
+    open: boolean;
+    onConfirm: (name: string, path: string) => void;
+  }
+
+  let { name, open = $bindable(false), onConfirm }: Props = $props();
+</script>
+
+<DialogNamePath
+  title={`Import ${name}`}
+  nameText={`${name} name`}
+  confirmText="Import"
+  bind:open
+  {onConfirm}
+/>
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
new file mode 100644
index 0000000..cd67d00
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+  } from '$lib/components/ui/context-menu';
+  import TooltipText from '$lib/components/ui/tooltip-text/tooltip-text.svelte';
+  import { type PackageItems } from '../types';
+  import { COMPONENT_ITEMS } from '../components/component.items';
+  import { SYSTEM_ITEMS } from '../systems/system.items';
+  import { DeleteConfirmDialog } from '$lib/components/dialogs';
+  import { capitalize } from '@utils/string';
+  import type { ComponentHandle, SystemHandle } from '$lib/client/ecs';
+  import { useProject } from '$lib/client/project';
+  import { get } from 'svelte/store';
+
+  type Props =
+    | {
+        type: 'component';
+        handle: ComponentHandle;
+      }
+    | {
+        type: 'system';
+        handle: SystemHandle;
+      };
+
+  const ITEMS = { component: COMPONENT_ITEMS, system: SYSTEM_ITEMS };
+
+  const { type, handle }: Props = $props();
+  const { ecs } = useProject();
+
+  const pkg = $derived(handle.store);
+
+  let deleteOpen = $state(false);
+
+  const items: PackageItems = $derived(ITEMS[type]);
+
+  const onAdd = () => {
+    if (type === 'component') {
+      const entity = ecs.scenes.active.entities.selected;
+      if (!entity) return;
+      entity.components.add(get(pkg).id);
+    } else {
+      ecs.scenes.active.systems.add(get(pkg).id);
+    }
+  };
+
+  const onOpen = () => {
+    // @todo handle open code edito
+  };
+
+  const handleDelete = () => {
+    // @todo delete package
+    handle.delete();
+  };
+
+  const onDelete = () => {
+    deleteOpen = true;
+  };
+</script>
+
+<DeleteConfirmDialog
+  type={capitalize(type)}
+  name={$pkg.name}
+  bind:open={deleteOpen}
+  onConfirm={handleDelete}
+/>
+
+<ContextMenu>
+  <ContextMenuTrigger>
+    <div class="group border-b border-border/50 px-3 py-2 hover:bg-neutral-800 cursor-default">
+      <div class="flex justify-between items-center">
+        <div>
+          <div class="flex items-center gap-2">
+            <span class={['w-3.5 h-3.5 shrink-0', items.icon.name, items.icon.color]}></span>
+            <span class="font-medium text-foreground flex-1 truncate text-xs">{$pkg.name}</span>
+          </div>
+          <div class="mt-0.5 text-xs text-muted-foreground truncate pl-5">{$pkg.path}</div>
+        </div>
+        <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+          <TooltipText text={items.addTooltip}>
+            <Button variant="ghost" size="icon" onclick={onAdd}>
+              <span class="i-ic-baseline-add-circle text-green-400"></span>
+            </Button>
+          </TooltipText>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="text-destructive hover:text-destructive hover:bg-destructive/20"
+            onclick={onDelete}
+          >
+            <span class="i-ic-baseline-delete"></span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem onclick={onOpen}>
+      <span class="i-ic-baseline-open-in-new"></span>
+      Open code
+    </ContextMenuItem>
+    <ContextMenuItem onclick={onAdd}>
+      <span class="i-ic-baseline-add-circle text-green-400"></span>
+      {items.addTooltip}
+    </ContextMenuItem>
+    <ContextMenuSeparator />
+    <ContextMenuItem variant="destructive" onclick={onDelete}>
+      <span class="i-ic-baseline-delete"></span>
+      Delete
+    </ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
new file mode 100644
index 0000000..c74199d
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+  import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+  } from '$lib/components/ui/dropdown-menu';
+  import PackageRow from './package-row.svelte';
+  import DialogCreatePackage from './dialog-create-package.svelte';
+  import DialogImportPackage from './dialog-import-package.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupInput,
+  } from '$lib/components/ui/input-group';
+  import { ScrollArea } from '$lib/components/ui/scroll-area';
+  import { capitalize } from '@utils/string';
+  import type { ComponentManager, SystemManager } from '$lib/client/ecs';
+
+  type Props =
+    | {
+        type: 'component';
+        manager: ComponentManager;
+      }
+    | {
+        type: 'system';
+        manager: SystemManager;
+      };
+
+  const { type, manager }: Props = $props();
+
+  const packages = $derived(manager.store);
+
+  const nameCapitalized = $derived(capitalize(type));
+  const namePlural = $derived(type + 's');
+
+  let query = $state('');
+
+  const sorted = $derived(
+    $packages
+      .filter((c) => !query || c.name.toLowerCase().includes(query.toLowerCase()))
+      .sort((a, b) => a.name.localeCompare(b.name)),
+  );
+
+  let createOpen = $state(false);
+  let importOpen = $state(false);
+
+  const onCreate = (name: string, path: string) => {
+    // @todo create package
+    manager.add({
+      id: name,
+      name,
+      path,
+      params: [],
+    });
+  };
+
+  const onImport = (name: string, path: string) => {
+    // @todo import package
+    manager.add({
+      id: name,
+      name,
+      path,
+      params: [],
+    });
+  };
+</script>
+
+<DialogCreatePackage name={nameCapitalized} bind:open={createOpen} onConfirm={onCreate} />
+<DialogImportPackage name={nameCapitalized} bind:open={importOpen} onConfirm={onImport} />
+
+<div class="flex flex-col flex-1 min-h-0">
+  <div class="flex items-center gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
+    <InputGroup>
+      <InputGroupInput placeholder={`Search ${namePlural}...`} bind:value={query} />
+      <InputGroupAddon>
+        <span class="i-ic-baseline-search"></span>
+      </InputGroupAddon>
+      {#if query}
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            onclick={() => (query = '')}
+            variant="ghost"
+            class="rounded-md text-destructive hover:text-destructive hover:bg-destructive/10"
+          >
+            <span class="i-ic-round-close"></span>
+          </InputGroupButton>
+        </InputGroupAddon>
+      {/if}
+    </InputGroup>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon"
+            class="size-7 hover:bg-accent hover:text-accent-foreground"
+          >
+            <span class="i-ic-baseline-add text-base"></span>
+          </Button>
+        {/snippet}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onclick={() => (createOpen = true)}>
+          <span class="i-ic-baseline-note-add mr-2 text-sm"></span>
+          Create
+        </DropdownMenuItem>
+        <DropdownMenuItem onclick={() => (importOpen = true)}>
+          <span class="i-ic-baseline-file-upload mr-2 text-sm"></span>
+          Import
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+
+  <ScrollArea class="flex-1">
+    {#each sorted as pkg (pkg.id)}
+      {@const handle = manager.get(pkg.id)}
+      <PackageRow type={type as any} handle={handle as any} />
+    {/each}
+
+    {#if sorted.length === 0}
+      <div class="py-12 text-center text-xs text-muted-foreground">
+        {query ? 'No matches.' : `No ${namePlural} — add one with +.`}
+      </div>
+    {/if}
+  </ScrollArea>
+</div>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/dialog-edit-scene.svelte b/src/lib/components/Widget/ecs-tree/scenes/dialog-edit-scene.svelte
new file mode 100644
index 0000000..749cac0
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/dialog-edit-scene.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import DialogName from '../dialogs/dialog-name.svelte';
+
+  interface Props {
+    open: boolean;
+    defaultValue: string;
+    onConfirm: (name: string) => void;
+  }
+
+  let { open = $bindable(false), defaultValue, onConfirm }: Props = $props();
+</script>
+
+<DialogName
+  title="Edit Scene"
+  nameText="Scene name"
+  nameValue={defaultValue}
+  bind:open
+  {onConfirm}
+/>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/dialog-new-scene.svelte b/src/lib/components/Widget/ecs-tree/scenes/dialog-new-scene.svelte
new file mode 100644
index 0000000..74f3247
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/dialog-new-scene.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import DialogName from '../dialogs/dialog-name.svelte';
+
+  interface Props {
+    open: boolean;
+    onConfirm: (name: string) => void;
+  }
+
+  let { open = $bindable(false), onConfirm }: Props = $props();
+</script>
+
+<DialogName title="New Scene" nameText="Scene name" bind:open {onConfirm} />
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-delete-entity.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-delete-entity.svelte
new file mode 100644
index 0000000..19a9acc
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-delete-entity.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { DeleteConfirmDialog } from '$lib/components/dialogs';
+  import { capitalize } from '@utils/string';
+
+  interface Props {
+    kind: 'entity' | 'folder';
+    open: boolean;
+    name: string;
+    onConfirm: () => void;
+  }
+
+  let { kind, open = $bindable(false), name, onConfirm }: Props = $props();
+</script>
+
+<DeleteConfirmDialog type={capitalize(kind)} {name} bind:open {onConfirm} />
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-edit-entity.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-edit-entity.svelte
new file mode 100644
index 0000000..86479ad
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-edit-entity.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import DialogName from '../../dialogs/dialog-name.svelte';
+
+  interface Props {
+    kind: 'entity' | 'folder';
+    open: boolean;
+    defaultValue: string;
+    onConfirm: (name: string) => void;
+  }
+
+  let { kind, open = $bindable(false), defaultValue, onConfirm }: Props = $props();
+
+  const name = $derived(kind === 'entity' ? 'Entity' : 'Folder');
+</script>
+
+<DialogName
+  title={`Edit ${name}`}
+  nameText={`${name} name`}
+  nameValue={defaultValue}
+  bind:open
+  {onConfirm}
+/>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-new-entity.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-new-entity.svelte
new file mode 100644
index 0000000..07faf0c
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/dialog-new-entity.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import DialogName from '../../dialogs/dialog-name.svelte';
+
+  interface Props {
+    kind: 'entity' | 'folder';
+    open: boolean;
+    onConfirm: (name: string) => void;
+  }
+
+  let { kind, open = $bindable(false), onConfirm }: Props = $props();
+
+  const name = $derived(kind === 'entity' ? 'Entity' : 'Folder');
+</script>
+
+<DialogName title={`New ${name}`} nameText={`${name} name`} bind:open {onConfirm} />
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
new file mode 100644
index 0000000..064284c
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import type { SceneEntityHandle } from '$lib/client/ecs';
+  import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+  } from '$lib/components/ui/context-menu';
+
+  import { ENTITY_DRAG_KEY } from '../../const';
+  import { resolveParentPath } from '../../utils';
+  import type { EntityDragContext } from '../../types';
+  import DialogEditEntity from './dialog-edit-entity.svelte';
+  import DialogDeleteEntity from './dialog-delete-entity.svelte';
+
+  interface Props {
+    handle: SceneEntityHandle;
+    depth?: number;
+    readonly?: boolean;
+    onNew?: (kind: 'entity' | 'folder', path: string) => void;
+  }
+
+  const { handle, depth = 0, readonly = false, onNew = () => {} }: Props = $props();
+
+  const drag = getContext<EntityDragContext>(ENTITY_DRAG_KEY);
+
+  const entity = $derived(handle.store);
+  const selectedEntity = $derived(handle.manager.selectedStore);
+
+  const pl = $derived(8 + depth * 12);
+
+  let editOpen = $state(false);
+  let deleteOpen = $state(false);
+
+  let hovered = $state(false);
+
+  const isDragging = $derived(drag.dragging?.type === 'entity' && drag.dragging.id === $entity.id);
+
+  const onSelect = () => {
+    handle.setSelected();
+  };
+
+  const handleEdit = (name: string) => {
+    handle.update({ name });
+  };
+
+  const handleDelete = () => {
+    handle.delete();
+  };
+
+  const onEdit = () => {
+    editOpen = true;
+  };
+
+  const onDelete = () => {
+    deleteOpen = true;
+  };
+</script>
+
+<DialogEditEntity
+  kind="entity"
+  bind:open={editOpen}
+  defaultValue={$entity.name}
+  onConfirm={handleEdit}
+/>
+<DialogDeleteEntity
+  kind="entity"
+  bind:open={deleteOpen}
+  name={$entity.name}
+  onConfirm={handleDelete}
+/>
+<ContextMenu>
+  <ContextMenuTrigger>
+    <button
+      draggable={!readonly}
+      class={`flex w-full items-center gap-1.5 py-0.5 pr-2 transition-colors
+          ${
+            $selectedEntity?.id === $entity.id
+              ? 'bg-primary/20 text-purple-300'
+              : 'text-neutral-300 hover:bg-neutral-800'
+          }
+          ${hovered && !isDragging ? 'ring-2 ring-inset ring-blue-primary' : ''}
+          ${isDragging ? 'opacity-40' : ''}`}
+      style="padding-left:{pl}px"
+      onclick={onSelect}
+      ondragstart={(e) => {
+        e.stopPropagation();
+        e.dataTransfer!.effectAllowed = 'move';
+        drag.startDrag({ type: 'entity', id: $entity.id });
+      }}
+      ondragend={() => {
+        drag.endDrag();
+        hovered = false;
+      }}
+      ondragover={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer!.dropEffect = 'move';
+        hovered = true;
+      }}
+      ondragleave={() => (hovered = false)}
+      ondrop={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        hovered = false;
+        drag.dropOnEntity($entity.id);
+      }}
+    >
+      <span class="w-3 h-3 shrink-0"></span>
+      <span class="i-ic-baseline-category w-3.5 h-3.5 shrink-0 text-sky-400"></span>
+      <span class="flex-1 truncate text-left text-xs {readonly ? 'text-neutral-400' : ''}">
+        {$entity.name}
+      </span>
+      <span class="text-xs text-muted-foreground/50 shrink-0">
+        {Object.keys($entity.components).length}
+      </span>
+    </button>
+  </ContextMenuTrigger>
+  {#if !readonly}
+    <ContextMenuContent>
+      <ContextMenuItem onclick={() => onNew('entity', resolveParentPath($entity.treePath))}>
+        <span class="i-ic-baseline-add-circle"></span>
+        New entity
+      </ContextMenuItem>
+      <ContextMenuItem onclick={() => onNew('folder', resolveParentPath($entity.treePath))}>
+        <span class="i-ic-baseline-folder"></span>
+        New folder
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem onclick={onEdit}>
+        <span class="i-ic-baseline-edit"></span>
+        Edit
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem variant="destructive" onclick={onDelete}>
+        <span class="i-ic-baseline-delete"></span>
+        Delete
+      </ContextMenuItem>
+    </ContextMenuContent>
+  {/if}
+</ContextMenu>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
new file mode 100644
index 0000000..ead25e8
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
@@ -0,0 +1,317 @@
+<script lang="ts">
+  import { setContext, untrack } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+
+  import type { Entity, Scene, SceneEntityManager } from '$lib/client/ecs';
+  import { Button } from '$lib/components/ui/button';
+  import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+  } from '$lib/components/ui/dropdown-menu';
+
+  import { ENTITY_DRAG_KEY } from '../../const';
+  import { buildTree, folderPaths } from '../../utils';
+  import { type EntityDragContext, type EntityDragItem } from '../../types';
+  import DialogNewEntity from './dialog-new-entity.svelte';
+  import EntityTreeNode from './entity-tree-node.svelte';
+  import FolderTreeNode from './folder-tree-node.svelte';
+  import { useProject } from '$lib/client/project';
+
+  interface Props {
+    manager: SceneEntityManager;
+  }
+
+  const { manager }: Props = $props();
+
+  const { ecs } = useProject();
+
+  const entities = $derived(manager.store);
+  const scenes = $derived(ecs.scenes.store);
+
+  const resolveParentScene = (sceneId?: string): Scene | undefined => {
+    return $scenes.find((s) => s.subScenes.includes(sceneId ?? manager.scene.id));
+  };
+
+  const resolveParentEntities = (sceneId?: string): (Entity & { scene: string })[] => {
+    const parent = resolveParentScene(sceneId);
+    if (!parent) return [];
+    return [
+      ...resolveParentEntities(parent.id),
+      ...parent.entities.map((e) => ({ ...e, scene: parent.id })),
+    ];
+  };
+
+  const inherited = $derived(resolveParentEntities());
+  const ancestor = $derived(resolveParentScene());
+
+  let folders = new SvelteSet<string>();
+  let folderSceneId = $state('');
+
+  $effect.pre(() => {
+    const id = manager.scene.id;
+    if (id !== folderSceneId) {
+      untrack(() => {
+        folderSceneId = id;
+        $entities.forEach((e) => folderPaths(e.treePath).forEach((p) => folders.add(p)));
+      });
+    }
+  });
+
+  const trackFolders = (treePath: string) => {
+    folderPaths(treePath).forEach((p) => folders.add(p));
+  };
+
+  const untrackFolders = (folderPath: string) => {
+    folders.delete(folderPath);
+    for (const p of [...folders]) if (p.startsWith(folderPath + '/')) folders.delete(p);
+  };
+
+  const tree = $derived(buildTree($entities, folders));
+  const inheritedTree = $derived(buildTree(inherited));
+
+  let expandedFolders = new SvelteSet<string>();
+  let inheritedCollapsed = $state(true);
+
+  const toggleFolder = (path: string) => {
+    if (!expandedFolders.has(path)) {
+      expandedFolders.add(path);
+      return;
+    }
+    for (const p of [...expandedFolders]) if (p.startsWith(path + '/')) expandedFolders.delete(p);
+    expandedFolders.delete(path);
+  };
+
+  let dragging = $state<EntityDragItem | null>(null);
+  let rootDropHovered = $state(false);
+
+  const moveFolderTo = (oldPath: string, newPath: string) => {
+    if (oldPath === newPath || newPath.startsWith(oldPath + '/')) return;
+    $entities.forEach((e) => {
+      const handle = manager.get(e.id);
+      if (e.treePath === oldPath) return handle.update({ treePath: newPath });
+      if (e.treePath.startsWith(oldPath + '/'))
+        return handle.update({ treePath: newPath + e.treePath.slice(oldPath.length) });
+    });
+    untrackFolders(oldPath);
+    trackFolders(newPath);
+  };
+
+  const dropOnFolder = (folderPath: string) => {
+    if (!dragging) return;
+    if (dragging.type === 'entity') {
+      const e = $entities.find((e) => e.id === (dragging as { type: 'entity'; id: string }).id);
+      if (e) {
+        e.treePath = folderPath;
+        trackFolders(folderPath);
+      }
+    } else {
+      const { path } = dragging as { type: 'folder'; path: string };
+      if (path === folderPath || folderPath.startsWith(path + '/')) return;
+      const name = path.split('/').pop()!;
+      moveFolderTo(path, folderPath ? `${folderPath}/${name}` : name);
+    }
+    dragging = null;
+  };
+
+  const dropOnEntity = (entityId: string) => {
+    if (!dragging) return;
+    const target = $entities.find((e) => e.id === entityId);
+    if (!target) {
+      dragging = null;
+      return;
+    }
+    const targetPath = target.treePath;
+
+    if (dragging.type === 'entity') {
+      const { id } = dragging as { type: 'entity'; id: string };
+      if (id !== entityId) {
+        const e = $entities.find((e) => e.id === id);
+        if (e) {
+          e.treePath = targetPath;
+          if (targetPath) trackFolders(targetPath);
+        }
+      }
+    } else {
+      const { path } = dragging as { type: 'folder'; path: string };
+      const name = path.split('/').pop()!;
+      const newPath = targetPath ? `${targetPath}/${name}` : name;
+      moveFolderTo(path, newPath);
+    }
+    dragging = null;
+  };
+
+  const dropOnRoot = () => {
+    if (!dragging) return;
+    if (dragging.type === 'entity') {
+      const { id } = dragging as { type: 'entity'; id: string };
+      const e = $entities.find((e) => e.id === id);
+      if (e) e.treePath = '';
+    } else {
+      const { path } = dragging as { type: 'folder'; path: string };
+      const name = path.split('/').pop()!;
+      if (path !== name) moveFolderTo(path, name);
+    }
+    dragging = null;
+  };
+
+  setContext<EntityDragContext>(ENTITY_DRAG_KEY, {
+    get dragging() {
+      return dragging;
+    },
+    startDrag: (item) => {
+      dragging = item;
+    },
+    endDrag: () => {
+      dragging = null;
+    },
+    dropOnFolder,
+    dropOnEntity,
+    dropOnRoot,
+  });
+
+  let newEntityOpen = $state(false);
+  let newFolderOpen = $state(false);
+  let newPath = $state('');
+
+  const resetTarget = () => {
+    newPath = '';
+  };
+
+  const handleNewEntity = (name: string) => {
+    manager.add({ id: name, name, treePath: newPath, components: {} });
+    resetTarget();
+  };
+
+  const handleNewFolder = (name: string) => {
+    const fullPath = newPath ? `${newPath}/${name}` : name;
+    folders.add(fullPath);
+    resetTarget();
+  };
+
+  const onNew = (kind: 'entity' | 'folder', path: string) => {
+    return () => {
+      newPath = path;
+      if (kind === 'entity') newEntityOpen = true;
+      else newFolderOpen = true;
+    };
+  };
+</script>
+
+<DialogNewEntity kind="entity" bind:open={newEntityOpen} onConfirm={handleNewEntity} />
+<DialogNewEntity kind="folder" bind:open={newFolderOpen} onConfirm={handleNewFolder} />
+
+<div
+  class="flex items-center justify-between px-2 py-1 border-b border-border/50 text-muted-foreground"
+>
+  <span class="text-xs font-semibold tracking-wide">Entities</span>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      {#snippet child({ props })}
+        <Button variant="ghost" size="icon-xs" {...props}>
+          <span class="i-ic-baseline-add"></span>
+        </Button>
+      {/snippet}
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem onclick={onNew('entity', '')}>
+        <span class="i-ic-baseline-category"></span>
+        New entity
+      </DropdownMenuItem>
+      <DropdownMenuItem onclick={onNew('folder', '')}>
+        <span class="i-ic-baseline-folder"></span>
+        New folder
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</div>
+
+{#if ancestor && inherited.length > 0}
+  <div class="border-b border-border/30">
+    <button
+      class="flex w-full items-center gap-1.5 px-2 py-1 text-xs text-purple-400 hover:bg-neutral-800/60 transition-colors"
+      onclick={() => (inheritedCollapsed = !inheritedCollapsed)}
+    >
+      <span
+        class="w-3 h-3 shrink-0 {inheritedCollapsed
+          ? 'i-ic-baseline-keyboard-arrow-right'
+          : 'i-ic-baseline-keyboard-arrow-down'}"
+      ></span>
+      <span class="i-ic-baseline-link w-3.5 h-3.5 shrink-0"></span>
+      <span class="flex-1 truncate text-left">
+        Inherited from {ancestor.name}
+      </span>
+      <span class="text-xs text-muted-foreground/50 shrink-0">{inherited.length}</span>
+    </button>
+    {#if !inheritedCollapsed}
+      <div class="py-0.5 bg-neutral-900/40">
+        {#each inheritedTree as node (node.kind === 'entity' ? node.id : node.path)}
+          {#if node.kind === 'entity'}
+            <EntityTreeNode
+              handle={node.scene
+                ? ecs.scenes.get(node.scene).entities.get(node.id)
+                : manager.get(node.id)}
+              readonly={true}
+            />
+          {:else}
+            <FolderTreeNode
+              {manager}
+              {node}
+              {folders}
+              {expandedFolders}
+              readonly={true}
+              onToggleFolder={toggleFolder}
+            />
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<div class="py-0.5">
+  {#each tree as node (node.kind === 'entity' ? node.id : node.path)}
+    {#if node.kind === 'entity'}
+      <EntityTreeNode handle={manager.get(node.id)} {onNew} />
+    {:else}
+      <FolderTreeNode
+        {manager}
+        {node}
+        {folders}
+        {expandedFolders}
+        onToggleFolder={toggleFolder}
+        {onNew}
+      />
+    {/if}
+  {/each}
+
+  {#if $entities.length === 0 && folders.size === 0}
+    <div class="py-6 text-center text-xs text-muted-foreground">
+      No entities — use + to add one.
+    </div>
+  {/if}
+</div>
+
+{#if dragging}
+  <div
+    aria-hidden="true"
+    class="mx-2 mb-2 mt-1 flex h-5 items-center justify-center rounded border border-dashed text-xs transition-colors
+      {rootDropHovered
+      ? 'border-primary/60 bg-primary/10 text-purple-400/80'
+      : 'border-border/40 text-muted-foreground/30'}"
+    ondragover={(e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      rootDropHovered = true;
+    }}
+    ondragleave={() => (rootDropHovered = false)}
+    ondrop={(e) => {
+      e.preventDefault();
+      rootDropHovered = false;
+      dropOnRoot();
+    }}
+  >
+    Drop here → root
+  </div>
+{/if}
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
new file mode 100644
index 0000000..c71a327
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+  } from '$lib/components/ui/context-menu';
+  import type { EntityDragContext, TreeFolder } from '../../types';
+  import { ENTITY_DRAG_KEY } from '../../const';
+  import EntityTreeNode from './entity-tree-node.svelte';
+  import FolderTreeNode from './folder-tree-node.svelte';
+  import { type SceneEntityManager } from '$lib/client/ecs';
+  import DialogDeleteEntity from './dialog-delete-entity.svelte';
+  import DialogEditEntity from './dialog-edit-entity.svelte';
+  import { resolveParentPath } from '../../utils';
+
+  interface Props {
+    manager: SceneEntityManager;
+    node: TreeFolder;
+    readonly?: boolean;
+    depth?: number;
+    folders: Set<string>;
+    expandedFolders: Set<string>;
+    onToggleFolder: (path: string) => void;
+    onNew?: (kind: 'entity' | 'folder', path: string) => void;
+  }
+
+  let {
+    manager,
+    node,
+    readonly = false,
+    depth = 0,
+    folders = $bindable(),
+    expandedFolders,
+    onToggleFolder,
+    onNew = () => {},
+  }: Props = $props();
+
+  const drag = getContext<EntityDragContext>(ENTITY_DRAG_KEY);
+
+  const entities = $derived(manager.store);
+  const pl = $derived(8 + depth * 12);
+
+  let editOpen = $state(false);
+  let deleteOpen = $state(false);
+
+  let hovered = $state(false);
+
+  const isDragging = $derived(drag.dragging?.type === 'folder' && drag.dragging.path === node.path);
+
+  const handleEdit = (name: string) => {
+    const path = `${resolveParentPath(node.path)}/${name}`;
+
+    $entities.forEach((e) => {
+      if (e.treePath.startsWith(node.path))
+        manager.get(e.id).update({ treePath: e.treePath.replace(node.path, path) });
+    });
+
+    folders.delete(node.path);
+    folders.add(path);
+    folders.forEach((p) => {
+      if (p.startsWith(node.path + '/')) {
+        folders.delete(p);
+        folders.add(p.replace(node.path, path));
+      }
+    });
+  };
+
+  const handleDelete = () => {
+    $entities.forEach((e) => {
+      if (e.treePath.startsWith(node.path)) manager.delete(e.id);
+    });
+
+    folders.delete(node.path);
+    for (const p of [...folders]) if (p.startsWith(node.path + '/')) folders.delete(p);
+  };
+
+  const onEdit = () => {
+    editOpen = true;
+  };
+
+  const onDelete = () => {
+    deleteOpen = true;
+  };
+</script>
+
+<DialogEditEntity
+  kind="folder"
+  bind:open={editOpen}
+  defaultValue={node.name}
+  onConfirm={handleEdit}
+/>
+<DialogDeleteEntity
+  kind="folder"
+  bind:open={deleteOpen}
+  name={node.name}
+  onConfirm={handleDelete}
+/>
+
+<ContextMenu>
+  <ContextMenuTrigger>
+    <button
+      draggable={!readonly}
+      class="flex w-full items-center gap-1.5 py-0.5 hover:bg-neutral-800 text-muted-foreground transition-colors
+          {hovered && !isDragging ? 'bg-primary/20 ring-2 ring-inset ring-primary' : ''}
+          {isDragging ? 'opacity-40' : ''}"
+      style="padding-left:{pl}px; padding-right:8px"
+      onclick={() => onToggleFolder(node.path)}
+      ondragstart={(e) => {
+        e.stopPropagation();
+        e.dataTransfer!.effectAllowed = 'move';
+        drag.startDrag({ type: 'folder', path: node.path });
+      }}
+      ondragend={() => {
+        drag.endDrag();
+        hovered = false;
+      }}
+      ondragover={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer!.dropEffect = 'move';
+        hovered = true;
+      }}
+      ondragleave={() => (hovered = false)}
+      ondrop={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        hovered = false;
+        drag.dropOnFolder(node.path);
+      }}
+    >
+      <span
+        class="w-3 h-3 shrink-0 {expandedFolders.has(node.path)
+          ? 'i-ic-baseline-keyboard-arrow-down'
+          : 'i-ic-baseline-keyboard-arrow-right'}"
+      ></span>
+      <span class="i-ic-baseline-folder w-3.5 h-3.5 text-yellow-600 shrink-0"></span>
+      <span class="flex-1 truncate text-left text-xs">{node.name}</span>
+      <span class="text-xs text-muted-foreground/50">
+        {node.children.filter((c) => c.kind === 'entity').length}
+      </span>
+    </button>
+  </ContextMenuTrigger>
+  {#if !readonly}
+    <ContextMenuContent>
+      <ContextMenuItem onclick={() => onNew('entity', node.path)}>
+        <span class="i-ic-baseline-add-circle"></span>
+        New entity
+      </ContextMenuItem>
+      <ContextMenuItem onclick={() => onNew('folder', node.path)}>
+        <span class="i-ic-baseline-folder"></span>
+        New folder
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem onclick={onEdit}>
+        <span class="i-ic-baseline-edit"></span>
+        Edit
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem variant="destructive" onclick={onDelete}>
+        <span class="i-ic-baseline-delete"></span>Delete folder &amp; contents
+      </ContextMenuItem>
+    </ContextMenuContent>
+  {/if}
+</ContextMenu>
+
+{#if expandedFolders.has(node.path)}
+  {#each node.children as child (child.kind === 'entity' ? child.id : child.path)}
+    {#if child.kind === 'entity'}
+      <EntityTreeNode handle={manager.get(child.id)} {readonly} depth={depth + 1} {onNew} />
+    {:else}
+      <FolderTreeNode
+        {manager}
+        node={child}
+        {readonly}
+        depth={depth + 1}
+        bind:folders
+        {expandedFolders}
+        {onToggleFolder}
+        {onNew}
+      />
+    {/if}
+  {/each}
+{/if}
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte
new file mode 100644
index 0000000..89a0f1c
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
+  import EntityTree from './entities/entity-tree.svelte';
+  import SceneSystemsList from './systems/scene-systems-list.svelte';
+  import type { SceneHandle } from '$lib/client/ecs';
+  import { useProject } from '$lib/client/project';
+
+  interface Props {
+    handle: SceneHandle;
+  }
+
+  const { handle }: Props = $props();
+
+  const { ecs } = useProject();
+
+  const scene = $derived(handle.store);
+  const activeScene = $derived(ecs.scenes.activeStore);
+
+  const isActive = $derived($activeScene.id === handle.id);
+</script>
+
+<div class="flex flex-1 flex-col min-w-0">
+  <div class="shrink-0 flex items-center gap-2 border-b border-border px-3 py-2 bg-neutral-800/40">
+    <span class="i-clarity-picture-solid text-indigo-400 w-4 h-4"></span>
+    <span class="font-semibold text-foreground text-xs">{$scene.name}</span>
+    {#if isActive}
+      <div class="ml-auto flex items-center gap-1.5">
+        <span class="w-2 h-2 rounded-full bg-green-400"></span>
+        <span class="text-xs text-muted-foreground">Active</span>
+      </div>
+    {/if}
+  </div>
+
+  <Tabs value="entities" class="flex-1 min-h-0 gap-0">
+    <TabsList
+      variant="line"
+      class="w-full justify-start rounded-none border-b border-border bg-neutral-800/20 shrink-0 h-auto py-0 px-0 gap-0"
+    >
+      <TabsTrigger value="entities" class="px-3 py-1.5 text-xs">Entities</TabsTrigger>
+      <TabsTrigger value="sceneSystems" class="px-3 py-1.5 text-xs">Systems</TabsTrigger>
+    </TabsList>
+    <TabsContent value="entities" class="flex-1 min-h-0 overflow-y-auto">
+      <EntityTree manager={handle.entities} />
+    </TabsContent>
+    <TabsContent value="sceneSystems" class="flex-1 min-h-0 overflow-y-auto">
+      <SceneSystemsList manager={handle.systems} />
+    </TabsContent>
+  </Tabs>
+</div>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
new file mode 100644
index 0000000..824f1d8
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
@@ -0,0 +1,261 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import SceneRow from './scene-row.svelte';
+  import DialogNewScene from './dialog-new-scene.svelte';
+
+  import { SvelteSet } from 'svelte/reactivity';
+  import type { Scene, SceneManager } from '$lib/client/ecs';
+
+  interface Props {
+    manager: SceneManager;
+    selected: string | null;
+  }
+
+  let { manager, selected = $bindable(null) }: Props = $props();
+
+  const scenes = $derived(manager.store);
+
+  const rootScenesIds = $derived(manager.rootScenesStore);
+  const rootScenes = $derived($rootScenesIds.map((id) => $scenes.find((s) => s.id === id)!));
+
+  let addOpen = $state(false);
+
+  let expandedSceneItems = new SvelteSet<string>();
+
+  let dragSceneId = $state<string | null>(null);
+  let dropTarget = $state<{ id: string; pos: 'before' | 'on' | 'after' } | null>(null);
+
+  const isDescendantOf = (targetId: string, ancestorId: string): boolean => {
+    const anc = $scenes.find((s) => s.id === ancestorId);
+    if (!anc) return false;
+    for (const subId of anc.subScenes) {
+      if (subId === targetId || isDescendantOf(targetId, subId)) return true;
+    }
+    return false;
+  };
+
+  const getParent = (sceneId: string): Scene | null => {
+    return $scenes.find((s) => s.subScenes.includes(sceneId)) ?? null;
+  };
+
+  const detachFromParent = (sceneId: string) => {
+    const parent = getParent(sceneId);
+    if (!parent) {
+      manager.rootScenes = manager.rootScenes.filter((id) => id !== sceneId);
+      return;
+    }
+    const handle = manager.get(parent.id);
+    handle.update({ subScenes: parent.subScenes.filter((id) => id !== sceneId) });
+  };
+
+  const handleDrop = (targetId: string) => {
+    if (!dragSceneId || !dropTarget || dragSceneId === targetId) {
+      dragSceneId = null;
+      dropTarget = null;
+      return;
+    }
+    const { pos } = dropTarget;
+    if (pos === 'on') {
+      makeChildOf(dragSceneId, targetId);
+    } else {
+      reorderRelativeTo(dragSceneId, targetId, pos);
+    }
+    dragSceneId = null;
+    dropTarget = null;
+  };
+
+  const makeChildOf = (childId: string, parentId: string) => {
+    if (childId === parentId || isDescendantOf(parentId, childId)) return;
+    detachFromParent(childId);
+
+    const handle = manager.get(parentId);
+    handle.update({
+      subScenes: [...handle.data.subScenes, childId],
+    });
+
+    expandedSceneItems.add(parentId);
+  };
+
+  const getInsertedScenes = (
+    scenes: string[],
+    dragId: string,
+    targetId: string,
+    pos: 'before' | 'after',
+  ): string[] => {
+    scenes.splice(scenes.indexOf(targetId) + (pos === 'after' ? 1 : 0), 0, dragId);
+    return scenes;
+  };
+
+  const reorderRelativeTo = (dragId: string, targetId: string, pos: 'before' | 'after') => {
+    const targetParent = getParent(targetId);
+    detachFromParent(dragId);
+
+    if (!targetParent) {
+      manager.rootScenes = getInsertedScenes(manager.rootScenes, dragId, targetId, pos);
+    } else {
+      const handle = manager.get(targetParent.id);
+      const scenes = getInsertedScenes(handle.data.subScenes, dragId, targetId, pos);
+      handle.update({ subScenes: scenes });
+    }
+  };
+
+  const onAdd = (name: string) => {
+    manager.add({
+      id: name,
+      name,
+      path: `./scenes/${name}.ts`,
+      subScenes: [],
+      assets: [],
+      systems: [],
+      entities: [],
+    });
+    manager.rootScenes = [...manager.rootScenes, name];
+  };
+
+  const toggleExpand = (id: string, force?: boolean) => {
+    if (!expandedSceneItems.has(id) && force !== false) {
+      expandedSceneItems.add(id);
+      return;
+    }
+    expandedSceneItems.delete(id);
+    const scene = $scenes.find((s) => s.id === id);
+    if (!scene) return;
+    for (const sub of scene.subScenes) toggleExpand(sub, false);
+  };
+</script>
+
+<DialogNewScene bind:open={addOpen} onConfirm={onAdd} />
+
+{#snippet sceneRow(scene: Scene, depth: number)}
+  {@const isSelf = dragSceneId === scene.id}
+  {@const isInvalid =
+    !dragSceneId || dragSceneId === scene.id || isDescendantOf(scene.id, dragSceneId)}
+  {@const isDropBefore = dropTarget?.id === scene.id && dropTarget.pos === 'before'}
+  {@const isDropOn = dropTarget?.id === scene.id && dropTarget.pos === 'on'}
+  {@const isDropAfter = dropTarget?.id === scene.id && dropTarget.pos === 'after'}
+  {@const barLeft = 8 + depth * 12}
+  {@const handle = manager.get(scene.id)}
+
+  <div class="relative">
+    <div>
+      {#if isDropBefore}
+        <div
+          class="absolute -top-0.25 right-0 h-0.5 bg-primary z-10 pointer-events-none"
+          style="left:{barLeft}px"
+        ></div>
+      {/if}
+      <div
+        aria-hidden="true"
+        class="{isSelf ? 'opacity-40' : ''} {isDropOn
+          ? 'ring-2 ring-inset ring-primary rounded-sm'
+          : ''}"
+        draggable="true"
+        ondragstart={(e) => {
+          dragSceneId = scene.id;
+          e.dataTransfer!.effectAllowed = 'move';
+        }}
+        ondragend={() => {
+          dragSceneId = null;
+          dropTarget = null;
+        }}
+        ondragover={(e) => {
+          if (isInvalid) return;
+          e.preventDefault();
+          e.stopPropagation();
+          e.dataTransfer!.dropEffect = 'move';
+          const { top, height } = (e.currentTarget as HTMLElement).getBoundingClientRect();
+          dropTarget = { id: scene.id, pos: e.clientY - top < height * 0.4 ? 'before' : 'on' };
+        }}
+        ondragleave={(e) => {
+          if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+            if (dropTarget?.id === scene.id) dropTarget = null;
+          }
+        }}
+        ondrop={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleDrop(scene.id);
+        }}
+      >
+        <SceneRow
+          {handle}
+          {depth}
+          isSelected={selected === scene.id}
+          isExpanded={expandedSceneItems.has(scene.id)}
+          onSelect={() => (selected = scene.id)}
+          onToggleExpand={() => toggleExpand(scene.id)}
+        />
+      </div>
+    </div>
+
+    {#if expandedSceneItems.has(scene.id) && scene.subScenes.length > 0}
+      {#each scene.subScenes as subId (subId)}
+        {@const sub = $scenes.find((s) => s.id === subId)}
+        {#if sub}{@render sceneRow(sub, depth + 1)}{/if}
+      {/each}
+      <div class="h-1"></div>
+    {/if}
+
+    <div class="absolute h-1 w-full bottom-0 z-10">
+      {#if dragSceneId && !isInvalid}
+        <div
+          class="h-1"
+          aria-hidden="true"
+          ondragover={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer!.dropEffect = 'move';
+            dropTarget = { id: scene.id, pos: 'after' };
+          }}
+          ondragleave={(e) => {
+            if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+              if (dropTarget?.id === scene.id && dropTarget.pos === 'after') dropTarget = null;
+            }
+          }}
+          ondrop={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleDrop(scene.id);
+          }}
+        >
+          {#if isDropAfter}
+            <div
+              class="absolute -bottom-0.25 right-0 my-auto h-0.5 bg-primary pointer-events-none"
+              style="left:{barLeft}px"
+            ></div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/snippet}
+
+<div class="flex w-44 shrink-0 flex-col border-r border-border">
+  <div
+    class="flex items-center justify-between px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground"
+  >
+    <span>Scenes</span>
+    <Button variant="ghost" size="icon-xs" onclick={() => (addOpen = true)}>
+      <span class="i-ic-baseline-add"></span>
+    </Button>
+  </div>
+
+  <div
+    role="list"
+    class="flex-1 overflow-y-auto mt-1"
+    ondragover={(e) => {
+      if (dragSceneId) e.preventDefault();
+    }}
+    ondragleave={(e) => {
+      if (!e.currentTarget.contains(e.relatedTarget as Node)) dropTarget = null;
+    }}
+    ondrop={() => {
+      dragSceneId = null;
+      dropTarget = null;
+    }}
+  >
+    {#each rootScenes as scene (scene)}
+      {@render sceneRow(scene, 0)}
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
new file mode 100644
index 0000000..4968469
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+  import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+  } from '$lib/components/ui/context-menu';
+  import { type SceneHandle } from '$lib/client/ecs';
+  import { useProject } from '$lib/client/project';
+  import DialogEditScene from './dialog-edit-scene.svelte';
+  import { DeleteConfirmDialog } from '$lib/components/dialogs';
+
+  interface Props {
+    handle: SceneHandle;
+    isSelected: boolean;
+    depth?: number;
+    isExpanded?: boolean;
+    onSelect: () => void;
+    onToggleExpand?: () => void;
+  }
+
+  const {
+    handle,
+    isSelected,
+    depth = 0,
+    isExpanded = false,
+    onSelect,
+    onToggleExpand,
+  }: Props = $props();
+
+  const { ecs } = useProject();
+
+  let editOpen = $state(false);
+  let deleteOpen = $state(false);
+
+  const scene = $derived(handle.store);
+  const activeScene = $derived(ecs.scenes.activeStore);
+  const defaultScene = $derived(ecs.scenes.defaultStore);
+
+  const isActive = $derived($activeScene.id === handle.id);
+  const isDefault = $derived($defaultScene === handle.id);
+  const paddingLeft = $derived(8 + depth * 12);
+
+  const onSetActive = () => {
+    handle.setActive();
+  };
+
+  const onSetDefault = () => {
+    handle.setDefault();
+  };
+
+  const onUpdate = () => {
+    editOpen = true;
+  };
+
+  const handleUpdate = (name: string) => {
+    handle.update({ name });
+  };
+
+  const onDelete = () => {
+    deleteOpen = true;
+  };
+
+  const handleDelete = () => {
+    handle.delete();
+  };
+</script>
+
+<DialogEditScene bind:open={editOpen} defaultValue={$scene.name} onConfirm={handleUpdate} />
+<DeleteConfirmDialog
+  type="Scene"
+  name={$scene.name}
+  bind:open={deleteOpen}
+  onConfirm={handleDelete}
+/>
+
+<ContextMenu>
+  <ContextMenuTrigger>
+    <div
+      class="flex w-full items-center transition-colors
+        {isSelected ? 'bg-neutral-700 text-neutral-100' : 'text-neutral-300 hover:bg-neutral-800'}"
+      style="padding-left: {paddingLeft}px"
+    >
+      {#if $scene.subScenes.length > 0}
+        <button
+          class="shrink-0 px-1 py-1 hover:text-foreground"
+          aria-label="Toggle sub-scenes"
+          onclick={onToggleExpand}
+        >
+          <span
+            class="w-3 h-3 block {isExpanded
+              ? 'i-ic-baseline-keyboard-arrow-down'
+              : 'i-ic-baseline-keyboard-arrow-right'}"
+          ></span>
+        </button>
+      {:else}
+        <span class="w-3 h-3 shrink-0 mx-1"></span>
+      {/if}
+      <button class="flex flex-1 items-center gap-1.5 py-1 pr-2 min-w-0" onclick={onSelect}>
+        <span class="i-clarity-picture-solid w-3.5 h-3.5 shrink-0 text-indigo-400"></span>
+        <span class="flex-1 truncate text-left text-xs">{$scene.name}</span>
+        {#if isDefault}
+          <span class="text-[9px] font-bold leading-none text-amber-400 shrink-0" title="Default">
+            D
+          </span>
+        {/if}
+        {#if isActive}
+          <span class="w-2 h-2 rounded-full shrink-0 bg-green-400" title="Active"></span>
+        {/if}
+      </button>
+    </div>
+  </ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem onclick={onUpdate}>
+      <span class="i-ic-baseline-edit"></span>
+      Edit
+    </ContextMenuItem>
+    <ContextMenuSeparator />
+    {#if !isActive || !isDefault}
+      {#if !isActive}
+        <ContextMenuItem onclick={onSetActive}>
+          <span class="i-ic-round-play-arrow text-green-400"></span>
+          Set active
+        </ContextMenuItem>
+      {/if}
+      {#if !isDefault}
+        <ContextMenuItem onclick={onSetDefault}>
+          <span class="i-ic-baseline-star text-amber-400"></span>
+          Set default
+        </ContextMenuItem>
+      {/if}
+      <ContextMenuSeparator />
+    {/if}
+    <ContextMenuItem variant="destructive" onclick={onDelete}>
+      <span class="i-ic-baseline-delete"></span>
+      Delete
+    </ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte b/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
new file mode 100644
index 0000000..58702e6
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import SceneList from './scene-list.svelte';
+  import SceneDetail from './scene-detail.svelte';
+  import type { SceneManager } from '$lib/client/ecs';
+
+  interface Props {
+    manager: SceneManager;
+  }
+
+  const { manager }: Props = $props();
+
+  let selected = $state<string | null>(null);
+</script>
+
+<div class="flex flex-1 min-h-0">
+  <SceneList {manager} bind:selected />
+
+  {#if selected}
+    <SceneDetail handle={manager.get(selected)} />
+  {:else}
+    <div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
+      Select a scene
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte b/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte
new file mode 100644
index 0000000..4dc2d8d
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { System } from '$lib/client/ecs';
+
+  import DialogSelect from '../../dialogs/dialog-select.svelte';
+
+  interface Props {
+    open: boolean;
+    systems: System[];
+    onConfirm: (systemId: string) => void;
+  }
+
+  let { open, systems, onConfirm }: Props = $props();
+</script>
+
+<DialogSelect
+  title="Add System to Scene"
+  options={systems.map((sys) => ({ label: sys.name, value: sys.id }))}
+  {open}
+  {onConfirm}
+/>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
new file mode 100644
index 0000000..ecbf794
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+  } from '$lib/components/ui/context-menu';
+  import { Button } from '$lib/components/ui/button';
+  import DialogAddSceneSystem from './dialog-add-scene-system.svelte';
+  import { type SceneSystemManager } from '$lib/client/ecs';
+  import { useProject } from '$lib/client/project';
+
+  interface Props {
+    manager: SceneSystemManager;
+  }
+
+  const { manager }: Props = $props();
+
+  const { ecs } = useProject();
+
+  const systems = $derived(manager.store);
+  const allSystems = $derived(ecs.systems.store);
+
+  const availableSystems = $derived($allSystems.filter((s) => !$systems.includes(s.name)));
+
+  let addOpen = $state(false);
+
+  const onAdd = (systemName: string) => {
+    manager.add(systemName);
+  };
+
+  const onDelete = (systemName: string) => {
+    manager.delete(systemName);
+  };
+
+  const onOpenCode = (systemName: string) => {
+    // @todo open code editor
+    console.log('open code', systemName);
+  };
+
+  const onOpenSystem = (systemName: string) => {
+    // @todo open to systems tab
+    console.log('open system', systemName);
+  };
+</script>
+
+<DialogAddSceneSystem open={addOpen} systems={availableSystems} onConfirm={onAdd} />
+
+<div
+  class="flex items-center justify-between px-2 py-1 border-b border-border/50 text-muted-foreground"
+>
+  <span class="text-xs font-semibold tracking-wide">Systems</span>
+  <Button variant="ghost" size="icon-xs" onclick={() => (addOpen = true)}>
+    <span class="i-ic-baseline-add"></span>
+  </Button>
+</div>
+
+<div class="py-0.5">
+  {#each $systems.sort() as sysName (sysName)}
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div class="flex items-center gap-2 px-3 py-1.5 hover:bg-neutral-800">
+          <span class="i-icomoon-free-steam w-3.5 h-3.5 shrink-0 text-amber-400"></span>
+          <span class="flex-1 truncate text-xs text-foreground">{sysName}</span>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onclick={() => onOpenCode(sysName)}>
+          <span class="i-ic:baseline-open-in-new"></span>
+          Open code
+        </ContextMenuItem>
+        <ContextMenuItem onclick={() => onOpenSystem(sysName)}>
+          <span class="i-ic:baseline-open-in-new"></span>
+          Find in systems
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive" onclick={() => onDelete(sysName)}>
+          <span class="i-ic-baseline-delete"></span>
+          Remove from scene
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  {/each}
+
+  {#if $systems.length === 0}
+    <div class="py-6 text-center text-xs text-muted-foreground">No systems — use + to add one.</div>
+  {/if}
+</div>
diff --git a/src/lib/components/Widget/ECSTree/entity-selected.store.svelte.ts b/src/lib/components/Widget/ecs-tree/store.ts
similarity index 100%
rename from src/lib/components/Widget/ECSTree/entity-selected.store.svelte.ts
rename to src/lib/components/Widget/ecs-tree/store.ts
diff --git a/src/lib/components/Widget/ecs-tree/systems/system.items.ts b/src/lib/components/Widget/ecs-tree/systems/system.items.ts
new file mode 100644
index 0000000..600902c
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/systems/system.items.ts
@@ -0,0 +1,9 @@
+import type { PackageItems } from '../types';
+
+export const SYSTEM_ITEMS: PackageItems = {
+  icon: {
+    name: 'i-icomoon-free-steam',
+    color: 'text-amber-400',
+  },
+  addTooltip: 'Add to active scene',
+};
diff --git a/src/lib/components/Widget/ecs-tree/systems/systems-tab.svelte b/src/lib/components/Widget/ecs-tree/systems/systems-tab.svelte
new file mode 100644
index 0000000..e4264cf
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/systems/systems-tab.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import PackageTab from '../packages/package-tab.svelte';
+  import type { SystemManager } from '$lib/client/ecs';
+
+  interface Props {
+    manager: SystemManager;
+  }
+
+  const { manager }: Props = $props();
+</script>
+
+<PackageTab type="system" {manager} />
diff --git a/src/lib/components/Widget/ecs-tree/types.ts b/src/lib/components/Widget/ecs-tree/types.ts
new file mode 100644
index 0000000..7ed5042
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/types.ts
@@ -0,0 +1,22 @@
+export interface PackageItems {
+  icon: {
+    name: string;
+    color: string;
+  };
+  addTooltip: string;
+}
+
+export type TreeEntity = { kind: 'entity'; id: string; scene?: string };
+export type TreeFolder = { kind: 'folder'; name: string; path: string; children: TreeNode[] };
+export type TreeNode = TreeEntity | TreeFolder;
+
+export type EntityDragItem = { type: 'entity'; id: string } | { type: 'folder'; path: string };
+
+export interface EntityDragContext {
+  readonly dragging: EntityDragItem | null;
+  startDrag(item: EntityDragItem): void;
+  endDrag(): void;
+  dropOnFolder(folderPath: string): void;
+  dropOnEntity(entityId: string): void;
+  dropOnRoot(): void;
+}
diff --git a/src/lib/components/Widget/ecs-tree/utils.ts b/src/lib/components/Widget/ecs-tree/utils.ts
new file mode 100644
index 0000000..10da96b
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/utils.ts
@@ -0,0 +1,55 @@
+import type { Entity } from '$lib/client/ecs';
+
+import type { TreeEntity, TreeFolder, TreeNode } from './types';
+
+export const resolveParentPath = (path: string): string => {
+  if (!path) return '';
+  const parts = path.split('/');
+  return parts.slice(0, -1).join('/');
+};
+
+export function buildTree(
+  entities: (Entity & { scene?: string })[],
+  extraFolderPaths: Iterable<string> = [],
+): TreeNode[] {
+  const folderMap = new Map<string, TreeFolder>();
+  const root: TreeNode[] = [];
+
+  function getOrCreate(path: string): TreeFolder {
+    if (folderMap.has(path)) return folderMap.get(path)!;
+    const parts = path.split('/');
+    const folder: TreeFolder = { kind: 'folder', name: parts.at(-1)!, path, children: [] };
+    folderMap.set(path, folder);
+    const parentPath = parts.slice(0, -1).join('/');
+    (parentPath ? getOrCreate(parentPath).children : root).push(folder);
+    return folder;
+  }
+
+  for (const path of extraFolderPaths) if (path) getOrCreate(path);
+  for (const entity of entities) {
+    (entity.treePath ? getOrCreate(entity.treePath).children : root).push({
+      kind: 'entity',
+      id: entity.id,
+      scene: entity.scene,
+    });
+  }
+
+  function sort(nodes: TreeNode[]): TreeNode[] {
+    const folders = nodes
+      .filter((n): n is TreeFolder => n.kind === 'folder')
+      .sort((a, b) => a.name.localeCompare(b.name));
+    const entities = nodes
+      .filter((n): n is TreeEntity => n.kind === 'entity')
+      .sort((a, b) => a.id.localeCompare(b.id));
+    for (const f of folders) f.children = sort(f.children);
+    return [...folders, ...entities];
+  }
+
+  return sort(root);
+}
+
+export function folderPaths(treePath: string): string[] {
+  if (!treePath) return [];
+  const parts = treePath.split('/');
+  return parts.map((_, i) => parts.slice(0, i + 1).join('/'));
+}
diff --git a/src/lib/components/Widget/ecs-tree/widget.svelte b/src/lib/components/Widget/ecs-tree/widget.svelte
new file mode 100644
index 0000000..39cf862
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/widget.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
+  import ScenesTab from './scenes/scenes-tab.svelte';
+  import ComponentsTab from './components/components-tab.svelte';
+  import SystemsTab from './systems/systems-tab.svelte';
+  import { useProject } from '$lib/client/project';
+
+  const { ecs } = useProject();
+
+  let selectedTab = $state('scenes');
+</script>
+
+<Tabs
+  bind:value={selectedTab}
+  class="h-full w-full gap-0 bg-neutral-900 text-sm select-none overflow-hidden"
+>
+  <TabsList
+    variant="line"
+    class="w-full justify-start rounded-none border-b border-border bg-neutral-800 shrink-0 h-auto py-0 px-0 gap-0"
+  >
+    <TabsTrigger value="scenes" class="px-2 py-1 mx-2 my-1">Scenes</TabsTrigger>
+    <TabsTrigger value="components" class="px-2 py-1 mx-2 my-1">Components</TabsTrigger>
+    <TabsTrigger value="systems" class="px-2 py-1 mx-2 my-1">Systems</TabsTrigger>
+  </TabsList>
+  <TabsContent value="scenes" class="flex-1 min-h-0">
+    <ScenesTab manager={ecs.scenes} />
+  </TabsContent>
+  <TabsContent value="components" class="flex-1 min-h-0">
+    <ComponentsTab manager={ecs.components} />
+  </TabsContent>
+  <TabsContent value="systems" class="flex-1 min-h-0">
+    <SystemsTab manager={ecs.systems} />
+  </TabsContent>
+</Tabs>
diff --git a/src/lib/components/Widget/widgets.ts b/src/lib/components/Widget/widgets.ts
index 8f0630f..13868cf 100644
--- a/src/lib/components/Widget/widgets.ts
+++ b/src/lib/components/Widget/widgets.ts
@@ -1,11 +1,11 @@
 import type { Component } from 'svelte';
 
 import MonacoEditor from './CodeEditor/MonacoEditor.svelte';
-import ECSTreeWidget from './ECSTree/ECSTree.svelte';
 import EditorGame from './EditorGame/EditorGame.svelte';
 import EntityInspectorWidget from './EntityInspector/EntityInspectorWidget.svelte';
 import OutputLogWidget from './OutputLog/OutputLogWidget.svelte';
 import { ContentBrowserWidget } from './content-browser';
+import { ECSTreeWidget } from './ecs-tree';
 
 export interface WidgetType {
   id: string;
diff --git a/src/lib/components/dialogs/base-dialog.svelte b/src/lib/components/dialogs/base-dialog.svelte
new file mode 100644
index 0000000..bead1a8
--- /dev/null
+++ b/src/lib/components/dialogs/base-dialog.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogDescription,
+  } from '$lib/components/ui/dialog';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    children?: Snippet<[confirm: () => void, cancel: () => void]>;
+    confirmText?: string;
+    cancelText?: string;
+    onOpenChange?: (open: boolean) => void;
+    onConfirm?: (...args: any[]) => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    children,
+    confirmText,
+    cancelText,
+    onOpenChange,
+    onConfirm,
+  }: Props = $props();
+
+  const confirm = () => {
+    onConfirm?.();
+    open = false;
+    onOpenChange?.(false);
+  };
+
+  const cancel = () => {
+    open = false;
+    onOpenChange?.(false);
+  };
+</script>
+
+<Dialog bind:open>
+  <DialogContent class="sm:max-w-md">
+    {#if title || description}
+      <DialogHeader>
+        {#if title}
+          <DialogTitle>{title}</DialogTitle>
+        {/if}
+        {#if description}
+          <DialogDescription>{description}</DialogDescription>
+        {/if}
+      </DialogHeader>
+    {/if}
+    {@render children?.(confirm, cancel)}
+    <DialogFooter>
+      <Button variant="ghost" onclick={cancel}>{cancelText ?? 'Cancel'}</Button>
+      <Button onclick={confirm}>{confirmText ?? 'Confirm'}</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
diff --git a/src/lib/components/dialogs/delete-confirm-dialog.svelte b/src/lib/components/dialogs/delete-confirm-dialog.svelte
new file mode 100644
index 0000000..a40dd04
--- /dev/null
+++ b/src/lib/components/dialogs/delete-confirm-dialog.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogDescription,
+  } from '$lib/components/ui/dialog';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    open?: boolean;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onOpenChange?: (open: boolean) => void;
+    onConfirm?: () => void;
+  } & ({ type: string } | { title: string }) &
+    ({ name: string } | { children: Snippet });
+
+  let {
+    open = $bindable(false),
+    description,
+    confirmText,
+    cancelText,
+    onOpenChange,
+    onConfirm,
+    ...props
+  }: Props = $props();
+
+  const confirm = () => {
+    onConfirm?.();
+    open = false;
+    onOpenChange?.(false);
+  };
+
+  const cancel = () => {
+    open = false;
+    onOpenChange?.(false);
+  };
+</script>
+
+<Dialog bind:open>
+  <DialogContent class="sm:max-w-md">
+    <DialogHeader>
+      {#if 'title' in props}
+        <DialogTitle>{props.title}</DialogTitle>
+      {:else}
+        <DialogTitle>Deleting {props.type}</DialogTitle>
+      {/if}
+      {#if description}
+        <DialogDescription>{description}</DialogDescription>
+      {/if}
+    </DialogHeader>
+
+    {#if 'children' in props}
+      {@render props.children()}
+    {:else}
+      <div class="py-6 px-2 text-base">
+        Are you sure you want to delete <strong class="bold">{props.name}</strong> ?
+      </div>
+    {/if}
+
+    <DialogFooter>
+      <Button variant="ghost" onclick={cancel}>{cancelText ?? 'Cancel'}</Button>
+      <Button variant="destructive" onclick={confirm}>{confirmText ?? 'Delete'}</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
diff --git a/src/lib/components/dialogs/index.ts b/src/lib/components/dialogs/index.ts
new file mode 100644
index 0000000..887b861
--- /dev/null
+++ b/src/lib/components/dialogs/index.ts
@@ -0,0 +1,5 @@
+import Base from './base-dialog.svelte';
+import DeleteConfirm from './delete-confirm-dialog.svelte';
+import Input from './input-dialog.svelte';
+
+export { Base as BaseDialog, DeleteConfirm as DeleteConfirmDialog, Input as InputDialog };
diff --git a/src/lib/components/dialogs/input-dialog.svelte b/src/lib/components/dialogs/input-dialog.svelte
new file mode 100644
index 0000000..0b87d75
--- /dev/null
+++ b/src/lib/components/dialogs/input-dialog.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import BaseDialog from './base-dialog.svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    children?: Snippet<[confirm: () => void, cancel: () => void]>;
+    confirmText?: string;
+    cancelText?: string;
+    onOpenChange?: (open: boolean) => void;
+    reset?: () => void;
+    onConfirm?: (...args: any[]) => void;
+  }
+
+  let { open = $bindable(false), onOpenChange, reset, ...props }: Props = $props();
+
+  const handleOpenChange = (open: boolean) => {
+    reset?.();
+    onOpenChange?.(open);
+  };
+</script>
+
+<BaseDialog {...props} bind:open onOpenChange={handleOpenChange} />
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index daa9dcc..eb385f6 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -13,7 +13,7 @@
   bind:ref
   data-slot="tabs-trigger"
   class={cn(
-    "gap-1.5 rounded-md border-b-2 border-transparent duration-300 px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "gap-1.5 border-b-2 border-transparent duration-300 px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
     'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input data-[state=active]:border-primary dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
     'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
diff --git a/src/lib/utils/string.ts b/src/lib/utils/string.ts
index 08c33af..1a1f826 100644
--- a/src/lib/utils/string.ts
+++ b/src/lib/utils/string.ts
@@ -4,3 +4,5 @@ export const generateKey = (size = 50) => {
   const buffer = crypto.randomBytes(size);
   return buffer.toString('base64url').substring(0, size);
 };
+
+export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

From 83d3fa5ee90d33d803b37290dcd8adb47301fcab Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 17:00:50 +0900
Subject: [PATCH 17/24] fix: change stores to global stores

---
 .../client/ecs/component/component-handle.ts  | 10 ++-
 .../client/ecs/component/component-manager.ts | 45 +++++++----
 src/lib/client/ecs/ecs-handler.ts             | 24 ++++++
 .../entity/component/component-manager.ts     | 38 +++++++--
 .../component/component-param-handle.ts       | 25 +++++-
 .../component/component-param-manager.ts      | 42 ++++++++--
 .../client/ecs/scene/entity/entity-handle.ts  | 19 ++++-
 .../client/ecs/scene/entity/entity-manager.ts | 27 ++++++-
 src/lib/client/ecs/scene/scene-handle.ts      | 39 +++++++---
 src/lib/client/ecs/scene/scene-manager.ts     | 78 ++++++++++++-------
 .../client/ecs/scene/system/system-handle.ts  |  5 +-
 .../client/ecs/scene/system/system-manager.ts | 19 ++++-
 src/lib/client/ecs/system/system-handle.ts    | 10 ++-
 src/lib/client/ecs/system/system-manager.ts   | 44 +++++++----
 src/lib/client/ecs/utils.ts                   | 37 +++++++++
 15 files changed, 359 insertions(+), 103 deletions(-)
 create mode 100644 src/lib/client/ecs/utils.ts

diff --git a/src/lib/client/ecs/component/component-handle.ts b/src/lib/client/ecs/component/component-handle.ts
index 8c7b74d..4ec19d3 100644
--- a/src/lib/client/ecs/component/component-handle.ts
+++ b/src/lib/client/ecs/component/component-handle.ts
@@ -1,17 +1,25 @@
 import { type Writable, get, writable } from 'svelte/store';
 
+import { resolveStore } from '../utils';
 import type { ComponentManager } from './component-manager';
 import type { Component } from './component.type';
 
+const _storage = writable<Record<string, Writable<Component>>>({});
+
 export class ComponentHandle {
   private _manager: ComponentManager;
   private readonly _store: Writable<Component>;
   public readonly id: string;
 
+  static reset() {
+    _storage.set({});
+  }
+
   constructor(manager: ComponentManager, component: Component) {
     this._manager = manager;
-    this._store = writable(component);
     this.id = component.id;
+
+    this._store = resolveStore(_storage, this.id, component);
   }
 
   get store() {
diff --git a/src/lib/client/ecs/component/component-manager.ts b/src/lib/client/ecs/component/component-manager.ts
index 0c8f534..e532c08 100644
--- a/src/lib/client/ecs/component/component-manager.ts
+++ b/src/lib/client/ecs/component/component-manager.ts
@@ -1,32 +1,39 @@
-import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+import { type Unsubscriber, get, writable } from 'svelte/store';
 
+import { resetSubscriptions } from '../utils';
 import { ComponentHandle } from './component-handle';
 import type { Component } from './component.type';
 
+const _storage = writable<Component[]>([]);
+
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
 export class ComponentManager {
-  private readonly _store: Writable<Component[]>;
-  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+  static reset() {
+    _storage.set([]);
+    resetSubscriptions(_subscriptions);
+  }
 
   constructor(components: Component[]) {
-    this._store = writable(components);
+    _storage.set(components);
   }
 
   get store() {
-    return this._store;
+    return _storage;
   }
 
   get data() {
-    return get(this._store);
+    return get(_storage);
   }
 
   add(component: Component) {
-    const components = get(this._store);
+    const components = get(_storage);
     components.push(component);
-    this._store.set(components);
+    _storage.set(components);
   }
 
   get(id: string): ComponentHandle {
-    const component = get(this._store).find((component) => component.id === id);
+    const component = get(_storage).find((component) => component.id === id);
     if (!component) throw new Error(`Component with id ${id} not found`);
     const handle = new ComponentHandle(this, component);
 
@@ -36,23 +43,31 @@ export class ComponentManager {
   }
 
   delete(id: string) {
-    const components = get(this._store);
-    this._store.set(components.filter((component) => component.id !== id));
+    const components = get(_storage);
+    _storage.set(components.filter((component) => component.id !== id));
 
-    if (id in this._subscriptions) this._subscriptions[id]();
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
   }
 
   private _subscribe(id: string, handle: ComponentHandle) {
     setTimeout(() => {
-      this._subscriptions[id] = handle.store.subscribe((component) => this._update(id, component));
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((component) => this._update(id, component));
+      _subscriptions.set(subscriptions);
     }, 0);
   }
 
   private _update(id: string, component: Component) {
-    const components = get(this._store);
+    const components = get(_storage);
     const index = components.findIndex((s) => s.id === id);
     if (index === -1) return;
     components[index] = component;
-    this._store.set(components);
+    _storage.set(components);
   }
 }
diff --git a/src/lib/client/ecs/ecs-handler.ts b/src/lib/client/ecs/ecs-handler.ts
index f0bbd10..1fb3ac6 100644
--- a/src/lib/client/ecs/ecs-handler.ts
+++ b/src/lib/client/ecs/ecs-handler.ts
@@ -5,8 +5,17 @@ import {
 } from '$lib/client/ecs/transformers';
 import type { Project } from '$lib/client/project';
 
+import { ComponentHandle } from './component/component-handle';
 import { ComponentManager } from './component/component-manager';
+import { EntityComponentManager } from './scene/entity/component/component-manager';
+import { ComponentParamHandle } from './scene/entity/component/component-param-handle';
+import { ComponentParamManager } from './scene/entity/component/component-param-manager';
+import { SceneEntityHandle } from './scene/entity/entity-handle';
+import { SceneEntityManager } from './scene/entity/entity-manager';
+import { SceneHandle } from './scene/scene-handle';
 import { SceneManager } from './scene/scene-manager';
+import { SceneSystemManager } from './scene/system/system-manager';
+import { SystemHandle } from './system/system-handle';
 import { SystemManager } from './system/system-manager';
 
 export class ECSHandler {
@@ -16,6 +25,21 @@ export class ECSHandler {
   private _componentManager: ComponentManager | undefined;
   private _systemManager: SystemManager | undefined;
 
+  static reset() {
+    ComponentHandle.reset();
+    ComponentManager.reset();
+    SystemManager.reset();
+    SystemHandle.reset();
+    SceneHandle.reset();
+    SceneManager.reset();
+    SceneSystemManager.reset();
+    SceneEntityHandle.reset();
+    SceneEntityManager.reset();
+    EntityComponentManager.reset();
+    ComponentParamHandle.reset();
+    ComponentParamManager.reset();
+  }
+
   constructor(project: Project) {
     this._project = project;
   }
diff --git a/src/lib/client/ecs/scene/entity/component/component-manager.ts b/src/lib/client/ecs/scene/entity/component/component-manager.ts
index 842d835..a205e86 100644
--- a/src/lib/client/ecs/scene/entity/component/component-manager.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-manager.ts
@@ -1,16 +1,32 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
+import { resetListeners, resetSubscriptions } from '../../../utils';
+import { resolveStore } from '../../../utils';
 import type { SceneEntityHandle } from '../entity-handle';
 import { EntityComponentHandle } from './component-handle';
 
+const _storage = writable<Record<string, Writable<Record<string, Record<string, string>>>>>({});
+
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
+const _listener = writable<Unsubscriber[] | null>();
+
 export class EntityComponentManager {
   public readonly entity: SceneEntityHandle;
   private readonly _store: Writable<Record<string, Record<string, string>>>;
-  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  static reset() {
+    _storage.set({});
+    resetSubscriptions(_subscriptions);
+    resetListeners(_listener);
+  }
 
   constructor(entity: SceneEntityHandle, components: Record<string, Record<string, string>>) {
     this.entity = entity;
-    this._store = writable(components);
+
+    const storageResolvable = `${this.entity.manager.scene.id}/${this.entity.id}`;
+
+    this._store = resolveStore(_storage, storageResolvable, components);
 
     this._listen();
   }
@@ -47,11 +63,17 @@ export class EntityComponentManager {
     });
     this._store.set(newComponents);
 
-    if (id in this._subscriptions) this._subscriptions[id]();
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
   }
 
   private _listen() {
-    this.entity.manager.scene.manager.ecs.components.store.subscribe((components) => {
+    if (get(_listener)) return;
+    const unsub = this.entity.manager.scene.manager.ecs.components.store.subscribe((components) => {
       const entityComponents = get(this._store);
       const newComponents: Record<string, Record<string, string>> = {};
       Object.entries(entityComponents).forEach(([key, params]) => {
@@ -59,13 +81,15 @@ export class EntityComponentManager {
       });
       this._store.set(newComponents);
     });
+    _listener.set([unsub]);
   }
 
   private _subscribe(id: string, handle: EntityComponentHandle) {
     setTimeout(() => {
-      this._subscriptions[id] = handle.params.values.subscribe((params) =>
-        this._update(id, params),
-      );
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.params.values.subscribe((params) => this._update(id, params));
+      _subscriptions.set(subscriptions);
     }, 0);
   }
 
diff --git a/src/lib/client/ecs/scene/entity/component/component-param-handle.ts b/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
index 8c91042..a9b1c6b 100644
--- a/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-param-handle.ts
@@ -1,20 +1,35 @@
-import { type Readable, type Writable, writable } from 'svelte/store';
+import { type Readable, type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
 import type { ComponentParam } from '../../../component/component.type';
+import { resetListeners, resolveStore } from '../../../utils';
 import type { ComponentParamManager } from './component-param-manager';
 
+const _storage = writable<Record<string, Writable<ComponentParam>>>({});
+const _valueStorage = writable<Record<string, Writable<any | undefined>>>({});
+
+const _listener = writable<Unsubscriber[] | null>();
+
 export class ComponentParamHandle {
   public readonly manager: ComponentParamManager;
   public readonly id: string;
   private readonly _store: Writable<ComponentParam>;
   private readonly _valueStore: Writable<any | undefined>;
 
+  static reset() {
+    _storage.set({});
+    _valueStorage.set({});
+    resetListeners(_listener);
+  }
+
   constructor(manager: ComponentParamManager, param: ComponentParam, value: any | undefined) {
     this.manager = manager;
-    this._store = writable(param);
-    this._valueStore = writable(value);
     this.id = param.name;
 
+    const storageResolvable = `${this.manager.component.manager.entity.manager.scene.id}/${this.manager.component.manager.entity.id}/${this.manager.component.id}/${this.id}`;
+
+    this._store = resolveStore(_storage, storageResolvable, param);
+    this._valueStore = resolveStore(_valueStorage, storageResolvable, value);
+
     this._listen();
   }
 
@@ -31,10 +46,12 @@ export class ComponentParamHandle {
   }
 
   private _listen() {
-    this.manager.component.store.subscribe((component) => {
+    if (get(_listener)) return;
+    const unsub = this.manager.component.store.subscribe((component) => {
       const newParam = component.params.find((param) => param.name === this.id);
       if (!newParam) return;
       this._store.set(newParam);
     });
+    _listener.set([unsub]);
   }
 }
diff --git a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
index ff463dc..fffb27b 100644
--- a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
@@ -1,19 +1,37 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
 import type { ComponentParam } from '../../../component/component.type';
-import { type EntityComponentHandle } from './component-handle';
+import { resetListeners, resetSubscriptions } from '../../../utils';
+import { resolveStore } from '../../../utils';
+import type { EntityComponentHandle } from './component-handle';
 import { ComponentParamHandle } from './component-param-handle';
 
+const _storage = writable<Record<string, Writable<ComponentParam[]>>>({});
+const _valueStorage = writable<Record<string, Writable<Record<string, string>>>>({});
+
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
+const _listener = writable<Unsubscriber[] | null>();
+
 export class ComponentParamManager {
   public readonly component: EntityComponentHandle;
   private readonly _store: Writable<ComponentParam[]>;
   private readonly _valuesStore: Writable<Record<string, string>>;
-  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  static reset() {
+    _storage.set({});
+    _valueStorage.set({});
+    resetSubscriptions(_subscriptions);
+    resetListeners(_listener);
+  }
 
   constructor(component: EntityComponentHandle, params: Record<string, string>) {
     this.component = component;
-    this._store = writable(get(component.store).params);
-    this._valuesStore = writable(params);
+
+    const storageResolvable = `${this.component.manager.entity.manager.scene.id}/${this.component.manager.entity.id}/${this.component.id}`;
+
+    this._store = resolveStore(_storage, storageResolvable, get(component.store).params);
+    this._valuesStore = resolveStore(_valueStorage, storageResolvable, params);
 
     this._listen();
   }
@@ -44,18 +62,28 @@ export class ComponentParamManager {
       params.map((param) => (param.name === id ? { ...param, value: undefined } : param)),
     );
 
-    if (id in this._subscriptions) this._subscriptions[id]();
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
   }
 
   private _listen() {
-    this.component.store.subscribe((component) => {
+    if (get(_listener)) return;
+    const unsub = this.component.store.subscribe((component) => {
       this._store.set(component.params);
     });
+    _listener.set([unsub]);
   }
 
   private _subscribe(id: string, handle: ComponentParamHandle) {
     setTimeout(() => {
-      this._subscriptions[id] = handle.store.subscribe((param) => this._update(id, param));
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((param) => this._update(id, param));
+      _subscriptions.set(subscriptions);
     }, 0);
   }
 
diff --git a/src/lib/client/ecs/scene/entity/entity-handle.ts b/src/lib/client/ecs/scene/entity/entity-handle.ts
index 21a33bf..cec2794 100644
--- a/src/lib/client/ecs/scene/entity/entity-handle.ts
+++ b/src/lib/client/ecs/scene/entity/entity-handle.ts
@@ -1,20 +1,31 @@
-import { type Writable, get, writable } from 'svelte/store';
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
+import { resetListeners, resolveStore } from '../../utils';
 import { EntityComponentManager } from './component/component-manager';
 import type { SceneEntityManager } from './entity-manager';
 import type { Entity } from './entity.type';
 
+const _storage = writable<Record<string, Writable<Entity>>>({});
+
+const _listener = writable<Unsubscriber[] | null>();
+
 export class SceneEntityHandle {
   public readonly manager: SceneEntityManager;
   public readonly id: string;
   private readonly _store: Writable<Entity>;
   private readonly _components: EntityComponentManager;
 
+  static reset() {
+    _storage.set({});
+    resetListeners(_listener);
+  }
+
   constructor(manager: SceneEntityManager, entity: Entity) {
     this.manager = manager;
-    this._store = writable(entity);
     this.id = entity.id;
 
+    this._store = resolveStore(_storage, `${this.manager.scene.id}/${this.id}`, entity);
+
     this._components = new EntityComponentManager(this, entity.components);
 
     this._listen();
@@ -45,10 +56,12 @@ export class SceneEntityHandle {
   }
 
   private _listen() {
-    this._components.store.subscribe((components) => {
+    if (get(_listener)) return;
+    const unsub = this._components.store.subscribe((components) => {
       const entity = get(this._store);
       entity.components = components;
       this._store.set(entity);
     });
+    _listener.set([unsub]);
   }
 }
diff --git a/src/lib/client/ecs/scene/entity/entity-manager.ts b/src/lib/client/ecs/scene/entity/entity-manager.ts
index ab22545..d82223f 100644
--- a/src/lib/client/ecs/scene/entity/entity-manager.ts
+++ b/src/lib/client/ecs/scene/entity/entity-manager.ts
@@ -1,19 +1,30 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
+import { resetSubscriptions } from '../../utils';
+import { resolveStore } from '../../utils';
 import type { SceneHandle } from '../scene-handle';
 import { SceneEntityHandle } from './entity-handle';
 import type { Entity } from './entity.type';
 
+const _storage = writable<Record<string, Writable<Entity[]>>>({});
+
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
 const selectedEntity = writable<SceneEntityHandle | undefined>(undefined);
 
 export class SceneEntityManager {
   public readonly scene: SceneHandle;
   private readonly _store: Writable<Entity[]>;
-  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+
+  static reset() {
+    _storage.set({});
+    resetSubscriptions(_subscriptions);
+  }
 
   constructor(scene: SceneHandle, entities: Entity[]) {
     this.scene = scene;
-    this._store = writable(entities);
+
+    this._store = resolveStore(_storage, this.scene.id, entities);
   }
 
   get store() {
@@ -56,12 +67,20 @@ export class SceneEntityManager {
     const entities = get(this._store);
     this._store.set(entities.filter((entity) => entity.id !== id));
 
-    if (id in this._subscriptions) this._subscriptions[id]();
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
   }
 
   private _subscribe(id: string, handle: SceneEntityHandle) {
     setTimeout(() => {
-      this._subscriptions[id] = handle.store.subscribe((entity) => this._update(id, entity));
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((entity) => this._update(id, entity));
+      _subscriptions.set(subscriptions);
     }, 0);
   }
 
diff --git a/src/lib/client/ecs/scene/scene-handle.ts b/src/lib/client/ecs/scene/scene-handle.ts
index baeb4a5..05eb4eb 100644
--- a/src/lib/client/ecs/scene/scene-handle.ts
+++ b/src/lib/client/ecs/scene/scene-handle.ts
@@ -1,10 +1,15 @@
-import { type Writable, get, writable } from 'svelte/store';
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
+import { resetListeners, resolveStore } from '../utils';
 import { SceneEntityManager } from './entity/entity-manager';
 import type { SceneManager } from './scene-manager';
 import type { Scene } from './scene.type';
 import { SceneSystemManager } from './system/system-manager';
 
+const _storage = writable<Record<string, Writable<Scene>>>({});
+
+const _listener = writable<Unsubscriber[] | null>();
+
 export class SceneHandle {
   public readonly manager: SceneManager;
   public readonly id: string;
@@ -12,11 +17,17 @@ export class SceneHandle {
   private readonly _entities: SceneEntityManager;
   private readonly _systems: SceneSystemManager;
 
+  static reset() {
+    _storage.set({});
+    resetListeners(_listener);
+  }
+
   constructor(manager: SceneManager, scene: Scene) {
     this.manager = manager;
-    this._store = writable(scene);
     this.id = scene.id;
 
+    this._store = resolveStore(_storage, this.id, scene);
+
     this._entities = new SceneEntityManager(this, scene.entities);
     this._systems = new SceneSystemManager(this, scene.systems);
 
@@ -56,15 +67,19 @@ export class SceneHandle {
   }
 
   private _listen() {
-    this._entities.store.subscribe((entities) => {
-      const scene = get(this._store);
-      scene.entities = entities;
-      this._store.set(scene);
-    });
-    this._systems.store.subscribe((systems) => {
-      const scene = get(this._store);
-      scene.systems = systems;
-      this._store.set(scene);
-    });
+    if (get(_listener)) return;
+    const unsub = [
+      this._entities.store.subscribe((entities) => {
+        const scene = get(this._store);
+        scene.entities = entities;
+        this._store.set(scene);
+      }),
+      this._systems.store.subscribe((systems) => {
+        const scene = get(this._store);
+        scene.systems = systems;
+        this._store.set(scene);
+      }),
+    ];
+    _listener.set(unsub);
   }
 }
diff --git a/src/lib/client/ecs/scene/scene-manager.ts b/src/lib/client/ecs/scene/scene-manager.ts
index f70c482..478a831 100644
--- a/src/lib/client/ecs/scene/scene-manager.ts
+++ b/src/lib/client/ecs/scene/scene-manager.ts
@@ -1,80 +1,92 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
 import type { ECSHandler } from '../ecs-handler';
+import { resetSubscriptions } from '../utils';
 import { SceneHandle } from './scene-handle';
 import type { Scene } from './scene.type';
 
+const _storage = writable<Scene[]>([]);
+const _rootScenesStorage = writable<string[]>([]);
+const _activeSceneStorage = writable<SceneHandle>();
+const _defaultSceneStorage = writable<string>();
+
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
 export class SceneManager {
   public readonly ecs: ECSHandler;
-  private readonly _store: Writable<Scene[]>;
-  private readonly _rootScenes: Writable<string[]>;
-  private readonly _subscriptions: Record<string, Unsubscriber> = {};
-  private readonly _activeScene: Writable<SceneHandle>;
-  private readonly _defaultScene: Writable<string>;
+
+  static reset() {
+    _storage.set([]);
+    _rootScenesStorage.set([]);
+    _activeSceneStorage.set(undefined as any);
+    _defaultSceneStorage.set(undefined as any);
+    resetSubscriptions(_subscriptions);
+  }
 
   constructor(ecs: ECSHandler, scenes: Scene[], rootScenes: string[], defaultSceneId: string) {
     this.ecs = ecs;
-    this._store = writable<Scene[]>(scenes);
+    _storage.set(scenes);
 
     const defaultScene = scenes.find((scene) => scene.id === defaultSceneId);
     if (!defaultScene) throw new Error(`Default scene with id ${defaultSceneId} not found`);
-    this._activeScene = writable(new SceneHandle(this, defaultScene));
-    this._defaultScene = writable(defaultSceneId);
-    this._rootScenes = writable(rootScenes);
+
+    _activeSceneStorage.set(new SceneHandle(this, defaultScene));
+    _defaultSceneStorage.set(defaultSceneId);
+    _rootScenesStorage.set(rootScenes);
   }
 
   get store() {
-    return this._store;
+    return _storage;
   }
 
   get data() {
-    return get(this._store);
+    return get(_storage);
   }
 
   get active(): SceneHandle {
-    return get(this._activeScene);
+    return get(_activeSceneStorage);
   }
 
   get activeStore(): Writable<SceneHandle> {
-    return this._activeScene;
+    return _activeSceneStorage;
   }
 
   set active(handle: SceneHandle) {
-    this._activeScene.set(handle);
+    _activeSceneStorage.set(handle);
   }
 
   get default(): string {
-    return get(this._defaultScene);
+    return get(_defaultSceneStorage);
   }
 
   get defaultStore(): Writable<string> {
-    return this._defaultScene;
+    return _defaultSceneStorage;
   }
 
   set default(handle: string) {
-    this._defaultScene.set(handle);
+    _defaultSceneStorage.set(handle);
   }
 
   get rootScenes(): string[] {
-    return get(this._rootScenes);
+    return get(_rootScenesStorage);
   }
 
   get rootScenesStore(): Writable<string[]> {
-    return this._rootScenes;
+    return _rootScenesStorage;
   }
 
   set rootScenes(scenes: string[]) {
-    this._rootScenes.set(scenes);
+    _rootScenesStorage.set(scenes);
   }
 
   add(scene: Scene) {
-    const scenes = get(this._store);
+    const scenes = get(_storage);
     scenes.push(scene);
-    this._store.set(scenes);
+    _storage.set(scenes);
   }
 
   get(id: string): SceneHandle {
-    const scene = get(this._store).find((scene) => scene.id === id);
+    const scene = get(_storage).find((scene) => scene.id === id);
     if (!scene) throw new Error(`Scene with id ${id} not found`);
     const handle = new SceneHandle(this, scene);
 
@@ -84,23 +96,31 @@ export class SceneManager {
   }
 
   delete(id: string) {
-    const scenes = get(this._store);
-    this._store.set(scenes.filter((scene) => scene.id !== id));
+    const scenes = get(_storage);
+    _storage.set(scenes.filter((scene) => scene.id !== id));
 
-    if (id in this._subscriptions) this._subscriptions[id]();
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
   }
 
   private _subscribe(id: string, handle: SceneHandle) {
     setTimeout(() => {
-      this._subscriptions[id] = handle.store.subscribe((scene) => this._update(id, scene));
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((scene) => this._update(id, scene));
+      _subscriptions.set(subscriptions);
     }, 0);
   }
 
   private _update(id: string, scene: Scene) {
-    const scenes = get(this._store);
+    const scenes = get(_storage);
     const index = scenes.findIndex((s) => s.id === id);
     if (index === -1) return;
     scenes[index] = scene;
-    this._store.set(scenes);
+    _storage.set(scenes);
   }
 }
diff --git a/src/lib/client/ecs/scene/system/system-handle.ts b/src/lib/client/ecs/scene/system/system-handle.ts
index 9d5a2ab..10965d3 100644
--- a/src/lib/client/ecs/scene/system/system-handle.ts
+++ b/src/lib/client/ecs/scene/system/system-handle.ts
@@ -1,4 +1,4 @@
-import { type Readable } from 'svelte/store';
+import { type Readable, get } from 'svelte/store';
 
 import type { System } from '../../system/system.type';
 import type { SceneSystemManager } from './system-manager';
@@ -10,8 +10,9 @@ export class SceneSystemHandle {
 
   constructor(manager: SceneSystemManager, systemId: string) {
     this.manager = manager;
-    this._store = manager.scene.manager.ecs.systems.get(systemId).store;
     this.id = systemId;
+
+    this._store = manager.scene.manager.ecs.systems.get(systemId).store;
   }
 
   get store() {
diff --git a/src/lib/client/ecs/scene/system/system-manager.ts b/src/lib/client/ecs/scene/system/system-manager.ts
index da9b6b7..d17dedd 100644
--- a/src/lib/client/ecs/scene/system/system-manager.ts
+++ b/src/lib/client/ecs/scene/system/system-manager.ts
@@ -1,15 +1,26 @@
-import { type Writable, get, writable } from 'svelte/store';
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
+import { resetListeners, resolveStore } from '../../utils';
 import type { SceneHandle } from '../scene-handle';
 import { SceneSystemHandle } from './system-handle';
 
+const _storage = writable<Record<string, Writable<string[]>>>({});
+
+const _listener = writable<Unsubscriber[] | null>();
+
 export class SceneSystemManager {
   public readonly scene: SceneHandle;
   private readonly _store: Writable<string[]>;
 
+  static reset() {
+    _storage.set({});
+    resetListeners(_listener);
+  }
+
   constructor(scene: SceneHandle, systems: string[]) {
     this.scene = scene;
-    this._store = writable<string[]>(systems);
+
+    this._store = resolveStore(_storage, this.scene.id, systems);
 
     this._listen();
   }
@@ -40,10 +51,12 @@ export class SceneSystemManager {
   }
 
   private _listen() {
-    this.scene.manager.ecs.systems.store.subscribe((systems) => {
+    if (get(_listener)) return;
+    const unsub = this.scene.manager.ecs.systems.store.subscribe((systems) => {
       const sceneSystems = get(this._store);
       sceneSystems.filter((system) => systems.find((s) => s.id === system));
       this._store.set(sceneSystems);
     });
+    _listener.set([unsub]);
   }
 }
diff --git a/src/lib/client/ecs/system/system-handle.ts b/src/lib/client/ecs/system/system-handle.ts
index 677c2e0..d963691 100644
--- a/src/lib/client/ecs/system/system-handle.ts
+++ b/src/lib/client/ecs/system/system-handle.ts
@@ -1,17 +1,25 @@
 import { type Writable, get, writable } from 'svelte/store';
 
+import { resolveStore } from '../utils';
 import type { SystemManager } from './system-manager';
 import type { System } from './system.type';
 
+const _storage = writable<Record<string, Writable<System>>>({});
+
 export class SystemHandle {
   private _manager: SystemManager;
   public readonly id: string;
   private readonly _store: Writable<System>;
 
+  static reset() {
+    _storage.set({});
+  }
+
   constructor(manager: SystemManager, system: System) {
     this._manager = manager;
-    this._store = writable(system);
     this.id = system.id;
+
+    this._store = resolveStore(_storage, this.id, system);
   }
 
   get store() {
diff --git a/src/lib/client/ecs/system/system-manager.ts b/src/lib/client/ecs/system/system-manager.ts
index a827980..03ca782 100644
--- a/src/lib/client/ecs/system/system-manager.ts
+++ b/src/lib/client/ecs/system/system-manager.ts
@@ -1,32 +1,38 @@
-import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+import { type Unsubscriber, get, writable } from 'svelte/store';
 
+import { resetSubscriptions } from '../utils';
 import { SystemHandle } from './system-handle';
 import type { System } from './system.type';
 
+const _storage = writable<System[]>([]);
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
 export class SystemManager {
-  private readonly _store: Writable<System[]>;
-  private readonly _subscriptions: Record<string, Unsubscriber> = {};
+  static reset() {
+    _storage.set([]);
+    resetSubscriptions(_subscriptions);
+  }
 
   constructor(systems: System[]) {
-    this._store = writable<System[]>(systems);
+    _storage.set(systems);
   }
 
   get store() {
-    return this._store;
+    return _storage;
   }
 
   get data() {
-    return get(this._store);
+    return get(_storage);
   }
 
   add(system: System) {
-    const systems = get(this._store);
+    const systems = get(_storage);
     systems.push(system);
-    this._store.set(systems);
+    _storage.set(systems);
   }
 
   get(id: string): SystemHandle {
-    const system = get(this._store).find((system) => system.id === id);
+    const system = get(_storage).find((system) => system.id === id);
     if (!system) throw new Error(`System with id ${id} not found`);
     const handle = new SystemHandle(this, system);
 
@@ -36,23 +42,31 @@ export class SystemManager {
   }
 
   delete(id: string) {
-    const systems = get(this._store);
-    this._store.set(systems.filter((system) => system.id !== id));
+    const systems = get(_storage);
+    _storage.set(systems.filter((system) => system.id !== id));
 
-    if (id in this._subscriptions) this._subscriptions[id]();
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
   }
 
   private _subscribe(id: string, handle: SystemHandle) {
     setTimeout(() => {
-      this._subscriptions[id] = handle.store.subscribe((system) => this._update(id, system));
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((system) => this._update(id, system));
+      _subscriptions.set(subscriptions);
     }, 0);
   }
 
   private _update(id: string, system: System) {
-    const systems = get(this._store);
+    const systems = get(_storage);
     const index = systems.findIndex((s) => s.id === id);
     if (index === -1) return;
     systems[index] = system;
-    this._store.set(systems);
+    _storage.set(systems);
   }
 }
diff --git a/src/lib/client/ecs/utils.ts b/src/lib/client/ecs/utils.ts
new file mode 100644
index 0000000..f7f0895
--- /dev/null
+++ b/src/lib/client/ecs/utils.ts
@@ -0,0 +1,37 @@
+import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
+
+export const resetSubscriptions = (store: Writable<Record<string, Unsubscriber | null>>) => {
+  const subscriptions = get(store);
+  Object.values(subscriptions).forEach((sub) => {
+    try {
+      sub?.();
+    } catch {
+      /* empty */
+    }
+  });
+  store.set({});
+};
+
+export const resetListeners = (store: Writable<Unsubscriber[] | null>) => {
+  const listeners = get(store);
+  listeners?.forEach((sub) => {
+    try {
+      sub();
+    } catch {
+      /* empty */
+    }
+  });
+  store.set(null);
+};
+
+export const resolveStore = <T>(
+  storage: Writable<Record<string, Writable<T>>>,
+  resolvable: string,
+  defaultValue?: T,
+) => {
+  const content = get(storage);
+  if (resolvable in content) return content[resolvable];
+  content[resolvable] = writable(defaultValue);
+  storage.set(content);
+  return content[resolvable];
+};

From 082cbe57487285667a92c75ee4f235957e1c6e36 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 19:08:58 +0900
Subject: [PATCH 18/24] fix: add entity inspector and hot reload handling

---
 .../component/component-param-manager.ts      |   2 +-
 .../client/ecs/scene/entity/entity-manager.ts |   4 +-
 src/lib/client/ecs/scene/scene-manager.ts     |   8 +-
 src/lib/client/project/package-handler.ts     |  52 +++----
 src/lib/client/project/save-handler.ts        |  58 ++++---
 .../EntityInspectorWidget.svelte              | 144 ------------------
 .../ecs-tree/packages/package-row.svelte      |  20 ++-
 .../ecs-tree/packages/package-tab.svelte      |   8 +-
 .../scenes/entities/entity-tree-node.svelte   |  14 +-
 .../scenes/entities/entity-tree.svelte        |   4 +-
 .../scenes/entities/folder-tree-node.svelte   |   8 +-
 .../ecs-tree/scenes/scene-detail.svelte       |   2 +-
 .../Widget/ecs-tree/scenes/scene-list.svelte  |   4 +-
 .../Widget/ecs-tree/scenes/scene-row.svelte   |  20 ++-
 .../scenes/systems/scene-systems-list.svelte  |  22 ++-
 .../ComponentSelector.svelte                  |   0
 .../entity-inspector/component-list.svelte    |  20 +++
 .../component-param-list.svelte               |  18 +++
 .../component-param-row.svelte                |  32 ++++
 .../entity-inspector/component-row.svelte     |  52 +++++++
 .../Widget/entity-inspector/index.ts          |   3 +
 .../Widget/entity-inspector/widget.svelte     |  82 ++++++++++
 src/lib/components/Widget/widgets.ts          |   2 +-
 23 files changed, 347 insertions(+), 232 deletions(-)
 delete mode 100644 src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte
 rename src/lib/components/Widget/{EntityInspector => entity-inspector}/ComponentSelector.svelte (100%)
 create mode 100644 src/lib/components/Widget/entity-inspector/component-list.svelte
 create mode 100644 src/lib/components/Widget/entity-inspector/component-param-list.svelte
 create mode 100644 src/lib/components/Widget/entity-inspector/component-param-row.svelte
 create mode 100644 src/lib/components/Widget/entity-inspector/component-row.svelte
 create mode 100644 src/lib/components/Widget/entity-inspector/index.ts
 create mode 100644 src/lib/components/Widget/entity-inspector/widget.svelte

diff --git a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
index fffb27b..47b8adc 100644
--- a/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-param-manager.ts
@@ -82,7 +82,7 @@ export class ComponentParamManager {
     setTimeout(() => {
       const subscriptions = get(_subscriptions);
       if (subscriptions[id]) return;
-      subscriptions[id] = handle.store.subscribe((param) => this._update(id, param));
+      subscriptions[id] = handle.value.subscribe((param) => this._update(id, param));
       _subscriptions.set(subscriptions);
     }, 0);
   }
diff --git a/src/lib/client/ecs/scene/entity/entity-manager.ts b/src/lib/client/ecs/scene/entity/entity-manager.ts
index d82223f..29be0d1 100644
--- a/src/lib/client/ecs/scene/entity/entity-manager.ts
+++ b/src/lib/client/ecs/scene/entity/entity-manager.ts
@@ -35,11 +35,11 @@ export class SceneEntityManager {
     return get(this._store);
   }
 
-  get selected(): SceneEntityHandle | undefined {
+  get selectedData(): SceneEntityHandle | undefined {
     return get(selectedEntity);
   }
 
-  get selectedStore(): Writable<SceneEntityHandle | undefined> {
+  get selected(): Writable<SceneEntityHandle | undefined> {
     return selectedEntity;
   }
 
diff --git a/src/lib/client/ecs/scene/scene-manager.ts b/src/lib/client/ecs/scene/scene-manager.ts
index 478a831..bd55fc1 100644
--- a/src/lib/client/ecs/scene/scene-manager.ts
+++ b/src/lib/client/ecs/scene/scene-manager.ts
@@ -43,11 +43,11 @@ export class SceneManager {
     return get(_storage);
   }
 
-  get active(): SceneHandle {
+  get activeData(): SceneHandle {
     return get(_activeSceneStorage);
   }
 
-  get activeStore(): Writable<SceneHandle> {
+  get active(): Writable<SceneHandle> {
     return _activeSceneStorage;
   }
 
@@ -55,11 +55,11 @@ export class SceneManager {
     _activeSceneStorage.set(handle);
   }
 
-  get default(): string {
+  get defaultData(): string {
     return get(_defaultSceneStorage);
   }
 
-  get defaultStore(): Writable<string> {
+  get default(): Writable<string> {
     return _defaultSceneStorage;
   }
 
diff --git a/src/lib/client/project/package-handler.ts b/src/lib/client/project/package-handler.ts
index 14f6472..20eef19 100644
--- a/src/lib/client/project/package-handler.ts
+++ b/src/lib/client/project/package-handler.ts
@@ -13,40 +13,36 @@ export class PackageHandler {
   }
 
   async init() {
-    if (this._project.save.save.components.length > 0) {
-      this._componentsManifests = new Map<string, EditorComponentManifest>(
-        (
-          await this._project.actions.package.getComponentsManifests({
-            componentPaths: this._project.save.save.components.map((c) => c.path) as [
-              string,
-              ...string[],
-            ],
-          })
-        ).map((e, index) => [this._project.save.save.components[index].name, e]),
-      );
-    }
-    if (this._project.save.save.systems.length > 0) {
-      this._systemsManifests = new Map<string, EditorSystemManifest>(
-        (
-          await this._project.actions.package.getSystemsManifests({
-            systemPaths: this._project.save.save.systems.map((s) => s.path) as [
-              string,
-              ...string[],
-            ],
-          })
-        ).map((e, index) => [this._project.save.save.systems[index].name, e]),
-      );
-    }
+    // if (this._project.save.save.components.length > 0) {
+    //   this._componentsManifests = new Map<string, EditorComponentManifest>(
+    //     (
+    //       await this._project.actions.package.getComponentsManifests({
+    //         componentPaths: this._project.save.save.components.map((c) => c.path) as [
+    //           string,
+    //           ...string[],
+    //         ],
+    //       })
+    //     ).map((e, index) => [this._project.save.save.components[index].name, e]),
+    //   );
+    // }
+    // if (this._project.save.save.systems.length > 0) {
+    //   this._systemsManifests = new Map<string, EditorSystemManifest>(
+    //     (
+    //       await this._project.actions.package.getSystemsManifests({
+    //         systemPaths: this._project.save.save.systems.map((s) => s.path) as [
+    //           string,
+    //           ...string[],
+    //         ],
+    //       })
+    //     ).map((e, index) => [this._project.save.save.systems[index].name, e]),
+    //   );
+    // }
   }
 
   getComponentManifest(componentName: string): EditorComponentManifest | undefined {
     return this._componentsManifests.get(componentName);
   }
 
-  getSystemManifest(systemName: string): EditorSystemManifest | undefined {
-    return this._systemsManifests.get(systemName);
-  }
-
   async installComponent(name: string): Promise<void> {
     const newComponent = (
       await this._project.actions.package.addComponents({ componentNames: [name] })
diff --git a/src/lib/client/project/save-handler.ts b/src/lib/client/project/save-handler.ts
index caa6f65..04fb8a3 100644
--- a/src/lib/client/project/save-handler.ts
+++ b/src/lib/client/project/save-handler.ts
@@ -3,7 +3,7 @@ import { type Writable, get, writable } from 'svelte/store';
 
 import type { Project } from '$lib/client/project';
 
-import type { Save, SaveComponent, SaveEntity, SaveSystem } from '@utils/types';
+import type { Save } from '@utils/types';
 
 export class SaveHandler {
   private _project: Project;
@@ -23,6 +23,9 @@ export class SaveHandler {
 
   async init() {
     await this.fetchFromServer();
+
+    this._listeners();
+
     this._save.subscribe(() => {
       this.syncToServer();
     });
@@ -61,22 +64,6 @@ export class SaveHandler {
     return get(this._save);
   }
 
-  get needSync(): Writable<boolean> {
-    return this._needSync;
-  }
-
-  addComponent(component: SaveComponent) {
-    get(this._save).components.push(component);
-  }
-
-  addEntity(entity: SaveEntity) {
-    get(this._save).entities.push(entity);
-  }
-
-  addSystem(system: SaveSystem) {
-    get(this._save).systems.push(system);
-  }
-
   addComponentToEntity(
     entityId: string,
     componentName: string,
@@ -90,4 +77,41 @@ export class SaveHandler {
     componentManifest.params.forEach((c) => (newComp[c.name] = c.default));
     entity.components[componentName] = newComp;
   }
+
+  private _listeners() {
+    this._project.ecs.components.store.subscribe((components) => {
+      this._save.set({
+        ...this.save,
+        components: components.map((component) => ({
+          name: component.name,
+          path: component.path,
+          paramsNames: component.params.map((p) => p.name),
+        })),
+      });
+      void this.forceSyncToServer();
+    });
+
+    this._project.ecs.systems.store.subscribe((systems) => {
+      this._save.set({
+        ...this.save,
+        systems: systems.map((system) => ({
+          name: system.name,
+          path: system.path,
+        })),
+      });
+      void this.forceSyncToServer();
+    });
+
+    this._project.ecs.scenes.activeData.entities.store.subscribe((entities) => {
+      this._save.set({
+        ...this.save,
+        entities: entities.map((entity) => ({
+          id: entity.id,
+          treePath: entity.treePath,
+          components: entity.components,
+        })),
+      });
+      void this.syncToServer();
+    });
+  }
 }
diff --git a/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte b/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte
deleted file mode 100644
index bcf8287..0000000
--- a/src/lib/components/Widget/EntityInspector/EntityInspectorWidget.svelte
+++ /dev/null
@@ -1,144 +0,0 @@
-<script lang="ts">
-  import { selectedEntityId, selectedEntity } from '$lib/components/Widget/ecs-tree/store';
-  import ComponentSelector from '$lib/components/Widget/EntityInspector/ComponentSelector.svelte';
-  import { CoreEvents } from '$lib/client/event';
-  import { useProject } from '$lib/client/project';
-  import { Input } from '$lib/components/ui/input';
-  import { TristateSwitch } from '$lib/components/ui/tristate-switch';
-
-  let openMap: { [key: string]: boolean } = $state({});
-  let openComponentSelector: boolean = $state(false);
-  let refresh: number = $state(0);
-
-  const { event, packages, save } = useProject();
-
-  $effect(() => {
-    if ($selectedEntityId) {
-      selectedEntity.set(save.save.entities.find((e) => e.id === $selectedEntityId));
-    }
-  });
-
-  async function addComponent(componentName: string) {
-    const componentManifest = packages.getComponentManifest(componentName);
-    if (!componentManifest) {
-      throw new Error(`Can't create ${componentName}: manifest not found`);
-    }
-    save.addComponentToEntity($selectedEntityId, componentName, componentManifest);
-    await save.forceSyncToServer();
-    refresh++;
-  }
-
-  async function removeComponent(componentName: string) {
-    if (!$selectedEntity) return;
-    // eslint-disable-next-line  @typescript-eslint/no-dynamic-delete
-    delete $selectedEntity.components[componentName];
-    await save.forceSyncToServer();
-    refresh++;
-  }
-
-  function hotReloadAndSync() {
-    save.syncToServer();
-    event.emit(CoreEvents.HOT_RELOAD);
-  }
-</script>
-
-<div class="h-full w-full overflow-y-scroll bg-neutral-900 py-1 text-md">
-  {#key refresh}
-    {#if $selectedEntity}
-      <div class="mb-1">
-        <div
-          class="w-full flex items-center bg-neutral-800 px-2 py-1 font-semibold text-neutral-300 text-lg"
-        >
-          {$selectedEntity.id}
-          <span
-            class="i-ic-round-refresh ml-auto text-2xl cursor-pointer"
-            aria-hidden="true"
-            onclick={(e) => {
-              e.stopPropagation();
-              refresh++;
-            }}
-          ></span>
-        </div>
-
-        <div class="my-2">
-          {#each Object.keys($selectedEntity.components) as componentName (componentName)}
-            <button
-              class="text-neutral-200 text-md px-4 w-full flex cursor-pointer items-center gap-1 bg-neutral-800 px-2 py-1 font-semibold text-neutral-300 text-sm"
-              onclick={() => (openMap[componentName] = !openMap[componentName])}
-            >
-              <span
-                aria-hidden="true"
-                class="{!openMap[componentName]
-                  ? 'i-solar-alt-arrow-down-bold'
-                  : 'i-solar-alt-arrow-right-bold'}
-            w-4 text-center select-none text-neutral-400 hover:text-neutral-200"
-              ></span>
-              <span class="i-ic-baseline-token text-neutral-400"></span>
-              {componentName}
-              <span
-                class="i-solar-trash-bin-minimalistic-linear text-red-500 text-align-end"
-                aria-hidden="true"
-                onclick={(e) => {
-                  e.stopPropagation();
-                  removeComponent(componentName);
-                }}
-              ></span>
-            </button>
-            {#if !openMap[componentName]}
-              {#each packages.getComponentManifest(componentName)?.params as param (param.name)}
-                <div class="grid grid-cols-[140px_1fr] m-2 mb-1 items-center gap-2">
-                  <div class="text-neutral-200 text-sm">{param.name}</div>
-
-                  {#if param.type === 'string'}
-                    <Input
-                      type="text"
-                      bind:value={$selectedEntity.components[componentName][param.name]}
-                      onchange={hotReloadAndSync}
-                    />
-                  {:else if param.type === 'number'}
-                    <Input
-                      type="number"
-                      bind:value={$selectedEntity.components[componentName][param.name]}
-                      onchange={hotReloadAndSync}
-                    />
-                  {:else if param.type === 'boolean'}
-                    <TristateSwitch
-                      bind:value={$selectedEntity.components[componentName][param.name]}
-                      onChange={hotReloadAndSync}
-                    />
-                  {/if}
-                </div>
-              {/each}
-            {/if}
-          {/each}
-        </div>
-      </div>
-      <div class="mx-4 my-4 flex justify-center">
-        <button
-          class="h-10 w-full cursor-pointer rounded-md gap-2 bg-neutral-800 font-semibold hover:bg-neutral-700"
-          onclick={() => {
-            openComponentSelector = true;
-          }}
-        >
-          <span class="i-solar-add-circle-bold text-lg"> </span>
-          Add component
-        </button>
-      </div>
-      <ComponentSelector
-        availableComponents={save.save.components.filter(
-          (c) => !Object.keys($selectedEntity?.components ?? {}).includes(c.name),
-        )}
-        open={openComponentSelector}
-        onClose={() => (openComponentSelector = false)}
-        onSelect={(c) => {
-          addComponent(c.name);
-          openComponentSelector = false;
-        }}
-      />
-    {:else}
-      <div class="h-full w-full flex items-center justify-center text-2xl text-align-center">
-        Select an entity in the left panel
-      </div>
-    {/if}
-  {/key}
-</div>
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
index cd67d00..949e109 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
@@ -38,18 +38,22 @@
 
   const items: PackageItems = $derived(ITEMS[type]);
 
-  const onAdd = () => {
+  const onAdd = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (type === 'component') {
-      const entity = ecs.scenes.active.entities.selected;
+      const entity = ecs.scenes.activeData.entities.selectedData;
       if (!entity) return;
       entity.components.add(get(pkg).id);
     } else {
-      ecs.scenes.active.systems.add(get(pkg).id);
+      ecs.scenes.activeData.systems.add(get(pkg).id);
     }
   };
 
-  const onOpen = () => {
-    // @todo handle open code edito
+  const onOpenCode = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // @todo handle open code editor
   };
 
   const handleDelete = () => {
@@ -57,7 +61,9 @@
     handle.delete();
   };
 
-  const onDelete = () => {
+  const onDelete = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     deleteOpen = true;
   };
 </script>
@@ -99,7 +105,7 @@
     </div>
   </ContextMenuTrigger>
   <ContextMenuContent>
-    <ContextMenuItem onclick={onOpen}>
+    <ContextMenuItem onclick={onOpenCode}>
       <span class="i-ic-baseline-open-in-new"></span>
       Open code
     </ContextMenuItem>
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
index c74199d..2caf405 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
@@ -47,7 +47,7 @@
   let createOpen = $state(false);
   let importOpen = $state(false);
 
-  const onCreate = (name: string, path: string) => {
+  const handleCreate = (name: string, path: string) => {
     // @todo create package
     manager.add({
       id: name,
@@ -57,7 +57,7 @@
     });
   };
 
-  const onImport = (name: string, path: string) => {
+  const handleImport = (name: string, path: string) => {
     // @todo import package
     manager.add({
       id: name,
@@ -68,8 +68,8 @@
   };
 </script>
 
-<DialogCreatePackage name={nameCapitalized} bind:open={createOpen} onConfirm={onCreate} />
-<DialogImportPackage name={nameCapitalized} bind:open={importOpen} onConfirm={onImport} />
+<DialogCreatePackage name={nameCapitalized} bind:open={createOpen} onConfirm={handleCreate} />
+<DialogImportPackage name={nameCapitalized} bind:open={importOpen} onConfirm={handleImport} />
 
 <div class="flex flex-col flex-1 min-h-0">
   <div class="flex items-center gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
index 064284c..112e9c5 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
@@ -28,7 +28,7 @@
   const drag = getContext<EntityDragContext>(ENTITY_DRAG_KEY);
 
   const entity = $derived(handle.store);
-  const selectedEntity = $derived(handle.manager.selectedStore);
+  const selectedEntity = $derived(handle.manager.selected);
 
   const pl = $derived(8 + depth * 12);
 
@@ -39,7 +39,9 @@
 
   const isDragging = $derived(drag.dragging?.type === 'entity' && drag.dragging.id === $entity.id);
 
-  const onSelect = () => {
+  const onSelect = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     handle.setSelected();
   };
 
@@ -51,11 +53,15 @@
     handle.delete();
   };
 
-  const onEdit = () => {
+  const onEdit = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     editOpen = true;
   };
 
-  const onDelete = () => {
+  const onDelete = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     deleteOpen = true;
   };
 </script>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
index ead25e8..e5a0d29 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
@@ -191,7 +191,9 @@
   };
 
   const onNew = (kind: 'entity' | 'folder', path: string) => {
-    return () => {
+    return (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
       newPath = path;
       if (kind === 'entity') newEntityOpen = true;
       else newFolderOpen = true;
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
index c71a327..ddb865a 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
@@ -77,11 +77,15 @@
     for (const p of [...folders]) if (p.startsWith(node.path + '/')) folders.delete(p);
   };
 
-  const onEdit = () => {
+  const onEdit = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     editOpen = true;
   };
 
-  const onDelete = () => {
+  const onDelete = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     deleteOpen = true;
   };
 </script>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte
index 89a0f1c..01acb3f 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-detail.svelte
@@ -14,7 +14,7 @@
   const { ecs } = useProject();
 
   const scene = $derived(handle.store);
-  const activeScene = $derived(ecs.scenes.activeStore);
+  const activeScene = $derived(ecs.scenes.active);
 
   const isActive = $derived($activeScene.id === handle.id);
 </script>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
index 824f1d8..a15e822 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
@@ -99,7 +99,7 @@
     }
   };
 
-  const onAdd = (name: string) => {
+  const handleAdd = (name: string) => {
     manager.add({
       id: name,
       name,
@@ -124,7 +124,7 @@
   };
 </script>
 
-<DialogNewScene bind:open={addOpen} onConfirm={onAdd} />
+<DialogNewScene bind:open={addOpen} onConfirm={handleAdd} />
 
 {#snippet sceneRow(scene: Scene, depth: number)}
   {@const isSelf = dragSceneId === scene.id}
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
index 4968469..bc9f3cb 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
@@ -35,22 +35,28 @@
   let deleteOpen = $state(false);
 
   const scene = $derived(handle.store);
-  const activeScene = $derived(ecs.scenes.activeStore);
-  const defaultScene = $derived(ecs.scenes.defaultStore);
+  const activeScene = $derived(ecs.scenes.active);
+  const defaultScene = $derived(ecs.scenes.default);
 
   const isActive = $derived($activeScene.id === handle.id);
   const isDefault = $derived($defaultScene === handle.id);
   const paddingLeft = $derived(8 + depth * 12);
 
-  const onSetActive = () => {
+  const onSetActive = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     handle.setActive();
   };
 
-  const onSetDefault = () => {
+  const onSetDefault = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     handle.setDefault();
   };
 
-  const onUpdate = () => {
+  const onUpdate = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     editOpen = true;
   };
 
@@ -58,7 +64,9 @@
     handle.update({ name });
   };
 
-  const onDelete = () => {
+  const onDelete = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     deleteOpen = true;
   };
 
diff --git a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
index ecbf794..93a1898 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
@@ -26,26 +26,32 @@
 
   let addOpen = $state(false);
 
-  const onAdd = (systemName: string) => {
+  const handleAdd = (systemName: string) => {
     manager.add(systemName);
   };
 
-  const onDelete = (systemName: string) => {
+  const onDelete = (systemName: string) => (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     manager.delete(systemName);
   };
 
-  const onOpenCode = (systemName: string) => {
+  const onOpenCode = (systemName: string) => (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     // @todo open code editor
     console.log('open code', systemName);
   };
 
-  const onOpenSystem = (systemName: string) => {
+  const onOpenSystem = (systemName: string) => (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     // @todo open to systems tab
     console.log('open system', systemName);
   };
 </script>
 
-<DialogAddSceneSystem open={addOpen} systems={availableSystems} onConfirm={onAdd} />
+<DialogAddSceneSystem open={addOpen} systems={availableSystems} onConfirm={handleAdd} />
 
 <div
   class="flex items-center justify-between px-2 py-1 border-b border-border/50 text-muted-foreground"
@@ -66,16 +72,16 @@
         </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem onclick={() => onOpenCode(sysName)}>
+        <ContextMenuItem onclick={onOpenCode(sysName)}>
           <span class="i-ic:baseline-open-in-new"></span>
           Open code
         </ContextMenuItem>
-        <ContextMenuItem onclick={() => onOpenSystem(sysName)}>
+        <ContextMenuItem onclick={onOpenSystem(sysName)}>
           <span class="i-ic:baseline-open-in-new"></span>
           Find in systems
         </ContextMenuItem>
         <ContextMenuSeparator />
-        <ContextMenuItem variant="destructive" onclick={() => onDelete(sysName)}>
+        <ContextMenuItem variant="destructive" onclick={onDelete(sysName)}>
           <span class="i-ic-baseline-delete"></span>
           Remove from scene
         </ContextMenuItem>
diff --git a/src/lib/components/Widget/EntityInspector/ComponentSelector.svelte b/src/lib/components/Widget/entity-inspector/ComponentSelector.svelte
similarity index 100%
rename from src/lib/components/Widget/EntityInspector/ComponentSelector.svelte
rename to src/lib/components/Widget/entity-inspector/ComponentSelector.svelte
diff --git a/src/lib/components/Widget/entity-inspector/component-list.svelte b/src/lib/components/Widget/entity-inspector/component-list.svelte
new file mode 100644
index 0000000..2dad228
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/component-list.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { EntityComponentManager } from '$lib/client/ecs';
+
+  import ComponentRow from './component-row.svelte';
+
+  interface Props {
+    manager: EntityComponentManager;
+  }
+
+  const { manager }: Props = $props();
+
+  const components = $derived(manager.store);
+</script>
+
+<div class="my-2">
+  {#each Object.keys($components) as component (component)}
+    {@const handle = manager.get(component)}
+    <ComponentRow {handle} />
+  {/each}
+</div>
diff --git a/src/lib/components/Widget/entity-inspector/component-param-list.svelte b/src/lib/components/Widget/entity-inspector/component-param-list.svelte
new file mode 100644
index 0000000..cf06c52
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/component-param-list.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { ComponentParamManager } from '$lib/client/ecs';
+
+  import ComponentParamRow from './component-param-row.svelte';
+
+  interface Props {
+    manager: ComponentParamManager;
+  }
+
+  const { manager }: Props = $props();
+
+  const params = $derived(manager.store);
+</script>
+
+{#each $params as param (param.name)}
+  {@const handle = manager.get(param.name)}
+  <ComponentParamRow {handle} />
+{/each}
diff --git a/src/lib/components/Widget/entity-inspector/component-param-row.svelte b/src/lib/components/Widget/entity-inspector/component-param-row.svelte
new file mode 100644
index 0000000..d69081a
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/component-param-row.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { ComponentParamHandle } from '$lib/client/ecs';
+  import { Input } from '$lib/components/ui/input';
+  import { TristateSwitch } from '$lib/components/ui/tristate-switch';
+
+  interface Props {
+    handle: ComponentParamHandle;
+  }
+
+  const { handle }: Props = $props();
+
+  const param = $derived(handle.store);
+  const defaultValue = $derived(handle.value);
+
+  let value = $state<any>($defaultValue);
+
+  const handleChange = () => {
+    handle.value.set(value);
+  };
+</script>
+
+<div class="grid grid-cols-[140px_1fr] m-2 mb-1 items-center gap-2">
+  <div class="text-neutral-200 text-sm">{$param.name}</div>
+
+  {#if $param.type === 'string'}
+    <Input type="text" bind:value onchange={handleChange} />
+  {:else if $param.type === 'number'}
+    <Input type="number" bind:value onchange={handleChange} />
+  {:else if $param.type === 'boolean'}
+    <TristateSwitch bind:value onChange={handleChange} />
+  {/if}
+</div>
diff --git a/src/lib/components/Widget/entity-inspector/component-row.svelte b/src/lib/components/Widget/entity-inspector/component-row.svelte
new file mode 100644
index 0000000..fe17dc6
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/component-row.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { EntityComponentHandle } from '$lib/client/ecs';
+  import { DeleteConfirmDialog } from '$lib/components/dialogs';
+
+  import ComponentParamList from './component-param-list.svelte';
+
+  interface Props {
+    handle: EntityComponentHandle;
+  }
+
+  const { handle }: Props = $props();
+
+  const component = $derived(handle.store);
+
+  let componentCollapsed = $state(false);
+  let deleteOpen = $state(false);
+
+  const onDelete = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    deleteOpen = true;
+  };
+
+  const handleDelete = () => {};
+</script>
+
+<DeleteConfirmDialog
+  type="Component"
+  name={$component.name}
+  bind:open={deleteOpen}
+  onConfirm={handleDelete}
+/>
+<button
+  class="text-neutral-200 text-md px-4 w-full flex cursor-pointer items-center gap-1 bg-neutral-800 px-2 py-1 font-semibold text-neutral-300 text-sm"
+  onclick={() => (componentCollapsed = !componentCollapsed)}
+>
+  <span
+    aria-hidden="true"
+    class="{!componentCollapsed ? 'i-solar-alt-arrow-down-bold' : 'i-solar-alt-arrow-right-bold'}
+            w-4 text-center select-none text-neutral-400 hover:text-neutral-200"
+  ></span>
+  <span class="i-ic-baseline-token text-neutral-400"></span>
+  {$component.name}
+  <span
+    class="i-solar-trash-bin-minimalistic-linear text-red-500 text-align-end"
+    aria-hidden="true"
+    onclick={onDelete}
+  ></span>
+</button>
+{#if !componentCollapsed}
+  <ComponentParamList manager={handle.params} />
+{/if}
diff --git a/src/lib/components/Widget/entity-inspector/index.ts b/src/lib/components/Widget/entity-inspector/index.ts
new file mode 100644
index 0000000..8805b91
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/index.ts
@@ -0,0 +1,3 @@
+import Widget from './widget.svelte';
+
+export { Widget, Widget as EntityInspectorWidget };
diff --git a/src/lib/components/Widget/entity-inspector/widget.svelte b/src/lib/components/Widget/entity-inspector/widget.svelte
new file mode 100644
index 0000000..3682d6a
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/widget.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import ComponentSelector from '$lib/components/Widget/entity-inspector/ComponentSelector.svelte';
+  import { CoreEvents } from '$lib/client/event';
+  import { useProject } from '$lib/client/project';
+
+  import ComponentList from './component-list.svelte';
+
+  let openComponentSelector: boolean = $state(false);
+  let refresh: number = $state(0);
+
+  const { event, packages, save, ecs } = useProject();
+
+  const activeScene = $derived(ecs.scenes.active);
+  const entity = $derived($activeScene.entities.selected);
+
+  $effect(() => {
+    console.log('entity changed');
+    $entity?.manager.store.subscribe(() => {
+      event.emit(CoreEvents.HOT_RELOAD);
+    });
+  });
+
+  async function addComponent(componentName: string) {
+    const componentManifest = packages.getComponentManifest(componentName);
+    if (!componentManifest) {
+      throw new Error(`Can't create ${componentName}: manifest not found`);
+    }
+    if (!$entity) throw new Error("Can't create component: no entity selected");
+    save.addComponentToEntity($entity.id, componentName, componentManifest);
+    await save.forceSyncToServer();
+    refresh++;
+  }
+</script>
+
+<div class="h-full w-full overflow-y-scroll bg-neutral-900 py-1 text-md">
+  {#key refresh}
+    {#if $entity}
+      <div class="mb-1">
+        <div
+          class="w-full flex items-center bg-neutral-800 px-2 py-1 font-semibold text-neutral-300 text-lg"
+        >
+          {$entity.id}
+          <span
+            class="i-ic-round-refresh ml-auto text-2xl cursor-pointer"
+            aria-hidden="true"
+            onclick={(e) => {
+              e.stopPropagation();
+              refresh++;
+            }}
+          ></span>
+        </div>
+        <ComponentList manager={$entity.components} />
+      </div>
+      <div class="mx-4 my-4 flex justify-center">
+        <button
+          class="h-10 w-full cursor-pointer rounded-md gap-2 bg-neutral-800 font-semibold hover:bg-neutral-700"
+          onclick={() => {
+            openComponentSelector = true;
+          }}
+        >
+          <span class="i-solar-add-circle-bold text-lg"> </span>
+          Add component
+        </button>
+      </div>
+      <ComponentSelector
+        availableComponents={save.save.components.filter(
+          (c) => !Object.keys($entity?.components ?? {}).includes(c.name),
+        )}
+        open={openComponentSelector}
+        onClose={() => (openComponentSelector = false)}
+        onSelect={(c) => {
+          addComponent(c.name);
+          openComponentSelector = false;
+        }}
+      />
+    {:else}
+      <div class="h-full w-full flex items-center justify-center text-2xl text-align-center">
+        Select an entity in the left panel
+      </div>
+    {/if}
+  {/key}
+</div>
diff --git a/src/lib/components/Widget/widgets.ts b/src/lib/components/Widget/widgets.ts
index 13868cf..989dd16 100644
--- a/src/lib/components/Widget/widgets.ts
+++ b/src/lib/components/Widget/widgets.ts
@@ -2,10 +2,10 @@ import type { Component } from 'svelte';
 
 import MonacoEditor from './CodeEditor/MonacoEditor.svelte';
 import EditorGame from './EditorGame/EditorGame.svelte';
-import EntityInspectorWidget from './EntityInspector/EntityInspectorWidget.svelte';
 import OutputLogWidget from './OutputLog/OutputLogWidget.svelte';
 import { ContentBrowserWidget } from './content-browser';
 import { ECSTreeWidget } from './ecs-tree';
+import { EntityInspectorWidget } from './entity-inspector';
 
 export interface WidgetType {
   id: string;

From d6a2d04dca30c7f4ed28c22af5e2da52c0feb1a2 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 19:50:19 +0900
Subject: [PATCH 19/24] fix: dialog component selector

---
 .../Widget/ecs-tree/scenes/scenes-tab.svelte  |  2 +-
 src/lib/components/Widget/ecs-tree/store.ts   |  6 --
 .../entity-inspector/ComponentSelector.svelte | 70 --------------
 .../entity-inspector/component-row.svelte     |  4 +-
 .../dialog-component-selector.svelte          | 77 +++++++++++++++
 .../Widget/entity-inspector/widget.svelte     | 96 ++++++++-----------
 6 files changed, 120 insertions(+), 135 deletions(-)
 delete mode 100644 src/lib/components/Widget/ecs-tree/store.ts
 delete mode 100644 src/lib/components/Widget/entity-inspector/ComponentSelector.svelte
 create mode 100644 src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte

diff --git a/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte b/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
index 58702e6..eaa3275 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
@@ -9,7 +9,7 @@
 
   const { manager }: Props = $props();
 
-  let selected = $state<string | null>(null);
+  let selected = $state<string | null>(manager.defaultData);
 </script>
 
 <div class="flex flex-1 min-h-0">
diff --git a/src/lib/components/Widget/ecs-tree/store.ts b/src/lib/components/Widget/ecs-tree/store.ts
deleted file mode 100644
index 9c35873..0000000
--- a/src/lib/components/Widget/ecs-tree/store.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type Writable, writable } from 'svelte/store';
-
-import type { SaveEntity } from '@utils/types';
-
-export const selectedEntityId: Writable<string> = writable<string>('');
-export const selectedEntity: Writable<SaveEntity | undefined> = writable<SaveEntity | undefined>();
diff --git a/src/lib/components/Widget/entity-inspector/ComponentSelector.svelte b/src/lib/components/Widget/entity-inspector/ComponentSelector.svelte
deleted file mode 100644
index 524ecb1..0000000
--- a/src/lib/components/Widget/entity-inspector/ComponentSelector.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-  import type { SaveComponent } from '@utils/types';
-
-  interface Props {
-    availableComponents: SaveComponent[];
-    open: boolean;
-    onClose: () => unknown;
-    onSelect: (component: SaveComponent) => unknown;
-  }
-
-  let { availableComponents, open, onClose, onSelect }: Props = $props();
-  let search = $state('');
-
-  function close() {
-    search = '';
-    onClose();
-  }
-
-  function select(component: SaveComponent) {
-    close();
-    onSelect(component);
-  }
-
-  $effect(() => {
-    if (!open) return;
-
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') close();
-    };
-
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  });
-</script>
-
-{#if open}
-  <div
-    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
-    onclick={close}
-    aria-hidden="true"
-  >
-    <div
-      class="w-1/2 max-h-[70vh] rounded-lg bg-neutral-900 shadow-lg border border-neutral-700 p-4 flex flex-col"
-      onclick={(e) => e.stopPropagation()}
-      aria-hidden="true"
-    >
-      <input
-        class="w-full mb-3 px-3 py-2 rounded bg-neutral-800 text-neutral-200 outline-none text-lg"
-        placeholder="Search component..."
-        bind:value={search}
-      />
-
-      <div class="flex-1 overflow-y-auto min-h-0">
-        {#if availableComponents.length === 0}
-          <div class="text-neutral-400 text-sm px-2 py-1">No component found</div>
-        {:else}
-          {#each availableComponents as component (component.name)}
-            <button
-              class="w-full flex items-center gap-3 px-3 py-2 rounded hover:bg-neutral-800 text-neutral-200 text-base"
-              onclick={() => select(component)}
-            >
-              <span class="i-ic-baseline-token text-neutral-400 text-lg"></span>
-              {component.name}
-            </button>
-          {/each}
-        {/if}
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/src/lib/components/Widget/entity-inspector/component-row.svelte b/src/lib/components/Widget/entity-inspector/component-row.svelte
index fe17dc6..20eff25 100644
--- a/src/lib/components/Widget/entity-inspector/component-row.svelte
+++ b/src/lib/components/Widget/entity-inspector/component-row.svelte
@@ -21,7 +21,9 @@
     deleteOpen = true;
   };
 
-  const handleDelete = () => {};
+  const handleDelete = () => {
+    handle.delete();
+  };
 </script>
 
 <DeleteConfirmDialog
diff --git a/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte b/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte
new file mode 100644
index 0000000..39d6f1b
--- /dev/null
+++ b/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+  } from '$lib/components/ui/dialog';
+  import { Input } from '$lib/components/ui/input';
+  import type { Component, SceneEntityHandle } from '$lib/client/ecs';
+  import { useProject } from '$lib/client/project';
+
+  interface Props {
+    open: boolean;
+    handle: SceneEntityHandle;
+    onSelect: (component: Component) => unknown;
+  }
+
+  let { open = $bindable(false), handle, onSelect }: Props = $props();
+
+  const { ecs } = useProject();
+
+  const entity = $derived(handle.store);
+  const components = $derived(ecs.components.store);
+
+  const availableComponents = $derived(
+    $components
+      .filter((c) => !Object.keys($entity.components).includes(c.id))
+      .filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
+      .sort((a, b) => a.name.localeCompare(b.name)),
+  );
+
+  let search = $state('');
+
+  const close = () => {
+    search = '';
+    open = false;
+  };
+
+  const handleSelect = (component: Component) => (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onSelect(component);
+    close();
+  };
+</script>
+
+<Dialog bind:open>
+  <DialogContent class="sm:max-w-lg min-h-100 max-h-80vh md:max-h-60vh flex flex-col">
+    <DialogHeader>
+      <DialogTitle>Add component</DialogTitle>
+      <DialogDescription>Select a component to add to {$entity.name}</DialogDescription>
+    </DialogHeader>
+
+    <Input
+      class="w-full mb-3 px-3 py-2 rounded"
+      placeholder="Search component..."
+      bind:value={search}
+    />
+
+    <div class="flex flex-col overflow-y-scroll">
+      {#if availableComponents.length === 0}
+        <div class="text-neutral-400 text-sm px-2 py-1">No component found</div>
+      {:else}
+        {#each availableComponents as component (component.name)}
+          <button
+            class="w-full flex items-center gap-3 px-3 py-2 rounded hover:bg-neutral-800 text-neutral-200 text-base cursor-pointer"
+            onclick={handleSelect(component)}
+          >
+            <span class="i-ic-baseline-token text-neutral-400 text-lg"></span>
+            {component.name}
+          </button>
+        {/each}
+      {/if}
+    </div>
+  </DialogContent>
+</Dialog>
diff --git a/src/lib/components/Widget/entity-inspector/widget.svelte b/src/lib/components/Widget/entity-inspector/widget.svelte
index 3682d6a..c9cba2b 100644
--- a/src/lib/components/Widget/entity-inspector/widget.svelte
+++ b/src/lib/components/Widget/entity-inspector/widget.svelte
@@ -1,82 +1,64 @@
 <script lang="ts">
-  import ComponentSelector from '$lib/components/Widget/entity-inspector/ComponentSelector.svelte';
+  import DialogComponentSelector from '$lib/components/Widget/entity-inspector/dialog-component-selector.svelte';
   import { CoreEvents } from '$lib/client/event';
   import { useProject } from '$lib/client/project';
 
   import ComponentList from './component-list.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import type { Component } from '$lib/client/ecs';
 
   let openComponentSelector: boolean = $state(false);
-  let refresh: number = $state(0);
+  // let refresh: number = $state(0);
 
-  const { event, packages, save, ecs } = useProject();
+  const { event, save, ecs } = useProject();
 
   const activeScene = $derived(ecs.scenes.active);
   const entity = $derived($activeScene.entities.selected);
 
   $effect(() => {
-    console.log('entity changed');
     $entity?.manager.store.subscribe(() => {
       event.emit(CoreEvents.HOT_RELOAD);
     });
   });
 
-  async function addComponent(componentName: string) {
-    const componentManifest = packages.getComponentManifest(componentName);
-    if (!componentManifest) {
-      throw new Error(`Can't create ${componentName}: manifest not found`);
-    }
+  const handleSelect = (component: Component) => {
     if (!$entity) throw new Error("Can't create component: no entity selected");
-    save.addComponentToEntity($entity.id, componentName, componentManifest);
-    await save.forceSyncToServer();
-    refresh++;
-  }
+    $entity.components.add(component.id);
+    void save.forceSyncToServer();
+  };
 </script>
 
 <div class="h-full w-full overflow-y-scroll bg-neutral-900 py-1 text-md">
-  {#key refresh}
-    {#if $entity}
-      <div class="mb-1">
-        <div
-          class="w-full flex items-center bg-neutral-800 px-2 py-1 font-semibold text-neutral-300 text-lg"
-        >
-          {$entity.id}
-          <span
-            class="i-ic-round-refresh ml-auto text-2xl cursor-pointer"
-            aria-hidden="true"
-            onclick={(e) => {
-              e.stopPropagation();
-              refresh++;
-            }}
-          ></span>
-        </div>
-        <ComponentList manager={$entity.components} />
+  {#if $entity}
+    <div class="mb-1">
+      <div
+        class="w-full flex items-center bg-neutral-800 px-2 py-1 font-semibold text-neutral-300 text-lg"
+      >
+        {$entity.id}
+        <span class="i-ic-round-refresh ml-auto text-2xl cursor-pointer"></span>
       </div>
-      <div class="mx-4 my-4 flex justify-center">
-        <button
-          class="h-10 w-full cursor-pointer rounded-md gap-2 bg-neutral-800 font-semibold hover:bg-neutral-700"
-          onclick={() => {
-            openComponentSelector = true;
-          }}
-        >
-          <span class="i-solar-add-circle-bold text-lg"> </span>
-          Add component
-        </button>
-      </div>
-      <ComponentSelector
-        availableComponents={save.save.components.filter(
-          (c) => !Object.keys($entity?.components ?? {}).includes(c.name),
-        )}
-        open={openComponentSelector}
-        onClose={() => (openComponentSelector = false)}
-        onSelect={(c) => {
-          addComponent(c.name);
-          openComponentSelector = false;
+      <ComponentList manager={$entity.components} />
+    </div>
+    <div class="mx-4 my-4 flex justify-center">
+      <Button
+        variant="secondary"
+        class="h-10 w-full cursor-pointer rounded-md gap-2 "
+        onclick={() => {
+          openComponentSelector = true;
         }}
-      />
-    {:else}
-      <div class="h-full w-full flex items-center justify-center text-2xl text-align-center">
-        Select an entity in the left panel
-      </div>
-    {/if}
-  {/key}
+      >
+        <span class="i-solar-add-circle-bold"> </span>
+        Add component
+      </Button>
+    </div>
+    <DialogComponentSelector
+      handle={$entity}
+      bind:open={openComponentSelector}
+      onSelect={handleSelect}
+    />
+  {:else}
+    <div class="h-full w-full flex items-center justify-center text-2xl text-align-center">
+      Select an entity in the left panel
+    </div>
+  {/if}
 </div>

From 5cc26e3fb451e971ccc5c51f4e9d0ee4d65aad72 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 19:53:28 +0900
Subject: [PATCH 20/24] fix: remove unused refresh state

---
 src/lib/components/Widget/entity-inspector/widget.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/Widget/entity-inspector/widget.svelte b/src/lib/components/Widget/entity-inspector/widget.svelte
index c9cba2b..8890d63 100644
--- a/src/lib/components/Widget/entity-inspector/widget.svelte
+++ b/src/lib/components/Widget/entity-inspector/widget.svelte
@@ -8,7 +8,6 @@
   import type { Component } from '$lib/client/ecs';
 
   let openComponentSelector: boolean = $state(false);
-  // let refresh: number = $state(0);
 
   const { event, save, ecs } = useProject();
 

From 4a1769095b59436ca0f7d2350cf3c00744100c46 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 20:08:22 +0900
Subject: [PATCH 21/24] fix: package handler

---
 src/lib/client/project/package-handler.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/client/project/package-handler.ts b/src/lib/client/project/package-handler.ts
index 20eef19..e69fc51 100644
--- a/src/lib/client/project/package-handler.ts
+++ b/src/lib/client/project/package-handler.ts
@@ -13,6 +13,7 @@ export class PackageHandler {
   }
 
   async init() {
+    // Not working but not used currently
     // if (this._project.save.save.components.length > 0) {
     //   this._componentsManifests = new Map<string, EditorComponentManifest>(
     //     (
@@ -43,6 +44,10 @@ export class PackageHandler {
     return this._componentsManifests.get(componentName);
   }
 
+  getSystemManifest(systemName: string): EditorSystemManifest | undefined {
+    return this._systemsManifests.get(systemName);
+  }
+
   async installComponent(name: string): Promise<void> {
     const newComponent = (
       await this._project.actions.package.addComponents({ componentNames: [name] })

From 01e3349d368ca541eb5527734057acfd35dc4463 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 31 May 2026 20:10:33 +0900
Subject: [PATCH 22/24] fix: remove changes functions from save handler as it's
 modified by ecs handler

---
 src/lib/client/project/save-handler.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/lib/client/project/save-handler.ts b/src/lib/client/project/save-handler.ts
index 04fb8a3..9240c84 100644
--- a/src/lib/client/project/save-handler.ts
+++ b/src/lib/client/project/save-handler.ts
@@ -1,4 +1,3 @@
-import type { EditorComponentManifest } from '@nanoforge-dev/ecs-lib';
 import { type Writable, get, writable } from 'svelte/store';
 
 import type { Project } from '$lib/client/project';
@@ -64,20 +63,6 @@ export class SaveHandler {
     return get(this._save);
   }
 
-  addComponentToEntity(
-    entityId: string,
-    componentName: string,
-    componentManifest: EditorComponentManifest,
-  ) {
-    const entity = get(this._save).entities.find((e) => e.id === entityId);
-    if (!entity) {
-      throw new Error('Entity not found: ' + entityId);
-    }
-    const newComp: Record<string, any> = {};
-    componentManifest.params.forEach((c) => (newComp[c.name] = c.default));
-    entity.components[componentName] = newComp;
-  }
-
   private _listeners() {
     this._project.ecs.components.store.subscribe((components) => {
       this._save.set({

From c1fbcfff6c2ac7f71c34b889e113a5096badb071 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Tue, 2 Jun 2026 15:01:49 +0900
Subject: [PATCH 23/24] fix: issues and add entity searching

---
 .../client/ecs/component/component-manager.ts |   8 +-
 .../client/ecs/scene/entity/entity-manager.ts |  12 +-
 src/lib/client/ecs/scene/scene-manager.ts     |  24 +++-
 src/lib/client/ecs/system/system-manager.ts   |   8 +-
 src/lib/client/ecs/utils.ts                   |  12 ++
 .../project/project-loader/project-cache.ts   |   4 +-
 src/lib/client/project/save-handler.ts        |  13 +-
 .../ecs-tree/components/component.items.ts    |   2 +
 .../ecs-tree/dialogs/dialog-name-path.svelte  |  43 -------
 .../ecs-tree/dialogs/dialog-name.svelte       |   9 +-
 .../ecs-tree/dialogs/dialog-select.svelte     |  19 ++-
 .../packages/dialog-create-package.svelte     |   6 +-
 .../packages/dialog-import-package.svelte     |   6 +-
 .../ecs-tree/packages/package-row.svelte      |  31 ++++-
 .../ecs-tree/packages/package-tab.svelte      |  10 +-
 .../scenes/entities/entity-tree-node.svelte   |  32 +++--
 .../scenes/entities/entity-tree.svelte        | 120 ++++++++++++------
 .../scenes/entities/folder-tree-node.svelte   |  19 +--
 .../Widget/ecs-tree/scenes/scene-list.svelte  |  20 +--
 .../Widget/ecs-tree/scenes/scene-row.svelte   |  18 +--
 .../systems/dialog-add-scene-system.svelte    |   4 +-
 .../scenes/systems/scene-systems-list.svelte  |   4 +-
 .../Widget/ecs-tree/systems/system.items.ts   |   2 +
 src/lib/components/Widget/ecs-tree/types.ts   |   2 +
 src/lib/components/Widget/ecs-tree/utils.ts   |   7 +
 src/lib/components/dialogs/base-dialog.svelte |   4 +-
 .../components/dialogs/input-dialog.svelte    |   1 +
 .../ui/context-menu/context-menu-item.svelte  |   2 +-
 src/lib/server/git/git.ts                     |   2 +-
 .../session/project/project-functions.ts      |   3 +-
 src/lib/server/session/session-functions.ts   |   3 +-
 src/lib/server/session/session-handle.ts      |   2 +-
 src/lib/server/utils/string.ts                |   6 +
 src/lib/utils/format.ts                       |   4 +
 src/lib/utils/string.ts                       |  22 +++-
 35 files changed, 305 insertions(+), 179 deletions(-)
 delete mode 100644 src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte
 create mode 100644 src/lib/server/utils/string.ts

diff --git a/src/lib/client/ecs/component/component-manager.ts b/src/lib/client/ecs/component/component-manager.ts
index e532c08..d00c912 100644
--- a/src/lib/client/ecs/component/component-manager.ts
+++ b/src/lib/client/ecs/component/component-manager.ts
@@ -1,6 +1,6 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
-import { resetSubscriptions } from '../utils';
+import { getId, resetSubscriptions } from '../utils';
 import { ComponentHandle } from './component-handle';
 import type { Component } from './component.type';
 
@@ -26,10 +26,12 @@ export class ComponentManager {
     return get(_storage);
   }
 
-  add(component: Component) {
+  add(component: Omit<Component, 'id' | 'path'> & Partial<Pick<Component, 'path'>>) {
     const components = get(_storage);
-    components.push(component);
+    const id = getId(this.data, component.name);
+    components.push({ ...component, id, path: component.path ?? `components/${id}.ts` });
     _storage.set(components);
+    return id;
   }
 
   get(id: string): ComponentHandle {
diff --git a/src/lib/client/ecs/scene/entity/entity-manager.ts b/src/lib/client/ecs/scene/entity/entity-manager.ts
index 29be0d1..7c2238d 100644
--- a/src/lib/client/ecs/scene/entity/entity-manager.ts
+++ b/src/lib/client/ecs/scene/entity/entity-manager.ts
@@ -1,6 +1,6 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
-import { resetSubscriptions } from '../../utils';
+import { getId, resetSubscriptions } from '../../utils';
 import { resolveStore } from '../../utils';
 import type { SceneHandle } from '../scene-handle';
 import { SceneEntityHandle } from './entity-handle';
@@ -47,10 +47,12 @@ export class SceneEntityManager {
     selectedEntity.set(entity);
   }
 
-  add(entity: Entity) {
+  add(entity: Omit<Entity, 'id'>): string {
     const entities = get(this._store);
-    entities.push(entity);
+    const id = getId(this.data, entity.name);
+    entities.push({ ...entity, id });
     this._store.set(entities);
+    return id;
   }
 
   get(id: string): SceneEntityHandle {
@@ -73,6 +75,10 @@ export class SceneEntityManager {
       subscriptions[id] = null;
       _subscriptions.set(subscriptions);
     }
+
+    if (this.selectedData?.id === id) {
+      this.selected = undefined;
+    }
   }
 
   private _subscribe(id: string, handle: SceneEntityHandle) {
diff --git a/src/lib/client/ecs/scene/scene-manager.ts b/src/lib/client/ecs/scene/scene-manager.ts
index bd55fc1..99b5914 100644
--- a/src/lib/client/ecs/scene/scene-manager.ts
+++ b/src/lib/client/ecs/scene/scene-manager.ts
@@ -1,7 +1,7 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
 import type { ECSHandler } from '../ecs-handler';
-import { resetSubscriptions } from '../utils';
+import { getId, resetSubscriptions } from '../utils';
 import { SceneHandle } from './scene-handle';
 import type { Scene } from './scene.type';
 
@@ -76,13 +76,15 @@ export class SceneManager {
   }
 
   set rootScenes(scenes: string[]) {
-    _rootScenesStorage.set(scenes);
+    _rootScenesStorage.set(Array.from(new Set(scenes)));
   }
 
-  add(scene: Scene) {
+  add(scene: Omit<Scene, 'id'>): string {
     const scenes = get(_storage);
-    scenes.push(scene);
+    const id = getId(this.data, scene.name);
+    scenes.push({ ...scene, id });
     _storage.set(scenes);
+    return id;
   }
 
   get(id: string): SceneHandle {
@@ -105,6 +107,20 @@ export class SceneManager {
       subscriptions[id] = null;
       _subscriptions.set(subscriptions);
     }
+
+    if (this.rootScenes.includes(id))
+      this.rootScenes = this.rootScenes.filter((scene) => scene !== id);
+
+    if (this.defaultData === id) {
+      this.get(this.data.find((v) => !!v)?.id ?? '').setDefault();
+    }
+
+    if (this.activeData.id === id) {
+      this.get(
+        (this.data.find((scene) => scene.id === this.defaultData) ?? this.data.find((v) => !!v))
+          ?.id ?? '',
+      ).setActive();
+    }
   }
 
   private _subscribe(id: string, handle: SceneHandle) {
diff --git a/src/lib/client/ecs/system/system-manager.ts b/src/lib/client/ecs/system/system-manager.ts
index 03ca782..3fdfedc 100644
--- a/src/lib/client/ecs/system/system-manager.ts
+++ b/src/lib/client/ecs/system/system-manager.ts
@@ -1,6 +1,6 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
-import { resetSubscriptions } from '../utils';
+import { getId, resetSubscriptions } from '../utils';
 import { SystemHandle } from './system-handle';
 import type { System } from './system.type';
 
@@ -25,10 +25,12 @@ export class SystemManager {
     return get(_storage);
   }
 
-  add(system: System) {
+  add(system: Omit<System, 'id' | 'path'> & Partial<Pick<System, 'path'>>): string {
     const systems = get(_storage);
-    systems.push(system);
+    const id = getId(this.data, system.name);
+    systems.push({ ...system, id, path: system.path ?? `systems/${id}.ts` });
     _storage.set(systems);
+    return id;
   }
 
   get(id: string): SystemHandle {
diff --git a/src/lib/client/ecs/utils.ts b/src/lib/client/ecs/utils.ts
index f7f0895..7d09836 100644
--- a/src/lib/client/ecs/utils.ts
+++ b/src/lib/client/ecs/utils.ts
@@ -1,5 +1,8 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
+import { formatFrom } from '@utils/format';
+import { randomString } from '@utils/string';
+
 export const resetSubscriptions = (store: Writable<Record<string, Unsubscriber | null>>) => {
   const subscriptions = get(store);
   Object.values(subscriptions).forEach((sub) => {
@@ -35,3 +38,12 @@ export const resolveStore = <T>(
   storage.set(content);
   return content[resolvable];
 };
+
+export const getId = (data: { id: string }[], name: string): string => {
+  const baseId = formatFrom.all(name).toSnake();
+  let id = baseId;
+  while (data.find((d) => d.id === id)) {
+    id = `${baseId}_${randomString(5)}`;
+  }
+  return id;
+};
diff --git a/src/lib/client/project/project-loader/project-cache.ts b/src/lib/client/project/project-loader/project-cache.ts
index e513379..4635923 100644
--- a/src/lib/client/project/project-loader/project-cache.ts
+++ b/src/lib/client/project/project-loader/project-cache.ts
@@ -1,7 +1,7 @@
 import { noProjectActions } from '$lib/client/action';
 import { getConfig } from '$lib/client/config';
 
-import { generateKey } from '@utils/string';
+import { randomString } from '@utils/string';
 
 export interface ProjectDataCache {
   id: string;
@@ -30,7 +30,7 @@ export class ProjectCache {
   static async getOnlineProjects(): Promise<ProjectDataCache[]> {
     const projects = await noProjectActions.project.getGatewayProjects();
     return projects.map((project) => ({
-      id: generateKey(10),
+      id: randomString(10),
       resolvable: project.gatewayId,
       lastOpened: Date.now(),
       name: project.name,
diff --git a/src/lib/client/project/save-handler.ts b/src/lib/client/project/save-handler.ts
index 9240c84..76c5425 100644
--- a/src/lib/client/project/save-handler.ts
+++ b/src/lib/client/project/save-handler.ts
@@ -76,13 +76,16 @@ export class SaveHandler {
       void this.forceSyncToServer();
     });
 
-    this._project.ecs.systems.store.subscribe((systems) => {
+    this._project.ecs.scenes.activeData.systems.store.subscribe((systems) => {
       this._save.set({
         ...this.save,
-        systems: systems.map((system) => ({
-          name: system.name,
-          path: system.path,
-        })),
+        systems: systems.map((name) => {
+          const system = this._project.ecs.systems.get(name).data;
+          return {
+            name: system.name,
+            path: system.path,
+          };
+        }),
       });
       void this.forceSyncToServer();
     });
diff --git a/src/lib/components/Widget/ecs-tree/components/component.items.ts b/src/lib/components/Widget/ecs-tree/components/component.items.ts
index 0fd5cd7..8d91cea 100644
--- a/src/lib/components/Widget/ecs-tree/components/component.items.ts
+++ b/src/lib/components/Widget/ecs-tree/components/component.items.ts
@@ -6,4 +6,6 @@ export const COMPONENT_ITEMS: PackageItems = {
     color: 'text-blue-400',
   },
   addTooltip: 'Add to selected entity',
+  disableAddTooltipNotSelected: 'No entity selected',
+  disableAddTooltipAlreadyAdded: 'The selected entity already had this component',
 };
diff --git a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte
deleted file mode 100644
index d21788e..0000000
--- a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name-path.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { Input } from '$lib/components/ui/input';
-  import { InputDialog } from '$lib/components/dialogs';
-
-  interface Props {
-    open?: boolean;
-    title?: string;
-    nameText?: string;
-    pathText?: string;
-    confirmText?: string;
-    onConfirm?: (name: string, path: string) => void;
-  }
-
-  let {
-    open = $bindable(false),
-    title,
-    nameText,
-    pathText,
-    confirmText,
-    onConfirm,
-  }: Props = $props();
-
-  let name = $state('');
-  let path = $state('');
-
-  const handleConfirm = () => {
-    const n = name.trim();
-    if (!n) throw 'Name is required';
-    onConfirm?.(n, path.trim() || `./${n}.ts`);
-  };
-
-  const reset = () => {
-    name = '';
-    path = '';
-  };
-</script>
-
-<InputDialog {title} {confirmText} bind:open onConfirm={handleConfirm} {reset}>
-  <div class="flex flex-col gap-3 py-2">
-    <Input placeholder={nameText ?? 'Name'} bind:value={name} />
-    <Input placeholder={pathText ?? 'Path (optional)'} bind:value={path} />
-  </div>
-</InputDialog>
diff --git a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
index ca5b9a9..d90ac4d 100644
--- a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
+++ b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
@@ -39,7 +39,14 @@
   };
 </script>
 
-<InputDialog {title} {confirmText} bind:open onConfirm={handleConfirm} {reset}>
+<InputDialog
+  {title}
+  {confirmText}
+  confirmDisabled={!nameValue}
+  bind:open
+  onConfirm={handleConfirm}
+  {reset}
+>
   {#snippet children(confirm)}
     <div class="flex flex-col gap-3 py-2">
       <Input
diff --git a/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte b/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte
index 56150af..6642090 100644
--- a/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte
+++ b/src/lib/components/Widget/ecs-tree/dialogs/dialog-select.svelte
@@ -50,14 +50,25 @@
   };
 </script>
 
-<InputDialog {title} {confirmText} bind:open onConfirm={handleConfirm} {reset}>
+<InputDialog
+  {title}
+  {confirmText}
+  confirmDisabled={!options.length || !value}
+  bind:open
+  onConfirm={handleConfirm}
+  {reset}
+>
   <div class="py-2">
     <Select type="single" bind:value>
       <SelectTrigger class="w-full">{selectedLabel}</SelectTrigger>
       <SelectContent>
-        {#each options as opt (getValue(opt))}
-          <SelectItem value={getValue(opt)}>{getLabel(opt)}</SelectItem>
-        {/each}
+        {#if !!options.length}
+          {#each options as opt (getValue(opt))}
+            <SelectItem value={getValue(opt)}>{getLabel(opt)}</SelectItem>
+          {/each}
+        {:else}
+          <div class="px-4 py-2 text-muted-foreground italic">No options</div>
+        {/if}
       </SelectContent>
     </Select>
   </div>
diff --git a/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte b/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte
index a1b6bed..2bd43f7 100644
--- a/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/dialog-create-package.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import DialogNamePath from '../dialogs/dialog-name-path.svelte';
+  import DialogName from '../dialogs/dialog-name.svelte';
 
   interface Props {
     name: string;
     open: boolean;
-    onConfirm: (name: string, path: string) => void;
+    onConfirm: (name: string) => void;
   }
 
   let { name, open = $bindable(false), onConfirm }: Props = $props();
 </script>
 
-<DialogNamePath title={`Create ${name}`} nameText={`${name} name`} bind:open {onConfirm} />
+<DialogName title={`Create ${name}`} nameText={`${name} name`} bind:open {onConfirm} />
diff --git a/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte b/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte
index fdd5b96..ca12d56 100644
--- a/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/dialog-import-package.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import DialogNamePath from '../dialogs/dialog-name-path.svelte';
+  import DialogName from '../dialogs/dialog-name.svelte';
 
   interface Props {
     name: string;
     open: boolean;
-    onConfirm: (name: string, path: string) => void;
+    onConfirm: (name: string) => void;
   }
 
   let { name, open = $bindable(false), onConfirm }: Props = $props();
 </script>
 
-<DialogNamePath
+<DialogName
   title={`Import ${name}`}
   nameText={`${name} name`}
   confirmText="Import"
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
index 949e109..452fcb3 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
@@ -34,9 +34,32 @@
 
   const pkg = $derived(handle.store);
 
-  let deleteOpen = $state(false);
+  const activeScene = $derived(ecs.scenes.active);
+  const activeSceneData = $derived($activeScene?.store);
+
+  const selectedEntity = $derived($activeScene.entities.selected);
+  const selectedEntityData = $derived($selectedEntity?.store);
+
+  const disabled = $derived.by<'added' | 'selected' | null>(() => {
+    const isNotSelected = type === 'component' ? !$selectedEntity : !$activeScene;
+    if (isNotSelected) return 'selected';
 
+    const isAlreadyAdded =
+      type === 'component'
+        ? !!$selectedEntityData?.components[handle.id]
+        : $activeSceneData.systems.includes(handle.id);
+    if (isAlreadyAdded) return 'added';
+
+    return null;
+  });
   const items: PackageItems = $derived(ITEMS[type]);
+  const tooltip = $derived.by(() => {
+    if (disabled === 'added') return items.disableAddTooltipAlreadyAdded;
+    if (disabled === 'selected') return items.disableAddTooltipNotSelected;
+    return items.addTooltip;
+  });
+
+  let deleteOpen = $state(false);
 
   const onAdd = (e: MouseEvent) => {
     e.preventDefault();
@@ -87,8 +110,8 @@
           <div class="mt-0.5 text-xs text-muted-foreground truncate pl-5">{$pkg.path}</div>
         </div>
         <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100">
-          <TooltipText text={items.addTooltip}>
-            <Button variant="ghost" size="icon" onclick={onAdd}>
+          <TooltipText text={tooltip}>
+            <Button disabled={!!disabled} variant="ghost" size="icon" onclick={onAdd}>
               <span class="i-ic-baseline-add-circle text-green-400"></span>
             </Button>
           </TooltipText>
@@ -109,7 +132,7 @@
       <span class="i-ic-baseline-open-in-new"></span>
       Open code
     </ContextMenuItem>
-    <ContextMenuItem onclick={onAdd}>
+    <ContextMenuItem disabled={!!disabled} onclick={onAdd}>
       <span class="i-ic-baseline-add-circle text-green-400"></span>
       {items.addTooltip}
     </ContextMenuItem>
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
index 2caf405..898c289 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
@@ -47,22 +47,18 @@
   let createOpen = $state(false);
   let importOpen = $state(false);
 
-  const handleCreate = (name: string, path: string) => {
+  const handleCreate = (name: string) => {
     // @todo create package
     manager.add({
-      id: name,
       name,
-      path,
       params: [],
     });
   };
 
-  const handleImport = (name: string, path: string) => {
+  const handleImport = (name: string) => {
     // @todo import package
     manager.add({
-      id: name,
       name,
-      path,
       params: [],
     });
   };
@@ -124,7 +120,7 @@
 
     {#if sorted.length === 0}
       <div class="py-12 text-center text-xs text-muted-foreground">
-        {query ? 'No matches.' : `No ${namePlural} — add one with +.`}
+        {query ? 'No matches.' : `No ${namePlural} - add one with +.`}
       </div>
     {/if}
   </ScrollArea>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
index 112e9c5..e42d1e5 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
@@ -20,10 +20,10 @@
     handle: SceneEntityHandle;
     depth?: number;
     readonly?: boolean;
-    onNew?: (kind: 'entity' | 'folder', path: string) => void;
+    onNew?: (kind: 'entity' | 'folder', path: string) => (e: MouseEvent) => void;
   }
 
-  const { handle, depth = 0, readonly = false, onNew = () => {} }: Props = $props();
+  const { handle, depth = 0, readonly = false, onNew = () => () => {} }: Props = $props();
 
   const drag = getContext<EntityDragContext>(ENTITY_DRAG_KEY);
 
@@ -82,14 +82,14 @@
   <ContextMenuTrigger>
     <button
       draggable={!readonly}
-      class={`flex w-full items-center gap-1.5 py-0.5 pr-2 transition-colors
-          ${
-            $selectedEntity?.id === $entity.id
-              ? 'bg-primary/20 text-purple-300'
-              : 'text-neutral-300 hover:bg-neutral-800'
-          }
-          ${hovered && !isDragging ? 'ring-2 ring-inset ring-blue-primary' : ''}
-          ${isDragging ? 'opacity-40' : ''}`}
+      class={[
+        $selectedEntity?.id === $entity.id
+          ? 'bg-primary/20 text-purple-300'
+          : 'text-neutral-300 hover:bg-neutral-800',
+        hovered && !isDragging ? 'ring-2 ring-inset ring-primary' : '',
+        isDragging ? 'opacity-40' : '',
+        'flex w-full items-center gap-1.5 py-0.5 pr-2 transition-colors group',
+      ]}
       style="padding-left:{pl}px"
       onclick={onSelect}
       ondragstart={(e) => {
@@ -120,18 +120,22 @@
       <span class="flex-1 truncate text-left text-xs {readonly ? 'text-neutral-400' : ''}">
         {$entity.name}
       </span>
-      <span class="text-xs text-muted-foreground/50 shrink-0">
-        {Object.keys($entity.components).length}
+      <span
+        class={[
+          'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator group-hover:opacity-100  duration-150',
+          isDragging ? 'opacity-100' : 'opacity-0',
+        ]}
+      >
       </span>
     </button>
   </ContextMenuTrigger>
   {#if !readonly}
     <ContextMenuContent>
-      <ContextMenuItem onclick={() => onNew('entity', resolveParentPath($entity.treePath))}>
+      <ContextMenuItem onclick={onNew('entity', resolveParentPath($entity.treePath))}>
         <span class="i-ic-baseline-add-circle"></span>
         New entity
       </ContextMenuItem>
-      <ContextMenuItem onclick={() => onNew('folder', resolveParentPath($entity.treePath))}>
+      <ContextMenuItem onclick={onNew('folder', resolveParentPath($entity.treePath))}>
         <span class="i-ic-baseline-folder"></span>
         New folder
       </ContextMenuItem>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
index e5a0d29..38dfc0b 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
@@ -18,6 +18,12 @@
   import EntityTreeNode from './entity-tree-node.svelte';
   import FolderTreeNode from './folder-tree-node.svelte';
   import { useProject } from '$lib/client/project';
+  import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupInput,
+  } from '$lib/components/ui/input-group';
 
   interface Props {
     manager: SceneEntityManager;
@@ -49,6 +55,9 @@
   let folders = new SvelteSet<string>();
   let folderSceneId = $state('');
 
+  let search = $state('');
+  let searchOpen = $state(false);
+
   $effect.pre(() => {
     const id = manager.scene.id;
     if (id !== folderSceneId) {
@@ -68,8 +77,8 @@
     for (const p of [...folders]) if (p.startsWith(folderPath + '/')) folders.delete(p);
   };
 
-  const tree = $derived(buildTree($entities, folders));
-  const inheritedTree = $derived(buildTree(inherited));
+  const tree = $derived(buildTree($entities, folders, search));
+  const inheritedTree = $derived(buildTree(inherited, [], search));
 
   let expandedFolders = new SvelteSet<string>();
   let inheritedCollapsed = $state(true);
@@ -101,11 +110,9 @@
   const dropOnFolder = (folderPath: string) => {
     if (!dragging) return;
     if (dragging.type === 'entity') {
-      const e = $entities.find((e) => e.id === (dragging as { type: 'entity'; id: string }).id);
-      if (e) {
-        e.treePath = folderPath;
-        trackFolders(folderPath);
-      }
+      const handle = manager.get(dragging.id);
+      if (handle.data.treePath !== folderPath) handle.update({ treePath: folderPath });
+      trackFolders(folderPath);
     } else {
       const { path } = dragging as { type: 'folder'; path: string };
       if (path === folderPath || folderPath.startsWith(path + '/')) return;
@@ -127,11 +134,9 @@
     if (dragging.type === 'entity') {
       const { id } = dragging as { type: 'entity'; id: string };
       if (id !== entityId) {
-        const e = $entities.find((e) => e.id === id);
-        if (e) {
-          e.treePath = targetPath;
-          if (targetPath) trackFolders(targetPath);
-        }
+        const handle = manager.get(id);
+        if (handle.data.treePath !== targetPath) handle.update({ treePath: targetPath });
+        trackFolders(targetPath);
       }
     } else {
       const { path } = dragging as { type: 'folder'; path: string };
@@ -146,8 +151,8 @@
     if (!dragging) return;
     if (dragging.type === 'entity') {
       const { id } = dragging as { type: 'entity'; id: string };
-      const e = $entities.find((e) => e.id === id);
-      if (e) e.treePath = '';
+      const handle = manager.get(id);
+      if (handle.data.treePath !== '') handle.update({ treePath: '' });
     } else {
       const { path } = dragging as { type: 'folder'; path: string };
       const name = path.split('/').pop()!;
@@ -180,7 +185,7 @@
   };
 
   const handleNewEntity = (name: string) => {
-    manager.add({ id: name, name, treePath: newPath, components: {} });
+    manager.add({ name, treePath: newPath, components: {} });
     resetTarget();
   };
 
@@ -192,7 +197,6 @@
 
   const onNew = (kind: 'entity' | 'folder', path: string) => {
     return (e: MouseEvent) => {
-      e.preventDefault();
       e.stopPropagation();
       newPath = path;
       if (kind === 'entity') newEntityOpen = true;
@@ -204,29 +208,65 @@
 <DialogNewEntity kind="entity" bind:open={newEntityOpen} onConfirm={handleNewEntity} />
 <DialogNewEntity kind="folder" bind:open={newFolderOpen} onConfirm={handleNewFolder} />
 
-<div
-  class="flex items-center justify-between px-2 py-1 border-b border-border/50 text-muted-foreground"
->
-  <span class="text-xs font-semibold tracking-wide">Entities</span>
-  <DropdownMenu>
-    <DropdownMenuTrigger>
-      {#snippet child({ props })}
-        <Button variant="ghost" size="icon-xs" {...props}>
-          <span class="i-ic-baseline-add"></span>
-        </Button>
-      {/snippet}
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
-      <DropdownMenuItem onclick={onNew('entity', '')}>
-        <span class="i-ic-baseline-category"></span>
-        New entity
-      </DropdownMenuItem>
-      <DropdownMenuItem onclick={onNew('folder', '')}>
-        <span class="i-ic-baseline-folder"></span>
-        New folder
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
+<div class="px-2 py-1 border-b border-border/50 text-muted-foreground">
+  <div class="flex items-center justify-between">
+    <span class="text-xs font-semibold tracking-wide">Entities</span>
+    <div class="flex items-center gap-1">
+      <Button
+        size="icon-xs"
+        variant="ghost"
+        onclick={() => {
+          searchOpen = !searchOpen;
+          search = '';
+        }}
+      >
+        <span class={[searchOpen ? 'i-ic-outline-filter-alt-off' : 'i-ic-outline-filter-alt']}
+        ></span>
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          {#snippet child({ props })}
+            <Button variant="ghost" size="icon-xs" {...props}>
+              <span class="i-ic-baseline-add"></span>
+            </Button>
+          {/snippet}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onclick={onNew('entity', '')}>
+            <span class="i-ic-baseline-category"></span>
+            New entity
+          </DropdownMenuItem>
+          <DropdownMenuItem onclick={onNew('folder', '')}>
+            <span class="i-ic-baseline-folder"></span>
+            New folder
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </div>
+  {#if searchOpen}
+    <InputGroup class="h-6 my-1">
+      <InputGroupInput
+        placeholder="Search entities..."
+        bind:value={search}
+        class="text-xs md:text-xs"
+      />
+      <InputGroupAddon>
+        <span class="i-ic-baseline-search h-4"></span>
+      </InputGroupAddon>
+      {#if search}
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            onclick={() => (search = '')}
+            variant="ghost"
+            class="rounded-md text-destructive hover:text-destructive hover:bg-destructive/10"
+          >
+            <span class="i-ic-round-close h-4 w-4"></span>
+          </InputGroupButton>
+        </InputGroupAddon>
+      {/if}
+    </InputGroup>
+  {/if}
 </div>
 
 {#if ancestor && inherited.length > 0}
@@ -290,7 +330,7 @@
 
   {#if $entities.length === 0 && folders.size === 0}
     <div class="py-6 text-center text-xs text-muted-foreground">
-      No entities — use + to add one.
+      No entities - use + to add one.
     </div>
   {/if}
 </div>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
index ddb865a..b4510c6 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
@@ -24,7 +24,7 @@
     folders: Set<string>;
     expandedFolders: Set<string>;
     onToggleFolder: (path: string) => void;
-    onNew?: (kind: 'entity' | 'folder', path: string) => void;
+    onNew?: (kind: 'entity' | 'folder', path: string) => (e: MouseEvent) => void;
   }
 
   let {
@@ -35,7 +35,7 @@
     folders = $bindable(),
     expandedFolders,
     onToggleFolder,
-    onNew = () => {},
+    onNew = () => () => {},
   }: Props = $props();
 
   const drag = getContext<EntityDragContext>(ENTITY_DRAG_KEY);
@@ -107,7 +107,7 @@
   <ContextMenuTrigger>
     <button
       draggable={!readonly}
-      class="flex w-full items-center gap-1.5 py-0.5 hover:bg-neutral-800 text-muted-foreground transition-colors
+      class="flex w-full items-center gap-1.5 py-0.5 hover:bg-neutral-800 text-muted-foreground transition-colors group
           {hovered && !isDragging ? 'bg-primary/20 ring-2 ring-inset ring-primary' : ''}
           {isDragging ? 'opacity-40' : ''}"
       style="padding-left:{pl}px; padding-right:8px"
@@ -142,18 +142,21 @@
       ></span>
       <span class="i-ic-baseline-folder w-3.5 h-3.5 text-yellow-600 shrink-0"></span>
       <span class="flex-1 truncate text-left text-xs">{node.name}</span>
-      <span class="text-xs text-muted-foreground/50">
-        {node.children.filter((c) => c.kind === 'entity').length}
-      </span>
+      <span
+        class={[
+          'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator group-hover:opacity-100  duration-150',
+          isDragging ? 'opacity-100' : 'opacity-0',
+        ]}
+      ></span>
     </button>
   </ContextMenuTrigger>
   {#if !readonly}
     <ContextMenuContent>
-      <ContextMenuItem onclick={() => onNew('entity', node.path)}>
+      <ContextMenuItem onclick={onNew('entity', node.path)}>
         <span class="i-ic-baseline-add-circle"></span>
         New entity
       </ContextMenuItem>
-      <ContextMenuItem onclick={() => onNew('folder', node.path)}>
+      <ContextMenuItem onclick={onNew('folder', node.path)}>
         <span class="i-ic-baseline-folder"></span>
         New folder
       </ContextMenuItem>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
index a15e822..ac87369 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-list.svelte
@@ -100,8 +100,7 @@
   };
 
   const handleAdd = (name: string) => {
-    manager.add({
-      id: name,
+    const id = manager.add({
       name,
       path: `./scenes/${name}.ts`,
       subScenes: [],
@@ -109,7 +108,7 @@
       systems: [],
       entities: [],
     });
-    manager.rootScenes = [...manager.rootScenes, name];
+    manager.rootScenes = [...manager.rootScenes, id];
   };
 
   const toggleExpand = (id: string, force?: boolean) => {
@@ -146,9 +145,14 @@
       {/if}
       <div
         aria-hidden="true"
-        class="{isSelf ? 'opacity-40' : ''} {isDropOn
-          ? 'ring-2 ring-inset ring-primary rounded-sm'
-          : ''}"
+        class={[
+          isSelf ? 'opacity-40' : '',
+          isDropOn ? 'ring-2 ring-inset ring-primary rounded-sm' : '',
+          selected === scene.id
+            ? 'bg-neutral-700 text-neutral-100'
+            : 'text-neutral-300 hover:bg-neutral-800',
+          'transition-colors',
+        ]}
         draggable="true"
         ondragstart={(e) => {
           dragSceneId = scene.id;
@@ -180,7 +184,7 @@
         <SceneRow
           {handle}
           {depth}
-          isSelected={selected === scene.id}
+          isDragging={dragSceneId === scene.id}
           isExpanded={expandedSceneItems.has(scene.id)}
           onSelect={() => (selected = scene.id)}
           onToggleExpand={() => toggleExpand(scene.id)}
@@ -254,7 +258,7 @@
       dropTarget = null;
     }}
   >
-    {#each rootScenes as scene (scene)}
+    {#each rootScenes as scene (scene.id)}
       {@render sceneRow(scene, 0)}
     {/each}
   </div>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
index bc9f3cb..4129fbc 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
@@ -13,8 +13,8 @@
 
   interface Props {
     handle: SceneHandle;
-    isSelected: boolean;
     depth?: number;
+    isDragging?: boolean;
     isExpanded?: boolean;
     onSelect: () => void;
     onToggleExpand?: () => void;
@@ -22,8 +22,8 @@
 
   const {
     handle,
-    isSelected,
     depth = 0,
+    isDragging = false,
     isExpanded = false,
     onSelect,
     onToggleExpand,
@@ -85,11 +85,7 @@
 
 <ContextMenu>
   <ContextMenuTrigger>
-    <div
-      class="flex w-full items-center transition-colors
-        {isSelected ? 'bg-neutral-700 text-neutral-100' : 'text-neutral-300 hover:bg-neutral-800'}"
-      style="padding-left: {paddingLeft}px"
-    >
+    <div class="flex w-full items-center" style="padding-left: {paddingLeft}px">
       {#if $scene.subScenes.length > 0}
         <button
           class="shrink-0 px-1 py-1 hover:text-foreground"
@@ -105,7 +101,7 @@
       {:else}
         <span class="w-3 h-3 shrink-0 mx-1"></span>
       {/if}
-      <button class="flex flex-1 items-center gap-1.5 py-1 pr-2 min-w-0" onclick={onSelect}>
+      <button class="flex flex-1 items-center gap-1.5 py-1 pr-2 min-w-0 group" onclick={onSelect}>
         <span class="i-clarity-picture-solid w-3.5 h-3.5 shrink-0 text-indigo-400"></span>
         <span class="flex-1 truncate text-left text-xs">{$scene.name}</span>
         {#if isDefault}
@@ -116,6 +112,12 @@
         {#if isActive}
           <span class="w-2 h-2 rounded-full shrink-0 bg-green-400" title="Active"></span>
         {/if}
+        <span
+          class={[
+            'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator group-hover:opacity-100  duration-150',
+            isDragging ? 'opacity-100' : 'opacity-0',
+          ]}
+        ></span>
       </button>
     </div>
   </ContextMenuTrigger>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte b/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte
index 4dc2d8d..1ab7d65 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/systems/dialog-add-scene-system.svelte
@@ -9,12 +9,12 @@
     onConfirm: (systemId: string) => void;
   }
 
-  let { open, systems, onConfirm }: Props = $props();
+  let { open = $bindable(), systems, onConfirm }: Props = $props();
 </script>
 
 <DialogSelect
   title="Add System to Scene"
   options={systems.map((sys) => ({ label: sys.name, value: sys.id }))}
-  {open}
+  bind:open
   {onConfirm}
 />
diff --git a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
index 93a1898..0cefe1c 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
@@ -51,7 +51,7 @@
   };
 </script>
 
-<DialogAddSceneSystem open={addOpen} systems={availableSystems} onConfirm={handleAdd} />
+<DialogAddSceneSystem bind:open={addOpen} systems={availableSystems} onConfirm={handleAdd} />
 
 <div
   class="flex items-center justify-between px-2 py-1 border-b border-border/50 text-muted-foreground"
@@ -90,6 +90,6 @@
   {/each}
 
   {#if $systems.length === 0}
-    <div class="py-6 text-center text-xs text-muted-foreground">No systems — use + to add one.</div>
+    <div class="py-6 text-center text-xs text-muted-foreground">No systems - use + to add one.</div>
   {/if}
 </div>
diff --git a/src/lib/components/Widget/ecs-tree/systems/system.items.ts b/src/lib/components/Widget/ecs-tree/systems/system.items.ts
index 600902c..876bff3 100644
--- a/src/lib/components/Widget/ecs-tree/systems/system.items.ts
+++ b/src/lib/components/Widget/ecs-tree/systems/system.items.ts
@@ -6,4 +6,6 @@ export const SYSTEM_ITEMS: PackageItems = {
     color: 'text-amber-400',
   },
   addTooltip: 'Add to active scene',
+  disableAddTooltipNotSelected: 'No active scene',
+  disableAddTooltipAlreadyAdded: 'The active scene already had this system',
 };
diff --git a/src/lib/components/Widget/ecs-tree/types.ts b/src/lib/components/Widget/ecs-tree/types.ts
index 7ed5042..c8c5a46 100644
--- a/src/lib/components/Widget/ecs-tree/types.ts
+++ b/src/lib/components/Widget/ecs-tree/types.ts
@@ -4,6 +4,8 @@ export interface PackageItems {
     color: string;
   };
   addTooltip: string;
+  disableAddTooltipNotSelected: string;
+  disableAddTooltipAlreadyAdded: string;
 }
 
 export type TreeEntity = { kind: 'entity'; id: string; scene?: string };
diff --git a/src/lib/components/Widget/ecs-tree/utils.ts b/src/lib/components/Widget/ecs-tree/utils.ts
index 10da96b..0b4b720 100644
--- a/src/lib/components/Widget/ecs-tree/utils.ts
+++ b/src/lib/components/Widget/ecs-tree/utils.ts
@@ -11,7 +11,14 @@ export const resolveParentPath = (path: string): string => {
 export function buildTree(
   entities: (Entity & { scene?: string })[],
   extraFolderPaths: Iterable<string> = [],
+  search?: string,
 ): TreeNode[] {
+  if (search) {
+    entities = entities.filter((e) => e.id.includes(search));
+    extraFolderPaths = Array.from(extraFolderPaths).filter((p) =>
+      p.split('/').at(-1)?.includes(search),
+    );
+  }
   const folderMap = new Map<string, TreeFolder>();
   const root: TreeNode[] = [];
 
diff --git a/src/lib/components/dialogs/base-dialog.svelte b/src/lib/components/dialogs/base-dialog.svelte
index bead1a8..2075e90 100644
--- a/src/lib/components/dialogs/base-dialog.svelte
+++ b/src/lib/components/dialogs/base-dialog.svelte
@@ -17,6 +17,7 @@
     children?: Snippet<[confirm: () => void, cancel: () => void]>;
     confirmText?: string;
     cancelText?: string;
+    confirmDisabled?: boolean;
     onOpenChange?: (open: boolean) => void;
     onConfirm?: (...args: any[]) => void;
   }
@@ -28,6 +29,7 @@
     children,
     confirmText,
     cancelText,
+    confirmDisabled,
     onOpenChange,
     onConfirm,
   }: Props = $props();
@@ -59,7 +61,7 @@
     {@render children?.(confirm, cancel)}
     <DialogFooter>
       <Button variant="ghost" onclick={cancel}>{cancelText ?? 'Cancel'}</Button>
-      <Button onclick={confirm}>{confirmText ?? 'Confirm'}</Button>
+      <Button disabled={confirmDisabled} onclick={confirm}>{confirmText ?? 'Confirm'}</Button>
     </DialogFooter>
   </DialogContent>
 </Dialog>
diff --git a/src/lib/components/dialogs/input-dialog.svelte b/src/lib/components/dialogs/input-dialog.svelte
index 0b87d75..8087d9e 100644
--- a/src/lib/components/dialogs/input-dialog.svelte
+++ b/src/lib/components/dialogs/input-dialog.svelte
@@ -9,6 +9,7 @@
     children?: Snippet<[confirm: () => void, cancel: () => void]>;
     confirmText?: string;
     cancelText?: string;
+    confirmDisabled?: boolean;
     onOpenChange?: (open: boolean) => void;
     reset?: () => void;
     onConfirm?: (...args: any[]) => void;
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
index f7db975..9225922 100644
--- a/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -20,7 +20,7 @@
   data-inset={inset}
   data-variant={variant}
   class={cn(
-    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-3 py-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-3 py-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     className,
   )}
   {...restProps}
diff --git a/src/lib/server/git/git.ts b/src/lib/server/git/git.ts
index 4583737..b99ce7b 100644
--- a/src/lib/server/git/git.ts
+++ b/src/lib/server/git/git.ts
@@ -3,7 +3,7 @@ import { resolve } from 'path';
 
 import { env } from '$env/dynamic/private';
 
-import { generateKey } from '@utils/string';
+import { generateKey } from '@utils-server/string';
 
 export class Git {
   private readonly _rootPath: string;
diff --git a/src/lib/server/session/project/project-functions.ts b/src/lib/server/session/project/project-functions.ts
index 85a511e..1df1e9c 100644
--- a/src/lib/server/session/project/project-functions.ts
+++ b/src/lib/server/session/project/project-functions.ts
@@ -1,5 +1,6 @@
 import { SESSION_PROJECT_HEADER } from '@utils/const';
-import { generateKey } from '@utils/string';
+
+import { generateKey } from '@utils-server/string';
 
 import type { Session } from '../session.type';
 import { projectStore } from './project.store';
diff --git a/src/lib/server/session/session-functions.ts b/src/lib/server/session/session-functions.ts
index c6d6285..ab417d4 100644
--- a/src/lib/server/session/session-functions.ts
+++ b/src/lib/server/session/session-functions.ts
@@ -1,7 +1,8 @@
 import { type Session as SvelteSession } from 'svelte-kit-sessions';
 
 import { Exception } from '@utils/exception';
-import { generateKey } from '@utils/string';
+
+import { generateKey } from '@utils-server/string';
 
 import { PUBLIC_PATHS } from './session.const';
 import { sessionStore } from './session.store';
diff --git a/src/lib/server/session/session-handle.ts b/src/lib/server/session/session-handle.ts
index b6a3593..d784773 100644
--- a/src/lib/server/session/session-handle.ts
+++ b/src/lib/server/session/session-handle.ts
@@ -3,7 +3,7 @@ import { sveltekitSessionHandle } from 'svelte-kit-sessions';
 
 import { env } from '$env/dynamic/private';
 
-import { generateKey } from '@utils/string';
+import { generateKey } from '@utils-server/string';
 
 import { isPublicPath, isSessionExist, resetSession } from './session-functions';
 
diff --git a/src/lib/server/utils/string.ts b/src/lib/server/utils/string.ts
new file mode 100644
index 0000000..08c33af
--- /dev/null
+++ b/src/lib/server/utils/string.ts
@@ -0,0 +1,6 @@
+import crypto from 'crypto';
+
+export const generateKey = (size = 50) => {
+  const buffer = crypto.randomBytes(size);
+  return buffer.toString('base64url').substring(0, size);
+};
diff --git a/src/lib/utils/format.ts b/src/lib/utils/format.ts
index 5d45c6e..52d7925 100644
--- a/src/lib/utils/format.ts
+++ b/src/lib/utils/format.ts
@@ -20,6 +20,10 @@ class WordList {
       )
       .join('');
   }
+
+  toSnake() {
+    return this.words.join('_');
+  }
 }
 
 const toWords = (str: string): string[] => {
diff --git a/src/lib/utils/string.ts b/src/lib/utils/string.ts
index 1a1f826..162272f 100644
--- a/src/lib/utils/string.ts
+++ b/src/lib/utils/string.ts
@@ -1,8 +1,18 @@
-import crypto from 'crypto';
+export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
-export const generateKey = (size = 50) => {
-  const buffer = crypto.randomBytes(size);
-  return buffer.toString('base64url').substring(0, size);
+export const randomString = (
+  nb: number,
+  {
+    numbers = true,
+    lowers = true,
+    uppers = false,
+    specials = false,
+  }: { numbers?: boolean; lowers?: boolean; uppers?: boolean; specials?: boolean } = {},
+) => {
+  let chars = '';
+  if (numbers) chars += '0123456789';
+  if (lowers) chars += 'abcdefghijklmnopqrstuvwxyz';
+  if (uppers) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  if (specials) chars += '!@#$%^&*()_+~`|}{[]:;?><,./-=';
+  return [...Array(nb)].map(() => chars[Math.floor(Math.random() * chars.length)]).join('');
 };
-
-export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

From ba445bee15dbbdc9d4dba554627bf63f5ff10989 Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Tue, 2 Jun 2026 17:26:50 +0900
Subject: [PATCH 24/24] fix: issues and add libs and drag on scene systems

---
 src/lib/client/ecs/ecs-handler.ts             | 12 +++
 src/lib/client/ecs/index.ts                   |  4 +
 src/lib/client/ecs/library/library-handle.ts  | 40 ++++++++
 src/lib/client/ecs/library/library-manager.ts | 73 ++++++++++++++
 src/lib/client/ecs/library/library.type.ts    |  4 +
 .../entity/component/component-manager.ts     |  9 +-
 src/lib/client/ecs/transformers.ts            |  8 +-
 .../ecs-tree/libraries/libraries-tab.svelte   | 12 +++
 .../ecs-tree/libraries/library.items.ts       | 11 +++
 .../ecs-tree/packages/package-row.svelte      | 55 ++++++-----
 .../ecs-tree/packages/package-tab.svelte      | 26 +++--
 .../scenes/entities/entity-tree-node.svelte   |  8 +-
 .../scenes/entities/entity-tree.svelte        |  1 +
 .../scenes/entities/folder-tree-node.svelte   | 19 +++-
 .../Widget/ecs-tree/scenes/scene-row.svelte   |  4 -
 .../Widget/ecs-tree/scenes/scenes-tab.svelte  |  4 +
 .../scenes/systems/scene-systems-list.svelte  | 99 +++++++++++++++++--
 src/lib/components/Widget/ecs-tree/types.ts   | 12 ++-
 .../components/Widget/ecs-tree/widget.svelte  |  5 +
 .../entity-inspector/component-row.svelte     |  1 -
 .../dialog-component-selector.svelte          |  2 +-
 21 files changed, 348 insertions(+), 61 deletions(-)
 create mode 100644 src/lib/client/ecs/library/library-handle.ts
 create mode 100644 src/lib/client/ecs/library/library-manager.ts
 create mode 100644 src/lib/client/ecs/library/library.type.ts
 create mode 100644 src/lib/components/Widget/ecs-tree/libraries/libraries-tab.svelte
 create mode 100644 src/lib/components/Widget/ecs-tree/libraries/library.items.ts

diff --git a/src/lib/client/ecs/ecs-handler.ts b/src/lib/client/ecs/ecs-handler.ts
index 1fb3ac6..f5a4eab 100644
--- a/src/lib/client/ecs/ecs-handler.ts
+++ b/src/lib/client/ecs/ecs-handler.ts
@@ -1,5 +1,6 @@
 import {
   componentsTransformer,
+  librariesTransformer,
   scenesTransformer,
   systemsTransformer,
 } from '$lib/client/ecs/transformers';
@@ -7,6 +8,8 @@ import type { Project } from '$lib/client/project';
 
 import { ComponentHandle } from './component/component-handle';
 import { ComponentManager } from './component/component-manager';
+import { LibraryHandle } from './library/library-handle';
+import { LibraryManager } from './library/library-manager';
 import { EntityComponentManager } from './scene/entity/component/component-manager';
 import { ComponentParamHandle } from './scene/entity/component/component-param-handle';
 import { ComponentParamManager } from './scene/entity/component/component-param-manager';
@@ -24,12 +27,15 @@ export class ECSHandler {
   private _sceneManager: SceneManager | undefined;
   private _componentManager: ComponentManager | undefined;
   private _systemManager: SystemManager | undefined;
+  private _libraryManager: LibraryManager | undefined;
 
   static reset() {
     ComponentHandle.reset();
     ComponentManager.reset();
     SystemManager.reset();
     SystemHandle.reset();
+    LibraryManager.reset();
+    LibraryHandle.reset();
     SceneHandle.reset();
     SceneManager.reset();
     SceneSystemManager.reset();
@@ -58,6 +64,7 @@ export class ECSHandler {
 
     this._componentManager = new ComponentManager(componentsTransformer(components));
     this._systemManager = new SystemManager(systemsTransformer(systems));
+    this._libraryManager = new LibraryManager(librariesTransformer(save));
     // Scene Manager needs others managers to be initialized
     this._sceneManager = new SceneManager(this, scenesTransformer(save), ['default'], 'default');
   }
@@ -76,4 +83,9 @@ export class ECSHandler {
     if (!this._systemManager) throw new Error('ECS handler not initialized');
     return this._systemManager;
   }
+
+  get libraries(): LibraryManager {
+    if (!this._libraryManager) throw new Error('ECS handler not initialized');
+    return this._libraryManager;
+  }
 }
diff --git a/src/lib/client/ecs/index.ts b/src/lib/client/ecs/index.ts
index be1c475..b1e94f8 100644
--- a/src/lib/client/ecs/index.ts
+++ b/src/lib/client/ecs/index.ts
@@ -4,6 +4,10 @@ export type { ComponentHandle } from './component/component-handle';
 export type { ComponentManager } from './component/component-manager';
 export type { Component, ComponentParam } from './component/component.type';
 
+export type { LibraryManager } from './library/library-manager';
+export type { LibraryHandle } from './library/library-handle';
+export type { Library } from './library/library.type';
+
 export type { SystemManager } from './system/system-manager';
 export type { SystemHandle } from './system/system-handle';
 export type { System } from './system/system.type';
diff --git a/src/lib/client/ecs/library/library-handle.ts b/src/lib/client/ecs/library/library-handle.ts
new file mode 100644
index 0000000..6c2c9fb
--- /dev/null
+++ b/src/lib/client/ecs/library/library-handle.ts
@@ -0,0 +1,40 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import { resolveStore } from '../utils';
+import type { LibraryManager } from './library-manager';
+import type { Library } from './library.type';
+
+const _storage = writable<Record<string, Writable<Library>>>({});
+
+export class LibraryHandle {
+  private _manager: LibraryManager;
+  public readonly id: string;
+  private readonly _store: Writable<Library>;
+
+  static reset() {
+    _storage.set({});
+  }
+
+  constructor(manager: LibraryManager, library: Library) {
+    this._manager = manager;
+    this.id = library.id;
+
+    this._store = resolveStore(_storage, this.id, library);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  get data() {
+    return get(this._store);
+  }
+
+  update(library: Partial<Library>) {
+    this._store.set({ ...get(this._store), ...library });
+  }
+
+  delete() {
+    this._manager.delete(this.id);
+  }
+}
diff --git a/src/lib/client/ecs/library/library-manager.ts b/src/lib/client/ecs/library/library-manager.ts
new file mode 100644
index 0000000..ef7599c
--- /dev/null
+++ b/src/lib/client/ecs/library/library-manager.ts
@@ -0,0 +1,73 @@
+import { type Unsubscriber, get, writable } from 'svelte/store';
+
+import { resetSubscriptions } from '../utils';
+import { LibraryHandle } from './library-handle';
+import type { Library } from './library.type';
+
+const _storage = writable<Library[]>([]);
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
+export class LibraryManager {
+  static reset() {
+    _storage.set([]);
+    resetSubscriptions(_subscriptions);
+  }
+
+  constructor(libraries: Library[]) {
+    _storage.set(libraries);
+  }
+
+  get store() {
+    return _storage;
+  }
+
+  get data() {
+    return get(_storage);
+  }
+
+  add(library: { name: string }): string {
+    const libraries = get(_storage);
+    libraries.push({ ...library, id: library.name });
+    _storage.set(libraries);
+    return library.name;
+  }
+
+  get(id: string): LibraryHandle {
+    const library = get(_storage).find((library) => library.id === id);
+    if (!library) throw new Error(`Library with id ${id} not found`);
+    const handle = new LibraryHandle(this, library);
+
+    this._subscribe(id, handle);
+
+    return handle;
+  }
+
+  delete(id: string) {
+    const libraries = get(_storage);
+    _storage.set(libraries.filter((library) => library.id !== id));
+
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
+  }
+
+  private _subscribe(id: string, handle: LibraryHandle) {
+    setTimeout(() => {
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((library) => this._update(id, library));
+      _subscriptions.set(subscriptions);
+    }, 0);
+  }
+
+  private _update(id: string, library: Library) {
+    const libraries = get(_storage);
+    const index = libraries.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    libraries[index] = library;
+    _storage.set(libraries);
+  }
+}
diff --git a/src/lib/client/ecs/library/library.type.ts b/src/lib/client/ecs/library/library.type.ts
new file mode 100644
index 0000000..4c3389c
--- /dev/null
+++ b/src/lib/client/ecs/library/library.type.ts
@@ -0,0 +1,4 @@
+export interface Library {
+  id: string;
+  name: string;
+}
diff --git a/src/lib/client/ecs/scene/entity/component/component-manager.ts b/src/lib/client/ecs/scene/entity/component/component-manager.ts
index a205e86..f40514b 100644
--- a/src/lib/client/ecs/scene/entity/component/component-manager.ts
+++ b/src/lib/client/ecs/scene/entity/component/component-manager.ts
@@ -41,7 +41,14 @@ export class EntityComponentManager {
 
   add(component: string) {
     const components = get(this._store);
-    components[component] = {};
+    const manifest = this.entity.manager.scene.manager.ecs.components.get(component).data;
+    components[component] = {
+      ...Object.fromEntries(
+        manifest.params
+          .filter((param) => param.default)
+          .map((param) => [param.name, param.default as string]),
+      ),
+    };
     this._store.set(components);
   }
 
diff --git a/src/lib/client/ecs/transformers.ts b/src/lib/client/ecs/transformers.ts
index 1c7e857..031dceb 100644
--- a/src/lib/client/ecs/transformers.ts
+++ b/src/lib/client/ecs/transformers.ts
@@ -1,4 +1,4 @@
-import type { Component, Scene, System } from '$lib/client/ecs';
+import type { Component, Library, Scene, System } from '$lib/client/ecs';
 import type { ComponentPackage, SystemPackage } from '$lib/server/project/package';
 
 import type { Save } from '@utils/types';
@@ -18,6 +18,12 @@ export const systemsTransformer = (systems: SystemPackage[]): System[] =>
     path: system.save.path,
   }));
 
+export const librariesTransformer = (save: Save): Library[] =>
+  save.libraries.map((lib) => ({
+    id: lib.path,
+    name: lib.name,
+  }));
+
 export const scenesTransformer = (save: Save): Scene[] => [
   {
     id: 'default',
diff --git a/src/lib/components/Widget/ecs-tree/libraries/libraries-tab.svelte b/src/lib/components/Widget/ecs-tree/libraries/libraries-tab.svelte
new file mode 100644
index 0000000..641b980
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/libraries/libraries-tab.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import PackageTab from '../packages/package-tab.svelte';
+  import type { LibraryManager } from '$lib/client/ecs';
+
+  interface Props {
+    manager: LibraryManager;
+  }
+
+  const { manager }: Props = $props();
+</script>
+
+<PackageTab type="library" {manager} />
diff --git a/src/lib/components/Widget/ecs-tree/libraries/library.items.ts b/src/lib/components/Widget/ecs-tree/libraries/library.items.ts
new file mode 100644
index 0000000..b10e56c
--- /dev/null
+++ b/src/lib/components/Widget/ecs-tree/libraries/library.items.ts
@@ -0,0 +1,11 @@
+import type { PackageItems } from '../types';
+
+export const LIBRARY_ITEMS: PackageItems = {
+  icon: {
+    name: 'i-ic-round-library-books',
+    color: 'text-teal-400',
+  },
+  addTooltip: null,
+  disableAddTooltipNotSelected: null,
+  disableAddTooltipAlreadyAdded: null,
+};
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
index 452fcb3..73ee111 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
@@ -10,12 +10,14 @@
   import TooltipText from '$lib/components/ui/tooltip-text/tooltip-text.svelte';
   import { type PackageItems } from '../types';
   import { COMPONENT_ITEMS } from '../components/component.items';
+  import { LIBRARY_ITEMS } from '../libraries/library.items';
   import { SYSTEM_ITEMS } from '../systems/system.items';
+  import type { Package } from '../types';
   import { DeleteConfirmDialog } from '$lib/components/dialogs';
   import { capitalize } from '@utils/string';
-  import type { ComponentHandle, SystemHandle } from '$lib/client/ecs';
+  import type { ComponentHandle, SystemHandle, LibraryHandle } from '$lib/client/ecs';
   import { useProject } from '$lib/client/project';
-  import { get } from 'svelte/store';
+  import { get, type Writable } from 'svelte/store';
 
   type Props =
     | {
@@ -25,14 +27,18 @@
     | {
         type: 'system';
         handle: SystemHandle;
+      }
+    | {
+        type: 'library';
+        handle: LibraryHandle;
       };
 
-  const ITEMS = { component: COMPONENT_ITEMS, system: SYSTEM_ITEMS };
+  const ITEMS = { component: COMPONENT_ITEMS, system: SYSTEM_ITEMS, library: LIBRARY_ITEMS };
 
   const { type, handle }: Props = $props();
   const { ecs } = useProject();
 
-  const pkg = $derived(handle.store);
+  const pkg = $derived<Writable<Package>>(handle.store);
 
   const activeScene = $derived(ecs.scenes.active);
   const activeSceneData = $derived($activeScene?.store);
@@ -62,7 +68,6 @@
   let deleteOpen = $state(false);
 
   const onAdd = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     if (type === 'component') {
       const entity = ecs.scenes.activeData.entities.selectedData;
@@ -74,7 +79,6 @@
   };
 
   const onOpenCode = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     // @todo handle open code editor
   };
@@ -85,7 +89,6 @@
   };
 
   const onDelete = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     deleteOpen = true;
   };
@@ -93,7 +96,7 @@
 
 <DeleteConfirmDialog
   type={capitalize(type)}
-  name={$pkg.name}
+  name={$pkg.name ?? $pkg.id}
   bind:open={deleteOpen}
   onConfirm={handleDelete}
 />
@@ -107,14 +110,18 @@
             <span class={['w-3.5 h-3.5 shrink-0', items.icon.name, items.icon.color]}></span>
             <span class="font-medium text-foreground flex-1 truncate text-xs">{$pkg.name}</span>
           </div>
-          <div class="mt-0.5 text-xs text-muted-foreground truncate pl-5">{$pkg.path}</div>
+          <div class="mt-0.5 text-xs text-muted-foreground truncate pl-5">
+            {$pkg.path ?? $pkg.id}
+          </div>
         </div>
         <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100">
-          <TooltipText text={tooltip}>
-            <Button disabled={!!disabled} variant="ghost" size="icon" onclick={onAdd}>
-              <span class="i-ic-baseline-add-circle text-green-400"></span>
-            </Button>
-          </TooltipText>
+          {#if tooltip}
+            <TooltipText text={tooltip}>
+              <Button disabled={!!disabled} variant="ghost" size="icon" onclick={onAdd}>
+                <span class="i-ic-baseline-add-circle text-green-400"></span>
+              </Button>
+            </TooltipText>
+          {/if}
           <Button
             variant="ghost"
             size="icon"
@@ -128,15 +135,17 @@
     </div>
   </ContextMenuTrigger>
   <ContextMenuContent>
-    <ContextMenuItem onclick={onOpenCode}>
-      <span class="i-ic-baseline-open-in-new"></span>
-      Open code
-    </ContextMenuItem>
-    <ContextMenuItem disabled={!!disabled} onclick={onAdd}>
-      <span class="i-ic-baseline-add-circle text-green-400"></span>
-      {items.addTooltip}
-    </ContextMenuItem>
-    <ContextMenuSeparator />
+    {#if type !== 'library'}
+      <ContextMenuItem onclick={onOpenCode}>
+        <span class="i-ic-baseline-open-in-new"></span>
+        Open code
+      </ContextMenuItem>
+      <ContextMenuItem disabled={!!disabled} onclick={onAdd}>
+        <span class="i-ic-baseline-add-circle text-green-400"></span>
+        {items.addTooltip}
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+    {/if}
     <ContextMenuItem variant="destructive" onclick={onDelete}>
       <span class="i-ic-baseline-delete"></span>
       Delete
diff --git a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
index 898c289..f89eb6e 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
@@ -17,7 +17,9 @@
   } from '$lib/components/ui/input-group';
   import { ScrollArea } from '$lib/components/ui/scroll-area';
   import { capitalize } from '@utils/string';
-  import type { ComponentManager, SystemManager } from '$lib/client/ecs';
+  import type { ComponentManager, SystemManager, LibraryManager } from '$lib/client/ecs';
+  import type { Writable } from 'svelte/store';
+  import type { Package } from '../types';
 
   type Props =
     | {
@@ -27,21 +29,25 @@
     | {
         type: 'system';
         manager: SystemManager;
+      }
+    | {
+        type: 'library';
+        manager: LibraryManager;
       };
 
   const { type, manager }: Props = $props();
 
-  const packages = $derived(manager.store);
+  const packages = $derived<Writable<Package[]>>(manager.store);
 
   const nameCapitalized = $derived(capitalize(type));
-  const namePlural = $derived(type + 's');
+  const namePlural = $derived(type === 'library' ? 'libraries' : type + 's');
 
   let query = $state('');
 
   const sorted = $derived(
     $packages
-      .filter((c) => !query || c.name.toLowerCase().includes(query.toLowerCase()))
-      .sort((a, b) => a.name.localeCompare(b.name)),
+      .filter((c) => !query || (c.name ?? c.id).toLowerCase().includes(query.toLowerCase()))
+      .sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)),
   );
 
   let createOpen = $state(false);
@@ -100,10 +106,12 @@
         {/snippet}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onclick={() => (createOpen = true)}>
-          <span class="i-ic-baseline-note-add mr-2 text-sm"></span>
-          Create
-        </DropdownMenuItem>
+        {#if type !== 'library'}
+          <DropdownMenuItem onclick={() => (createOpen = true)}>
+            <span class="i-ic-baseline-note-add mr-2 text-sm"></span>
+            Create
+          </DropdownMenuItem>
+        {/if}
         <DropdownMenuItem onclick={() => (importOpen = true)}>
           <span class="i-ic-baseline-file-upload mr-2 text-sm"></span>
           Import
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
index e42d1e5..1643716 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
@@ -40,7 +40,6 @@
   const isDragging = $derived(drag.dragging?.type === 'entity' && drag.dragging.id === $entity.id);
 
   const onSelect = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     handle.setSelected();
   };
@@ -54,13 +53,11 @@
   };
 
   const onEdit = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     editOpen = true;
   };
 
   const onDelete = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     deleteOpen = true;
   };
@@ -122,8 +119,9 @@
       </span>
       <span
         class={[
-          'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator group-hover:opacity-100  duration-150',
-          isDragging ? 'opacity-100' : 'opacity-0',
+          'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator duration-150',
+          isDragging && !readonly ? 'opacity-100' : 'opacity-0',
+          !readonly ? 'group-hover:opacity-100' : '',
         ]}
       >
       </span>
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
index 38dfc0b..102fd5d 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
@@ -61,6 +61,7 @@
   $effect.pre(() => {
     const id = manager.scene.id;
     if (id !== folderSceneId) {
+      folders.clear();
       untrack(() => {
         folderSceneId = id;
         $entities.forEach((e) => folderPaths(e.treePath).forEach((p) => folders.add(p)));
diff --git a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
index b4510c6..7bc7348 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
@@ -15,6 +15,7 @@
   import DialogDeleteEntity from './dialog-delete-entity.svelte';
   import DialogEditEntity from './dialog-edit-entity.svelte';
   import { resolveParentPath } from '../../utils';
+  import { useProject } from '$lib/client/project';
 
   interface Props {
     manager: SceneEntityManager;
@@ -38,6 +39,8 @@
     onNew = () => () => {},
   }: Props = $props();
 
+  const { ecs } = useProject();
+
   const drag = getContext<EntityDragContext>(ENTITY_DRAG_KEY);
 
   const entities = $derived(manager.store);
@@ -78,13 +81,11 @@
   };
 
   const onEdit = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     editOpen = true;
   };
 
   const onDelete = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     deleteOpen = true;
   };
@@ -144,8 +145,9 @@
       <span class="flex-1 truncate text-left text-xs">{node.name}</span>
       <span
         class={[
-          'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator group-hover:opacity-100  duration-150',
-          isDragging ? 'opacity-100' : 'opacity-0',
+          'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator duration-150',
+          isDragging && !readonly ? 'opacity-100' : 'opacity-0',
+          !readonly ? 'group-hover:opacity-100' : '',
         ]}
       ></span>
     </button>
@@ -176,7 +178,14 @@
 {#if expandedFolders.has(node.path)}
   {#each node.children as child (child.kind === 'entity' ? child.id : child.path)}
     {#if child.kind === 'entity'}
-      <EntityTreeNode handle={manager.get(child.id)} {readonly} depth={depth + 1} {onNew} />
+      <EntityTreeNode
+        handle={child.scene
+          ? ecs.scenes.get(child.scene).entities.get(child.id)
+          : manager.get(child.id)}
+        {readonly}
+        depth={depth + 1}
+        {onNew}
+      />
     {:else}
       <FolderTreeNode
         {manager}
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
index 4129fbc..e5eae4e 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scene-row.svelte
@@ -43,19 +43,16 @@
   const paddingLeft = $derived(8 + depth * 12);
 
   const onSetActive = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     handle.setActive();
   };
 
   const onSetDefault = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     handle.setDefault();
   };
 
   const onUpdate = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     editOpen = true;
   };
@@ -65,7 +62,6 @@
   };
 
   const onDelete = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     deleteOpen = true;
   };
diff --git a/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte b/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
index eaa3275..01544db 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/scenes-tab.svelte
@@ -10,6 +10,10 @@
   const { manager }: Props = $props();
 
   let selected = $state<string | null>(manager.defaultData);
+
+  manager.store.subscribe((scenes) => {
+    if (!scenes.find((scene) => scene.id === selected)) selected = null;
+  });
 </script>
 
 <div class="flex flex-1 min-h-0">
diff --git a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
index 0cefe1c..acfe1ba 100644
--- a/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
+++ b/src/lib/components/Widget/ecs-tree/scenes/systems/scene-systems-list.svelte
@@ -8,8 +8,9 @@
   } from '$lib/components/ui/context-menu';
   import { Button } from '$lib/components/ui/button';
   import DialogAddSceneSystem from './dialog-add-scene-system.svelte';
-  import { type SceneSystemManager } from '$lib/client/ecs';
+  import type { SceneSystemManager, System } from '$lib/client/ecs';
   import { useProject } from '$lib/client/project';
+  import type { Writable } from 'svelte/store';
 
   interface Props {
     manager: SceneSystemManager;
@@ -20,35 +21,60 @@
   const { ecs } = useProject();
 
   const systems = $derived(manager.store);
-  const allSystems = $derived(ecs.systems.store);
+  const allSystems = $derived<Writable<System[]>>(ecs.systems.store);
 
   const availableSystems = $derived($allSystems.filter((s) => !$systems.includes(s.name)));
 
   let addOpen = $state(false);
 
+  let dragId = $state<string | null>(null);
+  let dropTarget = $state<{ id: string; pos: 'before' | 'after' } | null>(null);
+
   const handleAdd = (systemName: string) => {
     manager.add(systemName);
   };
 
+  const handleDrop = (targetId: string) => {
+    if (!dragId || !dropTarget || dragId === targetId) {
+      dragId = null;
+      dropTarget = null;
+      return;
+    }
+    const { pos } = dropTarget;
+    const sys = $systems;
+    sys.splice(sys.indexOf(dragId), 1);
+    sys.splice(sys.indexOf(targetId) + (pos === 'after' ? 1 : 0), 0, dragId);
+    manager.store.set($systems);
+    dragId = null;
+    dropTarget = null;
+  };
+
   const onDelete = (systemName: string) => (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     manager.delete(systemName);
   };
 
   const onOpenCode = (systemName: string) => (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     // @todo open code editor
     console.log('open code', systemName);
   };
 
   const onOpenSystem = (systemName: string) => (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     // @todo open to systems tab
     console.log('open system', systemName);
   };
+
+  const isNext = (a: string | null, b: string | null, pos: 'before' | 'after') => {
+    if (!a || !b) return false;
+    if (a === b) return true;
+    const aIndex = $systems.indexOf(a);
+    const bIndex = $systems.indexOf(b);
+    if (Math.abs(aIndex - bIndex) > 1) return false;
+    if (pos === 'before') return aIndex < bIndex;
+    return aIndex > bIndex;
+  };
 </script>
 
 <DialogAddSceneSystem bind:open={addOpen} systems={availableSystems} onConfirm={handleAdd} />
@@ -63,13 +89,70 @@
 </div>
 
 <div class="py-0.5">
-  {#each $systems.sort() as sysName (sysName)}
+  {#each $systems as sysName (sysName)}
+    {@const isSelf = dragId === sysName}
+    {@const isDropBefore =
+      !isNext(dragId, sysName, 'before') &&
+      dropTarget?.id === sysName &&
+      dropTarget.pos === 'before'}
+    {@const isDropAfter =
+      !isNext(dragId, sysName, 'after') && dropTarget?.id === sysName && dropTarget.pos === 'after'}
+
     <ContextMenu>
-      <ContextMenuTrigger>
-        <div class="flex items-center gap-2 px-3 py-1.5 hover:bg-neutral-800">
+      <ContextMenuTrigger class="relative">
+        {#if isDropBefore}
+          <div
+            class="absolute -top-0.25 right-0 h-0.5 w-full bg-primary z-10 pointer-events-none"
+          ></div>
+        {/if}
+        <div
+          aria-hidden="true"
+          class={[
+            isSelf ? 'opacity-40' : '',
+            'transition-colors flex items-center gap-2 px-3 py-1.5 hover:bg-neutral-800 group',
+          ]}
+          draggable="true"
+          ondragstart={(e) => {
+            dragId = sysName;
+            e.dataTransfer!.effectAllowed = 'move';
+          }}
+          ondragend={() => {
+            dragId = null;
+            dropTarget = null;
+          }}
+          ondragover={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer!.dropEffect = 'move';
+            const { top, height } = (e.currentTarget as HTMLElement).getBoundingClientRect();
+            dropTarget = { id: sysName, pos: e.clientY - top < height * 0.5 ? 'before' : 'after' };
+          }}
+          ondragleave={(e) => {
+            if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+              if (dropTarget?.id === sysName) dropTarget = null;
+            }
+          }}
+          ondrop={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleDrop(sysName);
+          }}
+        >
           <span class="i-icomoon-free-steam w-3.5 h-3.5 shrink-0 text-amber-400"></span>
           <span class="flex-1 truncate text-xs text-foreground">{sysName}</span>
+          <span
+            class={[
+              'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator group-hover:opacity-100 duration-150 self-end',
+              isSelf ? 'opacity-100' : 'opacity-0',
+            ]}
+          >
+          </span>
         </div>
+        {#if isDropAfter}
+          <div
+            class="absolute -bottom-0.25 right-0 h-0.5 w-full bg-primary z-10 pointer-events-none"
+          ></div>
+        {/if}
       </ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuItem onclick={onOpenCode(sysName)}>
diff --git a/src/lib/components/Widget/ecs-tree/types.ts b/src/lib/components/Widget/ecs-tree/types.ts
index c8c5a46..571059b 100644
--- a/src/lib/components/Widget/ecs-tree/types.ts
+++ b/src/lib/components/Widget/ecs-tree/types.ts
@@ -3,9 +3,9 @@ export interface PackageItems {
     name: string;
     color: string;
   };
-  addTooltip: string;
-  disableAddTooltipNotSelected: string;
-  disableAddTooltipAlreadyAdded: string;
+  addTooltip: string | null;
+  disableAddTooltipNotSelected: string | null;
+  disableAddTooltipAlreadyAdded: string | null;
 }
 
 export type TreeEntity = { kind: 'entity'; id: string; scene?: string };
@@ -22,3 +22,9 @@ export interface EntityDragContext {
   dropOnEntity(entityId: string): void;
   dropOnRoot(): void;
 }
+
+export interface Package {
+  id: string;
+  name?: string;
+  path?: string;
+}
diff --git a/src/lib/components/Widget/ecs-tree/widget.svelte b/src/lib/components/Widget/ecs-tree/widget.svelte
index 39cf862..22d26a6 100644
--- a/src/lib/components/Widget/ecs-tree/widget.svelte
+++ b/src/lib/components/Widget/ecs-tree/widget.svelte
@@ -2,6 +2,7 @@
   import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
   import ScenesTab from './scenes/scenes-tab.svelte';
   import ComponentsTab from './components/components-tab.svelte';
+  import LibrariesTab from './libraries/libraries-tab.svelte';
   import SystemsTab from './systems/systems-tab.svelte';
   import { useProject } from '$lib/client/project';
 
@@ -21,6 +22,7 @@
     <TabsTrigger value="scenes" class="px-2 py-1 mx-2 my-1">Scenes</TabsTrigger>
     <TabsTrigger value="components" class="px-2 py-1 mx-2 my-1">Components</TabsTrigger>
     <TabsTrigger value="systems" class="px-2 py-1 mx-2 my-1">Systems</TabsTrigger>
+    <TabsTrigger value="libraries" class="px-2 py-1 mx-2 my-1">Libraries</TabsTrigger>
   </TabsList>
   <TabsContent value="scenes" class="flex-1 min-h-0">
     <ScenesTab manager={ecs.scenes} />
@@ -31,4 +33,7 @@
   <TabsContent value="systems" class="flex-1 min-h-0">
     <SystemsTab manager={ecs.systems} />
   </TabsContent>
+  <TabsContent value="libraries" class="flex-1 min-h-0">
+    <LibrariesTab manager={ecs.libraries} />
+  </TabsContent>
 </Tabs>
diff --git a/src/lib/components/Widget/entity-inspector/component-row.svelte b/src/lib/components/Widget/entity-inspector/component-row.svelte
index 20eff25..f72f225 100644
--- a/src/lib/components/Widget/entity-inspector/component-row.svelte
+++ b/src/lib/components/Widget/entity-inspector/component-row.svelte
@@ -16,7 +16,6 @@
   let deleteOpen = $state(false);
 
   const onDelete = (e: MouseEvent) => {
-    e.preventDefault();
     e.stopPropagation();
     deleteOpen = true;
   };
diff --git a/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte b/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte
index 39d6f1b..417fbe4 100644
--- a/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte
+++ b/src/lib/components/Widget/entity-inspector/dialog-component-selector.svelte
@@ -38,8 +38,8 @@
   };
 
   const handleSelect = (component: Component) => (e: MouseEvent) => {
-    e.stopPropagation();
     e.preventDefault();
+    e.stopPropagation();
     onSelect(component);
     close();
   };