compostjs 0.0.12 → 0.2.0

package/.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Test
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: '8.0.x'
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - run: dotnet tool restore
+      - run: npm install
+      - run: npm test

package/CLAUDE.md

@@ -0,0 +1,78 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build Commands
+
+Prerequisites: .NET SDK 8+, Node.js, npm. Fable is installed as a dotnet local tool (`.config/dotnet-tools.json`).
+
+```bash
+dotnet tool restore          # Install Fable 4.28.0
+npm install                  # Install Vite + virtual-dom
+
+npm start                    # Dev server at http://localhost:8080 (Fable watch + Vite)
+npm run build                # Compile F# to ES modules in dist/ (for npm package)
+npm run rebuild              # Clean dist/ and rebuild
+npm run standalone           # Bundle standalone IIFE to docs/releases/
+npm test                     # Compile F# then run Vitest tests (test/*.test.js)
+
+npm run release              # Full release (runs the three steps below)
+npm run release:version      # Bump version in package.json, create git commit + tag (via np)
+npm run release:standalone   # Build standalone bundle and commit to git
+npm run release:publish      # Rebuild dist/ and npm publish (prompts for 2FA)
+```
+
+Tests use Vitest against the Fable-compiled JS output. F# must be compiled before tests run (`npm test` handles this). Test files go in `test/`. Use `c.foldDom(f, acc, node)` to traverse `DomNode` trees in tests — the callback receives `(acc, tag, attrs)` where `attrs` is a plain JS object of string attribute values. CI runs `npm test` on pushes and PRs to `master` via GitHub Actions (`.github/workflows/test.yml`).
+
+## Architecture
+
+Compost.js is a composable data visualization library. The core is written in **F#** and compiled to **JavaScript** via **Fable 4**. The runtime dependency is `virtual-dom` for efficient DOM updates in interactive charts.
+
+### F# Source (`src/compost/`)
+
+Three files, compiled in this order (defined in `compost.fsproj`):
+
+1. **`html.fs`** — `Compost.Html` module. Low-level JS interop layer:
+   - `Common` module: `[<Emit>]`-based helpers for JS operations (property access, typeof, date formatting)
+   - `Virtualdom` module: `[<Import>]` bindings to `virtual-dom` (h, diff, patch, createElement)
+   - `DomNode`/`DomAttribute` types and HTML/SVG rendering
+   - `foldDom`: generic fold over `DomNode` trees (used in tests to inspect rendered SVG)
+   - `createVirtualDomApp`: stateful interactive app loop using virtual-dom diffing
+
+2. **`core.fs`** — `Compost` namespace. The visualization engine (~800 lines):
+   - **Domain types**: `Value<'u>` (continuous `COV` or categorical `CAR`), `Scale<'v>`, `Shape<'vx,'vy>`, `Style`, `EventHandler`
+   - **Shape** is a discriminated union (Line, Bubble, Shape, Text, Image, Layered, Interactive, Axes, NestX/Y, Padding, etc.) — this is the core composable DSL
+   - Uses F# units of measure (`[<Measure>]`) for type-safe coordinate spaces
+   - `Scales` module: axis generation, range calculation
+   - `Projections` module: coordinate transformation (data space → pixel space)
+   - `Drawing` module: converts shapes → SVG elements
+   - `Events` module: routes mouse/touch events to interactive handlers
+   - `Derived` module: higher-level combinators (FillColor, StrokeColor, Column, Bar, Area)
+
+3. **`compost.fs`** — `main` module. The JavaScript API surface:
+   - Exposes `scale` (JsScale) and `compost` (JsCompost) objects
+   - Handles JS↔F# value conversion via `parseValue`/`formatValue` (numbers become `COV`, `[string, number]` arrays become `CAR`)
+   - All ~20 API methods (`render`, `interactive`, `overlay`, `axes`, `on`, etc.) are defined here
+
+### JavaScript Entry Points (`src/project/`)
+
+- **`standalone.js`** — Imports `scale`/`compost` from F# and assigns to `window.s`/`window.c`
+- **`demos.js`** — Interactive demo examples used by the dev server (`index.html`)
+- **`data.js`** — Demo datasets (elections, exchange rates, iris)
+
+### Build Outputs
+
+- **`dist/`** — ES modules for npm (`compost.js` is the entry point, `"main"` in package.json)
+- **`docs/releases/`** — Standalone IIFE bundles for `<script>` tag usage
+
+### How Fable Compilation Works
+
+`dotnet fable` compiles `.fs` files to `.fs.js` files. During `npm start` (watch mode), these appear next to the source files (`src/compost/*.fs.js`). During `npm run build`, they go to `dist/` via the `-o` flag. Fable library dependencies go into `fable_modules/`. Vite (or any bundler) then treats the `.js` output as standard ES modules.
+
+## Key Patterns
+
+- The JS API uses `obj` and `box`/`unbox` heavily for dynamic typing at the JS boundary. The F# internals are fully typed with units of measure.
+- `[<Emit("...")>]` is used for inline JS expressions (property access, typeof, Date operations).
+- `[<Import("name","module")>]` is used for virtual-dom imports.
+- `JsInterop.createObj` creates plain JS objects from F# key-value sequences.
+- Interactive charts use a virtual-dom update cycle: event → update function → render function → diff/patch.

package/README.md

@@ -33,6 +33,20 @@ JavaScript file that is added to the `releases` folder of the `docs` with the cu
 version number in the filename (and also updates the `latest` file).
 This should all happen automatically when using `npm run release`.
 
+### Releasing Compost
+
+Before releasing, make sure all changes are committed. Then run:
+
+```
+npm run release
+```
+
+This runs three steps in order:
+
+1. **`npm run release:version`** — bumps the version in `package.json` and creates a git commit and tag (via `np`)
+2. **`npm run release:standalone`** — builds the standalone bundle and commits it to git
+3. **`npm run release:publish`** — rebuilds `dist/` and publishes to npm (prompts for 2FA)
+
 ## What is the story behind the name??
 
 ![Compost](https://github.com/compostjs/compost/raw/master/compost.gif)

package/dist/compost.js

@@ -1,10 +1,10 @@
-import { Compost_createSvg, EventHandler, HorizontalAlign, VerticalAlign, Derived_Bar, Derived_Column, Derived_Font, Derived_StrokeColor, Derived_FillColor, Shape, Scale, categorical, Value, continuous } from "./core.js";
-import { printf, toFail } from "./fable_modules/fable-library-js.4.28.0/String.js";
+import { Compost_createSvg, EventHandler, Derived_Bar, Derived_Column, Derived_Font, Derived_StrokeColor, Derived_PreserveAspectRatio, Derived_FillColor, Shape, StyleConfig, Scale, HorizontalAlign, VerticalAlign, categorical, Value, continuous } from "./core.js";
+import { join, printf, toFail } from "./fable_modules/fable-library-js.4.28.0/String.js";
 import { map as map_1, item } from "./fable_modules/fable-library-js.4.28.0/Array.js";
-import { toList, map, delay, toArray } from "./fable_modules/fable-library-js.4.28.0/Seq.js";
-import { ofArray } from "./fable_modules/fable-library-js.4.28.0/List.js";
-import { defaultOf, equals } from "./fable_modules/fable-library-js.4.28.0/Util.js";
-import { renderTo, createVirtualDomApp, DomNode, DomAttribute } from "./html.js";
+import { empty, append, toList, map, singleton, collect, delay, toArray } from "./fable_modules/fable-library-js.4.28.0/Seq.js";
+import { ofArray, ofSeq } from "./fable_modules/fable-library-js.4.28.0/List.js";
+import { createObj, equals, defaultOf } from "./fable_modules/fable-library-js.4.28.0/Util.js";
+import { foldDom, renderTo, createVirtualDomApp, DomNode, DomAttribute } from "./html.js";
 
 export function Helpers_formatValue(v) {
     if (v.tag === 1) {
@@ -34,6 +34,282 @@ export function Helpers_parseValue(v) {
     }
 }
 
+function Serialization_serValue() {
+    return Helpers_formatValue;
+}
+
+function Serialization_deserValue() {
+    return Helpers_parseValue;
+}
+
+function Serialization_serializeVerticalAlign(_arg) {
+    switch (_arg.tag) {
+        case 1:
+            return "middle";
+        case 2:
+            return "hanging";
+        default:
+            return "baseline";
+    }
+}
+
+function Serialization_deserializeVerticalAlign(_arg) {
+    switch (_arg) {
+        case "baseline":
+            return new VerticalAlign(0, []);
+        case "hanging":
+            return new VerticalAlign(2, []);
+        default:
+            return new VerticalAlign(1, []);
+    }
+}
+
+function Serialization_serializeHorizontalAlign(_arg) {
+    switch (_arg.tag) {
+        case 1:
+            return "center";
+        case 2:
+            return "end";
+        default:
+            return "start";
+    }
+}
+
+function Serialization_deserializeHorizontalAlign(_arg) {
+    switch (_arg) {
+        case "start":
+            return new HorizontalAlign(0, []);
+        case "end":
+            return new HorizontalAlign(2, []);
+        default:
+            return new HorizontalAlign(1, []);
+    }
+}
+
+function Serialization_serializeScale(_arg) {
+    if (_arg.tag === 1) {
+        return {
+            kind: "categorical",
+            cats: toArray(delay(() => collect((matchValue) => singleton(matchValue.fields[0]), _arg.fields[0]))),
+        };
+    }
+    else {
+        return {
+            kind: "continuous",
+            lo: _arg.fields[0].fields[0],
+            hi: _arg.fields[1].fields[0],
+        };
+    }
+}
+
+function Serialization_deserializeScale(o) {
+    const matchValue = o["kind"];
+    switch (matchValue) {
+        case "continuous":
+            return new Scale(0, [new continuous(o["lo"]), new continuous(o["hi"])]);
+        case "categorical":
+            return new Scale(1, [toArray(delay(() => map((c) => (new categorical(c)), o["cats"])))]);
+        default:
+            return toFail(printf("Unknown scale kind: %s"))(matchValue);
+    }
+}
+
+function Serialization_serializeStyleConfig(_arg) {
+    switch (_arg.tag) {
+        case 2:
+            return {
+                kind: "stroke",
+                color: _arg.fields[0],
+            };
+        case 3:
+            return {
+                kind: "font",
+                font: _arg.fields[0],
+                color: _arg.fields[1],
+            };
+        case 4:
+            return {
+                kind: "aspect",
+                value: _arg.fields[0],
+            };
+        case 0:
+            throw new Error("Cannot serialize Custom style config");
+        default:
+            return {
+                kind: "fill",
+                color: _arg.fields[0],
+            };
+    }
+}
+
+function Serialization_deserializeStyleConfig(o) {
+    const matchValue = o["kind"];
+    switch (matchValue) {
+        case "fill":
+            return new StyleConfig(1, [o["color"]]);
+        case "stroke":
+            return new StyleConfig(2, [o["color"]]);
+        case "font":
+            return new StyleConfig(3, [o["font"], o["color"]]);
+        case "aspect":
+            return new StyleConfig(4, [o["value"]]);
+        default:
+            return toFail(printf("Unknown style config kind: %s"))(matchValue);
+    }
+}
+
+function Serialization_serializePoints(pts) {
+    return toArray(delay(() => collect((matchValue) => singleton([Serialization_serValue()(matchValue[0]), Serialization_serValue()(matchValue[1])]), pts)));
+}
+
+export function Serialization_serializeShape(s) {
+    switch (s.tag) {
+        case 9:
+            return {
+                kind: "shape",
+                points: Serialization_serializePoints(ofSeq(s.fields[0])),
+            };
+        case 8:
+            return {
+                kind: "bubble",
+                x: Serialization_serValue()(s.fields[0]),
+                y: Serialization_serValue()(s.fields[1]),
+                w: s.fields[2],
+                h: s.fields[3],
+            };
+        case 2:
+            return {
+                kind: "text",
+                x: Serialization_serValue()(s.fields[0]),
+                y: Serialization_serValue()(s.fields[1]),
+                valign: Serialization_serializeVerticalAlign(s.fields[2]),
+                halign: Serialization_serializeHorizontalAlign(s.fields[3]),
+                rotation: s.fields[4],
+                text: s.fields[5],
+            };
+        case 0:
+            return {
+                kind: "image",
+                href: s.fields[0],
+                p1: [Serialization_serValue()(s.fields[1][0]), Serialization_serValue()(s.fields[1][1])],
+                p2: [Serialization_serValue()(s.fields[2][0]), Serialization_serValue()(s.fields[2][1])],
+            };
+        case 10:
+            return {
+                kind: "layered",
+                shapes: toArray(delay(() => map(Serialization_serializeShape, s.fields[0]))),
+            };
+        case 11:
+            return {
+                kind: "axes",
+                axes: join(" ", toList(delay(() => append(s.fields[0] ? singleton("top") : empty(), delay(() => append(s.fields[1] ? singleton("right") : empty(), delay(() => append(s.fields[2] ? singleton("bottom") : empty(), delay(() => (s.fields[3] ? singleton("left") : empty())))))))))),
+                shape: Serialization_serializeShape(s.fields[4]),
+            };
+        case 13:
+            return {
+                kind: "padding",
+                top: s.fields[0][0],
+                right: s.fields[0][1],
+                bottom: s.fields[0][2],
+                left: s.fields[0][3],
+                shape: Serialization_serializeShape(s.fields[1]),
+            };
+        case 5:
+            return {
+                kind: "nestx",
+                lx: Serialization_serValue()(s.fields[0]),
+                hx: Serialization_serValue()(s.fields[1]),
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        case 6:
+            return {
+                kind: "nesty",
+                ly: Serialization_serValue()(s.fields[0]),
+                hy: Serialization_serValue()(s.fields[1]),
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        case 4: {
+            const sy = s.fields[1];
+            const sx = s.fields[0];
+            return {
+                kind: "scale",
+                sx: (sx == null) ? defaultOf() : Serialization_serializeScale(sx),
+                sy: (sy == null) ? defaultOf() : Serialization_serializeScale(sy),
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        }
+        case 1:
+            return {
+                kind: "styled",
+                param: Serialization_serializeStyleConfig(s.fields[0]),
+                shape: Serialization_serializeShape(s.fields[1]),
+            };
+        case 3:
+            return {
+                kind: "autoscale",
+                x: s.fields[0],
+                y: s.fields[1],
+                shape: Serialization_serializeShape(s.fields[2]),
+            };
+        case 14:
+            return {
+                kind: "offset",
+                dx: s.fields[0][0],
+                dy: s.fields[0][1],
+                shape: Serialization_serializeShape(s.fields[1]),
+            };
+        case 12:
+            throw new Error("Cannot serialize Interactive shapes");
+        default:
+            return {
+                kind: "line",
+                points: Serialization_serializePoints(ofSeq(s.fields[0])),
+            };
+    }
+}
+
+export function Serialization_deserializeShape(o) {
+    const matchValue = o["kind"];
+    switch (matchValue) {
+        case "line":
+            return new Shape(7, [toList(delay(() => map((p) => [Serialization_deserValue()(item(0, p)), Serialization_deserValue()(item(1, p))], o["points"])))]);
+        case "shape":
+            return new Shape(9, [toList(delay(() => map((p_1) => [Serialization_deserValue()(item(0, p_1)), Serialization_deserValue()(item(1, p_1))], o["points"])))]);
+        case "bubble":
+            return new Shape(8, [Serialization_deserValue()(o["x"]), Serialization_deserValue()(o["y"]), o["w"], o["h"]]);
+        case "text":
+            return new Shape(2, [Serialization_deserValue()(o["x"]), Serialization_deserValue()(o["y"]), Serialization_deserializeVerticalAlign(o["valign"]), Serialization_deserializeHorizontalAlign(o["halign"]), o["rotation"], o["text"]]);
+        case "image": {
+            const matchValue_1 = o["p1"];
+            const p2 = o["p2"];
+            const p1 = matchValue_1;
+            return new Shape(0, [o["href"], [Serialization_deserValue()(item(0, p1)), Serialization_deserValue()(item(1, p1))], [Serialization_deserValue()(item(0, p2)), Serialization_deserValue()(item(1, p2))]]);
+        }
+        case "layered":
+            return new Shape(10, [toList(delay(() => map(Serialization_deserializeShape, o["shapes"])))]);
+        case "axes": {
+            const a = o["axes"];
+            return new Shape(11, [a.indexOf("top") >= 0, a.indexOf("right") >= 0, a.indexOf("bottom") >= 0, a.indexOf("left") >= 0, Serialization_deserializeShape(o["shape"])]);
+        }
+        case "padding":
+            return new Shape(13, [[o["top"], o["right"], o["bottom"], o["left"]], Serialization_deserializeShape(o["shape"])]);
+        case "nestx":
+            return new Shape(5, [Serialization_deserValue()(o["lx"]), Serialization_deserValue()(o["hx"]), Serialization_deserializeShape(o["shape"])]);
+        case "nesty":
+            return new Shape(6, [Serialization_deserValue()(o["ly"]), Serialization_deserValue()(o["hy"]), Serialization_deserializeShape(o["shape"])]);
+        case "scale":
+            return new Shape(4, [equals(o["sx"], defaultOf()) ? undefined : Serialization_deserializeScale(o["sx"]), equals(o["sy"], defaultOf()) ? undefined : Serialization_deserializeScale(o["sy"]), Serialization_deserializeShape(o["shape"])]);
+        case "styled":
+            return new Shape(1, [Serialization_deserializeStyleConfig(o["param"]), Serialization_deserializeShape(o["shape"])]);
+        case "autoscale":
+            return new Shape(3, [o["x"], o["y"], Serialization_deserializeShape(o["shape"])]);
+        case "offset":
+            return new Shape(14, [[o["dx"], o["dy"]], Serialization_deserializeShape(o["shape"])]);
+        default:
+            return toFail(printf("Unknown shape kind: %s"))(matchValue);
+    }
+}
+
 export const scale = {
     continuous(lo, hi) {
         return new Scale(0, [new continuous(lo), new continuous(hi)]);
@@ -45,37 +321,40 @@ export const scale = {
 
 export const compost = {
     scaleX(sc, sh) {
-        return new Shape(3, [sc, undefined, sh]);
+        return new Shape(4, [sc, undefined, sh]);
     },
     scaleY(sc_1, sh_1) {
-        return new Shape(3, [undefined, sc_1, sh_1]);
+        return new Shape(4, [undefined, sc_1, sh_1]);
     },
     scale(sx, sy, sh_2) {
-        return new Shape(3, [sx, sy, sh_2]);
+        return new Shape(4, [sx, sy, sh_2]);
     },
     nestX(lx, hx, s) {
-        return new Shape(4, [Helpers_parseValue(lx), Helpers_parseValue(hx), s]);
+        return new Shape(5, [Helpers_parseValue(lx), Helpers_parseValue(hx), s]);
     },
     nestY(ly, hy, s_1) {
-        return new Shape(5, [Helpers_parseValue(ly), Helpers_parseValue(hy), s_1]);
+        return new Shape(6, [Helpers_parseValue(ly), Helpers_parseValue(hy), s_1]);
     },
     nest(lx_1, hx_1, ly_1, hy_1, s_2) {
-        return new Shape(5, [Helpers_parseValue(ly_1), Helpers_parseValue(hy_1), new Shape(4, [Helpers_parseValue(lx_1), Helpers_parseValue(hx_1), s_2])]);
+        return new Shape(6, [Helpers_parseValue(ly_1), Helpers_parseValue(hy_1), new Shape(5, [Helpers_parseValue(lx_1), Helpers_parseValue(hx_1), s_2])]);
     },
     overlay(sh_3) {
-        return new Shape(9, [ofArray(sh_3)]);
+        return new Shape(10, [ofArray(sh_3)]);
     },
     padding(t, r, b, l, s_3) {
-        return new Shape(12, [[t, r, b, l], s_3]);
+        return new Shape(13, [[t, r, b, l], s_3]);
     },
     fillColor(c, s_4) {
         return Derived_FillColor(c, s_4);
     },
-    strokeColor(c_1, s_5) {
-        return Derived_StrokeColor(c_1, s_5);
+    preserveAspectRatio(pa, s_5) {
+        return Derived_PreserveAspectRatio(pa, s_5);
+    },
+    strokeColor(c_1, s_6) {
+        return Derived_StrokeColor(c_1, s_6);
     },
-    font(f, c_2, s_6) {
-        return Derived_Font(f, c_2, s_6);
+    font(f, c_2, s_7) {
+        return Derived_Font(f, c_2, s_7);
     },
     column(xp, yp) {
         return Derived_Column(new categorical(xp), new continuous(yp));
@@ -84,26 +363,29 @@ export const compost = {
         return Derived_Bar(new continuous(xp_1), new categorical(yp_1));
     },
     bubble(xp_2, yp_2, w, h) {
-        return new Shape(7, [Helpers_parseValue(xp_2), Helpers_parseValue(yp_2), w, h]);
+        return new Shape(8, [Helpers_parseValue(xp_2), Helpers_parseValue(yp_2), w, h]);
     },
-    text(xp_3, yp_3, t_1, s_7, r_1) {
+    text(xp_3, yp_3, t_1, s_8, r_1) {
         const r_2 = equals(r_1, defaultOf()) ? 0 : r_1;
-        const s_8 = equals(s_7, defaultOf()) ? "" : s_7;
-        const va = (s_8.indexOf("baseline") >= 0) ? (new VerticalAlign(0, [])) : ((s_8.indexOf("hanging") >= 0) ? (new VerticalAlign(2, [])) : (new VerticalAlign(1, [])));
-        const ha = (s_8.indexOf("start") >= 0) ? (new HorizontalAlign(0, [])) : ((s_8.indexOf("end") >= 0) ? (new HorizontalAlign(2, [])) : (new HorizontalAlign(1, [])));
-        return new Shape(1, [Helpers_parseValue(xp_3), Helpers_parseValue(yp_3), va, ha, r_2, t_1]);
+        const s_9 = equals(s_8, defaultOf()) ? "" : s_8;
+        const va = (s_9.indexOf("baseline") >= 0) ? (new VerticalAlign(0, [])) : ((s_9.indexOf("hanging") >= 0) ? (new VerticalAlign(2, [])) : (new VerticalAlign(1, [])));
+        const ha = (s_9.indexOf("start") >= 0) ? (new HorizontalAlign(0, [])) : ((s_9.indexOf("end") >= 0) ? (new HorizontalAlign(2, [])) : (new HorizontalAlign(1, [])));
+        return new Shape(2, [Helpers_parseValue(xp_3), Helpers_parseValue(yp_3), va, ha, r_2, t_1]);
     },
     shape(a) {
-        return new Shape(8, [toList(delay(() => map((p) => [Helpers_parseValue(item(0, p)), Helpers_parseValue(item(1, p))], a)))]);
+        return new Shape(9, [toList(delay(() => map((p) => [Helpers_parseValue(item(0, p)), Helpers_parseValue(item(1, p))], a)))]);
     },
     line(a_1) {
-        return new Shape(6, [toList(delay(() => map((p_1) => [Helpers_parseValue(item(0, p_1)), Helpers_parseValue(item(1, p_1))], a_1)))]);
+        return new Shape(7, [toList(delay(() => map((p_1) => [Helpers_parseValue(item(0, p_1)), Helpers_parseValue(item(1, p_1))], a_1)))]);
+    },
+    image(href, pt1, pt2) {
+        return new Shape(0, [href, [Helpers_parseValue(item(0, pt1)), Helpers_parseValue(item(1, pt1))], [Helpers_parseValue(item(0, pt2)), Helpers_parseValue(item(1, pt2))]]);
     },
-    axes(a_2, s_9) {
-        return new Shape(10, [a_2.indexOf("top") >= 0, a_2.indexOf("right") >= 0, a_2.indexOf("bottom") >= 0, a_2.indexOf("left") >= 0, s_9]);
+    axes(a_2, s_10) {
+        return new Shape(11, [a_2.indexOf("top") >= 0, a_2.indexOf("right") >= 0, a_2.indexOf("bottom") >= 0, a_2.indexOf("left") >= 0, s_10]);
     },
-    on(o, s_10) {
-        return new Shape(11, [toList(delay(() => map((k) => {
+    on(o, s_11) {
+        return new Shape(12, [toList(delay(() => map((k) => {
             let f_2;
             const f_1 = o[k];
             f_2 = ((args) => {
@@ -126,7 +408,7 @@ export const compost = {
             }])) : ((k === "touchend") ? (new EventHandler(6, [(me_7) => {
                 f_2([me_7]);
             }])) : toFail(printf("Unsupported event type \'%s\' passed to the \'on\' primitive."))(k))))))));
-        }, Object.keys(o)))), s_10]);
+        }, Object.keys(o)))), s_11]);
     },
     svg(w_1, h_1, shape) {
         return Compost_createSvg(false, false, w_1, h_1, shape);
@@ -149,9 +431,9 @@ export const compost = {
         return new DomNode(1, [defaultOf(), tag, attrs_1, children_1]);
     },
     interactive(id, init, update, render) {
-        createVirtualDomApp(id, init, (t_2, s_12) => {
+        createVirtualDomApp(id, init, (t_2, s_13) => {
             const el = document.getElementById(id);
-            const res = render(t_2, s_12);
+            const res = render(t_2, s_13);
             if (equals(res["constructor"], (new DomNode(0, [""]))["constructor"])) {
                 return res;
             }
@@ -164,5 +446,22 @@ export const compost = {
         const el_1 = document.getElementById(id_1);
         renderTo(el_1, Compost_createSvg(false, false, el_1.clientWidth, el_1.clientHeight, viz));
     },
+    foldDom(f_3, acc, node) {
+        return foldDom((acc_1, _ns, tag_1, attrs_3) => f_3(acc_1, tag_1, createObj(toArray(delay(() => collect((matchValue) => {
+            const matchValue_1 = matchValue[1];
+            if (matchValue_1.tag === 1) {
+                return singleton([matchValue[0], matchValue_1.fields[0]]);
+            }
+            else {
+                return empty();
+            }
+        }, attrs_3))))), acc, node);
+    },
+    serialize(s_15) {
+        return Serialization_serializeShape(s_15);
+    },
+    deserialize(o_1) {
+        return Serialization_deserializeShape(o_1);
+    },
 };
 

package/dist/core.js

@@ -164,7 +164,7 @@ export function Scale_$reflection(gen0) {
 }
 
 export class Style extends Record {
-    constructor(StrokeColor, StrokeWidth, StrokeDashArray, Fill, Animation, Font, Cursor, FormatAxisXLabel, FormatAxisYLabel) {
+    constructor(StrokeColor, StrokeWidth, StrokeDashArray, Fill, Animation, Font, Cursor, PreserveAspectRatio, FormatAxisXLabel, FormatAxisYLabel) {
         super();
         this.StrokeColor = StrokeColor;
         this.StrokeWidth = StrokeWidth;
@@ -173,13 +173,46 @@ export class Style extends Record {
         this.Animation = Animation;
         this.Font = Font;
         this.Cursor = Cursor;
+        this.PreserveAspectRatio = PreserveAspectRatio;
         this.FormatAxisXLabel = FormatAxisXLabel;
         this.FormatAxisYLabel = FormatAxisYLabel;
     }
 }
 
 export function Style_$reflection() {
-    return record_type("Compost.Style", [], Style, () => [["StrokeColor", tuple_type(float64_type, Color_$reflection())], ["StrokeWidth", Width_$reflection()], ["StrokeDashArray", class_type("System.Collections.Generic.IEnumerable`1", [Number$_$reflection()])], ["Fill", FillStyle_$reflection()], ["Animation", option_type(tuple_type(int32_type, string_type, lambda_type(Style_$reflection(), Style_$reflection())))], ["Font", string_type], ["Cursor", string_type], ["FormatAxisXLabel", lambda_type(Scale_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), lambda_type(Value_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), string_type))], ["FormatAxisYLabel", lambda_type(Scale_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), lambda_type(Value_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), string_type))]]);
+    return record_type("Compost.Style", [], Style, () => [["StrokeColor", tuple_type(float64_type, Color_$reflection())], ["StrokeWidth", Width_$reflection()], ["StrokeDashArray", class_type("System.Collections.Generic.IEnumerable`1", [Number$_$reflection()])], ["Fill", FillStyle_$reflection()], ["Animation", option_type(tuple_type(int32_type, string_type, lambda_type(Style_$reflection(), Style_$reflection())))], ["Font", string_type], ["Cursor", string_type], ["PreserveAspectRatio", string_type], ["FormatAxisXLabel", lambda_type(Scale_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), lambda_type(Value_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), string_type))], ["FormatAxisYLabel", lambda_type(Scale_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), lambda_type(Value_$reflection(class_type("Microsoft.FSharp.Core.CompilerServices.MeasureOne")), string_type))]]);
+}
+
+export class StyleConfig extends Union {
+    constructor(tag, fields) {
+        super();
+        this.tag = tag;
+        this.fields = fields;
+    }
+    cases() {
+        return ["Custom", "FillColor", "StrokeColor", "Font", "PreserveAspectRatio"];
+    }
+}
+
+export function StyleConfig_$reflection() {
+    return union_type("Compost.StyleConfig", [], StyleConfig, () => [[["Item", lambda_type(Style_$reflection(), Style_$reflection())]], [["Item", string_type]], [["Item", string_type]], [["Item1", string_type], ["Item2", string_type]], [["Item", string_type]]]);
+}
+
+export function StyleConfig__Apply_4E2CA0C5(this$, style) {
+    switch (this$.tag) {
+        case 1:
+            return new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [this$.fields[0]])]]), style.Animation, style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
+        case 2:
+            return new Style([1, new Color(1, [this$.fields[0]])], style.StrokeWidth, style.StrokeDashArray, style.Fill, style.Animation, style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
+        case 3: {
+            const clr_2 = this$.fields[1];
+            return new Style([0, new Color(1, [clr_2])], style.StrokeWidth, style.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [clr_2])]]), style.Animation, this$.fields[0], style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
+        }
+        case 4:
+            return new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, style.Fill, style.Animation, style.Font, style.Cursor, this$.fields[0], style.FormatAxisXLabel, style.FormatAxisYLabel);
+        default:
+            return this$.fields[0](style);
+    }
 }
 
 export class EventHandler extends Union {
@@ -219,12 +252,12 @@ export class Shape extends Union {
         this.fields = fields;
     }
     cases() {
-        return ["Style", "Text", "AutoScale", "InnerScale", "NestX", "NestY", "Line", "Bubble", "Shape", "Layered", "Axes", "Interactive", "Padding", "Offset"];
+        return ["Image", "Style", "Text", "AutoScale", "InnerScale", "NestX", "NestY", "Line", "Bubble", "Shape", "Layered", "Axes", "Interactive", "Padding", "Offset"];
     }
 }
 
 export function Shape_$reflection(gen0, gen1) {
-    return union_type("Compost.Shape", [gen0, gen1], Shape, () => [[["Item1", lambda_type(Style_$reflection(), Style_$reflection())], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", option_type(Scale_$reflection(gen0))], ["Item2", option_type(Scale_$reflection(gen1))], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [Shape_$reflection(gen0, gen1)])]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", bool_type], ["Item4", bool_type], ["Item5", Shape_$reflection(gen0, gen1)]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]]]);
+    return union_type("Compost.Shape", [gen0, gen1], Shape, () => [[["Item1", string_type], ["Item2", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))], ["Item3", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))]], [["Item1", StyleConfig_$reflection()], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", option_type(Scale_$reflection(gen0))], ["Item2", option_type(Scale_$reflection(gen1))], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Shape_$reflection(gen0, gen1)]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))])]], [["Item", class_type("System.Collections.Generic.IEnumerable`1", [Shape_$reflection(gen0, gen1)])]], [["Item1", bool_type], ["Item2", bool_type], ["Item3", bool_type], ["Item4", bool_type], ["Item5", Shape_$reflection(gen0, gen1)]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Shape_$reflection(gen0, gen1)]]]);
 }
 
 export class Svg_StringBuilder {
@@ -271,17 +304,17 @@ export class Svg_Svg extends Union {
         this.fields = fields;
     }
     cases() {
-        return ["Path", "Ellipse", "Rect", "Text", "Combine", "Empty"];
+        return ["Image", "Path", "Ellipse", "Rect", "Text", "Combine", "Empty"];
     }
 }
 
 export function Svg_Svg_$reflection() {
-    return union_type("Compost.Svg.Svg", [], Svg_Svg, () => [[["Item1", array_type(Svg_PathSegment_$reflection())], ["Item2", string_type]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", tuple_type(float64_type, float64_type)], ["Item3", string_type]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", tuple_type(float64_type, float64_type)], ["Item3", string_type]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", string_type], ["Item3", float64_type], ["Item4", string_type]], [["Item", array_type(Svg_Svg_$reflection())]], []]);
+    return union_type("Compost.Svg.Svg", [], Svg_Svg, () => [[["Item1", string_type], ["Item2", tuple_type(float64_type, float64_type)], ["Item3", tuple_type(float64_type, float64_type)], ["Item4", string_type]], [["Item1", array_type(Svg_PathSegment_$reflection())], ["Item2", string_type]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", tuple_type(float64_type, float64_type)], ["Item3", string_type]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", tuple_type(float64_type, float64_type)], ["Item3", string_type]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", string_type], ["Item3", float64_type], ["Item4", string_type]], [["Item", array_type(Svg_Svg_$reflection())]], []]);
 }
 
 export function Svg_mapSvg(f, _arg) {
-    if (_arg.tag === 4) {
-        return new Svg_Svg(4, [map((_arg_1) => Svg_mapSvg(f, _arg_1), _arg.fields[0])]);
+    if (_arg.tag === 5) {
+        return new Svg_Svg(5, [map((_arg_1) => Svg_mapSvg(f, _arg_1), _arg.fields[0])]);
     }
     else {
         return f(_arg);
@@ -322,17 +355,19 @@ export function Svg_RenderingContext_$reflection() {
 export function Svg_renderSvg(ctx, svg) {
     return delay(() => {
         switch (svg.tag) {
-            case 3: {
+            case 4: {
                 const y = svg.fields[0][1];
                 const x = svg.fields[0][0];
                 const rotation = svg.fields[2];
                 return singleton(El_op_Dynamic_Z451691CD(s_6, "text")(toList(delay(() => append(singleton(op_EqualsGreater("style", svg.fields[3])), delay(() => ((rotation === 0) ? append(singleton(op_EqualsGreater("x", x.toString())), delay(() => singleton(op_EqualsGreater("y", y.toString())))) : append(singleton(op_EqualsGreater("x", "0")), delay(() => append(singleton(op_EqualsGreater("y", "0")), delay(() => singleton(op_EqualsGreater("transform", toText(printf("translate(%f,%f) rotate(%f)"))(x)(y)(rotation)))))))))))))(singleton_1(text(svg.fields[1]))));
             }
-            case 4:
+            case 5:
                 return collect((s) => Svg_renderSvg(ctx, s), svg.fields[0]);
-            case 1:
+            case 2:
                 return singleton(El_op_Dynamic_Z451691CD(s_6, "ellipse")(ofArray([op_EqualsGreater("cx", svg.fields[0][0].toString()), op_EqualsGreater("cy", svg.fields[0][1].toString()), op_EqualsGreater("rx", svg.fields[1][0].toString()), op_EqualsGreater("ry", svg.fields[1][1].toString()), op_EqualsGreater("style", svg.fields[2])]))(empty()));
-            case 2: {
+            case 0:
+                return singleton(El_op_Dynamic_Z451691CD(s_6, "image")(ofArray([op_EqualsGreater("href", svg.fields[0]), op_EqualsGreater("preserveAspectRatio", svg.fields[3]), op_EqualsGreater("x", svg.fields[1][0].toString()), op_EqualsGreater("y", svg.fields[1][1].toString()), op_EqualsGreater("width", svg.fields[2][0].toString()), op_EqualsGreater("height", svg.fields[2][1].toString())]))(empty()));
+            case 3: {
                 const y2 = svg.fields[1][1];
                 const y1 = svg.fields[0][1];
                 const x2 = svg.fields[1][0];
@@ -343,7 +378,7 @@ export function Svg_renderSvg(ctx, svg) {
                 const matchValue_3 = Math.abs(y1 - y2);
                 return singleton(El_op_Dynamic_Z451691CD(s_6, "rect")(ofArray([op_EqualsGreater("x", matchValue.toString()), op_EqualsGreater("y", matchValue_1.toString()), op_EqualsGreater("width", matchValue_2.toString()), op_EqualsGreater("height", matchValue_3.toString()), op_EqualsGreater("style", svg.fields[2])]))(empty()));
             }
-            case 0:
+            case 1:
                 return singleton(El_op_Dynamic_Z451691CD(s_6, "path")(ofArray([op_EqualsGreater("d", Svg_formatPath(svg.fields[0])), op_EqualsGreater("style", svg.fields[1])]))(empty()));
             default: {
                 return empty_1();
@@ -382,8 +417,8 @@ export function Svg_formatStyle(defs, style) {
         const ease = matchValue[1];
         const anim = matchValue[2];
         const id = "anim_" + replace((copyOfStruct = newGuid(), copyOfStruct), "-", "");
-        const fromstyle = Svg_formatStyle(defs, new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, style.Fill, undefined, style.Font, style.Cursor, style.FormatAxisXLabel, style.FormatAxisYLabel));
-        const tostyle = Svg_formatStyle(defs, (bind$0040 = anim(style), new Style(bind$0040.StrokeColor, bind$0040.StrokeWidth, bind$0040.StrokeDashArray, bind$0040.Fill, undefined, bind$0040.Font, bind$0040.Cursor, bind$0040.FormatAxisXLabel, bind$0040.FormatAxisYLabel)));
+        const fromstyle = Svg_formatStyle(defs, new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, style.Fill, undefined, style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel));
+        const tostyle = Svg_formatStyle(defs, (bind$0040 = anim(style), new Style(bind$0040.StrokeColor, bind$0040.StrokeWidth, bind$0040.StrokeDashArray, bind$0040.Fill, undefined, bind$0040.Font, bind$0040.Cursor, bind$0040.PreserveAspectRatio, bind$0040.FormatAxisXLabel, bind$0040.FormatAxisYLabel)));
         const item = El_op_Dynamic_Z451691CD(h_2, "style")(empty())(singleton_1(text(toText(printf("@keyframes %s { from { %s } to { %s } }"))(id)(fromstyle)(tostyle))));
         void (defs.push(item));
         patternInput = [anim(style), toText(printf("animation: %s %dms %s; "))(id)(ms)(ease)];
@@ -399,12 +434,12 @@ export class Scales_ScaledShape extends Union {
         this.fields = fields;
     }
     cases() {
-        return ["ScaledStyle", "ScaledText", "ScaledLine", "ScaledBubble", "ScaledShape", "ScaledLayered", "ScaledInteractive", "ScaledPadding", "ScaledOffset", "ScaledNestX", "ScaledNestY"];
+        return ["ScaledStyle", "ScaledText", "ScaledLine", "ScaledBubble", "ScaledShape", "ScaledImage", "ScaledLayered", "ScaledInteractive", "ScaledPadding", "ScaledOffset", "ScaledNestX", "ScaledNestY"];
     }
 }
 
 export function Scales_ScaledShape_$reflection(gen0, gen1) {
-    return union_type("Compost.Scales.ScaledShape", [gen0, gen1], Scales_ScaledShape, () => [[["Item1", lambda_type(Style_$reflection(), Style_$reflection())], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item", array_type(Scales_ScaledShape_$reflection(gen0, gen1))]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Scale_$reflection(gen0)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]]]);
+    return union_type("Compost.Scales.ScaledShape", [gen0, gen1], Scales_ScaledShape, () => [[["Item1", StyleConfig_$reflection()], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", VerticalAlign_$reflection()], ["Item4", HorizontalAlign_$reflection()], ["Item5", float64_type], ["Item6", string_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen1)], ["Item3", float64_type], ["Item4", float64_type]], [["Item", array_type(tuple_type(Value_$reflection(gen0), Value_$reflection(gen1)))]], [["Item1", string_type], ["Item2", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))], ["Item3", tuple_type(Value_$reflection(gen0), Value_$reflection(gen1))]], [["Item", array_type(Scales_ScaledShape_$reflection(gen0, gen1))]], [["Item1", class_type("System.Collections.Generic.IEnumerable`1", [EventHandler_$reflection(gen0, gen1)])], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type, float64_type, float64_type)], ["Item2", Scale_$reflection(gen0)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", tuple_type(float64_type, float64_type)], ["Item2", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen0)], ["Item2", Value_$reflection(gen0)], ["Item3", Scale_$reflection(gen0)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]], [["Item1", Value_$reflection(gen1)], ["Item2", Value_$reflection(gen1)], ["Item3", Scale_$reflection(gen1)], ["Item4", Scales_ScaledShape_$reflection(gen0, gen1)]]]);
 }
 
 export function Scales_getExtremes(_arg) {
@@ -597,25 +632,25 @@ export function Scales_calculateShapeScales(points) {
 export function Scales_calculateScales(style, shape) {
     const calculateScales = (shape_2) => Scales_calculateScales(style, shape_2);
     switch (shape.tag) {
-        case 4: {
+        case 5: {
             const nx2 = shape.fields[1];
             const nx1 = shape.fields[0];
             const patternInput_1 = calculateScales(shape.fields[2]);
-            return [[Scales_calculateShapeScale([nx1, nx2]), patternInput_1[0][1]], new Scales_ScaledShape(9, [nx1, nx2, patternInput_1[0][0], patternInput_1[1]])];
+            return [[Scales_calculateShapeScale([nx1, nx2]), patternInput_1[0][1]], new Scales_ScaledShape(10, [nx1, nx2, patternInput_1[0][0], patternInput_1[1]])];
         }
-        case 5: {
+        case 6: {
             const ny2 = shape.fields[1];
             const ny1 = shape.fields[0];
             const patternInput_2 = calculateScales(shape.fields[2]);
-            return [[patternInput_2[0][0], Scales_calculateShapeScale([ny1, ny2])], new Scales_ScaledShape(10, [ny1, ny2, patternInput_2[0][1], patternInput_2[1]])];
+            return [[patternInput_2[0][0], Scales_calculateShapeScale([ny1, ny2])], new Scales_ScaledShape(11, [ny1, ny2, patternInput_2[0][1], patternInput_2[1]])];
         }
-        case 3: {
+        case 4: {
             const sy = shape.fields[1];
             const sx = shape.fields[0];
             const patternInput_3 = calculateScales(shape.fields[2]);
             return [[(sx != null) ? sx : patternInput_3[0][0], (sy != null) ? sy : patternInput_3[0][1]], patternInput_3[1]];
         }
-        case 2: {
+        case 3: {
             const patternInput_4 = calculateScales(shape.fields[2]);
             const isy_3 = patternInput_4[0][1];
             const isx_3 = patternInput_4[0][0];
@@ -630,17 +665,17 @@ export function Scales_calculateScales(style, shape) {
             };
             return [[shape.fields[0] ? autoScale(isx_3) : isx_3, shape.fields[1] ? autoScale(isy_3) : isy_3], patternInput_4[1]];
         }
-        case 13: {
+        case 14: {
             const patternInput_6 = calculateScales(shape.fields[1]);
-            return [patternInput_6[0], new Scales_ScaledShape(8, [shape.fields[0], patternInput_6[1]])];
+            return [patternInput_6[0], new Scales_ScaledShape(9, [shape.fields[0], patternInput_6[1]])];
         }
-        case 12: {
+        case 13: {
             const patternInput_7 = calculateScales(shape.fields[1]);
             const sy_3 = patternInput_7[0][1];
             const sx_3 = patternInput_7[0][0];
-            return [[sx_3, sy_3], new Scales_ScaledShape(7, [shape.fields[0], sx_3, sy_3, patternInput_7[1]])];
+            return [[sx_3, sy_3], new Scales_ScaledShape(8, [shape.fields[0], sx_3, sy_3, patternInput_7[1]])];
         }
-        case 7: {
+        case 8: {
             const y = shape.fields[1];
             const x = shape.fields[0];
             const makeSingletonScale = (_arg_1) => {
@@ -654,7 +689,7 @@ export function Scales_calculateScales(style, shape) {
             };
             return [[makeSingletonScale(x), makeSingletonScale(y)], new Scales_ScaledShape(3, [x, y, shape.fields[2], shape.fields[3]])];
         }
-        case 1: {
+        case 2: {
             const y_1 = shape.fields[1];
             const x_1 = shape.fields[0];
             const makeSingletonScale_1 = (_arg_2) => {
@@ -668,15 +703,20 @@ export function Scales_calculateScales(style, shape) {
             };
             return [[makeSingletonScale_1(x_1), makeSingletonScale_1(y_1)], new Scales_ScaledShape(1, [x_1, y_1, shape.fields[2], shape.fields[3], shape.fields[4], shape.fields[5]])];
         }
-        case 6: {
+        case 7: {
             const line_1 = toArray(shape.fields[0]);
             return [Scales_calculateShapeScales(line_1), new Scales_ScaledShape(2, [line_1])];
         }
-        case 8: {
+        case 0: {
+            const pt2 = shape.fields[2];
+            const pt1 = shape.fields[1];
+            return [Scales_calculateShapeScales([pt1, pt2]), new Scales_ScaledShape(5, [shape.fields[0], pt1, pt2])];
+        }
+        case 9: {
             const points_1 = toArray(shape.fields[0]);
             return [Scales_calculateShapeScales(points_1), new Scales_ScaledShape(4, [points_1])];
         }
-        case 10: {
+        case 11: {
             const showTop = shape.fields[0];
             const showRight = shape.fields[1];
             const showLeft = shape.fields[3];
@@ -691,25 +731,25 @@ export function Scales_calculateScales(style, shape) {
             const lx = matchValue[0];
             const hy = matchValue_1[1];
             const hx = matchValue[1];
-            const LineStyle = (clr, alpha, width, shape_18) => (new Shape(0, [(s) => (new Style([alpha, new Color(1, [clr])], new Width(width), s.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["transparent"])]]), s.Animation, s.Font, s.Cursor, s.FormatAxisXLabel, s.FormatAxisYLabel)), shape_18]));
-            const FontStyle = (style_2, shape_19) => (new Shape(0, [(s_1) => (new Style([0, new Color(1, ["transparent"])], s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["black"])]]), s_1.Animation, style_2, s_1.Cursor, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), shape_19]));
-            return calculateScales(new Shape(12, [[showTop ? 30 : 0, showRight ? 50 : 0, showBottom ? 30 : 0, showLeft ? 50 : 0], new Shape(9, [toList(delay(() => append(singleton(new Shape(3, [sx_4, sy_4, new Shape(9, [toList(delay(() => append(map_1((x_2) => LineStyle("#e4e4e4", 1, 1, new Shape(6, [[[x_2, ly], [x_2, hy]]])), Scales_generateAxisSteps(sx_4)), delay(() => map_1((y_2) => LineStyle("#e4e4e4", 1, 1, new Shape(6, [[[lx, y_2], [hx, y_2]]])), Scales_generateAxisSteps(sy_4))))))])])), delay(() => append(showTop ? append(singleton(LineStyle("black", 1, 2, new Shape(6, [[[lx, hy], [hx, hy]]]))), delay(() => collect((matchValue_2) => singleton(FontStyle("9pt sans-serif", new Shape(13, [[0, -10], new Shape(1, [matchValue_2[0], hy, new VerticalAlign(0, []), new HorizontalAlign(1, []), 0, matchValue_2[1]])]))), Scales_generateAxisLabels(style.FormatAxisXLabel, sx_4)))) : empty_1(), delay(() => append(showRight ? append(singleton(LineStyle("black", 1, 2, new Shape(6, [[[hx, hy], [hx, ly]]]))), delay(() => collect((matchValue_3) => singleton(FontStyle("9pt sans-serif", new Shape(13, [[10, 0], new Shape(1, [hx, matchValue_3[0], new VerticalAlign(1, []), new HorizontalAlign(0, []), 0, matchValue_3[1]])]))), Scales_generateAxisLabels(style.FormatAxisYLabel, sy_4)))) : empty_1(), delay(() => append(showBottom ? append(singleton(LineStyle("black", 1, 2, new Shape(6, [[[lx, ly], [hx, ly]]]))), delay(() => collect((matchValue_4) => singleton(FontStyle("9pt sans-serif", new Shape(13, [[0, 10], new Shape(1, [matchValue_4[0], ly, new VerticalAlign(2, []), new HorizontalAlign(1, []), 0, matchValue_4[1]])]))), Scales_generateAxisLabels(style.FormatAxisXLabel, sx_4)))) : empty_1(), delay(() => append(showLeft ? append(singleton(LineStyle("black", 1, 2, new Shape(6, [[[lx, hy], [lx, ly]]]))), delay(() => collect((matchValue_5) => singleton(FontStyle("9pt sans-serif", new Shape(13, [[-10, 0], new Shape(1, [lx, matchValue_5[0], new VerticalAlign(1, []), new HorizontalAlign(2, []), 0, matchValue_5[1]])]))), Scales_generateAxisLabels(style.FormatAxisYLabel, sy_4)))) : empty_1(), delay(() => singleton(shape_17)))))))))))))])]));
+            const LineStyle = (clr, alpha, width, shape_18) => (new Shape(1, [new StyleConfig(0, [(s) => (new Style([alpha, new Color(1, [clr])], new Width(width), s.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["transparent"])]]), s.Animation, s.Font, s.Cursor, s.PreserveAspectRatio, s.FormatAxisXLabel, s.FormatAxisYLabel))]), shape_18]));
+            const FontStyle = (style_2, shape_19) => (new Shape(1, [new StyleConfig(0, [(s_1) => (new Style([0, new Color(1, ["transparent"])], s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, ["black"])]]), s_1.Animation, style_2, s_1.Cursor, s_1.PreserveAspectRatio, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel))]), shape_19]));
+            return calculateScales(new Shape(13, [[showTop ? 30 : 0, showRight ? 50 : 0, showBottom ? 30 : 0, showLeft ? 50 : 0], new Shape(10, [toList(delay(() => append(singleton(new Shape(4, [sx_4, sy_4, new Shape(10, [toList(delay(() => append(map_1((x_2) => LineStyle("#e4e4e4", 1, 1, new Shape(7, [[[x_2, ly], [x_2, hy]]])), Scales_generateAxisSteps(sx_4)), delay(() => map_1((y_2) => LineStyle("#e4e4e4", 1, 1, new Shape(7, [[[lx, y_2], [hx, y_2]]])), Scales_generateAxisSteps(sy_4))))))])])), delay(() => append(showTop ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[lx, hy], [hx, hy]]]))), delay(() => collect((matchValue_2) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[0, -10], new Shape(2, [matchValue_2[0], hy, new VerticalAlign(0, []), new HorizontalAlign(1, []), 0, matchValue_2[1]])]))), Scales_generateAxisLabels(style.FormatAxisXLabel, sx_4)))) : empty_1(), delay(() => append(showRight ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[hx, hy], [hx, ly]]]))), delay(() => collect((matchValue_3) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[10, 0], new Shape(2, [hx, matchValue_3[0], new VerticalAlign(1, []), new HorizontalAlign(0, []), 0, matchValue_3[1]])]))), Scales_generateAxisLabels(style.FormatAxisYLabel, sy_4)))) : empty_1(), delay(() => append(showBottom ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[lx, ly], [hx, ly]]]))), delay(() => collect((matchValue_4) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[0, 10], new Shape(2, [matchValue_4[0], ly, new VerticalAlign(2, []), new HorizontalAlign(1, []), 0, matchValue_4[1]])]))), Scales_generateAxisLabels(style.FormatAxisXLabel, sx_4)))) : empty_1(), delay(() => append(showLeft ? append(singleton(LineStyle("black", 1, 2, new Shape(7, [[[lx, hy], [lx, ly]]]))), delay(() => collect((matchValue_5) => singleton(FontStyle("9pt sans-serif", new Shape(14, [[-10, 0], new Shape(2, [lx, matchValue_5[0], new VerticalAlign(1, []), new HorizontalAlign(2, []), 0, matchValue_5[1]])]))), Scales_generateAxisLabels(style.FormatAxisYLabel, sy_4)))) : empty_1(), delay(() => singleton(shape_17)))))))))))))])]));
         }
