From bfa425b262379be5a8e856a36aeacde9e82ef5f2 Mon Sep 17 00:00:00 2001
From: Mahdy Arief <mahdyarief@gmail.com>
Date: Sun, 29 Mar 2026 09:46:49 +0700
Subject: [PATCH 1/4] feat(editor): implement blur annotation with CSS-driven
 preview and robust canvas export pipeline

---
 .../video-editor/AnnotationOverlay.tsx        |  17 ++-
 .../video-editor/AnnotationSettingsPanel.tsx  |  49 +++++-
 src/components/video-editor/SettingsPanel.tsx |  15 +-
 src/components/video-editor/VideoEditor.tsx   |  92 ++++++-----
 src/components/video-editor/VideoPlayback.tsx |  39 ++---
 src/components/video-editor/types.ts          |   3 +-
 src/lib/exporter/annotationRenderer.ts        | 143 +++++++++++++-----
 7 files changed, 246 insertions(+), 112 deletions(-)

diff --git a/src/components/video-editor/AnnotationOverlay.tsx b/src/components/video-editor/AnnotationOverlay.tsx
index 3260a542..31b2e043 100644
--- a/src/components/video-editor/AnnotationOverlay.tsx
+++ b/src/components/video-editor/AnnotationOverlay.tsx
@@ -50,8 +50,8 @@ export function AnnotationOverlay({
           <div
             className="w-full h-full flex items-center p-2 overflow-hidden"
             style={{
-              justifyContent: annotation.style.textAlign === 'left' ? 'flex-start' : 
-                            annotation.style.textAlign === 'right' ? 'flex-end' : 'center',
+              justifyContent: annotation.style.textAlign === 'left' ? 'flex-start' :
+                annotation.style.textAlign === 'right' ? 'flex-end' : 'center',
               alignItems: 'center',
             }}
           >
@@ -111,6 +111,17 @@ export function AnnotationOverlay({
           </div>
         );
 
+      case 'blur':
+        return (
+          <div 
+            className="w-full h-full rounded-lg backdrop-blur-md"
+            style={{ 
+              backdropFilter: `blur(${annotation.blurIntensity ?? 12}px)`,
+              WebkitBackdropFilter: `blur(${annotation.blurIntensity ?? 12}px)`
+            }} 
+          />
+        );
+
       default:
         return null;
     }
@@ -127,7 +138,7 @@ export function AnnotationOverlay({
         const xPercent = (d.x / containerWidth) * 100;
         const yPercent = (d.y / containerHeight) * 100;
         onPositionChange(annotation.id, { x: xPercent, y: yPercent });
-        
+
         // Reset dragging flag after a short delay to prevent click event
         setTimeout(() => {
           isDraggingRef.current = false;
diff --git a/src/components/video-editor/AnnotationSettingsPanel.tsx b/src/components/video-editor/AnnotationSettingsPanel.tsx
index 2cddf970..2dbb8e67 100644
--- a/src/components/video-editor/AnnotationSettingsPanel.tsx
+++ b/src/components/video-editor/AnnotationSettingsPanel.tsx
@@ -21,6 +21,7 @@ interface AnnotationSettingsPanelProps {
   onTypeChange: (type: AnnotationType) => void;
   onStyleChange: (style: Partial<AnnotationRegion['style']>) => void;
   onFigureDataChange?: (figureData: FigureData) => void;
+  onBlurIntensityChange?: (intensity: number) => void;
   onDelete: () => void;
 }
 
@@ -43,6 +44,7 @@ export function AnnotationSettingsPanel({
   onTypeChange,
   onStyleChange,
   onFigureDataChange,
+  onBlurIntensityChange,
   onDelete,
 }: AnnotationSettingsPanelProps) {
   const t = useScopedT('editor');
@@ -128,21 +130,29 @@ export function AnnotationSettingsPanel({
         
         {/* Type Selector */}
         <Tabs value={annotation.type} onValueChange={(value) => onTypeChange(value as AnnotationType)} className="mb-6">
-          <TabsList className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
-            <TabsTrigger value="text" className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2">
-              <Type className="w-4 h-4" />
+          <TabsList className="mb-4 bg-white/[0.03] border border-white/[0.06] p-0.5 w-full grid grid-cols-4 h-10 rounded-xl backdrop-blur-sm">
+            <TabsTrigger value="text" className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]">
+              <Type className="w-3.5 h-3.5" />
               {t('annotations.text')}
             </TabsTrigger>
-            <TabsTrigger value="image" className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2">
-              <ImageIcon className="w-4 h-4" />
+            <TabsTrigger value="image" className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]">
+              <ImageIcon className="w-3.5 h-3.5" />
               {t('annotations.image')}
             </TabsTrigger>
-            <TabsTrigger value="figure" className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2">
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <TabsTrigger value="figure" className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]">
+              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                 <path d="M4 12h16m0 0l-6-6m6 6l-6 6" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
               {t('annotations.arrow')}
             </TabsTrigger>
+            <TabsTrigger value="blur" className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]">
+              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="9" className="opacity-30" />
+                <circle cx="12" cy="12" r="5" className="opacity-60" />
+                <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+              </svg>
+              {t('annotations.blur', 'Blur')}
+            </TabsTrigger>
           </TabsList>
 
           {/* Text Content */}
@@ -499,6 +509,31 @@ export function AnnotationSettingsPanel({
               </Popover>
             </div>
           </TabsContent>
+          <TabsContent value="blur" className="mt-0 space-y-4">
+            <div className="bg-white/[0.03] border border-white/[0.06] rounded-xl p-4 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <label className="text-xs font-semibold text-slate-200 uppercase tracking-widest opacity-80">
+                  {t('annotations.blurIntensity', 'Intensity')}
+                </label>
+                <span className="text-xs font-mono font-bold text-[#3B82F6] bg-[#3B82F6]/10 px-2 py-0.5 rounded-md border border-[#3B82F6]/20">
+                  {annotation.blurIntensity ?? 12}%
+                </span>
+              </div>
+              <Slider
+                value={[annotation.blurIntensity ?? 12]}
+                onValueChange={([value]) => {
+                  onBlurIntensityChange?.(value);
+                }}
+                min={1}
+                max={100}
+                step={1}
+                className="w-full"
+              />
+              <p className="text-[10px] text-slate-500 mt-4 leading-relaxed font-medium">
+                {t('annotations.blurDescription', 'Obscure sensitive information by blurring the underlying video content.')}
+              </p>
+            </div>
+          </TabsContent>
         </Tabs>
 
         <Button
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index d0b2d656..62c0c4bf 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -208,6 +208,7 @@ interface SettingsPanelProps {
 	onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
 	onAnnotationStyleChange?: (id: string, style: Partial<AnnotationRegion["style"]>) => void;
 	onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
+	onAnnotationBlurIntensityChange?: (id: string, intensity: number) => void;
 	onAnnotationDelete?: (id: string) => void;
 	autoCaptions?: CaptionCue[];
 	autoCaptionSettings?: AutoCaptionSettings;
@@ -545,6 +546,7 @@ export function SettingsPanel({
 	onAnnotationTypeChange,
 	onAnnotationStyleChange,
 	onAnnotationFigureDataChange,
+	onAnnotationBlurIntensityChange,
 	onAnnotationDelete,
 	autoCaptions = [],
 	autoCaptionSettings = DEFAULT_AUTO_CAPTION_SETTINGS,
@@ -1171,15 +1173,20 @@ export function SettingsPanel({
 		return (
 			<AnnotationSettingsPanel
 				annotation={selectedAnnotation}
-				onContentChange={(content) => onAnnotationContentChange(selectedAnnotation.id, content)}
-				onTypeChange={(type) => onAnnotationTypeChange(selectedAnnotation.id, type)}
-				onStyleChange={(style) => onAnnotationStyleChange(selectedAnnotation.id, style)}
+				onContentChange={(content) => onAnnotationContentChange?.(selectedAnnotation.id, content)}
+				onTypeChange={(type) => onAnnotationTypeChange?.(selectedAnnotation.id, type)}
+				onStyleChange={(style) => onAnnotationStyleChange?.(selectedAnnotation.id, style)}
 				onFigureDataChange={
 					onAnnotationFigureDataChange
 						? (figureData) => onAnnotationFigureDataChange(selectedAnnotation.id, figureData)
 						: undefined
 				}
-				onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
+				onBlurIntensityChange={
+					onAnnotationBlurIntensityChange
+						? (intensity) => onAnnotationBlurIntensityChange(selectedAnnotation.id, intensity)
+						: undefined
+				}
+				onDelete={() => onAnnotationDelete?.(selectedAnnotation.id)}
 			/>
 		);
 	}
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 17e77c19..b273571a 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1284,9 +1284,9 @@ export default function VideoEditor() {
 		() =>
 			Boolean(
 				currentProjectPath &&
-					currentProjectSnapshot &&
-					lastSavedSnapshot &&
-					!areDeepEqual(currentProjectSnapshot, lastSavedSnapshot),
+				currentProjectSnapshot &&
+				lastSavedSnapshot &&
+				!areDeepEqual(currentProjectSnapshot, lastSavedSnapshot),
 			),
 		[currentProjectPath, currentProjectSnapshot, lastSavedSnapshot],
 	);
@@ -1967,10 +1967,10 @@ export default function VideoEditor() {
 			prev.map((region) =>
 				region.id === id
 					? {
-							...region,
-							startMs: Math.round(span.start),
-							endMs: Math.round(span.end),
-						}
+						...region,
+						startMs: Math.round(span.start),
+						endMs: Math.round(span.end),
+					}
 					: region,
 			),
 		);
@@ -1981,10 +1981,10 @@ export default function VideoEditor() {
 			prev.map((region) =>
 				region.id === id
 					? {
-							...region,
-							startMs: Math.round(span.start),
-							endMs: Math.round(span.end),
-						}
+						...region,
+						startMs: Math.round(span.start),
+						endMs: Math.round(span.end),
+					}
 					: region,
 			),
 		);
@@ -1995,9 +1995,9 @@ export default function VideoEditor() {
 			prev.map((region) =>
 				region.id === id
 					? {
-							...region,
-							focus: clampFocusToDepth(focus, region.depth),
-						}
+						...region,
+						focus: clampFocusToDepth(focus, region.depth),
+					}
 					: region,
 			),
 		);
@@ -2010,10 +2010,10 @@ export default function VideoEditor() {
 				prev.map((region) =>
 					region.id === selectedZoomId
 						? {
-								...region,
-								depth,
-								focus: clampFocusToDepth(region.focus, depth),
-							}
+							...region,
+							depth,
+							focus: clampFocusToDepth(region.focus, depth),
+						}
 						: region,
 				),
 			);
@@ -2071,10 +2071,10 @@ export default function VideoEditor() {
 			prev.map((region) =>
 				region.id === id
 					? {
-							...region,
-							startMs: Math.round(span.start),
-							endMs: Math.round(span.end),
-						}
+						...region,
+						startMs: Math.round(span.start),
+						endMs: Math.round(span.end),
+					}
 					: region,
 			),
 		);
@@ -2122,10 +2122,10 @@ export default function VideoEditor() {
 			prev.map((region) =>
 				region.id === id
 					? {
-							...region,
-							startMs: Math.round(span.start),
-							endMs: Math.round(span.end),
-						}
+						...region,
+						startMs: Math.round(span.start),
+						endMs: Math.round(span.end),
+					}
 					: region,
 			),
 		);
@@ -2176,10 +2176,10 @@ export default function VideoEditor() {
 			prev.map((region) =>
 				region.id === id
 					? {
-							...region,
-							startMs: Math.round(span.start),
-							endMs: Math.round(span.end),
-						}
+						...region,
+						startMs: Math.round(span.start),
+						endMs: Math.round(span.end),
+					}
 					: region,
 			),
 		);
@@ -2230,6 +2230,11 @@ export default function VideoEditor() {
 					if (!region.figureData) {
 						updatedRegion.figureData = { ...DEFAULT_FIGURE_DATA };
 					}
+				} else if (type === "blur") {
+					updatedRegion.content = "Blur Region";
+					if (updatedRegion.blurIntensity === undefined) {
+						updatedRegion.blurIntensity = 12;
+					}
 				}
 
 				return updatedRegion;
@@ -2255,6 +2260,12 @@ export default function VideoEditor() {
 		);
 	}, []);
 
+	const handleAnnotationBlurIntensityChange = useCallback((id: string, blurIntensity: number) => {
+		setAnnotationRegions((prev) =>
+			prev.map((region) => (region.id === id ? { ...region, blurIntensity } : region)),
+		);
+	}, []);
+
 	const handleAnnotationPositionChange = useCallback(
 		(id: string, position: { x: number; y: number }) => {
 			setAnnotationRegions((prev) =>
@@ -2786,12 +2797,12 @@ export default function VideoEditor() {
 			gifConfig:
 				exportFormat === "gif"
 					? {
-							frameRate: gifFrameRate,
-							loop: gifLoop,
-							sizePreset: gifSizePreset,
-							width: gifDimensions.width,
-							height: gifDimensions.height,
-						}
+						frameRate: gifFrameRate,
+						loop: gifLoop,
+						sizePreset: gifSizePreset,
+						width: gifDimensions.width,
+						height: gifDimensions.height,
+					}
 					: undefined,
 		};
 
@@ -2908,11 +2919,11 @@ export default function VideoEditor() {
 			? t("editor.exportStatus.saving", "Opening save dialog...")
 			: isExportFinalizing && typeof exportProgress.renderProgress === "number"
 				? t("editor.exportStatus.finalizingPercent", "Finalizing {{percent}}%", {
-						percent: Math.round(exportProgress.renderProgress),
-					})
+					percent: Math.round(exportProgress.renderProgress),
+				})
 				: t("editor.exportStatus.completePercent", "{{percent}}% complete", {
-						percent: Math.round(exportProgress.percentage),
-					})
+					percent: Math.round(exportProgress.percentage),
+				})
 		: t("editor.exportStatus.preparing", "Preparing export...");
 
 	const projectBrowser = (
@@ -3478,6 +3489,7 @@ export default function VideoEditor() {
 						onAnnotationTypeChange={handleAnnotationTypeChange}
 						onAnnotationStyleChange={handleAnnotationStyleChange}
 						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+						onAnnotationBlurIntensityChange={handleAnnotationBlurIntensityChange}
 						onAnnotationDelete={handleAnnotationDelete}
 						selectedSpeedId={selectedSpeedId}
 						selectedSpeedValue={
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 55431df1..d76996ab 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -291,6 +291,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
     const captionBoxRef = useRef<HTMLDivElement | null>(null);
     const currentTimeRef = useRef(0);
     const zoomRegionsRef = useRef<ZoomRegion[]>([]);
+    const annotationRegionsRef = useRef<AnnotationRegion[]>([]);
     const selectedZoomIdRef = useRef<string | null>(null);
     const animationStateRef = useRef<PlaybackAnimationState>(
       createPlaybackAnimationState(),
@@ -433,13 +434,13 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
       const margin = webcam.margin ?? 24;
       const scaledSize = getWebcamOverlaySizePx({
-    		containerWidth: overlay.clientWidth,
-    		containerHeight: overlay.clientHeight,
-      		sizePercent: webcam.size ?? DEFAULT_WEBCAM_SIZE,
-    		margin,
-    		zoomScale,
-      		reactToZoom: webcam.reactToZoom ?? DEFAULT_WEBCAM_REACT_TO_ZOOM,
-    	});
+        containerWidth: overlay.clientWidth,
+        containerHeight: overlay.clientHeight,
+        sizePercent: webcam.size ?? DEFAULT_WEBCAM_SIZE,
+        margin,
+        zoomScale,
+        reactToZoom: webcam.reactToZoom ?? DEFAULT_WEBCAM_REACT_TO_ZOOM,
+      });
       const { x, y } = getWebcamOverlayPosition({
         containerWidth: overlay.clientWidth,
         containerHeight: overlay.clientHeight,
@@ -567,8 +568,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
         const selectedId = selectedZoomIdRef.current;
         const activeRegion = selectedId
           ? (zoomRegionsRef.current.find(
-              (region) => region.id === selectedId,
-            ) ?? null)
+            (region) => region.id === selectedId,
+          ) ?? null)
           : null;
 
         updateOverlayForRegion(activeRegion);
@@ -635,9 +636,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
           restoreTime > epsilon
             ? restoreTime - epsilon
             : Math.min(
-                duration || restoreTime + epsilon,
-                restoreTime + epsilon,
-              );
+              duration || restoreTime + epsilon,
+              restoreTime + epsilon,
+            );
 
         if (Math.abs(nudgeTarget - restoreTime) < 0.000001) {
           return;
@@ -726,7 +727,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
       isDraggingFocusRef.current = false;
       try {
         event.currentTarget.releasePointerCapture(event.pointerId);
-      } catch {}
+      } catch { }
     };
 
     const handleOverlayPointerUp = (
@@ -743,7 +744,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
     useEffect(() => {
       zoomRegionsRef.current = zoomRegions;
-    }, [zoomRegions]);
+      annotationRegionsRef.current = annotationRegions;
+    }, [zoomRegions, annotationRegions]);
 
     useEffect(() => {
       selectedZoomIdRef.current = selectedZoomId;
@@ -902,7 +904,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
         requestAnimationFrame(() => {
           const finalApp = appRef.current;
           if (wasPlaying && video) {
-            video.play().catch(() => {});
+            video.play().catch(() => { });
           }
           if (tickerWasStarted && finalApp?.ticker) {
             finalApp.ticker.start();
@@ -974,7 +976,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
       if (isPlaying) {
         const playPromise = webcamVideo.play();
         if (playPromise) {
-          playPromise.catch(() => {});
+          playPromise.catch(() => { });
         }
       } else {
         webcamVideo.pause();
@@ -1132,8 +1134,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
       const app = appRef.current;
       const videoContainer = videoContainerRef.current;
       const cursorContainer = cursorContainerRef.current;
+      const cameraContainer = cameraContainerRef.current;
 
-      if (!video || !app || !videoContainer || !cursorContainer) return;
+      if (!video || !app || !videoContainer || !cursorContainer || !cameraContainer) return;
       if (video.videoWidth === 0 || video.videoHeight === 0) return;
 
       const source = VideoSource.from(video);
@@ -1317,7 +1320,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
               scale:
                 startTransform.scale +
                 (endTransform.scale - startTransform.scale) *
-                  transition.progress,
+                transition.progress,
               x:
                 startTransform.x +
                 (endTransform.x - startTransform.x) * transition.progress,
diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts
index 5406210c..acfdc00d 100644
--- a/src/components/video-editor/types.ts
+++ b/src/components/video-editor/types.ts
@@ -127,7 +127,7 @@ export interface TrimRegion {
 	endMs: number;
 }
 
-export type AnnotationType = "text" | "image" | "figure";
+export type AnnotationType = "text" | "image" | "figure" | "blur";
 
 export type ArrowDirection =
 	| "up"
@@ -195,6 +195,7 @@ export interface AnnotationRegion {
 	style: AnnotationTextStyle;
 	zIndex: number;
 	figureData?: FigureData;
+	blurIntensity?: number;
 }
 
 export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {
diff --git a/src/lib/exporter/annotationRenderer.ts b/src/lib/exporter/annotationRenderer.ts
index 0df4541c..8b1654d7 100644
--- a/src/lib/exporter/annotationRenderer.ts
+++ b/src/lib/exporter/annotationRenderer.ts
@@ -47,7 +47,7 @@ const ARROW_PATHS: Record<ArrowDirection, string[]> = {
 function parseSvgPath(pathString: string, scaleX: number, scaleY: number): Array<{ cmd: string; args: number[] }> {
   const commands: Array<{ cmd: string; args: number[] }> = [];
   const parts = pathString.trim().split(/\s+/);
-  
+
   let i = 0;
   while (i < parts.length) {
     const cmd = parts[i];
@@ -60,7 +60,7 @@ function parseSvgPath(pathString: string, scaleX: number, scaleY: number): Array
       i++;
     }
   }
-  
+
   return commands;
 }
 
@@ -81,36 +81,36 @@ function renderArrow(
 
   ctx.save();
   ctx.translate(x, y);
-  
+
   const padding = 8 * _scaleFactor;
   const availableWidth = Math.max(0, width - padding * 2);
   const availableHeight = Math.max(0, height - padding * 2);
 
   const scale = Math.min(availableWidth / 100, availableHeight / 100);
-  
+
   const offsetX = padding + (availableWidth - 100 * scale) / 2;
   const offsetY = padding + (availableHeight - 100 * scale) / 2;
-  
+
   // Apply centering offset
   ctx.translate(offsetX, offsetY);
-  
+
   // Apply shadow filter
   ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
-  ctx.shadowBlur = 8 * scale; 
+  ctx.shadowBlur = 8 * scale;
   ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 4 * scale; 
-  
+  ctx.shadowOffsetY = 4 * scale;
+
   ctx.strokeStyle = color;
   ctx.lineWidth = strokeWidth * scale;
   ctx.lineCap = 'round';
   ctx.lineJoin = 'round';
-  
+
   // Draw all paths as a single shape to avoid overlapping shadows/strokes
   ctx.beginPath();
-  
+
   for (const pathString of paths) {
     const commands = parseSvgPath(pathString, scale, scale);
-    
+
 
     for (const { cmd, args } of commands) {
       if (cmd === 'M') {
@@ -120,9 +120,9 @@ function renderArrow(
       }
     }
   }
-  
+
   ctx.stroke();
-  
+
   ctx.restore();
 }
 
@@ -136,7 +136,7 @@ function renderText(
   scaleFactor: number
 ) {
   const style = annotation.style;
-  
+
   ctx.save();
 
   // Clip text to annotation box bounds (matches editor's overflow: hidden)
@@ -149,12 +149,12 @@ function renderText(
   const scaledFontSize = style.fontSize * scaleFactor;
   ctx.font = `${fontStyle} ${fontWeight} ${scaledFontSize}px ${style.fontFamily}`;
   ctx.textBaseline = 'middle';
-  
+
   const containerPadding = 8 * scaleFactor;
-  
+
   let textX = x;
   let textY = y + height / 2;
-  
+
   if (style.textAlign === 'center') {
     textX = x + width / 2;
     ctx.textAlign = 'center';
@@ -165,7 +165,7 @@ function renderText(
     textX = x + containerPadding;
     ctx.textAlign = 'left';
   }
-  
+
   const availableWidth = width - containerPadding * 2;
   const rawLines = annotation.content.split('\n');
   const lines: string[] = [];
@@ -190,49 +190,49 @@ function renderText(
   const lineHeight = scaledFontSize * 1.4;
 
   const startY = textY - ((lines.length - 1) * lineHeight) / 2;
-  
+
   lines.forEach((line, index) => {
     const currentY = startY + index * lineHeight;
-    
+
     if (style.backgroundColor && style.backgroundColor !== 'transparent') {
       const metrics = ctx.measureText(line);
       const verticalPadding = scaledFontSize * 0.1;
       const horizontalPadding = scaledFontSize * 0.2;
       const borderRadius = 4 * scaleFactor;
-      
+
       let bgX = textX - horizontalPadding;
       const bgWidth = metrics.width + horizontalPadding * 2;
-      
+
       const contentHeight = scaledFontSize * 1.4;
       const bgHeight = contentHeight + verticalPadding * 2;
       const bgY = currentY - bgHeight / 2;
-      
+
       if (style.textAlign === 'center') {
         bgX = textX - bgWidth / 2;
       } else if (style.textAlign === 'right') {
         bgX = textX - bgWidth;
       }
-      
+
       ctx.fillStyle = style.backgroundColor;
       ctx.beginPath();
       ctx.roundRect(bgX, bgY, bgWidth, bgHeight, borderRadius);
       ctx.fill();
     }
-    
+
     ctx.fillStyle = style.color;
     ctx.fillText(line, textX, currentY);
-    
+
     if (style.textDecoration === 'underline') {
       const metrics = ctx.measureText(line);
       let underlineX = textX;
       const underlineY = currentY + scaledFontSize * 0.15;
-      
+
       if (style.textAlign === 'center') {
         underlineX = textX - metrics.width / 2;
       } else if (style.textAlign === 'right') {
         underlineX = textX - metrics.width;
       }
-      
+
       ctx.strokeStyle = style.color;
       ctx.lineWidth = Math.max(1, scaledFontSize / 16);
       ctx.beginPath();
@@ -241,7 +241,7 @@ function renderText(
       ctx.stroke();
     }
   });
-  
+
   ctx.restore();
 }
 
@@ -256,19 +256,19 @@ async function renderImage(
   if (!annotation.content || !annotation.content.startsWith('data:image')) {
     return;
   }
-  
+
   return new Promise((resolve) => {
     const img = new Image();
     img.onload = () => {
       // Preserve aspect ratio - contain the image within the bounds
       const imgAspect = img.width / img.height;
       const boxAspect = width / height;
-      
+
       let drawWidth = width;
       let drawHeight = height;
       let drawX = x;
       let drawY = y;
-      
+
       if (imgAspect > boxAspect) {
 
         drawHeight = width / imgAspect;
@@ -277,7 +277,7 @@ async function renderImage(
         drawWidth = height * imgAspect;
         drawX = x + (width - drawWidth) / 2;
       }
-      
+
       ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
       resolve();
     };
@@ -301,25 +301,25 @@ export async function renderAnnotations(
   const activeAnnotations = annotations.filter(
     (ann) => currentTimeMs >= ann.startMs && currentTimeMs <= ann.endMs
   );
-  
+
   // Sort by z-index (lower first, so higher z-index draws on top)
   const sortedAnnotations = [...activeAnnotations].sort((a, b) => a.zIndex - b.zIndex);
-  
+
   for (const annotation of sortedAnnotations) {
     const x = (annotation.position.x / 100) * canvasWidth;
     const y = (annotation.position.y / 100) * canvasHeight;
     const width = (annotation.size.width / 100) * canvasWidth;
     const height = (annotation.size.height / 100) * canvasHeight;
-    
+
     switch (annotation.type) {
       case 'text':
         renderText(ctx, annotation, x, y, width, height, scaleFactor);
         break;
-        
+
       case 'image':
         await renderImage(ctx, annotation, x, y, width, height);
         break;
-        
+
       case 'figure':
         if (annotation.figureData) {
           renderArrow(
@@ -335,7 +335,72 @@ export async function renderAnnotations(
           );
         }
         break;
+
+      case 'blur':
+        renderBlur(ctx, annotation, x, y, width, height, scaleFactor);
+        break;
     }
   }
 }
 
+function renderBlur(
+  ctx: CanvasRenderingContext2D,
+  annotation: AnnotationRegion,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  scaleFactor: number
+) {
+  // Get intensity scaled to canvas resolution
+  const intensity = (annotation.blurIntensity ?? 12) * scaleFactor;
+  if (intensity <= 0 || width <= 0 || height <= 0) return;
+
+  ctx.save();
+  try {
+    // Determine bounds and ensure they are within canvas to avoid ImageData errors
+    const srcX = Math.max(0, x);
+    const srcY = Math.max(0, y);
+    const srcWidth = Math.min(x + width, ctx.canvas.width) - srcX;
+    const srcHeight = Math.min(y + height, ctx.canvas.height) - srcY;
+
+    if (srcWidth <= 0 || srcHeight <= 0) {
+      ctx.restore();
+      return;
+    }
+
+    // Capture the current canvas region precisely for this intersection
+    const imageData = ctx.getImageData(srcX, srcY, srcWidth, srcHeight);
+    
+    let offscreen: HTMLCanvasElement | OffscreenCanvas;
+    if (typeof document !== 'undefined') {
+      offscreen = document.createElement('canvas');
+    } else {
+      offscreen = new OffscreenCanvas(srcWidth, srcHeight);
+    }
+    offscreen.width = srcWidth;
+    offscreen.height = srcHeight;
+    
+    const offCtx = offscreen.getContext('2d') as CanvasRenderingContext2D;
+    offCtx.putImageData(imageData, 0, 0);
+
+    // Create rounded rect clipping path (matches UI's rounded-lg approx 8px)
+    const radius = 8 * scaleFactor;
+    ctx.beginPath();
+    if (ctx.roundRect) {
+      ctx.roundRect(x, y, width, height, radius);
+    } else {
+      ctx.rect(x, y, width, height);
+    }
+    ctx.clip();
+
+    // Apply the blur filter and draw the captured region back at its source position
+    ctx.filter = `blur(${intensity}px)`;
+    ctx.drawImage(offscreen as any, srcX, srcY);
+
+  } catch (err) {
+    console.warn('[AnnotationRenderer] Blur annotation render failed:', err);
+  }
+  ctx.restore();
+}
+

From 9c9e8ec8e1640e09b938c684768fa46a168180ce Mon Sep 17 00:00:00 2001
From: Mahdy Arief <mahdyarief@gmail.com>
Date: Sun, 29 Mar 2026 09:50:21 +0700
Subject: [PATCH 2/4] feat(editor): moved cursor rendering to top-level canvas
 to ensure it sits above annotations

---
 src/components/video-editor/VideoPlayback.tsx | 66 +++++++++++++++----
 1 file changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index d76996ab..dd085c23 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -48,6 +48,8 @@ import {
   DEFAULT_CURSOR_CONFIG,
   PixiCursorOverlay,
   preloadCursorAssets,
+  drawCursorOnCanvas,
+  SmoothedCursorState,
 } from "./videoPlayback/cursorRenderer";
 import {
   buildActiveCaptionLayout,
@@ -300,6 +302,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
     const motionBlurFilterRef = useRef<MotionBlurFilter | null>(null);
     const isDraggingFocusRef = useRef(false);
     const stageSizeRef = useRef({ width: 0, height: 0 });
+    const cursorCanvasRef = useRef<HTMLCanvasElement | null>(null);
+    const smoothedCursorStateRef = useRef<SmoothedCursorState | null>(null);
     const videoSizeRef = useRef({ width: 0, height: 0 });
     const baseScaleRef = useRef(1);
     const baseOffsetRef = useRef({ x: 0, y: 0 });
@@ -1156,9 +1160,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
       videoContainer.addChild(maskGraphics);
       videoContainer.mask = maskGraphics;
       maskGraphicsRef.current = maskGraphics;
-      if (cursorOverlayRef.current) {
-        cursorContainer.addChild(cursorOverlayRef.current.container);
-      }
+
+      smoothedCursorStateRef.current = new SmoothedCursorState(DEFAULT_CURSOR_CONFIG);
 
       animationStateRef.current = createPlaybackAnimationState();
 
@@ -1392,17 +1395,46 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
         );
         applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
 
-        // Update cursor overlay
-        const cursorOverlay = cursorOverlayRef.current;
-        if (cursorOverlay) {
+        // Update cursor overlay on separate top-level canvas
+        const cursorCanvas = cursorCanvasRef.current;
+        const smoothedState = smoothedCursorStateRef.current;
+        if (cursorCanvas && smoothedState && cursorTelemetryRef.current && showCursorRef.current) {
           const timeMs = currentTimeRef.current;
-          cursorOverlay.update(
-            cursorTelemetryRef.current,
-            timeMs,
-            baseMaskRef.current,
-            showCursorRef.current,
-            !isPlayingRef.current || isSeekingRef.current,
-          );
+          const ctx = cursorCanvas.getContext('2d');
+          if (ctx) {
+            // Match canvas size to container
+            if (cursorCanvas.width !== cursorCanvas.clientWidth || cursorCanvas.height !== cursorCanvas.clientHeight) {
+              cursorCanvas.width = cursorCanvas.clientWidth;
+              cursorCanvas.height = cursorCanvas.clientHeight;
+            }
+            
+            ctx.clearRect(0, 0, cursorCanvas.width, cursorCanvas.height);
+            
+            // Draw cursor on top using utility
+            drawCursorOnCanvas(
+              ctx,
+              cursorTelemetryRef.current,
+              timeMs,
+              {
+                x: 0,
+                y: 0,
+                width: cursorCanvas.width,
+                height: cursorCanvas.height,
+                sourceCrop: cropRegion,
+              },
+              smoothedState,
+              {
+                ...DEFAULT_CURSOR_CONFIG,
+                style: cursorStyle,
+                dotRadius: 28 * cursorSize, // Matches Pixi scaling approx
+                smoothingFactor: cursorSmoothing,
+                motionBlur: cursorMotionBlur,
+                clickBounce: cursorClickBounce,
+                clickBounceDuration: cursorClickBounceDuration,
+                sway: cursorSway,
+              }
+            );
+          }
         }
       };
 
@@ -1779,6 +1811,14 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
                 />
               ));
             })()}
+            {/* Top-level Cursor Layer (on top of all annotations) */}
+            {showCursor && (
+              <canvas
+                ref={cursorCanvasRef}
+                className="absolute inset-0 pointer-events-none w-full h-full"
+                style={{ zIndex: 10000 }} // Ensure it's above any annotation zIndex
+              />
+            )}
           </div>
         )}
         <video

From a50cc541811a96d3e9feddbcecb3888b8756c4bf Mon Sep 17 00:00:00 2001
From: Mahdy Arief <mahdyarief@gmail.com>
Date: Sun, 29 Mar 2026 10:04:15 +0700
Subject: [PATCH 3/4] chore: resolve .gitignore conflict

---
 .gitignore                                    |  59 ++++++++++--------
 .../native/bin/win32-x64/cursor-monitor.exe   | Bin 26112 -> 26112 bytes
 .../bin/win32-x64/helpers-manifest.json       |   8 +--
 electron/native/bin/win32-x64/wgc-capture.exe | Bin 92160 -> 92160 bytes
 package-lock.json                             |   4 +-
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/.gitignore b/.gitignore
index bc75a52a..b5c86640 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,32 +3,32 @@ logs
 *.log
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-electron
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-release/**
-*.kiro/
-# npx electron-builder --mac --win
-.tmp/
-.history/
-*.tsbuildinfo
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-electron
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+release/**
+*.kiro/
+# npx electron-builder --mac --win
+.tmp/
+.history/
+*.tsbuildinfo
 vite.config.js
 vite.config.d.ts
 
@@ -36,6 +36,13 @@ vite.config.d.ts
 electron/native/wgc-capture/build/
 electron/native/cursor-monitor/build/
 
+# Local build tools and caches
+.cache/
+.cmake_ext/
+ebcache/
+docs/
+recordly_dev/
+
 # Local debug helpers
 tmp-*.ps1
 .tmp-*.ps1
diff --git a/electron/native/bin/win32-x64/cursor-monitor.exe b/electron/native/bin/win32-x64/cursor-monitor.exe
index 68f2e54f49fc6cb11315445d03cde1cf8afeac9a..97d7a92d549c5d77501741aa0592011a679b8b56 100644
GIT binary patch
delta 137
zcmZoT!`N_!aY94JrnlGlzxC{hf#LsOv}1k&`Gu^zW50swJ+Xhl^xoJvV0vfl2O!<g
zyEFDPkp9-QGiD`_PGsF1`yEWX$3W;^V17_$at6rkiHZ`F7&(|31deUyW~{UZGumw`
FH38%gL!kfw

delta 137
zcmZoT!`N_!aY94Jj<?tN|McvLf#I)Tv|~O1`PHnuWB-HcJ+a@w^xoKKV0vflFCg8@
zyEFDDkp9!NGiEW6PGQ{}`xi{R$3W;^V17_$at6rkiHZ`F7&(}$eUESEW~{UZGumw`
FH31FzMPvW~

diff --git a/electron/native/bin/win32-x64/helpers-manifest.json b/electron/native/bin/win32-x64/helpers-manifest.json
index 8713d1c3..ed41409c 100644
--- a/electron/native/bin/win32-x64/helpers-manifest.json
+++ b/electron/native/bin/win32-x64/helpers-manifest.json
@@ -5,17 +5,17 @@
   "helpers": {
     "wgc-capture": {
       "binaryName": "wgc-capture.exe",
-      "binarySha256": "5f364b07b016c597288f90a9b61c581e6559d6d32b79ffadceb37859bbea8dd2",
+      "binarySha256": "c01e731bb255096ba8add9bf293d82545af29d82848d456545c2b182a17717fc",
       "sourceDir": "electron/native/wgc-capture",
       "sourceFingerprint": "9e9bce082266ca5968cf5f0b535b469d47c4ec3a775a93726171c0dfdbcdaa44",
-      "updatedAt": "2026-03-28T05:48:46.587Z"
+      "updatedAt": "2026-03-29T02:18:57.450Z"
     },
     "cursor-monitor": {
       "binaryName": "cursor-monitor.exe",
-      "binarySha256": "916ed064c12a3b861d7721df8b9209d10ec0fdb8078564a2ba3ea8cf4f4354c4",
+      "binarySha256": "d81b6358021ee5b27e601c14b9cc5edd0689647abd507e3dcd8ffe12f914c50d",
       "sourceDir": "electron/native/cursor-monitor",
       "sourceFingerprint": "6ad1b8b50bb336f2a48937b06f5ec56d90b6ab4a3e56a4bca278cf67a5d3e52e",
-      "updatedAt": "2026-03-28T05:17:17.697Z"
+      "updatedAt": "2026-03-29T02:19:01.284Z"
     }
   }
 }
diff --git a/electron/native/bin/win32-x64/wgc-capture.exe b/electron/native/bin/win32-x64/wgc-capture.exe
index ac92a80bf697d8a0a2b405ff7960822375be937d..b0187cfa43f8a42bdee137138123fb27a13685b6 100644
GIT binary patch
delta 182
zcmZp;z}j$ub%M?G1)Pj56CE7tkB62lZZ?tn0K+VMB|kO*`7C?oK6Zj>`HyqKwDiYT
zApL8r^v6apEf1!<d^$hu1M-_qq(3MFX_3A1AKSq6(+^ExTH+&!4$4f<0NKHS3V0X-
nTp1Wr+SnKbdroW?W_-&u(SW0gWg81)2pcm{XnQyp<H}e7yii65

delta 173
zcmZp;z}j$ub%G5e$3$D_`p2Oqi<g^7eSl$wy^<f70Qm}g<vy+j)AAp8f@$fG3xV{#
zt<oQtf@yg$z0Rle!z>_wxry`#b|7uPSN`K7F#YtyGB7Ri5kv=NCTD=`U_b>E4LBz;
eaxm}9KE9co@hwvm%QhCq5H=8hdpH;4%2)u0K1YB6

diff --git a/package-lock.json b/package-lock.json
index 2c283f39..9f0a9cd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "recordly",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "recordly",
-			"version": "1.1.6",
+			"version": "1.1.7",
 			"hasInstallScript": true,
 			"dependencies": {
 				"capturekit": "^1.0.13",

From 83f0474dc3d834ca6733dd5853de2b175370c048 Mon Sep 17 00:00:00 2001
From: Mahdy Arief <mahdyarief@gmail.com>
Date: Sun, 29 Mar 2026 10:22:01 +0700
Subject: [PATCH 4/4] feat: addressed CodeRabbit AI feedback for blur
 annotations and cursor rendering

---
 .gitignore                                    |  1 +
 .../video-editor/AnnotationSettingsPanel.tsx  |  2 +-
 src/components/video-editor/VideoPlayback.tsx | 21 ++++++++++++-------
 src/lib/exporter/annotationRenderer.ts        | 12 ++++++-----
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index b5c86640..f3a14846 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,6 +42,7 @@ electron/native/cursor-monitor/build/
 ebcache/
 docs/
 recordly_dev/
+.agent/
 
 # Local debug helpers
 tmp-*.ps1
diff --git a/src/components/video-editor/AnnotationSettingsPanel.tsx b/src/components/video-editor/AnnotationSettingsPanel.tsx
index 2dbb8e67..e6470ebf 100644
--- a/src/components/video-editor/AnnotationSettingsPanel.tsx
+++ b/src/components/video-editor/AnnotationSettingsPanel.tsx
@@ -516,7 +516,7 @@ export function AnnotationSettingsPanel({
                   {t('annotations.blurIntensity', 'Intensity')}
                 </label>
                 <span className="text-xs font-mono font-bold text-[#3B82F6] bg-[#3B82F6]/10 px-2 py-0.5 rounded-md border border-[#3B82F6]/20">
-                  {annotation.blurIntensity ?? 12}%
+                  {annotation.blurIntensity ?? 12}px
                 </span>
               </div>
               <Slider
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index dd085c23..37e1ef7f 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -353,6 +353,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
     const cursorClickBounceRef = useRef(cursorClickBounce);
     const cursorClickBounceDurationRef = useRef(cursorClickBounceDuration);
     const cursorSwayRef = useRef(cursorSway);
+    const cropRegionRef = useRef(cropRegion);
 
     const activeCaptionLayout = useMemo(() => {
       if (!autoCaptionSettings?.enabled || autoCaptions.length === 0 || typeof document === "undefined") {
@@ -843,6 +844,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
       cursorSwayRef.current = cursorSway;
     }, [cursorSway]);
 
+    useEffect(() => {
+      cropRegionRef.current = cropRegion;
+    }, [cropRegion]);
+
     useEffect(() => {
       currentTimeRef.current = currentTime * 1000;
     }, [currentTime]);
@@ -1420,18 +1425,18 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
                 y: 0,
                 width: cursorCanvas.width,
                 height: cursorCanvas.height,
-                sourceCrop: cropRegion,
+                sourceCrop: cropRegionRef.current,
               },
               smoothedState,
               {
                 ...DEFAULT_CURSOR_CONFIG,
-                style: cursorStyle,
-                dotRadius: 28 * cursorSize, // Matches Pixi scaling approx
-                smoothingFactor: cursorSmoothing,
-                motionBlur: cursorMotionBlur,
-                clickBounce: cursorClickBounce,
-                clickBounceDuration: cursorClickBounceDuration,
-                sway: cursorSway,
+                style: cursorStyleRef.current,
+                dotRadius: 28 * cursorSizeRef.current, // Matches Pixi scaling approx
+                smoothingFactor: cursorSmoothingRef.current,
+                motionBlur: cursorMotionBlurRef.current,
+                clickBounce: cursorClickBounceRef.current,
+                clickBounceDuration: cursorClickBounceDurationRef.current,
+                sway: cursorSwayRef.current,
               }
             );
           }
diff --git a/src/lib/exporter/annotationRenderer.ts b/src/lib/exporter/annotationRenderer.ts
index 8b1654d7..2a048068 100644
--- a/src/lib/exporter/annotationRenderer.ts
+++ b/src/lib/exporter/annotationRenderer.ts
@@ -358,11 +358,13 @@ function renderBlur(
 
   ctx.save();
   try {
-    // Determine bounds and ensure they are within canvas to avoid ImageData errors
-    const srcX = Math.max(0, x);
-    const srcY = Math.max(0, y);
-    const srcWidth = Math.min(x + width, ctx.canvas.width) - srcX;
-    const srcHeight = Math.min(y + height, ctx.canvas.height) - srcY;
+    // Pad the capture region to provide context for the blur kernel
+    // This prevents clipping at the edges of the annotation box
+    const padding = Math.ceil(intensity * 2);
+    const srcX = Math.max(0, x - padding);
+    const srcY = Math.max(0, y - padding);
+    const srcWidth = Math.min(x + width + padding, ctx.canvas.width) - srcX;
+    const srcHeight = Math.min(y + height + padding, ctx.canvas.height) - srcY;
 
     if (srcWidth <= 0 || srcHeight <= 0) {
       ctx.restore();