@lostgradient/cinder 0.2.0 → 0.4.0

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

@@ -0,0 +1,2209 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/utilities/retrying-loader-cache.ts
+function createRetryingLoaderCache(loader) {
+  let cached;
+  return () => {
+    if (cached === undefined) {
+      const pending = loader();
+      pending.catch(() => {
+        if (cached === pending) {
+          cached = undefined;
+        }
+      });
+      cached = pending;
+    }
+    return cached;
+  };
+}
+
+// src/highlighters/shiki/index.ts
+var exports_shiki = {};
+__export(exports_shiki, {
+  shikiHighlighter: () => shikiHighlighter,
+  createRetryingLoaderCache: () => createRetryingLoaderCache
+});
+function escapeHtml(value) {
+  const safe = typeof value === "string" ? value : "";
+  return safe.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function plaintextBlock(code) {
+  return `<pre class="shiki shiki-plaintext"><code>${escapeHtml(code)}</code></pre>`;
+}
+function stripRootPreTabIndex(html) {
+  const openingPre = /^<pre\b[^>]*>/i.exec(html);
+  if (openingPre === null)
+    return html;
+  return openingPre[0].replace(/\s+tabindex=(?:"[^"]*"|'[^']*'|[^\s>]+)/i, "") + html.slice(openingPre[0].length);
+}
+function shikiHighlighter(options = {}) {
+  const { theme = DEFAULT_THEME, langs } = options;
+  const warnedLanguages = new Set;
+  const loadShiki = createRetryingLoaderCache(async () => {
+    const module_ = await import("shiki");
+    if (langs !== undefined) {
+      for (const lang of langs) {
+        try {
+          await module_.codeToHtml("", { lang, ...buildThemeOption(theme) });
+        } catch {}
+      }
+    }
+    return {
+      codeToHtml: module_.codeToHtml,
+      bundledLanguages: module_.bundledLanguages
+    };
+  });
+  return async function highlight(code, lang) {
+    const normalizedLang = typeof lang === "string" ? lang.trim().split(/\s+/, 1)[0] ?? "" : "";
+    if (normalizedLang === "") {
+      return plaintextBlock(code);
+    }
+    let shiki;
+    try {
+      shiki = await loadShiki();
+    } catch (error) {
+      console.warn("[cinder/highlighters/shiki] failed to load shiki:", error);
+      return plaintextBlock(code);
+    }
+    if (!Object.hasOwn(shiki.bundledLanguages, normalizedLang)) {
+      if (!warnedLanguages.has(normalizedLang)) {
+        warnedLanguages.add(normalizedLang);
+        console.warn(`[cinder/highlighters/shiki] language "${normalizedLang}" is not in Shiki's bundle; rendering as plaintext.`);
+      }
+      return plaintextBlock(code);
+    }
+    try {
+      const html = await shiki.codeToHtml(code, {
+        lang: normalizedLang,
+        ...buildThemeOption(theme)
+      });
+      return stripRootPreTabIndex(html);
+    } catch (error) {
+      if (!warnedLanguages.has(normalizedLang)) {
+        warnedLanguages.add(normalizedLang);
+        console.warn(`[cinder/highlighters/shiki] failed to highlight "${normalizedLang}":`, error);
+      }
+      return plaintextBlock(code);
+    }
+  };
+}
+function buildThemeOption(theme) {
+  if (typeof theme === "string")
+    return { theme };
+  return { themes: theme };
+}
+var DEFAULT_THEME;
+var init_shiki = __esm(() => {
+  DEFAULT_THEME = {
+    light: "github-light",
+    dark: "github-dark"
+  };
+});
+
+// src/components/payload-inspector/index.ts
+import"@lostgradient/cinder/payload-inspector/styles";
+
+// src/components/payload-inspector/payload-inspector.svelte
+import"svelte/internal/disclose-version";
+import * as $15 from "svelte/internal/client";
+
+// src/components/badge/badge.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/badge/badge.svelte
+var root_3 = $.from_svg(`<path></path>`);
+var root_2 = $.from_svg(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
+var root_1 = $.from_html(`<!> <!>`, 1);
+var root = $.from_html(`<span><!></span>`);
+function Badge($$anchor, $$props) {
+  $.push($$props, true);
+  const subscriptionStateConfigurations = {
+    active: { variant: "success", label: "Active" },
+    trialing: { variant: "info", label: "Trialing" },
+    "past-due": { variant: "warning", label: "Past due" },
+    canceled: { variant: "neutral", label: "Canceled" },
+    expired: { variant: "danger", label: "Expired" },
+    refunded: { variant: "neutral", label: "Refunded" }
+  };
+  const subscriptionStateIconPaths = {
+    active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+    trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+    "past-due": [
+      "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+      "M12 9v4",
+      "M12 17h.01"
+    ],
+    canceled: [
+      "M15 9 9 15",
+      "M9 9l6 6",
+      "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+    ],
+    expired: [
+      "M8 2v4",
+      "M16 2v4",
+      "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+      "M3 10h18",
+      "m17 14-5-5",
+      "m12 14 5 5"
+    ],
+    refunded: [
+      "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+      "M3 3v5h5"
+    ]
+  };
+  let variant = $.prop($$props, "variant", 3, "neutral"), size = $.prop($$props, "size", 3, "md"), mono = $.prop($$props, "mono", 3, false), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "variant",
+    "size",
+    "mono",
+    "subscriptionState",
+    "class",
+    "children"
+  ]);
+  const subscriptionStateConfiguration = $.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateConfigurations[$$props.subscriptionState]);
+  const resolvedVariant = $.derived(() => $.get(subscriptionStateConfiguration)?.variant ?? variant());
+  const resolvedSubscriptionIconPaths = $.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateIconPaths[$$props.subscriptionState]);
+  var span = root();
+  $.attribute_effect(span, ($0) => ({
+    class: $0,
+    "data-cinder-variant": $.get(resolvedVariant),
+    "data-cinder-size": size(),
+    "data-cinder-mono": mono() ? "" : undefined,
+    "data-cinder-subscription-state": $$props.subscriptionState,
+    ...rest
+  }), [() => classNames("cinder-badge", $$props.class)]);
+  var node = $.child(span);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = root_1();
+      var node_1 = $.first_child(fragment);
+      {
+        var consequent = ($$anchor3) => {
+          var svg = root_2();
+          $.each(svg, 20, () => $.get(resolvedSubscriptionIconPaths), (iconPath) => iconPath, ($$anchor4, iconPath) => {
+            var path = root_3();
+            $.template_effect(() => $.set_attribute(path, "d", iconPath));
+            $.append($$anchor4, path);
+          });
+          $.reset(svg);
+          $.append($$anchor3, svg);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(resolvedSubscriptionIconPaths))
+            $$render(consequent);
+        });
+      }
+      var node_2 = $.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_1 = $.comment();
+          var node_3 = $.first_child(fragment_1);
+          $.snippet(node_3, () => $$props.children);
+          $.append($$anchor3, fragment_1);
+        };
+        var alternate = ($$anchor3) => {
+          var text2 = $.text();
+          $.template_effect(() => $.set_text(text2, $.get(subscriptionStateConfiguration).label));
+          $.append($$anchor3, text2);
+        };
+        $.if(node_2, ($$render) => {
+          if ($$props.children)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $.append($$anchor2, fragment);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var fragment_3 = $.comment();
+      var node_4 = $.first_child(fragment_3);
+      $.snippet(node_4, () => $$props.children ?? $.noop);
+      $.append($$anchor2, fragment_3);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(subscriptionStateConfiguration))
+        $$render(consequent_2);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $.reset(span);
+  $.append($$anchor, span);
+  $.pop();
+}
+
+// src/components/code-block/code-block.svelte
+import"svelte/internal/disclose-version";
+import * as $7 from "svelte/internal/client";
+
+// src/components/code-block/code-block-default-highlighter.ts
+var loadShikiAdapterModule = createRetryingLoaderCache(() => Promise.resolve().then(() => (init_shiki(), exports_shiki)));
+var defaultHighlighter;
+async function loadDefaultHighlighter() {
+  if (defaultHighlighter !== undefined)
+    return defaultHighlighter;
+  const module_ = await loadShikiAdapterModule();
+  defaultHighlighter ??= module_.shikiHighlighter();
+  return defaultHighlighter;
+}
+
+// ../../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"svelte/internal/disclose-version";
+import * as $6 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/icons/check.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $3 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $2 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root2 = $2.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $2.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $2.push($$props, false);
+  let name = $2.prop($$props, "name", 8, undefined);
+  let color = $2.prop($$props, "color", 8, "currentColor");
+  let size = $2.prop($$props, "size", 8, 24);
+  let strokeWidth = $2.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $2.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $2.prop($$props, "iconNode", 24, () => []);
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && array.indexOf(className) === index2;
+  }).join(" ");
+  $2.init();
+  var svg = root2();
+  $2.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($2.deep_read_state(absoluteStrokeWidth()), $2.deep_read_state(strokeWidth()), $2.deep_read_state(size()), $2.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
+    () => ($2.deep_read_state(name()), $2.deep_read_state($$sanitized_props), $2.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+  ]);
+  var node = $2.child(svg);
+  $2.each(node, 1, iconNode, $2.index, ($$anchor2, $$item) => {
+    var $$array = $2.derived(() => $2.to_array($2.get($$item), 2));
+    let tag = () => $2.get($$array)[0];
+    let attrs = () => $2.get($$array)[1];
+    var fragment = $2.comment();
+    var node_1 = $2.first_child(fragment);
+    $2.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $2.attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    $2.append($$anchor2, fragment);
+  });
+  var node_2 = $2.sibling(node);
+  $2.slot(node_2, $$props, "default", {}, null);
+  $2.reset(svg);
+  $2.append($$anchor, svg);
+  $2.pop();
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/check.svelte
+function Check($$anchor, $$props) {
+  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+  Icon($$anchor, $3.spread_props({ name: "check" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $3.comment();
+      var node = $3.first_child(fragment_1);
+      $3.slot(node, $$props, "default", {}, null);
+      $3.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/copy.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $4 from "svelte/internal/client";
+function Copy($$anchor, $$props) {
+  const $$sanitized_props = $4.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    [
+      "rect",
+      {
+        width: "14",
+        height: "14",
+        x: "8",
+        y: "8",
+        rx: "2",
+        ry: "2"
+      }
+    ],
+    [
+      "path",
+      {
+        d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+      }
+    ]
+  ];
+  Icon($$anchor, $4.spread_props({ name: "copy" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $4.comment();
+      var node = $4.first_child(fragment_1);
+      $4.slot(node, $$props, "default", {}, null);
+      $4.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// src/utilities/clipboard.ts
+async function copyToClipboard(text2) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text2);
+      return true;
+    } catch {}
+  }
+  return legacyCopy(text2);
+}
+function legacyCopy(text2) {
+  if (typeof document === "undefined")
+    return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text2;
+  textarea.setAttribute("readonly", "");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.setAttribute("tabindex", "-1");
+  textarea.style.position = "absolute";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  let succeeded = false;
+  try {
+    succeeded = document.execCommand("copy");
+  } catch {
+    succeeded = false;
+  }
+  textarea.remove();
+  return succeeded;
+}
+
+// src/components/_visually-hidden-live-region.svelte
+import"svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
+var root3 = $5.from_html(`<div aria-atomic="true"> </div>`);
+function _visually_hidden_live_region($$anchor, $$props) {
+  $5.push($$props, true);
+  let message = $5.prop($$props, "message", 3, ""), announcementSequence = $5.prop($$props, "announcementSequence", 3, 0), priority = $5.prop($$props, "priority", 3, "polite");
+  let rendered = $5.state("");
+  let setTimeoutId = null;
+  let version = 0;
+  let isDestroyed = false;
+  $5.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $5.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $5.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $5.set(rendered, next, true);
+      setTimeoutId = null;
+    }, 0);
+  });
+  var div = root3();
+  var text2 = $5.child(div, true);
+  $5.reset(div);
+  $5.template_effect(($0) => {
+    $5.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
+    $5.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
+    $5.set_class(div, 1, $0);
+    $5.set_text(text2, $5.get(rendered));
+  }, [() => $5.clsx(classNames("cinder-sr-only", $$props.class))]);
+  $5.append($$anchor, div);
+  $5.pop();
+}
+
+// src/components/copy-button/copy-button.svelte
+var root4 = $6.from_html(`<button><!></button> <!>`, 1);
+function Copy_button($$anchor, $$props) {
+  $6.push($$props, true);
+  let confirmDuration = $6.prop($$props, "confirmDuration", 3, 1500), iconOnly = $6.prop($$props, "iconOnly", 3, false), rest = $6.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "value",
+    "confirmDuration",
+    "label",
+    "copiedLabel",
+    "iconOnly",
+    "class",
+    "children",
+    "confirmation"
+  ]);
+  let copied = $6.state(false);
+  let resetTimer;
+  const copiedAnnouncement = $6.derived(() => $6.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
+  async function handleClick() {
+    const ok = await copyToClipboard($$props.value);
+    if (!ok)
+      return;
+    $6.set(copied, true);
+    if (resetTimer)
+      clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => {
+      $6.set(copied, false);
+    }, confirmDuration());
+  }
+  $6.user_effect(() => {
+    return () => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    };
+  });
+  var fragment = root4();
+  var button = $6.first_child(fragment);
+  $6.attribute_effect(button, ($0) => ({
+    ...rest,
+    type: "button",
+    "data-cinder-copied": $6.get(copied) || undefined,
+    "aria-label": $$props.label ?? "Copy to clipboard",
+    onclick: handleClick,
+    class: $0
+  }), [() => classNames("cinder-copy-button", $$props.class)]);
+  var node = $6.child(button);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment_1 = $6.comment();
+      var node_1 = $6.first_child(fragment_1);
+      $6.snippet(node_1, () => $$props.confirmation);
+      $6.append($$anchor2, fragment_1);
+    };
+    var consequent_1 = ($$anchor2) => {
+      Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+    };
+    var consequent_2 = ($$anchor2) => {
+      var text3 = $6.text("Copied");
+      $6.append($$anchor2, text3);
+    };
+    var consequent_3 = ($$anchor2) => {
+      var fragment_3 = $6.comment();
+      var node_2 = $6.first_child(fragment_3);
+      $6.snippet(node_2, () => $$props.children);
+      $6.append($$anchor2, fragment_3);
+    };
+    var consequent_4 = ($$anchor2) => {
+      Copy($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+    };
+    var alternate = ($$anchor2) => {
+      var text_1 = $6.text("Copy");
+      $6.append($$anchor2, text_1);
+    };
+    $6.if(node, ($$render) => {
+      if ($6.get(copied) && $$props.confirmation)
+        $$render(consequent);
+      else if ($6.get(copied) && iconOnly())
+        $$render(consequent_1, 1);
+      else if ($6.get(copied))
+        $$render(consequent_2, 2);
+      else if ($$props.children)
+        $$render(consequent_3, 3);
+      else if (iconOnly())
+        $$render(consequent_4, 4);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $6.reset(button);
+  var node_3 = $6.sibling(button, 2);
+  _visually_hidden_live_region(node_3, {
+    get message() {
+      return $6.get(copiedAnnouncement);
+    }
+  });
+  $6.append($$anchor, fragment);
+  $6.pop();
+}
+
+// src/components/code-block/code-block.svelte
+var root_22 = $7.from_html(`<span class="cinder-code-block__language"> </span>`);
+var root_12 = $7.from_html(`<header class="cinder-code-block__header"><!> <!></header>`);
+var root_4 = $7.from_html(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code"> </code></pre>`);
+var root_6 = $7.from_html(`<div class="cinder-code-block__highlighted"></div>`);
+var root_7 = $7.from_html(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code"> </code></pre>`);
+var root5 = $7.from_html(`<div><!> <div class="cinder-code-block__viewport" tabindex="0"><!></div></div>`);
+function Code_block($$anchor, $$props) {
+  $7.push($$props, true);
+  let copyable = $7.prop($$props, "copyable", 3, false);
+  let highlighted = $7.state(null);
+  $7.user_effect(() => {
+    if ($$props.highlight === false || !$$props.language) {
+      $7.set(highlighted, null);
+      return;
+    }
+    const pendingCode = $$props.code;
+    const pendingLanguage = $$props.language;
+    const explicitHighlighter = $$props.highlighter;
+    $7.set(highlighted, null);
+    let cancelled = false;
+    (async () => {
+      try {
+        const resolvedHighlighter = explicitHighlighter ?? await loadDefaultHighlighter();
+        if (cancelled)
+          return;
+        const html2 = await resolvedHighlighter(pendingCode, pendingLanguage);
+        if (!cancelled)
+          $7.set(highlighted, html2 === "" ? null : html2, true);
+      } catch (error) {
+        if (!cancelled)
+          $7.set(highlighted, null);
+        const detail = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+        devWarn(`[cinder/CodeBlock] highlight failed for language "${pendingLanguage}":`, detail);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  });
+  var div = root5();
+  var node = $7.child(div);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var header = root_12();
+      var node_1 = $7.child(header);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_22();
+          var text3 = $7.child(span, true);
+          $7.reset(span);
+          $7.template_effect(() => $7.set_text(text3, $$props.language));
+          $7.append($$anchor3, span);
+        };
+        $7.if(node_1, ($$render) => {
+          if ($$props.language)
+            $$render(consequent);
+        });
+      }
+      var node_2 = $7.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          Copy_button($$anchor3, {
+            get value() {
+              return $$props.code;
+            },
+            class: "cinder-code-block__copy",
+            label: "Copy code",
+            copiedLabel: "Code copied",
+            iconOnly: true
+          });
+        };
+        $7.if(node_2, ($$render) => {
+          if (copyable())
+            $$render(consequent_1);
+        });
+      }
+      $7.reset(header);
+      $7.append($$anchor2, header);
+    };
+    $7.if(node, ($$render) => {
+      if ($$props.language || copyable())
+        $$render(consequent_2);
+    });
+  }
+  var div_1 = $7.sibling(node, 2);
+  var node_3 = $7.child(div_1);
+  {
+    const failed = ($$anchor2) => {
+      var pre = root_4();
+      var code_1 = $7.child(pre);
+      var text_1 = $7.child(code_1, true);
+      $7.reset(code_1);
+      $7.reset(pre);
+      $7.template_effect(() => $7.set_text(text_1, $$props.code));
+      $7.append($$anchor2, pre);
+    };
+    $7.boundary(node_3, { failed }, ($$anchor2) => {
+      var fragment_1 = $7.comment();
+      var node_4 = $7.first_child(fragment_1);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var div_2 = root_6();
+          $7.html(div_2, () => $7.get(highlighted), true);
+          $7.reset(div_2);
+          $7.append($$anchor3, div_2);
+        };
+        var alternate = ($$anchor3) => {
+          var pre_1 = root_7();
+          var code_2 = $7.child(pre_1);
+          var text_2 = $7.child(code_2, true);
+          $7.reset(code_2);
+          $7.reset(pre_1);
+          $7.template_effect(() => $7.set_text(text_2, $$props.code));
+          $7.append($$anchor3, pre_1);
+        };
+        $7.if(node_4, ($$render) => {
+          if ($7.get(highlighted) !== null)
+            $$render(consequent_3);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $7.append($$anchor2, fragment_1);
+    });
+  }
+  $7.reset(div_1);
+  $7.reset(div);
+  $7.template_effect(($0) => $7.set_class(div, 1, $0), [() => $7.clsx(classNames("cinder-code-block", $$props.class))]);
+  $7.append($$anchor, div);
+  $7.pop();
+}
+
+// src/components/description-list/description-list.svelte
+import"svelte/internal/disclose-version";
+import * as $8 from "svelte/internal/client";
+var root_23 = $8.from_html(`<div class="cinder-description-list__actions"><!></div>`);
+var root_13 = $8.from_html(`<div class="cinder-description-list__row"><dt> </dt> <dd><div class="cinder-description-list__definition"> </div> <!></dd></div>`);
+var root6 = $8.from_html(`<dl></dl>`);
+function Description_list($$anchor, $$props) {
+  $8.push($$props, true);
+  let variant = $8.prop($$props, "variant", 3, "default"), rest = $8.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "items",
+    "variant",
+    "class",
+    "actions"
+  ]);
+  const duplicateKey = $8.derived(() => {
+    const seen = new Set;
+    for (const item of $$props.items) {
+      const key = item.id ?? item.term;
+      if (seen.has(key))
+        return key;
+      seen.add(key);
+    }
+    return;
+  });
+  let lastWarnedDuplicateKey;
+  $8.user_effect(() => {
+    if ($8.get(duplicateKey) === undefined) {
+      lastWarnedDuplicateKey = undefined;
+      return;
+    }
+    if ($8.get(duplicateKey) !== lastWarnedDuplicateKey) {
+      lastWarnedDuplicateKey = $8.get(duplicateKey);
+      devWarn(`[cinder/DescriptionList] Duplicate key "${$8.get(duplicateKey)}". Two items share a term and no \`id\`. Provide a unique \`id\` on each DescriptionListItem to avoid broken reconciliation.`);
+    }
+  });
+  var dl = root6();
+  $8.attribute_effect(dl, ($0) => ({ ...rest, class: $0, "data-cinder-variant": variant() }), [() => classNames("cinder-description-list", $$props.class)]);
+  $8.each(dl, 21, () => $$props.items, (item) => item.id ?? item.term, ($$anchor2, item) => {
+    var div = root_13();
+    var dt = $8.child(div);
+    var text3 = $8.child(dt, true);
+    $8.reset(dt);
+    var dd = $8.sibling(dt, 2);
+    var div_1 = $8.child(dd);
+    var text_1 = $8.child(div_1, true);
+    $8.reset(div_1);
+    var node = $8.sibling(div_1, 2);
+    {
+      var consequent = ($$anchor3) => {
+        var div_2 = root_23();
+        var node_1 = $8.child(div_2);
+        $8.snippet(node_1, () => $$props.actions, () => $8.get(item));
+        $8.reset(div_2);
+        $8.append($$anchor3, div_2);
+      };
+      $8.if(node, ($$render) => {
+        if ($$props.actions)
+          $$render(consequent);
+      });
+    }
+    $8.reset(dd);
+    $8.reset(div);
+    $8.template_effect(() => {
+      $8.set_class(dt, 1, $8.clsx(variant() === "narrow" ? "cinder-sr-only" : undefined));
+      $8.set_text(text3, $8.get(item).term);
+      $8.set_text(text_1, $8.get(item).definition);
+    });
+    $8.append($$anchor2, div);
+  });
+  $8.reset(dl);
+  $8.append($$anchor, dl);
+  $8.pop();
+}
+
+// src/components/json-viewer/json-viewer.svelte
+import"svelte/internal/disclose-version";
+import * as $10 from "svelte/internal/client";
+
+// src/components/json-viewer/_json-viewer-node.svelte
+import"svelte/internal/disclose-version";
+import * as $9 from "svelte/internal/client";
+import { untrack as untrack2 } from "svelte";
+var root_32 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_42 = $9.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_62 = $9.from_html(`<li role="none"><!></li>`);
+var root_5 = $9.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_24 = $9.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_8 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_72 = $9.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
+var root_10 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_9 = $9.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
+function _json_viewer_node($$anchor, $$props) {
+  $9.push($$props, true);
+  let root7 = $9.prop($$props, "root", 3, false);
+  const isObject = $9.derived(() => $$props.value !== null && typeof $$props.value === "object");
+  const isArray = $9.derived(() => Array.isArray($$props.value));
+  const tooDeep = $9.derived(() => $$props.depth >= $$props.maxDepth);
+  let collapsed = $9.state($9.proxy(untrack2(() => $$props.depth >= $$props.initialDepth)));
+  const entries = $9.derived(() => {
+    if (!$9.get(isObject) || $9.get(tooDeep))
+      return [];
+    if ($9.get(isArray)) {
+      return $$props.value.map((item, i) => [i, item]);
+    }
+    return Object.entries($$props.value);
+  });
+  const itemCount = $9.derived(() => $9.get(entries).length);
+  const collectionLabel = $9.derived(() => `${$9.get(isArray) ? "array" : "object"}, ${$9.get(itemCount)} ${$9.get(itemCount) === 1 ? "item" : "items"}`);
+  const toggleLabel = $9.derived(() => $$props.keyName === undefined ? $9.get(collectionLabel) : `${$$props.keyName}: ${$9.get(collectionLabel)}`);
+  function valueClass(v) {
+    if (v === null)
+      return "null";
+    if (typeof v === "string")
+      return "string";
+    if (typeof v === "number")
+      return "number";
+    if (typeof v === "boolean")
+      return "boolean";
+    return "unknown";
+  }
+  var fragment = $9.comment();
+  var node = $9.first_child(fragment);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var span = root_24();
+      var button = $9.child(span);
+      var node_1 = $9.child(button);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_32();
+          var text4 = $9.child(span_1);
+          $9.reset(span_1);
+          $9.template_effect(() => $9.set_text(text4, `${$$props.keyName ?? ""}:`));
+          $9.append($$anchor3, span_1);
+        };
+        $9.if(node_1, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent);
+        });
+      }
+      var span_2 = $9.sibling(node_1, 2);
+      var span_3 = $9.sibling(span_2, 2);
+      var text_1 = $9.child(span_3, true);
+      $9.reset(span_3);
+      var node_2 = $9.sibling(span_3, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_1 = root_42();
+          var span_4 = $9.first_child(fragment_1);
+          var text_2 = $9.child(span_4);
+          $9.reset(span_4);
+          var span_5 = $9.sibling(span_4, 2);
+          var text_3 = $9.child(span_5, true);
+          $9.reset(span_5);
+          $9.template_effect(() => {
+            $9.set_text(text_2, `${$9.get(itemCount) ?? ""} ${$9.get(itemCount) === 1 ? "item" : "items"}`);
+            $9.set_text(text_3, $9.get(isArray) ? "]" : "}");
+          });
+          $9.append($$anchor3, fragment_1);
+        };
+        $9.if(node_2, ($$render) => {
+          if ($9.get(collapsed))
+            $$render(consequent_1);
+        });
+      }
+      $9.reset(button);
+      var node_3 = $9.sibling(button, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_2 = root_5();
+          var ul = $9.first_child(fragment_2);
+          $9.each(ul, 23, () => $9.get(entries), ([k, v]) => k, ($$anchor4, $$item, index2) => {
+            var $$array = $9.derived(() => $9.to_array($9.get($$item), 2));
+            let k = () => $9.get($$array)[0];
+            let v = () => $9.get($$array)[1];
+            var li = root_62();
+            var node_4 = $9.child(li);
+            {
+              let $0 = $9.derived(() => $$props.depth + 1);
+              let $1 = $9.derived(() => $9.get(index2) + 1);
+              _json_viewer_node(node_4, {
+                get value() {
+                  return v();
+                },
+                get keyName() {
+                  return k();
+                },
+                get depth() {
+                  return $9.get($0);
+                },
+                get initialDepth() {
+                  return $$props.initialDepth;
+                },
+                get maxDepth() {
+                  return $$props.maxDepth;
+                },
+                get position() {
+                  return $9.get($1);
+                },
+                get setSize() {
+                  return $9.get(entries).length;
+                }
+              });
+            }
+            $9.reset(li);
+            $9.append($$anchor4, li);
+          });
+          $9.reset(ul);
+          var span_6 = $9.sibling(ul, 2);
+          var text_4 = $9.child(span_6, true);
+          $9.reset(span_6);
+          $9.template_effect(() => $9.set_text(text_4, $9.get(isArray) ? "]" : "}"));
+          $9.append($$anchor3, fragment_2);
+        };
+        $9.if(node_3, ($$render) => {
+          if (!$9.get(collapsed))
+            $$render(consequent_2);
+        });
+      }
+      $9.reset(span);
+      $9.template_effect(($0) => {
+        $9.set_class(span, 1, $0);
+        $9.set_attribute(span, "aria-expanded", !$9.get(collapsed));
+        $9.set_attribute(span, "aria-label", $9.get(toggleLabel));
+        $9.set_attribute(span, "aria-level", $$props.depth + 1);
+        $9.set_attribute(span, "aria-posinset", $$props.position);
+        $9.set_attribute(span, "aria-setsize", $$props.setSize);
+        $9.set_attribute(span, "tabindex", root7() ? 0 : -1);
+        $9.set_attribute(button, "aria-label", $9.get(toggleLabel));
+        $9.set_attribute(span_2, "data-cinder-collapsed", $9.get(collapsed) || undefined);
+        $9.set_text(text_1, $9.get(isArray) ? "[" : "{");
+      }, [() => $9.clsx(classNames("cinder-json-viewer__node"))]);
+      $9.delegated("click", button, () => $9.set(collapsed, !$9.get(collapsed)));
+      $9.append($$anchor2, span);
+    };
+    var consequent_5 = ($$anchor2) => {
+      var span_7 = root_72();
+      var node_5 = $9.child(span_7);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var span_8 = root_8();
+          var text_5 = $9.child(span_8);
+          $9.reset(span_8);
+          $9.template_effect(() => $9.set_text(text_5, `${$$props.keyName ?? ""}:`));
+          $9.append($$anchor3, span_8);
+        };
+        $9.if(node_5, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_4);
+        });
+      }
+      $9.next(2);
+      $9.reset(span_7);
+      $9.template_effect(() => {
+        $9.set_attribute(span_7, "tabindex", root7() ? 0 : -1);
+        $9.set_attribute(span_7, "aria-level", $$props.depth + 1);
+        $9.set_attribute(span_7, "aria-posinset", $$props.position);
+        $9.set_attribute(span_7, "aria-setsize", $$props.setSize);
+      });
+      $9.append($$anchor2, span_7);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var span_9 = root_9();
+      var node_6 = $9.child(span_9);
+      {
+        var consequent_6 = ($$anchor3) => {
+          var span_10 = root_10();
+          var text_6 = $9.child(span_10);
+          $9.reset(span_10);
+          $9.template_effect(() => $9.set_text(text_6, `${$$props.keyName ?? ""}:`));
+          $9.append($$anchor3, span_10);
+        };
+        $9.if(node_6, ($$render) => {
+          if ($$props.keyName !== undefined)
+            $$render(consequent_6);
+        });
+      }
+      var span_11 = $9.sibling(node_6, 2);
+      var node_7 = $9.child(span_11);
+      {
+        var consequent_7 = ($$anchor3) => {
+          var text_7 = $9.text();
+          $9.template_effect(() => $9.set_text(text_7, `"${$$props.value ?? ""}"`));
+          $9.append($$anchor3, text_7);
+        };
+        var alternate = ($$anchor3) => {
+          var text_8 = $9.text();
+          $9.template_effect(($0) => $9.set_text(text_8, $0), [() => String($$props.value)]);
+          $9.append($$anchor3, text_8);
+        };
+        $9.if(node_7, ($$render) => {
+          if (typeof $$props.value === "string")
+            $$render(consequent_7);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $9.reset(span_11);
+      $9.reset(span_9);
+      $9.template_effect(($0) => {
+        $9.set_attribute(span_9, "tabindex", root7() ? 0 : -1);
+        $9.set_attribute(span_9, "aria-level", $$props.depth + 1);
+        $9.set_attribute(span_9, "aria-posinset", $$props.position);
+        $9.set_attribute(span_9, "aria-setsize", $$props.setSize);
+        $9.set_attribute(span_11, "data-cinder-type", $0);
+      }, [() => valueClass($$props.value)]);
+      $9.append($$anchor2, span_9);
+    };
+    $9.if(node, ($$render) => {
+      if ($9.get(isObject) && !$9.get(tooDeep))
+        $$render(consequent_3);
+      else if ($9.get(isObject) && $9.get(tooDeep))
+        $$render(consequent_5, 1);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $9.append($$anchor, fragment);
+  $9.pop();
+}
+$9.delegate(["click"]);
+
+// src/components/json-viewer/json-viewer.svelte
+var root_14 = $10.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p>This value can't be serialized as JSON (it may contain a circular reference or a BigInt).</p> <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p></div>`);
+var root_25 = $10.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p> </p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
+var root_33 = $10.from_html(`<div role="tree" aria-label="JSON tree" tabindex="-1"><!></div>`);
+var root7 = $10.from_html(`<div><!></div>`);
+function Json_viewer($$anchor, $$props) {
+  $10.push($$props, true);
+  let initialDepth = $10.prop($$props, "initialDepth", 3, 1), maxDepth = $10.prop($$props, "maxDepth", 3, 50), maxBytes = $10.prop($$props, "maxBytes", 3, 1048576);
+  const serialized = $10.derived(() => {
+    try {
+      const json = JSON.stringify($$props.value);
+      if (typeof json !== "string")
+        return { ok: false };
+      return { ok: true, size: new Blob([json]).size };
+    } catch {
+      return { ok: false };
+    }
+  });
+  const unserializable = $10.derived(() => !$10.get(serialized).ok);
+  const tooLarge = $10.derived(() => $10.get(serialized).ok && $10.get(serialized).size > maxBytes());
+  function handleTreeKeydown(event) {
+    const tree = event.currentTarget;
+    const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+    const current = eventTarget?.closest('[role="treeitem"]') ?? null;
+    const targetIsToggle = eventTarget?.closest(".cinder-json-viewer__toggle") !== null;
+    const currentIndex = current ? items.indexOf(current) : -1;
+    function focusItem(index2) {
+      const item = items[index2];
+      item?.focus();
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusItem(Math.min(currentIndex + 1, items.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusItem(Math.max(currentIndex - 1, 0));
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    } else if (event.key === "ArrowRight" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const firstChild = current.querySelector('.cinder-json-viewer__children [role="treeitem"]');
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+    } else if (event.key === "ArrowLeft" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else {
+        const parent = current.parentElement?.closest('[role="treeitem"]');
+        if (parent) {
+          event.preventDefault();
+          parent.focus();
+        }
+      }
+    } else if ((event.key === "Enter" || event.key === " " || event.key === "Spacebar") && current && !targetIsToggle) {
+      event.preventDefault();
+      const toggle = current.querySelector(".cinder-json-viewer__toggle");
+      toggle?.click();
+    }
+  }
+  var div = root7();
+  var node = $10.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_14();
+      $10.append($$anchor2, div_1);
+    };
+    var consequent_1 = ($$anchor2) => {
+      var div_2 = root_25();
+      var p = $10.child(div_2);
+      var text4 = $10.child(p);
+      $10.reset(p);
+      $10.next(2);
+      $10.reset(div_2);
+      $10.template_effect(($0, $1) => $10.set_text(text4, `Payload too large to render (~${$0 ?? ""} KB; cap
+        is ${$1 ?? ""} KB).`), [
+        () => Math.round(($10.get(serialized).ok ? $10.get(serialized).size : 0) / 1024),
+        () => Math.round(maxBytes() / 1024)
+      ]);
+      $10.append($$anchor2, div_2);
+    };
+    var alternate = ($$anchor2) => {
+      var div_3 = root_33();
+      var node_1 = $10.child(div_3);
+      _json_viewer_node(node_1, {
+        get value() {
+          return $$props.value;
+        },
+        depth: 0,
+        get initialDepth() {
+          return initialDepth();
+        },
+        get maxDepth() {
+          return maxDepth();
+        },
+        position: 1,
+        setSize: 1,
+        root: true
+      });
+      $10.reset(div_3);
+      $10.delegated("keydown", div_3, handleTreeKeydown);
+      $10.append($$anchor2, div_3);
+    };
+    $10.if(node, ($$render) => {
+      if ($10.get(unserializable))
+        $$render(consequent);
+      else if ($10.get(tooLarge))
+        $$render(consequent_1, 1);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $10.reset(div);
+  $10.template_effect(($0) => $10.set_class(div, 1, $0), [
+    () => $10.clsx(classNames("cinder-json-viewer", $$props.class))
+  ]);
+  $10.append($$anchor, div);
+  $10.pop();
+}
+$10.delegate(["keydown"]);
+
+// src/components/tabs/tabs.svelte
+import"svelte/internal/disclose-version";
+import * as $11 from "svelte/internal/client";
+
+// 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 index2 = 0;index2 < length; index2 += 1) {
+    if (!isDisabled(index2))
+      return index2;
+  }
+  return currentIndex;
+}
+function findLastIndex(length, isDisabled, currentIndex = 0) {
+  if (length === 0)
+    return -1;
+  if (!isDisabled)
+    return length - 1;
+  for (let index2 = length - 1;index2 >= 0; index2 -= 1) {
+    if (!isDisabled(index2))
+      return index2;
+  }
+  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/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
+// src/components/tabs/tabs.svelte
+var root8 = $11.from_html(`<div><!></div>`);
+function Tabs($$anchor, $$props) {
+  const baseId = $11.props_id();
+  $11.push($$props, true);
+  let value = $11.prop($$props, "value", 15, ""), orientation = $11.prop($$props, "orientation", 3, "horizontal");
+  const effectiveActivateOnFocus = $11.derived(() => $$props.activateOnFocus ?? orientation() === "horizontal");
+  const buttons = new Map;
+  let version = $11.state(0);
+  const focusableValue = $11.derived(() => {
+    $11.get(version);
+    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();
+      commitValue(focusedValue, $$props.onValueChange, (next3) => {
+        value(next3);
+      });
+      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 ($11.get(effectiveActivateOnFocus)) {
+      commitValue(nextValue, $$props.onValueChange, (next3) => {
+        value(next3);
+      });
+    }
+  }
+  setTabsContext({
+    get value() {
+      return value();
+    },
+    get orientation() {
+      return orientation();
+    },
+    get activateOnFocus() {
+      return $11.get(effectiveActivateOnFocus);
+    },
+    get baseId() {
+      return baseId;
+    },
+    select(next3) {
+      commitValue(next3, $$props.onValueChange, (nextValue) => {
+        value(nextValue);
+      });
+    },
+    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 });
+      }
+      $11.set(version, $11.get(version) + 1);
+    },
+    unregister(target) {
+      if (buttons.delete(target)) {
+        $11.set(version, $11.get(version) + 1);
+      }
+    },
+    setDisabled(target, disabled) {
+      const existing = buttons.get(target);
+      if (!existing)
+        return;
+      if (existing.disabled === disabled)
+        return;
+      existing.disabled = disabled;
+      $11.set(version, $11.get(version) + 1);
+    },
+    isFocusable(candidate) {
+      value();
+      $11.get(version);
+      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 $11.get(focusableValue) === candidate;
+    },
+    handleKeydown
+  });
+  var div = root8();
+  var node = $11.child(div);
+  $11.snippet(node, () => $$props.children);
+  $11.reset(div);
+  $11.template_effect(($0) => {
+    $11.set_class(div, 1, $0);
+    $11.set_attribute(div, "data-cinder-orientation", orientation());
+  }, [() => $11.clsx(classNames("cinder-tabs", $$props.class))]);
+  $11.append($$anchor, div);
+  $11.pop();
+}
+
+// src/components/tab-list/tab-list.svelte
+import"svelte/internal/disclose-version";
+import * as $12 from "svelte/internal/client";
+var root9 = $12.from_html(`<div role="tablist"><!></div>`);
+function Tab_list($$anchor, $$props) {
+  $12.push($$props, true);
+  const tabs = getTabsContext();
+  var div = root9();
+  var node = $12.child(div);
+  $12.snippet(node, () => $$props.children);
+  $12.reset(div);
+  $12.template_effect(($0) => {
+    $12.set_class(div, 1, $0);
+    $12.set_attribute(div, "data-cinder-orientation", tabs.orientation);
+    $12.set_attribute(div, "aria-label", $$props.label);
+    $12.set_attribute(div, "aria-labelledby", $$props.labelledBy);
+    $12.set_attribute(div, "aria-orientation", tabs.orientation);
+  }, [() => $12.clsx(classNames("cinder-tab-list", $$props.class))]);
+  $12.append($$anchor, div);
+  $12.pop();
+}
+
+// src/components/tab/tab.svelte
+import"svelte/internal/disclose-version";
+import * as $13 from "svelte/internal/client";
+import { untrack as untrack3 } from "svelte";
+
+// src/_internal/collection.ts
+function createSingleSelection(getValue, setValue) {
+  return {
+    get value() {
+      return getValue();
+    },
+    select(next3) {
+      setValue(next3);
+    },
+    isSelected(candidate) {
+      return getValue() === candidate;
+    }
+  };
+}
+function createMultiSelection(getValues, setValues) {
+  return {
+    get values() {
+      return getValues();
+    },
+    toggle(item) {
+      const current = getValues();
+      const index2 = current.indexOf(item);
+      if (index2 === -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
+var root_15 = $13.from_html(`<span class="cinder-tab__trailing" aria-hidden="true"><!></span>`);
+var root10 = $13.from_html(`<button type="button" role="tab"><!> <!></button>`);
+function Tab($$anchor, $$props) {
+  $13.push($$props, true);
+  let disabled = $13.prop($$props, "disabled", 3, false);
+  const tabs = getTabsContext();
+  const tabId = $13.derived(() => $$props.id ?? `${tabs.baseId}-tab-${$$props.value}`);
+  const panelId = $13.derived(() => `${tabs.baseId}-panel-${$$props.value}`);
+  const isActive = $13.derived(() => tabs.isActive($$props.value));
+  const isFocusable = $13.derived(() => tabs.isFocusable($$props.value));
+  let buttonElement = $13.state(undefined);
+  const registeredValue = untrack3(() => $$props.value);
+  $13.user_effect(() => {
+    if (!$13.get(buttonElement))
+      return;
+    const button = $13.get(buttonElement);
+    const initialDisabled = untrack3(() => disabled());
+    untrack3(() => {
+      tabs.register(registeredValue, button, initialDisabled);
+    });
+    return () => {
+      untrack3(() => {
+        tabs.unregister(registeredValue);
+      });
+    };
+  });
+  $13.user_effect(() => {
+    const next3 = disabled();
+    untrack3(() => {
+      tabs.setDisabled(registeredValue, next3);
+    });
+  });
+  function handleClick() {
+    if (disabled())
+      return;
+    tabs.select($$props.value);
+  }
+  var button_1 = root10();
+  var node = $13.child(button_1);
+  $13.snippet(node, () => $$props.children);
+  var node_1 = $13.sibling(node, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_15();
+      var node_2 = $13.child(span);
+      $13.snippet(node_2, () => $$props.trailing);
+      $13.reset(span);
+      $13.append($$anchor2, span);
+    };
+    $13.if(node_1, ($$render) => {
+      if ($$props.trailing)
+        $$render(consequent);
+    });
+  }
+  $13.reset(button_1);
+  $13.bind_this(button_1, ($$value) => $13.set(buttonElement, $$value), () => $13.get(buttonElement));
+  $13.template_effect(($0, $1) => {
+    $13.set_attribute(button_1, "id", $13.get(tabId));
+    $13.set_class(button_1, 1, $0);
+    $13.set_attribute(button_1, "data-cinder-value", $$props.value);
+    $13.set_attribute(button_1, "data-cinder-active", $13.get(isActive) ? "" : undefined);
+    $13.set_attribute(button_1, "data-cinder-disabled", disabled() || undefined);
+    $13.set_attribute(button_1, "data-variant", tabs.orientation);
+    $13.set_attribute(button_1, "aria-selected", $13.get(isActive));
+    $13.set_attribute(button_1, "aria-controls", $13.get(panelId));
+    $13.set_attribute(button_1, "tabindex", $1);
+    button_1.disabled = disabled();
+  }, [
+    () => $13.clsx(classNames("cinder-tab", $$props.class)),
+    () => rovingTabIndex($13.get(isFocusable))
+  ]);
+  $13.delegated("click", button_1, handleClick);
+  $13.delegated("keydown", button_1, function(...$$args) {
+    tabs.handleKeydown?.apply(this, $$args);
+  });
+  $13.append($$anchor, button_1);
+  $13.pop();
+}
+$13.delegate(["click", "keydown"]);
+
+// src/components/tab-panel/tab-panel.svelte
+import"svelte/internal/disclose-version";
+import * as $14 from "svelte/internal/client";
+var root_16 = $14.from_html(`<div role="tabpanel" tabindex="0"><!></div>`);
+function Tab_panel($$anchor, $$props) {
+  $14.push($$props, true);
+  const tabs = getTabsContext();
+  const isActive = $14.derived(() => tabs.isActive($$props.value));
+  const panelId = $14.derived(() => `${tabs.baseId}-panel-${$$props.value}`);
+  const labelledBy = $14.derived(() => $$props.ariaLabelledby ?? `${tabs.baseId}-tab-${$$props.value}`);
+  var fragment = $14.comment();
+  var node = $14.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_16();
+      var node_1 = $14.child(div);
+      $14.snippet(node_1, () => $$props.children);
+      $14.reset(div);
+      $14.template_effect(($0) => {
+        $14.set_attribute(div, "id", $14.get(panelId));
+        $14.set_class(div, 1, $0);
+        $14.set_attribute(div, "data-cinder-value", $$props.value);
+        $14.set_attribute(div, "aria-labelledby", $14.get(labelledBy));
+      }, [() => $14.clsx(classNames("cinder-tab-panel", $$props.class))]);
+      $14.append($$anchor2, div);
+    };
+    $14.if(node, ($$render) => {
+      if ($14.get(isActive))
+        $$render(consequent);
+    });
+  }
+  $14.append($$anchor, fragment);
+  $14.pop();
+}
+
+// src/components/payload-inspector/payload-inspector.svelte
+var root_17 = $15.from_html(`<span class="cinder-payload-inspector__size"> </span>`);
+var root_73 = $15.from_html(`<!> <!> <!>`, 1);
+var root_122 = $15.from_html(`<div class="cinder-payload-inspector__empty" role="status">No payload</div>`);
+var root_18 = $15.from_html(`<div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning" role="alert"> </div>`);
+var root_19 = $15.from_html(`<div class="cinder-payload-inspector__summary-value"><span class="cinder-payload-inspector__summary-value-label">Value</span> <span class="cinder-payload-inspector__primitive"> </span></div>`);
+var root_132 = $15.from_html(`<div class="cinder-payload-inspector__summary"><div class="cinder-payload-inspector__summary-badges"><!> <!></div> <!> <!> <!></div>`);
+var root_11 = $15.from_html(`<div class="cinder-payload-inspector__panel"><!> <!></div>`);
+var root_21 = $15.from_html(`<div class="cinder-payload-inspector__empty" role="status">No payload</div>`);
+var root_222 = $15.from_html(`<div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning" role="alert"> </div>`);
+var root_232 = $15.from_html(`<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>`);
+var root_20 = $15.from_html(`<div class="cinder-payload-inspector__panel"><!> <!> <!> <!></div>`);
+var root_26 = $15.from_html(`<div class="cinder-payload-inspector__empty" role="status">No payload</div>`);
+var root_27 = $15.from_html(`<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>`);
+var root_28 = $15.from_html(`<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>`);
+var root_252 = $15.from_html(`<div class="cinder-payload-inspector__panel cinder-payload-inspector__panel--code"><!> <!> <!> <!></div>`);
+var root_63 = $15.from_html(`<!> <!> <!> <!>`, 1);
+var root11 = $15.from_html(`<section><div class="cinder-payload-inspector__header"><span class="cinder-payload-inspector__label"> </span> <div class="cinder-payload-inspector__header-actions"><!> <!> <!> <!></div></div> <div class="cinder-payload-inspector__tabs"><!></div></section>`);
+function Payload_inspector($$anchor, $$props) {
+  $15.push($$props, true);
+  let truncated = $15.prop($$props, "truncated", 3, false), maxBytes = $15.prop($$props, "maxBytes", 3, 1048576), activeView = $15.prop($$props, "activeView", 15, "summary"), label = $15.prop($$props, "label", 3, "Payload inspector"), rest = $15.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "value",
+    "truncated",
+    "maxBytes",
+    "meta",
+    "format",
+    "parse",
+    "activeView",
+    "label",
+    "class"
+  ]);
+  function shouldParseString(raw) {
+    const trimmed = raw.trim();
+    if (/^[{\["]/.test(trimmed))
+      return true;
+    return /^(?:true|false|null|-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)$/.test(trimmed);
+  }
+  const parseResult = $15.derived(() => {
+    if (typeof $$props.value !== "string") {
+      return { ok: true, parsed: $$props.value };
+    }
+    if ($$props.value.trim() === "") {
+      return { ok: true, parsed: null };
+    }
+    if ($$props.parse === undefined && !shouldParseString($$props.value)) {
+      return { ok: true, parsed: $$props.value };
+    }
+    try {
+      const parser = $$props.parse ?? JSON.parse;
+      return { ok: true, parsed: parser($$props.value) };
+    } catch (error) {
+      return {
+        ok: false,
+        error: error instanceof Error ? error.message : String(error)
+      };
+    }
+  });
+  const parsedValue = $15.derived(() => $15.get(parseResult).ok ? $15.get(parseResult).parsed : undefined);
+  const sizeResult = $15.derived(() => {
+    if (!$15.get(parseResult).ok)
+      return { ok: false };
+    try {
+      const json = JSON.stringify($15.get(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 (!$15.get(sizeResult).ok)
+      return "Unknown size";
+    const bytes = $15.get(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 (!$15.get(parseResult).ok) {
+      return typeof $$props.value === "string" ? $$props.value : "";
+    }
+    try {
+      const formatter = $$props.format ?? ((v) => JSON.stringify(v, null, 2));
+      return formatter($15.get(parsedValue)) ?? "";
+    } catch {
+      return typeof $$props.value === "string" ? $$props.value : "";
+    }
+  });
+  const unserializable = $15.derived(() => {
+    if (typeof $$props.value === "string" || !$15.get(parseResult).ok)
+      return false;
+    try {
+      JSON.stringify($15.get(parsedValue));
+      return false;
+    } catch {
+      return true;
+    }
+  });
+  const summaryItems = $15.derived(() => {
+    const items = [];
+    items.push({ term: "Size", definition: $15.get(byteLabel) });
+    if ($$props.meta?.contentType) {
+      items.push({ term: "Content type", definition: $$props.meta.contentType });
+    }
+    if ($$props.meta?.source) {
+      items.push({ term: "Source", definition: $$props.meta.source });
+    }
+    if ($$props.meta?.timestamp) {
+      let displayTime = $$props.meta.timestamp;
+      try {
+        displayTime = new Date($$props.meta.timestamp).toLocaleString();
+      } catch {}
+      items.push({ term: "Timestamp", definition: displayTime });
+    }
+    return items;
+  });
+  const valueKind = $15.derived(() => {
+    if (!$15.get(parseResult).ok)
+      return "invalid";
+    const v = $15.get(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(() => $15.get(valueKind) === "null" || $15.get(valueKind) === "undefined" || $15.get(valueKind) === "boolean" || $15.get(valueKind) === "number" || $15.get(valueKind) === "string");
+  const isEmpty = $15.derived(() => $15.get(parsedValue) === undefined && $$props.value === undefined);
+  const copyRawText = $15.derived(() => {
+    if (typeof $$props.value === "string")
+      return $$props.value;
+    if (!$15.get(parseResult).ok)
+      return "";
+    try {
+      return JSON.stringify($15.get(parsedValue)) ?? "";
+    } catch {
+      return "";
+    }
+  });
+  const copyFormattedText = $15.derived(() => {
+    if (!$15.get(parseResult).ok)
+      return $15.get(rawText);
+    try {
+      return JSON.stringify($15.get(parsedValue), null, 2) ?? "";
+    } catch {
+      return $15.get(rawText);
+    }
+  });
+  const canCopyFormatted = $15.derived(() => !$15.get(isEmpty) && $15.get(parseResult).ok && !$15.get(unserializable));
+  const canCopyRaw = $15.derived(() => !$15.get(isEmpty) && (typeof $$props.value === "string" || $15.get(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";
+  }
+  var section = root11();
+  $15.attribute_effect(section, ($0) => ({ ...rest, class: $0, "aria-label": label() }), [() => classNames("cinder-payload-inspector", $$props.class)]);
+  var div = $15.child(section);
+  var span = $15.child(div);
+  var text5 = $15.child(span, true);
+  $15.reset(span);
+  var div_1 = $15.sibling(span, 2);
+  var node = $15.child(div_1);
+  {
+    var consequent = ($$anchor2) => {
+      var span_1 = root_17();
+      var text_1 = $15.child(span_1, true);
+      $15.reset(span_1);
+      $15.template_effect(() => {
+        $15.set_attribute(span_1, "aria-label", `${$15.get(byteLabel)} payload size`);
+        $15.set_text(text_1, $15.get(byteLabel));
+      });
+      $15.append($$anchor2, span_1);
+    };
+    $15.if(node, ($$render) => {
+      if ($15.get(sizeResult).ok)
+        $$render(consequent);
+    });
+  }
+  var node_1 = $15.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      Badge($$anchor2, {
+        variant: "warning",
+        size: "xs",
+        children: ($$anchor3, $$slotProps) => {
+          $15.next();
+          var text_2 = $15.text("Truncated");
+          $15.append($$anchor3, text_2);
+        },
+        $$slots: { default: true }
+      });
+    };
+    $15.if(node_1, ($$render) => {
+      if (truncated())
+        $$render(consequent_1);
+    });
+  }
+  var node_2 = $15.sibling(node_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      Copy_button($$anchor2, {
+        get value() {
+          return $15.get(copyFormattedText);
+        },
+        label: "Copy formatted",
+        copiedLabel: "Formatted copied",
+        title: "Copy formatted payload",
+        iconOnly: true
+      });
+    };
+    $15.if(node_2, ($$render) => {
+      if ($15.get(canCopyFormatted))
+        $$render(consequent_2);
+    });
+  }
+  var node_3 = $15.sibling(node_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      Copy_button($$anchor2, {
+        get value() {
+          return $15.get(copyRawText);
+        },
+        label: "Copy raw",
+        copiedLabel: "Raw copied",
+        title: "Copy raw payload",
+        iconOnly: true
+      });
+    };
+    $15.if(node_3, ($$render) => {
+      if ($15.get(canCopyRaw))
+        $$render(consequent_3);
+    });
+  }
+  $15.reset(div_1);
+  $15.reset(div);
+  var div_2 = $15.sibling(div, 2);
+  var node_4 = $15.child(div_2);
+  Tabs(node_4, {
+    get value() {
+      return activeView();
+    },
+    set value($$value) {
+      activeView($$value);
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_3 = root_63();
+      var node_5 = $15.first_child(fragment_3);
+      Tab_list(node_5, {
+        label: "Inspector views",
+        children: ($$anchor3, $$slotProps2) => {
+          var fragment_4 = root_73();
+          var node_6 = $15.first_child(fragment_4);
+          Tab(node_6, {
+            value: "summary",
+            children: ($$anchor4, $$slotProps3) => {
+              $15.next();
+              var text_3 = $15.text("Summary");
+              $15.append($$anchor4, text_3);
+            },
+            $$slots: { default: true }
+          });
+          var node_7 = $15.sibling(node_6, 2);
+          Tab(node_7, {
+            value: "tree",
+            children: ($$anchor4, $$slotProps3) => {
+              $15.next();
+              var text_4 = $15.text("Tree");
+              $15.append($$anchor4, text_4);
+            },
+            $$slots: { default: true }
+          });
+          var node_8 = $15.sibling(node_7, 2);
+          Tab(node_8, {
+            value: "raw",
+            children: ($$anchor4, $$slotProps3) => {
+              $15.next();
+              var text_5 = $15.text("Raw");
+              $15.append($$anchor4, text_5);
+            },
+            $$slots: { default: true }
+          });
+          $15.append($$anchor3, fragment_4);
+        },
+        $$slots: { default: true }
+      });
+      var node_9 = $15.sibling(node_5, 2);
+      Tab_panel(node_9, {
+        value: "summary",
+        children: ($$anchor3, $$slotProps2) => {
+          var div_3 = root_11();
+          var node_10 = $15.child(div_3);
+          {
+            var consequent_4 = ($$anchor4) => {
+              var div_4 = root_122();
+              $15.append($$anchor4, div_4);
+            };
+            $15.if(node_10, ($$render) => {
+              if ($15.get(isEmpty))
+                $$render(consequent_4);
+            });
+          }
+          var node_11 = $15.sibling(node_10, 2);
+          {
+            var consequent_9 = ($$anchor4) => {
+              var div_5 = root_132();
+              var div_6 = $15.child(div_5);
+              var node_12 = $15.child(div_6);
+              {
+                let $0 = $15.derived(() => kindVariant($15.get(valueKind)));
+                Badge(node_12, {
+                  get variant() {
+                    return $15.get($0);
+                  },
+                  size: "xs",
+                  mono: true,
+                  children: ($$anchor5, $$slotProps3) => {
+                    $15.next();
+                    var text_6 = $15.text();
+                    $15.template_effect(() => $15.set_text(text_6, $15.get(valueKind)));
+                    $15.append($$anchor5, text_6);
+                  },
+                  $$slots: { default: true }
+                });
+              }
+              var node_13 = $15.sibling(node_12, 2);
+              {
+                var consequent_5 = ($$anchor5) => {
+                  Badge($$anchor5, {
+                    variant: "warning",
+                    size: "xs",
+                    children: ($$anchor6, $$slotProps3) => {
+                      $15.next();
+                      var text_7 = $15.text("Truncated");
+                      $15.append($$anchor6, text_7);
+                    },
+                    $$slots: { default: true }
+                  });
+                };
+                $15.if(node_13, ($$render) => {
+                  if (truncated())
+                    $$render(consequent_5);
+                });
+              }
+              $15.reset(div_6);
+              var node_14 = $15.sibling(div_6, 2);
+              {
+                var consequent_6 = ($$anchor5) => {
+                  Description_list($$anchor5, {
+                    get items() {
+                      return $15.get(summaryItems);
+                    },
+                    variant: "two-column"
+                  });
+                };
+                $15.if(node_14, ($$render) => {
+                  if ($15.get(summaryItems).length > 0)
+                    $$render(consequent_6);
+                });
+              }
+              var node_15 = $15.sibling(node_14, 2);
+              {
+                var consequent_7 = ($$anchor5) => {
+                  var div_7 = root_18();
+                  var text_8 = $15.child(div_7);
+                  $15.reset(div_7);
+                  $15.template_effect(() => $15.set_text(text_8, `Parse error: ${$15.get(parseResult).error ?? ""}`));
+                  $15.append($$anchor5, div_7);
+                };
+                $15.if(node_15, ($$render) => {
+                  if (!$15.get(parseResult).ok)
+                    $$render(consequent_7);
+                });
+              }
+              var node_16 = $15.sibling(node_15, 2);
+              {
+                var consequent_8 = ($$anchor5) => {
+                  var div_8 = root_19();
+                  var span_2 = $15.sibling($15.child(div_8), 2);
+                  var text_9 = $15.child(span_2, true);
+                  $15.reset(span_2);
+                  $15.reset(div_8);
+                  $15.template_effect(($0) => $15.set_text(text_9, $0), [() => String($15.get(parsedValue))]);
+                  $15.append($$anchor5, div_8);
+                };
+                $15.if(node_16, ($$render) => {
+                  if ($15.get(parseResult).ok && $15.get(isPrimitive))
+                    $$render(consequent_8);
+                });
+              }
+              $15.reset(div_5);
+              $15.append($$anchor4, div_5);
+            };
+            $15.if(node_11, ($$render) => {
+              if (!$15.get(isEmpty))
+                $$render(consequent_9);
+            });
+          }
+          $15.reset(div_3);
+          $15.append($$anchor3, div_3);
+        },
+        $$slots: { default: true }
+      });
+      var node_17 = $15.sibling(node_9, 2);
+      Tab_panel(node_17, {
+        value: "tree",
+        children: ($$anchor3, $$slotProps2) => {
+          var div_9 = root_20();
+          var node_18 = $15.child(div_9);
+          {
+            var consequent_10 = ($$anchor4) => {
+              var div_10 = root_21();
+              $15.append($$anchor4, div_10);
+            };
+            $15.if(node_18, ($$render) => {
+              if ($15.get(isEmpty))
+                $$render(consequent_10);
+            });
+          }
+          var node_19 = $15.sibling(node_18, 2);
+          {
+            var consequent_11 = ($$anchor4) => {
+              var div_11 = root_222();
+              var text_10 = $15.child(div_11);
+              $15.reset(div_11);
+              $15.template_effect(() => $15.set_text(text_10, `Cannot render tree: ${$15.get(parseResult).error ?? ""}`));
+              $15.append($$anchor4, div_11);
+            };
+            $15.if(node_19, ($$render) => {
+              if (!$15.get(isEmpty) && !$15.get(parseResult).ok)
+                $$render(consequent_11);
+            });
+          }
+          var node_20 = $15.sibling(node_19, 2);
+          {
+            var consequent_12 = ($$anchor4) => {
+              var div_12 = root_232();
+              $15.append($$anchor4, div_12);
+            };
+            $15.if(node_20, ($$render) => {
+              if (!$15.get(isEmpty) && $15.get(parseResult).ok && $15.get(unserializable))
+                $$render(consequent_12);
+            });
+          }
+          var node_21 = $15.sibling(node_20, 2);
+          {
+            var consequent_13 = ($$anchor4) => {
+              Json_viewer($$anchor4, {
+                get value() {
+                  return $15.get(parsedValue);
+                },
+                get maxBytes() {
+                  return maxBytes();
+                }
+              });
+            };
+            $15.if(node_21, ($$render) => {
+              if (!$15.get(isEmpty) && $15.get(parseResult).ok && !$15.get(unserializable))
+                $$render(consequent_13);
+            });
+          }
+          $15.reset(div_9);
+          $15.append($$anchor3, div_9);
+        },
+        $$slots: { default: true }
+      });
+      var node_22 = $15.sibling(node_17, 2);
+      Tab_panel(node_22, {
+        value: "raw",
+        children: ($$anchor3, $$slotProps2) => {
+          var div_13 = root_252();
+          var node_23 = $15.child(div_13);
+          {
+            var consequent_14 = ($$anchor4) => {
+              var div_14 = root_26();
+              $15.append($$anchor4, div_14);
+            };
+            $15.if(node_23, ($$render) => {
+              if ($15.get(isEmpty))
+                $$render(consequent_14);
+            });
+          }
+          var node_24 = $15.sibling(node_23, 2);
+          {
+            var consequent_15 = ($$anchor4) => {
+              var div_15 = root_27();
+              $15.append($$anchor4, div_15);
+            };
+            $15.if(node_24, ($$render) => {
+              if (!$15.get(isEmpty) && truncated())
+                $$render(consequent_15);
+            });
+          }
+          var node_25 = $15.sibling(node_24, 2);
+          {
+            var consequent_16 = ($$anchor4) => {
+              var div_16 = root_28();
+              $15.append($$anchor4, div_16);
+            };
+            $15.if(node_25, ($$render) => {
+              if (!$15.get(isEmpty) && $15.get(unserializable))
+                $$render(consequent_16);
+            });
+          }
+          var node_26 = $15.sibling(node_25, 2);
+          {
+            var consequent_17 = ($$anchor4) => {
+              Code_block($$anchor4, {
+                get code() {
+                  return $15.get(rawText);
+                },
+                highlight: false,
+                class: "cinder-payload-inspector__raw"
+              });
+            };
+            $15.if(node_26, ($$render) => {
+              if (!$15.get(isEmpty) && !$15.get(unserializable))
+                $$render(consequent_17);
+            });
+          }
+          $15.reset(div_13);
+          $15.append($$anchor3, div_13);
+        },
+        $$slots: { default: true }
+      });
+      $15.append($$anchor2, fragment_3);
+    },
+    $$slots: { default: true }
+  });
+  $15.reset(div_2);
+  $15.reset(section);
+  $15.template_effect(() => $15.set_text(text5, label()));
+  $15.append($$anchor, section);
+  $15.pop();
+}
+
+// src/components/payload-inspector/index.ts
+var payload_inspector_default = Payload_inspector;
+export {
+  payload_inspector_default as default,
+  Payload_inspector as PayloadInspector
+};
+
+//# debugId=1F34B6B642EE189264756E2164756E21