@walkeros/explorer 4.8.0-next-1791441510508 → 4.8.0

package/dist/design/components/index.mjs

@@ -96,50 +96,130 @@ function EventLegend({ parts, className, ...rest }) {
 }
 
 // src/design/components/atoms/Icon.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function Icon({ name, size = 16, className, ...rest }) {
-  const svg = {
-    "aria-hidden": true,
-    focusable: false,
-    ...rest,
-    width: size,
-    height: size,
-    className: cx("elb-icon", `elb-icon--${name}`, className)
-  };
-  return name === "check" ? /* @__PURE__ */ jsx4("svg", { ...svg, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx4(
-    "path",
-    {
-      d: "M3 8.5l3 3 7-7",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) }) : /* @__PURE__ */ jsxs3("svg", { ...svg, viewBox: "0 0 24 24", children: [
-    /* @__PURE__ */ jsx4(
-      "rect",
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var GLYPHS = {
+  check: {
+    viewBox: "0 0 16 16",
+    strokes: /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(
+    )
+  },
+  copy: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        "rect",
+        {
+          x: 9,
+          y: 9,
+          width: 12,
+          height: 12,
+          rx: 2,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          d: "M5 15V5a2 2 0 0 1 2-2h10",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        }
+      )
+    ] })
+  },
+  lock: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ jsxs3(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx4("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }),
+          /* @__PURE__ */ jsx4("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+        ]
+      }
+    )
+  },
+  reload: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ jsxs3(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx4("path", { d: "M21 4v6h-6" }),
+          /* @__PURE__ */ jsx4("path", { d: "M20.5 15a9 9 0 1 1-2.1-9.4L21 10" })
+        ]
+      }
+    )
+  },
+  bookmark: {
+    viewBox: "0 0 24 24",
+    strokes: /* @__PURE__ */ jsx4(
       "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__ */ jsxs3(
+      "g",
+      {
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx4("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__ */ jsx4("path", { d: "M12 9v4" }),
+          /* @__PURE__ */ jsx4("path", { d: "M12 17h.01" })
+        ]
+      }
+    )
+  }
+};
+function Icon({ name, size = 16, className, ...rest }) {
+  const { viewBox, strokes } = GLYPHS[name];
+  return /* @__PURE__ */ jsx4(
+    "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
@@ -200,7 +280,7 @@ function Text({
 }
 
 // src/design/components/atoms/TextLink.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function TextLink({
   href,
   children,
@@ -219,7 +299,7 @@ function TextLink({
       className
     )
   };
-  const content = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
     children,
     arrow && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: " \u2192" })
   ] });
