@walkeros/explorer 4.8.0 → 4.8.1-next-1792019907609

package/dist/design/components/index.cjs

@@ -31,6 +31,7 @@ __export(components_exports, {
   Cluster: () => Cluster,
   DestinationMappingViz: () => DestinationMappingViz,
   EventLegend: () => EventLegend,
+  EventLog: () => EventLog,
   Eyebrow: () => Eyebrow,
   FaqItem: () => FaqItem,
   FeatureItem: () => FeatureItem,
@@ -390,8 +391,10 @@ function Card({
 }
 
 // src/design/components/atoms/InstallCommand.tsx
+var import_react2 = require("react");
+
+// src/design/components/atoms/useCopy.ts
 var import_react = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
 var CONFIRM_MS = 1400;
 async function copyText(text) {
   try {
@@ -401,13 +404,7 @@ async function copyText(text) {
     return false;
   }
 }
-function InstallCommand({
-  command = "npm i -g @walkeros/cli",
-  className,
-  "aria-describedby": describedBy,
-  ...rest
-}) {
-  const hintId = (0, import_react.useId)();
+function useCopy() {
   const [state, setState] = (0, import_react.useState)("idle");
   const mounted = (0, import_react.useRef)(true);
   const timer = (0, import_react.useRef)(void 0);
@@ -418,13 +415,31 @@ function InstallCommand({
       clearTimeout(timer.current);
     };
   }, []);
-  const copy = async () => {
-    const copied = await copyText(command);
+  const copy = async (text) => {
+    const copied = await copyText(text);
     if (!mounted.current) return;
     clearTimeout(timer.current);
     setState(copied ? "done" : "failed");
     if (copied) timer.current = setTimeout(() => setState("idle"), CONFIRM_MS);
   };
+  return [
+    state,
+    (text) => {
+      void copy(text);
+    }
+  ];
+}
+
+// src/design/components/atoms/InstallCommand.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function InstallCommand({
+  command = "npm i -g @walkeros/cli",
+  className,
+  "aria-describedby": describedBy,
+  ...rest
+}) {
+  const hintId = (0, import_react2.useId)();
+  const [state, copy] = useCopy();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
@@ -433,9 +448,7 @@ function InstallCommand({
         "aria-describedby": describedBy ? `${hintId} ${describedBy}` : hintId,
         type: "button",
         className: cx("elb-cmd", className),
-        onClick: () => {
-          void copy();
-        },
+        onClick: () => copy(command),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "elb-cmd__prompt", "aria-hidden": "true", children: [
@@ -609,7 +622,7 @@ function FeatureItem({
 }
 
 // src/design/components/molecules/FaqItem.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function FaqItem({
   question,
@@ -621,7 +634,7 @@ function FaqItem({
   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)
+      (part, index) => typeof part === "string" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: part }, index) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react3.Fragment, { children: part }, index)
     ) })
   ] });
 }
@@ -786,8 +799,230 @@ function BrowserFrame({
   ] });
 }
 
