@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -4,44 +4,21 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/event-stream-viewer/event-stream-viewer.svelte
 import * as $9 from "svelte/internal/server";
+import { SvelteSet } from "svelte/reactivity";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
-// src/components/connection-indicator/connection-indicator.svelte
-import * as $ from "svelte/internal/server";
-function Connection_indicator($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let { state, label, class: className, $$slots, $$events, ...rest } = $$props;
-    const defaultLabels = {
-      connected: "Connected",
-      connecting: "Connecting",
-      disconnected: "Disconnected",
-      error: "Error"
-    };
-    const visibleLabel = $.derived(() => label ?? defaultLabels[state]);
-    $$renderer2.push(`<span${$.attributes({
-      ...rest,
-      class: $.clsx(classNames("cinder-connection-indicator", className)),
-      "data-cinder-state": state,
-      role: "status",
-      "aria-live": "polite",
-      "aria-atomic": "true"
-    })}><span class="cinder-connection-indicator__dot" aria-hidden="true"></span> <span class="cinder-connection-indicator__label">${$.escape(visibleLabel())}</span></span>`);
-  });
-}
-
 // src/components/copy-button/copy-button.svelte
-import * as $6 from "svelte/internal/server";
-import { onDestroy } from "svelte";
+import * as $5 from "svelte/internal/server";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
-import * as $3 from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 
 // ../../node_modules/lucide-svelte/dist/Icon.svelte
