hazo_ui 3.3.0 → 3.5.0

package/dist/index.js

@@ -74,6 +74,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Toaster, toast } from 'sonner';
 export { toast as rawToast } from 'sonner';
+import { useHazoState } from 'hazo_state/client';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -7931,6 +7932,18 @@ function useFullscreen(elementRef) {
   }, [enter, exit]);
   return { isFullscreen: is_fullscreen, enter, exit, toggle };
 }
+function use_wake_lock(active) {
+  const { acquired, request, release } = useWakeLock();
+  useEffect(() => {
+    if (active && !acquired) void request();
+    if (!active && acquired) void release();
+  }, [active, acquired, request, release]);
+}
+function use_fullscreen() {
+  const ref = useRef(null);
+  const { isFullscreen, toggle } = useFullscreen(ref);
+  return { is_fullscreen: isFullscreen, toggle, ref };
+}
 function KanbanCard({
   item,
   renderCard,
@@ -10347,6 +10360,219 @@ function DateRangeSelector({
     }
   );
 }
+var PAD_LEFT4 = 80;
+var PAD_RIGHT4 = 72;
+var PAD_TOP4 = 12;
+var PAD_BOTTOM4 = 12;
+var ROW_H = 44;
+var LABEL_H = 14;
+var BAR_H = 22;
+var AXIS_LABEL_COLOR4 = "#8b949e";
+var GRIDLINE_COLOR3 = "#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_LEFT4 - PAD_RIGHT4;
+  const vbox_h = height ?? PAD_TOP4 + steps.length * ROW_H + PAD_BOTTOM4;
+  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_TOP4) / 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_LEFT4 + plot_w / 2,
+            x2: PAD_LEFT4 + plot_w / 2,
+            y1: PAD_TOP4,
+            y2: PAD_TOP4 + steps.length * ROW_H,
+            stroke: GRIDLINE_COLOR3,
+            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_LEFT4 + (plot_w - bar_w) / 2;
+          const bar_y = PAD_TOP4 + 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_LEFT4 - 6,
+                y: bar_y + BAR_H / 2 + 4,
+                textAnchor: "end",
+                fill: AXIS_LABEL_COLOR4,
+                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_COLOR4,
+                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_LEFT4 + (plot_w - bar_w) / 2;
+          const bar_y = PAD_TOP4 + 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_COLOR4,
+                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,";
@@ -10633,6 +10859,177 @@ function CelebrationModalInner({
   );
 }
 
