amateras 0.6.0 → 0.7.1

package/packages/router/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@amateras/router",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/html": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts",
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/{ext → packages}/router/src/index.ts

@@ -2,13 +2,12 @@ import type { Page } from "#node/Page";
 import { Router } from "#node/Router";
 import { PageBuilder } from "#structure/PageBuilder";
 import { Route, type RouteBuilder, type RouteParams } from "#structure/Route";
-import { _bind, _Object_assign, forEach } from "../../../src/lib/native";
-import type { AnchorTarget } from "../../html/node/$Anchor";
+import { _Object_assign, _bind, forEach } from "@amateras/utils";
+import type { AnchorTarget } from "../../html/src/node/$Anchor";
 
-declare module 'amateras/core' {
-    // export function $(nodeName: 'ra'): RouterAnchor;
+declare module '@amateras/core' {
     export namespace $ {
-        export function route<Params extends RouteParams = []>(builder: (page: Page<Params>) => Page<Params>): PageBuilder<Params>;
+        export function route<Params extends RouteParams = []>(builder: (page: Page<Params>) => OrPromise<Page<Params>>): PageBuilder<Params>;
         export function open(url: string | URL | Nullish, target?: AnchorTarget): typeof Router;
         export function replace(url: string | URL | Nullish): typeof Router;
         export function back(): typeof Router;

package/{ext → packages}/router/src/node/Page.ts

@@ -1,17 +1,20 @@
 import type { RouteParams } from "#structure/Route";
-import { $HTMLElement } from "amateras/node/$HTMLElement";
-import { _null } from "../../../../src/lib/native";
+import { chain } from "@amateras/core/lib/chain";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import { _null } from "@amateras/utils";
 import type { Router } from "./Router";
-import { chain } from "../../../../src/lib/chain";
+
 
 export class Page<Params extends RouteParams = []> extends $HTMLElement {
     params: PageParamsResolver<Params>;
     router: null | Router = _null
     #pageTitle: string | null = _null;
     built = false;
-    constructor(params: PageParamsResolver<Params>) {
+    pathId: string;
+    constructor(pathId: string, params: PageParamsResolver<Params>) {
         super('page');
         this.params = params;
+        this.pathId = pathId;
     }
 
     pageTitle(): string | null;
@@ -19,6 +22,7 @@ export class Page<Params extends RouteParams = []> extends $HTMLElement {
     pageTitle(title?: string | null) {
         return chain(this, arguments, () => this.#pageTitle, title, title => this.#pageTitle = title)
     }
+
 }
 
 export type PageParams = { [key: string]: string }

package/{ext → packages}/router/src/node/Router.ts

@@ -1,10 +1,10 @@
-import { $HTMLElement } from "amateras/node/$HTMLElement";
 import { Route, type RouteBuilder, type RoutePath, type RouteParamsResolver, type RouteParams, type RouteParamsStrings, type AsyncPageBuilder } from "../structure/Route";
-import { _document } from "amateras/lib/env";
-import { _instanceof, startsWith, _JSON_parse, forEach, _Object_entries, _JSON_stringify, _Object_assign, isFunction, _null } from "../../../../src/lib/native";
-import type { AnchorTarget } from "../../../html/node/$Anchor";
+import type { AnchorTarget } from "../../../html/src/node/$Anchor";
 import { Page, type PageParams } from "./Page";
 import type { PageBuilder, PageBuilderFunction } from "#structure/PageBuilder";
+import { _document } from "@amateras/core/env";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import { _instanceof, startsWith, _JSON_parse, forEach, _Object_entries, _JSON_stringify, isFunction } from "@amateras/utils";
 // history index
 let index = 0;
 const _addEventListener = addEventListener;
@@ -38,15 +38,20 @@ const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?
     scrollRecord();
     if (mode === PUSH) index += 1;
     Router.direction = FORWARD;
+    Router.prevUrl = toURL(_location.href);
     _history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url);
+    Router.url = url;
     forEach(Router.routers, router => router.resolve(path))
 }
 // disable browser scroll restoration
 _history.scrollRestoration = 'manual';
 
+type RouteData = { route: Route, params: PageParams, pathId: string }
 export class Router extends $HTMLElement {
     static direction: 'back' | 'forward' = FORWARD;
     static routers = new Set<Router>();
+    static url: URL = toURL(_location.href);
+    static prevUrl: URL | null = null;
     routes = new Map<RoutePath, Route>();
     pages = new Map<string, Page>();
     constructor(page?: Page) {
@@ -85,6 +90,8 @@ export class Router extends $HTMLElement {
             if (index > stateIndex) Router.direction = BACK;
             if (index < stateIndex) Router.direction = FORWARD;
             index = stateIndex;
+            Router.prevUrl = Router.url;
+            Router.url = toURL(_location.href);
             this.resolve(_location.href);
         }
         _addEventListener('popstate', resolve);
@@ -94,73 +101,37 @@ export class Router extends $HTMLElement {
         return this;
     }
 
-    async resolve(path: string | URL): Promise<this> {
+    async resolve(path: string | URL, force = false): Promise<this> {
         const {pathname, href} = toURL(path);
-        const split = (p: string) => p.replaceAll(/\/+/g, '/').replace(/^\//, '').split('/').map(path => `/${path}`);
-        type RouteData = { route: Route, params: PageParams, pathId: string }
-        const searchRoute = (routes: typeof this.routes, targetPath: string): RouteData[] => {
-            let targetPathSplit = split(targetPath);
-            if (!routes.size) return [];
-            // check each route
-            for (const [_, route] of routes) {
-                // check each path pass
-                routePathLoop: for (const [path, paramsHandle] of route.paths) {
-                    let routePathSplit = split(path);
-                    let targetPathNodePosition = 0;
-                    let params: { [key: string]: string } = isFunction(paramsHandle) ? paramsHandle() : paramsHandle ?? {};
-                    let pathId = '';
-                    // check each path node
-                    pathNodeLoop: for (let i = 0; i < routePathSplit.length; i++) {
-                        // reset target path node position
-                        targetPathNodePosition = i;
-                        const routeNode = routePathSplit[i];
-                        const targetNode = targetPathSplit[i];
-                        // path node undefined, break path loop
-                        if (!routeNode || !targetNode) continue routePathLoop;
-                        // path node is params node
-                        if (routeNode.includes(':')) {
-                            // target not matched
-                            if (targetNode === '/') continue routePathLoop;
-                            const [prefix, paramName] = routeNode.split(':') as [string, string];
-                            if (!startsWith(targetNode, prefix)) continue routePathLoop;
-                            params[paramName] = targetNode.replace(`${prefix}`, '');
-                            pathId += targetNode;
-                            continue pathNodeLoop;
-                        }
-                        // path node not matched, next path
-                        if (routeNode !== targetNode) continue routePathLoop;
-                        pathId += targetNode;
-                    }
-                    // target path node longer than route, next route
-                    if (targetPathSplit[targetPathNodePosition + 1] && !route.routes.size) continue routePathLoop;
-                    // all path node passed, route found
-                    return [{route, params, pathId}, ...searchRoute(route.routes, targetPathSplit.slice(targetPathNodePosition + 1).join('/'))]
-                }
-            }
-            // no route passed
-            const notfound = routes.get('notfound');
-            if (notfound) return [{route: notfound, params: {}, pathId: 'notfound'}]
-            return [];
-        }
-        const routes = searchRoute(this.routes, pathname);
+        const routes = this.getRoutes(this.routes, pathname);
+        const routerPageMap = new Map<Router, Page>();
         let prevRouter: Router | null = this;
+        let pathIdStr = '';
+        let paramsData = {}
         await forEach(routes, async ({route, params, pathId}) => {
+            pathIdStr += pathId;
+            paramsData = {...paramsData, ...params}
             // skip route group
             const builderResolver = route.builder;
             if (!builderResolver) return;
             // get page from cache or create new page
-            const page = route.pages.get(pathId) ?? new Page(params);
+            const page = route.pages.get(pathId) ?? new Page(pathIdStr, paramsData);
             // resolve builder
             if (!page.built) await builderResolver.build(page);
             page.built = true;
-            // set title
-            _document && (_document.title = page.pageTitle() ?? _document.title);
-            // check location is still same, page parent is not router before insert page
-            if (href === _location.href && page.parentNode !== prevRouter?.node) prevRouter?.content(page);
+            // set router to page map
+            if (prevRouter) routerPageMap.set(prevRouter, page)
             // set cache
-            route.pages.set(pathId, page);
+            if (!force) route.pages.set(pathId, page);
             prevRouter = page.router;
         })
+
+        forEach(routerPageMap, ([router, page]) => {
+            // set title
+            _document && (_document.title = page.pageTitle() ?? _document.title ?? '');
+            // check location is still same, page parent is not router before insert page
+            if (force || (href === _location.href && page.parentNode !== router.node)) router.content(page);
+        })
         // handle scroll restoration
         let { x, y } = Router.scroll ?? {x: 0, y: 0};
         scrollTo(x, y);
@@ -168,6 +139,56 @@ export class Router extends $HTMLElement {
         this.dispatchEvent(new Event('routeopen', {bubbles: true}));
         return this;
     }
+
+    protected getRoutes(routes: typeof this.routes, targetPath: string): RouteData[] {
+        const split = (p: string) => p.replaceAll(/\/+/g, '/').replace(/^\//, '').split('/').map(path => `/${path}`);
+        let targetPathSplit = split(targetPath);
+        if (!routes.size) return [];
+        // check each route
+        for (const [_, route] of routes) {
+            // check each path pass
+            routePathLoop: for (const [path, paramsHandle] of route.paths) {
+                let routePathSplit = split(path);
+                let targetPathNodePosition = 0;
+                let params: { [key: string]: string } = isFunction(paramsHandle) ? paramsHandle() : paramsHandle ?? {};
+                let pathId = '';
+                // check each path node
+                pathNodeLoop: for (let i = 0; i < routePathSplit.length; i++) {
+                    // reset target path node position
+                    targetPathNodePosition = i;
+                    const routeNode = routePathSplit[i];
+                    const targetNode = targetPathSplit[i];
+                    // path node undefined, break path loop
+                    if (!routeNode || !targetNode) continue routePathLoop;
+                    // path node is params node
+                    if (routeNode.includes(':')) {
+                        // target not matched
+                        if (targetNode === '/') continue routePathLoop;
+                        const [prefix, paramName] = routeNode.split(':') as [string, string];
+                        if (!startsWith(targetNode, prefix)) continue routePathLoop;
+                        params[paramName] = targetNode.replace(`${prefix}`, '');
+                        pathId += targetNode;
+                        continue pathNodeLoop;
+                    }
+                    // path node not matched, next path
+                    if (routeNode !== targetNode) continue routePathLoop;
+                    pathId += targetNode;
+                }
+                // target path node longer than route, next route
+                if (targetPathSplit[targetPathNodePosition + 1] && !route.routes.size) continue routePathLoop;
+                // all path node passed, route found
+                return [{route, params, pathId}, ...this.getRoutes(route.routes, targetPathSplit.slice(targetPathNodePosition + 1).join('/'))]
+            }
+        }
+        // no route passed
+        const notfound = routes.get('notfound');
+        if (notfound) return [{route: notfound, params: {}, pathId: 'notfound'}]
+        return [];
+    }
+
+    protected getPage() {
+
+    }
 }
 
 export interface Router {

package/{ext → packages}/router/src/node/RouterAnchor.ts

@@ -1,4 +1,4 @@
-import { $Anchor } from "../../../html/node/$Anchor";
+import { $Anchor } from "@amateras/html/node/$Anchor";
 
 export class RouterAnchor extends $Anchor {
     constructor() {
@@ -13,7 +13,7 @@ export class RouterAnchor extends $Anchor {
     }
 }
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export interface $NodeMap {
             'ra': typeof RouterAnchor;

package/{ext → packages}/router/src/structure/PageBuilder.ts

@@ -1,6 +1,6 @@
-import { Page, type PageParams } from "#node/Page";
-import { _instanceof, _Promise, isFunction } from "../../../../src/lib/native";
-import type { $NodeContentResolver } from "../../../../src/node/$Node";
+import { Page } from "#node/Page";
+import type { $NodeContentResolver } from "@amateras/core/node/$Node";
+import { _instanceof, _Promise } from "@amateras/utils";
 import type { AsyncPageBuilder, RouteParams } from "./Route";
 
 export class PageBuilder<Params extends RouteParams = any> {

package/{ext → packages}/router/src/structure/Route.ts

@@ -1,5 +1,5 @@
 import type { Page } from "#node/Page";
-import { _instanceof, _null, isUndefined } from "../../../../src/lib/native";
+import { _null, _instanceof, isUndefined } from "@amateras/utils";
 import { PageBuilder, type PageBuilderFunction } from "./PageBuilder";
 
 export class Route<Path extends RoutePath = RoutePath, Params extends RouteParams = []> {

package/packages/signal/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@amateras/signal",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts",
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/packages/signal/src/index.ts

@@ -0,0 +1,221 @@
+import { Signal } from "#structure/Signal";
+import { $Node, $Text, type $NodeContentResolver } from "@amateras/core/node/$Node";
+import { _instanceof, isObject, _JSON_stringify, _Object_assign, forEach, _null, _Object_defineProperty, _Object_entries, isNull, isFunction, _Promise, toArray } from "@amateras/utils";
+
+// handle $Node content process
+$Node.processors.add((_, content) => {
+    const signal = (content as SignalFunction<any>)?.signal;
+    if (_instanceof(signal, Signal)) {
+        const signalValue = (content as SignalFunction<any>)();
+        const signalHandler = (resolver: any): $NodeContentResolver<any> => {
+            if (_instanceof(resolver, _Promise)) {
+                return resolver.then(signalHandler) as any;
+            }
+            else if (_instanceof(resolver, $Node)) {
+                // handler signal $Node result
+                let node = resolver;
+                const set = (value: any) => {
+                    node.replace(value);
+                    node = value;
+                }
+                signal.subscribe(set);
+                return [resolver];
+            } else {
+                // handler signal other type result
+                const $text = new $Text()
+                const set = (value: any) => $text.textContent(isObject(value) ? _JSON_stringify(value) : value);
+                signal.subscribe(set);
+                set(resolver);
+                return [$text];
+            }
+        }
+        return signalHandler(signalValue);
+    }
+})
+
+// handle $Node native method setter
+$Node.setters.add((value, set) => {
+    const signal = value?.signal;
+    if (isFunction(value) && _instanceof(signal, Signal)) {
+        signal.subscribe(set);
+        return value();
+    }
+})
+
+declare module '@amateras/core' {
+    export namespace $ {
+        export function signal<T>(value: T): SignalFunction<T>;
+        export function compute<T>(process: (untrack: UntrackHandler) => T): ComputeFunction<T>; 
+        export function effect(process: (untrack: UntrackHandler) => void): void;
+        export function await<K, O extends SignalAwaitOptions<K, unknown>>(signalFn: SignalFunction<OrPromise<K>> | ComputeFunction<OrPromise<K>>, options: O): O[keyof O];
+        export interface $NodeContentMap {
+            signalFn: SignalFunction<any>;
+            computeFn: ComputeFunction<any>;
+        }
+        export interface $NodeParameterMap<T> {
+            // Distribute T type
+            signalFn: T extends any ? SignalFunction<Narrow<T>> : never;
+            computeFn: T extends any ? ComputeFunction<Narrow<T>> : never;
+        }
+    }
+}
+
+type SignalObject<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
+type SignalValue<T> = T extends Promise<infer R> ? T | R : T;
+export type SignalPromiseState = 'await' | 'then' | 'catch';
+export type SignalAwaitOptions<T, R> = {
+    await: R | (() => R);
+    then: R | ((value: T) => R);
+    catch: R | ((error: any) => R);
+}
+
+export type SignalFunction<T> = {
+    (): T;
+    signal: Signal<T>;
+    set: (newValue: SignalValue<T> | ((oldValue: T) => SignalValue<T>)) => SignalFunction<T>;
+    value: () => T;
+    state: SignalPromiseState;
+    await: <R>(resolver: R) => AwaitFunction<T, R>
+} & SignalObject<T>;
+
+export type ComputeFunction<T> = { 
+    (): T;
+    signal: Signal<T>;
+    state: SignalPromiseState;
+};
+
+export type AwaitFunction<T, R> = {
+    (): R;
+    then<D>(resolver: (value: Awaited<T>) => D): AwaitFunction<T, R | D>;
+    then<D>(resolver: D): AwaitFunction<T, R | D>;
+    catch<D>(resolver: (error: any) => D): AwaitFunction<T, R | D>;
+    catch<D>(resolver: D): AwaitFunction<T, R | D>;
+} & ComputeFunction<T>
+
+export type SignalListener = (signal: Signal<any>) => void;
+export type UntrackHandler = <T>(fn: () => T) => T
+
+const signalComputeListeners = new Set<SignalListener>();
+const signalEffectListeners = new Set<SignalListener>();
+const signalFnMap = new Map<any, SignalFunction<any> | ComputeFunction<any>>();
+
+// experiment feature
+const nestedComputeFn = (value: any, parentSignalFn: SignalFunction<any> | ComputeFunction<any>) => {
+    if (isObject(value) && !isNull(value)) {
+        forEach(_Object_entries(value), ([key, val]) => {
+            const cachedFn = signalFnMap.get(val);
+            const val$ = cachedFn ?? $.compute(() => parentSignalFn()[key]);
+            if (!cachedFn && isObject(val)) {
+                signalFnMap.set(val, val$);
+                nestedComputeFn(val, val$)
+            }
+            _Object_defineProperty(parentSignalFn, `${key}$`, {value: val$});
+        })
+    }
+}
+
+const AWAIT = 'await';
+const THEN = 'then';
+const CATCH = 'catch';
+
+_Object_assign($, {
+    // signal function
+    signal<T>(value: T): SignalFunction<T> {
+        const signal = new Signal<T>(value);
+        const signalFn = function () { 
+            forEach([...signalComputeListeners, ...signalEffectListeners], fn => fn(signal));
+            return signal.value();
+        } as SignalFunction<T> 
+        nestedComputeFn(value, signalFn);
+        if (_instanceof(value, _Promise)) {
+            value.catch(err => {
+                signalFn.state = CATCH; 
+                signal.value(err);
+            }).then(v => {
+                signalFn.state = THEN;
+                signal.value(v as any);
+            })
+        }
+        _Object_assign(signalFn, {
+            signal,
+            set: (newValue: T) => (signal.value(newValue), signalFn),
+            value: () => signal.value(),
+            state: _instanceof(value, _Promise) ? AWAIT : THEN,
+
+            await(awaitResolver: any) {
+                let thenResolver: any = _null
+                let catchResolver: any = _null
+                const awaitFn = $.compute(untrack => {
+                    const value = signalFn();
+                    return untrack(() => {
+                        switch (signalFn.state) {
+                            case AWAIT: return isFunction(awaitResolver) ? awaitResolver() : awaitResolver;
+                            case THEN: return isFunction(thenResolver) ? thenResolver(value as any) : thenResolver;
+                            case CATCH: return isFunction(catchResolver) ? catchResolver(value) : catchResolver;
+                        }
+                    })
+                })
+
+                _Object_assign(awaitFn, {
+                    then(resolver: any) {
+                        thenResolver = resolver;
+                        return awaitFn;
+                    },
+                    catch(resolver: any) {
+                        catchResolver = resolver;
+                        return awaitFn;
+                    }
+                })
+
+                return awaitFn;
+            }
+        })
+        return signalFn
+    },
+
+    // compute function
+    compute<T>(process: (untrack: UntrackHandler) => T): ComputeFunction<T> {
+        let subscribed = false;
+        const signalFn: SignalFunction<any> = $.signal(_null);
+        const computeFn = () => {
+            if (!subscribed) return signalFn.set(subscribe()).value();
+            else return signalFn.set(process(untrack)).value();
+        }
+        const untrack = <T>(fn: () => T) => {
+            if (subscribed) return fn();
+            signalComputeListeners.delete(signalListener);
+            const result = fn();
+            signalComputeListeners.add(signalListener);
+            return result;
+        }
+        const signalListener = (signal: Signal<any>) => 
+            signal.subscribe(() => signalFn.set(process(untrack))) 
+        const subscribe = () => {
+            signalComputeListeners.add(signalListener);
+            const result = process(untrack);
+            signalComputeListeners.delete(signalListener);
+            subscribed = true;
+            return result;
+        }
+        _Object_assign(computeFn, { signal: signalFn.signal });
+        return computeFn as ComputeFunction<T>
+    },
+
+    // effect
+    effect(process: (untrack: UntrackHandler) => void) {
+        let subscribed = false;
+        const signalListener = (signal: Signal<any>) => 
+            signal.subscribe(_ => process(untrack));
+        const untrack = <T>(fn: () => T) => {
+            if (subscribed) return fn();
+            signalEffectListeners.delete(signalListener);
+            const result = fn();
+            signalEffectListeners.add(signalListener);
+            return result;
+        }
+        signalEffectListeners.add(signalListener);
+        process(untrack);
+        signalEffectListeners.delete(signalListener);
+        subscribed = true;
+    },
+})

package/{ext → packages}/signal/src/structure/Signal.ts

@@ -1,4 +1,4 @@
-import { _instanceof, forEach, isFunction, isUndefined } from "amateras/lib/native";
+import { _instanceof, forEach, isFunction, isUndefined } from "@amateras/utils";
 
 export class Signal<T> {
     #value: T;

package/{ext → packages}/ui/lib/VirtualScroll.ts

@@ -1,8 +1,8 @@
-import { _Array_from, _instanceof, forEach } from "amateras/lib/native";
-import type { $Virtual } from "amateras/node/$Virtual";
-import { $HTMLElement } from "amateras/node/$HTMLElement";
-import { _document } from "amateras/lib/env";
-import type { $Node } from "amateras/node/$Node";
+import { _document } from "@amateras/core/env";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import type { $Node } from "@amateras/core/node/$Node";
+import type { $Virtual } from "@amateras/core/node/$Virtual";
+import { _Array_from, _instanceof, forEach } from "@amateras/utils";
 
 export const VirtualScroll = ($parent: $Virtual, scroller: $Node = $(_document)) => {
     scroller.on('scroll', () => render($parent), true);

package/{ext → packages}/ui/node/Accordian.ts

@@ -1,7 +1,7 @@
-import { _Array_from, _instanceof, forEach, isNull } from "amateras/lib/native";
-import { $HTMLElement } from "amateras/node/$HTMLElement";
-import type { $Node, $NodeContentResolver } from "amateras/node/$Node";
-import { chain } from "../../../src/lib/chain";
+import { chain } from "@amateras/core/lib/chain";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import type { $Node, $NodeContentResolver } from "@amateras/core/node/$Node";
+import { _Array_from, _instanceof, forEach, isNull } from "@amateras/utils";
 
 const [ACCORDIAN, ACCORDIAN_ITEM, ACCORDIAN_TRIGGER, ACCORDIAN_CONTENT, ACCORDIAN_CONTAINER] = ['accordian', 'accordian-item', 'accordian-trigger', 'accordian-content', 'accordian-container'] as const;
 forEach([

package/packages/ui/node/Carousel.ts

@@ -0,0 +1,20 @@
+import { chain } from "@amateras/core/lib/chain";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+
+const CAROUSEL = 'carousel';
+const CAROUSEL_ITEM = 'carousel-item';
+
+export class Carousel extends $HTMLElement {
+    constructor() {
+        super(CAROUSEL);
+    }
+
+}
+
+export class CarouselItem extends $HTMLElement {
+    constructor() {
+        super(CAROUSEL_ITEM)
+    }
+}
+
+export type CarouselDirection = 'horizontal' | 'vertical';

package/{ext → packages}/ui/node/Form.ts

@@ -1,9 +1,10 @@
-import { $Form } from 'amateras/html/$Form';
-import { $HTMLElement } from 'amateras/node/$HTMLElement';
-import { $Label } from 'amateras/html/$Label';
-import { $Input } from 'amateras/html/$Input';
-import type { $Node } from '../../../src/node/$Node';
-import { _instanceof, _undefined } from '../../../src/lib/native';
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import type { $Node } from "@amateras/core/node/$Node";
+import { $Form } from "@amateras/html/node/$Form";
+import { $Input } from "@amateras/html/node/$Input";
+import { $Label } from "@amateras/html/node/$Label";
+import { _instanceof, _undefined } from "@amateras/utils";
+
 
 export class Form extends $Form {
     constructor() {

package/packages/ui/node/Modal.ts

@@ -0,0 +1,45 @@
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import { forEach, isNull } from "@amateras/utils";
+const MODAL = 'modal';
+const MODAL_CONTENT = 'modal-content'
+
+forEach([
+    `${MODAL}{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;height:100%;width:100%;background:#00000050}`,
+    `${MODAL_CONTENT}{display:block;}`
+], $.style)
+export class Modal extends $HTMLElement {
+    name?: string;
+    constructor(name?: string) {
+        super(MODAL);
+        this.name = name;
+        if (name) 
+            $(window).on('routeopen', e => {
+                const url = new URL(location.href);
+                const param = url.searchParams.get(name);
+                if (isNull(param)) return this.close();
+                this.open();
+            })
+    }
+
+    open() {
+        $(document.body).insert(this);
+        this.once('click', e => {
+            if ($(e) === $(e.target)) {
+                if (!this.name) this.close();
+                else history.back();
+            }
+        })
+        return this;
+    }
+
+    close() {
+        this.remove();
+        return this;
+    }
+}
+
+export class ModalContent extends $HTMLElement {
+    constructor() {
+        super(MODAL_CONTENT);
+    }
+}