@lostgradient/cinder 0.6.0 → 0.8.0

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

@@ -170,10 +170,21 @@ function classNames(...parts) {
 }
 
 // src/components/badge/badge.svelte
-var root_3 = $.from_svg(`<path></path>`);
-var root_2 = $.from_svg(`<svg class="cinder-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>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "size",
+  "mono",
+  "subscriptionState",
+  "class",
+  "children"
+]);
+var root = $.from_svg(`<path></path>`);
+var root_1 = $.from_svg(`<svg class="cinder-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_2 = $.from_html(`<!> <!>`, 1);
+var root_3 = $.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $.push($$props, true);
   const subscriptionStateConfigurations = {
@@ -210,21 +221,11 @@ function Badge($$anchor, $$props) {
       "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"
-  ]);
+  let variant = $.prop($$props, "variant", 3, "neutral"), size = $.prop($$props, "size", 3, "md"), mono = $.prop($$props, "mono", 3, false), rest = $.rest_props($$props, rest_excludes);
   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();
+  var span = root_3();
   $.attribute_effect(span, ($0) => ({
     class: $0,
     "data-cinder-variant": $.get(resolvedVariant),
@@ -236,13 +237,13 @@ function Badge($$anchor, $$props) {
   var node = $.child(span);
   {
     var consequent_2 = ($$anchor2) => {
-      var fragment = root_1();
+      var fragment = root_2();
       var node_1 = $.first_child(fragment);
       {
         var consequent = ($$anchor3) => {
-          var svg = root_2();
+          var svg = root_1();
           $.each(svg, 20, () => $.get(resolvedSubscriptionIconPaths), (iconPath) => iconPath, ($$anchor4, iconPath) => {
-            var path = root_3();
+            var path = root();
             $.template_effect(() => $.set_attribute(path, "d", iconPath));
             $.append($$anchor4, path);
           });
@@ -540,22 +541,23 @@ function _visually_hidden_live_region($$anchor, $$props) {
 }
 
 // src/components/copy-button/copy-button.svelte
+var rest_excludes2 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "confirmDuration",
+  "label",
+  "copiedLabel",
+  "iconOnly",
+  "class",
+  "children",
+  "confirmation"
+]);
 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 confirmDuration = $6.prop($$props, "confirmDuration", 3, 1500), iconOnly = $6.prop($$props, "iconOnly", 3, false), rest = $6.rest_props($$props, rest_excludes2);
   let copied = $6.state(false);
   let resetTimer;
   const copiedAnnouncement = $6.derived(() => $6.get(copied) ? $$props.copiedLabel ?? "Copied" : "");
@@ -641,12 +643,11 @@ function Copy_button($$anchor, $$props) {
 }
 
 // src/components/code-block/code-block.svelte
-var root_22 = $7.from_html(`<span class="cinder-code-block__language"> </span>`);
+var root5 = $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>`);
+var root_22 = $7.from_html(`<pre class="cinder-code-block__pre"><code class="cinder-code-block__code"> </code></pre>`);
+var root_32 = $7.from_html(`<div class="cinder-code-block__highlighted"></div>`);
+var root_4 = $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);
@@ -680,7 +681,7 @@ function Code_block($$anchor, $$props) {
       cancelled = true;
     };
   });
-  var div = root5();
+  var div = root_4();
   var node = $7.child(div);
   {
     var consequent_2 = ($$anchor2) => {
@@ -688,7 +689,7 @@ function Code_block($$anchor, $$props) {
       var node_1 = $7.child(header);
       {
         var consequent = ($$anchor3) => {
-          var span = root_22();
+          var span = root5();
           var text3 = $7.child(span, true);
           $7.reset(span);
           $7.template_effect(() => $7.set_text(text3, $$props.language));
@@ -729,7 +730,7 @@ function Code_block($$anchor, $$props) {
   var node_3 = $7.child(div_1);
   {
     const failed = ($$anchor2) => {
-      var pre = root_4();
+      var pre = root_22();
       var code_1 = $7.child(pre);
       var text_1 = $7.child(code_1, true);
       $7.reset(code_1);
@@ -742,13 +743,13 @@ function Code_block($$anchor, $$props) {
       var node_4 = $7.first_child(fragment_1);
       {
         var consequent_3 = ($$anchor3) => {
-          var div_2 = root_6();
+          var div_2 = root_32();
           $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 pre_1 = root_22();
           var code_2 = $7.child(pre_1);
           var text_2 = $7.child(code_2, true);
           $7.reset(code_2);
@@ -776,20 +777,21 @@ 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_42 = $8.from_html(`<div class="cinder-description-list__actions"><!></div>`);
+var rest_excludes3 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "items",
+  "variant",
+  "class",
+  "actions"
+]);
+var root6 = $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>`);
+var root_23 = $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"
-  ]);
+  let variant = $8.prop($$props, "variant", 3, "default"), rest = $8.rest_props($$props, rest_excludes3);
   const duplicateKey = $8.derived(() => {
     const seen = new Set;
     for (const item of $$props.items) {
@@ -811,7 +813,7 @@ function Description_list($$anchor, $$props) {
       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();
+  var dl = root_23();
   $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();
@@ -844,7 +846,7 @@ function Description_list($$anchor, $$props) {
     var node_2 = $8.sibling(div_1, 2);
     {
       var consequent_1 = ($$anchor3) => {
-        var div_2 = root_42();
+        var div_2 = root6();
         var node_3 = $8.child(div_2);
         $8.snippet(node_3, () => $$props.actions, () => $8.get(item));
         $8.reset(div_2);
@@ -876,15 +878,13 @@ 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_32 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_43 = $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_23 = $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>`);
+var root_14 = $9.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_24 = $9.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_33 = $9.from_html(`<li role="none"><!></li>`);
+var root_42 = $9.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_5 = $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_6 = $9.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
+var root_7 = $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);
@@ -918,12 +918,12 @@ function _json_viewer_node($$anchor, $$props) {
   var node = $9.first_child(fragment);
   {
     var consequent_3 = ($$anchor2) => {
-      var span = root_23();
+      var span = root_5();
       var button = $9.child(span);
       var node_1 = $9.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span_1 = root_32();
+          var span_1 = root_14();
           var text5 = $9.child(span_1);
           $9.reset(span_1);
           $9.template_effect(() => $9.set_text(text5, `${$$props.keyName ?? ""}:`));
@@ -941,7 +941,7 @@ function _json_viewer_node($$anchor, $$props) {
       var node_2 = $9.sibling(span_3, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment_1 = root_43();
+          var fragment_1 = root_24();
           var span_4 = $9.first_child(fragment_1);
           var text_2 = $9.child(span_4);
           $9.reset(span_4);
@@ -963,13 +963,13 @@ function _json_viewer_node($$anchor, $$props) {
       var node_3 = $9.sibling(button, 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_2 = root_5();
+          var fragment_2 = root_42();
           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 li = root_33();
             var node_4 = $9.child(li);
             {
               let $0 = $9.derived(() => $$props.depth + 1);
@@ -1030,11 +1030,11 @@ function _json_viewer_node($$anchor, $$props) {
       $9.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_72();
+      var span_7 = root_6();
       var node_5 = $9.child(span_7);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_8();
+          var span_8 = root_14();
           var text_5 = $9.child(span_8);
           $9.reset(span_8);
           $9.template_effect(() => $9.set_text(text_5, `${$$props.keyName ?? ""}:`));
@@ -1056,11 +1056,11 @@ function _json_viewer_node($$anchor, $$props) {
       $9.append($$anchor2, span_7);
     };
     var alternate_1 = ($$anchor2) => {
-      var span_9 = root_9();
+      var span_9 = root_7();
       var node_6 = $9.child(span_9);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_10();
+          var span_10 = root_14();
           var text_6 = $9.child(span_10);
           $9.reset(span_10);
           $9.template_effect(() => $9.set_text(text_6, `${$$props.keyName ?? ""}:`));
@@ -1117,10 +1117,10 @@ function _json_viewer_node($$anchor, $$props) {
 $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_33 = $10.from_html(`<div role="tree" aria-label="JSON tree" tabindex="-1"><!></div>`);
-var root7 = $10.from_html(`<div><!></div>`);
+var root7 = $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_15 = $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 role="tree" aria-label="JSON tree" tabindex="-1"><!></div>`);
+var root_34 = $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);
@@ -1187,15 +1187,15 @@ function Json_viewer($$anchor, $$props) {
       toggle?.click();
     }
   }
-  var div = root7();
+  var div = root_34();
   var node = $10.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_14();
+      var div_1 = root7();
       $10.append($$anchor2, div_1);
     };
     var consequent_1 = ($$anchor2) => {
-      var div_2 = root_24();
+      var div_2 = root_15();
       var p = $10.child(div_2);
       var text5 = $10.child(p);
       $10.reset(p);
@@ -1209,7 +1209,7 @@ function Json_viewer($$anchor, $$props) {
       $10.append($$anchor2, div_2);
     };
     var alternate = ($$anchor2) => {
-      var div_3 = root_33();
+      var div_3 = root_25();
       var node_1 = $10.child(div_3);
       _json_viewer_node(node_1, {
         get value() {
@@ -1578,8 +1578,8 @@ function rovingTabIndex(isActive) {
 }
 
 // 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>`);
+var root10 = $13.from_html(`<span class="cinder-tab__trailing" aria-hidden="true"><!></span>`);
+var root_16 = $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);
@@ -1615,13 +1615,13 @@ function Tab($$anchor, $$props) {
       return;
     tabs.select($$props.value);
   }
-  var button_1 = root10();
+  var button_1 = root_16();
   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 span = root10();
       var node_2 = $13.child(span);
       $13.snippet(node_2, () => $$props.trailing);
       $13.reset(span);
@@ -1661,7 +1661,7 @@ $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>`);
+var root11 = $14.from_html(`<div role="tabpanel" tabindex="0"><!></div>`);
 function Tab_panel($$anchor, $$props) {
   $14.push($$props, true);
   const tabs = getTabsContext();
@@ -1672,7 +1672,7 @@ function Tab_panel($$anchor, $$props) {
   var node = $14.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_16();
+      var div = root11();
       var node_1 = $14.child(div);
       $14.snippet(node_1, () => $$props.children);
       $14.reset(div);
@@ -1694,42 +1694,38 @@ function Tab_panel($$anchor, $$props) {
 }
 
 // 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 rest_excludes4 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "truncated",
+  "maxBytes",
+  "meta",
+  "format",
+  "parse",
+  "activeView",
+  "label",
+  "class"
+]);
+var root12 = $15.from_html(`<span class="cinder-payload-inspector__size"> </span>`);
+var root_17 = $15.from_html(`<!> <!> <!>`, 1);
 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
+var root_35 = $15.from_html(`<div class="cinder-payload-inspector__notice cinder-payload-inspector__notice--warning" role="alert"> </div>`);
+var root_43 = $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_52 = $15.from_html(`<div class="cinder-payload-inspector__summary"><div class="cinder-payload-inspector__summary-badges"><!> <!></div> <!> <!> <!></div>`);
+var root_62 = $15.from_html(`<div class="cinder-payload-inspector__panel"><!> <!></div>`);
+var root_72 = $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_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>`);
+var root_8 = $15.from_html(`<div class="cinder-payload-inspector__panel"><!> <!> <!> <!></div>`);
+var root_9 = $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_10 = $15.from_html(`<div class="cinder-payload-inspector__panel cinder-payload-inspector__panel--code"><!> <!> <!> <!></div>`);
+var root_11 = $15.from_html(`<!> <!> <!> <!>`, 1);
+var root_122 = $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"
-  ]);
+  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, rest_excludes4);
   function shouldParseString(raw) {
     const trimmed = raw.trim();
     if (/^[{\["]/.test(trimmed))
@@ -1869,7 +1865,7 @@ function Payload_inspector($$anchor, $$props) {
       return "info";
     return "neutral";
   }
-  var section = root11();
+  var section = root_122();
   $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);
@@ -1879,7 +1875,7 @@ function Payload_inspector($$anchor, $$props) {
   var node = $15.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var span_1 = root_17();
+      var span_1 = root12();
       var text_1 = $15.child(span_1, true);
       $15.reset(span_1);
       $15.template_effect(() => {
@@ -1960,12 +1956,12 @@ function Payload_inspector($$anchor, $$props) {
       activeView($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_3 = root_63();
+      var fragment_3 = root_11();
       var node_5 = $15.first_child(fragment_3);
       Tab_list(node_5, {
         label: "Inspector views",
         children: ($$anchor3, $$slotProps2) => {
-          var fragment_4 = root_73();
+          var fragment_4 = root_17();
           var node_6 = $15.first_child(fragment_4);
           Tab(node_6, {
             value: "summary",
@@ -2004,11 +2000,11 @@ function Payload_inspector($$anchor, $$props) {
       Tab_panel(node_9, {
         value: "summary",
         children: ($$anchor3, $$slotProps2) => {
-          var div_3 = root_11();
+          var div_3 = root_62();
           var node_10 = $15.child(div_3);
           {
             var consequent_4 = ($$anchor4) => {
-              var div_4 = root_122();
+              var div_4 = root_26();
               $15.append($$anchor4, div_4);
             };
             $15.if(node_10, ($$render) => {
@@ -2019,7 +2015,7 @@ function Payload_inspector($$anchor, $$props) {
           var node_11 = $15.sibling(node_10, 2);
           {
             var consequent_9 = ($$anchor4) => {
-              var div_5 = root_132();
+              var div_5 = root_52();
               var div_6 = $15.child(div_5);
               var node_12 = $15.child(div_6);
               {
@@ -2077,7 +2073,7 @@ function Payload_inspector($$anchor, $$props) {
               var node_15 = $15.sibling(node_14, 2);
               {
                 var consequent_7 = ($$anchor5) => {
-                  var div_7 = root_18();
+                  var div_7 = root_35();
                   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 ?? ""}`));
@@ -2091,7 +2087,7 @@ function Payload_inspector($$anchor, $$props) {
               var node_16 = $15.sibling(node_15, 2);
               {
                 var consequent_8 = ($$anchor5) => {
-                  var div_8 = root_19();
+                  var div_8 = root_43();
                   var span_2 = $15.sibling($15.child(div_8), 2);
                   var text_9 = $15.child(span_2, true);
                   $15.reset(span_2);
@@ -2121,11 +2117,11 @@ function Payload_inspector($$anchor, $$props) {
       Tab_panel(node_17, {
         value: "tree",
         children: ($$anchor3, $$slotProps2) => {
-          var div_9 = root_20();
+          var div_9 = root_8();
           var node_18 = $15.child(div_9);
           {
             var consequent_10 = ($$anchor4) => {
-              var div_10 = root_21();
+              var div_10 = root_26();
               $15.append($$anchor4, div_10);
             };
             $15.if(node_18, ($$render) => {
@@ -2136,7 +2132,7 @@ function Payload_inspector($$anchor, $$props) {
           var node_19 = $15.sibling(node_18, 2);
           {
             var consequent_11 = ($$anchor4) => {
-              var div_11 = root_222();
+              var div_11 = root_35();
               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 ?? ""}`));
@@ -2150,7 +2146,7 @@ function Payload_inspector($$anchor, $$props) {
           var node_20 = $15.sibling(node_19, 2);
           {
             var consequent_12 = ($$anchor4) => {
-              var div_12 = root_232();
+              var div_12 = root_72();
               $15.append($$anchor4, div_12);
             };
             $15.if(node_20, ($$render) => {
@@ -2184,7 +2180,7 @@ function Payload_inspector($$anchor, $$props) {
       Tab_panel(node_22, {
         value: "raw",
         children: ($$anchor3, $$slotProps2) => {
-          var div_13 = root_25();
+          var div_13 = root_10();
           var node_23 = $15.child(div_13);
           {
             var consequent_14 = ($$anchor4) => {
@@ -2199,7 +2195,7 @@ function Payload_inspector($$anchor, $$props) {
           var node_24 = $15.sibling(node_23, 2);
           {
             var consequent_15 = ($$anchor4) => {
-              var div_15 = root_27();
+              var div_15 = root_9();
               $15.append($$anchor4, div_15);
             };
             $15.if(node_24, ($$render) => {
@@ -2210,7 +2206,7 @@ function Payload_inspector($$anchor, $$props) {
           var node_25 = $15.sibling(node_24, 2);
           {
             var consequent_16 = ($$anchor4) => {
-              var div_16 = root_28();
+              var div_16 = root_72();
               $15.append($$anchor4, div_16);
             };
             $15.if(node_25, ($$render) => {
@@ -2257,4 +2253,4 @@ export {
   Payload_inspector as PayloadInspector
 };
 
-//# debugId=4744BBCF5563242A64756E2164756E21
+//# debugId=1DF7DF94B0FC3D2864756E2164756E21