@lostgradient/cinder 0.2.0 → 0.3.0

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

@@ -0,0 +1,1036 @@
+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";
+
+// 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";
+
+// ../../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";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $2 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 root2 = $2.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, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "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, () => []);
+  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) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "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)))
+  ]);
+  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() }));
+    });
+    $2.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();
+}
+
+// ../../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 iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+  Icon($$anchor, $3.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);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../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";
+function Copy($$anchor, $$props) {
+  const $$sanitized_props = $4.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, $4.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);
+    },
+    $$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 $5 from "svelte/internal/client";
+var root3 = $5.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("");
+  let setTimeoutId = null;
+  let version = 0;
+  let isDestroyed = false;
+  $5.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $5.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $5.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $5.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();
+}
+
+// src/components/copy-button/copy-button.svelte
+var root4 = $6.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, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "value",
+    "confirmDuration",
+    "label",
+    "copiedLabel",
+    "iconOnly",
+    "class",
+    "children",
+    "confirmation"
+  ]);
+  let copied = $6.state(false);
+  let resetTimer;
+  const copiedAnnouncement = $6.derived(() => $6.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
+  async function handleClick() {
+    const ok = await copyToClipboard($$props.value);
+    if (!ok)
+      return;
+    $6.set(copied, true);
+    if (resetTimer)
+      clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => {
+      $6.set(copied, false);
+    }, confirmDuration());
+  }
+  onDestroy(() => {
+    if (resetTimer)
+      clearTimeout(resetTimer);
+  });
+  var fragment = root4();
+  var button = $6.first_child(fragment);
+  $6.attribute_effect(button, ($0) => ({
+    ...rest,
+    type: "button",
+    "data-cinder-copied": $6.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 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 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 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 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);
+    };
+    $6.if(node, ($$render) => {
+      if ($6.get(copied) && $$props.confirmation)
+        $$render(consequent);
+      else if ($6.get(copied) && iconOnly())
+        $$render(consequent_1, 1);
+      else if ($6.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);
+    });
+  }
+  $6.reset(button);
+  var node_3 = $6.sibling(button, 2);
+  _visually_hidden_live_region(node_3, {
+    get message() {
+      return $6.get(copiedAnnouncement);
+    }
+  });
+  $6.append($$anchor, fragment);
+  $6.pop();
+}
+
+// src/components/json-viewer/json-viewer.svelte
+import"svelte/internal/disclose-version";
+import * as $8 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 { 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>`);
+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))
+      return [];
+    if ($7.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)}`);
+  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 = $7.comment();
+  var node = $7.first_child(fragment);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var span = root_1();
+      var button = $7.child(span);
+      var node_1 = $7.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);
+        };
+        $7.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 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) ? "]" : "}");
+          });
+          $7.append($$anchor3, fragment_1);
+        };
+        $7.if(node_2, ($$render) => {
+          if ($7.get(collapsed))
+            $$render(consequent_1);
+        });
+      }
+      $7.reset(button);
+      var node_3 = $7.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);
+            {
+              let $0 = $7.derived(() => $$props.depth + 1);
+              _json_viewer_node(node_4, {
+                get value() {
+                  return v();
+                },
+                get keyName() {
+                  return k();
+                },
+                get depth() {
+                  return $7.get($0);
+                },
+                get initialDepth() {
+                  return $$props.initialDepth;
+                },
+                get maxDepth() {
+                  return $$props.maxDepth;
+                }
+              });
+            }
+            $7.reset(li);
+            $7.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);
+        };
+        $7.if(node_3, ($$render) => {
+          if (!$7.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);
+    };
+    var consequent_5 = ($$anchor2) => {
+      var span_7 = root_6();
+      var node_5 = $7.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);
+        };
+        $7.if(node_5, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_4);
+        });
+      }
+      $7.next(2);
+      $7.reset(span_7);
+      $7.append($$anchor2, span_7);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var span_9 = root_8();
+      var node_6 = $7.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);
+        };
+        $7.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 consequent_7 = ($$anchor3) => {
+          var text_7 = $7.text();
+          $7.template_effect(() => $7.set_text(text_7, `"${$$props.value ?? ""}"`));
+          $7.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);
+        };
+        $7.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);
+    };
+    $7.if(node, ($$render) => {
+      if ($7.get(isObject) && !$7.get(tooDeep))
+        $$render(consequent_3);
+      else if ($7.get(isObject) && $7.get(tooDeep))
+        $$render(consequent_5, 1);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $7.append($$anchor, fragment);
+  $7.pop();
+}
+$7.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>`);
+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(() => {
+    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 = $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);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_12();
+      $8.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
+        is ${$1 ?? ""} KB).`), [
+        () => Math.round(($8.get(serialized).ok ? $8.get(serialized).size : 0) / 1024),
+        () => Math.round(maxBytes() / 1024)
+      ]);
+      $8.append($$anchor2, div_2);
+    };
+    var alternate = ($$anchor2) => {
+      _json_viewer_node($$anchor2, {
+        get value() {
+          return $$props.value;
+        },
+        depth: 0,
+        get initialDepth() {
+          return initialDepth();
+        },
+        get maxDepth() {
+          return maxDepth();
+        }
+      });
+    };
+    $8.if(node, ($$render) => {
+      if ($8.get(unserializable))
+        $$render(consequent);
+      else if ($8.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))
+  ]);
+  $8.append($$anchor, div);
+  $8.pop();
+}
+
+// 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_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_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, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "events",
+    "connectionState",
+    "followLatest",
+    "truncated",
+    "loading",
+    "label",
+    "oncopyvisible",
+    "onfilter",
+    "filterQuery",
+    "class"
+  ]);
+  let expandedIds = $9.state($9.proxy(new Set));
+  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);
+    } else {
+      next3.add(id);
+    }
+    $9.set(expandedIds, next3, true);
+  }
+  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 handleCopyVisible() {
+    const text3 = $$props.events.map(formatEventAsText).join(`
+`);
+    if (!$$props.oncopyvisible)
+      return;
+    $$props.oncopyvisible(text3);
+    $9.set(liveMessage, `${$$props.events.length} event${$$props.events.length !== 1 ? "s" : ""} sent to copy handler`);
+    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) => {
+      Connection_indicator($$anchor2, {
+        get state() {
+          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_23();
+      $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_32();
+      $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 = ($$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);
+          {
+            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 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.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 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;
+                    }
+                  });
+                  $9.reset(div_10);
+                  $9.template_effect(() => $9.set_attribute(div_10, "id", $9.get(detailsId)));
+                  $9.append($$anchor6, div_10);
+                };
+                $9.if(node_10, ($$render) => {
+                  if ($9.get(isExpanded))
+                    $$render(consequent_9);
+                });
+              }
+              $9.reset(div_9);
+              $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.delegated("click", button_2, () => toggleDetails($9.get(event).id));
+              $9.append($$anchor5, div_9);
+            };
+            $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.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.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);
+      });
+    }
+    $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);
+  $9.reset(div);
+  $9.template_effect(() => $9.set_text(text_6, $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=265EFC2C6C76F3EA64756E2164756E21