@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/matrix-chart/index.js

@@ -26,7 +26,7 @@ import"@lostgradient/cinder/matrix-chart/styles";
 
 // src/components/matrix-chart/matrix-chart.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,25 +772,60 @@ 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/matrix-chart/matrix-chart.svelte
-var root_1 = $.from_html(`<p class="cinder-matrix-chart__description"> </p>`);
-var root_2 = $.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
-var root_5 = $.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
-var root_8 = $.from_svg(`<title> </title>`);
-var root_10 = $.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
-var root_11 = $.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
-var root_13 = $.from_svg(`<text class="cinder-matrix-chart__cell-label" text-anchor="middle" dominant-baseline="middle" aria-hidden="true"> </text>`);
-var root_12 = $.from_svg(`<g><rect class="cinder-matrix-chart__cell" aria-hidden="true"><title> </title></rect><!></g>`);
-var root_9 = $.from_svg(`<g role="presentation"><!><!><!></g>`);
-var root_15 = $.from_html(`<th scope="col"> </th>`);
-var root_17 = $.from_html(`<td> </td>`);
-var root_16 = $.from_html(`<tr><th scope="row"> </th><!></tr>`);
-var root_14 = $.from_html(`<table><caption> </caption><thead><tr><th scope="col"> </th><!></tr></thead><tbody></tbody></table>`);
-var root = $.from_html(`<figure><!> <div class="cinder-matrix-chart__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+var root_1 = $2.from_html(`<p class="cinder-matrix-chart__description"> </p>`);
+var root_2 = $2.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
+var root_5 = $2.from_html(`<div class="cinder-matrix-chart__state"><!></div>`);
+var root_8 = $2.from_svg(`<title> </title>`);
+var root_10 = $2.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="middle" dominant-baseline="auto"> </text>`);
+var root_11 = $2.from_svg(`<text class="cinder-matrix-chart__tick-label" text-anchor="end" dominant-baseline="middle"> </text>`);
+var root_13 = $2.from_svg(`<text class="cinder-matrix-chart__cell-label" text-anchor="middle" dominant-baseline="middle" aria-hidden="true"> </text>`);
+var root_12 = $2.from_svg(`<g><rect class="cinder-matrix-chart__cell" aria-hidden="true"><title> </title></rect><!></g>`);
+var root_9 = $2.from_svg(`<g role="presentation"><!><!><!></g>`);
+var root_15 = $2.from_html(`<th scope="col"> </th>`);
+var root_17 = $2.from_html(`<td> </td>`);
+var root_16 = $2.from_html(`<tr><th scope="row"> </th><!></tr>`);
+var root_14 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col"> </th><!></tr></thead><tbody></tbody></table>`);
+var root = $2.from_html(`<figure><!> <div class="cinder-matrix-chart__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
 function Matrix_chart($$anchor, $$props) {
-  const generatedId = $.props_id();
-  $.push($$props, true);
-  let colorScale = $.prop($$props, "colorScale", 3, "sequential"), showCellLabels = $.prop($$props, "showCellLabels", 3, true), height = $.prop($$props, "height", 3, 280), 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 colorScale = $2.prop($$props, "colorScale", 3, "sequential"), showCellLabels = $2.prop($$props, "showCellLabels", 3, true), height = $2.prop($$props, "height", 3, 280), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -811,35 +846,21 @@ function Matrix_chart($$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 = 40;
   const marginRight = 16;
   const marginBottom = 16;
   const marginLeft = 80;
-  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 xLabels = $.derived(() => {
+  const plotWidth = $2.derived(() => Math.max(1, $2.get(measuredWidth) - marginLeft - marginRight));
+  const plotHeight = $2.derived(() => Math.max(1, height() - marginTop - marginBottom));
+  const xLabels = $2.derived(() => {
     const seen = new Set;
     const result = [];
     for (const datum of $$props.data) {
@@ -854,7 +875,7 @@ function Matrix_chart($$anchor, $$props) {
     }
     return result;
   });
-  const yLabels = $.derived(() => {
+  const yLabels = $2.derived(() => {
     const seen = new Set;
     const result = [];
     for (const datum of $$props.data) {
@@ -869,10 +890,10 @@ function Matrix_chart($$anchor, $$props) {
     }
     return result;
   });
-  const isEmpty = $.derived(() => $.get(xLabels).length === 0 || $.get(yLabels).length === 0);
-  const cellWidth = $.derived(() => $.get(xLabels).length > 0 ? $.get(plotWidth) / $.get(xLabels).length : 0);
-  const cellHeight = $.derived(() => $.get(yLabels).length > 0 ? $.get(plotHeight) / $.get(yLabels).length : 0);
-  const valueLookup = $.derived(() => {
+  const isEmpty = $2.derived(() => $2.get(xLabels).length === 0 || $2.get(yLabels).length === 0);
+  const cellWidth = $2.derived(() => $2.get(xLabels).length > 0 ? $2.get(plotWidth) / $2.get(xLabels).length : 0);
+  const cellHeight = $2.derived(() => $2.get(yLabels).length > 0 ? $2.get(plotHeight) / $2.get(yLabels).length : 0);
+  const valueLookup = $2.derived(() => {
     const lookup = new Map;
     for (const datum of $$props.data) {
       const xRaw = datum[$$props.xField];
@@ -893,29 +914,29 @@ function Matrix_chart($$anchor, $$props) {
     return lookup;
   });
   function lookupValue(xLabel, yLabel) {
-    return $.get(valueLookup).get(xLabel)?.get(yLabel) ?? null;
+    return $2.get(valueLookup).get(xLabel)?.get(yLabel) ?? null;
   }
-  const cells = $.derived(() => {
+  const cells = $2.derived(() => {
     const result = [];
-    for (const [yIndex, currentYLabel] of $.get(yLabels).entries()) {
-      for (const [xIndex, currentXLabel] of $.get(xLabels).entries()) {
+    for (const [yIndex, currentYLabel] of $2.get(yLabels).entries()) {
+      for (const [xIndex, currentXLabel] of $2.get(xLabels).entries()) {
         result.push({
           key: `${xIndex}:${yIndex}`,
           xLabel: currentXLabel,
           yLabel: currentYLabel,
           value: lookupValue(currentXLabel, currentYLabel),
-          x: xIndex * $.get(cellWidth),
-          y: yIndex * $.get(cellHeight),
-          width: $.get(cellWidth),
-          height: $.get(cellHeight)
+          x: xIndex * $2.get(cellWidth),
+          y: yIndex * $2.get(cellHeight),
+          width: $2.get(cellWidth),
+          height: $2.get(cellHeight)
         });
       }
     }
     return result;
   });
-  const domain = $.derived(() => heatmapDomain($.get(cells).map((cell) => cell.value)));
+  const domain = $2.derived(() => heatmapDomain($2.get(cells).map((cell) => cell.value)));
   function cellFill(value) {
-    return heatmapCellFill(value, $.get(domain), colorScale());
+    return heatmapCellFill(value, $2.get(domain), colorScale());
   }
   function formatValue(value) {
     if (value === null)
@@ -923,16 +944,16 @@ function Matrix_chart($$anchor, $$props) {
     return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
   }
   function cellLabelFill(value) {
-    return heatmapLabelFill(value, $.get(domain), colorScale());
+    return heatmapLabelFill(value, $2.get(domain), colorScale());
   }
-  const hasDataTable = $.derived(() => dataTableVisibility() !== "hidden");
-  let hoveredCellKey = $.state(null);
+  const hasDataTable = $2.derived(() => dataTableVisibility() !== "hidden");
+  let hoveredCellKey = $2.state(null);
   function handlePlotPointerLeave() {
-    $.set(hoveredCellKey, null);
+    $2.set(hoveredCellKey, null);
   }
-  const tableRows = $.derived(() => {
-    return $.get(yLabels).map((currentYLabel) => {
-      const values = $.get(xLabels).map((currentXLabel) => ({
+  const tableRows = $2.derived(() => {
+    return $2.get(yLabels).map((currentYLabel) => {
+      const values = $2.get(xLabels).map((currentXLabel) => ({
         xLabel: currentXLabel,
         value: lookupValue(currentXLabel, currentYLabel)
       }));
@@ -940,263 +961,263 @@ function Matrix_chart($$anchor, $$props) {
     });
   });
   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),
     "data-cinder-color-scale": colorScale()
   }), [() => classNames("cinder-matrix-chart", $$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 chart…");
-          $.append($$anchor3, text_1);
+          var text_1 = $2.text("Loading chart…");
+          $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 chart data");
-          $.append($$anchor3, text_2);
+          var text_2 = $2.text("No chart 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_7 = ($$anchor2) => {
       var g = root_9();
-      $.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
-      var node_8 = $.child(g);
-      $.each(node_8, 18, () => $.get(xLabels), (xLabel) => xLabel, ($$anchor3, xLabel, index) => {
+      $2.set_attribute(g, "transform", `translate(${marginLeft}, ${marginTop})`);
+      var node_8 = $2.child(g);
+      $2.each(node_8, 18, () => $2.get(xLabels), (xLabel) => xLabel, ($$anchor3, xLabel, index) => {
         var text_4 = root_10();
-        $.set_attribute(text_4, "y", -8);
-        var text_5 = $.child(text_4, true);
-        $.reset(text_4);
-        $.template_effect(() => {
-          $.set_attribute(text_4, "x", $.get(index) * $.get(cellWidth) + $.get(cellWidth) / 2);
-          $.set_text(text_5, xLabel);
+        $2.set_attribute(text_4, "y", -8);
+        var text_5 = $2.child(text_4, true);
+        $2.reset(text_4);
+        $2.template_effect(() => {
+          $2.set_attribute(text_4, "x", $2.get(index) * $2.get(cellWidth) + $2.get(cellWidth) / 2);
+          $2.set_text(text_5, xLabel);
         });
-        $.append($$anchor3, text_4);
+        $2.append($$anchor3, text_4);
       });
-      var node_9 = $.sibling(node_8);
-      $.each(node_9, 18, () => $.get(yLabels), (yLabel) => yLabel, ($$anchor3, yLabel, index) => {
+      var node_9 = $2.sibling(node_8);
+      $2.each(node_9, 18, () => $2.get(yLabels), (yLabel) => yLabel, ($$anchor3, yLabel, index) => {
         var text_6 = root_11();
-        $.set_attribute(text_6, "x", -8);
-        var text_7 = $.child(text_6, true);
-        $.reset(text_6);
-        $.template_effect(() => {
-          $.set_attribute(text_6, "y", $.get(index) * $.get(cellHeight) + $.get(cellHeight) / 2);
-          $.set_text(text_7, yLabel);
+        $2.set_attribute(text_6, "x", -8);
+        var text_7 = $2.child(text_6, true);
+        $2.reset(text_6);
+        $2.template_effect(() => {
+          $2.set_attribute(text_6, "y", $2.get(index) * $2.get(cellHeight) + $2.get(cellHeight) / 2);
+          $2.set_text(text_7, yLabel);
         });
-        $.append($$anchor3, text_6);
+        $2.append($$anchor3, text_6);
       });
-      var node_10 = $.sibling(node_9);
-      $.each(node_10, 17, () => $.get(cells), (cell) => cell.key, ($$anchor3, cell) => {
+      var node_10 = $2.sibling(node_9);
+      $2.each(node_10, 17, () => $2.get(cells), (cell) => cell.key, ($$anchor3, cell) => {
         var g_1 = root_12();
-        var rect_1 = $.child(g_1);
-        var title_1 = $.child(rect_1);
-        var text_8 = $.child(title_1);
-        $.reset(title_1);
-        $.reset(rect_1);
-        var node_11 = $.sibling(rect_1);
+        var rect = $2.child(g_1);
+        var title_1 = $2.child(rect);
+        var text_8 = $2.child(title_1);
+        $2.reset(title_1);
+        $2.reset(rect);
+        var node_11 = $2.sibling(rect);
         {
           var consequent_6 = ($$anchor4) => {
             var text_9 = root_13();
-            var text_10 = $.child(text_9, true);
-            $.reset(text_9);
-            $.template_effect(($0, $1) => {
-              $.set_attribute(text_9, "x", $.get(cell).x + $.get(cell).width / 2);
-              $.set_attribute(text_9, "y", $.get(cell).y + $.get(cell).height / 2);
-              $.set_attribute(text_9, "fill", $0);
-              $.set_text(text_10, $1);
+            var text_10 = $2.child(text_9, true);
+            $2.reset(text_9);
+            $2.template_effect(($0, $1) => {
+              $2.set_attribute(text_9, "x", $2.get(cell).x + $2.get(cell).width / 2);
+              $2.set_attribute(text_9, "y", $2.get(cell).y + $2.get(cell).height / 2);
+              $2.set_attribute(text_9, "fill", $0);
+              $2.set_text(text_10, $1);
             }, [
-              () => cellLabelFill($.get(cell).value),
-              () => formatValue($.get(cell).value)
+              () => cellLabelFill($2.get(cell).value),
+              () => formatValue($2.get(cell).value)
             ]);
-            $.append($$anchor4, text_9);
+            $2.append($$anchor4, text_9);
           };
-          $.if(node_11, ($$render) => {
-            if (showCellLabels() && $.get(cell).value !== null)
+          $2.if(node_11, ($$render) => {
+            if (showCellLabels() && $2.get(cell).value !== null)
               $$render(consequent_6);
           });
         }
-        $.reset(g_1);
-        $.template_effect(($0, $1) => {
-          $.set_attribute(rect_1, "x", $.get(cell).x);
-          $.set_attribute(rect_1, "y", $.get(cell).y);
-          $.set_attribute(rect_1, "width", $.get(cell).width);
-          $.set_attribute(rect_1, "height", $.get(cell).height);
-          $.set_attribute(rect_1, "fill", $0);
-          $.set_attribute(rect_1, "data-cinder-x", $.get(cell).xLabel);
-          $.set_attribute(rect_1, "data-cinder-y", $.get(cell).yLabel);
-          $.set_attribute(rect_1, "data-cinder-active", $.get(hoveredCellKey) === $.get(cell).key ? "" : undefined);
-          $.set_text(text_8, `${$.get(cell).xLabel ?? ""} × ${$.get(cell).yLabel ?? ""}: ${$1 ?? ""}`);
+        $2.reset(g_1);
+        $2.template_effect(($0, $1) => {
+          $2.set_attribute(rect, "x", $2.get(cell).x);
+          $2.set_attribute(rect, "y", $2.get(cell).y);
+          $2.set_attribute(rect, "width", $2.get(cell).width);
+          $2.set_attribute(rect, "height", $2.get(cell).height);
+          $2.set_attribute(rect, "fill", $0);
+          $2.set_attribute(rect, "data-cinder-x", $2.get(cell).xLabel);
+          $2.set_attribute(rect, "data-cinder-y", $2.get(cell).yLabel);
+          $2.set_attribute(rect, "data-cinder-active", $2.get(hoveredCellKey) === $2.get(cell).key ? "" : undefined);
+          $2.set_text(text_8, `${$2.get(cell).xLabel ?? ""} × ${$2.get(cell).yLabel ?? ""}: ${$1 ?? ""}`);
         }, [
-          () => cellFill($.get(cell).value),
-          () => $.get(cell).value !== null ? formatValue($.get(cell).value) : "no data"
+          () => cellFill($2.get(cell).value),
+          () => $2.get(cell).value !== null ? formatValue($2.get(cell).value) : "no data"
         ]);
-        $.event("pointerenter", rect_1, () => $.set(hoveredCellKey, $.get(cell).key, true));
-        $.append($$anchor3, g_1);
+        $2.event("pointerenter", rect, () => $2.set(hoveredCellKey, $2.get(cell).key, true));
+        $2.append($$anchor3, g_1);
       });
-      $.reset(g);
-      $.event("pointerleave", g, handlePlotPointerLeave);
-      $.append($$anchor2, g);
+      $2.reset(g);
+      $2.event("pointerleave", g, handlePlotPointerLeave);
+      $2.append($$anchor2, g);
     };
-    $.if(node_7, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_7, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_7);
     });
   }
-  $.reset(svg);
-  $.reset(div);
-  var node_12 = $.sibling(div, 2);
+  $2.reset(svg);
+  $2.reset(div);
+  var node_12 = $2.sibling(div, 2);
   {
     var consequent_8 = ($$anchor2) => {
       var table = root_14();
-      var caption = $.child(table);
-      var text_11 = $.child(caption, true);
-      $.reset(caption);
-      var thead = $.sibling(caption);
-      var tr = $.child(thead);
-      var th = $.child(tr);
-      var text_12 = $.child(th, true);
-      $.reset(th);
-      var node_13 = $.sibling(th);
-      $.each(node_13, 16, () => $.get(xLabels), (xLabel) => xLabel, ($$anchor3, xLabel) => {
+      var caption = $2.child(table);
+      var text_11 = $2.child(caption, true);
+      $2.reset(caption);
+      var thead = $2.sibling(caption);
+      var tr = $2.child(thead);
+      var th = $2.child(tr);
+      var text_12 = $2.child(th, true);
+      $2.reset(th);
+      var node_13 = $2.sibling(th);
+      $2.each(node_13, 16, () => $2.get(xLabels), (xLabel) => xLabel, ($$anchor3, xLabel) => {
         var th_1 = root_15();
-        var text_13 = $.child(th_1, true);
-        $.reset(th_1);
-        $.template_effect(() => $.set_text(text_13, xLabel));
-        $.append($$anchor3, th_1);
+        var text_13 = $2.child(th_1, true);
+        $2.reset(th_1);
+        $2.template_effect(() => $2.set_text(text_13, xLabel));
+        $2.append($$anchor3, th_1);
       });
-      $.reset(tr);
-      $.reset(thead);
-      var tbody = $.sibling(thead);
-      $.each(tbody, 21, () => $.get(tableRows), (row) => row.yLabel, ($$anchor3, row) => {
+      $2.reset(tr);
+      $2.reset(thead);
+      var tbody = $2.sibling(thead);
+      $2.each(tbody, 21, () => $2.get(tableRows), (row) => row.yLabel, ($$anchor3, row) => {
         var tr_1 = root_16();
-        var th_2 = $.child(tr_1);
-        var text_14 = $.child(th_2, true);
-        $.reset(th_2);
-        var node_14 = $.sibling(th_2);
-        $.each(node_14, 17, () => $.get(row).values, (cell) => cell.xLabel, ($$anchor4, cell) => {
+        var th_2 = $2.child(tr_1);
+        var text_14 = $2.child(th_2, true);
+        $2.reset(th_2);
+        var node_14 = $2.sibling(th_2);
+        $2.each(node_14, 17, () => $2.get(row).values, (cell) => cell.xLabel, ($$anchor4, cell) => {
           var td = root_17();
-          var text_15 = $.child(td, true);
-          $.reset(td);
-          $.template_effect(($0) => $.set_text(text_15, $0), [
-            () => $.get(cell).value !== null ? formatValue($.get(cell).value) : "—"
+          var text_15 = $2.child(td, true);
+          $2.reset(td);
+          $2.template_effect(($0) => $2.set_text(text_15, $0), [
+            () => $2.get(cell).value !== null ? formatValue($2.get(cell).value) : "—"
           ]);
-          $.append($$anchor4, td);
+          $2.append($$anchor4, td);
         });
-        $.reset(tr_1);
-        $.template_effect(() => $.set_text(text_14, $.get(row).yLabel));
-        $.append($$anchor3, tr_1);
+        $2.reset(tr_1);
+        $2.template_effect(() => $2.set_text(text_14, $2.get(row).yLabel));
+        $2.append($$anchor3, tr_1);
       });
-      $.reset(tbody);
-      $.reset(table);
-      $.template_effect(($0) => {
-        $.set_class(table, 1, $0);
-        $.set_text(text_11, $$props.dataTableCaption ?? $$props.label);
-        $.set_text(text_12, $$props.yField);
-      }, [() => $.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_11, $$props.dataTableCaption ?? $$props.label);
+        $2.set_text(text_12, $$props.yField);
+      }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
+      $2.append($$anchor2, table);
     };
-    $.if(node_12, ($$render) => {
-      if ($.get(hasDataTable))
+    $2.if(node_12, ($$render) => {
+      if ($2.get(hasDataTable))
         $$render(consequent_8);
     });
   }
-  $.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/matrix-chart/index.ts
@@ -1206,4 +1227,4 @@ export {
   Matrix_chart as MatrixChart
 };
 
-//# debugId=18866A2D21E973C864756E2164756E21
+//# debugId=A29357194DA34EED64756E2164756E21