animl-cli 0.0.0-stage → 0.1.0

package/modules/paint/capabilities/drawing-paint-gradient-transform/example.animl

@@ -0,0 +1,8 @@
+<anima version="0.1" name="gradient-transform" grid="20" requires="paint">
+  <rect id="a" x0="0" y0="0" width="20" height="20">
+    <linearGradient x1="0" y1="0" x2="20" y2="0" gradient-transform="0 1 -1 0 20 0">
+      <stop offset="0" stop-color="#4263eb"/>
+      <stop offset="1" stop-color="#d97757"/>
+    </linearGradient>
+  </rect>
+</anima>

package/modules/paint/capabilities/drawing-paint-image-fit-resize/example.ani

@@ -0,0 +1,49 @@
+{
+  "anima": "0.1",
+  "name": "drawing-paint-image-fit-resize",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "fit": "resize",
+      "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/paint/capabilities/drawing-paint-image-fit-resize/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="drawing-paint-image-fit-resize" 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" fit="resize" 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/paint/capabilities/drawing-paint-image-wrap-clamp/example.ani

@@ -0,0 +1,50 @@
+{
+  "anima": "0.1",
+  "name": "drawing-paint-image-wrap-clamp",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "sampling": "nearest",
+      "wrap": "clamp",
+      "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/paint/capabilities/drawing-paint-image-wrap-clamp/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="drawing-paint-image-wrap-clamp" 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" sampling="nearest" wrap="clamp" 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/paint/capabilities/drawing-paint-image-wrap-mirror/example.ani

@@ -0,0 +1,50 @@
+{
+  "anima": "0.1",
+  "name": "drawing-paint-image-wrap-mirror",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "sampling": "nearest",
+      "wrap": "mirror",
+      "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/paint/capabilities/drawing-paint-image-wrap-mirror/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="drawing-paint-image-wrap-mirror" 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" sampling="nearest" wrap="mirror" 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/paint/capabilities/drawing-paint-image-wrap-repeat/example.ani

@@ -0,0 +1,50 @@
+{
+  "anima": "0.1",
+  "name": "drawing-paint-image-wrap-repeat",
+  "grid": 24,
+  "requires": ["assets", "paint"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "sampling": "nearest",
+      "wrap": "repeat",
+      "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/paint/capabilities/drawing-paint-image-wrap-repeat/example.animl

@@ -0,0 +1,12 @@
+<anima version="0.1" name="drawing-paint-image-wrap-repeat" 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" sampling="nearest" wrap="repeat" 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/paint/manifest.source

@@ -0,0 +1,77 @@
+export const after = ['assets', 'corners'];
+export default {
+  name: 'paint',
+  summary:
+    'Paint: solid and gradient fills, strokes (width, caps, joins, dashes, trims) and ordered paints.',
+  after,
+  core: {
+    entry: 'core/index.ts',
+    export: 'paint',
+    svg: 'core/svg.ts',
+    svgExport: 'paintSVG',
+  },
+  web: [
+    { name: 'paint-sampling', budget: 1216, over: 'paint' },
+    {
+      name: 'paint',
+      buildOrder: 3,
+      sizeOrder: 6,
+      budget: 4416,
+    },
+    {
+      name: 'markup-paint',
+      buildOrder: 10,
+      sizeOrder: 3,
+      budget: 448,
+      over: 'index',
+      authoring: true,
+    },
+  ],
+  adapters: {
+    'packages/web/src/paint-sampling.ts': 'web/sampling.ts',
+    'packages/core/src/modules/paint/index.ts': 'core/index.ts',
+    'packages/core/src/modules/paint/svg.ts': 'core/svg.ts',
+    'packages/core/src/modules/paint/geometry.ts': 'core/geometry.ts',
+    'packages/web/src/paint.ts': 'web/index.ts',
+    'packages/web/src/markup-paint.ts': 'web/markup.ts',
+    'packages/markup/src/modules.ts': 'markup/index.ts',
+  },
+  exports: {
+    'web:./paint-sampling': 'packages/web/src/paint-sampling.ts',
+    'core:./paint': 'packages/core/src/modules/paint/index.ts',
+    'core:./paint-svg': 'packages/core/src/modules/paint/svg.ts',
+    'web:./paint': 'packages/web/src/paint.ts',
+    'web:./markup-paint': 'packages/web/src/markup-paint.ts',
+    'markup:./modules': 'packages/markup/src/modules.ts',
+  },
+  markupHook: {
+    browserName: 'paint',
+    browserBase: 'structuralForms',
+    slot: 'moduleCompiler',
+    type: 'structuralMarkup',
+    value: 'structuralMarkup',
+  },
+  tests: [
+    'modules/paint/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: [
+    'paint-gradient',
+    'paint-dash',
+    'paint-morph',
+    'paint-pose-morph',
+    'paint-shape-',
+    'drawing-paint-gradient-transform',
+    'drawing-paint-gradient-angular',
+    'drawing-paint-image-fit-resize',
+    'drawing-paint-image-wrap-clamp',
+    'drawing-paint-image-wrap-mirror',
+    'drawing-paint-image-wrap-repeat',
+  ],
+  docs: ['spec/SPEC.md', 'spec/ANIML.md'],
+};

package/modules/pathfollow/capabilities/rigging-follow-path/example.ani

@@ -0,0 +1,16 @@
+{
+  "anima": "0.1",
+  "name": "rigging-follow-path",
+  "grid": 20,
+  "nodes": [
+    {
+      "id": "probe",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 1,
+      "fill": {
+        "color": "#000"
+      }
+    }
+  ]
+}

package/modules/pathfollow/capabilities/rigging-follow-path/example.animl

@@ -0,0 +1,7 @@
+<anima version="0.1" name="rigging-follow-path" grid="24" requires="rig pathfollow">
+  <path id="track" d="M2 12C7 3 17 3 22 12" stroke="#888"/>
+  <group id="marker">
+    <along-path path="track" at="0.5" orient="true"/>
+    <rect id="art" x0="-1" y0="-0.5" width="2" height="1" fill="#111"/>
+  </group>
+</anima>

package/modules/pathfollow/capabilities/rigging-list-follow-path/example.ani

@@ -0,0 +1,16 @@
+{
+  "anima": "0.1",
+  "name": "rigging-list-follow-path",
+  "grid": 20,
+  "nodes": [
+    {
+      "id": "probe",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 1,
+      "fill": {
+        "color": "#000"
+      }
+    }
+  ]
+}

package/modules/pathfollow/capabilities/rigging-list-follow-path/example.animl

@@ -0,0 +1,9 @@
+<anima version="0.1" name="rigging-list-follow-path" grid="24" requires="rig pathfollow">
+  <arc id="track" cx="12" cy="14" r="8" from="200" to="340" stroke="#888"/>
+  <group id="items">
+    <spread-along-path path="track" start="0" end="1" orient="true"/>
+    <rect id="a" x0="-0.6" y0="-0.6" width="1.2" height="1.2" fill="#111"/>
+    <rect id="b" x0="-0.6" y0="-0.6" width="1.2" height="1.2" fill="#111"/>
+    <rect id="c" x0="-0.6" y0="-0.6" width="1.2" height="1.2" fill="#111"/>
+  </group>
+</anima>

package/modules/pathfollow/examples/orbit.ani

@@ -0,0 +1,130 @@
+{
+  "anima": "0.1",
+  "name": "pathfollow-orbit",
+  "grid": 48,
+  "requires": ["rig", "pathfollow"],
+  "nodes": [
+    {
+      "id": "ride",
+      "type": "path",
+      "d": "M5 11C12 2 28 2 35 11",
+      "stroke": {
+        "color": "#6b7280",
+        "width": 0.8
+      }
+    },
+    {
+      "id": "rider",
+      "type": "group",
+      "children": [
+        {
+          "id": "arrow",
+          "type": "rect",
+          "x0": -1.5,
+          "y0": -0.6,
+          "w": 3,
+          "h": 1.2,
+          "rx": 0.3,
+          "fill": {
+            "color": "#111827"
+          }
+        }
+      ],
+      "constraints": [
+        {
+          "kind": "alongPath",
+          "path": "ride",
+          "at": 0.42,
+          "orient": true
+        }
+      ]
+    },
+    {
+      "id": "beadPath",
+      "type": "arc",
+      "center": [20, 31],
+      "r": 10,
+      "from": 200,
+      "to": 340,
+      "stroke": {
+        "color": "#9ca3af",
+        "width": 0.8
+      }
+    },
+    {
+      "id": "beads",
+      "type": "group",
+      "children": [
+        {
+          "id": "bead1",
+          "type": "rect",
+          "x0": -0.8,
+          "y0": -0.8,
+          "w": 1.6,
+          "h": 1.6,
+          "rx": 0.3,
+          "fill": {
+            "color": "#111827"
+          }
+        },
+        {
+          "id": "bead2",
+          "type": "rect",
+          "x0": -0.8,
+          "y0": -0.8,
+          "w": 1.6,
+          "h": 1.6,
+          "rx": 0.3,
+          "fill": {
+            "color": "#111827"
+          }
+        },
+        {
+          "id": "bead3",
+          "type": "rect",
+          "x0": -0.8,
+          "y0": -0.8,
+          "w": 1.6,
+          "h": 1.6,
+          "rx": 0.3,
+          "fill": {
+            "color": "#111827"
+          }
+        },
+        {
+          "id": "bead4",
+          "type": "rect",
+          "x0": -0.8,
+          "y0": -0.8,
+          "w": 1.6,
+          "h": 1.6,
+          "rx": 0.3,
+          "fill": {
+            "color": "#111827"
+          }
+        },
+        {
+          "id": "bead5",
+          "type": "rect",
+          "x0": -0.8,
+          "y0": -0.8,
+          "w": 1.6,
+          "h": 1.6,
+          "rx": 0.3,
+          "fill": {
+            "color": "#111827"
+          }
+        }
+      ],
+      "constraints": [
+        {
+          "kind": "spreadAlongPath",
+          "path": "beadPath",
+          "start": 0,
+          "end": 1,
+          "orient": true
+        }
+      ]
+    }
+  ]
+}

package/modules/pathfollow/examples/orbit.animl

@@ -0,0 +1,17 @@
+<anima version="0.1" name="pathfollow-orbit" grid="48" requires="rig pathfollow">
+  <path id="ride" d="M5 11C12 2 28 2 35 11" stroke="#6b7280" stroke-width="0.8"/>
+  <group id="rider">
+    <along-path path="ride" at="0.42" orient="true"/>
+    <rect id="arrow" x0="-1.5" y0="-0.6" width="3" height="1.2" rx="0.3" fill="#111827"/>
+  </group>
+
+  <arc id="beadPath" cx="20" cy="31" r="10" from="200" to="340" stroke="#9ca3af" stroke-width="0.8"/>
+  <group id="beads">
+    <spread-along-path path="beadPath" start="0" end="1" orient="true"/>
+    <rect id="bead1" x0="-0.8" y0="-0.8" width="1.6" height="1.6" rx="0.3" fill="#111827"/>
+    <rect id="bead2" x0="-0.8" y0="-0.8" width="1.6" height="1.6" rx="0.3" fill="#111827"/>
+    <rect id="bead3" x0="-0.8" y0="-0.8" width="1.6" height="1.6" rx="0.3" fill="#111827"/>
+    <rect id="bead4" x0="-0.8" y0="-0.8" width="1.6" height="1.6" rx="0.3" fill="#111827"/>
+    <rect id="bead5" x0="-0.8" y0="-0.8" width="1.6" height="1.6" rx="0.3" fill="#111827"/>
+  </group>
+</anima>

package/modules/pathfollow/manifest.source

@@ -0,0 +1,35 @@
+export const after = ['rig', 'lists', 'contour'];
+export default {
+  ...{
+    name: 'pathfollow',
+    summary: 'Follow path: place or orient nodes along a path outline, with offsets and spreading.',
+    after: [],
+    core: {
+      entry: 'core/index.ts',
+      export: 'pathfollow',
+      svg: 'core/svg.ts',
+      svgExport: 'pathfollowSVG',
+    },
+    web: [{ name: 'pathfollow', budget: 1280, heavy: true, over: 'rig' }],
+    adapters: {
+      'packages/core/src/modules/pathfollow/index.ts': 'core/index.ts',
+      'packages/core/src/modules/pathfollow/svg.ts': 'core/svg.ts',
+      'packages/markup/src/pathfollow.ts': 'markup/index.ts',
+      'packages/web/src/pathfollow.ts': 'web/index.ts',
+    },
+    exports: {
+      'core:./pathfollow': 'packages/core/src/modules/pathfollow/index.ts',
+      'markup:./pathfollow': 'packages/markup/src/pathfollow.ts',
+      'web:./pathfollow': 'packages/web/src/pathfollow.ts',
+    },
+    tests: [
+      'modules/pathfollow/test/**/*.test.ts',
+      'packages/markup/test/corpus.test.ts',
+      'packages/markup/test/names.test.ts',
+      'packages/markup/test/decompile.test.ts',
+    ],
+    conformance: ['rigging-follow-path', 'rigging-list-follow-path'],
+    docs: ['spec/SPEC.md'],
+  },
+  after,
+};