From ee9d82e946171cf2ffab1e09c3c1bf00158cbb5a Mon Sep 17 00:00:00 2001
From: Exelo <exelo.corp@gmail.com>
Date: Sun, 7 Jun 2026 17:18:49 +0900
Subject: [PATCH] feat: add create and import package functionality

---
 .../client/ecs/component/component-manager.ts | 38 +++++++++++++++----
 src/lib/client/ecs/system/system-manager.ts   | 38 +++++++++++++++----
 src/lib/client/ecs/transformers.ts            | 38 +++++++++++--------
 src/lib/client/sync-file-system/sfs.ts        |  2 +
 .../ecs-tree/dialogs/dialog-name.svelte       | 15 ++++++--
 .../packages/dialog-create-package.svelte     |  8 ++--
 .../ecs-tree/packages/package-row.svelte      |  3 +-
 .../ecs-tree/packages/package-tab.svelte      | 38 ++++++++++++-------
 src/lib/components/dialogs/base-dialog.svelte | 21 ++++++++--
 .../components/dialogs/input-dialog.svelte    |  3 +-
 .../server/project/package/package-handler.ts |  4 +-
 11 files changed, 150 insertions(+), 58 deletions(-)

diff --git a/src/lib/client/ecs/component/component-manager.ts b/src/lib/client/ecs/component/component-manager.ts
index d00c912..ec84b2a 100644
--- a/src/lib/client/ecs/component/component-manager.ts
+++ b/src/lib/client/ecs/component/component-manager.ts
@@ -1,6 +1,9 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
-import { getId, resetSubscriptions } from '../utils';
+import { useProject } from '$lib/client/project';
+
+import { componentTransformer, componentsTransformer } from '../transformers';
+import { resetSubscriptions } from '../utils';
 import { ComponentHandle } from './component-handle';
 import type { Component } from './component.type';
 
@@ -26,12 +29,27 @@ export class ComponentManager {
     return get(_storage);
   }
 
