fix(annotations): preserve blur type and intensity on reload

src/components/video-editor/AnnotationOverlay.tsx

@@ -115,7 +115,8 @@ export function AnnotationOverlay({
 
       case "blur": {
         const previewScaleFactor = containerWidth / BASE_PREVIEW_WIDTH;
-        const blurPx = BLUR_ANNOTATION_STRENGTH * previewScaleFactor;
+        const currentBlurStrength = annotation.blurIntensity ?? BLUR_ANNOTATION_STRENGTH;
+        const blurPx = currentBlurStrength * previewScaleFactor;
         const blurStyle = `blur(${blurPx}px)`;
 
         return (

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');
@@ -510,10 +512,25 @@ export function AnnotationSettingsPanel({
                 <SquareDashed className="w-6 h-6 text-[#2563EB]" />
               </div>
               <h4 className="text-sm font-medium text-slate-200 mb-1">{t('annotations.blur')}</h4>
-              <p className="text-xs text-slate-400 max-w-[200px]">
+              <p className="text-xs text-slate-400 max-w-[200px] mb-4">
                 {t('annotations.blurDescription')}
               </p>
 
+              <div className="w-full space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-medium text-slate-200">
+                    {t('annotations.blurStrength', undefined, { strength: annotation.blurIntensity ?? 20 })}
+                  </span>
+                </div>
+                <Slider
+                  value={[annotation.blurIntensity ?? 20]}
+                  onValueChange={([value]) => onBlurIntensityChange?.(value)}
+                  min={1}
+                  max={100}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
             </div>
           </TabsContent>
         </Tabs>

src/components/video-editor/SettingsPanel.tsx

@@ -223,6 +223,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;
@@ -570,6 +571,7 @@ export function SettingsPanel({
 	onAnnotationTypeChange,
 	onAnnotationStyleChange,
 	onAnnotationFigureDataChange,
+	onAnnotationBlurIntensityChange,
 	onAnnotationDelete,
 	autoCaptions = [],
 	autoCaptionSettings = DEFAULT_AUTO_CAPTION_SETTINGS,
@@ -1301,6 +1303,11 @@ export function SettingsPanel({
 						? (figureData) => onAnnotationFigureDataChange(selectedAnnotation.id, figureData)
 						: undefined
 				}
+				onBlurIntensityChange={
+					onAnnotationBlurIntensityChange
+						? (intensity) => onAnnotationBlurIntensityChange(selectedAnnotation.id, intensity)
+						: undefined
+				}
 				onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
 			/>
 		);

src/components/video-editor/VideoEditor.tsx

@@ -2714,6 +2714,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) =>
@@ -4511,6 +4517,7 @@ export default function VideoEditor() {
 						onAnnotationTypeChange={handleAnnotationTypeChange}
 						onAnnotationStyleChange={handleAnnotationStyleChange}
 						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+						onAnnotationBlurIntensityChange={handleAnnotationBlurIntensityChange}
 						onAnnotationDelete={handleAnnotationDelete}
 						selectedSpeedId={selectedSpeedId}
 						selectedSpeedValue={

src/components/video-editor/projectPersistence.ts

@@ -446,6 +446,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 									...region.figureData,
 								}
 							: undefined,
+						blurIntensity: isFiniteNumber(region.blurIntensity) ? region.blurIntensity : undefined,
 					};
 				})
 		: [];

src/components/video-editor/types.ts

@@ -247,6 +247,7 @@ export interface AnnotationRegion {
 	style: AnnotationTextStyle;
 	zIndex: number;
 	figureData?: FigureData;
+	blurIntensity?: number;
 }
 
 export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {