@umodeapporg/ui 0.14.0 → 0.16.0

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":";;;;;;;;;;;AAwBO,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AACpC,MAAM,qBAAqB;AAgB3B,MAAM,mBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,gBAAgB,iBAAA;AAEtB,QAAM,YAAY,OAAiC,IAAI;AACvD,QAAM,YAAY,OAA+B,IAAI;AACrD,QAAM,aAAa,OAA2B,EAAE;AAChD,QAAM,kBAAkB,OAA0D,IAAI;AACtF,QAAM,kBAAkB,OAAO,YAAY;AAC3C,QAAM,kBAAkB,OAAO,CAAC;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,QAAQ,cAAc;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAyB,OAAO;AACxD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,kBAAkB;AAC7D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,YAAU,MAAM;AACd,oBAAgB,UAAU;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,eAAe,YAAY,MAAM,eAAe,OAAO,GAAG,CAAA,CAAE;AAElE,QAAM,aAAa,YAAY,MAAM,UAAU,SAAS,WAAW,IAAI,KAAK,MAAM,EAAE;AAEpF,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,UAAU,WAAA;AAChB,QAAI,QAAS,eAAc,SAAS,WAAW,SAAS,cAAc;AAAA,EACxE,GAAG,CAAC,YAAY,YAAY,CAAC;AAG7B,YAAU,MAAM;AACd,QAAI,MAAO,SAAA;AAAA,EACb,GAAG,CAAC,OAAO,eAAe,OAAO,CAAC;AAElC,QAAM,WAAW,YAAY,YAAY;AACvC,UAAM,WAAW,EAAE,gBAAgB;AACnC,UAAM,SAAS,UAAU;AACzB,QAAI;AACF,YAAM,OAAO,UAAU,gBAAgB,MAAM,IAAI,MAAM,eAAe,QAAQ,YAAY,IAAI;AAC9F,UAAI,aAAa,gBAAgB,QAAS,iBAAgB,QAAQ,IAAI;AAAA,IACxE,SAAS,OAAO;AACd,eAAS,MAAM,mCAAmC,KAAK;AACvD,UAAI,aAAa,gBAAgB,QAAS,iBAAgB,QAAQ,IAAI;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,kBAAkB,CAAC,UAAkD;AACzE,UAAM,SAAS,UAAU;AACzB,UAAM,EAAE,cAAc,cAAA,IAAkB,MAAM;AAC9C,QAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAe;AAChD,WAAO,QAAQ;AACf,WAAO,SAAS;AAChB,eAAW,UAAU,CAAA;AACrB,oBAAgB,UAAU;AAC1B,mBAAe,CAAC;AAChB,iBAAa,QAAQ;AAAA,EACvB;AAEA,QAAM,iBAAiB,CAAC,UAAuF;AAC7G,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,OAAO,sBAAA;AACpB,UAAM,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ;AAC3D,WAAO;AAAA,MACL,OAAO,EAAE,IAAI,MAAM,UAAU,KAAK,QAAQ,OAAO,IAAI,MAAM,UAAU,KAAK,OAAO,MAAA;AAAA,MACjF;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,aAAa,CAAC,UAAiD;AACnE,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,OAAQ;AACb,QAAI,MAAM,gBAAgB,SAAS;AACjC,aAAO,MAAM,UAAU;AACvB;AAAA,IACF;AACA,UAAM,OAAO,MAAM,cAAc,sBAAA;AACjC,WAAO,MAAM,UAAU;AACvB,WAAO,MAAM,YAAY,aAAa,MAAM,UAAU,KAAK,OAAO,YAAY,CAAC,OAAO,MAAM,UAAU,KAAK,MAAM,YAAY,CAAC;AAAA,EAChI;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,UAAU,QAAS,WAAU,QAAQ,MAAM,UAAU;AAAA,EAC3D;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,QAAI,YAAY,CAAC,SAAS,gBAAgB,QAAS;AACnD,QAAI,MAAM,gBAAgB,WAAW,MAAM,WAAW,EAAG;AACzD,UAAM,UAAU,WAAA;AAChB,QAAI,CAAC,QAAS;AAEd,UAAM,eAAA;AACN,QAAI;AACF,YAAM,cAAc,kBAAkB,MAAM,SAAS;AAAA,IACvD,QAAQ;AAAA,IAER;AACA,UAAM,EAAE,OAAO,UAAU,eAAe,KAAK;AAC7C,UAAM,SAAsB,EAAE,MAAM,MAAM,KAAK,IAAI,GAAG,YAAY,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAA;AACxF,oBAAgB,UAAU,EAAE,WAAW,MAAM,WAAW,OAAA;AACxD,mBAAe,SAAS,QAAQ,cAAc;AAAA,EAChD;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,eAAW,KAAK;AAChB,UAAM,SAAS,gBAAgB;AAC/B,QAAI,CAAC,UAAU,OAAO,cAAc,MAAM,UAAW;AACrD,UAAM,UAAU,WAAA;AAChB,QAAI,CAAC,QAAS;AAEd,WAAO,OAAO,OAAO,KAAK,eAAe,KAAK,EAAE,KAAK;AACrD,mBAAe,SAAS,OAAO,QAAQ,aAAA,CAAc;AAAA,EACvD;AAEA,QAAM,eAAe,CAAC,UAAiD;AACrE,UAAM,SAAS,gBAAgB;AAC/B,QAAI,CAAC,UAAU,OAAO,cAAc,MAAM,UAAW;AACrD,oBAAgB,UAAU;AAC1B,eAAW,UAAU,CAAC,GAAG,WAAW,SAAS,OAAO,MAAM;AAC1D,mBAAe,WAAW,QAAQ,MAAM;AACxC,SAAK,SAAA;AAAA,EACP;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,WAAW,QAAQ,WAAW,EAAG;AACrC,eAAW,UAAU,WAAW,QAAQ,MAAM,GAAG,EAAE;AACnD,mBAAe,WAAW,QAAQ,MAAM;AACxC,YAAA;AACA,SAAK,SAAA;AAAA,EACP;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,WAAW,QAAQ,WAAW,EAAG;AACrC,eAAW,UAAU,CAAA;AACrB,mBAAe,CAAC;AAChB,YAAA;AACA,SAAK,SAAA;AAAA,EACP;AAEA,QAAM,mBAAmB,YAAY,CAAC;AAEtC,8BACG,OAAA,EAAI,WAAW,WAAW,iCAAiC,SAAS,GACnE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,SAAS,UAAU,WAAW;AAAA,UACvC,gBAAc,SAAS;AAAA,UACvB,UAAU;AAAA,UACV,SAAS,MAAM,QAAQ,OAAO;AAAA,UAC9B,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,kBAAe,eAAW,MAAC,MAAK,SAAQ,MAAM,IAAI;AAAA,YAClD,EAAE,wBAAwB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAE7B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,SAAS,UAAU,WAAW;AAAA,UACvC,gBAAc,SAAS;AAAA,UACvB,UAAU;AAAA,UACV,SAAS,MAAM,QAAQ,OAAO;AAAA,UAC9B,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,kBAAe,eAAW,MAAC,MAAK,cAAa,MAAM,IAAI;AAAA,YACvD,EAAE,wBAAwB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7B,qBAAC,SAAA,EAAM,WAAU,2EACf,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,EAAE,4BAA4B,GAAE;AAAA,QAC5D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,YACN,UAAU;AAAA,YACV,OAAO,EAAE,4BAA4B;AAAA,YACrC,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ,GACF;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,oBAAoB,gBAAgB;AAAA,UAC9C,SAAS;AAAA,UACT,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,kBAAe,eAAW,MAAC,MAAK,QAAO,MAAM,IAAI;AAAA,YACjD,EAAE,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAE5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,oBAAoB,gBAAgB;AAAA,UAC9C,SAAS;AAAA,UACT,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,kBAAe,eAAW,MAAC,MAAK,gBAAe,MAAM,IAAI;AAAA,YACzD,EAAE,wBAAwB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7B,GACF;AAAA,wBAEC,OAAA,EAAI,WAAU,6DACb,UAAA,qBAAC,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,KAAK;AAAA,UACL,KAAI;AAAA,UACJ,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB;AAAA,UAAA;AAAA,QACpB;AAAA,QARK;AAAA,MAAA;AAAA,MAUP;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,cAAY,EAAE,+BAA+B;AAAA,UAC7C,eAAe;AAAA,UACf,eAAe;AAAA,UACf,aAAa;AAAA,UACb,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,UAChB,WAAW;AAAA,YACT;AAAA,YACA,mBAAmB,uBAAuB;AAAA,UAAA;AAAA,QAC5C;AAAA,MAAA;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAW;AAAA,UACX,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,UACnC,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"maskStrokes.js","sources":["../../../../src/components/UI/ImageMaskPainter/maskStrokes.ts"],"sourcesContent":["export type TMaskBrushMode = 'paint' | 'erase';\n\nexport interface IMaskPoint {\n  x: number;\n  y: number;\n}\n\n/** A stroke in the image's natural pixel space, so the mask never depends on the on-screen size. */\nexport interface IMaskStroke {\n  mode: TMaskBrushMode;\n  size: number;\n  points: Array<IMaskPoint>;\n}\n\n/** The export side is data, not interface colour: the backend reads white as \"may change\". */\nconst MASK_KEEP = '#000000';\nconst MASK_CHANGE = '#ffffff';\nconst COVERAGE_SAMPLE = 256;\n\nconst strokeSegment = (context: CanvasRenderingContext2D, stroke: IMaskStroke, from: IMaskPoint, to: IMaskPoint) => {\n  context.globalCompositeOperation = stroke.mode === 'erase' ? 'destination-out' : 'source-over';\n  context.lineWidth = stroke.size;\n  context.lineCap = 'round';\n  context.lineJoin = 'round';\n  context.beginPath();\n  context.moveTo(from.x, from.y);\n  // A zero-length line still paints a round dot with a round cap in every engine but Safari.\n  context.lineTo(to.x + (from.x === to.x && from.y === to.y ? 0.01 : 0), to.y);\n  context.stroke();\n};\n\n/** Draws the newest segment of a stroke that is still being painted. */\nexport const drawStrokeTail = (context: CanvasRenderingContext2D, stroke: IMaskStroke, color: string): void => {\n  const { points } = stroke;\n  if (points.length === 0) return;\n  context.save();\n  context.strokeStyle = color;\n  strokeSegment(context, stroke, points[Math.max(0, points.length - 2)], points[points.length - 1]);\n  context.restore();\n};\n\n/** Repaints the whole overlay; used after undo, clear and theme changes. */\nexport const redrawStrokes = (\n  context: CanvasRenderingContext2D,\n  strokes: ReadonlyArray<IMaskStroke>,\n  color: string,\n): void => {\n  context.save();\n  context.clearRect(0, 0, context.canvas.width, context.canvas.height);\n  context.strokeStyle = color;\n  strokes.forEach((stroke) => {\n    stroke.points.forEach((point, index) => {\n      strokeSegment(context, stroke, stroke.points[Math.max(0, index - 1)], point);\n    });\n  });\n  context.restore();\n};\n\n/** Cheap check on a downscaled copy: thin strokes still leave a non-zero averaged alpha. */\nexport const overlayHasPaint = (overlay: HTMLCanvasElement): boolean => {\n  if (!overlay.width || !overlay.height) return false;\n  const ratio = Math.min(1, COVERAGE_SAMPLE / Math.max(overlay.width, overlay.height));\n  const sample = document.createElement('canvas');\n  sample.width = Math.max(1, Math.round(overlay.width * ratio));\n  sample.height = Math.max(1, Math.round(overlay.height * ratio));\n  const context = sample.getContext('2d');\n  if (!context) return false;\n  context.drawImage(overlay, 0, 0, sample.width, sample.height);\n  const { data } = context.getImageData(0, 0, sample.width, sample.height);\n  for (let index = 3; index < data.length; index += 4) {\n    if (data[index] > 0) return true;\n  }\n  return false;\n};\n\n/** White where the overlay is painted, black elsewhere, at the overlay's (natural) resolution. */\nexport const exportMaskFile = async (overlay: HTMLCanvasElement, fileName: string): Promise<File | null> => {\n  const canvas = document.createElement('canvas');\n  canvas.width = overlay.width;\n  canvas.height = overlay.height;\n  const context = canvas.getContext('2d');\n  if (!context) return null;\n\n  context.fillStyle = MASK_CHANGE;\n  context.fillRect(0, 0, canvas.width, canvas.height);\n  context.globalCompositeOperation = 'destination-in';\n  context.drawImage(overlay, 0, 0);\n  context.globalCompositeOperation = 'destination-over';\n  context.fillStyle = MASK_KEEP;\n  context.fillRect(0, 0, canvas.width, canvas.height);\n\n  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));\n  if (!blob) return null;\n  return new File([blob], fileName, { type: 'image/png' });\n};\n"],"names":[],"mappings":"AAeA,MAAM,YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,kBAAkB;AAExB,MAAM,gBAAgB,CAAC,SAAmC,QAAqB,MAAkB,OAAmB;AAClH,UAAQ,2BAA2B,OAAO,SAAS,UAAU,oBAAoB;AACjF,UAAQ,YAAY,OAAO;AAC3B,UAAQ,UAAU;AAClB,UAAQ,WAAW;AACnB,UAAQ,UAAA;AACR,UAAQ,OAAO,KAAK,GAAG,KAAK,CAAC;AAE7B,UAAQ,OAAO,GAAG,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK,MAAM,GAAG,IAAI,OAAO,IAAI,GAAG,CAAC;AAC3E,UAAQ,OAAA;AACV;AAGO,MAAM,iBAAiB,CAAC,SAAmC,QAAqB,UAAwB;AAC7G,QAAM,EAAE,WAAW;AACnB,MAAI,OAAO,WAAW,EAAG;AACzB,UAAQ,KAAA;AACR,UAAQ,cAAc;AACtB,gBAAc,SAAS,QAAQ,OAAO,KAAK,IAAI,GAAG,OAAO,SAAS,CAAC,CAAC,GAAG,OAAO,OAAO,SAAS,CAAC,CAAC;AAChG,UAAQ,QAAA;AACV;AAGO,MAAM,gBAAgB,CAC3B,SACA,SACA,UACS;AACT,UAAQ,KAAA;AACR,UAAQ,UAAU,GAAG,GAAG,QAAQ,OAAO,OAAO,QAAQ,OAAO,MAAM;AACnE,UAAQ,cAAc;AACtB,UAAQ,QAAQ,CAAC,WAAW;AAC1B,WAAO,OAAO,QAAQ,CAAC,OAAO,UAAU;AACtC,oBAAc,SAAS,QAAQ,OAAO,OAAO,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,KAAK;AAAA,IAC7E,CAAC;AAAA,EACH,CAAC;AACD,UAAQ,QAAA;AACV;AAGO,MAAM,kBAAkB,CAAC,YAAwC;AACtE,MAAI,CAAC,QAAQ,SAAS,CAAC,QAAQ,OAAQ,QAAO;AAC9C,QAAM,QAAQ,KAAK,IAAI,GAAG,kBAAkB,KAAK,IAAI,QAAQ,OAAO,QAAQ,MAAM,CAAC;AACnF,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,QAAQ,KAAK,CAAC;AAC5D,SAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,SAAS,KAAK,CAAC;AAC9D,QAAM,UAAU,OAAO,WAAW,IAAI;AACtC,MAAI,CAAC,QAAS,QAAO;AACrB,UAAQ,UAAU,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC5D,QAAM,EAAE,KAAA,IAAS,QAAQ,aAAa,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AACvE,WAAS,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS,GAAG;AACnD,QAAI,KAAK,KAAK,IAAI,EAAG,QAAO;AAAA,EAC9B;AACA,SAAO;AACT;AAGO,MAAM,iBAAiB,OAAO,SAA4B,aAA2C;AAC1G,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,QAAQ,QAAQ;AACvB,SAAO,SAAS,QAAQ;AACxB,QAAM,UAAU,OAAO,WAAW,IAAI;AACtC,MAAI,CAAC,QAAS,QAAO;AAErB,UAAQ,YAAY;AACpB,UAAQ,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAClD,UAAQ,2BAA2B;AACnC,UAAQ,UAAU,SAAS,GAAG,CAAC;AAC/B,UAAQ,2BAA2B;AACnC,UAAQ,YAAY;AACpB,UAAQ,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAElD,QAAM,OAAO,MAAM,IAAI,QAAqB,CAAC,YAAY,OAAO,OAAO,SAAS,WAAW,CAAC;AAC5F,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,CAAC,IAAI,GAAG,UAAU,EAAE,MAAM,aAAa;AACzD;"}