-import * as $2 from "svelte/internal/server";
+import * as $ from "svelte/internal/server";
 
 // ../../node_modules/lucide-svelte/dist/defaultAttributes.js
 var defaultAttributes = {
@@ -59,8 +36,8 @@ var defaultAttributes_default = defaultAttributes;
 
 // ../../node_modules/lucide-svelte/dist/Icon.svelte
 function Icon($$renderer, $$props) {
-  const $$sanitized_props = $2.sanitize_props($$props);
-  const $$restProps = $2.rest_props($$sanitized_props, [
+  const $$sanitized_props = $.sanitize_props($$props);
+  const $$restProps = $.rest_props($$sanitized_props, [
     "name",
     "color",
     "size",
@@ -69,35 +46,35 @@ function Icon($$renderer, $$props) {
     "iconNode"
   ]);
   $$renderer.component(($$renderer2) => {
-    let name = $2.fallback($$props["name"], undefined);
-    let color = $2.fallback($$props["color"], "currentColor");
-    let size = $2.fallback($$props["size"], 24);
-    let strokeWidth = $2.fallback($$props["strokeWidth"], 2);
-    let absoluteStrokeWidth = $2.fallback($$props["absoluteStrokeWidth"], false);
-    let iconNode = $2.fallback($$props["iconNode"], () => [], true);
+    let name = $.fallback($$props["name"], undefined);
+    let color = $.fallback($$props["color"], "currentColor");
+    let size = $.fallback($$props["size"], 24);
+    let strokeWidth = $.fallback($$props["strokeWidth"], 2);
+    let absoluteStrokeWidth = $.fallback($$props["absoluteStrokeWidth"], false);
+    let iconNode = $.fallback($$props["iconNode"], () => [], true);
     const mergeClasses = (...classes) => classes.filter((className, index, array) => {
       return Boolean(className) && array.indexOf(className) === index;
     }).join(" ");
-    $$renderer2.push(`<svg${$2.attributes({
+    $$renderer2.push(`<svg${$.attributes({
       ...defaultAttributes_default,
       ...$$restProps,
       width: size,
       height: size,
       stroke: color,
       "stroke-width": absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-      class: $2.clsx(mergeClasses("lucide-icon", "lucide", name ? `lucide-${name}` : "", $$sanitized_props.class))
+      class: $.clsx(mergeClasses("lucide-icon", "lucide", name ? `lucide-${name}` : "", $$sanitized_props.class))
     }, undefined, undefined, undefined, 3)}><!--[-->`);
-    const each_array = $2.ensure_array_like(iconNode);
+    const each_array = $.ensure_array_like(iconNode);
     for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
       let [tag, attrs] = each_array[$$index];
-      $2.element($$renderer2, tag, () => {
-        $$renderer2.push(`${$2.attributes({ ...attrs }, undefined, undefined, undefined, 3)}`);
+      $.element($$renderer2, tag, () => {
+        $$renderer2.push(`${$.attributes({ ...attrs }, undefined, undefined, undefined, 3)}`);
       });
     }
     $$renderer2.push(`<!--]--><!--[-->`);
-    $2.slot($$renderer2, $$props, "default", {}, null);
+    $.slot($$renderer2, $$props, "default", {}, null);
     $$renderer2.push(`<!--]--></svg>`);
-    $2.bind_props($$props, {
+    $.bind_props($$props, {
       name,
       color,
       size,
@@ -110,16 +87,16 @@ function Icon($$renderer, $$props) {
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 function Check($$renderer, $$props) {
-  const $$sanitized_props = $3.sanitize_props($$props);
+  const $$sanitized_props = $2.sanitize_props($$props);
   const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
-  Icon($$renderer, $3.spread_props([
+  Icon($$renderer, $2.spread_props([
     { name: "check" },
     $$sanitized_props,
     {
       iconNode,
       children: ($$renderer2) => {
         $$renderer2.push(`<!--[-->`);
-        $3.slot($$renderer2, $$props, "default", {}, null);
+        $2.slot($$renderer2, $$props, "default", {}, null);
         $$renderer2.push(`<!--]-->`);
       },
       $$slots: { default: true }
@@ -127,9 +104,9 @@ function Check($$renderer, $$props) {
   ]));
 }
 // ../../node_modules/lucide-svelte/dist/icons/copy.svelte
-import * as $4 from "svelte/internal/server";
+import * as $3 from "svelte/internal/server";
 function Copy($$renderer, $$props) {
-  const $$sanitized_props = $4.sanitize_props($$props);
+  const $$sanitized_props = $3.sanitize_props($$props);
   const iconNode = [
     [
       "rect",
@@ -149,14 +126,14 @@ function Copy($$renderer, $$props) {
       }
     ]
   ];
-  Icon($$renderer, $4.spread_props([
+  Icon($$renderer, $3.spread_props([
     { name: "copy" },
     $$sanitized_props,
     {
       iconNode,
       children: ($$renderer2) => {
         $$renderer2.push(`<!--[-->`);
-        $4.slot($$renderer2, $$props, "default", {}, null);
+        $3.slot($$renderer2, $$props, "default", {}, null);
         $$renderer2.push(`<!--]-->`);
       },
       $$slots: { default: true }
@@ -196,7 +173,7 @@ function legacyCopy(text) {
 }
 
 // src/components/_visually-hidden-live-region.svelte
-import * as $5 from "svelte/internal/server";
+import * as $4 from "svelte/internal/server";
 function _visually_hidden_live_region($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
@@ -209,7 +186,7 @@ function _visually_hidden_live_region($$renderer, $$props) {
     let setTimeoutId = null;
     let version = 0;
     let isDestroyed = false;
-    $$renderer2.push(`<div${$5.attr("role", priority === "assertive" ? "alert" : "status")}${$5.attr("aria-live", priority === "assertive" ? "assertive" : "polite")} aria-atomic="true"${$5.attr_class($5.clsx(classNames("cinder-sr-only", className)))}>${$5.escape(rendered)}</div>`);
+    $$renderer2.push(`<div${$4.attr("role", priority === "assertive" ? "alert" : "status")}${$4.attr("aria-live", priority === "assertive" ? "assertive" : "polite")} aria-atomic="true"${$4.attr_class($4.clsx(classNames("cinder-sr-only", className)))}>${$4.escape(rendered)}</div>`);
   });
 }
 
@@ -231,7 +208,7 @@ function Copy_button($$renderer, $$props) {
     } = $$props;
     let copied = false;
     let resetTimer;
-    const copiedAnnouncement = $6.derived(() => copied ? copiedLabel ?? "Copied" : "");
+    const copiedAnnouncement = $5.derived(() => copied ? copiedLabel ?? "Copied" : "");
     async function handleClick() {
       const ok = await copyToClipboard(value);
       if (!ok)
@@ -243,16 +220,12 @@ function Copy_button($$renderer, $$props) {
         copied = false;
       }, confirmDuration);
     }
-    onDestroy(() => {
-      if (resetTimer)
-        clearTimeout(resetTimer);
-    });
-    $$renderer2.push(`<button${$6.attributes({
+    $$renderer2.push(`<button${$5.attributes({
       ...rest,
       type: "button",
       "data-cinder-copied": copied || undefined,
       "aria-label": label ?? "Copy to clipboard",
-      class: $6.clsx(classNames("cinder-copy-button", className))
+      class: $5.clsx(classNames("cinder-copy-button", className))
     })}>`);
     if (copied && confirmation) {
       $$renderer2.push("<!--[0-->");
@@ -282,19 +255,28 @@ function Copy_button($$renderer, $$props) {
 }
 
 // src/components/json-viewer/json-viewer.svelte
-import * as $8 from "svelte/internal/server";
+import * as $7 from "svelte/internal/server";
 
 // src/components/json-viewer/_json-viewer-node.svelte
-import * as $7 from "svelte/internal/server";
+import * as $6 from "svelte/internal/server";
 import { untrack } from "svelte";
 function _json_viewer_node($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    let { value, keyName, depth, initialDepth, maxDepth } = $$props;
-    const isObject = $7.derived(() => value !== null && typeof value === "object");
-    const isArray = $7.derived(() => Array.isArray(value));
-    const tooDeep = $7.derived(() => depth >= maxDepth);
+    let {
+      value,
+      keyName,
+      depth,
+      initialDepth,
+      maxDepth,
+      position,
+      setSize,
+      root = false
+    } = $$props;
+    const isObject = $6.derived(() => value !== null && typeof value === "object");
+    const isArray = $6.derived(() => Array.isArray(value));
+    const tooDeep = $6.derived(() => depth >= maxDepth);
     let collapsed = untrack(() => depth >= initialDepth);
-    const entries = $7.derived(() => {
+    const entries = $6.derived(() => {
       if (!isObject() || tooDeep())
         return [];
       if (isArray()) {
@@ -302,9 +284,9 @@ function _json_viewer_node($$renderer, $$props) {
       }
       return Object.entries(value);
     });
-    const itemCount = $7.derived(() => entries().length);
-    const collectionLabel = $7.derived(() => `${isArray() ? "array" : "object"}, ${itemCount()} ${itemCount() === 1 ? "item" : "items"}`);
-    const toggleLabel = $7.derived(() => keyName === undefined ? collectionLabel() : `${keyName}: ${collectionLabel()}`);
+    const itemCount = $6.derived(() => entries().length);
+    const collectionLabel = $6.derived(() => `${isArray() ? "array" : "object"}, ${itemCount()} ${itemCount() === 1 ? "item" : "items"}`);
+    const toggleLabel = $6.derived(() => keyName === undefined ? collectionLabel() : `${keyName}: ${collectionLabel()}`);
     function valueClass(v) {
       if (v === null)
         return "null";
@@ -318,68 +300,70 @@ function _json_viewer_node($$renderer, $$props) {
     }
     if (isObject() && !tooDeep()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<span${$7.attr_class($7.clsx(classNames("cinder-json-viewer__node")))}><button type="button" class="cinder-json-viewer__toggle"${$7.attr("aria-expanded", !collapsed)}${$7.attr("aria-label", toggleLabel())}>`);
+      $$renderer2.push(`<span${$6.attr_class($6.clsx(classNames("cinder-json-viewer__node")))} role="treeitem"${$6.attr("aria-expanded", !collapsed)}${$6.attr("aria-label", toggleLabel())}${$6.attr("aria-level", depth + 1)}${$6.attr("aria-posinset", position)}${$6.attr("aria-setsize", setSize)}${$6.attr("tabindex", root ? 0 : -1)}><button type="button" class="cinder-json-viewer__toggle"${$6.attr("aria-label", toggleLabel())} tabindex="-1">`);
       if (keyName !== undefined) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<span class="cinder-json-viewer__key">${$7.escape(keyName)}:</span>`);
+        $$renderer2.push(`<span class="cinder-json-viewer__key">${$6.escape(keyName)}:</span>`);
       } else {
         $$renderer2.push("<!--[-1-->");
       }
-      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__caret"${$7.attr("data-cinder-collapsed", collapsed || undefined)}></span> <span class="cinder-json-viewer__brace">${$7.escape(isArray() ? "[" : "{")}</span> `);
+      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__caret"${$6.attr("data-cinder-collapsed", collapsed || undefined)}></span> <span class="cinder-json-viewer__brace">${$6.escape(isArray() ? "[" : "{")}</span> `);
       if (collapsed) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<span class="cinder-json-viewer__summary">${$7.escape(itemCount())} ${$7.escape(itemCount() === 1 ? "item" : "items")}</span> <span class="cinder-json-viewer__brace">${$7.escape(isArray() ? "]" : "}")}</span>`);
+        $$renderer2.push(`<span class="cinder-json-viewer__summary">${$6.escape(itemCount())} ${$6.escape(itemCount() === 1 ? "item" : "items")}</span> <span class="cinder-json-viewer__brace">${$6.escape(isArray() ? "]" : "}")}</span>`);
       } else {
         $$renderer2.push("<!--[-1-->");
       }
       $$renderer2.push(`<!--]--></button> `);
       if (!collapsed) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<ul class="cinder-json-viewer__children"><!--[-->`);
-        const each_array = $7.ensure_array_like(entries());
-        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
-          let [k, v] = each_array[$$index];
-          $$renderer2.push(`<li>`);
+        $$renderer2.push(`<ul class="cinder-json-viewer__children" role="group"><!--[-->`);
+        const each_array = $6.ensure_array_like(entries());
+        for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+          let [k, v] = each_array[index];
+          $$renderer2.push(`<li role="none">`);
           _json_viewer_node($$renderer2, {
             value: v,
             keyName: k,
             depth: depth + 1,
             initialDepth,
-            maxDepth
+            maxDepth,
+            position: index + 1,
+            setSize: entries().length
           });
           $$renderer2.push(`<!----></li>`);
         }
-        $$renderer2.push(`<!--]--></ul> <span class="cinder-json-viewer__brace">${$7.escape(isArray() ? "]" : "}")}</span>`);
+        $$renderer2.push(`<!--]--></ul> <span class="cinder-json-viewer__brace">${$6.escape(isArray() ? "]" : "}")}</span>`);
       } else {
         $$renderer2.push("<!--[-1-->");
       }
       $$renderer2.push(`<!--]--></span>`);
     } else if (isObject() && tooDeep()) {
       $$renderer2.push("<!--[1-->");
-      $$renderer2.push(`<span class="cinder-json-viewer__node">`);
+      $$renderer2.push(`<span class="cinder-json-viewer__node" role="treeitem"${$6.attr("tabindex", root ? 0 : -1)}${$6.attr("aria-level", depth + 1)}${$6.attr("aria-posinset", position)}${$6.attr("aria-setsize", setSize)}>`);
       if (keyName !== undefined) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<span class="cinder-json-viewer__key">${$7.escape(keyName)}:</span>`);
+        $$renderer2.push(`<span class="cinder-json-viewer__key">${$6.escape(keyName)}:</span>`);
       } else {
         $$renderer2.push("<!--[-1-->");
       }
       $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__too-deep">…</span></span>`);
     } else {
       $$renderer2.push("<!--[-1-->");
-      $$renderer2.push(`<span class="cinder-json-viewer__node">`);
+      $$renderer2.push(`<span class="cinder-json-viewer__node" role="treeitem"${$6.attr("tabindex", root ? 0 : -1)}${$6.attr("aria-level", depth + 1)}${$6.attr("aria-posinset", position)}${$6.attr("aria-setsize", setSize)}>`);
       if (keyName !== undefined) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<span class="cinder-json-viewer__key">${$7.escape(keyName)}:</span>`);
+        $$renderer2.push(`<span class="cinder-json-viewer__key">${$6.escape(keyName)}:</span>`);
       } else {
         $$renderer2.push("<!--[-1-->");
       }
-      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__value"${$7.attr("data-cinder-type", valueClass(value))}>`);
+      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__value"${$6.attr("data-cinder-type", valueClass(value))}>`);
       if (typeof value === "string") {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`"${$7.escape(value)}"`);
+        $$renderer2.push(`"${$6.escape(value)}"`);
       } else {
         $$renderer2.push("<!--[-1-->");
-        $$renderer2.push(`${$7.escape(String(value))}`);
+        $$renderer2.push(`${$6.escape(String(value))}`);
       }
       $$renderer2.push(`<!--]--></span></span>`);
     }
@@ -397,7 +381,7 @@ function Json_viewer($$renderer, $$props) {
       maxBytes = 1048576,
       class: className
     } = $$props;
-    const serialized = $8.derived(() => {
+    const serialized = $7.derived(() => {
       try {
         const json = JSON.stringify(value);
         if (typeof json !== "string")
@@ -407,28 +391,214 @@ function Json_viewer($$renderer, $$props) {
         return { ok: false };
       }
     });
-    const unserializable = $8.derived(() => !serialized().ok);
-    const tooLarge = $8.derived(() => serialized().ok && serialized().size > maxBytes);
-    $$renderer2.push(`<div${$8.attr_class($8.clsx(classNames("cinder-json-viewer", className)))}>`);
+    const unserializable = $7.derived(() => !serialized().ok);
+    const tooLarge = $7.derived(() => serialized().ok && 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(index) {
+        const item = items[index];
+        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();
+      }
+    }
+    $$renderer2.push(`<div${$7.attr_class($7.clsx(classNames("cinder-json-viewer", className)))}>`);
     if (unserializable()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<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>`);
     } else if (tooLarge()) {
       $$renderer2.push("<!--[1-->");
-      $$renderer2.push(`<div class="cinder-json-viewer__fallback" role="status"><p>Payload too large to render (~${$8.escape(Math.round((serialized().ok ? serialized().size : 0) / 1024))} KB; cap
-        is ${$8.escape(Math.round(maxBytes / 1024))} KB).</p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
+      $$renderer2.push(`<div class="cinder-json-viewer__fallback" role="status"><p>Payload too large to render (~${$7.escape(Math.round((serialized().ok ? serialized().size : 0) / 1024))} KB; cap
+        is ${$7.escape(Math.round(maxBytes / 1024))} KB).</p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
     } else {
       $$renderer2.push("<!--[-1-->");
-      _json_viewer_node($$renderer2, { value, depth: 0, initialDepth, maxDepth });
+      $$renderer2.push(`<div role="tree" aria-label="JSON tree" tabindex="-1">`);
+      _json_viewer_node($$renderer2, {
+        value,
+        depth: 0,
+        initialDepth,
+        maxDepth,
+        position: 1,
+        setSize: 1,
+        root: true
+      });
+      $$renderer2.push(`<!----></div>`);
     }
     $$renderer2.push(`<!--]--></div>`);
   });
 }
 
+// src/components/status-dot/status-dot.svelte
+import * as $8 from "svelte/internal/server";
+function Status_dot($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const connectionStatusMap = {
+      connected: "online",
+      connecting: "warning",
+      disconnected: "offline",
+      error: "danger"
+    };
+    const connectionLabels = {
+      connected: "Connected",
+      connecting: "Connecting",
+      disconnected: "Disconnected",
+      error: "Error"
+    };
+    let {
+      status,
+      connectionState,
+      label,
+      live,
+      showLabel = true,
+      size = "md",
+      class: className,
+      "aria-label": ariaLabel,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const normalizedAriaLabel = $8.derived(() => ariaLabel?.trim() ? ariaLabel.trim() : undefined);
+    const resolvedStatus = $8.derived(() => status ?? (connectionState === undefined ? "neutral" : connectionStatusMap[connectionState]));
+    const resolvedLive = $8.derived(() => live ?? connectionState !== undefined);
+    const normalizedLabel = $8.derived(() => label?.trim() ? label.trim() : connectionState === undefined ? undefined : connectionLabels[connectionState]);
+    const hasVisibleLabel = $8.derived(() => showLabel && normalizedLabel() !== undefined);
+    const resolvedAriaLabel = $8.derived(() => normalizedAriaLabel() ?? normalizedLabel() ?? resolvedStatus());
+    const visibleLabelIsLiveDuplicate = $8.derived(() => resolvedLive() && normalizedLabel() !== undefined && resolvedAriaLabel() !== normalizedLabel());
+    const needsHiddenLiveLabel = $8.derived(() => resolvedLive() && (!hasVisibleLabel() || visibleLabelIsLiveDuplicate()));
+    $$renderer2.push(`<span${$8.attributes({
+      ...rest,
+      class: $8.clsx(classNames("cinder-status-dot", className)),
+      "data-cinder-status": resolvedStatus(),
+      "data-cinder-state": connectionState,
+      "data-cinder-size": size,
+      role: resolvedLive() ? "status" : "img",
+      "aria-live": resolvedLive() ? "polite" : undefined,
+      "aria-atomic": resolvedLive() ? "true" : undefined,
+      "aria-label": resolvedLive() ? undefined : resolvedAriaLabel()
+    })}><span class="cinder-status-dot__indicator" aria-hidden="true"></span> `);
+    if (hasVisibleLabel()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-status-dot__label"${$8.attr("aria-hidden", visibleLabelIsLiveDuplicate() ? "true" : undefined)}>${$8.escape(normalizedLabel())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (needsHiddenLiveLabel()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-sr-only">${$8.escape(resolvedAriaLabel())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></span>`);
+  });
+}
+
+// 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 index = 0;index < value.length; index += 1) {
+    hash = Math.imul(31, hash) + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+
 // src/components/event-stream-viewer/event-stream-viewer.svelte
 function Event_stream_viewer($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const instanceId = $9.props_id($$renderer2);
+    function isValidSequence(value) {
+      return Number.isInteger(value);
+    }
     let {
       events,
       connectionState,
@@ -436,6 +606,7 @@ function Event_stream_viewer($$renderer, $$props) {
       truncated = false,
       loading = false,
       label = "Event stream",
+      detectSequenceGaps = false,
       oncopyvisible,
       onfilter,
       filterQuery = "",
@@ -444,21 +615,83 @@ function Event_stream_viewer($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    let expandedIds = new Set;
+    const expandedIds = new SvelteSet;
     let scrollContainerEl = null;
     let programmaticScroll = false;
     let liveMessage = "";
     const isEmpty = $9.derived(() => !loading && events.length === 0);
     const eventCount = $9.derived(() => events.length);
     const latestEvent = $9.derived(() => events.at(-1));
-    function toggleDetails(id) {
-      const next = new Set(expandedIds);
-      if (next.has(id)) {
-        next.delete(id);
+    const renderedEntries = $9.derived(() => {
+      const entries = [];
+      const keyOccurrences = new Map;
+      let previousSequence;
+      let previousEventId;
+      const shouldDetectSequenceGaps = detectSequenceGaps && filterQuery.trim() === "";
+      for (const entry of 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 {
-        next.add(id);
+        expandedIds.add(rowKey);
       }
-      expandedIds = next;
+    }
+    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 = [];
@@ -475,13 +708,28 @@ function Event_stream_viewer($$renderer, $$props) {
       }
       return parts.join(" ");
     }
+    function formatReconnectedBoundaryAsText(boundary) {
+      const timeLabel = boundary.timestamp ?? boundary.datetime;
+      const markerText = formatReconnectedBoundaryLabel(boundary);
+      return timeLabel ? `[${timeLabel}] ${markerText}` : markerText;
+    }
+    function formatRenderedEntryAsText(entry) {
+      if (entry.type === "event")
+        return formatEventAsText(entry.event);
+      if (entry.type === "reconnected")
+        return formatReconnectedBoundaryAsText(entry.boundary);
+      return entry.label;
+    }
+    function formatCopyVisibleAnnouncement(entryCount) {
+      return `${entryCount} stream ${entryCount === 1 ? "entry" : "entries"} sent to copy handler`;
+    }
     function handleCopyVisible() {
-      const text = events.map(formatEventAsText).join(`
+      const text = renderedEntries().map(formatRenderedEntryAsText).join(`
 `);
       if (!oncopyvisible)
         return;
       oncopyvisible(text);
-      liveMessage = `${events.length} event${events.length !== 1 ? "s" : ""} sent to copy handler`;
+      liveMessage = formatCopyVisibleAnnouncement(renderedEntries().length);
       setTimeout(() => {
         liveMessage = "";
       }, 2000);
@@ -519,7 +767,7 @@ function Event_stream_viewer($$renderer, $$props) {
     })}><div class="cinder-event-stream-viewer__toolbar" role="group" aria-label="Stream controls"><div class="cinder-event-stream-viewer__toolbar-start">`);
     if (connectionState) {
       $$renderer2.push("<!--[0-->");
-      Connection_indicator($$renderer2, { state: connectionState });
+      Status_dot($$renderer2, { connectionState });
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -564,49 +812,68 @@ function Event_stream_viewer($$renderer, $$props) {
       } else {
         $$renderer2.push("<!--[-1-->");
         $$renderer2.push(`<ol class="cinder-event-stream-viewer__list"><!--[-->`);
-        const each_array = $9.ensure_array_like(events);
-        for (let eventIndex = 0, $$length = each_array.length;eventIndex < $$length; eventIndex++) {
-          let event = each_array[eventIndex];
-          const isExpanded = expandedIds.has(event.id);
-          const detailsId = `${instanceId}-details-${eventIndex}`;
-          $$renderer2.push(`<li class="cinder-event-stream-viewer__event"${$9.attr("data-cinder-severity", event.severity ?? "info")}><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"${$9.attr("datetime", event.datetime)}${$9.attr("title", event.datetime)}>${$9.escape(event.timestamp ?? event.datetime)}</time> `);
-          if (event.severity) {
-            $$renderer2.push("<!--[0-->");
-            $$renderer2.push(`<span class="cinder-event-stream-viewer__event-severity"${$9.attr("aria-label", `Severity: ${event.severity}`)}>${$9.escape(event.severity)}</span>`);
-          } else {
-            $$renderer2.push("<!--[-1-->");
-          }
-          $$renderer2.push(`<!--]--> `);
-          if (event.source) {
-            $$renderer2.push("<!--[0-->");
-            $$renderer2.push(`<span class="cinder-event-stream-viewer__event-source">${$9.escape(event.source)}</span>`);
-          } else {
-            $$renderer2.push("<!--[-1-->");
-          }
-          $$renderer2.push(`<!--]--></div> <p class="cinder-event-stream-viewer__event-summary">${$9.escape(event.summary)}</p> `);
-          if (event.details !== undefined) {
+        const each_array = $9.ensure_array_like(renderedEntries());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let entry = each_array[$$index];
+          if (entry.type === "reconnected") {
             $$renderer2.push("<!--[0-->");
-            $$renderer2.push(`<div class="cinder-event-stream-viewer__event-details-section"><button type="button" class="cinder-event-stream-viewer__details-toggle"${$9.attr("aria-expanded", isExpanded)}${$9.attr("aria-controls", isExpanded ? detailsId : undefined)}>${$9.escape(isExpanded ? "Hide details" : "Show details")}</button> `);
-            if (isExpanded) {
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__boundary-marker"><div class="cinder-event-stream-viewer__marker-content" role="separator"${$9.attr("aria-label", entry.label)}>`);
+            if (entry.boundary.datetime) {
               $$renderer2.push("<!--[0-->");
-              $$renderer2.push(`<div${$9.attr("id", detailsId)} class="cinder-event-stream-viewer__event-details">`);
-              Json_viewer($$renderer2, { value: event.details });
-              $$renderer2.push(`<!----></div>`);
+              $$renderer2.push(`<time class="cinder-event-stream-viewer__marker-time"${$9.attr("datetime", entry.boundary.datetime)}${$9.attr("title", entry.boundary.datetime)}>${$9.escape(entry.boundary.timestamp ?? entry.boundary.datetime)}</time>`);
+            } else if (entry.boundary.timestamp) {
+              $$renderer2.push("<!--[1-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__marker-time">${$9.escape(entry.boundary.timestamp)}</span>`);
             } else {
               $$renderer2.push("<!--[-1-->");
             }
-            $$renderer2.push(`<!--]--></div>`);
+            $$renderer2.push(`<!--]--> <span>${$9.escape(entry.label)}</span></div></li>`);
+          } else if (entry.type === "sequence-gap") {
+            $$renderer2.push("<!--[1-->");
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__sequence-gap-marker"><div class="cinder-event-stream-viewer__marker-content" role="note"${$9.attr("aria-label", entry.label)}><span>${$9.escape(entry.label)}</span></div></li>`);
           } else {
             $$renderer2.push("<!--[-1-->");
+            const event = entry.event;
+            const isExpanded = expandedIds.has(entry.key);
+            const detailsId = entry.detailsId;
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__event"${$9.attr("data-cinder-severity", event.severity ?? "info")}><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"${$9.attr("datetime", event.datetime)}${$9.attr("title", event.datetime)}>${$9.escape(event.timestamp ?? event.datetime)}</time> `);
+            if (event.severity) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__event-severity"${$9.attr("aria-label", `Severity: ${event.severity}`)}>${$9.escape(event.severity)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--> `);
+            if (event.source) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__event-source">${$9.escape(event.source)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div> <p class="cinder-event-stream-viewer__event-summary">${$9.escape(event.summary)}</p> `);
+            if (event.details !== undefined) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<div class="cinder-event-stream-viewer__event-details-section"><button type="button" class="cinder-event-stream-viewer__details-toggle"${$9.attr("aria-expanded", isExpanded)}${$9.attr("aria-controls", detailsId)}${$9.attr("aria-label", `${isExpanded ? "Hide" : "Show"} details for ${event.severity ? `${event.severity}: ` : ""}${event.summary}`)}>${$9.escape(isExpanded ? "Hide details" : "Show details")}</button> <div${$9.attr("id", detailsId)} class="cinder-event-stream-viewer__event-details"${$9.attr("hidden", !isExpanded)}>`);
+              if (isExpanded) {
+                $$renderer2.push("<!--[0-->");
+                Json_viewer($$renderer2, { value: event.details });
+              } else {
+                $$renderer2.push("<!--[-1-->");
+              }
+              $$renderer2.push(`<!--]--></div></div>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div> <div class="cinder-event-stream-viewer__event-actions">`);
+            Copy_button($$renderer2, {
+              value: formatEventAsText(event),
+              label: `Copy event: ${event.summary}`,
+              copiedLabel: "Event copied",
+              class: "cinder-event-stream-viewer__copy-event-button"
+            });
+            $$renderer2.push(`<!----></div></li>`);
           }
-          $$renderer2.push(`<!--]--></div> <div class="cinder-event-stream-viewer__event-actions">`);
-          Copy_button($$renderer2, {
-            value: formatEventAsText(event),
-            label: `Copy event: ${event.summary}`,
-            copiedLabel: "Event copied",
-            class: "cinder-event-stream-viewer__copy-event-button"
-          });
-          $$renderer2.push(`<!----></div></li>`);
+          $$renderer2.push(`<!--]-->`);
         }
         $$renderer2.push(`<!--]--></ol>`);
       }
@@ -624,4 +891,4 @@ export {
   Event_stream_viewer as EventStreamViewer
 };
 
-//# debugId=15970C8135C1CDAB64756E2164756E21
+//# debugId=034E4708D00366EC64756E2164756E21