hazo_ui 3.4.1 → 4.1.1

package/dist/index.js

@@ -72,6 +72,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import { Toaster, toast } from 'sonner';
 export { toast as rawToast } from 'sonner';
 import { useHazoState } from 'hazo_state/client';
@@ -7390,6 +7391,51 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
+var Slider = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+var InputAffix = React26.forwardRef(
+  ({ className, containerClassName, prefix, suffix, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          containerClassName
+        ),
+        children: [
+          prefix != null && /* @__PURE__ */ jsx("span", { className: "flex select-none items-center pl-3 text-muted-foreground", children: prefix }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type,
+              ref,
+              className: cn(
+                "h-full w-full bg-transparent px-3 py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                prefix != null && "pl-2",
+                suffix != null && "pr-2",
+                className
+              ),
+              ...props
+            }
+          ),
+          suffix != null && /* @__PURE__ */ jsx("span", { className: "flex select-none items-center pr-3 text-muted-foreground", children: suffix })
+        ]
+      }
+    );
+  }
+);
+InputAffix.displayName = "InputAffix";
 var SkeletonBase = React26.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -9668,573 +9714,12 @@ function pick_x_label_indices(length) {
   if (length === 2) return [0, 0, 1];
   return [0, Math.floor(length / 2), length - 1];
 }
-var PAD_LEFT = 38;
-var PAD_RIGHT = 14;
-var PAD_TOP = 12;
+var PAD_LEFT = 32;
+var PAD_RIGHT = 8;
+var PAD_TOP = 10;
 var PAD_BOTTOM = 22;
