animl-cli 0.0.0-stage → 0.1.1

package/modules/markup-libraries/SPEC.md

@@ -0,0 +1,56 @@
+# Local markup libraries
+
+`export="…"` is the selection spelling on library roots and imports; existing `exports`
+(root) and `select` (import) remain aliases. A nonempty `export` takes precedence over its alias.
+
+Libraries compile away: runtime documents contain expanded resources and no imports.
+`<library name="cards" exports="row Score">` restricts public names. Omitted `exports` exposes
+all declarations, preserving existing libraries. `<import src="cards.animl" as="ui" select="row"/>`
+imports only selected public names; omitted `select` imports all public names. Unknown selected
+names are `unknown-name`, with importing source position, JSON pointer and corrective hint.
+Private resources stay available to selected definitions through lexical scope; callers cannot
+refer to them through the import alias. Private component definitions remain validated.
+
+A library may ship `<model>` definitions alongside components, colors, glyphs, eases and templates.
+Imported model names are made collision-free and references in `data`, `model` and `of` attributes
+are rewritten in the library's lexical scope. Model property types/defaults retain the data contract.
+Library components using those models are self-contained after compilation. A `<component>` inside
+a model is a component-valued property, distinguished from a definition by the absence of `grid`.
+Libraries also ship root `<enum name="Mood" values="calm busy"/>` declarations and authored
+`<instance name="main" model="Person"><set path="score" value="7"/></instance>` data.
+These compile to ordinary JSON `data.enums` and `data.instances` alongside `data.models`.
+Names are collision-free per import, including repeated imports of the same file. The `enum`
+attribute and named-instance expressions (`$ui:main:score`) resolve in lexical scope; enum member
+keys and instance property values remain unchanged. Export selection applies to all three data
+kinds. Private dependencies are compiled but cannot be addressed through the public alias.
+Default-instance flags retain the data contract (at most one default per document); importing
+two defaults is an error, not an implicit choice. Both AniML declarations and expanded JSON use
+the existing data diagnostics for invalid members, models and values. Library declaration and
+alias failures use `bad-attribute`, `duplicate-name` and `unknown-name`.
+Cloud dependency management is outside the local authoring contract.
+
+For vendoring, an import can retain its local origin:
+`<import src="vendor/cards.animl" source="../shared/cards.animl" as="ui"/>`.
+Compilation reads only `src`, never `source`. `anima library update icon.animl` reads each explicit
+`source` and refreshes its existing vendored `src`; paths are relative to the importing file.
+Nested imports are followed at their installed destination. All upstream files are read and
+validated as library XML before any destination is written. Conflicting origins are
+`library-source`; schemes and protocol-relative paths are `library-local-only`. Both carry a
+pointer, message and hint. No network access is attempted. `--check` reports staleness and exits 1
+without writing; a current tree exits 0. JSON output lists source, destination and change state.
+
+The lexical expansion choice follows [graph research](../../docs/research/rive-format-and-graph.md)
+§6. Native library probes require account-touching library commands banned by the project.
+Each library oracle therefore records an evidenced skip linked to DESIGN §3; no native
+equivalence is claimed.
+
+## Stable component lookup
+
+Imported components keep their original key when unique; otherwise their key is the full
+`as` alias chain plus `:` plus the original name. Local exact keys win. `meta.componentNames`
+retains qualified aliases for all compiled library components while preserving other metadata.
+AniML component references, web/CLI root selectors, the exported core `componentNames(doc, name)`
+lookup and host component property writes accept a unique original, qualified alias or existing
+key. Ambiguous originals (including legacy generated suffix lookups after a rebuild) report
+`ambiguous-component` with qualified alternatives in verbose hints. Existing generated `.ani`
+keys remain valid. Import order and unrelated resources do not affect the stable component key.

package/modules/markup-libraries/capabilities/components-library-export/example.ani

