cx 26.0.5 → 26.0.8

package/build/charts/palette.scss

@@ -0,0 +1,97 @@
+//https://www.materialui.co/colors
+//normal:200 900
+//hover:100 700
+//selected: 300 900
+//disabled: 0 100
+@use "sass:map";
+@use "sass:list";
+
+$cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
+   rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
+   rgba(76, 175, 80, 1) rgba(139, 195, 74, 1) rgba(205, 220, 57, 1) rgba(255, 235, 59, 1) rgba(255, 193, 7, 1)
+   rgba(255, 152, 0, 1) rgba(255, 87, 34, 1) !default;
+
+$cx-default-palette-fill-whiten: 60% !default;
+$cx-default-palette-fill-hover-whiten: 50% !default;
+$cx-default-palette-fill-selected-whiten: 20% !default;
+$cx-default-palette-fill-disabled-whiten: 90% !default;
+
+$cx-default-palette-fill-blacken: 0% !default;
+$cx-default-palette-fill-hover-blacken: 0% !default;
+$cx-default-palette-fill-selected-blacken: 0% !default;
+$cx-default-palette-fill-disabled-blacken: 0% !default;
+
+$cx-default-palette-stroke-whiten: 0% !default;
+$cx-default-palette-stroke-blacken: 10% !default;
+
+@mixin cx-palette(
+   $palette-colors: $cx-default-palette-colors,
+   $palette-fill-whiten: $cx-default-palette-fill-whiten,
+   $palette-fill-hover-whiten: $cx-default-palette-fill-hover-whiten,
+   $palette-fill-selected-whiten: $cx-default-palette-fill-selected-whiten,
+   $palette-fill-disabled-whiten: $cx-default-palette-fill-disabled-whiten,
+   $palette-fill-blacken: $cx-default-palette-fill-blacken,
+   $palette-fill-hover-blacken: $cx-default-palette-fill-hover-blacken,
+   $palette-fill-selected-blacken: $cx-default-palette-fill-selected-blacken,
+   $palette-fill-disabled-blacken: $cx-default-palette-fill-disabled-blacken,
+   $palette-stroke-whiten: $cx-default-palette-stroke-whiten,
+   $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   @for $i from 1 through list.length($palette-colors) {
+      $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
+
+      .#{$state}color-#{$i - 1} {
+         $fill: cx-blacken(cx-whiten($c, $palette-fill-whiten), $palette-fill-blacken);
+         $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+         fill: $fill;
+         stroke: $stroke;
+         background: $fill;
+         border-color: $stroke;
+
+         &.#{$state}selectable:hover,
+         &.#{$state}selectable.#{$state}hover,
+         .#{$state}color-root:hover &,
+         .#{$state}color-root.#{$state}hover & {
+            $fill: cx-blacken(cx-whiten($c, $palette-fill-hover-whiten), $palette-fill-hover-blacken);
+            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}selected,
+         &.#{$state}selected:hover,
+         &.#{$state}selected.#{$state}hover,
+         .#{$state}color-root.#{$state}selected &,
+         .#{$state}color-root.#{$state}selected:hover &,
+         .#{$state}color-root.#{$state}selected.#{$state}hover & {
+            $fill: cx-blacken(cx-whiten($c, $palette-fill-selected-whiten), $palette-fill-selected-blacken);
+            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}disabled,
+         .#{$state}color-root.#{$state}disabled & {
+            $fill: cx-blacken(cx-whiten($c, $palette-fill-disabled-whiten), $palette-fill-disabled-blacken);
+            $stroke: cx-blacken(cx-whiten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/palette")) {
+   @include cx-palette();
+}

package/build/charts/variables.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+@import "axis/variables";
+
+$cx-default-swimlanes-lane-background-color: #f1f1f1;
+$cx-default-range-marker-color: #696969;
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/charts/Bar": "cx/charts/palette",
+      "cx/charts/BarGraph": "cx/charts/palette",
+      "cx/charts/Column": "cx/charts/palette",
+      "cx/charts/ColumnGraph": "cx/charts/palette",
+      "cx/charts/LineGraph": "cx/charts/palette",
+      "cx/charts/ColorMap": "cx/charts/palette",
+      "cx/charts/ScatterGraph": "cx/charts/palette",
+      "cx/charts/BubbleGraph": "cx/charts/palette",
+      "cx/charts/MarkerLine": "cx/charts/palette",
+      "cx/charts/Marker": "cx/charts/palette",
+      "cx/charts/PieChart": "cx/charts/palette",
+   )
+);

