@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/event-stream-viewer/index.js

@@ -27,60 +27,26 @@ import"@lostgradient/cinder/event-stream-viewer/styles";
 // src/components/event-stream-viewer/event-stream-viewer.svelte
 import"svelte/internal/disclose-version";
 import * as $9 from "svelte/internal/client";
+import { SvelteSet } from "svelte/reactivity";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
-// src/components/connection-indicator/connection-indicator.svelte
-import"svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-var root = $.from_html(`<span><span class="cinder-connection-indicator__dot" aria-hidden="true"></span> <span class="cinder-connection-indicator__label"> </span></span>`);
-function Connection_indicator($$anchor, $$props) {
-  $.push($$props, true);
-  let rest = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "state", "label", "class"]);
-  const defaultLabels = {
-    connected: "Connected",
-    connecting: "Connecting",
-    disconnected: "Disconnected",
-    error: "Error"
-  };
-  const visibleLabel = $.derived(() => $$props.label ?? defaultLabels[$$props.state]);
-  var span = root();
-  $.attribute_effect(span, ($0) => ({
-    ...rest,
-    class: $0,
-    "data-cinder-state": $$props.state,
-    role: "status",
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }), [
-    () => classNames("cinder-connection-indicator", $$props.class)
-  ]);
-  var span_1 = $.sibling($.child(span), 2);
-  var text = $.child(span_1, true);
-  $.reset(span_1);
-  $.reset(span);
-  $.template_effect(() => $.set_text(text, $.get(visibleLabel)));
-  $.append($$anchor, span);
-  $.pop();
-}
-
 // src/components/copy-button/copy-button.svelte
 import"svelte/internal/disclose-version";
-import * as $6 from "svelte/internal/client";
-import { onDestroy } from "svelte";
+import * as $5 from "svelte/internal/client";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 import"svelte/internal/disclose-version";
 import"svelte/internal/flags/legacy";
-import * as $3 from "svelte/internal/client";
+import * as $2 from "svelte/internal/client";
 
 // ../../node_modules/lucide-svelte/dist/Icon.svelte
 import"svelte/internal/disclose-version";
 import"svelte/internal/flags/legacy";
