@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const AnnotationElementActions = ({
+  touch,
+  onReorder,
+  onDuplicate,
+  onDelete
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-x-0.5", children: [
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "flip_to_front",
+        label: t("imageAnnotator.layers.forward"),
+        touch,
+        className: touch ? void 0 : "size-8",
+        onClick: () => onReorder("forward")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "flip_to_back",
+        label: t("imageAnnotator.layers.backward"),
+        touch,
+        className: touch ? void 0 : "size-8",
+        onClick: () => onReorder("backward")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "content_copy",
+        label: t("imageAnnotator.actions.duplicate"),
+        touch,
+        className: touch ? void 0 : "size-8",
+        onClick: onDuplicate
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "delete",
+        label: t("imageAnnotator.actions.delete"),
+        tone: "danger",
+        touch,
+        className: touch ? void 0 : "size-8",
+        onClick: onDelete
+      }
+    )
+  ] });
+};
+export {
+  AnnotationElementActions as default
+};
+//# sourceMappingURL=AnnotationElementActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationElementActions.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationElementActions.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\ninterface IAnnotationElementActionsProps {\n  touch: boolean;\n  onReorder: (direction: 'forward' | 'backward') => void;\n  onDuplicate: () => void;\n  onDelete: () => void;\n}\n\nconst AnnotationElementActions: React.FC<IAnnotationElementActionsProps> = ({\n  touch,\n  onReorder,\n  onDuplicate,\n  onDelete,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <div className=\"flex shrink-0 items-center gap-x-0.5\">\n      <AnnotationToolButton\n        icon=\"flip_to_front\"\n        label={t('imageAnnotator.layers.forward')}\n        touch={touch}\n        className={touch ? undefined : 'size-8'}\n        onClick={() => onReorder('forward')}\n      />\n      <AnnotationToolButton\n        icon=\"flip_to_back\"\n        label={t('imageAnnotator.layers.backward')}\n        touch={touch}\n        className={touch ? undefined : 'size-8'}\n        onClick={() => onReorder('backward')}\n      />\n      <AnnotationToolButton\n        icon=\"content_copy\"\n        label={t('imageAnnotator.actions.duplicate')}\n        touch={touch}\n        className={touch ? undefined : 'size-8'}\n        onClick={onDuplicate}\n      />\n      <AnnotationToolButton\n        icon=\"delete\"\n        label={t('imageAnnotator.actions.delete')}\n        tone=\"danger\"\n        touch={touch}\n        className={touch ? undefined : 'size-8'}\n        onClick={onDelete}\n      />\n    </div>\n  );\n};\n\nexport default AnnotationElementActions;\n"],"names":[],"mappings":";;;AAWA,MAAM,2BAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,+BAA+B;AAAA,QACxC;AAAA,QACA,WAAW,QAAQ,SAAY;AAAA,QAC/B,SAAS,MAAM,UAAU,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,gCAAgC;AAAA,QACzC;AAAA,QACA,WAAW,QAAQ,SAAY;AAAA,QAC/B,SAAS,MAAM,UAAU,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAErC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,kCAAkC;AAAA,QAC3C;AAAA,QACA,WAAW,QAAQ,SAAY;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,+BAA+B;AAAA,QACxC,MAAK;AAAA,QACL;AAAA,QACA,WAAW,QAAQ,SAAY;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GACF;AAEJ;"}

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

@@ -0,0 +1,13 @@
+import { IAnnotationStyle } from '../annotationStyle';
+import { IAnnotationImageElement, TAnnotationElement, TAnnotationElementType } from '../interfaces/annotationDocument';
+interface IAnnotationStyleBarProps {
+    style: IAnnotationStyle;
+    activeType: TAnnotationElementType | null;
+    selectedElement: TAnnotationElement | null;
+    touch: boolean;
+    elementActions?: React.ReactNode;
+    onStyleChange: (patch: Partial<IAnnotationStyle>) => void;
+    onImageStyleChange: (patch: Partial<IAnnotationImageElement>) => void;
+}
+declare const AnnotationStyleBar: React.FC<IAnnotationStyleBarProps>;
+export default AnnotationStyleBar;

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

