@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/spectrogram/index.js

@@ -26,7 +26,7 @@ import"@lostgradient/cinder/spectrogram/styles";
 
 // src/components/spectrogram/spectrogram.svelte
 import"svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import * as $2 from "svelte/internal/client";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -772,24 +772,59 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/use-resize-observer.svelte.ts
+import * as $ from "svelte/internal/client";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    $.user_effect(() => {
+      if (!enabled()) {
+        disconnectObserver();
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        if (!enabled()) {
+          return;
+        }
+        onResize(entries);
+      });
+      observer.observe(node, box !== undefined ? { box } : undefined);
+      return () => {
+        disconnectObserver();
+      };
+    });
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/components/spectrogram/spectrogram.svelte
-var root_1 = $.from_html(`<p class="cinder-spectrogram__description"> </p>`);
-var root_2 = $.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
-var root_5 = $.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
-var root_8 = $.from_svg(`<title> </title>`);
-var root_11 = $.from_svg(`<rect class="cinder-spectrogram__cell" aria-hidden="true"></rect>`);
-var root_13 = $.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
-var root_15 = $.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
-var root_9 = $.from_svg(`<g><!><!><!></g>`);
-var root_17 = $.from_html(`<th scope="col"> </th>`);
-var root_19 = $.from_html(`<td> </td>`);
-var root_18 = $.from_html(`<tr><th scope="row"> </th><!></tr>`);
-var root_16 = $.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency bin</th><!></tr></thead><tbody></tbody></table>`);
-var root = $.from_html(`<figure><!> <div class="cinder-spectrogram__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+var root_1 = $2.from_html(`<p class="cinder-spectrogram__description"> </p>`);
+var root_2 = $2.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
+var root_5 = $2.from_html(`<div class="cinder-spectrogram__state"><!></div>`);
+var root_8 = $2.from_svg(`<title> </title>`);
+var root_11 = $2.from_svg(`<rect class="cinder-spectrogram__cell" aria-hidden="true"></rect>`);
+var root_13 = $2.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
+var root_15 = $2.from_svg(`<text class="cinder-spectrogram__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
+var root_9 = $2.from_svg(`<g><!><!><!></g>`);
+var root_17 = $2.from_html(`<th scope="col"> </th>`);
+var root_19 = $2.from_html(`<td> </td>`);
+var root_18 = $2.from_html(`<tr><th scope="row"> </th><!></tr>`);
+var root_16 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Frequency bin</th><!></tr></thead><tbody></tbody></table>`);
+var root = $2.from_html(`<figure><!> <div class="cinder-spectrogram__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
 function Spectrogram($$anchor, $$props) {
-  const generatedId = $.props_id();
-  $.push($$props, true);
-  let height = $.prop($$props, "height", 3, 200), loading = $.prop($$props, "loading", 3, false), dataTableVisibility = $.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $.rest_props($$props, [
+  const generatedId = $2.props_id();
+  $2.push($$props, true);
+  let height = $2.prop($$props, "height", 3, 200), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -806,314 +841,300 @@ function Spectrogram($$anchor, $$props) {
     "loadingContent",
     "id"
   ]);
-  const rootId = $.derived(() => $$props.id ?? generatedId);
-  const descriptionId = $.derived(() => $$props.description ? `${$.get(rootId)}-description` : undefined);
+  const rootId = $2.derived(() => $$props.id ?? generatedId);
+  const descriptionId = $2.derived(() => $$props.description ? `${$2.get(rootId)}-description` : undefined);
   const marginTop = 8;
   const marginRight = 16;
   const marginBottom = 32;
   const marginLeft = 60;
-  let measuredWidth = $.state(400);
-  let rootElement = $.state(undefined);
-  $.user_effect(() => {
-    const element = $.get(rootElement);
-    if (!element)
-      return;
-    if (typeof ResizeObserver === "undefined") {
-      const rect = element.getBoundingClientRect();
-      if (rect.width > 0)
-        $.set(measuredWidth, rect.width, true);
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry && entry.contentRect.width > 0)
-        $.set(measuredWidth, entry.contentRect.width, true);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
+  let measuredWidth = $2.state(400);
+  const observeResize = useResizeObserver((entries) => {
+    const entry = entries[0];
+    if (entry && entry.contentRect.width > 0)
+      $2.set(measuredWidth, entry.contentRect.width, true);
   });
-  const plotWidth = $.derived(() => Math.max(1, $.get(measuredWidth) - marginLeft - marginRight));
-  const plotHeight = $.derived(() => Math.max(1, height() - marginTop - marginBottom));
-  const binCount = $.derived(() => $$props.frames.reduce((max, frame) => Math.max(max, frame.bins.length), 0));
-  const binIndices = $.derived(() => Array.from({ length: $.get(binCount) }, (_, index2) => index2));
-  const isEmpty = $.derived(() => $$props.frames.length === 0 || $.get(binCount) === 0);
-  const cellWidth = $.derived(() => $$props.frames.length > 0 ? $.get(plotWidth) / $$props.frames.length : 0);
-  const cellHeight = $.derived(() => $.get(binCount) > 0 ? $.get(plotHeight) / $.get(binCount) : 0);
+  const plotWidth = $2.derived(() => Math.max(1, $2.get(measuredWidth) - marginLeft - marginRight));
+  const plotHeight = $2.derived(() => Math.max(1, height() - marginTop - marginBottom));
+  const binCount = $2.derived(() => $$props.frames.reduce((max, frame) => Math.max(max, frame.bins.length), 0));
+  const binIndices = $2.derived(() => Array.from({ length: $2.get(binCount) }, (_, index2) => index2));
+  const isEmpty = $2.derived(() => $$props.frames.length === 0 || $2.get(binCount) === 0);
+  const cellWidth = $2.derived(() => $$props.frames.length > 0 ? $2.get(plotWidth) / $$props.frames.length : 0);
+  const cellHeight = $2.derived(() => $2.get(binCount) > 0 ? $2.get(plotHeight) / $2.get(binCount) : 0);
   function binValueAt(frameIndex, binIndex) {
     return toFiniteOrNull($$props.frames[frameIndex]?.bins[binIndex]);
   }
-  const domain = $.derived(() => heatmapDomainOfRows($$props.frames.map((frame) => frame.bins)));
+  const domain = $2.derived(() => heatmapDomainOfRows($$props.frames.map((frame) => frame.bins)));
   function cellFill(value) {
-    return heatmapCellFill(value, $.get(domain), "sequential");
+    return heatmapCellFill(value, $2.get(domain), "sequential");
   }
   function binY(binIndex) {
-    return $.get(plotHeight) - (binIndex + 1) * $.get(cellHeight);
+    return $2.get(plotHeight) - (binIndex + 1) * $2.get(cellHeight);
   }
-  const yLabels = $.derived(() => Array.from({ length: $.get(binCount) }, (_, index2) => $$props.frequencyLabels?.[index2] ?? String(index2)));
+  const yLabels = $2.derived(() => Array.from({ length: $2.get(binCount) }, (_, index2) => $$props.frequencyLabels?.[index2] ?? String(index2)));
   const maxYLabels = 8;
-  const yLabelStep = $.derived(() => Math.max(1, Math.ceil($.get(binCount) / maxYLabels)));
+  const yLabelStep = $2.derived(() => Math.max(1, Math.ceil($2.get(binCount) / maxYLabels)));
   const maxXLabels = 10;
-  const xLabelStep = $.derived(() => Math.max(1, Math.ceil($$props.frames.length / maxXLabels)));
-  const hasDataTable = $.derived(() => dataTableVisibility() !== "hidden");
+  const xLabelStep = $2.derived(() => Math.max(1, Math.ceil($$props.frames.length / maxXLabels)));
+  const hasDataTable = $2.derived(() => dataTableVisibility() !== "hidden");
   const maxTableFrames = 10;
   const maxTableBins = 10;
-  const tableFrameStep = $.derived(() => Math.max(1, Math.ceil($$props.frames.length / maxTableFrames)));
-  const tableBinStep = $.derived(() => Math.max(1, Math.ceil($.get(binCount) / maxTableBins)));
-  const tableFrames = $.derived(() => $$props.frames.map((frame, frameIndex) => ({ frame, frameIndex })).filter((_, index2) => index2 % $.get(tableFrameStep) === 0).slice(0, maxTableFrames));
-  const tableBinIndices = $.derived(() => Array.from({ length: $.get(binCount) }, (_, index2) => index2).filter((index2) => index2 % $.get(tableBinStep) === 0).slice(0, maxTableBins).reverse());
-  const isTruncated = $.derived(() => $$props.frames.length > maxTableFrames || $.get(binCount) > maxTableBins);
-  const tableCaption = $.derived(() => $.get(isTruncated) ? `${$$props.dataTableCaption ?? $$props.label} (showing ${$.get(tableFrames).length} of ${$$props.frames.length} frames, ${$.get(tableBinIndices).length} of ${$.get(binCount)} bins)` : $$props.dataTableCaption ?? $$props.label);
+  const tableFrameStep = $2.derived(() => Math.max(1, Math.ceil($$props.frames.length / maxTableFrames)));
+  const tableBinStep = $2.derived(() => Math.max(1, Math.ceil($2.get(binCount) / maxTableBins)));
+  const tableFrames = $2.derived(() => $$props.frames.map((frame, frameIndex) => ({ frame, frameIndex })).filter((_, index2) => index2 % $2.get(tableFrameStep) === 0).slice(0, maxTableFrames));
+  const tableBinIndices = $2.derived(() => Array.from({ length: $2.get(binCount) }, (_, index2) => index2).filter((index2) => index2 % $2.get(tableBinStep) === 0).slice(0, maxTableBins).reverse());
+  const isTruncated = $2.derived(() => $$props.frames.length > maxTableFrames || $2.get(binCount) > maxTableBins);
+  const tableCaption = $2.derived(() => $2.get(isTruncated) ? `${$$props.dataTableCaption ?? $$props.label} (showing ${$2.get(tableFrames).length} of ${$$props.frames.length} frames, ${$2.get(tableBinIndices).length} of ${$2.get(binCount)} bins)` : $$props.dataTableCaption ?? $$props.label);
   function formatValue(value) {
     if (value === null)
       return "—";
     return new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 }).format(value);
   }
   var figure = root();
-  $.attribute_effect(figure, ($0) => ({
+  $2.attribute_effect(figure, ($0) => ({
     ...rest,
-    id: $.get(rootId),
+    id: $2.get(rootId),
     class: $0,
     "aria-label": $$props.label,
-    "aria-describedby": $.get(descriptionId)
+    "aria-describedby": $2.get(descriptionId)
   }), [() => classNames("cinder-spectrogram", $$props.class)]);
-  var node = $.child(figure);
+  var node = $2.child(figure);
   {
     var consequent = ($$anchor2) => {
       var p = root_1();
-      var text2 = $.child(p, true);
-      $.reset(p);
-      $.template_effect(() => {
-        $.set_attribute(p, "id", $.get(descriptionId));
-        $.set_text(text2, $$props.description);
+      var text2 = $2.child(p, true);
+      $2.reset(p);
+      $2.template_effect(() => {
+        $2.set_attribute(p, "id", $2.get(descriptionId));
+        $2.set_text(text2, $$props.description);
       });
-      $.append($$anchor2, p);
+      $2.append($$anchor2, p);
     };
-    $.if(node, ($$render) => {
+    $2.if(node, ($$render) => {
       if ($$props.description)
         $$render(consequent);
     });
   }
-  var div = $.sibling(node, 2);
+  var div = $2.sibling(node, 2);
   let styles;
-  var node_1 = $.child(div);
+  var node_1 = $2.child(div);
   {
     var consequent_2 = ($$anchor2) => {
       var div_1 = root_2();
-      var node_2 = $.child(div_1);
+      var node_2 = $2.child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment = $.comment();
-          var node_3 = $.first_child(fragment);
-          $.snippet(node_3, () => $$props.loadingContent);
-          $.append($$anchor3, fragment);
+          var fragment = $2.comment();
+          var node_3 = $2.first_child(fragment);
+          $2.snippet(node_3, () => $$props.loadingContent);
+          $2.append($$anchor3, fragment);
         };
         var alternate = ($$anchor3) => {
-          var text_1 = $.text("Loading…");
-          $.append($$anchor3, text_1);
+          var text_1 = $2.text("Loading…");
+          $2.append($$anchor3, text_1);
         };
-        $.if(node_2, ($$render) => {
+        $2.if(node_2, ($$render) => {
           if ($$props.loadingContent)
             $$render(consequent_1);
           else
             $$render(alternate, -1);
         });
       }
-      $.reset(div_1);
-      $.append($$anchor2, div_1);
+      $2.reset(div_1);
+      $2.append($$anchor2, div_1);
     };
     var consequent_4 = ($$anchor2) => {
       var div_2 = root_5();
-      var node_4 = $.child(div_2);
+      var node_4 = $2.child(div_2);
       {
         var consequent_3 = ($$anchor3) => {
-          var fragment_1 = $.comment();
-          var node_5 = $.first_child(fragment_1);
-          $.snippet(node_5, () => $$props.empty);
-          $.append($$anchor3, fragment_1);
+          var fragment_1 = $2.comment();
+          var node_5 = $2.first_child(fragment_1);
+          $2.snippet(node_5, () => $$props.empty);
+          $2.append($$anchor3, fragment_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var text_2 = $.text("No spectrogram data");
-          $.append($$anchor3, text_2);
+          var text_2 = $2.text("No spectrogram data");
+          $2.append($$anchor3, text_2);
         };
-        $.if(node_4, ($$render) => {
+        $2.if(node_4, ($$render) => {
           if ($$props.empty)
             $$render(consequent_3);
           else
             $$render(alternate_1, -1);
         });
       }
-      $.reset(div_2);
-      $.append($$anchor2, div_2);
+      $2.reset(div_2);
+      $2.append($$anchor2, div_2);
     };
-    $.if(node_1, ($$render) => {
+    $2.if(node_1, ($$render) => {
       if (loading())
         $$render(consequent_2);
-      else if ($.get(isEmpty))
+      else if ($2.get(isEmpty))
         $$render(consequent_4, 1);
     });
   }
-  var svg = $.sibling(node_1, 2);
-  var node_6 = $.child(svg);
+  var svg = $2.sibling(node_1, 2);
+  var node_6 = $2.child(svg);
   {
     var consequent_5 = ($$anchor2) => {
       var title = root_8();
-      var text_3 = $.child(title, true);
-      $.reset(title);
-      $.template_effect(() => {
-        $.set_attribute(title, "id", `${$.get(rootId) ?? ""}-svg-title`);
-        $.set_text(text_3, $$props.label);
+      var text_3 = $2.child(title, true);
+      $2.reset(title);
+      $2.template_effect(() => {
+        $2.set_attribute(title, "id", `${$2.get(rootId) ?? ""}-svg-title`);
+        $2.set_text(text_3, $$props.label);
       });
-      $.append($$anchor2, title);
+      $2.append($$anchor2, title);
     };
-    $.if(node_6, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_6, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_5);
     });
   }
-  var node_7 = $.sibling(node_6);
+  var node_7 = $2.sibling(node_6);
   {
     var consequent_8 = ($$anchor2) => {
       var g = root_9();
-      $.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
-      var node_8 = $.child(g);
-      $.each(node_8, 17, () => $$props.frames, $.index, ($$anchor3, _frame, frameIndex) => {
-        var fragment_2 = $.comment();
-        var node_9 = $.first_child(fragment_2);
-        $.each(node_9, 16, () => $.get(binIndices), (binIndex) => binIndex, ($$anchor4, binIndex) => {
-          var rect_1 = root_11();
-          $.template_effect(($0, $1) => {
-            $.set_attribute(rect_1, "x", frameIndex * $.get(cellWidth));
-            $.set_attribute(rect_1, "y", $0);
-            $.set_attribute(rect_1, "width", $.get(cellWidth));
-            $.set_attribute(rect_1, "height", $.get(cellHeight));
-            $.set_attribute(rect_1, "fill", $1);
+      $2.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
+      var node_8 = $2.child(g);
+      $2.each(node_8, 17, () => $$props.frames, $2.index, ($$anchor3, _frame, frameIndex) => {
+        var fragment_2 = $2.comment();
+        var node_9 = $2.first_child(fragment_2);
+        $2.each(node_9, 16, () => $2.get(binIndices), (binIndex) => binIndex, ($$anchor4, binIndex) => {
+          var rect = root_11();
+          $2.template_effect(($0, $1) => {
+            $2.set_attribute(rect, "x", frameIndex * $2.get(cellWidth));
+            $2.set_attribute(rect, "y", $0);
+            $2.set_attribute(rect, "width", $2.get(cellWidth));
+            $2.set_attribute(rect, "height", $2.get(cellHeight));
+            $2.set_attribute(rect, "fill", $1);
           }, [
             () => binY(binIndex),
             () => cellFill(binValueAt(frameIndex, binIndex))
           ]);
-          $.append($$anchor4, rect_1);
+          $2.append($$anchor4, rect);
         });
-        $.append($$anchor3, fragment_2);
+        $2.append($$anchor3, fragment_2);
       });
-      var node_10 = $.sibling(node_8);
-      $.each(node_10, 17, () => $.get(yLabels), $.index, ($$anchor3, yLabel, index2) => {
-        var fragment_3 = $.comment();
-        var node_11 = $.first_child(fragment_3);
+      var node_10 = $2.sibling(node_8);
+      $2.each(node_10, 17, () => $2.get(yLabels), $2.index, ($$anchor3, yLabel, index2) => {
+        var fragment_3 = $2.comment();
+        var node_11 = $2.first_child(fragment_3);
         {
           var consequent_6 = ($$anchor4) => {
             var text_4 = root_13();
-            $.set_attribute(text_4, "x", -6);
-            var text_5 = $.child(text_4, true);
-            $.reset(text_4);
-            $.template_effect(($0) => {
-              $.set_attribute(text_4, "y", $0);
-              $.set_text(text_5, $.get(yLabel));
-            }, [() => binY(index2) + $.get(cellHeight) / 2]);
-            $.append($$anchor4, text_4);
+            $2.set_attribute(text_4, "x", -6);
+            var text_5 = $2.child(text_4, true);
+            $2.reset(text_4);
+            $2.template_effect(($0) => {
+              $2.set_attribute(text_4, "y", $0);
+              $2.set_text(text_5, $2.get(yLabel));
+            }, [() => binY(index2) + $2.get(cellHeight) / 2]);
+            $2.append($$anchor4, text_4);
           };
-          $.if(node_11, ($$render) => {
-            if (index2 % $.get(yLabelStep) === 0)
+          $2.if(node_11, ($$render) => {
+            if (index2 % $2.get(yLabelStep) === 0)
               $$render(consequent_6);
           });
         }
-        $.append($$anchor3, fragment_3);
+        $2.append($$anchor3, fragment_3);
       });
-      var node_12 = $.sibling(node_10);
-      $.each(node_12, 17, () => $$props.frames, $.index, ($$anchor3, frame, index2) => {
-        var fragment_4 = $.comment();
-        var node_13 = $.first_child(fragment_4);
+      var node_12 = $2.sibling(node_10);
+      $2.each(node_12, 17, () => $$props.frames, $2.index, ($$anchor3, frame, index2) => {
+        var fragment_4 = $2.comment();
+        var node_13 = $2.first_child(fragment_4);
         {
           var consequent_7 = ($$anchor4) => {
             var text_6 = root_15();
-            var text_7 = $.child(text_6, true);
-            $.reset(text_6);
-            $.template_effect(() => {
-              $.set_attribute(text_6, "x", index2 * $.get(cellWidth) + $.get(cellWidth) / 2);
-              $.set_attribute(text_6, "y", $.get(plotHeight) + 16);
-              $.set_text(text_7, $.get(frame).label);
+            var text_7 = $2.child(text_6, true);
+            $2.reset(text_6);
+            $2.template_effect(() => {
+              $2.set_attribute(text_6, "x", index2 * $2.get(cellWidth) + $2.get(cellWidth) / 2);
+              $2.set_attribute(text_6, "y", $2.get(plotHeight) + 16);
+              $2.set_text(text_7, $2.get(frame).label);
             });
-            $.append($$anchor4, text_6);
+            $2.append($$anchor4, text_6);
           };
-          $.if(node_13, ($$render) => {
-            if (index2 % $.get(xLabelStep) === 0)
+          $2.if(node_13, ($$render) => {
+            if (index2 % $2.get(xLabelStep) === 0)
               $$render(consequent_7);
           });
         }
-        $.append($$anchor3, fragment_4);
+        $2.append($$anchor3, fragment_4);
       });
-      $.reset(g);
-      $.append($$anchor2, g);
+      $2.reset(g);
+      $2.append($$anchor2, g);
     };
-    $.if(node_7, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_7, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_8);
     });
   }
-  $.reset(svg);
-  $.reset(div);
-  var node_14 = $.sibling(div, 2);
+  $2.reset(svg);
+  $2.reset(div);
+  var node_14 = $2.sibling(div, 2);
   {
     var consequent_9 = ($$anchor2) => {
       var table = root_16();
-      var caption = $.child(table);
-      var text_8 = $.child(caption, true);
-      $.reset(caption);
-      var thead = $.sibling(caption);
-      var tr = $.child(thead);
-      var node_15 = $.sibling($.child(tr));
-      $.each(node_15, 17, () => $.get(tableFrames), (entry) => entry.frameIndex, ($$anchor3, entry) => {
+      var caption = $2.child(table);
+      var text_8 = $2.child(caption, true);
+      $2.reset(caption);
+      var thead = $2.sibling(caption);
+      var tr = $2.child(thead);
+      var node_15 = $2.sibling($2.child(tr));
+      $2.each(node_15, 17, () => $2.get(tableFrames), (entry) => entry.frameIndex, ($$anchor3, entry) => {
         var th = root_17();
-        var text_9 = $.child(th, true);
-        $.reset(th);
-        $.template_effect(() => $.set_text(text_9, $.get(entry).frame.label));
-        $.append($$anchor3, th);
+        var text_9 = $2.child(th, true);
+        $2.reset(th);
+        $2.template_effect(() => $2.set_text(text_9, $2.get(entry).frame.label));
+        $2.append($$anchor3, th);
       });
-      $.reset(tr);
-      $.reset(thead);
-      var tbody = $.sibling(thead);
-      $.each(tbody, 20, () => $.get(tableBinIndices), (binIndex) => binIndex, ($$anchor3, binIndex) => {
+      $2.reset(tr);
+      $2.reset(thead);
+      var tbody = $2.sibling(thead);
+      $2.each(tbody, 20, () => $2.get(tableBinIndices), (binIndex) => binIndex, ($$anchor3, binIndex) => {
         var tr_1 = root_18();
-        var th_1 = $.child(tr_1);
-        var text_10 = $.child(th_1, true);
-        $.reset(th_1);
-        var node_16 = $.sibling(th_1);
-        $.each(node_16, 17, () => $.get(tableFrames), (entry) => entry.frameIndex, ($$anchor4, entry) => {
+        var th_1 = $2.child(tr_1);
+        var text_10 = $2.child(th_1, true);
+        $2.reset(th_1);
+        var node_16 = $2.sibling(th_1);
+        $2.each(node_16, 17, () => $2.get(tableFrames), (entry) => entry.frameIndex, ($$anchor4, entry) => {
           var td = root_19();
-          var text_11 = $.child(td, true);
-          $.reset(td);
-          $.template_effect(($0) => $.set_text(text_11, $0), [
-            () => formatValue(binValueAt($.get(entry).frameIndex, binIndex))
+          var text_11 = $2.child(td, true);
+          $2.reset(td);
+          $2.template_effect(($0) => $2.set_text(text_11, $0), [
+            () => formatValue(binValueAt($2.get(entry).frameIndex, binIndex))
           ]);
-          $.append($$anchor4, td);
+          $2.append($$anchor4, td);
         });
-        $.reset(tr_1);
-        $.template_effect(() => $.set_text(text_10, $.get(yLabels)[binIndex] ?? binIndex));
-        $.append($$anchor3, tr_1);
+        $2.reset(tr_1);
+        $2.template_effect(() => $2.set_text(text_10, $2.get(yLabels)[binIndex] ?? binIndex));
+        $2.append($$anchor3, tr_1);
       });
-      $.reset(tbody);
-      $.reset(table);
-      $.template_effect(($0) => {
-        $.set_class(table, 1, $0);
-        $.set_text(text_8, $.get(tableCaption));
-      }, [() => $.clsx(dataTableClass(dataTableVisibility()))]);
-      $.append($$anchor2, table);
+      $2.reset(tbody);
+      $2.reset(table);
+      $2.template_effect(($0) => {
+        $2.set_class(table, 1, $0);
+        $2.set_text(text_8, $2.get(tableCaption));
+      }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
+      $2.append($$anchor2, table);
     };
-    $.if(node_14, ($$render) => {
-      if ($.get(hasDataTable))
+    $2.if(node_14, ($$render) => {
+      if ($2.get(hasDataTable))
         $$render(consequent_9);
     });
   }
-  $.reset(figure);
-  $.bind_this(figure, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
-  $.template_effect(() => {
-    $.set_attribute(div, "data-cinder-loading", loading() || undefined);
-    styles = $.set_style(div, "", styles, { height: `${height() ?? ""}px` });
-    $.set_attribute(svg, "viewBox", `0 0 ${$.get(measuredWidth)} ${height()}`);
-    $.set_attribute(svg, "aria-hidden", loading() || $.get(isEmpty) ? "true" : undefined);
-    $.set_attribute(svg, "aria-labelledby", !loading() && !$.get(isEmpty) ? `${$.get(rootId)}-svg-title` : undefined);
+  $2.reset(figure);
+  $2.attach(figure, () => observeResize);
+  $2.template_effect(() => {
+    $2.set_attribute(div, "data-cinder-loading", loading() || undefined);
+    styles = $2.set_style(div, "", styles, { height: `${height() ?? ""}px` });
+    $2.set_attribute(svg, "viewBox", `0 0 ${$2.get(measuredWidth)} ${height()}`);
+    $2.set_attribute(svg, "aria-hidden", loading() || $2.get(isEmpty) ? "true" : undefined);
+    $2.set_attribute(svg, "aria-labelledby", !loading() && !$2.get(isEmpty) ? `${$2.get(rootId)}-svg-title` : undefined);
   });
-  $.append($$anchor, figure);
-  $.pop();
+  $2.append($$anchor, figure);
+  $2.pop();
 }
 
 // src/components/spectrogram/index.ts
@@ -1123,4 +1144,4 @@ export {
   Spectrogram
 };
 
-//# debugId=775D60DA707FF2FD64756E2164756E21
+//# debugId=CB06D84077F6D9B064756E2164756E21