amateras 0.6.0 → 0.7.1

package/index.ts

@@ -0,0 +1 @@
+import '@amateras/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -14,36 +14,37 @@
   },
   "homepage": "https://github.com/defaultkavy/amateras",
   "license": "MIT",
-  "imports": {
-    "#core": "./src/core.ts",
-    "#node/*": "./src/node/*.ts",
-    "#lib/*": "./src/lib/*.ts",
-    "#structure/*": "./src/structure/*.ts",
-    "#html": "./ext/html/html.ts",
-    "#html/*": "./ext/html/node/*.ts"
-  },
   "exports": {
-    ".": "./src/index.ts",
-    "./core": "./src/core.ts",
-    "./node/*": "./src/node/*.ts",
-    "./lib/*": "./src/lib/*.ts",
+    ".": "./index.ts",
+    "./env": {
+      "browser": "./packages/core/src/env.browser.ts",
+      "node": "./packages/core/src/env.node.ts",
+      "default": "./packages/core/src/env.browser.ts"
+    },
+    "./node/*": "./packages/core/src/node/*.ts",
+    "./lib/*": "./packages/core/src/lib/*.ts",
     "./structure/*": "./src/structure/*.ts",
-    "./html": "./ext/html/html.ts",
-    "./html/*": "./ext/html/node/*.ts",
-    "./css": "./ext/css/src/index.ts",
-    "./css/colors": "./ext/css/src/lib/colors.ts",
-    "./css/color/*": "./ext/css/src/lib/colors/*.ts",
-    "./router": "./ext/router/src/index.ts",
-    "./ssr": "./ext/ssr/index.ts",
-    "./i18n": "./ext/i18n/src/index.ts",
-    "./idb": "./ext/idb/src/index.ts",
-    "./idb/core": "./ext/idb/src/core.ts",
-    "./markdown": "./ext/markdown/src/index.ts",
-    "./markdown/syntax/*": "./ext/markdown/src/syntax/*.ts",
-    "./signal": "./ext/signal/src/index.ts",
-    "./ui/*": "./ext/ui/*.ts"
+    "./core": "./packages/core/src/index.ts",
+    "./utils": "./packages/utils/src/index.ts",
+    "./html": "./packages/html/src/index.ts",
+    "./html/*": "./packages/html/node/*.ts",
+    "./css": "./packages/css/src/index.ts",
+    "./css/*": "./packages/css/src/ext/*.ts",
+    "./router": "./packages/router/src/index.ts",
+    "./i18n": "./packages/i18n/src/index.ts",
+    "./idb": "./packages/idb/src/index.ts",
+    "./idb/core": "./packages/idb/src/core.ts",
+    "./markdown": "./packages/markdown/src/index.ts",
+    "./markdown/syntax/*": "./packages/markdown/src/syntax/*.ts",
+    "./signal": "./packages/signal/src/index.ts",
+    "./ui/*": "./packages/ui/*.ts"
+  },
+  "dependencies": {
+    "@amateras/core": "workspace:*"
   },
-  "workspaces": [
-    "./ext/*"
-  ]
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  }
 }