@@ -0,0 +1,183 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import { ANNOTATION_COLORS, ANNOTATION_STROKE_SIZES, ANNOTATION_FONT_SIZES } from "../annotationStyle.js";
+import AnnotationColorPopover from "./AnnotationColorPopover.js";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const STROKE_DOT_CLASS = {
+  thin: "size-1",
+  medium: "size-2",
+  thick: "size-3"
+};
+const FONT_ICON = {
+  small: "text_decrease",
+  medium: "format_size",
+  large: "text_increase"
+};
+const ALIGN_OPTIONS = [
+  { value: "left", icon: "format_align_left", labelKey: "imageAnnotator.style.alignLeft" },
+  { value: "center", icon: "format_align_center", labelKey: "imageAnnotator.style.alignCenter" },
+  { value: "right", icon: "format_align_right", labelKey: "imageAnnotator.style.alignRight" }
+];
+const STROKE_TYPES = ["freehand", "line", "arrow", "rectangle", "ellipse"];
+const AnnotationStyleBar = ({
+  style,
+  activeType,
+  selectedElement,
+  touch,
+  elementActions,
+  onStyleChange,
+  onImageStyleChange
+}) => {
+  const { t } = useTranslation("ui");
+  const isImage = activeType === "image";
+  const isText = activeType === "text";
+  const showStroke = !activeType || STROKE_TYPES.includes(activeType);
+  const showFill = activeType === "rectangle" || activeType === "ellipse";
+  const groupClass = "flex shrink-0 items-center gap-x-0.5 rounded-lg bg-surface/60 p-0.5";
+  const compactClass = touch ? void 0 : "size-8";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex shrink-0 items-center gap-x-2 rounded-xl bg-muted-hover px-2 py-1.5",
+        touch ? "overflow-x-auto" : "flex-wrap gap-y-2"
+      ),
+      children: [
+        !isImage && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-x-1", children: ANNOTATION_COLORS.map((color) => /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: () => onStyleChange({ color }),
+            "aria-label": color,
+            "aria-pressed": style.color === color,
+            className: classNames(
+              "shrink-0 rounded-full border border-border-strong/30 transition-transform hover:scale-110",
+              touch ? "size-8" : "size-6",
+              style.color === color && "scale-110 ring-2 ring-ring ring-offset-1"
+            ),
+            style: { backgroundColor: color },
+            children: null
+          },
+          color
+        )) }),
+        showStroke && /* @__PURE__ */ jsx("div", { className: groupClass, children: ANNOTATION_STROKE_SIZES.map((size) => /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: () => onStyleChange({ strokeSize: size }),
+            "aria-label": t(`imageAnnotator.stroke.${size}`),
+            "aria-pressed": style.strokeSize === size,
+            className: classNames(
+              "interactive flex shrink-0 items-center justify-center rounded-md",
+              touch ? "size-11" : "size-8",
+              style.strokeSize === size ? "bg-surface shadow-sm" : "hover:bg-muted-active"
+            ),
+            children: /* @__PURE__ */ jsx("span", { className: classNames("rounded-full bg-foreground", STROKE_DOT_CLASS[size]) })
+          },
+          size
+        )) }),
+        showFill && /* @__PURE__ */ jsx(
+          AnnotationColorPopover,
+          {
+            icon: "format_color_fill",
+            label: t("imageAnnotator.style.fill"),
+            value: style.fill,
+            touch,
+            onChange: (fill) => onStyleChange({ fill })
+          }
+        ),
+        isText && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: groupClass, children: ANNOTATION_FONT_SIZES.map((size) => /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon: FONT_ICON[size],
+              label: t(`imageAnnotator.style.font.${size}`),
+              active: style.fontSize === size,
+              touch,
+              className: compactClass,
+              onClick: () => onStyleChange({ fontSize: size })
+            },
+            size
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: groupClass, children: [
+            /* @__PURE__ */ jsx(
+              AnnotationToolButton,
+              {
+                icon: "format_bold",
+                label: t("imageAnnotator.style.bold"),
+                active: style.bold,
+                touch,
+                className: compactClass,
+                onClick: () => onStyleChange({ bold: !style.bold })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AnnotationToolButton,
+              {
+                icon: "format_italic",
+                label: t("imageAnnotator.style.italic"),
+                active: style.italic,
+                touch,
+                className: compactClass,
+                onClick: () => onStyleChange({ italic: !style.italic })
+              }
+            ),
+            ALIGN_OPTIONS.map(({ value, icon, labelKey }) => /* @__PURE__ */ jsx(
+              AnnotationToolButton,
+              {
+                icon,
+                label: t(labelKey),
+                active: style.align === value,
+                touch,
+                className: compactClass,
+                onClick: () => onStyleChange({ align: value })
+              },
+              value
+            ))
+          ] }),
+          /* @__PURE__ */ jsx(
+            AnnotationColorPopover,
+            {
+              icon: "format_color_fill",
+              label: t("imageAnnotator.style.textBackground"),
+              value: style.textBackground,
+              touch,
+              onChange: (textBackground) => onStyleChange({ textBackground })
+            }
+          )
+        ] }),
+        isImage && selectedElement?.type === "image" && /* @__PURE__ */ jsxs("div", { className: groupClass, children: [
+          /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon: "photo_frame",
+              label: t("imageAnnotator.style.border"),
+              active: Boolean(selectedElement.stroke),
+              touch,
+              className: compactClass,
+              onClick: () => onImageStyleChange({ stroke: selectedElement.stroke ? null : style.color })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon: "shadow",
+              label: t("imageAnnotator.style.shadow"),
+              active: selectedElement.shadow,
+              touch,
+              className: compactClass,
+              onClick: () => onImageStyleChange({ shadow: !selectedElement.shadow })
+            }
+          )
+        ] }),
+        elementActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: elementActions })
+      ]
+    }
+  );
+};
+export {
+  AnnotationStyleBar as default
+};
+//# sourceMappingURL=AnnotationStyleBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationStyleBar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationStyleBar.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport {\n  ANNOTATION_COLORS,\n  ANNOTATION_FONT_SIZES,\n  ANNOTATION_STROKE_SIZES,\n  IAnnotationStyle,\n  TAnnotationFontSize,\n  TAnnotationStrokeSize,\n} from '../annotationStyle';\nimport {\n  IAnnotationImageElement,\n  TAnnotationAlign,\n  TAnnotationElement,\n  TAnnotationElementType,\n} from '../interfaces/annotationDocument';\n\nimport AnnotationColorPopover from './AnnotationColorPopover';\nimport AnnotationToolButton from './AnnotationToolButton';\n\nconst STROKE_DOT_CLASS: Record<TAnnotationStrokeSize, string> = {\n  thin: 'size-1',\n  medium: 'size-2',\n  thick: 'size-3',\n};\n\nconst FONT_ICON: Record<TAnnotationFontSize, SymbolCodepoints> = {\n  small: 'text_decrease',\n  medium: 'format_size',\n  large: 'text_increase',\n};\n\nconst ALIGN_OPTIONS: Array<{ value: TAnnotationAlign; icon: SymbolCodepoints; labelKey: string }> = [\n  { value: 'left', icon: 'format_align_left', labelKey: 'imageAnnotator.style.alignLeft' },\n  { value: 'center', icon: 'format_align_center', labelKey: 'imageAnnotator.style.alignCenter' },\n  { value: 'right', icon: 'format_align_right', labelKey: 'imageAnnotator.style.alignRight' },\n];\n\nconst STROKE_TYPES: Array<TAnnotationElementType> = ['freehand', 'line', 'arrow', 'rectangle', 'ellipse'];\n\ninterface IAnnotationStyleBarProps {\n  style: IAnnotationStyle;\n  activeType: TAnnotationElementType | null;\n  selectedElement: TAnnotationElement | null;\n  touch: boolean;\n  elementActions?: React.ReactNode;\n  onStyleChange: (patch: Partial<IAnnotationStyle>) => void;\n  onImageStyleChange: (patch: Partial<IAnnotationImageElement>) => void;\n}\n\nconst AnnotationStyleBar: React.FC<IAnnotationStyleBarProps> = ({\n  style,\n  activeType,\n  selectedElement,\n  touch,\n  elementActions,\n  onStyleChange,\n  onImageStyleChange,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const isImage = activeType === 'image';\n  const isText = activeType === 'text';\n  const showStroke = !activeType || STROKE_TYPES.includes(activeType);\n  const showFill = activeType === 'rectangle' || activeType === 'ellipse';\n\n  const groupClass = 'flex shrink-0 items-center gap-x-0.5 rounded-lg bg-surface/60 p-0.5';\n  const compactClass = touch ? undefined : 'size-8';\n\n  return (\n    <div\n      className={classNames(\n        'flex shrink-0 items-center gap-x-2 rounded-xl bg-muted-hover px-2 py-1.5',\n        touch ? 'overflow-x-auto' : 'flex-wrap gap-y-2',\n      )}\n    >\n      {!isImage && (\n        <div className=\"flex shrink-0 items-center gap-x-1\">\n          {ANNOTATION_COLORS.map((color) => (\n            <ControlledButton\n              key={color}\n              defaultHtmlButton\n              onClick={() => onStyleChange({ color })}\n              aria-label={color}\n              aria-pressed={style.color === color}\n              className={classNames(\n                'shrink-0 rounded-full border border-border-strong/30 transition-transform hover:scale-110',\n                touch ? 'size-8' : 'size-6',\n                style.color === color && 'scale-110 ring-2 ring-ring ring-offset-1',\n              )}\n              style={{ backgroundColor: color }}\n            >\n              {null}\n            </ControlledButton>\n          ))}\n        </div>\n      )}\n\n      {showStroke && (\n        <div className={groupClass}>\n          {ANNOTATION_STROKE_SIZES.map((size) => (\n            <ControlledButton\n              key={size}\n              defaultHtmlButton\n              onClick={() => onStyleChange({ strokeSize: size })}\n              aria-label={t(`imageAnnotator.stroke.${size}`)}\n              aria-pressed={style.strokeSize === size}\n              className={classNames(\n                'interactive flex shrink-0 items-center justify-center rounded-md',\n                touch ? 'size-11' : 'size-8',\n                style.strokeSize === size ? 'bg-surface shadow-sm' : 'hover:bg-muted-active',\n              )}\n            >\n              <span className={classNames('rounded-full bg-foreground', STROKE_DOT_CLASS[size])} />\n            </ControlledButton>\n          ))}\n        </div>\n      )}\n\n      {showFill && (\n        <AnnotationColorPopover\n          icon=\"format_color_fill\"\n          label={t('imageAnnotator.style.fill')}\n          value={style.fill}\n          touch={touch}\n          onChange={(fill) => onStyleChange({ fill })}\n        />\n      )}\n\n      {isText && (\n        <>\n          <div className={groupClass}>\n            {ANNOTATION_FONT_SIZES.map((size) => (\n              <AnnotationToolButton\n                key={size}\n                icon={FONT_ICON[size]}\n                label={t(`imageAnnotator.style.font.${size}`)}\n                active={style.fontSize === size}\n                touch={touch}\n                className={compactClass}\n                onClick={() => onStyleChange({ fontSize: size })}\n              />\n            ))}\n          </div>\n\n          <div className={groupClass}>\n            <AnnotationToolButton\n              icon=\"format_bold\"\n              label={t('imageAnnotator.style.bold')}\n              active={style.bold}\n              touch={touch}\n              className={compactClass}\n              onClick={() => onStyleChange({ bold: !style.bold })}\n            />\n            <AnnotationToolButton\n              icon=\"format_italic\"\n              label={t('imageAnnotator.style.italic')}\n              active={style.italic}\n              touch={touch}\n              className={compactClass}\n              onClick={() => onStyleChange({ italic: !style.italic })}\n            />\n            {ALIGN_OPTIONS.map(({ value, icon, labelKey }) => (\n              <AnnotationToolButton\n                key={value}\n                icon={icon}\n                label={t(labelKey)}\n                active={style.align === value}\n                touch={touch}\n                className={compactClass}\n                onClick={() => onStyleChange({ align: value })}\n              />\n            ))}\n          </div>\n\n          <AnnotationColorPopover\n            icon=\"format_color_fill\"\n            label={t('imageAnnotator.style.textBackground')}\n            value={style.textBackground}\n            touch={touch}\n            onChange={(textBackground) => onStyleChange({ textBackground })}\n          />\n        </>\n      )}\n\n      {isImage && selectedElement?.type === 'image' && (\n        <div className={groupClass}>\n          <AnnotationToolButton\n            icon=\"photo_frame\"\n            label={t('imageAnnotator.style.border')}\n            active={Boolean(selectedElement.stroke)}\n            touch={touch}\n            className={compactClass}\n            onClick={() => onImageStyleChange({ stroke: selectedElement.stroke ? null : style.color })}\n          />\n          <AnnotationToolButton\n            icon=\"shadow\"\n            label={t('imageAnnotator.style.shadow')}\n            active={selectedElement.shadow}\n            touch={touch}\n            className={compactClass}\n            onClick={() => onImageStyleChange({ shadow: !selectedElement.shadow })}\n          />\n        </div>\n      )}\n\n      {elementActions && <div className=\"ml-auto flex items-center\">{elementActions}</div>}\n    </div>\n  );\n};\n\nexport default AnnotationStyleBar;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { IAnnotationTextElement } from '../interfaces/annotationDocument';
+interface IAnnotationTextOverlayProps {
+    element: IAnnotationTextElement;
+    viewScale: number;
+    value: string;
+    onChange: (value: string) => void;
+    onCommit: () => void;
+    onCancel: () => void;
+}
+/**
+ * The editor sits exactly where the element renders and mirrors its typography, so typing and
+ * the committed result never disagree.
+ */
+declare const AnnotationTextOverlay: React.FC<IAnnotationTextOverlayProps>;
+export default AnnotationTextOverlay;

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

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { ANNOTATION_TEXT_FONT_FAMILY } from "../annotationStyle.js";
+import { hexToRgba } from "../helpers/annotationCanvas.js";
+const AnnotationTextOverlay = ({
+  element,
+  viewScale,
+  value,
+  onChange,
+  onCommit,
+  onCancel
+}) => {
+  const { t } = useTranslation("ui");
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      textarea.focus();
+      textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [element.id]);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value, viewScale, element.fontSize]);
+  const fontSize = element.fontSize * viewScale;
+  const padding = element.padding * viewScale;
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      value,
+      "aria-label": t("imageAnnotator.tools.text"),
+      placeholder: t("imageAnnotator.textPlaceholder"),
+      spellCheck: false,
+      onChange: (event) => onChange(event.target.value),
+      onBlur: onCommit,
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onCancel();
+        }
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          onCommit();
+        }
+      },
+      className: "absolute z-10 resize-none overflow-hidden rounded-lg outline-none ring-2 ring-ring",
+      style: {
+        left: element.x * viewScale,
+        top: element.y * viewScale,
+        width: element.width * viewScale,
+        transform: `rotate(${element.rotation}deg)`,
+        transformOrigin: "top left",
+        fontFamily: ANNOTATION_TEXT_FONT_FAMILY,
+        fontSize,
+        lineHeight: 1.25,
+        padding,
+        textAlign: element.align,
+        fontWeight: element.bold ? 700 : 400,
+        fontStyle: element.italic ? "italic" : "normal",
+        color: element.color,
+        backgroundColor: element.background ? hexToRgba(element.background, element.backgroundOpacity) : "transparent",
+        borderRadius: element.cornerRadius * viewScale
+      }
+    }
+  );
+};
+export {
+  AnnotationTextOverlay as default
+};
+//# sourceMappingURL=AnnotationTextOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationTextOverlay.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationTextOverlay.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { ANNOTATION_TEXT_FONT_FAMILY } from '../annotationStyle';\nimport { hexToRgba } from '../helpers/annotationCanvas';\nimport { IAnnotationTextElement } from '../interfaces/annotationDocument';\n\ninterface IAnnotationTextOverlayProps {\n  element: IAnnotationTextElement;\n  viewScale: number;\n  value: string;\n  onChange: (value: string) => void;\n  onCommit: () => void;\n  onCancel: () => void;\n}\n\n/**\n * The editor sits exactly where the element renders and mirrors its typography, so typing and\n * the committed result never disagree.\n */\nconst AnnotationTextOverlay: React.FC<IAnnotationTextOverlayProps> = ({\n  element,\n  viewScale,\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n}) => {\n  const { t } = useTranslation('ui');\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useEffect(() => {\n    const frame = window.requestAnimationFrame(() => {\n      const textarea = textareaRef.current;\n      if (!textarea) return;\n      textarea.focus();\n      textarea.setSelectionRange(textarea.value.length, textarea.value.length);\n    });\n\n    return () => window.cancelAnimationFrame(frame);\n  }, [element.id]);\n\n  useEffect(() => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    textarea.style.height = 'auto';\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  }, [value, viewScale, element.fontSize]);\n\n  const fontSize = element.fontSize * viewScale;\n  const padding = element.padding * viewScale;\n\n  return (\n    <textarea\n      ref={textareaRef}\n      value={value}\n      aria-label={t('imageAnnotator.tools.text')}\n      placeholder={t('imageAnnotator.textPlaceholder')}\n      spellCheck={false}\n      onChange={(event) => onChange(event.target.value)}\n      onBlur={onCommit}\n      onKeyDown={(event) => {\n        event.stopPropagation();\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          onCancel();\n        }\n        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault();\n          onCommit();\n        }\n      }}\n      className=\"absolute z-10 resize-none overflow-hidden rounded-lg outline-none ring-2 ring-ring\"\n      style={{\n        left: element.x * viewScale,\n        top: element.y * viewScale,\n        width: element.width * viewScale,\n        transform: `rotate(${element.rotation}deg)`,\n        transformOrigin: 'top left',\n        fontFamily: ANNOTATION_TEXT_FONT_FAMILY,\n        fontSize,\n        lineHeight: 1.25,\n        padding,\n        textAlign: element.align,\n        fontWeight: element.bold ? 700 : 400,\n        fontStyle: element.italic ? 'italic' : 'normal',\n        color: element.color,\n        backgroundColor: element.background ? hexToRgba(element.background, element.backgroundOpacity) : 'transparent',\n        borderRadius: element.cornerRadius * viewScale,\n      }}\n    />\n  );\n};\n\nexport default AnnotationTextOverlay;\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,wBAA+D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,cAAc,OAAmC,IAAI;AAE3D,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,sBAAsB,MAAM;AAC/C,YAAM,WAAW,YAAY;AAC7B,UAAI,CAAC,SAAU;AACf,eAAS,MAAA;AACT,eAAS,kBAAkB,SAAS,MAAM,QAAQ,SAAS,MAAM,MAAM;AAAA,IACzE,CAAC;AAED,WAAO,MAAM,OAAO,qBAAqB,KAAK;AAAA,EAChD,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,YAAU,MAAM;AACd,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AACf,aAAS,MAAM,SAAS;AACxB,aAAS,MAAM,SAAS,GAAG,SAAS,YAAY;AAAA,EAClD,GAAG,CAAC,OAAO,WAAW,QAAQ,QAAQ,CAAC;AAEvC,QAAM,WAAW,QAAQ,WAAW;AACpC,QAAM,UAAU,QAAQ,UAAU;AAElC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,cAAY,EAAE,2BAA2B;AAAA,MACzC,aAAa,EAAE,gCAAgC;AAAA,MAC/C,YAAY;AAAA,MACZ,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD,QAAQ;AAAA,MACR,WAAW,CAAC,UAAU;AACpB,cAAM,gBAAA;AACN,YAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAM,eAAA;AACN,mBAAA;AAAA,QACF;AACA,YAAI,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM,UAAU;AAC7D,gBAAM,eAAA;AACN,mBAAA;AAAA,QACF;AAAA,MACF;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,MAAM,QAAQ,IAAI;AAAA,QAClB,KAAK,QAAQ,IAAI;AAAA,QACjB,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,UAAU,QAAQ,QAAQ;AAAA,QACrC,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB,YAAY,QAAQ,OAAO,MAAM;AAAA,QACjC,WAAW,QAAQ,SAAS,WAAW;AAAA,QACvC,OAAO,QAAQ;AAAA,QACf,iBAAiB,QAAQ,aAAa,UAAU,QAAQ,YAAY,QAAQ,iBAAiB,IAAI;AAAA,QACjG,cAAc,QAAQ,eAAe;AAAA,MAAA;AAAA,IACvC;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,15 @@
+import { SymbolCodepoints } from '../../MaterialSymbol';
+interface IAnnotationToolButtonProps {
+    icon: SymbolCodepoints;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    tone?: 'default' | 'danger';
+    /** Touch targets get 44px and a visible caption: a tooltip never opens on a phone. */
+    touch?: boolean;
+    showLabel?: boolean;
+    className?: string;
+    onClick: () => void;
+}
+declare const AnnotationToolButton: React.FC<IAnnotationToolButtonProps>;
+export default AnnotationToolButton;

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

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import ControlledTooltip from "../../ControlledTooltip.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+const AnnotationToolButton = ({
+  icon,
+  label,
+  active = false,
+  disabled = false,
+  tone = "default",
+  touch = false,
+  showLabel = false,
+  className,
+  onClick
+}) => {
+  const button = /* @__PURE__ */ jsxs(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      onClick,
+      disabled,
+      "aria-label": label,
+      "aria-pressed": active,
+      className: classNames(
+        "interactive flex shrink-0 items-center justify-center rounded-lg",
+        showLabel ? "h-14 w-16 flex-col gap-y-0.5 px-1" : touch ? "size-11" : "size-9",
+        active && "bg-surface text-brand-emphasis shadow-sm",
+        !active && tone === "default" && "text-foreground-subtle hover:bg-muted-active hover:text-foreground",
+        !active && tone === "danger" && "text-foreground-subtle hover:bg-danger-soft hover:text-danger-emphasis",
+        disabled && "pointer-events-none text-foreground-faint",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: touch || showLabel ? 22 : 20 }),
+        showLabel && /* @__PURE__ */ jsx("span", { className: "w-full truncate text-center text-xxs leading-tight", children: label })
+      ]
+    }
+  );
+  if (showLabel) return button;
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: label, className: "z-[9999]", children: button });
+};
+export {
+  AnnotationToolButton as default
+};
+//# sourceMappingURL=AnnotationToolButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationToolButton.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationToolButton.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\ninterface IAnnotationToolButtonProps {\n  icon: SymbolCodepoints;\n  label: string;\n  active?: boolean;\n  disabled?: boolean;\n  tone?: 'default' | 'danger';\n  /** Touch targets get 44px and a visible caption: a tooltip never opens on a phone. */\n  touch?: boolean;\n  showLabel?: boolean;\n  className?: string;\n  onClick: () => void;\n}\n\nconst AnnotationToolButton: React.FC<IAnnotationToolButtonProps> = ({\n  icon,\n  label,\n  active = false,\n  disabled = false,\n  tone = 'default',\n  touch = false,\n  showLabel = false,\n  className,\n  onClick,\n}) => {\n  const button = (\n    <ControlledButton\n      defaultHtmlButton\n      onClick={onClick}\n      disabled={disabled}\n      aria-label={label}\n      aria-pressed={active}\n      className={classNames(\n        'interactive flex shrink-0 items-center justify-center rounded-lg',\n        showLabel ? 'h-14 w-16 flex-col gap-y-0.5 px-1' : touch ? 'size-11' : 'size-9',\n        active && 'bg-surface text-brand-emphasis shadow-sm',\n        !active && tone === 'default' && 'text-foreground-subtle hover:bg-muted-active hover:text-foreground',\n        !active && tone === 'danger' && 'text-foreground-subtle hover:bg-danger-soft hover:text-danger-emphasis',\n        disabled && 'pointer-events-none text-foreground-faint',\n        className,\n      )}\n    >\n      <MaterialSymbol icon={icon} size={touch || showLabel ? 22 : 20} />\n      {showLabel && <span className=\"w-full truncate text-center text-xxs leading-tight\">{label}</span>}\n    </ControlledButton>\n  );\n\n  if (showLabel) return button;\n\n  return (\n    <ControlledTooltip content={label} className=\"z-[9999]\">\n      {button}\n    </ControlledTooltip>\n  );\n};\n\nexport default AnnotationToolButton;\n"],"names":[],"mappings":";;;;;AAmBA,MAAM,uBAA6D,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,YAAY,sCAAsC,QAAQ,YAAY;AAAA,QACtE,UAAU;AAAA,QACV,CAAC,UAAU,SAAS,aAAa;AAAA,QACjC,CAAC,UAAU,SAAS,YAAY;AAAA,QAChC,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,kBAAe,MAAY,MAAM,SAAS,YAAY,KAAK,IAAI;AAAA,QAC/D,aAAa,oBAAC,QAAA,EAAK,WAAU,sDAAsD,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9F,MAAI,UAAW,QAAO;AAEtB,6BACG,mBAAA,EAAkB,SAAS,OAAO,WAAU,YAC1C,UAAA,QACH;AAEJ;"}

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

