amateras 0.13.2 → 0.14.0

package/packages/signal/src/index.ts

@@ -1,17 +1,23 @@
 import { computeCleanup, track, trackSet, untrack, type UntrackFunction } from "#lib/track";
 import { Signal } from "#structure/Signal";
-import { GlobalState, TextProto } from "@amateras/core";
-import { _instanceof, _Object_assign, isIncluded, forEach, isBoolean, _null } from "@amateras/utils";
+import { GlobalState, Proto, ProxyProto, TextProto } from "@amateras/core";
+import { _instanceof, _Object_assign, forEach, _null, isString, _undefined, isBoolean, isNumber } from "@amateras/utils";
 
 declare global {
-    export function $<T>(signal: Signal<T>): Signal<T>;
-
     export namespace $ {
         export function signal<T>(value: T): SignalTypes<T>;
-        export function effect(callback: (untrack: UntrackFunction) => void): void;
-        export function compute<T>(callback: (untrack: UntrackFunction) => T): Signal<T>;
+        export function effect(callback: (untrack: UntrackFunction) => void, signals?: Signal[]): void;
+        export function compute<T>(callback: (untrack: UntrackFunction) => T): SignalTypes<T>;
         export function optional<T>(signal: Signal<T | undefined | null> | Signal<T | null> | Signal<T | undefined>): Signal<NonNullable<T>> | null
-        export function resolve<T>(value: T, handle?: (value: T extends OrSignal<infer K> ? K : T) => void): T;
+        export function resolve<T>(value: T, handle?: (value: T extends Signal<infer K> | SignalObject<infer K> ? K : T) => void): T;
+
+        export interface Overload<I> {
+            signal: [
+                input: [Signal],
+                output: TextProto,
+                args: []
+            ]
+        }
     }
 
     export type OrSignal<T = any> = T | SignalTypes<T>
@@ -23,17 +29,22 @@ declare module '@amateras/core' {
     }
 }
 
-export type SignalTypes<T> = [T] extends [object]
-    ?   SignalObject<T>
-    :   Signal<T>
+export type SignalTypes<T> = 
+    [ResolveNestedSignal<T>] extends [infer Resolved] 
+    ?   [Resolved] extends [object]
+        ?   SignalObject<Resolved> 
+            :   Signal<Resolved>
+    :   never;
+
+type ResolveNestedSignal<T> = T extends Signal<infer R> | SignalObject<infer R> ? ResolveNestedSignal<R> : T;
 
 export type SignalObject<T> = Signal<T> & {
-    [key in keyof T as Exclude<T[key], undefined> extends Function ? never : `${string & key}$`]: SignalTypes<T[key]>
+    [key in keyof T as Exclude<T[key], undefined> extends Signal ? `${string & key}` : Exclude<T[key], undefined> extends Function ? never : `${string & key}$`]: T[key] extends Signal ? T[key] : SignalTypes<T[key]>
 }
 