@@ -0,0 +1,45 @@
+{
+  "anima": "0.1",
+  "name": "components-library-export",
+  "grid": 20,
+  "requires": ["components", "data", "bind"],
+  "nodes": [
+    {
+      "id": "badge",
+      "type": "instance",
+      "component": "import-2-row"
+    }
+  ],
+  "components": {
+    "import-2-row": {
+      "grid": 10,
+      "nodes": [
+        {
+          "id": "dot",
+          "type": "circle",
+          "center": [5, 5],
+          "r": 1,
+          "fill": {
+            "color": "#000"
+          }
+        }
+      ],
+      "bind": {
+        "dot.r": "$points"
+      },
+      "data": "import-1-Score"
+    }
+  },
+  "data": {
+    "models": {
+      "import-1-Score": {
+        "properties": {
+          "points": {
+            "type": "number",
+            "default": 3
+          }
+        }
+      }
+    }
+  }
+}

package/modules/markup-libraries/capabilities/components-library-export/example.animl

@@ -0,0 +1,4 @@
+<anima version="0.1" name="components-library-export" grid="20" requires="components data bind">
+  <import src="../../../../examples/lib/cards.animl" as="cards" select="row"/>
+  <instance id="badge" component="cards:row"/>
+</anima>

package/modules/markup-libraries/capabilities/components-library-models/example.ani

@@ -0,0 +1,45 @@
+{
+  "anima": "0.1",
+  "name": "components-library-models",
+  "grid": 20,
+  "requires": ["components", "data", "bind"],
+  "nodes": [
+    {
+      "id": "badge",
+      "type": "instance",
+      "component": "import-2-row"
+    }
+  ],
+  "components": {
+    "import-2-row": {
+      "grid": 10,
+      "nodes": [
+        {
+          "id": "dot",
+          "type": "circle",
+          "center": [5, 5],
+          "r": 1,
+          "fill": {
+            "color": "#000"
+          }
+        }
+      ],
+      "bind": {
+        "dot.r": "$points"
+      },
+      "data": "import-1-Score"
+    }
+  },
+  "data": {
+    "models": {
+      "import-1-Score": {
+        "properties": {
+          "points": {
+            "type": "number",
+            "default": 3
+          }
+        }
+      }
+    }
+  }
+}

package/modules/markup-libraries/capabilities/components-library-models/example.animl

@@ -0,0 +1,4 @@
+<anima version="0.1" name="components-library-models" grid="20" requires="components data bind">
+  <import src="../../../../examples/lib/cards.animl" as="cards" select="row"/>
+  <instance id="badge" component="cards:row"/>
+</anima>

package/modules/markup-libraries/capabilities/components-library-update/example.ani

@@ -0,0 +1,45 @@
+{
+  "anima": "0.1",
+  "name": "components-library-update",
+  "grid": 20,
+  "requires": ["components", "data", "bind"],
+  "nodes": [
+    {
+      "id": "badge",
+      "type": "instance",
+      "component": "import-2-row"
+    }
+  ],
+  "components": {
+    "import-2-row": {
+      "grid": 10,
+      "nodes": [
+        {
+          "id": "dot",
+          "type": "circle",
+          "center": [5, 5],
+          "r": 1,
+          "fill": {
+            "color": "#000"
+          }
+        }
+      ],
+      "bind": {
+        "dot.r": "$points"
+      },
+      "data": "import-1-Score"
+    }
+  },
+  "data": {
+    "models": {
+      "import-1-Score": {
+        "properties": {
+          "points": {
+            "type": "number",
+            "default": 3
+          }
+        }
+      }
+    }
+  }
+}

package/modules/markup-libraries/capabilities/components-library-update/example.animl

@@ -0,0 +1,4 @@
+<anima version="0.1" name="components-library-update" grid="20" requires="components data bind">
+  <import src="../../../../examples/lib/cards.animl" as="cards" select="row"/>
+  <instance id="badge" component="cards:row"/>
+</anima>

package/modules/markup-libraries/manifest.source