@@ -0,0 +1,10 @@
+import { TAnnotationTool } from '../interfaces/annotationDocument';
+interface IAnnotationToolbarProps {
+    tool: TAnnotationTool;
+    touch: boolean;
+    actions?: React.ReactNode;
+    onToolChange: (tool: TAnnotationTool) => void;
+    onInsertImage: (file: File) => void;
+}
+declare const AnnotationToolbar: React.FC<IAnnotationToolbarProps>;
+export default AnnotationToolbar;

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

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const TOOL_OPTIONS = [
+  { tool: "select", icon: "arrow_selector_tool", labelKey: "imageAnnotator.tools.select" },
+  { tool: "freehand", icon: "draw", labelKey: "imageAnnotator.tools.pen" },
+  { tool: "eraser", icon: "ink_eraser", labelKey: "imageAnnotator.tools.eraser" },
+  { tool: "arrow", icon: "north_east", labelKey: "imageAnnotator.tools.arrow" },
+  { tool: "line", icon: "horizontal_rule", labelKey: "imageAnnotator.tools.line" },
+  { tool: "rectangle", icon: "rectangle", labelKey: "imageAnnotator.tools.rectangle" },
+  { tool: "ellipse", icon: "circle", labelKey: "imageAnnotator.tools.ellipse" },
+  { tool: "text", icon: "title", labelKey: "imageAnnotator.tools.text" }
+];
+const ACCEPTED_IMAGE_TYPES = "image/png,image/jpeg,image/webp,image/gif";
+const AnnotationToolbar = ({
+  tool,
+  touch,
+  actions,
+  onToolChange,
+  onInsertImage
+}) => {
+  const { t } = useTranslation("ui");
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex shrink-0 items-center gap-x-2", !touch && "flex-wrap gap-y-2"), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          "flex items-center gap-x-0.5 rounded-xl bg-muted-hover p-1",
+          touch && "min-w-0 flex-1 overflow-x-auto"
+        ),
+        children: [
+          TOOL_OPTIONS.map(({ tool: option, icon, labelKey }) => /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon,
+              label: t(labelKey),
+              active: tool === option,
+              touch,
+              showLabel: touch,
+              onClick: () => onToolChange(option)
+            },
+            option
+          )),
+          /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon: "add_photo_alternate",
+              label: t("imageAnnotator.tools.image"),
+              touch,
+              showLabel: touch,
+              onClick: () => fileInputRef.current?.click()
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ACCEPTED_IMAGE_TYPES,
+        className: "hidden",
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (file) onInsertImage(file);
+        }
+      }
+    ),
+    actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
+  ] });
+};
+export {
+  AnnotationToolbar as default
+};
+//# sourceMappingURL=AnnotationToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationToolbar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationToolbar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { TAnnotationTool } from '../interfaces/annotationDocument';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\nconst TOOL_OPTIONS: Array<{ tool: TAnnotationTool; icon: SymbolCodepoints; labelKey: string }> = [\n  { tool: 'select', icon: 'arrow_selector_tool', labelKey: 'imageAnnotator.tools.select' },\n  { tool: 'freehand', icon: 'draw', labelKey: 'imageAnnotator.tools.pen' },\n  { tool: 'eraser', icon: 'ink_eraser', labelKey: 'imageAnnotator.tools.eraser' },\n  { tool: 'arrow', icon: 'north_east', labelKey: 'imageAnnotator.tools.arrow' },\n  { tool: 'line', icon: 'horizontal_rule', labelKey: 'imageAnnotator.tools.line' },\n  { tool: 'rectangle', icon: 'rectangle', labelKey: 'imageAnnotator.tools.rectangle' },\n  { tool: 'ellipse', icon: 'circle', labelKey: 'imageAnnotator.tools.ellipse' },\n  { tool: 'text', icon: 'title', labelKey: 'imageAnnotator.tools.text' },\n];\n\nconst ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp,image/gif';\n\ninterface IAnnotationToolbarProps {\n  tool: TAnnotationTool;\n  touch: boolean;\n  actions?: React.ReactNode;\n  onToolChange: (tool: TAnnotationTool) => void;\n  onInsertImage: (file: File) => void;\n}\n\nconst AnnotationToolbar: React.FC<IAnnotationToolbarProps> = ({\n  tool,\n  touch,\n  actions,\n  onToolChange,\n  onInsertImage,\n}) => {\n  const { t } = useTranslation('ui');\n  const fileInputRef = useRef<HTMLInputElement | null>(null);\n\n  return (\n    <div className={classNames('flex shrink-0 items-center gap-x-2', !touch && 'flex-wrap gap-y-2')}>\n      <div\n        className={classNames(\n          'flex items-center gap-x-0.5 rounded-xl bg-muted-hover p-1',\n          touch && 'min-w-0 flex-1 overflow-x-auto',\n        )}\n      >\n        {TOOL_OPTIONS.map(({ tool: option, icon, labelKey }) => (\n          <AnnotationToolButton\n            key={option}\n            icon={icon}\n            label={t(labelKey)}\n            active={tool === option}\n            touch={touch}\n            showLabel={touch}\n            onClick={() => onToolChange(option)}\n          />\n        ))}\n\n        <AnnotationToolButton\n          icon=\"add_photo_alternate\"\n          label={t('imageAnnotator.tools.image')}\n          touch={touch}\n          showLabel={touch}\n          onClick={() => fileInputRef.current?.click()}\n        />\n      </div>\n\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={ACCEPTED_IMAGE_TYPES}\n        className=\"hidden\"\n        onChange={(event) => {\n          const file = event.target.files?.[0];\n          event.target.value = '';\n          if (file) onInsertImage(file);\n        }}\n      />\n\n      {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n    </div>\n  );\n};\n\nexport default AnnotationToolbar;\n"],"names":[],"mappings":";;;;;AAUA,MAAM,eAA2F;AAAA,EAC/F,EAAE,MAAM,UAAU,MAAM,uBAAuB,UAAU,8BAAA;AAAA,EACzD,EAAE,MAAM,YAAY,MAAM,QAAQ,UAAU,2BAAA;AAAA,EAC5C,EAAE,MAAM,UAAU,MAAM,cAAc,UAAU,8BAAA;AAAA,EAChD,EAAE,MAAM,SAAS,MAAM,cAAc,UAAU,6BAAA;AAAA,EAC/C,EAAE,MAAM,QAAQ,MAAM,mBAAmB,UAAU,4BAAA;AAAA,EACnD,EAAE,MAAM,aAAa,MAAM,aAAa,UAAU,iCAAA;AAAA,EAClD,EAAE,MAAM,WAAW,MAAM,UAAU,UAAU,+BAAA;AAAA,EAC7C,EAAE,MAAM,QAAQ,MAAM,SAAS,UAAU,4BAAA;AAC3C;AAEA,MAAM,uBAAuB;AAU7B,MAAM,oBAAuD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,eAAe,OAAgC,IAAI;AAEzD,SACE,qBAAC,SAAI,WAAW,WAAW,sCAAsC,CAAC,SAAS,mBAAmB,GAC5F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,UAAA,aAAa,IAAI,CAAC,EAAE,MAAM,QAAQ,MAAM,eACvC;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,OAAO,EAAE,QAAQ;AAAA,cACjB,QAAQ,SAAS;AAAA,cACjB;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,MAAM;AAAA,YAAA;AAAA,YAN7B;AAAA,UAAA,CAQR;AAAA,UAED;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,4BAA4B;AAAA,cACrC;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,SAAS,MAAA;AAAA,YAAM;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,WAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,OAAO,MAAM,OAAO,QAAQ,CAAC;AACnC,gBAAM,OAAO,QAAQ;AACrB,cAAI,oBAAoB,IAAI;AAAA,QAC9B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,WAAW,oBAAC,OAAA,EAAI,WAAU,6BAA6B,UAAA,QAAA,CAAQ;AAAA,EAAA,GAClE;AAEJ;"}

package/dist/components/UI/ImageAnnotator/helpers/annotationCanvas.d.ts

@@ -0,0 +1,21 @@
+import { IAnnotationPoint, IAnnotationSize } from '../interfaces/annotationDocument';
+/** Selection chrome is drawn inside a scaled stage, so every screen-pixel size divides by the scale. */
+export declare const SELECTION_ANCHOR_PX = 10;
+export declare const SELECTION_BORDER_PX = 1.5;
+export declare const SEGMENT_HANDLE_PX = 7;
+export declare const MIN_HIT_STROKE_PX = 18;
+export declare const hexToRgba: (color: string, alpha: number) => string;
+export interface IStageFit {
+    width: number;
+    height: number;
+    scale: number;
+}
+/** The stage always shows the whole image: element coordinates stay in native image pixels. */
+export declare const fitStageToViewport: (image: IAnnotationSize, viewport: IAnnotationSize) => IStageFit;
+export declare const clampPointToImage: (point: IAnnotationPoint, size: IAnnotationSize) => IAnnotationPoint;
+/**
+ * Freehand sampling: a pointer emits far more points than a stroke needs, and every extra point is
+ * paid again on every redraw and on export.
+ */
+export declare const shouldAppendFreehandPoint: (points: Array<number>, next: IAnnotationPoint, minDistance: number) => boolean;
+export declare const isDegenerateDrag: (start: IAnnotationPoint, end: IAnnotationPoint, threshold: number) => boolean;

