amateras 0.1.1 → 0.3.0

package/ext/css/src/lib/colors/purple.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _purple = {
+    50: '#faf5ff',
+    100: '#f3e8ff',
+    200: '#e9d5ff',
+    300: '#d8b4fe',
+    400: '#c084fc',
+    500: '#a855f7',
+    600: '#9333ea',
+    700: '#7e22ce',
+    800: '#6b21a8',
+    900: '#581c87',
+    950: '#3b0764',
+} as const;
+
+colorAssign('purple', _purple);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const purple: typeof _purple;
+        }
+    }
+}

package/ext/css/src/lib/colors/red.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _red = {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+    950: '#450a0a',
+} as const;
+
+colorAssign('red', _red);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const red: typeof _red;
+        }
+    }
+}

package/ext/css/src/lib/colors/rose.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _rose = {
+    50: '#fff1f2',
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+    950: '#4c0519',
+} as const;
+
+colorAssign('rose', _rose);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const rose: typeof _rose;
+        }
+    }
+}

package/ext/css/src/lib/colors/sky.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _sky = {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+    950: '#082f49',
+} as const;
+
+colorAssign('sky', _sky);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const sky: typeof _sky;
+        }
+    }
+}

package/ext/css/src/lib/colors/slate.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _slate = {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+} as const
+
+colorAssign('slate', _slate);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const slate: typeof _slate;
+        }
+    }
+}

package/ext/css/src/lib/colors/stone.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _stone = {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917',
+    950: '#0c0a09',
+} as const;
+
+colorAssign('stone', _stone);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const stone: typeof _stone;
+        }
+    }
+}

package/ext/css/src/lib/colors/teal.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _teal = {
+    50: '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+    950: '#042f2e',
+} as const;
+
+colorAssign('teal', _teal);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const teal: typeof _teal;
+        }
+    }
+}

package/ext/css/src/lib/colors/violet.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _violet = {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+    950: '#2e1065',
+} as const;
+
+colorAssign('violet', _violet);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const violet: typeof _violet;
+        }
+    }
+}

package/ext/css/src/lib/colors/yellow.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _yellow = {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+    950: '#422006',
+} as const;
+
+colorAssign('yellow', _yellow);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const yellow: typeof _yellow;
+        }
+    }
+}

package/ext/css/src/lib/colors/zinc.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _zinc = {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+} as const;
+
+colorAssign('zinc', _zinc);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const zinc: typeof _zinc;
+        }
+    }
+}

package/ext/css/src/lib/colors.ts

@@ -0,0 +1,23 @@
+import './colors/amber';
+import './colors/blackwhite';
+import './colors/blue';
+import './colors/cyan';
+import './colors/emerald';
+import './colors/fuchsia';
+import './colors/gray';
+import './colors/green';
+import './colors/indigo';
+import './colors/lime';
+import './colors/neutral';
+import './colors/orange';
+import './colors/pink';
+import './colors/purple';
+import './colors/red';
+import './colors/rose';
+import './colors/sky';
+import './colors/slate';
+import './colors/stone';
+import './colors/teal';
+import './colors/violet';
+import './colors/yellow';
+import './colors/zinc';

package/ext/css/src/structure/$CSSKeyframesRule.ts

@@ -1,17 +1,14 @@
 import { $CSSRule } from "#structure/$CSSRule";
+import { _Array_from } from "../../../../src/lib/native";
 
 export class $CSSKeyframesRule extends $CSSRule {
     name: string;
     constructor(name: string) {
-        super();
+        super(`@keyframes ${name}`);
         this.name = name;
     }
     
     toString(): string {
         return this.name;
     }
-
-    get css() {
-        return `@keyframes ${this.name} { ${Array.from(this.rules).map(rule => rule.css).join(' ')} }`
-    }
 }

package/ext/css/src/structure/$CSSMediaRule.ts

@@ -1,30 +1,10 @@
 import { _Array_from, _instanceof } from "amateras/lib/native";
 import { $CSSRule } from "#structure/$CSSRule";
