@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,284 @@
+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 { useThemeSkin } from "../../../hooks/useThemeSkin.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 DEFAULT_MAX_HEIGHT = "70vh";
+const ImageMaskPainter = ({
+  imageUrl,
+  onMaskChange,
+  disabled = false,
+  maskFileName = "mask.png",
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  imageClassName,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const resolvedTheme = useResolvedTheme();
+  const themeSkin = useThemeSkin();
+  const canvasRef = useRef(null);
+  const cursorRef = useRef(null);
+  const strokesRef = useRef([]);
+  const activeStrokeRef = useRef(null);
+  const onMaskChangeRef = useRef(onMaskChange);
+  const emitSequenceRef = useRef(0);
+  const [loaded, setLoaded] = useState(null);
+  const ready = loaded?.url === 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, themeSkin, 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);
+    setLoaded({ url: imageUrl, width: naturalWidth, height: naturalHeight });
+  };
+  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;
+  const fillsFrame = !imageClassName && ready && loaded !== null;
+  const frameStyle = fillsFrame ? {
+    aspectRatio: `${loaded.width} / ${loaded.height}`,
+    width: `min(100%, calc(${maxHeight} * ${loaded.width / loaded.height}))`
+  } : void 0;
+  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",
+      {
+        style: frameStyle,
+        className: classNames("relative max-w-full overflow-hidden", fillsFrame ? "min-w-0" : "inline-flex"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: imageUrl,
+              alt: "",
+              draggable: false,
+              onLoad: handleImageLoad,
+              style: imageClassName || fillsFrame ? void 0 : { maxHeight },
+              className: classNames(
+                "block select-none rounded-lg object-contain",
+                imageClassName ?? (fillsFrame ? "size-full" : "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';\nimport { useThemeSkin } from '@/hooks/useThemeSkin';\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;\nconst DEFAULT_MAX_HEIGHT = '70vh';\n\ninterface ILoadedImage {\n  url: string;\n  width: number;\n  height: number;\n}\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  /**\n   * The tallest the image may get, as any CSS length. The image fills the available width up to\n   * this height, scaled up when its natural size is smaller.\n   */\n  maxHeight?: string;\n  /** Sizes the image with classes instead, at its natural size at most. Turns the fill off. */\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  maxHeight = DEFAULT_MAX_HEIGHT,\n  imageClassName,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const resolvedTheme = useResolvedTheme();\n  const themeSkin = useThemeSkin();\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 [loaded, setLoaded] = useState<ILoadedImage | null>(null);\n  const ready = loaded?.url === 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 and per skin; strokes already on screen follow it.\n  useEffect(() => {\n    if (ready) repaint();\n  }, [ready, resolvedTheme, themeSkin, 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    setLoaded({ url: imageUrl, width: naturalWidth, height: naturalHeight });\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  // The frame takes the image's proportions, so the canvas over it always matches the image.\n  const fillsFrame = !imageClassName && ready && loaded !== null;\n  const frameStyle = fillsFrame\n    ? {\n        aspectRatio: `${loaded.width} / ${loaded.height}`,\n        width: `min(100%, calc(${maxHeight} * ${loaded.width / loaded.height}))`,\n      }\n    : undefined;\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\n          style={frameStyle}\n          className={classNames('relative max-w-full overflow-hidden', fillsFrame ? 'min-w-0' : 'inline-flex')}\n        >\n          <img\n            key={imageUrl}\n            src={imageUrl}\n            alt=\"\"\n            draggable={false}\n            onLoad={handleImageLoad}\n            style={imageClassName || fillsFrame ? undefined : { maxHeight }}\n            className={classNames(\n              'block select-none rounded-lg object-contain',\n              imageClassName ?? (fillsFrame ? 'size-full' : 'w-auto max-w-full'),\n            )}\n          />\n          <canvas\n            ref={canvasRef}\n            role=\"img\"\n            aria-label={t('imageMaskPainter.surfaceLabel')}\n            onPointerDown={handlePointerDown}\n            onPointerMove={handlePointerMove}\n            onPointerUp={finishStroke}\n            onPointerCancel={finishStroke}\n            onPointerLeave={hideCursor}\n            className={classNames(\n              'absolute inset-0 size-full touch-none rounded-lg opacity-50',\n              controlsDisabled ? 'cursor-not-allowed' : 'cursor-crosshair',\n            )}\n          />\n          <span\n            ref={cursorRef}\n            aria-hidden\n            style={{ width: brushSize, height: brushSize }}\n            className=\"pointer-events-none absolute left-0 top-0 rounded-full border-2 border-brand opacity-0 shadow-sm\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ImageMaskPainter;\n"],"names":[],"mappings":"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"}

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

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

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

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

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/components/UI/ImagePlaceholder.d.ts

@@ -0,0 +1,24 @@
+export type TImagePlaceholderVariant = 'empty' | 'broken';
+interface IImagePlaceholderProps {
+    /**
+     * `empty` = there is no image for this record (the normal state).
+     * `broken` = there IS a source but it failed to load (a real problem worth distinguishing).
+     */
+    variant?: TImagePlaceholderVariant;
+    className?: string;
+}
+/**
+ * The single placeholder for "no image here", replacing the fixed missing-image.png.
+ *
+ * A raster asset cannot follow the theme: the old PNG was a dark tile, so it read as a
+ * hole in light mode and as a slightly-wrong-dark square in dark mode. This draws the
+ * same idea from tokens instead, so it is correct in both themes for free.
+ *
+ * It is used at every size in the app, from a 40px table thumbnail to a full datasheet
+ * panel, so the icon is sized in container-query units rather than a fixed rem: it scales
+ * with whatever box it is dropped into, with a floor and a ceiling so it never becomes a
+ * dot or a poster. `MaterialSymbol` receives no `size` prop on purpose, because that prop
+ * writes an inline font-size which would beat this class.
+ */
+declare const ImagePlaceholder: React.FC<IImagePlaceholderProps>;
+export default ImagePlaceholder;

package/dist/components/UI/ImagePlaceholder.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const VARIANT_ICON = {
+  empty: "image",
+  broken: "broken_image"
+};
+const ImagePlaceholder = ({ variant = "empty", className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-hidden": true,
+    className: mergeClasses(
+      "flex size-full items-center justify-center overflow-hidden bg-muted @container",
+      className
+    ),
+    children: /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon: VARIANT_ICON[variant],
+        weight: 300,
+        className: "!text-[clamp(0.875rem,34cqi,2.75rem)] leading-none text-foreground-faint"
+      }
+    )
+  }
+);
+export {
+  ImagePlaceholder as default
+};
+//# sourceMappingURL=ImagePlaceholder.js.map

