@dragonmastery/dragoncore-vue 0.0.1

package/dist/InlineAttachments-I39rOvip.js

@@ -0,0 +1,1351 @@
+import { l as useUserSessionStore, m as useEnv } from "./useRpcAuth-BLlRSHy8.js";
+import { t as useMutation } from "./useMutation-CFwe7H9j.js";
+import { t as useQuery } from "./useQuery-p7oJO7OD.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withModifiers } from "vue";
+
+//#region src/components/ConfirmDialog.vue
+const _hoisted_1$2 = { class: "font-bold text-lg mb-4" };
+const _hoisted_2$2 = { class: "py-4" };
+const _hoisted_3$2 = { class: "modal-action" };
+const _hoisted_4$2 = ["disabled"];
+const _hoisted_5$2 = ["disabled"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	__name: "ConfirmDialog",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: "Confirm" },
+		message: { default: "Are you sure?" },
+		confirmText: { default: "Confirm" },
+		cancelText: { default: "Cancel" },
+		processingText: { default: "Processing..." },
+		confirmButtonClass: { default: "btn-primary" },
+		isProcessing: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"confirm",
+		"cancel"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const dialogRef = ref(null);
+		const isOpen = ref(props.modelValue);
+		watch(() => props.modelValue, (newValue) => {
+			isOpen.value = newValue;
+			if (newValue && dialogRef.value) dialogRef.value.showModal();
+			else if (dialogRef.value) dialogRef.value.close();
+		}, { immediate: true });
+		watch(isOpen, (newValue) => {
+			if (newValue && dialogRef.value) dialogRef.value.showModal();
+			else if (dialogRef.value) dialogRef.value.close();
+		});
+		const handleConfirm = () => {
+			emit("confirm");
+		};
+		const handleCancel = () => {
+			isOpen.value = false;
+			emit("update:modelValue", false);
+			emit("cancel");
+		};
+		const handleBackdropClick = (event) => {
+			if (event.target === dialogRef.value) handleCancel();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("dialog", {
+				ref_key: "dialogRef",
+				ref: dialogRef,
+				class: normalizeClass(["modal", { "modal-open": isOpen.value }]),
+				onClick: handleBackdropClick
+			}, [createElementVNode("div", {
+				class: "modal-box",
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}, [
+				createElementVNode("h3", _hoisted_1$2, toDisplayString(__props.title), 1),
+				createElementVNode("div", _hoisted_2$2, [renderSlot(_ctx.$slots, "message", {}, () => [createElementVNode("p", null, toDisplayString(__props.message), 1)])]),
+				createElementVNode("div", _hoisted_3$2, [createElementVNode("button", {
+					class: "btn btn-outline",
+					onClick: withModifiers(handleCancel, ["prevent"]),
+					disabled: __props.isProcessing,
+					type: "button"
+				}, toDisplayString(__props.cancelText), 9, _hoisted_4$2), createElementVNode("button", {
+					class: normalizeClass(["btn", __props.confirmButtonClass]),
+					onClick: withModifiers(handleConfirm, ["prevent"]),
+					disabled: __props.isProcessing,
+					type: "button"
+				}, toDisplayString(__props.isProcessing ? __props.processingText : __props.confirmText), 11, _hoisted_5$2)])
+			])], 2);
+		};
+	}
+});
+var ConfirmDialog_default = _sfc_main$2;
+
+//#endregion
+//#region src/components/ImageModal.vue
+const _hoisted_1$1 = { class: "modal-box w-full max-w-full h-full max-h-full p-0 flex flex-col bg-base-100" };
+const _hoisted_2$1 = { class: "flex items-center justify-between p-3 sm:p-4 border-b border-base-300 flex-shrink-0 bg-base-100/95 backdrop-blur" };
+const _hoisted_3$1 = { class: "flex-1 min-w-0 mr-2" };
+const _hoisted_4$1 = { class: "font-semibold text-sm sm:text-base truncate" };
+const _hoisted_5$1 = {
+	key: 0,
+	class: "text-xs text-base-content/60 mt-0.5"
+};
+const _hoisted_6$1 = { class: "flex items-center gap-1 sm:gap-2 flex-shrink-0" };
+const _hoisted_7$1 = {
+	key: 0,
+	class: "absolute inset-0 flex items-center justify-center"
+};
+const _hoisted_8$1 = {
+	key: 1,
+	class: "absolute inset-0 flex flex-col items-center justify-center p-4 text-center"
+};
+const _hoisted_9$1 = ["src", "alt"];
+const _hoisted_10$1 = ["disabled"];
+const _hoisted_11$1 = ["disabled"];
+const _hoisted_12$1 = {
+	method: "dialog",
+	class: "modal-backdrop"
+};
+const minScale = .5;
+const maxScale = 5;
+const zoomStep = .05;
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "ImageModal",
+	props: {
+		isOpen: { type: Boolean },
+		imageSrc: { default: "" },
+		imageName: { default: "" },
+		imageIndex: { default: null },
+		totalImages: { default: null },
+		onDownload: {
+			type: Function,
+			default: void 0
+		},
+		onPrevious: {
+			type: Function,
+			default: void 0
+		},
+		onNext: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const dialogRef = ref(null);
+		const imageRef = ref(null);
+		const imageContainerRef = ref(null);
+		const isOpen = ref(props.isOpen);
+		const isLoading = ref(false);
+		const hasError = ref(false);
+		const scale = ref(1);
+		const translateX = ref(0);
+		const translateY = ref(0);
+		const rotation = ref(0);
+		const isDragging = ref(false);
+		const isPinching = ref(false);
+		const isResetting = ref(false);
+		const touchState = ref(null);
+		const mouseDragState = ref(null);
+		const isMobile = ref(false);
+		const imageStyle = computed(() => ({
+			transform: `scale(${scale.value}) translate(${translateX.value}px, ${translateY.value}px) rotate(${rotation.value}deg)`,
+			cursor: mouseDragState.value?.isDragging ? "grabbing" : scale.value > 1 ? "grab" : "default",
+			touchAction: "none",
+			userSelect: "none",
+			willChange: isDragging.value || isPinching.value ? "transform" : "auto"
+		}));
+		const showNavigation = computed(() => {
+			return props.totalImages !== null && props.totalImages > 1 && (props.onPrevious || props.onNext);
+		});
+		watch(() => props.isOpen, (newValue) => {
+			isOpen.value = newValue;
+			if (newValue && dialogRef.value) {
+				dialogRef.value.showModal();
+				isResetting.value = true;
+				scale.value = 1;
+				translateX.value = 0;
+				translateY.value = 0;
+				rotation.value = 0;
+				touchState.value = null;
+				mouseDragState.value = null;
+				isDragging.value = false;
+				isPinching.value = false;
+				isLoading.value = true;
+				hasError.value = false;
+				nextTick(() => {
+					setTimeout(() => {
+						isResetting.value = false;
+					}, 50);
+				});
+				nextTick(() => {
+					if (imageContainerRef.value) {
+						imageContainerRef.value.addEventListener("wheel", handleWheel, { passive: false });
+						imageContainerRef.value.addEventListener("mousedown", handleMouseDown);
+						imageContainerRef.value.addEventListener("touchstart", handleTouchStart, { passive: false });
+						imageContainerRef.value.addEventListener("touchmove", handleTouchMove, { passive: false });
+						imageContainerRef.value.addEventListener("touchend", handleTouchEnd, { passive: true });
+						imageContainerRef.value.addEventListener("touchcancel", handleTouchEnd, { passive: true });
+					}
+					document.addEventListener("mousemove", handleMouseMove);
+					document.addEventListener("mouseup", handleMouseUp);
+				});
+			} else if (dialogRef.value) {
+				dialogRef.value.close();
+				if (imageContainerRef.value) {
+					imageContainerRef.value.removeEventListener("wheel", handleWheel);
+					imageContainerRef.value.removeEventListener("mousedown", handleMouseDown);
+					imageContainerRef.value.removeEventListener("touchstart", handleTouchStart);
+					imageContainerRef.value.removeEventListener("touchmove", handleTouchMove);
+					imageContainerRef.value.removeEventListener("touchend", handleTouchEnd);
+					imageContainerRef.value.removeEventListener("touchcancel", handleTouchEnd);
+				}
+				document.removeEventListener("mousemove", handleMouseMove);
+				document.removeEventListener("mouseup", handleMouseUp);
+				touchState.value = null;
+				mouseDragState.value = null;
+			}
+		}, { immediate: true });
+		watch(() => props.imageSrc, () => {
+			if (props.isOpen && props.imageSrc) {
+				isLoading.value = true;
+				hasError.value = false;
+				scale.value = 1;
+				translateX.value = 0;
+				translateY.value = 0;
+				rotation.value = 0;
+			}
+		});
+		watch(() => props.imageIndex, () => {
+			if (props.isOpen) {
+				resetZoom();
+				isLoading.value = true;
+				hasError.value = false;
+			}
+		});
+		onMounted(() => {
+			isMobile.value = window.innerWidth < 768;
+			window.addEventListener("resize", () => {
+				isMobile.value = window.innerWidth < 768;
+			});
+		});
+		const handleKeydown = (event) => {
+			if (!props.isOpen) return;
+			switch (event.key) {
+				case "Escape":
+					handleClose();
+					break;
+				case "ArrowLeft":
+					if (showNavigation.value && props.imageIndex !== null && props.imageIndex > 0) {
+						event.preventDefault();
+						goToPrevious();
+					}
+					break;
+				case "ArrowRight":
+					if (showNavigation.value && props.imageIndex !== null && props.imageIndex < (props.totalImages || 0) - 1) {
+						event.preventDefault();
+						goToNext();
+					}
+					break;
+				case "+":
+				case "=":
+					event.preventDefault();
+					zoomIn();
+					break;
+				case "-":
+					event.preventDefault();
+					zoomOut();
+					break;
+				case "0":
+					event.preventDefault();
+					resetZoom();
+					break;
+			}
+		};
+		const zoomIn = () => {
+			if (scale.value < maxScale) {
+				const newScale = scale.value + zoomStep;
+				scale.value = Math.min(maxScale, newScale);
+			}
+		};
+		const zoomOut = () => {
+			if (scale.value > minScale) {
+				const newScale = scale.value - zoomStep;
+				scale.value = Math.max(minScale, newScale);
+				if (scale.value <= 1) {
+					translateX.value = 0;
+					translateY.value = 0;
+				}
+			}
+		};
+		const resetZoom = () => {
+			isResetting.value = true;
+			scale.value = 1;
+			translateX.value = 0;
+			translateY.value = 0;
+			rotation.value = 0;
+			touchState.value = null;
+			mouseDragState.value = null;
+			isDragging.value = false;
+			isPinching.value = false;
+			nextTick(() => {
+				setTimeout(() => {
+					isResetting.value = false;
+				}, 50);
+			});
+		};
+		const rotateImage = () => {
+			rotation.value = rotation.value + 90;
+		};
+		const handleWheel = (event) => {
+			if (!imageRef.value || !props.isOpen) return;
+			event.preventDefault();
+			const scrollDirection = (event.deltaY !== 0 ? event.deltaY : event.deltaX) > 0 ? -1 : 1;
+			const oldScale = scale.value;
+			const newScale = scrollDirection > 0 ? oldScale + zoomStep : oldScale - zoomStep;
+			const clampedScale = Math.max(minScale, Math.min(maxScale, newScale));
+			if (Math.abs(clampedScale - oldScale) > .001) {
+				const containerRect = imageContainerRef.value?.getBoundingClientRect();
+				if (!containerRect) return;
+				const mouseX = event.clientX - containerRect.left - containerRect.width / 2;
+				const mouseY = event.clientY - containerRect.top - containerRect.height / 2;
+				const imagePointX = (mouseX - translateX.value) / oldScale;
+				const imagePointY = (mouseY - translateY.value) / oldScale;
+				scale.value = clampedScale;
+				translateX.value = mouseX - imagePointX * clampedScale;
+				translateY.value = mouseY - imagePointY * clampedScale;
+				if (scale.value <= 1) {
+					translateX.value = 0;
+					translateY.value = 0;
+				}
+			}
+		};
+		const handleMouseDown = (event) => {
+			if (!imageRef.value || !props.isOpen || scale.value <= 1) return;
+			if (event.button !== 0) return;
+			event.preventDefault();
+			isDragging.value = true;
+			mouseDragState.value = {
+				isDragging: true,
+				startX: event.clientX,
+				startY: event.clientY,
+				startTranslateX: translateX.value,
+				startTranslateY: translateY.value
+			};
+			if (imageRef.value) imageRef.value.style.cursor = "grabbing";
+		};
+		const handleMouseMove = (event) => {
+			if (!mouseDragState.value || !mouseDragState.value.isDragging || !props.isOpen) return;
+			event.preventDefault();
+			requestAnimationFrame(() => {
+				if (!mouseDragState.value) return;
+				const deltaX = event.clientX - mouseDragState.value.startX;
+				const deltaY = event.clientY - mouseDragState.value.startY;
+				translateX.value = mouseDragState.value.startTranslateX + deltaX / scale.value;
+				translateY.value = mouseDragState.value.startTranslateY + deltaY / scale.value;
+				const maxTranslate = 300;
+				translateX.value = Math.max(-maxTranslate, Math.min(maxTranslate, translateX.value));
+				translateY.value = Math.max(-maxTranslate, Math.min(maxTranslate, translateY.value));
+			});
+		};
+		const handleMouseUp = () => {
+			if (mouseDragState.value) mouseDragState.value.isDragging = false;
+			mouseDragState.value = null;
+			isDragging.value = false;
+			if (imageRef.value) imageRef.value.style.cursor = scale.value > 1 ? "grab" : "default";
+		};
+		const getTouchDistance = (touches) => {
+			if (touches.length < 2) return 0;
+			const touch1 = touches[0];
+			const touch2 = touches[1];
+			if (!touch1 || !touch2) return 0;
+			const dx = touch1.clientX - touch2.clientX;
+			const dy = touch1.clientY - touch2.clientY;
+			return Math.sqrt(dx * dx + dy * dy);
+		};
+		const getTouchCenter = (touches) => {
+			if (touches.length === 0) return null;
+			if (touches.length === 1) {
+				const touch = touches[0];
+				if (!touch) return null;
+				return {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+			}
+			const touch1 = touches[0];
+			const touch2 = touches[1];
+			if (!touch1 || !touch2) return null;
+			return {
+				x: (touch1.clientX + touch2.clientX) / 2,
+				y: (touch1.clientY + touch2.clientY) / 2
+			};
+		};
+		const handleImageTouchStart = (event) => {
+			if (!imageRef.value || !props.isOpen) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const touches = Array.from(event.touches);
+			if (touches.length === 2) {
+				isPinching.value = true;
+				const distance = getTouchDistance(touches);
+				if (getTouchCenter(touches)) touchState.value = {
+					type: "pinch",
+					initialDistance: distance,
+					initialScale: scale.value,
+					initialTranslateX: translateX.value,
+					initialTranslateY: translateY.value,
+					initialTouches: touches
+				};
+			} else if (touches.length === 1 && scale.value > 1) {
+				isDragging.value = true;
+				const touch = touches[0];
+				if (touch) touchState.value = {
+					type: "pan",
+					lastPanX: touch.clientX,
+					lastPanY: touch.clientY
+				};
+			} else {
+				touchState.value = null;
+				isDragging.value = false;
+				isPinching.value = false;
+			}
+		};
+		const handleImageTouchMove = (event) => {
+			if (!imageRef.value || !props.isOpen || !touchState.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			handleTouchMove(event);
+		};
+		const handleImageTouchEnd = (event) => {
+			if (!imageRef.value || !props.isOpen) return;
+			event.preventDefault();
+			event.stopPropagation();
+			handleTouchEnd();
+		};
+		const handleTouchStart = (event) => {
+			if (!imageRef.value || !props.isOpen) return;
+			const target = event.target;
+			if (target.closest(".zoom-controls")) return;
+			if (target === imageRef.value || imageRef.value.contains(target)) return;
+			event.preventDefault();
+			const touches = Array.from(event.touches);
+			if (touches.length === 2) {
+				isPinching.value = true;
+				const distance = getTouchDistance(touches);
+				if (getTouchCenter(touches)) touchState.value = {
+					type: "pinch",
+					initialDistance: distance,
+					initialScale: scale.value,
+					initialTranslateX: translateX.value,
+					initialTranslateY: translateY.value,
+					initialTouches: touches
+				};
+			} else if (touches.length === 1 && scale.value > 1) {
+				isDragging.value = true;
+				const touch = touches[0];
+				if (touch) touchState.value = {
+					type: "pan",
+					lastPanX: touch.clientX,
+					lastPanY: touch.clientY
+				};
+			} else {
+				touchState.value = null;
+				isDragging.value = false;
+				isPinching.value = false;
+			}
+		};
+		const handleTouchMove = (event) => {
+			if (!imageRef.value || !props.isOpen || !touchState.value) return;
+			const touches = Array.from(event.touches);
+			requestAnimationFrame(() => {
+				if (!touchState.value) return;
+				if (touchState.value.type === "pinch" && touches.length === 2) {
+					event.preventDefault();
+					const distance = getTouchDistance(touches);
+					if (touchState.value.initialDistance && touchState.value.initialScale !== void 0) {
+						const scaleChange = distance / touchState.value.initialDistance;
+						scale.value = Math.max(minScale, Math.min(maxScale, touchState.value.initialScale * scaleChange));
+					}
+				} else if (touchState.value.type === "pan" && touches.length === 1 && scale.value > 1) {
+					event.preventDefault();
+					const touch = touches[0];
+					if (touch && touchState.value.lastPanX !== void 0 && touchState.value.lastPanY !== void 0) {
+						const deltaX = touch.clientX - touchState.value.lastPanX;
+						const deltaY = touch.clientY - touchState.value.lastPanY;
+						translateX.value += deltaX / scale.value;
+						translateY.value += deltaY / scale.value;
+						const maxTranslate = 200;
+						translateX.value = Math.max(-maxTranslate, Math.min(maxTranslate, translateX.value));
+						translateY.value = Math.max(-maxTranslate, Math.min(maxTranslate, translateY.value));
+						touchState.value.lastPanX = touch.clientX;
+						touchState.value.lastPanY = touch.clientY;
+					}
+				} else {
+					touchState.value = null;
+					isDragging.value = false;
+					isPinching.value = false;
+				}
+			});
+		};
+		const handleTouchEnd = () => {
+			touchState.value = null;
+			isDragging.value = false;
+			isPinching.value = false;
+		};
+		const handleImageLoad = () => {
+			isLoading.value = false;
+			hasError.value = false;
+		};
+		const handleImageError = () => {
+			isLoading.value = false;
+			hasError.value = true;
+		};
+		const goToPrevious = () => {
+			if (props.onPrevious) props.onPrevious();
+		};
+		const goToNext = () => {
+			if (props.onNext) props.onNext();
+		};
+		const handleDownload = () => {
+			if (props.onDownload) props.onDownload();
+		};
+		const handleClose = () => {
+			isOpen.value = false;
+			emit("close");
+		};
+		const handleBackdropClick = (event) => {
+			if (event.target === dialogRef.value) handleClose();
+		};
+		onUnmounted(() => {
+			window.removeEventListener("resize", () => {});
+			if (imageContainerRef.value) {
+				imageContainerRef.value.removeEventListener("wheel", handleWheel);
+				imageContainerRef.value.removeEventListener("mousedown", handleMouseDown);
+				imageContainerRef.value.removeEventListener("touchstart", handleTouchStart);
+				imageContainerRef.value.removeEventListener("touchmove", handleTouchMove);
+				imageContainerRef.value.removeEventListener("touchend", handleTouchEnd);
+				imageContainerRef.value.removeEventListener("touchcancel", handleTouchEnd);
+			}
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("dialog", {
+				ref_key: "dialogRef",
+				ref: dialogRef,
+				class: normalizeClass(["modal", { "modal-open": isOpen.value }]),
+				onClick: handleBackdropClick,
+				onKeydown: handleKeydown
+			}, [createElementVNode("div", _hoisted_1$1, [
+				createCommentVNode(" Header "),
+				createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [createElementVNode("h3", _hoisted_4$1, toDisplayString(__props.imageName), 1), __props.imageIndex !== null && __props.totalImages !== null ? (openBlock(), createElementBlock("p", _hoisted_5$1, toDisplayString(__props.imageIndex + 1) + " / " + toDisplayString(__props.totalImages), 1)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_6$1, [
+					createCommentVNode(" Navigation buttons (if multiple images) "),
+					showNavigation.value && __props.imageIndex !== null && __props.imageIndex > 0 ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						onClick: withModifiers(goToPrevious, ["prevent"]),
+						class: "btn btn-sm btn-circle btn-ghost",
+						type: "button",
+						title: "Previous image",
+						"aria-label": "Previous image"
+					}, [..._cache[4] || (_cache[4] = [createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: "h-5 w-5",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M15 19l-7-7 7-7"
+					})], -1)])])) : createCommentVNode("v-if", true),
+					showNavigation.value && __props.imageIndex !== null && __props.imageIndex < (__props.totalImages || 0) - 1 ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						onClick: withModifiers(goToNext, ["prevent"]),
+						class: "btn btn-sm btn-circle btn-ghost",
+						type: "button",
+						title: "Next image",
+						"aria-label": "Next image"
+					}, [..._cache[5] || (_cache[5] = [createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: "h-5 w-5",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M9 5l7 7-7 7"
+					})], -1)])])) : createCommentVNode("v-if", true),
+					createCommentVNode(" Download button "),
+					props.onDownload ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						onClick: withModifiers(handleDownload, ["prevent"]),
+						class: "btn btn-sm btn-circle btn-ghost",
+						type: "button",
+						title: "Download",
+						"aria-label": "Download image"
+					}, [..._cache[6] || (_cache[6] = [createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: "h-5 w-5",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+					})], -1)])])) : createCommentVNode("v-if", true),
+					createCommentVNode(" Close button "),
+					createElementVNode("button", {
+						onClick: withModifiers(handleClose, ["prevent"]),
+						class: "btn btn-sm btn-circle btn-ghost",
+						type: "button",
+						title: "Close",
+						"aria-label": "Close modal"
+					}, [..._cache[7] || (_cache[7] = [createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: "h-5 w-5",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M6 18L18 6M6 6l12 12"
+					})], -1)])])
+				])]),
+				createCommentVNode(" Image container "),
+				createElementVNode("div", {
+					ref_key: "imageContainerRef",
+					ref: imageContainerRef,
+					class: "flex-1 flex items-center justify-center overflow-hidden bg-base-200 relative"
+				}, [
+					createCommentVNode(" Loading state "),
+					isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [..._cache[8] || (_cache[8] = [createElementVNode("span", { class: "loading loading-spinner loading-lg" }, null, -1)])])) : createCommentVNode("v-if", true),
+					createCommentVNode(" Error state "),
+					hasError.value ? (openBlock(), createElementBlock("div", _hoisted_8$1, [..._cache[9] || (_cache[9] = [createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: "h-12 w-12 text-error mb-2",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+					})], -1), createElementVNode("p", { class: "text-sm text-base-content/70" }, "Failed to load image", -1)])])) : createCommentVNode("v-if", true),
+					createCommentVNode(" Image "),
+					__props.imageSrc && !hasError.value ? (openBlock(), createElementBlock("img", {
+						key: 2,
+						ref_key: "imageRef",
+						ref: imageRef,
+						src: __props.imageSrc,
+						alt: __props.imageName,
+						class: normalizeClass(["max-w-full max-h-full object-contain", { "transition-transform duration-300 ease-out": !isDragging.value && !isPinching.value && !isResetting.value }]),
+						style: normalizeStyle(imageStyle.value),
+						onLoad: handleImageLoad,
+						onError: handleImageError,
+						onDblclick: resetZoom,
+						onTouchstart: withModifiers(handleImageTouchStart, ["stop"]),
+						onTouchmove: withModifiers(handleImageTouchMove, ["stop"]),
+						onTouchend: withModifiers(handleImageTouchEnd, ["stop"])
+					}, null, 46, _hoisted_9$1)) : createCommentVNode("v-if", true),
+					createCommentVNode(" Zoom controls "),
+					__props.imageSrc && !hasError.value ? (openBlock(), createElementBlock("div", {
+						key: 3,
+						class: "zoom-controls absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-1 sm:gap-2 bg-base-100/90 backdrop-blur rounded-lg p-1.5 sm:p-2 shadow-lg z-10",
+						onTouchstart: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+						onTouchmove: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+						onTouchend: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+						onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+					}, [
+						createElementVNode("button", {
+							onClick: withModifiers(zoomOut, ["prevent"]),
+							class: "btn btn-sm btn-circle btn-ghost",
+							type: "button",
+							disabled: scale.value <= minScale,
+							title: "Zoom out",
+							"aria-label": "Zoom out"
+						}, [..._cache[10] || (_cache[10] = [createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"
+						})], -1)])], 8, _hoisted_10$1),
+						createElementVNode("button", {
+							onClick: withModifiers(resetZoom, ["prevent"]),
+							class: "text-xs flex items-center px-2 text-base-content/70 hover:text-base-content hover:bg-base-200 rounded transition-colors cursor-pointer",
+							type: "button",
+							title: "Reset zoom to 100%",
+							"aria-label": "Reset zoom to 100%"
+						}, toDisplayString(Math.round(scale.value * 100)) + "% ", 1),
+						createElementVNode("button", {
+							onClick: withModifiers(zoomIn, ["prevent"]),
+							class: "btn btn-sm btn-circle btn-ghost",
+							type: "button",
+							disabled: scale.value >= maxScale,
+							title: "Zoom in",
+							"aria-label": "Zoom in"
+						}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
+						})], -1)])], 8, _hoisted_11$1),
+						createElementVNode("button", {
+							onClick: withModifiers(rotateImage, ["prevent"]),
+							class: "btn btn-sm btn-circle btn-ghost",
+							type: "button",
+							title: "Rotate image",
+							"aria-label": "Rotate image"
+						}, [..._cache[12] || (_cache[12] = [createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							viewBox: "0 0 24 24",
+							"stroke-width": "1.5",
+							stroke: "currentColor",
+							"aria-hidden": "true",
+							"data-slot": "icon",
+							fill: "none",
+							class: "size-6"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							d: "M18.363 5.634A8.997 9.002 29.494 0 0 7.5 4.206 8.997 9.002 29.494 0 0 3.306 14.33 8.997 9.002 29.494 0 0 11.996 21a8.997 9.002 29.494 0 0 8.694-6.673m-2.327-8.693L20.87 8.14m.017-4.994v5.015m0 0h-5.013"
+						})], -1)])])
+					], 32)) : createCommentVNode("v-if", true)
+				], 512)
+			]), createElementVNode("form", _hoisted_12$1, [createElementVNode("button", {
+				type: "button",
+				onClick: withModifiers(handleClose, ["prevent"])
+			}, "close")])], 34);
+		};
+	}
+});
+var ImageModal_default = _sfc_main$1;
+
+//#endregion
+//#region src/slices/support_ticket/shared/InlineAttachments.vue
+const _hoisted_1 = { class: "mt-4 sm:mt-6" };
+const _hoisted_2 = { class: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0 mb-3" };
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = { class: "flex flex-col items-center justify-center py-2 sm:py-4" };
+const _hoisted_5 = {
+	key: 0,
+	class: "text-xs text-base-content/50 mt-2 sm:mt-3"
+};
+const _hoisted_6 = {
+	key: 1,
+	class: "mb-4 space-y-2"
+};
+const _hoisted_7 = { class: "flex-1 min-w-0" };
+const _hoisted_8 = { class: "text-xs sm:text-sm font-medium truncate" };
+const _hoisted_9 = {
+	key: 0,
+	class: "w-full bg-base-300 rounded-full h-1.5 mt-1"
+};
+const _hoisted_10 = {
+	key: 1,
+	class: "text-xs text-error mt-1 break-words"
+};
+const _hoisted_11 = { class: "flex gap-2 sm:gap-1" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = {
+	key: 2,
+	class: "space-y-2"
+};
+const _hoisted_15 = {
+	key: 0,
+	class: "flex justify-center py-4"
+};
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { class: "flex items-center gap-2 sm:gap-3 flex-1 min-w-0 w-full sm:w-auto" };
+const _hoisted_18 = { class: "flex-shrink-0" };
+const _hoisted_19 = {
+	key: 0,
+	class: "w-10 h-10 sm:w-12 sm:h-12 rounded overflow-hidden bg-base-200 flex items-center justify-center"
+};
+const _hoisted_20 = ["src", "alt"];
+const _hoisted_21 = {
+	key: 1,
+	class: "w-full h-full flex items-center justify-center"
+};
+const _hoisted_22 = { class: "flex-1 min-w-0" };
+const _hoisted_23 = { class: "text-sm sm:text-base font-medium truncate" };
+const _hoisted_24 = { class: "text-xs text-base-content/60" };
+const _hoisted_25 = ["onClick"];
+const _hoisted_26 = ["onClick"];
+const _hoisted_27 = ["onClick"];
+const _hoisted_28 = {
+	key: 3,
+	class: "text-center py-8 text-base-content/50"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "InlineAttachments",
+	props: {
+		recordId: {},
+		canUpload: {
+			type: Boolean,
+			default: true
+		},
+		canDelete: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"uploaded",
+		"deleted",
+		"filesQueued"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const uploadQueuedFiles = async (ticketId) => {
+			const pendingItems = uploadQueue.value.filter((item) => item.status === "pending");
+			for (const item of pendingItems) {
+				item.status = "uploading";
+				await uploadFile(item, ticketId);
+			}
+		};
+		__expose({
+			getQueuedFiles: () => uploadQueue.value.filter((item) => item.status === "pending").map((item) => item.file),
+			uploadQueuedFiles
+		});
+		const fileInput = ref(null);
+		const isDragging = ref(false);
+		const isUploading = ref(false);
+		const uploadQueue = ref([]);
+		const fileToDelete = ref(null);
+		const showDeleteModal = ref(false);
+		const viewingImage = ref(null);
+		const imageUrls = ref(/* @__PURE__ */ new Map());
+		const env = useEnv();
+		const userStore = useUserSessionStore();
+		const { data: attachmentsData, loading: attachmentsLoading, refetch: refreshAttachments } = useQuery(async (api) => {
+			if (!props.recordId) return {
+				files: [],
+				folders: []
+			};
+			return await api.attachments.listAttachments({
+				record_id: props.recordId,
+				record_type: "support_ticket",
+				filters: {
+					limit: 100,
+					include_folders: false,
+					folder_id: null
+				}
+			});
+		}, {
+			enabled: computed(() => !!props.recordId),
+			staleTime: 120 * 1e3
+		});
+		const attachments = computed(() => {
+			if (!attachmentsData.value) return [];
+			const files = [];
+			const fileItems = attachmentsData.value.files || [];
+			for (const item of fileItems) files.push({
+				id: item.id,
+				name: item.original_name,
+				size: parseInt(item.file_size || "0"),
+				type: item.content_type || "",
+				uploadedAt: new Date(item.created_at)
+			});
+			return files;
+		});
+		const deleteMessage = computed(() => {
+			if (!fileToDelete.value) return "Are you sure you want to delete this attachment? This action cannot be undone.";
+			return `Are you sure you want to delete "${fileToDelete.value.name}"? This action cannot be undone.`;
+		});
+		const imageAttachments = computed(() => {
+			return attachments.value.filter((file) => isImage(file.type));
+		});
+		const viewingImageIndex = computed(() => {
+			if (!viewingImage.value) return null;
+			const index = imageAttachments.value.findIndex((img) => img.id === viewingImage.value?.id);
+			return index >= 0 ? index : null;
+		});
+		const canGoToPrevious = computed(() => {
+			return viewingImageIndex.value !== null && viewingImageIndex.value > 0;
+		});
+		const canGoToNext = computed(() => {
+			return viewingImageIndex.value !== null && viewingImageIndex.value < imageAttachments.value.length - 1;
+		});
+		const { mutate: deleteAttachment } = useMutation((api, input) => api.attachments.deleteAttachment(input.id), { invalidate: /^attachments?:/ });
+		const getFileTypeLabel = (mimeType) => {
+			if (mimeType.startsWith("image/")) return "IMG";
+			if (mimeType.startsWith("video/")) return "VID";
+			if (mimeType.startsWith("audio/")) return "AUD";
+			if (mimeType.includes("pdf")) return "PDF";
+			if (mimeType.includes("word") || mimeType.includes("document")) return "DOC";
+			if (mimeType.includes("excel") || mimeType.includes("spreadsheet")) return "XLS";
+			if (mimeType.includes("zip") || mimeType.includes("archive")) return "ZIP";
+			return "FILE";
+		};
+		const getFileTypeBadgeClass = (mimeType) => {
+			if (mimeType.startsWith("image/")) return "badge-primary";
+			if (mimeType.startsWith("video/")) return "badge-secondary";
+			if (mimeType.includes("pdf")) return "badge-error";
+			if (mimeType.includes("word") || mimeType.includes("document")) return "badge-info";
+			return "badge-ghost";
+		};
+		const formatFileSize = (bytes) => {
+			if (bytes === 0) return "0 B";
+			const k = 1024;
+			const sizes = [
+				"B",
+				"KB",
+				"MB",
+				"GB"
+			];
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+			return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+		};
+		const formatDate = (date) => {
+			return new Intl.DateTimeFormat("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			}).format(date);
+		};
+		const isImage = (mimeType) => {
+			return mimeType.startsWith("image/");
+		};
+		const getImageUrl = async (fileId) => {
+			if (imageUrls.value.has(fileId)) return imageUrls.value.get(fileId);
+			try {
+				const res = await fetch(`${env.restApiClient.apiUrl}/attachments/support_ticket/${fileId}`, {
+					method: "GET",
+					headers: { Authorization: `Bearer ${userStore.accessToken}` }
+				});
+				if (!res.ok) throw new Error("Failed to load image");
+				const blob = await res.blob();
+				const url = URL.createObjectURL(blob);
+				imageUrls.value.set(fileId, url);
+				return url;
+			} catch (error) {
+				console.error("Failed to load image:", error);
+				return "";
+			}
+		};
+		const getImageUrlSync = (fileId) => {
+			return imageUrls.value.get(fileId) || "";
+		};
+		const loadImageThumbnail = async (fileId) => {
+			if (!imageUrls.value.has(fileId)) await getImageUrl(fileId);
+		};
+		const handleImageError = (event) => {
+			const img = event.target;
+			img.style.display = "none";
+		};
+		onUnmounted(() => {
+			imageUrls.value.forEach((url) => {
+				URL.revokeObjectURL(url);
+			});
+			imageUrls.value.clear();
+		});
+		const viewImage = async (file) => {
+			viewingImage.value = file;
+			if (!imageUrls.value.has(file.id)) await getImageUrl(file.id);
+		};
+		const goToPreviousImage = () => {
+			if (!canGoToPrevious.value || viewingImageIndex.value === null) return;
+			const previousImage = imageAttachments.value[viewingImageIndex.value - 1];
+			if (previousImage) viewImage(previousImage);
+		};
+		const goToNextImage = () => {
+			if (!canGoToNext.value || viewingImageIndex.value === null) return;
+			const nextImage = imageAttachments.value[viewingImageIndex.value + 1];
+			if (nextImage) viewImage(nextImage);
+		};
+		const closeImageModal = () => {
+			viewingImage.value = null;
+		};
+		const openFileSelector = (event) => {
+			if (event) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			if (isUploading.value) return;
+			fileInput.value?.click();
+		};
+		const processFiles = (files) => {
+			const fileArray = Array.from(files);
+			fileArray.forEach((file) => {
+				const queueItem = {
+					id: `${Date.now()}-${Math.random()}`,
+					file,
+					status: "pending",
+					progress: 0
+				};
+				uploadQueue.value.push(queueItem);
+			});
+			emit("filesQueued", fileArray);
+			if (props.recordId) processUploadQueue();
+		};
+		const handleFileSelect = (event) => {
+			const target = event.target;
+			const files = target.files;
+			if (!files) return;
+			processFiles(Array.from(files));
+			target.value = "";
+		};
+		const handleFileDrop = (event) => {
+			isDragging.value = false;
+			const files = event.dataTransfer?.files;
+			if (!files || files.length === 0) return;
+			processFiles(Array.from(files));
+		};
+		const processUploadQueue = async (ticketId) => {
+			const nextItem = uploadQueue.value.find((item) => item.status === "pending");
+			if (!nextItem) {
+				isUploading.value = false;
+				return;
+			}
+			isUploading.value = true;
+			nextItem.status = "uploading";
+			await uploadFile(nextItem, ticketId);
+			if (uploadQueue.value.some((item) => item.status === "pending")) processUploadQueue(ticketId);
+			else isUploading.value = false;
+		};
+		const uploadFile = async (item, ticketId) => {
+			const recordId = ticketId || props.recordId;
+			if (!recordId) {
+				item.status = "error";
+				item.errorMessage = "Ticket ID is required for upload";
+				return;
+			}
+			const progressInterval = setInterval(() => {
+				item.progress += Math.random() * 10;
+				item.progress = Math.min(99, Math.round(item.progress * 100) / 100);
+			}, 200);
+			try {
+				const formData = new FormData();
+				formData.append("file", item.file);
+				formData.append("file_name", item.file.name);
+				formData.append("record_id", recordId);
+				formData.append("record_type", "support_ticket");
+				const response = await fetch(`${env.restApiClient.apiUrl}/attachments/support_ticket/${recordId}`, {
+					method: "POST",
+					headers: { Authorization: `Bearer ${userStore.accessToken}` },
+					body: formData
+				});
+				if (!response.ok) throw new Error(`Upload failed: ${response.statusText}`);
+				const result = await response.json();
+				if (result && result.id) {
+					clearInterval(progressInterval);
+					item.progress = 100;
+					item.status = "success";
+					setTimeout(() => {
+						removeFromQueue(item.id);
+						refreshAttachments();
+						emit("uploaded");
+					}, 500);
+				} else throw new Error("Invalid response");
+			} catch (error) {
+				clearInterval(progressInterval);
+				item.status = "error";
+				item.errorMessage = error instanceof Error ? error.message : "Upload failed";
+			}
+		};
+		const removeFromQueue = (id) => {
+			const index = uploadQueue.value.findIndex((item) => item.id === id);
+			if (index !== -1) uploadQueue.value.splice(index, 1);
+		};
+		const retryUpload = (item) => {
+			item.status = "pending";
+			item.progress = 0;
+			item.errorMessage = void 0;
+			if (props.recordId) processUploadQueue();
+		};
+		const downloadFile = async (file, event) => {
+			if (event) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			try {
+				const res = await fetch(`${env.restApiClient.apiUrl}/attachments/support_ticket/${file.id}`, {
+					method: "GET",
+					headers: {
+						"Content-Type": "application/json",
+						Authorization: `Bearer ${userStore.accessToken}`
+					}
+				});
+				if (!res.ok) throw new Error("Failed to download file");
+				const blob = await res.blob();
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = file.name;
+				document.body.appendChild(a);
+				a.click();
+				a.remove();
+				URL.revokeObjectURL(url);
+			} catch (error) {
+				console.error("Download failed:", error);
+			}
+		};
+		const confirmDelete = (file) => {
+			fileToDelete.value = file;
+			showDeleteModal.value = true;
+		};
+		const closeDeleteModal = () => {
+			showDeleteModal.value = false;
+			fileToDelete.value = null;
+		};
+		const deleteFile = async () => {
+			if (!fileToDelete.value) return;
+			try {
+				await deleteAttachment({ id: fileToDelete.value.id });
+				refreshAttachments();
+				emit("deleted");
+				closeDeleteModal();
+			} catch (error) {
+				console.error("Delete failed:", error);
+			}
+		};
+		watch(() => props.recordId, (newRecordId, oldRecordId) => {
+			if (newRecordId && newRecordId !== oldRecordId) {
+				refreshAttachments();
+				if (uploadQueue.value.some((item) => item.status === "pending")) processUploadQueue(newRecordId);
+			}
+		});
+		watch(() => attachments.value, (newAttachments) => {
+			newAttachments.forEach((file) => {
+				if (isImage(file.type) && !imageUrls.value.has(file.id)) loadImageThumbnail(file.id);
+			});
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [_cache[5] || (_cache[5] = createElementVNode("h3", { class: "text-base sm:text-lg font-semibold" }, "Attachments", -1)), __props.canUpload ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					onClick: withModifiers(openFileSelector, ["prevent"]),
+					class: "btn btn-sm btn-primary w-full sm:w-auto",
+					disabled: isUploading.value,
+					type: "button"
+				}, [..._cache[4] || (_cache[4] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					class: "h-4 w-4 mr-1",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor"
+				}, [createElementVNode("path", {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "2",
+					d: "M12 4v16m8-8H4"
+				})], -1), createTextVNode(" Add Files ", -1)])], 8, _hoisted_3)) : createCommentVNode("v-if", true)]),
+				createElementVNode("input", {
+					ref_key: "fileInput",
+					ref: fileInput,
+					type: "file",
+					multiple: "",
+					class: "hidden",
+					onChange: handleFileSelect
+				}, null, 544),
+				createCommentVNode(" Drag & Drop Zone (hidden on mobile, shown on desktop) "),
+				__props.canUpload ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["hidden sm:block border-2 border-dashed rounded-lg p-4 sm:p-6 text-center mb-4 transition-colors cursor-pointer", {
+						"border-primary bg-primary/5": isDragging.value,
+						"border-base-300 hover:border-primary/50": !isDragging.value
+					}]),
+					onDragover: _cache[0] || (_cache[0] = withModifiers(($event) => isDragging.value = true, ["prevent"])),
+					onDragleave: _cache[1] || (_cache[1] = withModifiers(($event) => isDragging.value = false, ["prevent"])),
+					onDrop: withModifiers(handleFileDrop, ["prevent"]),
+					onClick: withModifiers(openFileSelector, ["prevent", "stop"])
+				}, [createElementVNode("div", _hoisted_4, [
+					_cache[6] || (_cache[6] = createElementVNode("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						class: "h-8 w-8 sm:h-12 sm:w-12 mb-2 text-primary",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor"
+					}, [createElementVNode("path", {
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2",
+						d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+					})], -1)),
+					_cache[7] || (_cache[7] = createElementVNode("p", { class: "text-sm sm:text-lg font-medium" }, "Drag and drop files here", -1)),
+					_cache[8] || (_cache[8] = createElementVNode("p", { class: "text-xs sm:text-sm text-base-content/70 mt-1" }, "or click to browse files", -1)),
+					!__props.recordId ? (openBlock(), createElementBlock("p", _hoisted_5, " Files will be queued until ticket is created ")) : createCommentVNode("v-if", true)
+				])], 34)) : createCommentVNode("v-if", true),
+				createCommentVNode(" Upload Queue "),
+				uploadQueue.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(uploadQueue.value, (item) => {
+					return openBlock(), createElementBlock("div", {
+						key: item.id,
+						class: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 p-2 sm:p-3 bg-base-200 rounded-lg"
+					}, [createElementVNode("div", _hoisted_7, [
+						createElementVNode("div", _hoisted_8, toDisplayString(item.file.name), 1),
+						item.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("div", {
+							class: "bg-primary h-1.5 rounded-full transition-all",
+							style: normalizeStyle({ width: `${item.progress}%` })
+						}, null, 4)])) : createCommentVNode("v-if", true),
+						item.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(item.errorMessage), 1)) : createCommentVNode("v-if", true)
+					]), createElementVNode("div", _hoisted_11, [item.status === "error" ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						onClick: withModifiers(($event) => retryUpload(item), ["prevent"]),
+						class: "btn btn-xs btn-ghost flex-1 sm:flex-none",
+						type: "button"
+					}, " Retry ", 8, _hoisted_12)) : createCommentVNode("v-if", true), item.status !== "uploading" ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						onClick: withModifiers(($event) => removeFromQueue(item.id), ["prevent"]),
+						class: "btn btn-xs btn-ghost text-error flex-1 sm:flex-none",
+						type: "button"
+					}, " Remove ", 8, _hoisted_13)) : createCommentVNode("v-if", true)])]);
+				}), 128))])) : createCommentVNode("v-if", true),
+				createCommentVNode(" Attachments List "),
+				(attachments.value.length > 0 || unref(attachmentsLoading)) && __props.recordId ? (openBlock(), createElementBlock("div", _hoisted_14, [unref(attachmentsLoading) ? (openBlock(), createElementBlock("div", _hoisted_15, [..._cache[9] || (_cache[9] = [createElementVNode("span", { class: "loading loading-spinner loading-sm" }, null, -1)])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(attachments.value, (file) => {
+					return openBlock(), createElementBlock("div", {
+						key: file.id,
+						class: normalizeClass(["flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 p-2 sm:p-3 bg-base-100 border border-base-300 rounded-lg hover:bg-base-200 transition-colors", { "cursor-pointer": isImage(file.type) }]),
+						onClick: withModifiers(($event) => isImage(file.type) && viewImage(file), ["prevent"])
+					}, [createElementVNode("div", _hoisted_17, [createElementVNode("div", _hoisted_18, [createCommentVNode(" Image thumbnail preview "), isImage(file.type) ? (openBlock(), createElementBlock("div", _hoisted_19, [getImageUrlSync(file.id) ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						src: getImageUrlSync(file.id),
+						alt: file.name,
+						class: "w-full h-full object-cover",
+						onError: handleImageError
+					}, null, 40, _hoisted_20)) : (openBlock(), createElementBlock("div", _hoisted_21, [..._cache[10] || (_cache[10] = [createElementVNode("span", { class: "loading loading-spinner loading-xs" }, null, -1)])]))])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" File type badge for non-images "), createElementVNode("div", { class: normalizeClass(["badge badge-sm", getFileTypeBadgeClass(file.type)]) }, toDisplayString(getFileTypeLabel(file.type)), 3)], 2112))]), createElementVNode("div", _hoisted_22, [createElementVNode("div", _hoisted_23, toDisplayString(file.name), 1), createElementVNode("div", _hoisted_24, toDisplayString(formatFileSize(file.size)) + " • " + toDisplayString(formatDate(file.uploadedAt)), 1)])]), createElementVNode("div", {
+						class: "flex gap-1 justify-end sm:justify-start",
+						onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+					}, [
+						isImage(file.type) ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							onClick: withModifiers(($event) => viewImage(file), ["prevent"]),
+							class: "btn btn-sm btn-ghost btn-circle",
+							title: "View Image",
+							type: "button"
+						}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+						}), createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+						})], -1)])], 8, _hoisted_25)) : createCommentVNode("v-if", true),
+						createElementVNode("button", {
+							onClick: withModifiers(($event) => downloadFile(file, $event), ["prevent"]),
+							class: "btn btn-sm btn-ghost btn-circle",
+							title: "Download",
+							type: "button"
+						}, [..._cache[12] || (_cache[12] = [createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+						})], -1)])], 8, _hoisted_26),
+						__props.canDelete ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							onClick: withModifiers(($event) => confirmDelete(file), ["prevent"]),
+							class: "btn btn-sm btn-ghost btn-circle text-error",
+							title: "Delete",
+							type: "button"
+						}, [..._cache[13] || (_cache[13] = [createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+						})], -1)])], 8, _hoisted_27)) : createCommentVNode("v-if", true)
+					])], 10, _hoisted_16);
+				}), 128))])) : !unref(attachmentsLoading) && __props.recordId ? (openBlock(), createElementBlock("div", _hoisted_28, [..._cache[14] || (_cache[14] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					class: "h-12 w-12 mx-auto mb-2 opacity-50",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor"
+				}, [createElementVNode("path", {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "2",
+					d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+				})], -1), createElementVNode("p", null, "No attachments", -1)])])) : createCommentVNode("v-if", true),
+				createCommentVNode(" Image View Modal "),
+				createVNode(ImageModal_default, {
+					"is-open": !!viewingImage.value,
+					"image-src": viewingImage.value ? getImageUrlSync(viewingImage.value.id) : "",
+					"image-name": viewingImage.value?.name || "",
+					"image-index": viewingImageIndex.value,
+					"total-images": imageAttachments.value.length,
+					"on-download": viewingImage.value ? () => {
+						if (viewingImage.value) downloadFile(viewingImage.value, void 0);
+					} : void 0,
+					"on-previous": canGoToPrevious.value ? goToPreviousImage : void 0,
+					"on-next": canGoToNext.value ? goToNextImage : void 0,
+					onClose: closeImageModal
+				}, null, 8, [
+					"is-open",
+					"image-src",
+					"image-name",
+					"image-index",
+					"total-images",
+					"on-download",
+					"on-previous",
+					"on-next"
+				]),
+				createCommentVNode(" Delete Confirmation Modal "),
+				createVNode(ConfirmDialog_default, {
+					modelValue: showDeleteModal.value,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showDeleteModal.value = $event),
+					title: "Delete Attachment",
+					message: deleteMessage.value,
+					"confirm-text": "Delete",
+					"cancel-text": "Cancel",
+					"confirm-button-class": "btn-error",
+					onConfirm: deleteFile,
+					onCancel: closeDeleteModal
+				}, null, 8, ["modelValue", "message"])
+			]);
+		};
+	}
+});
+var InlineAttachments_default = _sfc_main;
+
+//#endregion
+export { ImageModal_default as n, ConfirmDialog_default as r, InlineAttachments_default as t };
+//# sourceMappingURL=InlineAttachments-I39rOvip.js.map