-        case 9: {
+        case 10: {
             const scaled = map(calculateScales, Array.from(shape.fields[0]));
             const sxs = map((tupledArg) => tupledArg[0][0], scaled);
             const sys = map((tupledArg_1) => tupledArg_1[0][1], scaled);
-            return [[sxs.reduce(Scales_unionScales), sys.reduce(Scales_unionScales)], new Scales_ScaledShape(5, [map((tuple) => tuple[1], scaled)])];
+            return [[sxs.reduce(Scales_unionScales), sys.reduce(Scales_unionScales)], new Scales_ScaledShape(6, [map((tuple) => tuple[1], scaled)])];
         }
-        case 11: {
+        case 12: {
             const patternInput_10 = calculateScales(shape.fields[1]);
-            const scales_8 = patternInput_10[0];
-            return [scales_8, new Scales_ScaledShape(6, [shape.fields[0], scales_8[0], scales_8[1], patternInput_10[1]])];
+            const scales_9 = patternInput_10[0];
+            return [scales_9, new Scales_ScaledShape(7, [shape.fields[0], scales_9[0], scales_9[1], patternInput_10[1]])];
         }
         default: {
-            const f = shape.fields[0];
-            const patternInput = Scales_calculateScales(f(style), shape.fields[1]);
-            return [patternInput[0], new Scales_ScaledShape(0, [f, patternInput[1]])];
+            const sc = shape.fields[0];
+            const patternInput = Scales_calculateScales(StyleConfig__Apply_4E2CA0C5(sc, style), shape.fields[1]);
+            return [patternInput[0], new Scales_ScaledShape(0, [sc, patternInput[1]])];
         }
     }
 }
