amateras 0.10.0 → 0.10.2

package/packages/css/src/index.ts

@@ -0,0 +1,103 @@
+import { cssGlobalRuleSet, cssRuleByProtoMap } from "#lib/cache";
+import { createRule } from "#lib/createRule";
+import { $CSSRule } from "#structure/$CSSRule";
+import { ElementProto, type Proto, onserver } from "@amateras/core";
+import { _Array_from, _instanceof, _Object_assign, _Object_entries, forEach, map, UID } from "@amateras/utils";
+import type { $CSSDeclarationMap } from "./types";
+
+declare global {
+    export namespace $ {
+        /** Create CSS rule */
+        export function css(cssObject: $.CSSMap | $CSSRule): $CSSRule;
+        /** Create global CSS rules */
+        export function CSS(cssRootObject: $.CSSRootMap): $CSSRule[];
+
+        export type CSSValue = '' | 'unset' | 'initial' | 'inherit' | string & {} | number | $.CSSValueExtends;
+        export type CSSValueExtends = ValueOf<CSSValueMap>;
+        export interface CSSValueMap {}
+
+        export interface AttrMap {
+            css: $.CSSMap
+        }
+
+        export type CSSMap = { [key: string]: $.CSSMap | $.CSSValue } | $.CSSDeclarationMap;
+        export type CSSDeclarationMap = { [key in keyof $CSSDeclarationMap]?: $CSSDeclarationMap[key] | $.CSSValue }
+        export type CSSRootMap = { [key: string]: $.CSSMap };
+
+        export namespace CSS {
+            export function text(proto: Proto): string;
+            export function rules(proto: Proto): $CSSRule[];
+        }
+    }
+}
+
+declare module "@amateras/core" {
+    export interface ElementProto {
+        css(...cssObject: ($.CSSMap | $CSSRule)[]): this;
+    }
+}
+
+// Assign methods to $ object
+_Object_assign($, {
+
+    css(cssMap: $.CSSMap | $CSSRule) {
+        // If argument is $CSSRule, return it.
+        if (_instanceof(cssMap, $CSSRule)) return cssMap;
+        return createRule(() => `.${UID.generate('css')}`, cssMap);
+    },
+    
+    CSS(cssRootMap: $.CSSRootMap) {
+        // The CSS root object properties value should be $CSSObject,
+        // just create rule from for each propperty.
+        return map(_Object_entries(cssRootMap), ([key, value]) => {
+            let rule = createRule(() => key, {...value, __selector__: key});
+            cssGlobalRuleSet.add(rule);
+            return rule;
+        })
+    },
+})
+
+_Object_assign(ElementProto.prototype, {
+    css(this: ElementProto, ...cssMap: ($.CSSMap | $CSSRule)[]) {
+        forEach(cssMap, cmap => assignCSS(this, cmap));
+        return this;
+    }
+})
+
+export const assignCSS = (proto: ElementProto, cssMap: $.CSSMap | $CSSRule) => {
+    let rule = $.css(cssMap);
+    let selector = rule.selector.slice(1);
+    proto.addClass(selector);
+    cssRuleByProtoMap.set(proto, rule);
+}
+
+// Assign html render methods to $.CSS
+if (onserver()) {
+    _Object_assign($.CSS, {
+        rules(proto: Proto) {
+            let ruleSet = new Set<$CSSRule>();
+
+            forEach([proto, ...proto.protos], childProto => {
+                let rule = cssRuleByProtoMap.get(childProto as any);
+                if (rule) ruleSet.add(rule);
+                if (proto !== childProto)
+                    forEach(this.rules(childProto), rule => ruleSet.add(rule));
+            })
+
+            return _Array_from(ruleSet);
+        },
+
+        text(proto: Proto) {
+            return [...cssGlobalRuleSet, ...this.rules(proto)].join('\n');
+        }
+    })
+}
+
+// Add processor of css attribute
+$.process.attr.add((key, value, proto) => {
+    if (key === 'css') return assignCSS(proto, value), true;
+})
+
+export * from "#structure/$CSS";
+export * from "#structure/$CSSRule";
+

package/packages/css/src/lib/cache.ts

