@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,12 @@
+import { TAnnotationCropAspect } from '../helpers/annotationCrop';
+interface IAnnotationCropBarProps {
+    aspect: TAnnotationCropAspect;
+    touch: boolean;
+    canReset: boolean;
+    onAspectChange: (aspect: TAnnotationCropAspect) => void;
+    onReset: () => void;
+    onCancel: () => void;
+    onApply: () => void;
+}
+declare const AnnotationCropBar: React.FC<IAnnotationCropBarProps>;
+export default AnnotationCropBar;

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

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import ControlledViewToggle from "../../../Form/ControlledViewToggle.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const AnnotationCropBar = ({
+  aspect,
+  touch,
+  canReset,
+  onAspectChange,
+  onReset,
+  onCancel,
+  onApply
+}) => {
+  const { t } = useTranslation("ui");
+  const aspectOptions = [
+    { value: "free", label: t("imageAnnotator.crop.aspect.free") },
+    { value: "original", label: t("imageAnnotator.crop.aspect.original") },
+    { value: "square", label: t("imageAnnotator.crop.aspect.square") },
+    { value: "portrait", label: t("imageAnnotator.crop.aspect.portrait") },
+    { value: "classic", label: t("imageAnnotator.crop.aspect.classic") },
+    { value: "wide", label: t("imageAnnotator.crop.aspect.wide") }
+  ];
+  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: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1 text-xs font-medium text-foreground-muted", children: t("imageAnnotator.crop.aspectLabel") }),
+        /* @__PURE__ */ jsx(
+          ControlledViewToggle,
+          {
+            size: "sm",
+            syncWithUrl: false,
+            options: aspectOptions,
+            value: aspect,
+            onChange: onAspectChange,
+            className: "shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnnotationToolButton,
+          {
+            icon: "restart_alt",
+            label: t("imageAnnotator.crop.reset"),
+            touch,
+            disabled: !canReset,
+            className: touch ? void 0 : "size-8",
+            onClick: onReset
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              size: "sm",
+              variant: "text",
+              tone: "neutral",
+              onClick: onCancel,
+              className: classNames("shrink-0 normal-case", touch && "h-11"),
+              children: t("imageAnnotator.crop.cancel")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ControlledButton,
+            {
+              size: "sm",
+              onClick: onApply,
+              className: classNames("flex shrink-0 items-center gap-x-1.5 normal-case", touch && "h-11"),
+              children: [
+                /* @__PURE__ */ jsx(MaterialSymbol, { icon: "crop", size: 14, color: "white" }),
+                t("imageAnnotator.crop.apply")
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  AnnotationCropBar as default
+};
+//# sourceMappingURL=AnnotationCropBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationCropBar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationCropBar.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledViewToggle, { IControlledViewToggleOption } from '@/components/Form/ControlledViewToggle';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport { TAnnotationCropAspect } from '../helpers/annotationCrop';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\ninterface IAnnotationCropBarProps {\n  aspect: TAnnotationCropAspect;\n  touch: boolean;\n  canReset: boolean;\n  onAspectChange: (aspect: TAnnotationCropAspect) => void;\n  onReset: () => void;\n  onCancel: () => void;\n  onApply: () => void;\n}\n\nconst AnnotationCropBar: React.FC<IAnnotationCropBarProps> = ({\n  aspect,\n  touch,\n  canReset,\n  onAspectChange,\n  onReset,\n  onCancel,\n  onApply,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const aspectOptions: Array<IControlledViewToggleOption<TAnnotationCropAspect>> = [\n    { value: 'free', label: t('imageAnnotator.crop.aspect.free') },\n    { value: 'original', label: t('imageAnnotator.crop.aspect.original') },\n    { value: 'square', label: t('imageAnnotator.crop.aspect.square') },\n    { value: 'portrait', label: t('imageAnnotator.crop.aspect.portrait') },\n    { value: 'classic', label: t('imageAnnotator.crop.aspect.classic') },\n    { value: 'wide', label: t('imageAnnotator.crop.aspect.wide') },\n  ];\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      <span className=\"shrink-0 px-1 text-xs font-medium text-foreground-muted\">\n        {t('imageAnnotator.crop.aspectLabel')}\n      </span>\n\n      <ControlledViewToggle<TAnnotationCropAspect>\n        size=\"sm\"\n        syncWithUrl={false}\n        options={aspectOptions}\n        value={aspect}\n        onChange={onAspectChange}\n        className=\"shrink-0\"\n      />\n\n      <AnnotationToolButton\n        icon=\"restart_alt\"\n        label={t('imageAnnotator.crop.reset')}\n        touch={touch}\n        disabled={!canReset}\n        className={touch ? undefined : 'size-8'}\n        onClick={onReset}\n      />\n\n      <div className=\"ml-auto flex shrink-0 items-center gap-x-2\">\n        <ControlledButton\n          size=\"sm\"\n          variant=\"text\"\n          tone=\"neutral\"\n          onClick={onCancel}\n          className={classNames('shrink-0 normal-case', touch && 'h-11')}\n        >\n          {t('imageAnnotator.crop.cancel')}\n        </ControlledButton>\n        <ControlledButton\n          size=\"sm\"\n          onClick={onApply}\n          className={classNames('flex shrink-0 items-center gap-x-1.5 normal-case', touch && 'h-11')}\n        >\n          <MaterialSymbol icon=\"crop\" size={14} color=\"white\" />\n          {t('imageAnnotator.crop.apply')}\n        </ControlledButton>\n      </div>\n    </div>\n  );\n};\n\nexport default AnnotationCropBar;\n"],"names":[],"mappings":";;;;;;;AAqBA,MAAM,oBAAuD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,gBAA2E;AAAA,IAC/E,EAAE,OAAO,QAAQ,OAAO,EAAE,iCAAiC,EAAA;AAAA,IAC3D,EAAE,OAAO,YAAY,OAAO,EAAE,qCAAqC,EAAA;AAAA,IACnE,EAAE,OAAO,UAAU,OAAO,EAAE,mCAAmC,EAAA;AAAA,IAC/D,EAAE,OAAO,YAAY,OAAO,EAAE,qCAAqC,EAAA;AAAA,IACnE,EAAE,OAAO,WAAW,OAAO,EAAE,oCAAoC,EAAA;AAAA,IACjE,EAAE,OAAO,QAAQ,OAAO,EAAE,iCAAiC,EAAA;AAAA,EAAE;AAG/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,oBAAoB;AAAA,MAAA;AAAA,MAG9B,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2DACb,UAAA,EAAE,iCAAiC,GACtC;AAAA,QAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,aAAa;AAAA,YACb,SAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,EAAE,2BAA2B;AAAA,YACpC;AAAA,YACA,UAAU,CAAC;AAAA,YACX,WAAW,QAAQ,SAAY;AAAA,YAC/B,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX,qBAAC,OAAA,EAAI,WAAU,8CACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,WAAW,wBAAwB,SAAS,MAAM;AAAA,cAE5D,YAAE,4BAA4B;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,WAAW,oDAAoD,SAAS,MAAM;AAAA,cAEzF,UAAA;AAAA,gBAAA,oBAAC,kBAAe,MAAK,QAAO,MAAM,IAAI,OAAM,SAAQ;AAAA,gBACnD,EAAE,2BAA2B;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,8 @@
+interface IAnnotationElementActionsProps {
+    touch: boolean;
+    onReorder: (direction: 'forward' | 'backward') => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+declare const AnnotationElementActions: React.FC<IAnnotationElementActionsProps>;
+export default AnnotationElementActions;

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,17 @@
+import { IAnnotationPoint, IAnnotationTextElement } from '../interfaces/annotationDocument';
+interface IAnnotationTextOverlayProps {
+    element: IAnnotationTextElement;
+    viewScale: number;
+    /** Top-left of the visible image region, so a cropped view still places the editor over the text. */
+    viewOrigin: IAnnotationPoint;
+    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,79 @@
+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,
+  viewOrigin,
+  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 - viewOrigin.x) * viewScale,
+        top: (element.y - viewOrigin.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 { IAnnotationPoint, IAnnotationTextElement } from '../interfaces/annotationDocument';\n\ninterface IAnnotationTextOverlayProps {\n  element: IAnnotationTextElement;\n  viewScale: number;\n  /** Top-left of the visible image region, so a cropped view still places the editor over the text. */\n  viewOrigin: IAnnotationPoint;\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  viewOrigin,\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 - viewOrigin.x) * viewScale,\n        top: (element.y - viewOrigin.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":";;;;;AAsBA,MAAM,wBAA+D,CAAC;AAAA,EACpE;AAAA,EACA;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,OAAO,QAAQ,IAAI,WAAW,KAAK;AAAA,QACnC,MAAM,QAAQ,IAAI,WAAW,KAAK;AAAA,QAClC,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;