-var AXIS_LABEL_COLOR = "#8b949e";
-var GRIDLINE_COLOR = "#2a3441";
-function compute_geometry(data, width, height) {
-  const vals = data.filter((v) => v !== null && !Number.isNaN(v));
-  if (vals.length === 0) return null;
-  const mn = Math.min(...vals);
-  const mx = Math.max(...vals);
-  const rng = mx - mn || mx * 0.1 + 1;
-  const y_min = Math.max(0, mn - rng * 0.1);
-  const y_max = mx + rng * 0.1;
-  const y_rng = y_max - y_min || 1;
-  const plot_w = width - PAD_LEFT - PAD_RIGHT;
-  const plot_h = height - PAD_TOP - PAD_BOTTOM;
-  return {
-    vbox_w: width,
-    vbox_h: height,
-    y_min,
-    y_max,
-    cx: (i) => data.length <= 1 ? PAD_LEFT + plot_w / 2 : PAD_LEFT + i * plot_w / (data.length - 1),
-    cy: (v) => PAD_TOP + (1 - (v - y_min) / y_rng) * plot_h
-  };
-}
-function build_paths(data, g) {
-  let line_d = "";
-  let first_idx = -1;
-  data.forEach((v, i) => {
-    if (v === null || Number.isNaN(v)) return;
-    if (first_idx === -1) first_idx = i;
-    line_d += `${line_d ? " L" : "M"}${g.cx(i).toFixed(1)},${g.cy(v).toFixed(1)}`;
-  });
-  const last_idx = data.length - 1;
-  const last_v = data[last_idx];
-  const area_d = line_d && last_v !== null && last_v !== void 0 && !Number.isNaN(last_v) ? `${line_d} L${g.cx(last_idx).toFixed(1)},${g.vbox_h - PAD_BOTTOM} L${g.cx(first_idx).toFixed(1)},${g.vbox_h - PAD_BOTTOM} Z` : "";
-  return { line_d, area_d };
-}
-function LineChart({
-  data,
-  dates,
-  color: color2,
-  width = 360,
-  height = 130,
-  unit = "",
-  showTooltip = true,
-  className
-}) {
-  const geo = compute_geometry(data, width, height);
-  const svg_ref = React26.useRef(null);
-  const [hover_idx, set_hover_idx] = React26.useState(null);
-  const handle_mouse_move = React26.useCallback(
-    (e) => {
-      if (!geo) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      if (rect.width === 0) return;
-      const vbox_x = (e.clientX - rect.left) / rect.width * geo.vbox_w;
-      const plot_w = geo.vbox_w - PAD_LEFT - PAD_RIGHT;
-      if (vbox_x < PAD_LEFT || vbox_x > geo.vbox_w - PAD_RIGHT) {
-        set_hover_idx(null);
-        return;
-      }
-      const ratio = (vbox_x - PAD_LEFT) / plot_w;
-      const idx = Math.round(ratio * (data.length - 1));
-      const clamped = Math.max(0, Math.min(data.length - 1, idx));
-      let resolved = clamped;
-      if (data[resolved] === null || Number.isNaN(data[resolved])) {
-        for (let step = 1; step < data.length; step += 1) {
-          const left_i = clamped - step;
-          const right_i = clamped + step;
-          if (left_i >= 0 && data[left_i] !== null && !Number.isNaN(data[left_i])) {
-            resolved = left_i;
-            break;
-          }
-          if (right_i < data.length && data[right_i] !== null && !Number.isNaN(data[right_i])) {
-            resolved = right_i;
-            break;
-          }
-        }
-      }
-      set_hover_idx(resolved);
-    },
-    [geo, data]
-  );
-  const handle_mouse_leave = React26.useCallback(() => set_hover_idx(null), []);
-  if (!geo) {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        className: cn("cls_hazo_chart cls_hazo_chart_empty", className),
-        style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` }
-      }
-    );
-  }
-  const { line_d, area_d } = build_paths(data, geo);
-  const x_label_idx = pick_x_label_indices(data.length);
-  const last_idx = data.length - 1;
-  const last_v = data[last_idx];
-  const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
-  const hover_v = hover_idx !== null ? data[hover_idx] : null;
-  const hover_has_v = hover_v !== null && hover_v !== void 0 && !Number.isNaN(hover_v);
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ref: svg_ref,
-      viewBox: `0 0 ${width} ${height}`,
-      onMouseMove: showTooltip ? handle_mouse_move : void 0,
-      onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
-      className: cn("cls_hazo_chart", className),
-      style: {
-        width: "100%",
-        height: "auto",
-        display: "block",
-        maxHeight: `${height + 10}px`,
-        cursor: showTooltip ? "crosshair" : "default"
-      },
-      children: [
-        [0, 1, 2].map((i) => {
-          const y = PAD_TOP + i / 2 * (geo.vbox_h - PAD_TOP - PAD_BOTTOM);
-          return /* @__PURE__ */ jsx(
-            "line",
-            {
-              x1: PAD_LEFT,
-              x2: geo.vbox_w - PAD_RIGHT,
-              y1: y,
-              y2: y,
-              stroke: GRIDLINE_COLOR,
-              strokeWidth: 0.5,
-              strokeDasharray: "2,3"
-            },
-            i
-          );
-        }),
-        area_d && /* @__PURE__ */ jsx("path", { d: area_d, fill: color2, fillOpacity: 0.12, stroke: "none" }),
-        line_d && /* @__PURE__ */ jsx("path", { d: line_d, stroke: color2, strokeWidth: 1.8, fill: "none" }),
-        /* @__PURE__ */ jsx("text", { x: PAD_LEFT - 4, y: PAD_TOP + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR, fontSize: 9, children: format_num(geo.y_max) }),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: PAD_LEFT - 4,
-            y: PAD_TOP + (geo.vbox_h - PAD_TOP - PAD_BOTTOM) / 2 + 3,
-            textAnchor: "end",
-            fill: AXIS_LABEL_COLOR,
-            fontSize: 9,
-            children: format_num((geo.y_max + geo.y_min) / 2)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: PAD_LEFT - 4,
-            y: geo.vbox_h - PAD_BOTTOM + 3,
-            textAnchor: "end",
-            fill: AXIS_LABEL_COLOR,
-            fontSize: 9,
-            children: format_num(geo.y_min)
-          }
-        ),
-        x_label_idx.map((idx, k) => {
-          const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
-          const x_pos = geo.cx(idx);
-          return /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: x_pos,
-              y: geo.vbox_h - 6,
-              textAnchor: anchor,
-              fill: AXIS_LABEL_COLOR,
-              fontSize: 9,
-              children: dates[idx] ?? ""
-            },
-            `x_${k}`
-          );
-        }),
-        has_last && hover_idx === null && (() => {
-          const x = geo.cx(last_idx);
-          const y = geo.cy(last_v);
-          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(
-              "line",
-              {
-                x1: x,
-                x2: PAD_LEFT,
-                y1: y,
-                y2: y,
-                stroke: color2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,2",
-                opacity: 0.4
-              }
-            ),
-            /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 3.5, fill: color2, stroke: color2, strokeWidth: 2, fillOpacity: 0.3 }),
-            /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 2, fill: color2 }),
-            /* @__PURE__ */ jsxs("text", { x: x - 6, y: y - 6, textAnchor: "end", fill: color2, fontSize: 10, fontWeight: 700, children: [
-              format_num(last_v),
-              unit
-            ] })
-          ] });
-        })(),
-        showTooltip && hover_idx !== null && hover_has_v && (() => {
-          const x = geo.cx(hover_idx);
-          const y = geo.cy(hover_v);
-          const label = `${format_num(hover_v)}${unit}`;
-          const date = dates[hover_idx] ?? "";
-          const bubble_text_w = Math.max(label.length, date.length) * 5.5 + 12;
-          const bubble_w = Math.max(bubble_text_w, 40);
-          const bubble_h = 26;
-          const flip = x + bubble_w + 6 > geo.vbox_w - PAD_RIGHT;
-          const bubble_x = flip ? x - bubble_w - 6 : x + 6;
-          const bubble_y = Math.max(PAD_TOP, Math.min(y - bubble_h / 2, geo.vbox_h - PAD_BOTTOM - bubble_h));
-          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(
-              "line",
-              {
-                x1: x,
-                x2: x,
-                y1: PAD_TOP,
-                y2: geo.vbox_h - PAD_BOTTOM,
-                stroke: color2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,2",
-                opacity: 0.6
-              }
-            ),
-            /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 3, fill: color2 }),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: bubble_x,
-                y: bubble_y,
-                width: bubble_w,
-                height: bubble_h,
-                rx: 3,
-                fill: "#0d1117",
-                stroke: color2,
-                strokeWidth: 0.5,
-                fillOpacity: 0.92
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: bubble_x + bubble_w / 2,
-                y: bubble_y + 11,
-                textAnchor: "middle",
-                fill: color2,
-                fontSize: 10,
-                fontWeight: 700,
-                children: label
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: bubble_x + bubble_w / 2,
-                y: bubble_y + 22,
-                textAnchor: "middle",
-                fill: AXIS_LABEL_COLOR,
-                fontSize: 8,
-                children: date
-              }
-            )
-          ] });
-        })()
-      ]
-    }
-  );
-}
-var PAD_LEFT2 = 38;
-var PAD_RIGHT2 = 14;
-var PAD_TOP2 = 12;
-var PAD_BOTTOM2 = 22;
-var AXIS_LABEL_COLOR2 = "#8b949e";
-var GRIDLINE_COLOR2 = "#2a3441";
-function compute_geometry2(series, width, height) {
-  const all_vals = [];
-  let n = 0;
-  for (const s of series) {
-    n = Math.max(n, s.data.length);
-    for (const v of s.data) if (v !== null && !Number.isNaN(v)) all_vals.push(v);
-  }
-  if (all_vals.length === 0 || n === 0) return null;
-  const mn = Math.min(...all_vals);
-  const mx = Math.max(...all_vals);
-  const rng = mx - mn || mx * 0.1 + 1;
-  const y_min = Math.max(0, mn - rng * 0.05);
-  const y_max = mx + rng * 0.05;
-  const y_rng = y_max - y_min || 1;
-  const plot_w = width - PAD_LEFT2 - PAD_RIGHT2;
-  const plot_h = height - PAD_TOP2 - PAD_BOTTOM2;
-  return {
-    vbox_w: width,
-    vbox_h: height,
-    y_min,
-    y_max,
-    point_count: n,
-    cx: (i) => n <= 1 ? PAD_LEFT2 + plot_w / 2 : PAD_LEFT2 + i * plot_w / (n - 1),
-    cy: (v) => PAD_TOP2 + (1 - (v - y_min) / y_rng) * plot_h
-  };
-}
-function MultiLineChart({
-  series,
-  dates,
-  width = 360,
-  height = 140,
-  showTooltip = true,
-  showLegend = true,
-  className
-}) {
-  const geo = compute_geometry2(series, width, height);
-  const [hover_idx, set_hover_idx] = React26.useState(null);
-  const handle_mouse_move = React26.useCallback(
-    (e) => {
-      if (!geo) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      if (rect.width === 0) return;
-      const vbox_x = (e.clientX - rect.left) / rect.width * geo.vbox_w;
-      const plot_w = geo.vbox_w - PAD_LEFT2 - PAD_RIGHT2;
-      if (vbox_x < PAD_LEFT2 || vbox_x > geo.vbox_w - PAD_RIGHT2) {
-        set_hover_idx(null);
-        return;
-      }
-      const ratio = (vbox_x - PAD_LEFT2) / plot_w;
-      const idx = Math.round(ratio * (geo.point_count - 1));
-      set_hover_idx(Math.max(0, Math.min(geo.point_count - 1, idx)));
-    },
-    [geo]
-  );
-  const handle_mouse_leave = React26.useCallback(() => set_hover_idx(null), []);
-  if (!geo) {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        className: cn("cls_hazo_chart cls_hazo_chart_empty", className),
-        style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` }
-      }
-    );
-  }
-  const x_label_idx = pick_x_label_indices(geo.point_count);
-  return /* @__PURE__ */ jsxs("div", { className: cn("cls_hazo_chart_wrapper", className), children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        onMouseMove: showTooltip ? handle_mouse_move : void 0,
-        onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
-        className: "cls_hazo_chart cls_hazo_chart_multi",
-        style: {
-          width: "100%",
-          height: "auto",
-          display: "block",
-          maxHeight: `${height + 10}px`,
-          cursor: showTooltip ? "crosshair" : "default"
-        },
-        children: [
-          [0, 1, 2].map((i) => {
-            const y = PAD_TOP2 + i / 2 * (geo.vbox_h - PAD_TOP2 - PAD_BOTTOM2);
-            return /* @__PURE__ */ jsx(
-              "line",
-              {
-                x1: PAD_LEFT2,
-                x2: geo.vbox_w - PAD_RIGHT2,
-                y1: y,
-                y2: y,
-                stroke: GRIDLINE_COLOR2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,3"
-              },
-              i
-            );
-          }),
-          /* @__PURE__ */ jsx("text", { x: PAD_LEFT2 - 4, y: PAD_TOP2 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR2, fontSize: 9, children: format_num(geo.y_max) }),
-          /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: PAD_LEFT2 - 4,
-              y: PAD_TOP2 + (geo.vbox_h - PAD_TOP2 - PAD_BOTTOM2) / 2 + 3,
-              textAnchor: "end",
-              fill: AXIS_LABEL_COLOR2,
-              fontSize: 9,
-              children: format_num((geo.y_max + geo.y_min) / 2)
-            }
-          ),
-          /* @__PURE__ */ jsx("text", { x: PAD_LEFT2 - 4, y: geo.vbox_h - PAD_BOTTOM2 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR2, fontSize: 9, children: format_num(geo.y_min) }),
-          x_label_idx.map((idx, k) => {
-            const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
-            return /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: geo.cx(idx),
-                y: geo.vbox_h - 6,
-                textAnchor: anchor,
-                fill: AXIS_LABEL_COLOR2,
-                fontSize: 9,
-                children: dates[idx] ?? ""
-              },
-              `x_${k}`
-            );
-          }),
-          series.map((s, s_idx) => {
-            let d = "";
-            s.data.forEach((v, i) => {
-              if (v === null || Number.isNaN(v)) return;
-              d += `${d ? " L" : "M"}${geo.cx(i).toFixed(1)},${geo.cy(v).toFixed(1)}`;
-            });
-            const last_idx = s.data.length - 1;
-            const last_v = s.data[last_idx];
-            const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
-            return /* @__PURE__ */ jsxs("g", { children: [
-              d && /* @__PURE__ */ jsx("path", { d, stroke: s.color, strokeWidth: 1.7, fill: "none" }),
-              has_last && hover_idx === null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: geo.cx(last_idx),
-                    cy: geo.cy(last_v),
-                    r: 3,
-                    fill: s.color,
-                    fillOpacity: 0.3,
-                    stroke: s.color,
-                    strokeWidth: 1.5
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "text",
-                  {
-                    x: geo.cx(last_idx) - 5,
-                    y: geo.cy(last_v) - 5,
-                    textAnchor: "end",
-                    fill: s.color,
-                    fontSize: 9,
-                    fontWeight: 700,
-                    children: format_num(last_v)
-                  }
-                )
-              ] })
-            ] }, `series_${s_idx}`);
-          }),
-          showTooltip && hover_idx !== null && (() => {
-            const x = geo.cx(hover_idx);
-            const items = series.map((s) => ({
-              label: s.label,
-              color: s.color,
-              value: s.data[hover_idx] ?? null
-            })).filter((it) => it.value !== null && !Number.isNaN(it.value));
-            if (items.length === 0) return null;
-            const bubble_w = 70;
-            const row_h = 12;
-            const bubble_h = items.length * row_h + 18;
-            const flip = x + bubble_w + 6 > geo.vbox_w - PAD_RIGHT2;
-            const bubble_x = flip ? x - bubble_w - 6 : x + 6;
-            const bubble_y = Math.max(PAD_TOP2, Math.min(PAD_TOP2 + 5, geo.vbox_h - PAD_BOTTOM2 - bubble_h));
-            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(
-                "line",
-                {
-                  x1: x,
-                  x2: x,
-                  y1: PAD_TOP2,
-                  y2: geo.vbox_h - PAD_BOTTOM2,
-                  stroke: AXIS_LABEL_COLOR2,
-                  strokeWidth: 0.5,
-                  strokeDasharray: "2,2",
-                  opacity: 0.6
-                }
-              ),
-              items.map((it) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: x,
-                  cy: geo.cy(it.value),
-                  r: 3,
-                  fill: it.color
-                },
-                `hd_${it.label}`
-              )),
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: bubble_x,
-                  y: bubble_y,
-                  width: bubble_w,
-                  height: bubble_h,
-                  rx: 3,
-                  fill: "#0d1117",
-                  stroke: AXIS_LABEL_COLOR2,
-                  strokeWidth: 0.5,
-                  fillOpacity: 0.92
-                }
-              ),
-              /* @__PURE__ */ jsx("text", { x: bubble_x + 6, y: bubble_y + 10, fill: AXIS_LABEL_COLOR2, fontSize: 8, children: dates[hover_idx] ?? "" }),
-              items.map((it, i) => /* @__PURE__ */ jsxs("g", { children: [
-                /* @__PURE__ */ jsx(
-                  "rect",
-                  {
-                    x: bubble_x + 6,
-                    y: bubble_y + 14 + i * row_h,
-                    width: 6,
-                    height: 6,
-                    fill: it.color
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "text",
-                  {
-                    x: bubble_x + 16,
-                    y: bubble_y + 20 + i * row_h,
-                    fill: it.color,
-                    fontSize: 9,
-                    fontWeight: 600,
-                    children: format_num(it.value)
-                  }
-                )
-              ] }, `row_${i}`))
-            ] });
-          })()
-        ]
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "cls_hazo_chart_legend",
-        style: {
-          display: "flex",
-          gap: "12px",
-          justifyContent: "center",
-          marginTop: "4px",
-          fontSize: "10px",
-          color: AXIS_LABEL_COLOR2,
-          flexWrap: "wrap"
-        },
-        children: series.map((s) => /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: { display: "inline-flex", alignItems: "center", gap: "4px" },
-            children: [
-              /* @__PURE__ */ jsx(
-                "i",
-                {
-                  style: {
-                    display: "inline-block",
-                    width: "8px",
-                    height: "8px",
-                    background: s.color,
-                    borderRadius: "1px"
-                  }
-                }
-              ),
-              s.label
-            ]
-          },
-          s.label
-        ))
-      }
-    )
-  ] });
-}
-var PAD_LEFT3 = 32;
-var PAD_RIGHT3 = 8;
-var PAD_TOP3 = 10;
-var PAD_BOTTOM3 = 22;
 var BAR_GAP_RATIO = 0.25;
