@lostgradient/cinder 0.2.0 → 0.4.0

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

@@ -0,0 +1,1391 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/event-stream-viewer/index.ts
+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/copy-button/copy-button.svelte
+import"svelte/internal/disclose-version";
+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 $2 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $ from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root = $.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $.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(" ");
+  $.init();
+  var svg = root();
+  $.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($.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 = $.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() }));
+    });
+    $.append($$anchor2, fragment);
+  });
+  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 = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+  Icon($$anchor, $2.spread_props({ name: "check" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      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 }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/copy.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $3 from "svelte/internal/client";
+function Copy($$anchor, $$props) {
+  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    [
+      "rect",
+      {
+        width: "14",
+        height: "14",
+        x: "8",
+        y: "8",
+        rx: "2",
+        ry: "2"
+      }
+    ],
+    [
+      "path",
+      {
+        d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+      }
+    ]
+  ];
+  Icon($$anchor, $3.spread_props({ name: "copy" }, () => $$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);
+    },
+    $$slots: { default: true }
+  }));
+}
+// src/utilities/clipboard.ts
+async function copyToClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  return legacyCopy(text);
+}
+function legacyCopy(text) {
+  if (typeof document === "undefined")
+    return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.setAttribute("tabindex", "-1");
+  textarea.style.position = "absolute";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  let succeeded = false;
+  try {
+    succeeded = document.execCommand("copy");
+  } catch {
+    succeeded = false;
+  }
+  textarea.remove();
+  return succeeded;
+}
+
+// src/components/_visually-hidden-live-region.svelte
+import"svelte/internal/disclose-version";
+import * as $4 from "svelte/internal/client";
+var root2 = $4.from_html(`<div aria-atomic="true"> </div>`);
+function _visually_hidden_live_region($$anchor, $$props) {
+  $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;
+  $4.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $4.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $4.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $4.set(rendered, next, true);
+      setTimeoutId = null;
+    }, 0);
+  });
+  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 root3 = $5.from_html(`<button><!></button> <!>`, 1);
+function Copy_button($$anchor, $$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",
+    "value",
+    "confirmDuration",
+    "label",
+    "copiedLabel",
+    "iconOnly",
+    "class",
+    "children",
+    "confirmation"
+  ]);
+  let copied = $5.state(false);
+  let resetTimer;
+  const copiedAnnouncement = $5.derived(() => $5.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
+  async function handleClick() {
+    const ok = await copyToClipboard($$props.value);
+    if (!ok)
+      return;
+    $5.set(copied, true);
+    if (resetTimer)
+      clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => {
+      $5.set(copied, false);
+    }, confirmDuration());
+  }
+  $5.user_effect(() => {
+    return () => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    };
+  });
+  var fragment = root3();
+  var button = $5.first_child(fragment);
+  $5.attribute_effect(button, ($0) => ({
+    ...rest,
+    type: "button",
+    "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 = $5.child(button);
+  {
+    var consequent = ($$anchor2) => {
+      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 = $5.text("Copied");
+      $5.append($$anchor2, text2);
+    };
+    var consequent_3 = ($$anchor2) => {
+      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 = $5.text("Copy");
+      $5.append($$anchor2, text_1);
+    };
+    $5.if(node, ($$render) => {
+      if ($5.get(copied) && $$props.confirmation)
+        $$render(consequent);
+      else if ($5.get(copied) && iconOnly())
+        $$render(consequent_1, 1);
+      else if ($5.get(copied))
+        $$render(consequent_2, 2);
+      else if ($$props.children)
+        $$render(consequent_3, 3);
+      else if (iconOnly())
+        $$render(consequent_4, 4);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $5.reset(button);
+  var node_3 = $5.sibling(button, 2);
+  _visually_hidden_live_region(node_3, {
+    get message() {
+      return $5.get(copiedAnnouncement);
+    }
+  });
+  $5.append($$anchor, fragment);
+  $5.pop();
+}
+
+// src/components/json-viewer/json-viewer.svelte
+import"svelte/internal/disclose-version";
+import * as $7 from "svelte/internal/client";
+
+// src/components/json-viewer/_json-viewer-node.svelte
+import"svelte/internal/disclose-version";
+import * as $6 from "svelte/internal/client";
+import { untrack as untrack2 } from "svelte";
+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) {
+  $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 ($6.get(isArray)) {
+      return $$props.value.map((item, i) => [i, item]);
+    }
+    return Object.entries($$props.value);
+  });
+  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";
+    if (typeof v === "string")
+      return "string";
+    if (typeof v === "number")
+      return "number";
+    if (typeof v === "boolean")
+      return "boolean";
+    return "unknown";
+  }
+  var fragment = $6.comment();
+  var node = $6.first_child(fragment);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var span = root_2();
+      var button = $6.child(span);
+      var node_1 = $6.child(button);
+      {
+        var consequent = ($$anchor3) => {
+          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);
+        };
+        $6.if(node_1, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent);
+        });
+      }
+      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_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) ? "]" : "}");
+          });
+          $6.append($$anchor3, fragment_1);
+        };
+        $6.if(node_2, ($$render) => {
+          if ($6.get(collapsed))
+            $$render(consequent_1);
+        });
+      }
+      $6.reset(button);
+      var node_3 = $6.sibling(button, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          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 = $6.derived(() => $$props.depth + 1);
+              let $1 = $6.derived(() => $6.get(index2) + 1);
+              _json_viewer_node(node_4, {
+                get value() {
+                  return v();
+                },
+                get keyName() {
+                  return k();
+                },
+                get depth() {
+                  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;
+                }
+              });
+            }
+            $6.reset(li);
+            $6.append($$anchor4, li);
+          });
+          $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);
+        };
+        $6.if(node_3, ($$render) => {
+          if (!$6.get(collapsed))
+            $$render(consequent_2);
+        });
+      }
+      $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_7();
+      var node_5 = $6.child(span_7);
+      {
+        var consequent_4 = ($$anchor3) => {
+          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);
+        };
+        $6.if(node_5, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_4);
+        });
+      }
+      $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_9();
+      var node_6 = $6.child(span_9);
+      {
+        var consequent_6 = ($$anchor3) => {
+          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);
+        };
+        $6.if(node_6, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_6);
+        });
+      }
+      var span_11 = $6.sibling(node_6, 2);
+      var node_7 = $6.child(span_11);
+      {
+        var consequent_7 = ($$anchor3) => {
+          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 = $6.text();
+          $6.template_effect(($0) => $6.set_text(text_8, $0), [() => String($$props.value)]);
+          $6.append($$anchor3, text_8);
+        };
+        $6.if(node_7, ($$render) => {
+          if (typeof $$props.value === "string")
+            $$render(consequent_7);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $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);
+    };
+    $6.if(node, ($$render) => {
+      if ($6.get(isObject) && !$6.get(tooDeep))
+        $$render(consequent_3);
+      else if ($6.get(isObject) && $6.get(tooDeep))
+        $$render(consequent_5, 1);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $6.append($$anchor, fragment);
+  $6.pop();
+}
+$6.delegate(["click"]);
+
+// src/components/json-viewer/json-viewer.svelte
+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) {
+  $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")
+        return { ok: false };
+      return { ok: true, size: new Blob([json]).size };
+    } catch {
+      return { ok: false };
+    }
+  });
+  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_1();
+      $7.append($$anchor2, div_1);
+    };
+    var consequent_1 = ($$anchor2) => {
+      var div_2 = root_22();
+      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(($7.get(serialized).ok ? $7.get(serialized).size : 0) / 1024),
+        () => Math.round(maxBytes() / 1024)
+      ]);
+      $7.append($$anchor2, div_2);
+    };
+    var alternate = ($$anchor2) => {
+      var div_3 = root_32();
+      var node_1 = $7.child(div_3);
+      _json_viewer_node(node_1, {
+        get value() {
+          return $$props.value;
+        },
+        depth: 0,
+        get initialDepth() {
+          return initialDepth();
+        },
+        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);
+    };
+    $7.if(node, ($$render) => {
+      if ($7.get(unserializable))
+        $$render(consequent);
+      else if ($7.get(tooLarge))
+        $$render(consequent_1, 1);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $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"
+  ]);
+  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_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_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);
+  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",
+    "events",
+    "connectionState",
+    "followLatest",
+    "truncated",
+    "loading",
+    "label",
+    "detectSequenceGaps",
+    "oncopyvisible",
+    "onfilter",
+    "filterQuery",
+    "class"
+  ]);
+  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));
+  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 {
+      expandedIds.add(rowKey);
+    }
+  }
+  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 = [];
+    parts.push(`[${event.timestamp ?? event.datetime}]`);
+    if (event.severity)
+      parts.push(`[${event.severity.toUpperCase()}]`);
+    if (event.source)
+      parts.push(`[${event.source}]`);
+    parts.push(event.summary);
+    if (event.details !== undefined) {
+      try {
+        parts.push(JSON.stringify(event.details, null, 2));
+      } catch {}
+    }
+    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 = $9.get(renderedEntries).map(formatRenderedEntryAsText).join(`
+`);
+    if (!$$props.oncopyvisible)
+      return;
+    $$props.oncopyvisible(text3);
+    $9.set(liveMessage, formatCopyVisibleAnnouncement($9.get(renderedEntries).length), true);
+    setTimeout(() => {
+      $9.set(liveMessage, "");
+    }, 2000);
+  }
+  function handleScroll(event) {
+    if (programmaticScroll)
+      return;
+    const target = event.target;
+    const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 2;
+    if (atBottom && !followLatest()) {
+      followLatest(true);
+    } else if (!atBottom && followLatest()) {
+      followLatest(false);
+    }
+  }
+  function scrollToBottom(el) {
+    programmaticScroll = true;
+    el.scrollTop = el.scrollHeight;
+    requestAnimationFrame(() => {
+      programmaticScroll = false;
+    });
+  }
+  function resumeFollowing() {
+    followLatest(true);
+    if ($9.get(scrollContainerEl)) {
+      scrollToBottom($9.get(scrollContainerEl));
+    }
+  }
+  $9.user_effect(() => {
+    const count = $9.get(eventCount);
+    const tail = $9.get(latestEvent);
+    if (followLatest() && count > 0 && tail && $9.get(scrollContainerEl)) {
+      scrollToBottom($9.get(scrollContainerEl));
+    }
+  });
+  var div = root6();
+  $9.attribute_effect(div, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-loading": loading() || undefined,
+    "data-cinder-empty": $9.get(isEmpty) || undefined,
+    "data-cinder-paused": !followLatest() || undefined
+  }), [
+    () => classNames("cinder-event-stream-viewer", $$props.class)
+  ]);
+  var div_1 = $9.child(div);
+  var div_2 = $9.child(div_1);
+  var node = $9.child(div_2);
+  {
+    var consequent = ($$anchor2) => {
+      Status_dot($$anchor2, {
+        get connectionState() {
+          return $$props.connectionState;
+        }
+      });
+    };
+    $9.if(node, ($$render) => {
+      if ($$props.connectionState)
+        $$render(consequent);
+    });
+  }
+  var node_1 = $9.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var button = root_24();
+      $9.delegated("click", button, resumeFollowing);
+      $9.append($$anchor2, button);
+    };
+    $9.if(node_1, ($$render) => {
+      if (!followLatest())
+        $$render(consequent_1);
+    });
+  }
+  $9.reset(div_2);
+  var div_3 = $9.sibling(div_2, 2);
+  var node_2 = $9.child(div_3);
+  {
+    var consequent_2 = ($$anchor2) => {
+      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));
+      $9.append($$anchor2, input);
+    };
+    $9.if(node_2, ($$render) => {
+      if ($$props.onfilter !== undefined)
+        $$render(consequent_2);
+    });
+  }
+  var node_3 = $9.sibling(node_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var button_1 = root_42();
+      $9.template_effect(() => button_1.disabled = $$props.events.length === 0);
+      $9.delegated("click", button_1, handleCopyVisible);
+      $9.append($$anchor2, button_1);
+    };
+    $9.if(node_3, ($$render) => {
+      if ($$props.oncopyvisible !== undefined)
+        $$render(consequent_3);
+    });
+  }
+  $9.reset(div_3);
+  $9.reset(div_1);
+  var node_4 = $9.sibling(div_1, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var div_4 = root_52();
+      $9.append($$anchor2, div_4);
+    };
+    $9.if(node_4, ($$render) => {
+      if (truncated())
+        $$render(consequent_4);
+    });
+  }
+  var node_5 = $9.sibling(node_4, 2);
+  $9.element(node_5, () => "div", false, ($$element, $$anchor2) => {
+    $9.bind_this($$element, ($$value) => $9.set(scrollContainerEl, $$value, true), () => $9.get(scrollContainerEl));
+    $9.attribute_effect($$element, () => ({
+      class: "cinder-event-stream-viewer__viewport",
+      role: "log",
+      "aria-label": label(),
+      onscroll: handleScroll,
+      tabindex: 0
+    }));
+    var fragment_1 = $9.comment();
+    var node_6 = $9.first_child(fragment_1);
+    {
+      var consequent_5 = ($$anchor3) => {
+        var div_5 = root_72();
+        $9.append($$anchor3, div_5);
+      };
+      var consequent_6 = ($$anchor3) => {
+        var div_6 = root_82();
+        $9.append($$anchor3, div_6);
+      };
+      var alternate_1 = ($$anchor3) => {
+        var ol = root_92();
+        $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_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.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);
+            };
+            var consequent_10 = ($$anchor5) => {
+              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_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.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(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(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.append($$anchor5, li_2);
+            };
+            $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.append($$anchor4, fragment_2);
+        });
+        $9.reset(ol);
+        $9.append($$anchor3, ol);
+      };
+      $9.if(node_6, ($$render) => {
+        if (loading())
+          $$render(consequent_5);
+        else if ($9.get(isEmpty))
+          $$render(consequent_6, 1);
+        else
+          $$render(alternate_1, -1);
+      });
+    }
+    $9.append($$anchor2, fragment_1);
+  });
+  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_10, $9.get(liveMessage)));
+  $9.append($$anchor, div);
+  $9.pop();
+}
+$9.delegate(["click", "input"]);
+
+// src/components/event-stream-viewer/index.ts
+var event_stream_viewer_default = Event_stream_viewer;
+export {
+  event_stream_viewer_default as default,
+  Event_stream_viewer as EventStreamViewer
+};
+
+//# debugId=E4B4EF6FF5D93DD964756E2164756E21