@@ -263,7 +343,7 @@ import {
   useRef,
   useState
 } from "react";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var CONFIRM_MS = 1400;
 async function copyText(text) {
   try {
@@ -297,7 +377,7 @@ function InstallCommand({
     setState(copied ? "done" : "failed");
     if (copied) timer.current = setTimeout(() => setState("idle"), CONFIRM_MS);
   };
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsxs6(
       "button",
       {
@@ -334,8 +414,29 @@ function InstallCommand({
   ] });
 }
 
+// src/design/components/atoms/PhotoPlaceholder.tsx
+import { jsx as jsx11 } from "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__ */ jsx11(
+    "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
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function CheckList({
   items,
   layout = "inline",
@@ -344,7 +445,7 @@ function CheckList({
   ...rest
 }) {
   const stack = layout === "stack";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "ul",
     {
       ...rest,
@@ -355,7 +456,7 @@ function CheckList({
         className
       ),
       children: items.map((item, index) => /* @__PURE__ */ jsxs7("li", { className: "elb-checklist__item", children: [
-        /* @__PURE__ */ jsx11(Icon, { name: "check", size: stack ? 14 : 16 }),
+        /* @__PURE__ */ jsx12(Icon, { name: "check", size: stack ? 14 : 16 }),
         item
       ] }, index))
     }
@@ -363,7 +464,7 @@ function CheckList({
 }
 
 // src/design/components/molecules/SectionHeading.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function SectionHeading({
   title,
   eyebrow,
@@ -386,22 +487,22 @@ function SectionHeading({
         className
       ),
       children: [
-        eyebrow !== void 0 && /* @__PURE__ */ jsx12(Eyebrow, { children: eyebrow }),
+        eyebrow !== void 0 && /* @__PURE__ */ jsx13(Eyebrow, { children: eyebrow }),
         hero ? /* @__PURE__ */ jsxs8("h1", { className: "elb-sh__title elb-sh__title--display", children: [
           title,
-          highlight !== void 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          highlight !== void 0 && /* @__PURE__ */ jsxs8(Fragment5, { children: [
             " ",
-            /* @__PURE__ */ jsx12("span", { className: "elb-sh__highlight", children: highlight })
+            /* @__PURE__ */ jsx13("span", { className: "elb-sh__highlight", children: highlight })
           ] })
-        ] }) : /* @__PURE__ */ jsx12("h2", { className: cx("elb-sh__title", `elb-sh__title--${size}`), children: title }),
-        lead !== void 0 && /* @__PURE__ */ jsx12("p", { className: cx("elb-sh__lead", hero && "elb-sh__lead--hero"), children: lead })
+        ] }) : /* @__PURE__ */ jsx13("h2", { className: cx("elb-sh__title", `elb-sh__title--${size}`), children: title }),
+        lead !== void 0 && /* @__PURE__ */ jsx13("p", { className: cx("elb-sh__lead", hero && "elb-sh__lead--hero"), children: lead })
       ]
     }
   );
 }
 
 // src/design/components/molecules/ProblemCard.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function ProblemCard({
   number,
   title,
@@ -418,17 +519,17 @@ function ProblemCard({
       className: cx("elb-problem-card", className),
       children: [
         /* @__PURE__ */ jsxs9("h3", { className: "elb-problem-card__title", children: [
-          /* @__PURE__ */ jsx13("span", { className: "elb-problem-card__number", children: number }),
+          /* @__PURE__ */ jsx14("span", { className: "elb-problem-card__number", children: number }),
           title
         ] }),
-        /* @__PURE__ */ jsx13("p", { className: "elb-problem-card__text", children })
+        /* @__PURE__ */ jsx14("p", { className: "elb-problem-card__text", children })
       ]
     }
   );
 }
 
 // src/design/components/molecules/FeatureItem.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function FeatureItem({
   title,
   children,
@@ -440,11 +541,11 @@ function FeatureItem({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs10("div", { ...rest, className: cx("elb-feature", className), children: [
-    /* @__PURE__ */ jsx14(Icon, { name: "check", size: 20 }),
+    /* @__PURE__ */ jsx15(Icon, { name: "check", size: 20 }),
     /* @__PURE__ */ jsxs10("div", { children: [
-      /* @__PURE__ */ jsx14("h3", { className: "elb-feature__title", children: title }),
-      /* @__PURE__ */ jsx14("p", { className: "elb-feature__text", children }),
-      href !== void 0 && /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15("h3", { className: "elb-feature__title", children: title }),
+      /* @__PURE__ */ jsx15("p", { className: "elb-feature__text", children }),
+      href !== void 0 && /* @__PURE__ */ jsx15(
         TextLink,
         {
           ...linkAttributes,
@@ -461,9 +562,9 @@ function FeatureItem({
 
 // src/design/components/molecules/FaqItem.tsx
 import {
-  Fragment as Fragment5
+  Fragment as Fragment6
 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function FaqItem({
   question,
   children,
@@ -472,15 +573,15 @@ function FaqItem({
 }) {
   const parts = Array.isArray(children) ? children : [children];
   return /* @__PURE__ */ jsxs11("details", { ...rest, className: cx("elb-faq", className), children: [
-    /* @__PURE__ */ jsx15("summary", { className: "elb-faq__question", children: question }),
-    /* @__PURE__ */ jsx15("div", { className: "elb-faq__answer", children: parts.map(
-      (part, index) => typeof part === "string" ? /* @__PURE__ */ jsx15("p", { children: part }, index) : /* @__PURE__ */ jsx15(Fragment5, { children: part }, index)
+    /* @__PURE__ */ jsx16("summary", { className: "elb-faq__question", children: question }),
+    /* @__PURE__ */ jsx16("div", { className: "elb-faq__answer", children: parts.map(
+      (part, index) => typeof part === "string" ? /* @__PURE__ */ jsx16("p", { children: part }, index) : /* @__PURE__ */ jsx16(Fragment6, { children: part }, index)
     ) })
   ] });
 }
 
 // src/design/components/molecules/PlanCard.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function PlanCard({
   label,
   title,
@@ -500,11 +601,11 @@ function PlanCard({
       highlight,
       className: cx("elb-plan", className),
       children: [
-        /* @__PURE__ */ jsx16(Eyebrow, { variant: "label", tone: highlight ? "link" : "muted", children: label }),
-        /* @__PURE__ */ jsx16("h3", { className: "elb-plan__title", children: title }),
-        /* @__PURE__ */ jsx16("p", { className: "elb-plan__text", children }),
-        features && /* @__PURE__ */ jsx16(CheckList, { items: features, layout: "stack" }),
-        cta && /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Eyebrow, { variant: "label", tone: highlight ? "link" : "muted", children: label }),
+        /* @__PURE__ */ jsx17("h3", { className: "elb-plan__title", children: title }),
+        /* @__PURE__ */ jsx17("p", { className: "elb-plan__text", children }),
+        features && /* @__PURE__ */ jsx17(CheckList, { items: features, layout: "stack" }),
+        cta && /* @__PURE__ */ jsx17(
           Button,
           {
             ...cta.attributes,
@@ -521,7 +622,7 @@ function PlanCard({
 }
 
 // src/design/components/molecules/CaseCard.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function CaseCard({
   label,
   title,
@@ -531,15 +632,15 @@ function CaseCard({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs13(Card, { ...rest, padding: "md", className: cx("elb-case-card", className), children: [
-    /* @__PURE__ */ jsx17(Eyebrow, { variant: "label", children: label }),
-    /* @__PURE__ */ jsx17("h3", { className: "elb-case-card__title", children: title }),
-    /* @__PURE__ */ jsx17("p", { className: "elb-case-card__text", children }),
-    /* @__PURE__ */ jsx17("div", { className: "elb-case-card__stats", children: stats.map((stat, index) => /* @__PURE__ */ jsx17(Stat, { value: stat.value, children: stat.label }, index)) })
+    /* @__PURE__ */ jsx18(Eyebrow, { variant: "label", children: label }),
+    /* @__PURE__ */ jsx18("h3", { className: "elb-case-card__title", children: title }),
+    /* @__PURE__ */ jsx18("p", { className: "elb-case-card__text", children }),
+    /* @__PURE__ */ jsx18("div", { className: "elb-case-card__stats", children: stats.map((stat, index) => /* @__PURE__ */ jsx18(Stat, { value: stat.value, children: stat.label }, index)) })
   ] });
 }
 
 // src/design/components/molecules/HighlightCard.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function HighlightCard({
   label,
   title,
@@ -559,10 +660,10 @@ function HighlightCard({
       glow: true,
       className: cx("elb-highlight-card", className),
       children: [
-        /* @__PURE__ */ jsx18(Eyebrow, { variant: "label", children: label }),
-        /* @__PURE__ */ jsx18("h3", { className: "elb-highlight-card__title", children: title }),
-        /* @__PURE__ */ jsx18("p", { className: "elb-highlight-card__text", children }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(Eyebrow, { variant: "label", children: label }),
+        /* @__PURE__ */ jsx19("h3", { className: "elb-highlight-card__title", children: title }),
+        /* @__PURE__ */ jsx19("p", { className: "elb-highlight-card__text", children }),
+        cta && /* @__PURE__ */ jsx19(
           Button,
           {
             ...cta.attributes,
@@ -579,15 +680,146 @@ function HighlightCard({
   );
 }
 
+// src/design/components/molecules/BrowserFrame.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function BrowserFrame({
+  url,
+  bookmarks,
+  onNavigate,
+  onReload,
+  actions,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs15("div", { ...rest, className: cx("elb-browser", className), children: [
+    /* @__PURE__ */ jsxs15("div", { className: "elb-browser__bar", children: [
+      /* @__PURE__ */ jsxs15("span", { className: "elb-browser__dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx20("span", {}),
+        /* @__PURE__ */ jsx20("span", {}),
+        /* @__PURE__ */ jsx20("span", {})
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { className: "elb-browser__address", title: url, children: [
+        /* @__PURE__ */ jsx20(Icon, { name: "lock", size: 14 }),
+        /* @__PURE__ */ jsx20("span", { className: "elb-browser__url", children: url })
+      ] }),
+      onReload && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          className: "elb-browser__reload",
+          "aria-label": "Reload",
+          onClick: onReload,
+          children: /* @__PURE__ */ jsx20(Icon, { name: "reload", size: 16 })
+        }
+      ),
+      actions && /* @__PURE__ */ jsx20("div", { className: "elb-browser__actions", children: actions })
+    ] }),
+    bookmarks && bookmarks.length > 0 && /* @__PURE__ */ jsx20("nav", { className: "elb-browser__bookmarks", "aria-label": "Bookmarks", children: bookmarks.map((bookmark) => {
+      const current = bookmark.url === url;
+      return /* @__PURE__ */ jsxs15(
+        "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__ */ jsx20(Icon, { name: "bookmark", size: 14 }),
+            /* @__PURE__ */ jsx20("span", { children: bookmark.label })
+          ]
+        },
+        bookmark.url
+      );
+    }) }),
+    /* @__PURE__ */ jsx20("div", { className: "elb-browser__viewport", children })
+  ] });
+}
+
+// src/design/components/molecules/QuickstartSteps.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "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__ */ jsx21(
+    "li",
+    {
+      className: cx("elb-quickstart__arrow", `elb-quickstart__arrow--${kind}`),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx21(
+        "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__ */ jsx21("path", { d }, d))
+        }
+      )
+    }
+  );
+}
+function QuickstartSteps({
+  steps,
+  children,
+  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 })
+        ] }),
+        /* @__PURE__ */ jsx21("p", { className: "elb-quickstart__copy", children: step.text })
+      ] }, step.title);
+      return index < steps.length - 1 ? [
+        item,
+        /* @__PURE__ */ jsx21(
+          Arrow,
+          {
+            ...ARROWS[index % ARROWS.length]
+          },
+          `arrow-${index}`
+        )
+      ] : [item];
+    }) }),
+    children
+  ] });
+}
+
 // src/design/components/layout/Section.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Section({
   children,
   tone = "default",
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     "section",
     {
       ...rest,
@@ -596,13 +828,13 @@ function Section({
         tone === "alt" && "elb-section--alt",
         className
       ),
-      children: /* @__PURE__ */ jsx19("div", { className: "elb-section__inner", children })
+      children: /* @__PURE__ */ jsx22("div", { className: "elb-section__inner", children })
     }
   );
 }
 
 // src/design/components/layout/CardGrid.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function CardGrid({
   children,
   min,
@@ -610,7 +842,7 @@ function CardGrid({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       ...rest,
@@ -626,7 +858,7 @@ function CardGrid({
 }
 
 // src/design/components/layout/Split.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function Split({
   start,
   end,
@@ -634,7 +866,7 @@ function Split({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ...rest,
@@ -644,23 +876,24 @@ function Split({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx21("div", { className: "elb-split__start", children: start }),
-        /* @__PURE__ */ jsx21("div", { className: "elb-split__end", children: end })
+        /* @__PURE__ */ jsx24("div", { className: "elb-split__start", children: start }),
+        /* @__PURE__ */ jsx24("div", { className: "elb-split__end", children: end })
       ]
     }
   );
 }
 
 // src/design/components/layout/Cluster.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Cluster({
   children,
   gap = "actions",
   align = "start",
+  separated = false,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...rest,
@@ -668,6 +901,7 @@ function Cluster({
         "elb-cluster",
         gap === "links" && "elb-cluster--links",
         align === "center" && "elb-cluster--center",
+        separated && "elb-cluster--separated",
         className
       ),
       children
@@ -676,7 +910,7 @@ function Cluster({
 }
 
 // src/design/components/layout/Hero.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function Hero({
   eyebrow,
   title,
@@ -688,8 +922,8 @@ function Hero({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx23("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ jsxs16("div", { className: "elb-hero__inner", children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26("section", { ...rest, className: cx("elb-hero", className), children: /* @__PURE__ */ jsxs18("div", { className: "elb-hero__inner", children: [
+    /* @__PURE__ */ jsx26(
       SectionHeading,
       {
         level: 1,
@@ -699,9 +933,9 @@ function Hero({
         lead
       }
     ),
-    /* @__PURE__ */ jsx23("div", { className: "elb-hero__actions", children: actions }),
-    proof !== void 0 && /* @__PURE__ */ jsx23("div", { className: "elb-hero__proof", children: proof }),
-    children !== void 0 && /* @__PURE__ */ jsx23("div", { className: "elb-hero__demo", children })
+    /* @__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 })
   ] }) });
 }
 
@@ -1074,12 +1308,12 @@ var MAPPING_EVENTS = [
 ];
 
 // src/design/components/viz/parts/CodeTokens.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function CodeTokens({
   tokens,
   active = false
 }) {
-  return /* @__PURE__ */ jsx24(Fragment6, { children: tokens.map((token, index) => /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(Fragment7, { children: tokens.map((token, index) => /* @__PURE__ */ jsx27(
     "span",
     {
       className: cx(
@@ -1093,16 +1327,16 @@ function CodeTokens({
   )) });
 }
 function CodeLine({ number, bar, className, children }) {
-  return /* @__PURE__ */ jsxs17("div", { className: cx("elb-viz-line", className), children: [
-    /* @__PURE__ */ jsx24(
+  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__ */ jsx24("span", { className: "elb-viz-line__number", children: number }),
-    /* @__PURE__ */ jsx24("span", { className: "elb-viz-line__code", children })
+    number !== void 0 && /* @__PURE__ */ jsx27("span", { className: "elb-viz-line__number", children: number }),
+    /* @__PURE__ */ jsx27("span", { className: "elb-viz-line__code", children })
   ] });
 }
 
@@ -1212,26 +1446,26 @@ function tokenizeCode(line, highlight) {
 }
 
 // src/design/components/viz/parts/VizFrame.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function VizFrame({
   variant,
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       ...rest,
       "data-theme": "dark",
       className: cx("elb-viz", `elb-viz--${variant}`, className),
-      children: /* @__PURE__ */ jsx25("div", { className: "elb-viz__body", children })
+      children: /* @__PURE__ */ jsx28("div", { className: "elb-viz__body", children })
     }
   );
 }
 
 // src/design/components/viz/DestinationMappingViz.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function DestinationMappingViz({
   initialEvent = 0,
   caption = MAPPING_CAPTION,
@@ -1240,10 +1474,10 @@ function DestinationMappingViz({
   const [index, setIndex] = useState2(initialEvent);
   const event = MAPPING_EVENTS[index];
   const name = `${event.entity} ${event.action}`;
-  return /* @__PURE__ */ jsx26(VizFrame, { ...rest, variant: "mapping", children: /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__pick", children: [
-      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__label", children: "Pick an event" }),
-      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__chips", children: MAPPING_EVENTS.map((item, position) => /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx29(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(
         "button",
         {
           type: "button",
@@ -1255,21 +1489,21 @@ function DestinationMappingViz({
           ),
           onClick: () => setIndex(position),
           children: [
-            /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
-            /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__chip-action", children: item.action })
+            /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__chip-entity", children: item.entity }),
+            /* @__PURE__ */ jsx29("span", { className: "elb-viz-mapping__chip-action", children: item.action })
           ]
         },
         `${item.entity} ${item.action}`
       )) })
     ] }),
-    /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ jsx26(CodeTokens, { tokens: tokenizeCode(formatElb(event), name), active: true }) }),
-    /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__body", children: [
-      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__comment", children: "// same event, four destinations, zero app code touched" }),
-      /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__cards", children: event.destinations.map((destination) => /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__card", children: [
-        /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__name", children: destination.label }),
-        /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__row", children: [
-          /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__tag", children: "mapping" }),
-          /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__rule", children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx29("div", { className: "elb-viz-mapping__event", children: /* @__PURE__ */ jsx29(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__ */ 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(
             CodeTokens,
             {
               tokens: tokenizeCode(
@@ -1284,9 +1518,9 @@ function DestinationMappingViz({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs18("div", { className: "elb-viz-mapping__row elb-viz-mapping__row--sends", children: [
-          /* @__PURE__ */ jsx26("span", { className: "elb-viz-mapping__tag", children: "sends" }),
-          /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__calls", children: destination.calls.flatMap((call) => formatCall(call)).map((line, position) => /* @__PURE__ */ jsx26("div", { className: "elb-viz-mapping__line", children: /* @__PURE__ */ jsx26(
+        /* @__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(
             CodeTokens,
             {
               tokens: tokenizeCode(line, destination.rule.name),
@@ -1296,7 +1530,7 @@ function DestinationMappingViz({
         ] })
       ] }, destination.id)) })
     ] }),
-    caption !== "" && /* @__PURE__ */ jsx26("p", { className: "elb-viz-mapping__caption", children: caption })
+    caption !== "" && /* @__PURE__ */ jsx29("p", { className: "elb-viz-mapping__caption", children: caption })
   ] }) });
 }
 
@@ -1572,7 +1806,7 @@ function heroFrame(t) {
 }
 
 // src/design/components/viz/parts/EventsTable.tsx
-import { Fragment as Fragment7 } from "react";
+import { Fragment as Fragment8 } from "react";
 
 // src/design/components/viz/parts/style.ts
 function vizStyle(vars) {
@@ -1581,38 +1815,38 @@ function vizStyle(vars) {
 }
 
 // src/design/components/viz/parts/EventsTable.tsx
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 var SKELETON_ROWS = 6;
 function EventsTable({ rows }) {
   const skeletons = Math.max(0, SKELETON_ROWS - rows.length);
-  return /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table__head", children: [
-      /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__query", children: [
-        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__keyword", children: "SELECT" }),
+  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" }),
         " *",
         " ",
-        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__keyword", children: "FROM" }),
+        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__keyword", children: "FROM" }),
         " ",
-        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
+        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__source", children: "walkerOS.events" })
       ] }),
-      /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__live", children: [
-        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__live", children: [
+        /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__dot", "aria-hidden": "true" }),
         "live"
       ] })
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "elb-viz-table__body", children: /* @__PURE__ */ jsx27("div", { className: "elb-viz-table__scroll", children: /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table__rows", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "elb-viz-table__row elb-viz-table__row--header", children: [
-        /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: "Row" }),
-        /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__cell", children: [
+    /* @__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: [
           "name",
-          /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__type", children: "STRING" })
+          /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__type", children: "STRING" })
         ] }),
-        /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__cell", children: [
+        /* @__PURE__ */ jsxs21("span", { className: "elb-viz-table__cell", children: [
           "data",
-          /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__type", children: "JSON" })
+          /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__type", children: "JSON" })
         ] })
       ] }),
-      rows.map((row, index) => /* @__PURE__ */ jsxs19(
+      rows.map((row, index) => /* @__PURE__ */ jsxs21(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--event",
@@ -1622,15 +1856,15 @@ function EventsTable({ rows }) {
             "--elb-viz-row-shift": (1 - ease(clamp(row.age / 500))) * -80
           }),
           children: [
-            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: index + 1 }),
-            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell", children: row.name }),
-            /* @__PURE__ */ jsxs19("span", { className: "elb-viz-table__cell elb-viz-table__json", children: [
+            /* @__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: [
               "{",
-              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ jsxs19(Fragment7, { children: [
+              Object.entries(row.data).map(([key, value], position) => /* @__PURE__ */ jsxs21(Fragment8, { children: [
                 position === 0 ? '"' : ',"',
-                /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__json-key", children: key }),
+                /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__json-key", children: key }),
                 '":"',
-                /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__json-value", children: value }),
+                /* @__PURE__ */ jsx30("span", { className: "elb-viz-table__json-value", children: value }),
                 '"'
               ] }, key)),
               "}"
@@ -1639,15 +1873,15 @@ function EventsTable({ rows }) {
         },
         row.key
       )),
-      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ jsxs19(
+      Array.from({ length: skeletons }, (_, index) => /* @__PURE__ */ jsxs21(
         "div",
         {
           className: "elb-viz-table__row elb-viz-table__row--skeleton",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell elb-viz-table__cell--n", children: rows.length + index + 1 }),
-            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__bar" }) }),
-            /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__cell", children: /* @__PURE__ */ jsx27("span", { className: "elb-viz-table__bar" }) })
+            /* @__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" }) })
           ]
         },
         `skeleton-${index}`
@@ -1696,14 +1930,14 @@ function useReducedMotion() {
 }
 
 // src/design/components/viz/parts/Pill.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Pill({
   part,
   variant = "solid",
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx31(
     "span",
     {
       className: cx(
@@ -1718,7 +1952,7 @@ function Pill({
 }
 
 // src/design/components/viz/parts/Thumb.tsx
-import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var BUG_LINES = [
   "M36 46 L28 42",
   "M35 54 L27 56",
@@ -1736,9 +1970,9 @@ var BUG_SPOTS = [
   [67, 56, 2.8]
 ];
 function Bug() {
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    /* @__PURE__ */ jsx29("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    /* @__PURE__ */ jsx32("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx32(
       "ellipse",
       {
         className: "elb-viz-thumb__shadow",
@@ -1748,18 +1982,18 @@ function Bug() {
         ry: 6
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "g",
       {
         className: "elb-viz-thumb__legs",
         strokeWidth: 2.4,
         strokeLinecap: "round",
-        children: BUG_LINES.map((d) => /* @__PURE__ */ jsx29("path", { d }, d))
+        children: BUG_LINES.map((d) => /* @__PURE__ */ jsx32("path", { d }, d))
       }
     ),
-    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__ink", cx: 42, cy: 16, r: 2 }),
-    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__ink", cx: 70, cy: 16, r: 2 }),
-    /* @__PURE__ */ jsx29(
+    /* @__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(
       "ellipse",
       {
         className: "elb-viz-thumb__ink",
@@ -1769,9 +2003,9 @@ function Bug() {
         ry: 7.5
       }
     ),
-    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__eye", cx: 52, cy: 29, r: 1.6 }),
-    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__eye", cx: 60, cy: 29, r: 1.6 }),
-    /* @__PURE__ */ jsx29(
+    /* @__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(
       "ellipse",
       {
         className: "elb-viz-thumb__shell",
@@ -1781,8 +2015,8 @@ function Bug() {
         ry: 18
       }
     ),
-    /* @__PURE__ */ jsx29("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
-    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32("path", { className: "elb-viz-thumb__seam", d: "M56 33 L56 68", strokeWidth: 2 }),
+    BUG_SPOTS.map(([x, y, r]) => /* @__PURE__ */ jsx32(
       "circle",
       {
         className: "elb-viz-thumb__ink",
@@ -1792,7 +2026,7 @@ function Bug() {
       },
       `${x}-${y}`
     )),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "path",
       {
         className: "elb-viz-thumb__shine",
@@ -1804,9 +2038,9 @@ function Bug() {
   ] });
 }
 function Tech() {
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    /* @__PURE__ */ jsx29("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    /* @__PURE__ */ jsx32("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx32(
       "rect",
       {
         className: "elb-viz-thumb__badge",
@@ -1817,8 +2051,8 @@ function Tech() {
         rx: 8
       }
     ),
-    /* @__PURE__ */ jsx29("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32("circle", { className: "elb-viz-thumb__dot", cx: 47, cy: 52, r: 3.2 }),
+    /* @__PURE__ */ jsx32(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -1827,7 +2061,7 @@ function Tech() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "path",
       {
         className: "elb-viz-thumb__wave",
@@ -1839,9 +2073,9 @@ function Tech() {
   ] });
 }
 function Food() {
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-    /* @__PURE__ */ jsx29("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    /* @__PURE__ */ jsx32("rect", { className: "elb-viz-thumb__ground", width: 112, height: 86 }),
+    /* @__PURE__ */ jsx32(
       "ellipse",
       {
         className: "elb-viz-thumb__plate",
@@ -1851,7 +2085,7 @@ function Food() {
         ry: 10
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "ellipse",
       {
         className: "elb-viz-thumb__loaf",
@@ -1861,7 +2095,7 @@ function Food() {
         ry: 19
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "ellipse",
       {
         className: "elb-viz-thumb__crust",
@@ -1871,7 +2105,7 @@ function Food() {
         ry: 13
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -1880,7 +2114,7 @@ function Food() {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(
       "path",
       {
         className: "elb-viz-thumb__score",
@@ -1892,7 +2126,7 @@ function Food() {
   ] });
 }
 function Thumb({ kind }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     "svg",
     {
       className: cx("elb-viz-thumb", `elb-viz-thumb--${kind}`),
@@ -1900,13 +2134,13 @@ function Thumb({ kind }) {
       preserveAspectRatio: "xMidYMid slice",
       "aria-hidden": "true",
       focusable: "false",
-      children: kind === "bug" ? /* @__PURE__ */ jsx29(Bug, {}) : kind === "tech" ? /* @__PURE__ */ jsx29(Tech, {}) : /* @__PURE__ */ jsx29(Food, {})
+      children: kind === "bug" ? /* @__PURE__ */ jsx32(Bug, {}) : kind === "tech" ? /* @__PURE__ */ jsx32(Tech, {}) : /* @__PURE__ */ jsx32(Food, {})
     }
   );
 }
 
 // src/design/components/viz/HeroTaggingViz.tsx
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var MAX_STEP = 64;
 function HeroTaggingViz({
   playing = true,
@@ -1933,22 +2167,22 @@ function HeroTaggingViz({
     return () => cancelAnimationFrame(frame);
   }, [animate, speed]);
   const { article, lines, fade: fade2, caretOn, card, cursor, rows } = heroFrame(time);
-  return /* @__PURE__ */ jsx30(VizFrame, { ...rest, variant: "hero", children: /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero", children: [
-    /* @__PURE__ */ jsxs21("div", { ref: paneRef, className: "elb-viz-hero__pane", children: [
-      /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero__bar", children: [
-        /* @__PURE__ */ jsxs21("span", { className: "elb-viz-hero__dots", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx30("span", {}),
-          /* @__PURE__ */ jsx30("span", {}),
-          /* @__PURE__ */ jsx30("span", {})
+  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", {})
         ] }),
-        /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
+        /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__file", children: "ArticleTeaser.html" })
       ] }),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(
         "div",
         {
           className: "elb-viz-hero__code",
           style: vizStyle({ "--elb-viz-fade": fade2 }),
-          children: lines.map((line) => /* @__PURE__ */ jsx30(
+          children: lines.map((line) => /* @__PURE__ */ jsx33(
             CodeLine,
             {
               number: line.n,
@@ -1957,23 +2191,23 @@ function HeroTaggingViz({
                 "elb-viz-hero__line",
                 line.on && "elb-viz-hero__line--on"
               ),
-              children: line.caret === null ? /* @__PURE__ */ jsx30(CodeTokens, { tokens: line.tokens }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
-                /* @__PURE__ */ jsx30(CodeTokens, { tokens: line.tokens.slice(0, line.caret) }),
-                /* @__PURE__ */ jsx30(
+              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(
                   "span",
                   {
                     className: "elb-viz-caret",
                     style: vizStyle({ "--elb-viz-caret": caretOn ? 1 : 0 })
                   }
                 ),
-                /* @__PURE__ */ jsx30(CodeTokens, { tokens: line.tokens.slice(line.caret) })
+                /* @__PURE__ */ jsx33(CodeTokens, { tokens: line.tokens.slice(line.caret) })
               ] })
             },
             line.id
           ))
         }
       ),
-      /* @__PURE__ */ jsx30("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ jsxs21(
+      /* @__PURE__ */ jsx33("div", { className: "elb-viz-hero__stage", children: /* @__PURE__ */ jsxs23(
         "div",
         {
           className: cx(
@@ -1985,13 +2219,13 @@ function HeroTaggingViz({
             "--elb-viz-card-offset": card.offset
           }),
           children: [
-            /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero__pills", children: [
-              card.entity && /* @__PURE__ */ jsx30(Pill, { part: "entity", children: "article" }),
-              card.impression && /* @__PURE__ */ jsx30(Pill, { part: "action", children: "impression" })
+            /* @__PURE__ */ 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__ */ jsx30("div", { className: "elb-viz-hero__thumb", children: /* @__PURE__ */ jsx30(Thumb, { kind: article.thumb }) }),
-            /* @__PURE__ */ jsxs21("div", { className: "elb-viz-hero__text", children: [
-              /* @__PURE__ */ jsx30(
+            /* @__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(
                 "span",
                 {
                   className: cx(
@@ -2001,7 +2235,7 @@ function HeroTaggingViz({
                   children: article.kicker
                 }
               ),
-              /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__title", children: /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx(
@@ -2011,7 +2245,7 @@ function HeroTaggingViz({
                   children: article.title
                 }
               ) }),
-              /* @__PURE__ */ jsx30("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ jsxs21(
+              /* @__PURE__ */ jsx33("div", { className: "elb-viz-hero__foot", children: /* @__PURE__ */ jsxs23(
                 "span",
                 {
                   className: cx(
@@ -2020,7 +2254,7 @@ function HeroTaggingViz({
                   ),
                   children: [
                     "Open \u2192",
-                    /* @__PURE__ */ jsxs21(
+                    /* @__PURE__ */ jsxs23(
                       "span",
                       {
                         className: "elb-viz-hero__cursor",
@@ -2034,8 +2268,8 @@ function HeroTaggingViz({
                           "--elb-viz-press": cursor.pressed ? 0.8 : 1
                         }),
                         children: [
-                          /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__ring" }),
-                          /* @__PURE__ */ jsx30("span", { className: "elb-viz-hero__pointer" })
+                          /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__ring" }),
+                          /* @__PURE__ */ jsx33("span", { className: "elb-viz-hero__pointer" })
                         ]
                       }
                     )
@@ -2047,7 +2281,7 @@ function HeroTaggingViz({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx30(EventsTable, { rows })
+    /* @__PURE__ */ jsx33(EventsTable, { rows })
   ] }) });
 }
 
@@ -2315,7 +2549,7 @@ function teaserAdvance(n) {
 }
 
 // src/design/components/viz/ArticleTeaserTracking.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var FIRST_DELAY = 800;
 var JUMP_DELAY = 250;
 var SCROLL_DELAY = 400;
@@ -2328,7 +2562,7 @@ function TeaserCard({
   seen,
   ahead
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: cx(
@@ -2337,9 +2571,9 @@ function TeaserCard({
         ahead && "elb-viz-teaser__card--ahead"
       ),
       children: [
-        /* @__PURE__ */ jsxs22("span", { className: "elb-viz-teaser__pills", children: [
-          /* @__PURE__ */ jsx31(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
-          /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsxs24("span", { className: "elb-viz-teaser__pills", children: [
+          /* @__PURE__ */ jsx34(Pill, { part: "entity", className: fade(seen.has("entity")), children: TEASER_ENTITY }),
+          /* @__PURE__ */ jsx34(
             Pill,
             {
               part: "property",
@@ -2349,8 +2583,14 @@ function TeaserCard({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx31("div", { className: cx("elb-viz-teaser__photo", fade(seen.has("image"))), children: "photo" }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx34(
+          PhotoPlaceholder,
+          {
+            tone: "viz",
+            className: cx("elb-viz-teaser__photo", fade(seen.has("image")))
+          }
+        ),
+        /* @__PURE__ */ jsx34(
           "span",
           {
             className: cx(
@@ -2361,7 +2601,7 @@ function TeaserCard({
             children: article.kicker
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx34(
           "span",
           {
             className: cx(
@@ -2372,7 +2612,7 @@ function TeaserCard({
             children: article.title
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx34(
           "span",
           {
             className: cx(
@@ -2396,7 +2636,7 @@ function TeaserGroup({
   const globalsOn = seen.has(page.globalsEffect);
   const listOn = seen.has(page.listEffect);
   const reached = page.step <= current;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: cx(
@@ -2405,7 +2645,7 @@ function TeaserGroup({
         !reached && !lead && "elb-viz-teaser__page--ahead"
       ),
       children: [
-        /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__page-pill", children: /* @__PURE__ */ jsx34(
           Pill,
           {
             part: "globals",
@@ -2413,7 +2653,7 @@ function TeaserGroup({
             children: `pagetype:${page.pagetype}`
           }
         ) }),
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs24(
           "div",
           {
             className: cx(
@@ -2421,14 +2661,14 @@ function TeaserGroup({
               listOn && "elb-viz-teaser__list--on"
             ),
             children: [
-              /* @__PURE__ */ jsxs22("div", { className: cx("elb-viz-teaser__list-head", fade(listOn)), children: [
-                /* @__PURE__ */ jsxs22("span", { className: "elb-viz-teaser__list-label", children: [
-                  /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__list-name", children: page.header }),
-                  page.heading !== void 0 && /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__list-heading", children: page.heading })
+              /* @__PURE__ */ 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__ */ jsx31(Pill, { part: "context", children: `list:${page.list}` })
+                /* @__PURE__ */ jsx34(Pill, { part: "context", children: `list:${page.list}` })
               ] }),
-              /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__cards", children: page.articles.map((article, index) => /* @__PURE__ */ jsx34(
                 TeaserCard,
                 {
                   article,
@@ -2458,7 +2698,9 @@ function ArticleTeaserTracking({
     () => initialStep ? teaserStepEnd(initialStep) : 0
   );
   const [delay, setDelay] = useState5(FIRST_DELAY);
+  const [pinned, setPinned] = useState5(null);
   const playing = autoplay && inView && !reduced;
+  const end = pinned === null ? TEASER_ITEMS.length : teaserStepEnd(pinned);
   useEffect4(() => {
     if (reduced) setShown(TEASER_ITEMS.length);
   }, [reduced]);
@@ -2471,10 +2713,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]);
   useEffect4(() => {
     const pane = codeRef.current;
     if (!pane || shown === 0 || typeof pane.scrollTo !== "function")
@@ -2490,6 +2732,7 @@ function ArticleTeaserTracking({
     return () => clearTimeout(timer);
   }, [shown, reduced]);
   const jump = (step) => {
+    setPinned(step);
     if (autoplay && !reduced) {
       setShown(teaserStepStart(step));
       setDelay(JUMP_DELAY);
@@ -2520,15 +2763,15 @@ function ArticleTeaserTracking({
         separated && "elb-viz-teaser__file--separated"
       );
       separated = true;
-      return /* @__PURE__ */ jsx31("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsxs22("div", { className: fileClass, children: [
-        /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__file-name", children: item.name }),
-        /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__file-level", children: item.level })
+      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 })
       ] }) }, index);
     }
     lineNumber += 1;
     const reached = index < count;
     const isCurrent = index === count - 1 && item.effect !== void 0;
-    return /* @__PURE__ */ jsx31("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx34("div", { "data-line": index, className: lineClass, children: /* @__PURE__ */ jsx34(
       CodeLine,
       {
         number: lineNumber,
@@ -2537,13 +2780,13 @@ function ArticleTeaserTracking({
           "elb-viz-teaser__code",
           isCurrent && `elb-viz-teaser__code--current-${item.part ?? "plain"}`
         ),
-        children: /* @__PURE__ */ jsx31(CodeTokens, { tokens: item.tokens, active: reached })
+        children: /* @__PURE__ */ jsx34(CodeTokens, { tokens: item.tokens, active: reached })
       }
     ) }, index);
   });
-  return /* @__PURE__ */ jsx31(VizFrame, { ...rest, variant: "teaser", children: /* @__PURE__ */ jsxs22("div", { className: "elb-viz-teaser", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "elb-viz-teaser__header", children: [
-      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__steps", children: TEASER_STEPS.map(({ step, label }) => /* @__PURE__ */ jsxs22(
+  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(
         "button",
         {
           type: "button",
@@ -2556,18 +2799,18 @@ function ArticleTeaserTracking({
           ),
           onClick: () => jump(step),
           children: [
-            /* @__PURE__ */ jsx31("span", { className: "elb-viz-teaser__step-number", children: step }),
-            /* @__PURE__ */ jsx31("span", { children: label })
+            /* @__PURE__ */ jsx34("span", { className: "elb-viz-teaser__step-number", children: step }),
+            /* @__PURE__ */ jsx34("span", { children: label })
           ]
         },
         step
       )) }),
-      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ jsx31(EventLegend, {}) })
+      /* @__PURE__ */ jsx34("div", { className: "elb-viz-teaser__legend", children: /* @__PURE__ */ jsx34(EventLegend, {}) })
     ] }),
-    /* @__PURE__ */ jsx31("p", { className: "elb-viz-teaser__caption", children: TEASER_CAPTIONS[current] }),
-    /* @__PURE__ */ jsxs22("div", { className: "elb-viz-teaser__body", children: [
-      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__pane", children: /* @__PURE__ */ jsx31("div", { ref: codeRef, className: "elb-viz-teaser__scroll", children: lines }) }),
-      /* @__PURE__ */ jsx31("div", { className: "elb-viz-teaser__pages", children: TEASER_PAGE_IDS.map((id, index) => /* @__PURE__ */ jsx31(
+    /* @__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(
         TeaserGroup,
         {
           page: TEASER_PAGES[id],
@@ -2582,6 +2825,7 @@ function ArticleTeaserTracking({
 }
 export {
   ArticleTeaserTracking,
+  BrowserFrame,
   Button,
   Card,
   CardGrid,
@@ -2599,8 +2843,10 @@ export {
   Icon,
   InlineCode,
   InstallCommand,
+  PhotoPlaceholder,
   PlanCard,
   ProblemCard,
+  QuickstartSteps,
   Section,
   SectionHeading,
   Split,