@@ -0,0 +1,38 @@
+export const after = [];
+export default {
+  name: 'markup-libraries',
+  summary:
+    'Authoring: AniML library imports (shared components, models and styles from other files).',
+  after,
+  core: null,
+  web: [
+    {
+      name: 'markup-libraries',
+      buildOrder: 2,
+      sizeOrder: 1,
+      budget: 2176,
+      over: 'markup',
+      authoring: true,
+    },
+  ],
+  adapters: {
+    'packages/markup/src/reuse.ts': 'markup/reuse.ts',
+    'packages/markup/src/libraries-async.ts': 'markup/async.ts',
+    'packages/markup/src/libraries.ts': 'markup/index.ts',
+    'packages/markup/src/library-hooks.ts': 'markup/hooks.ts',
+    'packages/web/src/markup-libraries.ts': 'web/index.ts',
+  },
+  exports: {
+    'markup:./libraries': 'packages/markup/src/libraries.ts',
+    'markup:./library-hooks': 'packages/markup/src/library-hooks.ts',
+    'web:./markup-libraries': 'packages/web/src/markup-libraries.ts',
+  },
+  markupHook: null,
+  tests: ['modules/markup-libraries/test/**/*.test.ts'],
+  conformance: [
+    'components-library-export',
+    'components-library-models',
+    'components-library-update',
+  ],
+  docs: ['modules/markup-libraries/SPEC.md', 'spec/ANIML.md'],
+};

package/modules/media/manifest.source

@@ -0,0 +1,21 @@
+export const after = ['assets'];
+export default {
+  name: 'media',
+  summary:
+    'Media: icon.asset(name) loads any declared asset (audio, fonts, files) as bytes or text for page scripts.',
+  after,
+  core: { entry: 'core/index.ts', export: 'media' },
+  web: [{ name: 'media', budget: 3072 }],
+  adapters: {
+    'packages/core/src/modules/media/index.ts': 'core/index.ts',
+    'packages/web/src/media.ts': 'web/index.ts',
+  },
+  exports: {
+    'core:./media': 'packages/core/src/modules/media/index.ts',
+    'web:./media': 'packages/web/src/media.ts',
+  },
+  markupHook: null,
+  tests: ['modules/assets/test/web/pipeline.test.ts'],
+  conformance: [],
+  docs: ['spec/SPEC.md', 'docs/AUTHORING.md'],
+};

package/modules/mesh/capabilities/rigging-mesh/example.ani

@@ -0,0 +1,50 @@
+{
+  "anima": "0.1",
+  "name": "rigging-mesh",
+  "grid": 20,
+  "requires": ["paint", "assets", "mesh"],
+  "nodes": [
+    {
+      "id": "grid",
+      "type": "image",
+      "x0": 2,
+      "y0": 3,
+      "asset": "flag",
+      "mesh": {
+        "grid": [2, 1]
+      },
+      "width": 8,
+      "height": 4
+    },
+    {
+      "id": "explicit",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "flag",
+      "fit": "cover",
+      "mesh": {
+        "vertices": [
+          [2, 10, 0, 0],
+          [10, 10, 1, 0],
+          [10, 14, 1, 1],
+          [2, 14, 0, 1]
+        ],
+        "triangles": [
+          [0, 1, 2],
+          [0, 2, 3]
+        ]
+      },
+      "width": 1,
+      "height": 1
+    }
+  ],
+  "assets": {
+    "flag": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAHklEQVR4AWO8WR7+nwEPYGIgAFhinkgw4ANMDAQAALA7BAiJeuX5AAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4
+    }
+  }
+}

package/modules/mesh/capabilities/rigging-mesh/example.animl

@@ -0,0 +1,9 @@
+<anima version="0.1" name="rigging-mesh" grid="20" requires="paint assets mesh">
+  <asset name="flag" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAHklEQVR4AWO8WR7+nwEPYGIgAFhinkgw4ANMDAQAALA7BAiJeuX5AAAAAElFTkSuQmCC"
+      width="8" height="4"/>
+  <image id="grid" asset="flag" x0="2" y0="3" mesh="{&quot;grid&quot;:[2,1]}" width="8" height="4"/>
+  <image id="explicit" asset="flag" x0="0" y0="0" fit="cover"
+      mesh="{&quot;vertices&quot;:[[2,10,0,0],[10,10,1,0],[10,14,1,1],[2,14,0,1]],&quot;triangles&quot;:[[0,1,2],[0,2,3]]}"
+      width="1" height="1"/>
+</anima>

package/modules/mesh/capabilities/rigging-mesh-animation/example.ani

