animl-cli 0.0.0-stage → 0.1.1

package/modules/assets/capabilities/assets-svg-import/example.ani

@@ -0,0 +1,52 @@
+{
+  "anima": "0.1",
+  "name": "assets-svg-import",
+  "grid": 20,
+  "viewBox": [0, 0, 20, 20],
+  "requires": ["paint"],
+  "nodes": [
+    {
+      "id": "svg-0",
+      "type": "group",
+      "children": [
+        {
+          "id": "svg-transform-4",
+          "type": "group",
+          "x": 2,
+          "y": 3,
+          "children": [
+            {
+              "id": "svg-transform-3",
+              "type": "group",
+              "scaleX": 2,
+              "scaleY": 2,
+              "children": [
+                {
+                  "id": "svg-1",
+                  "type": "group",
+                  "children": [
+                    {
+                      "id": "svg-2",
+                      "type": "path",
+                      "d": "M0 0L4 0L4 4L0 4Z",
+                      "fill": {
+                        "color": "#d97757",
+                        "rule": "nonzero"
+                      },
+                      "stroke": {
+                        "color": "#000000",
+                        "width": 0.5,
+                        "cap": "butt",
+                        "join": "miter"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/modules/assets/capabilities/assets-svg-import/example.animl

@@ -0,0 +1,11 @@
+<anima version="0.1" name="assets-svg-import" grid="20" viewBox="0 0 20 20" requires="paint">
+  <group id="svg-0">
+    <group id="svg-transform-4" x="2" y="3">
+      <group id="svg-transform-3" scaleX="2" scaleY="2">
+        <group id="svg-1">
+          <path id="svg-2" d="M0 0L4 0L4 4L0 4Z" fill="#d97757" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter"/>
+        </group>
+      </group>
+    </group>
+  </group>
+</anima>

package/modules/assets/capabilities/host-api-asset-cdn-policy/example.ani

@@ -0,0 +1,48 @@
+{
+  "anima": "0.1",
+  "name": "host-api-asset-cdn-policy",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "width": 4,
+      "height": 4
+    }
+  ],
+  "timelines": {
+    "resize": {
+      "duration": 1,
+      "tracks": {
+        "photo.width": [
+          [0, 4],
+          [1, 8]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "active",
+        "states": {
+          "active": {
+            "play": "resize"
+          }
+        }
+      }
+    }
+  },
+  "assets": {
+    "photo": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4
+    }
+  }
+}

package/modules/assets/capabilities/host-api-asset-cdn-policy/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="host-api-asset-cdn-policy" grid="24" requires="assets paint">
+  <asset name="photo" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC"
+      width="8" height="4"/>
+  <image id="photo" asset="photo" x0="0" y0="0" width="4" height="4"/>
+  <timeline name="resize" duration="1">
+    <track target="photo.width">0 4; 1 8</track>
+  </timeline>
+  <layer name="main" initial="active">
+    <state name="active" play="resize"/>
+  </layer>
+</anima>

package/modules/assets/capabilities/host-api-asset-loader/example.ani

@@ -0,0 +1,48 @@
+{
+  "anima": "0.1",
+  "name": "host-api-asset-loader",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "width": 4,
+      "height": 4
+    }
+  ],
+  "timelines": {
+    "resize": {
+      "duration": 1,
+      "tracks": {
+        "photo.width": [
+          [0, 4],
+          [1, 8]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "active",
+        "states": {
+          "active": {
+            "play": "resize"
+          }
+        }
+      }
+    }
+  },
+  "assets": {
+    "photo": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4
+    }
+  }
+}

package/modules/assets/capabilities/host-api-asset-loader/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="host-api-asset-loader" grid="24" requires="assets paint">
+  <asset name="photo" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC"
+      width="8" height="4"/>
+  <image id="photo" asset="photo" x0="0" y0="0" width="4" height="4"/>
+  <timeline name="resize" duration="1">
+    <track target="photo.width">0 4; 1 8</track>
+  </timeline>
+  <layer name="main" initial="active">
+    <state name="active" play="resize"/>
+  </layer>
+</anima>

package/modules/assets/capabilities/host-api-asset-metadata/example.ani

@@ -0,0 +1,53 @@
+{
+  "anima": "0.1",
+  "name": "host-api-asset-metadata",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "width": 4,
+      "height": 4
+    }
+  ],
+  "timelines": {
+    "resize": {
+      "duration": 1,
+      "tracks": {
+        "photo.width": [
+          [0, 4],
+          [1, 8]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "active",
+        "states": {
+          "active": {
+            "play": "resize"
+          }
+        }
+      }
+    }
+  },
+  "assets": {
+    "photo": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4,
+      "size": 100,
+      "mime": "image/png",
+      "metadata": {
+        "author": "self"
+      }
+    }
+  }
+}

package/modules/assets/capabilities/host-api-asset-metadata/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="host-api-asset-metadata" grid="24" requires="assets paint">
+  <asset name="photo" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC"
+      width="8" height="4" size="100" mime="image/png" metadata="{&quot;author&quot;:&quot;self&quot;}"/>
+  <image id="photo" asset="photo" x0="0" y0="0" width="4" height="4"/>
+  <timeline name="resize" duration="1">
+    <track target="photo.width">0 4; 1 8</track>
+  </timeline>
+  <layer name="main" initial="active">
+    <state name="active" play="resize"/>
+  </layer>
+</anima>

package/modules/assets/manifest.source

@@ -0,0 +1,79 @@
+export const after = ['bind', 'components'];
+export default {
+  name: 'assets',
+  summary:
+    'Images and other assets: an assets map, image nodes, fit and alignment, and image draw data.',
+  after,
+  core: {
+    entry: 'core/index.ts',
+    export: 'assets',
+    svg: 'core/svg.ts',
+    svgExport: 'assetsSVG',
+  },
+  web: [
+    {
+      name: 'assets',
+      buildOrder: 7,
+      sizeOrder: 9,
+      budget: 1984,
+      over: 'assetio',
+    },
+  ],
+  adapters: {
+    'packages/core/src/modules/assets/index.ts': 'core/index.ts',
+    'packages/core/src/modules/assets/svg.ts': 'core/svg.ts',
+    'packages/web/src/assets.ts': 'web/index.ts',
+  },
+  exports: {
+    'core:./assets': 'packages/core/src/modules/assets/index.ts',
+    'core:./assets-svg': 'packages/core/src/modules/assets/svg.ts',
+    'web:./assets': 'packages/web/src/assets.ts',
+  },
+  markupHook: null,
+  tests: [
+    'modules/assets/test/**/*.test.ts',
+    'packages/markup/test/compile.test.ts',
+    'packages/markup/test/corpus.test.ts',
+    'packages/markup/test/decompile.test.ts',
+    'packages/markup/test/format.test.ts',
+    'packages/markup/test/invalid.test.ts',
+    'packages/markup/test/names.test.ts',
+  ],
+  conformance: [
+    'assets-',
+    'assets-audio',
+    'assets-audio-clip',
+    'assets-audio-export-source',
+    'assets-audio-import-flac',
+    'assets-audio-import-mp3',
+    'assets-audio-import-wav',
+    'assets-blob',
+    'assets-cdn-disable',
+    'assets-exclude-export',
+    'assets-host-decode-audio',
+    'assets-image-encoding-jpeg',
+    'assets-image-encoding-png',
+    'assets-image-encoding-webp',
+    'assets-image-export-controls',
+    'assets-image-filter-bilinear',
+    'assets-image-filter-nearest',
+    'assets-image-import-jpeg',
+    'assets-image-import-jpg',
+    'assets-image-import-png',
+    'assets-image-import-webp',
+    'assets-image-wrap-x-clamp',
+    'assets-image-wrap-x-mirror',
+    'assets-image-wrap-x-repeat',
+    'assets-image-wrap-y-clamp',
+    'assets-image-wrap-y-mirror',
+    'assets-image-wrap-y-repeat',
+    'assets-lottie-import',
+    'assets-metadata',
+    'assets-replacement-scope-image',
+    'assets-svg-import',
+    'host-api-asset-cdn-policy',
+    'host-api-asset-loader',
+    'host-api-asset-metadata',
+  ],
+  docs: ['spec/SPEC.md', 'spec/ANIML.md'],
+};

package/modules/bind/AUTHORING.md

@@ -0,0 +1,49 @@
+# Bind authoring
+
+## Filtering a list by typed text
+
+Use `text-input` to write committed field text to a string `$query`. Derive one bool per label
+with `contains(lower($label0), lower($query))`, then derive a number `$count` by adding the
+bools (each becomes 0 or 1). Bind row visibility to those bools. The empty query shows all rows;
+matching ignores case, preserves spaces and uses Unicode default lowercase without normalization.
+Both functions require strings; wrong argument types report `bind-type` at load time.
+
+```xml
+<anima version="0.1" name="filtering-list" grid="20" requires="text textinput a11y focus data bind derive convert">
+  <model name="Search">
+    <string name="query"/>
+    <string name="label0" default="Sound"/>
+    <string name="label1" default="Motion"/>
+    <bool name="shown0" value="contains(lower($label0), lower($query))"/>
+    <bool name="shown1" value="contains(lower($label1), lower($query))"/>
+    <number name="count" value="$shown0 + $shown1"/>
+    <string name="summary" value="$count" convert="results"/>
+  </model>
+  <instance name="main" model="Search" default="true"/>
+  <converter name="results" type="template" text="{0} results"/>
+  <text-style id="body" size="1"/>
+  <text id="search" x="1" y="1" width="18" height="2" sizing="fixed">
+    <run text="" style="body"/>
+    <text-input placeholder="Filter labels" write-text="$query" label="Search labels"/>
+  </text>
+  <text id="row0" x="1" y="5">
+    <run text="$label0" style="body"/>
+  </text>
+  <text id="row1" x="1" y="8">
+    <run text="$label1" style="body"/>
+  </text>
+  <text id="total" x="1" y="12">
+    <run text="$summary" style="body"/>
+  </text>
+  <bind target="row0.visible" value="$shown0"/>
+  <bind target="row1.visible" value="$shown1"/>
+</anima>
+```
+
+Typing `SO` selects Sound and produces `1 results`; clearing the field restores both rows and
+`2 results`. A `$query` write updates the derived bools, count and visual bindings in the same
+`Player.step`, including `step(0)`. Native field commit scheduling is owned by `text-input`.
+For headless text sampling, supply a font with `--font sans-serif=fixtures/fonts/anima-test.ttf`.
+Browser hosts load `/text`, `/text-input`, `/a11y`, `/focus`, `/data`, `/bind`, `/derive` and
+`/convert` beside the base web entry. The complete example pair is
+`modules/bind/examples/filtering-list.animl` and `.ani`; `anima docs bind` includes this recipe.

package/modules/bind/capabilities/data-bind-listener-actions/example.ani

@@ -0,0 +1,30 @@
+{
+  "anima": "0.1",
+  "name": "data-bind-listener-actions",
+  "grid": 20,
+  "requires": ["bind"],
+  "inputs": {
+    "count": {
+      "type": "number"
+    }
+  },
+  "nodes": [
+    {
+      "id": "dot",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 2,
+      "fill": {
+        "color": "#000"
+      }
+    }
+  ],
+  "listeners": [
+    {
+      "on": "click",
+      "set": {
+        "count": "count+1"
+      }
+    }
+  ]
+}

package/modules/bind/capabilities/data-bind-listener-actions/example.animl

@@ -0,0 +1,5 @@
+<anima version="0.1" name="data-bind-listener-actions" grid="20" requires="bind">
+  <circle id="dot" cx="10" cy="10" r="2" fill="#000"/>
+  <number name="count"/>
+  <listener on="click" set="count=count+1"/>
+</anima>

package/modules/bind/core/expression.source

@@ -0,0 +1,224 @@
+// A small, independently implemented expression grammar. No eval or dynamic code generation.
+import { VERBOSE as V } from '../../../packages/core/src/flags.ts';
+import { lerpColor, parseHex } from '../../../packages/core/src/color.ts';
+import { compare } from '../../../packages/core/src/cond.ts';
+import type { Value } from '../../../packages/core/src/load.ts';
+
+export type BindType = 'number' | 'bool' | 'color' | 'string';
+export const functions = new Map<
+  string,
+  { arity: number; run: ((...args: number[]) => number) & { enabled?: () => boolean } }
+>();
+export function registerFunction(
+  name: string,
+  arity: number,
+  run: (...args: number[]) => number,
+): void {
+  functions.set(name, { arity, run });
+}
+export type InputScope = ReadonlyMap<string, import('../../../packages/core/src/load.ts').Value>;
+export interface Expression {
+  type: BindType;
+  at: number;
+  inputs: Set<string>;
+  evaluate(scope: InputScope): Value;
+}
+export class BindError extends Error {
+  code: string;
+  at: number;
+  constructor(code: string, at: number, message: string) {
+    super(message);
+    this.code = code;
+    this.at = at;
+  }
+}
+
+/** Positions are zero-based UTF-16 offsets; names resolve against the supplied input types. */
+export function expression(source: string, types: ReadonlyMap<string, string>): Expression {
+  let pos = 0,
+    token = '',
+    at = 0,
+    depth = 0,
+    count = 0;
+  const inputs = new Set<string>();
+  const fail = (
+    code = 'bind-syntax',
+    message: string | false = V && 'expected an expression',
+    where = at,
+  ): never => {
+    throw new BindError(code, where, message || '');
+  };
+  const next = () => {
+    while (/\s/.test(source[pos] ?? '')) pos++;
+    at = pos;
+    const match =
+      /^(?:\$[a-zA-Z][\w-]*(?::[a-zA-Z][\w-]*)?(?:\.[\w-]+)*|"(?:[^"\\]|\\.)*"|#[\da-fA-F]+|(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?|[a-z][\w-]*(?:\.[\w-]+)*|[=!<>]=|[<>+*/(),-])/.exec(
+        source.slice(pos),
+      );
+    token = match?.[0] ?? '';
+    if (token && ++count > 512) fail(undefined, V && 'expression exceeds 512 tokens');
+    if (!token && pos < source.length)
+      fail(undefined, V && `unsupported token ${JSON.stringify(source[pos])}`);
+    pos += token.length;
+  };
+  const close = () => {
+    if (token !== ')') fail(undefined, V && 'expected )');
+    next();
+  };
+  const node = (type: BindType, at: number, evaluate: Expression['evaluate']): Expression => ({
+    type,
+    at,
+    inputs,
+    evaluate,
+  });
+  const numeric = (e: Expression) => {
+    if (e.type === 'string' || e.type === 'color')
+      fail('bind-type', V && 'expected a number or bool', e.at);
+  };
+  const parse = (minimum = 0): Expression => {
+    if (++depth > 64) fail(undefined, V && 'expression nesting exceeds 64');
+    const start = at,
+      word = token;
+    next();
+    let left: Expression;
+    if (word === '(') {
+      left = parse();
+      close();
+    } else if (word === 'not') {
+      const e = parse(3);
+      if (e.type !== 'bool') fail('bind-type', V && 'expected bool', start);
+      left = node('bool', start, (s) => !e.evaluate(s));
+    } else if (word === '-' || word === '+') {
+      const e = parse(6);
+      numeric(e);
+      left = node('number', start, (s) => (word === '-' ? -1 : 1) * +evaluate(e, s));
+    } else if (/^\d/.test(word)) {
+      const value = +word;
+      if (!isFinite(value)) fail(undefined, V && 'number must be finite', start);
+      left = node('number', start, () => value);
+    } else if (word[0] === '#') {
+      const value = parseHex(word);
+      if (!value) fail(undefined, V && 'expected #rgb, #rrggbb or #rrggbbaa', start);
+      left = node('color', start, () => value!);
+    } else if (word[0] === '"') {
+      const value = JSON.parse(word) as string;
+      left = node('string', start, () => value);
+    } else if (/^[a-z$]/.test(word)) {
+      if (token === '(') {
+        const fn = functions.get(word);
+        const arity =
+          fn?.arity ??
+          (
+            { min: 2, max: 2, clamp: 3, mix: 3, floor: 1, mod: 2, contains: 2, lower: 1 } as Record<
+              string,
+              number
+            >
+          )[word];
+        if (fn?.run.enabled?.() === false) fail();
+        if (arity === undefined) fail(undefined, V && 'unknown function', start);
+        next();
+        const args = (token as string) === ')' ? [] : [parse()];
+        while ((token as string) === ',') {
+          next();
+          args.push(parse());
+        }
+        close();
+        if (args.length !== arity) fail(undefined, V && 'wrong argument count', start);
+        const [a, b, c] = args as [Expression, Expression, Expression];
+        const color = word === 'mix' && a.type === 'color' && b.type === 'color';
+        const string = word === 'contains' || word === 'lower';
+        (color ? [c] : args).forEach((e) => {
+          if (string) {
+            if (e.type !== 'string') fail('bind-type', V && 'expected string', e.at);
+          } else numeric(e);
+        });
+        left = node(
+          string ? (word === 'lower' ? 'string' : 'bool') : color ? 'color' : 'number',
+          start,
+          (s) => {
+            if (string) {
+              const text = a.evaluate(s) as string;
+              return word === 'lower' ? text.toLowerCase() : text.includes(b.evaluate(s) as string);
+            }
+            if (color)
+              return lerpColor(
+                a.evaluate(s) as import('../../../packages/core/src/color.ts').RGBA,
+                b.evaluate(s) as import('../../../packages/core/src/color.ts').RGBA,
+                +evaluate(c, s),
+              );
+            if (fn) return fn.run(...args.map((a) => +evaluate(a, s)));
+            const x = +evaluate(a, s);
+            if (word === 'floor') return Math.floor(x);
+            const y = +evaluate(b, s);
+            if (word === 'mod') return x - y * Math.floor(x / y);
+            return word === 'min'
+              ? Math.min(x, y)
+              : word === 'max'
+                ? Math.max(x, y)
+                : word === 'clamp'
+                  ? Math.min(Math.max(x, y), +evaluate(c, s))
+                  : x + (y - x) * +evaluate(c, s);
+          },
+        );
+      } else {
+        const type = types.get(word);
+        if (!type) fail('unknown-input', V && `unknown input ${word}`, start);
+        if (!['number', 'bool', 'color', 'string'].includes(type!))
+          fail('bind-type', V && 'triggers are not binding values', start);
+        inputs.add(word);
+        left = node(type as BindType, start, (s) => s.get(word)!);
+      }
+    } else fail(undefined, V && 'expected a value', start);
+    while (true) {
+      const op = token,
+        precedence =
+          op === 'or'
+            ? 1
+            : op === 'and'
+              ? 2
+              : /^[=!<>]/.test(op)
+                ? 4
+                : op === '+' || op === '-'
+                  ? 5
+                  : op === '*' || op === '/'
+                    ? 6
+                    : 0;
+      if (precedence <= minimum) break;
+      next();
+      const a = left!,
+        b = parse(precedence);
+      if (
+        precedence <= 2
+          ? a.type !== 'bool' || b.type !== 'bool'
+          : precedence === 4
+            ? a.type !== b.type || (!['==', '!='].includes(op) && a.type !== 'number')
+            : false
+      )
+        fail('bind-type', V && 'operator and operand types do not match', a.at);
+      if (precedence > 4) [a, b].forEach(numeric);
+      left = node(precedence <= 4 ? 'bool' : 'number', a.at, (s) => {
+        const x = evaluate(a, s);
+        if (precedence <= 2) return op === 'and' ? !!x && !!b.evaluate(s) : !!x || !!b.evaluate(s);
+        const y = evaluate(b, s);
+        // Colours are RGBA arrays: compare their components, not their identity.
+        if (precedence === 4)
+          return a.type === 'color' ? compare('' + x, '' + y, op) : compare(x, y, op);
+        const n = +x,
+          m = +y;
+        return op === '+' ? n + m : op === '-' ? n - m : op === '*' ? n * m : n / m;
+      });
+    }
+    depth--;
+    return left!;
+  };
+  next();
+  const result = parse();
+  if (token) fail(undefined, V && `unsupported token ${JSON.stringify(token)}`);
+  return result;
+}
+
+/** Reusable for component input bindings. Non-finite arithmetic resolves to zero. */
+export function evaluate(e: Expression, scope: InputScope): Value {
+  const v = e.evaluate(scope);
+  return typeof v === 'number' && !isFinite(v) ? 0 : v;
+}