@fynd-design-engineering/fynd-one-v2 3.4.63 → 3.4.64

package/dist/playbook-2026/index.js

@@ -1,536 +1 @@
-"use strict";
-(() => {
-  // bin/live-reload.js
-  if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
-    new EventSource(`${"http://localhost:3000"}/esbuild`).addEventListener(
-      "change",
-      () => location.reload()
-    );
-  } else {
-  }
-
-  // src/playbook-2026/index.ts
-  document.addEventListener("DOMContentLoaded", () => {
-    const gsap = window.gsap;
-    if (!gsap) {
-      console.error("ERROR: GSAP not loaded!");
-      return;
-    }
-    const ScrollTrigger = window.ScrollTrigger;
-    if (ScrollTrigger) {
-      gsap.registerPlugin(ScrollTrigger);
-    }
-    const errorConnectors = document.querySelectorAll("[entity-error-connector]");
-    const successConnectors = document.querySelectorAll("[entity-success-connector]");
-    const entityNames = document.querySelectorAll("[entity-name]");
-    if (entityNames.length === 0) {
-      console.error("ERROR: No entities found with [entity-name] attribute");
-      return;
-    }
-    const store = document.querySelector("[playbook='store']");
-    const storeFoundation = document.querySelector("[playbook='store-foundation']");
-    const foundationBase = document.querySelector("[playbook='foundation-base']");
-    const spacer = document.querySelector("[playbook='spacer']");
-    const title1 = document.querySelector("[playbook='title-1']");
-    const title2 = document.querySelector("[playbook='title-2']");
-    const title3 = document.querySelector("[playbook='title-3']");
-    const counter = document.querySelector("[playbook='counter']");
-    const counterText = document.querySelector("[playbook='counter-text']");
-    const grid = document.querySelector("[playbook='grid']");
-    const question = document.querySelector("[playbook='question']");
-    const button = document.querySelector("[playbook='button']");
-    const counterValue = { value: 2341100 };
-    if (counterText) {
-      counterText.textContent = "2341700";
-    }
-    let counterAnimation = null;
-    const startCounterAnimation = () => {
-      if (counterAnimation) counterAnimation.kill();
-      counterAnimation = gsap.timeline({ repeat: -1 });
-      if (counterText) {
-        counterAnimation.to(counterValue, {
-          value: 2341728,
-          duration: 20,
-          ease: "power2.out",
-          onUpdate: () => {
-            counterText.textContent = Math.floor(counterValue.value).toLocaleString();
-          }
-        }).set(counterValue, { value: 2341100 });
-      }
-    };
-    const pairs = [];
-    entityNames.forEach((nameEl) => {
-      const id = nameEl.getAttribute("entity-name");
-      if (!id) return;
-      const matchingSuccessConnector = Array.from(successConnectors).find(
-        (connector) => connector.getAttribute("entity-success-connector") === id
-      );
-      const matchingErrorConnector = Array.from(errorConnectors).find(
-        (connector) => connector.getAttribute("entity-error-connector") === id
-      );
-      if (matchingSuccessConnector) {
-        const successPath = matchingSuccessConnector.querySelector("path");
-        const errorPath = matchingErrorConnector?.querySelector("path") || null;
-        const successStates = Array.from(nameEl.querySelectorAll('[entity-state="success"]'));
-        const errorStates = Array.from(nameEl.querySelectorAll('[entity-state="error"]'));
-        if (successPath) {
-          pairs.push({
-            name: nameEl,
-            connector: matchingSuccessConnector,
-            path: successPath,
-            errorConnector: matchingErrorConnector || null,
-            errorPath,
-            successState: successStates[0] || null,
-            successStates,
-            errorStates,
-            id
-          });
-        }
-      }
-    });
-    if (pairs.length === 0) {
-      console.error("ERROR: No pairs created!");
-      return;
-    }
-    console.log(`\u2713 Created ${pairs.length} animation pairs`);
-    const getBreakpointValues = (breakpointName) => {
-      const width = window.innerWidth;
-      const breakpoints = {
-        storeFoundation: {
-          mobile: { scale: 3.8, x: "-53px", y: "-24px" },
-          tablet: { scale: 3, x: "0px", y: "-100px" },
-          desktop: { scale: 2.8, x: "-400px", y: "-50px" }
-        },
-        grid: {
-          mobile: { scale: 1.5, x: "30px" },
-          tablet: { scale: 1.8, x: "45px" },
-          desktop: { scale: 2.1, x: "60px" }
-        },
-        counter: {
-          mobile: { scale: 1, y: "-100px" },
-          tablet: { scale: 1.1, y: "-180px" },
-          desktop: { scale: 1.2, y: "-100px" }
-        },
-        question: {
-          mobile: { scale: 1, y: "-100px" },
-          tablet: { scale: 1.1, y: "-180px" },
-          desktop: { scale: 1.2, y: "-100px" }
-        },
-        spcerSet: {
-          mobile: { height: "20px" },
-          tablet: { height: "100px" },
-          desktop: { height: "240px" }
-        },
-        storeAndStoreFoundationInitial: {
-          mobile: { scale: 3, x: "-40px", y: "20px" },
-          tablet: { scale: 2, x: "0px", y: "0px" },
-          desktop: { scale: 1.5, x: "0px", y: "0px" }
-        },
-        storeAndStoreFoundationFinal: {
-          mobile: { scale: 1, x: "0px", y: "0px" },
-          tablet: { scale: 1, x: "0px", y: "0px" },
-          desktop: { scale: 1, x: "0px", y: "0px" }
-        }
-        // Add more element configs as needed
-      };
-      const getDeviceType = () => {
-        if (width < 480) return "mobile";
-        if (width < 992) return "tablet";
-        return "desktop";
-      };
-      return breakpoints[breakpointName]?.[getDeviceType()] || {};
-    };
-    const shuffledPairs = pairs.sort(() => Math.random() - 0.5);
-    const allPaths = shuffledPairs.map((p) => p.path).filter(Boolean);
-    const allNames = shuffledPairs.map((p) => p.name).filter(Boolean);
-    const allSuccessStatesStep4 = shuffledPairs.flatMap((p) => p.successStates);
-    gsap.set([...errorConnectors, ...successConnectors], { opacity: 0 });
-    if (store && storeFoundation) gsap.set([store, storeFoundation], { ...getBreakpointValues("storeAndStoreFoundationInitial") });
-    if (foundationBase) gsap.set(foundationBase, { opacity: 0 });
-    if (entityNames.length > 0) gsap.set(entityNames, { opacity: 0, scale: 0.5 });
-    if (spacer) gsap.set(spacer, { ...getBreakpointValues("spcerSet") });
-    if (grid) gsap.set(grid, { scale: 2 });
-    if (question) gsap.set(question, { ...getBreakpointValues("question") });
-    if (counter) gsap.set(counter, { ...getBreakpointValues("counter") });
-    if (title1) gsap.set(title1, { y: 0 });
-    if (title2) gsap.set(title2, { y: 40, opacity: 0, filter: "blur(10px)" });
-    if (title3) gsap.set(title3, { y: 40, opacity: 0, filter: "blur(10px)" });
-    shuffledPairs.forEach(({ path, errorPath, successStates, errorStates }) => {
-      if (!path) return;
-      try {
-        const length = path.getTotalLength();
-        gsap.set(path, {
-          strokeDasharray: length,
-          strokeDashoffset: length
-        });
-      } catch (e) {
-        console.warn("WARNING: Could not get SVG path length");
-      }
-      if (errorPath) gsap.set(errorPath, { opacity: 0 });
-      successStates.forEach((state) => {
-        if (state) gsap.set(state, { opacity: 0 });
-      });
-      errorStates.forEach((state) => {
-        if (state) gsap.set(state, { opacity: 0 });
-      });
-    });
-    const tl = gsap.timeline({
-      scrollTrigger: {
-        trigger: "#scroll",
-        start: "top top",
-        end: "+=5000vh",
-        scrub: 2.5,
-        pin: true,
-        fastScrollSensitivity: 1
-      }
-    });
-    if (store && storeFoundation) {
-      tl.to([store, storeFoundation], { ...getBreakpointValues("storeAndStoreFoundationFinal") });
-    }
-    if (spacer) {
-      tl.to(spacer, {
-        height: "0px",
-        duration: 0.4,
-        ease: "power3.out"
-      }, "<");
-    }
-    if (grid) {
-      tl.to(grid, {
-        scale: 1,
-        duration: 0.4,
-        ease: "power3.out"
-      }, "<");
-    }
-    if (foundationBase) {
-      tl.to(foundationBase, {
-        opacity: 1,
-        duration: 0.2,
-        ease: "power3.out"
-      }, "-=0.1");
-    }
-    if (successConnectors.length > 0) {
-      tl.set(successConnectors, { opacity: 1 });
-    }
-    if (allPaths.length > 0) {
-      tl.to(allPaths, {
-        strokeDashoffset: 0,
-        duration: 0.8,
-        // Increased from 0.3 to see full path
-        ease: "power3.out"
-      }, "+=0.05");
-    }
-    if (allNames.length > 0) {
-      tl.to(allNames, {
-        opacity: 1,
-        scale: 1,
-        duration: 0.2,
-        ease: "power3.out",
-        delay: 0.2
-      }, "-=0.6");
-    }
-    if (allSuccessStatesStep4.length > 0) {
-      tl.to(allSuccessStatesStep4, {
-        opacity: 1,
-        duration: 0.2,
-        ease: "power3.out"
-      }, "-=0.6");
-    }
-    tl.add(() => {
-      console.log("\u2705 Step 4 Complete: All pairs set to SUCCESS state");
-      shuffledPairs.forEach((pair) => {
-        gsap.set(pair.path, { opacity: 1 });
-        gsap.set(pair.connector, { opacity: 1 });
-        pair.successStates.forEach((state) => {
-          gsap.set(state, { opacity: 1 });
-        });
-        if (pair.errorPath) {
-          gsap.set(pair.errorPath, { opacity: 0 });
-        }
-        if (pair.errorConnector) {
-          gsap.set(pair.errorConnector, { opacity: 0 });
-        }
-        pair.errorStates.forEach((state) => {
-          gsap.set(state, { opacity: 0 });
-        });
-      });
-    }, "-=0.2");
-    if (title1 && title2) {
-      tl.to(title1, {
-        y: -40,
-        opacity: 0,
-        filter: "blur(10px)",
-        duration: 0.3,
-        ease: "sine.inOut"
-      }).to(title2, {
-        y: 0,
-        opacity: 1,
-        filter: "blur(0px)",
-        duration: 0.3,
-        ease: "sine.inOut"
-      }, "-=0.1");
-    }
-    tl.addLabel("beforeWaves");
-    tl.add(() => {
-      console.log("\u{1F3AC} Initializing all pairs to SUCCESS state");
-      shuffledPairs.forEach((pair) => {
-        gsap.set(pair.path, { opacity: 1 });
-        if (pair.errorPath) gsap.set(pair.errorPath, { opacity: 0 });
-        if (pair.errorConnector) gsap.set(pair.errorConnector, { opacity: 0 });
-        pair.successStates.forEach((state) => gsap.set(state, { opacity: 1 }));
-        pair.errorStates.forEach((state) => gsap.set(state, { opacity: 0 }));
-      });
-    }, "beforeWaves");
-    tl.addLabel("step6Start", "+=0.2");
-    const pairsWithErrors = shuffledPairs.filter((p) => p.errorConnector && p.errorPath);
-    if (pairsWithErrors.length === 0) {
-      console.warn("WARNING: No pairs with error states found");
-    } else {
-      console.log(`\u2713 Found ${pairsWithErrors.length} pairs with error states`);
-    }
-    const failurePatterns = [
-      ["content", "inventory"],
-      // Wave 1
-      ["products", "delivery"],
-      // Wave 2
-      ["returns", "promises"]
-      // Wave 3
-    ];
-    const animateFailure = (pair) => {
-      if (!pair || !pair.path) return;
-      gsap.to(pair.path, {
-        opacity: 0,
-        duration: 0.3,
-        ease: "power3.in"
-      });
-      if (pair.errorPath) {
-        gsap.to(pair.errorPath, {
-          opacity: 1,
-          duration: 0.3,
-          ease: "power3.out"
-        });
-      }
-      if (pair.errorConnector) {
-        gsap.to(pair.errorConnector, {
-          opacity: 1,
-          duration: 0.15,
-          ease: "power3.out"
-        });
-      }
-      if (pair.successStates && pair.successStates.length > 0) {
-        gsap.to(pair.successStates, {
-          opacity: 0,
-          duration: 0.3,
-          ease: "power3.in"
-        });
-      }
-      if (pair.errorStates && pair.errorStates.length > 0) {
-        gsap.to(pair.errorStates, {
-          opacity: 1,
-          duration: 0.3,
-          ease: "power3.out"
-        });
-      }
-    };
-    const animateSuccess = (pair) => {
-      if (!pair || !pair.path) return;
-      if (pair.errorPath) {
-        gsap.to(pair.errorPath, {
-          opacity: 0,
-          duration: 0.3,
-          ease: "power3.in"
-        });
-      }
-      if (pair.errorConnector) {
-        gsap.to(pair.errorConnector, {
-          opacity: 0,
-          duration: 0.15,
-          ease: "power3.in"
-        });
-      }
-      gsap.to(pair.path, {
-        opacity: 1,
-        duration: 0.3,
-        ease: "power3.out"
-      });
-      if (pair.errorStates && pair.errorStates.length > 0) {
-        gsap.to(pair.errorStates, {
-          opacity: 0,
-          duration: 0.3,
-          ease: "power3.in"
-        });
-      }
-      if (pair.successStates && pair.successStates.length > 0) {
-        gsap.to(pair.successStates, {
-          opacity: 1,
-          duration: 0.3,
-          ease: "power3.out"
-        });
-      }
-    };
-    if (pairsWithErrors.length > 0) {
-      tl.addLabel("wave1Start", "step6Start");
-      tl.add(() => {
-        console.log(`\u{1F30A} Wave 1 triggered!`);
-        const failureIds = failurePatterns[0];
-        const toFail = pairsWithErrors.filter((p) => failureIds.includes(p.id.toLowerCase()));
-        const toSucceed = pairsWithErrors.filter((p) => !failureIds.includes(p.id.toLowerCase()));
-        console.log(`  Failing: ${toFail.map((p) => p.id).join(", ")}`);
-        console.log(`  Succeeding: ${toSucceed.map((p) => p.id).join(", ")}`);
-        toFail.forEach((pair) => animateFailure(pair));
-        toSucceed.forEach((pair) => animateSuccess(pair));
-      }, "wave1Start");
-      tl.to({}, { duration: 0.5 }, "wave1Start");
-      tl.addLabel("wave2Start", "+=0.2");
-      tl.add(() => {
-        console.log(`\u{1F30A} Wave 2 triggered!`);
-        const failureIds = failurePatterns[1];
-        const toFail = pairsWithErrors.filter((p) => failureIds.includes(p.id.toLowerCase()));
-        const toSucceed = pairsWithErrors.filter((p) => !failureIds.includes(p.id.toLowerCase()));
-        console.log(`  Failing: ${toFail.map((p) => p.id).join(", ")}`);
-        console.log(`  Succeeding: ${toSucceed.map((p) => p.id).join(", ")}`);
-        toFail.forEach((pair) => animateFailure(pair));
-        toSucceed.forEach((pair) => animateSuccess(pair));
-      }, "wave2Start");
-      tl.to({}, { duration: 0.5 }, "wave2Start");
-      tl.addLabel("wave3Start", "+=0.2");
-      tl.add(() => {
-        console.log(`\u{1F30A} Wave 3 triggered!`);
-        const failureIds = failurePatterns[2];
-        const toFail = pairsWithErrors.filter((p) => failureIds.includes(p.id.toLowerCase()));
-        const toSucceed = pairsWithErrors.filter((p) => !failureIds.includes(p.id.toLowerCase()));
-        console.log(`  Failing: ${toFail.map((p) => p.id).join(", ")}`);
-        console.log(`  Succeeding: ${toSucceed.map((p) => p.id).join(", ")}`);
-        toFail.forEach((pair) => animateFailure(pair));
-        toSucceed.forEach((pair) => animateSuccess(pair));
-      }, "wave3Start");
-      tl.to({}, { duration: 0.5 }, "wave3Start");
-      tl.addLabel("afterWaves", "+=0.2");
-      tl.add(() => {
-        console.log("\u2705 All waves complete! Making all pairs SUCCESS");
-        pairsWithErrors.forEach((pair) => {
-          animateSuccess(pair);
-        });
-      }, "afterWaves");
-      if (title2 && title3) {
-        tl.to(title2, {
-          y: -40,
-          opacity: 0,
-          filter: "blur(10px)",
-          duration: 0.3,
-          ease: "sine.inOut"
-        }, "wave3Start").to(title3, {
-          y: 0,
-          opacity: 1,
-          filter: "blur(0px)",
-          duration: 0.3,
-          ease: "sine.inOut"
-        }, "wave3Start");
-      }
-    }
-    const allSuccessStatesStep7 = pairsWithErrors.flatMap((p) => p.successStates);
-    if (allSuccessStatesStep7.length > 0) {
-      tl.to(allSuccessStatesStep7, {
-        opacity: 0,
-        duration: 0.1,
-        ease: "power3.in"
-      }, "afterWaves+=0.2");
-    }
-    if (allNames.length > 0) {
-      tl.to(allNames, {
-        opacity: 0,
-        scale: 0.3,
-        duration: 0.1,
-        ease: "power3.in"
-      }, "<");
-    }
-    if (allPaths.length > 0) {
-      tl.to(allPaths, {
-        strokeDashoffset: (index) => {
-          if (allPaths[index]) {
-            try {
-              return allPaths[index].getTotalLength();
-            } catch (e) {
-              return 0;
-            }
-          }
-          return 0;
-        },
-        duration: 0.3,
-        ease: "power3.in"
-      }, "-=0.05");
-    }
-    if (store && foundationBase) {
-      tl.to([store, foundationBase], {
-        scale: 0,
-        x: "140px",
-        y: "-20px",
-        opacity: 0,
-        duration: 0.1,
-        ease: "power3.in"
-      });
-    }
-    if (title3) {
-      tl.to(title3, {
-        opacity: 0,
-        filter: "blur(5px)",
-        duration: 0.1,
-        ease: "power3.in"
-      }, "<");
-    }
-    if (storeFoundation) {
-      tl.to(storeFoundation, {
-        ...getBreakpointValues("storeFoundation"),
-        opacity: 1,
-        duration: 0.2,
-        ease: "power3.in"
-      }, "<");
-    }
-    if (grid) {
-      tl.to(grid, {
-        ...getBreakpointValues("grid"),
-        duration: 0.3,
-        ease: "power3.out"
-      }, "<");
-    }
-    if (counter) {
-      tl.to(counter, {
-        opacity: 1,
-        filter: "blur(0px)",
-        duration: 0.3,
-        ease: "power3.out",
-        onStart: startCounterAnimation
-        // ← Triggers independent animation
-      }, "-=0.1");
-      tl.to(counter, {
-        opacity: 0,
-        filter: "blur(10px)",
-        scale: 1,
-        delay: 0.5,
-        duration: 0.2,
-        ease: "power3.in"
-      });
-    }
-    if (question) {
-      tl.to(question, {
-        opacity: 1,
-        filter: "blur(0px)",
-        duration: 0.2,
-        scale: 1.2,
-        ease: "power3.out"
-      });
-    }
-    if (button) {
-      tl.to(button, {
-        scale: 1.01,
-        duration: 1,
-        ease: "power3.out"
-      }, "-=0.2");
-    }
-    ScrollTrigger.refresh();
-    console.log("\u2713 Animation timeline complete!");
-    window.addEventListener("resize", () => {
-      ScrollTrigger.refresh();
-    });
-  });
-})();
-//# sourceMappingURL=index.js.map
+"use strict";(()=>{document.addEventListener("DOMContentLoaded",()=>{let o=window.gsap;if(!o){console.error("ERROR: GSAP not loaded!");return}let g=window.ScrollTrigger;g&&o.registerPlugin(g);let P=document.querySelectorAll("[entity-error-connector]"),b=document.querySelectorAll("[entity-success-connector]"),w=document.querySelectorAll("[entity-name]");if(w.length===0){console.error("ERROR: No entities found with [entity-name] attribute");return}let u=document.querySelector("[playbook='store']"),d=document.querySelector("[playbook='store-foundation']"),p=document.querySelector("[playbook='foundation-base']"),x=document.querySelector("[playbook='spacer']"),E=document.querySelector("[playbook='title-1']"),f=document.querySelector("[playbook='title-2']"),y=document.querySelector("[playbook='title-3']"),m=document.querySelector("[playbook='counter']"),L=document.querySelector("[playbook='counter-text']"),S=document.querySelector("[playbook='grid']"),v=document.querySelector("[playbook='question']"),F=document.querySelector("[playbook='button']"),A={value:2341100};L&&(L.textContent="2341700");let C=null,G=()=>{C&&C.kill(),C=o.timeline({repeat:-1}),L&&C.to(A,{value:2341728,duration:20,ease:"power2.out",onUpdate:()=>{L.textContent=Math.floor(A.value).toLocaleString()}}).set(A,{value:2341100})},k=[];if(w.forEach(e=>{let n=e.getAttribute("entity-name");if(!n)return;let a=Array.from(b).find(s=>s.getAttribute("entity-success-connector")===n),t=Array.from(P).find(s=>s.getAttribute("entity-error-connector")===n);if(a){let s=a.querySelector("path"),I=t?.querySelector("path")||null,N=Array.from(e.querySelectorAll('[entity-state="success"]')),O=Array.from(e.querySelectorAll('[entity-state="error"]'));s&&k.push({name:e,connector:a,path:s,errorConnector:t||null,errorPath:I,successState:N[0]||null,successStates:N,errorStates:O,id:n})}}),k.length===0){console.error("ERROR: No pairs created!");return}console.log(`\u2713 Created ${k.length} animation pairs`);let c=e=>{let n=window.innerWidth,a={storeFoundation:{mobile:{scale:3.8,x:"-53px",y:"-24px"},tablet:{scale:3,x:"0px",y:"-100px"},desktop:{scale:2.8,x:"-400px",y:"-50px"}},grid:{mobile:{scale:1.5,x:"30px"},tablet:{scale:1.8,x:"45px"},desktop:{scale:2.1,x:"60px"}},counter:{mobile:{scale:1,y:"-100px"},tablet:{scale:1.1,y:"-180px"},desktop:{scale:1.2,y:"-100px"}},question:{mobile:{scale:1,y:"-100px"},tablet:{scale:1.1,y:"-180px"},desktop:{scale:1.2,y:"-100px"}},spcerSet:{mobile:{height:"20px"},tablet:{height:"100px"},desktop:{height:"240px"}},storeAndStoreFoundationInitial:{mobile:{scale:3,x:"-40px",y:"20px"},tablet:{scale:2,x:"0px",y:"0px"},desktop:{scale:1.5,x:"0px",y:"0px"}},storeAndStoreFoundationFinal:{mobile:{scale:1,x:"0px",y:"0px"},tablet:{scale:1,x:"0px",y:"0px"},desktop:{scale:1,x:"0px",y:"0px"}}},t=()=>n<480?"mobile":n<992?"tablet":"desktop";return a[e]?.[t()]||{}},l=k.sort(()=>Math.random()-.5),h=l.map(e=>e.path).filter(Boolean),T=l.map(e=>e.name).filter(Boolean),W=l.flatMap(e=>e.successStates);o.set([...P,...b],{opacity:0}),u&&d&&o.set([u,d],{...c("storeAndStoreFoundationInitial")}),p&&o.set(p,{opacity:0}),w.length>0&&o.set(w,{opacity:0,scale:.5}),x&&o.set(x,{...c("spcerSet")}),S&&o.set(S,{scale:2}),v&&o.set(v,{...c("question")}),m&&o.set(m,{...c("counter")}),E&&o.set(E,{y:0}),f&&o.set(f,{y:40,opacity:0,filter:"blur(10px)"}),y&&o.set(y,{y:40,opacity:0,filter:"blur(10px)"}),l.forEach(({path:e,errorPath:n,successStates:a,errorStates:t})=>{if(e){try{let s=e.getTotalLength();o.set(e,{strokeDasharray:s,strokeDashoffset:s})}catch{console.warn("WARNING: Could not get SVG path length")}n&&o.set(n,{opacity:0}),a.forEach(s=>{s&&o.set(s,{opacity:0})}),t.forEach(s=>{s&&o.set(s,{opacity:0})})}});let r=o.timeline({scrollTrigger:{trigger:"#scroll",start:"top top",end:"+=5000vh",scrub:2.5,pin:!0,fastScrollSensitivity:1}});u&&d&&r.to([u,d],{...c("storeAndStoreFoundationFinal")}),x&&r.to(x,{height:"0px",duration:.4,ease:"power3.out"},"<"),S&&r.to(S,{scale:1,duration:.4,ease:"power3.out"},"<"),p&&r.to(p,{opacity:1,duration:.2,ease:"power3.out"},"-=0.1"),b.length>0&&r.set(b,{opacity:1}),h.length>0&&r.to(h,{strokeDashoffset:0,duration:.8,ease:"power3.out"},"+=0.05"),T.length>0&&r.to(T,{opacity:1,scale:1,duration:.2,ease:"power3.out",delay:.2},"-=0.6"),W.length>0&&r.to(W,{opacity:1,duration:.2,ease:"power3.out"},"-=0.6"),r.add(()=>{console.log("\u2705 Step 4 Complete: All pairs set to SUCCESS state"),l.forEach(e=>{o.set(e.path,{opacity:1}),o.set(e.connector,{opacity:1}),e.successStates.forEach(n=>{o.set(n,{opacity:1})}),e.errorPath&&o.set(e.errorPath,{opacity:0}),e.errorConnector&&o.set(e.errorConnector,{opacity:0}),e.errorStates.forEach(n=>{o.set(n,{opacity:0})})})},"-=0.2"),E&&f&&r.to(E,{y:-40,opacity:0,filter:"blur(10px)",duration:.3,ease:"sine.inOut"}).to(f,{y:0,opacity:1,filter:"blur(0px)",duration:.3,ease:"sine.inOut"},"-=0.1"),r.addLabel("beforeWaves"),r.add(()=>{console.log("\u{1F3AC} Initializing all pairs to SUCCESS state"),l.forEach(e=>{o.set(e.path,{opacity:1}),e.errorPath&&o.set(e.errorPath,{opacity:0}),e.errorConnector&&o.set(e.errorConnector,{opacity:0}),e.successStates.forEach(n=>o.set(n,{opacity:1})),e.errorStates.forEach(n=>o.set(n,{opacity:0}))})},"beforeWaves"),r.addLabel("step6Start","+=0.2");let i=l.filter(e=>e.errorConnector&&e.errorPath);i.length===0?console.warn("WARNING: No pairs with error states found"):console.log(`\u2713 Found ${i.length} pairs with error states`);let q=[["content","inventory"],["products","delivery"],["returns","promises"]],H=e=>{!e||!e.path||(o.to(e.path,{opacity:0,duration:.3,ease:"power3.in"}),e.errorPath&&o.to(e.errorPath,{opacity:1,duration:.3,ease:"power3.out"}),e.errorConnector&&o.to(e.errorConnector,{opacity:1,duration:.15,ease:"power3.out"}),e.successStates&&e.successStates.length>0&&o.to(e.successStates,{opacity:0,duration:.3,ease:"power3.in"}),e.errorStates&&e.errorStates.length>0&&o.to(e.errorStates,{opacity:1,duration:.3,ease:"power3.out"}))},M=e=>{!e||!e.path||(e.errorPath&&o.to(e.errorPath,{opacity:0,duration:.3,ease:"power3.in"}),e.errorConnector&&o.to(e.errorConnector,{opacity:0,duration:.15,ease:"power3.in"}),o.to(e.path,{opacity:1,duration:.3,ease:"power3.out"}),e.errorStates&&e.errorStates.length>0&&o.to(e.errorStates,{opacity:0,duration:.3,ease:"power3.in"}),e.successStates&&e.successStates.length>0&&o.to(e.successStates,{opacity:1,duration:.3,ease:"power3.out"}))};i.length>0&&(r.addLabel("wave1Start","step6Start"),r.add(()=>{console.log("\u{1F30A} Wave 1 triggered!");let e=q[0],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(`  Failing: ${n.map(t=>t.id).join(", ")}`),console.log(`  Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave1Start"),r.to({},{duration:.5},"wave1Start"),r.addLabel("wave2Start","+=0.2"),r.add(()=>{console.log("\u{1F30A} Wave 2 triggered!");let e=q[1],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(`  Failing: ${n.map(t=>t.id).join(", ")}`),console.log(`  Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave2Start"),r.to({},{duration:.5},"wave2Start"),r.addLabel("wave3Start","+=0.2"),r.add(()=>{console.log("\u{1F30A} Wave 3 triggered!");let e=q[2],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(`  Failing: ${n.map(t=>t.id).join(", ")}`),console.log(`  Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave3Start"),r.to({},{duration:.5},"wave3Start"),r.addLabel("afterWaves","+=0.2"),r.add(()=>{console.log("\u2705 All waves complete! Making all pairs SUCCESS"),i.forEach(e=>{M(e)})},"afterWaves"),f&&y&&r.to(f,{y:-40,opacity:0,filter:"blur(10px)",duration:.3,ease:"sine.inOut"},"wave3Start").to(y,{y:0,opacity:1,filter:"blur(0px)",duration:.3,ease:"sine.inOut"},"wave3Start"));let R=i.flatMap(e=>e.successStates);R.length>0&&r.to(R,{opacity:0,duration:.1,ease:"power3.in"},"afterWaves+=0.2"),T.length>0&&r.to(T,{opacity:0,scale:.3,duration:.1,ease:"power3.in"},"<"),h.length>0&&r.to(h,{strokeDashoffset:e=>{if(h[e])try{return h[e].getTotalLength()}catch{return 0}return 0},duration:.3,ease:"power3.in"},"-=0.05"),u&&p&&r.to([u,p],{scale:0,x:"140px",y:"-20px",opacity:0,duration:.1,ease:"power3.in"}),y&&r.to(y,{opacity:0,filter:"blur(5px)",duration:.1,ease:"power3.in"},"<"),d&&r.to(d,{...c("storeFoundation"),opacity:1,duration:.2,ease:"power3.in"},"<"),S&&r.to(S,{...c("grid"),duration:.3,ease:"power3.out"},"<"),m&&(r.to(m,{opacity:1,filter:"blur(0px)",duration:.3,ease:"power3.out",onStart:G},"-=0.1"),r.to(m,{opacity:0,filter:"blur(10px)",scale:1,delay:.5,duration:.2,ease:"power3.in"})),v&&r.to(v,{opacity:1,filter:"blur(0px)",duration:.2,scale:1.2,ease:"power3.out"}),F&&r.to(F,{scale:1.01,duration:1,ease:"power3.out"},"-=0.2"),g.refresh(),console.log("\u2713 Animation timeline complete!"),window.addEventListener("resize",()=>{g.refresh()})});})();

package/dist/playbook-2026/styles.css

@@ -1,110 +1 @@
-/* src/playbook-2026/styles.css */
-[entity-state=error] {
-  opacity: 0;
-}
-[entity-state=success] {
-  opacity: 0;
-}
-[entity-error-connector] {
-  opacity: 0;
-}
-[entity-success-connector] {
-  opacity: 1;
-}
-[connector-wrapper] {
-  opacity: 0;
-}
-#scroll {
-  height: 100dvh;
-  width: 100vw;
-  overflow: hidden;
-}
-.pin-spacer {
-  overflow: hidden;
-}
-[entity-error-connector] {
-  opacity: 0;
-}
-[entity-success-connector] {
-  opacity: 0;
-}
-[entity-name] {
-  opacity: 0;
-}
-[playbook=foundation-base] {
-  opacity: 0;
-}
-[playbook=counter] {
-  opacity: 0;
-  pointer-events: none;
-}
-[playbook=question] {
-  opacity: 0;
-  pointer-events: none;
-}
-[inner-shadow] {
-  background-color: #3c3b3b;
-  color: transparent;
-  -webkit-background-clip: text;
-  background-clip: text;
-  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);
-  max-width: 500px;
-}
-[playbook-title] {
-  font-size: 3rem;
-  font-family: var(--Primary);
-  line-height: 110%;
-  letter-spacing: -0.03em;
-}
-@media (min-width: 992px) and (max-height: 713px) {
-  [playbook-title] {
-    font-size: 2.5rem;
-    max-width: 415px;
-  }
-}
-@media (max-width: 1199px) {
-  [playbook-main-title] {
-    height: 60px;
-    font-size: 70px;
-  }
-}
-[entity-error-connector] svg path {
-  stroke-dasharray: 4 8;
-  animation: dashMove 1s linear infinite;
-}
-@keyframes dashMove {
-  to {
-    stroke-dashoffset: -12;
-  }
-}
-[entity-success-connector] svg .comet-glow {
-  animation: cometMove 2.5s linear infinite;
-  filter: blur(4px);
-  opacity: 0.7;
-}
-[entity-success-connector] svg .comet {
-  animation: cometMove 2.5s linear infinite;
-  filter: blur(1px);
-}
-@keyframes cometMove {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: -420;
-  }
-}
-@media (min-width: 481px) and (max-width: 768px) {
-  [inner-shadow] {
-    max-width: 450px;
-  }
-}
-@media (max-width: 480px) {
-  [inner-shadow] {
-    max-width: 244px;
-  }
-  [playbook-title] {
-    font-size: 2.3rem;
-  }
-}
-/*# sourceMappingURL=styles.css.map */
+[entity-state=error],[entity-state=success],[entity-error-connector]{opacity:0}[entity-success-connector]{opacity:1}[connector-wrapper]{opacity:0}#scroll{height:100dvh;width:100vw;overflow:hidden}.pin-spacer{overflow:hidden}[entity-error-connector],[entity-success-connector],[entity-name],[playbook=foundation-base]{opacity:0}[playbook=counter],[playbook=question]{opacity:0;pointer-events:none}[inner-shadow]{background-color:#3c3b3b;color:transparent;-webkit-background-clip:text;background-clip:text;text-shadow:0px 2px 3px rgba(255,255,255,.5);max-width:500px}[playbook-title]{font-size:3rem;font-family:var(--Primary);line-height:110%;letter-spacing:-.03em}@media (min-width: 992px) and (max-height: 713px){[playbook-title]{font-size:2.5rem;max-width:415px}}@media (max-width: 1199px){[playbook-main-title]{height:60px;font-size:70px}}[entity-error-connector] svg path{stroke-dasharray:4 8;animation:dashMove 1s linear infinite}@keyframes dashMove{to{stroke-dashoffset:-12}}[entity-success-connector] svg .comet-glow{animation:cometMove 2.5s linear infinite;filter:blur(4px);opacity:.7}[entity-success-connector] svg .comet{animation:cometMove 2.5s linear infinite;filter:blur(1px)}@keyframes cometMove{0%{stroke-dashoffset:0}to{stroke-dashoffset:-420}}@media (min-width: 481px) and (max-width: 768px){[inner-shadow]{max-width:450px}}@media (max-width: 480px){[inner-shadow]{max-width:244px}[playbook-title]{font-size:2.3rem}}