-  add(component: Omit<Component, 'id' | 'path'> & Partial<Pick<Component, 'path'>>) {
-    const components = get(_storage);
-    const id = getId(this.data, component.name);
-    components.push({ ...component, id, path: component.path ?? `components/${id}.ts` });
-    _storage.set(components);
-    return id;
+  async create(name: string) {
+    const { actions, fs } = useProject();
+    const component = await actions.package.createComponent({ componentName: name });
+    this._add(componentTransformer(component));
+    const dir = await fs.getDirectory();
+    await dir.readdir(true);
+  }
+
+  async import(names: [string, ...string[]]) {
+    const { actions, ecs, fs } = useProject();
+    await actions.package.addComponents({ componentNames: names });
+    await this.sync();
+    await ecs.components.sync();
+    const dir = await fs.getDirectory();
+    await dir.readdir(true);
+  }
+
+  async sync() {
+    const { actions } = useProject();
+    const components = await actions.package.getComponents();
+    _storage.set(componentsTransformer(components));
   }
 
   get(id: string): ComponentHandle {
@@ -56,6 +74,12 @@ export class ComponentManager {
     }
   }
 
+  private _add(component: Component) {
+    const components = get(_storage);
+    components.push(component);
+    _storage.set(components);
+  }
+
   private _subscribe(id: string, handle: ComponentHandle) {
     setTimeout(() => {
       const subscriptions = get(_subscriptions);
diff --git a/src/lib/client/ecs/system/system-manager.ts b/src/lib/client/ecs/system/system-manager.ts
index 3fdfedc..c2cb561 100644
--- a/src/lib/client/ecs/system/system-manager.ts
+++ b/src/lib/client/ecs/system/system-manager.ts
@@ -1,6 +1,9 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
-import { getId, resetSubscriptions } from '../utils';
+import { useProject } from '$lib/client/project';
+
+import { systemTransformer, systemsTransformer } from '../transformers';
+import { resetSubscriptions } from '../utils';
 import { SystemHandle } from './system-handle';
 import type { System } from './system.type';
 
@@ -25,12 +28,27 @@ export class SystemManager {
     return get(_storage);
   }
 
-  add(system: Omit<System, 'id' | 'path'> & Partial<Pick<System, 'path'>>): string {
-    const systems = get(_storage);
-    const id = getId(this.data, system.name);
-    systems.push({ ...system, id, path: system.path ?? `systems/${id}.ts` });
-    _storage.set(systems);
-    return id;
+  async create(name: string) {
+    const { actions, fs } = useProject();
+    const system = await actions.package.createSystem({ systemName: name });
+    this._add(systemTransformer(system));
+    const dir = await fs.getDirectory();
+    await dir.readdir(true);
+  }
+
+  async import(names: [string, ...string[]]) {
+    const { actions, ecs, fs } = useProject();
+    await actions.package.addSystems({ systemNames: names });
+    await this.sync();
+    await ecs.components.sync();
+    const dir = await fs.getDirectory();
+    await dir.readdir(true);
+  }
+
+  async sync() {
+    const { actions } = useProject();
+    const systems = await actions.package.getSystems();
+    _storage.set(systemsTransformer(systems));
   }
 
   get(id: string): SystemHandle {
@@ -55,6 +73,12 @@ export class SystemManager {
     }
   }
 
+  private _add(system: System) {
+    const systems = get(_storage);
+    systems.push(system);
+    _storage.set(systems);
+  }
+
   private _subscribe(id: string, handle: SystemHandle) {
     setTimeout(() => {
       const subscriptions = get(_subscriptions);
diff --git a/src/lib/client/ecs/transformers.ts b/src/lib/client/ecs/transformers.ts
index e85cc43..6505e5e 100644
--- a/src/lib/client/ecs/transformers.ts
+++ b/src/lib/client/ecs/transformers.ts
@@ -1,28 +1,34 @@
 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';
+import type { Save, SaveLibrary } from '@utils/types';
+
+export const componentTransformer = (component: ComponentPackage): Component => ({
+  id: component.manifest.id,
+  name: component.manifest.name,
+  path: component.save.path,
+  params: component.manifest.params,
+});
 
 export const componentsTransformer = (components: ComponentPackage[]): Component[] =>
-  components.map((component) => ({
-    id: component.manifest.id,
-    name: component.manifest.name,
-    path: component.save.path,
-    params: component.manifest.params,
-  }));
+  components.map(componentTransformer);
+
+export const systemTransformer = (system: SystemPackage): System => ({
+  id: system.manifest.id,
+  name: system.manifest.name,
+  path: system.save.path,
+});
 
 export const systemsTransformer = (systems: SystemPackage[]): System[] =>
-  systems.map((system) => ({
-    id: system.manifest.id,
-    name: system.manifest.name,
-    path: system.save.path,
-  }));
+  systems.map(systemTransformer);
+
+export const libraryTransformer = (lib: SaveLibrary): Library => ({
+  id: lib.path,
+  name: lib.name,
+});
 
 export const librariesTransformer = (save: Save): Library[] =>
-  save.libraries.map((lib) => ({
-    id: lib.path,
-    name: lib.name,
-  }));
+  save.libraries.map(libraryTransformer);
 
 export const scenesTransformer = (save: Save): Scene[] => [
   {
diff --git a/src/lib/client/sync-file-system/sfs.ts b/src/lib/client/sync-file-system/sfs.ts
index 4a325e6..587d071 100644
--- a/src/lib/client/sync-file-system/sfs.ts
+++ b/src/lib/client/sync-file-system/sfs.ts
@@ -28,6 +28,8 @@ export class SyncFileSystem {
 
   async init(): Promise<void> {
     await this.treeCache?.init();
+    const dir = await this.getDirectory();
+    await dir.readdir(true);
   }
 
   async getFile(path: string): Promise<SfsFile> {
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 d90ac4d..997d72d 100644
--- a/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
+++ b/src/lib/components/Widget/ecs-tree/dialogs/dialog-name.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Input } from '$lib/components/ui/input';
   import { InputDialog } from '$lib/components/dialogs';
+  import type { MaybePromise } from '@utils/types';
 
   interface Props {
     open?: boolean;
@@ -8,7 +9,8 @@
     nameText?: string;
     nameValue?: string;
     confirmText?: string;
-    onConfirm?: (name: string) => void;
+    onConfirm?: (name: string) => MaybePromise<void>;
+    validate?: (name: string) => string | null;
   }
 
   let {
@@ -18,6 +20,7 @@
     nameValue = $bindable(''),
     confirmText,
     onConfirm,
+    validate,
   }: Props = $props();
 
   const handleEnterConfirm = (confirm: () => void) => (e: KeyboardEvent) => {
@@ -28,12 +31,15 @@
     }
   };
 
-  const handleConfirm = () => {
+  const handleConfirm = async () => {
+    if (validate?.(nameValue.trim())) return;
     const n = nameValue.trim();
     if (!n) throw 'Name is required';
-    onConfirm?.(n);
+    await onConfirm?.(n);
   };
 
+  const error = $derived(validate?.(nameValue.trim()));
+
   const reset = () => {
     nameValue = '';
   };
@@ -54,6 +60,9 @@
         bind:value={nameValue}
         onkeydown={handleEnterConfirm(confirm)}
       />
+      {#if error}
+        <span class="text-xs text-destructive">Error: {error}</span>
+      {/if}
     </div>
   {/snippet}
 </InputDialog>
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 2bd43f7..2e8849c 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,15 @@
 <script lang="ts">
   import DialogName from '../dialogs/dialog-name.svelte';
+  import type { MaybePromise } from '@utils/types';
 
   interface Props {
     name: string;
     open: boolean;
-    onConfirm: (name: string) => void;
+    onConfirm: (name: string) => MaybePromise<void>;
+    validate?: (name: string) => string | null;
   }
 
-  let { name, open = $bindable(false), onConfirm }: Props = $props();
+  let { name, open = $bindable(false), onConfirm, validate }: Props = $props();
 </script>
 
-<DialogName title={`Create ${name}`} nameText={`${name} name`} bind:open {onConfirm} />
+<DialogName title={`Create ${name}`} nameText={`${name} name`} bind:open {onConfirm} {validate} />
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 a0d8631..b0a832f 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-row.svelte
@@ -123,6 +123,7 @@
             </TooltipText>
           {/if}
           <Button
+            disabled={type === 'library'}
             variant="ghost"
             size="icon"
             class="text-destructive hover:text-destructive hover:bg-destructive/20"
@@ -146,7 +147,7 @@
       </ContextMenuItem>
       <ContextMenuSeparator />
     {/if}
-    <ContextMenuItem variant="destructive" onclick={onDelete}>
+    <ContextMenuItem disabled={type === 'library'} variant="destructive" onclick={onDelete}>
       <span class="i-ic-baseline-delete"></span>
       Delete
     </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 f89eb6e..f10dc55 100644
--- a/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
+++ b/src/lib/components/Widget/ecs-tree/packages/package-tab.svelte
@@ -20,6 +20,7 @@
   import type { ComponentManager, SystemManager, LibraryManager } from '$lib/client/ecs';
   import type { Writable } from 'svelte/store';
   import type { Package } from '../types';
+  import { formatFrom } from '@utils/format';
 
   type Props =
     | {
@@ -53,24 +54,33 @@
   let createOpen = $state(false);
   let importOpen = $state(false);
 
-  const handleCreate = (name: string) => {
-    // @todo create package
-    manager.add({
-      name,
-      params: [],
-    });
+  const handleCreate = async (name: string) => {
+    if (!('create' in manager))
+      throw new Error(`Cannot create in library - use the "Import Library" button instead.`);
+    await manager.create(name);
   };
 
-  const handleImport = (name: string) => {
-    // @todo import package
-    manager.add({
-      name,
-      params: [],
-    });
+  const handleImport = async (names: string) => {
+    if (!('import' in manager)) throw new Error(`Cannot import in library`);
+    // if (names.length === 0) throw new Error('No elements selected');
+    await manager.import([names] as [string, ...string[]]);
+  };
+
+  const validate = (raw: string, suffix: string = nameCapitalized) => {
+    if (!raw) return 'Name is required';
+    const name = `${formatFrom.all(raw)[type === 'system' ? 'toCamel' : 'toPascal']()}${suffix}`;
+    console.log(name, $packages);
+    if ($packages.find((p) => p.id === name)) return `${nameCapitalized} already exists`;
+    return null;
   };
 </script>
 
-<DialogCreatePackage name={nameCapitalized} bind:open={createOpen} onConfirm={handleCreate} />
+<DialogCreatePackage
+  name={nameCapitalized}
+  bind:open={createOpen}
+  onConfirm={handleCreate}
+  {validate}
+/>
 <DialogImportPackage name={nameCapitalized} bind:open={importOpen} onConfirm={handleImport} />
 
 <div class="flex flex-col flex-1 min-h-0">
@@ -93,7 +103,7 @@
       {/if}
     </InputGroup>
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger disabled={type === 'library'}>
         {#snippet child({ props })}
           <Button
             {...props}
diff --git a/src/lib/components/dialogs/base-dialog.svelte b/src/lib/components/dialogs/base-dialog.svelte
index 2075e90..5b13485 100644
--- a/src/lib/components/dialogs/base-dialog.svelte
+++ b/src/lib/components/dialogs/base-dialog.svelte
@@ -9,6 +9,8 @@
     DialogDescription,
   } from '$lib/components/ui/dialog';
   import type { Snippet } from 'svelte';
+  import type { MaybePromise } from '@utils/types';
+  import { LoadingButton } from '$lib/components/ui/loading-button';
 
   interface Props {
     open?: boolean;
@@ -19,7 +21,7 @@
     cancelText?: string;
     confirmDisabled?: boolean;
     onOpenChange?: (open: boolean) => void;
-    onConfirm?: (...args: any[]) => void;
+    onConfirm?: (...args: any[]) => MaybePromise<void>;
   }
 
   let {
@@ -34,8 +36,17 @@
     onConfirm,
   }: Props = $props();
 
-  const confirm = () => {
-    onConfirm?.();
+  let isLoading = $state(false);
+
+  const confirm = async () => {
+    isLoading = true;
+    try {
+      await onConfirm?.();
+    } catch (e) {
+      isLoading = false;
+      throw e;
+    }
+    isLoading = false;
     open = false;
     onOpenChange?.(false);
   };
@@ -61,7 +72,9 @@
     {@render children?.(confirm, cancel)}
     <DialogFooter>
       <Button variant="ghost" onclick={cancel}>{cancelText ?? 'Cancel'}</Button>
-      <Button disabled={confirmDisabled} onclick={confirm}>{confirmText ?? 'Confirm'}</Button>
+      <LoadingButton loading={isLoading} disabled={confirmDisabled} onclick={confirm}>
+        {confirmText ?? 'Confirm'}
+      </LoadingButton>
     </DialogFooter>
   </DialogContent>
 </Dialog>
diff --git a/src/lib/components/dialogs/input-dialog.svelte b/src/lib/components/dialogs/input-dialog.svelte
index 8087d9e..8c7b121 100644
--- a/src/lib/components/dialogs/input-dialog.svelte
+++ b/src/lib/components/dialogs/input-dialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import BaseDialog from './base-dialog.svelte';
+  import type { MaybePromise } from '@utils/types';
 
   interface Props {
     open?: boolean;
@@ -12,7 +13,7 @@
     confirmDisabled?: boolean;
     onOpenChange?: (open: boolean) => void;
     reset?: () => void;
-    onConfirm?: (...args: any[]) => void;
+    onConfirm?: (...args: any[]) => MaybePromise<void>;
   }
 
   let { open = $bindable(false), onOpenChange, reset, ...props }: Props = $props();
diff --git a/src/lib/server/project/package/package-handler.ts b/src/lib/server/project/package/package-handler.ts
index e9c4a46..9361f20 100644
--- a/src/lib/server/project/package/package-handler.ts
+++ b/src/lib/server/project/package/package-handler.ts
@@ -142,7 +142,7 @@ export class PackageHandler {
   private _getNewComponentPackage(name: string, fileName: string): ComponentPackage {
     const path = `./components/${fileName}`;
 
-    const manifest = this._findPackageManifest(this.getComponentManifest, path);
+    const manifest = this._findPackageManifest((p) => this.getComponentManifest(p), path);
 
     return {
       manifest,
@@ -157,7 +157,7 @@ export class PackageHandler {
   private _getNewSystemPackage(name: string, fileName: string): SystemPackage {
     const path = `./systems/${fileName}`;
     return {
-      manifest: this._findPackageManifest(this.getSystemManifest, path),
+      manifest: this._findPackageManifest((p) => this.getSystemManifest(p), path),
       save: { name, path },
     };
   }