-import { $CSSStyleRule } from "./$CSSStyleRule";
 
 export class $CSSMediaRule extends $CSSRule {
     condition: string;
-    constructor(condition: string) {
-        super();
-        this.condition = condition;
-    }
-
-    get css(): string {
-        function findOwnerMediaRule(rule: $CSSRule, contextRules: $CSSMediaRule[]) {
-            const ownerRule = rule.ownerRule;
-            if (!ownerRule) return contextRules;
-            if (_instanceof(ownerRule, $CSSMediaRule)) return findOwnerMediaRule(ownerRule, [ownerRule, ...contextRules]);
-            else return findOwnerMediaRule(ownerRule, contextRules);
-        }
-        
-        function findChildRules(rule: $CSSRule, rules: $CSSStyleRule[] = []) {
-            _Array_from(rule.rules).forEach((_rule => {
-                if (!_instanceof(_rule, $CSSStyleRule)) return;
-                rules.push(_rule);
-                return findChildRules(_rule, rules);
-            }))
-            return rules
-        }
-        return `@media ${findOwnerMediaRule(this, [this]).map(rule => rule.condition).join(' and ')} { ${findChildRules(this).map(rule => rule.css).join(' ')} }`
+    constructor(selector: string) {
+        super(selector);
+        this.condition = selector.replace('@media ', '');
     }
 }

package/ext/css/src/structure/$CSSRule.ts

@@ -1,25 +1,13 @@
-import { _instanceof } from "amateras/lib/native";
-import { $CSSMediaRule } from "#structure/$CSSMediaRule";
+import { _Array_from, _instanceof, _Object_fromEntries } from "amateras/lib/native";
 
 export abstract class $CSSRule {
     rules = new Set<$CSSRule>();
-    ownerRule: $CSSRule | null = null;
-    constructor() {}
-
-    abstract get css(): string;
-    
-    get mediaRules() {
-        const rules: $CSSMediaRule[] = []
-        this.rules.forEach(rule => {
-            if (_instanceof(rule, $CSSMediaRule)) rules.push(rule);
-            rules.push(...rule.mediaRules)
-        })
-        return rules;
+    selector: string;
+    constructor(selector: string) {
+        this.selector = selector;
     }
 
-    addRule(rule: $CSSRule) {
-        this.rules.add(rule);
-        rule.ownerRule = this;
-        return this;
+    get options(): {[key: string]: any} {
+        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule]))
     }
 }

package/ext/css/src/structure/$CSSStyleRule.ts

@@ -1,23 +1,21 @@
 import type { $CSSDeclaration } from "#structure/$CSSDeclaration";
 import { $CSSRule } from "#structure/$CSSRule";
