@calmlens/sdk 0.16.3 → 0.17.1

package/esm/vue.js

@@ -0,0 +1,392 @@
+import { _ as getMediaState, a as getMediaAspectRatio, b as ICONS, c as describeUploadItem, d as formatMessage, f as getDropzoneHint, g as resolveMessages, h as getUploadItemOutcome, i as resolveTheme, l as describeUploader, m as getUploadItemMessage, o as getMediaLoadKey, p as getMediaUnavailableMessage, r as CALMLENS_THEME, s as DEFAULT_MESSAGES, t as CALMLENS_STYLES, u as formatBytes, v as pickMediaSource, x as ICON_ATTRIBUTES, y as resolveMediaProps } from "./ui-Ca_SpJXf.js";
+import { i as createProgressFetch, n as createUploadController$1, r as isFileAccepted, t as UploadController } from "./UploadController-txp5NuzH.js";
+import { t as createUploadController } from "./BrowserUpload-D7-zNmc0.js";
+import { computed, defineComponent, h, onMounted, onScopeDispose, ref, shallowRef, toValue, watch, watchEffect } from "vue";
+// src/vue.ts
+const icon = (name) => h("svg", ICON_ATTRIBUTES, [h("path", { d: ICONS[name] })]);
+/** Keeps a ref to a controller's snapshot, following the controller if it changes. */
+const subscribeSnapshot = (controller) => {
+	const snapshot = shallowRef(toValue(controller).getSnapshot());
+	watch(() => toValue(controller), (current, _previous, onCleanup) => {
+		onCleanup(current.subscribe((next) => {
+			snapshot.value = next;
+		}));
+	}, { immediate: true });
+	return snapshot;
+};
+/**
+* Uploads files through an upload preset and keeps `snapshot` up to date as each one uploads and
+* is checked. Use it to build your own upload UI; `CalmLensUploader` is built on it. Uploads
+* still running when the component unmounts are cancelled.
+*/
+const useCalmLensUpload = (options) => {
+	const controller = createUploadController$1(toValue(options));
+	watchEffect(() => controller.setOptions(toValue(options)));
+	const snapshot = subscribeSnapshot(controller);
+	onScopeDispose(() => controller.clear());
+	return {
+		snapshot,
+		controller,
+		addFiles: (files) => controller.addFiles(files),
+		retry: (key) => controller.retry(key),
+		cancel: (key) => controller.cancel(key),
+		remove: (key) => controller.remove(key),
+		clear: () => controller.clear(),
+		start: () => controller.start()
+	};
+};
+const optional = (type) => ({
+	type,
+	default: void 0
+});
+const messagesProp = optional(Object);
+/**
+* A drop zone and file list that uploads through an upload preset, shows each file's progress
+* and moderation decision, and emits `uploaded` for finished uploads.
+*/
+const CalmLensUploader = defineComponent({
+	name: "CalmLensUploader",
+	props: {
+		uploadPresetId: optional(String),
+		upload: optional(Function),
+		checkStatus: optional(Function),
+		createClient: optional(Function),
+		token: optional([String, Function]),
+		tokenUrl: optional(String),
+		accept: optional(String),
+		maxFileSize: optional(Number),
+		autoUpload: {
+			type: Boolean,
+			default: true
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		maxFiles: optional(Number),
+		concurrency: optional(Number),
+		decisionTimeoutMs: optional(Number),
+		baseUrl: optional(String),
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		capture: optional(String),
+		messages: messagesProp,
+		controller: optional(Object)
+	},
+	emits: {
+		uploaded: (_upload) => true,
+		rejected: (_item) => true,
+		failed: (_item) => true,
+		removed: (_item) => true
+	},
+	setup(props, { emit }) {
+		const own = useCalmLensUpload(() => ({
+			uploadPresetId: props.uploadPresetId,
+			upload: props.upload,
+			checkStatus: props.checkStatus,
+			createClient: props.createClient,
+			token: props.token,
+			tokenUrl: props.tokenUrl,
+			accept: props.accept,
+			maxFileSize: props.maxFileSize,
+			autoUpload: props.autoUpload,
+			multiple: props.multiple,
+			maxFiles: props.maxFiles,
+			concurrency: props.concurrency,
+			decisionTimeoutMs: props.decisionTimeoutMs,
+			baseUrl: props.baseUrl,
+			onUploaded: (value) => emit("uploaded", value),
+			onRejected: (item) => emit("rejected", item),
+			onFailed: (item) => emit("failed", item),
+			onRemoved: (item) => emit("removed", item)
+		}));
+		const controller = computed(() => props.controller ?? own.controller);
+		const snapshot = subscribeSnapshot(controller);
+		const messages = computed(() => resolveMessages(props.messages));
+		const dragging = ref(false);
+		const input = ref();
+		const openPicker = () => {
+			if (!props.disabled) input.value?.click();
+		};
+		const onDragOver = (event) => {
+			event.preventDefault();
+			if (!props.disabled) dragging.value = true;
+		};
+		return () => {
+			const text = messages.value;
+			const queue = controller.value;
+			const { accept, multiple } = queue.options;
+			const items = snapshot.value.items;
+			const view = describeUploader(snapshot.value, queue.options, text);
+			return h("div", { class: "calmlens-uploader" }, [
+				view.showDropzone && h("div", {
+					class: "calmlens-dropzone",
+					"data-dragging": dragging.value || void 0,
+					"data-disabled": props.disabled || void 0,
+					onClick: openPicker,
+					onDragover: onDragOver,
+					onDragenter: onDragOver,
+					onDragleave: (event) => {
+						if (!event.currentTarget.contains(event.relatedTarget)) dragging.value = false;
+					},
+					onDrop: (event) => {
+						event.preventDefault();
+						dragging.value = false;
+						if (!props.disabled && event.dataTransfer) queue.addFiles(event.dataTransfer.files);
+					},
+					onPaste: (event) => {
+						const files = event.clipboardData?.files;
+						if (!props.disabled && files?.length) queue.addFiles(files);
+					}
+				}, [
+					h("span", { class: "calmlens-dropzone__icon" }, [icon("upload")]),
+					h("div", { class: "calmlens-dropzone__text" }, [h("p", { class: "calmlens-dropzone__title" }, dragging.value ? text.dropzoneTitleDragging : text.dropzoneTitle), view.hint && h("p", { class: "calmlens-dropzone__hint" }, view.hint)]),
+					h("button", {
+						type: "button",
+						class: "calmlens-button",
+						"data-variant": "outline",
+						disabled: props.disabled,
+						onClick: (event) => {
+							event.stopPropagation();
+							openPicker();
+						}
+					}, view.chooseLabel)
+				]),
+				h("input", {
+					ref: input,
+					type: "file",
+					hidden: true,
+					accept,
+					multiple,
+					capture: props.capture,
+					disabled: props.disabled,
+					onChange: (event) => {
+						const target = event.target;
+						if (target.files) queue.addFiles(target.files);
+						target.value = "";
+					}
+				}),
+				items.length > 0 && h("ul", { class: "calmlens-uploads" }, items.map((item) => {
+					const itemView = describeUploadItem(item, text);
+					return h("li", {
+						key: item.key,
+						class: "calmlens-upload",
+						"data-stage": item.stage,
+						"data-outcome": itemView.outcome
+					}, [
+						item.previewUrl ? h("img", {
+							class: "calmlens-upload__thumb",
+							src: item.previewUrl,
+							alt: ""
+						}) : h("span", {
+							class: "calmlens-upload__thumb",
+							"data-kind": "file",
+							"aria-hidden": "true",
+							innerHTML: itemView.fileIcon
+						}),
+						h("div", { class: "calmlens-upload__body" }, [
+							h("span", { class: "calmlens-upload__name" }, item.file.name),
+							h("span", { class: "calmlens-upload__size" }, itemView.size),
+							itemView.busy && h("div", {
+								class: "calmlens-progress",
+								role: "progressbar",
+								"aria-label": itemView.message,
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-valuenow": itemView.progressPercent
+							}, [h("div", {
+								class: "calmlens-progress__bar",
+								style: itemView.progressPercent === void 0 ? void 0 : { width: `${itemView.progressPercent}%` }
+							})]),
+							itemView.message && h("p", {
+								class: "calmlens-upload__message",
+								role: "status"
+							}, itemView.message)
+						]),
+						h("div", { class: "calmlens-upload__actions" }, [
+							!view.showDropzone && h("button", {
+								type: "button",
+								class: "calmlens-button",
+								"data-variant": "outline",
+								"data-size": "small",
+								disabled: props.disabled,
+								onClick: openPicker
+							}, text.chooseAnother),
+							itemView.canRetry && h("button", {
+								type: "button",
+								class: "calmlens-icon-button",
+								"aria-label": text.retry,
+								title: text.retry,
+								onClick: () => queue.retry(item.key)
+							}, [icon("retry")]),
+							h("button", {
+								type: "button",
+								class: "calmlens-icon-button",
+								"aria-label": itemView.removeLabel,
+								title: itemView.removeLabel,
+								onClick: () => queue.remove(item.key)
+							}, [icon("remove")])
+						])
+					]);
+				}))
+			]);
+		};
+	}
+});
+/**
+* Shows an asset from the CalmLens CDN with responsive widths and a blurred placeholder while
+* it loads. Age-restricted assets stay behind the placeholder and a reveal button until
+* `ageConfirmed` is set; blocked and purged assets show an unavailable notice.
+*/
+const CalmLensMedia = defineComponent({
+	name: "CalmLensMedia",
+	props: {
+		/** An asset from the API, which supplies the project, ID, status, type and preview. */
+		asset: optional(Object),
+		/** Required without `asset`. */
+		projectId: optional(String),
+		/** Required without `asset`. */
+		assetId: optional(String),
+		status: optional(String),
+		contentRemoved: optional(Boolean),
+		type: optional(String),
+		resource: optional(String),
+		lens: optional(String),
+		transform: optional([
+			String,
+			Object,
+			Array
+		]),
+		widths: optional(Array),
+		url: optional(String),
+		placeholder: {
+			type: Boolean,
+			default: true
+		},
+		placeholderHash: optional(String),
+		placeholderUrl: optional(String),
+		averageColor: optional(String),
+		cdnBaseUrl: optional(String),
+		viewerClaims: optional(Object),
+		alt: {
+			type: String,
+			default: ""
+		},
+		aspectRatio: optional(Number),
+		width: optional(Number),
+		height: optional(Number),
+		sizes: optional(String),
+		fit: optional(String),
+		position: optional(String),
+		lazy: {
+			type: Boolean,
+			default: true
+		},
+		fetchPriority: optional(String),
+		controls: {
+			type: Boolean,
+			default: true
+		},
+		messages: messagesProp,
+		/** Bound by `@reveal`; declared as a prop so the button shows only when something listens. */
+		onReveal: optional(Function)
+	},
+	setup(props) {
+		const messages = computed(() => resolveMessages(props.messages));
+		const resolved = computed(() => resolveMediaProps(props));
+		const state = computed(() => getMediaState(resolved.value));
+		const loadKey = computed(() => getMediaLoadKey(state.value));
+		const load = ref("loading");
+		const image = ref();
+		watch(loadKey, () => {
+			load.value = "loading";
+		});
+		onMounted(() => {
+			if (image.value?.complete && image.value.naturalWidth > 0) load.value = "loaded";
+		});
+		const onError = () => {
+			load.value = "error";
+		};
+		return () => {
+			const current = state.value;
+			const text = messages.value;
+			const view = resolved.value;
+			const ratio = getMediaAspectRatio(view);
+			const failed = load.value === "error";
+			const placeholderUrl = current.kind === "audio" || current.kind === "unavailable" ? void 0 : current.placeholderUrl;
+			const showPlaceholder = placeholderUrl && (current.kind === "gated" || current.kind === "image" && load.value !== "loaded");
+			const notice = (children) => h("figcaption", { class: "calmlens-media__notice" }, children);
+			return h("figure", {
+				class: "calmlens-media",
+				"data-kind": current.kind,
+				"data-state": load.value,
+				"data-sized": ratio ? "" : void 0,
+				style: {
+					aspectRatio: ratio,
+					backgroundColor: view.averageColor,
+					"--calmlens-fit": props.fit,
+					"--calmlens-position": props.position
+				}
+			}, [
+				showPlaceholder && h("img", {
+					class: "calmlens-media__placeholder",
+					src: placeholderUrl,
+					alt: "",
+					"aria-hidden": "true"
+				}),
+				current.kind === "image" && !failed && h("img", {
+					key: loadKey.value,
+					ref: image,
+					class: "calmlens-media__content",
+					src: current.src,
+					srcset: current.srcSet,
+					sizes: props.sizes,
+					alt: props.alt,
+					width: view.width,
+					height: view.height,
+					loading: props.lazy ? "lazy" : void 0,
+					decoding: "async",
+					fetchpriority: props.fetchPriority,
+					onLoad: () => {
+						load.value = "loaded";
+					},
+					onError
+				}),
+				current.kind === "video" && !failed && h("video", {
+					class: "calmlens-media__content",
+					src: current.src,
+					controls: props.controls,
+					playsinline: true,
+					preload: "metadata",
+					"aria-label": props.alt || void 0,
+					onError: () => {
+						load.value = "error";
+					}
+				}),
+				current.kind === "audio" && !failed && h("audio", {
+					class: "calmlens-media__content",
+					src: current.src,
+					controls: props.controls,
+					preload: "metadata",
+					"aria-label": props.alt || void 0,
+					onError: () => {
+						load.value = "error";
+					}
+				}),
+				current.kind === "gated" && notice([
+					h("strong", text.sensitiveTitle),
+					h("p", text.sensitiveBody),
+					props.onReveal && h("button", {
+						type: "button",
+						class: "calmlens-button",
+						onClick: props.onReveal
+					}, text.reveal)
+				]),
+				(current.kind === "unavailable" || failed) && notice([h("p", [icon("unavailable"), h("span", { class: "calmlens-media__label" }, getMediaUnavailableMessage(current, text))])])
+			]);
+		};
+	}
+});
+export { CALMLENS_STYLES, CALMLENS_THEME, CalmLensMedia, CalmLensUploader, DEFAULT_MESSAGES, ICONS, ICON_ATTRIBUTES, UploadController, createProgressFetch, createUploadController, describeUploadItem, describeUploader, formatBytes, formatMessage, getDropzoneHint, getMediaAspectRatio, getMediaLoadKey, getMediaState, getMediaUnavailableMessage, getUploadItemMessage, getUploadItemOutcome, isFileAccepted, pickMediaSource, resolveMediaProps, resolveMessages, resolveTheme, useCalmLensUpload };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calmlens/sdk",
-  "version": "0.16.3",
+  "version": "0.17.1",
   "description": "Official CalmLens SDK for JavaScript and TypeScript: content moderation, asset storage and CDN delivery.",
   "license": "MIT",
   "homepage": "https://calmlens.com/docs/sdk/javascript",
@@ -16,13 +16,16 @@
   "main": "cjs/index.js",
   "types": "cjs/index.d.ts",
   "module": "esm/index.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "./esm/elements.js",
+    "./cjs/elements.js"
+  ],
   "engines": {
     "node": ">=22"
   },
   "scripts": {
     "prepublishOnly": "npm run check && npm run test && npm run build",
-    "test": "bun test --parallel=4 tests",
+    "test": "bun test --parallel=4 ./tests/",
     "check:fix": "tsc --noEmit --project tsconfig.json && npx @biomejs/biome check --write",
     "check": "tsc --noEmit --project tsconfig.json && npx @biomejs/biome check",
     "cleanup": "rimraf esm && rimraf cjs && rimraf bin",
@@ -48,17 +51,21 @@
     "cjs/"
   ],
   "devDependencies": {
-    "@biomejs/biome": "^2.5.15",
-    "@oxc-project/runtime": "0.148.0",
-    "@types/bun": "^1.4.2",
-    "@types/node": "26.6.1",
+    "@biomejs/biome": "^2.6.3",
+    "@oxc-project/runtime": "0.155.0",
+    "@types/bun": "^1.4.4",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "react-native": "0.86.3",
     "rimraf": "6.1.3",
-    "rolldown": "1.2.13",
-    "rolldown-plugin-dts": "0.28.7",
-    "typescript": "7.0.2"
+    "rolldown": "1.2.15",
+    "rolldown-plugin-dts": "0.28.8",
+    "svelte": "5.57.2",
+    "typescript": "7.0.2",
+    "vue": "3.5.44"
   },
   "dependencies": {
-    "zod": "^4.6.5",
+    "zod": "^4.6.7",
     "json-schema-to-ts": "^3.1.1"
   },
   "exports": {
@@ -95,6 +102,78 @@
       },
       "default": "./esm/app.js"
     },