package/packages/core/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@amateras/core",
+    "dependencies": {
+      "@amateras/utils": "workspace:*",
+      "@amateras/dom": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts",
+      "#env": {
+        "browser": "./src/env.browser.ts",
+        "node": "./src/env.node.ts",
+        "default": "./src/env.browser.ts"
+      }
+    },
+    "exports": {
+      ".": {
+        "browser": "./src/index.ts",
+        "node": "./src/main.ts",
+        "default": "./src/index.ts"
+      },
+      "./env": {
+        "browser": "./src/env.browser.ts",
+        "node": "./src/env.node.ts",
+        "default": "./src/env.browser.ts"
+      },
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/packages/core/src/env.browser.ts

@@ -0,0 +1,21 @@
+// window and document
+export const _window = window;
+export const _document = document;
+
+interface onclient {
+    (): boolean;
+    (fn: Function): void
+}
+
+interface onserver {
+    (): boolean;
+    (fn: Function): void
+}
+
+export const onclient: onclient = (fn?: Function) => { 
+    if (fn) return fn();
+    return true
+}
+export const onserver: onserver = (fn?: Function) => {
+    return false;
+}

package/packages/core/src/env.node.ts

@@ -0,0 +1,21 @@
+// window and document
+export const _window = window;
+export const _document = document;
+
+interface onclient {
+    (): boolean;
+    (fn: Function): void
+}
+
+interface onserver {
+    (): boolean;
+    (fn: Function): void
+}
+
+export const onclient: onclient = (fn?: Function) => { 
+    return false;
+}
+export const onserver: onserver = (fn?: Function) => {
+    if (fn) return fn();
+    return true
+}

package/packages/core/src/global.ts

@@ -0,0 +1,18 @@
+import type { $Element } from '#node/$Element';
+import type { $Node } from '#node/$Node';
+import * as core from './index';
+import type { $EventTarget } from '#node/$EventTarget';
+
+declare global {
+    export import $ = core.$;
+    type $Parameter<T> = T | undefined | $.$NodeParameterExtends<T>
+    interface Node {
+        readonly $: $Node
+    }
+    interface EventTarget {
+        readonly $: $EventTarget
+    }
+    interface Element {
+        readonly $: $Element
+    }
+}

package/{src/core.ts → packages/core/src/index.ts}

@@ -1,42 +1,55 @@
 import './global';
-import './node';
+import './lib/assignNodeProperties';
 import { $Element } from "#node/$Element";
 import { $Node, type $NodeContentResolver, type $NodeContentTypes } from '#node/$Node';
-import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, isUndefined, _bind, _null } from '#lib/native';
+import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, isUndefined, _bind, _null } from '@amateras/utils';
 import { $HTMLElement } from '#node/$HTMLElement';
-import { _document } from '#lib/env';
+import { _document } from '#env';
 import { $EventTarget, type $Event } from '#node/$EventTarget';
 
 const nodeNameMap: {[key: string]: Constructor<$EventTarget>} = {}
-const _stylesheet = new CSSStyleSheet();
 
-export function $<K extends keyof $.$NodeMap, T extends $.$NodeMap[K]>(tagname: K, ...args: ConstructorParameters<T>): InstanceType<T>;
-export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
-export function $(tagname: string): $HTMLElement<HTMLElement>
-export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>>(fn: F, ...args: Parameters<F>): ReturnType<F>;
-export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>, N extends number>(number: N, construct: T, ...args: P): Repeat<InstanceType<T>, N>;
-export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>>(construct: T, ...args: P): InstanceType<T>;
-export function $(nodes: NodeListOf<HTMLElement>): $HTMLElement[];
-export function $(nodes: NodeListOf<Element>): $Element[];
-export function $(nodes: NodeListOf<Node | ChildNode>): $Node[];
-export function $<N extends $Node>($node: N, ...args: any[]): N;
-export function $<N extends $Node>($node: N | null | undefined, ...args: any[]): N | null | undefined;
-export function $<H extends HTMLElement>(element: H, ...args: any[]): $HTMLElement<H>;
-export function $<H extends HTMLElement>(element: H | null | undefined, ...args: any[]): $HTMLElement<H> | null | undefined;
-export function $<E extends Element>(element: E, ...args: any[]): $Element<E>;
-export function $<E extends Element>(element: E | null | undefined, ...args: any[]): $Element<E> | null | undefined;
-export function $<D extends Document>(node: D): $Node<DocumentEventMap>;
-export function $<N extends Node>(node: N, ...args: any[]): $Node;
-export function $<N extends Node>(node: N | null | undefined, ...args: any[]): $Node | null | undefined;
+type $NodeBuilder = (...args: any[]) => $NodeContentResolver<$Node>
+type BuilderResultResolver<F> = F extends Constructor<$Node> ? InstanceType<F> : F extends $NodeBuilder ? ReturnType<F> : never;
+type BuilderParameterResolver<F> = F extends Constructor<$Node> ? ConstructorParameters<F> : F extends $NodeBuilder ? Parameters<F> : never;
+
+type $Type<T extends EventTarget> = T extends HTMLElement ? $HTMLElement : T extends Element ? $Element : T extends (Node | ChildNode) ? $Node : T extends EventTarget ? $EventTarget : never;
+
+/** Builder function */
+export function $<F extends $NodeBuilder | Constructor<$Node> | number, T extends $NodeBuilder | Constructor<$Node>>(
+    resolver: F, 
+    ...args: F extends number ? [T, ...BuilderParameterResolver<T>] : BuilderParameterResolver<F>
+): F extends number 
+    ?   number extends F 
+        ?   BuilderResultResolver<T>[]
+        :   Repeat<BuilderResultResolver<T>, F>
+    :   BuilderResultResolver<F>;
+/** Get {@link $Node} from {@link NodeList} */
+export function $<T extends HTMLElement | Element | Node | ChildNode>(nodes: NodeListOf<T>): $Type<T>[];
+/** Get self */
+export function $<E extends $EventTarget | null | undefined>($node: E, ...args: any[]): E extends $EventTarget ? E : null;
+/** Convert {@link Window} to {@link $EventTarget} */
 export function $<W extends Window>(node: W): $EventTarget<WindowEventMap>;