package/dist/components/UI/ImagePlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePlaceholder.js","sources":["../../../src/components/UI/ImagePlaceholder.tsx"],"sourcesContent":["import { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TImagePlaceholderVariant = 'empty' | 'broken';\n\ninterface IImagePlaceholderProps {\n  /**\n   * `empty` = there is no image for this record (the normal state).\n   * `broken` = there IS a source but it failed to load (a real problem worth distinguishing).\n   */\n  variant?: TImagePlaceholderVariant;\n  className?: string;\n}\n\nconst VARIANT_ICON: Record<TImagePlaceholderVariant, SymbolCodepoints> = {\n  empty: 'image',\n  broken: 'broken_image',\n};\n\n/**\n * The single placeholder for \"no image here\", replacing the fixed missing-image.png.\n *\n * A raster asset cannot follow the theme: the old PNG was a dark tile, so it read as a\n * hole in light mode and as a slightly-wrong-dark square in dark mode. This draws the\n * same idea from tokens instead, so it is correct in both themes for free.\n *\n * It is used at every size in the app, from a 40px table thumbnail to a full datasheet\n * panel, so the icon is sized in container-query units rather than a fixed rem: it scales\n * with whatever box it is dropped into, with a floor and a ceiling so it never becomes a\n * dot or a poster. `MaterialSymbol` receives no `size` prop on purpose, because that prop\n * writes an inline font-size which would beat this class.\n */\nconst ImagePlaceholder: React.FC<IImagePlaceholderProps> = ({ variant = 'empty', className }) => (\n  <div\n    aria-hidden\n    className={mergeClasses(\n      'flex size-full items-center justify-center overflow-hidden bg-muted @container',\n      className,\n    )}\n  >\n    <MaterialSymbol\n      icon={VARIANT_ICON[variant]}\n      weight={300}\n      /* `!` is required: outlined.css pins `.material-symbols { font-size: 1.5rem }` and,\n         being imported last, it wins the cascade over a plain utility. */\n      className=\"!text-[clamp(0.875rem,34cqi,2.75rem)] leading-none text-foreground-faint\"\n    />\n  </div>\n);\n\nexport default ImagePlaceholder;\n"],"names":[],"mappings":";;;AAcA,MAAM,eAAmE;AAAA,EACvE,OAAO;AAAA,EACP,QAAQ;AACV;AAeA,MAAM,mBAAqD,CAAC,EAAE,UAAU,SAAS,gBAC/E;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,aAAa,OAAO;AAAA,QAC1B,QAAQ;AAAA,QAGR,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ;AACF;"}

