@janovix/blocks 1.2.0-rc.22 → 1.2.0-rc.23

package/dist/index.d.cts

@@ -193,12 +193,8 @@ interface AvatarEditorProps {
     className?: string;
     /** Control size variant - 'default' for desktop, 'large' for mobile/touch devices */
     controlSize?: "default" | "large";
-    /** @deprecated Use value instead. Default image URL to load */
-    defaultImage?: string;
-    /** Initials to show in the placeholder (for backward compatibility, not displayed in current UI) */
-    initials?: string;
 }
-declare function AvatarEditor({ value, onChange, size, showGrid: initialShowGrid, outputSize, outputFormat, outputQuality, className, controlSize, defaultImage, initials: _initials, }: AvatarEditorProps): react_jsx_runtime.JSX.Element;
+declare function AvatarEditor({ value: _value, onChange, size, showGrid: initialShowGrid, outputSize, outputFormat, outputQuality, className, controlSize, }: AvatarEditorProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarEditorDialogProps {
     /** Current avatar URL or data URL */
@@ -230,7 +226,7 @@ interface AvatarEditorDialogProps {
     /** Additional class names */
     className?: string;
 }
-declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder: _placeholder, editLabel, dialogTitle, acceptText, cancelText, successMessage, errorMessage, className, }: AvatarEditorDialogProps): react_jsx_runtime.JSX.Element;
+declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder, editLabel, dialogTitle, acceptText, cancelText, successMessage, errorMessage, className, }: AvatarEditorDialogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * NotificationsWidget - A compact notification bell for navigation bars

package/dist/index.d.ts

@@ -193,12 +193,8 @@ interface AvatarEditorProps {
     className?: string;
     /** Control size variant - 'default' for desktop, 'large' for mobile/touch devices */
     controlSize?: "default" | "large";
-    /** @deprecated Use value instead. Default image URL to load */
-    defaultImage?: string;
-    /** Initials to show in the placeholder (for backward compatibility, not displayed in current UI) */
-    initials?: string;
 }
-declare function AvatarEditor({ value, onChange, size, showGrid: initialShowGrid, outputSize, outputFormat, outputQuality, className, controlSize, defaultImage, initials: _initials, }: AvatarEditorProps): react_jsx_runtime.JSX.Element;
+declare function AvatarEditor({ value: _value, onChange, size, showGrid: initialShowGrid, outputSize, outputFormat, outputQuality, className, controlSize, }: AvatarEditorProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarEditorDialogProps {
     /** Current avatar URL or data URL */
@@ -230,7 +226,7 @@ interface AvatarEditorDialogProps {
     /** Additional class names */
     className?: string;
 }
-declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder: _placeholder, editLabel, dialogTitle, acceptText, cancelText, successMessage, errorMessage, className, }: AvatarEditorDialogProps): react_jsx_runtime.JSX.Element;
+declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder, editLabel, dialogTitle, acceptText, cancelText, successMessage, errorMessage, className, }: AvatarEditorDialogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * NotificationsWidget - A compact notification bell for navigation bars

package/dist/index.js

@@ -2,7 +2,7 @@ import * as React2 from 'react';
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
 import { useTheme } from 'next-themes';
 import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2 } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