-export function $<E extends EventTarget>(node: E, ...args: any[]): $EventTarget;
-export function $<E extends EventTarget>(node: E | null | undefined, ...args: any[]): $EventTarget | null | undefined;
+/** Convert {@link Document} to {@link $Node} */
+export function $<D extends Document>(node: D): $Node<DocumentEventMap>;
+/** Convert {@link EventTarget} base to {@link $EventTarget} base*/
+export function $<H extends EventTarget | null | undefined>(target: H, ...args: any[]): H extends EventTarget ? $Type<H> : null;
+export function $<E extends Record<string, Event>>(target: EventTarget, ...args: any[]): $EventTarget<E>;
+/** Convert string and variables to {@link $NodeContentTypes} array */
 export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
+/** Get {@link Event.currentTarget} in {@link $EventTarget} type from {@link Event} */
 export function $<Ev extends $Event<$Element, Event>>(event: Ev): Ev['currentTarget']['$'];
-export function $<N extends number>(number: N, tagname: string): Repeat<$HTMLElement<HTMLElement>, N>;
-export function $<N extends number, K extends keyof HTMLElementTagNameMap>(number: N, tagname: K): Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
-export function $<N extends number, F extends (...args: any[]) => $NodeContentResolver<$Node>>(number: N, fn: F, ...args: Parameters<F>): Repeat<ReturnType<F>, N>;
-export function $(resolver: string | number | null | undefined | Element | HTMLElement | $Node | Function | TemplateStringsArray | Event | NodeListOf<Node | ChildNode>, ...args: any[]) {
+/** Create {@link $Node} base object from extensions */
+export function $<K extends keyof $.$NodeMap, T extends $.$NodeMap[K]>(tagname: K, ...args: ConstructorParameters<T>): InstanceType<T>;
+/** Create {@link $HTMLElement} by tagname */
+export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
+/** Create {@link $HTMLElement} by custom tagname */
+export function $(tagname: string): $HTMLElement<HTMLElement>
+/** Create multiple {@link $HTMLElement} objects by tagname */
+export function $<N extends number, K extends keyof HTMLElementTagNameMap>(number: N, tagname: K): number extends N ? $HTMLElement<HTMLElementTagNameMap[K]>[] : Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
+/** Create multiple {@link $HTMLElement} objects by custom tagname */
+export function $<N extends number>(number: N, tagname: string): number extends N ? $HTMLElement<HTMLElement>[] : Repeat<$HTMLElement<HTMLElement>, N>;
+export function $(resolver: string | number | null | undefined | Element | HTMLElement | $Node | Function | TemplateStringsArray | Event | NodeListOf<Node | ChildNode> | EventTarget, ...args: any[]) {
     if (isNull(resolver) || isUndefined(resolver)) return null;
     if (_instanceof(resolver, $Node)) return resolver;
     if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
@@ -60,6 +73,7 @@ export function $(resolver: string | number | null | undefined | Element | HTMLE
 
 export namespace $ {
     // css
+    const _stylesheet = new CSSStyleSheet();
     export const stylesheet = _stylesheet;
     _document.adoptedStyleSheets.push(_stylesheet);
     export const style = _bind(_stylesheet.insertRule, _stylesheet);
@@ -76,8 +90,6 @@ export namespace $ {
         forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
         return $;
     }
-
-    export const span = (content: string) => $('span').content(content);
 }
 
 export type $ = typeof $;

package/{src → packages/core/src}/lib/assignProperties.ts

@@ -1,6 +1,6 @@
 import type { $EventTarget } from "#node/$EventTarget";
 import { $Node } from "#node/$Node";
-import { _instanceof, _null, _Object_defineProperty, _Object_entries, _Object_getOwnPropertyDescriptors, forEach, isUndefined } from "./native";
+import { _instanceof, _null, _Object_defineProperty, _Object_entries, _Object_getOwnPropertyDescriptors, forEach, isUndefined } from "@amateras/utils";
 
 const assigner = (target: any, {set, get, fn}: { 
     set?: string[], 

package/packages/core/src/lib/chain.ts

@@ -0,0 +1,17 @@
+import { $Node } from "#node/$Node";
+import { isUndefined } from "@amateras/utils";
+
+export const chain: chain = <T, R, V>(_this: T, args: IArguments | null, get: (() => R) | null, value: V, set: (value: Exclude<V, undefined>) => any) => {
+    if (args && get && !args.length) return get();
+    if (isUndefined(value)) return _this;
+    for (const setter of $Node.setters) {
+        const result = setter(value, set);
+        if (!isUndefined(result)) return set(result), _this;
+    }
+    return set(value as any), _this;
+}
+
+interface chain {
+    <T, V>(_this: T, args: null, get: null, value: V, set: (value: Exclude<V, undefined | $.$NodeParameterExtends<V>>) => any): T
+    <T, R, V>(_this: T, args: IArguments, get: (() => R), value: V, set: (value: Exclude<V, undefined | $.$NodeParameterExtends<V>>) => any): T | R
+}

package/packages/core/src/lib/dom.ts

@@ -0,0 +1,20 @@
+import { _Object_assign } from "@amateras/utils";
+import "@amateras/dom/structure/NodeList";
+import '@amateras/dom/structure/Node';
+import '@amateras/dom/structure/Text';
+import '@amateras/dom/structure/Document';
+import '@amateras/dom/structure/Element';
+import '@amateras/dom/structure/HTMLElement';
+import '@amateras/dom/structure/CSSStyleSheet';
+import '@amateras/dom/structure/CSS';
+
+import '@amateras/dom/structure/html/HTMLAnchorElement';
+
+import { Window } from "@amateras/dom/structure/Window";
+
+const window = new Window();
+
+_Object_assign(globalThis, {
+    window,
+    ...window,
+})

package/packages/core/src/main.ts

@@ -0,0 +1,4 @@
+// This is server environment entry file
+
+import '#lib/dom';
+import './index';

package/{src → packages/core/src}/node/$Element.ts

@@ -1,5 +1,5 @@
-import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isNull, isString, isUndefined } from "#lib/native";
-import { _document } from "#lib/env";
+import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, forEach, isNull, isNumber, isString, isUndefined } from "@amateras/utils";
+import { _document } from "#env";
 import { $Node } from "./$Node";
 
 export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node<EvMap> {
@@ -12,14 +12,22 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
 
     attr(): {[key: string]: string};
     attr(key: string): string | null;
-    attr(obj: {[key: string]: string | number | boolean | null | undefined}): this;
-    attr(resolver?: {[key: string]: string | number | boolean | null | undefined} | string) {
+    attr(obj: {[key: string]: $Parameter<any| null>}): this;
+    attr(resolver?: {[key: string]: $Parameter<any | null>} | string) {
         if (!arguments.length) return _Object_fromEntries(_Array_from(this.attributes).map(attr => [attr.name, attr.value]));
         if (isString(resolver)) return this.getAttribute(resolver);
-        if (resolver) for (let [key, value] of _Object_entries(resolver)) {
-            if (!isUndefined(value) && isNull(value)) this.removeAttribute(key);
-            else this.setAttribute(key, `${value}`);
-        }
+        if (resolver) 
+            keyIterate: for (let [key, value] of _Object_entries(resolver)) {
+                const set = (value: string | number | boolean | null | undefined) => {
+                    if (!isUndefined(value) && isNull(value)) this.removeAttribute(key);
+                    else this.setAttribute(key, `${value}`);
+                }
+                for (const setter of $Node.setters) {
+                    const result = setter(value, set);
+                    if (!isUndefined(result)) { set(result); continue keyIterate; }
+                }
+                set(value as any);
+            }
         return this;
     }
 
@@ -40,6 +48,12 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     toString() {
         return this.outerHTML();
     }
+
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions & { callback?: (animation: Animation) => void }) {
+        const animation = this.node.animate(keyframes, options);
+        if (!isNumber(options)) options?.callback?.(animation);
+        return this;
+    }
 }
 
 function createNode(nodeName: string) {
@@ -185,8 +199,6 @@ export interface $Element<Ele extends Element, EvMap = ElementEventMap> {
     setPointerCapture(pointerId: number): this;
     /** {@link Element.toggleAttribute} */
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
-    /** {@link Element.animate} */
-    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
     /** {@link Element.getAnimations} */
     getAnimations(options?: GetAnimationsOptions): Animation[];
 

package/{src → packages/core/src}/node/$EventTarget.ts

@@ -1,4 +1,4 @@
-import { isBoolean } from "#lib/native";
+import { forEach, isBoolean, toArray } from "@amateras/utils";
 
 export class $EventTarget<EvMap = {}> {
     node: EventTarget;
@@ -7,16 +7,19 @@ export class $EventTarget<EvMap = {}> {
         if (node !== window) (node as Mutable<EventTarget>).$ = this;
     }
     
-    on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
-        return this.addEventListener(type, listener, options);
+    on(type: string | string[], listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
+        forEach(toArray(type), type => this.addEventListener(type, listener, options));
+        return this;
     }
 
-    off(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this {
-        return this.removeEventListener(type, listener, options);
+    off(type: string | string[], listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this {
+        forEach(toArray(type), type => this.removeEventListener(type, listener, options));
+        return this
     }
     
-    once(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
-        return this.on(type, listener, { once: true, ...(isBoolean(options) ? {capture: options} : options ?? {}) })
+    once(type: string | string[], listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
+        forEach(toArray(type), type => this.on(type, listener, { once: true, ...(isBoolean(options) ? { capture: options } : options ?? {}) }));
+        return this
     }
 }
 
@@ -34,12 +37,12 @@ export interface $EventTarget<EvMap = {}> {
     /** {@link EventTarget.dispatchEvent} */
     dispatchEvent(event: Event): boolean;
     
-    on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+    on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K | K[], listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
     on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
 
-    off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
+    off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K | K[], listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
     off(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this;
 
-    once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+    once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K | K[], listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
     once(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
 }

package/{src → packages/core/src}/node/$HTMLElement.ts

@@ -1,4 +1,4 @@
-import { _Object_entries, forEach } from "#lib/native";
+import { _Object_entries, forEach } from "@amateras/utils";
 import { $Element } from "#node/$Element";
 
 export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {

package/{src → packages/core/src}/node/$Node.ts

@@ -1,7 +1,5 @@
-import { chain } from "#lib/chain";
-import { _document } from "#lib/env";
-import { _Array_from, _instanceof, _JSON_stringify, _null, _Promise, forEach, isFunction, isNull, isUndefined } from "#lib/native";
-import { toArray } from "#lib/toArray";
+import { _document } from "#env";
+import { _Array_from, _instanceof, _JSON_stringify, _null, _Promise, forEach, isFunction, isNull, isUndefined, toArray } from "@amateras/utils";
 import { $EventTarget } from "./$EventTarget";
 
 export class $Node<EvMap = {}> extends $EventTarget<EvMap> {
@@ -13,10 +11,8 @@ export class $Node<EvMap = {}> extends $EventTarget<EvMap> {
     }
 
     content(children: $NodeContentResolver<this>) {
-        return chain(this, _null, _null, children, children => {
-            forEach(_Array_from(this.childNodes), node => node.remove());
-            this.insert(children);
-        })
+        forEach(_Array_from(this.childNodes), node => node.remove());
+        return this.insert(children);
     }
 
     insert(resolver: $NodeContentResolver<this>, position = -1) {
@@ -64,7 +60,7 @@ export class $Node<EvMap = {}> extends $EventTarget<EvMap> {
     static process<T extends $Node>($node: T, content: $NodeContentResolver<any>): Array<$Node | undefined | null> {
         for (const processor of this.processors) {
             const result = processor($node, content);
-            if (result) return result;
+            if (result) content = result;
         }
         if (isUndefined(content) || isNull(content) || _instanceof(content, $Node)) return [content];
         // is Promise
@@ -100,7 +96,7 @@ export class $Text extends $Node {
 }
 
 export type $NodeSetterHandler = (value: any, set: (value: any) => void) => any;
-export type $NodeContentProcessor = <N extends $Node>($node: N, content: $NodeContentResolver<N>) => Array<$Node | undefined | null> | void | undefined;
+export type $NodeContentProcessor = <N extends $Node>($node: N, content: $NodeContentResolver<N>) => $NodeContentResolver<N>;
 export type $NodeContentHandler<T extends $Node> = ($node: T) => OrPromise<$NodeContentResolver<T>>;
 export type $NodeContentTypes = $Node | string | number | boolean | $.$NodeContentTypeExtends | null | undefined;
 export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
@@ -168,7 +164,7 @@ export interface $Node<EvMap = {}> extends $EventTarget<EvMap> {
     /** {@link Node.replaceChild} */
     replaceChild<T extends Node>(node: Node, child: T): T;
     /** {@link Node.contains} */
-    contains(other: $EventTarget | Node | null | undefined): boolean;
+    contains(other: $EventTarget | EventTarget | null | undefined): boolean;
 
     /** {@link ChildNode.after} */
     after(...nodes: ($EventTarget | Node | string)[]): this;

package/{src → packages/core/src}/node/$Virtual.ts

@@ -1,6 +1,5 @@
 import { chain } from "#lib/chain";
-import { forEach, _Array_from, _instanceof, _null } from "#lib/native";
-import { toArray } from "#lib/toArray";
+import { forEach, _Array_from, _instanceof, _null, toArray } from "@amateras/utils";
 import { $HTMLElement } from "#node/$HTMLElement";
 import { $Node, type $NodeContentResolver } from "#node/$Node";
 
@@ -43,11 +42,12 @@ export class $Virtual<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElement
     render() {
         // remove hidden node
         forEach(this.childNodes, node => this.hiddenNodes.has($(node)) && node.remove());
+        // get array of visible node
+        const visibleNodes = _Array_from(this.nodes).filter($node => !this.hiddenNodes.has($node))
         // add visible node with position
-        forEach(this.nodes, ($node, i) => {
+        forEach(visibleNodes, ($node, i) => {
             if (
-                !this.hiddenNodes.has($node) // node is not hidden
-                && !$node.inDOM() // node is not in dom tree
+                !$node.inDOM() // node is not in dom tree
                 && $(this.childNodes).at(i) !== $node // node not matched at position
             ) $Node.append(this, $node, i);
         })

package/packages/css/package.json

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

package/{ext/css/src/lib → packages/css/src/ext}/colors/amber.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _amber = {
     50: '#fffbeb',
@@ -16,7 +16,7 @@ const _amber = {
 
 colorAssign('amber', _amber);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const amber: typeof _amber;

package/{ext/css/src/lib → packages/css/src/ext}/colors/blackwhite.ts

@@ -1,9 +1,9 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 colorAssign('black', '#000000');
 colorAssign('white', '#ffffff');
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const black: '#000000';

package/{ext/css/src/lib → packages/css/src/ext}/colors/blue.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _blue = {
     50: '#eff6ff',
@@ -16,7 +16,7 @@ const _blue = {
 
 colorAssign('blue', _blue);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const blue: typeof _blue;

package/{ext/css/src/lib → packages/css/src/ext}/colors/cyan.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _cyan = {
     50: '#ecfeff',
@@ -16,7 +16,7 @@ const _cyan = {
 
 colorAssign('cyan', _cyan);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const cyan: typeof _cyan;

package/{ext/css/src/lib → packages/css/src/ext}/colors/emerald.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _emerald = {
     50: '#ecfdf5',
@@ -16,7 +16,7 @@ const _emerald = {
 
 colorAssign('emerald', _emerald);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const emerald: typeof _emerald;