@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/ImageAnnotator/canvas/AnnotationSelection.js

@@ -0,0 +1,127 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect } from "react";
+import { Transformer, Circle } from "react-konva";
+import { readThemeToken } from "../../../../helpers/themeTokens.js";
+import { useResolvedTheme } from "../../../../hooks/useResolvedTheme.js";
+import { useThemeSkin } from "../../../../hooks/useThemeSkin.js";
+import { SELECTION_BORDER_PX, SELECTION_ANCHOR_PX, SEGMENT_HANDLE_PX } from "../helpers/annotationCanvas.js";
+import { isSegmentElement } from "../interfaces/annotationDocument.js";
+const MIN_TRANSFORM_SIZE = 8;
+const ROTATION_SNAPS = [0, 45, 90, 135, 180, 225, 270, 315];
+const TEXT_ANCHORS = ["top-left", "top-right", "bottom-left", "bottom-right", "middle-left", "middle-right"];
+const AnnotationSelection = ({
+  selectedElement,
+  viewScale,
+  getNode,
+  onChange
+}) => {
+  const resolvedTheme = useResolvedTheme();
+  const themeSkin = useThemeSkin();
+  const transformerRef = useRef(null);
+  const tokens = useMemo(
+    () => ({
+      accent: readThemeToken("brand", "#8B5CF6"),
+      surface: readThemeToken("surface", "#FFFFFF")
+    }),
+    [resolvedTheme, themeSkin]
+  );
+  const segment = selectedElement && isSegmentElement(selectedElement) ? selectedElement : null;
+  const transformableId = selectedElement && !segment ? selectedElement.id : null;
+  useEffect(() => {
+    const transformer = transformerRef.current;
+    if (!transformer) return;
+    const node = transformableId ? getNode(transformableId) : null;
+    transformer.nodes(node ? [node] : []);
+    transformer.forceUpdate();
+    transformer.getLayer()?.batchDraw();
+  }, [transformableId, selectedElement, getNode]);
+  const anchorSize = SELECTION_ANCHOR_PX / viewScale;
+  const borderWidth = SELECTION_BORDER_PX / viewScale;
+  const applyLivePoints = (handle, isStart) => {
+    if (!segment) return;
+    const node = getNode(segment.id);
+    if (!node) return;
+    const start = isStart ? handle.position() : segment.start;
+    const end = isStart ? segment.end : handle.position();
+    node.position({ x: start.x, y: start.y });
+    node.points([0, 0, end.x - start.x, end.y - start.y]);
+    node.getLayer()?.batchDraw();
+  };
+  const commitEndpoint = (handle, isStart) => {
+    if (!segment) return;
+    const { x, y } = handle.position();
+    onChange(
+      segment.id,
+      (current) => isSegmentElement(current) ? { ...current, [isStart ? "start" : "end"]: { x, y } } : current
+    );
+  };
+  const handleProps = {
+    radius: SEGMENT_HANDLE_PX / viewScale,
+    fill: tokens.surface,
+    stroke: tokens.accent,
+    strokeWidth: borderWidth * 1.5,
+    strokeScaleEnabled: false,
+    draggable: true,
+    hitStrokeWidth: SEGMENT_HANDLE_PX * 2 / viewScale,
+    onMouseEnter: (event) => {
+      const container = event.target.getStage()?.container();
+      if (container) container.style.cursor = "move";
+    },
+    onMouseLeave: (event) => {
+      const container = event.target.getStage()?.container();
+      if (container) container.style.cursor = "default";
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Transformer,
+      {
+        ref: transformerRef,
+        visible: Boolean(transformableId),
+        rotateEnabled: selectedElement?.type !== "freehand",
+        enabledAnchors: selectedElement?.type === "text" ? TEXT_ANCHORS : void 0,
+        keepRatio: true,
+        shouldOverdrawWholeArea: true,
+        ignoreStroke: true,
+        rotationSnaps: ROTATION_SNAPS,
+        rotationSnapTolerance: 4,
+        anchorSize,
+        anchorCornerRadius: anchorSize / 4,
+        anchorFill: tokens.surface,
+        anchorStroke: tokens.accent,
+        anchorStrokeWidth: borderWidth,
+        borderStroke: tokens.accent,
+        borderStrokeWidth: borderWidth,
+        borderDash: [6 / viewScale, 4 / viewScale],
+        padding: 4 / viewScale,
+        boundBoxFunc: (oldBox, newBox) => newBox.width < MIN_TRANSFORM_SIZE || newBox.height < MIN_TRANSFORM_SIZE ? oldBox : newBox
+      }
+    ),
+    segment && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Circle,
+        {
+          ...handleProps,
+          x: segment.start.x,
+          y: segment.start.y,
+          onDragMove: (event) => applyLivePoints(event.target, true),
+          onDragEnd: (event) => commitEndpoint(event.target, true)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Circle,
+        {
+          ...handleProps,
+          x: segment.end.x,
+          y: segment.end.y,
+          onDragMove: (event) => applyLivePoints(event.target, false),
+          onDragEnd: (event) => commitEndpoint(event.target, false)
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  AnnotationSelection as default
+};
+//# sourceMappingURL=AnnotationSelection.js.map

package/dist/components/UI/ImageAnnotator/canvas/AnnotationSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationSelection.js","sources":["../../../../../src/components/UI/ImageAnnotator/canvas/AnnotationSelection.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport Konva from 'konva';\nimport { Circle, Transformer } from 'react-konva';\n\nimport { readThemeToken } from '@/helpers/themeTokens';\nimport { useResolvedTheme } from '@/hooks/useResolvedTheme';\nimport { useThemeSkin } from '@/hooks/useThemeSkin';\n\nimport { SEGMENT_HANDLE_PX, SELECTION_ANCHOR_PX, SELECTION_BORDER_PX } from '../helpers/annotationCanvas';\nimport { isSegmentElement, TAnnotationElement } from '../interfaces/annotationDocument';\n\nconst MIN_TRANSFORM_SIZE = 8;\nconst ROTATION_SNAPS = [0, 45, 90, 135, 180, 225, 270, 315];\n\nconst TEXT_ANCHORS = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right'];\n\ninterface IAnnotationSelectionProps {\n  selectedElement: TAnnotationElement | null;\n  viewScale: number;\n  getNode: (id: string) => Konva.Node | null;\n  onChange: (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => void;\n}\n\nconst AnnotationSelection: React.FC<IAnnotationSelectionProps> = ({\n  selectedElement,\n  viewScale,\n  getNode,\n  onChange,\n}) => {\n  const resolvedTheme = useResolvedTheme();\n  const themeSkin = useThemeSkin();\n  const transformerRef = useRef<Konva.Transformer | null>(null);\n\n  const tokens = useMemo(\n    () => ({\n      accent: readThemeToken('brand', '#8B5CF6'),\n      surface: readThemeToken('surface', '#FFFFFF'),\n    }),\n    [resolvedTheme, themeSkin],\n  );\n\n  const segment = selectedElement && isSegmentElement(selectedElement) ? selectedElement : null;\n  const transformableId = selectedElement && !segment ? selectedElement.id : null;\n\n  useEffect(() => {\n    const transformer = transformerRef.current;\n    if (!transformer) return;\n\n    const node = transformableId ? getNode(transformableId) : null;\n    transformer.nodes(node ? [node] : []);\n    transformer.forceUpdate();\n    transformer.getLayer()?.batchDraw();\n  }, [transformableId, selectedElement, getNode]);\n\n  const anchorSize = SELECTION_ANCHOR_PX / viewScale;\n  const borderWidth = SELECTION_BORDER_PX / viewScale;\n\n  /**\n   * Endpoint drags move the Konva node directly and only commit on release: routing every\n   * pointer frame through React state would push one history entry per frame.\n   */\n  const applyLivePoints = (handle: Konva.Node, isStart: boolean) => {\n    if (!segment) return;\n    const node = getNode(segment.id);\n    if (!node) return;\n\n    const start = isStart ? handle.position() : segment.start;\n    const end = isStart ? segment.end : handle.position();\n    node.position({ x: start.x, y: start.y });\n    (node as Konva.Line).points([0, 0, end.x - start.x, end.y - start.y]);\n    node.getLayer()?.batchDraw();\n  };\n\n  const commitEndpoint = (handle: Konva.Node, isStart: boolean) => {\n    if (!segment) return;\n    const { x, y } = handle.position();\n\n    onChange(segment.id, (current) =>\n      isSegmentElement(current) ? { ...current, [isStart ? 'start' : 'end']: { x, y } } : current,\n    );\n  };\n\n  const handleProps = {\n    radius: SEGMENT_HANDLE_PX / viewScale,\n    fill: tokens.surface,\n    stroke: tokens.accent,\n    strokeWidth: borderWidth * 1.5,\n    strokeScaleEnabled: false,\n    draggable: true,\n    hitStrokeWidth: (SEGMENT_HANDLE_PX * 2) / viewScale,\n    onMouseEnter: (event: Konva.KonvaEventObject<MouseEvent>) => {\n      const container = event.target.getStage()?.container();\n      if (container) container.style.cursor = 'move';\n    },\n    onMouseLeave: (event: Konva.KonvaEventObject<MouseEvent>) => {\n      const container = event.target.getStage()?.container();\n      if (container) container.style.cursor = 'default';\n    },\n  };\n\n  return (\n    <>\n      <Transformer\n        ref={transformerRef}\n        visible={Boolean(transformableId)}\n        rotateEnabled={selectedElement?.type !== 'freehand'}\n        enabledAnchors={selectedElement?.type === 'text' ? TEXT_ANCHORS : undefined}\n        keepRatio\n        shouldOverdrawWholeArea\n        ignoreStroke\n        rotationSnaps={ROTATION_SNAPS}\n        rotationSnapTolerance={4}\n        anchorSize={anchorSize}\n        anchorCornerRadius={anchorSize / 4}\n        anchorFill={tokens.surface}\n        anchorStroke={tokens.accent}\n        anchorStrokeWidth={borderWidth}\n        borderStroke={tokens.accent}\n        borderStrokeWidth={borderWidth}\n        borderDash={[6 / viewScale, 4 / viewScale]}\n        padding={4 / viewScale}\n        boundBoxFunc={(oldBox, newBox) =>\n          newBox.width < MIN_TRANSFORM_SIZE || newBox.height < MIN_TRANSFORM_SIZE ? oldBox : newBox\n        }\n      />\n\n      {segment && (\n        <>\n          <Circle\n            {...handleProps}\n            x={segment.start.x}\n            y={segment.start.y}\n            onDragMove={(event) => applyLivePoints(event.target, true)}\n            onDragEnd={(event) => commitEndpoint(event.target, true)}\n          />\n          <Circle\n            {...handleProps}\n            x={segment.end.x}\n            y={segment.end.y}\n            onDragMove={(event) => applyLivePoints(event.target, false)}\n            onDragEnd={(event) => commitEndpoint(event.target, false)}\n          />\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AnnotationSelection;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageAnnotator/canvas/AnnotationStage.d.ts

@@ -0,0 +1,26 @@
+import { default as Konva } from 'konva';
+import { IAnnotationStyle } from '../annotationStyle';
+import { IStageFit } from '../helpers/annotationCanvas';
+import { IAnnotationDocumentController } from '../hooks/useAnnotationDocument';
+import { IAnnotationCropRect, IAnnotationPoint, IAnnotationSize, TAnnotationTool } from '../interfaces/annotationDocument';
+interface IAnnotationStageProps {
+    baseImage: HTMLImageElement;
+    imageSize: IAnnotationSize;
+    fit: IStageFit;
+    /** Region of the image the stage shows: the applied crop, or the whole image while cropping. */
+    viewRect: IAnnotationCropRect;
+    cropDraft: IAnnotationCropRect | null;
+    cropAspectRatio: number | null;
+    /** Screen-pixel gutter around the image, so crop handles sitting on the image edge stay grabbable. */
+    gutter: number;
+    onCropDraftChange: (crop: IAnnotationCropRect) => void;
+    tool: TAnnotationTool;
+    style: IAnnotationStyle;
+    controller: IAnnotationDocumentController;
+    editingTextId: string | null;
+    stageRef: React.MutableRefObject<Konva.Stage | null>;
+    onRequestTextEdit: (id: string) => void;
+    onTextPlaced: (point: IAnnotationPoint) => void;
+}
+declare const AnnotationStage: React.FC<IAnnotationStageProps>;
+export default AnnotationStage;

package/dist/components/UI/ImageAnnotator/canvas/AnnotationStage.js

@@ -0,0 +1,241 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { Stage, Layer, Image } from "react-konva";
+import { isDegenerateDrag, shouldAppendFreehandPoint, clampPointToImage } from "../helpers/annotationCanvas.js";
+import { createFreehandElement, createSegmentElement, createShapeElement } from "../helpers/annotationElements.js";
+import { ensureKonvaFullBuild } from "../helpers/konvaFullBuild.js";
+import AnnotationCropFrame from "./AnnotationCropFrame.js";
+import AnnotationElementNode from "./AnnotationElementNode.js";
+import AnnotationSelection from "./AnnotationSelection.js";
+ensureKonvaFullBuild();
+const DEGENERATE_DRAG_PX = 4;
+const FREEHAND_MIN_DISTANCE_PX = 2;
+const DRAWING_TOOLS = ["freehand", "line", "arrow", "rectangle", "ellipse"];
+const cursorForTool = (tool) => {
+  if (tool === "select") return "default";
+  if (tool === "text") return "text";
+  if (tool === "eraser") return "cell";
+  if (tool === "crop") return "default";
+  return "crosshair";
+};
+const AnnotationStage = ({
+  baseImage,
+  imageSize,
+  fit,
+  viewRect,
+  cropDraft,
+  cropAspectRatio,
+  gutter,
+  onCropDraftChange,
+  tool,
+  style,
+  controller,
+  editingTextId,
+  stageRef,
+  onRequestTextEdit,
+  onTextPlaced
+}) => {
+  const nodesRef = useRef(/* @__PURE__ */ new Map());
+  const dragOriginRef = useRef(null);
+  const erasedIdsRef = useRef(/* @__PURE__ */ new Set());
+  const finishGestureRef = useRef(() => void 0);
+  const [draft, setDraft] = useState(null);
+  const [gestureActive, setGestureActive] = useState(false);
+  const { select, addElement, updateElement, removeElements } = controller;
+  const layerX = gutter / fit.scale - viewRect.x;
+  const layerY = gutter / fit.scale - viewRect.y;
+  const registerNode = useCallback((id, node) => {
+    if (node) nodesRef.current.set(id, node);
+    else nodesRef.current.delete(id);
+  }, []);
+  const getNode = useCallback((id) => nodesRef.current.get(id) ?? null, []);
+  const pointFromStage = (stage) => {
+    const pointer = stage.getPointerPosition();
+    if (!pointer) return null;
+    const point = clampPointToImage(
+      { x: (pointer.x - gutter) / fit.scale, y: (pointer.y - gutter) / fit.scale },
+      { width: viewRect.width, height: viewRect.height }
+    );
+    return { x: point.x + viewRect.x, y: point.y + viewRect.y };
+  };
+  const eraseAtPointer = (stage) => {
+    const pointer = stage.getPointerPosition();
+    if (!pointer) return;
+    let node = stage.getIntersection(pointer);
+    while (node && !node.id()) node = node.getParent();
+    if (node?.id()) erasedIdsRef.current.add(node.id());
+  };
+  const handlePointerDown = (event) => {
+    const stage = event.target.getStage();
+    if (!stage) return;
+    if (tool === "select") {
+      if (event.target === stage) select(null);
+      return;
+    }
+    if (tool === "crop") return;
+    if (tool === "eraser") {
+      dragOriginRef.current = { x: 0, y: 0 };
+      erasedIdsRef.current = /* @__PURE__ */ new Set();
+      setGestureActive(true);
+      eraseAtPointer(stage);
+      return;
+    }
+    const point = pointFromStage(stage);
+    if (!point) return;
+    if (tool === "text") {
+      onTextPlaced(point);
+      return;
+    }
+    if (!DRAWING_TOOLS.includes(tool)) return;
+    dragOriginRef.current = point;
+    setGestureActive(true);
+    if (tool === "freehand") setDraft(createFreehandElement(point, style, imageSize));
+    else if (tool === "line" || tool === "arrow") setDraft(createSegmentElement(tool, point, point, style, imageSize));
+    else if (tool === "rectangle" || tool === "ellipse")
+      setDraft(createShapeElement(tool, point, point, style, imageSize));
+  };
+  const handlePointerMove = (event) => {
+    const stage = event.target.getStage();
+    if (!stage) return;
+    if (tool === "eraser") {
+      if (dragOriginRef.current) eraseAtPointer(stage);
+      return;
+    }
+    const origin = dragOriginRef.current;
+    if (!origin || !draft) return;
+    const point = pointFromStage(stage);
+    if (!point) return;
+    setDraft((current) => {
+      if (!current) return current;
+      if (current.type === "freehand") {
+        const next = { x: point.x - current.x, y: point.y - current.y };
+        if (!shouldAppendFreehandPoint(current.points, next, FREEHAND_MIN_DISTANCE_PX / fit.scale)) return current;
+        return { ...current, points: [...current.points, next.x, next.y] };
+      }
+      if (current.type === "line" || current.type === "arrow") return { ...current, end: point };
+      if (current.type === "rectangle" || current.type === "ellipse") {
+        return {
+          ...current,
+          x: Math.min(origin.x, point.x),
+          y: Math.min(origin.y, point.y),
+          width: Math.abs(point.x - origin.x),
+          height: Math.abs(point.y - origin.y)
+        };
+      }
+      return current;
+    });
+  };
+  const handlePointerUp = () => {
+    const origin = dragOriginRef.current;
+    dragOriginRef.current = null;
+    setGestureActive(false);
+    if (tool === "eraser") {
+      removeElements([...erasedIdsRef.current]);
+      erasedIdsRef.current = /* @__PURE__ */ new Set();
+      return;
+    }
+    const pending = draft;
+    setDraft(null);
+    if (!pending || !origin) return;
+    if (pending.type === "freehand") {
+      if (pending.points.length < 4) return;
+      addElement(pending, { select: false });
+      return;
+    }
+    if (pending.type === "line" || pending.type === "arrow") {
+      if (isDegenerateDrag(pending.start, pending.end, DEGENERATE_DRAG_PX / fit.scale)) return;
+      addElement(pending);
+      return;
+    }
+    if (pending.type === "rectangle" || pending.type === "ellipse") {
+      if (pending.width < DEGENERATE_DRAG_PX / fit.scale || pending.height < DEGENERATE_DRAG_PX / fit.scale) return;
+      addElement(pending);
+    }
+  };
+  finishGestureRef.current = handlePointerUp;
+  useEffect(() => {
+    if (!gestureActive) return;
+    const finish = () => finishGestureRef.current();
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+    return () => {
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+    };
+  }, [gestureActive]);
+  return /* @__PURE__ */ jsxs(
+    Stage,
+    {
+      ref: stageRef,
+      width: fit.width + gutter * 2,
+      height: fit.height + gutter * 2,
+      scaleX: fit.scale,
+      scaleY: fit.scale,
+      style: { cursor: cursorForTool(tool) },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      children: [
+        /* @__PURE__ */ jsx(Layer, { listening: false, x: layerX, y: layerY, children: /* @__PURE__ */ jsx(Image, { image: baseImage, width: imageSize.width, height: imageSize.height, perfectDrawEnabled: false }) }),
+        /* @__PURE__ */ jsxs(Layer, { x: layerX, y: layerY, children: [
+          controller.elements.map((element) => /* @__PURE__ */ jsx(
+            AnnotationElementNode,
+            {
+              element,
+              draggable: tool === "select",
+              listening: tool === "select" || tool === "eraser",
+              viewScale: fit.scale,
+              idleCursor: cursorForTool(tool),
+              hidden: element.id === editingTextId,
+              onSelect: select,
+              onChange: updateElement,
+              onRequestTextEdit,
+              registerNode
+            },
+            element.id
+          )),
+          draft && /* @__PURE__ */ jsx(
+            AnnotationElementNode,
+            {
+              element: draft,
+              draggable: false,
+              listening: false,
+              viewScale: fit.scale,
+              idleCursor: cursorForTool(tool),
+              hidden: false,
+              onSelect: select,
+              onChange: updateElement,
+              onRequestTextEdit,
+              registerNode: () => void 0
+            }
+          ),
+          tool === "crop" && cropDraft && /* @__PURE__ */ jsx(
+            AnnotationCropFrame,
+            {
+              crop: cropDraft,
+              imageSize,
+              viewScale: fit.scale,
+              gutter,
+              aspectRatio: cropAspectRatio,
+              onChange: onCropDraftChange
+            }
+          ),
+          tool === "select" && !editingTextId && /* @__PURE__ */ jsx(
+            AnnotationSelection,
+            {
+              selectedElement: controller.selectedElement,
+              viewScale: fit.scale,
+              getNode,
+              onChange: updateElement
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  AnnotationStage as default
+};
+//# sourceMappingURL=AnnotationStage.js.map

package/dist/components/UI/ImageAnnotator/canvas/AnnotationStage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationStage.js","sources":["../../../../../src/components/UI/ImageAnnotator/canvas/AnnotationStage.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport Konva from 'konva';\nimport { Image as KonvaImage, Layer, Stage } from 'react-konva';\n\nimport { IAnnotationStyle } from '../annotationStyle';\nimport { clampPointToImage, isDegenerateDrag, IStageFit, shouldAppendFreehandPoint } from '../helpers/annotationCanvas';\nimport { createFreehandElement, createSegmentElement, createShapeElement } from '../helpers/annotationElements';\nimport { ensureKonvaFullBuild } from '../helpers/konvaFullBuild';\nimport { IAnnotationDocumentController } from '../hooks/useAnnotationDocument';\nimport {\n  IAnnotationCropRect,\n  IAnnotationPoint,\n  IAnnotationSize,\n  TAnnotationElement,\n  TAnnotationTool,\n} from '../interfaces/annotationDocument';\n\nimport AnnotationCropFrame from './AnnotationCropFrame';\nimport AnnotationElementNode from './AnnotationElementNode';\nimport AnnotationSelection from './AnnotationSelection';\n\nensureKonvaFullBuild();\n\nconst DEGENERATE_DRAG_PX = 4;\nconst FREEHAND_MIN_DISTANCE_PX = 2;\n\nconst DRAWING_TOOLS: Array<TAnnotationTool> = ['freehand', 'line', 'arrow', 'rectangle', 'ellipse'];\n\ninterface IAnnotationStageProps {\n  baseImage: HTMLImageElement;\n  imageSize: IAnnotationSize;\n  fit: IStageFit;\n  /** Region of the image the stage shows: the applied crop, or the whole image while cropping. */\n  viewRect: IAnnotationCropRect;\n  cropDraft: IAnnotationCropRect | null;\n  cropAspectRatio: number | null;\n  /** Screen-pixel gutter around the image, so crop handles sitting on the image edge stay grabbable. */\n  gutter: number;\n  onCropDraftChange: (crop: IAnnotationCropRect) => void;\n  tool: TAnnotationTool;\n  style: IAnnotationStyle;\n  controller: IAnnotationDocumentController;\n  editingTextId: string | null;\n  stageRef: React.MutableRefObject<Konva.Stage | null>;\n  onRequestTextEdit: (id: string) => void;\n  onTextPlaced: (point: IAnnotationPoint) => void;\n}\n\nconst cursorForTool = (tool: TAnnotationTool): string => {\n  if (tool === 'select') return 'default';\n  if (tool === 'text') return 'text';\n  if (tool === 'eraser') return 'cell';\n  if (tool === 'crop') return 'default';\n  return 'crosshair';\n};\n\nconst AnnotationStage: React.FC<IAnnotationStageProps> = ({\n  baseImage,\n  imageSize,\n  fit,\n  viewRect,\n  cropDraft,\n  cropAspectRatio,\n  gutter,\n  onCropDraftChange,\n  tool,\n  style,\n  controller,\n  editingTextId,\n  stageRef,\n  onRequestTextEdit,\n  onTextPlaced,\n}) => {\n  const nodesRef = useRef<Map<string, Konva.Node>>(new Map());\n  const dragOriginRef = useRef<IAnnotationPoint | null>(null);\n  const erasedIdsRef = useRef<Set<string>>(new Set());\n  const finishGestureRef = useRef<() => void>(() => undefined);\n  const [draft, setDraft] = useState<TAnnotationElement | null>(null);\n  const [gestureActive, setGestureActive] = useState(false);\n\n  const { select, addElement, updateElement, removeElements } = controller;\n\n  const layerX = gutter / fit.scale - viewRect.x;\n  const layerY = gutter / fit.scale - viewRect.y;\n\n  const registerNode = useCallback((id: string, node: Konva.Node | null) => {\n    if (node) nodesRef.current.set(id, node);\n    else nodesRef.current.delete(id);\n  }, []);\n\n  const getNode = useCallback((id: string) => nodesRef.current.get(id) ?? null, []);\n\n  const pointFromStage = (stage: Konva.Stage): IAnnotationPoint | null => {\n    const pointer = stage.getPointerPosition();\n    if (!pointer) return null;\n    const point = clampPointToImage(\n      { x: (pointer.x - gutter) / fit.scale, y: (pointer.y - gutter) / fit.scale },\n      { width: viewRect.width, height: viewRect.height },\n    );\n    return { x: point.x + viewRect.x, y: point.y + viewRect.y };\n  };\n\n  const eraseAtPointer = (stage: Konva.Stage) => {\n    const pointer = stage.getPointerPosition();\n    if (!pointer) return;\n\n    let node: Konva.Node | null = stage.getIntersection(pointer);\n    while (node && !node.id()) node = node.getParent();\n    if (node?.id()) erasedIdsRef.current.add(node.id());\n  };\n\n  const handlePointerDown = (event: Konva.KonvaEventObject<PointerEvent>) => {\n    const stage = event.target.getStage();\n    if (!stage) return;\n\n    if (tool === 'select') {\n      if (event.target === stage) select(null);\n      return;\n    }\n\n    if (tool === 'crop') return;\n\n    if (tool === 'eraser') {\n      dragOriginRef.current = { x: 0, y: 0 };\n      erasedIdsRef.current = new Set();\n      setGestureActive(true);\n      eraseAtPointer(stage);\n      return;\n    }\n\n    const point = pointFromStage(stage);\n    if (!point) return;\n\n    if (tool === 'text') {\n      onTextPlaced(point);\n      return;\n    }\n\n    if (!DRAWING_TOOLS.includes(tool)) return;\n\n    dragOriginRef.current = point;\n    setGestureActive(true);\n    if (tool === 'freehand') setDraft(createFreehandElement(point, style, imageSize));\n    else if (tool === 'line' || tool === 'arrow') setDraft(createSegmentElement(tool, point, point, style, imageSize));\n    else if (tool === 'rectangle' || tool === 'ellipse')\n      setDraft(createShapeElement(tool, point, point, style, imageSize));\n  };\n\n  const handlePointerMove = (event: Konva.KonvaEventObject<PointerEvent>) => {\n    const stage = event.target.getStage();\n    if (!stage) return;\n\n    if (tool === 'eraser') {\n      if (dragOriginRef.current) eraseAtPointer(stage);\n      return;\n    }\n\n    const origin = dragOriginRef.current;\n    if (!origin || !draft) return;\n\n    const point = pointFromStage(stage);\n    if (!point) return;\n\n    setDraft((current) => {\n      if (!current) return current;\n\n      if (current.type === 'freehand') {\n        const next = { x: point.x - current.x, y: point.y - current.y };\n        if (!shouldAppendFreehandPoint(current.points, next, FREEHAND_MIN_DISTANCE_PX / fit.scale)) return current;\n        return { ...current, points: [...current.points, next.x, next.y] };\n      }\n\n      if (current.type === 'line' || current.type === 'arrow') return { ...current, end: point };\n\n      if (current.type === 'rectangle' || current.type === 'ellipse') {\n        return {\n          ...current,\n          x: Math.min(origin.x, point.x),\n          y: Math.min(origin.y, point.y),\n          width: Math.abs(point.x - origin.x),\n          height: Math.abs(point.y - origin.y),\n        };\n      }\n\n      return current;\n    });\n  };\n\n  const handlePointerUp = () => {\n    const origin = dragOriginRef.current;\n    dragOriginRef.current = null;\n    setGestureActive(false);\n\n    if (tool === 'eraser') {\n      removeElements([...erasedIdsRef.current]);\n      erasedIdsRef.current = new Set();\n      return;\n    }\n\n    const pending = draft;\n    setDraft(null);\n    if (!pending || !origin) return;\n\n    if (pending.type === 'freehand') {\n      if (pending.points.length < 4) return;\n      addElement(pending, { select: false });\n      return;\n    }\n\n    if (pending.type === 'line' || pending.type === 'arrow') {\n      if (isDegenerateDrag(pending.start, pending.end, DEGENERATE_DRAG_PX / fit.scale)) return;\n      addElement(pending);\n      return;\n    }\n\n    if (pending.type === 'rectangle' || pending.type === 'ellipse') {\n      if (pending.width < DEGENERATE_DRAG_PX / fit.scale || pending.height < DEGENERATE_DRAG_PX / fit.scale) return;\n      addElement(pending);\n    }\n  };\n\n  finishGestureRef.current = handlePointerUp;\n\n  /** Releasing the pointer outside the canvas must still commit the stroke, not orphan it. */\n  useEffect(() => {\n    if (!gestureActive) return;\n\n    const finish = () => finishGestureRef.current();\n    window.addEventListener('pointerup', finish);\n    window.addEventListener('pointercancel', finish);\n\n    return () => {\n      window.removeEventListener('pointerup', finish);\n      window.removeEventListener('pointercancel', finish);\n    };\n  }, [gestureActive]);\n\n  return (\n    <Stage\n      ref={stageRef}\n      width={fit.width + gutter * 2}\n      height={fit.height + gutter * 2}\n      scaleX={fit.scale}\n      scaleY={fit.scale}\n      style={{ cursor: cursorForTool(tool) }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n    >\n      <Layer listening={false} x={layerX} y={layerY}>\n        <KonvaImage image={baseImage} width={imageSize.width} height={imageSize.height} perfectDrawEnabled={false} />\n      </Layer>\n\n      <Layer x={layerX} y={layerY}>\n        {controller.elements.map((element) => (\n          <AnnotationElementNode\n            key={element.id}\n            element={element}\n            draggable={tool === 'select'}\n            listening={tool === 'select' || tool === 'eraser'}\n            viewScale={fit.scale}\n            idleCursor={cursorForTool(tool)}\n            hidden={element.id === editingTextId}\n            onSelect={select}\n            onChange={updateElement}\n            onRequestTextEdit={onRequestTextEdit}\n            registerNode={registerNode}\n          />\n        ))}\n\n        {draft && (\n          <AnnotationElementNode\n            element={draft}\n            draggable={false}\n            listening={false}\n            viewScale={fit.scale}\n            idleCursor={cursorForTool(tool)}\n            hidden={false}\n            onSelect={select}\n            onChange={updateElement}\n            onRequestTextEdit={onRequestTextEdit}\n            registerNode={() => undefined}\n          />\n        )}\n\n        {tool === 'crop' && cropDraft && (\n          <AnnotationCropFrame\n            crop={cropDraft}\n            imageSize={imageSize}\n            viewScale={fit.scale}\n            gutter={gutter}\n            aspectRatio={cropAspectRatio}\n            onChange={onCropDraftChange}\n          />\n        )}\n\n        {tool === 'select' && !editingTextId && (\n          <AnnotationSelection\n            selectedElement={controller.selectedElement}\n            viewScale={fit.scale}\n            getNode={getNode}\n            onChange={updateElement}\n          />\n        )}\n      </Layer>\n    </Stage>\n  );\n};\n\nexport default AnnotationStage;\n"],"names":["KonvaImage"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+interface IAnnotationActionBarProps {
+    touch: boolean;
+    saving: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    canClear: boolean;
+    canSave: boolean;
+    elementActions?: React.ReactNode;
+    onUndo: () => void;
+    onRedo: () => void;
+    onClear: () => void;
+    onSave: () => void;
+}
+declare const AnnotationActionBar: React.FC<IAnnotationActionBarProps>;
+export default AnnotationActionBar;

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

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import LoadingSpinner from "../../LoadingSpinner.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const AnnotationActionBar = ({
+  touch,
+  saving,
+  canUndo,
+  canRedo,
+  canClear,
+  canSave,
+  elementActions,
+  onUndo,
+  onRedo,
+  onClear,
+  onSave
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex items-center gap-x-1", touch && "w-full"), children: [
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "undo",
+        label: t("imageAnnotator.undo"),
+        touch,
+        disabled: !canUndo || saving,
+        onClick: onUndo
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "redo",
+        label: t("imageAnnotator.redo"),
+        touch,
+        disabled: !canRedo || saving,
+        onClick: onRedo
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationToolButton,
+      {
+        icon: "delete_sweep",
+        label: t("imageAnnotator.clear"),
+        tone: "danger",
+        touch,
+        disabled: !canClear || saving,
+        onClick: onClear
+      }
+    ),
+    elementActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "mx-1 h-6 w-px bg-muted-active", "aria-hidden": true }),
+      elementActions
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: classNames("mx-1 h-6 w-px bg-muted-active", touch && "hidden"), "aria-hidden": true }),
+    /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        size: "sm",
+        onClick: onSave,
+        disabled: !canSave || saving,
+        className: classNames("ml-auto flex shrink-0 items-center gap-x-1.5 normal-case", touch && "h-11"),
+        children: [
+          saving ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "white" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 14, color: "white" }),
+          saving ? t("imageAnnotator.saving") : t("imageAnnotator.save")
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AnnotationActionBar as default
+};
+//# sourceMappingURL=AnnotationActionBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationActionBar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationActionBar.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\ninterface IAnnotationActionBarProps {\n  touch: boolean;\n  saving: boolean;\n  canUndo: boolean;\n  canRedo: boolean;\n  canClear: boolean;\n  canSave: boolean;\n  elementActions?: React.ReactNode;\n  onUndo: () => void;\n  onRedo: () => void;\n  onClear: () => void;\n  onSave: () => void;\n}\n\nconst AnnotationActionBar: React.FC<IAnnotationActionBarProps> = ({\n  touch,\n  saving,\n  canUndo,\n  canRedo,\n  canClear,\n  canSave,\n  elementActions,\n  onUndo,\n  onRedo,\n  onClear,\n  onSave,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <div className={classNames('flex items-center gap-x-1', touch && 'w-full')}>\n      <AnnotationToolButton\n        icon=\"undo\"\n        label={t('imageAnnotator.undo')}\n        touch={touch}\n        disabled={!canUndo || saving}\n        onClick={onUndo}\n      />\n      <AnnotationToolButton\n        icon=\"redo\"\n        label={t('imageAnnotator.redo')}\n        touch={touch}\n        disabled={!canRedo || saving}\n        onClick={onRedo}\n      />\n      <AnnotationToolButton\n        icon=\"delete_sweep\"\n        label={t('imageAnnotator.clear')}\n        tone=\"danger\"\n        touch={touch}\n        disabled={!canClear || saving}\n        onClick={onClear}\n      />\n\n      {elementActions && (\n        <>\n          <span className=\"mx-1 h-6 w-px bg-muted-active\" aria-hidden />\n          {elementActions}\n        </>\n      )}\n\n      <span className={classNames('mx-1 h-6 w-px bg-muted-active', touch && 'hidden')} aria-hidden />\n\n      <ControlledButton\n        size=\"sm\"\n        onClick={onSave}\n        disabled={!canSave || saving}\n        className={classNames('ml-auto flex shrink-0 items-center gap-x-1.5 normal-case', touch && 'h-11')}\n      >\n        {saving ? <LoadingSpinner size={4} color=\"white\" /> : <MaterialSymbol icon=\"check\" size={14} color=\"white\" />}\n        {saving ? t('imageAnnotator.saving') : t('imageAnnotator.save')}\n      </ControlledButton>\n    </div>\n  );\n};\n\nexport default AnnotationActionBar;\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,sBAA2D,CAAC;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,8BACG,OAAA,EAAI,WAAW,WAAW,6BAA6B,SAAS,QAAQ,GACvE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,qBAAqB;AAAA,QAC9B;AAAA,QACA,UAAU,CAAC,WAAW;AAAA,QACtB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,qBAAqB;AAAA,QAC9B;AAAA,QACA,UAAU,CAAC,WAAW;AAAA,QACtB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,sBAAsB;AAAA,QAC/B,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,YAAY;AAAA,QACvB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGV,kBACC,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,iCAAgC,eAAW,MAAC;AAAA,MAC3D;AAAA,IAAA,GACH;AAAA,IAGF,oBAAC,UAAK,WAAW,WAAW,iCAAiC,SAAS,QAAQ,GAAG,eAAW,MAAC;AAAA,IAE7F;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU,CAAC,WAAW;AAAA,QACtB,WAAW,WAAW,4DAA4D,SAAS,MAAM;AAAA,QAEhG,UAAA;AAAA,UAAA,SAAS,oBAAC,gBAAA,EAAe,MAAM,GAAG,OAAM,SAAQ,IAAK,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,IAAI,OAAM,SAAQ;AAAA,UAC1G,SAAS,EAAE,uBAAuB,IAAI,EAAE,qBAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChE,GACF;AAEJ;"}

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

@@ -0,0 +1,11 @@
+import { SymbolCodepoints } from '../../MaterialSymbol';
+interface IAnnotationColorPopoverProps {
+    icon: SymbolCodepoints;
+    label: string;
+    value: string | null;
+    touch?: boolean;
+    onChange: (color: string | null) => void;
+}
+/** Fill and text background: both need the palette plus an explicit "no colour" choice. */
+declare const AnnotationColorPopover: React.FC<IAnnotationColorPopoverProps>;
+export default AnnotationColorPopover;

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

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "../../ControlledPopover.js";
+import ControlledTooltip from "../../ControlledTooltip.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+import { ANNOTATION_COLORS } from "../annotationStyle.js";
+const AnnotationColorPopover = ({
+  icon,
+  label,
+  value,
+  touch = false,
+  onChange
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs(ControlledPopoverRoot, { placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: label, className: "z-[9999]", children: /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        "aria-label": label,
+        className: classNames(
+          "interactive flex shrink-0 items-center gap-x-1.5 rounded-lg px-2 text-foreground-subtle hover:bg-muted-active hover:text-foreground",
+          touch ? "h-11" : "h-9"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 20 }),
+          value ? /* @__PURE__ */ jsx("span", { className: "size-4 rounded-full border border-border-strong/30", style: { backgroundColor: value } }) : /* @__PURE__ */ jsx("span", { className: "flex size-4 items-center justify-center rounded-full border border-border-strong/30 bg-muted text-foreground-faint", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "block", size: 10 }) })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(ControlledPopoverContent, { className: "z-[9999] w-auto rounded-xl border border-border bg-surface-overlay p-2 glass", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-52 flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("imageAnnotator.style.none"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("imageAnnotator.style.none"),
+          defaultHtmlButton: true,
+          onClick: () => onChange(null),
+          "aria-pressed": !value,
+          className: classNames(
+            "flex size-7 items-center justify-center rounded-full border border-border-strong/30 text-foreground-faint transition-transform hover:scale-110",
+            !value && "scale-110 ring-2 ring-ring ring-offset-1"
+          ),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "block", size: 14 })
+        }
+      ) }),
+      ANNOTATION_COLORS.map((color) => /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          onClick: () => onChange(color),
+          "aria-label": color,
+          "aria-pressed": value === color,
+          className: classNames(
+            "size-7 rounded-full border border-border-strong/30 transition-transform hover:scale-110",
+            value === color && "scale-110 ring-2 ring-ring ring-offset-1"
+          ),
+          style: { backgroundColor: color },
+          children: null
+        },
+        color
+      ))
+    ] }) })
+  ] });
+};
+export {
+  AnnotationColorPopover as default
+};
+//# sourceMappingURL=AnnotationColorPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationColorPopover.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationColorPopover.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport {\n  ControlledPopoverContent,\n  ControlledPopoverHandler,\n  ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { ANNOTATION_COLORS } from '../annotationStyle';\n\ninterface IAnnotationColorPopoverProps {\n  icon: SymbolCodepoints;\n  label: string;\n  value: string | null;\n  touch?: boolean;\n  onChange: (color: string | null) => void;\n}\n\n/** Fill and text background: both need the palette plus an explicit \"no colour\" choice. */\nconst AnnotationColorPopover: React.FC<IAnnotationColorPopoverProps> = ({\n  icon,\n  label,\n  value,\n  touch = false,\n  onChange,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <ControlledPopoverRoot placement=\"bottom-start\">\n      <ControlledTooltip content={label} className=\"z-[9999]\">\n        <ControlledPopoverHandler>\n          <ControlledButton\n            defaultHtmlButton\n            aria-label={label}\n            className={classNames(\n              'interactive flex shrink-0 items-center gap-x-1.5 rounded-lg px-2 text-foreground-subtle hover:bg-muted-active hover:text-foreground',\n              touch ? 'h-11' : 'h-9',\n            )}\n          >\n            <MaterialSymbol icon={icon} size={20} />\n            {value ? (\n              <span className=\"size-4 rounded-full border border-border-strong/30\" style={{ backgroundColor: value }} />\n            ) : (\n              <span className=\"flex size-4 items-center justify-center rounded-full border border-border-strong/30 bg-muted text-foreground-faint\">\n                <MaterialSymbol icon=\"block\" size={10} />\n              </span>\n            )}\n          </ControlledButton>\n        </ControlledPopoverHandler>\n      </ControlledTooltip>\n\n      <ControlledPopoverContent className=\"z-[9999] w-auto rounded-xl border border-border bg-surface-overlay p-2 glass\">\n        <div className=\"flex max-w-52 flex-wrap items-center gap-1.5\">\n          <ControlledTooltip content={t('imageAnnotator.style.none')} className=\"z-[9999]\">\n            <ControlledButton\n              aria-label={t('imageAnnotator.style.none')}\n              defaultHtmlButton\n              onClick={() => onChange(null)}\n              aria-pressed={!value}\n              className={classNames(\n                'flex size-7 items-center justify-center rounded-full border border-border-strong/30 text-foreground-faint transition-transform hover:scale-110',\n                !value && 'scale-110 ring-2 ring-ring ring-offset-1',\n              )}\n            >\n              <MaterialSymbol icon=\"block\" size={14} />\n            </ControlledButton>\n          </ControlledTooltip>\n\n          {ANNOTATION_COLORS.map((color) => (\n            <ControlledButton\n              key={color}\n              defaultHtmlButton\n              onClick={() => onChange(color)}\n              aria-label={color}\n              aria-pressed={value === color}\n              className={classNames(\n                'size-7 rounded-full border border-border-strong/30 transition-transform hover:scale-110',\n                value === color && 'scale-110 ring-2 ring-ring ring-offset-1',\n              )}\n              style={{ backgroundColor: color }}\n            >\n              {null}\n            </ControlledButton>\n          ))}\n        </div>\n      </ControlledPopoverContent>\n    </ControlledPopoverRoot>\n  );\n};\n\nexport default AnnotationColorPopover;\n"],"names":[],"mappings":";;;;;;;;AAuBA,MAAM,yBAAiE,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,qBAAC,uBAAA,EAAsB,WAAU,gBAC/B,UAAA;AAAA,IAAA,oBAAC,qBAAkB,SAAS,OAAO,WAAU,YAC3C,8BAAC,0BAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB;AAAA,QACjB,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,QAAQ,SAAS;AAAA,QAAA;AAAA,QAGnB,UAAA;AAAA,UAAA,oBAAC,gBAAA,EAAe,MAAY,MAAM,GAAA,CAAI;AAAA,UACrC,4BACE,QAAA,EAAK,WAAU,sDAAqD,OAAO,EAAE,iBAAiB,MAAA,EAAM,CAAG,IAExG,oBAAC,QAAA,EAAK,WAAU,sHACd,UAAA,oBAAC,kBAAe,MAAK,SAAQ,MAAM,GAAA,CAAI,EAAA,CACzC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGN,EAAA,CACF;AAAA,wBAEC,0BAAA,EAAyB,WAAU,gFAClC,UAAA,qBAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,MAAA,oBAAC,qBAAkB,SAAS,EAAE,2BAA2B,GAAG,WAAU,YACpE,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,EAAE,2BAA2B;AAAA,UACzC,mBAAiB;AAAA,UACjB,SAAS,MAAM,SAAS,IAAI;AAAA,UAC5B,gBAAc,CAAC;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,CAAC,SAAS;AAAA,UAAA;AAAA,UAGZ,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA,GAE3C;AAAA,MAEC,kBAAkB,IAAI,CAAC,UACtB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,mBAAiB;AAAA,UACjB,SAAS,MAAM,SAAS,KAAK;AAAA,UAC7B,cAAY;AAAA,UACZ,gBAAc,UAAU;AAAA,UACxB,WAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS;AAAA,UAAA;AAAA,UAErB,OAAO,EAAE,iBAAiB,MAAA;AAAA,UAEzB,UAAA;AAAA,QAAA;AAAA,QAXI;AAAA,MAAA,CAaR;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}