npm - animl-cli - Versions diffs - 0.0.0-stage → 0.1.1 - Mend

animl-cli 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1181) hide show

package/examples/toolbar.ani ADDED Viewed

@@ -0,0 +1,480 @@
+{
+  "anima": "0.1",
+  "name": "toolbar",
+  "title": "Shared press icons and bound badge",
+  "grid": 20,
+  "viewBox": [0, 0, 72, 24],
+  "requires": ["components", "bind"],
+  "inputs": {
+    "unread": {
+      "type": "number",
+      "default": 3,
+      "min": 0,
+      "max": 9
+    }
+  },
+  "nodes": [
+    {
+      "id": "bell",
+      "type": "instance",
+      "y": 2,
+      "component": "bell"
+    },
+    {
+      "id": "moon",
+      "type": "instance",
+      "x": 24,
+      "y": 2,
+      "component": "moon"
+    },
+    {
+      "id": "trash",
+      "type": "instance",
+      "x": 48,
+      "y": 2,
+      "component": "trash"
+    },
+    {
+      "id": "badge",
+      "type": "instance",
+      "x": 12,
+      "component": "badge",
+      "inputs": {
+        "count": "{unread}"
+      }
+    }
+  ],
+  "machine": {
+    "layers": {
+      "toolbar": {
+        "initial": "ready",
+        "states": {
+          "ready": {
+            "pose": {},
+            "on": [
+              {
+                "when": "badge.cleared",
+                "to": "read"
+              }
+            ]
+          },
+          "read": {
+            "pose": {}
+          }
+        }
+      }
+    }
+  },
+  "listeners": [
+    {
+      "on": "badge.cleared",
+      "set": {
+        "unread": 0
+      }
+    }
+  ],
+  "components": {
+    "bell": {
+      "grid": 20,
+      "glyphs": {
+        "art": {
+          "d": "M9.493 4.473C9.423 4.49 9.326 4.517 9.256 4.493L8.602 4.66C8.543 4.675 8.464 4.703 8.409 4.73L7.835 5.016L7.366 5.328L6.888 5.748L6.485 6.211C6.428 6.277 6.354 6.377 6.313 6.452L6.009 6.998C5.984 7.043 5.955 7.099 5.939 7.147L5.714 7.805C5.692 7.871 5.666 7.981 5.659 8.05L5.605 8.614L5.605 10.357C5.605 10.417 5.589 10.486 5.579 10.545C5.532 10.817 5.449 11.086 5.338 11.338C5.317 11.387 5.297 11.444 5.27 11.488L4.972 11.98C4.945 12.023 4.907 12.062 4.876 12.102C4.846 12.139 4.818 12.183 4.788 12.218L4.223 12.866C3.945 13.187 3.76 13.793 3.974 14.186C4.04 14.307 4.138 14.394 4.25 14.469C4.326 14.519 4.484 14.621 4.575 14.621L15.38 14.621C15.516 14.621 15.657 14.542 15.762 14.463C16.203 14.128 16.199 13.552 15.949 13.102C15.905 13.022 15.841 12.912 15.778 12.849L15.262 12.333C15.21 12.281 15.161 12.215 15.114 12.156C14.893 11.882 14.696 11.575 14.579 11.241C14.538 11.125 14.522 11.001 14.487 10.883C14.477 10.847 14.455 10.811 14.447 10.776C14.441 10.749 14.445 10.722 14.434 10.697C14.428 10.684 14.398 10.661 14.398 10.658L14.374 8.304C14.35 8.276 14.373 8.247 14.367 8.216L14.24 7.579C14.222 7.485 14.157 7.3 14.115 7.214L13.8 6.572C13.72 6.411 13.607 6.256 13.495 6.115C13.47 6.084 13.444 6.043 13.417 6.017L12.947 5.547C12.927 5.526 12.92 5.529 12.898 5.516C12.883 5.507 12.878 5.481 12.865 5.471L12.413 5.133L11.93 4.86L11.457 4.664L10.924 4.514C10.806 4.481 10.672 4.484 10.551 4.467L10.551 2.953C10.551 2.912 10.512 2.871 10.497 2.835C10.474 2.782 10.458 2.725 10.417 2.681C10.372 2.631 10.297 2.601 10.236 2.578C9.97 2.476 9.694 2.537 9.563 2.807C9.549 2.835 9.494 2.901 9.494 2.929L9.494 4.444C9.494 4.454 9.494 4.463 9.493 4.473ZM4.988 13.492L5.57 12.823L5.897 12.351L6.137 11.92L6.358 11.384C6.407 11.263 6.477 11.018 6.489 10.891L6.545 10.312L6.545 8.664C6.545 8.614 6.568 8.563 6.573 8.512C6.58 8.444 6.573 8.313 6.587 8.257L6.71 7.763C6.721 7.718 6.738 7.661 6.758 7.62L7.019 7.091C7.058 7.011 7.125 6.899 7.182 6.833L7.559 6.399L7.966 6.043C8.038 5.979 8.127 5.927 8.209 5.876C8.503 5.697 8.827 5.552 9.16 5.462C9.221 5.446 9.292 5.422 9.355 5.416L10.001 5.357L10.614 5.413C10.668 5.418 10.728 5.436 10.781 5.449C11.13 5.532 11.472 5.678 11.777 5.869C11.84 5.908 11.913 5.949 11.968 5.997L12.49 6.456C12.575 6.53 12.646 6.628 12.713 6.719C12.983 7.089 13.202 7.524 13.324 7.966C13.343 8.033 13.369 8.111 13.374 8.18L13.422 8.861L13.422 10.639C13.422 10.953 13.543 11.337 13.66 11.626C13.685 11.687 13.709 11.758 13.741 11.815L14.074 12.399L14.402 12.831C14.43 12.868 14.462 12.899 14.492 12.932L14.939 13.423C14.958 13.444 15.03 13.561 15.033 13.584L4.974 13.584L4.988 13.492ZM10.173 17.469C10.219 17.457 10.27 17.455 10.317 17.447C10.414 17.431 10.51 17.412 10.605 17.387C10.759 17.347 10.907 17.289 11.051 17.224C11.154 17.178 11.26 17.133 11.355 17.073C11.622 16.905 11.838 16.646 12.005 16.382C12.185 16.099 12.376 15.685 12.262 15.346C12.18 15.101 11.838 14.963 11.598 15.035C11.507 15.062 11.439 15.133 11.367 15.19C11.348 15.204 11.322 15.216 11.306 15.233C11.289 15.25 11.282 15.299 11.274 15.322C11.231 15.45 11.196 15.587 11.14 15.71C11.101 15.796 11.036 15.869 10.973 15.939C10.712 16.229 10.312 16.462 9.908 16.385C9.864 16.377 9.821 16.362 9.777 16.355C9.721 16.346 9.663 16.346 9.609 16.328C9.567 16.314 9.529 16.285 9.49 16.264C9.432 16.233 9.368 16.208 9.313 16.171C9.28 16.149 9.256 16.115 9.226 16.089C9.2 16.068 9.17 16.053 9.144 16.032C9.08 15.981 9.027 15.917 8.982 15.849C8.89 15.713 8.848 15.547 8.795 15.393C8.777 15.341 8.764 15.275 8.73 15.231C8.676 15.16 8.597 15.123 8.517 15.089C8.441 15.056 8.361 15.024 8.278 15.02C8.155 15.015 8.045 15.079 7.945 15.141C7.929 15.151 7.896 15.183 7.878 15.185C7.831 15.281 7.747 15.389 7.735 15.497C7.722 15.609 7.777 15.702 7.803 15.807C7.818 15.871 7.823 15.939 7.844 16.002C7.873 16.085 7.93 16.162 7.972 16.24C8.027 16.344 8.067 16.457 8.136 16.554C8.356 16.859 8.86 17.208 9.212 17.339C9.521 17.454 9.849 17.458 10.173 17.469Z"
+        }
+      },
+      "inputs": {
+        "hover": {
+          "type": "bool"
+        },
+        "down": {
+          "type": "bool"
+        }
+      },
+      "nodes": [
+        {
+          "id": "icon",
+          "type": "group",
+          "pivot": [10, 10],
+          "children": [
+            {
+              "id": "art",
+              "type": "path",
+              "glyph": "art",
+              "fill": {
+                "color": "currentColor",
+                "rule": "evenodd"
+              }
+            }
+          ]
+        }
+      ],
+      "machine": {
+        "layers": {
+          "press": {
+            "initial": "rest",
+            "states": {
+              "rest": {
+                "pose": {
+                  "icon.scale": 1
+                },
+                "on": [
+                  {
+                    "when": "down",
+                    "to": "pressed"
+                  },
+                  {
+                    "when": "hover",
+                    "to": "hovered"
+                  }
+                ]
+              },
+              "hovered": {
+                "pose": {
+                  "icon.scale": 1.08
+                },
+                "on": [
+                  {
+                    "when": "down",
+                    "to": "pressed"
+                  },
+                  {
+                    "when": "!hover",
+                    "to": "rest"
+                  }
+                ]
+              },
+              "pressed": {
+                "pose": {
+                  "icon.scale": 0.92
+                },
+                "on": [
+                  {
+                    "when": "!down && hover",
+                    "to": "hovered"
+                  },
+                  {
+                    "when": "!down && !hover",
+                    "to": "rest"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      },
+      "listeners": [
+        {
+          "on": "enter",
+          "set": {
+            "hover": true
+          }
+        },
+        {
+          "on": "leave",
+          "set": {
+            "hover": false,
+            "down": false
+          }
+        },
+        {
+          "on": "down",
+          "set": {
+            "down": true
+          }
+        },
+        {
+          "on": "up",
+          "set": {
+            "down": false
+          }
+        }
+      ]
+    },
+    "moon": {
+      "grid": 20,
+      "glyphs": {
+        "art": {
+          "d": "M8.749 4.908C8.749 4.906 8.749 4.904 8.749 4.903C8.751 4.884 8.752 4.873 8.743 4.857L9.111 4.348C9.142 4.305 9.182 4.268 9.211 4.223C9.222 4.208 9.229 4.171 9.241 4.16L9.855 3.545C9.952 3.449 9.968 3.317 10.006 3.192C10.057 3.022 10.043 2.858 9.965 2.698C9.826 2.415 9.594 2.297 9.288 2.287C9.243 2.285 9.154 2.273 9.113 2.285C9.105 2.287 9.097 2.298 9.089 2.302C9.064 2.315 9.035 2.32 9.008 2.324C8.945 2.333 8.853 2.322 8.798 2.335L8.084 2.503L7.626 2.666C7.562 2.689 7.489 2.708 7.428 2.736L6.785 3.036C6.745 3.054 6.747 3.066 6.718 3.085C6.704 3.094 6.683 3.094 6.671 3.101L6.206 3.385C6.137 3.427 6.037 3.493 5.974 3.541L5.465 3.929C5.425 3.96 5.386 4.035 5.335 4.04L4.639 4.736C4.617 4.758 4.61 4.789 4.59 4.815C4.567 4.846 4.535 4.871 4.512 4.899L4.141 5.357C4.133 5.367 4.119 5.384 4.113 5.393L3.652 6.136C3.653 6.153 3.644 6.148 3.638 6.16L3.351 6.731L3.129 7.298L2.965 7.792C2.951 7.835 2.955 7.919 2.918 7.947L2.786 8.568C2.78 8.594 2.787 8.648 2.769 8.663L2.711 9.239C2.708 9.264 2.718 9.281 2.696 9.296L2.696 9.993L2.766 10.645C2.767 10.655 2.778 10.663 2.778 10.672C2.778 10.679 2.772 10.684 2.773 10.691C2.784 10.78 2.807 10.869 2.824 10.956C2.831 10.992 2.834 11.036 2.843 11.07L3.013 11.72L3.197 12.221L3.381 12.64L3.634 13.14C3.66 13.192 3.7 13.233 3.727 13.286C3.735 13.302 3.756 13.374 3.757 13.375L4.086 13.864C4.112 13.901 4.17 13.945 4.17 13.992L4.494 14.404C4.544 14.467 4.603 14.527 4.656 14.588C4.69 14.628 4.722 14.677 4.758 14.712L5.291 15.246C5.305 15.26 5.312 15.27 5.333 15.27L5.757 15.634L6.184 15.939L6.687 16.258L7.356 16.594C7.39 16.612 7.441 16.61 7.464 16.644L8.121 16.886L8.831 17.069L9.312 17.143L10.166 17.217C10.26 17.225 10.372 17.218 10.465 17.201C10.494 17.196 10.523 17.178 10.551 17.175C10.569 17.172 10.59 17.185 10.606 17.183L11.102 17.13L11.629 17.038C11.646 17.035 11.666 17.016 11.687 17.011C11.723 17.002 11.768 17.007 11.801 16.997L12.509 16.784C12.54 16.774 12.585 16.761 12.613 16.748L13.457 16.355L14.109 15.957L14.677 15.525C14.729 15.485 14.777 15.434 14.826 15.391C14.866 15.355 14.915 15.321 14.952 15.284L15.513 14.722C15.525 14.711 15.523 14.693 15.534 14.679C15.547 14.664 15.569 14.654 15.58 14.64L15.901 14.244C15.94 14.196 15.975 14.136 16.013 14.085C16.067 14.009 16.133 13.933 16.173 13.851C16.186 13.825 16.223 13.781 16.24 13.753C16.32 13.624 16.402 13.496 16.471 13.362C16.476 13.353 16.489 13.347 16.492 13.34L16.822 12.684C16.828 12.673 16.827 12.661 16.831 12.652L17.067 12.049L17.261 11.338C17.402 10.818 17.198 10.286 16.59 10.283C16.445 10.283 16.273 10.315 16.15 10.397C16.095 10.435 16.056 10.491 16.018 10.545C16.008 10.559 15.998 10.582 15.988 10.592L15.405 11.175C15.326 11.253 15.185 11.359 15.089 11.412L14.473 11.754C14.4 11.795 14.272 11.851 14.193 11.875L13.719 12.018C13.683 12.028 13.641 12.049 13.605 12.055L13.138 12.137L12.616 12.192C12.592 12.195 12.558 12.198 12.536 12.196L11.819 12.134C11.659 12.121 11.495 12.07 11.343 12.022C11.3 12.009 11.249 11.997 11.209 11.98L10.617 11.723L10.083 11.401C10.037 11.374 9.979 11.336 9.939 11.302L9.373 10.817L8.895 10.26L8.567 9.773L8.271 9.186C8.24 9.125 8.206 9.046 8.189 8.982L8.042 8.421C8.017 8.323 8.011 8.215 7.996 8.115C7.988 8.068 7.97 8.012 7.97 7.967L7.97 7.267C7.97 7.206 7.997 7.145 8.003 7.082C8.007 7.046 8 6.955 8.005 6.933L8.126 6.366C8.139 6.302 8.166 6.234 8.183 6.169C8.195 6.126 8.202 6.073 8.218 6.033L8.423 5.508L8.732 4.894C8.738 4.898 8.743 4.903 8.749 4.908ZM8.748 3.336L8.25 3.95C8.205 4.006 8.164 4.075 8.122 4.135C8.116 4.144 8.099 4.15 8.095 4.156L7.779 4.665C7.742 4.725 7.711 4.793 7.677 4.855C7.654 4.896 7.623 4.939 7.604 4.981L7.418 5.396L7.225 5.89L7.043 6.558C7.04 6.569 7.043 6.578 7.042 6.587L6.96 7.109C6.953 7.153 6.981 7.218 6.938 7.248L6.938 7.961C6.938 7.98 6.938 8.005 6.94 8.022L7.043 8.693C7.05 8.736 7.065 8.793 7.078 8.834L7.283 9.467L7.504 9.97C7.536 10.044 7.582 10.118 7.619 10.192C7.657 10.267 7.692 10.354 7.738 10.423L8.142 11.022L8.459 11.391C8.499 11.437 8.588 11.476 8.578 11.546L9.272 12.142C9.339 12.199 9.417 12.249 9.491 12.298C9.497 12.303 9.502 12.315 9.507 12.318L9.939 12.578C9.982 12.604 10.042 12.61 10.067 12.659L10.658 12.916C10.688 12.929 10.722 12.916 10.745 12.947L11.305 13.113C11.369 13.132 11.45 13.155 11.515 13.16L12.15 13.215L12.717 13.215C12.728 13.215 12.74 13.215 12.751 13.213C12.788 13.169 12.826 13.213 12.868 13.205L13.41 13.111C13.449 13.104 13.493 13.076 13.532 13.096L14.192 12.897L14.641 12.716C14.684 12.698 14.731 12.642 14.781 12.659L15.292 12.376C15.308 12.367 15.317 12.352 15.335 12.355L15.804 12.032C15.902 11.965 15.98 11.874 16.084 11.815C16.031 11.953 15.983 12.098 15.917 12.231C15.913 12.24 15.914 12.254 15.911 12.261L15.609 12.862L15.282 13.389C15.272 13.404 15.255 13.412 15.246 13.425L14.878 13.935C14.848 13.975 14.787 13.984 14.777 14.042L14.106 14.713C14.065 14.754 14.012 14.802 13.966 14.834L13.509 15.148C13.462 15.18 13.413 15.223 13.365 15.249L12.749 15.591L12.138 15.838C12.095 15.856 12.043 15.864 11.999 15.878C11.874 15.915 11.75 15.951 11.623 15.981C11.602 15.986 11.578 16.006 11.56 16.009L10.898 16.125L10.272 16.157L9.701 16.131L9.095 16.037L8.528 15.891L7.98 15.689C7.948 15.678 7.927 15.645 7.889 15.651L7.36 15.385L6.909 15.113L6.399 14.747L5.952 14.364L5.463 13.875L5.078 13.427C5.062 13.408 5.058 13.383 5.043 13.362C5.025 13.339 4.996 13.319 4.981 13.296L4.677 12.845L4.376 12.305L4.162 11.819C4.138 11.763 4.121 11.697 4.1 11.639C4.07 11.558 4.025 11.471 4.006 11.386C4.004 11.375 4.006 11.363 4.003 11.351C3.999 11.339 3.989 11.326 3.986 11.315L3.831 10.725L3.753 10.217C3.744 10.16 3.767 10.091 3.728 10.043L3.728 9.12L3.822 8.527L3.929 8.023C3.933 8.006 3.952 7.984 3.958 7.964C3.986 7.858 4.013 7.742 4.053 7.639L4.328 6.937L4.738 6.197L5.144 5.634C5.156 5.617 5.172 5.617 5.176 5.592L5.644 5.066L6.111 4.653L6.617 4.268L7.211 3.906L7.939 3.566C7.976 3.549 8.015 3.554 8.054 3.539C8.28 3.457 8.515 3.384 8.748 3.336Z"
+        }
+      },
+      "inputs": {
+        "hover": {
+          "type": "bool"
+        },
+        "down": {
+          "type": "bool"
+        }
+      },
+      "nodes": [
+        {
+          "id": "icon",
+          "type": "group",
+          "pivot": [10, 10],
+          "children": [
+            {
+              "id": "art",
+              "type": "path",
+              "glyph": "art",
+              "fill": {
+                "color": "currentColor",
+                "rule": "evenodd"
+              }
+            }
+          ]
+        }
+      ],
+      "machine": {
+        "layers": {
+          "press": {
+            "initial": "rest",
+            "states": {
+              "rest": {
+                "pose": {
+                  "icon.scale": 1
+                },
+                "on": [
+                  {
+                    "when": "down",
+                    "to": "pressed"
+                  },
+                  {
+                    "when": "hover",
+                    "to": "hovered"
+                  }
+                ]
+              },
+              "hovered": {
+                "pose": {
+                  "icon.scale": 1.08
+                },
+                "on": [
+                  {
+                    "when": "down",
+                    "to": "pressed"
+                  },
+                  {
+                    "when": "!hover",
+                    "to": "rest"
+                  }
+                ]
+              },
+              "pressed": {
+                "pose": {
+                  "icon.scale": 0.92
+                },
+                "on": [
+                  {
+                    "when": "!down && hover",
+                    "to": "hovered"
+                  },
+                  {
+                    "when": "!down && !hover",
+                    "to": "rest"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      },
+      "listeners": [
+        {
+          "on": "enter",
+          "set": {
+            "hover": true
+          }
+        },
+        {
+          "on": "leave",
+          "set": {
+            "hover": false,
+            "down": false
+          }
+        },
+        {
+          "on": "down",
+          "set": {
+            "down": true
+          }
+        },
+        {
+          "on": "up",
+          "set": {
+            "down": false
+          }
+        }
+      ]
+    },
+    "trash": {
+      "grid": 20,
+      "glyphs": {
+        "art": {
+          "d": "M15.348 6.496L16.195 6.496C16.245 6.496 16.298 6.438 16.341 6.414C16.704 6.211 16.591 5.695 16.258 5.529C16.224 5.512 16.154 5.468 16.127 5.468L13.122 5.468L13.122 3.774C13.122 3.711 13.086 3.607 13.06 3.548C13.011 3.441 12.985 3.32 12.932 3.211C12.764 2.861 12.197 2.53 11.844 2.53L8.219 2.53C7.697 2.53 7.056 2.973 6.953 3.501C6.934 3.598 6.869 3.716 6.869 3.81L6.869 5.468L3.914 5.468C3.443 5.468 3.263 6.163 3.631 6.416C3.665 6.439 3.73 6.496 3.762 6.496L4.644 6.496L5.621 16.258C5.655 16.59 6.032 17.134 6.354 17.281C6.485 17.34 6.622 17.375 6.753 17.428C6.778 17.438 6.852 17.47 6.87 17.47L13.096 17.47C13.413 17.47 14.011 17.095 14.15 16.789C14.195 16.688 14.248 16.543 14.299 16.45C14.317 16.418 14.364 16.318 14.365 16.301L15.326 6.541C15.349 6.521 15.346 6.531 15.348 6.496ZM7.855 5.468L7.855 3.89C7.855 3.696 8.124 3.495 8.293 3.495L11.668 3.495C11.836 3.495 12.136 3.672 12.136 3.848L12.136 5.422C12.136 5.438 12.135 5.452 12.132 5.468L7.855 5.468ZM5.635 6.496L14.339 6.496L13.71 12.778L13.406 15.975C13.382 16.223 13.123 16.492 12.853 16.492L7.036 16.492C6.881 16.492 6.6 16.17 6.584 16.019L5.634 6.531C5.633 6.516 5.632 6.512 5.635 6.496ZM8.59 14.774C8.719 14.736 8.946 14.578 8.946 14.428L8.946 8.672C8.946 8.396 8.641 8.216 8.394 8.216C8.231 8.299 8.022 8.333 7.981 8.557C7.978 8.577 7.939 8.627 7.939 8.635L7.939 12.751C7.939 12.782 7.937 12.769 7.96 12.788L7.96 14.382C7.96 14.674 8.349 14.812 8.59 14.774ZM11.653 14.774C11.857 14.714 11.916 14.61 12.031 14.449L12.031 8.576C11.878 8.365 11.812 8.216 11.501 8.216C11.256 8.317 11.217 8.324 11.085 8.565C11.076 8.581 11.045 8.65 11.045 8.654L11.045 14.309C11.045 14.618 11.368 14.819 11.653 14.774Z"
+        }
+      },
+      "inputs": {
+        "hover": {
+          "type": "bool"
+        },
+        "down": {
+          "type": "bool"
+        }
+      },
+      "nodes": [
+        {
+          "id": "icon",
+          "type": "group",
+          "pivot": [10, 10],
+          "children": [
+            {
+              "id": "art",
+              "type": "path",
+              "glyph": "art",
+              "fill": {
+                "color": "currentColor",
+                "rule": "evenodd"
+              }
+            }
+          ]
+        }
+      ],
+      "machine": {
+        "layers": {
+          "press": {
+            "initial": "rest",
+            "states": {
+              "rest": {
+                "pose": {
+                  "icon.scale": 1
+                },
+                "on": [
+                  {
+                    "when": "down",
+                    "to": "pressed"
+                  },
+                  {
+                    "when": "hover",
+                    "to": "hovered"
+                  }
+                ]
+              },
+              "hovered": {
+                "pose": {
+                  "icon.scale": 1.08
+                },
+                "on": [
+                  {
+                    "when": "down",
+                    "to": "pressed"
+                  },
+                  {
+                    "when": "!hover",
+                    "to": "rest"
+                  }
+                ]
+              },
+              "pressed": {
+                "pose": {
+                  "icon.scale": 0.92
+                },
+                "on": [
+                  {
+                    "when": "!down && hover",
+                    "to": "hovered"
+                  },
+                  {
+                    "when": "!down && !hover",
+                    "to": "rest"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      },
+      "listeners": [
+        {
+          "on": "enter",
+          "set": {
+            "hover": true
+          }
+        },
+        {
+          "on": "leave",
+          "set": {
+            "hover": false,
+            "down": false
+          }
+        },
+        {
+          "on": "down",
+          "set": {
+            "down": true
+          }
+        },
+        {
+          "on": "up",
+          "set": {
+            "down": false
+          }
+        }
+      ]
+    },
+    "badge": {
+      "grid": 8,
+      "inputs": {
+        "count": {
+          "type": "number",
+          "min": 0,
+          "max": 9
+        },
+        "clear": {
+          "type": "trigger"
+        }
+      },
+      "nodes": [
+        {
+          "id": "dot",
+          "type": "circle",
+          "center": [4, 4],
+          "r": 3,
+          "fill": {
+            "color": "#e44"
+          }
+        }
+      ],
+      "machine": {
+        "layers": {
+          "badge": {
+            "initial": "unread",
+            "states": {
+              "unread": {
+                "pose": {},
+                "on": [
+                  {
+                    "when": "clear",
+                    "to": "cleared"
+                  }
+                ]
+              },
+              "cleared": {
+                "pose": {
+                  "dot.opacity": 0.4
+                },
+                "emit": "cleared"
+              }
+            }
+          }
+        }
+      },
+      "listeners": [
+        {
+          "on": "click",
+          "fire": "clear"
+        }
+      ],
+      "bind": {
+        "dot.r": "min(count, 4)"
+      }
+    }
+  }
+}

package/examples/toolbar.animl ADDED Viewed

@@ -0,0 +1,115 @@
+<anima version="0.1" name="toolbar" title="Shared press icons and bound badge" grid="20" viewBox="0 0 72 24" requires="components bind">
+  <import src="lib/ui.animl" as="ui"/>
+  <number name="unread" default="3" min="0" max="9"/>
+  <component name="bell" grid="20">
+    <glyph name="art"
+        d="M9.493 4.473C9.423 4.49 9.326 4.517 9.256 4.493L8.602 4.66C8.543 4.675 8.464 4.703 8.409 4.73L7.835 5.016L7.366 5.328L6.888 5.748L6.485 6.211C6.428 6.277 6.354 6.377 6.313 6.452L6.009 6.998C5.984 7.043 5.955 7.099 5.939 7.147L5.714 7.805C5.692 7.871 5.666 7.981 5.659 8.05L5.605 8.614L5.605 10.357C5.605 10.417 5.589 10.486 5.579 10.545C5.532 10.817 5.449 11.086 5.338 11.338C5.317 11.387 5.297 11.444 5.27 11.488L4.972 11.98C4.945 12.023 4.907 12.062 4.876 12.102C4.846 12.139 4.818 12.183 4.788 12.218L4.223 12.866C3.945 13.187 3.76 13.793 3.974 14.186C4.04 14.307 4.138 14.394 4.25 14.469C4.326 14.519 4.484 14.621 4.575 14.621L15.38 14.621C15.516 14.621 15.657 14.542 15.762 14.463C16.203 14.128 16.199 13.552 15.949 13.102C15.905 13.022 15.841 12.912 15.778 12.849L15.262 12.333C15.21 12.281 15.161 12.215 15.114 12.156C14.893 11.882 14.696 11.575 14.579 11.241C14.538 11.125 14.522 11.001 14.487 10.883C14.477 10.847 14.455 10.811 14.447 10.776C14.441 10.749 14.445 10.722 14.434 10.697C14.428 10.684 14.398 10.661 14.398 10.658L14.374 8.304C14.35 8.276 14.373 8.247 14.367 8.216L14.24 7.579C14.222 7.485 14.157 7.3 14.115 7.214L13.8 6.572C13.72 6.411 13.607 6.256 13.495 6.115C13.47 6.084 13.444 6.043 13.417 6.017L12.947 5.547C12.927 5.526 12.92 5.529 12.898 5.516C12.883 5.507 12.878 5.481 12.865 5.471L12.413 5.133L11.93 4.86L11.457 4.664L10.924 4.514C10.806 4.481 10.672 4.484 10.551 4.467L10.551 2.953C10.551 2.912 10.512 2.871 10.497 2.835C10.474 2.782 10.458 2.725 10.417 2.681C10.372 2.631 10.297 2.601 10.236 2.578C9.97 2.476 9.694 2.537 9.563 2.807C9.549 2.835 9.494 2.901 9.494 2.929L9.494 4.444C9.494 4.454 9.494 4.463 9.493 4.473ZM4.988 13.492L5.57 12.823L5.897 12.351L6.137 11.92L6.358 11.384C6.407 11.263 6.477 11.018 6.489 10.891L6.545 10.312L6.545 8.664C6.545 8.614 6.568 8.563 6.573 8.512C6.58 8.444 6.573 8.313 6.587 8.257L6.71 7.763C6.721 7.718 6.738 7.661 6.758 7.62L7.019 7.091C7.058 7.011 7.125 6.899 7.182 6.833L7.559 6.399L7.966 6.043C8.038 5.979 8.127 5.927 8.209 5.876C8.503 5.697 8.827 5.552 9.16 5.462C9.221 5.446 9.292 5.422 9.355 5.416L10.001 5.357L10.614 5.413C10.668 5.418 10.728 5.436 10.781 5.449C11.13 5.532 11.472 5.678 11.777 5.869C11.84 5.908 11.913 5.949 11.968 5.997L12.49 6.456C12.575 6.53 12.646 6.628 12.713 6.719C12.983 7.089 13.202 7.524 13.324 7.966C13.343 8.033 13.369 8.111 13.374 8.18L13.422 8.861L13.422 10.639C13.422 10.953 13.543 11.337 13.66 11.626C13.685 11.687 13.709 11.758 13.741 11.815L14.074 12.399L14.402 12.831C14.43 12.868 14.462 12.899 14.492 12.932L14.939 13.423C14.958 13.444 15.03 13.561 15.033 13.584L4.974 13.584L4.988 13.492ZM10.173 17.469C10.219 17.457 10.27 17.455 10.317 17.447C10.414 17.431 10.51 17.412 10.605 17.387C10.759 17.347 10.907 17.289 11.051 17.224C11.154 17.178 11.26 17.133 11.355 17.073C11.622 16.905 11.838 16.646 12.005 16.382C12.185 16.099 12.376 15.685 12.262 15.346C12.18 15.101 11.838 14.963 11.598 15.035C11.507 15.062 11.439 15.133 11.367 15.19C11.348 15.204 11.322 15.216 11.306 15.233C11.289 15.25 11.282 15.299 11.274 15.322C11.231 15.45 11.196 15.587 11.14 15.71C11.101 15.796 11.036 15.869 10.973 15.939C10.712 16.229 10.312 16.462 9.908 16.385C9.864 16.377 9.821 16.362 9.777 16.355C9.721 16.346 9.663 16.346 9.609 16.328C9.567 16.314 9.529 16.285 9.49 16.264C9.432 16.233 9.368 16.208 9.313 16.171C9.28 16.149 9.256 16.115 9.226 16.089C9.2 16.068 9.17 16.053 9.144 16.032C9.08 15.981 9.027 15.917 8.982 15.849C8.89 15.713 8.848 15.547 8.795 15.393C8.777 15.341 8.764 15.275 8.73 15.231C8.676 15.16 8.597 15.123 8.517 15.089C8.441 15.056 8.361 15.024 8.278 15.02C8.155 15.015 8.045 15.079 7.945 15.141C7.929 15.151 7.896 15.183 7.878 15.185C7.831 15.281 7.747 15.389 7.735 15.497C7.722 15.609 7.777 15.702 7.803 15.807C7.818 15.871 7.823 15.939 7.844 16.002C7.873 16.085 7.93 16.162 7.972 16.24C8.027 16.344 8.067 16.457 8.136 16.554C8.356 16.859 8.86 17.208 9.212 17.339C9.521 17.454 9.849 17.458 10.173 17.469Z"/>
+    <bool name="hover"/>
+    <bool name="down"/>
+    <group id="icon" pivot="10 10">
+      <path id="art" glyph="art" fill="currentColor" fill-rule="evenodd"/>
+    </group>
+    <apply template="ui:press"/>
+    <layer name="press" initial="rest">
+      <state name="rest">
+        <pose icon.scale="1"/>
+        <on when="down" to="pressed"/>
+        <on when="hover" to="hovered"/>
+      </state>
+      <state name="hovered">
+        <pose icon.scale="1.08"/>
+        <on when="down" to="pressed"/>
+        <on when="!hover" to="rest"/>
+      </state>
+      <state name="pressed">
+        <pose icon.scale="0.92"/>
+        <on when="!down and hover" to="hovered"/>
+        <on when="!down and !hover" to="rest"/>
+      </state>
+    </layer>
+  </component>
+  <component name="moon" grid="20">
+    <glyph name="art"
+        d="M8.749 4.908C8.749 4.906 8.749 4.904 8.749 4.903C8.751 4.884 8.752 4.873 8.743 4.857L9.111 4.348C9.142 4.305 9.182 4.268 9.211 4.223C9.222 4.208 9.229 4.171 9.241 4.16L9.855 3.545C9.952 3.449 9.968 3.317 10.006 3.192C10.057 3.022 10.043 2.858 9.965 2.698C9.826 2.415 9.594 2.297 9.288 2.287C9.243 2.285 9.154 2.273 9.113 2.285C9.105 2.287 9.097 2.298 9.089 2.302C9.064 2.315 9.035 2.32 9.008 2.324C8.945 2.333 8.853 2.322 8.798 2.335L8.084 2.503L7.626 2.666C7.562 2.689 7.489 2.708 7.428 2.736L6.785 3.036C6.745 3.054 6.747 3.066 6.718 3.085C6.704 3.094 6.683 3.094 6.671 3.101L6.206 3.385C6.137 3.427 6.037 3.493 5.974 3.541L5.465 3.929C5.425 3.96 5.386 4.035 5.335 4.04L4.639 4.736C4.617 4.758 4.61 4.789 4.59 4.815C4.567 4.846 4.535 4.871 4.512 4.899L4.141 5.357C4.133 5.367 4.119 5.384 4.113 5.393L3.652 6.136C3.653 6.153 3.644 6.148 3.638 6.16L3.351 6.731L3.129 7.298L2.965 7.792C2.951 7.835 2.955 7.919 2.918 7.947L2.786 8.568C2.78 8.594 2.787 8.648 2.769 8.663L2.711 9.239C2.708 9.264 2.718 9.281 2.696 9.296L2.696 9.993L2.766 10.645C2.767 10.655 2.778 10.663 2.778 10.672C2.778 10.679 2.772 10.684 2.773 10.691C2.784 10.78 2.807 10.869 2.824 10.956C2.831 10.992 2.834 11.036 2.843 11.07L3.013 11.72L3.197 12.221L3.381 12.64L3.634 13.14C3.66 13.192 3.7 13.233 3.727 13.286C3.735 13.302 3.756 13.374 3.757 13.375L4.086 13.864C4.112 13.901 4.17 13.945 4.17 13.992L4.494 14.404C4.544 14.467 4.603 14.527 4.656 14.588C4.69 14.628 4.722 14.677 4.758 14.712L5.291 15.246C5.305 15.26 5.312 15.27 5.333 15.27L5.757 15.634L6.184 15.939L6.687 16.258L7.356 16.594C7.39 16.612 7.441 16.61 7.464 16.644L8.121 16.886L8.831 17.069L9.312 17.143L10.166 17.217C10.26 17.225 10.372 17.218 10.465 17.201C10.494 17.196 10.523 17.178 10.551 17.175C10.569 17.172 10.59 17.185 10.606 17.183L11.102 17.13L11.629 17.038C11.646 17.035 11.666 17.016 11.687 17.011C11.723 17.002 11.768 17.007 11.801 16.997L12.509 16.784C12.54 16.774 12.585 16.761 12.613 16.748L13.457 16.355L14.109 15.957L14.677 15.525C14.729 15.485 14.777 15.434 14.826 15.391C14.866 15.355 14.915 15.321 14.952 15.284L15.513 14.722C15.525 14.711 15.523 14.693 15.534 14.679C15.547 14.664 15.569 14.654 15.58 14.64L15.901 14.244C15.94 14.196 15.975 14.136 16.013 14.085C16.067 14.009 16.133 13.933 16.173 13.851C16.186 13.825 16.223 13.781 16.24 13.753C16.32 13.624 16.402 13.496 16.471 13.362C16.476 13.353 16.489 13.347 16.492 13.34L16.822 12.684C16.828 12.673 16.827 12.661 16.831 12.652L17.067 12.049L17.261 11.338C17.402 10.818 17.198 10.286 16.59 10.283C16.445 10.283 16.273 10.315 16.15 10.397C16.095 10.435 16.056 10.491 16.018 10.545C16.008 10.559 15.998 10.582 15.988 10.592L15.405 11.175C15.326 11.253 15.185 11.359 15.089 11.412L14.473 11.754C14.4 11.795 14.272 11.851 14.193 11.875L13.719 12.018C13.683 12.028 13.641 12.049 13.605 12.055L13.138 12.137L12.616 12.192C12.592 12.195 12.558 12.198 12.536 12.196L11.819 12.134C11.659 12.121 11.495 12.07 11.343 12.022C11.3 12.009 11.249 11.997 11.209 11.98L10.617 11.723L10.083 11.401C10.037 11.374 9.979 11.336 9.939 11.302L9.373 10.817L8.895 10.26L8.567 9.773L8.271 9.186C8.24 9.125 8.206 9.046 8.189 8.982L8.042 8.421C8.017 8.323 8.011 8.215 7.996 8.115C7.988 8.068 7.97 8.012 7.97 7.967L7.97 7.267C7.97 7.206 7.997 7.145 8.003 7.082C8.007 7.046 8 6.955 8.005 6.933L8.126 6.366C8.139 6.302 8.166 6.234 8.183 6.169C8.195 6.126 8.202 6.073 8.218 6.033L8.423 5.508L8.732 4.894C8.738 4.898 8.743 4.903 8.749 4.908ZM8.748 3.336L8.25 3.95C8.205 4.006 8.164 4.075 8.122 4.135C8.116 4.144 8.099 4.15 8.095 4.156L7.779 4.665C7.742 4.725 7.711 4.793 7.677 4.855C7.654 4.896 7.623 4.939 7.604 4.981L7.418 5.396L7.225 5.89L7.043 6.558C7.04 6.569 7.043 6.578 7.042 6.587L6.96 7.109C6.953 7.153 6.981 7.218 6.938 7.248L6.938 7.961C6.938 7.98 6.938 8.005 6.94 8.022L7.043 8.693C7.05 8.736 7.065 8.793 7.078 8.834L7.283 9.467L7.504 9.97C7.536 10.044 7.582 10.118 7.619 10.192C7.657 10.267 7.692 10.354 7.738 10.423L8.142 11.022L8.459 11.391C8.499 11.437 8.588 11.476 8.578 11.546L9.272 12.142C9.339 12.199 9.417 12.249 9.491 12.298C9.497 12.303 9.502 12.315 9.507 12.318L9.939 12.578C9.982 12.604 10.042 12.61 10.067 12.659L10.658 12.916C10.688 12.929 10.722 12.916 10.745 12.947L11.305 13.113C11.369 13.132 11.45 13.155 11.515 13.16L12.15 13.215L12.717 13.215C12.728 13.215 12.74 13.215 12.751 13.213C12.788 13.169 12.826 13.213 12.868 13.205L13.41 13.111C13.449 13.104 13.493 13.076 13.532 13.096L14.192 12.897L14.641 12.716C14.684 12.698 14.731 12.642 14.781 12.659L15.292 12.376C15.308 12.367 15.317 12.352 15.335 12.355L15.804 12.032C15.902 11.965 15.98 11.874 16.084 11.815C16.031 11.953 15.983 12.098 15.917 12.231C15.913 12.24 15.914 12.254 15.911 12.261L15.609 12.862L15.282 13.389C15.272 13.404 15.255 13.412 15.246 13.425L14.878 13.935C14.848 13.975 14.787 13.984 14.777 14.042L14.106 14.713C14.065 14.754 14.012 14.802 13.966 14.834L13.509 15.148C13.462 15.18 13.413 15.223 13.365 15.249L12.749 15.591L12.138 15.838C12.095 15.856 12.043 15.864 11.999 15.878C11.874 15.915 11.75 15.951 11.623 15.981C11.602 15.986 11.578 16.006 11.56 16.009L10.898 16.125L10.272 16.157L9.701 16.131L9.095 16.037L8.528 15.891L7.98 15.689C7.948 15.678 7.927 15.645 7.889 15.651L7.36 15.385L6.909 15.113L6.399 14.747L5.952 14.364L5.463 13.875L5.078 13.427C5.062 13.408 5.058 13.383 5.043 13.362C5.025 13.339 4.996 13.319 4.981 13.296L4.677 12.845L4.376 12.305L4.162 11.819C4.138 11.763 4.121 11.697 4.1 11.639C4.07 11.558 4.025 11.471 4.006 11.386C4.004 11.375 4.006 11.363 4.003 11.351C3.999 11.339 3.989 11.326 3.986 11.315L3.831 10.725L3.753 10.217C3.744 10.16 3.767 10.091 3.728 10.043L3.728 9.12L3.822 8.527L3.929 8.023C3.933 8.006 3.952 7.984 3.958 7.964C3.986 7.858 4.013 7.742 4.053 7.639L4.328 6.937L4.738 6.197L5.144 5.634C5.156 5.617 5.172 5.617 5.176 5.592L5.644 5.066L6.111 4.653L6.617 4.268L7.211 3.906L7.939 3.566C7.976 3.549 8.015 3.554 8.054 3.539C8.28 3.457 8.515 3.384 8.748 3.336Z"/>
+    <bool name="hover"/>
+    <bool name="down"/>
+    <group id="icon" pivot="10 10">
+      <path id="art" glyph="art" fill="currentColor" fill-rule="evenodd"/>
+    </group>
+    <apply template="ui:press"/>
+    <layer name="press" initial="rest">
+      <state name="rest">
+        <pose icon.scale="1"/>
+        <on when="down" to="pressed"/>
+        <on when="hover" to="hovered"/>
+      </state>
+      <state name="hovered">
+        <pose icon.scale="1.08"/>
+        <on when="down" to="pressed"/>
+        <on when="!hover" to="rest"/>
+      </state>
+      <state name="pressed">
+        <pose icon.scale="0.92"/>
+        <on when="!down and hover" to="hovered"/>
+        <on when="!down and !hover" to="rest"/>
+      </state>
+    </layer>
+  </component>
+  <component name="trash" grid="20">
+    <glyph name="art"
+        d="M15.348 6.496L16.195 6.496C16.245 6.496 16.298 6.438 16.341 6.414C16.704 6.211 16.591 5.695 16.258 5.529C16.224 5.512 16.154 5.468 16.127 5.468L13.122 5.468L13.122 3.774C13.122 3.711 13.086 3.607 13.06 3.548C13.011 3.441 12.985 3.32 12.932 3.211C12.764 2.861 12.197 2.53 11.844 2.53L8.219 2.53C7.697 2.53 7.056 2.973 6.953 3.501C6.934 3.598 6.869 3.716 6.869 3.81L6.869 5.468L3.914 5.468C3.443 5.468 3.263 6.163 3.631 6.416C3.665 6.439 3.73 6.496 3.762 6.496L4.644 6.496L5.621 16.258C5.655 16.59 6.032 17.134 6.354 17.281C6.485 17.34 6.622 17.375 6.753 17.428C6.778 17.438 6.852 17.47 6.87 17.47L13.096 17.47C13.413 17.47 14.011 17.095 14.15 16.789C14.195 16.688 14.248 16.543 14.299 16.45C14.317 16.418 14.364 16.318 14.365 16.301L15.326 6.541C15.349 6.521 15.346 6.531 15.348 6.496ZM7.855 5.468L7.855 3.89C7.855 3.696 8.124 3.495 8.293 3.495L11.668 3.495C11.836 3.495 12.136 3.672 12.136 3.848L12.136 5.422C12.136 5.438 12.135 5.452 12.132 5.468L7.855 5.468ZM5.635 6.496L14.339 6.496L13.71 12.778L13.406 15.975C13.382 16.223 13.123 16.492 12.853 16.492L7.036 16.492C6.881 16.492 6.6 16.17 6.584 16.019L5.634 6.531C5.633 6.516 5.632 6.512 5.635 6.496ZM8.59 14.774C8.719 14.736 8.946 14.578 8.946 14.428L8.946 8.672C8.946 8.396 8.641 8.216 8.394 8.216C8.231 8.299 8.022 8.333 7.981 8.557C7.978 8.577 7.939 8.627 7.939 8.635L7.939 12.751C7.939 12.782 7.937 12.769 7.96 12.788L7.96 14.382C7.96 14.674 8.349 14.812 8.59 14.774ZM11.653 14.774C11.857 14.714 11.916 14.61 12.031 14.449L12.031 8.576C11.878 8.365 11.812 8.216 11.501 8.216C11.256 8.317 11.217 8.324 11.085 8.565C11.076 8.581 11.045 8.65 11.045 8.654L11.045 14.309C11.045 14.618 11.368 14.819 11.653 14.774Z"/>
+    <bool name="hover"/>
+    <bool name="down"/>
+    <group id="icon" pivot="10 10">
+      <path id="art" glyph="art" fill="currentColor" fill-rule="evenodd"/>
+    </group>
+    <apply template="ui:press"/>
+    <layer name="press" initial="rest">
+      <state name="rest">
+        <pose icon.scale="1"/>
+        <on when="down" to="pressed"/>
+        <on when="hover" to="hovered"/>
+      </state>
+      <state name="hovered">
+        <pose icon.scale="1.08"/>
+        <on when="down" to="pressed"/>
+        <on when="!hover" to="rest"/>
+      </state>
+      <state name="pressed">
+        <pose icon.scale="0.92"/>
+        <on when="!down and hover" to="hovered"/>
+        <on when="!down and !hover" to="rest"/>
+      </state>
+    </layer>
+  </component>
+  <component name="badge" grid="8">
+    <number name="count" min="0" max="9"/>
+    <trigger name="clear"/>
+    <circle id="dot" cx="4" cy="4" r="3" fill="#e44"/>
+    <bind target="dot.r" value="min(count, 4)"/>
+    <listener on="click" fire="clear"/>
+    <layer name="badge" initial="unread">
+      <state name="unread">
+        <pose/>
+        <on when="clear" to="cleared"/>
+      </state>
+      <state name="cleared" emit="cleared">
+        <pose dot.opacity="0.4"/>
+      </state>
+    </layer>
+  </component>
+  <instance id="bell" component="bell" y="2"/>
+  <instance id="moon" component="moon" x="24" y="2"/>
+  <instance id="trash" component="trash" x="48" y="2"/>
+  <instance id="badge" component="badge" x="12" count="{unread}"/>
+  <listener on="badge.cleared" set="unread=0"/>
+  <layer name="toolbar" initial="ready">
+    <state name="ready">
+      <pose/>
+      <on when="badge.cleared" to="read"/>
+    </state>
+    <state name="read">
+      <pose/>
+    </state>
+  </layer>
+</anima>

package/examples/trash-ring.png ADDED Viewed

Binary file