@@ -0,0 +1,27 @@
+import type { $CSSRule } from "#structure/$CSSRule";
+import type { ElementProto } from "@amateras/core";
+
+export const cssRuleByProtoMap = new WeakMap<ElementProto, $CSSRule>();
+export const cssGlobalRuleSet = new Set<$CSSRule>();
+
+/** A Map to store ${@link $CSSRule} by JSON string.
+ * 
+ * Since a css rule might be created many times, in order to avoid unnecessary memory waste,
+ * we need a rule store to ensure that the same rules can be detected and retrieved.
+ * 
+ * ### Why use JSON string as key of the Map?
+ * 
+ * Theoretically, the structure of a CSS object can be losslessly converted to JSON format,
+ * which ensures that the same CSS object structure can be retrieves in the Map.
+ * 
+ * A JavaScript Map can save keys converted into hash values, which makes its retrieves speed very fast.
+ * This is very suitable for storing CSS objects in JSON format, as the length of the JSON string will not
+ * affect the retrieve efficiency of the Map.
+ */
+export const cssRuleByJSONMap: Map<string, $CSSRule> = import.meta.hot?.data.cssMap ?? new Map();
+
+if (import.meta.hot) {
+    import.meta.hot.dispose(data => {
+        data.cssMap = cssRuleByJSONMap;
+    })
+}

package/packages/css/src/lib/colorAssign.ts

@@ -0,0 +1,6 @@
+import { _Object_assign } from "@amateras/utils";
+
+export const colorAssign = (key: string, colors: {[key: number]: string}) => {
+    if (!$.color) _Object_assign($, {color: {}});
+    _Object_assign($.color, {[key]: colors})
+}

package/packages/css/src/lib/createRule.ts

@@ -0,0 +1,31 @@
+import { $CSSRule } from "#structure/$CSSRule";
+import { _JSON_stringify, _null } from "@amateras/utils";
+import { cssRuleByJSONMap } from "./cache";
+
+/** Create and return {@link $CSSRule}, if the rule already exists then return the cached rule.
+ * 
+ * This method will:
+ * 1. Check if the css rule is cached, if true return the cached rule.
+ * 2. Create a {@link $CSSRule}.
+ * 3. Insert the rule into stylesheet.
+ * 4. Cache the rule into {@link cssRuleByJSONMap}
+ * 5. Return the rule.
+ */
+export const createRule = (selector: () => string, cssMap: $.CSSMap, cache = true) => {
+    // Convert $CSSObject to JSON,
+    // use JSON string as Map key of $CSSRule cache.
+    let cssObjectJSON = cache ? _JSON_stringify(cssMap) : '';
+    if (cache) {
+        let cachedRule = cssRuleByJSONMap.get(cssObjectJSON);
+        // If $CSSRule is cached, return it.
+        // This avoid the rule duplicated and waste memory.
+        if (cachedRule) return cachedRule;
+    }
+    // If the rule is not cached, create new one.
+    let rule = new $CSSRule(selector(), cssMap, _null);
+    // Insert rule into stylesheet.
+    $.style(_null, `${rule}`);
+    // Save the JSON and $CSSRule in cache.
+    if (cache) cssRuleByJSONMap.set(cssObjectJSON, rule);
+    return rule;
+}

package/packages/css/src/lib/utils.ts

@@ -0,0 +1 @@
+export const camelCaseToDash = (str: string) => str.replaceAll(/([A-Z])/g, ((_, $1: string) => `-${$1.toLowerCase()}`))

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

@@ -0,0 +1,4 @@
+export abstract class $CSS {
+    abstract toString(): string;
+    
+}

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

@@ -0,0 +1,13 @@
+import { $CSS } from "./$CSS";
+
+export class $CSSKeyframes extends $CSS {
+    name: string;
+    constructor(name: string) {
+        super();
+        this.name = name;
+    }
+
+    toString(): string {
+        return `${this.name.replace('@keyframes ', '')}`
+    }
+}

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

@@ -0,0 +1,21 @@
+import { _Object_assign } from "@amateras/utils";
+import { $CSS } from "./$CSS";
+
+export interface $CSSPropertyOptions {
+    name: string;
+    syntax: string;
+    initialValue?: string;
+    inherits?: boolean;
+}
+
+export interface $CSSProperty extends $CSSPropertyOptions {}
+export class $CSSProperty extends $CSS {
+    constructor(options: $CSSPropertyOptions) {
+        super();
+        _Object_assign(this, options);
+    }
+
+    toString() {
+        return `var(${this.name})`
+    }
+}

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

