hazo_ui 3.5.0 → 4.2.0

package/dist/index.cjs

@@ -42,7 +42,7 @@ var Link = require('@tiptap/extension-link');
 var TextAlign = require('@tiptap/extension-text-align');
 var Highlight = require('@tiptap/extension-highlight');
 var Color = require('@tiptap/extension-color');
-var Image = require('@tiptap/extension-image');
+var Image2 = require('@tiptap/extension-image');
 var Placeholder = require('@tiptap/extension-placeholder');
 var HorizontalRule = require('@tiptap/extension-horizontal-rule');
 var extensionTable = require('@tiptap/extension-table');
@@ -61,6 +61,8 @@ require('@uiw/react-markdown-preview/markdown.css');
 var Suggestion = require('@tiptap/suggestion');
 var state = require('@tiptap/pm/state');
 var reactDom = require('react-dom');
+var Cropper = require('react-easy-crop');
+var SliderPrimitive = require('@radix-ui/react-slider');
 var vaul = require('vaul');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -122,7 +124,7 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 var TextAlign__default = /*#__PURE__*/_interopDefault(TextAlign);
 var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
 var Color__default = /*#__PURE__*/_interopDefault(Color);
-var Image__default = /*#__PURE__*/_interopDefault(Image);
+var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
 var HorizontalRule__default = /*#__PURE__*/_interopDefault(HorizontalRule);
 var TableRow__default = /*#__PURE__*/_interopDefault(TableRow);
@@ -132,6 +134,8 @@ var TaskList__default = /*#__PURE__*/_interopDefault(TaskList);
 var TaskItem__default = /*#__PURE__*/_interopDefault(TaskItem);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Suggestion__default = /*#__PURE__*/_interopDefault(Suggestion);
+var Cropper__default = /*#__PURE__*/_interopDefault(Cropper);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -4364,7 +4368,7 @@ var HazoUiRte = ({
         multicolor: true
       }),
       Color__default.default,
-      Image__default.default.configure({
+      Image2__default.default.configure({
         inline: true,
         allowBase64: true,
         HTMLAttributes: {
@@ -6912,6 +6916,210 @@ function HazoUiConfirmDialog({
     )
   ] }) });
 }