@@ -0,0 +1,65 @@
+{
+  "anima": "0.1",
+  "name": "rigging-mesh-animation",
+  "grid": 20,
+  "requires": ["paint", "assets", "mesh", "bind"],
+  "inputs": {
+    "x": {
+      "type": "number",
+      "default": 2
+    },
+    "y": {
+      "type": "number",
+      "default": 12
+    }
+  },
+  "nodes": [
+    {
+      "id": "flag",
+      "type": "image",
+      "x0": 2,
+      "y0": 5,
+      "asset": "flag",
+      "mesh": {
+        "grid": [2, 1]
+      },
+      "width": 8,
+      "height": 4
+    }
+  ],
+  "timelines": {
+    "wave": {
+      "duration": 1,
+      "tracks": {
+        "flag.mesh.vertex.2": [
+          [0, "[10,5]"],
+          [0.5, "[9.5,3.25]"],
+          [1, "[10,5]"]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "wave",
+        "states": {
+          "wave": {
+            "play": "wave"
+          }
+        }
+      }
+    }
+  },
+  "bind": {
+    "flag.mesh.vertex.3": "[x, max(5, y)]"
+  },
+  "assets": {
+    "flag": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAHklEQVR4AWO8WR7+nwEPYGIgAFhinkgw4ANMDAQAALA7BAiJeuX5AAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4
+    }
+  }
+}

package/modules/mesh/capabilities/rigging-mesh-animation/example.animl

@@ -0,0 +1,15 @@
+<anima version="0.1" name="rigging-mesh-animation" grid="20" requires="paint assets mesh bind">
+  <asset name="flag" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAHklEQVR4AWO8WR7+nwEPYGIgAFhinkgw4ANMDAQAALA7BAiJeuX5AAAAAElFTkSuQmCC"
+      width="8" height="4"/>
+  <bind target="flag.mesh.vertex.3" value="[x, max(5, y)]"/>
+  <number name="x" default="2"/>
+  <number name="y" default="12"/>
+  <image id="flag" asset="flag" x0="2" y0="5" mesh="{&quot;grid&quot;:[2,1]}" width="8" height="4"/>
+  <timeline name="wave" duration="1">
+    <track target="flag.mesh.vertex.2">0 "[10,5]"; 0.5 "[9.5,3.25]"; 1 "[10,5]"</track>
+  </timeline>
+  <layer name="main" initial="wave">
+    <state name="wave" play="wave"/>
+  </layer>
+</anima>

package/modules/mesh/examples/flag.ani

@@ -0,0 +1,108 @@
+{
+  "anima": "0.1",
+  "name": "flag",
+  "grid": 20,
+  "requires": ["paint", "assets", "mesh"],
+  "nodes": [
+    {
+      "id": "flag",
+      "type": "image",
+      "x0": 2,
+      "y0": 5,
+      "asset": "flag",
+      "mesh": {
+        "grid": [4, 2]
+      },
+      "width": 16,
+      "height": 8
+    }
+  ],
+  "timelines": {
+    "wave": {
+      "duration": 1,
+      "loop": "pingpong",
+      "tracks": {
+        "flag.mesh.vertex.1": [
+          [0, "[6,5]"],
+          [0.5, "[6,7.0]"],
+          [1, "[6,5]"]
+        ],
+        "flag.mesh.vertex.2": [
+          [0, "[10,5]"],
+          [0.5, "[10,6.0]"],
+          [1, "[10,5]"]
+        ],
+        "flag.mesh.vertex.3": [
+          [0, "[14,5]"],
+          [0.5, "[14,6.0]"],
+          [1, "[14,5]"]
+        ],
+        "flag.mesh.vertex.4": [
+          [0, "[18,5]"],
+          [0.5, "[18,7.0]"],
+          [1, "[18,5]"]
+        ],
+        "flag.mesh.vertex.6": [
+          [0, "[6,9]"],
+          [0.5, "[6,9.5]"],
+          [1, "[6,9]"]
+        ],
+        "flag.mesh.vertex.7": [
+          [0, "[10,9]"],
+          [0.5, "[10,10.5]"],
+          [1, "[10,9]"]
+        ],
+        "flag.mesh.vertex.8": [
+          [0, "[14,9]"],
+          [0.5, "[14,10.5]"],
+          [1, "[14,9]"]
+        ],
+        "flag.mesh.vertex.9": [
+          [0, "[18,9]"],
+          [0.5, "[18,9.5]"],
+          [1, "[18,9]"]
+        ],
+        "flag.mesh.vertex.11": [
+          [0, "[6,13]"],
+          [0.5, "[6,15.0]"],
+          [1, "[6,13]"]
+        ],
+        "flag.mesh.vertex.12": [
+          [0, "[10,13]"],
+          [0.5, "[10,14.0]"],
+          [1, "[10,13]"]
+        ],
+        "flag.mesh.vertex.13": [
+          [0, "[14,13]"],
+          [0.5, "[14,14.0]"],
+          [1, "[14,13]"]
+        ],
+        "flag.mesh.vertex.14": [
+          [0, "[18,13]"],
+          [0.5, "[18,15.0]"],
+          [1, "[18,13]"]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "wave",
+        "states": {
+          "wave": {
+            "play": "wave"
+          }
+        }
+      }
+    }
+  },
+  "assets": {
+    "flag": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAHklEQVR4AWO8WR7+nwEPYGIgAFhinkgw4ANMDAQAALA7BAiJeuX5AAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4
+    }
+  }
+}

