@walkeros/explorer 4.8.0-next-1791441510508 → 4.8.0

package/dist/design/components/index.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   ArticleTeaserTracking: () => ArticleTeaserTracking,
+  BrowserFrame: () => BrowserFrame,
   Button: () => Button,
   Card: () => Card,
   CardGrid: () => CardGrid,
@@ -39,8 +40,10 @@ __export(components_exports, {
   Icon: () => Icon,
   InlineCode: () => InlineCode,
   InstallCommand: () => InstallCommand,
+  PhotoPlaceholder: () => PhotoPlaceholder,
   PlanCard: () => PlanCard,
   ProblemCard: () => ProblemCard,
+  QuickstartSteps: () => QuickstartSteps,
   Section: () => Section,
   SectionHeading: () => SectionHeading,
   Split: () => Split,
@@ -147,49 +150,129 @@ function EventLegend({ parts, className, ...rest }) {
 
 // src/design/components/atoms/Icon.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function Icon({ name, size = 16, className, ...rest }) {
-  const svg = {
-    "aria-hidden": true,
-    focusable: false,
-    ...rest,
-    width: size,
-    height: size,
-    className: cx("elb-icon", `elb-icon--${name}`, className)
-  };
-  return name === "check" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...svg, viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "path",
-    {
-      d: "M3 8.5l3 3 7-7",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...svg, viewBox: "0 0 24 24", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "rect",
+var GLYPHS = {
+  check: {
+    viewBox: "0 0 16 16",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
       {
-        x: 9,
-        y: 9,
-        width: 12,
-        height: 12,
-        rx: 2,
+        d: "M3 8.5l3 3 7-7",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: 2
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    )
+  },
+  copy: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "rect",
+        {
+          x: 9,
+          y: 9,
+          width: 12,
+          height: 12,
+          rx: 2,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "path",
+        {
+          d: "M5 15V5a2 2 0 0 1 2-2h10",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        }
+      )
+    ] })
+  },
+  lock: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+        ]
+      }
+    )
+  },
+  reload: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 4v6h-6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20.5 15a9 9 0 1 1-2.1-9.4L21 10" })
+        ]
+      }
+    )
+  },
+  bookmark: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "path",
       {
-        d: "M5 15V5a2 2 0 0 1 2-2h10",
+        d: "M6 3h12v18l-6-4-6 4z",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: 2
+        strokeWidth: 2,
+        strokeLinejoin: "round"
       }
     )
-  ] });
+  },
+  warning: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17h.01" })
+        ]
+      }
+    )
+  }
+};
+function Icon({ name, size = 16, className, ...rest }) {
+  const { viewBox, strokes } = GLYPHS[name];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      "aria-hidden": true,
+      focusable: false,
+      ...rest,
+      width: size,
+      height: size,
+      className: cx("elb-icon", `elb-icon--${name}`, className),
+      viewBox,
+      children: strokes
+    }
+  );
 }
 
 // src/design/components/atoms/Eyebrow.tsx
@@ -379,8 +462,29 @@ function InstallCommand({
   ] });
 }
 
-// src/design/components/molecules/CheckList.tsx
+// src/design/components/atoms/PhotoPlaceholder.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function PhotoPlaceholder({
+  label = "photo",
+  tone = "theme",
+  className,
+  ...rest
+}) {
+  const named = rest.role !== void 0 || rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "aria-hidden": named ? void 0 : true,
+      ...rest,
+      className: cx("elb-photo", tone === "viz" && "elb-photo--viz", className),
+      ...tone === "viz" ? { "data-theme": "dark" } : {},
+      children: label
+    }
+  );
+}
+
+// src/design/components/molecules/CheckList.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function CheckList({
   items,
   layout = "inline",
@@ -389,7 +493,7 @@ function CheckList({
   ...rest
 }) {
   const stack = layout === "stack";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "ul",
     {
       ...rest,
@@ -399,8 +503,8 @@ function CheckList({
         align === "center" && "elb-checklist--center",
         className
       ),
-      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "elb-checklist__item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "check", size: stack ? 14 : 16 }),
+      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "elb-checklist__item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "check", size: stack ? 14 : 16 }),
         item
       ] }, index))
     }
