amateras 0.5.0 → 0.7.0

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

@@ -1,27 +1,26 @@
-import { chain } from "#lib/chain";
-import { _document } from "#lib/env";
-import { _Array_from, _instanceof, _JSON_stringify, _null, _Promise, forEach, isBoolean, isFunction, isNull, isObject, isUndefined } from "#lib/native";
-import { toArray } from "#lib/toArray";
-import { Signal } from "#structure/Signal";
-
-export class $Node {
-    node: Node & ChildNode;
+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> {
+    declare node: Node & ChildNode & ParentNode;
+    static processors = new Set<$NodeContentProcessor>();
+    static setters = new Set<$NodeSetterHandler>();
     constructor(node: Node & ChildNode) {
-        this.node = node;
-        //@ts-expect-error
-        this.node.$ = this;
+        super(node);
     }
 
     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) {
         // process nodes
-        forEach(toArray(resolver), resolve_child => forEach($Node.process(this, resolve_child), $node => $Node.append(this, $node, position)));
+        forEach(toArray(resolver), resolve_child => forEach($Node.process(this, resolve_child), $node => {
+            $Node.append(this, $node, position);
+            if (position >= 0) position++;
+        }));
         return this;
     }
 
@@ -58,50 +57,19 @@ export class $Node {
         return _instanceof(this, instance) ? this : null;
     }
 
-    on(type: string, listener: any, options?: boolean | AddEventListenerOptions) {
-        return this.addEventListener(type, listener, options);
-    }
-
-    off(type: string, listener: any, options?: boolean | EventListenerOptions) {
-        return this.removeEventListener(type, listener, options);
-    }
-    
-    once(type: string, listener: any, options?: boolean | AddEventListenerOptions) {
-        return this.on(type, listener, { once: true, ...(isBoolean(options) ? {capture: options} : options ?? {}) })
-    }
-
     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) content = result;
+        }
         if (isUndefined(content) || isNull(content) || _instanceof(content, $Node)) return [content];
         // is Promise
         if (_instanceof(content, _Promise)) return [$('async').await(content, ($async, $child) => $async.replace($child as any))];
         // is SignalFunction or ContentHandler
         if (isFunction(content)) {
-            const signal = (content as any).signal;
-            if (_instanceof(signal, Signal)) {
-                const resolver = (content as $.SignalFunction<any>)();
-                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 = _document ? new $Text() : $('signal').attr({ type: typeof signal.value() });
-                    const set = (value: any) => $text.textContent(isObject(value) ? _JSON_stringify(value) : value);
-                    if (_instanceof($text, $Text)) $text.signals.add(signal);
-                    signal.subscribe(set);
-                    set(resolver);
-                    return [$text];
-                }
-            } else {
-                const _content = content($node) as $NodeContentResolver<$Node>;
-                if (_instanceof(_content, _Promise)) return this.process($node, _content as any);
-                else return toArray(_content).map(content => this.process($node, content)).flat();
-            }
+            const _content = content($node) as $NodeContentResolver<$Node>;
+            if (_instanceof(_content, _Promise)) return this.process($node, _content as any);
+            else return toArray(_content).map(content => this.process($node, content)).flat();
         }
         // is nested array
         if (_instanceof(content, Array)) return content.map(c => this.process($node, c)).flat();
@@ -122,17 +90,18 @@ export class $Node {
 }
 
 export class $Text extends $Node {
-    signals = new Set<Signal<any>>();
     constructor(textContent?: string) {
         super(new Text(textContent));
     }
 }
 
+export type $NodeSetterHandler = (value: any, set: (value: any) => void) => any;
+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 | $.SignalFunction<any> | null | undefined;
+export type $NodeContentTypes = $Node | string | number | boolean | $.$NodeContentTypeExtends | null | undefined;
 export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
 