+var Slider = React26__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SliderPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.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__namespace.Root.displayName;
+async function getCroppedImg(imageSrc, areaPixels, outputSize, quality) {
+  const img = await new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = (e) => reject(e);
+    image.src = imageSrc;
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = outputSize;
+  canvas.height = outputSize;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("HazoUiImageCropper: canvas 2d context unavailable");
+  }
+  ctx.drawImage(
+    img,
+    areaPixels.x,
+    areaPixels.y,
+    areaPixels.width,
+    areaPixels.height,
+    0,
+    0,
+    outputSize,
+    outputSize
+  );
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("HazoUiImageCropper: canvas.toBlob returned null"));
+        }
+      },
+      "image/webp",
+      quality
+    );
+  });
+}
+var HazoUiImageCropper = React26__namespace.forwardRef(function HazoUiImageCropper2({
+  imageSrc,
+  onCropped,
+  outputSize = 512,
+  quality = 0.9,
+  zoomLabel = "Zoom",
+  className
+}, ref) {
+  const [crop, set_crop] = React26__namespace.useState({
+    x: 0,
+    y: 0
+  });
+  const [zoom, set_zoom] = React26__namespace.useState(1);
+  const cropped_area_pixels_ref = React26__namespace.useRef(null);
+  const handle_crop_complete = React26__namespace.useCallback(
+    (_croppedArea, croppedAreaPixels) => {
+      cropped_area_pixels_ref.current = croppedAreaPixels;
+    },
+    []
+  );
+  React26__namespace.useImperativeHandle(
+    ref,
+    () => ({
+      getCroppedBlob: async () => {
+        if (!cropped_area_pixels_ref.current) {
+          throw new Error(
+            "HazoUiImageCropper: crop area not yet initialised \u2014 wait for the cropper to mount before calling getCroppedBlob."
+          );
+        }
+        const blob = await getCroppedImg(
+          imageSrc,
+          cropped_area_pixels_ref.current,
+          outputSize,
+          quality
+        );
+        await onCropped?.(blob);
+        return blob;
+      }
+    }),
+    [imageSrc, onCropped, outputSize, quality]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_image_cropper_root flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "cls_cropper_stage relative w-full overflow-hidden rounded-lg bg-muted",
+        style: { height: "320px" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Cropper__default.default,
+          {
+            image: imageSrc,
+            crop,
+            zoom,
+            aspect: 1,
+            cropShape: "round",
+            showGrid: false,
+            onCropChange: set_crop,
+            onZoomChange: set_zoom,
+            onCropComplete: handle_crop_complete
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_zoom_control flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "cls_zoom_label text-sm font-medium text-foreground",
+          id: "hazo-cropper-zoom-label",
+          children: zoomLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Slider,
+        {
+          "aria-labelledby": "hazo-cropper-zoom-label",
+          min: 1,
+          max: 3,
+          step: 0.1,
+          value: [zoom],
+          onValueChange: (values) => set_zoom(values[0])
+        }
+      )
+    ] })
+  ] });
+});
+HazoUiImageCropper.displayName = "HazoUiImageCropper";
+function HazoUiImageCropperDialog({
+  open,
+  onOpenChange,
+  file,
+  onConfirm,
+  onCancel,
+  title = "Crop photo",
+  confirmLabel = "Save",
+  cancelLabel = "Cancel",
+  zoomLabel = "Zoom",
+  outputSize = 512,
+  quality = 0.9
+}) {
+  const cropper_ref = React26__namespace.useRef(null);
+  const [image_src, set_image_src] = React26__namespace.useState(null);
+  const [is_confirming, set_is_confirming] = React26__namespace.useState(false);
+  React26__namespace.useEffect(() => {
+    if (!file) {
+      set_image_src(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    set_image_src(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [file]);
+  const handle_confirm = async () => {
+    if (!cropper_ref.current) return;
+    set_is_confirming(true);
+    try {
+      const blob = await cropper_ref.current.getCroppedBlob();
+      await onConfirm(blob);
+      onOpenChange(false);
+    } finally {
+      set_is_confirming(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HazoUiDialog,
+    {
+      open,
+      onOpenChange,
+      title,
+      actionButtonText: confirmLabel,
+      cancelButtonText: cancelLabel,
+      onConfirm: handle_confirm,
+      onCancel,
+      actionButtonLoading: is_confirming,
+      sizeWidth: "min(90vw, 520px)",
+      contentClassName: "cls_image_cropper_dialog_body",
+      children: image_src && /* @__PURE__ */ jsxRuntime.jsx(
+        HazoUiImageCropper,
+        {
+          ref: cropper_ref,
+          imageSrc: image_src,
+          outputSize,
+          quality,
+          zoomLabel
+        }
+      )
+    }
+  );
+}
 var Drawer = ({
   shouldScaleBackground = true,
   ...props
@@ -7458,6 +7666,38 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
+var InputAffix = React26__namespace.forwardRef(
+  ({ className, containerClassName, prefix, suffix, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex select-none items-center pl-3 text-muted-foreground", children: prefix }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex select-none items-center pr-3 text-muted-foreground", children: suffix })
+        ]
+      }
+    );
+  }
+);
+InputAffix.displayName = "InputAffix";
 var SkeletonBase = React26__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9736,573 +9976,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__namespace.useRef(null);
-  const [hover_idx, set_hover_idx] = React26__namespace.useState(null);
-  const handle_mouse_move = React26__namespace.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__namespace.useCallback(() => set_hover_idx(null), []);
-  if (!geo) {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: area_d, fill: color2, fillOpacity: 0.12, stroke: "none" }),
-        line_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: line_d, stroke: color2, strokeWidth: 1.8, fill: "none" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "line",
-              {
-                x1: x,
-                x2: PAD_LEFT,
-                y1: y,
-                y2: y,
-                stroke: color2,
-                strokeWidth: 0.5,
-                strokeDasharray: "2,2",
-                opacity: 0.4
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 3.5, fill: color2, stroke: color2, strokeWidth: 2, fillOpacity: 0.3 }),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 2, fill: color2 }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 3, fill: color2 }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "text",
-              {
-                x: bubble_x + bubble_w / 2,
-                y: bubble_y + 11,
-                textAnchor: "middle",
-                fill: color2,
-                fontSize: 10,
-                fontWeight: 700,
-                children: label
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.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__namespace.useState(null);
-  const handle_mouse_move = React26__namespace.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__namespace.useCallback(() => set_hover_idx(null), []);
-  if (!geo) {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_chart_wrapper", className), children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
-              d && /* @__PURE__ */ jsxRuntime.jsx("path", { d, stroke: s.color, strokeWidth: 1.7, fill: "none" }),
-              has_last && hover_idx === null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: x,
-                  cy: geo.cy(it.value),
-                  r: 3,
-                  fill: it.color
-                },
-                `hd_${it.label}`
-              )),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "rect",
-                  {
-                    x: bubble_x + 6,
-                    y: bubble_y + 14 + i * row_h,
-                    width: 6,
-                    height: 6,
-                    fill: it.color
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            style: { display: "inline-flex", alignItems: "center", gap: "4px" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.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,
@@ -10312,11 +9991,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__ */ jsxRuntime.jsxs(
     "svg",
@@ -10326,14 +10005,14 @@ function StackedBars({
       style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` },
       children: [
         showYAxis && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT3 - 4, y: PAD_TOP3 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR3, fontSize: 9, children: format_num(y_max) }),
+          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT - 4, y: PAD_TOP + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR, fontSize: 9, children: format_num(y_max) }),
           /* @__PURE__ */ jsxRuntime.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)
             }
@@ -10341,17 +10020,17 @@ function StackedBars({
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { children: bar.segments.map((seg, s_idx) => {
             if (seg.value <= 0) return null;
             const seg_h = seg.value / y_max * plot_h;
@@ -10379,7 +10058,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 ?? ""
             },
@@ -10428,15 +10107,15 @@ function DateRangeSelector({
     }
   );
 }
-var PAD_LEFT4 = 80;
-var PAD_RIGHT4 = 72;
-var PAD_TOP4 = 12;
-var PAD_BOTTOM4 = 12;
+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_COLOR4 = "#8b949e";
-var GRIDLINE_COLOR3 = "#2a3441";
+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);
@@ -10456,15 +10135,15 @@ function FunnelChart({
   const fmt = valueFormat ?? format_num;
   const totals = steps.map(step_total);
   const value_max = Math.max(1, ...totals);
-  const plot_w = width - PAD_LEFT4 - PAD_RIGHT4;
-  const vbox_h = height ?? PAD_TOP4 + steps.length * ROW_H + PAD_BOTTOM4;
+  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__namespace.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_TOP4) / ROW_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;
@@ -10491,11 +10170,11 @@ function FunnelChart({
         steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "line",
           {
-            x1: PAD_LEFT4 + plot_w / 2,
-            x2: PAD_LEFT4 + plot_w / 2,
-            y1: PAD_TOP4,
-            y2: PAD_TOP4 + steps.length * ROW_H,
-            stroke: GRIDLINE_COLOR3,
+            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"
           }
@@ -10503,8 +10182,8 @@ function FunnelChart({
         steps.map((step, i) => {
           const total = totals[i];
           const bar_w = total / value_max * plot_w;
-          const bar_x = PAD_LEFT4 + (plot_w - bar_w) / 2;
-          const bar_y = PAD_TOP4 + i * ROW_H + LABEL_H;
+          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;
@@ -10513,10 +10192,10 @@ function FunnelChart({
             /* @__PURE__ */ jsxRuntime.jsx(
               "text",
               {
-                x: PAD_LEFT4 - 6,
+                x: PAD_LEFT2 - 6,
                 y: bar_y + BAR_H / 2 + 4,
                 textAnchor: "end",
-                fill: AXIS_LABEL_COLOR4,
+                fill: AXIS_LABEL_COLOR2,
                 fontSize: 9,
                 children: step.label
               }
@@ -10558,7 +10237,7 @@ function FunnelChart({
                 x: label_x,
                 y: bar_y + BAR_H / 2 + 10,
                 textAnchor: "start",
-                fill: AXIS_LABEL_COLOR4,
+                fill: AXIS_LABEL_COLOR2,
                 fontSize: 8,
                 children: `\u2212${fmt(dropoff)}`
               }
@@ -10573,8 +10252,8 @@ function FunnelChart({
           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_LEFT4 + (plot_w - bar_w) / 2;
-          const bar_y = PAD_TOP4 + i * ROW_H + LABEL_H;
+          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 },
@@ -10628,7 +10307,7 @@ function FunnelChart({
               {
                 x: bubble_x + 7,
                 y: bubble_y + pad_v + k * line_h + line_h * 0.75,
-                fill: line.accent ? color2 : AXIS_LABEL_COLOR4,
+                fill: line.accent ? color2 : AXIS_LABEL_COLOR2,
                 fontSize: line.accent ? 10 : 8,
                 fontWeight: line.accent ? 700 : 400,
                 children: line.text
@@ -11184,6 +10863,8 @@ exports.HazoUiDialogTrigger = DialogTrigger;
 exports.HazoUiEtaProgress = HazoUiEtaProgress;
 exports.HazoUiFlexInput = HazoUiFlexInput;
 exports.HazoUiFlexRadio = HazoUiFlexRadio;
+exports.HazoUiImageCropper = HazoUiImageCropper;
+exports.HazoUiImageCropperDialog = HazoUiImageCropperDialog;
 exports.HazoUiKanban = HazoUiKanban;
 exports.HazoUiKanbanFilter = HazoUiKanbanFilter;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
@@ -11199,12 +10880,11 @@ exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Input = Input;
+exports.InputAffix = InputAffix;
 exports.InverseSparkline = InverseSparkline;
 exports.Label = Label3;
-exports.LineChart = LineChart;
 exports.LoadingTimeout = LoadingTimeout;
 exports.MarkdownEditor = MarkdownEditor;
-exports.MultiLineChart = MultiLineChart;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
@@ -11235,6 +10915,7 @@ exports.SkeletonBar = SkeletonBar;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonGroup = SkeletonGroup;
 exports.SkeletonRect = SkeletonRect;
+exports.Slider = Slider;
 exports.Sparkline = Sparkline;
 exports.Spinner = Spinner;
 exports.StackedBars = StackedBars;