-// src/design/components/molecules/QuickstartSteps.tsx
+// src/design/components/molecules/EventLog.tsx
+var import_react4 = require("react");
+
+// src/design/components/atoms/CodeTokens.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
+function CodeTokens({
+  tokens,
+  active = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime21.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
+  )) });
+}
+
+// src/design/components/codeTokens.ts
+function tok(t, kind, mark) {
+  return mark ? { t, kind, mark } : { t, kind };
+}
+
+// src/design/components/molecules/EventLog.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SECTIONS = [
+  "data",
+  "context",
+  "globals",
+  "consent",
+  "user",
+  "nested"
+];
+var VIEWS = [
+  ["fields", "Fields"],
+  ["json", "JSON"]
+];
+var COPY = {
+  idle: { label: "Copy", icon: "copy" },
+  done: { label: "Copied", icon: "check" },
+  failed: { label: "Copy failed", icon: "warning" }
+};
+var isGroup = (value) => typeof value === "object" && value !== null;
+function timeOf(timestamp) {
+  if (typeof timestamp !== "number") return null;
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return null;
+  const clock = [date.getHours(), date.getMinutes(), date.getSeconds()].map((part) => String(part).padStart(2, "0")).join(":");
+  return { iso: date.toISOString(), clock };
+}
+function valueToken(value) {
+  if (typeof value === "string") return tok(value, "str");
+  if (typeof value === "number" || typeof value === "boolean")
+    return tok(String(value), "num");
+  return tok(String(JSON.stringify(value)), "text");
+}
+function fieldRows(section, group) {
+  return Object.entries(group).map(([key, value]) => {
+    if (section === "context" && Array.isArray(value) && value.length === 2)
+      return { key, value: valueToken(value[0]), sub: `order ${value[1]}` };
+    if (section === "consent" && typeof value === "boolean")
+      return { key, value: tok(value ? "granted" : "denied", "str") };
+    return { key, value: valueToken(value) };
+  });
+}
+var JSON_TOKEN = /("(?:[^"\\]|\\.)*")(\s*:)?|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\b(?:true|false|null)\b|[{}[\],]/g;
+function jsonTokens(line) {
+  const tokens = [];
+  let last = 0;
+  for (const match of line.matchAll(JSON_TOKEN)) {
+    const [text, quoted, colon] = match;
+    const at = match.index ?? 0;
+    if (at > last) tokens.push(tok(line.slice(last, at), "text"));
+    if (quoted && colon) tokens.push(tok(quoted, "key"), tok(colon, "punct"));
+    else if (quoted) tokens.push(tok(quoted, "str"));
+    else tokens.push(tok(text, /^[{}[\],]$/.test(text) ? "punct" : "num"));
+    last = at + text.length;
+  }
+  if (last < line.length) tokens.push(tok(line.slice(last), "text"));
+  return tokens;
+}
+function EventName({ event }) {
+  const { name, entity, action } = event;
+  if (!entity || !action || name !== `${entity} ${action}`) return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: name });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__entity", children: entity }),
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__action", children: action })
+  ] });
+}
+function Fields({ event }) {
+  const fields = new Map(Object.entries(event));
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "elb-event-log__sections", children: SECTIONS.map((section) => {
+    const group = fields.get(section);
+    const rows = isGroup(group) ? fieldRows(section, group) : [];
+    if (rows.length === 0 && section !== "consent") return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__label", children: section }),
+      rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__field elb-event-log__sub", children: "none" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("dl", { className: "elb-event-log__fields", children: rows.map(({ key, value, sub }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CodeTokens, { tokens: [tok(key, "key")] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("dd", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CodeTokens, { tokens: [value] }),
+          sub && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__sub", children: sub })
+        ] })
+      ] }, key)) })
+    ] }, section);
+  }) });
+}
+function Json({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "elb-event-log__json", children: text.split("\n").map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CodeTokens, { tokens: jsonTokens(line) }),
+    "\n"
+  ] }, index)) });
+}
+function EventLog({
+  records,
+  selectedSeq,
+  onSelect,
+  onClear,
+  emptyText = "Click, scroll or load something tagged on the page and its events show up here.",
+  className,
+  ...rest
+}) {
+  const [view, setView] = (0, import_react4.useState)("fields");
+  const [copyState, copy] = useCopy();
+  const newest = records[records.length - 1];
+  const selected = records.find((record) => record.seq === selectedSeq) ?? newest;
+  const json = selected ? JSON.stringify(selected.event, null, 2) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...rest, className: cx("elb-event-log", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__title", children: "Events" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__count", children: records.length }),
+      onClear && records.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          className: "elb-event-log__button elb-event-log__clear",
+          onClick: onClear,
+          children: "Clear"
+        }
+      )
+    ] }),
+    selected === void 0 || newest === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__empty", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "elb-event-log__empty-title", children: "No events yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "elb-event-log__empty-text", children: emptyText })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "elb-event-log__list", children: [...records].reverse().map(({ seq, event }) => {
+        const time = timeOf(event.timestamp);
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "elb-event-log__row",
+            "aria-pressed": seq === selected.seq,
+            disabled: !onSelect,
+            onClick: () => onSelect?.(seq === newest.seq ? null : seq),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "elb-event-log__seq", children: [
+                "#",
+                seq
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__name", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EventName, { event }) }),
+              event.trigger && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(InlineCode, { className: "elb-event-log__trigger", children: event.trigger }),
+              time && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("time", { className: "elb-event-log__time", dateTime: time.iso, children: time.clock })
+            ]
+          }
+        ) }, seq);
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__detail", "data-theme": "dark", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "elb-event-log__summary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__detail-name", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EventName, { event: selected.event }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__meta", children: [
+              `#${selected.seq}`,
+              selected.event.trigger,
+              timeOf(selected.event.timestamp)?.clock
+            ].filter(Boolean).join(" \xB7 ") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
+            {
+              className: "elb-event-log__views",
+              role: "group",
+              "aria-label": "View",
+              children: VIEWS.map(([id, label]) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "elb-event-log__view",
+                  "aria-pressed": view === id,
+                  onClick: () => setView(id),
+                  children: label
+                },
+                id
+              ))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            Button,
+            {
+              variant: "secondary",
+              className: "elb-event-log__button",
+              onClick: () => copy(json),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: COPY[copyState].icon, size: 12 }),
+                COPY[copyState].label
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "elb-event-log__status", role: "status", children: copyState === "idle" ? "" : COPY[copyState].label })
+        ] }),
+        view === "fields" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Fields, { event: selected.event }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Json, { text: json })
+      ] })
+    ] })
+  ] });
+}
+
+// src/design/components/molecules/QuickstartSteps.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ARROWS = [
   {
     kind: "wave",
@@ -805,12 +1040,12 @@ var ARROWS = [
   }
 ];
 function Arrow({ kind, paths }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "li",
     {
       className: cx("elb-quickstart__arrow", `elb-quickstart__arrow--${kind}`),
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "svg",
         {
           width: "76",
@@ -821,7 +1056,7 @@ function Arrow({ kind, paths }) {
           strokeWidth: "2.2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: paths.map((d) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d }, d))
+          children: paths.map((d) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d }, d))
         }
       )
     }
