@janovix/blocks 1.0.0-rc.4 → 1.0.0-rc.6

package/dist/index.d.cts

@@ -187,7 +187,7 @@ interface NotificationsWidgetProps {
     pulseStyle?: PulseStyle;
     soundCooldown?: number;
 }
-declare function NotificationsWidget({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, onNotificationClick, size, maxVisible, playSound: _playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsWidget({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, onNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;

package/dist/index.d.ts

@@ -187,7 +187,7 @@ interface NotificationsWidgetProps {
     pulseStyle?: PulseStyle;
     soundCooldown?: number;
 }
-declare function NotificationsWidget({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, onNotificationClick, size, maxVisible, playSound: _playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsWidget({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, onNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;

package/dist/index.js

@@ -9630,9 +9630,11 @@ function AvatarEditor({
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
   const [showGrid, setShowGrid] = useState(initialShowGrid);
   useEffect(() => {
-    if (imageSource && !imageSource.startsWith("data:")) {
+    if (imageSource) {
       const img = new Image();
-      img.crossOrigin = "anonymous";
+      if (!imageSource.startsWith("data:")) {
+        img.crossOrigin = "anonymous";
+      }
       img.onload = () => {
         setImage(img);
         setImageLoaded(true);
@@ -9641,6 +9643,12 @@ function AvatarEditor({
         setPosition({ x: 0, y: 0 });
       };
       img.src = imageSource;
+    } else {
+      setImage(null);
+      setImageLoaded(false);
+      setZoom(1);
+      setRotation(0);
+      setPosition({ x: 0, y: 0 });
     }
   }, [imageSource]);
   const generateOutput = useCallback(() => {
@@ -9820,6 +9828,7 @@ function AvatarEditor({
   const handleTouchMove = useCallback(
     (e) => {
       if (!isDragging) return;
+      e.preventDefault();
       const touch = e.touches[0];
       setPosition({
         x: touch.clientX - dragStart.x,
@@ -10402,14 +10411,13 @@ function DrawerDescription({
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
+    if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
+    setMatches(media.matches);
     const listener = () => setMatches(media.matches);
     media.addEventListener("change", listener);
     return () => media.removeEventListener("change", listener);
-  }, [matches, query]);
+  }, [query]);
   return matches;
 }
 function AvatarEditorDialog({
@@ -10432,7 +10440,15 @@ function AvatarEditorDialog({
   const [editedValue, setEditedValue] = useState(value ?? null);
   const [isSaving, setIsSaving] = useState(false);
   const [feedback, setFeedback] = useState(null);
+  const [mobileEditorSize, setMobileEditorSize] = useState(editorSize);
   const isMobile = useMediaQuery("(max-width: 640px)");
+  useEffect(() => {
+    if (typeof window !== "undefined" && isMobile) {
+      setMobileEditorSize(Math.min(editorSize + 40, window.innerWidth - 48));
+    } else {
+      setMobileEditorSize(editorSize);
+    }
+  }, [isMobile, editorSize]);
   const handleOpenChange = useCallback(
     (open) => {
       if (open) {
@@ -10507,7 +10523,6 @@ function AvatarEditorDialog({
       ]
     }
   );
-  const mobileEditorSize = isMobile ? Math.min(editorSize + 40, window.innerWidth - 48) : editorSize;
   const EditorContent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     /* @__PURE__ */ jsx(
       AvatarEditor,
@@ -10832,7 +10847,7 @@ function NotificationsWidget({
   onNotificationClick,
   size: size4 = "md",
   maxVisible = 5,
-  playSound: _playSound = true,
+  playSound = true,
   soundUrl,
   className,
   emptyMessage = "No notifications",
@@ -10849,10 +10864,13 @@ function NotificationsWidget({
   const styles = sizeConfig[size4];
   const dotBgColor = dotColorConfig[dotColor];
   const unreadCount = notifications.filter((n) => !n.read).length;
-  const visibleNotifications = notifications.slice(0, maxVisible);
+  const visibleNotifications = React32.useMemo(
+    () => notifications.slice(0, maxVisible),
+    [notifications, maxVisible]
+  );
   const hasMore = notifications.length > maxVisible;
   React32.useEffect(() => {
-    if (soundType !== "none" && unreadCount > prevCount && prevCount > 0) {
+    if (playSound && soundType !== "none" && unreadCount > prevCount && prevCount > 0) {
       const now = Date.now();
       if (now - lastSoundPlayedRef.current >= soundCooldown) {
         playNotificationSound(soundType, soundUrl);
@@ -10860,7 +10878,7 @@ function NotificationsWidget({
       }
     }
     setPrevCount(unreadCount);
-  }, [unreadCount, prevCount, soundType, soundUrl, soundCooldown]);
+  }, [unreadCount, prevCount, soundType, soundUrl, soundCooldown, playSound]);
   React32.useEffect(() => {
     if (isOpen && onMarkAsRead) {
       visibleNotifications.forEach((notification) => {
@@ -10954,18 +10972,32 @@ function NotificationsWidget({
               const config = typeConfig[notification.type || "info"];
               const Icon = config.icon;
               const hasLink = !!notification.href;
+              const handleClick = () => handleNotificationClick(notification);
+              const handleKeyDown = (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleNotificationClick(notification);
+                }
+              };
+              const MotionElement = hasLink ? motion.button : motion.div;
+              const interactionProps = hasLink ? {
+                role: "button",
+                tabIndex: 0,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown
+              } : {};
               return /* @__PURE__ */ jsxs(
-                motion.div,
+                MotionElement,
                 {
                   initial: { opacity: 0, y: -10 },
                   animate: { opacity: 1, y: 0 },
                   className: cn(
-                    "relative flex gap-3 px-4 py-3 transition-colors group",
+                    "relative flex gap-3 px-4 py-3 transition-colors group w-full text-left border-0 bg-transparent",
                     hasLink && "cursor-pointer hover:bg-muted/50",
                     !hasLink && "cursor-default",
                     !notification.read && "bg-primary/5"
                   ),
-                  onClick: () => handleNotificationClick(notification),
+                  ...interactionProps,
                   children: [
                     /* @__PURE__ */ jsx(
                       "div",