@calmlens/sdk 0.16.3 → 0.17.1

package/esm/react-native.js

@@ -0,0 +1,467 @@
+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, r as isFileAccepted, t as UploadController } from "./UploadController-txp5NuzH.js";
+import { a as getFileIcon, o as getFileIconLabel, t as FILE_ICON_COLORS } from "./FileIcons-M6dzjFxd.js";
+import { n as useOwnController, r as useUploadSnapshot, t as useCalmLensUpload } from "./ReactUpload-D6yBCkcw.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Image, PixelRatio, Pressable, StyleSheet, Text, View } from "react-native";
+// src/react-native.tsx
+const createUploaderStyles = (theme) => StyleSheet.create({
+	uploader: { gap: 12 },
+	picker: {
+		alignItems: "center",
+		gap: 12,
+		paddingVertical: 28,
+		paddingHorizontal: 20,
+		borderWidth: 1.5,
+		borderStyle: "dashed",
+		borderColor: theme.border,
+		borderRadius: theme.radius,
+		backgroundColor: theme.surface
+	},
+	hint: {
+		fontSize: 13,
+		color: theme.muted
+	},
+	button: {
+		paddingVertical: 8,
+		paddingHorizontal: 14,
+		borderRadius: 8,
+		borderWidth: 1,
+		borderColor: theme.accent,
+		backgroundColor: theme.accent
+	},
+	buttonText: {
+		fontSize: 14,
+		fontWeight: "500",
+		color: theme.accentText
+	},
+	outlineButton: {
+		backgroundColor: "transparent",
+		borderColor: theme.border
+	},
+	outlineButtonText: { color: theme.text },
+	smallButton: {
+		paddingVertical: 4,
+		paddingHorizontal: 10
+	},
+	disabledButton: {
+		backgroundColor: "transparent",
+		borderStyle: "dashed",
+		borderColor: theme.border
+	},
+	disabledButtonText: { color: theme.muted },
+	uploads: { gap: 8 },
+	upload: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 12,
+		padding: 12,
+		borderWidth: 1,
+		borderColor: theme.border,
+		borderRadius: theme.radius,
+		backgroundColor: theme.background
+	},
+	messageRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 8
+	},
+	outcomeDot: {
+		width: 8,
+		height: 8,
+		borderRadius: 4
+	},
+	accepted: { backgroundColor: theme.success },
+	restricted: { backgroundColor: theme.warning },
+	rejected: { backgroundColor: theme.danger },
+	thumb: {
+		width: 40,
+		height: 40,
+		borderRadius: 8,
+		overflow: "hidden"
+	},
+	fileIcon: {
+		alignItems: "center",
+		justifyContent: "center",
+		borderWidth: 1.5
+	},
+	fileIconLabel: {
+		fontSize: 9,
+		fontWeight: "700",
+		fontFamily: "monospace"
+	},
+	body: {
+		flex: 1,
+		minWidth: 0,
+		gap: 4
+	},
+	name: {
+		fontWeight: "500",
+		color: theme.text
+	},
+	size: {
+		fontSize: 13,
+		color: theme.muted
+	},
+	message: {
+		fontSize: 13,
+		color: theme.text
+	},
+	progress: {
+		height: 4,
+		borderRadius: 2,
+		overflow: "hidden",
+		backgroundColor: theme.border
+	},
+	progressBar: {
+		height: "100%",
+		borderRadius: 2,
+		backgroundColor: theme.accent
+	},
+	actions: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 8
+	},
+	iconButton: {
+		width: 30,
+		height: 30,
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: 8
+	},
+	iconButtonText: {
+		fontSize: 16,
+		color: theme.text
+	}
+});
+/** The `testID` of the uploader's pick buttons, for end-to-end tests such as Detox or Maestro. */
+const CHOOSE_TEST_ID = "calmlens-choose";
+const Button = ({ label, onPress, disabled, variant, size, styles, testID }) => /* @__PURE__ */ jsx(Pressable, {
+	role: "button",
+	"aria-label": label,
+	testID,
+	disabled,
+	onPress,
+	style: [
+		styles.button,
+		variant === "outline" && styles.outlineButton,
+		size === "small" && styles.smallButton,
+		disabled && styles.disabledButton
+	],
+	children: /* @__PURE__ */ jsx(Text, {
+		style: [
+			styles.buttonText,
+			variant === "outline" && styles.outlineButtonText,
+			disabled && styles.disabledButtonText
+		],
+		children: label
+	})
+});
+/** The file-type tile shown for files without an image preview, in the family's colour. */
+const FileIcon = ({ file, styles }) => {
+	const { family, extension } = getFileIcon(file);
+	const tint = FILE_ICON_COLORS[family];
+	return /* @__PURE__ */ jsx(View, {
+		"aria-hidden": true,
+		style: [
+			styles.thumb,
+			styles.fileIcon,
+			{ borderColor: tint }
+		],
+		children: /* @__PURE__ */ jsx(Text, {
+			style: [styles.fileIconLabel, { color: tint }],
+			children: getFileIconLabel(extension).text
+		})
+	});
+};
+const UploadRow = ({ item, view, messages, styles, showChooseAnother, disabled, onChooseAnother, onRetry, onRemove }) => /* @__PURE__ */ jsxs(View, {
+	style: styles.upload,
+	children: [
+		item.previewUrl ? /* @__PURE__ */ jsx(Image, {
+			source: { uri: item.previewUrl },
+			"aria-hidden": true,
+			blurRadius: view.outcome === "rejected" ? 6 : void 0,
+			style: styles.thumb
+		}) : /* @__PURE__ */ jsx(FileIcon, {
+			file: item.file,
+			styles
+		}),
+		/* @__PURE__ */ jsxs(View, {
+			style: styles.body,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					style: styles.name,
+					numberOfLines: 1,
+					children: item.file.name
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					style: styles.size,
+					children: view.size
+				}),
+				view.busy && /* @__PURE__ */ jsx(View, {
+					role: "progressbar",
+					"aria-label": view.message,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": view.progressPercent,
+					style: styles.progress,
+					children: /* @__PURE__ */ jsx(View, { style: [styles.progressBar, { width: `${view.progressPercent ?? 100}%` }] })
+				}),
+				view.message ? /* @__PURE__ */ jsxs(View, {
+					style: styles.messageRow,
+					children: [view.outcome && /* @__PURE__ */ jsx(View, {
+						"aria-hidden": true,
+						style: [styles.outcomeDot, styles[view.outcome]]
+					}), /* @__PURE__ */ jsx(Text, {
+						role: "status",
+						style: styles.message,
+						children: view.message
+					})]
+				}) : null
+			]
+		}),
+		/* @__PURE__ */ jsxs(View, {
+			style: styles.actions,
+			children: [
+				showChooseAnother && /* @__PURE__ */ jsx(Button, {
+					label: messages.chooseAnother,
+					testID: "calmlens-choose",
+					variant: "outline",
+					size: "small",
+					disabled,
+					onPress: onChooseAnother,
+					styles
+				}),
+				view.canRetry && /* @__PURE__ */ jsx(Pressable, {
+					role: "button",
+					"aria-label": messages.retry,
+					onPress: onRetry,
+					style: styles.iconButton,
+					children: /* @__PURE__ */ jsx(Text, {
+						"aria-hidden": true,
+						style: styles.iconButtonText,
+						children: "↻"
+					})
+				}),
+				/* @__PURE__ */ jsx(Pressable, {
+					role: "button",
+					"aria-label": view.removeLabel,
+					onPress: onRemove,
+					style: styles.iconButton,
+					children: /* @__PURE__ */ jsx(Text, {
+						"aria-hidden": true,
+						style: styles.iconButtonText,
+						children: "✕"
+					})
+				})
+			]
+		})
+	]
+});
+/**
+* A pick button and file list that uploads through an upload preset, shows each file's progress
+* and moderation decision, and reports finished uploads to `onUploaded`. `pick` opens your app's
+* picker, such as `expo-image-picker`.
+*/
+function CalmLensUploader({ pick, disabled, messages: overrides, controller: external, theme: themeOverrides, style, ...options }) {
+	const own = useOwnController(options, !external);
+	const upload = useUploadSnapshot(external ?? own);
+	const { accept, multiple = false } = upload.controller.options;
+	const messages = useMemo(() => resolveMessages(overrides), [overrides]);
+	const styles = useMemo(() => createUploaderStyles(resolveTheme(themeOverrides)), [themeOverrides]);
+	const view = describeUploader(upload, upload.controller.options, messages);
+	const openPicker = async () => {
+		if (disabled) return;
+		const files = await pick({
+			multiple,
+			accept
+		});
+		if (files?.length) upload.addFiles(files);
+	};
+	return /* @__PURE__ */ jsxs(View, {
+		style: [styles.uploader, style],
+		children: [view.showDropzone && /* @__PURE__ */ jsxs(View, {
+			style: styles.picker,
+			children: [/* @__PURE__ */ jsx(Button, {
+				label: view.chooseLabel,
+				testID: "calmlens-choose",
+				variant: "outline",
+				disabled,
+				onPress: () => void openPicker(),
+				styles
+			}), view.hint && /* @__PURE__ */ jsx(Text, {
+				style: styles.hint,
+				children: view.hint
+			})]
+		}), upload.items.length > 0 && /* @__PURE__ */ jsx(View, {
+			style: styles.uploads,
+			children: upload.items.map((item) => /* @__PURE__ */ jsx(UploadRow, {
+				item,
+				view: describeUploadItem(item, messages),
+				messages,
+				styles,
+				showChooseAnother: !view.showDropzone,
+				disabled,
+				onChooseAnother: () => void openPicker(),
+				onRetry: () => upload.retry(item.key),
+				onRemove: () => upload.remove(item.key)
+			}, item.key))
+		})]
+	});
+}
+const mediaStyles = StyleSheet.create({
+	media: {
+		position: "relative",
+		overflow: "hidden",
+		minHeight: 160
+	},
+	sized: { minHeight: 0 },
+	fill: { ...StyleSheet.absoluteFill },
+	notice: {
+		...StyleSheet.absoluteFill,
+		alignItems: "center",
+		justifyContent: "center",
+		gap: 6,
+		padding: 12,
+		backgroundColor: "rgba(0, 0, 0, 0.45)"
+	},
+	noticeTitle: {
+		fontWeight: "600",
+		color: "#fff",
+		textAlign: "center"
+	},
+	noticeText: {
+		color: "#fff",
+		textAlign: "center"
+	},
+	revealButton: {
+		marginTop: 4,
+		paddingVertical: 7,
+		paddingHorizontal: 14,
+		borderRadius: 8,
+		backgroundColor: "#fff"
+	},
+	revealText: {
+		fontSize: 14,
+		fontWeight: "500",
+		color: "#111"
+	}
+});
+/**
+* Shows an asset from the CalmLens CDN, at the width in `widths` that covers its measured size,
+* with 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.
+*/
+function CalmLensMedia(input) {
+	const { asset: _asset, projectId, assetId, status, contentRemoved, type, resource, lens, transform, widths, url, placeholder, placeholderHash, placeholderUrl: customPlaceholderUrl, cdnBaseUrl, viewerClaims, alt = "", aspectRatio, width, height, averageColor, fit = "cover", messages: overrides, theme: themeOverrides, onReveal, renderPlayer, style } = resolveMediaProps(input);
+	const messages = useMemo(() => resolveMessages(overrides), [overrides]);
+	const theme = useMemo(() => resolveTheme(themeOverrides), [themeOverrides]);
+	const state = getMediaState({
+		asset: _asset,
+		projectId,
+		assetId,
+		status,
+		contentRemoved,
+		type,
+		resource,
+		lens,
+		transform,
+		widths,
+		url,
+		placeholder,
+		placeholderHash,
+		placeholderUrl: customPlaceholderUrl,
+		cdnBaseUrl,
+		viewerClaims
+	});
+	const [layoutWidth, setLayoutWidth] = useState();
+	const src = state.kind === "image" ? pickMediaSource(state, layoutWidth) : void 0;
+	const loadKey = src ?? getMediaLoadKey(state);
+	const [load, setLoad] = useState({
+		key: loadKey,
+		state: "loading"
+	});
+	const current = load.key === loadKey ? load.state : "loading";
+	const ratio = getMediaAspectRatio({
+		aspectRatio,
+		width,
+		height
+	});
+	const unavailable = state.kind === "unavailable" || current === "error";
+	const placeholderUrl = state.kind === "audio" || state.kind === "unavailable" ? void 0 : state.placeholderUrl;
+	const showPlaceholder = placeholderUrl && !unavailable && (state.kind !== "image" || current !== "loaded") && !(state.kind === "video" && renderPlayer);
+	const player = (state.kind === "video" || state.kind === "audio") && !unavailable ? renderPlayer?.({
+		kind: state.kind,
+		src: state.src,
+		alt
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(View, {
+		onLayout: (event) => {
+			setLayoutWidth(PixelRatio.getPixelSizeForLayoutSize(event.nativeEvent.layout.width));
+		},
+		style: [
+			mediaStyles.media,
+			ratio !== void 0 && [mediaStyles.sized, { aspectRatio: ratio }],
+			{ backgroundColor: averageColor ?? theme.surface },
+			style
+		],
+		children: [
+			showPlaceholder && /* @__PURE__ */ jsx(Image, {
+				source: { uri: placeholderUrl },
+				"aria-hidden": true,
+				blurRadius: 12,
+				resizeMode: fit,
+				style: mediaStyles.fill
+			}),
+			src && !unavailable && /* @__PURE__ */ jsx(Image, {
+				source: { uri: src },
+				"aria-label": alt || void 0,
+				accessible: Boolean(alt),
+				resizeMode: fit,
+				onLoad: () => setLoad({
+					key: loadKey,
+					state: "loaded"
+				}),
+				onError: () => setLoad({
+					key: loadKey,
+					state: "error"
+				}),
+				style: [mediaStyles.fill, { opacity: current === "loaded" ? 1 : 0 }]
+			}, loadKey),
+			player,
+			state.kind === "gated" && /* @__PURE__ */ jsxs(View, {
+				style: mediaStyles.notice,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						style: mediaStyles.noticeTitle,
+						children: messages.sensitiveTitle
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						style: mediaStyles.noticeText,
+						children: messages.sensitiveBody
+					}),
+					onReveal && /* @__PURE__ */ jsx(Pressable, {
+						role: "button",
+						"aria-label": messages.reveal,
+						onPress: onReveal,
+						style: mediaStyles.revealButton,
+						children: /* @__PURE__ */ jsx(Text, {
+							style: mediaStyles.revealText,
+							children: messages.reveal
+						})
+					})
+				]
+			}),
+			unavailable && /* @__PURE__ */ jsx(View, {
+				style: [mediaStyles.notice, { backgroundColor: theme.surface }],
+				children: /* @__PURE__ */ jsx(Text, {
+					style: { color: theme.text },
+					children: getMediaUnavailableMessage(state, messages)
+				})
+			})
+		]
+	});
+}
+export { CALMLENS_STYLES, CALMLENS_THEME, CHOOSE_TEST_ID, 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/esm/react.d.ts

@@ -0,0 +1,30 @@
+import { A as CustomUploadResult, B as MediaAsset, C as getDropzoneHint, D as resolveMessages, E as getUploadItemOutcome, G as MediaState, H as MediaOptions, J as resolveMediaProps, K as getMediaState, L as UploadStage, M as UploadController, P as UploadFile, S as formatMessage, T as getUploadItemMessage, U as MediaSettings, V as MediaImageSource, W as MediaSource, _ as UploadItemView, a as createProgressFetch, b as describeUploader, c as IconName, d as UploaderDisplayOptions, g as DEFAULT_MESSAGES, h as CalmLensMessages, i as CALMLENS_STYLES, j as UploadClient, k as CustomUploadContext, l as MediaDisplayOptions, m as getMediaLoadKey, n as CalmLensTheme, o as ICONS, p as getMediaAspectRatio, q as pickMediaSource, r as resolveTheme, s as ICON_ATTRIBUTES, t as CALMLENS_THEME, u as MediaProps, v as UploaderView, w as getMediaUnavailableMessage, x as formatBytes, y as describeUploadItem, z as isFileAccepted } from "./ui-CgZpgpNo.js";
+import { a as UploaderProps, i as UploadSnapshot, n as UploadControllerOptions, o as UseCalmLensUploadResult, r as UploadItem, s as createUploadController, t as CalmLensUpload } from "./BrowserUpload-uZjVFGfP.js";
+import { CSSProperties, HTMLAttributes } from "react";
+/**
+ * Uploads files through an upload preset and re-renders 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.
+ */
+export declare const useCalmLensUpload: <F extends UploadFile = File>(options: UploadControllerOptions<F>) => UseCalmLensUploadResult<F>;
+/** Leaves out the stylesheet the components render, so you can style the `calmlens-*` classes. */
+type StyleOptions = {
+  unstyled?: boolean;
+};
+export type CalmLensUploaderProps = UploaderProps & StyleOptions & {
+  className?: string;
+  style?: CSSProperties;
+};
+/**
+ * A drop zone and file list that uploads through an upload preset, shows each file's progress
+ * and moderation decision, and reports finished uploads to `onUploaded`.
+ */
+export declare function CalmLensUploader({ disabled, capture, messages: overrides, unstyled, controller: external, className, style, ...options }: CalmLensUploaderProps): import("react").JSX.Element;
+export type CalmLensMediaProps = MediaProps & StyleOptions & Omit<HTMLAttributes<HTMLElement>, "children" | "placeholder">;
+/**
+ * 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.
+ */
+export declare function CalmLensMedia(input: CalmLensMediaProps): import("react").JSX.Element;
+export { CALMLENS_STYLES, CALMLENS_THEME, type CalmLensMessages, type CalmLensTheme, type CalmLensUpload, type CustomUploadContext, type CustomUploadResult, DEFAULT_MESSAGES, ICONS, ICON_ATTRIBUTES, type IconName, type MediaAsset, type MediaDisplayOptions, type MediaImageSource, type MediaOptions, type MediaProps, type MediaSettings, type MediaSource, type MediaState, type UploadClient, UploadController, type UploadControllerOptions, type UploadFile, type UploadItem, type UploadItemView, type UploadSnapshot, type UploadStage, type UploaderDisplayOptions, type UploaderProps, type UploaderView, type UseCalmLensUploadResult, createProgressFetch, createUploadController, describeUploadItem, describeUploader, formatBytes, formatMessage, getDropzoneHint, getMediaAspectRatio, getMediaLoadKey, getMediaState, getMediaUnavailableMessage, getUploadItemMessage, getUploadItemOutcome, isFileAccepted, pickMediaSource, resolveMediaProps, resolveMessages, resolveTheme };