nodality 1.3.16 → 1.3.17

package/lib/transition.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.16
+ * nodality v1.3.17
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/validate-nodes.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.16
+ * nodality v1.3.17
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/webmcp-adapter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.16
+ * nodality v1.3.17
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.3.16",
+  "version": "1.3.17",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/schema.json

@@ -161,6 +161,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -433,6 +439,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -705,6 +717,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -977,6 +995,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -1249,6 +1273,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -1521,6 +1551,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -1793,6 +1829,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -2020,6 +2062,12 @@
           "name": "loading",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "marginOp",
           "via": "component"
@@ -2249,6 +2297,12 @@
           "name": "link",
           "via": "mapper"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -2712,6 +2766,12 @@
           "name": "loading",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "map",
           "via": "component"
@@ -3497,6 +3557,12 @@
           "name": "loading",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "map",
           "via": "component"
@@ -4242,6 +4308,12 @@
           "name": "loading",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "map",
           "via": "component"
@@ -4754,6 +4826,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -4958,6 +5036,12 @@
           "name": "length",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "multiple",
           "via": "mapper"
@@ -5022,6 +5106,12 @@
           "via": "component",
           "description": "Accessible name for the field."
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -5121,6 +5211,12 @@
           "via": "mapper",
           "description": "Accessible name for the field."
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -5195,6 +5291,12 @@
           "name": "index",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "name",
           "via": "component",
@@ -5263,6 +5365,12 @@
           "via": "component",
           "description": "Accessible name for the control, written to `aria-label`; a select with no adjacent text has none otherwise."
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -5577,6 +5685,12 @@
           "unit": "keyset",
           "description": "Escape hatch — {key, value} written straight to element.style, or an array of them."
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "margin",
           "via": "component"
@@ -5856,6 +5970,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -6005,6 +6125,12 @@
           "via": "mapper",
           "description": "This element's DOM id. Also what a design node's `target` names, and what `parse` recovers an element by."
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "sticky",
           "via": "component",
@@ -6324,6 +6450,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -6798,6 +6930,12 @@
           "name": "left",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "mar",
           "via": "component",
@@ -7574,6 +7712,12 @@
           "name": "loading",
           "via": "component"
         },
+        {
+          "name": "loop",
+          "via": "component",
+          "unit": "object",
+          "description": "Animate the element forever, with no stylesheet: {keyframes: [{…css}, {…css}], duration: ms, easing, direction, delay}. Keyframes are CSS properties in camelCase, e.g. [{backgroundPosition: \"0px 0\"}, {backgroundPosition: \"99px 0\"}]. Skipped for prefers-reduced-motion and where the browser has no Web Animations (the prerender)."
+        },
         {
           "name": "map",
           "via": "component"

package/scripts/generate-schema.mjs

@@ -361,6 +361,15 @@ for (const type of TYPES) {
   // Read off the element by every mapper regardless of component.
   for (const p of ["type", "id"]) contributed(p, MAPPER);
 
+  // Options the BASE CLASS applies to every component built on it, after the
+  // component's own set() — currently `loop`. Component scans never see them,
+  // because they are read in animator.js. Credited only where the type has no
+  // parameter of that name already: `video` has its own boolean `loop`.
+  const ANIMATOR = join(ROOT, "layout", "animator.js");
+  const onAnimator = files.some((f) => { try { return /extends\s+Animator\b/.test(readFileSync(f, "utf8")); } catch { return false; } });
+  // And only where the element's options reach the component at all.
+  if (onAnimator && forwardsElement) for (const p of ["loop"]) if (!params.has(p)) contributed(p, ANIMATOR);
+
   // NOTE. A `settable` flag was attempted here and removed. The question it
   // was meant to answer -- which of these parameters an AUTHOR can set on the
   // element, as opposed to which the components READ -- is real and still

package/skills/nodality/SKILL.md

@@ -205,6 +205,11 @@ A complete navigation graph is one node:
   element/op (extend the library), or the `keySet` option on an element
   (`keySet: { key, value }`) for one custom CSS property. Note the
   spelling: `keySet`, capital S.
+- **No CSS in the page either.** No `<style>` rules, no `@keyframes`, no
+  stylesheet files. Anything that moves on its own takes `loop` on the element —
+  `loop: { keyframes: [{…}, {…}], duration }` runs forever through the Web
+  Animations API and holds still for reduced motion. If something cannot be
+  expressed, extend the library.
 - **Elements take `text`, never `value`.**
 - **Every element that a node targets needs an `id`.** Short and stable
   (`"hero"`, `"topnav"`); ids are the joint between the two arrays and