@walkeros/explorer 4.7.2 → 4.8.0-next-1791441510508

package/dist/design/components/index.mjs

@@ -0,0 +1,2611 @@
+"use client"
+
+// src/design/components/cx.ts
+function cx(...names) {
+  return names.filter((name) => Boolean(name)).join(" ");
+}
+
+// src/design/components/atoms/Button.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function classes({
+  variant = "primary",
+  block = false,
+  className
+}) {
+  return cx(
+    "elb-btn",
+    `elb-btn--${variant}`,
+    block && "elb-btn--block",
+    className
+  );
+}
+function LinkButton({
+  children,
+  variant,
+  arrow,
+  block,
+  className,
+  linkComponent: Link,
+  ...anchor
+}) {
+  const props = {
+    ...anchor,
+    className: classes({ variant, block, className })
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    arrow && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \u2192" })
+  ] });
+  return Link ? /* @__PURE__ */ jsx(Link, { ...props, children: content }) : /* @__PURE__ */ jsx("a", { ...props, children: content });
+}
+function ButtonElement({
+  children,
+  variant,
+  arrow,
+  block,
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      className: classes({ variant, block, className }),
+      children: [
+        children,
+        arrow && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \u2192" })
+      ]
+    }
+  );
+}
+function Button(props) {
+  return props.href === void 0 ? /* @__PURE__ */ jsx(ButtonElement, { ...props }) : /* @__PURE__ */ jsx(LinkButton, { ...props });
+}
+
+// src/design/components/atoms/InlineCode.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function InlineCode({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx2("code", { ...rest, className: cx("elb-code-inline", className), children });
+}
+
+// src/design/components/atoms/EventLegend.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PARTS = [
+  ["entity", "var(--event-entity)"],
+  ["action", "var(--event-action)"],
+  ["property", "var(--event-property)"],
+  ["context", "var(--event-context)"],
+  ["globals", "var(--event-globals)"]
+];
+function EventLegend({ parts, className, ...rest }) {
+  return /* @__PURE__ */ jsx3("div", { ...rest, className: cx("elb-legend", className), "data-theme": "dark", children: PARTS.filter(([part]) => !parts || parts.includes(part)).map(
+    ([part, color]) => /* @__PURE__ */ jsxs2("span", { className: "elb-legend__item", children: [
+      /* @__PURE__ */ jsx3(
+        "i",
+        {
+          className: "elb-legend__swatch",
+          style: { background: color },
+          "aria-hidden": "true"
+        }
+      ),
+      part
+    ] }, part)
+  ) });
+}
+
+// src/design/components/atoms/Icon.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Icon({ name, size = 16, className, ...rest }) {
+  const svg = {
+    "aria-hidden": true,
+    focusable: false,
+    ...rest,
+    width: size,
+    height: size,
+    className: cx("elb-icon", `elb-icon--${name}`, className)
+  };
+  return name === "check" ? /* @__PURE__ */ jsx4("svg", { ...svg, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      d: "M3 8.5l3 3 7-7",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) }) : /* @__PURE__ */ jsxs3("svg", { ...svg, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x: 9,
+        y: 9,
+        width: 12,
+        height: 12,
+        rx: 2,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M5 15V5a2 2 0 0 1 2-2h10",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2
+      }
+    )
+  ] });
+}
+
+// src/design/components/atoms/Eyebrow.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Eyebrow({
+  children,
+  variant = "eyebrow",
+  tone = "link",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx5(
+    "p",
+    {
+      ...rest,
+      className: cx(
+        "elb-eyebrow",
+        variant === "label" && "elb-eyebrow--label",
+        tone === "muted" && "elb-eyebrow--muted",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/atoms/Stat.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Stat({ value, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs4("div", { ...rest, className: cx("elb-stat", className), children: [
+    /* @__PURE__ */ jsx6("span", { className: "elb-stat__value", children: value }),
+    /* @__PURE__ */ jsx6("p", { className: "elb-stat__label", children })
+  ] });
+}
+
+// src/design/components/atoms/Text.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Text({
+  children,
+  size = "body",
+  tone = "muted",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx7(
+    "p",
+    {
+      ...rest,
+      className: cx(
+        "elb-text",
+        size === "lg" && "elb-text--lg",
+        tone === "fg" && "elb-text--fg",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/atoms/TextLink.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function TextLink({
+  href,
+  children,
+  tone = "link",
+  arrow = false,
+  linkComponent: Link,
+  className,
+  ...rest
+}) {
+  const props = {
+    ...rest,
+    href,
+    className: cx(
+      "elb-text-link",
+      tone === "muted" && "elb-text-link--muted",
+      className
+    )
+  };
+  const content = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    children,
+    arrow && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: " \u2192" })
+  ] });
+  return Link ? /* @__PURE__ */ jsx8(Link, { ...props, children: content }) : /* @__PURE__ */ jsx8("a", { ...props, children: content });
+}
+
+// src/design/components/atoms/Card.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Card({
+  children,
+  padding = "md",
+  radius = "lg",
+  hover = false,
+  highlight = false,
+  glow = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-card",
+        `elb-card--pad-${padding}`,
+        radius === "xl" && "elb-card--radius-xl",
+        hover && "elb-card--hover",
+        highlight && "elb-card--highlight",
+        glow && "elb-card--glow",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/atoms/InstallCommand.tsx
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var CONFIRM_MS = 1400;
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function InstallCommand({
+  command = "npm i -g @walkeros/cli",
+  className,
+  "aria-describedby": describedBy,
+  ...rest
+}) {
+  const hintId = useId();
+  const [state, setState] = useState("idle");
+  const mounted = useRef(true);
+  const timer = useRef(void 0);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(timer.current);
+    };
+  }, []);
+  const copy = async () => {
+    const copied = await copyText(command);
+    if (!mounted.current) return;
+    clearTimeout(timer.current);
+    setState(copied ? "done" : "failed");
+    if (copied) timer.current = setTimeout(() => setState("idle"), CONFIRM_MS);
+  };
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        ...rest,
+        "aria-describedby": describedBy ? `${hintId} ${describedBy}` : hintId,
+        type: "button",
+        className: cx("elb-cmd", className),
+        onClick: () => {
+          void copy();
+        },
+        children: [
+          /* @__PURE__ */ jsxs6("span", { children: [
+            /* @__PURE__ */ jsxs6("span", { className: "elb-cmd__prompt", "aria-hidden": "true", children: [
+              "$",
+              " "
+            ] }),
+            command
+          ] }),
+          /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: cx(
+                "elb-cmd__icon",
+                state === "done" && "elb-cmd__icon--done"
+              ),
+              children: /* @__PURE__ */ jsx10(Icon, { name: state === "done" ? "check" : "copy" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10("span", { id: hintId, hidden: true, children: "Copy install command" }),
+    /* @__PURE__ */ jsx10("span", { className: "elb-cmd__status", role: "status", children: state === "done" ? "Copied" : state === "failed" ? "Copy failed" : "" })
+  ] });
+}
+
+// src/design/components/molecules/CheckList.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function CheckList({
+  items,
+  layout = "inline",
+  align = "start",
+  className,
+  ...rest
+}) {
+  const stack = layout === "stack";
+  return /* @__PURE__ */ jsx11(
+    "ul",
+    {
+      ...rest,
+      className: cx(
+        "elb-checklist",
+        stack && "elb-checklist--stack",
+        align === "center" && "elb-checklist--center",
+        className
+      ),
+      children: items.map((item, index) => /* @__PURE__ */ jsxs7("li", { className: "elb-checklist__item", children: [
+        /* @__PURE__ */ jsx11(Icon, { name: "check", size: stack ? 14 : 16 }),
+        item
+      ] }, index))
+    }
+  );
+}
+
+// src/design/components/molecules/SectionHeading.tsx
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function SectionHeading({
+  title,
+  eyebrow,
+  lead,
+  level = 2,
+  size = "lg",
+  highlight,
+  align = "start",
+  className,
+  ...rest
+}) {
+  const hero = level === 1;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-sh",
+        (hero || align === "center") && "elb-sh--center",
+        className
+      ),
+      children: [
+        eyebrow !== void 0 && /* @__PURE__ */ jsx12(Eyebrow, { children: eyebrow }),
+        hero ? /* @__PURE__ */ jsxs8("h1", { className: "elb-sh__title elb-sh__title--display", children: [
+          title,
+          highlight !== void 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+            " ",
+            /* @__PURE__ */ jsx12("span", { className: "elb-sh__highlight", children: highlight })
+          ] })
+        ] }) : /* @__PURE__ */ jsx12("h2", { className: cx("elb-sh__title", `elb-sh__title--${size}`), children: title }),
+        lead !== void 0 && /* @__PURE__ */ jsx12("p", { className: cx("elb-sh__lead", hero && "elb-sh__lead--hero"), children: lead })
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/ProblemCard.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function ProblemCard({
+  number,
+  title,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs9(
+    Card,
+    {
+      ...rest,
+      padding: "sm",
+      hover: true,
+      className: cx("elb-problem-card", className),
+      children: [
+        /* @__PURE__ */ jsxs9("h3", { className: "elb-problem-card__title", children: [
+          /* @__PURE__ */ jsx13("span", { className: "elb-problem-card__number", children: number }),
+          title
+        ] }),
+        /* @__PURE__ */ jsx13("p", { className: "elb-problem-card__text", children })
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/FeatureItem.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function FeatureItem({
+  title,
+  children,
+  href,
+  linkLabel = "Docs",
+  linkComponent,
+  linkAttributes,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs10("div", { ...rest, className: cx("elb-feature", className), children: [
+    /* @__PURE__ */ jsx14(Icon, { name: "check", size: 20 }),
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx14("h3", { className: "elb-feature__title", children: title }),
+      /* @__PURE__ */ jsx14("p", { className: "elb-feature__text", children }),
+      href !== void 0 && /* @__PURE__ */ jsx14(
+        TextLink,
+        {
+          ...linkAttributes,
+          href,
+          arrow: true,
+          linkComponent,
+          className: "elb-feature__link",
+          children: linkLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/design/components/molecules/FaqItem.tsx
+import {
+  Fragment as Fragment5
+} from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function FaqItem({
+  question,
+  children,
+  className,
+  ...rest
+}) {
+  const parts = Array.isArray(children) ? children : [children];
+  return /* @__PURE__ */ jsxs11("details", { ...rest, className: cx("elb-faq", className), children: [
+    /* @__PURE__ */ jsx15("summary", { className: "elb-faq__question", children: question }),
+    /* @__PURE__ */ jsx15("div", { className: "elb-faq__answer", children: parts.map(
+      (part, index) => typeof part === "string" ? /* @__PURE__ */ jsx15("p", { children: part }, index) : /* @__PURE__ */ jsx15(Fragment5, { children: part }, index)
+    ) })
+  ] });
+}
+
+// src/design/components/molecules/PlanCard.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function PlanCard({
+  label,
+  title,
+  children,
+  features,
+  cta,
+  highlight = false,
+  linkComponent,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs12(
+    Card,
+    {
+      ...rest,
+      padding: "md",
+      highlight,
+      className: cx("elb-plan", className),
+      children: [
+        /* @__PURE__ */ jsx16(Eyebrow, { variant: "label", tone: highlight ? "link" : "muted", children: label }),
+        /* @__PURE__ */ jsx16("h3", { className: "elb-plan__title", children: title }),
+        /* @__PURE__ */ jsx16("p", { className: "elb-plan__text", children }),
+        features && /* @__PURE__ */ jsx16(CheckList, { items: features, layout: "stack" }),
+        cta && /* @__PURE__ */ jsx16(
+          Button,
+          {
+            ...cta.attributes,
+            href: cta.href,
+            variant: highlight ? "primary" : "secondary",
+            block: true,
+            linkComponent,
+            children: cta.label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/CaseCard.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function CaseCard({
+  label,
+  title,
+  children,
+  stats,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs13(Card, { ...rest, padding: "md", className: cx("elb-case-card", className), children: [
+    /* @__PURE__ */ jsx17(Eyebrow, { variant: "label", children: label }),
+    /* @__PURE__ */ jsx17("h3", { className: "elb-case-card__title", children: title }),
+    /* @__PURE__ */ jsx17("p", { className: "elb-case-card__text", children }),
+    /* @__PURE__ */ jsx17("div", { className: "elb-case-card__stats", children: stats.map((stat, index) => /* @__PURE__ */ jsx17(Stat, { value: stat.value, children: stat.label }, index)) })
+  ] });
+}
+
+// src/design/components/molecules/HighlightCard.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function HighlightCard({
+  label,
+  title,
+  children,
+  cta,
+  linkComponent,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs14(
+    Card,
+    {
+      ...rest,
+      padding: "lg",
+      radius: "xl",
+      hover: true,
+      glow: true,
+      className: cx("elb-highlight-card", className),
+      children: [
+        /* @__PURE__ */ jsx18(Eyebrow, { variant: "label", children: label }),
+        /* @__PURE__ */ jsx18("h3", { className: "elb-highlight-card__title", children: title }),
+        /* @__PURE__ */ jsx18("p", { className: "elb-highlight-card__text", children }),
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            ...cta.attributes,
+            href: cta.href,
+            variant: "secondary",
+            arrow: true,
+            linkComponent,
+            className: "elb-highlight-card__cta",
+            children: cta.label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/design/components/layout/Section.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Section({
+  children,
+  tone = "default",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx19(
+    "section",
+    {
+      ...rest,
+      className: cx(
+        "elb-section",
+        tone === "alt" && "elb-section--alt",
+        className
+      ),
+      children: /* @__PURE__ */ jsx19("div", { className: "elb-section__inner", children })
+    }
+  );
+}
+
+// src/design/components/layout/CardGrid.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function CardGrid({
+  children,
+  min,
+  gap = "cards",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-card-grid",
+        `elb-card-grid--min-${min}`,
+        gap === "features" && "elb-card-grid--features",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/layout/Split.tsx
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function Split({
+  start,
+  end,
+  variant = "even",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-split",
+        variant === "aside" && "elb-split--aside",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx21("div", { className: "elb-split__start", children: start }),
+        /* @__PURE__ */ jsx21("div", { className: "elb-split__end", children: end })
+      ]
+    }
+  );
+}
+
+// src/design/components/layout/Cluster.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Cluster({
+  children,
+  gap = "actions",
+  align = "start",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx22(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-cluster",
+        gap === "links" && "elb-cluster--links",
+        align === "center" && "elb-cluster--center",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/layout/Hero.tsx
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+function Hero({
+  eyebrow,
+  title,
+  highlight,
+  lead,
+  actions,
+  proof,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx23("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ jsxs16("div", { className: "elb-hero__inner", children: [
+    /* @__PURE__ */ jsx23(
+      SectionHeading,
+      {
+        level: 1,
+        eyebrow,
+        title,
+        highlight,
+        lead
+      }
+    ),
+    /* @__PURE__ */ jsx23("div", { className: "elb-hero__actions", children: actions }),
+    proof !== void 0 && /* @__PURE__ */ jsx23("div", { className: "elb-hero__proof", children: proof }),
+    children !== void 0 && /* @__PURE__ */ jsx23("div", { className: "elb-hero__demo", children })
+  ] }) });
+}
+
+// src/design/components/viz/DestinationMappingViz.tsx
+import { useState as useState2 } from "react";
+
+// src/design/components/viz/data/destination-mapping.ts
+var GENERATED_ID = "\u2026";
+var MAPPING_CAPTION = "50+ destination packages ship with the project. Removing GA4 or adding a new pixel is a block in this file, not a re-instrumentation project across every page.";
+var GA4_MEASUREMENT_ID = "G-XXXXXXXXXX";
+var MAPPING_EVENTS = [
+  {
+    entity: "product",
+    action: "view",
+    data: { id: "ers", price: 420, currency: "EUR" },
+    destinations: [
+      {
+        id: "ga4",
+        label: "GA4",
+        rule: {
+          name: "view_item",
+          data: {
+            map: {
+              currency: "data.currency",
+              value: "data.price",
+              items: { loop: ["this", { map: { item_id: "data.id" } }] }
+            }
+          }
+        },
+        calls: [
+          [
+            "gtag",
+            "event",
+            "view_item",
+            {
+              currency: "EUR",
+              value: 420,
+              items: [{ item_id: "ers" }],
+              send_to: GA4_MEASUREMENT_ID
+            }
+          ]
+        ]
+      },
+      {
+        id: "meta",
+        label: "Meta Pixel",
+        rule: {
+          name: "ViewContent",
+          data: {
+            map: {
+              value: "data.price",
+              currency: "data.currency",
+              contents: {
+                set: [
+                  {
+                    map: {
+                      id: "data.id",
+                      quantity: { key: "data.quantity", value: 1 }
+                    }
+                  }
+                ]
+              },
+              content_type: { value: "product" }
+            }
+          }
+        },
+        calls: [
+          [
+            "fbq",
+            "track",
+            "ViewContent",
+            {
+              value: 420,
+              currency: "EUR",
+              contents: [{ id: "ers", quantity: 1 }],
+              content_type: "product"
+            },
+            { eventID: GENERATED_ID }
+          ]
+        ]
+      },
+      {
+        id: "tiktok",
+        label: "TikTok Pixel",
+        rule: {
+          name: "ViewContent",
+          data: {
+            map: {
+              content_id: "data.id",
+              content_type: { value: "product" },
+              value: "data.price",
+              currency: "data.currency"
+            }
+          }
+        },
+        calls: [
+          [
+            "ttq.track",
+            "ViewContent",
+            {
+              content_id: "ers",
+              content_type: "product",
+              value: 420,
+              currency: "EUR"
+            },
+            { event_id: GENERATED_ID }
+          ]
+        ]
+      },
+      {
+        id: "amplitude",
+        label: "Amplitude",
+        rule: {
+          name: "Product Viewed",
+          data: {
+            map: {
+              product_id: "data.id",
+              price: "data.price",
+              currency: "data.currency"
+            }
+          }
+        },
+        calls: [
+          [
+            "amplitude.track",
+            "Product Viewed",
+            { product_id: "ers", price: 420, currency: "EUR" }
+          ]
+        ]
+      }
+    ]
+  },
+  {
+    entity: "lead",
+    action: "submit",
+    data: { type: "demo", value: 2500, currency: "EUR" },
+    destinations: [
+      {
+        id: "ga4",
+        label: "GA4",
+        rule: {
+          name: "generate_lead",
+          data: { map: { value: "data.value", currency: "data.currency" } }
+        },
+        calls: [
+          [
+            "gtag",
+            "event",
+            "generate_lead",
+            { value: 2500, currency: "EUR", send_to: GA4_MEASUREMENT_ID }
+          ]
+        ]
+      },
+      {
+        id: "meta",
+        label: "Meta Pixel",
+        rule: {
+          name: "Lead",
+          data: { map: { value: "data.value", currency: "data.currency" } }
+        },
+        calls: [
+          [
+            "fbq",
+            "track",
+            "Lead",
+            { value: 2500, currency: "EUR" },
+            { eventID: GENERATED_ID }
+          ]
+        ]
+      },
+      {
+        id: "tiktok",
+        label: "TikTok Pixel",
+        rule: {
+          name: "Contact",
+          data: { map: { value: "data.value", currency: "data.currency" } }
+        },
+        calls: [
+          [
+            "ttq.track",
+            "Contact",
+            { value: 2500, currency: "EUR" },
+            { event_id: GENERATED_ID }
+          ]
+        ]
+      },
+      {
+        id: "amplitude",
+        label: "Amplitude",
+        rule: {
+          name: "Lead Submitted",
+          data: {
+            map: {
+              lead_type: "data.type",
+              value: "data.value",
+              currency: "data.currency"
+            }
+          }
+        },
+        calls: [
+          [
+            "amplitude.track",
+            "Lead Submitted",
+            { lead_type: "demo", value: 2500, currency: "EUR" }
+          ]
+        ]
+      }
+    ]
+  },
+  {
+    entity: "order",
+    action: "complete",
+    data: { id: "0rd3r1d", value: 462, currency: "EUR" },
+    nested: [
+      { entity: "product", data: { id: "ers", price: 420, quantity: 1 } }
+    ],
+    destinations: [
+      {
+        id: "ga4",
+        label: "GA4",
+        rule: {
+          name: "purchase",
+          data: {
+            map: {
+              transaction_id: "data.id",
+              value: "data.value",
+              currency: "data.currency",
+              items: {
+                loop: [
+                  "nested",
+                  {
+                    map: {
+                      item_id: "data.id",
+                      price: "data.price",
+                      quantity: "data.quantity"
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        },
+        calls: [
+          [
+            "gtag",
+            "event",
+            "purchase",
+            {
+              transaction_id: "0rd3r1d",
+              value: 462,
+              currency: "EUR",
+              items: [{ item_id: "ers", price: 420, quantity: 1 }],
+              send_to: GA4_MEASUREMENT_ID
+            }
+          ]
+        ]
+      },
+      {
+        id: "meta",
+        label: "Meta Pixel",
+        rule: {
+          name: "Purchase",
+          data: {
+            map: {
+              value: "data.value",
+              currency: "data.currency",
+              contents: {
+                loop: [
+                  "nested",
+                  { map: { id: "data.id", quantity: "data.quantity" } }
+                ]
+              },
+              content_type: { value: "product" }
+            }
+          }
+        },
+        calls: [
+          [
+            "fbq",
+            "track",
+            "Purchase",
+            {
+              value: 462,
+              currency: "EUR",
+              contents: [{ id: "ers", quantity: 1 }],
+              content_type: "product"
+            },
+            { eventID: GENERATED_ID }
+          ]
+        ]
+      },
+      {
+        id: "tiktok",
+        label: "TikTok Pixel",
+        rule: {
+          name: "CompletePayment",
+          data: {
+            map: {
+              order_id: "data.id",
+              value: "data.value",
+              currency: "data.currency",
+              contents: {
+                loop: [
+                  "nested",
+                  {
+                    map: {
+                      content_id: "data.id",
+                      quantity: "data.quantity",
+                      price: "data.price"
+                    }
+                  }
+                ]
+              },
+              content_type: { value: "product" }
+            }
+          }
+        },
+        calls: [
+          [
+            "ttq.track",
+            "CompletePayment",
+            {
+              order_id: "0rd3r1d",
+              value: 462,
+              currency: "EUR",
+              contents: [{ content_id: "ers", quantity: 1, price: 420 }],
+              content_type: "product"
+            },
+            { event_id: GENERATED_ID }
+          ]
+        ]
+      },
+      {
+        id: "amplitude",
+        label: "Amplitude",
+        rule: {
+          silent: true,
+          settings: {
+            revenue: {
+              loop: [
+                "nested",
+                {
+                  map: {
+                    productId: "data.id",
+                    price: "data.price",
+                    quantity: "data.quantity",
+                    revenueType: { value: "purchase" },
+                    currency: { value: "EUR" }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        calls: [
+          [
+            "amplitude.revenue",
+            {
+              productId: "ers",
+              price: 420,
+              quantity: 1,
+              revenueType: "purchase",
+              currency: "EUR"
+            }
+          ]
+        ]
+      }
+    ]
+  }
+];
+
+// src/design/components/viz/parts/CodeTokens.tsx
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+function CodeTokens({
+  tokens,
+  active = false
+}) {
+  return /* @__PURE__ */ jsx24(Fragment6, { children: tokens.map((token, index) => /* @__PURE__ */ jsx24(
+    "span",
+    {
+      className: cx(
+        "elb-viz-tok",
+        `elb-viz-tok--${token.kind}`,
+        active && token.mark && `elb-viz-tok--mark-${token.mark}`
+      ),
+      children: token.t
+    },
+    index
+  )) });
+}
+function CodeLine({ number, bar, className, children }) {
+  return /* @__PURE__ */ jsxs17("div", { className: cx("elb-viz-line", className), children: [
+    /* @__PURE__ */ jsx24(
+      "span",
+      {
+        className: cx("elb-viz-line__bar", bar && `elb-viz-line__bar--${bar}`),
+        "aria-hidden": "true"
+      }
+    ),
+    number !== void 0 && /* @__PURE__ */ jsx24("span", { className: "elb-viz-line__number", children: number }),
+    /* @__PURE__ */ jsx24("span", { className: "elb-viz-line__code", children })
+  ] });
+}
+
+// src/design/components/viz/parts/tokens.ts
+function tok(t, kind, mark) {
+  return mark ? { t, kind, mark } : { t, kind };
+}
+function typedLength(tokens) {
+  return tokens.reduce((length, token) => length + token.t.length, 0);
+}
+function truncate(tokens, n) {
+  const out = [];
+  let left = n;
+  for (const token of tokens) {
+    if (left <= 0) break;
+    const t = token.t.slice(0, left);
+    out.push({ ...token, t });
+    left -= t.length;
+  }
+  return out;
+}
+
+// src/design/components/viz/parts/format.ts
+var ELIDED = "{\u2026}";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function literal(value) {
+  if (typeof value === "string")
+    return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+  if (typeof value !== "object" || value === null) return String(value);
+  if (Array.isArray(value)) return `[${value.map(literal).join(", ")}]`;
+  const entries = Object.entries(value);
+  return entries.length === 0 ? "{}" : `{ ${entries.map(([key, item]) => `${key}: ${literal(item)}`).join(", ")} }`;
+}
+function formatRule(entity, action, rule) {
+  const fields = [];
+  if (rule.name !== void 0) fields.push(`"name": "${rule.name}"`);
+  if (rule.silent) fields.push('"silent": true');
+  if (rule.data !== void 0) fields.push(`"data": ${ELIDED}`);
+  if (rule.settings !== void 0) {
+    const settings = Object.keys(rule.settings).map(
+      (key) => `"${key}": ${ELIDED}`
+    );
+    fields.push(`"settings": { ${settings.join(", ")} }`);
+  }
+  return `"${entity}": { "${action}": { ${fields.join(", ")} } }`;
+}
+function formatCall(record) {
+  const [fn, ...args] = record;
+  const at = args.findIndex(isRecord);
+  const params = args[at];
+  if (at < 0 || params === void 0 || !isRecord(params))
+    return [`${fn}(${args.map(literal).join(", ")})`];
+  const fields = Object.entries(params);
+  if (fn === "amplitude.revenue") {
+    if (fields.length === 0) return ["amplitude.revenue(new Revenue())"];
+    return [
+      "amplitude.revenue(new Revenue()",
+      ...fields.map(
+        ([key, value], index) => `  .set${key.charAt(0).toUpperCase()}${key.slice(1)}(${literal(value)})${index === fields.length - 1 ? ")" : ""}`
+      )
+    ];
+  }
+  const before = args.slice(0, at).map(literal);
+  const after = args.slice(at + 1).map(literal);
+  return [
+    `${fn}(${[...before, "{"].join(", ")}`,
+    ...fields.map(([key, value]) => `  ${key}: ${literal(value)},`),
+    `}${after.map((arg) => `, ${arg}`).join("")})`
+  ];
+}
+function formatElb(event) {
+  const name = literal(`${event.entity} ${event.action}`);
+  const data = literal(event.data);
+  if (!event.nested?.length) return `elb(${name}, ${data})`;
+  const nested = event.nested.map(
+    (entity) => `{ entity: ${literal(entity.entity)}, \u2026 }`
+  );
+  return `elb({ name: ${name}, data: ${data}, nested: [${nested.join(", ")}] })`;
+}
+var TOKEN = /"[^"]*"|'[^']*'|\d+(?:\.\d+)?|[A-Za-z_]\w*|\s+|./g;
+var CALLS = /^(?:gtag|fbq|elb|ttq|track|amplitude|revenue|Revenue|set[A-Z]\w*)$/;
+function tokenizeCode(line, highlight) {
+  const tokens = [];
+  for (const match of line.matchAll(TOKEN)) {
+    const t = match[0];
+    const isKey = /^\s*:/.test(line.slice((match.index ?? 0) + t.length));
+    if (t.startsWith('"') || t.startsWith("'")) {
+      const marked = highlight !== void 0 && t.slice(1, -1) === highlight;
+      tokens.push(
+        tok(t, isKey ? "key" : "value", marked ? "entity" : void 0)
+      );
+    } else if (/^\d/.test(t) || t === "true" || t === "false") {
+      tokens.push(tok(t, "num"));
+    } else if (CALLS.test(t)) {
+      tokens.push(tok(t, "fn"));
+    } else if (/^[A-Za-z_]/.test(t)) {
+      tokens.push(tok(t, isKey ? "key" : "text"));
+    } else if (/^\s+$/.test(t)) {
+      tokens.push(tok(t, "text"));
+    } else {
+      tokens.push(tok(t, "punct"));
+    }
+  }
+  return tokens;
+}
+
+// src/design/components/viz/parts/VizFrame.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function VizFrame({
+  variant,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      ...rest,
+      "data-theme": "dark",
+      className: cx("elb-viz", `elb-viz--${variant}`, className),
+      children: /* @__PURE__ */ jsx25("div", { className: "elb-viz__body", children })
+    }
+  );
+}
+
+// src/design/components/viz/DestinationMappingViz.tsx
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+function DestinationMappingViz({
+  initialEvent = 0,
+  caption = MAPPING_CAPTION,
+  ...rest
+}) {
+  const [index, setIndex] = useState2(initialEvent);
+  const event = MAPPING_EVENTS[index];
+  const name = `${event.entity} ${event.action}`;
+  return /* @__PURE__ */ jsx26(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__pick", children: [
+      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
+      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ jsxs18(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${item.entity} ${item.action}`,
+          "aria-pressed": position === index,
+          className: cx(
+            "elb-viz-mapping__chip",
+            position === index && "elb-viz-mapping__chip--active"
+          ),
+          onClick: () => setIndex(position),
+          children: [
+            /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
+            /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__chip-action", children: item.action })
+          ]
+        },
+        `${item.entity} ${item.action}`
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ jsx26(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
+    /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__body", children: [
+      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
+      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__card", children: [
+        /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__name", children: destination.label }),
+        /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__row", children: [
+          /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
+          /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ jsx26(
+            CodeTokens,
+            {
+              tokens: tokenizeCode(
+                formatRule(
+                  event.entity,
+                  event.action,
+                  destination.rule
+                ),
+                destination.rule.name
+              ),
+              active: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
+          /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__tag", children: "sends" }),
+          /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ jsx26(
+            CodeTokens,
+            {
+              tokens: tokenizeCode(line, destination.rule.name),
+              active: true
+            }
+          ) }, position)) })
+        ] })
+      ] }, destination.id)) })
+    ] }),
+    caption !== "" && /* @__PURE__ */ jsx26("p", { className: "elb-viz-mapping__caption", children: caption })
+  ] }) });
+}
+
+// src/design/components/viz/HeroTaggingViz.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+
+// src/design/components/viz/parts/timeline.ts
+function clamp(x) {
+  return Math.max(0, Math.min(1, x));
+}
+function ease(x) {
+  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+
+// src/design/components/viz/data/hero.ts
+var HERO_ARTICLES = [
+  { kicker: "Tech", title: "Return of the Bug", thumb: "bug" },
+  { kicker: "Tech", title: "The quiet return of RSS", thumb: "tech" },
+  { kicker: "Food", title: "Why sourdough came back", thumb: "food" }
+];
+var HERO_START = 9e3;
+var HERO_LOOP = 11500;
+var CUE = {
+  slideInStart: 0,
+  slideInEnd: 500,
+  entityStart: 900,
+  entityEnd: 1500,
+  impressionStart: 1800,
+  impressionEnd: 2600,
+  categoryStart: 2900,
+  categoryEnd: 3600,
+  titleStart: 3900,
+  titleEnd: 4700,
+  actionStart: 5e3,
+  actionEnd: 5800,
+  impressionEvent: 6200,
+  moveStart: 6900,
+  moveEnd: 7700,
+  click: 7850,
+  openEvent: 8e3,
+  fadeOut: 10600,
+  slideOutStart: 10800,
+  slideOutEnd: 11400
+};
+var MAX_ROWS = 24;
+var PAST = 1e4;
+var ENTITY = [
+  tok("data-elb", "attr"),
+  tok("=", "punct"),
+  tok('"article"', "str")
+];
+var IMPRESSION = [
+  tok("data-elbaction", "attr"),
+  tok("=", "punct"),
+  tok('"impression"', "str")
+];
+var CATEGORY = [
+  tok(" ", "punct"),
+  tok("data-elb-article", "attr"),
+  tok("=", "punct"),
+  tok('"category:#innerText"', "str")
+];
+var TITLE = [
+  tok(" ", "punct"),
+  tok("data-elb-article", "attr"),
+  tok("=", "punct"),
+  tok('"title:#innerText"', "str")
+];
+var ACTION = [
+  tok(" ", "punct"),
+  tok("data-elbaction", "attr"),
+  tok("=", "punct"),
+  tok('"click:open"', "str")
+];
+var TYPING = [
+  [CUE.entityStart, CUE.entityEnd],
+  [CUE.impressionStart, CUE.impressionEnd],
+  [CUE.categoryStart, CUE.categoryEnd],
+  [CUE.titleStart, CUE.titleEnd],
+  [CUE.actionStart, CUE.actionEnd]
+];
+function articleAt(loop) {
+  return HERO_ARTICLES[loop % HERO_ARTICLES.length];
+}
+function caretSlot(ph) {
+  if (ph >= CUE.entityStart - 400 && ph < CUE.impressionStart - 300)
+    return "entity";
+  if (ph >= CUE.impressionStart - 300 && ph < CUE.categoryStart - 100)
+    return "impression";
+  if (ph >= CUE.categoryStart - 100 && ph < CUE.titleStart - 100)
+    return "category";
+  if (ph >= CUE.titleStart - 100 && ph < CUE.actionStart - 100) return "title";
+  if (ph >= CUE.actionStart - 100 && ph < CUE.moveStart) return "action";
+  return null;
+}
+function typed(tokens, start, end, ph) {
+  return truncate(
+    tokens,
+    Math.round(clamp((ph - start) / (end - start)) * typedLength(tokens))
+  );
+}
+function heroLines(article, ph) {
+  const slot = caretSlot(ph);
+  const indent = tok("  ", "punct");
+  const entity = typed(ENTITY, CUE.entityStart, CUE.entityEnd, ph);
+  const impression = typed(
+    IMPRESSION,
+    CUE.impressionStart,
+    CUE.impressionEnd,
+    ph
+  );
+  const category = typed(CATEGORY, CUE.categoryStart, CUE.categoryEnd, ph);
+  const title = typed(TITLE, CUE.titleStart, CUE.titleEnd, ph);
+  const action = typed(ACTION, CUE.actionStart, CUE.actionEnd, ph);
+  const lines = [
+    {
+      id: "open",
+      tokens: [
+        tok("<article", "tag"),
+        tok(" ", "punct"),
+        tok("class", "attr"),
+        tok("=", "punct"),
+        tok('"teaser"', "str")
+      ],
+      on: false,
+      caret: null
+    },
+    ph >= CUE.entityStart - 400 ? {
+      id: "entity",
+      tokens: [indent, ...entity],
+      on: true,
+      caret: slot === "entity" ? 1 + entity.length : null
+    } : null,
+    ph >= CUE.impressionStart - 300 ? {
+      id: "impression",
+      tokens: [indent, ...impression],
+      on: true,
+      caret: slot === "impression" ? 1 + impression.length : null
+    } : null,
+    { id: "close", tokens: [tok(">", "tag")], on: false, caret: null },
+    {
+      id: "image",
+      tokens: [
+        indent,
+        tok("<img", "tag"),
+        tok(" ", "punct"),
+        tok("src", "attr"),
+        tok("=", "punct"),
+        tok(`"/img/${article.thumb}.jpg"`, "str"),
+        tok(" ", "punct"),
+        tok("alt", "attr"),
+        tok("=", "punct"),
+        tok('""', "str"),
+        tok(" />", "tag")
+      ],
+      on: false,
+      caret: null
+    },
+    {
+      id: "category",
+      tokens: [
+        indent,
+        tok("<span", "tag"),
+        tok(" ", "punct"),
+        tok("class", "attr"),
+        tok("=", "punct"),
+        tok('"kicker"', "str"),
+        ...category,
+        tok(">", "tag"),
+        tok(article.kicker, "text"),
+        tok("</span>", "tag")
+      ],
+      on: ph >= CUE.categoryStart - 100,
+      caret: slot === "category" ? 6 + category.length : null
+    },
+    {
+      id: "title",
+      tokens: [
+        indent,
+        tok("<h3", "tag"),
+        ...title,
+        tok(">", "tag"),
+        tok(article.title, "text"),
+        tok("</h3>", "tag")
+      ],
+      on: ph >= CUE.titleStart - 100,
+      caret: slot === "title" ? 2 + title.length : null
+    },
+    {
+      id: "action",
+      tokens: [
+        indent,
+        tok("<a", "tag"),
+        ...action,
+        tok(">", "tag"),
+        tok("Open \u2192", "text"),
+        tok("</a>", "tag")
+      ],
+      on: ph >= CUE.actionStart - 100,
+      caret: slot === "action" ? 2 + action.length : null
+    },
+    { id: "end", tokens: [tok("</article>", "tag")], on: false, caret: null }
+  ];
+  return lines.filter((line) => line !== null).map((line, index) => ({ ...line, n: index + 1 }));
+}
+function heroEvents(article) {
+  const data = { category: article.kicker, title: article.title };
+  return [
+    { name: "article impression", data },
+    { name: "article open", data }
+  ];
+}
+function heroRows(loop, ph) {
+  const rows = [];
+  for (let j = loop; j >= 0 && rows.length < MAX_ROWS; j--) {
+    const [impression, open] = heroEvents(articleAt(j));
+    const current = j === loop;
+    if (!current || ph >= CUE.openEvent)
+      rows.push({
+        ...open,
+        key: `${j}-open`,
+        age: current ? ph - CUE.openEvent : PAST
+      });
+    if (!current || ph >= CUE.impressionEvent)
+      rows.push({
+        ...impression,
+        key: `${j}-impression`,
+        age: current ? ph - CUE.impressionEvent : PAST
+      });
+  }
+  return rows.slice(0, MAX_ROWS);
+}
+function heroFrame(t) {
+  const loop = Math.floor(t / HERO_LOOP);
+  const ph = t - loop * HERO_LOOP;
+  const article = articleAt(loop);
+  const slideIn = ease(
+    clamp((ph - CUE.slideInStart) / (CUE.slideInEnd - CUE.slideInStart))
+  );
+  const slideOut = ease(
+    clamp((ph - CUE.slideOutStart) / (CUE.slideOutEnd - CUE.slideOutStart))
+  );
+  const move = ease(
+    clamp((ph - CUE.moveStart) / (CUE.moveEnd - CUE.moveStart))
+  );
+  const ripple = clamp((ph - CUE.click) / 550);
+  const cursorShown = ph >= CUE.moveStart - 200 && ph < CUE.fadeOut + 200;
+  const fadingOut = ph > CUE.fadeOut ? 1 - clamp((ph - CUE.fadeOut) / 200) : 1;
+  return {
+    article,
+    lines: heroLines(article, ph),
+    fade: ph < 250 ? ph / 250 : ph > CUE.fadeOut ? 1 - clamp((ph - CUE.fadeOut) / (HERO_LOOP - CUE.fadeOut - 150)) : 1,
+    caretOn: TYPING.some(([start, end]) => ph >= start && ph <= end) || ph % 900 < 500,
+    card: {
+      opacity: clamp(ph / 250) * (1 - slideOut),
+      offset: ph >= CUE.slideOutStart ? -slideOut * 190 : (1 - slideIn) * 190,
+      entity: ph >= CUE.entityEnd,
+      impression: ph >= CUE.impressionEnd,
+      category: ph >= CUE.categoryEnd,
+      title: ph >= CUE.titleEnd,
+      action: ph >= CUE.actionEnd
+    },
+    cursor: {
+      x: 22 + (1 - move) * 190,
+      y: 11 - (1 - move) * 80,
+      opacity: cursorShown ? clamp((ph - (CUE.moveStart - 200)) / 200) * fadingOut : 0,
+      ring: 1 + ripple * 1.8,
+      ringOpacity: ph >= CUE.click ? (1 - ripple) * 0.9 : 0,
+      pressed: ph >= CUE.click && ph < CUE.click + 180
+    },
+    rows: heroRows(loop, ph)
+  };
+}
+
+// src/design/components/viz/parts/EventsTable.tsx
+import { Fragment as Fragment7 } from "react";
+
+// src/design/components/viz/parts/style.ts
+function vizStyle(vars) {
+  const style = {};
+  return Object.assign(style, vars);
+}
+
+// src/design/components/viz/parts/EventsTable.tsx
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var SKELETON_ROWS = 6;
+function EventsTable({ rows }) {
+  const skeletons = Math.max(0, SKELETON_ROWS - rows.length);
+  return /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table__head", children: [
+      /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__query", children: [
+        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
+        " *",
+        " ",
+        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__keyword", children: "FROM" }),
+        " ",
+        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
+      ] }),
+      /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__live", children: [
+        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
+        "live"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx27("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ jsx27("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table__rows", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
+        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
+        /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__cell", children: [
+          "name",
+          /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__type", children: "STRING" })
+        ] }),
+        /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__cell", children: [
+          "data",
+          /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__type", children: "JSON" })
+        ] })
+      ] }),
+      rows.map((row, index) => /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          className: "elb-viz-table__row elb-viz-table__row--event",
+          style: vizStyle({
+            "--elb-viz-row-tint": 14 * (1 - clamp(row.age / 1600)),
+            "--elb-viz-row-opacity": clamp(row.age / 300),
+            "--elb-viz-row-shift": (1 - ease(clamp(row.age / 500))) * -80
+          }),
+          children: [
+            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
+            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell", children: row.name }),
+            /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
+              "{",
+              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                position === 0 ? '"' : ',"',
+                /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__json-key", children: key }),
+                '":"',
+                /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__json-value", children: value }),
+                '"'
+              ] }, key)),
+              "}"
+            ] })
+          ]
+        },
+        row.key
+      )),
+      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          className: "elb-viz-table__row elb-viz-table__row--skeleton",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
+            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__bar" }) }),
+            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__bar" }) })
+          ]
+        },
+        `skeleton-${index}`
+      ))
+    ] }) }) })
+  ] });
+}
+
+// src/design/components/viz/parts/hooks.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+var REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function useInView(ref, threshold) {
+  const [inView, setInView] = useState3(false);
+  useEffect2(() => {
+    const element = ref.current;
+    if (!element || typeof IntersectionObserver === "undefined") {
+      setInView(true);
+      return void 0;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        if (entry)
+          setInView(
+            entry.isIntersecting && entry.intersectionRatio >= threshold
+          );
+      },
+      { threshold }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, threshold]);
+  return inView;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState3(false);
+  useEffect2(() => {
+    if (typeof window.matchMedia !== "function") return void 0;
+    const media = window.matchMedia(REDUCED_MOTION);
+    const update = () => setReduced(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  return reduced;
+}
+
+// src/design/components/viz/parts/Pill.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function Pill({
+  part,
+  variant = "solid",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx28(
+    "span",
+    {
+      className: cx(
+        "elb-viz-pill",
+        `elb-viz-pill--${part}`,
+        variant === "outline" && "elb-viz-pill--outline",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/viz/parts/Thumb.tsx
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+var BUG_LINES = [
+  "M36 46 L28 42",
+  "M35 54 L27 56",
+  "M38 61 L31 66",
+  "M76 46 L84 42",
+  "M77 54 L85 56",
+  "M74 61 L81 66",
+  "M51 25 Q47 17 42 16",
+  "M61 25 Q65 17 70 16"
+];
+var BUG_SPOTS = [
+  [47, 44, 3.4],
+  [65, 44, 3.4],
+  [45, 56, 2.8],
+  [67, 56, 2.8]
+];
+function Bug() {
+  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+    /* @__PURE__ */ jsx29("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx29(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__shadow",
+        cx: 56,
+        cy: 66,
+        rx: 30,
+        ry: 6
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "g",
+      {
+        className: "elb-viz-thumb__legs",
+        strokeWidth: 2.4,
+        strokeLinecap: "round",
+        children: BUG_LINES.map((d) => /* @__PURE__ */ jsx29("path", { d }, d))
+      }
+    ),
+    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
+    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
+    /* @__PURE__ */ jsx29(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__ink",
+        cx: 56,
+        cy: 30,
+        rx: 10,
+        ry: 7.5
+      }
+    ),
+    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ jsx29(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__shell",
+        cx: 56,
+        cy: 50,
+        rx: 21,
+        ry: 18
+      }
+    ),
+    /* @__PURE__ */ jsx29("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
+    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ jsx29(
+      "circle",
+      {
+        className: "elb-viz-thumb__ink",
+        cx: x,
+        cy: y,
+        r
+      },
+      `${x}-${y}`
+    )),
+    /* @__PURE__ */ jsx29(
+      "path",
+      {
+        className: "elb-viz-thumb__shine",
+        d: "M44 38 Q48 35 52 36",
+        strokeWidth: 2,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function Tech() {
+  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+    /* @__PURE__ */ jsx29("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx29(
+      "rect",
+      {
+        className: "elb-viz-thumb__badge",
+        x: 38,
+        y: 25,
+        width: 36,
+        height: 36,
+        rx: 8
+      }
+    ),
+    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
+    /* @__PURE__ */ jsx29(
+      "path",
+      {
+        className: "elb-viz-thumb__wave",
+        d: "M45 42 A10 10 0 0 1 57 54",
+        strokeWidth: 3.5,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "path",
+      {
+        className: "elb-viz-thumb__wave",
+        d: "M45 34.5 A17.5 17.5 0 0 1 64.5 54",
+        strokeWidth: 3.5,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function Food() {
+  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+    /* @__PURE__ */ jsx29("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx29(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__plate",
+        cx: 56,
+        cy: 62,
+        rx: 44,
+        ry: 10
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__loaf",
+        cx: 56,
+        cy: 50,
+        rx: 31,
+        ry: 19
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__crust",
+        cx: 56,
+        cy: 45,
+        rx: 25,
+        ry: 13
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "path",
+      {
+        className: "elb-viz-thumb__score",
+        d: "M40 44 Q56 35 72 44",
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "path",
+      {
+        className: "elb-viz-thumb__score",
+        d: "M44 51 Q56 45 68 51",
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function Thumb({ kind }) {
+  return /* @__PURE__ */ jsx29(
+    "svg",
+    {
+      className: cx("elb-viz-thumb", `elb-viz-thumb--${kind}`),
+      viewBox: "0 0 112 86",
+      preserveAspectRatio: "xMidYMid slice",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: kind === "bug" ? /* @__PURE__ */ jsx29(Bug, {}) : kind === "tech" ? /* @__PURE__ */ jsx29(Tech, {}) : /* @__PURE__ */ jsx29(Food, {})
+    }
+  );
+}
+
+// src/design/components/viz/HeroTaggingViz.tsx
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+var MAX_STEP = 64;
+function HeroTaggingViz({
+  playing = true,
+  speed = 1,
+  startAt = HERO_START,
+  ...rest
+}) {
+  const paneRef = useRef2(null);
+  const inView = useInView(paneRef, 0);
+  const reduced = useReducedMotion();
+  const [time, setTime] = useState4(startAt);
+  const animate = playing && inView && !reduced;
+  useEffect3(() => {
+    if (!animate) return void 0;
+    let frame = 0;
+    let last = performance.now();
+    const step = (now) => {
+      const elapsed = Math.min(MAX_STEP, now - last);
+      last = now;
+      setTime((value) => value + elapsed * speed);
+      frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [animate, speed]);
+  const { article, lines, fade: fade2, caretOn, card, cursor, rows } = heroFrame(time);
+  return /* @__PURE__ */ jsx30(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero", children: [
+    /* @__PURE__ */ jsxs21("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero__bar", children: [
+        /* @__PURE__ */ jsxs21("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx30("span", {}),
+          /* @__PURE__ */ jsx30("span", {}),
+          /* @__PURE__ */ jsx30("span", {})
+        ] }),
+        /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
+      ] }),
+      /* @__PURE__ */ jsx30(
+        "div",
+        {
+          className: "elb-viz-hero__code",
+          style: vizStyle({ "--elb-viz-fade": fade2 }),
+          children: lines.map((line) => /* @__PURE__ */ jsx30(
+            CodeLine,
+            {
+              number: line.n,
+              bar: line.on ? "entity" : void 0,
+              className: cx(
+                "elb-viz-hero__line",
+                line.on && "elb-viz-hero__line--on"
+              ),
+              children: line.caret === null ? /* @__PURE__ */ jsx30(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
+                /* @__PURE__ */ jsx30(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
+                /* @__PURE__ */ jsx30(
+                  "span",
+                  {
+                    className: "elb-viz-caret",
+                    style: vizStyle({ "--elb-viz-caret": caretOn ? 1 : 0 })
+                  }
+                ),
+                /* @__PURE__ */ jsx30(CodeTokens, { tokens: line.tokens.slice(line.caret) })
+              ] })
+            },
+            line.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx30("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ jsxs21(
+        "div",
+        {
+          className: cx(
+            "elb-viz-hero__card",
+            card.entity && "elb-viz-hero__card--tagged"
+          ),
+          style: vizStyle({
+            "--elb-viz-card-opacity": card.opacity,
+            "--elb-viz-card-offset": card.offset
+          }),
+          children: [
+            /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero__pills", children: [
+              card.entity && /* @__PURE__ */ jsx30(Pill, { part: "entity", children: "article" }),
+              card.impression && /* @__PURE__ */ jsx30(Pill, { part: "action", children: "impression" })
+            ] }),
+            /* @__PURE__ */ jsx30("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ jsx30(Thumb, { kind: article.thumb }) }),
+            /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero__text", children: [
+              /* @__PURE__ */ jsx30(
+                "span",
+                {
+                  className: cx(
+                    "elb-viz-hero__kicker",
+                    card.category && "elb-viz-hero__kicker--on"
+                  ),
+                  children: article.kicker
+                }
+              ),
+              /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ jsx30(
+                "span",
+                {
+                  className: cx(
+                    "elb-viz-hero__mark",
+                    card.title && "elb-viz-hero__mark--on"
+                  ),
+                  children: article.title
+                }
+              ) }),
+              /* @__PURE__ */ jsx30("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ jsxs21(
+                "span",
+                {
+                  className: cx(
+                    "elb-viz-hero__link",
+                    card.action && "elb-viz-hero__link--on"
+                  ),
+                  children: [
+                    "Open \u2192",
+                    /* @__PURE__ */ jsxs21(
+                      "span",
+                      {
+                        className: "elb-viz-hero__cursor",
+                        "aria-hidden": "true",
+                        style: vizStyle({
+                          "--elb-viz-cursor-x": cursor.x,
+                          "--elb-viz-cursor-y": cursor.y,
+                          "--elb-viz-cursor-opacity": cursor.opacity,
+                          "--elb-viz-ring-scale": cursor.ring,
+                          "--elb-viz-ring-opacity": cursor.ringOpacity,
+                          "--elb-viz-press": cursor.pressed ? 0.8 : 1
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__ring" }),
+                          /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__pointer" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx30(EventsTable, { rows })
+  ] }) });
+}
+
+// src/design/components/viz/ArticleTeaserTracking.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+
+// src/design/components/viz/data/article-teaser.ts
+var TEASER_ENTITY = "article";
+var TEASER_ACTION = "click:open";
+var TEASER_PAGE_IDS = ["home", "article"];
+var TEASER_PAGES = {
+  home: {
+    template: "HomePage.tsx",
+    organism: "HomeFeed",
+    pagetype: "homepage",
+    list: "homefeed",
+    items: "stories",
+    step: 3,
+    listEffect: "homefeed",
+    globalsEffect: "homepage",
+    header: "<HomeFeed /> \xB7 homepage",
+    articles: [
+      { kicker: "Tech", title: "Return of the Bug" },
+      { kicker: "Tech", title: "The quiet return of RSS" },
+      { kicker: "Food", title: "Why sourdough came back" }
+    ]
+  },
+  article: {
+    template: "ArticlePage.tsx",
+    organism: "RelatedStories",
+    pagetype: "article",
+    list: "related",
+    items: "related",
+    step: 4,
+    listEffect: "related",
+    globalsEffect: "articlepage",
+    header: "<RelatedStories /> \xB7 article page",
+    heading: "Related stories",
+    articles: [
+      { kicker: "Tech", title: "The quiet return of RSS" },
+      { kicker: "Science", title: "A year on the ice shelf" },
+      { kicker: "Culture", title: "Small venues, big nights" }
+    ]
+  }
+};
+var TEASER_STEPS = [
+  { step: 1, label: "Atom" },
+  { step: 2, label: "Molecule" },
+  { step: 3, label: TEASER_PAGES.home.organism },
+  { step: 4, label: TEASER_PAGES.article.organism },
+  { step: 5, label: "Pages" }
+];
+var TEASER_CAPTIONS = {
+  1: `Link carries the ${TEASER_ACTION} action wherever it is rendered.`,
+  2: `ArticleTeaser makes each card an ${TEASER_ENTITY} entity and reads category and title from its elements.`,
+  3: `${TEASER_PAGES.home.organism} wraps three teasers and adds list:${TEASER_PAGES.home.list} context to their events.`,
+  4: `${TEASER_PAGES.article.organism} reuses the same ArticleTeaser and adds list:${TEASER_PAGES.article.list} context.`,
+  5: "Each page template sets pagetype as a global, which is added to every event on that page."
+};
+var file = (step, name, level) => ({
+  kind: "file",
+  step,
+  name,
+  level
+});
+var code = (step, tokens, effect, part) => ({ kind: "code", step, tokens, effect, part });
+var PROPERTY = `data-elb-${TEASER_ENTITY}`;
+function buildItems() {
+  const items = [
+    file(1, "Link.tsx", "atom"),
+    code(1, [
+      tok("export const", "kw"),
+      tok(" Link ", "text"),
+      tok("= ({ href, children }) => (", "punct")
+    ]),
+    code(
+      1,
+      [
+        tok("  ", "punct"),
+        tok("<a", "tag"),
+        tok(" ", "punct"),
+        tok("href", "attr"),
+        tok("={href} ", "punct"),
+        tok("data-elbaction", "attr", "action"),
+        tok("=", "punct"),
+        tok(`"${TEASER_ACTION}"`, "str", "action"),
+        tok(">", "tag")
+      ],
+      "action",
+      "action"
+    ),
+    code(1, [tok("    ", "punct"), tok("{children}", "punct")]),
+    code(1, [tok("  ", "punct"), tok("</a>", "tag")]),
+    code(1, [tok(");", "punct")]),
+    file(2, "ArticleTeaser.tsx", "molecule"),
+    code(2, [
+      tok("export const", "kw"),
+      tok(" ArticleTeaser ", "text"),
+      tok("= ({", "punct")
+    ]),
+    code(2, [tok("  title, category, image, url, position,", "punct")]),
+    code(2, [tok("}) => (", "punct")]),
+    code(
+      2,
+      [
+        tok("  ", "punct"),
+        tok("<article", "tag"),
+        tok(" ", "punct"),
+        tok("data-elb", "attr", "entity"),
+        tok("=", "punct"),
+        tok(`"${TEASER_ENTITY}"`, "str", "entity")
+      ],
+      "entity",
+      "entity"
+    ),
+    code(
+      2,
+      [
+        tok("    ", "punct"),
+        tok(PROPERTY, "attr", "property"),
+        tok("={`", "punct"),
+        tok("position:${position}", "str", "property"),
+        tok("`}", "punct"),
+        tok(">", "tag")
+      ],
+      "position",
+      "property"
+    ),
+    code(
+      2,
+      [
+        tok("    ", "punct"),
+        tok("<img", "tag"),
+        tok(" ", "punct"),
+        tok("src", "attr"),
+        tok("={image} ", "punct"),
+        tok("/>", "tag")
+      ],
+      "image"
+    ),
+    code(
+      2,
+      [
+        tok("    ", "punct"),
+        tok("<span", "tag"),
+        tok(" ", "punct"),
+        tok(PROPERTY, "attr", "property"),
+        tok("=", "punct"),
+        tok('"category:#innerText"', "str", "property"),
+        tok(">", "tag"),
+        tok("{category}", "punct"),
+        tok("</span>", "tag")
+      ],
+      "category",
+      "property"
+    ),
+    code(
+      2,
+      [
+        tok("    ", "punct"),
+        tok("<h3", "tag"),
+        tok(" ", "punct"),
+        tok(PROPERTY, "attr", "property"),
+        tok("=", "punct"),
+        tok('"title:#innerText"', "str", "property"),
+        tok(">", "tag"),
+        tok("{title}", "punct"),
+        tok("</h3>", "tag")
+      ],
+      "title",
+      "property"
+    ),
+    code(2, [
+      tok("    ", "punct"),
+      tok("<Link", "tag"),
+      tok(" ", "punct"),
+      tok("href", "attr"),
+      tok("={url}", "punct"),
+      tok(">", "tag"),
+      tok("Open \u2192", "text"),
+      tok("</Link>", "tag")
+    ]),
+    code(2, [tok("  ", "punct"), tok("</article>", "tag")]),
+    code(2, [tok(");", "punct")])
+  ];
+  for (const id of TEASER_PAGE_IDS) {
+    const page = TEASER_PAGES[id];
+    items.push(
+      file(page.step, `${page.organism}.tsx`, "organism"),
+      code(
+        page.step,
+        [
+          tok("<section", "tag"),
+          tok(" ", "punct"),
+          tok("data-elbcontext", "attr", "context"),
+          tok("=", "punct"),
+          tok(`"list:${page.list}"`, "str", "context"),
+          tok(">", "tag")
+        ],
+        page.listEffect,
+        "context"
+      ),
+      code(page.step, [
+        tok(`  {${page.items}.map((s, i) => `, "punct"),
+        tok("<ArticleTeaser", "tag"),
+        tok(" {...s} ", "punct"),
+        tok("position", "attr"),
+        tok("={i + 1} ", "punct"),
+        tok("/>", "tag"),
+        tok(")}", "punct")
+      ]),
+      code(page.step, [tok("</section>", "tag")])
+    );
+  }
+  for (const id of TEASER_PAGE_IDS) {
+    const page = TEASER_PAGES[id];
+    items.push(
+      file(5, page.template, "template"),
+      code(
+        5,
+        [
+          tok("<main", "tag"),
+          tok(" ", "punct"),
+          tok("data-elbglobals", "attr", "globals"),
+          tok("=", "punct"),
+          tok(`"pagetype:${page.pagetype}"`, "str", "globals"),
+          tok(">", "tag")
+        ],
+        page.globalsEffect,
+        "globals"
+      ),
+      code(5, [tok("  ", "punct"), tok(`<${page.organism} />`, "tag")]),
+      code(5, [tok("</main>", "tag")])
+    );
+  }
+  return items;
+}
+var TEASER_ITEMS = buildItems();
+function hasEffect(item) {
+  return item.kind === "code" && item.effect !== void 0;
+}
+function teaserStepStart(step) {
+  return TEASER_ITEMS.findIndex((item) => item.step === step);
+}
+function teaserStepEnd(step) {
+  let end = teaserStepStart(step);
+  while (end < TEASER_ITEMS.length && TEASER_ITEMS[end].step === step) end += 1;
+  return end;
+}
+function teaserAdvance(n) {
+  if (n >= TEASER_ITEMS.length) return null;
+  const item = TEASER_ITEMS[n];
+  if (item.kind === "file" && (n === 0 || TEASER_ITEMS[n - 1].step !== item.step))
+    return { next: n + 1, delay: 1300 };
+  let next = n;
+  while (next < TEASER_ITEMS.length && TEASER_ITEMS[next].step === item.step && !hasEffect(TEASER_ITEMS[next]))
+    next += 1;
+  if (next < TEASER_ITEMS.length && TEASER_ITEMS[next].step === item.step)
+    next += 1;
+  if (next >= TEASER_ITEMS.length) return { next, delay: null };
+  return {
+    next,
+    delay: 1700 + (TEASER_ITEMS[next].step !== item.step ? 1600 : 0)
+  };
+}
+
+// src/design/components/viz/ArticleTeaserTracking.tsx
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+var FIRST_DELAY = 800;
+var JUMP_DELAY = 250;
+var SCROLL_DELAY = 400;
+function fade(on) {
+  return cx("elb-viz-teaser__fade", on && "elb-viz-teaser__fade--on");
+}
+function TeaserCard({
+  article,
+  position,
+  seen,
+  ahead
+}) {
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      className: cx(
+        "elb-viz-teaser__card",
+        seen.has("entity") && "elb-viz-teaser__card--entity",
+        ahead && "elb-viz-teaser__card--ahead"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs22("span", { className: "elb-viz-teaser__pills", children: [
+          /* @__PURE__ */ jsx31(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
+          /* @__PURE__ */ jsx31(
+            Pill,
+            {
+              part: "property",
+              variant: "outline",
+              className: fade(seen.has("position")),
+              children: position
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx31("div", { className: cx("elb-viz-teaser__photo", fade(seen.has("image"))), children: "photo" }),
+        /* @__PURE__ */ jsx31(
+          "span",
+          {
+            className: cx(
+              "elb-viz-teaser__kicker",
+              fade(seen.has("category")),
+              seen.has("category") && "elb-viz-teaser__kicker--on"
+            ),
+            children: article.kicker
+          }
+        ),
+        /* @__PURE__ */ jsx31(
+          "span",
+          {
+            className: cx(
+              "elb-viz-teaser__title",
+              fade(seen.has("title")),
+              seen.has("title") && "elb-viz-teaser__title--on"
+            ),
+            children: article.title
+          }
+        ),
+        /* @__PURE__ */ jsx31(
+          "span",
+          {
+            className: cx(
+              "elb-viz-teaser__link",
+              fade(seen.has("action")),
+              seen.has("action") && "elb-viz-teaser__link--on"
+            ),
+            children: "Open \u2192"
+          }
+        )
+      ]
+    }
+  );
+}
+function TeaserGroup({
+  page,
+  seen,
+  current,
+  lead
+}) {
+  const globalsOn = seen.has(page.globalsEffect);
+  const listOn = seen.has(page.listEffect);
+  const reached = page.step <= current;
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      className: cx(
+        "elb-viz-teaser__page",
+        globalsOn && "elb-viz-teaser__page--on",
+        !reached && !lead && "elb-viz-teaser__page--ahead"
+      ),
+      children: [
+        /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ jsx31(
+          Pill,
+          {
+            part: "globals",
+            className: fade(globalsOn),
+            children: `pagetype:${page.pagetype}`
+          }
+        ) }),
+        /* @__PURE__ */ jsxs22(
+          "div",
+          {
+            className: cx(
+              "elb-viz-teaser__list",
+              listOn && "elb-viz-teaser__list--on"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs22("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
+                /* @__PURE__ */ jsxs22("span", { className: "elb-viz-teaser__list-label", children: [
+                  /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__list-name", children: page.header }),
+                  page.heading !== void 0 && /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__list-heading", children: page.heading })
+                ] }),
+                /* @__PURE__ */ jsx31(Pill, { part: "context", children: `list:${page.list}` })
+              ] }),
+              /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ jsx31(
+                TeaserCard,
+                {
+                  article,
+                  position: index + 1,
+                  seen,
+                  ahead: !reached && !(lead && index === 0)
+                },
+                article.title
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ArticleTeaserTracking({
+  autoplay = true,
+  speed = 1,
+  initialStep,
+  ...rest
+}) {
+  const codeRef = useRef3(null);
+  const inView = useInView(codeRef, 0.35);
+  const reduced = useReducedMotion();
+  const [shown, setShown] = useState5(
+    () => initialStep ? teaserStepEnd(initialStep) : 0
+  );
+  const [delay, setDelay] = useState5(FIRST_DELAY);
+  const playing = autoplay && inView && !reduced;
+  useEffect4(() => {
+    if (reduced) setShown(TEASER_ITEMS.length);
+  }, [reduced]);
+  useEffect4(() => {
+    if (!playing || delay === null) return void 0;
+    const timer = setTimeout(() => {
+      const advance = teaserAdvance(shown);
+      if (!advance) {
+        setDelay(null);
+        return;
+      }
+      setShown(advance.next);
+      setDelay(advance.delay);
+    }, delay / speed);
+    return () => clearTimeout(timer);
+  }, [playing, delay, shown, speed]);
+  useEffect4(() => {
+    const pane = codeRef.current;
+    if (!pane || shown === 0 || typeof pane.scrollTo !== "function")
+      return void 0;
+    const timer = setTimeout(() => {
+      const line = pane.querySelector(`[data-line="${shown - 1}"]`);
+      const top = line instanceof HTMLElement ? line.offsetTop - pane.clientHeight / 2 : 0;
+      pane.scrollTo({
+        top: Math.max(0, top),
+        behavior: reduced ? "auto" : "smooth"
+      });
+    }, SCROLL_DELAY);
+    return () => clearTimeout(timer);
+  }, [shown, reduced]);
+  const jump = (step) => {
+    if (autoplay && !reduced) {
+      setShown(teaserStepStart(step));
+      setDelay(JUMP_DELAY);
+    } else {
+      setShown(teaserStepEnd(step));
+    }
+  };
+  const count = Math.min(shown, TEASER_ITEMS.length);
+  const visibleStep = count > 0 ? TEASER_ITEMS[count - 1].step : 0;
+  const current = visibleStep === 0 ? 1 : visibleStep;
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of TEASER_ITEMS.slice(0, count))
+    if (item.kind === "code" && item.effect) seen.add(item.effect);
+  let lineNumber = 0;
+  let separated = false;
+  const lines = TEASER_ITEMS.map((item, index) => {
+    const visible = item.step <= visibleStep;
+    const lineClass = cx(
+      "elb-viz-teaser__line",
+      visible && "elb-viz-teaser__line--visible",
+      visible && item.step < current && "elb-viz-teaser__line--dim",
+      item.kind === "file" && "elb-viz-teaser__line--file"
+    );
+    if (item.kind === "file") {
+      lineNumber = 0;
+      const fileClass = cx(
+        "elb-viz-teaser__file",
+        separated && "elb-viz-teaser__file--separated"
+      );
+      separated = true;
+      return /* @__PURE__ */ jsx31("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsxs22("div", { className: fileClass, children: [
+        /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__file-name", children: item.name }),
+        /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__file-level", children: item.level })
+      ] }) }, index);
+    }
+    lineNumber += 1;
+    const reached = index < count;
+    const isCurrent = index === count - 1 && item.effect !== void 0;
+    return /* @__PURE__ */ jsx31("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsx31(
+      CodeLine,
+      {
+        number: lineNumber,
+        bar: reached ? item.part : void 0,
+        className: cx(
+          "elb-viz-teaser__code",
+          isCurrent && `elb-viz-teaser__code--current-${item.part ?? "plain"}`
+        ),
+        children: /* @__PURE__ */ jsx31(CodeTokens, { tokens: item.tokens, active: reached })
+      }
+    ) }, index);
+  });
+  return /* @__PURE__ */ jsx31(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ jsxs22("div", { className: "elb-viz-teaser", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "elb-viz-teaser__header", children: [
+      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ jsxs22(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Step ${step}: ${label}`,
+          "aria-pressed": step === current,
+          className: cx(
+            "elb-viz-teaser__step",
+            step === current && "elb-viz-teaser__step--active",
+            step < current && "elb-viz-teaser__step--done"
+          ),
+          onClick: () => jump(step),
+          children: [
+            /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__step-number", children: step }),
+            /* @__PURE__ */ jsx31("span", { children: label })
+          ]
+        },
+        step
+      )) }),
+      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ jsx31(EventLegend, {}) })
+    ] }),
+    /* @__PURE__ */ jsx31("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
+    /* @__PURE__ */ jsxs22("div", { className: "elb-viz-teaser__body", children: [
+      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ jsx31("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
+      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ jsx31(
+        TeaserGroup,
+        {
+          page: TEASER_PAGES[id],
+          seen,
+          current,
+          lead: index === 0
+        },
+        id
+      )) })
+    ] })
+  ] }) });
+}
+export {
+  ArticleTeaserTracking,
+  Button,
+  Card,
+  CardGrid,
+  CaseCard,
+  CheckList,
+  Cluster,
+  DestinationMappingViz,
+  EventLegend,
+  Eyebrow,
+  FaqItem,
+  FeatureItem,
+  Hero,
+  HeroTaggingViz,
+  HighlightCard,
+  Icon,
+  InlineCode,
+  InstallCommand,
+  PlanCard,
+  ProblemCard,
+  Section,
+  SectionHeading,
+  Split,
+  Stat,
+  Text,
+  TextLink
+};
+//# sourceMappingURL=index.mjs.map