+    "./ui": {
+      "import": {
+        "types": "./esm/ui.d.ts",
+        "default": "./esm/ui.js"
+      },
+      "require": {
+        "types": "./cjs/ui.d.ts",
+        "default": "./cjs/ui.js"
+      },
+      "default": "./esm/ui.js"
+    },
+    "./file-icons": {
+      "import": {
+        "types": "./esm/file-icons.d.ts",
+        "default": "./esm/file-icons.js"
+      },
+      "require": {
+        "types": "./cjs/file-icons.d.ts",
+        "default": "./cjs/file-icons.js"
+      },
+      "default": "./esm/file-icons.js"
+    },
+    "./react": {
+      "import": {
+        "types": "./esm/react.d.ts",
+        "default": "./esm/react.js"
+      },
+      "require": {
+        "types": "./cjs/react.d.ts",
+        "default": "./cjs/react.js"
+      },
+      "default": "./esm/react.js"
+    },
+    "./react-native": {
+      "import": {
+        "types": "./esm/react-native.d.ts",
+        "default": "./esm/react-native.js"
+      },
+      "require": {
+        "types": "./cjs/react-native.d.ts",
+        "default": "./cjs/react-native.js"
+      },
+      "default": "./esm/react-native.js"
+    },
+    "./vue": {
+      "import": {
+        "types": "./esm/vue.d.ts",
+        "default": "./esm/vue.js"
+      },
+      "require": {
+        "types": "./cjs/vue.d.ts",
+        "default": "./cjs/vue.js"
+      },
+      "default": "./esm/vue.js"
+    },
+    "./svelte": {
+      "types": "./esm/svelte/index.d.ts",
+      "svelte": "./esm/svelte/index.js",
+      "default": "./esm/svelte/index.js"
+    },
+    "./elements": {
+      "import": {
+        "types": "./esm/elements.d.ts",
+        "default": "./esm/elements.js"
+      },
+      "require": {
+        "types": "./cjs/elements.d.ts",
+        "default": "./cjs/elements.js"
+      },
+      "default": "./esm/elements.js"
+    },
+    "./styles.css": "./esm/styles.css",
     "./testing": {
       "import": {
         "types": "./esm/testing.d.ts",
@@ -121,5 +200,25 @@
   },
   "bugs": {
     "url": "https://github.com/CalmLens/sdks/issues"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": ">=0.79",
+    "svelte": ">=5",
+    "vue": ">=3.3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   }
 }