package/build/data/ArrayElementView.spec.js

@@ -23,7 +23,7 @@ describe("ArrayElementView", function () {
         let store = new Store({ data: { letters } });
         let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
         elementView.delete("$record");
-        assert.deepEqual(store.get("letters"), [letters[0]]);
+        assert.deepEqual(store.get("letters"), [...letters[0]]);
     });
     it("exposes the element as under the given alias", function () {
         let letters = [{ letter: "A" }, { letter: "B" }];

package/build/global.scss

@@ -0,0 +1,14 @@
+
+$cx-include-global-rules: false !default;
+
+@mixin cx-global-rules() {
+   @each $tag, $styles in $cx-element-style-map {
+      #{$tag} {
+         @include cx-add-rules($styles)
+      }
+   }
+}
+
+@if ($cx-include-global-rules and cx-call-once('cx/globals')) {
+   @include cx-global-rules();
+}

package/build/hooks/store.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "cx/jsx-runtime";
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer } from "src/util/test/createTestRenderer";
 import { computable } from "../data";
 import { Store } from "../data/Store";
 import { createFunctionalComponent } from "../ui/createFunctionalComponent";

package/build/hooks/useTrigger.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "cx/jsx-runtime";
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer } from "src/util/test/createTestRenderer";
 import { Store } from "../data/Store";
 import { createFunctionalComponent } from "../ui/createFunctionalComponent";
 import { useTrigger } from "./useTrigger";

package/build/index.scss

@@ -0,0 +1,6 @@
+@import "global";
+@import "util/index";
+@import "ui/index";
+@import "widgets/index";
+@import "svg/index";
+@import "charts/index";

package/build/jsx-runtime.d.ts

@@ -1,15 +1,16 @@
 import type { JSX as ReactJSX } from "react";
 import { Instance } from "./ui/Instance";
-import type { Prop } from "./ui/Prop";
+import type { ClassProp, Prop } from "./ui/Prop";
 import { Widget } from "./ui/Widget";
 import { HtmlElementConfig } from "./widgets/HtmlElement";
+import { ChildNode } from "./ui/Container";
 export declare function jsx(typeName: any, props: any, key?: string): any;
 export declare const jsxs: typeof jsx;
 type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
 type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
 type CxEventHandler<T> = T extends (event: infer E) => any ? string | ((event: E, instance: Instance) => void) : string | T;
 type CxIntrinsicElement<T> = {
-    [K in keyof T]: K extends "children" ? any : IsEventHandler<K, T[K]> extends true ? CxEventHandler<T[K]> : Prop<T[K]>;
+    [K in keyof T]: K extends "children" ? ChildNode | ChildNode[] : K extends "className" | "class" ? ClassProp : IsEventHandler<K, T[K]> extends true ? CxEventHandler<T[K]> : Prop<T[K]>;
 } & HtmlElementConfig;
 type CxIntrinsicElements = {
     [K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;

package/build/svg/Svg.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+
+@mixin cx-svg(
+   $name: 'svg',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      box-sizing: border-box;
+      overflow: hidden;
+      position: relative;
+      height: 150px; //default height
+
+      & > svg {
+         width: 100%;
+         height: 100%;
+         position: absolute;
+      }
+   }
+}
+
+@if (cx-should-include('cx/svg/Svg')) {
+   @include cx-svg;
+}

package/build/svg/index.scss

@@ -0,0 +1,9 @@
+.cxs-text-anchor-middle {
+   text-anchor: middle;
+}
+
+.cxs-text-anchor-right {
+   text-anchor: end;
+}
+
+@import "Svg";

package/build/ui/Controller.spec.js

@@ -39,9 +39,11 @@ describe("Controller", () => {
         }
         class Cmp extends Widget {
             render(context, instance, key) {
-                instance.invoke("onTest");
                 return null;
             }
+            onInit(context, instance) {
+                instance.invoke("onTest");
+            }
         }
         let store = new Store();
         const component = createTestRenderer(store, _jsx("cx", { children: _jsx(Cmp, { controller: TestController, onTest: "callback" }) }));
@@ -63,9 +65,11 @@ describe("Controller", () => {
         }
         class Cmp extends Widget {
             render(context, instance, key) {
-                instance.invoke("onTest");
                 return null;
             }
+            onInit(context, instance) {
+                instance.invoke("onTest");
+            }
         }
         let store = new Store();
         const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController1, children: _jsx(Cmp, { controller: TestController2, onTest: "callback1" }) }) }));