@@ -795,12 +835,12 @@ export function Drawing_DrawingContext_$reflection() {
 
 export function Drawing_hideFill(style) {
     let matchValue, f;
-    return new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, new FillStyle(0, [[0, new Color(0, [0, 0, 0])]]), (matchValue = style.Animation, (matchValue != null) ? ((f = matchValue[2], [matchValue[0], matchValue[1], (arg) => Drawing_hideFill(f(arg))])) : undefined), style.Font, style.Cursor, style.FormatAxisXLabel, style.FormatAxisYLabel);
+    return new Style(style.StrokeColor, style.StrokeWidth, style.StrokeDashArray, new FillStyle(0, [[0, new Color(0, [0, 0, 0])]]), (matchValue = style.Animation, (matchValue != null) ? ((f = matchValue[2], [matchValue[0], matchValue[1], (arg) => Drawing_hideFill(f(arg))])) : undefined), style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
 }
 
 export function Drawing_hideStroke(style) {
     let matchValue, f;
-    return new Style([0, style.StrokeColor[1]], style.StrokeWidth, style.StrokeDashArray, style.Fill, (matchValue = style.Animation, (matchValue != null) ? ((f = matchValue[2], [matchValue[0], matchValue[1], (arg) => Drawing_hideStroke(f(arg))])) : undefined), style.Font, style.Cursor, style.FormatAxisXLabel, style.FormatAxisYLabel);
+    return new Style([0, style.StrokeColor[1]], style.StrokeWidth, style.StrokeDashArray, style.Fill, (matchValue = style.Animation, (matchValue != null) ? ((f = matchValue[2], [matchValue[0], matchValue[1], (arg) => Drawing_hideStroke(f(arg))])) : undefined), style.Font, style.Cursor, style.PreserveAspectRatio, style.FormatAxisXLabel, style.FormatAxisYLabel);
 }
 
 export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut, area__3_mut, scales__mut, scales__1_mut, shape_mut) {
@@ -817,7 +857,7 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
         const sx = scales_1[0];
         const project = (tupledArg) => [Projections_projectOneX(x1, x2)(sx)(tupledArg[0]), Projections_projectOneY(y1, y2)(sy)(tupledArg[1])];
         switch (shape.tag) {
-            case 10: {
+            case 11: {
                 ctx_mut = ctx;
                 area__mut = x1;
                 area__1_mut = Projections_projectOneY(y1, y2)(sy)(shape.fields[0]);
@@ -828,7 +868,7 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
                 shape_mut = shape.fields[3];
                 continue Drawing_drawShape;
             }
-            case 8: {
+            case 9: {
                 const dy = shape.fields[0][1];
                 const dx = shape.fields[0][0];
                 ctx_mut = ctx;
@@ -841,10 +881,10 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
                 shape_mut = shape.fields[1];
                 continue Drawing_drawShape;
             }
-            case 5:
-                return new Svg_Svg(4, [map((shape_4) => Drawing_drawShape(ctx, area_1[0], area_1[1], area_1[2], area_1[3], scales_1[0], scales_1[1], shape_4), shape.fields[0])]);
+            case 6:
+                return new Svg_Svg(5, [map((shape_4) => Drawing_drawShape(ctx, area_1[0], area_1[1], area_1[2], area_1[3], scales_1[0], scales_1[1], shape_4), shape.fields[0])]);
             case 0: {
-                ctx_mut = (new Drawing_DrawingContext(shape.fields[0](ctx.Style), ctx.Definitions));
+                ctx_mut = (new Drawing_DrawingContext(StyleConfig__Apply_4E2CA0C5(shape.fields[0], ctx.Style), ctx.Definitions));
                 area__mut = area_1[0];
                 area__1_mut = area_1[1];
                 area__2_mut = area_1[2];
@@ -856,9 +896,18 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
             }
             case 4: {
                 const points = shape.fields[0];
-                return new Svg_Svg(0, [toArray(delay(() => append(singleton(new Svg_PathSegment(0, [project(item_2(0, points))])), delay(() => append(map_1((pt) => (new Svg_PathSegment(1, [project(pt)])), skip(1, points)), delay(() => singleton(new Svg_PathSegment(1, [project(item_2(0, points))])))))))), Svg_formatStyle(ctx.Definitions, Drawing_hideStroke(ctx.Style))]);
+                return new Svg_Svg(1, [toArray(delay(() => append(singleton(new Svg_PathSegment(0, [project(item_2(0, points))])), delay(() => append(map_1((pt) => (new Svg_PathSegment(1, [project(pt)])), skip(1, points)), delay(() => singleton(new Svg_PathSegment(1, [project(item_2(0, points))])))))))), Svg_formatStyle(ctx.Definitions, Drawing_hideStroke(ctx.Style))]);
             }
-            case 7: {
+            case 5: {
+                const patternInput = project(shape.fields[1]);
+                const y1_1 = patternInput[1];
+                const x1_1 = patternInput[0];
+                const patternInput_1 = project(shape.fields[2]);
+                const y2_1 = patternInput_1[1];
+                const x2_1 = patternInput_1[0];
+                return new Svg_Svg(0, [shape.fields[0], [min(x1_1, x2_1), min(y1_1, y2_1)], [Math.abs(x2_1 - x1_1), Math.abs(y2_1 - y1_1)], ctx.Style.PreserveAspectRatio]);
+            }
+            case 8: {
                 const isy_1 = shape.fields[2];
                 const isx_1 = shape.fields[1];
                 const calculateNestedRange = (rev) => ((tupledArg_1) => ((ins) => {
@@ -883,13 +932,13 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
                         }
                     };
                 }));
-                const patternInput = calculateNestedRange(false)([x1, x2])(isx_1)(sx);
-                const patternInput_1 = calculateNestedRange(true)([y1, y2])(isy_1)(sy);
+                const patternInput_2 = calculateNestedRange(false)([x1, x2])(isx_1)(sx);
+                const patternInput_3 = calculateNestedRange(true)([y1, y2])(isy_1)(sy);
                 ctx_mut = ctx;
-                area__mut = (patternInput[0] + shape.fields[0][3]);
-                area__1_mut = (patternInput_1[0] + shape.fields[0][0]);
-                area__2_mut = (patternInput[1] - shape.fields[0][1]);
-                area__3_mut = (patternInput_1[1] - shape.fields[0][2]);
+                area__mut = (patternInput_2[0] + shape.fields[0][3]);
+                area__1_mut = (patternInput_3[0] + shape.fields[0][0]);
+                area__2_mut = (patternInput_2[1] - shape.fields[0][1]);
+                area__3_mut = (patternInput_3[1] - shape.fields[0][2]);
                 scales__mut = isx_1;
                 scales__1_mut = isy_1;
                 shape_mut = shape.fields[3];
@@ -897,18 +946,18 @@ export function Drawing_drawShape(ctx_mut, area__mut, area__1_mut, area__2_mut,
             }
             case 2: {
                 const line = shape.fields[0];
-                return new Svg_Svg(0, [Array.from(delay(() => append(singleton(new Svg_PathSegment(0, [project(head(line))])), delay(() => map_1((pt_1) => (new Svg_PathSegment(1, [project(pt_1)])), skip(1, line)))))), Svg_formatStyle(ctx.Definitions, Drawing_hideFill(ctx.Style))]);
+                return new Svg_Svg(1, [Array.from(delay(() => append(singleton(new Svg_PathSegment(0, [project(head(line))])), delay(() => map_1((pt_1) => (new Svg_PathSegment(1, [project(pt_1)])), skip(1, line)))))), Svg_formatStyle(ctx.Definitions, Drawing_hideFill(ctx.Style))]);
             }
             case 1: {
                 const va = shape.fields[2];
                 const ha = shape.fields[3];
                 const va_1 = (va.tag === 2) ? "hanging" : ((va.tag === 1) ? "middle" : "baseline");
                 const ha_1 = (ha.tag === 1) ? "middle" : ((ha.tag === 2) ? "end" : "start");
-                return new Svg_Svg(3, [project([shape.fields[0], shape.fields[1]]), shape.fields[5], shape.fields[4], toText(printf("alignment-baseline:%s; text-anchor:%s;"))(va_1)(ha_1) + Svg_formatStyle(ctx.Definitions, ctx.Style)]);
+                return new Svg_Svg(4, [project([shape.fields[0], shape.fields[1]]), shape.fields[5], shape.fields[4], toText(printf("alignment-baseline:%s; text-anchor:%s;"))(va_1)(ha_1) + Svg_formatStyle(ctx.Definitions, ctx.Style)]);
             }
             case 3:
-                return new Svg_Svg(1, [project([shape.fields[0], shape.fields[1]]), [shape.fields[2], shape.fields[3]], Svg_formatStyle(ctx.Definitions, ctx.Style)]);
-            case 6: {
+                return new Svg_Svg(2, [project([shape.fields[0], shape.fields[1]]), [shape.fields[2], shape.fields[3]], Svg_formatStyle(ctx.Definitions, ctx.Style)]);
+            case 7: {
                 ctx_mut = ctx;
                 area__mut = area_1[0];
                 area__1_mut = area_1[1];
@@ -1123,7 +1172,7 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
                 continue Events_triggerEvent;
                 break;
             }
-            case 8: {
+            case 9: {
                 const dy = shape.fields[0][1];
                 const dx = shape.fields[0][0];
                 area__mut = (x1 + dx);
@@ -1138,7 +1187,7 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
                 continue Events_triggerEvent;
                 break;
             }
-            case 9: {
+            case 10: {
                 area__mut = Projections_projectOneX(x1, x2)(sx)(shape.fields[0]);
                 area__1_mut = y1;
                 area__2_mut = Projections_projectOneX(x1, x2)(sx)(shape.fields[1]);
@@ -1151,7 +1200,7 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
                 continue Events_triggerEvent;
                 break;
             }
-            case 10: {
+            case 11: {
                 area__mut = x1;
                 area__1_mut = Projections_projectOneY(y1, y2)(sy)(shape.fields[0]);
                 area__2_mut = x2;
@@ -1164,7 +1213,7 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
                 continue Events_triggerEvent;
                 break;
             }
-            case 7: {
+            case 8: {
                 const isy_1 = shape.fields[2];
                 const isx_1 = shape.fields[1];
                 const calculateNestedRange = (rev) => ((tupledArg) => ((ins) => {
@@ -1203,14 +1252,14 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
                 continue Events_triggerEvent;
                 break;
             }
-            case 5: {
+            case 6: {
                 const shapes = shape.fields[0];
                 for (let idx = 0; idx <= (shapes.length - 1); idx++) {
                     Events_triggerEvent(area_1[0], area_1[1], area_1[2], area_1[3], scales_1[0], scales_1[1], item_2(idx, shapes), jse, event);
                 }
                 break;
             }
-            case 6: {
+            case 7: {
                 const localEvent = Events_projectEvent(area_1[0], area_1[1], area_1[2], area_1[3], scales_1[0], scales_1[1], event);
                 if (Events_inScales(scales_1[0], scales_1[1], localEvent)) {
                     const enumerator = getEnumerator(shape.fields[0]);
@@ -1355,20 +1404,24 @@ export function Events_triggerEvent(area__mut, area__1_mut, area__2_mut, area__3
     }
 }
 
+export function Derived_PreserveAspectRatio(pa, s) {
+    return new Shape(1, [new StyleConfig(4, [pa]), s]);
+}
+
 export function Derived_StrokeColor(clr, s) {
-    return new Shape(0, [(s_1) => (new Style([1, new Color(1, [clr])], s_1.StrokeWidth, s_1.StrokeDashArray, s_1.Fill, s_1.Animation, s_1.Font, s_1.Cursor, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(2, [clr]), s]);
 }
 
 export function Derived_FillColor(clr, s) {
-    return new Shape(0, [(s_1) => (new Style(s_1.StrokeColor, s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [clr])]]), s_1.Animation, s_1.Font, s_1.Cursor, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(1, [clr]), s]);
 }
 
 export function Derived_Font(font, clr, s) {
-    return new Shape(0, [(s_1) => (new Style([0, new Color(1, [clr])], s_1.StrokeWidth, s_1.StrokeDashArray, new FillStyle(0, [[1, new Color(1, [clr])]]), s_1.Animation, font, s_1.Cursor, s_1.FormatAxisXLabel, s_1.FormatAxisYLabel)), s]);
+    return new Shape(1, [new StyleConfig(3, [font, clr]), s]);
 }
 
 export function Derived_Area(line) {
-    return new Shape(8, [delay(() => {
+    return new Shape(9, [delay(() => {
         const line_1 = Array.from(line);
         const matchValue = item_2(0, line_1)[0];
         const matchValue_1 = item_2(line_1.length - 1, line_1)[0];
@@ -1378,7 +1431,7 @@ export function Derived_Area(line) {
 }
 
 export function Derived_VArea(line) {
-    return new Shape(8, [delay(() => {
+    return new Shape(9, [delay(() => {
         const line_1 = Array.from(line);
         const matchValue = item_2(0, line_1)[1];
         const matchValue_1 = item_2(line_1.length - 1, line_1)[1];
@@ -1388,7 +1441,7 @@ export function Derived_VArea(line) {
 }
 
 export function Derived_VShiftedArea(offs, line) {
-    return new Shape(8, [delay(() => {
+    return new Shape(9, [delay(() => {
         const line_1 = Array.from(line);
         const matchValue = item_2(0, line_1)[1];
         const matchValue_1 = item_2(line_1.length - 1, line_1)[1];
@@ -1398,11 +1451,11 @@ export function Derived_VShiftedArea(offs, line) {
 }
 
 export function Derived_Bar(x, y) {
-    return new Shape(8, [delay(() => append(singleton([new Value(1, [x]), new Value(0, [y, 0])]), delay(() => append(singleton([new Value(1, [x]), new Value(0, [y, 1])]), delay(() => append(singleton([new Value(1, [new continuous(0)]), new Value(0, [y, 1])]), delay(() => singleton([new Value(1, [new continuous(0)]), new Value(0, [y, 0])]))))))))]);
+    return new Shape(9, [delay(() => append(singleton([new Value(1, [x]), new Value(0, [y, 0])]), delay(() => append(singleton([new Value(1, [x]), new Value(0, [y, 1])]), delay(() => append(singleton([new Value(1, [new continuous(0)]), new Value(0, [y, 1])]), delay(() => singleton([new Value(1, [new continuous(0)]), new Value(0, [y, 0])]))))))))]);
 }
 
 export function Derived_Column(x, y) {
-    return new Shape(8, [delay(() => append(singleton([new Value(0, [x, 0]), new Value(1, [y])]), delay(() => append(singleton([new Value(0, [x, 1]), new Value(1, [y])]), delay(() => append(singleton([new Value(0, [x, 1]), new Value(1, [new continuous(0)])]), delay(() => singleton([new Value(0, [x, 0]), new Value(1, [new continuous(0)])]))))))))]);
+    return new Shape(9, [delay(() => append(singleton([new Value(0, [x, 0]), new Value(1, [y])]), delay(() => append(singleton([new Value(0, [x, 1]), new Value(1, [y])]), delay(() => append(singleton([new Value(0, [x, 1]), new Value(1, [new continuous(0)])]), delay(() => singleton([new Value(0, [x, 0]), new Value(1, [new continuous(0)])]))))))))]);
 }
 
 export function Compost_niceNumber(num, decs) {
@@ -1445,7 +1498,7 @@ export function Compost_defaultFormat(scale, value) {
     }
 }
 
-export const Compost_defstyle = new Style([1, new Color(0, [256, 0, 0])], new Width(2), [], new FillStyle(0, [[1, new Color(0, [196, 196, 196])]]), undefined, "10pt sans-serif", "default", Compost_defaultFormat, Compost_defaultFormat);
+export const Compost_defstyle = new Style([1, new Color(0, [256, 0, 0])], new Width(2), [], new FillStyle(0, [[1, new Color(0, [196, 196, 196])]]), undefined, "10pt sans-serif", "default", "", Compost_defaultFormat, Compost_defaultFormat);
 
 export function Compost_getRelativeLocation(el, x, y) {
     const getOffset = (parent_mut, tupledArg_mut) => {

package/dist/html.js

@@ -7,7 +7,7 @@ import { equals, createAtom, defaultOf, createObj, disposeSafe, getEnumerator }
 import { array_type, tuple_type, union_type, obj_type, string_type, lambda_type, unit_type, class_type } from "./fable_modules/fable-library-js.4.28.0/Reflection.js";
 import { patch, diff, h as h_1 } from "virtual-dom";
 import { toArray as toArray_1, singleton, empty, append as append_1 } from "./fable_modules/fable-library-js.4.28.0/List.js";
-import { item, map as map_1 } from "./fable_modules/fable-library-js.4.28.0/Array.js";
+import { fold, item, map as map_1 } from "./fable_modules/fable-library-js.4.28.0/Array.js";
 import { Event as Event$ } from "./fable_modules/fable-library-js.4.28.0/Event.js";
 import { startImmediate } from "./fable_modules/fable-library-js.4.28.0/Async.js";
 import { singleton as singleton_1 } from "./fable_modules/fable-library-js.4.28.0/AsyncBuilder.js";
@@ -212,6 +212,15 @@ export function createVirtualDomApp(id, initial, r, u) {
     }, event.Publish);
 }
 
+export function foldDom(f, acc, node) {
+    if (node.tag === 1) {
+        return fold((acc_2, node_1) => foldDom(f, acc_2, node_1), f(acc, node.fields[0], node.fields[1], node.fields[2]), node.fields[3]);
+    }
+    else {
+        return acc;
+    }
+}
+
 export function text(s_1) {
     return new DomNode(0, [s_1]);
 }

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "compostjs",
-  "version": "0.0.12",
+  "version": "0.2.0",
   "type": "module",
   "description": "Composable data visualization library for JavaScript",
   "author": "Tomas Petricek",
   "license": "MIT",
   "scripts": {
     "start": "dotnet fable watch src/compost/compost.fsproj --run npx vite",
-    "build": "dotnet fable src/compost/compost.fsproj -o dist && rm dist/fable_modules/.gitignore",
+    "build": "dotnet fable src/compost/compost.fsproj -o dist && rm -f dist/fable_modules/.gitignore",
     "rebuild": "rm -rf dist && npm run build",
-    "standalone": "dotnet fable src/compost/compost.fsproj --run npx vite build && copy-latest.sh",
-    "updatejs": "npm run standalone && git add . && git commit -m \"Update standalone release file in docs\"",
-    "release": "np --yolo --no-release-draft --no-publish && npm run updatejs && npm run rebuild && npm publish"
+    "standalone": "dotnet fable src/compost/compost.fsproj --run npx vite build && sh copy-latest.sh",
+    "test": "dotnet fable src/compost/compost.fsproj && npx vitest run",
+    "release:version": "np --yolo --no-release-draft --no-publish",
+    "release:standalone": "npm run standalone && git add . && git commit -m \"Update standalone release file in docs\"",
+    "release:publish": "npm run rebuild && npm publish",
+    "release": "npm run release:version && npm run release:standalone && npm run release:publish"
   },
   "repository": {
     "type": "git",
@@ -32,6 +35,7 @@
   },
   "devDependencies": {
     "np": "^11.0.2",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
   }
 }

package/test/compost.test.js

@@ -0,0 +1,116 @@
+import { describe, it, expect } from 'vitest';
+import { scale as s, compost as c } from '../src/compost/compost.fs.js';
+
+// Collect all elements matching a predicate using the F# foldDom helper.
+// The fold callback receives (acc, tag, attrs) where attrs is a plain
+// object with string attribute values (Events/Properties are excluded).
+function findElements(node, pred) {
+  return c.foldDom((acc, tag, attrs) => {
+    if (pred(tag, attrs)) acc.push({ tag, attrs });
+    return acc;
+  }, [], node);
+}
+
+// Parse an SVG path "d" attribute into an array of {cmd, x, y} objects.
+// Handles format like "M0 200 L200 0 " where command letter is directly
+// followed by the x coordinate.
+function parsePath(d) {
+  const coords = [];
+  for (const m of d.matchAll(/([ML])(-?[\d.]+)\s+(-?[\d.]+)/g)) {
+    coords.push({ cmd: m[1], x: parseFloat(m[2]), y: parseFloat(m[3]) });
+  }
+  return coords;
+}
+
+describe('style rendering', () => {
+  it('renders a shape with fill color set', () => {
+    const sh = c.shape([[0, 0], [1, 0], [1, 1], [0, 1]]);
+    const svg = c.svg(200, 200, c.fillColor("red", sh));
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+    expect(paths[0].attrs.style).toContain('fill:red');
+  });
+
+  it('renders a line with stroke color set', () => {
+    const line = c.line([[0, 0], [1, 1]]);
+    const svg = c.svg(200, 200, c.strokeColor("blue", line));
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+    expect(paths[0].attrs.style).toContain('stroke:blue');
+  });
+});
+
+describe('svg rendering', () => {
+  it('renders a line from (0,0) to (1,1) as an SVG path', () => {
+    const line = c.line([[0, 0], [1, 1]]);
+    const svg = c.svg(200, 200, line);
+
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+
+    const coords = parsePath(paths[0].attrs.d);
+
+    // X: 0->0, 1->200.  Y: 0->200, 1->0 (SVG Y-axis is inverted)
+    expect(coords).toHaveLength(2);
+    expect(coords[0]).toEqual({ cmd: 'M', x: 0, y: 200 });
+    expect(coords[1]).toEqual({ cmd: 'L', x: 200, y: 0 });
+  });
+
+  it('renders a column as a path filling the full SVG area', () => {
+    const col = c.column("test", 10);
+    const svg = c.svg(200, 200, col);
+
+    const paths = findElements(svg, (tag) => tag === 'path');
+    expect(paths.length).toBe(1);
+
+    const coords = parsePath(paths[0].attrs.d);
+
+    // Single column auto-scales to fill the entire 200x200 area
+    // Closed path covering all four corners
+    expect(coords).toHaveLength(5);
+    expect(coords[0]).toEqual({ cmd: 'M', x: 0,   y: 0 });
+    expect(coords[1]).toEqual({ cmd: 'L', x: 200, y: 0 });
+    expect(coords[2]).toEqual({ cmd: 'L', x: 200, y: 200 });
+    expect(coords[3]).toEqual({ cmd: 'L', x: 0,   y: 200 });
+    expect(coords[4]).toEqual({ cmd: 'L', x: 0,   y: 0 });
+  });
+});
+
+describe('serialization', () => {
+  it('round-trips a line through serialize/deserialize', () => {
+    const line = c.line([[0, 0], [1, 1]]);
+    const line2 = c.deserialize(c.serialize(line));
+    const paths1 = findElements(c.svg(200, 200, line), (tag) => tag === 'path');
+    const paths2 = findElements(c.svg(200, 200, line2), (tag) => tag === 'path');
+    expect(paths2[0].attrs.d).toEqual(paths1[0].attrs.d);
+  });
+
+  it('round-trips a styled shape through serialize/deserialize', () => {
+    const shape = c.fillColor("red", c.strokeColor("blue", c.line([[0, 0], [1, 1]])));
+    const shape2 = c.deserialize(c.serialize(shape));
+    const paths1 = findElements(c.svg(200, 200, shape), (tag) => tag === 'path');
+    const paths2 = findElements(c.svg(200, 200, shape2), (tag) => tag === 'path');
+    expect(paths2[0].attrs.style).toEqual(paths1[0].attrs.style);
+    expect(paths2[0].attrs.d).toEqual(paths1[0].attrs.d);
+  });
+
+  it('round-trips a multi-series bar chart through serialize/deserialize', () => {
+    const chart = c.axes("left bottom",
+      c.scaleY(s.continuous(0, 50),
+        c.overlay([
+          c.padding(0, 5, 0, 5, c.fillColor("#DC4B4A", c.column("apples", 30))),
+          c.padding(0, 5, 0, 5, c.fillColor("#424498", c.column("plums", 20))),
+          c.padding(0, 5, 0, 5, c.fillColor("#A0CB5B", c.column("kiwi", 40))),
+        ])
+      )
+    );
+    const chart2 = c.deserialize(c.serialize(chart));
+    const paths1 = findElements(c.svg(400, 300, chart), (tag) => tag === 'path');
+    const paths2 = findElements(c.svg(400, 300, chart2), (tag) => tag === 'path');
+    expect(paths2.length).toBe(paths1.length);
+    paths1.forEach((p, i) => {
+      expect(paths2[i].attrs.d).toEqual(p.attrs.d);
+      expect(paths2[i].attrs.style).toEqual(p.attrs.style);
+    });
+  });
+});