@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,144 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledDialog from "../../Form/ControlledDialog.js";
+import ControlledImage from "../../Form/ControlledImage/index.js";
+import ControlledTextarea from "../../Form/ControlledTextarea.js";
+import LoadingSpinner from "../LoadingSpinner.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { useNotification } from "../../../hooks/useNotification.js";
+import { useImageAiAdjust } from "./useImageAiAdjust.js";
+const ImageAiAdjustDialog = ({
+  open,
+  imageUrl,
+  imageName,
+  productId,
+  adjustImage,
+  onClose,
+  onSave
+}) => {
+  const { t } = useTranslation("ui");
+  const { isTabletDown } = useBreakpoint();
+  const { notify } = useNotification();
+  const [saving, setSaving] = useState(false);
+  const {
+    instructions,
+    setInstructions,
+    resultUrl,
+    isGenerating,
+    canGenerate,
+    generate,
+    cancel,
+    discardResult,
+    buildResultFile
+  } = useImageAiAdjust({ imageUrl, imageName, productId, adjustImage });
+  const handleSave = async () => {
+    if (!resultUrl || saving) return;
+    setSaving(true);
+    try {
+      await onSave(await buildResultFile());
+      onClose();
+    } catch (error) {
+      uiLogger.error("Failed to save the AI adjusted image", error);
+      notify({ message: t("imageAiAdjust.errorSave"), type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const previewClass = "max-h-[38vh] w-auto max-w-full rounded-lg object-contain";
+  return /* @__PURE__ */ jsx(
+    ControlledDialog,
+    {
+      open,
+      size: isTabletDown ? "xxl" : "lg",
+      title: t("imageAiAdjust.title"),
+      subtitle: t("imageAiAdjust.subtitle"),
+      onCancel: onClose,
+      useFooter: false,
+      fitBody: true,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[76vh] flex-col gap-y-3 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs("div", { className: classNames("flex gap-3", isTabletDown ? "flex-col" : "flex-row"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t("imageAiAdjust.original") }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-xl bg-ink/95 p-2", children: /* @__PURE__ */ jsx(ControlledImage, { src: imageUrl, className: previewClass }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t("imageAiAdjust.result") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-h-40 items-center justify-center rounded-xl bg-ink/95 p-2", children: [
+              isGenerating && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-2 p-4", children: [
+                /* @__PURE__ */ jsx(LoadingSpinner, { size: 8, color: "white" }),
+                /* @__PURE__ */ jsx("span", { className: "text-center text-xs text-white", children: t("imageAiAdjust.generating") })
+              ] }),
+              !isGenerating && resultUrl && /* @__PURE__ */ jsx(ControlledImage, { src: resultUrl, className: previewClass }),
+              !isGenerating && !resultUrl && /* @__PURE__ */ jsx("span", { className: "max-w-64 p-4 text-center text-xs text-white/70", children: t("imageAiAdjust.resultHint") })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ControlledTextarea,
+          {
+            resize: "none",
+            value: instructions,
+            rows: 3,
+            disabled: isGenerating || saving,
+            "aria-label": t("imageAiAdjust.promptLabel"),
+            placeholder: t("imageAiAdjust.promptPlaceholder"),
+            onChange: (event) => setInstructions(event.target.value),
+            className: "rounded-xl"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: isGenerating ? /* @__PURE__ */ jsx(ControlledButton, { size: "sm", variant: "outlined", onClick: cancel, className: "normal-case", children: t("actions.cancel") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          resultUrl && /* @__PURE__ */ jsxs(
+            ControlledButton,
+            {
+              size: "sm",
+              variant: "outlined",
+              disabled: saving,
+              onClick: discardResult,
+              className: "flex items-center gap-x-1.5 normal-case",
+              children: [
+                /* @__PURE__ */ jsx(MaterialSymbol, { icon: "refresh", size: 14 }),
+                t("imageAiAdjust.tryAgain")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ControlledButton,
+            {
+              size: "sm",
+              variant: resultUrl ? "outlined" : "filled",
+              disabled: !canGenerate || saving,
+              onClick: generate,
+              className: "flex items-center gap-x-1.5 normal-case",
+              children: [
+                /* @__PURE__ */ jsx(MaterialSymbol, { icon: "auto_fix_high", size: 14 }),
+                t("imageAiAdjust.generate")
+              ]
+            }
+          ),
+          resultUrl && /* @__PURE__ */ jsxs(
+            ControlledButton,
+            {
+              size: "sm",
+              disabled: saving,
+              onClick: handleSave,
+              className: "flex items-center gap-x-1.5 normal-case",
+              children: [
+                saving ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "white" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 14, color: "white" }),
+                t("imageAiAdjust.useResult")
+              ]
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  ImageAiAdjustDialog as default
+};
+//# sourceMappingURL=ImageAiAdjustDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageAiAdjustDialog.js","sources":["../../../../src/components/UI/ImageAiAdjust/ImageAiAdjustDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTextarea from '@/components/Form/ControlledTextarea';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\nimport { useNotification } from '@/hooks/useNotification';\n\nimport { TImageAiAdjuster, useImageAiAdjust } from './useImageAiAdjust';\n\ninterface IImageAiAdjustDialogProps {\n  open: boolean;\n  imageUrl: string;\n  imageName?: string;\n  /** Opcional: quando existe, a geração fica associada ao produto no criAI. */\n  productId?: string;\n  /** Runs the generation; the host decides which AI backend serves it. */\n  adjustImage: TImageAiAdjuster;\n  onClose: () => void;\n  /** Recebe a imagem ajustada; resolver fecha o diálogo, lançar mantém aberto. */\n  onSave: (file: File) => Promise<void> | void;\n}\n\nconst ImageAiAdjustDialog: React.FC<IImageAiAdjustDialogProps> = ({\n  open,\n  imageUrl,\n  imageName,\n  productId,\n  adjustImage,\n  onClose,\n  onSave,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isTabletDown } = useBreakpoint();\n  const { notify } = useNotification();\n\n  const [saving, setSaving] = useState(false);\n  const {\n    instructions,\n    setInstructions,\n    resultUrl,\n    isGenerating,\n    canGenerate,\n    generate,\n    cancel,\n    discardResult,\n    buildResultFile,\n  } = useImageAiAdjust({ imageUrl, imageName, productId, adjustImage });\n\n  const handleSave = async () => {\n    if (!resultUrl || saving) return;\n\n    setSaving(true);\n    try {\n      await onSave(await buildResultFile());\n      onClose();\n    } catch (error) {\n      uiLogger.error('Failed to save the AI adjusted image', error);\n      notify({ message: t('imageAiAdjust.errorSave'), type: 'error' });\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const previewClass = 'max-h-[38vh] w-auto max-w-full rounded-lg object-contain';\n\n  return (\n    <ControlledDialog\n      open={open}\n      size={isTabletDown ? 'xxl' : 'lg'}\n      title={t('imageAiAdjust.title')}\n      subtitle={t('imageAiAdjust.subtitle')}\n      onCancel={onClose}\n      useFooter={false}\n      fitBody\n    >\n      <div className=\"flex max-h-[76vh] flex-col gap-y-3 overflow-y-auto\">\n        <div className={classNames('flex gap-3', isTabletDown ? 'flex-col' : 'flex-row')}>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-y-1.5\">\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {t('imageAiAdjust.original')}\n            </span>\n            <div className=\"flex items-center justify-center rounded-xl bg-ink/95 p-2\">\n              <ControlledImage src={imageUrl} className={previewClass} />\n            </div>\n          </div>\n\n          <div className=\"flex min-w-0 flex-1 flex-col gap-y-1.5\">\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {t('imageAiAdjust.result')}\n            </span>\n            <div className=\"flex min-h-40 items-center justify-center rounded-xl bg-ink/95 p-2\">\n              {isGenerating && (\n                <div className=\"flex flex-col items-center gap-y-2 p-4\">\n                  <LoadingSpinner size={8} color=\"white\" />\n                  <span className=\"text-center text-xs text-white\">{t('imageAiAdjust.generating')}</span>\n                </div>\n              )}\n\n              {!isGenerating && resultUrl && <ControlledImage src={resultUrl} className={previewClass} />}\n\n              {!isGenerating && !resultUrl && (\n                <span className=\"max-w-64 p-4 text-center text-xs text-white/70\">{t('imageAiAdjust.resultHint')}</span>\n              )}\n            </div>\n          </div>\n        </div>\n\n        <ControlledTextarea\n          resize=\"none\"\n          value={instructions}\n          rows={3}\n          disabled={isGenerating || saving}\n          aria-label={t('imageAiAdjust.promptLabel')}\n          placeholder={t('imageAiAdjust.promptPlaceholder')}\n          onChange={(event) => setInstructions(event.target.value)}\n          className=\"rounded-xl\"\n        />\n\n        <div className=\"flex flex-wrap items-center justify-end gap-2\">\n          {isGenerating ? (\n            <ControlledButton size=\"sm\" variant=\"outlined\" onClick={cancel} className=\"normal-case\">\n              {t('actions.cancel')}\n            </ControlledButton>\n          ) : (\n            <>\n              {resultUrl && (\n                <ControlledButton\n                  size=\"sm\"\n                  variant=\"outlined\"\n                  disabled={saving}\n                  onClick={discardResult}\n                  className=\"flex items-center gap-x-1.5 normal-case\"\n                >\n                  <MaterialSymbol icon=\"refresh\" size={14} />\n                  {t('imageAiAdjust.tryAgain')}\n                </ControlledButton>\n              )}\n\n              <ControlledButton\n                size=\"sm\"\n                variant={resultUrl ? 'outlined' : 'filled'}\n                disabled={!canGenerate || saving}\n                onClick={generate}\n                className=\"flex items-center gap-x-1.5 normal-case\"\n              >\n                <MaterialSymbol icon=\"auto_fix_high\" size={14} />\n                {t('imageAiAdjust.generate')}\n              </ControlledButton>\n\n              {resultUrl && (\n                <ControlledButton\n                  size=\"sm\"\n                  disabled={saving}\n                  onClick={handleSave}\n                  className=\"flex items-center gap-x-1.5 normal-case\"\n                >\n                  {saving ? (\n                    <LoadingSpinner size={4} color=\"white\" />\n                  ) : (\n                    <MaterialSymbol icon=\"check\" size={14} color=\"white\" />\n                  )}\n                  {t('imageAiAdjust.useResult')}\n                </ControlledButton>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </ControlledDialog>\n  );\n};\n\nexport default ImageAiAdjustDialog;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+export interface IImageAiAdjustRequest {
+    /** The current image, already resized for transport. */
+    baseImage: File;
+    instructions: string;
+    productId?: string;
+}
+export interface IImageAiAdjustResult {
+    imageUrl: string;
+}
+/** The host decides which AI backend serves the adjustment; the UI only knows this contract. */
+export type TImageAiAdjuster = (request: IImageAiAdjustRequest, signal: AbortSignal) => Promise<IImageAiAdjustResult>;
+export interface IUseImageAiAdjustParams {
+    imageUrl: string;
+    imageName?: string;
+    productId?: string;
+    adjustImage: TImageAiAdjuster;
+}
+export interface IUseImageAiAdjust {
+    instructions: string;
+    setInstructions: (value: string) => void;
+    resultUrl: string | null;
+    isGenerating: boolean;
+    canGenerate: boolean;
+    generate: () => Promise<void>;
+    cancel: () => void;
+    discardResult: () => void;
+    buildResultFile: () => Promise<File>;
+}
+export declare const useImageAiAdjust: ({ imageUrl, imageName, productId, adjustImage, }: IUseImageAiAdjustParams) => IUseImageAiAdjust;

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

@@ -0,0 +1,84 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { fileFromUrl, resizeImageFile } 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;
+const isAbortError = (error) => error instanceof DOMException && error.name === "AbortError";
+const adjustedFileName = (imageName) => {
+  const base = (imageName ?? "image").replace(/\.[^.]+$/, "") || "image";
+  return `${base}-ia.jpg`;
+};
+const useImageAiAdjust = ({
+  imageUrl,
+  imageName,
+  productId,
+  adjustImage
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const abortRef = useRef(null);
+  const [instructions, setInstructions] = useState("");
+  const [resultUrl, setResultUrl] = useState(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  useEffect(
+    () => () => {
+      abortRef.current?.abort();
+      abortRef.current = null;
+    },
+    []
+  );
+  const cancel = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const discardResult = useCallback(() => setResultUrl(null), []);
+  const generate = useCallback(async () => {
+    const prompt = instructions.trim();
+    if (!prompt || 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);
+      if (controller.signal.aborted) return;
+      const baseImage = await resizeImageFile(baseFile);
+      if (controller.signal.aborted) return;
+      const response = await adjustImage({ baseImage, instructions: prompt, productId }, controller.signal);
+      if (controller.signal.aborted) return;
+      setResultUrl(response.imageUrl);
+    } catch (error) {
+      if (isAbortError(error)) return;
+      uiLogger.error("Failed to adjust the image with AI", error);
+      notify({ message: t("imageAiAdjust.errorGenerate"), type: "error" });
+    } finally {
+      if (abortRef.current === controller) {
+        abortRef.current = null;
+        setIsGenerating(false);
+      }
+    }
+  }, [instructions, isGenerating, imageUrl, productId, adjustImage, 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
+    });
+  }, [resultUrl, imageName]);
+  return {
+    instructions,
+    setInstructions,
+    resultUrl,
+    isGenerating,
+    canGenerate: Boolean(instructions.trim()) && !isGenerating,
+    generate,
+    cancel,
+    discardResult,
+    buildResultFile
+  };
+};
+export {
+  useImageAiAdjust
+};
+//# sourceMappingURL=useImageAiAdjust.js.map

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

@@ -0,0 +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;"}

package/dist/components/UI/ImageAnnotator/AnnotationEditor.d.ts

@@ -0,0 +1,12 @@
+import { IAnnotationDocument, IAnnotationSize, TAnnotationElement } from './interfaces/annotationDocument';
+interface IAnnotationEditorProps {
+    baseImage: HTMLImageElement;
+    imageSize: IAnnotationSize;
+    mimeType: string;
+    imageName?: string;
+    initialElements: Array<TAnnotationElement>;
+    onSave: (file: File, document: IAnnotationDocument) => Promise<void> | void;
+    onSaved: () => void;
+}
+declare const AnnotationEditor: React.FC<IAnnotationEditorProps>;
+export default AnnotationEditor;

package/dist/components/UI/ImageAnnotator/AnnotationEditor.js

@@ -0,0 +1,267 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { useNotification } from "../../../hooks/useNotification.js";
+import AnnotationStage from "./canvas/AnnotationStage.js";
+import AnnotationActionBar from "./components/AnnotationActionBar.js";
+import AnnotationElementActions from "./components/AnnotationElementActions.js";
+import AnnotationStyleBar from "./components/AnnotationStyleBar.js";
+import AnnotationTextOverlay from "./components/AnnotationTextOverlay.js";
+import AnnotationToolbar from "./components/AnnotationToolbar.js";
+import { fitStageToViewport } from "./helpers/annotationCanvas.js";
+import { styleFromElement, applyStyleToElement, createImageElement, createTextElement, imageMaxDimension } from "./helpers/annotationElements.js";
+import { exportStageToFile } from "./helpers/annotationExport.js";
+import { useAnnotationDocument } from "./hooks/useAnnotationDocument.js";
+import { useAnnotationShortcuts } from "./hooks/useAnnotationShortcuts.js";
+import { useCoarsePointer } from "./hooks/useCoarsePointer.js";
+import { DEFAULT_ANNOTATION_STYLE } from "./annotationStyle.js";
+const ELEMENT_TOOLS = ["freehand", "line", "arrow", "rectangle", "ellipse", "text", "image"];
+const readFileAsDataUrl = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(String(reader.result));
+  reader.onerror = () => reject(new Error("Could not read the selected image"));
+  reader.readAsDataURL(file);
+});
+const loadNaturalSize = (source) => new Promise((resolve, reject) => {
+  const element = new Image();
+  element.onload = () => resolve({ width: element.naturalWidth, height: element.naturalHeight });
+  element.onerror = () => reject(new Error("Could not decode the selected image"));
+  element.src = source;
+});
+const nextFrame = () => new Promise((resolve) => window.requestAnimationFrame(() => resolve()));
+const AnnotationEditor = ({
+  baseImage,
+  imageSize,
+  mimeType,
+  imageName,
+  initialElements,
+  onSave,
+  onSaved
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const { isTabletDown } = useBreakpoint();
+  const isCoarsePointer = useCoarsePointer();
+  const touch = isCoarsePointer || isTabletDown;
+  const stageRef = useRef(null);
+  const viewportRef = useRef(null);
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  const [tool, setTool] = useState("select");
+  const [style, setStyle] = useState(DEFAULT_ANNOTATION_STYLE);
+  const [editingText, setEditingText] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const controller = useAnnotationDocument(imageSize, initialElements);
+  const { selectedElement, selectedId, updateSelected, addElement, removeElement, updateElement } = controller;
+  useEffect(() => {
+    const node = viewportRef.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (rect) setViewport({ width: rect.width, height: rect.height });
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const fit = useMemo(() => fitStageToViewport(imageSize, viewport), [imageSize, viewport]);
+  useEffect(() => {
+    if (!selectedId) return;
+    setStyle((current) => {
+      const element = controller.elements.find((item) => item.id === selectedId);
+      return element ? styleFromElement(element, current, imageSize) : current;
+    });
+  }, [selectedId]);
+  const handleStyleChange = useCallback(
+    (patch) => {
+      const next = { ...style, ...patch };
+      setStyle(next);
+      if (selectedId) updateSelected((element) => applyStyleToElement(element, next, imageSize));
+    },
+    [style, selectedId, updateSelected, imageSize]
+  );
+  const handleImageStyleChange = useCallback(
+    (patch) => {
+      updateSelected((element) => element.type === "image" ? { ...element, ...patch } : element);
+    },
+    [updateSelected]
+  );
+  const handleTextCommit = useCallback(() => {
+    if (!editingText) return;
+    const trimmed = editingText.value.trim();
+    setEditingText(null);
+    if (!trimmed) {
+      removeElement(editingText.id);
+      return;
+    }
+    updateElement(editingText.id, (element) => element.type === "text" ? { ...element, text: trimmed } : element);
+  }, [editingText, removeElement, updateElement]);
+  const handleToolChange = useCallback(
+    (next) => {
+      handleTextCommit();
+      setTool(next);
+    },
+    [handleTextCommit]
+  );
+  const handleInsertImage = useCallback(
+    async (file) => {
+      try {
+        const source = await readFileAsDataUrl(file);
+        const natural = await loadNaturalSize(source);
+        addElement(createImageElement(source, natural, imageSize));
+        setTool("select");
+      } catch (error) {
+        uiLogger.error("Failed to insert an image into the annotation", error);
+        notify({ message: t("imageAnnotator.imageInsertFailed"), type: "error" });
+      }
+    },
+    [addElement, imageSize, notify, t]
+  );
+  const handleRequestTextEdit = useCallback(
+    (id) => {
+      const element = controller.elements.find((item) => item.id === id);
+      if (element?.type !== "text") return;
+      setTool("select");
+      controller.select(id);
+      setEditingText({ id, value: element.text });
+    },
+    [controller]
+  );
+  const handleTextPlaced = useCallback(
+    (point) => {
+      const element = createTextElement(point, style, imageSize);
+      addElement(element);
+      setTool("select");
+      setEditingText({ id: element.id, value: "" });
+    },
+    [style, imageSize, addElement]
+  );
+  const handleTextCancel = useCallback(() => {
+    if (!editingText) return;
+    const element = controller.elements.find((item) => item.id === editingText.id);
+    setEditingText(null);
+    if (element?.type === "text" && !element.text.trim()) removeElement(editingText.id);
+  }, [editingText, controller.elements, removeElement]);
+  const handleSave = async () => {
+    const stage = stageRef.current;
+    if (!stage || saving) return;
+    setSaving(true);
+    handleTextCommit();
+    controller.select(null);
+    try {
+      await nextFrame();
+      await nextFrame();
+      const file = await exportStageToFile({ stage, imageSize, mimeType, imageName });
+      await onSave(file, controller.document);
+      onSaved();
+    } catch (error) {
+      uiLogger.error("Failed to save annotated image", error);
+      notify({ message: t("imageAnnotator.sendFailed"), type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+  useAnnotationShortcuts({
+    active: !editingText,
+    controller,
+    imageMaxDimension: imageMaxDimension(imageSize),
+    onToolChange: handleToolChange
+  });
+  const activeType = useMemo(() => {
+    if (selectedElement) return selectedElement.type;
+    return ELEMENT_TOOLS.includes(tool) ? tool : null;
+  }, [selectedElement, tool]);
+  const editingElement = useMemo(() => {
+    const element = controller.elements.find((item) => item.id === editingText?.id);
+    return element?.type === "text" ? element : null;
+  }, [controller.elements, editingText?.id]);
+  const elementActions = selectedElement ? /* @__PURE__ */ jsx(
+    AnnotationElementActions,
+    {
+      touch,
+      onReorder: controller.reorderSelected,
+      onDuplicate: controller.duplicateSelected,
+      onDelete: () => selectedId && removeElement(selectedId)
+    }
+  ) : null;
+  const actionBar = /* @__PURE__ */ jsx(
+    AnnotationActionBar,
+    {
+      touch,
+      saving,
+      canUndo: controller.canUndo,
+      canRedo: controller.canRedo,
+      canClear: !controller.isEmpty,
+      canSave: !controller.isEmpty,
+      elementActions: touch ? elementActions : void 0,
+      onUndo: controller.undo,
+      onRedo: controller.redo,
+      onClear: controller.clear,
+      onSave: handleSave
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx(
+      AnnotationToolbar,
+      {
+        tool,
+        touch,
+        actions: touch ? void 0 : actionBar,
+        onToolChange: handleToolChange,
+        onInsertImage: handleInsertImage
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationStyleBar,
+      {
+        style,
+        activeType,
+        selectedElement,
+        touch,
+        elementActions: touch ? void 0 : elementActions,
+        onStyleChange: handleStyleChange,
+        onImageStyleChange: handleImageStyleChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-xl bg-ink/95 p-3",
+        children: fit.width > 1 && /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: fit.width, height: fit.height }, children: [
+          /* @__PURE__ */ jsx(
+            AnnotationStage,
+            {
+              baseImage,
+              imageSize,
+              fit,
+              tool,
+              style,
+              controller,
+              editingTextId: editingText?.id ?? null,
+              stageRef,
+              onRequestTextEdit: handleRequestTextEdit,
+              onTextPlaced: handleTextPlaced
+            }
+          ),
+          editingText && editingElement && /* @__PURE__ */ jsx(
+            AnnotationTextOverlay,
+            {
+              element: editingElement,
+              viewScale: fit.scale,
+              value: editingText.value,
+              onChange: (value) => setEditingText((current) => current ? { ...current, value } : current),
+              onCommit: handleTextCommit,
+              onCancel: handleTextCancel
+            }
+          )
+        ] })
+      }
+    ),
+    touch && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actionBar })
+  ] });
+};
+export {
+  AnnotationEditor as default
+};
+//# sourceMappingURL=AnnotationEditor.js.map

package/dist/components/UI/ImageAnnotator/AnnotationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationEditor.js","sources":["../../../../src/components/UI/ImageAnnotator/AnnotationEditor.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport Konva from 'konva';\nimport { useTranslation } from 'react-i18next';\n\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\nimport { useNotification } from '@/hooks/useNotification';\n\nimport AnnotationStage from './canvas/AnnotationStage';\nimport AnnotationActionBar from './components/AnnotationActionBar';\nimport AnnotationElementActions from './components/AnnotationElementActions';\nimport AnnotationStyleBar from './components/AnnotationStyleBar';\nimport AnnotationTextOverlay from './components/AnnotationTextOverlay';\nimport AnnotationToolbar from './components/AnnotationToolbar';\nimport { fitStageToViewport } from './helpers/annotationCanvas';\nimport {\n  applyStyleToElement,\n  createImageElement,\n  createTextElement,\n  imageMaxDimension,\n  styleFromElement,\n} from './helpers/annotationElements';\nimport { exportStageToFile } from './helpers/annotationExport';\nimport { useAnnotationDocument } from './hooks/useAnnotationDocument';\nimport { useAnnotationShortcuts } from './hooks/useAnnotationShortcuts';\nimport { useCoarsePointer } from './hooks/useCoarsePointer';\nimport {\n  IAnnotationDocument,\n  IAnnotationImageElement,\n  IAnnotationPoint,\n  IAnnotationSize,\n  TAnnotationElement,\n  TAnnotationElementType,\n  TAnnotationTool,\n} from './interfaces/annotationDocument';\nimport { DEFAULT_ANNOTATION_STYLE, IAnnotationStyle } from './annotationStyle';\n\nconst ELEMENT_TOOLS: Array<TAnnotationTool> = ['freehand', 'line', 'arrow', 'rectangle', 'ellipse', 'text', 'image'];\n\ninterface IAnnotationEditorProps {\n  baseImage: HTMLImageElement;\n  imageSize: IAnnotationSize;\n  mimeType: string;\n  imageName?: string;\n  initialElements: Array<TAnnotationElement>;\n  onSave: (file: File, document: IAnnotationDocument) => Promise<void> | void;\n  onSaved: () => void;\n}\n\nconst readFileAsDataUrl = (file: File): Promise<string> =>\n  new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onload = () => resolve(String(reader.result));\n    reader.onerror = () => reject(new Error('Could not read the selected image'));\n    reader.readAsDataURL(file);\n  });\n\nconst loadNaturalSize = (source: string): Promise<IAnnotationSize> =>\n  new Promise((resolve, reject) => {\n    const element = new Image();\n    element.onload = () => resolve({ width: element.naturalWidth, height: element.naturalHeight });\n    element.onerror = () => reject(new Error('Could not decode the selected image'));\n    element.src = source;\n  });\n\nconst nextFrame = (): Promise<void> => new Promise((resolve) => window.requestAnimationFrame(() => resolve()));\n\nconst AnnotationEditor: React.FC<IAnnotationEditorProps> = ({\n  baseImage,\n  imageSize,\n  mimeType,\n  imageName,\n  initialElements,\n  onSave,\n  onSaved,\n}) => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n  const { isTabletDown } = useBreakpoint();\n  const isCoarsePointer = useCoarsePointer();\n  const touch = isCoarsePointer || isTabletDown;\n\n  const stageRef = useRef<Konva.Stage | null>(null);\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n\n  const [viewport, setViewport] = useState<IAnnotationSize>({ width: 0, height: 0 });\n  const [tool, setTool] = useState<TAnnotationTool>('select');\n  const [style, setStyle] = useState<IAnnotationStyle>(DEFAULT_ANNOTATION_STYLE);\n  const [editingText, setEditingText] = useState<{ id: string; value: string } | null>(null);\n  const [saving, setSaving] = useState(false);\n\n  const controller = useAnnotationDocument(imageSize, initialElements);\n  const { selectedElement, selectedId, updateSelected, addElement, removeElement, updateElement } = controller;\n\n  useEffect(() => {\n    const node = viewportRef.current;\n    if (!node) return;\n\n    const observer = new ResizeObserver((entries) => {\n      const rect = entries[0]?.contentRect;\n      if (rect) setViewport({ width: rect.width, height: rect.height });\n    });\n    observer.observe(node);\n\n    return () => observer.disconnect();\n  }, []);\n\n  const fit = useMemo(() => fitStageToViewport(imageSize, viewport), [imageSize, viewport]);\n\n  /** Selecting mirrors the element into the toolbar, so the controls never describe a stale style. */\n  useEffect(() => {\n    if (!selectedId) return;\n    setStyle((current) => {\n      const element = controller.elements.find((item) => item.id === selectedId);\n      return element ? styleFromElement(element, current, imageSize) : current;\n    });\n  }, [selectedId]);\n\n  const handleStyleChange = useCallback(\n    (patch: Partial<IAnnotationStyle>) => {\n      const next = { ...style, ...patch };\n      setStyle(next);\n      if (selectedId) updateSelected((element) => applyStyleToElement(element, next, imageSize));\n    },\n    [style, selectedId, updateSelected, imageSize],\n  );\n\n  const handleImageStyleChange = useCallback(\n    (patch: Partial<IAnnotationImageElement>) => {\n      updateSelected((element) => (element.type === 'image' ? { ...element, ...patch } : element));\n    },\n    [updateSelected],\n  );\n\n  const handleTextCommit = useCallback(() => {\n    if (!editingText) return;\n    const trimmed = editingText.value.trim();\n    setEditingText(null);\n\n    if (!trimmed) {\n      removeElement(editingText.id);\n      return;\n    }\n    updateElement(editingText.id, (element) => (element.type === 'text' ? { ...element, text: trimmed } : element));\n  }, [editingText, removeElement, updateElement]);\n\n  const handleToolChange = useCallback(\n    (next: TAnnotationTool) => {\n      handleTextCommit();\n      setTool(next);\n    },\n    [handleTextCommit],\n  );\n\n  const handleInsertImage = useCallback(\n    async (file: File) => {\n      try {\n        const source = await readFileAsDataUrl(file);\n        const natural = await loadNaturalSize(source);\n        addElement(createImageElement(source, natural, imageSize));\n        setTool('select');\n      } catch (error) {\n        uiLogger.error('Failed to insert an image into the annotation', error);\n        notify({ message: t('imageAnnotator.imageInsertFailed'), type: 'error' });\n      }\n    },\n    [addElement, imageSize, notify, t],\n  );\n\n  const handleRequestTextEdit = useCallback(\n    (id: string) => {\n      const element = controller.elements.find((item) => item.id === id);\n      if (element?.type !== 'text') return;\n      setTool('select');\n      controller.select(id);\n      setEditingText({ id, value: element.text });\n    },\n    [controller],\n  );\n\n  /**\n   * The element is created here, not in the stage: looking it up right after `addElement` would\n   * read the previous render's list and silently skip opening the editor.\n   */\n  const handleTextPlaced = useCallback(\n    (point: IAnnotationPoint) => {\n      const element = createTextElement(point, style, imageSize);\n      addElement(element);\n      setTool('select');\n      setEditingText({ id: element.id, value: '' });\n    },\n    [style, imageSize, addElement],\n  );\n\n  const handleTextCancel = useCallback(() => {\n    if (!editingText) return;\n    const element = controller.elements.find((item) => item.id === editingText.id);\n    setEditingText(null);\n    if (element?.type === 'text' && !element.text.trim()) removeElement(editingText.id);\n  }, [editingText, controller.elements, removeElement]);\n\n  const handleSave = async () => {\n    const stage = stageRef.current;\n    if (!stage || saving) return;\n\n    setSaving(true);\n    handleTextCommit();\n    controller.select(null);\n\n    try {\n      await nextFrame();\n      await nextFrame();\n      const file = await exportStageToFile({ stage, imageSize, mimeType, imageName });\n      await onSave(file, controller.document);\n      onSaved();\n    } catch (error) {\n      uiLogger.error('Failed to save annotated image', error);\n      notify({ message: t('imageAnnotator.sendFailed'), type: 'error' });\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  useAnnotationShortcuts({\n    active: !editingText,\n    controller,\n    imageMaxDimension: imageMaxDimension(imageSize),\n    onToolChange: handleToolChange,\n  });\n\n  const activeType = useMemo<TAnnotationElementType | null>(() => {\n    if (selectedElement) return selectedElement.type;\n    return ELEMENT_TOOLS.includes(tool) ? (tool as TAnnotationElementType) : null;\n  }, [selectedElement, tool]);\n\n  const editingElement = useMemo(() => {\n    const element = controller.elements.find((item) => item.id === editingText?.id);\n    return element?.type === 'text' ? element : null;\n  }, [controller.elements, editingText?.id]);\n\n  const elementActions = selectedElement ? (\n    <AnnotationElementActions\n      touch={touch}\n      onReorder={controller.reorderSelected}\n      onDuplicate={controller.duplicateSelected}\n      onDelete={() => selectedId && removeElement(selectedId)}\n    />\n  ) : null;\n\n  const actionBar = (\n    <AnnotationActionBar\n      touch={touch}\n      saving={saving}\n      canUndo={controller.canUndo}\n      canRedo={controller.canRedo}\n      canClear={!controller.isEmpty}\n      canSave={!controller.isEmpty}\n      elementActions={touch ? elementActions : undefined}\n      onUndo={controller.undo}\n      onRedo={controller.redo}\n      onClear={controller.clear}\n      onSave={handleSave}\n    />\n  );\n\n  return (\n    <div className=\"flex h-full flex-col gap-y-2\">\n      <AnnotationToolbar\n        tool={tool}\n        touch={touch}\n        actions={touch ? undefined : actionBar}\n        onToolChange={handleToolChange}\n        onInsertImage={handleInsertImage}\n      />\n\n      <AnnotationStyleBar\n        style={style}\n        activeType={activeType}\n        selectedElement={selectedElement}\n        touch={touch}\n        elementActions={touch ? undefined : elementActions}\n        onStyleChange={handleStyleChange}\n        onImageStyleChange={handleImageStyleChange}\n      />\n\n      <div\n        ref={viewportRef}\n        className=\"relative flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-xl bg-ink/95 p-3\"\n      >\n        {fit.width > 1 && (\n          <div className=\"relative\" style={{ width: fit.width, height: fit.height }}>\n            <AnnotationStage\n              baseImage={baseImage}\n              imageSize={imageSize}\n              fit={fit}\n              tool={tool}\n              style={style}\n              controller={controller}\n              editingTextId={editingText?.id ?? null}\n              stageRef={stageRef}\n              onRequestTextEdit={handleRequestTextEdit}\n              onTextPlaced={handleTextPlaced}\n            />\n\n            {editingText && editingElement && (\n              <AnnotationTextOverlay\n                element={editingElement}\n                viewScale={fit.scale}\n                value={editingText.value}\n                onChange={(value) => setEditingText((current) => (current ? { ...current, value } : current))}\n                onCommit={handleTextCommit}\n                onCancel={handleTextCancel}\n              />\n            )}\n          </div>\n        )}\n      </div>\n\n      {touch && <div className=\"shrink-0\">{actionBar}</div>}\n    </div>\n  );\n};\n\nexport default AnnotationEditor;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageAnnotator/ImageAnnotationDialog.d.ts

@@ -0,0 +1,13 @@
+import { IAnnotationDocument, TAnnotationElement } from './interfaces/annotationDocument';
+interface IImageAnnotationDialogProps {
+    open: boolean;
+    imageUrl: string;
+    imageName?: string;
+    /** Previously saved annotations, when the host persists the document alongside the file. */
+    initialElements?: Array<TAnnotationElement>;
+    onClose: () => void;
+    /** Receives the flattened image plus the editable document; resolving closes the dialog. */
+    onSave: (file: File, document: IAnnotationDocument) => Promise<void> | void;
+}
+declare const ImageAnnotationDialog: React.FC<IImageAnnotationDialogProps>;
+export default ImageAnnotationDialog;