-GlobalState.assign({
+GlobalState.assign(() => ({
     signals: new Set()
-})
+}))
 
 GlobalState.disposers.add(global => {
     forEach(global.signals, signal => signal.dispose());
@@ -46,9 +57,11 @@ _Object_assign($, {
     effect(
         callback: (
             untrack: UntrackFunction
-        ) => void
+        ) => void,
+        signals: Signal[] = []
     ) {
         track(callback);
+        forEach(signals, signal => trackSet.add(signal));
         forEach(trackSet, signal => signal.subscribe(_ => callback(untrack)));
         trackSet.clear();
     },
@@ -60,7 +73,12 @@ _Object_assign($, {
     ) {
         let result = track(callback);
         let compute = $.signal(result);
-        compute.exec = () => compute.set(callback(untrack));
+        let proto = Proto.proto;
+        compute.exec = () => {
+            $.context(Proto, proto, () => {
+                compute.set(callback(untrack));
+            })
+        }
         forEach(trackSet, signal => {
             signal.computes = signal.computes ?? new Set();
             let ref = new WeakRef(compute);
@@ -80,7 +98,7 @@ _Object_assign($, {
         if (_instanceof(value, Signal<any>)) {
             if (handle) {
                 value.subscribe(handle);
-                handle(value);
+                handle(value.value);
             }
             return value.value
         }
@@ -89,36 +107,41 @@ _Object_assign($, {
     }
 })
 
-let toTextProto = (signal: Signal) => {
+let toProxyProto = (signal: Signal) => {
     if (_instanceof(signal, Signal)) {
-        let proto = new TextProto(`${signal}`);
-        let fn = (value: any) => proto.content = `${value}`;
+        let proxy = new ProxyProto();
+        let $text: undefined | TextProto = _undefined;
+        let fn = (value: any) => {
+            // improve text content update performance
+            if (isString(value) || isBoolean(value) || isNumber(value)) {
+                if ($text) $text.content = `${value}`;
+                else proxy.layout = () => $text = $([ value ]).at(0) as TextProto;
+                if (!proxy.builded) proxy.build();
+            } else {
+                $text = _undefined;
+                proxy.layout = () => $([ value ]);
+                forEach(proxy.protos, proto => proto.removeNode())
+                // clean children nodes and dispose
+                proxy.clear(true);
+                if (proxy.builded) proxy.build();
+                proxy.node?.replaceWith(...proxy.toDOM());
+            }
+        }
         signal.subscribe(fn);
-        proto.ondispose(() => signal.unsubscribe(fn));
+        proxy.listen('dispose', () => signal.unsubscribe(fn));
         fn(signal.value);
-        return proto;
+        return proxy;
     }
 }
 
-$.process.text.add(toTextProto)
-$.process.craft.add(toTextProto)
+$.process.text.add(toProxyProto)
+$.process.craft.add(toProxyProto)
 $.process.attr.add((name, signal, proto) => {
     if (_instanceof(signal, Signal)) {
-        if (proto.tagname === 'input') {
-            if (isIncluded(name, ['value', 'checked'] as const)) {
-                proto.on('input', e => signal.set((e.currentTarget as HTMLInputElement)[name]));
-                let value = signal.value;
-                if (isBoolean(value)) value && proto.attr(name, '');
-                else proto.attr(name, `${value}`)
-            }
-        } 
-        else {
-            let setNodeAttr = () => proto.attr(name, signal.value as any);
-            signal.subscribe(setNodeAttr);
-            setNodeAttr();
-            proto.ondispose(() => signal.unsubscribe(setNodeAttr))
-        }
-        
+        let setNodeAttr = () => proto.attr(name, signal.value as any);
+        signal.subscribe(setNodeAttr);
+        setNodeAttr();
+        proto.listen('dispose', () => signal.unsubscribe(setNodeAttr))
         return true;
     }
 })

package/packages/signal/src/structure/Signal.ts

@@ -1,4 +1,4 @@
-import { _null, _Object_entries, forEach, isFunction, isString, isSymbol, isUndefined } from "@amateras/utils";
+import { _instanceof, _null, _Object_entries, forEach, isFunction, isNull, isObject, isString, isSymbol, isUndefined } from "@amateras/utils";
 import { ontrack, trackSet } from "#lib/track";
 import { Proto, symbol_Signal } from "@amateras/core";
 import type { SignalTypes } from "..";
@@ -19,15 +19,34 @@ export class Signal<T = any> extends Function {
         super()
         Proto.proto?.global.signals.add(this);
         this._value = value;
+        // if value is Signal, use linked signal to prevent modify the original signal value
+        if (_instanceof(value, Signal)) this.link(value);
         return new Proxy(this, {
             apply: () => this._exec(),
-            get: (target, propName) => {
+            get: (_, propName) => {
                 if (isSymbol(propName) || (isString(propName) && !propName.endsWith('$'))) return this[propName as keyof this];
-                const value = this.value[propName.slice(0, -1) as keyof T];
+                // remove $ at last position of prop name
+                propName = propName.slice(0, -1);
                 if (!this.map) this.map = {};
-                const signal = this.map[propName] ?? new Signal(value);
-                this.map[propName] = signal;
-                return signal;
+                const cachedSignal = this.map[propName];
+                if (cachedSignal) return cachedSignal;
+                else {
+                    const signal = this.map[propName] ?? new Signal<any>(null);
+                    this.map[propName] = signal;
+                    // set signal value (before subscribe)
+                    this.setPropValue(signal, propName);
+                    signal.subscribe(newValue => {
+                        // set member value to parent source object
+                        if (isObject(this.value) && !isNull(this.value)) {
+                            // avoid getter only member
+                            if (Object.getOwnPropertyDescriptor(this.value, propName)?.writable) this.value[propName as keyof T] = newValue;
+                        }
+                        // emit parent signal
+                        if (!isNull(this.value)) this.emit();
+                    })
+                    this.subscribe(() => this.setPropValue(signal, propName));
+                    return signal;
+                }
             }
         });
     }
@@ -36,6 +55,17 @@ export class Signal<T = any> extends Function {
         if (ontrack) trackSet.add(this);
         return this.value;
     }
+
+    private setPropValue(signal: Signal, propName: string) {
+        if (isObject(this.value) && !isNull(this.value)) {
+            // parent signal value is object, set value from this object member
+            const value = this.value[propName as keyof T];
+            signal.set(value);
+        } else {
+            // parent signal value is not object, member signal value change to null quietly
+            signal._value = null;
+        }
+    }
     
     get value(): T {
         if (this.linked) return this.linked.value;
@@ -54,16 +84,19 @@ export class Signal<T = any> extends Function {
     }
 
     set(resolver: T | ((oldValue: T) => T),) {
-        if (this.linked) this.linked.set(resolver);
+        // if value is Signal, use linked signal to prevent modify the original signal value
+        if (_instanceof(resolver, Signal)) this.link(resolver);
         else if (isFunction(resolver)) this.set(resolver(this.value));
         else if (this.value !== resolver) {
             this._value = resolver;
+            this.linked = _null;
             this.emit();
         }
     }
 
     modify(callback: (value: T) => void) {
         callback(this.value);
+        this.linked?.emit();
         this.emit();
     }
     

package/packages/store/src/structure/Store.ts

@@ -16,7 +16,7 @@ export class Store<T = any, Args extends any[] = []> {
         if (!root) throw `Store.create(): ${ERROR_MESSAGE}`;
         const value = this.init(...args);
         this.map.set(root, value);
-        root.ondispose(() => this.map.delete(root));
+        root.listen('dispose', () => this.map.delete(root));
         return value;
     }
 

package/packages/ui/package.json

@@ -11,5 +11,6 @@
     },
     "exports": {
       ".": "./src/index.ts"
-    }
+    },
+    "sideEffects": false
 }

package/packages/ui/src/icon/check.svg.ts

@@ -0,0 +1 @@
+export const check_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`

package/packages/ui/src/icon/x.svg.ts

@@ -0,0 +1 @@
+export const x_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`

package/packages/ui/src/index.ts

@@ -2,7 +2,6 @@ export * from "#lib/slideshowAnimations";
 export * from "#structure/Slide";
 export * from "#structure/Slideshow";
 export * from "#structure/Radio";
-export * from "#structure/TextBlock";
 export * from "#structure/Accordion";
 export * from "#structure/Waterfall";
 export * from "#structure/WaterfallItem";
@@ -18,4 +17,12 @@ export * from "#structure/Button";
 export * from "#structure/Badge";
 export * from "#structure/Icon";
 export * from "#structure/Card";
-export * from "#structure/DescriptionList";
+export * from "#structure/DescriptionList";
+export * from "#structure/ContextMenu";
+export * from "#structure/Input";
+export * from "#structure/Field";
+export * from "#structure/Switch";
+export * from "#structure/Toggle";
+export * from "#structure/Combobox/Combobox";
+export * from "#structure/Combobox/ComboboxList";
+export * from "#structure/Combobox/ComboboxChips";

package/packages/ui/src/lib/combobox_style.ts

@@ -0,0 +1,20 @@
+import type { CSSMap } from "./toCSS";
+
+export const item_css = {
+    display: 'flex',
+    gap: 'calc(var(--spacing) * 1.25)',
+    boxSizing: 'border-box',
+    padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
+    borderRadius: 'var(--radius)',
+    fontSize: '0.875rem',
+    fontWeight: '500',
+    lineHeight: '1',
+
+    '&:hover, :not(:has(select-item:hover)) &[focus]': {
+        background: 'oklch(from var(--input) l c h / .1)'
+    },
+
+    '&[focus]': {
+        outline: 'none'
+    }
+} satisfies CSSMap;

package/packages/ui/src/lib/hover.ts

@@ -0,0 +1,2 @@
+
+export const pointerHoverMediaQuery = '@media (hover: hover) and (pointer: fine)'

package/packages/ui/src/structure/Badge.ts

@@ -3,7 +3,7 @@ import { ElementProto } from "@amateras/core";
 
 export interface BadgeProps {
     variant?: 'primary' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' | string & {};
-    size?: 'base' | 'icon' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | string & {}
+    size?: 'base' | 'icon' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | string & {}
 }
 
 export class Badge extends ElementProto<HTMLButtonElement> {
@@ -20,12 +20,14 @@ export class Badge extends ElementProto<HTMLButtonElement> {
             padding: `0 calc(var(--spacing) * 2)`,
             borderRadius: 'calc(var(--radius) * 2.6)',
             height: 'calc(var(--spacing) * 5)',
+            lineHeight: 'var(--text-xs)',
             transition: '0.2s all ease',
             fontSize: 'var(--text-xs)',
             fontWeight: 'var(--font-weight-medium)',
             fontFamily: 'inherit',
             outline: '0.1rem solid oklch(from var(--border) l c h / 0)',
             whiteSpace: 'nowrap',
+            gap: `var(--spacing)`,
             
             border: '1px solid oklch(from var(--input) l c h / .2)',
             background: 'oklch(from var(--input) l c h / .025)',
@@ -83,6 +85,13 @@ export class Badge extends ElementProto<HTMLButtonElement> {
                 }
             },
 
+            '&[size="sm"]': {
+                padding: '0 calc(var(--spacing) * 1)',
+                fontSize: 'var(--text-xs2)',
+                lineHeight: 'var(--text-xs2)',
+                height: 'calc(var(--spacing) * 4)'
+            },
+
             'a[disabled] &': {
                 opacity: '.5'
             }

package/packages/ui/src/structure/Button.ts

@@ -1,29 +1,33 @@
+import { pointerHoverMediaQuery } from "#lib/hover";
 import { toCSS } from "#lib/toCSS";
 import { ElementProto } from "@amateras/core";
 
 export interface ButtonProps {
-    variant?: 'primary' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' | string & {};
-    size?: 'base' | 'icon' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | string & {}
+    variant?: OrSignal<'primary' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' | string & {}>;
+    size?: OrSignal<'base' | 'icon' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | string & {}>;
 }
 
 export class Button extends ElementProto<HTMLButtonElement> {
     static tagname = 'button';
-    constructor(props: $.Props<ButtonProps>, layout?: $.Layout<Button>) {
-        super(Button.tagname, props, layout)
+    constructor(props: $.Props<ButtonProps, HTMLButtonElement>, layout?: $.Layout<Button>) {
+        super('button', {ui: 'button', ...props}, layout)
     }
 
     static {
-        $.style(this, toCSS(this.tagname, {
+        $.style(this, toCSS('button[ui="button"]', {
             display: 'inline-flex',
             placeContent: 'center',
             placeItems: 'center',
             padding: `0 calc(var(--spacing) * 2.5)`,
             borderRadius: 'var(--radius)',
             height: 'calc(var(--spacing) * 8)',
+            lineHeight: '1rem',
             transition: '0.2s all ease',
             fontWeight: 'var(--font-weight-medium)',
             fontFamily: 'inherit',
             outline: '0.1rem solid oklch(from var(--border) l c h / 0)',
+            userSelect: 'none',
+            gap: 'calc(var(--spacing) * 2.5)',
             
             border: '1px solid oklch(from var(--input) l c h / .2)',
             background: 'oklch(from var(--input) l c h / .025)',
@@ -33,56 +37,75 @@ export class Button extends ElementProto<HTMLButtonElement> {
                 outline: '0.1rem solid var(--border)'
             },
 
-            '&:active': {
+            '&:not([disabled]):active': {
                 translate: '0 0.125rem'
             },
 
-            '&:not([disabled]):hover': {
-                background: 'oklch(from var(--input) l c h / .1)',
-                color: 'oklch(from var(--fg) l c h / 1)',
+            [pointerHoverMediaQuery]: {
+                '&:not([disabled]):hover': {
+                    background: 'oklch(from var(--input) l c h / .1)',
+                },
             },
 
             '&[variant="primary"]': {
                 border: 'none',
                 color: 'oklch(from var(--primary-fg) l c h)',
-                background: 'var(--primary-bg)'
+                background: 'var(--primary-bg)',
+
+                [pointerHoverMediaQuery]: {
+                    '&:not([disabled]):hover': {
+                        background: 'oklch(from var(--primary-bg) l c h / .8)',
+                    }
+                }
             },
 
             '&[variant="secondary"]': {
                 border: 'none',
                 color: 'oklch(from var(--secondary-fg) l c h)',
                 background: 'var(--secondary-bg)',
-                '&:not([disabled]):hover': {
-                    background: 'oklch(from var(--secondary-bg) l c h / .8)'
-                }
+
+                [pointerHoverMediaQuery]: {
+                    '&:not([disabled]):hover': {
+                        background: 'oklch(from var(--secondary-bg) l c h / .8)'
+                    }
+                },
             },
 
             '&[variant="destructive"]': {
                 border: 'none',
                 color: 'oklch(from var(--destructive-fg) l c h)',
                 background: 'oklch(from var(--destructive-bg) l c h / .3)',
-                '&:not([disabled]):hover': {
-                    background: 'oklch(from var(--destructive-bg) l c h / .5)'
-                }
+
+                [pointerHoverMediaQuery]: {
+                    '&:not([disabled]):hover': {
+                        background: 'oklch(from var(--destructive-bg) l c h / .5)'
+                    }
+                },
             },
 
             '&[variant="ghost"]': {
                 border: 'none',
                 color: 'oklch(from var(--fg) l c h)',
                 background: 'oklch(from var(--input) l c h / 0)',
-                '&:not([disabled]):hover': {
-                    background: 'oklch(from var(--input) l c h / .1)'
-                }
+
+                [pointerHoverMediaQuery]: {
+                    '&:not([disabled]):hover': {
+                        background: 'oklch(from var(--input) l c h / .1)'
+                    }
+                },
             },
 
             '&[variant="link"]': {
                 border: 'none',
                 color: 'oklch(from var(--fg) l c h)',
                 background: 'oklch(from var(--input) l c h / 0)',
-                '&:not([disabled]):hover': {
-                    textDecoration: 'underline',
-                    textUnderlineOffset: '0.2rem'
-                }
+
+                [pointerHoverMediaQuery]: {
+                    '&:not([disabled]):hover': {
+                        textDecoration: 'underline',
+                        textUnderlineOffset: '0.2rem'
+                    }
+                },
             },
 
             '&[size="icon"]': {
@@ -92,13 +115,15 @@ export class Button extends ElementProto<HTMLButtonElement> {
 
             '&[size="xs"]': {
                 padding: 'calc(var(--spacing) * 2)',
-                fontSize: 'var(--text_xs)',
-                height: 'calc(var(--spacing) * 6)'
+                fontSize: 'var(--text-xs)',
+                lineHeight: 'var(--text-xs)',
+                height: 'calc(var(--spacing) * 6)',
             },
 
             '&[size="icon-xs"]': {
                 width: 'calc(var(--spacing) * 6)',
                 height: 'calc(var(--spacing) * 6)',
+                padding: '0',
 
                 'svg': {
                     width: 'calc(var(--spacing) * 3)',
@@ -112,7 +137,8 @@ export class Button extends ElementProto<HTMLButtonElement> {
 
             '&[size="icon-sm"]': {
                 width: 'calc(var(--spacing) * 7)',
-                height: 'calc(var(--spacing) * 7)'
+                height: 'calc(var(--spacing) * 7)',
+                padding: '0',
             },
 
             '&[size="lg"]': {
@@ -121,7 +147,8 @@ export class Button extends ElementProto<HTMLButtonElement> {
 
             '&[size="icon-lg"]': {
                 width: 'calc(var(--spacing) * 9)',
-                height: 'calc(var(--spacing) * 9)'
+                height: 'calc(var(--spacing) * 9)',
+                padding: '0',
             },
 
             '&[disabled]': {

package/packages/ui/src/structure/Card.ts

@@ -32,12 +32,10 @@ export class CardHeader extends ElementProto {
 
     static {
         $.style(this, toCSS(this.tagname, {
-            display: 'grid',
+            display: 'flex',
             width: '100%',
-            gridTemplateRows: 'auto auto',
-            // gridTemplateColumns: '1fr auto',
+            flexDirection: 'column',
             gap: 'var(--spacing)',
-            container: 'card-header / inline-size ',
 
             paddingInline: 'calc(var(--spacing) * 4)',
         }))
@@ -52,6 +50,7 @@ export class CardContent extends ElementProto {
 
     static {
         $.style(this, toCSS(this.tagname, {
+            display: 'block',
             paddingInline: 'calc(var(--spacing) * 4)',
         }))
     }