hazo_auth 10.2.2 → 10.2.3

package/dist/components/layouts/my_settings/components/profile_picture_upload_tab.d.ts

@@ -10,14 +10,20 @@ export type ProfilePictureUploadTabProps = {
     imageCompressionMaxDimension?: number;
     uploadFileHardLimitBytes?: number;
     allowedImageMimeTypes?: string[];
+    cropTitle?: string;
+    cropConfirmLabel?: string;
+    cropCancelLabel?: string;
+    cropZoomLabel?: string;
 };
 /**
  * Upload tab component for profile picture dialog
  * Two columns: left = dropzone, right = preview
  * Uses browser-image-compression for client-side compression
+ * Routes decodable images through HazoUiImageCropperDialog (round crop, 512² WebP)
+ * Falls back to direct upload for HEIC and other browser-undecodable formats
  * @param props - Component props including upload state, file handler, and configuration
  * @returns Upload tab component
  */
 export declare function ProfilePictureUploadTab({ useUpload, onUseUploadChange, onFileSelect, maxSize, uploadEnabled, disabled, currentPreview, photoUploadDisabledMessage, imageCompressionMaxDimension, uploadFileHardLimitBytes, // 10MB default
-allowedImageMimeTypes, }: ProfilePictureUploadTabProps): import("react/jsx-runtime").JSX.Element;
+allowedImageMimeTypes, cropTitle, cropConfirmLabel, cropCancelLabel, cropZoomLabel, }: ProfilePictureUploadTabProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=profile_picture_upload_tab.d.ts.map

package/dist/components/layouts/my_settings/components/profile_picture_upload_tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profile_picture_upload_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_upload_tab.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAGF;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,cAAc,EACd,0BAA0B,EAC1B,4BAAkC,EAClC,wBAAmC,EAAE,eAAe;AACpD,qBAAgE,GACjE,EAAE,4BAA4B,2CAmS9B"}
+{"version":3,"file":"profile_picture_upload_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_upload_tab.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAGF;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,cAAc,EACd,0BAA0B,EAC1B,4BAAkC,EAClC,wBAAmC,EAAE,eAAe;AACpD,qBAAgE,EAChE,SAAwB,EACxB,gBAA+B,EAC/B,eAA0B,EAC1B,aAAsB,GACvB,EAAE,4BAA4B,2CAgU9B"}

package/dist/components/layouts/my_settings/components/profile_picture_upload_tab.js

@@ -1,4 +1,4 @@
-// file_description: Upload tab component for profile picture dialog with dropzone and preview
+// file_description: Upload tab component for profile picture dialog with dropzone, crop step, and preview
 // section: client_directive
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -10,22 +10,37 @@ import { Avatar, AvatarImage, AvatarFallback } from "../../../ui/avatar.js";
 import { Upload, X, Loader2, Info } from "lucide-react";
 import { Button } from "../../../ui/button.js";
 import imageCompression from "browser-image-compression";