@@ -833,18 +1068,18 @@ function QuickstartSteps({
   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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ...rest, className: cx("elb-quickstart", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ol", { className: "elb-quickstart__steps", children: steps.flatMap((step, index) => {
+      const item = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "elb-quickstart__step", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "elb-quickstart__head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "elb-quickstart__num", "aria-hidden": "true", children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "elb-quickstart__title", children: step.title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "elb-quickstart__copy", children: step.text })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "elb-quickstart__copy", children: step.text })
       ] }, step.title);
       return index < steps.length - 1 ? [
         item,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Arrow,
           {
             ...ARROWS[index % ARROWS.length]
@@ -858,14 +1093,14 @@ function QuickstartSteps({
 }
 
 // src/design/components/layout/Section.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Section({
   children,
   tone = "default",
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "section",
     {
       ...rest,
@@ -874,13 +1109,13 @@ function Section({
         tone === "alt" && "elb-section--alt",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "elb-section__inner", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "elb-section__inner", children })
     }
   );
 }
 
 // src/design/components/layout/CardGrid.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function CardGrid({
   children,
   min,
@@ -888,7 +1123,7 @@ function CardGrid({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ...rest,
@@ -904,7 +1139,7 @@ function CardGrid({
 }
 
 // src/design/components/layout/Split.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Split({
   start,
   end,
@@ -912,7 +1147,7 @@ function Split({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ...rest,
@@ -922,15 +1157,15 @@ function Split({
         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 })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-split__start", children: start }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-split__end", children: end })
       ]
     }
   );
 }
 
 // src/design/components/layout/Cluster.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Cluster({
   children,
   gap = "actions",
@@ -939,7 +1174,7 @@ function Cluster({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       ...rest,
@@ -956,7 +1191,7 @@ function Cluster({
 }
 
 // src/design/components/layout/Hero.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Hero({
   eyebrow,
   title,
@@ -968,8 +1203,8 @@ function Hero({
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "elb-hero__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       SectionHeading,
       {
         level: 1,
@@ -979,14 +1214,14 @@ function Hero({
         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 })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "elb-hero__actions", children: actions }),
+    proof !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "elb-hero__proof", children: proof }),
+    children !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "elb-hero__demo", children })
   ] }) });
 }
 
 // src/design/components/viz/DestinationMappingViz.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/design/components/viz/data/destination-mapping.ts
 var GENERATED_ID = "\u2026";
@@ -1353,58 +1588,6 @@ var MAPPING_EVENTS = [
   }
 ];
 
