@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/server/components/payload-inspector/index.js

@@ -0,0 +1,1322 @@
+import { createRequire } from "node:module";
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/payload-inspector/payload-inspector.svelte
+import * as $15 from "svelte/internal/server";
+
+// src/components/badge/badge.svelte
+import * as $ from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/badge/badge.svelte
+function Badge($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      variant = "neutral",
+      size = "md",
+      mono = false,
+      class: customClassName,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $$renderer2.push(`<span${$.attributes({
+      class: $.clsx(classNames("cinder-badge", customClassName)),
+      "data-cinder-variant": variant,
+      "data-cinder-size": size,
+      "data-cinder-mono": mono ? "" : undefined,
+      ...rest
+    })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></span>`);
+  });
+}
+
+// src/components/code-block/code-block.svelte
+import * as $7 from "svelte/internal/server";
+
+// ../../node_modules/esm-env/false.js
+var false_default = false;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/copy-button/copy-button.svelte
+import * as $6 from "svelte/internal/server";
+import { onDestroy } from "svelte";
+
+// ../../node_modules/lucide-svelte/dist/icons/check.svelte
+import * as $3 from "svelte/internal/server";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import * as $2 from "svelte/internal/server";
+
+// ../../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
+function Icon($$renderer, $$props) {
+  const $$sanitized_props = $2.sanitize_props($$props);
+  const $$restProps = $2.rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "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);
+    const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+      return Boolean(className) && array.indexOf(className) === index;
+    }).join(" ");
+    $$renderer2.push(`<svg${$2.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))
+    }, undefined, undefined, undefined, 3)}><!--[-->`);
+    const each_array = $2.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)}`);
+      });
+    }
+    $$renderer2.push(`<!--]--><!--[-->`);
+    $2.slot($$renderer2, $$props, "default", {}, null);
+    $$renderer2.push(`<!--]--></svg>`);
+    $2.bind_props($$props, {
+      name,
+      color,
+      size,
+      strokeWidth,
+      absoluteStrokeWidth,
+      iconNode
+    });
+  });
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/check.svelte
+function Check($$renderer, $$props) {
+  const $$sanitized_props = $3.sanitize_props($$props);
+  const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+  Icon($$renderer, $3.spread_props([
+    { name: "check" },
+    $$sanitized_props,
+    {
+      iconNode,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!--[-->`);
+        $3.slot($$renderer2, $$props, "default", {}, null);
+        $$renderer2.push(`<!--]-->`);
+      },
+      $$slots: { default: true }
+    }
+  ]));
+}
+// ../../node_modules/lucide-svelte/dist/icons/copy.svelte
+import * as $4 from "svelte/internal/server";
+function Copy($$renderer, $$props) {
+  const $$sanitized_props = $4.sanitize_props($$props);
+  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($$renderer, $4.spread_props([
+    { name: "copy" },
+    $$sanitized_props,
+    {
+      iconNode,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!--[-->`);
+        $4.slot($$renderer2, $$props, "default", {}, null);
+        $$renderer2.push(`<!--]-->`);
+      },
+      $$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 * as $5 from "svelte/internal/server";
+function _visually_hidden_live_region($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      message = "",
+      announcementSequence = 0,
+      priority = "polite",
+      class: className
+    } = $$props;
+    let rendered = "";
+    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>`);
+  });
+}
+
+// src/components/copy-button/copy-button.svelte
+function Copy_button($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      confirmDuration = 1500,
+      label,
+      copiedLabel,
+      iconOnly = false,
+      class: className,
+      children,
+      confirmation,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let copied = false;
+    let resetTimer;
+    const copiedAnnouncement = $6.derived(() => copied ? copiedLabel ?? "Copied" : "");
+    async function handleClick() {
+      const ok = await copyToClipboard(value);
+      if (!ok)
+        return;
+      copied = true;
+      if (resetTimer)
+        clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => {
+        copied = false;
+      }, confirmDuration);
+    }
+    onDestroy(() => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    });
+    $$renderer2.push(`<button${$6.attributes({
+      ...rest,
+      type: "button",
+      "data-cinder-copied": copied || undefined,
+      "aria-label": label ?? "Copy to clipboard",
+      class: $6.clsx(classNames("cinder-copy-button", className))
+    })}>`);
+    if (copied && confirmation) {
+      $$renderer2.push("<!--[0-->");
+      confirmation($$renderer2);
+      $$renderer2.push(`<!---->`);
+    } else if (copied && iconOnly) {
+      $$renderer2.push("<!--[1-->");
+      Check($$renderer2, { class: "icon-sm", "aria-hidden": "true" });
+    } else if (copied) {
+      $$renderer2.push("<!--[2-->");
+      $$renderer2.push(`Copied`);
+    } else if (children) {
+      $$renderer2.push("<!--[3-->");
+      children($$renderer2);
+      $$renderer2.push(`<!---->`);
+    } else if (iconOnly) {
+      $$renderer2.push("<!--[4-->");
+      Copy($$renderer2, { class: "icon-sm", "aria-hidden": "true" });
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`Copy`);
+    }
+    $$renderer2.push(`<!--]--></button> `);
+    _visually_hidden_live_region($$renderer2, { message: copiedAnnouncement() });
+    $$renderer2.push(`<!---->`);
+  });
+}
+
+// src/components/code-block/code-block.svelte
+function Code_block($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      code,
+      language,
+      highlight,
+      highlighter,
+      copyable = false,
+      class: className
+    } = $$props;
+    let highlighted = null;
+    function failed($$renderer3) {
+      $$renderer3.push(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code">${$7.escape(code)}</code></pre>`);
+    }
+    $$renderer2.push(`<div${$7.attr_class($7.clsx(classNames("cinder-code-block", className)))}>`);
+    if (language || copyable) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<header class="cinder-code-block__header">`);
+      if (language) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-code-block__language">${$7.escape(language)}</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (copyable) {
+        $$renderer2.push("<!--[0-->");
+        Copy_button($$renderer2, {
+          value: code,
+          class: "cinder-code-block__copy",
+          label: "Copy code",
+          copiedLabel: "Code copied",
+          iconOnly: true
+        });
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></header>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-code-block__viewport" tabindex="0">`);
+    $$renderer2.boundary({ failed }, ($$renderer3) => {
+      $$renderer3.push(`<!--[-->`);
+      {
+        if (highlighted !== null) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<div class="cinder-code-block__highlighted">${$7.html(highlighted)}</div>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code">${$7.escape(code)}</code></pre>`);
+        }
+        $$renderer3.push(`<!--]-->`);
+      }
+      $$renderer3.push(`<!--]-->`);
+    });
+    $$renderer2.push(`</div></div>`);
+  });
+}
+
+// src/components/description-list/description-list.svelte
+import * as $8 from "svelte/internal/server";
+function Description_list($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      items,
+      variant = "default",
+      class: className,
+      actions,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const duplicateKey = $8.derived(() => {
+      const seen = new Set;
+      for (const item of items) {
+        const key = item.id ?? item.term;
+        if (seen.has(key))
+          return key;
+        seen.add(key);
+      }
+      return;
+    });
+    let lastWarnedDuplicateKey;
+    $$renderer2.push(`<dl${$8.attributes({
+      ...rest,
+      class: $8.clsx(classNames("cinder-description-list", className)),
+      "data-cinder-variant": variant
+    })}><!--[-->`);
+    const each_array = $8.ensure_array_like(items);
+    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+      let item = each_array[$$index];
+      $$renderer2.push(`<div class="cinder-description-list__row"><dt${$8.attr_class($8.clsx(variant === "narrow" ? "cinder-sr-only" : undefined))}>${$8.escape(item.term)}</dt> <dd><div class="cinder-description-list__definition">${$8.escape(item.definition)}</div> `);
+      if (actions) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-description-list__actions">`);
+        actions($$renderer2, item);
+        $$renderer2.push(`<!----></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></dd></div>`);
+    }
+    $$renderer2.push(`<!--]--></dl>`);
+  });
+}
+
+// src/components/json-viewer/json-viewer.svelte
+import * as $10 from "svelte/internal/server";
+
+// src/components/json-viewer/_json-viewer-node.svelte
+import * as $9 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 = $9.derived(() => value !== null && typeof value === "object");
+    const isArray = $9.derived(() => Array.isArray(value));
+    const tooDeep = $9.derived(() => depth >= maxDepth);
+    let collapsed = untrack(() => depth >= initialDepth);
+    const entries = $9.derived(() => {
+      if (!isObject() || tooDeep())
+        return [];
+      if (isArray()) {
+        return value.map((item, i) => [i, item]);
+      }
+      return Object.entries(value);
+    });
+    const itemCount = $9.derived(() => entries().length);
+    const collectionLabel = $9.derived(() => `${isArray() ? "array" : "object"}, ${itemCount()} ${itemCount() === 1 ? "item" : "items"}`);
+    const toggleLabel = $9.derived(() => keyName === undefined ? collectionLabel() : `${keyName}: ${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";
+    }
+    if (isObject() && !tooDeep()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span${$9.attr_class($9.clsx(classNames("cinder-json-viewer__node")))}><button type="button" class="cinder-json-viewer__toggle"${$9.attr("aria-expanded", !collapsed)}${$9.attr("aria-label", toggleLabel())}>`);
+      if (keyName !== undefined) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-json-viewer__key">${$9.escape(keyName)}:</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__caret"${$9.attr("data-cinder-collapsed", collapsed || undefined)}></span> <span class="cinder-json-viewer__brace">${$9.escape(isArray() ? "[" : "{")}</span> `);
+      if (collapsed) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-json-viewer__summary">${$9.escape(itemCount())} ${$9.escape(itemCount() === 1 ? "item" : "items")}</span> <span class="cinder-json-viewer__brace">${$9.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 = $9.ensure_array_like(entries());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let [k, v] = each_array[$$index];
+          $$renderer2.push(`<li>`);
+          _json_viewer_node($$renderer2, {
+            value: v,
+            keyName: k,
+            depth: depth + 1,
+            initialDepth,
+            maxDepth
+          });
+          $$renderer2.push(`<!----></li>`);
+        }
+        $$renderer2.push(`<!--]--></ul> <span class="cinder-json-viewer__brace">${$9.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">`);
+      if (keyName !== undefined) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-json-viewer__key">${$9.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">`);
+      if (keyName !== undefined) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-json-viewer__key">${$9.escape(keyName)}:</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__value"${$9.attr("data-cinder-type", valueClass(value))}>`);
+      if (typeof value === "string") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`"${$9.escape(value)}"`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`${$9.escape(String(value))}`);
+      }
+      $$renderer2.push(`<!--]--></span></span>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/json-viewer/json-viewer.svelte
+function Json_viewer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      initialDepth = 1,
+      maxDepth = 50,
+      maxBytes = 1048576,
+      class: className
+    } = $$props;
+    const serialized = $10.derived(() => {
+      try {
+        const json = JSON.stringify(value);
+        if (typeof json !== "string")
+          return { ok: false };
+        return { ok: true, size: new Blob([json]).size };
+      } catch {
+        return { ok: false };
+      }
+    });
+    const unserializable = $10.derived(() => !serialized().ok);
+    const tooLarge = $10.derived(() => serialized().ok && serialized().size > maxBytes);
+    $$renderer2.push(`<div${$10.attr_class($10.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 (~${$10.escape(Math.round((serialized().ok ? serialized().size : 0) / 1024))} KB; cap
+        is ${$10.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>`);
+  });
+}
+
+// src/components/tabs/tabs.svelte
+import * as $11 from "svelte/internal/server";
+
+// src/components/tabs/tabs-context.ts
+import { createContext } from "svelte";
+var [getTabsContextStrict, setTabsContext] = createContext();
+var getTabsContext = getTabsContextStrict;
+
+// src/utilities/roving-tabindex.ts
+var ROVING_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]);
+function isRovingKey(key) {
+  return ROVING_KEYS.has(key);
+}
+function findNextIndex(currentIndex, length, direction, isDisabled) {
+  if (length === 0)
+    return -1;
+  if (!isDisabled) {
+    return (currentIndex + direction + length) % length;
+  }
+  for (let offset = 1;offset <= length; offset += 1) {
+    const candidateIndex = (currentIndex + offset * direction + length * offset) % length;
+    if (!isDisabled(candidateIndex)) {
+      return candidateIndex;
+    }
+  }
+  return currentIndex;
+}
+function findFirstIndex(length, isDisabled, currentIndex = 0) {
+  if (length === 0)
+    return -1;
+  if (!isDisabled)
+    return 0;
+  for (let index = 0;index < length; index += 1) {
+    if (!isDisabled(index))
+      return index;
+  }
+  return currentIndex;
+}
+function findLastIndex(length, isDisabled, currentIndex = 0) {
+  if (length === 0)
+    return -1;
+  if (!isDisabled)
+    return length - 1;
+  for (let index = length - 1;index >= 0; index -= 1) {
+    if (!isDisabled(index))
+      return index;
+  }
+  return currentIndex;
+}
+function handleRovingKeydown(event, currentIndex, length, options = {}) {
+  const { isDisabled, vertical = true, horizontal = true } = options;
+  if (length === 0)
+    return null;
+  switch (event.key) {
+    case "ArrowRight":
+      return horizontal ? findNextIndex(currentIndex, length, 1, isDisabled) : null;
+    case "ArrowDown":
+      return vertical ? findNextIndex(currentIndex, length, 1, isDisabled) : null;
+    case "ArrowLeft":
+      return horizontal ? findNextIndex(currentIndex, length, -1, isDisabled) : null;
+    case "ArrowUp":
+      return vertical ? findNextIndex(currentIndex, length, -1, isDisabled) : null;
+    case "Home":
+      return findFirstIndex(length, isDisabled, currentIndex);
+    case "End":
+      return findLastIndex(length, isDisabled, currentIndex);
+    default:
+      return null;
+  }
+}
+function getFocusableIndex(selectedIndex, length, isDisabled) {
+  if (length === 0)
+    return -1;
+  if (selectedIndex >= 0 && selectedIndex < length)
+    return selectedIndex;
+  return findFirstIndex(length, isDisabled, 0);
+}
+
+// src/components/tabs/tabs.svelte
+function Tabs($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const baseId = $11.props_id($$renderer2);
+    let {
+      value = "",
+      orientation = "horizontal",
+      activateOnFocus,
+      class: className,
+      children
+    } = $$props;
+    const effectiveActivateOnFocus = $11.derived(() => activateOnFocus ?? orientation === "horizontal");
+    const buttons = new Map;
+    let version = 0;
+    const focusableValue = $11.derived(() => {
+      for (const [registeredValue, entry] of buttons) {
+        if (!entry.disabled)
+          return registeredValue;
+      }
+      return;
+    });
+    function focusValue(target) {
+      const entry = buttons.get(target);
+      if (entry)
+        entry.button.focus();
+    }
+    function resolveFocusedIndex(active) {
+      const entries = [...buttons.values()];
+      return entries.findIndex(({ button }) => button === active);
+    }
+    function readActiveElement(event) {
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      if (target) {
+        for (const { button } of buttons.values()) {
+          if (button === target)
+            return target;
+        }
+      }
+      const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+      return currentTarget?.ownerDocument.activeElement ?? null;
+    }
+    function resolveStartingIndex(event) {
+      const entries = [...buttons.values()];
+      if (entries.length === 0)
+        return -1;
+      const focused = resolveFocusedIndex(readActiveElement(event));
+      if (focused !== -1)
+        return focused;
+      const order = [...buttons.keys()];
+      const activeIdx = order.indexOf(value);
+      if (activeIdx !== -1 && !entries[activeIdx]?.disabled)
+        return activeIdx;
+      return entries.findIndex((entry) => !entry.disabled);
+    }
+    function isOrientedKey(key, isHorizontal) {
+      if (!isRovingKey(key))
+        return false;
+      if (key === "Home" || key === "End")
+        return true;
+      if (isHorizontal)
+        return key === "ArrowLeft" || key === "ArrowRight";
+      return key === "ArrowUp" || key === "ArrowDown";
+    }
+    function handleKeydown(event) {
+      const entries = [...buttons.values()];
+      const order = [...buttons.keys()];
+      if (event.key === "Enter" || event.key === " ") {
+        const focused = resolveFocusedIndex(readActiveElement(event));
+        if (focused === -1)
+          return;
+        if (entries[focused]?.disabled !== false)
+          return;
+        const focusedValue = order[focused];
+        if (focusedValue === undefined)
+          return;
+        event.preventDefault();
+        value = focusedValue;
+        return;
+      }
+      const isHorizontal = orientation === "horizontal";
+      if (!isOrientedKey(event.key, isHorizontal))
+        return;
+      if (entries.length === 0)
+        return;
+      const currentIndex = resolveStartingIndex(event);
+      if (currentIndex === -1) {
+        event.preventDefault();
+        return;
+      }
+      const nextIdx = handleRovingKeydown(event, currentIndex, entries.length, {
+        isDisabled: (i) => entries[i]?.disabled ?? false,
+        horizontal: isHorizontal,
+        vertical: !isHorizontal
+      });
+      if (nextIdx === null)
+        return;
+      event.preventDefault();
+      if (nextIdx === currentIndex)
+        return;
+      const nextValue = order[nextIdx];
+      if (nextValue === undefined)
+        return;
+      focusValue(nextValue);
+      if (effectiveActivateOnFocus()) {
+        value = nextValue;
+      }
+    }
+    setTabsContext({
+      get value() {
+        return value;
+      },
+      get orientation() {
+        return orientation;
+      },
+      get activateOnFocus() {
+        return effectiveActivateOnFocus();
+      },
+      get baseId() {
+        return baseId;
+      },
+      select(next) {
+        value = next;
+      },
+      isActive(candidate) {
+        return value === candidate;
+      },
+      register(target, button, disabled = false) {
+        const existing = buttons.get(target);
+        if (existing) {
+          existing.button = button;
+          existing.disabled = disabled;
+        } else {
+          buttons.set(target, { button, disabled });
+        }
+        version += 1;
+      },
+      unregister(target) {
+        if (buttons.delete(target)) {
+          version += 1;
+        }
+      },
+      setDisabled(target, disabled) {
+        const existing = buttons.get(target);
+        if (!existing)
+          return;
+        if (existing.disabled === disabled)
+          return;
+        existing.disabled = disabled;
+        version += 1;
+      },
+      isFocusable(candidate) {
+        const selectedEntry = buttons.get(value);
+        const selectedIsEnabled = selectedEntry !== undefined && !selectedEntry.disabled;
+        const entry = buttons.get(candidate);
+        if (!entry || entry.disabled)
+          return false;
+        if (selectedIsEnabled)
+          return value === candidate;
+        return focusableValue() === candidate;
+      },
+      handleKeydown
+    });
+    $$renderer2.push(`<div${$11.attr_class($11.clsx(classNames("cinder-tabs", className)))}${$11.attr("data-cinder-orientation", orientation)}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    $11.bind_props($$props, { value });
+  });
+}
+
+// src/components/tab-list/tab-list.svelte
+import * as $12 from "svelte/internal/server";
+function Tab_list($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { label, labelledBy, class: className, children } = $$props;
+    const tabs = getTabsContext();
+    $$renderer2.push(`<div role="tablist"${$12.attr_class($12.clsx(classNames("cinder-tab-list", className)))}${$12.attr("data-cinder-orientation", tabs.orientation)}${$12.attr("aria-label", label)}${$12.attr("aria-labelledby", labelledBy)}${$12.attr("aria-orientation", tabs.orientation)}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+
+// src/components/tab/tab.svelte
+import * as $13 from "svelte/internal/server";
+import { untrack as untrack2 } from "svelte";
+
+// src/_internal/collection.ts
+function createSingleSelection(getValue, setValue) {
+  return {
+    get value() {
+      return getValue();
+    },
+    select(next) {
+      setValue(next);
+    },
+    isSelected(candidate) {
+      return getValue() === candidate;
+    }
+  };
+}
+function createMultiSelection(getValues, setValues) {
+  return {
+    get values() {
+      return getValues();
+    },
+    toggle(item) {
+      const current = getValues();
+      const index = current.indexOf(item);
+      if (index === -1) {
+        setValues([...current, item]);
+      } else {
+        setValues(current.filter((existing) => existing !== item));
+      }
+    },
+    isSelected(candidate) {
+      return getValues().includes(candidate);
+    }
+  };
+}
+function rovingTabIndex(isActive) {
+  return isActive ? 0 : -1;
+}
+
+// src/components/tab/tab.svelte
+function Tab($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      id,
+      disabled = false,
+      class: className,
+      children,
+      trailing
+    } = $$props;
+    const tabs = getTabsContext();
+    const tabId = $13.derived(() => id ?? `${tabs.baseId}-tab-${value}`);
+    const panelId = $13.derived(() => `${tabs.baseId}-panel-${value}`);
+    const isActive = $13.derived(() => tabs.isActive(value));
+    const isFocusable = $13.derived(() => tabs.isFocusable(value));
+    let buttonElement = undefined;
+    const registeredValue = untrack2(() => value);
+    function handleClick() {
+      if (disabled)
+        return;
+      tabs.select(value);
+    }
+    $$renderer2.push(`<button type="button" role="tab"${$13.attr("id", tabId())}${$13.attr_class($13.clsx(classNames("cinder-tab", className)))}${$13.attr("data-cinder-value", value)}${$13.attr("data-cinder-active", isActive() ? "" : undefined)}${$13.attr("data-cinder-disabled", disabled || undefined)}${$13.attr("data-variant", tabs.orientation)}${$13.attr("aria-selected", isActive())}${$13.attr("aria-controls", panelId())}${$13.attr("tabindex", rovingTabIndex(isFocusable()))}${$13.attr("disabled", disabled, true)}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----> `);
+    if (trailing) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-tab__trailing" aria-hidden="true">`);
+      trailing($$renderer2);
+      $$renderer2.push(`<!----></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></button>`);
+  });
+}
+
+// src/components/tab-panel/tab-panel.svelte
+import * as $14 from "svelte/internal/server";
+function Tab_panel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { value, ariaLabelledby, class: className, children } = $$props;
+    const tabs = getTabsContext();
+    const isActive = $14.derived(() => tabs.isActive(value));
+    const panelId = $14.derived(() => `${tabs.baseId}-panel-${value}`);
+    const labelledBy = $14.derived(() => ariaLabelledby ?? `${tabs.baseId}-tab-${value}`);
+    if (isActive()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$14.attr("id", panelId())} role="tabpanel"${$14.attr_class($14.clsx(classNames("cinder-tab-panel", className)))}${$14.attr("data-cinder-value", value)}${$14.attr("aria-labelledby", labelledBy())} tabindex="0">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/payload-inspector/payload-inspector.svelte
+function Payload_inspector($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      truncated = false,
+      maxBytes = 1048576,
+      meta,
+      format,
+      parse,
+      activeView = "summary",
+      label = "Payload inspector",
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const parseResult = $15.derived(() => {
+      if (typeof value !== "string") {
+        return { ok: true, parsed: value };
+      }
+      if (value.trim() === "") {
+        return { ok: true, parsed: null };
+      }
+      try {
+        const parser = parse ?? JSON.parse;
+        return { ok: true, parsed: parser(value) };
+      } catch (error) {
+        return {
+          ok: false,
+          error: error instanceof Error ? error.message : String(error)
+        };
+      }
+    });
+    const parsedValue = $15.derived(() => parseResult().ok ? parseResult().parsed : undefined);
+    const sizeResult = $15.derived(() => {
+      if (!parseResult().ok)
+        return { ok: false };
+      try {
+        const json = JSON.stringify(parsedValue());
+        if (typeof json !== "string")
+          return { ok: false };
+        return { ok: true, bytes: new Blob([json]).size };
+      } catch {
+        return { ok: false };
+      }
+    });
+    const byteLabel = $15.derived(() => {
+      if (!sizeResult().ok)
+        return "Unknown size";
+      const bytes = sizeResult().bytes;
+      if (bytes < 1024)
+        return `${bytes} B`;
+      if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+      return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    });
+    const rawText = $15.derived(() => {
+      if (!parseResult().ok) {
+        return typeof value === "string" ? value : "";
+      }
+      try {
+        const formatter = format ?? ((v) => JSON.stringify(v, null, 2));
+        return formatter(parsedValue()) ?? "";
+      } catch {
+        return typeof value === "string" ? value : "";
+      }
+    });
+    const unserializable = $15.derived(() => {
+      if (typeof value === "string" || !parseResult().ok)
+        return false;
+      try {
+        JSON.stringify(parsedValue());
+        return false;
+      } catch {
+        return true;
+      }
+    });
+    const summaryItems = $15.derived(() => {
+      const items = [];
+      items.push({ term: "Size", definition: byteLabel() });
+      if (meta?.contentType) {
+        items.push({ term: "Content type", definition: meta.contentType });
+      }
+      if (meta?.source) {
+        items.push({ term: "Source", definition: meta.source });
+      }
+      if (meta?.timestamp) {
+        let displayTime = meta.timestamp;
+        try {
+          displayTime = new Date(meta.timestamp).toLocaleString();
+        } catch {}
+        items.push({ term: "Timestamp", definition: displayTime });
+      }
+      return items;
+    });
+    const valueKind = $15.derived(() => {
+      if (!parseResult().ok)
+        return "invalid";
+      const v = parsedValue();
+      if (v === null)
+        return "null";
+      if (v === undefined)
+        return "undefined";
+      if (typeof v === "boolean")
+        return "boolean";
+      if (typeof v === "number")
+        return "number";
+      if (typeof v === "string")
+        return "string";
+      if (Array.isArray(v))
+        return "array";
+      return "object";
+    });
+    const isPrimitive = $15.derived(() => valueKind() === "null" || valueKind() === "undefined" || valueKind() === "boolean" || valueKind() === "number" || valueKind() === "string");
+    const isEmpty = $15.derived(() => parsedValue() === undefined && value === undefined);
+    const copyRawText = $15.derived(() => {
+      if (typeof value === "string")
+        return value;
+      if (!parseResult().ok)
+        return "";
+      try {
+        return JSON.stringify(parsedValue()) ?? "";
+      } catch {
+        return "";
+      }
+    });
+    const copyFormattedText = $15.derived(() => {
+      if (!parseResult().ok)
+        return rawText();
+      try {
+        return JSON.stringify(parsedValue(), null, 2) ?? "";
+      } catch {
+        return rawText();
+      }
+    });
+    const canCopyFormatted = $15.derived(() => !isEmpty() && parseResult().ok && !unserializable());
+    const canCopyRaw = $15.derived(() => !isEmpty() && (typeof value === "string" || canCopyFormatted()));
+    function kindVariant(kind) {
+      if (kind === "invalid")
+        return "danger";
+      if (kind === "null" || kind === "undefined")
+        return "warning";
+      if (kind === "object" || kind === "array")
+        return "info";
+      return "neutral";
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<section${$15.attributes({
+        ...rest,
+        class: $15.clsx(classNames("cinder-payload-inspector", className)),
+        "aria-label": label
+      })}><div class="cinder-payload-inspector__header"><span class="cinder-payload-inspector__label">${$15.escape(label)}</span> <div class="cinder-payload-inspector__header-actions">`);
+      if (sizeResult().ok) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<span class="cinder-payload-inspector__size"${$15.attr("aria-label", `${byteLabel()} payload size`)}>${$15.escape(byteLabel())}</span>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (truncated) {
+        $$renderer3.push("<!--[0-->");
+        Badge($$renderer3, {
+          variant: "warning",
+          size: "xs",
+          children: ($$renderer4) => {
+            $$renderer4.push(`<!---->Truncated`);
+          },
+          $$slots: { default: true }
+        });
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (canCopyFormatted()) {
+        $$renderer3.push("<!--[0-->");
+        Copy_button($$renderer3, {
+          value: copyFormattedText(),
+          label: "Copy formatted",
+          copiedLabel: "Formatted copied",
+          iconOnly: true
+        });
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (canCopyRaw()) {
+        $$renderer3.push("<!--[0-->");
+        Copy_button($$renderer3, {
+          value: copyRawText(),
+          label: "Copy raw",
+          copiedLabel: "Raw copied",
+          iconOnly: true
+        });
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div></div> <div class="cinder-payload-inspector__tabs">`);
+      Tabs($$renderer3, {
+        get value() {
+          return activeView;
+        },
+        set value($$value) {
+          activeView = $$value;
+          $$settled = false;
+        },
+        children: ($$renderer4) => {
+          Tab_list($$renderer4, {
+            label: "Inspector views",
+            children: ($$renderer5) => {
+              Tab($$renderer5, {
+                value: "summary",
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<!---->Summary`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!----> `);
+              Tab($$renderer5, {
+                value: "tree",
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<!---->Tree`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!----> `);
+              Tab($$renderer5, {
+                value: "raw",
+                children: ($$renderer6) => {
+                  $$renderer6.push(`<!---->Raw`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer5.push(`<!---->`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!----> `);
+          Tab_panel($$renderer4, {
+            value: "summary",
+            children: ($$renderer5) => {
+              $$renderer5.push(`<div class="cinder-payload-inspector__panel">`);
+              if (isEmpty()) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__empty" role="status">No payload</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty()) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__summary"><div class="cinder-payload-inspector__summary-badges">`);
+                Badge($$renderer5, {
+                  variant: kindVariant(valueKind()),
+                  size: "xs",
+                  mono: true,
+                  children: ($$renderer6) => {
+                    $$renderer6.push(`<!---->${$15.escape(valueKind())}`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer5.push(`<!----> `);
+                if (truncated) {
+                  $$renderer5.push("<!--[0-->");
+                  Badge($$renderer5, {
+                    variant: "warning",
+                    size: "xs",
+                    children: ($$renderer6) => {
+                      $$renderer6.push(`<!---->Truncated`);
+                    },
+                    $$slots: { default: true }
+                  });
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--></div> `);
+                if (summaryItems().length > 0) {
+                  $$renderer5.push("<!--[0-->");
+                  Description_list($$renderer5, { items: summaryItems(), variant: "two-column" });
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--> `);
+                if (!parseResult().ok) {
+                  $$renderer5.push("<!--[0-->");
+                  $$renderer5.push(`<div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning" role="alert">Parse error: ${$15.escape(parseResult().error)}</div>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--> `);
+                if (parseResult().ok && isPrimitive()) {
+                  $$renderer5.push("<!--[0-->");
+                  $$renderer5.push(`<div class="cinder-payload-inspector__summary-value"><span class="cinder-payload-inspector__summary-value-label">Value</span> <span class="cinder-payload-inspector__primitive">${$15.escape(String(parsedValue()))}</span></div>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--></div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--></div>`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!----> `);
+          Tab_panel($$renderer4, {
+            value: "tree",
+            children: ($$renderer5) => {
+              $$renderer5.push(`<div class="cinder-payload-inspector__panel">`);
+              if (isEmpty()) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__empty" role="status">No payload</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty() && !parseResult().ok) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning" role="alert">Cannot render tree: ${$15.escape(parseResult().error)}</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty() && parseResult().ok && unserializable()) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__notice" role="status">This value can't be serialized as JSON (it may contain circular references or BigInt
+              values).</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty() && parseResult().ok && !unserializable()) {
+                $$renderer5.push("<!--[0-->");
+                Json_viewer($$renderer5, { value: parsedValue(), maxBytes });
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--></div>`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!----> `);
+          Tab_panel($$renderer4, {
+            value: "raw",
+            children: ($$renderer5) => {
+              $$renderer5.push(`<div class="cinder-payload-inspector__panel cinder-payload-inspector__panel--code">`);
+              if (isEmpty()) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__empty" role="status">No payload</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty() && truncated) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning">This payload has been truncated by the producer. The raw view shows only the received
+              portion.</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty() && unserializable()) {
+                $$renderer5.push("<!--[0-->");
+                $$renderer5.push(`<div class="cinder-payload-inspector__notice" role="status">This value can't be serialized as JSON (it may contain circular references or BigInt
+              values).</div>`);
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--> `);
+              if (!isEmpty() && !unserializable()) {
+                $$renderer5.push("<!--[0-->");
+                Code_block($$renderer5, {
+                  code: rawText(),
+                  highlight: false,
+                  class: "cinder-payload-inspector__raw"
+                });
+              } else {
+                $$renderer5.push("<!--[-1-->");
+              }
+              $$renderer5.push(`<!--]--></div>`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div></section>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    $15.bind_props($$props, { activeView });
+  });
+}
+
+// src/components/payload-inspector/index.ts
+var payload_inspector_default = Payload_inspector;
+export {
+  payload_inspector_default as default,
+  Payload_inspector as PayloadInspector
+};
+
+//# debugId=B5E90A18D845230E64756E2164756E21