@nationaldesignstudio/react 0.5.5 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.5.5",
+	"version": "0.6.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css"
@@ -45,21 +45,38 @@
 		"test:visual": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3100 vitest run --config vitest.visual.config.ts",
 		"test:visual:update": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3100 vitest run --config vitest.visual.config.ts --update",
 		"docker:playwright": "docker compose up playwright",
-		"docker:playwright:down": "docker compose down"
+		"docker:playwright:down": "docker compose down",
+		"release": "release-it"
 	},
 	"peerDependencies": {
+		"@cloudflare/stream-react": "^1.0.0",
+		"hls.js": "^1.5.0",
+		"lucide-react": "^0.400.0",
 		"react": "^18.0.0 || ^19.0.0",
 		"react-dom": "^18.0.0 || ^19.0.0",
 		"tailwindcss": "^4.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@cloudflare/stream-react": {
+			"optional": true
+		},
+		"hls.js": {
+			"optional": true
+		},
+		"lucide-react": {
+			"optional": true
+		}
+	},
 	"dependencies": {
 		"@base-ui-components/react": "^1.0.0-rc.0",
 		"@radix-ui/react-slot": "^1.2.4",
 		"clsx": "^2.1.1",
+		"media-chrome": "^4.0.0",
 		"tailwind-variants": "^0.3.1"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "catalog:",
+		"@cloudflare/stream-react": "^1.9.1",
 		"@figma/code-connect": "^1.3.12",
 		"@nds-design-system/tailwind-token-generator": "workspace:*",
 		"@nds-design-system/tokens": "workspace:*",
@@ -81,9 +98,12 @@
 		"@vitest/browser-playwright": "catalog:",
 		"@vitest/coverage-v8": "catalog:",
 		"globals": "catalog:",
+		"hls.js": "^1.5.17",
+		"lucide-react": "^0.511.0",
 		"playwright": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
+		"release-it": "^19.2.4",
 		"storybook": "catalog:",
 		"tailwindcss": "catalog:",
 		"tsup": "^8.5.1",

package/src/components/atoms/blurred-video-backdrop/blurred-video-backdrop.tsx

@@ -0,0 +1,447 @@
+"use client";
+
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type BlurIntensity = "low" | "medium" | "high" | "extreme";
+type OverlayType = "none" | "vignette" | "top-bottom";
+
+// ============================================================================
+// Variant Definitions
+// ============================================================================
+
+/**
+ * Blurred video backdrop wrapper variants.
+ *
+ * The wrapper extends beyond its bounds (inset: -120px) to cover
+ * blur artifacts at the edges.
+ */
+const blurredVideoBackdropVariants = tv({
+	base: [
+		"absolute",
+		"pointer-events-none",
+		"select-none",
+		"will-change-contents",
+		"transform-gpu",
+	],
+	variants: {
+		/**
+		 * Blur intensity level.
+		 * Higher values provide more diffused backgrounds.
+		 */
+		blur: {
+			low: "",
+			medium: "",
+			high: "",
+			extreme: "",
+		},
+		/**
+		 * Gradient overlay for visual depth.
+		 */
+		overlay: {
+			none: "",
+			vignette: "",
+			"top-bottom": "",
+		},
+	},
+	defaultVariants: {
+		blur: "high",
+		overlay: "none",
+	},
+});
+
+/**
+ * Canvas element styles.
+ */
+const canvasVariants = tv({
+	base: ["w-full", "h-full", "object-cover"],
+});
+
+/**
+ * Gradient overlay base styles.
+ * Gradient backgrounds are applied via inline styles to avoid arbitrary values.
+ */
+const gradientOverlayVariants = tv({
+	base: ["absolute", "inset-0", "pointer-events-none"],
+});
+
+/**
+ * Gradient overlay background styles.
+ * Using inline styles to maintain token compliance (no arbitrary values in Tailwind).
+ */
+const OVERLAY_GRADIENTS: Record<Exclude<OverlayType, "none">, string> = {
+	vignette:
+		"radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%)",
+	"top-bottom":
+		"linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%)",
+};
+
+// ============================================================================
+// Blur amount mapping
+// ============================================================================
+
+const BLUR_AMOUNTS: Record<BlurIntensity, number> = {
+	low: 40,
+	medium: 80,
+	high: 100,
+	extreme: 120,
+};
+
+// ============================================================================
+// useCanvasBlur Hook
+// ============================================================================
+
+interface UseCanvasBlurOptions {
+	/** Ref to the source video element */
+	videoRef: React.RefObject<HTMLVideoElement | null>;
+	/** Blur amount in pixels */
+	blurAmount: number;
+	/** Whether rendering is enabled */
+	enabled?: boolean;
+	/** Target FPS (lower = better performance, default: 30) */
+	targetFps?: number;
+	/** Canvas scale factor (lower = better performance, default: 0.5) */
+	scale?: number;
+}
+
+interface UseCanvasBlurReturn {
+	/** Ref to attach to the canvas element */
+	canvasRef: React.RefObject<HTMLCanvasElement | null>;
+	/** Whether the canvas is currently rendering */
+	isRendering: boolean;
+	/** Performance metrics */
+	metrics: {
+		fps: number;
+		frameTime: number;
+	};
+}
+
+/**
+ * Hook for rendering a blurred video to canvas.
+ *
+ * Performance optimizations:
+ * - Renders at reduced resolution (scale factor)
+ * - Throttled to target FPS
+ * - Uses CSS scale to fill container
+ * - Single video decoder (no sync needed)
+ */
+function useCanvasBlur({
+	videoRef,
+	blurAmount,
+	enabled = true,
+	targetFps = 30,
+	scale = 0.5,
+}: UseCanvasBlurOptions): UseCanvasBlurReturn {
+	const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
+	const ctxRef = React.useRef<CanvasRenderingContext2D | null>(null);
+	const [isRendering, setIsRendering] = React.useState(false);
+	const [metrics, setMetrics] = React.useState({ fps: 0, frameTime: 0 });
+
+	// Track when video ref is ready (it populates after mount)
+	const [videoReady, setVideoReady] = React.useState(false);
+
+	// Performance tracking refs
+	const lastFrameTimeRef = React.useRef(0);
+	const frameCountRef = React.useRef(0);
+	const fpsIntervalRef = React.useRef(0);
+
+	// Frame interval based on target FPS
+	const frameInterval = 1000 / targetFps;
+
+	// Poll for video ref to be ready (refs populate after initial render)
+	React.useEffect(() => {
+		if (!enabled) return;
+
+		const checkRef = () => {
+			if (videoRef.current && canvasRef.current) {
+				setVideoReady(true);
+			}
+		};
+
+		// Check immediately
+		checkRef();
+
+		// Also check on next frames in case elements mount after this effect
+		const frameId = requestAnimationFrame(checkRef);
+		const timeoutId = setTimeout(checkRef, 100);
+		const timeoutId2 = setTimeout(checkRef, 500);
+
+		return () => {
+			cancelAnimationFrame(frameId);
+			clearTimeout(timeoutId);
+			clearTimeout(timeoutId2);
+		};
+	}, [enabled, videoRef]);
+
+	// Main rendering effect
+	React.useEffect(() => {
+		if (!enabled || !videoReady) return;
+
+		const video = videoRef.current;
+		const canvas = canvasRef.current;
+
+		if (!video || !canvas) return;
+
+		// Initialize canvas context
+		const ctx = canvas.getContext("2d", {
+			alpha: false,
+			desynchronized: true, // Reduces latency
+		});
+
+		if (!ctx) return;
+		ctxRef.current = ctx;
+
+		let animationFrameId: number;
+		let isActive = true;
+
+		// Set canvas size based on video dimensions with scale factor
+		const updateCanvasSize = () => {
+			if (video.videoWidth && video.videoHeight) {
+				canvas.width = Math.floor(video.videoWidth * scale);
+				canvas.height = Math.floor(video.videoHeight * scale);
+			}
+		};
+
+		const render = (timestamp: number) => {
+			if (!isActive || !video || !ctx) return;
+
+			// Throttle to target FPS
+			const elapsed = timestamp - lastFrameTimeRef.current;
+
+			if (elapsed >= frameInterval) {
+				const frameStart = performance.now();
+
+				// Update canvas size if needed
+				if (canvas.width === 0 || canvas.height === 0) {
+					updateCanvasSize();
+				}
+
+				// Only draw if video has data and is playing
+				if (video.readyState >= 2 && !video.paused) {
+					// Apply blur filter and draw
+					ctx.filter = `blur(${blurAmount * scale}px)`;
+					ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+					setIsRendering(true);
+				}
+
+				// Track frame time
+				const frameTime = performance.now() - frameStart;
+				frameCountRef.current++;
+
+				// Update FPS every second
+				if (timestamp - fpsIntervalRef.current >= 1000) {
+					setMetrics({
+						fps: frameCountRef.current,
+						frameTime: Math.round(frameTime * 100) / 100,
+					});
+					frameCountRef.current = 0;
+					fpsIntervalRef.current = timestamp;
+				}
+
+				lastFrameTimeRef.current = timestamp - (elapsed % frameInterval);
+			}
+
+			animationFrameId = requestAnimationFrame(render);
+		};
+
+		// Handle video events
+		const handleLoadedMetadata = () => {
+			updateCanvasSize();
+		};
+
+		const handlePlay = () => {
+			if (isActive) {
+				animationFrameId = requestAnimationFrame(render);
+			}
+		};
+
+		const handlePause = () => {
+			setIsRendering(false);
+		};
+
+		// Add event listeners
+		video.addEventListener("loadedmetadata", handleLoadedMetadata);
+		video.addEventListener("play", handlePlay);
+		video.addEventListener("pause", handlePause);
+
+		// Initialize size if video is already loaded
+		if (video.readyState >= 1) {
+			updateCanvasSize();
+		}
+
+		// Start render loop if video is playing
+		if (!video.paused) {
+			animationFrameId = requestAnimationFrame(render);
+		}
+
+		return () => {
+			isActive = false;
+			cancelAnimationFrame(animationFrameId);
+			video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+			video.removeEventListener("play", handlePlay);
+			video.removeEventListener("pause", handlePause);
+			setIsRendering(false);
+		};
+	}, [enabled, videoReady, videoRef, blurAmount, frameInterval, scale]);
+
+	return {
+		canvasRef,
+		isRendering,
+		metrics,
+	};
+}
+
+// ============================================================================
+// BlurredVideoBackdrop Component
+// ============================================================================
+
+export interface BlurredVideoBackdropProps
+	extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+		VariantProps<typeof blurredVideoBackdropVariants> {
+	/** Ref to the primary video element to create backdrop from (required) */
+	videoRef: React.RefObject<HTMLVideoElement | null>;
+	/** Opacity of the backdrop (0-1, default: 0.6) */
+	opacity?: number;
+	/** Extension amount in pixels to cover blur artifacts (default: 120) */
+	extension?: number;
+	/** Target FPS for canvas rendering (default: 30) */
+	targetFps?: number;
+	/** Canvas scale factor - lower = better performance (default: 0.5) */
+	scale?: number;
+	/** Whether to show debug metrics */
+	showMetrics?: boolean;
+}
+
+/**
+ * BlurredVideoBackdrop - A high-performance blurred video backdrop using canvas.
+ *
+ * Renders a blurred copy of a video element to create an ambient backdrop effect.
+ * Uses canvas rendering for optimal performance - no video sync needed.
+ *
+ * Performance features:
+ * - Single video decoder (draws from existing video element)
+ * - Reduced resolution rendering (configurable scale)
+ * - Throttled frame rate (configurable FPS)
+ * - GPU-accelerated canvas scaling
+ *
+ * @example
+ * ```tsx
+ * const videoRef = useRef<HTMLVideoElement>(null);
+ *
+ * <div className="relative">
+ *   <BlurredVideoBackdrop
+ *     videoRef={videoRef}
+ *     blur="high"
+ *     overlay="vignette"
+ *   />
+ *   <VideoPlayer videoRef={videoRef} src="/video.mp4" />
+ * </div>
+ * ```
+ */
+const BlurredVideoBackdrop = React.forwardRef<
+	HTMLDivElement,
+	BlurredVideoBackdropProps
+>(
+	(
+		{
+			className,
+			videoRef,
+			blur = "high",
+			overlay = "none",
+			opacity = 0.6,
+			extension = 120,
+			targetFps = 30,
+			scale = 0.5,
+			showMetrics = false,
+			style,
+			...props
+		},
+		ref,
+	) => {
+		const blurAmount = BLUR_AMOUNTS[blur ?? "high"];
+
+		const { canvasRef, isRendering, metrics } = useCanvasBlur({
+			videoRef,
+			blurAmount,
+			enabled: true,
+			targetFps,
+			scale,
+		});
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					blurredVideoBackdropVariants({ blur, overlay }),
+					className,
+				)}
+				style={{
+					inset: `-${extension}px`,
+					opacity,
+					contain: "layout style paint",
+					...style,
+				}}
+				data-blur={blur ?? "high"}
+				data-overlay={overlay ?? "none"}
+				data-rendering={isRendering}
+				aria-hidden="true"
+				{...props}
+			>
+				<canvas
+					ref={canvasRef}
+					className={cn(
+						canvasVariants(),
+						// Scale up the low-res canvas to fill container
+						"scale-[2]", // Inverse of 0.5 scale factor
+						"origin-center",
+					)}
+					style={{
+						// Additional CSS blur for smoother appearance
+						filter: `blur(${blurAmount * 0.3}px)`,
+					}}
+				/>
+				{overlay && overlay !== "none" && (
+					<div
+						className={gradientOverlayVariants()}
+						style={{ background: OVERLAY_GRADIENTS[overlay] }}
+					/>
+				)}
+				{showMetrics && (
+					<div className="absolute bottom-8 left-8 z-10 bg-black/80 text-white typography-caption px-8 py-4 rounded-4 font-mono">
+						<div>FPS: {metrics.fps}</div>
+						<div>Frame: {metrics.frameTime}ms</div>
+						<div>Scale: {scale}x</div>
+					</div>
+				)}
+			</div>
+		);
+	},
+);
+
+BlurredVideoBackdrop.displayName = "BlurredVideoBackdrop";
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export {
+	BlurredVideoBackdrop,
+	blurredVideoBackdropVariants,
+	canvasVariants,
+	gradientOverlayVariants,
+	useCanvasBlur,
+	BLUR_AMOUNTS,
+};
+
+export type {
+	UseCanvasBlurOptions,
+	UseCanvasBlurReturn,
+	BlurIntensity,
+	OverlayType,
+};

package/src/components/atoms/button/icon-button.tsx

@@ -38,7 +38,7 @@ import { tv, type VariantProps } from "tailwind-variants";
  * - full: Fully circular
  */
 const iconButtonVariants = tv({
-	base: "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	base: "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>svg]:shrink-0",
 	variants: {
 		variant: {
 			// Primary - filled brand button
@@ -61,15 +61,21 @@ const iconButtonVariants = tv({
 				"bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
 		},
 		size: {
-			sm: "size-28 rounded-surface-button-small",
-			md: "size-40 rounded-surface-button-medium",
-			lg: "size-56 rounded-surface-button-large",
+			sm: "size-28",
+			md: "size-40",
+			lg: "size-56",
 		},
 		rounded: {
 			default: "",
 			full: "rounded-full",
 		},
 	},
+	compoundVariants: [
+		// Apply size-specific rounded only when rounded is "default"
+		{ size: "sm", rounded: "default", class: "rounded-surface-button-small" },
+		{ size: "md", rounded: "default", class: "rounded-surface-button-medium" },
+		{ size: "lg", rounded: "default", class: "rounded-surface-button-large" },
+	],
 	defaultVariants: {
 		variant: "primary",
 		size: "md",