hazo_ui 2.17.0 → 3.0.1

package/dist/index.cjs

@@ -7687,6 +7687,200 @@ function useErrorDisplay() {
   const clearError = React25.useCallback(() => setRaw(null), []);
   return { error, setError, clearError };
 }
+function useDebounce(value, delayMs) {
+  const [debounced_value, set_debounced_value] = React25.useState(value);
+  React25.useEffect(() => {
+    const timer = setTimeout(() => {
+      set_debounced_value(value);
+    }, delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return debounced_value;
+}
+function useCopyToClipboard() {
+  const [copied, set_copied] = React25.useState(false);
+  const copy = React25.useCallback(async (text) => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(text);
+      set_copied(true);
+      setTimeout(() => set_copied(false), 2e3);
+    } catch {
+    }
+  }, []);
+  return { copied, copy };
+}
+
+// src/hooks/use_is_mobile.ts
+var DEFAULT_BREAKPOINT_PX = 768;
+function useIsMobile(breakpointPx = DEFAULT_BREAKPOINT_PX) {
+  return useMediaQuery(`(max-width: ${breakpointPx - 1}px)`);
+}
+function useViewport(breakpoint = DEFAULT_BREAKPOINT_PX) {
+  return useIsMobile(breakpoint);
+}
+function useLocalStorage(key, initialValue) {
+  const read_stored = () => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const raw = window.localStorage.getItem(key);
+      return raw !== null ? JSON.parse(raw) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  };
+  const [stored_value, set_stored_value] = React25.useState(read_stored);
+  const set_value = React25.useCallback(
+    (value) => {
+      set_stored_value((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        try {
+          if (typeof window !== "undefined") {
+            window.localStorage.setItem(key, JSON.stringify(next));
+          }
+        } catch {
+        }
+        return next;
+      });
+    },
+    [key]
+  );
+  return [stored_value, set_value];
+}
+function useSessionStorage(key, initialValue) {
+  const read_stored = () => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const raw = window.sessionStorage.getItem(key);
+      return raw !== null ? JSON.parse(raw) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  };
+  const [stored_value, set_stored_value] = React25.useState(read_stored);
+  const set_value = React25.useCallback(
+    (value) => {
+      set_stored_value((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        try {
+          if (typeof window !== "undefined") {
+            window.sessionStorage.setItem(key, JSON.stringify(next));
+          }
+        } catch {
+        }
+        return next;
+      });
+    },
+    [key]
+  );
+  return [stored_value, set_value];
+}
+function useClickOutside(ref, handler) {
+  React25.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handle_event = (event) => {
+      const target = event.target;
+      if (!ref.current || !target) return;
+      if (!ref.current.contains(target)) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", handle_event);
+    document.addEventListener("touchstart", handle_event);
+    return () => {
+      document.removeEventListener("mousedown", handle_event);
+      document.removeEventListener("touchstart", handle_event);
+    };
+  }, [ref, handler]);
+}
+function useWakeLock() {
+  const supported = typeof navigator !== "undefined" && "wakeLock" in navigator;
+  const sentinel_ref = React25.useRef(null);
+  const [acquired, set_acquired] = React25.useState(false);
+  const request = React25.useCallback(async () => {
+    if (!supported || sentinel_ref.current) return;
+    try {
+      const sentinel = await navigator.wakeLock.request("screen");
+      sentinel.addEventListener("release", () => {
+        sentinel_ref.current = null;
+        set_acquired(false);
+      });
+      sentinel_ref.current = sentinel;
+      set_acquired(true);
+    } catch {
+    }
+  }, [supported]);
+  const release = React25.useCallback(async () => {
+    if (!sentinel_ref.current) return;
+    try {
+      await sentinel_ref.current.release();
+    } catch {
+    } finally {
+      sentinel_ref.current = null;
+      set_acquired(false);
+    }
+  }, []);
+  React25.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handle_visibility = () => {
+      if (document.visibilityState === "visible" && acquired && !sentinel_ref.current) {
+        void request();
+      }
+    };
+    document.addEventListener("visibilitychange", handle_visibility);
+    return () => document.removeEventListener("visibilitychange", handle_visibility);
+  }, [acquired, request]);
+  React25.useEffect(() => {
+    return () => {
+      if (sentinel_ref.current) {
+        void sentinel_ref.current.release().catch(() => void 0);
+        sentinel_ref.current = null;
+      }
+    };
+  }, []);
+  return { supported, acquired, request, release };
+}
+function useFullscreen(elementRef) {
+  const [is_fullscreen, set_is_fullscreen] = React25.useState(false);
+  React25.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handle_change = () => {
+      set_is_fullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handle_change);
+    set_is_fullscreen(!!document.fullscreenElement);
+    return () => document.removeEventListener("fullscreenchange", handle_change);
+  }, []);
+  const get_target = React25.useCallback(() => {
+    return elementRef?.current ?? document.documentElement;
+  }, [elementRef]);
+  const enter = React25.useCallback(async () => {
+    if (typeof document === "undefined" || !document.documentElement.requestFullscreen) return;
+    if (document.fullscreenElement) return;
+    try {
+      await get_target().requestFullscreen();
+    } catch {
+    }
+  }, [get_target]);
+  const exit = React25.useCallback(async () => {
+    if (typeof document === "undefined") return;
+    if (!document.fullscreenElement) return;
+    try {
+      await document.exitFullscreen();
+    } catch {
+    }
+  }, []);
+  const toggle = React25.useCallback(async () => {
+    if (document.fullscreenElement) {
+      await exit();
+    } else {
+      await enter();
+    }
+  }, [enter, exit]);
+  return { isFullscreen: is_fullscreen, enter, exit, toggle };
+}
 function KanbanCard({
   item,
   renderCard,
@@ -10104,6 +10298,291 @@ function DateRangeSelector({
   );
 }
 
+// src/assets/celebration-chime.mp3
+var celebration_chime_default = "data:text/plain;charset=utf-8,";
+var CELEBRATION_GRADIENT = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)";
+var CARD_SIZE = 1080;
+var PREVIEW_SIZE = 400;
+var CARD_SCALE = PREVIEW_SIZE / CARD_SIZE;
+var _enqueue = null;
+function celebrate(payload) {
+  if (!_enqueue) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "[hazo_ui] celebrate() called before <CelebrationProvider /> was mounted"
+      );
+    }
+    return;
+  }
+  _enqueue(payload);
+}
+function CelebrationProvider({ children }) {
+  const [queue, set_queue] = React25__namespace.useState([]);
+  const enqueue = React25__namespace.useCallback((payload) => {
+    const storage_key = `hazo_ui_celebration_${payload.id}`;
+    if (typeof window !== "undefined" && sessionStorage.getItem(storage_key)) {
+      return;
+    }
+    set_queue((q) => [...q, payload]);
+  }, []);
+  React25__namespace.useEffect(() => {
+    _enqueue = enqueue;
+    return () => {
+      _enqueue = null;
+    };
+  }, [enqueue]);
+  const handle_close = React25__namespace.useCallback(() => {
+    set_queue((q) => q.slice(1));
+  }, []);
+  const current = queue[0] ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    current && /* @__PURE__ */ jsxRuntime.jsx(
+      CelebrationModalInner,
+      {
+        payload: current,
+        onClose: handle_close
+      },
+      current.id
+    )
+  ] });
+}
+function CelebrationModalInner({
+  payload,
+  onClose
+}) {
+  const {
+    id,
+    title,
+    subtitle,
+    shareableCard,
+    autoDismiss = true,
+    autoDismissDelay = 8e3,
+    audioChime = false
+  } = payload;
+  const [visible, set_visible] = React25__namespace.useState(true);
+  const [is_downloading, set_is_downloading] = React25__namespace.useState(false);
+  const canvas_ref = React25__namespace.useRef(null);
+  const card_ref = React25__namespace.useRef(null);
+  React25__namespace.useEffect(() => {
+    sessionStorage.setItem(`hazo_ui_celebration_${id}`, "1");
+  }, [id]);
+  React25__namespace.useEffect(() => {
+    if (!canvas_ref.current) return;
+    let confetti_instance = null;
+    import('canvas-confetti').then(({ default: confetti }) => {
+      if (!canvas_ref.current) return;
+      confetti_instance = confetti.create(canvas_ref.current, { resize: true });
+      confetti_instance({
+        particleCount: 120,
+        spread: 70,
+        origin: { y: 0.5 },
+        colors: ["#667eea", "#764ba2", "#f6d365", "#fda085", "#84fab0"]
+      });
+    });
+    return () => {
+      confetti_instance?.reset();
+    };
+  }, []);
+  React25__namespace.useEffect(() => {
+    if (!audioChime) return;
+    const audio = new Audio(celebration_chime_default);
+    audio.play().catch(() => {
+    });
+  }, [audioChime]);
+  React25__namespace.useEffect(() => {
+    if (!autoDismiss) return;
+    const timer = window.setTimeout(close_modal, autoDismissDelay);
+    return () => window.clearTimeout(timer);
+  }, [autoDismiss, autoDismissDelay]);
+  React25__namespace.useEffect(() => {
+    const on_key = (e) => {
+      if (e.key === "Escape") close_modal();
+    };
+    document.addEventListener("keydown", on_key);
+    return () => document.removeEventListener("keydown", on_key);
+  }, []);
+  function close_modal() {
+    set_visible(false);
+    setTimeout(onClose, 150);
+  }
+  async function handle_download() {
+    if (!card_ref.current) return;
+    set_is_downloading(true);
+    try {
+      const { toPng } = await import('html-to-image');
+      const data_url = await toPng(card_ref.current, {
+        width: CARD_SIZE,
+        height: CARD_SIZE
+      });
+      const a = document.createElement("a");
+      a.download = `${id}.png`;
+      a.href = data_url;
+      a.click();
+    } catch (err) {
+      console.error("[hazo_ui] CelebrationModal: download failed", err);
+    } finally {
+      set_is_downloading(false);
+    }
+  }
+  async function handle_share() {
+    if (!card_ref.current || !navigator.share) return;
+    try {
+      const { toPng } = await import('html-to-image');
+      const data_url = await toPng(card_ref.current, {
+        width: CARD_SIZE,
+        height: CARD_SIZE
+      });
+      const blob = await fetch(data_url).then((r) => r.blob());
+      await navigator.share({
+        files: [new File([blob], `${id}.png`, { type: "image/png" })]
+      });
+    } catch (err) {
+      console.error("[hazo_ui] CelebrationModal: share failed", err);
+    }
+  }
+  async function handle_copy() {
+    if (!card_ref.current) return;
+    try {
+      const { toPng } = await import('html-to-image');
+      const data_url = await toPng(card_ref.current, {
+        width: CARD_SIZE,
+        height: CARD_SIZE
+      });
+      const blob = await fetch(data_url).then((r) => r.blob());
+      await navigator.clipboard.write([
+        new ClipboardItem({ "image/png": blob })
+      ]);
+    } catch (err) {
+      console.error("[hazo_ui] CelebrationModal: copy failed", err);
+    }
+  }
+  const resolved_caption = shareableCard?.caption ?? subtitle;
+  const card_bg = shareableCard?.background ?? CELEBRATION_GRADIENT;
+  const can_share = typeof navigator !== "undefined" && "share" in navigator;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_celebration_modal_overlay",
+        "fixed inset-0 z-50 flex items-center justify-center",
+        "bg-black/30 backdrop-blur-sm",
+        "transition-opacity duration-150",
+        visible ? "opacity-100" : "opacity-0 pointer-events-none"
+      ),
+      onClick: close_modal,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvas_ref,
+            className: "cls_celebration_confetti_canvas absolute inset-0 w-full h-full pointer-events-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "cls_celebration_modal_card",
+              "relative bg-white rounded-2xl shadow-2xl",
+              "flex flex-col items-center overflow-hidden",
+              "transition-transform duration-150",
+              visible ? "scale-100" : "scale-95"
+            ),
+            style: { width: 480, maxWidth: "95vw" },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: "cls_celebration_close_btn absolute top-3 right-3 z-10 p-1.5 rounded-full hover:bg-black/10 transition-colors",
+                  onClick: close_modal,
+                  "aria-label": "Close celebration",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 text-gray-600" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_celebration_header px-8 pt-8 pb-5 text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "cls_celebration_title text-2xl font-bold text-gray-900", children: title }),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cls_celebration_subtitle mt-1.5 text-sm text-gray-500 leading-relaxed", children: subtitle })
+              ] }),
+              shareableCard && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "cls_celebration_card_preview_wrapper overflow-hidden rounded-lg mx-8",
+                    style: { width: PREVIEW_SIZE, height: PREVIEW_SIZE },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        ref: card_ref,
+                        className: "cls_celebration_card_inner",
+                        style: {
+                          width: CARD_SIZE,
+                          height: CARD_SIZE,
+                          transform: `scale(${CARD_SCALE})`,
+                          transformOrigin: "top left",
+                          background: card_bg,
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          padding: 80,
+                          boxSizing: "border-box"
+                        },
+                        children: [
+                          shareableCard.foreground,
+                          resolved_caption && /* @__PURE__ */ jsxRuntime.jsx(
+                            "p",
+                            {
+                              style: {
+                                marginTop: 32,
+                                fontSize: 36,
+                                color: "white",
+                                textAlign: "center",
+                                fontWeight: 600,
+                                lineHeight: 1.3
+                              },
+                              children: resolved_caption
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_celebration_card_actions flex flex-wrap gap-2 px-8 py-5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      className: "cls_celebration_download_btn",
+                      size: "sm",
+                      onClick: handle_download,
+                      disabled: is_downloading,
+                      children: [
+                        is_downloading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5 mr-1.5" }),
+                        "Download PNG"
+                      ]
+                    }
+                  ),
+                  can_share && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: handle_share, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Share2, { className: "h-3.5 w-3.5 mr-1.5" }),
+                    "Share"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: handle_copy, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5 mr-1.5" }),
+                    "Copy image"
+                  ] })
+                ] })
+              ] }),
+              !shareableCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_celebration_footer pb-8", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: close_modal, children: "Dismiss" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
   get: function () { return sonner.toast; }
