@zerops/web-components 0.0.1 → 0.1.0

package/README.md

@@ -111,6 +111,36 @@ declare module 'react' {
 | `deployed` | `string` | Deploy clicked; the app URL that was opened |
 | `detailOpened` | — | A detail/title link was clicked |
 
+## `<zerops-network-diagram>`
+
+The homepage's animated network diagram (project shell, infra core, L7 routing, live request traces) for any recipe environment:
+
+```js
+import '@zerops/web-components/network-diagram';
+```
+
+```html
+<!-- self-fetching -->
+<zerops-network-diagram slug="zerops-showcase" environment="highly-available-production"></zerops-network-diagram>
+```
+
+```js
+// captured-data mode — same snapshot the recipe card uses
+import showcase from '@zerops/web-components/recipes/zerops-showcase.json';
+const el = document.querySelector('zerops-network-diagram');
+await customElements.whenDefined('zerops-network-diagram');
+el.recipeData = showcase;
+```
+
+| Property | Attribute | Default | Purpose |
+|---|---|---|---|
+| `slug` | `slug` | — | Catalog slug to self-fetch |
+| `recipeData` | `recipe-data` (JSON string) | — | Captured recipe; wins over `slug` |
+| `environment` | `environment` | `highly-available-production` | Environment to draw (falls back to the recipe default) |
+| `apiBase` | `api-base` | `https://api.zerops.io` | Public API origin |
+
+The trace animation pauses off-viewport and respects `prefers-reduced-motion`.
+
 ## Known caveats
 
 - The stylesheet includes a CSS-layered normalize that can nudge host-page base styles.

package/chunks/{browser-DeGg1Z-r.js → browser-CRtUYvv5.js}

@@ -1,7 +1,7 @@
 var At = Object.defineProperty;
 var Pt = (n, e, t) => e in n ? At(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
 var l = (n, e, t) => Pt(n, typeof e != "symbol" ? e + "" : e, t);
-import { R as T, ɵ as Nt } from "./register-C5_R6XU0.js";
+import { W as T, k as Nt } from "./recipe-fetch-BEQGCaPU.js";
 var S = /* @__PURE__ */ (function(n) {
   return n[n.State = 0] = "State", n[n.Transition = 1] = "Transition", n[n.Sequence = 2] = "Sequence", n[n.Group = 3] = "Group", n[n.Animate = 4] = "Animate", n[n.Keyframes = 5] = "Keyframes", n[n.Style = 6] = "Style", n[n.Trigger = 7] = "Trigger", n[n.Reference = 8] = "Reference", n[n.AnimateChild = 9] = "AnimateChild", n[n.AnimateRef = 10] = "AnimateRef", n[n.Query = 11] = "Query", n[n.Stagger = 12] = "Stagger", n;
 })(S || {});
@@ -172,7 +172,7 @@ class ut {
     t.forEach((s) => s()), t.length = 0;
   }
 }
-const Re = "!";
+const De = "!";
 function He(n) {
   return new T(3e3, !1);
 }
@@ -182,10 +182,10 @@ function kt() {
 function Ft() {
   return new T(3101, !1);
 }
-function Rt(n) {
+function Dt(n) {
   return new T(3001, !1);
 }
-function Dt(n) {
+function Rt(n) {
   return new T(3003, !1);
 }
 function Ot(n) {
@@ -221,10 +221,10 @@ function Vt() {
 function Gt() {
   return new T(3202, !1);
 }
-function Ut() {
+function Wt() {
   return new T(3013, !1);
 }
-function Wt(n) {
+function Ut(n) {
   return new T(3014, !1);
 }
 function jt(n) {
@@ -276,7 +276,7 @@ function os(n, e) {
   return new T(3505, !1);
 }
 const ls = /* @__PURE__ */ new Set(["-moz-outline-radius", "-moz-outline-radius-bottomleft", "-moz-outline-radius-bottomright", "-moz-outline-radius-topleft", "-moz-outline-radius-topright", "-ms-grid-columns", "-ms-grid-rows", "-webkit-line-clamp", "-webkit-text-fill-color", "-webkit-text-stroke", "-webkit-text-stroke-color", "accent-color", "all", "backdrop-filter", "background", "background-color", "background-position", "background-size", "block-size", "border", "border-block-end", "border-block-end-color", "border-block-end-width", "border-block-start", "border-block-start-color", "border-block-start-width", "border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius", "border-bottom-width", "border-color", "border-end-end-radius", "border-end-start-radius", "border-image-outset", "border-image-slice", "border-image-width", "border-inline-end", "border-inline-end-color", "border-inline-end-width", "border-inline-start", "border-inline-start-color", "border-inline-start-width", "border-left", "border-left-color", "border-left-width", "border-radius", "border-right", "border-right-color", "border-right-width", "border-start-end-radius", "border-start-start-radius", "border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-width", "border-width", "bottom", "box-shadow", "caret-color", "clip", "clip-path", "color", "column-count", "column-gap", "column-rule", "column-rule-color", "column-rule-width", "column-width", "columns", "filter", "flex", "flex-basis", "flex-grow", "flex-shrink", "font", "font-size", "font-size-adjust", "font-stretch", "font-variation-settings", "font-weight", "gap", "grid-column-gap", "grid-gap", "grid-row-gap", "grid-template-columns", "grid-template-rows", "height", "inline-size", "input-security", "inset", "inset-block", "inset-block-end", "inset-block-start", "inset-inline", "inset-inline-end", "inset-inline-start", "left", "letter-spacing", "line-clamp", "line-height", "margin", "margin-block-end", "margin-block-start", "margin-bottom", "margin-inline-end", "margin-inline-start", "margin-left", "margin-right", "margin-top", "mask", "mask-border", "mask-position", "mask-size", "max-block-size", "max-height", "max-inline-size", "max-lines", "max-width", "min-block-size", "min-height", "min-inline-size", "min-width", "object-position", "offset", "offset-anchor", "offset-distance", "offset-path", "offset-position", "offset-rotate", "opacity", "order", "outline", "outline-color", "outline-offset", "outline-width", "padding", "padding-block-end", "padding-block-start", "padding-bottom", "padding-inline-end", "padding-inline-start", "padding-left", "padding-right", "padding-top", "perspective", "perspective-origin", "right", "rotate", "row-gap", "scale", "scroll-margin", "scroll-margin-block", "scroll-margin-block-end", "scroll-margin-block-start", "scroll-margin-bottom", "scroll-margin-inline", "scroll-margin-inline-end", "scroll-margin-inline-start", "scroll-margin-left", "scroll-margin-right", "scroll-margin-top", "scroll-padding", "scroll-padding-block", "scroll-padding-block-end", "scroll-padding-block-start", "scroll-padding-bottom", "scroll-padding-inline", "scroll-padding-inline-end", "scroll-padding-inline-start", "scroll-padding-left", "scroll-padding-right", "scroll-padding-top", "scroll-snap-coordinate", "scroll-snap-destination", "scrollbar-color", "shape-image-threshold", "shape-margin", "shape-outside", "tab-size", "text-decoration", "text-decoration-color", "text-decoration-thickness", "text-emphasis", "text-emphasis-color", "text-indent", "text-shadow", "text-underline-offset", "top", "transform", "transform-origin", "translate", "vertical-align", "visibility", "width", "word-spacing", "z-index", "zoom"]);
-function W(n) {
+function U(n) {
   switch (n.length) {
     case 0:
       return new ie();
@@ -295,7 +295,7 @@ function ct(n, e, t = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map())
       let d = _, g = E;
       if (_ !== "offset")
         switch (d = n.normalizePropertyName(d, i), g) {
-          case Re:
+          case De:
             g = t.get(_);
             break;
           case G:
@@ -311,7 +311,7 @@ function ct(n, e, t = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map())
     throw Jt();
   return r;
 }
-function De(n, e, t, s) {
+function Re(n, e, t, s) {
   switch (e) {
     case "start":
       n.onStart(() => s(t && Ee(t, "start", n)));
@@ -445,7 +445,7 @@ function te(n) {
 function _s(n, e, t) {
   const s = e.params || {}, i = pt(n);
   i.length && i.forEach((r) => {
-    s.hasOwnProperty(r) || t.push(Rt());
+    s.hasOwnProperty(r) || t.push(Dt());
   });
 }
 const Ce = /* @__PURE__ */ new RegExp(`${dt}\\s*(.+?)\\s*${ds}`, "g");
@@ -462,7 +462,7 @@ function pt(n) {
 function ne(n, e, t) {
   const s = `${n}`, i = s.replace(Ce, (r, a) => {
     let o = e[a];
-    return o == null && (t.push(Dt()), o = ""), o.toString();
+    return o == null && (t.push(Rt()), o = ""), o.toString();
   });
   return i == s ? n : i;
 }
@@ -631,10 +631,10 @@ function Ze(n, e) {
 }
 const gt = ":self", Fs = /* @__PURE__ */ new RegExp(`s*${gt}s*,?`, "g");
 function Ke(n, e, t, s) {
-  return new Rs(n).build(e, t, s);
+  return new Ds(n).build(e, t, s);
 }
 const xe = "";
-class Rs {
+class Ds {
   constructor(e) {
     l(this, "_driver");
     this._driver = e;
@@ -838,7 +838,7 @@ class Rs {
   visitQuery(e, t) {
     const s = t.currentQuerySelector, i = e.options || {};
     t.queryCount++, t.currentQuery = e;
-    const [r, a] = Ds(e.selector);
+    const [r, a] = Rs(e.selector);
     t.currentQuerySelector = s.length ? s + " " + r : r, L(t.collectedStyles, t.currentQuerySelector, /* @__PURE__ */ new Map());
     const o = M(this, te(e.animation), t);
     return t.currentQuery = null, t.currentQuerySelector = s, {
@@ -853,7 +853,7 @@ class Rs {
     };
   }
   visitStagger(e, t) {
-    t.currentQuery || t.errors.push(Ut());
+    t.currentQuery || t.errors.push(Wt());
     const s = e.timings === "full" ? {
       duration: 0,
       delay: 0,
@@ -867,7 +867,7 @@ class Rs {
     };
   }
 }
-function Ds(n) {
+function Rs(n) {
   const e = !!n.split(/\s*,\s*/).find((t) => t == gt);
   return e && (n = n.replace(Fs, "")), n = n.replace(/@\*/g, fe).replace(/@\w+/g, (t) => fe + "-" + t.slice(1)).replace(/:animating/g, Pe), [n, e];
 }
@@ -1191,7 +1191,7 @@ class Qe {
       let u = this._driver.query(this.element, e, h);
       s !== 0 && (u = s < 0 ? u.slice(u.length + s, u.length) : u.slice(0, s)), o.push(...u);
     }
-    return !r && o.length == 0 && a.push(Wt()), o;
+    return !r && o.length == 0 && a.push(Ut()), o;
   }
 }
 class ge {
@@ -1262,7 +1262,7 @@ class ge {
   }
   setStyles(e, t, s, i) {
     t && this._previousKeyframe.set("easing", t);
-    const r = i && i.params || {}, a = Us(e, this._globalTimelineStyles);
+    const r = i && i.params || {}, a = Ws(e, this._globalTimelineStyles);
     for (let [o, h] of a) {
       const u = ne(h, r, s);
       this._pendingStyles.set(o, u), this._localTimelineStyles.has(o) || this._backFill.set(o, this._globalTimelineStyles.get(o) ?? G), this._updateStyle(o, u);
@@ -1301,7 +1301,7 @@ class ge {
     this._keyframes.forEach((o, h) => {
       const u = new Map([...this._backFill, ...o]);
       u.forEach((c, f) => {
-        c === Re ? e.add(f) : c === G && t.add(f);
+        c === De ? e.add(f) : c === G && t.add(f);
       }), s || u.set("offset", h / this.duration), i.push(u);
     });
     const r = [...e.values()], a = [...t.values()];
@@ -1355,7 +1355,7 @@ function et(n, e = 3) {
   const t = Math.pow(10, e - 1);
   return Math.round(n * t) / t;
 }
-function Us(n, e) {
+function Ws(n, e) {
   const t = /* @__PURE__ */ new Map();
   let s;
   return n.forEach((i) => {
@@ -1395,7 +1395,7 @@ class _t {
     this._triggerName = e, this.ast = t, this._stateStyles = s;
   }
   match(e, t, s, i) {
-    return Ws(this.ast.matchers, e, t, s, i);
+    return Us(this.ast.matchers, e, t, s, i);
   }
   buildStyles(e, t, s) {
     let i = this._stateStyles.get("*");
@@ -1406,18 +1406,18 @@ class _t {
       params: St(g, E),
       delay: this.ast.options?.delay
     }, B = c ? [] : qe(e, t, this.ast.animation, r, a, d, w, Z, u, f);
-    let R = 0;
-    return B.forEach((D) => {
-      R = Math.max(D.duration + D.delay, R);
-    }), f.length ? tt(t, this._triggerName, s, i, C, d, w, [], [], P, F, R, f) : (B.forEach((D) => {
-      const j = D.element, x = L(P, j, /* @__PURE__ */ new Set());
-      D.preStyleProps.forEach((H) => x.add(H));
+    let D = 0;
+    return B.forEach((R) => {
+      D = Math.max(R.duration + R.delay, D);
+    }), f.length ? tt(t, this._triggerName, s, i, C, d, w, [], [], P, F, D, f) : (B.forEach((R) => {
+      const j = R.element, x = L(P, j, /* @__PURE__ */ new Set());
+      R.preStyleProps.forEach((H) => x.add(H));
       const Ve = L(F, j, /* @__PURE__ */ new Set());
-      D.postStyleProps.forEach((H) => Ve.add(H)), j !== t && A.add(j);
-    }), tt(t, this._triggerName, s, i, C, d, w, B, [...A.values()], P, F, R));
+      R.postStyleProps.forEach((H) => Ve.add(H)), j !== t && A.add(j);
+    }), tt(t, this._triggerName, s, i, C, d, w, B, [...A.values()], P, F, D));
   }
 }
-function Ws(n, e, t, s, i) {
+function Us(n, e, t, s, i) {
   return n.some((r) => r(e, t, s, i));
 }
 function St(n, e) {
@@ -1530,7 +1530,7 @@ class Js {
     const h = a.map((c) => {
       const f = o.get(c.element);
       return this._buildPlayer(c, /* @__PURE__ */ new Map(), f);
-    }), u = W(h);
+    }), u = U(h);
     return this._playersById.set(e, u), u.onDestroy(() => this.destroy(e)), this.players.push(u), u;
   }
   destroy(e) {
@@ -1547,7 +1547,7 @@ class Js {
   }
   listen(e, t, s, i) {
     const r = Oe(t, "", "", "");
-    return De(this._getPlayer(e), s, r, i), () => {
+    return Re(this._getPlayer(e), s, r, i), () => {
     };
   }
   command(e, t, s, i) {
@@ -1747,7 +1747,7 @@ class ni {
           c && o.push(c);
         }
       }), o.length)
-        return this._engine.markElementAsRemoved(this.id, e, !0, t, a), s && W(o).onDone(() => this._engine.processLeaveNode(e)), !0;
+        return this._engine.markElementAsRemoved(this.id, e, !0, t, a), s && U(o).onDone(() => this._engine.processLeaveNode(e)), !0;
     }
     return !1;
   }
@@ -1808,7 +1808,7 @@ class ni {
       a && a.forEach((o) => {
         if (o.name == s.triggerName) {
           const h = Oe(r, s.triggerName, s.fromState.value, s.toState.value);
-          h._data = e, De(s.player, o.phase, h, o.callback);
+          h._data = e, Re(s.player, o.phase, h, o.callback);
         }
       }), i.markedForDestroy ? this._engine.afterFlush(() => {
         i.destroy();
@@ -1980,7 +1980,7 @@ class ri {
   whenRenderingDone() {
     return new Promise((e) => {
       if (this.players.length)
-        return W(this.players).onDone(() => e());
+        return U(this.players).onDone(() => e());
       e();
     });
   }
@@ -2020,7 +2020,7 @@ class ri {
       }
     if (this.totalQueuedPlayers = 0, this.collectedEnterElements.length = 0, this.collectedLeaveElements.length = 0, this._flushFns.forEach((s) => s()), this._flushFns = [], this._whenQuietFns.length) {
       const s = this._whenQuietFns;
-      this._whenQuietFns = [], t.length ? W(t).onDone(() => {
+      this._whenQuietFns = [], t.length ? U(t).onDone(() => {
         s.forEach((i) => i());
       }) : s.forEach((i) => i());
     }
@@ -2080,7 +2080,7 @@ class ri {
             return;
           }
         }
-        const q = !f || !this.driver.containsElement(f, N), O = F.get(N), U = d.get(N), v = this._buildInstruction(y, s, U, O, q);
+        const q = !f || !this.driver.containsElement(f, N), O = F.get(N), W = d.get(N), v = this._buildInstruction(y, s, W, O, q);
         if (v.errors && v.errors.length) {
           B.push(v);
           return;
@@ -2093,10 +2093,10 @@ class ri {
           b.onStart(() => J(N, v.fromStyles)), b.onDestroy(() => Q(N, v.toStyles)), i.push(b);
           return;
         }
-        const We = [];
+        const Ue = [];
         v.timelines.forEach((k) => {
-          k.stretchStartingKeyframe = !0, this.disabledNodes.has(k.element) || We.push(k);
-        }), v.timelines = We, s.append(N, v.timelines);
+          k.stretchStartingKeyframe = !0, this.disabledNodes.has(k.element) || Ue.push(k);
+        }), v.timelines = Ue, s.append(N, v.timelines);
         const vt = {
           instruction: v,
           player: b,
@@ -2118,14 +2118,14 @@ class ri {
         m.push(os(p.triggerName, p.errors));
       }), Z.forEach((p) => p.destroy()), this.reportError(m);
     }
-    const R = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map();
+    const D = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
     a.forEach((m) => {
       const p = m.element;
-      s.has(p) && (D.set(p, p), this._beforeAnimationBuild(m.player.namespaceId, m.instruction, R));
+      s.has(p) && (R.set(p, p), this._beforeAnimationBuild(m.player.namespaceId, m.instruction, D));
     }), i.forEach((m) => {
       const p = m.element;
       this._getPreviousPlayers(p, !1, m.namespaceId, m.triggerName, null).forEach((b) => {
-        L(R, p, []).push(b), b.destroy();
+        L(D, p, []).push(b), b.destroy();
       });
     });
     const j = w.filter((m) => ot(m, h, u)), x = /* @__PURE__ */ new Map();
@@ -2134,12 +2134,12 @@ class ri {
     });
     const H = /* @__PURE__ */ new Map();
     _.forEach((m, p) => {
-      rt(H, this.driver, new Set(m), h, Re);
+      rt(H, this.driver, new Set(m), h, De);
     }), j.forEach((m) => {
       const p = x.get(m), y = H.get(m);
       x.set(m, new Map([...p?.entries() ?? [], ...y?.entries() ?? []]));
     });
-    const _e = [], Ge = [], Ue = {};
+    const _e = [], Ge = [], We = {};
     a.forEach((m) => {
       const {
         element: p,
@@ -2151,33 +2151,33 @@ class ri {
           y.onDestroy(() => Q(p, b.toStyles)), y.disabled = !0, y.overrideTotalTime(b.totalTime), i.push(y);
           return;
         }
-        let N = Ue;
-        if (D.size > 1) {
+        let N = We;
+        if (R.size > 1) {
           let O = p;
-          const U = [];
+          const W = [];
           for (; O = O.parentNode; ) {
-            const v = D.get(O);
+            const v = R.get(O);
             if (v) {
               N = v;
               break;
             }
-            U.push(O);
+            W.push(O);
           }
-          U.forEach((v) => D.set(v, N));
+          W.forEach((v) => R.set(v, N));
         }
-        const q = this._buildAnimation(y.namespaceId, b, R, r, H, x);
-        if (y.setRealPlayer(q), N === Ue)
+        const q = this._buildAnimation(y.namespaceId, b, D, r, H, x);
+        if (y.setRealPlayer(q), N === We)
           _e.push(y);
         else {
           const O = this.playersByElement.get(N);
-          O && O.length && (y.parentPlayer = W(O)), i.push(y);
+          O && O.length && (y.parentPlayer = U(O)), i.push(y);
         }
       } else
         J(p, b.fromStyles), y.onDestroy(() => Q(p, b.toStyles)), Ge.push(y), c.has(p) && i.push(y);
     }), Ge.forEach((m) => {
       const p = r.get(m.element);
       if (p && p.length) {
-        const y = W(p);
+        const y = U(p);
         m.setRealPlayer(y);
       }
     }), i.forEach((m) => {
@@ -2191,8 +2191,8 @@ class ri {
         let q = o.get(p);
         q && q.length && b.push(...q);
         let O = this.driver.query(p, Pe, !0);
-        for (let U = 0; U < O.length; U++) {
-          let v = o.get(O[U]);
+        for (let W = 0; W < O.length; W++) {
+          let v = o.get(O[W]);
           v && v.length && b.push(...v);
         }
       }
@@ -2246,20 +2246,20 @@ class ri {
       c.add(g);
       const w = g[K];
       if (w && w.removedBeforeQueried) return new ie(d.duration, d.delay);
-      const A = g !== h, P = ui((s.get(g) || si).map((R) => R.getRealPlayer())).filter((R) => {
-        const D = R;
-        return D.element ? D.element === g : !1;
+      const A = g !== h, P = ui((s.get(g) || si).map((D) => D.getRealPlayer())).filter((D) => {
+        const R = D;
+        return R.element ? R.element === g : !1;
       }), F = r.get(g), C = a.get(g), Z = ct(this._normalizer, d.keyframes, F, C), B = this._buildPlayer(d, Z, P);
       if (d.subTimeline && i && f.add(g), A) {
-        const R = new Fe(e, o, g);
-        R.setRealPlayer(B), u.push(R);
+        const D = new Fe(e, o, g);
+        D.setRealPlayer(B), u.push(D);
       }
       return B;
     });
     u.forEach((d) => {
       L(this.playersByQueriedElement, d.element, []).push(d), d.onDone(() => ai(this.playersByQueriedElement, d.element, d));
     }), c.forEach((d) => z(d, $e));
-    const _ = W(E);
+    const _ = U(E);
     return _.onDestroy(() => {
       c.forEach((d) => ee(d, $e)), Q(h, t.toStyles);
     }), f.forEach((d) => {
@@ -2288,7 +2288,7 @@ class Fe {
   }
   setRealPlayer(e) {
     this._containsRealPlayer || (this._player = e, this._queuedCallbacks.forEach((t, s) => {
-      t.forEach((i) => De(e, s, void 0, i));
+      t.forEach((i) => Re(e, s, void 0, i));
     }), this._queuedCallbacks.clear(), this._containsRealPlayer = !0, this.overrideTotalTime(e.totalTime), this.queued = !1);
   }
   getRealPlayer() {
@@ -2409,7 +2409,7 @@ function ee(n, e) {
   n.classList?.remove(e);
 }
 function hi(n, e, t) {
-  W(t).onDone(() => n.processLeaveNode(e));
+  U(t).onDone(() => n.processLeaveNode(e));
 }
 function ui(n) {
   const e = [];