@@ -408,7 +512,7 @@ function CheckList({
 }
 
 // src/design/components/molecules/SectionHeading.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function SectionHeading({
   title,
   eyebrow,
@@ -421,7 +525,7 @@ function SectionHeading({
   ...rest
 }) {
   const hero = level === 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ...rest,
@@ -431,22 +535,22 @@ function SectionHeading({
         className
       ),
       children: [
-        eyebrow !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Eyebrow, { children: eyebrow }),
-        hero ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("h1", { className: "elb-sh__title elb-sh__title--display", children: [
+        eyebrow !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Eyebrow, { children: eyebrow }),
+        hero ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h1", { className: "elb-sh__title elb-sh__title--display", children: [
           title,
-          highlight !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          highlight !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "elb-sh__highlight", children: highlight })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "elb-sh__highlight", children: highlight })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: cx("elb-sh__title", `elb-sh__title--${size}`), children: title }),
-        lead !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: cx("elb-sh__lead", hero && "elb-sh__lead--hero"), children: lead })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: cx("elb-sh__title", `elb-sh__title--${size}`), children: title }),
+        lead !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cx("elb-sh__lead", hero && "elb-sh__lead--hero"), children: lead })
       ]
     }
   );
 }
 
 // src/design/components/molecules/ProblemCard.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ProblemCard({
   number,
   title,
@@ -454,7 +558,7 @@ function ProblemCard({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     Card,
     {
       ...rest,
@@ -462,18 +566,18 @@ function ProblemCard({
       hover: true,
       className: cx("elb-problem-card", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h3", { className: "elb-problem-card__title", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "elb-problem-card__number", children: number }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("h3", { className: "elb-problem-card__title", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "elb-problem-card__number", children: number }),
           title
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "elb-problem-card__text", children })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "elb-problem-card__text", children })
       ]
     }
   );
 }
 
 // src/design/components/molecules/FeatureItem.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function FeatureItem({
   title,
   children,