package/dist/helpers/imageFile.d.ts

@@ -1,8 +1,24 @@
+/** Most AI upload endpoints cap files at 8 MB; this leaves room for multipart overhead. */
+export declare const AI_UPLOAD_SAFE_BYTES: number;
+export type TImageOutputType = 'image/jpeg' | 'image/png' | 'image/webp';
 export interface IResizeImageOptions {
     maxDimension?: number;
     quality?: number;
+    /** Defaults to JPEG. PNG and WebP keep transparency. */
+    outputType?: TImageOutputType;
 }
+/** File extension (without dot) for an image MIME type, `jpg` when unknown. */
+export declare const imageExtensionForType: (type: string) => string;
 export declare const resizeImageFile: (file: File, options?: IResizeImageOptions) => Promise<File>;
+export interface IFitImageToUploadBudgetOptions {
+    maxBytes?: number;
+}
+/**
+ * Keeps the source image untouched whenever it already fits the upload budget, so an AI edit
+ * works on the original pixels. Only an oversized (or non PNG/JPEG/WebP) file is re-encoded,
+ * with high quality and the source format when possible, stepping down until it fits.
+ */
+export declare const fitImageToUploadBudget: (file: File, { maxBytes }?: IFitImageToUploadBudgetOptions) => Promise<File>;
 export declare const fileFromUrl: (url: string, fileName: string, signal?: AbortSignal) => Promise<File>;
 /**
  * Mede a imagem sem baixá-la de novo quando o navegador já a tem em cache.

package/dist/helpers/imageFile.js

@@ -1,6 +1,17 @@
 const MAX_DIMENSION = 1280;
 const JPEG_QUALITY = 0.82;
 const OUTPUT_TYPE = "image/jpeg";
+const AI_UPLOAD_SAFE_BYTES = 7.5 * 1024 * 1024;
+const AI_UPLOAD_MAX_DIMENSION = 4096;
+const AI_UPLOAD_QUALITY = 0.95;
+const AI_UPLOAD_FALLBACK_DIMENSION = 3072;
+const AI_UPLOAD_FALLBACK_QUALITY = 0.9;
+const AI_ACCEPTED_TYPES = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/webp"]);
+const EXTENSION_BY_TYPE = {
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "image/webp": "webp"
+};
 const loadImage = (url) => new Promise((resolve, reject) => {
   const image = new Image();
   image.onload = () => resolve(image);
@@ -13,29 +24,64 @@ const scaledSize = (width, height, maxDimension) => {
   const ratio = maxDimension / longest;
   return { width: Math.round(width * ratio), height: Math.round(height * ratio) };
 };
-const toJpegName = (name) => name.replace(/\.[^.]+$/, "") + ".jpg";
-const resizeImageFile = async (file, options = {}) => {
-  const maxDimension = options.maxDimension ?? MAX_DIMENSION;
-  const quality = options.quality ?? JPEG_QUALITY;
+const baseName = (name) => name.replace(/\.[^.]+$/, "") || name || "image";
+const imageExtensionForType = (type) => type in EXTENSION_BY_TYPE ? EXTENSION_BY_TYPE[type] : "jpg";
+const withExtension = (name, type) => `${baseName(name)}.${EXTENSION_BY_TYPE[type]}`;
+const encodeImageFile = async (file, options) => {
   const objectUrl = URL.createObjectURL(file);
   try {
     const image = await loadImage(objectUrl);
-    const { width, height } = scaledSize(image.naturalWidth, image.naturalHeight, maxDimension);
+    const { width, height } = scaledSize(image.naturalWidth, image.naturalHeight, options.maxDimension);
     const canvas = document.createElement("canvas");
     canvas.width = width;
     canvas.height = height;
     const context = canvas.getContext("2d");
-    if (!context) return file;
+    if (!context) return null;
+    if (options.outputType === "image/jpeg") {
+      context.fillStyle = "#ffffff";
+      context.fillRect(0, 0, width, height);
+    }
     context.drawImage(image, 0, 0, width, height);
-    const blob = await new Promise((resolve) => canvas.toBlob(resolve, OUTPUT_TYPE, quality));
-    if (!blob || blob.size >= file.size) return file;
-    return new File([blob], toJpegName(file.name), { type: OUTPUT_TYPE });
+    const blob = await new Promise(
+      (resolve) => canvas.toBlob(resolve, options.outputType, options.quality)
+    );
+    if (!blob) return null;
+    return new File([blob], withExtension(file.name, options.outputType), { type: options.outputType });
   } catch {
-    return file;
+    return null;
   } finally {
     URL.revokeObjectURL(objectUrl);
   }
 };
+const resizeImageFile = async (file, options = {}) => {
+  const encoded = await encodeImageFile(file, {
+    maxDimension: options.maxDimension ?? MAX_DIMENSION,
+    quality: options.quality ?? JPEG_QUALITY,
+    outputType: options.outputType ?? OUTPUT_TYPE
+  });
+  if (!encoded || encoded.size >= file.size) return file;
+  return encoded;
+};
+const fitImageToUploadBudget = async (file, { maxBytes = AI_UPLOAD_SAFE_BYTES } = {}) => {
+  const isAccepted = AI_ACCEPTED_TYPES.has(file.type);
+  if (isAccepted && file.size <= maxBytes) return file;
+  const keepsAlpha = file.type === "image/png" || file.type === "image/webp" || !isAccepted;
+  const sourceType = isAccepted ? file.type : "image/png";
+  const attempts = [
+    { maxDimension: AI_UPLOAD_MAX_DIMENSION, quality: AI_UPLOAD_QUALITY, outputType: sourceType },
+    ...keepsAlpha ? [{ maxDimension: AI_UPLOAD_MAX_DIMENSION, quality: AI_UPLOAD_QUALITY, outputType: "image/webp" }] : [],
+    { maxDimension: AI_UPLOAD_MAX_DIMENSION, quality: AI_UPLOAD_QUALITY, outputType: "image/jpeg" },
+    { maxDimension: AI_UPLOAD_FALLBACK_DIMENSION, quality: AI_UPLOAD_FALLBACK_QUALITY, outputType: "image/jpeg" }
+  ];
+  let smallest = null;
+  for (const attempt of attempts) {
+    const encoded = await encodeImageFile(file, attempt);
+    if (!encoded) continue;
+    if (encoded.size <= maxBytes) return encoded;
+    if (!smallest || encoded.size < smallest.size) smallest = encoded;
+  }
+  return smallest && smallest.size < file.size ? smallest : file;
+};
 const fileFromUrl = async (url, fileName, signal) => {
   const blob = await (await fetch(url, { cache: "reload", mode: "cors", signal })).blob();
   const type = blob.type || "image/jpeg";
@@ -52,7 +98,10 @@ const measureImageDimensions = async (src) => {
   }
 };
 export {
+  AI_UPLOAD_SAFE_BYTES,
   fileFromUrl,
+  fitImageToUploadBudget,
+  imageExtensionForType,
   measureImageDimensions,
   resizeImageFile
 };

package/dist/helpers/imageFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"imageFile.js","sources":["../../src/helpers/imageFile.ts"],"sourcesContent":["const MAX_DIMENSION = 1280;\nconst JPEG_QUALITY = 0.82;\nconst OUTPUT_TYPE = 'image/jpeg';\n\nexport interface IResizeImageOptions {\n  maxDimension?: number;\n  quality?: number;\n}\n\nconst loadImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.onload = () => resolve(image);\n    image.onerror = () => reject(new Error('Failed to load image'));\n    image.src = url;\n  });\n\nconst scaledSize = (width: number, height: number, maxDimension: number): { width: number; height: number } => {\n  const longest = Math.max(width, height);\n  if (longest <= maxDimension) return { width, height };\n  const ratio = maxDimension / longest;\n  return { width: Math.round(width * ratio), height: Math.round(height * ratio) };\n};\n\nconst toJpegName = (name: string): string => name.replace(/\\.[^.]+$/, '') + '.jpg';\n\nexport const resizeImageFile = async (file: File, options: IResizeImageOptions = {}): Promise<File> => {\n  const maxDimension = options.maxDimension ?? MAX_DIMENSION;\n  const quality = options.quality ?? JPEG_QUALITY;\n  const objectUrl = URL.createObjectURL(file);\n  try {\n    const image = await loadImage(objectUrl);\n    const { width, height } = scaledSize(image.naturalWidth, image.naturalHeight, maxDimension);\n\n    const canvas = document.createElement('canvas');\n    canvas.width = width;\n    canvas.height = height;\n    const context = canvas.getContext('2d');\n    if (!context) return file;\n    context.drawImage(image, 0, 0, width, height);\n\n    const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, OUTPUT_TYPE, quality));\n    if (!blob || blob.size >= file.size) return file;\n\n    return new File([blob], toJpegName(file.name), { type: OUTPUT_TYPE });\n  } catch {\n    return file;\n  } finally {\n    URL.revokeObjectURL(objectUrl);\n  }\n};\n\n// `reload` em vez de `force-cache`: a mesma imagem costuma já ter sido baixada por um <img>\n// comum, que não manda `Origin` e por isso é guardada sem `Access-Control-Allow-Origin`.\n// Reaproveitar essa entrada é o que faz o CORS falhar \"hora sim, hora não\".\nexport const fileFromUrl = async (url: string, fileName: string, signal?: AbortSignal): Promise<File> => {\n  const blob = await (await fetch(url, { cache: 'reload', mode: 'cors', signal })).blob();\n  const type = blob.type || 'image/jpeg';\n  return new File([blob], fileName, { type });\n};\n\n/**\n * Mede a imagem sem baixá-la de novo quando o navegador já a tem em cache.\n *\n * Devolve `null` em vez de lançar: medir é para AVISAR o usuário, então uma imagem que não carrega\n * aqui não pode derrubar a tela nem virar um alerta falso.\n */\nexport const measureImageDimensions = async (src: string): Promise<{ width: number; height: number } | null> => {\n  if (!src) return null;\n  try {\n    const image = await loadImage(src);\n    if (!image.naturalWidth || !image.naturalHeight) return null;\n    return { width: image.naturalWidth, height: image.naturalHeight };\n  } catch {\n    return null;\n  }\n};\n"],"names":[],"mappings":"AAAA,MAAM,gBAAgB;AACtB,MAAM,eAAe;AACrB,MAAM,cAAc;AAOpB,MAAM,YAAY,CAAC,QACjB,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,QAAQ,IAAI,MAAA;AAClB,QAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,QAAM,UAAU,MAAM,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAC9D,QAAM,MAAM;AACd,CAAC;AAEH,MAAM,aAAa,CAAC,OAAe,QAAgB,iBAA4D;AAC7G,QAAM,UAAU,KAAK,IAAI,OAAO,MAAM;AACtC,MAAI,WAAW,aAAc,QAAO,EAAE,OAAO,OAAA;AAC7C,QAAM,QAAQ,eAAe;AAC7B,SAAO,EAAE,OAAO,KAAK,MAAM,QAAQ,KAAK,GAAG,QAAQ,KAAK,MAAM,SAAS,KAAK,EAAA;AAC9E;AAEA,MAAM,aAAa,CAAC,SAAyB,KAAK,QAAQ,YAAY,EAAE,IAAI;AAErE,MAAM,kBAAkB,OAAO,MAAY,UAA+B,OAAsB;AACrG,QAAM,eAAe,QAAQ,gBAAgB;AAC7C,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,YAAY,IAAI,gBAAgB,IAAI;AAC1C,MAAI;AACF,UAAM,QAAQ,MAAM,UAAU,SAAS;AACvC,UAAM,EAAE,OAAO,OAAA,IAAW,WAAW,MAAM,cAAc,MAAM,eAAe,YAAY;AAE1F,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ;AACf,WAAO,SAAS;AAChB,UAAM,UAAU,OAAO,WAAW,IAAI;AACtC,QAAI,CAAC,QAAS,QAAO;AACrB,YAAQ,UAAU,OAAO,GAAG,GAAG,OAAO,MAAM;AAE5C,UAAM,OAAO,MAAM,IAAI,QAAqB,CAAC,YAAY,OAAO,OAAO,SAAS,aAAa,OAAO,CAAC;AACrG,QAAI,CAAC,QAAQ,KAAK,QAAQ,KAAK,KAAM,QAAO;AAE5C,WAAO,IAAI,KAAK,CAAC,IAAI,GAAG,WAAW,KAAK,IAAI,GAAG,EAAE,MAAM,aAAa;AAAA,EACtE,QAAQ;AACN,WAAO;AAAA,EACT,UAAA;AACE,QAAI,gBAAgB,SAAS;AAAA,EAC/B;AACF;AAKO,MAAM,cAAc,OAAO,KAAa,UAAkB,WAAwC;AACvG,QAAM,OAAO,OAAO,MAAM,MAAM,KAAK,EAAE,OAAO,UAAU,MAAM,QAAQ,OAAA,CAAQ,GAAG,KAAA;AACjF,QAAM,OAAO,KAAK,QAAQ;AAC1B,SAAO,IAAI,KAAK,CAAC,IAAI,GAAG,UAAU,EAAE,MAAM;AAC5C;AAQO,MAAM,yBAAyB,OAAO,QAAmE;AAC9G,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI;AACF,UAAM,QAAQ,MAAM,UAAU,GAAG;AACjC,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe,QAAO;AACxD,WAAO,EAAE,OAAO,MAAM,cAAc,QAAQ,MAAM,cAAA;AAAA,EACpD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"imageFile.js","sources":["../../src/helpers/imageFile.ts"],"sourcesContent":["const MAX_DIMENSION = 1280;\nconst JPEG_QUALITY = 0.82;\nconst OUTPUT_TYPE = 'image/jpeg';\n\n/** Most AI upload endpoints cap files at 8 MB; this leaves room for multipart overhead. */\nexport const AI_UPLOAD_SAFE_BYTES = 7.5 * 1024 * 1024;\nconst AI_UPLOAD_MAX_DIMENSION = 4096;\nconst AI_UPLOAD_QUALITY = 0.95;\nconst AI_UPLOAD_FALLBACK_DIMENSION = 3072;\nconst AI_UPLOAD_FALLBACK_QUALITY = 0.9;\n\nexport type TImageOutputType = 'image/jpeg' | 'image/png' | 'image/webp';\n\nconst AI_ACCEPTED_TYPES = new Set<string>(['image/jpeg', 'image/png', 'image/webp']);\n\nconst EXTENSION_BY_TYPE: Record<TImageOutputType, string> = {\n  'image/jpeg': 'jpg',\n  'image/png': 'png',\n  'image/webp': 'webp',\n};\n\nexport interface IResizeImageOptions {\n  maxDimension?: number;\n  quality?: number;\n  /** Defaults to JPEG. PNG and WebP keep transparency. */\n  outputType?: TImageOutputType;\n}\n\nconst loadImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.onload = () => resolve(image);\n    image.onerror = () => reject(new Error('Failed to load image'));\n    image.src = url;\n  });\n\nconst scaledSize = (width: number, height: number, maxDimension: number): { width: number; height: number } => {\n  const longest = Math.max(width, height);\n  if (longest <= maxDimension) return { width, height };\n  const ratio = maxDimension / longest;\n  return { width: Math.round(width * ratio), height: Math.round(height * ratio) };\n};\n\nconst baseName = (name: string): string => name.replace(/\\.[^.]+$/, '') || name || 'image';\n\n/** File extension (without dot) for an image MIME type, `jpg` when unknown. */\nexport const imageExtensionForType = (type: string): string =>\n  type in EXTENSION_BY_TYPE ? EXTENSION_BY_TYPE[type as TImageOutputType] : 'jpg';\n\nconst withExtension = (name: string, type: TImageOutputType): string => `${baseName(name)}.${EXTENSION_BY_TYPE[type]}`;\n\nconst encodeImageFile = async (file: File, options: Required<IResizeImageOptions>): Promise<File | null> => {\n  const objectUrl = URL.createObjectURL(file);\n  try {\n    const image = await loadImage(objectUrl);\n    const { width, height } = scaledSize(image.naturalWidth, image.naturalHeight, options.maxDimension);\n\n    const canvas = document.createElement('canvas');\n    canvas.width = width;\n    canvas.height = height;\n    const context = canvas.getContext('2d');\n    if (!context) return null;\n    // JPEG has no alpha: without a fill, transparent pixels would turn black.\n    if (options.outputType === 'image/jpeg') {\n      context.fillStyle = '#ffffff';\n      context.fillRect(0, 0, width, height);\n    }\n    context.drawImage(image, 0, 0, width, height);\n\n    const blob = await new Promise<Blob | null>((resolve) =>\n      canvas.toBlob(resolve, options.outputType, options.quality),\n    );\n    if (!blob) return null;\n\n    return new File([blob], withExtension(file.name, options.outputType), { type: options.outputType });\n  } catch {\n    return null;\n  } finally {\n    URL.revokeObjectURL(objectUrl);\n  }\n};\n\nexport const resizeImageFile = async (file: File, options: IResizeImageOptions = {}): Promise<File> => {\n  const encoded = await encodeImageFile(file, {\n    maxDimension: options.maxDimension ?? MAX_DIMENSION,\n    quality: options.quality ?? JPEG_QUALITY,\n    outputType: options.outputType ?? OUTPUT_TYPE,\n  });\n  if (!encoded || encoded.size >= file.size) return file;\n  return encoded;\n};\n\nexport interface IFitImageToUploadBudgetOptions {\n  maxBytes?: number;\n}\n\n/**\n * Keeps the source image untouched whenever it already fits the upload budget, so an AI edit\n * works on the original pixels. Only an oversized (or non PNG/JPEG/WebP) file is re-encoded,\n * with high quality and the source format when possible, stepping down until it fits.\n */\nexport const fitImageToUploadBudget = async (\n  file: File,\n  { maxBytes = AI_UPLOAD_SAFE_BYTES }: IFitImageToUploadBudgetOptions = {},\n): Promise<File> => {\n  const isAccepted = AI_ACCEPTED_TYPES.has(file.type);\n  if (isAccepted && file.size <= maxBytes) return file;\n\n  const keepsAlpha = file.type === 'image/png' || file.type === 'image/webp' || !isAccepted;\n  const sourceType: TImageOutputType = isAccepted ? (file.type as TImageOutputType) : 'image/png';\n  const attempts: Array<Required<IResizeImageOptions>> = [\n    { maxDimension: AI_UPLOAD_MAX_DIMENSION, quality: AI_UPLOAD_QUALITY, outputType: sourceType },\n    ...(keepsAlpha\n      ? [{ maxDimension: AI_UPLOAD_MAX_DIMENSION, quality: AI_UPLOAD_QUALITY, outputType: 'image/webp' as const }]\n      : []),\n    { maxDimension: AI_UPLOAD_MAX_DIMENSION, quality: AI_UPLOAD_QUALITY, outputType: 'image/jpeg' },\n    { maxDimension: AI_UPLOAD_FALLBACK_DIMENSION, quality: AI_UPLOAD_FALLBACK_QUALITY, outputType: 'image/jpeg' },\n  ];\n\n  let smallest: File | null = null;\n  for (const attempt of attempts) {\n    const encoded = await encodeImageFile(file, attempt);\n    if (!encoded) continue;\n    if (encoded.size <= maxBytes) return encoded;\n    if (!smallest || encoded.size < smallest.size) smallest = encoded;\n  }\n\n  return smallest && smallest.size < file.size ? smallest : file;\n};\n\n// `reload` em vez de `force-cache`: a mesma imagem costuma já ter sido baixada por um <img>\n// comum, que não manda `Origin` e por isso é guardada sem `Access-Control-Allow-Origin`.\n// Reaproveitar essa entrada é o que faz o CORS falhar \"hora sim, hora não\".\nexport const fileFromUrl = async (url: string, fileName: string, signal?: AbortSignal): Promise<File> => {\n  const blob = await (await fetch(url, { cache: 'reload', mode: 'cors', signal })).blob();\n  const type = blob.type || 'image/jpeg';\n  return new File([blob], fileName, { type });\n};\n\n/**\n * Mede a imagem sem baixá-la de novo quando o navegador já a tem em cache.\n *\n * Devolve `null` em vez de lançar: medir é para AVISAR o usuário, então uma imagem que não carrega\n * aqui não pode derrubar a tela nem virar um alerta falso.\n */\nexport const measureImageDimensions = async (src: string): Promise<{ width: number; height: number } | null> => {\n  if (!src) return null;\n  try {\n    const image = await loadImage(src);\n    if (!image.naturalWidth || !image.naturalHeight) return null;\n    return { width: image.naturalWidth, height: image.naturalHeight };\n  } catch {\n    return null;\n  }\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export { default as ControlledSlider } from './components/UI/ControlledSlider';
 export { default as ControlledTooltip } from './components/UI/ControlledTooltip';
 export { default as CustomBadge } from './components/UI/CustomBadge';
 export { default as CustomCard } from './components/UI/CustomCard';
+export type { IImageMaskPainterProps } from './components/UI/ImageMaskPainter/index';
+export { default as ImageMaskPainter } from './components/UI/ImageMaskPainter/index';
 export { default as InformationCard } from './components/UI/InformationCard';
 export { default as LoadingSpinner } from './components/UI/LoadingSpinner';
 export * from './components/UI/MaterialSymbol/index';

package/dist/index.js

@@ -35,12 +35,13 @@ import { default as default30 } from "./components/UI/ControlledSlider.js";
 import { default as default31 } from "./components/UI/ControlledTooltip.js";
 import { default as default32 } from "./components/UI/CustomBadge.js";
 import { default as default33 } from "./components/UI/CustomCard.js";
-import { default as default34 } from "./components/UI/InformationCard.js";
-import { default as default35 } from "./components/UI/LoadingSpinner.js";
+import { default as default34 } from "./components/UI/ImageMaskPainter/index.js";
+import { default as default35 } from "./components/UI/InformationCard.js";
+import { default as default36 } from "./components/UI/LoadingSpinner.js";
 import { MaterialSymbol, combineClasses } from "./components/UI/MaterialSymbol/index.js";
-import { default as default36 } from "./components/UI/NoDataFound/index.js";
-import { default as default37 } from "./components/UI/SkeletonLoading.js";
-import { default as default38 } from "./components/UI/UserMenu.js";
+import { default as default37 } from "./components/UI/NoDataFound/index.js";
+import { default as default38 } from "./components/UI/SkeletonLoading.js";
+import { default as default39 } from "./components/UI/UserMenu.js";
 import { composeRefs } from "./helpers/composeRefs.js";
 import { LAYERED_SURFACE_ATTRIBUTE, LAYERED_SURFACE_DATA_ATTRIBUTE, LAYERED_SURFACE_SELECTOR, isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
 import { readThemeToken, useThemeChartTokens } from "./helpers/themeTokens.js";
@@ -85,25 +86,26 @@ export {
   default32 as CustomBadge,
   default33 as CustomCard,
   default14 as ErrorPage,
-  default34 as InformationCard,
+  default34 as ImageMaskPainter,
+  default35 as InformationCard,
   LAYERED_SURFACE_ATTRIBUTE,
   LAYERED_SURFACE_DATA_ATTRIBUTE,
   LAYERED_SURFACE_SELECTOR,
   default15 as LinkButton,
-  default35 as LoadingSpinner,
+  default36 as LoadingSpinner,
   MOTION_OFFSET_PX,
   MaterialSymbol,
-  default36 as NoDataFound,
+  default37 as NoDataFound,
   default22 as OutlinedChip,
   default16 as PageTitle,
   PageTitleNavigationProvider,
   default19 as ShellLanguageToggle,
   default20 as ShellThemeToggle,
-  default37 as SkeletonLoading,
+  default38 as SkeletonLoading,
   UiAccessProvider,
   UiNavigationProvider,
   default17 as UnifiedSearchBar,
-  default38 as UserMenu,
+  default39 as UserMenu,
   collapseVariants,
   combineClasses,
   composeRefs,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}