@@ -0,0 +1,39 @@
+import { _instanceof, _null, _Object_entries, isNumber, isString, map } from "@amateras/utils";
+import { $CSS } from "./$CSS";
+
+export class $CSSRule extends $CSS {
+    declarations = new Map<string, string>();
+    rules = new Map<string, $CSSRule>();
+    selector: string;
+    parent: $CSSRule | null = _null;
+    
+    readonly css: $.CSSMap;
+    constructor(selector: string, cssMap: $.CSSMap, parent: $CSSRule | null) {
+        super();
+        this.selector = selector;
+        this.parent = parent;
+        if (cssMap) processCSSMap(this, cssMap);
+        this.css = cssMap;
+    }
+
+    toString(): string {
+        let declarations = map(this.declarations, ([name, value]) => `${name.replaceAll(/[A-Z]/g, $0 => `-${$0.toLowerCase()}`)}: ${value};`);
+        let rules = map(this.rules, ([_, rule]) => `${rule}`);
+        return `${this.selector} { ${[...declarations, ...rules].join(' ')} }`
+    }
+}
+
+const processCSSMap = (rule: $CSSRule, cssMap: $.CSSMap) => {
+    for (let [key, value] of _Object_entries(cssMap)) {
+        if (isString(value) || isNumber(value) || _instanceof(value, $CSS)) rule.declarations.set(key, `${value}`);
+        else {
+            // 兼容较旧浏览器不支持无 & 前缀的子规则
+            let selector = 
+                rule.selector.startsWith('@') // 针对 at-rule, 一般 rule 无需判断直接添加 & 前缀给子规则
+                && !rule.parent // 如果是 root rule 就不会有 parent 
+                ?   key 
+                :   `${/^[@]|&/.test(key) ? key : `& ${key}`}`;
+            rule.rules.set(selector, new $CSSRule(selector, value as $.CSSMap, rule));
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+import { _document, onclient } from "@amateras/core";
+import { $CSS } from "./$CSS";
+
+export class $CSSVariable<V = string> extends $CSS {
+    name: string;
+    value: V;
+    constructor(key: string, value: V) {
+        super();
+        this.name = key;
+        this.value = value;
+    }
+
+    set(value: string) {
+        if (onclient()) _document.documentElement.style.setProperty(`${this.name}`, value);
+        return this;
+    }
+
+    reset() {
+        if (onclient()) _document.documentElement.style.removeProperty(`${this.name}`);
+        return this;
+    }
+
+    default(value: string | $CSSVariable) {
+        return `var(${this.name}, ${value})`
+    }
+
+    declare(value?: V | $CSSVariable) {
+        return {[this.name]: `${value ?? this.value}`}
+    }
+
+    toString(): string {
+        return `var(${this.name})`
+    }
+}

package/packages/css/src/types.ts

@@ -0,0 +1,300 @@
+export interface $CSSDeclarationMap {
+    alignContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'normal';
+    alignItems: 'normal' | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline';
+    alignSelf: 'auto' | 'normal' | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline';
+    all: 'initial' | 'inherit' | 'unset';
+    animation: string;
+    animationDelay: string;
+    animationDirection: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    animationDuration: string;
+    animationFillMode: 'none' | 'forwards' | 'backwards' | 'both';
+    animationIterationCount: 'infinite' | number;
+    animationName: string;
+    animationPlayState: 'running' | 'paused';
+    animationTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end';
+    animationComposition: 'replace' | 'add' | 'accumulate';
+    aspectRatio: string;
+    appearance: 'none' | 'auto' | 'menulist-button' | 'textfield' | 'base-select' | 'button' | 'checkbox';
+    backdropFilter: string;
+    backfaceVisibility: 'visible' | 'hidden';
+    background: string;
+    backgroundAttachment: 'scroll' | 'fixed' | 'local';
+    backgroundBlendMode: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+    backgroundClip: 'border-box' | 'padding-box' | 'content-box' | 'text';
+    backgroundColor: string;
+    backgroundImage: string;
+    backgroundOrigin: 'border-box' | 'padding-box' | 'content-box';
+    backgroundPosition: string;
+    backgroundRepeat: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+    backgroundSize: 'auto' | 'cover' | 'contain';
+    border: string;
+    borderBottom: string;
+    borderBottomColor: string;
+    borderBottomLeftRadius: string;
+    borderBottomRightRadius: string;
+    borderBottomStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderBottomWidth: string;
+    borderCollapse: 'collapse' | 'separate';
+    borderColor: string;
+    borderImage: string;
+    borderImageOutset: string;
+    borderImageRepeat: 'stretch' | 'repeat' | 'round' | 'space';
+    borderImageSlice: string;
+    borderImageSource: string;
+    borderImageWidth: string;
+    borderLeft: string;
+    borderLeftColor: string;
+    borderLeftStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderLeftWidth: string;
+    borderRadius: string;
+    borderRight: string;
+    borderRightColor: string;
+    borderRightStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderRightWidth: string;
+    borderSpacing: string;
+    borderStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderTop: string;
+    borderTopColor: string;
+    borderTopLeftRadius: string;
+    borderTopRightRadius: string;
+    borderTopStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderTopWidth: string;
+    borderWidth: string;
+    bottom: string;
+    boxShadow: string;
+    boxSizing: 'content-box' | 'border-box';
+    breakAfter: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'column' | 'avoid-column';
+    breakBefore: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'column' | 'avoid-column';
+    breakInside: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column';
+    captionSide: 'top' | 'bottom';
+    caretColor: string;
+    clear: 'none' | 'left' | 'right' | 'both';
+    clip: string;
+    clipPath: string;
+    color: string;
+    columnCount: 'auto' | number;
+    columnFill: 'balance' | 'auto';
+    columnGap: string;
+    columnRule: string;
+    columnRuleColor: string;
+    columnRuleStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    columnRuleWidth: string;
+    columnSpan: 'none' | 'all';
+    columnWidth: string;
+    columns: string;
+    content: string;
+    counterIncrement: string;
+    counterReset: 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';
+    direction: 'ltr' | 'rtl';
+    display: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'list-item';
+    emptyCells: 'show' | 'hide';
+    filter: string;
+    flex: string;
+    flexBasis: string;
+    flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexFlow: string;
+    flexGrow: number;
+    flexShrink: number;
+    flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse';
+    float: 'left' | 'right' | 'none';
+    font: string;
+    fontFamily: string;
+    fontFeatureSettings: string;
+    fontKerning: 'auto' | 'normal' | 'none';
+    fontLanguageOverride: string;
+    fontOpticalSizing: 'auto' | 'none';
+    fontSize: string;
+    fontSizeAdjust: string;
+    fontStretch: 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded';
+    fontStyle: 'normal' | 'italic' | 'oblique';
+    fontSynthesis: string;
+    fontVariant: 'normal' | 'small-caps';
+    fontVariantCaps: 'normal' | 'small-caps' | 'all-small-caps' | 'petite-caps' | 'all-petite-caps' | 'unicase' | 'titling-caps';
+    fontVariantEastAsian: string;
+    fontVariantLigatures: string;
+    fontVariantNumeric: string;
+    fontVariantPosition: 'normal' | 'sub' | 'super';
+    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    gap: string;
+    grid: string;
+    gridArea: string;
+    gridAutoColumns: string;
+    gridAutoFlow: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gridAutoRows: string;
+    gridColumn: string;
+    gridColumnEnd: string;
+    gridColumnGap: string;
+    gridColumnStart: string;
+    gridGap: string;
+    gridRow: string;
+    gridRowEnd: string;
+    gridRowGap: string;
+    gridRowStart: string;
+    gridTemplate: string;
+    gridTemplateAreas: string;
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    height: string;
+    hyphens: 'none' | 'manual' | 'auto';
+    imageRendering: 'auto' | 'crisp-edges' | 'pixelated';
+    inset: number | string;
+    isolation: 'auto' | 'isolate';
+    justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    justifyItems: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right';
+    justifySelf: 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right';
+    left: string;
+    letterSpacing: 'normal';
+    lineHeight: 'normal' | number;
+    listStyle: string;
+    listStyleImage: string;
+    listStylePosition: 'inside' | 'outside';
+    listStyleType: 'disc' | 'circle' | 'square' | 'decimal' | 'georgian' | 'trad-chinese-informal' | 'none';
+    margin: string;
+    marginBottom: string;
+    marginLeft: string;
+    marginRight: string;
+    marginTop: string;
+    marginBlock: string;
+    marginBlockStart: string;
+    marginBlockEnd: string;
+    marginInline: string;
+    marginInlineStart: string;
+    marginInlineEnd: string;
+    mask: string;
+    maskClip: string;
+    maskComposite: string;
+    maskImage: string;
+    maskMode: string;
+    maskOrigin: string;
+    maskPosition: string;
+    maskRepeat: string;
+    maskSize: string;
+    maskType: string;
+    maxHeight: string;
+    maxWidth: string;
+    minHeight: string;
+    minWidth: string;
+    mixBlendMode: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+    objectFit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    objectPosition: string;
+    opacity: number;
+    order: number;
+    outline: string;
+    outlineColor: string;
+    outlineOffset: string;
+    outlineStyle: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    outlineWidth: string;
+    overflow: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowWrap: 'normal' | 'break-word' | 'anywhere';
+    overflowX: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowY: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overscrollBehavior: 'auto' | 'contain' | 'none';
+    overscrollBehaviorX: 'auto' | 'contain' | 'none';
+    overscrollBehaviorY: 'auto' | 'contain' | 'none';
+    padding: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBlock: string;
+    paddingBlockStart: string;
+    paddingBlockEnd: string;
+    paddingInline: string;
+    paddingInlineStart: string;
+    paddingInlineEnd: string;
+    pageBreakAfter: 'auto' | 'always' | 'avoid' | 'left' | 'right';
+    pageBreakBefore: 'auto' | 'always' | 'avoid' | 'left' | 'right';
+    pageBreakInside: 'auto' | 'avoid';
+    paintOrder: string;
+    perspective: string;
+    perspectiveOrigin: string;
+    placeContent: string;
+    placeItems: string;
+    placeSelf: string;
+    pointerEvents: 'auto' | 'none';
+    position: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    quotes: string;
+    resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
+    right: string;
+    rotate: string;
+    rowGap: string;
+    scale: string;
+    scrollBehavior: 'auto' | 'smooth';
+    scrollMargin: string;
+    scrollMarginBottom: string;
+    scrollMarginLeft: string;
+    scrollMarginRight: string;
+    scrollMarginTop: string;
+    scrollMarginBlock: string;
+    scrollMarginBlockStart: string;
+    scrollMarginBlockEnd: string;
+    scrollMarginInline: string;
+    scrollMarginInlineStart: string;
+    scrollMarginInlineEnd: string;
+    shapeRendering: 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision';
+    stopColor: string;
+    stopOpacity: string;
+    stroke: string;
+    strokeDasharray: string;
+    strokeDashoffset: string;
+    strokeLinecap: 'butt' | 'round' | 'square';
+    strokeLinejoin: 'miter' | 'round' | 'bevel';
+    strokeMiterlimit: string;
+    strokeOpacity: string;
+    strokeWidth: string;
+    tabSize: string;
+    tableLayout: 'auto' | 'fixed';
+    textAlign: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textAlignLast: 'auto' | 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textAnchor: 'start' | 'middle' | 'end';
+    textCombineUpright: 'none' | 'all';
+    textDecoration: 'none' | 'underline' | 'overline' | 'line-through' | 'grammar-error' | 'spelling-error' | 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+    textDecorationColor: string;
+    textDecorationLine: 'none' | 'underline' | 'overline' | 'line-through' | 'grammar-error' | 'spelling-error';
+    textDecorationStyle: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+    textDecorationThickness: string;
+    textDecorationSkipInk: 'auto' | 'none';
+    textEmphasis: string;
+    textIndent: string;
+    textJustify: 'auto' | 'inter-word' | 'inter-character' | 'none';
+    textOrientation: 'mixed' | 'upright' | 'sideways';
+    textOverflow: 'clip' | 'ellipsis';
+    textRendering: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision';
+    textShadow: string;
+    textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textUnderlineOffset: string;
+    textUnderlinePosition: 'auto' | 'under' | 'left' | 'right';
+    top: string;
+    touchAction: 'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation';
+    transform: string;
+    transformBox: 'border-box' | 'fill-box' | 'view-box';
+    transformOrigin: string;
+    transformStyle: 'flat' | 'preserve-3d';
+    transition: string;
+    transitionDelay: string;
+    transitionDuration: string;
+    transitionProperty: string;
+    transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end';
+    translate: string;
+    unicodeBidi: 'normal' | 'embed' | 'isolate' | 'bidi-override' | 'isolate-override' | 'plaintext';
+    userSelect: 'auto' | 'none' | 'text' | 'contain' | 'all';
+    verticalAlign: 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
+    viewTimeline: string;
+    viewTimelineAxis: string;
+    viewTimelineInset: string;
+    viewTimelineName: string;
+    viewTransitionName: string;
+    viewTransitionClass: string;
+    visibility: 'visible' | 'hidden' | 'collapse';
+    whiteSpace: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+    width: string;
+    willChange: string;
+    wordBreak: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    wordSpacing: string;
+    wordWrap: 'normal' | 'break-word';
+    writingMode: 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
+    zIndex: 'auto' | number;
+};

package/packages/for/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@amateras/for",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/signal": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts"
+    }
+}

package/packages/for/src/global.ts

@@ -0,0 +1,7 @@
+import * as proto from "#structure/For";
+
+declare global {
+    export var For: typeof proto.For
+
+    export function $<T extends object>(For: typeof proto.For, signal: proto.ForList<T>, layout: proto.ForLayout<T>): proto.For
+}

package/packages/for/src/index.ts

@@ -0,0 +1,15 @@
+import { For } from "#structure/For";
+import { Proto } from '@amateras/core';
+import './global';
+
+globalThis.For = For;
+
+$.process.craft.add((value, list, layout) => {
+    if (value === For) {
+        let forProto = new For(list, layout);
+        forProto.parent = Proto.proto;
+        return forProto;
+    }
+})
+
+export * from "#structure/For";