@@ -484,12 +588,12 @@ function FeatureItem({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...rest, className: cx("elb-feature", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "check", size: 20 }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "elb-feature__title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "elb-feature__text", children }),
-      href !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ...rest, className: cx("elb-feature", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "check", size: 20 }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "elb-feature__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "elb-feature__text", children }),
+      href !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         TextLink,
         {
           ...linkAttributes,
@@ -506,7 +610,7 @@ function FeatureItem({
 
 // src/design/components/molecules/FaqItem.tsx
 var import_react2 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function FaqItem({
   question,
   children,
@@ -514,16 +618,16 @@ function FaqItem({
   ...rest
 }) {
   const parts = Array.isArray(children) ? children : [children];
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("details", { ...rest, className: cx("elb-faq", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("summary", { className: "elb-faq__question", children: question }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "elb-faq__answer", children: parts.map(
-      (part, index) => typeof part === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: part }, index) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react2.Fragment, { children: part }, index)
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { ...rest, className: cx("elb-faq", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { className: "elb-faq__question", children: question }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "elb-faq__answer", children: parts.map(
+      (part, index) => typeof part === "string" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: part }, index) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react2.Fragment, { children: part }, index)
     ) })
   ] });
 }
 
 // src/design/components/molecules/PlanCard.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function PlanCard({
   label,
   title,
@@ -535,7 +639,7 @@ function PlanCard({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     Card,
     {
       ...rest,
@@ -543,11 +647,11 @@ function PlanCard({
       highlight,
       className: cx("elb-plan", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Eyebrow, { variant: "label", tone: highlight ? "link" : "muted", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "elb-plan__title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "elb-plan__text", children }),
-        features && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckList, { items: features, layout: "stack" }),
-        cta && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Eyebrow, { variant: "label", tone: highlight ? "link" : "muted", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "elb-plan__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "elb-plan__text", children }),
+        features && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckList, { items: features, layout: "stack" }),
+        cta && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Button,
           {
             ...cta.attributes,
@@ -564,7 +668,7 @@ function PlanCard({
 }
 
 // src/design/components/molecules/CaseCard.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CaseCard({
   label,
   title,
@@ -573,16 +677,16 @@ function CaseCard({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Card, { ...rest, padding: "md", className: cx("elb-case-card", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Eyebrow, { variant: "label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "elb-case-card__title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "elb-case-card__text", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "elb-case-card__stats", children: stats.map((stat, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Stat, { value: stat.value, children: stat.label }, index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Card, { ...rest, padding: "md", className: cx("elb-case-card", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Eyebrow, { variant: "label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "elb-case-card__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "elb-case-card__text", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "elb-case-card__stats", children: stats.map((stat, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Stat, { value: stat.value, children: stat.label }, index)) })
   ] });
 }
 
 // src/design/components/molecules/HighlightCard.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function HighlightCard({
   label,
   title,
@@ -592,7 +696,7 @@ function HighlightCard({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     Card,
     {
       ...rest,
@@ -602,10 +706,10 @@ function HighlightCard({
       glow: true,
       className: cx("elb-highlight-card", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Eyebrow, { variant: "label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "elb-highlight-card__title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "elb-highlight-card__text", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Eyebrow, { variant: "label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "elb-highlight-card__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "elb-highlight-card__text", children }),
+        cta && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Button,
           {
             ...cta.attributes,
@@ -622,15 +726,146 @@ function HighlightCard({
   );
 }
 
+// src/design/components/molecules/BrowserFrame.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function BrowserFrame({
+  url,
+  bookmarks,
+  onNavigate,
+  onReload,
+  actions,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ...rest, className: cx("elb-browser", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "elb-browser__bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "elb-browser__dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "elb-browser__address", title: url, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "lock", size: 14 }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "elb-browser__url", children: url })
+      ] }),
+      onReload && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "elb-browser__reload",
+          "aria-label": "Reload",
+          onClick: onReload,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "reload", size: 16 })
+        }
+      ),
+      actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "elb-browser__actions", children: actions })
+    ] }),
+    bookmarks && bookmarks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("nav", { className: "elb-browser__bookmarks", "aria-label": "Bookmarks", children: bookmarks.map((bookmark) => {
+      const current = bookmark.url === url;
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: cx(
+            "elb-browser__bookmark",
+            current && "elb-browser__bookmark--active"
+          ),
+          "aria-current": current ? "page" : void 0,
+          disabled: !onNavigate,
+          onClick: () => onNavigate?.(bookmark.url),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "bookmark", size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: bookmark.label })
+          ]
+        },
+        bookmark.url
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "elb-browser__viewport", children })
+  ] });
+}
+
+// src/design/components/molecules/QuickstartSteps.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ARROWS = [
+  {
+    kind: "wave",
+    paths: [
+      "M4 26 C 18 6, 34 6, 40 20 S 58 34, 70 16",
+      "M62 20 L70 16 L69.5 25"
+    ]
+  },
+  {
+    kind: "loop",
+    paths: [
+      "M4 28 C 20 30, 26 8, 38 10 C 50 12, 44 28, 36 24 C 28 20, 44 6, 72 14",
+      "M65.7 7.6 L72 14 L63.3 16.2"
+    ]
+  }
+];
+function Arrow({ kind, paths }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "li",
+    {
+      className: cx("elb-quickstart__arrow", `elb-quickstart__arrow--${kind}`),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "svg",
+        {
+          width: "76",
+          height: "40",
+          viewBox: "0 0 76 40",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: paths.map((d) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d }, d))
+        }
+      )
+    }
+  );
+}
+function QuickstartSteps({
+  steps,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...rest, className: cx("elb-quickstart", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ol", { className: "elb-quickstart__steps", children: steps.flatMap((step, index) => {
+      const item = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "elb-quickstart__step", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "elb-quickstart__head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "elb-quickstart__num", "aria-hidden": "true", children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "elb-quickstart__title", children: step.title })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "elb-quickstart__copy", children: step.text })
+      ] }, step.title);
+      return index < steps.length - 1 ? [
+        item,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Arrow,
+          {
+            ...ARROWS[index % ARROWS.length]
+          },
+          `arrow-${index}`
+        )
+      ] : [item];
+    }) }),
+    children
+  ] });
+}
+
 // src/design/components/layout/Section.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Section({
   children,
   tone = "default",
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "section",
     {
       ...rest,
@@ -639,13 +874,13 @@ function Section({
         tone === "alt" && "elb-section--alt",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "elb-section__inner", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "elb-section__inner", children })
     }
   );
 }
 
 // src/design/components/layout/CardGrid.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function CardGrid({
   children,
   min,
