@walkeros/explorer 4.8.0 → 4.8.1-next-1792019907609

package/dist/design/components/index.mjs

@@ -337,13 +337,10 @@ function Card({
 }
 
 // src/design/components/atoms/InstallCommand.tsx
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useId } from "react";
+
+// src/design/components/atoms/useCopy.ts
+import { useEffect, useRef, useState } from "react";
 var CONFIRM_MS = 1400;
 async function copyText(text) {
   try {
@@ -353,13 +350,7 @@ async function copyText(text) {
     return false;
   }
 }
-function InstallCommand({
-  command = "npm i -g @walkeros/cli",
-  className,
-  "aria-describedby": describedBy,
-  ...rest
-}) {
-  const hintId = useId();
+function useCopy() {
   const [state, setState] = useState("idle");
   const mounted = useRef(true);
   const timer = useRef(void 0);
@@ -370,13 +361,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
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function InstallCommand({
+  command = "npm i -g @walkeros/cli",
+  className,
+  "aria-describedby": describedBy,
+  ...rest
+}) {
+  const hintId = useId();
+  const [state, copy] = useCopy();
   return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsxs6(
       "button",
@@ -385,9 +394,7 @@ function InstallCommand({
         "aria-describedby": describedBy ? `${hintId} ${describedBy}` : hintId,
         type: "button",
         className: cx("elb-cmd", className),
-        onClick: () => {
-          void copy();
-        },
+        onClick: () => copy(command),
         children: [
           /* @__PURE__ */ jsxs6("span", { children: [
             /* @__PURE__ */ jsxs6("span", { className: "elb-cmd__prompt", "aria-hidden": "true", children: [
@@ -740,8 +747,233 @@ function BrowserFrame({
   ] });
 }
 
+// src/design/components/molecules/EventLog.tsx
+import {
+  Fragment as Fragment8,
+  useState as useState2
+} from "react";
+
+// src/design/components/atoms/CodeTokens.tsx
+import { Fragment as Fragment7, jsx as jsx21 } from "react/jsx-runtime";
+function CodeTokens({
+  tokens,
+  active = false
+}) {
+  return /* @__PURE__ */ jsx21(Fragment7, { children: tokens.map((token, index) => /* @__PURE__ */ jsx21(
+    "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
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs16 } from "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__ */ jsx22(Fragment9, { children: name });
+  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
+    /* @__PURE__ */ jsx22("span", { className: "elb-event-log__entity", children: entity }),
+    " ",
+    /* @__PURE__ */ jsx22("span", { className: "elb-event-log__action", children: action })
+  ] });
+}
+function Fields({ event }) {
+  const fields = new Map(Object.entries(event));
+  return /* @__PURE__ */ jsx22("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__ */ jsxs16("div", { className: "elb-event-log__section", children: [
+      /* @__PURE__ */ jsx22("span", { className: "elb-event-log__label", children: section }),
+      rows.length === 0 ? /* @__PURE__ */ jsx22("span", { className: "elb-event-log__field elb-event-log__sub", children: "none" }) : /* @__PURE__ */ jsx22("dl", { className: "elb-event-log__fields", children: rows.map(({ key, value, sub }) => /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__field", children: [
+        /* @__PURE__ */ jsx22("dt", { children: /* @__PURE__ */ jsx22(CodeTokens, { tokens: [tok(key, "key")] }) }),
+        /* @__PURE__ */ jsxs16("dd", { children: [
+          /* @__PURE__ */ jsx22(CodeTokens, { tokens: [value] }),
+          sub && /* @__PURE__ */ jsx22("span", { className: "elb-event-log__sub", children: sub })
+        ] })
+      ] }, key)) })
+    ] }, section);
+  }) });
+}
+function Json({ text }) {
+  return /* @__PURE__ */ jsx22("div", { className: "elb-event-log__json", children: text.split("\n").map((line, index) => /* @__PURE__ */ jsxs16(Fragment8, { children: [
+    /* @__PURE__ */ jsx22(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] = useState2("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__ */ jsxs16("div", { ...rest, className: cx("elb-event-log", className), children: [
+    /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__bar", children: [
+      /* @__PURE__ */ jsx22("span", { className: "elb-event-log__title", children: "Events" }),
+      /* @__PURE__ */ jsx22("span", { className: "elb-event-log__count", children: records.length }),
+      onClear && records.length > 0 && /* @__PURE__ */ jsx22(
+        Button,
+        {
+          variant: "secondary",
+          className: "elb-event-log__button elb-event-log__clear",
+          onClick: onClear,
+          children: "Clear"
+        }
+      )
+    ] }),
+    selected === void 0 || newest === void 0 ? /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__empty", children: [
+      /* @__PURE__ */ jsx22("p", { className: "elb-event-log__empty-title", children: "No events yet" }),
+      /* @__PURE__ */ jsx22("p", { className: "elb-event-log__empty-text", children: emptyText })
+    ] }) : /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__body", children: [
+      /* @__PURE__ */ jsx22("ul", { className: "elb-event-log__list", children: [...records].reverse().map(({ seq, event }) => {
+        const time = timeOf(event.timestamp);
+        return /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            className: "elb-event-log__row",
+            "aria-pressed": seq === selected.seq,
+            disabled: !onSelect,
+            onClick: () => onSelect?.(seq === newest.seq ? null : seq),
+            children: [
+              /* @__PURE__ */ jsxs16("span", { className: "elb-event-log__seq", children: [
+                "#",
+                seq
+              ] }),
+              /* @__PURE__ */ jsx22("span", { className: "elb-event-log__name", children: /* @__PURE__ */ jsx22(EventName, { event }) }),
+              event.trigger && /* @__PURE__ */ jsx22(InlineCode, { className: "elb-event-log__trigger", children: event.trigger }),
+              time && /* @__PURE__ */ jsx22("time", { className: "elb-event-log__time", dateTime: time.iso, children: time.clock })
+            ]
+          }
+        ) }, seq);
+      }) }),
+      /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__detail", "data-theme": "dark", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__head", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "elb-event-log__summary", children: [
+            /* @__PURE__ */ jsx22("span", { className: "elb-event-log__detail-name", children: /* @__PURE__ */ jsx22(EventName, { event: selected.event }) }),
+            /* @__PURE__ */ jsx22("span", { className: "elb-event-log__meta", children: [
+              `#${selected.seq}`,
+              selected.event.trigger,
+              timeOf(selected.event.timestamp)?.clock
+            ].filter(Boolean).join(" \xB7 ") })
+          ] }),
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: "elb-event-log__views",
+              role: "group",
+              "aria-label": "View",
+              children: VIEWS.map(([id, label]) => /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  type: "button",
+                  className: "elb-event-log__view",
+                  "aria-pressed": view === id,
+                  onClick: () => setView(id),
+                  children: label
+                },
+                id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs16(
+            Button,
+            {
+              variant: "secondary",
+              className: "elb-event-log__button",
+              onClick: () => copy(json),
+              children: [
+                /* @__PURE__ */ jsx22(Icon, { name: COPY[copyState].icon, size: 12 }),
+                COPY[copyState].label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx22("span", { className: "elb-event-log__status", role: "status", children: copyState === "idle" ? "" : COPY[copyState].label })
+        ] }),
+        view === "fields" ? /* @__PURE__ */ jsx22(Fields, { event: selected.event }) : /* @__PURE__ */ jsx22(Json, { text: json })
+      ] })
+    ] })
+  ] });
+}
+
 // src/design/components/molecules/QuickstartSteps.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var ARROWS = [
   {
     kind: "wave",
@@ -759,12 +991,12 @@ var ARROWS = [
   }
 ];
 function Arrow({ kind, paths }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     "li",
     {
       className: cx("elb-quickstart__arrow", `elb-quickstart__arrow--${kind}`),
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx23(
         "svg",
         {
           width: "76",
@@ -775,7 +1007,7 @@ function Arrow({ kind, paths }) {
           strokeWidth: "2.2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: paths.map((d) => /* @__PURE__ */ jsx21("path", { d }, d))
+          children: paths.map((d) => /* @__PURE__ */ jsx23("path", { d }, d))
         }
       )
     }
@@ -787,18 +1019,18 @@ function QuickstartSteps({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs16("div", { ...rest, className: cx("elb-quickstart", className), children: [
-    /* @__PURE__ */ jsx21("ol", { className: "elb-quickstart__steps", children: steps.flatMap((step, index) => {
-      const item = /* @__PURE__ */ jsxs16("li", { className: "elb-quickstart__step", children: [
-        /* @__PURE__ */ jsxs16("div", { className: "elb-quickstart__head", children: [
-          /* @__PURE__ */ jsx21("span", { className: "elb-quickstart__num", "aria-hidden": "true", children: index + 1 }),
-          /* @__PURE__ */ jsx21("h3", { className: "elb-quickstart__title", children: step.title })
+  return /* @__PURE__ */ jsxs17("div", { ...rest, className: cx("elb-quickstart", className), children: [
+    /* @__PURE__ */ jsx23("ol", { className: "elb-quickstart__steps", children: steps.flatMap((step, index) => {
+      const item = /* @__PURE__ */ jsxs17("li", { className: "elb-quickstart__step", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "elb-quickstart__head", children: [
+          /* @__PURE__ */ jsx23("span", { className: "elb-quickstart__num", "aria-hidden": "true", children: index + 1 }),
+          /* @__PURE__ */ jsx23("h3", { className: "elb-quickstart__title", children: step.title })
         ] }),
-        /* @__PURE__ */ jsx21("p", { className: "elb-quickstart__copy", children: step.text })
+        /* @__PURE__ */ jsx23("p", { className: "elb-quickstart__copy", children: step.text })
       ] }, step.title);
       return index < steps.length - 1 ? [
         item,
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           Arrow,
           {
             ...ARROWS[index % ARROWS.length]
@@ -812,14 +1044,14 @@ function QuickstartSteps({
 }
 
 // src/design/components/layout/Section.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Section({
   children,
   tone = "default",
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "section",
     {
       ...rest,
@@ -828,13 +1060,13 @@ function Section({
         tone === "alt" && "elb-section--alt",
         className
       ),
-      children: /* @__PURE__ */ jsx22("div", { className: "elb-section__inner", children })
+      children: /* @__PURE__ */ jsx24("div", { className: "elb-section__inner", children })
     }
   );
 }
 
 // src/design/components/layout/CardGrid.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function CardGrid({
   children,
   min,
@@ -842,7 +1074,7 @@ function CardGrid({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...rest,
@@ -858,7 +1090,7 @@ function CardGrid({
 }
 
 // src/design/components/layout/Split.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function Split({
   start,
   end,
@@ -866,7 +1098,7 @@ function Split({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ...rest,
@@ -876,15 +1108,15 @@ function Split({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx24("div", { className: "elb-split__start", children: start }),
-        /* @__PURE__ */ jsx24("div", { className: "elb-split__end", children: end })
+        /* @__PURE__ */ jsx26("div", { className: "elb-split__start", children: start }),
+        /* @__PURE__ */ jsx26("div", { className: "elb-split__end", children: end })
       ]
     }
   );
 }
 
 // src/design/components/layout/Cluster.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Cluster({
   children,
   gap = "actions",
@@ -893,7 +1125,7 @@ function Cluster({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ...rest,
@@ -910,7 +1142,7 @@ function Cluster({
 }
 
 // src/design/components/layout/Hero.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function Hero({
   eyebrow,
   title,
@@ -922,8 +1154,8 @@ function Hero({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx26("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ jsxs18("div", { className: "elb-hero__inner", children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ jsxs19("div", { className: "elb-hero__inner", children: [
+    /* @__PURE__ */ jsx28(
       SectionHeading,
       {
         level: 1,
@@ -933,14 +1165,14 @@ function Hero({
         lead
       }
     ),
-    /* @__PURE__ */ jsx26("div", { className: "elb-hero__actions", children: actions }),
-    proof !== void 0 && /* @__PURE__ */ jsx26("div", { className: "elb-hero__proof", children: proof }),
-    children !== void 0 && /* @__PURE__ */ jsx26("div", { className: "elb-hero__demo", children })
+    /* @__PURE__ */ jsx28("div", { className: "elb-hero__actions", children: actions }),
+    proof !== void 0 && /* @__PURE__ */ jsx28("div", { className: "elb-hero__proof", children: proof }),
+    children !== void 0 && /* @__PURE__ */ jsx28("div", { className: "elb-hero__demo", children })
   ] }) });
 }
 
 // src/design/components/viz/DestinationMappingViz.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/design/components/viz/data/destination-mapping.ts
 var GENERATED_ID = "\u2026";
@@ -1307,58 +1539,6 @@ var MAPPING_EVENTS = [
   }
 ];
 
-// src/design/components/viz/parts/CodeTokens.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-function CodeTokens({
-  tokens,
-  active = false
-}) {
-  return /* @__PURE__ */ jsx27(Fragment7, { children: tokens.map((token, index) => /* @__PURE__ */ jsx27(
-    "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__ */ jsxs19("div", { className: cx("elb-viz-line", className), children: [
-    /* @__PURE__ */ jsx27(
-      "span",
-      {
-        className: cx("elb-viz-line__bar", bar && `elb-viz-line__bar--${bar}`),
-        "aria-hidden": "true"
-      }
-    ),
-    number !== void 0 && /* @__PURE__ */ jsx27("span", { className: "elb-viz-line__number", children: number }),
-    /* @__PURE__ */ jsx27("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) {
@@ -1410,13 +1590,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*)$/;
@@ -1446,38 +1630,38 @@ function tokenizeCode(line, highlight) {
 }
 
 // src/design/components/viz/parts/VizFrame.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function VizFrame({
   variant,
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       ...rest,
       "data-theme": "dark",
       className: cx("elb-viz", `elb-viz--${variant}`, className),
-      children: /* @__PURE__ */ jsx28("div", { className: "elb-viz__body", children })
+      children: /* @__PURE__ */ jsx29("div", { className: "elb-viz__body", children })
     }
   );
 }
 
 // src/design/components/viz/DestinationMappingViz.tsx
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function DestinationMappingViz({
   initialEvent = 0,
   caption = MAPPING_CAPTION,
   ...rest
 }) {
-  const [index, setIndex] = useState2(initialEvent);
+  const [index, setIndex] = useState3(initialEvent);
   const event = MAPPING_EVENTS[index];
   const name = `${event.entity} ${event.action}`;
-  return /* @__PURE__ */ jsx29(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping", children: [
+  return /* @__PURE__ */ jsx30(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping", children: [
     /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping__pick", children: [
-      /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
-      /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ jsxs20(
+      /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
+      /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ jsxs20(
         "button",
         {
           type: "button",
@@ -1489,21 +1673,21 @@ function DestinationMappingViz({
           ),
           onClick: () => setIndex(position),
           children: [
-            /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
-            /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__chip-action", children: item.action })
+            /* @__PURE__ */ jsx30("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
+            /* @__PURE__ */ jsx30("span", { className: "elb-viz-mapping__chip-action", children: item.action })
           ]
         },
         `${item.entity} ${item.action}`
       )) })
     ] }),
-    /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ jsx29(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
+    /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ jsx30(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
     /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping__body", children: [
-      /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
-      /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping__card", children: [
-        /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__name", children: destination.label }),
+      /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
+      /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping__card", children: [
+        /* @__PURE__ */ jsx30("span", { className: "elb-viz-mapping__name", children: destination.label }),
         /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping__row", children: [
-          /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
-          /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
+          /* @__PURE__ */ jsx30("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ jsx30(
             CodeTokens,
             {
               tokens: tokenizeCode(
@@ -1519,8 +1703,8 @@ function DestinationMappingViz({
           ) })
         ] }),
         /* @__PURE__ */ jsxs20("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
-          /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__tag", children: "sends" }),
-          /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30("span", { className: "elb-viz-mapping__tag", children: "sends" }),
+          /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ jsx30("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ jsx30(
             CodeTokens,
             {
               tokens: tokenizeCode(line, destination.rule.name),
@@ -1530,12 +1714,12 @@ function DestinationMappingViz({
         ] })
       ] }, destination.id)) })
     ] }),
-    caption !== "" && /* @__PURE__ */ jsx29("p", { className: "elb-viz-mapping__caption", children: caption })
+    caption !== "" && /* @__PURE__ */ jsx30("p", { className: "elb-viz-mapping__caption", children: caption })
   ] }) });
 }
 
 // src/design/components/viz/HeroTaggingViz.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 
 // src/design/components/viz/parts/timeline.ts
 function clamp(x) {
@@ -1545,6 +1729,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" },
@@ -1805,8 +2005,24 @@ function heroFrame(t) {
   };
 }
 
+// src/design/components/viz/parts/CodeLine.tsx
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+function CodeLine({ number, bar, className, children }) {
+  return /* @__PURE__ */ jsxs21("div", { className: cx("elb-viz-line", className), children: [
+    /* @__PURE__ */ jsx31(
+      "span",
+      {
+        className: cx("elb-viz-line__bar", bar && `elb-viz-line__bar--${bar}`),
+        "aria-hidden": "true"
+      }
+    ),
+    number !== void 0 && /* @__PURE__ */ jsx31("span", { className: "elb-viz-line__number", children: number }),
+    /* @__PURE__ */ jsx31("span", { className: "elb-viz-line__code", children })
+  ] });
+}
+
 // src/design/components/viz/parts/EventsTable.tsx
-import { Fragment as Fragment8 } from "react";
+import { Fragment as Fragment10 } from "react";
 
 // src/design/components/viz/parts/style.ts
 function vizStyle(vars) {
@@ -1815,38 +2031,38 @@ function vizStyle(vars) {
 }
 
 // src/design/components/viz/parts/EventsTable.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var SKELETON_ROWS = 6;
 function EventsTable({ rows }) {
   const skeletons = Math.max(0, SKELETON_ROWS - rows.length);
-  return /* @__PURE__ */ jsxs21("div", { className: "elb-viz-table", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "elb-viz-table__head", children: [
-      /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__query", children: [
-        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
+  return /* @__PURE__ */ jsxs22("div", { className: "elb-viz-table", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "elb-viz-table__head", children: [
+      /* @__PURE__ */ jsxs22("span", { className: "elb-viz-table__query", children: [
+        /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
         " *",
         " ",
-        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__keyword", children: "FROM" }),
+        /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__keyword", children: "FROM" }),
         " ",
-        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
+        /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
       ] }),
-      /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__live", children: [
-        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs22("span", { className: "elb-viz-table__live", children: [
+        /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
         "live"
       ] })
     ] }),
-    /* @__PURE__ */ jsx30("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ jsx30("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ jsxs21("div", { className: "elb-viz-table__rows", children: [
-      /* @__PURE__ */ jsxs21("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
-        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
-        /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__cell", children: [
+    /* @__PURE__ */ jsx32("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ jsx32("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ jsxs22("div", { className: "elb-viz-table__rows", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
+        /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
+        /* @__PURE__ */ jsxs22("span", { className: "elb-viz-table__cell", children: [
           "name",
-          /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__type", children: "STRING" })
+          /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__type", children: "STRING" })
         ] }),
-        /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__cell", children: [
+        /* @__PURE__ */ jsxs22("span", { className: "elb-viz-table__cell", children: [
           "data",
-          /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__type", children: "JSON" })
+          /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__type", children: "JSON" })
         ] })
       ] }),
-      rows.map((row, index) => /* @__PURE__ */ jsxs21(
+      rows.map((row, index) => /* @__PURE__ */ jsxs22(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--event",
@@ -1856,15 +2072,15 @@ function EventsTable({ rows }) {
             "--elb-viz-row-shift": (1 - ease(clamp(row.age / 500))) * -80
           }),
           children: [
-            /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
-            /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__cell", children: row.name }),
-            /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
+            /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
+            /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__cell", children: row.name }),
+            /* @__PURE__ */ jsxs22("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
               "{",
-              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ jsxs21(Fragment8, { children: [
+              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ jsxs22(Fragment10, { children: [
                 position === 0 ? '"' : ',"',
-                /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__json-key", children: key }),
+                /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__json-key", children: key }),
                 '":"',
-                /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__json-value", children: value }),
+                /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__json-value", children: value }),
                 '"'
               ] }, key)),
               "}"
@@ -1873,15 +2089,15 @@ function EventsTable({ rows }) {
         },
         row.key
       )),
-      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ jsxs21(
+      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ jsxs22(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--skeleton",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
-            /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__bar" }) }),
-            /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__bar" }) })
+            /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
+            /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__bar" }) }),
+            /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx32("span", { className: "elb-viz-table__bar" }) })
           ]
         },
         `skeleton-${index}`
@@ -1891,10 +2107,10 @@ function EventsTable({ rows }) {
 }
 
 // src/design/components/viz/parts/hooks.ts
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 var REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
 function useInView(ref, threshold) {
-  const [inView, setInView] = useState3(false);
+  const [inView, setInView] = useState4(false);
   useEffect2(() => {
     const element = ref.current;
     if (!element || typeof IntersectionObserver === "undefined") {
@@ -1917,7 +2133,7 @@ function useInView(ref, threshold) {
   return inView;
 }
 function useReducedMotion() {
-  const [reduced, setReduced] = useState3(false);
+  const [reduced, setReduced] = useState4(false);
   useEffect2(() => {
     if (typeof window.matchMedia !== "function") return void 0;
     const media = window.matchMedia(REDUCED_MOTION);
@@ -1930,14 +2146,14 @@ function useReducedMotion() {
 }
 
 // src/design/components/viz/parts/Pill.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Pill({
   part,
   variant = "solid",
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "span",
     {
       className: cx(
@@ -1952,7 +2168,7 @@ function Pill({
 }
 
 // src/design/components/viz/parts/Thumb.tsx
-import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var BUG_LINES = [
   "M36 46 L28 42",
   "M35 54 L27 56",
@@ -1970,9 +2186,9 @@ var BUG_SPOTS = [
   [67, 56, 2.8]
 ];
 function Bug() {
-  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
-    /* @__PURE__ */ jsx32("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+    /* @__PURE__ */ jsx34("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx34(
       "ellipse",
       {
         className: "elb-viz-thumb__shadow",
@@ -1982,18 +2198,18 @@ function Bug() {
         ry: 6
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "g",
       {
         className: "elb-viz-thumb__legs",
         strokeWidth: 2.4,
         strokeLinecap: "round",
-        children: BUG_LINES.map((d) => /* @__PURE__ */ jsx32("path", { d }, d))
+        children: BUG_LINES.map((d) => /* @__PURE__ */ jsx34("path", { d }, d))
       }
     ),
-    /* @__PURE__ */ jsx32("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
-    /* @__PURE__ */ jsx32("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
+    /* @__PURE__ */ jsx34("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
+    /* @__PURE__ */ jsx34(
       "ellipse",
       {
         className: "elb-viz-thumb__ink",
@@ -2003,9 +2219,9 @@ function Bug() {
         ry: 7.5
       }
     ),
-    /* @__PURE__ */ jsx32("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
-    /* @__PURE__ */ jsx32("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ jsx34("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ jsx34(
       "ellipse",
       {
         className: "elb-viz-thumb__shell",
@@ -2015,8 +2231,8 @@ function Bug() {
         ry: 18
       }
     ),
-    /* @__PURE__ */ jsx32("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
-    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
+    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ jsx34(
       "circle",
       {
         className: "elb-viz-thumb__ink",
@@ -2026,7 +2242,7 @@ function Bug() {
       },
       `${x}-${y}`
     )),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "path",
       {
         className: "elb-viz-thumb__shine",
@@ -2038,9 +2254,9 @@ function Bug() {
   ] });
 }
 function Tech() {
-  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
-    /* @__PURE__ */ jsx32("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+    /* @__PURE__ */ jsx34("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx34(
       "rect",
       {
         className: "elb-viz-thumb__badge",
@@ -2051,8 +2267,8 @@ function Tech() {
         rx: 8
       }
     ),
-    /* @__PURE__ */ jsx32("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
+    /* @__PURE__ */ jsx34(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -2061,7 +2277,7 @@ function Tech() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -2073,9 +2289,9 @@ function Tech() {
   ] });
 }
 function Food() {
-  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
-    /* @__PURE__ */ jsx32("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+    /* @__PURE__ */ jsx34("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx34(
       "ellipse",
       {
         className: "elb-viz-thumb__plate",
@@ -2085,7 +2301,7 @@ function Food() {
         ry: 10
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "ellipse",
       {
         className: "elb-viz-thumb__loaf",
@@ -2095,7 +2311,7 @@ function Food() {
         ry: 19
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "ellipse",
       {
         className: "elb-viz-thumb__crust",
@@ -2105,7 +2321,7 @@ function Food() {
         ry: 13
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -2114,7 +2330,7 @@ function Food() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -2126,7 +2342,7 @@ function Food() {
   ] });
 }
 function Thumb({ kind }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "svg",
     {
       className: cx("elb-viz-thumb", `elb-viz-thumb--${kind}`),
@@ -2134,13 +2350,13 @@ function Thumb({ kind }) {
       preserveAspectRatio: "xMidYMid slice",
       "aria-hidden": "true",
       focusable: "false",
-      children: kind === "bug" ? /* @__PURE__ */ jsx32(Bug, {}) : kind === "tech" ? /* @__PURE__ */ jsx32(Tech, {}) : /* @__PURE__ */ jsx32(Food, {})
+      children: kind === "bug" ? /* @__PURE__ */ jsx34(Bug, {}) : kind === "tech" ? /* @__PURE__ */ jsx34(Tech, {}) : /* @__PURE__ */ jsx34(Food, {})
     }
   );
 }
 
 // src/design/components/viz/HeroTaggingViz.tsx
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var MAX_STEP = 64;
 function HeroTaggingViz({
   playing = true,
@@ -2151,7 +2367,7 @@ function HeroTaggingViz({
   const paneRef = useRef2(null);
   const inView = useInView(paneRef, 0);
   const reduced = useReducedMotion();
-  const [time, setTime] = useState4(startAt);
+  const [time, setTime] = useState5(startAt);
   const animate = playing && inView && !reduced;
   useEffect3(() => {
     if (!animate) return void 0;
@@ -2167,22 +2383,22 @@ function HeroTaggingViz({
     return () => cancelAnimationFrame(frame);
   }, [animate, speed]);
   const { article, lines, fade: fade2, caretOn, card, cursor, rows } = heroFrame(time);
-  return /* @__PURE__ */ jsx33(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ jsxs23("div", { className: "elb-viz-hero", children: [
-    /* @__PURE__ */ jsxs23("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "elb-viz-hero__bar", children: [
-        /* @__PURE__ */ jsxs23("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx33("span", {}),
-          /* @__PURE__ */ jsx33("span", {}),
-          /* @__PURE__ */ jsx33("span", {})
+  return /* @__PURE__ */ jsx35(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ jsxs24("div", { className: "elb-viz-hero", children: [
+    /* @__PURE__ */ jsxs24("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "elb-viz-hero__bar", children: [
+        /* @__PURE__ */ jsxs24("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx35("span", {}),
+          /* @__PURE__ */ jsx35("span", {}),
+          /* @__PURE__ */ jsx35("span", {})
         ] }),
-        /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
+        /* @__PURE__ */ jsx35("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
       ] }),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx35(
         "div",
         {
           className: "elb-viz-hero__code",
           style: vizStyle({ "--elb-viz-fade": fade2 }),
-          children: lines.map((line) => /* @__PURE__ */ jsx33(
+          children: lines.map((line) => /* @__PURE__ */ jsx35(
             CodeLine,
             {
               number: line.n,
@@ -2191,23 +2407,23 @@ function HeroTaggingViz({
                 "elb-viz-hero__line",
                 line.on && "elb-viz-hero__line--on"
               ),
-              children: line.caret === null ? /* @__PURE__ */ jsx33(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ jsxs23(Fragment10, { children: [
-                /* @__PURE__ */ jsx33(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
-                /* @__PURE__ */ jsx33(
+              children: line.caret === null ? /* @__PURE__ */ jsx35(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ jsxs24(Fragment12, { children: [
+                /* @__PURE__ */ jsx35(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
+                /* @__PURE__ */ jsx35(
                   "span",
                   {
                     className: "elb-viz-caret",
                     style: vizStyle({ "--elb-viz-caret": caretOn ? 1 : 0 })
                   }
                 ),
-                /* @__PURE__ */ jsx33(CodeTokens, { tokens: line.tokens.slice(line.caret) })
+                /* @__PURE__ */ jsx35(CodeTokens, { tokens: line.tokens.slice(line.caret) })
               ] })
             },
             line.id
           ))
         }
       ),
-      /* @__PURE__ */ jsx33("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ jsxs23(
+      /* @__PURE__ */ jsx35("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ jsxs24(
         "div",
         {
           className: cx(
@@ -2219,13 +2435,13 @@ function HeroTaggingViz({
             "--elb-viz-card-offset": card.offset
           }),
           children: [
-            /* @__PURE__ */ jsxs23("div", { className: "elb-viz-hero__pills", children: [
-              card.entity && /* @__PURE__ */ jsx33(Pill, { part: "entity", children: "article" }),
-              card.impression && /* @__PURE__ */ jsx33(Pill, { part: "action", children: "impression" })
+            /* @__PURE__ */ jsxs24("div", { className: "elb-viz-hero__pills", children: [
+              card.entity && /* @__PURE__ */ jsx35(Pill, { part: "entity", children: "article" }),
+              card.impression && /* @__PURE__ */ jsx35(Pill, { part: "action", children: "impression" })
             ] }),
-            /* @__PURE__ */ jsx33("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ jsx33(Thumb, { kind: article.thumb }) }),
-            /* @__PURE__ */ jsxs23("div", { className: "elb-viz-hero__text", children: [
-              /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx35("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ jsx35(Thumb, { kind: article.thumb }) }),
+            /* @__PURE__ */ jsxs24("div", { className: "elb-viz-hero__text", children: [
+              /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx(
@@ -2235,7 +2451,7 @@ function HeroTaggingViz({
                   children: article.kicker
                 }
               ),
-              /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx35("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx(
@@ -2245,7 +2461,7 @@ function HeroTaggingViz({
                   children: article.title
                 }
               ) }),
-              /* @__PURE__ */ jsx33("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ jsxs23(
+              /* @__PURE__ */ jsx35("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ jsxs24(
                 "span",
                 {
                   className: cx(
@@ -2254,7 +2470,7 @@ function HeroTaggingViz({
                   ),
                   children: [
                     "Open \u2192",
-                    /* @__PURE__ */ jsxs23(
+                    /* @__PURE__ */ jsxs24(
                       "span",
                       {
                         className: "elb-viz-hero__cursor",
@@ -2268,8 +2484,8 @@ function HeroTaggingViz({
                           "--elb-viz-press": cursor.pressed ? 0.8 : 1
                         }),
                         children: [
-                          /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__ring" }),
-                          /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__pointer" })
+                          /* @__PURE__ */ jsx35("span", { className: "elb-viz-hero__ring" }),
+                          /* @__PURE__ */ jsx35("span", { className: "elb-viz-hero__pointer" })
                         ]
                       }
                     )
@@ -2281,12 +2497,12 @@ function HeroTaggingViz({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx33(EventsTable, { rows })
+    /* @__PURE__ */ jsx35(EventsTable, { rows })
   ] }) });
 }
 
 // src/design/components/viz/ArticleTeaserTracking.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState6 } from "react";
 
 // src/design/components/viz/data/article-teaser.ts
 var TEASER_ENTITY = "article";
@@ -2549,7 +2765,7 @@ function teaserAdvance(n) {
 }
 
 // src/design/components/viz/ArticleTeaserTracking.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var FIRST_DELAY = 800;
 var JUMP_DELAY = 250;
 var SCROLL_DELAY = 400;
@@ -2562,7 +2778,7 @@ function TeaserCard({
   seen,
   ahead
 }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cx(
@@ -2571,9 +2787,9 @@ function TeaserCard({
         ahead && "elb-viz-teaser__card--ahead"
       ),
       children: [
-        /* @__PURE__ */ jsxs24("span", { className: "elb-viz-teaser__pills", children: [
-          /* @__PURE__ */ jsx34(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs25("span", { className: "elb-viz-teaser__pills", children: [
+          /* @__PURE__ */ jsx36(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
+          /* @__PURE__ */ jsx36(
             Pill,
             {
               part: "property",
@@ -2583,14 +2799,14 @@ function TeaserCard({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           PhotoPlaceholder,
           {
             tone: "viz",
             className: cx("elb-viz-teaser__photo", fade(seen.has("image")))
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "span",
           {
             className: cx(
@@ -2601,7 +2817,7 @@ function TeaserCard({
             children: article.kicker
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "span",
           {
             className: cx(
@@ -2612,7 +2828,7 @@ function TeaserCard({
             children: article.title
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "span",
           {
             className: cx(
@@ -2636,7 +2852,7 @@ function TeaserGroup({
   const globalsOn = seen.has(page.globalsEffect);
   const listOn = seen.has(page.listEffect);
   const reached = page.step <= current;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cx(
@@ -2645,7 +2861,7 @@ function TeaserGroup({
         !reached && !lead && "elb-viz-teaser__page--ahead"
       ),
       children: [
-        /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ jsx36(
           Pill,
           {
             part: "globals",
@@ -2653,7 +2869,7 @@ function TeaserGroup({
             children: `pagetype:${page.pagetype}`
           }
         ) }),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             className: cx(
@@ -2661,14 +2877,14 @@ function TeaserGroup({
               listOn && "elb-viz-teaser__list--on"
             ),
             children: [
-              /* @__PURE__ */ jsxs24("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
-                /* @__PURE__ */ jsxs24("span", { className: "elb-viz-teaser__list-label", children: [
-                  /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__list-name", children: page.header }),
-                  page.heading !== void 0 && /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__list-heading", children: page.heading })
+              /* @__PURE__ */ jsxs25("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
+                /* @__PURE__ */ jsxs25("span", { className: "elb-viz-teaser__list-label", children: [
+                  /* @__PURE__ */ jsx36("span", { className: "elb-viz-teaser__list-name", children: page.header }),
+                  page.heading !== void 0 && /* @__PURE__ */ jsx36("span", { className: "elb-viz-teaser__list-heading", children: page.heading })
                 ] }),
-                /* @__PURE__ */ jsx34(Pill, { part: "context", children: `list:${page.list}` })
+                /* @__PURE__ */ jsx36(Pill, { part: "context", children: `list:${page.list}` })
               ] }),
-              /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx36("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ jsx36(
                 TeaserCard,
                 {
                   article,
@@ -2694,11 +2910,11 @@ function ArticleTeaserTracking({
   const codeRef = useRef3(null);
   const inView = useInView(codeRef, 0.35);
   const reduced = useReducedMotion();
-  const [shown, setShown] = useState5(
+  const [shown, setShown] = useState6(
     () => initialStep ? teaserStepEnd(initialStep) : 0
   );
-  const [delay, setDelay] = useState5(FIRST_DELAY);
-  const [pinned, setPinned] = useState5(null);
+  const [delay, setDelay] = useState6(FIRST_DELAY);
+  const [pinned, setPinned] = useState6(null);
   const playing = autoplay && inView && !reduced;
   const end = pinned === null ? TEASER_ITEMS.length : teaserStepEnd(pinned);
   useEffect4(() => {
@@ -2763,15 +2979,15 @@ function ArticleTeaserTracking({
         separated && "elb-viz-teaser__file--separated"
       );
       separated = true;
-      return /* @__PURE__ */ jsx34("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsxs24("div", { className: fileClass, children: [
-        /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__file-name", children: item.name }),
-        /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__file-level", children: item.level })
+      return /* @__PURE__ */ jsx36("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsxs25("div", { className: fileClass, children: [
+        /* @__PURE__ */ jsx36("span", { className: "elb-viz-teaser__file-name", children: item.name }),
+        /* @__PURE__ */ jsx36("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__ */ jsx34("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx36("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsx36(
       CodeLine,
       {
         number: lineNumber,
@@ -2780,13 +2996,13 @@ function ArticleTeaserTracking({
           "elb-viz-teaser__code",
           isCurrent && `elb-viz-teaser__code--current-${item.part ?? "plain"}`
         ),
-        children: /* @__PURE__ */ jsx34(CodeTokens, { tokens: item.tokens, active: reached })
+        children: /* @__PURE__ */ jsx36(CodeTokens, { tokens: item.tokens, active: reached })
       }
     ) }, index);
   });
-  return /* @__PURE__ */ jsx34(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ jsxs24("div", { className: "elb-viz-teaser", children: [
-    /* @__PURE__ */ jsxs24("div", { className: "elb-viz-teaser__header", children: [
-      /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx36(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ jsxs25("div", { className: "elb-viz-teaser", children: [
+    /* @__PURE__ */ jsxs25("div", { className: "elb-viz-teaser__header", children: [
+      /* @__PURE__ */ jsx36("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ jsxs25(
         "button",
         {
           type: "button",
@@ -2799,18 +3015,18 @@ function ArticleTeaserTracking({
           ),
           onClick: () => jump(step),
           children: [
-            /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__step-number", children: step }),
-            /* @__PURE__ */ jsx34("span", { children: label })
+            /* @__PURE__ */ jsx36("span", { className: "elb-viz-teaser__step-number", children: step }),
+            /* @__PURE__ */ jsx36("span", { children: label })
           ]
         },
         step
       )) }),
-      /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ jsx34(EventLegend, {}) })
+      /* @__PURE__ */ jsx36("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ jsx36(EventLegend, {}) })
     ] }),
-    /* @__PURE__ */ jsx34("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
-    /* @__PURE__ */ jsxs24("div", { className: "elb-viz-teaser__body", children: [
-      /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ jsx34("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
-      /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx36("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
+    /* @__PURE__ */ jsxs25("div", { className: "elb-viz-teaser__body", children: [
+      /* @__PURE__ */ jsx36("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ jsx36("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
+      /* @__PURE__ */ jsx36("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ jsx36(
         TeaserGroup,
         {
           page: TEASER_PAGES[id],
@@ -2834,6 +3050,7 @@ export {
   Cluster,
   DestinationMappingViz,
   EventLegend,
+  EventLog,
   Eyebrow,
   FaqItem,
   FeatureItem,