-import { _Array_from, _instanceof } from "amateras/lib/native";
+import { _Array_from, _instanceof, _Object_fromEntries } from "amateras/lib/native";
 
 export class $CSSStyleRule extends $CSSRule {
-    context: string[] = [];
     declarations = new Map<string, $CSSDeclaration>();
-    className: string = '';
-    constructor(context: string[] = []) {
-        super();
-        this.context = context;
+    constructor(selector: string) {
+        super(selector);
     }
 
-    get css(): string {
-        return `${this.selector} { ${_Array_from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
+    clone(selector: string) {
+        const rule = new $CSSStyleRule(selector)
+        rule.declarations = this.declarations;
+        rule.rules = this.rules;
+        return rule
     }
 
-    get selector() {
-        const ctx: string[][] = [];
-        this.context.forEach((part, i) => ctx.push(part.split(',').map(sel => ctx[i - 1] ? ctx[i - 1]!.map(prefix => `${prefix} ${sel.trim()}`) : [sel.trim()]).flat()))
-        return ctx.at(-1)?.join(', ')
+    get options(): {[key: string]: any} {
+        return {..._Object_fromEntries(_Array_from(this.declarations).map(([_, dec]) => [dec.key, dec])), ...super.options}
     }
 }

package/ext/html/html.ts

@@ -1,59 +1,25 @@
 import '#core';
-import { $Node } from '#node/$Node';
-import { $HTMLElement } from './node/$HTMLElement';
-import './node/type';
-import { assignHelper } from '#lib/assignHelper';
-export * from './node/type';
-export * from './node/$HTMLElement';
-
-// create element classes
-export const [
-    $Input,
-    $Anchor,
-    $Image,
-    $Canvas,
-    $Dialog,
-    $Form,
-    $Label,
-    $Media,
-    $Select,
-    $Option,
-    $OptGroup,
-    $TextArea,
-] = [
-    $HTMLElementBuilder<HTMLInputElement>('input'),
-    $HTMLElementBuilder<HTMLAnchorElement>('a'),
-    $HTMLElementBuilder<HTMLImageElement>('img'),
-    $HTMLElementBuilder<HTMLCanvasElement>('canvas'),
-    $HTMLElementBuilder<HTMLDialogElement>('dialog'),
-    $HTMLElementBuilder<HTMLFormElement>('form'),
-    $HTMLElementBuilder<HTMLLabelElement>('label'),
-    $HTMLElementBuilder<HTMLMediaElement>('media'),
-    $HTMLElementBuilder<HTMLSelectElement>('select'),
-    $HTMLElementBuilder<HTMLOptionElement>('option'),
-    $HTMLElementBuilder<HTMLOptGroupElement>('optgroup'),
-    $HTMLElementBuilder<HTMLTextAreaElement>('textarea'),
-]
-
-const targets: [object: Constructor<Node>, target: Constructor<$Node>, tagname?: string][] = [
-    [HTMLElement, $HTMLElement],
-    [HTMLInputElement, $Input, 'input'],
-    [HTMLAnchorElement, $Anchor, 'a'],
-    [HTMLImageElement, $Image, 'img'],
-    [HTMLCanvasElement, $Canvas, 'canvas'],
-    [HTMLDialogElement, $Dialog, 'dialog'],
-    [HTMLFormElement, $Form, 'form'],
-    [HTMLLabelElement, $Label, 'label'],
-    [HTMLMediaElement, $Media, 'media'],
-    [HTMLSelectElement, $Select, 'select'],
-    [HTMLOptionElement, $Option, 'option'],
-    [HTMLOptGroupElement, $OptGroup, 'optgroup'],
-    [HTMLTextAreaElement, $TextArea, 'textarea'],
-];
-assignHelper(targets);
-
-function $HTMLElementBuilder<Ele extends HTMLElement>(tagName: string) {
-    return class extends $HTMLElement<Ele> {
-        constructor() { super(tagName) }
-    } 
-}
+import './node/$Anchor';
+import './node/$Dialog';
+import './node/$Form';
+import './node/$Image';
+import './node/$Canvas';
+import './node/$Input';
+import './node/$Label';
+import './node/$Media';
+import './node/$OptGroup';
+import './node/$Option';
+import './node/$Select';
+import './node/$TextArea';
+export * from './node/$Anchor';
+export * from './node/$Canvas';
+export * from './node/$Dialog';
+export * from './node/$Form';
+export * from './node/$Image';
+export * from './node/$Input';
+export * from './node/$Label';
+export * from './node/$Media';
+export * from './node/$OptGroup';
+export * from './node/$Option';
+export * from './node/$Select';
+export * from './node/$TextArea';

package/ext/html/node/$Anchor.ts

@@ -0,0 +1,49 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Anchor extends $HTMLElement<HTMLAnchorElement> {
+    constructor() {
+        super('a')
+    }
+}
+
+export interface $Anchor extends $HTMLElement<HTMLAnchorElement> {
+    /** {@link HTMLAnchorElement.href} */
+    href(href: $Parameter<string>): this;
+    href(): string;
+    /** {@link HTMLAnchorElement.hreflang} */
+    hreflang(hreflang: $Parameter<string>): this;
+    hreflang(): string;
+    /** {@link HTMLAnchorElement.download} */
+    download(download: $Parameter<string>): this;
+    download(): string;
+    /** {@link HTMLAnchorElement.ping} */
+    ping(ping: $Parameter<string>): this;
+    ping(): string;
+    /** {@link HTMLAnchorElement.referrerPolicy} */
+    referrerPolicy(referrerPolicy: $Parameter<string>): this;
+    referrerPolicy(): string;
+    /** {@link HTMLAnchorElement.rel} */
+    rel(rel: $Parameter<string>): this;
+    rel(): string;
+    /** {@link HTMLAnchorElement.relList} */
+    relList(relList: $Parameter<string>): this;
+    relList(): DOMTokenList;
+    /** {@link HTMLAnchorElement.target} */
+    target(target: $Parameter<AnchorTarget>): this;
+    target(): AnchorTarget;
+    /** {@link HTMLAnchorElement.text} */
+    text(text: $Parameter<string>): this;
+    text(): string;
+    /** {@link HTMLAnchorElement.type} */
+    type(type: $Parameter<string>): this;
+    type(): string;
+}
+
+export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top' | '_unfenced_top' | '';
+
+declare module '#core' {
+    export function $(nodeName: 'a'): $Anchor
+}
+
+assignHelper(HTMLAnchorElement, $Anchor, 'a');

package/ext/html/node/$Canvas.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
+    constructor() {
+        super('canvas')
+    }
+}
+
+export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {}
+
+assignHelper(HTMLCanvasElement, $Canvas, 'canvas');
+
+declare module '#core' {
+    export function $(nodeName: 'canvas'): $Canvas
+}

package/ext/html/node/$Dialog.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Dialog extends $HTMLElement<HTMLDialogElement> {
+    constructor() {
+        super('dialog')
+    }
+}
+
+export interface $Dialog extends $HTMLElement<HTMLDialogElement> {}
+
+assignHelper(HTMLDialogElement, $Dialog, 'dialog');
+
+declare module '#core' {
+    export function $(nodeName: 'dialog'): $Dialog
+}

package/ext/html/node/$Form.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Form extends $HTMLElement<HTMLFormElement> {
+    constructor() {
+        super('form')
+    }
+}
+
+export interface $Form extends $HTMLElement<HTMLFormElement> {}
+
+assignHelper(HTMLFormElement, $Form, 'form');
+
+declare module '#core' {
+    export function $(nodeName: 'form'): $Form
+}

package/ext/html/node/$Image.ts

@@ -0,0 +1,72 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Image extends $HTMLElement<HTMLImageElement> {
+    constructor() {
+        super('img')
+    }
+}
+
+export interface $Image extends $HTMLElement<HTMLImageElement> {
+    /** {@link HTMLImageElement.complete} */
+    readonly complete: boolean;
+    /** {@link HTMLImageElement.currentSrc} */
+    readonly currentSrc: string;
+    /** {@link HTMLImageElement.naturalHeight} */
+    readonly naturalHeight: number;
+    /** {@link HTMLImageElement.naturalWidth} */
+    readonly naturalWidth: number;
+    /** {@link HTMLImageElement.x} */
+    readonly x: number;
+    /** {@link HTMLImageElement.y} */
+    readonly y: number;
+
+    /** {@link HTMLImageElement.decode} */
+    decode(): Promise<this>;
+
+    /** {@link HTMLImageElement.alt} */
+    alt(alt: $Parameter<string>): this;
+    alt(): string;
+    /** {@link HTMLImageElement.crossOrigin} */
+    crossOrigin(crossOrigin: $Parameter<string | null>): this;
+    crossOrigin(): string | null;
+    /** {@link HTMLImageElement.decoding} */
+    decoding(decoding: $Parameter<"async" | "sync" | "auto">): this;
+    decoding(): "async" | "sync" | "auto";
+    /** {@link HTMLImageElement.fetchPriority} */
+    fetchPriority(fetchPriority: $Parameter<"high" | "low" | "auto">): this;
+    fetchPriority(): "high" | "low" | "auto";
+    /** {@link HTMLImageElement.height} */
+    height(height: $Parameter<number>): this;
+    height(): number;
+    /** {@link HTMLImageElement.isMap} */
+    isMap(isMap: $Parameter<boolean>): this;
+    isMap(): boolean;
+    /** {@link HTMLImageElement.loading} */
+    loading(loading: $Parameter<"eager" | "lazy">): this;
+    loading(): "eager" | "lazy";
+    /** {@link HTMLImageElement.referrerPolicy} */
+    referrerPolicy(referrerPolicy: $Parameter<string>): this;
+    referrerPolicy(): string;
+    /** {@link HTMLImageElement.sizes} */
+    sizes(sizes: $Parameter<string>): this;
+    sizes(): string;
+    /** {@link HTMLImageElement.src} */
+    src(src: $Parameter<string>): this;
+    src(): string;
+    /** {@link HTMLImageElement.srcset} */
+    srcset(srcset: $Parameter<string>): this;
+    srcset(): string;
+    /** {@link HTMLImageElement.useMap} */
+    useMap(useMap: $Parameter<string>): this;
+    useMap(): string;
+    /** {@link HTMLImageElement.width} */
+    width(width: $Parameter<number>): this;
+    width(): number;
+}
+
+assignHelper(HTMLImageElement, $Image, 'img');
+
+declare module '#core' {
+    export function $(nodeName: 'img'): $Image
+}