@adecore/agents-react 0.31.11 → 0.32.0

package/dist/chat/ui/intelligent-ui/renderers/chart.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Button, SegmentBar, Tooltip, useMeasuredWidth } from '@adecore/ui';
@@ -9,6 +9,7 @@ import { UI_CHART_CHARACTER, UI_CHART_ROWS, uiChartCharacter, uiChartAxis, uiCha
 import { uiWithUnit } from '../node-text.js';
 import { useTruncated } from '../use-truncated.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const HEIGHT = 160;
 const HBAR_ROW = 24;
 const STACKED_ROW = 28;
@@ -22,166 +23,1265 @@ const LABEL_BAND = 56;
 const DOTS_UP_TO = 30;
 const GROW = 'transition-[scale,opacity] duration-400 ease-out motion-reduce:transition-none';
 function seriesColor(index) {
-    return `var(--chart-${index + 1})`;
+  return `var(--chart-${index + 1})`;
 }
 function valueText(value, unit) {
-    return value === null ? '' : uiWithUnit(formatRounded(value, 2), unit);
+  return value === null ? '' : uiWithUnit(formatRounded(value, 2), unit);
 }
 function unitApart(unit) {
-    return unit !== undefined && unit.length > UNIT_ON_TICKS;
+  return unit !== undefined && unit.length > UNIT_ON_TICKS;
 }
 /* Where a value axis stands and how much room its category labels get, from the labels it writes. */
 function verticalLayout(chart, unit, width, character) {
-    // uiChartData only hands over data whose range is finite.
-    const { low, high } = uiChartRange(chart.min, chart.max);
-    const ticks = low === 0 ? [0, high / 2, high] : [low, 0, high];
-    const tickUnit = unitApart(unit) ? undefined : unit;
-    const { axisWidth, tickTexts } = uiChartAxis(ticks.map((tick) => valueText(tick, tickUnit)), width, character);
-    const band = Math.max(0, width - axisWidth) / chart.labels.length;
-    const labelEvery = Math.max(1, Math.ceil(LABEL_BAND / Math.max(1, band)));
-    return { low, high, ticks, tickTexts, axisWidth, band, labelEvery, labelRoom: Math.min(band * labelEvery, Math.max(0, width - axisWidth)) };
+  // uiChartData only hands over data whose range is finite.
+  const {
+    low,
+    high
+  } = uiChartRange(chart.min, chart.max);
+  const ticks = low === 0 ? [0, high / 2, high] : [low, 0, high];
+  const tickUnit = unitApart(unit) ? undefined : unit;
+  const {
+    axisWidth,
+    tickTexts
+  } = uiChartAxis(ticks.map(tick => valueText(tick, tickUnit)), width, character);
+  const band = Math.max(0, width - axisWidth) / chart.labels.length;
+  const labelEvery = Math.max(1, Math.ceil(LABEL_BAND / Math.max(1, band)));
+  return {
+    low,
+    high,
+    ticks,
+    tickTexts,
+    axisWidth,
+    band,
+    labelEvery,
+    labelRoom: Math.min(band * labelEvery, Math.max(0, width - axisWidth))
+  };
 }
 /* Whether a drawing in SVG at this width cuts a category label short, which then offers the values to read it whole; HTML rows are measured where they stand. */
 function labelsCut(chart, unit, width, character) {
-    if (width <= 0 || chart.kind === 'hbar' || chart.kind === 'stacked') {
-        return false;
-    }
-    const { labelRoom } = verticalLayout(chart, unit, width, character);
-    return chart.labels.some((label) => uiChartTextWidth(label, character) > labelRoom);
+  if (width <= 0 || chart.kind === 'hbar' || chart.kind === 'stacked') {
+    return false;
+  }
+  const {
+    labelRoom
+  } = verticalLayout(chart, unit, width, character);
+  return chart.labels.some(label => uiChartTextWidth(label, character) > labelRoom);
 }
 /* The character width of chart type, which follows the root font size; a drawing depends on a measured width, so only a page reads it. */
 function useChartCharacter() {
-    const [character] = useState(() => typeof document === 'undefined' ? UI_CHART_CHARACTER : uiChartCharacter(Number.parseFloat(getComputedStyle(document.documentElement).fontSize)));
-    return character;
+  const [character] = useState(_temp);
+  return character;
 }
 /* The height a chart will take, which its place holds while the node streams. */
+function _temp() {
+  return typeof document === "undefined" ? UI_CHART_CHARACTER : uiChartCharacter(Number.parseFloat(getComputedStyle(document.documentElement).fontSize));
+}
 function chartHeight(kind, rows) {
-    const count = Math.max(1, Math.min(rows, UI_CHART_ROWS));
-    return kind === 'hbar' ? count * HBAR_ROW : kind === 'stacked' ? count * STACKED_ROW : HEIGHT;
+  const count = Math.max(1, Math.min(rows, UI_CHART_ROWS));
+  return kind === 'hbar' ? count * HBAR_ROW : kind === 'stacked' ? count * STACKED_ROW : HEIGHT;
 }
 /* One sentence with the main point over all of the data, drawn or not, which a screen reader hears in place of the drawing. */
 function chartSummary(values, unit, t) {
-    let top = null;
-    for (const series of values.series) {
-        for (let i = 0; i < series.values.length; i++) {
-            const value = series.values[i];
-            if (value !== null && value !== undefined && (top === null || value > top.value)) {
-                top = { label: values.labels[i] ?? '', series: series.key, value };
-            }
-        }
+  let top = null;
+  for (const series of values.series) {
+    for (let i = 0; i < series.values.length; i++) {
+      const value = series.values[i];
+      if (value !== null && value !== undefined && (top === null || value > top.value)) {
+        top = {
+          label: values.labels[i] ?? '',
+          series: series.key,
+          value
+        };
+      }
     }
-    if (top === null) {
-        return t('blocks.chart.values');
-    }
-    return values.series.length > 1
-        ? t('blocks.chart.summarySeries', { count: values.labels.length, series: top.series, label: top.label, value: valueText(top.value, unit) })
-        : t('blocks.chart.summary', { count: values.labels.length, label: top.label, value: valueText(top.value, unit) });
+  }
+  if (top === null) {
+    return t('blocks.chart.values');
+  }
+  return values.series.length > 1 ? t('blocks.chart.summarySeries', {
+    count: values.labels.length,
+    series: top.series,
+    label: top.label,
+    value: valueText(top.value, unit)
+  }) : t('blocks.chart.summary', {
+    count: values.labels.length,
+    label: top.label,
+    value: valueText(top.value, unit)
+  });
 }
-function Legend({ chart }) {
-    return (_jsx("div", { "aria-hidden": true, className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted", children: chart.series.map((series, index) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(index) } }), series.key] }, series.key))) }));
+function Legend(t0) {
+  const $ = _c(4);
+  const {
+    chart
+  } = t0;
+  let t1;
+  if ($[0] !== chart.series) {
+    t1 = chart.series.map(_temp2);
+    $[0] = chart.series;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted",
+      children: t1
+    });
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
 }
 /* Every number of the data, for a screen reader, and on screen once a person opens it. */
-function ValuesTable({ values, unit, shown }) {
-    const { t } = useTranslation('agent-chat');
-    const table = (_jsxs("table", { className: shown ? 'w-full border-collapse text-xs tabular-nums' : undefined, children: [_jsx("caption", { className: shown ? 'sr-only' : undefined, children: t('blocks.chart.values') }), _jsx("thead", { className: shown ? 'sticky top-0 z-1 bg-surface-hover' : undefined, children: _jsxs("tr", { children: [_jsx("td", {}), values.series.map((series) => (_jsx("th", { scope: "col", className: shown ? 'h-8 px-2 text-right font-medium whitespace-nowrap text-text-muted' : undefined, children: series.key }, series.key)))] }) }), _jsx("tbody", { children: values.labels.map((label, index) => (_jsxs("tr", { className: shown ? 'border-t border-border-soft' : undefined, children: [_jsx("th", { scope: "row", className: shown ? 'h-8 px-2 text-left font-normal wrap-anywhere text-text-muted' : undefined, children: label }), values.series.map((series) => (_jsx("td", { className: shown ? 'h-8 px-2 text-right whitespace-nowrap text-text' : undefined, children: valueText(series.values[index] ?? null, unit) }, series.key)))] }, index))) })] }));
-    // A table grows to its widest cell whatever width it is given, so it is hidden inside a block that clips.
-    return _jsx("div", { className: shown ? 'max-h-80 w-full overflow-auto rounded-md border border-border-soft' : 'sr-only', children: table });
+function _temp2(series, index) {
+  return /*#__PURE__*/_jsxs("span", {
+    className: "flex items-center gap-1.5",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "size-2 rounded-sm",
+      style: {
+        backgroundColor: seriesColor(index)
+      }
+    }), series.key]
+  }, series.key);
+}
+function ValuesTable(t0) {
+  const $ = _c(35);
+  const {
+    values,
+    unit,
+    shown
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const t1 = shown ? "w-full border-collapse text-xs tabular-nums" : undefined;
+  const t2 = shown ? "sr-only" : undefined;
+  let t3;
+  if ($[0] !== t) {
+    t3 = t("blocks.chart.values");
+    $[0] = t;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== t2 || $[3] !== t3) {
+    t4 = /*#__PURE__*/_jsx("caption", {
+      className: t2,
+      children: t3
+    });
+    $[2] = t2;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const t5 = shown ? "sticky top-0 z-1 bg-surface-hover" : undefined;
+  let t6;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx("td", {});
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== shown || $[7] !== values.series) {
+    let t8;
+    if ($[9] !== shown) {
+      t8 = series => /*#__PURE__*/_jsx("th", {
+        scope: "col",
+        className: shown ? "h-8 px-2 text-right font-medium whitespace-nowrap text-text-muted" : undefined,
+        children: series.key
+      }, series.key);
+      $[9] = shown;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
+    }
+    t7 = values.series.map(t8);
+    $[6] = shown;
+    $[7] = values.series;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[11] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("tr", {
+      children: [t6, t7]
+    });
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== t5 || $[14] !== t8) {
+    t9 = /*#__PURE__*/_jsx("thead", {
+      className: t5,
+      children: t8
+    });
+    $[13] = t5;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== shown || $[17] !== unit || $[18] !== values.labels || $[19] !== values.series) {
+    let t11;
+    if ($[21] !== shown || $[22] !== unit || $[23] !== values.series) {
+      t11 = (label, index) => /*#__PURE__*/_jsxs("tr", {
+        className: shown ? "border-t border-border-soft" : undefined,
+        children: [/*#__PURE__*/_jsx("th", {
+          scope: "row",
+          className: shown ? "h-8 px-2 text-left font-normal wrap-anywhere text-text-muted" : undefined,
+          children: label
+        }), values.series.map(series_0 => /*#__PURE__*/_jsx("td", {
+          className: shown ? "h-8 px-2 text-right whitespace-nowrap text-text" : undefined,
+          children: valueText(series_0.values[index] ?? null, unit)
+        }, series_0.key))]
+      }, index);
+      $[21] = shown;
+      $[22] = unit;
+      $[23] = values.series;
+      $[24] = t11;
+    } else {
+      t11 = $[24];
+    }
+    t10 = values.labels.map(t11);
+    $[16] = shown;
+    $[17] = unit;
+    $[18] = values.labels;
+    $[19] = values.series;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[25] !== t10) {
+    t11 = /*#__PURE__*/_jsx("tbody", {
+      children: t10
+    });
+    $[25] = t10;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] !== t1 || $[28] !== t11 || $[29] !== t4 || $[30] !== t9) {
+    t12 = /*#__PURE__*/_jsxs("table", {
+      className: t1,
+      children: [t4, t9, t11]
+    });
+    $[27] = t1;
+    $[28] = t11;
+    $[29] = t4;
+    $[30] = t9;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  const table = t12;
+  const t13 = shown ? "max-h-80 w-full overflow-auto rounded-md border border-border-soft" : "sr-only";
+  let t14;
+  if ($[32] !== t13 || $[33] !== table) {
+    t14 = /*#__PURE__*/_jsx("div", {
+      className: t13,
+      children: table
+    });
+    $[32] = t13;
+    $[33] = table;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  return t14;
 }
 /* The values of one category beside the pointer. */
-function Readout({ chart, index, left, unit }) {
-    return (_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute top-0 z-1 flex w-max max-w-56 -translate-x-1/2 flex-col gap-0.5 rounded-md bg-surface-raised px-2 py-1 text-xs shadow-raised", style: { left }, children: [_jsx("span", { className: "font-medium wrap-anywhere text-text", children: chart.labels[index] }), chart.series.map((series, at) => (_jsxs("span", { className: "flex items-center gap-1.5 text-text-muted tabular-nums", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(at) } }), chart.series.length > 1 && _jsx("span", { children: series.key }), _jsx("span", { className: "text-text", children: valueText(series.values[index] ?? null, unit) })] }, series.key)))] }));
+function Readout(t0) {
+  const $ = _c(16);
+  const {
+    chart,
+    index,
+    left,
+    unit
+  } = t0;
+  let t1;
+  if ($[0] !== left) {
+    t1 = {
+      left
+    };
+    $[0] = left;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = chart.labels[index];
+  let t3;
+  if ($[2] !== t2) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "font-medium wrap-anywhere text-text",
+      children: t2
+    });
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== chart.series || $[5] !== index || $[6] !== unit) {
+    let t5;
+    if ($[8] !== chart.series.length || $[9] !== index || $[10] !== unit) {
+      t5 = (series, at) => /*#__PURE__*/_jsxs("span", {
+        className: "flex items-center gap-1.5 text-text-muted tabular-nums",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "size-2 rounded-sm",
+          style: {
+            backgroundColor: seriesColor(at)
+          }
+        }), chart.series.length > 1 && /*#__PURE__*/_jsx("span", {
+          children: series.key
+        }), /*#__PURE__*/_jsx("span", {
+          className: "text-text",
+          children: valueText(series.values[index] ?? null, unit)
+        })]
+      }, series.key);
+      $[8] = chart.series.length;
+      $[9] = index;
+      $[10] = unit;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    t4 = chart.series.map(t5);
+    $[4] = chart.series;
+    $[5] = index;
+    $[6] = unit;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[12] !== t1 || $[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute top-0 z-1 flex w-max max-w-56 -translate-x-1/2 flex-col gap-0.5 rounded-md bg-surface-raised px-2 py-1 text-xs shadow-raised",
+      style: t1,
+      children: [t3, t4]
+    });
+    $[12] = t1;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  return t5;
 }
 /* Bars and lines over a value axis, in SVG at the measured width. */
-function VerticalChart({ chart, kind, unit, width, character }) {
-    const [hover, setHover] = useState(null);
-    const { low, high, ticks, tickTexts, axisWidth, band, labelEvery, labelRoom } = verticalLayout(chart, unit, width, character);
-    const plotHeight = HEIGHT - PLOT_TOP - Math.round((LABEL_ROOM * character) / UI_CHART_CHARACTER);
-    const y = (value) => Math.round(PLOT_TOP + ((high - value) / (high - low)) * plotHeight);
-    const baseline = y(0);
-    const center = (index) => Math.round(axisWidth + band * index + band / 2);
-    const gap = band * 0.2;
-    const barWidth = Math.max(1, (band - gap) / chart.series.length);
-    const labelAt = (index, text) => {
+function VerticalChart(t0) {
+  const $ = _c(81);
+  const {
+    chart,
+    kind,
+    unit,
+    width,
+    character
+  } = t0;
+  const [hover, setHover] = useState(null);
+  let axisWidth;
+  let band;
+  let barWidth;
+  let baseline;
+  let center;
+  let gap;
+  let segments;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let y;
+  if ($[0] !== character || $[1] !== chart || $[2] !== hover || $[3] !== unit || $[4] !== width) {
+    const {
+      low,
+      high,
+      ticks,
+      tickTexts,
+      axisWidth: t9,
+      band: t10,
+      labelEvery,
+      labelRoom
+    } = verticalLayout(chart, unit, width, character);
+    axisWidth = t9;
+    band = t10;
+    const plotHeight = HEIGHT - PLOT_TOP - Math.round(LABEL_ROOM * character / UI_CHART_CHARACTER);
+    let t11;
+    if ($[21] !== high || $[22] !== low || $[23] !== plotHeight) {
+      t11 = value => Math.round(PLOT_TOP + (high - value) / (high - low) * plotHeight);
+      $[21] = high;
+      $[22] = low;
+      $[23] = plotHeight;
+      $[24] = t11;
+    } else {
+      t11 = $[24];
+    }
+    y = t11;
+    baseline = y(0);
+    let t12;
+    if ($[25] !== axisWidth || $[26] !== band) {
+      t12 = index => Math.round(axisWidth + band * index + band / 2);
+      $[25] = axisWidth;
+      $[26] = band;
+      $[27] = t12;
+    } else {
+      t12 = $[27];
+    }
+    center = t12;
+    gap = band * 0.2;
+    barWidth = Math.max(1, (band - gap) / chart.series.length);
+    let t13;
+    if ($[28] !== axisWidth || $[29] !== center || $[30] !== character || $[31] !== width) {
+      t13 = (index_0, text) => {
         const half = uiChartTextWidth(text, character) / 2;
-        return Math.round(Math.min(Math.max(center(index), axisWidth + half), width - half));
-    };
-    const segments = (values) => values
-        .map((value, index) => (value === null ? null : `${center(index)} ${y(value)}`))
-        .reduce((paths, point, index, all) => {
-        if (point !== null) {
-            paths.push(`${index === 0 || all[index - 1] === null ? 'M' : 'L'}${point}`);
+        return Math.round(Math.min(Math.max(center(index_0), axisWidth + half), width - half));
+      };
+      $[28] = axisWidth;
+      $[29] = center;
+      $[30] = character;
+      $[31] = width;
+      $[32] = t13;
+    } else {
+      t13 = $[32];
+    }
+    const labelAt = t13;
+    let t14;
+    if ($[33] !== center || $[34] !== y) {
+      t14 = values => values.map((value_0, index_1) => value_0 === null ? null : `${center(index_1)} ${y(value_0)}`).reduce(_temp3, []).join(" ");
+      $[33] = center;
+      $[34] = y;
+      $[35] = t14;
+    } else {
+      t14 = $[35];
+    }
+    segments = t14;
+    t1 = width;
+    t2 = HEIGHT;
+    t3 = true;
+    t4 = "block overflow-visible";
+    if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = () => setHover(null);
+      $[36] = t5;
+    } else {
+      t5 = $[36];
+    }
+    if ($[37] !== axisWidth || $[38] !== band || $[39] !== hover || $[40] !== plotHeight) {
+      t6 = hover !== null && /*#__PURE__*/_jsx("rect", {
+        x: Math.round(axisWidth + band * hover),
+        y: PLOT_TOP,
+        width: Math.round(band),
+        height: plotHeight,
+        className: "fill-surface-hover"
+      });
+      $[37] = axisWidth;
+      $[38] = band;
+      $[39] = hover;
+      $[40] = plotHeight;
+      $[41] = t6;
+    } else {
+      t6 = $[41];
+    }
+    t7 = ticks.map((tick, index_3) => /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("line", {
+        x1: axisWidth,
+        x2: width,
+        y1: y(tick),
+        y2: y(tick),
+        className: tick === 0 ? "stroke-border" : "stroke-border-soft",
+        shapeRendering: "crispEdges"
+      }), /*#__PURE__*/_jsx("text", {
+        x: axisWidth - 6,
+        y: y(tick),
+        dy: "0.32em",
+        textAnchor: "end",
+        className: "fill-text-faint text-xs tabular-nums",
+        children: tickTexts[index_3]
+      })]
+    }, tick));
+    t8 = chart.labels.map((label, index_4) => {
+      if (index_4 % labelEvery !== 0) {
+        return null;
+      }
+      const text_0 = uiChartText(label, labelRoom, character);
+      return /*#__PURE__*/_jsx("text", {
+        x: labelAt(index_4, text_0),
+        y: HEIGHT - 4,
+        textAnchor: "middle",
+        className: "fill-text-faint text-xs",
+        children: text_0
+      }, index_4);
+    });
+    $[0] = character;
+    $[1] = chart;
+    $[2] = hover;
+    $[3] = unit;
+    $[4] = width;
+    $[5] = axisWidth;
+    $[6] = band;
+    $[7] = barWidth;
+    $[8] = baseline;
+    $[9] = center;
+    $[10] = gap;
+    $[11] = segments;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = y;
+  } else {
+    axisWidth = $[5];
+    band = $[6];
+    barWidth = $[7];
+    baseline = $[8];
+    center = $[9];
+    gap = $[10];
+    segments = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    t5 = $[16];
+    t6 = $[17];
+    t7 = $[18];
+    t8 = $[19];
+    y = $[20];
+  }
+  let t9;
+  if ($[42] !== axisWidth || $[43] !== band || $[44] !== barWidth || $[45] !== baseline || $[46] !== center || $[47] !== chart.labels.length || $[48] !== chart.series || $[49] !== gap || $[50] !== kind || $[51] !== segments || $[52] !== y) {
+    t9 = kind === "bar" ? /*#__PURE__*/_jsx("g", {
+      className: clsx(GROW, "starting:scale-y-0"),
+      style: {
+        transformOrigin: `0px ${baseline}px`
+      },
+      children: chart.series.map((series, at) => series.values.map((value_1, index_5) => value_1 === null ? null : /*#__PURE__*/_jsx("rect", {
+        x: Math.round(axisWidth + band * index_5 + gap / 2 + barWidth * at),
+        y: Math.min(y(value_1), baseline),
+        width: Math.max(1, Math.round(barWidth) - 1),
+        height: Math.abs(y(value_1) - baseline),
+        rx: 2,
+        style: {
+          fill: seriesColor(at)
         }
-        return paths;
-    }, [])
-        .join(' ');
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: width, height: HEIGHT, "aria-hidden": true, className: "block overflow-visible", onPointerLeave: () => setHover(null), children: [hover !== null && (_jsx("rect", { x: Math.round(axisWidth + band * hover), y: PLOT_TOP, width: Math.round(band), height: plotHeight, className: "fill-surface-hover" })), ticks.map((tick, index) => (_jsxs("g", { children: [_jsx("line", { x1: axisWidth, x2: width, y1: y(tick), y2: y(tick), className: tick === 0 ? 'stroke-border' : 'stroke-border-soft', shapeRendering: "crispEdges" }), _jsx("text", { x: axisWidth - 6, y: y(tick), dy: "0.32em", textAnchor: "end", className: "fill-text-faint text-xs tabular-nums", children: tickTexts[index] })] }, tick))), chart.labels.map((label, index) => {
-                        if (index % labelEvery !== 0) {
-                            return null;
-                        }
-                        const text = uiChartText(label, labelRoom, character);
-                        return (_jsx("text", { x: labelAt(index, text), y: HEIGHT - 4, textAnchor: "middle", className: "fill-text-faint text-xs", children: text }, index));
-                    }), kind === 'bar' ? (_jsx("g", { className: clsx(GROW, 'starting:scale-y-0'), style: { transformOrigin: `0px ${baseline}px` }, children: chart.series.map((series, at) => series.values.map((value, index) => value === null ? null : (_jsx("rect", { x: Math.round(axisWidth + band * index + gap / 2 + barWidth * at), y: Math.min(y(value), baseline), width: Math.max(1, Math.round(barWidth) - 1), height: Math.abs(y(value) - baseline), rx: 2, style: { fill: seriesColor(at) } }, `${series.key}:${index}`)))) })) : (_jsx("g", { className: clsx(GROW, 'starting:opacity-0'), children: chart.series.map((series, at) => (_jsxs("g", { style: { color: seriesColor(at) }, children: [_jsx("path", { d: segments(series.values), fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }), chart.labels.length <= DOTS_UP_TO &&
-                                    series.values.map((value, index) => value === null ? null : _jsx("circle", { cx: center(index), cy: y(value), r: 3, fill: "currentColor" }, index))] }, series.key))) })), chart.labels.map((_, index) => (_jsx("rect", { x: Math.round(axisWidth + band * index), y: 0, width: Math.max(1, Math.round(band)), height: HEIGHT, fill: "transparent", onPointerEnter: () => setHover(index) }, index)))] }), hover !== null && _jsx(Readout, { chart: chart, index: hover, unit: unit, left: Math.min(Math.max(center(hover), 64), Math.max(64, width - 64)) })] }));
+      }, `${series.key}:${index_5}`)))
+    }) : /*#__PURE__*/_jsx("g", {
+      className: clsx(GROW, "starting:opacity-0"),
+      children: chart.series.map((series_0, at_0) => /*#__PURE__*/_jsxs("g", {
+        style: {
+          color: seriesColor(at_0)
+        },
+        children: [/*#__PURE__*/_jsx("path", {
+          d: segments(series_0.values),
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinejoin: "round",
+          strokeLinecap: "round"
+        }), chart.labels.length <= DOTS_UP_TO && series_0.values.map((value_2, index_6) => value_2 === null ? null : /*#__PURE__*/_jsx("circle", {
+          cx: center(index_6),
+          cy: y(value_2),
+          r: 3,
+          fill: "currentColor"
+        }, index_6))]
+      }, series_0.key))
+    });
+    $[42] = axisWidth;
+    $[43] = band;
+    $[44] = barWidth;
+    $[45] = baseline;
+    $[46] = center;
+    $[47] = chart.labels.length;
+    $[48] = chart.series;
+    $[49] = gap;
+    $[50] = kind;
+    $[51] = segments;
+    $[52] = y;
+    $[53] = t9;
+  } else {
+    t9 = $[53];
+  }
+  let t10;
+  if ($[54] !== axisWidth || $[55] !== band || $[56] !== chart.labels) {
+    let t11;
+    if ($[58] !== axisWidth || $[59] !== band) {
+      t11 = (_, index_7) => /*#__PURE__*/_jsx("rect", {
+        x: Math.round(axisWidth + band * index_7),
+        y: 0,
+        width: Math.max(1, Math.round(band)),
+        height: HEIGHT,
+        fill: "transparent",
+        onPointerEnter: () => setHover(index_7)
+      }, index_7);
+      $[58] = axisWidth;
+      $[59] = band;
+      $[60] = t11;
+    } else {
+      t11 = $[60];
+    }
+    t10 = chart.labels.map(t11);
+    $[54] = axisWidth;
+    $[55] = band;
+    $[56] = chart.labels;
+    $[57] = t10;
+  } else {
+    t10 = $[57];
+  }
+  let t11;
+  if ($[61] !== t1 || $[62] !== t10 || $[63] !== t2 || $[64] !== t3 || $[65] !== t4 || $[66] !== t5 || $[67] !== t6 || $[68] !== t7 || $[69] !== t8 || $[70] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("svg", {
+      width: t1,
+      height: t2,
+      "aria-hidden": t3,
+      className: t4,
+      onPointerLeave: t5,
+      children: [t6, t7, t8, t9, t10]
+    });
+    $[61] = t1;
+    $[62] = t10;
+    $[63] = t2;
+    $[64] = t3;
+    $[65] = t4;
+    $[66] = t5;
+    $[67] = t6;
+    $[68] = t7;
+    $[69] = t8;
+    $[70] = t9;
+    $[71] = t11;
+  } else {
+    t11 = $[71];
+  }
+  let t12;
+  if ($[72] !== center || $[73] !== chart || $[74] !== hover || $[75] !== unit || $[76] !== width) {
+    t12 = hover !== null && /*#__PURE__*/_jsx(Readout, {
+      chart: chart,
+      index: hover,
+      unit: unit,
+      left: Math.min(Math.max(center(hover), 64), Math.max(64, width - 64))
+    });
+    $[72] = center;
+    $[73] = chart;
+    $[74] = hover;
+    $[75] = unit;
+    $[76] = width;
+    $[77] = t12;
+  } else {
+    t12 = $[77];
+  }
+  let t13;
+  if ($[78] !== t11 || $[79] !== t12) {
+    t13 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t11, t12]
+    });
+    $[78] = t11;
+    $[79] = t12;
+    $[80] = t13;
+  } else {
+    t13 = $[80];
+  }
+  return t13;
 }
 /* A row of 24px per category, its label beside the bars, which grow from zero to either side. */