+import { AnimatePresence, motion } from 'framer-motion';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
@@ -3796,7 +3796,7 @@ function Toggle({
   );
 }
 function AvatarEditor({
-  value,
+  value: _value,
   onChange,
   size = 280,
   showGrid: initialShowGrid = false,
@@ -3804,14 +3804,11 @@ function AvatarEditor({
   outputFormat = "png",
   outputQuality = 0.92,
   className,
-  controlSize = "default",
-  defaultImage,
-  initials: _initials
+  controlSize = "default"
 }) {
   const canvasRef = useRef(null);
   const fileInputRef = useRef(null);
   const containerRef = useRef(null);
-  const imageSource = value ?? defaultImage;
   const [image, setImage] = useState(null);
   const [imageLoaded, setImageLoaded] = useState(false);
   const [zoom, setZoom] = useState(1);
@@ -3820,83 +3817,17 @@ function AvatarEditor({
   const [isDragging, setIsDragging] = useState(false);
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
   const [showGrid, setShowGrid] = useState(initialShowGrid);
-  useEffect(() => {
-    if (imageSource) {
-      const img = new Image();
-      if (!imageSource.startsWith("data:")) {
-        img.crossOrigin = "anonymous";
-      }
-      img.onload = () => {
-        setImage(img);
-        setImageLoaded(true);
-        setZoom(1);
-        setRotation(0);
-        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(() => {
-    if (!image) return null;
+    if (!canvasRef.current || !image) return null;
     const outputCanvas = document.createElement("canvas");
     outputCanvas.width = outputSize;
     outputCanvas.height = outputSize;
     const ctx = outputCanvas.getContext("2d");
     if (!ctx) return null;
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
-    if (outputFormat === "jpeg") {
-      ctx.fillStyle = "#ffffff";
-      ctx.fillRect(0, 0, outputSize, outputSize);
-    }
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
-    ctx.save();
-    ctx.translate(outputSize / 2, outputSize / 2);
-    ctx.rotate(rotation * Math.PI / 180);
-    const scale = zoom;
-    const imgAspect = image.width / image.height;
-    let drawWidth, drawHeight;
-    if (imgAspect > 1) {
-      drawHeight = outputSize * scale;
-      drawWidth = drawHeight * imgAspect;
-    } else {
-      drawWidth = outputSize * scale;
-      drawHeight = drawWidth / imgAspect;
-    }
-    const positionScale = outputSize / size;
-    const scaledPosX = position.x * positionScale;
-    const scaledPosY = position.y * positionScale;
-    ctx.drawImage(
-      image,
-      -drawWidth / 2 + scaledPosX,
-      -drawHeight / 2 + scaledPosY,
-      drawWidth,
-      drawHeight
-    );
-    ctx.restore();
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.beginPath();
-    ctx.arc(outputSize / 2, outputSize / 2, outputSize / 2, 0, Math.PI * 2);
-    ctx.fill();
+    ctx.drawImage(canvasRef.current, 0, 0, outputSize, outputSize);
     const mimeType = `image/${outputFormat}`;
     return outputCanvas.toDataURL(mimeType, outputQuality);
-  }, [
-    image,
-    outputSize,
-    outputFormat,
-    outputQuality,
-    zoom,
-    rotation,
-    position,
-    size
-  ]);
+  }, [image, outputSize, outputFormat, outputQuality]);
   useEffect(() => {
     if (!canvasRef.current || !image || !imageLoaded) return;
     const canvas = canvasRef.current;
@@ -3906,8 +3837,8 @@ function AvatarEditor({
     canvas.width = displaySize;
     canvas.height = displaySize;
     ctx.clearRect(0, 0, displaySize, displaySize);
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
+    ctx.fillStyle = "#1a1a2e";
+    ctx.fillRect(0, 0, displaySize, displaySize);
     ctx.save();
     ctx.translate(displaySize / 2, displaySize / 2);
     ctx.rotate(rotation * Math.PI / 180);
@@ -4025,7 +3956,6 @@ function AvatarEditor({
   const handleTouchMove = useCallback(
     (e) => {
       if (!isDragging) return;
-      e.preventDefault();
       const touch = e.touches[0];
       setPosition({
         x: touch.clientX - dragStart.x,
@@ -4608,13 +4538,14 @@ function DrawerDescription({
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
-    if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
-    setMatches(media.matches);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
     const listener = () => setMatches(media.matches);
     media.addEventListener("change", listener);
     return () => media.removeEventListener("change", listener);
-  }, [query]);
+  }, [matches, query]);
   return matches;
 }
 function AvatarEditorDialog({
@@ -4624,7 +4555,7 @@ function AvatarEditorDialog({
   displaySize = 120,
   editorSize = 280,
   outputSize = 256,
-  placeholder: _placeholder = "Add Photo",
+  placeholder = "Add Photo",
   editLabel = "Edit avatar",
   dialogTitle = "Edit Avatar",
   acceptText = "Accept",
@@ -4637,15 +4568,7 @@ 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) {
@@ -4664,6 +4587,7 @@ function AvatarEditorDialog({
       if (onSave) {
         const result = await onSave(editedValue);
         if (result) {
+          onChange?.(editedValue);
           setFeedback({ type: "success", message: successMessage });
           setTimeout(() => {
             setIsOpen(false);
@@ -4704,7 +4628,10 @@ function AvatarEditorDialog({
                 alt: "Avatar",
                 className: "w-full h-full object-cover"
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(User, { className: "w-10 h-10" }) })
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-muted-foreground gap-1", children: [
+              /* @__PURE__ */ jsx(User, { className: "w-1/3 h-1/3" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs", children: placeholder })
+            ] })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4720,6 +4647,7 @@ 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,