@lostgradient/cinder 0.3.0 → 0.4.1

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

@@ -138,9 +138,46 @@ function classNames(...parts) {
 }
 
 // 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",
@@ -148,19 +185,78 @@ function Badge($$anchor, $$props) {
     "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": variant(),
+    "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);
-  $.snippet(node, () => $$props.children ?? $.noop);
+  {
+    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();
@@ -193,7 +289,6 @@ function devWarn(message, ...args) {
 // src/components/copy-button/copy-button.svelte
 import"svelte/internal/disclose-version";
 import * as $6 from "svelte/internal/client";
-import { onDestroy } from "svelte";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 import"svelte/internal/disclose-version";
@@ -330,20 +425,20 @@ function Copy($$anchor, $$props) {
   }));
 }
 // src/utilities/clipboard.ts
-async function copyToClipboard(text) {
+async function copyToClipboard(text2) {
   if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
     try {
-      await navigator.clipboard.writeText(text);
+      await navigator.clipboard.writeText(text2);
       return true;
     } catch {}
   }
-  return legacyCopy(text);
+  return legacyCopy(text2);
 }
-function legacyCopy(text) {
+function legacyCopy(text2) {
   if (typeof document === "undefined")
     return false;
   const textarea = document.createElement("textarea");
-  textarea.value = text;
+  textarea.value = text2;
   textarea.setAttribute("readonly", "");
   textarea.setAttribute("aria-hidden", "true");
   textarea.setAttribute("tabindex", "-1");
@@ -400,13 +495,13 @@ function _visually_hidden_live_region($$anchor, $$props) {
     }, 0);
   });
   var div = root3();
-  var text = $5.child(div, true);
+  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(text, $5.get(rendered));
+    $5.set_text(text2, $5.get(rendered));
   }, [() => $5.clsx(classNames("cinder-sr-only", $$props.class))]);
   $5.append($$anchor, div);
   $5.pop();
@@ -443,9 +538,11 @@ function Copy_button($$anchor, $$props) {
       $6.set(copied, false);
     }, confirmDuration());
   }
