@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/dropdown-item/index.js

@@ -46,11 +46,13 @@ var root_1 = $.from_html(`<a><!></a>`);
 var root_3 = $.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $.push($$props, true);
-  let variant = $.prop($$props, "variant", 3, "default"), inset = $.prop($$props, "inset", 3, false), closeOnSelect = $.prop($$props, "closeOnSelect", 3, true), rest = $.rest_props($$props, [
+  let variant = $.prop($$props, "variant", 3, "default"), itemRole = $.prop($$props, "itemRole", 3, "menuitem"), checked = $.prop($$props, "checked", 3, false), inset = $.prop($$props, "inset", 3, false), closeOnSelect = $.prop($$props, "closeOnSelect", 3, true), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
+    "itemRole",
+    "checked",
     "inset",
     "disabled",
     "closeOnSelect",
@@ -92,18 +94,20 @@ function Dropdown_item($$anchor, $$props) {
       return;
     event.currentTarget.click();
   }
-  const anchorAttributes = rest;
-  const buttonAttributes = rest;
+  const anchorAttributes = $.derived(() => rest);
+  const buttonAttributes = $.derived(() => rest);
   const buttonType = $.derived(() => $$props.type ?? "button");
+  const ariaChecked = $.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $.comment();
   var node = $.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
       var a = root_1();
       $.attribute_effect(a, () => ({
-        ...anchorAttributes,
+        ...$.get(anchorAttributes),
         href: $$props.href,
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $.get(ariaChecked),
         class: $.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -131,9 +135,10 @@ function Dropdown_item($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       var button = root_3();
       $.attribute_effect(button, () => ({
-        ...buttonAttributes,
+        ...$.get(buttonAttributes),
         type: $.get(buttonType),
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $.get(ariaChecked),
         class: $.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -176,4 +181,4 @@ export {
   Dropdown_item as DropdownItem
 };
 
-//# debugId=7F41ED631A8DA39F64756E2164756E21
+//# debugId=063E0BA05B36ED5964756E2164756E21

package/dist/components/dropdown-menu/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2187,35 +2188,246 @@ function createAnchoredOverlay(options) {
   };
 }
 
-// src/components/dropdown/dropdown.context.ts
+// src/_internal/locale-context.ts
 import { createContext } from "svelte";
-var [getDropdownContextStrict, setDropdownContext] = createContext();
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/locale-context.ts
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
+// src/_internal/text-direction.ts
+function resolveTextDirection(element, fallback) {
+  let currentElement = element ?? null;
+  let documentDirection;
+  let styledDirectionElement = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute("dir")?.toLowerCase();
+    if (direction === "rtl" || direction === "ltr") {
+      if (typeof getComputedStyle === "function" && styledDirectionElement) {
+        const styledDirection2 = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection2 === "rtl" || styledDirection2 === "ltr")
+          return styledDirection2;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === "auto" && typeof getComputedStyle === "function") {
+      const computedDirection2 = getComputedStyle(currentElement).direction;
+      if (computedDirection2 === "rtl" || computedDirection2 === "ltr")
+        return computedDirection2;
+    }
+    const styledDirection = currentElement.style.direction;
+    if (!styledDirectionElement && (styledDirection === "rtl" || styledDirection === "ltr")) {
+      styledDirectionElement = currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  if (typeof getComputedStyle === "function" && styledDirectionElement) {
+    const direction = getComputedStyle(styledDirectionElement).direction;
+    if (direction === "rtl" || direction === "ltr")
+      return direction;
+  }
+  const computedDirection = readComputedTextDirection(element);
+  const rootComputedDirection = readComputedTextDirection(element?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection)
+    return computedDirection;
+  if (computedDirection && fallback && computedDirection !== fallback && hasDirectionStylingHint(element)) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === "rtl")
+    return computedDirection;
+  if (fallback)
+    return fallback;
+  if (documentDirection)
+    return documentDirection;
+  return;
+}
+function readComputedTextDirection(element) {
+  if (!element || typeof getComputedStyle !== "function")
+    return;
+  const direction = getComputedStyle(element).direction;
+  return direction === "rtl" || direction === "ltr" ? direction : undefined;
+}
+function hasDirectionStylingHint(element) {
+  let currentElement = element?.parentElement;
+  while (currentElement && currentElement !== currentElement.ownerDocument.documentElement) {
+    if (currentElement.style.direction)
+      return true;
+    if (matchesDirectionStyleRule(currentElement))
+      return true;
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function matchesDirectionStyleRule(element) {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules))
+      return true;
+  }
+  return false;
+}
+function matchesDirectionStyleRuleList(element, rules) {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules2 = readNestedCssRules(rule);
+        if (nestedRules2 && matchesDirectionStyleRuleList(element, nestedRules2))
+          return true;
+        continue;
+      }
+      try {
+        if (element.matches(rule.selectorText))
+          return true;
+      } catch {
+        continue;
+      }
+    }
+    const nestedRules = readNestedCssRules(rule);
+    if (nestedRules && isConditionalRuleActive(rule) && matchesDirectionStyleRuleList(element, nestedRules)) {
+      return true;
+    }
+  }
+  return false;
+}
+function readNestedCssRules(rule) {
+  if (!("cssRules" in rule))
+    return;
+  try {
+    const nestedRules = Reflect.get(rule, "cssRules");
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return;
+  }
+}
+function isCssRuleCollection(value) {
+  if (typeof CSSRuleList !== "undefined" && value instanceof CSSRuleList)
+    return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+function isCssRule(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "cssText") === "string" && typeof Reflect.get(value, "type") === "number";
+}
+function isCssStyleRule(rule) {
+  return typeof Reflect.get(rule, "selectorText") === "string" && typeof Reflect.get(rule, "style") === "object" && Reflect.get(rule, "style") !== null;
+}
+function isConditionalRuleActive(rule) {
+  const conditionText = Reflect.get(rule, "conditionText");
+  if (typeof conditionText !== "string" || !conditionText.trim())
+    return true;
+  if (isMediaRule(rule) && typeof matchMedia === "function") {
+    return matchMedia(conditionText).matches;
+  }
+  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports(conditionText);
+  }
+  return true;
+}
+function isMediaRule(rule) {
+  return typeof Reflect.get(rule, "media") === "object" && Reflect.get(rule, "media") !== null;
+}
+function isSupportsRule(rule) {
+  return rule.constructor.name === "CSSSupportsRule" || Reflect.get(rule, "type") === 12;
+}
+function observeTextDirection(element, onChange) {
+  if (!element || typeof MutationObserver === "undefined")
+    return;
+  const observedElement = element;
+  const observer = new MutationObserver((mutations) => {
+    if (mutations.some((mutation) => mutation.type === "attributes" && mutation.attributeName === "dir")) {
+      observeDirectionChain();
+    }
+    onChange();
+  });
+  function observeDirectionChain() {
+    observer.disconnect();
+    let currentElement = observedElement;
+    while (currentElement) {
+      const isAutoDirection = currentElement.getAttribute("dir")?.toLowerCase() === "auto";
+      observer.observe(currentElement, {
+        attributes: true,
+        attributeFilter: ["dir", "style", "class"],
+        childList: isAutoDirection,
+        characterData: isAutoDirection,
+        subtree: isAutoDirection
+      });
+      currentElement = currentElement.parentElement;
+    }
+  }
+  observeDirectionChain();
+  return () => observer.disconnect();
+}
+
+// src/components/dropdown/dropdown.context.ts
+import { createContext as createContext2 } from "svelte";
+var [getDropdownContextStrict, setDropdownContext] = createContext2();
 var getDropdownContext = getDropdownContextStrict;
-var [getDropdownRegisterStrict, setDropdownRegister] = createContext();
+var [getDropdownRegisterStrict, setDropdownRegister] = createContext2();
 var getDropdownRegister = getDropdownRegisterStrict;
-var [getDropdownRegisterTriggerStrict, setDropdownRegisterTrigger] = createContext();
+var [getDropdownRegisterTriggerStrict, setDropdownRegisterTrigger] = createContext2();
 var getDropdownRegisterTrigger = getDropdownRegisterTriggerStrict;
-var [getDropdownSetOpenStrict, setDropdownSetOpen] = createContext();
+var [getDropdownSetOpenStrict, setDropdownSetOpen] = createContext2();
 var getDropdownSetOpen = getDropdownSetOpenStrict;
 
 // src/components/dropdown-menu/dropdown-menu.svelte
 var root_1 = $4.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
   $4.push($$props, true);
-  let rest = $4.rest_props($$props, ["$$slots", "$$events", "$$legacy", "class", "children"]);
+  let rest = $4.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "class",
+    "children",
+    "dir"
+  ]);
   const context = getDropdownContext();
   const registerMenu = getDropdownRegister();
   const setOpen = getDropdownSetOpen();
+  const localeContext = getLocaleContext();
+  let directionRevision = $4.state(0);
+  const resolvedDirection = $4.derived(() => {
+    $4.get(directionRevision);
+    if ($$props.dir === "auto") {
+      return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? $$props.dir;
+    }
+    return $$props.dir ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+  });
+  const fallbackAnchorElement = $4.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $4.state(null);
   let focusedFallbackOpen = false;
   const anchoredFallback = createAnchoredOverlay({
-    open: () => context.isOpen && !context.supportsPopover && Boolean(context.anchorElement),
-    anchor: () => context.anchorElement,
+    open: () => context.isOpen && !context.supportsPopover && Boolean($4.get(fallbackAnchorElement)),
+    anchor: () => $4.get(fallbackAnchorElement),
     panel: () => $4.get(menuElement),
     placement: () => context.fallbackPlacement ?? "bottom-end",
     offset: () => 4,
     widthMode: () => context.widthMode ?? "menu"
   });
+  const fallbackPositionStyle = $4.derived(() => context.fallbackPositionStyle ?? ($4.get(fallbackAnchorElement) ? anchoredFallback.positionStyle : undefined));
+  const fallbackPositionReady = $4.derived(() => context.fallbackPositionReady ?? ($4.get(fallbackAnchorElement) ? anchoredFallback.positionReady : undefined));
   const fallbackPortalAttachment = createPortalAttachment({
     target: () => typeof document === "undefined" ? null : document.body,
     source: () => context.anchorElement,
@@ -2226,6 +2438,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($4.get(menuElement));
     return () => registerMenu(null);
   });
+  $4.user_effect(() => {
+    if ($$props.dir && $$props.dir !== "auto")
+      return;
+    return observeTextDirection(context.anchorElement, () => {
+      $4.set(directionRevision, $4.get(directionRevision) + 1);
+    });
+  });
   $4.user_effect(() => {
     if (context.supportsPopover || !context.isOpen) {
       focusedFallbackOpen = false;
@@ -2241,7 +2460,7 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$4.get(menuElement))
       return [];
-    return Array.from($4.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $4.get(menuElement));
+    return Array.from($4.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $4.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -2304,14 +2523,16 @@ function Dropdown_menu($$anchor, $$props) {
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
         class: $0,
-        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : context.anchorElement ? anchoredFallback.positionStyle : undefined,
+        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : $4.get(fallbackPositionStyle),
         role: "menu",
         "aria-orientation": "vertical",
-        "data-cinder-position-ready": !context.supportsPopover && context.anchorElement ? anchoredFallback.positionReady : undefined,
+        "data-cinder-position-ready": !context.supportsPopover && $4.get(fallbackPositionReady) !== undefined ? $4.get(fallbackPositionReady) : undefined,
         tabindex: -1,
         onkeydown: handleKeydown,
         ontoggle: context.supportsPopover ? handleToggle : undefined,
-        ...rest
+        ...rest,
+        dir: $4.get(resolvedDirection),
+        "data-cinder-explicit-direction": $4.get(resolvedDirection) ? "true" : undefined
       }), [
         () => classNames("cinder-_floating-surface", "cinder-dropdown-menu", $$props.class)
       ]);
@@ -2331,6 +2552,7 @@ function Dropdown_menu($$anchor, $$props) {
       $4.reset(div);
       $4.bind_this(div, ($$value) => $4.set(menuElement, $$value), () => $4.get(menuElement));
       $4.attach(div, () => fallbackPortalAttachment);
+      $4.template_effect(() => div.dir = div.dir);
       $4.append($$anchor2, div);
     };
     $4.if(node, ($$render) => {
@@ -2349,4 +2571,4 @@ export {
   Dropdown_menu as DropdownMenu
 };
 
-//# debugId=A5A491066071B6A064756E2164756E21
+//# debugId=8C171C0DDAD76F3C64756E2164756E21

package/dist/components/dropdown-trigger/index.js

@@ -58,11 +58,10 @@ function Dropdown_trigger($$anchor, $$props) {
   const context = getDropdownContext();
   const registerTrigger = getDropdownRegisterTrigger();
   const setOpen = getDropdownSetOpen();
-  let triggerElement = $.state(null);
-  $.user_effect(() => {
-    registerTrigger($.get(triggerElement));
+  function attachTrigger(node) {
+    registerTrigger(node);
     return () => registerTrigger(null);
-  });
+  }
   function handleClick(event) {
     if (typeof $$props.onclick === "function") {
       $$props.onclick(event);
@@ -83,32 +82,32 @@ function Dropdown_trigger($$anchor, $$props) {
     onclick: handleClick,
     ...rest
   }), [() => classNames("cinder-dropdown-trigger", $$props.class)]);
-  var node = $.child(button);
+  var node_1 = $.child(button);
   {
     var consequent = ($$anchor2) => {
       var fragment = $.comment();
-      var node_1 = $.first_child(fragment);
-      $.snippet(node_1, () => $$props.children);
+      var node_2 = $.first_child(fragment);
+      $.snippet(node_2, () => $$props.children);
       $.append($$anchor2, fragment);
     };
-    $.if(node, ($$render) => {
+    $.if(node_1, ($$render) => {
       if ($$props.children)
         $$render(consequent);
     });
   }
-  var node_2 = $.sibling(node, 2);
+  var node_3 = $.sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var svg = root_2();
       $.append($$anchor2, svg);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if (showCaret())
         $$render(consequent_1);
     });
   }
   $.reset(button);
-  $.bind_this(button, ($$value) => $.set(triggerElement, $$value), () => $.get(triggerElement));
+  $.attach(button, () => attachTrigger);
   $.append($$anchor, button);
   $.pop();
 }
@@ -120,4 +119,4 @@ export {
   Dropdown_trigger as DropdownTrigger
 };
 
-//# debugId=EED7AC8B9F875D7464756E2164756E21
+//# debugId=5325E488A3B099FD64756E2164756E21

package/dist/components/event-stream-viewer/event-stream-viewer-keys.d.ts

@@ -0,0 +1,6 @@
+import type { StreamEvent, StreamReconnectedBoundary } from './event-stream-viewer.types.ts';
+export declare function streamEventKey(event: StreamEvent): string;
+export declare function reconnectedBoundaryKey(boundary: StreamReconnectedBoundary): string;
+export declare function sequenceGapKey(previousEventId: string | undefined, event: StreamEvent, expectedSequence: number, actualSequence: number): string;
+export declare function uniqueRenderedKey(baseKey: string, occurrences: Map<string, number>): string;
+export declare function detailsIdForKey(instanceId: string, key: string): string;

package/dist/components/event-stream-viewer/event-stream-viewer.css

@@ -1,4 +1,11 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+/* Compound composition aggregation: EventStreamViewer renders these primitives
+ * internally, so `cinder/event-stream-viewer/styles` must include their styling
+ * when consumers import the component-specific style sidecar. Sibling paths
+ * mirror between `src/` and generated `dist/`. */
+@import '../copy-button/copy-button.css';
+@import '../json-viewer/json-viewer.css';
+@import '../status-dot/status-dot.css';
 
 @layer cinder.components {
   /* ========================================
@@ -241,6 +248,45 @@
     padding: var(--cinder-space-1) 0;
   }
 
+  .cinder-event-stream-viewer__boundary-marker,
+  .cinder-event-stream-viewer__sequence-gap-marker {
+    padding: var(--cinder-space-1) var(--cinder-space-3);
+    border-block-end: 1px solid var(--cinder-border-muted);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-event-stream-viewer__marker-content {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    color: var(--cinder-text-muted);
+    font-family: var(--cinder-font-sans);
+    font-size: var(--cinder-text-xs);
+    line-height: var(--cinder-leading-normal);
+  }
+
+  .cinder-event-stream-viewer__marker-content::before,
+  .cinder-event-stream-viewer__marker-content::after {
+    content: '';
+    flex: 1 1 auto;
+    block-size: 1px;
+    background: var(--cinder-border-muted);
+  }
+
+  .cinder-event-stream-viewer__boundary-marker .cinder-event-stream-viewer__marker-content {
+    color: var(--cinder-info);
+  }
+
+  .cinder-event-stream-viewer__sequence-gap-marker .cinder-event-stream-viewer__marker-content {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-event-stream-viewer__marker-time {
+    color: var(--cinder-text-muted);
+    font-family: var(--cinder-font-mono);
+    white-space: nowrap;
+  }
+
   /* ----------------------------------------
    * Individual event entry
    * -------------------------------------- */

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

@@ -26,10 +26,84 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
+    events: {
+      type: "array",
+      items: {
+        anyOf: [
+          {
+            type: "object",
+            properties: {
+              id: {
+                type: "string",
+                description: "Stable unique identifier used as the keyed list identity."
+              },
+              sequence: {
+                type: "integer",
+                description: "Optional monotonically increasing integer stream sequence used to detect missed events."
+              },
+              datetime: {
+                type: "string",
+                description: "Machine-readable ISO 8601 datetime string rendered into `<time datetime>`."
+              },
+              timestamp: {
+                type: "string",
+                description: 'Human-readable timestamp label (e.g. "12:04:32", "2m ago"). Falls back to `datetime`.'
+              },
+              severity: {
+                enum: ["debug", "info", "success", "warning", "error"],
+                description: "Severity tone that drives visual styling and the accessible label prefix."
+              },
+              source: {
+                type: "string",
+                description: "Origin label identifying which service, worker, or activity produced the event."
+              },
+              summary: {
+                type: "string",
+                description: "One-line summary of the event."
+              },
+              details: {
+                description: "Optional structured JSON payload. Rendered in a collapsible JsonViewer."
+              }
+            },
+            additionalProperties: false,
+            required: ["datetime", "id", "summary"]
+          },
+          {
+            type: "object",
+            properties: {
+              id: {
+                type: "string",
+                description: "Stable unique identifier used as the keyed list identity."
+              },
+              kind: {
+                const: "reconnected",
+                description: "Discriminator for reconnect boundary entries."
+              },
+              datetime: {
+                type: "string",
+                description: "Optional machine-readable ISO 8601 datetime string for the reconnect moment."
+              },
+              timestamp: {
+                type: "string",
+                description: "Optional human-readable timestamp label. Falls back to `datetime` when rendered."
+              },
+              replayedCount: {
+                type: "integer",
+                description: "Non-negative integer count of events replayed after the connection resumed.",
+                minimum: 0
+              }
+            },
+            additionalProperties: false,
+            required: ["id", "kind", "replayedCount"]
+          }
+        ]
+      },
+      description: "Events and additive boundary entries to render in chronological order, oldest first."
+    },
     connectionState: {
-      enum: ["connected", "connecting", "disconnected", "error"],
-      description: `Current connection state. When provided, renders a ConnectionIndicator in
-the toolbar. Omit when the stream has no live transport.`
+      enum: ["error", "connected", "connecting", "disconnected"],
+      description: `Current connection state. When provided, renders a StatusDot in the toolbar.
+Omit when the stream has no live transport.`
     },
     followLatest: {
       type: "boolean",
@@ -51,6 +125,10 @@ batch of events is in flight.`
       description: `Accessible label for the event list region. Required for accessibility.
 Defaults to "Event stream".`
     },
+    detectSequenceGaps: {
+      type: "boolean",
+      description: "Enables sequence-gap markers when `events` is the complete, unfiltered\nstream. Leave false for retained windows, severity-filtered subsets, search\nresults, or any other caller-trimmed event array."
+    },
     filterQuery: {
       type: "string",
       description: "Current filter query value, for controlled usage. Pairs with `onfilter`."
@@ -61,14 +139,9 @@ Defaults to "Event stream".`
     }
   },
   additionalProperties: false,
+  required: ["events"],
   metadata: {
     unsupportedProps: [
-      {
-        name: "events",
-        reason: "unknown-shape",
-        required: true,
-        description: "Events to render in chronological order, oldest first."
-      },
       {
         name: "oncopyvisible",
         reason: "function-or-snippet",
@@ -89,4 +162,4 @@ export {
   event_stream_viewer_schema_default as default
 };
 
-//# debugId=4EA9F99C03DD31B964756E2164756E21
+//# debugId=9D3F368F3D772D8A64756E2164756E21

package/dist/components/event-stream-viewer/event-stream-viewer.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
  * @cinder
  * @category data-display
- * @status beta
+ * @status stable
  * @purpose Dense append-only log of timestamped events with follow-latest scrolling, severity tones, expandable JSON details, and copy actions.
  * @tag log
  * @tag stream
@@ -10,9 +10,9 @@
  * @useWhen Showing an append-only diagnostic stream with filtering, copy, and structured detail expansion.
  * @avoidWhen Showing a social activity feed or notification timeline — use feed instead.
  * @avoidWhen Rendering paginated historical records with sorting — use data-table instead.
- * @related feed, timeline, json-viewer, connection-indicator, copy-button
+ * @related feed, timeline, json-viewer, status-dot, copy-button
  */
-export type { EventSeverity, EventStreamState, EventStreamViewerProps, StreamEvent, } from './event-stream-viewer.types.ts';
+export type { EventSeverity, EventStreamEntry, EventStreamSchemaDetailValue, EventStreamSchemaEntry, EventStreamSchemaEvent, EventStreamState, EventStreamViewerSchemaProps, EventStreamViewerProps, StreamEvent, StreamReconnectedBoundary, } from './event-stream-viewer.types.ts';
 import type { EventStreamViewerProps } from './event-stream-viewer.types.ts';
 declare const EventStreamViewer: import("svelte").Component<EventStreamViewerProps, {}, "followLatest">;
 type EventStreamViewer = ReturnType<typeof EventStreamViewer>;