-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, HazoUiFlexInput, HazoUiFlexRadio, HazoUiKanban, HazoUiKanbanFilter, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, 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, create_command_suggestion_extension, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, 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, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useViewport, useWakeLock };
+// src/components/hazo_ui_eta_progress/eta.ts
+function median(values) {
+  if (values.length === 0) return 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+}
+function computeEta(durationWindow, unitCount, concurrency = 1, fallbackUnitMs = 5e3) {
+  const unitMs = durationWindow.length > 0 ? median(durationWindow) : fallbackUnitMs;
+  return unitMs * Math.ceil(unitCount / Math.max(1, concurrency));
+}
+function easeToward(elapsed, eta, maxCap = 0.95) {
+  if (eta <= 0 || elapsed <= 0) return 0;
+  const t = elapsed / eta;
+  return maxCap * (1 - Math.exp(-1.5 * t));
+}
+function HazoUiProgressBar({
+  value,
+  label,
+  showPercent = false,
+  size = 8,
+  className
+}) {
+  const pct = Math.round(Math.min(1, Math.max(0, value)) * 100);
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    (label || showPercent) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: label }),
+      showPercent && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+        pct,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": pct,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        className: "w-full rounded-full overflow-hidden bg-muted",
+        style: { height: size },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-accent transition-[width] duration-200 ease-out motion-reduce:transition-none",
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+function useEtaProgress(opts) {
+  const {
+    unitCount,
+    concurrency = 1,
+    fallbackUnitMs = 5e3,
+    loadDurations,
+    appendDuration
+  } = opts;
+  const [value, setValue] = React26.useState(0);
+  const stateRef = React26.useRef({
+    started: false,
+    finished: false,
+    startTime: 0,
+    unitsDone: 0,
+    unitTimestamps: [],
+    // timestamps of each unitDone() call
+    eta: 0,
+    rafId: 0
+  });
+  const stop = React26.useCallback(() => {
+    if (stateRef.current.rafId) {
+      cancelAnimationFrame(stateRef.current.rafId);
+      stateRef.current.rafId = 0;
+    }
+  }, []);
+  React26.useEffect(() => stop, [stop]);
+  const tick = React26.useCallback(() => {
+    const s = stateRef.current;
+    if (s.finished || !s.started) return;
+    const elapsed = Date.now() - s.startTime;
+    const timeValue = easeToward(elapsed, s.eta);
+    const unitValue = unitCount > 0 ? s.unitsDone / unitCount : 0;
+    setValue(Math.max(timeValue, unitValue));
+    s.rafId = requestAnimationFrame(tick);
+  }, [unitCount]);
+  const start = React26.useCallback(() => {
+    const s = stateRef.current;
+    if (s.started) return;
+    const window2 = loadDurations();
+    const eta = computeEta(window2, unitCount, concurrency, fallbackUnitMs);
+    s.started = true;
+    s.finished = false;
+    s.startTime = Date.now();
+    s.unitsDone = 0;
+    s.unitTimestamps = [];
+    s.eta = eta;
+    stop();
+    s.rafId = requestAnimationFrame(tick);
+  }, [loadDurations, unitCount, concurrency, fallbackUnitMs, stop, tick]);
+  const unitDone = React26.useCallback(() => {
+    const s = stateRef.current;
+    if (!s.started || s.finished) return;
+    s.unitsDone = Math.min(s.unitsDone + 1, unitCount);
+    s.unitTimestamps.push(Date.now());
+  }, [unitCount]);
+  const finish = React26.useCallback(() => {
+    const s = stateRef.current;
+    if (s.finished) return;
+    s.finished = true;
+    stop();
+    setValue(1);
+    if (s.started && s.unitTimestamps.length > 0) {
+      const totalMs = Date.now() - s.startTime;
+      const perUnitMs = totalMs / Math.ceil(unitCount / Math.max(1, concurrency));
+      appendDuration(perUnitMs);
+    }
+    s.started = false;
+    s.unitsDone = 0;
+  }, [stop, unitCount, concurrency, appendDuration]);
+  return { value, start, unitDone, finish };
+}
+function HazoUiEtaProgress({
+  estimateKey,
+  unitCount,
+  concurrency = 1,
+  windowSize = 5,
+  fallbackUnitMs = 5e3,
+  level = "global",
+  label,
+  endpoint,
+  handleRef,
+  className
+}) {
+  const { value: stored, append } = useHazoState(estimateKey, {
+    level,
+    fallback: [],
+    ...endpoint ? { endpoint } : {}
+  });
+  const durationWindow = Array.isArray(stored) ? stored : [];
+  const loadDurations = React26.useCallback(() => durationWindow, [durationWindow]);
+  const appendDuration = React26.useCallback(
+    (ms) => {
+      append(ms, windowSize);
+    },
+    [append, windowSize]
+  );
+  const handle = useEtaProgress({
+    unitCount,
+    concurrency,
+    fallbackUnitMs,
+    loadDurations,
+    appendDuration
+  });
+  React26.useEffect(() => {
+    if (handleRef) {
+      handleRef.current = handle;
+    }
+  }, [handleRef, handle]);
+  return /* @__PURE__ */ jsx(
+    HazoUiProgressBar,
+    {
+      value: handle.value,
+      label,
+      className
+    }
+  );
+}
+
+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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map