package/dist/components/UI/ImageZoomOverlay.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface IImageZoomOverlayProps {
+    src: string;
+    onClose: () => void;
+}
+declare const ImageZoomOverlay: React.FC<IImageZoomOverlayProps>;
+export default ImageZoomOverlay;

package/dist/components/UI/ImageZoomOverlay.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledImage from "../Form/ControlledImage/index.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import { getPortalHost } from "../../helpers/portalHost.js";
+const ImageZoomOverlay = ({ src, onClose }) => {
+  const { t } = useTranslation("ui");
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      onClose();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [onClose]);
+  const portalHost = getPortalHost();
+  if (portalHost === null) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: onClose,
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": t("imageZoom.title"),
+        className: "fixed inset-0 z-[9999] flex items-center justify-center p-6 glass-scrim",
+        children: [
+          /* @__PURE__ */ jsx(ControlledTooltip, { content: t("imageZoom.close"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              "aria-label": t("actions.close"),
+              defaultHtmlButton: true,
+              onClick: onClose,
+              className: "absolute right-4 top-4 flex items-center justify-center rounded-full bg-glass/10 p-2 text-white transition-interactive duration-base ease-enter hover:bg-glass/20 active:scale-90",
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 24 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { onClick: (event) => event.stopPropagation(), className: "flex max-h-full max-w-full", children: /* @__PURE__ */ jsx(ControlledImage, { src, className: "max-h-[90vh] max-w-[90vw] object-contain" }) })
+        ]
+      }
+    ),
+    portalHost
+  );
+};
+export {
+  ImageZoomOverlay as default
+};
+//# sourceMappingURL=ImageZoomOverlay.js.map

