@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-U2K7CF67.js → chunk-FMLNJXCX.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var chunkWCZGYU7M_js = require('./chunk-WCZGYU7M.js');
-var chunkNOTJRUAK_js = require('./chunk-NOTJRUAK.js');
-var chunkV4PBWEAU_js = require('./chunk-V4PBWEAU.js');
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunkVPNIZPIF_js = require('./chunk-VPNIZPIF.js');
+var chunkBZBQUUXF_js = require('./chunk-BZBQUUXF.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -82,7 +81,7 @@ var FormWizard = vue.defineComponent({
   },
   emits: ["change", "update:current", "finish"],
   setup(props, { slots, attrs, emit }) {
-    const config = chunkV4PBWEAU_js.useTigerConfig();
+    const config = chunkBZBQUUXF_js.useTigerConfig();
     const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
     const labels = vue.computed(() => tigercatCore.getFormWizardLabels(mergedLocale.value));
     const innerCurrent = vue.ref(props.current ?? props.defaultCurrent);
@@ -107,7 +106,7 @@ var FormWizard = vue.defineComponent({
     const currentStep = vue.computed(() => props.steps[currentIndex.value]);
     const wrapperClasses = vue.computed(
       () => tigercatCore.classNames(
-        "tiger-form-wizard w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
+        "tiger-form-wizard w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       )
@@ -115,12 +114,8 @@ var FormWizard = vue.defineComponent({
     const wrapperStyle = vue.computed(
       () => tigercatCore.mergeStyleValues(attrs.style, props.style)
     );
-    const clampIndex = (next) => {
-      const max = Math.max(totalCount.value - 1, 0);
-      return Math.min(Math.max(next, 0), max);
-    };
     const setCurrent = (next) => {
-      const clamped = clampIndex(next);
+      const clamped = tigercatCore.clampStepIndex(next, totalCount.value);
       const prev = currentIndex.value;
       if (props.current === void 0) {
         innerCurrent.value = clamped;
@@ -131,25 +126,8 @@ var FormWizard = vue.defineComponent({
         props.autoSave(clamped, props.steps[clamped]);
       }
     };
-    const runBeforeNext = async () => {
-      if (!props.beforeNext || !currentStep.value) {
-        return true;
-      }
-      const result = await props.beforeNext(currentIndex.value, currentStep.value, props.steps);
-      if (result === true) {
-        return true;
-      }
-      return false;
-    };
-    const findNextUnskipped = (from, direction) => {
-      let idx = from;
-      while (idx >= 0 && idx < totalCount.value) {
-        const step = props.steps[idx];
-        if (!step?.disabled && !step?.skipCondition?.()) return idx;
-        idx += direction;
-      }
-      return currentIndex.value;
-    };
+    const runBeforeNext = () => tigercatCore.runStepValidation(currentIndex.value, currentStep.value, props.steps, props.beforeNext);
+    const findNextUnskipped = (from, direction) => tigercatCore.findNextUnskippedStep(from, direction, props.steps, currentIndex.value);
     const handlePrev = () => {
       if (currentIndex.value <= 0) return;
       const target = findNextUnskipped(currentIndex.value - 1, -1);
@@ -194,7 +172,7 @@ var FormWizard = vue.defineComponent({
     };
     return () => {
       const stepsNodes = props.steps.map(
-        (step, index) => vue.h(chunkWCZGYU7M_js.StepsItem, {
+        (step, index) => vue.h(chunkVPNIZPIF_js.StepsItem, {
           key: step.key ?? index,
           title: step.title,
           description: step.description,
@@ -216,7 +194,7 @@ var FormWizard = vue.defineComponent({
         [
           props.showSteps && props.steps.length > 0 ? vue.h("div", { class: "px-6 py-5 bg-[var(--tiger-surface-muted,#f9fafb)]" }, [
             vue.h(
-              chunkNOTJRUAK_js.Steps,
+              chunkVPNIZPIF_js.Steps,
               {
                 current: currentIndex.value,
                 direction: props.direction,
@@ -240,7 +218,7 @@ var FormWizard = vue.defineComponent({
             },
             [
               vue.h(
-                chunkU7CCKZAG_js.Button,
+                chunk5436FG3B_js.Button,
                 {
                   type: "button",
                   variant: "secondary",
@@ -250,7 +228,7 @@ var FormWizard = vue.defineComponent({
                 { default: () => tigercatCore.resolveLocaleText(labels.value.prevText, props.prevText) }
               ),
               vue.h(
-                chunkU7CCKZAG_js.Button,
+                chunk5436FG3B_js.Button,
                 {
                   type: "button",
                   variant: "primary",

package/dist/{chunk-3PQ2I5IQ.mjs → chunk-FQHYU76P.mjs}

@@ -1,8 +1,8 @@
-import { Modal } from './chunk-M6PEW6V5.mjs';
-import { ImageCropper } from './chunk-T77L326M.mjs';
-import { Button } from './chunk-M7JUNLA7.mjs';
+import { Modal } from './chunk-OSOA7LWH.mjs';
+import { ImageCropper } from './chunk-H2BH6TJN.mjs';
+import { Button } from './chunk-UM5GGKIX.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
-import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, isActivationKey, uploadPlusIconPath, modalFooterClasses, validateUploadFile, readFileAsDataUrl, getCropperResult } from '@expcat/tigercat-core';
 
 var CropUpload = defineComponent({
   name: "TigerCropUpload",
@@ -38,26 +38,29 @@ var CropUpload = defineComponent({
       const input = e.target;
       const file = input.files?.[0];
       if (!file) return;
-      if (props.maxSize && file.size > props.maxSize) {
-        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+      const sizeError = validateUploadFile(file, props.maxSize);
+      if (sizeError) {
+        emit("error", sizeError);
         input.value = "";
         return;
       }
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        imageSrc.value = ev.target?.result;
+      readFileAsDataUrl(file).then((url) => {
+        imageSrc.value = url;
         modalVisible.value = true;
-      };
-      reader.readAsDataURL(file);
+      }).catch((err) => emit("error", err));
       input.value = "";
     };
     const handleConfirm = async () => {
       if (!cropperRef.value) return;
       cropping.value = true;
       try {
-        const result = await cropperRef.value.getCropResult();
-        emit("crop-complete", result);
-        modalVisible.value = false;
+        const result = await getCropperResult(
+          cropperRef.value
+        );
+        if (result) {
+          emit("crop-complete", result);
+          modalVisible.value = false;
+        }
       } catch (err) {
         emit("error", err);
       } finally {
@@ -101,7 +104,7 @@ var CropUpload = defineComponent({
           "aria-label": "Select image to crop and upload",
           "aria-disabled": props.disabled ? "true" : void 0,
           onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (isActivationKey(e)) {
               e.preventDefault();
               handleTriggerClick();
             }
@@ -120,7 +123,7 @@ var CropUpload = defineComponent({
           "aria-label": "Select image to crop and upload",
           "aria-disabled": props.disabled ? "true" : void 0,
           onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (isActivationKey(e)) {
               e.preventDefault();
               handleTriggerClick();
             }

package/dist/{chunk-HFCVHAQ6.mjs → chunk-FRFCXRUJ.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { defineComponent, ref, onMounted, computed, h } from 'vue';
 import { getScatterGradientPrefix, getChartInnerRect, getNumberExtent, createLinearScale, resolveChartPalette, getChartElementOpacity, getScatterHoverSize, buildChartLegendItems, resolveChartTooltipContent, SCATTER_ENTRANCE_KEYFRAMES, classNames, getScatterHoverShadow, scatterPointTransitionClasses, SCATTER_ENTRANCE_CLASS, getScatterPointPath } from '@expcat/tigercat-core';

package/dist/{chunk-3ICMBQPM.mjs → chunk-FRMMT3K3.mjs}

@@ -1,8 +1,50 @@
-import { DropdownMenu } from './chunk-AN3HKOCS.mjs';
-import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
-import { defineComponent, onMounted, ref, computed, watch, onBeforeUnmount, provide, h, nextTick } from 'vue';
-import { injectDropdownStyles, classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH, restoreFocus, handleMenuNavigation, captureActiveElement, focusFirstMenuItem } from '@expcat/tigercat-core';
+import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-7RIWAO2A.mjs';
+import { defineComponent, computed, h, onMounted, ref, watch, onBeforeUnmount, provide, nextTick } from 'vue';
+import { classNames, getDropdownMenuClasses, coerceClassValue, mergeStyleValues, injectDropdownStyles, getDropdownContainerClasses, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH, restoreFocus, handleMenuNavigation, captureActiveElement, focusFirstMenuItem } from '@expcat/tigercat-core';
 
+var DropdownMenu = defineComponent({
+  name: "TigerDropdownMenu",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const attrsRecord = attrs;
+    const attrsClass = attrsRecord.class;
+    const attrsStyle = attrsRecord.style;
+    const menuClasses = computed(
+      () => classNames(getDropdownMenuClasses(), props.className, coerceClassValue(attrsClass))
+    );
+    const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
+    return () => {
+      const {
+        class: _class,
+        style: _style,
+        ...restAttrs
+      } = attrsRecord;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          class: menuClasses.value,
+          role: "menu",
+          style: mergedStyle.value
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
 var dropdownIdCounter = 0;
 var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
@@ -295,4 +337,4 @@ var Dropdown = defineComponent({
 });
 var Dropdown_default = Dropdown;
 
-export { Dropdown, DropdownContextKey, Dropdown_default };
+export { Dropdown, DropdownContextKey, DropdownMenu, Dropdown_default };

package/dist/{chunk-J7VTGSHX.mjs → chunk-G2IZAKJY.mjs}

@@ -1,6 +1,6 @@
-import { useTigerConfig } from './chunk-XP5M2GK7.mjs';
+import { useTigerConfig } from './chunk-E3BSOB7P.mjs';
 import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
-import { mergeTigerLocale, getTaskBoardLabels, filterColumns, classNames, taskBoardBaseClasses, coerceClassValue, mergeStyleValues, kanbanAddColumnClasses, resolveLocaleText, createTouchDragTracker, isWipExceeded, getColumnCardCount, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardWipExceededClasses, kanbanCardCountClasses, taskBoardColumnHeaderClasses, taskBoardDropIndicatorClasses, taskBoardEmptyClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, getColumnDropIndex, setDragData, createColumnDragData, taskBoardCardClasses, taskBoardCardDraggingClasses, parseDragData, getDropIndex, reorderColumns, findColumnFromPoint, createCardDragData, moveCard } from '@expcat/tigercat-core';
+import { mergeTigerLocale, getTaskBoardLabels, filterColumns, createDefaultDragSnapshot, createTaskBoardDragController, classNames, taskBoardBaseClasses, coerceClassValue, mergeStyleValues, kanbanAddColumnClasses, resolveLocaleText, reorderColumns, moveCard, isWipExceeded, getColumnCardCount, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardWipExceededClasses, kanbanCardCountClasses, taskBoardColumnHeaderClasses, taskBoardDropIndicatorClasses, taskBoardEmptyClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, taskBoardCardClasses, taskBoardCardDraggingClasses } from '@expcat/tigercat-core';
 
 var TaskBoard = defineComponent({
   name: "TigerTaskBoard",
@@ -91,13 +91,8 @@ var TaskBoard = defineComponent({
       innerColumns.value = next;
       emit("update:columns", next);
     };
-    const dragState = ref(null);
-    const dropTargetColumnId = ref(null);
-    const dropIndex = ref(-1);
+    const dragSnap = ref(createDefaultDragSnapshot());
     const boardRef = ref(null);
-    let touchTracker = null;
-    let touchRaf = 0;
-    const isTouchDevice = () => typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
     const applyCardMove = async (cardId, fromColumnId, toColumnId, toIdx) => {
       const result = moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, toIdx, {
         enforceWipLimit: props.enforceWipLimit
@@ -124,166 +119,27 @@ var TaskBoard = defineComponent({
       updateColumns(result.columns);
       emit("column-move", result.event);
     };
-    const handleCardDragStart = (e, card, column) => {
-      if (!props.draggable || !e.dataTransfer) return;
-      const idx = column.cards.findIndex((c) => c.id === card.id);
-      setDragData(e.dataTransfer, createCardDragData(card.id, column.id, idx));
-      dragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
-    };
-    const handleCardDragOver = (e, column) => {
-      e.preventDefault();
-      if (!dragState.value || dragState.value.type !== "card") return;
-      dropTargetColumnId.value = column.id;
-      const target = e.currentTarget;
-      const cardEls = target.querySelectorAll("[data-tiger-taskboard-card]");
-      const rects = [];
-      cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      dropIndex.value = getDropIndex(e.clientY, rects);
-    };
-    const handleCardDrop = (e, column) => {
-      e.preventDefault();
-      if (!e.dataTransfer) return;
-      const data = parseDragData(e.dataTransfer);
-      if (!data || data.type !== "card") return;
-      applyCardMove(
-        data.cardId,
-        data.columnId,
-        column.id,
-        dropIndex.value >= 0 ? dropIndex.value : column.cards.length
-      );
-      resetDragState();
-    };
-    const handleColumnDragStart = (e, column, index) => {
-      if (!props.columnDraggable || !e.dataTransfer) return;
-      setDragData(e.dataTransfer, createColumnDragData(column.id, index));
-      dragState.value = { type: "column", id: column.id, fromIndex: index };
-    };
-    const handleColumnDragOver = (e) => {
-      if (!dragState.value || dragState.value.type !== "column") return;
-      e.preventDefault();
-    };
-    const handleColumnDrop = (e) => {
-      e.preventDefault();
-      if (!e.dataTransfer) return;
-      const data = parseDragData(e.dataTransfer);
-      if (!data || data.type !== "column") return;
-      const colEls = boardRef.value?.querySelectorAll("[data-tiger-taskboard-column]");
-      if (!colEls) return;
-      const rects = [];
-      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      const toIdx = getColumnDropIndex(e.clientX, rects);
-      applyColumnMove(data.index, toIdx);
-      resetDragState();
-    };
-    const handleDragEnd = () => {
-      resetDragState();
-    };
-    const handleDragLeave = (e) => {
-      const related = e.relatedTarget;
-      if (!related || !e.currentTarget.contains(related)) {
-        if (dragState.value?.type === "card") {
-          dropTargetColumnId.value = null;
-          dropIndex.value = -1;
-        }
-      }
-    };
-    const resetDragState = () => {
-      dragState.value = null;
-      dropTargetColumnId.value = null;
-      dropIndex.value = -1;
-    };
-    const setupTouch = () => {
-      if (!isTouchDevice()) return;
-      touchTracker = createTouchDragTracker();
-    };
-    const handleTouchStart = (e, card, column) => {
-      if (!props.draggable || !touchTracker) return;
-      const idx = column.cards.findIndex((c) => c.id === card.id);
-      touchTracker.onTouchStart(e, e.currentTarget);
-      dragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
-    };
-    const handleTouchMove = (e) => {
-      if (!touchTracker || !dragState.value) return;
-      touchTracker.onTouchMove(e);
-      cancelAnimationFrame(touchRaf);
-      touchRaf = requestAnimationFrame(() => {
-        const st = touchTracker.getState();
-        if (dragState.value?.type === "card") {
-          const colEl = findColumnFromPoint(st.currentX, st.currentY, boardRef.value);
-          if (colEl) {
-            const colId = colEl.getAttribute("data-tiger-taskboard-column-id");
-            dropTargetColumnId.value = colId ?? null;
-            const cardEls = colEl.querySelectorAll("[data-tiger-taskboard-card]");
-            const rects = [];
-            cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-            dropIndex.value = getDropIndex(st.currentY, rects);
-          }
-        }
-      });
-    };
-    const handleTouchEnd = () => {
-      if (!touchTracker || !dragState.value) return;
-      touchTracker.onTouchEnd();
-      if (dragState.value.type === "card" && dropTargetColumnId.value != null) {
-        applyCardMove(
-          dragState.value.id,
-          dragState.value.fromColumnId,
-          dropTargetColumnId.value,
-          dropIndex.value >= 0 ? dropIndex.value : 0
-        );
-      }
-      resetDragState();
-    };
-    const handleColumnTouchStart = (e, column, index) => {
-      if (!props.columnDraggable || !touchTracker) return;
-      touchTracker.onTouchStart(e, e.currentTarget);
-      dragState.value = { type: "column", id: column.id, fromIndex: index };
-    };
-    const handleColumnTouchMove = (e) => {
-      if (!touchTracker || !dragState.value || dragState.value.type !== "column") return;
-      touchTracker.onTouchMove(e);
-    };
-    const handleColumnTouchEnd = () => {
-      if (!touchTracker || !dragState.value || dragState.value.type !== "column") return;
-      const st = touchTracker.onTouchEnd();
-      const colEls = boardRef.value?.querySelectorAll("[data-tiger-taskboard-column]");
-      if (!colEls) {
-        resetDragState();
-        return;
-      }
-      const rects = [];
-      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      const toIdx = getColumnDropIndex(st.currentX, rects);
-      applyColumnMove(dragState.value.fromIndex, Math.min(toIdx, currentColumns.value.length - 1));
-      resetDragState();
-    };
-    const kbDragState = ref(null);
-    const handleCardKeyDown = (e, card, column) => {
-      if (!props.draggable) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        if (!kbDragState.value) {
-          const idx = column.cards.findIndex((c) => c.id === card.id);
-          kbDragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
-        } else {
-          const cardIdx = column.cards.findIndex((c) => c.id === card.id);
-          if (kbDragState.value.fromColumnId !== void 0) {
-            applyCardMove(kbDragState.value.id, kbDragState.value.fromColumnId, column.id, cardIdx);
-          }
-          kbDragState.value = null;
-        }
-        return;
-      }
-      if (e.key === "Escape" && kbDragState.value) {
-        e.preventDefault();
-        kbDragState.value = null;
-      }
-    };
+    const dragCtrl = createTaskBoardDragController(
+      {
+        onStateChange: (s) => {
+          dragSnap.value = s;
+        },
+        applyCardMove,
+        applyColumnMove,
+        getBoardEl: () => boardRef.value,
+        getColumnCount: () => currentColumns.value.length
+      },
+      { draggable: props.draggable, columnDraggable: props.columnDraggable }
+    );
+    watch(
+      () => [props.draggable, props.columnDraggable],
+      () => dragCtrl.setOptions({ draggable: props.draggable, columnDraggable: props.columnDraggable })
+    );
     onMounted(() => {
-      setupTouch();
+      dragCtrl.init();
     });
     onBeforeUnmount(() => {
-      cancelAnimationFrame(touchRaf);
+      dragCtrl.dispose();
     });
     const wrapperClasses = computed(
       () => classNames(
@@ -296,8 +152,8 @@ var TaskBoard = defineComponent({
       () => mergeStyleValues(attrs.style, props.style)
     );
     const renderCard = (card, column) => {
-      const isDragging = dragState.value?.type === "card" && dragState.value.id === card.id;
-      const isKbGrabbed = kbDragState.value?.id === card.id;
+      const isDragging = dragSnap.value.drag?.type === "card" && dragSnap.value.drag.id === card.id;
+      const isKbGrabbed = dragSnap.value.kbDrag?.id === card.id;
       const cardClasses = classNames(
         taskBoardCardClasses,
         isDragging && taskBoardCardDraggingClasses,
@@ -313,12 +169,16 @@ var TaskBoard = defineComponent({
         "aria-grabbed": isKbGrabbed ? "true" : void 0,
         "data-tiger-taskboard-card": "",
         "data-tiger-taskboard-card-id": String(card.id),
-        onDragstart: (e) => handleCardDragStart(e, card, column),
-        onDragend: handleDragEnd,
-        onTouchstart: (e) => handleTouchStart(e, card, column),
-        onTouchmove: handleTouchMove,
-        onTouchend: handleTouchEnd,
-        onKeydown: (e) => handleCardKeyDown(e, card, column)
+        onDragstart: (e) => {
+          if (e.dataTransfer) dragCtrl.cardDragStart(e.dataTransfer, card, column);
+        },
+        onDragend: () => dragCtrl.dragEnd(),
+        onTouchstart: (e) => dragCtrl.cardTouchStart(e, e.currentTarget, card, column),
+        onTouchmove: (e) => dragCtrl.cardTouchMove(e),
+        onTouchend: () => dragCtrl.cardTouchEnd(),
+        onKeydown: (e) => {
+          if (dragCtrl.cardKeyDown(e.key, card, column)) e.preventDefault();
+        }
       };
       if (slots.card) {
         return h("div", cardAttrs, slots.card({ card, column, isDragging }));
@@ -333,8 +193,8 @@ var TaskBoard = defineComponent({
       ]);
     };
     const renderColumnNode = (column, colIndex) => {
-      const isDropTarget = dragState.value?.type === "card" && dropTargetColumnId.value === column.id;
-      const isColDragging = dragState.value?.type === "column" && dragState.value.id === column.id;
+      const isDropTarget = dragSnap.value.drag?.type === "card" && dragSnap.value.dropTargetColumnId === column.id;
+      const isColDragging = dragSnap.value.drag?.type === "column" && dragSnap.value.drag.id === column.id;
       const wipOver = isWipExceeded(column);
       const cardCount = props.showCardCount ? getColumnCardCount(column) : null;
       const colClasses = classNames(
@@ -385,24 +245,26 @@ var TaskBoard = defineComponent({
         {
           class: taskBoardColumnHeaderClasses,
           draggable: props.columnDraggable,
-          onDragstart: (e) => handleColumnDragStart(e, column, colIndex),
-          onDragend: handleDragEnd,
-          onTouchstart: (e) => handleColumnTouchStart(e, column, colIndex),
-          onTouchmove: handleColumnTouchMove,
-          onTouchend: handleColumnTouchEnd,
+          onDragstart: (e) => {
+            if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column, colIndex);
+          },
+          onDragend: () => dragCtrl.dragEnd(),
+          onTouchstart: (e) => dragCtrl.columnTouchStart(e, e.currentTarget, column, colIndex),
+          onTouchmove: (e) => dragCtrl.columnTouchMove(e),
+          onTouchend: () => dragCtrl.columnTouchEnd(),
           style: props.columnDraggable ? "cursor: grab" : void 0
         },
         headerContent
       );
       const cards = column.cards.length > 0 ? column.cards.flatMap((card, i) => {
         const nodes = [];
-        if (isDropTarget && dropIndex.value === i) {
+        if (isDropTarget && dragSnap.value.dropIndex === i) {
           nodes.push(h("div", { key: `drop-${i}`, class: taskBoardDropIndicatorClasses }));
         }
         nodes.push(renderCard(card, column));
         return nodes;
       }).concat(
-        isDropTarget && dropIndex.value >= column.cards.length ? [h("div", { key: "drop-end", class: taskBoardDropIndicatorClasses })] : []
+        isDropTarget && dragSnap.value.dropIndex >= column.cards.length ? [h("div", { key: "drop-end", class: taskBoardDropIndicatorClasses })] : []
       ) : [
         isDropTarget ? h("div", { key: "drop-empty", class: taskBoardDropIndicatorClasses }) : slots["empty-column"] ? slots["empty-column"]({ column }) : h(
           "div",
@@ -416,9 +278,15 @@ var TaskBoard = defineComponent({
           class: taskBoardColumnBodyClasses,
           role: "list",
           "aria-label": column.title,
-          onDragover: (e) => handleCardDragOver(e, column),
-          onDrop: (e) => handleCardDrop(e, column),
-          onDragleave: handleDragLeave
+          onDragover: (e) => {
+            e.preventDefault();
+            dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
+          },
+          onDragleave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget)
         },
         cards
       );
@@ -451,8 +319,14 @@ var TaskBoard = defineComponent({
           class: colClasses,
           "data-tiger-taskboard-column": "",
           "data-tiger-taskboard-column-id": String(column.id),
-          onDragover: dragState.value?.type === "column" ? handleColumnDragOver : void 0,
-          onDrop: dragState.value?.type === "column" ? handleColumnDrop : void 0
+          onDragover: dragSnap.value.drag?.type === "column" ? (e) => {
+            e.preventDefault();
+            dragCtrl.columnDragOver();
+          } : void 0,
+          onDrop: dragSnap.value.drag?.type === "column" ? (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) dragCtrl.columnDrop(e.dataTransfer, e.clientX);
+          } : void 0
         },
         [header, body, footer]
       );

package/dist/{chunk-K2U3FEL7.js → chunk-GAWIICIB.js}

@@ -159,6 +159,51 @@ var ImageCropper = vue.defineComponent({
       document.addEventListener("touchmove", onTouchMove, { passive: false });
       document.addEventListener("touchend", onTouchEnd);
     };
+    const updateCropRect = (nextRect) => {
+      cropRect.value = nextRect;
+      emit("crop-change", cropRect.value);
+    };
+    const getKeyboardDelta = (e) => {
+      const step = e.shiftKey ? 10 : 1;
+      switch (e.key) {
+        case "ArrowLeft":
+          return { dx: -step, dy: 0 };
+        case "ArrowRight":
+          return { dx: step, dy: 0 };
+        case "ArrowUp":
+          return { dx: 0, dy: -step };
+        case "ArrowDown":
+          return { dx: 0, dy: step };
+        default:
+          return null;
+      }
+    };
+    const handleMoveKeyDown = (e) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        tigercatCore.moveCropRect(cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
+      );
+    };
+    const handleResizeKeyDown = (e, handle) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        tigercatCore.resizeCropRect(
+          cropRect.value,
+          handle,
+          delta.dx,
+          delta.dy,
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio,
+          props.minWidth,
+          props.minHeight
+        )
+      );
+    };
     const getCropResult = () => {
       return new Promise((resolve, reject) => {
         if (!imageRef.value) {
@@ -282,8 +327,12 @@ var ImageCropper = vue.defineComponent({
           width: `${cr.width}px`,
           height: `${cr.height}px`
         },
+        role: "button",
+        tabindex: 0,
+        "aria-label": "Move crop area",
         onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move")
+        onTouchstart: (e) => handleTouchStart(e, "move"),
+        onKeydown: handleMoveKeyDown
       });
       const guideLines = props.guides ? [
         // Horizontal lines
@@ -344,8 +393,12 @@ var ImageCropper = vue.defineComponent({
         return vue.h("div", {
           class: tigercatCore.getCropperHandleClasses(handle),
           style: pos,
+          role: "button",
+          tabindex: 0,
+          "aria-label": `Resize crop area ${handle}`,
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
+          onKeydown: (e) => handleResizeKeyDown(e, handle)
         });
       });
       return vue.h(