-  onDestroy(() => {
-    if (resetTimer)
-      clearTimeout(resetTimer);
+  $6.user_effect(() => {
+    return () => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    };
   });
   var fragment = root4();
   var button = $6.first_child(fragment);
@@ -469,8 +566,8 @@ function Copy_button($$anchor, $$props) {
       Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
-      var text2 = $6.text("Copied");
-      $6.append($$anchor2, text2);
+      var text3 = $6.text("Copied");
+      $6.append($$anchor2, text3);
     };
     var consequent_3 = ($$anchor2) => {
       var fragment_3 = $6.comment();
@@ -512,8 +609,8 @@ function Copy_button($$anchor, $$props) {
 }
 
 // src/components/code-block/code-block.svelte
-var root_2 = $7.from_html(`<span class="cinder-code-block__language"> </span>`);
-var root_1 = $7.from_html(`<header class="cinder-code-block__header"><!> <!></header>`);
+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>`);
@@ -555,14 +652,14 @@ function Code_block($$anchor, $$props) {
   var node = $7.child(div);
   {
     var consequent_2 = ($$anchor2) => {
-      var header = root_1();
+      var header = root_12();
       var node_1 = $7.child(header);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2();
-          var text2 = $7.child(span, true);
+          var span = root_22();
+          var text3 = $7.child(span, true);
           $7.reset(span);
-          $7.template_effect(() => $7.set_text(text2, $$props.language));
+          $7.template_effect(() => $7.set_text(text3, $$props.language));
           $7.append($$anchor3, span);
         };
         $7.if(node_1, ($$render) => {
@@ -647,8 +744,8 @@ function Code_block($$anchor, $$props) {
 // src/components/description-list/description-list.svelte
 import"svelte/internal/disclose-version";
 import * as $8 from "svelte/internal/client";
-var root_22 = $8.from_html(`<div class="cinder-description-list__actions"><!></div>`);
-var root_12 = $8.from_html(`<div class="cinder-description-list__row"><dt> </dt> <dd><div class="cinder-description-list__definition"> </div> <!></dd></div>`);
+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);
@@ -685,9 +782,9 @@ function Description_list($$anchor, $$props) {
   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_12();
+    var div = root_13();
     var dt = $8.child(div);
-    var text2 = $8.child(dt, true);
+    var text3 = $8.child(dt, true);
     $8.reset(dt);
     var dd = $8.sibling(dt, 2);
     var div_1 = $8.child(dd);
@@ -696,7 +793,7 @@ function Description_list($$anchor, $$props) {
     var node = $8.sibling(div_1, 2);
     {
       var consequent = ($$anchor3) => {
-        var div_2 = root_22();
+        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);
@@ -711,7 +808,7 @@ function Description_list($$anchor, $$props) {
     $8.reset(div);
     $8.template_effect(() => {
       $8.set_class(dt, 1, $8.clsx(variant() === "narrow" ? "cinder-sr-only" : undefined));
-      $8.set_text(text2, $8.get(item).term);
+      $8.set_text(text3, $8.get(item).term);
       $8.set_text(text_1, $8.get(item).definition);
     });
     $8.append($$anchor2, div);
@@ -729,17 +826,18 @@ import * as $10 from "svelte/internal/client";
 import"svelte/internal/disclose-version";
 import * as $9 from "svelte/internal/client";
 import { untrack as untrack2 } from "svelte";
-var root_23 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_3 = $9.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_5 = $9.from_html(`<li><!></li>`);
-var root_42 = $9.from_html(`<ul class="cinder-json-viewer__children"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_13 = $9.from_html(`<span><button type="button" class="cinder-json-viewer__toggle"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
-var root_72 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_62 = $9.from_html(`<span class="cinder-json-viewer__node"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
-var root_9 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_8 = $9.from_html(`<span class="cinder-json-viewer__node"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
+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);
@@ -770,15 +868,15 @@ function _json_viewer_node($$anchor, $$props) {
   var node = $9.first_child(fragment);
   {
     var consequent_3 = ($$anchor2) => {
-      var span = root_13();
+      var span = root_24();
       var button = $9.child(span);
       var node_1 = $9.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span_1 = root_23();
-          var text3 = $9.child(span_1);
+          var span_1 = root_32();
+          var text4 = $9.child(span_1);
           $9.reset(span_1);
-          $9.template_effect(() => $9.set_text(text3, `${$$props.keyName ?? ""}:`));
+          $9.template_effect(() => $9.set_text(text4, `${$$props.keyName ?? ""}:`));
           $9.append($$anchor3, span_1);
         };
         $9.if(node_1, ($$render) => {
@@ -793,7 +891,7 @@ function _json_viewer_node($$anchor, $$props) {
       var node_2 = $9.sibling(span_3, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment_1 = root_3();
+          var fragment_1 = root_42();
           var span_4 = $9.first_child(fragment_1);
           var text_2 = $9.child(span_4);
           $9.reset(span_4);
@@ -815,16 +913,17 @@ function _json_viewer_node($$anchor, $$props) {
       var node_3 = $9.sibling(button, 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_2 = root_42();
+          var fragment_2 = root_5();
           var ul = $9.first_child(fragment_2);
-          $9.each(ul, 21, () => $9.get(entries), ([k, v]) => k, ($$anchor4, $$item) => {
+          $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_5();
+            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();
@@ -840,6 +939,12 @@ function _json_viewer_node($$anchor, $$props) {
                 },
                 get maxDepth() {
                   return $$props.maxDepth;
+                },
+                get position() {
+                  return $9.get($1);
+                },
+                get setSize() {
+                  return $9.get(entries).length;
                 }
               });
             }
@@ -861,7 +966,12 @@ function _json_viewer_node($$anchor, $$props) {
       $9.reset(span);
       $9.template_effect(($0) => {
         $9.set_class(span, 1, $0);
-        $9.set_attribute(button, "aria-expanded", !$9.get(collapsed));
+        $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) ? "[" : "{");
@@ -870,11 +980,11 @@ function _json_viewer_node($$anchor, $$props) {
       $9.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_62();
+      var span_7 = root_72();
       var node_5 = $9.child(span_7);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_72();
+          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 ?? ""}:`));
@@ -887,14 +997,20 @@ function _json_viewer_node($$anchor, $$props) {
       }
       $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_8();
+      var span_9 = root_9();
       var node_6 = $9.child(span_9);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_9();
+          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 ?? ""}:`));
@@ -927,7 +1043,13 @@ function _json_viewer_node($$anchor, $$props) {
       }
       $9.reset(span_11);
       $9.reset(span_9);
-      $9.template_effect(($0) => $9.set_attribute(span_11, "data-cinder-type", $0), [() => valueClass($$props.value)]);
+      $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) => {
@@ -946,7 +1068,8 @@ $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_24 = $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_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);
@@ -963,6 +1086,57 @@ function Json_viewer($$anchor, $$props) {
   });
   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);
   {
@@ -971,13 +1145,13 @@ function Json_viewer($$anchor, $$props) {
       $10.append($$anchor2, div_1);
     };
     var consequent_1 = ($$anchor2) => {
-      var div_2 = root_24();
+      var div_2 = root_25();
       var p = $10.child(div_2);
-      var text3 = $10.child(p);
+      var text4 = $10.child(p);
       $10.reset(p);
       $10.next(2);
       $10.reset(div_2);
-      $10.template_effect(($0, $1) => $10.set_text(text3, `Payload too large to render (~${$0 ?? ""} KB; cap
+      $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)
@@ -985,7 +1159,9 @@ function Json_viewer($$anchor, $$props) {
       $10.append($$anchor2, div_2);
     };
     var alternate = ($$anchor2) => {
-      _json_viewer_node($$anchor2, {
+      var div_3 = root_33();
+      var node_1 = $10.child(div_3);
+      _json_viewer_node(node_1, {
         get value() {
           return $$props.value;
         },
@@ -995,8 +1171,14 @@ function Json_viewer($$anchor, $$props) {
         },
         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))
@@ -1014,6 +1196,7 @@ function Json_viewer($$anchor, $$props) {
   $10.append($$anchor, div);
   $10.pop();
 }
+$10.delegate(["keydown"]);
 
 // src/components/tabs/tabs.svelte
 import"svelte/internal/disclose-version";
@@ -1094,6 +1277,13 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
   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) {
@@ -1166,7 +1356,9 @@ function Tabs($$anchor, $$props) {
       if (focusedValue === undefined)
         return;
       event.preventDefault();
-      value(focusedValue);
+      commitValue(focusedValue, $$props.onValueChange, (next3) => {
+        value(next3);
+      });
       return;
     }
     const isHorizontal = orientation() === "horizontal";
@@ -1194,7 +1386,9 @@ function Tabs($$anchor, $$props) {
       return;
     focusValue(nextValue);
     if ($11.get(effectiveActivateOnFocus)) {
-      value(nextValue);
+      commitValue(nextValue, $$props.onValueChange, (next3) => {
+        value(next3);
+      });
     }
   }
   setTabsContext({
@@ -1211,7 +1405,9 @@ function Tabs($$anchor, $$props) {
       return baseId;
     },
     select(next3) {
-      value(next3);
+      commitValue(next3, $$props.onValueChange, (nextValue) => {
+        value(nextValue);
+      });
     },
     isActive(candidate) {
       return value() === candidate;
@@ -1464,7 +1660,7 @@ var root_27 = $15.from_html(`<div class="cinder-payload-inspector__notice cinder
               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_25 = $15.from_html(`<div class="cinder-payload-inspector__panel cinder-payload-inspector__panel--code"><!> <!> <!> <!></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) {
@@ -1483,6 +1679,12 @@ function Payload_inspector($$anchor, $$props) {
     "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 };
@@ -1490,6 +1692,9 @@ function Payload_inspector($$anchor, $$props) {
     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) };
@@ -1617,7 +1822,7 @@ function Payload_inspector($$anchor, $$props) {
   $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 text4 = $15.child(span, true);
+  var text5 = $15.child(span, true);
   $15.reset(span);
   var div_1 = $15.sibling(span, 2);
   var node = $15.child(div_1);
@@ -1665,6 +1870,7 @@ function Payload_inspector($$anchor, $$props) {
         },
         label: "Copy formatted",
         copiedLabel: "Formatted copied",
+        title: "Copy formatted payload",
         iconOnly: true
       });
     };
@@ -1682,6 +1888,7 @@ function Payload_inspector($$anchor, $$props) {
         },
         label: "Copy raw",
         copiedLabel: "Raw copied",
+        title: "Copy raw payload",
         iconOnly: true
       });
     };
@@ -1926,7 +2133,7 @@ function Payload_inspector($$anchor, $$props) {
       Tab_panel(node_22, {
         value: "raw",
         children: ($$anchor3, $$slotProps2) => {
-          var div_13 = root_25();
+          var div_13 = root_252();
           var node_23 = $15.child(div_13);
           {
             var consequent_14 = ($$anchor4) => {
@@ -1987,7 +2194,7 @@ function Payload_inspector($$anchor, $$props) {
   });
   $15.reset(div_2);
   $15.reset(section);
-  $15.template_effect(() => $15.set_text(text4, label()));
+  $15.template_effect(() => $15.set_text(text5, label()));
   $15.append($$anchor, section);
   $15.pop();
 }
@@ -1999,4 +2206,4 @@ export {
   Payload_inspector as PayloadInspector
 };
 
-//# debugId=C85344ABE8F3DB1264756E2164756E21
+//# debugId=1F34B6B642EE189264756E2164756E21