-export interface $Node {
+export interface $Node<EvMap = {}> extends $EventTarget<EvMap> {
     /** {@link Node.baseURI} */
     readonly baseURI: string;
     /** {@link Node.childNodes} */
@@ -157,13 +126,21 @@ export interface $Node {
     readonly parentNode?: ParentNode | null;
     /** {@link Node.previousSibling} */
     readonly previousSibling?: ChildNode | null;
+    /** {@link ParentNode.childElementCount} */
+    readonly childElementCount: number;
+    /** {@link ParentNode.children} */
+    readonly children: HTMLCollection;
+    /** {@link ParentNode.firstElementChild} */
+    readonly firstElementChild: Element | null;
+    /** {@link ParentNode.lastElementChild} */
+    readonly lastElementChild: Element | null;
     
     /** {@link Node.appendChild} */
     appendChild<T extends Node>(node: T): T;
     /** {@link Node.cloneNode} */
     cloneNode(subtree?: boolean): Node;
     /** {@link Node.compareDocumentPosition} */
-    compareDocumentPosition(other: Node): number;
+    compareDocumentPosition(other: $EventTarget | Node): number;
     /** {@link Node.getRootNode} */
     getRootNode(options?: GetRootNodeOptions): Node;
     /** {@link Node.hasChildNodes} */
@@ -173,9 +150,9 @@ export interface $Node {
     /** {@link Node.isDefaultNamespace} */
     isDefaultNamespace(namespace: string | null): boolean;
     /** {@link Node.isEqualNode} */
-    isEqualNode(otherNode: Node | null): boolean;
+    isEqualNode(otherNode: $EventTarget | Node | null): boolean;
     /** {@link Node.isSameNode} */
-    isSameNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: $EventTarget | Node | null): boolean;
     /** {@link Node.lookupNamespaceURI} */
     lookupNamespaceURI(prefix: string | null): string | null;
     /** {@link Node.lookupPrefix} */
@@ -186,20 +163,34 @@ export interface $Node {
     removeChild<T extends Node>(child: T): T;
     /** {@link Node.replaceChild} */
     replaceChild<T extends Node>(node: Node, child: T): T;
-    /** {@link Node.replaceChild} */
-    after(...nodes: (Node | string)[]): this;
-    /** {@link Node.replaceChild} */
-    before(...nodes: (Node | string)[]): this;
-    /** {@link Node.replaceChild} */
+    /** {@link Node.contains} */
+    contains(other: $EventTarget | EventTarget | null | undefined): boolean;
+
+    /** {@link ChildNode.after} */
+    after(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ChildNode.before} */
+    before(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ChildNode.remove} */
     remove(): this;
-    /** {@link Node.replaceChild} */
-    replaceWith(...nodes: (Node | string)[]): this;
-    /** {@link EventTarget.addEventListener} */
-    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
-    /** {@link EventTarget.removeEventListener} */
-    removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
-    /** {@link EventTarget.dispatchEvent} */
-    dispatchEvent(event: Event): boolean;
+    /** {@link ChildNode.replaceWith} */
+    replaceWith(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ParentNode.append} */
+    append(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ParentNode.prepend} */
+    prepend(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ParentNode.querySelector} */
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    /** {@link ParentNode.querySelectorAll} */
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    /** {@link ParentNode.replaceChildren} */
+    replaceChildren(...nodes: ($EventTarget | Node | string)[]): this;
 
     /** {@link Node.nodeValue} */
     nodeValue(nodeValue: $Parameter<string | null>): this;

package/packages/core/src/node/$Virtual.ts

@@ -0,0 +1,65 @@
+import { chain } from "#lib/chain";
+import { forEach, _Array_from, _instanceof, _null, toArray } from "@amateras/utils";
+import { $HTMLElement } from "#node/$HTMLElement";
+import { $Node, type $NodeContentResolver } from "#node/$Node";
+
+export class $Virtual<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $HTMLElement<Ele, EvMap> {
+    nodes = new Set<$Node>();
+    hiddenNodes = new Set<$Node>();
+    constructor(resolver: string | Ele) {
+        super(resolver);
+    }
+
+    content(children: $NodeContentResolver<this>) {
+        return chain(this, _null, _null, children, children => {
+            this.nodes.clear();
+            forEach(this.childNodes, node => node.remove());
+            this.insert(children);
+        })
+    }
+
+    insert(resolver: $NodeContentResolver<this>, position = -1) {
+        // process nodes
+        forEach(toArray(resolver), resolve_child => {
+            forEach($Node.process(this, resolve_child), $node => {
+                $Virtual.append(this, $node, position)
+                if (position >= 0) position++;
+            })
+        });
+        return this;
+    }
+
+    hide($node?: $Node | null) {
+        if ($node && this.nodes.has($node)) this.hiddenNodes.add($node);
+        return this;
+    }
+
+    show($node?: $Node | null) {
+        if ($node) this.hiddenNodes.delete($node);
+        return this;
+    }
+
+    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(visibleNodes, ($node, i) => {
+            if (
+                !$node.inDOM() // node is not in dom tree
+                && $(this.childNodes).at(i) !== $node // node not matched at position
+            ) $Node.append(this, $node, i);
+        })
+        return this;
+    }
+
+    static append($node: $Virtual, child: $Node | undefined | null, position: number) {
+        if (child) {
+            const childList = _Array_from($node.nodes);
+            if (!childList.at(position)) childList.push(child);
+            else childList.splice(position >= 0 ? position : childList.length + 1 + position, 0, child);
+            $node.nodes = new Set(childList);
+        }
+    }
+}

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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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