@walkeros/explorer 4.7.2 → 4.8.0-next-1791496487198

package/dist/design/components/index.cjs

@@ -0,0 +1,2872 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/design/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  ArticleTeaserTracking: () => ArticleTeaserTracking,
+  BrowserFrame: () => BrowserFrame,
+  Button: () => Button,
+  Card: () => Card,
+  CardGrid: () => CardGrid,
+  CaseCard: () => CaseCard,
+  CheckList: () => CheckList,
+  Cluster: () => Cluster,
+  DestinationMappingViz: () => DestinationMappingViz,
+  EventLegend: () => EventLegend,
+  Eyebrow: () => Eyebrow,
+  FaqItem: () => FaqItem,
+  FeatureItem: () => FeatureItem,
+  Hero: () => Hero,
+  HeroTaggingViz: () => HeroTaggingViz,
+  HighlightCard: () => HighlightCard,
+  Icon: () => Icon,
+  InlineCode: () => InlineCode,
+  InstallCommand: () => InstallCommand,
+  PhotoPlaceholder: () => PhotoPlaceholder,
+  PlanCard: () => PlanCard,
+  ProblemCard: () => ProblemCard,
+  QuickstartSteps: () => QuickstartSteps,
+  Section: () => Section,
+  SectionHeading: () => SectionHeading,
+  Split: () => Split,
+  Stat: () => Stat,
+  Text: () => Text,
+  TextLink: () => TextLink
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/design/components/cx.ts
+function cx(...names) {
+  return names.filter((name) => Boolean(name)).join(" ");
+}
+
+// src/design/components/atoms/Button.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    children,
+    arrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: " \u2192" })
+  ] });
+  return Link ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { ...props, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, children: content });
+}
+function ButtonElement({
+  children,
+  variant,
+  arrow,
+  block,
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ...rest,
+      type,
+      className: classes({ variant, block, className }),
+      children: [
+        children,
+        arrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: " \u2192" })
+      ]
+    }
+  );
+}
+function Button(props) {
+  return props.href === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonElement, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkButton, { ...props });
+}
+
+// src/design/components/atoms/InlineCode.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function InlineCode({ children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { ...rest, className: cx("elb-code-inline", className), children });
+}
+
+// src/design/components/atoms/EventLegend.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)("div", { ...rest, className: cx("elb-legend", className), "data-theme": "dark", children: PARTS.filter(([part]) => !parts || parts.includes(part)).map(
+    ([part, color]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "elb-legend__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "i",
+        {
+          className: "elb-legend__swatch",
+          style: { background: color },
+          "aria-hidden": "true"
+        }
+      ),
+      part
+    ] }, part)
+  ) });
+}
+
+// src/design/components/atoms/Icon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GLYPHS = {
+  check: {
+    viewBox: "0 0 16 16",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M3 8.5l3 3 7-7",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  },
+  copy: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "rect",
+        {
+          x: 9,
+          y: 9,
+          width: 12,
+          height: 12,
+          rx: 2,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "path",
+        {
+          d: "M5 15V5a2 2 0 0 1 2-2h10",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        }
+      )
+    ] })
+  },
+  lock: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+        ]
+      }
+    )
+  },
+  reload: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 4v6h-6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20.5 15a9 9 0 1 1-2.1-9.4L21 10" })
+        ]
+      }
+    )
+  },
+  bookmark: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M6 3h12v18l-6-4-6 4z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinejoin: "round"
+      }
+    )
+  },
+  warning: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17h.01" })
+        ]
+      }
+    )
+  }
+};
+function Icon({ name, size = 16, className, ...rest }) {
+  const { viewBox, strokes } = GLYPHS[name];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      "aria-hidden": true,
+      focusable: false,
+      ...rest,
+      width: size,
+      height: size,
+      className: cx("elb-icon", `elb-icon--${name}`, className),
+      viewBox,
+      children: strokes
+    }
+  );
+}
+
+// src/design/components/atoms/Eyebrow.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Eyebrow({
+  children,
+  variant = "eyebrow",
+  tone = "link",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "p",
+    {
+      ...rest,
+      className: cx(
+        "elb-eyebrow",
+        variant === "label" && "elb-eyebrow--label",
+        tone === "muted" && "elb-eyebrow--muted",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/atoms/Stat.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Stat({ value, children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...rest, className: cx("elb-stat", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "elb-stat__value", children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "elb-stat__label", children })
+  ] });
+}
+
+// src/design/components/atoms/Text.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Text({
+  children,
+  size = "body",
+  tone = "muted",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "p",
+    {
+      ...rest,
+      className: cx(
+        "elb-text",
+        size === "lg" && "elb-text--lg",
+        tone === "fg" && "elb-text--fg",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/atoms/TextLink.tsx
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    children,
+    arrow && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", children: " \u2192" })
+  ] });
+  return Link ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Link, { ...props, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { ...props, children: content });
+}
+
+// src/design/components/atoms/Card.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Card({
+  children,
+  padding = "md",
+  radius = "lg",
+  hover = false,
+  highlight = false,
+  glow = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "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
+var import_react = require("react");
+var import_jsx_runtime10 = require("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 = (0, import_react.useId)();
+  const [state, setState] = (0, import_react.useState)("idle");
+  const mounted = (0, import_react.useRef)(true);
+  const timer = (0, import_react.useRef)(void 0);
+  (0, import_react.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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "button",
+      {
+        ...rest,
+        "aria-describedby": describedBy ? `${hintId} ${describedBy}` : hintId,
+        type: "button",
+        className: cx("elb-cmd", className),
+        onClick: () => {
+          void copy();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "elb-cmd__prompt", "aria-hidden": "true", children: [
+              "$",
+              " "
+            ] }),
+            command
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "span",
+            {
+              className: cx(
+                "elb-cmd__icon",
+                state === "done" && "elb-cmd__icon--done"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: state === "done" ? "check" : "copy" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { id: hintId, hidden: true, children: "Copy install command" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "elb-cmd__status", role: "status", children: state === "done" ? "Copied" : state === "failed" ? "Copy failed" : "" })
+  ] });
+}
+
+// src/design/components/atoms/PhotoPlaceholder.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function PhotoPlaceholder({
+  label = "photo",
+  tone = "theme",
+  className,
+  ...rest
+}) {
+  const named = rest.role !== void 0 || rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "aria-hidden": named ? void 0 : true,
+      ...rest,
+      className: cx("elb-photo", tone === "viz" && "elb-photo--viz", className),
+      ...tone === "viz" ? { "data-theme": "dark" } : {},
+      children: label
+    }
+  );
+}
+
+// src/design/components/molecules/CheckList.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CheckList({
+  items,
+  layout = "inline",
+  align = "start",
+  className,
+  ...rest
+}) {
+  const stack = layout === "stack";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "ul",
+    {
+      ...rest,
+      className: cx(
+        "elb-checklist",
+        stack && "elb-checklist--stack",
+        align === "center" && "elb-checklist--center",
+        className
+      ),
+      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "elb-checklist__item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "check", size: stack ? 14 : 16 }),
+        item
+      ] }, index))
+    }
+  );
+}
+
+// src/design/components/molecules/SectionHeading.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SectionHeading({
+  title,
+  eyebrow,
+  lead,
+  level = 2,
+  size = "lg",
+  highlight,
+  align = "start",
+  className,
+  ...rest
+}) {
+  const hero = level === 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-sh",
+        (hero || align === "center") && "elb-sh--center",
+        className
+      ),
+      children: [
+        eyebrow !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Eyebrow, { children: eyebrow }),
+        hero ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h1", { className: "elb-sh__title elb-sh__title--display", children: [
+          title,
+          highlight !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "elb-sh__highlight", children: highlight })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: cx("elb-sh__title", `elb-sh__title--${size}`), children: title }),
+        lead !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cx("elb-sh__lead", hero && "elb-sh__lead--hero"), children: lead })
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/ProblemCard.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ProblemCard({
+  number,
+  title,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    Card,
+    {
+      ...rest,
+      padding: "sm",
+      hover: true,
+      className: cx("elb-problem-card", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("h3", { className: "elb-problem-card__title", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "elb-problem-card__number", children: number }),
+          title
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "elb-problem-card__text", children })
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/FeatureItem.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function FeatureItem({
+  title,
+  children,
+  href,
+  linkLabel = "Docs",
+  linkComponent,
+  linkAttributes,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ...rest, className: cx("elb-feature", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "check", size: 20 }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "elb-feature__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "elb-feature__text", children }),
+      href !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        TextLink,
+        {
+          ...linkAttributes,
+          href,
+          arrow: true,
+          linkComponent,
+          className: "elb-feature__link",
+          children: linkLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/design/components/molecules/FaqItem.tsx
+var import_react2 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function FaqItem({
+  question,
+  children,
+  className,
+  ...rest
+}) {
+  const parts = Array.isArray(children) ? children : [children];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { ...rest, className: cx("elb-faq", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { className: "elb-faq__question", children: question }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "elb-faq__answer", children: parts.map(
+      (part, index) => typeof part === "string" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: part }, index) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react2.Fragment, { children: part }, index)
+    ) })
+  ] });
+}
+
+// src/design/components/molecules/PlanCard.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function PlanCard({
+  label,
+  title,
+  children,
+  features,
+  cta,
+  highlight = false,
+  linkComponent,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Card,
+    {
+      ...rest,
+      padding: "md",
+      highlight,
+      className: cx("elb-plan", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Eyebrow, { variant: "label", tone: highlight ? "link" : "muted", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "elb-plan__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "elb-plan__text", children }),
+        features && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckList, { items: features, layout: "stack" }),
+        cta && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Button,
+          {
+            ...cta.attributes,
+            href: cta.href,
+            variant: highlight ? "primary" : "secondary",
+            block: true,
+            linkComponent,
+            children: cta.label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/CaseCard.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function CaseCard({
+  label,
+  title,
+  children,
+  stats,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Card, { ...rest, padding: "md", className: cx("elb-case-card", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Eyebrow, { variant: "label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "elb-case-card__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "elb-case-card__text", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "elb-case-card__stats", children: stats.map((stat, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Stat, { value: stat.value, children: stat.label }, index)) })
+  ] });
+}
+
+// src/design/components/molecules/HighlightCard.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function HighlightCard({
+  label,
+  title,
+  children,
+  cta,
+  linkComponent,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    Card,
+    {
+      ...rest,
+      padding: "lg",
+      radius: "xl",
+      hover: true,
+      glow: true,
+      className: cx("elb-highlight-card", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Eyebrow, { variant: "label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "elb-highlight-card__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "elb-highlight-card__text", children }),
+        cta && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Button,
+          {
+            ...cta.attributes,
+            href: cta.href,
+            variant: "secondary",
+            arrow: true,
+            linkComponent,
+            className: "elb-highlight-card__cta",
+            children: cta.label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/design/components/molecules/BrowserFrame.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function BrowserFrame({
+  url,
+  bookmarks,
+  onNavigate,
+  onReload,
+  actions,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ...rest, className: cx("elb-browser", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "elb-browser__bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "elb-browser__dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "elb-browser__address", title: url, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "lock", size: 14 }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "elb-browser__url", children: url })
+      ] }),
+      onReload && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "elb-browser__reload",
+          "aria-label": "Reload",
+          onClick: onReload,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "reload", size: 16 })
+        }
+      ),
+      actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "elb-browser__actions", children: actions })
+    ] }),
+    bookmarks && bookmarks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("nav", { className: "elb-browser__bookmarks", "aria-label": "Bookmarks", children: bookmarks.map((bookmark) => {
+      const current = bookmark.url === url;
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: cx(
+            "elb-browser__bookmark",
+            current && "elb-browser__bookmark--active"
+          ),
+          "aria-current": current ? "page" : void 0,
+          disabled: !onNavigate,
+          onClick: () => onNavigate?.(bookmark.url),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "bookmark", size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: bookmark.label })
+          ]
+        },
+        bookmark.url
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "elb-browser__viewport", children })
+  ] });
+}
+
+// src/design/components/molecules/QuickstartSteps.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ARROWS = [
+  {
+    kind: "wave",
+    paths: [
+      "M4 26 C 18 6, 34 6, 40 20 S 58 34, 70 16",
+      "M62 20 L70 16 L69.5 25"
+    ]
+  },
+  {
+    kind: "loop",
+    paths: [
+      "M4 28 C 20 30, 26 8, 38 10 C 50 12, 44 28, 36 24 C 28 20, 44 6, 72 14",
+      "M65.7 7.6 L72 14 L63.3 16.2"
+    ]
+  }
+];
+function Arrow({ kind, paths }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "li",
+    {
+      className: cx("elb-quickstart__arrow", `elb-quickstart__arrow--${kind}`),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "svg",
+        {
+          width: "76",
+          height: "40",
+          viewBox: "0 0 76 40",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: paths.map((d) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d }, d))
+        }
+      )
+    }
+  );
+}
+function QuickstartSteps({
+  steps,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...rest, className: cx("elb-quickstart", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ol", { className: "elb-quickstart__steps", children: steps.flatMap((step, index) => {
+      const item = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "elb-quickstart__step", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "elb-quickstart__head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "elb-quickstart__num", "aria-hidden": "true", children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "elb-quickstart__title", children: step.title })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "elb-quickstart__copy", children: step.text })
+      ] }, step.title);
+      return index < steps.length - 1 ? [
+        item,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Arrow,
+          {
+            ...ARROWS[index % ARROWS.length]
+          },
+          `arrow-${index}`
+        )
+      ] : [item];
+    }) }),
+    children
+  ] });
+}
+
+// src/design/components/layout/Section.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Section({
+  children,
+  tone = "default",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "section",
+    {
+      ...rest,
+      className: cx(
+        "elb-section",
+        tone === "alt" && "elb-section--alt",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "elb-section__inner", children })
+    }
+  );
+}
+
+// src/design/components/layout/CardGrid.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function CardGrid({
+  children,
+  min,
+  gap = "cards",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "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
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Split({
+  start,
+  end,
+  variant = "even",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-split",
+        variant === "aside" && "elb-split--aside",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "elb-split__start", children: start }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "elb-split__end", children: end })
+      ]
+    }
+  );
+}
+
+// src/design/components/layout/Cluster.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Cluster({
+  children,
+  gap = "actions",
+  align = "start",
+  separated = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "elb-cluster",
+        gap === "links" && "elb-cluster--links",
+        align === "center" && "elb-cluster--center",
+        separated && "elb-cluster--separated",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/design/components/layout/Hero.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Hero({
+  eyebrow,
+  title,
+  highlight,
+  lead,
+  actions,
+  proof,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-hero__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      SectionHeading,
+      {
+        level: 1,
+        eyebrow,
+        title,
+        highlight,
+        lead
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-hero__actions", children: actions }),
+    proof !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-hero__proof", children: proof }),
+    children !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-hero__demo", children })
+  ] }) });
+}
+
+// src/design/components/viz/DestinationMappingViz.tsx
+var import_react3 = require("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
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function CodeTokens({
+  tokens,
+  active = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cx("elb-viz-line", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "span",
+      {
+        className: cx("elb-viz-line__bar", bar && `elb-viz-line__bar--${bar}`),
+        "aria-hidden": "true"
+      }
+    ),
+    number !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-line__number", children: number }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function VizFrame({
+  variant,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "div",
+    {
+      ...rest,
+      "data-theme": "dark",
+      className: cx("elb-viz", `elb-viz--${variant}`, className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "elb-viz__body", children })
+    }
+  );
+}
+
+// src/design/components/viz/DestinationMappingViz.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function DestinationMappingViz({
+  initialEvent = 0,
+  caption = MAPPING_CAPTION,
+  ...rest
+}) {
+  const [index, setIndex] = (0, import_react3.useState)(initialEvent);
+  const event = MAPPING_EVENTS[index];
+  const name = `${event.entity} ${event.action}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__pick", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "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__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__chip-action", children: item.action })
+          ]
+        },
+        `${item.entity} ${item.action}`
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__name", children: destination.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            CodeTokens,
+            {
+              tokens: tokenizeCode(
+                formatRule(
+                  event.entity,
+                  event.action,
+                  destination.rule
+                ),
+                destination.rule.name
+              ),
+              active: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__tag", children: "sends" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            CodeTokens,
+            {
+              tokens: tokenizeCode(line, destination.rule.name),
+              active: true
+            }
+          ) }, position)) })
+        ] })
+      ] }, destination.id)) })
+    ] }),
+    caption !== "" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "elb-viz-mapping__caption", children: caption })
+  ] }) });
+}
+
+// src/design/components/viz/HeroTaggingViz.tsx
+var import_react6 = require("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
+var import_react4 = require("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
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var SKELETON_ROWS = 6;
+function EventsTable({ rows }) {
+  const skeletons = Math.max(0, SKELETON_ROWS - rows.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__query", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
+        " *",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__keyword", children: "FROM" }),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__live", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
+        "live"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table__rows", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell", children: [
+          "name",
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__type", children: "STRING" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell", children: [
+          "data",
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__type", children: "JSON" })
+        ] })
+      ] }),
+      rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        "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__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell", children: row.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
+              "{",
+              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react4.Fragment, { children: [
+                position === 0 ? '"' : ',"',
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__json-key", children: key }),
+                '":"',
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__json-value", children: value }),
+                '"'
+              ] }, key)),
+              "}"
+            ] })
+          ]
+        },
+        row.key
+      )),
+      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        "div",
+        {
+          className: "elb-viz-table__row elb-viz-table__row--skeleton",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__bar" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__bar" }) })
+          ]
+        },
+        `skeleton-${index}`
+      ))
+    ] }) }) })
+  ] });
+}
+
+// src/design/components/viz/parts/hooks.ts
+var import_react5 = require("react");
+var REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function useInView(ref, threshold) {
+  const [inView, setInView] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    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] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    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
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Pill({
+  part,
+  variant = "solid",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "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
+var import_jsx_runtime32 = require("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__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__shadow",
+        cx: 56,
+        cy: 66,
+        rx: 30,
+        ry: 6
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "g",
+      {
+        className: "elb-viz-thumb__legs",
+        strokeWidth: 2.4,
+        strokeLinecap: "round",
+        children: BUG_LINES.map((d) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d }, d))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__ink",
+        cx: 56,
+        cy: 30,
+        rx: 10,
+        ry: 7.5
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__shell",
+        cx: 56,
+        cy: 50,
+        rx: 21,
+        ry: 18
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
+    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "circle",
+      {
+        className: "elb-viz-thumb__ink",
+        cx: x,
+        cy: y,
+        r
+      },
+      `${x}-${y}`
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "path",
+      {
+        className: "elb-viz-thumb__shine",
+        d: "M44 38 Q48 35 52 36",
+        strokeWidth: 2,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function Tech() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "rect",
+      {
+        className: "elb-viz-thumb__badge",
+        x: 38,
+        y: 25,
+        width: 36,
+        height: 36,
+        rx: 8
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "path",
+      {
+        className: "elb-viz-thumb__wave",
+        d: "M45 42 A10 10 0 0 1 57 54",
+        strokeWidth: 3.5,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "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__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__plate",
+        cx: 56,
+        cy: 62,
+        rx: 44,
+        ry: 10
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__loaf",
+        cx: 56,
+        cy: 50,
+        rx: 31,
+        ry: 19
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "ellipse",
+      {
+        className: "elb-viz-thumb__crust",
+        cx: 56,
+        cy: 45,
+        rx: 25,
+        ry: 13
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "path",
+      {
+        className: "elb-viz-thumb__score",
+        d: "M40 44 Q56 35 72 44",
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "path",
+      {
+        className: "elb-viz-thumb__score",
+        d: "M44 51 Q56 45 68 51",
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function Thumb({ kind }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "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__ */ (0, import_jsx_runtime32.jsx)(Bug, {}) : kind === "tech" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tech, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Food, {})
+    }
+  );
+}
+
+// src/design/components/viz/HeroTaggingViz.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var MAX_STEP = 64;
+function HeroTaggingViz({
+  playing = true,
+  speed = 1,
+  startAt = HERO_START,
+  ...rest
+}) {
+  const paneRef = (0, import_react6.useRef)(null);
+  const inView = useInView(paneRef, 0);
+  const reduced = useReducedMotion();
+  const [time, setTime] = (0, import_react6.useState)(startAt);
+  const animate = playing && inView && !reduced;
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime33.jsx)(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero__bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "div",
+        {
+          className: "elb-viz-hero__code",
+          style: vizStyle({ "--elb-viz-fade": fade2 }),
+          children: lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            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__ */ (0, import_jsx_runtime33.jsx)(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  "span",
+                  {
+                    className: "elb-viz-caret",
+                    style: vizStyle({ "--elb-viz-caret": caretOn ? 1 : 0 })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeTokens, { tokens: line.tokens.slice(line.caret) })
+              ] })
+            },
+            line.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        "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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero__pills", children: [
+              card.entity && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pill, { part: "entity", children: "article" }),
+              card.impression && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pill, { part: "action", children: "impression" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Thumb, { kind: article.thumb }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero__text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                "span",
+                {
+                  className: cx(
+                    "elb-viz-hero__kicker",
+                    card.category && "elb-viz-hero__kicker--on"
+                  ),
+                  children: article.kicker
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                "span",
+                {
+                  className: cx(
+                    "elb-viz-hero__mark",
+                    card.title && "elb-viz-hero__mark--on"
+                  ),
+                  children: article.title
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                "span",
+                {
+                  className: cx(
+                    "elb-viz-hero__link",
+                    card.action && "elb-viz-hero__link--on"
+                  ),
+                  children: [
+                    "Open \u2192",
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                      "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__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__ring" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__pointer" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EventsTable, { rows })
+  ] }) });
+}
+
+// src/design/components/viz/ArticleTeaserTracking.tsx
+var import_react7 = require("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
+var import_jsx_runtime34 = require("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__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      className: cx(
+        "elb-viz-teaser__card",
+        seen.has("entity") && "elb-viz-teaser__card--entity",
+        ahead && "elb-viz-teaser__card--ahead"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "elb-viz-teaser__pills", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            Pill,
+            {
+              part: "property",
+              variant: "outline",
+              className: fade(seen.has("position")),
+              children: position
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          PhotoPlaceholder,
+          {
+            tone: "viz",
+            className: cx("elb-viz-teaser__photo", fade(seen.has("image")))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "span",
+          {
+            className: cx(
+              "elb-viz-teaser__kicker",
+              fade(seen.has("category")),
+              seen.has("category") && "elb-viz-teaser__kicker--on"
+            ),
+            children: article.kicker
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "span",
+          {
+            className: cx(
+              "elb-viz-teaser__title",
+              fade(seen.has("title")),
+              seen.has("title") && "elb-viz-teaser__title--on"
+            ),
+            children: article.title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "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__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      className: cx(
+        "elb-viz-teaser__page",
+        globalsOn && "elb-viz-teaser__page--on",
+        !reached && !lead && "elb-viz-teaser__page--ahead"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          Pill,
+          {
+            part: "globals",
+            className: fade(globalsOn),
+            children: `pagetype:${page.pagetype}`
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "div",
+          {
+            className: cx(
+              "elb-viz-teaser__list",
+              listOn && "elb-viz-teaser__list--on"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "elb-viz-teaser__list-label", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__list-name", children: page.header }),
+                  page.heading !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__list-heading", children: page.heading })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Pill, { part: "context", children: `list:${page.list}` })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                TeaserCard,
+                {
+                  article,
+                  position: index + 1,
+                  seen,
+                  ahead: !reached && !(lead && index === 0)
+                },
+                article.title
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ArticleTeaserTracking({
+  autoplay = true,
+  speed = 1,
+  initialStep,
+  ...rest
+}) {
+  const codeRef = (0, import_react7.useRef)(null);
+  const inView = useInView(codeRef, 0.35);
+  const reduced = useReducedMotion();
+  const [shown, setShown] = (0, import_react7.useState)(
+    () => initialStep ? teaserStepEnd(initialStep) : 0
+  );
+  const [delay, setDelay] = (0, import_react7.useState)(FIRST_DELAY);
+  const [pinned, setPinned] = (0, import_react7.useState)(null);
+  const playing = autoplay && inView && !reduced;
+  const end = pinned === null ? TEASER_ITEMS.length : teaserStepEnd(pinned);
+  (0, import_react7.useEffect)(() => {
+    if (reduced) setShown(TEASER_ITEMS.length);
+  }, [reduced]);
+  (0, import_react7.useEffect)(() => {
+    if (!playing || delay === null) return void 0;
+    const timer = setTimeout(() => {
+      const advance = teaserAdvance(shown);
+      if (!advance) {
+        setDelay(null);
+        return;
+      }
+      setShown(advance.next);
+      setDelay(advance.next < end ? advance.delay : null);
+    }, delay / speed);
+    return () => clearTimeout(timer);
+  }, [playing, delay, shown, speed, end]);
+  (0, import_react7.useEffect)(() => {
+    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) => {
+    setPinned(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__ */ (0, import_jsx_runtime34.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: fileClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__file-name", children: item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime34.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      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__ */ (0, import_jsx_runtime34.jsx)(CodeTokens, { tokens: item.tokens, active: reached })
+      }
+    ) }, index);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "elb-viz-teaser", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "elb-viz-teaser__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "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__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__step-number", children: step }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label })
+          ]
+        },
+        step
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EventLegend, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "elb-viz-teaser__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        TeaserGroup,
+        {
+          page: TEASER_PAGES[id],
+          seen,
+          current,
+          lead: index === 0
+        },
+        id
+      )) })
+    ] })
+  ] }) });
+}
+//# sourceMappingURL=index.cjs.map