@@ -653,7 +888,7 @@ function CardGrid({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       ...rest,
@@ -669,7 +904,7 @@ function CardGrid({
 }
 
 // src/design/components/layout/Split.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Split({
   start,
   end,
@@ -677,7 +912,7 @@ function Split({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       ...rest,
@@ -687,23 +922,24 @@ function Split({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "elb-split__start", children: start }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "elb-split__end", children: end })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "elb-split__start", children: start }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "elb-split__end", children: end })
       ]
     }
   );
 }
 
 // src/design/components/layout/Cluster.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Cluster({
   children,
   gap = "actions",
   align = "start",
+  separated = false,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ...rest,
@@ -711,6 +947,7 @@ function Cluster({
         "elb-cluster",
         gap === "links" && "elb-cluster--links",
         align === "center" && "elb-cluster--center",
+        separated && "elb-cluster--separated",
         className
       ),
       children
@@ -719,7 +956,7 @@ function Cluster({
 }
 
 // src/design/components/layout/Hero.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Hero({
   eyebrow,
   title,
@@ -731,8 +968,8 @@ function Hero({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "elb-hero__inner", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-hero__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SectionHeading,
       {
         level: 1,
@@ -742,9 +979,9 @@ function Hero({
         lead
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "elb-hero__actions", children: actions }),
-    proof !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "elb-hero__proof", children: proof }),
-    children !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "elb-hero__demo", children })
+    /* @__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 })
   ] }) });
 }
 
@@ -1117,12 +1354,12 @@ var MAPPING_EVENTS = [
 ];
 
 // src/design/components/viz/parts/CodeTokens.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function CodeTokens({
   tokens,
   active = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  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(
@@ -1136,16 +1373,16 @@ function CodeTokens({
   )) });
 }
 function CodeLine({ number, bar, className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx("elb-viz-line", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  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_runtime24.jsx)("span", { className: "elb-viz-line__number", children: number }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "elb-viz-line__code", children })
+    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 })
   ] });
 }
 
@@ -1255,26 +1492,26 @@ function tokenizeCode(line, highlight) {
 }
 
 // src/design/components/viz/parts/VizFrame.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function VizFrame({
   variant,
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       ...rest,
       "data-theme": "dark",
       className: cx("elb-viz", `elb-viz--${variant}`, className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "elb-viz__body", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "elb-viz__body", children })
     }
   );
 }
 
 // src/design/components/viz/DestinationMappingViz.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function DestinationMappingViz({
   initialEvent = 0,
   caption = MAPPING_CAPTION,
@@ -1283,10 +1520,10 @@ function DestinationMappingViz({
   const [index, setIndex] = (0, import_react3.useState)(initialEvent);
   const event = MAPPING_EVENTS[index];
   const name = `${event.entity} ${event.action}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-viz-mapping", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-viz-mapping__pick", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__pick", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "button",
         {
           type: "button",
@@ -1298,21 +1535,21 @@ function DestinationMappingViz({
           ),
           onClick: () => setIndex(position),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "elb-viz-mapping__chip-action", children: item.action })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__chip-action", children: item.action })
           ]
         },
         `${item.entity} ${item.action}`
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-viz-mapping__body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-viz-mapping__card", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "elb-viz-mapping__name", children: destination.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-viz-mapping__row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__name", children: destination.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             CodeTokens,
             {
               tokens: tokenizeCode(
@@ -1327,9 +1564,9 @@ function DestinationMappingViz({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "elb-viz-mapping__tag", children: "sends" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "elb-viz-mapping__tag", children: "sends" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             CodeTokens,
             {
               tokens: tokenizeCode(line, destination.rule.name),
@@ -1339,7 +1576,7 @@ function DestinationMappingViz({
         ] })
       ] }, destination.id)) })
     ] }),
-    caption !== "" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "elb-viz-mapping__caption", children: caption })
+    caption !== "" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "elb-viz-mapping__caption", children: caption })
   ] }) });
 }
 
@@ -1624,38 +1861,38 @@ function vizStyle(vars) {
 }
 
 // src/design/components/viz/parts/EventsTable.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var SKELETON_ROWS = 6;
 function EventsTable({ rows }) {
   const skeletons = Math.max(0, SKELETON_ROWS - rows.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "elb-viz-table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "elb-viz-table__head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "elb-viz-table__query", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__query", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
         " *",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__keyword", children: "FROM" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__keyword", children: "FROM" }),
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "elb-viz-table__live", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__live", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
         "live"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "elb-viz-table__rows", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "elb-viz-table__cell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table__rows", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell", children: [
           "name",
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__type", children: "STRING" })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__type", children: "STRING" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "elb-viz-table__cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell", children: [
           "data",
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__type", children: "JSON" })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__type", children: "JSON" })
         ] })
       ] }),
-      rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--event",
@@ -1665,15 +1902,15 @@ function EventsTable({ rows }) {
             "--elb-viz-row-shift": (1 - ease(clamp(row.age / 500))) * -80
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__cell", children: row.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell", children: row.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
               "{",
-              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react4.Fragment, { children: [
+              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react4.Fragment, { children: [
                 position === 0 ? '"' : ',"',
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__json-key", children: key }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__json-key", children: key }),
                 '":"',
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__json-value", children: value }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__json-value", children: value }),
                 '"'
               ] }, key)),
               "}"
@@ -1682,15 +1919,15 @@ function EventsTable({ rows }) {
         },
         row.key
       )),
-      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--skeleton",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__bar" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "elb-viz-table__bar" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__bar" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-table__bar" }) })
           ]
         },
         `skeleton-${index}`
@@ -1739,14 +1976,14 @@ function useReducedMotion() {
 }
 
 // src/design/components/viz/parts/Pill.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Pill({
   part,
   variant = "solid",
   className,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "span",
     {
       className: cx(
@@ -1761,7 +1998,7 @@ function Pill({
 }
 
 // src/design/components/viz/parts/Thumb.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var BUG_LINES = [
   "M36 46 L28 42",
   "M35 54 L27 56",
@@ -1779,9 +2016,9 @@ var BUG_SPOTS = [
   [67, 56, 2.8]
 ];
 function Bug() {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__shadow",
@@ -1791,18 +2028,18 @@ function Bug() {
         ry: 6
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "g",
       {
         className: "elb-viz-thumb__legs",
         strokeWidth: 2.4,
         strokeLinecap: "round",
-        children: BUG_LINES.map((d) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d }, d))
+        children: BUG_LINES.map((d) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d }, d))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__ink",
@@ -1812,9 +2049,9 @@ function Bug() {
         ry: 7.5
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__shell",
@@ -1824,8 +2061,8 @@ function Bug() {
         ry: 18
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
-    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
+    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "circle",
       {
         className: "elb-viz-thumb__ink",
@@ -1835,7 +2072,7 @@ function Bug() {
       },
       `${x}-${y}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         className: "elb-viz-thumb__shine",
@@ -1847,9 +2084,9 @@ function Bug() {
   ] });
 }
 function Tech() {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "rect",
       {
         className: "elb-viz-thumb__badge",
@@ -1860,8 +2097,8 @@ function Tech() {
         rx: 8
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -1870,7 +2107,7 @@ function Tech() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -1882,9 +2119,9 @@ function Tech() {
   ] });
 }
 function Food() {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__plate",
@@ -1894,7 +2131,7 @@ function Food() {
         ry: 10
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__loaf",
@@ -1904,7 +2141,7 @@ function Food() {
         ry: 19
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ellipse",
       {
         className: "elb-viz-thumb__crust",
@@ -1914,7 +2151,7 @@ function Food() {
         ry: 13
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -1923,7 +2160,7 @@ function Food() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -1935,7 +2172,7 @@ function Food() {
   ] });
 }
 function Thumb({ kind }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "svg",
     {
       className: cx("elb-viz-thumb", `elb-viz-thumb--${kind}`),
@@ -1943,13 +2180,13 @@ function Thumb({ kind }) {
       preserveAspectRatio: "xMidYMid slice",
       "aria-hidden": "true",
       focusable: "false",
-      children: kind === "bug" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Bug, {}) : kind === "tech" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Tech, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Food, {})
+      children: kind === "bug" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Bug, {}) : kind === "tech" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tech, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Food, {})
     }
   );
 }
 
 // src/design/components/viz/HeroTaggingViz.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MAX_STEP = 64;
 function HeroTaggingViz({
   playing = true,
@@ -1976,22 +2213,22 @@ function HeroTaggingViz({
     return () => cancelAnimationFrame(frame);
   }, [animate, speed]);
   const { article, lines, fade: fade2, caretOn, card, cursor, rows } = heroFrame(time);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-hero", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-hero__bar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", {})
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero__bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           className: "elb-viz-hero__code",
           style: vizStyle({ "--elb-viz-fade": fade2 }),
-          children: lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             CodeLine,
             {
               number: line.n,
@@ -2000,23 +2237,23 @@ function HeroTaggingViz({
                 "elb-viz-hero__line",
                 line.on && "elb-viz-hero__line--on"
               ),
-              children: line.caret === null ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              children: line.caret === null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "span",
                   {
                     className: "elb-viz-caret",
                     style: vizStyle({ "--elb-viz-caret": caretOn ? 1 : 0 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CodeTokens, { tokens: line.tokens.slice(line.caret) })
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeTokens, { tokens: line.tokens.slice(line.caret) })
               ] })
             },
             line.id
           ))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           className: cx(
@@ -2028,13 +2265,13 @@ function HeroTaggingViz({
             "--elb-viz-card-offset": card.offset
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-hero__pills", children: [
-              card.entity && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Pill, { part: "entity", children: "article" }),
-              card.impression && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Pill, { part: "action", children: "impression" })
+            /* @__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_runtime30.jsx)("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Thumb, { kind: article.thumb }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "elb-viz-hero__text", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Thumb, { kind: article.thumb }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "elb-viz-hero__text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "span",
                 {
                   className: cx(
@@ -2044,7 +2281,7 @@ function HeroTaggingViz({
                   children: article.kicker
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "span",
                 {
                   className: cx(
@@ -2054,7 +2291,7 @@ function HeroTaggingViz({
                   children: article.title
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 "span",
                 {
                   className: cx(
@@ -2063,7 +2300,7 @@ function HeroTaggingViz({
                   ),
                   children: [
                     "Open \u2192",
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                       "span",
                       {
                         className: "elb-viz-hero__cursor",
@@ -2077,8 +2314,8 @@ function HeroTaggingViz({
                           "--elb-viz-press": cursor.pressed ? 0.8 : 1
                         }),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-hero__ring" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "elb-viz-hero__pointer" })
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__ring" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "elb-viz-hero__pointer" })
                         ]
                       }
                     )
@@ -2090,7 +2327,7 @@ function HeroTaggingViz({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(EventsTable, { rows })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EventsTable, { rows })
   ] }) });
 }
 
@@ -2358,7 +2595,7 @@ function teaserAdvance(n) {
 }
 
 // src/design/components/viz/ArticleTeaserTracking.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var FIRST_DELAY = 800;
 var JUMP_DELAY = 250;
 var SCROLL_DELAY = 400;
@@ -2371,7 +2608,7 @@ function TeaserCard({
   seen,
   ahead
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: cx(
@@ -2380,9 +2617,9 @@ function TeaserCard({
         ahead && "elb-viz-teaser__card--ahead"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "elb-viz-teaser__pills", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "elb-viz-teaser__pills", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Pill,
             {
               part: "property",
@@ -2392,8 +2629,14 @@ function TeaserCard({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cx("elb-viz-teaser__photo", fade(seen.has("image"))), children: "photo" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          PhotoPlaceholder,
+          {
+            tone: "viz",
+            className: cx("elb-viz-teaser__photo", fade(seen.has("image")))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
           {
             className: cx(
@@ -2404,7 +2647,7 @@ function TeaserCard({
             children: article.kicker
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
           {
             className: cx(
@@ -2415,7 +2658,7 @@ function TeaserCard({
             children: article.title
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
           {
             className: cx(
@@ -2439,7 +2682,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_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: cx(
@@ -2448,7 +2691,7 @@ function TeaserGroup({
         !reached && !lead && "elb-viz-teaser__page--ahead"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Pill,
           {
             part: "globals",
@@ -2456,7 +2699,7 @@ function TeaserGroup({
             children: `pagetype:${page.pagetype}`
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "div",
           {
             className: cx(
@@ -2464,14 +2707,14 @@ function TeaserGroup({
               listOn && "elb-viz-teaser__list--on"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "elb-viz-teaser__list-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-teaser__list-name", children: page.header }),
-                  page.heading !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-teaser__list-heading", children: page.heading })
+              /* @__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_runtime31.jsx)(Pill, { part: "context", children: `list:${page.list}` })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Pill, { part: "context", children: `list:${page.list}` })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 TeaserCard,
                 {
                   article,
@@ -2501,7 +2744,9 @@ function ArticleTeaserTracking({
     () => initialStep ? teaserStepEnd(initialStep) : 0
   );
   const [delay, setDelay] = (0, import_react7.useState)(FIRST_DELAY);
+  const [pinned, setPinned] = (0, import_react7.useState)(null);
   const playing = autoplay && inView && !reduced;
+  const end = pinned === null ? TEASER_ITEMS.length : teaserStepEnd(pinned);
   (0, import_react7.useEffect)(() => {
     if (reduced) setShown(TEASER_ITEMS.length);
   }, [reduced]);
@@ -2514,10 +2759,10 @@ function ArticleTeaserTracking({
         return;
       }
       setShown(advance.next);
-      setDelay(advance.delay);
+      setDelay(advance.next < end ? advance.delay : null);
     }, delay / speed);
     return () => clearTimeout(timer);
-  }, [playing, delay, shown, speed]);
+  }, [playing, delay, shown, speed, end]);
   (0, import_react7.useEffect)(() => {
     const pane = codeRef.current;
     if (!pane || shown === 0 || typeof pane.scrollTo !== "function")
@@ -2533,6 +2778,7 @@ function ArticleTeaserTracking({
     return () => clearTimeout(timer);
   }, [shown, reduced]);
   const jump = (step) => {
+    setPinned(step);
     if (autoplay && !reduced) {
       setShown(teaserStepStart(step));
       setDelay(JUMP_DELAY);
@@ -2563,15 +2809,15 @@ function ArticleTeaserTracking({
         separated && "elb-viz-teaser__file--separated"
       );
       separated = true;
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: fileClass, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-teaser__file-name", children: item.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-teaser__file-level", children: item.level })
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: fileClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__file-name", children: item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__file-level", children: item.level })
       ] }) }, index);
     }
     lineNumber += 1;
     const reached = index < count;
     const isCurrent = index === count - 1 && item.effect !== void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       CodeLine,
       {
         number: lineNumber,
@@ -2580,13 +2826,13 @@ function ArticleTeaserTracking({
           "elb-viz-teaser__code",
           isCurrent && `elb-viz-teaser__code--current-${item.part ?? "plain"}`
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CodeTokens, { tokens: item.tokens, active: reached })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CodeTokens, { tokens: item.tokens, active: reached })
       }
     ) }, index);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "elb-viz-teaser", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "elb-viz-teaser__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "elb-viz-teaser", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "elb-viz-teaser__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "button",
         {
           type: "button",
@@ -2599,18 +2845,18 @@ function ArticleTeaserTracking({
           ),
           onClick: () => jump(step),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "elb-viz-teaser__step-number", children: step }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: label })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "elb-viz-teaser__step-number", children: step }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label })
           ]
         },
         step
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EventLegend, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EventLegend, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "elb-viz-teaser__body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "elb-viz-teaser__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         TeaserGroup,
         {
           page: TEASER_PAGES[id],