package/build/ui/app/startAppLoop.d.ts

@@ -1,10 +1,11 @@
 /** @jsxImportSource react */
-import { Widget, WidgetConfig } from "../Widget";
+import { Widget } from "../Widget";
 import { Store } from "../../data/Store";
 import { Instance } from "../Instance";
+import { Create } from "../../util/Component";
 export interface StartAppLoopOptions {
     destroyDelay?: number;
     removeParentDOMElement?: boolean;
     [key: string]: any;
 }
-export declare function startAppLoop(parentDOMElement: HTMLElement, storeOrInstance?: Store | Instance, widget?: Widget | WidgetConfig, options?: StartAppLoopOptions): () => void;
+export declare function startAppLoop(parentDOMElement: HTMLElement, storeOrInstance?: Store | Instance, widget?: Create<typeof Widget> | Create<typeof Widget>[], options?: StartAppLoopOptions): () => void;

package/build/ui/app/startHotAppLoop.d.ts

@@ -1,6 +1,7 @@
 import { StartAppLoopOptions } from "./startAppLoop";
-import { Widget, WidgetConfig } from "../Widget";
+import { Widget } from "../Widget";
 import { Store } from "../../data/Store";
+import { Create } from "../../util/Component";
 export interface HotModule {
     hot?: {
         accept: () => void;
@@ -8,4 +9,4 @@ export interface HotModule {
         data?: any;
     };
 }
-export declare function startHotAppLoop(appModule: HotModule, element: HTMLElement, store: Store, widgets: Widget | WidgetConfig, options?: StartAppLoopOptions): () => void;
+export declare function startHotAppLoop(appModule: HotModule, element: HTMLElement, store: Store, widgets: Create<typeof Widget> | Create<typeof Widget>[], options?: StartAppLoopOptions): () => void;

package/build/ui/index.scss

@@ -0,0 +1,2 @@
+
+@import 'layout/index';

package/build/ui/layout/ContentPlaceholder.spec.js

@@ -8,7 +8,7 @@ import { bind } from "../bind";
 describe("ContentPlaceholder", () => {
     it("allows putting content inside", () => {
         let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx("main", { children: _jsx("h2", { putInto: "header", children: "Header" }) })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx("main", { children: _jsx("h2", { putInto: "header", children: "Header" }) })] }) })));
         let tree = component.toJSON();
         assert.deepEqual(tree, {
             type: "div",
@@ -39,7 +39,7 @@ describe("ContentPlaceholder", () => {
                 headerText: "Header",
             },
         });
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "header" }), _jsx("h2", { putInto: "header", text: bind("headerText") })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "header" }), _jsx("h2", { putInto: "header", text: bind("headerText") })] }) })));
         let getTree = (headerText) => ({
             type: "div",
             props: {},
@@ -57,7 +57,7 @@ describe("ContentPlaceholder", () => {
     });
     it("allows putting multiple entries inside", () => {
         let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs("main", { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs("main", { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] })] }) })));
         let tree = component.toJSON();
         assert.deepEqual(tree, {
             type: "div",
@@ -89,7 +89,7 @@ describe("ContentPlaceholder", () => {
     });
     it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
         let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) })));
         let tree = component.toJSON();
         assert.deepEqual(tree, {
             type: "div",
@@ -126,7 +126,7 @@ describe("ContentPlaceholder", () => {
     });
     it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
         let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) })] }), _jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) })] }), _jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) })));
         let tree = component.toJSON();
         assert.deepEqual(tree, {
             type: "div",
@@ -170,7 +170,7 @@ describe("ContentPlaceholder", () => {
     it("is used for defining body position in outer layouts", () => {
         let store = new Store();
         let layout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: "Header" }), _jsx(ContentPlaceholder, {}), _jsx("footer", { children: "Footer" })] }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("main", { outerLayout: layout }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("main", { outerLayout: layout }) })));
         assert.deepEqual(component.toJSON(), {
             type: "div",
             props: {},
@@ -202,7 +202,7 @@ describe("ContentPlaceholder", () => {
             },
         });
         let layout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx(ContentPlaceholder, {}), _jsx("footer", { children: _jsx(ContentPlaceholder, { name: "footer" }) })] }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("main", { outerLayout: layout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("main", { outerLayout: layout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) })));
         let getTree = (h, b, f) => ({
             type: "div",
             props: {},
@@ -236,7 +236,7 @@ describe("ContentPlaceholder", () => {
         let store = new Store();
         let outerLayout = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
         let innerLayout = (_jsx("cx", { children: _jsx("main", { outerLayout: outerLayout, children: _jsx(ContentPlaceholder, {}) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) })));
         let tree = component.toJSON();
         //console.log(tree);
         assert.deepEqual(tree, {
@@ -259,7 +259,7 @@ describe("ContentPlaceholder", () => {
     });
     it("works in strange order", () => {
         let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "footer" }), _jsx(PureContainer, { putInto: "footer-content", children: "works" }), _jsxs(PureContainer, { putInto: "footer", children: ["It", _jsx(ContentPlaceholder, { name: "footer-content", children: "doesn't work" })] })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "footer" }), _jsx(PureContainer, { putInto: "footer-content", children: "works" }), _jsxs(PureContainer, { putInto: "footer", children: ["It", _jsx(ContentPlaceholder, { name: "footer-content", children: "doesn't work" })] })] }) })));
         let tree = component.toJSON();
         //console.log(tree);
         assert.deepEqual(tree, {
@@ -272,7 +272,7 @@ describe("ContentPlaceholder", () => {
         let store = new Store();
         let outerLayout = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
         let innerLayout = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("main", { outerLayout: outerLayout, children: _jsx(ContentPlaceholder, {}) }) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) })));
         assert.deepEqual(component.toJSON(), {
             type: "div",
             props: {},
@@ -283,7 +283,7 @@ describe("ContentPlaceholder", () => {
         let store = new Store();
         let outerLayout1 = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
         let outerLayout2 = (_jsx("cx", { children: _jsx("main", { children: _jsx(ContentPlaceholder, {}) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx(PureContainer, { outerLayout: outerLayout1, children: _jsx(PureContainer, { outerLayout: outerLayout2, children: "Content" }) }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx(PureContainer, { outerLayout: outerLayout1, children: _jsx(PureContainer, { outerLayout: outerLayout2, children: "Content" }) }) })));
         assert.deepEqual(component.toJSON(), {
             type: "div",
             props: {},
@@ -300,7 +300,7 @@ describe("ContentPlaceholder", () => {
         });
         let outerLayout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, {}), _jsx("footer", { children: _jsx(ContentPlaceholder, { name: "footer" }) })] }) }));
         let innerLayout = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsxs(PureContainer, { outerLayout: outerLayout, children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx(ContentPlaceholder, {})] }) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("main", { outerLayout: innerLayout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("main", { outerLayout: innerLayout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) })));
         let getTree = (h, b, f) => ({
             type: "div",
             props: {},

package/build/ui/layout/LabelsLeftLayout.scss

@@ -0,0 +1,47 @@
+
+@use "sass:map";
+
+@mixin cx-labelsleftlayout(
+   $name: 'labelsleftlayout',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}labelsleftlayout {
+      border-spacing: 0;
+
+      &.#{$mod}stretch {
+         width: 100%;
+
+         .#{$element}labelsleftlayout-label {
+            width: 5em;
+
+            .#{$block}label {
+               white-space: nowrap;
+            }
+         }
+      }
+   }
+
+   .#{$element}labelsleftlayout-field {
+      padding: 5px 0 5px 5px;
+   }
+
+   .#{$element}labelsleftlayout-label {
+      text-align: right;
+      vertical-align: top;
+
+      padding: 5px 5px 5px 0;
+
+      .#{$block}label {
+         padding-right: 0;
+      }
+   }
+}
+
+@if (cx-should-include('cx/ui/LabelsLeftLayout')) {
+  @include cx-labelsleftlayout();
+}