package/dist/components/UI/ImageAnnotator/helpers/annotationCanvas.js

@@ -0,0 +1,45 @@
+const SELECTION_ANCHOR_PX = 10;
+const SELECTION_BORDER_PX = 1.5;
+const SEGMENT_HANDLE_PX = 7;
+const MIN_HIT_STROKE_PX = 18;
+const hexToRgba = (color, alpha) => {
+  const hex = color.replace("#", "");
+  if (hex.length !== 6) return color;
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+const fitStageToViewport = (image, viewport) => {
+  const safeWidth = Math.max(1, viewport.width);
+  const safeHeight = Math.max(1, viewport.height);
+  const scale = Math.min(safeWidth / image.width, safeHeight / image.height, 1);
+  return {
+    width: Math.max(1, Math.round(image.width * scale)),
+    height: Math.max(1, Math.round(image.height * scale)),
+    scale: scale || 1
+  };
+};
+const clampPointToImage = (point, size) => ({
+  x: Math.min(Math.max(point.x, 0), size.width),
+  y: Math.min(Math.max(point.y, 0), size.height)
+});
+const shouldAppendFreehandPoint = (points, next, minDistance) => {
+  const lastX = points[points.length - 2];
+  const lastY = points[points.length - 1];
+  if (lastX === void 0 || lastY === void 0) return true;
+  return Math.hypot(next.x - lastX, next.y - lastY) >= minDistance;
+};
+const isDegenerateDrag = (start, end, threshold) => Math.abs(end.x - start.x) < threshold && Math.abs(end.y - start.y) < threshold;
+export {
+  MIN_HIT_STROKE_PX,
+  SEGMENT_HANDLE_PX,
+  SELECTION_ANCHOR_PX,
+  SELECTION_BORDER_PX,
+  clampPointToImage,
+  fitStageToViewport,
+  hexToRgba,
+  isDegenerateDrag,
+  shouldAppendFreehandPoint
+};
+//# sourceMappingURL=annotationCanvas.js.map