-// 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) {
@@ -1456,13 +1639,17 @@ function formatCall(record) {
   ];
 }
 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(", ")}] })`;
+  const fields = [
+    `name: ${literal(`${event.entity} ${event.action}`)}`,
+    `data: ${literal(event.data)}`
+  ];
+  if (event.nested?.length) {
+    const nested = event.nested.map(
+      (entity) => `{ entity: ${literal(entity.entity)}, \u2026 }`
+    );
+    fields.push(`nested: [${nested.join(", ")}]`);
+  }
+  return `elb({ ${fields.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*)$/;
@@ -1492,38 +1679,38 @@ function tokenizeCode(line, highlight) {
 }
 
 // src/design/components/viz/parts/VizFrame.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function VizFrame({
   variant,
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz__body", children })
     }
   );
 }
 
 // src/design/components/viz/DestinationMappingViz.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function DestinationMappingViz({
   initialEvent = 0,
   caption = MAPPING_CAPTION,
   ...rest
 }) {
-  const [index, setIndex] = (0, import_react3.useState)(initialEvent);
+  const [index, setIndex] = (0, import_react5.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-mapping", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-mapping__pick", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "button",
         {
           type: "button",
@@ -1535,21 +1722,21 @@ function DestinationMappingViz({
           ),
           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 })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-mapping__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-mapping__card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-mapping__name", children: destination.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-mapping__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             CodeTokens,
             {
               tokens: tokenizeCode(
@@ -1564,9 +1751,9 @@ function DestinationMappingViz({
             }
           ) })
         ] }),
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-mapping__tag", children: "sends" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             CodeTokens,
             {
               tokens: tokenizeCode(line, destination.rule.name),
@@ -1576,12 +1763,12 @@ function DestinationMappingViz({
         ] })
       ] }, destination.id)) })
     ] }),
-    caption !== "" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "elb-viz-mapping__caption", children: caption })
+    caption !== "" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "elb-viz-mapping__caption", children: caption })
   ] }) });
 }
 
 // src/design/components/viz/HeroTaggingViz.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/design/components/viz/parts/timeline.ts
 function clamp(x) {
@@ -1591,6 +1778,22 @@ function ease(x) {
   return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
 }
 
+// src/design/components/viz/parts/tokens.ts
+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/data/hero.ts
 var HERO_ARTICLES = [
   { kicker: "Tech", title: "Return of the Bug", thumb: "bug" },
@@ -1851,8 +2054,24 @@ function heroFrame(t) {
   };
 }
 
+// src/design/components/viz/parts/CodeLine.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function CodeLine({ number, bar, className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("elb-viz-line", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "span",
+      {
+        className: cx("elb-viz-line__bar", bar && `elb-viz-line__bar--${bar}`),
+        "aria-hidden": "true"
+      }
+    ),
+    number !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-line__number", children: number }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-line__code", children })
+  ] });
+}
+
 // src/design/components/viz/parts/EventsTable.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/design/components/viz/parts/style.ts
 function vizStyle(vars) {
@@ -1861,38 +2080,38 @@ function vizStyle(vars) {
 }
 
 // src/design/components/viz/parts/EventsTable.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = 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" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "elb-viz-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "elb-viz-table__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "elb-viz-table__query", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.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_runtime32.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" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "elb-viz-table__live", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.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: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "elb-viz-table__rows", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("span", { className: "elb-viz-table__type", children: "STRING" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "elb-viz-table__cell", children: [
           "data",
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__type", children: "JSON" })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__type", children: "JSON" })
         ] })
       ] }),
-      rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--event",
@@ -1902,15 +2121,15 @@ function EventsTable({ rows }) {
             "--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: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__cell", children: row.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.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: [
+              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react6.Fragment, { children: [
                 position === 0 ? '"' : ',"',
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__json-key", children: key }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.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 }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__json-value", children: value }),
                 '"'
               ] }, key)),
               "}"
@@ -1919,15 +2138,15 @@ function EventsTable({ rows }) {
         },
         row.key
       )),
-      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime32.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" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__bar" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "elb-viz-table__bar" }) })
           ]
         },
         `skeleton-${index}`
@@ -1937,11 +2156,11 @@ function EventsTable({ rows }) {
 }
 
 // src/design/components/viz/parts/hooks.ts