-function HorizontalChart({ chart, unit }) {
-    const valueUnit = unitApart(unit) ? undefined : unit;
-    const { low, high } = uiChartRange(chart.min, chart.max);
-    const span = high - low;
-    const zero = (-low / span) * 100;
-    const single = chart.series.length === 1;
-    return (_jsx("div", { "aria-hidden": true, className: "flex flex-col", children: chart.labels.map((label, index) => (_jsxs("div", { className: "flex h-6 items-center gap-2 text-xs", children: [_jsx("span", { className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted", children: label }), _jsxs("span", { className: "relative flex min-w-0 grow flex-col justify-center gap-px", children: [low < 0 && _jsx("span", { className: "absolute inset-y-0 w-px bg-border", style: { left: `${zero}%` } }), chart.series.map((series, at) => {
-                            const value = series.values[index] ?? 0;
-                            return (_jsx("span", { className: clsx('relative block', single ? 'h-3' : 'h-1'), children: _jsx("span", { className: clsx(GROW, 'absolute inset-y-0 rounded-sm starting:scale-x-0', value < 0 ? 'origin-right' : 'origin-left'), style: {
-                                        left: `${((Math.min(value, 0) - low) / span) * 100}%`,
-                                        width: `${(Math.abs(value) / span) * 100}%`,
-                                        backgroundColor: seriesColor(at)
-                                    } }) }, series.key));
-                        })] }), single && (_jsx("span", { className: "max-w-1/3 min-w-12 shrink-0 truncate text-right text-text-faint tabular-nums", children: valueText(chart.series[0].values[index] ?? null, valueUnit) }))] }, index))) }));
+function _temp3(paths, point, index_2, all) {
+  if (point !== null) {
+    paths.push(`${index_2 === 0 || all[index_2 - 1] === null ? "M" : "L"}${point}`);
+  }
+  return paths;
+}
+function HorizontalChart(t0) {
+  const $ = _c(20);
+  const {
+    chart,
+    unit
+  } = t0;
+  const valueUnit = unitApart(unit) ? undefined : unit;
+  let t1;
+  if ($[0] !== chart.max || $[1] !== chart.min) {
+    t1 = uiChartRange(chart.min, chart.max);
+    $[0] = chart.max;
+    $[1] = chart.min;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const {
+    low,
+    high
+  } = t1;
+  const span = high - low;
+  const zero = -low / span * 100;
+  const single = chart.series.length === 1;
+  let t2;
+  if ($[3] !== chart.labels || $[4] !== chart.series || $[5] !== low || $[6] !== single || $[7] !== span || $[8] !== valueUnit || $[9] !== zero) {
+    let t3;
+    if ($[11] !== chart.series || $[12] !== low || $[13] !== single || $[14] !== span || $[15] !== valueUnit || $[16] !== zero) {
+      t3 = (label, index) => /*#__PURE__*/_jsxs("div", {
+        className: "flex h-6 items-center gap-2 text-xs",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted",
+          children: label
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "relative flex min-w-0 grow flex-col justify-center gap-px",
+          children: [low < 0 && /*#__PURE__*/_jsx("span", {
+            className: "absolute inset-y-0 w-px bg-border",
+            style: {
+              left: `${zero}%`
+            }
+          }), chart.series.map((series, at) => {
+            const value = series.values[index] ?? 0;
+            return /*#__PURE__*/_jsx("span", {
+              className: clsx("relative block", single ? "h-3" : "h-1"),
+              children: /*#__PURE__*/_jsx("span", {
+                className: clsx(GROW, "absolute inset-y-0 rounded-sm starting:scale-x-0", value < 0 ? "origin-right" : "origin-left"),
+                style: {
+                  left: `${(Math.min(value, 0) - low) / span * 100}%`,
+                  width: `${Math.abs(value) / span * 100}%`,
+                  backgroundColor: seriesColor(at)
+                }
+              })
+            }, series.key);
+          })]
+        }), single && /*#__PURE__*/_jsx("span", {
+          className: "max-w-1/3 min-w-12 shrink-0 truncate text-right text-text-faint tabular-nums",
+          children: valueText(chart.series[0].values[index] ?? null, valueUnit)
+        })]
+      }, index);
+      $[11] = chart.series;
+      $[12] = low;
+      $[13] = single;
+      $[14] = span;
+      $[15] = valueUnit;
+      $[16] = zero;
+      $[17] = t3;
+    } else {
+      t3 = $[17];
+    }
+    t2 = chart.labels.map(t3);
+    $[3] = chart.labels;
+    $[4] = chart.series;
+    $[5] = low;
+    $[6] = single;
+    $[7] = span;
+    $[8] = valueUnit;
+    $[9] = zero;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[18] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      className: "flex flex-col",
+      children: t2
+    });
+    $[18] = t2;
+    $[19] = t3;
+  } else {
+    t3 = $[19];
+  }
+  return t3;
 }
 /* A bar per category split into its series, on one scale so the rows compare. */