package/modules/mesh/examples/flag.animl

@@ -0,0 +1,23 @@
+<anima version="0.1" name="flag" grid="20" requires="paint assets mesh">
+  <asset name="flag" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAHklEQVR4AWO8WR7+nwEPYGIgAFhinkgw4ANMDAQAALA7BAiJeuX5AAAAAElFTkSuQmCC"
+      width="8" height="4"/>
+  <image id="flag" asset="flag" x0="2" y0="5" mesh="{&quot;grid&quot;:[4,2]}" width="16" height="8"/>
+  <timeline name="wave" duration="1" loop="pingpong">
+    <track target="flag.mesh.vertex.1">0 "[6,5]"; 0.5 "[6,7.0]"; 1 "[6,5]"</track>
+    <track target="flag.mesh.vertex.2">0 "[10,5]"; 0.5 "[10,6.0]"; 1 "[10,5]"</track>
+    <track target="flag.mesh.vertex.3">0 "[14,5]"; 0.5 "[14,6.0]"; 1 "[14,5]"</track>
+    <track target="flag.mesh.vertex.4">0 "[18,5]"; 0.5 "[18,7.0]"; 1 "[18,5]"</track>
+    <track target="flag.mesh.vertex.6">0 "[6,9]"; 0.5 "[6,9.5]"; 1 "[6,9]"</track>
+    <track target="flag.mesh.vertex.7">0 "[10,9]"; 0.5 "[10,10.5]"; 1 "[10,9]"</track>
+    <track target="flag.mesh.vertex.8">0 "[14,9]"; 0.5 "[14,10.5]"; 1 "[14,9]"</track>
+    <track target="flag.mesh.vertex.9">0 "[18,9]"; 0.5 "[18,9.5]"; 1 "[18,9]"</track>
+    <track target="flag.mesh.vertex.11">0 "[6,13]"; 0.5 "[6,15.0]"; 1 "[6,13]"</track>
+    <track target="flag.mesh.vertex.12">0 "[10,13]"; 0.5 "[10,14.0]"; 1 "[10,13]"</track>
+    <track target="flag.mesh.vertex.13">0 "[14,13]"; 0.5 "[14,14.0]"; 1 "[14,13]"</track>
+    <track target="flag.mesh.vertex.14">0 "[18,13]"; 0.5 "[18,15.0]"; 1 "[18,13]"</track>
+  </timeline>
+  <layer name="main" initial="wave">
+    <state name="wave" play="wave"/>
+  </layer>
+</anima>

package/modules/mesh/manifest.source

