@umodeapporg/ui 0.15.0 → 0.16.1

package/dist/components/UI/ImageAiAdjust/imageAiVerification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageAiVerification.js","sources":["../../../../src/components/UI/ImageAiAdjust/imageAiVerification.ts"],"sourcesContent":["/** Backend check of the dominant garment colour against the requested one (CIEDE2000). */\nexport interface IImageAiColorCheck {\n  targetHex: string;\n  dominantHex: string;\n  deltaE: number;\n  passed: boolean;\n}\n\n/** What the backend measured on an AI result; every field is advisory, never blocking. */\nexport interface IImageAiVerification {\n  /** Mean normalized difference outside the painted area (whole image without a mask), 0..1. */\n  changeScore: number | null;\n  threshold: number;\n  changedMoreThanRequested: boolean;\n  /** True when pixels outside the mask were restored from the source. */\n  composited: boolean;\n  colorCheck: IImageAiColorCheck | null;\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;\n\nconst finiteOr = <T>(value: unknown, fallback: T): number | T =>\n  typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n\nconst normalizeColorCheck = (value: unknown): IImageAiColorCheck | null => {\n  if (!isRecord(value) || typeof value.passed !== 'boolean') return null;\n  return {\n    targetHex: typeof value.targetHex === 'string' ? value.targetHex : '',\n    dominantHex: typeof value.dominantHex === 'string' ? value.dominantHex : '',\n    deltaE: finiteOr(value.deltaE, 0),\n    passed: value.passed,\n  };\n};\n\n/** Coerces whatever the host received into the verification shape, or null when absent/garbled. */\nexport const normalizeImageAiVerification = (value: unknown): IImageAiVerification | null => {\n  if (!isRecord(value)) return null;\n  return {\n    changeScore: finiteOr(value.changeScore, null),\n    threshold: finiteOr(value.threshold, 0),\n    changedMoreThanRequested: value.changedMoreThanRequested === true,\n    composited: value.composited === true,\n    colorCheck: normalizeColorCheck(value.colorCheck),\n  };\n};\n"],"names":[],"mappings":"AAmBA,MAAM,WAAW,CAAC,UAAqD,OAAO,UAAU,YAAY,UAAU;AAE9G,MAAM,WAAW,CAAI,OAAgB,aACnC,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,IAAI,QAAQ;AAEhE,MAAM,sBAAsB,CAAC,UAA8C;AACzE,MAAI,CAAC,SAAS,KAAK,KAAK,OAAO,MAAM,WAAW,UAAW,QAAO;AAClE,SAAO;AAAA,IACL,WAAW,OAAO,MAAM,cAAc,WAAW,MAAM,YAAY;AAAA,IACnE,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc;AAAA,IACzE,QAAQ,SAAS,MAAM,QAAQ,CAAC;AAAA,IAChC,QAAQ,MAAM;AAAA,EAAA;AAElB;AAGO,MAAM,+BAA+B,CAAC,UAAgD;AAC3F,MAAI,CAAC,SAAS,KAAK,EAAG,QAAO;AAC7B,SAAO;AAAA,IACL,aAAa,SAAS,MAAM,aAAa,IAAI;AAAA,IAC7C,WAAW,SAAS,MAAM,WAAW,CAAC;AAAA,IACtC,0BAA0B,MAAM,6BAA6B;AAAA,IAC7D,YAAY,MAAM,eAAe;AAAA,IACjC,YAAY,oBAAoB,MAAM,UAAU;AAAA,EAAA;AAEpD;"}

package/dist/components/UI/ImageAiAdjust/useImageAiAdjust.d.ts

@@ -1,11 +1,30 @@
+import { IImageAiVerification } from './imageAiVerification';
+export type { IImageAiColorCheck, IImageAiVerification } from './imageAiVerification';
+/** Matches the backend limit for the adjustment instructions. */
+export declare const IMAGE_AI_ADJUST_MAX_INSTRUCTIONS = 2000;
+/**
+ * An adjuster may reject with an error carrying `displayMessage`: a short reason the host has
+ * already vetted as safe to show (for example why the model refused). Anything else stays generic.
+ */
+export interface IImageAiAdjustDisplayableError {
+    displayMessage: string;
+}
+export declare const getImageAiAdjustDisplayMessage: (error: unknown) => string | null;
 export interface IImageAiAdjustRequest {
-    /** The current image, already resized for transport. */
+    /** The current image at full resolution, only re-encoded when it exceeds the upload budget. */
     baseImage: File;
     instructions: string;
     productId?: string;
+    /** PNG at the source's natural size: white = the only area that may change, black = keep. */
+    mask?: File;
 }
 export interface IImageAiAdjustResult {
     imageUrl: string;
+    /** Present when the host logs generations; enables the approve/discard review. */
+    generationId?: string;
+    costUsd?: number;
+    /** Backend checks on the result; a warning is shown when it changed more than asked. */
+    verification?: IImageAiVerification | null;
 }
 /** The host decides which AI backend serves the adjustment; the UI only knows this contract. */
 export type TImageAiAdjuster = (request: IImageAiAdjustRequest, signal: AbortSignal) => Promise<IImageAiAdjustResult>;
@@ -14,11 +33,15 @@ export interface IUseImageAiAdjustParams {
     imageName?: string;
     productId?: string;
     adjustImage: TImageAiAdjuster;
+    /** Optional painted region; sent with the request only when present. */
+    mask?: File | null;
 }
 export interface IUseImageAiAdjust {
     instructions: string;
     setInstructions: (value: string) => void;
     resultUrl: string | null;
+    resultGenerationId: string | null;
+    resultVerification: IImageAiVerification | null;
     isGenerating: boolean;
     canGenerate: boolean;
     generate: () => Promise<void>;
@@ -26,4 +49,4 @@ export interface IUseImageAiAdjust {
     discardResult: () => void;
     buildResultFile: () => Promise<File>;
 }
-export declare const useImageAiAdjust: ({ imageUrl, imageName, productId, adjustImage, }: IUseImageAiAdjustParams) => IUseImageAiAdjust;
+export declare const useImageAiAdjust: ({ imageUrl, imageName, productId, adjustImage, mask, }: IUseImageAiAdjustParams) => IUseImageAiAdjust;

package/dist/components/UI/ImageAiAdjust/useImageAiAdjust.js

@@ -1,26 +1,34 @@
 import { useRef, useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { fileFromUrl, resizeImageFile } from "../../../helpers/imageFile.js";
+import { fileFromUrl, imageExtensionForType, fitImageToUploadBudget } from "../../../helpers/imageFile.js";
 import { uiLogger } from "../../../helpers/uiLogger.js";
 import { useNotification } from "../../../hooks/useNotification.js";
-const ADJUSTED_IMAGE_MAX_DIMENSION = 1600;
-const ADJUSTED_IMAGE_QUALITY = 0.9;
+import { normalizeImageAiVerification } from "./imageAiVerification.js";
+const IMAGE_AI_ADJUST_MAX_INSTRUCTIONS = 2e3;
 const isAbortError = (error) => error instanceof DOMException && error.name === "AbortError";
-const adjustedFileName = (imageName) => {
+const getImageAiAdjustDisplayMessage = (error) => {
+  if (typeof error !== "object" || error === null || !("displayMessage" in error)) return null;
+  const { displayMessage } = error;
+  return typeof displayMessage === "string" && displayMessage.trim() ? displayMessage.trim() : null;
+};
+const adjustedFileName = (imageName, type) => {
   const base = (imageName ?? "image").replace(/\.[^.]+$/, "") || "image";
-  return `${base}-ia.jpg`;
+  return `${base}-ia.${imageExtensionForType(type)}`;
 };
 const useImageAiAdjust = ({
   imageUrl,
   imageName,
   productId,
-  adjustImage
+  adjustImage,
+  mask
 }) => {
   const { t } = useTranslation("ui");
   const { notify } = useNotification();
   const abortRef = useRef(null);
   const [instructions, setInstructions] = useState("");
   const [resultUrl, setResultUrl] = useState(null);
+  const [resultGenerationId, setResultGenerationId] = useState(null);
+  const [resultVerification, setResultVerification] = useState(null);
   const [isGenerating, setIsGenerating] = useState(false);
   useEffect(
     () => () => {
@@ -32,46 +40,61 @@ const useImageAiAdjust = ({
   const cancel = useCallback(() => {
     abortRef.current?.abort();
   }, []);
-  const discardResult = useCallback(() => setResultUrl(null), []);
+  const discardResult = useCallback(() => {
+    setResultUrl(null);
+    setResultGenerationId(null);
+    setResultVerification(null);
+  }, []);
   const generate = useCallback(async () => {
     const prompt = instructions.trim();
-    if (!prompt || isGenerating) return;
+    if (!prompt || prompt.length > IMAGE_AI_ADJUST_MAX_INSTRUCTIONS || isGenerating) return;
     abortRef.current?.abort();
     const controller = new AbortController();
     abortRef.current = controller;
     setIsGenerating(true);
     try {
-      const baseFile = await fileFromUrl(imageUrl, "base-image.jpg", controller.signal);
+      const fetched = await fileFromUrl(imageUrl, "base-image", controller.signal);
       if (controller.signal.aborted) return;
-      const baseImage = await resizeImageFile(baseFile);
+      const baseFile = new File([fetched], `base-image.${imageExtensionForType(fetched.type)}`, { type: fetched.type });
+      const baseImage = await fitImageToUploadBudget(baseFile);
       if (controller.signal.aborted) return;
-      const response = await adjustImage({ baseImage, instructions: prompt, productId }, controller.signal);
+      const request = { baseImage, instructions: prompt, productId };
+      if (mask) request.mask = mask;
+      const response = await adjustImage(request, controller.signal);
       if (controller.signal.aborted) return;
       setResultUrl(response.imageUrl);
+      setResultGenerationId(
+        typeof response.generationId === "string" && response.generationId ? response.generationId : null
+      );
+      setResultVerification(normalizeImageAiVerification(response.verification));
     } catch (error) {
-      if (isAbortError(error)) return;
+      if (isAbortError(error) || controller.signal.aborted) return;
       uiLogger.error("Failed to adjust the image with AI", error);
-      notify({ message: t("imageAiAdjust.errorGenerate"), type: "error" });
+      const reason = getImageAiAdjustDisplayMessage(error);
+      notify({
+        message: reason ? t("imageAiAdjust.errorRefused", { reason }) : t("imageAiAdjust.errorGenerate"),
+        type: "error"
+      });
     } finally {
       if (abortRef.current === controller) {
         abortRef.current = null;
         setIsGenerating(false);
       }
     }
-  }, [instructions, isGenerating, imageUrl, productId, adjustImage, notify, t]);
+  }, [instructions, isGenerating, imageUrl, productId, adjustImage, mask, notify, t]);
   const buildResultFile = useCallback(async () => {
     if (!resultUrl) throw new Error("No adjusted image to save");
-    return resizeImageFile(await fileFromUrl(resultUrl, adjustedFileName(imageName)), {
-      maxDimension: ADJUSTED_IMAGE_MAX_DIMENSION,
-      quality: ADJUSTED_IMAGE_QUALITY
-    });
+    const fetched = await fileFromUrl(resultUrl, "adjusted-image");
+    return new File([fetched], adjustedFileName(imageName, fetched.type), { type: fetched.type });
   }, [resultUrl, imageName]);
   return {
     instructions,
     setInstructions,
     resultUrl,
+    resultGenerationId,
+    resultVerification,
     isGenerating,
-    canGenerate: Boolean(instructions.trim()) && !isGenerating,
+    canGenerate: Boolean(instructions.trim()) && instructions.trim().length <= IMAGE_AI_ADJUST_MAX_INSTRUCTIONS && !isGenerating,
     generate,
     cancel,
     discardResult,
@@ -79,6 +102,8 @@ const useImageAiAdjust = ({
   };
 };
 export {
+  IMAGE_AI_ADJUST_MAX_INSTRUCTIONS,
+  getImageAiAdjustDisplayMessage,
   useImageAiAdjust
 };
 //# sourceMappingURL=useImageAiAdjust.js.map

package/dist/components/UI/ImageAiAdjust/useImageAiAdjust.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageAiAdjust.js","sources":["../../../../src/components/UI/ImageAiAdjust/useImageAiAdjust.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { fileFromUrl, resizeImageFile } from '@/helpers/imageFile';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useNotification } from '@/hooks/useNotification';\n\nconst ADJUSTED_IMAGE_MAX_DIMENSION = 1600;\nconst ADJUSTED_IMAGE_QUALITY = 0.9;\n\nconst isAbortError = (error: unknown): boolean => error instanceof DOMException && error.name === 'AbortError';\n\nexport interface IImageAiAdjustRequest {\n  /** The current image, already resized for transport. */\n  baseImage: File;\n  instructions: string;\n  productId?: string;\n}\n\nexport interface IImageAiAdjustResult {\n  imageUrl: string;\n}\n\n/** The host decides which AI backend serves the adjustment; the UI only knows this contract. */\nexport type TImageAiAdjuster = (request: IImageAiAdjustRequest, signal: AbortSignal) => Promise<IImageAiAdjustResult>;\n\nexport interface IUseImageAiAdjustParams {\n  imageUrl: string;\n  imageName?: string;\n  productId?: string;\n  adjustImage: TImageAiAdjuster;\n}\n\nexport interface IUseImageAiAdjust {\n  instructions: string;\n  setInstructions: (value: string) => void;\n  resultUrl: string | null;\n  isGenerating: boolean;\n  canGenerate: boolean;\n  generate: () => Promise<void>;\n  cancel: () => void;\n  discardResult: () => void;\n  buildResultFile: () => Promise<File>;\n}\n\nconst adjustedFileName = (imageName: string | undefined): string => {\n  const base = (imageName ?? 'image').replace(/\\.[^.]+$/, '') || 'image';\n  return `${base}-ia.jpg`;\n};\n\nexport const useImageAiAdjust = ({\n  imageUrl,\n  imageName,\n  productId,\n  adjustImage,\n}: IUseImageAiAdjustParams): IUseImageAiAdjust => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n\n  const abortRef = useRef<AbortController | null>(null);\n  const [instructions, setInstructions] = useState('');\n  const [resultUrl, setResultUrl] = useState<string | null>(null);\n  const [isGenerating, setIsGenerating] = useState(false);\n\n  // Closing the dialog mid-generation would leave an orphan request holding the connection.\n  useEffect(\n    () => () => {\n      abortRef.current?.abort();\n      abortRef.current = null;\n    },\n    [],\n  );\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const discardResult = useCallback(() => setResultUrl(null), []);\n\n  const generate = useCallback(async () => {\n    const prompt = instructions.trim();\n    if (!prompt || isGenerating) return;\n\n    abortRef.current?.abort();\n    const controller = new AbortController();\n    abortRef.current = controller;\n    setIsGenerating(true);\n\n    try {\n      const baseFile = await fileFromUrl(imageUrl, 'base-image.jpg', controller.signal);\n      if (controller.signal.aborted) return;\n\n      const baseImage = await resizeImageFile(baseFile);\n      if (controller.signal.aborted) return;\n\n      const response = await adjustImage({ baseImage, instructions: prompt, productId }, controller.signal);\n      if (controller.signal.aborted) return;\n\n      setResultUrl(response.imageUrl);\n    } catch (error) {\n      if (isAbortError(error)) return;\n      uiLogger.error('Failed to adjust the image with AI', error);\n      notify({ message: t('imageAiAdjust.errorGenerate'), type: 'error' });\n    } finally {\n      if (abortRef.current === controller) {\n        abortRef.current = null;\n        setIsGenerating(false);\n      }\n    }\n  }, [instructions, isGenerating, imageUrl, productId, adjustImage, notify, t]);\n\n  const buildResultFile = useCallback(async () => {\n    if (!resultUrl) throw new Error('No adjusted image to save');\n\n    return resizeImageFile(await fileFromUrl(resultUrl, adjustedFileName(imageName)), {\n      maxDimension: ADJUSTED_IMAGE_MAX_DIMENSION,\n      quality: ADJUSTED_IMAGE_QUALITY,\n    });\n  }, [resultUrl, imageName]);\n\n  return {\n    instructions,\n    setInstructions,\n    resultUrl,\n    isGenerating,\n    canGenerate: Boolean(instructions.trim()) && !isGenerating,\n    generate,\n    cancel,\n    discardResult,\n    buildResultFile,\n  };\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,+BAA+B;AACrC,MAAM,yBAAyB;AAE/B,MAAM,eAAe,CAAC,UAA4B,iBAAiB,gBAAgB,MAAM,SAAS;AAmClG,MAAM,mBAAmB,CAAC,cAA0C;AAClE,QAAM,QAAQ,aAAa,SAAS,QAAQ,YAAY,EAAE,KAAK;AAC/D,SAAO,GAAG,IAAI;AAChB;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,OAAA,IAAW,gBAAA;AAEnB,QAAM,WAAW,OAA+B,IAAI;AACpD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAGtD;AAAA,IACE,MAAM,MAAM;AACV,eAAS,SAAS,MAAA;AAClB,eAAS,UAAU;AAAA,IACrB;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,SAAS,YAAY,MAAM;AAC/B,aAAS,SAAS,MAAA;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,QAAM,gBAAgB,YAAY,MAAM,aAAa,IAAI,GAAG,CAAA,CAAE;AAE9D,QAAM,WAAW,YAAY,YAAY;AACvC,UAAM,SAAS,aAAa,KAAA;AAC5B,QAAI,CAAC,UAAU,aAAc;AAE7B,aAAS,SAAS,MAAA;AAClB,UAAM,aAAa,IAAI,gBAAA;AACvB,aAAS,UAAU;AACnB,oBAAgB,IAAI;AAEpB,QAAI;AACF,YAAM,WAAW,MAAM,YAAY,UAAU,kBAAkB,WAAW,MAAM;AAChF,UAAI,WAAW,OAAO,QAAS;AAE/B,YAAM,YAAY,MAAM,gBAAgB,QAAQ;AAChD,UAAI,WAAW,OAAO,QAAS;AAE/B,YAAM,WAAW,MAAM,YAAY,EAAE,WAAW,cAAc,QAAQ,UAAA,GAAa,WAAW,MAAM;AACpG,UAAI,WAAW,OAAO,QAAS;AAE/B,mBAAa,SAAS,QAAQ;AAAA,IAChC,SAAS,OAAO;AACd,UAAI,aAAa,KAAK,EAAG;AACzB,eAAS,MAAM,sCAAsC,KAAK;AAC1D,aAAO,EAAE,SAAS,EAAE,6BAA6B,GAAG,MAAM,SAAS;AAAA,IACrE,UAAA;AACE,UAAI,SAAS,YAAY,YAAY;AACnC,iBAAS,UAAU;AACnB,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,cAAc,UAAU,WAAW,aAAa,QAAQ,CAAC,CAAC;AAE5E,QAAM,kBAAkB,YAAY,YAAY;AAC9C,QAAI,CAAC,UAAW,OAAM,IAAI,MAAM,2BAA2B;AAE3D,WAAO,gBAAgB,MAAM,YAAY,WAAW,iBAAiB,SAAS,CAAC,GAAG;AAAA,MAChF,cAAc;AAAA,MACd,SAAS;AAAA,IAAA,CACV;AAAA,EACH,GAAG,CAAC,WAAW,SAAS,CAAC;AAEzB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,QAAQ,aAAa,KAAA,CAAM,KAAK,CAAC;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useImageAiAdjust.js","sources":["../../../../src/components/UI/ImageAiAdjust/useImageAiAdjust.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { fileFromUrl, fitImageToUploadBudget, imageExtensionForType } from '@/helpers/imageFile';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useNotification } from '@/hooks/useNotification';\n\nimport { IImageAiVerification, normalizeImageAiVerification } from './imageAiVerification';\n\nexport type { IImageAiColorCheck, IImageAiVerification } from './imageAiVerification';\n\n/** Matches the backend limit for the adjustment instructions. */\nexport const IMAGE_AI_ADJUST_MAX_INSTRUCTIONS = 2000;\n\nconst isAbortError = (error: unknown): boolean => error instanceof DOMException && error.name === 'AbortError';\n\n/**\n * An adjuster may reject with an error carrying `displayMessage`: a short reason the host has\n * already vetted as safe to show (for example why the model refused). Anything else stays generic.\n */\nexport interface IImageAiAdjustDisplayableError {\n  displayMessage: string;\n}\n\nexport const getImageAiAdjustDisplayMessage = (error: unknown): string | null => {\n  if (typeof error !== 'object' || error === null || !('displayMessage' in error)) return null;\n  const { displayMessage } = error as Partial<IImageAiAdjustDisplayableError>;\n  return typeof displayMessage === 'string' && displayMessage.trim() ? displayMessage.trim() : null;\n};\n\nexport interface IImageAiAdjustRequest {\n  /** The current image at full resolution, only re-encoded when it exceeds the upload budget. */\n  baseImage: File;\n  instructions: string;\n  productId?: string;\n  /** PNG at the source's natural size: white = the only area that may change, black = keep. */\n  mask?: File;\n}\n\nexport interface IImageAiAdjustResult {\n  imageUrl: string;\n  /** Present when the host logs generations; enables the approve/discard review. */\n  generationId?: string;\n  costUsd?: number;\n  /** Backend checks on the result; a warning is shown when it changed more than asked. */\n  verification?: IImageAiVerification | null;\n}\n\n/** The host decides which AI backend serves the adjustment; the UI only knows this contract. */\nexport type TImageAiAdjuster = (request: IImageAiAdjustRequest, signal: AbortSignal) => Promise<IImageAiAdjustResult>;\n\nexport interface IUseImageAiAdjustParams {\n  imageUrl: string;\n  imageName?: string;\n  productId?: string;\n  adjustImage: TImageAiAdjuster;\n  /** Optional painted region; sent with the request only when present. */\n  mask?: File | null;\n}\n\nexport interface IUseImageAiAdjust {\n  instructions: string;\n  setInstructions: (value: string) => void;\n  resultUrl: string | null;\n  resultGenerationId: string | null;\n  resultVerification: IImageAiVerification | null;\n  isGenerating: boolean;\n  canGenerate: boolean;\n  generate: () => Promise<void>;\n  cancel: () => void;\n  discardResult: () => void;\n  buildResultFile: () => Promise<File>;\n}\n\nconst adjustedFileName = (imageName: string | undefined, type: string): string => {\n  const base = (imageName ?? 'image').replace(/\\.[^.]+$/, '') || 'image';\n  return `${base}-ia.${imageExtensionForType(type)}`;\n};\n\nexport const useImageAiAdjust = ({\n  imageUrl,\n  imageName,\n  productId,\n  adjustImage,\n  mask,\n}: IUseImageAiAdjustParams): IUseImageAiAdjust => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n\n  const abortRef = useRef<AbortController | null>(null);\n  const [instructions, setInstructions] = useState('');\n  const [resultUrl, setResultUrl] = useState<string | null>(null);\n  const [resultGenerationId, setResultGenerationId] = useState<string | null>(null);\n  const [resultVerification, setResultVerification] = useState<IImageAiVerification | null>(null);\n  const [isGenerating, setIsGenerating] = useState(false);\n\n  // Closing the dialog mid-generation would leave an orphan request holding the connection.\n  useEffect(\n    () => () => {\n      abortRef.current?.abort();\n      abortRef.current = null;\n    },\n    [],\n  );\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const discardResult = useCallback(() => {\n    setResultUrl(null);\n    setResultGenerationId(null);\n    setResultVerification(null);\n  }, []);\n\n  const generate = useCallback(async () => {\n    const prompt = instructions.trim();\n    if (!prompt || prompt.length > IMAGE_AI_ADJUST_MAX_INSTRUCTIONS || isGenerating) return;\n\n    abortRef.current?.abort();\n    const controller = new AbortController();\n    abortRef.current = controller;\n    setIsGenerating(true);\n\n    try {\n      const fetched = await fileFromUrl(imageUrl, 'base-image', controller.signal);\n      if (controller.signal.aborted) return;\n\n      const baseFile = new File([fetched], `base-image.${imageExtensionForType(fetched.type)}`, { type: fetched.type });\n      const baseImage = await fitImageToUploadBudget(baseFile);\n      if (controller.signal.aborted) return;\n\n      const request: IImageAiAdjustRequest = { baseImage, instructions: prompt, productId };\n      if (mask) request.mask = mask;\n      const response = await adjustImage(request, controller.signal);\n      if (controller.signal.aborted) return;\n\n      setResultUrl(response.imageUrl);\n      setResultGenerationId(\n        typeof response.generationId === 'string' && response.generationId ? response.generationId : null,\n      );\n      setResultVerification(normalizeImageAiVerification(response.verification));\n    } catch (error) {\n      // Hosts may reject a cancelled request with their own error type (axios CanceledError).\n      if (isAbortError(error) || controller.signal.aborted) return;\n      uiLogger.error('Failed to adjust the image with AI', error);\n      const reason = getImageAiAdjustDisplayMessage(error);\n      notify({\n        message: reason ? t('imageAiAdjust.errorRefused', { reason }) : t('imageAiAdjust.errorGenerate'),\n        type: 'error',\n      });\n    } finally {\n      if (abortRef.current === controller) {\n        abortRef.current = null;\n        setIsGenerating(false);\n      }\n    }\n  }, [instructions, isGenerating, imageUrl, productId, adjustImage, mask, notify, t]);\n\n  const buildResultFile = useCallback(async () => {\n    if (!resultUrl) throw new Error('No adjusted image to save');\n\n    // Kept byte for byte: re-encoding would throw away the quality the adjustment preserved.\n    const fetched = await fileFromUrl(resultUrl, 'adjusted-image');\n    return new File([fetched], adjustedFileName(imageName, fetched.type), { type: fetched.type });\n  }, [resultUrl, imageName]);\n\n  return {\n    instructions,\n    setInstructions,\n    resultUrl,\n    resultGenerationId,\n    resultVerification,\n    isGenerating,\n    canGenerate:\n      Boolean(instructions.trim()) && instructions.trim().length <= IMAGE_AI_ADJUST_MAX_INSTRUCTIONS && !isGenerating,\n    generate,\n    cancel,\n    discardResult,\n    buildResultFile,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageMaskPainter/index.d.ts

@@ -0,0 +1,19 @@
+export type { TMaskBrushMode } from './maskStrokes';
+/** Brush diameter in on-screen pixels; converted to natural pixels per stroke. */
+export declare const IMAGE_MASK_BRUSH_MIN = 8;
+export declare const IMAGE_MASK_BRUSH_MAX = 96;
+export interface IImageMaskPainterProps {
+    imageUrl: string;
+    /**
+     * Called after every stroke, undo and clear with a PNG at the image's natural resolution
+     * (white = painted, black = untouched), or null when nothing is painted.
+     */
+    onMaskChange: (mask: File | null) => void;
+    disabled?: boolean;
+    maskFileName?: string;
+    /** Sizes the image; defaults to fitting a dialog preview. */
+    imageClassName?: string;
+    className?: string;
+}
+declare const ImageMaskPainter: React.FC<IImageMaskPainterProps>;
+export default ImageMaskPainter;

package/dist/components/UI/ImageMaskPainter/index.js

@@ -0,0 +1,267 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledSlider from "../ControlledSlider.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { readThemeToken } from "../../../helpers/themeTokens.js";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { useResolvedTheme } from "../../../hooks/useResolvedTheme.js";
+import { redrawStrokes, overlayHasPaint, exportMaskFile, drawStrokeTail } from "./maskStrokes.js";
+const IMAGE_MASK_BRUSH_MIN = 8;
+const IMAGE_MASK_BRUSH_MAX = 96;
+const DEFAULT_BRUSH_SIZE = 32;
+const ImageMaskPainter = ({
+  imageUrl,
+  onMaskChange,
+  disabled = false,
+  maskFileName = "mask.png",
+  imageClassName,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const resolvedTheme = useResolvedTheme();
+  const canvasRef = useRef(null);
+  const cursorRef = useRef(null);
+  const strokesRef = useRef([]);
+  const activeStrokeRef = useRef(null);
+  const onMaskChangeRef = useRef(onMaskChange);
+  const emitSequenceRef = useRef(0);
+  const [loadedUrl, setLoadedUrl] = useState(null);
+  const ready = loadedUrl === imageUrl;
+  const [mode, setMode] = useState("paint");
+  const [brushSize, setBrushSize] = useState(DEFAULT_BRUSH_SIZE);
+  const [strokeCount, setStrokeCount] = useState(0);
+  useEffect(() => {
+    onMaskChangeRef.current = onMaskChange;
+  }, [onMaskChange]);
+  const overlayColor = useCallback(() => readThemeToken("brand"), []);
+  const getContext = useCallback(() => canvasRef.current?.getContext("2d") ?? null, []);
+  const repaint = useCallback(() => {
+    const context = getContext();
+    if (context) redrawStrokes(context, strokesRef.current, overlayColor());
+  }, [getContext, overlayColor]);
+  useEffect(() => {
+    if (ready) repaint();
+  }, [ready, resolvedTheme, repaint]);
+  const emitMask = useCallback(async () => {
+    const sequence = ++emitSequenceRef.current;
+    const canvas = canvasRef.current;
+    try {
+      const mask = canvas && overlayHasPaint(canvas) ? await exportMaskFile(canvas, maskFileName) : null;
+      if (sequence === emitSequenceRef.current) onMaskChangeRef.current(mask);
+    } catch (error) {
+      uiLogger.error("Failed to export the image mask", error);
+      if (sequence === emitSequenceRef.current) onMaskChangeRef.current(null);
+    }
+  }, [maskFileName]);
+  const handleImageLoad = (event) => {
+    const canvas = canvasRef.current;
+    const { naturalWidth, naturalHeight } = event.currentTarget;
+    if (!canvas || !naturalWidth || !naturalHeight) return;
+    canvas.width = naturalWidth;
+    canvas.height = naturalHeight;
+    strokesRef.current = [];
+    activeStrokeRef.current = null;
+    setStrokeCount(0);
+    setLoadedUrl(imageUrl);
+  };
+  const toNaturalPoint = (event) => {
+    const canvas = event.currentTarget;
+    const rect = canvas.getBoundingClientRect();
+    const scale = rect.width > 0 ? canvas.width / rect.width : 1;
+    return {
+      point: { x: (event.clientX - rect.left) * scale, y: (event.clientY - rect.top) * scale },
+      scale
+    };
+  };
+  const moveCursor = (event) => {
+    const cursor = cursorRef.current;
+    if (!cursor) return;
+    if (event.pointerType !== "mouse") {
+      cursor.style.opacity = "0";
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    cursor.style.opacity = "1";
+    cursor.style.transform = `translate(${event.clientX - rect.left - brushSize / 2}px, ${event.clientY - rect.top - brushSize / 2}px)`;
+  };
+  const hideCursor = () => {
+    if (cursorRef.current) cursorRef.current.style.opacity = "0";
+  };
+  const handlePointerDown = (event) => {
+    if (disabled || !ready || activeStrokeRef.current) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const context = getContext();
+    if (!context) return;
+    event.preventDefault();
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    const { point, scale } = toNaturalPoint(event);
+    const stroke = { mode, size: Math.max(1, brushSize * scale), points: [point] };
+    activeStrokeRef.current = { pointerId: event.pointerId, stroke };
+    drawStrokeTail(context, stroke, overlayColor());
+  };
+  const handlePointerMove = (event) => {
+    moveCursor(event);
+    const active = activeStrokeRef.current;
+    if (!active || active.pointerId !== event.pointerId) return;
+    const context = getContext();
+    if (!context) return;
+    active.stroke.points.push(toNaturalPoint(event).point);
+    drawStrokeTail(context, active.stroke, overlayColor());
+  };
+  const finishStroke = (event) => {
+    const active = activeStrokeRef.current;
+    if (!active || active.pointerId !== event.pointerId) return;
+    activeStrokeRef.current = null;
+    strokesRef.current = [...strokesRef.current, active.stroke];
+    setStrokeCount(strokesRef.current.length);
+    void emitMask();
+  };
+  const handleUndo = () => {
+    if (strokesRef.current.length === 0) return;
+    strokesRef.current = strokesRef.current.slice(0, -1);
+    setStrokeCount(strokesRef.current.length);
+    repaint();
+    void emitMask();
+  };
+  const handleClear = () => {
+    if (strokesRef.current.length === 0) return;
+    strokesRef.current = [];
+    setStrokeCount(0);
+    repaint();
+    void emitMask();
+  };
+  const controlsDisabled = disabled || !ready;
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex min-w-0 flex-col gap-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          size: "sm",
+          variant: mode === "paint" ? "filled" : "outlined",
+          "aria-pressed": mode === "paint",
+          disabled: controlsDisabled,
+          onClick: () => setMode("paint"),
+          className: "flex items-center gap-x-1.5 normal-case",
+          children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: "brush", size: 14 }),
+            t("imageMaskPainter.paint")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          size: "sm",
+          variant: mode === "erase" ? "filled" : "outlined",
+          "aria-pressed": mode === "erase",
+          disabled: controlsDisabled,
+          onClick: () => setMode("erase"),
+          className: "flex items-center gap-x-1.5 normal-case",
+          children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: "ink_eraser", size: 14 }),
+            t("imageMaskPainter.erase")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { className: "flex min-w-32 flex-1 items-center gap-x-2 text-xs text-foreground-muted", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: t("imageMaskPainter.brushSize") }),
+        /* @__PURE__ */ jsx(
+          ControlledSlider,
+          {
+            value: brushSize,
+            min: IMAGE_MASK_BRUSH_MIN,
+            max: IMAGE_MASK_BRUSH_MAX,
+            step: 2,
+            disabled: controlsDisabled,
+            label: t("imageMaskPainter.brushSize"),
+            onChange: setBrushSize
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          size: "sm",
+          variant: "text",
+          tone: "neutral",
+          disabled: controlsDisabled || strokeCount === 0,
+          onClick: handleUndo,
+          className: "flex items-center gap-x-1.5 normal-case",
+          children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: "undo", size: 14 }),
+            t("imageMaskPainter.undo")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          size: "sm",
+          variant: "text",
+          tone: "neutral",
+          disabled: controlsDisabled || strokeCount === 0,
+          onClick: handleClear,
+          className: "flex items-center gap-x-1.5 normal-case",
+          children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: "layers_clear", size: 14 }),
+            t("imageMaskPainter.clear")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-xl bg-ink/95 p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex max-w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: "",
+          draggable: false,
+          onLoad: handleImageLoad,
+          className: classNames(
+            "block select-none rounded-lg object-contain",
+            imageClassName ?? "max-h-[38vh] w-auto max-w-full"
+          )
+        },
+        imageUrl
+      ),
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          role: "img",
+          "aria-label": t("imageMaskPainter.surfaceLabel"),
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: finishStroke,
+          onPointerCancel: finishStroke,
+          onPointerLeave: hideCursor,
+          className: classNames(
+            "absolute inset-0 size-full touch-none rounded-lg opacity-50",
+            controlsDisabled ? "cursor-not-allowed" : "cursor-crosshair"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: cursorRef,
+          "aria-hidden": true,
+          style: { width: brushSize, height: brushSize },
+          className: "pointer-events-none absolute left-0 top-0 rounded-full border-2 border-brand opacity-0 shadow-sm"
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  IMAGE_MASK_BRUSH_MAX,
+  IMAGE_MASK_BRUSH_MIN,
+  ImageMaskPainter as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UI/ImageMaskPainter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/UI/ImageMaskPainter/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledSlider from '@/components/UI/ControlledSlider';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { readThemeToken } from '@/helpers/themeTokens';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useResolvedTheme } from '@/hooks/useResolvedTheme';\n\nimport {\n  drawStrokeTail,\n  exportMaskFile,\n  IMaskPoint,\n  IMaskStroke,\n  overlayHasPaint,\n  redrawStrokes,\n  TMaskBrushMode,\n} from './maskStrokes';\n\nexport type { TMaskBrushMode } from './maskStrokes';\n\n/** Brush diameter in on-screen pixels; converted to natural pixels per stroke. */\nexport const IMAGE_MASK_BRUSH_MIN = 8;\nexport const IMAGE_MASK_BRUSH_MAX = 96;\nconst DEFAULT_BRUSH_SIZE = 32;\n\nexport interface IImageMaskPainterProps {\n  imageUrl: string;\n  /**\n   * Called after every stroke, undo and clear with a PNG at the image's natural resolution\n   * (white = painted, black = untouched), or null when nothing is painted.\n   */\n  onMaskChange: (mask: File | null) => void;\n  disabled?: boolean;\n  maskFileName?: string;\n  /** Sizes the image; defaults to fitting a dialog preview. */\n  imageClassName?: string;\n  className?: string;\n}\n\nconst ImageMaskPainter: React.FC<IImageMaskPainterProps> = ({\n  imageUrl,\n  onMaskChange,\n  disabled = false,\n  maskFileName = 'mask.png',\n  imageClassName,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const resolvedTheme = useResolvedTheme();\n\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const cursorRef = useRef<HTMLSpanElement | null>(null);\n  const strokesRef = useRef<Array<IMaskStroke>>([]);\n  const activeStrokeRef = useRef<{ pointerId: number; stroke: IMaskStroke } | null>(null);\n  const onMaskChangeRef = useRef(onMaskChange);\n  const emitSequenceRef = useRef(0);\n\n  const [loadedUrl, setLoadedUrl] = useState<string | null>(null);\n  const ready = loadedUrl === imageUrl;\n  const [mode, setMode] = useState<TMaskBrushMode>('paint');\n  const [brushSize, setBrushSize] = useState(DEFAULT_BRUSH_SIZE);\n  const [strokeCount, setStrokeCount] = useState(0);\n\n  useEffect(() => {\n    onMaskChangeRef.current = onMaskChange;\n  }, [onMaskChange]);\n\n  const overlayColor = useCallback(() => readThemeToken('brand'), []);\n\n  const getContext = useCallback(() => canvasRef.current?.getContext('2d') ?? null, []);\n\n  const repaint = useCallback(() => {\n    const context = getContext();\n    if (context) redrawStrokes(context, strokesRef.current, overlayColor());\n  }, [getContext, overlayColor]);\n\n  // The brand token differs per theme; strokes already on screen follow it.\n  useEffect(() => {\n    if (ready) repaint();\n  }, [ready, resolvedTheme, repaint]);\n\n  const emitMask = useCallback(async () => {\n    const sequence = ++emitSequenceRef.current;\n    const canvas = canvasRef.current;\n    try {\n      const mask = canvas && overlayHasPaint(canvas) ? await exportMaskFile(canvas, maskFileName) : null;\n      if (sequence === emitSequenceRef.current) onMaskChangeRef.current(mask);\n    } catch (error) {\n      uiLogger.error('Failed to export the image mask', error);\n      if (sequence === emitSequenceRef.current) onMaskChangeRef.current(null);\n    }\n  }, [maskFileName]);\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    const canvas = canvasRef.current;\n    const { naturalWidth, naturalHeight } = event.currentTarget;\n    if (!canvas || !naturalWidth || !naturalHeight) return;\n    canvas.width = naturalWidth;\n    canvas.height = naturalHeight;\n    strokesRef.current = [];\n    activeStrokeRef.current = null;\n    setStrokeCount(0);\n    setLoadedUrl(imageUrl);\n  };\n\n  const toNaturalPoint = (event: React.PointerEvent<HTMLCanvasElement>): { point: IMaskPoint; scale: number } => {\n    const canvas = event.currentTarget;\n    const rect = canvas.getBoundingClientRect();\n    const scale = rect.width > 0 ? canvas.width / rect.width : 1;\n    return {\n      point: { x: (event.clientX - rect.left) * scale, y: (event.clientY - rect.top) * scale },\n      scale,\n    };\n  };\n\n  const moveCursor = (event: React.PointerEvent<HTMLCanvasElement>) => {\n    const cursor = cursorRef.current;\n    if (!cursor) return;\n    if (event.pointerType !== 'mouse') {\n      cursor.style.opacity = '0';\n      return;\n    }\n    const rect = event.currentTarget.getBoundingClientRect();\n    cursor.style.opacity = '1';\n    cursor.style.transform = `translate(${event.clientX - rect.left - brushSize / 2}px, ${event.clientY - rect.top - brushSize / 2}px)`;\n  };\n\n  const hideCursor = () => {\n    if (cursorRef.current) cursorRef.current.style.opacity = '0';\n  };\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLCanvasElement>) => {\n    if (disabled || !ready || activeStrokeRef.current) return;\n    if (event.pointerType === 'mouse' && event.button !== 0) return;\n    const context = getContext();\n    if (!context) return;\n\n    event.preventDefault();\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // Synthetic events carry no active pointer; drawing still works without capture.\n    }\n    const { point, scale } = toNaturalPoint(event);\n    const stroke: IMaskStroke = { mode, size: Math.max(1, brushSize * scale), points: [point] };\n    activeStrokeRef.current = { pointerId: event.pointerId, stroke };\n    drawStrokeTail(context, stroke, overlayColor());\n  };\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLCanvasElement>) => {\n    moveCursor(event);\n    const active = activeStrokeRef.current;\n    if (!active || active.pointerId !== event.pointerId) return;\n    const context = getContext();\n    if (!context) return;\n\n    active.stroke.points.push(toNaturalPoint(event).point);\n    drawStrokeTail(context, active.stroke, overlayColor());\n  };\n\n  const finishStroke = (event: React.PointerEvent<HTMLCanvasElement>) => {\n    const active = activeStrokeRef.current;\n    if (!active || active.pointerId !== event.pointerId) return;\n    activeStrokeRef.current = null;\n    strokesRef.current = [...strokesRef.current, active.stroke];\n    setStrokeCount(strokesRef.current.length);\n    void emitMask();\n  };\n\n  const handleUndo = () => {\n    if (strokesRef.current.length === 0) return;\n    strokesRef.current = strokesRef.current.slice(0, -1);\n    setStrokeCount(strokesRef.current.length);\n    repaint();\n    void emitMask();\n  };\n\n  const handleClear = () => {\n    if (strokesRef.current.length === 0) return;\n    strokesRef.current = [];\n    setStrokeCount(0);\n    repaint();\n    void emitMask();\n  };\n\n  const controlsDisabled = disabled || !ready;\n\n  return (\n    <div className={classNames('flex min-w-0 flex-col gap-y-2', className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <ControlledButton\n          size=\"sm\"\n          variant={mode === 'paint' ? 'filled' : 'outlined'}\n          aria-pressed={mode === 'paint'}\n          disabled={controlsDisabled}\n          onClick={() => setMode('paint')}\n          className=\"flex items-center gap-x-1.5 normal-case\"\n        >\n          <MaterialSymbol aria-hidden icon=\"brush\" size={14} />\n          {t('imageMaskPainter.paint')}\n        </ControlledButton>\n        <ControlledButton\n          size=\"sm\"\n          variant={mode === 'erase' ? 'filled' : 'outlined'}\n          aria-pressed={mode === 'erase'}\n          disabled={controlsDisabled}\n          onClick={() => setMode('erase')}\n          className=\"flex items-center gap-x-1.5 normal-case\"\n        >\n          <MaterialSymbol aria-hidden icon=\"ink_eraser\" size={14} />\n          {t('imageMaskPainter.erase')}\n        </ControlledButton>\n\n        <label className=\"flex min-w-32 flex-1 items-center gap-x-2 text-xs text-foreground-muted\">\n          <span className=\"shrink-0\">{t('imageMaskPainter.brushSize')}</span>\n          <ControlledSlider\n            value={brushSize}\n            min={IMAGE_MASK_BRUSH_MIN}\n            max={IMAGE_MASK_BRUSH_MAX}\n            step={2}\n            disabled={controlsDisabled}\n            label={t('imageMaskPainter.brushSize')}\n            onChange={setBrushSize}\n          />\n        </label>\n\n        <ControlledButton\n          size=\"sm\"\n          variant=\"text\"\n          tone=\"neutral\"\n          disabled={controlsDisabled || strokeCount === 0}\n          onClick={handleUndo}\n          className=\"flex items-center gap-x-1.5 normal-case\"\n        >\n          <MaterialSymbol aria-hidden icon=\"undo\" size={14} />\n          {t('imageMaskPainter.undo')}\n        </ControlledButton>\n        <ControlledButton\n          size=\"sm\"\n          variant=\"text\"\n          tone=\"neutral\"\n          disabled={controlsDisabled || strokeCount === 0}\n          onClick={handleClear}\n          className=\"flex items-center gap-x-1.5 normal-case\"\n        >\n          <MaterialSymbol aria-hidden icon=\"layers_clear\" size={14} />\n          {t('imageMaskPainter.clear')}\n        </ControlledButton>\n      </div>\n\n      <div className=\"flex items-center justify-center rounded-xl bg-ink/95 p-2\">\n        <div className=\"relative inline-flex max-w-full overflow-hidden\">\n          <img\n            key={imageUrl}\n            src={imageUrl}\n            alt=\"\"\n            draggable={false}\n            onLoad={handleImageLoad}\n            className={classNames(\n              'block select-none rounded-lg object-contain',\n              imageClassName ?? 'max-h-[38vh] w-auto max-w-full',\n            )}\n          />\n          <canvas\n            ref={canvasRef}\n            role=\"img\"\n            aria-label={t('imageMaskPainter.surfaceLabel')}\n            onPointerDown={handlePointerDown}\n            onPointerMove={handlePointerMove}\n            onPointerUp={finishStroke}\n            onPointerCancel={finishStroke}\n            onPointerLeave={hideCursor}\n            className={classNames(\n              'absolute inset-0 size-full touch-none rounded-lg opacity-50',\n              controlsDisabled ? 'cursor-not-allowed' : 'cursor-crosshair',\n            )}\n          />\n          <span\n            ref={cursorRef}\n            aria-hidden\n            style={{ width: brushSize, height: brushSize }}\n            className=\"pointer-events-none absolute left-0 top-0 rounded-full border-2 border-brand opacity-0 shadow-sm\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ImageMaskPainter;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageMaskPainter/maskStrokes.d.ts

@@ -0,0 +1,19 @@
+export type TMaskBrushMode = 'paint' | 'erase';
+export interface IMaskPoint {
+    x: number;
+    y: number;
+}
+/** A stroke in the image's natural pixel space, so the mask never depends on the on-screen size. */
+export interface IMaskStroke {
+    mode: TMaskBrushMode;
+    size: number;
+    points: Array<IMaskPoint>;
+}
+/** Draws the newest segment of a stroke that is still being painted. */
+export declare const drawStrokeTail: (context: CanvasRenderingContext2D, stroke: IMaskStroke, color: string) => void;
+/** Repaints the whole overlay; used after undo, clear and theme changes. */
+export declare const redrawStrokes: (context: CanvasRenderingContext2D, strokes: ReadonlyArray<IMaskStroke>, color: string) => void;
+/** Cheap check on a downscaled copy: thin strokes still leave a non-zero averaged alpha. */
+export declare const overlayHasPaint: (overlay: HTMLCanvasElement) => boolean;
+/** White where the overlay is painted, black elsewhere, at the overlay's (natural) resolution. */
+export declare const exportMaskFile: (overlay: HTMLCanvasElement, fileName: string) => Promise<File | null>;

package/dist/components/UI/ImageMaskPainter/maskStrokes.js

@@ -0,0 +1,71 @@
+const MASK_KEEP = "#000000";
+const MASK_CHANGE = "#ffffff";
+const COVERAGE_SAMPLE = 256;
+const strokeSegment = (context, stroke, from, to) => {
+  context.globalCompositeOperation = stroke.mode === "erase" ? "destination-out" : "source-over";
+  context.lineWidth = stroke.size;
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  context.beginPath();
+  context.moveTo(from.x, from.y);
+  context.lineTo(to.x + (from.x === to.x && from.y === to.y ? 0.01 : 0), to.y);
+  context.stroke();
+};
+const drawStrokeTail = (context, stroke, color) => {
+  const { points } = stroke;
+  if (points.length === 0) return;
+  context.save();
+  context.strokeStyle = color;
+  strokeSegment(context, stroke, points[Math.max(0, points.length - 2)], points[points.length - 1]);
+  context.restore();
+};
+const redrawStrokes = (context, strokes, color) => {
+  context.save();
+  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+  context.strokeStyle = color;
+  strokes.forEach((stroke) => {
+    stroke.points.forEach((point, index) => {
+      strokeSegment(context, stroke, stroke.points[Math.max(0, index - 1)], point);
+    });
+  });
+  context.restore();
+};
+const overlayHasPaint = (overlay) => {
+  if (!overlay.width || !overlay.height) return false;
+  const ratio = Math.min(1, COVERAGE_SAMPLE / Math.max(overlay.width, overlay.height));
+  const sample = document.createElement("canvas");
+  sample.width = Math.max(1, Math.round(overlay.width * ratio));
+  sample.height = Math.max(1, Math.round(overlay.height * ratio));
+  const context = sample.getContext("2d");
+  if (!context) return false;
+  context.drawImage(overlay, 0, 0, sample.width, sample.height);
+  const { data } = context.getImageData(0, 0, sample.width, sample.height);
+  for (let index = 3; index < data.length; index += 4) {
+    if (data[index] > 0) return true;
+  }
+  return false;
+};
+const exportMaskFile = async (overlay, fileName) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = overlay.width;
+  canvas.height = overlay.height;
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  context.fillStyle = MASK_CHANGE;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.globalCompositeOperation = "destination-in";
+  context.drawImage(overlay, 0, 0);
+  context.globalCompositeOperation = "destination-over";
+  context.fillStyle = MASK_KEEP;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  if (!blob) return null;
+  return new File([blob], fileName, { type: "image/png" });
+};
+export {
+  drawStrokeTail,
+  exportMaskFile,
+  overlayHasPaint,
+  redrawStrokes
+};
+//# sourceMappingURL=maskStrokes.js.map