amateras 0.13.2 → 0.14.0

package/packages/core/src/index.ts

@@ -4,6 +4,8 @@ import './global';
 import { ElementProto } from './structure/ElementProto';
 import { Proto } from './structure/Proto';
 import { TextProto } from './structure/TextProto';
+import type { ProxyProto } from '#structure/ProxyProto';
+import type { NodeProto } from '#structure/NodeProto';
 
 function createProto(insert: boolean, ...args: any) {
     const prevProtoParent = Proto.proto;
@@ -37,9 +39,12 @@ function createProto(insert: boolean, ...args: any) {
     
     // Function Handler
     if (isFunction(arg1)) {
-        let args: [any, any] = isFunction(arg2) ? [{}, arg2] : [arg2, arg3];
+        let args = arg2 ? [arg2, arg3] : [arg3];
+        if (_instanceof(arg1.prototype, ElementProto)) {
+            args = isFunction(arg2) ? [{}, arg2] : [arg2, arg3];
+        }
+        // Constructor Handler
         let target = new arg1(...args);
-        // Widget Handler
         if (_instanceof(target, Proto)) {
             addProtoToParent(target);
             return target;
@@ -81,42 +86,96 @@ type ElementProtoArguments<C extends Constructor> =
     ?   [layout?: ConstructorParameters<C>[1]] | [props: ConstructorParameters<C>[0], layout?: ConstructorParameters<C>[1]] 
     :   [props: ConstructorParameters<C>[0], layout?: ConstructorParameters<C>[1]] 
 
-export function $<T extends ElementProto<any>, C extends Constructor<T>, R extends InstanceType<C>>(constructor: C, ...args: ElementProtoArguments<C>): R;
-export function $(template: TemplateStringsArray, ...args: any[]): Proto[];
-export function $(proto: Proto): Proto;
-export function $(args: any[]): Proto[];
-export function $<T extends keyof HTMLElementTagNameMap>(tagname: T, layout?: $.Layout<ElementProto<HTMLElementTagNameMap[T]>>): ElementProto;
-export function $<T extends string>(tagname: T, layout?: $.Layout<ElementProto>): ElementProto;
-export function $<T extends keyof HTMLElementTagNameMap>(tagname: T, attr: $.Props, layout?: $.Layout<ElementProto<HTMLElementTagNameMap[T]>>): ElementProto;
-export function $<T extends string>(tagname: T, attr: $.Props, layout?: $.Layout<ElementProto>): ElementProto;
+export function $<K extends $.Overload[keyof $.Overload][0][0], T extends $.OverloadResolver<[K]>>(arg1: K, ...args: T[1]): T[0];
+export function $<K extends $.Overload[keyof $.Overload][0][0], L extends $.Overload[keyof $.Overload][0][1], T extends $.OverloadResolver<[K, L]>>(arg1: K, arg2: L, ...args: T[1]): T[0];
 export function $(...args: any): any {
     return createProto(true, ...args);
 }
 
 interface Craft {
-    <T extends ElementProto<any>, C extends Constructor<T>, R extends InstanceType<C>>(constructor: C, ...args: ElementProtoArguments<C>): R;
-    (template: TemplateStringsArray, ...args: any[]): Proto[];
-    (proto: Proto): Proto;
-    (args: any[]): Proto[];
-    <T extends keyof HTMLElementTagNameMap>(tagname: T, layout?: $.Layout<ElementProto<HTMLElementTagNameMap[T]>>): ElementProto;
-    <T extends string>(tagname: T, layout?: $.Layout<ElementProto>): ElementProto;
-    <T extends keyof HTMLElementTagNameMap>(tagname: T, attr: $.Props, layout?: $.Layout<ElementProto<HTMLElementTagNameMap[T]>>): ElementProto;
-    <T extends string>(tagname: T, attr: $.Props, layout?: $.Layout<ElementProto>): ElementProto;
+    <K extends $.Overload[keyof $.Overload][0][0], T extends $.OverloadResolver<[K]>>(arg1: K, ...args: T[1]): T[0];
+    <K extends $.Overload[keyof $.Overload][0][0], L extends $.Overload[keyof $.Overload][0][1], T extends $.OverloadResolver<[K, L]>>(arg1: K, arg2: L, ...args: T[1]): T[0];
 }
 
 export namespace $ {
     /** Layout 是一个 Proto 模板函数，所有在此函数中运行 $ 函数所创建的 Proto 都会被加入到运行 Layout 的 Proto 中。 */
     export type Layout<E extends Proto = any> = (proto: E) => void;
     /** Props 是组件函数的参数，集合了该组件的自定义属性，以及组件 Layout 函数和元素属性的传递。 */
-    export type Props<T = {}> = { [key: string]: any } & T & Partial<AttrMap>;
+    export type Props<T = {}, H = HTMLElement> = { [key: string]: any } & T & Partial<AttrMap<H>>;
 
     export type CraftMiddleware = (...args: any[]) => any;
     export type TextMiddleware = (value: any) => Proto | undefined;
     export type AttrMiddleware = (name: string, value: any, proto: ElementProto) => any;
+
+    export interface Overload<I extends any[] = any> {
+        proto: [
+            input: [Proto],
+            output: I[0] extends Constructor<infer P> ? P : I[0],
+            args: []
+        ]
+        template: [
+            input: [TemplateStringsArray],
+            output: Proto[],
+            args: any[]
+        ]
+        arr: [
+            input: [any[]],
+            output: Proto[],
+            args: []
+        ]
+        elementConstructor: [
+            input: [Constructor],
+            output: I[0] extends Constructor<infer E>
+                ?   E extends ElementProto<any>
+                    ?   InstanceType<I[0]> 
+                    :   never
+                :   never,
+            args: I[0] extends Constructor<infer E>
+                ?   E extends ElementProto<any>
+                    ?   ElementProtoArguments<I[0]>
+                    :   never
+                :   never,
+        ],
+        proxyConstructor: [
+            input: [Constructor],
+            output: I[0] extends Constructor<infer P> ? P : I[0],
+            args: I[0] extends Constructor<infer E>
+                ?   E extends ProxyProto
+                    ?   ConstructorParameters<I[0]>
+                    :   never
+                : never
+        ]
+        string: [
+            input: [string] | [keyof HTMLElementTagNameMap],
+            output: I[0] extends keyof HTMLElementTagNameMap ? ElementProto<HTMLElementTagNameMap[I[0]]> : ElementProto,
+            args: [
+                props?: I[0] extends keyof HTMLElementTagNameMap ? $.Props<{}, HTMLElementTagNameMap[I[0]]> : $.Props, 
+                layout?: 
+                    |   $.Layout<I[0] extends keyof HTMLElementTagNameMap ? ElementProto<HTMLElementTagNameMap[I[0]]> : ElementProto>] 
+                    |   [layout?: $.Layout<I[0] extends keyof HTMLElementTagNameMap ? ElementProto<HTMLElementTagNameMap[I[0]]> : ElementProto>
+                ]
+        ]
+    }
     
-    export interface AttrMap {}
+    export type OverloadResolver<K extends any[]> = {
+        [I in keyof Overload<K>]: Overload<K>[I] extends [infer Input, infer Output, infer Args]
+            ?   K extends Input
+                ?   [Output, Args] 
+                :   never
+            :   never
+        }[keyof Overload<K>];
+
+    export interface AttrMap<T> extends ElementProtoOnEventMap<T> {}
+
+    type ElementProtoOnEventMap<T> = {
+        [key in keyof HTMLElementEventMap as string extends string ? `on${key}` : never]: string | ((event: HTMLElementEventMap[key] & { currentTarget: T }) => void)
+    }
     
-    export interface ProtoEventMap {}
+    export interface ProtoEventMap<P extends Proto> {
+        dispose: [];
+        builded: [];
+        dom: [node: P extends NodeProto ? Exclude<P['node'], null> : Node]
+    }
 
     export const process = {
         craft: new Set<CraftMiddleware>(),
@@ -126,15 +185,11 @@ export namespace $ {
 
     export const craft: Craft = (...args: any) => createProto(false, ...args);
 
-    export const dispose = (disposer: () => void) => {
-        Proto.proto?.ondispose(disposer);
-    }
-
-    export const render = (proto: Proto, query: string) => {
+    export const render = (proto: Proto | Constructor<Proto>, query: string) => {
         // Disable render on server side
         if (onserver()) return;
-        
-        let nodes = $(proto).build().toDOM()
+
+        let nodes = $(proto as Proto).build().toDOM()
         document.querySelector(query)?.replaceChildren(...nodes);
         // if (!hmr(element, proto)) {
         //     let nodes = proto.build().toDOM()
@@ -180,9 +235,9 @@ export namespace $ {
         return cases.get(condition)?.() ?? cases.get(symbol_default)?.();
     }
 
-    export const async = (fn: () => Promise<void>) => {
-        Proto.proto?.global.asyncTask(fn());
-    }
+    export const tuple = <T extends any[]>(...args: T) => args;
+
+    export const async = <T>(fn: (parent: Proto | null) => Promise<T>): Promise<T> => Proto.proto?.global.asyncTask(fn(Proto.proto)) ?? fn(Proto.proto);
 
     export const stylesheet = onclient() ? new CSSStyleSheet() : _null;
     export const styleMap = new Map<Constructor<ElementProto>, Set<string>>();

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

@@ -58,10 +58,10 @@ function diff(parentElement: HTMLElement, newProto: Proto, oldProto?: Proto, pre
         if (!_instanceof(oldProto, NodeProto) || !_instanceof(newProto, NodeProto)) return;
         newProto.node = oldProto.node;
         oldProto.dispose();
-        if (newProto.modifiers) forEach(newProto.modifiers, mod => {
-            if (!newProto.node) throw 'diff:transferNode:newProto.node==null'
-            mod(newProto.node)
-        })
+        // if (newProto.modifiers) forEach(newProto.modifiers, mod => {
+        //     if (!newProto.node) throw 'diff:transferNode:newProto.node==null'
+        //     mod(newProto.node)
+        // })
     }
 
     if (!oldProto) {

package/packages/core/src/structure/ElementProto.ts

@@ -1,4 +1,4 @@
-import { _Array_from, _null, _Object_assign, _Object_entries, forEach, isNull, isUndefined, map } from "@amateras/utils";
+import { _Array_from, _null, _Object_assign, _Object_entries, forEach, isFunction, isNull, isUndefined, map } from "@amateras/utils";
 import { NodeProto } from "./NodeProto";
 
 const SELF_CLOSING_TAGNAMES = ['img', 'hr', 'br', 'input', 'link', 'meta'];
@@ -9,7 +9,7 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
     declare layout: $.Layout | null;
     #innerHTML = '';
     private __props__: $.Props | null
-    constructor(tagname: string, props: $.Props | null, layout?: $.Layout | null) {
+    constructor(tagname: string, props: $.Props<any, any> | null, layout?: $.Layout | null) {
         super(() => layout?.(this));
         this.tagname = tagname;
         this.__props__ = props;
@@ -32,6 +32,13 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
     props({ ...props }: $.Props) {
         let {class: className, ...propsFiltered} = props;
         if (className) this.addClass(...className.split(' '));
+        // handle event listener in props
+        forEach(_Object_entries(propsFiltered), ([name, value]) => {
+            if (name.startsWith('on') && isFunction(value)) {
+                this.on(name.replace('on', ''), value);
+                delete propsFiltered[name];
+            }
+        })
         this.attrProcess(propsFiltered);
     }
 
@@ -40,19 +47,19 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
     on(type: string, listener: (event: Event & { currentTarget: H }) => void, options?: boolean | AddEventListenerOptions) {
         let setListener = (node: Node) => {
             node.addEventListener(type, listener as any, options)
-            this.ondispose(() => this.node?.removeEventListener(type, listener as any))
+            this.listen('dispose', () => this.node?.removeEventListener(type, listener as any))
         }
         if (this.node) setListener(this.node);
-        else this.ondom(setListener);
+        else this.listen('dom', setListener);
     }
 
     override toString(): string {
-        return this.parseHTML()
+        return this.parseHTML();
     }
 
     parseHTML(options?: { children?: string, attr?: string }) {
         let tagname = this.tagname;
-        let childrenHTML = options?.children ?? (this.#innerHTML || map(this.protos, proto => `${proto}`).join(''));
+        let childrenHTML = options?.children ?? (this.#innerHTML || map(this.protos, proto => proto.visible ? `${proto}` : '').join(''));
         let attr = options?.attr ?? map(_Object_entries(this.#attr), ([key, value]) => value.length ? `${key}="${value}"` : key).join(' ');
         let attrText = attr.length ? ' ' + attr : '';
         if (SELF_CLOSING_TAGNAMES.includes(tagname)) return `<${tagname}${attrText} />`;
@@ -60,16 +67,31 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
     }
 
     override toDOM(children = true): H[] {
-        if (this.node) return [this.node];
-        let element = document.createElement(this.tagname) as H;
+        let element = this.node ?? document.createElement(this.tagname) as H;
         this.node = element;
-        if (this.#innerHTML) this.node.innerHTML = this.#innerHTML;
-        else if (children) element.append(...map(this.protos, proto => proto.toDOM(children)).flat());
+        if (this.#innerHTML && this.node.innerHTML !== this.#innerHTML) this.node.innerHTML = this.#innerHTML;
+        else if (children) this.DOMProcess();
         forEach(_Object_entries(this.#attr), ([key, value]) => element.setAttribute(key, value));
-        forEach(this.modifiers, process => process(element));
+        this.dispatch('dom', [this.node])
         return [element];
     }
 
+    private DOMProcess() {
+        let thisNode = this.node;
+        if (thisNode) {
+            let nodes = map(_Array_from(this.protos).filter(proto => proto.visible), proto => proto.toDOM()).flat();
+            let nextNode: Node | null = _null;
+            forEach(nodes, (node, i) => {
+                let currentNode = thisNode.childNodes[i];
+                if (currentNode !== node) {
+                    if (!nodes.includes(currentNode as any)) nextNode = currentNode ?? _null;
+                    else nextNode = thisNode.childNodes[i + 1] ?? _null;
+                    thisNode.insertBefore(node, nextNode);
+                }
+            })
+        }
+    }
+
     private attrProcess(attrObj: $.Props) {
         forEach(_Object_entries(attrObj), ([key, value]) => {
             for (let process of $.process.attr) {

package/packages/core/src/structure/GlobalState.ts

@@ -1,26 +1,35 @@
 import { _null, _Object_assign, forEach } from "@amateras/utils";
-import type { Proto } from "./Proto";
+import { Proto } from "./Proto";
+
+export type GlobalStateInitial = (global: GlobalState) => object | void;
 
 export class GlobalState {
     static disposers = new Set<(global: GlobalState) => void>()
     promises = new Set<Promise<any>>();
     root: Proto;
+    static initials = new Set<GlobalStateInitial>();
     constructor(root: Proto) {
+        forEach(GlobalState.initials, initial => {
+            const obj = initial(this);
+            if (obj) _Object_assign(this, obj);
+        })
         this.root = root;
-        root.ondispose(() => this.dispose());
+        root.listen('dispose', () => this.dispose());
     }
+    
     dispose() {
         this.promises.clear();
         this.root = _null as any;
         forEach(GlobalState.disposers, disposer => disposer(this));
     }
 
-    static assign(obj: object) {
-        _Object_assign(GlobalState.prototype, obj);
+    static assign(initial: GlobalStateInitial) {
+        this.initials.add(initial);
     }
 
     asyncTask(promise: Promise<any>) {
         this.promises.add(promise);
         promise.finally(() => this.promises.delete(promise));
+        return promise;
     }
 }

package/packages/core/src/structure/NodeProto.ts

@@ -4,20 +4,18 @@ import { onclient } from "#env";
 
 export class NodeProto<N extends Node & ChildNode = Node & ChildNode> extends Proto {
     node: null | N = _null;
-    modifiers: null | ((node: N) => void)[] = _null
     constructor(layout?: $.Layout) {
         super(layout);
     }
 
+    /**@deprecated - use `Proto.listen` on 'dom' event instead */
     ondom(callback: (node: N) => void) {
-        this.modifiers = this.modifiers ?? [];
-        this.modifiers.push(callback);
+        this.listen('dom', callback as any)
     }
 
     override dispose(): void {
         super.dispose();
         this.node = _null;
-        this.modifiers = _null
     }
 
     inDOM() {

package/packages/core/src/structure/Proto.ts

@@ -8,8 +8,6 @@ export abstract class Proto {
     static proto: Proto | null = _null; 
     static [symbol_ProtoType] = 'Proto';
     static [symbol_Statement] = false;
-    static disposer: ((proto: Proto) => void)[] = []
-    private disposers: Function[] | null = _null;
     layout: $.Layout | null;
     readonly parent: Proto | null = _null;
     global: GlobalState = Proto.proto?.global ?? new GlobalState(this);
@@ -17,7 +15,8 @@ export abstract class Proto {
     firstProto: Proto | null = _null;
     lastProto: Proto | null = _null;
     builded = false;
-    listeners: { [key: string]: Set<(src: Proto) => void> } | null = _null;
+    visible = true;
+    listeners: { [key: string]: Set<(...args: any[]) => void> } | null = _null;
     /**
      * @virtual This property is phantom types, declare the return type of {@link Proto.children}
      * @deprecated
@@ -28,20 +27,18 @@ export abstract class Proto {
     }
 
     dispose() {
-        forEach(Proto.disposer, disposer => disposer(this));
-        forEach(this.disposers, disposer => disposer());
+        this.dispatch('dispose', [this])
         forEach(this.protos, proto => proto.dispose());
         this.global = _null as any;
         this.sibling = _null;
         this.firstProto = _null;
         this.lastProto = _null;
-        this.disposers = _null;
         (this as Mutable<this>).parent = _null;
         this.layout = _null;
     }
 
     get children(): this['__child__'][] {
-        return map(this.protos, proto => {
+        return map(Array.from(this.protos).filter(proto => proto.visible), proto => {
             //@ts-ignore
             if (proto.constructor[symbol_Statement]) 
                 return proto.children
@@ -105,6 +102,10 @@ export abstract class Proto {
         proto.global = this.global;
     }
 
+    remove() {
+        this.parent?.removeProtos(this);
+    }
+
     removeProtos(...protos: Proto[]) {
         let protoSet = this.protos;
         forEach(protos, proto => {
@@ -116,11 +117,12 @@ export abstract class Proto {
     }
 
     private processProtos(...protos: Proto[]) {
-        let prevProto: null | Proto = null;
+        let prevProto: null | Proto = _null;
         if (protos.length)
             forEach(protos, (proto, i) => {
                 if (i === 0) this.firstProto = proto;
                 if (prevProto) prevProto.sibling = proto;
+                proto.sibling = _null;
                 prevProto = proto;
                 (proto as Mutable<Proto>).parent = this;
             })
@@ -129,28 +131,30 @@ export abstract class Proto {
         this.lastProto = prevProto;
     }
 
-    build(cascading = true): this {
-        this.clear(true);
+    build(cascading = true, clear = true): this {
+        if (clear) this.clear(true);
         $.context(Proto, this, () => this.layout?.(this));
         this.builded = true;
         if (cascading) forEach(this.protos, proto => {
             proto.build()
         });
-        this.dispatch('builded', this);
+        this.dispatch('builded', [this]);
         return this
     }
 
     toString(): string {
-        return map(this.protos, proto => `${proto}`).join('')
+        return map(_Array_from(this.protos).filter(proto => proto.visible), proto => `${proto}`).join('')
     }
 
     toDOM(children = true): Node[] {
-        return children ? map(this.protos, proto => proto.toDOM(children)).flat() : [];
+        return children ? map(_Array_from(this.protos).filter(proto => proto.visible), proto => proto.toDOM(children)).flat() : [];
     }
 
+    /**
+     * @deprecated use Proto.listen('dispose') instead
+     */
     ondispose(disposer: () => void) {
-        this.disposers = this.disposers ?? [];
-        this.disposers.push(disposer);
+        this.listen('dispose', disposer);
     }
 
     removeNode() {
@@ -169,10 +173,10 @@ export abstract class Proto {
         return _null;
     }
 
-    findBelow(filter: (proto: Proto) => boolean | void): Proto | null {
+    findBelow<T extends Proto>(filter: (proto: Proto) => boolean | void): T | null {
         for (let proto of this.protos) {
-            if (filter(proto)) return proto;
-            let nested = proto.findBelow(filter);
+            if (filter(proto)) return proto as T;
+            let nested = proto.findBelow<T>(filter);
             if (nested) return nested;
         }
         return _null;
@@ -196,14 +200,24 @@ export abstract class Proto {
     get text(): string {
         return this.children.map(proto => proto.text).join('')
     }
-
-    dispatch(type: string, src: Proto, options?: {bubbles?: boolean}) {
-        if (options?.bubbles) this.parent?.dispatch(type, src, options);
+    
+    dispatch<K extends keyof $.ProtoEventMap<this>>(type: K, args: $.ProtoEventMap<this>[K], options?: {bubbles?: boolean}): boolean
+    dispatch(type: string, args: any[], options?: {bubbles?: boolean}): boolean
+    dispatch(type: string, args: any[], options?: {bubbles?: boolean}): boolean {
         let handlerSet = this.listeners?.[type];
-        forEach(handlerSet, handle => handle(src));
+        let preventDefault = false;
+        if (options?.bubbles) {
+            let prevent = this.parent?.dispatch(type, args, options);
+            if (!preventDefault) preventDefault = prevent ?? false;
+        }
+        forEach(handlerSet, handle => {
+            let prevent = handle(...args) ?? false;
+            if (!preventDefault) preventDefault = prevent;
+        });
+        return preventDefault;
     }
 
-    listen<K extends keyof $.ProtoEventMap>(type: K, handle: (...args: $.ProtoEventMap[K]) => void): void;
+    listen<K extends keyof $.ProtoEventMap<this>>(type: K, handle: (...args: $.ProtoEventMap<this>[K]) => void): void;
     listen(type: string, handle: (src: Proto) => void): void;
     listen(type: string, handle: (...args: any) => void) {
         let listeners = this.listeners ?? {};

package/packages/core/src/structure/TextProto.ts

@@ -1,4 +1,3 @@
-import { forEach } from "@amateras/utils";
 import { NodeProto } from "./NodeProto";
 
 export class TextProto extends NodeProto<Text> {
@@ -25,7 +24,7 @@ export class TextProto extends NodeProto<Text> {
         if (this.node) return [this.node];
         let node = new Text(this.#content);
         this.node = node;
-        forEach(this.modifiers, mod => mod(node));
+        this.dispatch('dom', [this.node])
         return [node];
     }
 

package/packages/css/README.md

@@ -1,6 +1,6 @@
 # amateras/css
 
-## Usage
+## Import
 ```ts
 import 'amateras';
 import 'amateras/css';
@@ -21,23 +21,27 @@ const style = $.css({
     }
 })
 
-$(document.body).css(style).content([
-    $('p').content('Text with blue color.')
-]);
+$('div', { css: style }, $$ => {
+    $('p', $$ => $`Change the size of window to see the color changes.`)
+})
 ```
 
-## Define Style in Method Chain
+## Define Style in Layout
+There are two way to define CSS rule of proto.
 ```ts
-$(document.body).content([
-    $('h1').css({ color: 'red' }).content('This is a title with red color!')
-])
+$('div', $$ => {
+    $$.css({
+        padding: '1rem 2rem'
+    })
+    $('h1', { css: { color: 'red' } }, $$ => $`This is a title with red color!`)
+})
 ```
 
 ## Define Variables
 
 ### Single Variable
 ```ts
-const largeText = $.css.variables('1.2rem');
+const largeText = $.css.variable('1.2rem');
 
 $.css({
     fontSize: largeText
@@ -46,7 +50,9 @@ $.css({
 
 ### Variable Group
 ```ts
-const text = $.css.variables({
+import 'amateras/css/variable';
+
+const text = $.css.variable({
     small: '0.8rem',
     medium: '1rem',
     large: '1.2rem'
@@ -59,6 +65,8 @@ $.css({
 
 ## Define Keyframes
 ```ts
+import 'amateras/css/keyframes';
+
 const keyframes = $.css.keyframes({
     fadeIn: {
         '0%': { opacity: 0 },
@@ -101,11 +109,6 @@ $.CSS({
         }
     },
 })
-
-$(document.body).content([
-    $('h1').class('title').content('A red color title.')
-])
-
 ```
 
 ### CSS Colors Preset

package/packages/css/src/ext/property.ts

@@ -26,9 +26,8 @@ declare global {
 
         export type CSSPropertyMap = { 
             [key: string]: 
-                [$.CSSPropertySyntax, string | number, boolean]
-                | [$.CSSPropertySyntax, string | number]
-                | ['*']
+                [syntax: $.CSSPropertySyntax, initialValue?: string | number, inherits?: boolean]
+                | [syntax: '*']
         } 
     }
 }

package/packages/css/src/index.ts

@@ -25,7 +25,7 @@ declare global {
             export function rules(proto: Proto): $CSSRule[];
         }
 
-        export interface AttrMap {
+        export interface AttrMap<T> {
             css: OrArray<$.CSSMap | $CSSRule>;
         }
     }

package/packages/css/src/structure/$CSSProperty.ts

@@ -18,4 +18,8 @@ export class $CSSProperty extends $CSS {
     toString() {
         return `var(${this.name})`
     }
+
+    declare(value?: $.CSSValue) {
+        return {[this.name]: `${value ?? this.initialValue}`}
+    }
 }

package/packages/css/src/structure/$CSSVariable.ts

@@ -24,7 +24,7 @@ export class $CSSVariable<V = string> extends $CSS {
         return `var(${this.name}, ${value})`
     }
 
-    declare(value?: V | $CSSVariable) {
+    declare(value?: $.CSSValue | $CSSVariable) {
         return {[this.name]: `${value ?? this.value}`}
     }
 

package/packages/css/src/types.ts

@@ -85,6 +85,7 @@ export interface $CSSDeclarationMap {
     content: string;
     counterIncrement: string;
     counterReset: string;
+    container: string;
     containerName: string;
     containerType: 'inline-size' | 'size' | 'normal' | 'scroll-state';
     cursor: 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';
@@ -234,6 +235,9 @@ export interface $CSSDeclarationMap {
     scrollMarginInline: string;
     scrollMarginInlineStart: string;
     scrollMarginInlineEnd: string;
+    scrollbarWidth: 'thin' | 'none' | 'auto'
+    scrollbarGutter: OptionalStrings<['stable', 'both-edges']>
+    scrollbarColor: 'auto';
     shapeRendering: 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision';
     stopColor: string;
     stopOpacity: string;
@@ -270,6 +274,7 @@ export interface $CSSDeclarationMap {
     textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
     textUnderlineOffset: string;
     textUnderlinePosition: 'auto' | 'under' | 'left' | 'right';
+    textWrap: 'auto' | 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable'
     top: string;
     touchAction: 'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation';
     transform: string;