-import * as $2 from "svelte/internal/client";
+import * as $ from "svelte/internal/client";
 
 // ../../node_modules/lucide-svelte/dist/defaultAttributes.js
 var defaultAttributes = {
@@ -97,10 +63,10 @@ var defaultAttributes = {
 var defaultAttributes_default = defaultAttributes;
 
 // ../../node_modules/lucide-svelte/dist/Icon.svelte
-var root2 = $2.from_svg(`<svg><!><!></svg>`);
+var root = $.from_svg(`<svg><!><!></svg>`);
 function Icon($$anchor, $$props) {
-  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
-  const $$restProps = $2.legacy_rest_props($$sanitized_props, [
+  const $$sanitized_props = $.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $.legacy_rest_props($$sanitized_props, [
     "name",
     "color",
     "size",
@@ -108,19 +74,19 @@ function Icon($$anchor, $$props) {
     "absoluteStrokeWidth",
     "iconNode"
   ]);
-  $2.push($$props, false);
-  let name = $2.prop($$props, "name", 8, undefined);
-  let color = $2.prop($$props, "color", 8, "currentColor");
-  let size = $2.prop($$props, "size", 8, 24);
-  let strokeWidth = $2.prop($$props, "strokeWidth", 8, 2);
-  let absoluteStrokeWidth = $2.prop($$props, "absoluteStrokeWidth", 8, false);
-  let iconNode = $2.prop($$props, "iconNode", 24, () => []);
+  $.push($$props, false);
+  let name = $.prop($$props, "name", 8, undefined);
+  let color = $.prop($$props, "color", 8, "currentColor");
+  let size = $.prop($$props, "size", 8, 24);
+  let strokeWidth = $.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $.prop($$props, "iconNode", 24, () => []);
   const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
     return Boolean(className) && array.indexOf(className) === index2;
   }).join(" ");
-  $2.init();
-  var svg = root2();
-  $2.attribute_effect(svg, ($0, $1) => ({
+  $.init();
+  var svg = root();
+  $.attribute_effect(svg, ($0, $1) => ({
     ...defaultAttributes_default,
     ...$$restProps,
     width: size(),
@@ -129,41 +95,41 @@ function Icon($$anchor, $$props) {
     "stroke-width": $0,
     class: $1
   }), [
-    () => ($2.deep_read_state(absoluteStrokeWidth()), $2.deep_read_state(strokeWidth()), $2.deep_read_state(size()), $2.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
-    () => ($2.deep_read_state(name()), $2.deep_read_state($$sanitized_props), $2.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+    () => ($.deep_read_state(absoluteStrokeWidth()), $.deep_read_state(strokeWidth()), $.deep_read_state(size()), $.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
+    () => ($.deep_read_state(name()), $.deep_read_state($$sanitized_props), $.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
   ]);
-  var node = $2.child(svg);
-  $2.each(node, 1, iconNode, $2.index, ($$anchor2, $$item) => {
-    var $$array = $2.derived(() => $2.to_array($2.get($$item), 2));
-    let tag = () => $2.get($$array)[0];
-    let attrs = () => $2.get($$array)[1];
-    var fragment = $2.comment();
-    var node_1 = $2.first_child(fragment);
-    $2.element(node_1, tag, true, ($$element, $$anchor3) => {
-      $2.attribute_effect($$element, () => ({ ...attrs() }));
+  var node = $.child(svg);
+  $.each(node, 1, iconNode, $.index, ($$anchor2, $$item) => {
+    var $$array = $.derived(() => $.to_array($.get($$item), 2));
+    let tag = () => $.get($$array)[0];
+    let attrs = () => $.get($$array)[1];
+    var fragment = $.comment();
+    var node_1 = $.first_child(fragment);
+    $.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $.attribute_effect($$element, () => ({ ...attrs() }));
     });
-    $2.append($$anchor2, fragment);
+    $.append($$anchor2, fragment);
   });
-  var node_2 = $2.sibling(node);
-  $2.slot(node_2, $$props, "default", {}, null);
-  $2.reset(svg);
-  $2.append($$anchor, svg);
-  $2.pop();
+  var node_2 = $.sibling(node);
+  $.slot(node_2, $$props, "default", {}, null);
+  $.reset(svg);
+  $.append($$anchor, svg);
+  $.pop();
 }
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 function Check($$anchor, $$props) {
-  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
   const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
-  Icon($$anchor, $3.spread_props({ name: "check" }, () => $$sanitized_props, {
+  Icon($$anchor, $2.spread_props({ name: "check" }, () => $$sanitized_props, {
     get iconNode() {
       return iconNode;
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = $3.comment();
-      var node = $3.first_child(fragment_1);
-      $3.slot(node, $$props, "default", {}, null);
-      $3.append($$anchor2, fragment_1);
+      var fragment_1 = $2.comment();
+      var node = $2.first_child(fragment_1);
+      $2.slot(node, $$props, "default", {}, null);
+      $2.append($$anchor2, fragment_1);
     },
     $$slots: { default: true }
   }));
@@ -171,9 +137,9 @@ function Check($$anchor, $$props) {
 // ../../node_modules/lucide-svelte/dist/icons/copy.svelte
 import"svelte/internal/disclose-version";
 import"svelte/internal/flags/legacy";
-import * as $4 from "svelte/internal/client";
+import * as $3 from "svelte/internal/client";
 function Copy($$anchor, $$props) {
-  const $$sanitized_props = $4.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
   const iconNode = [
     [
       "rect",
@@ -193,15 +159,15 @@ function Copy($$anchor, $$props) {
       }
     ]
   ];
-  Icon($$anchor, $4.spread_props({ name: "copy" }, () => $$sanitized_props, {
+  Icon($$anchor, $3.spread_props({ name: "copy" }, () => $$sanitized_props, {
     get iconNode() {
       return iconNode;
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = $4.comment();
-      var node = $4.first_child(fragment_1);
-      $4.slot(node, $$props, "default", {}, null);
-      $4.append($$anchor2, fragment_1);
+      var fragment_1 = $3.comment();
+      var node = $3.first_child(fragment_1);
+      $3.slot(node, $$props, "default", {}, null);
+      $3.append($$anchor2, fragment_1);
     },
     $$slots: { default: true }
   }));
@@ -240,16 +206,16 @@ function legacyCopy(text) {
 
 // src/components/_visually-hidden-live-region.svelte
 import"svelte/internal/disclose-version";
-import * as $5 from "svelte/internal/client";
-var root3 = $5.from_html(`<div aria-atomic="true"> </div>`);
+import * as $4 from "svelte/internal/client";
+var root2 = $4.from_html(`<div aria-atomic="true"> </div>`);
 function _visually_hidden_live_region($$anchor, $$props) {
-  $5.push($$props, true);
-  let message = $5.prop($$props, "message", 3, ""), announcementSequence = $5.prop($$props, "announcementSequence", 3, 0), priority = $5.prop($$props, "priority", 3, "polite");
-  let rendered = $5.state("");
+  $4.push($$props, true);
+  let message = $4.prop($$props, "message", 3, ""), announcementSequence = $4.prop($$props, "announcementSequence", 3, 0), priority = $4.prop($$props, "priority", 3, "polite");
+  let rendered = $4.state("");
   let setTimeoutId = null;
   let version = 0;
   let isDestroyed = false;
-  $5.user_effect(() => {
+  $4.user_effect(() => {
     return () => {
       isDestroyed = true;
       if (setTimeoutId) {
@@ -258,7 +224,7 @@ function _visually_hidden_live_region($$anchor, $$props) {
       }
     };
   });
-  $5.user_effect(() => {
+  $4.user_effect(() => {
     const next = message();
     announcementSequence();
     const current = ++version;
@@ -266,34 +232,34 @@ function _visually_hidden_live_region($$anchor, $$props) {
       clearTimeout(setTimeoutId);
       setTimeoutId = null;
     }
-    $5.set(rendered, "");
+    $4.set(rendered, "");
     if (next === "")
       return;
     setTimeoutId = setTimeout(() => {
       if (isDestroyed || version !== current)
         return;
-      $5.set(rendered, next, true);
+      $4.set(rendered, next, true);
       setTimeoutId = null;
     }, 0);
   });
-  var div = root3();
-  var text = $5.child(div, true);
-  $5.reset(div);
-  $5.template_effect(($0) => {
-    $5.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
-    $5.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
-    $5.set_class(div, 1, $0);
-    $5.set_text(text, $5.get(rendered));
-  }, [() => $5.clsx(classNames("cinder-sr-only", $$props.class))]);
-  $5.append($$anchor, div);
-  $5.pop();
+  var div = root2();
+  var text = $4.child(div, true);
+  $4.reset(div);
+  $4.template_effect(($0) => {
+    $4.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
+    $4.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
+    $4.set_class(div, 1, $0);
+    $4.set_text(text, $4.get(rendered));
+  }, [() => $4.clsx(classNames("cinder-sr-only", $$props.class))]);
+  $4.append($$anchor, div);
+  $4.pop();
 }
 
 // src/components/copy-button/copy-button.svelte
-var root4 = $6.from_html(`<button><!></button> <!>`, 1);
+var root3 = $5.from_html(`<button><!></button> <!>`, 1);
 function Copy_button($$anchor, $$props) {
-  $6.push($$props, true);
-  let confirmDuration = $6.prop($$props, "confirmDuration", 3, 1500), iconOnly = $6.prop($$props, "iconOnly", 3, false), rest = $6.rest_props($$props, [
+  $5.push($$props, true);
+  let confirmDuration = $5.prop($$props, "confirmDuration", 3, 1500), iconOnly = $5.prop($$props, "iconOnly", 3, false), rest = $5.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -306,68 +272,70 @@ function Copy_button($$anchor, $$props) {
     "children",
     "confirmation"
   ]);
-  let copied = $6.state(false);
+  let copied = $5.state(false);
   let resetTimer;
-  const copiedAnnouncement = $6.derived(() => $6.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
+  const copiedAnnouncement = $5.derived(() => $5.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
   async function handleClick() {
     const ok = await copyToClipboard($$props.value);
     if (!ok)
       return;
-    $6.set(copied, true);
+    $5.set(copied, true);
     if (resetTimer)
       clearTimeout(resetTimer);
     resetTimer = setTimeout(() => {
-      $6.set(copied, false);
+      $5.set(copied, false);
     }, confirmDuration());
   }
-  onDestroy(() => {
-    if (resetTimer)
-      clearTimeout(resetTimer);
+  $5.user_effect(() => {
+    return () => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    };
   });
-  var fragment = root4();
-  var button = $6.first_child(fragment);
-  $6.attribute_effect(button, ($0) => ({
+  var fragment = root3();
+  var button = $5.first_child(fragment);
+  $5.attribute_effect(button, ($0) => ({
     ...rest,
     type: "button",
-    "data-cinder-copied": $6.get(copied) || undefined,
+    "data-cinder-copied": $5.get(copied) || undefined,
     "aria-label": $$props.label ?? "Copy to clipboard",
     onclick: handleClick,
     class: $0
   }), [() => classNames("cinder-copy-button", $$props.class)]);
-  var node = $6.child(button);
+  var node = $5.child(button);
   {
     var consequent = ($$anchor2) => {
-      var fragment_1 = $6.comment();
-      var node_1 = $6.first_child(fragment_1);
-      $6.snippet(node_1, () => $$props.confirmation);
-      $6.append($$anchor2, fragment_1);
+      var fragment_1 = $5.comment();
+      var node_1 = $5.first_child(fragment_1);
+      $5.snippet(node_1, () => $$props.confirmation);
+      $5.append($$anchor2, fragment_1);
     };
     var consequent_1 = ($$anchor2) => {
       Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
-      var text2 = $6.text("Copied");
-      $6.append($$anchor2, text2);
+      var text2 = $5.text("Copied");
+      $5.append($$anchor2, text2);
     };
     var consequent_3 = ($$anchor2) => {
-      var fragment_3 = $6.comment();
-      var node_2 = $6.first_child(fragment_3);
-      $6.snippet(node_2, () => $$props.children);
-      $6.append($$anchor2, fragment_3);
+      var fragment_3 = $5.comment();
+      var node_2 = $5.first_child(fragment_3);
+      $5.snippet(node_2, () => $$props.children);
+      $5.append($$anchor2, fragment_3);
     };
     var consequent_4 = ($$anchor2) => {
       Copy($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
     };
     var alternate = ($$anchor2) => {
-      var text_1 = $6.text("Copy");
-      $6.append($$anchor2, text_1);
+      var text_1 = $5.text("Copy");
+      $5.append($$anchor2, text_1);
     };
-    $6.if(node, ($$render) => {
-      if ($6.get(copied) && $$props.confirmation)
+    $5.if(node, ($$render) => {
+      if ($5.get(copied) && $$props.confirmation)
         $$render(consequent);
-      else if ($6.get(copied) && iconOnly())
+      else if ($5.get(copied) && iconOnly())
         $$render(consequent_1, 1);
-      else if ($6.get(copied))
+      else if ($5.get(copied))
         $$render(consequent_2, 2);
       else if ($$props.children)
         $$render(consequent_3, 3);
@@ -377,51 +345,52 @@ function Copy_button($$anchor, $$props) {
         $$render(alternate, -1);
     });
   }
-  $6.reset(button);
-  var node_3 = $6.sibling(button, 2);
+  $5.reset(button);
+  var node_3 = $5.sibling(button, 2);
   _visually_hidden_live_region(node_3, {
     get message() {
-      return $6.get(copiedAnnouncement);
+      return $5.get(copiedAnnouncement);
     }
   });
-  $6.append($$anchor, fragment);
-  $6.pop();
+  $5.append($$anchor, fragment);
+  $5.pop();
 }
 
 // src/components/json-viewer/json-viewer.svelte
 import"svelte/internal/disclose-version";
-import * as $8 from "svelte/internal/client";
+import * as $7 from "svelte/internal/client";
 
 // src/components/json-viewer/_json-viewer-node.svelte
 import"svelte/internal/disclose-version";
-import * as $7 from "svelte/internal/client";
+import * as $6 from "svelte/internal/client";
 import { untrack as untrack2 } from "svelte";
-var root_2 = $7.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_3 = $7.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_5 = $7.from_html(`<li><!></li>`);
-var root_4 = $7.from_html(`<ul class="cinder-json-viewer__children"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_1 = $7.from_html(`<span><button type="button" class="cinder-json-viewer__toggle"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
-var root_7 = $7.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_6 = $7.from_html(`<span class="cinder-json-viewer__node"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
-var root_9 = $7.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_8 = $7.from_html(`<span class="cinder-json-viewer__node"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
+var root_3 = $6.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_4 = $6.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_6 = $6.from_html(`<li role="none"><!></li>`);
+var root_5 = $6.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_2 = $6.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_8 = $6.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_7 = $6.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
+var root_10 = $6.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_9 = $6.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
 function _json_viewer_node($$anchor, $$props) {
-  $7.push($$props, true);
-  const isObject = $7.derived(() => $$props.value !== null && typeof $$props.value === "object");
-  const isArray = $7.derived(() => Array.isArray($$props.value));
-  const tooDeep = $7.derived(() => $$props.depth >= $$props.maxDepth);
-  let collapsed = $7.state($7.proxy(untrack2(() => $$props.depth >= $$props.initialDepth)));
-  const entries = $7.derived(() => {
-    if (!$7.get(isObject) || $7.get(tooDeep))
+  $6.push($$props, true);
+  let root4 = $6.prop($$props, "root", 3, false);
+  const isObject = $6.derived(() => $$props.value !== null && typeof $$props.value === "object");
+  const isArray = $6.derived(() => Array.isArray($$props.value));
+  const tooDeep = $6.derived(() => $$props.depth >= $$props.maxDepth);
+  let collapsed = $6.state($6.proxy(untrack2(() => $$props.depth >= $$props.initialDepth)));
+  const entries = $6.derived(() => {
+    if (!$6.get(isObject) || $6.get(tooDeep))
       return [];
-    if ($7.get(isArray)) {
+    if ($6.get(isArray)) {
       return $$props.value.map((item, i) => [i, item]);
     }
     return Object.entries($$props.value);
   });
-  const itemCount = $7.derived(() => $7.get(entries).length);
-  const collectionLabel = $7.derived(() => `${$7.get(isArray) ? "array" : "object"}, ${$7.get(itemCount)} ${$7.get(itemCount) === 1 ? "item" : "items"}`);
-  const toggleLabel = $7.derived(() => $$props.keyName === undefined ? $7.get(collectionLabel) : `${$$props.keyName}: ${$7.get(collectionLabel)}`);
+  const itemCount = $6.derived(() => $6.get(entries).length);
+  const collectionLabel = $6.derived(() => `${$6.get(isArray) ? "array" : "object"}, ${$6.get(itemCount)} ${$6.get(itemCount) === 1 ? "item" : "items"}`);
+  const toggleLabel = $6.derived(() => $$props.keyName === undefined ? $6.get(collectionLabel) : `${$$props.keyName}: ${$6.get(collectionLabel)}`);
   function valueClass(v) {
     if (v === null)
       return "null";
@@ -433,65 +402,66 @@ function _json_viewer_node($$anchor, $$props) {
       return "boolean";
     return "unknown";
   }
-  var fragment = $7.comment();
-  var node = $7.first_child(fragment);
+  var fragment = $6.comment();
+  var node = $6.first_child(fragment);
   {
     var consequent_3 = ($$anchor2) => {
-      var span = root_1();
-      var button = $7.child(span);
-      var node_1 = $7.child(button);
+      var span = root_2();
+      var button = $6.child(span);
+      var node_1 = $6.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span_1 = root_2();
-          var text3 = $7.child(span_1);
-          $7.reset(span_1);
-          $7.template_effect(() => $7.set_text(text3, `${$$props.keyName ?? ""}:`));
-          $7.append($$anchor3, span_1);
+          var span_1 = root_3();
+          var text3 = $6.child(span_1);
+          $6.reset(span_1);
+          $6.template_effect(() => $6.set_text(text3, `${$$props.keyName ?? ""}:`));
+          $6.append($$anchor3, span_1);
         };
-        $7.if(node_1, ($$render) => {
+        $6.if(node_1, ($$render) => {
           if ($$props.keyName !== undefined)
             $$render(consequent);
         });
       }
-      var span_2 = $7.sibling(node_1, 2);
-      var span_3 = $7.sibling(span_2, 2);
-      var text_1 = $7.child(span_3, true);
-      $7.reset(span_3);
-      var node_2 = $7.sibling(span_3, 2);
+      var span_2 = $6.sibling(node_1, 2);
+      var span_3 = $6.sibling(span_2, 2);
+      var text_1 = $6.child(span_3, true);
+      $6.reset(span_3);
+      var node_2 = $6.sibling(span_3, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment_1 = root_3();
-          var span_4 = $7.first_child(fragment_1);
-          var text_2 = $7.child(span_4);
-          $7.reset(span_4);
-          var span_5 = $7.sibling(span_4, 2);
-          var text_3 = $7.child(span_5, true);
-          $7.reset(span_5);
-          $7.template_effect(() => {
-            $7.set_text(text_2, `${$7.get(itemCount) ?? ""} ${$7.get(itemCount) === 1 ? "item" : "items"}`);
-            $7.set_text(text_3, $7.get(isArray) ? "]" : "}");
+          var fragment_1 = root_4();
+          var span_4 = $6.first_child(fragment_1);
+          var text_2 = $6.child(span_4);
+          $6.reset(span_4);
+          var span_5 = $6.sibling(span_4, 2);
+          var text_3 = $6.child(span_5, true);
+          $6.reset(span_5);
+          $6.template_effect(() => {
+            $6.set_text(text_2, `${$6.get(itemCount) ?? ""} ${$6.get(itemCount) === 1 ? "item" : "items"}`);
+            $6.set_text(text_3, $6.get(isArray) ? "]" : "}");
           });
-          $7.append($$anchor3, fragment_1);
+          $6.append($$anchor3, fragment_1);
         };
-        $7.if(node_2, ($$render) => {
-          if ($7.get(collapsed))
+        $6.if(node_2, ($$render) => {
+          if ($6.get(collapsed))
             $$render(consequent_1);
         });
       }
-      $7.reset(button);
-      var node_3 = $7.sibling(button, 2);
+      $6.reset(button);
+      var node_3 = $6.sibling(button, 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_2 = root_4();
-          var ul = $7.first_child(fragment_2);
-          $7.each(ul, 21, () => $7.get(entries), ([k, v]) => k, ($$anchor4, $$item) => {
-            var $$array = $7.derived(() => $7.to_array($7.get($$item), 2));
-            let k = () => $7.get($$array)[0];
-            let v = () => $7.get($$array)[1];
-            var li = root_5();
-            var node_4 = $7.child(li);
+          var fragment_2 = root_5();
+          var ul = $6.first_child(fragment_2);
+          $6.each(ul, 23, () => $6.get(entries), ([k, v]) => k, ($$anchor4, $$item, index2) => {
+            var $$array = $6.derived(() => $6.to_array($6.get($$item), 2));
+            let k = () => $6.get($$array)[0];
+            let v = () => $6.get($$array)[1];
+            var li = root_6();
+            var node_4 = $6.child(li);
             {
-              let $0 = $7.derived(() => $$props.depth + 1);
+              let $0 = $6.derived(() => $$props.depth + 1);
+              let $1 = $6.derived(() => $6.get(index2) + 1);
               _json_viewer_node(node_4, {
                 get value() {
                   return v();
@@ -500,125 +470,149 @@ function _json_viewer_node($$anchor, $$props) {
                   return k();
                 },
                 get depth() {
-                  return $7.get($0);
+                  return $6.get($0);
                 },
                 get initialDepth() {
                   return $$props.initialDepth;
                 },
                 get maxDepth() {
                   return $$props.maxDepth;
+                },
+                get position() {
+                  return $6.get($1);
+                },
+                get setSize() {
+                  return $6.get(entries).length;
                 }
               });
             }
-            $7.reset(li);
-            $7.append($$anchor4, li);
+            $6.reset(li);
+            $6.append($$anchor4, li);
           });
-          $7.reset(ul);
-          var span_6 = $7.sibling(ul, 2);
-          var text_4 = $7.child(span_6, true);
-          $7.reset(span_6);
-          $7.template_effect(() => $7.set_text(text_4, $7.get(isArray) ? "]" : "}"));
-          $7.append($$anchor3, fragment_2);
+          $6.reset(ul);
+          var span_6 = $6.sibling(ul, 2);
+          var text_4 = $6.child(span_6, true);
+          $6.reset(span_6);
+          $6.template_effect(() => $6.set_text(text_4, $6.get(isArray) ? "]" : "}"));
+          $6.append($$anchor3, fragment_2);
         };
-        $7.if(node_3, ($$render) => {
-          if (!$7.get(collapsed))
+        $6.if(node_3, ($$render) => {
+          if (!$6.get(collapsed))
             $$render(consequent_2);
         });
       }
-      $7.reset(span);
-      $7.template_effect(($0) => {
-        $7.set_class(span, 1, $0);
-        $7.set_attribute(button, "aria-expanded", !$7.get(collapsed));
-        $7.set_attribute(button, "aria-label", $7.get(toggleLabel));
-        $7.set_attribute(span_2, "data-cinder-collapsed", $7.get(collapsed) || undefined);
-        $7.set_text(text_1, $7.get(isArray) ? "[" : "{");
-      }, [() => $7.clsx(classNames("cinder-json-viewer__node"))]);
-      $7.delegated("click", button, () => $7.set(collapsed, !$7.get(collapsed)));
-      $7.append($$anchor2, span);
+      $6.reset(span);
+      $6.template_effect(($0) => {
+        $6.set_class(span, 1, $0);
+        $6.set_attribute(span, "aria-expanded", !$6.get(collapsed));
+        $6.set_attribute(span, "aria-label", $6.get(toggleLabel));
+        $6.set_attribute(span, "aria-level", $$props.depth + 1);
+        $6.set_attribute(span, "aria-posinset", $$props.position);
+        $6.set_attribute(span, "aria-setsize", $$props.setSize);
+        $6.set_attribute(span, "tabindex", root4() ? 0 : -1);
+        $6.set_attribute(button, "aria-label", $6.get(toggleLabel));
+        $6.set_attribute(span_2, "data-cinder-collapsed", $6.get(collapsed) || undefined);
+        $6.set_text(text_1, $6.get(isArray) ? "[" : "{");
+      }, [() => $6.clsx(classNames("cinder-json-viewer__node"))]);
+      $6.delegated("click", button, () => $6.set(collapsed, !$6.get(collapsed)));
+      $6.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_6();
-      var node_5 = $7.child(span_7);
+      var span_7 = root_7();
+      var node_5 = $6.child(span_7);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_7();
-          var text_5 = $7.child(span_8);
-          $7.reset(span_8);
-          $7.template_effect(() => $7.set_text(text_5, `${$$props.keyName ?? ""}:`));
-          $7.append($$anchor3, span_8);
+          var span_8 = root_8();
+          var text_5 = $6.child(span_8);
+          $6.reset(span_8);
+          $6.template_effect(() => $6.set_text(text_5, `${$$props.keyName ?? ""}:`));
+          $6.append($$anchor3, span_8);
         };
-        $7.if(node_5, ($$render) => {
+        $6.if(node_5, ($$render) => {
           if ($$props.keyName !== undefined)
             $$render(consequent_4);
         });
       }
-      $7.next(2);
-      $7.reset(span_7);
-      $7.append($$anchor2, span_7);
+      $6.next(2);
+      $6.reset(span_7);
+      $6.template_effect(() => {
+        $6.set_attribute(span_7, "tabindex", root4() ? 0 : -1);
+        $6.set_attribute(span_7, "aria-level", $$props.depth + 1);
+        $6.set_attribute(span_7, "aria-posinset", $$props.position);
+        $6.set_attribute(span_7, "aria-setsize", $$props.setSize);
+      });
+      $6.append($$anchor2, span_7);
     };
     var alternate_1 = ($$anchor2) => {
-      var span_9 = root_8();
-      var node_6 = $7.child(span_9);
+      var span_9 = root_9();
+      var node_6 = $6.child(span_9);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_9();
-          var text_6 = $7.child(span_10);
-          $7.reset(span_10);
-          $7.template_effect(() => $7.set_text(text_6, `${$$props.keyName ?? ""}:`));
-          $7.append($$anchor3, span_10);
+          var span_10 = root_10();
+          var text_6 = $6.child(span_10);
+          $6.reset(span_10);
+          $6.template_effect(() => $6.set_text(text_6, `${$$props.keyName ?? ""}:`));
+          $6.append($$anchor3, span_10);
         };
-        $7.if(node_6, ($$render) => {
+        $6.if(node_6, ($$render) => {
           if ($$props.keyName !== undefined)
             $$render(consequent_6);
         });
       }
-      var span_11 = $7.sibling(node_6, 2);
-      var node_7 = $7.child(span_11);
+      var span_11 = $6.sibling(node_6, 2);
+      var node_7 = $6.child(span_11);
       {
         var consequent_7 = ($$anchor3) => {
-          var text_7 = $7.text();
-          $7.template_effect(() => $7.set_text(text_7, `"${$$props.value ?? ""}"`));
-          $7.append($$anchor3, text_7);
+          var text_7 = $6.text();
+          $6.template_effect(() => $6.set_text(text_7, `"${$$props.value ?? ""}"`));
+          $6.append($$anchor3, text_7);
         };
         var alternate = ($$anchor3) => {
-          var text_8 = $7.text();
-          $7.template_effect(($0) => $7.set_text(text_8, $0), [() => String($$props.value)]);
-          $7.append($$anchor3, text_8);
+          var text_8 = $6.text();
+          $6.template_effect(($0) => $6.set_text(text_8, $0), [() => String($$props.value)]);
+          $6.append($$anchor3, text_8);
         };
-        $7.if(node_7, ($$render) => {
+        $6.if(node_7, ($$render) => {
           if (typeof $$props.value === "string")
             $$render(consequent_7);
           else
             $$render(alternate, -1);
         });
       }
-      $7.reset(span_11);
-      $7.reset(span_9);
-      $7.template_effect(($0) => $7.set_attribute(span_11, "data-cinder-type", $0), [() => valueClass($$props.value)]);
-      $7.append($$anchor2, span_9);
+      $6.reset(span_11);
+      $6.reset(span_9);
+      $6.template_effect(($0) => {
+        $6.set_attribute(span_9, "tabindex", root4() ? 0 : -1);
+        $6.set_attribute(span_9, "aria-level", $$props.depth + 1);
+        $6.set_attribute(span_9, "aria-posinset", $$props.position);
+        $6.set_attribute(span_9, "aria-setsize", $$props.setSize);
+        $6.set_attribute(span_11, "data-cinder-type", $0);
+      }, [() => valueClass($$props.value)]);
+      $6.append($$anchor2, span_9);
     };
-    $7.if(node, ($$render) => {
-      if ($7.get(isObject) && !$7.get(tooDeep))
+    $6.if(node, ($$render) => {
+      if ($6.get(isObject) && !$6.get(tooDeep))
         $$render(consequent_3);
-      else if ($7.get(isObject) && $7.get(tooDeep))
+      else if ($6.get(isObject) && $6.get(tooDeep))
         $$render(consequent_5, 1);
       else
         $$render(alternate_1, -1);
     });
   }
-  $7.append($$anchor, fragment);
-  $7.pop();
+  $6.append($$anchor, fragment);
+  $6.pop();
 }
-$7.delegate(["click"]);
+$6.delegate(["click"]);
 
 // src/components/json-viewer/json-viewer.svelte
-var root_12 = $8.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p>This value can't be serialized as JSON (it may contain a circular reference or a BigInt).</p> <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p></div>`);
-var root_22 = $8.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p> </p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
-var root5 = $8.from_html(`<div><!></div>`);
+var root_1 = $7.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p>This value can't be serialized as JSON (it may contain a circular reference or a BigInt).</p> <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p></div>`);
+var root_22 = $7.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p> </p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
+var root_32 = $7.from_html(`<div role="tree" aria-label="JSON tree" tabindex="-1"><!></div>`);
+var root4 = $7.from_html(`<div><!></div>`);
 function Json_viewer($$anchor, $$props) {
-  $8.push($$props, true);
-  let initialDepth = $8.prop($$props, "initialDepth", 3, 1), maxDepth = $8.prop($$props, "maxDepth", 3, 50), maxBytes = $8.prop($$props, "maxBytes", 3, 1048576);
-  const serialized = $8.derived(() => {
+  $7.push($$props, true);
+  let initialDepth = $7.prop($$props, "initialDepth", 3, 1), maxDepth = $7.prop($$props, "maxDepth", 3, 50), maxBytes = $7.prop($$props, "maxBytes", 3, 1048576);
+  const serialized = $7.derived(() => {
     try {
       const json = JSON.stringify($$props.value);
       if (typeof json !== "string")
@@ -628,31 +622,84 @@ function Json_viewer($$anchor, $$props) {
       return { ok: false };
     }
   });
-  const unserializable = $8.derived(() => !$8.get(serialized).ok);
-  const tooLarge = $8.derived(() => $8.get(serialized).ok && $8.get(serialized).size > maxBytes());
-  var div = root5();
-  var node = $8.child(div);
+  const unserializable = $7.derived(() => !$7.get(serialized).ok);
+  const tooLarge = $7.derived(() => $7.get(serialized).ok && $7.get(serialized).size > maxBytes());
+  function handleTreeKeydown(event) {
+    const tree = event.currentTarget;
+    const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+    const current = eventTarget?.closest('[role="treeitem"]') ?? null;
+    const targetIsToggle = eventTarget?.closest(".cinder-json-viewer__toggle") !== null;
+    const currentIndex = current ? items.indexOf(current) : -1;
+    function focusItem(index2) {
+      const item = items[index2];
+      item?.focus();
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusItem(Math.min(currentIndex + 1, items.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusItem(Math.max(currentIndex - 1, 0));
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    } else if (event.key === "ArrowRight" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const firstChild = current.querySelector('.cinder-json-viewer__children [role="treeitem"]');
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+    } else if (event.key === "ArrowLeft" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else {
+        const parent = current.parentElement?.closest('[role="treeitem"]');
+        if (parent) {
+          event.preventDefault();
+          parent.focus();
+        }
+      }
+    } else if ((event.key === "Enter" || event.key === " " || event.key === "Spacebar") && current && !targetIsToggle) {
+      event.preventDefault();
+      const toggle = current.querySelector(".cinder-json-viewer__toggle");
+      toggle?.click();
+    }
+  }
+  var div = root4();
+  var node = $7.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_12();
-      $8.append($$anchor2, div_1);
+      var div_1 = root_1();
+      $7.append($$anchor2, div_1);
     };
     var consequent_1 = ($$anchor2) => {
       var div_2 = root_22();
-      var p = $8.child(div_2);
-      var text3 = $8.child(p);
-      $8.reset(p);
-      $8.next(2);
-      $8.reset(div_2);
-      $8.template_effect(($0, $1) => $8.set_text(text3, `Payload too large to render (~${$0 ?? ""} KB; cap
+      var p = $7.child(div_2);
+      var text3 = $7.child(p);
+      $7.reset(p);
+      $7.next(2);
+      $7.reset(div_2);
+      $7.template_effect(($0, $1) => $7.set_text(text3, `Payload too large to render (~${$0 ?? ""} KB; cap
         is ${$1 ?? ""} KB).`), [
-        () => Math.round(($8.get(serialized).ok ? $8.get(serialized).size : 0) / 1024),
+        () => Math.round(($7.get(serialized).ok ? $7.get(serialized).size : 0) / 1024),
         () => Math.round(maxBytes() / 1024)
       ]);
-      $8.append($$anchor2, div_2);
+      $7.append($$anchor2, div_2);
     };
     var alternate = ($$anchor2) => {
-      _json_viewer_node($$anchor2, {
+      var div_3 = root_32();
+      var node_1 = $7.child(div_3);
+      _json_viewer_node(node_1, {
         get value() {
           return $$props.value;
         },
@@ -662,44 +709,203 @@ function Json_viewer($$anchor, $$props) {
         },
         get maxDepth() {
           return maxDepth();
-        }
+        },
+        position: 1,
+        setSize: 1,
+        root: true
       });
+      $7.reset(div_3);
+      $7.delegated("keydown", div_3, handleTreeKeydown);
+      $7.append($$anchor2, div_3);
     };
-    $8.if(node, ($$render) => {
-      if ($8.get(unserializable))
+    $7.if(node, ($$render) => {
+      if ($7.get(unserializable))
         $$render(consequent);
-      else if ($8.get(tooLarge))
+      else if ($7.get(tooLarge))
         $$render(consequent_1, 1);
       else
         $$render(alternate, -1);
     });
   }
-  $8.reset(div);
-  $8.template_effect(($0) => $8.set_class(div, 1, $0), [
-    () => $8.clsx(classNames("cinder-json-viewer", $$props.class))
+  $7.reset(div);
+  $7.template_effect(($0) => $7.set_class(div, 1, $0), [
+    () => $7.clsx(classNames("cinder-json-viewer", $$props.class))
+  ]);
+  $7.append($$anchor, div);
+  $7.pop();
+}
+$7.delegate(["keydown"]);
+
+// src/components/status-dot/status-dot.svelte
+import"svelte/internal/disclose-version";
+import * as $8 from "svelte/internal/client";
+var root_12 = $8.from_html(`<span class="cinder-status-dot__label"> </span>`);
+var root_23 = $8.from_html(`<span class="cinder-sr-only"> </span>`);
+var root5 = $8.from_html(`<span><span class="cinder-status-dot__indicator" aria-hidden="true"></span> <!> <!></span>`);
+function Status_dot($$anchor, $$props) {
+  $8.push($$props, true);
+  const connectionStatusMap = {
+    connected: "online",
+    connecting: "warning",
+    disconnected: "offline",
+    error: "danger"
+  };
+  const connectionLabels = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error"
+  };
+  let showLabel = $8.prop($$props, "showLabel", 3, true), size = $8.prop($$props, "size", 3, "md"), rest = $8.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "status",
+    "connectionState",
+    "label",
+    "live",
+    "showLabel",
+    "size",
+    "class",
+    "aria-label"
   ]);
-  $8.append($$anchor, div);
+  const normalizedAriaLabel = $8.derived(() => $$props["aria-label"]?.trim() ? $$props["aria-label"].trim() : undefined);
+  const resolvedStatus = $8.derived(() => $$props.status ?? ($$props.connectionState === undefined ? "neutral" : connectionStatusMap[$$props.connectionState]));
+  const resolvedLive = $8.derived(() => $$props.live ?? $$props.connectionState !== undefined);
+  const normalizedLabel = $8.derived(() => $$props.label?.trim() ? $$props.label.trim() : $$props.connectionState === undefined ? undefined : connectionLabels[$$props.connectionState]);
+  const hasVisibleLabel = $8.derived(() => showLabel() && $8.get(normalizedLabel) !== undefined);
+  const resolvedAriaLabel = $8.derived(() => $8.get(normalizedAriaLabel) ?? $8.get(normalizedLabel) ?? $8.get(resolvedStatus));
+  const visibleLabelIsLiveDuplicate = $8.derived(() => $8.get(resolvedLive) && $8.get(normalizedLabel) !== undefined && $8.get(resolvedAriaLabel) !== $8.get(normalizedLabel));
+  const needsHiddenLiveLabel = $8.derived(() => $8.get(resolvedLive) && (!$8.get(hasVisibleLabel) || $8.get(visibleLabelIsLiveDuplicate)));
+  var span = root5();
+  $8.attribute_effect(span, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-status": $8.get(resolvedStatus),
+    "data-cinder-state": $$props.connectionState,
+    "data-cinder-size": size(),
+    role: $8.get(resolvedLive) ? "status" : "img",
+    "aria-live": $8.get(resolvedLive) ? "polite" : undefined,
+    "aria-atomic": $8.get(resolvedLive) ? "true" : undefined,
+    "aria-label": $8.get(resolvedLive) ? undefined : $8.get(resolvedAriaLabel)
+  }), [() => classNames("cinder-status-dot", $$props.class)]);
+  var node = $8.sibling($8.child(span), 2);
+  {
+    var consequent = ($$anchor2) => {
+      var span_1 = root_12();
+      var text3 = $8.child(span_1, true);
+      $8.reset(span_1);
+      $8.template_effect(() => {
+        $8.set_attribute(span_1, "aria-hidden", $8.get(visibleLabelIsLiveDuplicate) ? "true" : undefined);
+        $8.set_text(text3, $8.get(normalizedLabel));
+      });
+      $8.append($$anchor2, span_1);
+    };
+    $8.if(node, ($$render) => {
+      if ($8.get(hasVisibleLabel))
+        $$render(consequent);
+    });
+  }
+  var node_1 = $8.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_2 = root_23();
+      var text_1 = $8.child(span_2, true);
+      $8.reset(span_2);
+      $8.template_effect(() => $8.set_text(text_1, $8.get(resolvedAriaLabel)));
+      $8.append($$anchor2, span_2);
+    };
+    $8.if(node_1, ($$render) => {
+      if ($8.get(needsHiddenLiveLabel))
+        $$render(consequent_1);
+    });
+  }
+  $8.reset(span);
+  $8.append($$anchor, span);
   $8.pop();
 }
 
+// src/components/event-stream-viewer/event-stream-viewer-keys.ts
+function streamEventKey(event) {
+  const parts = [keyType("event"), keyField("id", event.id)];
+  if (typeof event.sequence === "number")
+    parts.push(keyField("sequence", event.sequence));
+  return parts.join("|");
+}
+function reconnectedBoundaryKey(boundary) {
+  return [keyType("reconnected"), keyField("id", boundary.id)].join("|");
+}
+function sequenceGapKey(previousEventId, event, expectedSequence, actualSequence) {
+  return [
+    keyType("sequence-gap"),
+    previousEventId === undefined ? keyField("previous-missing", true) : keyField("previous", previousEventId),
+    keyField("next", event.id),
+    keyField("expected", expectedSequence),
+    keyField("actual", actualSequence)
+  ].join("|");
+}
+function uniqueRenderedKey(baseKey, occurrences) {
+  const occurrence = occurrences.get(baseKey) ?? 0;
+  occurrences.set(baseKey, occurrence + 1);
+  return occurrence === 0 ? baseKey : `${baseKey}|occurrence=${occurrence + 1}`;
+}
+function detailsIdForKey(instanceId, key) {
+  return `${escapeDomIdPart(instanceId)}-details-${hashString(key)}-${hashString(reverseString(key))}-${key.length}`;
+}
+function keyType(type) {
+  return keyField("type", type);
+}
+function keyField(name, value) {
+  const stringValue = String(value);
+  return `${name.length}:${name}:${stringValue.length}:${stringValue}`;
+}
+function escapeDomIdPart(value) {
+  let result = "";
+  for (const character of value) {
+    result += /^[A-Za-z0-9_-]$/.test(character) ? character : `_${character.codePointAt(0)?.toString(16) ?? "0"}_`;
+  }
+  return result === "" ? "empty" : result;
+}
+function reverseString(value) {
+  let result = "";
+  for (const character of value) {
+    result = character + result;
+  }
+  return result;
+}
+function hashString(value) {
+  let hash = 0;
+  for (let index2 = 0;index2 < value.length; index2 += 1) {
+    hash = Math.imul(31, hash) + value.charCodeAt(index2);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+
 // src/components/event-stream-viewer/event-stream-viewer.svelte
-var root_23 = $9.from_html(`<button type="button" class="cinder-event-stream-viewer__resume-button">Resume following</button>`);
-var root_32 = $9.from_html(`<input type="search" class="cinder-event-stream-viewer__filter-input" placeholder="Filter events…" aria-label="Filter events"/>`);
+var root_24 = $9.from_html(`<button type="button" class="cinder-event-stream-viewer__resume-button">Resume following</button>`);
+var root_33 = $9.from_html(`<input type="search" class="cinder-event-stream-viewer__filter-input" placeholder="Filter events…" aria-label="Filter events"/>`);
 var root_42 = $9.from_html(`<button type="button" class="cinder-event-stream-viewer__copy-all-button" aria-label="Copy all visible events">Copy visible</button>`);
 var root_52 = $9.from_html(`<div class="cinder-event-stream-viewer__truncation-notice" role="status" aria-live="polite">Stream truncated — only the most recent events are shown.</div>`);
 var root_72 = $9.from_html(`<div class="cinder-event-stream-viewer__loading" role="status" aria-label="Loading events"><div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div></div>`);
 var root_82 = $9.from_html(`<div class="cinder-event-stream-viewer__empty" role="status"><p class="cinder-event-stream-viewer__empty-message">No events to display.</p></div>`);
-var root_11 = $9.from_html(`<span class="cinder-event-stream-viewer__event-severity"> </span>`);
-var root_122 = $9.from_html(`<span class="cinder-event-stream-viewer__event-source"> </span>`);
-var root_14 = $9.from_html(`<div class="cinder-event-stream-viewer__event-details"><!></div>`);
-var root_13 = $9.from_html(`<div class="cinder-event-stream-viewer__event-details-section"><button type="button" class="cinder-event-stream-viewer__details-toggle"> </button> <!></div>`);
-var root_10 = $9.from_html(`<li class="cinder-event-stream-viewer__event"><div class="cinder-event-stream-viewer__event-bar" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__event-body"><div class="cinder-event-stream-viewer__event-meta"><time class="cinder-event-stream-viewer__event-time"> </time> <!> <!></div> <p class="cinder-event-stream-viewer__event-summary"> </p> <!></div> <div class="cinder-event-stream-viewer__event-actions"><!></div></li>`);
+var root_122 = $9.from_html(`<time class="cinder-event-stream-viewer__marker-time"> </time>`);
+var root_13 = $9.from_html(`<span class="cinder-event-stream-viewer__marker-time"> </span>`);
+var root_11 = $9.from_html(`<li class="cinder-event-stream-viewer__boundary-marker"><div class="cinder-event-stream-viewer__marker-content" role="separator"><!> <span> </span></div></li>`);
+var root_14 = $9.from_html(`<li class="cinder-event-stream-viewer__sequence-gap-marker"><div class="cinder-event-stream-viewer__marker-content" role="note"><span> </span></div></li>`);
+var root_16 = $9.from_html(`<span class="cinder-event-stream-viewer__event-severity"> </span>`);
+var root_17 = $9.from_html(`<span class="cinder-event-stream-viewer__event-source"> </span>`);
+var root_18 = $9.from_html(`<div class="cinder-event-stream-viewer__event-details-section"><button type="button" class="cinder-event-stream-viewer__details-toggle"> </button> <div class="cinder-event-stream-viewer__event-details"><!></div></div>`);
+var root_15 = $9.from_html(`<li class="cinder-event-stream-viewer__event"><div class="cinder-event-stream-viewer__event-bar" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__event-body"><div class="cinder-event-stream-viewer__event-meta"><time class="cinder-event-stream-viewer__event-time"> </time> <!> <!></div> <p class="cinder-event-stream-viewer__event-summary"> </p> <!></div> <div class="cinder-event-stream-viewer__event-actions"><!></div></li>`);
 var root_92 = $9.from_html(`<ol class="cinder-event-stream-viewer__list"></ol>`);
 var root6 = $9.from_html(`<div><div class="cinder-event-stream-viewer__toolbar" role="group" aria-label="Stream controls"><div class="cinder-event-stream-viewer__toolbar-start"><!> <!></div> <div class="cinder-event-stream-viewer__toolbar-end"><!> <!></div></div> <!> <!> <span class="cinder-event-stream-viewer__live-region" role="status" aria-live="polite" aria-atomic="true"> </span></div>`);
 function Event_stream_viewer($$anchor, $$props) {
   const instanceId = $9.props_id();
   $9.push($$props, true);
-  let followLatest = $9.prop($$props, "followLatest", 15, true), truncated = $9.prop($$props, "truncated", 3, false), loading = $9.prop($$props, "loading", 3, false), label = $9.prop($$props, "label", 3, "Event stream"), filterQuery = $9.prop($$props, "filterQuery", 3, ""), rest = $9.rest_props($$props, [
+  function isValidSequence(value) {
+    return Number.isInteger(value);
+  }
+  let followLatest = $9.prop($$props, "followLatest", 15, true), truncated = $9.prop($$props, "truncated", 3, false), loading = $9.prop($$props, "loading", 3, false), label = $9.prop($$props, "label", 3, "Event stream"), detectSequenceGaps = $9.prop($$props, "detectSequenceGaps", 3, false), filterQuery = $9.prop($$props, "filterQuery", 3, ""), rest = $9.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -709,26 +915,89 @@ function Event_stream_viewer($$anchor, $$props) {
     "truncated",
     "loading",
     "label",
+    "detectSequenceGaps",
     "oncopyvisible",
     "onfilter",
     "filterQuery",
     "class"
   ]);
-  let expandedIds = $9.state($9.proxy(new Set));
+  const expandedIds = new SvelteSet;
   let scrollContainerEl = $9.state(null);
   let programmaticScroll = false;
   let liveMessage = $9.state("");
   const isEmpty = $9.derived(() => !loading() && $$props.events.length === 0);
   const eventCount = $9.derived(() => $$props.events.length);
   const latestEvent = $9.derived(() => $$props.events.at(-1));
-  function toggleDetails(id) {
-    const next3 = new Set($9.get(expandedIds));
-    if (next3.has(id)) {
-      next3.delete(id);
+  const renderedEntries = $9.derived(() => {
+    const entries = [];
+    const keyOccurrences = new Map;
+    let previousSequence;
+    let previousEventId;
+    const shouldDetectSequenceGaps = detectSequenceGaps() && filterQuery().trim() === "";
+    for (const entry of $$props.events) {
+      if (isReconnectedBoundary(entry)) {
+        const key2 = uniqueRenderedKey(reconnectedBoundaryKey(entry), keyOccurrences);
+        entries.push({
+          type: "reconnected",
+          key: key2,
+          boundary: entry,
+          label: formatReconnectedBoundaryLabel(entry),
+          datetime: boundaryDateTime(entry)
+        });
+        previousSequence = undefined;
+        previousEventId = undefined;
+        continue;
+      }
+      const currentSequence = entry.sequence;
+      if (shouldDetectSequenceGaps && isValidSequence(previousSequence) && isValidSequence(currentSequence)) {
+        const expectedSequence = previousSequence + 1;
+        if (currentSequence !== expectedSequence) {
+          const key2 = uniqueRenderedKey(sequenceGapKey(previousEventId, entry, expectedSequence, currentSequence), keyOccurrences);
+          entries.push({
+            type: "sequence-gap",
+            key: key2,
+            expectedSequence,
+            actualSequence: currentSequence,
+            label: formatSequenceGapLabel(expectedSequence, currentSequence)
+          });
+        }
+      }
+      if (isValidSequence(currentSequence)) {
+        previousSequence = currentSequence;
+        previousEventId = entry.id;
+      } else {
+        previousSequence = undefined;
+        previousEventId = undefined;
+      }
+      const key = uniqueRenderedKey(streamEventKey(entry), keyOccurrences);
+      entries.push({
+        type: "event",
+        key,
+        detailsId: detailsIdForKey(instanceId, key),
+        event: entry
+      });
+    }
+    return entries;
+  });
+  function toggleDetails(rowKey) {
+    if (expandedIds.has(rowKey)) {
+      expandedIds.delete(rowKey);
     } else {
-      next3.add(id);
+      expandedIds.add(rowKey);
     }
-    $9.set(expandedIds, next3, true);
+  }
+  function isReconnectedBoundary(entry) {
+    return "kind" in entry && entry.kind === "reconnected" && "replayedCount" in entry && Number.isInteger(entry.replayedCount) && entry.replayedCount >= 0;
+  }
+  function formatReconnectedBoundaryLabel(boundary) {
+    const eventWord = boundary.replayedCount === 1 ? "event" : "events";
+    return `Reconnected — ${boundary.replayedCount} ${eventWord} replayed`;
+  }
+  function formatSequenceGapLabel(expectedSequence, actualSequence) {
+    return `Sequence gap — expected ${expectedSequence}, received ${actualSequence}`;
+  }
+  function boundaryDateTime(boundary) {
+    return boundary.datetime;
   }
   function formatEventAsText(event) {
     const parts = [];
@@ -745,13 +1014,28 @@ function Event_stream_viewer($$anchor, $$props) {
     }
     return parts.join(" ");
   }
+  function formatReconnectedBoundaryAsText(boundary) {
+    const timeLabel = boundary.timestamp ?? boundary.datetime;
+    const markerText = formatReconnectedBoundaryLabel(boundary);
+    return timeLabel ? `[${timeLabel}] ${markerText}` : markerText;
+  }
+  function formatRenderedEntryAsText(entry) {
+    if (entry.type === "event")
+      return formatEventAsText(entry.event);
+    if (entry.type === "reconnected")
+      return formatReconnectedBoundaryAsText(entry.boundary);
+    return entry.label;
+  }
+  function formatCopyVisibleAnnouncement(entryCount) {
+    return `${entryCount} stream ${entryCount === 1 ? "entry" : "entries"} sent to copy handler`;
+  }
   function handleCopyVisible() {
-    const text3 = $$props.events.map(formatEventAsText).join(`
+    const text3 = $9.get(renderedEntries).map(formatRenderedEntryAsText).join(`
 `);
     if (!$$props.oncopyvisible)
       return;
     $$props.oncopyvisible(text3);
-    $9.set(liveMessage, `${$$props.events.length} event${$$props.events.length !== 1 ? "s" : ""} sent to copy handler`);
+    $9.set(liveMessage, formatCopyVisibleAnnouncement($9.get(renderedEntries).length), true);
     setTimeout(() => {
       $9.set(liveMessage, "");
     }, 2000);
@@ -802,8 +1086,8 @@ function Event_stream_viewer($$anchor, $$props) {
   var node = $9.child(div_2);
   {
     var consequent = ($$anchor2) => {
-      Connection_indicator($$anchor2, {
-        get state() {
+      Status_dot($$anchor2, {
+        get connectionState() {
           return $$props.connectionState;
         }
       });
@@ -816,7 +1100,7 @@ function Event_stream_viewer($$anchor, $$props) {
   var node_1 = $9.sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var button = root_23();
+      var button = root_24();
       $9.delegated("click", button, resumeFollowing);
       $9.append($$anchor2, button);
     };
@@ -830,7 +1114,7 @@ function Event_stream_viewer($$anchor, $$props) {
   var node_2 = $9.child(div_3);
   {
     var consequent_2 = ($$anchor2) => {
-      var input = root_32();
+      var input = root_33();
       $9.remove_input_defaults(input);
       $9.template_effect(() => $9.set_value(input, filterQuery()));
       $9.delegated("input", input, (e) => $$props.onfilter?.(e.currentTarget.value));
@@ -888,119 +1172,190 @@ function Event_stream_viewer($$anchor, $$props) {
         var div_6 = root_82();
         $9.append($$anchor3, div_6);
       };
-      var alternate = ($$anchor3) => {
+      var alternate_1 = ($$anchor3) => {
         var ol = root_92();
-        $9.each(ol, 23, () => $$props.events, (event) => event.id, ($$anchor4, event, eventIndex) => {
-          const isExpanded = $9.derived(() => $9.get(expandedIds).has($9.get(event).id));
-          const detailsId = $9.derived(() => `${instanceId}-details-${$9.get(eventIndex)}`);
-          var li = root_10();
-          var div_7 = $9.sibling($9.child(li), 2);
-          var div_8 = $9.child(div_7);
-          var time = $9.child(div_8);
-          var text_1 = $9.child(time, true);
-          $9.reset(time);
-          var node_7 = $9.sibling(time, 2);
+        $9.each(ol, 21, () => $9.get(renderedEntries), (entry) => entry.key, ($$anchor4, entry) => {
+          var fragment_2 = $9.comment();
+          var node_7 = $9.first_child(fragment_2);
           {
-            var consequent_7 = ($$anchor5) => {
-              var span = root_11();
-              var text_2 = $9.child(span, true);
-              $9.reset(span);
-              $9.template_effect(() => {
-                $9.set_attribute(span, "aria-label", `Severity: ${$9.get(event).severity}`);
-                $9.set_text(text_2, $9.get(event).severity);
-              });
-              $9.append($$anchor5, span);
-            };
-            $9.if(node_7, ($$render) => {
-              if ($9.get(event).severity)
-                $$render(consequent_7);
-            });
-          }
-          var node_8 = $9.sibling(node_7, 2);
-          {
-            var consequent_8 = ($$anchor5) => {
-              var span_1 = root_122();
+            var consequent_9 = ($$anchor5) => {
+              var li = root_11();
+              var div_7 = $9.child(li);
+              var node_8 = $9.child(div_7);
+              {
+                var consequent_7 = ($$anchor6) => {
+                  var time = root_122();
+                  var text_1 = $9.child(time, true);
+                  $9.reset(time);
+                  $9.template_effect(() => {
+                    $9.set_attribute(time, "datetime", $9.get(entry).boundary.datetime);
+                    $9.set_attribute(time, "title", $9.get(entry).boundary.datetime);
+                    $9.set_text(text_1, $9.get(entry).boundary.timestamp ?? $9.get(entry).boundary.datetime);
+                  });
+                  $9.append($$anchor6, time);
+                };
+                var consequent_8 = ($$anchor6) => {
+                  var span = root_13();
+                  var text_2 = $9.child(span, true);
+                  $9.reset(span);
+                  $9.template_effect(() => $9.set_text(text_2, $9.get(entry).boundary.timestamp));
+                  $9.append($$anchor6, span);
+                };
+                $9.if(node_8, ($$render) => {
+                  if ($9.get(entry).boundary.datetime)
+                    $$render(consequent_7);
+                  else if ($9.get(entry).boundary.timestamp)
+                    $$render(consequent_8, 1);
+                });
+              }
+              var span_1 = $9.sibling(node_8, 2);
               var text_3 = $9.child(span_1, true);
               $9.reset(span_1);
-              $9.template_effect(() => $9.set_text(text_3, $9.get(event).source));
-              $9.append($$anchor5, span_1);
+              $9.reset(div_7);
+              $9.reset(li);
+              $9.template_effect(() => {
+                $9.set_attribute(div_7, "aria-label", $9.get(entry).label);
+                $9.set_text(text_3, $9.get(entry).label);
+              });
+              $9.append($$anchor5, li);
             };
-            $9.if(node_8, ($$render) => {
-              if ($9.get(event).source)
-                $$render(consequent_8);
-            });
-          }
-          $9.reset(div_8);
-          var p = $9.sibling(div_8, 2);
-          var text_4 = $9.child(p, true);
-          $9.reset(p);
-          var node_9 = $9.sibling(p, 2);
-          {
             var consequent_10 = ($$anchor5) => {
-              var div_9 = root_13();
-              var button_2 = $9.child(div_9);
-              var text_5 = $9.child(button_2, true);
-              $9.reset(button_2);
-              var node_10 = $9.sibling(button_2, 2);
+              var li_1 = root_14();
+              var div_8 = $9.child(li_1);
+              var span_2 = $9.child(div_8);
+              var text_4 = $9.child(span_2, true);
+              $9.reset(span_2);
+              $9.reset(div_8);
+              $9.reset(li_1);
+              $9.template_effect(() => {
+                $9.set_attribute(div_8, "aria-label", $9.get(entry).label);
+                $9.set_text(text_4, $9.get(entry).label);
+              });
+              $9.append($$anchor5, li_1);
+            };
+            var alternate = ($$anchor5) => {
+              const event = $9.derived(() => $9.get(entry).event);
+              const isExpanded = $9.derived(() => expandedIds.has($9.get(entry).key));
+              const detailsId = $9.derived(() => $9.get(entry).detailsId);
+              var li_2 = root_15();
+              var div_9 = $9.sibling($9.child(li_2), 2);
+              var div_10 = $9.child(div_9);
+              var time_1 = $9.child(div_10);
+              var text_5 = $9.child(time_1, true);
+              $9.reset(time_1);
+              var node_9 = $9.sibling(time_1, 2);
               {
-                var consequent_9 = ($$anchor6) => {
-                  var div_10 = root_14();
-                  var node_11 = $9.child(div_10);
-                  Json_viewer(node_11, {
-                    get value() {
-                      return $9.get(event).details;
-                    }
+                var consequent_11 = ($$anchor6) => {
+                  var span_3 = root_16();
+                  var text_6 = $9.child(span_3, true);
+                  $9.reset(span_3);
+                  $9.template_effect(() => {
+                    $9.set_attribute(span_3, "aria-label", `Severity: ${$9.get(event).severity}`);
+                    $9.set_text(text_6, $9.get(event).severity);
                   });
-                  $9.reset(div_10);
-                  $9.template_effect(() => $9.set_attribute(div_10, "id", $9.get(detailsId)));
-                  $9.append($$anchor6, div_10);
+                  $9.append($$anchor6, span_3);
+                };
+                $9.if(node_9, ($$render) => {
+                  if ($9.get(event).severity)
+                    $$render(consequent_11);
+                });
+              }
+              var node_10 = $9.sibling(node_9, 2);
+              {
+                var consequent_12 = ($$anchor6) => {
+                  var span_4 = root_17();
+                  var text_7 = $9.child(span_4, true);
+                  $9.reset(span_4);
+                  $9.template_effect(() => $9.set_text(text_7, $9.get(event).source));
+                  $9.append($$anchor6, span_4);
                 };
                 $9.if(node_10, ($$render) => {
-                  if ($9.get(isExpanded))
-                    $$render(consequent_9);
+                  if ($9.get(event).source)
+                    $$render(consequent_12);
+                });
+              }
+              $9.reset(div_10);
+              var p = $9.sibling(div_10, 2);
+              var text_8 = $9.child(p, true);
+              $9.reset(p);
+              var node_11 = $9.sibling(p, 2);
+              {
+                var consequent_14 = ($$anchor6) => {
+                  var div_11 = root_18();
+                  var button_2 = $9.child(div_11);
+                  var text_9 = $9.child(button_2, true);
+                  $9.reset(button_2);
+                  var div_12 = $9.sibling(button_2, 2);
+                  var node_12 = $9.child(div_12);
+                  {
+                    var consequent_13 = ($$anchor7) => {
+                      Json_viewer($$anchor7, {
+                        get value() {
+                          return $9.get(event).details;
+                        }
+                      });
+                    };
+                    $9.if(node_12, ($$render) => {
+                      if ($9.get(isExpanded))
+                        $$render(consequent_13);
+                    });
+                  }
+                  $9.reset(div_12);
+                  $9.reset(div_11);
+                  $9.template_effect(() => {
+                    $9.set_attribute(button_2, "aria-expanded", $9.get(isExpanded));
+                    $9.set_attribute(button_2, "aria-controls", $9.get(detailsId));
+                    $9.set_attribute(button_2, "aria-label", `${$9.get(isExpanded) ? "Hide" : "Show"} details for ${$9.get(event).severity ? `${$9.get(event).severity}: ` : ""}${$9.get(event).summary}`);
+                    $9.set_text(text_9, $9.get(isExpanded) ? "Hide details" : "Show details");
+                    $9.set_attribute(div_12, "id", $9.get(detailsId));
+                    $9.set_attribute(div_12, "hidden", !$9.get(isExpanded));
+                  });
+                  $9.delegated("click", button_2, () => toggleDetails($9.get(entry).key));
+                  $9.append($$anchor6, div_11);
+                };
+                $9.if(node_11, ($$render) => {
+                  if ($9.get(event).details !== undefined)
+                    $$render(consequent_14);
                 });
               }
               $9.reset(div_9);
+              var div_13 = $9.sibling(div_9, 2);
+              var node_13 = $9.child(div_13);
+              {
+                let $0 = $9.derived(() => formatEventAsText($9.get(event)));
+                let $1 = $9.derived(() => `Copy event: ${$9.get(event).summary}`);
+                Copy_button(node_13, {
+                  get value() {
+                    return $9.get($0);
+                  },
+                  get label() {
+                    return $9.get($1);
+                  },
+                  copiedLabel: "Event copied",
+                  class: "cinder-event-stream-viewer__copy-event-button"
+                });
+              }
+              $9.reset(div_13);
+              $9.reset(li_2);
               $9.template_effect(() => {
-                $9.set_attribute(button_2, "aria-expanded", $9.get(isExpanded));
-                $9.set_attribute(button_2, "aria-controls", $9.get(isExpanded) ? $9.get(detailsId) : undefined);
-                $9.set_text(text_5, $9.get(isExpanded) ? "Hide details" : "Show details");
+                $9.set_attribute(li_2, "data-cinder-severity", $9.get(event).severity ?? "info");
+                $9.set_attribute(time_1, "datetime", $9.get(event).datetime);
+                $9.set_attribute(time_1, "title", $9.get(event).datetime);
+                $9.set_text(text_5, $9.get(event).timestamp ?? $9.get(event).datetime);
+                $9.set_text(text_8, $9.get(event).summary);
               });
-              $9.delegated("click", button_2, () => toggleDetails($9.get(event).id));
-              $9.append($$anchor5, div_9);
+              $9.append($$anchor5, li_2);
             };
-            $9.if(node_9, ($$render) => {
-              if ($9.get(event).details !== undefined)
-                $$render(consequent_10);
-            });
-          }
-          $9.reset(div_7);
-          var div_11 = $9.sibling(div_7, 2);
-          var node_12 = $9.child(div_11);
-          {
-            let $0 = $9.derived(() => formatEventAsText($9.get(event)));
-            let $1 = $9.derived(() => `Copy event: ${$9.get(event).summary}`);
-            Copy_button(node_12, {
-              get value() {
-                return $9.get($0);
-              },
-              get label() {
-                return $9.get($1);
-              },
-              copiedLabel: "Event copied",
-              class: "cinder-event-stream-viewer__copy-event-button"
+            $9.if(node_7, ($$render) => {
+              if ($9.get(entry).type === "reconnected")
+                $$render(consequent_9);
+              else if ($9.get(entry).type === "sequence-gap")
+                $$render(consequent_10, 1);
+              else
+                $$render(alternate, -1);
             });
           }
-          $9.reset(div_11);
-          $9.reset(li);
-          $9.template_effect(() => {
-            $9.set_attribute(li, "data-cinder-severity", $9.get(event).severity ?? "info");
-            $9.set_attribute(time, "datetime", $9.get(event).datetime);
-            $9.set_attribute(time, "title", $9.get(event).datetime);
-            $9.set_text(text_1, $9.get(event).timestamp ?? $9.get(event).datetime);
-            $9.set_text(text_4, $9.get(event).summary);
-          });
-          $9.append($$anchor4, li);
+          $9.append($$anchor4, fragment_2);
         });
         $9.reset(ol);
         $9.append($$anchor3, ol);
@@ -1011,16 +1366,16 @@ function Event_stream_viewer($$anchor, $$props) {
         else if ($9.get(isEmpty))
           $$render(consequent_6, 1);
         else
-          $$render(alternate, -1);
+          $$render(alternate_1, -1);
       });
     }
     $9.append($$anchor2, fragment_1);
   });
-  var span_2 = $9.sibling(node_5, 2);
-  var text_6 = $9.child(span_2, true);
-  $9.reset(span_2);
+  var span_5 = $9.sibling(node_5, 2);
+  var text_10 = $9.child(span_5, true);
+  $9.reset(span_5);
   $9.reset(div);
-  $9.template_effect(() => $9.set_text(text_6, $9.get(liveMessage)));
+  $9.template_effect(() => $9.set_text(text_10, $9.get(liveMessage)));
   $9.append($$anchor, div);
   $9.pop();
 }
@@ -1033,4 +1388,4 @@ export {
   Event_stream_viewer as EventStreamViewer
 };
 
-//# debugId=265EFC2C6C76F3EA64756E2164756E21
+//# debugId=E4B4EF6FF5D93DD964756E2164756E21