package/build/ui/layout/LabelsTopLayout.scss

@@ -0,0 +1,65 @@
+@use "sass:map";
+
+@mixin cx-labelstoplayout(
+   $name: 'labelstoplayout',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}labelstoplayout {
+      border-spacing: 0 3px;
+
+      &.#{$mod}stretch {
+         width: 100%;
+
+         //unsure what it does
+         //.#{$element}labelstoplayout-label {
+         //   width: 10em;
+         //}
+      }
+   }
+
+   .#{$element}labelstoplayout-field {
+      padding: 0 5px;
+      box-sizing: border-box;
+      vertical-align: top;
+
+      &:first-child {
+         padding-left: 0;
+      }
+
+      &:last-child {
+         padding-right: 0;
+      }
+   }
+
+   .#{$element}labelstoplayout-label {
+      vertical-align: bottom;
+      padding: 5px 5px 0 5px;
+      box-sizing: border-box;
+
+      .#{$block}label {
+         padding-left: 0;
+         padding-bottom: 0;
+      }
+
+      &:first-child {
+         padding-left: 0;
+      }
+
+      &:last-child {
+         padding-right: 0;
+      }
+   }
+
+   .#{$mod}fixed {
+      table-layout: fixed;
+   }
+}
+
+@if (cx-should-include('cx/ui/LabelsTopLayout')) {
+   @include cx-labelstoplayout();
+}