-function StackedChart({ chart, unit }) {
-    return (_jsx("div", { className: "flex flex-col gap-2", children: chart.labels.map((label, index) => (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [chart.labels.length > 1 && _jsx("span", { className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted", children: label }), _jsx(SegmentBar, { size: "sm", className: "grow", label: label, range: [0, chart.max], parts: chart.series.map((series, at) => ({
-                        value: series.values[index] ?? 0,
-                        color: seriesColor(at),
-                        label: `${series.key} ${valueText(series.values[index] ?? 0, unit)}`
-                    })) })] }, index))) }));
+function StackedChart(t0) {
+  const $ = _c(12);
+  const {
+    chart,
+    unit
+  } = t0;
+  let t1;
+  if ($[0] !== chart.labels || $[1] !== chart.max || $[2] !== chart.series || $[3] !== unit) {
+    let t2;
+    if ($[5] !== chart.labels.length || $[6] !== chart.max || $[7] !== chart.series || $[8] !== unit) {
+      t2 = (label, index) => /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-2 text-xs",
+        children: [chart.labels.length > 1 && /*#__PURE__*/_jsx("span", {
+          className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted",
+          children: label
+        }), /*#__PURE__*/_jsx(SegmentBar, {
+          size: "sm",
+          className: "grow",
+          label: label,
+          range: [0, chart.max],
+          parts: chart.series.map((series, at) => ({
+            value: series.values[index] ?? 0,
+            color: seriesColor(at),
+            label: `${series.key} ${valueText(series.values[index] ?? 0, unit)}`
+          }))
+        })]
+      }, index);
+      $[5] = chart.labels.length;
+      $[6] = chart.max;
+      $[7] = chart.series;
+      $[8] = unit;
+      $[9] = t2;
+    } else {
+      t2 = $[9];
+    }
+    t1 = chart.labels.map(t2);
+    $[0] = chart.labels;
+    $[1] = chart.max;
+    $[2] = chart.series;
+    $[3] = unit;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[10] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col gap-2",
+      children: t1
+    });
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
 }
 /* What the drawing leaves out or draws otherwise, said in words, with every value a press away. */