+import { HazoUiImageCropperDialog } from "hazo_ui";
+// section: helpers
+/** Resolves true if the browser can decode this image file, false otherwise (e.g. desktop HEIC). */
+function can_decode_image(file) {
+    return new Promise((resolve) => {
+        const url = URL.createObjectURL(file);
+        const img = new Image();
+        img.onload = () => { URL.revokeObjectURL(url); resolve(true); };
+        img.onerror = () => { URL.revokeObjectURL(url); resolve(false); };
+        img.src = url;
+    });
+}
 // section: component
 /**
  * Upload tab component for profile picture dialog
  * Two columns: left = dropzone, right = preview
  * Uses browser-image-compression for client-side compression
+ * Routes decodable images through HazoUiImageCropperDialog (round crop, 512² WebP)
+ * Falls back to direct upload for HEIC and other browser-undecodable formats
  * @param props - Component props including upload state, file handler, and configuration
  * @returns Upload tab component
  */
 export function ProfilePictureUploadTab({ useUpload, onUseUploadChange, onFileSelect, maxSize, uploadEnabled, disabled = false, currentPreview, photoUploadDisabledMessage, imageCompressionMaxDimension = 200, uploadFileHardLimitBytes = 10485760, // 10MB default
-allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"], }) {
+allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"], cropTitle = "Crop photo", cropConfirmLabel = "Save photo", cropCancelLabel = "Cancel", cropZoomLabel = "Zoom", }) {
     const [dragActive, setDragActive] = useState(false);
     const [preview, setPreview] = useState(currentPreview || null);
     const [isNewImage, setIsNewImage] = useState(false); // Track if preview is showing a newly uploaded image
     const [uploading, setUploading] = useState(false);
     const [compressing, setCompressing] = useState(false);
     const [error, setError] = useState(null);
+    const [cropFile, setCropFile] = useState(null);
     // Update preview when currentPreview changes (e.g., when dialog opens)
     useEffect(() => {
         if (currentPreview) {
@@ -40,17 +55,7 @@ allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"], }) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentPreview]); // Only depend on currentPreview to avoid loops, isNewImage check is intentional
-    const handleFile = useCallback(async (file) => {
-        // Validate file type
-        if (!allowedImageMimeTypes.includes(file.type)) {
-            setError(`Invalid file type. Only ${allowedImageMimeTypes.map(t => t.split("/")[1].toUpperCase()).join(", ")} files are allowed.`);
-            return;
-        }
-        // Hard limit: reject files larger than configured limit (too large to process efficiently)
-        if (file.size > uploadFileHardLimitBytes) {
-            setError(`File is too large. Maximum size is ${Math.round(maxSize / 1024)}KB.`);
-            return;
-        }
+    const process_and_upload = useCallback(async (file) => {
         setError(null);
         setCompressing(false);
         setUploading(false);
@@ -112,7 +117,32 @@ allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"], }) {
                 setUploading(false);
             }
         }
-    }, [maxSize, onFileSelect]);
+    }, [maxSize, onFileSelect, imageCompressionMaxDimension]);
+    const handleFile = useCallback(async (file) => {
+        // Validate file type
+        if (!allowedImageMimeTypes.includes(file.type)) {
+            setError(`Invalid file type. Only ${allowedImageMimeTypes.map(t => t.split("/")[1].toUpperCase()).join(", ")} files are allowed.`);
+            return;
+        }
+        // Hard limit: reject files larger than configured limit (too large to process efficiently)
+        if (file.size > uploadFileHardLimitBytes) {
+            setError(`File is too large. Maximum size is ${Math.round(maxSize / 1024)}KB.`);
+            return;
+        }
+        setError(null);
+        const decodable = await can_decode_image(file);
+        if (decodable) {
+            setCropFile(file); // opens the crop dialog
+        }
+        else {
+            await process_and_upload(file); // HEIC/undecodable fallback: direct path
+        }
+    }, [allowedImageMimeTypes, uploadFileHardLimitBytes, maxSize, process_and_upload]);
+    const handle_crop_confirm = useCallback(async (blob) => {
+        const cropped = new File([blob], "avatar.webp", { type: "image/webp" });
+        await process_and_upload(cropped);
+        setCropFile(null);
+    }, [process_and_upload]);
     const handleDrag = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -165,5 +195,6 @@ allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"], }) {
                                     if (!disabled && uploadEnabled) {
                                         (_a = document.getElementById("file-upload-input")) === null || _a === void 0 ? void 0 : _a.click();
                                     }
-                                }, children: [_jsx("input", { id: "file-upload-input", type: "file", accept: allowedImageMimeTypes.join(","), onChange: handleChange, disabled: disabled || !uploadEnabled, className: "hidden", "aria-label": "Upload profile picture" }), _jsx(Upload, { className: "h-8 w-8 text-[var(--hazo-text-subtle)] mb-2", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_dropzone_text text-sm text-[var(--hazo-text-muted)] text-center", children: "Drag and drop an image here, or click to select" }), _jsxs("p", { className: "cls_profile_picture_upload_tab_dropzone_hint text-xs text-[var(--hazo-text-muted)] text-center mt-1", children: ["JPG or PNG, max ", Math.round(maxSize / 1024), "KB"] })] }), error && (_jsx("p", { className: "cls_profile_picture_upload_tab_error text-sm text-red-600", role: "alert", children: error }))] }), _jsxs("div", { className: "cls_profile_picture_upload_tab_preview_container flex flex-col gap-2", children: [_jsx(Label, { className: "cls_profile_picture_upload_tab_preview_label text-sm font-medium text-[var(--hazo-text-secondary)]", children: isNewImage ? "Preview (new)" : "Preview (current)" }), _jsx("div", { className: "cls_profile_picture_upload_tab_preview_content flex flex-col items-center justify-center border border-[var(--hazo-border)] rounded-lg p-6 bg-[var(--hazo-bg-subtle)] min-h-[200px]", children: compressing ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_compressing flex flex-col items-center gap-2", children: [_jsx(Loader2, { className: "h-8 w-8 text-[var(--hazo-text-subtle)] animate-spin", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_compressing_text text-sm text-[var(--hazo-text-muted)]", children: "Compressing image..." })] })) : uploading ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_uploading flex flex-col items-center gap-2", children: [_jsx(Loader2, { className: "h-8 w-8 text-[var(--hazo-text-subtle)] animate-spin", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_uploading_text text-sm text-[var(--hazo-text-muted)]", children: "Uploading..." })] })) : preview ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_image_container flex flex-col items-center gap-4", children: [_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_image_wrapper relative", children: [_jsxs(Avatar, { className: "cls_profile_picture_upload_tab_preview_avatar h-32 w-32", children: [_jsx(AvatarImage, { src: preview, alt: "Uploaded profile picture preview", className: "cls_profile_picture_upload_tab_preview_avatar_image" }), _jsx(AvatarFallback, { className: "cls_profile_picture_upload_tab_preview_avatar_fallback bg-[var(--hazo-bg-emphasis)] text-[var(--hazo-text-muted)] text-3xl", children: getInitials() })] }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "ghost", size: "icon", className: "cls_profile_picture_upload_tab_preview_remove absolute -top-2 -right-2 rounded-full h-6 w-6 border border-[var(--hazo-border-emphasis)] bg-white hover:bg-[var(--hazo-bg-subtle)]", "aria-label": "Remove preview", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) })] }), _jsx("p", { className: "cls_profile_picture_upload_tab_preview_success_text text-sm text-[var(--hazo-text-muted)] text-center", children: "Preview of your uploaded photo" })] })) : (_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_empty flex flex-col items-center gap-2", children: [_jsx(Avatar, { className: "cls_profile_picture_upload_tab_preview_empty_avatar h-32 w-32", children: _jsx(AvatarFallback, { className: "cls_profile_picture_upload_tab_preview_empty_avatar_fallback bg-[var(--hazo-bg-emphasis)] text-[var(--hazo-text-muted)] text-3xl", children: getInitials() }) }), _jsx("p", { className: "cls_profile_picture_upload_tab_preview_empty_text text-sm text-[var(--hazo-text-muted)] text-center", children: "Upload an image to see preview" })] })) })] })] })] }));
+                                }, children: [_jsx("input", { id: "file-upload-input", type: "file", accept: allowedImageMimeTypes.join(","), onChange: handleChange, disabled: disabled || !uploadEnabled, className: "hidden", "aria-label": "Upload profile picture" }), _jsx(Upload, { className: "h-8 w-8 text-[var(--hazo-text-subtle)] mb-2", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_dropzone_text text-sm text-[var(--hazo-text-muted)] text-center", children: "Drag and drop an image here, or click to select" }), _jsxs("p", { className: "cls_profile_picture_upload_tab_dropzone_hint text-xs text-[var(--hazo-text-muted)] text-center mt-1", children: ["JPG or PNG, max ", Math.round(maxSize / 1024), "KB"] })] }), error && (_jsx("p", { className: "cls_profile_picture_upload_tab_error text-sm text-red-600", role: "alert", children: error }))] }), _jsxs("div", { className: "cls_profile_picture_upload_tab_preview_container flex flex-col gap-2", children: [_jsx(Label, { className: "cls_profile_picture_upload_tab_preview_label text-sm font-medium text-[var(--hazo-text-secondary)]", children: isNewImage ? "Preview (new)" : "Preview (current)" }), _jsx("div", { className: "cls_profile_picture_upload_tab_preview_content flex flex-col items-center justify-center border border-[var(--hazo-border)] rounded-lg p-6 bg-[var(--hazo-bg-subtle)] min-h-[200px]", children: compressing ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_compressing flex flex-col items-center gap-2", children: [_jsx(Loader2, { className: "h-8 w-8 text-[var(--hazo-text-subtle)] animate-spin", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_compressing_text text-sm text-[var(--hazo-text-muted)]", children: "Compressing image..." })] })) : uploading ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_uploading flex flex-col items-center gap-2", children: [_jsx(Loader2, { className: "h-8 w-8 text-[var(--hazo-text-subtle)] animate-spin", "aria-hidden": "true" }), _jsx("p", { className: "cls_profile_picture_upload_tab_uploading_text text-sm text-[var(--hazo-text-muted)]", children: "Uploading..." })] })) : preview ? (_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_image_container flex flex-col items-center gap-4", children: [_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_image_wrapper relative", children: [_jsxs(Avatar, { className: "cls_profile_picture_upload_tab_preview_avatar h-32 w-32", children: [_jsx(AvatarImage, { src: preview, alt: "Uploaded profile picture preview", className: "cls_profile_picture_upload_tab_preview_avatar_image" }), _jsx(AvatarFallback, { className: "cls_profile_picture_upload_tab_preview_avatar_fallback bg-[var(--hazo-bg-emphasis)] text-[var(--hazo-text-muted)] text-3xl", children: getInitials() })] }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "ghost", size: "icon", className: "cls_profile_picture_upload_tab_preview_remove absolute -top-2 -right-2 rounded-full h-6 w-6 border border-[var(--hazo-border-emphasis)] bg-white hover:bg-[var(--hazo-bg-subtle)]", "aria-label": "Remove preview", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) })] }), _jsx("p", { className: "cls_profile_picture_upload_tab_preview_success_text text-sm text-[var(--hazo-text-muted)] text-center", children: "Preview of your uploaded photo" })] })) : (_jsxs("div", { className: "cls_profile_picture_upload_tab_preview_empty flex flex-col items-center gap-2", children: [_jsx(Avatar, { className: "cls_profile_picture_upload_tab_preview_empty_avatar h-32 w-32", children: _jsx(AvatarFallback, { className: "cls_profile_picture_upload_tab_preview_empty_avatar_fallback bg-[var(--hazo-bg-emphasis)] text-[var(--hazo-text-muted)] text-3xl", children: getInitials() }) }), _jsx("p", { className: "cls_profile_picture_upload_tab_preview_empty_text text-sm text-[var(--hazo-text-muted)] text-center", children: "Upload an image to see preview" })] })) })] })] }), _jsx(HazoUiImageCropperDialog, { open: cropFile !== null, onOpenChange: (open) => { if (!open && !uploading && !compressing)
+                    setCropFile(null); }, file: cropFile, onConfirm: handle_crop_confirm, title: cropTitle, confirmLabel: cropConfirmLabel, cancelLabel: cropCancelLabel, zoomLabel: cropZoomLabel })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_auth",
-  "version": "10.2.2",
+  "version": "10.2.3",
   "description": "Zero-config authentication UI components for Next.js with RBAC, OAuth, scope-based multi-tenancy, and invitations",
   "keywords": [
     "authentication",
@@ -261,7 +261,7 @@
     "hazo_logs": "^2.0.3",
     "hazo_notify": "^6.1.3",
     "hazo_secure": "^1.1.0",
-    "hazo_ui": "^4.0.0",
+    "hazo_ui": "^4.2.0",
     "input-otp": "^1.4.0",
     "lucide-react": "^0.553.0",
     "next": "^14.0.0",