package/build/ui/layout/index.scss

@@ -0,0 +1,3 @@
+
+@import "LabelsLeftLayout";
+@import "LabelsTopLayout";

package/build/ui/layout/variables.scss

@@ -0,0 +1,2 @@
+
+// Layout variables

package/build/ui/variables.scss

@@ -0,0 +1,2 @@
+
+@import "layout/variables";

package/build/util/addEventListenerWithOptions.d.ts

@@ -12,6 +12,6 @@ interface EventMap {
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
 }
-export declare function addEventListenerWithOptions<K extends keyof EventMap>(element: Element, event: K, callback: (event: EventMap[K]) => void, options: AddEventListenerOptions): () => void;
-export declare function addEventListenerWithOptions(element: Element, event: string, callback: (event: Event) => void, options: AddEventListenerOptions): () => void;
+export declare function addEventListenerWithOptions<K extends keyof EventMap>(element: Element | Document, event: K, callback: (event: EventMap[K]) => void, options: AddEventListenerOptions): () => void;
+export declare function addEventListenerWithOptions(element: Element | Document, event: string, callback: (event: Event) => void, options: AddEventListenerOptions): () => void;
 export {};

package/build/util/call-once.scss

@@ -0,0 +1,7 @@
+$cx-call-once-data: () !default;
+
+@function cx-call-once($name) {
+   $result: map_get($cx-call-once-data, $name);
+   $cx-call-once-data: map_merge($cx-call-once-data, ($name: true)) !global;
+   @return $result != true;
+}

package/build/util/index.scss

@@ -0,0 +1,11 @@
+.cx-text-left.cx-text-left {
+   text-align: left;
+}
+
+.cx-text-right.cx-text-right {
+   text-align: right;
+}
+
+.cx-text-center.cx-text-center  {
+   text-align: center;
+}

package/build/util/scss/add-rules.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+
+@mixin cx-add-rules($styles) {
+   @each $rule, $value in $styles {
+      #{$rule}: $value;
+   }
+}
+
+@mixin cx-add-state-rules($state-style-map, $key) {
+   @include cx-add-rules(map.get($state-style-map, $key));
+}
+
+@function cx-merge-state-style-maps($state-style-map, $override-style-map) {
+   $result: $state-style-map;
+
+   @if ($override-style-map != null) {
+      @each $key, $new-value in $override-style-map {
+         $old-value: map.get($state-style-map, $key);
+         @if ($old-value != null) {
+            $new-value: map.merge($old-value, $new-value);
+         }
+         $result: map.merge(
+            $result,
+            (
+               $key: $new-value,
+            )
+         );
+      }
+   }
+
+   @return $result;
+}
+
+@function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
+   $result: map.get(map.get($state-style-map, $key), $rule);
+   @if ($result != null) {
+      @return $result;
+   }
+   @return $default;
+}

package/build/util/scss/calc.scss

@@ -0,0 +1,45 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
+@function cx-calc($lengths...) {
+   $units: ();
+
+   @each $l in $lengths {
+      $unit: math.unit($l);
+      @if (map.has-key($units, $unit)) {
+         $nl: map.get($units, $unit) + $l;
+         $units: map.merge($units, ($unit: $nl))
+      } @else {
+         $units: map.merge($units, ($unit: $l))
+      }
+   }
+
+   $keys: map.keys($units);
+   @if (list.length($keys) == 1) {
+      @return map.get($units, list.nth($keys, 1));
+   }
+
+   $calc: '';
+   $count: 0;
+
+   @each $u, $v in $units {
+      @if ($v != 0) {
+         $count: $count + 1;
+         @if ($count > 1) {
+            $calc: $calc + ' + ';
+         }
+         $calc: $calc + $v;
+      }
+   }
+
+   @if ($count == 0) {
+      @return 0;
+   }
+
+   @if ($count == 1) {
+      @return #{$calc};
+   }
+
+   @return #{'calc(' + $calc  + ')'};
+}