@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-elements/web-preview/index.mjs

@@ -0,0 +1,773 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, o as SPRING_WEIGHTED, r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { AI_COLLAPSIBLE, AI_CONTAINER_RADIUS, AI_FOCUS, AI_ICON, AI_SPACING, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { t as Button } from "../../button-DVOrrZLw.mjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../../tooltip-B8_zKnHC.mjs";
+import { t as Input } from "../../input-DhpkXN3J.mjs";
+import { i as CollapsibleTrigger, n as CollapsibleContent, t as Collapsible } from "../../collapsible-CXy4T04n.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useDebouncedValue, useDisclosure, useFullscreen, useInputState, useMediaQuery, useMergedRef, useNetwork, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon, GlobeIcon, LockIcon, MaximizeIcon, MinimizeIcon, MonitorIcon, SmartphoneIcon, TabletIcon, WifiOffIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ai-elements/web-preview/web-preview.tsx
+/**
+* @fileoverview WebPreview Component - Premium Harmony V2
+*
+* A comprehensive web preview component for displaying and navigating web content
+* with browser-like controls, viewport switching, and console integration.
+*
+* Features:
+* - Premium Harmony V2 spring physics (SPRING_TACTILE, SPRING_FLUID, SPRING_GENTLE)
+* - Touch vs desktop detection with useMediaQuery
+* - Reduced motion support with useReducedMotion
+* - ES2023 syntax with useCallback, useMemo optimization
+* - Tailwind v4 CSS-first theming
+* - CVA variants for console log level styling
+* - Context-based state management for all preview controls
+* - Mantine hooks (useDebouncedValue, useDisclosure, useFullscreen, useInputState, useMergedRef, useNetwork, useMediaQuery, useReducedMotion)
+* - URL navigation with history (back/forward)
+* - Viewport switching (desktop, tablet, mobile)
+* - Native Fullscreen API with CSS fallback
+* - Console panel for debugging logs
+* - Network status indicator (offline/slow connection)
+* - Sandboxed iframe for security
+* - Debounced URL input for auto-navigation
+* - Device toggle controls
+* - Example URL selector
+* - AI design system constants integration
+* - 44px minimum touch targets for accessibility
+* - Data attributes for state management
+* - Semantic color tokens (no hardcoded colors)
+* - AnimatePresence for smooth conditional rendering
+* - Focus-visible ring styles
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/web-preview
+* @component WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewBackButton, WebPreviewForwardButton, WebPreviewFullscreenToggle, WebPreviewUrl, WebPreviewBody, WebPreviewConsole, WebPreviewDeviceToggle, WebPreviewExampleSelect, WebPreviewNetworkStatus
+*
+* @useCases
+* - Web content preview in development tools
+* - Responsive design testing with viewport switching
+* - Browser simulation for documentation
+* - Embedded web viewer with navigation controls
+* - Debug console integration for web content
+* - Network status monitoring for preview loading
+* - Fullscreen presentation mode for demos
+* - Example URL quick selection for testing
+* - Sandboxed iframe security for untrusted content
+* - History-based navigation (back/forward)
+*
+* @subcomponents
+* - WebPreview - Root container with context provider
+* - WebPreviewNavigation - Navigation toolbar container
+* - WebPreviewNavigationButton - Generic nav button with tooltip
+* - WebPreviewBackButton - History back button
+* - WebPreviewForwardButton - History forward button
+* - WebPreviewFullscreenToggle - Fullscreen toggle button
+* - WebPreviewUrl - URL input with debounced navigation
+* - WebPreviewBody - Sandboxed iframe with viewport sizing
+* - WebPreviewConsole - Collapsible console log panel
+* - WebPreviewDeviceToggle - Desktop/tablet/mobile switcher
+* - WebPreviewExampleSelect - Example URL dropdown
+* - WebPreviewNetworkStatus - Offline/slow connection indicator
+*
+* @variants
+* - level: log, warn, error (console logs)
+*
+* @example
+* <WebPreview defaultUrl="https://example.com">
+*   <WebPreviewNavigation>
+*     <WebPreviewBackButton />
+*     <WebPreviewForwardButton />
+*     <WebPreviewUrl />
+*     <WebPreviewDeviceToggle />
+*     <WebPreviewFullscreenToggle />
+*     <WebPreviewNetworkStatus />
+*   </WebPreviewNavigation>
+*   <WebPreviewBody />
+*   <WebPreviewConsole logs={consoleLogs} />
+* </WebPreview>
+*/
+/**
+* CVA variants for console log level styling with DevTools aesthetic
+*/
+const consoleLogVariants = cva("flex items-start gap-2 rounded-sm border-l-2 px-2 py-1.5 font-mono text-xs", {
+	variants: { level: {
+		log: "border-l-muted-foreground/30 bg-transparent text-foreground",
+		warn: "border-l-warning bg-warning/5 text-warning-foreground dark:text-warning",
+		error: "border-l-destructive bg-destructive/5 text-destructive"
+	} },
+	defaultVariants: { level: "log" }
+});
+const WebPreviewContext = createContext(null);
+const useWebPreview = () => {
+	const context = useContext(WebPreviewContext);
+	if (!context) throw new Error("WebPreview components must be used within a WebPreview");
+	return context;
+};
+const WebPreview = ({ className, children, defaultUrl = "", onUrlChange, ...props }) => {
+	const [history, setHistory] = useState(defaultUrl ? [defaultUrl] : []);
+	const [historyIndex, setHistoryIndex] = useState(defaultUrl ? 0 : -1);
+	const url = historyIndex >= 0 ? history[historyIndex] ?? "" : "";
+	const [consoleOpen, { open: openConsole, close: closeConsole }] = useDisclosure(false);
+	const [viewport, setViewport] = useState("desktop");
+	const [isLoading, setIsLoading] = useState(false);
+	const { ref: fullscreenRef, toggle: toggleFullscreen, fullscreen: isFullscreen } = useFullscreen();
+	const localRef = useRef(null);
+	const containerRef = useMergedRef(fullscreenRef, localRef);
+	const networkStatus = useNetwork();
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const prefersReducedMotion = useReducedMotion();
+	const setConsoleOpen = useCallback((open) => {
+		if (open) openConsole();
+		else closeConsole();
+	}, [openConsole, closeConsole]);
+	const setIsFullscreen = useCallback((fullscreen) => {
+		if (fullscreen !== isFullscreen) toggleFullscreen();
+	}, [isFullscreen, toggleFullscreen]);
+	const handleUrlChange = useCallback((newUrl) => {
+		setHistory((prev) => {
+			const next = prev.slice(0, historyIndex + 1);
+			next.push(newUrl);
+			return next;
+		});
+		setHistoryIndex((idx) => idx + 1);
+		onUrlChange?.(newUrl);
+	}, [historyIndex, onUrlChange]);
+	const goBack = useCallback(() => {
+		setHistoryIndex((idx) => idx > 0 ? idx - 1 : idx);
+	}, []);
+	const goForward = useCallback(() => {
+		setHistoryIndex((idx) => idx < history.length - 1 ? idx + 1 : idx);
+	}, [history.length]);
+	const contextValue = useMemo(() => ({
+		url,
+		setUrl: handleUrlChange,
+		consoleOpen,
+		setConsoleOpen,
+		goBack,
+		goForward,
+		canGoBack: historyIndex > 0,
+		canGoForward: historyIndex < history.length - 1 && historyIndex >= 0,
+		viewport,
+		setViewport,
+		isFullscreen,
+		setIsFullscreen,
+		toggle: () => {
+			toggleFullscreen();
+		},
+		containerRef: localRef,
+		network: {
+			online: networkStatus.online,
+			effectiveType: networkStatus.effectiveType,
+			downlink: networkStatus.downlink,
+			rtt: networkStatus.rtt
+		},
+		isTouchDevice,
+		prefersReducedMotion,
+		isLoading,
+		setIsLoading
+	}), [
+		url,
+		handleUrlChange,
+		consoleOpen,
+		setConsoleOpen,
+		goBack,
+		goForward,
+		historyIndex,
+		history.length,
+		viewport,
+		isFullscreen,
+		setIsFullscreen,
+		toggleFullscreen,
+		networkStatus.online,
+		networkStatus.effectiveType,
+		networkStatus.downlink,
+		networkStatus.rtt,
+		isTouchDevice,
+		prefersReducedMotion,
+		isLoading
+	]);
+	return /* @__PURE__ */ jsx(WebPreviewContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			"data-state": isFullscreen ? "fullscreen" : "normal",
+			"data-viewport": viewport,
+			className: cn("bg-card flex size-full flex-col border", AI_CONTAINER_RADIUS, AI_TRANSITION.all, isFullscreen && "fixed inset-0 z-50 rounded-none border-0 shadow-none", className),
+			...props,
+			children
+		})
+	});
+};
+const WebPreviewNavigation = ({ className, children, ...props }) => {
+	const { isLoading, prefersReducedMotion, isTouchDevice } = useWebPreview();
+	const progressTransition = useMemo(() => prefersReducedMotion ? { duration: .001 } : {
+		duration: .8,
+		ease: [
+			.23,
+			1,
+			.32,
+			1
+		]
+	}, [prefersReducedMotion]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-background/80 supports-[backdrop-filter]:bg-background/60", "relative flex items-center border-b backdrop-blur-md", "sticky top-0 z-10", isTouchDevice ? "gap-1 p-2" : "gap-1.5 p-2", AI_SPACING.xs, AI_TRANSITION.all, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(AnimatePresence, { children: isLoading ? /* @__PURE__ */ jsx(motion.div, {
+			className: "bg-primary absolute bottom-0 left-0 h-0.5 w-full origin-left",
+			initial: {
+				scaleX: 0,
+				opacity: 1
+			},
+			animate: {
+				scaleX: 1,
+				opacity: 1
+			},
+			exit: { opacity: 0 },
+			transition: progressTransition
+		}, "progress-bar") : null })]
+	});
+};
+const WebPreviewNavigationButton = ({ onClick, disabled, tooltip, children, className, ...props }) => {
+	const { prefersReducedMotion, isTouchDevice } = useWebPreview();
+	const tapAnimation = useMemo(() => prefersReducedMotion ? {} : { scale: .95 }, [prefersReducedMotion]);
+	const tapTransition = useMemo(() => prefersReducedMotion ? { duration: 0 } : isTouchDevice ? SPRING_TACTILE : SPRING_FLUID, [prefersReducedMotion, isTouchDevice]);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			whileTap: disabled ? void 0 : tapAnimation,
+			transition: tapTransition,
+			children: /* @__PURE__ */ jsx(Button, {
+				className: cn("hover:text-foreground hover:bg-accent/50 min-h-[44px] min-w-[44px] p-0", "active:bg-accent/70", AI_TRANSITION.colors, className),
+				"data-disabled": disabled,
+				disabled,
+				onClick,
+				size: "sm",
+				variant: "ghost",
+				...props,
+				children
+			})
+		})
+	}), tooltip ? /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) }) : null] }) });
+};
+const WebPreviewBackButton = ({ tooltip = "Back", ...props }) => {
+	const { goBack, canGoBack } = useWebPreview();
+	return /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+		disabled: !canGoBack,
+		onClick: goBack,
+		tooltip,
+		...props
+	});
+};
+const WebPreviewForwardButton = ({ tooltip = "Forward", ...props }) => {
+	const { goForward, canGoForward } = useWebPreview();
+	return /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+		disabled: !canGoForward,
+		onClick: goForward,
+		tooltip,
+		...props
+	});
+};
+const WebPreviewFullscreenToggle = ({ tooltip, ...props }) => {
+	const { isFullscreen, toggle: toggleFullscreen } = useWebPreview();
+	const dynamicTooltip = tooltip ?? (isFullscreen ? "Exit fullscreen" : "Fullscreen");
+	return /* @__PURE__ */ jsx("div", {
+		"data-state": isFullscreen ? "fullscreen" : "normal",
+		children: /* @__PURE__ */ jsxs(WebPreviewNavigationButton, {
+			"aria-pressed": isFullscreen,
+			onClick: () => void toggleFullscreen(),
+			tooltip: dynamicTooltip,
+			...props,
+			children: [isFullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, {
+				"aria-hidden": "true",
+				className: AI_ICON.md
+			}) : /* @__PURE__ */ jsx(MaximizeIcon, {
+				"aria-hidden": "true",
+				className: AI_ICON.md
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: dynamicTooltip
+			})]
+		})
+	});
+};
+const WebPreviewUrl = ({ value, onChange, onKeyDown, className, ...props }) => {
+	const { url, setUrl, isLoading, setIsLoading, prefersReducedMotion } = useWebPreview();
+	const [inputValue, setInputValue] = useInputState(url);
+	const [debouncedUrl] = useDebouncedValue(inputValue, 500);
+	const isSecure = useMemo(() => {
+		const currentValue = value ?? inputValue;
+		try {
+			return new URL(currentValue).protocol === "https:";
+		} catch {
+			return currentValue.startsWith("https://");
+		}
+	}, [value, inputValue]);
+	const iconVariants = useMemo(() => ({
+		initial: {
+			opacity: 0,
+			scale: .8,
+			rotate: -10
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			rotate: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .8,
+			rotate: 10
+		}
+	}), []);
+	const iconTransition = useMemo(() => prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE, [prefersReducedMotion]);
+	useEffect(() => {
+		setInputValue(url);
+	}, [url, setInputValue]);
+	useEffect(() => {
+		if (debouncedUrl && debouncedUrl !== url) {
+			setIsLoading(true);
+			setUrl(debouncedUrl);
+			const timer = setTimeout(() => setIsLoading(false), 800);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		debouncedUrl,
+		url,
+		setUrl,
+		setIsLoading
+	]);
+	const handleChange = useCallback((event) => {
+		setInputValue(event);
+		onChange?.(event);
+	}, [setInputValue, onChange]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter") {
+			const target = event.target;
+			setIsLoading(true);
+			setUrl(target.value);
+			setTimeout(() => setIsLoading(false), 800);
+		}
+		onKeyDown?.(event);
+	}, [
+		setUrl,
+		onKeyDown,
+		setIsLoading
+	]);
+	const currentValue = value ?? inputValue;
+	const hasUrl = currentValue.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex flex-1 items-center",
+		children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			children: hasUrl ? /* @__PURE__ */ jsx(motion.div, {
+				className: cn("pointer-events-none absolute left-2.5 z-10", isSecure ? "text-success" : "text-muted-foreground"),
+				variants: iconVariants,
+				initial: "initial",
+				animate: "animate",
+				exit: "exit",
+				transition: iconTransition,
+				children: isSecure ? /* @__PURE__ */ jsx(LockIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				}) : /* @__PURE__ */ jsx(GlobeIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			}, isSecure ? "secure" : "insecure") : null
+		}), /* @__PURE__ */ jsx(Input, {
+			"aria-label": "URL",
+			className: cn("h-9 flex-1 text-sm", hasUrl && "pl-8", AI_TRANSITION.all, className),
+			"data-loading": isLoading,
+			"data-secure": isSecure,
+			onChange: onChange ?? handleChange,
+			onKeyDown: handleKeyDown,
+			placeholder: "Enter URL…",
+			spellCheck: false,
+			autoComplete: "url",
+			type: "url",
+			value: currentValue,
+			...props
+		})]
+	});
+};
+const VIEWPORT_WIDTHS = {
+	desktop: "100%",
+	tablet: "768px",
+	mobile: "390px"
+};
+const WebPreviewBody = ({ className, loading, src, ...props }) => {
+	const { url, viewport, prefersReducedMotion, isLoading, isTouchDevice } = useWebPreview();
+	const [iframeLoaded, setIframeLoaded] = useState(false);
+	const iframeRef = useRef(null);
+	const currentSrc = src ?? url;
+	useEffect(() => {
+		setIframeLoaded(false);
+	}, [currentSrc]);
+	const handleIframeLoad = useCallback(() => {
+		setIframeLoaded(true);
+	}, []);
+	const containerVariants = useMemo(() => ({
+		initial: {
+			opacity: 0,
+			scale: .96,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .96,
+			y: -8
+		}
+	}), []);
+	const skeletonVariants = useMemo(() => ({
+		visible: { opacity: 1 },
+		hidden: { opacity: 0 }
+	}), []);
+	const iframeTitle = useMemo(() => {
+		if (!currentSrc) return "Web preview";
+		try {
+			return `Preview of ${new URL(currentSrc).hostname}`;
+		} catch {
+			return "Web preview";
+		}
+	}, [currentSrc]);
+	const viewportTransition = useMemo(() => prefersReducedMotion ? { duration: 0 } : isTouchDevice ? SPRING_TACTILE : SPRING_WEIGHTED, [prefersReducedMotion, isTouchDevice]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex h-full flex-1 items-start justify-center overflow-hidden", "overscroll-contain"),
+		id: `viewport-${viewport}`,
+		role: "tabpanel",
+		"aria-label": `${viewport} viewport preview`,
+		children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			children: /* @__PURE__ */ jsxs(motion.div, {
+				animate: "animate",
+				className: "relative h-full w-full",
+				exit: "exit",
+				initial: "initial",
+				style: { maxWidth: VIEWPORT_WIDTHS[viewport] },
+				transition: viewportTransition,
+				variants: containerVariants,
+				children: [/* @__PURE__ */ jsx(AnimatePresence, { children: (isLoading || !iframeLoaded) && currentSrc ? /* @__PURE__ */ jsx(motion.div, {
+					className: cn("bg-muted/80 absolute inset-0 z-10 flex items-center justify-center rounded-md backdrop-blur-sm", AI_TRANSITION.opacity),
+					variants: skeletonVariants,
+					initial: "visible",
+					animate: "visible",
+					exit: "hidden",
+					transition: prefersReducedMotion ? { duration: 0 } : { duration: .3 },
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex gap-1",
+							children: [
+								0,
+								1,
+								2
+							].map((i) => /* @__PURE__ */ jsx(motion.div, {
+								className: "bg-primary/60 size-2 rounded-full",
+								animate: prefersReducedMotion ? {} : {
+									scale: [
+										1,
+										1.2,
+										1
+									],
+									opacity: [
+										.5,
+										1,
+										.5
+									]
+								},
+								transition: {
+									duration: .8,
+									repeat: Infinity,
+									delay: i * .15
+								}
+							}, i))
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-sm",
+							children: "Loading preview…"
+						})]
+					})
+				}, "skeleton-overlay") : null }), /* @__PURE__ */ jsx("iframe", {
+					ref: iframeRef,
+					className: cn("h-full w-full rounded-md border", "bg-background", AI_TRANSITION.opacity, className),
+					"data-viewport": viewport,
+					"data-loaded": iframeLoaded,
+					sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation",
+					src: currentSrc ?? void 0,
+					title: iframeTitle,
+					onLoad: handleIframeLoad,
+					tabIndex: -1,
+					...props
+				})]
+			}, viewport)
+		}), loading]
+	});
+};
+const WebPreviewConsole = ({ className, logs = [], children, ...props }) => {
+	const { consoleOpen, setConsoleOpen, prefersReducedMotion } = useWebPreview();
+	const logCounts = useMemo(() => {
+		const counts = {
+			log: 0,
+			warn: 0,
+			error: 0
+		};
+		for (const log of logs) counts[log.level]++;
+		return counts;
+	}, [logs]);
+	const logItemVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			x: -10,
+			height: 0
+		},
+		visible: (i) => ({
+			opacity: 1,
+			x: 0,
+			height: "auto",
+			transition: prefersReducedMotion ? { duration: 0 } : {
+				...SPRING_GENTLE,
+				delay: i * .03
+			}
+		}),
+		exit: {
+			opacity: 0,
+			x: -10,
+			height: 0
+		}
+	}), [prefersReducedMotion]);
+	const chevronVariants = useMemo(() => ({
+		closed: { rotate: 0 },
+		open: { rotate: 180 }
+	}), []);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		className: cn("bg-muted/30 border-t font-mono text-sm", "backdrop-blur-sm", AI_TRANSITION.all, className),
+		"data-state": consoleOpen ? "open" : "closed",
+		onOpenChange: setConsoleOpen,
+		open: consoleOpen,
+		...props,
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				className: cn("hover:bg-muted/50 flex w-full items-center justify-between", "min-h-[44px] rounded-none px-3 py-2 text-left font-medium", AI_TRANSITION.colors),
+				variant: "ghost",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-foreground font-sans text-sm font-medium",
+						children: "Console"
+					}), logs.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [
+							logCounts.error > 0 && /* @__PURE__ */ jsx("span", {
+								className: "bg-destructive/15 text-destructive rounded px-1.5 py-0.5 text-xs font-medium tabular-nums",
+								children: logCounts.error
+							}),
+							logCounts.warn > 0 && /* @__PURE__ */ jsx("span", {
+								className: "bg-warning/15 text-warning rounded px-1.5 py-0.5 text-xs font-medium tabular-nums",
+								children: logCounts.warn
+							}),
+							logCounts.log > 0 && /* @__PURE__ */ jsx("span", {
+								className: "bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-xs font-medium tabular-nums",
+								children: logCounts.log
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsx(motion.div, {
+					variants: chevronVariants,
+					animate: consoleOpen ? "open" : "closed",
+					transition: prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE,
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						"aria-hidden": "true",
+						className: AI_ICON.md
+					})
+				})]
+			})
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: cn("outline-none", AI_COLLAPSIBLE.content),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("bg-background/50 max-h-48 space-y-0.5 overflow-y-auto p-2", "overscroll-contain"),
+				children: [logs.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground flex items-center justify-center py-4 font-sans text-sm",
+					children: "No console output"
+				}) : /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "popLayout",
+					children: logs.map((log, index) => /* @__PURE__ */ jsxs(motion.div, {
+						layout: true,
+						animate: "visible",
+						className: consoleLogVariants({ level: log.level }),
+						custom: index,
+						"data-level": log.level,
+						exit: "exit",
+						initial: "hidden",
+						variants: logItemVariants,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-2xs shrink-0 font-mono tabular-nums",
+							children: log.timestamp.toLocaleTimeString("en-US", {
+								hour12: false,
+								hour: "2-digit",
+								minute: "2-digit",
+								second: "2-digit"
+							})
+						}), /* @__PURE__ */ jsx("span", {
+							className: "break-all",
+							children: log.message
+						})]
+					}, `${log.timestamp.getTime()}-${log.message.slice(0, 20)}`))
+				}), children]
+			})
+		})]
+	});
+};
+const DEVICES = [
+	{
+		id: "desktop",
+		label: "Desktop",
+		icon: MonitorIcon
+	},
+	{
+		id: "tablet",
+		label: "Tablet",
+		icon: TabletIcon
+	},
+	{
+		id: "mobile",
+		label: "Mobile",
+		icon: SmartphoneIcon
+	}
+];
+const WebPreviewDeviceToggle = ({ className, ...props }) => {
+	const { viewport, setViewport, prefersReducedMotion, isTouchDevice } = useWebPreview();
+	const pillTransition = useMemo(() => prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE, [prefersReducedMotion]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-muted/50 relative flex items-center rounded-lg p-1", AI_TRANSITION.colors, className),
+		role: "tablist",
+		"aria-label": "Device viewport",
+		...props,
+		children: DEVICES.map(({ id, label, icon: Icon }) => {
+			const isActive = viewport === id;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": isActive,
+				"aria-controls": `viewport-${id}`,
+				"data-active": isActive,
+				"data-viewport": id,
+				className: cn("relative z-10 flex min-h-[36px] min-w-[44px] items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium", "transition-colors outline-none", isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground/80", AI_FOCUS.ring),
+				onClick: () => setViewport(id),
+				children: [
+					isActive ? /* @__PURE__ */ jsx(motion.div, {
+						layoutId: "viewport-indicator",
+						className: "bg-background absolute inset-0 rounded-md shadow-sm",
+						transition: pillTransition,
+						style: { zIndex: -1 }
+					}) : null,
+					/* @__PURE__ */ jsx(Icon, {
+						"aria-hidden": "true",
+						className: "size-4"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(isTouchDevice ? "sr-only" : "hidden sm:inline"),
+						children: label
+					})
+				]
+			}, id);
+		})
+	});
+};
+const WebPreviewExampleSelect = ({ examples, placeholder = "Examples" }) => {
+	const { setUrl } = useWebPreview();
+	const [selectedValue, setSelectedValue] = useState("");
+	const handleChange = useCallback((e) => {
+		if (e.target.value) {
+			setSelectedValue(e.target.value);
+			setUrl(e.target.value);
+		}
+	}, [setUrl]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", AI_SPACING.xs),
+		children: /* @__PURE__ */ jsxs("select", {
+			"aria-label": "Example URLs",
+			className: cn("bg-background min-h-[44px] rounded-md border px-2 text-sm", AI_TRANSITION.colors, AI_FOCUS.ring),
+			"data-selected": Boolean(selectedValue),
+			defaultValue: "",
+			onChange: handleChange,
+			children: [/* @__PURE__ */ jsx("option", {
+				disabled: true,
+				value: "",
+				children: placeholder
+			}), examples.map((ex) => /* @__PURE__ */ jsx("option", {
+				value: ex.url,
+				children: ex.label
+			}, ex.url))]
+		})
+	});
+};
+/**
+* WebPreviewNetworkStatus - Shows offline indicator and slow connection warnings
+*
+* Displays when:
+* - User is offline (red indicator)
+* - Connection is slow-2g or 2g (yellow warning)
+*/
+const WebPreviewNetworkStatus = ({ className, ...props }) => {
+	const { network, prefersReducedMotion } = useWebPreview();
+	const shouldShow = !network.online || network.effectiveType === "slow-2g" || network.effectiveType === "2g";
+	const isOffline = !network.online;
+	const isSlowConnection = network.effectiveType === "slow-2g" || network.effectiveType === "2g";
+	const statusVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			scale: .9,
+			y: -10
+		},
+		visible: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .9,
+			y: -10
+		}
+	}), []);
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: shouldShow ? /* @__PURE__ */ jsx(motion.div, {
+		animate: "visible",
+		exit: "exit",
+		initial: "hidden",
+		transition: prefersReducedMotion ? { duration: 0 } : SPRING_FLUID,
+		variants: statusVariants,
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium", AI_TRANSITION.colors, isOffline && "bg-destructive/10 text-destructive", !isOffline && isSlowConnection && "bg-warning/10 text-warning", className),
+				"data-state": isOffline ? "offline" : "slow",
+				"data-connection-type": network.effectiveType,
+				role: "status",
+				"aria-live": "polite",
+				...props,
+				children: [/* @__PURE__ */ jsx(WifiOffIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				}), /* @__PURE__ */ jsx("span", { children: isOffline ? "Offline" : "Slow connection" })]
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: isOffline ? /* @__PURE__ */ jsx("p", { children: "No internet connection. Preview may not load." }) : /* @__PURE__ */ jsxs("p", { children: [
+			"Slow connection (",
+			network.effectiveType,
+			"). Preview may load slowly."
+		] }) })] }) })
+	}, "network-status") : null });
+};
+
+//#endregion
+export { WebPreview, WebPreviewBackButton, WebPreviewBody, WebPreviewConsole, WebPreviewDeviceToggle, WebPreviewExampleSelect, WebPreviewForwardButton, WebPreviewFullscreenToggle, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNetworkStatus, WebPreviewUrl, consoleLogVariants };
+//# sourceMappingURL=index.mjs.map