@@ -10128,6 +10607,7 @@ exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupSeparator = ButtonGroupSeparator;
 exports.ButtonGroupText = ButtonGroupText;
+exports.CELEBRATION_GRADIENT = CELEBRATION_GRADIENT;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.CardContent = CardContent;
@@ -10135,6 +10615,7 @@ exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
+exports.CelebrationProvider = CelebrationProvider;
 exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
@@ -10260,6 +10741,7 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.applyKanbanFilter = applyKanbanFilter;
 exports.buttonGroupVariants = buttonGroupVariants;
+exports.celebrate = celebrate;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
 exports.errorToast = errorToast;
 exports.format_num = format_num;
@@ -10272,8 +10754,17 @@ exports.set_hazo_ui_config = set_hazo_ui_config;
 exports.successToast = successToast;
 exports.text_to_tiptap_content = text_to_tiptap_content;
 exports.toggleVariants = toggleVariants;
+exports.useClickOutside = useClickOutside;
+exports.useCopyToClipboard = useCopyToClipboard;
+exports.useDebounce = useDebounce;
 exports.useErrorDisplay = useErrorDisplay;
+exports.useFullscreen = useFullscreen;
+exports.useIsMobile = useIsMobile;
 exports.useLoadingState = useLoadingState;
+exports.useLocalStorage = useLocalStorage;
 exports.useMediaQuery = useMediaQuery;
+exports.useSessionStorage = useSessionStorage;
+exports.useViewport = useViewport;
+exports.useWakeLock = useWakeLock;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map