@@ -0,0 +1,37 @@
+export const after = ['assets', 'bind'];
+export default {
+  name: 'mesh',
+  summary:
+    'Meshes: deform an image with a grid or explicit triangle mesh whose vertices can be animated or bound.',
+  after,
+  core: { entry: 'core/index.ts', export: 'mesh', svg: 'core/svg.ts', svgExport: 'meshSVG' },
+  web: [
+    // P3c reset rule after P8-5 (1,325 B measured; decided, owner may revisit).
+    { name: 'mesh', budget: 1472, heavy: true },
+    { name: 'canvas-mesh', budget: 768, over: 'canvas', heavy: true },
+  ],
+  adapters: {
+    'packages/core/src/modules/mesh/index.ts': 'core/index.ts',
+    'packages/core/src/modules/mesh/svg.ts': 'core/svg.ts',
+    'packages/core/src/modules/mesh/static.ts': 'core/static.ts',
+    'packages/web/src/mesh.ts': 'web/index.ts',
+    'packages/web/src/canvas-mesh.ts': 'web/canvas.ts',
+  },
+  exports: {
+    'core:./mesh': 'packages/core/src/modules/mesh/index.ts',
+    'core:./mesh-svg': 'packages/core/src/modules/mesh/svg.ts',
+    'core:./mesh-static': 'packages/core/src/modules/mesh/static.ts',
+    'web:./mesh': 'packages/web/src/mesh.ts',
+    'web:./canvas-mesh': 'packages/web/src/canvas-mesh.ts',
+  },
+  tests: [
+    'modules/mesh/test/**/*.test.ts',
+    'packages/markup/test/module-fields.test.ts',
+    'packages/markup/test/compile.test.ts',
+    'packages/markup/test/decompile.test.ts',
+    'packages/markup/test/corpus.test.ts',
+    'packages/markup/test/names.test.ts',
+  ],
+  conformance: ['rigging-mesh', 'rigging-mesh-animation'],
+  docs: ['spec/SPEC.md'],
+};

package/modules/mix/capabilities/drawing-paint-additive-strength/example.ani

@@ -0,0 +1,34 @@
+{
+  "anima": "0.1",
+  "name": "drawing-paint-additive-strength",
+  "grid": 20,
+  "requires": ["mix", "composite"],
+  "nodes": [
+    {
+      "id": "back",
+      "type": "rect",
+      "x0": 0,
+      "y0": 0,
+      "w": 20,
+      "h": 20,
+      "fill": {
+        "color": "#204060"
+      }
+    },
+    {
+      "id": "a",
+      "type": "rect",
+      "x0": 4,
+      "y0": 4,
+      "w": 12,
+      "h": 12,
+      "fill": {
+        "color": "#804020"
+      },
+      "mix": {
+        "mode": "additive",
+        "strength": 0.5
+      }
+    }
+  ]
+}

package/modules/mix/capabilities/drawing-paint-additive-strength/example.animl

@@ -0,0 +1,4 @@
+<anima version="0.1" name="drawing-paint-additive-strength" grid="20" requires="mix composite">
+  <rect id="back" x0="0" y0="0" width="20" height="20" fill="#204060"/>
+  <rect id="a" x0="4" y0="4" mix="{&quot;mode&quot;:&quot;additive&quot;,&quot;strength&quot;:0.5}" width="12" height="12" fill="#804020"/>
+</anima>

package/modules/mix/capabilities/drawing-paint-blend-additive/example.ani

@@ -0,0 +1,33 @@
+{
+  "anima": "0.1",
+  "name": "drawing-paint-blend-additive",
+  "grid": 20,
+  "requires": ["mix", "composite"],
+  "nodes": [
+    {
+      "id": "back",
+      "type": "rect",
+      "x0": 0,
+      "y0": 0,
+      "w": 20,
+      "h": 20,
+      "fill": {
+        "color": "#204060"
+      }
+    },
+    {
+      "id": "a",
+      "type": "rect",
+      "x0": 4,
+      "y0": 4,
+      "w": 12,
+      "h": 12,
+      "fill": {
+        "color": "#804020"
+      },
+      "mix": {
+        "mode": "additive"
+      }
+    }
+  ]
+}

package/modules/mix/capabilities/drawing-paint-blend-additive/example.animl

@@ -0,0 +1,4 @@
+<anima version="0.1" name="drawing-paint-blend-additive" grid="20" requires="mix composite">
+  <rect id="back" x0="0" y0="0" width="20" height="20" fill="#204060"/>
+  <rect id="a" x0="4" y0="4" mix="{&quot;mode&quot;:&quot;additive&quot;}" width="12" height="12" fill="#804020"/>
+</anima>