-var AXIS_LABEL_COLOR3 = "#8b949e";
+var AXIS_LABEL_COLOR = "#8b949e";
 function StackedBars({
   bars,
   width = 360,
@@ -10244,11 +9729,11 @@ function StackedBars({
 }) {
   const totals = bars.map((b) => b.segments.reduce((sum, s) => sum + s.value, 0));
   const y_max = Math.max(0, ...totals) || 1;
-  const plot_w = width - PAD_LEFT3 - PAD_RIGHT3;
-  const plot_h = height - PAD_TOP3 - PAD_BOTTOM3;
+  const plot_w = width - PAD_LEFT - PAD_RIGHT;
+  const plot_h = height - PAD_TOP - PAD_BOTTOM;
   const slot_w = bars.length > 0 ? plot_w / bars.length : 0;
   const bar_w = slot_w * (1 - BAR_GAP_RATIO);
-  const x_for = (i) => PAD_LEFT3 + i * slot_w + (slot_w - bar_w) / 2;
+  const x_for = (i) => PAD_LEFT + i * slot_w + (slot_w - bar_w) / 2;
   const x_label_idx = pick_x_label_indices(bars.length);
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -10258,14 +9743,14 @@ function StackedBars({
       style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` },
       children: [
         showYAxis && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx("text", { x: PAD_LEFT3 - 4, y: PAD_TOP3 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR3, fontSize: 9, children: format_num(y_max) }),
+          /* @__PURE__ */ jsx("text", { x: PAD_LEFT - 4, y: PAD_TOP + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR, fontSize: 9, children: format_num(y_max) }),
           /* @__PURE__ */ jsx(
             "text",
             {
-              x: PAD_LEFT3 - 4,
-              y: PAD_TOP3 + plot_h / 2 + 3,
+              x: PAD_LEFT - 4,
+              y: PAD_TOP + plot_h / 2 + 3,
               textAnchor: "end",
-              fill: AXIS_LABEL_COLOR3,
+              fill: AXIS_LABEL_COLOR,
               fontSize: 9,
               children: format_num(y_max / 2)
             }
@@ -10273,17 +9758,17 @@ function StackedBars({
           /* @__PURE__ */ jsx(
             "text",
             {
-              x: PAD_LEFT3 - 4,
-              y: height - PAD_BOTTOM3 + 3,
+              x: PAD_LEFT - 4,
+              y: height - PAD_BOTTOM + 3,
               textAnchor: "end",
-              fill: AXIS_LABEL_COLOR3,
+              fill: AXIS_LABEL_COLOR,
               fontSize: 9,
               children: "0"
             }
           )
         ] }),
         bars.map((bar, i) => {
-          let cursor_y = height - PAD_BOTTOM3;
+          let cursor_y = height - PAD_BOTTOM;
           return /* @__PURE__ */ jsx("g", { children: bar.segments.map((seg, s_idx) => {
             if (seg.value <= 0) return null;
             const seg_h = seg.value / y_max * plot_h;
@@ -10311,7 +9796,7 @@ function StackedBars({
               x: x_pos,
               y: height - 6,
               textAnchor: anchor,
-              fill: AXIS_LABEL_COLOR3,
+              fill: AXIS_LABEL_COLOR,
               fontSize: 9,
               children: bars[idx]?.label ?? ""
             },
@@ -10360,6 +9845,219 @@ function DateRangeSelector({
     }
   );
 }
+var PAD_LEFT2 = 80;
+var PAD_RIGHT2 = 72;
+var PAD_TOP2 = 12;
+var PAD_BOTTOM2 = 12;
+var ROW_H = 44;
+var LABEL_H = 14;
+var BAR_H = 22;
+var AXIS_LABEL_COLOR2 = "#8b949e";
+var GRIDLINE_COLOR = "#2a3441";
+function step_total(step) {
+  if (step.value !== void 0) return step.value;
+  if (step.segments) return step.segments.reduce((s, g) => s + g.value, 0);
+  return 0;
+}
+function FunnelChart({
+  steps,
+  width = 360,
+  height,
+  color: color2 = "#3b82f6",
+  valueFormat,
+  showDropoff = true,
+  showTooltip = true,
+  className
+}) {
+  const [hover_idx, set_hover_idx] = React26.useState(null);
+  const fmt = valueFormat ?? format_num;
+  const totals = steps.map(step_total);
+  const value_max = Math.max(1, ...totals);
+  const plot_w = width - PAD_LEFT2 - PAD_RIGHT2;
+  const vbox_h = height ?? PAD_TOP2 + steps.length * ROW_H + PAD_BOTTOM2;
+  const handle_mouse_move = React26.useCallback(
+    (e) => {
+      if (steps.length === 0) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      if (rect.height === 0) return;
+      const vbox_y = (e.clientY - rect.top) / rect.height * vbox_h;
+      const row_idx = Math.floor((vbox_y - PAD_TOP2) / ROW_H);
+      if (row_idx < 0 || row_idx >= steps.length) {
+        set_hover_idx(null);
+        return;
+      }
+      set_hover_idx(row_idx);
+    },
+    [steps.length, vbox_h]
+  );
+  const handle_mouse_leave = React26.useCallback(() => set_hover_idx(null), []);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${vbox_h}`,
+      onMouseMove: showTooltip ? handle_mouse_move : void 0,
+      onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
+      className: cn("cls_hazo_chart cls_hazo_chart_funnel", className),
+      style: {
+        width: "100%",
+        height: "auto",
+        display: "block",
+        cursor: showTooltip ? "crosshair" : "default"
+      },
+      children: [
+        steps.length > 0 && /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: PAD_LEFT2 + plot_w / 2,
+            x2: PAD_LEFT2 + plot_w / 2,
+            y1: PAD_TOP2,
+            y2: PAD_TOP2 + steps.length * ROW_H,
+            stroke: GRIDLINE_COLOR,
+            strokeWidth: 0.5,
+            strokeDasharray: "2,3"
+          }
+        ),
+        steps.map((step, i) => {
+          const total = totals[i];
+          const bar_w = total / value_max * plot_w;
+          const bar_x = PAD_LEFT2 + (plot_w - bar_w) / 2;
+          const bar_y = PAD_TOP2 + i * ROW_H + LABEL_H;
+          const pct_first = i === 0 ? 100 : Math.round(total / (totals[0] || 1) * 100);
+          const value_label = i === 0 ? `${fmt(total)} (100%)` : `${fmt(total)} (${pct_first}%)`;
+          const dropoff = i > 0 ? totals[i - 1] - total : 0;
+          const label_x = bar_x + bar_w + 6;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: PAD_LEFT2 - 6,
+                y: bar_y + BAR_H / 2 + 4,
+                textAnchor: "end",
+                fill: AXIS_LABEL_COLOR2,
+                fontSize: 9,
+                children: step.label
+              }
+            ),
+            step.segments ? (() => {
+              let cursor_x = bar_x;
+              return step.segments.map((seg, s_idx) => {
+                const seg_w = seg.value / value_max * plot_w;
+                const x = cursor_x;
+                cursor_x += seg_w;
+                return /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x,
+                    y: bar_y,
+                    width: seg_w,
+                    height: BAR_H,
+                    fill: seg.color
+                  },
+                  `seg_${s_idx}`
+                );
+              });
+            })() : /* @__PURE__ */ jsx("rect", { x: bar_x, y: bar_y, width: bar_w, height: BAR_H, fill: color2 }),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: label_x,
+                y: bar_y + BAR_H / 2,
+                textAnchor: "start",
+                fill: color2,
+                fontSize: 9,
+                dominantBaseline: "middle",
+                children: value_label
+              }
+            ),
+            showDropoff && i > 0 && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: label_x,
+                y: bar_y + BAR_H / 2 + 10,
+                textAnchor: "start",
+                fill: AXIS_LABEL_COLOR2,
+                fontSize: 8,
+                children: `\u2212${fmt(dropoff)}`
+              }
+            )
+          ] }, `step_${i}`);
+        }),
+        showTooltip && hover_idx !== null && (() => {
+          const i = hover_idx;
+          const step = steps[i];
+          const total = totals[i];
+          const pct_first = i === 0 ? 100 : Math.round(total / (totals[0] || 1) * 100);
+          const pct_prev = i === 0 ? 100 : Math.round(total / (totals[i - 1] || 1) * 100);
+          const dropoff = i > 0 ? totals[i - 1] - total : 0;
+          const bar_w = total / value_max * plot_w;
+          const bar_x = PAD_LEFT2 + (plot_w - bar_w) / 2;
+          const bar_y = PAD_TOP2 + i * ROW_H + LABEL_H;
+          const bubble_anchor_y = bar_y + BAR_H / 2;
+          const lines = [
+            { text: step.label, accent: true },
+            { text: `Total: ${fmt(total)}`, accent: false },
+            { text: `% of first: ${pct_first}%`, accent: false }
+          ];
+          if (i > 0) {
+            lines.push({ text: `% of prev: ${pct_prev}%`, accent: false });
+            lines.push({ text: `Drop-off: \u2212${fmt(dropoff)}`, accent: false });
+          }
+          if (step.segments) {
+            step.segments.forEach((seg) => {
+              lines.push({ text: `${seg.label}: ${fmt(seg.value)}`, accent: false });
+            });
+          }
+          const line_h = 13;
+          const pad_v = 8;
+          const bubble_w = 120;
+          const bubble_h = lines.length * line_h + pad_v * 2;
+          const right_x = bar_x + bar_w + 6;
+          const left_x = bar_x - bubble_w - 6;
+          const fits_right = right_x + bubble_w <= width - 4;
+          const fits_left = left_x >= 4;
+          let bubble_x;
+          let bubble_y;
+          if (fits_right || fits_left) {
+            bubble_x = fits_right ? right_x : left_x;
+            bubble_y = Math.max(4, Math.min(bubble_anchor_y - bubble_h / 2, vbox_h - bubble_h - 4));
+          } else {
+            bubble_x = Math.min(Math.max(bar_x + bar_w / 2 - bubble_w / 2, 4), width - bubble_w - 4);
+            const below_y = bar_y + BAR_H + 6;
+            bubble_y = below_y + bubble_h <= vbox_h - 4 ? below_y : Math.max(4, bar_y - bubble_h - 6);
+          }
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: bubble_x,
+                y: bubble_y,
+                width: bubble_w,
+                height: bubble_h,
+                rx: 3,
+                fill: "#0d1117",
+                stroke: color2,
+                strokeWidth: 0.5,
+                fillOpacity: 0.92
+              }
+            ),
+            lines.map((line, k) => /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: bubble_x + 7,
+                y: bubble_y + pad_v + k * line_h + line_h * 0.75,
+                fill: line.accent ? color2 : AXIS_LABEL_COLOR2,
+                fontSize: line.accent ? 10 : 8,
+                fontWeight: line.accent ? 700 : 400,
+                children: line.text
+              },
+              k
+            ))
+          ] });
+        })()
+      ]
+    }
+  );
+}
 
 // src/assets/celebration-chime.mp3
 var celebration_chime_default = "data:text/plain;charset=utf-8,";
@@ -10817,6 +10515,6 @@ function HazoUiEtaProgress({
   );
 }
 
-export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DateRangeSelector, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBanner, ErrorPage, HazoContextProvider, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiKanban, HazoUiKanbanFilter, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InverseSparkline, Label3 as Label, LineChart, LoadingTimeout, MarkdownEditor, MultiLineChart, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Sparkline, Spinner, StackedBars, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, create_command_suggestion_extension, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, median, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock };
+export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DateRangeSelector, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBanner, ErrorPage, FunnelChart, HazoContextProvider, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiKanban, HazoUiKanbanFilter, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LoadingTimeout, MarkdownEditor, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Slider, Sparkline, Spinner, StackedBars, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, create_command_suggestion_extension, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, median, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map