@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/chunk-PCUUTKQZ.mjs

@@ -1,7 +1,27 @@
-import { useVueBodyScrollLock, renderVueBodyTeleport } from './chunk-7RIWAO2A.mjs';
-import { defineComponent, ref, computed, watch, onUnmounted, h } from 'vue';
-import { injectLoadingAnimationStyles, getLoadingClasses, getLoadingTextClasses, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, coerceClassValue, mergeStyleValues, getSpinnerSVG, normalizeSvgAttrs, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
+import {
+  renderVueBodyTeleport,
+  useVueBodyScrollLock
+} from "./chunk-7RIWAO2A.mjs";
 
+// src/components/Loading.ts
+import { defineComponent, computed, h, ref, watch, onUnmounted } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getLoadingBarClasses,
+  getLoadingBarsWrapperClasses,
+  getLoadingClasses,
+  getLoadingDotClasses,
+  getLoadingDotsWrapperClasses,
+  getLoadingTextClasses,
+  getSpinnerSVG,
+  loadingContainerBaseClasses,
+  loadingFullscreenBaseClasses,
+  loadingColorClasses,
+  mergeStyleValues,
+  normalizeSvgAttrs,
+  injectLoadingAnimationStyles
+} from "@expcat/tigercat-core";
 var Loading = defineComponent({
   name: "TigerLoading",
   inheritAttrs: false,
@@ -196,4 +216,7 @@ var Loading = defineComponent({
 });
 var Loading_default = Loading;
 
-export { Loading, Loading_default };
+export {
+  Loading,
+  Loading_default
+};

package/dist/{chunk-GWNXDOIG.mjs → chunk-PENI3H3I.mjs}

@@ -1,7 +1,14 @@
-import { defineComponent, ref, computed, h } from 'vue';
-import { variableSizeStrategy, dynamicSizeStrategy, fixedSizeStrategy, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
-
 // src/components/VirtualList.ts
+import { defineComponent, h, ref, computed } from "vue";
+import {
+  virtualListContainerClasses,
+  virtualListInnerClasses,
+  fixedSizeStrategy,
+  variableSizeStrategy,
+  dynamicSizeStrategy,
+  classNames,
+  coerceClassValue
+} from "@expcat/tigercat-core";
 var VirtualList = defineComponent({
   name: "TigerVirtualList",
   props: {
@@ -34,12 +41,7 @@ var VirtualList = defineComponent({
       return fixedSizeStrategy(props.itemHeight);
     });
     const range = computed(
-      () => strategy.value.getRange(
-        scrollTop.value,
-        props.height,
-        props.itemCount,
-        props.overscan
-      )
+      () => strategy.value.getRange(scrollTop.value, props.height, props.itemCount, props.overscan)
     );
     function handleScroll() {
       if (containerRef.value) {
@@ -107,4 +109,7 @@ var VirtualList = defineComponent({
 });
 var VirtualList_default = VirtualList;
 
-export { VirtualList, VirtualList_default };
+export {
+  VirtualList,
+  VirtualList_default
+};

package/dist/chunk-PQMZ3YN3.js

@@ -1,10 +1,20 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Badge.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Badge.ts
-var Badge = vue.defineComponent({
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Badge = _vue.defineComponent.call(void 0, {
   name: "TigerBadge",
   inheritAttrs: false,
   props: {
@@ -50,36 +60,36 @@ var Badge = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const isDot = vue.computed(() => props.type === "dot");
-    const isHidden = vue.computed(() => tigercatCore.shouldHideBadge(props.content, props.type, props.showZero));
-    const displayContent = vue.computed(
-      () => tigercatCore.formatBadgeContent(props.content, props.max, props.showZero)
+    const isDot = _vue.computed.call(void 0, () => props.type === "dot");
+    const isHidden = _vue.computed.call(void 0, () => _tigercatcore.shouldHideBadge.call(void 0, props.content, props.type, props.showZero));
+    const displayContent = _vue.computed.call(void 0, 
+      () => _tigercatcore.formatBadgeContent.call(void 0, props.content, props.max, props.showZero)
     );
-    const badgeClasses = vue.computed(
-      () => tigercatCore.classNames(
-        tigercatCore.badgeBaseClasses,
-        tigercatCore.getBadgeVariantClasses(props.variant),
-        isDot.value ? tigercatCore.dotSizeClasses[props.size] : tigercatCore.badgeSizeClasses[props.size],
-        tigercatCore.badgeTypeClasses[props.type],
-        !props.standalone && tigercatCore.badgePositionClasses[props.position]
+    const badgeClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.badgeBaseClasses,
+        _tigercatcore.getBadgeVariantClasses.call(void 0, props.variant),
+        isDot.value ? _tigercatcore.dotSizeClasses[props.size] : _tigercatcore.badgeSizeClasses[props.size],
+        _tigercatcore.badgeTypeClasses[props.type],
+        !props.standalone && _tigercatcore.badgePositionClasses[props.position]
       )
     );
     return () => {
       if (isHidden.value) {
-        return props.standalone ? null : slots.default?.() ?? null;
+        return props.standalone ? null : _nullishCoalesce(_optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]), () => ( null));
       }
       const attrsRecord = attrs;
-      const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? "notification" : props.type === "number" ? `${displayContent.value} notifications` : `${displayContent.value ?? ""}`);
-      const badgeElement = vue.h(
+      const ariaLabel = _nullishCoalesce(attrsRecord["aria-label"], () => ( (isDot.value ? "notification" : props.type === "number" ? `${displayContent.value} notifications` : `${_nullishCoalesce(displayContent.value, () => ( ""))}`)));
+      const badgeElement = _vue.h.call(void 0, 
         "span",
         {
           ...attrs,
-          class: tigercatCore.classNames(
+          class: _tigercatcore.classNames.call(void 0, 
             badgeClasses.value,
             props.className,
-            tigercatCore.coerceClassValue(attrsRecord.class)
+            _tigercatcore.coerceClassValue.call(void 0, attrsRecord.class)
           ),
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style),
+          style: _tigercatcore.mergeStyleValues.call(void 0, attrsRecord.style, props.style),
           role: "status",
           "aria-label": ariaLabel
         },
@@ -88,11 +98,13 @@ var Badge = vue.defineComponent({
       if (props.standalone) {
         return badgeElement;
       }
-      return vue.h("span", { class: tigercatCore.badgeWrapperClasses }, [...slots.default?.() ?? [], badgeElement]);
+      return _vue.h.call(void 0, "span", { class: _tigercatcore.badgeWrapperClasses }, [..._nullishCoalesce(_optionalChain([slots, 'access', _3 => _3.default, 'optionalCall', _4 => _4()]), () => ( [])), badgeElement]);
     };
   }
 });
 var Badge_default = Badge;
 
-exports.Badge = Badge;
-exports.Badge_default = Badge_default;
+
+
+
+exports.Badge = Badge; exports.Badge_default = Badge_default;

package/dist/chunk-PUSTYAMS.mjs

@@ -1,7 +1,26 @@
-import { defineComponent, inject, computed, h, provide, reactive } from 'vue';
-import { calculateStepStatus, classNames, getStepItemClasses, coerceClassValue, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, mergeStyleValues, getStepsContainerClasses, stepFinishChar } from '@expcat/tigercat-core';
-
 // src/components/Steps.ts
+import {
+  defineComponent,
+  computed,
+  inject,
+  provide,
+  h,
+  reactive
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getStepItemClasses,
+  getStepIconClasses,
+  getStepTailClasses,
+  getStepContentClasses,
+  getStepTitleClasses,
+  getStepDescriptionClasses,
+  getStepsContainerClasses,
+  calculateStepStatus,
+  stepFinishChar
+} from "@expcat/tigercat-core";
 var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
 var StepsItem = defineComponent({
   name: "TigerStepsItem",
@@ -329,4 +348,9 @@ var Steps = defineComponent({
 });
 var Steps_default = Steps;
 
-export { Steps, StepsContextKey, StepsItem, Steps_default };
+export {
+  StepsContextKey,
+  StepsItem,
+  Steps,
+  Steps_default
+};

package/dist/chunk-PVPLDEC5.mjs

@@ -1,7 +1,6 @@
-import { defineComponent, computed, h } from 'vue';
-import { classNames, layoutRootClasses, coerceClassValue } from '@expcat/tigercat-core';
-
 // src/components/Layout.ts
+import { defineComponent, h, computed } from "vue";
+import { classNames, coerceClassValue, layoutRootClasses } from "@expcat/tigercat-core";
 var Layout = defineComponent({
   name: "TigerLayout",
   inheritAttrs: false,
@@ -34,4 +33,7 @@ var Layout = defineComponent({
 });
 var Layout_default = Layout;
 
-export { Layout, Layout_default };
+export {
+  Layout,
+  Layout_default
+};

package/dist/chunk-PXRF4IJO.mjs

@@ -1,7 +1,16 @@
-import { defineComponent, computed, h, ref, Teleport } from 'vue';
-import { classNames, floatButtonBaseClasses, floatButtonShapeClasses, floatButtonSizeClasses, floatButtonTypeClasses, floatButtonDisabledClasses, coerceClassValue, mergeStyleValues, floatButtonGroupClasses } from '@expcat/tigercat-core';
-
 // src/components/FloatButton.ts
+import { defineComponent, computed, h, ref, Teleport } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  floatButtonBaseClasses,
+  floatButtonShapeClasses,
+  floatButtonSizeClasses,
+  floatButtonTypeClasses,
+  floatButtonDisabledClasses,
+  floatButtonGroupClasses
+} from "@expcat/tigercat-core";
 var FloatButton = defineComponent({
   name: "TigerFloatButton",
   inheritAttrs: false,
@@ -156,4 +165,8 @@ var FloatButtonGroup = defineComponent({
 });
 var FloatButton_default = FloatButton;
 
-export { FloatButton, FloatButtonGroup, FloatButton_default };
+export {
+  FloatButton,
+  FloatButtonGroup,
+  FloatButton_default
+};

package/dist/chunk-PY6P4N2Q.js

@@ -0,0 +1,393 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ImageAnnotation.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var ImageAnnotation = _vue.defineComponent.call(void 0, {
+  name: "TigerImageAnnotation",
+  inheritAttrs: false,
+  props: {
+    src: { type: String, required: true },
+    alt: { type: String, default: "Image to annotate" },
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    selectedId: { type: String, default: void 0 },
+    defaultSelectedId: { type: String, default: void 0 },
+    tool: { type: String, default: void 0 },
+    defaultTool: { type: String, default: "select" },
+    tools: {
+      type: Array,
+      default: () => _tigercatcore.defaultImageAnnotationTools
+    },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    minSize: { type: Number, default: 0.01 },
+    strokeWidth: { type: Number, default: 2 },
+    showLabels: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "select", "tool-change", "ready"],
+  setup(props, { attrs, emit }) {
+    const containerRef = _vue.ref.call(void 0, null);
+    const overlayRef = _vue.ref.call(void 0, null);
+    const idSeed = _vue.ref.call(void 0, 0);
+    const imageLoaded = _vue.ref.call(void 0, false);
+    const displayWidth = _vue.ref.call(void 0, 0);
+    const displayHeight = _vue.ref.call(void 0, 0);
+    const innerAnnotations = _vue.ref.call(void 0, props.defaultValue);
+    const innerSelectedId = _vue.ref.call(void 0, props.defaultSelectedId);
+    const innerTool = _vue.ref.call(void 0, props.defaultTool);
+    const draft = _vue.ref.call(void 0, null);
+    const drawing = _vue.ref.call(void 0, null);
+    const annotations = _vue.computed.call(void 0, () => _nullishCoalesce(props.modelValue, () => ( innerAnnotations.value)));
+    const activeSelectedId = _vue.computed.call(void 0, () => _nullishCoalesce(props.selectedId, () => ( innerSelectedId.value)));
+    const activeTool = _vue.computed.call(void 0, () => _nullishCoalesce(props.tool, () => ( innerTool.value)));
+    const canEdit = _vue.computed.call(void 0, () => !props.disabled && !props.readonly);
+    const loadImage = () => {
+      imageLoaded.value = false;
+      draft.value = null;
+      if (typeof window === "undefined" || typeof window.Image !== "function") return;
+      const img = new window.Image();
+      img.onload = () => {
+        const naturalWidth = img.naturalWidth || 1;
+        const naturalHeight = img.naturalHeight || 1;
+        const containerWidth = _optionalChain([containerRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.clientWidth]) || naturalWidth;
+        const containerHeight = _optionalChain([containerRef, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.clientHeight]) || naturalHeight;
+        const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
+        displayWidth.value = naturalWidth * ratio;
+        displayHeight.value = naturalHeight * ratio;
+        imageLoaded.value = true;
+        emit("ready");
+      };
+      img.src = props.src;
+    };
+    _vue.onMounted.call(void 0, loadImage);
+    _vue.watch.call(void 0, () => props.src, loadImage);
+    const commitAnnotations = (next, meta) => {
+      if (props.modelValue === void 0) innerAnnotations.value = next;
+      emit("update:modelValue", next);
+      emit("change", next, meta);
+    };
+    const selectAnnotation = (annotation) => {
+      if (props.selectedId === void 0) innerSelectedId.value = _optionalChain([annotation, 'optionalAccess', _5 => _5.id]);
+      emit("select", annotation);
+    };
+    const setActiveTool = (nextTool) => {
+      draft.value = null;
+      drawing.value = null;
+      if (props.tool === void 0) innerTool.value = nextTool;
+      emit("tool-change", nextTool);
+    };
+    const createId = (shape) => {
+      idSeed.value += 1;
+      return `${shape}-${idSeed.value}`;
+    };
+    const getPointFromEvent = (event) => {
+      const bounds = _optionalChain([overlayRef, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.getBoundingClientRect, 'call', _8 => _8()]);
+      if (!bounds) return { x: 0, y: 0 };
+      return _tigercatcore.getImageAnnotationPointFromClient.call(void 0, event.clientX, event.clientY, bounds);
+    };
+    const commitAnnotation = (annotation) => {
+      commitAnnotations([...annotations.value, annotation], { type: "add", annotation });
+      selectAnnotation(annotation);
+    };
+    const commitPolygon = () => {
+      if (!drawing.value || drawing.value.tool !== "polygon" || drawing.value.points.length < 3) {
+        return;
+      }
+      const annotation = _tigercatcore.createImageAnnotationPath.call(void 0, 
+        "polygon",
+        createId("polygon"),
+        drawing.value.points
+      );
+      drawing.value = null;
+      draft.value = null;
+      commitAnnotation(annotation);
+    };
+    const handleStageMouseDown = (event) => {
+      if (!canEdit.value || activeTool.value === "select" || activeTool.value === "polygon") return;
+      const point = getPointFromEvent(event);
+      drawing.value = { tool: activeTool.value, start: point, points: [point] };
+      const handleMouseMove = (moveEvent) => {
+        if (!drawing.value) return;
+        const nextPoint = getPointFromEvent(moveEvent);
+        if (drawing.value.tool === "rectangle" || drawing.value.tool === "ellipse") {
+          draft.value = _tigercatcore.createImageAnnotationBox.call(void 0, 
+            drawing.value.tool,
+            "draft",
+            drawing.value.start,
+            nextPoint
+          );
+          return;
+        }
+        const nextPoints = [...drawing.value.points, nextPoint];
+        drawing.value = { ...drawing.value, points: nextPoints };
+        draft.value = _tigercatcore.createImageAnnotationPath.call(void 0, "freehand", "draft", nextPoints);
+      };
+      const handleMouseUp = (upEvent) => {
+        const current = drawing.value;
+        drawing.value = null;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        if (!current) return;
+        const end = getPointFromEvent(upEvent);
+        if (current.tool === "rectangle" || current.tool === "ellipse") {
+          const annotation = _tigercatcore.createImageAnnotationBox.call(void 0, 
+            current.tool,
+            createId(current.tool),
+            current.start,
+            end
+          );
+          draft.value = null;
+          if (_tigercatcore.shouldCommitImageAnnotationBox.call(void 0, annotation, props.minSize))
+            commitAnnotation(annotation);
+          return;
+        }
+        const points = [...current.points, end];
+        draft.value = null;
+        if (points.length >= 2) {
+          commitAnnotation(_tigercatcore.createImageAnnotationPath.call(void 0, "freehand", createId("freehand"), points));
+        }
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleStageClick = (event) => {
+      if (!canEdit.value || activeTool.value !== "polygon") return;
+      const point = getPointFromEvent(event);
+      const points = _optionalChain([drawing, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.tool]) === "polygon" ? [...drawing.value.points, point] : [point];
+      drawing.value = { tool: "polygon", start: points[0], points };
+      draft.value = _tigercatcore.createImageAnnotationPath.call(void 0, "polygon", "draft", points);
+    };
+    const removeSelectedAnnotation = () => {
+      if (!canEdit.value || !activeSelectedId.value) return;
+      const removed = annotations.value.find(
+        (annotation) => annotation.id === activeSelectedId.value
+      );
+      const next = annotations.value.filter(
+        (annotation) => annotation.id !== activeSelectedId.value
+      );
+      commitAnnotations(next, { type: "remove", annotation: removed });
+      selectAnnotation(null);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        drawing.value = null;
+        draft.value = null;
+        return;
+      }
+      if (event.key === "Enter") {
+        commitPolygon();
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        removeSelectedAnnotation();
+      }
+    };
+    const renderAnnotation = (annotation, isDraft = false) => {
+      const selected = !isDraft && annotation.id === activeSelectedId.value;
+      const stroke = _tigercatcore.getImageAnnotationStrokeColor.call(void 0, annotation);
+      const fillOpacity = annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1;
+      const commonProps = {
+        stroke,
+        strokeWidth: selected ? props.strokeWidth + 1 : props.strokeWidth,
+        fill: stroke,
+        fillOpacity,
+        role: "button",
+        tabindex: isDraft ? -1 : 0,
+        "aria-label": _tigercatcore.getImageAnnotationShapeAriaLabel.call(void 0, annotation),
+        class: _tigercatcore.classNames.call(void 0, !isDraft && "cursor-pointer focus:outline-none"),
+        onClick: (event) => {
+          if (isDraft) return;
+          event.stopPropagation();
+          selectAnnotation(annotation);
+        }
+      };
+      if (annotation.type === "rectangle") {
+        return _vue.h.call(void 0, "rect", {
+          ...commonProps,
+          key: annotation.id,
+          x: annotation.x * displayWidth.value,
+          y: annotation.y * displayHeight.value,
+          width: annotation.width * displayWidth.value,
+          height: annotation.height * displayHeight.value
+        });
+      }
+      if (annotation.type === "ellipse") {
+        return _vue.h.call(void 0, "ellipse", {
+          ...commonProps,
+          key: annotation.id,
+          cx: (annotation.x + annotation.width / 2) * displayWidth.value,
+          cy: (annotation.y + annotation.height / 2) * displayHeight.value,
+          rx: annotation.width * displayWidth.value / 2,
+          ry: annotation.height * displayHeight.value / 2
+        });
+      }
+      const pathAnnotation = annotation;
+      return _vue.h.call(void 0, "path", {
+        ...commonProps,
+        key: annotation.id,
+        d: _tigercatcore.getImageAnnotationPathData.call(void 0, pathAnnotation, displayWidth.value, displayHeight.value),
+        fillOpacity: pathAnnotation.type === "polygon" ? fillOpacity : 0
+      });
+    };
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.imageAnnotationContainerClasses,
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      )
+    );
+    const containerStyle = _vue.computed.call(void 0, 
+      () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const toolbar = _vue.h.call(void 0, 
+        "div",
+        { class: _tigercatcore.imageAnnotationToolbarClasses, "aria-label": "Annotation tools" },
+        [
+          ...props.tools.map(
+            (item) => _vue.h.call(void 0, 
+              "button",
+              {
+                key: item,
+                type: "button",
+                class: _tigercatcore.getImageAnnotationToolButtonClasses.call(void 0, activeTool.value === item),
+                disabled: props.disabled || props.readonly,
+                "aria-pressed": activeTool.value === item,
+                onClick: () => setActiveTool(item)
+              },
+              _tigercatcore.getImageAnnotationToolLabel.call(void 0, item)
+            )
+          ),
+          _vue.h.call(void 0, 
+            "button",
+            {
+              type: "button",
+              class: _tigercatcore.imageAnnotationDeleteButtonClasses,
+              disabled: !canEdit.value || !activeSelectedId.value,
+              onClick: removeSelectedAnnotation
+            },
+            "Delete"
+          )
+        ]
+      );
+      const stageChildren = !imageLoaded.value ? [
+        _vue.h.call(void 0, "div", { class: "flex min-h-[200px] min-w-[240px] items-center justify-center" }, [
+          _vue.h.call(void 0, "div", {
+            class: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]"
+          })
+        ])
+      ] : [
+        _vue.h.call(void 0, "img", {
+          src: props.src,
+          alt: props.alt,
+          class: _tigercatcore.imageAnnotationImageClasses,
+          style: { width: `${displayWidth.value}px`, height: `${displayHeight.value}px` },
+          draggable: false
+        }),
+        _vue.h.call(void 0, 
+          "svg",
+          {
+            ref: overlayRef,
+            class: _tigercatcore.classNames.call(void 0, 
+              _tigercatcore.imageAnnotationOverlayClasses,
+              (!canEdit.value || activeTool.value === "select") && _tigercatcore.imageAnnotationReadonlyOverlayClasses
+            ),
+            width: displayWidth.value,
+            height: displayHeight.value,
+            viewBox: `0 0 ${displayWidth.value} ${displayHeight.value}`,
+            "aria-label": "Image annotation canvas",
+            onMousedown: handleStageMouseDown,
+            onClick: handleStageClick,
+            onDblclick: commitPolygon
+          },
+          [
+            ...annotations.value.map((annotation) => renderAnnotation(annotation)),
+            ...draft.value ? [renderAnnotation(draft.value, true)] : [],
+            ...props.showLabels ? annotations.value.filter((annotation) => annotation.label).map((annotation) => {
+              const center = _tigercatcore.getImageAnnotationCenter.call(void 0, 
+                annotation,
+                displayWidth.value,
+                displayHeight.value
+              );
+              return _vue.h.call(void 0, 
+                "text",
+                {
+                  key: `${annotation.id}-label`,
+                  x: center.x,
+                  y: center.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  class: _tigercatcore.imageAnnotationLabelClasses
+                },
+                annotation.label
+              );
+            }) : []
+          ]
+        )
+      ];
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ...forwardedAttrs,
+          class: containerClasses.value,
+          style: containerStyle.value,
+          onKeydown: handleKeyDown
+        },
+        [
+          toolbar,
+          _vue.h.call(void 0, 
+            "div",
+            {
+              ref: containerRef,
+              class: _tigercatcore.imageAnnotationStageClasses,
+              style: imageLoaded.value ? { width: `${displayWidth.value}px` } : void 0,
+              role: imageLoaded.value ? "application" : "img",
+              "aria-label": imageLoaded.value ? "Image annotation editor" : "Loading image for annotation"
+            },
+            stageChildren
+          )
+        ]
+      );
+    };
+  }
+});
+var ImageAnnotation_default = ImageAnnotation;
+
+
+
+
+exports.ImageAnnotation = ImageAnnotation; exports.ImageAnnotation_default = ImageAnnotation_default;