package/dist/components/UI/ImageZoomOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageZoomOverlay.js","sources":["../../../src/components/UI/ImageZoomOverlay.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { getPortalHost } from '@/helpers/portalHost';\n\ninterface IImageZoomOverlayProps {\n  src: string;\n  onClose: () => void;\n}\n\n// Visualização ampliada em tela cheia (portal). Fecha com Esc, clique fora ou\n// no botão de fechar.\nconst ImageZoomOverlay: React.FC<IImageZoomOverlayProps> = ({ src, onClose }) => {\n  const { t } = useTranslation('ui');\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Escape') return;\n      // Na captura e barrando a propagação: o drawer que abriu esta imagem também escuta Esc no\n      // document, e sem isso uma tecla fecharia a imagem E o drawer atrás dela.\n      event.stopPropagation();\n      onClose();\n    };\n    document.addEventListener('keydown', onKeyDown, true);\n    return () => document.removeEventListener('keydown', onKeyDown, true);\n  }, [onClose]);\n\n  const portalHost = getPortalHost();\n  if (portalHost === null) return null;\n\n  return createPortal(\n    <div\n      onClick={onClose}\n      // `role=\"dialog\"` não é enfeite: é como `isPressOnLayeredSurface` reconhece esta camada. Sem\n      // ele, o drawer por baixo lê o clique no X como \"clicou fora de mim\" e se fecha junto.\n      role=\"dialog\"\n      aria-modal={true}\n      aria-label={t('imageZoom.title')}\n      // Same layer as ControlledDialog: mounted after the dialog that opened it, DOM order puts\n      // the zoom on top. Any lower value hides it behind the dialog's scrim.\n      className=\"fixed inset-0 z-[9999] flex items-center justify-center p-6 glass-scrim\"\n    >\n      <ControlledTooltip content={t('imageZoom.close')} className=\"z-[9999]\">\n        <ControlledButton\n          aria-label={t('actions.close')}\n          defaultHtmlButton\n          onClick={onClose}\n          className=\"absolute right-4 top-4 flex items-center justify-center rounded-full bg-glass/10 p-2 text-white transition-interactive duration-base ease-enter hover:bg-glass/20 active:scale-90\"\n        >\n          <MaterialSymbol icon=\"close\" size={24} />\n        </ControlledButton>\n      </ControlledTooltip>\n      <div onClick={(event) => event.stopPropagation()} className=\"flex max-h-full max-w-full\">\n        <ControlledImage src={src} className=\"max-h-[90vh] max-w-[90vw] object-contain\" />\n      </div>\n    </div>,\n    portalHost,\n  );\n};\n\nexport default ImageZoomOverlay;\n"],"names":[],"mappings":";;;;;;;;;AAiBA,MAAM,mBAAqD,CAAC,EAAE,KAAK,cAAc;AAC/E,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAA+B;AAChD,UAAI,MAAM,QAAQ,SAAU;AAG5B,YAAM,gBAAA;AACN,cAAA;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,WAAO,MAAM,SAAS,oBAAoB,WAAW,WAAW,IAAI;AAAA,EACtE,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,cAAA;AACnB,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO;AAAA,IACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QAGT,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,cAAY,EAAE,iBAAiB;AAAA,QAG/B,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,qBAAkB,SAAS,EAAE,iBAAiB,GAAG,WAAU,YAC1D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAY,EAAE,eAAe;AAAA,cAC7B,mBAAiB;AAAA,cACjB,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,GAE3C;AAAA,UACA,oBAAC,OAAA,EAAI,SAAS,CAAC,UAAU,MAAM,mBAAmB,WAAU,8BAC1D,UAAA,oBAAC,iBAAA,EAAgB,KAAU,WAAU,4CAA2C,EAAA,CAClF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAEJ;"}

package/dist/components/UI/InformationCard.d.ts

@@ -0,0 +1,26 @@
+import { SymbolCodepoints } from './MaterialSymbol';
+export interface IInformationCard {
+    title: string;
+    icon?: SymbolCodepoints;
+    value: string;
+    secondaryValue?: string;
+    subValue?: string;
+    subValueLabel?: string;
+    show?: boolean;
+    tooltip?: string;
+    /** When set, the card becomes clickable (e.g. drill down to a filtered list). */
+    onClick?: () => void;
+}
+interface IInformationCardProps {
+    cards: Array<IInformationCard>;
+    loading?: boolean;
+    headerTitle?: string;
+    showHeaderBorder?: boolean;
+    headerActionSlot?: React.ReactNode;
+    /** When false the section stays expanded and the collapse affordance is removed. */
+    collapsible?: boolean;
+    /** When false only the cards render, with no title row above them. */
+    showHeader?: boolean;
+}
+declare const InformationCard: React.FC<IInformationCardProps>;
+export default InformationCard;