-function ChartNotes({ chart, requested, cut, values, unit, context, nodeId }) {
-    const { t } = useTranslation('agent-chat');
-    const [shown, setShown] = useBlockLocal(context, `${nodeId}:values`, () => false);
-    const notes = [
-        ...(chart.truncated ? [t('blocks.chart.rowsLeftOut', { shown: formatNumber(chart.labels.length), total: formatNumber(chart.total) })] : []),
-        ...(chart.omitted.length > 0 ? [t('blocks.chart.seriesLeftOut', { count: chart.omitted.length, series: chart.omitted.join(', ') })] : []),
-        ...(requested === 'stacked' && chart.kind !== 'stacked' ? [t('blocks.chart.sideBySide')] : [])
-    ];
-    const partial = chart.truncated || chart.omitted.length > 0 || cut;
-    const [measure, truncated] = useTruncated();
-    const toggle = shown ? t('blocks.chart.hideValues') : t('blocks.chart.showValues');
-    return (_jsxs(_Fragment, { children: [notes.length > 0 && (_jsx("div", { className: "flex flex-col gap-0.5 text-xs text-text-muted", children: notes.map((note) => (_jsx("p", { children: note }, note))) })), partial && (_jsx(Tooltip, { label: toggle, disabled: !truncated, children: _jsx(Button, { size: "xs", variant: "secondary", className: "max-w-full self-start", "aria-expanded": shown, onClick: () => setShown(!shown), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: toggle }) }) })), _jsx(ValuesTable, { values: values, unit: unit, shown: partial && shown })] }));
-}
-function DrawnChart({ chart, requested, data, unit, context, nodeId }) {
-    const { t } = useTranslation('agent-chat');
-    const [measure, width] = useMeasuredWidth();
-    const character = useChartCharacter();
-    const [measureRows, rowsCut] = useTruncated(true);
-    const values = useMemo(() => uiChartValues(data), [data]);
-    const { kind } = chart;
-    return (_jsxs("figure", { className: "chat-ui-flat flex flex-col gap-2.5 rounded-xl bg-ui-tile p-3.5", children: [chart.series.length > 1 && _jsx(Legend, { chart: chart }), kind !== 'stacked' && unitApart(unit) && _jsx("p", { className: "text-xs text-text-faint", children: unit }), _jsx("div", { ref: measure, role: "img", "aria-label": chartSummary(values, unit, t), className: "relative", children: kind === 'hbar' || kind === 'stacked' ? (_jsx("div", { ref: measureRows, children: kind === 'hbar' ? _jsx(HorizontalChart, { chart: chart, unit: unit }) : _jsx(StackedChart, { chart: chart, unit: unit }) })) : (_jsx("div", { style: { height: HEIGHT }, children: width > 0 && _jsx(VerticalChart, { chart: chart, kind: kind, unit: unit, width: width, character: character }) })) }), _jsx(ChartNotes, { chart: chart, requested: requested, cut: rowsCut || labelsCut(chart, unit, width, character), values: values, unit: unit, context: context, nodeId: nodeId })] }));
+function ChartNotes(t0) {
+  const $ = _c(36);
+  const {
+    chart,
+    requested,
+    cut,
+    values,
+    unit,
+    context,
+    nodeId
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [shown, setShown] = useBlockLocal(context, `${nodeId}:values`, _temp4);
+  let t1;
+  if ($[0] !== chart.labels || $[1] !== chart.total || $[2] !== chart.truncated || $[3] !== t) {
+    t1 = chart.truncated ? [t("blocks.chart.rowsLeftOut", {
+      shown: formatNumber(chart.labels.length),
+      total: formatNumber(chart.total)
+    })] : [];
+    $[0] = chart.labels;
+    $[1] = chart.total;
+    $[2] = chart.truncated;
+    $[3] = t;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== chart.omitted || $[6] !== t) {
+    t2 = chart.omitted.length > 0 ? [t("blocks.chart.seriesLeftOut", {
+      count: chart.omitted.length,
+      series: chart.omitted.join(", ")
+    })] : [];
+    $[5] = chart.omitted;
+    $[6] = t;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== chart.kind || $[9] !== requested || $[10] !== t) {
+    t3 = requested === "stacked" && chart.kind !== "stacked" ? [t("blocks.chart.sideBySide")] : [];
+    $[8] = chart.kind;
+    $[9] = requested;
+    $[10] = t;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+    t4 = [...t1, ...t2, ...t3];
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  const notes = t4;
+  const partial = chart.truncated || chart.omitted.length > 0 || cut;
+  const [measure, truncated] = useTruncated();
+  let t5;
+  if ($[16] !== shown || $[17] !== t) {
+    t5 = shown ? t("blocks.chart.hideValues") : t("blocks.chart.showValues");
+    $[16] = shown;
+    $[17] = t;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  const toggle = t5;
+  let t6;
+  if ($[19] !== notes) {
+    t6 = notes.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col gap-0.5 text-xs text-text-muted",
+      children: notes.map(_temp5)
+    });
+    $[19] = notes;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== measure || $[22] !== partial || $[23] !== setShown || $[24] !== shown || $[25] !== toggle || $[26] !== truncated) {
+    t7 = partial && /*#__PURE__*/_jsx(Tooltip, {
+      label: toggle,
+      disabled: !truncated,
+      children: /*#__PURE__*/_jsx(Button, {
+        size: "xs",
+        variant: "secondary",
+        className: "max-w-full self-start",
+        "aria-expanded": shown,
+        onClick: () => setShown(!shown),
+        children: /*#__PURE__*/_jsx("span", {
+          ref: measure,
+          className: "min-w-0 truncate",
+          children: toggle
+        })
+      })
+    });
+    $[21] = measure;
+    $[22] = partial;
+    $[23] = setShown;
+    $[24] = shown;
+    $[25] = toggle;
+    $[26] = truncated;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  const t8 = partial && shown;
+  let t9;
+  if ($[28] !== t8 || $[29] !== unit || $[30] !== values) {
+    t9 = /*#__PURE__*/_jsx(ValuesTable, {
+      values: values,
+      unit: unit,
+      shown: t8
+    });
+    $[28] = t8;
+    $[29] = unit;
+    $[30] = values;
+    $[31] = t9;
+  } else {
+    t9 = $[31];
+  }
+  let t10;
+  if ($[32] !== t6 || $[33] !== t7 || $[34] !== t9) {
+    t10 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t6, t7, t9]
+    });
+    $[32] = t6;
+    $[33] = t7;
+    $[34] = t9;
+    $[35] = t10;
+  } else {
+    t10 = $[35];
+  }
+  return t10;
+}
+function _temp5(note) {
+  return /*#__PURE__*/_jsx("p", {
+    children: note
+  }, note);
+}
+function _temp4() {
+  return false;
+}
+function DrawnChart(t0) {
+  const $ = _c(50);
+  const {
+    chart,
+    requested,
+    data,
+    unit,
+    context,
+    nodeId
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [measure, width] = useMeasuredWidth();
+  const character = useChartCharacter();
+  const [measureRows, rowsCut] = useTruncated(true);
+  let kind;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let values;
+  if ($[0] !== chart || $[1] !== data || $[2] !== measure || $[3] !== t || $[4] !== unit) {
+    values = uiChartValues(data);
+    ({
+      kind
+    } = chart);
+    t4 = "chat-ui-flat flex flex-col gap-2.5 rounded-xl bg-ui-tile p-3.5";
+    if ($[13] !== chart) {
+      t5 = chart.series.length > 1 && /*#__PURE__*/_jsx(Legend, {
+        chart: chart
+      });
+      $[13] = chart;
+      $[14] = t5;
+    } else {
+      t5 = $[14];
+    }
+    if ($[15] !== kind || $[16] !== unit) {
+      t6 = kind !== "stacked" && unitApart(unit) && /*#__PURE__*/_jsx("p", {
+        className: "text-xs text-text-faint",
+        children: unit
+      });
+      $[15] = kind;
+      $[16] = unit;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    t1 = measure;
+    t2 = "img";
+    t3 = chartSummary(values, unit, t);
+    $[0] = chart;
+    $[1] = data;
+    $[2] = measure;
+    $[3] = t;
+    $[4] = unit;
+    $[5] = kind;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = values;
+  } else {
+    kind = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    t6 = $[11];
+    values = $[12];
+  }
+  let t7;
+  if ($[18] !== character || $[19] !== chart || $[20] !== kind || $[21] !== measureRows || $[22] !== unit || $[23] !== width) {
+    t7 = kind === "hbar" || kind === "stacked" ? /*#__PURE__*/_jsx("div", {
+      ref: measureRows,
+      children: kind === "hbar" ? /*#__PURE__*/_jsx(HorizontalChart, {
+        chart: chart,
+        unit: unit
+      }) : /*#__PURE__*/_jsx(StackedChart, {
+        chart: chart,
+        unit: unit
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      style: {
+        height: HEIGHT
+      },
+      children: width > 0 && /*#__PURE__*/_jsx(VerticalChart, {
+        chart: chart,
+        kind: kind,
+        unit: unit,
+        width: width,
+        character: character
+      })
+    });
+    $[18] = character;
+    $[19] = chart;
+    $[20] = kind;
+    $[21] = measureRows;
+    $[22] = unit;
+    $[23] = width;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== t1 || $[26] !== t2 || $[27] !== t3 || $[28] !== t7) {
+    t8 = /*#__PURE__*/_jsx("div", {
+      ref: t1,
+      role: t2,
+      "aria-label": t3,
+      className: "relative",
+      children: t7
+    });
+    $[25] = t1;
+    $[26] = t2;
+    $[27] = t3;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== character || $[31] !== chart || $[32] !== rowsCut || $[33] !== unit || $[34] !== width) {
+    t9 = rowsCut || labelsCut(chart, unit, width, character);
+    $[30] = character;
+    $[31] = chart;
+    $[32] = rowsCut;
+    $[33] = unit;
+    $[34] = width;
+    $[35] = t9;
+  } else {
+    t9 = $[35];
+  }
+  let t10;
+  if ($[36] !== chart || $[37] !== context || $[38] !== nodeId || $[39] !== requested || $[40] !== t9 || $[41] !== unit || $[42] !== values) {
+    t10 = /*#__PURE__*/_jsx(ChartNotes, {
+      chart: chart,
+      requested: requested,
+      cut: t9,
+      values: values,
+      unit: unit,
+      context: context,
+      nodeId: nodeId
+    });
+    $[36] = chart;
+    $[37] = context;
+    $[38] = nodeId;
+    $[39] = requested;
+    $[40] = t9;
+    $[41] = unit;
+    $[42] = values;
+    $[43] = t10;
+  } else {
+    t10 = $[43];
+  }
+  let t11;
+  if ($[44] !== t10 || $[45] !== t4 || $[46] !== t5 || $[47] !== t6 || $[48] !== t8) {
+    t11 = /*#__PURE__*/_jsxs("figure", {
+      className: t4,
+      children: [t5, t6, t8, t10]
+    });
+    $[44] = t10;
+    $[45] = t4;
+    $[46] = t5;
+    $[47] = t6;
+    $[48] = t8;
+    $[49] = t11;
+  } else {
+    t11 = $[49];
+  }
+  return t11;
 }
 /*
  * Draws only once its node closed; until then a quiet surface of the height it will take holds its
  * place. It grows in once, and not at all for a person who asked for less motion.
  */
-export function ChartRenderer({ node, context }) {
-    const { kind, data, unit } = node.props;
-    const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
-    if (!node.complete) {
-        return _jsx("div", { "aria-hidden": true, className: "rounded-xl bg-ui-tile", style: { height: chartHeight(kind, data.length) } });
+export function ChartRenderer(t0) {
+  const $ = _c(19);
+  const {
+    node,
+    context
+  } = t0;
+  const {
+    kind,
+    data,
+    unit
+  } = node.props;
+  let t1;
+  if ($[0] !== data || $[1] !== kind || $[2] !== node.complete) {
+    t1 = node.complete ? uiChartData(data, kind) : null;
+    $[0] = data;
+    $[1] = kind;
+    $[2] = node.complete;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const chart = t1;
+  if (!node.complete) {
+    let t2;
+    if ($[4] !== data.length || $[5] !== kind) {
+      t2 = chartHeight(kind, data.length);
+      $[4] = data.length;
+      $[5] = kind;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
     }
-    if (chart === null) {
-        return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
+    let t3;
+    if ($[7] !== t2) {
+      t3 = /*#__PURE__*/_jsx("div", {
+        "aria-hidden": true,
+        className: "rounded-xl bg-ui-tile",
+        style: {
+          height: t2
+        }
+      });
+      $[7] = t2;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
     }
-    return _jsx(DrawnChart, { chart: chart, requested: kind, data: data, unit: unit, context: context, nodeId: node.id });
-}
+    return t3;
+  }
+  if (chart === null) {
+    let t2;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        kind: "failed"
+      };
+      $[9] = t2;
+    } else {
+      t2 = $[9];
+    }
+    let t3;
+    if ($[10] !== node.fallback) {
+      t3 = /*#__PURE__*/_jsx(UiFallbackPart, {
+        fallback: node.fallback,
+        problem: t2
+      });
+      $[10] = node.fallback;
+      $[11] = t3;
+    } else {
+      t3 = $[11];
+    }
+    return t3;
+  }
+  let t2;
+  if ($[12] !== chart || $[13] !== context || $[14] !== data || $[15] !== kind || $[16] !== node.id || $[17] !== unit) {
+    t2 = /*#__PURE__*/_jsx(DrawnChart, {
+      chart: chart,
+      requested: kind,
+      data: data,
+      unit: unit,
+      context: context,
+      nodeId: node.id
+    });
+    $[12] = chart;
+    $[13] = context;
+    $[14] = data;
+    $[15] = kind;
+    $[16] = node.id;
+    $[17] = unit;
+    $[18] = t2;
+  } else {
+    t2 = $[18];
+  }
+  return t2;
+}