-var import_react5 = require("react");
+var import_react7 = 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 [inView, setInView] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     const element = ref.current;
     if (!element || typeof IntersectionObserver === "undefined") {
       setInView(true);
@@ -1963,8 +2182,8 @@ function useInView(ref, threshold) {
   return inView;
 }
 function useReducedMotion() {
-  const [reduced, setReduced] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [reduced, setReduced] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     if (typeof window.matchMedia !== "function") return void 0;
     const media = window.matchMedia(REDUCED_MOTION);
     const update = () => setReduced(media.matches);
@@ -1976,14 +2195,14 @@ function useReducedMotion() {
 }
 
 // src/design/components/viz/parts/Pill.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Pill({
   part,
   variant = "solid",
   className,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "span",
     {
       className: cx(
@@ -1998,7 +2217,7 @@ function Pill({
 }
 
 // src/design/components/viz/parts/Thumb.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var BUG_LINES = [
   "M36 46 L28 42",
   "M35 54 L27 56",
@@ -2016,9 +2235,9 @@ var BUG_SPOTS = [
   [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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__shadow",
@@ -2028,18 +2247,18 @@ function Bug() {
         ry: 6
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.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))
+        children: BUG_LINES.map((d) => /* @__PURE__ */ (0, import_jsx_runtime34.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__ink",
@@ -2049,9 +2268,9 @@ function Bug() {
         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)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__shell",
@@ -2061,8 +2280,8 @@ function Bug() {
         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)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
+    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "circle",
       {
         className: "elb-viz-thumb__ink",
@@ -2072,7 +2291,7 @@ function Bug() {
       },
       `${x}-${y}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "path",
       {
         className: "elb-viz-thumb__shine",
@@ -2084,9 +2303,9 @@ function Bug() {
   ] });
 }
 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "rect",
       {
         className: "elb-viz-thumb__badge",
@@ -2097,8 +2316,8 @@ function Tech() {
         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)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -2107,7 +2326,7 @@ function Tech() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -2119,9 +2338,9 @@ function Tech() {
   ] });
 }
 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__plate",
@@ -2131,7 +2350,7 @@ function Food() {
         ry: 10
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__loaf",
@@ -2141,7 +2360,7 @@ function Food() {
         ry: 19
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__crust",
@@ -2151,7 +2370,7 @@ function Food() {
         ry: 13
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -2160,7 +2379,7 @@ function Food() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -2172,7 +2391,7 @@ function Food() {
   ] });
 }
 function Thumb({ kind }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "svg",
     {
       className: cx("elb-viz-thumb", `elb-viz-thumb--${kind}`),
@@ -2180,13 +2399,13 @@ function Thumb({ kind }) {
       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, {})
+      children: kind === "bug" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Bug, {}) : kind === "tech" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Tech, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Food, {})
     }
   );
 }
 
 // src/design/components/viz/HeroTaggingViz.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var MAX_STEP = 64;
 function HeroTaggingViz({
   playing = true,
@@ -2194,12 +2413,12 @@ function HeroTaggingViz({
   startAt = HERO_START,
   ...rest
 }) {
-  const paneRef = (0, import_react6.useRef)(null);
+  const paneRef = (0, import_react8.useRef)(null);
   const inView = useInView(paneRef, 0);
   const reduced = useReducedMotion();
-  const [time, setTime] = (0, import_react6.useState)(startAt);
+  const [time, setTime] = (0, import_react8.useState)(startAt);
   const animate = playing && inView && !reduced;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!animate) return void 0;
     let frame = 0;
     let last = performance.now();
@@ -2213,22 +2432,22 @@ function HeroTaggingViz({
     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", {})
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "elb-viz-hero", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "elb-viz-hero__bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           className: "elb-viz-hero__code",
           style: vizStyle({ "--elb-viz-fade": fade2 }),
-          children: lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             CodeLine,
             {
               number: line.n,
@@ -2237,23 +2456,23 @@ function HeroTaggingViz({
                 "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)(
+              children: line.caret === null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.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) })
+                /* @__PURE__ */ (0, import_jsx_runtime35.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)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
           className: cx(
@@ -2265,13 +2484,13 @@ function HeroTaggingViz({
             "--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_runtime35.jsxs)("div", { className: "elb-viz-hero__pills", children: [
+              card.entity && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Pill, { part: "entity", children: "article" }),
+              card.impression && /* @__PURE__ */ (0, import_jsx_runtime35.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)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Thumb, { kind: article.thumb }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "elb-viz-hero__text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "span",
                 {
                   className: cx(
@@ -2281,7 +2500,7 @@ function HeroTaggingViz({
                   children: article.kicker
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "span",
                 {
                   className: cx(
@@ -2291,7 +2510,7 @@ function HeroTaggingViz({
                   children: article.title
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 "span",
                 {
                   className: cx(
@@ -2300,7 +2519,7 @@ function HeroTaggingViz({
                   ),
                   children: [
                     "Open \u2192",
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                       "span",
                       {
                         className: "elb-viz-hero__cursor",
@@ -2314,8 +2533,8 @@ function HeroTaggingViz({
                           "--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_runtime35.jsx)("span", { className: "elb-viz-hero__ring" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "elb-viz-hero__pointer" })
                         ]
                       }
                     )
@@ -2327,12 +2546,12 @@ function HeroTaggingViz({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EventsTable, { rows })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(EventsTable, { rows })
   ] }) });
 }
 
 // src/design/components/viz/ArticleTeaserTracking.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/design/components/viz/data/article-teaser.ts
 var TEASER_ENTITY = "article";
@@ -2595,7 +2814,7 @@ function teaserAdvance(n) {
 }
 
 // src/design/components/viz/ArticleTeaserTracking.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var FIRST_DELAY = 800;
 var JUMP_DELAY = 250;
 var SCROLL_DELAY = 400;
@@ -2608,7 +2827,7 @@ function TeaserCard({
   seen,
   ahead
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: cx(
@@ -2617,9 +2836,9 @@ function TeaserCard({
         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)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "elb-viz-teaser__pills", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Pill,
             {
               part: "property",
@@ -2629,14 +2848,14 @@ function TeaserCard({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           PhotoPlaceholder,
           {
             tone: "viz",
             className: cx("elb-viz-teaser__photo", fade(seen.has("image")))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "span",
           {
             className: cx(
@@ -2647,7 +2866,7 @@ function TeaserCard({
             children: article.kicker
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "span",
           {
             className: cx(
@@ -2658,7 +2877,7 @@ function TeaserCard({
             children: article.title
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "span",
           {
             className: cx(
@@ -2682,7 +2901,7 @@ function TeaserGroup({
   const globalsOn = seen.has(page.globalsEffect);
   const listOn = seen.has(page.listEffect);
   const reached = page.step <= current;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: cx(
@@ -2691,7 +2910,7 @@ function TeaserGroup({
         !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)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           Pill,
           {
             part: "globals",
@@ -2699,7 +2918,7 @@ function TeaserGroup({
             children: `pagetype:${page.pagetype}`
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "div",
           {
             className: cx(
@@ -2707,14 +2926,14 @@ function TeaserGroup({
               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_runtime36.jsxs)("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "elb-viz-teaser__list-label", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "elb-viz-teaser__list-name", children: page.header }),
+                  page.heading !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.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)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 TeaserCard,
                 {
                   article,
@@ -2737,20 +2956,20 @@ function ArticleTeaserTracking({
   initialStep,
   ...rest
 }) {
-  const codeRef = (0, import_react7.useRef)(null);
+  const codeRef = (0, import_react9.useRef)(null);
   const inView = useInView(codeRef, 0.35);
   const reduced = useReducedMotion();
-  const [shown, setShown] = (0, import_react7.useState)(
+  const [shown, setShown] = (0, import_react9.useState)(
     () => initialStep ? teaserStepEnd(initialStep) : 0
   );
-  const [delay, setDelay] = (0, import_react7.useState)(FIRST_DELAY);
-  const [pinned, setPinned] = (0, import_react7.useState)(null);
+  const [delay, setDelay] = (0, import_react9.useState)(FIRST_DELAY);
+  const [pinned, setPinned] = (0, import_react9.useState)(null);
   const playing = autoplay && inView && !reduced;
   const end = pinned === null ? TEASER_ITEMS.length : teaserStepEnd(pinned);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (reduced) setShown(TEASER_ITEMS.length);
   }, [reduced]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!playing || delay === null) return void 0;
     const timer = setTimeout(() => {
       const advance = teaserAdvance(shown);
@@ -2763,7 +2982,7 @@ function ArticleTeaserTracking({
     }, delay / speed);
     return () => clearTimeout(timer);
   }, [playing, delay, shown, speed, end]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const pane = codeRef.current;
     if (!pane || shown === 0 || typeof pane.scrollTo !== "function")
       return void 0;
@@ -2809,15 +3028,15 @@ function ArticleTeaserTracking({
         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 })
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: fileClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "elb-viz-teaser__file-name", children: item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       CodeLine,
       {
         number: lineNumber,
@@ -2826,13 +3045,13 @@ function ArticleTeaserTracking({
           "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 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "elb-viz-teaser", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "elb-viz-teaser__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "button",
         {
           type: "button",
@@ -2845,18 +3064,18 @@ function ArticleTeaserTracking({
           ),
           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 })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "elb-viz-teaser__step-number", children: step }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ (0, import_jsx_runtime36.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "elb-viz-teaser__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         TeaserGroup,
         {
           page: TEASER_PAGES[id],