@fluid-app/portal-sdk 0.1.211 → 0.1.213

package/dist/VideoWidget-DIUMQy1C.cjs

@@ -0,0 +1,986 @@
+const require_chunk = require("./chunk-9hOWP6kD.cjs");
+const require_registries = require("./registries-CpUM406S.cjs");
+const require_MediaRenderer = require("./MediaRenderer-D4HnIAbN.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region ../widgets/src/widgets/VideoWidget.tsx
+var VideoWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	VideoWidget: () => VideoWidget,
+	videoWidgetPropertySchema: () => videoWidgetPropertySchema
+});
+function VideoWidget({ src = "", poster = "", resource, useCustomUrl, displayMode = "inline", borderRadius = "md", borderWidth = "none", borderColor = "muted", verticalSizing = "auto", fixedHeight = "200px", displayFit = "cover", focusPoint, controls = true, autoplay = false, loop = false, muted = true, editorialFrame = true, frameColor = "foreground", eyebrow, tag, title, tagline, duration, author, date, showFullscreenPill = true, primaryCtaText, primaryCtaLink, secondaryCtaText, secondaryCtaLink }) {
+	const effectiveSrc = useCustomUrl ? src : resource?.videoUrl ?? src;
+	const effectivePoster = useCustomUrl ? poster : resource?.imageUrl ?? poster ?? void 0;
+	if (displayMode === "card") {
+		const resolvedTitle = typeof title === "string" && title.trim() ? title : resource?.title ?? void 0;
+		const resourceDescription = typeof resource?.description === "string" ? resource.description : void 0;
+		const resolvedTagline = typeof tagline === "string" && tagline.trim() ? tagline : resourceDescription;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoCard, {
+			src: effectiveSrc,
+			poster: effectivePoster ?? void 0,
+			borderRadius,
+			editorialFrame,
+			frameColor,
+			eyebrow,
+			tag,
+			title: resolvedTitle,
+			tagline: resolvedTagline,
+			duration,
+			author,
+			date,
+			showFullscreenPill,
+			primaryCtaText,
+			primaryCtaLink,
+			secondaryCtaText,
+			secondaryCtaLink
+		});
+	}
+	const isFixed = verticalSizing === "fixed";
+	const borderWidthClass = require_registries.borderWidthClasses[borderWidth];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `relative w-full overflow-hidden rounded-${borderRadius} ${borderWidthClass} ${borderWidth !== "none" ? require_registries.borderColorClasses[borderColor] : ""}`,
+		style: isFixed ? { height: fixedHeight } : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, {
+			mediaType: "video",
+			src: effectiveSrc,
+			poster: effectivePoster,
+			objectFit: isFixed ? displayFit : void 0,
+			focusPoint: isFixed ? focusPoint : void 0,
+			controls,
+			autoplay,
+			loop,
+			muted
+		})
+	});
+}
+function VideoCard({ src, poster, borderRadius, editorialFrame, frameColor, eyebrow, tag, title, tagline, duration, author, date, showFullscreenPill, primaryCtaText, primaryCtaLink, secondaryCtaText, secondaryCtaLink }) {
+	const [modalOpen, setModalOpen] = (0, react.useState)(false);
+	const handleClose = (0, react.useCallback)(() => setModalOpen(false), []);
+	const embed = parseVideoSource(src);
+	const resolvedPoster = poster || embed.thumbnail || "";
+	const [posterSrc, setPosterSrc] = (0, react.useState)(resolvedPoster);
+	(0, react.useEffect)(() => {
+		setPosterSrc(resolvedPoster);
+	}, [resolvedPoster]);
+	const frameVar = `var(--color-${frameColor})`;
+	const frameShadow = editorialFrame ? "shadow-[0_1px_2px_rgba(15,23,42,0.04),0_30px_60px_-30px_rgba(15,23,42,0.4)]" : "";
+	const frameBg = editorialFrame ? `bg-${frameColor}` : "";
+	const gradientTop = { background: `linear-gradient(to top, ${frameVar}, color-mix(in oklch, ${frameVar} 55%, transparent), color-mix(in oklch, ${frameVar} 8%, transparent))` };
+	const gradientLeft = { background: `linear-gradient(to right, color-mix(in oklch, ${frameVar} 70%, transparent), transparent)` };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: () => setModalOpen(true),
+		"aria-label": title ? `Play video: ${title}` : "Play video",
+		className: `group relative block w-full overflow-hidden rounded-${borderRadius} ${frameBg} ${frameShadow} focus-visible:ring-primary text-left focus:outline-none focus-visible:ring-2`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative aspect-[16/9] w-full",
+			children: [
+				posterSrc ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: posterSrc,
+					alt: title ?? "Video thumbnail",
+					className: "absolute inset-0 h-full w-full object-cover transition-transform duration-[700ms] group-hover:scale-[1.03]",
+					onError: () => {
+						if (embed.thumbnailFallback && posterSrc !== embed.thumbnailFallback) setPosterSrc(embed.thumbnailFallback);
+					}
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-muted/30 absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {
+						size: 40,
+						filled: true
+					})
+				}),
+				editorialFrame && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0",
+					style: gradientTop
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0",
+					style: gradientLeft
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `bg-${frameColor === "foreground" ? "background" : "foreground"} flex size-16 items-center justify-center rounded-full shadow-[0_12px_32px_-8px_rgba(255,255,255,0.35)] transition-transform duration-300 group-hover:scale-[1.08] group-active:scale-95`,
+						style: { animation: "fluidVideoPopIn 400ms ease-out 120ms both" },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {
+							size: 22,
+							filled: true,
+							color: frameVar
+						})
+					})
+				}),
+				showFullscreenPill && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute top-1/2 right-6 -translate-y-1/2 opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-bold shadow-lg",
+						style: {
+							backgroundColor: "rgba(255,255,255,0.95)",
+							color: frameVar
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MaximizeIcon, { size: 12 }), "Full screen"]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "absolute inset-x-0 top-0 z-10 flex items-center justify-between p-5 sm:p-6",
+					children: [(eyebrow || tag) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "flex size-5 items-center justify-center rounded-full backdrop-blur-sm",
+								style: {
+									backgroundColor: "rgba(255,255,255,0.15)",
+									boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.2)"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {
+									size: 10,
+									filled: true,
+									color: "#fff",
+									marginLeft: 1
+								})
+							}),
+							tag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "rounded-full px-2.5 py-1 text-[10px] font-bold tracking-[0.24em] text-white uppercase backdrop-blur-sm",
+								style: {
+									backgroundColor: "rgba(255,255,255,0.15)",
+									boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.2)"
+								},
+								children: tag
+							}),
+							eyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-[10px] font-bold tracking-[0.24em] uppercase",
+								style: { color: "rgba(255,255,255,0.85)" },
+								children: eyebrow
+							})
+						]
+					}), duration && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "flex items-center gap-1.5 rounded-full px-2.5 py-1 font-mono text-[10px] font-bold text-white tabular-nums backdrop-blur-sm",
+						style: {
+							backgroundColor: "rgba(255,255,255,0.1)",
+							boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.15)"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClockIcon, { size: 10 }), duration]
+					})]
+				}),
+				(title || tagline || author || date) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "absolute inset-x-0 bottom-0 z-10 flex flex-col p-5 sm:p-6",
+					children: [
+						title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: "text-[22px] leading-[1.18] font-bold tracking-[-0.015em] text-white sm:text-[24px]",
+							children: title
+						}),
+						tagline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-1.5 max-w-[520px] text-[12.5px] leading-[1.55]",
+							style: { color: "rgba(255,255,255,0.7)" },
+							children: tagline
+						}),
+						(author || date) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-3 flex items-center gap-2 text-[10px] font-bold tracking-[0.16em] uppercase",
+							style: { color: "rgba(255,255,255,0.6)" },
+							children: [
+								author && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: author }),
+								author && date && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "size-0.5 rounded-full",
+									style: { backgroundColor: "rgba(255,255,255,0.3)" }
+								}),
+								date && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: date })
+							]
+						})
+					]
+				})
+			]
+		})
+	}), modalOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoModal, {
+		src,
+		embed,
+		title,
+		frameColor,
+		onClose: handleClose,
+		primaryCtaText,
+		primaryCtaLink,
+		secondaryCtaText,
+		secondaryCtaLink
+	})] });
+}
+function VideoModal({ src, embed, title, frameColor, onClose, primaryCtaText, primaryCtaLink, secondaryCtaText, secondaryCtaLink }) {
+	const directSrc = src?.trim();
+	const isMissingDirectVideo = embed.source === "direct" && !directSrc;
+	const [loading, setLoading] = (0, react.useState)(!isMissingDirectVideo);
+	const [loadFailed, setLoadFailed] = (0, react.useState)(isMissingDirectVideo);
+	const [iframeKey, setIframeKey] = (0, react.useState)(0);
+	const dialogRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setLoading(!isMissingDirectVideo);
+		setLoadFailed(isMissingDirectVideo);
+	}, [
+		isMissingDirectVideo,
+		src,
+		embed.embedUrl
+	]);
+	(0, react.useEffect)(() => {
+		const handler = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [onClose]);
+	(0, react.useEffect)(() => {
+		const { overflow } = document.body.style;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = overflow;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		const previouslyFocused = document.activeElement;
+		dialogRef.current?.focus();
+		return () => {
+			previouslyFocused?.focus?.();
+		};
+	}, []);
+	const backdropStyle = {
+		backgroundColor: `color-mix(in oklch, ${`var(--color-${frameColor})`} 85%, transparent)`,
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)"
+	};
+	const brandAccent = embed.accent ?? "var(--color-primary)";
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: dialogRef,
+		tabIndex: -1,
+		className: "fixed inset-0 z-[9999] flex items-center justify-center p-4 focus:outline-none sm:p-8",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": title ?? "Video player",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute inset-0",
+			style: backdropStyle,
+			onClick: onClose,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `bg-${frameColor} relative z-10 flex max-h-full w-full max-w-5xl flex-col overflow-hidden rounded-2xl shadow-[0_40px_80px_-20px_rgba(0,0,0,0.6)]`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between gap-3 px-4 py-3",
+					style: { borderBottom: "1px solid rgba(255,255,255,0.1)" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-3",
+						children: [embed.source !== "direct" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "flex size-9 items-center justify-center rounded-full",
+							style: { background: embed.iconGradient ?? "var(--color-primary)" },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {
+								size: 16,
+								filled: true,
+								color: "#fff",
+								marginLeft: 2
+							})
+						}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "line-clamp-1 text-[13px] font-bold text-white",
+							children: title
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+								label: "Refresh",
+								onClick: () => {
+									setIframeKey((k) => k + 1);
+									setLoading(!isMissingDirectVideo);
+									setLoadFailed(isMissingDirectVideo);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshIcon, { size: 14 })
+							}),
+							embed.watchUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+								label: "Open externally",
+								asLink: true,
+								href: embed.watchUrl,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalIcon, { size: 14 })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+								label: "Close",
+								onClick: onClose,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, { size: 14 })
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `bg-${frameColor} relative w-full`,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative aspect-video w-full",
+						children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-0 flex items-center justify-center",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "size-8 animate-spin rounded-full border-2",
+								style: {
+									borderColor: "rgba(255,255,255,0.1)",
+									borderTopColor: brandAccent
+								}
+							})
+						}), loadFailed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-0 flex items-center justify-center",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-sm",
+								style: { color: "rgba(255,255,255,0.7)" },
+								children: "Unable to load video."
+							})
+						}) : embed.source === "direct" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+							src: directSrc,
+							controls: true,
+							autoPlay: true,
+							className: "absolute inset-0 h-full w-full",
+							onLoadedData: () => setLoading(false),
+							onError: () => {
+								setLoading(false);
+								setLoadFailed(true);
+							},
+							children: "Your browser does not support the video tag."
+						}, iframeKey) : embed.embedUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+							src: embed.embedUrl,
+							title: title ?? "Video",
+							className: "absolute inset-0 h-full w-full border-0",
+							allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+							allowFullScreen: true,
+							onLoad: () => setLoading(false)
+						}, iframeKey) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-0 flex items-center justify-center",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-sm",
+								style: { color: "rgba(255,255,255,0.7)" },
+								children: "Unable to load video."
+							})
+						})]
+					})
+				}),
+				(primaryCtaText && primaryCtaLink || secondaryCtaText && secondaryCtaLink) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-end gap-3 px-4 py-3",
+					style: { borderTop: "1px solid rgba(255,255,255,0.1)" },
+					children: [secondaryCtaText && secondaryCtaLink && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: secondaryCtaLink,
+						className: "inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-[12px] font-bold transition-colors",
+						style: { color: "rgba(255,255,255,0.75)" },
+						children: secondaryCtaText
+					}), primaryCtaText && primaryCtaLink && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+						href: primaryCtaLink,
+						className: `text-${frameColor} inline-flex items-center gap-1.5 rounded-full bg-white px-5 py-2 text-[13px] font-bold shadow-[0_8px_22px_-8px_rgba(255,255,255,0.4)] transition-transform hover:scale-[1.02]`,
+						children: [primaryCtaText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							children: "→"
+						})]
+					})]
+				})
+			]
+		})]
+	}), document.body);
+}
+function ToolbarButton({ label, onClick, asLink, href, children }) {
+	const className = "flex size-9 items-center justify-center rounded-full transition-colors hover:text-white";
+	const style = { color: "rgba(255,255,255,0.7)" };
+	if (asLink && href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"aria-label": label,
+		className,
+		style,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		"aria-label": label,
+		className,
+		style,
+		children
+	});
+}
+function parseVideoSource(src) {
+	if (!src) return { source: "direct" };
+	const url = src.trim();
+	const youtubeId = extractYouTubeId(url);
+	if (youtubeId) return {
+		source: "youtube",
+		embedUrl: `https://www.youtube.com/embed/${youtubeId}?autoplay=1&rel=0`,
+		watchUrl: `https://www.youtube.com/watch?v=${youtubeId}`,
+		thumbnail: `https://i.ytimg.com/vi/${youtubeId}/maxresdefault.jpg`,
+		thumbnailFallback: `https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg`,
+		accent: "#FF0033",
+		iconGradient: "linear-gradient(135deg, #FF0033 0%, #CC0022 100%)"
+	};
+	const vimeoId = extractVimeoId(url);
+	if (vimeoId) return {
+		source: "vimeo",
+		embedUrl: `https://player.vimeo.com/video/${vimeoId}?autoplay=1`,
+		watchUrl: `https://vimeo.com/${vimeoId}`,
+		accent: "#1AB7EA",
+		iconGradient: "linear-gradient(135deg, #1AB7EA 0%, #0D8BBA 100%)"
+	};
+	return { source: "direct" };
+}
+function extractYouTubeId(url) {
+	const normalizeId = (value) => value && /^[a-zA-Z0-9_-]{11}$/.test(value) ? value : void 0;
+	try {
+		const parsed = new URL(url);
+		const hostname = parsed.hostname.replace(/^www\./, "").toLowerCase();
+		const pathParts = parsed.pathname.split("/").filter(Boolean);
+		if (hostname === "youtu.be") return normalizeId(pathParts[0]);
+		if (hostname === "youtube.com" || hostname.endsWith(".youtube.com") || hostname === "youtube-nocookie.com" || hostname.endsWith(".youtube-nocookie.com")) {
+			const watchId = normalizeId(parsed.searchParams.get("v"));
+			if (watchId) return watchId;
+			if ((pathParts[0] === "embed" || pathParts[0] === "shorts") && pathParts[1]) return normalizeId(pathParts[1]);
+		}
+	} catch {}
+	for (const pattern of [
+		/youtube\.com\/watch.*[?&]v=([a-zA-Z0-9_-]{11})/,
+		/youtu\.be\/([a-zA-Z0-9_-]{11})/,
+		/youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/,
+		/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/
+	]) {
+		const youtubeId = normalizeId(pattern.exec(url)?.[1]);
+		if (youtubeId) return youtubeId;
+	}
+}
+function extractVimeoId(url) {
+	for (const pattern of [/vimeo\.com\/(?:video\/)?(\d{6,})/, /player\.vimeo\.com\/video\/(\d{6,})/]) {
+		const match = pattern.exec(url);
+		if (match?.[1]) return match[1];
+	}
+}
+function PlayIcon({ size, color, filled, marginLeft }) {
+	const style = {};
+	if (color) style.color = color;
+	if (marginLeft) style.marginLeft = `${marginLeft}px`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: filled ? "currentColor" : "none",
+		stroke: "currentColor",
+		strokeWidth: filled ? 0 : 2.5,
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7z" })
+	});
+}
+function ClockIcon({ size }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "12 6 12 12 16 14" })]
+	});
+}
+function MaximizeIcon({ size }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: "21",
+				y1: "3",
+				x2: "14",
+				y2: "10"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: "3",
+				y1: "21",
+				x2: "10",
+				y2: "14"
+			})
+		]
+	});
+}
+function RefreshIcon({ size }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "23 4 23 10 17 10" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "1 20 1 14 7 14" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
+		]
+	});
+}
+function ExternalIcon({ size }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: "10",
+				y1: "14",
+				x2: "21",
+				y2: "3"
+			})
+		]
+	});
+}
+function CloseIcon({ size }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "18",
+			y1: "6",
+			x2: "6",
+			y2: "18"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "6",
+			y1: "6",
+			x2: "18",
+			y2: "18"
+		})]
+	});
+}
+const videoWidgetPropertySchema = {
+	widgetType: "VideoWidget",
+	displayName: "Video",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}, {
+		id: "behavior",
+		label: "Behavior"
+	}],
+	fields: [
+		{
+			key: "resource",
+			label: "Select Video",
+			type: "resource",
+			description: "Browse and select a video",
+			allowedTypes: ["Medium"],
+			tab: "styling",
+			group: "Content"
+		},
+		{
+			key: "useCustomUrl",
+			label: "Use Custom URL",
+			type: "boolean",
+			description: "Enter a custom video URL instead of selecting media.",
+			defaultValue: false,
+			tab: "styling",
+			group: "Content"
+		},
+		{
+			key: "src",
+			label: "Video URL",
+			type: "text",
+			description: "Direct video URL for inline mode. Card mode supports YouTube, Vimeo, and direct video URLs.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Content",
+			requiresKeyToBeTrue: "useCustomUrl"
+		},
+		{
+			key: "poster",
+			label: "Poster Image URL",
+			type: "text",
+			description: "Thumbnail shown before play. Card mode can auto-derive YouTube thumbnails; add a poster for Vimeo URLs.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Content",
+			requiresKeyToBeTrue: "useCustomUrl"
+		},
+		{
+			key: "displayMode",
+			label: "Display Mode",
+			type: "buttonGroup",
+			description: "Inline: native player embedded in the page. Card: premium thumbnail that opens a modal.",
+			options: [{
+				label: "Inline",
+				value: "inline"
+			}, {
+				label: "Card",
+				value: "card"
+			}],
+			defaultValue: "inline",
+			tab: "styling",
+			group: "Display Mode"
+		},
+		{
+			key: "title",
+			label: "Title",
+			type: "text",
+			description: "Headline on the card thumbnail (card mode only).",
+			defaultValue: "",
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "tagline",
+			label: "Tagline",
+			type: "textarea",
+			description: "Short body line under the title.",
+			defaultValue: "",
+			rows: 2,
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "eyebrow",
+			label: "Eyebrow",
+			type: "text",
+			description: "Small label above the card (e.g. 'Training · Fluid Academy').",
+			defaultValue: "",
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "tag",
+			label: "Tag",
+			type: "text",
+			description: "Optional pill label.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "duration",
+			label: "Duration",
+			type: "text",
+			description: "Runtime (e.g. '4:52' or '1:09:30'). Shown as a chip.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "author",
+			label: "Author / Instructor",
+			type: "text",
+			description: "Meta line author.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "date",
+			label: "Date",
+			type: "text",
+			description: "Meta line date (e.g. 'Apr 12').",
+			defaultValue: "",
+			tab: "styling",
+			group: "Card Content",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "editorialFrame",
+			label: "Editorial Frame",
+			type: "boolean",
+			description: "Premium dark canvas with layered shadow and dual gradient overlays.",
+			defaultValue: true,
+			tab: "styling",
+			group: "Card Frame",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		require_registries.getColorField({
+			defaultValue: "foreground",
+			key: "frameColor",
+			label: "Frame Color",
+			description: "Surface color for the card and modal.",
+			tab: "styling",
+			group: "Card Frame",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		}),
+		{
+			key: "showFullscreenPill",
+			label: "Show Fullscreen Pill",
+			type: "boolean",
+			description: "Show the 'Full screen' hover hint on the card.",
+			defaultValue: true,
+			tab: "styling",
+			group: "Card Frame",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "primaryCtaText",
+			label: "Primary CTA Text",
+			type: "text",
+			description: "Primary button in the modal footer (optional).",
+			defaultValue: "",
+			tab: "styling",
+			group: "Modal CTAs",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "primaryCtaLink",
+			label: "Primary CTA Link",
+			type: "text",
+			description: "URL for the primary CTA.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Modal CTAs",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "secondaryCtaText",
+			label: "Secondary CTA Text",
+			type: "text",
+			description: "Secondary (ghost) button in the modal footer (optional).",
+			defaultValue: "",
+			tab: "styling",
+			group: "Modal CTAs",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		{
+			key: "secondaryCtaLink",
+			label: "Secondary CTA Link",
+			type: "text",
+			description: "URL for the secondary CTA.",
+			defaultValue: "",
+			tab: "styling",
+			group: "Modal CTAs",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "card"
+			}
+		},
+		require_registries.getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the video container",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getBorderWidthField({
+			key: "borderWidth",
+			label: "Border Width",
+			description: "Border width for the widget",
+			defaultValue: "none",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getBorderColorField({
+			key: "borderColor",
+			label: "Border Color",
+			description: "Border color for the widget",
+			defaultValue: "muted",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "verticalSizing",
+			label: "Vertical Sizing",
+			type: "buttonGroup",
+			description: "How the video height is determined (inline mode only)",
+			options: [{
+				label: "Auto",
+				value: "auto"
+			}, {
+				label: "Fixed",
+				value: "fixed"
+			}],
+			defaultValue: "auto",
+			tab: "styling",
+			group: "Design",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "inline"
+			}
+		},
+		require_registries.getHeightField({
+			key: "fixedHeight",
+			label: "Height",
+			description: "Fixed height of the video container",
+			defaultValue: "200px",
+			tab: "styling",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		}),
+		{
+			key: "displayFit",
+			label: "Display Fit",
+			type: "buttonGroup",
+			description: "How the video fills its container",
+			options: [{
+				label: "Cover",
+				value: "cover"
+			}, {
+				label: "Contain",
+				value: "contain"
+			}],
+			defaultValue: "cover",
+			tab: "styling",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		},
+		{
+			key: "focusPoint",
+			label: "Focus Point",
+			type: "contentPosition",
+			description: "The focal point of the video within its container",
+			defaultValue: "center",
+			tab: "styling",
+			group: "Design",
+			requiresKeyValue: {
+				key: "verticalSizing",
+				value: "fixed"
+			}
+		},
+		{
+			key: "controls",
+			label: "Show Controls",
+			type: "boolean",
+			description: "Display video playback controls (inline mode only — card mode always shows controls in the modal).",
+			defaultValue: true,
+			tab: "behavior",
+			group: "Behavior",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "inline"
+			}
+		},
+		{
+			key: "autoplay",
+			label: "Autoplay",
+			type: "boolean",
+			description: "Automatically start playing the video",
+			defaultValue: false,
+			tab: "behavior",
+			group: "Behavior",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "inline"
+			}
+		},
+		{
+			key: "loop",
+			label: "Loop",
+			type: "boolean",
+			description: "Repeat the video when it ends",
+			defaultValue: false,
+			tab: "behavior",
+			group: "Behavior",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "inline"
+			}
+		},
+		{
+			key: "muted",
+			label: "Muted",
+			type: "boolean",
+			description: "Start with audio muted",
+			defaultValue: true,
+			tab: "behavior",
+			group: "Behavior",
+			requiresKeyValue: {
+				key: "displayMode",
+				value: "inline"
+			}
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "VideoWidget", {
+	enumerable: true,
+	get: function() {
+		return VideoWidget;
+	}
+});
+Object.defineProperty(exports, "VideoWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return VideoWidget_exports;
+	}
+});
+Object.defineProperty(exports, "videoWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return videoWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=VideoWidget-DIUMQy1C.cjs.map