@pichaflow/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 James Sinkala (PichaFlow)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/PichaFlowUpload.vue.d.ts

@@ -0,0 +1,39 @@
+import { UploadResponse } from '@pichaflow/sdk';
+type __VLS_Props = {
+    apiKey: string;
+    baseUrl?: string;
+    uploadUrl?: string;
+    fetchUrl?: string;
+    useSecure?: boolean;
+    tags?: string[];
+    tenantId?: string;
+    directory?: string;
+    allowDeletion?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    success: (response: UploadResponse) => any;
+    "success-all": (responses: UploadResponse[]) => any;
+    error: (error: any) => any;
+    progress: (progress: number) => any;
+    delete: (id: string) => any;
+    "delete-error": (error: any) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSuccess?: ((response: UploadResponse) => any) | undefined;
+    "onSuccess-all"?: ((responses: UploadResponse[]) => any) | undefined;
+    onError?: ((error: any) => any) | undefined;
+    onProgress?: ((progress: number) => any) | undefined;
+    onDelete?: ((id: string) => any) | undefined;
+    "onDelete-error"?: ((error: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.css

@@ -0,0 +1,111 @@
+
+.picha-upload-zone[data-v-9fc15f6c] {
+  border: 2px dashed #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  transition: all 0.2s ease;
+  background: #f8fafc;
+}
+.picha-upload-zone.is-dragging[data-v-9fc15f6c] {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+.content[data-v-9fc15f6c] {
+  text-align: center;
+}
+.icon[data-v-9fc15f6c] { width: 2rem; height: 2rem; color: #94a3b8; margin: 0 auto 1rem;
+}
+.text[data-v-9fc15f6c] { color: #64748b; font-size: 0.875rem;
+}
+.link[data-v-9fc15f6c] { color: #3b82f6; font-weight: 600; cursor: pointer;
+}
+.uploading-list[data-v-9fc15f6c] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.task-item[data-v-9fc15f6c] {
+  background: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  border: 1px solid #f1f5f9;
+}
+.task-info[data-v-9fc15f6c] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+.file-name[data-v-9fc15f6c] {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #334155;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70%;
+}
+.status-text[data-v-9fc15f6c] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #64748b;
+}
+.status-text.success[data-v-9fc15f6c] { color: #10b981;
+}
+.status-text.error[data-v-9fc15f6c] { color: #ef4444;
+}
+.status-text.deleting[data-v-9fc15f6c] { color: #f59e0b;
+}
+.delete-btn[data-v-9fc15f6c] {
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+.delete-btn[data-v-9fc15f6c]:hover:not(:disabled) {
+  color: #ef4444;
+  background: #fef2f2;
+}
+.delete-btn[data-v-9fc15f6c]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.progress-bar[data-v-9fc15f6c] { background: #e2e8f0; height: 0.5rem; border-radius: 999px; overflow: hidden;
+}
+.progress-fill[data-v-9fc15f6c] { background: #3b82f6; height: 100%; transition: width 0.1s ease;
+}
+.progress-fill.success[data-v-9fc15f6c] { background: #10b981;
+}
+.progress-fill.error[data-v-9fc15f6c] { background: #ef4444;
+}
+.error-text[data-v-9fc15f6c] {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #ef4444;
+}
+.add-more[data-v-9fc15f6c] { text-align: center; margin-top: 1.5rem;
+}
+
+/* Simple dark mode support since component might be used anywhere */
+@media (prefers-color-scheme: dark) {
+.picha-upload-zone[data-v-9fc15f6c] {
+    background: #0f172a;
+    border-color: #1e293b;
+}
+.task-item[data-v-9fc15f6c] {
+    background: #1e293b;
+    border-color: #334155;
+}
+.file-name[data-v-9fc15f6c] { color: #f8fafc;
+}
+.progress-bar[data-v-9fc15f6c] { background: #334155;
+}
+}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as PichaFlowUpload } from './PichaFlowUpload.vue';

package/dist/index.mjs

@@ -0,0 +1,207 @@
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, withModifiers } from "vue";
+import { PichaFlowClient, optimizeImageForUpload } from "@pichaflow/sdk";
+//#region src/PichaFlowUpload.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "content"
+};
+var _hoisted_2 = { class: "text" };
+var _hoisted_3 = { class: "link" };
+var _hoisted_4 = {
+	key: 1,
+	class: "uploading-list"
+};
+var _hoisted_5 = { class: "task-info" };
+var _hoisted_6 = { class: "file-name" };
+var _hoisted_7 = { style: {
+	"display": "flex",
+	"align-items": "center",
+	"gap": "0.5rem"
+} };
+var _hoisted_8 = ["onClick", "disabled"];
+var _hoisted_9 = { class: "progress-bar" };
+var _hoisted_10 = {
+	key: 0,
+	class: "error-text"
+};
+var _hoisted_11 = { class: "add-more mt-4" };
+var _hoisted_12 = { class: "text text-sm" };
+var _hoisted_13 = { class: "link" };
+var PichaFlowUpload_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "PichaFlowUpload",
+	props: {
+		apiKey: {},
+		baseUrl: {},
+		uploadUrl: {},
+		fetchUrl: {},
+		useSecure: { type: Boolean },
+		tags: {},
+		tenantId: {},
+		directory: {},
+		allowDeletion: { type: Boolean }
+	},
+	emits: [
+		"success",
+		"success-all",
+		"error",
+		"progress",
+		"delete",
+		"delete-error"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const isDragging = ref(false);
+		const tasks = ref([]);
+		const client = new PichaFlowClient({
+			apiKey: props.apiKey,
+			baseUrl: props.baseUrl,
+			uploadUrl: props.uploadUrl,
+			fetchUrl: props.fetchUrl,
+			tenantId: props.tenantId
+		});
+		const handleFiles = async (files) => {
+			if (files.length === 0) return;
+			const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+			if (imageFiles.length === 0) {
+				emit("error", /* @__PURE__ */ new Error("Only image files are supported."));
+				return;
+			}
+			const previewTasks = imageFiles.map((file) => ({
+				id: crypto.randomUUID(),
+				file,
+				previewUrl: URL.createObjectURL(file),
+				progress: 0,
+				status: "pending"
+			}));
+			tasks.value = [...tasks.value, ...previewTasks];
+			Promise.all(previewTasks.map(async (task) => {
+				const updateTask = (updates) => {
+					const index = tasks.value.findIndex((t) => t.id === task.id);
+					if (index !== -1) tasks.value[index] = {
+						...tasks.value[index],
+						...updates
+					};
+				};
+				try {
+					const optimizedFile = await optimizeImageForUpload(task.file);
+					updateTask({
+						status: "uploading",
+						file: optimizedFile
+					});
+					const options = {
+						tags: props.tags,
+						directory: props.directory,
+						onProgress: (p) => {
+							updateTask({ progress: p });
+							emit("progress", p);
+						}
+					};
+					const response = props.useSecure ? await client.secureUpload(optimizedFile, options) : await client.upload(optimizedFile, options);
+					updateTask({
+						status: "success",
+						progress: 100,
+						response
+					});
+					emit("success", response);
+				} catch (err) {
+					updateTask({
+						status: "error",
+						error: err.message || "Upload failed"
+					});
+					emit("error", err);
+				}
+			})).then(() => {
+				if (tasks.value.every((t) => t.status === "success" || t.status === "error")) {
+					const successfulResponses = tasks.value.filter((t) => t.status === "success").map((t) => t.response);
+					if (successfulResponses.length > 0) emit("success-all", successfulResponses);
+				}
+			});
+		};
+		const onDrop = (e) => {
+			isDragging.value = false;
+			const files = Array.from(e.dataTransfer?.files || []);
+			if (files.length) handleFiles(files);
+		};
+		const handleDelete = async (taskId, assetId) => {
+			const index = tasks.value.findIndex((t) => t.id === taskId);
+			if (index === -1) return;
+			tasks.value[index].status = "deleting";
+			try {
+				await client.deleteAsset(assetId);
+				tasks.value = tasks.value.filter((t) => t.id !== taskId);
+				emit("delete", assetId);
+			} catch (err) {
+				const errorIndex = tasks.value.findIndex((t) => t.id === taskId);
+				if (errorIndex !== -1) tasks.value[errorIndex].status = "success";
+				emit("delete-error", err);
+			}
+		};
+		const onFileSelect = (e) => {
+			const target = e.target;
+			const files = Array.from(target.files || []);
+			if (files.length) handleFiles(files);
+			target.value = "";
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["picha-upload-zone", { "is-dragging": 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(onDrop, ["prevent"])
+			}, [tasks.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon", {}, () => [_cache[2] || (_cache[2] = createElementVNode("svg", {
+				class: "icon",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24"
+			}, [createElementVNode("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"stroke-width": "2",
+				d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+			})], -1))], true), createElementVNode("p", _hoisted_2, [_cache[4] || (_cache[4] = createTextVNode("Drag & drop or ", -1)), createElementVNode("label", _hoisted_3, [_cache[3] || (_cache[3] = createTextVNode("browse", -1)), createElementVNode("input", {
+				type: "file",
+				accept: "image/*",
+				multiple: "",
+				onChange: onFileSelect,
+				hidden: ""
+			}, null, 32)])])])) : (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(tasks.value, (task) => {
+				return openBlock(), createElementBlock("div", {
+					key: task.id,
+					class: "task-item"
+				}, [
+					createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(task.file.name), 1), createElementVNode("div", _hoisted_7, [createElementVNode("span", { class: normalizeClass(["status-text", task.status]) }, toDisplayString(task.status === "success" ? "Uploaded" : task.status === "error" ? "Failed" : task.status === "deleting" ? "Deleting..." : `${task.progress}%`), 3), props.allowDeletion && (task.status === "success" || task.status === "deleting") && task.response?.id ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						onClick: ($event) => handleDelete(task.id, task.response.id),
+						class: "delete-btn",
+						title: "Delete asset",
+						disabled: task.status === "deleting"
+					}, [..._cache[5] || (_cache[5] = [createStaticVNode("<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-9fc15f6c><polyline points=\"3 6 5 6 21 6\" data-v-9fc15f6c></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" data-v-9fc15f6c></path><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\" data-v-9fc15f6c></line><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\" data-v-9fc15f6c></line></svg>", 1)])], 8, _hoisted_8)) : createCommentVNode("", true)])]),
+					createElementVNode("div", _hoisted_9, [createElementVNode("div", {
+						class: normalizeClass(["progress-fill", task.status]),
+						style: normalizeStyle({ width: `${task.progress}%` })
+					}, null, 6)]),
+					task.error ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(task.error), 1)) : createCommentVNode("", true)
+				]);
+			}), 128)), createElementVNode("div", _hoisted_11, [createElementVNode("p", _hoisted_12, [createElementVNode("label", _hoisted_13, [_cache[6] || (_cache[6] = createTextVNode("Upload more files", -1)), createElementVNode("input", {
+				type: "file",
+				accept: "image/*",
+				multiple: "",
+				onChange: onFileSelect,
+				hidden: ""
+			}, null, 32)])])])]))], 34);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/PichaFlowUpload.vue
+var PichaFlowUpload_default = /* @__PURE__ */ _plugin_vue_export_helper_default(PichaFlowUpload_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9fc15f6c"]]);
+//#endregion
+export { PichaFlowUpload_default as PichaFlowUpload };

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.umd.js

@@ -0,0 +1,211 @@
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@pichaflow/sdk")) : typeof define === "function" && define.amd ? define([
+		"exports",
+		"vue",
+		"@pichaflow/sdk"
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.PichaFlowVue = {}, global.Vue, global._pichaflow_sdk));
+})(this, function(exports, vue, _pichaflow_sdk) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/PichaFlowUpload.vue?vue&type=script&setup=true&lang.ts
+	var _hoisted_1 = {
+		key: 0,
+		class: "content"
+	};
+	var _hoisted_2 = { class: "text" };
+	var _hoisted_3 = { class: "link" };
+	var _hoisted_4 = {
+		key: 1,
+		class: "uploading-list"
+	};
+	var _hoisted_5 = { class: "task-info" };
+	var _hoisted_6 = { class: "file-name" };
+	var _hoisted_7 = { style: {
+		"display": "flex",
+		"align-items": "center",
+		"gap": "0.5rem"
+	} };
+	var _hoisted_8 = ["onClick", "disabled"];
+	var _hoisted_9 = { class: "progress-bar" };
+	var _hoisted_10 = {
+		key: 0,
+		class: "error-text"
+	};
+	var _hoisted_11 = { class: "add-more mt-4" };
+	var _hoisted_12 = { class: "text text-sm" };
+	var _hoisted_13 = { class: "link" };
+	var PichaFlowUpload_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		__name: "PichaFlowUpload",
+		props: {
+			apiKey: {},
+			baseUrl: {},
+			uploadUrl: {},
+			fetchUrl: {},
+			useSecure: { type: Boolean },
+			tags: {},
+			tenantId: {},
+			directory: {},
+			allowDeletion: { type: Boolean }
+		},
+		emits: [
+			"success",
+			"success-all",
+			"error",
+			"progress",
+			"delete",
+			"delete-error"
+		],
+		setup(__props, { emit: __emit }) {
+			const props = __props;
+			const emit = __emit;
+			const isDragging = (0, vue.ref)(false);
+			const tasks = (0, vue.ref)([]);
+			const client = new _pichaflow_sdk.PichaFlowClient({
+				apiKey: props.apiKey,
+				baseUrl: props.baseUrl,
+				uploadUrl: props.uploadUrl,
+				fetchUrl: props.fetchUrl,
+				tenantId: props.tenantId
+			});
+			const handleFiles = async (files) => {
+				if (files.length === 0) return;
+				const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+				if (imageFiles.length === 0) {
+					emit("error", /* @__PURE__ */ new Error("Only image files are supported."));
+					return;
+				}
+				const previewTasks = imageFiles.map((file) => ({
+					id: crypto.randomUUID(),
+					file,
+					previewUrl: URL.createObjectURL(file),
+					progress: 0,
+					status: "pending"
+				}));
+				tasks.value = [...tasks.value, ...previewTasks];
+				Promise.all(previewTasks.map(async (task) => {
+					const updateTask = (updates) => {
+						const index = tasks.value.findIndex((t) => t.id === task.id);
+						if (index !== -1) tasks.value[index] = {
+							...tasks.value[index],
+							...updates
+						};
+					};
+					try {
+						const optimizedFile = await (0, _pichaflow_sdk.optimizeImageForUpload)(task.file);
+						updateTask({
+							status: "uploading",
+							file: optimizedFile
+						});
+						const options = {
+							tags: props.tags,
+							directory: props.directory,
+							onProgress: (p) => {
+								updateTask({ progress: p });
+								emit("progress", p);
+							}
+						};
+						const response = props.useSecure ? await client.secureUpload(optimizedFile, options) : await client.upload(optimizedFile, options);
+						updateTask({
+							status: "success",
+							progress: 100,
+							response
+						});
+						emit("success", response);
+					} catch (err) {
+						updateTask({
+							status: "error",
+							error: err.message || "Upload failed"
+						});
+						emit("error", err);
+					}
+				})).then(() => {
+					if (tasks.value.every((t) => t.status === "success" || t.status === "error")) {
+						const successfulResponses = tasks.value.filter((t) => t.status === "success").map((t) => t.response);
+						if (successfulResponses.length > 0) emit("success-all", successfulResponses);
+					}
+				});
+			};
+			const onDrop = (e) => {
+				isDragging.value = false;
+				const files = Array.from(e.dataTransfer?.files || []);
+				if (files.length) handleFiles(files);
+			};
+			const handleDelete = async (taskId, assetId) => {
+				const index = tasks.value.findIndex((t) => t.id === taskId);
+				if (index === -1) return;
+				tasks.value[index].status = "deleting";
+				try {
+					await client.deleteAsset(assetId);
+					tasks.value = tasks.value.filter((t) => t.id !== taskId);
+					emit("delete", assetId);
+				} catch (err) {
+					const errorIndex = tasks.value.findIndex((t) => t.id === taskId);
+					if (errorIndex !== -1) tasks.value[errorIndex].status = "success";
+					emit("delete-error", err);
+				}
+			};
+			const onFileSelect = (e) => {
+				const target = e.target;
+				const files = Array.from(target.files || []);
+				if (files.length) handleFiles(files);
+				target.value = "";
+			};
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: (0, vue.normalizeClass)(["picha-upload-zone", { "is-dragging": isDragging.value }]),
+					onDragover: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => isDragging.value = true, ["prevent"])),
+					onDragleave: _cache[1] || (_cache[1] = (0, vue.withModifiers)(($event) => isDragging.value = false, ["prevent"])),
+					onDrop: (0, vue.withModifiers)(onDrop, ["prevent"])
+				}, [tasks.value.length === 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "icon", {}, () => [_cache[2] || (_cache[2] = (0, vue.createElementVNode)("svg", {
+					class: "icon",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24"
+				}, [(0, vue.createElementVNode)("path", {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "2",
+					d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+				})], -1))], true), (0, vue.createElementVNode)("p", _hoisted_2, [_cache[4] || (_cache[4] = (0, vue.createTextVNode)("Drag & drop or ", -1)), (0, vue.createElementVNode)("label", _hoisted_3, [_cache[3] || (_cache[3] = (0, vue.createTextVNode)("browse", -1)), (0, vue.createElementVNode)("input", {
+					type: "file",
+					accept: "image/*",
+					multiple: "",
+					onChange: onFileSelect,
+					hidden: ""
+				}, null, 32)])])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(tasks.value, (task) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: task.id,
+						class: "task-item"
+					}, [
+						(0, vue.createElementVNode)("div", _hoisted_5, [(0, vue.createElementVNode)("span", _hoisted_6, (0, vue.toDisplayString)(task.file.name), 1), (0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(["status-text", task.status]) }, (0, vue.toDisplayString)(task.status === "success" ? "Uploaded" : task.status === "error" ? "Failed" : task.status === "deleting" ? "Deleting..." : `${task.progress}%`), 3), props.allowDeletion && (task.status === "success" || task.status === "deleting") && task.response?.id ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+							key: 0,
+							onClick: ($event) => handleDelete(task.id, task.response.id),
+							class: "delete-btn",
+							title: "Delete asset",
+							disabled: task.status === "deleting"
+						}, [..._cache[5] || (_cache[5] = [(0, vue.createStaticVNode)("<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-9fc15f6c><polyline points=\"3 6 5 6 21 6\" data-v-9fc15f6c></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" data-v-9fc15f6c></path><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\" data-v-9fc15f6c></line><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\" data-v-9fc15f6c></line></svg>", 1)])], 8, _hoisted_8)) : (0, vue.createCommentVNode)("", true)])]),
+						(0, vue.createElementVNode)("div", _hoisted_9, [(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)(["progress-fill", task.status]),
+							style: (0, vue.normalizeStyle)({ width: `${task.progress}%` })
+						}, null, 6)]),
+						task.error ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_10, (0, vue.toDisplayString)(task.error), 1)) : (0, vue.createCommentVNode)("", true)
+					]);
+				}), 128)), (0, vue.createElementVNode)("div", _hoisted_11, [(0, vue.createElementVNode)("p", _hoisted_12, [(0, vue.createElementVNode)("label", _hoisted_13, [_cache[6] || (_cache[6] = (0, vue.createTextVNode)("Upload more files", -1)), (0, vue.createElementVNode)("input", {
+					type: "file",
+					accept: "image/*",
+					multiple: "",
+					onChange: onFileSelect,
+					hidden: ""
+				}, null, 32)])])])]))], 34);
+			};
+		}
+	});
+	//#endregion
+	//#region \0plugin-vue:export-helper
+	var _plugin_vue_export_helper_default = (sfc, props) => {
+		const target = sfc.__vccOpts || sfc;
+		for (const [key, val] of props) target[key] = val;
+		return target;
+	};
+	//#endregion
+	exports.PichaFlowUpload = /* @__PURE__ */ _plugin_vue_export_helper_default(PichaFlowUpload_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9fc15f6c"]]);
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@pichaflow/vue",
+  "version": "0.1.0",
+  "description": "PichaFlow SDK for Vue - Edge-native media transformations.",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pichaflow/vue-plugin.git"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "dependencies": {
+    "@pichaflow/sdk": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^8.1.0",
+    "@vue/language-core": "^3.3.7",
+    "@vue/test-utils": "^2.4.10",
+    "jsdom": "^29.1.1",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "vitest": "^4.1.8",
+    "vue-tsc": "^3.3.7"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}