+ )} + {blurType === "mosaic" && ( +

+ )} + {isSelected && shape !== "freehand" && ( +

+ )} +

+ {isSelected && shape === "freehand" && freehandPath && ( + + )} + {isFreehandSelected && ( +

+ )} +

+ ); + } + + default: + return null; + } + }; + + return ( + { + isDraggingRef.current = true; + }} + onDrag={(_e, d) => { + setLiveRect((prev) => ({ + ...prev, + x: d.x, + y: d.y, + })); + }} + onDragStop={(_e, d) => { + setLiveRect((prev) => ({ + ...prev, + x: d.x, + y: d.y, + })); + 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; + }, 100); + }} + onResize={(_e, _direction, ref, _delta, position) => { + setLiveRect({ + x: position.x, + y: position.y, + width: ref.offsetWidth, + height: ref.offsetHeight, + }); + }} + onResizeStop={(_e, _direction, ref, _delta, position) => { + setLiveRect({ + x: position.x, + y: position.y, + width: ref.offsetWidth, + height: ref.offsetHeight, + }); + const xPercent = (position.x / containerWidth) * 100; + const yPercent = (position.y / containerHeight) * 100; + const widthPercent = (ref.offsetWidth / containerWidth) * 100; + const heightPercent = (ref.offsetHeight / containerHeight) * 100; + onPositionChange(annotation.id, { x: xPercent, y: yPercent }); + onSizeChange(annotation.id, { width: widthPercent, height: heightPercent }); + }} + onClick={() => { + if (isDraggingRef.current) return; + onClick(annotation.id); + }} + bounds="parent" + className={cn( + "cursor-move", + isSelected && + annotation.type !== "blur" && + "ring-2 ring-[#34B27B] ring-offset-2 ring-offset-transparent", + )} + style={{ + zIndex: isSelectedBoost ? zIndex + 1000 : zIndex, // Boost selected annotation to ensure it's on top + pointerEvents: isSelected ? "auto" : "none", + border: + isSelected && annotation.type !== "blur" ? "2px solid rgba(52, 178, 123, 0.8)" : "none", + backgroundColor: + isSelected && annotation.type !== "blur" ? "rgba(52, 178, 123, 0.1)" : "transparent", + boxShadow: + isSelected && annotation.type !== "blur" ? "0 0 0 1px rgba(52, 178, 123, 0.35)" : "none", + }} + enableResizing={isSelected && !isSelectedFreehandBlur} + disableDragging={!isSelected || isSelectedFreehandBlur} + resizeHandleStyles={{ + topLeft: { + width: "12px", + height: "12px", + backgroundColor: isSelected ? "white" : "transparent", + border: isSelected ? "2px solid #34B27B" : "none", + borderRadius: "50%", + left: "-6px", + top: "-6px", + cursor: "nwse-resize", + }, + topRight: { + width: "12px", + height: "12px", + backgroundColor: isSelected ? "white" : "transparent", + border: isSelected ? "2px solid #34B27B" : "none", + borderRadius: "50%", + right: "-6px", + top: "-6px", + cursor: "nesw-resize", + }, + bottomLeft: { + width: "12px", + height: "12px", + backgroundColor: isSelected ? "white" : "transparent", + border: isSelected ? "2px solid #34B27B" : "none", + borderRadius: "50%", + left: "-6px", + bottom: "-6px", + cursor: "nesw-resize", + }, + bottomRight: { + width: "12px", + height: "12px", + backgroundColor: isSelected ? "white" : "transparent", + border: isSelected ? "2px solid #34B27B" : "none", + borderRadius: "50%", + right: "-6px", + bottom: "-6px", + cursor: "nwse-resize", + }, + }} + > +

+ {renderContent()} +

+ + ); +} diff --git a/src/components/video-editor/AnnotationSettingsPanel.tsx b/src/components/video-editor/AnnotationSettingsPanel.tsx new file mode 100644 index 0000000..72e25a8 --- /dev/null +++ b/src/components/video-editor/AnnotationSettingsPanel.tsx @@ -0,0 +1,628 @@ +import Block from "@uiw/react-color-block"; +import { + AlignCenter, + AlignLeft, + AlignRight, + Bold, + ChevronDown, + Copy, + Image as ImageIcon, + Italic, + Trash2, + Type, + Underline, + Upload, +} from "lucide-react"; +import { useEffect, useRef, useState } from "react"; +import { toast } from "sonner"; +import { Button } from "@/components/ui/button"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Slider } from "@/components/ui/slider"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; +import { useScopedT } from "@/contexts/I18nContext"; +import { type CustomFont, getCustomFonts } from "@/lib/customFonts"; +import { cn } from "@/lib/utils"; +import ColorPicker from "../ui/color-picker"; +import { AddCustomFontDialog } from "./AddCustomFontDialog"; +import { getArrowComponent } from "./ArrowSvgs"; +import { + type AnnotationRegion, + type AnnotationType, + type ArrowDirection, + type FigureData, +} from "./types"; + +interface AnnotationSettingsPanelProps { + annotation: AnnotationRegion; + onContentChange: (content: string) => void; + onTypeChange: (type: AnnotationType) => void; + onStyleChange: (style: Partial) => void; + onFigureDataChange?: (figureData: FigureData) => void; + onDuplicate?: () => void; + onDelete: () => void; +} + +const FONT_FAMILIES = [ + { value: "system-ui, -apple-system, sans-serif", labelKey: "classic" }, + { value: "Georgia, serif", labelKey: "editor" }, + { value: "Impact, Arial Black, sans-serif", labelKey: "strong" }, + { value: "Courier New, monospace", labelKey: "typewriter" }, + { value: "Brush Script MT, cursive", labelKey: "deco" }, + { value: "Arial, sans-serif", labelKey: "simple" }, + { value: "Verdana, sans-serif", labelKey: "modern" }, + { value: "Trebuchet MS, sans-serif", labelKey: "clean" }, +]; + +const FONT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 128]; + +export function AnnotationSettingsPanel({ + annotation, + onContentChange, + onTypeChange, + onStyleChange, + onFigureDataChange, + onDuplicate, + onDelete, +}: AnnotationSettingsPanelProps) { + const t = useScopedT("settings"); + const fileInputRef = useRef(null); + const [customFonts, setCustomFonts] = useState([]); + const fontStyleLabels: Record = { + classic: t("fontStyles.classic"), + editor: t("fontStyles.editor"), + strong: t("fontStyles.strong"), + typewriter: t("fontStyles.typewriter"), + deco: t("fontStyles.deco"), + simple: t("fontStyles.simple"), + modern: t("fontStyles.modern"), + clean: t("fontStyles.clean"), + }; + + // Load custom fonts on mount + useEffect(() => { + setCustomFonts(getCustomFonts()); + }, []); + + const colorPalette = [ + "#FF0000", // Red + "#FFD700", // Yellow/Gold + "#00FF00", // Green + "#FFFFFF", // White + "#0000FF", // Blue + "#FF6B00", // Orange + "#9B59B6", // Purple + "#E91E63", // Pink + "#00BCD4", // Cyan + "#FF5722", // Deep Orange + "#8BC34A", // Light Green + "#FFC107", // Amber + "#34B27B", // Brand Green + "#000000", // Black + "#607D8B", // Blue Grey + "#795548", // Brown + ]; + + const handleImageUpload = (event: React.ChangeEvent) => { + const files = event.target.files; + if (!files || files.length === 0) return; + + const file = files[0]; + + // Validate file type + const validTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"]; + if (!validTypes.includes(file.type)) { + toast.error(t("annotation.invalidImageType"), { + description: t("annotation.imageFormatsOnly"), + }); + event.target.value = ""; + return; + } + + const reader = new FileReader(); + + reader.onload = (e) => { + const dataUrl = e.target?.result as string; + if (dataUrl) { + onContentChange(dataUrl); + toast.success(t("annotation.imageUploadSuccess")); + } + }; + + reader.onerror = () => { + toast.error(t("annotation.failedImageUpload"), { + description: "There was an error reading the file.", + }); + }; + + reader.readAsDataURL(file); + event.target.value = ""; + }; + + return ( +

+ + {t("annotation.active")} + +

{t("annotation.title")}

+ + {/* Type Selector */} + onTypeChange(value as AnnotationType)} + className="mb-4" + > + + + + {t("annotation.typeText")} + + + + {t("annotation.typeImage")} + + + + {t("annotation.typeArrow")} + + + + {/* Text Content */} + +

+ + {t("annotation.textContent")} + +

onContentChange(e.target.value)}
+								placeholder={t("annotation.textPlaceholder")}
+								rows={5}
+								className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-slate-200 text-sm placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-[#34B27B] focus:border-transparent resize-none"
+							/>
+						</div>
+
+						{/* Styling Controls */}
+						<div className="space-y-4">
+							{/* Font Family & Size */}
+							<div className="grid grid-cols-2 gap-2">
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotation.fontStyle")}
+									</label>
+									<Select
+										value={annotation.style.fontFamily}
+										onValueChange={(value) => onStyleChange({ fontFamily: value })}
+									>
+										<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
+											<SelectValue placeholder={t("annotation.selectStyle")} />
+										</SelectTrigger>
+										<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[300px]">
+											{FONT_FAMILIES.map((font) => (
+												<SelectItem
+													key={font.value}
+													value={font.value}
+													style={{ fontFamily: font.value }}
+												>
+													{fontStyleLabels[font.labelKey]}
+												</SelectItem>
+											))}
+											{customFonts.length > 0 && (
+												<>
+													<div className="px-2 py-1.5 text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+														{t("annotation.customFonts")}
+													</div>
+													{customFonts.map((font) => (
+														<SelectItem
+															key={font.id}
+															value={font.fontFamily}
+															style={{ fontFamily: font.fontFamily }}
+														>
+															{font.name}
+														</SelectItem>
+													))}
+												</>
+											)}
+										</SelectContent>
+									</Select>
+								</div>
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotation.size")}
+									</label>
+									<Select
+										value={annotation.style.fontSize.toString()}
+										onValueChange={(value) => onStyleChange({ fontSize: parseInt(value) })}
+									>
+										<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
+											<SelectValue placeholder={t("annotation.size")} />
+										</SelectTrigger>
+										<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[200px]">
+											{FONT_SIZES.map((size) => (
+												<SelectItem key={size} value={size.toString()}>
+													{size}px
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+							</div>
+
+							{/* Add Custom Font Button */}
+							<div>
+								<AddCustomFontDialog
+									onFontAdded={(font) => {
+										setCustomFonts(getCustomFonts());
+										onStyleChange({ fontFamily: font.fontFamily });
+									}}
+								/>
+							</div>
+
+							{/* Formatting Toggles */}
+							<div className="flex items-center justify-between gap-2">
+								<ToggleGroup
+									type="multiple"
+									className="justify-start bg-white/5 p-1 rounded-lg border border-white/5"
+								>
+									<ToggleGroupItem
+										value="bold"
+										aria-label="Toggle bold"
+										data-state={annotation.style.fontWeight === "bold" ? "on" : "off"}
+										onClick={() =>
+											onStyleChange({
+												fontWeight: annotation.style.fontWeight === "bold" ? "normal" : "bold",
+											})
+										}
+										className="h-8 w-8 data-[state=on]:bg-[#34B27B] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<Bold className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="italic"
+										aria-label="Toggle italic"
+										data-state={annotation.style.fontStyle === "italic" ? "on" : "off"}
+										onClick={() =>
+											onStyleChange({
+												fontStyle: annotation.style.fontStyle === "italic" ? "normal" : "italic",
+											})
+										}
+										className="h-8 w-8 data-[state=on]:bg-[#34B27B] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<Italic className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="underline"
+										aria-label="Toggle underline"
+										data-state={annotation.style.textDecoration === "underline" ? "on" : "off"}
+										onClick={() =>
+											onStyleChange({
+												textDecoration:
+													annotation.style.textDecoration === "underline" ? "none" : "underline",
+											})
+										}
+										className="h-8 w-8 data-[state=on]:bg-[#34B27B] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<Underline className="h-4 w-4" />
+									</ToggleGroupItem>
+								</ToggleGroup>
+
+								<ToggleGroup
+									type="single"
+									value={annotation.style.textAlign}
+									className="justify-start bg-white/5 p-1 rounded-lg border border-white/5"
+								>
+									<ToggleGroupItem
+										value="left"
+										aria-label="Align left"
+										onClick={() => onStyleChange({ textAlign: "left" })}
+										className="h-8 w-8 data-[state=on]:bg-[#34B27B] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<AlignLeft className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="center"
+										aria-label="Align center"
+										onClick={() => onStyleChange({ textAlign: "center" })}
+										className="h-8 w-8 data-[state=on]:bg-[#34B27B] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<AlignCenter className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="right"
+										aria-label="Align right"
+										onClick={() => onStyleChange({ textAlign: "right" })}
+										className="h-8 w-8 data-[state=on]:bg-[#34B27B] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<AlignRight className="h-4 w-4" />
+									</ToggleGroupItem>
+								</ToggleGroup>
+							</div>
+
+							{/* Colors */}
+							<div className="grid grid-cols-2 gap-4">
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotation.textColor")}
+									</label>
+									<Popover>
+										<PopoverTrigger asChild>
+											<Button
+												variant="outline"
+												className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
+											>
+												<div
+													className="w-4 h-4 rounded-full border border-white/20"
+													style={{ backgroundColor: annotation.style.color }}
+												/>
+												<span className="text-xs text-slate-300 truncate flex-1 text-left">
+													{annotation.style.color}
+												</span>
+												<ChevronDown className="h-3 w-3 opacity-50" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent
+											side="top"
+											className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl"
+										>
+											<ColorPicker
+												selectedColor={annotation.style.color}
+												colorPalette={colorPalette}
+												translations={{
+													colorWheel: t("annotation.colorWheel"),
+													colorPalette: t("annotation.colorPalette"),
+												}}
+												onUpdateColor={(color) => {
+													onStyleChange({ color: color });
+												}}
+											/>
+										</PopoverContent>
+									</Popover>
+								</div>
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotation.background")}
+									</label>
+									<Popover>
+										<PopoverTrigger asChild>
+											<Button
+												variant="outline"
+												className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
+											>
+												<div className="w-4 h-4 rounded-full border border-white/20 relative overflow-hidden">
+													<div className="absolute inset-0 checkerboard-bg opacity-50" />
+													<div
+														className="absolute inset-0"
+														style={{ backgroundColor: annotation.style.backgroundColor }}
+													/>
+												</div>
+												<span className="text-xs text-slate-300 truncate flex-1 text-left">
+													{annotation.style.backgroundColor === "transparent"
+														? t("annotation.none")
+														: t("annotation.color")}
+												</span>
+												<ChevronDown className="h-3 w-3 opacity-50" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent
+											side="top"
+											className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl"
+										>
+											<ColorPicker
+												selectedColor={annotation.style.backgroundColor}
+												colorPalette={colorPalette}
+												translations={{
+													colorWheel: t("annotation.colorWheel"),
+													colorPalette: t("annotation.colorPalette"),
+													clearBackground: t("annotation.clearBackground"),
+												}}
+												clearBackgroundOption={true}
+												onUpdateColor={(color) => {
+													onStyleChange({ backgroundColor: color });
+												}}
+											/>
+										</PopoverContent>
+									</Popover>
+								</div>
+							</div>
+						</div>
+					</TabsContent>
+
+					{/* Image Upload */}
+					<TabsContent value="image" className="mt-0 space-y-4">
+						<input
+							type="file"
+							ref={fileInputRef}
+							onChange={handleImageUpload}
+							accept=".jpg,.jpeg,.png,.gif,.webp,image/*"
+							className="hidden"
+						/>
+						<Button
+							onClick={() => fileInputRef.current?.click()}
+							variant="outline"
+							className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#34B27B] hover:text-white hover:border-[#34B27B] transition-all py-8"
+						>
+							<Upload className="w-5 h-5" />
+							{t("annotation.uploadImage")}
+						</Button>
+
+						{annotation.content && annotation.content.startsWith("data:image") && (
+							<div className="rounded-lg border border-white/10 overflow-hidden bg-white/5 p-2">
+								<img
+									src={annotation.content}
+									alt="Uploaded annotation"
+									className="w-full h-auto rounded-md"
+								/>
+							</div>
+						)}
+
+						<p className="text-xs text-slate-500 text-center leading-relaxed">
+							{t("annotation.supportedFormats")}
+						</p>
+					</TabsContent>
+
+					<TabsContent value="figure" className="mt-0 space-y-4">
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-3 block">
+								{t("annotation.arrowDirection")}
+							</label>
+							<div className="grid grid-cols-4 gap-2">
+								{(
+									[
+										"up",
+										"down",
+										"left",
+										"right",
+										"up-right",
+										"up-left",
+										"down-right",
+										"down-left",
+									] as ArrowDirection[]
+								).map((direction) => {
+									const ArrowComponent = getArrowComponent(direction);
+									return (
+										<button
+											key={direction}
+											onClick={() => {
+												const newFigureData: FigureData = {
+													...annotation.figureData!,
+													arrowDirection: direction,
+												};
+												onFigureDataChange?.(newFigureData);
+											}}
+											className={cn(
+												"h-16 rounded-lg border flex items-center justify-center transition-all p-2",
+												annotation.figureData?.arrowDirection === direction
+													? "bg-[#34B27B] border-[#34B27B]"
+													: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+											)}
+										>
+											<ArrowComponent
+												color={
+													annotation.figureData?.arrowDirection === direction
+														? "#ffffff"
+														: "#94a3b8"
+												}
+												strokeWidth={3}
+											/>
+										</button>
+									);
+								})}
+							</div>
+						</div>
+
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotation.strokeWidth", {
+									width: String(annotation.figureData?.strokeWidth || 4),
+								})}
+							</label>
+							<Slider
+								value={[annotation.figureData?.strokeWidth || 4]}
+								onValueChange={([value]) => {
+									const newFigureData: FigureData = {
+										...annotation.figureData!,
+										strokeWidth: value,
+									};
+									onFigureDataChange?.(newFigureData);
+								}}
+								min={1}
+								max={6}
+								step={1}
+								className="w-full"
+							/>
+						</div>
+
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotation.arrowColor")}
+							</label>
+							<Popover>
+								<PopoverTrigger asChild>
+									<Button
+										variant="outline"
+										className="w-full h-10 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10"
+									>
+										<div
+											className="w-5 h-5 rounded-full border border-white/20"
+											style={{ backgroundColor: annotation.figureData?.color || "#34B27B" }}
+										/>
+										<span className="text-xs text-slate-300 truncate flex-1 text-left">
+											{annotation.figureData?.color || "#34B27B"}
+										</span>
+										<ChevronDown className="h-3 w-3 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
+									<Block
+										color={annotation.figureData?.color || "#34B27B"}
+										colors={colorPalette}
+										onChange={(color) => {
+											const newFigureData: FigureData = {
+												...annotation.figureData!,
+												color: color.hex,
+											};
+											onFigureDataChange?.(newFigureData);
+										}}
+										style={{
+											borderRadius: "8px",
+										}}
+									/>
+								</PopoverContent>
+							</Popover>
+						</div>
+					</TabsContent>
+				</Tabs>
+
+				<div className="mt-4 grid grid-cols-2 gap-2">
+					<Button
+						onClick={() => onDuplicate?.()}
+						variant="outline"
+						size="sm"
+						disabled={!onDuplicate}
+						className="w-full gap-2 bg-white/5 text-slate-200 border border-white/10 hover:bg-white/10 hover:border-white/20 transition-all"
+					>
+						<Copy className="w-4 h-4" />
+						Duplicate
+					</Button>
+
+					<Button
+						onClick={onDelete}
+						variant="destructive"
+						size="sm"
+						className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all"
+					>
+						<Trash2 className="w-4 h-4" />
+						{t("annotation.deleteAnnotation")}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/ArrowSvgs.tsx b/src/components/video-editor/ArrowSvgs.tsx
new file mode 100644
index 0000000..99c542f
--- /dev/null
+++ b/src/components/video-editor/ArrowSvgs.tsx
@@ -0,0 +1,202 @@
+import type { ArrowDirection } from "./types";
+
+interface ArrowSvgProps {
+	color: string;
+	strokeWidth: number;
+	className?: string;
+}
+
+/**
+ * Inline SVG arrow components for 8 directions.
+ * These match the visual style of the previous icon-based arrows but use
+ * pure SVG paths for easy replication in export.
+ */
+
+export function ArrowUp({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 50 20 L 50 80 M 50 20 L 35 35 M 50 20 L 65 35"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowDown({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 50 20 L 50 80 M 50 80 L 35 65 M 50 80 L 65 65"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowLeft({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 80 50 L 20 50 M 20 50 L 35 35 M 20 50 L 35 65"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowRight({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 20 50 L 80 50 M 80 50 L 65 35 M 80 50 L 65 65"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowUpRight({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 25 75 L 75 25 M 75 25 L 60 30 M 75 25 L 70 40"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowUpLeft({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 75 75 L 25 25 M 25 25 L 40 30 M 25 25 L 30 40"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowDownRight({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 25 25 L 75 75 M 75 75 L 70 60 M 75 75 L 60 70"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function ArrowDownLeft({ color, strokeWidth, className }: ArrowSvgProps) {
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 75 25 L 25 75 M 25 75 L 30 60 M 25 75 L 40 70"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
+}
+
+export function getArrowComponent(direction: ArrowDirection) {
+	switch (direction) {
+		case "up":
+			return ArrowUp;
+		case "down":
+			return ArrowDown;
+		case "left":
+			return ArrowLeft;
+		case "right":
+			return ArrowRight;
+		case "up-right":
+			return ArrowUpRight;
+		case "up-left":
+			return ArrowUpLeft;
+		case "down-right":
+			return ArrowDownRight;
+		case "down-left":
+			return ArrowDownLeft;
+	}
+}
diff --git a/src/components/video-editor/BlurSettingsPanel.tsx b/src/components/video-editor/BlurSettingsPanel.tsx
new file mode 100644
index 0000000..7ead894
--- /dev/null
+++ b/src/components/video-editor/BlurSettingsPanel.tsx
@@ -0,0 +1,193 @@
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { useScopedT } from "@/contexts/I18nContext";
+import { getBlurOverlayColor } from "@/lib/blurEffects";
+import { cn } from "@/lib/utils";
+import {
+	type AnnotationRegion,
+	type BlurColor,
+	type BlurData,
+	type BlurShape,
+	DEFAULT_BLUR_BLOCK_SIZE,
+	DEFAULT_BLUR_DATA,
+	MAX_BLUR_BLOCK_SIZE,
+	MIN_BLUR_BLOCK_SIZE,
+} from "./types";
+
+interface BlurSettingsPanelProps {
+	blurRegion: AnnotationRegion;
+	onBlurDataChange: (blurData: BlurData) => void;
+	onBlurDataCommit?: () => void;
+	onDelete: () => void;
+}
+
+export function BlurSettingsPanel({
+	blurRegion,
+	onBlurDataChange,
+	onBlurDataCommit,
+	onDelete,
+}: BlurSettingsPanelProps) {
+	const t = useScopedT("settings");
+
+	const blurShapeOptions: Array<{ value: BlurShape; labelKey: string }> = [
+		{ value: "rectangle", labelKey: "blurShapeRectangle" },
+		{ value: "oval", labelKey: "blurShapeOval" },
+	];
+	const blurColorOptions: Array<{ value: BlurColor; labelKey: string }> = [
+		{ value: "white", labelKey: "blurColorWhite" },
+		{ value: "black", labelKey: "blurColorBlack" },
+	];
+
+	return (
+		<div className="min-w-0 p-4 flex flex-col h-full overflow-y-auto custom-scrollbar">
+			<div className="mb-3">
+				<div className="mb-4">
+					<span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+						{t("annotation.blurTypeMosaic")}
+					</span>
+					<div className="mt-1 text-xl font-semibold text-slate-100">
+						{t("annotation.typeBlur")}
+					</div>
+				</div>
+
+				<div className="grid grid-cols-2 gap-2">
+					{blurShapeOptions.map((shape) => {
+						const activeShape = blurRegion.blurData?.shape || DEFAULT_BLUR_DATA.shape;
+						const isActive = activeShape === shape.value;
+						return (
+							<button
+								key={shape.value}
+								onClick={() => {
+									const nextBlurData: BlurData = {
+										...DEFAULT_BLUR_DATA,
+										...blurRegion.blurData,
+										type: "mosaic",
+										shape: shape.value,
+									};
+									onBlurDataChange(nextBlurData);
+									requestAnimationFrame(() => {
+										onBlurDataCommit?.();
+									});
+								}}
+								className={cn(
+									"h-12 rounded-lg border flex items-center justify-center transition-all p-2 gap-2",
+									isActive
+										? "bg-[#34B27B] border-[#34B27B]"
+										: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+								)}
+							>
+								{shape.value === "rectangle" && (
+									<div
+										className={cn(
+											"w-8 h-5 border-2 rounded-sm",
+											isActive ? "border-white" : "border-slate-400",
+										)}
+									/>
+								)}
+								{shape.value === "oval" && (
+									<div
+										className={cn(
+											"w-8 h-5 border-2 rounded-full",
+											isActive ? "border-white" : "border-slate-400",
+										)}
+									/>
+								)}
+								<span className="text-[10px] leading-none font-medium">
+									{t(`annotation.${shape.labelKey}`)}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+
+				<div className="mt-4">
+					<label className="text-xs font-medium text-slate-300 mb-2 block">
+						{t("annotation.blurColor")}
+					</label>
+					<div className="grid grid-cols-2 gap-2">
+						{blurColorOptions.map((option) => {
+							const activeColor = blurRegion.blurData?.color ?? DEFAULT_BLUR_DATA.color;
+							const isActive = activeColor === option.value;
+							return (
+								<button
+									key={option.value}
+									onClick={() => {
+										const nextBlurData: BlurData = {
+											...DEFAULT_BLUR_DATA,
+											...blurRegion.blurData,
+											type: "mosaic",
+											color: option.value,
+										};
+										onBlurDataChange(nextBlurData);
+										requestAnimationFrame(() => {
+											onBlurDataCommit?.();
+										});
+									}}
+									className={cn(
+										"h-10 rounded-lg border flex items-center gap-2 px-3 transition-all",
+										isActive
+											? "bg-[#34B27B] border-[#34B27B]"
+											: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+									)}
+								>
+									<div
+										className="w-4 h-4 rounded-full border border-white/20"
+										style={{
+											backgroundColor: getBlurOverlayColor({
+												...DEFAULT_BLUR_DATA,
+												...blurRegion.blurData,
+												color: option.value,
+											}),
+										}}
+									/>
+									<span className="text-xs text-slate-200">
+										{t(`annotation.${option.labelKey}`)}
+									</span>
+								</button>
+							);
+						})}
+					</div>
+				</div>
+
+				<div className="mt-4 p-3 rounded-lg editor-control-surface">
+					<div className="flex items-center justify-between mb-2">
+						<span className="text-xs font-medium text-slate-300">
+							{t("annotation.mosaicBlockSize")}
+						</span>
+						<span className="text-[10px] text-slate-400 font-mono">
+							{Math.round(blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)}
+							px
+						</span>
+					</div>
+					<Slider
+						value={[blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE]}
+						onValueChange={(values) => {
+							onBlurDataChange({
+								...DEFAULT_BLUR_DATA,
+								...blurRegion.blurData,
+								type: "mosaic",
+								blockSize: values[0],
+							});
+						}}
+						onValueCommit={() => onBlurDataCommit?.()}
+						min={MIN_BLUR_BLOCK_SIZE}
+						max={MAX_BLUR_BLOCK_SIZE}
+						step={1}
+						className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+					/>
+				</div>
+
+				<Button
+					onClick={onDelete}
+					variant="destructive"
+					size="sm"
+					className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all mt-4"
+				>
+					<Trash2 className="w-4 h-4" />
+					{t("annotation.deleteAnnotation")}
+				</Button>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/CropControl.tsx b/src/components/video-editor/CropControl.tsx
new file mode 100644
index 0000000..faedf1c
--- /dev/null
+++ b/src/components/video-editor/CropControl.tsx
@@ -0,0 +1,253 @@
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { type AspectRatio } from "@/utils/aspectRatioUtils";
+import { DEFAULT_SOURCE_DIMENSIONS } from "./editorDefaults";
+
+interface CropRegion {
+	x: number; // 0-1 normalized
+	y: number; // 0-1 normalized
+	width: number; // 0-1 normalized
+	height: number; // 0-1 normalized
+}
+
+interface CropControlProps {
+	videoElement: HTMLVideoElement | null;
+	cropRegion: CropRegion;
+	onCropChange: (region: CropRegion) => void;
+	aspectRatio: AspectRatio;
+}
+
+type DragHandle = "top" | "right" | "bottom" | "left" | "move" | null;
+
+export function CropControl({ videoElement, cropRegion, onCropChange }: CropControlProps) {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [isDragging, setIsDragging] = useState<DragHandle>(null);
+	const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+	const [initialCrop, setInitialCrop] = useState<CropRegion>(cropRegion);
+
+	useEffect(() => {
+		if (!videoElement || !canvasRef.current) return;
+
+		const canvas = canvasRef.current;
+		const ctx = canvas.getContext("2d", { alpha: false });
+		if (!ctx) return;
+
+		canvas.width = videoElement.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
+		canvas.height = videoElement.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
+
+		const draw = () => {
+			if (videoElement.readyState >= 2) {
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+			}
+			requestAnimationFrame(draw);
+		};
+
+		const rafId = requestAnimationFrame(draw);
+		return () => cancelAnimationFrame(rafId);
+	}, [videoElement]);
+
+	const getContainerRect = () => {
+		return (
+			containerRef.current?.getBoundingClientRect() || { width: 0, height: 0, left: 0, top: 0 }
+		);
+	};
+
+	const handlePointerDown = (e: React.PointerEvent, handle: DragHandle) => {
+		e.stopPropagation();
+		e.preventDefault();
+		setIsDragging(handle);
+		const rect = getContainerRect();
+		setDragStart({
+			x: (e.clientX - rect.left) / rect.width,
+			y: (e.clientY - rect.top) / rect.height,
+		});
+		setInitialCrop(cropRegion);
+
+		e.currentTarget.setPointerCapture(e.pointerId);
+	};
+
+	const handlePointerMove = (e: React.PointerEvent) => {
+		if (!isDragging) return;
+
+		const rect = getContainerRect();
+		const currentX = (e.clientX - rect.left) / rect.width;
+		const currentY = (e.clientY - rect.top) / rect.height;
+		const deltaX = currentX - dragStart.x;
+		const deltaY = currentY - dragStart.y;
+
+		let newCrop = { ...initialCrop };
+
+		switch (isDragging) {
+			case "top": {
+				const newY = Math.max(0, initialCrop.y + deltaY);
+				const bottom = initialCrop.y + initialCrop.height;
+				newCrop.y = Math.min(newY, bottom - 0.1);
+				newCrop.height = bottom - newCrop.y;
+				break;
+			}
+			case "bottom":
+				newCrop.height = Math.max(0.1, Math.min(initialCrop.height + deltaY, 1 - initialCrop.y));
+				break;
+			case "left": {
+				const newX = Math.max(0, initialCrop.x + deltaX);
+				const right = initialCrop.x + initialCrop.width;
+				newCrop.x = Math.min(newX, right - 0.1);
+				newCrop.width = right - newCrop.x;
+				break;
+			}
+			case "right":
+				newCrop.width = Math.max(0.1, Math.min(initialCrop.width + deltaX, 1 - initialCrop.x));
+				break;
+			case "move": {
+				newCrop.x = Math.max(0, Math.min(initialCrop.x + deltaX, 1 - initialCrop.width));
+				newCrop.y = Math.max(0, Math.min(initialCrop.y + deltaY, 1 - initialCrop.height));
+				break;
+			}
+		}
+
+		onCropChange(newCrop);
+	};
+
+	const handlePointerUp = (e: React.PointerEvent) => {
+		if (isDragging) {
+			try {
+				e.currentTarget.releasePointerCapture(e.pointerId);
+			} catch {
+				// Pointer may already be released; ignore.
+			}
+		}
+		setIsDragging(null);
+	};
+
+	const cropPixelX = cropRegion.x * 100;
+	const cropPixelY = cropRegion.y * 100;
+	const cropPixelWidth = cropRegion.width * 100;
+	const cropPixelHeight = cropRegion.height * 100;
+	const videoAspectRatio = videoElement
+		? videoElement.videoWidth / videoElement.videoHeight
+		: 16 / 9;
+	const isVideoPortrait = videoAspectRatio < 1;
+	const maxContainerWidth = isVideoPortrait ? "40vw" : "75vw";
+	const maxContainerHeight = "75vh";
+
+	return (
+		<div className="w-full p-8">
+			<div
+				ref={containerRef}
+				className="relative w-full bg-black rounded-lg overflow-visible cursor-default select-none shadow-2xl"
+				style={{
+					aspectRatio: videoAspectRatio,
+					maxWidth: maxContainerWidth,
+					maxHeight: maxContainerHeight,
+					margin: "0 auto",
+				}}
+				onPointerMove={handlePointerMove}
+				onPointerUp={handlePointerUp}
+				onPointerLeave={handlePointerUp}
+			>
+				<canvas
+					ref={canvasRef}
+					className="w-full h-full rounded-lg"
+					style={{ imageRendering: "auto" }}
+				/>
+
+				<div className="absolute inset-0 pointer-events-none" style={{ transition: "none" }}>
+					<svg
+						width="100%"
+						height="100%"
+						className="absolute inset-0"
+						style={{ transition: "none" }}
+					>
+						<defs>
+							<mask id="cropMask">
+								<rect width="100%" height="100%" fill="white" />
+								<rect
+									x={`${cropPixelX}%`}
+									y={`${cropPixelY}%`}
+									width={`${cropPixelWidth}%`}
+									height={`${cropPixelHeight}%`}
+									fill="black"
+									style={{ transition: "none" }}
+								/>
+							</mask>
+						</defs>
+						<rect
+							width="100%"
+							height="100%"
+							fill="black"
+							fillOpacity="0.6"
+							mask="url(#cropMask)"
+							style={{ transition: "none" }}
+						/>
+					</svg>
+				</div>
+
+				<div
+					className="absolute z-10 pointer-events-auto cursor-move"
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						width: `${cropPixelWidth}%`,
+						height: `${cropPixelHeight}%`,
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "move")}
+				/>
+
+				<div
+					className={cn("absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						width: `${cropPixelWidth}%`,
+						transform: "translateY(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "top")}
+				/>
+
+				<div
+					className={cn("absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY + cropPixelHeight}%`,
+						width: `${cropPixelWidth}%`,
+						transform: "translateY(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "bottom")}
+				/>
+
+				<div
+					className={cn("absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						height: `${cropPixelHeight}%`,
+						transform: "translateX(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "left")}
+				/>
+
+				<div
+					className={cn("absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX + cropPixelWidth}%`,
+						top: `${cropPixelY}%`,
+						height: `${cropPixelHeight}%`,
+						transform: "translateX(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "right")}
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/ExportDialog.tsx b/src/components/video-editor/ExportDialog.tsx
new file mode 100644
index 0000000..2032289
--- /dev/null
+++ b/src/components/video-editor/ExportDialog.tsx
@@ -0,0 +1,275 @@
+import { Download, Loader2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useScopedT } from "@/contexts/I18nContext";
+import type { ExportProgress } from "@/lib/exporter";
+
+interface ExportDialogProps {
+	isOpen: boolean;
+	onClose: () => void;
+	progress: ExportProgress | null;
+	isExporting: boolean;
+	error: string | null;
+	onCancel?: () => void;
+	exportFormat?: "mp4" | "gif";
+	exportedFilePath?: string;
+	onShowInFolder?: () => void;
+}
+
+export function ExportDialog({
+	isOpen,
+	onClose,
+	progress,
+	isExporting,
+	error,
+	onCancel,
+	exportFormat = "mp4",
+	exportedFilePath,
+	onShowInFolder,
+}: ExportDialogProps) {
+	const t = useScopedT("dialogs");
+	const [showSuccess, setShowSuccess] = useState(false);
+
+	// Reset showSuccess when a new export starts or dialog reopens
+	useEffect(() => {
+		if (isExporting) {
+			setShowSuccess(false);
+		}
+	}, [isExporting]);
+
+	// Reset showSuccess when dialog opens fresh
+	useEffect(() => {
+		if (isOpen && !isExporting && !progress) {
+			setShowSuccess(false);
+		}
+	}, [isOpen, isExporting, progress]);
+
+	useEffect(() => {
+		if (!isExporting && progress && progress.percentage >= 100 && !error) {
+			setShowSuccess(true);
+			const timer = setTimeout(() => {
+				setShowSuccess(false);
+				onClose();
+			}, 2000);
+			return () => clearTimeout(timer);
+		}
+	}, [isExporting, progress, error, onClose]);
+
+	if (!isOpen) return null;
+
+	const formatLabel = exportFormat === "gif" ? "GIF" : "Video";
+
+	// Determine if we're in the compiling phase (frames done but still exporting)
+	const isCompiling =
+		isExporting && progress && progress.percentage >= 100 && exportFormat === "gif";
+	const isFinalizing = progress?.phase === "finalizing";
+	const renderProgress = progress?.renderProgress;
+
+	// Get status message based on phase
+	const getStatusMessage = () => {
+		if (error) return t("export.tryAgain");
+		if (isCompiling || isFinalizing) {
+			if (exportFormat === "mp4") {
+				return t("export.finalizingVideo");
+			}
+			if (renderProgress !== undefined && renderProgress > 0) {
+				return t("export.compilingGifProgress", { progress: String(renderProgress) });
+			}
+			return t("export.compilingGifWait");
+		}
+		return t("export.takeMoment");
+	};
+
+	// Get title based on phase
+	const getTitle = () => {
+		if (error) return t("export.failed");
+		if (isFinalizing && exportFormat === "mp4") return t("export.finalizingVideoTitle");
+		if (isCompiling || isFinalizing) return t("export.compilingGif");
+		return t("export.exportingFormat", { format: formatLabel });
+	};
+
+	return (
+		<>
+			<div
+				className="fixed inset-0 bg-black/80 backdrop-blur-md z-50 animate-in fade-in duration-200"
+				onClick={isExporting ? undefined : onClose}
+			/>
+			<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-md animate-in zoom-in-95 duration-200">
+				<div className="flex items-center justify-between mb-6">
+					<div className="flex items-center gap-4">
+						{showSuccess ? (
+							<>
+								<div className="w-12 h-12 rounded-full bg-[#34B27B]/20 flex items-center justify-center ring-1 ring-[#34B27B]/50">
+									<Download className="w-6 h-6 text-[#34B27B]" />
+								</div>
+								<div className="flex flex-col gap-2">
+									<span className="text-xl font-bold text-slate-200 block">
+										{t("export.complete")}
+									</span>
+									<span className="text-sm text-slate-400">
+										{t("export.yourFormatReady", { format: formatLabel.toLowerCase() })}
+									</span>
+									{exportedFilePath && (
+										<Button
+											variant="secondary"
+											onClick={onShowInFolder}
+											className="mt-2 w-fit px-3 py-1 text-sm rounded-md bg-white/10 hover:bg-white/20 text-slate-200"
+										>
+											{t("export.showInFolder")}
+										</Button>
+									)}
+									{exportedFilePath && (
+										<span className="text-xs text-slate-500 break-all max-w-xs mt-1">
+											{exportedFilePath.split("/").pop()}
+										</span>
+									)}
+								</div>
+							</>
+						) : (
+							<>
+								{isExporting ? (
+									<div className="w-12 h-12 rounded-full bg-[#34B27B]/10 flex items-center justify-center">
+										<Loader2 className="w-6 h-6 text-[#34B27B] animate-spin" />
+									</div>
+								) : (
+									<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10">
+										<Download className="w-6 h-6 text-slate-200" />
+									</div>
+								)}
+								<div>
+									<span className="text-xl font-bold text-slate-200 block">{getTitle()}</span>
+									<span className="text-sm text-slate-400">{getStatusMessage()}</span>
+								</div>
+							</>
+						)}
+					</div>
+					{!isExporting && (
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={onClose}
+							className="hover:bg-white/10 text-slate-400 hover:text-white rounded-full"
+						>
+							<X className="w-5 h-5" />
+						</Button>
+					)}
+				</div>
+
+				{error && (
+					<div className="mb-6 animate-in slide-in-from-top-2">
+						<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 flex items-start gap-3">
+							<div className="p-1 bg-red-500/20 rounded-full">
+								<X className="w-3 h-3 text-red-400" />
+							</div>
+							<p className="whitespace-pre-wrap break-words text-sm text-red-400 leading-relaxed">
+								{error}
+							</p>
+						</div>
+					</div>
+				)}
+
+				{isExporting && progress && (
+					<div className="space-y-6">
+						<div className="space-y-2">
+							<div className="flex justify-between text-xs font-medium text-slate-400 uppercase tracking-wider">
+								<span>
+									{isCompiling || isFinalizing
+										? t("export.compiling")
+										: t("export.renderingFrames")}
+								</span>
+								<span className="font-mono text-slate-200">
+									{isCompiling || isFinalizing ? (
+										renderProgress !== undefined && renderProgress > 0 ? (
+											`${renderProgress}%`
+										) : (
+											<span className="flex items-center gap-2">
+												<Loader2 className="w-3 h-3 animate-spin" />
+												{t("export.processing")}
+											</span>
+										)
+									) : (
+										`${progress.percentage.toFixed(0)}%`
+									)}
+								</span>
+							</div>
+							<div className="h-2 bg-white/5 rounded-full overflow-hidden border border-white/5">
+								{isCompiling || isFinalizing ? (
+									// Show render progress if available, otherwise animated indeterminate bar
+									renderProgress !== undefined && renderProgress > 0 ? (
+										<div
+											className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
+											style={{ width: `${renderProgress}%` }}
+										/>
+									) : (
+										<div className="h-full w-full relative overflow-hidden">
+											<div
+												className="absolute h-full w-1/3 bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)]"
+												style={{
+													animation: "indeterminate 1.5s ease-in-out infinite",
+												}}
+											/>
+											<style>{`
+                        @keyframes indeterminate {
+                          0% { transform: translateX(-100%); }
+                          100% { transform: translateX(400%); }
+                        }
+                      `}</style>
+										</div>
+									)
+								) : (
+									<div
+										className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
+										style={{ width: `${Math.min(progress.percentage, 100)}%` }}
+									/>
+								)}
+							</div>
+						</div>
+
+						<div className="grid grid-cols-2 gap-4">
+							<div className="bg-white/5 rounded-xl p-3 border border-white/5">
+								<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
+									{isCompiling || isFinalizing ? t("export.status") : t("export.format")}
+								</div>
+								<div className="text-slate-200 font-medium text-sm">
+									{isFinalizing && exportFormat === "mp4"
+										? t("export.finalizing")
+										: isCompiling || isFinalizing
+											? t("export.compilingStatus")
+											: formatLabel}
+								</div>
+							</div>
+							<div className="bg-white/5 rounded-xl p-3 border border-white/5">
+								<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
+									{t("export.frames")}
+								</div>
+								<div className="text-slate-200 font-medium text-sm">
+									{progress.currentFrame} / {progress.totalFrames}
+								</div>
+							</div>
+						</div>
+
+						{onCancel && (
+							<div className="pt-2">
+								<Button
+									onClick={onCancel}
+									variant="destructive"
+									className="w-full py-6 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all rounded-xl"
+								>
+									{t("export.cancelExport")}
+								</Button>
+							</div>
+						)}
+					</div>
+				)}
+
+				{showSuccess && (
+					<div className="text-center py-4 animate-in zoom-in-95">
+						<p className="text-lg text-slate-200 font-medium">
+							{t("export.savedSuccessfully", { format: formatLabel })}
+						</p>
+					</div>
+				)}
+			</div>
+		</>
+	);
+}
diff --git a/src/components/video-editor/FormatSelector.tsx b/src/components/video-editor/FormatSelector.tsx
new file mode 100644
index 0000000..9bd54b6
--- /dev/null
+++ b/src/components/video-editor/FormatSelector.tsx
@@ -0,0 +1,69 @@
+import { Film, Image } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import type { ExportFormat } from "@/lib/exporter/types";
+import { cn } from "@/lib/utils";
+
+interface FormatSelectorProps {
+	selectedFormat: ExportFormat;
+	onFormatChange: (format: ExportFormat) => void;
+	disabled?: boolean;
+}
+
+const formatOptions: Array<{ value: ExportFormat; icon: React.ReactNode }> = [
+	{ value: "mp4", icon: <Film className="w-5 h-5" /> },
+	{ value: "gif", icon: <Image className="w-5 h-5" /> },
+];
+
+export function FormatSelector({
+	selectedFormat,
+	onFormatChange,
+	disabled = false,
+}: FormatSelectorProps) {
+	const t = useScopedT("settings");
+
+	const formatLabels: Record<ExportFormat, { label: string; description: string }> = {
+		mp4: { label: t("exportFormat.mp4Video"), description: t("exportFormat.mp4Description") },
+		gif: { label: t("exportFormat.gifAnimation"), description: t("exportFormat.gifDescription") },
+	};
+
+	return (
+		<div className="grid grid-cols-2 gap-3">
+			{formatOptions.map((option) => {
+				const isSelected = selectedFormat === option.value;
+				const labels = formatLabels[option.value];
+				return (
+					<button
+						key={option.value}
+						type="button"
+						disabled={disabled}
+						onClick={() => onFormatChange(option.value)}
+						className={cn(
+							"relative flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200",
+							"focus:outline-none focus:ring-2 focus:ring-[#34B27B]/50 focus:ring-offset-2 focus:ring-offset-[#09090b]",
+							isSelected
+								? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
+								: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20 hover:text-slate-200",
+							disabled && "opacity-50 cursor-not-allowed",
+						)}
+					>
+						<div
+							className={cn(
+								"w-10 h-10 rounded-full flex items-center justify-center transition-colors",
+								isSelected ? "bg-[#34B27B]/20 text-[#34B27B]" : "bg-white/5",
+							)}
+						>
+							{option.icon}
+						</div>
+						<div className="text-center">
+							<div className="font-medium text-sm">{labels.label}</div>
+							<div className="text-xs text-slate-500 mt-0.5">{labels.description}</div>
+						</div>
+						{isSelected && (
+							<div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34B27B]" />
+						)}
+					</button>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/src/components/video-editor/GifOptionsPanel.tsx b/src/components/video-editor/GifOptionsPanel.tsx
new file mode 100644
index 0000000..f350d46
--- /dev/null
+++ b/src/components/video-editor/GifOptionsPanel.tsx
@@ -0,0 +1,111 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	GIF_FRAME_RATES,
+	GIF_SIZE_PRESETS,
+	type GifFrameRate,
+	type GifSizePreset,
+} from "@/lib/exporter/types";
+
+interface GifOptionsPanelProps {
+	frameRate: GifFrameRate;
+	onFrameRateChange: (rate: GifFrameRate) => void;
+	loop: boolean;
+	onLoopChange: (loop: boolean) => void;
+	sizePreset: GifSizePreset;
+	onSizePresetChange: (preset: GifSizePreset) => void;
+	outputDimensions: { width: number; height: number };
+	disabled?: boolean;
+}
+
+export function GifOptionsPanel({
+	frameRate,
+	onFrameRateChange,
+	loop,
+	onLoopChange,
+	sizePreset,
+	onSizePresetChange,
+	outputDimensions,
+	disabled = false,
+}: GifOptionsPanelProps) {
+	const sizePresetOptions = Object.entries(GIF_SIZE_PRESETS).map(([key, value]) => ({
+		value: key as GifSizePreset,
+		label: value.label,
+	}));
+
+	return (
+		<div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
+			{/* Frame Rate */}
+			<div className="space-y-2">
+				<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+					Frame Rate
+				</label>
+				<Select
+					value={String(frameRate)}
+					onValueChange={(value) => onFrameRateChange(Number(value) as GifFrameRate)}
+					disabled={disabled}
+				>
+					<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
+						{GIF_FRAME_RATES.map((rate) => (
+							<SelectItem
+								key={rate.value}
+								value={String(rate.value)}
+								className="text-slate-200 focus:bg-white/10 focus:text-white"
+							>
+								{rate.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+
+			{/* Size Preset */}
+			<div className="space-y-2">
+				<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+					Output Size
+				</label>
+				<Select
+					value={sizePreset}
+					onValueChange={(value) => onSizePresetChange(value as GifSizePreset)}
+					disabled={disabled}
+				>
+					<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
+						{sizePresetOptions.map((option) => (
+							<SelectItem
+								key={option.value}
+								value={option.value}
+								className="text-slate-200 focus:bg-white/10 focus:text-white"
+							>
+								{option.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<div className="text-xs text-slate-500">
+					Output: {outputDimensions.width} × {outputDimensions.height}px
+				</div>
+			</div>
+
+			{/* Loop Toggle */}
+			<div className="flex items-center justify-between py-2">
+				<div>
+					<label className="text-sm font-medium text-slate-200">Loop Animation</label>
+					<p className="text-xs text-slate-500">GIF will play continuously</p>
+				</div>
+				<Switch checked={loop} onCheckedChange={onLoopChange} disabled={disabled} />
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/KeyboardShortcutsHelp.tsx b/src/components/video-editor/KeyboardShortcutsHelp.tsx
new file mode 100644
index 0000000..b90b377
--- /dev/null
+++ b/src/components/video-editor/KeyboardShortcutsHelp.tsx
@@ -0,0 +1,59 @@
+import { HelpCircle, Settings2 } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { FIXED_SHORTCUTS, formatBinding, SHORTCUT_ACTIONS } from "@/lib/shortcuts";
+
+export function KeyboardShortcutsHelp() {
+	const { shortcuts, isMac, openConfig } = useShortcuts();
+	const t = useScopedT("shortcuts");
+
+	return (
+		<div className="relative group">
+			<HelpCircle className="w-4 h-4 text-slate-500 hover:text-[#34B27B] transition-colors cursor-help" />
+
+			<div className="absolute right-0 top-full mt-2 w-64 bg-[#09090b] border border-white/10 rounded-lg p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-xl z-50">
+				<div className="flex items-center justify-between mb-2">
+					<span className="text-xs font-semibold text-slate-200">{t("title")}</span>
+					<button
+						type="button"
+						onClick={openConfig}
+						title="Customize shortcuts"
+						className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-[#34B27B] transition-colors"
+					>
+						<Settings2 className="w-3 h-3" />
+						{t("customize")}
+					</button>
+				</div>
+
+				<div className="space-y-1.5 text-[10px]">
+					{SHORTCUT_ACTIONS.map((action) => (
+						<div key={action} className="flex items-center justify-between">
+							<span className="text-slate-400">{t(`actions.${action}`)}</span>
+							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+								{formatBinding(shortcuts[action], isMac)}
+							</kbd>
+						</div>
+					))}
+
+					<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
+						{FIXED_SHORTCUTS.map((fixed) => (
+							<div key={fixed.i18nKey} className="flex items-center justify-between">
+								<span className="text-slate-400">
+									{t(`fixedActions.${fixed.i18nKey}`, { defaultValue: fixed.label })}
+								</span>
+								<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+									{isMac
+										? fixed.display
+												.replace(/Ctrl/g, "⌘")
+												.replace(/Shift/g, "⇧")
+												.replace(/Alt/g, "⌥")
+										: fixed.display}
+								</kbd>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/PlaybackControls.tsx b/src/components/video-editor/PlaybackControls.tsx
new file mode 100644
index 0000000..061ae5c
--- /dev/null
+++ b/src/components/video-editor/PlaybackControls.tsx
@@ -0,0 +1,111 @@
+import { Maximize, Minimize, Pause, Play } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import { cn } from "@/lib/utils";
+import { Button } from "../ui/button";
+
+interface PlaybackControlsProps {
+	isPlaying: boolean;
+	currentTime: number;
+	duration: number;
+	isFullscreen?: boolean;
+	onToggleFullscreen?: () => void;
+	onTogglePlayPause: () => void;
+	onSeek: (time: number) => void;
+}
+
+export default function PlaybackControls({
+	isPlaying,
+	currentTime,
+	duration,
+	isFullscreen = false,
+	onToggleFullscreen,
+	onTogglePlayPause,
+	onSeek,
+}: PlaybackControlsProps) {
+	const t = useScopedT("common");
+
+	function formatTime(seconds: number) {
+		if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) return "0:00";
+		const mins = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${mins}:${secs.toString().padStart(2, "0")}`;
+	}
+
+	function handleSeekChange(e: React.ChangeEvent<HTMLInputElement>) {
+		onSeek(parseFloat(e.target.value));
+	}
+
+	const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+	return (
+		<div className="flex items-center gap-2 px-1 py-0.5 rounded-full bg-black/60 backdrop-blur-md border border-white/10 shadow-xl transition-all duration-300 hover:bg-black/70 hover:border-white/20">
+			<Button
+				onClick={onTogglePlayPause}
+				size="icon"
+				className={cn(
+					"w-8 h-8 rounded-full transition-all duration-200 border border-white/10",
+					isPlaying
+						? "bg-white/10 text-white hover:bg-white/20"
+						: "bg-white text-black hover:bg-white/90 hover:scale-105 shadow-[0_0_15px_rgba(255,255,255,0.3)]",
+				)}
+				aria-label={isPlaying ? t("playback.pause") : t("playback.play")}
+			>
+				{isPlaying ? (
+					<Pause className="w-3.5 h-3.5 fill-current" />
+				) : (
+					<Play className="w-3.5 h-3.5 fill-current ml-0.5" />
+				)}
+			</Button>
+
+			<span className="text-[9px] font-medium text-slate-300 tabular-nums w-[30px] text-right">
+				{formatTime(currentTime)}
+			</span>
+
+			<div className="flex-1 relative h-6 flex items-center group">
+				{/* Custom Track Background */}
+				<div className="absolute left-0 right-0 h-0.5 bg-white/10 rounded-full overflow-hidden">
+					<div className="h-full bg-[#34B27B] rounded-full" style={{ width: `${progress}%` }} />
+				</div>
+
+				{/* Interactive Input */}
+				<input
+					type="range"
+					min="0"
+					max={duration || 100}
+					value={currentTime}
+					onChange={handleSeekChange}
+					step="0.01"
+					className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+				/>
+
+				{/* Custom Thumb (visual only, follows progress) */}
+				<div
+					className="absolute w-2.5 h-2.5 bg-white rounded-full shadow-lg pointer-events-none group-hover:scale-125 transition-transform duration-100"
+					style={{
+						left: `${progress}%`,
+						transform: "translateX(-50%)",
+					}}
+				/>
+			</div>
+
+			<span className="text-[9px] font-medium text-slate-500 tabular-nums w-[30px]">
+				{formatTime(duration)}
+			</span>
+
+			{onToggleFullscreen && (
+				<Button
+					onClick={onToggleFullscreen}
+					size="icon"
+					className="w-7 h-7 rounded-full transition-all duration-200 border border-transparent hover:bg-white/10 text-white hover:border-white/10 shrink-0 shadow-none ml-0.5"
+					aria-label={isFullscreen ? t("playback.exitFullscreen") : t("playback.fullscreen")}
+				>
+					{isFullscreen ? (
+						<Minimize className="w-3.5 h-3.5" />
+					) : (
+						<Maximize className="w-3.5 h-3.5" />
+					)}
+				</Button>
+			)}
+		</div>
+	);
+}
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
new file mode 100644
index 0000000..9b172a7
--- /dev/null
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -0,0 +1,2027 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import {
+	Bug,
+	Crop,
+	Download,
+	FileDown,
+	Film,
+	Image,
+	LayoutPanelTop,
+	Lock,
+	MousePointerClick,
+	Palette,
+	SlidersHorizontal,
+	Sparkles,
+	Star,
+	Trash2,
+	Unlock,
+	Upload,
+	X,
+} from "lucide-react";
+import { type ComponentType, useCallback, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useScopedT } from "@/contexts/I18nContext";
+import { WEBCAM_LAYOUT_PRESETS } from "@/lib/compositeLayout";
+import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import {
+	calculateEffectiveSourceDimensions,
+	GIF_FRAME_RATES,
+	GIF_SIZE_PRESETS,
+} from "@/lib/exporter";
+import { cn } from "@/lib/utils";
+import { resolveImageWallpaperUrl, WALLPAPER_PATHS } from "@/lib/wallpaper";
+import { type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
+import { getTestId } from "@/utils/getTestId";
+import ColorPicker from "../ui/color-picker";
+import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
+import { BlurSettingsPanel } from "./BlurSettingsPanel";
+import { BACKGROUND_IMAGE_ACCEPT, isSupportedBackgroundImageType } from "./backgroundImageUpload";
+import { CropControl } from "./CropControl";
+import { parseCustomPlaybackSpeedInput } from "./customPlaybackSpeed";
+import {
+	DEFAULT_CURSOR_SETTINGS,
+	DEFAULT_EDITOR_LAYOUT_SETTINGS,
+	DEFAULT_EXPORT_SETTINGS,
+	DEFAULT_GIF_SETTINGS,
+	DEFAULT_SOURCE_DIMENSIONS,
+	DEFAULT_WEBCAM_SETTINGS,
+} from "./editorDefaults";
+import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
+import type {
+	AnnotationRegion,
+	AnnotationType,
+	BlurData,
+	CropRegion,
+	FigureData,
+	PlaybackSpeed,
+	Rotation3DPreset,
+	WebcamLayoutPreset,
+	WebcamMaskShape,
+	WebcamSizePreset,
+	ZoomDepth,
+	ZoomFocus,
+	ZoomFocusMode,
+} from "./types";
+import {
+	MAX_ZOOM_SCALE,
+	MIN_ZOOM_SCALE,
+	ROTATION_3D_PRESET_ORDER,
+	SPEED_OPTIONS,
+	ZOOM_DEPTH_SCALES,
+} from "./types";
+import { getFocusBoundsForScale } from "./videoPlayback/focusUtils";
+
+function CustomSpeedInput({
+	value,
+	onChange,
+	onError,
+}: {
+	value: number;
+	onChange: (val: number) => void;
+	onError: () => void;
+}) {
+	const isPreset = SPEED_OPTIONS.some((o) => o.speed === value);
+	const [draft, setDraft] = useState(isPreset ? "" : String(value));
+	const [isFocused, setIsFocused] = useState(false);
+
+	const prevValue = useRef(value);
+	if (!isFocused && prevValue.current !== value) {
+		prevValue.current = value;
+		setDraft(isPreset ? "" : String(value));
+	}
+
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const result = parseCustomPlaybackSpeedInput(e.target.value);
+			if (result.status === "too-fast") {
+				onError();
+				return;
+			}
+
+			setDraft(result.draft);
+			if (result.status === "valid") {
+				onChange(result.speed);
+			}
+		},
+		[onChange, onError],
+	);
+
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+		const result = parseCustomPlaybackSpeedInput(draft);
+		if (result.status === "valid") {
+			setDraft(String(result.speed));
+		} else {
+			setDraft(isPreset ? "" : String(value));
+		}
+	}, [draft, isPreset, value]);
+
+	return (
+		<div className="flex items-center gap-1">
+			<input
+				type="text"
+				inputMode="decimal"
+				pattern="[0-9]*[.]?[0-9]*"
+				placeholder="--"
+				value={draft}
+				onFocus={() => setIsFocused(true)}
+				onChange={handleChange}
+				onBlur={handleBlur}
+				onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+				className="w-12 bg-white/5 border border-white/10 rounded-md px-1 py-0.5 text-[11px] font-semibold text-[#d97706] text-center focus:outline-none focus:border-[#d97706]/40"
+			/>
+			<span className="text-[11px] font-semibold text-slate-500">×</span>
+		</div>
+	);
+}
+
+function ZoomFocusCoordInput({
+	percent,
+	onChange,
+	onCommit,
+	disabled,
+	ariaLabel,
+}: {
+	percent: number;
+	onChange: (nextPercent: number) => void;
+	onCommit?: () => void;
+	disabled?: boolean;
+	ariaLabel: string;
+}) {
+	// While the input is focused (user is editing), show their draft text
+	// so partial entries like "5" or "" don't get overwritten by re-renders.
+	// When not focused, mirror the live prop value so external changes
+	// (dragging the overlay on the preview) update the displayed number in real time.
+	const [draft, setDraft] = useState<string | null>(null);
+	const display = percent.toFixed(1);
+
+	return (
+		<input
+			type="number"
+			inputMode="decimal"
+			min={0}
+			max={100}
+			step={0.1}
+			value={draft ?? display}
+			disabled={disabled}
+			aria-label={ariaLabel}
+			onFocus={() => setDraft(display)}
+			onChange={(e) => {
+				const next = e.target.value;
+				setDraft(next);
+				const parsed = Number(next);
+				if (next !== "" && Number.isFinite(parsed)) {
+					const clamped = Math.min(100, Math.max(0, parsed));
+					onChange(clamped);
+				}
+			}}
+			onBlur={() => {
+				setDraft(null);
+				onCommit?.();
+			}}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+			}}
+			className="h-7 w-full rounded-md border border-white/10 bg-white/5 px-2 text-[11px] text-slate-200 outline-none focus:border-[#34B27B]/50 focus:ring-1 focus:ring-[#34B27B]/30 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:cursor-not-allowed"
+		/>
+	);
+}
+
+const GRADIENTS = [
+	"linear-gradient( 111.6deg,  rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
+	"linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)",
+	"radial-gradient( circle farthest-corner at 3.2% 49.6%,  rgba(80,12,139,0.87) 0%, rgba(161,10,144,0.72) 83.6% )",
+	"linear-gradient( 111.6deg,  rgba(0,56,68,1) 0%, rgba(163,217,185,1) 51.5%, rgba(231, 148, 6, 1) 88.6% )",
+	"linear-gradient( 107.7deg,  rgba(235,230,44,0.55) 8.4%, rgba(252,152,15,1) 90.3% )",
+	"linear-gradient( 91deg,  rgba(72,154,78,1) 5.2%, rgba(251,206,70,1) 95.9% )",
+	"radial-gradient( circle farthest-corner at 10% 20%,  rgba(2,37,78,1) 0%, rgba(4,56,126,1) 19.7%, rgba(85,245,221,1) 100.2% )",
+	"linear-gradient( 109.6deg,  rgba(15,2,2,1) 11.2%, rgba(36,163,190,1) 91.1% )",
+	"linear-gradient(135deg, #FBC8B4, #2447B1)",
+	"linear-gradient(109.6deg, #F635A6, #36D860)",
+	"linear-gradient(90deg, #FF0101, #4DFF01)",
+	"linear-gradient(315deg, #EC0101, #5044A9)",
+	"linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
+	"linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)",
+	"linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)",
+	"linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)",
+	"linear-gradient(to right, #4facfe 0%, #00f2fe 100%)",
+	"linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)",
+	"linear-gradient(to right, #fa709a 0%, #fee140 100%)",
+	"linear-gradient(to top, #30cfd0 0%, #330867 100%)",
+	"linear-gradient(to top, #c471f5 0%, #fa71cd 100%)",
+	"linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)",
+	"linear-gradient(to top, #48c6ef 0%, #6f86d6 100%)",
+	"linear-gradient(to right, #0acffe 0%, #495aff 100%)",
+];
+
+interface SettingsPanelProps {
+	selected: string;
+	onWallpaperChange: (path: string) => void;
+	selectedZoomDepth?: ZoomDepth | null;
+	onZoomDepthChange?: (depth: ZoomDepth) => void;
+	selectedZoomCustomScale?: number | null;
+	onZoomCustomScaleChange?: (scale: number) => void;
+	onZoomCustomScaleCommit?: () => void;
+	onZoomPreviewStart?: () => void;
+	onZoomPreviewEnd?: () => void;
+	selectedZoomFocusMode?: ZoomFocusMode | null;
+	onZoomFocusModeChange?: (mode: ZoomFocusMode) => void;
+	selectedZoomFocus?: ZoomFocus | null;
+	onZoomFocusCoordinateChange?: (focus: ZoomFocus) => void;
+	onZoomFocusCoordinateCommit?: () => void;
+	hasCursorTelemetry?: boolean;
+	selectedZoomId?: string | null;
+	onZoomDelete?: (id: string) => void;
+	selectedZoomRotationPreset?: Rotation3DPreset | null;
+	onZoomRotationPresetChange?: (preset: Rotation3DPreset | null) => void;
+	selectedTrimId?: string | null;
+	onTrimDelete?: (id: string) => void;
+	shadowIntensity?: number;
+	onShadowChange?: (intensity: number) => void;
+	onShadowCommit?: () => void;
+	showBlur?: boolean;
+	onBlurChange?: (showBlur: boolean) => void;
+	motionBlurAmount?: number;
+	onMotionBlurChange?: (amount: number) => void;
+	onMotionBlurCommit?: () => void;
+	borderRadius?: number;
+	onBorderRadiusChange?: (radius: number) => void;
+	onBorderRadiusCommit?: () => void;
+	padding?: number;
+	onPaddingChange?: (padding: number) => void;
+	onPaddingCommit?: () => void;
+	cropRegion?: CropRegion;
+	onCropChange?: (region: CropRegion) => void;
+	aspectRatio: AspectRatio;
+	videoElement?: HTMLVideoElement | null;
+	exportQuality?: ExportQuality;
+	onExportQualityChange?: (quality: ExportQuality) => void;
+	// Export format settings
+	exportFormat?: ExportFormat;
+	onExportFormatChange?: (format: ExportFormat) => void;
+	gifFrameRate?: GifFrameRate;
+	onGifFrameRateChange?: (rate: GifFrameRate) => void;
+	gifLoop?: boolean;
+	onGifLoopChange?: (loop: boolean) => void;
+	gifSizePreset?: GifSizePreset;
+	onGifSizePresetChange?: (preset: GifSizePreset) => void;
+	gifOutputDimensions?: { width: number; height: number };
+	onExport?: () => void;
+	onExportPanelOpen?: () => void;
+	unsavedExport?: {
+		arrayBuffer: ArrayBuffer;
+		fileName: string;
+		format: string;
+	} | null;
+	onSaveUnsavedExport?: () => void;
+	selectedAnnotationId?: string | null;
+	annotationRegions?: AnnotationRegion[];
+	onAnnotationContentChange?: (id: string, content: string) => void;
+	onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
+	onAnnotationStyleChange?: (id: string, style: Partial<AnnotationRegion["style"]>) => void;
+	onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
+	onAnnotationDuplicate?: (id: string) => void;
+	onAnnotationDelete?: (id: string) => void;
+	selectedBlurId?: string | null;
+	blurRegions?: AnnotationRegion[];
+	onBlurDataChange?: (id: string, blurData: BlurData) => void;
+	onBlurDataCommit?: () => void;
+	onBlurDelete?: (id: string) => void;
+	selectedSpeedId?: string | null;
+	selectedSpeedValue?: PlaybackSpeed | null;
+	onSpeedChange?: (speed: PlaybackSpeed) => void;
+	onSpeedDelete?: (id: string) => void;
+	hasWebcam?: boolean;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
+	webcamMaskShape?: import("./types").WebcamMaskShape;
+	onWebcamMaskShapeChange?: (shape: import("./types").WebcamMaskShape) => void;
+	webcamSizePreset?: WebcamSizePreset;
+	onWebcamSizePresetChange?: (size: WebcamSizePreset) => void;
+	onWebcamSizePresetCommit?: () => void;
+	onSaveDiagnostic?: () => Promise<void>;
+	showCursor?: boolean;
+	onShowCursorChange?: (show: boolean) => void;
+	cursorSize?: number;
+	onCursorSizeChange?: (size: number) => void;
+	cursorSmoothing?: number;
+	onCursorSmoothingChange?: (smoothing: number) => void;
+	cursorMotionBlur?: number;
+	onCursorMotionBlurChange?: (blur: number) => void;
+	cursorClickBounce?: number;
+	onCursorClickBounceChange?: (bounce: number) => void;
+	cursorClipToBounds?: boolean;
+	onCursorClipToBoundsChange?: (clip: boolean) => void;
+	hasCursorData?: boolean;
+	showCursorSettings?: boolean;
+}
+
+export default SettingsPanel;
+
+const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
+	{ depth: 1, label: "1.25×" },
+	{ depth: 2, label: "1.5×" },
+	{ depth: 3, label: "1.8×" },
+	{ depth: 4, label: "2.2×" },
+	{ depth: 5, label: "3.5×" },
+	{ depth: 6, label: "5×" },
+];
+
+type SettingsPanelMode = "background" | "effects" | "layout" | "cursor" | "export";
+
+const MP4_EXPORT_SHORT_SIDES = {
+	medium: 720,
+	good: 1080,
+} as const;
+
+function formatSourceDimensions(videoElement?: HTMLVideoElement | null, cropRegion?: CropRegion) {
+	const width = videoElement?.videoWidth ?? 0;
+	const height = videoElement?.videoHeight ?? 0;
+
+	if (width <= 0 || height <= 0) {
+		return null;
+	}
+
+	const dimensions = calculateEffectiveSourceDimensions(width, height, cropRegion);
+	return { ...dimensions, shortSide: Math.min(dimensions.width, dimensions.height) };
+}
+
+export function SettingsPanel({
+	selected,
+	onWallpaperChange,
+	selectedZoomDepth,
+	onZoomDepthChange,
+	selectedZoomCustomScale,
+	onZoomCustomScaleChange,
+	onZoomCustomScaleCommit,
+	onZoomPreviewStart,
+	onZoomPreviewEnd,
+	selectedZoomFocusMode,
+	onZoomFocusModeChange,
+	selectedZoomFocus,
+	onZoomFocusCoordinateChange,
+	onZoomFocusCoordinateCommit,
+	hasCursorTelemetry = false,
+	selectedZoomId,
+	onZoomDelete,
+	selectedZoomRotationPreset,
+	onZoomRotationPresetChange,
+	selectedTrimId,
+	onTrimDelete,
+	shadowIntensity = 0,
+	onShadowChange,
+	onShadowCommit,
+	showBlur,
+	onBlurChange,
+	motionBlurAmount = 0,
+	onMotionBlurChange,
+	onMotionBlurCommit,
+	borderRadius = 0,
+	onBorderRadiusChange,
+	onBorderRadiusCommit,
+	padding = DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+	onPaddingChange,
+	onPaddingCommit,
+	cropRegion,
+	onCropChange,
+	aspectRatio,
+	videoElement,
+	exportQuality = DEFAULT_EXPORT_SETTINGS.quality,
+	onExportQualityChange,
+	exportFormat = DEFAULT_EXPORT_SETTINGS.format,
+	onExportFormatChange,
+	gifFrameRate = DEFAULT_GIF_SETTINGS.frameRate,
+	onGifFrameRateChange,
+	gifLoop = DEFAULT_GIF_SETTINGS.loop,
+	onGifLoopChange,
+	gifSizePreset = DEFAULT_GIF_SETTINGS.sizePreset,
+	onGifSizePresetChange,
+	gifOutputDimensions = DEFAULT_GIF_SETTINGS.outputDimensions,
+	onExport,
+	onExportPanelOpen,
+	unsavedExport,
+	onSaveUnsavedExport,
+	selectedAnnotationId,
+	annotationRegions = [],
+	onAnnotationContentChange,
+	onAnnotationTypeChange,
+	onAnnotationStyleChange,
+	onAnnotationFigureDataChange,
+	onAnnotationDuplicate,
+	onAnnotationDelete,
+	selectedBlurId,
+	blurRegions = [],
+	onBlurDataChange,
+	onBlurDataCommit,
+	onBlurDelete,
+	selectedSpeedId,
+	selectedSpeedValue,
+	onSpeedChange,
+	onSpeedDelete,
+	hasWebcam = false,
+	webcamLayoutPreset = DEFAULT_WEBCAM_SETTINGS.layoutPreset,
+	onWebcamLayoutPresetChange,
+	webcamMaskShape = DEFAULT_WEBCAM_SETTINGS.maskShape,
+	onWebcamMaskShapeChange,
+	webcamSizePreset = DEFAULT_WEBCAM_SETTINGS.sizePreset,
+	onWebcamSizePresetChange,
+	onWebcamSizePresetCommit,
+	onSaveDiagnostic,
+	showCursor = DEFAULT_CURSOR_SETTINGS.show,
+	onShowCursorChange,
+	cursorSize = DEFAULT_CURSOR_SETTINGS.size,
+	onCursorSizeChange,
+	cursorSmoothing = DEFAULT_CURSOR_SETTINGS.smoothing,
+	onCursorSmoothingChange,
+	cursorMotionBlur = DEFAULT_CURSOR_SETTINGS.motionBlur,
+	onCursorMotionBlurChange,
+	cursorClickBounce = DEFAULT_CURSOR_SETTINGS.clickBounce,
+	onCursorClickBounceChange,
+	cursorClipToBounds = DEFAULT_CURSOR_SETTINGS.clipToBounds,
+	onCursorClipToBoundsChange,
+	hasCursorData = false,
+	showCursorSettings = true,
+}: SettingsPanelProps) {
+	const t = useScopedT("settings");
+	const [activePanelMode, setActivePanelMode] = useState<SettingsPanelMode>("background");
+	const sourceDimensions = formatSourceDimensions(videoElement, cropRegion);
+	// Resolved URLs are for DOM rendering only (backgroundImage). The canonical
+	// `/wallpapers/wallpaperN.jpg` form in WALLPAPER_PATHS is what gets persisted
+	// on click — never the machine-specific file:// URL.
+	const wallpaperPreviewUrls = useMemo(() => WALLPAPER_PATHS.map(resolveImageWallpaperUrl), []);
+	const [customImages, setCustomImages] = useState<string[]>([]);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const colorPalette = [
+		"#FF0000",
+		"#FFD700",
+		"#00FF00",
+		"#FFFFFF",
+		"#0000FF",
+		"#FF6B00",
+		"#9B59B6",
+		"#E91E63",
+		"#00BCD4",
+		"#FF5722",
+		"#8BC34A",
+		"#FFC107",
+		"#34B27B",
+		"#000000",
+		"#607D8B",
+		"#795548",
+	];
+
+	const [selectedColor, setSelectedColor] = useState("#ADADAD");
+	const [gradient, setGradient] = useState<string>(GRADIENTS[0]);
+	const [cropAspectLocked, setCropAspectLocked] = useState(false);
+	const [cropAspectRatio, setCropAspectRatio] = useState("");
+	const isPortraitCanvas = isPortraitAspectRatio(aspectRatio);
+
+	const videoWidth = videoElement?.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
+	const videoHeight = videoElement?.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
+
+	const handleCropNumericChange = useCallback(
+		(field: "x" | "y" | "width" | "height", pixelValue: number) => {
+			if (!cropRegion || !onCropChange) return;
+
+			const next = { ...cropRegion };
+			switch (field) {
+				case "x":
+					next.x = Math.max(0, Math.min(pixelValue / videoWidth, 1 - next.width));
+					break;
+				case "y":
+					next.y = Math.max(0, Math.min(pixelValue / videoHeight, 1 - next.height));
+					break;
+				case "width": {
+					const newWidth = Math.max(0.05, Math.min(pixelValue / videoWidth, 1 - next.x));
+					if (cropAspectLocked && next.width > 0 && next.height > 0) {
+						const ratio = next.width / next.height;
+						const newHeight = newWidth / ratio;
+						if (next.y + newHeight <= 1) {
+							next.width = newWidth;
+							next.height = newHeight;
+						}
+					} else {
+						next.width = newWidth;
+					}
+					break;
+				}
+				case "height": {
+					const newHeight = Math.max(0.05, Math.min(pixelValue / videoHeight, 1 - next.y));
+					if (cropAspectLocked && next.width > 0 && next.height > 0) {
+						const ratio = next.width / next.height;
+						const newWidth = newHeight * ratio;
+						if (next.x + newWidth <= 1) {
+							next.height = newHeight;
+							next.width = newWidth;
+						}
+					} else {
+						next.height = newHeight;
+					}
+					break;
+				}
+			}
+
+			onCropChange(next);
+		},
+		[cropRegion, onCropChange, videoWidth, videoHeight, cropAspectLocked],
+	);
+
+	const applyCropAspectPreset = useCallback(
+		(preset: string) => {
+			if (!cropRegion || !onCropChange) return;
+
+			setCropAspectRatio(preset);
+			if (preset === "") {
+				setCropAspectLocked(false);
+				return;
+			}
+
+			const [wStr, hStr] = preset.split(":");
+			const targetRatio = Number(wStr) / Number(hStr);
+			const next = { ...cropRegion };
+
+			const nextHeight = (next.width * videoWidth) / (targetRatio * videoHeight);
+			if (next.y + nextHeight <= 1 && nextHeight >= 0.05) {
+				next.height = nextHeight;
+			} else {
+				const nextWidth = (next.height * videoHeight * targetRatio) / videoWidth;
+				if (next.x + nextWidth <= 1 && nextWidth >= 0.05) {
+					next.width = nextWidth;
+				}
+			}
+
+			onCropChange(next);
+			setCropAspectLocked(true);
+		},
+		[cropRegion, onCropChange, videoWidth, videoHeight],
+	);
+
+	const getCropPixelValue = useCallback(
+		(field: "x" | "y" | "width" | "height"): number => {
+			if (!cropRegion) return 0;
+			switch (field) {
+				case "x":
+					return Math.round(cropRegion.x * videoWidth);
+				case "y":
+					return Math.round(cropRegion.y * videoHeight);
+				case "width":
+					return Math.round(cropRegion.width * videoWidth);
+				case "height":
+					return Math.round(cropRegion.height * videoHeight);
+			}
+		},
+		[cropRegion, videoWidth, videoHeight],
+	);
+	const [showCropDropdown, setShowCropDropdown] = useState(false);
+	const handleCropToggle = () => setShowCropDropdown((open) => !open);
+
+	const zoomEnabled = Boolean(selectedZoomDepth);
+	const trimEnabled = Boolean(selectedTrimId);
+	const hasTimelineSelection = Boolean(selectedZoomId || selectedTrimId || selectedSpeedId);
+	const hasCursorPanel = showCursorSettings && hasCursorData;
+	const panelModes: Array<{
+		id: SettingsPanelMode;
+		label: string;
+		icon: ComponentType<{ className?: string }>;
+		disabled?: boolean;
+	}> = [
+		{ id: "background", label: t("background.title"), icon: Palette },
+		{ id: "effects", label: t("effects.title"), icon: SlidersHorizontal },
+		{ id: "layout", label: t("layout.title"), icon: LayoutPanelTop, disabled: !hasWebcam },
+		...(hasCursorPanel
+			? [
+					{
+						id: "cursor" as const,
+						label: t("effects.title"),
+						icon: MousePointerClick,
+					},
+				]
+			: []),
+	];
+	const exportPanelMode = {
+		id: "export" as const,
+		label: exportFormat === "gif" ? t("export.gifButton") : t("export.videoButton"),
+		icon: Download,
+	};
+	const activeModeLabel = hasTimelineSelection
+		? selectedZoomId
+			? t("zoom.level")
+			: selectedSpeedId
+				? t("speed.playbackSpeed")
+				: t("trim.deleteRegion")
+		: ([...panelModes, exportPanelMode].find((mode) => mode.id === activePanelMode)?.label ??
+			t("background.title"));
+
+	const handleDeleteClick = () => {
+		if (selectedZoomId && onZoomDelete) {
+			onZoomDelete(selectedZoomId);
+		}
+	};
+
+	const handleTrimDeleteClick = () => {
+		if (selectedTrimId && onTrimDelete) {
+			onTrimDelete(selectedTrimId);
+		}
+	};
+
+	const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const files = event.target.files;
+		if (!files || files.length === 0) return;
+
+		const file = files[0];
+
+		if (!isSupportedBackgroundImageType(file.type, file.name)) {
+			toast.error(t("imageUpload.invalidFileType"), {
+				description: t("imageUpload.jpgOnly"),
+			});
+			event.target.value = "";
+			return;
+		}
+
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			const dataUrl = e.target?.result as string;
+			if (dataUrl) {
+				setCustomImages((prev) => [...prev, dataUrl]);
+				onWallpaperChange(dataUrl);
+				toast.success(t("imageUpload.uploadSuccess"));
+			}
+		};
+
+		reader.onerror = () => {
+			toast.error(t("imageUpload.failedToUpload"), {
+				description: t("imageUpload.errorReading"),
+			});
+		};
+
+		reader.readAsDataURL(file);
+		// Reset input so the same file can be selected again
+		event.target.value = "";
+	};
+
+	const handleRemoveCustomImage = (imageUrl: string, event: React.MouseEvent) => {
+		event.stopPropagation();
+		setCustomImages((prev) => prev.filter((img) => img !== imageUrl));
+		// If the removed image was selected, clear selection
+		if (selected === imageUrl) {
+			onWallpaperChange(WALLPAPER_PATHS[0]);
+		}
+	};
+
+	// Find selected annotation
+	const selectedAnnotation = selectedAnnotationId
+		? annotationRegions.find((a) => a.id === selectedAnnotationId)
+		: null;
+	const selectedBlur = selectedBlurId
+		? blurRegions.find((region) => region.id === selectedBlurId)
+		: null;
+	const commonFooterLinks = (
+		<div className="flex gap-2 mt-3">
+			<button
+				type="button"
+				onClick={() => {
+					window.electronAPI?.openExternalUrl(
+						"https://github.com/siddharthvaddem/openscreen/issues/new/choose",
+					);
+				}}
+				className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
+			>
+				<Bug className="w-3 h-3 text-[#34B27B]" />
+				{t("support.reportBug")}
+			</button>
+			{onSaveDiagnostic && (
+				<button
+					type="button"
+					onClick={onSaveDiagnostic}
+					className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
+				>
+					<FileDown className="w-3 h-3 text-slate-400" />
+					{t("support.saveDiagnostics")}
+				</button>
+			)}
+			<button
+				type="button"
+				onClick={() => {
+					window.electronAPI?.openExternalUrl("https://github.com/siddharthvaddem/openscreen");
+				}}
+				className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
+			>
+				<Star className="w-3 h-3 text-yellow-400" />
+				{t("support.starOnGithub")}
+			</button>
+		</div>
+	);
+
+	// If an annotation is selected, show annotation settings instead
+	if (
+		selectedAnnotation &&
+		onAnnotationContentChange &&
+		onAnnotationTypeChange &&
+		onAnnotationStyleChange &&
+		onAnnotationDelete
+	) {
+		return (
+			<div className="editor-inspector-shell flex min-w-0 flex-col h-full overflow-hidden">
+				<div className="min-h-0 flex-1 overflow-hidden">
+					<AnnotationSettingsPanel
+						annotation={selectedAnnotation}
+						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
+						}
+						onDuplicate={
+							onAnnotationDuplicate ? () => onAnnotationDuplicate(selectedAnnotation.id) : undefined
+						}
+						onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
+					/>
+				</div>
+				<div className="flex-shrink-0 p-3 border-t border-white/[0.07] bg-black/25">
+					{commonFooterLinks}
+				</div>
+			</div>
+		);
+	}
+
+	if (selectedBlur && onBlurDataChange && onBlurDelete) {
+		return (
+			<div className="editor-inspector-shell flex min-w-0 flex-col h-full overflow-hidden">
+				<div className="min-h-0 flex-1 overflow-hidden">
+					<BlurSettingsPanel
+						blurRegion={selectedBlur}
+						onBlurDataChange={(blurData) => onBlurDataChange(selectedBlur.id, blurData)}
+						onBlurDataCommit={onBlurDataCommit}
+						onDelete={() => onBlurDelete(selectedBlur.id)}
+					/>
+				</div>
+				<div className="flex-shrink-0 p-3 border-t border-white/[0.07] bg-black/25">
+					{commonFooterLinks}
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="editor-inspector-shell flex min-w-0 flex-col h-full overflow-hidden">
+			<div className="flex min-h-0 flex-1">
+				<div className="settings-mode-rail flex w-11 shrink-0 flex-col items-center gap-1 border-r border-white/[0.07] bg-black/20 px-1 py-2.5">
+					{panelModes.map((mode) => {
+						const Icon = mode.icon;
+						const isActive = activePanelMode === mode.id && !hasTimelineSelection;
+						return (
+							<button
+								key={mode.id}
+								type="button"
+								title={mode.label}
+								disabled={mode.disabled}
+								onClick={() => {
+									if (mode.id === "layout" && mode.disabled) return;
+									setActivePanelMode(mode.id);
+								}}
+								className={cn(
+									"flex h-8 w-8 items-center justify-center rounded-lg border transition-all",
+									mode.disabled
+										? "cursor-not-allowed border-transparent text-slate-700"
+										: isActive
+											? "border-[#34B27B]/50 bg-[#34B27B]/15 text-[#34B27B] shadow-[0_0_0_1px_rgba(52,178,123,0.12)]"
+											: "border-transparent text-slate-500 hover:border-white/10 hover:bg-white/[0.06] hover:text-slate-200",
+								)}
+							>
+								<Icon className="h-4 w-4" />
+							</button>
+						);
+					})}
+					<button
+						type="button"
+						title={t("crop.cropVideo")}
+						onClick={handleCropToggle}
+						className="mt-1 flex h-8 w-8 items-center justify-center rounded-lg border border-transparent text-slate-500 transition-all hover:border-white/10 hover:bg-white/[0.06] hover:text-slate-200"
+					>
+						<Crop className="h-4 w-4" />
+					</button>
+					<button
+						data-testid={getTestId("export-panel-button")}
+						type="button"
+						title={exportPanelMode.label}
+						onClick={() => {
+							setActivePanelMode(exportPanelMode.id);
+							onExportPanelOpen?.();
+						}}
+						className={cn(
+							"mt-auto flex h-8 w-8 items-center justify-center rounded-lg border transition-all",
+							activePanelMode === "export" && !hasTimelineSelection
+								? "border-[#34B27B]/50 bg-[#34B27B]/15 text-[#34B27B] shadow-[0_0_0_1px_rgba(52,178,123,0.12)]"
+								: "border-transparent text-slate-500 hover:border-white/10 hover:bg-white/[0.06] hover:text-slate-200",
+						)}
+					>
+						<Download className="h-4 w-4" />
+					</button>
+				</div>
+				<div className="flex-1 overflow-y-auto custom-scrollbar p-3 pb-0">
+					<div className="mb-3 flex items-center justify-between px-1">
+						<span className="text-sm font-semibold text-slate-100">{activeModeLabel}</span>
+						<KeyboardShortcutsHelp />
+					</div>
+					{zoomEnabled && (
+						<div className="editor-panel-section mb-3 space-y-3 px-1">
+							<div className="flex items-center justify-between">
+								<span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">
+									{t("zoom.level")}
+								</span>
+								<span className="rounded-full border border-[#34B27B]/25 bg-[#34B27B]/10 px-2 py-0.5 text-[11px] font-semibold tabular-nums text-[#34B27B]">
+									{(
+										selectedZoomCustomScale ??
+										(selectedZoomDepth != null
+											? ZOOM_DEPTH_SCALES[selectedZoomDepth]
+											: MIN_ZOOM_SCALE)
+									).toFixed(2)}
+									×
+								</span>
+							</div>
+							<div className="grid grid-cols-6 gap-1">
+								{ZOOM_DEPTH_OPTIONS.map((option) => {
+									const effectiveScale =
+										selectedZoomCustomScale ??
+										(selectedZoomDepth != null ? ZOOM_DEPTH_SCALES[selectedZoomDepth] : null);
+									const isActive = effectiveScale === ZOOM_DEPTH_SCALES[option.depth];
+									return (
+										<Button
+											key={option.depth}
+											type="button"
+											disabled={!zoomEnabled}
+											onClick={() => onZoomDepthChange?.(option.depth)}
+											className={cn(
+												"h-8 w-full rounded-lg border px-1 text-center transition-all duration-150 ease-out",
+												zoomEnabled
+													? "opacity-100 cursor-pointer"
+													: "opacity-40 cursor-not-allowed",
+												isActive
+													? "border-[#34B27B]/70 bg-[#34B27B] text-white shadow-[0_8px_20px_rgba(52,178,123,0.18)]"
+													: "border-white/[0.06] bg-white/[0.035] text-slate-400 hover:bg-white/[0.075] hover:border-white/15 hover:text-slate-200",
+											)}
+										>
+											<span className="text-[11px] font-semibold">{option.label}</span>
+										</Button>
+									);
+								})}
+							</div>
+							{zoomEnabled && (
+								<div>
+									<SliderPrimitive.Root
+										min={MIN_ZOOM_SCALE}
+										max={MAX_ZOOM_SCALE}
+										step={0.01}
+										value={[
+											selectedZoomCustomScale ??
+												(selectedZoomDepth != null
+													? ZOOM_DEPTH_SCALES[selectedZoomDepth]
+													: MIN_ZOOM_SCALE),
+										]}
+										onValueChange={(values) => onZoomCustomScaleChange?.(values[0])}
+										onValueCommit={() => onZoomCustomScaleCommit?.()}
+										disabled={!zoomEnabled}
+										className="relative flex w-full touch-none select-none items-center py-1"
+									>
+										<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full border border-white/10 bg-white/5">
+											<SliderPrimitive.Range
+												className={cn(
+													"absolute h-full transition-colors duration-150",
+													selectedZoomCustomScale != null ? "bg-[#34B27B]" : "bg-white/20",
+												)}
+											/>
+										</SliderPrimitive.Track>
+										<SliderPrimitive.Thumb
+											className={cn(
+												"block h-3.5 w-3.5 rounded-full border-2 shadow transition-all duration-150",
+												"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#34B27B]/50",
+												"disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing",
+												selectedZoomCustomScale != null
+													? "border-[#34B27B] bg-[#34B27B] shadow-[0_0_6px_rgba(52,178,123,0.4)]"
+													: "border-white/20 bg-[#2a2a30] hover:border-white/40",
+											)}
+										/>
+									</SliderPrimitive.Root>
+									<div className="flex justify-between text-[10px] text-slate-600 mt-1">
+										<span>{MIN_ZOOM_SCALE.toFixed(1)}×</span>
+										<span>{MAX_ZOOM_SCALE.toFixed(1)}×</span>
+									</div>
+								</div>
+							)}
+							{zoomEnabled && hasCursorTelemetry && (
+								<div className="flex items-center justify-between gap-3">
+									<span className="text-[11px] font-medium text-slate-400">
+										{t("zoom.focusMode.title")}
+									</span>
+									<div className="grid w-32 grid-cols-2 gap-0.5 rounded-lg border border-white/[0.06] bg-white/[0.035] p-0.5">
+										{(["manual", "auto"] as const).map((mode) => {
+											const isActive = selectedZoomFocusMode === mode;
+											return (
+												<Button
+													key={mode}
+													type="button"
+													onClick={() => onZoomFocusModeChange?.(mode)}
+													className={cn(
+														"h-6 w-full rounded-md border px-1 text-center transition-all duration-150 ease-out cursor-pointer",
+														isActive
+															? "border-[#34B27B]/50 bg-[#34B27B] text-white"
+															: "border-transparent bg-transparent text-slate-400 hover:bg-white/[0.06] hover:text-slate-200",
+													)}
+												>
+													<span className="text-[10px] font-semibold capitalize">
+														{t(`zoom.focusMode.${mode}`)}
+													</span>
+												</Button>
+											);
+										})}
+									</div>
+								</div>
+							)}
+							{zoomEnabled && onZoomPreviewStart && onZoomPreviewEnd && (
+								<Button
+									type="button"
+									onPointerDown={() => onZoomPreviewStart()}
+									onPointerUp={() => onZoomPreviewEnd()}
+									onPointerLeave={() => onZoomPreviewEnd()}
+									onPointerCancel={() => onZoomPreviewEnd()}
+									onKeyDown={(e) => {
+										if ((e.key === " " || e.key === "Enter") && !e.repeat) {
+											e.preventDefault();
+											onZoomPreviewStart();
+										}
+									}}
+									onKeyUp={(e) => {
+										if (e.key === " " || e.key === "Enter") {
+											e.preventDefault();
+											onZoomPreviewEnd();
+										}
+									}}
+									onBlur={() => onZoomPreviewEnd()}
+									className="h-7 w-full select-none rounded-md border border-white/[0.08] bg-white/[0.04] text-[10px] font-semibold text-slate-300 transition-all duration-150 ease-out hover:bg-white/[0.08] hover:text-slate-100 active:border-[#34B27B]/50 active:bg-[#34B27B] active:text-white cursor-pointer"
+								>
+									{t("zoom.previewHold")}
+								</Button>
+							)}
+							{zoomEnabled &&
+								selectedZoomFocusMode !== "auto" &&
+								selectedZoomFocus &&
+								onZoomFocusCoordinateChange &&
+								(() => {
+									const effectiveZoomScale =
+										selectedZoomCustomScale ??
+										(selectedZoomDepth != null
+											? ZOOM_DEPTH_SCALES[selectedZoomDepth]
+											: MIN_ZOOM_SCALE);
+									const bounds = getFocusBoundsForScale(effectiveZoomScale);
+									const xRange = bounds.maxX - bounds.minX;
+									const yRange = bounds.maxY - bounds.minY;
+									const focusToPercentX = (cx: number) =>
+										xRange <= 0
+											? 50
+											: Math.max(0, Math.min(100, ((cx - bounds.minX) / xRange) * 100));
+									const focusToPercentY = (cy: number) =>
+										yRange <= 0
+											? 50
+											: Math.max(0, Math.min(100, ((cy - bounds.minY) / yRange) * 100));
+									const percentToFocusX = (p: number) =>
+										xRange <= 0 ? bounds.minX : bounds.minX + (p / 100) * xRange;
+									const percentToFocusY = (p: number) =>
+										yRange <= 0 ? bounds.minY : bounds.minY + (p / 100) * yRange;
+									return (
+										<div>
+											<span className="text-[11px] font-medium text-slate-400 mb-1.5 block">
+												{t("zoom.position.title")}
+											</span>
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col gap-1">
+													<label className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+														{t("zoom.position.x")}
+													</label>
+													<ZoomFocusCoordInput
+														ariaLabel={t("zoom.position.x")}
+														percent={focusToPercentX(selectedZoomFocus.cx)}
+														onChange={(p) =>
+															onZoomFocusCoordinateChange({
+																cx: percentToFocusX(p),
+																cy: selectedZoomFocus.cy,
+															})
+														}
+														onCommit={onZoomFocusCoordinateCommit}
+													/>
+												</div>
+												<div className="flex flex-col gap-1">
+													<label className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+														{t("zoom.position.y")}
+													</label>
+													<ZoomFocusCoordInput
+														ariaLabel={t("zoom.position.y")}
+														percent={focusToPercentY(selectedZoomFocus.cy)}
+														onChange={(p) =>
+															onZoomFocusCoordinateChange({
+																cx: selectedZoomFocus.cx,
+																cy: percentToFocusY(p),
+															})
+														}
+														onCommit={onZoomFocusCoordinateCommit}
+													/>
+												</div>
+											</div>
+										</div>
+									);
+								})()}
+							{zoomEnabled && (
+								<div>
+									<span className="text-[11px] font-medium text-slate-400 mb-1.5 block">
+										{t("zoom.threeD.title")}
+									</span>
+									<div className="grid grid-cols-3 gap-1.5">
+										{ROTATION_3D_PRESET_ORDER.map((preset) => {
+											const isActive = selectedZoomRotationPreset === preset;
+											return (
+												<Button
+													key={preset}
+													type="button"
+													onClick={() => onZoomRotationPresetChange?.(isActive ? null : preset)}
+													className={cn(
+														"h-8 w-full rounded-lg border px-1 text-center transition-all duration-150 ease-out cursor-pointer",
+														isActive
+															? "border-[#34B27B]/60 bg-[#34B27B] text-white"
+															: "border-white/[0.06] bg-white/[0.035] text-slate-400 hover:bg-white/[0.075] hover:border-white/15 hover:text-slate-200",
+													)}
+												>
+													<span className="text-xs font-semibold capitalize">
+														{t(`zoom.threeD.preset.${preset}`)}
+													</span>
+												</Button>
+											);
+										})}
+									</div>
+								</div>
+							)}
+
+							{zoomEnabled && (
+								<Button
+									onClick={handleDeleteClick}
+									variant="destructive"
+									size="sm"
+									className="mt-1 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+								>
+									<Trash2 className="w-3 h-3" />
+									{t("zoom.deleteZoom")}
+								</Button>
+							)}
+						</div>
+					)}
+
+					{trimEnabled && (
+						<div className="mb-4">
+							<Button
+								onClick={handleTrimDeleteClick}
+								variant="destructive"
+								size="sm"
+								className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+							>
+								<Trash2 className="w-3 h-3" />
+								{t("trim.deleteRegion")}
+							</Button>
+						</div>
+					)}
+
+					{selectedSpeedId && (
+						<div className="editor-panel-section mb-3 space-y-3 px-1">
+							<div className="flex items-center justify-between">
+								<span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">
+									{t("speed.playbackSpeed")}
+								</span>
+								{selectedSpeedId && selectedSpeedValue && (
+									<span className="rounded-full border border-[#d97706]/25 bg-[#d97706]/10 px-2 py-0.5 text-[11px] font-semibold tabular-nums text-[#d97706]">
+										{SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)?.label ??
+											`${selectedSpeedValue}×`}
+									</span>
+								)}
+							</div>
+							<div className="grid grid-cols-5 gap-1">
+								{SPEED_OPTIONS.map((option) => {
+									const isActive = selectedSpeedValue === option.speed;
+									return (
+										<Button
+											key={option.speed}
+											type="button"
+											disabled={!selectedSpeedId}
+											onClick={() => onSpeedChange?.(option.speed)}
+											className={cn(
+												"h-8 w-full rounded-lg border px-1 text-center transition-all duration-150 ease-out",
+												selectedSpeedId
+													? "opacity-100 cursor-pointer"
+													: "opacity-40 cursor-not-allowed",
+												isActive
+													? "border-[#d97706]/70 bg-[#d97706] text-white shadow-[0_8px_20px_rgba(217,119,6,0.16)]"
+													: "border-white/[0.06] bg-white/[0.035] text-slate-400 hover:bg-white/[0.075] hover:border-white/15 hover:text-slate-200",
+											)}
+										>
+											<span className="text-[11px] font-semibold">{option.label}</span>
+										</Button>
+									);
+								})}
+							</div>
+							<div className="flex items-center justify-between rounded-lg border border-white/[0.06] bg-white/[0.03] px-2 py-1.5">
+								<span
+									className={cn(
+										"text-[11px]",
+										selectedSpeedId ? "text-slate-500" : "text-slate-600",
+									)}
+								>
+									{t("speed.customPlaybackSpeed")}
+								</span>
+								{selectedSpeedId ? (
+									<CustomSpeedInput
+										value={selectedSpeedValue ?? 1}
+										onChange={(val) => onSpeedChange?.(val)}
+										onError={() => toast.error(t("speed.maxSpeedError"))}
+									/>
+								) : (
+									<div className="flex items-center gap-1 opacity-40">
+										<div className="w-12 bg-white/5 border border-white/10 rounded-md px-1 py-0.5 text-[11px] font-semibold text-slate-600 text-center">
+											--
+										</div>
+										<span className="text-[11px] font-semibold text-slate-600">×</span>
+									</div>
+								)}
+							</div>
+							{selectedSpeedId && (
+								<Button
+									onClick={() => selectedSpeedId && onSpeedDelete?.(selectedSpeedId)}
+									variant="destructive"
+									size="sm"
+									className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+								>
+									<Trash2 className="w-3 h-3" />
+									{t("speed.deleteRegion")}
+								</Button>
+							)}
+						</div>
+					)}
+
+					{!hasTimelineSelection && (
+						<Accordion type="multiple" value={[activePanelMode]} className="space-y-2">
+							{hasWebcam && activePanelMode === "layout" && (
+								<AccordionItem value="layout" className="editor-panel-section px-3">
+									<AccordionTrigger className="py-2.5 hover:no-underline">
+										<div className="flex items-center gap-2">
+											<Sparkles className="w-4 h-4 text-[#34B27B]" />
+											<span className="text-xs font-medium">{t("layout.title")}</span>
+										</div>
+									</AccordionTrigger>
+									<AccordionContent className="pb-3">
+										<div className="p-2 rounded-lg editor-control-surface">
+											<div className="text-[10px] font-medium text-slate-300 mb-1.5">
+												{t("layout.preset")}
+											</div>
+											<Select
+												value={webcamLayoutPreset}
+												onValueChange={(value: WebcamLayoutPreset) =>
+													onWebcamLayoutPresetChange?.(value)
+												}
+											>
+												<SelectTrigger className="h-8 bg-black/20 border-white/10 text-xs">
+													<SelectValue placeholder={t("layout.selectPreset")} />
+												</SelectTrigger>
+												<SelectContent>
+													{WEBCAM_LAYOUT_PRESETS.filter((preset) => {
+														if (preset.value === "picture-in-picture") return true;
+														if (preset.value === "no-webcam") return true;
+														if (preset.value === "vertical-stack") return isPortraitCanvas;
+														return !isPortraitCanvas;
+													}).map((preset) => (
+														<SelectItem key={preset.value} value={preset.value} className="text-xs">
+															{preset.value === "picture-in-picture"
+																? t("layout.pictureInPicture")
+																: preset.value === "vertical-stack"
+																	? t("layout.verticalStack")
+																	: preset.value === "no-webcam"
+																		? t("layout.noWebcam")
+																		: t("layout.dualFrame")}
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</div>
+										{webcamLayoutPreset === "picture-in-picture" && (
+											<div className="mt-2 p-2 rounded-lg editor-control-surface">
+												<div className="text-[10px] font-medium text-slate-300 mb-1.5">
+													{t("layout.webcamShape")}
+												</div>
+												<div className="grid grid-cols-4 gap-1.5">
+													{(
+														[
+															{ value: "rectangle", label: "Rect" },
+															{ value: "circle", label: "Circle" },
+															{ value: "square", label: "Square" },
+															{ value: "rounded", label: "Rounded" },
+														] as Array<{ value: WebcamMaskShape; label: string }>
+													).map((shape) => (
+														<button
+															key={shape.value}
+															type="button"
+															onClick={() => onWebcamMaskShapeChange?.(shape.value)}
+															className={cn(
+																"h-10 rounded-lg border flex flex-col items-center justify-center gap-0.5 transition-all",
+																webcamMaskShape === shape.value
+																	? "bg-[#34B27B] border-[#34B27B] text-white"
+																	: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-slate-400",
+															)}
+														>
+															<svg
+																width="16"
+																height="16"
+																viewBox="0 0 16 16"
+																fill="none"
+																xmlns="http://www.w3.org/2000/svg"
+															>
+																{shape.value === "rectangle" && (
+																	<rect
+																		x="1"
+																		y="3"
+																		width="14"
+																		height="10"
+																		rx="2"
+																		stroke="currentColor"
+																		strokeWidth="1.5"
+																	/>
+																)}
+																{shape.value === "circle" && (
+																	<circle
+																		cx="8"
+																		cy="8"
+																		r="6.5"
+																		stroke="currentColor"
+																		strokeWidth="1.5"
+																	/>
+																)}
+																{shape.value === "square" && (
+																	<rect
+																		x="2"
+																		y="2"
+																		width="12"
+																		height="12"
+																		rx="1"
+																		stroke="currentColor"
+																		strokeWidth="1.5"
+																	/>
+																)}
+																{shape.value === "rounded" && (
+																	<rect
+																		x="1"
+																		y="3"
+																		width="14"
+																		height="10"
+																		rx="5"
+																		stroke="currentColor"
+																		strokeWidth="1.5"
+																	/>
+																)}
+															</svg>
+															<span className="text-[8px] leading-none">{shape.label}</span>
+														</button>
+													))}
+												</div>
+											</div>
+										)}
+										{webcamLayoutPreset === "picture-in-picture" && (
+											<div className="p-2 rounded-lg editor-control-surface mt-2">
+												<div className="flex items-center justify-between mb-1.5">
+													<div className="text-[10px] font-medium text-slate-300">
+														{t("layout.webcamSize")}
+													</div>
+													<div className="text-[10px] font-medium text-slate-400">
+														{webcamSizePreset}%
+													</div>
+												</div>
+												<Slider
+													value={[webcamSizePreset]}
+													onValueChange={(values) => onWebcamSizePresetChange?.(values[0])}
+													onValueCommit={() => onWebcamSizePresetCommit?.()}
+													min={10}
+													max={50}
+													step={1}
+													className="w-full"
+												/>
+											</div>
+										)}
+									</AccordionContent>
+								</AccordionItem>
+							)}
+
+							{(activePanelMode === "effects" || activePanelMode === "cursor") && (
+								<AccordionItem value={activePanelMode} className="editor-panel-section px-3">
+									<AccordionTrigger className="py-2.5 hover:no-underline">
+										<div className="flex items-center gap-2">
+											{activePanelMode === "cursor" ? (
+												<MousePointerClick className="w-4 h-4 text-[#34B27B]" />
+											) : (
+												<SlidersHorizontal className="w-4 h-4 text-[#34B27B]" />
+											)}
+											<span className="text-xs font-medium">{t("effects.title")}</span>
+										</div>
+									</AccordionTrigger>
+									<AccordionContent className="pb-3">
+										{activePanelMode === "effects" && (
+											<>
+												<div className="grid grid-cols-2 gap-2 mb-3">
+													<div className="flex items-center justify-between p-2 rounded-lg editor-control-surface">
+														<div className="text-[10px] font-medium text-slate-300">
+															{t("effects.blurBg")}
+														</div>
+														<Switch
+															checked={showBlur}
+															onCheckedChange={onBlurChange}
+															className="data-[state=checked]:bg-[#34B27B] scale-90"
+														/>
+													</div>
+												</div>
+
+												<div className="grid grid-cols-2 gap-2">
+													<div className="p-2 rounded-lg editor-control-surface">
+														<div className="flex items-center justify-between mb-1">
+															<div className="text-[10px] font-medium text-slate-300">
+																{t("effects.motionBlur")}
+															</div>
+															<span className="text-[10px] text-slate-500 font-mono">
+																{motionBlurAmount === 0
+																	? t("effects.off")
+																	: motionBlurAmount.toFixed(2)}
+															</span>
+														</div>
+														<Slider
+															value={[motionBlurAmount]}
+															onValueChange={(values) => onMotionBlurChange?.(values[0])}
+															onValueCommit={() => onMotionBlurCommit?.()}
+															min={0}
+															max={1}
+															step={0.01}
+															className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+														/>
+													</div>
+													<div className="p-2 rounded-lg editor-control-surface">
+														<div className="flex items-center justify-between mb-1">
+															<div className="text-[10px] font-medium text-slate-300">
+																{t("effects.shadow")}
+															</div>
+															<span className="text-[10px] text-slate-500 font-mono">
+																{Math.round(shadowIntensity * 100)}%
+															</span>
+														</div>
+														<Slider
+															value={[shadowIntensity]}
+															onValueChange={(values) => onShadowChange?.(values[0])}
+															onValueCommit={() => onShadowCommit?.()}
+															min={0}
+															max={1}
+															step={0.01}
+															className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+														/>
+													</div>
+													<div className="p-2 rounded-lg editor-control-surface">
+														<div className="flex items-center justify-between mb-1">
+															<div className="text-[10px] font-medium text-slate-300">
+																{t("effects.roundness")}
+															</div>
+															<span className="text-[10px] text-slate-500 font-mono">
+																{borderRadius}px
+															</span>
+														</div>
+														<Slider
+															value={[borderRadius]}
+															onValueChange={(values) => onBorderRadiusChange?.(values[0])}
+															onValueCommit={() => onBorderRadiusCommit?.()}
+															min={0}
+															max={64}
+															step={0.5}
+															className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+														/>
+													</div>
+													<div
+														className={`p-2 rounded-lg editor-control-surface ${webcamLayoutPreset === "vertical-stack" ? "opacity-40 pointer-events-none" : ""}`}
+													>
+														<div className="flex items-center justify-between mb-1">
+															<div className="text-[10px] font-medium text-slate-300">
+																{t("effects.padding")}
+															</div>
+															<span className="text-[10px] text-slate-500 font-mono">
+																{webcamLayoutPreset === "vertical-stack" ? "—" : `${padding}%`}
+															</span>
+														</div>
+														<Slider
+															value={[webcamLayoutPreset === "vertical-stack" ? 0 : padding]}
+															onValueChange={(values) => onPaddingChange?.(values[0])}
+															onValueCommit={() => onPaddingCommit?.()}
+															min={0}
+															max={100}
+															step={1}
+															disabled={webcamLayoutPreset === "vertical-stack"}
+															className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+														/>
+													</div>
+												</div>
+											</>
+										)}
+
+										{activePanelMode === "cursor" && showCursorSettings && hasCursorData && (
+											<div className="p-2 rounded-lg editor-control-surface mt-2 space-y-3">
+												<div className="flex items-center justify-between">
+													<div className="text-[10px] font-medium text-slate-300">
+														{t("cursor.show")}
+													</div>
+													<Switch
+														checked={showCursor}
+														onCheckedChange={onShowCursorChange}
+														className="data-[state=checked]:bg-[#34B27B] scale-90"
+													/>
+												</div>
+												{showCursor && (
+													<>
+														<div className="flex items-center justify-between">
+															<div className="text-[10px] font-medium text-slate-300">
+																{t("cursor.clipToBounds")}
+															</div>
+															<Switch
+																checked={cursorClipToBounds}
+																onCheckedChange={onCursorClipToBoundsChange}
+																className="data-[state=checked]:bg-[#34B27B] scale-90"
+																aria-label={t("cursor.clipToBounds")}
+															/>
+														</div>
+														<div className="grid grid-cols-2 gap-2">
+															<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+																<div className="flex items-center justify-between mb-1">
+																	<div className="text-[10px] font-medium text-slate-300">
+																		{t("cursor.size")}
+																	</div>
+																	<span className="text-[10px] text-slate-500 font-mono">
+																		{cursorSize.toFixed(1)}
+																	</span>
+																</div>
+																<Slider
+																	value={[cursorSize]}
+																	onValueChange={(values) => onCursorSizeChange?.(values[0])}
+																	min={0.5}
+																	max={10}
+																	step={0.1}
+																	className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+																/>
+															</div>
+															<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+																<div className="flex items-center justify-between mb-1">
+																	<div className="text-[10px] font-medium text-slate-300">
+																		{t("cursor.smoothing")}
+																	</div>
+																	<span className="text-[10px] text-slate-500 font-mono">
+																		{Math.round(cursorSmoothing * 100)}%
+																	</span>
+																</div>
+																<Slider
+																	value={[cursorSmoothing]}
+																	onValueChange={(values) => onCursorSmoothingChange?.(values[0])}
+																	min={0}
+																	max={1}
+																	step={0.01}
+																	className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+																/>
+															</div>
+															<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+																<div className="flex items-center justify-between mb-1">
+																	<div className="text-[10px] font-medium text-slate-300">
+																		{t("cursor.motionBlur")}
+																	</div>
+																	<span className="text-[10px] text-slate-500 font-mono">
+																		{Math.round(cursorMotionBlur * 100)}%
+																	</span>
+																</div>
+																<Slider
+																	value={[cursorMotionBlur]}
+																	onValueChange={(values) => onCursorMotionBlurChange?.(values[0])}
+																	min={0}
+																	max={1}
+																	step={0.01}
+																	className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+																/>
+															</div>
+															<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+																<div className="flex items-center justify-between mb-1">
+																	<div className="text-[10px] font-medium text-slate-300">
+																		{t("cursor.clickBounce")}
+																	</div>
+																	<span className="text-[10px] text-slate-500 font-mono">
+																		{cursorClickBounce.toFixed(1)}
+																	</span>
+																</div>
+																<Slider
+																	value={[cursorClickBounce]}
+																	onValueChange={(values) => onCursorClickBounceChange?.(values[0])}
+																	min={0}
+																	max={5}
+																	step={0.1}
+																	className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+																/>
+															</div>
+														</div>
+													</>
+												)}
+											</div>
+										)}
+									</AccordionContent>
+								</AccordionItem>
+							)}
+
+							{activePanelMode === "background" && (
+								<AccordionItem value="background" className="editor-panel-section px-3">
+									<AccordionTrigger className="py-2.5 hover:no-underline">
+										<div className="flex items-center gap-2">
+											<Palette className="w-4 h-4 text-[#34B27B]" />
+											<span className="text-xs font-medium">{t("background.title")}</span>
+										</div>
+									</AccordionTrigger>
+									<AccordionContent className="pb-3">
+										<Tabs defaultValue="image" className="w-full">
+											<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+												<TabsTrigger
+													value="image"
+													className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+												>
+													{t("background.image")}
+												</TabsTrigger>
+												<TabsTrigger
+													value="color"
+													className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+												>
+													{t("background.color")}
+												</TabsTrigger>
+												<TabsTrigger
+													value="gradient"
+													className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+												>
+													{t("background.gradient")}
+												</TabsTrigger>
+											</TabsList>
+
+											<div className="overflow-y-auto custom-scrollbar">
+												<TabsContent value="image" className="mt-0 space-y-2">
+													<input
+														type="file"
+														ref={fileInputRef}
+														onChange={handleImageUpload}
+														accept={BACKGROUND_IMAGE_ACCEPT}
+														className="hidden"
+													/>
+													<Button
+														onClick={() => fileInputRef.current?.click()}
+														variant="outline"
+														className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#34B27B] hover:text-white hover:border-[#34B27B] transition-all h-7 text-[10px]"
+													>
+														<Upload className="w-3 h-3" />
+														{t("background.uploadCustom")}
+													</Button>
+
+													<div className="grid grid-cols-6 gap-2">
+														{customImages.map((imageUrl, idx) => {
+															const isSelected = selected === imageUrl;
+															return (
+																<div
+																	key={`custom-${idx}`}
+																	className={cn(
+																		"aspect-square w-8 h-8 rounded-lg border overflow-hidden cursor-pointer transition-all duration-150 relative group shadow-sm",
+																		isSelected
+																			? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
+																			: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
+																	)}
+																	style={{
+																		backgroundImage: `url(${imageUrl})`,
+																		backgroundSize: "cover",
+																		backgroundPosition: "center",
+																	}}
+																	onClick={() => onWallpaperChange(imageUrl)}
+																	role="button"
+																>
+																	<button
+																		onClick={(e) => handleRemoveCustomImage(imageUrl, e)}
+																		className="absolute top-0.5 right-0.5 w-3 h-3 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
+																	>
+																		<X className="w-2 h-2 text-white" />
+																	</button>
+																</div>
+															);
+														})}
+
+														{WALLPAPER_PATHS.map((canonicalPath, i) => {
+															const previewUrl = wallpaperPreviewUrls[i] ?? canonicalPath;
+															const isSelected = selected === canonicalPath;
+															return (
+																<div
+																	key={canonicalPath}
+																	className={cn(
+																		"aspect-square w-8 h-8 rounded-lg border overflow-hidden cursor-pointer transition-all duration-150 shadow-sm",
+																		isSelected
+																			? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
+																			: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
+																	)}
+																	style={{
+																		backgroundImage: `url(${previewUrl})`,
+																		backgroundSize: "cover",
+																		backgroundPosition: "center",
+																	}}
+																	onClick={() => onWallpaperChange(canonicalPath)}
+																	role="button"
+																/>
+															);
+														})}
+													</div>
+												</TabsContent>
+
+												<TabsContent value="color" className="mt-0">
+													<ColorPicker
+														selectedColor={selectedColor}
+														colorPalette={colorPalette}
+														translations={{
+															colorWheel: t("background.colorWheel"),
+															colorPalette: t("background.colorPalette"),
+														}}
+														onUpdateColor={(color) => {
+															setSelectedColor(color);
+															onWallpaperChange(color);
+														}}
+													/>
+												</TabsContent>
+
+												<TabsContent value="gradient" className="mt-0">
+													<div className="grid grid-cols-6 gap-2">
+														{GRADIENTS.map((g, idx) => (
+															<div
+																key={g}
+																className={cn(
+																	"aspect-square w-8 h-8 rounded-lg border overflow-hidden cursor-pointer transition-all duration-150 shadow-sm",
+																	gradient === g
+																		? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
+																		: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
+																)}
+																style={{ background: g }}
+																aria-label={t("background.gradientLabel", {
+																	index: idx + 1,
+																})}
+																onClick={() => {
+																	setGradient(g);
+																	onWallpaperChange(g);
+																}}
+																role="button"
+															/>
+														))}
+													</div>
+												</TabsContent>
+											</div>
+										</Tabs>
+									</AccordionContent>
+								</AccordionItem>
+							)}
+						</Accordion>
+					)}
+				</div>
+			</div>
+
+			{showCropDropdown && cropRegion && onCropChange && (
+				<>
+					<div
+						className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 animate-in fade-in duration-200"
+						onClick={() => setShowCropDropdown(false)}
+					/>
+					<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-5xl max-h-[90vh] overflow-auto animate-in zoom-in-95 duration-200">
+						<div className="flex items-center justify-between mb-6">
+							<div>
+								<span className="text-xl font-bold text-slate-200">{t("crop.cropVideo")}</span>
+								<p className="text-sm text-slate-400 mt-2">{t("crop.dragInstruction")}</p>
+							</div>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={() => setShowCropDropdown(false)}
+								className="hover:bg-white/10 text-slate-400 hover:text-white"
+							>
+								<X className="w-5 h-5" />
+							</Button>
+						</div>
+						<CropControl
+							videoElement={videoElement || null}
+							cropRegion={cropRegion}
+							onCropChange={onCropChange}
+							aspectRatio={aspectRatio}
+						/>
+						<div className="mt-6 space-y-4">
+							<div className="flex flex-wrap items-end gap-3">
+								{[
+									{ label: "X", field: "x" as const, max: videoWidth },
+									{ label: "Y", field: "y" as const, max: videoHeight },
+									{ label: "W", field: "width" as const, max: videoWidth },
+									{ label: "H", field: "height" as const, max: videoHeight },
+								].map(({ label, field, max }) => (
+									<div key={field} className="flex flex-col gap-1">
+										<label className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+											{label}
+										</label>
+										<input
+											type="number"
+											min={0}
+											max={max}
+											value={getCropPixelValue(field)}
+											onChange={(e) => handleCropNumericChange(field, Number(e.target.value))}
+											className="w-[90px] h-8 rounded-md border border-white/10 bg-white/5 px-2 text-xs text-slate-200 outline-none focus:border-[#34B27B]/50 focus:ring-1 focus:ring-[#34B27B]/30 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+										/>
+									</div>
+								))}
+
+								<div className="flex flex-col gap-1">
+									<label className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+										{t("crop.ratio")}
+									</label>
+									<div className="flex items-center gap-1.5">
+										<select
+											value={cropAspectRatio}
+											onChange={(e) => applyCropAspectPreset(e.target.value)}
+											className="h-8 rounded-md border border-white/10 bg-[#1a1a1f] px-2 text-xs text-slate-200 outline-none focus:border-[#34B27B]/50 cursor-pointer"
+										>
+											<option value="" className="bg-[#1a1a1f] text-slate-200">
+												{t("crop.free")}
+											</option>
+											<option value="16:9" className="bg-[#1a1a1f] text-slate-200">
+												16:9
+											</option>
+											<option value="9:16" className="bg-[#1a1a1f] text-slate-200">
+												9:16
+											</option>
+											<option value="4:3" className="bg-[#1a1a1f] text-slate-200">
+												4:3
+											</option>
+											<option value="3:4" className="bg-[#1a1a1f] text-slate-200">
+												3:4
+											</option>
+											<option value="1:1" className="bg-[#1a1a1f] text-slate-200">
+												1:1
+											</option>
+											<option value="21:9" className="bg-[#1a1a1f] text-slate-200">
+												21:9
+											</option>
+										</select>
+										<button
+											type="button"
+											onClick={() => setCropAspectLocked((prev) => !prev)}
+											className={cn(
+												"h-8 w-8 flex items-center justify-center rounded-md border transition-all",
+												cropAspectLocked
+													? "border-[#34B27B]/50 bg-[#34B27B]/10 text-[#34B27B]"
+													: "border-white/10 bg-white/5 text-slate-400 hover:text-slate-200",
+											)}
+											title={
+												cropAspectLocked ? t("crop.unlockAspectRatio") : t("crop.lockAspectRatio")
+											}
+										>
+											{cropAspectLocked ? (
+												<Lock className="w-3.5 h-3.5" />
+											) : (
+												<Unlock className="w-3.5 h-3.5" />
+											)}
+										</button>
+									</div>
+								</div>
+
+								<p className="text-[10px] text-slate-500 self-center ml-2">
+									{videoWidth} × {videoHeight}px
+								</p>
+							</div>
+
+							<div className="flex justify-end">
+								<Button
+									onClick={() => setShowCropDropdown(false)}
+									size="lg"
+									className="bg-[#34B27B] hover:bg-[#34B27B]/90 text-white"
+								>
+									{t("crop.done")}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</>
+			)}
+
+			<div className="flex-shrink-0 p-3 border-t border-white/[0.07] bg-black/25">
+				{activePanelMode === "export" && !hasTimelineSelection && (
+					<>
+						<div className="flex items-center gap-2 mb-3">
+							<button
+								data-testid={getTestId("mp4-format-button")}
+								onClick={() => onExportFormatChange?.("mp4")}
+								className={cn(
+									"flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
+									exportFormat === "mp4"
+										? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
+										: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200",
+								)}
+							>
+								<Film className="w-3.5 h-3.5" />
+								{t("exportFormat.mp4")}
+							</button>
+							<button
+								data-testid={getTestId("gif-format-button")}
+								onClick={() => onExportFormatChange?.("gif")}
+								className={cn(
+									"flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
+									exportFormat === "gif"
+										? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
+										: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200",
+								)}
+							>
+								<Image className="w-3.5 h-3.5" />
+								{t("exportFormat.gif")}
+							</button>
+						</div>
+
+						{exportFormat === "mp4" && (
+							<div className="mb-3 space-y-1.5">
+								{sourceDimensions && (
+									<div className="flex items-center justify-between px-0.5 text-[10px] leading-none text-slate-500">
+										<span>{t("exportQuality.title")}</span>
+										<span>
+											Source {sourceDimensions.width}x{sourceDimensions.height}
+										</span>
+									</div>
+								)}
+								<div className="bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-9 rounded-lg">
+									<button
+										onClick={() => onExportQualityChange?.("medium")}
+										className={cn(
+											"rounded-md transition-all text-[10px] font-medium flex flex-col items-center justify-center leading-none gap-0.5",
+											exportQuality === "medium"
+												? "bg-white text-black"
+												: "text-slate-400 hover:text-slate-200",
+										)}
+									>
+										<span>{t("exportQuality.low")}</span>
+										{sourceDimensions &&
+											sourceDimensions.shortSide < MP4_EXPORT_SHORT_SIDES.medium && (
+												<span
+													className={cn(
+														"text-[8px] font-medium",
+														exportQuality === "medium" ? "text-black/55" : "text-amber-300/80",
+													)}
+												>
+													Upscale
+												</span>
+											)}
+									</button>
+									<button
+										onClick={() => onExportQualityChange?.("good")}
+										className={cn(
+											"rounded-md transition-all text-[10px] font-medium flex flex-col items-center justify-center leading-none gap-0.5",
+											exportQuality === "good"
+												? "bg-white text-black"
+												: "text-slate-400 hover:text-slate-200",
+										)}
+									>
+										<span>{t("exportQuality.medium")}</span>
+										{sourceDimensions &&
+											sourceDimensions.shortSide < MP4_EXPORT_SHORT_SIDES.good && (
+												<span
+													className={cn(
+														"text-[8px] font-medium",
+														exportQuality === "good" ? "text-black/55" : "text-amber-300/80",
+													)}
+												>
+													Upscale
+												</span>
+											)}
+									</button>
+									<button
+										onClick={() => onExportQualityChange?.("source")}
+										className={cn(
+											"rounded-md transition-all text-[10px] font-medium flex flex-col items-center justify-center leading-none gap-0.5",
+											exportQuality === "source"
+												? "bg-white text-black"
+												: "text-slate-400 hover:text-slate-200",
+										)}
+									>
+										<span>{t("exportQuality.high")}</span>
+										{sourceDimensions && (
+											<span
+												className={cn(
+													"text-[8px] font-medium",
+													exportQuality === "source" ? "text-black/55" : "text-slate-500",
+												)}
+											>
+												{sourceDimensions.shortSide}p
+											</span>
+										)}
+									</button>
+								</div>
+							</div>
+						)}
+
+						{exportFormat === "gif" && (
+							<div className="mb-3 space-y-2">
+								<div className="flex items-center gap-2">
+									<div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-4 h-7 rounded-lg">
+										{GIF_FRAME_RATES.map((rate) => (
+											<button
+												key={rate.value}
+												onClick={() => onGifFrameRateChange?.(rate.value)}
+												className={cn(
+													"rounded-md transition-all text-[10px] font-medium",
+													gifFrameRate === rate.value
+														? "bg-white text-black"
+														: "text-slate-400 hover:text-slate-200",
+												)}
+											>
+												{rate.value}
+											</button>
+										))}
+									</div>
+									<div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-3 h-7 rounded-lg">
+										{Object.entries(GIF_SIZE_PRESETS).map(([key, _preset]) => (
+											<button
+												key={key}
+												data-testid={getTestId(`gif-size-button-${key}`)}
+												onClick={() => onGifSizePresetChange?.(key as GifSizePreset)}
+												className={cn(
+													"rounded-md transition-all text-[10px] font-medium",
+													gifSizePreset === key
+														? "bg-white text-black"
+														: "text-slate-400 hover:text-slate-200",
+												)}
+											>
+												{key === "original"
+													? "Orig"
+													: key.charAt(0).toUpperCase() + key.slice(1, 3)}
+											</button>
+										))}
+									</div>
+								</div>
+								<div className="flex items-center justify-between">
+									<span className="text-[10px] text-slate-500">
+										{gifOutputDimensions.width} × {gifOutputDimensions.height}px
+									</span>
+									<div className="flex items-center gap-2">
+										<span className="text-[10px] text-slate-400">{t("gifSettings.loop")}</span>
+										<Switch
+											checked={gifLoop}
+											onCheckedChange={onGifLoopChange}
+											className="data-[state=checked]:bg-[#34B27B] scale-75"
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+
+						{unsavedExport && (
+							<Button
+								type="button"
+								size="lg"
+								onClick={onSaveUnsavedExport}
+								className="w-full mb-2 py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-indigo-500 text-white rounded-xl shadow-lg shadow-indigo-500/20 hover:bg-indigo-500/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
+							>
+								<Download className="w-4 h-4" />
+								{t("export.chooseSaveLocation")}
+							</Button>
+						)}
+						<Button
+							data-testid={getTestId("export-button")}
+							type="button"
+							size="lg"
+							onClick={onExport}
+							className="w-full py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-[#34B27B] text-white rounded-xl shadow-lg shadow-[#34B27B]/20 hover:bg-[#3fc98d] hover:scale-[1.01] active:scale-[0.99] transition-all duration-200"
+						>
+							<Download className="w-4 h-4" />
+							{exportFormat === "gif" ? t("export.gifButton") : t("export.videoButton")}
+						</Button>
+					</>
+				)}
+
+				{commonFooterLinks}
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/ShortcutsConfigDialog.tsx b/src/components/video-editor/ShortcutsConfigDialog.tsx
new file mode 100644
index 0000000..6b9ef78
--- /dev/null
+++ b/src/components/video-editor/ShortcutsConfigDialog.tsx
@@ -0,0 +1,247 @@
+import { Keyboard, RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import {
+	DEFAULT_SHORTCUTS,
+	FIXED_SHORTCUTS,
+	findConflict,
+	formatBinding,
+	SHORTCUT_ACTIONS,
+	type ShortcutAction,
+	type ShortcutBinding,
+	type ShortcutConflict,
+	type ShortcutsConfig,
+} from "@/lib/shortcuts";
+
+const MODIFIER_KEYS = new Set(["Control", "Shift", "Alt", "Meta"]);
+
+export function ShortcutsConfigDialog() {
+	const { shortcuts, isMac, isConfigOpen, closeConfig, setShortcuts, persistShortcuts } =
+		useShortcuts();
+	const t = useScopedT("shortcuts");
+	const tc = useScopedT("common");
+
+	const [draft, setDraft] = useState<ShortcutsConfig>(shortcuts);
+	const [captureFor, setCaptureFor] = useState<ShortcutAction | null>(null);
+	const [conflict, setConflict] = useState<{
+		forAction: ShortcutAction;
+		pending: ShortcutBinding;
+		conflictWith: ShortcutConflict;
+	} | null>(null);
+
+	useEffect(() => {
+		if (isConfigOpen) {
+			setDraft(shortcuts);
+			setCaptureFor(null);
+			setConflict(null);
+		}
+	}, [isConfigOpen, shortcuts]);
+
+	useEffect(() => {
+		if (!captureFor) return;
+
+		const handleCapture = (e: KeyboardEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (e.key === "Escape") {
+				setCaptureFor(null);
+				return;
+			}
+
+			if (MODIFIER_KEYS.has(e.key)) return;
+
+			const binding: ShortcutBinding = {
+				key: e.key.toLowerCase(),
+				...(e.ctrlKey || e.metaKey ? { ctrl: true } : {}),
+				...(e.shiftKey ? { shift: true } : {}),
+				...(e.altKey ? { alt: true } : {}),
+			};
+
+			const found = findConflict(binding, captureFor, draft);
+			setCaptureFor(null);
+
+			if (found?.type === "fixed") {
+				toast.error(t("reservedShortcut", { label: found.label }));
+				return;
+			}
+
+			if (found?.type === "configurable") {
+				setConflict({ forAction: captureFor, pending: binding, conflictWith: found });
+				return;
+			}
+
+			setDraft((prev: ShortcutsConfig) => ({ ...prev, [captureFor]: binding }));
+		};
+
+		window.addEventListener("keydown", handleCapture, { capture: true });
+		return () => window.removeEventListener("keydown", handleCapture, { capture: true });
+	}, [captureFor, draft, t]);
+
+	const handleSwap = useCallback(() => {
+		if (!conflict || conflict.conflictWith.type !== "configurable") return;
+		const { forAction, pending, conflictWith } = conflict;
+		setDraft((prev: ShortcutsConfig) => ({
+			...prev,
+			[forAction]: pending,
+			[conflictWith.action]: prev[forAction],
+		}));
+		setConflict(null);
+	}, [conflict]);
+
+	const handleCancelConflict = useCallback(() => setConflict(null), []);
+
+	const handleSave = useCallback(async () => {
+		setShortcuts(draft);
+		await persistShortcuts(draft);
+		toast.success(t("savedToast"));
+		closeConfig();
+	}, [draft, setShortcuts, persistShortcuts, closeConfig, t]);
+
+	const handleReset = useCallback(() => {
+		setDraft({ ...DEFAULT_SHORTCUTS });
+		toast.info(t("resetToast"));
+	}, [t]);
+
+	const handleClose = useCallback(() => {
+		setCaptureFor(null);
+		setConflict(null);
+		closeConfig();
+	}, [closeConfig]);
+
+	return (
+		<Dialog
+			open={isConfigOpen}
+			onOpenChange={(open: boolean) => {
+				if (!open) handleClose();
+			}}
+		>
+			<DialogContent className="bg-[#09090b] border-white/10 text-white max-w-[420px] max-h-[85vh] flex flex-col">
+				<DialogHeader className="shrink-0">
+					<DialogTitle className="flex items-center gap-2 text-sm">
+						<Keyboard className="w-4 h-4 text-[#34B27B]" />
+						{t("title")}
+					</DialogTitle>
+				</DialogHeader>
+
+				<div className="flex-1 min-h-0 overflow-y-auto pr-1 -mr-1">
+					<div className="space-y-0.5">
+						<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
+							{t("configurable")}
+						</p>
+						{SHORTCUT_ACTIONS.map((action) => {
+							const isCapturing = captureFor === action;
+							const hasConflict = conflict?.forAction === action;
+							return (
+								<div key={action}>
+									<div className="flex items-center justify-between py-1.5 px-1 border-b border-white/5">
+										<span className="text-sm text-slate-300">{t(`actions.${action}`)}</span>
+										<button
+											type="button"
+											onClick={() => {
+												setConflict(null);
+												setCaptureFor(isCapturing ? null : action);
+											}}
+											title={isCapturing ? t("pressEscToCancel") : t("clickToChange")}
+											className={[
+												"px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none",
+												isCapturing
+													? "bg-[#34B27B]/20 border-[#34B27B] text-[#34B27B] animate-pulse"
+													: hasConflict
+														? "bg-amber-500/10 border-amber-500/50 text-amber-400"
+														: "bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer",
+											].join(" ")}
+										>
+											{isCapturing ? t("pressKey") : formatBinding(draft[action], isMac)}
+										</button>
+									</div>
+									{hasConflict && conflict?.conflictWith.type === "configurable" && (
+										<div className="flex items-center justify-between px-1 py-1.5 mb-0.5 bg-amber-500/10 border border-amber-500/20 rounded text-xs">
+											<span className="text-amber-400">
+												⚠{" "}
+												{t("alreadyUsedBy", {
+													action: t(`actions.${conflict.conflictWith.action}`),
+												})}
+											</span>
+											<div className="flex gap-1.5">
+												<button
+													type="button"
+													onClick={handleSwap}
+													className="px-2 py-0.5 bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 rounded text-amber-300 font-medium transition-colors"
+												>
+													{t("swap")}
+												</button>
+												<button
+													type="button"
+													onClick={handleCancelConflict}
+													className="px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded text-slate-400 transition-colors"
+												>
+													{tc("actions.cancel")}
+												</button>
+											</div>
+										</div>
+									)}
+								</div>
+							);
+						})}
+					</div>
+
+					<div className="space-y-0.5 mt-2">
+						<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
+							{t("fixed")}
+						</p>
+						{FIXED_SHORTCUTS.map(({ i18nKey, label, display }) => (
+							<div
+								key={i18nKey}
+								className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
+							>
+								<span className="text-sm text-slate-400">
+									{t(`fixedActions.${i18nKey}`, { defaultValue: label })}
+								</span>
+								<kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-xs font-mono text-slate-400 min-w-[90px] text-center">
+									{display}
+								</kbd>
+							</div>
+						))}
+					</div>
+
+					<p className="text-[10px] text-slate-500 mt-1">{t("helpText")}</p>
+				</div>
+
+				<DialogFooter className="shrink-0 flex gap-2 sm:justify-between mt-2">
+					<Button
+						variant="ghost"
+						size="sm"
+						className="text-slate-400 hover:text-white gap-1.5"
+						onClick={handleReset}
+					>
+						<RotateCcw className="w-3 h-3" />
+						{t("resetToDefaults")}
+					</Button>
+					<div className="flex gap-2">
+						<Button variant="ghost" size="sm" onClick={handleClose}>
+							{tc("actions.cancel")}
+						</Button>
+						<Button
+							size="sm"
+							className="bg-[#34B27B] hover:bg-[#2d9e6c] text-white"
+							onClick={handleSave}
+						>
+							{tc("actions.save")}
+						</Button>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/src/components/video-editor/TutorialHelp.tsx b/src/components/video-editor/TutorialHelp.tsx
new file mode 100644
index 0000000..4e9c2b5
--- /dev/null
+++ b/src/components/video-editor/TutorialHelp.tsx
@@ -0,0 +1,133 @@
+import { ArrowRight, HelpCircle, Scissors } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
+
+export function TutorialHelp() {
+	const t = useScopedT("dialogs");
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 px-2 text-xs text-slate-400 hover:text-slate-200 hover:bg-white/10 transition-all gap-1.5"
+				>
+					<HelpCircle className="w-3.5 h-3.5" />
+					<span className="font-medium">{t("tutorial.triggerLabel")}</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-w-2xl bg-[#09090b] border-white/10 [&>button]:text-slate-400 [&>button:hover]:text-white">
+				<DialogHeader>
+					<DialogTitle className="text-xl font-semibold text-slate-200 flex items-center gap-2">
+						<Scissors className="w-5 h-5 text-[#ef4444]" /> {t("tutorial.title")}
+					</DialogTitle>
+					<DialogDescription className="text-slate-400">
+						{t("tutorial.description")}
+					</DialogDescription>
+				</DialogHeader>
+				<div className="mt-4 space-y-8">
+					{/* Explanation */}
+					<div className="bg-white/5 rounded-lg p-4 border border-white/5">
+						<p className="text-slate-300 leading-relaxed">
+							{t("tutorial.explanationBefore")}
+							<span className="text-[#ef4444] font-bold"> {t("tutorial.remove")}</span>
+							{t("tutorial.explanationMiddle")}
+							<span className="text-[#ef4444] font-bold"> {t("tutorial.covered")}</span>
+							{t("tutorial.explanationAfter")}
+						</p>
+					</div>
+					{/* Visual Illustration */}
+					<div className="space-y-2">
+						<h3 className="text-sm font-medium text-slate-400 uppercase tracking-wider">
+							{t("tutorial.visualExample")}
+						</h3>
+						<div className="relative h-24 bg-[#000] rounded-lg border border-white/10 flex items-center px-4 overflow-hidden select-none">
+							{/* Background track (Kept parts) */}
+							<div className="absolute inset-x-4 h-2 bg-slate-600 rounded-full overflow-hidden">
+								{/* Solid line representing video */}
+							</div>
+							{/* Removed Segment 1 */}
+							<div
+								className="absolute left-[20%] h-8 bg-[#ef4444]/20 border border-[#ef4444] rounded flex flex-col items-center justify-center z-10"
+								style={{ width: "20%" }}
+							>
+								<span className="text-[10px] font-bold text-[#ef4444] bg-black/50 px-1 rounded">
+									{t("tutorial.removed")}
+								</span>
+							</div>
+							{/* Removed Segment 2 */}
+							<div
+								className="absolute left-[65%] h-8 bg-[#ef4444]/20 border border-[#ef4444] rounded flex flex-col items-center justify-center z-10"
+								style={{ width: "15%" }}
+							>
+								<span className="text-[10px] font-bold text-[#ef4444] bg-black/50 px-1 rounded">
+									{t("tutorial.removed")}
+								</span>
+							</div>
+							{/* Labels for kept parts */}
+							<div className="absolute left-[5%] text-[10px] text-slate-400 font-medium">
+								{t("tutorial.kept")}
+							</div>
+							<div className="absolute left-[50%] text-[10px] text-slate-400 font-medium">
+								{t("tutorial.kept")}
+							</div>
+							<div className="absolute left-[90%] text-[10px] text-slate-400 font-medium">
+								{t("tutorial.kept")}
+							</div>
+						</div>
+						<div className="flex justify-center mt-2">
+							<ArrowRight className="w-4 h-4 text-slate-600 rotate-90" />
+						</div>
+						{/* Result */}
+						<div className="relative h-12 bg-[#000] rounded-lg border border-white/10 flex items-center justify-center gap-1 px-4 select-none">
+							<div
+								className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
+								style={{ width: "30%" }}
+							>
+								<span className="text-[10px] text-white font-medium">{t("tutorial.part1")}</span>
+							</div>
+							<div
+								className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
+								style={{ width: "30%" }}
+							>
+								<span className="text-[10px] text-white font-medium">{t("tutorial.part2")}</span>
+							</div>
+							<div
+								className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
+								style={{ width: "30%" }}
+							>
+								<span className="text-[10px] text-white font-medium">{t("tutorial.part3")}</span>
+							</div>
+							<span className="absolute right-4 text-xs text-slate-400">
+								{t("tutorial.finalVideo")}
+							</span>
+						</div>
+					</div>
+					{/* Steps */}
+					<div className="grid grid-cols-2 gap-4">
+						<div className="p-3 rounded bg-white/5 border border-white/5">
+							<div className="text-[#ef4444] font-bold mb-1">{t("tutorial.step1Title")}</div>
+							<p className="text-xs text-slate-400">
+								{t("tutorial.step1DescriptionBefore")}
+								<kbd className="bg-white/10 px-1 rounded text-slate-300">T</kbd>
+								{t("tutorial.step1DescriptionAfter")}
+							</p>
+						</div>
+						<div className="p-3 rounded bg-white/5 border border-white/5">
+							<div className="text-[#ef4444] font-bold mb-1">{t("tutorial.step2Title")}</div>
+							<p className="text-xs text-slate-400">{t("tutorial.step2Description")}</p>
+						</div>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/src/components/video-editor/UnsavedChangesDialog.tsx b/src/components/video-editor/UnsavedChangesDialog.tsx
new file mode 100644
index 0000000..902b142
--- /dev/null
+++ b/src/components/video-editor/UnsavedChangesDialog.tsx
@@ -0,0 +1,77 @@
+import { Save, Trash2 } from "lucide-react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
+
+interface UnsavedChangesDialogProps {
+	isOpen: boolean;
+	onSaveAndClose: () => void;
+	onDiscardAndClose: () => void;
+	onCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+	isOpen,
+	onSaveAndClose,
+	onDiscardAndClose,
+	onCancel,
+}: UnsavedChangesDialogProps) {
+	const td = useScopedT("dialogs");
+	const tc = useScopedT("common");
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+			<DialogContent className="bg-[#09090b] border-white/10 rounded-2xl max-w-sm p-6 gap-0">
+				<DialogHeader className="mb-5">
+					<div className="flex items-center gap-3">
+						<img
+							src="./openscreen.png"
+							alt=""
+							aria-hidden="true"
+							className="w-9 h-9 rounded-xl flex-shrink-0"
+						/>
+						<DialogTitle className="text-base font-semibold text-slate-200 leading-tight">
+							{td("unsavedChanges.title")}
+						</DialogTitle>
+					</div>
+				</DialogHeader>
+
+				<p className="text-sm text-slate-300 mb-1">{td("unsavedChanges.message")}</p>
+				<DialogDescription className="text-sm text-slate-500 mb-6">
+					{td("unsavedChanges.detail")}
+				</DialogDescription>
+
+				<div className="flex flex-col gap-2">
+					<button
+						type="button"
+						onClick={onSaveAndClose}
+						className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg bg-[#34B27B] hover:bg-[#2d9e6c] active:bg-[#27885c] text-white font-medium text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[#34B27B] focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b]"
+					>
+						<Save className="w-4 h-4" />
+						{td("unsavedChanges.saveAndClose")}
+					</button>
+					<button
+						type="button"
+						onClick={onDiscardAndClose}
+						className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg bg-white/5 hover:bg-red-500/15 border border-white/10 hover:border-red-500/30 text-slate-300 hover:text-red-400 font-medium text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b]"
+					>
+						<Trash2 className="w-4 h-4" />
+						{td("unsavedChanges.discardAndClose")}
+					</button>
+					<button
+						type="button"
+						onClick={onCancel}
+						className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg hover:bg-white/5 text-slate-500 hover:text-slate-300 font-medium text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b]"
+					>
+						{tc("actions.cancel")}
+					</button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
new file mode 100644
index 0000000..45c8384
--- /dev/null
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -0,0 +1,2417 @@
+import type { Span } from "dnd-timeline";
+import { FolderOpen, Languages, Save, Video } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { toast } from "sonner";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n, useScopedT } from "@/contexts/I18nContext";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { INITIAL_EDITOR_STATE, useEditorHistory } from "@/hooks/useEditorHistory";
+import { type Locale } from "@/i18n/config";
+import { getAvailableLocales, getLocaleName } from "@/i18n/loader";
+import { hasNativeCursorRecordingData } from "@/lib/cursor/nativeCursor";
+import {
+	calculateEffectiveSourceDimensions,
+	calculateMp4ExportSettings,
+	calculateOutputDimensions,
+	type ExportFormat,
+	type ExportProgress,
+	type ExportQuality,
+	type ExportSettings,
+	GIF_SIZE_PRESETS,
+	GifExporter,
+	type GifFrameRate,
+	type GifSizePreset,
+	VideoExporter,
+} from "@/lib/exporter";
+import { computeFrameStepTime } from "@/lib/frameStep";
+import type { CursorCaptureMode, ProjectMedia } from "@/lib/recordingSession";
+import { matchesShortcut } from "@/lib/shortcuts";
+import {
+	getExportFolder,
+	loadUserPreferences,
+	parentDirectoryOf,
+	saveUserPreferences,
+} from "@/lib/userPreferences";
+import { BackgroundLoadError } from "@/lib/wallpaper";
+import { nativeBridgeClient, useCursorRecordingData, useCursorTelemetry } from "@/native";
+import type { NativePlatform } from "@/native/contracts";
+import {
+	getAspectRatioValue,
+	getNativeAspectRatioValue,
+	isPortraitAspectRatio,
+} from "@/utils/aspectRatioUtils";
+import { ExportDialog } from "./ExportDialog";
+import {
+	DEFAULT_CURSOR_SETTINGS,
+	DEFAULT_EXPORT_SETTINGS,
+	DEFAULT_GIF_SETTINGS,
+	DEFAULT_SOURCE_DIMENSIONS,
+} from "./editorDefaults";
+import { GuidePanel } from "./guide/GuidePanel";
+import PlaybackControls from "./PlaybackControls";
+import {
+	createProjectData,
+	createProjectSnapshot,
+	deriveNextId,
+	fromFileUrl,
+	hasProjectUnsavedChanges,
+	normalizeProjectEditor,
+	resolveProjectMedia,
+	toFileUrl,
+	validateProjectData,
+} from "./projectPersistence";
+import { SettingsPanel } from "./SettingsPanel";
+import TimelineEditor from "./timeline/TimelineEditor";
+import {
+	type AnnotationRegion,
+	type BlurData,
+	clampFocusToDepth,
+	DEFAULT_ANNOTATION_POSITION,
+	DEFAULT_ANNOTATION_SIZE,
+	DEFAULT_ANNOTATION_STYLE,
+	DEFAULT_BLUR_DATA,
+	DEFAULT_FIGURE_DATA,
+	DEFAULT_PLAYBACK_SPEED,
+	DEFAULT_ZOOM_DEPTH,
+	type FigureData,
+	type PlaybackSpeed,
+	type Rotation3DPreset,
+	type SpeedRegion,
+	type TrimRegion,
+	ZOOM_DEPTH_SCALES,
+	type ZoomDepth,
+	type ZoomFocus,
+	type ZoomFocusMode,
+	type ZoomRegion,
+} from "./types";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+import VideoPlayback, { VideoPlaybackRef } from "./VideoPlayback";
+
+function isClickInteractionType(interactionType: string | null | undefined) {
+	return (
+		interactionType === "click" ||
+		interactionType === "double-click" ||
+		interactionType === "right-click" ||
+		interactionType === "middle-click"
+	);
+}
+
+interface ExportDiagnostics {
+	formatLabel: "GIF" | "Video";
+	reason?: string;
+	sourcePath?: string | null;
+	width?: number;
+	height?: number;
+	frameRate?: number;
+	codec?: string;
+	bitrate?: number;
+}
+
+function getFileNameForDiagnostics(filePath?: string | null) {
+	if (!filePath) return "unknown";
+
+	try {
+		const url = new URL(filePath);
+		if (url.protocol === "file:") {
+			return decodeURIComponent(url.pathname).split(/[\\/]/).pop() || filePath;
+		}
+	} catch {
+		// Treat non-URL values as filesystem paths.
+	}
+
+	return filePath.split(/[\\/]/).pop() || filePath;
+}
+
+function buildExportDiagnosticMessage(diagnostics: ExportDiagnostics) {
+	const details = [
+		diagnostics.reason ? `Reason: ${diagnostics.reason}` : null,
+		`Source: ${getFileNameForDiagnostics(diagnostics.sourcePath)}`,
+		diagnostics.width && diagnostics.height
+			? `Output: ${diagnostics.width}x${diagnostics.height}${
+					diagnostics.frameRate ? ` @ ${diagnostics.frameRate} fps` : ""
+				}`
+			: null,
+		diagnostics.codec ? `Codec: ${diagnostics.codec}` : null,
+		diagnostics.bitrate ? `Bitrate: ${Math.round(diagnostics.bitrate / 1_000_000)} Mbps` : null,
+		`VideoEncoder: ${"VideoEncoder" in window ? "available" : "unavailable"}`,
+	].filter(Boolean);
+
+	return `${diagnostics.formatLabel} export failed\n${details.join("\n")}`;
+}
+
+function buildSaveDiagnosticMessage(formatLabel: "GIF" | "Video", reason?: string) {
+	return `${formatLabel} export save failed${reason ? `\nReason: ${reason}` : ""}`;
+}
+
+export default function VideoEditor() {
+	const {
+		state: editorState,
+		pushState,
+		updateState,
+		commitState,
+		undo,
+		redo,
+	} = useEditorHistory(INITIAL_EDITOR_STATE);
+
+	const {
+		zoomRegions,
+		trimRegions,
+		speedRegions,
+		annotationRegions,
+		cropRegion,
+		wallpaper,
+		shadowIntensity,
+		showBlur,
+		motionBlurAmount,
+		borderRadius,
+		padding,
+		aspectRatio,
+		webcamLayoutPreset,
+		webcamMaskShape,
+		webcamSizePreset,
+		webcamPosition,
+	} = editorState;
+
+	// ── Non-undoable state
+	const [videoPath, setVideoPath] = useState<string | null>(null);
+	const [videoSourcePath, setVideoSourcePath] = useState<string | null>(null);
+	const [webcamVideoPath, setWebcamVideoPath] = useState<string | null>(null);
+	const [webcamVideoSourcePath, setWebcamVideoSourcePath] = useState<string | null>(null);
+	const [currentProjectPath, setCurrentProjectPath] = useState<string | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+	const currentTimeRef = useRef(currentTime);
+	currentTimeRef.current = currentTime;
+	const durationRef = useRef(duration);
+	durationRef.current = duration;
+	const [selectedZoomId, setSelectedZoomId] = useState<string | null>(null);
+	const [isPreviewingZoom, setIsPreviewingZoom] = useState(false);
+	const [selectedTrimId, setSelectedTrimId] = useState<string | null>(null);
+	const [selectedSpeedId, setSelectedSpeedId] = useState<string | null>(null);
+	const [selectedAnnotationId, setSelectedAnnotationId] = useState<string | null>(null);
+	const [selectedBlurId, setSelectedBlurId] = useState<string | null>(null);
+	const [isExporting, setIsExporting] = useState(false);
+	const [exportProgress, setExportProgress] = useState<ExportProgress | null>(null);
+	const [exportError, setExportError] = useState<string | null>(null);
+	const [showExportDialog, setShowExportDialog] = useState(false);
+	const [showNewRecordingDialog, setShowNewRecordingDialog] = useState(false);
+	const [exportQuality, setExportQuality] = useState<ExportQuality>(
+		DEFAULT_EXPORT_SETTINGS.quality,
+	);
+	const [exportFormat, setExportFormat] = useState<ExportFormat>(DEFAULT_EXPORT_SETTINGS.format);
+	const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(DEFAULT_GIF_SETTINGS.frameRate);
+	const [gifLoop, setGifLoop] = useState(DEFAULT_GIF_SETTINGS.loop);
+	const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>(
+		DEFAULT_GIF_SETTINGS.sizePreset,
+	);
+	const [exportedFilePath, setExportedFilePath] = useState<string | null>(null);
+	const [lastSavedSnapshot, setLastSavedSnapshot] = useState<string | null>(null);
+	const [unsavedExport, setUnsavedExport] = useState<{
+		arrayBuffer: ArrayBuffer;
+		fileName: string;
+		format: string;
+	} | null>(null);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [showCloseConfirmDialog, setShowCloseConfirmDialog] = useState(false);
+	const playerContainerRef = useRef<HTMLDivElement | null>(null);
+	const cursorTelemetrySourcePath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
+	const { samples: cursorTelemetry, error: cursorTelemetryError } =
+		useCursorTelemetry(cursorTelemetrySourcePath);
+	const { data: cursorRecordingData, error: cursorRecordingDataError } =
+		useCursorRecordingData(cursorTelemetrySourcePath);
+	const cursorClickTimestamps = useMemo<number[]>(() => {
+		const recordingClicks =
+			cursorRecordingData?.samples
+				.filter((sample) => isClickInteractionType(sample.interactionType))
+				.map((sample) => sample.timeMs) ?? [];
+		if (recordingClicks.length > 0) {
+			return recordingClicks;
+		}
+
+		return cursorTelemetry
+			.filter((sample) => isClickInteractionType(sample.interactionType))
+			.map((sample) => sample.timeMs);
+	}, [cursorRecordingData, cursorTelemetry]);
+
+	// Cursor & motion blur visual settings (non-undoable preferences)
+	const [showCursor, setShowCursor] = useState(DEFAULT_CURSOR_SETTINGS.show);
+	const [cursorSize, setCursorSize] = useState(DEFAULT_CURSOR_SETTINGS.size);
+	const [cursorSmoothing, setCursorSmoothing] = useState(DEFAULT_CURSOR_SETTINGS.smoothing);
+	const [cursorMotionBlur, setCursorMotionBlur] = useState(DEFAULT_CURSOR_SETTINGS.motionBlur);
+	const [cursorClickBounce, setCursorClickBounce] = useState(DEFAULT_CURSOR_SETTINGS.clickBounce);
+	const [cursorClipToBounds, setCursorClipToBounds] = useState(
+		DEFAULT_CURSOR_SETTINGS.clipToBounds,
+	);
+	const [nativePlatform, setNativePlatform] = useState<NativePlatform | null>(null);
+	const [recordingCursorCaptureMode, setRecordingCursorCaptureMode] =
+		useState<CursorCaptureMode | null>(null);
+	const [guideRecordingId, setGuideRecordingId] = useState<number | null>(null);
+
+	const videoPlaybackRef = useRef<VideoPlaybackRef>(null);
+
+	const nextZoomIdRef = useRef(1);
+	const nextTrimIdRef = useRef(1);
+	const nextSpeedIdRef = useRef(1);
+
+	const { shortcuts, isMac } = useShortcuts();
+	// Native Windows recordings include captured cursor assets. Native macOS
+	// recordings hide the system cursor in ScreenCaptureKit and use telemetry
+	// samples with OpenScreen's default arrow asset for the editable overlay.
+	const hasEditableCursorRecording =
+		recordingCursorCaptureMode === "editable-overlay" &&
+		(nativePlatform === "win32" || nativePlatform === "darwin") &&
+		hasNativeCursorRecordingData(cursorRecordingData);
+	const effectiveShowCursor = showCursor && hasEditableCursorRecording;
+	const showCursorSettings = hasEditableCursorRecording;
+	const { locale, setLocale, t: rawT } = useI18n();
+	const t = useScopedT("editor");
+	const ts = useScopedT("settings");
+	const availableLocales = getAvailableLocales();
+
+	const nextAnnotationIdRef = useRef(1);
+	const nextAnnotationZIndexRef = useRef(1);
+	const exporterRef = useRef<VideoExporter | null>(null);
+
+	const annotationOnlyRegions = useMemo(
+		() => annotationRegions.filter((region) => region.type !== "blur"),
+		[annotationRegions],
+	);
+	const blurRegions = useMemo(
+		() => annotationRegions.filter((region) => region.type === "blur"),
+		[annotationRegions],
+	);
+
+	const currentProjectMedia = useMemo<ProjectMedia | null>(() => {
+		const screenVideoPath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
+		if (!screenVideoPath) {
+			return null;
+		}
+
+		const webcamSourcePath =
+			webcamVideoSourcePath ?? (webcamVideoPath ? fromFileUrl(webcamVideoPath) : null);
+		return {
+			screenVideoPath,
+			...(webcamSourcePath ? { webcamVideoPath: webcamSourcePath } : {}),
+			...(recordingCursorCaptureMode ? { cursorCaptureMode: recordingCursorCaptureMode } : {}),
+		};
+	}, [
+		videoPath,
+		videoSourcePath,
+		webcamVideoPath,
+		webcamVideoSourcePath,
+		recordingCursorCaptureMode,
+	]);
+
+	const applyLoadedProject = useCallback(
+		async (candidate: unknown, path?: string | null) => {
+			if (!validateProjectData(candidate)) {
+				return false;
+			}
+
+			const project = candidate;
+			const projectMedia = resolveProjectMedia(project);
+			if (!projectMedia) {
+				return false;
+			}
+			const sourcePath = projectMedia.screenVideoPath;
+			const webcamSourcePath = projectMedia.webcamVideoPath ?? null;
+			const projectCursorCaptureMode = projectMedia.cursorCaptureMode ?? null;
+			const normalizedEditor = normalizeProjectEditor(project.editor);
+			const inferredDurationMs = Math.max(
+				0,
+				...normalizedEditor.zoomRegions.map((region) => region.endMs),
+				...normalizedEditor.trimRegions.map((region) => region.endMs),
+				...normalizedEditor.speedRegions.map((region) => region.endMs),
+				...normalizedEditor.annotationRegions.map((region) => region.endMs),
+			);
+
+			try {
+				videoPlaybackRef.current?.pause();
+			} catch {
+				// no-op
+			}
+			setIsPlaying(false);
+			setCurrentTime(0);
+			setDuration(inferredDurationMs > 0 ? inferredDurationMs / 1000 : 0);
+
+			setError(null);
+			setVideoSourcePath(sourcePath);
+			setVideoPath(toFileUrl(sourcePath));
+			setWebcamVideoSourcePath(webcamSourcePath);
+			setWebcamVideoPath(webcamSourcePath ? toFileUrl(webcamSourcePath) : null);
+			setRecordingCursorCaptureMode(projectCursorCaptureMode);
+			setGuideRecordingId(null);
+			setCurrentProjectPath(path ?? null);
+
+			pushState({
+				wallpaper: normalizedEditor.wallpaper,
+				shadowIntensity: normalizedEditor.shadowIntensity,
+				showBlur: normalizedEditor.showBlur,
+				motionBlurAmount: normalizedEditor.motionBlurAmount,
+				borderRadius: normalizedEditor.borderRadius,
+				padding: normalizedEditor.padding,
+				cropRegion: normalizedEditor.cropRegion,
+				zoomRegions: normalizedEditor.zoomRegions,
+				trimRegions: normalizedEditor.trimRegions,
+				speedRegions: normalizedEditor.speedRegions,
+				annotationRegions: normalizedEditor.annotationRegions,
+				aspectRatio: normalizedEditor.aspectRatio,
+				webcamLayoutPreset: normalizedEditor.webcamLayoutPreset,
+				webcamMaskShape: normalizedEditor.webcamMaskShape,
+				webcamSizePreset: normalizedEditor.webcamSizePreset,
+				webcamPosition: normalizedEditor.webcamPosition,
+			});
+			setExportQuality(normalizedEditor.exportQuality);
+			setExportFormat(normalizedEditor.exportFormat);
+			setGifFrameRate(normalizedEditor.gifFrameRate);
+			setGifLoop(normalizedEditor.gifLoop);
+			setGifSizePreset(normalizedEditor.gifSizePreset);
+
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+
+			nextZoomIdRef.current = deriveNextId(
+				"zoom",
+				normalizedEditor.zoomRegions.map((region) => region.id),
+			);
+			nextTrimIdRef.current = deriveNextId(
+				"trim",
+				normalizedEditor.trimRegions.map((region) => region.id),
+			);
+			nextSpeedIdRef.current = deriveNextId(
+				"speed",
+				normalizedEditor.speedRegions.map((region) => region.id),
+			);
+			nextAnnotationIdRef.current = deriveNextId(
+				"annotation",
+				normalizedEditor.annotationRegions.map((region) => region.id),
+			);
+			nextAnnotationZIndexRef.current =
+				normalizedEditor.annotationRegions.reduce(
+					(max, region) => Math.max(max, region.zIndex),
+					0,
+				) + 1;
+
+			setLastSavedSnapshot(
+				createProjectSnapshot(
+					{
+						screenVideoPath: sourcePath,
+						...(webcamSourcePath ? { webcamVideoPath: webcamSourcePath } : {}),
+						...(projectCursorCaptureMode ? { cursorCaptureMode: projectCursorCaptureMode } : {}),
+					},
+					normalizedEditor,
+				),
+			);
+			return true;
+		},
+		[pushState],
+	);
+
+	const currentProjectSnapshot = useMemo(() => {
+		if (!currentProjectMedia) {
+			return null;
+		}
+		return createProjectSnapshot(currentProjectMedia, {
+			wallpaper,
+			shadowIntensity,
+			showBlur,
+			motionBlurAmount,
+			borderRadius,
+			padding,
+			cropRegion,
+			zoomRegions,
+			trimRegions,
+			speedRegions,
+			annotationRegions,
+			aspectRatio,
+			webcamLayoutPreset,
+			webcamMaskShape,
+			webcamPosition,
+			exportQuality,
+			exportFormat,
+			gifFrameRate,
+			gifLoop,
+			gifSizePreset,
+		});
+	}, [
+		currentProjectMedia,
+		wallpaper,
+		shadowIntensity,
+		showBlur,
+		motionBlurAmount,
+		borderRadius,
+		padding,
+		cropRegion,
+		zoomRegions,
+		trimRegions,
+		speedRegions,
+		annotationRegions,
+		aspectRatio,
+		webcamLayoutPreset,
+		webcamMaskShape,
+		webcamPosition,
+		exportQuality,
+		exportFormat,
+		gifFrameRate,
+		gifLoop,
+		gifSizePreset,
+	]);
+
+	const hasUnsavedChanges = hasProjectUnsavedChanges(currentProjectSnapshot, lastSavedSnapshot);
+
+	useEffect(() => {
+		async function loadInitialData() {
+			try {
+				const currentProjectResult = await nativeBridgeClient.project.loadCurrentProjectFile();
+				if (currentProjectResult.success && currentProjectResult.project) {
+					const restored = await applyLoadedProject(
+						currentProjectResult.project,
+						currentProjectResult.path ?? null,
+					);
+					if (restored) {
+						return;
+					}
+				}
+
+				const currentSessionResult = await window.electronAPI.getCurrentRecordingSession();
+				if (currentSessionResult.success && currentSessionResult.session) {
+					const session = currentSessionResult.session;
+					const sourcePath = fromFileUrl(session.screenVideoPath);
+					const webcamSourcePath = session.webcamVideoPath
+						? fromFileUrl(session.webcamVideoPath)
+						: null;
+					setVideoSourcePath(sourcePath);
+					setVideoPath(toFileUrl(sourcePath));
+					setWebcamVideoSourcePath(webcamSourcePath);
+					setWebcamVideoPath(webcamSourcePath ? toFileUrl(webcamSourcePath) : null);
+					setRecordingCursorCaptureMode(session.cursorCaptureMode ?? null);
+					setGuideRecordingId(session.createdAt);
+					setCurrentProjectPath(null);
+					setLastSavedSnapshot(
+						createProjectSnapshot(
+							{
+								screenVideoPath: sourcePath,
+								...(webcamSourcePath ? { webcamVideoPath: webcamSourcePath } : {}),
+								...(session.cursorCaptureMode
+									? { cursorCaptureMode: session.cursorCaptureMode }
+									: {}),
+							},
+							INITIAL_EDITOR_STATE,
+						),
+					);
+					return;
+				}
+
+				const result = await nativeBridgeClient.project.getCurrentVideoPath();
+				if (result.success && result.path) {
+					setVideoSourcePath(result.path);
+					setVideoPath(toFileUrl(result.path));
+					setRecordingCursorCaptureMode(null);
+					setGuideRecordingId(null);
+					setCurrentProjectPath(null);
+					setLastSavedSnapshot(
+						createProjectSnapshot({ screenVideoPath: result.path }, INITIAL_EDITOR_STATE),
+					);
+				} else {
+					setError("No video to load. Please record or select a video.");
+				}
+			} catch (err) {
+				setError("Error loading video: " + String(err));
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		loadInitialData();
+	}, [applyLoadedProject]);
+
+	// Track whether user preferences have been loaded to avoid
+	// overwriting saved prefs with defaults on the first render
+	const [prefsHydrated, setPrefsHydrated] = useState(false);
+
+	// Load persisted user preferences on mount (intentionally runs once)
+	useEffect(() => {
+		const prefs = loadUserPreferences();
+		updateState({
+			padding: prefs.padding,
+			aspectRatio: prefs.aspectRatio,
+		});
+		setExportQuality(prefs.exportQuality);
+		setExportFormat(prefs.exportFormat);
+		setPrefsHydrated(true);
+	}, [updateState]);
+
+	// Auto-save user preferences when settings change
+	useEffect(() => {
+		if (!prefsHydrated) return;
+		saveUserPreferences({ padding, aspectRatio, exportQuality, exportFormat });
+	}, [prefsHydrated, padding, aspectRatio, exportQuality, exportFormat]);
+
+	const saveProject = useCallback(
+		async (forceSaveAs: boolean) => {
+			if (!videoPath) {
+				toast.error(t("errors.noVideoLoaded"));
+				return false;
+			}
+
+			if (!currentProjectMedia) {
+				toast.error(t("errors.unableToDetermineSourcePath"));
+				return false;
+			}
+
+			const editorState = {
+				wallpaper,
+				shadowIntensity,
+				showBlur,
+				motionBlurAmount,
+				borderRadius,
+				padding,
+				cropRegion,
+				zoomRegions,
+				trimRegions,
+				speedRegions,
+				annotationRegions,
+				aspectRatio,
+				webcamLayoutPreset,
+				webcamMaskShape,
+				webcamSizePreset,
+				webcamPosition,
+				exportQuality,
+				exportFormat,
+				gifFrameRate,
+				gifLoop,
+				gifSizePreset,
+			};
+			const projectData = createProjectData(currentProjectMedia, editorState);
+
+			const fileNameBase =
+				currentProjectMedia.screenVideoPath
+					.split(/[\\/]/)
+					.pop()
+					?.replace(/\.[^.]+$/, "") || `project-${Date.now()}`;
+			// Match the normalization path used by `currentProjectSnapshot` so the
+			// post-save baseline compares equal and `hasUnsavedChanges` clears.
+			const projectSnapshot = createProjectSnapshot(currentProjectMedia, editorState);
+			const result = await nativeBridgeClient.project.saveProjectFile(
+				projectData,
+				fileNameBase,
+				forceSaveAs ? undefined : (currentProjectPath ?? undefined),
+			);
+
+			if (result.canceled) {
+				toast.info(t("project.saveCanceled"));
+				return false;
+			}
+
+			if (!result.success) {
+				toast.error(result.message || t("project.failedToSave"));
+				return false;
+			}
+
+			if (result.path) {
+				setCurrentProjectPath(result.path);
+			}
+			setLastSavedSnapshot(projectSnapshot);
+
+			toast.success(t("project.savedTo", { path: result.path ?? "" }));
+			return true;
+		},
+		[
+			currentProjectMedia,
+			currentProjectPath,
+			wallpaper,
+			shadowIntensity,
+			showBlur,
+			motionBlurAmount,
+			borderRadius,
+			padding,
+			cropRegion,
+			zoomRegions,
+			trimRegions,
+			speedRegions,
+			annotationRegions,
+			aspectRatio,
+			webcamLayoutPreset,
+			webcamMaskShape,
+			webcamPosition,
+			exportQuality,
+			exportFormat,
+			gifFrameRate,
+			gifLoop,
+			gifSizePreset,
+			videoPath,
+			t,
+			webcamSizePreset,
+		],
+	);
+
+	useEffect(() => {
+		window.electronAPI.setHasUnsavedChanges(hasUnsavedChanges);
+	}, [hasUnsavedChanges]);
+
+	useEffect(() => {
+		const cleanup = window.electronAPI.onRequestSaveBeforeClose(async () => {
+			return saveProject(false);
+		});
+		return () => cleanup();
+	}, [saveProject]);
+
+	useEffect(() => {
+		const cleanup = window.electronAPI.onRequestCloseConfirm(() => {
+			setShowCloseConfirmDialog(true);
+		});
+		return () => cleanup();
+	}, []);
+
+	const handleCloseConfirmSave = useCallback(() => {
+		setShowCloseConfirmDialog(false);
+		window.electronAPI.sendCloseConfirmResponse("save");
+	}, []);
+
+	const handleCloseConfirmDiscard = useCallback(() => {
+		setShowCloseConfirmDialog(false);
+		window.electronAPI.sendCloseConfirmResponse("discard");
+	}, []);
+
+	const handleCloseConfirmCancel = useCallback(() => {
+		setShowCloseConfirmDialog(false);
+		window.electronAPI.sendCloseConfirmResponse("cancel");
+	}, []);
+
+	const handleSaveProject = useCallback(async () => {
+		await saveProject(false);
+	}, [saveProject]);
+
+	const handleSaveProjectAs = useCallback(async () => {
+		await saveProject(true);
+	}, [saveProject]);
+
+	const handleNewRecordingConfirm = useCallback(async () => {
+		const result = await window.electronAPI.startNewRecording();
+		if (result.success) {
+			setShowNewRecordingDialog(false);
+		} else {
+			console.error("Failed to start new recording:", result.error);
+			setError("Failed to start new recording: " + (result.error || "Unknown error"));
+		}
+	}, []);
+
+	const handleLoadProject = useCallback(async () => {
+		const result = await nativeBridgeClient.project.loadProjectFile();
+
+		if (result.canceled) {
+			return;
+		}
+
+		if (!result.success) {
+			toast.error(result.message || t("project.failedToLoad"));
+			return;
+		}
+
+		const restored = await applyLoadedProject(result.project, result.path ?? null);
+		if (!restored) {
+			toast.error(t("project.invalidFormat"));
+			return;
+		}
+
+		toast.success(t("project.loadedFrom", { path: result.path ?? "" }));
+	}, [applyLoadedProject, t]);
+
+	useEffect(() => {
+		const removeLoadListener = window.electronAPI.onMenuLoadProject(handleLoadProject);
+		const removeSaveListener = window.electronAPI.onMenuSaveProject(handleSaveProject);
+		const removeSaveAsListener = window.electronAPI.onMenuSaveProjectAs(handleSaveProjectAs);
+
+		return () => {
+			removeLoadListener?.();
+			removeSaveListener?.();
+			removeSaveAsListener?.();
+		};
+	}, [handleLoadProject, handleSaveProject, handleSaveProjectAs]);
+
+	useEffect(() => {
+		let canceled = false;
+		nativeBridgeClient.system
+			.getPlatform()
+			.then((platform) => {
+				if (!canceled) {
+					setNativePlatform(platform);
+				}
+			})
+			.catch((error) => {
+				console.warn("Unable to resolve native platform for cursor settings:", error);
+				if (!canceled) {
+					setNativePlatform(null);
+				}
+			});
+
+		return () => {
+			canceled = true;
+		};
+	}, []);
+
+	useEffect(() => {
+		if (cursorTelemetryError) {
+			console.warn("Unable to load cursor telemetry:", cursorTelemetryError);
+		}
+	}, [cursorTelemetryError]);
+
+	useEffect(() => {
+		if (cursorRecordingDataError) {
+			console.warn("Unable to load cursor recording data:", cursorRecordingDataError);
+		}
+	}, [cursorRecordingDataError]);
+
+	function togglePlayPause() {
+		const playback = videoPlaybackRef.current;
+		const video = playback?.video;
+		if (!playback || !video) return;
+
+		if (isPlaying) {
+			playback.pause();
+		} else {
+			playback.play().catch((err) => console.error("Video play failed:", err));
+		}
+	}
+
+	const toggleFullscreen = useCallback(() => {
+		setIsFullscreen((prev) => !prev);
+	}, []);
+
+	useEffect(() => {
+		if (!isFullscreen) return;
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setIsFullscreen(false);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [isFullscreen]);
+
+	function handleSeek(time: number) {
+		const video = videoPlaybackRef.current?.video;
+		if (!video) return;
+		video.currentTime = time;
+	}
+
+	const handleSelectZoom = useCallback((id: string | null) => {
+		setSelectedZoomId(id);
+		if (id) {
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+		}
+	}, []);
+
+	const handleSelectTrim = useCallback((id: string | null) => {
+		setSelectedTrimId(id);
+		if (id) {
+			setSelectedZoomId(null);
+			setSelectedSpeedId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+		}
+	}, []);
+
+	const handleSelectAnnotation = useCallback((id: string | null) => {
+		setSelectedAnnotationId(id);
+		if (id) {
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			setSelectedBlurId(null);
+		}
+	}, []);
+
+	const handleSelectBlur = useCallback((id: string | null) => {
+		setSelectedBlurId(id);
+		if (id) {
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedAnnotationId(null);
+			setSelectedSpeedId(null);
+		}
+	}, []);
+
+	const handleZoomAdded = useCallback(
+		(span: Span) => {
+			const id = `zoom-${nextZoomIdRef.current++}`;
+			const newRegion: ZoomRegion = {
+				id,
+				startMs: Math.round(span.start),
+				endMs: Math.round(span.end),
+				depth: DEFAULT_ZOOM_DEPTH,
+				customScale: ZOOM_DEPTH_SCALES[DEFAULT_ZOOM_DEPTH],
+				focus: { cx: 0.5, cy: 0.5 },
+			};
+			pushState((prev) => ({ zoomRegions: [...prev.zoomRegions, newRegion] }));
+			setSelectedZoomId(id);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+		},
+		[pushState],
+	);
+
+	const handleZoomSuggested = useCallback(
+		(span: Span, focus: ZoomFocus) => {
+			const id = `zoom-${nextZoomIdRef.current++}`;
+			const newRegion: ZoomRegion = {
+				id,
+				startMs: Math.round(span.start),
+				endMs: Math.round(span.end),
+				depth: DEFAULT_ZOOM_DEPTH,
+				customScale: ZOOM_DEPTH_SCALES[DEFAULT_ZOOM_DEPTH],
+				focus: clampFocusToDepth(focus, DEFAULT_ZOOM_DEPTH),
+			};
+			// Bulk suggest must not steal selection — keeping a zoom selected hides
+			// the export panel (SettingsPanel gates it on !hasTimelineSelection),
+			// trapping users who just want to export after auto-zoom.
+			pushState((prev) => ({ zoomRegions: [...prev.zoomRegions, newRegion] }));
+		},
+		[pushState],
+	);
+
+	const handleTrimAdded = useCallback(
+		(span: Span) => {
+			const id = `trim-${nextTrimIdRef.current++}`;
+			const newRegion: TrimRegion = {
+				id,
+				startMs: Math.round(span.start),
+				endMs: Math.round(span.end),
+			};
+			pushState((prev) => ({ trimRegions: [...prev.trimRegions, newRegion] }));
+			setSelectedTrimId(id);
+			setSelectedZoomId(null);
+			setSelectedSpeedId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+		},
+		[pushState],
+	);
+
+	const handleZoomSpanChange = useCallback(
+		(id: string, span: Span) => {
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === id
+						? {
+								...region,
+								startMs: Math.round(span.start),
+								endMs: Math.round(span.end),
+							}
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleTrimSpanChange = useCallback(
+		(id: string, span: Span) => {
+			pushState((prev) => ({
+				trimRegions: prev.trimRegions.map((region) =>
+					region.id === id
+						? {
+								...region,
+								startMs: Math.round(span.start),
+								endMs: Math.round(span.end),
+							}
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	// Focus drag: updateState for live preview, commitState on pointer-up
+	const handleZoomFocusChange = useCallback(
+		(id: string, focus: ZoomFocus) => {
+			updateState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === id ? { ...region, focus: clampFocusToDepth(focus, region.depth) } : region,
+				),
+			}));
+		},
+		[updateState],
+	);
+
+	const handleZoomDepthChange = useCallback(
+		(depth: ZoomDepth) => {
+			if (!selectedZoomId) return;
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === selectedZoomId
+						? {
+								...region,
+								depth,
+								customScale: ZOOM_DEPTH_SCALES[depth],
+								focus: clampFocusToDepth(region.focus, depth),
+							}
+						: region,
+				),
+			}));
+		},
+		[selectedZoomId, pushState],
+	);
+
+	const handleZoomCustomScaleChange = useCallback(
+		(scale: number) => {
+			if (!selectedZoomId) return;
+			const rounded = Math.round(scale * 100) / 100;
+			if (!Number.isFinite(rounded)) return;
+			updateState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === selectedZoomId ? { ...region, customScale: rounded } : region,
+				),
+			}));
+		},
+		[selectedZoomId, updateState],
+	);
+
+	const handleZoomCustomScaleCommit = useCallback(() => {
+		commitState();
+	}, [commitState]);
+
+	const handleZoomFocusModeChange = useCallback(
+		(focusMode: ZoomFocusMode) => {
+			if (!selectedZoomId) return;
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === selectedZoomId ? { ...region, focusMode } : region,
+				),
+			}));
+		},
+		[selectedZoomId, pushState],
+	);
+
+	const handleZoomDelete = useCallback(
+		(id: string) => {
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.filter((r) => r.id !== id),
+			}));
+			if (selectedZoomId === id) {
+				setSelectedZoomId(null);
+			}
+		},
+		[selectedZoomId, pushState],
+	);
+
+	const handleZoomRotationPresetChange = useCallback(
+		(preset: Rotation3DPreset | null) => {
+			if (!selectedZoomId) return;
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) => {
+					if (region.id !== selectedZoomId) return region;
+					if (preset === null) {
+						const { rotationPreset: _p, ...rest } = region;
+						return rest;
+					}
+					return { ...region, rotationPreset: preset };
+				}),
+			}));
+		},
+		[selectedZoomId, pushState],
+	);
+
+	const handleTrimDelete = useCallback(
+		(id: string) => {
+			pushState((prev) => ({
+				trimRegions: prev.trimRegions.filter((r) => r.id !== id),
+			}));
+			if (selectedTrimId === id) {
+				setSelectedTrimId(null);
+			}
+		},
+		[selectedTrimId, pushState],
+	);
+
+	const handleSelectSpeed = useCallback((id: string | null) => {
+		setSelectedSpeedId(id);
+		if (id) {
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+		}
+	}, []);
+
+	const handleSpeedAdded = useCallback(
+		(span: Span) => {
+			const id = `speed-${nextSpeedIdRef.current++}`;
+			const newRegion: SpeedRegion = {
+				id,
+				startMs: Math.round(span.start),
+				endMs: Math.round(span.end),
+				speed: DEFAULT_PLAYBACK_SPEED,
+			};
+			pushState((prev) => ({
+				speedRegions: [...prev.speedRegions, newRegion],
+			}));
+			setSelectedSpeedId(id);
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+		},
+		[pushState],
+	);
+
+	const handleSpeedSpanChange = useCallback(
+		(id: string, span: Span) => {
+			pushState((prev) => ({
+				speedRegions: prev.speedRegions.map((region) =>
+					region.id === id
+						? {
+								...region,
+								startMs: Math.round(span.start),
+								endMs: Math.round(span.end),
+							}
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleSpeedDelete = useCallback(
+		(id: string) => {
+			pushState((prev) => ({
+				speedRegions: prev.speedRegions.filter((region) => region.id !== id),
+			}));
+			if (selectedSpeedId === id) {
+				setSelectedSpeedId(null);
+			}
+		},
+		[selectedSpeedId, pushState],
+	);
+
+	const handleSpeedChange = useCallback(
+		(speed: PlaybackSpeed) => {
+			if (!selectedSpeedId) return;
+			pushState((prev) => ({
+				speedRegions: prev.speedRegions.map((region) =>
+					region.id === selectedSpeedId ? { ...region, speed } : region,
+				),
+			}));
+		},
+		[selectedSpeedId, pushState],
+	);
+
+	const handleAnnotationAdded = useCallback(
+		(span: Span) => {
+			const id = `annotation-${nextAnnotationIdRef.current++}`;
+			const zIndex = nextAnnotationZIndexRef.current++;
+			const newRegion: AnnotationRegion = {
+				id,
+				startMs: Math.round(span.start),
+				endMs: Math.round(span.end),
+				type: "text",
+				content: "Enter text...",
+				position: { ...DEFAULT_ANNOTATION_POSITION },
+				size: { ...DEFAULT_ANNOTATION_SIZE },
+				style: { ...DEFAULT_ANNOTATION_STYLE },
+				zIndex,
+			};
+			pushState((prev) => ({
+				annotationRegions: [...prev.annotationRegions, newRegion],
+			}));
+			setSelectedAnnotationId(id);
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			setSelectedBlurId(null);
+		},
+		[pushState],
+	);
+
+	const handleBlurAdded = useCallback(
+		(span: Span) => {
+			const id = `annotation-${nextAnnotationIdRef.current++}`;
+			const zIndex = nextAnnotationZIndexRef.current++;
+			const newRegion: AnnotationRegion = {
+				id,
+				startMs: Math.round(span.start),
+				endMs: Math.round(span.end),
+				type: "blur",
+				content: "",
+				position: { ...DEFAULT_ANNOTATION_POSITION },
+				size: { ...DEFAULT_ANNOTATION_SIZE },
+				style: { ...DEFAULT_ANNOTATION_STYLE },
+				zIndex,
+				blurData: { ...DEFAULT_BLUR_DATA },
+			};
+			pushState((prev) => ({
+				annotationRegions: [...prev.annotationRegions, newRegion],
+			}));
+			setSelectedBlurId(id);
+			setSelectedAnnotationId(null);
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+		},
+		[pushState],
+	);
+
+	const handleAnnotationSpanChange = useCallback(
+		(id: string, span: Span) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id
+						? {
+								...region,
+								startMs: Math.round(span.start),
+								endMs: Math.round(span.end),
+							}
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleAnnotationDuplicate = useCallback(
+		(id: string) => {
+			const duplicateId = `annotation-${nextAnnotationIdRef.current++}`;
+			const duplicateZIndex = nextAnnotationZIndexRef.current++;
+			pushState((prev) => {
+				const source = prev.annotationRegions.find((region) => region.id === id);
+				if (!source) return {};
+
+				const duplicate: AnnotationRegion = {
+					...source,
+					id: duplicateId,
+					zIndex: duplicateZIndex,
+					position: { x: source.position.x + 4, y: source.position.y + 4 },
+					size: { ...source.size },
+					style: { ...source.style },
+					figureData: source.figureData ? { ...source.figureData } : undefined,
+				};
+
+				return { annotationRegions: [...prev.annotationRegions, duplicate] };
+			});
+			setSelectedAnnotationId(duplicateId);
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			setSelectedBlurId(null);
+		},
+		[pushState],
+	);
+
+	const handleAnnotationDelete = useCallback(
+		(id: string) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.filter((r) => r.id !== id),
+			}));
+			if (selectedAnnotationId === id) {
+				setSelectedAnnotationId(null);
+			}
+			if (selectedBlurId === id) {
+				setSelectedBlurId(null);
+			}
+		},
+		[selectedAnnotationId, selectedBlurId, pushState],
+	);
+
+	const handleAnnotationContentChange = useCallback(
+		(id: string, content: string) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) => {
+					if (region.id !== id) return region;
+					if (region.type === "text") {
+						return { ...region, content, textContent: content };
+					} else if (region.type === "image") {
+						return { ...region, content, imageContent: content };
+					}
+					return { ...region, content };
+				}),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleAnnotationTypeChange = useCallback(
+		(id: string, type: AnnotationRegion["type"]) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) => {
+					if (region.id !== id) return region;
+					const updatedRegion = { ...region, type };
+					if (type === "text") {
+						updatedRegion.content = region.textContent || "Enter text...";
+					} else if (type === "image") {
+						updatedRegion.content = region.imageContent || "";
+					} else if (type === "figure") {
+						updatedRegion.content = "";
+						if (!region.figureData) {
+							updatedRegion.figureData = { ...DEFAULT_FIGURE_DATA };
+						}
+					} else if (type === "blur") {
+						updatedRegion.content = "";
+						if (!region.blurData) {
+							updatedRegion.blurData = { ...DEFAULT_BLUR_DATA };
+						}
+					}
+					return updatedRegion;
+				}),
+			}));
+
+			if (type === "blur" && selectedAnnotationId === id) {
+				setSelectedAnnotationId(null);
+				setSelectedBlurId(id);
+				setSelectedSpeedId(null);
+			} else if (type !== "blur" && selectedBlurId === id) {
+				setSelectedBlurId(null);
+				setSelectedAnnotationId(id);
+			}
+		},
+		[pushState, selectedAnnotationId, selectedBlurId],
+	);
+
+	const handleAnnotationStyleChange = useCallback(
+		(id: string, style: Partial<AnnotationRegion["style"]>) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id ? { ...region, style: { ...region.style, ...style } } : region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleAnnotationFigureDataChange = useCallback(
+		(id: string, figureData: FigureData) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id ? { ...region, figureData } : region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleBlurDataPreviewChange = useCallback(
+		(id: string, blurData: BlurData) => {
+			updateState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id
+						? {
+								...region,
+								blurData,
+								// Freehand drawing area is the full video surface.
+								...(blurData.shape === "freehand"
+									? {
+											position: { x: 0, y: 0 },
+											size: { width: 100, height: 100 },
+										}
+									: {}),
+							}
+						: region,
+				),
+			}));
+		},
+		[updateState],
+	);
+
+	const handleBlurDataPanelChange = useCallback(
+		(id: string, blurData: BlurData) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id
+						? {
+								...region,
+								blurData,
+								...(blurData.shape === "freehand"
+									? {
+											position: { x: 0, y: 0 },
+											size: { width: 100, height: 100 },
+										}
+									: {}),
+							}
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleAnnotationPositionChange = useCallback(
+		(id: string, position: { x: number; y: number }) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id ? { ...region, position } : region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	const handleAnnotationSizeChange = useCallback(
+		(id: string, size: { width: number; height: number }) => {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((region) =>
+					region.id === id ? { ...region, size } : region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			const mod = e.ctrlKey || e.metaKey;
+			const key = e.key.toLowerCase();
+
+			if (mod && key === "z" && !e.shiftKey) {
+				e.preventDefault();
+				e.stopPropagation();
+				undo();
+				return;
+			}
+			if (mod && (key === "y" || (key === "z" && e.shiftKey))) {
+				e.preventDefault();
+				e.stopPropagation();
+				redo();
+				return;
+			}
+
+			// Frame-step navigation (arrow keys, no modifiers)
+			if (
+				(e.key === "ArrowLeft" || e.key === "ArrowRight") &&
+				!e.ctrlKey &&
+				!e.metaKey &&
+				!e.shiftKey &&
+				!e.altKey
+			) {
+				const target = e.target;
+				if (
+					target instanceof HTMLInputElement ||
+					target instanceof HTMLTextAreaElement ||
+					target instanceof HTMLSelectElement ||
+					(target instanceof HTMLElement &&
+						(target.isContentEditable ||
+							target.closest('[role="separator"], [role="slider"], [role="spinbutton"]')))
+				) {
+					return;
+				}
+				e.preventDefault();
+				const video = videoPlaybackRef.current?.video;
+				if (!video) {
+					return;
+				}
+				const direction = e.key === "ArrowLeft" ? "backward" : "forward";
+				const newTime = computeFrameStepTime(
+					video.currentTime,
+					Number.isFinite(video.duration) ? video.duration : durationRef.current,
+					direction,
+				);
+				video.currentTime = newTime;
+				return;
+			}
+
+			const isInput =
+				e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
+
+			if (e.key === "Tab" && !isInput) {
+				e.preventDefault();
+			}
+
+			if (matchesShortcut(e, shortcuts.playPause, isMac)) {
+				// Allow space only in inputs/textareas
+				if (isInput) {
+					return;
+				}
+				e.preventDefault();
+				const playback = videoPlaybackRef.current;
+				if (playback?.video) {
+					playback.video.paused ? playback.play().catch(console.error) : playback.pause();
+				}
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+		return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
+	}, [undo, redo, shortcuts, isMac]);
+
+	useEffect(() => {
+		if (selectedZoomId && !zoomRegions.some((region) => region.id === selectedZoomId)) {
+			setSelectedZoomId(null);
+		}
+	}, [selectedZoomId, zoomRegions]);
+
+	useEffect(() => {
+		if (selectedTrimId && !trimRegions.some((region) => region.id === selectedTrimId)) {
+			setSelectedTrimId(null);
+		}
+	}, [selectedTrimId, trimRegions]);
+
+	useEffect(() => {
+		if (
+			selectedAnnotationId &&
+			!annotationOnlyRegions.some((region) => region.id === selectedAnnotationId)
+		) {
+			setSelectedAnnotationId(null);
+		}
+		if (selectedBlurId && !blurRegions.some((region) => region.id === selectedBlurId)) {
+			setSelectedBlurId(null);
+		}
+	}, [selectedAnnotationId, selectedBlurId, annotationOnlyRegions, blurRegions]);
+
+	useEffect(() => {
+		if (selectedSpeedId && !speedRegions.some((region) => region.id === selectedSpeedId)) {
+			setSelectedSpeedId(null);
+		}
+	}, [selectedSpeedId, speedRegions]);
+
+	const handleShowExportedFile = useCallback(async (filePath: string) => {
+		try {
+			const result = await window.electronAPI.revealInFolder(filePath);
+			if (!result.success) {
+				const errorMessage = result.error || result.message || "Failed to reveal item in folder.";
+				console.error("Failed to reveal in folder:", errorMessage);
+				toast.error(errorMessage);
+			}
+		} catch (error) {
+			const errorMessage = String(error);
+			console.error("Error calling revealInFolder IPC:", errorMessage);
+			toast.error(`Error revealing in folder: ${errorMessage}`);
+		}
+	}, []);
+
+	const handleExportSaved = useCallback(
+		(formatLabel: "GIF" | "Video", filePath: string) => {
+			setExportedFilePath(filePath);
+			const folder = parentDirectoryOf(filePath);
+			if (folder) {
+				saveUserPreferences({ exportFolder: folder });
+			}
+			toast.success(
+				t("export.exportedSuccessfully", {
+					format: formatLabel,
+				}),
+				{
+					description: filePath,
+					action: {
+						label: rawT("common.actions.showInFolder"),
+						onClick: () => {
+							void handleShowExportedFile(filePath);
+						},
+					},
+				},
+			);
+		},
+		[handleShowExportedFile, t, rawT],
+	);
+
+	const handleSaveUnsavedExport = useCallback(async () => {
+		if (!unsavedExport) return;
+		try {
+			const pickResult = await window.electronAPI.pickExportSavePath(
+				unsavedExport.fileName,
+				getExportFolder(),
+			);
+			if (pickResult.canceled || !pickResult.success || !pickResult.path) {
+				toast.info("Export canceled");
+				return;
+			}
+			const saveResult = await window.electronAPI.writeExportToPath(
+				unsavedExport.arrayBuffer,
+				pickResult.path,
+			);
+			if (saveResult.success && saveResult.path) {
+				setUnsavedExport(null);
+				handleExportSaved(unsavedExport.format === "gif" ? "GIF" : "Video", saveResult.path);
+			} else {
+				toast.error(
+					buildSaveDiagnosticMessage(
+						unsavedExport.format === "gif" ? "GIF" : "Video",
+						saveResult.message || "Failed to save export",
+					),
+				);
+			}
+		} catch (error) {
+			console.error("Error saving unsaved export:", error);
+			toast.error(
+				buildSaveDiagnosticMessage(
+					unsavedExport.format === "gif" ? "GIF" : "Video",
+					error instanceof Error ? error.message : "Failed to save exported video",
+				),
+			);
+		}
+	}, [unsavedExport, handleExportSaved]);
+
+	const handleExport = useCallback(
+		async (settings: ExportSettings) => {
+			if (!videoPath) {
+				toast.error("No video loaded");
+				return;
+			}
+
+			const video = videoPlaybackRef.current?.video;
+			if (!video) {
+				toast.error("Video not ready");
+				return;
+			}
+
+			// Ask the user where to save BEFORE starting the export. This avoids the
+			// post-export save dialog getting hidden behind other windows after a
+			// long-running export.
+			const isGifFormat = settings.format === "gif";
+			const targetFileName = `export-${Date.now()}.${isGifFormat ? "gif" : "mp4"}`;
+			const pickResult = await window.electronAPI.pickExportSavePath(
+				targetFileName,
+				getExportFolder(),
+			);
+			if (pickResult.canceled || !pickResult.success || !pickResult.path) {
+				setShowExportDialog(false);
+				return;
+			}
+			const targetPath = pickResult.path;
+
+			setIsExporting(true);
+			setExportProgress(null);
+			setExportError(null);
+			setExportedFilePath(null);
+
+			try {
+				const wasPlaying = isPlaying;
+				if (wasPlaying) {
+					videoPlaybackRef.current?.pause();
+				}
+
+				const sourceWidth = video.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
+				const sourceHeight = video.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
+				const effectiveSourceDimensions = calculateEffectiveSourceDimensions(
+					sourceWidth,
+					sourceHeight,
+					cropRegion,
+				);
+				const aspectRatioValue =
+					aspectRatio === "native"
+						? getNativeAspectRatioValue(sourceWidth, sourceHeight, cropRegion)
+						: getAspectRatioValue(aspectRatio);
+
+				// Get preview CONTAINER dimensions for scaling
+				const playbackRef = videoPlaybackRef.current;
+				const containerElement = playbackRef?.containerRef?.current;
+				const previewWidth = containerElement?.clientWidth || DEFAULT_SOURCE_DIMENSIONS.width;
+				const previewHeight = containerElement?.clientHeight || DEFAULT_SOURCE_DIMENSIONS.height;
+
+				if (settings.format === "gif" && settings.gifConfig) {
+					// GIF Export
+					const gifExporter = new GifExporter({
+						videoUrl: videoPath,
+						webcamVideoUrl: webcamVideoPath || undefined,
+						width: settings.gifConfig.width,
+						height: settings.gifConfig.height,
+						frameRate: settings.gifConfig.frameRate,
+						loop: settings.gifConfig.loop,
+						sizePreset: settings.gifConfig.sizePreset,
+						wallpaper,
+						zoomRegions,
+						trimRegions,
+						speedRegions,
+						showShadow: shadowIntensity > 0,
+						shadowIntensity,
+						showBlur,
+						motionBlurAmount,
+						borderRadius,
+						padding,
+						videoPadding: padding,
+						cropRegion,
+						cursorRecordingData,
+						cursorScale: effectiveShowCursor ? cursorSize : 0,
+						cursorSmoothing,
+						cursorMotionBlur,
+						cursorClickBounce,
+						cursorClipToBounds,
+						annotationRegions,
+						webcamLayoutPreset,
+						webcamMaskShape,
+						webcamSizePreset,
+						webcamPosition,
+						previewWidth,
+						previewHeight,
+						cursorTelemetry,
+						cursorClickTimestamps,
+						onProgress: (progress: ExportProgress) => {
+							setExportProgress(progress);
+						},
+					});
+
+					exporterRef.current = gifExporter as unknown as VideoExporter;
+					const result = await gifExporter.export();
+
+					if (result.success && result.blob) {
+						const arrayBuffer = await result.blob.arrayBuffer();
+
+						if (result.warnings) {
+							for (const warning of result.warnings) {
+								toast.warning(warning);
+							}
+						}
+
+						const saveResult = await window.electronAPI.writeExportToPath(arrayBuffer, targetPath);
+
+						if (saveResult.success && saveResult.path) {
+							setUnsavedExport(null);
+							handleExportSaved("GIF", saveResult.path);
+						} else {
+							setUnsavedExport({ arrayBuffer, fileName: targetFileName, format: "gif" });
+							const message = buildSaveDiagnosticMessage(
+								"GIF",
+								saveResult.message || "Failed to save GIF",
+							);
+							setExportError(message);
+							toast.error(message);
+						}
+					} else {
+						const message = buildExportDiagnosticMessage({
+							formatLabel: "GIF",
+							reason: result.error || "GIF export failed",
+							sourcePath: videoSourcePath ?? videoPath,
+							width: settings.gifConfig.width,
+							height: settings.gifConfig.height,
+							frameRate: settings.gifConfig.frameRate,
+						});
+						setExportError(message);
+						toast.error(message);
+					}
+				} else {
+					// MP4 Export
+					const quality = settings.quality || exportQuality;
+					const {
+						width: exportWidth,
+						height: exportHeight,
+						bitrate,
+					} = calculateMp4ExportSettings({
+						quality,
+						sourceWidth: effectiveSourceDimensions.width,
+						sourceHeight: effectiveSourceDimensions.height,
+						aspectRatioValue,
+					});
+
+					const exporter = new VideoExporter({
+						videoUrl: videoPath,
+						webcamVideoUrl: webcamVideoPath || undefined,
+						width: exportWidth,
+						height: exportHeight,
+						frameRate: 60,
+						bitrate,
+						codec: "avc1.640033",
+						wallpaper,
+						zoomRegions,
+						trimRegions,
+						speedRegions,
+						showShadow: shadowIntensity > 0,
+						shadowIntensity,
+						showBlur,
+						motionBlurAmount,
+						borderRadius,
+						padding,
+						cropRegion,
+						cursorRecordingData,
+						cursorScale: effectiveShowCursor ? cursorSize : 0,
+						cursorSmoothing,
+						cursorMotionBlur,
+						cursorClickBounce,
+						cursorClipToBounds,
+						annotationRegions,
+						webcamLayoutPreset,
+						webcamMaskShape,
+						webcamSizePreset,
+						webcamPosition,
+						previewWidth,
+						previewHeight,
+						cursorTelemetry,
+						cursorClickTimestamps,
+						onProgress: (progress: ExportProgress) => {
+							setExportProgress(progress);
+						},
+					});
+
+					exporterRef.current = exporter;
+					const result = await exporter.export();
+
+					if (result.success && result.blob) {
+						const arrayBuffer = await result.blob.arrayBuffer();
+
+						if (result.warnings) {
+							for (const warning of result.warnings) {
+								toast.warning(warning);
+							}
+						}
+
+						const saveResult = await window.electronAPI.writeExportToPath(arrayBuffer, targetPath);
+
+						if (saveResult.success && saveResult.path) {
+							setUnsavedExport(null);
+							handleExportSaved("Video", saveResult.path);
+						} else {
+							setUnsavedExport({ arrayBuffer, fileName: targetFileName, format: "mp4" });
+							const message = buildSaveDiagnosticMessage(
+								"Video",
+								saveResult.message || "Failed to save video",
+							);
+							setExportError(message);
+							toast.error(message);
+						}
+					} else {
+						const message = buildExportDiagnosticMessage({
+							formatLabel: "Video",
+							reason: result.error || "Export failed",
+							sourcePath: videoSourcePath ?? videoPath,
+							width: exportWidth,
+							height: exportHeight,
+							frameRate: 60,
+							codec: "avc1.640033",
+							bitrate,
+						});
+						setExportError(message);
+						toast.error(message);
+					}
+				}
+
+				if (wasPlaying) {
+					videoPlaybackRef.current?.play();
+				}
+			} catch (error) {
+				console.error("Export error:", error);
+				if (error instanceof BackgroundLoadError) {
+					const message = t("errors.exportBackgroundLoadFailed", { url: error.displayUrl });
+					setExportError(message);
+					toast.error(message);
+				} else {
+					const errorMessage = error instanceof Error ? error.message : "Unknown error";
+					const message = buildExportDiagnosticMessage({
+						formatLabel: settings.format === "gif" ? "GIF" : "Video",
+						reason: errorMessage,
+						sourcePath: videoSourcePath ?? videoPath,
+					});
+					setExportError(message);
+					toast.error(t("errors.exportFailedWithError", { error: message }));
+				}
+			} finally {
+				setIsExporting(false);
+				exporterRef.current = null;
+				// Reset dialog state to ensure it can be opened again on next export
+				// This fixes the bug where second export doesn't show save dialog
+				setShowExportDialog(false);
+				setExportProgress(null);
+			}
+		},
+		[
+			videoPath,
+			videoSourcePath,
+			webcamVideoPath,
+			wallpaper,
+			zoomRegions,
+			trimRegions,
+			speedRegions,
+			shadowIntensity,
+			showBlur,
+			motionBlurAmount,
+			borderRadius,
+			padding,
+			cropRegion,
+			cursorRecordingData,
+			annotationRegions,
+			isPlaying,
+			aspectRatio,
+			webcamLayoutPreset,
+			webcamMaskShape,
+			webcamSizePreset,
+			webcamPosition,
+			exportQuality,
+			handleExportSaved,
+			cursorTelemetry,
+			cursorClickTimestamps,
+			effectiveShowCursor,
+			cursorSize,
+			cursorSmoothing,
+			cursorMotionBlur,
+			cursorClickBounce,
+			cursorClipToBounds,
+			t,
+		],
+	);
+
+	const handleOpenExportDialog = useCallback(() => {
+		if (!videoPath) {
+			toast.error("No video loaded");
+			return;
+		}
+
+		const video = videoPlaybackRef.current?.video;
+		if (!video) {
+			toast.error("Video not ready");
+			return;
+		}
+
+		// Build export settings from current state
+		const sourceWidth = video.videoWidth || DEFAULT_SOURCE_DIMENSIONS.width;
+		const sourceHeight = video.videoHeight || DEFAULT_SOURCE_DIMENSIONS.height;
+		const effectiveSourceDimensions = calculateEffectiveSourceDimensions(
+			sourceWidth,
+			sourceHeight,
+			cropRegion,
+		);
+		const aspectRatioValue =
+			aspectRatio === "native"
+				? getNativeAspectRatioValue(sourceWidth, sourceHeight, cropRegion)
+				: getAspectRatioValue(aspectRatio);
+		const gifDimensions = calculateOutputDimensions(
+			effectiveSourceDimensions.width,
+			effectiveSourceDimensions.height,
+			gifSizePreset,
+			GIF_SIZE_PRESETS,
+			aspectRatioValue,
+		);
+
+		const settings: ExportSettings = {
+			format: exportFormat,
+			quality: exportFormat === "mp4" ? exportQuality : undefined,
+			gifConfig:
+				exportFormat === "gif"
+					? {
+							frameRate: gifFrameRate,
+							loop: gifLoop,
+							sizePreset: gifSizePreset,
+							width: gifDimensions.width,
+							height: gifDimensions.height,
+						}
+					: undefined,
+		};
+
+		setShowExportDialog(true);
+		setExportError(null);
+		setExportedFilePath(null);
+
+		// Start export immediately
+		handleExport(settings);
+	}, [
+		videoPath,
+		exportFormat,
+		exportQuality,
+		gifFrameRate,
+		gifLoop,
+		gifSizePreset,
+		aspectRatio,
+		cropRegion,
+		handleExport,
+	]);
+
+	const handleCancelExport = useCallback(() => {
+		if (exporterRef.current) {
+			exporterRef.current.cancel();
+			toast.info("Export canceled");
+			setShowExportDialog(false);
+			setIsExporting(false);
+			setExportProgress(null);
+			setExportError(null);
+			setExportedFilePath(null);
+		}
+	}, []);
+
+	const handleSaveDiagnostic = useCallback(async () => {
+		const result = await window.electronAPI.saveDiagnostic({
+			error: exportError ?? "Manual diagnostic export",
+			projectState: editorState,
+			logs: [],
+		});
+		if (result.success) {
+			toast.success("Diagnostic file saved");
+		} else if (!result.canceled) {
+			toast.error("Failed to save diagnostic file");
+		}
+	}, [exportError, editorState]);
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-background">
+				<div className="text-foreground">{t("loadingVideo")}</div>
+			</div>
+		);
+	}
+	if (error) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-background">
+				<div className="flex flex-col items-center gap-3">
+					<div className="text-destructive">{error}</div>
+					<button
+						type="button"
+						onClick={handleLoadProject}
+						className="px-3 py-1.5 rounded-md bg-[#34B27B] text-white text-sm hover:bg-[#34B27B]/90"
+					>
+						{ts("project.load")}
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col h-screen bg-[#09090b] text-slate-200 overflow-hidden selection:bg-[#34B27B]/30">
+			<Dialog open={showNewRecordingDialog} onOpenChange={setShowNewRecordingDialog}>
+				<DialogContent
+					className="sm:max-w-[425px]"
+					style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+				>
+					<DialogHeader>
+						<DialogTitle>{t("newRecording.title")}</DialogTitle>
+						<DialogDescription>{t("newRecording.description")}</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<button
+							type="button"
+							onClick={() => setShowNewRecordingDialog(false)}
+							className="px-4 py-2 rounded-md bg-white/10 text-white hover:bg-white/20 text-sm font-medium transition-colors"
+						>
+							{t("newRecording.cancel")}
+						</button>
+						<button
+							type="button"
+							onClick={handleNewRecordingConfirm}
+							className="px-4 py-2 rounded-md bg-[#34B27B] text-white hover:bg-[#34B27B]/90 text-sm font-medium transition-colors"
+						>
+							{t("newRecording.confirm")}
+						</button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			<div
+				className="h-11 flex-shrink-0 bg-[#070809]/85 backdrop-blur-xl border-b border-white/[0.07] flex items-center justify-between px-5 z-50 shadow-[0_1px_0_rgba(255,255,255,0.03)]"
+				style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
+			>
+				<div
+					className="flex-1 flex items-center gap-1"
+					style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+				>
+					<div
+						className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 ${isMac ? "ml-14" : "ml-2"}`}
+					>
+						<Languages size={14} />
+						<select
+							value={locale}
+							onChange={(e) => setLocale(e.target.value as Locale)}
+							className="bg-transparent text-[11px] font-medium outline-none cursor-pointer appearance-none pr-1"
+							style={{ color: "inherit" }}
+						>
+							{availableLocales.map((loc) => (
+								<option key={loc} value={loc} className="bg-[#09090b] text-white">
+									{getLocaleName(loc)}
+								</option>
+							))}
+						</select>
+					</div>
+					<button
+						type="button"
+						onClick={() => setShowNewRecordingDialog(true)}
+						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 text-[11px] font-medium"
+					>
+						<Video size={14} />
+						{t("newRecording.title")}
+					</button>
+					<button
+						type="button"
+						onClick={handleLoadProject}
+						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 text-[11px] font-medium"
+					>
+						<FolderOpen size={14} />
+						{ts("project.load")}
+					</button>
+					<button
+						type="button"
+						onClick={handleSaveProject}
+						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 text-[11px] font-medium"
+					>
+						<Save size={14} />
+						{ts("project.save")}
+					</button>
+				</div>
+			</div>
+
+			<div className="editor-workspace flex-1 min-h-0 relative">
+				<PanelGroup direction="vertical" className="gap-3 min-h-0">
+					{/* Top section: preview and contextual settings */}
+					<Panel defaultSize={67} maxSize={76} minSize={46} className="min-h-[300px]">
+						<div className="editor-main-deck h-full min-h-0">
+							<div className="editor-preview-zone min-w-0 h-full">
+								<div
+									ref={playerContainerRef}
+									className={
+										isFullscreen
+											? "fixed inset-0 z-[99999] w-full h-full flex flex-col items-center justify-center bg-[#09090b]"
+											: "editor-preview-panel w-full h-full flex flex-col items-center justify-center overflow-hidden relative"
+									}
+								>
+									{/* Video preview */}
+									<div className="w-full min-h-0 flex justify-center items-center flex-auto px-4 pt-4">
+										<div
+											className="relative flex justify-center items-center w-auto h-full max-w-full box-border"
+											style={{
+												aspectRatio:
+													aspectRatio === "native"
+														? getNativeAspectRatioValue(
+																videoPlaybackRef.current?.video?.videoWidth ||
+																	DEFAULT_SOURCE_DIMENSIONS.width,
+																videoPlaybackRef.current?.video?.videoHeight ||
+																	DEFAULT_SOURCE_DIMENSIONS.height,
+																cropRegion,
+															)
+														: getAspectRatioValue(aspectRatio),
+											}}
+										>
+											<VideoPlayback
+												key={`${videoPath || "no-video"}:${webcamVideoPath || "no-webcam"}`}
+												aspectRatio={aspectRatio}
+												ref={videoPlaybackRef}
+												videoPath={videoPath || ""}
+												webcamVideoPath={webcamVideoPath || undefined}
+												webcamLayoutPreset={webcamLayoutPreset}
+												webcamMaskShape={webcamMaskShape}
+												webcamSizePreset={webcamSizePreset}
+												webcamPosition={webcamPosition}
+												onWebcamPositionChange={(pos) => updateState({ webcamPosition: pos })}
+												onWebcamPositionDragEnd={commitState}
+												onDurationChange={setDuration}
+												onTimeUpdate={setCurrentTime}
+												currentTime={currentTime}
+												onPlayStateChange={setIsPlaying}
+												onError={setError}
+												wallpaper={wallpaper}
+												zoomRegions={zoomRegions}
+												selectedZoomId={selectedZoomId}
+												onSelectZoom={handleSelectZoom}
+												onZoomFocusChange={handleZoomFocusChange}
+												onZoomFocusDragEnd={commitState}
+												isPlaying={isPlaying}
+												showShadow={shadowIntensity > 0}
+												shadowIntensity={shadowIntensity}
+												showBlur={showBlur}
+												motionBlurAmount={motionBlurAmount}
+												borderRadius={borderRadius}
+												padding={padding}
+												cropRegion={cropRegion}
+												cursorRecordingData={cursorRecordingData}
+												trimRegions={trimRegions}
+												speedRegions={speedRegions}
+												annotationRegions={annotationOnlyRegions}
+												selectedAnnotationId={selectedAnnotationId}
+												onSelectAnnotation={handleSelectAnnotation}
+												onAnnotationPositionChange={handleAnnotationPositionChange}
+												onAnnotationSizeChange={handleAnnotationSizeChange}
+												blurRegions={blurRegions}
+												selectedBlurId={selectedBlurId}
+												onSelectBlur={handleSelectBlur}
+												onBlurPositionChange={handleAnnotationPositionChange}
+												onBlurSizeChange={handleAnnotationSizeChange}
+												onBlurDataChange={handleBlurDataPreviewChange}
+												onBlurDataCommit={commitState}
+												cursorTelemetry={cursorTelemetry}
+												cursorClickTimestamps={cursorClickTimestamps}
+												showCursor={effectiveShowCursor}
+												cursorSize={cursorSize}
+												cursorSmoothing={cursorSmoothing}
+												cursorMotionBlur={cursorMotionBlur}
+												cursorClickBounce={cursorClickBounce}
+												cursorClipToBounds={cursorClipToBounds}
+												isPreviewingZoom={isPreviewingZoom}
+											/>
+										</div>
+									</div>
+									{/* Playback controls */}
+									<div className="w-full flex justify-center items-center h-14 flex-shrink-0 px-4 py-2">
+										<div className="w-full max-w-[760px]">
+											<PlaybackControls
+												isPlaying={isPlaying}
+												currentTime={currentTime}
+												duration={duration}
+												isFullscreen={isFullscreen}
+												onToggleFullscreen={toggleFullscreen}
+												onTogglePlayPause={togglePlayPause}
+												onSeek={handleSeek}
+											/>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div className="editor-settings-rail flex min-w-0 h-full flex-col gap-3">
+								{guideRecordingId && (
+									<GuidePanel
+										recordingId={guideRecordingId}
+										videoPath={videoPath}
+										videoSourcePath={videoSourcePath}
+										currentTimeMs={currentTime * 1000}
+									/>
+								)}
+								<div className="min-h-0 flex-1 overflow-hidden">
+									<SettingsPanel
+										selected={wallpaper}
+										onWallpaperChange={(w) => pushState({ wallpaper: w })}
+										selectedZoomDepth={
+											selectedZoomId
+												? zoomRegions.find((z) => z.id === selectedZoomId)?.depth
+												: null
+										}
+										onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
+										selectedZoomCustomScale={
+											selectedZoomId
+												? (zoomRegions.find((z) => z.id === selectedZoomId)?.customScale ?? null)
+												: null
+										}
+										onZoomCustomScaleChange={handleZoomCustomScaleChange}
+										onZoomCustomScaleCommit={handleZoomCustomScaleCommit}
+										onZoomPreviewStart={() => setIsPreviewingZoom(true)}
+										onZoomPreviewEnd={() => setIsPreviewingZoom(false)}
+										selectedZoomFocusMode={
+											selectedZoomId
+												? (zoomRegions.find((z) => z.id === selectedZoomId)?.focusMode ?? "manual")
+												: null
+										}
+										onZoomFocusModeChange={(mode) =>
+											selectedZoomId && handleZoomFocusModeChange(mode)
+										}
+										selectedZoomFocus={
+											selectedZoomId
+												? (zoomRegions.find((z) => z.id === selectedZoomId)?.focus ?? null)
+												: null
+										}
+										onZoomFocusCoordinateChange={(focus) =>
+											selectedZoomId && handleZoomFocusChange(selectedZoomId, focus)
+										}
+										onZoomFocusCoordinateCommit={commitState}
+										hasCursorTelemetry={cursorTelemetry.length > 0}
+										selectedZoomId={selectedZoomId}
+										onZoomDelete={handleZoomDelete}
+										selectedZoomRotationPreset={
+											selectedZoomId
+												? (zoomRegions.find((z) => z.id === selectedZoomId)?.rotationPreset ?? null)
+												: null
+										}
+										onZoomRotationPresetChange={handleZoomRotationPresetChange}
+										selectedTrimId={selectedTrimId}
+										onTrimDelete={handleTrimDelete}
+										shadowIntensity={shadowIntensity}
+										onShadowChange={(v) => updateState({ shadowIntensity: v })}
+										onShadowCommit={commitState}
+										showBlur={showBlur}
+										onBlurChange={(v) => pushState({ showBlur: v })}
+										motionBlurAmount={motionBlurAmount}
+										onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
+										onMotionBlurCommit={commitState}
+										borderRadius={borderRadius}
+										onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
+										onBorderRadiusCommit={commitState}
+										padding={padding}
+										onPaddingChange={(v) => updateState({ padding: v })}
+										onPaddingCommit={commitState}
+										cropRegion={cropRegion}
+										onCropChange={(r) => pushState({ cropRegion: r })}
+										aspectRatio={aspectRatio}
+										hasWebcam={Boolean(webcamVideoPath)}
+										webcamLayoutPreset={webcamLayoutPreset}
+										onWebcamLayoutPresetChange={(preset) =>
+											pushState({
+												webcamLayoutPreset: preset,
+												webcamPosition: preset === "picture-in-picture" ? webcamPosition : null,
+											})
+										}
+										webcamMaskShape={webcamMaskShape}
+										onWebcamMaskShapeChange={(shape) => pushState({ webcamMaskShape: shape })}
+										webcamSizePreset={webcamSizePreset}
+										onWebcamSizePresetChange={(v) => updateState({ webcamSizePreset: v })}
+										onWebcamSizePresetCommit={commitState}
+										videoElement={videoPlaybackRef.current?.video || null}
+										exportQuality={exportQuality}
+										onExportQualityChange={setExportQuality}
+										exportFormat={exportFormat}
+										onExportFormatChange={setExportFormat}
+										gifFrameRate={gifFrameRate}
+										onGifFrameRateChange={setGifFrameRate}
+										gifLoop={gifLoop}
+										onGifLoopChange={setGifLoop}
+										gifSizePreset={gifSizePreset}
+										onGifSizePresetChange={setGifSizePreset}
+										gifOutputDimensions={calculateOutputDimensions(
+											calculateEffectiveSourceDimensions(
+												videoPlaybackRef.current?.video?.videoWidth ||
+													DEFAULT_SOURCE_DIMENSIONS.width,
+												videoPlaybackRef.current?.video?.videoHeight ||
+													DEFAULT_SOURCE_DIMENSIONS.height,
+												cropRegion,
+											).width,
+											calculateEffectiveSourceDimensions(
+												videoPlaybackRef.current?.video?.videoWidth ||
+													DEFAULT_SOURCE_DIMENSIONS.width,
+												videoPlaybackRef.current?.video?.videoHeight ||
+													DEFAULT_SOURCE_DIMENSIONS.height,
+												cropRegion,
+											).height,
+											gifSizePreset,
+											GIF_SIZE_PRESETS,
+											aspectRatio === "native"
+												? getNativeAspectRatioValue(
+														videoPlaybackRef.current?.video?.videoWidth ||
+															DEFAULT_SOURCE_DIMENSIONS.width,
+														videoPlaybackRef.current?.video?.videoHeight ||
+															DEFAULT_SOURCE_DIMENSIONS.height,
+														cropRegion,
+													)
+												: getAspectRatioValue(aspectRatio),
+										)}
+										onExport={handleOpenExportDialog}
+										onExportPanelOpen={() => {
+											setSelectedZoomId(null);
+											setSelectedTrimId(null);
+											setSelectedSpeedId(null);
+										}}
+										selectedAnnotationId={selectedAnnotationId}
+										annotationRegions={annotationOnlyRegions}
+										onAnnotationContentChange={handleAnnotationContentChange}
+										onAnnotationTypeChange={handleAnnotationTypeChange}
+										onAnnotationStyleChange={handleAnnotationStyleChange}
+										onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+										onAnnotationDuplicate={handleAnnotationDuplicate}
+										onAnnotationDelete={handleAnnotationDelete}
+										selectedBlurId={selectedBlurId}
+										blurRegions={blurRegions}
+										onBlurDataChange={handleBlurDataPanelChange}
+										onBlurDataCommit={commitState}
+										onBlurDelete={handleAnnotationDelete}
+										selectedSpeedId={selectedSpeedId}
+										selectedSpeedValue={
+											selectedSpeedId
+												? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
+												: null
+										}
+										onSpeedChange={handleSpeedChange}
+										onSpeedDelete={handleSpeedDelete}
+										unsavedExport={unsavedExport}
+										onSaveUnsavedExport={handleSaveUnsavedExport}
+										onSaveDiagnostic={handleSaveDiagnostic}
+										showCursor={showCursor}
+										onShowCursorChange={setShowCursor}
+										cursorSize={cursorSize}
+										onCursorSizeChange={setCursorSize}
+										cursorSmoothing={cursorSmoothing}
+										onCursorSmoothingChange={setCursorSmoothing}
+										cursorMotionBlur={cursorMotionBlur}
+										onCursorMotionBlurChange={setCursorMotionBlur}
+										cursorClickBounce={cursorClickBounce}
+										onCursorClickBounceChange={setCursorClickBounce}
+										cursorClipToBounds={cursorClipToBounds}
+										onCursorClipToBoundsChange={setCursorClipToBounds}
+										hasCursorData={
+											cursorTelemetry.length > 0 ||
+											hasNativeCursorRecordingData(cursorRecordingData)
+										}
+										showCursorSettings={showCursorSettings}
+									/>
+								</div>
+							</div>
+						</div>
+					</Panel>
+
+					<PanelResizeHandle className="editor-resize-handle group">
+						<div className="w-10 h-1 bg-white/20 rounded-full transition-colors group-hover:bg-[#34B27B]/70"></div>
+					</PanelResizeHandle>
+
+					{/* Full-width timeline */}
+					<Panel defaultSize={33} maxSize={54} minSize={24} className="min-h-[210px]">
+						<div className="editor-timeline-panel h-full overflow-hidden flex flex-col">
+							<TimelineEditor
+								videoDuration={duration}
+								currentTime={currentTime}
+								onSeek={handleSeek}
+								cursorTelemetry={cursorTelemetry}
+								zoomRegions={zoomRegions}
+								onZoomAdded={handleZoomAdded}
+								onZoomSuggested={handleZoomSuggested}
+								onZoomSpanChange={handleZoomSpanChange}
+								onZoomDelete={handleZoomDelete}
+								selectedZoomId={selectedZoomId}
+								onSelectZoom={handleSelectZoom}
+								trimRegions={trimRegions}
+								onTrimAdded={handleTrimAdded}
+								onTrimSpanChange={handleTrimSpanChange}
+								onTrimDelete={handleTrimDelete}
+								selectedTrimId={selectedTrimId}
+								onSelectTrim={handleSelectTrim}
+								speedRegions={speedRegions}
+								onSpeedAdded={handleSpeedAdded}
+								onSpeedSpanChange={handleSpeedSpanChange}
+								onSpeedDelete={handleSpeedDelete}
+								selectedSpeedId={selectedSpeedId}
+								onSelectSpeed={handleSelectSpeed}
+								annotationRegions={annotationOnlyRegions}
+								onAnnotationAdded={handleAnnotationAdded}
+								onAnnotationSpanChange={handleAnnotationSpanChange}
+								onAnnotationDelete={handleAnnotationDelete}
+								selectedAnnotationId={selectedAnnotationId}
+								onSelectAnnotation={handleSelectAnnotation}
+								blurRegions={blurRegions}
+								onBlurAdded={handleBlurAdded}
+								onBlurSpanChange={handleAnnotationSpanChange}
+								onBlurDelete={handleAnnotationDelete}
+								selectedBlurId={selectedBlurId}
+								onSelectBlur={handleSelectBlur}
+								aspectRatio={aspectRatio}
+								onAspectRatioChange={(ar) =>
+									pushState({
+										aspectRatio: ar,
+										webcamLayoutPreset:
+											(isPortraitAspectRatio(ar) && webcamLayoutPreset === "dual-frame") ||
+											(!isPortraitAspectRatio(ar) && webcamLayoutPreset === "vertical-stack")
+												? "picture-in-picture"
+												: webcamLayoutPreset,
+									})
+								}
+							/>
+						</div>
+					</Panel>
+				</PanelGroup>
+			</div>
+
+			<ExportDialog
+				isOpen={showExportDialog}
+				onClose={() => setShowExportDialog(false)}
+				progress={exportProgress}
+				isExporting={isExporting}
+				error={exportError}
+				onCancel={handleCancelExport}
+				exportFormat={exportFormat}
+				exportedFilePath={exportedFilePath || undefined}
+				onShowInFolder={
+					exportedFilePath ? () => void handleShowExportedFile(exportedFilePath) : undefined
+				}
+			/>
+
+			<UnsavedChangesDialog
+				isOpen={showCloseConfirmDialog}
+				onSaveAndClose={handleCloseConfirmSave}
+				onDiscardAndClose={handleCloseConfirmDiscard}
+				onCancel={handleCloseConfirmCancel}
+			/>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
new file mode 100644
index 0000000..28c7b50
--- /dev/null
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -0,0 +1,2111 @@
+import {
+	Application,
+	BlurFilter,
+	Container,
+	Graphics,
+	Sprite,
+	Texture,
+	VideoSource,
+} from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
+import type React from "react";
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import {
+	getWebcamLayoutCssBoxShadow,
+	type Size,
+	type StyledRenderRect,
+	type WebcamLayoutPreset,
+	type WebcamSizePreset,
+} from "@/lib/compositeLayout";
+import {
+	createNativeCursorMotionBlurState,
+	createNativeCursorSmoothingState,
+	getNativeCursorClickBounceProgress,
+	getNativeCursorClickBounceScale,
+	getNativeCursorMotionBlurPx,
+	hasNativeCursorRecordingData,
+	projectNativeCursorToLocal,
+	projectNativeCursorToStage,
+	resetNativeCursorMotionBlurState,
+	resetNativeCursorSmoothingState,
+	resolveInterpolatedNativeCursorFrame,
+	resolveNativeCursorRenderAsset,
+	smoothNativeCursorSample,
+} from "@/lib/cursor/nativeCursor";
+import { classifyWallpaper, DEFAULT_WALLPAPER, resolveImageWallpaperUrl } from "@/lib/wallpaper";
+import { getCssClipPath } from "@/lib/webcamMaskShapes";
+import type { CursorRecordingData } from "@/native/contracts";
+import {
+	type AspectRatio,
+	formatAspectRatioForCSS,
+	getNativeAspectRatioValue,
+} from "@/utils/aspectRatioUtils";
+import { AnnotationOverlay } from "./AnnotationOverlay";
+import {
+	DEFAULT_CURSOR_SETTINGS,
+	DEFAULT_EDITOR_LAYOUT_SETTINGS,
+	DEFAULT_SOURCE_DIMENSIONS,
+} from "./editorDefaults";
+import {
+	type AnnotationRegion,
+	type BlurData,
+	type CursorTelemetryPoint,
+	computeRotation3DContainScale,
+	DEFAULT_ROTATION_3D,
+	isRotation3DIdentity,
+	lerpRotation3D,
+	rotation3DPerspective,
+	type SpeedRegion,
+	type TrimRegion,
+	ZOOM_DEPTH_SCALES,
+	type ZoomDepth,
+	type ZoomFocus,
+	type ZoomRegion,
+} from "./types";
+import {
+	AUTO_FOLLOW_RAMP_DISTANCE,
+	AUTO_FOLLOW_SMOOTHING_FACTOR,
+	AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+	DEFAULT_FOCUS,
+	ZOOM_SCALE_DEADZONE,
+	ZOOM_TRANSLATION_DEADZONE_PX,
+} from "./videoPlayback/constants";
+import { adaptiveSmoothFactor, smoothCursorFocus } from "./videoPlayback/cursorFollowUtils";
+import {
+	DEFAULT_CURSOR_CONFIG,
+	PixiCursorOverlay,
+	preloadCursorAssets,
+} from "./videoPlayback/cursorRenderer";
+import { clampFocusToStage as clampFocusToStageUtil } from "./videoPlayback/focusUtils";
+import { layoutVideoContent as layoutVideoContentUtil } from "./videoPlayback/layoutUtils";
+import { clamp01 } from "./videoPlayback/mathUtils";
+import { updateOverlayIndicator } from "./videoPlayback/overlayUtils";
+import { createVideoEventHandlers } from "./videoPlayback/videoEventHandlers";
+import { findDominantRegion } from "./videoPlayback/zoomRegionUtils";
+import {
+	applyZoomTransform,
+	computeFocusFromTransform,
+	computeZoomTransform,
+	createMotionBlurState,
+	type MotionBlurState,
+} from "./videoPlayback/zoomTransform";
+
+interface VideoPlaybackProps {
+	videoPath: string;
+	webcamVideoPath?: string;
+	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape?: import("./types").WebcamMaskShape;
+	webcamSizePreset?: WebcamSizePreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	onWebcamPositionChange?: (position: { cx: number; cy: number }) => void;
+	onWebcamPositionDragEnd?: () => void;
+	onDurationChange: (duration: number) => void;
+	onTimeUpdate: (time: number) => void;
+	currentTime: number;
+	onPlayStateChange: (playing: boolean) => void;
+	onError: (error: string) => void;
+	wallpaper?: string;
+	zoomRegions: ZoomRegion[];
+	selectedZoomId: string | null;
+	onSelectZoom: (id: string | null) => void;
+	onZoomFocusChange: (id: string, focus: ZoomFocus) => void;
+	onZoomFocusDragEnd?: () => void;
+	isPlaying: boolean;
+	showShadow?: boolean;
+	shadowIntensity?: number;
+	showBlur?: boolean;
+	motionBlurAmount?: number;
+	borderRadius?: number;
+	padding?: number;
+	cropRegion?: import("./types").CropRegion;
+	trimRegions?: TrimRegion[];
+	speedRegions?: SpeedRegion[];
+	aspectRatio: AspectRatio;
+	cursorRecordingData?: CursorRecordingData | null;
+	annotationRegions?: AnnotationRegion[];
+	selectedAnnotationId?: string | null;
+	onSelectAnnotation?: (id: string | null) => void;
+	onAnnotationPositionChange?: (id: string, position: { x: number; y: number }) => void;
+	onAnnotationSizeChange?: (id: string, size: { width: number; height: number }) => void;
+	blurRegions?: AnnotationRegion[];
+	selectedBlurId?: string | null;
+	onSelectBlur?: (id: string | null) => void;
+	onBlurPositionChange?: (id: string, position: { x: number; y: number }) => void;
+	onBlurSizeChange?: (id: string, size: { width: number; height: number }) => void;
+	onBlurDataChange?: (id: string, blurData: BlurData) => void;
+	onBlurDataCommit?: () => void;
+	cursorTelemetry?: CursorTelemetryPoint[];
+	cursorClickTimestamps?: number[];
+	showCursor?: boolean;
+	cursorSize?: number;
+	cursorSmoothing?: number;
+	cursorMotionBlur?: number;
+	cursorClickBounce?: number;
+	cursorClipToBounds?: boolean;
+	// When true, render the selected zoom at the playhead even while paused —
+	// lets the editor preview the zoom effect without leaving the focus-edit view.
+	isPreviewingZoom?: boolean;
+}
+
+export interface VideoPlaybackRef {
+	video: HTMLVideoElement | null;
+	app: Application | null;
+	videoSprite: Sprite | null;
+	videoContainer: Container | null;
+	containerRef: React.RefObject<HTMLDivElement>;
+	play: () => Promise<void>;
+	pause: () => void;
+}
+
+function getResolvedVideoDuration(video: HTMLVideoElement): number | null {
+	if (Number.isFinite(video.duration) && video.duration > 0) {
+		return video.duration;
+	}
+
+	if (video.seekable.length > 0) {
+		const lastRangeIndex = video.seekable.length - 1;
+		const seekableEnd = video.seekable.end(lastRangeIndex);
+		if (Number.isFinite(seekableEnd) && seekableEnd > 0) {
+			return seekableEnd;
+		}
+	}
+
+	return null;
+}
+
+function getEndedVideoDuration(video: HTMLVideoElement): number | null {
+	const currentTime = video.currentTime;
+	if (!Number.isFinite(currentTime) || currentTime <= 0) {
+		return null;
+	}
+
+	if (video.ended) {
+		return currentTime;
+	}
+
+	const resolvedDuration = getResolvedVideoDuration(video);
+	const durationEpsilonSeconds = 0.05;
+	if (resolvedDuration && currentTime >= resolvedDuration - durationEpsilonSeconds) {
+		return resolvedDuration;
+	}
+
+	return null;
+}
+
+type AudioTrackListLike = {
+	length: number;
+	[index: number]: { enabled: boolean };
+};
+
+type VideoElementWithAudioTracks = HTMLVideoElement & {
+	audioTracks?: AudioTrackListLike;
+};
+
+function enableAllPreviewAudioTracks(video: HTMLVideoElement) {
+	const audioTracks = (video as VideoElementWithAudioTracks).audioTracks;
+	if (!audioTracks || audioTracks.length <= 1) {
+		return;
+	}
+
+	for (let index = 0; index < audioTracks.length; index += 1) {
+		audioTracks[index].enabled = true;
+	}
+}
+
+const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
+	(
+		{
+			videoPath,
+			webcamVideoPath,
+			webcamLayoutPreset,
+			webcamMaskShape,
+			webcamSizePreset,
+			webcamPosition,
+			onWebcamPositionChange,
+			onWebcamPositionDragEnd,
+			onDurationChange,
+			onTimeUpdate,
+			currentTime,
+			onPlayStateChange,
+			onError,
+			wallpaper,
+			zoomRegions,
+			selectedZoomId,
+			onSelectZoom,
+			onZoomFocusChange,
+			onZoomFocusDragEnd,
+			isPlaying,
+			showShadow,
+			shadowIntensity = 0,
+			showBlur,
+			motionBlurAmount = 0,
+			borderRadius = 0,
+			padding = DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+			cropRegion,
+			trimRegions = [],
+			speedRegions = [],
+			aspectRatio,
+			cursorRecordingData,
+			annotationRegions = [],
+			selectedAnnotationId,
+			onSelectAnnotation,
+			onAnnotationPositionChange,
+			onAnnotationSizeChange,
+			blurRegions = [],
+			selectedBlurId,
+			onSelectBlur,
+			onBlurPositionChange,
+			onBlurSizeChange,
+			onBlurDataChange,
+			onBlurDataCommit,
+			cursorTelemetry = [],
+			cursorClickTimestamps = [],
+			showCursor = false,
+			cursorSize = DEFAULT_CURSOR_SETTINGS.size,
+			cursorSmoothing = DEFAULT_CURSOR_SETTINGS.smoothing,
+			cursorMotionBlur = DEFAULT_CURSOR_SETTINGS.motionBlur,
+			cursorClickBounce = DEFAULT_CURSOR_SETTINGS.clickBounce,
+			cursorClipToBounds = DEFAULT_CURSOR_SETTINGS.clipToBounds,
+			isPreviewingZoom = false,
+		},
+		ref,
+	) => {
+		const videoRef = useRef<HTMLVideoElement | null>(null);
+		const supplementalAudioRef = useRef<HTMLAudioElement | null>(null);
+		const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
+		const containerRef = useRef<HTMLDivElement | null>(null);
+		const appRef = useRef<Application | null>(null);
+		const videoSpriteRef = useRef<Sprite | null>(null);
+		const videoContainerRef = useRef<Container | null>(null);
+		const cameraContainerRef = useRef<Container | null>(null);
+		const timeUpdateAnimationRef = useRef<number | null>(null);
+		const [pixiReady, setPixiReady] = useState(false);
+		const [videoReady, setVideoReady] = useState(false);
+		const [supplementalAudioPath, setSupplementalAudioPath] = useState<string | null>(null);
+		const [overlaySize, setOverlaySize] = useState({ width: 800, height: 600 });
+		const [overlayElement, setOverlayElement] = useState<HTMLDivElement | null>(null);
+		const overlayRef = useRef<HTMLDivElement | null>(null);
+
+		const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
+		const composite3DRef = useRef<HTMLDivElement | null>(null);
+		const outerWrapperRef = useRef<HTMLDivElement | null>(null);
+		const [webcamLayout, setWebcamLayout] = useState<StyledRenderRect | null>(null);
+		const [webcamDimensions, setWebcamDimensions] = useState<Size | null>(null);
+		const currentTimeRef = useRef(0);
+		const zoomRegionsRef = useRef<ZoomRegion[]>([]);
+		const cursorTelemetryRef = useRef<CursorTelemetryPoint[]>([]);
+		const cursorClickTimestampsRef = useRef<number[]>([]);
+		const selectedZoomIdRef = useRef<string | null>(null);
+		const animationStateRef = useRef({
+			scale: 1,
+			focusX: DEFAULT_FOCUS.cx,
+			focusY: DEFAULT_FOCUS.cy,
+			progress: 0,
+			x: 0,
+			y: 0,
+			appliedScale: 1,
+		});
+		const blurFilterRef = useRef<BlurFilter | null>(null);
+		const motionBlurFilterRef = useRef<MotionBlurFilter | null>(null);
+		const isDraggingFocusRef = useRef(false);
+		const isDraggingWebcamRef = useRef(false);
+		const webcamDragOffsetRef = useRef({ dx: 0, dy: 0 });
+		const stageSizeRef = useRef({ width: 0, height: 0 });
+		const videoSizeRef = useRef({ width: 0, height: 0 });
+		const baseScaleRef = useRef(1);
+		const baseOffsetRef = useRef({ x: 0, y: 0 });
+		const baseMaskRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
+		const cropBoundsRef = useRef({ startX: 0, endX: 0, startY: 0, endY: 0 });
+		const maskGraphicsRef = useRef<Graphics | null>(null);
+		const isPlayingRef = useRef(isPlaying);
+		const isSeekingRef = useRef(false);
+		const isScrubbingRef = useRef(false);
+		const scrubEndTimerRef = useRef<number | null>(null);
+		const [isScrubbing, setIsScrubbing] = useState(false);
+		const allowPlaybackRef = useRef(false);
+		const lockedVideoDimensionsRef = useRef<{
+			width: number;
+			height: number;
+		} | null>(null);
+		const layoutVideoContentRef = useRef<(() => void) | null>(null);
+		const trimRegionsRef = useRef<TrimRegion[]>([]);
+		const speedRegionsRef = useRef<SpeedRegion[]>([]);
+		const motionBlurAmountRef = useRef(motionBlurAmount);
+		const cursorOverlayRef = useRef<PixiCursorOverlay | null>(null);
+		const showCursorRef = useRef(showCursor);
+		const cursorSizeRef = useRef(cursorSize);
+		const cursorSmoothingRef = useRef(cursorSmoothing);
+		const cursorMotionBlurRef = useRef(cursorMotionBlur);
+		const cursorClickBounceRef = useRef(cursorClickBounce);
+		const cursorClipToBoundsRef = useRef(cursorClipToBounds);
+		const isPreviewingZoomRef = useRef(isPreviewingZoom);
+		const motionBlurStateRef = useRef<MotionBlurState>(createMotionBlurState());
+		const onTimeUpdateRef = useRef(onTimeUpdate);
+		const onPlayStateChangeRef = useRef(onPlayStateChange);
+		const videoReadyRafRef = useRef<number | null>(null);
+		const smoothedAutoFocusRef = useRef<ZoomFocus | null>(null);
+		const prevTargetProgressRef = useRef(0);
+		const durationResolutionTimeoutRef = useRef<number | null>(null);
+		const lastResolvedDurationRef = useRef<number | null>(null);
+		const isResolvingDurationRef = useRef(false);
+		const hasNativeCursorRecordingRef = useRef(false);
+		const cursorRecordingDataRef = useRef(cursorRecordingData);
+		const cropRegionRef = useRef(cropRegion);
+		const nativeCursorSpriteRef = useRef<Sprite | null>(null);
+		const nativeCursorTextureIdRef = useRef<string | null>(null);
+		const nativeCursorImageRef = useRef<HTMLImageElement | null>(null);
+		const nativeCursorImageIdRef = useRef<string | null>(null);
+		const nativeCursorSmoothingStateRef = useRef(createNativeCursorSmoothingState());
+		const nativeCursorMotionBlurStateRef = useRef(createNativeCursorMotionBlurState());
+		const nativeCursorClipRef = useRef<HTMLDivElement | null>(null);
+		const borderRadiusRef = useRef<number>(0);
+
+		const hasNativeCursorRecording = useMemo(
+			() => hasNativeCursorRecordingData(cursorRecordingData),
+			[cursorRecordingData],
+		);
+
+		const syncResolvedDuration = useCallback(
+			(video: HTMLVideoElement) => {
+				const resolvedDuration = getResolvedVideoDuration(video);
+				if (!resolvedDuration) {
+					return false;
+				}
+
+				const normalizedDuration = Math.round(resolvedDuration * 1000) / 1000;
+				if (lastResolvedDurationRef.current !== normalizedDuration) {
+					lastResolvedDurationRef.current = normalizedDuration;
+					onDurationChange(normalizedDuration);
+				}
+
+				return true;
+			},
+			[onDurationChange],
+		);
+
+		const forceResolveDuration = useCallback(
+			(video: HTMLVideoElement) => {
+				if (isResolvingDurationRef.current) {
+					return;
+				}
+
+				if (video.readyState < HTMLMediaElement.HAVE_METADATA) {
+					return;
+				}
+
+				isResolvingDurationRef.current = true;
+				const previousMuted = video.muted;
+
+				const finalize = () => {
+					video.removeEventListener("durationchange", handleProgress);
+					video.removeEventListener("timeupdate", handleProgress);
+					video.removeEventListener("loadeddata", handleProgress);
+					video.removeEventListener("ended", handleProgress);
+					if (durationResolutionTimeoutRef.current) {
+						clearTimeout(durationResolutionTimeoutRef.current);
+						durationResolutionTimeoutRef.current = null;
+					}
+					video.muted = previousMuted;
+					isResolvingDurationRef.current = false;
+				};
+
+				const resolveCurrentDuration = () => {
+					if (syncResolvedDuration(video)) {
+						return true;
+					}
+
+					const endedDuration = getEndedVideoDuration(video);
+					if (endedDuration) {
+						lastResolvedDurationRef.current = null;
+						onDurationChange(Math.round(endedDuration * 1000) / 1000);
+						return true;
+					}
+
+					return false;
+				};
+
+				const handleProgress = () => {
+					if (!resolveCurrentDuration()) {
+						return;
+					}
+
+					try {
+						video.pause();
+						video.currentTime = 0;
+					} catch {
+						// no-op
+					}
+					currentTimeRef.current = 0;
+					finalize();
+				};
+
+				video.addEventListener("durationchange", handleProgress);
+				video.addEventListener("timeupdate", handleProgress);
+				video.addEventListener("loadeddata", handleProgress);
+				video.addEventListener("ended", handleProgress);
+				durationResolutionTimeoutRef.current = window.setTimeout(() => {
+					handleProgress();
+					finalize();
+				}, 1500);
+				video.muted = true;
+
+				const playAttempt = video.play();
+				if (playAttempt && typeof playAttempt.catch === "function") {
+					playAttempt.catch(() => {
+						try {
+							video.currentTime = Math.max(video.currentTime, 0.1);
+						} catch {
+							finalize();
+						}
+					});
+				}
+
+				try {
+					video.currentTime = Math.max(video.currentTime, 0.1);
+				} catch {
+					finalize();
+				}
+			},
+			[onDurationChange, syncResolvedDuration],
+		);
+
+		const clampFocusToStage = useCallback((focus: ZoomFocus, depth: ZoomDepth) => {
+			return clampFocusToStageUtil(focus, depth, stageSizeRef.current);
+		}, []);
+
+		const updateOverlayForRegion = useCallback(
+			(region: ZoomRegion | null, focusOverride?: ZoomFocus) => {
+				const overlayEl = overlayRef.current;
+				const indicatorEl = focusIndicatorRef.current;
+
+				if (!overlayEl || !indicatorEl) {
+					return;
+				}
+
+				// Update stage size from overlay dimensions
+				const stageWidth = overlayEl.clientWidth;
+				const stageHeight = overlayEl.clientHeight;
+				if (stageWidth && stageHeight) {
+					stageSizeRef.current = { width: stageWidth, height: stageHeight };
+				}
+
+				updateOverlayIndicator({
+					overlayEl,
+					indicatorEl,
+					region,
+					focusOverride,
+					videoSize: videoSizeRef.current,
+					baseScale: baseScaleRef.current,
+					isPlaying: isPlayingRef.current,
+				});
+			},
+			[],
+		);
+
+		const layoutVideoContent = useCallback(() => {
+			const container = containerRef.current;
+			const app = appRef.current;
+			const videoSprite = videoSpriteRef.current;
+			const maskGraphics = maskGraphicsRef.current;
+			const videoElement = videoRef.current;
+			const cameraContainer = cameraContainerRef.current;
+
+			if (
+				!container ||
+				!app ||
+				!videoSprite ||
+				!maskGraphics ||
+				!videoElement ||
+				!cameraContainer
+			) {
+				return;
+			}
+
+			// Lock video dimensions on first layout to prevent resize issues
+			if (
+				!lockedVideoDimensionsRef.current &&
+				videoElement.videoWidth > 0 &&
+				videoElement.videoHeight > 0
+			) {
+				lockedVideoDimensionsRef.current = {
+					width: videoElement.videoWidth,
+					height: videoElement.videoHeight,
+				};
+			}
+
+			const result = layoutVideoContentUtil({
+				container,
+				app,
+				videoSprite,
+				maskGraphics,
+				videoElement,
+				cropRegion,
+				lockedVideoDimensions: lockedVideoDimensionsRef.current,
+				borderRadius,
+				padding,
+				webcamDimensions,
+				webcamLayoutPreset,
+				webcamSizePreset,
+				webcamPosition,
+				webcamMaskShape,
+			});
+
+			if (result) {
+				stageSizeRef.current = result.stageSize;
+				videoSizeRef.current = result.videoSize;
+				baseScaleRef.current = result.baseScale;
+				baseOffsetRef.current = result.baseOffset;
+				baseMaskRef.current = result.maskRect;
+				borderRadiusRef.current = result.maskBorderRadius;
+				cropBoundsRef.current = result.cropBounds;
+				setWebcamLayout(result.webcamRect);
+
+				// Reset camera container to identity
+				cameraContainer.scale.set(1);
+				cameraContainer.position.set(0, 0);
+
+				const selectedId = selectedZoomIdRef.current;
+				const activeRegion = selectedId
+					? (zoomRegionsRef.current.find((region) => region.id === selectedId) ?? null)
+					: null;
+
+				updateOverlayForRegion(activeRegion);
+			}
+		}, [
+			updateOverlayForRegion,
+			cropRegion,
+			borderRadius,
+			padding,
+			webcamDimensions,
+			webcamLayoutPreset,
+			webcamSizePreset,
+			webcamPosition,
+			webcamMaskShape,
+		]);
+
+		useEffect(() => {
+			layoutVideoContentRef.current = layoutVideoContent;
+		}, [layoutVideoContent]);
+
+		const setOverlayRefs = useCallback((node: HTMLDivElement | null) => {
+			overlayRef.current = node;
+			setOverlayElement(node);
+		}, []);
+
+		const selectedZoom = useMemo(() => {
+			if (!selectedZoomId) return null;
+			return zoomRegions.find((region) => region.id === selectedZoomId) ?? null;
+		}, [zoomRegions, selectedZoomId]);
+
+		useImperativeHandle(ref, () => ({
+			video: videoRef.current,
+			app: appRef.current,
+			videoSprite: videoSpriteRef.current,
+			videoContainer: videoContainerRef.current,
+			containerRef,
+			play: async () => {
+				const vid = videoRef.current;
+				if (!vid) return;
+				try {
+					allowPlaybackRef.current = true;
+					enableAllPreviewAudioTracks(vid);
+					await vid.play().catch((err) => {
+						console.log("PLAY ERROR:", err);
+						throw err;
+					});
+					const supplementalAudio = supplementalAudioRef.current;
+					if (supplementalAudio) {
+						supplementalAudio.currentTime = vid.currentTime;
+						supplementalAudio.playbackRate = vid.playbackRate;
+						await supplementalAudio.play().catch(() => {
+							// The main video remains the source of truth for playback state.
+						});
+					}
+				} catch (error) {
+					allowPlaybackRef.current = false;
+					throw error;
+				}
+			},
+			pause: () => {
+				const video = videoRef.current;
+				allowPlaybackRef.current = false;
+				if (!video) {
+					return;
+				}
+				video.pause();
+				supplementalAudioRef.current?.pause();
+			},
+		}));
+
+		const updateFocusFromClientPoint = (clientX: number, clientY: number) => {
+			const overlayEl = overlayRef.current;
+			if (!overlayEl) return;
+
+			const regionId = selectedZoomIdRef.current;
+			if (!regionId) return;
+
+			const region = zoomRegionsRef.current.find((r) => r.id === regionId);
+			if (!region) return;
+
+			const rect = overlayEl.getBoundingClientRect();
+			const stageWidth = rect.width;
+			const stageHeight = rect.height;
+
+			if (!stageWidth || !stageHeight) {
+				return;
+			}
+
+			stageSizeRef.current = { width: stageWidth, height: stageHeight };
+
+			const localX = clientX - rect.left;
+			const localY = clientY - rect.top;
+
+			const unclampedFocus: ZoomFocus = {
+				cx: clamp01(localX / stageWidth),
+				cy: clamp01(localY / stageHeight),
+			};
+			const clampedFocus = clampFocusToStage(unclampedFocus, region.depth);
+
+			onZoomFocusChange(region.id, clampedFocus);
+			updateOverlayForRegion({ ...region, focus: clampedFocus }, clampedFocus);
+		};
+
+		const handleOverlayPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+			if (isPlayingRef.current) return;
+			const regionId = selectedZoomIdRef.current;
+			if (!regionId) return;
+			const region = zoomRegionsRef.current.find((r) => r.id === regionId);
+			if (!region) return;
+			if (region.focusMode === "auto") return;
+			onSelectZoom(region.id);
+			event.preventDefault();
+			isDraggingFocusRef.current = true;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			updateFocusFromClientPoint(event.clientX, event.clientY);
+		};
+
+		const handleOverlayPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+			if (!isDraggingFocusRef.current) return;
+			event.preventDefault();
+			updateFocusFromClientPoint(event.clientX, event.clientY);
+		};
+
+		const endFocusDrag = (event: React.PointerEvent<HTMLDivElement>) => {
+			if (!isDraggingFocusRef.current) return;
+			isDraggingFocusRef.current = false;
+			try {
+				event.currentTarget.releasePointerCapture(event.pointerId);
+			} catch {
+				// Pointer may already be released.
+			}
+			onZoomFocusDragEnd?.();
+		};
+
+		const handleOverlayPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+			endFocusDrag(event);
+		};
+
+		const handleOverlayPointerLeave = (event: React.PointerEvent<HTMLDivElement>) => {
+			endFocusDrag(event);
+		};
+
+		// ── Webcam PiP drag handlers ──
+
+		const handleWebcamPointerDown = (event: React.PointerEvent<HTMLVideoElement>) => {
+			if (isPlayingRef.current) return;
+			if (webcamLayoutPreset !== "picture-in-picture") return;
+			event.preventDefault();
+			event.stopPropagation();
+			isDraggingWebcamRef.current = true;
+			event.currentTarget.setPointerCapture(event.pointerId);
+
+			const webcamEl = event.currentTarget;
+			const webcamRect = webcamEl.getBoundingClientRect();
+			webcamDragOffsetRef.current = {
+				dx: event.clientX - (webcamRect.left + webcamRect.width / 2),
+				dy: event.clientY - (webcamRect.top + webcamRect.height / 2),
+			};
+		};
+
+		const handleWebcamPointerMove = (event: React.PointerEvent<HTMLVideoElement>) => {
+			if (!isDraggingWebcamRef.current) return;
+			event.preventDefault();
+			event.stopPropagation();
+
+			const containerEl = containerRef.current;
+			if (!containerEl || !onWebcamPositionChange) return;
+
+			const containerRect = containerEl.getBoundingClientRect();
+			const cx = clamp01(
+				(event.clientX - webcamDragOffsetRef.current.dx - containerRect.left) / containerRect.width,
+			);
+			const cy = clamp01(
+				(event.clientY - webcamDragOffsetRef.current.dy - containerRect.top) / containerRect.height,
+			);
+			onWebcamPositionChange({ cx, cy });
+		};
+
+		const handleWebcamPointerUp = (event: React.PointerEvent<HTMLVideoElement>) => {
+			if (!isDraggingWebcamRef.current) return;
+			isDraggingWebcamRef.current = false;
+			try {
+				event.currentTarget.releasePointerCapture(event.pointerId);
+			} catch {
+				// Pointer may already be released.
+			}
+			onWebcamPositionDragEnd?.();
+		};
+
+		useEffect(() => {
+			zoomRegionsRef.current = zoomRegions;
+		}, [zoomRegions]);
+
+		useEffect(() => {
+			cursorTelemetryRef.current = cursorTelemetry;
+		}, [cursorTelemetry]);
+
+		useEffect(() => {
+			cursorClickTimestampsRef.current = cursorClickTimestamps;
+		}, [cursorClickTimestamps]);
+
+		useEffect(() => {
+			selectedZoomIdRef.current = selectedZoomId;
+		}, [selectedZoomId]);
+
+		useEffect(() => {
+			isPlayingRef.current = isPlaying;
+		}, [isPlaying]);
+
+		useEffect(() => {
+			trimRegionsRef.current = trimRegions;
+		}, [trimRegions]);
+
+		useEffect(() => {
+			speedRegionsRef.current = speedRegions;
+		}, [speedRegions]);
+
+		useEffect(() => {
+			motionBlurAmountRef.current = motionBlurAmount;
+		}, [motionBlurAmount]);
+
+		useEffect(() => {
+			cursorTelemetryRef.current = cursorTelemetry;
+		}, [cursorTelemetry]);
+
+		useEffect(() => {
+			showCursorRef.current = showCursor;
+		}, [showCursor]);
+
+		useEffect(() => {
+			hasNativeCursorRecordingRef.current = hasNativeCursorRecording;
+		}, [hasNativeCursorRecording]);
+
+		useEffect(() => {
+			cursorRecordingDataRef.current = cursorRecordingData;
+			resetNativeCursorSmoothingState(nativeCursorSmoothingStateRef.current);
+			resetNativeCursorMotionBlurState(nativeCursorMotionBlurStateRef.current);
+		}, [cursorRecordingData]);
+
+		useEffect(() => {
+			cropRegionRef.current = cropRegion;
+		}, [cropRegion]);
+
+		useEffect(() => {
+			cursorSizeRef.current = cursorSize;
+		}, [cursorSize]);
+
+		useEffect(() => {
+			cursorSmoothingRef.current = cursorSmoothing;
+		}, [cursorSmoothing]);
+
+		useEffect(() => {
+			cursorMotionBlurRef.current = cursorMotionBlur;
+		}, [cursorMotionBlur]);
+
+		useEffect(() => {
+			cursorClickBounceRef.current = cursorClickBounce;
+		}, [cursorClickBounce]);
+
+		useEffect(() => {
+			cursorClipToBoundsRef.current = cursorClipToBounds;
+		}, [cursorClipToBounds]);
+
+		useEffect(() => {
+			isPreviewingZoomRef.current = isPreviewingZoom;
+		}, [isPreviewingZoom]);
+
+		// Sync cursor overlay config when settings change
+		useEffect(() => {
+			const overlay = cursorOverlayRef.current;
+			if (!overlay) return;
+			overlay.setDotRadius(DEFAULT_CURSOR_CONFIG.dotRadius * cursorSize);
+			overlay.setSmoothingFactor(cursorSmoothing);
+			overlay.setMotionBlur(cursorMotionBlur);
+			overlay.setClickBounce(cursorClickBounce);
+			overlay.reset();
+		}, [cursorSize, cursorSmoothing, cursorMotionBlur, cursorClickBounce]);
+
+		useEffect(() => {
+			onTimeUpdateRef.current = onTimeUpdate;
+		}, [onTimeUpdate]);
+
+		useEffect(() => {
+			onPlayStateChangeRef.current = onPlayStateChange;
+		}, [onPlayStateChange]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			const el = overlayRef.current;
+			if (!el) return;
+
+			// Seed immediately so overlays never start at 800×600
+			setOverlaySize({ width: el.clientWidth, height: el.clientHeight });
+
+			const observer = new ResizeObserver((entries) => {
+				if (!entries[0]) return;
+				const { width, height } = entries[0].contentRect;
+				setOverlaySize((prev) => {
+					if (prev.width === width && prev.height === height) return prev;
+					return { width, height };
+				});
+			});
+
+			observer.observe(el);
+			return () => observer.disconnect();
+		}, [pixiReady, videoReady]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			const container = containerRef.current;
+			if (!container) return;
+
+			if (typeof ResizeObserver === "undefined") {
+				return;
+			}
+
+			const observer = new ResizeObserver(() => {
+				layoutVideoContent();
+			});
+
+			observer.observe(container);
+			return () => {
+				observer.disconnect();
+			};
+		}, [pixiReady, videoReady, layoutVideoContent]);
+
+		// Drop the PIXI canvas resolution to 1.0 while scrubbing (the user is
+		// navigating, not previewing) and restore native DPR on play/idle so the
+		// preview stays faithful. Mutating renderer.resolution per-frame would
+		// thrash texture uploads; we only do it on scrub-state transitions.
+		useEffect(() => {
+			if (!pixiReady) return;
+			const app = appRef.current;
+			const container = containerRef.current;
+			if (!app || !container) return;
+
+			const targetResolution = isScrubbing ? 1 : window.devicePixelRatio || 1;
+			if (app.renderer.resolution === targetResolution) return;
+
+			app.renderer.resolution = targetResolution;
+			app.renderer.resize(container.clientWidth, container.clientHeight);
+			layoutVideoContentRef.current?.();
+		}, [isScrubbing, pixiReady]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			updateOverlayForRegion(selectedZoom);
+		}, [selectedZoom, pixiReady, videoReady, updateOverlayForRegion]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			const overlayEl = overlayElement;
+			if (!overlayEl) return;
+			if (!selectedZoom) {
+				overlayEl.style.cursor = "default";
+				overlayEl.style.pointerEvents = "none";
+				return;
+			}
+			overlayEl.style.cursor = isPlaying ? "not-allowed" : "grab";
+			overlayEl.style.pointerEvents = isPlaying ? "none" : "auto";
+		}, [selectedZoom, isPlaying, pixiReady, videoReady, overlayElement]);
+
+		useEffect(() => {
+			const overlayEl = overlayElement;
+			if (!overlayEl) return;
+
+			const updateOverlaySize = () => {
+				const width = overlayEl.clientWidth || 800;
+				const height = overlayEl.clientHeight || 600;
+				setOverlaySize((prev) => {
+					if (prev.width === width && prev.height === height) return prev;
+					return { width, height };
+				});
+			};
+
+			updateOverlaySize();
+
+			if (typeof ResizeObserver !== "undefined") {
+				const observer = new ResizeObserver(() => {
+					updateOverlaySize();
+				});
+				observer.observe(overlayEl);
+				return () => observer.disconnect();
+			}
+
+			window.addEventListener("resize", updateOverlaySize);
+			return () => window.removeEventListener("resize", updateOverlaySize);
+		}, [overlayElement]);
+
+		useEffect(() => {
+			const container = containerRef.current;
+			if (!container) return;
+
+			let mounted = true;
+			let app: Application | null = null;
+
+			(async () => {
+				let cursorOverlayEnabled = true;
+				try {
+					await preloadCursorAssets();
+				} catch {
+					cursorOverlayEnabled = false;
+				}
+
+				app = new Application();
+
+				await app.init({
+					width: container.clientWidth,
+					height: container.clientHeight,
+					backgroundAlpha: 0,
+					antialias: true,
+					resolution: window.devicePixelRatio || 1,
+					autoDensity: true,
+				});
+
+				app.ticker.maxFPS = 60;
+
+				if (!mounted) {
+					app.destroy(true, {
+						children: true,
+						texture: true,
+						textureSource: true,
+					});
+					return;
+				}
+
+				appRef.current = app;
+				container.appendChild(app.canvas);
+
+				// Camera container - this will be scaled/positioned for zoom
+				const cameraContainer = new Container();
+				cameraContainerRef.current = cameraContainer;
+				app.stage.addChild(cameraContainer);
+
+				// Video container - holds the masked video sprite
+				const videoContainer = new Container();
+				videoContainerRef.current = videoContainer;
+				cameraContainer.addChild(videoContainer);
+
+				// Cursor overlay - rendered above the masked video
+				if (cursorOverlayEnabled) {
+					const cursorOverlay = new PixiCursorOverlay({
+						dotRadius: DEFAULT_CURSOR_CONFIG.dotRadius * cursorSizeRef.current,
+						smoothingFactor: cursorSmoothingRef.current,
+						motionBlur: cursorMotionBlurRef.current,
+						clickBounce: cursorClickBounceRef.current,
+					});
+					cursorOverlayRef.current = cursorOverlay;
+				}
+
+				setPixiReady(true);
+			})();
+
+			return () => {
+				mounted = false;
+				setPixiReady(false);
+				if (cursorOverlayRef.current) {
+					cursorOverlayRef.current.destroy();
+					cursorOverlayRef.current = null;
+				}
+				nativeCursorSpriteRef.current = null;
+				nativeCursorTextureIdRef.current = null;
+				nativeCursorImageIdRef.current = null;
+				if (app && app.renderer) {
+					app.destroy(true, {
+						children: true,
+						texture: true,
+						textureSource: true,
+					});
+				}
+				appRef.current = null;
+				cameraContainerRef.current = null;
+				videoContainerRef.current = null;
+				videoSpriteRef.current = null;
+			};
+		}, []);
+
+		useEffect(() => {
+			if (!videoPath) {
+				lastResolvedDurationRef.current = null;
+				isResolvingDurationRef.current = false;
+				setVideoReady(false);
+				setSupplementalAudioPath(null);
+				return;
+			}
+
+			let cancelled = false;
+			window.electronAPI
+				?.preparePreviewAudioTrack?.(videoPath)
+				.then((result) => {
+					if (!cancelled) {
+						setSupplementalAudioPath(result.success ? (result.path ?? null) : null);
+					}
+				})
+				.catch(() => {
+					if (!cancelled) {
+						setSupplementalAudioPath(null);
+					}
+				});
+
+			const video = videoRef.current;
+			if (!video) {
+				return () => {
+					cancelled = true;
+				};
+			}
+			video.pause();
+			video.currentTime = 0;
+			allowPlaybackRef.current = false;
+			lockedVideoDimensionsRef.current = null;
+			lastResolvedDurationRef.current = null;
+			isResolvingDurationRef.current = false;
+			if (durationResolutionTimeoutRef.current) {
+				clearTimeout(durationResolutionTimeoutRef.current);
+				durationResolutionTimeoutRef.current = null;
+			}
+			setVideoReady(false);
+			if (videoReadyRafRef.current) {
+				cancelAnimationFrame(videoReadyRafRef.current);
+				videoReadyRafRef.current = null;
+			}
+			video.load();
+
+			return () => {
+				cancelled = true;
+			};
+		}, [videoPath]);
+
+		useEffect(() => {
+			const video = videoRef.current;
+			const supplementalAudio = supplementalAudioRef.current;
+			if (!video || !supplementalAudio || !supplementalAudioPath) {
+				return;
+			}
+
+			const activeSpeedRegion =
+				speedRegions.find(
+					(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
+				) ?? null;
+			supplementalAudio.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+
+			if (!isPlaying) {
+				supplementalAudio.pause();
+				if (Math.abs(supplementalAudio.currentTime - currentTime) > 0.05) {
+					supplementalAudio.currentTime = currentTime;
+				}
+				return;
+			}
+
+			if (Math.abs(supplementalAudio.currentTime - video.currentTime) > 0.15) {
+				supplementalAudio.currentTime = video.currentTime;
+			}
+
+			supplementalAudio.play().catch(() => {
+				// Keep video playback running even if supplemental preview audio is unavailable.
+			});
+		}, [currentTime, isPlaying, speedRegions, supplementalAudioPath]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+
+			const video = videoRef.current;
+			const app = appRef.current;
+			const videoContainer = videoContainerRef.current;
+
+			if (!video || !app || !videoContainer) return;
+			if (video.videoWidth === 0 || video.videoHeight === 0) return;
+
+			const source = VideoSource.from(video);
+			if ("autoPlay" in source) {
+				(source as { autoPlay?: boolean }).autoPlay = false;
+			}
+			if ("autoUpdate" in source) {
+				(source as { autoUpdate?: boolean }).autoUpdate = true;
+			}
+			const videoTexture = Texture.from(source);
+
+			const videoSprite = new Sprite(videoTexture);
+			videoSpriteRef.current = videoSprite;
+
+			const maskGraphics = new Graphics();
+			videoContainer.addChild(videoSprite);
+			videoContainer.addChild(maskGraphics);
+			videoContainer.mask = maskGraphics;
+			maskGraphicsRef.current = maskGraphics;
+			const nativeCursorSprite = new Sprite(Texture.EMPTY);
+			nativeCursorSprite.visible = false;
+			nativeCursorSprite.eventMode = "none";
+			nativeCursorSpriteRef.current = nativeCursorSprite;
+			if (cursorOverlayRef.current) {
+				videoContainer.addChild(cursorOverlayRef.current.container);
+			}
+
+			videoContainer.addChild(nativeCursorSprite);
+
+			animationStateRef.current = {
+				scale: 1,
+				focusX: DEFAULT_FOCUS.cx,
+				focusY: DEFAULT_FOCUS.cy,
+				progress: 0,
+				x: 0,
+				y: 0,
+				appliedScale: 1,
+			};
+
+			const blurFilter = new BlurFilter();
+			blurFilter.quality = 3;
+			blurFilter.resolution = app.renderer.resolution;
+			blurFilter.blur = 0;
+			const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
+			blurFilterRef.current = blurFilter;
+			motionBlurFilterRef.current = motionBlurFilter;
+
+			layoutVideoContentRef.current?.();
+			video.pause();
+
+			const { handlePlay, handlePause, handleSeeked, handleSeeking } = createVideoEventHandlers({
+				video,
+				isSeekingRef,
+				isPlayingRef,
+				allowPlaybackRef,
+				currentTimeRef,
+				timeUpdateAnimationRef,
+				onPlayStateChange: (playing) => onPlayStateChangeRef.current(playing),
+				onTimeUpdate: (time) => onTimeUpdateRef.current(time),
+				trimRegionsRef,
+				speedRegionsRef,
+				isScrubbingRef,
+				scrubEndTimerRef,
+				onScrubChange: (scrubbing) => setIsScrubbing(scrubbing),
+			});
+
+			video.addEventListener("play", handlePlay);
+			video.addEventListener("pause", handlePause);
+			video.addEventListener("ended", handlePause);
+			video.addEventListener("seeked", handleSeeked);
+			video.addEventListener("seeking", handleSeeking);
+
+			return () => {
+				video.removeEventListener("play", handlePlay);
+				video.removeEventListener("pause", handlePause);
+				video.removeEventListener("ended", handlePause);
+				video.removeEventListener("seeked", handleSeeked);
+				video.removeEventListener("seeking", handleSeeking);
+
+				if (timeUpdateAnimationRef.current) {
+					cancelAnimationFrame(timeUpdateAnimationRef.current);
+				}
+
+				if (videoSprite) {
+					videoContainer.removeChild(videoSprite);
+					videoSprite.destroy();
+				}
+				if (maskGraphics) {
+					videoContainer.removeChild(maskGraphics);
+					maskGraphics.destroy();
+				}
+				if (nativeCursorSpriteRef.current) {
+					videoContainer.removeChild(nativeCursorSpriteRef.current);
+					nativeCursorSpriteRef.current.destroy();
+					nativeCursorSpriteRef.current = null;
+					nativeCursorTextureIdRef.current = null;
+				}
+				videoContainer.mask = null;
+				maskGraphicsRef.current = null;
+				if (blurFilterRef.current) {
+					videoContainer.filters = null;
+					blurFilterRef.current.destroy();
+					blurFilterRef.current = null;
+				}
+				if (motionBlurFilterRef.current) {
+					motionBlurFilterRef.current.destroy();
+					motionBlurFilterRef.current = null;
+				}
+				videoTexture.destroy(true);
+
+				videoSpriteRef.current = null;
+			};
+		}, [pixiReady, videoReady]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+
+			const app = appRef.current;
+			const videoSprite = videoSpriteRef.current;
+			const videoContainer = videoContainerRef.current;
+			if (!app || !videoSprite || !videoContainer) return;
+
+			const applyTransformFn = (
+				transform: { scale: number; x: number; y: number },
+				targetFocus: ZoomFocus,
+				motionIntensity: number,
+				motionVector: { x: number; y: number },
+			) => {
+				const cameraContainer = cameraContainerRef.current;
+				if (!cameraContainer) return;
+
+				const state = animationStateRef.current;
+
+				const appliedTransform = applyZoomTransform({
+					cameraContainer,
+					blurFilter: blurFilterRef.current,
+					motionBlurFilter: motionBlurFilterRef.current,
+					stageSize: stageSizeRef.current,
+					baseMask: baseMaskRef.current,
+					zoomScale: state.scale,
+					zoomProgress: state.progress,
+					focusX: targetFocus.cx,
+					focusY: targetFocus.cy,
+					motionIntensity,
+					motionVector,
+					isPlaying: isPlayingRef.current,
+					motionBlurAmount: motionBlurAmountRef.current,
+					transformOverride: transform,
+					motionBlurState: motionBlurStateRef.current,
+					frameTimeMs: performance.now(),
+				});
+
+				state.x = appliedTransform.x;
+				state.y = appliedTransform.y;
+				state.appliedScale = appliedTransform.scale;
+			};
+
+			let lastMotionBlurActive: boolean | null = null;
+			let lastTransformIsIdentity = true;
+			let lastPerspectiveValue = 0;
+			const ticker = () => {
+				const { region, strength, blendedScale, rotation3D, transition } = findDominantRegion(
+					zoomRegionsRef.current,
+					currentTimeRef.current,
+					{
+						connectZooms: true,
+						cursorTelemetry: cursorTelemetryRef.current,
+					},
+				);
+
+				const defaultFocus = DEFAULT_FOCUS;
+				let targetScaleFactor = 1;
+				let targetFocus = defaultFocus;
+				let targetProgress = 0;
+
+				// If a zoom is selected but video is not playing, show default unzoomed view
+				const selectedId = selectedZoomIdRef.current;
+				const hasSelectedZoom = selectedId !== null;
+				const shouldShowUnzoomedView =
+					hasSelectedZoom && !isPlayingRef.current && !isPreviewingZoomRef.current;
+
+				if (region && strength > 0 && !shouldShowUnzoomedView) {
+					const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];
+					const regionFocus = region.focus;
+
+					targetScaleFactor = zoomScale;
+					targetFocus = regionFocus;
+					targetProgress = strength;
+
+					// Apply adaptive smoothing for auto-follow mode
+					if (region.focusMode === "auto" && !transition) {
+						const raw = targetFocus;
+						const isZoomingIn =
+							targetProgress < 0.999 && targetProgress >= prevTargetProgressRef.current;
+						if (targetProgress >= 0.999) {
+							// Full zoom: adaptive smoothing — moves faster when far, decelerates when close
+							const prev = smoothedAutoFocusRef.current ?? raw;
+							const factor = adaptiveSmoothFactor(
+								raw,
+								prev,
+								AUTO_FOLLOW_SMOOTHING_FACTOR,
+								AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+								AUTO_FOLLOW_RAMP_DISTANCE,
+							);
+							const smoothed = smoothCursorFocus(raw, prev, factor);
+							smoothedAutoFocusRef.current = smoothed;
+							targetFocus = smoothed;
+						} else if (isZoomingIn) {
+							// Zoom-in: track cursor directly so zoom always aims at current cursor
+							// position; keep ref in sync to avoid snap when full-zoom begins
+							smoothedAutoFocusRef.current = raw;
+						} else {
+							// Zoom-out: keep smoothing for continuity — avoids snap at zoom-out start
+							const prev = smoothedAutoFocusRef.current ?? raw;
+							const factor = adaptiveSmoothFactor(
+								raw,
+								prev,
+								AUTO_FOLLOW_SMOOTHING_FACTOR,
+								AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+								AUTO_FOLLOW_RAMP_DISTANCE,
+							);
+							const smoothed = smoothCursorFocus(raw, prev, factor);
+							smoothedAutoFocusRef.current = smoothed;
+							targetFocus = smoothed;
+						}
+					} else if (region.focusMode !== "auto") {
+						smoothedAutoFocusRef.current = null;
+					}
+					prevTargetProgressRef.current = targetProgress;
+
+					// Handle connected zoom transitions (pan between adjacent zoom regions)
+					if (transition) {
+						const startTransform = computeZoomTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: transition.startScale,
+							zoomProgress: 1,
+							focusX: transition.startFocus.cx,
+							focusY: transition.startFocus.cy,
+						});
+						const endTransform = computeZoomTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: transition.endScale,
+							zoomProgress: 1,
+							focusX: transition.endFocus.cx,
+							focusY: transition.endFocus.cy,
+						});
+
+						const interpolatedTransform = {
+							scale:
+								startTransform.scale +
+								(endTransform.scale - startTransform.scale) * transition.progress,
+							x: startTransform.x + (endTransform.x - startTransform.x) * transition.progress,
+							y: startTransform.y + (endTransform.y - startTransform.y) * transition.progress,
+						};
+
+						targetScaleFactor = interpolatedTransform.scale;
+						targetFocus = computeFocusFromTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: interpolatedTransform.scale,
+							x: interpolatedTransform.x,
+							y: interpolatedTransform.y,
+						});
+						targetProgress = 1;
+					}
+				}
+
+				const state = animationStateRef.current;
+				const prevScale = state.appliedScale;
+				const prevX = state.x;
+				const prevY = state.y;
+
+				state.scale = targetScaleFactor;
+				state.focusX = targetFocus.cx;
+				state.focusY = targetFocus.cy;
+				state.progress = targetProgress;
+
+				const projectedTransform = computeZoomTransform({
+					stageSize: stageSizeRef.current,
+					baseMask: baseMaskRef.current,
+					zoomScale: state.scale,
+					zoomProgress: state.progress,
+					focusX: state.focusX,
+					focusY: state.focusY,
+				});
+
+				const appliedScale =
+					Math.abs(projectedTransform.scale - prevScale) < ZOOM_SCALE_DEADZONE
+						? projectedTransform.scale
+						: projectedTransform.scale;
+				const appliedX =
+					Math.abs(projectedTransform.x - prevX) < ZOOM_TRANSLATION_DEADZONE_PX
+						? projectedTransform.x
+						: projectedTransform.x;
+				const appliedY =
+					Math.abs(projectedTransform.y - prevY) < ZOOM_TRANSLATION_DEADZONE_PX
+						? projectedTransform.y
+						: projectedTransform.y;
+
+				const motionIntensity = Math.max(
+					Math.abs(appliedScale - prevScale),
+					Math.abs(appliedX - prevX) / Math.max(1, stageSizeRef.current.width),
+					Math.abs(appliedY - prevY) / Math.max(1, stageSizeRef.current.height),
+				);
+
+				const motionVector = {
+					x: appliedX - prevX,
+					y: appliedY - prevY,
+				};
+
+				applyTransformFn(
+					{ scale: appliedScale, x: appliedX, y: appliedY },
+					targetFocus,
+					motionIntensity,
+					motionVector,
+				);
+
+				const isMotionBlurActive =
+					(motionBlurAmountRef.current || 0) > 0 && isPlayingRef.current && !isScrubbingRef.current;
+
+				if (isMotionBlurActive !== lastMotionBlurActive && videoContainerRef.current) {
+					if (isMotionBlurActive) {
+						if (blurFilterRef.current && motionBlurFilterRef.current) {
+							videoContainerRef.current.filters = [
+								blurFilterRef.current,
+								motionBlurFilterRef.current,
+							];
+							lastMotionBlurActive = true;
+						}
+					} else {
+						videoContainerRef.current.filters = null;
+						lastMotionBlurActive = false;
+					}
+				}
+
+				// Update cursor overlay
+				const cursorOverlay = cursorOverlayRef.current;
+				if (cursorOverlay) {
+					const timeMs = currentTimeRef.current; // already in ms
+					cursorOverlay.update(
+						cursorTelemetryRef.current,
+						timeMs,
+						baseMaskRef.current,
+						showCursorRef.current && !hasNativeCursorRecordingRef.current,
+						!isPlayingRef.current || isSeekingRef.current,
+					);
+				}
+
+				// Keep the native cursor preview in the same transformed coordinate space as PIXI.
+				const nativeCursorSprite = nativeCursorSpriteRef.current;
+				const nativeCursorImage = nativeCursorImageRef.current;
+				const hideNativeCursorPreview = () => {
+					if (nativeCursorSprite) {
+						nativeCursorSprite.visible = false;
+					}
+					if (nativeCursorImage) {
+						nativeCursorImage.style.display = "none";
+						nativeCursorImage.style.filter = "none";
+					}
+					if (nativeCursorClipRef.current) {
+						nativeCursorClipRef.current.style.clipPath = "";
+					}
+					resetNativeCursorSmoothingState(nativeCursorSmoothingStateRef.current);
+					resetNativeCursorMotionBlurState(nativeCursorMotionBlurStateRef.current);
+				};
+				if (nativeCursorImage) {
+					if (hasNativeCursorRecordingRef.current && showCursorRef.current) {
+						const timeMs = currentTimeRef.current; // already in ms
+						const frame = resolveInterpolatedNativeCursorFrame(
+							cursorRecordingDataRef.current,
+							timeMs,
+						);
+						if (frame) {
+							const displaySample = smoothNativeCursorSample({
+								forceSnap: !isPlayingRef.current || isSeekingRef.current,
+								sample: frame.sample,
+								smoothing: cursorSmoothingRef.current,
+								state: nativeCursorSmoothingStateRef.current,
+								timeMs,
+							});
+							const cameraContainer = cameraContainerRef.current;
+							const videoContainer = videoContainerRef.current;
+							const cropRegionValue = cropRegionRef.current ?? { x: 0, y: 0, width: 1, height: 1 };
+							const projectedLocalPoint = projectNativeCursorToLocal({
+								cropRegion: cropRegionValue,
+								maskRect: baseMaskRef.current,
+								sample: displaySample,
+							});
+							const projectedStagePoint =
+								cameraContainer && videoContainer
+									? projectNativeCursorToStage({
+											cameraContainer,
+											cropRegion: cropRegionValue,
+											maskRect: baseMaskRef.current,
+											videoContainerPosition: {
+												x: videoContainer.x,
+												y: videoContainer.y,
+											},
+											sample: displaySample,
+										})
+									: null;
+							if (projectedLocalPoint && projectedStagePoint) {
+								// Pass deviceScaleFactor=1 — asset.scaleFactor already encodes DPR.
+								// Size is normalized below so preview matches export proportionally.
+								const renderAsset = resolveNativeCursorRenderAsset(frame.asset, 1, displaySample);
+								const bounceProgress = getNativeCursorClickBounceProgress(
+									cursorRecordingDataRef.current,
+									timeMs,
+								);
+								const scale =
+									Math.max(0, cursorSizeRef.current) *
+									getNativeCursorClickBounceScale(cursorClickBounceRef.current, bounceProgress);
+								// Normalize cursor size to the displayed video width so the cursor
+								// appears at the same fraction of the video in both preview and export.
+								const crop = cropRegionRef.current ?? { x: 0, y: 0, width: 1, height: 1 };
+								const croppedVideoWidth = (videoRef.current?.videoWidth ?? 0) * crop.width;
+								const sizeNorm =
+									croppedVideoWidth > 0 ? baseMaskRef.current.width / croppedVideoWidth : 1;
+								const transformedScale = scale * Math.abs(cameraContainer?.scale.x || 1) * sizeNorm;
+								const blurPx =
+									!isPlayingRef.current || isSeekingRef.current
+										? 0
+										: getNativeCursorMotionBlurPx({
+												motionBlur: cursorMotionBlurRef.current,
+												point: projectedStagePoint,
+												state: nativeCursorMotionBlurStateRef.current,
+												timeMs,
+											});
+								if (nativeCursorImageIdRef.current !== renderAsset.id) {
+									nativeCursorImage.src = renderAsset.imageDataUrl;
+									nativeCursorImageIdRef.current = renderAsset.id;
+								}
+								nativeCursorImage.style.display = "block";
+								// Update clip-path on nativeCursorClipRef to the camera-aware video boundary.
+								// clip-path works correctly here because nativeCursorClipRef is outside preserve-3d.
+								// When cursorClipToBounds is off, allow the cursor to overflow the canvas.
+								if (nativeCursorClipRef.current) {
+									if (!cursorClipToBoundsRef.current) {
+										nativeCursorClipRef.current.style.clipPath = "none";
+									} else {
+										const mask = baseMaskRef.current;
+										const stage = stageSizeRef.current;
+										const br = borderRadiusRef.current;
+										const s = cameraContainer ? Math.abs(cameraContainer.scale.x) : 1;
+										const camX = cameraContainer ? cameraContainer.position.x : 0;
+										const camY = cameraContainer ? cameraContainer.position.y : 0;
+										const clipLeft = camX + s * mask.x;
+										const clipTop = camY + s * mask.y;
+										const clipRight = camX + s * (mask.x + mask.width);
+										const clipBottom = camY + s * (mask.y + mask.height);
+										nativeCursorClipRef.current.style.clipPath = `inset(${clipTop}px ${stage.width - clipRight}px ${stage.height - clipBottom}px ${clipLeft}px round ${br * s}px)`;
+									}
+								}
+								nativeCursorImage.style.width = `${renderAsset.width * transformedScale}px`;
+								nativeCursorImage.style.height = `${renderAsset.height * transformedScale}px`;
+								nativeCursorImage.style.filter =
+									blurPx > 0 ? `blur(${blurPx.toFixed(2)}px)` : "none";
+								// translate3d is relative to nativeCursorClipRef (absolute inset-0 = stage origin).
+								// projectedStagePoint.x is the stage-space cursor position — no offset needed.
+								nativeCursorImage.style.transform = `translate3d(${
+									projectedStagePoint.x - renderAsset.hotspotX * transformedScale
+								}px, ${projectedStagePoint.y - renderAsset.hotspotY * transformedScale}px, 0)`;
+								if (nativeCursorSprite) {
+									nativeCursorSprite.visible = false;
+									if (nativeCursorTextureIdRef.current !== renderAsset.id) {
+										nativeCursorSprite.texture = Texture.from(renderAsset.imageDataUrl);
+										nativeCursorTextureIdRef.current = renderAsset.id;
+									}
+									nativeCursorSprite.position.set(
+										projectedLocalPoint.x - renderAsset.hotspotX * scale,
+										projectedLocalPoint.y - renderAsset.hotspotY * scale,
+									);
+									nativeCursorSprite.width = renderAsset.width * scale;
+									nativeCursorSprite.height = renderAsset.height * scale;
+								}
+							} else {
+								hideNativeCursorPreview();
+							}
+						} else {
+							hideNativeCursorPreview();
+						}
+					} else {
+						hideNativeCursorPreview();
+					}
+				} else {
+					hideNativeCursorPreview();
+				}
+
+				const composite3D = composite3DRef.current;
+				const outerWrapper = outerWrapperRef.current;
+				if (composite3D && outerWrapper) {
+					const effectiveRotation =
+						region && targetProgress > 0 && !shouldShowUnzoomedView
+							? lerpRotation3D(DEFAULT_ROTATION_3D, rotation3D, targetProgress)
+							: DEFAULT_ROTATION_3D;
+					const isIdentity = isRotation3DIdentity(effectiveRotation);
+					if (isIdentity) {
+						if (!lastTransformIsIdentity) {
+							composite3D.style.transform = "";
+							composite3D.style.willChange = "auto";
+							lastTransformIsIdentity = true;
+						}
+						if (nativeCursorClipRef.current) {
+							nativeCursorClipRef.current.style.transform = "";
+						}
+						if (lastPerspectiveValue !== 0) {
+							outerWrapper.style.perspective = "";
+							lastPerspectiveValue = 0;
+						}
+					} else {
+						const wrapperW = outerWrapper.clientWidth || 1;
+						const wrapperH = outerWrapper.clientHeight || 1;
+						const persp = rotation3DPerspective(wrapperW, wrapperH);
+						const containScale = computeRotation3DContainScale(
+							effectiveRotation,
+							wrapperW,
+							wrapperH,
+							persp,
+						);
+						composite3D.style.transform = `scale(${containScale}) rotateX(${effectiveRotation.rotationX}deg) rotateY(${effectiveRotation.rotationY}deg) rotateZ(${effectiveRotation.rotationZ}deg)`;
+						composite3D.style.willChange = "transform";
+						if (nativeCursorClipRef.current) {
+							nativeCursorClipRef.current.style.transform = composite3D.style.transform;
+						}
+						lastTransformIsIdentity = false;
+						if (persp !== lastPerspectiveValue) {
+							outerWrapper.style.perspective = `${persp}px`;
+							lastPerspectiveValue = persp;
+						}
+					}
+				}
+			};
+
+			app.ticker.add(ticker);
+			return () => {
+				if (app && app.ticker) {
+					app.ticker.remove(ticker);
+				}
+			};
+		}, [pixiReady, videoReady]);
+
+		const handleLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+			const video = e.currentTarget;
+			enableAllPreviewAudioTracks(video);
+			const hasResolvedDuration = syncResolvedDuration(video);
+			if (!hasResolvedDuration) {
+				forceResolveDuration(video);
+			} else {
+				video.currentTime = 0;
+			}
+			video.pause();
+			allowPlaybackRef.current = false;
+			currentTimeRef.current = 0;
+
+			if (videoReadyRafRef.current) {
+				cancelAnimationFrame(videoReadyRafRef.current);
+				videoReadyRafRef.current = null;
+			}
+
+			const waitForRenderableFrame = () => {
+				const hasDimensions = video.videoWidth > 0 && video.videoHeight > 0;
+				const hasData = video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA;
+				if (!syncResolvedDuration(video)) {
+					forceResolveDuration(video);
+				}
+				if (hasDimensions && hasData) {
+					videoReadyRafRef.current = null;
+					setVideoReady(true);
+					return;
+				}
+				videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
+			};
+
+			videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
+		};
+
+		const resolvedWallpaper = useMemo<string | null>(() => {
+			const source = wallpaper || DEFAULT_WALLPAPER;
+			const classified = classifyWallpaper(source);
+			if (classified.kind !== "image") return classified.value;
+			try {
+				return resolveImageWallpaperUrl(classified.path);
+			} catch (err) {
+				console.warn("[VideoPlayback] wallpaper resolve failed:", err);
+				return null;
+			}
+		}, [wallpaper]);
+		const webcamCssBoxShadow = useMemo(
+			() => getWebcamLayoutCssBoxShadow(webcamLayoutPreset),
+			[webcamLayoutPreset],
+		);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				setWebcamDimensions(null);
+				return;
+			}
+
+			const handleLoadedMetadata = () => {
+				if (webcamVideo.videoWidth > 0 && webcamVideo.videoHeight > 0) {
+					setWebcamDimensions({
+						width: webcamVideo.videoWidth,
+						height: webcamVideo.videoHeight,
+					});
+				}
+			};
+
+			webcamVideo.addEventListener("loadedmetadata", handleLoadedMetadata);
+			handleLoadedMetadata();
+			return () => {
+				webcamVideo.removeEventListener("loadedmetadata", handleLoadedMetadata);
+			};
+		}, [webcamVideoPath]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				return;
+			}
+
+			const activeSpeedRegion =
+				speedRegions.find(
+					(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
+				) ?? null;
+			webcamVideo.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+
+			if (!isPlaying) {
+				webcamVideo.pause();
+				if (Math.abs(webcamVideo.currentTime - currentTime) > 0.05) {
+					webcamVideo.currentTime = currentTime;
+				}
+				return;
+			}
+
+			if (Math.abs(webcamVideo.currentTime - currentTime) > 0.15) {
+				webcamVideo.currentTime = currentTime;
+			}
+
+			webcamVideo.play().catch(() => {
+				// Ignore webcam autoplay restoration failures.
+			});
+		}, [currentTime, isPlaying, speedRegions, webcamVideoPath]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				return;
+			}
+
+			webcamVideo.pause();
+			webcamVideo.currentTime = 0;
+		}, [webcamVideoPath]);
+
+		useEffect(() => {
+			return () => {
+				if (videoReadyRafRef.current) {
+					cancelAnimationFrame(videoReadyRafRef.current);
+					videoReadyRafRef.current = null;
+				}
+				if (scrubEndTimerRef.current !== null) {
+					window.clearTimeout(scrubEndTimerRef.current);
+					scrubEndTimerRef.current = null;
+				}
+				if (durationResolutionTimeoutRef.current) {
+					clearTimeout(durationResolutionTimeoutRef.current);
+					durationResolutionTimeoutRef.current = null;
+				}
+			};
+		}, []);
+
+		const isImageUrl = Boolean(
+			resolvedWallpaper &&
+				(resolvedWallpaper.startsWith("file://") ||
+					resolvedWallpaper.startsWith("http") ||
+					resolvedWallpaper.startsWith("/") ||
+					resolvedWallpaper.startsWith("data:")),
+		);
+		const backgroundStyle = isImageUrl
+			? { backgroundImage: `url(${resolvedWallpaper || ""})` }
+			: { background: resolvedWallpaper || "" };
+
+		return (
+			<div
+				ref={outerWrapperRef}
+				className="relative rounded-sm overflow-hidden"
+				style={{
+					width: "100%",
+					aspectRatio: formatAspectRatioForCSS(
+						aspectRatio,
+						aspectRatio === "native"
+							? getNativeAspectRatioValue(
+									lockedVideoDimensionsRef.current?.width || DEFAULT_SOURCE_DIMENSIONS.width,
+									lockedVideoDimensionsRef.current?.height || DEFAULT_SOURCE_DIMENSIONS.height,
+									cropRegion,
+								)
+							: undefined,
+					),
+				}}
+			>
+				{/* Background layer - always render as DOM element with blur */}
+				<div
+					className="absolute inset-0 bg-cover bg-center"
+					style={{
+						...backgroundStyle,
+						filter: showBlur ? "blur(2px)" : "none",
+					}}
+				/>
+				<div
+					ref={composite3DRef}
+					className="absolute inset-0"
+					style={{
+						transformStyle: "preserve-3d",
+						transformOrigin: "center center",
+					}}
+				>
+					<div
+						ref={containerRef}
+						className="absolute inset-0"
+						style={{
+							filter:
+								showShadow && shadowIntensity > 0
+									? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
+									: "none",
+						}}
+					/>
+					{webcamVideoPath &&
+						(() => {
+							const clipPath = getCssClipPath(webcamLayout?.maskShape ?? "rectangle");
+							const useClipPath = !!clipPath;
+							return (
+								<div
+									className="absolute"
+									style={{
+										left: webcamLayout?.x ?? 0,
+										top: webcamLayout?.y ?? 0,
+										width: webcamLayout?.width ?? 0,
+										height: webcamLayout?.height ?? 0,
+										zIndex: 20,
+										opacity: webcamLayout ? 1 : 0,
+										filter:
+											useClipPath && webcamCssBoxShadow !== "none"
+												? `drop-shadow(${webcamCssBoxShadow})`
+												: undefined,
+									}}
+								>
+									<video
+										ref={webcamVideoRef}
+										src={webcamVideoPath}
+										className={`w-full h-full object-cover ${webcamLayoutPreset === "picture-in-picture" ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`}
+										style={{
+											borderRadius: useClipPath ? 0 : (webcamLayout?.borderRadius ?? 0),
+											clipPath: clipPath ?? undefined,
+											boxShadow: useClipPath ? "none" : webcamCssBoxShadow,
+											backgroundColor: "#000",
+										}}
+										onPointerDown={handleWebcamPointerDown}
+										onPointerMove={handleWebcamPointerMove}
+										onPointerUp={handleWebcamPointerUp}
+										onPointerLeave={handleWebcamPointerUp}
+										muted
+										preload="metadata"
+										playsInline
+									/>
+								</div>
+							);
+						})()}
+					{/* Only render overlay after PIXI and video are fully initialized */}
+					{pixiReady && videoReady && (
+						<div
+							ref={setOverlayRefs}
+							className="absolute inset-0 select-none"
+							style={{ pointerEvents: "auto", zIndex: 30 }}
+							onPointerDown={handleOverlayPointerDown}
+							onPointerMove={handleOverlayPointerMove}
+							onPointerUp={handleOverlayPointerUp}
+							onPointerLeave={handleOverlayPointerLeave}
+						>
+							<div
+								ref={focusIndicatorRef}
+								className="absolute rounded-md border border-[#34B27B]/80 bg-[#34B27B]/20 shadow-[0_0_0_1px_rgba(52,178,123,0.35)]"
+								style={{ display: "none", pointerEvents: "none" }}
+							/>
+							{(() => {
+								const filteredAnnotations = (annotationRegions || []).filter((annotation) => {
+									if (
+										typeof annotation.startMs !== "number" ||
+										typeof annotation.endMs !== "number"
+									)
+										return false;
+
+									if (annotation.id === selectedAnnotationId) return true;
+
+									const timeMs = Math.round(currentTime * 1000);
+									return timeMs >= annotation.startMs && timeMs < annotation.endMs;
+								});
+
+								const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
+									if (
+										typeof blurRegion.startMs !== "number" ||
+										typeof blurRegion.endMs !== "number"
+									)
+										return false;
+
+									if (blurRegion.id === selectedBlurId) return true;
+
+									const timeMs = Math.round(currentTime * 1000);
+									return timeMs >= blurRegion.startMs && timeMs < blurRegion.endMs;
+								});
+
+								const sorted = [
+									...filteredAnnotations.map((annotation) => ({
+										kind: "annotation" as const,
+										region: annotation,
+									})),
+									...filteredBlurRegions.map((blurRegion) => ({
+										kind: "blur" as const,
+										region: blurRegion,
+									})),
+								].sort((a, b) => a.region.zIndex - b.region.zIndex);
+								const previewSnapshotCanvas =
+									filteredBlurRegions.length > 0
+										? (() => {
+												const app = appRef.current;
+												if (!app?.renderer?.extract) return null;
+												try {
+													return app.renderer.extract.canvas(app.stage);
+												} catch {
+													return null;
+												}
+											})()
+										: null;
+
+								// Handle click-through cycling: when clicking same annotation, cycle to next
+								const handleAnnotationClick = (clickedId: string) => {
+									if (!onSelectAnnotation) return;
+
+									// If clicking on already selected annotation and there are multiple overlapping
+									if (clickedId === selectedAnnotationId && filteredAnnotations.length > 1) {
+										// Find current index and cycle to next
+										const currentIndex = filteredAnnotations.findIndex((a) => a.id === clickedId);
+										const nextIndex = (currentIndex + 1) % filteredAnnotations.length;
+										onSelectAnnotation(filteredAnnotations[nextIndex].id);
+									} else {
+										// First click or clicking different annotation
+										onSelectAnnotation(clickedId);
+									}
+								};
+
+								const handleBlurClick = (clickedId: string) => {
+									if (!onSelectBlur) return;
+
+									if (clickedId === selectedBlurId && filteredBlurRegions.length > 1) {
+										const currentIndex = filteredBlurRegions.findIndex((a) => a.id === clickedId);
+										const nextIndex = (currentIndex + 1) % filteredBlurRegions.length;
+										onSelectBlur(filteredBlurRegions[nextIndex].id);
+									} else {
+										onSelectBlur(clickedId);
+									}
+								};
+
+								return sorted.map((item) => (
+									<AnnotationOverlay
+										key={
+											item.kind === "blur"
+												? `${item.region.id}-${overlaySize.width}-${overlaySize.height}-${item.region.blurData?.type ?? "blur"}-${item.region.blurData?.shape ?? "rectangle"}-${item.region.blurData?.color ?? "white"}-${Math.round(item.region.blurData?.blockSize ?? 0)}-${Math.round(item.region.blurData?.intensity ?? 0)}-${(item.region.blurData?.freehandPoints ?? []).map((p) => `${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
+												: `${item.region.id}-${overlaySize.width}-${overlaySize.height}`
+										}
+										annotation={item.region}
+										isSelected={
+											item.kind === "blur"
+												? item.region.id === selectedBlurId
+												: item.region.id === selectedAnnotationId
+										}
+										containerWidth={overlaySize.width}
+										containerHeight={overlaySize.height}
+										onPositionChange={(id, position) =>
+											item.kind === "blur"
+												? onBlurPositionChange?.(id, position)
+												: onAnnotationPositionChange?.(id, position)
+										}
+										onSizeChange={(id, size) =>
+											item.kind === "blur"
+												? onBlurSizeChange?.(id, size)
+												: onAnnotationSizeChange?.(id, size)
+										}
+										onBlurDataChange={
+											item.kind === "blur"
+												? (id, blurData) => onBlurDataChange?.(id, blurData)
+												: undefined
+										}
+										onBlurDataCommit={item.kind === "blur" ? onBlurDataCommit : undefined}
+										onClick={item.kind === "blur" ? handleBlurClick : handleAnnotationClick}
+										zIndex={item.region.zIndex}
+										isSelectedBoost={
+											item.kind === "blur"
+												? item.region.id === selectedBlurId
+												: item.region.id === selectedAnnotationId
+										}
+										previewSourceCanvas={previewSnapshotCanvas}
+										previewFrameVersion={Math.round(currentTime * 1000)}
+									/>
+								));
+							})()}
+						</div>
+					)}
+				</div>
+				{/* Clip the native cursor overlay to the exact video canvas boundary.
+				    Placed OUTSIDE composite3DRef (preserve-3d) so clip-path works
+				    correctly even during 3D zoom rotation regions.
+				    clip-path is set dynamically to the camera-aware video bounds. */}
+				<div
+					ref={nativeCursorClipRef}
+					className="absolute inset-0"
+					style={{ zIndex: 18, pointerEvents: "none" }}
+				>
+					<img
+						ref={nativeCursorImageRef}
+						alt=""
+						aria-hidden="true"
+						className="absolute left-0 top-0 select-none"
+						style={{
+							display: "none",
+							pointerEvents: "none",
+							transformOrigin: "0 0",
+						}}
+					/>
+				</div>
+				<video
+					ref={videoRef}
+					src={videoPath}
+					className="hidden"
+					preload="auto"
+					playsInline
+					onLoadedMetadata={handleLoadedMetadata}
+					onDurationChange={(e) => {
+						enableAllPreviewAudioTracks(e.currentTarget);
+						if (!syncResolvedDuration(e.currentTarget)) {
+							forceResolveDuration(e.currentTarget);
+						}
+					}}
+					onLoadedData={(e) => {
+						enableAllPreviewAudioTracks(e.currentTarget);
+						if (!syncResolvedDuration(e.currentTarget)) {
+							forceResolveDuration(e.currentTarget);
+						}
+					}}
+					onCanPlay={(e) => {
+						enableAllPreviewAudioTracks(e.currentTarget);
+						if (!syncResolvedDuration(e.currentTarget)) {
+							forceResolveDuration(e.currentTarget);
+						}
+					}}
+					onError={() => onError("Failed to load video")}
+				/>
+				{supplementalAudioPath && (
+					<audio ref={supplementalAudioRef} src={supplementalAudioPath} preload="auto" />
+				)}
+			</div>
+		);
+	},
+);
+
+VideoPlayback.displayName = "VideoPlayback";
+
+export default VideoPlayback;
diff --git a/src/components/video-editor/backgroundImageUpload.test.ts b/src/components/video-editor/backgroundImageUpload.test.ts
new file mode 100644
index 0000000..d83ca3a
--- /dev/null
+++ b/src/components/video-editor/backgroundImageUpload.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { isSupportedBackgroundImageType } from "./backgroundImageUpload";
+
+describe("background image upload validation", () => {
+	it("accepts PNG images for custom backgrounds", () => {
+		expect(isSupportedBackgroundImageType("image/png", "生成画像1.png")).toBe(true);
+	});
+
+	it("accepts PNG images by extension when the browser does not provide a MIME type", () => {
+		expect(isSupportedBackgroundImageType("", "生成画像1.png")).toBe(true);
+	});
+
+	it("keeps rejecting non-image uploads", () => {
+		expect(isSupportedBackgroundImageType("text/plain", "notes.txt")).toBe(false);
+	});
+
+	it("does not allow extension fallback for explicit unsupported MIME types", () => {
+		expect(isSupportedBackgroundImageType("text/plain", "notes.png")).toBe(false);
+	});
+});
diff --git a/src/components/video-editor/backgroundImageUpload.ts b/src/components/video-editor/backgroundImageUpload.ts
new file mode 100644
index 0000000..ebc256a
--- /dev/null
+++ b/src/components/video-editor/backgroundImageUpload.ts
@@ -0,0 +1,20 @@
+const SUPPORTED_BACKGROUND_IMAGE_TYPES = new Set(["image/jpeg", "image/jpg", "image/png"]);
+const SUPPORTED_BACKGROUND_IMAGE_EXTENSIONS = new Set([".jpg", ".jpeg", ".png"]);
+
+export const BACKGROUND_IMAGE_ACCEPT = ".jpg,.jpeg,.png,image/jpeg,image/png";
+
+export function isSupportedBackgroundImageType(type: string, fileName: string): boolean {
+	const normalizedType = type.trim().toLowerCase();
+	if (SUPPORTED_BACKGROUND_IMAGE_TYPES.has(normalizedType)) {
+		return true;
+	}
+
+	if (normalizedType) {
+		return false;
+	}
+
+	const lowerName = fileName.trim().toLowerCase();
+	return [...SUPPORTED_BACKGROUND_IMAGE_EXTENSIONS].some((extension) =>
+		lowerName.endsWith(extension),
+	);
+}
diff --git a/src/components/video-editor/customPlaybackSpeed.test.ts b/src/components/video-editor/customPlaybackSpeed.test.ts
new file mode 100644
index 0000000..223175c
--- /dev/null
+++ b/src/components/video-editor/customPlaybackSpeed.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { parseCustomPlaybackSpeedInput } from "./customPlaybackSpeed";
+
+describe("parseCustomPlaybackSpeedInput", () => {
+	it("accepts decimal playback speeds", () => {
+		expect(parseCustomPlaybackSpeedInput("1.1")).toEqual({
+			status: "valid",
+			draft: "1.1",
+			speed: 1.1,
+		});
+	});
+
+	it("keeps a single decimal point while typing", () => {
+		expect(parseCustomPlaybackSpeedInput("1.2.3")).toEqual({
+			status: "valid",
+			draft: "1.23",
+			speed: 1.23,
+		});
+	});
+
+	it("allows sub-1 custom speeds down to the editor minimum", () => {
+		expect(parseCustomPlaybackSpeedInput("0.1")).toEqual({
+			status: "valid",
+			draft: "0.1",
+			speed: 0.1,
+		});
+	});
+
+	it("rejects speeds below the editor minimum", () => {
+		expect(parseCustomPlaybackSpeedInput("0.09")).toEqual({
+			status: "too-slow",
+			draft: "0.09",
+		});
+	});
+
+	it("accepts comma decimal input by normalizing to a dot", () => {
+		expect(parseCustomPlaybackSpeedInput("1,1")).toEqual({
+			status: "valid",
+			draft: "1.1",
+			speed: 1.1,
+		});
+	});
+
+	it("rejects speeds above the editor maximum", () => {
+		expect(parseCustomPlaybackSpeedInput("16.1")).toEqual({
+			status: "too-fast",
+			draft: "16.1",
+		});
+	});
+});
diff --git a/src/components/video-editor/customPlaybackSpeed.ts b/src/components/video-editor/customPlaybackSpeed.ts
new file mode 100644
index 0000000..64cc3e3
--- /dev/null
+++ b/src/components/video-editor/customPlaybackSpeed.ts
@@ -0,0 +1,37 @@
+import {
+	clampPlaybackSpeed,
+	MAX_PLAYBACK_SPEED,
+	MIN_PLAYBACK_SPEED,
+	type PlaybackSpeed,
+} from "./types";
+
+export type CustomPlaybackSpeedInputResult =
+	| { status: "empty"; draft: string }
+	| { status: "too-fast"; draft: string }
+	| { status: "too-slow"; draft: string }
+	| { status: "valid"; draft: string; speed: PlaybackSpeed };
+
+export function parseCustomPlaybackSpeedInput(rawValue: string): CustomPlaybackSpeedInputResult {
+	const decimalDraft = rawValue.replace(/,/g, ".").replace(/[^\d.]/g, "");
+	const [whole = "", ...fractionParts] = decimalDraft.split(".");
+	const draft = fractionParts.length > 0 ? `${whole}.${fractionParts.join("")}` : whole;
+
+	if (draft === "" || draft === ".") {
+		return { status: "empty", draft };
+	}
+
+	const speed = Number(draft);
+	if (!Number.isFinite(speed)) {
+		return { status: "empty", draft };
+	}
+
+	if (speed > MAX_PLAYBACK_SPEED) {
+		return { status: "too-fast", draft };
+	}
+
+	if (speed < MIN_PLAYBACK_SPEED) {
+		return { status: "too-slow", draft };
+	}
+
+	return { status: "valid", draft, speed: clampPlaybackSpeed(speed) };
+}
diff --git a/src/components/video-editor/editorDefaults.test.ts b/src/components/video-editor/editorDefaults.test.ts
new file mode 100644
index 0000000..8b515f1
--- /dev/null
+++ b/src/components/video-editor/editorDefaults.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { INITIAL_EDITOR_STATE } from "@/hooks/useEditorHistory";
+import { DEFAULT_PREFS } from "@/lib/userPreferences";
+import {
+	DEFAULT_EDITOR_APPEARANCE_SETTINGS,
+	DEFAULT_EDITOR_LAYOUT_SETTINGS,
+	DEFAULT_EXPORT_SETTINGS,
+	DEFAULT_GIF_SETTINGS,
+	DEFAULT_WEBCAM_SETTINGS,
+} from "./editorDefaults";
+import { normalizeProjectEditor } from "./projectPersistence";
+
+describe("editor defaults SSOT", () => {
+	it("keeps history defaults aligned with editor defaults", () => {
+		expect(INITIAL_EDITOR_STATE).toMatchObject({
+			...DEFAULT_EDITOR_APPEARANCE_SETTINGS,
+			padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+			aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
+			cropRegion: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion,
+			wallpaper: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
+			webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
+			webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
+			webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
+			webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
+		});
+	});
+
+	it("keeps user preference defaults aligned with editor and export defaults", () => {
+		expect(DEFAULT_PREFS).toMatchObject({
+			padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+			aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
+			exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
+			exportFormat: DEFAULT_EXPORT_SETTINGS.format,
+		});
+	});
+
+	it("keeps project fallback normalization aligned with editor defaults", () => {
+		expect(normalizeProjectEditor({})).toMatchObject({
+			...DEFAULT_EDITOR_APPEARANCE_SETTINGS,
+			padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+			cropRegion: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion,
+			wallpaper: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
+			aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
+			webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
+			webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
+			webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
+			webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
+			exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
+			exportFormat: DEFAULT_EXPORT_SETTINGS.format,
+			gifFrameRate: DEFAULT_GIF_SETTINGS.frameRate,
+			gifLoop: DEFAULT_GIF_SETTINGS.loop,
+			gifSizePreset: DEFAULT_GIF_SETTINGS.sizePreset,
+		});
+	});
+});
diff --git a/src/components/video-editor/editorDefaults.ts b/src/components/video-editor/editorDefaults.ts
new file mode 100644
index 0000000..ac6ab61
--- /dev/null
+++ b/src/components/video-editor/editorDefaults.ts
@@ -0,0 +1,95 @@
+import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import { DEFAULT_WALLPAPER } from "@/lib/wallpaper";
+import type { AspectRatio } from "@/utils/aspectRatioUtils";
+import {
+	type CursorVisualSettings,
+	DEFAULT_CROP_REGION,
+	DEFAULT_CURSOR_CLICK_BOUNCE,
+	DEFAULT_CURSOR_CLIP_TO_BOUNDS,
+	DEFAULT_CURSOR_MOTION_BLUR,
+	DEFAULT_CURSOR_SIZE,
+	DEFAULT_CURSOR_SMOOTHING,
+	DEFAULT_WEBCAM_LAYOUT_PRESET,
+	DEFAULT_WEBCAM_MASK_SHAPE,
+	DEFAULT_WEBCAM_POSITION,
+	DEFAULT_WEBCAM_SIZE_PRESET,
+	type WebcamLayoutPreset,
+	type WebcamMaskShape,
+	type WebcamPosition,
+	type WebcamSizePreset,
+} from "./types";
+
+export const DEFAULT_SOURCE_DIMENSIONS = {
+	width: 1920,
+	height: 1080,
+} as const;
+
+export const DEFAULT_GIF_OUTPUT_DIMENSIONS = {
+	width: 1280,
+	height: 720,
+} as const;
+
+export const DEFAULT_EDITOR_APPEARANCE_SETTINGS: {
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount: number;
+	borderRadius: number;
+} = {
+	shadowIntensity: 0,
+	showBlur: false,
+	motionBlurAmount: 0,
+	borderRadius: 0,
+};
+
+export const DEFAULT_EDITOR_LAYOUT_SETTINGS: {
+	padding: number;
+	aspectRatio: AspectRatio;
+	cropRegion: typeof DEFAULT_CROP_REGION;
+	wallpaper: string;
+} = {
+	padding: 50,
+	aspectRatio: "16:9",
+	cropRegion: DEFAULT_CROP_REGION,
+	wallpaper: DEFAULT_WALLPAPER,
+};
+
+export const DEFAULT_WEBCAM_SETTINGS = {
+	layoutPreset: DEFAULT_WEBCAM_LAYOUT_PRESET,
+	maskShape: DEFAULT_WEBCAM_MASK_SHAPE,
+	sizePreset: DEFAULT_WEBCAM_SIZE_PRESET,
+	position: DEFAULT_WEBCAM_POSITION,
+} as const satisfies {
+	layoutPreset: WebcamLayoutPreset;
+	maskShape: WebcamMaskShape;
+	sizePreset: WebcamSizePreset;
+	position: WebcamPosition | null;
+};
+
+export const DEFAULT_CURSOR_SETTINGS: CursorVisualSettings & { show: boolean } = {
+	show: true,
+	size: DEFAULT_CURSOR_SIZE,
+	smoothing: DEFAULT_CURSOR_SMOOTHING,
+	motionBlur: DEFAULT_CURSOR_MOTION_BLUR,
+	clickBounce: DEFAULT_CURSOR_CLICK_BOUNCE,
+	clipToBounds: DEFAULT_CURSOR_CLIP_TO_BOUNDS,
+};
+
+export const DEFAULT_EXPORT_SETTINGS: {
+	quality: ExportQuality;
+	format: ExportFormat;
+} = {
+	quality: "good",
+	format: "mp4",
+};
+
+export const DEFAULT_GIF_SETTINGS: {
+	frameRate: GifFrameRate;
+	loop: boolean;
+	sizePreset: GifSizePreset;
+	outputDimensions: typeof DEFAULT_GIF_OUTPUT_DIMENSIONS;
+} = {
+	frameRate: 15,
+	loop: true,
+	sizePreset: "medium",
+	outputDimensions: DEFAULT_GIF_OUTPUT_DIMENSIONS,
+};
diff --git a/src/components/video-editor/guide/GuidePanel.tsx b/src/components/video-editor/guide/GuidePanel.tsx
new file mode 100644
index 0000000..e6a61e9
--- /dev/null
+++ b/src/components/video-editor/guide/GuidePanel.tsx
@@ -0,0 +1,757 @@
+import { KeyRound, ListChecks, RefreshCw, Save, Trash2, Wand2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/contexts/I18nContext";
+import type {
+	GuideAiProvider,
+	GuideAiSettings,
+	GuideLanguage,
+	GuideOcrProfile,
+	GuideSession,
+	GuideSnapshot,
+} from "@/guide/contracts";
+import { captureGuideSnapshots } from "@/guide/snapshot/extractGuideSnapshots";
+
+interface GuidePanelProps {
+	recordingId: number | string | null;
+	videoPath: string | null;
+	videoSourcePath: string | null;
+	currentTimeMs: number;
+}
+
+type BusyAction = "load" | "generate";
+
+interface GuideProgressState {
+	label: string;
+	current: number;
+	total: number;
+	detail?: string;
+}
+
+const COPY = {
+	en: {
+		title: "Guide",
+		noRecording: "Record with Guide Mode to create a step guide.",
+		noSession: "No guide session yet.",
+		generateGuide: "Generate guide",
+		generating: "Generating...",
+		prepare: "Prepare",
+		snapshots: "Snapshots",
+		ocr: "OCR",
+		draft: "Draft",
+		deepseek: "DeepSeek",
+		local: "Local",
+		exportMd: "MD",
+		exportHtml: "HTML",
+		events: "events",
+		shots: "shots",
+		text: "text",
+		steps: "steps",
+		captureStep: "Capture step",
+		captureLabel: "Manual capture",
+		settings: "Settings",
+		guideSettings: "Guide settings",
+		apiKey: "API key env",
+		apiKeyPlaceholder: "DEEPSEEK_API_KEY",
+		baseUrl: "Base URL",
+		model: "Model",
+		ocrProfile: "OCR profile",
+		ocrLanguage: "OCR languages",
+		ocrFast: "Fast Latin",
+		ocrVietnamese: "Vietnamese Enhanced",
+		ocrHybrid: "Hybrid Vi + Latin",
+		saveSettings: "Save",
+		clearKey: "Reset env",
+		settingsSaved: "Guide settings saved.",
+		keyMissing: "Set a DeepSeek API key environment variable before generating with DeepSeek.",
+		keyConfigured: "Env ready",
+		keyNotConfigured: "Env value missing",
+		ready: "Guide artifacts are ready.",
+		noEvents: "No click events were captured for this guide.",
+		ocrUnavailable: "Local OCR service is unavailable. You can still create a local draft.",
+		exported: "Guide exported",
+		progressPreparing: "Preparing events",
+		progressSnapshots: "Capturing snapshots",
+		progressOcr: "Running OCR",
+		progressDraft: "Writing draft",
+		progressExport: "Exporting files",
+	},
+	vi: {
+		title: "Hướng dẫn",
+		noRecording: "Hãy quay bằng Guide Mode để tạo hướng dẫn từng bước.",
+		noSession: "Chưa có guide session.",
+		generateGuide: "Tạo hướng dẫn",
+		generating: "Đang tạo...",
+		prepare: "Chuẩn bị",
+		snapshots: "Ảnh",
+		ocr: "OCR",
+		draft: "Draft",
+		deepseek: "DeepSeek",
+		local: "Local",
+		exportMd: "MD",
+		exportHtml: "HTML",
+		events: "events",
+		shots: "ảnh",
+		text: "text",
+		steps: "steps",
+		captureStep: "Chụp bước",
+		captureLabel: "Chụp thủ công",
+		settings: "Cài đặt",
+		guideSettings: "Guide settings",
+		apiKey: "API key env",
+		apiKeyPlaceholder: "DEEPSEEK_API_KEY",
+		baseUrl: "Base URL",
+		model: "Model",
+		ocrProfile: "OCR profile",
+		ocrLanguage: "OCR languages",
+		ocrFast: "Fast Latin",
+		ocrVietnamese: "Vietnamese Enhanced",
+		ocrHybrid: "Hybrid Vi + Latin",
+		saveSettings: "Lưu",
+		clearKey: "Reset env",
+		settingsSaved: "Da luu cai dat guide.",
+		keyMissing: "Hãy set biến môi trường DeepSeek API key trước khi tạo draft bằng DeepSeek.",
+		keyConfigured: "Env ready",
+		keyNotConfigured: "Chưa thấy giá trị env",
+		ready: "Đã sẵn sàng tài liệu hướng dẫn.",
+		noEvents: "Chưa ghi nhận click event nào cho guide này.",
+		ocrUnavailable: "OCR local chưa chạy. Vẫn có thể tạo draft local.",
+		exported: "Đã export hướng dẫn",
+		progressPreparing: "Đang chuẩn bị events",
+		progressSnapshots: "Đang chụp ảnh",
+		progressOcr: "Đang OCR",
+		progressDraft: "Đang tạo draft",
+		progressExport: "Đang export file",
+	},
+} as const;
+
+function getPendingOcrSnapshots(session: GuideSession): GuideSnapshot[] {
+	const ocrCompletedSnapshotIds = new Set(session.ocrBlocks.map((block) => block.snapshotId));
+	return session.snapshots.filter(
+		(snapshot) => !snapshot.ocrCompletedAt && !ocrCompletedSnapshotIds.has(snapshot.id),
+	);
+}
+
+function getProgressPercent(progress: GuideProgressState | null): number {
+	if (!progress) {
+		return 0;
+	}
+	if (progress.total <= 0) {
+		return 100;
+	}
+	const percent = Math.round((progress.current / progress.total) * 100);
+	return Math.min(100, Math.max(progress.current > 0 ? 8 : 4, percent));
+}
+
+export function GuidePanel({ recordingId, videoPath, videoSourcePath }: GuidePanelProps) {
+	const { locale } = useI18n();
+	const copy = useMemo(() => (locale.startsWith("vi") ? COPY.vi : COPY.en), [locale]);
+	const guideLanguage: GuideLanguage = locale.startsWith("vi") ? "vi" : "en";
+	const [session, setSession] = useState<GuideSession | null>(null);
+	const [provider, setProvider] = useState<GuideAiProvider>("local");
+	const [busyAction, setBusyAction] = useState<BusyAction | null>(null);
+	const [aiSettings, setAiSettings] = useState<GuideAiSettings | null>(null);
+	const [settingsOpen, setSettingsOpen] = useState(false);
+	const [settingsBusy, setSettingsBusy] = useState(false);
+	const [deepSeekApiKeyEnvName, setDeepSeekApiKeyEnvName] = useState("DEEPSEEK_API_KEY");
+	const [deepSeekBaseUrl, setDeepSeekBaseUrl] = useState("https://api.deepseek.com");
+	const [deepSeekModel, setDeepSeekModel] = useState("deepseek-chat");
+	const [ocrProfile, setOcrProfile] = useState<GuideOcrProfile>("vietnamese");
+	const [ocrLanguage, setOcrLanguage] = useState("vi,en");
+	const [message, setMessage] = useState<string | null>(null);
+	const [progress, setProgress] = useState<GuideProgressState | null>(null);
+
+	const isBusy = busyAction !== null;
+	const progressPercent = getProgressPercent(progress);
+	const canUseGuide = Boolean(recordingId && videoSourcePath && window.electronAPI?.guide);
+	const generatedSteps = session?.generatedGuide?.steps ?? [];
+	const statusLabel = useMemo(() => {
+		if (!session) {
+			return copy.noSession;
+		}
+		return [
+			`${session.events.length} ${copy.events}`,
+			`${session.snapshots.length} ${copy.shots}`,
+			`${session.ocrBlocks.length} ${copy.text}`,
+			`${generatedSteps.length} ${copy.steps}`,
+		].join(" / ");
+	}, [copy, generatedSteps.length, session]);
+
+	const loadAiSettings = useCallback(async () => {
+		if (!window.electronAPI?.guide?.getAiSettings) {
+			return;
+		}
+		const result = await window.electronAPI.guide.getAiSettings();
+		if (!result.success) {
+			setMessage(result.error);
+			return;
+		}
+		setAiSettings(result.data);
+		setDeepSeekBaseUrl(result.data.deepseek.baseUrl);
+		setDeepSeekModel(result.data.deepseek.model);
+		setDeepSeekApiKeyEnvName(result.data.deepseek.apiKeyEnvName);
+		setOcrProfile(result.data.ocr.profile);
+		setOcrLanguage(result.data.ocr.language);
+	}, []);
+
+	useEffect(() => {
+		void loadAiSettings();
+	}, [loadAiSettings]);
+
+	const loadSession = useCallback(async () => {
+		if (!recordingId || !window.electronAPI?.guide) {
+			setSession(null);
+			setBusyAction(null);
+			return;
+		}
+
+		setBusyAction("load");
+		const result = await window.electronAPI.guide.readSession(recordingId);
+		setBusyAction(null);
+		if (result.success) {
+			setSession(result.data);
+			setMessage(null);
+			return;
+		}
+		if (result.code === "guide-session-not-found") {
+			setSession(null);
+			setMessage(null);
+			return;
+		}
+		setMessage(result.error);
+	}, [recordingId]);
+
+	useEffect(() => {
+		let cancelled = false;
+		async function load() {
+			if (!recordingId || !window.electronAPI?.guide) {
+				setSession(null);
+				setBusyAction(null);
+				return;
+			}
+			setBusyAction("load");
+			const result = await window.electronAPI.guide.readSession(recordingId);
+			if (cancelled) {
+				return;
+			}
+			setBusyAction(null);
+			if (result.success) {
+				setSession(result.data);
+				setMessage(null);
+			} else if (result.code === "guide-session-not-found") {
+				setSession(null);
+				setMessage(null);
+			} else {
+				setMessage(result.error);
+			}
+		}
+		load();
+		return () => {
+			cancelled = true;
+		};
+	}, [recordingId]);
+
+	const ensureEventsSession = useCallback(async (): Promise<GuideSession> => {
+		if (!recordingId || !videoSourcePath) {
+			throw new Error(copy.noRecording);
+		}
+
+		let current = session;
+		const readResult = await window.electronAPI.guide.readSession(recordingId);
+		if (readResult.success) {
+			current = readResult.data;
+		} else if (readResult.code === "guide-session-not-found") {
+			current = null;
+		} else if (!current) {
+			throw new Error(readResult.error);
+		}
+
+		if (!current) {
+			const startResult = await window.electronAPI.guide.startSession(recordingId);
+			if (!startResult.success) {
+				throw new Error(startResult.error);
+			}
+			current = startResult.data;
+		}
+
+		if (current.status === "recording" || current.videoPath !== videoSourcePath) {
+			const finalizeResult = await window.electronAPI.guide.finalizeEvents({
+				recordingId,
+				videoPath: videoSourcePath,
+			});
+			if (!finalizeResult.success) {
+				throw new Error(finalizeResult.error);
+			}
+			current = finalizeResult.data;
+		}
+
+		setSession(current);
+		return current;
+	}, [copy.noRecording, recordingId, session, videoSourcePath]);
+
+	const runAction = useCallback(
+		async (action: BusyAction, task: () => Promise<void>) => {
+			if (!canUseGuide) {
+				setMessage(copy.noRecording);
+				return;
+			}
+			setBusyAction(action);
+			setMessage(null);
+			setProgress(null);
+			try {
+				await task();
+			} catch (error) {
+				const text = error instanceof Error ? error.message : String(error);
+				setMessage(text);
+				toast.error(text);
+			} finally {
+				setBusyAction(null);
+			}
+		},
+		[canUseGuide, copy.noRecording],
+	);
+
+	const handleProviderChange = useCallback(
+		(nextProvider: GuideAiProvider) => {
+			setProvider(nextProvider);
+			if (nextProvider === "deepseek" && !aiSettings?.deepseek.hasApiKey) {
+				setSettingsOpen(true);
+				setMessage(copy.keyMissing);
+			}
+		},
+		[aiSettings?.deepseek.hasApiKey, copy.keyMissing],
+	);
+
+	const handleSaveAiSettings = useCallback(async () => {
+		if (!window.electronAPI?.guide?.saveAiSettings) {
+			return;
+		}
+		setSettingsBusy(true);
+		setMessage(null);
+		try {
+			const result = await window.electronAPI.guide.saveAiSettings({
+				deepseekApiKeyEnvName: deepSeekApiKeyEnvName,
+				baseUrl: deepSeekBaseUrl,
+				model: deepSeekModel,
+				ocrProfile,
+				ocrLanguage,
+			});
+			if (!result.success) {
+				throw new Error(result.error);
+			}
+			setAiSettings(result.data);
+			setDeepSeekApiKeyEnvName(result.data.deepseek.apiKeyEnvName);
+			setDeepSeekBaseUrl(result.data.deepseek.baseUrl);
+			setDeepSeekModel(result.data.deepseek.model);
+			setOcrProfile(result.data.ocr.profile);
+			setOcrLanguage(result.data.ocr.language);
+			toast.success(copy.settingsSaved);
+		} catch (error) {
+			const text = error instanceof Error ? error.message : String(error);
+			setMessage(text);
+			toast.error(text);
+		} finally {
+			setSettingsBusy(false);
+		}
+	}, [
+		copy.settingsSaved,
+		deepSeekApiKeyEnvName,
+		deepSeekBaseUrl,
+		deepSeekModel,
+		ocrLanguage,
+		ocrProfile,
+	]);
+
+	const handleClearDeepSeekKey = useCallback(async () => {
+		if (!window.electronAPI?.guide?.saveAiSettings) {
+			return;
+		}
+		setSettingsBusy(true);
+		setMessage(null);
+		try {
+			const result = await window.electronAPI.guide.saveAiSettings({
+				clearDeepseekApiKeyEnvName: true,
+				baseUrl: deepSeekBaseUrl,
+				model: deepSeekModel,
+				ocrProfile,
+				ocrLanguage,
+			});
+			if (!result.success) {
+				throw new Error(result.error);
+			}
+			setAiSettings(result.data);
+			setDeepSeekApiKeyEnvName(result.data.deepseek.apiKeyEnvName);
+			setOcrProfile(result.data.ocr.profile);
+			setOcrLanguage(result.data.ocr.language);
+			toast.success(copy.settingsSaved);
+		} catch (error) {
+			const text = error instanceof Error ? error.message : String(error);
+			setMessage(text);
+			toast.error(text);
+		} finally {
+			setSettingsBusy(false);
+		}
+	}, [copy.settingsSaved, deepSeekBaseUrl, deepSeekModel, ocrLanguage, ocrProfile]);
+
+	const handleGenerateGuide = useCallback(() => {
+		void runAction("generate", async () => {
+			if (provider === "deepseek" && !aiSettings?.deepseek.hasApiKey) {
+				setSettingsOpen(true);
+				throw new Error(copy.keyMissing);
+			}
+			if (!videoPath) {
+				throw new Error("Video URL is not available.");
+			}
+			setProgress({
+				label: copy.progressPreparing,
+				current: 0,
+				total: 1,
+				detail: "0/1",
+			});
+			let current = await ensureEventsSession();
+			setProgress({
+				label: copy.progressPreparing,
+				current: 1,
+				total: 1,
+				detail: "1/1",
+			});
+			if (current.events.length === 0) {
+				throw new Error(copy.noEvents);
+			}
+			const snapshotEventIds = new Set(current.snapshots.map((snapshot) => snapshot.eventId));
+			const pendingSnapshotTotal = current.events.filter(
+				(event) => !snapshotEventIds.has(event.id),
+			).length;
+			if (pendingSnapshotTotal > 0) {
+				setProgress({
+					label: copy.progressSnapshots,
+					current: 0,
+					total: pendingSnapshotTotal,
+					detail: `0/${pendingSnapshotTotal}`,
+				});
+				current = await captureGuideSnapshots({
+					session: current,
+					videoUrl: videoPath,
+					maxWidth: 1280,
+					onProgress: ({ completed, total }) => {
+						setProgress({
+							label: copy.progressSnapshots,
+							current: completed,
+							total,
+							detail: `${completed}/${total}`,
+						});
+					},
+				});
+				setSession(current);
+			}
+			const pendingOcrSnapshots = getPendingOcrSnapshots(current);
+			for (const [index, snapshot] of pendingOcrSnapshots.entries()) {
+				setProgress({
+					label: copy.progressOcr,
+					current: index,
+					total: pendingOcrSnapshots.length,
+					detail: `${index + 1}/${pendingOcrSnapshots.length}`,
+				});
+				const ocrResult = await window.electronAPI.guide.runOcr({
+					recordingId: current.recordingId,
+					snapshotIds: [snapshot.id],
+				});
+				if (!ocrResult.success) {
+					if (ocrResult.code === "guide-ocr-unavailable") {
+						toast.warning(copy.ocrUnavailable);
+					}
+					throw new Error(ocrResult.error);
+				}
+				current = ocrResult.data;
+				setSession(current);
+				setProgress({
+					label: copy.progressOcr,
+					current: index + 1,
+					total: pendingOcrSnapshots.length,
+					detail: `${index + 1}/${pendingOcrSnapshots.length}`,
+				});
+			}
+			setProgress({
+				label: copy.progressDraft,
+				current: 0,
+				total: 1,
+				detail: "0/1",
+			});
+			const result = await window.electronAPI.guide.generateDraft({
+				recordingId: current.recordingId,
+				language: guideLanguage,
+				provider,
+			});
+			if (!result.success) {
+				throw new Error(result.error);
+			}
+			current = result.data;
+			setSession(current);
+			setProgress({
+				label: copy.progressDraft,
+				current: 1,
+				total: 1,
+				detail: "1/1",
+			});
+			setProgress({
+				label: copy.progressExport,
+				current: 0,
+				total: 2,
+				detail: "0/2",
+			});
+			const markdownResult = await window.electronAPI.guide.exportMarkdown({
+				recordingId: current.recordingId,
+			});
+			if (!markdownResult.success) {
+				throw new Error(markdownResult.error);
+			}
+			setProgress({
+				label: copy.progressExport,
+				current: 1,
+				total: 2,
+				detail: "1/2",
+			});
+			const htmlResult = await window.electronAPI.guide.exportHtml({
+				recordingId: current.recordingId,
+			});
+			if (!htmlResult.success) {
+				throw new Error(htmlResult.error);
+			}
+			setProgress({
+				label: copy.progressExport,
+				current: 2,
+				total: 2,
+				detail: "2/2",
+			});
+			const revealResult = await window.electronAPI.revealInFolder(htmlResult.data.path);
+			if (!revealResult.success) {
+				toast.warning(revealResult.error ?? "Unable to open guide folder.");
+			}
+			setSession(htmlResult.data.session);
+			toast.success(copy.exported, {
+				description: `${markdownResult.data.path}\n${htmlResult.data.path}`,
+			});
+		});
+	}, [
+		aiSettings?.deepseek.hasApiKey,
+		copy.exported,
+		copy.keyMissing,
+		copy.noEvents,
+		copy.ocrUnavailable,
+		copy.progressDraft,
+		copy.progressExport,
+		copy.progressOcr,
+		copy.progressPreparing,
+		copy.progressSnapshots,
+		ensureEventsSession,
+		guideLanguage,
+		provider,
+		runAction,
+		videoPath,
+	]);
+
+	return (
+		<section className="editor-inspector-shell flex max-h-[320px] min-h-[246px] shrink-0 flex-col overflow-hidden rounded-[18px] border border-white/[0.075] bg-[#090a0c]">
+			<div className="flex items-center justify-between border-b border-white/[0.07] px-3 py-2">
+				<div className="flex min-w-0 items-center gap-2">
+					<ListChecks className="h-4 w-4 shrink-0 text-[#34B27B]" />
+					<span className="truncate text-sm font-semibold text-slate-100">{copy.title}</span>
+				</div>
+				<button
+					type="button"
+					title="Reload guide session"
+					disabled={isBusy || !recordingId}
+					onClick={loadSession}
+					className="flex h-7 w-7 items-center justify-center rounded-lg border border-transparent text-slate-500 transition-all hover:border-white/10 hover:bg-white/[0.06] hover:text-slate-200 disabled:cursor-not-allowed disabled:opacity-40"
+				>
+					<RefreshCw className={`h-3.5 w-3.5 ${busyAction === "load" ? "animate-spin" : ""}`} />
+				</button>
+			</div>
+
+			<div className="min-h-0 flex-1 overflow-y-auto p-3 custom-scrollbar">
+				<p className="mb-2 text-[11px] leading-4 text-slate-400">
+					{canUseGuide ? statusLabel : copy.noRecording}
+				</p>
+				{message && <p className="mb-2 text-[11px] leading-4 text-amber-300">{message}</p>}
+				{progress && (
+					<div className="mb-2 rounded-md border border-white/[0.07] bg-white/[0.035] px-2 py-1.5">
+						<div className="mb-1 flex items-center justify-between gap-2 text-[10px] leading-4">
+							<span className="min-w-0 truncate font-semibold text-slate-200">
+								{progress.label}
+							</span>
+							<span className="shrink-0 text-slate-500">
+								{progress.detail ?? `${progress.current}/${progress.total}`}
+							</span>
+						</div>
+						<div className="h-1.5 overflow-hidden rounded-full bg-white/[0.06]">
+							<div
+								className="h-full rounded-full bg-[#34B27B] transition-all duration-200"
+								style={{ width: `${progressPercent}%` }}
+							/>
+						</div>
+					</div>
+				)}
+
+				<div className="mb-2 flex items-center gap-1.5">
+					<select
+						value={provider}
+						onChange={(event) => handleProviderChange(event.target.value as GuideAiProvider)}
+						className="h-8 flex-1 rounded-md border border-white/[0.08] bg-white/[0.04] px-2 text-[11px] font-medium text-slate-200 outline-none"
+						disabled={isBusy}
+					>
+						<option value="local">{copy.local}</option>
+						<option value="deepseek">{copy.deepseek}</option>
+					</select>
+					<Button
+						type="button"
+						size="sm"
+						title={copy.settings}
+						disabled={isBusy}
+						onClick={() => setSettingsOpen((current) => !current)}
+						className="h-8 rounded-md border border-white/[0.08] bg-white/[0.04] px-2 text-[11px] text-slate-200 hover:bg-white/[0.08]"
+					>
+						<KeyRound className="h-3.5 w-3.5" />
+					</Button>
+				</div>
+
+				<button
+					type="button"
+					disabled={!canUseGuide || isBusy}
+					onClick={handleGenerateGuide}
+					className="mb-2 flex h-10 w-full items-center justify-center gap-2 rounded-md border border-[#34B27B]/35 bg-[#34B27B]/20 px-3 text-sm font-semibold text-[#B9F5D2] transition-all hover:border-[#34B27B]/55 hover:bg-[#34B27B]/28 disabled:cursor-not-allowed disabled:opacity-40"
+				>
+					<Wand2
+						className={`h-4 w-4 shrink-0 ${busyAction === "generate" ? "animate-pulse" : ""}`}
+					/>
+					<span className="truncate">
+						{busyAction === "generate" ? copy.generating : copy.generateGuide}
+					</span>
+				</button>
+
+				{settingsOpen && (
+					<div className="mb-2 space-y-2 rounded-md border border-white/[0.07] bg-white/[0.035] p-2">
+						<div className="flex items-center justify-between gap-2">
+							<div className="min-w-0">
+								<div className="truncate text-[11px] font-semibold text-slate-100">
+									{copy.guideSettings}
+								</div>
+								<div className="truncate text-[10px] text-slate-500">
+									{aiSettings?.deepseek.hasApiKey
+										? `${copy.keyConfigured}: ${aiSettings.deepseek.apiKeyEnvName}`
+										: `${copy.keyNotConfigured}: ${
+												aiSettings?.deepseek.apiKeyEnvName ?? "DEEPSEEK_API_KEY"
+											}`}
+								</div>
+							</div>
+							<span className="shrink-0 rounded border border-white/[0.08] px-1.5 py-0.5 text-[10px] text-slate-500">
+								{aiSettings?.deepseek.storage ?? "none"}
+							</span>
+						</div>
+
+						<div className="grid grid-cols-2 gap-1.5">
+							<label className="block min-w-0 text-[10px] font-medium text-slate-400">
+								{copy.ocrProfile}
+								<select
+									value={ocrProfile}
+									onChange={(event) => setOcrProfile(event.target.value as GuideOcrProfile)}
+									disabled={settingsBusy}
+									className="mt-1 h-8 w-full rounded-md border border-white/[0.08] bg-black/20 px-2 text-[11px] text-slate-100 outline-none"
+								>
+									<option value="vietnamese">{copy.ocrVietnamese}</option>
+									<option value="hybrid">{copy.ocrHybrid}</option>
+									<option value="fast">{copy.ocrFast}</option>
+								</select>
+							</label>
+							<label className="block min-w-0 text-[10px] font-medium text-slate-400">
+								{copy.ocrLanguage}
+								<input
+									type="text"
+									value={ocrLanguage}
+									onChange={(event) => setOcrLanguage(event.target.value)}
+									placeholder="vi,en"
+									disabled={settingsBusy}
+									className="mt-1 h-8 w-full rounded-md border border-white/[0.08] bg-black/20 px-2 text-[11px] text-slate-100 outline-none placeholder:text-slate-600"
+								/>
+							</label>
+						</div>
+
+						<label className="block text-[10px] font-medium text-slate-400">
+							{copy.apiKey}
+							<input
+								type="text"
+								value={deepSeekApiKeyEnvName}
+								onChange={(event) => setDeepSeekApiKeyEnvName(event.target.value)}
+								placeholder={copy.apiKeyPlaceholder}
+								disabled={settingsBusy}
+								className="mt-1 h-8 w-full rounded-md border border-white/[0.08] bg-black/20 px-2 text-[11px] text-slate-100 outline-none placeholder:text-slate-600"
+							/>
+						</label>
+
+						<div className="grid grid-cols-2 gap-1.5">
+							<label className="block min-w-0 text-[10px] font-medium text-slate-400">
+								{copy.baseUrl}
+								<input
+									type="text"
+									value={deepSeekBaseUrl}
+									onChange={(event) => setDeepSeekBaseUrl(event.target.value)}
+									disabled={settingsBusy}
+									className="mt-1 h-8 w-full rounded-md border border-white/[0.08] bg-black/20 px-2 text-[11px] text-slate-100 outline-none"
+								/>
+							</label>
+							<label className="block min-w-0 text-[10px] font-medium text-slate-400">
+								{copy.model}
+								<input
+									type="text"
+									value={deepSeekModel}
+									onChange={(event) => setDeepSeekModel(event.target.value)}
+									disabled={settingsBusy}
+									className="mt-1 h-8 w-full rounded-md border border-white/[0.08] bg-black/20 px-2 text-[11px] text-slate-100 outline-none"
+								/>
+							</label>
+						</div>
+
+						<div className="flex items-center gap-1.5">
+							<Button
+								type="button"
+								size="sm"
+								disabled={settingsBusy}
+								onClick={handleSaveAiSettings}
+								className="h-8 rounded-md border border-white/[0.08] bg-[#34B27B]/15 px-2 text-[11px] text-[#9BE7BF] hover:bg-[#34B27B]/25"
+							>
+								<Save className="h-3.5 w-3.5" />
+								{copy.saveSettings}
+							</Button>
+							<Button
+								type="button"
+								size="sm"
+								disabled={settingsBusy || !aiSettings?.deepseek.hasApiKey}
+								onClick={handleClearDeepSeekKey}
+								className="h-8 rounded-md border border-white/[0.08] bg-white/[0.04] px-2 text-[11px] text-slate-200 hover:bg-white/[0.08]"
+							>
+								<Trash2 className="h-3.5 w-3.5" />
+								{copy.clearKey}
+							</Button>
+						</div>
+					</div>
+				)}
+
+				<div className="space-y-1.5">
+					{generatedSteps.slice(0, 4).map((step) => (
+						<div
+							key={step.id}
+							className="rounded-md border border-white/[0.06] bg-white/[0.035] px-2 py-1.5"
+						>
+							<div className="truncate text-[11px] font-semibold text-slate-100">
+								{step.order}. {step.title}
+							</div>
+							<p className="line-clamp-2 text-[10px] leading-4 text-slate-400">
+								{step.instruction}
+							</p>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/src/components/video-editor/index.ts b/src/components/video-editor/index.ts
new file mode 100644
index 0000000..5afe5b8
--- /dev/null
+++ b/src/components/video-editor/index.ts
@@ -0,0 +1,5 @@
+export { default as PlaybackControls } from "./PlaybackControls";
+export { default as SettingsPanel } from "./SettingsPanel";
+export { default as TimelineEditor } from "./timeline/TimelineEditor";
+export { default as VideoEditor } from "./VideoEditor";
+export { default as VideoPlayback } from "./VideoPlayback";
diff --git a/src/components/video-editor/projectPersistence.test.ts b/src/components/video-editor/projectPersistence.test.ts
new file mode 100644
index 0000000..d40d1f4
--- /dev/null
+++ b/src/components/video-editor/projectPersistence.test.ts
@@ -0,0 +1,258 @@
+import { describe, expect, it } from "vitest";
+import {
+	createProjectData,
+	createProjectSnapshot,
+	hasProjectUnsavedChanges,
+	normalizeProjectEditor,
+	PROJECT_VERSION,
+	resolveProjectMedia,
+	validateProjectData,
+} from "./projectPersistence";
+
+describe("projectPersistence media compatibility", () => {
+	it("accepts legacy projects with a single videoPath", () => {
+		const project = {
+			version: 1,
+			videoPath: "/tmp/screen.webm",
+			editor: {},
+		};
+
+		expect(validateProjectData(project)).toBe(true);
+		expect(resolveProjectMedia(project)).toEqual({
+			screenVideoPath: "/tmp/screen.webm",
+		});
+	});
+
+	it("creates version 2 projects with explicit media", () => {
+		const project = createProjectData(
+			{
+				screenVideoPath: "/tmp/screen.webm",
+				webcamVideoPath: "/tmp/webcam.webm",
+			},
+			{
+				wallpaper: "/wallpapers/wallpaper1.jpg",
+				shadowIntensity: 0,
+				showBlur: false,
+				motionBlurAmount: 0,
+				borderRadius: 0,
+				padding: 50,
+				cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+				zoomRegions: [],
+				trimRegions: [],
+				speedRegions: [],
+				annotationRegions: [],
+				aspectRatio: "16:9",
+				webcamLayoutPreset: "picture-in-picture",
+				webcamMaskShape: "circle",
+				webcamPosition: null,
+				exportQuality: "good",
+				exportFormat: "mp4",
+				gifFrameRate: 15,
+				gifLoop: true,
+				gifSizePreset: "medium",
+			},
+		);
+
+		expect(project.version).toBe(PROJECT_VERSION);
+		expect(project.media).toEqual({
+			screenVideoPath: "/tmp/screen.webm",
+			webcamVideoPath: "/tmp/webcam.webm",
+		});
+		expect(validateProjectData(project)).toBe(true);
+	});
+
+	it("normalizes webcam mask shape values safely", () => {
+		expect(normalizeProjectEditor({ webcamMaskShape: "rounded" }).webcamMaskShape).toBe("rounded");
+		expect(
+			normalizeProjectEditor({ webcamMaskShape: "not-a-real-shape" as never }).webcamMaskShape,
+		).toBe("rectangle");
+	});
+
+	it("normalizes blur region type and mosaic block size safely", () => {
+		const editor = normalizeProjectEditor({
+			annotationRegions: [
+				{
+					id: "annotation-1",
+					startMs: 0,
+					endMs: 500,
+					type: "blur",
+					content: "",
+					position: { x: 10, y: 10 },
+					size: { width: 20, height: 20 },
+					style: {
+						color: "#fff",
+						backgroundColor: "transparent",
+						fontSize: 32,
+						fontFamily: "Inter",
+						fontWeight: "bold",
+						fontStyle: "normal",
+						textDecoration: "none",
+						textAlign: "center",
+					},
+					zIndex: 1,
+					blurData: {
+						type: "mosaic",
+						shape: "rectangle",
+						color: "black",
+						intensity: 999,
+						blockSize: 999,
+					},
+				},
+				{
+					id: "annotation-2",
+					startMs: 0,
+					endMs: 500,
+					type: "blur",
+					content: "",
+					position: { x: 10, y: 10 },
+					size: { width: 20, height: 20 },
+					style: {
+						color: "#fff",
+						backgroundColor: "transparent",
+						fontSize: 32,
+						fontFamily: "Inter",
+						fontWeight: "bold",
+						fontStyle: "normal",
+						textDecoration: "none",
+						textAlign: "center",
+					},
+					zIndex: 2,
+					blurData: {
+						type: "invalid" as never,
+						shape: "rectangle",
+						color: "invalid" as never,
+						intensity: 10,
+						blockSize: 0,
+					},
+				},
+			],
+		});
+
+		expect(editor.annotationRegions[0].blurData?.type).toBe("mosaic");
+		expect(editor.annotationRegions[0].blurData?.color).toBe("black");
+		expect(editor.annotationRegions[0].blurData?.intensity).toBe(40);
+		expect(editor.annotationRegions[0].blurData?.blockSize).toBe(48);
+		expect(editor.annotationRegions[1].blurData?.type).toBe("mosaic");
+		expect(editor.annotationRegions[1].blurData?.color).toBe("white");
+		expect(editor.annotationRegions[1].blurData?.blockSize).toBe(4);
+	});
+
+	it("accepts the dual frame webcam layout preset", () => {
+		expect(normalizeProjectEditor({ webcamLayoutPreset: "dual-frame" }).webcamLayoutPreset).toBe(
+			"dual-frame",
+		);
+	});
+
+	it("falls back from dual frame to picture in picture for portrait aspect ratios", () => {
+		expect(
+			normalizeProjectEditor({
+				aspectRatio: "9:16",
+				webcamLayoutPreset: "dual-frame",
+			}).webcamLayoutPreset,
+		).toBe("picture-in-picture");
+	});
+
+	it("clears webcamPosition when the normalized preset is not picture in picture", () => {
+		expect(
+			normalizeProjectEditor({
+				webcamLayoutPreset: "dual-frame",
+				webcamPosition: { cx: 0.2, cy: 0.8 },
+			}).webcamPosition,
+		).toBeNull();
+	});
+});
+
+it("creates stable snapshots for identical project state", () => {
+	const media = {
+		screenVideoPath: "/tmp/screen.webm",
+		webcamVideoPath: "/tmp/webcam.webm",
+	};
+	const editor = normalizeProjectEditor({
+		wallpaper: "/wallpapers/wallpaper1.jpg",
+		shadowIntensity: 0,
+		showBlur: false,
+		motionBlurAmount: 0,
+		borderRadius: 0,
+		padding: 50,
+		cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		zoomRegions: [],
+		trimRegions: [],
+		speedRegions: [],
+		annotationRegions: [],
+		aspectRatio: "16:9",
+		webcamLayoutPreset: "picture-in-picture",
+		webcamMaskShape: "circle",
+		exportQuality: "good",
+		exportFormat: "mp4",
+		gifFrameRate: 15,
+		gifLoop: true,
+		gifSizePreset: "medium",
+	});
+
+	expect(createProjectSnapshot(media, editor)).toBe(createProjectSnapshot(media, editor));
+});
+
+it("detects unsaved changes from differing snapshots", () => {
+	expect(hasProjectUnsavedChanges(null, null)).toBe(false);
+	expect(hasProjectUnsavedChanges("same", "same")).toBe(false);
+	expect(hasProjectUnsavedChanges("current", "baseline")).toBe(true);
+});
+
+describe("wallpaper legacy normalization", () => {
+	it("rewrites pre-fix packaged paths (resources/assets/wallpapers/…)", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///opt/Openscreen/resources/assets/wallpapers/wallpaper5.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper5.jpg");
+	});
+
+	it("rewrites new packaged layout (resources/wallpapers/…)", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///opt/Openscreen/resources/wallpapers/wallpaper3.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper3.jpg");
+	});
+
+	it("rewrites unpackaged dev layout (public/wallpapers/…)", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///home/user/project/public/wallpapers/wallpaper1.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper1.jpg");
+	});
+
+	it("rewrites Windows-style file URLs with drive letter", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///C:/Users/me/openscreen/resources/wallpapers/wallpaper2.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper2.jpg");
+	});
+
+	it("leaves canonical relative paths untouched", () => {
+		const normalized = normalizeProjectEditor({ wallpaper: "/wallpapers/wallpaper2.jpg" });
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper2.jpg");
+	});
+
+	it("leaves data URIs untouched", () => {
+		const dataUri = "data:image/png;base64,AAA";
+		expect(normalizeProjectEditor({ wallpaper: dataUri }).wallpaper).toBe(dataUri);
+	});
+
+	it("leaves colors and gradients untouched", () => {
+		expect(normalizeProjectEditor({ wallpaper: "#1a1a2e" }).wallpaper).toBe("#1a1a2e");
+		expect(
+			normalizeProjectEditor({ wallpaper: "linear-gradient(90deg, red, blue)" }).wallpaper,
+		).toBe("linear-gradient(90deg, red, blue)");
+	});
+
+	it("does NOT rewrite user files outside the known install layout", () => {
+		const userPath = "file:///home/user/Pictures/wallpapers/wallpaper1.jpg";
+		expect(normalizeProjectEditor({ wallpaper: userPath }).wallpaper).toBe(userPath);
+	});
+
+	it("falls back to default for bundled paths outside WALLPAPER_PATHS", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///opt/Openscreen/resources/wallpapers/wallpaper99.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper1.jpg");
+	});
+});
diff --git a/src/components/video-editor/projectPersistence.ts b/src/components/video-editor/projectPersistence.ts
new file mode 100644
index 0000000..f16d29e
--- /dev/null
+++ b/src/components/video-editor/projectPersistence.ts
@@ -0,0 +1,533 @@
+import { normalizeBlurColor, normalizeBlurType } from "@/lib/blurEffects";
+import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import type { ProjectMedia } from "@/lib/recordingSession";
+import { normalizeProjectMedia } from "@/lib/recordingSession";
+import { DEFAULT_WALLPAPER, WALLPAPER_PATHS } from "@/lib/wallpaper";
+import { ASPECT_RATIOS, type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
+import {
+	DEFAULT_EDITOR_APPEARANCE_SETTINGS,
+	DEFAULT_EDITOR_LAYOUT_SETTINGS,
+	DEFAULT_EXPORT_SETTINGS,
+	DEFAULT_GIF_SETTINGS,
+	DEFAULT_WEBCAM_SETTINGS,
+} from "./editorDefaults";
+import {
+	type AnnotationRegion,
+	type CropRegion,
+	clampPlaybackSpeed,
+	DEFAULT_ANNOTATION_POSITION,
+	DEFAULT_ANNOTATION_SIZE,
+	DEFAULT_ANNOTATION_STYLE,
+	DEFAULT_BLUR_BLOCK_SIZE,
+	DEFAULT_BLUR_DATA,
+	DEFAULT_BLUR_FREEHAND_POINTS,
+	DEFAULT_BLUR_INTENSITY,
+	DEFAULT_FIGURE_DATA,
+	DEFAULT_PLAYBACK_SPEED,
+	DEFAULT_ZOOM_DEPTH,
+	DEFAULT_ZOOM_MOTION_BLUR,
+	MAX_BLUR_BLOCK_SIZE,
+	MAX_BLUR_INTENSITY,
+	MAX_PLAYBACK_SPEED,
+	MIN_BLUR_BLOCK_SIZE,
+	MIN_BLUR_INTENSITY,
+	MIN_PLAYBACK_SPEED,
+	type SpeedRegion,
+	type TrimRegion,
+	type WebcamLayoutPreset,
+	type WebcamMaskShape,
+	type WebcamPosition,
+	type WebcamSizePreset,
+	type ZoomRegion,
+} from "./types";
+
+const VALID_BLUR_SHAPES = new Set(["rectangle", "oval", "freehand"] as const);
+
+// Pre-fix projects could persist resolved file:// URLs (machine-specific) for
+// bundled wallpapers. Rewrite only paths that match a known install layout
+// (resources/[assets/]wallpapers for packaged, public/wallpapers for dev) so
+// a legitimate user file that happens to live in a folder named "wallpapers"
+// elsewhere is never silently replaced.
+const LEGACY_FILE_WALLPAPER_RE =
+	/^file:\/\/.*?\/(?:resources\/(?:assets\/)?|public\/)wallpapers\/(wallpaper\d+\.jpg)$/i;
+const CANONICAL_WALLPAPERS = new Set(WALLPAPER_PATHS);
+
+function normalizeWallpaperValue(value: string): string {
+	const match = LEGACY_FILE_WALLPAPER_RE.exec(value);
+	if (!match) return value;
+	const canonical = `/wallpapers/${match[1]}`;
+	return CANONICAL_WALLPAPERS.has(canonical) ? canonical : DEFAULT_WALLPAPER;
+}
+
+export const PROJECT_VERSION = 2;
+
+export interface ProjectEditorState {
+	wallpaper: string;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount: number;
+	borderRadius: number;
+	padding: number;
+	cropRegion: CropRegion;
+	zoomRegions: ZoomRegion[];
+	trimRegions: TrimRegion[];
+	speedRegions: SpeedRegion[];
+	annotationRegions: AnnotationRegion[];
+	aspectRatio: AspectRatio;
+	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape: WebcamMaskShape;
+	webcamSizePreset: WebcamSizePreset;
+	webcamPosition: WebcamPosition | null;
+	exportQuality: ExportQuality;
+	exportFormat: ExportFormat;
+	gifFrameRate: GifFrameRate;
+	gifLoop: boolean;
+	gifSizePreset: GifSizePreset;
+}
+
+export interface EditorProjectData {
+	version: number;
+	media?: ProjectMedia;
+	editor: ProjectEditorState;
+	videoPath?: string;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+	return typeof value === "number" && Number.isFinite(value);
+}
+
+function computeNormalizedWebcamLayoutPreset(
+	webcamLayoutPreset: Partial<ProjectEditorState>["webcamLayoutPreset"],
+	normalizedAspectRatio: AspectRatio,
+): WebcamLayoutPreset {
+	switch (webcamLayoutPreset) {
+		case "picture-in-picture":
+		case "no-webcam":
+			return webcamLayoutPreset;
+		case "vertical-stack":
+			return isPortraitAspectRatio(normalizedAspectRatio)
+				? webcamLayoutPreset
+				: DEFAULT_WEBCAM_SETTINGS.layoutPreset;
+		case "dual-frame":
+			return isPortraitAspectRatio(normalizedAspectRatio)
+				? DEFAULT_WEBCAM_SETTINGS.layoutPreset
+				: webcamLayoutPreset;
+		default:
+			return DEFAULT_WEBCAM_SETTINGS.layoutPreset;
+	}
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(max, Math.max(min, value));
+}
+
+function encodePathSegments(pathname: string, keepWindowsDrive = false): string {
+	return pathname
+		.split("/")
+		.map((segment, index) => {
+			if (!segment) {
+				return segment;
+			}
+			if (keepWindowsDrive && index === 0 && /^[a-zA-Z]:$/.test(segment)) {
+				return segment;
+			}
+			return encodeURIComponent(segment);
+		})
+		.join("/");
+}
+
+export function toFileUrl(filePath: string): string {
+	const normalized = filePath.replace(/\\/g, "/");
+	if (normalized.match(/^[a-zA-Z]:/)) {
+		return `file:///${encodePathSegments(normalized, true)}`;
+	}
+	if (normalized.startsWith("//")) {
+		const withoutPrefix = normalized.slice(2);
+		const [host = "", ...segments] = withoutPrefix.split("/");
+		return `file://${host}/${encodePathSegments(segments.join("/"))}`;
+	}
+	const absolutePath = normalized.startsWith("/") ? normalized : `/${normalized}`;
+	return `file://${encodePathSegments(absolutePath)}`;
+}
+
+export function fromFileUrl(fileUrl: string): string {
+	if (!fileUrl.startsWith("file://")) {
+		return fileUrl;
+	}
+
+	try {
+		const url = new URL(fileUrl);
+		const pathname = decodeURIComponent(url.pathname);
+
+		if (url.host && url.host !== "localhost") {
+			return `//${url.host}${pathname}`;
+		}
+
+		if (/^\/[a-zA-Z]:/.test(pathname)) {
+			return pathname.slice(1);
+		}
+
+		return pathname;
+	} catch {
+		const fallbackPath = decodeURIComponent(fileUrl.replace(/^file:\/\//, ""));
+		return fallbackPath.replace(/^\/([a-zA-Z]:)/, "$1");
+	}
+}
+
+export function deriveNextId(prefix: string, ids: string[]): number {
+	const max = ids.reduce((acc, id) => {
+		const match = id.match(new RegExp(`^${prefix}-(\\d+)$`));
+		if (!match) return acc;
+		const value = Number(match[1]);
+		return Number.isFinite(value) ? Math.max(acc, value) : acc;
+	}, 0);
+	return max + 1;
+}
+
+export function validateProjectData(candidate: unknown): candidate is EditorProjectData {
+	if (!candidate || typeof candidate !== "object") return false;
+	const project = candidate as Partial<EditorProjectData>;
+	if (typeof project.version !== "number") return false;
+	if (!resolveProjectMedia(project)) return false;
+	if (!project.editor || typeof project.editor !== "object") return false;
+	return true;
+}
+
+export function resolveProjectMedia(
+	candidate: Partial<EditorProjectData> | { media?: unknown; videoPath?: unknown },
+): ProjectMedia | null {
+	const media = normalizeProjectMedia(candidate.media);
+	if (media) {
+		return media;
+	}
+
+	if (typeof candidate.videoPath === "string" && candidate.videoPath.trim()) {
+		return { screenVideoPath: candidate.videoPath };
+	}
+
+	return null;
+}
+
+export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): ProjectEditorState {
+	const validAspectRatios = new Set<AspectRatio>(ASPECT_RATIOS);
+	const normalizedAspectRatio: AspectRatio = validAspectRatios.has(
+		editor.aspectRatio as AspectRatio,
+	)
+		? (editor.aspectRatio as AspectRatio)
+		: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio;
+	const normalizedWebcamLayoutPreset = computeNormalizedWebcamLayoutPreset(
+		editor.webcamLayoutPreset,
+		normalizedAspectRatio,
+	);
+	const normalizedWebcamPosition: WebcamPosition | null =
+		normalizedWebcamLayoutPreset === "picture-in-picture" &&
+		editor.webcamPosition &&
+		typeof editor.webcamPosition === "object" &&
+		isFiniteNumber((editor.webcamPosition as WebcamPosition).cx) &&
+		isFiniteNumber((editor.webcamPosition as WebcamPosition).cy)
+			? {
+					cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
+					cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
+				}
+			: DEFAULT_WEBCAM_SETTINGS.position;
+
+	const normalizedZoomRegions: ZoomRegion[] = Array.isArray(editor.zoomRegions)
+		? editor.zoomRegions
+				.filter((region): region is ZoomRegion => Boolean(region && typeof region.id === "string"))
+				.map((region) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					const rawEnd = isFiniteNumber(region.endMs) ? Math.round(region.endMs) : rawStart + 1000;
+					const startMs = Math.max(0, Math.min(rawStart, rawEnd));
+					const endMs = Math.max(startMs + 1, rawEnd);
+
+					const validPreset =
+						region.rotationPreset === "iso" ||
+						region.rotationPreset === "left" ||
+						region.rotationPreset === "right"
+							? region.rotationPreset
+							: undefined;
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+						depth: [1, 2, 3, 4, 5, 6].includes(region.depth) ? region.depth : DEFAULT_ZOOM_DEPTH,
+						focus: {
+							cx: clamp(isFiniteNumber(region.focus?.cx) ? region.focus.cx : 0.5, 0, 1),
+							cy: clamp(isFiniteNumber(region.focus?.cy) ? region.focus.cy : 0.5, 0, 1),
+						},
+						focusMode: region.focusMode === "auto" ? "auto" : "manual",
+						...(validPreset ? { rotationPreset: validPreset } : {}),
+					};
+				})
+		: [];
+
+	const normalizedTrimRegions: TrimRegion[] = Array.isArray(editor.trimRegions)
+		? editor.trimRegions
+				.filter((region): region is TrimRegion => Boolean(region && typeof region.id === "string"))
+				.map((region) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					const rawEnd = isFiniteNumber(region.endMs) ? Math.round(region.endMs) : rawStart + 1000;
+					const startMs = Math.max(0, Math.min(rawStart, rawEnd));
+					const endMs = Math.max(startMs + 1, rawEnd);
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+					};
+				})
+		: [];
+
+	const normalizedSpeedRegions: SpeedRegion[] = Array.isArray(editor.speedRegions)
+		? editor.speedRegions
+				.filter((region): region is SpeedRegion => Boolean(region && typeof region.id === "string"))
+				.map((region) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					const rawEnd = isFiniteNumber(region.endMs) ? Math.round(region.endMs) : rawStart + 1000;
+					const startMs = Math.max(0, Math.min(rawStart, rawEnd));
+					const endMs = Math.max(startMs + 1, rawEnd);
+
+					const speed =
+						isFiniteNumber(region.speed) &&
+						region.speed >= MIN_PLAYBACK_SPEED &&
+						region.speed <= MAX_PLAYBACK_SPEED
+							? clampPlaybackSpeed(region.speed)
+							: DEFAULT_PLAYBACK_SPEED;
+
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+						speed,
+					};
+				})
+		: [];
+
+	const normalizedAnnotationRegions: AnnotationRegion[] = Array.isArray(editor.annotationRegions)
+		? editor.annotationRegions
+				.filter((region): region is AnnotationRegion =>
+					Boolean(region && typeof region.id === "string"),
+				)
+				.map((region, index) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					const rawEnd = isFiniteNumber(region.endMs) ? Math.round(region.endMs) : rawStart + 1000;
+					const startMs = Math.max(0, Math.min(rawStart, rawEnd));
+					const endMs = Math.max(startMs + 1, rawEnd);
+					const blurShape =
+						typeof region.blurData?.shape === "string" &&
+						VALID_BLUR_SHAPES.has(region.blurData.shape)
+							? region.blurData.shape
+							: DEFAULT_BLUR_DATA.shape;
+					const blurType = normalizeBlurType(region.blurData?.type);
+					const blurColor = normalizeBlurColor(region.blurData?.color);
+
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+						type:
+							region.type === "image" || region.type === "figure" || region.type === "blur"
+								? region.type
+								: "text",
+						content: typeof region.content === "string" ? region.content : "",
+						textContent: typeof region.textContent === "string" ? region.textContent : undefined,
+						imageContent: typeof region.imageContent === "string" ? region.imageContent : undefined,
+						position: {
+							x: clamp(
+								isFiniteNumber(region.position?.x)
+									? region.position.x
+									: DEFAULT_ANNOTATION_POSITION.x,
+								0,
+								100,
+							),
+							y: clamp(
+								isFiniteNumber(region.position?.y)
+									? region.position.y
+									: DEFAULT_ANNOTATION_POSITION.y,
+								0,
+								100,
+							),
+						},
+						size: {
+							width: clamp(
+								isFiniteNumber(region.size?.width)
+									? region.size.width
+									: DEFAULT_ANNOTATION_SIZE.width,
+								1,
+								200,
+							),
+							height: clamp(
+								isFiniteNumber(region.size?.height)
+									? region.size.height
+									: DEFAULT_ANNOTATION_SIZE.height,
+								1,
+								200,
+							),
+						},
+						style: {
+							...DEFAULT_ANNOTATION_STYLE,
+							...(region.style && typeof region.style === "object" ? region.style : {}),
+						},
+						zIndex: isFiniteNumber(region.zIndex) ? region.zIndex : index + 1,
+						figureData: region.figureData
+							? {
+									...DEFAULT_FIGURE_DATA,
+									...region.figureData,
+								}
+							: undefined,
+						blurData:
+							region.blurData && typeof region.blurData === "object"
+								? {
+										...DEFAULT_BLUR_DATA,
+										...region.blurData,
+										type: blurType,
+										shape: blurShape,
+										color: blurColor,
+										intensity: isFiniteNumber(region.blurData.intensity)
+											? clamp(region.blurData.intensity, MIN_BLUR_INTENSITY, MAX_BLUR_INTENSITY)
+											: DEFAULT_BLUR_INTENSITY,
+										blockSize: isFiniteNumber(region.blurData.blockSize)
+											? clamp(region.blurData.blockSize, MIN_BLUR_BLOCK_SIZE, MAX_BLUR_BLOCK_SIZE)
+											: DEFAULT_BLUR_BLOCK_SIZE,
+										freehandPoints: Array.isArray(region.blurData.freehandPoints)
+											? region.blurData.freehandPoints
+													.filter(
+														(
+															point,
+														): point is {
+															x: number;
+															y: number;
+														} =>
+															Boolean(
+																point &&
+																	isFiniteNumber((point as { x?: unknown }).x) &&
+																	isFiniteNumber((point as { y?: unknown }).y),
+															),
+													)
+													.map((point) => ({
+														x: clamp(point.x, 0, 100),
+														y: clamp(point.y, 0, 100),
+													}))
+											: DEFAULT_BLUR_FREEHAND_POINTS,
+									}
+								: undefined,
+					};
+				})
+		: [];
+
+	const rawCropX = isFiniteNumber(editor.cropRegion?.x)
+		? editor.cropRegion.x
+		: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.x;
+	const rawCropY = isFiniteNumber(editor.cropRegion?.y)
+		? editor.cropRegion.y
+		: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.y;
+	const rawCropWidth = isFiniteNumber(editor.cropRegion?.width)
+		? editor.cropRegion.width
+		: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.width;
+	const rawCropHeight = isFiniteNumber(editor.cropRegion?.height)
+		? editor.cropRegion.height
+		: DEFAULT_EDITOR_LAYOUT_SETTINGS.cropRegion.height;
+
+	const cropX = clamp(rawCropX, 0, 1);
+	const cropY = clamp(rawCropY, 0, 1);
+	const cropWidth = clamp(rawCropWidth, 0.01, 1 - cropX);
+	const cropHeight = clamp(rawCropHeight, 0.01, 1 - cropY);
+
+	return {
+		wallpaper:
+			typeof editor.wallpaper === "string"
+				? normalizeWallpaperValue(editor.wallpaper)
+				: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
+		shadowIntensity:
+			typeof editor.shadowIntensity === "number"
+				? editor.shadowIntensity
+				: DEFAULT_EDITOR_APPEARANCE_SETTINGS.shadowIntensity,
+		showBlur:
+			typeof editor.showBlur === "boolean"
+				? editor.showBlur
+				: DEFAULT_EDITOR_APPEARANCE_SETTINGS.showBlur,
+		motionBlurAmount: isFiniteNumber(editor.motionBlurAmount)
+			? clamp(editor.motionBlurAmount, 0, 1)
+			: typeof (editor as { motionBlurEnabled?: unknown }).motionBlurEnabled === "boolean"
+				? (editor as { motionBlurEnabled?: boolean }).motionBlurEnabled
+					? DEFAULT_ZOOM_MOTION_BLUR
+					: DEFAULT_EDITOR_APPEARANCE_SETTINGS.motionBlurAmount
+				: DEFAULT_EDITOR_APPEARANCE_SETTINGS.motionBlurAmount,
+		borderRadius:
+			typeof editor.borderRadius === "number"
+				? editor.borderRadius
+				: DEFAULT_EDITOR_APPEARANCE_SETTINGS.borderRadius,
+		padding: isFiniteNumber(editor.padding)
+			? clamp(editor.padding, 0, 100)
+			: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+		cropRegion: {
+			x: cropX,
+			y: cropY,
+			width: cropWidth,
+			height: cropHeight,
+		},
+		zoomRegions: normalizedZoomRegions,
+		trimRegions: normalizedTrimRegions,
+		speedRegions: normalizedSpeedRegions,
+		annotationRegions: normalizedAnnotationRegions,
+		aspectRatio: normalizedAspectRatio,
+		webcamLayoutPreset: normalizedWebcamLayoutPreset,
+		webcamMaskShape:
+			editor.webcamMaskShape === "rectangle" ||
+			editor.webcamMaskShape === "circle" ||
+			editor.webcamMaskShape === "square" ||
+			editor.webcamMaskShape === "rounded"
+				? editor.webcamMaskShape
+				: DEFAULT_WEBCAM_SETTINGS.maskShape,
+		webcamSizePreset:
+			typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
+				? Math.max(10, Math.min(50, editor.webcamSizePreset))
+				: DEFAULT_WEBCAM_SETTINGS.sizePreset,
+		webcamPosition: normalizedWebcamPosition,
+		exportQuality:
+			editor.exportQuality === "medium" || editor.exportQuality === "source"
+				? editor.exportQuality
+				: DEFAULT_EXPORT_SETTINGS.quality,
+		exportFormat: editor.exportFormat === "gif" ? "gif" : DEFAULT_EXPORT_SETTINGS.format,
+		gifFrameRate:
+			editor.gifFrameRate === 15 ||
+			editor.gifFrameRate === 20 ||
+			editor.gifFrameRate === 25 ||
+			editor.gifFrameRate === 30
+				? editor.gifFrameRate
+				: DEFAULT_GIF_SETTINGS.frameRate,
+		gifLoop: typeof editor.gifLoop === "boolean" ? editor.gifLoop : DEFAULT_GIF_SETTINGS.loop,
+		gifSizePreset:
+			editor.gifSizePreset === "medium" ||
+			editor.gifSizePreset === "large" ||
+			editor.gifSizePreset === "original"
+				? editor.gifSizePreset
+				: DEFAULT_GIF_SETTINGS.sizePreset,
+	};
+}
+
+export function createProjectData(
+	media: ProjectMedia,
+	editor: ProjectEditorState,
+): EditorProjectData {
+	return {
+		version: PROJECT_VERSION,
+		media,
+		editor,
+	};
+}
+
+export function createProjectSnapshot(
+	media: ProjectMedia,
+	editor: Partial<ProjectEditorState>,
+): string {
+	return JSON.stringify(createProjectData(media, normalizeProjectEditor(editor)));
+}
+
+export function hasProjectUnsavedChanges(
+	currentSnapshot: string | null,
+	baselineSnapshot: string | null,
+): boolean {
+	return Boolean(
+		currentSnapshot !== null && baselineSnapshot !== null && currentSnapshot !== baselineSnapshot,
+	);
+}
diff --git a/src/components/video-editor/timeline/Item.module.css b/src/components/video-editor/timeline/Item.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
new file mode 100644
index 0000000..7251af6
--- /dev/null
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -0,0 +1,185 @@
+import type { Span } from "dnd-timeline";
+import { useItem } from "dnd-timeline";
+import { Gauge, MessageSquare, MousePointer2, Scissors, ZoomIn } from "lucide-react";
+import { useMemo } from "react";
+import { useScopedT } from "@/contexts/I18nContext";
+import { cn } from "@/lib/utils";
+import glassStyles from "./ItemGlass.module.css";
+
+interface ItemProps {
+	id: string;
+	span: Span;
+	rowId: string;
+	children: React.ReactNode;
+	isSelected?: boolean;
+	onSelect?: () => void;
+	zoomDepth?: number;
+	zoomCustomScale?: number;
+	speedValue?: number;
+	isAutoFocus?: boolean;
+	variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
+}
+
+// Map zoom depth to multiplier labels
+const ZOOM_LABELS: Record<number, string> = {
+	1: "1.25×",
+	2: "1.5×",
+	3: "1.8×",
+	4: "2.2×",
+	5: "3.5×",
+	6: "5×",
+};
+
+function formatMs(ms: number): string {
+	const totalSeconds = ms / 1000;
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	if (minutes > 0) {
+		return `${minutes}:${seconds.toFixed(1).padStart(4, "0")}`;
+	}
+	return `${seconds.toFixed(1)}s`;
+}
+
+export default function Item({
+	id,
+	span,
+	rowId,
+	isSelected = false,
+	onSelect,
+	zoomDepth = 1,
+	zoomCustomScale,
+	speedValue,
+	isAutoFocus = false,
+	variant = "zoom",
+	children,
+}: ItemProps) {
+	const t = useScopedT("timeline");
+	const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
+		id,
+		span,
+		data: { rowId },
+	});
+
+	const isZoom = variant === "zoom";
+	const isTrim = variant === "trim";
+	const isSpeed = variant === "speed";
+
+	const glassClass = isZoom
+		? glassStyles.glassGreen
+		: isTrim
+			? glassStyles.glassRed
+			: isSpeed
+				? glassStyles.glassAmber
+				: glassStyles.glassYellow;
+
+	const endCapColor = isZoom ? "#21916A" : isTrim ? "#ef4444" : isSpeed ? "#d97706" : "#B4A046";
+
+	const timeLabel = useMemo(
+		() => `${formatMs(span.start)} – ${formatMs(span.end)}`,
+		[span.start, span.end],
+	);
+
+	// Minimum clickable width on the outer wrapper.
+	// Kept small (6px) so items visually distinguish their real positions;
+	// users should zoom in to interact with sub-second items precisely.
+	const MIN_ITEM_PX = 6;
+	const safeItemStyle = { ...itemStyle, minWidth: MIN_ITEM_PX };
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={safeItemStyle}
+			{...listeners}
+			{...attributes}
+			onPointerDownCapture={() => onSelect?.()}
+			className="group"
+		>
+			<div style={{ ...itemContentStyle, minWidth: 24 }}>
+				<div
+					className={cn(
+						glassClass,
+						"w-full h-full overflow-hidden flex items-center justify-center gap-1.5 cursor-grab active:cursor-grabbing relative",
+						isSelected && glassStyles.selected,
+					)}
+					style={{ height: 30, color: "#fff", minWidth: 24 }}
+					onClick={(event) => {
+						event.stopPropagation();
+						onSelect?.();
+					}}
+				>
+					<div
+						className={cn(glassStyles.zoomEndCap, glassStyles.left)}
+						style={{
+							cursor: "col-resize",
+							pointerEvents: "auto",
+							width: 8,
+							opacity: 0.9,
+							background: endCapColor,
+						}}
+						title="Resize left"
+					/>
+					<div
+						className={cn(glassStyles.zoomEndCap, glassStyles.right)}
+						style={{
+							cursor: "col-resize",
+							pointerEvents: "auto",
+							width: 8,
+							opacity: 0.9,
+							background: endCapColor,
+						}}
+						title="Resize right"
+					/>
+					{/* Content */}
+					<div className="relative z-10 flex min-w-0 flex-col items-center justify-center text-white/90 opacity-85 group-hover:opacity-100 transition-opacity select-none overflow-hidden px-3">
+						<div className="flex items-center gap-1.5">
+							{isZoom ? (
+								<>
+									<ZoomIn className="w-3.5 h-3.5 shrink-0" />
+									<span className="text-[11px] font-semibold whitespace-nowrap">
+										{zoomCustomScale != null
+											? `${zoomCustomScale.toFixed(2)}×`
+											: ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
+									</span>
+									{isAutoFocus && (
+										<MousePointer2
+											className="w-3 h-3 shrink-0 opacity-90"
+											aria-label="Cursor-follow"
+										/>
+									)}
+								</>
+							) : isTrim ? (
+								<>
+									<Scissors className="w-3.5 h-3.5 shrink-0" />
+									<span className="text-[11px] font-semibold whitespace-nowrap">
+										{t("labels.trim")}
+									</span>
+								</>
+							) : isSpeed ? (
+								<>
+									<Gauge className="w-3.5 h-3.5 shrink-0" />
+									<span className="text-[11px] font-semibold whitespace-nowrap">
+										{speedValue !== undefined ? `${speedValue}×` : t("labels.speed")}
+									</span>
+								</>
+							) : (
+								<>
+									<MessageSquare className="w-3.5 h-3.5 shrink-0" />
+									<span className="text-[11px] font-semibold truncate whitespace-nowrap">
+										{children}
+									</span>
+								</>
+							)}
+						</div>
+						<span
+							className={`text-[9px] tabular-nums tracking-tight whitespace-nowrap transition-opacity ${
+								isSelected ? "opacity-60" : "opacity-0 group-hover:opacity-40"
+							}`}
+						>
+							{timeLabel}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/timeline/ItemGlass.module.css b/src/components/video-editor/timeline/ItemGlass.module.css
new file mode 100644
index 0000000..9fdbacd
--- /dev/null
+++ b/src/components/video-editor/timeline/ItemGlass.module.css
@@ -0,0 +1,149 @@
+.glassGreen {
+	position: relative;
+	border-radius: 10px;
+	-corner-smoothing: antialiased;
+	background: linear-gradient(180deg, rgba(52, 178, 123, 0.28), rgba(31, 115, 82, 0.2));
+	border: 1px solid rgba(77, 221, 157, 0.36);
+	box-shadow:
+		0 1px 0 rgba(255, 255, 255, 0.1) inset,
+		0 8px 22px rgba(0, 0, 0, 0.22);
+	margin: 3px 0;
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassGreen:hover {
+	background: linear-gradient(180deg, rgba(52, 178, 123, 0.36), rgba(31, 115, 82, 0.25));
+	border-color: rgba(77, 221, 157, 0.62);
+}
+
+.glassGreen.selected {
+	background: linear-gradient(180deg, rgba(52, 178, 123, 0.48), rgba(31, 115, 82, 0.32));
+	border-color: #34b27b;
+	box-shadow:
+		0 0 0 1px rgba(52, 178, 123, 0.95),
+		0 0 0 4px rgba(52, 178, 123, 0.14),
+		0 12px 26px rgba(0, 0, 0, 0.28);
+	z-index: 10;
+}
+
+.glassRed {
+	position: relative;
+	border-radius: 10px;
+	-corner-smoothing: antialiased;
+	background: rgba(239, 68, 68, 0.15);
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(239, 68, 68, 0.1) inset;
+	margin: 3px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassRed:hover {
+	background: rgba(239, 68, 68, 0.25);
+	border-color: rgba(239, 68, 68, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(239, 68, 68, 0.2) inset;
+}
+
+.glassRed.selected {
+	background: rgba(239, 68, 68, 0.35);
+	border-color: #ef4444;
+	box-shadow:
+		0 0 0 1px #ef4444,
+		0 4px 20px 0 rgba(239, 68, 68, 0.3) inset;
+	z-index: 10;
+}
+
+.glassYellow {
+	position: relative;
+	border-radius: 10px;
+	-corner-smoothing: antialiased;
+	background: rgba(180, 160, 70, 0.15);
+	border: 1px solid rgba(180, 160, 70, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(180, 160, 70, 0.1) inset;
+	margin: 3px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassYellow:hover {
+	background: rgba(180, 160, 70, 0.25);
+	border-color: rgba(180, 160, 70, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(180, 160, 70, 0.2) inset;
+}
+
+.glassYellow.selected {
+	background: rgba(180, 160, 70, 0.35);
+	border-color: #b4a046;
+	box-shadow:
+		0 0 0 1px #b4a046,
+		0 4px 20px 0 rgba(180, 160, 70, 0.3) inset;
+	z-index: 10;
+}
+
+.glassAmber {
+	position: relative;
+	border-radius: 10px;
+	-corner-smoothing: antialiased;
+	background: rgba(245, 158, 11, 0.15);
+	border: 1px solid rgba(245, 158, 11, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(245, 158, 11, 0.1) inset;
+	margin: 3px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassAmber:hover {
+	background: rgba(245, 158, 11, 0.25);
+	border-color: rgba(245, 158, 11, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(245, 158, 11, 0.2) inset;
+}
+
+.glassAmber.selected {
+	background: rgba(245, 158, 11, 0.35);
+	border-color: #f59e0b;
+	box-shadow:
+		0 0 0 1px #f59e0b,
+		0 4px 20px 0 rgba(245, 158, 11, 0.3) inset;
+	z-index: 10;
+}
+
+.zoomEndCap {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	pointer-events: none;
+	z-index: 2;
+	opacity: 0.45;
+	transition:
+		opacity 0.2s,
+		width 0.2s;
+}
+
+.glassGreen:hover .zoomEndCap,
+.glassGreen.selected .zoomEndCap,
+.glassRed:hover .zoomEndCap,
+.glassRed.selected .zoomEndCap,
+.glassYellow:hover .zoomEndCap,
+.glassYellow.selected .zoomEndCap,
+.glassAmber:hover .zoomEndCap,
+.glassAmber.selected .zoomEndCap {
+	opacity: 1;
+}
+
+.zoomEndCap.left {
+	left: 0;
+	cursor: ew-resize;
+	border-top-left-radius: 9px;
+	border-bottom-left-radius: 9px;
+}
+
+.zoomEndCap.right {
+	right: 0;
+	cursor: ew-resize;
+	border-top-right-radius: 9px;
+	border-bottom-right-radius: 9px;
+}
diff --git a/src/components/video-editor/timeline/KeyframeMarkers.tsx b/src/components/video-editor/timeline/KeyframeMarkers.tsx
new file mode 100644
index 0000000..9aca714
--- /dev/null
+++ b/src/components/video-editor/timeline/KeyframeMarkers.tsx
@@ -0,0 +1,114 @@
+import { useTimelineContext } from "dnd-timeline";
+import React, { useEffect, useState } from "react";
+
+interface Keyframe {
+	id: string;
+	time: number;
+}
+
+interface KeyframeMarkersProps {
+	keyframes: Keyframe[];
+	selectedKeyframeId: string | null;
+	setSelectedKeyframeId: (id: string | null) => void;
+	onKeyframeMove: (id: string, newTime: number) => void;
+	videoDurationMs: number;
+	timelineRef: React.RefObject<HTMLDivElement>;
+}
+
+const KeyframeMarkers: React.FC<KeyframeMarkersProps> = ({
+	keyframes,
+	selectedKeyframeId,
+	setSelectedKeyframeId,
+	onKeyframeMove,
+	videoDurationMs,
+	timelineRef,
+}) => {
+	const { sidebarWidth, range, valueToPixels, pixelsToValue } = useTimelineContext();
+	const [draggingKeyframeId, setDraggingKeyframeId] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!draggingKeyframeId) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!timelineRef.current) return;
+
+			const rect = timelineRef.current.getBoundingClientRect();
+			const clickX = e.clientX - rect.left - sidebarWidth;
+			const relativeMs = pixelsToValue(clickX);
+			const absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
+
+			// Update the keyframe position in real-time
+			onKeyframeMove(draggingKeyframeId, absoluteMs);
+		};
+
+		const handleMouseUp = () => {
+			setDraggingKeyframeId(null);
+			document.body.style.cursor = "";
+		};
+
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		document.body.style.cursor = "ew-resize";
+
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+			document.body.style.cursor = "";
+		};
+	}, [
+		draggingKeyframeId,
+		onKeyframeMove,
+		timelineRef,
+		sidebarWidth,
+		range.start,
+		videoDurationMs,
+		pixelsToValue,
+	]);
+
+	return (
+		<>
+			{keyframes.map((kf) => {
+				const offset = valueToPixels(kf.time - range.start);
+				const isSelected = kf.id === selectedKeyframeId;
+				const isDragging = kf.id === draggingKeyframeId;
+
+				return (
+					<div
+						key={kf.id}
+						className={`absolute top-8 cursor-grab active:cursor-grabbing ${isSelected ? "ring-2 ring-[#34B27B]" : ""}`}
+						style={{
+							left: `${sidebarWidth + offset - 8}px`,
+							zIndex: isDragging ? 50 : 40,
+							transition: isDragging ? "none" : "left 0.1s ease-out",
+						}}
+						onMouseDown={(e) => {
+							e.stopPropagation();
+							setSelectedKeyframeId(kf.id);
+							setDraggingKeyframeId(kf.id);
+						}}
+						onContextMenu={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							setSelectedKeyframeId(kf.id);
+						}}
+						title={`Keyframe @ ${Math.round(kf.time)}ms (drag to move, Delete/Backspace to remove)`}
+					>
+						<div
+							style={{
+								width: "10px",
+								height: "10px",
+								background: "#ffe100ff",
+								transform: "rotate(45deg)",
+								border: "none",
+								opacity: isSelected ? 1 : 0.6,
+								transition: "opacity 0.15s",
+							}}
+						/>
+					</div>
+				);
+			})}
+		</>
+	);
+};
+
+export default KeyframeMarkers;
diff --git a/src/components/video-editor/timeline/Row.tsx b/src/components/video-editor/timeline/Row.tsx
new file mode 100644
index 0000000..77fb52d
--- /dev/null
+++ b/src/components/video-editor/timeline/Row.tsx
@@ -0,0 +1,28 @@
+import type { RowDefinition } from "dnd-timeline";
+import { useRow } from "dnd-timeline";
+
+interface RowProps extends RowDefinition {
+	children: React.ReactNode;
+	hint?: string;
+	isEmpty?: boolean;
+}
+
+export default function Row({ id, children, hint, isEmpty }: RowProps) {
+	const { setNodeRef, rowWrapperStyle, rowStyle } = useRow({ id });
+
+	return (
+		<div
+			className="border-b border-white/[0.055] bg-[#101116] relative overflow-hidden"
+			style={{ ...rowWrapperStyle, minHeight: 36 }}
+		>
+			{isEmpty && hint && (
+				<div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-10">
+					<span className="text-[11px] text-white/[0.12] font-medium">{hint}</span>
+				</div>
+			)}
+			<div ref={setNodeRef} style={rowStyle}>
+				{children}
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/timeline/Subrow.tsx b/src/components/video-editor/timeline/Subrow.tsx
new file mode 100644
index 0000000..5ea7ad7
--- /dev/null
+++ b/src/components/video-editor/timeline/Subrow.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+
+interface SubrowProps {
+	children: React.ReactNode;
+}
+
+export default function Subrow({ children }: SubrowProps) {
+	return (
+		<div
+			className={cn(
+				"flex items-center min-h-[32px] gap-1 px-2 py-0.5 bg-[#23232a] rounded-md text-slate-300",
+			)}
+		>
+			{children}
+		</div>
+	);
+}
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
new file mode 100644
index 0000000..759fcbb
--- /dev/null
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -0,0 +1,1708 @@
+import type { Range, Span } from "dnd-timeline";
+import { useTimelineContext } from "dnd-timeline";
+import {
+	Check,
+	ChevronDown,
+	Gauge,
+	MessageSquare,
+	Plus,
+	Scissors,
+	WandSparkles,
+	ZoomIn,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { v4 as uuidv4 } from "uuid";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useScopedT } from "@/contexts/I18nContext";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { matchesShortcut } from "@/lib/shortcuts";
+import { cn } from "@/lib/utils";
+import { ASPECT_RATIOS, type AspectRatio, getAspectRatioLabel } from "@/utils/aspectRatioUtils";
+import { formatShortcut } from "@/utils/platformUtils";
+import type {
+	AnnotationRegion,
+	CursorTelemetryPoint,
+	SpeedRegion,
+	TrimRegion,
+	ZoomFocus,
+	ZoomRegion,
+} from "../types";
+import Item from "./Item";
+import KeyframeMarkers from "./KeyframeMarkers";
+import Row from "./Row";
+import TimelineWrapper from "./TimelineWrapper";
+import { detectZoomDwellCandidates, normalizeCursorTelemetry } from "./zoomSuggestionUtils";
+
+const ZOOM_ROW_ID = "row-zoom";
+const TRIM_ROW_ID = "row-trim";
+const ANNOTATION_ROW_ID = "row-annotation";
+const BLUR_ROW_ID = "row-blur";
+const SPEED_ROW_ID = "row-speed";
+const FALLBACK_RANGE_MS = 1000;
+const TARGET_MARKER_COUNT = 12;
+const SUGGESTION_SPACING_MS = 1800;
+
+interface TimelineEditorProps {
+	videoDuration: number;
+	hasVideoSource?: boolean;
+	currentTime: number;
+	onSeek?: (time: number) => void;
+	cursorTelemetry?: CursorTelemetryPoint[];
+	zoomRegions: ZoomRegion[];
+	onZoomAdded: (span: Span) => void;
+	onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
+	onZoomSpanChange: (id: string, span: Span) => void;
+	onZoomDelete: (id: string) => void;
+	selectedZoomId: string | null;
+	onSelectZoom: (id: string | null) => void;
+	trimRegions?: TrimRegion[];
+	onTrimAdded?: (span: Span) => void;
+	onTrimSpanChange?: (id: string, span: Span) => void;
+	onTrimDelete?: (id: string) => void;
+	selectedTrimId?: string | null;
+	onSelectTrim?: (id: string | null) => void;
+	annotationRegions?: AnnotationRegion[];
+	onAnnotationAdded?: (span: Span) => void;
+	onAnnotationSpanChange?: (id: string, span: Span) => void;
+	onAnnotationDelete?: (id: string) => void;
+	selectedAnnotationId?: string | null;
+	onSelectAnnotation?: (id: string | null) => void;
+	blurRegions?: AnnotationRegion[];
+	onBlurAdded?: (span: Span) => void;
+	onBlurSpanChange?: (id: string, span: Span) => void;
+	onBlurDelete?: (id: string) => void;
+	selectedBlurId?: string | null;
+	onSelectBlur?: (id: string | null) => void;
+	speedRegions?: SpeedRegion[];
+	onSpeedAdded?: (span: Span) => void;
+	onSpeedSpanChange?: (id: string, span: Span) => void;
+	onSpeedDelete?: (id: string) => void;
+	selectedSpeedId?: string | null;
+	onSelectSpeed?: (id: string | null) => void;
+	aspectRatio: AspectRatio;
+	onAspectRatioChange: (aspectRatio: AspectRatio) => void;
+}
+
+interface TimelineScaleConfig {
+	minItemDurationMs: number;
+	defaultItemDurationMs: number;
+	minVisibleRangeMs: number;
+}
+
+interface TimelineRenderItem {
+	id: string;
+	rowId: string;
+	span: Span;
+	label: string;
+	zoomDepth?: number;
+	zoomCustomScale?: number;
+	speedValue?: number;
+	isAutoFocus?: boolean;
+	variant: "zoom" | "trim" | "annotation" | "speed" | "blur";
+}
+
+const SCALE_CANDIDATES = [
+	{ intervalSeconds: 0.05, gridSeconds: 0.01 },
+	{ intervalSeconds: 0.1, gridSeconds: 0.02 },
+	{ intervalSeconds: 0.25, gridSeconds: 0.05 },
+	{ intervalSeconds: 0.5, gridSeconds: 0.1 },
+	{ intervalSeconds: 1, gridSeconds: 0.25 },
+	{ intervalSeconds: 2, gridSeconds: 0.5 },
+	{ intervalSeconds: 5, gridSeconds: 1 },
+	{ intervalSeconds: 10, gridSeconds: 2 },
+	{ intervalSeconds: 15, gridSeconds: 3 },
+	{ intervalSeconds: 30, gridSeconds: 5 },
+	{ intervalSeconds: 60, gridSeconds: 10 },
+	{ intervalSeconds: 120, gridSeconds: 20 },
+	{ intervalSeconds: 300, gridSeconds: 30 },
+	{ intervalSeconds: 600, gridSeconds: 60 },
+	{ intervalSeconds: 900, gridSeconds: 120 },
+	{ intervalSeconds: 1800, gridSeconds: 180 },
+	{ intervalSeconds: 3600, gridSeconds: 300 },
+];
+
+/**
+ * Picks the best axis interval for the currently visible time range.
+ * Called dynamically — re-runs on every zoom change so the axis always
+ * shows a meaningful density of markers regardless of video length.
+ */
+function calculateAxisScale(visibleRangeMs: number): { intervalMs: number; gridMs: number } {
+	const visibleSeconds = visibleRangeMs / 1000;
+	const candidate =
+		SCALE_CANDIDATES.find((c) => {
+			if (visibleSeconds <= 0) return true;
+			return visibleSeconds / c.intervalSeconds <= TARGET_MARKER_COUNT;
+		}) ?? SCALE_CANDIDATES[SCALE_CANDIDATES.length - 1];
+	return {
+		intervalMs: Math.round(candidate.intervalSeconds * 1000),
+		gridMs: Math.round(candidate.gridSeconds * 1000),
+	};
+}
+
+function calculateTimelineScale(durationSeconds: number): TimelineScaleConfig {
+	const totalMs = Math.max(0, Math.round(durationSeconds * 1000));
+
+	// Minimum item duration: fixed at 100ms (0.1s).
+	// Allows precise cuts while remaining interactive.
+	const minItemDurationMs = 100;
+
+	// Default placement size: 5% of video duration, clamped between 1s and 30s.
+	const defaultItemDurationMs =
+		totalMs > 0
+			? Math.max(minItemDurationMs, Math.min(Math.round(totalMs * 0.05), 30000))
+			: Math.max(minItemDurationMs, 1000);
+
+	// Minimum visible range: 300ms — allows comfortably viewing 0.1s items.
+	// Axis markers adapt dynamically via calculateAxisScale, so there is no
+	// upper constraint on how far the user can zoom in.
+	const minVisibleRangeMs = 300;
+
+	return {
+		minItemDurationMs,
+		defaultItemDurationMs,
+		minVisibleRangeMs,
+	};
+}
+
+function createInitialRange(totalMs: number): Range {
+	if (totalMs > 0) {
+		return { start: 0, end: totalMs };
+	}
+
+	return { start: 0, end: FALLBACK_RANGE_MS };
+}
+
+function clampVisibleRange(candidate: Range, totalMs: number): Range {
+	if (totalMs <= 0) {
+		return candidate;
+	}
+
+	const span = Math.max(candidate.end - candidate.start, 1);
+
+	if (span >= totalMs) {
+		return { start: 0, end: totalMs };
+	}
+
+	const start = Math.max(0, Math.min(candidate.start, totalMs - span));
+	return { start, end: start + span };
+}
+
+function normalizeWheelDelta(delta: number, deltaMode: number, pageSizePx: number): number {
+	if (deltaMode === WheelEvent.DOM_DELTA_LINE) {
+		return delta * 16;
+	}
+
+	if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+		return delta * pageSizePx;
+	}
+
+	return delta;
+}
+
+function formatTimeLabel(milliseconds: number, intervalMs: number) {
+	const totalSeconds = milliseconds / 1000;
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+	const seconds = totalSeconds % 60;
+
+	const fractionalDigits = intervalMs < 250 ? 2 : intervalMs < 1000 ? 1 : 0;
+
+	if (hours > 0) {
+		const minutesString = minutes.toString().padStart(2, "0");
+		const secondsString = Math.floor(seconds).toString().padStart(2, "0");
+		return `${hours}:${minutesString}:${secondsString}`;
+	}
+
+	if (fractionalDigits > 0) {
+		const secondsWithFraction = seconds.toFixed(fractionalDigits);
+		const [wholeSeconds, fraction] = secondsWithFraction.split(".");
+		return `${minutes}:${wholeSeconds.padStart(2, "0")}.${fraction}`;
+	}
+
+	return `${minutes}:${Math.floor(seconds).toString().padStart(2, "0")}`;
+}
+
+function formatPlayheadTime(ms: number): string {
+	const s = ms / 1000;
+	const min = Math.floor(s / 60);
+	const sec = s % 60;
+	if (min > 0) return `${min}:${sec.toFixed(1).padStart(4, "0")}`;
+	return `${sec.toFixed(1)}s`;
+}
+
+function shouldStartTimelineScrub(target: EventTarget | null, timelineElement: HTMLElement) {
+	if (!(target instanceof HTMLElement)) {
+		return false;
+	}
+
+	for (let element: HTMLElement | null = target; element && element !== timelineElement; ) {
+		const className = element.className;
+		const classText = typeof className === "string" ? className : "";
+
+		if (
+			classText.split(/\s+/).includes("group") ||
+			classText.includes("cursor-grab") ||
+			classText.includes("cursor-grabbing") ||
+			classText.includes("cursor-ew-resize") ||
+			element.style.cursor === "col-resize"
+		) {
+			return false;
+		}
+
+		element = element.parentElement;
+	}
+
+	return true;
+}
+
+function PlaybackCursor({
+	currentTimeMs,
+	videoDurationMs,
+	onSeek,
+	onRangeChange,
+	timelineRef,
+	keyframes = [],
+}: {
+	currentTimeMs: number;
+	videoDurationMs: number;
+	onSeek?: (time: number) => void;
+	onRangeChange?: (updater: (previous: Range) => Range) => void;
+	timelineRef: React.RefObject<HTMLDivElement>;
+	keyframes?: { id: string; time: number }[];
+}) {
+	const { sidebarWidth, direction, range, valueToPixels, pixelsToValue } = useTimelineContext();
+	const sideProperty = direction === "rtl" ? "right" : "left";
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragPreviewTimeMs, setDragPreviewTimeMs] = useState<number | null>(null);
+
+	useEffect(() => {
+		if (!isDragging) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!timelineRef.current || !onSeek) return;
+
+			const rect = timelineRef.current.getBoundingClientRect();
+			const clickX = e.clientX - rect.left - sidebarWidth;
+			const contentWidth = Math.max(rect.width - sidebarWidth, 1);
+
+			// Allow dragging outside to 0 or max, but clamp the value
+			const relativeMs = pixelsToValue(clickX);
+			let absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
+
+			// Snap to nearby keyframe if within threshold (150ms)
+			const snapThresholdMs = 150;
+			const nearbyKeyframe = keyframes.find(
+				(kf) =>
+					Math.abs(kf.time - absoluteMs) <= snapThresholdMs &&
+					kf.time >= range.start &&
+					kf.time <= range.end,
+			);
+
+			if (nearbyKeyframe) {
+				absoluteMs = nearbyKeyframe.time;
+			}
+
+			setDragPreviewTimeMs(absoluteMs);
+
+			const visibleMs = range.end - range.start;
+			if (onRangeChange && visibleMs > 0 && videoDurationMs > visibleMs) {
+				const msPerPixel = visibleMs / contentWidth;
+				const overflowLeftPx = Math.max(0, -clickX);
+				const overflowRightPx = Math.max(0, clickX - contentWidth);
+
+				if (overflowLeftPx > 0 && range.start > 0) {
+					const shiftMs = overflowLeftPx * msPerPixel;
+					onRangeChange((previous) => {
+						const nextRange = clampVisibleRange(
+							{
+								start: previous.start - shiftMs,
+								end: previous.end - shiftMs,
+							},
+							videoDurationMs,
+						);
+						return nextRange.start === previous.start && nextRange.end === previous.end
+							? previous
+							: nextRange;
+					});
+				} else if (overflowRightPx > 0 && range.end < videoDurationMs) {
+					const shiftMs = overflowRightPx * msPerPixel;
+					onRangeChange((previous) => {
+						const nextRange = clampVisibleRange(
+							{
+								start: previous.start + shiftMs,
+								end: previous.end + shiftMs,
+							},
+							videoDurationMs,
+						);
+						return nextRange.start === previous.start && nextRange.end === previous.end
+							? previous
+							: nextRange;
+					});
+				}
+			}
+
+			onSeek(absoluteMs / 1000);
+		};
+
+		const handleMouseUp = () => {
+			setIsDragging(false);
+			setDragPreviewTimeMs(null);
+			document.body.style.cursor = "";
+		};
+
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		document.body.style.cursor = "ew-resize";
+
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+			document.body.style.cursor = "";
+		};
+	}, [
+		isDragging,
+		onSeek,
+		onRangeChange,
+		timelineRef,
+		sidebarWidth,
+		range.start,
+		range.end,
+		videoDurationMs,
+		pixelsToValue,
+		keyframes,
+	]);
+
+	const displayTimeMs =
+		isDragging && dragPreviewTimeMs !== null ? dragPreviewTimeMs : currentTimeMs;
+
+	if (videoDurationMs <= 0 || displayTimeMs < 0) {
+		return null;
+	}
+
+	const clampedTime = Math.min(displayTimeMs, videoDurationMs);
+
+	if (clampedTime < range.start || clampedTime > range.end) {
+		return null;
+	}
+
+	const offset = valueToPixels(clampedTime - range.start);
+
+	return (
+		<div
+			className="absolute top-0 bottom-0 z-50 group/cursor"
+			style={{
+				[sideProperty === "right" ? "marginRight" : "marginLeft"]: `${sidebarWidth - 1}px`,
+				pointerEvents: "none", // Allow clicks to pass through to timeline, but we'll enable pointer events on the handle
+			}}
+		>
+			<div
+				className="absolute top-0 bottom-0 w-[2px] bg-[#6C55FF] shadow-[0_0_18px_rgba(108,85,255,0.68)] cursor-ew-resize pointer-events-auto hover:shadow-[0_0_24px_rgba(108,85,255,0.85)] transition-shadow"
+				style={{
+					[sideProperty]: `${offset}px`,
+				}}
+				onMouseDown={(e) => {
+					e.stopPropagation(); // Prevent timeline click
+					setDragPreviewTimeMs(currentTimeMs);
+					setIsDragging(true);
+				}}
+			>
+				<div
+					className="absolute -top-2 left-1/2 -translate-x-1/2 hover:scale-110 transition-transform"
+					style={{ width: "20px", height: "20px" }}
+				>
+					<div className="w-4 h-4 mx-auto mt-[2px] bg-[#6C55FF] rotate-45 rounded-[5px] shadow-lg shadow-[#6C55FF]/30 border border-white/30" />
+				</div>
+				{isDragging && (
+					<div className="absolute -top-6 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded bg-black/80 text-[10px] text-white/90 font-medium tabular-nums whitespace-nowrap border border-white/10 shadow-lg pointer-events-none">
+						{formatPlayheadTime(clampedTime)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function TimelineAxis({
+	videoDurationMs,
+	currentTimeMs,
+}: {
+	videoDurationMs: number;
+	currentTimeMs: number;
+}) {
+	const { sidebarWidth, direction, range, valueToPixels } = useTimelineContext();
+	const sideProperty = direction === "rtl" ? "right" : "left";
+
+	// Recompute axis scale dynamically on every zoom change.
+	const { intervalMs } = useMemo(
+		() => calculateAxisScale(range.end - range.start),
+		[range.end, range.start],
+	);
+
+	const markers = useMemo(() => {
+		if (intervalMs <= 0) {
+			return { markers: [], minorTicks: [] };
+		}
+
+		const maxTime = videoDurationMs > 0 ? videoDurationMs : range.end;
+		const visibleStart = Math.max(0, Math.min(range.start, maxTime));
+		const visibleEnd = Math.min(range.end, maxTime);
+		const markerTimes = new Set<number>();
+
+		const firstMarker = Math.ceil(visibleStart / intervalMs) * intervalMs;
+
+		for (let time = firstMarker; time <= maxTime; time += intervalMs) {
+			if (time >= visibleStart && time <= visibleEnd) {
+				markerTimes.add(Math.round(time));
+			}
+		}
+
+		if (visibleStart <= maxTime) {
+			markerTimes.add(Math.round(visibleStart));
+		}
+
+		if (videoDurationMs > 0) {
+			markerTimes.add(Math.round(videoDurationMs));
+		}
+
+		const sorted = Array.from(markerTimes)
+			.filter((time) => time <= maxTime)
+			.sort((a, b) => a - b);
+
+		// Generate minor ticks (4 ticks between major intervals)
+		const minorTicks = [];
+		const minorInterval = intervalMs / 5;
+
+		for (let time = firstMarker; time <= maxTime; time += minorInterval) {
+			if (time >= visibleStart && time <= visibleEnd) {
+				// Skip if it's close to a major marker
+				const isMajor = Math.abs(time % intervalMs) < 1;
+				if (!isMajor) {
+					minorTicks.push(time);
+				}
+			}
+		}
+
+		return {
+			markers: sorted.map((time) => ({
+				time,
+				label: formatTimeLabel(time, intervalMs),
+			})),
+			minorTicks,
+		};
+	}, [intervalMs, range.end, range.start, videoDurationMs]);
+
+	return (
+		<div
+			className="h-9 bg-[#0c0d10] border-b border-white/[0.07] relative overflow-hidden select-none"
+			style={{
+				[sideProperty === "right" ? "marginRight" : "marginLeft"]: `${sidebarWidth}px`,
+			}}
+		>
+			{/* Minor Ticks */}
+			{markers.minorTicks.map((time) => {
+				const offset = valueToPixels(time - range.start);
+				return (
+					<div
+						key={`minor-${time}`}
+						className="absolute bottom-0 h-1.5 w-[1px] bg-white/[0.07]"
+						style={{ [sideProperty]: `${offset}px` }}
+					/>
+				);
+			})}
+
+			{/* Major Markers */}
+			{markers.markers.map((marker) => {
+				const offset = valueToPixels(marker.time - range.start);
+				const markerStyle: React.CSSProperties = {
+					position: "absolute",
+					bottom: 0,
+					height: "100%",
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "flex-end",
+					[sideProperty]: `${offset}px`,
+				};
+
+				return (
+					<div key={marker.time} style={markerStyle}>
+						<div className="flex flex-col items-center pb-1">
+							<div className="h-2.5 w-[1px] bg-white/20 mb-1" />
+							<span
+								className={cn(
+									"text-[10px] font-medium tabular-nums tracking-tight",
+									marker.time === currentTimeMs ? "text-[#34B27B]" : "text-slate-500",
+								)}
+							>
+								{marker.label}
+							</span>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+function Timeline({
+	items,
+	videoDurationMs,
+	currentTimeMs,
+	onSeek,
+	onRangeChange,
+	onSelectZoom,
+	onSelectTrim,
+	onSelectAnnotation,
+	onSelectBlur,
+	onSelectSpeed,
+	selectedZoomId,
+	selectedTrimId,
+	selectedAnnotationId,
+	selectedBlurId,
+	selectedSpeedId,
+	keyframes = [],
+}: {
+	items: TimelineRenderItem[];
+	videoDurationMs: number;
+	currentTimeMs: number;
+	onSeek?: (time: number) => void;
+	onRangeChange?: (updater: (previous: Range) => Range) => void;
+	onSelectZoom?: (id: string | null) => void;
+	onSelectTrim?: (id: string | null) => void;
+	onSelectAnnotation?: (id: string | null) => void;
+	onSelectBlur?: (id: string | null) => void;
+	onSelectSpeed?: (id: string | null) => void;
+	selectedZoomId: string | null;
+	selectedTrimId?: string | null;
+	selectedAnnotationId?: string | null;
+	selectedBlurId?: string | null;
+	selectedSpeedId?: string | null;
+	keyframes?: { id: string; time: number }[];
+}) {
+	const t = useScopedT("timeline");
+	const { setTimelineRef, style, sidebarWidth, range, pixelsToValue } = useTimelineContext();
+	const localTimelineRef = useRef<HTMLDivElement | null>(null);
+	const isScrubbingTimelineRef = useRef(false);
+	const scrubPointerIdRef = useRef<number | null>(null);
+
+	const setRefs = useCallback(
+		(node: HTMLDivElement | null) => {
+			setTimelineRef(node);
+			localTimelineRef.current = node;
+		},
+		[setTimelineRef],
+	);
+
+	const seekTimelineAtClientX = useCallback(
+		(timelineElement: HTMLDivElement, clientX: number) => {
+			if (!onSeek || videoDurationMs <= 0) return false;
+
+			const rect = timelineElement.getBoundingClientRect();
+			const clickX = clientX - rect.left - sidebarWidth;
+
+			if (clickX < 0) return false;
+
+			const relativeMs = pixelsToValue(clickX);
+			const absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
+
+			onSeek(absoluteMs / 1000);
+			return true;
+		},
+		[onSeek, videoDurationMs, sidebarWidth, pixelsToValue, range.start],
+	);
+
+	const clearTimelineSelection = useCallback(() => {
+		onSelectZoom?.(null);
+		onSelectTrim?.(null);
+		onSelectAnnotation?.(null);
+		onSelectBlur?.(null);
+		onSelectSpeed?.(null);
+	}, [onSelectZoom, onSelectTrim, onSelectAnnotation, onSelectBlur, onSelectSpeed]);
+
+	const handleTimelineClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>) => {
+			// Only clear selection if clicking on empty space (not on items)
+			// This is handled by event propagation - items stop propagation
+			clearTimelineSelection();
+			seekTimelineAtClientX(e.currentTarget, e.clientX);
+		},
+		[clearTimelineSelection, seekTimelineAtClientX],
+	);
+
+	const handleTimelinePointerDown = useCallback(
+		(e: React.PointerEvent<HTMLDivElement>) => {
+			if (!e.isPrimary || (e.pointerType === "mouse" && e.button !== 0)) {
+				return;
+			}
+
+			if (!shouldStartTimelineScrub(e.target, e.currentTarget)) {
+				return;
+			}
+
+			if (!seekTimelineAtClientX(e.currentTarget, e.clientX)) {
+				return;
+			}
+
+			clearTimelineSelection();
+			isScrubbingTimelineRef.current = true;
+			scrubPointerIdRef.current = e.pointerId;
+			e.currentTarget.setPointerCapture(e.pointerId);
+			e.preventDefault();
+		},
+		[clearTimelineSelection, seekTimelineAtClientX],
+	);
+
+	const handleTimelinePointerMove = useCallback(
+		(e: React.PointerEvent<HTMLDivElement>) => {
+			if (!isScrubbingTimelineRef.current || scrubPointerIdRef.current !== e.pointerId) {
+				return;
+			}
+
+			seekTimelineAtClientX(e.currentTarget, e.clientX);
+			e.preventDefault();
+		},
+		[seekTimelineAtClientX],
+	);
+
+	const stopTimelineScrub = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+		if (!isScrubbingTimelineRef.current || scrubPointerIdRef.current !== e.pointerId) {
+			return;
+		}
+
+		isScrubbingTimelineRef.current = false;
+		scrubPointerIdRef.current = null;
+		if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		}
+	}, []);
+
+	const handleTimelinePointerLeave = useCallback(
+		(e: React.PointerEvent<HTMLDivElement>) => {
+			if (isScrubbingTimelineRef.current && scrubPointerIdRef.current === e.pointerId) {
+				seekTimelineAtClientX(e.currentTarget, e.clientX);
+			}
+		},
+		[seekTimelineAtClientX],
+	);
+
+	const handleTimelineLostPointerCapture = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+		if (scrubPointerIdRef.current === e.pointerId) {
+			isScrubbingTimelineRef.current = false;
+			scrubPointerIdRef.current = null;
+		}
+	}, []);
+
+	const handleTimelineWheel = useCallback(
+		(event: React.WheelEvent<HTMLDivElement>) => {
+			if (!onRangeChange || event.ctrlKey || event.metaKey || videoDurationMs <= 0) {
+				return;
+			}
+
+			const visibleMs = range.end - range.start;
+			if (visibleMs <= 0 || videoDurationMs <= visibleMs) {
+				return;
+			}
+
+			const dominantDelta =
+				Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+			if (dominantDelta === 0) {
+				return;
+			}
+
+			event.preventDefault();
+
+			const pageWidthPx = Math.max(event.currentTarget.clientWidth - sidebarWidth, 1);
+			const normalizedDeltaPx = normalizeWheelDelta(dominantDelta, event.deltaMode, pageWidthPx);
+			const shiftMs = pixelsToValue(normalizedDeltaPx);
+
+			onRangeChange((previous) => {
+				const nextRange = clampVisibleRange(
+					{
+						start: previous.start + shiftMs,
+						end: previous.end + shiftMs,
+					},
+					videoDurationMs,
+				);
+
+				return nextRange.start === previous.start && nextRange.end === previous.end
+					? previous
+					: nextRange;
+			});
+		},
+		[onRangeChange, videoDurationMs, range.end, range.start, sidebarWidth, pixelsToValue],
+	);
+
+	const zoomItems = items.filter((item) => item.rowId === ZOOM_ROW_ID);
+	const trimItems = items.filter((item) => item.rowId === TRIM_ROW_ID);
+	const annotationItems = items.filter((item) => item.rowId === ANNOTATION_ROW_ID);
+	const blurItems = items.filter((item) => item.rowId === BLUR_ROW_ID);
+	const speedItems = items.filter((item) => item.rowId === SPEED_ROW_ID);
+
+	return (
+		<div
+			ref={setRefs}
+			style={{ ...style, touchAction: "none" }}
+			className="select-none bg-[#0b0c0f] min-h-[190px] relative cursor-pointer group"
+			onClick={handleTimelineClick}
+			onPointerDown={handleTimelinePointerDown}
+			onPointerMove={handleTimelinePointerMove}
+			onPointerUp={stopTimelineScrub}
+			onPointerCancel={stopTimelineScrub}
+			onPointerLeave={handleTimelinePointerLeave}
+			onLostPointerCapture={handleTimelineLostPointerCapture}
+			onWheel={handleTimelineWheel}
+		>
+			<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px)] bg-[length:24px_100%] pointer-events-none" />
+			<TimelineAxis videoDurationMs={videoDurationMs} currentTimeMs={currentTimeMs} />
+			<PlaybackCursor
+				currentTimeMs={currentTimeMs}
+				videoDurationMs={videoDurationMs}
+				onSeek={onSeek}
+				onRangeChange={onRangeChange}
+				timelineRef={localTimelineRef}
+				keyframes={keyframes}
+			/>
+
+			<Row id={ZOOM_ROW_ID} isEmpty={zoomItems.length === 0} hint={t("hints.pressZoom")}>
+				{zoomItems.map((item) => (
+					<Item
+						id={item.id}
+						key={item.id}
+						rowId={item.rowId}
+						span={item.span}
+						isSelected={item.id === selectedZoomId}
+						onSelect={() => onSelectZoom?.(item.id)}
+						zoomDepth={item.zoomDepth}
+						zoomCustomScale={item.zoomCustomScale}
+						isAutoFocus={item.isAutoFocus}
+						variant="zoom"
+					>
+						{item.label}
+					</Item>
+				))}
+			</Row>
+
+			<Row id={TRIM_ROW_ID} isEmpty={trimItems.length === 0} hint={t("hints.pressTrim")}>
+				{trimItems.map((item) => (
+					<Item
+						id={item.id}
+						key={item.id}
+						rowId={item.rowId}
+						span={item.span}
+						isSelected={item.id === selectedTrimId}
+						onSelect={() => onSelectTrim?.(item.id)}
+						variant="trim"
+					>
+						{item.label}
+					</Item>
+				))}
+			</Row>
+
+			<Row
+				id={ANNOTATION_ROW_ID}
+				isEmpty={annotationItems.length === 0}
+				hint={t("hints.pressAnnotation")}
+			>
+				{annotationItems.map((item) => (
+					<Item
+						id={item.id}
+						key={item.id}
+						rowId={item.rowId}
+						span={item.span}
+						isSelected={item.id === selectedAnnotationId}
+						onSelect={() => onSelectAnnotation?.(item.id)}
+						variant="annotation"
+					>
+						{item.label}
+					</Item>
+				))}
+			</Row>
+
+			<Row id={BLUR_ROW_ID} isEmpty={blurItems.length === 0} hint={t("hints.pressBlur")}>
+				{blurItems.map((item) => (
+					<Item
+						id={item.id}
+						key={item.id}
+						rowId={item.rowId}
+						span={item.span}
+						isSelected={item.id === selectedBlurId}
+						onSelect={() => onSelectBlur?.(item.id)}
+						variant={item.variant}
+					>
+						{item.label}
+					</Item>
+				))}
+			</Row>
+
+			<Row id={SPEED_ROW_ID} isEmpty={speedItems.length === 0} hint={t("hints.pressSpeed")}>
+				{speedItems.map((item) => (
+					<Item
+						id={item.id}
+						key={item.id}
+						rowId={item.rowId}
+						span={item.span}
+						isSelected={item.id === selectedSpeedId}
+						onSelect={() => onSelectSpeed?.(item.id)}
+						variant="speed"
+						speedValue={item.speedValue}
+					>
+						{item.label}
+					</Item>
+				))}
+			</Row>
+		</div>
+	);
+}
+
+export default function TimelineEditor({
+	videoDuration,
+	hasVideoSource = false,
+	currentTime,
+	onSeek,
+	cursorTelemetry = [],
+	zoomRegions,
+	onZoomAdded,
+	onZoomSuggested,
+	onZoomSpanChange,
+	onZoomDelete,
+	selectedZoomId,
+	onSelectZoom,
+	trimRegions = [],
+	onTrimAdded,
+	onTrimSpanChange,
+	onTrimDelete,
+	selectedTrimId,
+	onSelectTrim,
+	annotationRegions = [],
+	onAnnotationAdded,
+	onAnnotationSpanChange,
+	onAnnotationDelete,
+	selectedAnnotationId,
+	onSelectAnnotation,
+	blurRegions = [],
+	onBlurAdded,
+	onBlurSpanChange,
+	onBlurDelete,
+	selectedBlurId,
+	onSelectBlur,
+	speedRegions = [],
+	onSpeedAdded,
+	onSpeedSpanChange,
+	onSpeedDelete,
+	selectedSpeedId,
+	onSelectSpeed,
+	aspectRatio,
+	onAspectRatioChange,
+}: TimelineEditorProps) {
+	const t = useScopedT("timeline");
+	const totalMs = useMemo(() => Math.max(0, Math.round(videoDuration * 1000)), [videoDuration]);
+	const currentTimeMs = useMemo(() => Math.round(currentTime * 1000), [currentTime]);
+	const timelineScale = useMemo(() => calculateTimelineScale(videoDuration), [videoDuration]);
+	const safeMinDurationMs = useMemo(
+		() =>
+			totalMs > 0
+				? Math.min(timelineScale.minItemDurationMs, totalMs)
+				: timelineScale.minItemDurationMs,
+		[timelineScale.minItemDurationMs, totalMs],
+	);
+
+	const [range, setRange] = useState<Range>(() => createInitialRange(totalMs));
+	const [keyframes, setKeyframes] = useState<{ id: string; time: number }[]>([]);
+	const [selectedKeyframeId, setSelectedKeyframeId] = useState<string | null>(null);
+	const [scrollLabels, setScrollLabels] = useState({
+		pan: "Scroll",
+		zoom: "Ctrl + Scroll",
+	});
+	const timelineContainerRef = useRef<HTMLDivElement>(null);
+	const { shortcuts: keyShortcuts, isMac } = useShortcuts();
+
+	useEffect(() => {
+		formatShortcut(["mod", "Scroll"]).then((zoom) => {
+			setScrollLabels({ pan: "Scroll", zoom });
+		});
+	}, []);
+
+	// Add keyframe at current playhead position
+	const addKeyframe = useCallback(() => {
+		if (totalMs === 0) return;
+		const time = Math.max(0, Math.min(currentTimeMs, totalMs));
+		if (keyframes.some((kf) => Math.abs(kf.time - time) < 1)) return;
+		setKeyframes((prev) => [...prev, { id: uuidv4(), time }]);
+	}, [currentTimeMs, totalMs, keyframes]);
+
+	// Delete selected keyframe
+	const deleteSelectedKeyframe = useCallback(() => {
+		if (!selectedKeyframeId) return;
+		setKeyframes((prev) => prev.filter((kf) => kf.id !== selectedKeyframeId));
+		setSelectedKeyframeId(null);
+	}, [selectedKeyframeId]);
+
+	// Move keyframe to new time position
+	const handleKeyframeMove = useCallback(
+		(id: string, newTime: number) => {
+			setKeyframes((prev) =>
+				prev.map((kf) =>
+					kf.id === id ? { ...kf, time: Math.max(0, Math.min(newTime, totalMs)) } : kf,
+				),
+			);
+		},
+		[totalMs],
+	);
+
+	// Delete selected zoom item
+	const deleteSelectedZoom = useCallback(() => {
+		if (!selectedZoomId) return;
+		onZoomDelete(selectedZoomId);
+		onSelectZoom(null);
+	}, [selectedZoomId, onZoomDelete, onSelectZoom]);
+
+	// Delete selected trim item
+	const deleteSelectedTrim = useCallback(() => {
+		if (!selectedTrimId || !onTrimDelete || !onSelectTrim) return;
+		onTrimDelete(selectedTrimId);
+		onSelectTrim(null);
+	}, [selectedTrimId, onTrimDelete, onSelectTrim]);
+
+	const deleteSelectedAnnotation = useCallback(() => {
+		if (!selectedAnnotationId || !onAnnotationDelete || !onSelectAnnotation) return;
+		onAnnotationDelete(selectedAnnotationId);
+		onSelectAnnotation(null);
+	}, [selectedAnnotationId, onAnnotationDelete, onSelectAnnotation]);
+
+	const deleteSelectedBlur = useCallback(() => {
+		if (!selectedBlurId || !onBlurDelete || !onSelectBlur) return;
+		onBlurDelete(selectedBlurId);
+		onSelectBlur(null);
+	}, [selectedBlurId, onBlurDelete, onSelectBlur]);
+
+	const deleteSelectedSpeed = useCallback(() => {
+		if (!selectedSpeedId || !onSpeedDelete || !onSelectSpeed) return;
+		onSpeedDelete(selectedSpeedId);
+		onSelectSpeed(null);
+	}, [selectedSpeedId, onSpeedDelete, onSelectSpeed]);
+
+	useEffect(() => {
+		setRange(createInitialRange(totalMs));
+	}, [totalMs]);
+
+	// Normalize regions only when timeline bounds change (not on every region edit).
+	// Using refs to read current regions avoids a dependency-loop that re-fires
+	// this effect on every drag/resize and races with dnd-timeline's internal state.
+	const zoomRegionsRef = useRef(zoomRegions);
+	const trimRegionsRef = useRef(trimRegions);
+	const speedRegionsRef = useRef(speedRegions);
+	zoomRegionsRef.current = zoomRegions;
+	trimRegionsRef.current = trimRegions;
+	speedRegionsRef.current = speedRegions;
+
+	useEffect(() => {
+		if (totalMs === 0 || safeMinDurationMs <= 0) {
+			return;
+		}
+
+		zoomRegionsRef.current.forEach((region) => {
+			const clampedStart = Math.max(0, Math.min(region.startMs, totalMs));
+			const minEnd = clampedStart + safeMinDurationMs;
+			const clampedEnd = Math.min(totalMs, Math.max(minEnd, region.endMs));
+			const normalizedStart = Math.max(0, Math.min(clampedStart, totalMs - safeMinDurationMs));
+			const normalizedEnd = Math.max(minEnd, Math.min(clampedEnd, totalMs));
+
+			if (normalizedStart !== region.startMs || normalizedEnd !== region.endMs) {
+				onZoomSpanChange(region.id, { start: normalizedStart, end: normalizedEnd });
+			}
+		});
+
+		trimRegionsRef.current.forEach((region) => {
+			const clampedStart = Math.max(0, Math.min(region.startMs, totalMs));
+			const minEnd = clampedStart + safeMinDurationMs;
+			const clampedEnd = Math.min(totalMs, Math.max(minEnd, region.endMs));
+			const normalizedStart = Math.max(0, Math.min(clampedStart, totalMs - safeMinDurationMs));
+			const normalizedEnd = Math.max(minEnd, Math.min(clampedEnd, totalMs));
+
+			if (normalizedStart !== region.startMs || normalizedEnd !== region.endMs) {
+				onTrimSpanChange?.(region.id, { start: normalizedStart, end: normalizedEnd });
+			}
+		});
+
+		speedRegionsRef.current.forEach((region) => {
+			const clampedStart = Math.max(0, Math.min(region.startMs, totalMs));
+			const minEnd = clampedStart + safeMinDurationMs;
+			const clampedEnd = Math.min(totalMs, Math.max(minEnd, region.endMs));
+			const normalizedStart = Math.max(0, Math.min(clampedStart, totalMs - safeMinDurationMs));
+			const normalizedEnd = Math.max(minEnd, Math.min(clampedEnd, totalMs));
+
+			if (normalizedStart !== region.startMs || normalizedEnd !== region.endMs) {
+				onSpeedSpanChange?.(region.id, { start: normalizedStart, end: normalizedEnd });
+			}
+		});
+		// Only re-run when the timeline scale changes, not on every region edit
+	}, [totalMs, safeMinDurationMs, onZoomSpanChange, onTrimSpanChange, onSpeedSpanChange]);
+
+	const hasOverlap = useCallback(
+		(newSpan: Span, excludeId?: string): boolean => {
+			// Determine which row the item belongs to
+			const isZoomItem = zoomRegions.some((r) => r.id === excludeId);
+			const isTrimItem = trimRegions.some((r) => r.id === excludeId);
+			const isAnnotationItem = annotationRegions.some((r) => r.id === excludeId);
+			const isBlurItem = blurRegions.some((r) => r.id === excludeId);
+			const isSpeedItem = speedRegions.some((r) => r.id === excludeId);
+
+			if (isAnnotationItem || isBlurItem) {
+				return false;
+			}
+
+			// Helper to check overlap against a specific set of regions
+			const checkOverlap = (regions: (ZoomRegion | TrimRegion | SpeedRegion)[]) => {
+				return regions.some((region) => {
+					if (region.id === excludeId) return false;
+					// True overlap: regions actually intersect (not just adjacent)
+					return newSpan.end > region.startMs && newSpan.start < region.endMs;
+				});
+			};
+
+			if (isZoomItem) {
+				return checkOverlap(zoomRegions);
+			}
+
+			if (isTrimItem) {
+				return checkOverlap(trimRegions);
+			}
+
+			if (isSpeedItem) {
+				return checkOverlap(speedRegions);
+			}
+
+			return false;
+		},
+		[zoomRegions, trimRegions, annotationRegions, blurRegions, speedRegions],
+	);
+
+	// At least 5% of the timeline or 1000ms, whichever is larger, so the region
+	// is always wide enough to grab and resize comfortably.
+	const defaultRegionDurationMs = useMemo(
+		() => Math.max(1000, Math.round(totalMs * 0.05)),
+		[totalMs],
+	);
+
+	const handleAddZoom = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0) {
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		// Always place zoom at playhead
+		const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+		// Find the next zoom region after the playhead
+		const sorted = [...zoomRegions].sort((a, b) => a.startMs - b.startMs);
+		const nextRegion = sorted.find((region) => region.startMs > startPos);
+		const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
+
+		// Check if playhead is inside any zoom region
+		const isOverlapping = sorted.some(
+			(region) => startPos >= region.startMs && startPos < region.endMs,
+		);
+		if (isOverlapping || gapToNext <= 0) {
+			toast.error(t("errors.cannotPlaceZoom"), {
+				description: t("errors.zoomExistsAtLocation"),
+			});
+			return;
+		}
+
+		const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
+		onZoomAdded({ start: startPos, end: startPos + actualDuration });
+	}, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded, defaultRegionDurationMs, t]);
+
+	const handleSuggestZooms = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0) {
+			return;
+		}
+
+		if (!onZoomSuggested) {
+			toast.error(t("errors.zoomSuggestionUnavailable"));
+			return;
+		}
+
+		if (cursorTelemetry.length < 2) {
+			toast.info(t("errors.noCursorTelemetry"), {
+				description: t("errors.noCursorTelemetryDescription"),
+			});
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		const reservedSpans = [...zoomRegions]
+			.map((region) => ({ start: region.startMs, end: region.endMs }))
+			.sort((a, b) => a.start - b.start);
+
+		const normalizedSamples = normalizeCursorTelemetry(cursorTelemetry, totalMs);
+
+		if (normalizedSamples.length < 2) {
+			toast.info(t("errors.noUsableTelemetry"), {
+				description: t("errors.noUsableTelemetryDescription"),
+			});
+			return;
+		}
+
+		const dwellCandidates = detectZoomDwellCandidates(normalizedSamples);
+
+		if (dwellCandidates.length === 0) {
+			toast.info(t("errors.noDwellMoments"), {
+				description: t("errors.noDwellMomentsDescription"),
+			});
+			return;
+		}
+
+		const sortedCandidates = [...dwellCandidates].sort((a, b) => b.strength - a.strength);
+		const acceptedCenters: number[] = [];
+
+		let addedCount = 0;
+
+		sortedCandidates.forEach((candidate) => {
+			const tooCloseToAccepted = acceptedCenters.some(
+				(center) => Math.abs(center - candidate.centerTimeMs) < SUGGESTION_SPACING_MS,
+			);
+
+			if (tooCloseToAccepted) {
+				return;
+			}
+
+			const centeredStart = Math.round(candidate.centerTimeMs - defaultDuration / 2);
+			const candidateStart = Math.max(0, Math.min(centeredStart, totalMs - defaultDuration));
+			const candidateEnd = candidateStart + defaultDuration;
+			const hasOverlap = reservedSpans.some(
+				(span) => candidateEnd > span.start && candidateStart < span.end,
+			);
+
+			if (hasOverlap) {
+				return;
+			}
+
+			reservedSpans.push({ start: candidateStart, end: candidateEnd });
+			acceptedCenters.push(candidate.centerTimeMs);
+			onZoomSuggested({ start: candidateStart, end: candidateEnd }, candidate.focus);
+			addedCount += 1;
+		});
+
+		if (addedCount === 0) {
+			toast.info(t("errors.noAutoZoomSlots"), {
+				description: t("errors.noAutoZoomSlotsDescription"),
+			});
+			return;
+		}
+
+		toast.success(
+			addedCount === 1
+				? t("success.addedZoomSuggestions", { count: String(addedCount) })
+				: t("success.addedZoomSuggestionsPlural", { count: String(addedCount) }),
+		);
+	}, [
+		videoDuration,
+		totalMs,
+		defaultRegionDurationMs,
+		zoomRegions,
+		onZoomSuggested,
+		cursorTelemetry,
+		t,
+	]);
+
+	const handleAddTrim = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onTrimAdded) {
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		// Always place trim at playhead
+		const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+		// Find the next trim region after the playhead
+		const sorted = [...trimRegions].sort((a, b) => a.startMs - b.startMs);
+		const nextRegion = sorted.find((region) => region.startMs > startPos);
+		const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
+
+		// Check if playhead is inside any trim region
+		const isOverlapping = sorted.some(
+			(region) => startPos >= region.startMs && startPos < region.endMs,
+		);
+		if (isOverlapping || gapToNext <= 0) {
+			toast.error(t("errors.cannotPlaceTrim"), {
+				description: t("errors.trimExistsAtLocation"),
+			});
+			return;
+		}
+
+		const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
+		onTrimAdded({ start: startPos, end: startPos + actualDuration });
+	}, [videoDuration, totalMs, currentTimeMs, trimRegions, onTrimAdded, defaultRegionDurationMs, t]);
+
+	const handleAddSpeed = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onSpeedAdded) {
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		// Always place speed region at playhead
+		const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+		// Find the next speed region after the playhead
+		const sorted = [...speedRegions].sort((a, b) => a.startMs - b.startMs);
+		const nextRegion = sorted.find((region) => region.startMs > startPos);
+		const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
+
+		// Check if playhead is inside any speed region
+		const isOverlapping = sorted.some(
+			(region) => startPos >= region.startMs && startPos < region.endMs,
+		);
+		if (isOverlapping || gapToNext <= 0) {
+			toast.error(t("errors.cannotPlaceSpeed"), {
+				description: t("errors.speedExistsAtLocation"),
+			});
+			return;
+		}
+
+		const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
+		onSpeedAdded({ start: startPos, end: startPos + actualDuration });
+	}, [
+		videoDuration,
+		totalMs,
+		currentTimeMs,
+		speedRegions,
+		onSpeedAdded,
+		defaultRegionDurationMs,
+		t,
+	]);
+
+	const handleAddAnnotation = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onAnnotationAdded) {
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		// Multiple annotations can exist at the same timestamp
+		const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+		const endPos = Math.min(startPos + defaultDuration, totalMs);
+
+		onAnnotationAdded({ start: startPos, end: endPos });
+	}, [videoDuration, totalMs, currentTimeMs, onAnnotationAdded, defaultRegionDurationMs]);
+
+	const handleAddBlur = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onBlurAdded) {
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+		const endPos = Math.min(startPos + defaultDuration, totalMs);
+		onBlurAdded({ start: startPos, end: endPos });
+	}, [videoDuration, totalMs, currentTimeMs, onBlurAdded, defaultRegionDurationMs]);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+				return;
+			}
+
+			if (matchesShortcut(e, keyShortcuts.addKeyframe, isMac)) {
+				addKeyframe();
+			}
+			if (matchesShortcut(e, keyShortcuts.addZoom, isMac)) {
+				handleAddZoom();
+			}
+			if (matchesShortcut(e, keyShortcuts.addTrim, isMac)) {
+				handleAddTrim();
+			}
+			if (matchesShortcut(e, keyShortcuts.addAnnotation, isMac)) {
+				handleAddAnnotation();
+			}
+			if (matchesShortcut(e, keyShortcuts.addBlur, isMac)) {
+				handleAddBlur();
+			}
+			if (matchesShortcut(e, keyShortcuts.addSpeed, isMac)) {
+				handleAddSpeed();
+			}
+
+			// Tab: Cycle through overlapping annotations at current time
+			if (e.key === "Tab" && annotationRegions.length > 0) {
+				const currentTimeMs = Math.round(currentTime * 1000);
+				const overlapping = annotationRegions
+					.filter((a) => currentTimeMs >= a.startMs && currentTimeMs <= a.endMs)
+					.sort((a, b) => a.zIndex - b.zIndex); // Sort by z-index
+
+				if (overlapping.length > 0) {
+					e.preventDefault();
+
+					if (!selectedAnnotationId || !overlapping.some((a) => a.id === selectedAnnotationId)) {
+						onSelectAnnotation?.(overlapping[0].id);
+					} else {
+						// Cycle to next annotation
+						const currentIndex = overlapping.findIndex((a) => a.id === selectedAnnotationId);
+						const nextIndex = e.shiftKey
+							? (currentIndex - 1 + overlapping.length) % overlapping.length // Shift+Tab = backward
+							: (currentIndex + 1) % overlapping.length; // Tab = forward
+						onSelectAnnotation?.(overlapping[nextIndex].id);
+					}
+				}
+			}
+			// Delete key or Ctrl+D / Cmd+D
+			if (
+				e.key === "Delete" ||
+				e.key === "Backspace" ||
+				matchesShortcut(e, keyShortcuts.deleteSelected, isMac)
+			) {
+				if (selectedKeyframeId) {
+					deleteSelectedKeyframe();
+				} else if (selectedZoomId) {
+					deleteSelectedZoom();
+				} else if (selectedTrimId) {
+					deleteSelectedTrim();
+				} else if (selectedAnnotationId) {
+					deleteSelectedAnnotation();
+				} else if (selectedBlurId) {
+					deleteSelectedBlur();
+				} else if (selectedSpeedId) {
+					deleteSelectedSpeed();
+				}
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		addKeyframe,
+		handleAddZoom,
+		handleAddTrim,
+		handleAddAnnotation,
+		handleAddBlur,
+		handleAddSpeed,
+		deleteSelectedKeyframe,
+		deleteSelectedZoom,
+		deleteSelectedTrim,
+		deleteSelectedAnnotation,
+		deleteSelectedBlur,
+		deleteSelectedSpeed,
+		selectedKeyframeId,
+		selectedZoomId,
+		selectedTrimId,
+		selectedAnnotationId,
+		selectedBlurId,
+		selectedSpeedId,
+		annotationRegions,
+		currentTime,
+		onSelectAnnotation,
+		keyShortcuts,
+		isMac,
+	]);
+
+	const clampedRange = useMemo<Range>(() => {
+		if (totalMs === 0) {
+			return range;
+		}
+
+		return {
+			start: Math.max(0, Math.min(range.start, totalMs)),
+			end: Math.min(range.end, totalMs),
+		};
+	}, [range, totalMs]);
+
+	const timelineItems = useMemo<TimelineRenderItem[]>(() => {
+		const zooms: TimelineRenderItem[] = zoomRegions.map((region, index) => ({
+			id: region.id,
+			rowId: ZOOM_ROW_ID,
+			span: { start: region.startMs, end: region.endMs },
+			label: t("labels.zoomItem", { index: String(index + 1) }),
+			zoomDepth: region.depth,
+			zoomCustomScale: region.customScale,
+			isAutoFocus: region.focusMode === "auto",
+			variant: "zoom",
+		}));
+
+		const trims: TimelineRenderItem[] = trimRegions.map((region, index) => ({
+			id: region.id,
+			rowId: TRIM_ROW_ID,
+			span: { start: region.startMs, end: region.endMs },
+			label: t("labels.trimItem", { index: String(index + 1) }),
+			variant: "trim",
+		}));
+
+		const annotations: TimelineRenderItem[] = annotationRegions.map((region) => {
+			let label: string;
+
+			if (region.type === "text") {
+				// Show text preview
+				const preview = region.content.trim() || t("labels.emptyText");
+				label = preview.length > 20 ? `${preview.substring(0, 20)}...` : preview;
+			} else if (region.type === "image") {
+				label = t("labels.imageItem");
+			} else {
+				label = t("labels.annotationItem");
+			}
+
+			return {
+				id: region.id,
+				rowId: ANNOTATION_ROW_ID,
+				span: { start: region.startMs, end: region.endMs },
+				label,
+				variant: "annotation",
+			};
+		});
+
+		const blurs: TimelineRenderItem[] = blurRegions.map((region, index) => ({
+			id: region.id,
+			rowId: BLUR_ROW_ID,
+			span: { start: region.startMs, end: region.endMs },
+			label: t("labels.blurItem", { index: String(index + 1) }),
+			variant: "blur",
+		}));
+
+		const speeds: TimelineRenderItem[] = speedRegions.map((region, index) => ({
+			id: region.id,
+			rowId: SPEED_ROW_ID,
+			span: { start: region.startMs, end: region.endMs },
+			label: t("labels.speedItem", { index: String(index + 1) }),
+			speedValue: region.speed,
+			variant: "speed",
+		}));
+
+		return [...zooms, ...trims, ...annotations, ...blurs, ...speeds];
+	}, [zoomRegions, trimRegions, annotationRegions, blurRegions, speedRegions, t]);
+
+	// Flat list of all non-annotation region spans for neighbour-clamping during drag/resize
+	const allRegionSpans = useMemo(() => {
+		const zooms = zoomRegions.map((r) => ({ id: r.id, start: r.startMs, end: r.endMs }));
+		const trims = trimRegions.map((r) => ({ id: r.id, start: r.startMs, end: r.endMs }));
+		const speeds = speedRegions.map((r) => ({ id: r.id, start: r.startMs, end: r.endMs }));
+		return [...zooms, ...trims, ...speeds];
+	}, [zoomRegions, trimRegions, speedRegions]);
+
+	const handleItemSpanChange = useCallback(
+		(id: string, span: Span) => {
+			// Check if it's a zoom, trim, speed, or annotation item
+			if (zoomRegions.some((r) => r.id === id)) {
+				onZoomSpanChange(id, span);
+			} else if (trimRegions.some((r) => r.id === id)) {
+				onTrimSpanChange?.(id, span);
+			} else if (speedRegions.some((r) => r.id === id)) {
+				onSpeedSpanChange?.(id, span);
+			} else if (annotationRegions.some((r) => r.id === id)) {
+				onAnnotationSpanChange?.(id, span);
+			} else if (blurRegions.some((r) => r.id === id)) {
+				onBlurSpanChange?.(id, span);
+			}
+		},
+		[
+			zoomRegions,
+			trimRegions,
+			speedRegions,
+			annotationRegions,
+			blurRegions,
+			onZoomSpanChange,
+			onTrimSpanChange,
+			onSpeedSpanChange,
+			onAnnotationSpanChange,
+			onBlurSpanChange,
+		],
+	);
+
+	if (!videoDuration || videoDuration === 0) {
+		return (
+			<div className="flex-1 flex flex-col items-center justify-center rounded-lg bg-[#09090b] gap-3">
+				<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center">
+					<Plus className="w-6 h-6 text-slate-600" />
+				</div>
+				<div className="text-center">
+					<p className="text-sm font-medium text-slate-300">
+						{hasVideoSource ? "Loading Timeline" : "No Video Loaded"}
+					</p>
+					<p className="text-xs text-slate-500 mt-1">
+						{hasVideoSource
+							? "Video opened, waiting for duration metadata"
+							: "Drag and drop a video to start editing"}
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex-1 min-h-0 flex flex-col bg-[#09090b] overflow-hidden">
+			<div className="flex items-center gap-2 px-3 py-1.5 border-b border-white/[0.06] bg-[#08090b]/95">
+				<div className="flex items-center gap-0.5 rounded-xl border border-white/[0.06] bg-white/[0.025] p-0.5">
+					<Button
+						onClick={handleAddZoom}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
+						title={t("buttons.addZoom")}
+					>
+						<ZoomIn className="w-4 h-4" />
+					</Button>
+					<Button
+						onClick={handleSuggestZooms}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
+						title={t("buttons.suggestZooms")}
+					>
+						<WandSparkles className="w-4 h-4" />
+					</Button>
+					<Button
+						onClick={handleAddTrim}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#ef4444] hover:bg-[#ef4444]/10 transition-all"
+						title={t("buttons.addTrim")}
+					>
+						<Scissors className="w-4 h-4" />
+					</Button>
+					<Button
+						onClick={handleAddAnnotation}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#B4A046] hover:bg-[#B4A046]/10 transition-all"
+						title={t("buttons.addAnnotation")}
+					>
+						<MessageSquare className="w-4 h-4" />
+					</Button>
+					<Button
+						onClick={handleAddBlur}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#7dd3fc] hover:bg-[#7dd3fc]/10 transition-all"
+						title={t("buttons.addBlur")}
+					>
+						<svg
+							className="w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+						>
+							<circle cx="8" cy="12" r="3" />
+							<circle cx="16" cy="12" r="3" />
+							<path d="M6 6h12M6 18h12" />
+						</svg>
+					</Button>
+					<Button
+						onClick={handleAddSpeed}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#d97706] hover:bg-[#d97706]/10 transition-all"
+						title={t("buttons.addSpeed")}
+					>
+						<Gauge className="w-4 h-4" />
+					</Button>
+				</div>
+				<div className="flex items-center gap-1.5 min-w-0">
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button
+								variant="ghost"
+								size="sm"
+								className="h-7 px-2 rounded-lg text-[11px] text-slate-400 hover:text-slate-200 hover:bg-white/[0.07] transition-all gap-1"
+							>
+								<span className="font-medium">{getAspectRatioLabel(aspectRatio)}</span>
+								<ChevronDown className="w-3 h-3" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" className="bg-[#1a1a1a] border-white/10">
+							{ASPECT_RATIOS.map((ratio) => (
+								<DropdownMenuItem
+									key={ratio}
+									onClick={() => onAspectRatioChange(ratio)}
+									className="text-slate-300 hover:text-white hover:bg-white/10 cursor-pointer flex items-center justify-between gap-3"
+								>
+									<span>{getAspectRatioLabel(ratio)}</span>
+									{aspectRatio === ratio && <Check className="w-3 h-3 text-[#34B27B]" />}
+								</DropdownMenuItem>
+							))}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+				<div className="flex-1" />
+				<div className="hidden md:flex items-center gap-3 text-[10px] text-slate-500 font-medium">
+					<span className="flex items-center gap-1.5">
+						<kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">
+							{scrollLabels.pan}
+						</kbd>
+						<span>{t("labels.pan")}</span>
+					</span>
+					<span className="flex items-center gap-1.5">
+						<kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">
+							{scrollLabels.zoom}
+						</kbd>
+						<span>{t("labels.zoom")}</span>
+					</span>
+				</div>
+			</div>
+			<div
+				ref={timelineContainerRef}
+				className="flex-1 min-h-0 overflow-auto custom-scrollbar bg-[#09090b] relative"
+				onClick={() => setSelectedKeyframeId(null)}
+			>
+				<TimelineWrapper
+					range={clampedRange}
+					videoDuration={videoDuration}
+					hasOverlap={hasOverlap}
+					onRangeChange={setRange}
+					minItemDurationMs={timelineScale.minItemDurationMs}
+					minVisibleRangeMs={timelineScale.minVisibleRangeMs}
+					onItemSpanChange={handleItemSpanChange}
+					allRegionSpans={allRegionSpans}
+				>
+					<KeyframeMarkers
+						keyframes={keyframes}
+						selectedKeyframeId={selectedKeyframeId}
+						setSelectedKeyframeId={setSelectedKeyframeId}
+						onKeyframeMove={handleKeyframeMove}
+						videoDurationMs={totalMs}
+						timelineRef={timelineContainerRef}
+					/>
+					<Timeline
+						items={timelineItems}
+						videoDurationMs={totalMs}
+						currentTimeMs={currentTimeMs}
+						onSeek={onSeek}
+						onRangeChange={setRange}
+						onSelectZoom={onSelectZoom}
+						onSelectTrim={onSelectTrim}
+						onSelectAnnotation={onSelectAnnotation}
+						onSelectBlur={onSelectBlur}
+						onSelectSpeed={onSelectSpeed}
+						selectedZoomId={selectedZoomId}
+						selectedTrimId={selectedTrimId}
+						selectedAnnotationId={selectedAnnotationId}
+						selectedBlurId={selectedBlurId}
+						selectedSpeedId={selectedSpeedId}
+						keyframes={keyframes}
+					/>
+				</TimelineWrapper>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/video-editor/timeline/TimelineWrapper.tsx b/src/components/video-editor/timeline/TimelineWrapper.tsx
new file mode 100644
index 0000000..4c668f0
--- /dev/null
+++ b/src/components/video-editor/timeline/TimelineWrapper.tsx
@@ -0,0 +1,317 @@
+import type {
+	DragEndEvent,
+	DragMoveEvent,
+	DragStartEvent,
+	Range,
+	ResizeEndEvent,
+	ResizeMoveEvent,
+	Span,
+} from "dnd-timeline";
+import { TimelineContext } from "dnd-timeline";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import { useCallback, useRef } from "react";
+
+interface TimelineWrapperProps {
+	children: ReactNode;
+	range: Range;
+	videoDuration: number;
+	hasOverlap: (newSpan: Span, excludeId?: string) => boolean;
+	onRangeChange: Dispatch<SetStateAction<Range>>;
+	minItemDurationMs: number;
+	minVisibleRangeMs: number;
+	gridSizeMs?: number;
+	onItemSpanChange: (id: string, span: Span) => void;
+	allRegionSpans?: { id: string; start: number; end: number }[];
+}
+
+export default function TimelineWrapper({
+	children,
+	range,
+	videoDuration,
+	hasOverlap,
+	onRangeChange,
+	minItemDurationMs,
+	minVisibleRangeMs,
+	gridSizeMs: _gridSizeMs,
+	onItemSpanChange,
+	allRegionSpans = [],
+}: TimelineWrapperProps) {
+	const totalMs = Math.max(0, Math.round(videoDuration * 1000));
+
+	const clampSpanToBounds = useCallback(
+		(span: Span): Span => {
+			const rawDuration = Math.max(span.end - span.start, 0);
+			const normalizedStart = Number.isFinite(span.start) ? span.start : 0;
+
+			if (totalMs === 0) {
+				const minDuration = Math.max(minItemDurationMs, 1);
+				const duration = Math.max(rawDuration, minDuration);
+				const start = Math.max(0, normalizedStart);
+				return {
+					start,
+					end: start + duration,
+				};
+			}
+
+			const minDuration = Math.min(Math.max(minItemDurationMs, 1), totalMs);
+			const duration = Math.min(Math.max(rawDuration, minDuration), totalMs);
+
+			const start = Math.max(0, Math.min(normalizedStart, totalMs - duration));
+			const end = Math.min(start + duration, totalMs);
+
+			return { start, end };
+		},
+		[minItemDurationMs, totalMs],
+	);
+
+	const clampRange = useCallback(
+		(candidate: Range): Range => {
+			if (totalMs === 0) {
+				const minSpan = Math.max(minVisibleRangeMs, 1);
+				const span = Math.max(candidate.end - candidate.start, minSpan);
+				const start = Math.max(0, Math.min(candidate.start, candidate.end - span));
+				return { start, end: start + span };
+			}
+
+			const rawStart = Math.max(0, candidate.start);
+			const rawEnd = candidate.end;
+			const clampedEnd = Math.min(rawEnd, totalMs);
+
+			const minSpan = Math.min(Math.max(minVisibleRangeMs, 1), totalMs);
+			const desiredSpan = clampedEnd - rawStart;
+			const span = Math.min(Math.max(desiredSpan, minSpan), totalMs);
+
+			let finalStart = rawStart;
+			let finalEnd = finalStart + span;
+
+			if (finalEnd > totalMs) {
+				finalEnd = totalMs;
+				finalStart = Math.max(0, finalEnd - span);
+			}
+
+			return { start: finalStart, end: finalEnd };
+		},
+		[minVisibleRangeMs, totalMs],
+	);
+
+	// When a span overlaps neighbours, clamp it to the nearest boundary
+	const clampToNeighbours = useCallback(
+		(span: Span, activeItemId: string): Span => {
+			const siblings = allRegionSpans.filter((r) => r.id !== activeItemId);
+			let { start, end } = span;
+
+			for (const r of siblings) {
+				// Span's right edge crossed into a region to the right
+				if (end > r.start && start < r.start) {
+					end = r.start;
+				}
+				// Span's left edge crossed into a region to the left
+				if (start < r.end && end > r.end) {
+					start = r.end;
+				}
+			}
+
+			// Ensure minimum duration after clamping
+			const minDur = Math.min(minItemDurationMs, totalMs || minItemDurationMs);
+			if (end - start < minDur) {
+				// Try extending in the direction that has room
+				if (end + minDur - (end - start) <= totalMs) {
+					end = start + minDur;
+				} else {
+					start = end - minDur;
+				}
+			}
+
+			return { start: Math.max(0, start), end: Math.min(end, totalMs || end) };
+		},
+		[allRegionSpans, minItemDurationMs, totalMs],
+	);
+
+	const onResizeEnd = useCallback(
+		(event: ResizeEndEvent) => {
+			const updatedSpan = event.active.data.current.getSpanFromResizeEvent?.(event);
+			if (!updatedSpan) return;
+
+			const activeItemId = event.active.id as string;
+			let clampedSpan = clampSpanToBounds(updatedSpan);
+
+			const effectiveMinDuration =
+				totalMs > 0 ? Math.min(minItemDurationMs, totalMs) : minItemDurationMs;
+			if (clampedSpan.end - clampedSpan.start < effectiveMinDuration) {
+				return;
+			}
+
+			// Clamp to neighbour boundaries instead of rejecting
+			if (hasOverlap(clampedSpan, activeItemId)) {
+				clampedSpan = clampToNeighbours(clampedSpan, activeItemId);
+				// If still overlapping after clamping, fall back to original position
+				if (hasOverlap(clampedSpan, activeItemId)) {
+					return;
+				}
+			}
+
+			onItemSpanChange(activeItemId, clampedSpan);
+		},
+		[
+			clampSpanToBounds,
+			clampToNeighbours,
+			hasOverlap,
+			minItemDurationMs,
+			onItemSpanChange,
+			totalMs,
+		],
+	);
+
+	const onDragEnd = useCallback(
+		(event: DragEndEvent) => {
+			const activeRowId = event.over?.id as string;
+			const updatedSpan = event.active.data.current.getSpanFromDragEvent?.(event);
+			if (!updatedSpan || !activeRowId) return;
+
+			const activeItemId = event.active.id as string;
+			let clampedSpan = clampSpanToBounds(updatedSpan);
+
+			// Clamp to neighbour boundaries instead of rejecting
+			if (hasOverlap(clampedSpan, activeItemId)) {
+				clampedSpan = clampToNeighbours(clampedSpan, activeItemId);
+				if (hasOverlap(clampedSpan, activeItemId)) {
+					return;
+				}
+			}
+
+			onItemSpanChange(activeItemId, clampedSpan);
+		},
+		[clampSpanToBounds, clampToNeighbours, hasOverlap, onItemSpanChange],
+	);
+
+	// Drag/resize tooltip (direct DOM updates, no re-renders)
+	const tooltipRef = useRef<HTMLDivElement>(null);
+
+	const formatTooltipMs = useCallback((ms: number) => {
+		const s = ms / 1000;
+		const min = Math.floor(s / 60);
+		const sec = s % 60;
+		return min > 0 ? `${min}:${sec.toFixed(1).padStart(4, "0")}` : `${sec.toFixed(1)}s`;
+	}, []);
+
+	const showTooltip = useCallback(
+		(span: { start: number; end: number } | null, screenX?: number) => {
+			const el = tooltipRef.current;
+			if (!el) return;
+			if (!span) {
+				el.style.opacity = "0";
+				return;
+			}
+			el.textContent = `${formatTooltipMs(span.start)} – ${formatTooltipMs(span.end)}`;
+			el.style.opacity = "1";
+			if (screenX !== undefined) {
+				const parent = el.parentElement;
+				if (parent) {
+					const rect = parent.getBoundingClientRect();
+					const x = Math.max(0, Math.min(screenX - rect.left, rect.width - 100));
+					el.style.left = `${x}px`;
+				}
+			}
+		},
+		[formatTooltipMs],
+	);
+
+	const onDragStart = useCallback(
+		(event: DragStartEvent) => {
+			const span = event.active.data.current.getSpanFromDragEvent?.(event);
+			if (span) showTooltip(span);
+		},
+		[showTooltip],
+	);
+
+	const onDragMove = useCallback(
+		(event: DragMoveEvent) => {
+			const span = event.active.data.current.getSpanFromDragEvent?.(event);
+			const screenX =
+				event.activatorEvent && "clientX" in event.activatorEvent
+					? (event.activatorEvent as PointerEvent).clientX + (event.delta?.x ?? 0)
+					: undefined;
+			if (span) showTooltip(span, screenX);
+		},
+		[showTooltip],
+	);
+
+	const onResizeMove = useCallback(
+		(event: ResizeMoveEvent) => {
+			const span = event.active.data.current.getSpanFromResizeEvent?.(event);
+			const screenX =
+				event.activatorEvent && "clientX" in event.activatorEvent
+					? (event.activatorEvent as PointerEvent).clientX + (event.delta?.x ?? 0)
+					: undefined;
+			if (span) showTooltip(span, screenX);
+		},
+		[showTooltip],
+	);
+
+	const hideTooltip = useCallback(() => showTooltip(null), [showTooltip]);
+
+	const onResizeEndWithTooltip = useCallback(
+		(event: ResizeEndEvent) => {
+			hideTooltip();
+			onResizeEnd(event);
+		},
+		[hideTooltip, onResizeEnd],
+	);
+
+	const onDragEndWithTooltip = useCallback(
+		(event: DragEndEvent) => {
+			hideTooltip();
+			onDragEnd(event);
+		},
+		[hideTooltip, onDragEnd],
+	);
+
+	const handleRangeChange = useCallback(
+		(updater: (previous: Range) => Range) => {
+			onRangeChange((prev) => {
+				const normalized = totalMs > 0 ? clampRange(prev) : prev;
+				const desired = updater(normalized);
+
+				if (totalMs > 0) {
+					const clamped = clampRange(desired);
+
+					if (clamped.end > totalMs) {
+						const span = Math.min(clamped.end - clamped.start, totalMs);
+						return {
+							start: Math.max(0, totalMs - span),
+							end: totalMs,
+						};
+					}
+
+					return clamped;
+				}
+
+				return desired;
+			});
+		},
+		[clampRange, onRangeChange, totalMs],
+	);
+
+	return (
+		<TimelineContext
+			range={range}
+			onRangeChanged={handleRangeChange}
+			onResizeEnd={onResizeEndWithTooltip}
+			onResizeMove={onResizeMove}
+			onDragStart={onDragStart}
+			onDragMove={onDragMove}
+			onDragEnd={onDragEndWithTooltip}
+			autoScroll={{ enabled: false }}
+		>
+			<div className="relative">
+				{children}
+				{/* Floating tooltip shown during drag/resize */}
+				<div
+					ref={tooltipRef}
+					className="absolute top-1 pointer-events-none z-[60] px-1.5 py-0.5 rounded bg-black/80 text-[10px] text-white/90 font-medium tabular-nums whitespace-nowrap border border-white/10 shadow-lg"
+					style={{ opacity: 0, transition: "opacity 0.1s" }}
+				/>
+			</div>
+		</TimelineContext>
+	);
+}
diff --git a/src/components/video-editor/timeline/zoomSuggestionUtils.ts b/src/components/video-editor/timeline/zoomSuggestionUtils.ts
new file mode 100644
index 0000000..9f807d3
--- /dev/null
+++ b/src/components/video-editor/timeline/zoomSuggestionUtils.ts
@@ -0,0 +1,81 @@
+import type { CursorTelemetryPoint, ZoomFocus } from "../types";
+
+export const MIN_DWELL_DURATION_MS = 450;
+export const MAX_DWELL_DURATION_MS = 2600;
+export const DWELL_MOVE_THRESHOLD = 0.02;
+
+export interface ZoomDwellCandidate {
+	centerTimeMs: number;
+	focus: ZoomFocus;
+	strength: number;
+}
+
+function normalizeTelemetrySample(
+	sample: CursorTelemetryPoint,
+	totalMs: number,
+): CursorTelemetryPoint {
+	return {
+		timeMs: Math.max(0, Math.min(sample.timeMs, totalMs)),
+		cx: Math.max(0, Math.min(sample.cx, 1)),
+		cy: Math.max(0, Math.min(sample.cy, 1)),
+	};
+}
+
+export function normalizeCursorTelemetry(
+	telemetry: CursorTelemetryPoint[],
+	totalMs: number,
+): CursorTelemetryPoint[] {
+	return [...telemetry]
+		.filter(
+			(sample) =>
+				Number.isFinite(sample.timeMs) && Number.isFinite(sample.cx) && Number.isFinite(sample.cy),
+		)
+		.sort((a, b) => a.timeMs - b.timeMs)
+		.map((sample) => normalizeTelemetrySample(sample, totalMs));
+}
+
+export function detectZoomDwellCandidates(samples: CursorTelemetryPoint[]): ZoomDwellCandidate[] {
+	if (samples.length < 2) {
+		return [];
+	}
+
+	const dwellCandidates: ZoomDwellCandidate[] = [];
+	let runStart = 0;
+
+	const pushRunIfDwell = (startIndex: number, endIndexExclusive: number) => {
+		if (endIndexExclusive - startIndex < 2) {
+			return;
+		}
+
+		const start = samples[startIndex];
+		const end = samples[endIndexExclusive - 1];
+		const runDuration = end.timeMs - start.timeMs;
+		if (runDuration < MIN_DWELL_DURATION_MS || runDuration > MAX_DWELL_DURATION_MS) {
+			return;
+		}
+
+		const runSamples = samples.slice(startIndex, endIndexExclusive);
+		const avgCx = runSamples.reduce((sum, sample) => sum + sample.cx, 0) / runSamples.length;
+		const avgCy = runSamples.reduce((sum, sample) => sum + sample.cy, 0) / runSamples.length;
+
+		dwellCandidates.push({
+			centerTimeMs: Math.round((start.timeMs + end.timeMs) / 2),
+			focus: { cx: avgCx, cy: avgCy },
+			strength: runDuration,
+		});
+	};
+
+	for (let index = 1; index < samples.length; index += 1) {
+		const prev = samples[index - 1];
+		const curr = samples[index];
+		const distance = Math.hypot(curr.cx - prev.cx, curr.cy - prev.cy);
+
+		if (distance > DWELL_MOVE_THRESHOLD) {
+			pushRunIfDwell(runStart, index);
+			runStart = index;
+		}
+	}
+	pushRunIfDwell(runStart, samples.length);
+
+	return dwellCandidates;
+}
diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts
new file mode 100644
index 0000000..fce4a19
--- /dev/null
+++ b/src/components/video-editor/types.ts
@@ -0,0 +1,413 @@
+import type { WebcamLayoutPreset } from "@/lib/compositeLayout";
+
+export type ZoomDepth = 1 | 2 | 3 | 4 | 5 | 6;
+export type ZoomFocusMode = "manual" | "auto";
+export type { WebcamLayoutPreset };
+/** Webcam size as a percentage of the canvas reference dimension (10–50). */
+export type WebcamSizePreset = number;
+
+export const DEFAULT_WEBCAM_SIZE_PRESET: WebcamSizePreset = 25;
+
+export const DEFAULT_WEBCAM_LAYOUT_PRESET: WebcamLayoutPreset = "picture-in-picture";
+
+export type WebcamMaskShape = "rectangle" | "circle" | "square" | "rounded";
+
+export const DEFAULT_WEBCAM_MASK_SHAPE: WebcamMaskShape = "rectangle";
+
+export interface WebcamPosition {
+	cx: number; // normalized horizontal center (0-1)
+	cy: number; // normalized vertical center (0-1)
+}
+
+export const DEFAULT_WEBCAM_POSITION: WebcamPosition | null = null;
+
+export interface ZoomFocus {
+	cx: number; // normalized horizontal center (0-1)
+	cy: number; // normalized vertical center (0-1)
+}
+
+export interface Rotation3D {
+	rotationX: number;
+	rotationY: number;
+	rotationZ: number;
+}
+
+export const DEFAULT_ROTATION_3D: Rotation3D = {
+	rotationX: 0,
+	rotationY: 0,
+	rotationZ: 0,
+};
+
+export type Rotation3DPreset = "iso" | "left" | "right";
+
+export const ROTATION_3D_PRESETS: Record<Rotation3DPreset, Rotation3D> = {
+	iso: { rotationX: -10, rotationY: -16, rotationZ: 0 },
+	left: { rotationX: 0, rotationY: -22, rotationZ: 0 },
+	right: { rotationX: 0, rotationY: 22, rotationZ: 0 },
+};
+
+export const ROTATION_3D_PRESET_ORDER: Rotation3DPreset[] = ["iso", "left", "right"];
+
+/** Perspective distance in CSS px is computed at render-time as this factor times
+ * min(viewport width, viewport height). Same factor used in preview and export so
+ * the visual look is identical regardless of canvas resolution. */
+export const ROTATION_3D_PERSPECTIVE_FACTOR = 2.6;
+
+export function rotation3DPerspective(width: number, height: number): number {
+	return Math.min(width, height) * ROTATION_3D_PERSPECTIVE_FACTOR;
+}
+
+export interface ZoomRegion {
+	id: string;
+	startMs: number;
+	endMs: number;
+	depth: ZoomDepth;
+	focus: ZoomFocus;
+	focusMode?: ZoomFocusMode;
+	rotationPreset?: Rotation3DPreset;
+	/** Custom scale overriding the preset depth (1.0–5.0, two decimal precision). */
+	customScale?: number;
+}
+
+export function getRotation3D(region: Pick<ZoomRegion, "rotationPreset">): Rotation3D {
+	if (!region.rotationPreset) return DEFAULT_ROTATION_3D;
+	return ROTATION_3D_PRESETS[region.rotationPreset];
+}
+
+export function isRotation3DIdentity(r: Rotation3D, eps = 0.01): boolean {
+	return Math.abs(r.rotationX) < eps && Math.abs(r.rotationY) < eps && Math.abs(r.rotationZ) < eps;
+}
+
+export function lerpRotation3D(a: Rotation3D, b: Rotation3D, t: number): Rotation3D {
+	return {
+		rotationX: a.rotationX + (b.rotationX - a.rotationX) * t,
+		rotationY: a.rotationY + (b.rotationY - a.rotationY) * t,
+		rotationZ: a.rotationZ + (b.rotationZ - a.rotationZ) * t,
+	};
+}
+
+/**
+ * Compute the maximum uniform scale that, when applied alongside `rot` and a perspective
+ * of `perspective` CSS px, keeps the projected bounding box of a `width × height` element
+ * inside its original `width × height` rectangle. Returns 1 when no scaling is needed.
+ *
+ * Math: project each rotated corner onto the screen via x' = x·P/(P−z); take the worst-case
+ * |x'|/|y'| against the half-extents and return the limiting ratio. This makes the rotated
+ * recording sit *inside* the zoom window instead of bleeding past it.
+ */
+export function computeRotation3DContainScale(
+	rot: Rotation3D,
+	width: number,
+	height: number,
+	perspective: number,
+): number {
+	const a = (rot.rotationX * Math.PI) / 180;
+	const b = (rot.rotationY * Math.PI) / 180;
+	const g = (rot.rotationZ * Math.PI) / 180;
+	const ca = Math.cos(a);
+	const sa = Math.sin(a);
+	const cb = Math.cos(b);
+	const sb = Math.sin(b);
+	const cg = Math.cos(g);
+	const sg = Math.sin(g);
+	const halfW = width / 2;
+	const halfH = height / 2;
+	const corners: Array<[number, number]> = [
+		[-halfW, -halfH],
+		[halfW, -halfH],
+		[halfW, halfH],
+		[-halfW, halfH],
+	];
+
+	let maxAbsX = 0;
+	let maxAbsY = 0;
+
+	for (const [x0, y0] of corners) {
+		// CSS "rotateX(α) rotateY(β) rotateZ(γ)" reads right-to-left: Z first, then Y, then X.
+		let px = x0;
+		let py = y0;
+		let pz = 0;
+
+		// rotateZ
+		const zx = px * cg - py * sg;
+		const zy = px * sg + py * cg;
+		px = zx;
+		py = zy;
+
+		// rotateY
+		const yx = px * cb + pz * sb;
+		const yz = -px * sb + pz * cb;
+		px = yx;
+		pz = yz;
+
+		// rotateX
+		const xy = py * ca - pz * sa;
+		const xz = py * sa + pz * ca;
+		py = xy;
+		pz = xz;
+
+		// Perspective projection: viewer at (0, 0, P), looking toward −z. A point at z=pz
+		// is scaled by P / (P − pz). When perspective ≤ 0 we treat as orthographic.
+		if (perspective > 0) {
+			const denom = perspective - pz;
+			if (denom <= 0) return 1; // pathological — skip scaling rather than crash
+			const f = perspective / denom;
+			px *= f;
+			py *= f;
+		}
+
+		if (Math.abs(px) > maxAbsX) maxAbsX = Math.abs(px);
+		if (Math.abs(py) > maxAbsY) maxAbsY = Math.abs(py);
+	}
+
+	if (maxAbsX === 0 || maxAbsY === 0) return 1;
+	const sx = halfW / maxAbsX;
+	const sy = halfH / maxAbsY;
+	return Math.min(sx, sy, 1);
+}
+
+export interface CursorTelemetryPoint {
+	timeMs: number;
+	cx: number;
+	cy: number;
+	interactionType?: "move" | "click" | "double-click" | "right-click" | "middle-click" | "mouseup";
+	cursorType?:
+		| "arrow"
+		| "text"
+		| "pointer"
+		| "crosshair"
+		| "open-hand"
+		| "closed-hand"
+		| "resize-ew"
+		| "resize-ns"
+		| "not-allowed";
+}
+
+export interface CursorVisualSettings {
+	size: number;
+	smoothing: number;
+	motionBlur: number;
+	clickBounce: number;
+	clipToBounds: boolean;
+}
+
+export const DEFAULT_CURSOR_SIZE = 3.0;
+export const DEFAULT_CURSOR_SMOOTHING = 0.67;
+export const DEFAULT_CURSOR_MOTION_BLUR = 0.35;
+export const DEFAULT_CURSOR_CLICK_BOUNCE = 2.5;
+// false = allow the cursor to overflow into the background by default.
+// true = clip the native cursor to the video canvas bounds.
+export const DEFAULT_CURSOR_CLIP_TO_BOUNDS = false;
+export const DEFAULT_ZOOM_MOTION_BLUR = 0.35;
+
+export interface TrimRegion {
+	id: string;
+	startMs: number;
+	endMs: number;
+}
+
+export type AnnotationType = "text" | "image" | "figure" | "blur";
+
+export type ArrowDirection =
+	| "up"
+	| "down"
+	| "left"
+	| "right"
+	| "up-right"
+	| "up-left"
+	| "down-right"
+	| "down-left";
+
+export interface FigureData {
+	arrowDirection: ArrowDirection;
+	color: string;
+	strokeWidth: number;
+}
+
+export type BlurShape = "rectangle" | "oval" | "freehand";
+export type BlurType = "blur" | "mosaic";
+export type BlurColor = "white" | "black";
+
+export const MIN_BLUR_INTENSITY = 2;
+export const MAX_BLUR_INTENSITY = 40;
+export const DEFAULT_BLUR_INTENSITY = 12;
+export const MIN_BLUR_BLOCK_SIZE = 4;
+export const MAX_BLUR_BLOCK_SIZE = 48;
+export const DEFAULT_BLUR_BLOCK_SIZE = 12;
+
+export interface BlurData {
+	type: BlurType;
+	shape: BlurShape;
+	color: BlurColor;
+	intensity: number;
+	blockSize: number;
+	// Points are normalized (0-100) within the annotation bounds.
+	freehandPoints?: Array<{ x: number; y: number }>;
+}
+
+export interface AnnotationPosition {
+	x: number;
+	y: number;
+}
+
+export interface AnnotationSize {
+	width: number;
+	height: number;
+}
+
+export interface AnnotationTextStyle {
+	color: string;
+	backgroundColor: string;
+	fontSize: number; // pixels
+	fontFamily: string;
+	fontWeight: "normal" | "bold";
+	fontStyle: "normal" | "italic";
+	textDecoration: "none" | "underline";
+	textAlign: "left" | "center" | "right";
+}
+
+export interface AnnotationRegion {
+	id: string;
+	startMs: number;
+	endMs: number;
+	type: AnnotationType;
+	content: string; // Legacy - still used for current type
+	textContent?: string; // Separate storage for text
+	imageContent?: string; // Separate storage for image data URL
+	position: AnnotationPosition;
+	size: AnnotationSize;
+	style: AnnotationTextStyle;
+	zIndex: number;
+	figureData?: FigureData;
+	blurData?: BlurData;
+}
+
+export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {
+	x: 50,
+	y: 50,
+};
+
+export const DEFAULT_ANNOTATION_SIZE: AnnotationSize = {
+	width: 30,
+	height: 20,
+};
+
+export const DEFAULT_ANNOTATION_STYLE: AnnotationTextStyle = {
+	color: "#ffffff",
+	backgroundColor: "transparent",
+	fontSize: 32,
+	fontFamily: "Inter",
+	fontWeight: "bold",
+	fontStyle: "normal",
+	textDecoration: "none",
+	textAlign: "center",
+};
+
+export const DEFAULT_FIGURE_DATA: FigureData = {
+	arrowDirection: "right",
+	color: "#34B27B",
+	strokeWidth: 4,
+};
+
+export const DEFAULT_BLUR_FREEHAND_POINTS: Array<{ x: number; y: number }> = [
+	{ x: 10, y: 30 },
+	{ x: 25, y: 10 },
+	{ x: 55, y: 8 },
+	{ x: 82, y: 20 },
+	{ x: 90, y: 45 },
+	{ x: 78, y: 72 },
+	{ x: 52, y: 90 },
+	{ x: 22, y: 84 },
+	{ x: 8, y: 58 },
+];
+
+export const DEFAULT_BLUR_DATA: BlurData = {
+	type: "mosaic",
+	shape: "rectangle",
+	color: "white",
+	intensity: DEFAULT_BLUR_INTENSITY,
+	blockSize: DEFAULT_BLUR_BLOCK_SIZE,
+	freehandPoints: DEFAULT_BLUR_FREEHAND_POINTS,
+};
+
+export interface CropRegion {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+export const DEFAULT_CROP_REGION: CropRegion = {
+	x: 0,
+	y: 0,
+	width: 1,
+	height: 1,
+};
+
+export type PlaybackSpeed = number;
+
+export const MIN_PLAYBACK_SPEED = 0.1;
+// Anything above 16x causes the playhead to stall during preview
+// due to the video decoder not being able to keep up.
+export const MAX_PLAYBACK_SPEED = 16;
+
+export function clampPlaybackSpeed(speed: number): PlaybackSpeed {
+	return Math.round(Math.min(MAX_PLAYBACK_SPEED, Math.max(MIN_PLAYBACK_SPEED, speed)) * 100) / 100;
+}
+
+export interface SpeedRegion {
+	id: string;
+	startMs: number;
+	endMs: number;
+	speed: PlaybackSpeed;
+}
+
+export const SPEED_OPTIONS: Array<{ speed: PlaybackSpeed; label: string }> = [
+	{ speed: 0.25, label: "0.25×" },
+	{ speed: 0.5, label: "0.5×" },
+	{ speed: 0.75, label: "0.75×" },
+	{ speed: 1.25, label: "1.25×" },
+	{ speed: 1.5, label: "1.5×" },
+	{ speed: 1.75, label: "1.75×" },
+	{ speed: 2, label: "2×" },
+	{ speed: 3, label: "3×" },
+	{ speed: 4, label: "4×" },
+	{ speed: 5, label: "5×" },
+];
+
+export const DEFAULT_PLAYBACK_SPEED: PlaybackSpeed = 1.5;
+
+export const ZOOM_DEPTH_SCALES: Record<ZoomDepth, number> = {
+	1: 1.25,
+	2: 1.5,
+	3: 1.8,
+	4: 2.2,
+	5: 3.5,
+	6: 5.0,
+};
+
+export const MIN_ZOOM_SCALE = 1.0;
+export const MAX_ZOOM_SCALE = 5.0;
+
+export const DEFAULT_ZOOM_DEPTH: ZoomDepth = 3;
+
+/** Returns the effective zoom scale for a region, preferring customScale over the preset. */
+export function getZoomScale(region: ZoomRegion): number {
+	if (region.customScale != null) {
+		const clamped = Math.max(MIN_ZOOM_SCALE, Math.min(MAX_ZOOM_SCALE, region.customScale));
+		if (Number.isFinite(clamped)) return clamped;
+	}
+	return ZOOM_DEPTH_SCALES[region.depth];
+}
+
+export function clampFocusToDepth(focus: ZoomFocus, _depth: ZoomDepth): ZoomFocus {
+	return {
+		cx: clamp(focus.cx, 0, 1),
+		cy: clamp(focus.cy, 0, 1),
+	};
+}
+
+function clamp(value: number, min: number, max: number) {
+	if (Number.isNaN(value)) return (min + max) / 2;
+	return Math.min(max, Math.max(min, value));
+}
diff --git a/src/components/video-editor/videoPlayback/constants.ts b/src/components/video-editor/videoPlayback/constants.ts
new file mode 100644
index 0000000..b5b4bd1
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/constants.ts
@@ -0,0 +1,13 @@
+import type { ZoomFocus } from "../types";
+
+export const DEFAULT_FOCUS: ZoomFocus = { cx: 0.5, cy: 0.5 };
+export const TRANSITION_WINDOW_MS = 1015.05;
+export const ZOOM_IN_TRANSITION_WINDOW_MS = TRANSITION_WINDOW_MS * 1.5;
+export const MIN_DELTA = 0.0001;
+export const VIEWPORT_SCALE = 0.8;
+export const SMOOTHING_FACTOR = 0.12;
+export const ZOOM_TRANSLATION_DEADZONE_PX = 1.25;
+export const ZOOM_SCALE_DEADZONE = 0.002;
+export const AUTO_FOLLOW_SMOOTHING_FACTOR = 0.1;
+export const AUTO_FOLLOW_SMOOTHING_FACTOR_MAX = 0.25;
+export const AUTO_FOLLOW_RAMP_DISTANCE = 0.15;
diff --git a/src/components/video-editor/videoPlayback/cursorFollowUtils.ts b/src/components/video-editor/videoPlayback/cursorFollowUtils.ts
new file mode 100644
index 0000000..14dad24
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/cursorFollowUtils.ts
@@ -0,0 +1,73 @@
+import type { CursorTelemetryPoint, ZoomFocus } from "../types";
+
+/**
+ * Binary-search the sorted telemetry array and linearly interpolate
+ * the cursor position at the given playback time.
+ */
+export function interpolateCursorAt(
+	telemetry: CursorTelemetryPoint[],
+	timeMs: number,
+): ZoomFocus | null {
+	if (telemetry.length === 0) return null;
+
+	if (timeMs <= telemetry[0].timeMs) {
+		return { cx: telemetry[0].cx, cy: telemetry[0].cy };
+	}
+
+	const last = telemetry[telemetry.length - 1];
+	if (timeMs >= last.timeMs) {
+		return { cx: last.cx, cy: last.cy };
+	}
+
+	let lo = 0;
+	let hi = telemetry.length - 1;
+
+	while (lo < hi - 1) {
+		const mid = (lo + hi) >>> 1;
+		if (telemetry[mid].timeMs <= timeMs) {
+			lo = mid;
+		} else {
+			hi = mid;
+		}
+	}
+
+	const before = telemetry[lo];
+	const after = telemetry[hi];
+	const span = after.timeMs - before.timeMs;
+	const t = span > 0 ? (timeMs - before.timeMs) / span : 0;
+
+	return {
+		cx: before.cx + (after.cx - before.cx) * t,
+		cy: before.cy + (after.cy - before.cy) * t,
+	};
+}
+
+/**
+ * Exponential smoothing to reduce jitter from high-frequency cursor data.
+ * Lower factor = smoother / more lag, higher = more responsive.
+ */
+export function smoothCursorFocus(raw: ZoomFocus, prev: ZoomFocus, factor: number): ZoomFocus {
+	return {
+		cx: prev.cx + (raw.cx - prev.cx) * factor,
+		cy: prev.cy + (raw.cy - prev.cy) * factor,
+	};
+}
+
+/**
+ * Compute an adaptive smoothing factor that scales with distance:
+ * far from target → faster (maxFactor), close → slower (minFactor).
+ * This replaces the hard deadzone with a natural deceleration curve.
+ */
+export function adaptiveSmoothFactor(
+	raw: ZoomFocus,
+	prev: ZoomFocus,
+	minFactor: number,
+	maxFactor: number,
+	rampDistance: number,
+): number {
+	const dx = raw.cx - prev.cx;
+	const dy = raw.cy - prev.cy;
+	const distance = Math.sqrt(dx * dx + dy * dy);
+	const t = Math.min(1, distance / rampDistance);
+	return minFactor + (maxFactor - minFactor) * t;
+}
diff --git a/src/components/video-editor/videoPlayback/cursorRenderer.ts b/src/components/video-editor/videoPlayback/cursorRenderer.ts
new file mode 100644
index 0000000..dd3087b
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/cursorRenderer.ts
@@ -0,0 +1,768 @@
+import { Assets, BlurFilter, Container, Graphics, Sprite, Texture } from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
+import type { CursorTelemetryPoint } from "../types";
+import {
+	createSpringState,
+	getCursorSpringConfig,
+	resetSpringState,
+	stepSpringValue,
+} from "./motionSmoothing";
+import { UPLOADED_CURSOR_SAMPLE_SIZE, uploadedCursorAssets } from "./uploadedCursorAssets";
+
+type CursorAssetKey = NonNullable<CursorTelemetryPoint["cursorType"]>;
+
+/** System cursor asset from native helper (macOS only). */
+type SystemCursorAsset = {
+	dataUrl: string;
+	width: number;
+	height: number;
+	hotspotX: number;
+	hotspotY: number;
+};
+
+type LoadedCursorAsset = {
+	texture: Texture;
+	image: HTMLImageElement;
+	aspectRatio: number;
+	anchorX: number;
+	anchorY: number;
+};
+
+export interface CursorViewportRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+/**
+ * Configuration for cursor rendering.
+ */
+export interface CursorRenderConfig {
+	/** Base cursor height in pixels (at reference width of 1920px) */
+	dotRadius: number;
+	/** Cursor fill color (hex number for PixiJS) */
+	dotColor: number;
+	/** Cursor opacity (0–1) */
+	dotAlpha: number;
+	/** Unused, kept for interface compatibility */
+	trailLength: number;
+	/** Smoothing factor for cursor interpolation (0–1, lower = smoother/slower) */
+	smoothingFactor: number;
+	/** Directional cursor motion blur amount. */
+	motionBlur: number;
+	/** Click bounce multiplier. */
+	clickBounce: number;
+}
+
+export const DEFAULT_CURSOR_CONFIG: CursorRenderConfig = {
+	dotRadius: 28,
+	dotColor: 0xffffff,
+	dotAlpha: 0.95,
+	trailLength: 0,
+	smoothingFactor: 0.18,
+	motionBlur: 0,
+	clickBounce: 1,
+};
+
+const REFERENCE_WIDTH = 1920;
+const MIN_CURSOR_VIEWPORT_SCALE = 0.55;
+const CLICK_ANIMATION_MS = 140;
+const CLICK_RING_FADE_MS = 240;
+const CURSOR_MOTION_BLUR_BASE_MULTIPLIER = 0.08;
+const CURSOR_TIME_DISCONTINUITY_MS = 100;
+const CURSOR_SVG_DROP_SHADOW_FILTER = "drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.35))";
+const CURSOR_SHADOW_COLOR = 0x000000;
+const CURSOR_SHADOW_ALPHA = 0.35;
+const CURSOR_SHADOW_OFFSET_X = 0;
+const CURSOR_SHADOW_OFFSET_Y = 2;
+const CURSOR_SHADOW_BLUR = 3;
+const CURSOR_SHADOW_PADDING = 12;
+
+let cursorAssetsPromise: Promise<void> | null = null;
+let loadedCursorAssets: Partial<Record<CursorAssetKey, LoadedCursorAsset>> = {};
+const SUPPORTED_CURSOR_KEYS: CursorAssetKey[] = [
+	"arrow",
+	"text",
+	"pointer",
+	"crosshair",
+	"open-hand",
+	"closed-hand",
+	"resize-ew",
+	"resize-ns",
+	"not-allowed",
+];
+
+function loadImage(dataUrl: string) {
+	return new Promise<HTMLImageElement>((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => resolve(image);
+		image.onerror = () =>
+			reject(new Error(`Failed to load cursor image: ${dataUrl.slice(0, 128)}`));
+		image.src = dataUrl;
+	});
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(max, Math.max(min, value));
+}
+
+function getNormalizedAnchor(
+	systemAsset: SystemCursorAsset | undefined,
+	fallbackAnchor: { x: number; y: number },
+) {
+	if (!systemAsset || systemAsset.width <= 0 || systemAsset.height <= 0) {
+		return fallbackAnchor;
+	}
+
+	return {
+		x: clamp(systemAsset.hotspotX / systemAsset.width, 0, 1),
+		y: clamp(systemAsset.hotspotY / systemAsset.height, 0, 1),
+	};
+}
+
+/**
+ * Loads an SVG at `sampleSize × sampleSize`, crops the trim region out of it,
+ * and returns a PNG data-URL of the cropped result. This is required because
+ * SVG files have their own natural pixel size (e.g. 32×32) which does not
+ * match the 1024-sample coordinate space used by the trim measurements.
+ */
+async function rasterizeAndCropSvg(
+	url: string,
+	sampleSize: number,
+	trimX: number,
+	trimY: number,
+	trimWidth: number,
+	trimHeight: number,
+): Promise<{ dataUrl: string; width: number; height: number }> {
+	const img = await loadImage(url);
+
+	// Draw at full sample size
+	const srcCanvas = document.createElement("canvas");
+	srcCanvas.width = sampleSize;
+	srcCanvas.height = sampleSize;
+	const srcCtx = srcCanvas.getContext("2d")!;
+	srcCtx.drawImage(img, 0, 0, sampleSize, sampleSize);
+
+	// Crop to trim bounds
+	const dstCanvas = document.createElement("canvas");
+	dstCanvas.width = trimWidth;
+	dstCanvas.height = trimHeight;
+	const dstCtx = dstCanvas.getContext("2d")!;
+	dstCtx.drawImage(srcCanvas, trimX, trimY, trimWidth, trimHeight, 0, 0, trimWidth, trimHeight);
+
+	return {
+		dataUrl: dstCanvas.toDataURL("image/png"),
+		width: dstCanvas.width,
+		height: dstCanvas.height,
+	};
+}
+
+function getCursorAsset(key: CursorAssetKey): LoadedCursorAsset {
+	const asset = loadedCursorAssets[key];
+	if (!asset) {
+		throw new Error(`Missing cursor asset for ${key}`);
+	}
+
+	return asset;
+}
+
+function getAvailableCursorKeys(): CursorAssetKey[] {
+	const loadedKeys = Object.keys(loadedCursorAssets) as CursorAssetKey[];
+	return loadedKeys.length > 0 ? loadedKeys : ["arrow"];
+}
+
+export async function preloadCursorAssets() {
+	if (!cursorAssetsPromise) {
+		cursorAssetsPromise = (async () => {
+			let systemCursors: Record<string, SystemCursorAsset> = {};
+
+			try {
+				const api = window.electronAPI as Record<string, unknown>;
+				if (typeof api.getSystemCursorAssets === "function") {
+					const result = await (
+						api.getSystemCursorAssets as () => Promise<{
+							success: boolean;
+							cursors?: Record<string, SystemCursorAsset>;
+						}>
+					)();
+					if (result.success && result.cursors) {
+						systemCursors = result.cursors;
+					}
+				}
+			} catch (error) {
+				console.warn("[CursorRenderer] Failed to fetch system cursor assets:", error);
+			}
+
+			const entries = await Promise.all(
+				SUPPORTED_CURSOR_KEYS.map(async (key) => {
+					const systemAsset = systemCursors[key];
+					const uploadedAsset = uploadedCursorAssets[key];
+					const assetUrl = uploadedAsset?.url ?? systemAsset?.dataUrl;
+
+					if (!assetUrl) {
+						console.warn(`[CursorRenderer] No cursor image for: ${key}`);
+						return null;
+					}
+
+					try {
+						let finalUrl: string;
+						let width: number;
+						let height: number;
+						let normalizedAnchor: { x: number; y: number };
+
+						if (uploadedAsset) {
+							const { trim, fallbackAnchor } = uploadedAsset;
+							const rasterized = await rasterizeAndCropSvg(
+								assetUrl,
+								UPLOADED_CURSOR_SAMPLE_SIZE,
+								trim.x,
+								trim.y,
+								trim.width,
+								trim.height,
+							);
+							finalUrl = rasterized.dataUrl;
+							width = rasterized.width;
+							height = rasterized.height;
+							normalizedAnchor = {
+								x: clamp((fallbackAnchor.x * trim.width) / width, 0, 1),
+								y: clamp((fallbackAnchor.y * trim.height) / height, 0, 1),
+							};
+						} else {
+							finalUrl = assetUrl;
+							const img = await loadImage(finalUrl);
+							width = img.naturalWidth;
+							height = img.naturalHeight;
+							normalizedAnchor = getNormalizedAnchor(systemAsset, { x: 0, y: 0 });
+						}
+
+						await Assets.load(finalUrl);
+						const image = await loadImage(finalUrl);
+						const texture = Texture.from(finalUrl);
+
+						return [
+							key,
+							{
+								texture,
+								image,
+								aspectRatio: height > 0 ? width / height : 1,
+								anchorX: normalizedAnchor.x,
+								anchorY: normalizedAnchor.y,
+							} satisfies LoadedCursorAsset,
+						] as const;
+					} catch (error) {
+						console.warn(`[CursorRenderer] Failed to load cursor image for: ${key}`, error);
+						return null;
+					}
+				}),
+			);
+
+			loadedCursorAssets = Object.fromEntries(
+				entries.filter(Boolean).map((entry) => entry!),
+			) as Partial<Record<CursorAssetKey, LoadedCursorAsset>>;
+
+			if (!loadedCursorAssets.arrow) {
+				throw new Error("Failed to initialize the fallback arrow cursor asset");
+			}
+		})();
+	}
+
+	return cursorAssetsPromise;
+}
+
+/**
+ * Interpolates cursor position from telemetry samples at a given time.
+ * Uses linear interpolation between the two nearest samples.
+ */
+export function interpolateCursorPosition(
+	samples: CursorTelemetryPoint[],
+	timeMs: number,
+): { cx: number; cy: number } | null {
+	if (!samples || samples.length === 0) return null;
+
+	if (timeMs <= samples[0].timeMs) {
+		return { cx: samples[0].cx, cy: samples[0].cy };
+	}
+
+	if (timeMs >= samples[samples.length - 1].timeMs) {
+		return { cx: samples[samples.length - 1].cx, cy: samples[samples.length - 1].cy };
+	}
+
+	let lo = 0;
+	let hi = samples.length - 1;
+	while (lo < hi - 1) {
+		const mid = (lo + hi) >> 1;
+		if (samples[mid].timeMs <= timeMs) {
+			lo = mid;
+		} else {
+			hi = mid;
+		}
+	}
+
+	const a = samples[lo];
+	const b = samples[hi];
+	const span = b.timeMs - a.timeMs;
+	if (span <= 0) return { cx: a.cx, cy: a.cy };
+
+	const t = (timeMs - a.timeMs) / span;
+	return {
+		cx: a.cx + (b.cx - a.cx) * t,
+		cy: a.cy + (b.cy - a.cy) * t,
+	};
+}
+
+function findLatestSample(samples: CursorTelemetryPoint[], timeMs: number) {
+	if (samples.length === 0) return null;
+
+	let lo = 0;
+	let hi = samples.length - 1;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (samples[mid].timeMs <= timeMs) {
+			lo = mid;
+		} else {
+			hi = mid - 1;
+		}
+	}
+
+	return samples[lo]?.timeMs <= timeMs ? samples[lo] : null;
+}
+
+function findLatestInteractionSample(samples: CursorTelemetryPoint[], timeMs: number) {
+	for (let index = samples.length - 1; index >= 0; index -= 1) {
+		const sample = samples[index];
+		if (sample.timeMs > timeMs) {
+			continue;
+		}
+
+		if (
+			sample.interactionType === "click" ||
+			sample.interactionType === "double-click" ||
+			sample.interactionType === "right-click" ||
+			sample.interactionType === "middle-click"
+		) {
+			return sample;
+		}
+	}
+
+	return null;
+}
+
+function findLatestStableCursorType(samples: CursorTelemetryPoint[], timeMs: number) {
+	// Binary search to find position at timeMs, then scan backwards
+	let lo = 0;
+	let hi = samples.length - 1;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (samples[mid].timeMs <= timeMs) {
+			lo = mid;
+		} else {
+			hi = mid - 1;
+		}
+	}
+
+	// Scan backwards from the position to find a sample with cursorType
+	// Skip click events only (not mouseup) to avoid transient re-type during clicks
+	for (let index = lo; index >= 0; index -= 1) {
+		const sample = samples[index];
+		if (sample.timeMs > timeMs) {
+			continue;
+		}
+
+		if (!sample.cursorType) {
+			continue;
+		}
+
+		if (
+			sample.interactionType === "click" ||
+			sample.interactionType === "double-click" ||
+			sample.interactionType === "right-click" ||
+			sample.interactionType === "middle-click"
+		) {
+			continue;
+		}
+
+		return sample.cursorType;
+	}
+
+	return findLatestSample(samples, timeMs)?.cursorType ?? "arrow";
+}
+
+function getCursorViewportScale(viewport: CursorViewportRect) {
+	return Math.max(MIN_CURSOR_VIEWPORT_SCALE, viewport.width / REFERENCE_WIDTH);
+}
+
+function getCursorVisualState(samples: CursorTelemetryPoint[], timeMs: number) {
+	const latestClick = findLatestInteractionSample(samples, timeMs);
+	const interactionType = latestClick?.interactionType;
+	const ageMs = latestClick ? Math.max(0, timeMs - latestClick.timeMs) : Number.POSITIVE_INFINITY;
+	const isClickEvent =
+		interactionType === "click" ||
+		interactionType === "double-click" ||
+		interactionType === "right-click" ||
+		interactionType === "middle-click";
+	const clickBounceProgress =
+		latestClick && isClickEvent && ageMs <= CLICK_ANIMATION_MS ? 1 - ageMs / CLICK_ANIMATION_MS : 0;
+
+	return {
+		cursorType: findLatestStableCursorType(samples, timeMs),
+		clickBounceProgress,
+		clickProgress:
+			latestClick && isClickEvent && ageMs <= CLICK_RING_FADE_MS
+				? 1 - ageMs / CLICK_RING_FADE_MS
+				: 0,
+	};
+}
+
+/**
+ * Manages a smoothed cursor state that chases the interpolated target.
+ */
+export class SmoothedCursorState {
+	public x = 0.5;
+	public y = 0.5;
+	public trail: Array<{ x: number; y: number }> = [];
+	private smoothingFactor: number;
+	private trailLength: number;
+	private initialized = false;
+	private lastTimeMs: number | null = null;
+	private xSpring = createSpringState(0.5);
+	private ySpring = createSpringState(0.5);
+
+	constructor(config: Pick<CursorRenderConfig, "smoothingFactor" | "trailLength">) {
+		this.smoothingFactor = config.smoothingFactor;
+		this.trailLength = config.trailLength;
+	}
+
+	update(targetX: number, targetY: number, timeMs: number): void {
+		if (!this.initialized) {
+			this.x = targetX;
+			this.y = targetY;
+			this.initialized = true;
+			this.lastTimeMs = timeMs;
+			this.xSpring.value = targetX;
+			this.ySpring.value = targetY;
+			this.xSpring.velocity = 0;
+			this.ySpring.velocity = 0;
+			this.xSpring.initialized = true;
+			this.ySpring.initialized = true;
+			this.trail = [];
+			return;
+		}
+
+		if (this.smoothingFactor <= 0 || (this.lastTimeMs !== null && timeMs < this.lastTimeMs)) {
+			this.snapTo(targetX, targetY, timeMs);
+			return;
+		}
+
+		this.trail.unshift({ x: this.x, y: this.y });
+		if (this.trail.length > this.trailLength) {
+			this.trail.length = this.trailLength;
+		}
+
+		const deltaMs = this.lastTimeMs === null ? 1000 / 60 : Math.max(1, timeMs - this.lastTimeMs);
+		this.lastTimeMs = timeMs;
+
+		const springConfig = getCursorSpringConfig(this.smoothingFactor);
+		this.x = stepSpringValue(this.xSpring, targetX, deltaMs, springConfig);
+		this.y = stepSpringValue(this.ySpring, targetY, deltaMs, springConfig);
+	}
+
+	setSmoothingFactor(smoothingFactor: number): void {
+		this.smoothingFactor = smoothingFactor;
+	}
+
+	snapTo(targetX: number, targetY: number, timeMs: number): void {
+		this.x = targetX;
+		this.y = targetY;
+		this.initialized = true;
+		this.lastTimeMs = timeMs;
+		this.xSpring.value = targetX;
+		this.ySpring.value = targetY;
+		this.xSpring.velocity = 0;
+		this.ySpring.velocity = 0;
+		this.xSpring.initialized = true;
+		this.ySpring.initialized = true;
+		this.trail = [];
+	}
+
+	reset(): void {
+		this.initialized = false;
+		this.lastTimeMs = null;
+		this.trail = [];
+		resetSpringState(this.xSpring, this.x);
+		resetSpringState(this.ySpring, this.y);
+	}
+}
+
+function drawClickRing(graphics: Graphics, px: number, py: number, h: number, progress: number) {
+	void graphics;
+	void px;
+	void py;
+	void h;
+	void progress;
+}
+
+export class PixiCursorOverlay {
+	public readonly container: Container;
+	private clickRingGraphics: Graphics;
+	private cursorShadowSprites: Partial<Record<CursorAssetKey, Sprite>>;
+	private cursorShadowFilters: Partial<Record<CursorAssetKey, BlurFilter>>;
+	private cursorSprites: Partial<Record<CursorAssetKey, Sprite>>;
+	private cursorMotionBlurFilter: MotionBlurFilter;
+	private state: SmoothedCursorState;
+	private config: CursorRenderConfig;
+	private lastRenderedPoint: { px: number; py: number } | null = null;
+	private lastRenderedTimeMs: number | null = null;
+
+	constructor(config: Partial<CursorRenderConfig> = {}) {
+		this.config = { ...DEFAULT_CURSOR_CONFIG, ...config };
+		this.state = new SmoothedCursorState(this.config);
+
+		this.container = new Container();
+		this.container.label = "cursor-overlay";
+
+		this.clickRingGraphics = new Graphics();
+		this.cursorShadowSprites = {};
+		this.cursorShadowFilters = {};
+		this.cursorSprites = {};
+		for (const key of getAvailableCursorKeys()) {
+			const asset = getCursorAsset(key);
+			const shadowSprite = new Sprite(asset.texture);
+			shadowSprite.anchor.set(asset.anchorX, asset.anchorY);
+			shadowSprite.visible = false;
+			shadowSprite.tint = CURSOR_SHADOW_COLOR;
+			shadowSprite.alpha = CURSOR_SHADOW_ALPHA;
+			const shadowFilter = new BlurFilter();
+			shadowFilter.blur = CURSOR_SHADOW_BLUR;
+			shadowFilter.quality = 4;
+			shadowFilter.padding = CURSOR_SHADOW_PADDING;
+			shadowSprite.filters = [shadowFilter];
+			this.cursorShadowSprites[key] = shadowSprite;
+			this.cursorShadowFilters[key] = shadowFilter;
+
+			const sprite = new Sprite(asset.texture);
+			sprite.anchor.set(asset.anchorX, asset.anchorY);
+			sprite.visible = false;
+			this.cursorSprites[key] = sprite;
+		}
+
+		this.cursorMotionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
+		this.container.filters = null;
+
+		this.container.addChild(
+			this.clickRingGraphics,
+			...Object.values(this.cursorShadowSprites),
+			...Object.values(this.cursorSprites),
+		);
+		this.setMotionBlur(this.config.motionBlur);
+	}
+
+	setDotRadius(dotRadius: number) {
+		this.config.dotRadius = dotRadius;
+	}
+
+	setSmoothingFactor(smoothingFactor: number) {
+		this.config.smoothingFactor = smoothingFactor;
+		this.state.setSmoothingFactor(smoothingFactor);
+	}
+
+	setMotionBlur(motionBlur: number) {
+		this.config.motionBlur = Math.max(0, motionBlur);
+		this.container.filters = this.config.motionBlur > 0 ? [this.cursorMotionBlurFilter] : null;
+		if (this.config.motionBlur <= 0) {
+			this.cursorMotionBlurFilter.velocity = { x: 0, y: 0 };
+			this.cursorMotionBlurFilter.kernelSize = 5;
+			this.cursorMotionBlurFilter.offset = 0;
+		}
+	}
+
+	setClickBounce(clickBounce: number) {
+		this.config.clickBounce = Math.max(0, clickBounce);
+	}
+
+	update(
+		samples: CursorTelemetryPoint[],
+		timeMs: number,
+		viewport: CursorViewportRect,
+		visible: boolean,
+		freeze = false,
+	): void {
+		if (!visible || samples.length === 0 || viewport.width <= 0 || viewport.height <= 0) {
+			this.container.visible = false;
+			this.lastRenderedPoint = null;
+			this.lastRenderedTimeMs = null;
+			this.cursorMotionBlurFilter.velocity = { x: 0, y: 0 };
+			return;
+		}
+
+		const target = interpolateCursorPosition(samples, timeMs);
+		if (!target) {
+			this.container.visible = false;
+			return;
+		}
+
+		const sameFrameTime =
+			this.lastRenderedTimeMs !== null && Math.abs(this.lastRenderedTimeMs - timeMs) < 0.0001;
+		const hasTimeDiscontinuity =
+			this.lastRenderedTimeMs !== null &&
+			Math.abs(timeMs - this.lastRenderedTimeMs) > CURSOR_TIME_DISCONTINUITY_MS;
+
+		if (freeze || hasTimeDiscontinuity) {
+			if (!sameFrameTime || !this.lastRenderedPoint) {
+				this.state.snapTo(target.cx, target.cy, timeMs);
+			}
+		} else {
+			this.state.update(target.cx, target.cy, timeMs);
+		}
+		this.container.visible = true;
+
+		const px = viewport.x + this.state.x * viewport.width;
+		const py = viewport.y + this.state.y * viewport.height;
+		const h = this.config.dotRadius * getCursorViewportScale(viewport);
+		const { cursorType, clickBounceProgress, clickProgress } = getCursorVisualState(
+			samples,
+			timeMs,
+		);
+		const spriteKey = (cursorType in this.cursorSprites ? cursorType : "arrow") as CursorAssetKey;
+		const asset = getCursorAsset(spriteKey);
+		const shadowSprite = this.cursorShadowSprites[spriteKey] ?? this.cursorShadowSprites.arrow!;
+		const sprite = this.cursorSprites[spriteKey] ?? this.cursorSprites.arrow!;
+		const bounceScale = Math.max(
+			0.72,
+			1 - Math.sin(clickBounceProgress * Math.PI) * (0.08 * this.config.clickBounce),
+		);
+		const scaledH = h;
+
+		this.clickRingGraphics.clear();
+		drawClickRing(this.clickRingGraphics, px, py, h, clickProgress);
+
+		for (const [key, currentShadowSprite] of Object.entries(this.cursorShadowSprites) as Array<
+			[CursorAssetKey, Sprite]
+		>) {
+			currentShadowSprite.visible = key === spriteKey;
+		}
+
+		for (const [key, currentSprite] of Object.entries(this.cursorSprites) as Array<
+			[CursorAssetKey, Sprite]
+		>) {
+			currentSprite.visible = key === spriteKey;
+		}
+
+		if (shadowSprite) {
+			shadowSprite.height = scaledH * bounceScale;
+			shadowSprite.width = scaledH * bounceScale * asset.aspectRatio;
+			shadowSprite.position.set(px + CURSOR_SHADOW_OFFSET_X, py + CURSOR_SHADOW_OFFSET_Y);
+		}
+
+		if (sprite) {
+			sprite.alpha = this.config.dotAlpha;
+			sprite.height = scaledH * bounceScale;
+			sprite.width = scaledH * bounceScale * asset.aspectRatio;
+			sprite.position.set(px, py);
+		}
+
+		this.applyCursorMotionBlur(px, py, timeMs, freeze);
+		this.lastRenderedPoint = { px, py };
+		this.lastRenderedTimeMs = timeMs;
+	}
+
+	private applyCursorMotionBlur(px: number, py: number, timeMs: number, freeze: boolean) {
+		if (
+			freeze ||
+			this.config.motionBlur <= 0 ||
+			!this.lastRenderedPoint ||
+			this.lastRenderedTimeMs === null
+		) {
+			this.cursorMotionBlurFilter.velocity = { x: 0, y: 0 };
+			this.cursorMotionBlurFilter.kernelSize = 5;
+			this.cursorMotionBlurFilter.offset = 0;
+			return;
+		}
+
+		const deltaMs = Math.max(1, timeMs - this.lastRenderedTimeMs);
+		const dx = px - this.lastRenderedPoint.px;
+		const dy = py - this.lastRenderedPoint.py;
+		const velocityScale =
+			(1000 / deltaMs) * this.config.motionBlur * CURSOR_MOTION_BLUR_BASE_MULTIPLIER;
+		const velocity = {
+			x: dx * velocityScale,
+			y: dy * velocityScale,
+		};
+		const magnitude = Math.hypot(velocity.x, velocity.y);
+
+		this.cursorMotionBlurFilter.velocity = magnitude > 0.05 ? velocity : { x: 0, y: 0 };
+		this.cursorMotionBlurFilter.kernelSize = magnitude > 3 ? 9 : magnitude > 1 ? 7 : 5;
+		this.cursorMotionBlurFilter.offset = magnitude > 0.5 ? -0.25 : 0;
+	}
+
+	reset(): void {
+		this.state.reset();
+		this.clickRingGraphics.clear();
+		for (const shadowSprite of Object.values(this.cursorShadowSprites)) {
+			shadowSprite.visible = false;
+			shadowSprite.scale.set(1);
+		}
+		for (const sprite of Object.values(this.cursorSprites)) {
+			sprite.visible = false;
+			sprite.scale.set(1);
+		}
+		this.container.visible = false;
+		this.lastRenderedPoint = null;
+		this.lastRenderedTimeMs = null;
+		this.cursorMotionBlurFilter.velocity = { x: 0, y: 0 };
+		this.cursorMotionBlurFilter.kernelSize = 5;
+		this.cursorMotionBlurFilter.offset = 0;
+	}
+
+	destroy(): void {
+		this.clickRingGraphics.destroy();
+		for (const shadowFilter of Object.values(this.cursorShadowFilters)) {
+			shadowFilter.destroy();
+		}
+		this.cursorMotionBlurFilter.destroy();
+		this.container.destroy({ children: true });
+		cursorAssetsPromise = null;
+		loadedCursorAssets = {};
+	}
+}
+
+export function drawCursorOnCanvas(
+	ctx: CanvasRenderingContext2D,
+	samples: CursorTelemetryPoint[],
+	timeMs: number,
+	viewport: CursorViewportRect,
+	smoothedState: SmoothedCursorState,
+	config: CursorRenderConfig = DEFAULT_CURSOR_CONFIG,
+): void {
+	if (samples.length === 0 || viewport.width <= 0 || viewport.height <= 0) return;
+
+	const target = interpolateCursorPosition(samples, timeMs);
+	if (!target) return;
+
+	smoothedState.update(target.cx, target.cy, timeMs);
+
+	const px = viewport.x + smoothedState.x * viewport.width;
+	const py = viewport.y + smoothedState.y * viewport.height;
+	const h = config.dotRadius * getCursorViewportScale(viewport);
+	const { cursorType, clickBounceProgress } = getCursorVisualState(samples, timeMs);
+	const spriteKey = (
+		cursorType && loadedCursorAssets[cursorType] ? cursorType : "arrow"
+	) as CursorAssetKey;
+	const asset = getCursorAsset(spriteKey);
+	const bounceScale = Math.max(
+		0.72,
+		1 - Math.sin(clickBounceProgress * Math.PI) * (0.08 * config.clickBounce),
+	);
+
+	ctx.save();
+	ctx.filter = CURSOR_SVG_DROP_SHADOW_FILTER;
+
+	const drawHeight = h * bounceScale;
+	const drawWidth = drawHeight * asset.aspectRatio;
+	const hotspotX = asset.anchorX * drawWidth;
+	const hotspotY = asset.anchorY * drawHeight;
+	ctx.globalAlpha = config.dotAlpha;
+	ctx.drawImage(asset.image, px - hotspotX, py - hotspotY, drawWidth, drawHeight);
+
+	ctx.restore();
+}
diff --git a/src/components/video-editor/videoPlayback/focusUtils.ts b/src/components/video-editor/videoPlayback/focusUtils.ts
new file mode 100644
index 0000000..a0973ec
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/focusUtils.ts
@@ -0,0 +1,140 @@
+import { clampFocusToDepth, ZOOM_DEPTH_SCALES, type ZoomDepth, type ZoomFocus } from "../types";
+
+interface StageSize {
+	width: number;
+	height: number;
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.max(min, Math.min(max, value));
+}
+
+function easeIntoBoundary(normalized: number) {
+	const t = clamp(normalized, 0, 1);
+	return -t * t * t + 2 * t * t;
+}
+
+function softClampToRange(value: number, min: number, max: number, softness: number) {
+	const clamped = clamp(value, min, max);
+
+	if (softness <= 0 || max <= min) {
+		return clamped;
+	}
+
+	if (clamped < min + softness) {
+		const normalized = (clamped - min) / softness;
+		return min + softness * easeIntoBoundary(normalized);
+	}
+
+	if (clamped > max - softness) {
+		const normalized = (max - clamped) / softness;
+		return max - softness * easeIntoBoundary(normalized);
+	}
+
+	return clamped;
+}
+
+function getFocusBounds(depth: ZoomDepth) {
+	const zoomScale = ZOOM_DEPTH_SCALES[depth];
+	return getFocusBoundsForScale(zoomScale);
+}
+
+interface ViewportRatio {
+	widthRatio: number;
+	heightRatio: number;
+}
+
+export function getFocusBoundsForScale(zoomScale: number, viewportRatio?: ViewportRatio) {
+	const wr = viewportRatio?.widthRatio ?? 1;
+	const hr = viewportRatio?.heightRatio ?? 1;
+	const marginX = Math.min(0.5, wr / (2 * zoomScale));
+	const marginY = Math.min(0.5, hr / (2 * zoomScale));
+
+	return {
+		minX: marginX,
+		maxX: 1 - marginX,
+		minY: marginY,
+		maxY: 1 - marginY,
+	};
+}
+
+export function clampFocusToStage(
+	focus: ZoomFocus,
+	depth: ZoomDepth,
+	_stageSize: StageSize,
+): ZoomFocus {
+	const baseFocus = clampFocusToDepth(focus, depth);
+	const bounds = getFocusBounds(depth);
+
+	return {
+		cx: clamp(baseFocus.cx, bounds.minX, bounds.maxX),
+		cy: clamp(baseFocus.cy, bounds.minY, bounds.maxY),
+	};
+}
+
+export function clampFocusToScale(
+	focus: ZoomFocus,
+	zoomScale: number,
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	const baseFocus = {
+		cx: clamp(focus.cx, 0, 1),
+		cy: clamp(focus.cy, 0, 1),
+	};
+	const bounds = getFocusBoundsForScale(zoomScale, viewportRatio);
+
+	return {
+		cx: clamp(baseFocus.cx, bounds.minX, bounds.maxX),
+		cy: clamp(baseFocus.cy, bounds.minY, bounds.maxY),
+	};
+}
+
+export function softenFocusToScale(
+	focus: ZoomFocus,
+	zoomScale: number,
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	const baseFocus = {
+		cx: clamp(focus.cx, 0, 1),
+		cy: clamp(focus.cy, 0, 1),
+	};
+	const bounds = getFocusBoundsForScale(zoomScale, viewportRatio);
+	const horizontalRange = bounds.maxX - bounds.minX;
+	const verticalRange = bounds.maxY - bounds.minY;
+	const horizontalSoftness = Math.min(0.12, horizontalRange * 0.35);
+	const verticalSoftness = Math.min(0.12, verticalRange * 0.35);
+
+	return {
+		cx: softClampToRange(baseFocus.cx, bounds.minX, bounds.maxX, horizontalSoftness),
+		cy: softClampToRange(baseFocus.cy, bounds.minY, bounds.maxY, verticalSoftness),
+	};
+}
+
+export function stageFocusToVideoSpace(
+	focus: ZoomFocus,
+	stageSize: StageSize,
+	videoSize: { width: number; height: number },
+	baseScale: number,
+	baseOffset: { x: number; y: number },
+): ZoomFocus {
+	if (
+		!stageSize.width ||
+		!stageSize.height ||
+		!videoSize.width ||
+		!videoSize.height ||
+		baseScale <= 0
+	) {
+		return focus;
+	}
+
+	const stageX = focus.cx * stageSize.width;
+	const stageY = focus.cy * stageSize.height;
+
+	const videoNormX = (stageX - baseOffset.x) / (videoSize.width * baseScale);
+	const videoNormY = (stageY - baseOffset.y) / (videoSize.height * baseScale);
+
+	return {
+		cx: videoNormX,
+		cy: videoNormY,
+	};
+}
diff --git a/src/components/video-editor/videoPlayback/index.ts b/src/components/video-editor/videoPlayback/index.ts
new file mode 100644
index 0000000..06cf42e
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/index.ts
@@ -0,0 +1,8 @@
+export * from "./constants";
+export * from "./focusUtils";
+export * from "./layoutUtils";
+export * from "./mathUtils";
+export * from "./overlayUtils";
+export * from "./videoEventHandlers";
+export * from "./zoomRegionUtils";
+export * from "./zoomTransform";
diff --git a/src/components/video-editor/videoPlayback/layoutUtils.ts b/src/components/video-editor/videoPlayback/layoutUtils.ts
new file mode 100644
index 0000000..6bf0946
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/layoutUtils.ts
@@ -0,0 +1,159 @@
+import { Application, Graphics, Sprite } from "pixi.js";
+import {
+	computeCompositeLayout,
+	type RenderRect,
+	type Size,
+	type StyledRenderRect,
+	type WebcamLayoutPreset,
+	type WebcamSizePreset,
+} from "@/lib/compositeLayout";
+import type { CropRegion, WebcamMaskShape } from "../types";
+
+interface LayoutParams {
+	container: HTMLDivElement;
+	app: Application;
+	videoSprite: Sprite;
+	maskGraphics: Graphics;
+	videoElement: HTMLVideoElement;
+	cropRegion?: CropRegion;
+	lockedVideoDimensions?: { width: number; height: number } | null;
+	borderRadius?: number;
+	padding?: number;
+	webcamDimensions?: Size | null;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamSizePreset?: WebcamSizePreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	webcamMaskShape?: WebcamMaskShape;
+}
+
+interface LayoutResult {
+	stageSize: { width: number; height: number };
+	videoSize: { width: number; height: number };
+	baseScale: number;
+	baseOffset: { x: number; y: number };
+	maskRect: RenderRect;
+	maskBorderRadius: number;
+	webcamRect: StyledRenderRect | null;
+	cropBounds: { startX: number; endX: number; startY: number; endY: number };
+}
+
+export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
+	const {
+		container,
+		app,
+		videoSprite,
+		maskGraphics,
+		videoElement,
+		cropRegion,
+		lockedVideoDimensions,
+		borderRadius = 0,
+		padding = 0,
+		webcamDimensions,
+		webcamLayoutPreset,
+		webcamSizePreset,
+		webcamPosition,
+		webcamMaskShape,
+	} = params;
+
+	const videoWidth = lockedVideoDimensions?.width || videoElement.videoWidth;
+	const videoHeight = lockedVideoDimensions?.height || videoElement.videoHeight;
+
+	if (!videoWidth || !videoHeight) {
+		return null;
+	}
+
+	const width = container.clientWidth;
+	const height = container.clientHeight;
+
+	if (!width || !height) {
+		return null;
+	}
+
+	app.renderer.resize(width, height);
+	app.canvas.style.width = "100%";
+	app.canvas.style.height = "100%";
+
+	// Apply crop region
+	const crop = cropRegion || { x: 0, y: 0, width: 1, height: 1 };
+
+	// Calculate the cropped dimensions
+	const croppedVideoWidth = videoWidth * crop.width;
+	const croppedVideoHeight = videoHeight * crop.height;
+
+	const cropStartX = crop.x * videoWidth;
+	const cropStartY = crop.y * videoHeight;
+	const cropEndX = cropStartX + croppedVideoWidth;
+	const cropEndY = cropStartY + croppedVideoHeight;
+
+	// Calculate scale to fit the cropped area in the viewport
+	// Padding is a percentage (0-100), where 50 matches the original VIEWPORT_SCALE of 0.8
+	// Vertical stack ignores padding — it's full-bleed
+	const effectivePadding = webcamLayoutPreset === "vertical-stack" ? 0 : padding;
+	const paddingScale = 1.0 - (effectivePadding / 100) * 0.4;
+	const maxDisplayWidth = width * paddingScale;
+	const maxDisplayHeight = height * paddingScale;
+
+	const compositeLayout = computeCompositeLayout({
+		canvasSize: { width, height },
+		maxContentSize: { width: maxDisplayWidth, height: maxDisplayHeight },
+		screenSize: { width: croppedVideoWidth, height: croppedVideoHeight },
+		webcamSize: webcamDimensions,
+		layoutPreset: webcamLayoutPreset,
+		webcamSizePreset,
+		webcamPosition,
+		webcamMaskShape,
+	});
+
+	if (!compositeLayout) {
+		return null;
+	}
+
+	const screenRect = compositeLayout.screenRect;
+
+	// Cover mode: scale to fill the rect (may crop), otherwise fit-to-width
+	let scale: number;
+	if (compositeLayout.screenCover) {
+		scale = Math.max(screenRect.width / croppedVideoWidth, screenRect.height / croppedVideoHeight);
+	} else {
+		scale = screenRect.width / croppedVideoWidth;
+	}
+
+	videoSprite.scale.set(scale);
+
+	// Calculate display size of the full video at this scale
+	const fullVideoDisplayWidth = videoWidth * scale;
+	const fullVideoDisplayHeight = videoHeight * scale;
+
+	// Position the video so the cropped region is centered within the screenRect
+	const croppedDisplayWidth = croppedVideoWidth * scale;
+	const croppedDisplayHeight = croppedVideoHeight * scale;
+	const offsetX = screenRect.x + (screenRect.width - croppedDisplayWidth) / 2;
+	const offsetY = screenRect.y + (screenRect.height - croppedDisplayHeight) / 2;
+	const spriteX = offsetX - crop.x * fullVideoDisplayWidth;
+	const spriteY = offsetY - crop.y * fullVideoDisplayHeight;
+
+	videoSprite.position.set(spriteX, spriteY);
+
+	// Apply border radius — mask clips the video to the screenRect
+	maskGraphics.clear();
+	maskGraphics.roundRect(
+		screenRect.x,
+		screenRect.y,
+		screenRect.width,
+		screenRect.height,
+		compositeLayout.screenBorderRadius ?? (compositeLayout.screenCover ? 0 : borderRadius),
+	);
+	maskGraphics.fill({ color: 0xffffff });
+
+	return {
+		stageSize: { width, height },
+		videoSize: { width: croppedVideoWidth, height: croppedVideoHeight },
+		baseScale: scale,
+		baseOffset: { x: spriteX, y: spriteY },
+		maskRect: compositeLayout.screenRect,
+		maskBorderRadius:
+			compositeLayout.screenBorderRadius ?? (compositeLayout.screenCover ? 0 : borderRadius),
+		webcamRect: compositeLayout.webcamRect,
+		cropBounds: { startX: cropStartX, endX: cropEndX, startY: cropStartY, endY: cropEndY },
+	};
+}
diff --git a/src/components/video-editor/videoPlayback/mathUtils.ts b/src/components/video-editor/videoPlayback/mathUtils.ts
new file mode 100644
index 0000000..78c9414
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/mathUtils.ts
@@ -0,0 +1,86 @@
+export function clamp01(value: number) {
+	return Math.max(0, Math.min(1, value));
+}
+
+function sampleCubicBezier(a1: number, a2: number, t: number) {
+	const oneMinusT = 1 - t;
+	return 3 * a1 * oneMinusT * oneMinusT * t + 3 * a2 * oneMinusT * t * t + t * t * t;
+}
+
+function sampleCubicBezierDerivative(a1: number, a2: number, t: number) {
+	const oneMinusT = 1 - t;
+	return 3 * a1 * oneMinusT * oneMinusT + 6 * (a2 - a1) * oneMinusT * t + 3 * (1 - a2) * t * t;
+}
+
+export function cubicBezier(x1: number, y1: number, x2: number, y2: number, t: number) {
+	const targetX = clamp01(t);
+	let solvedT = targetX;
+
+	for (let i = 0; i < 8; i += 1) {
+		const currentX = sampleCubicBezier(x1, x2, solvedT) - targetX;
+		const currentDerivative = sampleCubicBezierDerivative(x1, x2, solvedT);
+
+		if (Math.abs(currentX) < 1e-6 || Math.abs(currentDerivative) < 1e-6) {
+			break;
+		}
+
+		solvedT -= currentX / currentDerivative;
+	}
+
+	let lower = 0;
+	let upper = 1;
+	solvedT = clamp01(solvedT);
+
+	for (let i = 0; i < 10; i += 1) {
+		const currentX = sampleCubicBezier(x1, x2, solvedT);
+		if (Math.abs(currentX - targetX) < 1e-6) {
+			break;
+		}
+
+		if (currentX < targetX) {
+			lower = solvedT;
+		} else {
+			upper = solvedT;
+		}
+
+		solvedT = (lower + upper) / 2;
+	}
+
+	return sampleCubicBezier(y1, y2, solvedT);
+}
+
+export function easeOutExpo(t: number) {
+	const clamped = clamp01(t);
+	if (clamped === 1) {
+		return 1;
+	}
+
+	return 1 - Math.pow(2, -7 * clamped);
+}
+
+export function easeOutScreenStudio(t: number) {
+	return cubicBezier(0.16, 1, 0.3, 1, t);
+}
+
+export function smoothStep(t: number) {
+	const clamped = clamp01(t);
+	return clamped * clamped * (3 - 2 * clamped);
+}
+
+/**
+ * Gentle ease-in-out cubic — slow start, smooth middle, gentle landing.
+ * Used for zoom-in transitions.
+ */
+export function easeInOutCubic(t: number) {
+	const x = clamp01(t);
+	return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+
+/**
+ * Ease-out cubic — starts at speed, then decelerates to a gentle stop.
+ * Used for zoom-out transitions so strength eases smoothly to zero.
+ */
+export function easeOutCubic(t: number) {
+	const x = clamp01(t);
+	return 1 - Math.pow(1 - x, 3);
+}
diff --git a/src/components/video-editor/videoPlayback/motionSmoothing.ts b/src/components/video-editor/videoPlayback/motionSmoothing.ts
new file mode 100644
index 0000000..e2cec6f
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/motionSmoothing.ts
@@ -0,0 +1,149 @@
+import { spring } from "motion";
+
+export interface SpringState {
+	value: number;
+	velocity: number;
+	initialized: boolean;
+}
+
+export interface SpringConfig {
+	stiffness: number;
+	damping: number;
+	mass: number;
+	restDelta?: number;
+	restSpeed?: number;
+}
+
+const CURSOR_SMOOTHING_MIN = 0;
+const CURSOR_SMOOTHING_MAX = 2;
+const CURSOR_SMOOTHING_LEGACY_MAX = 0.5;
+
+export function createSpringState(initialValue = 0): SpringState {
+	return {
+		value: initialValue,
+		velocity: 0,
+		initialized: false,
+	};
+}
+
+export function resetSpringState(state: SpringState, initialValue?: number) {
+	if (typeof initialValue === "number") {
+		state.value = initialValue;
+	}
+
+	state.velocity = 0;
+	state.initialized = false;
+}
+
+export function clampDeltaMs(deltaMs: number, fallbackMs = 1000 / 60) {
+	if (!Number.isFinite(deltaMs) || deltaMs <= 0) {
+		return fallbackMs;
+	}
+
+	return Math.min(80, Math.max(1, deltaMs));
+}
+
+export function stepSpringValue(
+	state: SpringState,
+	target: number,
+	deltaMs: number,
+	config: SpringConfig,
+) {
+	const safeDeltaMs = clampDeltaMs(deltaMs);
+
+	if (!state.initialized || !Number.isFinite(state.value)) {
+		state.value = target;
+		state.velocity = 0;
+		state.initialized = true;
+		return state.value;
+	}
+
+	const restDelta = config.restDelta ?? 0.0005;
+	const restSpeed = config.restSpeed ?? 0.02;
+
+	if (Math.abs(target - state.value) <= restDelta && Math.abs(state.velocity) <= restSpeed) {
+		state.value = target;
+		state.velocity = 0;
+		return state.value;
+	}
+
+	const previousValue = state.value;
+	const generator = spring({
+		keyframes: [state.value, target],
+		velocity: state.velocity,
+		stiffness: config.stiffness,
+		damping: config.damping,
+		mass: config.mass,
+		restDelta,
+		restSpeed,
+	});
+
+	const result = generator.next(safeDeltaMs);
+	state.value = result.done ? target : result.value;
+	state.velocity = ((state.value - previousValue) / safeDeltaMs) * 1000;
+
+	if (result.done) {
+		state.velocity = 0;
+	}
+
+	return state.value;
+}
+
+export function getCursorSpringConfig(smoothingFactor: number): SpringConfig {
+	const clamped = Math.min(CURSOR_SMOOTHING_MAX, Math.max(CURSOR_SMOOTHING_MIN, smoothingFactor));
+
+	if (clamped <= 0) {
+		return {
+			stiffness: 1000,
+			damping: 100,
+			mass: 1,
+			restDelta: 0.0001,
+			restSpeed: 0.001,
+		};
+	}
+
+	if (clamped <= CURSOR_SMOOTHING_LEGACY_MAX) {
+		const legacyNormalized = Math.min(
+			1,
+			Math.max(
+				0,
+				(clamped - CURSOR_SMOOTHING_MIN) / (CURSOR_SMOOTHING_LEGACY_MAX - CURSOR_SMOOTHING_MIN),
+			),
+		);
+
+		return {
+			stiffness: 760 - legacyNormalized * 420,
+			damping: 34 + legacyNormalized * 24,
+			mass: 0.55 + legacyNormalized * 0.45,
+			restDelta: 0.0002,
+			restSpeed: 0.01,
+		};
+	}
+
+	const extendedNormalized = Math.min(
+		1,
+		Math.max(
+			0,
+			(clamped - CURSOR_SMOOTHING_LEGACY_MAX) /
+				(CURSOR_SMOOTHING_MAX - CURSOR_SMOOTHING_LEGACY_MAX),
+		),
+	);
+
+	return {
+		stiffness: 340 - extendedNormalized * 180,
+		damping: 58 + extendedNormalized * 22,
+		mass: 1 + extendedNormalized * 0.35,
+		restDelta: 0.0002,
+		restSpeed: 0.01,
+	};
+}
+
+export function getZoomSpringConfig(): SpringConfig {
+	return {
+		stiffness: 320,
+		damping: 40,
+		mass: 0.92,
+		restDelta: 0.0005,
+		restSpeed: 0.015,
+	};
+}
diff --git a/src/components/video-editor/videoPlayback/overlayUtils.ts b/src/components/video-editor/videoPlayback/overlayUtils.ts
new file mode 100644
index 0000000..0859934
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/overlayUtils.ts
@@ -0,0 +1,64 @@
+import { getZoomScale, type ZoomFocus, type ZoomRegion } from "../types";
+import { clampFocusToScale } from "./focusUtils";
+
+interface OverlayUpdateParams {
+	overlayEl: HTMLDivElement;
+	indicatorEl: HTMLDivElement;
+	region: ZoomRegion | null;
+	focusOverride?: ZoomFocus;
+	videoSize: { width: number; height: number };
+	baseScale: number;
+	isPlaying: boolean;
+}
+
+export function updateOverlayIndicator(params: OverlayUpdateParams) {
+	const { overlayEl, indicatorEl, region, focusOverride, videoSize, baseScale, isPlaying } = params;
+
+	if (!region || region.focusMode === "auto") {
+		indicatorEl.style.display = "none";
+		overlayEl.style.pointerEvents = "none";
+		return;
+	}
+
+	const stageWidth = overlayEl.clientWidth;
+	const stageHeight = overlayEl.clientHeight;
+
+	if (!stageWidth || !stageHeight) {
+		indicatorEl.style.display = "none";
+		overlayEl.style.pointerEvents = "none";
+		return;
+	}
+
+	if (!videoSize.width || !videoSize.height || baseScale <= 0) {
+		indicatorEl.style.display = "none";
+		overlayEl.style.pointerEvents = isPlaying ? "none" : "auto";
+		return;
+	}
+
+	const zoomScale = getZoomScale(region);
+	const focus = clampFocusToScale(focusOverride ?? region.focus, zoomScale);
+
+	// Zoom window shows the stage area that will be visible after zooming (1/zoomScale of stage dimensions)
+	const indicatorWidth = stageWidth / zoomScale;
+	const indicatorHeight = stageHeight / zoomScale;
+
+	const rawLeft = focus.cx * stageWidth - indicatorWidth / 2;
+	const rawTop = focus.cy * stageHeight - indicatorHeight / 2;
+
+	const adjustedLeft =
+		indicatorWidth >= stageWidth
+			? (stageWidth - indicatorWidth) / 2
+			: Math.max(0, Math.min(stageWidth - indicatorWidth, rawLeft));
+
+	const adjustedTop =
+		indicatorHeight >= stageHeight
+			? (stageHeight - indicatorHeight) / 2
+			: Math.max(0, Math.min(stageHeight - indicatorHeight, rawTop));
+
+	indicatorEl.style.display = "block";
+	indicatorEl.style.width = `${indicatorWidth}px`;
+	indicatorEl.style.height = `${indicatorHeight}px`;
+	indicatorEl.style.left = `${adjustedLeft}px`;
+	indicatorEl.style.top = `${adjustedTop}px`;
+	overlayEl.style.pointerEvents = isPlaying ? "none" : "auto";
+}
diff --git a/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts b/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts
new file mode 100644
index 0000000..4a0cd29
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts
@@ -0,0 +1,70 @@
+import crosshairUrl from "../../../assets/cursors/Cursor=Cross.svg";
+import arrowUrl from "../../../assets/cursors/Cursor=Default.svg";
+import closedHandUrl from "../../../assets/cursors/Cursor=Hand-(Grabbing).svg";
+import openHandUrl from "../../../assets/cursors/Cursor=Hand-(Open).svg";
+import pointerUrl from "../../../assets/cursors/Cursor=Hand-(Pointing).svg";
+import resizeNsUrl from "../../../assets/cursors/Cursor=Resize-North-South.svg";
+import resizeEwUrl from "../../../assets/cursors/Cursor=Resize-West-East.svg";
+import textUrl from "../../../assets/cursors/Cursor=Text-Cursor.svg";
+import type { CursorTelemetryPoint } from "../types";
+
+type CursorAssetKey = NonNullable<CursorTelemetryPoint["cursorType"]>;
+
+export type UploadedCursorAsset = {
+	url: string;
+	trim: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+	fallbackAnchor: {
+		x: number;
+		y: number;
+	};
+};
+
+export const UPLOADED_CURSOR_SAMPLE_SIZE = 1024;
+
+export const uploadedCursorAssets: Partial<Record<CursorAssetKey, UploadedCursorAsset>> = {
+	arrow: {
+		url: arrowUrl,
+		trim: { x: 480, y: 435, width: 333, height: 553 },
+		fallbackAnchor: { x: 0.18, y: 0.1 },
+	},
+	text: {
+		url: textUrl,
+		trim: { x: 404, y: 192, width: 247, height: 596 },
+		fallbackAnchor: { x: 0.5, y: 0.5 },
+	},
+	pointer: {
+		url: pointerUrl,
+		trim: { x: 352, y: 441, width: 466, height: 583 },
+		fallbackAnchor: { x: 0.37, y: 0.08 },
+	},
+	crosshair: {
+		url: crosshairUrl,
+		trim: { x: 288, y: 288, width: 480, height: 480 },
+		fallbackAnchor: { x: 0.5, y: 0.5 },
+	},
+	"open-hand": {
+		url: openHandUrl,
+		trim: { x: 288, y: 188, width: 512, height: 580 },
+		fallbackAnchor: { x: 0.5, y: 0.28 },
+	},
+	"closed-hand": {
+		url: closedHandUrl,
+		trim: { x: 344, y: 365, width: 432, height: 403 },
+		fallbackAnchor: { x: 0.5, y: 0.28 },
+	},
+	"resize-ew": {
+		url: resizeEwUrl,
+		trim: { x: 187, y: 384, width: 669, height: 270 },
+		fallbackAnchor: { x: 0.5, y: 0.5 },
+	},
+	"resize-ns": {
+		url: resizeNsUrl,
+		trim: { x: 376, y: 178, width: 271, height: 669 },
+		fallbackAnchor: { x: 0.5, y: 0.5 },
+	},
+};
diff --git a/src/components/video-editor/videoPlayback/videoEventHandlers.ts b/src/components/video-editor/videoPlayback/videoEventHandlers.ts
new file mode 100644
index 0000000..a26107d
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/videoEventHandlers.ts
@@ -0,0 +1,187 @@
+import type React from "react";
+import type { SpeedRegion, TrimRegion } from "../types";
+
+// Keep "scrub mode" on for a brief tail after `seeked` — rapid drag-scrubbing
+// fires `seeking`/`seeked` dozens of times per second, and toggling effects
+// each time would flicker.
+const SCRUB_END_DEBOUNCE_MS = 150;
+
+interface VideoEventHandlersParams {
+	video: HTMLVideoElement;
+	isSeekingRef: React.MutableRefObject<boolean>;
+	isPlayingRef: React.MutableRefObject<boolean>;
+	allowPlaybackRef: React.MutableRefObject<boolean>;
+	currentTimeRef: React.MutableRefObject<number>;
+	timeUpdateAnimationRef: React.MutableRefObject<number | null>;
+	onPlayStateChange: (playing: boolean) => void;
+	onTimeUpdate: (time: number) => void;
+	trimRegionsRef: React.MutableRefObject<TrimRegion[]>;
+	speedRegionsRef: React.MutableRefObject<SpeedRegion[]>;
+	isScrubbingRef?: React.MutableRefObject<boolean>;
+	scrubEndTimerRef?: React.MutableRefObject<number | null>;
+	onScrubChange?: (scrubbing: boolean) => void;
+}
+
+export function createVideoEventHandlers(params: VideoEventHandlersParams) {
+	const {
+		video,
+		isSeekingRef,
+		isPlayingRef,
+		allowPlaybackRef,
+		currentTimeRef,
+		timeUpdateAnimationRef,
+		onPlayStateChange,
+		onTimeUpdate,
+		trimRegionsRef,
+		speedRegionsRef,
+		isScrubbingRef,
+		scrubEndTimerRef,
+		onScrubChange,
+	} = params;
+
+	const clearScrubEndTimer = () => {
+		if (scrubEndTimerRef && scrubEndTimerRef.current !== null) {
+			window.clearTimeout(scrubEndTimerRef.current);
+			scrubEndTimerRef.current = null;
+		}
+	};
+
+	const emitTime = (timeValue: number) => {
+		currentTimeRef.current = timeValue * 1000;
+		onTimeUpdate(timeValue);
+	};
+
+	// Helper function to check if current time is within a trim region
+	const findActiveTrimRegion = (currentTimeMs: number): TrimRegion | null => {
+		const trimRegions = trimRegionsRef.current;
+		return (
+			trimRegions.find(
+				(region) => currentTimeMs >= region.startMs && currentTimeMs < region.endMs,
+			) || null
+		);
+	};
+
+	// Helper function to find the active speed region at the current time
+	const findActiveSpeedRegion = (currentTimeMs: number): SpeedRegion | null => {
+		return (
+			speedRegionsRef.current.find(
+				(region) => currentTimeMs >= region.startMs && currentTimeMs < region.endMs,
+			) || null
+		);
+	};
+
+	function updateTime() {
+		if (!video) return;
+
+		const currentTimeMs = video.currentTime * 1000;
+		const activeTrimRegion = findActiveTrimRegion(currentTimeMs);
+
+		// If we're in a trim region during playback, skip to the end of it
+		if (activeTrimRegion && !video.paused && !video.ended) {
+			const skipToTime = activeTrimRegion.endMs / 1000;
+
+			// If the skip would take us past the video duration, pause instead
+			if (skipToTime >= video.duration) {
+				video.pause();
+			} else {
+				video.currentTime = skipToTime;
+				emitTime(skipToTime);
+			}
+		} else {
+			// Apply playback speed from active speed region
+			const activeSpeedRegion = findActiveSpeedRegion(currentTimeMs);
+			video.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+			emitTime(video.currentTime);
+		}
+
+		if (!video.paused && !video.ended) {
+			timeUpdateAnimationRef.current = requestAnimationFrame(updateTime);
+		}
+	}
+
+	const handlePlay = () => {
+		if (isSeekingRef.current) {
+			video.pause();
+			return;
+		}
+
+		if (!allowPlaybackRef.current) {
+			video.pause();
+			return;
+		}
+
+		isPlayingRef.current = true;
+		onPlayStateChange(true);
+		if (timeUpdateAnimationRef.current) {
+			cancelAnimationFrame(timeUpdateAnimationRef.current);
+		}
+		timeUpdateAnimationRef.current = requestAnimationFrame(updateTime);
+	};
+
+	const handlePause = () => {
+		isPlayingRef.current = false;
+		onPlayStateChange(false);
+		if (timeUpdateAnimationRef.current) {
+			cancelAnimationFrame(timeUpdateAnimationRef.current);
+			timeUpdateAnimationRef.current = null;
+		}
+		emitTime(video.currentTime);
+	};
+
+	const handleSeeked = () => {
+		isSeekingRef.current = false;
+
+		if (isScrubbingRef && scrubEndTimerRef) {
+			clearScrubEndTimer();
+			scrubEndTimerRef.current = window.setTimeout(() => {
+				isScrubbingRef.current = false;
+				scrubEndTimerRef.current = null;
+				onScrubChange?.(false);
+			}, SCRUB_END_DEBOUNCE_MS);
+		}
+
+		const currentTimeMs = video.currentTime * 1000;
+		const activeTrimRegion = findActiveTrimRegion(currentTimeMs);
+
+		// If we seeked into a trim region while playing, skip to the end
+		if (activeTrimRegion && isPlayingRef.current && !video.paused) {
+			const skipToTime = activeTrimRegion.endMs / 1000;
+
+			if (skipToTime >= video.duration) {
+				video.pause();
+			} else {
+				video.currentTime = skipToTime;
+				emitTime(skipToTime);
+			}
+		} else {
+			if (!isPlayingRef.current && !video.paused) {
+				video.pause();
+			}
+			emitTime(video.currentTime);
+		}
+	};
+
+	const handleSeeking = () => {
+		isSeekingRef.current = true;
+
+		if (isScrubbingRef) {
+			clearScrubEndTimer();
+			if (!isScrubbingRef.current) {
+				isScrubbingRef.current = true;
+				onScrubChange?.(true);
+			}
+		}
+
+		if (!isPlayingRef.current && !video.paused) {
+			video.pause();
+		}
+		emitTime(video.currentTime);
+	};
+
+	return {
+		handlePlay,
+		handlePause,
+		handleSeeked,
+		handleSeeking,
+	};
+}
diff --git a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
new file mode 100644
index 0000000..1bfa465
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
@@ -0,0 +1,353 @@
+import type { CursorTelemetryPoint, Rotation3D, ZoomFocus, ZoomRegion } from "../types";
+import { DEFAULT_ROTATION_3D, getRotation3D, getZoomScale, lerpRotation3D } from "../types";
+import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./constants";
+import { interpolateCursorAt } from "./cursorFollowUtils";
+import { clampFocusToScale } from "./focusUtils";
+import { clamp01, cubicBezier, easeOutScreenStudio } from "./mathUtils";
+
+const CHAINED_ZOOM_PAN_GAP_MS = 1500;
+const CONNECTED_ZOOM_PAN_DURATION_MS = 1000;
+const ZOOM_IN_OVERLAP_MS = 500;
+
+type DominantRegionOptions = {
+	connectZooms?: boolean;
+	cursorTelemetry?: CursorTelemetryPoint[];
+	viewportRatio?: ViewportRatio;
+};
+
+type ConnectedRegionPair = {
+	currentRegion: ZoomRegion;
+	nextRegion: ZoomRegion;
+	transitionStart: number;
+	transitionEnd: number;
+};
+
+type ConnectedPanTransition = {
+	progress: number;
+	startFocus: ZoomFocus;
+	endFocus: ZoomFocus;
+	startScale: number;
+	endScale: number;
+};
+
+function lerp(start: number, end: number, amount: number) {
+	return start + (end - start) * amount;
+}
+
+function easeConnectedPan(value: number) {
+	return cubicBezier(0.1, 0.0, 0.2, 1.0, value);
+}
+
+export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
+	const zoomInEnd = region.startMs + ZOOM_IN_OVERLAP_MS;
+	const leadInStart = zoomInEnd - ZOOM_IN_TRANSITION_WINDOW_MS;
+	const leadOutEnd = region.endMs + TRANSITION_WINDOW_MS;
+
+	if (timeMs < leadInStart || timeMs > leadOutEnd) {
+		return 0;
+	}
+
+	if (timeMs < zoomInEnd) {
+		const progress = (timeMs - leadInStart) / ZOOM_IN_TRANSITION_WINDOW_MS;
+		return easeOutScreenStudio(progress);
+	}
+
+	if (timeMs <= region.endMs) {
+		return 1;
+	}
+
+	const progress = clamp01((timeMs - region.endMs) / TRANSITION_WINDOW_MS);
+	return 1 - easeOutScreenStudio(progress);
+}
+
+function getLinearFocus(start: ZoomFocus, end: ZoomFocus, amount: number): ZoomFocus {
+	return {
+		cx: lerp(start.cx, end.cx, amount),
+		cy: lerp(start.cy, end.cy, amount),
+	};
+}
+
+interface ViewportRatio {
+	widthRatio: number;
+	heightRatio: number;
+}
+
+function getResolvedFocus(
+	region: ZoomRegion,
+	zoomScale: number,
+	timeMs?: number,
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	let focus = region.focus;
+
+	if (
+		region.focusMode === "auto" &&
+		cursorTelemetry &&
+		cursorTelemetry.length > 0 &&
+		timeMs !== undefined
+	) {
+		const cursorFocus = interpolateCursorAt(cursorTelemetry, timeMs);
+		if (cursorFocus) {
+			focus = cursorFocus;
+		}
+	}
+
+	return clampFocusToScale(focus, zoomScale, viewportRatio);
+}
+
+function getConnectedRegionPairs(regions: ZoomRegion[]) {
+	const sortedRegions = [...regions].sort((a, b) => a.startMs - b.startMs);
+	const pairs: ConnectedRegionPair[] = [];
+
+	for (let index = 0; index < sortedRegions.length - 1; index += 1) {
+		const currentRegion = sortedRegions[index];
+		const nextRegion = sortedRegions[index + 1];
+		const gapMs = nextRegion.startMs - currentRegion.endMs;
+
+		if (gapMs > CHAINED_ZOOM_PAN_GAP_MS) {
+			continue;
+		}
+
+		pairs.push({
+			currentRegion,
+			nextRegion,
+			transitionStart: currentRegion.endMs,
+			transitionEnd: currentRegion.endMs + CONNECTED_ZOOM_PAN_DURATION_MS,
+		});
+	}
+
+	return pairs;
+}
+
+function getActiveRegion(
+	regions: ZoomRegion[],
+	timeMs: number,
+	connectedPairs: ConnectedRegionPair[],
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
+	const activeRegions = regions
+		.map((region) => {
+			const outgoingPair = connectedPairs.find((pair) => pair.currentRegion.id === region.id);
+			if (outgoingPair && timeMs > outgoingPair.currentRegion.endMs) {
+				return { region, strength: 0 };
+			}
+
+			const incomingPair = connectedPairs.find((pair) => pair.nextRegion.id === region.id);
+			if (incomingPair && timeMs < incomingPair.transitionEnd) {
+				return { region, strength: 0 };
+			}
+
+			return { region, strength: computeRegionStrength(region, timeMs) };
+		})
+		.filter((entry) => entry.strength > 0)
+		.sort((left, right) => {
+			if (right.strength !== left.strength) {
+				return right.strength - left.strength;
+			}
+
+			return right.region.startMs - left.region.startMs;
+		});
+
+	if (activeRegions.length === 0) {
+		return null;
+	}
+
+	const activeRegion = activeRegions[0].region;
+	const activeScale = getZoomScale(activeRegion);
+
+	return {
+		region: {
+			...activeRegion,
+			focus: getResolvedFocus(activeRegion, activeScale, timeMs, cursorTelemetry, viewportRatio),
+		},
+		strength: activeRegions[0].strength,
+		blendedScale: null,
+		rotation3D: getRotation3D(activeRegion),
+	};
+}
+
+function getConnectedRegionHold(
+	timeMs: number,
+	connectedPairs: ConnectedRegionPair[],
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
+	for (const pair of connectedPairs) {
+		if (timeMs > pair.transitionEnd && timeMs < pair.nextRegion.startMs) {
+			const nextScale = getZoomScale(pair.nextRegion);
+			return {
+				region: {
+					...pair.nextRegion,
+					focus: getResolvedFocus(
+						pair.nextRegion,
+						nextScale,
+						timeMs,
+						cursorTelemetry,
+						viewportRatio,
+					),
+				},
+				strength: 1,
+				blendedScale: null,
+				rotation3D: getRotation3D(pair.nextRegion),
+			};
+		}
+	}
+
+	return null;
+}
+
+function getConnectedRegionTransition(
+	connectedPairs: ConnectedRegionPair[],
+	timeMs: number,
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
+	for (const pair of connectedPairs) {
+		const { currentRegion, nextRegion, transitionStart, transitionEnd } = pair;
+
+		if (timeMs < transitionStart || timeMs > transitionEnd) {
+			continue;
+		}
+
+		const transitionProgress = easeConnectedPan(
+			clamp01((timeMs - transitionStart) / Math.max(1, transitionEnd - transitionStart)),
+		);
+		const currentScale = getZoomScale(currentRegion);
+		const nextScale = getZoomScale(nextRegion);
+		const transitionScale = lerp(currentScale, nextScale, transitionProgress);
+		// Both regions share the same timeMs, so interpolate cursor once and reuse.
+		const sharedCursorFocus =
+			cursorTelemetry && cursorTelemetry.length > 0
+				? interpolateCursorAt(cursorTelemetry, timeMs)
+				: null;
+		const currentFocus = clampFocusToScale(
+			currentRegion.focusMode === "auto" && sharedCursorFocus
+				? sharedCursorFocus
+				: currentRegion.focus,
+			currentScale,
+			viewportRatio,
+		);
+		const nextFocus = clampFocusToScale(
+			nextRegion.focusMode === "auto" && sharedCursorFocus ? sharedCursorFocus : nextRegion.focus,
+			nextScale,
+			viewportRatio,
+		);
+		const transitionFocus = getLinearFocus(currentFocus, nextFocus, transitionProgress);
+		const transitionRotation = lerpRotation3D(
+			getRotation3D(currentRegion),
+			getRotation3D(nextRegion),
+			transitionProgress,
+		);
+
+		return {
+			region: {
+				...nextRegion,
+				focus: transitionFocus,
+			},
+			strength: 1,
+			blendedScale: transitionScale,
+			rotation3D: transitionRotation,
+			transition: {
+				progress: transitionProgress,
+				startFocus: currentFocus,
+				endFocus: nextFocus,
+				startScale: currentScale,
+				endScale: nextScale,
+			},
+		};
+	}
+
+	return null;
+}
+
+type DominantRegionResult = {
+	region: ZoomRegion | null;
+	strength: number;
+	blendedScale: number | null;
+	rotation3D: Rotation3D;
+	transition: ConnectedPanTransition | null;
+};
+
+// Single-slot cache: the ticker calls findDominantRegion at 60fps with mostly
+// unchanged inputs (especially while paused). Reusing the previous result when
+// inputs match avoids the per-frame O(N) region scan + allocations.
+let dominantRegionCache: {
+	regions: ZoomRegion[];
+	timeMsKey: number;
+	telemetry: CursorTelemetryPoint[] | undefined;
+	connectZooms: boolean;
+	viewportRatio: ViewportRatio | undefined;
+	result: DominantRegionResult;
+} | null = null;
+
+export function findDominantRegion(
+	regions: ZoomRegion[],
+	timeMs: number,
+	options: DominantRegionOptions = {},
+): DominantRegionResult {
+	const connectZooms = !!options.connectZooms;
+	const telemetry = options.cursorTelemetry;
+	const vr = options.viewportRatio;
+	const timeMsKey = Math.round(timeMs);
+
+	if (
+		dominantRegionCache &&
+		dominantRegionCache.regions === regions &&
+		dominantRegionCache.timeMsKey === timeMsKey &&
+		dominantRegionCache.telemetry === telemetry &&
+		dominantRegionCache.connectZooms === connectZooms &&
+		dominantRegionCache.viewportRatio === vr
+	) {
+		return dominantRegionCache.result;
+	}
+
+	const connectedPairs = connectZooms ? getConnectedRegionPairs(regions) : [];
+
+	let result: DominantRegionResult;
+	if (connectZooms) {
+		const connectedTransition = getConnectedRegionTransition(connectedPairs, timeMs, telemetry, vr);
+		if (connectedTransition) {
+			result = connectedTransition;
+		} else {
+			const connectedHold = getConnectedRegionHold(timeMs, connectedPairs, telemetry, vr);
+			if (connectedHold) {
+				result = { ...connectedHold, transition: null };
+			} else {
+				const activeRegion = getActiveRegion(regions, timeMs, connectedPairs, telemetry, vr);
+				result = activeRegion
+					? { ...activeRegion, transition: null }
+					: {
+							region: null,
+							strength: 0,
+							blendedScale: null,
+							rotation3D: DEFAULT_ROTATION_3D,
+							transition: null,
+						};
+			}
+		}
+	} else {
+		const activeRegion = getActiveRegion(regions, timeMs, connectedPairs, telemetry, vr);
+		result = activeRegion
+			? { ...activeRegion, transition: null }
+			: {
+					region: null,
+					strength: 0,
+					blendedScale: null,
+					rotation3D: DEFAULT_ROTATION_3D,
+					transition: null,
+				};
+	}
+
+	dominantRegionCache = {
+		regions,
+		timeMsKey,
+		telemetry,
+		connectZooms,
+		viewportRatio: vr,
+		result,
+	};
+
+	return result;
+}
diff --git a/src/components/video-editor/videoPlayback/zoomTransform.ts b/src/components/video-editor/videoPlayback/zoomTransform.ts
new file mode 100644
index 0000000..800949f
--- /dev/null
+++ b/src/components/video-editor/videoPlayback/zoomTransform.ts
@@ -0,0 +1,251 @@
+import { BlurFilter, Container } from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
+
+const PEAK_VELOCITY_PPS = 1400;
+const MAX_BLUR_PX = 14;
+const VELOCITY_THRESHOLD_PPS = 12;
+const MAX_AMOUNT_BOOST = 2.2;
+
+function getMotionBlurAmountResponse(motionBlurAmount: number) {
+	const clampedAmount = Math.min(1, Math.max(0, motionBlurAmount));
+	// Keep the low end usable while giving the top of the slider substantially more headroom.
+	return clampedAmount * (1 + (MAX_AMOUNT_BOOST - 1) * clampedAmount);
+}
+
+export interface MotionBlurState {
+	lastFrameTimeMs: number;
+	prevCamX: number;
+	prevCamY: number;
+	prevCamScale: number;
+	initialized: boolean;
+}
+
+export function createMotionBlurState(): MotionBlurState {
+	return {
+		lastFrameTimeMs: 0,
+		prevCamX: 0,
+		prevCamY: 0,
+		prevCamScale: 1,
+		initialized: false,
+	};
+}
+
+interface TransformParams {
+	cameraContainer: Container;
+	blurFilter: BlurFilter | null;
+	motionBlurFilter?: MotionBlurFilter | null;
+	stageSize: { width: number; height: number };
+	baseMask: { x: number; y: number; width: number; height: number };
+	zoomScale: number;
+	zoomProgress?: number;
+	focusX: number;
+	focusY: number;
+	motionIntensity: number;
+	motionVector?: { x: number; y: number };
+	isPlaying: boolean;
+	motionBlurAmount?: number;
+	transformOverride?: AppliedTransform;
+	motionBlurState?: MotionBlurState;
+	frameTimeMs?: number;
+}
+
+interface AppliedTransform {
+	scale: number;
+	x: number;
+	y: number;
+}
+
+interface FocusFromTransformGeometry {
+	stageSize: { width: number; height: number };
+	baseMask: { x: number; y: number; width: number; height: number };
+	zoomScale: number;
+	x: number;
+	y: number;
+}
+
+interface ZoomTransformGeometry {
+	stageSize: { width: number; height: number };
+	baseMask: { x: number; y: number; width: number; height: number };
+	zoomScale: number;
+	zoomProgress?: number;
+	focusX: number;
+	focusY: number;
+}
+
+export function computeZoomTransform({
+	stageSize,
+	baseMask,
+	zoomScale,
+	zoomProgress = 1,
+	focusX,
+	focusY,
+}: ZoomTransformGeometry): AppliedTransform {
+	if (
+		stageSize.width <= 0 ||
+		stageSize.height <= 0 ||
+		baseMask.width <= 0 ||
+		baseMask.height <= 0
+	) {
+		return { scale: 1, x: 0, y: 0 };
+	}
+
+	const progress = Math.min(1, Math.max(0, zoomProgress));
+	// Focus coordinates are stage-normalized (0-1 of full canvas),
+	// so map directly to stage pixels, not through baseMask.
+	const focusStagePxX = focusX * stageSize.width;
+	const focusStagePxY = focusY * stageSize.height;
+	const stageCenterX = stageSize.width / 2;
+	const stageCenterY = stageSize.height / 2;
+	const scale = 1 + (zoomScale - 1) * progress;
+	const finalX = stageCenterX - focusStagePxX * zoomScale;
+	const finalY = stageCenterY - focusStagePxY * zoomScale;
+
+	return {
+		scale,
+		x: finalX * progress,
+		y: finalY * progress,
+	};
+}
+
+export function computeFocusFromTransform({
+	stageSize,
+	baseMask,
+	zoomScale,
+	x,
+	y,
+}: FocusFromTransformGeometry) {
+	if (
+		stageSize.width <= 0 ||
+		stageSize.height <= 0 ||
+		baseMask.width <= 0 ||
+		baseMask.height <= 0 ||
+		zoomScale <= 0
+	) {
+		return { cx: 0.5, cy: 0.5 };
+	}
+
+	const stageCenterX = stageSize.width / 2;
+	const stageCenterY = stageSize.height / 2;
+	const focusStagePxX = (stageCenterX - x) / zoomScale;
+	const focusStagePxY = (stageCenterY - y) / zoomScale;
+
+	return {
+		cx: focusStagePxX / stageSize.width,
+		cy: focusStagePxY / stageSize.height,
+	};
+}
+
+export function applyZoomTransform({
+	cameraContainer,
+	blurFilter,
+	motionBlurFilter,
+	stageSize,
+	baseMask,
+	zoomScale,
+	zoomProgress = 1,
+	focusX,
+	focusY,
+	motionIntensity: _motionIntensity,
+	motionVector: _motionVector,
+	isPlaying,
+	motionBlurAmount = 0,
+	transformOverride,
+	motionBlurState,
+	frameTimeMs,
+}: TransformParams): AppliedTransform {
+	if (
+		stageSize.width <= 0 ||
+		stageSize.height <= 0 ||
+		baseMask.width <= 0 ||
+		baseMask.height <= 0
+	) {
+		return { scale: 1, x: 0, y: 0 };
+	}
+
+	const transform =
+		transformOverride ??
+		computeZoomTransform({
+			stageSize,
+			baseMask,
+			zoomScale,
+			zoomProgress,
+			focusX,
+			focusY,
+		});
+
+	// Apply position & scale to camera container
+	cameraContainer.scale.set(transform.scale);
+	cameraContainer.position.set(transform.x, transform.y);
+
+	if (motionBlurState && motionBlurFilter && motionBlurAmount > 0 && isPlaying) {
+		const now = frameTimeMs ?? performance.now();
+
+		if (!motionBlurState.initialized) {
+			motionBlurState.prevCamX = transform.x;
+			motionBlurState.prevCamY = transform.y;
+			motionBlurState.prevCamScale = transform.scale;
+			motionBlurState.lastFrameTimeMs = now;
+			motionBlurState.initialized = true;
+			motionBlurFilter.velocity = { x: 0, y: 0 };
+			motionBlurFilter.kernelSize = 5;
+			motionBlurFilter.offset = 0;
+			if (blurFilter) blurFilter.blur = 0;
+		} else {
+			const dtMs = Math.min(80, Math.max(1, now - motionBlurState.lastFrameTimeMs));
+			const dtSeconds = dtMs / 1000;
+			motionBlurState.lastFrameTimeMs = now;
+			const amountResponse = getMotionBlurAmountResponse(motionBlurAmount);
+
+			// Camera displacement this frame (stage-px)
+			const dx = transform.x - motionBlurState.prevCamX;
+			const dy = transform.y - motionBlurState.prevCamY;
+			const dScale = transform.scale - motionBlurState.prevCamScale;
+
+			motionBlurState.prevCamX = transform.x;
+			motionBlurState.prevCamY = transform.y;
+			motionBlurState.prevCamScale = transform.scale;
+
+			// Velocity in px/s (translation + scale-change contribution)
+			const velocityX = dx / dtSeconds;
+			const velocityY = dy / dtSeconds;
+			const scaleVelocity =
+				Math.abs(dScale / dtSeconds) * Math.max(stageSize.width, stageSize.height) * 0.5;
+			const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY) + scaleVelocity;
+
+			const normalised = Math.min(1, speed / PEAK_VELOCITY_PPS);
+			const targetBlur =
+				speed < VELOCITY_THRESHOLD_PPS ? 0 : normalised * normalised * MAX_BLUR_PX * amountResponse;
+
+			const dirMag = Math.sqrt(velocityX * velocityX + velocityY * velocityY) || 1;
+			const velocityScale = targetBlur * 2.4;
+			motionBlurFilter.velocity =
+				targetBlur > 0
+					? { x: (velocityX / dirMag) * velocityScale, y: (velocityY / dirMag) * velocityScale }
+					: { x: 0, y: 0 };
+			motionBlurFilter.kernelSize = targetBlur > 8 ? 15 : targetBlur > 4 ? 11 : 7;
+			motionBlurFilter.offset = targetBlur > 0.5 ? -0.2 : 0;
+
+			if (blurFilter) {
+				blurFilter.blur = 0;
+			}
+		}
+	} else {
+		if (motionBlurFilter) {
+			motionBlurFilter.velocity = { x: 0, y: 0 };
+			motionBlurFilter.kernelSize = 5;
+			motionBlurFilter.offset = 0;
+		}
+		if (blurFilter) {
+			blurFilter.blur = 0;
+		}
+		if (motionBlurState) {
+			motionBlurState.initialized = false;
+		}
+	}
+
+	return {
+		scale: transform.scale,
+		x: transform.x,
+		y: transform.y,
+	};
+}
diff --git a/src/contexts/I18nContext.tsx b/src/contexts/I18nContext.tsx
new file mode 100644
index 0000000..5d7534b
--- /dev/null
+++ b/src/contexts/I18nContext.tsx
@@ -0,0 +1,193 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { DEFAULT_LOCALE, type I18nNamespace, LOCALE_STORAGE_KEY, type Locale } from "@/i18n/config";
+import { getAvailableLocales, translate } from "@/i18n/loader";
+
+type TranslateVars = Record<string, string | number>;
+
+interface I18nContextValue {
+	locale: Locale;
+	setLocale: (locale: Locale) => void;
+	t: (qualifiedKey: string, vars?: TranslateVars) => string;
+	systemLocaleSuggestion: Locale | null;
+	acceptSystemLocaleSuggestion: () => void;
+	dismissSystemLocaleSuggestion: () => void;
+	resolveSystemLocaleSuggestion: () => void;
+}
+
+const SYSTEM_LANGUAGE_PROMPT_SEEN_KEY = "openscreen-system-language-prompt-seen";
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function useI18n(): I18nContextValue {
+	const ctx = useContext(I18nContext);
+	if (!ctx) throw new Error("useI18n must be used within <I18nProvider>");
+	return ctx;
+}
+
+export function useScopedT(namespace: I18nNamespace) {
+	const { locale } = useI18n();
+	return useCallback(
+		(key: string, vars?: TranslateVars): string => translate(locale, namespace, key, vars),
+		[locale, namespace],
+	);
+}
+
+function isSupportedLocale(value: string): value is Locale {
+	return getAvailableLocales().includes(value);
+}
+
+function getSupportedSystemLocale(): Locale | null {
+	if (typeof navigator === "undefined") return null;
+	const availableLocales = getAvailableLocales();
+
+	const candidates =
+		Array.isArray(navigator.languages) && navigator.languages.length > 0
+			? navigator.languages
+			: [navigator.language];
+
+	for (const candidate of candidates) {
+		if (!candidate) continue;
+		if (isSupportedLocale(candidate)) return candidate;
+
+		const exactMatch = availableLocales.find(
+			(locale) => locale.toLowerCase() === candidate.toLowerCase(),
+		);
+		if (exactMatch) return exactMatch;
+
+		const baseLanguage = candidate.split("-")[0]?.toLowerCase();
+		if (!baseLanguage) continue;
+
+		if (baseLanguage === "zh" && availableLocales.includes("zh-CN")) return "zh-CN";
+
+		const baseMatch = availableLocales.find((locale) => locale.toLowerCase() === baseLanguage);
+		if (baseMatch) return baseMatch;
+	}
+
+	return null;
+}
+
+function getInitialLocale(): Locale {
+	try {
+		const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+		if (stored && isSupportedLocale(stored)) return stored;
+	} catch {
+		// localStorage may be unavailable
+	}
+	return DEFAULT_LOCALE;
+}
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+	const [locale, setLocaleState] = useState<Locale>(getInitialLocale);
+	const [systemLocaleSuggestion, setSystemLocaleSuggestion] = useState<Locale | null>(null);
+	const hasRunSystemLocaleCheckRef = useRef(false);
+
+	const markPromptAsHandled = useCallback(() => {
+		try {
+			localStorage.setItem(SYSTEM_LANGUAGE_PROMPT_SEEN_KEY, "1");
+		} catch {
+			// localStorage may be unavailable
+		}
+	}, []);
+
+	const setLocale = useCallback((newLocale: Locale) => {
+		setLocaleState(newLocale);
+		try {
+			localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+		} catch {
+			// localStorage may be unavailable
+		}
+		document.documentElement.lang = newLocale;
+		// Notify Electron main process
+		window.electronAPI?.setLocale?.(newLocale);
+	}, []);
+
+	useEffect(() => {
+		document.documentElement.lang = locale;
+		window.electronAPI?.setLocale?.(locale);
+	}, [locale]);
+
+	useEffect(() => {
+		if (hasRunSystemLocaleCheckRef.current) return;
+		hasRunSystemLocaleCheckRef.current = true;
+
+		let hasStoredLocale = false;
+		let hasHandledSystemPrompt = false;
+		try {
+			const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+			hasStoredLocale = Boolean(stored && isSupportedLocale(stored));
+			hasHandledSystemPrompt = localStorage.getItem(SYSTEM_LANGUAGE_PROMPT_SEEN_KEY) === "1";
+		} catch {
+			// localStorage may be unavailable
+		}
+
+		if (hasStoredLocale || hasHandledSystemPrompt) return;
+
+		const detectedSystemLocale = getSupportedSystemLocale();
+		if (!detectedSystemLocale || detectedSystemLocale === DEFAULT_LOCALE) {
+			markPromptAsHandled();
+			return;
+		}
+
+		setSystemLocaleSuggestion(detectedSystemLocale);
+	}, [markPromptAsHandled]);
+
+	const acceptSystemLocaleSuggestion = useCallback(() => {
+		if (!systemLocaleSuggestion) return;
+		setLocale(systemLocaleSuggestion);
+		setSystemLocaleSuggestion(null);
+		markPromptAsHandled();
+	}, [markPromptAsHandled, setLocale, systemLocaleSuggestion]);
+
+	const dismissSystemLocaleSuggestion = useCallback(() => {
+		setSystemLocaleSuggestion(null);
+		markPromptAsHandled();
+	}, [markPromptAsHandled]);
+
+	const resolveSystemLocaleSuggestion = useCallback(() => {
+		setSystemLocaleSuggestion(null);
+		markPromptAsHandled();
+	}, [markPromptAsHandled]);
+
+	const t = useCallback(
+		(qualifiedKey: string, vars?: TranslateVars): string => {
+			const dotIndex = qualifiedKey.indexOf(".");
+			if (dotIndex === -1) return qualifiedKey;
+			const namespace = qualifiedKey.slice(0, dotIndex) as I18nNamespace;
+			const key = qualifiedKey.slice(dotIndex + 1);
+			return translate(locale, namespace, key, vars);
+		},
+		[locale],
+	);
+
+	const value = useMemo<I18nContextValue>(
+		() => ({
+			locale,
+			setLocale,
+			t,
+			systemLocaleSuggestion,
+			acceptSystemLocaleSuggestion,
+			dismissSystemLocaleSuggestion,
+			resolveSystemLocaleSuggestion,
+		}),
+		[
+			locale,
+			setLocale,
+			t,
+			systemLocaleSuggestion,
+			acceptSystemLocaleSuggestion,
+			dismissSystemLocaleSuggestion,
+			resolveSystemLocaleSuggestion,
+		],
+	);
+
+	return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
diff --git a/src/contexts/ShortcutsContext.tsx b/src/contexts/ShortcutsContext.tsx
new file mode 100644
index 0000000..7f52eae
--- /dev/null
+++ b/src/contexts/ShortcutsContext.tsx
@@ -0,0 +1,79 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import { DEFAULT_SHORTCUTS, mergeWithDefaults, type ShortcutsConfig } from "@/lib/shortcuts";
+import { isMac as getIsMac } from "@/utils/platformUtils";
+
+interface ShortcutsContextValue {
+	shortcuts: ShortcutsConfig;
+	isMac: boolean;
+	setShortcuts: (config: ShortcutsConfig) => void;
+	persistShortcuts: (config?: ShortcutsConfig) => Promise<void>;
+	isConfigOpen: boolean;
+	openConfig: () => void;
+	closeConfig: () => void;
+}
+
+const ShortcutsContext = createContext<ShortcutsContextValue | null>(null);
+
+export function useShortcuts(): ShortcutsContextValue {
+	const ctx = useContext(ShortcutsContext);
+	if (!ctx) throw new Error("useShortcuts must be used within <ShortcutsProvider>");
+	return ctx;
+}
+
+export function ShortcutsProvider({ children }: { children: ReactNode }) {
+	const [shortcuts, setShortcuts] = useState<ShortcutsConfig>(DEFAULT_SHORTCUTS);
+	const [isMac, setIsMac] = useState(false);
+	const [isConfigOpen, setIsConfigOpen] = useState(false);
+
+	useEffect(() => {
+		getIsMac()
+			.then(setIsMac)
+			.catch(() => {
+				// Keep default non-mac fallback if detection fails.
+			});
+
+		window.electronAPI
+			?.getShortcuts?.()
+			.then((saved) => {
+				if (saved) {
+					setShortcuts(mergeWithDefaults(saved as Partial<ShortcutsConfig>));
+				}
+			})
+			.catch(() => {
+				// Keep default shortcuts if persisted settings can't be loaded.
+			});
+	}, []);
+
+	const persistShortcuts = useCallback(
+		async (config?: ShortcutsConfig) => {
+			await window.electronAPI?.saveShortcuts?.(config ?? shortcuts);
+		},
+		[shortcuts],
+	);
+
+	const openConfig = useCallback(() => setIsConfigOpen(true), []);
+	const closeConfig = useCallback(() => setIsConfigOpen(false), []);
+
+	const value = useMemo<ShortcutsContextValue>(
+		() => ({
+			shortcuts,
+			isMac,
+			setShortcuts,
+			persistShortcuts,
+			isConfigOpen,
+			openConfig,
+			closeConfig,
+		}),
+		[shortcuts, isMac, persistShortcuts, isConfigOpen, openConfig, closeConfig],
+	);
+
+	return <ShortcutsContext.Provider value={value}>{children}</ShortcutsContext.Provider>;
+}
diff --git a/src/guide/contracts.ts b/src/guide/contracts.ts
new file mode 100644
index 0000000..618e2e9
--- /dev/null
+++ b/src/guide/contracts.ts
@@ -0,0 +1,241 @@
+export const GUIDE_SCHEMA_VERSION = 1;
+
+export type GuideRecordingIdInput = string | number;
+export type GuideEventKind = "click" | "hotkey" | "manual";
+export type GuideEventSource = "cursor-recording" | "guide-hotkey" | "review-ui";
+export type GuideEventButton = "left" | "right" | "middle" | "unknown";
+export type GuideAction = "click" | "choose" | "type" | "wait" | "manual";
+export type GuideTargetRole = "button" | "menu" | "tab" | "field" | "link" | "unknown";
+export type GuideLanguage = "vi" | "en";
+export type GuideAiProvider = "deepseek" | "local";
+export type GuideSecretStorage = "environment" | "none";
+export type GuideOcrProfile = "fast" | "vietnamese" | "hybrid";
+
+export type GuideSessionStatus =
+	| "recording"
+	| "events-ready"
+	| "snapshots-ready"
+	| "ocr-ready"
+	| "draft-ready"
+	| "reviewed";
+
+export type GuideErrorCode =
+	| "guide-session-not-found"
+	| "guide-invalid-input"
+	| "guide-invalid-schema"
+	| "guide-video-load-failed"
+	| "guide-snapshot-failed"
+	| "guide-ocr-unavailable"
+	| "guide-ocr-failed"
+	| "guide-ai-key-missing"
+	| "guide-ai-request-failed"
+	| "guide-ai-invalid-output"
+	| "guide-export-failed"
+	| "guide-internal-error";
+
+export interface GuideEvent {
+	id: string;
+	recordingId: string;
+	kind: GuideEventKind;
+	source: GuideEventSource;
+	timeMs: number;
+	x?: number;
+	y?: number;
+	normalizedX?: number;
+	normalizedY?: number;
+	button?: GuideEventButton;
+	label?: string;
+	screenshotOffsetMs?: number;
+	createdAt: string;
+}
+
+export interface GuideSnapshot {
+	id: string;
+	eventId: string;
+	timeMs: number;
+	offsetMs: number;
+	path: string;
+	markedPath?: string;
+	ocrCompletedAt?: string;
+	width: number;
+	height: number;
+}
+
+export interface OcrBlock {
+	id: string;
+	snapshotId: string;
+	text: string;
+	confidence: number;
+	box: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+}
+
+export interface GuideStepCandidate {
+	id: string;
+	eventId: string;
+	snapshotId?: string;
+	timeMs: number;
+	action: GuideAction;
+	targetText?: string;
+	targetRole?: GuideTargetRole;
+	position?: {
+		normalizedX: number;
+		normalizedY: number;
+		xPercent: number;
+		yPercent: number;
+		description: string;
+	};
+	nearbyText: string[];
+	confidence: number;
+}
+
+export interface GuideMarkerCapturedPayload {
+	recordingId: string;
+	eventId: string;
+	timeMs: number;
+	trigger: "button" | "global-control" | "global-shortcut";
+	normalizedX?: number;
+	normalizedY?: number;
+	rawX?: number;
+	rawY?: number;
+}
+
+export interface GeneratedGuideStep {
+	id: string;
+	order: number;
+	title: string;
+	instruction: string;
+	screenshotPath?: string;
+	sourceCandidateId?: string;
+}
+
+export interface GeneratedGuide {
+	title: string;
+	summary?: string;
+	steps: GeneratedGuideStep[];
+}
+
+export interface GuideSession {
+	schemaVersion: typeof GUIDE_SCHEMA_VERSION;
+	recordingId: string;
+	videoPath: string;
+	cursorPath?: string;
+	guidePath: string;
+	outputDir: string;
+	status: GuideSessionStatus;
+	events: GuideEvent[];
+	snapshots: GuideSnapshot[];
+	ocrBlocks: OcrBlock[];
+	candidates: GuideStepCandidate[];
+	generatedGuide?: GeneratedGuide;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface CaptureGuidePointerMarkerResult {
+	captured: boolean;
+	session?: GuideSession;
+	event?: GuideEvent;
+}
+
+export interface AddGuideMarkerInput {
+	recordingId: GuideRecordingIdInput;
+	timeMs: number;
+	kind: "hotkey" | "manual";
+	label?: string;
+	x?: number;
+	y?: number;
+	normalizedX?: number;
+	normalizedY?: number;
+}
+
+export interface FinalizeGuideEventsInput {
+	recordingId: GuideRecordingIdInput;
+	videoPath: string;
+	cursorPath?: string;
+}
+
+export interface WriteGuideSnapshotInput {
+	recordingId: GuideRecordingIdInput;
+	eventId: string;
+	timeMs: number;
+	offsetMs: number;
+	pngBytes: ArrayBuffer;
+	markedPngBytes?: ArrayBuffer;
+	width: number;
+	height: number;
+}
+
+export interface RunGuideOcrInput {
+	recordingId: GuideRecordingIdInput;
+	snapshotIds?: string[];
+}
+
+export interface GenerateGuideDraftInput {
+	recordingId: GuideRecordingIdInput;
+	language: GuideLanguage;
+	provider: GuideAiProvider;
+}
+
+export interface GuideAiSettings {
+	ocr: {
+		profile: GuideOcrProfile;
+		language: string;
+		updatedAt?: string;
+	};
+	deepseek: {
+		hasApiKey: boolean;
+		apiKeyEnvName: string;
+		baseUrl: string;
+		model: string;
+		storage: GuideSecretStorage;
+		encryptionAvailable: boolean;
+		updatedAt?: string;
+	};
+}
+
+export interface SaveGuideAiSettingsInput {
+	deepseekApiKeyEnvName?: string;
+	clearDeepseekApiKeyEnvName?: boolean;
+	baseUrl?: string;
+	model?: string;
+	ocrProfile?: GuideOcrProfile;
+	ocrLanguage?: string;
+}
+
+export interface SaveGuideInput {
+	recordingId: GuideRecordingIdInput;
+	generatedGuide: GeneratedGuide;
+}
+
+export interface DiscardGuideSessionInput {
+	recordingId: GuideRecordingIdInput;
+}
+
+export interface ExportGuideInput {
+	recordingId: GuideRecordingIdInput;
+}
+
+export interface ExportGuideResult {
+	path: string;
+	session: GuideSession;
+}
+
+export interface GuideIpcSuccess<TData> {
+	success: true;
+	data: TData;
+	message?: string;
+}
+
+export interface GuideIpcFailure {
+	success: false;
+	code: GuideErrorCode;
+	error: string;
+	retryable?: boolean;
+}
+
+export type GuideIpcResult<TData> = GuideIpcSuccess<TData> | GuideIpcFailure;
diff --git a/src/guide/eventBuilder.test.ts b/src/guide/eventBuilder.test.ts
new file mode 100644
index 0000000..0343303
--- /dev/null
+++ b/src/guide/eventBuilder.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it } from "vitest";
+import { buildGuideEventsFromCursor, mergeGuideEvents, sortGuideEvents } from "./eventBuilder";
+
+describe("buildGuideEventsFromCursor", () => {
+	it("converts cursor click samples into guide events", () => {
+		const events = buildGuideEventsFromCursor({
+			recordingId: 123,
+			nowIso: "2026-05-27T00:00:00.000Z",
+			samples: [
+				{ timeMs: 10, cx: 0.2, cy: 0.3, interactionType: "move" },
+				{ timeMs: 20, cx: 0.4, cy: 0.5, interactionType: "click" },
+				{ timeMs: 30, cx: 0.4, cy: 0.5, interactionType: "mouseup" },
+			],
+		});
+
+		expect(events).toHaveLength(1);
+		expect(events[0]).toMatchObject({
+			recordingId: "123",
+			kind: "click",
+			source: "cursor-recording",
+			timeMs: 20,
+			normalizedX: 0.4,
+			normalizedY: 0.5,
+			screenshotOffsetMs: 500,
+		});
+	});
+
+	it("deduplicates click bounce samples close in time and position", () => {
+		const events = buildGuideEventsFromCursor({
+			recordingId: "abc",
+			samples: [
+				{ timeMs: 1000, cx: 0.5, cy: 0.5, interactionType: "click" },
+				{ timeMs: 1050, cx: 0.501, cy: 0.501, interactionType: "click" },
+				{ timeMs: 1500, cx: 0.5, cy: 0.5, interactionType: "click" },
+			],
+		});
+
+		expect(events.map((event) => event.timeMs)).toEqual([1000, 1500]);
+	});
+
+	it("keeps close-timed clicks when positions are meaningfully different", () => {
+		const events = buildGuideEventsFromCursor({
+			recordingId: "abc",
+			samples: [
+				{ timeMs: 1000, cx: 0.2, cy: 0.2, interactionType: "click" },
+				{ timeMs: 1050, cx: 0.8, cy: 0.8, interactionType: "click" },
+			],
+		});
+
+		expect(events).toHaveLength(2);
+	});
+
+	it("sorts guide events by timestamp", () => {
+		expect(
+			sortGuideEvents([
+				{
+					id: "2",
+					recordingId: "r",
+					kind: "manual",
+					source: "review-ui",
+					timeMs: 200,
+					createdAt: "now",
+				},
+				{
+					id: "1",
+					recordingId: "r",
+					kind: "manual",
+					source: "review-ui",
+					timeMs: 100,
+					createdAt: "now",
+				},
+			]).map((event) => event.id),
+		).toEqual(["1", "2"]);
+	});
+
+	it("merges cursor and manual events without dropping manual markers", () => {
+		const events = mergeGuideEvents([
+			{
+				id: "manual",
+				recordingId: "r",
+				kind: "manual",
+				source: "review-ui",
+				timeMs: 120,
+				createdAt: "now",
+			},
+			{
+				id: "click-1",
+				recordingId: "r",
+				kind: "click",
+				source: "cursor-recording",
+				timeMs: 100,
+				normalizedX: 0.5,
+				normalizedY: 0.5,
+				createdAt: "now",
+			},
+			{
+				id: "click-2",
+				recordingId: "r",
+				kind: "click",
+				source: "cursor-recording",
+				timeMs: 150,
+				normalizedX: 0.5,
+				normalizedY: 0.5,
+				createdAt: "now",
+			},
+		]);
+
+		expect(events.map((event) => event.id)).toEqual(["click-1", "manual"]);
+	});
+});
diff --git a/src/guide/eventBuilder.ts b/src/guide/eventBuilder.ts
new file mode 100644
index 0000000..f26a047
--- /dev/null
+++ b/src/guide/eventBuilder.ts
@@ -0,0 +1,137 @@
+import type { CursorRecordingSample } from "@/native/contracts";
+import { type GuideEvent, type GuideRecordingIdInput } from "./contracts";
+
+export const DEFAULT_GUIDE_SCREENSHOT_OFFSET_MS = 500;
+export const DEFAULT_GUIDE_CLICK_DEDUPE_WINDOW_MS = 250;
+export const DEFAULT_GUIDE_CLICK_DEDUPE_RADIUS = 0.004;
+
+export interface BuildGuideEventsFromCursorInput {
+	recordingId: GuideRecordingIdInput;
+	samples: CursorRecordingSample[];
+	screenshotOffsetMs?: number;
+	dedupeWindowMs?: number;
+	dedupeRadius?: number;
+	nowIso?: string;
+}
+
+export function buildGuideEventsFromCursor(input: BuildGuideEventsFromCursorInput): GuideEvent[] {
+	const recordingId = normalizeRecordingId(input.recordingId);
+	if (!recordingId) {
+		return [];
+	}
+
+	const screenshotOffsetMs = Number.isFinite(input.screenshotOffsetMs)
+		? Math.max(0, input.screenshotOffsetMs ?? DEFAULT_GUIDE_SCREENSHOT_OFFSET_MS)
+		: DEFAULT_GUIDE_SCREENSHOT_OFFSET_MS;
+	const createdAt = input.nowIso ?? new Date().toISOString();
+	const clickEvents = input.samples
+		.filter((sample) => sample.interactionType === "click")
+		.map((sample, index): GuideEvent => {
+			const timeMs = Number.isFinite(sample.timeMs) ? Math.max(0, sample.timeMs) : 0;
+			return {
+				id: createGuideEventId(recordingId, timeMs, index),
+				recordingId,
+				kind: "click",
+				source: "cursor-recording",
+				timeMs,
+				normalizedX: clamp01(sample.cx),
+				normalizedY: clamp01(sample.cy),
+				button: "left",
+				screenshotOffsetMs,
+				createdAt,
+			};
+		});
+
+	return dedupeGuideClickEvents(sortGuideEvents(clickEvents), {
+		windowMs: input.dedupeWindowMs ?? DEFAULT_GUIDE_CLICK_DEDUPE_WINDOW_MS,
+		radius: input.dedupeRadius ?? DEFAULT_GUIDE_CLICK_DEDUPE_RADIUS,
+	});
+}
+
+export function mergeGuideEvents(
+	events: GuideEvent[],
+	options: {
+		dedupeWindowMs?: number;
+		dedupeRadius?: number;
+	} = {},
+): GuideEvent[] {
+	const cursorEvents = events.filter((event) => event.source === "cursor-recording");
+	const nonCursorEvents = events.filter((event) => event.source !== "cursor-recording");
+	return sortGuideEvents([
+		...dedupeGuideClickEvents(sortGuideEvents(cursorEvents), {
+			windowMs: options.dedupeWindowMs ?? DEFAULT_GUIDE_CLICK_DEDUPE_WINDOW_MS,
+			radius: options.dedupeRadius ?? DEFAULT_GUIDE_CLICK_DEDUPE_RADIUS,
+		}),
+		...nonCursorEvents,
+	]);
+}
+
+export function sortGuideEvents(events: GuideEvent[]): GuideEvent[] {
+	return [...events].sort((left, right) => left.timeMs - right.timeMs);
+}
+
+export function createGuideEventId(recordingId: string, timeMs: number, index: number): string {
+	return `guide-click-${recordingId}-${Math.round(timeMs)}-${index}`;
+}
+
+function dedupeGuideClickEvents(
+	events: GuideEvent[],
+	options: { windowMs: number; radius: number },
+): GuideEvent[] {
+	const deduped: GuideEvent[] = [];
+	for (const event of events) {
+		const previous = deduped.at(-1);
+		if (previous && isDuplicateClick(previous, event, options)) {
+			continue;
+		}
+		deduped.push(event);
+	}
+	return deduped;
+}
+
+function isDuplicateClick(
+	previous: GuideEvent,
+	next: GuideEvent,
+	options: { windowMs: number; radius: number },
+): boolean {
+	if (previous.source !== "cursor-recording" || next.source !== "cursor-recording") {
+		return false;
+	}
+	if (next.timeMs - previous.timeMs > options.windowMs) {
+		return false;
+	}
+
+	const previousX = previous.normalizedX;
+	const previousY = previous.normalizedY;
+	const nextX = next.normalizedX;
+	const nextY = next.normalizedY;
+	if (
+		previousX === undefined ||
+		previousY === undefined ||
+		nextX === undefined ||
+		nextY === undefined
+	) {
+		return true;
+	}
+
+	const distance = Math.hypot(nextX - previousX, nextY - previousY);
+	return distance <= options.radius;
+}
+
+function normalizeRecordingId(recordingId: GuideRecordingIdInput): string | null {
+	if (typeof recordingId === "number") {
+		return Number.isFinite(recordingId) ? String(Math.trunc(recordingId)) : null;
+	}
+	if (typeof recordingId !== "string") {
+		return null;
+	}
+	const trimmed = recordingId.trim();
+	return trimmed.length > 0 ? trimmed : null;
+}
+
+function clamp01(value: number): number | undefined {
+	if (!Number.isFinite(value)) {
+		return undefined;
+	}
+	return Math.min(1, Math.max(0, value));
+}
diff --git a/src/guide/exporters.test.ts b/src/guide/exporters.test.ts
new file mode 100644
index 0000000..50aeeee
--- /dev/null
+++ b/src/guide/exporters.test.ts
@@ -0,0 +1,118 @@
+import { describe, expect, it } from "vitest";
+import { GUIDE_SCHEMA_VERSION, type GuideSession } from "./contracts";
+import { exportGuideToHtml, exportGuideToMarkdown } from "./exporters";
+
+const session: GuideSession = {
+	schemaVersion: GUIDE_SCHEMA_VERSION,
+	recordingId: "rec-1",
+	videoPath: "/tmp/recording.mp4",
+	guidePath: "/tmp/recording.guide.json",
+	outputDir: "/tmp/recording-guide",
+	status: "draft-ready",
+	events: [
+		{
+			id: "event-1",
+			recordingId: "rec-1",
+			kind: "click",
+			source: "cursor-recording",
+			timeMs: 1000,
+			normalizedX: 0.25,
+			normalizedY: 0.75,
+			button: "left",
+			createdAt: "now",
+		},
+	],
+	snapshots: [
+		{
+			id: "snapshot-1",
+			eventId: "event-1",
+			timeMs: 1500,
+			offsetMs: 500,
+			path: "/tmp/recording-guide/step-001.png",
+			markedPath: "/tmp/recording-guide/step-001-marked.png",
+			width: 1280,
+			height: 720,
+		},
+	],
+	ocrBlocks: [],
+	candidates: [
+		{
+			id: "candidate-1",
+			eventId: "event-1",
+			snapshotId: "snapshot-1",
+			timeMs: 1000,
+			action: "click",
+			targetText: "Settings",
+			targetRole: "button",
+			nearbyText: ["Settings"],
+			confidence: 0.9,
+		},
+	],
+	generatedGuide: {
+		title: "User guide",
+		summary: "A generated guide.",
+		steps: [
+			{
+				id: "guide-step-1",
+				order: 1,
+				title: "Open Settings",
+				instruction: "Click Settings.",
+				screenshotPath: "/tmp/recording-guide/step-001.png",
+				sourceCandidateId: "candidate-1",
+			},
+		],
+	},
+	createdAt: "now",
+	updatedAt: "now",
+};
+
+describe("guide exporters", () => {
+	it("exports markdown with relative screenshot references", () => {
+		const markdown = exportGuideToMarkdown(session);
+
+		expect(markdown).toContain("# User guide");
+		expect(markdown).toContain("## 1. Open Settings");
+		expect(markdown).toContain("](step-001-marked.png)");
+	});
+
+	it("exports escaped HTML", () => {
+		const html = exportGuideToHtml(session);
+
+		expect(html).toContain("<!doctype html>");
+		expect(html).toContain("<h1>User guide</h1>");
+		expect(html).toContain('src="step-001-marked.png"');
+		expect(html).not.toContain("click-marker");
+	});
+
+	it("uses marker snapshots for hotkey events with coordinates", () => {
+		const hotkeySession: GuideSession = {
+			...session,
+			events: [
+				{
+					...session.events[0],
+					kind: "hotkey",
+					source: "guide-hotkey",
+				},
+			],
+		};
+
+		const html = exportGuideToHtml(hotkeySession);
+
+		expect(html).toContain('src="step-001-marked.png"');
+		expect(html).not.toContain("click-marker");
+	});
+
+	it("falls back to the unmarked screenshot when no marker snapshot exists", () => {
+		const unmarkedSession: GuideSession = {
+			...session,
+			snapshots: session.snapshots.map((snapshot) => ({
+				...snapshot,
+				markedPath: undefined,
+			})),
+		};
+
+		const markdown = exportGuideToMarkdown(unmarkedSession);
+
+		expect(markdown).toContain("](step-001.png)");
+	});
+});
diff --git a/src/guide/exporters.ts b/src/guide/exporters.ts
new file mode 100644
index 0000000..7c57131
--- /dev/null
+++ b/src/guide/exporters.ts
@@ -0,0 +1,115 @@
+import path from "node:path";
+import type { GeneratedGuideStep, GuideSession } from "./contracts";
+
+export function exportGuideToMarkdown(session: GuideSession): string {
+	const guide = requireGeneratedGuide(session);
+	const lines = [`# ${guide.title}`, ""];
+	if (guide.summary) {
+		lines.push(guide.summary, "");
+	}
+
+	for (const step of guide.steps) {
+		lines.push(`## ${step.order}. ${step.title}`, "", step.instruction, "");
+		const screenshotPath = resolveStepScreenshotPath(step, session);
+		if (screenshotPath) {
+			lines.push(`![${escapeMarkdownAlt(step.title)}](${path.basename(screenshotPath)})`, "");
+		}
+	}
+
+	return `${lines.join("\n").trimEnd()}\n`;
+}
+
+export function exportGuideToHtml(session: GuideSession): string {
+	const guide = requireGeneratedGuide(session);
+	const steps = guide.steps.map((step) => renderStepHtml(step, session)).join("\n");
+	const summary = guide.summary ? `<p class="summary">${escapeHtml(guide.summary)}</p>` : "";
+	return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(guide.title)}</title>
+  <style>
+    body { font-family: Arial, sans-serif; line-height: 1.55; margin: 32px; color: #111827; }
+    main { max-width: 880px; margin: 0 auto; }
+    h1 { font-size: 28px; margin: 0 0 8px; }
+    .summary { color: #4b5563; margin: 0 0 28px; }
+    .step { border-top: 1px solid #e5e7eb; padding: 22px 0; }
+    .step h2 { font-size: 18px; margin: 0 0 8px; }
+    .step p { margin: 0 0 12px; }
+    .shot { display: inline-block; max-width: 100%; margin: 0; }
+    img { display: block; max-width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>${escapeHtml(guide.title)}</h1>
+    ${summary}
+    ${steps}
+  </main>
+</body>
+</html>
+`;
+}
+
+function renderStepHtml(step: GeneratedGuideStep, session: GuideSession): string {
+	const screenshotPath = resolveStepScreenshotPath(step, session);
+	const image = screenshotPath
+		? `<figure class="shot"><img src="${escapeHtml(path.basename(screenshotPath))}" alt="${escapeHtml(step.title)}"></figure>`
+		: "";
+	return `<section class="step">
+  <h2>${step.order}. ${escapeHtml(step.title)}</h2>
+  <p>${escapeHtml(step.instruction)}</p>
+  ${image}
+</section>`;
+}
+
+function requireGeneratedGuide(session: GuideSession) {
+	if (!session.generatedGuide) {
+		throw new Error("Guide session does not have a generated guide.");
+	}
+	return session.generatedGuide;
+}
+
+function escapeMarkdownAlt(value: string): string {
+	return value.replace(/[[\]]/g, "");
+}
+
+function escapeHtml(value: string): string {
+	return value
+		.replace(/&/g, "&")
+		.replace(/</g, "<")
+		.replace(/>/g, ">")
+		.replace(/"/g, """)
+		.replace(/'/g, "'");
+}
+
+function resolveStepScreenshotPath(
+	step: GeneratedGuideStep,
+	session: GuideSession,
+): string | undefined {
+	const snapshot = resolveStepSnapshot(step, session);
+	return snapshot?.markedPath ?? step.screenshotPath ?? snapshot?.path;
+}
+
+function resolveStepSnapshot(step: GeneratedGuideStep, session: GuideSession) {
+	const candidate = step.sourceCandidateId
+		? session.candidates.find((item) => item.id === step.sourceCandidateId)
+		: undefined;
+	const screenshotFileName = step.screenshotPath ? path.basename(step.screenshotPath) : undefined;
+	return (
+		(candidate?.snapshotId
+			? session.snapshots.find((item) => item.id === candidate.snapshotId)
+			: undefined) ??
+		(candidate?.eventId
+			? session.snapshots.find((item) => item.eventId === candidate.eventId)
+			: undefined) ??
+		(screenshotFileName
+			? session.snapshots.find(
+					(item) =>
+						path.basename(item.path) === screenshotFileName ||
+						(item.markedPath ? path.basename(item.markedPath) === screenshotFileName : false),
+				)
+			: undefined)
+	);
+}
diff --git a/src/guide/promptBuilder.test.ts b/src/guide/promptBuilder.test.ts
new file mode 100644
index 0000000..59ed239
--- /dev/null
+++ b/src/guide/promptBuilder.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { GUIDE_SCHEMA_VERSION, type GuideSession, type GuideStepCandidate } from "./contracts";
+import { buildGuideDraftPrompt, buildLocalGuideDraft } from "./promptBuilder";
+
+const session: GuideSession = {
+	schemaVersion: GUIDE_SCHEMA_VERSION,
+	recordingId: "rec-1",
+	videoPath: "/tmp/recording.mp4",
+	guidePath: "/tmp/recording.guide.json",
+	outputDir: "/tmp/recording-guide",
+	status: "ocr-ready",
+	events: [],
+	snapshots: [
+		{
+			id: "snapshot-1",
+			eventId: "event-1",
+			timeMs: 1500,
+			offsetMs: 500,
+			path: "/tmp/recording-guide/step-001.png",
+			width: 1280,
+			height: 720,
+		},
+	],
+	ocrBlocks: [],
+	candidates: [],
+	createdAt: "now",
+	updatedAt: "now",
+};
+
+const candidates: GuideStepCandidate[] = [
+	{
+		id: "candidate-1",
+		eventId: "event-1",
+		snapshotId: "snapshot-1",
+		timeMs: 1000,
+		action: "click",
+		targetText: "Save",
+		targetRole: "button",
+		position: {
+			normalizedX: 0.5,
+			normalizedY: 0.5,
+			xPercent: 50,
+			yPercent: 50,
+			description: "center",
+		},
+		nearbyText: ["Save"],
+		confidence: 0.9,
+	},
+];
+
+describe("guide draft helpers", () => {
+	it("builds a strict JSON prompt for AI providers", () => {
+		const prompt = buildGuideDraftPrompt({ session, candidates, language: "en" });
+
+		expect(prompt).toContain("Return JSON only");
+		expect(prompt).toContain('"sourceCandidateId": "candidate-1"');
+		expect(prompt).toContain('"targetText": "Save"');
+		expect(prompt).toContain('"xPercent": 50');
+		expect(prompt).toContain('"id":"guide-step-1"');
+	});
+
+	it("builds a deterministic local guide draft", () => {
+		const guide = buildLocalGuideDraft(session, candidates, "en");
+
+		expect(guide.title).toBe("User guide");
+		expect(guide.steps[0]).toMatchObject({
+			id: "guide-step-1",
+			order: 1,
+			title: "Step 1: Save",
+			instruction: 'Click "Save".',
+			screenshotPath: "/tmp/recording-guide/step-001.png",
+		});
+	});
+});
diff --git a/src/guide/promptBuilder.ts b/src/guide/promptBuilder.ts
new file mode 100644
index 0000000..3cd3368
--- /dev/null
+++ b/src/guide/promptBuilder.ts
@@ -0,0 +1,119 @@
+import type {
+	GeneratedGuide,
+	GeneratedGuideStep,
+	GuideLanguage,
+	GuideSession,
+	GuideStepCandidate,
+} from "./contracts";
+
+export interface GuidePromptInput {
+	session: GuideSession;
+	candidates: GuideStepCandidate[];
+	language: GuideLanguage;
+}
+
+export function buildGuideDraftPrompt(input: GuidePromptInput): string {
+	const languageLabel = input.language === "vi" ? "Vietnamese" : "English";
+	const candidatesJson = JSON.stringify(
+		input.candidates.map((candidate, index) => ({
+			order: index + 1,
+			sourceCandidateId: candidate.id,
+			timeMs: Math.round(candidate.timeMs),
+			action: candidate.action,
+			targetText: candidate.targetText,
+			targetRole: candidate.targetRole,
+			position: candidate.position,
+			nearbyText: candidate.nearbyText,
+			confidence: candidate.confidence,
+		})),
+		null,
+		2,
+	);
+
+	return [
+		"You write software user guides from recorded UI interactions.",
+		`Write the guide in ${languageLabel}.`,
+		"Return JSON only with this shape:",
+		'{"title":"...","summary":"...","steps":[{"id":"guide-step-1","order":1,"title":"...","instruction":"...","sourceCandidateId":"..."}]}',
+		"Rules:",
+		"- Use short, explicit step instructions.",
+		"- Prefer visible target text from OCR when it is available.",
+		"- Return sourceCandidateId exactly from the chosen candidate.",
+		"- Never use generic marker text such as Ctrl+F12 marker or Ctrl marker as a UI target.",
+		"- Do not invent buttons or screens that are not in the candidates.",
+		"- If a target is unclear, describe the action by the candidate position and include the x/y percentages.",
+		"",
+		"Candidates:",
+		candidatesJson,
+	].join("\n");
+}
+
+export function buildLocalGuideDraft(
+	session: GuideSession,
+	candidates: GuideStepCandidate[],
+	language: GuideLanguage,
+): GeneratedGuide {
+	const sortedCandidates = [...candidates].sort((left, right) => left.timeMs - right.timeMs);
+	const steps = sortedCandidates.map((candidate, index): GeneratedGuideStep => {
+		const order = index + 1;
+		return {
+			id: `guide-step-${order}`,
+			order,
+			title: buildStepTitle(candidate, order, language),
+			instruction: buildInstruction(candidate, language),
+			screenshotPath: session.snapshots.find((snapshot) => snapshot.eventId === candidate.eventId)
+				?.path,
+			sourceCandidateId: candidate.id,
+		};
+	});
+
+	return {
+		title: language === "vi" ? "Hướng dẫn thao tác" : "User guide",
+		summary:
+			language === "vi"
+				? "Tài liệu được tạo từ các thao tác đã ghi lại trên màn hình."
+				: "Generated from recorded screen interactions.",
+		steps,
+	};
+}
+
+function buildStepTitle(
+	candidate: GuideStepCandidate,
+	order: number,
+	language: GuideLanguage,
+): string {
+	if (candidate.targetText) {
+		return language === "vi"
+			? `Bước ${order}: ${candidate.targetText}`
+			: `Step ${order}: ${candidate.targetText}`;
+	}
+	return language === "vi" ? `Bước ${order}` : `Step ${order}`;
+}
+
+function buildInstruction(candidate: GuideStepCandidate, language: GuideLanguage): string {
+	const target = candidate.targetText;
+	if (language === "vi") {
+		if (target) {
+			return `${candidate.action === "click" ? "Nhấn" : "Thực hiện thao tác"} vào "${target}".`;
+		}
+		if (candidate.position) {
+			return `Nhấn tại vùng ${candidate.position.description} (x ${candidate.position.xPercent}%, y ${candidate.position.yPercent}%).`;
+		}
+		return `Thực hiện thao tác tại mốc ${formatTimestamp(candidate.timeMs)}.`;
+	}
+
+	if (target) {
+		return `${candidate.action === "click" ? "Click" : "Use"} "${target}".`;
+	}
+	if (candidate.position) {
+		return `Click the ${candidate.position.description} area (x ${candidate.position.xPercent}%, y ${candidate.position.yPercent}%).`;
+	}
+	return `Perform the action at ${formatTimestamp(candidate.timeMs)}.`;
+}
+
+function formatTimestamp(timeMs: number): string {
+	const totalSeconds = Math.max(0, Math.round(timeMs / 1000));
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
diff --git a/src/guide/snapshot/extractGuideSnapshots.ts b/src/guide/snapshot/extractGuideSnapshots.ts
new file mode 100644
index 0000000..b0d656e
--- /dev/null
+++ b/src/guide/snapshot/extractGuideSnapshots.ts
@@ -0,0 +1,243 @@
+import type { GuideEvent, GuideSession } from "../contracts";
+
+export interface CaptureGuideSnapshotsInput {
+	session: GuideSession;
+	videoUrl: string;
+	maxWidth?: number;
+	onProgress?: (progress: CaptureGuideSnapshotsProgress) => void;
+}
+
+export interface CaptureGuideSnapshotsProgress {
+	event: GuideEvent;
+	completed: number;
+	total: number;
+}
+
+export async function captureGuideSnapshots(
+	input: CaptureGuideSnapshotsInput,
+): Promise<GuideSession> {
+	const events = [...input.session.events].sort((left, right) => left.timeMs - right.timeMs);
+	if (events.length === 0) {
+		return input.session;
+	}
+	const existingSnapshotsByEventId = new Set(
+		input.session.snapshots.map((snapshot) => snapshot.eventId),
+	);
+	const pendingEvents = events.filter((event) => !existingSnapshotsByEventId.has(event.id));
+	if (pendingEvents.length === 0) {
+		return input.session;
+	}
+
+	const video = document.createElement("video");
+	video.preload = "auto";
+	video.muted = true;
+	video.src = input.videoUrl;
+	video.playsInline = true;
+
+	try {
+		await waitForLoadedMetadata(video);
+		const canvas = document.createElement("canvas");
+		const context = canvas.getContext("2d");
+		if (!context) {
+			throw new Error("Canvas 2D context is unavailable.");
+		}
+
+		const sourceWidth = video.videoWidth || 1280;
+		const sourceHeight = video.videoHeight || 720;
+		const scale = input.maxWidth && sourceWidth > input.maxWidth ? input.maxWidth / sourceWidth : 1;
+		canvas.width = Math.max(1, Math.round(sourceWidth * scale));
+		canvas.height = Math.max(1, Math.round(sourceHeight * scale));
+
+		let latestSession = input.session;
+		let completed = 0;
+		for (const event of pendingEvents) {
+			const offsetMs = event.screenshotOffsetMs ?? 500;
+			const timeMs = getSnapshotTimeMs(event, offsetMs, video.duration);
+			await seekVideo(video, timeMs / 1000);
+			context.drawImage(video, 0, 0, canvas.width, canvas.height);
+			const pngBytes = await canvasToPngBytes(canvas);
+			const markerPoint = getSnapshotMarkerPoint(event, canvas.width, canvas.height);
+			const markedPngBytes = markerPoint
+				? await canvasToMarkedPngBytes(canvas, markerPoint)
+				: undefined;
+			const result = await window.electronAPI.guide.writeSnapshot({
+				recordingId: input.session.recordingId,
+				eventId: event.id,
+				timeMs,
+				offsetMs,
+				pngBytes,
+				markedPngBytes,
+				width: canvas.width,
+				height: canvas.height,
+			});
+			if (!result.success) {
+				throw new Error(result.error);
+			}
+			latestSession = result.data;
+			completed += 1;
+			input.onProgress?.({
+				event,
+				completed,
+				total: pendingEvents.length,
+			});
+		}
+
+		return latestSession;
+	} finally {
+		video.removeAttribute("src");
+		video.load();
+	}
+}
+
+function getSnapshotTimeMs(event: GuideEvent, offsetMs: number, durationSeconds: number): number {
+	const durationMs = Number.isFinite(durationSeconds)
+		? durationSeconds * 1000
+		: Number.POSITIVE_INFINITY;
+	return Math.max(0, Math.min(durationMs, event.timeMs + Math.max(0, offsetMs)));
+}
+
+function waitForLoadedMetadata(video: HTMLVideoElement): Promise<void> {
+	if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
+		return Promise.resolve();
+	}
+
+	return waitForVideoEvent(video, "loadedmetadata", "Unable to load video metadata.");
+}
+
+function seekVideo(video: HTMLVideoElement, timeSeconds: number): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const cleanup = () => {
+			window.clearTimeout(timeoutId);
+			video.removeEventListener("seeked", handleSeeked);
+			video.removeEventListener("error", handleError);
+		};
+		const handleSeeked = () => {
+			cleanup();
+			resolve();
+		};
+		const handleError = () => {
+			cleanup();
+			reject(new Error("Unable to seek video for guide snapshot."));
+		};
+		const timeoutId = window.setTimeout(() => {
+			cleanup();
+			reject(new Error("Timed out while seeking video for guide snapshot."));
+		}, 8000);
+		video.addEventListener("seeked", handleSeeked, { once: true });
+		video.addEventListener("error", handleError, { once: true });
+		video.currentTime = Math.max(0, timeSeconds);
+	});
+}
+
+function waitForVideoEvent(
+	video: HTMLVideoElement,
+	eventName: keyof HTMLMediaElementEventMap,
+	errorMessage: string,
+): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const cleanup = () => {
+			window.clearTimeout(timeoutId);
+			video.removeEventListener(eventName, handleReady);
+			video.removeEventListener("error", handleError);
+		};
+		const handleReady = () => {
+			cleanup();
+			resolve();
+		};
+		const handleError = () => {
+			cleanup();
+			reject(new Error(errorMessage));
+		};
+		const timeoutId = window.setTimeout(() => {
+			cleanup();
+			reject(new Error(errorMessage));
+		}, 8000);
+		video.addEventListener(eventName, handleReady, { once: true });
+		video.addEventListener("error", handleError, { once: true });
+		video.load();
+	});
+}
+
+function canvasToPngBytes(canvas: HTMLCanvasElement): Promise<ArrayBuffer> {
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (!blob) {
+				reject(new Error("Unable to encode guide snapshot PNG."));
+				return;
+			}
+			blob.arrayBuffer().then(resolve, reject);
+		}, "image/png");
+	});
+}
+
+async function canvasToMarkedPngBytes(
+	canvas: HTMLCanvasElement,
+	point: { x: number; y: number },
+): Promise<ArrayBuffer> {
+	const markedCanvas = document.createElement("canvas");
+	markedCanvas.width = canvas.width;
+	markedCanvas.height = canvas.height;
+	const markedContext = markedCanvas.getContext("2d");
+	if (!markedContext) {
+		throw new Error("Canvas 2D context is unavailable.");
+	}
+	markedContext.drawImage(canvas, 0, 0);
+	drawSnapshotMarker(markedContext, markedCanvas, point);
+	return await canvasToPngBytes(markedCanvas);
+}
+
+function drawSnapshotMarker(
+	context: CanvasRenderingContext2D,
+	canvas: HTMLCanvasElement,
+	point: { x: number; y: number },
+) {
+	const shortSide = Math.max(1, Math.min(canvas.width, canvas.height));
+	const dotRadius = clampNumber(Math.round(shortSide * 0.005), 4, 7);
+
+	context.beginPath();
+	context.arc(point.x, point.y, dotRadius, 0, Math.PI * 2);
+	context.fillStyle = "rgba(220, 38, 38, 0.92)";
+	context.fill();
+}
+
+function getSnapshotMarkerPoint(
+	event: GuideEvent,
+	width: number,
+	height: number,
+): { x: number; y: number } | null {
+	if (event.kind !== "click" && event.kind !== "hotkey") {
+		return null;
+	}
+	if (isNormalizedNumber(event.normalizedX) && isNormalizedNumber(event.normalizedY)) {
+		return {
+			x: clampNumber(event.normalizedX * width, 0, width),
+			y: clampNumber(event.normalizedY * height, 0, height),
+		};
+	}
+	if (isNormalizedNumber(event.x) && isNormalizedNumber(event.y)) {
+		return {
+			x: clampNumber(event.x * width, 0, width),
+			y: clampNumber(event.y * height, 0, height),
+		};
+	}
+	if (
+		typeof event.x === "number" &&
+		typeof event.y === "number" &&
+		Number.isFinite(event.x) &&
+		Number.isFinite(event.y)
+	) {
+		return {
+			x: clampNumber(event.x, 0, width),
+			y: clampNumber(event.y, 0, height),
+		};
+	}
+	return null;
+}
+
+function isNormalizedNumber(value: unknown): value is number {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
+}
+
+function clampNumber(value: number, min = 0, max = Number.POSITIVE_INFINITY): number {
+	return Math.min(max, Math.max(min, value));
+}
diff --git a/src/guide/targetMapper.test.ts b/src/guide/targetMapper.test.ts
new file mode 100644
index 0000000..bec6936
--- /dev/null
+++ b/src/guide/targetMapper.test.ts
@@ -0,0 +1,165 @@
+import { describe, expect, it } from "vitest";
+import { GUIDE_SCHEMA_VERSION, type GuideSession } from "./contracts";
+import { buildGuideStepCandidates } from "./targetMapper";
+
+function createSession(): GuideSession {
+	return {
+		schemaVersion: GUIDE_SCHEMA_VERSION,
+		recordingId: "rec-1",
+		videoPath: "/tmp/recording.mp4",
+		guidePath: "/tmp/recording.guide.json",
+		outputDir: "/tmp/recording-guide",
+		status: "ocr-ready",
+		events: [
+			{
+				id: "event-1",
+				recordingId: "rec-1",
+				kind: "click",
+				source: "cursor-recording",
+				timeMs: 1000,
+				normalizedX: 0.5,
+				normalizedY: 0.5,
+				createdAt: "now",
+			},
+		],
+		snapshots: [
+			{
+				id: "snapshot-1",
+				eventId: "event-1",
+				timeMs: 1200,
+				offsetMs: 200,
+				path: "/tmp/recording-guide/step-001.png",
+				width: 1000,
+				height: 800,
+			},
+		],
+		ocrBlocks: [
+			{
+				id: "ocr-1",
+				snapshotId: "snapshot-1",
+				text: "Save",
+				confidence: 0.94,
+				box: { x: 0.44, y: 0.46, width: 0.14, height: 0.07 },
+			},
+			{
+				id: "ocr-2",
+				snapshotId: "snapshot-1",
+				text: "Settings",
+				confidence: 0.9,
+				box: { x: 0.1, y: 0.1, width: 0.18, height: 0.06 },
+			},
+		],
+		candidates: [],
+		createdAt: "now",
+		updatedAt: "now",
+	};
+}
+
+describe("buildGuideStepCandidates", () => {
+	it("selects OCR text near the recorded click", () => {
+		const candidates = buildGuideStepCandidates(createSession());
+
+		expect(candidates).toHaveLength(1);
+		expect(candidates[0]).toMatchObject({
+			eventId: "event-1",
+			action: "click",
+			targetText: "Save",
+			targetRole: "button",
+			snapshotId: "snapshot-1",
+		});
+		expect(candidates[0]?.nearbyText).toEqual(["Save", "Settings"]);
+		expect(candidates[0]?.confidence).toBeGreaterThan(0.8);
+	});
+
+	it("uses manual labels when OCR is not available", () => {
+		const session = createSession();
+		session.events[0] = {
+			...session.events[0],
+			kind: "manual",
+			source: "review-ui",
+			label: "Open report",
+		};
+		session.ocrBlocks = [];
+
+		const candidates = buildGuideStepCandidates(session);
+
+		expect(candidates[0]).toMatchObject({
+			action: "manual",
+			targetText: "Open report",
+			confidence: 0.75,
+		});
+	});
+
+	it("treats hotkey markers with coordinates like clicks", () => {
+		const session = createSession();
+		session.events[0] = {
+			...session.events[0],
+			kind: "hotkey",
+			source: "guide-hotkey",
+			normalizedX: 0.5,
+			normalizedY: 0.5,
+			label: "Ctrl+F12 marker",
+		};
+
+		const candidates = buildGuideStepCandidates(session);
+
+		expect(candidates[0]).toMatchObject({
+			action: "click",
+			targetText: "Save",
+			targetRole: "button",
+			position: {
+				normalizedX: 0.5,
+				normalizedY: 0.5,
+				xPercent: 50,
+				yPercent: 50,
+			},
+		});
+	});
+
+	it("prefers a nearby line phrase over a single OCR word", () => {
+		const session = createSession();
+		session.events[0] = {
+			...session.events[0],
+			normalizedX: 0.49,
+			normalizedY: 0.31,
+		};
+		session.ocrBlocks = [
+			{
+				id: "ocr-1",
+				snapshotId: "snapshot-1",
+				text: "Cho",
+				confidence: 0.8,
+				box: { x: 0.36, y: 0.3, width: 0.035, height: 0.02 },
+			},
+			{
+				id: "ocr-2",
+				snapshotId: "snapshot-1",
+				text: "phép",
+				confidence: 0.8,
+				box: { x: 0.4, y: 0.3, width: 0.04, height: 0.02 },
+			},
+			{
+				id: "ocr-3",
+				snapshotId: "snapshot-1",
+				text: "điều",
+				confidence: 0.8,
+				box: { x: 0.445, y: 0.3, width: 0.04, height: 0.02 },
+			},
+			{
+				id: "ocr-4",
+				snapshotId: "snapshot-1",
+				text: "khiển",
+				confidence: 0.8,
+				box: { x: 0.49, y: 0.3, width: 0.045, height: 0.02 },
+			},
+		];
+
+		const candidates = buildGuideStepCandidates(session);
+
+		expect(candidates[0]).toMatchObject({
+			targetText: "Cho phép điều khiển",
+			targetRole: "unknown",
+		});
+		expect(candidates[0]?.nearbyText[0]).toBe("Cho phép điều khiển");
+	});
+});
diff --git a/src/guide/targetMapper.ts b/src/guide/targetMapper.ts
new file mode 100644
index 0000000..52eaeb7
--- /dev/null
+++ b/src/guide/targetMapper.ts
@@ -0,0 +1,394 @@
+import type {
+	GuideAction,
+	GuideEvent,
+	GuideSession,
+	GuideStepCandidate,
+	GuideTargetRole,
+	OcrBlock,
+} from "./contracts";
+
+const DEFAULT_MAX_NEARBY_TEXT = 5;
+const DEFAULT_CLICK_RADIUS = 0.18;
+const TARGET_SCORE_THRESHOLD = 0.32;
+
+interface TextRegion {
+	text: string;
+	confidence: number;
+	box: OcrBlock["box"];
+}
+
+export interface BuildGuideStepCandidatesOptions {
+	maxNearbyText?: number;
+	clickRadius?: number;
+}
+
+export function buildGuideStepCandidates(
+	session: GuideSession,
+	options: BuildGuideStepCandidatesOptions = {},
+): GuideStepCandidate[] {
+	const maxNearbyText = Math.max(1, options.maxNearbyText ?? DEFAULT_MAX_NEARBY_TEXT);
+	const clickRadius = Math.max(0.01, options.clickRadius ?? DEFAULT_CLICK_RADIUS);
+	const snapshotsByEventId = new Map(
+		session.snapshots.map((snapshot) => [snapshot.eventId, snapshot]),
+	);
+	const ocrBlocksBySnapshotId = groupOcrBlocksBySnapshot(session.ocrBlocks);
+
+	return [...session.events]
+		.sort((left, right) => left.timeMs - right.timeMs)
+		.map((event): GuideStepCandidate => {
+			const snapshot = snapshotsByEventId.get(event.id);
+			const blocks = snapshot ? (ocrBlocksBySnapshotId.get(snapshot.id) ?? []) : [];
+			const rankedRegions = rankTextRegionsForEvent(event, blocks, clickRadius);
+			const targetRegion = rankedRegions.find(
+				({ score }) => score >= TARGET_SCORE_THRESHOLD,
+			)?.region;
+			const nearbyText = uniqueText(rankedRegions.map(({ region }) => region.text)).slice(
+				0,
+				maxNearbyText,
+			);
+			const label = normalizeEventLabelForTarget(event);
+			const point = getEventPoint(event);
+			const targetText = point
+				? (normalizeText(targetRegion?.text) ?? label)
+				: (label ?? normalizeText(targetRegion?.text));
+
+			return {
+				id: `candidate-${event.id}`,
+				eventId: event.id,
+				snapshotId: snapshot?.id,
+				timeMs: event.timeMs,
+				action: inferAction(event),
+				targetText,
+				targetRole: inferTargetRole(targetText),
+				position: point ? describeEventPosition(point) : undefined,
+				nearbyText,
+				confidence: calculateCandidateConfidence(event, targetRegion, rankedRegions[0]?.score),
+			};
+		});
+}
+
+function groupOcrBlocksBySnapshot(ocrBlocks: OcrBlock[]): Map<string, OcrBlock[]> {
+	const grouped = new Map<string, OcrBlock[]>();
+	for (const block of ocrBlocks) {
+		const existing = grouped.get(block.snapshotId) ?? [];
+		existing.push(block);
+		grouped.set(block.snapshotId, existing);
+	}
+	return grouped;
+}
+
+function rankTextRegionsForEvent(
+	event: GuideEvent,
+	blocks: OcrBlock[],
+	clickRadius: number,
+): Array<{ region: TextRegion; score: number }> {
+	const click = getEventPoint(event);
+	return buildTextRegions(blocks)
+		.map((region) => ({ region, score: scoreRegion(region, click, clickRadius) }))
+		.filter(({ region }) => normalizeText(region.text) !== undefined)
+		.sort(
+			(left, right) =>
+				right.score - left.score ||
+				right.region.confidence - left.region.confidence ||
+				right.region.text.length - left.region.text.length,
+		);
+}
+
+function buildTextRegions(blocks: OcrBlock[]): TextRegion[] {
+	const wordRegions = blocks
+		.map((block): TextRegion | null => {
+			const text = normalizeText(block.text);
+			if (!text || !isUsefulOcrText(text)) {
+				return null;
+			}
+			return {
+				text,
+				confidence: block.confidence,
+				box: block.box,
+			};
+		})
+		.filter((region): region is TextRegion => region !== null);
+	const phraseRegions = buildPhraseRegions(wordRegions);
+	return [...phraseRegions, ...wordRegions];
+}
+
+function buildPhraseRegions(regions: TextRegion[]): TextRegion[] {
+	const sorted = [...regions].sort((left, right) => regionCenterY(left) - regionCenterY(right));
+	const lines: TextRegion[][] = [];
+	for (const region of sorted) {
+		const centerY = regionCenterY(region);
+		const line = lines.find(
+			(candidate) =>
+				Math.abs(regionCenterY(candidate[0]) - centerY) <=
+				Math.max(0.012, averageHeight(candidate) * 0.9),
+		);
+		if (line) {
+			line.push(region);
+		} else {
+			lines.push([region]);
+		}
+	}
+
+	const phrases: TextRegion[] = [];
+	for (const line of lines) {
+		const segments = splitLineIntoSegments(line.sort((left, right) => left.box.x - right.box.x));
+		for (const segment of segments) {
+			if (segment.length < 2) {
+				continue;
+			}
+			const phrase = mergeRegions(segment);
+			if (phrase.text.length >= 3) {
+				phrases.push(phrase);
+			}
+		}
+	}
+	return phrases;
+}
+
+function splitLineIntoSegments(line: TextRegion[]): TextRegion[][] {
+	const segments: TextRegion[][] = [];
+	let current: TextRegion[] = [];
+	for (const region of line) {
+		const previous = current.at(-1);
+		if (
+			previous &&
+			region.box.x - (previous.box.x + previous.box.width) >
+				Math.max(0.025, averageHeight(current) * 3)
+		) {
+			segments.push(current);
+			current = [];
+		}
+		current.push(region);
+	}
+	if (current.length > 0) {
+		segments.push(current);
+	}
+	return segments;
+}
+
+function mergeRegions(regions: TextRegion[]): TextRegion {
+	const minX = Math.min(...regions.map((region) => region.box.x));
+	const minY = Math.min(...regions.map((region) => region.box.y));
+	const maxX = Math.max(...regions.map((region) => region.box.x + region.box.width));
+	const maxY = Math.max(...regions.map((region) => region.box.y + region.box.height));
+	return {
+		text: regions.map((region) => region.text).join(" "),
+		confidence:
+			regions.reduce((total, region) => total + clamp01(region.confidence), 0) / regions.length,
+		box: {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY,
+		},
+	};
+}
+
+function scoreRegion(
+	region: TextRegion,
+	click: { x: number; y: number } | null,
+	clickRadius: number,
+): number {
+	if (!click) {
+		return clamp01(region.confidence);
+	}
+
+	const centerX = region.box.x + region.box.width / 2;
+	const centerY = region.box.y + region.box.height / 2;
+	const distance = Math.hypot(centerX - click.x, centerY - click.y);
+	const proximity = clamp01(1 - distance / clickRadius);
+	const contains = pointInsideExpandedBox(click, region, 0.025) ? 0.35 : 0;
+	return clamp01(
+		proximity * 0.35 +
+			clamp01(region.confidence) * 0.2 +
+			contains +
+			calculateTextQuality(region.text) * 0.2,
+	);
+}
+
+function getEventPoint(event: GuideEvent): { x: number; y: number } | null {
+	if (event.normalizedX !== undefined && event.normalizedY !== undefined) {
+		return { x: clamp01(event.normalizedX), y: clamp01(event.normalizedY) };
+	}
+	if (
+		event.x !== undefined &&
+		event.y !== undefined &&
+		event.x >= 0 &&
+		event.x <= 1 &&
+		event.y >= 0 &&
+		event.y <= 1
+	) {
+		return { x: event.x, y: event.y };
+	}
+	return null;
+}
+
+function pointInsideExpandedBox(
+	point: { x: number; y: number },
+	region: Pick<TextRegion, "box">,
+	padding: number,
+): boolean {
+	return (
+		point.x >= region.box.x - padding &&
+		point.x <= region.box.x + region.box.width + padding &&
+		point.y >= region.box.y - padding &&
+		point.y <= region.box.y + region.box.height + padding
+	);
+}
+
+function inferAction(event: GuideEvent): GuideAction {
+	if (event.kind === "click" || (event.kind === "hotkey" && getEventPoint(event))) {
+		return "click";
+	}
+	return "manual";
+}
+
+function inferTargetRole(text: string | undefined): GuideTargetRole | undefined {
+	if (!text) {
+		return undefined;
+	}
+
+	const normalized = text.toLowerCase();
+	if (
+		/\b(ok|save|create|next|continue|login|submit|cancel|done|apply|open|start|finish)\b/.test(
+			normalized,
+		) ||
+		/(lưu|tiếp|đăng nhập|hủy|áp dụng|mở|bắt đầu|hoàn tất)/i.test(text)
+	) {
+		return "button";
+	}
+	if (/\b(menu|file|edit|view|settings)\b/.test(normalized) || /(menu|cài đặt)/i.test(text)) {
+		return "menu";
+	}
+	if (/\b(tab)\b/.test(normalized) || /(thẻ|tab)/i.test(text)) {
+		return "tab";
+	}
+	if (/\b(search|name|email|password|input|field)\b/.test(normalized)) {
+		return "field";
+	}
+	return "unknown";
+}
+
+function calculateCandidateConfidence(
+	event: GuideEvent,
+	targetRegion: TextRegion | undefined,
+	score: number | undefined,
+): number {
+	if (targetRegion) {
+		return roundConfidence(
+			0.45 + clamp01(targetRegion.confidence) * 0.25 + clamp01(score ?? 0) * 0.3,
+		);
+	}
+	if (normalizeEventLabelForTarget(event)) {
+		return 0.75;
+	}
+	if (getEventPoint(event)) {
+		return 0.45;
+	}
+	return 0.3;
+}
+
+function uniqueText(values: Array<string | undefined>): string[] {
+	const seen = new Set<string>();
+	const result: string[] = [];
+	for (const value of values) {
+		const normalized = normalizeText(value);
+		if (!normalized) {
+			continue;
+		}
+		const key = normalized.toLowerCase();
+		if (seen.has(key)) {
+			continue;
+		}
+		seen.add(key);
+		result.push(normalized);
+	}
+	return result;
+}
+
+function normalizeText(value: string | undefined): string | undefined {
+	const text = value?.replace(/\s+/g, " ").trim();
+	return text ? text : undefined;
+}
+
+function normalizeEventLabelForTarget(event: GuideEvent): string | undefined {
+	const label = normalizeText(event.label);
+	if (!label) {
+		return undefined;
+	}
+	if (/^(?:ctrl(?:\s*\+\s*f12)?|control)\s+marker$/i.test(label)) {
+		return undefined;
+	}
+	if (/^manual\s+marker$/i.test(label)) {
+		return undefined;
+	}
+	return label;
+}
+
+function describeEventPosition(point: { x: number; y: number }): GuideStepCandidate["position"] {
+	const normalizedX = clamp01(point.x);
+	const normalizedY = clamp01(point.y);
+	return {
+		normalizedX: roundPosition(normalizedX),
+		normalizedY: roundPosition(normalizedY),
+		xPercent: Math.round(normalizedX * 100),
+		yPercent: Math.round(normalizedY * 100),
+		description: describeScreenRegion(normalizedX, normalizedY),
+	};
+}
+
+function describeScreenRegion(x: number, y: number): string {
+	const vertical = y < 0.33 ? "top" : y > 0.66 ? "bottom" : "middle";
+	const horizontal = x < 0.33 ? "left" : x > 0.66 ? "right" : "center";
+	return vertical === "middle" && horizontal === "center" ? "center" : `${vertical} ${horizontal}`;
+}
+
+function isUsefulOcrText(text: string): boolean {
+	if (!/[A-Za-z0-9À-ỹ]/.test(text)) {
+		return false;
+	}
+	if (text.length === 1) {
+		return false;
+	}
+	return true;
+}
+
+function calculateTextQuality(text: string): number {
+	let score = 0.35;
+	if (text.includes(" ")) {
+		score += 0.5;
+	}
+	if (text.length >= 4) {
+		score += 0.25;
+	}
+	if (/[�ï¿½]/.test(text)) {
+		score -= 0.25;
+	}
+	if (/^[\W_]+$/.test(text)) {
+		score -= 0.35;
+	}
+	return clamp01(score);
+}
+
+function regionCenterY(region: TextRegion): number {
+	return region.box.y + region.box.height / 2;
+}
+
+function averageHeight(regions: TextRegion[]): number {
+	return regions.reduce((total, region) => total + region.box.height, 0) / regions.length;
+}
+
+function roundConfidence(value: number): number {
+	return Math.round(clamp01(value) * 100) / 100;
+}
+
+function roundPosition(value: number): number {
+	return Math.round(clamp01(value) * 1000) / 1000;
+}
+
+function clamp01(value: number): number {
+	if (!Number.isFinite(value)) {
+		return 0;
+	}
+	return Math.min(1, Math.max(0, value));
+}
diff --git a/src/hooks/recorderHandle.test.ts b/src/hooks/recorderHandle.test.ts
new file mode 100644
index 0000000..3f16437
--- /dev/null
+++ b/src/hooks/recorderHandle.test.ts
@@ -0,0 +1,264 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createRecorderHandle } from "./recorderHandle";
+
+type ElectronAPI = Window["electronAPI"];
+
+const tick = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+const decode = (buffer: ArrayBuffer) => new TextDecoder().decode(new Uint8Array(buffer));
+
+/** Minimal MediaRecorder stand-in the tests can drive directly. */
+class FakeMediaRecorder {
+	ondataavailable: ((event: BlobEvent) => void) | null = null;
+	onstop: (() => void) | null = null;
+	onerror: (() => void) | null = null;
+	state: "inactive" | "recording" = "inactive";
+
+	start(): void {
+		this.state = "recording";
+	}
+
+	stop(): void {
+		this.state = "inactive";
+		this.onstop?.();
+	}
+
+	emit(data: Blob): void {
+		this.ondataavailable?.({ data } as BlobEvent);
+	}
+}
+
+function stubElectronAPI(api: Partial<ElectronAPI>): void {
+	window.electronAPI = api as unknown as ElectronAPI;
+}
+
+function driver(handle: { recorder: MediaRecorder }): FakeMediaRecorder {
+	return handle.recorder as unknown as FakeMediaRecorder;
+}
+
+describe("createRecorderHandle", () => {
+	beforeEach(() => {
+		vi.stubGlobal("MediaRecorder", FakeMediaRecorder);
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+		window.electronAPI = undefined as unknown as ElectronAPI;
+	});
+
+	it("streams chunks to disk in arrival order and resolves an empty blob", async () => {
+		const appended: string[] = [];
+		const openRecordingStream = vi.fn(async () => ({ success: true }));
+		const appendRecordingChunk = vi.fn(async (_fileName: string, buffer: ArrayBuffer) => {
+			appended.push(decode(buffer));
+			return { success: true };
+		});
+		stubElectronAPI({ openRecordingStream, appendRecordingChunk });
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		fake.emit(new Blob(["a"])); // arrives before open resolves -> buffered
+		await tick(); // open resolves -> buffered chunk flushes, mode becomes streaming
+		fake.emit(new Blob(["b"]));
+		fake.emit(new Blob(["c"]));
+		fake.stop();
+
+		const blob = await handle.recordedBlobPromise;
+		expect(openRecordingStream).toHaveBeenCalledWith("rec.webm");
+		expect(appended).toEqual(["a", "b", "c"]);
+		expect(blob.size).toBe(0);
+		expect(handle.isStreaming()).toBe(true);
+	});
+
+	it("falls back to a complete in-memory blob when the stream fails to open", async () => {
+		const openRecordingStream = vi.fn(async () => ({ success: false, error: "nope" }));
+		const appendRecordingChunk = vi.fn(async () => ({ success: true }));
+		stubElectronAPI({ openRecordingStream, appendRecordingChunk });
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		fake.emit(new Blob(["a"]));
+		await tick(); // open resolves false -> buffering, keep everything in memory
+		fake.emit(new Blob(["bc"]));
+		fake.stop();
+
+		const blob = await handle.recordedBlobPromise;
+		expect(appendRecordingChunk).not.toHaveBeenCalled();
+		expect(handle.isStreaming()).toBe(false);
+		expect(blob.size).toBe(3);
+		expect(decode(await blob.arrayBuffer())).toBe("abc");
+	});
+
+	it("falls back to in-memory buffering when the open IPC call rejects", async () => {
+		const openRecordingStream = vi.fn(async () => {
+			throw new Error("ipc channel closed");
+		});
+		stubElectronAPI({
+			openRecordingStream,
+			appendRecordingChunk: vi.fn(async () => ({ success: true })),
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		fake.emit(new Blob(["a"]));
+		await tick(); // open rejects -> treated as a failed open, keep buffering
+		fake.emit(new Blob(["b"]));
+		fake.stop();
+
+		const blob = await handle.recordedBlobPromise;
+		expect(handle.isStreaming()).toBe(false);
+		expect(blob.size).toBe(2);
+		expect(decode(await blob.arrayBuffer())).toBe("ab");
+	});
+
+	it("waits for in-flight chunk writes before stop resolves (no truncation)", async () => {
+		let releaseAppend: () => void = () => undefined;
+		const appendGate = new Promise<void>((resolve) => {
+			releaseAppend = resolve;
+		});
+		const appendRecordingChunk = vi.fn(async () => {
+			await appendGate;
+			return { success: true };
+		});
+		stubElectronAPI({
+			openRecordingStream: vi.fn(async () => ({ success: true })),
+			appendRecordingChunk,
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		await tick(); // open resolves
+		fake.emit(new Blob(["a"])); // write blocks on the gate
+		fake.stop();
+
+		let resolved = false;
+		void handle.recordedBlobPromise.then(() => {
+			resolved = true;
+		});
+		await tick();
+		expect(resolved).toBe(false); // must not resolve while the write is in flight
+
+		releaseAppend();
+		await handle.recordedBlobPromise;
+		expect(resolved).toBe(true);
+		expect(appendRecordingChunk).toHaveBeenCalledTimes(1);
+	});
+
+	it("rejects when a chunk fails to write mid-stream", async () => {
+		stubElectronAPI({
+			openRecordingStream: vi.fn(async () => ({ success: true })),
+			appendRecordingChunk: vi.fn(async () => ({ success: false, error: "disk full" })),
+			closeRecordingStream: vi.fn(async () => ({ success: true })),
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		await tick();
+		fake.emit(new Blob(["a"]));
+		fake.stop();
+
+		await expect(handle.recordedBlobPromise).rejects.toThrow(/disk full/);
+		expect(handle.isStreaming()).toBe(false);
+	});
+
+	it("treats a rejected append the same as a failed write", async () => {
+		stubElectronAPI({
+			openRecordingStream: vi.fn(async () => ({ success: true })),
+			appendRecordingChunk: vi.fn(async () => {
+				throw new Error("kernel said no");
+			}),
+			closeRecordingStream: vi.fn(async () => ({ success: true })),
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		await tick();
+		fake.emit(new Blob(["a"]));
+		fake.stop();
+
+		await expect(handle.recordedBlobPromise).rejects.toThrow(/kernel said no/);
+		expect(handle.isStreaming()).toBe(false);
+	});
+
+	it("buffers in memory and never opens a stream when no file name is given", async () => {
+		const openRecordingStream = vi.fn(async () => ({ success: true }));
+		stubElectronAPI({
+			openRecordingStream,
+			appendRecordingChunk: vi.fn(async () => ({ success: true })),
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" });
+		const fake = driver(handle);
+
+		fake.emit(new Blob(["xy"]));
+		await tick();
+		fake.stop();
+
+		const blob = await handle.recordedBlobPromise;
+		expect(openRecordingStream).not.toHaveBeenCalled();
+		expect(handle.isStreaming()).toBe(false);
+		expect(blob.size).toBe(2);
+	});
+
+	it("buffers in memory when appendRecordingChunk is unavailable (version skew)", async () => {
+		const openRecordingStream = vi.fn(async () => ({ success: true }));
+		// appendRecordingChunk intentionally omitted to simulate renderer/main skew.
+		stubElectronAPI({ openRecordingStream });
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+
+		fake.emit(new Blob(["a"]));
+		await tick();
+		fake.emit(new Blob(["b"]));
+		fake.stop();
+
+		const blob = await handle.recordedBlobPromise;
+		// Never even attempts to open the stream when it can't append to it.
+		expect(openRecordingStream).not.toHaveBeenCalled();
+		expect(handle.isStreaming()).toBe(false);
+		expect(blob.size).toBe(2);
+	});
+
+	it("discard closes the disk stream for a streamed recording", async () => {
+		const closeRecordingStream = vi.fn(async () => ({ success: true }));
+		stubElectronAPI({
+			openRecordingStream: vi.fn(async () => ({ success: true })),
+			appendRecordingChunk: vi.fn(async () => ({ success: true })),
+			closeRecordingStream,
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+		await tick();
+		fake.emit(new Blob(["a"]));
+		fake.stop();
+		await handle.recordedBlobPromise;
+
+		await handle.discard();
+		expect(closeRecordingStream).toHaveBeenCalledWith("rec.webm");
+	});
+
+	it("discard is a no-op when the stream never opened", async () => {
+		const closeRecordingStream = vi.fn(async () => ({ success: true }));
+		stubElectronAPI({
+			openRecordingStream: vi.fn(async () => ({ success: false })),
+			appendRecordingChunk: vi.fn(async () => ({ success: true })),
+			closeRecordingStream,
+		});
+
+		const handle = createRecorderHandle({} as MediaStream, { mimeType: "video/webm" }, "rec.webm");
+		const fake = driver(handle);
+		await tick();
+		fake.stop();
+		await handle.recordedBlobPromise;
+
+		await handle.discard();
+		expect(closeRecordingStream).not.toHaveBeenCalled();
+	});
+});
diff --git a/src/hooks/recorderHandle.ts b/src/hooks/recorderHandle.ts
new file mode 100644
index 0000000..e98000e
--- /dev/null
+++ b/src/hooks/recorderHandle.ts
@@ -0,0 +1,160 @@
+const RECORDER_TIMESLICE_MS = 1000;
+
+export type RecorderHandle = {
+	recorder: MediaRecorder;
+	/**
+	 * Resolves once the recording has fully drained. For a streamed recording the
+	 * blob is empty (the bytes are already on disk); for an in-memory recording it
+	 * holds the full WebM. Rejects if a chunk failed to write to disk mid-stream,
+	 * so a truncated recording surfaces as an error instead of a silent partial save.
+	 */
+	recordedBlobPromise: Promise<Blob>;
+	/**
+	 * Whether the recording's bytes went to disk via the streaming path. Computed
+	 * at finalize time rather than construction, so a stream that fails to open is
+	 * correctly reported as not-streamed and its in-memory fallback is used.
+	 */
+	isStreaming: () => boolean;
+	/**
+	 * Close the disk stream (if one opened) and delete its partial file. Called
+	 * when a recording is discarded or fails before a successful save, so cancelled
+	 * runs don't leak the stream or orphan a partial file. No-op for in-memory
+	 * recorders.
+	 */
+	discard: () => Promise<void>;
+};
+
+/**
+ * Wrap a MediaRecorder, optionally streaming its chunks to disk.
+ *
+ * When `fileName` is given, chunks are written to disk in arrival order through
+ * the main process as they arrive, so a long recording never buffers the whole
+ * video in the renderer (the #616 fix). Until the disk stream confirms it is
+ * open, chunks are held in memory; if the open fails, that buffer becomes a
+ * complete in-memory fallback so nothing is lost. Native-capture webcam sidecars
+ * omit `fileName` and always buffer in memory, since their finalize path reads
+ * the blob directly to attach the webcam track.
+ */
+export function createRecorderHandle(
+	stream: MediaStream,
+	options: MediaRecorderOptions,
+	fileName?: string,
+): RecorderHandle {
+	const recorder = new MediaRecorder(stream, options);
+	const mimeType = options.mimeType || "video/webm";
+	const api = window.electronAPI;
+
+	// Chunks held in memory: everything before the stream opens, plus everything
+	// when not streaming at all. On a successful open these flush to disk and are
+	// dropped; on open failure they remain as the complete fallback recording.
+	const memoryChunks: Blob[] = [];
+	let mode: "pending" | "streaming" | "buffering" = fileName ? "pending" : "buffering";
+	let streamOpened = false;
+	let appendError: Error | null = null;
+
+	// Serialize chunk writes so they land on disk in arrival order, and so stop
+	// can await every in-flight write before the main process closes the stream
+	// (otherwise a late chunk arrives after close and truncates the recording).
+	let writeChain: Promise<void> = Promise.resolve();
+	const enqueueWrite = (chunk: Blob) => {
+		writeChain = writeChain.then(async () => {
+			if (appendError || !fileName || !api?.appendRecordingChunk) {
+				return;
+			}
+			// Capture both outcomes — a `{ success: false }` result and an outright
+			// rejection (channel/handler error) — into appendError, so writeChain
+			// never rejects and isStreaming() stays consistent after a failure.
+			try {
+				const buffer = await chunk.arrayBuffer();
+				const result = await api.appendRecordingChunk(fileName, buffer);
+				if (!result.success) {
+					appendError = new Error(result.error ?? "Failed to write recording chunk to disk");
+				}
+			} catch (error) {
+				appendError = error instanceof Error ? error : new Error(String(error));
+			}
+		});
+	};
+
+	// Require BOTH stream IPC methods before attempting to stream. If only
+	// openRecordingStream exists (renderer/main version skew), streaming would
+	// open but every append would silently no-op, saving an empty file — so in
+	// that case fall through to in-memory buffering instead.
+	const openPromise: Promise<{ success: boolean; error?: string }> =
+		fileName !== undefined &&
+		typeof api?.openRecordingStream === "function" &&
+		typeof api?.appendRecordingChunk === "function"
+			? api.openRecordingStream(fileName)
+			: Promise.resolve({ success: false });
+
+	void openPromise.then(
+		(result) => {
+			if (result.success) {
+				streamOpened = true;
+				mode = "streaming";
+				for (const chunk of memoryChunks) {
+					enqueueWrite(chunk);
+				}
+				memoryChunks.length = 0;
+			} else {
+				mode = "buffering";
+			}
+		},
+		() => {
+			// The IPC call itself rejected (channel or handler error). Treat it the
+			// same as a failed open: keep buffering in memory so nothing is lost.
+			mode = "buffering";
+		},
+	);
+
+	const recordedBlobPromise = new Promise<Blob>((resolve, reject) => {
+		recorder.ondataavailable = (event: BlobEvent) => {
+			if (!event.data || event.data.size === 0) {
+				return;
+			}
+			if (mode === "streaming") {
+				enqueueWrite(event.data);
+			} else {
+				// "pending" (stream not open yet) or "buffering" (not streaming).
+				memoryChunks.push(event.data);
+			}
+		};
+
+		recorder.onerror = () => {
+			reject(new Error("Recording failed"));
+		};
+
+		recorder.onstop = () => {
+			resolve(finalizeBlob());
+		};
+	});
+
+	async function finalizeBlob(): Promise<Blob> {
+		// Wait for the open attempt to settle so its flush (or fallback switch) has
+		// been applied, then for every queued write to land, so we never resolve
+		// while chunks are still in flight to the about-to-close disk stream.
+		await openPromise.catch(() => undefined);
+		await writeChain;
+		if (appendError) {
+			throw appendError;
+		}
+		if (mode === "streaming") {
+			return new Blob([], { type: mimeType });
+		}
+		return new Blob(memoryChunks, { type: mimeType });
+	}
+
+	async function discard(): Promise<void> {
+		if (streamOpened && fileName && api?.closeRecordingStream) {
+			await api.closeRecordingStream(fileName);
+		}
+	}
+
+	recorder.start(RECORDER_TIMESLICE_MS);
+	return {
+		recorder,
+		recordedBlobPromise,
+		isStreaming: () => mode === "streaming" && !appendError,
+		discard,
+	};
+}
diff --git a/src/hooks/useAudioLevelMeter.ts b/src/hooks/useAudioLevelMeter.ts
new file mode 100644
index 0000000..6fef297
--- /dev/null
+++ b/src/hooks/useAudioLevelMeter.ts
@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface AudioLevelMeterOptions {
+	enabled: boolean;
+	deviceId?: string;
+	smoothingFactor?: number;
+}
+
+export function useAudioLevelMeter(options: AudioLevelMeterOptions) {
+	const [level, setLevel] = useState(0);
+	const audioContextRef = useRef<AudioContext | null>(null);
+	const analyserRef = useRef<AnalyserNode | null>(null);
+	const streamRef = useRef<MediaStream | null>(null);
+	const animationFrameRef = useRef<number | null>(null);
+
+	const cleanup = useCallback(() => {
+		if (animationFrameRef.current) {
+			cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = null;
+		}
+		if (streamRef.current) {
+			streamRef.current.getTracks().forEach((track) => track.stop());
+			streamRef.current = null;
+		}
+		if (audioContextRef.current) {
+			audioContextRef.current.close();
+			audioContextRef.current = null;
+		}
+		analyserRef.current = null;
+	}, []);
+
+	useEffect(() => {
+		if (!options.enabled) {
+			cleanup();
+			setLevel(0);
+			return;
+		}
+
+		let mounted = true;
+
+		const startMonitoring = async () => {
+			try {
+				const constraints: MediaStreamConstraints = {
+					audio: options.deviceId ? { deviceId: { exact: options.deviceId } } : true,
+					video: false,
+				};
+
+				const stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+				if (!mounted) {
+					stream.getTracks().forEach((track) => track.stop());
+					return;
+				}
+
+				streamRef.current = stream;
+
+				const audioContext = new AudioContext();
+				if (audioContext.state === "suspended") {
+					await audioContext.resume();
+				}
+				audioContextRef.current = audioContext;
+
+				const analyser = audioContext.createAnalyser();
+				analyser.fftSize = 256;
+				analyser.smoothingTimeConstant = options.smoothingFactor ?? 0.8;
+				analyserRef.current = analyser;
+
+				const source = audioContext.createMediaStreamSource(stream);
+				source.connect(analyser);
+
+				const dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+				const updateLevel = () => {
+					if (!mounted || !analyserRef.current) return;
+
+					analyser.getByteFrequencyData(dataArray);
+
+					let sum = 0;
+					for (let i = 0; i < dataArray.length; i++) {
+						sum += dataArray[i] * dataArray[i];
+					}
+					const rms = Math.sqrt(sum / dataArray.length);
+					const normalizedLevel = Math.min(100, (rms / 255) * 100 * 2);
+
+					setLevel(normalizedLevel);
+					animationFrameRef.current = requestAnimationFrame(updateLevel);
+				};
+
+				updateLevel();
+			} catch (err) {
+				console.error("Error starting audio level monitoring:", err);
+				if (mounted) {
+					setLevel(0);
+				}
+			}
+		};
+
+		startMonitoring();
+
+		return () => {
+			mounted = false;
+			cleanup();
+		};
+	}, [options.enabled, options.deviceId, options.smoothingFactor, cleanup]);
+
+	return { level };
+}
diff --git a/src/hooks/useCameraDevices.test.ts b/src/hooks/useCameraDevices.test.ts
new file mode 100644
index 0000000..5ca21bc
--- /dev/null
+++ b/src/hooks/useCameraDevices.test.ts
@@ -0,0 +1,113 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useCameraDevices } from "./useCameraDevices";
+
+// Mock navigator.mediaDevices
+const mockDevices = [
+	{ kind: "videoinput", deviceId: "cam1", label: "Camera 1", groupId: "group1" },
+	{ kind: "videoinput", deviceId: "cam2", label: "Camera 2", groupId: "group1" },
+	{ kind: "audioinput", deviceId: "mic1", label: "Mic 1", groupId: "group2" },
+];
+
+const mockGetUserMedia = vi.fn().mockResolvedValue({
+	getTracks: () => [{ stop: vi.fn() }],
+});
+
+const mockEnumerateDevices = vi.fn().mockResolvedValue(mockDevices);
+
+Object.defineProperty(global.navigator, "mediaDevices", {
+	value: {
+		enumerateDevices: mockEnumerateDevices,
+		getUserMedia: mockGetUserMedia,
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+	},
+	configurable: true,
+});
+
+describe("useCameraDevices", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockEnumerateDevices.mockResolvedValue(mockDevices);
+		mockGetUserMedia.mockResolvedValue({
+			getTracks: () => [{ stop: vi.fn() }],
+		});
+	});
+
+	afterEach(() => {
+		vi.resetAllMocks();
+	});
+
+	it("should list video input devices", async () => {
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.devices).toHaveLength(2);
+		});
+
+		expect(result.current.devices[0].label).toBe("Camera 1");
+		expect(result.current.devices[1].deviceId).toBe("cam2");
+	});
+
+	it("should set first device as default", async () => {
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.selectedDeviceId).toBe("cam1");
+		});
+	});
+
+	it("should use device ID as fallback label when label is missing", async () => {
+		mockEnumerateDevices.mockResolvedValueOnce([
+			{ kind: "videoinput", deviceId: "cam1abc123456", label: "", groupId: "group1" },
+		]);
+
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.devices[0]?.label).toBe("Camera cam1abc1");
+		});
+
+		expect(mockGetUserMedia).not.toHaveBeenCalled();
+	});
+
+	it("should set error state when enumeration fails", async () => {
+		mockEnumerateDevices.mockRejectedValueOnce(new Error("Permission denied"));
+
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.error).toBe("Permission denied");
+		});
+
+		expect(result.current.devices).toHaveLength(0);
+		expect(result.current.isLoading).toBe(false);
+	});
+
+	it("should fall back to first available device when selected device is unplugged", async () => {
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.selectedDeviceId).toBe("cam1");
+		});
+
+		// Simulate cam1 being unplugged — only cam2 remains
+		const cam2Only = [
+			{ kind: "videoinput", deviceId: "cam2", label: "Camera 2", groupId: "group1" },
+		];
+		mockEnumerateDevices.mockResolvedValueOnce(cam2Only);
+
+		// Trigger devicechange event via the registered handler
+		const devicechangeHandler = (
+			navigator.mediaDevices.addEventListener as ReturnType<typeof vi.fn>
+		).mock.calls[0]?.[1] as (() => void) | undefined;
+
+		await act(async () => {
+			devicechangeHandler?.();
+		});
+
+		await waitFor(() => {
+			expect(result.current.selectedDeviceId).toBe("cam2");
+		});
+	});
+});
diff --git a/src/hooks/useCameraDevices.ts b/src/hooks/useCameraDevices.ts
new file mode 100644
index 0000000..a02e65a
--- /dev/null
+++ b/src/hooks/useCameraDevices.ts
@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface CameraDevice {
+	deviceId: string;
+	label: string;
+	groupId: string;
+}
+
+export function useCameraDevices(enabled: boolean = false) {
+	const [devices, setDevices] = useState<CameraDevice[]>([]);
+	const [selectedDeviceId, setSelectedDeviceId] = useState<string>("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const selectedDeviceIdRef = useRef(selectedDeviceId);
+	selectedDeviceIdRef.current = selectedDeviceId;
+
+	useEffect(() => {
+		if (!enabled) return;
+		let mounted = true;
+
+		const loadDevices = async () => {
+			try {
+				setIsLoading(true);
+				setError(null);
+
+				// Enumerate without requesting a second stream — the recorder handles
+				// the real acquisition; unlabeled devices fall back to their device ID.
+				const allDevices = await navigator.mediaDevices.enumerateDevices();
+				const videoInputs = allDevices
+					.filter((device) => device.kind === "videoinput")
+					.map((device) => ({
+						deviceId: device.deviceId,
+						label: device.label || `Camera ${device.deviceId.slice(0, 8)}`,
+						groupId: device.groupId,
+					}));
+
+				if (mounted) {
+					setDevices(videoInputs);
+					const currentId = selectedDeviceIdRef.current;
+					const stillAvailable = videoInputs.some((d) => d.deviceId === currentId);
+					if (!currentId || !stillAvailable) {
+						setSelectedDeviceId(videoInputs[0]?.deviceId ?? "");
+					}
+					setIsLoading(false);
+				}
+			} catch (err) {
+				if (mounted) {
+					setError(err instanceof Error ? err.message : "Failed to load cameras");
+					setIsLoading(false);
+				}
+			}
+		};
+
+		loadDevices();
+
+		navigator.mediaDevices.addEventListener("devicechange", loadDevices);
+		return () => {
+			mounted = false;
+			navigator.mediaDevices.removeEventListener("devicechange", loadDevices);
+		};
+	}, [enabled]);
+
+	return { devices, selectedDeviceId, setSelectedDeviceId, isLoading, error };
+}
diff --git a/src/hooks/useEditorHistory.ts b/src/hooks/useEditorHistory.ts
new file mode 100644
index 0000000..b6525c1
--- /dev/null
+++ b/src/hooks/useEditorHistory.ts
@@ -0,0 +1,141 @@
+import { useCallback, useRef, useState } from "react";
+import {
+	DEFAULT_EDITOR_APPEARANCE_SETTINGS,
+	DEFAULT_EDITOR_LAYOUT_SETTINGS,
+	DEFAULT_WEBCAM_SETTINGS,
+} from "@/components/video-editor/editorDefaults";
+import type {
+	AnnotationRegion,
+	CropRegion,
+	SpeedRegion,
+	TrimRegion,
+	WebcamLayoutPreset,
+	WebcamMaskShape,
+	WebcamPosition,
+	WebcamSizePreset,
+	ZoomRegion,
+} from "@/components/video-editor/types";
+import { DEFAULT_CROP_REGION } from "@/components/video-editor/types";
+import type { AspectRatio } from "@/utils/aspectRatioUtils";
+
+// Undoable state — selection IDs are intentionally excluded (undoing a
+// selection change would feel surprising to the user).
+export interface EditorState {
+	zoomRegions: ZoomRegion[];
+	trimRegions: TrimRegion[];
+	speedRegions: SpeedRegion[];
+	annotationRegions: AnnotationRegion[];
+	cropRegion: CropRegion;
+	wallpaper: string;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount: number;
+	borderRadius: number;
+	padding: number;
+	aspectRatio: AspectRatio;
+	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape: WebcamMaskShape;
+	webcamSizePreset: WebcamSizePreset;
+	webcamPosition: WebcamPosition | null;
+}
+
+export const INITIAL_EDITOR_STATE: EditorState = {
+	zoomRegions: [],
+	trimRegions: [],
+	speedRegions: [],
+	annotationRegions: [],
+	cropRegion: DEFAULT_CROP_REGION,
+	wallpaper: DEFAULT_EDITOR_LAYOUT_SETTINGS.wallpaper,
+	shadowIntensity: DEFAULT_EDITOR_APPEARANCE_SETTINGS.shadowIntensity,
+	showBlur: DEFAULT_EDITOR_APPEARANCE_SETTINGS.showBlur,
+	motionBlurAmount: DEFAULT_EDITOR_APPEARANCE_SETTINGS.motionBlurAmount,
+	borderRadius: DEFAULT_EDITOR_APPEARANCE_SETTINGS.borderRadius,
+	padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+	aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
+	webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
+	webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
+	webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
+	webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
+};
+
+type StateUpdate = Partial<EditorState> | ((prev: EditorState) => Partial<EditorState>);
+
+interface History {
+	past: EditorState[];
+	present: EditorState;
+	future: EditorState[];
+}
+
+const MAX_HISTORY = 80;
+
+function resolve(present: EditorState, update: StateUpdate): EditorState {
+	const partial = typeof update === "function" ? update(present) : update;
+	return { ...present, ...partial };
+}
+
+function withCheckpoint(history: History, newPresent: EditorState): History {
+	return {
+		past: [...history.past.slice(-(MAX_HISTORY - 1)), history.present],
+		present: newPresent,
+		future: [],
+	};
+}
+
+export function useEditorHistory(initial: EditorState = INITIAL_EDITOR_STATE) {
+	const [history, setHistory] = useState<History>({ past: [], present: initial, future: [] });
+
+	// Tracks whether a live-update series (e.g. slider drag) is in progress.
+	// The first updateState call saves the pre-interaction state as a checkpoint.
+	const dirtyRef = useRef(false);
+
+	const pushState = useCallback((update: StateUpdate) => {
+		setHistory((prev) => withCheckpoint(prev, resolve(prev.present, update)));
+		dirtyRef.current = false;
+	}, []);
+
+	const updateState = useCallback((update: StateUpdate) => {
+		const isFirst = !dirtyRef.current;
+		dirtyRef.current = true;
+		setHistory((prev) => {
+			const next = resolve(prev.present, update);
+			return isFirst ? withCheckpoint(prev, next) : { ...prev, present: next };
+		});
+	}, []);
+
+	const commitState = useCallback(() => {
+		dirtyRef.current = false;
+	}, []);
+
+	const undo = useCallback(() => {
+		setHistory((prev) => {
+			if (!prev.past.length) return prev;
+			const previous = prev.past[prev.past.length - 1];
+			return {
+				past: prev.past.slice(0, -1),
+				present: previous,
+				future: [prev.present, ...prev.future],
+			};
+		});
+		dirtyRef.current = false;
+	}, []);
+
+	const redo = useCallback(() => {
+		setHistory((prev) => {
+			if (!prev.future.length) return prev;
+			const [next, ...remainingFuture] = prev.future;
+			return { past: [...prev.past, prev.present], present: next, future: remainingFuture };
+		});
+		dirtyRef.current = false;
+	}, []);
+
+	return {
+		state: history.present,
+		pushState,
+		updateState,
+		commitState,
+		undo,
+		redo,
+		canUndo: history.past.length > 0,
+		canRedo: history.future.length > 0,
+	};
+}
diff --git a/src/hooks/useMicrophoneDevices.ts b/src/hooks/useMicrophoneDevices.ts
new file mode 100644
index 0000000..4f40fac
--- /dev/null
+++ b/src/hooks/useMicrophoneDevices.ts
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+
+export interface MicrophoneDevice {
+	deviceId: string;
+	label: string;
+	groupId: string;
+}
+
+export function useMicrophoneDevices(enabled: boolean = true) {
+	const [devices, setDevices] = useState<MicrophoneDevice[]>([]);
+	const [selectedDeviceId, setSelectedDeviceId] = useState<string>("default");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!enabled) {
+			return;
+		}
+
+		let mounted = true;
+
+		const loadDevices = async () => {
+			try {
+				setIsLoading(true);
+				setError(null);
+
+				// Request permission first to get actual device labels
+				const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+				const allDevices = await navigator.mediaDevices.enumerateDevices();
+				const audioInputs = allDevices
+					.filter((device) => device.kind === "audioinput")
+					.map((device) => ({
+						deviceId: device.deviceId,
+						label: device.label || `Microphone ${device.deviceId.slice(0, 8)}`,
+						groupId: device.groupId,
+					}));
+
+				// Stop the permission stream
+				stream.getTracks().forEach((track) => track.stop());
+
+				if (mounted) {
+					setDevices(audioInputs);
+					if (selectedDeviceId === "default" && audioInputs.length > 0) {
+						setSelectedDeviceId(audioInputs[0].deviceId);
+					}
+					setIsLoading(false);
+				}
+			} catch (err) {
+				if (mounted) {
+					const errorMessage =
+						err instanceof Error ? err.message : "Failed to enumerate audio devices";
+					setError(errorMessage);
+					setIsLoading(false);
+					console.error("Error loading microphone devices:", err);
+				}
+			}
+		};
+
+		loadDevices();
+
+		const handleDeviceChange = () => {
+			loadDevices();
+		};
+
+		navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+
+		return () => {
+			mounted = false;
+			navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
+		};
+	}, [enabled, selectedDeviceId]);
+
+	return {
+		devices,
+		selectedDeviceId,
+		setSelectedDeviceId,
+		isLoading,
+		error,
+	};
+}
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
new file mode 100644
index 0000000..8780bb7
--- /dev/null
+++ b/src/hooks/useScreenRecorder.ts
@@ -0,0 +1,1812 @@
+import { fixWebmDuration } from "@fix-webm-duration/fix";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useScopedT } from "@/contexts/I18nContext";
+import {
+	type NativeMacRecordingRequest,
+	parseMacDisplayIdFromSourceId,
+	parseMacWindowIdFromSourceId,
+} from "@/lib/nativeMacRecording";
+import {
+	type NativeWindowsRecordingRequest,
+	parseWindowHandleFromSourceId,
+} from "@/lib/nativeWindowsRecording";
+import type { CursorCaptureMode, RecordedVideoAssetInput } from "@/lib/recordingSession";
+import { requestCameraAccess } from "@/lib/requestCameraAccess";
+import { createRecorderHandle, type RecorderHandle } from "./recorderHandle";
+
+const TARGET_FRAME_RATE = 60;
+const MIN_FRAME_RATE = 30;
+const TARGET_WIDTH = 3840;
+const TARGET_HEIGHT = 2160;
+const FOUR_K_PIXELS = TARGET_WIDTH * TARGET_HEIGHT;
+const QHD_WIDTH = 2560;
+const QHD_HEIGHT = 1440;
+const QHD_PIXELS = QHD_WIDTH * QHD_HEIGHT;
+
+const BITRATE_4K = 45_000_000;
+const BITRATE_QHD = 28_000_000;
+const BITRATE_BASE = 18_000_000;
+const HIGH_FRAME_RATE_THRESHOLD = 60;
+const HIGH_FRAME_RATE_BOOST = 1.7;
+
+const DEFAULT_WIDTH = 1920;
+const DEFAULT_HEIGHT = 1080;
+
+const CODEC_ALIGNMENT = 2;
+
+const BITS_PER_MEGABIT = 1_000_000;
+const CHROME_MEDIA_SOURCE = "desktop";
+const RECORDING_FILE_PREFIX = "recording-";
+const VIDEO_FILE_EXTENSION = ".webm";
+const WEBCAM_FILE_SUFFIX = "-webcam";
+
+const AUDIO_BITRATE_VOICE = 128_000;
+const AUDIO_BITRATE_SYSTEM = 192_000;
+
+const MIC_GAIN_BOOST = 1.4;
+const WEBCAM_TARGET_FRAME_RATE = 30;
+
+type UseScreenRecorderReturn = {
+	recording: boolean;
+	paused: boolean;
+	elapsedSeconds: number;
+	toggleRecording: () => void;
+	togglePaused: () => void;
+	canPauseRecording: boolean;
+	guideModeEnabled: boolean;
+	setGuideModeEnabled: (enabled: boolean) => void;
+	addGuideMarker: () => void;
+	restartRecording: () => void;
+	cancelRecording: () => void;
+	microphoneEnabled: boolean;
+	setMicrophoneEnabled: (enabled: boolean) => void;
+	microphoneDeviceId: string | undefined;
+	setMicrophoneDeviceId: (deviceId: string | undefined) => void;
+	microphoneDeviceName: string | undefined;
+	setMicrophoneDeviceName: (deviceName: string | undefined) => void;
+	webcamDeviceId: string | undefined;
+	setWebcamDeviceId: (deviceId: string | undefined) => void;
+	webcamDeviceName: string | undefined;
+	setWebcamDeviceName: (deviceName: string | undefined) => void;
+	systemAudioEnabled: boolean;
+	setSystemAudioEnabled: (enabled: boolean) => void;
+	webcamEnabled: boolean;
+	setWebcamEnabled: (enabled: boolean) => Promise<boolean>;
+	cursorCaptureMode: CursorCaptureMode;
+	setCursorCaptureMode: (mode: CursorCaptureMode) => void;
+};
+
+type NativeWindowsRecordingHandle = {
+	recordingId: number;
+	finalizing: boolean;
+	paused: boolean;
+	webcamRecorder: RecorderHandle | null;
+};
+
+type NativeMacRecordingHandle = {
+	recordingId: number;
+	finalizing: boolean;
+	paused: boolean;
+};
+
+export function useScreenRecorder(): UseScreenRecorderReturn {
+	const t = useScopedT("editor");
+	const [recording, setRecording] = useState(false);
+	const [paused, setPaused] = useState(false);
+	const [elapsedSeconds, setElapsedSeconds] = useState(0);
+	const [microphoneEnabled, setMicrophoneEnabled] = useState(false);
+	const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string | undefined>(undefined);
+	const [microphoneDeviceName, setMicrophoneDeviceName] = useState<string | undefined>(undefined);
+	const [webcamDeviceId, setWebcamDeviceId] = useState<string | undefined>(undefined);
+	const [webcamDeviceName, setWebcamDeviceName] = useState<string | undefined>(undefined);
+	const [systemAudioEnabled, setSystemAudioEnabled] = useState(false);
+	const [webcamEnabled, setWebcamEnabledState] = useState(false);
+	const [cursorCaptureMode, setCursorCaptureMode] = useState<CursorCaptureMode>("editable-overlay");
+	const [guideModeEnabled, setGuideModeEnabledState] = useState(false);
+	const screenRecorder = useRef<RecorderHandle | null>(null);
+	const webcamRecorder = useRef<RecorderHandle | null>(null);
+	const nativeWindowsRecording = useRef<NativeWindowsRecordingHandle | null>(null);
+	const nativeMacRecording = useRef<NativeMacRecordingHandle | null>(null);
+	const stream = useRef<MediaStream | null>(null);
+	const screenStream = useRef<MediaStream | null>(null);
+	const microphoneStream = useRef<MediaStream | null>(null);
+	const webcamStream = useRef<MediaStream | null>(null);
+	const mixingContext = useRef<AudioContext | null>(null);
+	const recordingId = useRef<number>(0);
+	const accumulatedDurationMs = useRef(0);
+	const segmentStartedAt = useRef<number | null>(null);
+	const finalizingRecordingId = useRef<number | null>(null);
+	const allowAutoFinalize = useRef(false);
+	const discardRecordingId = useRef<number | null>(null);
+	const restarting = useRef(false);
+	const countdownRunId = useRef(0);
+	const activeGuideRecordingId = useRef<number | null>(null);
+	const guideModeEnabledRef = useRef(false);
+	const [countdownActive, setCountdownActive] = useState(false);
+	const webcamReady = useRef(false);
+	const webcamAcquireId = useRef(0);
+	const canPauseRecording =
+		recording &&
+		Boolean(
+			(nativeWindowsRecording.current && !nativeWindowsRecording.current.finalizing) ||
+				(nativeMacRecording.current && !nativeMacRecording.current.finalizing) ||
+				(screenRecorder.current && screenRecorder.current.recorder.state !== "inactive"),
+		);
+
+	const getRecordingDurationMs = useCallback(() => {
+		const segmentDuration =
+			segmentStartedAt.current === null ? 0 : Date.now() - segmentStartedAt.current;
+		return accumulatedDurationMs.current + segmentDuration;
+	}, []);
+
+	const setGuideModeEnabled = useCallback(
+		(enabled: boolean) => {
+			if (recording) {
+				return;
+			}
+			guideModeEnabledRef.current = enabled;
+			setGuideModeEnabledState(enabled);
+		},
+		[recording],
+	);
+
+	const startGuideSession = useCallback(async (activeRecordingId: number) => {
+		if (!guideModeEnabledRef.current || !window.electronAPI?.guide) {
+			return;
+		}
+
+		const result = await window.electronAPI.guide.startSession(activeRecordingId);
+		if (!result.success) {
+			console.warn("Failed to start guide session:", result.error);
+			return;
+		}
+
+		activeGuideRecordingId.current = activeRecordingId;
+	}, []);
+
+	const finalizeGuideSession = useCallback(
+		async (activeRecordingId: number, videoPath?: string | null) => {
+			if (
+				activeGuideRecordingId.current !== activeRecordingId ||
+				!videoPath ||
+				!window.electronAPI?.guide
+			) {
+				return;
+			}
+
+			const result = await window.electronAPI.guide.finalizeEvents({
+				recordingId: activeRecordingId,
+				videoPath,
+			});
+			if (!result.success) {
+				console.warn("Failed to finalize guide session:", result.error);
+			}
+			activeGuideRecordingId.current = null;
+		},
+		[],
+	);
+
+	const discardGuideSession = useCallback(async (activeRecordingId: number) => {
+		if (!window.electronAPI?.guide) {
+			return;
+		}
+
+		const result = await window.electronAPI.guide.discardSession({
+			recordingId: activeRecordingId,
+		});
+		if (!result.success) {
+			console.warn("Failed to discard guide session:", result.error);
+		}
+		if (activeGuideRecordingId.current === activeRecordingId) {
+			activeGuideRecordingId.current = null;
+		}
+	}, []);
+
+	const addGuideMarker = useCallback(() => {
+		const activeRecordingId = activeGuideRecordingId.current;
+		if (!recording || activeRecordingId === null || !window.electronAPI?.guide) {
+			return;
+		}
+
+		void (async () => {
+			if (window.electronAPI?.guide.capturePointerMarker) {
+				const captureResult = await window.electronAPI.guide.capturePointerMarker();
+				if (captureResult.success && captureResult.data.captured) {
+					return;
+				}
+				if (!captureResult.success) {
+					console.warn("Failed to capture guide pointer marker:", captureResult.error);
+				}
+			}
+
+			const result = await window.electronAPI.guide.addMarker({
+				recordingId: activeRecordingId,
+				kind: "manual",
+				timeMs: getRecordingDurationMs(),
+				label: "Manual marker",
+			});
+			if (!result.success) {
+				console.warn("Failed to add guide marker:", result.error);
+			}
+		})();
+	}, [getRecordingDurationMs, recording]);
+
+	const selectMimeType = () => {
+		// H.264 first: hardware-accelerated on all modern devices, gives sharp
+		// real-time output. AV1/VP9 are great for distribution but too
+		// CPU-intensive for live 60 fps capture — they produce blurry frames
+		// when the software encoder can't keep up.
+		const preferred = [
+			"video/webm;codecs=h264",
+			"video/webm;codecs=vp8",
+			"video/webm;codecs=vp9",
+			"video/webm;codecs=av1",
+			"video/webm",
+		];
+
+		return preferred.find((type) => MediaRecorder.isTypeSupported(type)) ?? "video/webm";
+	};
+
+	const computeBitrate = (width: number, height: number) => {
+		const pixels = width * height;
+		const highFrameRateBoost =
+			TARGET_FRAME_RATE >= HIGH_FRAME_RATE_THRESHOLD ? HIGH_FRAME_RATE_BOOST : 1;
+
+		if (pixels >= FOUR_K_PIXELS) {
+			return Math.round(BITRATE_4K * highFrameRateBoost);
+		}
+
+		if (pixels >= QHD_PIXELS) {
+			return Math.round(BITRATE_QHD * highFrameRateBoost);
+		}
+
+		return Math.round(BITRATE_BASE * highFrameRateBoost);
+	};
+
+	const teardownMedia = useCallback(() => {
+		if (stream.current) {
+			stream.current.getTracks().forEach((track) => track.stop());
+			stream.current = null;
+		}
+		if (screenStream.current) {
+			screenStream.current.getTracks().forEach((track) => track.stop());
+			screenStream.current = null;
+		}
+		if (microphoneStream.current) {
+			microphoneStream.current.getTracks().forEach((track) => track.stop());
+			microphoneStream.current = null;
+		}
+		if (mixingContext.current) {
+			mixingContext.current.close().catch(() => {
+				// Ignore close errors during recorder teardown.
+			});
+			mixingContext.current = null;
+		}
+	}, []);
+
+	const stopWebcamPreviewStream = useCallback(() => {
+		if (!webcamStream.current) {
+			return;
+		}
+
+		webcamAcquireId.current++;
+		webcamStream.current.getTracks().forEach((track) => {
+			track.onended = null;
+			track.stop();
+		});
+		webcamStream.current = null;
+		webcamReady.current = true;
+	}, []);
+
+	const setWebcamEnabled = useCallback(
+		async (enabled: boolean) => {
+			if (!enabled) {
+				setWebcamEnabledState(false);
+				return true;
+			}
+
+			const accessResult = await requestCameraAccess();
+			if (!accessResult.success) {
+				toast.error(t("recording.failedCameraAccess"));
+				return false;
+			}
+
+			if (!accessResult.granted) {
+				toast.error(t("recording.cameraBlocked"));
+				return false;
+			}
+
+			setWebcamEnabledState(true);
+			return true;
+		},
+		[t],
+	);
+
+	useEffect(() => {
+		if (!webcamEnabled) return;
+
+		let cancelled = false;
+		let acquiredStream: MediaStream | null = null;
+		const thisAcquireId = ++webcamAcquireId.current;
+		webcamReady.current = false;
+
+		const acquire = async () => {
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia({
+					audio: false,
+					video: webcamDeviceId
+						? {
+								deviceId: { exact: webcamDeviceId },
+								frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+							}
+						: {
+								frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+							},
+				});
+
+				if (cancelled || thisAcquireId !== webcamAcquireId.current) {
+					stream.getTracks().forEach((track) => {
+						track.onended = null;
+						track.stop();
+					});
+					return;
+				}
+
+				acquiredStream = stream;
+				stream.getVideoTracks().forEach((track) => {
+					track.onended = () => {
+						webcamStream.current = null;
+						if (!restarting.current) {
+							setWebcamEnabledState(false);
+							toast.error(t("recording.cameraDisconnected"));
+						}
+					};
+				});
+				webcamStream.current = stream;
+				webcamReady.current = true;
+			} catch (cameraError) {
+				if (!cancelled) {
+					console.warn("Failed to get webcam access:", cameraError);
+					setWebcamEnabledState(false);
+					const isDeviceError =
+						cameraError instanceof DOMException &&
+						[
+							"NotFoundError",
+							"DevicesNotFoundError",
+							"OverconstrainedError",
+							"NotReadableError",
+						].includes(cameraError.name);
+					toast.error(t(isDeviceError ? "recording.cameraNotFound" : "recording.cameraBlocked"));
+					webcamReady.current = true;
+				}
+			}
+		};
+
+		void acquire();
+
+		return () => {
+			cancelled = true;
+			webcamReady.current = false;
+			if (acquiredStream) {
+				acquiredStream.getTracks().forEach((track) => {
+					track.onended = null;
+					track.stop();
+				});
+				webcamStream.current = null;
+			}
+		};
+	}, [webcamEnabled, webcamDeviceId, t]);
+
+	const finalizeRecording = useCallback(
+		(
+			activeScreenRecorder: RecorderHandle,
+			activeWebcamRecorder: RecorderHandle | null,
+			duration: number,
+			activeRecordingId: number,
+		) => {
+			if (finalizingRecordingId.current === activeRecordingId) {
+				return;
+			}
+			finalizingRecordingId.current = activeRecordingId;
+
+			if (screenRecorder.current === activeScreenRecorder) {
+				screenRecorder.current = null;
+			}
+			if (activeWebcamRecorder && webcamRecorder.current === activeWebcamRecorder) {
+				webcamRecorder.current = null;
+			}
+
+			teardownMedia();
+			setRecording(false);
+			setPaused(false);
+			setElapsedSeconds(0);
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = null;
+			window.electronAPI?.setRecordingState(false);
+
+			void (async () => {
+				// Each disk stream must end up either saved or explicitly discarded.
+				// store-recorded-session finalizes the streams included in a successful
+				// save; the finally block discards everything else.
+				let storeSucceeded = false;
+				let webcamIncludedInSave = false;
+				try {
+					const screenBlob = await activeScreenRecorder.recordedBlobPromise;
+					if (discardRecordingId.current === activeRecordingId) {
+						window.electronAPI?.discardCursorTelemetry(activeRecordingId);
+						await discardGuideSession(activeRecordingId);
+						return;
+					}
+					// When streaming succeeded the blob is empty — the data is already on disk.
+					if (!activeScreenRecorder.isStreaming() && screenBlob.size === 0) {
+						return;
+					}
+
+					const screenFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${VIDEO_FILE_EXTENSION}`;
+					const webcamFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`;
+
+					// Only fix duration / convert to ArrayBuffer for in-memory data;
+					// streamed recordings are patched on disk by the main process.
+					let screenVideoData: ArrayBuffer = new ArrayBuffer(0);
+					if (!activeScreenRecorder.isStreaming() && screenBlob.size > 0) {
+						const fixedScreenBlob = await fixWebmDuration(screenBlob, duration);
+						screenVideoData = await fixedScreenBlob.arrayBuffer();
+					}
+
+					let webcamVideoData: ArrayBuffer | undefined;
+					if (activeWebcamRecorder) {
+						const webcamBlob = await activeWebcamRecorder.recordedBlobPromise.catch(() => null);
+						if (!activeWebcamRecorder.isStreaming() && webcamBlob && webcamBlob.size > 0) {
+							const fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
+							webcamVideoData = await fixedWebcamBlob.arrayBuffer();
+						} else if (activeWebcamRecorder.isStreaming()) {
+							webcamVideoData = new ArrayBuffer(0);
+						}
+					}
+					webcamIncludedInSave = webcamVideoData !== undefined;
+
+					const result = await window.electronAPI.storeRecordedSession({
+						screen: {
+							videoData: screenVideoData,
+							fileName: screenFileName,
+						},
+						webcam:
+							webcamVideoData !== undefined
+								? { videoData: webcamVideoData, fileName: webcamFileName }
+								: undefined,
+						createdAt: activeRecordingId,
+						cursorCaptureMode,
+						durationMs: duration,
+					});
+
+					if (!result.success) {
+						console.error("Failed to store recording session:", result.message);
+						return;
+					}
+					// store-recorded-session has flushed and closed the saved streams.
+					storeSucceeded = true;
+
+					if (result.session) {
+						await window.electronAPI.setCurrentRecordingSession(result.session);
+					} else if (result.path) {
+						await window.electronAPI.setCurrentVideoPath(result.path);
+					}
+					await finalizeGuideSession(
+						activeRecordingId,
+						result.session?.screenVideoPath ?? result.path,
+					);
+
+					await window.electronAPI.switchToEditor();
+				} catch (error) {
+					console.error("Error saving recording:", error);
+				} finally {
+					// Discard any recorder whose data was not part of a successful save
+					// — a discarded run, a failed save, or a webcam whose disk write
+					// failed (so it was omitted while the screen still saved) — so no
+					// stream or partial file is left open or orphaned.
+					if (!storeSucceeded) {
+						await activeScreenRecorder.discard().catch(() => undefined);
+					}
+					if (activeWebcamRecorder && !(storeSucceeded && webcamIncludedInSave)) {
+						await activeWebcamRecorder.discard().catch(() => undefined);
+					}
+					if (finalizingRecordingId.current === activeRecordingId) {
+						finalizingRecordingId.current = null;
+					}
+					if (discardRecordingId.current === activeRecordingId) {
+						discardRecordingId.current = null;
+					}
+				}
+			})();
+		},
+		[cursorCaptureMode, discardGuideSession, finalizeGuideSession, teardownMedia],
+	);
+
+	const finalizeNativeWindowsRecording = useCallback(
+		async (discard = false) => {
+			const activeNativeRecording = nativeWindowsRecording.current;
+			if (!activeNativeRecording || activeNativeRecording.finalizing) {
+				return false;
+			}
+
+			activeNativeRecording.finalizing = true;
+			const activeWebcamRecorder = activeNativeRecording.webcamRecorder;
+			const duration = Math.max(0, getRecordingDurationMs());
+			if (
+				activeWebcamRecorder?.recorder.state === "recording" ||
+				activeWebcamRecorder?.recorder.state === "paused"
+			) {
+				try {
+					activeWebcamRecorder.recorder.stop();
+				} catch {
+					// Recorder may already be stopping.
+				}
+			}
+			if (activeWebcamRecorder && webcamRecorder.current === activeWebcamRecorder) {
+				webcamRecorder.current = null;
+			}
+
+			const clearNativeRecordingState = () => {
+				nativeWindowsRecording.current = null;
+				setRecording(false);
+				setPaused(false);
+				setElapsedSeconds(0);
+				accumulatedDurationMs.current = 0;
+				segmentStartedAt.current = null;
+			};
+
+			try {
+				const result = await window.electronAPI.stopNativeWindowsRecording(discard);
+				if (discard || result.discarded) {
+					await discardGuideSession(activeNativeRecording.recordingId);
+					clearNativeRecordingState();
+					return true;
+				}
+				if (!result.success) {
+					console.error("Failed to stop native Windows recording:", result.error);
+					toast.error(result.error ?? "Failed to stop native Windows recording");
+					activeNativeRecording.finalizing = false;
+					return true;
+				}
+
+				const nativeScreenPath = result.session?.screenVideoPath ?? result.path;
+				let storedSession = result.session;
+				if (activeWebcamRecorder && nativeScreenPath) {
+					const webcamBlob = await activeWebcamRecorder.recordedBlobPromise.catch(() => null);
+					const screenRead = await window.electronAPI.readBinaryFile(nativeScreenPath);
+					if (webcamBlob && webcamBlob.size > 0 && screenRead.success && screenRead.data) {
+						const fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
+						const nativeScreenFileName =
+							nativeScreenPath.split(/[\\/]/).pop() ??
+							`${RECORDING_FILE_PREFIX}${activeNativeRecording.recordingId}.mp4`;
+						const webcamFileName = `${RECORDING_FILE_PREFIX}${activeNativeRecording.recordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`;
+						const stored = await window.electronAPI.storeRecordedSession({
+							screen: {
+								videoData: screenRead.data,
+								fileName: nativeScreenFileName,
+							},
+							webcam: {
+								videoData: await fixedWebcamBlob.arrayBuffer(),
+								fileName: webcamFileName,
+							},
+							createdAt: activeNativeRecording.recordingId,
+							cursorCaptureMode,
+						});
+						if (stored.success && stored.session) {
+							storedSession = stored.session;
+						}
+					}
+				}
+
+				clearNativeRecordingState();
+				if (storedSession) {
+					await window.electronAPI.setCurrentRecordingSession(storedSession);
+				} else if (result.path) {
+					await window.electronAPI.setCurrentVideoPath(result.path);
+				}
+				await finalizeGuideSession(
+					activeNativeRecording.recordingId,
+					storedSession?.screenVideoPath ?? result.path,
+				);
+
+				await window.electronAPI.switchToEditor();
+				return true;
+			} catch (error) {
+				console.error("Error saving native Windows recording:", error);
+				toast.error(
+					error instanceof Error ? error.message : "Failed to save native Windows recording",
+				);
+				activeNativeRecording.finalizing = false;
+				return true;
+			} finally {
+				if (discardRecordingId.current === activeNativeRecording.recordingId) {
+					discardRecordingId.current = null;
+				}
+			}
+		},
+		[cursorCaptureMode, discardGuideSession, finalizeGuideSession, getRecordingDurationMs],
+	);
+
+	const finalizeNativeMacRecording = useCallback(
+		async (discard = false) => {
+			const activeNativeRecording = nativeMacRecording.current;
+			if (!activeNativeRecording || activeNativeRecording.finalizing) {
+				return false;
+			}
+
+			activeNativeRecording.finalizing = true;
+			const duration = Math.max(0, getRecordingDurationMs());
+			const activeWebcamRecorder = webcamRecorder.current;
+			if (activeWebcamRecorder && webcamRecorder.current === activeWebcamRecorder) {
+				webcamRecorder.current = null;
+			}
+			const webcamAssetPromise = (async (): Promise<RecordedVideoAssetInput | undefined> => {
+				if (!activeWebcamRecorder) {
+					return undefined;
+				}
+
+				try {
+					if (activeWebcamRecorder.recorder.state !== "inactive") {
+						activeWebcamRecorder.recorder.stop();
+					}
+					const webcamBlob = await activeWebcamRecorder.recordedBlobPromise;
+					if (!webcamBlob || webcamBlob.size === 0) {
+						return undefined;
+					}
+					const fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
+					return {
+						videoData: await fixedWebcamBlob.arrayBuffer(),
+						fileName: `${RECORDING_FILE_PREFIX}${activeNativeRecording.recordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`,
+					};
+				} catch (error) {
+					console.error("Failed to finalize native macOS webcam recording:", error);
+					return undefined;
+				}
+			})();
+
+			const clearNativeRecordingState = () => {
+				nativeMacRecording.current = null;
+				setRecording(false);
+				setPaused(false);
+				setElapsedSeconds(0);
+				accumulatedDurationMs.current = 0;
+				segmentStartedAt.current = null;
+			};
+
+			try {
+				const result = await window.electronAPI.stopNativeMacRecording(discard);
+				const webcamAsset = await webcamAssetPromise;
+				if (discard || result.discarded) {
+					await discardGuideSession(activeNativeRecording.recordingId);
+					clearNativeRecordingState();
+					return true;
+				}
+				if (!result.success) {
+					console.error("Failed to stop native macOS recording:", result.error);
+					toast.error(result.error ?? "Failed to stop native macOS recording");
+					activeNativeRecording.finalizing = false;
+					return true;
+				}
+
+				if (webcamAsset && result.path) {
+					const attachResult = await window.electronAPI.attachNativeMacWebcamRecording({
+						screenVideoPath: result.path,
+						recordingId: activeNativeRecording.recordingId,
+						webcam: webcamAsset,
+						cursorCaptureMode,
+					});
+					if (attachResult.success) {
+						result.session = attachResult.session;
+					} else {
+						console.error("Failed to attach native macOS webcam recording:", attachResult.error);
+						toast.error(attachResult.error ?? "Failed to store webcam recording");
+					}
+				}
+
+				clearNativeRecordingState();
+				if (result.session) {
+					await window.electronAPI.setCurrentRecordingSession(result.session);
+				} else if (result.path) {
+					await window.electronAPI.setCurrentVideoPath(result.path);
+				}
+				await finalizeGuideSession(
+					activeNativeRecording.recordingId,
+					result.session?.screenVideoPath ?? result.path,
+				);
+
+				await window.electronAPI.switchToEditor();
+				return true;
+			} catch (error) {
+				console.error("Error saving native macOS recording:", error);
+				toast.error(
+					error instanceof Error ? error.message : "Failed to save native macOS recording",
+				);
+				activeNativeRecording.finalizing = false;
+				return true;
+			} finally {
+				if (discardRecordingId.current === activeNativeRecording.recordingId) {
+					discardRecordingId.current = null;
+				}
+			}
+		},
+		[cursorCaptureMode, discardGuideSession, finalizeGuideSession, getRecordingDurationMs],
+	);
+
+	const stopRecording = useRef(() => {
+		if (nativeWindowsRecording.current) {
+			void finalizeNativeWindowsRecording(false);
+			return;
+		}
+		if (nativeMacRecording.current) {
+			void finalizeNativeMacRecording(false);
+			return;
+		}
+
+		const activeScreenRecorder = screenRecorder.current;
+		if (!activeScreenRecorder) {
+			return;
+		}
+
+		const activeWebcamRecorder = webcamRecorder.current;
+		const duration = getRecordingDurationMs();
+		const activeRecordingId = recordingId.current;
+
+		finalizeRecording(
+			activeScreenRecorder,
+			activeWebcamRecorder ?? null,
+			duration,
+			activeRecordingId,
+		);
+
+		if (
+			activeScreenRecorder.recorder.state === "recording" ||
+			activeScreenRecorder.recorder.state === "paused"
+		) {
+			try {
+				activeScreenRecorder.recorder.stop();
+			} catch {
+				// Recorder may already be stopping.
+			}
+		}
+		if (activeWebcamRecorder) {
+			if (
+				activeWebcamRecorder.recorder.state === "recording" ||
+				activeWebcamRecorder.recorder.state === "paused"
+			) {
+				try {
+					activeWebcamRecorder.recorder.stop();
+				} catch {
+					// Recorder may already be stopping.
+				}
+			}
+		}
+	});
+
+	const safeHideCountdownOverlay = useCallback(async (runId: number) => {
+		try {
+			await window.electronAPI.hideCountdownOverlay(runId);
+		} catch (error) {
+			console.warn("Failed to hide countdown overlay:", error);
+		}
+	}, []);
+
+	useEffect(() => {
+		let cleanup: (() => void) | undefined;
+
+		if (window.electronAPI?.onStopRecordingFromTray) {
+			cleanup = window.electronAPI.onStopRecordingFromTray(() => {
+				stopRecording.current();
+			});
+		}
+
+		return () => {
+			const activeRunId = countdownRunId.current;
+			if (cleanup) cleanup();
+			countdownRunId.current += 1;
+			void safeHideCountdownOverlay(activeRunId);
+			allowAutoFinalize.current = false;
+			restarting.current = false;
+			discardRecordingId.current = null;
+			if (nativeWindowsRecording.current) {
+				void finalizeNativeWindowsRecording(true);
+			}
+			if (nativeMacRecording.current) {
+				void finalizeNativeMacRecording(true);
+			}
+
+			if (
+				screenRecorder.current?.recorder.state === "recording" ||
+				screenRecorder.current?.recorder.state === "paused"
+			) {
+				try {
+					screenRecorder.current.recorder.stop();
+				} catch {
+					// Ignore recorder teardown errors during cleanup.
+				}
+			}
+			if (
+				webcamRecorder.current?.recorder.state === "recording" ||
+				webcamRecorder.current?.recorder.state === "paused"
+			) {
+				try {
+					webcamRecorder.current.recorder.stop();
+				} catch {
+					// Ignore recorder teardown errors during cleanup.
+				}
+			}
+			screenRecorder.current = null;
+			webcamRecorder.current = null;
+			teardownMedia();
+		};
+	}, [
+		teardownMedia,
+		safeHideCountdownOverlay,
+		finalizeNativeWindowsRecording,
+		finalizeNativeMacRecording,
+	]);
+
+	const safeShowCountdownOverlay = async (value: number, runId: number) => {
+		try {
+			await window.electronAPI.showCountdownOverlay(value, runId);
+			return true;
+		} catch (error) {
+			console.warn("Failed to show countdown overlay:", error);
+			return false;
+		}
+	};
+
+	const cancelCountdown = () => {
+		const activeRunId = countdownRunId.current;
+		countdownRunId.current += 1;
+		setCountdownActive(false);
+		void safeHideCountdownOverlay(activeRunId);
+	};
+
+	const safeSetCountdownOverlayValue = async (value: number, runId: number) => {
+		try {
+			await window.electronAPI.setCountdownOverlayValue(value, runId);
+		} catch (error) {
+			console.warn("Failed to update countdown overlay value:", error);
+		}
+	};
+
+	const isCountdownRunActive = (runId?: number) =>
+		runId === undefined || countdownRunId.current === runId;
+
+	const waitForWebcamReady = async () => {
+		if (webcamReady.current) {
+			return;
+		}
+
+		await new Promise<void>((resolve) => {
+			const interval = setInterval(() => {
+				if (webcamReady.current) {
+					clearInterval(interval);
+					resolve();
+				}
+			}, 50);
+			setTimeout(() => {
+				clearInterval(interval);
+				resolve();
+			}, 5000);
+		});
+	};
+
+	const startNativeWindowsRecordingIfAvailable = async (
+		selectedSource: ProcessedDesktopSource,
+		countdownRunToken?: number,
+	) => {
+		try {
+			const platform = await window.electronAPI.getPlatform();
+			if (platform !== "win32") {
+				return false;
+			}
+
+			const availability = await window.electronAPI.isNativeWindowsCaptureAvailable();
+			if (!availability.success || !availability.available) {
+				if (availability.reason === "unsupported-os") {
+					return false;
+				}
+				if (availability.reason === "missing-helper") {
+					console.warn("Native Windows capture helper is not available; using browser capture.");
+					return false;
+				}
+
+				throw new Error(availability.error ?? "Native Windows capture is not available.");
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				return true;
+			}
+
+			const activeRecordingId = Date.now();
+			const displayId =
+				typeof selectedSource.displayId === "number"
+					? selectedSource.displayId
+					: Number(selectedSource.display_id);
+			const sourceType = selectedSource.id.startsWith("window:") ? "window" : "display";
+			const windowHandle = parseWindowHandleFromSourceId(selectedSource.id);
+			if (webcamEnabled) {
+				await waitForWebcamReady();
+				if (!isCountdownRunActive(countdownRunToken)) {
+					return true;
+				}
+			}
+			const browserWebcamRecorder =
+				webcamEnabled && webcamStream.current
+					? createRecorderHandle(webcamStream.current, {
+							mimeType: selectMimeType(),
+							videoBitsPerSecond: BITRATE_BASE,
+						})
+					: null;
+			if (webcamEnabled && !browserWebcamRecorder) {
+				stopWebcamPreviewStream();
+			}
+			const request: NativeWindowsRecordingRequest = {
+				recordingId: activeRecordingId,
+				source: {
+					type: sourceType,
+					sourceId: selectedSource.id,
+					...(Number.isFinite(displayId) ? { displayId } : {}),
+					...(selectedSource.bounds ? { bounds: selectedSource.bounds } : {}),
+					...(windowHandle ? { windowHandle } : {}),
+				},
+				video: {
+					fps: TARGET_FRAME_RATE,
+					width: TARGET_WIDTH,
+					height: TARGET_HEIGHT,
+				},
+				audio: {
+					system: {
+						enabled: systemAudioEnabled,
+					},
+					microphone: {
+						enabled: microphoneEnabled,
+						deviceId: microphoneDeviceId,
+						deviceName: microphoneDeviceName,
+						gain: MIC_GAIN_BOOST,
+					},
+				},
+				webcam: {
+					enabled: webcamEnabled && !browserWebcamRecorder,
+					deviceId: webcamDeviceId,
+					deviceName: webcamDeviceName,
+					width: 0,
+					height: 0,
+					fps: WEBCAM_TARGET_FRAME_RATE,
+				},
+				cursor: {
+					mode: cursorCaptureMode,
+				},
+			};
+			const result = await window.electronAPI.startNativeWindowsRecording(request);
+			if (!result.success || !result.recordingId) {
+				if (
+					browserWebcamRecorder?.recorder.state === "recording" ||
+					browserWebcamRecorder?.recorder.state === "paused"
+				) {
+					browserWebcamRecorder.recorder.stop();
+				}
+				throw new Error(result.error ?? "Native Windows capture failed.");
+			}
+
+			recordingId.current = result.recordingId;
+			nativeWindowsRecording.current = {
+				recordingId: result.recordingId,
+				finalizing: false,
+				paused: false,
+				webcamRecorder: browserWebcamRecorder,
+			};
+			webcamRecorder.current = browserWebcamRecorder;
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = Date.now();
+			allowAutoFinalize.current = true;
+			await startGuideSession(result.recordingId);
+			setRecording(true);
+			setPaused(false);
+			setElapsedSeconds(0);
+			return true;
+		} catch (error) {
+			console.error("Native Windows capture failed:", error);
+			throw error;
+		}
+	};
+
+	const startNativeMacRecordingIfAvailable = async (
+		selectedSource: ProcessedDesktopSource,
+		countdownRunToken?: number,
+	) => {
+		try {
+			const platform = await window.electronAPI.getPlatform();
+			if (platform !== "darwin") {
+				return false;
+			}
+
+			const availability = await window.electronAPI.isNativeMacCaptureAvailable();
+			if (!availability.success || !availability.available) {
+				if (availability.reason === "unsupported-platform") {
+					return false;
+				}
+
+				throw new Error(
+					availability.reason === "missing-helper"
+						? "Native macOS capture helper is not available."
+						: (availability.error ?? "Native macOS capture is not available."),
+				);
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				return true;
+			}
+
+			const activeRecordingId = Date.now();
+			const sourceType = selectedSource.id.startsWith("window:") ? "window" : "display";
+			const displayId =
+				typeof selectedSource.displayId === "number"
+					? selectedSource.displayId
+					: Number(selectedSource.display_id) || parseMacDisplayIdFromSourceId(selectedSource.id);
+			const windowId = parseMacWindowIdFromSourceId(selectedSource.id);
+			let nativeWebcamRecorder: RecorderHandle | null = null;
+			if (webcamEnabled) {
+				if (!webcamReady.current) {
+					await new Promise<void>((resolve) => {
+						const interval = setInterval(() => {
+							if (webcamReady.current) {
+								clearInterval(interval);
+								resolve();
+							}
+						}, 50);
+						setTimeout(() => {
+							clearInterval(interval);
+							resolve();
+						}, 5000);
+					});
+				}
+				if (!isCountdownRunActive(countdownRunToken)) {
+					return true;
+				}
+				if (webcamStream.current) {
+					nativeWebcamRecorder = createRecorderHandle(webcamStream.current, {
+						mimeType: selectMimeType(),
+						videoBitsPerSecond: BITRATE_BASE,
+					});
+				} else {
+					webcamAcquireId.current++;
+					setWebcamEnabledState(false);
+				}
+			}
+			if (!isCountdownRunActive(countdownRunToken)) {
+				if (nativeWebcamRecorder && nativeWebcamRecorder.recorder.state !== "inactive") {
+					nativeWebcamRecorder.recorder.stop();
+				}
+				return true;
+			}
+			const request: NativeMacRecordingRequest = {
+				schemaVersion: 1,
+				recordingId: activeRecordingId,
+				source: {
+					type: sourceType,
+					sourceId: selectedSource.id,
+					...(displayId ? { displayId } : {}),
+					...(selectedSource.bounds ? { bounds: selectedSource.bounds } : {}),
+					...(windowId ? { windowId } : {}),
+				},
+				video: {
+					fps: TARGET_FRAME_RATE,
+					width: TARGET_WIDTH,
+					height: TARGET_HEIGHT,
+					bitrate: computeBitrate(TARGET_WIDTH, TARGET_HEIGHT),
+					hideSystemCursor: cursorCaptureMode === "editable-overlay",
+				},
+				audio: {
+					system: {
+						enabled: systemAudioEnabled,
+					},
+					microphone: {
+						enabled: microphoneEnabled,
+						deviceId: microphoneDeviceId,
+						deviceName: microphoneDeviceName,
+						gain: MIC_GAIN_BOOST,
+					},
+				},
+				webcam: {
+					enabled: webcamEnabled,
+					deviceId: webcamDeviceId,
+					deviceName: webcamDeviceName,
+					width: 0,
+					height: 0,
+					fps: WEBCAM_TARGET_FRAME_RATE,
+				},
+				cursor: {
+					mode: cursorCaptureMode,
+				},
+				outputs: {
+					screenPath: "",
+				},
+			};
+			const result = await window.electronAPI.startNativeMacRecording(request);
+			if (!result.success || !result.recordingId) {
+				if (nativeWebcamRecorder && nativeWebcamRecorder.recorder.state !== "inactive") {
+					nativeWebcamRecorder.recorder.stop();
+				}
+				throw new Error(result.error ?? "Native macOS capture failed.");
+			}
+			if (!isCountdownRunActive(countdownRunToken)) {
+				if (nativeWebcamRecorder && nativeWebcamRecorder.recorder.state !== "inactive") {
+					nativeWebcamRecorder.recorder.stop();
+				}
+				await window.electronAPI.stopNativeMacRecording(true);
+				return true;
+			}
+
+			recordingId.current = result.recordingId;
+			nativeMacRecording.current = {
+				recordingId: result.recordingId,
+				finalizing: false,
+				paused: false,
+			};
+			webcamRecorder.current = nativeWebcamRecorder;
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = Date.now();
+			allowAutoFinalize.current = true;
+			await startGuideSession(result.recordingId);
+			setRecording(true);
+			setPaused(false);
+			setElapsedSeconds(0);
+			return true;
+		} catch (error) {
+			console.error("Native macOS capture failed:", error);
+			throw error;
+		}
+	};
+
+	const startRecordCountdown = async () => {
+		if (countdownActive || recording) {
+			return;
+		}
+
+		const runId = countdownRunId.current + 1;
+		countdownRunId.current = runId;
+
+		let selectedSource: ProcessedDesktopSource | null = null;
+		try {
+			selectedSource = await window.electronAPI.getSelectedSource();
+		} catch (error) {
+			console.warn("Failed to read selected source before countdown:", error);
+		}
+
+		if (!isCountdownRunActive(runId)) {
+			return;
+		}
+
+		if (!selectedSource) {
+			if (countdownRunId.current === runId) {
+				setCountdownActive(false);
+			}
+			alert(t("recording.selectSource"));
+			return;
+		}
+
+		try {
+			const platform = await window.electronAPI.getPlatform();
+			if (platform === "darwin" && cursorCaptureMode === "editable-overlay") {
+				const access = await window.electronAPI.requestNativeMacCursorAccess();
+				if (!access.granted) {
+					toast.info(t("recording.accessibilityAllowAndRetry"));
+					return;
+				}
+			}
+		} catch (error) {
+			console.warn("Failed to preflight macOS cursor accessibility before countdown:", error);
+		}
+
+		if (!isCountdownRunActive(runId)) {
+			return;
+		}
+
+		setCountdownActive(true);
+
+		let overlayHiddenBeforeStart = false;
+		try {
+			const values = [3, 2, 1];
+			const overlayShown = await safeShowCountdownOverlay(values[0], runId);
+
+			if (countdownRunId.current !== runId) {
+				return;
+			}
+
+			for (const value of values) {
+				if (countdownRunId.current !== runId) {
+					return;
+				}
+
+				if (overlayShown && value !== values[0]) {
+					await safeSetCountdownOverlayValue(value, runId);
+
+					if (countdownRunId.current !== runId) {
+						return;
+					}
+				}
+
+				await new Promise((resolve) => window.setTimeout(resolve, 1000));
+			}
+
+			if (countdownRunId.current !== runId) {
+				return;
+			}
+
+			setCountdownActive(false);
+			await safeHideCountdownOverlay(runId);
+			overlayHiddenBeforeStart = true;
+
+			if (countdownRunId.current !== runId) {
+				return;
+			}
+
+			await startRecording(runId);
+		} finally {
+			if (!overlayHiddenBeforeStart && countdownRunId.current === runId) {
+				setCountdownActive(false);
+				await safeHideCountdownOverlay(runId);
+			}
+		}
+	};
+
+	const startRecording = async (countdownRunToken?: number) => {
+		try {
+			const selectedSource = await window.electronAPI.getSelectedSource();
+			if (!selectedSource) {
+				alert(t("recording.selectSource"));
+				return;
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
+			if (await startNativeWindowsRecordingIfAvailable(selectedSource, countdownRunToken)) {
+				return;
+			}
+			if (await startNativeMacRecordingIfAvailable(selectedSource, countdownRunToken)) {
+				return;
+			}
+
+			let screenMediaStream: MediaStream;
+			const platform = await window.electronAPI.getPlatform();
+
+			if (platform === "win32") {
+				// getDisplayMedia + setDisplayMediaRequestHandler (main.ts) supplies the
+				// pre-selected source. Editable cursor mode excludes the system cursor so
+				// the editor can render a replacement; system mode bakes it into the video.
+				screenMediaStream = await navigator.mediaDevices.getDisplayMedia({
+					video: {
+						cursor: cursorCaptureMode === "editable-overlay" ? "never" : "always",
+						width: { max: TARGET_WIDTH },
+						height: { max: TARGET_HEIGHT },
+						frameRate: { ideal: TARGET_FRAME_RATE },
+					} as MediaTrackConstraints,
+					audio: systemAudioEnabled,
+				} as DisplayMediaStreamOptions);
+			} else {
+				const videoConstraints = {
+					mandatory: {
+						chromeMediaSource: CHROME_MEDIA_SOURCE,
+						chromeMediaSourceId: selectedSource.id,
+						maxWidth: TARGET_WIDTH,
+						maxHeight: TARGET_HEIGHT,
+						maxFrameRate: TARGET_FRAME_RATE,
+						minFrameRate: MIN_FRAME_RATE,
+					},
+				};
+
+				if (systemAudioEnabled) {
+					try {
+						screenMediaStream = await navigator.mediaDevices.getUserMedia({
+							audio: {
+								mandatory: {
+									chromeMediaSource: CHROME_MEDIA_SOURCE,
+									chromeMediaSourceId: selectedSource.id,
+								},
+							},
+							video: videoConstraints,
+						} as unknown as MediaStreamConstraints);
+					} catch (audioErr) {
+						console.warn("System audio capture failed, falling back to video-only:", audioErr);
+						toast.error(t("recording.systemAudioUnavailable"));
+						screenMediaStream = await navigator.mediaDevices.getUserMedia({
+							audio: false,
+							video: videoConstraints,
+						} as unknown as MediaStreamConstraints);
+					}
+				} else {
+					screenMediaStream = await navigator.mediaDevices.getUserMedia({
+						audio: false,
+						video: videoConstraints,
+					} as unknown as MediaStreamConstraints);
+				}
+			}
+			screenStream.current = screenMediaStream;
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
+			if (microphoneEnabled) {
+				try {
+					microphoneStream.current = await navigator.mediaDevices.getUserMedia({
+						audio: microphoneDeviceId
+							? {
+									deviceId: { exact: microphoneDeviceId },
+									echoCancellation: true,
+									noiseSuppression: true,
+									autoGainControl: true,
+								}
+							: {
+									echoCancellation: true,
+									noiseSuppression: true,
+									autoGainControl: true,
+								},
+						video: false,
+					});
+				} catch (audioError) {
+					console.warn("Failed to get microphone access:", audioError);
+					toast.error(t("recording.microphoneDenied"));
+					setMicrophoneEnabled(false);
+				}
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
+			if (webcamEnabled) {
+				if (!webcamReady.current) {
+					await new Promise<void>((resolve) => {
+						const interval = setInterval(() => {
+							if (webcamReady.current) {
+								clearInterval(interval);
+								resolve();
+							}
+						}, 50);
+						setTimeout(() => {
+							clearInterval(interval);
+							resolve();
+						}, 5000);
+					});
+				}
+				if (!webcamStream.current) {
+					webcamAcquireId.current++;
+					setWebcamEnabledState(false);
+				}
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
+			stream.current = new MediaStream();
+			const videoTrack = screenMediaStream.getVideoTracks()[0];
+			if (!videoTrack) {
+				throw new Error("Video track is not available.");
+			}
+			stream.current.addTrack(videoTrack);
+
+			const systemAudioTrack = screenMediaStream.getAudioTracks()[0];
+			const micAudioTrack = microphoneStream.current?.getAudioTracks()[0];
+
+			if (systemAudioTrack && micAudioTrack) {
+				const ctx = new AudioContext();
+				mixingContext.current = ctx;
+				const systemSource = ctx.createMediaStreamSource(new MediaStream([systemAudioTrack]));
+				const micSource = ctx.createMediaStreamSource(new MediaStream([micAudioTrack]));
+				const micGain = ctx.createGain();
+				micGain.gain.value = MIC_GAIN_BOOST;
+				const destination = ctx.createMediaStreamDestination();
+				systemSource.connect(destination);
+				micSource.connect(micGain).connect(destination);
+				stream.current.addTrack(destination.stream.getAudioTracks()[0]);
+			} else if (systemAudioTrack) {
+				stream.current.addTrack(systemAudioTrack);
+			} else if (micAudioTrack) {
+				stream.current.addTrack(micAudioTrack);
+			}
+
+			try {
+				await videoTrack.applyConstraints({
+					frameRate: { ideal: TARGET_FRAME_RATE, max: TARGET_FRAME_RATE },
+					width: { ideal: TARGET_WIDTH, max: TARGET_WIDTH },
+					height: { ideal: TARGET_HEIGHT, max: TARGET_HEIGHT },
+				});
+			} catch (constraintError) {
+				console.warn(
+					"Unable to lock 4K/60fps constraints, using best available track settings.",
+					constraintError,
+				);
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
+			let {
+				width = DEFAULT_WIDTH,
+				height = DEFAULT_HEIGHT,
+				frameRate = TARGET_FRAME_RATE,
+			} = videoTrack.getSettings();
+
+			width = Math.floor(width / CODEC_ALIGNMENT) * CODEC_ALIGNMENT;
+			height = Math.floor(height / CODEC_ALIGNMENT) * CODEC_ALIGNMENT;
+
+			const videoBitsPerSecond = computeBitrate(width, height);
+			const mimeType = selectMimeType();
+
+			console.log(
+				`Recording at ${width}x${height} @ ${frameRate ?? TARGET_FRAME_RATE}fps using ${mimeType} / ${Math.round(
+					videoBitsPerSecond / BITS_PER_MEGABIT,
+				)} Mbps`,
+			);
+
+			const hasAudio = stream.current.getAudioTracks().length > 0;
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
+			recordingId.current = Date.now();
+			const activeRecordingId = recordingId.current;
+			screenRecorder.current = createRecorderHandle(
+				stream.current,
+				{
+					mimeType,
+					videoBitsPerSecond,
+					...(hasAudio
+						? { audioBitsPerSecond: systemAudioTrack ? AUDIO_BITRATE_SYSTEM : AUDIO_BITRATE_VOICE }
+						: {}),
+				},
+				`${RECORDING_FILE_PREFIX}${activeRecordingId}${VIDEO_FILE_EXTENSION}`,
+			);
+			screenRecorder.current.recorder.addEventListener(
+				"error",
+				() => {
+					setRecording(false);
+				},
+				{ once: true },
+			);
+
+			if (webcamStream.current) {
+				webcamRecorder.current = createRecorderHandle(
+					webcamStream.current,
+					{ mimeType, videoBitsPerSecond: Math.min(videoBitsPerSecond, BITRATE_BASE) },
+					`${RECORDING_FILE_PREFIX}${activeRecordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`,
+				);
+			}
+
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = Date.now();
+			allowAutoFinalize.current = true;
+			await startGuideSession(activeRecordingId);
+			setRecording(true);
+			setPaused(false);
+			setElapsedSeconds(0);
+			window.electronAPI?.setRecordingState(true, recordingId.current, cursorCaptureMode);
+
+			const activeScreenRecorder = screenRecorder.current;
+			const activeWebcamRecorder = webcamRecorder.current;
+			if (activeScreenRecorder) {
+				activeScreenRecorder.recorder.addEventListener(
+					"stop",
+					() => {
+						if (!allowAutoFinalize.current) {
+							return;
+						}
+						finalizeRecording(
+							activeScreenRecorder,
+							activeWebcamRecorder ?? null,
+							Math.max(0, getRecordingDurationMs()),
+							activeRecordingId,
+						);
+					},
+					{ once: true },
+				);
+			}
+		} catch (error) {
+			console.error("Failed to start recording:", error);
+			const errorMsg = error instanceof Error ? error.message : "Failed to start recording";
+			if (errorMsg.includes("Permission denied") || errorMsg.includes("NotAllowedError")) {
+				toast.error(t("recording.permissionDenied"));
+			} else {
+				toast.error(errorMsg);
+			}
+			setRecording(false);
+			setPaused(false);
+			setElapsedSeconds(0);
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = null;
+			screenRecorder.current = null;
+			webcamRecorder.current = null;
+			teardownMedia();
+		}
+	};
+
+	const togglePaused = () => {
+		const activeNativeWindowsRecording = nativeWindowsRecording.current;
+		if (activeNativeWindowsRecording && !activeNativeWindowsRecording.finalizing) {
+			void (async () => {
+				try {
+					if (activeNativeWindowsRecording.paused) {
+						const result = await window.electronAPI.resumeNativeWindowsRecording();
+						if (!result.success) {
+							throw new Error(result.error ?? "Failed to resume native Windows recording");
+						}
+						activeNativeWindowsRecording.paused = false;
+						segmentStartedAt.current = Date.now();
+						setPaused(false);
+						return;
+					}
+
+					const pausedAtMs = getRecordingDurationMs();
+					const result = await window.electronAPI.pauseNativeWindowsRecording();
+					if (!result.success) {
+						throw new Error(result.error ?? "Failed to pause native Windows recording");
+					}
+					activeNativeWindowsRecording.paused = true;
+					accumulatedDurationMs.current = pausedAtMs;
+					segmentStartedAt.current = null;
+					setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
+					setPaused(true);
+				} catch (error) {
+					console.error("Failed to toggle native Windows pause state:", error);
+					toast.error(error instanceof Error ? error.message : "Failed to toggle pause state");
+				}
+			})();
+			return;
+		}
+
+		const activeNativeMacRecording = nativeMacRecording.current;
+		if (activeNativeMacRecording && !activeNativeMacRecording.finalizing) {
+			void (async () => {
+				const activeWebcamRecorder = webcamRecorder.current?.recorder;
+				try {
+					if (activeNativeMacRecording.paused) {
+						const result = await window.electronAPI.resumeNativeMacRecording();
+						if (!result.success) {
+							throw new Error(result.error ?? "Failed to resume native macOS recording");
+						}
+						if (activeWebcamRecorder?.state === "paused") {
+							activeWebcamRecorder.resume();
+						}
+						activeNativeMacRecording.paused = false;
+						segmentStartedAt.current = Date.now();
+						setPaused(false);
+						return;
+					}
+
+					const pausedAtMs = getRecordingDurationMs();
+					const result = await window.electronAPI.pauseNativeMacRecording();
+					if (!result.success) {
+						throw new Error(result.error ?? "Failed to pause native macOS recording");
+					}
+					if (activeWebcamRecorder?.state === "recording") {
+						activeWebcamRecorder.pause();
+					}
+					activeNativeMacRecording.paused = true;
+					accumulatedDurationMs.current = pausedAtMs;
+					segmentStartedAt.current = null;
+					setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
+					setPaused(true);
+				} catch (error) {
+					console.error("Failed to toggle native macOS pause state:", error);
+					toast.error(error instanceof Error ? error.message : "Failed to toggle pause state");
+				}
+			})();
+			return;
+		}
+
+		const activeScreenRecorder = screenRecorder.current?.recorder;
+		if (!activeScreenRecorder || activeScreenRecorder.state === "inactive") {
+			return;
+		}
+
+		const activeWebcamRecorder = webcamRecorder.current?.recorder;
+
+		if (activeScreenRecorder.state === "paused") {
+			try {
+				activeScreenRecorder.resume();
+				if (activeWebcamRecorder?.state === "paused") {
+					activeWebcamRecorder.resume();
+				}
+				segmentStartedAt.current = Date.now();
+				setPaused(false);
+			} catch (error) {
+				console.error("Failed to resume recording:", error);
+			}
+			return;
+		}
+
+		if (activeScreenRecorder.state !== "recording") {
+			return;
+		}
+
+		try {
+			accumulatedDurationMs.current = getRecordingDurationMs();
+			segmentStartedAt.current = null;
+			setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
+			activeScreenRecorder.pause();
+			if (activeWebcamRecorder?.state === "recording") {
+				activeWebcamRecorder.pause();
+			}
+			setPaused(true);
+		} catch (error) {
+			console.error("Failed to pause recording:", error);
+		}
+	};
+
+	const toggleRecording = () => {
+		if (recording) {
+			stopRecording.current();
+			return;
+		}
+
+		if (countdownActive) {
+			cancelCountdown();
+			return;
+		}
+
+		void startRecordCountdown();
+	};
+
+	const restartRecording = async () => {
+		if (restarting.current) return;
+
+		if (nativeWindowsRecording.current) {
+			const activeRecordingId = recordingId.current;
+			restarting.current = true;
+			discardRecordingId.current = activeRecordingId;
+			try {
+				await finalizeNativeWindowsRecording(true);
+				await startRecording();
+			} finally {
+				restarting.current = false;
+			}
+			return;
+		}
+		if (nativeMacRecording.current) {
+			const activeRecordingId = recordingId.current;
+			restarting.current = true;
+			discardRecordingId.current = activeRecordingId;
+			try {
+				await finalizeNativeMacRecording(true);
+				await startRecording();
+			} finally {
+				restarting.current = false;
+			}
+			return;
+		}
+
+		const activeScreenRecorder = screenRecorder.current;
+		if (!activeScreenRecorder || activeScreenRecorder.recorder.state === "inactive") return;
+
+		const activeWebcamRecorder = webcamRecorder.current;
+		const activeRecordingId = recordingId.current;
+
+		restarting.current = true;
+		discardRecordingId.current = activeRecordingId;
+
+		const stopPromises = [
+			new Promise<void>((resolve) => {
+				activeScreenRecorder.recorder.addEventListener("stop", () => resolve(), { once: true });
+			}),
+		];
+
+		if (
+			activeWebcamRecorder?.recorder.state === "recording" ||
+			activeWebcamRecorder?.recorder.state === "paused"
+		) {
+			stopPromises.push(
+				new Promise<void>((resolve) => {
+					activeWebcamRecorder.recorder.addEventListener("stop", () => resolve(), {
+						once: true,
+					});
+				}),
+			);
+		}
+
+		stopRecording.current();
+		await Promise.all(stopPromises);
+
+		try {
+			await startRecording();
+		} finally {
+			restarting.current = false;
+		}
+	};
+
+	useEffect(() => {
+		if (!recording) {
+			setElapsedSeconds(0);
+			return;
+		}
+
+		setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+		if (paused) {
+			return;
+		}
+
+		const interval = window.setInterval(() => {
+			setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+		}, 250);
+
+		return () => window.clearInterval(interval);
+	}, [getRecordingDurationMs, paused, recording]);
+
+	const cancelRecording = () => {
+		if (nativeWindowsRecording.current) {
+			const activeRecordingId = recordingId.current;
+			discardRecordingId.current = activeRecordingId;
+			allowAutoFinalize.current = false;
+			void finalizeNativeWindowsRecording(true);
+			return;
+		}
+		if (nativeMacRecording.current) {
+			const activeRecordingId = recordingId.current;
+			discardRecordingId.current = activeRecordingId;
+			allowAutoFinalize.current = false;
+			void finalizeNativeMacRecording(true);
+			return;
+		}
+
+		const activeScreenRecorder = screenRecorder.current;
+		if (
+			activeScreenRecorder?.recorder.state === "recording" ||
+			activeScreenRecorder?.recorder.state === "paused"
+		) {
+			const activeRecordingId = recordingId.current;
+			discardRecordingId.current = activeRecordingId;
+			allowAutoFinalize.current = false;
+
+			stopRecording.current();
+			return;
+		}
+
+		if (countdownActive) {
+			cancelCountdown();
+			return;
+		}
+	};
+
+	return {
+		recording,
+		paused,
+		elapsedSeconds,
+		toggleRecording,
+		togglePaused,
+		canPauseRecording,
+		guideModeEnabled,
+		setGuideModeEnabled,
+		addGuideMarker,
+		restartRecording,
+		cancelRecording,
+		microphoneEnabled,
+		setMicrophoneEnabled,
+		microphoneDeviceId,
+		setMicrophoneDeviceId,
+		microphoneDeviceName,
+		setMicrophoneDeviceName,
+		webcamDeviceId,
+		setWebcamDeviceId,
+		webcamDeviceName,
+		setWebcamDeviceName,
+		systemAudioEnabled,
+		setSystemAudioEnabled,
+		webcamEnabled,
+		setWebcamEnabled,
+		cursorCaptureMode,
+		setCursorCaptureMode,
+	};
+}
diff --git a/src/i18n/__tests__/tutorialHelpTranslations.test.ts b/src/i18n/__tests__/tutorialHelpTranslations.test.ts
new file mode 100644
index 0000000..5d06b79
--- /dev/null
+++ b/src/i18n/__tests__/tutorialHelpTranslations.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
+import arDialogs from "@/i18n/locales/ar/dialogs.json";
+import enDialogs from "@/i18n/locales/en/dialogs.json";
+import esDialogs from "@/i18n/locales/es/dialogs.json";
+import frDialogs from "@/i18n/locales/fr/dialogs.json";
+import itDialogs from "@/i18n/locales/it/dialogs.json";
+import jaJPDialogs from "@/i18n/locales/ja-JP/dialogs.json";
+import koKRDialogs from "@/i18n/locales/ko-KR/dialogs.json";
+import ruDialogs from "@/i18n/locales/ru/dialogs.json";
+import trDialogs from "@/i18n/locales/tr/dialogs.json";
+import viDialogs from "@/i18n/locales/vi/dialogs.json";
+import zhCNDialogs from "@/i18n/locales/zh-CN/dialogs.json";
+import zhTWDialogs from "@/i18n/locales/zh-TW/dialogs.json";
+
+const tutorialHelpKeys = [
+	"triggerLabel",
+	"title",
+	"description",
+	"explanationBefore",
+	"remove",
+	"explanationMiddle",
+	"covered",
+	"explanationAfter",
+	"visualExample",
+	"removed",
+	"kept",
+	"part1",
+	"part2",
+	"part3",
+	"finalVideo",
+	"step1Title",
+	"step1DescriptionBefore",
+	"step1DescriptionAfter",
+	"step2Title",
+	"step2Description",
+] as const;
+
+const keysThatMayBeEmpty = new Set<(typeof tutorialHelpKeys)[number]>(["step1DescriptionBefore"]);
+
+const dialogsByLocale = {
+	en: enDialogs,
+	ar: arDialogs,
+	es: esDialogs,
+	fr: frDialogs,
+	it: itDialogs,
+	"ja-JP": jaJPDialogs,
+	"ko-KR": koKRDialogs,
+	ru: ruDialogs,
+	tr: trDialogs,
+	vi: viDialogs,
+	"zh-CN": zhCNDialogs,
+	"zh-TW": zhTWDialogs,
+} satisfies Record<Locale, { tutorial: Record<string, unknown> }>;
+
+describe("TutorialHelp translations", () => {
+	it("defines every tutorial help key for each supported locale", () => {
+		for (const locale of SUPPORTED_LOCALES) {
+			const tutorial = dialogsByLocale[locale].tutorial;
+
+			for (const key of tutorialHelpKeys) {
+				const message = tutorial[key];
+				const label = `${locale} dialogs.tutorial.${key}`;
+				expect(message, label).toEqual(expect.any(String));
+				if (!keysThatMayBeEmpty.has(key)) {
+					expect((message as string).trim().length, label).toBeGreaterThan(0);
+				}
+			}
+		}
+	});
+});
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
new file mode 100644
index 0000000..fb885eb
--- /dev/null
+++ b/src/i18n/config.ts
@@ -0,0 +1,29 @@
+export const DEFAULT_LOCALE = "en" as const;
+export const SUPPORTED_LOCALES = [
+	"en",
+	"ar",
+	"es",
+	"fr",
+	"it",
+	"ja-JP",
+	"ko-KR",
+	"ru",
+	"tr",
+	"vi",
+	"zh-CN",
+	"zh-TW",
+] as const;
+export const I18N_NAMESPACES = [
+	"common",
+	"dialogs",
+	"editor",
+	"launch",
+	"settings",
+	"shortcuts",
+	"timeline",
+] as const;
+
+export type Locale = string;
+export type I18nNamespace = (typeof I18N_NAMESPACES)[number];
+
+export const LOCALE_STORAGE_KEY = "openscreen-locale";
diff --git a/src/i18n/loader.ts b/src/i18n/loader.ts
new file mode 100644
index 0000000..36d8eb6
--- /dev/null
+++ b/src/i18n/loader.ts
@@ -0,0 +1,125 @@
+import { DEFAULT_LOCALE, I18N_NAMESPACES, type I18nNamespace, type Locale } from "./config";
+
+type MessageMap = Record<string, unknown>;
+type LocaleValidationError = {
+	locale: string;
+	missingNamespaces: I18nNamespace[];
+};
+
+const modules = import.meta.glob("./locales/**/*.json", { eager: true }) as Record<
+	string,
+	{ default: MessageMap }
+>;
+
+const messages: Record<string, Record<string, MessageMap>> = {};
+
+for (const [path, mod] of Object.entries(modules)) {
+	// path looks like "./locales/en/common.json"
+	const parts = path.replace("./locales/", "").replace(".json", "").split("/");
+	const locale = parts[0];
+	const namespace = parts[1];
+	if (!messages[locale]) messages[locale] = {};
+	messages[locale][namespace] = mod.default;
+}
+
+const REQUIRED_NAMESPACES = new Set<string>(I18N_NAMESPACES);
+
+const localeValidationErrors: LocaleValidationError[] = Object.keys(messages)
+	.map((locale) => {
+		const localeMessages = messages[locale] ?? {};
+		const missingNamespaces = I18N_NAMESPACES.filter((namespace) => !localeMessages[namespace]);
+		return {
+			locale,
+			missingNamespaces,
+		};
+	})
+	.filter((entry) => entry.missingNamespaces.length > 0);
+
+const invalidLocales = new Set(localeValidationErrors.map((entry) => entry.locale));
+
+const availableLocales = Object.keys(messages)
+	.filter((locale) => REQUIRED_NAMESPACES.size > 0 && hasRequiredNamespaces(messages[locale]))
+	.filter((locale) => !invalidLocales.has(locale))
+	.sort((a, b) => {
+		if (a === DEFAULT_LOCALE) return -1;
+		if (b === DEFAULT_LOCALE) return 1;
+		return a.localeCompare(b);
+	});
+
+if (localeValidationErrors.length > 0) {
+	console.error("[i18n] Incomplete locale folders were excluded:");
+	for (const entry of localeValidationErrors) {
+		console.error(
+			`[i18n] ${entry.locale}: missing ${entry.missingNamespaces.map((ns) => `${ns}.json`).join(", ")}`,
+		);
+	}
+}
+
+function hasRequiredNamespaces(localeMessages: Record<string, MessageMap> | undefined): boolean {
+	if (!localeMessages) return false;
+	for (const namespace of REQUIRED_NAMESPACES) {
+		if (!localeMessages[namespace]) return false;
+	}
+	return true;
+}
+
+function isAvailableLocale(locale: string): locale is Locale {
+	return availableLocales.includes(locale);
+}
+
+export function getAvailableLocales(): Locale[] {
+	if (availableLocales.length === 0) {
+		return [DEFAULT_LOCALE];
+	}
+	return availableLocales;
+}
+
+export function getLocaleValidationErrors(): LocaleValidationError[] {
+	return localeValidationErrors;
+}
+
+function getMessageValue(obj: unknown, dotPath: string): string | undefined {
+	const keys = dotPath.split(".");
+	let current: unknown = obj;
+	for (const key of keys) {
+		if (current == null || typeof current !== "object") return undefined;
+		current = (current as Record<string, unknown>)[key];
+	}
+	return typeof current === "string" ? current : undefined;
+}
+
+function interpolate(str: string, vars?: Record<string, string | number>): string {
+	if (!vars) return str;
+	return str.replace(/\{\{(\w+)\}\}/g, (_, key: string) => String(vars[key] ?? `{{${key}}}`));
+}
+
+export function getMessages(locale: Locale, namespace: I18nNamespace): MessageMap {
+	const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+	return messages[resolvedLocale]?.[namespace] ?? {};
+}
+
+export function getLocaleName(locale: Locale): string {
+	const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+	return getMessageValue(messages[resolvedLocale]?.common, "locale.name") ?? locale;
+}
+
+export function getLocaleShort(locale: Locale): string {
+	const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+	return getMessageValue(messages[resolvedLocale]?.common, "locale.short") ?? locale;
+}
+
+export function translate(
+	locale: Locale,
+	namespace: I18nNamespace,
+	key: string,
+	vars?: Record<string, string | number>,
+): string {
+	const value =
+		getMessageValue(
+			messages[isAvailableLocale(locale) ? locale : DEFAULT_LOCALE]?.[namespace],
+			key,
+		) ?? getMessageValue(messages[DEFAULT_LOCALE]?.[namespace], key);
+
+	if (value == null) return `${namespace}.${key}`;
+	return interpolate(value, vars);
+}
diff --git a/src/i18n/locales/ar/common.json b/src/i18n/locales/ar/common.json
new file mode 100644
index 0000000..3591a29
--- /dev/null
+++ b/src/i18n/locales/ar/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "الغاء",
+		"save": "حفظ",
+		"delete": "حذف",
+		"close": "اغلاق",
+		"share": "مشاركة",
+		"done": "تم",
+		"open": "فتح",
+		"upload": "رفع",
+		"export": "تصدير",
+		"showInFolder": "عرض في المجلد",
+		"file": "ملف",
+		"edit": "تعديل",
+		"view": "عرض",
+		"window": "نافذة",
+		"quit": "خروج",
+		"stopRecording": "إيقاف التسجيل",
+		"undo": "تراجع",
+		"redo": "إعادة",
+		"cut": "قص",
+		"copy": "نسخ",
+		"paste": "لصق",
+		"selectAll": "تحديد الكل",
+		"minimize": "تصغير",
+		"reload": "إعادة تحميل",
+		"forceReload": "إعادة تحميل إجبارية",
+		"toggleDevTools": "أدوات المطور",
+		"actualSize": "الحجم الفعلي",
+		"zoomIn": "تكبير",
+		"zoomOut": "تصغير",
+		"toggleFullScreen": "ملء الشاشة",
+		"recordingStatus": "جاري التسجيل: {{source}}",
+		"about": "حول OpenScreen",
+		"services": "خدمات",
+		"hide": "إخفاء OpenScreen",
+		"hideOthers": "إخفاء الآخرين",
+		"unhide": "إظهار الكل"
+	},
+	"playback": {
+		"play": "تشغيل",
+		"pause": "ايقاف مؤقت",
+		"fullscreen": "ملء الشاشة",
+		"exitFullscreen": "خروج من ملء الشاشة"
+	},
+	"locale": {
+		"name": "عربي",
+		"short": "AR"
+	}
+}
diff --git a/src/i18n/locales/ar/dialogs.json b/src/i18n/locales/ar/dialogs.json
new file mode 100644
index 0000000..2263f60
--- /dev/null
+++ b/src/i18n/locales/ar/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "اكتمل التصدير",
+		"yourFormatReady": "{{format}} الخاص بك جاهز",
+		"showInFolder": "عرض في المجلد",
+		"finalizingVideo": "جاري إنهاء تصدير الفيديو...",
+		"compilingGifProgress": "جاري تجميع GIF... {{progress}}%",
+		"compilingGifWait": "جاري تجميع GIF... قد يستغرق هذا بعض الوقت",
+		"takeMoment": "قد يستغرق هذا لحظة...",
+		"failed": "فشل التصدير",
+		"tryAgain": "يرجى المحاولة مرة أخرى",
+		"finalizingVideoTitle": "إنهاء الفيديو",
+		"compilingGif": "تجميع GIF",
+		"exportingFormat": "تصدير {{format}}",
+		"compiling": "تجميع",
+		"renderingFrames": "تصيير الإطارات",
+		"processing": "جاري المعالجة...",
+		"finalizing": "جاري الإنهاء...",
+		"compilingStatus": "جاري التجميع...",
+		"status": "الحالة",
+		"format": "الصيغة",
+		"frames": "الإطارات",
+		"cancelExport": "إلغاء التصدير",
+		"savedSuccessfully": "تم حفظ {{format}} بنجاح!"
+	},
+	"tutorial": {
+		"triggerLabel": "كيف يعمل القص",
+		"title": "كيف يعمل القص",
+		"description": "فهم كيفية قص الأجزاء غير المرغوب فيها من الفيديو الخاص بك.",
+		"explanationBefore": "تعمل أداة القص من خلال تحديد المقاطع التي تريد",
+		"remove": "إزالتها",
+		"explanationMiddle": " — أي شيء",
+		"covered": "مغطى",
+		"explanationAfter": "بمقطع قص أحمر سيتم قصه عند التصدير.",
+		"visualExample": "مثال مرئي",
+		"removed": "مُزال",
+		"kept": "مُحتفظ به",
+		"part1": "الجزء 1",
+		"part2": "الجزء 2",
+		"part3": "الجزء 3",
+		"finalVideo": "الفيديو النهائي",
+		"step1Title": "1. إضافة قص",
+		"step1DescriptionBefore": "اضغط على ",
+		"step1DescriptionAfter": " أو انقر على أيقونة المقص لتحديد قسم لإزالته.",
+		"step2Title": "2. تعديل",
+		"step2Description": "اسحب حواف المنطقة الحمراء لتغطي بالضبط ما تريد قصه."
+	},
+	"unsavedChanges": {
+		"title": "تغييرات غير محفوظة",
+		"message": "لديك تغييرات غير محفوظة.",
+		"detail": "هل تريد حفظ مشروعك قبل الإغلاق؟",
+		"saveAndClose": "حفظ وإغلاق",
+		"discardAndClose": "تجاهل وإغلاق",
+		"loadProject": "تحميل مشروع...",
+		"saveProject": "حفظ المشروع...",
+		"saveProjectAs": "حفظ المشروع باسم..."
+	},
+	"fileDialogs": {
+		"saveGif": "حفظ GIF المصدر",
+		"saveVideo": "حفظ الفيديو المصدر",
+		"selectVideo": "حدد ملف فيديو",
+		"saveProject": "حفظ مشروع OpenScreen",
+		"openProject": "فتح مشروع OpenScreen",
+		"gifImage": "صورة GIF",
+		"mp4Video": "فيديو MP4",
+		"videoFiles": "ملفات فيديو",
+		"openscreenProject": "مشروع OpenScreen",
+		"allFiles": "جميع الملفات"
+	}
+}
diff --git a/src/i18n/locales/ar/editor.json b/src/i18n/locales/ar/editor.json
new file mode 100644
index 0000000..1eec625
--- /dev/null
+++ b/src/i18n/locales/ar/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "العودة إلى المسجل",
+		"description": "تم حفظ جلستك الحالية.",
+		"cancel": "إلغاء",
+		"confirm": "تأكيد"
+	},
+	"loadingVideo": "جاري تحميل الفيديو...",
+	"errors": {
+		"noVideoLoaded": "لم يتم تحميل أي فيديو",
+		"videoNotReady": "الفيديو غير جاهز",
+		"unableToDetermineSourcePath": "تعذر تحديد مسار الفيديو المصدر",
+		"failedToSaveGif": "فشل حفظ GIF",
+		"gifExportFailed": "فشل تصدير GIF",
+		"failedToSaveVideo": "فشل حفظ الفيديو",
+		"exportFailed": "فشل التصدير",
+		"exportFailedWithError": "فشل التصدير: {{error}}",
+		"exportBackgroundLoadFailed": "فشل التصدير: تعذر تحميل صورة الخلفية ({{url}})",
+		"failedToSaveExport": "فشل حفظ التصدير",
+		"failedToSaveExportedVideo": "فشل حفظ الفيديو المُصدَّر",
+		"failedToRevealInFolder": "خطأ في الكشف في المجلد: {{error}}"
+	},
+	"export": {
+		"canceled": "تم إلغاء التصدير",
+		"exportedSuccessfully": "تم تصدير {{format}} بنجاح"
+	},
+	"project": {
+		"saveCanceled": "تم إلغاء حفظ المشروع",
+		"failedToSave": "فشل حفظ المشروع",
+		"savedTo": "تم حفظ المشروع في {{path}}",
+		"failedToLoad": "فشل تحميل المشروع",
+		"invalidFormat": "تنسيق ملف المشروع غير صالح",
+		"loadedFrom": "تم تحميل المشروع من {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "فشل طلب الوصول إلى الكاميرا.",
+		"cameraBlocked": "الوصول إلى الكاميرا محظور. قم بتمكينه في إعدادات النظام لاستخدام كاميرا الويب.",
+		"systemAudioUnavailable": "صوت النظام غير متوفر. يتم التسجيل بدون صوت النظام.",
+		"microphoneDenied": "تم رفض الوصول إلى الميكروفون. سيستمر التسجيل بدون صوت.",
+		"cameraDenied": "تم رفض الوصول إلى الكاميرا. سيستمر التسجيل بدون كاميرا الويب.",
+		"cameraDisconnected": "تم فصل كاميرا الويب.",
+		"cameraNotFound": "لم يتم العثور على كاميرا.",
+		"permissionDenied": "تم رفض إذن التسجيل. يرجى السماح بتسجيل الشاشة.",
+		"accessibilityAllowAndRetry": "اسمح بوصول تسهيلات الاستخدام لـ OpenScreen، ثم اضغط على التسجيل مرة أخرى لبدء العد التنازلي."
+	}
+}
diff --git a/src/i18n/locales/ar/launch.json b/src/i18n/locales/ar/launch.json
new file mode 100644
index 0000000..5a8831a
--- /dev/null
+++ b/src/i18n/locales/ar/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "إخفاء واجهة العرض",
+		"closeApp": "إغلاق التطبيق",
+		"restartRecording": "إعادة تشغيل التسجيل",
+		"cancelRecording": "إلغاء التسجيل",
+		"pauseRecording": "إيقاف التسجيل مؤقتاً",
+		"resumeRecording": "استئناف التسجيل",
+		"openVideoFile": "فتح ملف فيديو",
+		"openProject": "فتح مشروع"
+	},
+	"audio": {
+		"enableSystemAudio": "تفعيل صوت النظام",
+		"disableSystemAudio": "تعطيل صوت النظام",
+		"enableMicrophone": "تفعيل الميكروفون",
+		"disableMicrophone": "تعطيل الميكروفون",
+		"defaultMicrophone": "الميكروفون الافتراضي"
+	},
+	"webcam": {
+		"enableWebcam": "تفعيل كاميرا الويب",
+		"disableWebcam": "تعطيل كاميرا الويب",
+		"defaultCamera": "الكاميرا الافتراضية",
+		"searching": "جاري البحث...",
+		"noneFound": "لم يتم العثور على كاميرا",
+		"unavailable": "الكاميرا غير متوفرة"
+	},
+	"sourceSelector": {
+		"loading": "جاري تحميل المصادر...",
+		"screens": "الشاشات ({{count}})",
+		"windows": "النوافذ ({{count}})",
+		"defaultSourceName": "الشاشة"
+	},
+	"recording": {
+		"selectSource": "يرجى تحديد مصدر للتسجيل"
+	},
+	"language": "اللغة",
+	"systemLanguagePrompt": {
+		"title": "هل تريد استخدام لغة نظامك؟",
+		"description": "اكتشفنا أن {{language}} هي لغة نظامك. هل تريد تبديل OpenScreen إلى {{language}}؟",
+		"switch": "التبديل إلى {{language}}",
+		"keepDefault": "الاحتفاظ باللغة الحالية"
+	},
+	"cursor": {
+		"useEditableCursor": "استخدام مؤشر قابل للتحرير",
+		"useSystemCursor": "استخدام مؤشر النظام"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	}
+}
diff --git a/src/i18n/locales/ar/settings.json b/src/i18n/locales/ar/settings.json
new file mode 100644
index 0000000..6cd90b6
--- /dev/null
+++ b/src/i18n/locales/ar/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "اضغط مع الاستمرار لمعاينة تأثير التكبير",
+		"level": "مستوى التكبير",
+		"selectRegion": "حدد منطقة التكبير للتعديل",
+		"deleteZoom": "حذف التكبير",
+		"focusMode": {
+			"title": "وضع التركيز",
+			"manual": "يدوي",
+			"auto": "تلقائي",
+			"autoDescription": "الكاميرا تتبع موضع المؤشر المسجل"
+		},
+		"customScale": "تكبير مخصص",
+		"position": {
+			"title": "موضع التركيز",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = أقصى اليسار / الأعلى، 100 = أقصى اليمين / الأسفل"
+		},
+		"threeD": {
+			"title": "دوران ثلاثي الأبعاد",
+			"preset": {
+				"iso": "متساوي القياس",
+				"left": "يسار",
+				"right": "يمين"
+			}
+		}
+	},
+	"speed": {
+		"playbackSpeed": "سرعة التشغيل",
+		"selectRegion": "حدد منطقة السرعة للتعديل",
+		"deleteRegion": "حذف منطقة السرعة",
+		"customPlaybackSpeed": "سرعة تشغيل مخصصة",
+		"maxSpeedError": "لا يمكن للسرعة أن تتجاوز 16×"
+	},
+	"trim": {
+		"deleteRegion": "حذف منطقة القص"
+	},
+	"layout": {
+		"title": "التخطيط",
+		"preset": "الإعداد المسبق",
+		"selectPreset": "حدد إعدادًا مسبقًا",
+		"pictureInPicture": "صورة داخل صورة",
+		"verticalStack": "تكدس عمودي",
+		"dualFrame": "إطار مزدوج",
+		"webcamShape": "شكل الكاميرا",
+		"webcamSize": "حجم كاميرا الويب",
+		"noWebcam": "بدون كاميرا"
+	},
+	"effects": {
+		"title": "تأثيرات الفيديو",
+		"blurBg": "تمويه الخلفية",
+		"motionBlur": "ضبابية الحركة",
+		"off": "إيقاف",
+		"on": "تشغيل",
+		"shadow": "ظل",
+		"roundness": "الاستدارة",
+		"padding": "المسافة البادئة"
+	},
+	"background": {
+		"title": "الخلفية",
+		"image": "صورة",
+		"color": "لون",
+		"gradient": "تدرج لوني",
+		"uploadCustom": "رفع صورة مخصصة",
+		"gradientLabel": "تدرج لوني {{index}}",
+		"colorWheel": "عجلة الألوان",
+		"colorPalette": "لوحة الألوان"
+	},
+	"crop": {
+		"title": "اقتصاص",
+		"cropVideo": "اقتصاص الفيديو",
+		"dragInstruction": "اسحب من كل جانب لضبط منطقة الاقتصاص",
+		"ratio": "النسبة",
+		"free": "حر",
+		"done": "تم",
+		"lockAspectRatio": "قفل نسبة العرض إلى الارتفاع",
+		"unlockAspectRatio": "إلغاء قفل نسبة العرض إلى الارتفاع"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "فيديو MP4",
+		"mp4Description": "ملف فيديو عالي الجودة",
+		"gifAnimation": "صورة GIF متحركة",
+		"gifDescription": "صورة متحركة للمشاركة"
+	},
+	"exportQuality": {
+		"title": "دقة التصدير",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "معدل إطارات GIF",
+		"size": "حجم GIF",
+		"loop": "تكرار GIF"
+	},
+	"project": {
+		"save": "حفظ المشروع",
+		"load": "تحميل المشروع"
+	},
+	"export": {
+		"videoButton": "تصدير الفيديو",
+		"gifButton": "تصدير GIF",
+		"chooseSaveLocation": "اختيار موقع الحفظ"
+	},
+	"support": {
+		"reportBug": "الإبلاغ عن خطأ",
+		"saveDiagnostics": "حفظ التشخيصات",
+		"starOnGithub": "إعطاء نجمة على GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "نوع ملف غير صالح",
+		"jpgOnly": "يرجى رفع ملف صورة JPG أو JPEG.",
+		"uploadSuccess": "تم رفع الصورة المخصصة بنجاح!",
+		"failedToUpload": "فشل رفع الصورة",
+		"errorReading": "حدث خطأ أثناء قراءة الملف."
+	},
+	"annotation": {
+		"title": "إعدادات الشروح",
+		"active": "نشط",
+		"typeText": "نص",
+		"typeImage": "صورة",
+		"typeArrow": "سهم",
+		"typeBlur": "تمويه",
+		"textContent": "محتوى النص",
+		"textPlaceholder": "أدخل النص هنا...",
+		"fontStyle": "نمط الخط",
+		"selectStyle": "حدد النمط",
+		"size": "الحجم",
+		"customFonts": "خطوط مخصصة",
+		"textColor": "لون النص",
+		"background": "الخلفية",
+		"none": "بدون",
+		"color": "لون",
+		"colorWheel": "عجلة الألوان",
+		"colorPalette": "لوحة الألوان",
+		"clearBackground": "مسح الخلفية",
+		"uploadImage": "رفع صورة",
+		"supportedFormats": "الصيغ المدعومة: JPG, PNG, GIF, WebP",
+		"arrowDirection": "اتجاه السهم",
+		"strokeWidth": "عرض الخط: {{width}}px",
+		"arrowColor": "لون السهم",
+		"blurType": "نوع التمويه",
+		"blurTypeBlur": "تمويه",
+		"blurTypeMosaic": "فسيفساء",
+		"blurColor": "لون التمويه",
+		"blurColorWhite": "أبيض",
+		"blurColorBlack": "أسود",
+		"blurShape": "شكل التمويه",
+		"blurIntensity": "كثافة التمويه",
+		"mosaicBlockSize": "حجم كتلة الفسيفساء",
+		"blurShapeRectangle": "مستطيل",
+		"blurShapeOval": "بيضاوي",
+		"blurShapeFreehand": "رسم حر",
+		"deleteAnnotation": "حذف الشرح",
+		"shortcutsAndTips": "اختصارات ونصائح",
+		"tipMovePlayhead": "انقل رأس التشغيل إلى قسم الشروح المتداخلة وحدد عنصرًا.",
+		"tipTabCycle": "استخدم Tab للتنقل بين العناصر المتداخلة.",
+		"tipShiftTabCycle": "استخدم Shift+Tab للتنقل للخلف.",
+		"invalidImageType": "نوع ملف غير صالح",
+		"imageFormatsOnly": "يرجى رفع ملف صورة JPG أو PNG أو GIF أو WebP.",
+		"imageUploadSuccess": "تم رفع الصورة بنجاح!",
+		"failedImageUpload": "فشل في رفع الصورة"
+	},
+	"fontStyles": {
+		"classic": "كلاسيكي",
+		"editor": "محرر",
+		"strong": "قوي",
+		"typewriter": "آلة كاتبة",
+		"deco": "ديكو",
+		"simple": "بسيط",
+		"modern": "حديث",
+		"clean": "نظيف"
+	},
+	"customFont": {
+		"dialogTitle": "إضافة خط Google",
+		"urlLabel": "رابط استيراد خطوط Google",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "احصل على هذا من خطوط Google: حدد خطًا → انقر على \"احصل على الخط\" → انسخ رابط `@import`",
+		"nameLabel": "اسم العرض",
+		"namePlaceholder": "خطي المخصص",
+		"nameHelp": "هكذا سيظهر الخط في محدد الخطوط",
+		"addButton": "إضافة خط",
+		"addingButton": "جاري الإضافة...",
+		"errorEmptyUrl": "يرجى إدخال رابط استيراد لخطوط Google",
+		"errorInvalidUrl": "يرجى إدخال رابط صحيح لخطوط Google",
+		"errorEmptyName": "يرجى إدخال اسم الخط",
+		"errorExtractFailed": "تعذر استخراج عائلة الخط من الرابط",
+		"successMessage": "تم إضافة الخط \"{{fontName}}\" بنجاح",
+		"failedToAdd": "فشل في إضافة الخط",
+		"errorTimeout": "استغرق تحميل الخط وقتًا طويلاً. يرجى التحقق من الرابط والمحاولة مرة أخرى.",
+		"errorLoadFailed": "تعذر تحميل الخط. يرجى التحقق من صحة رابط خطوط Google."
+	},
+	"cursor": {
+		"show": "إظهار المؤشر",
+		"size": "الحجم",
+		"smoothing": "التنعيم",
+		"motionBlur": "ضبابية الحركة",
+		"clickBounce": "ارتداد النقر",
+		"clipToBounds": "القص ضمن اللوحة"
+	},
+	"language": {
+		"title": "اللغة"
+	}
+}
diff --git a/src/i18n/locales/ar/shortcuts.json b/src/i18n/locales/ar/shortcuts.json
new file mode 100644
index 0000000..a560c06
--- /dev/null
+++ b/src/i18n/locales/ar/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "اختصارات لوحة المفاتيح",
+	"customize": "تخصيص",
+	"configurable": "قابل للتكوين",
+	"fixed": "ثابت",
+	"pressKey": "اضغط على مفتاح...",
+	"clickToChange": "انقر للتغيير",
+	"pressEscToCancel": "اضغط على Esc للإلغاء",
+	"helpText": "انقر على اختصار ثم اضغط على مجموعة المفاتيح الجديدة. اضغط على Esc للإلغاء.",
+	"resetToDefaults": "إعادة تعيين إلى الافتراضيات",
+	"alreadyUsedBy": "مستخدم بالفعل بواسطة {{action}}",
+	"swap": "تبديل",
+	"reservedShortcut": "هذا الاختصار محجوز لـ \"{{label}}\" ولا يمكن إعادة تعيينه.",
+	"savedToast": "تم حفظ اختصارات لوحة المفاتيح",
+	"resetToast": "إعادة تعيين إلى الاختصارات الافتراضية — انقر فوق حفظ للتطبيق",
+	"actions": {
+		"addZoom": "إضافة تكبير",
+		"addTrim": "إضافة قص",
+		"addSpeed": "إضافة سرعة",
+		"addAnnotation": "إضافة شرح",
+		"addBlur": "إضافة تمويه",
+		"addKeyframe": "إضافة إطار رئيسي",
+		"deleteSelected": "حذف المحدد",
+		"playPause": "تشغيل / إيقاف مؤقت"
+	},
+	"fixedActions": {
+		"undo": "تراجع",
+		"redo": "إعادة",
+		"cycleAnnotationsForward": "التنقل بين الشروح للأمام",
+		"cycleAnnotationsBackward": "التنقل بين الشروح للخلف",
+		"deleteSelectedAlt": "حذف المحدد (alt)",
+		"panTimeline": "تحريك المخطط الزمني",
+		"zoomTimeline": "تكبير المخطط الزمني",
+		"frameBack": "إطار للخلف",
+		"frameForward": "إطار للأمام"
+	}
+}
diff --git a/src/i18n/locales/ar/timeline.json b/src/i18n/locales/ar/timeline.json
new file mode 100644
index 0000000..09d55c4
--- /dev/null
+++ b/src/i18n/locales/ar/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "إضافة تكبير (Z)",
+		"suggestZooms": "اقتراح تكبير من المؤشر",
+		"addTrim": "إضافة قص (T)",
+		"addAnnotation": "إضافة شرح (A)",
+		"addBlur": "إضافة تمويه (B)",
+		"addSpeed": "إضافة سرعة (S)"
+	},
+	"hints": {
+		"pressZoom": "اضغط Z لإضافة تكبير",
+		"pressTrim": "اضغط T لإضافة قص",
+		"pressAnnotation": "اضغط A لإضافة شرح",
+		"pressBlur": "اضغط B لإضافة منطقة تمويه",
+		"pressSpeed": "اضغط S لإضافة سرعة"
+	},
+	"labels": {
+		"pan": "تحريك",
+		"zoom": "تكبير",
+		"trim": "قص",
+		"speed": "سرعة",
+		"zoomItem": "تكبير {{index}}",
+		"trimItem": "قص {{index}}",
+		"speedItem": "سرعة {{index}}",
+		"annotationItem": "شرح",
+		"blurItem": "تمويه {{index}}",
+		"imageItem": "صورة",
+		"emptyText": "نص فارغ"
+	},
+	"emptyState": {
+		"noVideo": "لم يتم تحميل أي فيديو",
+		"dragAndDrop": "اسحب وأفلت مقطع فيديو لبدء التعديل"
+	},
+	"errors": {
+		"cannotPlaceZoom": "لا يمكن وضع التكبير هنا",
+		"zoomExistsAtLocation": "يوجد تكبير بالفعل في هذا الموقع أو لا توجد مساحة كافية متاحة.",
+		"zoomSuggestionUnavailable": "معالج اقتراح التكبير غير متوفر",
+		"noCursorTelemetry": "لا تتوفر بيانات قياس المؤشر",
+		"noCursorTelemetryDescription": "قم بتسجيل الشاشة أولاً لإنشاء اقتراحات بناءً على المؤشر.",
+		"noUsableTelemetry": "لا توجد بيانات قياس مؤشر قابلة للاستخدام",
+		"noUsableTelemetryDescription": "التسجيل لا يتضمن بيانات حركة مؤشر كافية.",
+		"noDwellMoments": "لم يتم العثور على لحظات توقف واضحة للمؤشر",
+		"noDwellMomentsDescription": "جرب تسجيلاً مع توقفات مؤشر أبطأ عند الإجراءات المهمة.",
+		"noAutoZoomSlots": "لا تتوفر خانات تكبير تلقائي",
+		"noAutoZoomSlotsDescription": "نقاط التوقف المكتشفة تتداخل مع مناطق التكبير الحالية.",
+		"cannotPlaceTrim": "لا يمكن وضع القص هنا",
+		"trimExistsAtLocation": "يوجد قص بالفعل في هذا الموقع أو لا توجد مساحة كافية متاحة.",
+		"cannotPlaceSpeed": "لا يمكن وضع السرعة هنا",
+		"speedExistsAtLocation": "توجد منطقة سرعة بالفعل في هذا الموقع أو لا توجد مساحة كافية متاحة."
+	},
+	"success": {
+		"addedZoomSuggestions": "تمت إضافة {{count}} اقتراح تكبير بناءً على المؤشر",
+		"addedZoomSuggestionsPlural": "تمت إضافة {{count}} اقتراحات تكبير بناءً على المؤشر"
+	}
+}
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
new file mode 100644
index 0000000..f60a402
--- /dev/null
+++ b/src/i18n/locales/en/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "Cancel",
+		"save": "Save",
+		"delete": "Delete",
+		"close": "Close",
+		"share": "Share",
+		"done": "Done",
+		"open": "Open",
+		"upload": "Upload",
+		"export": "Export",
+		"showInFolder": "Show in Folder",
+		"file": "File",
+		"edit": "Edit",
+		"view": "View",
+		"window": "Window",
+		"quit": "Quit",
+		"stopRecording": "Stop Recording",
+		"undo": "Undo",
+		"redo": "Redo",
+		"cut": "Cut",
+		"copy": "Copy",
+		"paste": "Paste",
+		"selectAll": "Select All",
+		"minimize": "Minimize",
+		"reload": "Reload",
+		"forceReload": "Force Reload",
+		"toggleDevTools": "Toggle Developer Tools",
+		"actualSize": "Actual Size",
+		"zoomIn": "Zoom In",
+		"zoomOut": "Zoom Out",
+		"toggleFullScreen": "Toggle Full Screen",
+		"recordingStatus": "Recording: {{source}}",
+		"about": "About OpenScreen",
+		"services": "Services",
+		"hide": "Hide OpenScreen",
+		"hideOthers": "Hide Others",
+		"unhide": "Show All"
+	},
+	"playback": {
+		"play": "Play",
+		"pause": "Pause",
+		"fullscreen": "Fullscreen",
+		"exitFullscreen": "Exit Fullscreen"
+	},
+	"locale": {
+		"name": "English",
+		"short": "EN"
+	}
+}
diff --git a/src/i18n/locales/en/dialogs.json b/src/i18n/locales/en/dialogs.json
new file mode 100644
index 0000000..a84b5fd
--- /dev/null
+++ b/src/i18n/locales/en/dialogs.json
@@ -0,0 +1,71 @@
+{
+	"export": {
+		"complete": "Export Complete",
+		"yourFormatReady": "Your {{format}} is ready",
+		"showInFolder": "Show in Folder",
+		"finalizingVideo": "Finalizing video export...",
+		"compilingGifProgress": "Compiling GIF... {{progress}}%",
+		"compilingGifWait": "Compiling GIF... This may take a while",
+		"takeMoment": "This may take a moment...",
+		"failed": "Export Failed",
+		"tryAgain": "Please try again",
+		"finalizingVideoTitle": "Finalizing Video",
+		"compilingGif": "Compiling GIF",
+		"exportingFormat": "Exporting {{format}}",
+		"compiling": "Compiling",
+		"renderingFrames": "Rendering Frames",
+		"processing": "Processing...",
+		"finalizing": "Finalizing...",
+		"compilingStatus": "Compiling...",
+		"status": "Status",
+		"format": "Format",
+		"frames": "Frames",
+		"cancelExport": "Cancel Export",
+		"savedSuccessfully": "{{format}} saved successfully!"
+	},
+	"tutorial": {
+		"triggerLabel": "How trimming works",
+		"title": "How Trimming Works",
+		"description": "Understanding how to cut out unwanted parts of your video.",
+		"explanationBefore": "The Trim tool works by defining the segments you want to",
+		"remove": "remove",
+		"explanationMiddle": " — anything",
+		"covered": "covered",
+		"explanationAfter": "by a red trim segment will be cut out when you export.",
+		"visualExample": "Visual Example",
+		"removed": "REMOVED",
+		"kept": "Kept",
+		"part1": "Part 1",
+		"part2": "Part 2",
+		"part3": "Part 3",
+		"finalVideo": "Final Video",
+		"step1Title": "1. Add Trim",
+		"step1DescriptionBefore": "Press ",
+		"step1DescriptionAfter": " or click the scissors icon to mark a section for removal.",
+
+		"step2Title": "2. Adjust",
+		"step2Description": "Drag the edges of the red region to cover exactly what you want to cut out."
+	},
+	"unsavedChanges": {
+		"title": "Unsaved Changes",
+		"message": "You have unsaved changes.",
+		"detail": "Do you want to save your project before closing?",
+		"saveAndClose": "Save & Close",
+		"discardAndClose": "Discard & Close",
+		"loadProject": "Load Project…",
+		"saveProject": "Save Project…",
+		"saveProjectAs": "Save Project As…"
+	},
+	"fileDialogs": {
+		"saveGif": "Save Exported GIF",
+		"saveVideo": "Save Exported Video",
+		"selectVideo": "Select Video File",
+		"saveProject": "Save OpenScreen Project",
+		"openProject": "Open OpenScreen Project",
+		"gifImage": "GIF Image",
+		"mp4Video": "MP4 Video",
+		"videoFiles": "Video Files",
+		"openscreenProject": "OpenScreen Project",
+		"allFiles": "All Files"
+	}
+}
diff --git a/src/i18n/locales/en/editor.json b/src/i18n/locales/en/editor.json
new file mode 100644
index 0000000..aad3700
--- /dev/null
+++ b/src/i18n/locales/en/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "Return to Recorder",
+		"description": "Your current session has been saved.",
+		"cancel": "Cancel",
+		"confirm": "Confirm"
+	},
+	"loadingVideo": "Loading video...",
+	"errors": {
+		"noVideoLoaded": "No video loaded",
+		"videoNotReady": "Video not ready",
+		"unableToDetermineSourcePath": "Unable to determine source video path",
+		"failedToSaveGif": "Failed to save GIF",
+		"gifExportFailed": "GIF export failed",
+		"failedToSaveVideo": "Failed to save video",
+		"exportFailed": "Export failed",
+		"exportFailedWithError": "Export failed: {{error}}",
+		"exportBackgroundLoadFailed": "Export failed: could not load background image ({{url}})",
+		"failedToSaveExport": "Failed to save export",
+		"failedToSaveExportedVideo": "Failed to save exported video",
+		"failedToRevealInFolder": "Error revealing in folder: {{error}}"
+	},
+	"export": {
+		"canceled": "Export canceled",
+		"exportedSuccessfully": "{{format}} exported successfully"
+	},
+	"project": {
+		"saveCanceled": "Project save canceled",
+		"failedToSave": "Failed to save project",
+		"savedTo": "Project saved to {{path}}",
+		"failedToLoad": "Failed to load project",
+		"invalidFormat": "Invalid project file format",
+		"loadedFrom": "Project loaded from {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Failed to request camera access.",
+		"cameraBlocked": "Camera access is blocked. Enable it in system settings to use the webcam.",
+		"systemAudioUnavailable": "System audio not available. Recording without system audio.",
+		"microphoneDenied": "Microphone access denied. Recording will continue without audio.",
+		"cameraDenied": "Camera access denied. Recording will continue without webcam.",
+		"cameraDisconnected": "Webcam disconnected.",
+		"cameraNotFound": "Camera not found.",
+		"permissionDenied": "Recording permission denied. Please allow screen recording.",
+		"accessibilityAllowAndRetry": "Allow Accessibility access for OpenScreen, then press record again to start the countdown."
+	}
+}
diff --git a/src/i18n/locales/en/launch.json b/src/i18n/locales/en/launch.json
new file mode 100644
index 0000000..70f574e
--- /dev/null
+++ b/src/i18n/locales/en/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Hide HUD",
+		"closeApp": "Close App",
+		"restartRecording": "Restart recording",
+		"cancelRecording": "Cancel recording",
+		"pauseRecording": "Pause recording",
+		"resumeRecording": "Resume recording",
+		"openVideoFile": "Open video file",
+		"openProject": "Open project"
+	},
+	"audio": {
+		"enableSystemAudio": "Enable system audio",
+		"disableSystemAudio": "Disable system audio",
+		"enableMicrophone": "Enable microphone",
+		"disableMicrophone": "Disable microphone",
+		"defaultMicrophone": "Default Microphone"
+	},
+	"webcam": {
+		"enableWebcam": "Enable webcam",
+		"disableWebcam": "Disable webcam",
+		"defaultCamera": "Default Camera",
+		"searching": "Searching...",
+		"noneFound": "No camera found",
+		"unavailable": "Camera unavailable"
+	},
+	"cursor": {
+		"useEditableCursor": "Use editable cursor",
+		"useSystemCursor": "Use system cursor"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Capture guide marker (Ctrl or Ctrl+F12)"
+	},
+	"sourceSelector": {
+		"loading": "Loading sources...",
+		"screens": "Screens ({{count}})",
+		"windows": "Windows ({{count}})",
+		"defaultSourceName": "Screen"
+	},
+	"recording": {
+		"selectSource": "Please select a source to record"
+	},
+	"language": "Language",
+	"systemLanguagePrompt": {
+		"title": "Use your system language?",
+		"description": "We detected {{language}} as your system language. Do you want to switch OpenScreen to {{language}}?",
+		"switch": "Switch to {{language}}",
+		"keepDefault": "Keep current language"
+	}
+}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
new file mode 100644
index 0000000..3e2541a
--- /dev/null
+++ b/src/i18n/locales/en/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "Hold to preview zoom effect",
+		"level": "Zoom Level",
+		"customScale": "Custom Zoom",
+		"selectRegion": "Select a zoom region to adjust",
+		"deleteZoom": "Delete Zoom",
+		"focusMode": {
+			"title": "Focus Mode",
+			"manual": "Manual",
+			"auto": "Auto",
+			"autoDescription": "Camera follows the recorded cursor position"
+		},
+		"threeD": {
+			"title": "3D Rotation",
+			"preset": {
+				"iso": "Iso",
+				"left": "Left",
+				"right": "Right"
+			}
+		},
+		"position": {
+			"title": "Focus Position",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = leftmost / topmost, 100 = rightmost / bottommost"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Playback Speed",
+		"selectRegion": "Select a speed region to adjust",
+		"deleteRegion": "Delete Speed Region",
+		"customPlaybackSpeed": "Custom Playback Speed",
+		"maxSpeedError": "Speed can't go higher than 16×"
+	},
+	"trim": {
+		"deleteRegion": "Delete Trim Region"
+	},
+	"layout": {
+		"title": "Layout",
+		"preset": "Preset",
+		"selectPreset": "Select preset",
+		"pictureInPicture": "Picture in Picture",
+		"verticalStack": "Vertical Stack",
+		"dualFrame": "Dual Frame",
+		"noWebcam": "No Webcam",
+		"webcamShape": "Camera Shape",
+		"webcamSize": "Webcam Size"
+	},
+	"effects": {
+		"title": "Video Effects",
+		"blurBg": "Blur BG",
+		"motionBlur": "Motion Blur",
+		"off": "off",
+		"on": "on",
+		"shadow": "Shadow",
+		"roundness": "Roundness",
+		"padding": "Padding"
+	},
+	"background": {
+		"title": "Background",
+		"image": "Image",
+		"color": "Color",
+		"gradient": "Gradient",
+		"uploadCustom": "Upload Custom",
+		"gradientLabel": "Gradient {{index}}",
+		"colorWheel": "Color Wheel",
+		"colorPalette": "Color Palette"
+	},
+	"crop": {
+		"title": "Crop",
+		"cropVideo": "Crop Video",
+		"dragInstruction": "Drag on each side to adjust the crop area",
+		"ratio": "Ratio",
+		"free": "Free",
+		"done": "Done",
+		"lockAspectRatio": "Lock aspect ratio",
+		"unlockAspectRatio": "Unlock aspect ratio"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 Video",
+		"mp4Description": "High quality video file",
+		"gifAnimation": "GIF Animation",
+		"gifDescription": "Animated image for sharing"
+	},
+	"exportQuality": {
+		"title": "Export resolution",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "GIF Frame Rate",
+		"size": "GIF Size",
+		"loop": "Loop GIF"
+	},
+	"project": {
+		"save": "Save Project",
+		"load": "Load Project"
+	},
+	"export": {
+		"videoButton": "Export Video",
+		"gifButton": "Export GIF",
+		"chooseSaveLocation": "Choose Save Location"
+	},
+	"support": {
+		"reportBug": "Report Bug",
+		"saveDiagnostics": "Save Diagnostics",
+		"starOnGithub": "Star on GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Invalid file type",
+		"jpgOnly": "Please upload a JPG, JPEG, or PNG image file.",
+		"uploadSuccess": "Custom image uploaded successfully!",
+		"failedToUpload": "Failed to upload image",
+		"errorReading": "There was an error reading the file."
+	},
+	"annotation": {
+		"title": "Annotation Settings",
+		"active": "Active",
+		"typeText": "Text",
+		"typeImage": "Image",
+		"typeArrow": "Arrow",
+		"typeBlur": "Blur",
+		"textContent": "Text Content",
+		"textPlaceholder": "Enter your text...",
+		"fontStyle": "Font Style",
+		"selectStyle": "Select style",
+		"size": "Size",
+		"customFonts": "Custom Fonts",
+		"textColor": "Text Color",
+		"background": "Background",
+		"none": "None",
+		"color": "Color",
+		"colorWheel": "Color Wheel",
+		"colorPalette": "Color Palette",
+		"clearBackground": "Clear Background",
+		"uploadImage": "Upload Image",
+		"supportedFormats": "Supported formats: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Arrow Direction",
+		"strokeWidth": "Stroke Width: {{width}}px",
+		"arrowColor": "Arrow Color",
+		"blurType": "Blur Type",
+		"blurTypeBlur": "Blur",
+		"blurTypeMosaic": "Mosaic Blur",
+		"blurColor": "Blur Color",
+		"blurColorWhite": "White",
+		"blurColorBlack": "Black",
+		"blurShape": "Blur Shape",
+		"blurIntensity": "Blur Intensity",
+		"mosaicBlockSize": "Mosaic Block Size",
+		"blurShapeRectangle": "Rectangle",
+		"blurShapeOval": "Oval",
+		"blurShapeFreehand": "Freehand",
+		"deleteAnnotation": "Delete Annotation",
+		"shortcutsAndTips": "Shortcuts & Tips",
+		"tipMovePlayhead": "Move playhead to overlapping annotation section and select an item.",
+		"tipTabCycle": "Use Tab to cycle through overlapping items.",
+		"tipShiftTabCycle": "Use Shift+Tab to cycle backwards.",
+		"invalidImageType": "Invalid file type",
+		"imageFormatsOnly": "Please upload a JPG, PNG, GIF, or WebP image file.",
+		"imageUploadSuccess": "Image uploaded successfully!",
+		"failedImageUpload": "Failed to upload image"
+	},
+	"fontStyles": {
+		"classic": "Classic",
+		"editor": "Editor",
+		"strong": "Strong",
+		"typewriter": "Typewriter",
+		"deco": "Deco",
+		"simple": "Simple",
+		"modern": "Modern",
+		"clean": "Clean"
+	},
+	"customFont": {
+		"dialogTitle": "Add Google Font",
+		"urlLabel": "Google Fonts Import URL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Get this from Google Fonts: Select a font → Click \"Get font\" → Copy the @import URL",
+		"nameLabel": "Display Name",
+		"namePlaceholder": "My Custom Font",
+		"nameHelp": "This is how the font will appear in the font selector",
+		"addButton": "Add Font",
+		"addingButton": "Adding...",
+		"errorEmptyUrl": "Please enter a Google Fonts import URL",
+		"errorInvalidUrl": "Please enter a valid Google Fonts URL",
+		"errorEmptyName": "Please enter a font name",
+		"errorExtractFailed": "Could not extract font family from URL",
+		"successMessage": "Font \"{{fontName}}\" added successfully",
+		"failedToAdd": "Failed to add font",
+		"errorTimeout": "Font took too long to load. Please check the URL and try again.",
+		"errorLoadFailed": "The font could not be loaded. Please verify the Google Fonts URL is correct."
+	},
+	"cursor": {
+		"show": "Show Cursor",
+		"size": "Size",
+		"smoothing": "Smoothing",
+		"motionBlur": "Motion Blur",
+		"clickBounce": "Click Bounce",
+		"clipToBounds": "Clip to Canvas"
+	},
+	"language": {
+		"title": "Language"
+	}
+}
diff --git a/src/i18n/locales/en/shortcuts.json b/src/i18n/locales/en/shortcuts.json
new file mode 100644
index 0000000..2c26aa4
--- /dev/null
+++ b/src/i18n/locales/en/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Keyboard Shortcuts",
+	"customize": "Customize",
+	"configurable": "Configurable",
+	"fixed": "Fixed",
+	"pressKey": "Press a key…",
+	"clickToChange": "Click to change",
+	"pressEscToCancel": "Press Esc to cancel",
+	"helpText": "Click a shortcut then press the new key combination. Press Esc to cancel.",
+	"resetToDefaults": "Reset to defaults",
+	"alreadyUsedBy": "Already used by {{action}}",
+	"swap": "Swap",
+	"reservedShortcut": "This shortcut is reserved for \"{{label}}\" and cannot be reassigned.",
+	"savedToast": "Keyboard shortcuts saved",
+	"resetToast": "Reset to default shortcuts — click Save to apply",
+	"actions": {
+		"addZoom": "Add Zoom",
+		"addTrim": "Add Trim",
+		"addSpeed": "Add Speed",
+		"addAnnotation": "Add Annotation",
+		"addBlur": "Add Blur",
+		"addKeyframe": "Add Keyframe",
+		"deleteSelected": "Delete Selected",
+		"playPause": "Play / Pause"
+	},
+	"fixedActions": {
+		"undo": "Undo",
+		"redo": "Redo",
+		"cycleAnnotationsForward": "Cycle Annotations Forward",
+		"cycleAnnotationsBackward": "Cycle Annotations Backward",
+		"deleteSelectedAlt": "Delete Selected (alt)",
+		"panTimeline": "Pan Timeline",
+		"zoomTimeline": "Zoom Timeline",
+		"frameBack": "Frame Back",
+		"frameForward": "Frame Forward"
+	}
+}
diff --git a/src/i18n/locales/en/timeline.json b/src/i18n/locales/en/timeline.json
new file mode 100644
index 0000000..389184b
--- /dev/null
+++ b/src/i18n/locales/en/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Add Zoom (Z)",
+		"suggestZooms": "Suggest Zooms from Cursor",
+		"addTrim": "Add Trim (T)",
+		"addAnnotation": "Add Annotation (A)",
+		"addBlur": "Add Blur (B)",
+		"addSpeed": "Add Speed (S)"
+	},
+	"hints": {
+		"pressZoom": "Press Z to add zoom",
+		"pressTrim": "Press T to add trim",
+		"pressAnnotation": "Press A to add annotation",
+		"pressBlur": "Press B to add blur region",
+		"pressSpeed": "Press S to add speed"
+	},
+	"labels": {
+		"pan": "Pan",
+		"zoom": "Zoom",
+		"trim": "Trim",
+		"speed": "Speed",
+		"zoomItem": "Zoom {{index}}",
+		"trimItem": "Trim {{index}}",
+		"speedItem": "Speed {{index}}",
+		"annotationItem": "Annotation",
+		"blurItem": "Blur {{index}}",
+		"imageItem": "Image",
+		"emptyText": "Empty text"
+	},
+	"emptyState": {
+		"noVideo": "No Video Loaded",
+		"dragAndDrop": "Drag and drop a video to start editing"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Cannot place zoom here",
+		"zoomExistsAtLocation": "Zoom already exists at this location or not enough space available.",
+		"zoomSuggestionUnavailable": "Zoom suggestion handler unavailable",
+		"noCursorTelemetry": "No cursor telemetry available",
+		"noCursorTelemetryDescription": "Record a screencast first to generate cursor-based suggestions.",
+		"noUsableTelemetry": "No usable cursor telemetry",
+		"noUsableTelemetryDescription": "The recording does not include enough cursor movement data.",
+		"noDwellMoments": "No clear cursor dwell moments found",
+		"noDwellMomentsDescription": "Try a recording with slower cursor pauses on important actions.",
+		"noAutoZoomSlots": "No auto-zoom slots available",
+		"noAutoZoomSlotsDescription": "Detected dwell points overlap existing zoom regions.",
+		"cannotPlaceTrim": "Cannot place trim here",
+		"trimExistsAtLocation": "Trim already exists at this location or not enough space available.",
+		"cannotPlaceSpeed": "Cannot place speed here",
+		"speedExistsAtLocation": "Speed region already exists at this location or not enough space available."
+	},
+	"success": {
+		"addedZoomSuggestions": "Added {{count}} cursor-based zoom suggestion",
+		"addedZoomSuggestionsPlural": "Added {{count}} cursor-based zoom suggestions"
+	}
+}
diff --git a/src/i18n/locales/es/common.json b/src/i18n/locales/es/common.json
new file mode 100644
index 0000000..48160a9
--- /dev/null
+++ b/src/i18n/locales/es/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "Cancelar",
+		"save": "Guardar",
+		"delete": "Eliminar",
+		"close": "Cerrar",
+		"share": "Compartir",
+		"done": "Listo",
+		"open": "Abrir",
+		"upload": "Subir",
+		"export": "Exportar",
+		"showInFolder": "Mostrar en carpeta",
+		"file": "Archivo",
+		"edit": "Editar",
+		"view": "Vista",
+		"window": "Ventana",
+		"quit": "Salir",
+		"stopRecording": "Detener grabación",
+		"undo": "Deshacer",
+		"redo": "Rehacer",
+		"cut": "Cortar",
+		"copy": "Copiar",
+		"paste": "Pegar",
+		"selectAll": "Seleccionar todo",
+		"minimize": "Minimizar",
+		"reload": "Recargar",
+		"forceReload": "Forzar recarga",
+		"toggleDevTools": "Alternar herramientas de desarrollador",
+		"actualSize": "Tamaño real",
+		"zoomIn": "Acercar",
+		"zoomOut": "Alejar",
+		"toggleFullScreen": "Alternar pantalla completa",
+		"recordingStatus": "Grabando: {{source}}",
+		"about": "Acerca de OpenScreen",
+		"services": "Servicios",
+		"hide": "Ocultar OpenScreen",
+		"hideOthers": "Ocultar otros",
+		"unhide": "Mostrar todo"
+	},
+	"playback": {
+		"play": "Reproducir",
+		"pause": "Pausar",
+		"fullscreen": "Pantalla completa",
+		"exitFullscreen": "Salir de pantalla completa"
+	},
+	"locale": {
+		"name": "Español",
+		"short": "ES"
+	}
+}
diff --git a/src/i18n/locales/es/dialogs.json b/src/i18n/locales/es/dialogs.json
new file mode 100644
index 0000000..f8a5e63
--- /dev/null
+++ b/src/i18n/locales/es/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "Exportación completada",
+		"yourFormatReady": "Tu {{format}} está listo",
+		"showInFolder": "Mostrar en carpeta",
+		"finalizingVideo": "Finalizando exportación de video...",
+		"compilingGifProgress": "Compilando GIF... {{progress}}%",
+		"compilingGifWait": "Compilando GIF... Esto puede tardar un rato",
+		"takeMoment": "Esto puede tardar un momento...",
+		"failed": "La exportación falló",
+		"tryAgain": "Por favor intenta de nuevo",
+		"finalizingVideoTitle": "Finalizando video",
+		"compilingGif": "Compilando GIF",
+		"exportingFormat": "Exportando {{format}}",
+		"compiling": "Compilando",
+		"renderingFrames": "Renderizando cuadros",
+		"processing": "Procesando...",
+		"finalizing": "Finalizando...",
+		"compilingStatus": "Compilando...",
+		"status": "Estado",
+		"format": "Formato",
+		"frames": "Cuadros",
+		"cancelExport": "Cancelar exportación",
+		"savedSuccessfully": "¡{{format}} guardado exitosamente!"
+	},
+	"tutorial": {
+		"triggerLabel": "Cómo funciona el recorte",
+		"title": "Cómo funciona el recorte",
+		"description": "Aprende a eliminar las partes no deseadas de tu video.",
+		"explanationBefore": "La herramienta de recorte funciona definiendo los segmentos que deseas",
+		"remove": "eliminar",
+		"explanationMiddle": " — cualquier parte",
+		"covered": "cubierta",
+		"explanationAfter": "por un segmento rojo será eliminada al exportar.",
+		"visualExample": "Ejemplo visual",
+		"removed": "ELIMINADO",
+		"kept": "Conservado",
+		"part1": "Parte 1",
+		"part2": "Parte 2",
+		"part3": "Parte 3",
+		"finalVideo": "Video final",
+		"step1Title": "1. Agregar recorte",
+		"step1DescriptionBefore": "Presiona ",
+		"step1DescriptionAfter": " o haz clic en el ícono de tijeras para marcar una sección a eliminar.",
+		"step2Title": "2. Ajustar",
+		"step2Description": "Arrastra los bordes de la región roja para cubrir exactamente lo que deseas eliminar."
+	},
+	"unsavedChanges": {
+		"title": "Cambios sin guardar",
+		"message": "Tienes cambios sin guardar.",
+		"detail": "¿Deseas guardar tu proyecto antes de cerrar?",
+		"saveAndClose": "Guardar y cerrar",
+		"discardAndClose": "Descartar y cerrar",
+		"loadProject": "Cargar proyecto…",
+		"saveProject": "Guardar proyecto…",
+		"saveProjectAs": "Guardar proyecto como…"
+	},
+	"fileDialogs": {
+		"saveGif": "Guardar GIF exportado",
+		"saveVideo": "Guardar video exportado",
+		"selectVideo": "Seleccionar archivo de video",
+		"saveProject": "Guardar proyecto OpenScreen",
+		"openProject": "Abrir proyecto OpenScreen",
+		"gifImage": "Imagen GIF",
+		"mp4Video": "Video MP4",
+		"videoFiles": "Archivos de video",
+		"openscreenProject": "Proyecto OpenScreen",
+		"allFiles": "Todos los archivos"
+	}
+}
diff --git a/src/i18n/locales/es/editor.json b/src/i18n/locales/es/editor.json
new file mode 100644
index 0000000..27e0cae
--- /dev/null
+++ b/src/i18n/locales/es/editor.json
@@ -0,0 +1,46 @@
+{
+	"errors": {
+		"noVideoLoaded": "No hay video cargado",
+		"videoNotReady": "El video no está listo",
+		"unableToDetermineSourcePath": "No se pudo determinar la ruta del video de origen",
+		"failedToSaveGif": "Error al guardar el GIF",
+		"gifExportFailed": "La exportación de GIF falló",
+		"failedToSaveVideo": "Error al guardar el video",
+		"exportFailed": "La exportación falló",
+		"exportFailedWithError": "La exportación falló: {{error}}",
+		"exportBackgroundLoadFailed": "La exportación falló: no se pudo cargar la imagen de fondo ({{url}})",
+		"failedToSaveExport": "Error al guardar la exportación",
+		"failedToSaveExportedVideo": "Error al guardar el video exportado",
+		"failedToRevealInFolder": "Error al mostrar en la carpeta: {{error}}"
+	},
+	"export": {
+		"canceled": "Exportación cancelada",
+		"exportedSuccessfully": "{{format}} exportado exitosamente"
+	},
+	"project": {
+		"saveCanceled": "Guardado de proyecto cancelado",
+		"failedToSave": "Error al guardar el proyecto",
+		"savedTo": "Proyecto guardado en {{path}}",
+		"failedToLoad": "Error al cargar el proyecto",
+		"invalidFormat": "Formato de archivo de proyecto no válido",
+		"loadedFrom": "Proyecto cargado desde {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Error al solicitar acceso a la cámara.",
+		"cameraBlocked": "El acceso a la cámara está bloqueado. Actívalo en la configuración del sistema para usar la cámara web.",
+		"systemAudioUnavailable": "Audio del sistema no disponible. Grabando sin audio del sistema.",
+		"microphoneDenied": "Acceso al micrófono denegado. La grabación continuará sin audio.",
+		"cameraDenied": "Acceso a la cámara denegado. La grabación continuará sin cámara web.",
+		"cameraDisconnected": "Cámara web desconectada.",
+		"cameraNotFound": "Cámara no encontrada.",
+		"permissionDenied": "Permiso de grabación denegado. Por favor permite la grabación de pantalla.",
+		"accessibilityAllowAndRetry": "Permite el acceso de accesibilidad para OpenScreen y luego pulsa grabar de nuevo para iniciar la cuenta atrás."
+	},
+	"loadingVideo": "Cargando video...",
+	"newRecording": {
+		"title": "Volver a la grabadora",
+		"description": "Tu sesión actual ha sido guardada.",
+		"cancel": "Cancelar",
+		"confirm": "Confirmar"
+	}
+}
diff --git a/src/i18n/locales/es/launch.json b/src/i18n/locales/es/launch.json
new file mode 100644
index 0000000..9ee90ec
--- /dev/null
+++ b/src/i18n/locales/es/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Ocultar HUD",
+		"closeApp": "Cerrar aplicación",
+		"restartRecording": "Reiniciar grabación",
+		"cancelRecording": "Cancelar grabación",
+		"pauseRecording": "Pausar grabación",
+		"resumeRecording": "Reanudar grabación",
+		"openVideoFile": "Abrir archivo de video",
+		"openProject": "Abrir proyecto"
+	},
+	"audio": {
+		"enableSystemAudio": "Activar audio del sistema",
+		"disableSystemAudio": "Desactivar audio del sistema",
+		"enableMicrophone": "Activar micrófono",
+		"disableMicrophone": "Desactivar micrófono",
+		"defaultMicrophone": "Micrófono predeterminado"
+	},
+	"webcam": {
+		"enableWebcam": "Activar cámara web",
+		"disableWebcam": "Desactivar cámara web",
+		"defaultCamera": "Cámara predeterminada",
+		"searching": "Buscando...",
+		"noneFound": "No se encontró cámara",
+		"unavailable": "Cámara no disponible"
+	},
+	"cursor": {
+		"useEditableCursor": "Usar cursor editable",
+		"useSystemCursor": "Usar cursor del sistema"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "Cargando fuentes...",
+		"screens": "Pantallas ({{count}})",
+		"windows": "Ventanas ({{count}})",
+		"defaultSourceName": "Pantalla"
+	},
+	"recording": {
+		"selectSource": "Por favor selecciona una fuente para grabar"
+	},
+	"language": "Idioma",
+	"systemLanguagePrompt": {
+		"title": "¿Usar el idioma del sistema?",
+		"description": "Detectamos {{language}} como idioma de tu sistema. ¿Quieres cambiar OpenScreen a {{language}}?",
+		"switch": "Cambiar a {{language}}",
+		"keepDefault": "Mantener idioma actual"
+	}
+}
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
new file mode 100644
index 0000000..99cff77
--- /dev/null
+++ b/src/i18n/locales/es/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "Mantener para previsualizar el efecto de zoom",
+		"level": "Nivel de zoom",
+		"selectRegion": "Selecciona una región de zoom para ajustar",
+		"deleteZoom": "Eliminar zoom",
+		"focusMode": {
+			"title": "Modo de enfoque",
+			"manual": "Manual",
+			"auto": "Auto",
+			"autoDescription": "La cámara sigue la posición del cursor grabado"
+		},
+		"threeD": {
+			"title": "Rotación 3D",
+			"preset": {
+				"iso": "Iso",
+				"left": "Izquierda",
+				"right": "Derecha"
+			}
+		},
+		"customScale": "Zoom personalizado",
+		"position": {
+			"title": "Posición de enfoque",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = extremo izquierdo / superior, 100 = extremo derecho / inferior"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Velocidad de reproducción",
+		"selectRegion": "Selecciona una región de velocidad para ajustar",
+		"deleteRegion": "Eliminar región de velocidad",
+		"customPlaybackSpeed": "Velocidad personalizada",
+		"maxSpeedError": "La velocidad no puede superar 16×"
+	},
+	"trim": {
+		"deleteRegion": "Eliminar región de recorte"
+	},
+	"layout": {
+		"title": "Diseño",
+		"preset": "Predefinido",
+		"selectPreset": "Seleccionar predefinido",
+		"pictureInPicture": "Imagen en imagen",
+		"verticalStack": "Apilado vertical",
+		"dualFrame": "Marco dual",
+		"webcamShape": "Forma de cámara",
+		"webcamSize": "Tamaño de cámara",
+		"noWebcam": "Sin cámara"
+	},
+	"effects": {
+		"title": "Efectos de video",
+		"blurBg": "Desenfocar fondo",
+		"motionBlur": "Desenfoque de movimiento",
+		"off": "desactivado",
+		"shadow": "Sombra",
+		"roundness": "Redondez",
+		"padding": "Relleno",
+		"on": "activado"
+	},
+	"background": {
+		"title": "Fondo",
+		"image": "Imagen",
+		"color": "Color",
+		"gradient": "Degradado",
+		"uploadCustom": "Subir personalizado",
+		"gradientLabel": "Degradado {{index}}",
+		"colorWheel": "Rueda de colores",
+		"colorPalette": "Paleta de colores"
+	},
+	"crop": {
+		"title": "Recortar",
+		"cropVideo": "Recortar video",
+		"dragInstruction": "Arrastra cada lado para ajustar el área de recorte",
+		"ratio": "Proporción",
+		"free": "Libre",
+		"done": "Listo",
+		"lockAspectRatio": "Bloquear relación de aspecto",
+		"unlockAspectRatio": "Desbloquear relación de aspecto"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "Video MP4",
+		"mp4Description": "Archivo de video de alta calidad",
+		"gifAnimation": "Animación GIF",
+		"gifDescription": "Imagen animada para compartir"
+	},
+	"exportQuality": {
+		"title": "Resolución de exportación",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "Velocidad de cuadros del GIF",
+		"size": "Tamaño del GIF",
+		"loop": "Repetir GIF"
+	},
+	"project": {
+		"save": "Guardar proyecto",
+		"load": "Cargar proyecto"
+	},
+	"export": {
+		"videoButton": "Exportar video",
+		"gifButton": "Exportar GIF",
+		"chooseSaveLocation": "Elegir ubicación de guardado"
+	},
+	"support": {
+		"reportBug": "Reportar error",
+		"saveDiagnostics": "Guardar diagnósticos",
+		"starOnGithub": "Dar estrella en GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Tipo de archivo no válido",
+		"jpgOnly": "Por favor sube un archivo de imagen JPG, JPEG o PNG.",
+		"uploadSuccess": "¡Imagen personalizada subida exitosamente!",
+		"failedToUpload": "Error al subir la imagen",
+		"errorReading": "Hubo un error al leer el archivo."
+	},
+	"annotation": {
+		"title": "Configuración de anotaciones",
+		"active": "Activo",
+		"typeText": "Texto",
+		"typeImage": "Imagen",
+		"typeArrow": "Flecha",
+		"typeBlur": "Desenfoque",
+		"textContent": "Contenido de texto",
+		"textPlaceholder": "Escribe tu texto...",
+		"fontStyle": "Estilo de fuente",
+		"selectStyle": "Seleccionar estilo",
+		"size": "Tamaño",
+		"customFonts": "Fuentes personalizadas",
+		"textColor": "Color de texto",
+		"background": "Fondo",
+		"none": "Ninguno",
+		"color": "Color",
+		"colorWheel": "Rueda de colores",
+		"colorPalette": "Paleta de colores",
+		"clearBackground": "Quitar fondo",
+		"uploadImage": "Subir imagen",
+		"supportedFormats": "Formatos compatibles: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Dirección de la flecha",
+		"strokeWidth": "Grosor del trazo: {{width}}px",
+		"arrowColor": "Color de la flecha",
+		"blurType": "Tipo de desenfoque",
+		"blurTypeBlur": "Desenfoque",
+		"blurTypeMosaic": "Desenfoque mosaico",
+		"blurColor": "Color del desenfoque",
+		"blurColorWhite": "Blanco",
+		"blurColorBlack": "Negro",
+		"blurShape": "Forma del desenfoque",
+		"blurIntensity": "Intensidad del desenfoque",
+		"mosaicBlockSize": "Tamano del bloque mosaico",
+		"blurShapeRectangle": "Rectángulo",
+		"blurShapeOval": "Óvalo",
+		"blurShapeFreehand": "Mano alzada",
+		"deleteAnnotation": "Eliminar anotación",
+		"shortcutsAndTips": "Atajos y consejos",
+		"tipMovePlayhead": "Mueve el cabezal de reproducción a la sección de anotación superpuesta y selecciona un elemento.",
+		"tipTabCycle": "Usa Tab para recorrer los elementos superpuestos.",
+		"tipShiftTabCycle": "Usa Shift+Tab para recorrer hacia atrás.",
+		"invalidImageType": "Tipo de archivo no válido",
+		"imageFormatsOnly": "Por favor sube un archivo de imagen JPG, PNG, GIF o WebP.",
+		"imageUploadSuccess": "¡Imagen subida exitosamente!",
+		"failedImageUpload": "Error al subir la imagen"
+	},
+	"fontStyles": {
+		"classic": "Clásico",
+		"editor": "Editor",
+		"strong": "Fuerte",
+		"typewriter": "Máquina de escribir",
+		"deco": "Deco",
+		"simple": "Simple",
+		"modern": "Moderno",
+		"clean": "Limpio"
+	},
+	"customFont": {
+		"dialogTitle": "Agregar fuente de Google",
+		"urlLabel": "URL de importación de Google Fonts",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Obtén esto de Google Fonts: Selecciona una fuente → Haz clic en \"Get font\" → Copia la URL de @import",
+		"nameLabel": "Nombre para mostrar",
+		"namePlaceholder": "Mi fuente personalizada",
+		"nameHelp": "Así aparecerá la fuente en el selector de fuentes",
+		"addButton": "Agregar fuente",
+		"addingButton": "Agregando...",
+		"errorEmptyUrl": "Por favor ingresa una URL de importación de Google Fonts",
+		"errorInvalidUrl": "Por favor ingresa una URL válida de Google Fonts",
+		"errorEmptyName": "Por favor ingresa un nombre de fuente",
+		"errorExtractFailed": "No se pudo extraer la familia de fuentes de la URL",
+		"successMessage": "Fuente \"{{fontName}}\" agregada exitosamente",
+		"failedToAdd": "Error al agregar la fuente",
+		"errorTimeout": "La fuente tardó demasiado en cargarse. Por favor verifica la URL e intenta de nuevo.",
+		"errorLoadFailed": "No se pudo cargar la fuente. Por favor verifica que la URL de Google Fonts sea correcta."
+	},
+	"cursor": {
+		"show": "Mostrar cursor",
+		"size": "Tamaño",
+		"smoothing": "Suavizado",
+		"motionBlur": "Desenfoque de movimiento",
+		"clickBounce": "Rebote al clic",
+		"clipToBounds": "Recortar al lienzo"
+	},
+	"language": {
+		"title": "Idioma"
+	}
+}
diff --git a/src/i18n/locales/es/shortcuts.json b/src/i18n/locales/es/shortcuts.json
new file mode 100644
index 0000000..888ded0
--- /dev/null
+++ b/src/i18n/locales/es/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Atajos de teclado",
+	"customize": "Personalizar",
+	"configurable": "Configurables",
+	"fixed": "Fijos",
+	"pressKey": "Presiona una tecla…",
+	"clickToChange": "Haz clic para cambiar",
+	"pressEscToCancel": "Presiona Esc para cancelar",
+	"helpText": "Haz clic en un atajo y luego presiona la nueva combinación de teclas. Presiona Esc para cancelar.",
+	"resetToDefaults": "Restablecer valores predeterminados",
+	"alreadyUsedBy": "Ya está en uso por {{action}}",
+	"swap": "Intercambiar",
+	"reservedShortcut": "Este atajo está reservado para \"{{label}}\" y no se puede reasignar.",
+	"savedToast": "Atajos de teclado guardados",
+	"resetToast": "Restablecido a los atajos predeterminados — haz clic en Guardar para aplicar",
+	"actions": {
+		"addZoom": "Agregar zoom",
+		"addTrim": "Agregar recorte",
+		"addSpeed": "Agregar velocidad",
+		"addAnnotation": "Agregar anotación",
+		"addBlur": "Agregar desenfoque",
+		"addKeyframe": "Agregar fotograma clave",
+		"deleteSelected": "Eliminar seleccionado",
+		"playPause": "Reproducir / Pausar"
+	},
+	"fixedActions": {
+		"undo": "Deshacer",
+		"redo": "Rehacer",
+		"cycleAnnotationsForward": "Recorrer anotaciones hacia adelante",
+		"cycleAnnotationsBackward": "Recorrer anotaciones hacia atrás",
+		"deleteSelectedAlt": "Eliminar seleccionado (alt)",
+		"panTimeline": "Desplazar línea de tiempo",
+		"zoomTimeline": "Zoom en línea de tiempo",
+		"frameBack": "Fotograma anterior",
+		"frameForward": "Fotograma siguiente"
+	}
+}
diff --git a/src/i18n/locales/es/timeline.json b/src/i18n/locales/es/timeline.json
new file mode 100644
index 0000000..1a1abe1
--- /dev/null
+++ b/src/i18n/locales/es/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Agregar zoom (Z)",
+		"suggestZooms": "Sugerir zooms desde el cursor",
+		"addTrim": "Agregar recorte (T)",
+		"addAnnotation": "Agregar anotación (A)",
+		"addSpeed": "Agregar velocidad (S)",
+		"addBlur": "Agregar desenfoque (B)"
+	},
+	"hints": {
+		"pressZoom": "Presiona Z para agregar zoom",
+		"pressTrim": "Presiona T para agregar recorte",
+		"pressAnnotation": "Presiona A para agregar anotación",
+		"pressSpeed": "Presiona S para agregar velocidad",
+		"pressBlur": "Presiona B para agregar una región de desenfoque"
+	},
+	"labels": {
+		"pan": "Desplazar",
+		"zoom": "Zoom",
+		"trim": "Recortar",
+		"speed": "Velocidad",
+		"zoomItem": "Zoom {{index}}",
+		"trimItem": "Recorte {{index}}",
+		"speedItem": "Velocidad {{index}}",
+		"annotationItem": "Anotación",
+		"imageItem": "Imagen",
+		"emptyText": "Texto vacío",
+		"blurItem": "Desenfoque {{index}}"
+	},
+	"emptyState": {
+		"noVideo": "No hay video cargado",
+		"dragAndDrop": "Arrastra y suelta un video para comenzar a editar"
+	},
+	"errors": {
+		"cannotPlaceZoom": "No se puede colocar el zoom aquí",
+		"zoomExistsAtLocation": "Ya existe un zoom en esta ubicación o no hay suficiente espacio disponible.",
+		"zoomSuggestionUnavailable": "El controlador de sugerencias de zoom no está disponible",
+		"noCursorTelemetry": "No hay telemetría de cursor disponible",
+		"noCursorTelemetryDescription": "Graba una captura de pantalla primero para generar sugerencias basadas en el cursor.",
+		"noUsableTelemetry": "No hay telemetría de cursor utilizable",
+		"noUsableTelemetryDescription": "La grabación no incluye suficientes datos de movimiento del cursor.",
+		"noDwellMoments": "No se encontraron momentos claros de pausa del cursor",
+		"noDwellMomentsDescription": "Intenta una grabación con pausas más lentas del cursor en acciones importantes.",
+		"noAutoZoomSlots": "No hay espacios de auto-zoom disponibles",
+		"noAutoZoomSlotsDescription": "Los puntos de pausa detectados se superponen con regiones de zoom existentes.",
+		"cannotPlaceTrim": "No se puede colocar el recorte aquí",
+		"trimExistsAtLocation": "Ya existe un recorte en esta ubicación o no hay suficiente espacio disponible.",
+		"cannotPlaceSpeed": "No se puede colocar la velocidad aquí",
+		"speedExistsAtLocation": "Ya existe una región de velocidad en esta ubicación o no hay suficiente espacio disponible."
+	},
+	"success": {
+		"addedZoomSuggestions": "Se agregó {{count}} sugerencia de zoom basada en el cursor",
+		"addedZoomSuggestionsPlural": "Se agregaron {{count}} sugerencias de zoom basadas en el cursor"
+	}
+}
diff --git a/src/i18n/locales/fr/common.json b/src/i18n/locales/fr/common.json
new file mode 100644
index 0000000..f53ec43
--- /dev/null
+++ b/src/i18n/locales/fr/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "Annuler",
+		"save": "Enregistrer",
+		"delete": "Supprimer",
+		"close": "Fermer",
+		"share": "Partager",
+		"done": "Terminer",
+		"open": "Ouvrir",
+		"upload": "Téléverser",
+		"export": "Exporter",
+		"showInFolder": "Afficher dans le dossier",
+		"file": "Fichier",
+		"edit": "Éditer",
+		"view": "Affichage",
+		"window": "Fenêtre",
+		"quit": "Quitter",
+		"stopRecording": "Arrêter l'enregistrement",
+		"undo": "Annuler",
+		"redo": "Rétablir",
+		"cut": "Couper",
+		"copy": "Copier",
+		"paste": "Coller",
+		"selectAll": "Tout sélectionner",
+		"minimize": "Réduire",
+		"reload": "Recharger",
+		"forceReload": "Forcer le rechargement",
+		"toggleDevTools": "Afficher/masquer les outils de développement",
+		"actualSize": "Taille réelle",
+		"zoomIn": "Zoom avant",
+		"zoomOut": "Zoom arrière",
+		"toggleFullScreen": "Basculer en plein écran",
+		"recordingStatus": "Enregistrement : {{source}}",
+		"about": "À propos d’OpenScreen",
+		"services": "Services",
+		"hide": "Masquer OpenScreen",
+		"hideOthers": "Masquer les autres",
+		"unhide": "Tout afficher"
+	},
+	"playback": {
+		"play": "Lecture",
+		"pause": "Pause",
+		"fullscreen": "Plein écran",
+		"exitFullscreen": "Quitter le plein écran"
+	},
+	"locale": {
+		"name": "Français",
+		"short": "FR"
+	}
+}
diff --git a/src/i18n/locales/fr/dialogs.json b/src/i18n/locales/fr/dialogs.json
new file mode 100644
index 0000000..dbaae38
--- /dev/null
+++ b/src/i18n/locales/fr/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "Export terminé",
+		"yourFormatReady": "Votre {{format}} est prêt",
+		"showInFolder": "Afficher dans le dossier",
+		"finalizingVideo": "Finalisation de l'export vidéo...",
+		"compilingGifProgress": "Compilation du GIF... {{progress}}%",
+		"compilingGifWait": "Compilation du GIF... Cela peut prendre un moment",
+		"takeMoment": "Cela peut prendre un moment...",
+		"failed": "Export échoué",
+		"tryAgain": "Veuillez réessayer",
+		"finalizingVideoTitle": "Finalisation de la vidéo",
+		"compilingGif": "Compilation du GIF",
+		"exportingFormat": "Export de {{format}}",
+		"compiling": "Compilation en cours",
+		"renderingFrames": "Rendu des images",
+		"processing": "Traitement en cours...",
+		"finalizing": "Finalisation...",
+		"compilingStatus": "Compilation...",
+		"status": "Statut",
+		"format": "Format",
+		"frames": "Images",
+		"cancelExport": "Annuler l'export",
+		"savedSuccessfully": "{{format}} enregistré avec succès !"
+	},
+	"tutorial": {
+		"triggerLabel": "Comment fonctionne la coupe",
+		"title": "Comment fonctionne la coupe",
+		"description": "Comprendre comment supprimer les parties indésirables de votre vidéo.",
+		"explanationBefore": "L'outil Coupe fonctionne en définissant les segments que vous souhaitez",
+		"remove": "supprimer",
+		"explanationMiddle": " — tout ce qui est",
+		"covered": "couvert",
+		"explanationAfter": "par un segment de coupe rouge sera coupé lors de l'export.",
+		"visualExample": "Exemple visuel",
+		"removed": "SUPPRIMÉ",
+		"kept": "Conservé",
+		"part1": "Partie 1",
+		"part2": "Partie 2",
+		"part3": "Partie 3",
+		"finalVideo": "Vidéo finale",
+		"step1Title": "1. Ajouter une coupe",
+		"step1DescriptionBefore": "Appuyez sur ",
+		"step1DescriptionAfter": " ou cliquez sur l'icône ciseaux pour marquer une section à supprimer.",
+		"step2Title": "2. Ajuster",
+		"step2Description": "Faites glisser les bords de la région rouge pour couvrir exactement ce que vous souhaitez couper."
+	},
+	"unsavedChanges": {
+		"title": "Modifications non enregistrées",
+		"message": "Vous avez des modifications non enregistrées.",
+		"detail": "Voulez-vous enregistrer votre projet avant de fermer ?",
+		"saveAndClose": "Enregistrer et fermer",
+		"discardAndClose": "Ignorer et fermer",
+		"loadProject": "Charger un projet…",
+		"saveProject": "Enregistrer le projet…",
+		"saveProjectAs": "Enregistrer le projet sous…"
+	},
+	"fileDialogs": {
+		"saveGif": "Enregistrer le GIF exporté",
+		"saveVideo": "Enregistrer la vidéo exportée",
+		"selectVideo": "Sélectionner un fichier vidéo",
+		"saveProject": "Enregistrer le projet OpenScreen",
+		"openProject": "Ouvrir un projet OpenScreen",
+		"gifImage": "Image GIF",
+		"mp4Video": "Vidéo MP4",
+		"videoFiles": "Fichiers vidéo",
+		"openscreenProject": "Projet OpenScreen",
+		"allFiles": "Tous les fichiers"
+	}
+}
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
new file mode 100644
index 0000000..7195aed
--- /dev/null
+++ b/src/i18n/locales/fr/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "Retour à l'enregistreur",
+		"description": "Votre session actuelle a été enregistrée.",
+		"cancel": "Annuler",
+		"confirm": "Confirmer"
+	},
+	"errors": {
+		"noVideoLoaded": "Aucune vidéo chargée",
+		"videoNotReady": "Vidéo non prête",
+		"unableToDetermineSourcePath": "Impossible de déterminer le chemin de la vidéo source",
+		"failedToSaveGif": "Échec de l'enregistrement du GIF",
+		"gifExportFailed": "L'export du GIF a échoué",
+		"failedToSaveVideo": "Échec de l'enregistrement de la vidéo",
+		"exportFailed": "L'export a échoué",
+		"exportFailedWithError": "L'export a échoué : {{error}}",
+		"exportBackgroundLoadFailed": "L'export a échoué : impossible de charger l'image d'arrière-plan ({{url}})",
+		"failedToSaveExport": "Échec de l'enregistrement de l'export",
+		"failedToSaveExportedVideo": "Échec de l'enregistrement de la vidéo exportée",
+		"failedToRevealInFolder": "Erreur lors de l'affichage dans le dossier : {{error}}"
+	},
+	"export": {
+		"canceled": "Export annulé",
+		"exportedSuccessfully": "{{format}} exporté avec succès"
+	},
+	"project": {
+		"saveCanceled": "Enregistrement du projet annulé",
+		"failedToSave": "Échec de l'enregistrement du projet",
+		"savedTo": "Projet enregistré dans {{path}}",
+		"failedToLoad": "Échec du chargement du projet",
+		"invalidFormat": "Format de fichier projet invalide",
+		"loadedFrom": "Projet chargé depuis {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Échec de la demande d'accès à la caméra.",
+		"cameraBlocked": "L'accès à la caméra est bloqué. Activez-le dans les paramètres système pour utiliser la webcam.",
+		"systemAudioUnavailable": "Audio système non disponible. Enregistrement sans audio système.",
+		"microphoneDenied": "Accès au microphone refusé. L'enregistrement continuera sans audio.",
+		"cameraDenied": "Accès à la caméra refusé. L'enregistrement continuera sans webcam.",
+		"cameraDisconnected": "Webcam déconnectée.",
+		"cameraNotFound": "Caméra introuvable.",
+		"permissionDenied": "Permission d'enregistrement refusée. Veuillez autoriser l'enregistrement d'écran.",
+		"accessibilityAllowAndRetry": "Autorisez l'accès Accessibilité pour OpenScreen, puis appuyez de nouveau sur enregistrer pour lancer le compte à rebours."
+	},
+	"loadingVideo": "Chargement de la vidéo..."
+}
diff --git a/src/i18n/locales/fr/launch.json b/src/i18n/locales/fr/launch.json
new file mode 100644
index 0000000..3542499
--- /dev/null
+++ b/src/i18n/locales/fr/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Masquer le HUD",
+		"closeApp": "Fermer l'application",
+		"restartRecording": "Redémarrer l'enregistrement",
+		"cancelRecording": "Annuler l'enregistrement",
+		"pauseRecording": "Mettre en pause l'enregistrement",
+		"resumeRecording": "Reprendre l'enregistrement",
+		"openVideoFile": "Ouvrir un fichier vidéo",
+		"openProject": "Ouvrir un projet"
+	},
+	"audio": {
+		"enableSystemAudio": "Activer l'audio système",
+		"disableSystemAudio": "Désactiver l'audio système",
+		"enableMicrophone": "Activer le microphone",
+		"disableMicrophone": "Désactiver le microphone",
+		"defaultMicrophone": "Microphone par défaut"
+	},
+	"webcam": {
+		"enableWebcam": "Activer la webcam",
+		"disableWebcam": "Désactiver la webcam",
+		"defaultCamera": "Caméra par défaut",
+		"searching": "Recherche en cours...",
+		"noneFound": "Aucune caméra trouvée",
+		"unavailable": "Caméra non disponible"
+	},
+	"cursor": {
+		"useEditableCursor": "Utiliser le curseur éditable",
+		"useSystemCursor": "Utiliser le curseur système"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "Chargement des sources...",
+		"screens": "Écrans ({{count}})",
+		"windows": "Fenêtres ({{count}})",
+		"defaultSourceName": "Écran"
+	},
+	"recording": {
+		"selectSource": "Veuillez sélectionner une source à enregistrer"
+	},
+	"language": "Langue",
+	"systemLanguagePrompt": {
+		"title": "Utiliser la langue de votre système ?",
+		"description": "Nous avons détecté {{language}} comme langue système. Voulez-vous passer OpenScreen en {{language}} ?",
+		"switch": "Passer en {{language}}",
+		"keepDefault": "Conserver la langue actuelle"
+	}
+}
diff --git a/src/i18n/locales/fr/settings.json b/src/i18n/locales/fr/settings.json
new file mode 100644
index 0000000..c968c68
--- /dev/null
+++ b/src/i18n/locales/fr/settings.json
@@ -0,0 +1,208 @@
+{
+	"zoom": {
+		"previewHold": "Maintenir pour prévisualiser l’effet de zoom",
+		"level": "Niveau de zoom",
+		"selectRegion": "Sélectionnez une région de zoom à ajuster",
+		"deleteZoom": "Supprimer le zoom",
+		"focusMode": {
+			"title": "Mode focus",
+			"manual": "Manuel",
+			"auto": "Auto",
+			"autoDescription": "La caméra suit la position du curseur enregistré"
+		},
+		"speed": {},
+		"threeD": {
+			"title": "Rotation 3D",
+			"preset": {
+				"iso": "Iso",
+				"left": "Gauche",
+				"right": "Droite"
+			}
+		},
+		"customScale": "Zoom personnalisé",
+		"position": {
+			"title": "Position du focus",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = tout à gauche / en haut, 100 = tout à droite / en bas"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Vitesse de lecture",
+		"selectRegion": "Sélectionnez une région de vitesse à ajuster",
+		"deleteRegion": "Supprimer la région de vitesse",
+		"customPlaybackSpeed": "Vitesse de lecture personnalisée",
+		"maxSpeedError": "La vitesse ne peut pas dépasser 16×"
+	},
+	"trim": {
+		"deleteRegion": "Supprimer la région de coupe"
+	},
+	"layout": {
+		"title": "Mise en page",
+		"preset": "Préréglage",
+		"selectPreset": "Choisir un préréglage",
+		"pictureInPicture": "Incrustation d'image",
+		"verticalStack": "Empilement vertical",
+		"dualFrame": "Double cadre",
+		"webcamShape": "Forme de la caméra",
+		"webcamSize": "Taille de la caméra",
+		"noWebcam": "Sans webcam"
+	},
+	"effects": {
+		"title": "Effets vidéo",
+		"blurBg": "Flou arrière-plan",
+		"motionBlur": "Flou de mouvement",
+		"off": "désactivé",
+		"shadow": "Ombre",
+		"roundness": "Arrondi",
+		"padding": "Marge",
+		"on": "activé"
+	},
+	"background": {
+		"title": "Arrière-plan",
+		"image": "Image",
+		"color": "Couleur",
+		"gradient": "Dégradé",
+		"uploadCustom": "Téléverser une image",
+		"gradientLabel": "Dégradé {{index}}",
+		"colorWheel": "Roue chromatique",
+		"colorPalette": "Palette de couleurs"
+	},
+	"crop": {
+		"title": "Recadrage",
+		"cropVideo": "Recadrer la vidéo",
+		"dragInstruction": "Faites glisser chaque côté pour ajuster la zone de recadrage",
+		"ratio": "Ratio",
+		"free": "Libre",
+		"done": "Terminer",
+		"lockAspectRatio": "Verrouiller le ratio",
+		"unlockAspectRatio": "Déverrouiller le ratio"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "Vidéo MP4",
+		"mp4Description": "Fichier vidéo haute qualité",
+		"gifAnimation": "Animation GIF",
+		"gifDescription": "Image animée pour le partage"
+	},
+	"exportQuality": {
+		"title": "Résolution d'export",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "Fréquence d'images GIF",
+		"size": "Taille du GIF",
+		"loop": "GIF en boucle"
+	},
+	"project": {
+		"save": "Enregistrer le projet",
+		"load": "Charger un projet"
+	},
+	"export": {
+		"videoButton": "Exporter la vidéo",
+		"gifButton": "Exporter le GIF",
+		"chooseSaveLocation": "Choisir l'emplacement d'enregistrement"
+	},
+	"support": {
+		"reportBug": "Signaler un bug",
+		"saveDiagnostics": "Enregistrer les diagnostics",
+		"starOnGithub": "Étoile sur GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Type de fichier invalide",
+		"jpgOnly": "Veuillez téléverser un fichier image JPG, JPEG ou PNG.",
+		"uploadSuccess": "Image personnalisée téléversée avec succès !",
+		"failedToUpload": "Échec du téléversement de l'image",
+		"errorReading": "Une erreur s'est produite lors de la lecture du fichier."
+	},
+	"annotation": {
+		"title": "Paramètres d'annotation",
+		"active": "Actif",
+		"typeText": "Texte",
+		"typeImage": "Image",
+		"typeArrow": "Flèche",
+		"typeBlur": "Flou",
+		"textContent": "Contenu du texte",
+		"textPlaceholder": "Saisissez votre texte...",
+		"fontStyle": "Style de police",
+		"selectStyle": "Choisir un style",
+		"size": "Taille",
+		"customFonts": "Polices personnalisées",
+		"textColor": "Couleur du texte",
+		"background": "Arrière-plan",
+		"none": "Aucun",
+		"color": "Couleur",
+		"colorWheel": "Roue chromatique",
+		"colorPalette": "Palette de couleurs",
+		"clearBackground": "Supprimer l'arrière-plan",
+		"uploadImage": "Téléverser une image",
+		"supportedFormats": "Formats supportés : JPG, PNG, GIF, WebP",
+		"arrowDirection": "Direction de la flèche",
+		"strokeWidth": "Épaisseur du trait : {{width}}px",
+		"arrowColor": "Couleur de la flèche",
+		"blurType": "Type de flou",
+		"blurTypeBlur": "Flou",
+		"blurTypeMosaic": "Flou mosaique",
+		"blurColor": "Couleur du flou",
+		"blurColorWhite": "Blanc",
+		"blurColorBlack": "Noir",
+		"blurShape": "Forme du flou",
+		"blurIntensity": "Intensité du flou",
+		"mosaicBlockSize": "Taille des blocs de mosaique",
+		"blurShapeRectangle": "Rectangle",
+		"blurShapeOval": "Ovale",
+		"blurShapeFreehand": "Main levée",
+		"deleteAnnotation": "Supprimer l'annotation",
+		"shortcutsAndTips": "Raccourcis & Astuces",
+		"tipMovePlayhead": "Déplacez la tête de lecture sur la section d'annotation et sélectionnez un élément.",
+		"tipTabCycle": "Utilisez Tab pour cycler entre les éléments superposés.",
+		"tipShiftTabCycle": "Utilisez Shift+Tab pour cycler en sens inverse.",
+		"invalidImageType": "Type de fichier invalide",
+		"imageFormatsOnly": "Veuillez téléverser un fichier image JPG, PNG, GIF ou WebP.",
+		"imageUploadSuccess": "Image téléversée avec succès !",
+		"failedImageUpload": "Échec du téléversement de l'image"
+	},
+	"fontStyles": {
+		"classic": "Classique",
+		"editor": "Éditeur",
+		"strong": "Gras",
+		"typewriter": "Machine à écrire",
+		"deco": "Déco",
+		"simple": "Simple",
+		"modern": "Moderne",
+		"clean": "Épuré"
+	},
+	"customFont": {
+		"dialogTitle": "Ajouter une police Google",
+		"urlLabel": "URL d'import Google Fonts",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Obtenez-la depuis Google Fonts : Sélectionnez une police → Cliquez sur « Obtenir la police » → Copiez l'URL @import",
+		"nameLabel": "Nom d'affichage",
+		"namePlaceholder": "Ma police personnalisée",
+		"nameHelp": "C'est ainsi que la police apparaîtra dans le sélecteur de polices",
+		"addButton": "Ajouter la police",
+		"addingButton": "Ajout en cours...",
+		"errorEmptyUrl": "Veuillez saisir une URL d'import Google Fonts",
+		"errorInvalidUrl": "Veuillez saisir une URL Google Fonts valide",
+		"errorEmptyName": "Veuillez saisir un nom de police",
+		"errorExtractFailed": "Impossible d'extraire la famille de polices depuis l'URL",
+		"successMessage": "Police « {{fontName}} » ajoutée avec succès",
+		"failedToAdd": "Échec de l'ajout de la police",
+		"errorTimeout": "La police a mis trop de temps à charger. Vérifiez l'URL et réessayez.",
+		"errorLoadFailed": "La police n'a pas pu être chargée. Vérifiez que l'URL Google Fonts est correcte."
+	},
+	"cursor": {
+		"show": "Afficher le curseur",
+		"size": "Taille",
+		"smoothing": "Lissage",
+		"motionBlur": "Flou de mouvement",
+		"clickBounce": "Rebond au clic",
+		"clipToBounds": "Rogner au canevas"
+	},
+	"language": {
+		"title": "Langue"
+	}
+}
diff --git a/src/i18n/locales/fr/shortcuts.json b/src/i18n/locales/fr/shortcuts.json
new file mode 100644
index 0000000..a0ce83f
--- /dev/null
+++ b/src/i18n/locales/fr/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Raccourcis clavier",
+	"customize": "Personnaliser",
+	"configurable": "Configurable",
+	"fixed": "Fixe",
+	"pressKey": "Appuyez sur une touche…",
+	"clickToChange": "Cliquez pour modifier",
+	"pressEscToCancel": "Appuyez sur Échap pour annuler",
+	"helpText": "Cliquez sur un raccourci puis appuyez sur la nouvelle combinaison de touches. Appuyez sur Échap pour annuler.",
+	"resetToDefaults": "Réinitialiser les valeurs par défaut",
+	"alreadyUsedBy": "Déjà utilisé par {{action}}",
+	"swap": "Échanger",
+	"reservedShortcut": "Ce raccourci est réservé pour « {{label}} » et ne peut pas être réassigné.",
+	"savedToast": "Raccourcis clavier enregistrés",
+	"resetToast": "Réinitialisé aux raccourcis par défaut — cliquez sur Enregistrer pour appliquer",
+	"actions": {
+		"addZoom": "Ajouter un zoom",
+		"addTrim": "Ajouter une coupe",
+		"addSpeed": "Ajouter une vitesse",
+		"addAnnotation": "Ajouter une annotation",
+		"addBlur": "Ajouter un flou",
+		"addKeyframe": "Ajouter une image-clé",
+		"deleteSelected": "Supprimer la sélection",
+		"playPause": "Lecture / Pause"
+	},
+	"fixedActions": {
+		"undo": "Annuler",
+		"redo": "Rétablir",
+		"cycleAnnotationsForward": "Parcourir les annotations en avant",
+		"cycleAnnotationsBackward": "Parcourir les annotations en arrière",
+		"deleteSelectedAlt": "Supprimer la sélection (alt)",
+		"panTimeline": "Panoramique de la timeline",
+		"zoomTimeline": "Zoom de la timeline",
+		"frameBack": "Image précédente",
+		"frameForward": "Image suivante"
+	}
+}
diff --git a/src/i18n/locales/fr/timeline.json b/src/i18n/locales/fr/timeline.json
new file mode 100644
index 0000000..b4c6e16
--- /dev/null
+++ b/src/i18n/locales/fr/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Ajouter un zoom (Z)",
+		"suggestZooms": "Suggérer des zooms depuis le curseur",
+		"addTrim": "Ajouter une coupe (T)",
+		"addAnnotation": "Ajouter une annotation (A)",
+		"addSpeed": "Ajouter une vitesse (S)",
+		"addBlur": "Ajouter un flou (B)"
+	},
+	"hints": {
+		"pressZoom": "Appuyez sur Z pour ajouter un zoom",
+		"pressTrim": "Appuyez sur T pour ajouter une coupe",
+		"pressAnnotation": "Appuyez sur A pour ajouter une annotation",
+		"pressSpeed": "Appuyez sur S pour ajouter une vitesse",
+		"pressBlur": "Appuyez sur B pour ajouter une zone de flou"
+	},
+	"labels": {
+		"pan": "Panoramique",
+		"zoom": "Zoom",
+		"trim": "Couper",
+		"speed": "Vitesse",
+		"zoomItem": "Zoom {{index}}",
+		"trimItem": "Coupe {{index}}",
+		"speedItem": "Vitesse {{index}}",
+		"annotationItem": "Annotation",
+		"imageItem": "Image",
+		"emptyText": "Texte vide",
+		"blurItem": "Flou {{index}}"
+	},
+	"emptyState": {
+		"noVideo": "Aucune vidéo chargée",
+		"dragAndDrop": "Glissez-déposez une vidéo pour commencer à éditer"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Impossible de placer le zoom ici",
+		"zoomExistsAtLocation": "Un zoom existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant.",
+		"zoomSuggestionUnavailable": "Gestionnaire de suggestions de zoom non disponible",
+		"noCursorTelemetry": "Aucune télémétrie de curseur disponible",
+		"noCursorTelemetryDescription": "Enregistrez d\u0027abord un screencast pour générer des suggestions basées sur le curseur.",
+		"noUsableTelemetry": "Aucune télémétrie de curseur utilisable",
+		"noUsableTelemetryDescription": "L\u0027enregistrement ne contient pas suffisamment de données de mouvement du curseur.",
+		"noDwellMoments": "Aucun moment de pause du curseur trouvé",
+		"noDwellMomentsDescription": "Essayez un enregistrement avec des pauses plus lentes du curseur sur les actions importantes.",
+		"noAutoZoomSlots": "Aucun emplacement de zoom automatique disponible",
+		"noAutoZoomSlotsDescription": "Les points de pause détectés chevauchent des régions de zoom existantes.",
+		"cannotPlaceTrim": "Impossible de placer la coupe ici",
+		"trimExistsAtLocation": "Une coupe existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant.",
+		"cannotPlaceSpeed": "Impossible de placer la vitesse ici",
+		"speedExistsAtLocation": "Une région de vitesse existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant."
+	},
+	"success": {
+		"addedZoomSuggestions": "{{count}} suggestion de zoom basée sur le curseur ajoutée",
+		"addedZoomSuggestionsPlural": "{{count}} suggestions de zoom basées sur le curseur ajoutées"
+	}
+}
diff --git a/src/i18n/locales/it/common.json b/src/i18n/locales/it/common.json
new file mode 100644
index 0000000..c829a98
--- /dev/null
+++ b/src/i18n/locales/it/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "Annulla",
+		"save": "Salva",
+		"delete": "Elimina",
+		"close": "Chiudi",
+		"share": "Condividi",
+		"done": "Fatto",
+		"open": "Apri",
+		"upload": "Carica",
+		"export": "Esporta",
+		"showInFolder": "Mostra nella cartella",
+		"file": "File",
+		"edit": "Modifica",
+		"view": "Visualizza",
+		"window": "Finestra",
+		"quit": "Esci",
+		"stopRecording": "Interrompi registrazione",
+		"undo": "Annulla",
+		"redo": "Ripeti",
+		"cut": "Taglia",
+		"copy": "Copia",
+		"paste": "Incolla",
+		"selectAll": "Seleziona tutto",
+		"minimize": "Riduci a icona",
+		"reload": "Ricarica",
+		"forceReload": "Forza ricarica",
+		"toggleDevTools": "Attiva/disattiva strumenti sviluppatore",
+		"actualSize": "Dimensione effettiva",
+		"zoomIn": "Ingrandisci",
+		"zoomOut": "Riduci",
+		"toggleFullScreen": "Attiva/disattiva schermo intero",
+		"recordingStatus": "Registrazione: {{source}}",
+		"about": "Info su OpenScreen",
+		"services": "Servizi",
+		"hide": "Nascondi OpenScreen",
+		"hideOthers": "Nascondi gli altri",
+		"unhide": "Mostra tutto"
+	},
+	"playback": {
+		"play": "Riproduci",
+		"pause": "Pausa",
+		"fullscreen": "Schermo intero",
+		"exitFullscreen": "Esci dallo schermo intero"
+	},
+	"locale": {
+		"name": "Italiano",
+		"short": "IT"
+	}
+}
diff --git a/src/i18n/locales/it/dialogs.json b/src/i18n/locales/it/dialogs.json
new file mode 100644
index 0000000..5593b30
--- /dev/null
+++ b/src/i18n/locales/it/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "Esportazione completata",
+		"yourFormatReady": "Il tuo {{format}} è pronto",
+		"showInFolder": "Mostra nella cartella",
+		"finalizingVideo": "Finalizzazione esportazione video...",
+		"compilingGifProgress": "Compilazione GIF... {{progress}}%",
+		"compilingGifWait": "Compilazione GIF... Potrebbe richiedere del tempo",
+		"takeMoment": "Ci potrebbe impiegare un momento...",
+		"failed": "Esportazione fallita",
+		"tryAgain": "Riprova",
+		"finalizingVideoTitle": "Finalizzazione video",
+		"compilingGif": "Compilazione GIF",
+		"exportingFormat": "Esportazione {{format}}",
+		"compiling": "Compilazione",
+		"renderingFrames": "Rendering fotogrammi",
+		"processing": "Elaborazione...",
+		"finalizing": "Finalizzazione...",
+		"compilingStatus": "Compilazione...",
+		"status": "Stato",
+		"format": "Formato",
+		"frames": "Fotogrammi",
+		"cancelExport": "Annulla esportazione",
+		"savedSuccessfully": "{{format}} salvato con successo!"
+	},
+	"tutorial": {
+		"triggerLabel": "Come funziona il taglio",
+		"title": "Come funziona il taglio",
+		"description": "Capire come eliminare le parti indesiderate del tuo video.",
+		"explanationBefore": "Lo strumento Taglia funziona definendo i segmenti che vuoi",
+		"remove": "rimuovere",
+		"explanationMiddle": " — tutto ciò",
+		"covered": "coperto",
+		"explanationAfter": "da un segmento rosso verrà eliminato durante l'esportazione.",
+		"visualExample": "Esempio visivo",
+		"removed": "RIMOSSO",
+		"kept": "Mantenuto",
+		"part1": "Parte 1",
+		"part2": "Parte 2",
+		"part3": "Parte 3",
+		"finalVideo": "Video finale",
+		"step1Title": "1. Aggiungi taglio",
+		"step1DescriptionBefore": "Premi ",
+		"step1DescriptionAfter": " o clicca sull'icona delle forbici per contrassegnare una sezione da rimuovere.",
+		"step2Title": "2. Regolazione",
+		"step2Description": "Trascina i bordi della regione rossa per coprire esattamente ciò che vuoi eliminare."
+	},
+	"unsavedChanges": {
+		"title": "Modifiche non salvate",
+		"message": "Hai delle modifiche non salvate.",
+		"detail": "Vuoi salvare il progetto prima di chiudere?",
+		"saveAndClose": "Salva e chiudi",
+		"discardAndClose": "Scarta e chiudi",
+		"loadProject": "Carica progetto…",
+		"saveProject": "Salva progetto…",
+		"saveProjectAs": "Salva progetto come…"
+	},
+	"fileDialogs": {
+		"saveGif": "Salva GIF esportata",
+		"saveVideo": "Salva video esportato",
+		"selectVideo": "Seleziona file video",
+		"saveProject": "Salva progetto OpenScreen",
+		"openProject": "Apri progetto OpenScreen",
+		"gifImage": "Immagine GIF",
+		"mp4Video": "Video MP4",
+		"videoFiles": "File video",
+		"openscreenProject": "Progetto OpenScreen",
+		"allFiles": "Tutti i file"
+	}
+}
diff --git a/src/i18n/locales/it/editor.json b/src/i18n/locales/it/editor.json
new file mode 100644
index 0000000..336d3e6
--- /dev/null
+++ b/src/i18n/locales/it/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "Torna al registratore",
+		"description": "La sessione corrente è stata salvata.",
+		"cancel": "Annulla",
+		"confirm": "Conferma"
+	},
+	"loadingVideo": "Caricamento video...",
+	"errors": {
+		"noVideoLoaded": "Nessun video caricato",
+		"videoNotReady": "Video non pronto",
+		"unableToDetermineSourcePath": "Impossibile determinare il percorso del video sorgente",
+		"failedToSaveGif": "Impossibile salvare la GIF",
+		"gifExportFailed": "Esportazione GIF fallita",
+		"failedToSaveVideo": "Impossibile salvare il video",
+		"exportFailed": "Esportazione fallita",
+		"exportFailedWithError": "Esportazione fallita: {{error}}",
+		"exportBackgroundLoadFailed": "Esportazione fallita: impossibile caricare l'immagine di sfondo ({{url}})",
+		"failedToSaveExport": "Impossibile salvare l'esportazione",
+		"failedToSaveExportedVideo": "Impossibile salvare il video esportato",
+		"failedToRevealInFolder": "Errore durante la visualizzazione nella cartella: {{error}}"
+	},
+	"export": {
+		"canceled": "Esportazione annullata",
+		"exportedSuccessfully": "{{format}} esportato con successo"
+	},
+	"project": {
+		"saveCanceled": "Salvataggio progetto annullato",
+		"failedToSave": "Impossibile salvare il progetto",
+		"savedTo": "Progetto salvato in {{path}}",
+		"failedToLoad": "Impossibile caricare il progetto",
+		"invalidFormat": "Formato file progetto non valido",
+		"loadedFrom": "Progetto caricato da {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Impossibile richiedere l'accesso alla fotocamera.",
+		"cameraBlocked": "L'accesso alla fotocamera è bloccato. Abilita nelle impostazioni di sistema l'utilizzo della webcam.",
+		"systemAudioUnavailable": "Audio di sistema non disponibile. Registrazione senza audio di sistema.",
+		"microphoneDenied": "Accesso al microfono negato. La registrazione continuerà senza audio.",
+		"cameraDenied": "Accesso alla fotocamera negato. La registrazione continuerà senza webcam.",
+		"cameraDisconnected": "Webcam disconnessa.",
+		"cameraNotFound": "Fotocamera non trovata.",
+		"permissionDenied": "Autorizzazione di registrazione negata. Consenti la registrazione dello schermo.",
+		"accessibilityAllowAndRetry": "Consenti l'accesso all'accessibilità per OpenScreen, poi premi di nuovo registra per avviare il conto alla rovescia."
+	}
+}
diff --git a/src/i18n/locales/it/launch.json b/src/i18n/locales/it/launch.json
new file mode 100644
index 0000000..1d67909
--- /dev/null
+++ b/src/i18n/locales/it/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Nascondi",
+		"closeApp": "Chiudi app",
+		"restartRecording": "Riavvia registrazione",
+		"cancelRecording": "Annulla registrazione",
+		"pauseRecording": "Metti in pausa registrazione",
+		"resumeRecording": "Riprendi registrazione",
+		"openVideoFile": "Apri file video",
+		"openProject": "Apri progetto"
+	},
+	"audio": {
+		"enableSystemAudio": "Abilita audio di sistema",
+		"disableSystemAudio": "Disabilita audio di sistema",
+		"enableMicrophone": "Abilita microfono",
+		"disableMicrophone": "Disabilita microfono",
+		"defaultMicrophone": "Microfono predefinito"
+	},
+	"webcam": {
+		"enableWebcam": "Abilita webcam",
+		"disableWebcam": "Disabilita webcam",
+		"defaultCamera": "Fotocamera predefinita",
+		"searching": "Ricerca in corso...",
+		"noneFound": "Nessuna fotocamera trovata",
+		"unavailable": "Fotocamera non disponibile"
+	},
+	"cursor": {
+		"useEditableCursor": "Usa cursore modificabile",
+		"useSystemCursor": "Usa cursore di sistema"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "Caricamento sorgenti...",
+		"screens": "Schermi ({{count}})",
+		"windows": "Finestre ({{count}})",
+		"defaultSourceName": "Schermo"
+	},
+	"recording": {
+		"selectSource": "Seleziona una sorgente da registrare"
+	},
+	"language": "Lingua",
+	"systemLanguagePrompt": {
+		"title": "Usare la lingua del sistema?",
+		"description": "Abbiamo rilevato {{language}} come lingua del sistema. Vuoi passare OpenScreen a {{language}}?",
+		"switch": "Passa a {{language}}",
+		"keepDefault": "Mantieni la lingua corrente"
+	}
+}
diff --git a/src/i18n/locales/it/settings.json b/src/i18n/locales/it/settings.json
new file mode 100644
index 0000000..5c570b6
--- /dev/null
+++ b/src/i18n/locales/it/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "Tieni premuto per vedere l'effetto zoom",
+		"level": "Livello zoom",
+		"customScale": "Zoom personalizzato",
+		"selectRegion": "Seleziona una regione zoom da regolare",
+		"deleteZoom": "Elimina zoom",
+		"focusMode": {
+			"title": "Modalità messa a fuoco",
+			"manual": "Manuale",
+			"auto": "Automatico",
+			"autoDescription": "La fotocamera segue la posizione del cursore registrato"
+		},
+		"threeD": {
+			"title": "Rotazione 3D",
+			"preset": {
+				"iso": "Iso",
+				"left": "Sinistra",
+				"right": "Destra"
+			}
+		},
+		"position": {
+			"title": "Posizione messa a fuoco",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = più a sinistra / in alto, 100 = più a destra / in basso"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Velocità di riproduzione",
+		"selectRegion": "Seleziona una regione velocità da regolare",
+		"deleteRegion": "Elimina regione velocità",
+		"customPlaybackSpeed": "Velocità di riproduzione personalizzata",
+		"maxSpeedError": "La velocità non può superare 16×"
+	},
+	"trim": {
+		"deleteRegion": "Elimina regione taglio"
+	},
+	"layout": {
+		"title": "Layout",
+		"preset": "Predefinito",
+		"selectPreset": "Seleziona predefinito",
+		"pictureInPicture": "Immagine nell'immagine",
+		"verticalStack": "Pila verticale",
+		"dualFrame": "Doppio frame",
+		"noWebcam": "Nessuna webcam",
+		"webcamShape": "Forma fotocamera",
+		"webcamSize": "Dimensione webcam"
+	},
+	"effects": {
+		"title": "Effetti video",
+		"blurBg": "Sfuma sfondo",
+		"motionBlur": "Sfocatura movimento",
+		"off": "spento",
+		"on": "acceso",
+		"shadow": "Ombra",
+		"roundness": "Arrotondamento",
+		"padding": "Spaziatura"
+	},
+	"background": {
+		"title": "Sfondo",
+		"image": "Immagine",
+		"color": "Colore",
+		"gradient": "Sfumatura",
+		"uploadCustom": "Carica personalizzato",
+		"gradientLabel": "Sfumatura {{index}}",
+		"colorWheel": "Ruota dei colori",
+		"colorPalette": "Tavolozza dei colori"
+	},
+	"crop": {
+		"title": "Ritaglia",
+		"cropVideo": "Ritaglia video",
+		"dragInstruction": "Trascina su ogni lato per regolare l'area di ritaglio",
+		"ratio": "Proporzioni",
+		"free": "Libero",
+		"done": "Fatto",
+		"lockAspectRatio": "Blocca proporzioni",
+		"unlockAspectRatio": "Sblocca proporzioni"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "Video MP4",
+		"mp4Description": "File video di alta qualità",
+		"gifAnimation": "Animazione GIF",
+		"gifDescription": "Immagine animata per la condivisione"
+	},
+	"exportQuality": {
+		"title": "Risoluzione esportazione",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Originale"
+	},
+	"gifSettings": {
+		"frameRate": "Frequenza fotogrammi GIF",
+		"size": "Dimensione GIF",
+		"loop": "GIF in loop"
+	},
+	"project": {
+		"save": "Salva progetto",
+		"load": "Carica progetto"
+	},
+	"export": {
+		"videoButton": "Esporta video",
+		"gifButton": "Esporta GIF",
+		"chooseSaveLocation": "Scegli posizione di salvataggio"
+	},
+	"support": {
+		"reportBug": "Segnala bug",
+		"saveDiagnostics": "Salva dati diagnostici",
+		"starOnGithub": "Metti stella su GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Tipo di file non valido",
+		"jpgOnly": "Carica un file immagine JPG o JPEG.",
+		"uploadSuccess": "Immagine personalizzata caricata con successo!",
+		"failedToUpload": "Impossibile caricare l'immagine",
+		"errorReading": "Si è verificato un errore durante la lettura del file."
+	},
+	"annotation": {
+		"title": "Impostazioni annotazione",
+		"active": "Attivo",
+		"typeText": "Testo",
+		"typeImage": "Immagine",
+		"typeArrow": "Freccia",
+		"typeBlur": "Sfocatura",
+		"textContent": "Contenuto testo",
+		"textPlaceholder": "Inserisci il tuo testo...",
+		"fontStyle": "Stile carattere",
+		"selectStyle": "Seleziona stile",
+		"size": "Dimensione",
+		"customFonts": "Caratteri personalizzati",
+		"textColor": "Colore testo",
+		"background": "Sfondo",
+		"none": "Nessuno",
+		"color": "Colore",
+		"colorWheel": "Ruota dei colori",
+		"colorPalette": "Tavolozza dei colori",
+		"clearBackground": "Rimuovi sfondo",
+		"uploadImage": "Carica immagine",
+		"supportedFormats": "Formati supportati: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Direzione freccia",
+		"strokeWidth": "Larghezza tratto: {{width}}px",
+		"arrowColor": "Colore freccia",
+		"blurType": "Tipo sfocatura",
+		"blurTypeBlur": "Sfocatura",
+		"blurTypeMosaic": "Sfocatura mosaico",
+		"blurColor": "Colore sfocatura",
+		"blurColorWhite": "Bianco",
+		"blurColorBlack": "Nero",
+		"blurShape": "Forma sfocatura",
+		"blurIntensity": "Intensità sfocatura",
+		"mosaicBlockSize": "Dimensione blocco mosaico",
+		"blurShapeRectangle": "Rettangolo",
+		"blurShapeOval": "Ovale",
+		"blurShapeFreehand": "A mano libera",
+		"deleteAnnotation": "Elimina annotazione",
+		"shortcutsAndTips": "Scorciatoie e suggerimenti",
+		"tipMovePlayhead": "Sposta la testina di riproduzione sulla sezione di annotazione sovrapposta e seleziona un elemento.",
+		"tipTabCycle": "Usa Tab per scorrere gli elementi sovrapposti.",
+		"tipShiftTabCycle": "Usa Maiusc+Tab per scorrere all'indietro.",
+		"invalidImageType": "Tipo di file non valido",
+		"imageFormatsOnly": "Carica un file immagine JPG, PNG, GIF o WebP.",
+		"imageUploadSuccess": "Immagine caricata con successo!",
+		"failedImageUpload": "Impossibile caricare l'immagine"
+	},
+	"fontStyles": {
+		"classic": "Classico",
+		"editor": "Editor",
+		"strong": "Forte",
+		"typewriter": "Macchina da scrivere",
+		"deco": "Deco",
+		"simple": "Semplice",
+		"modern": "Moderno",
+		"clean": "Pulito"
+	},
+	"customFont": {
+		"dialogTitle": "Aggiungi font Google",
+		"urlLabel": "URL importazione Google Fonts",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Ottieni questo da Google Fonts: Seleziona un font → Clicca \"Ottieni font\" → Copia l'URL @import",
+		"nameLabel": "Nome visualizzato",
+		"namePlaceholder": "Il mio font personalizzato",
+		"nameHelp": "Così apparirà il font nel selettore",
+		"addButton": "Aggiungi font",
+		"addingButton": "Aggiunta in corso...",
+		"errorEmptyUrl": "Inserisci un URL di importazione Google Fonts",
+		"errorInvalidUrl": "Inserisci un URL Google Fonts valido",
+		"errorEmptyName": "Inserisci un nome per il font",
+		"errorExtractFailed": "Impossibile estrarre la famiglia di font dall'URL",
+		"successMessage": "Font \"{{fontName}}\" aggiunto con successo",
+		"failedToAdd": "Impossibile aggiungere il font",
+		"errorTimeout": "Il font ha impiegato troppo tempo a caricarsi. Controlla l'URL e riprova.",
+		"errorLoadFailed": "Impossibile caricare il font. Verifica che l'URL di Google Fonts sia corretto."
+	},
+	"cursor": {
+		"show": "Mostra cursore",
+		"size": "Dimensione",
+		"smoothing": "Smussatura",
+		"motionBlur": "Sfocatura movimento",
+		"clickBounce": "Rimbalzo clic",
+		"clipToBounds": "Ritaglia al canvas"
+	},
+	"language": {
+		"title": "Lingua"
+	}
+}
diff --git a/src/i18n/locales/it/shortcuts.json b/src/i18n/locales/it/shortcuts.json
new file mode 100644
index 0000000..4d0c65d
--- /dev/null
+++ b/src/i18n/locales/it/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Scorciatoie tastiera",
+	"customize": "Personalizza",
+	"configurable": "Configurabile",
+	"fixed": "Fisso",
+	"pressKey": "Premi un tasto…",
+	"clickToChange": "Clicca per cambiare",
+	"pressEscToCancel": "Premi Esc per annullare",
+	"helpText": "Clicca una scorciatoia e premi la nuova combinazione di tasti. Premi Esc per annullare.",
+	"resetToDefaults": "Ripristina predefiniti",
+	"alreadyUsedBy": "Già utilizzata da {{action}}",
+	"swap": "Scambia",
+	"reservedShortcut": "Questa scorciatoia è riservata a \"{{label}}\" e non può essere riassegnata.",
+	"savedToast": "Scorciatoie tastiera salvate",
+	"resetToast": "Ripristino alle scorciatoie predefinite — clicca Salva per applicare",
+	"actions": {
+		"addZoom": "Aggiungi zoom",
+		"addTrim": "Aggiungi taglio",
+		"addSpeed": "Aggiungi velocità",
+		"addAnnotation": "Aggiungi annotazione",
+		"addBlur": "Aggiungi sfocatura",
+		"addKeyframe": "Aggiungi fotogramma chiave",
+		"deleteSelected": "Elimina selezionato",
+		"playPause": "Riproduci / Pausa"
+	},
+	"fixedActions": {
+		"undo": "Annulla",
+		"redo": "Ripeti",
+		"cycleAnnotationsForward": "Scorri annotazioni in avanti",
+		"cycleAnnotationsBackward": "Scorri annotazioni indietro",
+		"deleteSelectedAlt": "Elimina selezionato (alt)",
+		"panTimeline": "Panoramica timeline",
+		"zoomTimeline": "Zoom timeline",
+		"frameBack": "Fotogramma indietro",
+		"frameForward": "Fotogramma avanti"
+	}
+}
diff --git a/src/i18n/locales/it/timeline.json b/src/i18n/locales/it/timeline.json
new file mode 100644
index 0000000..499a39a
--- /dev/null
+++ b/src/i18n/locales/it/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Aggiungi zoom (Z)",
+		"suggestZooms": "Suggerisci zoom dal cursore",
+		"addTrim": "Aggiungi taglio (T)",
+		"addAnnotation": "Aggiungi annotazione (A)",
+		"addBlur": "Aggiungi sfocatura (B)",
+		"addSpeed": "Aggiungi velocità (S)"
+	},
+	"hints": {
+		"pressZoom": "Premi Z per aggiungere zoom",
+		"pressTrim": "Premi T per aggiungere taglio",
+		"pressAnnotation": "Premi A per aggiungere annotazione",
+		"pressBlur": "Premi B per aggiungere regione sfocatura",
+		"pressSpeed": "Premi S per aggiungere velocità"
+	},
+	"labels": {
+		"pan": "Panoramica",
+		"zoom": "Zoom",
+		"trim": "Taglio",
+		"speed": "Velocità",
+		"zoomItem": "Zoom {{index}}",
+		"trimItem": "Taglio {{index}}",
+		"speedItem": "Velocità {{index}}",
+		"annotationItem": "Annotazione",
+		"blurItem": "Sfocatura {{index}}",
+		"imageItem": "Immagine",
+		"emptyText": "Testo vuoto"
+	},
+	"emptyState": {
+		"noVideo": "Nessun video caricato",
+		"dragAndDrop": "Trascina e rilascia un video per iniziare a modificare"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Impossibile posizionare lo zoom qui",
+		"zoomExistsAtLocation": "Lo zoom esiste già in questa posizione o non c'è spazio sufficiente.",
+		"zoomSuggestionUnavailable": "Gestore suggerimenti zoom non disponibile",
+		"noCursorTelemetry": "Nessuna telemetria del cursore disponibile",
+		"noCursorTelemetryDescription": "Registra prima uno screencast per generare suggerimenti basati sul cursore.",
+		"noUsableTelemetry": "Nessuna telemetria del cursore utilizzabile",
+		"noUsableTelemetryDescription": "La registrazione non include dati sufficienti sul movimento del cursore.",
+		"noDwellMoments": "Nessun momento di sosta del cursore trovato",
+		"noDwellMomentsDescription": "Prova una registrazione con pause del cursore più lente sulle azioni importanti.",
+		"noAutoZoomSlots": "Nessuno slot di zoom automatico disponibile",
+		"noAutoZoomSlotsDescription": "I punti di sosta rilevati si sovrappongono alle regioni zoom esistenti.",
+		"cannotPlaceTrim": "Impossibile posizionare il taglio qui",
+		"trimExistsAtLocation": "Il taglio esiste già in questa posizione o non c'è spazio sufficiente.",
+		"cannotPlaceSpeed": "Impossibile posizionare la velocità qui",
+		"speedExistsAtLocation": "La regione velocità esiste già in questa posizione o non c'è spazio sufficiente."
+	},
+	"success": {
+		"addedZoomSuggestions": "Aggiunto {{count}} suggerimento zoom basato sul cursore",
+		"addedZoomSuggestionsPlural": "Aggiunti {{count}} suggerimenti zoom basati sul cursore"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/common.json b/src/i18n/locales/ja-JP/common.json
new file mode 100644
index 0000000..74bd986
--- /dev/null
+++ b/src/i18n/locales/ja-JP/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "キャンセル",
+		"save": "保存",
+		"delete": "削除",
+		"close": "閉じる",
+		"share": "共有",
+		"done": "完了",
+		"open": "開く",
+		"upload": "読み込む",
+		"export": "エクスポート",
+		"showInFolder": "フォルダに表示",
+		"file": "ファイル",
+		"edit": "編集",
+		"view": "表示",
+		"window": "ウィンドウ",
+		"quit": "終了",
+		"stopRecording": "録画を停止",
+		"undo": "元に戻す",
+		"redo": "やり直す",
+		"cut": "切り取り",
+		"copy": "コピー",
+		"paste": "貼り付け",
+		"selectAll": "すべて選択",
+		"minimize": "最小化",
+		"reload": "再読み込み",
+		"forceReload": "強制再読み込み",
+		"toggleDevTools": "開発者ツールを切り替え",
+		"actualSize": "実際のサイズ",
+		"zoomIn": "拡大",
+		"zoomOut": "縮小",
+		"toggleFullScreen": "フルスクリーンを切り替え",
+		"recordingStatus": "録画中: {{source}}",
+		"about": "OpenScreenについて",
+		"services": "サービス",
+		"hide": "OpenScreenを隠す",
+		"hideOthers": "ほかを隠す",
+		"unhide": "すべて表示"
+	},
+	"playback": {
+		"play": "再生",
+		"pause": "一時停止",
+		"fullscreen": "全画面表示",
+		"exitFullscreen": "全画面表示を終了"
+	},
+	"locale": {
+		"name": "日本語",
+		"short": "JA"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/dialogs.json b/src/i18n/locales/ja-JP/dialogs.json
new file mode 100644
index 0000000..a59cde7
--- /dev/null
+++ b/src/i18n/locales/ja-JP/dialogs.json
@@ -0,0 +1,71 @@
+{
+	"export": {
+		"complete": "エクスポート完了",
+		"yourFormatReady": "{{format}}の準備ができました",
+		"showInFolder": "フォルダで表示",
+		"finalizingVideo": "動画のエクスポートを仕上げています...",
+		"compilingGifProgress": "GIFを生成中... {{progress}}%",
+		"compilingGifWait": "GIFを生成中... しばらくお待ちください",
+		"takeMoment": "少々お待ちください...",
+		"failed": "エクスポートに失敗しました",
+		"tryAgain": "もう一度お試しください",
+		"finalizingVideoTitle": "動画の仕上げ",
+		"compilingGif": "GIFを生成中",
+		"exportingFormat": "{{format}}をエクスポート中",
+		"compiling": "生成中",
+		"renderingFrames": "フレームをレンダリング中",
+		"processing": "処理中...",
+		"finalizing": "最終処理中...",
+		"compilingStatus": "生成中...",
+		"status": "ステータス",
+		"format": "フォーマット",
+		"frames": "フレーム",
+		"cancelExport": "エクスポートをキャンセル",
+		"savedSuccessfully": "{{format}}を正常に保存しました！"
+	},
+	"tutorial": {
+		"triggerLabel": "トリミングの仕組み",
+		"title": "トリミングの仕組み",
+		"description": "動画の不要な部分を削除する方法について解説します。",
+		"explanationBefore": "トリムツールは、動画から",
+		"remove": "「削除したい部分」",
+		"explanationMiddle": "を指定することで機能します。エクスポート時には、赤い枠で",
+		"covered": "囲まれた部分",
+		"explanationAfter": "がすべてカットされます。",
+		"visualExample": "視覚的な例",
+		"removed": "削除",
+		"kept": "保持",
+		"part1": "パート 1",
+		"part2": "パート 2",
+		"part3": "パート 3",
+		"finalVideo": "完成動画",
+		"step1Title": "1. 削除範囲を追加",
+		"step1DescriptionBefore": "キーボードの",
+		"step1DescriptionAfter": "、またはハサミのアイコンをクリックして、削除したい範囲を指定します。",
+
+		"step2Title": "2. 範囲を調整",
+		"step2Description": "赤い領域の両端をドラッグして、削除したい範囲を正確に調整します。"
+	},
+	"unsavedChanges": {
+		"title": "未保存の変更",
+		"message": "未保存の変更があります。",
+		"detail": "閉じる前にプロジェクトを保存しますか？",
+		"saveAndClose": "保存して閉じる",
+		"discardAndClose": "破棄して閉じる",
+		"loadProject": "プロジェクトを読み込む…",
+		"saveProject": "プロジェクトを保存…",
+		"saveProjectAs": "プロジェクトを名前を付けて保存…"
+	},
+	"fileDialogs": {
+		"saveGif": "エクスポートしたGIFを保存",
+		"saveVideo": "エクスポートした動画を保存",
+		"selectVideo": "動画ファイルを選択",
+		"saveProject": "OpenScreen プロジェクトを保存",
+		"openProject": "OpenScreen プロジェクトを開く",
+		"gifImage": "GIF 画像",
+		"mp4Video": "MP4 動画",
+		"videoFiles": "動画ファイル",
+		"openscreenProject": "OpenScreen プロジェクト",
+		"allFiles": "すべてのファイル"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/editor.json b/src/i18n/locales/ja-JP/editor.json
new file mode 100644
index 0000000..d37e132
--- /dev/null
+++ b/src/i18n/locales/ja-JP/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "レコーダーに戻る",
+		"description": "現在の作業内容が保存されました。",
+		"cancel": "キャンセル",
+		"confirm": "確認"
+	},
+	"loadingVideo": "動画を読み込み中...",
+	"errors": {
+		"noVideoLoaded": "動画が読み込まれていません",
+		"videoNotReady": "動画の準備ができていません",
+		"unableToDetermineSourcePath": "元動画のパスを特定できません",
+		"failedToSaveGif": "GIFの保存に失敗しました",
+		"gifExportFailed": "GIFのエクスポートに失敗しました",
+		"failedToSaveVideo": "動画の保存に失敗しました",
+		"exportFailed": "エクスポートに失敗しました",
+		"exportFailedWithError": "エクスポートに失敗しました: {{error}}",
+		"failedToSaveExport": "エクスポートの保存に失敗しました",
+		"failedToSaveExportedVideo": "エクスポートした動画の保存に失敗しました",
+		"failedToRevealInFolder": "フォルダの表示に失敗しました: {{error}}",
+		"exportBackgroundLoadFailed": "エクスポートに失敗しました: 背景画像を読み込めませんでした ({{url}})"
+	},
+	"export": {
+		"canceled": "エクスポートがキャンセルされました",
+		"exportedSuccessfully": "{{format}}を正常にエクスポートしました"
+	},
+	"project": {
+		"saveCanceled": "プロジェクトの保存がキャンセルされました",
+		"failedToSave": "プロジェクトの保存に失敗しました",
+		"savedTo": "プロジェクトを保存しました: {{path}}",
+		"failedToLoad": "プロジェクトの読み込みに失敗しました",
+		"invalidFormat": "無効なプロジェクトファイル形式です",
+		"loadedFrom": "プロジェクトを読み込みました: {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "カメラのアクセス要求に失敗しました。",
+		"cameraBlocked": "カメラのアクセスがブロックされています。システム設定で有効にして、ウェブカメラを使用してください。",
+		"systemAudioUnavailable": "システム音声を利用できません。システム音声なしで録画します。",
+		"microphoneDenied": "マイクへのアクセスが拒否されました。音声なしで録画を続行します。",
+		"cameraDenied": "カメラのアクセスが拒否されました。ウェブカメラなしで録画を続行します。",
+		"permissionDenied": "録画の権限が拒否されました。画面録画を許可してください。",
+		"cameraDisconnected": "ウェブカメラが切断されました。",
+		"cameraNotFound": "カメラが見つかりません。",
+		"accessibilityAllowAndRetry": "OpenScreenにアクセシビリティアクセスを許可してから、もう一度録画を押してカウントダウンを開始してください。"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/launch.json b/src/i18n/locales/ja-JP/launch.json
new file mode 100644
index 0000000..01cd711
--- /dev/null
+++ b/src/i18n/locales/ja-JP/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "HUDを隠す",
+		"closeApp": "アプリを閉じる",
+		"restartRecording": "録画を再開",
+		"cancelRecording": "録画をキャンセル",
+		"pauseRecording": "録画を一時停止",
+		"resumeRecording": "録画を再開",
+		"openVideoFile": "動画ファイルを開く",
+		"openProject": "プロジェクトを開く"
+	},
+	"audio": {
+		"enableSystemAudio": "システム音声を有効にする",
+		"disableSystemAudio": "システム音声を無効にする",
+		"enableMicrophone": "マイクを有効にする",
+		"disableMicrophone": "マイクを無効にする",
+		"defaultMicrophone": "デフォルトのマイク"
+	},
+	"webcam": {
+		"enableWebcam": "ウェブカメラを有効にする",
+		"disableWebcam": "ウェブカメラを無効にする",
+		"defaultCamera": "デフォルトのカメラ",
+		"searching": "検索中...",
+		"noneFound": "カメラが見つかりません",
+		"unavailable": "カメラが利用できません"
+	},
+	"cursor": {
+		"useEditableCursor": "編集可能なカーソルを使う",
+		"useSystemCursor": "システムカーソルを使う"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "ソースを読み込み中...",
+		"screens": "画面 ({{count}})",
+		"windows": "ウィンドウ ({{count}})",
+		"defaultSourceName": "画面"
+	},
+	"recording": {
+		"selectSource": "録画するソースを選択してください"
+	},
+	"language": "言語",
+	"systemLanguagePrompt": {
+		"title": "システム言語を使用しますか？",
+		"description": "システム言語として{{language}}が検出されました。OpenScreenを{{language}}に切り替えますか？",
+		"switch": "{{language}}に切り替え",
+		"keepDefault": "現在の言語を保持"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/settings.json b/src/i18n/locales/ja-JP/settings.json
new file mode 100644
index 0000000..697e1ac
--- /dev/null
+++ b/src/i18n/locales/ja-JP/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "押している間ズーム効果をプレビュー",
+		"level": "ズーム倍率",
+		"selectRegion": "ズーム範囲を選択して調整",
+		"deleteZoom": "ズームを削除",
+		"focusMode": {
+			"title": "フォーカスモード",
+			"manual": "手動",
+			"auto": "自動",
+			"autoDescription": "表示範囲が録画中のカーソル位置に追従します"
+		},
+		"threeD": {
+			"title": "3D回転",
+			"preset": {
+				"iso": "Iso",
+				"left": "左",
+				"right": "右"
+			}
+		},
+		"customScale": "カスタムズーム",
+		"position": {
+			"title": "フォーカス位置",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = 左端 / 上端、100 = 右端 / 下端"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "再生速度",
+		"selectRegion": "再生速度の範囲を選択して調整",
+		"deleteRegion": "再生速度の範囲を削除",
+		"customPlaybackSpeed": "カスタム再生速度",
+		"maxSpeedError": "速度は16×を超えることはできません"
+	},
+	"trim": {
+		"deleteRegion": "トリム範囲を削除"
+	},
+	"layout": {
+		"title": "レイアウト",
+		"preset": "プリセット",
+		"selectPreset": "プリセットを選択",
+		"pictureInPicture": "ピクチャーインピクチャ",
+		"verticalStack": "縦並び",
+		"dualFrame": "デュアルフレーム",
+		"webcamShape": "カメラの形状",
+		"webcamSize": "カメラのサイズ",
+		"noWebcam": "Webカメラなし"
+	},
+	"effects": {
+		"title": "動画効果",
+		"blurBg": "背景をぼかす",
+		"motionBlur": "モーションブラー",
+		"off": "オフ",
+		"shadow": "影",
+		"roundness": "丸み",
+		"padding": "余白",
+		"on": "オン"
+	},
+	"background": {
+		"title": "背景",
+		"image": "画像",
+		"color": "色",
+		"gradient": "グラデーション",
+		"uploadCustom": "カスタム画像を読み込む",
+		"gradientLabel": "グラデーション {{index}}",
+		"colorWheel": "カラーホイール",
+		"colorPalette": "カラーパレット"
+	},
+	"crop": {
+		"title": "クロップ",
+		"cropVideo": "動画をクロップ",
+		"dragInstruction": "各辺をドラッグしてクロップ範囲を調整",
+		"ratio": "比率",
+		"free": "自由",
+		"done": "完了",
+		"lockAspectRatio": "アスペクト比を固定",
+		"unlockAspectRatio": "アスペクト比の固定を解除"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 動画",
+		"mp4Description": "高品質の動画ファイル",
+		"gifAnimation": "GIF アニメーション",
+		"gifDescription": "共有用のアニメーション画像"
+	},
+	"exportQuality": {
+		"title": "書き出し解像度",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "GIF フレームレート",
+		"size": "GIF サイズ",
+		"loop": "GIF をループする"
+	},
+	"project": {
+		"save": "プロジェクトを保存",
+		"load": "プロジェクトを読み込む"
+	},
+	"export": {
+		"videoButton": "動画をエクスポート",
+		"gifButton": "GIF をエクスポート",
+		"chooseSaveLocation": "保存場所を選択"
+	},
+	"support": {
+		"reportBug": "バグを報告",
+		"saveDiagnostics": "診断情報を保存",
+		"starOnGithub": "GitHub でスターを付ける"
+	},
+	"imageUpload": {
+		"invalidFileType": "無効なファイル形式",
+		"jpgOnly": "JPG、PNG、GIF、またはWebP画像ファイルを選択してください。",
+		"uploadSuccess": "カスタム画像を読み込みました。",
+		"failedToUpload": "画像の読み込みに失敗しました",
+		"errorReading": "ファイルの読み取り中にエラーが発生しました。"
+	},
+	"annotation": {
+		"title": "注釈設定",
+		"active": "アクティブ",
+		"typeText": "テキスト",
+		"typeImage": "画像",
+		"typeArrow": "矢印",
+		"typeBlur": "ぼかし",
+		"textContent": "テキスト内容",
+		"textPlaceholder": "テキストを入力してください...",
+		"fontStyle": "フォントスタイル",
+		"selectStyle": "スタイルを選択",
+		"size": "サイズ",
+		"customFonts": "カスタムフォント",
+		"textColor": "文字色",
+		"background": "背景",
+		"none": "なし",
+		"color": "色",
+		"colorWheel": "カラーホイール",
+		"colorPalette": "カラーパレット",
+		"clearBackground": "背景をクリア",
+		"uploadImage": "画像を読み込む",
+		"supportedFormats": "サポートされている形式: JPG, PNG, GIF, WebP",
+		"arrowDirection": "矢印の方向",
+		"strokeWidth": "線の太さ: {{width}}px",
+		"arrowColor": "矢印の色",
+		"blurType": "ぼかしの種類",
+		"blurTypeBlur": "ぼかし",
+		"blurTypeMosaic": "モザイクぼかし",
+		"blurColor": "ぼかしの色",
+		"blurColorWhite": "白",
+		"blurColorBlack": "黒",
+		"blurShape": "ぼかしの形状",
+		"blurIntensity": "ぼかしの強さ",
+		"mosaicBlockSize": "モザイクブロックのサイズ",
+		"blurShapeRectangle": "長方形",
+		"blurShapeOval": "楕円",
+		"blurShapeFreehand": "自由形状",
+		"deleteAnnotation": "注釈を削除",
+		"shortcutsAndTips": "ショートカットとヒント",
+		"tipMovePlayhead": "重なっている注釈セクションに再生ヘッドを移動し、項目を選択します。",
+		"tipTabCycle": "Tabキーを使用して重なっている項目を順に切り替えます。",
+		"tipShiftTabCycle": "Shift+Tabキーを使用して逆順に切り替えます。",
+		"invalidImageType": "無効なファイル形式",
+		"imageFormatsOnly": "JPG、PNG、GIF、またはWebP画像ファイルを選択してください。",
+		"imageUploadSuccess": "画像を読み込みました。",
+		"failedImageUpload": "画像の読み込みに失敗しました"
+	},
+	"fontStyles": {
+		"classic": "クラシック",
+		"editor": "エディター",
+		"strong": "ストロング",
+		"typewriter": "タイプライター",
+		"deco": "デコ",
+		"simple": "シンプル",
+		"modern": "モダン",
+		"clean": "クリーン"
+	},
+	"customFont": {
+		"dialogTitle": "Googleフォントを追加",
+		"urlLabel": "GoogleフォントのインポートURL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Googleフォントから取得: フォントを選択 → 「フォントを取得」をクリック → @import URLをコピー",
+		"nameLabel": "表示名",
+		"namePlaceholder": "マイカスタムフォント",
+		"nameHelp": "フォントセレクターに表示される名前です",
+		"addButton": "フォントを追加",
+		"addingButton": "追加中...",
+		"errorEmptyUrl": "GoogleフォントのインポートURLを入力してください",
+		"errorInvalidUrl": "有効なGoogleフォントURLを入力してください",
+		"errorEmptyName": "フォント名を入力してください",
+		"errorExtractFailed": "URLからフォントファミリーを抽出できませんでした",
+		"successMessage": "フォント \"{{fontName}}\" が正常に追加されました",
+		"failedToAdd": "フォントの追加に失敗しました",
+		"errorTimeout": "フォントの読み込みに時間がかかりすぎました。URLを確認して再試行してください。",
+		"errorLoadFailed": "フォントを読み込めませんでした。GoogleフォントのURLが正しいことを確認してください。"
+	},
+	"cursor": {
+		"show": "カーソルを表示",
+		"size": "サイズ",
+		"smoothing": "スムージング",
+		"motionBlur": "モーションブラー",
+		"clickBounce": "クリックバウンス",
+		"clipToBounds": "キャンバスにクリップ"
+	},
+	"language": {
+		"title": "言語"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/shortcuts.json b/src/i18n/locales/ja-JP/shortcuts.json
new file mode 100644
index 0000000..d4b4a90
--- /dev/null
+++ b/src/i18n/locales/ja-JP/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "キーボードショートカット",
+	"customize": "カスタマイズ",
+	"configurable": "設定可能",
+	"fixed": "固定",
+	"pressKey": "キーを押してください…",
+	"clickToChange": "クリックして変更",
+	"pressEscToCancel": "Escキーを押してキャンセル",
+	"helpText": "ショートカットをクリックして新しいキーの組み合わせを押します。Escキーを押してキャンセルします。",
+	"resetToDefaults": "デフォルトにリセット",
+	"alreadyUsedBy": "すでに {{action}} に使用されています",
+	"swap": "入れ替え",
+	"reservedShortcut": "このショートカットは \"{{label}}\" に予約されており、再割り当てできません。",
+	"savedToast": "キーボードショートカットが保存されました",
+	"resetToast": "デフォルトのショートカットにリセット — 保存をクリックして適用",
+	"actions": {
+		"addZoom": "ズームを追加",
+		"addTrim": "トリムを追加",
+		"addSpeed": "速度を追加",
+		"addAnnotation": "注釈を追加",
+		"addBlur": "ぼかしを追加",
+		"addKeyframe": "キーフレームを追加",
+		"deleteSelected": "選択を削除",
+		"playPause": "再生 / 一時停止"
+	},
+	"fixedActions": {
+		"undo": "元に戻す",
+		"redo": "やり直す",
+		"cycleAnnotationsForward": "注釈を順に切り替え",
+		"cycleAnnotationsBackward": "注釈を逆順に切り替え",
+		"deleteSelectedAlt": "選択を削除 (alt)",
+		"panTimeline": "タイムラインをパン",
+		"zoomTimeline": "タイムラインをズーム",
+		"frameBack": "フレームを戻す",
+		"frameForward": "フレームを進める"
+	}
+}
diff --git a/src/i18n/locales/ja-JP/timeline.json b/src/i18n/locales/ja-JP/timeline.json
new file mode 100644
index 0000000..ec9472a
--- /dev/null
+++ b/src/i18n/locales/ja-JP/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "ズームを追加 (Z)",
+		"suggestZooms": "カーソル位置からズームを提案",
+		"addTrim": "トリムを追加 (T)",
+		"addAnnotation": "注釈を追加 (A)",
+		"addBlur": "ぼかしを追加 (B)",
+		"addSpeed": "再生速度を追加 (S)"
+	},
+	"hints": {
+		"pressZoom": "Zキーを押してズームを追加",
+		"pressTrim": "Tキーを押してトリムを追加",
+		"pressAnnotation": "Aキーを押して注釈を追加",
+		"pressBlur": "Bキーを押してぼかしを追加",
+		"pressSpeed": "Sキーを押して再生速度を追加"
+	},
+	"labels": {
+		"pan": "移動",
+		"zoom": "ズーム",
+		"trim": "トリム",
+		"speed": "再生速度",
+		"zoomItem": "ズーム {{index}}",
+		"trimItem": "トリム {{index}}",
+		"speedItem": "再生速度 {{index}}",
+		"annotationItem": "注釈",
+		"blurItem": "ぼかし {{index}}",
+		"imageItem": "画像",
+		"emptyText": "空のテキスト"
+	},
+	"emptyState": {
+		"noVideo": "ビデオが読み込まれていません",
+		"dragAndDrop": "ビデオをドラッグアンドドロップして編集を開始してください"
+	},
+	"errors": {
+		"cannotPlaceZoom": "ここにズームを配置できません",
+		"zoomExistsAtLocation": "この場所にはすでにズームが存在するか、十分なスペースがありません。",
+		"zoomSuggestionUnavailable": "ズームの自動提案機能が利用できません",
+		"noCursorTelemetry": "カーソルの動きが記録されていません",
+		"noCursorTelemetryDescription": "まず画面録画を行い、カーソルに基づく提案を生成してください。",
+		"noUsableTelemetry": "使用可能なカーソルの動きデータがありません",
+		"noUsableTelemetryDescription": "録画には十分なカーソルの動きデータが含まれていません。",
+		"noDwellMoments": "カーソルが静止したポイントが見つかりません",
+		"noDwellMomentsDescription": "強調したい操作の際に、カーソルを一時停止させて録画してみてください。",
+		"noAutoZoomSlots": "自動ズームを適用できる箇所がありません",
+		"noAutoZoomSlotsDescription": "検出された滞留ポイントが既存のズーム領域と重なっています。",
+		"cannotPlaceTrim": "ここにトリムを配置できません",
+		"trimExistsAtLocation": "この場所にはすでにトリムが存在するか、十分なスペースがありません。",
+		"cannotPlaceSpeed": "ここに再生速度を配置できません",
+		"speedExistsAtLocation": "この場所にはすでに再生速度の範囲が存在するか、十分なスペースがありません。"
+	},
+	"success": {
+		"addedZoomSuggestions": "カーソルに基づくズーム提案を {{count}} 件追加しました",
+		"addedZoomSuggestionsPlural": "カーソルに基づくズーム提案を {{count}} 件追加しました"
+	}
+}
diff --git a/src/i18n/locales/ko-KR/common.json b/src/i18n/locales/ko-KR/common.json
new file mode 100644
index 0000000..8f8fb69
--- /dev/null
+++ b/src/i18n/locales/ko-KR/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "취소",
+		"save": "저장",
+		"delete": "삭제",
+		"close": "닫기",
+		"share": "공유",
+		"done": "완료",
+		"open": "열기",
+		"upload": "업로드",
+		"export": "내보내기",
+		"showInFolder": "폴더에 표시",
+		"file": "파일",
+		"edit": "편집",
+		"view": "보기",
+		"window": "창",
+		"quit": "종료",
+		"stopRecording": "녹화 중지",
+		"undo": "실행 취소",
+		"redo": "다시 실행",
+		"cut": "잘라내기",
+		"copy": "복사",
+		"paste": "붙여넣기",
+		"selectAll": "모두 선택",
+		"minimize": "최소화",
+		"reload": "새로고침",
+		"forceReload": "강제 새로고침",
+		"toggleDevTools": "개발자 도구 전환",
+		"actualSize": "실제 크기",
+		"zoomIn": "확대",
+		"zoomOut": "축소",
+		"toggleFullScreen": "전체 화면 전환",
+		"recordingStatus": "녹화 중: {{source}}",
+		"about": "OpenScreen 정보",
+		"services": "서비스",
+		"hide": "OpenScreen 숨기기",
+		"hideOthers": "다른 항목 숨기기",
+		"unhide": "모두 보기"
+	},
+	"playback": {
+		"play": "재생",
+		"pause": "일시정지",
+		"fullscreen": "전체화면",
+		"exitFullscreen": "전체화면 종료"
+	},
+	"locale": {
+		"name": "한국어",
+		"short": "KO"
+	}
+}
diff --git a/src/i18n/locales/ko-KR/dialogs.json b/src/i18n/locales/ko-KR/dialogs.json
new file mode 100644
index 0000000..3093cdf
--- /dev/null
+++ b/src/i18n/locales/ko-KR/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "내보내기 완료",
+		"yourFormatReady": "{{format}} 파일이 준비되었습니다",
+		"showInFolder": "폴더에서 보기",
+		"finalizingVideo": "비디오 내보내기 마무리 중...",
+		"compilingGifProgress": "GIF 생성 중... {{progress}}%",
+		"compilingGifWait": "GIF 생성 중... 잠시 시간이 걸릴 수 있습니다",
+		"takeMoment": "잠시 기다려 주세요...",
+		"failed": "내보내기 실패",
+		"tryAgain": "다시 시도해 주세요",
+		"finalizingVideoTitle": "비디오 마무리 중",
+		"compilingGif": "GIF 생성 중",
+		"exportingFormat": "{{format}} 내보내는 중",
+		"compiling": "생성 중...",
+		"renderingFrames": "프레임 렌더링 중",
+		"processing": "처리 중...",
+		"finalizing": "마무리 중...",
+		"compilingStatus": "생성 중...",
+		"status": "상태",
+		"format": "형식",
+		"frames": "프레임",
+		"cancelExport": "내보내기 취소",
+		"savedSuccessfully": "{{format}} 저장이 완료되었습니다!"
+	},
+	"tutorial": {
+		"triggerLabel": "트리밍 사용법",
+		"title": "트리밍 사용법",
+		"description": "비디오에서 불필요한 부분을 잘라내는 방법을 알아보세요.",
+		"explanationBefore": "트림 도구는 제거할 구간을",
+		"remove": "지정",
+		"explanationMiddle": "하는 방식으로 동작합니다 —",
+		"covered": "빨간 트림 구간으로 덮인",
+		"explanationAfter": "부분은 내보낼 때 잘려나갑니다.",
+		"visualExample": "화면 예시",
+		"removed": "제거됨",
+		"kept": "유지됨",
+		"part1": "파트 1",
+		"part2": "파트 2",
+		"part3": "파트 3",
+		"finalVideo": "최종 비디오",
+		"step1Title": "1. 트림 추가",
+		"step1DescriptionBefore": "",
+		"step1DescriptionAfter": "키를 누르거나 가위 아이콘을 클릭해 제거할 구간을 표시하세요.",
+		"step2Title": "2. 조정",
+		"step2Description": "빨간 구간의 가장자리를 드래그해 잘라낼 범위를 설정하세요."
+	},
+	"unsavedChanges": {
+		"title": "저장되지 않은 변경 사항",
+		"message": "저장되지 않은 변경 사항이 있습니다.",
+		"detail": "닫기 전에 프로젝트를 저장하시겠습니까?",
+		"saveAndClose": "저장 후 닫기",
+		"discardAndClose": "저장하지 않고 닫기",
+		"loadProject": "프로젝트 불러오기...",
+		"saveProject": "프로젝트 저장...",
+		"saveProjectAs": "다른 이름으로 프로젝트 저장..."
+	},
+	"fileDialogs": {
+		"saveGif": "내보낸 GIF 저장",
+		"saveVideo": "내보낸 비디오 저장",
+		"selectVideo": "비디오 파일 선택",
+		"saveProject": "OpenScreen 프로젝트 저장",
+		"openProject": "OpenScreen 프로젝트 열기",
+		"gifImage": "GIF 이미지",
+		"mp4Video": "MP4 비디오",
+		"videoFiles": "비디오 파일",
+		"openscreenProject": "OpenScreen 프로젝트",
+		"allFiles": "모든 파일"
+	}
+}
diff --git a/src/i18n/locales/ko-KR/editor.json b/src/i18n/locales/ko-KR/editor.json
new file mode 100644
index 0000000..13c8bfd
--- /dev/null
+++ b/src/i18n/locales/ko-KR/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "녹화로 돌아가기",
+		"description": "현재 세션이 저장되었습니다.",
+		"cancel": "취소",
+		"confirm": "확인"
+	},
+	"loadingVideo": "비디오 로드 중...",
+	"errors": {
+		"noVideoLoaded": "불러온 비디오가 없습니다",
+		"videoNotReady": "비디오가 준비되지 않았습니다",
+		"unableToDetermineSourcePath": "소스 비디오 경로를 확인할 수 없습니다",
+		"failedToSaveGif": "GIF 저장에 실패했습니다",
+		"gifExportFailed": "GIF 내보내기에 실패했습니다",
+		"failedToSaveVideo": "비디오 저장에 실패했습니다",
+		"exportFailed": "내보내기에 실패했습니다",
+		"exportFailedWithError": "내보내기 실패: {{error}}",
+		"exportBackgroundLoadFailed": "내보내기 실패: 배경 이미지를 불러올 수 없습니다 ({{url}})",
+		"failedToSaveExport": "내보낸 파일 저장에 실패했습니다",
+		"failedToSaveExportedVideo": "내보낸 비디오 저장에 실패했습니다",
+		"failedToRevealInFolder": "폴더에서 파일 표시 오류: {{error}}"
+	},
+	"export": {
+		"canceled": "내보내기가 취소되었습니다",
+		"exportedSuccessfully": "{{format}} 내보내기가 완료되었습니다"
+	},
+	"project": {
+		"saveCanceled": "프로젝트 저장이 취소되었습니다",
+		"failedToSave": "프로젝트 저장에 실패했습니다",
+		"savedTo": "프로젝트가 {{path}}에 저장되었습니다",
+		"failedToLoad": "프로젝트 불러오기에 실패했습니다",
+		"invalidFormat": "유효하지 않은 프로젝트 파일 형식입니다",
+		"loadedFrom": "{{path}}에서 프로젝트를 불러왔습니다"
+	},
+	"recording": {
+		"failedCameraAccess": "카메라 접근 권한 요청에 실패했습니다.",
+		"cameraBlocked": "카메라 접근이 차단되어 있습니다. 시스템 설정에서 권한을 허용해 주세요.",
+		"systemAudioUnavailable": "시스템 오디오를 사용할 수 없습니다. 시스템 오디오 없이 녹화합니다.",
+		"microphoneDenied": "마이크 접근이 거부되었습니다. 오디오 없이 녹화를 계속합니다.",
+		"cameraDenied": "카메라 접근이 거부되었습니다. 웹캠 없이 녹화를 계속합니다.",
+		"permissionDenied": "녹화 권한이 거부되었습니다. 화면 녹화를 허용해 주세요.",
+		"cameraDisconnected": "웹캠 연결이 끊어졌습니다.",
+		"cameraNotFound": "카메라를 찾을 수 없습니다.",
+		"accessibilityAllowAndRetry": "OpenScreen의 손쉬운 사용 접근을 허용한 다음, 카운트다운을 시작하려면 다시 녹화를 누르세요."
+	}
+}
diff --git a/src/i18n/locales/ko-KR/launch.json b/src/i18n/locales/ko-KR/launch.json
new file mode 100644
index 0000000..87102a2
--- /dev/null
+++ b/src/i18n/locales/ko-KR/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "HUD 숨기기",
+		"closeApp": "앱 닫기",
+		"restartRecording": "녹화 다시 시작",
+		"cancelRecording": "녹화 취소",
+		"pauseRecording": "녹화 일시정지",
+		"resumeRecording": "녹화 재개",
+		"openVideoFile": "비디오 파일 열기",
+		"openProject": "프로젝트 열기"
+	},
+	"audio": {
+		"enableSystemAudio": "시스템 오디오 활성화",
+		"disableSystemAudio": "시스템 오디오 비활성화",
+		"enableMicrophone": "마이크 활성화",
+		"disableMicrophone": "마이크 비활성화",
+		"defaultMicrophone": "기본 마이크"
+	},
+	"webcam": {
+		"enableWebcam": "웹캠 활성화",
+		"disableWebcam": "웹캠 비활성화",
+		"defaultCamera": "기본 카메라",
+		"searching": "검색 중...",
+		"noneFound": "카메라를 찾을 수 없음",
+		"unavailable": "카메라를 사용할 수 없음"
+	},
+	"cursor": {
+		"useEditableCursor": "편집 가능한 커서 사용",
+		"useSystemCursor": "시스템 커서 사용"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "소스 불러오는 중...",
+		"screens": "화면 ({{count}}개)",
+		"windows": "창 ({{count}}개)",
+		"defaultSourceName": "화면"
+	},
+	"recording": {
+		"selectSource": "녹화할 소스를 선택해 주세요"
+	},
+	"language": "언어",
+	"systemLanguagePrompt": {
+		"title": "시스템 언어를 사용하시겠습니까?",
+		"description": "시스템 언어가 {{language}}(으)로 감지되었습니다. OpenScreen을 {{language}}(으)로 전환하시겠습니까?",
+		"switch": "{{language}}(으)로 전환",
+		"keepDefault": "현재 언어 유지"
+	}
+}
diff --git a/src/i18n/locales/ko-KR/settings.json b/src/i18n/locales/ko-KR/settings.json
new file mode 100644
index 0000000..df4c6a2
--- /dev/null
+++ b/src/i18n/locales/ko-KR/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "누르고 있으면 줌 효과 미리보기",
+		"level": "줌 레벨",
+		"customScale": "커스텀 줌",
+		"selectRegion": "조정할 줌 구간을 선택하세요",
+		"deleteZoom": "줌 삭제",
+		"focusMode": {
+			"title": "포커스 모드",
+			"manual": "수동",
+			"auto": "자동",
+			"autoDescription": "녹화된 커서 위치를 따라 카메라가 이동합니다"
+		},
+		"threeD": {
+			"title": "3D 회전",
+			"preset": {
+				"iso": "Iso",
+				"left": "왼쪽",
+				"right": "오른쪽"
+			}
+		},
+		"position": {
+			"title": "포커스 위치",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = 가장 왼쪽 / 위쪽, 100 = 가장 오른쪽 / 아래쪽"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "재생 속도",
+		"selectRegion": "조정할 속도 구간을 선택하세요",
+		"deleteRegion": "속도 구간 삭제",
+		"customPlaybackSpeed": "재생 속도 직접 입력",
+		"maxSpeedError": "속도는 16×를 초과할 수 없습니다"
+	},
+	"trim": {
+		"deleteRegion": "트림 구간 삭제"
+	},
+	"layout": {
+		"title": "레이아웃",
+		"preset": "프리셋",
+		"selectPreset": "프리셋 선택",
+		"pictureInPicture": "화면 속 화면",
+		"verticalStack": "세로 배치",
+		"webcamShape": "카메라 모양",
+		"webcamSize": "웹캠 크기",
+		"dualFrame": "듀얼 프레임",
+		"noWebcam": "웹캠 없음"
+	},
+	"effects": {
+		"title": "비디오 효과",
+		"blurBg": "배경 흐림",
+		"motionBlur": "모션 블러",
+		"off": "끄기",
+		"on": "켜기",
+		"shadow": "그림자",
+		"roundness": "모서리 둥글기",
+		"padding": "여백"
+	},
+	"background": {
+		"title": "배경",
+		"image": "이미지",
+		"color": "색상",
+		"gradient": "그라디언트",
+		"uploadCustom": "직접 업로드",
+		"gradientLabel": "그라디언트 {{index}}",
+		"colorWheel": "색상 휠",
+		"colorPalette": "색상 팔레트"
+	},
+	"crop": {
+		"title": "자르기",
+		"cropVideo": "비디오 자르기",
+		"dragInstruction": "각 면을 드래그해 자르기 영역을 조정하세요",
+		"ratio": "비율",
+		"free": "자유",
+		"done": "완료",
+		"lockAspectRatio": "화면 비율 고정",
+		"unlockAspectRatio": "화면 비율 해제"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 비디오",
+		"mp4Description": "고화질 비디오 파일",
+		"gifAnimation": "GIF 애니메이션",
+		"gifDescription": "공유용 애니메이션 이미지"
+	},
+	"exportQuality": {
+		"title": "내보내기 해상도",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "GIF 프레임 속도",
+		"size": "GIF 크기",
+		"loop": "GIF 반복"
+	},
+	"project": {
+		"save": "프로젝트 저장",
+		"load": "프로젝트 불러오기"
+	},
+	"export": {
+		"videoButton": "비디오 내보내기",
+		"gifButton": "GIF 내보내기",
+		"chooseSaveLocation": "저장 위치 선택"
+	},
+	"support": {
+		"reportBug": "버그 신고",
+		"saveDiagnostics": "Save Diagnostics",
+		"starOnGithub": "GitHub에 Star 남기기"
+	},
+	"imageUpload": {
+		"invalidFileType": "지원하지 않는 파일 형식입니다",
+		"jpgOnly": "JPG, JPEG 또는 PNG 이미지 파일을 업로드해 주세요.",
+		"uploadSuccess": "커스텀 이미지가 성공적으로 업로드되었습니다!",
+		"failedToUpload": "이미지 업로드에 실패했습니다",
+		"errorReading": "파일을 읽는 중 오류가 발생했습니다."
+	},
+	"annotation": {
+		"title": "주석 설정",
+		"active": "활성",
+		"typeText": "텍스트",
+		"typeImage": "이미지",
+		"typeArrow": "화살표",
+		"textContent": "텍스트 내용",
+		"textPlaceholder": "텍스트를 입력하세요...",
+		"fontStyle": "폰트 스타일",
+		"selectStyle": "스타일 선택",
+		"size": "크기",
+		"customFonts": "커스텀 폰트",
+		"textColor": "텍스트 색상",
+		"background": "배경",
+		"none": "없음",
+		"color": "색상",
+		"colorWheel": "색상 휠",
+		"colorPalette": "색상 팔레트",
+		"clearBackground": "배경 지우기",
+		"uploadImage": "이미지 업로드",
+		"supportedFormats": "지원 형식: JPG, PNG, GIF, WebP",
+		"arrowDirection": "화살표 방향",
+		"strokeWidth": "선 두께: {{width}}px",
+		"arrowColor": "화살표 색상",
+		"deleteAnnotation": "주석 삭제",
+		"shortcutsAndTips": "단축키 및 팁",
+		"tipMovePlayhead": "재생 헤드를 주석 구간으로 옮겨 항목을 선택하세요.",
+		"tipTabCycle": "Tab 키로 겹치는 항목을 순환할 수 있습니다.",
+		"tipShiftTabCycle": "Shift+Tab으로 역방향 순환할 수 있습니다.",
+		"invalidImageType": "지원하지 않는 파일 형식입니다",
+		"imageFormatsOnly": "JPG, PNG, GIF 또는 WebP 이미지 파일을 업로드해 주세요.",
+		"imageUploadSuccess": "이미지가 성공적으로 업로드되었습니다!",
+		"failedImageUpload": "이미지 업로드에 실패했습니다",
+		"blurColor": "블러 색상",
+		"blurColorBlack": "검정",
+		"blurColorWhite": "흰색",
+		"blurIntensity": "블러 강도",
+		"blurShape": "블러 모양",
+		"blurShapeFreehand": "자유 곡선",
+		"blurShapeOval": "타원",
+		"blurShapeRectangle": "사각형",
+		"blurType": "블러 종류",
+		"blurTypeBlur": "블러",
+		"blurTypeMosaic": "모자이크 블러",
+		"mosaicBlockSize": "모자이크 블록 크기",
+		"typeBlur": "블러"
+	},
+	"fontStyles": {
+		"classic": "클래식",
+		"editor": "에디터",
+		"strong": "강조",
+		"typewriter": "타자기",
+		"deco": "데코",
+		"simple": "심플",
+		"modern": "모던",
+		"clean": "클린"
+	},
+	"customFont": {
+		"dialogTitle": "Google 폰트 추가",
+		"urlLabel": "Google Fonts 가져오기 URL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Google Fonts에서 폰트 선택 → \"폰트 가져오기\" 클릭 → @import URL 복사",
+		"nameLabel": "표시 이름",
+		"namePlaceholder": "내 커스텀 폰트",
+		"nameHelp": "폰트 선택기에서 표시될 이름입니다",
+		"addButton": "폰트 추가",
+		"addingButton": "추가 중...",
+		"errorEmptyUrl": "Google Fonts 가져오기 URL을 입력해 주세요",
+		"errorInvalidUrl": "유효한 Google Fonts URL을 입력해 주세요",
+		"errorEmptyName": "폰트 이름을 입력해 주세요",
+		"errorExtractFailed": "URL에서 폰트 패밀리를 추출할 수 없습니다",
+		"successMessage": "\"{{fontName}}\" 폰트가 성공적으로 추가되었습니다",
+		"failedToAdd": "폰트 추가에 실패했습니다",
+		"errorTimeout": "폰트 로딩 시간이 초과되었습니다. URL을 확인하고 다시 시도해 주세요.",
+		"errorLoadFailed": "폰트를 불러올 수 없습니다. Google Fonts URL이 올바른지 확인해 주세요."
+	},
+	"cursor": {
+		"show": "커서 표시",
+		"size": "크기",
+		"smoothing": "부드러움",
+		"motionBlur": "모션 블러",
+		"clickBounce": "클릭 바운스",
+		"clipToBounds": "캔버스에 맞춰 자르기"
+	},
+	"language": {
+		"title": "언어"
+	}
+}
diff --git a/src/i18n/locales/ko-KR/shortcuts.json b/src/i18n/locales/ko-KR/shortcuts.json
new file mode 100644
index 0000000..13b11a6
--- /dev/null
+++ b/src/i18n/locales/ko-KR/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "키보드 단축키",
+	"customize": "사용자 지정",
+	"configurable": "변경 가능",
+	"fixed": "고정",
+	"pressKey": "키를 누르세요...",
+	"clickToChange": "클릭해서 변경",
+	"pressEscToCancel": "Esc를 눌러 취소",
+	"helpText": "단축키를 클릭한 후 새 키 조합을 누르세요. 취소하려면 Esc를 누르세요.",
+	"resetToDefaults": "기본값으로 초기화",
+	"alreadyUsedBy": "이미 {{action}}에서 사용 중입니다",
+	"swap": "교체",
+	"reservedShortcut": "이 단축키는 \"{{label}}\"에 예약되어 있어 변경할 수 없습니다.",
+	"savedToast": "키보드 단축키가 저장되었습니다",
+	"resetToast": "기본 단축키로 초기화되었습니다 — 저장을 클릭해 적용하세요",
+	"actions": {
+		"addZoom": "줌 추가",
+		"addTrim": "트림 추가",
+		"addSpeed": "속도 추가",
+		"addAnnotation": "주석 추가",
+		"addKeyframe": "키프레임 추가",
+		"deleteSelected": "선택 항목 삭제",
+		"playPause": "재생 / 일시정지",
+		"addBlur": "블러 추가"
+	},
+	"fixedActions": {
+		"undo": "실행 취소",
+		"redo": "다시 실행",
+		"cycleAnnotationsForward": "주석 앞으로 순환",
+		"cycleAnnotationsBackward": "주석 뒤로 순환",
+		"deleteSelectedAlt": "선택 항목 삭제 (대체)",
+		"panTimeline": "타임라인 이동",
+		"zoomTimeline": "타임라인 확대/축소",
+		"frameBack": "이전 프레임",
+		"frameForward": "다음 프레임"
+	}
+}
diff --git a/src/i18n/locales/ko-KR/timeline.json b/src/i18n/locales/ko-KR/timeline.json
new file mode 100644
index 0000000..52e2ca7
--- /dev/null
+++ b/src/i18n/locales/ko-KR/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "줌 추가 (Z)",
+		"suggestZooms": "커서 기반 줌 제안",
+		"addTrim": "트림 추가 (T)",
+		"addAnnotation": "주석 추가 (A)",
+		"addSpeed": "속도 추가 (S)",
+		"addBlur": "블러 추가 (B)"
+	},
+	"hints": {
+		"pressZoom": "Z를 눌러 줌 추가",
+		"pressTrim": "T를 눌러 트림 추가",
+		"pressAnnotation": "A를 눌러 주석 추가",
+		"pressSpeed": "S를 눌러 속도 추가",
+		"pressBlur": "B 키를 눌러 블러 영역을 추가하세요"
+	},
+	"labels": {
+		"pan": "이동",
+		"zoom": "줌",
+		"trim": "트림",
+		"speed": "속도",
+		"zoomItem": "줌 {{index}}",
+		"trimItem": "트림 {{index}}",
+		"speedItem": "속도 {{index}}",
+		"annotationItem": "주석",
+		"imageItem": "이미지",
+		"emptyText": "빈 텍스트",
+		"blurItem": "블러 {{index}}"
+	},
+	"emptyState": {
+		"noVideo": "불러온 비디오 없음",
+		"dragAndDrop": "비디오를 드래그 앤 드롭해서 편집을 시작하세요"
+	},
+	"errors": {
+		"cannotPlaceZoom": "이 위치에 줌을 추가할 수 없습니다",
+		"zoomExistsAtLocation": "이 위치에 이미 줌이 있거나 공간이 부족합니다.",
+		"zoomSuggestionUnavailable": "줌 제안 기능을 사용할 수 없습니다",
+		"noCursorTelemetry": "커서 데이터가 없습니다",
+		"noCursorTelemetryDescription": "커서 기반 제안을 생성하려면 먼저 화면을 녹화해 주세요.",
+		"noUsableTelemetry": "사용 가능한 커서 데이터가 없습니다",
+		"noUsableTelemetryDescription": "녹화에 충분한 커서 이동 데이터가 포함되어 있지 않습니다.",
+		"noDwellMoments": "명확한 커서 정지 구간을 찾을 수 없습니다",
+		"noDwellMomentsDescription": "중요한 동작에서 커서를 천천히 멈추며 녹화해 보세요.",
+		"noAutoZoomSlots": "자동 줌 슬롯이 없습니다",
+		"noAutoZoomSlotsDescription": "감지된 정지 지점이 기존 줌 구간과 겹칩니다.",
+		"cannotPlaceTrim": "이 위치에 트림을 추가할 수 없습니다",
+		"trimExistsAtLocation": "이 위치에 이미 트림이 있거나 공간이 부족합니다.",
+		"cannotPlaceSpeed": "이 위치에 속도를 추가할 수 없습니다",
+		"speedExistsAtLocation": "이 위치에 이미 속도 구간이 있거나 공간이 부족합니다."
+	},
+	"success": {
+		"addedZoomSuggestions": "커서 기반 줌 제안 {{count}}개가 추가되었습니다",
+		"addedZoomSuggestionsPlural": "커서 기반 줌 제안 {{count}}개가 추가되었습니다"
+	}
+}
diff --git a/src/i18n/locales/ru/common.json b/src/i18n/locales/ru/common.json
new file mode 100644
index 0000000..e001a5f
--- /dev/null
+++ b/src/i18n/locales/ru/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "Отмена",
+		"save": "Сохранить",
+		"delete": "Удалить",
+		"close": "Закрыть",
+		"share": "Поделиться",
+		"done": "Готово",
+		"open": "Открыть",
+		"upload": "Загрузить",
+		"export": "Экспорт",
+		"showInFolder": "Показать в папке",
+		"file": "Файл",
+		"edit": "Редактировать",
+		"view": "Вид",
+		"window": "Окно",
+		"quit": "Выход",
+		"stopRecording": "Остановить запись",
+		"undo": "Отменить",
+		"redo": "Повторить",
+		"cut": "Вырезать",
+		"copy": "Копировать",
+		"paste": "Вставить",
+		"selectAll": "Выделить всё",
+		"minimize": "Свернуть",
+		"reload": "Перезагрузить",
+		"forceReload": "Принудительная перезагрузка",
+		"toggleDevTools": "Переключить инструменты разработчика",
+		"actualSize": "Реальный размер",
+		"zoomIn": "Увеличить",
+		"zoomOut": "Уменьшить",
+		"toggleFullScreen": "Полноэкранный режим",
+		"recordingStatus": "Запись: {{source}}",
+		"about": "О OpenScreen",
+		"services": "Сервисы",
+		"hide": "Скрыть OpenScreen",
+		"hideOthers": "Скрыть остальные",
+		"unhide": "Показать все"
+	},
+	"playback": {
+		"play": "Воспроизвести",
+		"pause": "Пауза",
+		"fullscreen": "Полный экран",
+		"exitFullscreen": "Выход из полного экрана"
+	},
+	"locale": {
+		"name": "Русский",
+		"short": "RU"
+	}
+}
diff --git a/src/i18n/locales/ru/dialogs.json b/src/i18n/locales/ru/dialogs.json
new file mode 100644
index 0000000..40b4113
--- /dev/null
+++ b/src/i18n/locales/ru/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "Экспорт завершён",
+		"yourFormatReady": "Ваш {{format}} готов",
+		"showInFolder": "Показать в папке",
+		"finalizingVideo": "Завершение экспорта видео...",
+		"compilingGifProgress": "Сборка GIF... {{progress}}%",
+		"compilingGifWait": "Сборка GIF... Это может занять некоторое время",
+		"takeMoment": "Это может занять некоторое время...",
+		"failed": "Экспорт не удался",
+		"tryAgain": "Пожалуйста, попробуйте снова",
+		"finalizingVideoTitle": "Завершение видео",
+		"compilingGif": "Сборка GIF",
+		"exportingFormat": "Экспорт {{format}}",
+		"compiling": "Сборка",
+		"renderingFrames": "Рендеринг кадров",
+		"processing": "Обработка...",
+		"finalizing": "Завершение...",
+		"compilingStatus": "Сборка...",
+		"status": "Статус",
+		"format": "Формат",
+		"frames": "Кадры",
+		"cancelExport": "Отменить экспорт",
+		"savedSuccessfully": "{{format}} успешно сохранён!"
+	},
+	"tutorial": {
+		"triggerLabel": "Как работает обрезка",
+		"title": "Как работает обрезка",
+		"description": "Как вырезать ненужные части видео.",
+		"explanationBefore": "Инструмент обрезки работает путём определения сегментов, которые вы хотите",
+		"remove": "удалить",
+		"explanationMiddle": " — всё, что",
+		"covered": "покрыто",
+		"explanationAfter": "красным сегментом обрезки, будет вырезано при экспорте.",
+		"visualExample": "Визуальный пример",
+		"removed": "УДАЛЕНО",
+		"kept": "Сохранено",
+		"part1": "Часть 1",
+		"part2": "Часть 2",
+		"part3": "Часть 3",
+		"finalVideo": "Итоговое видео",
+		"step1Title": "1. Добавить обрезку",
+		"step1DescriptionBefore": "Нажмите ",
+		"step1DescriptionAfter": " или нажмите на значок ножниц, чтобы отметить секцию для удаления.",
+		"step2Title": "2. Настроить",
+		"step2Description": "Перетащите края красной области, чтобы точно покрыть то, что вы хотите вырезать."
+	},
+	"unsavedChanges": {
+		"title": "Несохранённые изменения",
+		"message": "У вас есть несохранённые изменения.",
+		"detail": "Хотите сохранить проект перед закрытием?",
+		"saveAndClose": "Сохранить и закрыть",
+		"discardAndClose": "Отменить и закрыть",
+		"loadProject": "Загрузить проект…",
+		"saveProject": "Сохранить проект…",
+		"saveProjectAs": "Сохранить проект как…"
+	},
+	"fileDialogs": {
+		"saveGif": "Сохранить экспортированный GIF",
+		"saveVideo": "Сохранить экспортированное видео",
+		"selectVideo": "Выбрать видеофайл",
+		"saveProject": "Сохранить проект OpenScreen",
+		"openProject": "Открыть проект OpenScreen",
+		"gifImage": "GIF изображение",
+		"mp4Video": "MP4 видео",
+		"videoFiles": "Видеофайлы",
+		"openscreenProject": "Проект OpenScreen",
+		"allFiles": "Все файлы"
+	}
+}
diff --git a/src/i18n/locales/ru/editor.json b/src/i18n/locales/ru/editor.json
new file mode 100644
index 0000000..5452124
--- /dev/null
+++ b/src/i18n/locales/ru/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "Вернуться к записи",
+		"description": "Ваша текущая сессия была сохранена.",
+		"cancel": "Отмена",
+		"confirm": "Подтвердить"
+	},
+	"loadingVideo": "Загрузка видео...",
+	"errors": {
+		"noVideoLoaded": "Видео не загружено",
+		"videoNotReady": "Видео не готово",
+		"unableToDetermineSourcePath": "Не удалось определить путь к исходному видео",
+		"failedToSaveGif": "Не удалось сохранить GIF",
+		"gifExportFailed": "Экспорт GIF не удался",
+		"failedToSaveVideo": "Не удалось сохранить видео",
+		"exportFailed": "Экспорт не удался",
+		"exportFailedWithError": "Экспорт не удался: {{error}}",
+		"exportBackgroundLoadFailed": "Экспорт не удался: не удалось загрузить фоновое изображение ({{url}})",
+		"failedToSaveExport": "Не удалось сохранить экспорт",
+		"failedToSaveExportedVideo": "Не удалось сохранить экспортированное видео",
+		"failedToRevealInFolder": "Ошибка при показе в папке: {{error}}"
+	},
+	"export": {
+		"canceled": "Экспорт отменён",
+		"exportedSuccessfully": "{{format}} успешно экспортирован"
+	},
+	"project": {
+		"saveCanceled": "Сохранение проекта отменено",
+		"failedToSave": "Не удалось сохранить проект",
+		"savedTo": "Проект сохранён в {{path}}",
+		"failedToLoad": "Не удалось загрузить проект",
+		"invalidFormat": "Неверный формат файла проекта",
+		"loadedFrom": "Проект загружен из {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Не удалось запросить доступ к камере.",
+		"cameraBlocked": "Доступ к камере заблокирован. Включите его в системных настройках для использования веб-камеры.",
+		"systemAudioUnavailable": "Системное аудио недоступно. Запись без системного аудио.",
+		"microphoneDenied": "Доступ к микрофону запрещён. Запись продолжится без аудио.",
+		"cameraDenied": "Доступ к камере запрещён. Запись продолжится без веб-камеры.",
+		"cameraDisconnected": "Веб-камера отключена.",
+		"cameraNotFound": "Камера не найдена.",
+		"permissionDenied": "Разрешение на запись запрещено. Пожалуйста, разрешите запись экрана.",
+		"accessibilityAllowAndRetry": "Разрешите OpenScreen доступ к Универсальному доступу, затем снова нажмите запись, чтобы начать обратный отсчет."
+	}
+}
diff --git a/src/i18n/locales/ru/launch.json b/src/i18n/locales/ru/launch.json
new file mode 100644
index 0000000..3226f6a
--- /dev/null
+++ b/src/i18n/locales/ru/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Скрыть HUD",
+		"closeApp": "Закрыть приложение",
+		"restartRecording": "Перезапустить запись",
+		"cancelRecording": "Отменить запись",
+		"pauseRecording": "Приостановить запись",
+		"resumeRecording": "Возобновить запись",
+		"openVideoFile": "Открыть видеофайл",
+		"openProject": "Открыть проект"
+	},
+	"audio": {
+		"enableSystemAudio": "Включить системное аудио",
+		"disableSystemAudio": "Отключить системное аудио",
+		"enableMicrophone": "Включить микрофон",
+		"disableMicrophone": "Отключить микрофон",
+		"defaultMicrophone": "Микрофон по умолчанию"
+	},
+	"webcam": {
+		"enableWebcam": "Включить веб-камеру",
+		"disableWebcam": "Отключить веб-камеру",
+		"defaultCamera": "Камера по умолчанию",
+		"searching": "Поиск...",
+		"noneFound": "Камера не найдена",
+		"unavailable": "Камера недоступна"
+	},
+	"sourceSelector": {
+		"loading": "Загрузка источников...",
+		"screens": "Экраны ({{count}})",
+		"windows": "Окна ({{count}})",
+		"defaultSourceName": "Экран"
+	},
+	"recording": {
+		"selectSource": "Пожалуйста, выберите источник для записи"
+	},
+	"language": "Язык",
+	"systemLanguagePrompt": {
+		"title": "Использовать системный язык?",
+		"description": "Мы обнаружили {{language}} как системный язык. Хотите переключить OpenScreen на {{language}}?",
+		"switch": "Переключить на {{language}}",
+		"keepDefault": "Оставить текущий язык"
+	},
+	"cursor": {
+		"useEditableCursor": "Использовать редактируемый курсор",
+		"useSystemCursor": "Использовать системный курсор"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	}
+}
diff --git a/src/i18n/locales/ru/settings.json b/src/i18n/locales/ru/settings.json
new file mode 100644
index 0000000..c0dbba8
--- /dev/null
+++ b/src/i18n/locales/ru/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "Удерживайте для предпросмотра эффекта зума",
+		"level": "Уровень масштабирования",
+		"selectRegion": "Выберите область масштабирования для настройки",
+		"deleteZoom": "Удалить масштабирование",
+		"focusMode": {
+			"title": "Режим фокуса",
+			"manual": "Ручной",
+			"auto": "Авто",
+			"autoDescription": "Камера следует за записанной позицией курсора"
+		},
+		"threeD": {
+			"title": "3D вращение",
+			"preset": {
+				"iso": "Изометрия",
+				"left": "Слева",
+				"right": "Справа"
+			}
+		},
+		"customScale": "Пользовательский масштаб",
+		"position": {
+			"title": "Положение фокуса",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = край слева / сверху, 100 = край справа / снизу"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Скорость воспроизведения",
+		"selectRegion": "Выберите область скорости для настройки",
+		"deleteRegion": "Удалить область скорости",
+		"customPlaybackSpeed": "Пользовательская скорость воспроизведения",
+		"maxSpeedError": "Скорость не может быть выше 16×"
+	},
+	"trim": {
+		"deleteRegion": "Удалить область обрезки"
+	},
+	"layout": {
+		"title": "Макет",
+		"preset": "Пресет",
+		"selectPreset": "Выбрать пресет",
+		"pictureInPicture": "Картинка в картинке",
+		"verticalStack": "Вертикальный стек",
+		"dualFrame": "Двойной кадр",
+		"webcamShape": "Форма камеры",
+		"webcamSize": "Размер веб-камеры",
+		"noWebcam": "Без веб-камеры"
+	},
+	"effects": {
+		"title": "Видеоэффекты",
+		"blurBg": "Размытие фона",
+		"motionBlur": "Размытие движения",
+		"off": "выкл",
+		"on": "вкл",
+		"shadow": "Тень",
+		"roundness": "Скругление",
+		"padding": "Отступ"
+	},
+	"background": {
+		"title": "Фон",
+		"image": "Изображение",
+		"color": "Цвет",
+		"gradient": "Градиент",
+		"uploadCustom": "Загрузить свой",
+		"gradientLabel": "Градиент {{index}}",
+		"colorWheel": "Цветовой круг",
+		"colorPalette": "Палитра цветов"
+	},
+	"crop": {
+		"title": "Обрезка",
+		"cropVideo": "Обрезать видео",
+		"dragInstruction": "Перетащите каждую сторону для настройки области обрезки",
+		"ratio": "Соотношение сторон",
+		"free": "Свободно",
+		"done": "Готово",
+		"lockAspectRatio": "Заблокировать соотношение сторон",
+		"unlockAspectRatio": "Разблокировать соотношение сторон"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 видео",
+		"mp4Description": "Видеофайл высокого качества",
+		"gifAnimation": "GIF анимация",
+		"gifDescription": "Анимированное изображение для обмена"
+	},
+	"exportQuality": {
+		"title": "Разрешение экспорта",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "Частота кадров GIF",
+		"size": "Размер GIF",
+		"loop": "Зациклить GIF"
+	},
+	"project": {
+		"save": "Сохранить проект",
+		"load": "Загрузить проект"
+	},
+	"export": {
+		"videoButton": "Экспорт видео",
+		"gifButton": "Экспорт GIF",
+		"chooseSaveLocation": "Выбрать место сохранения"
+	},
+	"support": {
+		"reportBug": "Сообщить об ошибке",
+		"saveDiagnostics": "Сохранить диагностику",
+		"starOnGithub": "Звезда на GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Неверный тип файла",
+		"jpgOnly": "Пожалуйста, загрузите изображение JPG или JPEG.",
+		"uploadSuccess": "Пользовательское изображение успешно загружено!",
+		"failedToUpload": "Не удалось загрузить изображение",
+		"errorReading": "Произошла ошибка при чтении файла."
+	},
+	"annotation": {
+		"title": "Настройки аннотаций",
+		"active": "Активно",
+		"typeText": "Текст",
+		"typeImage": "Изображение",
+		"typeArrow": "Стрелка",
+		"typeBlur": "Размытие",
+		"textContent": "Содержание текста",
+		"textPlaceholder": "Введите ваш текст...",
+		"fontStyle": "Стиль шрифта",
+		"selectStyle": "Выбрать стиль",
+		"size": "Размер",
+		"customFonts": "Пользовательские шрифты",
+		"textColor": "Цвет текста",
+		"background": "Фон",
+		"none": "Нет",
+		"color": "Цвет",
+		"colorWheel": "Цветовой круг",
+		"colorPalette": "Палитра цветов",
+		"clearBackground": "Очистить фон",
+		"uploadImage": "Загрузить изображение",
+		"supportedFormats": "Поддерживаемые форматы: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Направление стрелки",
+		"strokeWidth": "Толщина линии: {{width}}px",
+		"arrowColor": "Цвет стрелки",
+		"blurType": "Тип размытия",
+		"blurTypeBlur": "Размытие",
+		"blurTypeMosaic": "Мозаичное размытие",
+		"blurColor": "Цвет размытия",
+		"blurColorWhite": "Белый",
+		"blurColorBlack": "Чёрный",
+		"blurShape": "Форма размытия",
+		"blurIntensity": "Интенсивность размытия",
+		"mosaicBlockSize": "Размер блока мозаики",
+		"blurShapeRectangle": "Прямоугольник",
+		"blurShapeOval": "Овал",
+		"blurShapeFreehand": "От руки",
+		"deleteAnnotation": "Удалить аннотацию",
+		"shortcutsAndTips": "Горячие клавиши и советы",
+		"tipMovePlayhead": "Переместите курсор воспроизведения к перекрывающейся секции аннотации и выберите элемент.",
+		"tipTabCycle": "Используйте Tab для циклического переключения между перекрывающимися элементами.",
+		"tipShiftTabCycle": "Используйте Shift+Tab для циклического переключения в обратном направлении.",
+		"invalidImageType": "Неверный тип файла",
+		"imageFormatsOnly": "Пожалуйста, загрузите изображение JPG, PNG, GIF или WebP.",
+		"imageUploadSuccess": "Изображение успешно загружено!",
+		"failedImageUpload": "Не удалось загрузить изображение"
+	},
+	"fontStyles": {
+		"classic": "Классический",
+		"editor": "Редактор",
+		"strong": "Жирный",
+		"typewriter": "Пишущая машинка",
+		"deco": "Декоративный",
+		"simple": "Простой",
+		"modern": "Современный",
+		"clean": "Чистый"
+	},
+	"customFont": {
+		"dialogTitle": "Добавить шрифт Google",
+		"urlLabel": "URL импорта Google Fonts",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Возьмите его из Google Fonts: Выберите шрифт → Нажмите \"Get font\" → Скопируйте URL @import",
+		"nameLabel": "Отображаемое имя",
+		"namePlaceholder": "Мой пользовательский шрифт",
+		"nameHelp": "Так шрифт будет отображаться в селекторе шрифтов",
+		"addButton": "Добавить шрифт",
+		"addingButton": "Добавление...",
+		"errorEmptyUrl": "Пожалуйста, введите URL импорта Google Fonts",
+		"errorInvalidUrl": "Пожалуйста, введите корректный URL Google Fonts",
+		"errorEmptyName": "Пожалуйста, введите имя шрифта",
+		"errorExtractFailed": "Не удалось извлечь семейство шрифтов из URL",
+		"successMessage": "Шрифт \"{{fontName}}\" успешно добавлен",
+		"failedToAdd": "Не удалось добавить шрифт",
+		"errorTimeout": "Загрузка шрифта заняла слишком много времени. Пожалуйста, проверьте URL и попробуйте снова.",
+		"errorLoadFailed": "Не удалось загрузить шрифт. Пожалуйста, проверьте правильность URL Google Fonts."
+	},
+	"cursor": {
+		"show": "Показывать курсор",
+		"size": "Размер",
+		"smoothing": "Сглаживание",
+		"motionBlur": "Размытие движения",
+		"clickBounce": "Отскок при клике",
+		"clipToBounds": "Обрезать по холсту"
+	},
+	"language": {
+		"title": "Язык"
+	}
+}
diff --git a/src/i18n/locales/ru/shortcuts.json b/src/i18n/locales/ru/shortcuts.json
new file mode 100644
index 0000000..ab6eae8
--- /dev/null
+++ b/src/i18n/locales/ru/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Горячие клавиши",
+	"customize": "Настроить",
+	"configurable": "Настраиваемые",
+	"fixed": "Фиксированные",
+	"pressKey": "Нажмите клавишу…",
+	"clickToChange": "Нажмите для изменения",
+	"pressEscToCancel": "Нажмите Esc для отмены",
+	"helpText": "Нажмите на горячую клавишу, затем нажмите новую комбинацию клавиш. Нажмите Esc для отмены.",
+	"resetToDefaults": "Сбросить по умолчанию",
+	"alreadyUsedBy": "Уже используется для {{action}}",
+	"swap": "Поменять",
+	"reservedShortcut": "Эта горячая клавиша зарезервирована для \"{{label}}\" и не может быть переназначена.",
+	"savedToast": "Горячие клавиши сохранены",
+	"resetToast": "Сброс к горячим клавишам по умолчанию — нажмите Сохранить для применения",
+	"actions": {
+		"addZoom": "Добавить масштабирование",
+		"addTrim": "Добавить обрезку",
+		"addSpeed": "Изменить скорость",
+		"addAnnotation": "Добавить аннотацию",
+		"addBlur": "Добавить размытие",
+		"addKeyframe": "Добавить ключевой кадр",
+		"deleteSelected": "Удалить выбранное",
+		"playPause": "Воспроизведение / Пауза"
+	},
+	"fixedActions": {
+		"undo": "Отменить",
+		"redo": "Повторить",
+		"cycleAnnotationsForward": "Циклически переключить аннотации вперёд",
+		"cycleAnnotationsBackward": "Циклически переключить аннотации назад",
+		"deleteSelectedAlt": "Удалить выбранное (альт)",
+		"panTimeline": "Панорамирование таймлайна",
+		"zoomTimeline": "Масштабирование таймлайна",
+		"frameBack": "Кадр назад",
+		"frameForward": "Кадр вперёд"
+	}
+}
diff --git a/src/i18n/locales/ru/timeline.json b/src/i18n/locales/ru/timeline.json
new file mode 100644
index 0000000..fe9ce46
--- /dev/null
+++ b/src/i18n/locales/ru/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Добавить масштабирование (Z)",
+		"suggestZooms": "Предложить масштабирование на основе курсора",
+		"addTrim": "Добавить обрезку (T)",
+		"addAnnotation": "Добавить аннотацию (A)",
+		"addBlur": "Добавить размытие (B)",
+		"addSpeed": "Изменить скорость (S)"
+	},
+	"hints": {
+		"pressZoom": "Нажмите Z для добавления масштабирования",
+		"pressTrim": "Нажмите T для добавления обрезки",
+		"pressAnnotation": "Нажмите A для добавления аннотации",
+		"pressBlur": "Нажмите B для добавления области размытия",
+		"pressSpeed": "Нажмите S для изменения скорости"
+	},
+	"labels": {
+		"pan": "Панорамирование",
+		"zoom": "Масштабирование",
+		"trim": "Обрезка",
+		"speed": "Скорость воспроизведения",
+		"zoomItem": "Масштабирование {{index}}",
+		"trimItem": "Обрезка {{index}}",
+		"speedItem": "Скорость воспроизведения {{index}}",
+		"annotationItem": "Аннотация",
+		"blurItem": "Размытие {{index}}",
+		"imageItem": "Изображение",
+		"emptyText": "Пустой текст"
+	},
+	"emptyState": {
+		"noVideo": "Видео не загружено",
+		"dragAndDrop": "Перетащите видео для начала редактирования"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Невозможно разместить масштабирование здесь",
+		"zoomExistsAtLocation": "Масштабирование уже существует в этом месте или недостаточно свободного места.",
+		"zoomSuggestionUnavailable": "Обработчик предложений масштабирования недоступен",
+		"noCursorTelemetry": "Нет данных телеметрии курсора",
+		"noCursorTelemetryDescription": "Сначала запишите screencast для генерации предложений на основе курсора.",
+		"noUsableTelemetry": "Нет пригодной телеметрии курсора",
+		"noUsableTelemetryDescription": "Запись не содержит достаточно данных о движении курсора.",
+		"noDwellMoments": "Не найдено чётких моментов задержки курсора",
+		"noDwellMomentsDescription": "Попробуйте запись с более медленными паузами курсора на важных действиях.",
+		"noAutoZoomSlots": "Нет доступных слотов авто-масштабирования",
+		"noAutoZoomSlotsDescription": "Обнаруженные точки задержки перекрывают существующие области масштабирования.",
+		"cannotPlaceTrim": "Невозможно разместить обрезку здесь",
+		"trimExistsAtLocation": "Обрезка уже существует в этом месте или недостаточно свободного места.",
+		"cannotPlaceSpeed": "Невозможно разместить изменение скорости здесь",
+		"speedExistsAtLocation": "Область изменения скорости уже существует в этом месте или недостаточно свободного места."
+	},
+	"success": {
+		"addedZoomSuggestions": "Добавлено {{count}} предложение масштабирования на основе курсора",
+		"addedZoomSuggestionsPlural": "Добавлено {{count}} предложений масштабирования на основе курсора"
+	}
+}
diff --git a/src/i18n/locales/tr/common.json b/src/i18n/locales/tr/common.json
new file mode 100644
index 0000000..69face4
--- /dev/null
+++ b/src/i18n/locales/tr/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "İptal",
+		"save": "Kaydet",
+		"delete": "Sil",
+		"close": "Kapat",
+		"share": "Paylaş",
+		"done": "Tamam",
+		"open": "Aç",
+		"upload": "Yükle",
+		"export": "Dışa Aktar",
+		"showInFolder": "Klasörde Göster",
+		"file": "Dosya",
+		"edit": "Düzenle",
+		"view": "Görünüm",
+		"window": "Pencere",
+		"quit": "Çıkış",
+		"stopRecording": "Kaydı Durdur",
+		"undo": "Geri Al",
+		"redo": "Yinele",
+		"cut": "Kes",
+		"copy": "Kopyala",
+		"paste": "Yapıştır",
+		"selectAll": "Tümünü Seç",
+		"minimize": "Simge Durumuna Küçült",
+		"reload": "Yeniden Yükle",
+		"forceReload": "Zorla Yeniden Yükle",
+		"toggleDevTools": "Geliştirici Araçlarını Aç/Kapat",
+		"actualSize": "Gerçek Boyut",
+		"zoomIn": "Yakınlaştır",
+		"zoomOut": "Uzaklaştır",
+		"toggleFullScreen": "Tam Ekranı Aç/Kapat",
+		"recordingStatus": "Kaydediliyor: {{source}}",
+		"about": "OpenScreen Hakkında",
+		"services": "Servisler",
+		"hide": "OpenScreen’i Gizle",
+		"hideOthers": "Diğerlerini Gizle",
+		"unhide": "Tümünü Göster"
+	},
+	"playback": {
+		"play": "Oynat",
+		"pause": "Duraklat",
+		"fullscreen": "Tam Ekran",
+		"exitFullscreen": "Tam Ekrandan Çık"
+	},
+	"locale": {
+		"name": "Türkçe",
+		"short": "TR"
+	}
+}
diff --git a/src/i18n/locales/tr/dialogs.json b/src/i18n/locales/tr/dialogs.json
new file mode 100644
index 0000000..9fab50d
--- /dev/null
+++ b/src/i18n/locales/tr/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "Dışa Aktarım Tamamlandı",
+		"yourFormatReady": "{{format}} dosyanız hazır",
+		"showInFolder": "Klasörde Göster",
+		"finalizingVideo": "Video dışa aktarımı sonlandırılıyor...",
+		"compilingGifProgress": "GIF derleniyor... %{{progress}}",
+		"compilingGifWait": "GIF derleniyor... Bu biraz zaman alabilir",
+		"takeMoment": "Bu biraz zaman alabilir...",
+		"failed": "Dışa Aktarım Başarısız",
+		"tryAgain": "Lütfen tekrar deneyin",
+		"finalizingVideoTitle": "Video Sonlandırılıyor",
+		"compilingGif": "GIF Derleniyor",
+		"exportingFormat": "{{format}} Dışa Aktarılıyor",
+		"compiling": "Derleniyor",
+		"renderingFrames": "Kareler İşleniyor",
+		"processing": "İşleniyor...",
+		"finalizing": "Sonlandırılıyor...",
+		"compilingStatus": "Derleniyor...",
+		"status": "Durum",
+		"format": "Biçim",
+		"frames": "Kareler",
+		"cancelExport": "Dışa Aktarımı İptal Et",
+		"savedSuccessfully": "{{format}} başarıyla kaydedildi!"
+	},
+	"tutorial": {
+		"triggerLabel": "Kırpma nasıl çalışır",
+		"title": "Kırpma Nasıl Çalışır",
+		"description": "Videonuzun istenmeyen bölümlerini nasıl keseceğinizi anlayın.",
+		"explanationBefore": "Kırpma aracı, istediğiniz bölümleri",
+		"remove": "kaldırmak",
+		"explanationMiddle": " için kullanılır; kırmızı kırpma bölgesiyle",
+		"covered": "kaplanan",
+		"explanationAfter": "her şey dışa aktarımda kesilecektir.",
+		"visualExample": "Görsel Örnek",
+		"removed": "KALDIRILDI",
+		"kept": "Korundu",
+		"part1": "Bölüm 1",
+		"part2": "Bölüm 2",
+		"part3": "Bölüm 3",
+		"finalVideo": "Son Video",
+		"step1Title": "1. Kırpma Ekle",
+		"step1DescriptionBefore": "Kaldırılacak bölümü işaretlemek için ",
+		"step1DescriptionAfter": " tuşuna basın veya makas simgesine tıklayın.",
+		"step2Title": "2. Ayarla",
+		"step2Description": "Kesmek istediğiniz kısmı tam olarak kaplamak için kırmızı bölgenin kenarlarını sürükleyin."
+	},
+	"unsavedChanges": {
+		"title": "Kaydedilmemiş Değişiklikler",
+		"message": "Kaydedilmemiş değişiklikleriniz var.",
+		"detail": "Kapatmadan önce projenizi kaydetmek ister misiniz?",
+		"saveAndClose": "Kaydet ve Kapat",
+		"discardAndClose": "Kaydetmeden Kapat",
+		"loadProject": "Proje Yükle…",
+		"saveProject": "Proje Kaydet…",
+		"saveProjectAs": "Farklı Kaydet…"
+	},
+	"fileDialogs": {
+		"saveGif": "Dışa Aktarılan GIF'i Kaydet",
+		"saveVideo": "Dışa Aktarılan Videoyu Kaydet",
+		"selectVideo": "Video Dosyası Seç",
+		"saveProject": "OpenScreen Projesini Kaydet",
+		"openProject": "OpenScreen Projesini Aç",
+		"gifImage": "GIF Görüntüsü",
+		"mp4Video": "MP4 Video",
+		"videoFiles": "Video Dosyaları",
+		"openscreenProject": "OpenScreen Projesi",
+		"allFiles": "Tüm Dosyalar"
+	}
+}
diff --git a/src/i18n/locales/tr/editor.json b/src/i18n/locales/tr/editor.json
new file mode 100644
index 0000000..b50630a
--- /dev/null
+++ b/src/i18n/locales/tr/editor.json
@@ -0,0 +1,46 @@
+{
+	"errors": {
+		"noVideoLoaded": "Video yüklenmedi",
+		"videoNotReady": "Video hazır değil",
+		"unableToDetermineSourcePath": "Kaynak video yolu belirlenemiyor",
+		"failedToSaveGif": "GIF kaydedilemedi",
+		"gifExportFailed": "GIF dışa aktarımı başarısız oldu",
+		"failedToSaveVideo": "Video kaydedilemedi",
+		"exportFailed": "Dışa aktarım başarısız oldu",
+		"exportFailedWithError": "Dışa aktarım başarısız: {{error}}",
+		"exportBackgroundLoadFailed": "Dışa aktarım başarısız: arka plan görüntüsü yüklenemedi ({{url}})",
+		"failedToSaveExport": "Dışa aktarım kaydedilemedi",
+		"failedToSaveExportedVideo": "Dışa aktarılan video kaydedilemedi",
+		"failedToRevealInFolder": "Klasörde gösterme hatası: {{error}}"
+	},
+	"export": {
+		"canceled": "Dışa aktarım iptal edildi",
+		"exportedSuccessfully": "{{format}} başarıyla dışa aktarıldı"
+	},
+	"project": {
+		"saveCanceled": "Proje kaydetme iptal edildi",
+		"failedToSave": "Proje kaydedilemedi",
+		"savedTo": "Proje şuraya kaydedildi: {{path}}",
+		"failedToLoad": "Proje yüklenemedi",
+		"invalidFormat": "Geçersiz proje dosyası biçimi",
+		"loadedFrom": "Proje şuradan yüklendi: {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Kamera erişimi istenemedi.",
+		"cameraBlocked": "Kamera erişimi engellendi. Kamerayı kullanmak için sistem ayarlarından izin verin.",
+		"systemAudioUnavailable": "Sistem sesi kullanılamıyor. Sistem sesi olmadan kaydediliyor.",
+		"microphoneDenied": "Mikrofon erişimi reddedildi. Kayıt ses olmadan devam edecek.",
+		"cameraDenied": "Kamera erişimi reddedildi. Kayıt kamera olmadan devam edecek.",
+		"permissionDenied": "Kayıt izni reddedildi. Lütfen ekran kaydına izin verin.",
+		"cameraDisconnected": "Webcam bağlantısı kesildi.",
+		"cameraNotFound": "Kamera bulunamadı.",
+		"accessibilityAllowAndRetry": "OpenScreen için Erişilebilirlik erişimine izin verin, ardından geri sayımı başlatmak için tekrar kayda basın."
+	},
+	"loadingVideo": "Video yükleniyor...",
+	"newRecording": {
+		"title": "Kaydediciye Dön",
+		"description": "Mevcut oturumunuz kaydedildi.",
+		"cancel": "İptal",
+		"confirm": "Onayla"
+	}
+}
diff --git a/src/i18n/locales/tr/launch.json b/src/i18n/locales/tr/launch.json
new file mode 100644
index 0000000..676b5c6
--- /dev/null
+++ b/src/i18n/locales/tr/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Kontrol panelini gizle",
+		"closeApp": "Uygulamayı kapat",
+		"restartRecording": "Kaydı yeniden başlat",
+		"cancelRecording": "Kaydı iptal et",
+		"pauseRecording": "Kaydı duraklat",
+		"resumeRecording": "Kayda devam et",
+		"openVideoFile": "Video dosyası aç",
+		"openProject": "Proje aç"
+	},
+	"audio": {
+		"enableSystemAudio": "Sistem sesini etkinleştir",
+		"disableSystemAudio": "Sistem sesini devre dışı bırak",
+		"enableMicrophone": "Mikrofonu etkinleştir",
+		"disableMicrophone": "Mikrofonu devre dışı bırak",
+		"defaultMicrophone": "Varsayılan Mikrofon"
+	},
+	"webcam": {
+		"enableWebcam": "Kamerayı etkinleştir",
+		"disableWebcam": "Kamerayı devre dışı bırak",
+		"defaultCamera": "Varsayılan Kamera",
+		"searching": "Aranıyor...",
+		"noneFound": "Kamera bulunamadı",
+		"unavailable": "Kamera kullanılamıyor"
+	},
+	"cursor": {
+		"useEditableCursor": "Düzenlenebilir imleci kullan",
+		"useSystemCursor": "Sistem imlecini kullan"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "Kaynaklar yükleniyor...",
+		"screens": "Ekranlar ({{count}})",
+		"windows": "Pencereler ({{count}})",
+		"defaultSourceName": "Ekran"
+	},
+	"recording": {
+		"selectSource": "Lütfen kayıt için bir kaynak seçin"
+	},
+	"language": "Dil",
+	"systemLanguagePrompt": {
+		"title": "Sistem dilinizi kullanmak ister misiniz?",
+		"description": "Sistem diliniz {{language}} olarak algılandı. OpenScreen i {{language}} diline geçirmek ister misiniz?",
+		"switch": "{{language}} diline geç",
+		"keepDefault": "Mevcut dili koru"
+	}
+}
diff --git a/src/i18n/locales/tr/settings.json b/src/i18n/locales/tr/settings.json
new file mode 100644
index 0000000..587f266
--- /dev/null
+++ b/src/i18n/locales/tr/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "Yakınlaştırma efektini önizlemek için basılı tutun",
+		"level": "Yakınlaştırma Seviyesi",
+		"selectRegion": "Ayarlamak için bir yakınlaştırma bölgesi seçin",
+		"deleteZoom": "Yakınlaştırmayı Sil",
+		"focusMode": {
+			"title": "Odak Modu",
+			"manual": "Manuel",
+			"auto": "Otomatik",
+			"autoDescription": "Kamera kaydedilen imleç konumunu takip eder"
+		},
+		"threeD": {
+			"title": "3D Döndürme",
+			"preset": {
+				"iso": "Iso",
+				"left": "Sol",
+				"right": "Sağ"
+			}
+		},
+		"customScale": "Özel Yakınlaştırma",
+		"position": {
+			"title": "Odak Konumu",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = en sol / en üst, 100 = en sağ / en alt"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Oynatma Hızı",
+		"selectRegion": "Ayarlamak için bir hız bölgesi seçin",
+		"deleteRegion": "Hız Bölgesini Sil",
+		"customPlaybackSpeed": "Özel Oynatma Hızı",
+		"maxSpeedError": "Hız 16× değerinden yüksek olamaz"
+	},
+	"trim": {
+		"deleteRegion": "Kırpma Bölgesini Sil"
+	},
+	"layout": {
+		"title": "Düzen",
+		"preset": "Ön Ayar",
+		"selectPreset": "Ön ayar seçin",
+		"pictureInPicture": "Resim İçinde Resim",
+		"verticalStack": "Dikey Yığın",
+		"webcamShape": "Kamera Şekli",
+		"dualFrame": "Çift Kare",
+		"webcamSize": "Webcam Boyutu",
+		"noWebcam": "Web kamerası yok"
+	},
+	"effects": {
+		"title": "Video Efektleri",
+		"blurBg": "Arka Planı Bulanıklaştır",
+		"motionBlur": "Hareket Bulanıklığı",
+		"off": "kapalı",
+		"shadow": "Gölge",
+		"roundness": "Yuvarlaklık",
+		"padding": "Dolgu",
+		"on": "açık"
+	},
+	"background": {
+		"title": "Arka Plan",
+		"image": "Görüntü",
+		"color": "Renk",
+		"gradient": "Gradyan",
+		"uploadCustom": "Özel Yükle",
+		"gradientLabel": "Gradyan {{index}}",
+		"colorWheel": "Renk çarkı",
+		"colorPalette": "Renk paleti"
+	},
+	"crop": {
+		"title": "Kırpma",
+		"cropVideo": "Videoyu Kırp",
+		"dragInstruction": "Kırpma alanını ayarlamak için her kenarı sürükleyin",
+		"ratio": "Oran",
+		"free": "Serbest",
+		"done": "Tamam",
+		"lockAspectRatio": "En boy oranını kilitle",
+		"unlockAspectRatio": "En boy oranının kilidini aç"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 Video",
+		"mp4Description": "Yüksek kaliteli video dosyası",
+		"gifAnimation": "GIF Animasyon",
+		"gifDescription": "Paylaşım için hareketli görüntü"
+	},
+	"exportQuality": {
+		"title": "Dışa aktarma çözünürlüğü",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "GIF Kare Hızı",
+		"size": "GIF Boyutu",
+		"loop": "GIF Döngüsü"
+	},
+	"project": {
+		"save": "Projeyi Kaydet",
+		"load": "Proje Yükle"
+	},
+	"export": {
+		"videoButton": "Videoyu Dışa Aktar",
+		"gifButton": "GIF Olarak Dışa Aktar",
+		"chooseSaveLocation": "Kayıt Konumu Seç"
+	},
+	"support": {
+		"reportBug": "Hata Bildir",
+		"saveDiagnostics": "Teşhis Verilerini Kaydet",
+		"starOnGithub": "GitHub'da Yıldızla"
+	},
+	"imageUpload": {
+		"invalidFileType": "Geçersiz dosya türü",
+		"jpgOnly": "Lütfen JPG, JPEG veya PNG görüntü dosyası yükleyin.",
+		"uploadSuccess": "Özel görüntü başarıyla yüklendi!",
+		"failedToUpload": "Görüntü yüklenemedi",
+		"errorReading": "Dosya okunurken bir hata oluştu."
+	},
+	"annotation": {
+		"title": "Açıklama Ayarları",
+		"active": "Aktif",
+		"typeText": "Metin",
+		"typeImage": "Görüntü",
+		"typeArrow": "Ok",
+		"typeBlur": "Bulanık",
+		"textContent": "Metin İçeriği",
+		"textPlaceholder": "Metninizi girin...",
+		"fontStyle": "Yazı Tipi Stili",
+		"selectStyle": "Stil seçin",
+		"size": "Boyut",
+		"customFonts": "Özel Yazı Tipleri",
+		"textColor": "Metin Rengi",
+		"background": "Arka Plan",
+		"none": "Yok",
+		"color": "Renk",
+		"colorWheel": "Renk çarkı",
+		"colorPalette": "Renk paleti",
+		"clearBackground": "Arka Planı Temizle",
+		"uploadImage": "Görüntü Yükle",
+		"supportedFormats": "Desteklenen biçimler: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Ok Yönü",
+		"strokeWidth": "Çizgi Kalınlığı: {{width}}px",
+		"arrowColor": "Ok Rengi",
+		"blurShape": "Bulanık Şekli",
+		"blurIntensity": "Bulanıklık Yoğunluğu",
+		"blurShapeRectangle": "Dikdörtgen",
+		"blurShapeOval": "Oval",
+		"blurShapeFreehand": "Serbest",
+		"deleteAnnotation": "Açıklamayı Sil",
+		"shortcutsAndTips": "Kısayollar ve İpuçları",
+		"tipMovePlayhead": "Oynatma imlecini çakışan açıklama bölümüne taşıyın ve bir öğe seçin.",
+		"tipTabCycle": "Çakışan öğeler arasında geçiş yapmak için Tab tuşunu kullanın.",
+		"tipShiftTabCycle": "Geriye doğru geçiş yapmak için Shift+Tab kullanın.",
+		"invalidImageType": "Geçersiz dosya türü",
+		"imageFormatsOnly": "Lütfen bir JPG, PNG, GIF veya WebP görüntü dosyası yükleyin.",
+		"imageUploadSuccess": "Görüntü başarıyla yüklendi!",
+		"failedImageUpload": "Görüntü yüklenemedi",
+		"blurColor": "Bulanıklık Rengi",
+		"blurColorBlack": "Siyah",
+		"blurColorWhite": "Beyaz",
+		"blurType": "Bulanıklık Türü",
+		"blurTypeBlur": "Bulanık",
+		"blurTypeMosaic": "Mozaik Bulanıklık",
+		"mosaicBlockSize": "Mozaik Blok Boyutu"
+	},
+	"fontStyles": {
+		"classic": "Klasik",
+		"editor": "Editör",
+		"strong": "Kalın",
+		"typewriter": "Daktilo",
+		"deco": "Dekoratif",
+		"simple": "Sade",
+		"modern": "Modern",
+		"clean": "Temiz"
+	},
+	"customFont": {
+		"dialogTitle": "Google Yazı Tipi Ekle",
+		"urlLabel": "Google Fonts İçe Aktarım URL'si",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Google Fonts'tan alabilirsiniz: Bir yazı tipi seçin → \"Get font\"a tıklayın → @import URL'sini kopyalayın",
+		"nameLabel": "Görünen Ad",
+		"namePlaceholder": "Özel Yazı Tipim",
+		"nameHelp": "Yazı tipinin seçicide nasıl görüneceğini belirler",
+		"addButton": "Yazı Tipi Ekle",
+		"addingButton": "Ekleniyor...",
+		"errorEmptyUrl": "Lütfen bir Google Fonts içe aktarım URL'si girin",
+		"errorInvalidUrl": "Lütfen geçerli bir Google Fonts URL'si girin",
+		"errorEmptyName": "Lütfen bir yazı tipi adı girin",
+		"errorExtractFailed": "URL'den yazı tipi ailesi çıkarılamadı",
+		"successMessage": "\"{{fontName}}\" yazı tipi başarıyla eklendi",
+		"failedToAdd": "Yazı tipi eklenemedi",
+		"errorTimeout": "Yazı tipinin yüklenmesi çok uzun sürdü. Lütfen URL'yi kontrol edip tekrar deneyin.",
+		"errorLoadFailed": "Yazı tipi yüklenemedi. Lütfen Google Fonts URL'sinin doğruluğunu kontrol edin."
+	},
+	"cursor": {
+		"show": "İmleci Göster",
+		"size": "Boyut",
+		"smoothing": "Yumuşatma",
+		"motionBlur": "Hareket Bulanıklığı",
+		"clickBounce": "Tıklama Sıçraması",
+		"clipToBounds": "Tuvale Kırp"
+	},
+	"language": {
+		"title": "Dil"
+	}
+}
diff --git a/src/i18n/locales/tr/shortcuts.json b/src/i18n/locales/tr/shortcuts.json
new file mode 100644
index 0000000..69b28ed
--- /dev/null
+++ b/src/i18n/locales/tr/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Klavye Kısayolları",
+	"customize": "Özelleştir",
+	"configurable": "Yapılandırılabilir",
+	"fixed": "Sabit",
+	"pressKey": "Bir tuşa basın…",
+	"clickToChange": "Değiştirmek için tıklayın",
+	"pressEscToCancel": "İptal etmek için Esc tuşuna basın",
+	"helpText": "Bir kısayola tıklayın, ardından yeni tuş kombinasyonuna basın. İptal etmek için Esc tuşuna basın.",
+	"resetToDefaults": "Varsayılanlara sıfırla",
+	"alreadyUsedBy": "\"{{action}}\" tarafından zaten kullanılıyor",
+	"swap": "Değiştir",
+	"reservedShortcut": "Bu kısayol \"{{label}}\" için ayrılmıştır ve yeniden atanamaz.",
+	"savedToast": "Klavye kısayolları kaydedildi",
+	"resetToast": "Varsayılan kısayollara sıfırlandı — uygulamak için Kaydet'e tıklayın",
+	"actions": {
+		"addZoom": "Yakınlaştırma Ekle",
+		"addTrim": "Kırpma Ekle",
+		"addSpeed": "Hız Ekle",
+		"addAnnotation": "Açıklama Ekle",
+		"addBlur": "Bulanik Ekle",
+		"addKeyframe": "Anahtar Kare Ekle",
+		"deleteSelected": "Seçileni Sil",
+		"playPause": "Oynat / Duraklat"
+	},
+	"fixedActions": {
+		"undo": "Geri Al",
+		"redo": "Yinele",
+		"cycleAnnotationsForward": "Açıklamalar Arasında İleri Geç",
+		"cycleAnnotationsBackward": "Açıklamalar Arasında Geri Geç",
+		"deleteSelectedAlt": "Seçileni Sil (alternatif)",
+		"panTimeline": "Zaman Çizelgesini Kaydır",
+		"zoomTimeline": "Zaman Çizelgesini Yakınlaştır",
+		"frameBack": "Önceki Kare",
+		"frameForward": "Sonraki Kare"
+	}
+}
diff --git a/src/i18n/locales/tr/timeline.json b/src/i18n/locales/tr/timeline.json
new file mode 100644
index 0000000..2632f7a
--- /dev/null
+++ b/src/i18n/locales/tr/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Yakınlaştırma Ekle (Z)",
+		"suggestZooms": "İmleçten Yakınlaştırma Öner",
+		"addTrim": "Kırpma Ekle (T)",
+		"addAnnotation": "Açıklama Ekle (A)",
+		"addSpeed": "Hız Ekle (S)",
+		"addBlur": "Bulanık ekle (B)"
+	},
+	"hints": {
+		"pressZoom": "Yakınlaştırma eklemek için Z tuşuna basın",
+		"pressTrim": "Kırpma eklemek için T tuşuna basın",
+		"pressAnnotation": "Açıklama eklemek için A tuşuna basın",
+		"pressSpeed": "Hız eklemek için S tuşuna basın",
+		"pressBlur": "Bulanık bölge eklemek için B tuşuna basın"
+	},
+	"labels": {
+		"pan": "Kaydır",
+		"zoom": "Yakınlaştır",
+		"trim": "Kırp",
+		"speed": "Hız",
+		"zoomItem": "Yakınlaştırma {{index}}",
+		"trimItem": "Kırpma {{index}}",
+		"speedItem": "Hız {{index}}",
+		"annotationItem": "Açıklama",
+		"imageItem": "Görüntü",
+		"emptyText": "Boş metin",
+		"blurItem": "Bulanık {{index}}"
+	},
+	"emptyState": {
+		"noVideo": "Video Yüklenmedi",
+		"dragAndDrop": "Düzenlemeye başlamak için bir video sürükleyip bırakın"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Buraya yakınlaştırma yerleştirilemiyor",
+		"zoomExistsAtLocation": "Bu konumda zaten bir yakınlaştırma var veya yeterli alan yok.",
+		"zoomSuggestionUnavailable": "Yakınlaştırma öneri işleyicisi kullanılamıyor",
+		"noCursorTelemetry": "İmleç telemetrisi mevcut değil",
+		"noCursorTelemetryDescription": "İmleç tabanlı öneriler oluşturmak için önce bir ekran kaydı yapın.",
+		"noUsableTelemetry": "Kullanılabilir imleç telemetrisi yok",
+		"noUsableTelemetryDescription": "Kayıt yeterli imleç hareketi verisi içermiyor.",
+		"noDwellMoments": "Belirgin imleç bekleme anları bulunamadı",
+		"noDwellMomentsDescription": "Önemli işlemlerde daha yavaş imleç duraklamaları olan bir kayıt deneyin.",
+		"noAutoZoomSlots": "Otomatik yakınlaştırma alanı yok",
+		"noAutoZoomSlotsDescription": "Algılanan bekleme noktaları mevcut yakınlaştırma bölgeleriyle çakışıyor.",
+		"cannotPlaceTrim": "Buraya kırpma yerleştirilemiyor",
+		"trimExistsAtLocation": "Bu konumda zaten bir kırpma var veya yeterli alan yok.",
+		"cannotPlaceSpeed": "Buraya hız yerleştirilemiyor",
+		"speedExistsAtLocation": "Bu konumda zaten bir hız bölgesi var veya yeterli alan yok."
+	},
+	"success": {
+		"addedZoomSuggestions": "{{count}} imleç tabanlı yakınlaştırma önerisi eklendi",
+		"addedZoomSuggestionsPlural": "{{count}} imleç tabanlı yakınlaştırma önerisi eklendi"
+	}
+}
diff --git a/src/i18n/locales/vi/common.json b/src/i18n/locales/vi/common.json
new file mode 100644
index 0000000..50c1f81
--- /dev/null
+++ b/src/i18n/locales/vi/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "Hủy",
+		"save": "Lưu",
+		"delete": "Xóa",
+		"close": "Đóng",
+		"share": "Chia sẻ",
+		"done": "Hoàn tất",
+		"open": "Mở",
+		"upload": "Tải lên",
+		"export": "Xuất",
+		"showInFolder": "Hiển thị trong thư mục",
+		"file": "Tệp",
+		"edit": "Chỉnh sửa",
+		"view": "Xem",
+		"window": "Cửa sổ",
+		"quit": "Thoát",
+		"stopRecording": "Dừng ghi hình",
+		"undo": "Hoàn tác",
+		"redo": "Làm lại",
+		"cut": "Cắt",
+		"copy": "Sao chép",
+		"paste": "Dán",
+		"selectAll": "Chọn tất cả",
+		"minimize": "Thu nhỏ",
+		"reload": "Tải lại",
+		"forceReload": "Buộc tải lại",
+		"toggleDevTools": "Bật/tắt công cụ nhà phát triển",
+		"actualSize": "Kích thước thực",
+		"zoomIn": "Phóng to",
+		"zoomOut": "Thu nhỏ",
+		"toggleFullScreen": "Bật/tắt toàn màn hình",
+		"recordingStatus": "Đang ghi: {{source}}",
+		"about": "Giới thiệu OpenScreen",
+		"services": "Dịch vụ",
+		"hide": "Ẩn OpenScreen",
+		"hideOthers": "Ẩn ứng dụng khác",
+		"unhide": "Hiển thị tất cả"
+	},
+	"playback": {
+		"play": "Phát",
+		"pause": "Tạm dừng",
+		"fullscreen": "Toàn màn hình",
+		"exitFullscreen": "Thoát toàn màn hình"
+	},
+	"locale": {
+		"name": "Tiếng Việt",
+		"short": "VI"
+	}
+}
diff --git a/src/i18n/locales/vi/dialogs.json b/src/i18n/locales/vi/dialogs.json
new file mode 100644
index 0000000..c94dbaa
--- /dev/null
+++ b/src/i18n/locales/vi/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "Xuất hoàn tất",
+		"yourFormatReady": "{{format}} của bạn đã sẵn sàng",
+		"showInFolder": "Hiển thị trong thư mục",
+		"finalizingVideo": "Đang hoàn tất xuất video...",
+		"compilingGifProgress": "Đang biên dịch GIF... {{progress}}%",
+		"compilingGifWait": "Đang biên dịch GIF... Có thể mất một lúc",
+		"takeMoment": "Có thể mất một chút thời gian...",
+		"failed": "Xuất thất bại",
+		"tryAgain": "Vui lòng thử lại",
+		"finalizingVideoTitle": "Hoàn tất video",
+		"compilingGif": "Biên dịch GIF",
+		"exportingFormat": "Đang xuất {{format}}",
+		"compiling": "Đang biên dịch",
+		"renderingFrames": "Kết xuất khung hình",
+		"processing": "Đang xử lý...",
+		"finalizing": "Đang hoàn tất...",
+		"compilingStatus": "Đang biên dịch...",
+		"status": "Trạng thái",
+		"format": "Định dạng",
+		"frames": "Khung hình",
+		"cancelExport": "Hủy xuất",
+		"savedSuccessfully": "Đã lưu {{format}} thành công!"
+	},
+	"tutorial": {
+		"triggerLabel": "Cách hoạt động của công cụ cắt",
+		"title": "Cách cắt video",
+		"description": "Hiểu cách cắt bỏ các phần không mong muốn trong video của bạn.",
+		"explanationBefore": "Công cụ Cắt hoạt động bằng cách xác định các đoạn bạn muốn",
+		"remove": "xóa",
+		"explanationMiddle": " — bất cứ thứ gì",
+		"covered": "được bao phủ",
+		"explanationAfter": "bởi một đoạn cắt màu đỏ sẽ bị loại bỏ khi bạn xuất.",
+		"visualExample": "Ví dụ trực quan",
+		"removed": "ĐÃ XÓA",
+		"kept": "Giữ lại",
+		"part1": "Phần 1",
+		"part2": "Phần 2",
+		"part3": "Phần 3",
+		"finalVideo": "Video cuối cùng",
+		"step1Title": "1. Thêm đoạn cắt",
+		"step1DescriptionBefore": "Nhấn ",
+		"step1DescriptionAfter": " hoặc nhấp vào biểu tượng cái kéo để đánh dấu một phần cần xóa.",
+		"step2Title": "2. Điều chỉnh",
+		"step2Description": "Kéo các cạnh của vùng màu đỏ để bao phủ chính xác những gì bạn muốn cắt bỏ."
+	},
+	"unsavedChanges": {
+		"title": "Thay đổi chưa được lưu",
+		"message": "Bạn có các thay đổi chưa được lưu.",
+		"detail": "Bạn có muốn lưu dự án của mình trước khi đóng không?",
+		"saveAndClose": "Lưu & Đóng",
+		"discardAndClose": "Bỏ qua & Đóng",
+		"loadProject": "Tải dự án…",
+		"saveProject": "Lưu dự án…",
+		"saveProjectAs": "Lưu dự án thành…"
+	},
+	"fileDialogs": {
+		"saveGif": "Lưu GIF đã xuất",
+		"saveVideo": "Lưu Video đã xuất",
+		"selectVideo": "Chọn tệp video",
+		"saveProject": "Lưu dự án OpenScreen",
+		"openProject": "Mở dự án OpenScreen",
+		"gifImage": "Hình ảnh GIF",
+		"mp4Video": "Video MP4",
+		"videoFiles": "Tệp Video",
+		"openscreenProject": "Dự án OpenScreen",
+		"allFiles": "Tất cả các tệp"
+	}
+}
diff --git a/src/i18n/locales/vi/editor.json b/src/i18n/locales/vi/editor.json
new file mode 100644
index 0000000..03e909f
--- /dev/null
+++ b/src/i18n/locales/vi/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "Quay lại Trình ghi",
+		"description": "Phiên hiện tại của bạn đã được lưu.",
+		"cancel": "Hủy",
+		"confirm": "Xác nhận"
+	},
+	"loadingVideo": "Đang tải video...",
+	"errors": {
+		"noVideoLoaded": "Chưa tải video nào",
+		"videoNotReady": "Video chưa sẵn sàng",
+		"unableToDetermineSourcePath": "Không thể xác định đường dẫn video gốc",
+		"failedToSaveGif": "Không thể lưu GIF",
+		"gifExportFailed": "Xuất GIF thất bại",
+		"failedToSaveVideo": "Không thể lưu video",
+		"exportFailed": "Xuất thất bại",
+		"exportFailedWithError": "Xuất thất bại: {{error}}",
+		"exportBackgroundLoadFailed": "Xuất thất bại: không thể tải hình nền ({{url}})",
+		"failedToSaveExport": "Không thể lưu bản xuất",
+		"failedToSaveExportedVideo": "Không thể lưu video đã xuất",
+		"failedToRevealInFolder": "Lỗi khi hiển thị trong thư mục: {{error}}"
+	},
+	"export": {
+		"canceled": "Đã hủy xuất",
+		"exportedSuccessfully": "Đã xuất {{format}} thành công"
+	},
+	"project": {
+		"saveCanceled": "Đã hủy lưu dự án",
+		"failedToSave": "Lưu dự án thất bại",
+		"savedTo": "Đã lưu dự án vào {{path}}",
+		"failedToLoad": "Tải dự án thất bại",
+		"invalidFormat": "Định dạng tệp dự án không hợp lệ",
+		"loadedFrom": "Đã tải dự án từ {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Yêu cầu quyền truy cập máy ảnh thất bại.",
+		"cameraBlocked": "Quyền truy cập máy ảnh bị chặn. Hãy bật nó trong cài đặt hệ thống để sử dụng webcam.",
+		"systemAudioUnavailable": "Âm thanh hệ thống không khả dụng. Ghi hình không có âm thanh hệ thống.",
+		"microphoneDenied": "Quyền truy cập micro bị từ chối. Sẽ tiếp tục ghi hình không có âm thanh.",
+		"cameraDenied": "Quyền truy cập máy ảnh bị từ chối. Sẽ tiếp tục ghi hình không có webcam.",
+		"cameraDisconnected": "Webcam bị ngắt kết nối.",
+		"cameraNotFound": "Không tìm thấy máy ảnh.",
+		"permissionDenied": "Quyền ghi hình bị từ chối. Vui lòng cho phép ghi màn hình.",
+		"accessibilityAllowAndRetry": "Cho phép OpenScreen truy cập Trợ năng, sau đó nhấn ghi lại để bắt đầu đếm ngược."
+	}
+}
diff --git a/src/i18n/locales/vi/launch.json b/src/i18n/locales/vi/launch.json
new file mode 100644
index 0000000..0972340
--- /dev/null
+++ b/src/i18n/locales/vi/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "Ẩn HUD",
+		"closeApp": "Đóng ứng dụng",
+		"restartRecording": "Khởi động lại ghi hình",
+		"cancelRecording": "Hủy ghi hình",
+		"pauseRecording": "Tạm dừng ghi hình",
+		"resumeRecording": "Tiếp tục ghi hình",
+		"openVideoFile": "Mở tệp video",
+		"openProject": "Mở dự án"
+	},
+	"audio": {
+		"enableSystemAudio": "Bật âm thanh hệ thống",
+		"disableSystemAudio": "Tắt âm thanh hệ thống",
+		"enableMicrophone": "Bật micro",
+		"disableMicrophone": "Tắt micro",
+		"defaultMicrophone": "Micro Mặc định"
+	},
+	"webcam": {
+		"enableWebcam": "Bật webcam",
+		"disableWebcam": "Tắt webcam",
+		"defaultCamera": "Máy ảnh Mặc định",
+		"searching": "Đang tìm kiếm...",
+		"noneFound": "Không tìm thấy máy ảnh",
+		"unavailable": "Máy ảnh không khả dụng"
+	},
+	"sourceSelector": {
+		"loading": "Đang tải nguồn...",
+		"screens": "Màn hình ({{count}})",
+		"windows": "Cửa sổ ({{count}})",
+		"defaultSourceName": "Màn hình"
+	},
+	"recording": {
+		"selectSource": "Vui lòng chọn một nguồn để ghi"
+	},
+	"language": "Ngôn ngữ",
+	"systemLanguagePrompt": {
+		"title": "Sử dụng ngôn ngữ hệ thống của bạn?",
+		"description": "Chúng tôi phát hiện {{language}} là ngôn ngữ hệ thống của bạn. Bạn có muốn chuyển OpenScreen sang {{language}} không?",
+		"switch": "Chuyển sang {{language}}",
+		"keepDefault": "Giữ ngôn ngữ hiện tại"
+	},
+	"cursor": {
+		"useEditableCursor": "Dùng con trỏ có thể chỉnh sửa",
+		"useSystemCursor": "Dùng con trỏ hệ thống"
+	},
+	"guide": {
+		"enableGuideMode": "Bật chế độ tạo hướng dẫn",
+		"disableGuideMode": "Tắt chế độ tạo hướng dẫn",
+		"addMarker": "Chụp mốc hướng dẫn (Ctrl hoặc Ctrl+F12)"
+	}
+}
diff --git a/src/i18n/locales/vi/settings.json b/src/i18n/locales/vi/settings.json
new file mode 100644
index 0000000..e83c799
--- /dev/null
+++ b/src/i18n/locales/vi/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "Giữ để xem trước hiệu ứng phóng to",
+		"level": "Mức độ thu phóng",
+		"selectRegion": "Chọn vùng thu phóng để điều chỉnh",
+		"deleteZoom": "Xóa thu phóng",
+		"focusMode": {
+			"title": "Chế độ lấy nét",
+			"manual": "Thủ công",
+			"auto": "Tự động",
+			"autoDescription": "Máy ảnh đi theo vị trí con trỏ đã ghi"
+		},
+		"customScale": "Thu phóng tùy chỉnh",
+		"position": {
+			"title": "Vị trí tiêu điểm",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = ngoài cùng trái / trên, 100 = ngoài cùng phải / dưới"
+		},
+		"threeD": {
+			"title": "Xoay 3D",
+			"preset": {
+				"iso": "Đẳng phối",
+				"left": "Trái",
+				"right": "Phải"
+			}
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Tốc độ phát",
+		"selectRegion": "Chọn vùng tốc độ để điều chỉnh",
+		"deleteRegion": "Xóa vùng tốc độ",
+		"customPlaybackSpeed": "Tốc độ phát tùy chỉnh",
+		"maxSpeedError": "Tốc độ không thể cao hơn 16×"
+	},
+	"trim": {
+		"deleteRegion": "Xóa vùng cắt"
+	},
+	"layout": {
+		"title": "Bố cục",
+		"preset": "Cài đặt sẵn",
+		"selectPreset": "Chọn cài đặt sẵn",
+		"pictureInPicture": "Hình trong hình",
+		"verticalStack": "Xếp chồng dọc",
+		"dualFrame": "Khung kép",
+		"webcamShape": "Hình dạng máy ảnh",
+		"webcamSize": "Kích thước Webcam",
+		"noWebcam": "Không có webcam"
+	},
+	"effects": {
+		"title": "Hiệu ứng video",
+		"blurBg": "Làm mờ nền",
+		"motionBlur": "Làm mờ chuyển động",
+		"off": "tắt",
+		"shadow": "Bóng đổ",
+		"roundness": "Độ bo tròn",
+		"padding": "Phần đệm",
+		"on": "bật"
+	},
+	"background": {
+		"title": "Nền",
+		"image": "Hình ảnh",
+		"color": "Màu sắc",
+		"gradient": "Dải màu",
+		"uploadCustom": "Tải lên tùy chỉnh",
+		"gradientLabel": "Dải màu {{index}}",
+		"colorPalette": "Bảng màu",
+		"colorWheel": "Vòng màu"
+	},
+	"crop": {
+		"title": "Cắt xén",
+		"cropVideo": "Cắt xén video",
+		"dragInstruction": "Kéo ở mỗi cạnh để điều chỉnh vùng cắt xén",
+		"ratio": "Tỷ lệ",
+		"free": "Tự do",
+		"done": "Hoàn tất",
+		"lockAspectRatio": "Khóa tỷ lệ khung hình",
+		"unlockAspectRatio": "Mở khóa tỷ lệ khung hình"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "Video MP4",
+		"mp4Description": "Tệp video chất lượng cao",
+		"gifAnimation": "Ảnh động GIF",
+		"gifDescription": "Hình ảnh động để chia sẻ"
+	},
+	"exportQuality": {
+		"title": "Độ phân giải xuất",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "Tốc độ khung hình GIF",
+		"size": "Kích thước GIF",
+		"loop": "Lặp lại GIF"
+	},
+	"project": {
+		"save": "Lưu dự án",
+		"load": "Tải dự án"
+	},
+	"export": {
+		"videoButton": "Xuất Video",
+		"gifButton": "Xuất GIF",
+		"chooseSaveLocation": "Chọn vị trí lưu"
+	},
+	"support": {
+		"reportBug": "Báo cáo lỗi",
+		"saveDiagnostics": "Lưu thông tin chẩn đoán",
+		"starOnGithub": "Đánh giá sao trên GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Loại tệp không hợp lệ",
+		"jpgOnly": "Vui lòng tải lên tệp hình ảnh JPG hoặc JPEG.",
+		"uploadSuccess": "Tải lên hình ảnh tùy chỉnh thành công!",
+		"failedToUpload": "Tải lên hình ảnh thất bại",
+		"errorReading": "Đã xảy ra lỗi khi đọc tệp."
+	},
+	"annotation": {
+		"title": "Cài đặt chú thích",
+		"active": "Hoạt động",
+		"typeText": "Văn bản",
+		"typeImage": "Hình ảnh",
+		"typeArrow": "Mũi tên",
+		"typeBlur": "Làm mờ",
+		"textContent": "Nội dung văn bản",
+		"textPlaceholder": "Nhập văn bản của bạn...",
+		"fontStyle": "Kiểu phông chữ",
+		"selectStyle": "Chọn kiểu",
+		"size": "Kích thước",
+		"customFonts": "Phông chữ tùy chỉnh",
+		"textColor": "Màu văn bản",
+		"background": "Nền",
+		"none": "Không có",
+		"color": "Màu sắc",
+		"clearBackground": "Xóa nền",
+		"uploadImage": "Tải lên hình ảnh",
+		"supportedFormats": "Định dạng hỗ trợ: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Hướng mũi tên",
+		"strokeWidth": "Độ dày nét: {{width}}px",
+		"arrowColor": "Màu mũi tên",
+		"blurType": "Loại làm mờ",
+		"blurTypeBlur": "Làm mờ",
+		"blurTypeMosaic": "Khảm",
+		"blurColor": "Màu làm mờ",
+		"blurColorWhite": "Trắng",
+		"blurColorBlack": "Đen",
+		"blurShape": "Hình dạng làm mờ",
+		"blurIntensity": "Cường độ làm mờ",
+		"mosaicBlockSize": "Kích thước khối khảm",
+		"blurShapeRectangle": "Chữ nhật",
+		"blurShapeOval": "Bầu dục",
+		"blurShapeFreehand": "Vẽ tự do",
+		"deleteAnnotation": "Xóa chú thích",
+		"shortcutsAndTips": "Phím tắt & Mẹo",
+		"tipMovePlayhead": "Di chuyển đầu phát đến phần chú thích chồng chéo và chọn một mục.",
+		"tipTabCycle": "Sử dụng Tab để chuyển qua các mục chồng chéo.",
+		"tipShiftTabCycle": "Sử dụng Shift+Tab để chuyển ngược lại.",
+		"invalidImageType": "Loại tệp không hợp lệ",
+		"imageFormatsOnly": "Vui lòng tải lên tệp hình ảnh JPG, PNG, GIF hoặc WebP.",
+		"imageUploadSuccess": "Tải lên hình ảnh thành công!",
+		"failedImageUpload": "Tải lên hình ảnh thất bại",
+		"colorPalette": "Bảng màu",
+		"colorWheel": "Vòng màu"
+	},
+	"fontStyles": {
+		"classic": "Cổ điển",
+		"editor": "Trình chỉnh sửa",
+		"strong": "Đậm",
+		"typewriter": "Máy đánh chữ",
+		"deco": "Trang trí",
+		"simple": "Đơn giản",
+		"modern": "Hiện đại",
+		"clean": "Sạch sẽ"
+	},
+	"customFont": {
+		"dialogTitle": "Thêm Google Font",
+		"urlLabel": "URL nhập Google Fonts",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Lấy từ Google Fonts: Chọn một phông chữ → Nhấp \"Get font\" → Sao chép URL @import",
+		"nameLabel": "Tên hiển thị",
+		"namePlaceholder": "Phông chữ tùy chỉnh của tôi",
+		"nameHelp": "Đây là cách phông chữ sẽ xuất hiện trong bộ chọn phông chữ",
+		"addButton": "Thêm phông chữ",
+		"addingButton": "Đang thêm...",
+		"errorEmptyUrl": "Vui lòng nhập URL nhập Google Fonts",
+		"errorInvalidUrl": "Vui lòng nhập URL Google Fonts hợp lệ",
+		"errorEmptyName": "Vui lòng nhập tên phông chữ",
+		"errorExtractFailed": "Không thể trích xuất họ phông chữ từ URL",
+		"successMessage": "Thêm phông chữ \"{{fontName}}\" thành công",
+		"failedToAdd": "Thêm phông chữ thất bại",
+		"errorTimeout": "Tải phông chữ mất quá nhiều thời gian. Vui lòng kiểm tra URL và thử lại.",
+		"errorLoadFailed": "Không thể tải phông chữ. Vui lòng xác minh URL Google Fonts là chính xác."
+	},
+	"cursor": {
+		"show": "Hiện con trỏ",
+		"size": "Kích thước",
+		"smoothing": "Làm mượt",
+		"motionBlur": "Làm mờ chuyển động",
+		"clickBounce": "Nảy khi nhấp",
+		"clipToBounds": "Cắt theo khung"
+	},
+	"language": {
+		"title": "Ngôn ngữ"
+	}
+}
diff --git a/src/i18n/locales/vi/shortcuts.json b/src/i18n/locales/vi/shortcuts.json
new file mode 100644
index 0000000..918254f
--- /dev/null
+++ b/src/i18n/locales/vi/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "Phím tắt",
+	"customize": "Tùy chỉnh",
+	"configurable": "Có thể định cấu hình",
+	"fixed": "Cố định",
+	"pressKey": "Nhấn một phím…",
+	"clickToChange": "Nhấp để thay đổi",
+	"pressEscToCancel": "Nhấn Esc để hủy",
+	"helpText": "Nhấp vào một phím tắt rồi nhấn tổ hợp phím mới. Nhấn Esc để hủy.",
+	"resetToDefaults": "Khôi phục mặc định",
+	"alreadyUsedBy": "Đã được sử dụng bởi {{action}}",
+	"swap": "Hoán đổi",
+	"reservedShortcut": "Phím tắt này được dành riêng cho \"{{label}}\" và không thể gán lại.",
+	"savedToast": "Đã lưu phím tắt",
+	"resetToast": "Đã đặt lại về phím tắt mặc định — nhấp Lưu để áp dụng",
+	"actions": {
+		"addZoom": "Thêm Thu phóng",
+		"addTrim": "Thêm Cắt",
+		"addSpeed": "Thêm Tốc độ",
+		"addAnnotation": "Thêm Chú thích",
+		"addBlur": "Thêm Làm mờ",
+		"addKeyframe": "Thêm Khung hình chính",
+		"deleteSelected": "Xóa mục đã chọn",
+		"playPause": "Phát / Tạm dừng"
+	},
+	"fixedActions": {
+		"undo": "Hoàn tác",
+		"redo": "Làm lại",
+		"cycleAnnotationsForward": "Chuyển tiếp qua các chú thích",
+		"cycleAnnotationsBackward": "Chuyển lùi qua các chú thích",
+		"deleteSelectedAlt": "Xóa mục đã chọn (alt)",
+		"panTimeline": "Xoay Trục thời gian",
+		"zoomTimeline": "Thu phóng Trục thời gian",
+		"frameBack": "Lùi một khung hình",
+		"frameForward": "Tiến một khung hình"
+	}
+}
diff --git a/src/i18n/locales/vi/timeline.json b/src/i18n/locales/vi/timeline.json
new file mode 100644
index 0000000..a01dfe4
--- /dev/null
+++ b/src/i18n/locales/vi/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "Thêm Thu phóng (Z)",
+		"suggestZooms": "Đề xuất Thu phóng từ Con trỏ",
+		"addTrim": "Thêm Cắt (T)",
+		"addAnnotation": "Thêm Chú thích (A)",
+		"addBlur": "Thêm Làm mờ (B)",
+		"addSpeed": "Thêm Tốc độ (S)"
+	},
+	"hints": {
+		"pressZoom": "Nhấn Z để thêm thu phóng",
+		"pressTrim": "Nhấn T để thêm cắt",
+		"pressAnnotation": "Nhấn A để thêm chú thích",
+		"pressBlur": "Nhấn B để thêm vùng làm mờ",
+		"pressSpeed": "Nhấn S để thêm tốc độ"
+	},
+	"labels": {
+		"pan": "Xoay",
+		"zoom": "Thu phóng",
+		"trim": "Cắt",
+		"speed": "Tốc độ",
+		"zoomItem": "Thu phóng {{index}}",
+		"trimItem": "Cắt {{index}}",
+		"speedItem": "Tốc độ {{index}}",
+		"annotationItem": "Chú thích",
+		"blurItem": "Làm mờ {{index}}",
+		"imageItem": "Hình ảnh",
+		"emptyText": "Văn bản trống"
+	},
+	"emptyState": {
+		"noVideo": "Chưa tải video",
+		"dragAndDrop": "Kéo và thả video để bắt đầu chỉnh sửa"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Không thể đặt thu phóng ở đây",
+		"zoomExistsAtLocation": "Thu phóng đã tồn tại ở vị trí này hoặc không có đủ không gian.",
+		"zoomSuggestionUnavailable": "Trình xử lý đề xuất thu phóng không khả dụng",
+		"noCursorTelemetry": "Không có dữ liệu từ xa của con trỏ",
+		"noCursorTelemetryDescription": "Ghi hình màn hình trước để tạo các đề xuất dựa trên con trỏ.",
+		"noUsableTelemetry": "Không có dữ liệu từ xa của con trỏ có thể sử dụng",
+		"noUsableTelemetryDescription": "Bản ghi không chứa đủ dữ liệu chuyển động của con trỏ.",
+		"noDwellMoments": "Không tìm thấy khoảnh khắc dừng con trỏ rõ ràng",
+		"noDwellMomentsDescription": "Thử ghi hình với các lần tạm dừng con trỏ chậm hơn ở các thao tác quan trọng.",
+		"noAutoZoomSlots": "Không có khe thu phóng tự động nào",
+		"noAutoZoomSlotsDescription": "Các điểm dừng được phát hiện chồng chéo với các vùng thu phóng hiện có.",
+		"cannotPlaceTrim": "Không thể đặt cắt ở đây",
+		"trimExistsAtLocation": "Cắt đã tồn tại ở vị trí này hoặc không có đủ không gian.",
+		"cannotPlaceSpeed": "Không thể đặt tốc độ ở đây",
+		"speedExistsAtLocation": "Vùng tốc độ đã tồn tại ở vị trí này hoặc không có đủ không gian."
+	},
+	"success": {
+		"addedZoomSuggestions": "Đã thêm {{count}} đề xuất thu phóng dựa trên con trỏ",
+		"addedZoomSuggestionsPlural": "Đã thêm {{count}} đề xuất thu phóng dựa trên con trỏ"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json
new file mode 100644
index 0000000..e1b8ffc
--- /dev/null
+++ b/src/i18n/locales/zh-CN/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "取消",
+		"save": "保存",
+		"delete": "删除",
+		"close": "关闭",
+		"share": "分享",
+		"done": "完成",
+		"open": "打开",
+		"upload": "上传",
+		"export": "导出",
+		"showInFolder": "在文件夹中显示",
+		"file": "文件",
+		"edit": "编辑",
+		"view": "视图",
+		"window": "窗口",
+		"quit": "退出",
+		"stopRecording": "停止录制",
+		"undo": "撤销",
+		"redo": "重做",
+		"cut": "剪切",
+		"copy": "复制",
+		"paste": "粘贴",
+		"selectAll": "全选",
+		"minimize": "最小化",
+		"reload": "重新加载",
+		"forceReload": "强制重新加载",
+		"toggleDevTools": "切换开发者工具",
+		"actualSize": "实际大小",
+		"zoomIn": "放大",
+		"zoomOut": "缩小",
+		"toggleFullScreen": "切换全屏",
+		"recordingStatus": "正在录制：{{source}}",
+		"about": "关于 OpenScreen",
+		"services": "服务",
+		"hide": "隐藏 OpenScreen",
+		"hideOthers": "隐藏其他",
+		"unhide": "显示全部"
+	},
+	"playback": {
+		"play": "播放",
+		"pause": "暂停",
+		"fullscreen": "全屏",
+		"exitFullscreen": "退出全屏"
+	},
+	"locale": {
+		"name": "简体中文",
+		"short": "简中"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/dialogs.json b/src/i18n/locales/zh-CN/dialogs.json
new file mode 100644
index 0000000..0385b36
--- /dev/null
+++ b/src/i18n/locales/zh-CN/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "导出完成",
+		"yourFormatReady": "您的 {{format}} 已准备就绪",
+		"showInFolder": "在文件夹中显示",
+		"finalizingVideo": "正在完成视频导出...",
+		"compilingGifProgress": "正在编译 GIF... {{progress}}%",
+		"compilingGifWait": "正在编译 GIF... 这可能需要一些时间",
+		"takeMoment": "这可能需要一点时间...",
+		"failed": "导出失败",
+		"tryAgain": "请重试",
+		"finalizingVideoTitle": "正在完成视频",
+		"compilingGif": "正在编译 GIF",
+		"exportingFormat": "正在导出 {{format}}",
+		"compiling": "编译中",
+		"renderingFrames": "渲染帧",
+		"processing": "处理中...",
+		"finalizing": "正在完成...",
+		"compilingStatus": "编译中...",
+		"status": "状态",
+		"format": "格式",
+		"frames": "帧",
+		"cancelExport": "取消导出",
+		"savedSuccessfully": "{{format}} 保存成功！"
+	},
+	"tutorial": {
+		"triggerLabel": "剪辑功能说明",
+		"title": "剪辑功能说明",
+		"description": "了解如何剪掉视频中不需要的部分。",
+		"explanationBefore": "剪辑工具通过定义您要",
+		"remove": "移除",
+		"explanationMiddle": "——任何被",
+		"covered": "覆盖",
+		"explanationAfter": "的红色剪辑区域部分将在导出时被剪掉。",
+		"visualExample": "示例演示",
+		"removed": "已移除",
+		"kept": "保留",
+		"part1": "第 1 部分",
+		"part2": "第 2 部分",
+		"part3": "第 3 部分",
+		"finalVideo": "最终视频",
+		"step1Title": "1. 添加剪辑",
+		"step1DescriptionBefore": "按",
+		"step1DescriptionAfter": "键或点击剪刀图标来标记要移除的片段。",
+		"step2Title": "2. 调整",
+		"step2Description": "拖动红色区域的边缘，精确覆盖您要剪掉的部分。"
+	},
+	"unsavedChanges": {
+		"title": "未保存的更改",
+		"message": "您有未保存的更改。",
+		"detail": "是否在关闭前保存项目？",
+		"saveAndClose": "保存并关闭",
+		"discardAndClose": "放弃并关闭",
+		"loadProject": "加载项目…",
+		"saveProject": "保存项目…",
+		"saveProjectAs": "项目另存为…"
+	},
+	"fileDialogs": {
+		"saveGif": "保存导出的 GIF",
+		"saveVideo": "保存导出的视频",
+		"selectVideo": "选择视频文件",
+		"saveProject": "保存 OpenScreen 项目",
+		"openProject": "打开 OpenScreen 项目",
+		"gifImage": "GIF 图片",
+		"mp4Video": "MP4 视频",
+		"videoFiles": "视频文件",
+		"openscreenProject": "OpenScreen 项目",
+		"allFiles": "所有文件"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/editor.json b/src/i18n/locales/zh-CN/editor.json
new file mode 100644
index 0000000..56a36f8
--- /dev/null
+++ b/src/i18n/locales/zh-CN/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "返回录屏",
+		"description": "当前会话已保存。",
+		"cancel": "取消",
+		"confirm": "确认"
+	},
+	"loadingVideo": "正在加载视频...",
+	"errors": {
+		"noVideoLoaded": "未加载视频",
+		"videoNotReady": "视频未就绪",
+		"unableToDetermineSourcePath": "无法确定源视频路径",
+		"failedToSaveGif": "保存 GIF 失败",
+		"gifExportFailed": "GIF 导出失败",
+		"failedToSaveVideo": "保存视频失败",
+		"exportFailed": "导出失败",
+		"exportFailedWithError": "导出失败：{{error}}",
+		"exportBackgroundLoadFailed": "导出失败：无法加载背景图片（{{url}}）",
+		"failedToSaveExport": "保存导出文件失败",
+		"failedToSaveExportedVideo": "保存导出的视频失败",
+		"failedToRevealInFolder": "在文件夹中显示时出错：{{error}}"
+	},
+	"export": {
+		"canceled": "导出已取消",
+		"exportedSuccessfully": "{{format}} 导出成功"
+	},
+	"project": {
+		"saveCanceled": "项目保存已取消",
+		"failedToSave": "保存项目失败",
+		"savedTo": "项目已保存至 {{path}}",
+		"failedToLoad": "加载项目失败",
+		"invalidFormat": "无效的项目文件格式",
+		"loadedFrom": "项目已从 {{path}} 加载"
+	},
+	"recording": {
+		"failedCameraAccess": "请求摄像头权限失败。",
+		"cameraBlocked": "摄像头权限已被阻止。请在系统设置中启用以使用摄像头。",
+		"systemAudioUnavailable": "系统音频不可用。将在无系统音频的情况下录制。",
+		"microphoneDenied": "麦克风权限被拒绝。录制将继续，但不包含音频。",
+		"cameraDenied": "摄像头权限被拒绝。录制将继续，但不包含摄像头画面。",
+		"cameraDisconnected": "摄像头已断开连接。",
+		"cameraNotFound": "未找到摄像头。",
+		"permissionDenied": "录屏权限被拒绝。请允许屏幕录制。",
+		"accessibilityAllowAndRetry": "允许 OpenScreen 使用辅助功能权限，然后再次按录制以开始倒计时。"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/launch.json b/src/i18n/locales/zh-CN/launch.json
new file mode 100644
index 0000000..f6d0012
--- /dev/null
+++ b/src/i18n/locales/zh-CN/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "隐藏控制面板",
+		"closeApp": "关闭应用",
+		"restartRecording": "重新开始录制",
+		"cancelRecording": "取消录制",
+		"pauseRecording": "暂停录制",
+		"resumeRecording": "继续录制",
+		"openVideoFile": "打开视频文件",
+		"openProject": "打开项目"
+	},
+	"audio": {
+		"enableSystemAudio": "启用系统音频",
+		"disableSystemAudio": "禁用系统音频",
+		"enableMicrophone": "启用麦克风",
+		"disableMicrophone": "禁用麦克风",
+		"defaultMicrophone": "默认麦克风"
+	},
+	"webcam": {
+		"enableWebcam": "启用摄像头",
+		"disableWebcam": "禁用摄像头",
+		"defaultCamera": "默认摄像头",
+		"searching": "正在搜索...",
+		"noneFound": "未找到摄像头",
+		"unavailable": "摄像头不可用"
+	},
+	"cursor": {
+		"useEditableCursor": "使用可编辑光标",
+		"useSystemCursor": "使用系统光标"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "正在加载源...",
+		"screens": "屏幕 ({{count}})",
+		"windows": "窗口 ({{count}})",
+		"defaultSourceName": "屏幕"
+	},
+	"recording": {
+		"selectSource": "请选择要录制的源"
+	},
+	"language": "语言",
+	"systemLanguagePrompt": {
+		"title": "使用系统语言吗？",
+		"description": "我们检测到你的系统语言是{{language}}。是否将 OpenScreen 切换为{{language}}？",
+		"switch": "切换到{{language}}",
+		"keepDefault": "保持当前语言"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
new file mode 100644
index 0000000..b9b516a
--- /dev/null
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -0,0 +1,207 @@
+{
+	"zoom": {
+		"previewHold": "按住预览放大效果",
+		"level": "缩放级别",
+		"selectRegion": "选择要调整的缩放区域",
+		"deleteZoom": "删除缩放",
+		"focusMode": {
+			"title": "对焦模式",
+			"manual": "手动",
+			"auto": "自动",
+			"autoDescription": "摄像头跟随录制时的光标位置"
+		},
+		"threeD": {
+			"title": "3D 旋转",
+			"preset": {
+				"iso": "Iso",
+				"left": "左",
+				"right": "右"
+			}
+		},
+		"customScale": "自定义缩放",
+		"position": {
+			"title": "焦点位置",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = 最左 / 最上，100 = 最右 / 最下"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "播放速度",
+		"selectRegion": "选择要调整的速度区域",
+		"deleteRegion": "删除速度区域",
+		"customPlaybackSpeed": "自定义播放速度",
+		"maxSpeedError": "速度不能超过 16×"
+	},
+	"trim": {
+		"deleteRegion": "删除剪辑区域"
+	},
+	"layout": {
+		"title": "布局",
+		"preset": "预设",
+		"selectPreset": "选择预设",
+		"pictureInPicture": "画中画",
+		"verticalStack": "垂直堆叠",
+		"dualFrame": "双画框",
+		"webcamShape": "摄像头形状",
+		"webcamSize": "摄像头大小",
+		"noWebcam": "无摄像头"
+	},
+	"effects": {
+		"title": "视频效果",
+		"blurBg": "模糊背景",
+		"motionBlur": "运动模糊",
+		"off": "关",
+		"shadow": "阴影",
+		"roundness": "圆角",
+		"padding": "内边距",
+		"on": "开"
+	},
+	"background": {
+		"title": "背景",
+		"image": "图片",
+		"color": "颜色",
+		"gradient": "渐变",
+		"uploadCustom": "上传自定义",
+		"gradientLabel": "渐变 {{index}}",
+		"colorWheel": "颜色轮",
+		"colorPalette": "颜色调色板"
+	},
+	"crop": {
+		"title": "裁剪",
+		"cropVideo": "裁剪视频",
+		"dragInstruction": "拖动每一侧来调整裁剪区域",
+		"ratio": "比例",
+		"free": "自由",
+		"done": "完成",
+		"lockAspectRatio": "锁定宽高比",
+		"unlockAspectRatio": "解锁宽高比"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 视频",
+		"mp4Description": "高质量视频文件",
+		"gifAnimation": "GIF 动画",
+		"gifDescription": "可分享的动态图片"
+	},
+	"exportQuality": {
+		"title": "导出分辨率",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "GIF 帧率",
+		"size": "GIF 尺寸",
+		"loop": "循环 GIF"
+	},
+	"project": {
+		"save": "保存项目",
+		"load": "加载项目"
+	},
+	"export": {
+		"videoButton": "导出视频",
+		"gifButton": "导出 GIF",
+		"chooseSaveLocation": "选择保存位置"
+	},
+	"support": {
+		"reportBug": "报告错误",
+		"saveDiagnostics": "保存诊断信息",
+		"starOnGithub": "在 GitHub 上加星"
+	},
+	"imageUpload": {
+		"invalidFileType": "无效的文件类型",
+		"jpgOnly": "请上传 JPG、JPEG 或 PNG 格式的图片文件。",
+		"uploadSuccess": "自定义图片上传成功！",
+		"failedToUpload": "上传图片失败",
+		"errorReading": "读取文件时出错。"
+	},
+	"annotation": {
+		"title": "标注设置",
+		"active": "活动",
+		"typeText": "文本",
+		"typeImage": "图片",
+		"typeArrow": "箭头",
+		"typeBlur": "模糊",
+		"textContent": "文本内容",
+		"textPlaceholder": "输入您的文本...",
+		"fontStyle": "字体样式",
+		"selectStyle": "选择样式",
+		"size": "大小",
+		"customFonts": "自定义字体",
+		"textColor": "文本颜色",
+		"background": "背景",
+		"none": "无",
+		"color": "颜色",
+		"colorWheel": "颜色轮",
+		"colorPalette": "颜色调色板",
+		"clearBackground": "清除背景",
+		"uploadImage": "上传图片",
+		"supportedFormats": "支持的格式：JPG、PNG、GIF、WebP",
+		"arrowDirection": "箭头方向",
+		"strokeWidth": "描边宽度：{{width}}px",
+		"arrowColor": "箭头颜色",
+		"blurShape": "模糊形状",
+		"blurIntensity": "模糊强度",
+		"blurShapeRectangle": "矩形",
+		"blurShapeOval": "椭圆",
+		"blurShapeFreehand": "自由手绘",
+		"deleteAnnotation": "删除标注",
+		"shortcutsAndTips": "快捷键与提示",
+		"tipMovePlayhead": "将播放头移动到重叠的标注区域并选择一个项目。",
+		"tipTabCycle": "使用 Tab 键在重叠项目之间循环切换。",
+		"tipShiftTabCycle": "使用 Shift+Tab 反向循环切换。",
+		"invalidImageType": "无效的文件类型",
+		"imageFormatsOnly": "请上传 JPG、PNG、GIF 或 WebP 格式的图片文件。",
+		"imageUploadSuccess": "图片上传成功！",
+		"failedImageUpload": "上传图片失败",
+		"blurColor": "模糊颜色",
+		"blurColorBlack": "黑色",
+		"blurColorWhite": "白色",
+		"blurType": "模糊类型",
+		"blurTypeBlur": "模糊",
+		"blurTypeMosaic": "马赛克模糊",
+		"mosaicBlockSize": "马赛克块大小"
+	},
+	"fontStyles": {
+		"classic": "经典",
+		"editor": "编辑器",
+		"strong": "粗体",
+		"typewriter": "打字机",
+		"deco": "装饰",
+		"simple": "简约",
+		"modern": "现代",
+		"clean": "简洁"
+	},
+	"customFont": {
+		"dialogTitle": "添加 Google 字体",
+		"urlLabel": "Google Fonts 导入 URL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "从 Google Fonts 获取：选择字体 → 点击 \"Get font\" → 复制 @import URL",
+		"nameLabel": "显示名称",
+		"namePlaceholder": "我的自定义字体",
+		"nameHelp": "这是字体在字体选择器中显示的名称",
+		"addButton": "添加字体",
+		"addingButton": "添加中...",
+		"errorEmptyUrl": "请输入 Google Fonts 导入 URL",
+		"errorInvalidUrl": "请输入有效的 Google Fonts URL",
+		"errorEmptyName": "请输入字体名称",
+		"errorExtractFailed": "无法从 URL 中提取字体系列",
+		"successMessage": "字体 \"{{fontName}}\" 添加成功",
+		"failedToAdd": "添加字体失败",
+		"errorTimeout": "字体加载时间过长。请检查 URL 并重试。",
+		"errorLoadFailed": "无法加载该字体。请确认 Google Fonts URL 是否正确。"
+	},
+	"cursor": {
+		"show": "显示光标",
+		"size": "大小",
+		"smoothing": "平滑",
+		"motionBlur": "运动模糊",
+		"clickBounce": "点击弹跳",
+		"clipToBounds": "裁剪到画布"
+	},
+	"language": {
+		"title": "语言"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/shortcuts.json b/src/i18n/locales/zh-CN/shortcuts.json
new file mode 100644
index 0000000..3328239
--- /dev/null
+++ b/src/i18n/locales/zh-CN/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "键盘快捷键",
+	"customize": "自定义",
+	"configurable": "可配置",
+	"fixed": "固定",
+	"pressKey": "请按下按键…",
+	"clickToChange": "点击以更改",
+	"pressEscToCancel": "按 Esc 取消",
+	"helpText": "点击一个快捷键，然后按下新的组合键。按 Esc 取消。",
+	"resetToDefaults": "恢复默认设置",
+	"alreadyUsedBy": "已被 \"{{action}}\" 使用",
+	"swap": "交换",
+	"reservedShortcut": "此快捷键已保留给 \"{{label}}\"，无法重新分配。",
+	"savedToast": "键盘快捷键已保存",
+	"resetToast": "已恢复默认快捷键 — 点击保存以应用",
+	"actions": {
+		"addZoom": "添加缩放",
+		"addTrim": "添加剪辑",
+		"addSpeed": "添加速度",
+		"addAnnotation": "添加标注",
+		"addBlur": "添加模糊",
+		"addKeyframe": "添加关键帧",
+		"deleteSelected": "删除所选",
+		"playPause": "播放 / 暂停"
+	},
+	"fixedActions": {
+		"undo": "撤销",
+		"redo": "重做",
+		"cycleAnnotationsForward": "向前切换标注",
+		"cycleAnnotationsBackward": "向后切换标注",
+		"deleteSelectedAlt": "删除所选（替代）",
+		"panTimeline": "平移时间轴",
+		"zoomTimeline": "缩放时间轴",
+		"frameBack": "上一帧",
+		"frameForward": "下一帧"
+	}
+}
diff --git a/src/i18n/locales/zh-CN/timeline.json b/src/i18n/locales/zh-CN/timeline.json
new file mode 100644
index 0000000..783fef6
--- /dev/null
+++ b/src/i18n/locales/zh-CN/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "添加缩放 (Z)",
+		"suggestZooms": "根据光标建议缩放",
+		"addTrim": "添加剪辑 (T)",
+		"addAnnotation": "添加标注 (A)",
+		"addSpeed": "添加速度 (S)",
+		"addBlur": "添加模糊 (B)"
+	},
+	"hints": {
+		"pressZoom": "按 Z 添加缩放",
+		"pressTrim": "按 T 添加剪辑",
+		"pressAnnotation": "按 A 添加标注",
+		"pressSpeed": "按 S 添加速度",
+		"pressBlur": "按 B 添加模糊区域"
+	},
+	"labels": {
+		"pan": "平移",
+		"zoom": "缩放",
+		"trim": "剪辑",
+		"speed": "速度",
+		"zoomItem": "缩放 {{index}}",
+		"trimItem": "剪辑 {{index}}",
+		"speedItem": "速度 {{index}}",
+		"annotationItem": "标注",
+		"imageItem": "图片",
+		"emptyText": "空文本",
+		"blurItem": "模糊 {{index}}"
+	},
+	"emptyState": {
+		"noVideo": "未加载视频",
+		"dragAndDrop": "拖放视频以开始编辑"
+	},
+	"errors": {
+		"cannotPlaceZoom": "无法在此处放置缩放",
+		"zoomExistsAtLocation": "此位置已存在缩放或没有足够的空间。",
+		"zoomSuggestionUnavailable": "缩放建议处理器不可用",
+		"noCursorTelemetry": "无可用的光标遥测数据",
+		"noCursorTelemetryDescription": "请先录制一段屏幕录像以生成基于光标的建议。",
+		"noUsableTelemetry": "无可用的光标遥测数据",
+		"noUsableTelemetryDescription": "录制内容没有包含足够的光标移动数据。",
+		"noDwellMoments": "未找到明确的光标停留时刻",
+		"noDwellMomentsDescription": "请尝试在重要操作上进行较慢光标停留的录制。",
+		"noAutoZoomSlots": "无可用的自动缩放位置",
+		"noAutoZoomSlotsDescription": "检测到的停留点与现有缩放区域重叠。",
+		"cannotPlaceTrim": "无法在此处放置剪辑",
+		"trimExistsAtLocation": "此位置已存在剪辑或没有足够的空间。",
+		"cannotPlaceSpeed": "无法在此处放置速度",
+		"speedExistsAtLocation": "此位置已存在速度区域或没有足够的空间。"
+	},
+	"success": {
+		"addedZoomSuggestions": "已添加 {{count}} 个基于光标的缩放建议",
+		"addedZoomSuggestionsPlural": "已添加 {{count}} 个基于光标的缩放建议"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/common.json b/src/i18n/locales/zh-TW/common.json
new file mode 100644
index 0000000..39e78cd
--- /dev/null
+++ b/src/i18n/locales/zh-TW/common.json
@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "取消",
+		"save": "儲存",
+		"delete": "刪除",
+		"close": "關閉",
+		"share": "分享",
+		"done": "完成",
+		"open": "開啟",
+		"upload": "上傳",
+		"export": "匯出",
+		"showInFolder": "在資料夾中顯示",
+		"file": "檔案",
+		"edit": "編輯",
+		"view": "檢視",
+		"window": "視窗",
+		"quit": "退出",
+		"stopRecording": "停止錄製",
+		"undo": "復原",
+		"redo": "重做",
+		"cut": "剪下",
+		"copy": "複製",
+		"paste": "貼上",
+		"selectAll": "全選",
+		"minimize": "最小化",
+		"reload": "重新載入",
+		"forceReload": "強制重新載入",
+		"toggleDevTools": "切換開發者工具",
+		"actualSize": "實際大小",
+		"zoomIn": "放大",
+		"zoomOut": "縮小",
+		"toggleFullScreen": "切換全螢幕",
+		"recordingStatus": "錄製中：{{source}}",
+		"about": "關於 OpenScreen",
+		"services": "服務",
+		"hide": "隱藏 OpenScreen",
+		"hideOthers": "隱藏其他",
+		"unhide": "全部顯示"
+	},
+	"playback": {
+		"play": "播放",
+		"pause": "暫停",
+		"fullscreen": "全螢幕",
+		"exitFullscreen": "退出全螢幕"
+	},
+	"locale": {
+		"name": "繁體中文",
+		"short": "繁中"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/dialogs.json b/src/i18n/locales/zh-TW/dialogs.json
new file mode 100644
index 0000000..b582aba
--- /dev/null
+++ b/src/i18n/locales/zh-TW/dialogs.json
@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "匯出完成",
+		"yourFormatReady": "您的 {{format}} 已準備就緒",
+		"showInFolder": "在資料夾中顯示",
+		"finalizingVideo": "正在完成影片匯出...",
+		"compilingGifProgress": "正在編譯 GIF... {{progress}}%",
+		"compilingGifWait": "正在編譯 GIF... 這可能需要一些時間",
+		"takeMoment": "這可能需要一點時間...",
+		"failed": "匯出失敗",
+		"tryAgain": "請重試",
+		"finalizingVideoTitle": "正在完成影片",
+		"compilingGif": "正在編譯 GIF",
+		"exportingFormat": "正在匯出 {{format}}",
+		"compiling": "編譯中",
+		"renderingFrames": "渲染影格",
+		"processing": "處理中...",
+		"finalizing": "正在完成...",
+		"compilingStatus": "編譯中...",
+		"status": "狀態",
+		"format": "格式",
+		"frames": "影格",
+		"cancelExport": "取消匯出",
+		"savedSuccessfully": "{{format}} 儲存成功！"
+	},
+	"tutorial": {
+		"triggerLabel": "剪輯功能說明",
+		"title": "剪輯功能說明",
+		"description": "了解如何剪掉影片中不需要的部分。",
+		"explanationBefore": "剪輯工具透過定義您要",
+		"remove": "移除",
+		"explanationMiddle": "——任何被",
+		"covered": "覆蓋",
+		"explanationAfter": "的紅色剪輯區域部分將在匯出時被剪掉。",
+		"visualExample": "示例演示",
+		"removed": "已移除",
+		"kept": "保留",
+		"part1": "第 1 部分",
+		"part2": "第 2 部分",
+		"part3": "第 3 部分",
+		"finalVideo": "最終影片",
+		"step1Title": "1. 添加剪輯",
+		"step1DescriptionBefore": "按",
+		"step1DescriptionAfter": "鍵或點擊剪刀圖示來標記要移除的片段。",
+		"step2Title": "2. 調整",
+		"step2Description": "拖動紅色區域的邊緣，精確覆蓋您要剪掉的部分。"
+	},
+	"unsavedChanges": {
+		"title": "未儲存的變更",
+		"message": "您有未儲存的變更。",
+		"detail": "是否在關閉前儲存專案？",
+		"saveAndClose": "儲存並關閉",
+		"discardAndClose": "捨棄並關閉",
+		"loadProject": "載入專案…",
+		"saveProject": "儲存專案…",
+		"saveProjectAs": "專案另存新檔…"
+	},
+	"fileDialogs": {
+		"saveGif": "儲存匯出的 GIF",
+		"saveVideo": "儲存匯出的影片",
+		"selectVideo": "選擇影片檔案",
+		"saveProject": "儲存 OpenScreen 專案",
+		"openProject": "開啟 OpenScreen 專案",
+		"gifImage": "GIF 圖片",
+		"mp4Video": "MP4 影片",
+		"videoFiles": "影片檔案",
+		"openscreenProject": "OpenScreen 專案",
+		"allFiles": "所有檔案"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/editor.json b/src/i18n/locales/zh-TW/editor.json
new file mode 100644
index 0000000..d4ad23f
--- /dev/null
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -0,0 +1,46 @@
+{
+	"newRecording": {
+		"title": "返回錄影",
+		"description": "目前工作階段已儲存。",
+		"cancel": "取消",
+		"confirm": "確認"
+	},
+	"loadingVideo": "正在載入影片...",
+	"errors": {
+		"noVideoLoaded": "未載入影片",
+		"videoNotReady": "影片未就緒",
+		"unableToDetermineSourcePath": "無法確定來源影片路徑",
+		"failedToSaveGif": "儲存 GIF 失敗",
+		"gifExportFailed": "GIF 匯出失敗",
+		"failedToSaveVideo": "儲存影片失敗",
+		"exportFailed": "匯出失敗",
+		"exportFailedWithError": "匯出失敗：{{error}}",
+		"exportBackgroundLoadFailed": "匯出失敗：無法載入背景圖片（{{url}}）",
+		"failedToSaveExport": "儲存匯出檔案失敗",
+		"failedToSaveExportedVideo": "儲存匯出的影片失敗",
+		"failedToRevealInFolder": "在資料夾中顯示時出錯：{{error}}"
+	},
+	"export": {
+		"canceled": "匯出已取消",
+		"exportedSuccessfully": "{{format}} 匯出成功"
+	},
+	"project": {
+		"saveCanceled": "專案儲存已取消",
+		"failedToSave": "儲存專案失敗",
+		"savedTo": "專案已儲存至 {{path}}",
+		"failedToLoad": "載入專案失敗",
+		"invalidFormat": "無效的專案檔案格式",
+		"loadedFrom": "專案已從 {{path}} 載入"
+	},
+	"recording": {
+		"failedCameraAccess": "請求攝影機權限失敗。",
+		"cameraBlocked": "攝影機權限已被封鎖。請在系統設定中啟用以使用攝影機。",
+		"systemAudioUnavailable": "系統音訊不可用。將在無系統音訊的情況下錄製。",
+		"microphoneDenied": "麥克風權限被拒絕。錄製將繼續，但不包含音訊。",
+		"cameraDenied": "攝影機權限被拒絕。錄製將繼續，但不包含攝影機畫面。",
+		"permissionDenied": "錄影權限被拒絕。請允許螢幕錄製。",
+		"cameraDisconnected": "網路攝影機已中斷連線。",
+		"cameraNotFound": "找不到攝影機。",
+		"accessibilityAllowAndRetry": "允許 OpenScreen 使用輔助使用權限，然後再次按下錄製以開始倒數。"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/launch.json b/src/i18n/locales/zh-TW/launch.json
new file mode 100644
index 0000000..626b1cc
--- /dev/null
+++ b/src/i18n/locales/zh-TW/launch.json
@@ -0,0 +1,52 @@
+{
+	"tooltips": {
+		"hideHUD": "隱藏控制面板",
+		"closeApp": "關閉應用程式",
+		"restartRecording": "重新開始錄製",
+		"cancelRecording": "取消錄製",
+		"pauseRecording": "暫停錄製",
+		"resumeRecording": "繼續錄製",
+		"openVideoFile": "開啟影片檔案",
+		"openProject": "開啟專案"
+	},
+	"audio": {
+		"enableSystemAudio": "啟用系統音訊",
+		"disableSystemAudio": "停用系統音訊",
+		"enableMicrophone": "啟用麥克風",
+		"disableMicrophone": "停用麥克風",
+		"defaultMicrophone": "預設麥克風"
+	},
+	"webcam": {
+		"enableWebcam": "啟用攝影機",
+		"disableWebcam": "停用攝影機",
+		"defaultCamera": "預設攝影機",
+		"searching": "正在搜尋...",
+		"noneFound": "未找到攝影機",
+		"unavailable": "攝影機不可用"
+	},
+	"cursor": {
+		"useEditableCursor": "使用可編輯游標",
+		"useSystemCursor": "使用系統游標"
+	},
+	"guide": {
+		"enableGuideMode": "Enable guide mode",
+		"disableGuideMode": "Disable guide mode",
+		"addMarker": "Add guide marker"
+	},
+	"sourceSelector": {
+		"loading": "正在載入來源...",
+		"screens": "螢幕 ({{count}})",
+		"windows": "視窗 ({{count}})",
+		"defaultSourceName": "螢幕"
+	},
+	"recording": {
+		"selectSource": "請選擇要錄製的來源"
+	},
+	"language": "語言",
+	"systemLanguagePrompt": {
+		"title": "要使用系統語言嗎？",
+		"description": "偵測到系統語言為 {{language}}。要將 OpenScreen 切換為 {{language}} 嗎？",
+		"switch": "切換為 {{language}}",
+		"keepDefault": "保持目前語言"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/settings.json b/src/i18n/locales/zh-TW/settings.json
new file mode 100644
index 0000000..ee56459
--- /dev/null
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -0,0 +1,208 @@
+{
+	"zoom": {
+		"previewHold": "按住預覽放大效果",
+		"level": "縮放級別",
+		"selectRegion": "選擇要調整的縮放區域",
+		"deleteZoom": "刪除縮放",
+		"focusMode": {
+			"title": "對焦模式",
+			"manual": "手動",
+			"auto": "自動",
+			"autoDescription": "攝影機跟隨錄製時的游標位置"
+		},
+		"speed": {},
+		"threeD": {
+			"title": "3D 旋轉",
+			"preset": {
+				"iso": "Iso",
+				"left": "左",
+				"right": "右"
+			}
+		},
+		"customScale": "自訂縮放",
+		"position": {
+			"title": "焦點位置",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = 最左 / 最上，100 = 最右 / 最下"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "播放速度",
+		"selectRegion": "選擇要調整的速度區域",
+		"deleteRegion": "刪除速度區域",
+		"customPlaybackSpeed": "自訂播放速度",
+		"maxSpeedError": "速度不能超過 16×"
+	},
+	"trim": {
+		"deleteRegion": "刪除剪輯區域"
+	},
+	"layout": {
+		"title": "版面配置",
+		"preset": "預設",
+		"selectPreset": "選擇預設",
+		"pictureInPicture": "子母畫面",
+		"verticalStack": "垂直堆疊",
+		"dualFrame": "雙畫框",
+		"webcamShape": "攝影機形狀",
+		"webcamSize": "攝影機大小",
+		"noWebcam": "無網路攝影機"
+	},
+	"effects": {
+		"title": "影片效果",
+		"blurBg": "模糊背景",
+		"motionBlur": "動態模糊",
+		"off": "關",
+		"shadow": "陰影",
+		"roundness": "圓角",
+		"padding": "內邊距",
+		"on": "開"
+	},
+	"background": {
+		"title": "背景",
+		"image": "圖片",
+		"color": "顏色",
+		"gradient": "漸層",
+		"uploadCustom": "上傳自訂",
+		"gradientLabel": "漸層 {{index}}",
+		"colorWheel": "色輪",
+		"colorPalette": "調色盤"
+	},
+	"crop": {
+		"title": "裁剪",
+		"cropVideo": "裁剪影片",
+		"dragInstruction": "拖動每一側來調整裁剪區域",
+		"ratio": "比例",
+		"free": "自由",
+		"done": "完成",
+		"lockAspectRatio": "鎖定長寬比",
+		"unlockAspectRatio": "解鎖長寬比"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 影片",
+		"mp4Description": "高品質影片檔案",
+		"gifAnimation": "GIF 動畫",
+		"gifDescription": "可分享的動態圖片"
+	},
+	"exportQuality": {
+		"title": "匯出解析度",
+		"low": "720p",
+		"medium": "1080p",
+		"high": "Source"
+	},
+	"gifSettings": {
+		"frameRate": "GIF 影格率",
+		"size": "GIF 尺寸",
+		"loop": "循環 GIF"
+	},
+	"project": {
+		"save": "儲存專案",
+		"load": "載入專案"
+	},
+	"export": {
+		"videoButton": "匯出影片",
+		"gifButton": "匯出 GIF",
+		"chooseSaveLocation": "選擇儲存位置"
+	},
+	"support": {
+		"reportBug": "回報錯誤",
+		"saveDiagnostics": "儲存診斷資料",
+		"starOnGithub": "在 GitHub 上加星"
+	},
+	"imageUpload": {
+		"invalidFileType": "無效的檔案類型",
+		"jpgOnly": "請上傳 JPG、JPEG 或 PNG 格式的圖片檔案。",
+		"uploadSuccess": "自訂圖片上傳成功！",
+		"failedToUpload": "上傳圖片失敗",
+		"errorReading": "讀取檔案時出錯。"
+	},
+	"annotation": {
+		"title": "標註設定",
+		"active": "啟用",
+		"typeText": "文字",
+		"typeImage": "圖片",
+		"typeArrow": "箭頭",
+		"typeBlur": "模糊",
+		"textContent": "文字內容",
+		"textPlaceholder": "輸入您的文字...",
+		"fontStyle": "字體樣式",
+		"selectStyle": "選擇樣式",
+		"size": "大小",
+		"customFonts": "自訂字體",
+		"textColor": "文字顏色",
+		"background": "背景",
+		"none": "無",
+		"color": "顏色",
+		"colorWheel": "色輪",
+		"colorPalette": "調色盤",
+		"clearBackground": "清除背景",
+		"uploadImage": "上傳圖片",
+		"supportedFormats": "支援的格式：JPG、PNG、GIF、WebP",
+		"arrowDirection": "箭頭方向",
+		"strokeWidth": "描邊寬度：{{width}}px",
+		"arrowColor": "箭頭顏色",
+		"blurShape": "模糊形狀",
+		"blurIntensity": "模糊強度",
+		"blurShapeRectangle": "矩形",
+		"blurShapeOval": "橢圓",
+		"blurShapeFreehand": "自由手繪",
+		"deleteAnnotation": "刪除標註",
+		"shortcutsAndTips": "快捷鍵與提示",
+		"tipMovePlayhead": "將播放頭移動到重疊的標註區域並選擇一個項目。",
+		"tipTabCycle": "使用 Tab 鍵在重疊項目之間循環切換。",
+		"tipShiftTabCycle": "使用 Shift+Tab 反向循環切換。",
+		"invalidImageType": "無效的檔案類型",
+		"imageFormatsOnly": "請上傳 JPG、PNG、GIF 或 WebP 格式的圖片檔案。",
+		"imageUploadSuccess": "圖片上傳成功！",
+		"failedImageUpload": "上傳圖片失敗",
+		"blurColor": "模糊顏色",
+		"blurColorBlack": "黑色",
+		"blurColorWhite": "白色",
+		"blurType": "模糊類型",
+		"blurTypeBlur": "模糊",
+		"blurTypeMosaic": "馬賽克模糊",
+		"mosaicBlockSize": "馬賽克區塊大小"
+	},
+	"fontStyles": {
+		"classic": "經典",
+		"editor": "編輯器",
+		"strong": "粗體",
+		"typewriter": "打字機",
+		"deco": "裝飾",
+		"simple": "簡約",
+		"modern": "現代",
+		"clean": "簡潔"
+	},
+	"customFont": {
+		"dialogTitle": "新增 Google 字體",
+		"urlLabel": "Google Fonts 匯入 URL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "從 Google Fonts 取得：選擇字體 → 點擊 \"Get font\" → 複製 @import URL",
+		"nameLabel": "顯示名稱",
+		"namePlaceholder": "我的自訂字體",
+		"nameHelp": "這是字體在字體選擇器中顯示的名稱",
+		"addButton": "新增字體",
+		"addingButton": "新增中...",
+		"errorEmptyUrl": "請輸入 Google Fonts 匯入 URL",
+		"errorInvalidUrl": "請輸入有效的 Google Fonts URL",
+		"errorEmptyName": "請輸入字體名稱",
+		"errorExtractFailed": "無法從 URL 中提取字體系列",
+		"successMessage": "字體 \"{{fontName}}\" 新增成功",
+		"failedToAdd": "新增字體失敗",
+		"errorTimeout": "字體載入時間過長。請檢查 URL 並重試。",
+		"errorLoadFailed": "無法載入該字體。請確認 Google Fonts URL 是否正確。"
+	},
+	"cursor": {
+		"show": "顯示游標",
+		"size": "大小",
+		"smoothing": "平滑",
+		"motionBlur": "動態模糊",
+		"clickBounce": "點擊彈跳",
+		"clipToBounds": "裁切至畫布"
+	},
+	"language": {
+		"title": "語言"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/shortcuts.json b/src/i18n/locales/zh-TW/shortcuts.json
new file mode 100644
index 0000000..54c0cfc
--- /dev/null
+++ b/src/i18n/locales/zh-TW/shortcuts.json
@@ -0,0 +1,37 @@
+{
+	"title": "鍵盤快捷鍵",
+	"customize": "自訂",
+	"configurable": "可設定",
+	"fixed": "固定",
+	"pressKey": "請按下按鍵…",
+	"clickToChange": "點擊以變更",
+	"pressEscToCancel": "按 Esc 取消",
+	"helpText": "點擊一個快捷鍵，然後按下新的組合鍵。按 Esc 取消。",
+	"resetToDefaults": "還原預設設定",
+	"alreadyUsedBy": "已被 \"{{action}}\" 使用",
+	"swap": "交換",
+	"reservedShortcut": "此快捷鍵已保留給 \"{{label}}\"，無法重新指定。",
+	"savedToast": "鍵盤快捷鍵已儲存",
+	"resetToast": "已還原預設快捷鍵 — 點擊儲存以套用",
+	"actions": {
+		"addZoom": "新增縮放",
+		"addTrim": "新增剪輯",
+		"addSpeed": "新增速度",
+		"addAnnotation": "新增標註",
+		"addBlur": "新增模糊",
+		"addKeyframe": "新增關鍵影格",
+		"deleteSelected": "刪除所選",
+		"playPause": "播放 / 暫停"
+	},
+	"fixedActions": {
+		"undo": "復原",
+		"redo": "重做",
+		"cycleAnnotationsForward": "向前切換標註",
+		"cycleAnnotationsBackward": "向後切換標註",
+		"deleteSelectedAlt": "刪除所選（替代）",
+		"panTimeline": "平移時間軸",
+		"zoomTimeline": "縮放時間軸",
+		"frameBack": "上一影格",
+		"frameForward": "下一影格"
+	}
+}
diff --git a/src/i18n/locales/zh-TW/timeline.json b/src/i18n/locales/zh-TW/timeline.json
new file mode 100644
index 0000000..cd47b74
--- /dev/null
+++ b/src/i18n/locales/zh-TW/timeline.json
@@ -0,0 +1,55 @@
+{
+	"buttons": {
+		"addZoom": "新增縮放 (Z)",
+		"suggestZooms": "根據游標建議縮放",
+		"addTrim": "新增剪輯 (T)",
+		"addAnnotation": "新增標註 (A)",
+		"addSpeed": "新增速度 (S)",
+		"addBlur": "新增模糊 (B)"
+	},
+	"hints": {
+		"pressZoom": "按 Z 新增縮放",
+		"pressTrim": "按 T 新增剪輯",
+		"pressAnnotation": "按 A 新增標註",
+		"pressSpeed": "按 S 新增速度",
+		"pressBlur": "按 B 新增模糊區域"
+	},
+	"labels": {
+		"pan": "平移",
+		"zoom": "縮放",
+		"trim": "剪輯",
+		"speed": "速度",
+		"zoomItem": "縮放 {{index}}",
+		"trimItem": "剪輯 {{index}}",
+		"speedItem": "速度 {{index}}",
+		"annotationItem": "標註",
+		"imageItem": "圖片",
+		"emptyText": "空文字",
+		"blurItem": "模糊 {{index}}"
+	},
+	"emptyState": {
+		"noVideo": "未載入影片",
+		"dragAndDrop": "拖放影片以開始編輯"
+	},
+	"errors": {
+		"cannotPlaceZoom": "無法在此處放置縮放",
+		"zoomExistsAtLocation": "此位置已存在縮放或沒有足夠的空間。",
+		"zoomSuggestionUnavailable": "縮放建議處理器不可用",
+		"noCursorTelemetry": "無可用的游標遙測資料",
+		"noCursorTelemetryDescription": "請先錄製一段螢幕錄影以產生基於游標的建議。",
+		"noUsableTelemetry": "無可用的游標遙測資料",
+		"noUsableTelemetryDescription": "錄製內容沒有包含足夠的游標移動資料。",
+		"noDwellMoments": "未找到明確的游標停留時刻",
+		"noDwellMomentsDescription": "請嘗試在重要操作上進行較慢游標停留的錄製。",
+		"noAutoZoomSlots": "無可用的自動縮放位置",
+		"noAutoZoomSlotsDescription": "偵測到的停留點與現有縮放區域重疊。",
+		"cannotPlaceTrim": "無法在此處放置剪輯",
+		"trimExistsAtLocation": "此位置已存在剪輯或沒有足夠的空間。",
+		"cannotPlaceSpeed": "無法在此處放置速度",
+		"speedExistsAtLocation": "此位置已存在速度區域或沒有足夠的空間。"
+	},
+	"success": {
+		"addedZoomSuggestions": "已新增 {{count}} 個基於游標的縮放建議",
+		"addedZoomSuggestionsPlural": "已新增 {{count}} 個基於游標的縮放建議"
+	}
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..d62f153
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,306 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 20 14.3% 4.1%;
+		--card: 0 0% 100%;
+		--card-foreground: 20 14.3% 4.1%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 20 14.3% 4.1%;
+		--primary: 24 9.8% 10%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+		--ring: 20 14.3% 4.1%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 60 9.1% 97.8%;
+		--primary-foreground: 24 9.8% 10%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+		--ring: 24 5.7% 82.9%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		-webkit-user-select: none;
+		user-select: none;
+		overflow: hidden;
+		text-rendering: geometricPrecision;
+	}
+}
+
+/* Smooth timeline cursor animations */
+@layer utilities {
+	.editor-workspace {
+		display: flex;
+		flex-direction: column;
+		padding: 14px;
+		background:
+			radial-gradient(circle at 18% 0%, rgba(52, 178, 123, 0.08), transparent 30%),
+			linear-gradient(180deg, #08090b 0%, #050606 100%);
+	}
+
+	.editor-main-deck {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) clamp(286px, 20vw, 352px);
+		gap: 14px;
+		min-height: 0;
+	}
+
+	.editor-preview-zone,
+	.editor-settings-rail {
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.editor-preview-panel,
+	.editor-timeline-panel,
+	.editor-inspector-shell {
+		background:
+			linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
+			#090a0c;
+		border: 1px solid rgba(255, 255, 255, 0.075);
+		border-radius: 18px;
+		box-shadow:
+			0 24px 70px rgba(0, 0, 0, 0.42),
+			inset 0 1px 0 rgba(255, 255, 255, 0.045);
+	}
+
+	.editor-timeline-panel {
+		border-radius: 16px;
+		background:
+			linear-gradient(180deg, rgba(18, 20, 24, 0.96), rgba(8, 9, 11, 0.98)),
+			#090a0c;
+	}
+
+	.editor-resize-handle {
+		height: 12px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 999px;
+		transition:
+			background-color 160ms ease,
+			opacity 160ms ease;
+		opacity: 0.8;
+	}
+
+	.editor-resize-handle:hover {
+		background: rgba(255, 255, 255, 0.035);
+		opacity: 1;
+	}
+
+	.editor-panel-section {
+		border: 0;
+		border-radius: 0;
+		background: transparent;
+		box-shadow: none;
+	}
+
+	.editor-control-surface {
+		border: 1px solid rgba(255, 255, 255, 0.055);
+		border-radius: 10px;
+		background: rgba(255, 255, 255, 0.032);
+		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+	}
+
+	.editor-inspector-shell {
+		color: #d9e2ee;
+	}
+
+	.editor-inspector-shell button,
+	.editor-inspector-shell [role="button"] {
+		letter-spacing: 0;
+	}
+
+	.editor-inspector-shell button:focus-visible,
+	.editor-inspector-shell [role="button"]:focus-visible {
+		outline: 1px solid rgba(52, 178, 123, 0.68);
+		outline-offset: 2px;
+	}
+
+	.editor-inspector-shell [data-radix-collection-item],
+	.editor-inspector-shell input,
+	.editor-inspector-shell textarea {
+		letter-spacing: 0;
+	}
+
+	.editor-inspector-shell [role="slider"] {
+		box-shadow: 0 0 0 4px rgba(52, 178, 123, 0.12);
+	}
+
+	.editor-inspector-shell .editor-panel-section > h3 {
+		display: none;
+	}
+
+	.editor-inspector-shell .editor-panel-section > div {
+		overflow: visible;
+	}
+
+	@media (max-width: 1240px) {
+		.editor-workspace {
+			gap: 10px;
+			padding: 10px;
+		}
+
+		.editor-main-deck {
+			grid-template-columns: minmax(0, 1fr) 286px;
+			gap: 10px;
+		}
+	}
+
+	@media (max-width: 1020px) {
+		.editor-main-deck {
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: minmax(0, 1fr) 180px;
+		}
+
+		.editor-settings-rail {
+			min-height: 180px;
+		}
+	}
+
+	@media (min-width: 1900px) {
+		.editor-workspace {
+			padding: 18px;
+			gap: 18px;
+		}
+
+		.editor-main-deck {
+			grid-template-columns: minmax(0, 1fr) 372px;
+			gap: 18px;
+		}
+	}
+
+	.timeline-cursor-smooth {
+		will-change: transform;
+		transition:
+			left 33ms linear,
+			right 33ms linear;
+	}
+
+	.custom-scrollbar {
+		scrollbar-width: thin;
+		scrollbar-color: rgba(148, 163, 184, 0.32) transparent;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar-thumb {
+		background: rgba(148, 163, 184, 0.22);
+		border: 3px solid transparent;
+		border-radius: 999px;
+		background-clip: content-box;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+		background: rgba(52, 178, 123, 0.55);
+		border: 3px solid transparent;
+		background-clip: content-box;
+	}
+
+	.squircle {
+		corner-shape: squircle;
+	}
+
+	/* Smooth playback scrubber */
+	input[type="range"] {
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: #fff;
+		cursor: pointer;
+		box-shadow: 0 2px 8px rgba(255, 255, 255, 0.32);
+		border: 2px solid #fff;
+		transition: all 0.08s ease-out;
+	}
+
+	input[type="range"]::-webkit-slider-thumb:hover {
+		background: #fff;
+		transform: scale(1.15);
+		box-shadow: 0 3px 10px rgba(255, 255, 255, 0.5);
+		border-color: #34b27b;
+	}
+
+	input[type="range"]::-webkit-slider-thumb:active {
+		transform: scale(1.25);
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: #fff;
+		cursor: pointer;
+		border: 2px solid #fff;
+		box-shadow: 0 2px 8px rgba(255, 255, 255, 0.32);
+		transition: all 0.08s ease-out;
+	}
+
+	input[type="range"]::-moz-range-thumb:hover {
+		background: #fff;
+		transform: scale(1.15);
+		box-shadow: 0 3px 10px rgba(255, 255, 255, 0.5);
+		border-color: #34b27b;
+	}
+
+	input[type="range"]::-moz-range-thumb:active {
+		transform: scale(1.25);
+	}
+}
diff --git a/src/lib/__tests__/frameStepNavigation.test.ts b/src/lib/__tests__/frameStepNavigation.test.ts
new file mode 100644
index 0000000..ab0393b
--- /dev/null
+++ b/src/lib/__tests__/frameStepNavigation.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+
+import { computeFrameStepTime, FRAME_DURATION_SEC } from "@/lib/frameStep";
+
+describe("computeFrameStepTime", () => {
+	const duration = 10;
+
+	it("moves forward by one frame from the middle", () => {
+		const result = computeFrameStepTime(5, duration, "forward");
+		expect(result).toBeCloseTo(5 + FRAME_DURATION_SEC, 10);
+	});
+
+	it("moves backward by one frame from the middle", () => {
+		const result = computeFrameStepTime(5, duration, "backward");
+		expect(result).toBeCloseTo(5 - FRAME_DURATION_SEC, 10);
+	});
+
+	it("clamps to 0 when stepping backward at the beginning", () => {
+		const result = computeFrameStepTime(0, duration, "backward");
+		expect(result).toBe(0);
+	});
+
+	it("clamps to 0 when stepping backward near the beginning", () => {
+		const result = computeFrameStepTime(FRAME_DURATION_SEC / 2, duration, "backward");
+		expect(result).toBe(0);
+	});
+
+	it("clamps to duration when stepping forward at the end", () => {
+		const result = computeFrameStepTime(duration, duration, "forward");
+		expect(result).toBe(duration);
+	});
+
+	it("clamps to duration when stepping forward near the end", () => {
+		const result = computeFrameStepTime(duration - FRAME_DURATION_SEC / 2, duration, "forward");
+		expect(result).toBe(duration);
+	});
+
+	it("handles duration of 0 gracefully", () => {
+		expect(computeFrameStepTime(0, 0, "forward")).toBe(0);
+		expect(computeFrameStepTime(0, 0, "backward")).toBe(0);
+	});
+});
diff --git a/src/lib/assetPath.ts b/src/lib/assetPath.ts
new file mode 100644
index 0000000..edba758
--- /dev/null
+++ b/src/lib/assetPath.ts
@@ -0,0 +1,52 @@
+export class UnsafeAssetPathError extends Error {
+	constructor(segment: string) {
+		super(`Unsafe asset path segment: ${segment}`);
+		this.name = "UnsafeAssetPathError";
+	}
+}
+
+export class AssetBaseUnavailableError extends Error {
+	constructor() {
+		super("electronAPI.assetBaseUrl is not available; preload did not load correctly");
+		this.name = "AssetBaseUnavailableError";
+	}
+}
+
+function encodeRelativeAssetPath(relativePath: string): string {
+	return relativePath
+		.replace(/^\/+/, "")
+		.split("/")
+		.filter(Boolean)
+		.map((part) => {
+			const decoded = decodeURIComponent(part);
+			if (decoded === "." || decoded === "..") {
+				throw new UnsafeAssetPathError(decoded);
+			}
+			return encodeURIComponent(decoded);
+		})
+		.join("/");
+}
+
+function ensureTrailingSlash(value: string): string {
+	return value.endsWith("/") ? value : `${value}/`;
+}
+
+export function getAssetPath(relativePath: string): string {
+	const encoded = encodeRelativeAssetPath(relativePath);
+
+	if (typeof window === "undefined") {
+		return `/${encoded}`;
+	}
+
+	if (window.location?.protocol?.startsWith("http")) {
+		return `/${encoded}`;
+	}
+
+	const base = window.electronAPI?.assetBaseUrl;
+	if (!base) {
+		throw new AssetBaseUnavailableError();
+	}
+	return new URL(encoded, ensureTrailingSlash(base)).toString();
+}
+
+export default getAssetPath;
diff --git a/src/lib/blurEffects.test.ts b/src/lib/blurEffects.test.ts
new file mode 100644
index 0000000..7d61672
--- /dev/null
+++ b/src/lib/blurEffects.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import { applyMosaicToImageData, getBlurOverlayColor, normalizeBlurColor } from "./blurEffects";
+
+function createTestImageData(width: number, height: number) {
+	const data = new Uint8ClampedArray(width * height * 4);
+
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const offset = (y * width + x) * 4;
+			data[offset] = x * 20 + y;
+			data[offset + 1] = y * 20 + x;
+			data[offset + 2] = (x + y) * 10;
+			data[offset + 3] = 255;
+		}
+	}
+
+	return {
+		data,
+		width,
+		height,
+	} as ImageData;
+}
+
+describe("applyMosaicToImageData", () => {
+	it("collapses each block to a single representative color", () => {
+		const imageData = createTestImageData(4, 4);
+		const original = new Uint8ClampedArray(imageData.data);
+
+		applyMosaicToImageData(imageData, 2);
+
+		const topLeft = Array.from(imageData.data.slice(0, 4));
+		const topRightOffset = (1 * 4 + 1) * 4;
+		const topRight = Array.from(imageData.data.slice(topRightOffset, topRightOffset + 4));
+		expect(topLeft).toEqual(topRight);
+
+		expect(Array.from(original.slice(0, 4))).not.toEqual(topLeft);
+	});
+
+	it("reduces unique pixel colors, making the transform information-lossy", () => {
+		const imageData = createTestImageData(8, 8);
+		const before = new Set<string>();
+		const after = new Set<string>();
+
+		for (let i = 0; i < imageData.data.length; i += 4) {
+			before.add(
+				`${imageData.data[i]}-${imageData.data[i + 1]}-${imageData.data[i + 2]}-${imageData.data[i + 3]}`,
+			);
+		}
+
+		applyMosaicToImageData(imageData, 4);
+
+		for (let i = 0; i < imageData.data.length; i += 4) {
+			after.add(
+				`${imageData.data[i]}-${imageData.data[i + 1]}-${imageData.data[i + 2]}-${imageData.data[i + 3]}`,
+			);
+		}
+
+		expect(after.size).toBeLessThan(before.size);
+		expect(after.size).toBe(4);
+	});
+});
+
+describe("blur color helpers", () => {
+	it("normalizes invalid blur colors to white", () => {
+		expect(normalizeBlurColor("black")).toBe("black");
+		expect(normalizeBlurColor("invalid")).toBe("white");
+	});
+
+	it("returns a dark overlay when black blur color is selected", () => {
+		expect(
+			getBlurOverlayColor({
+				type: "mosaic",
+				shape: "rectangle",
+				color: "black",
+				intensity: 12,
+				blockSize: 12,
+			}),
+		).toBe("rgba(0, 0, 0, 0.72)");
+	});
+});
diff --git a/src/lib/blurEffects.ts b/src/lib/blurEffects.ts
new file mode 100644
index 0000000..88bcfb0
--- /dev/null
+++ b/src/lib/blurEffects.ts
@@ -0,0 +1,109 @@
+import {
+	type BlurColor,
+	type BlurData,
+	type BlurType,
+	DEFAULT_BLUR_BLOCK_SIZE,
+	DEFAULT_BLUR_INTENSITY,
+	MAX_BLUR_BLOCK_SIZE,
+	MAX_BLUR_INTENSITY,
+	MIN_BLUR_BLOCK_SIZE,
+	MIN_BLUR_INTENSITY,
+} from "@/components/video-editor/types";
+
+function clamp(value: number, min: number, max: number) {
+	if (!Number.isFinite(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+
+export function normalizeBlurType(value: unknown): BlurType {
+	void value;
+	return "mosaic";
+}
+
+export function normalizeBlurColor(value: unknown): BlurColor {
+	return value === "black" ? "black" : "white";
+}
+
+export function getNormalizedBlurIntensity(blurData?: BlurData | null): number {
+	return clamp(
+		blurData?.intensity ?? DEFAULT_BLUR_INTENSITY,
+		MIN_BLUR_INTENSITY,
+		MAX_BLUR_INTENSITY,
+	);
+}
+
+export function getNormalizedMosaicBlockSize(blurData?: BlurData | null, scaleFactor = 1): number {
+	const rawBlockSize = clamp(
+		blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE,
+		MIN_BLUR_BLOCK_SIZE,
+		MAX_BLUR_BLOCK_SIZE,
+	);
+	return Math.max(1, Math.round(rawBlockSize * Math.max(scaleFactor, 0.01)));
+}
+
+export function getBlurOverlayColor(blurData?: BlurData | null): string {
+	const blurColor = normalizeBlurColor(blurData?.color);
+
+	return blurColor === "black" ? "rgba(0, 0, 0, 0.72)" : "rgba(255, 255, 255, 0.06)";
+}
+
+export function getMosaicGridOverlayColor(blurData?: BlurData | null): string {
+	return normalizeBlurColor(blurData?.color) === "black"
+		? "rgba(255,255,255,0.05)"
+		: "rgba(255,255,255,0.04)";
+}
+
+export function applyMosaicToImageData(imageData: ImageData, blockSize: number): ImageData {
+	const width = imageData.width;
+	const height = imageData.height;
+	const data = imageData.data;
+	const normalizedBlockSize = Math.max(1, Math.floor(blockSize));
+
+	if (width <= 0 || height <= 0 || normalizedBlockSize <= 1) {
+		return imageData;
+	}
+
+	for (let blockY = 0; blockY < height; blockY += normalizedBlockSize) {
+		for (let blockX = 0; blockX < width; blockX += normalizedBlockSize) {
+			const blockWidth = Math.min(normalizedBlockSize, width - blockX);
+			const blockHeight = Math.min(normalizedBlockSize, height - blockY);
+			const pixelCount = blockWidth * blockHeight;
+
+			if (pixelCount <= 0) {
+				continue;
+			}
+
+			let redTotal = 0;
+			let greenTotal = 0;
+			let blueTotal = 0;
+			let alphaTotal = 0;
+
+			for (let y = blockY; y < blockY + blockHeight; y++) {
+				for (let x = blockX; x < blockX + blockWidth; x++) {
+					const offset = (y * width + x) * 4;
+					redTotal += data[offset];
+					greenTotal += data[offset + 1];
+					blueTotal += data[offset + 2];
+					alphaTotal += data[offset + 3];
+				}
+			}
+
+			const averageRed = Math.round(redTotal / pixelCount);
+			const averageGreen = Math.round(greenTotal / pixelCount);
+			const averageBlue = Math.round(blueTotal / pixelCount);
+			const averageAlpha = Math.round(alphaTotal / pixelCount);
+
+			for (let y = blockY; y < blockY + blockHeight; y++) {
+				for (let x = blockX; x < blockX + blockWidth; x++) {
+					const offset = (y * width + x) * 4;
+					data[offset] = averageRed;
+					data[offset + 1] = averageGreen;
+					data[offset + 2] = averageBlue;
+					data[offset + 3] = averageAlpha;
+				}
+			}
+		}
+	}
+
+	return imageData;
+}
diff --git a/src/lib/compositeLayout.test.ts b/src/lib/compositeLayout.test.ts
new file mode 100644
index 0000000..65cdfd5
--- /dev/null
+++ b/src/lib/compositeLayout.test.ts
@@ -0,0 +1,268 @@
+import { describe, expect, it } from "vitest";
+import { computeCompositeLayout } from "./compositeLayout";
+
+describe("computeCompositeLayout", () => {
+	it("anchors the overlay in the lower-right corner", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout!.webcamRect).not.toBeNull();
+		expect(layout!.webcamRect!.x + layout!.webcamRect!.width).toBeLessThanOrEqual(1920);
+		expect(layout!.webcamRect!.y + layout!.webcamRect!.height).toBeLessThanOrEqual(1080);
+		expect(layout!.webcamRect!.x).toBeGreaterThan(1920 / 2);
+		expect(layout!.webcamRect!.y).toBeGreaterThan(1080 / 2);
+	});
+
+	it("scales small screen content up to the export canvas when no padding is applied", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1280, height: 720 },
+			screenSize: { width: 854, height: 480 },
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout!.screenRect).toEqual({
+			x: 0,
+			y: 0,
+			width: 1280,
+			height: 720,
+		});
+	});
+
+	it("keeps the overlay within the configured stage fraction while preserving aspect ratio", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1280, height: 720 },
+			screenSize: { width: 1280, height: 720 },
+			webcamSize: { width: 1920, height: 1080 },
+		});
+
+		const refDim = Math.sqrt(1280 * 720);
+		const defaultFraction = 25 / 100; // DEFAULT_WEBCAM_SIZE_PRESET = 25
+		expect(layout).not.toBeNull();
+		expect(layout!.webcamRect).not.toBeNull();
+		expect(layout!.webcamRect!.width).toBeLessThanOrEqual(Math.round(refDim * defaultFraction) + 1);
+		expect(layout!.webcamRect!.height).toBeLessThanOrEqual(
+			Math.round(refDim * defaultFraction) + 1,
+		);
+		expect(
+			Math.abs(layout!.webcamRect!.width * 1080 - layout!.webcamRect!.height * 1920),
+		).toBeLessThanOrEqual(1920);
+	});
+
+	it("produces consistent webcam size across landscape and portrait aspect ratios", () => {
+		const webcamSize = { width: 1280, height: 720 };
+		const landscape = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize,
+			webcamSizePreset: 50,
+		});
+		const portrait = computeCompositeLayout({
+			canvasSize: { width: 1080, height: 1920 },
+			screenSize: { width: 1080, height: 1920 },
+			webcamSize,
+			webcamSizePreset: 50,
+		});
+
+		expect(landscape).not.toBeNull();
+		expect(portrait).not.toBeNull();
+		// Same total pixel count — webcam area should be comparable
+		const landscapeArea = landscape!.webcamRect!.width * landscape!.webcamRect!.height;
+		const portraitArea = portrait!.webcamRect!.width * portrait!.webcamRect!.height;
+		expect(landscapeArea).toBe(portraitArea);
+	});
+
+	it("scales the webcam proportionally as webcamSizePreset increases", () => {
+		const canvasSize = { width: 1920, height: 1080 };
+		const screenSize = { width: 1920, height: 1080 };
+		const webcamSize = { width: 1280, height: 720 };
+
+		const small = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 10,
+		});
+		const medium = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 25,
+		});
+		const large = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 50,
+		});
+
+		expect(small!.webcamRect!.width).toBeLessThan(medium!.webcamRect!.width);
+		expect(medium!.webcamRect!.width).toBeLessThan(large!.webcamRect!.width);
+		expect(small!.webcamRect!.height).toBeLessThan(medium!.webcamRect!.height);
+		expect(medium!.webcamRect!.height).toBeLessThan(large!.webcamRect!.height);
+	});
+
+	it("clamps webcamSizePreset to the valid range (10–50)", () => {
+		const canvasSize = { width: 1920, height: 1080 };
+		const screenSize = { width: 1920, height: 1080 };
+		const webcamSize = { width: 1280, height: 720 };
+
+		const atMin = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 10,
+		});
+		const belowMin = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 1,
+		});
+		const atMax = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 50,
+		});
+		const aboveMax = computeCompositeLayout({
+			canvasSize,
+			screenSize,
+			webcamSize,
+			webcamSizePreset: 100,
+		});
+
+		// Values below 10 should clamp to 10
+		expect(belowMin!.webcamRect!.width).toBe(atMin!.webcamRect!.width);
+		expect(belowMin!.webcamRect!.height).toBe(atMin!.webcamRect!.height);
+		// Values above 50 should clamp to 50
+		expect(aboveMax!.webcamRect!.width).toBe(atMax!.webcamRect!.width);
+		expect(aboveMax!.webcamRect!.height).toBe(atMax!.webcamRect!.height);
+	});
+
+	it("snaps rounding-only source aspect gaps to the full canvas", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 319, height: 199 },
+			maxContentSize: { width: 319, height: 199 },
+			screenSize: { width: 1680, height: 1050 },
+		});
+
+		expect(layout?.screenRect).toEqual({
+			x: 0,
+			y: 0,
+			width: 319,
+			height: 199,
+		});
+	});
+
+	it("centers the combined screen and webcam stack in vertical stack mode", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			maxContentSize: { width: 1536, height: 864 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			layoutPreset: "vertical-stack",
+		});
+
+		expect(layout).not.toBeNull();
+		// Webcam is full-width at the bottom
+		expect(layout!.webcamRect).not.toBeNull();
+		expect(layout!.webcamRect!.x).toBe(0);
+		expect(layout!.webcamRect!.width).toBe(1920);
+		expect(layout!.webcamRect!.borderRadius).toBe(0);
+		// Screen fills remaining space at the top (cover mode)
+		expect(layout!.screenRect.x).toBe(0);
+		expect(layout!.screenRect.y).toBe(0);
+		expect(layout!.screenRect.width).toBe(1920);
+		expect(layout!.screenCover).toBe(true);
+	});
+
+	it("keeps the screen full-canvas and omits the webcam when dimensions are unavailable in stack mode", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			maxContentSize: { width: 1536, height: 864 },
+			screenSize: { width: 1920, height: 1080 },
+			layoutPreset: "vertical-stack",
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout?.screenRect).toEqual({
+			x: 0,
+			y: 0,
+			width: 1920,
+			height: 1080,
+		});
+		expect(layout?.webcamRect).toBeNull();
+		expect(layout?.screenCover).toBe(true);
+	});
+
+	it("uses a 2:1 split layout in dual frame mode", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			maxContentSize: { width: 1536, height: 864 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			layoutPreset: "dual-frame",
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout?.webcamRect).not.toBeNull();
+		expect(layout?.screenRect.y).toBe(108);
+		expect(layout?.screenRect.height).toBe(864);
+		expect(layout?.screenBorderRadius).toBe(layout?.webcamRect?.borderRadius);
+		expect(layout?.webcamRect?.y).toBe(108);
+		expect(layout?.webcamRect?.height).toBe(864);
+		expect(layout?.webcamRect?.x).toBeGreaterThan(layout?.screenRect.x ?? 0);
+		expect(
+			Math.abs((layout?.screenRect.width ?? 0) - 2 * (layout?.webcamRect?.width ?? 0)),
+		).toBeLessThanOrEqual(1);
+		expect(layout?.screenCover).toBe(true);
+	});
+
+	it("forces circular and square masks to use square dimensions", () => {
+		const circularLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "circle",
+		});
+		const squareLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "square",
+		});
+
+		expect(circularLayout?.webcamRect).not.toBeNull();
+		expect(squareLayout?.webcamRect).not.toBeNull();
+		expect(circularLayout?.webcamRect?.width).toBe(circularLayout?.webcamRect?.height);
+		expect(squareLayout?.webcamRect?.width).toBe(squareLayout?.webcamRect?.height);
+		expect(circularLayout?.webcamRect?.maskShape).toBe("circle");
+		expect(squareLayout?.webcamRect?.maskShape).toBe("square");
+	});
+
+	it("applies larger rounding for the rounded webcam mask", () => {
+		const roundedLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "rounded",
+		});
+		const rectangleLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "rectangle",
+		});
+
+		expect(roundedLayout?.webcamRect).not.toBeNull();
+		expect(rectangleLayout?.webcamRect).not.toBeNull();
+		expect(roundedLayout?.webcamRect?.borderRadius).toBeGreaterThan(
+			rectangleLayout?.webcamRect?.borderRadius ?? 0,
+		);
+		expect(roundedLayout?.webcamRect?.maskShape).toBe("rounded");
+	});
+});
diff --git a/src/lib/compositeLayout.ts b/src/lib/compositeLayout.ts
new file mode 100644
index 0000000..abb6b0f
--- /dev/null
+++ b/src/lib/compositeLayout.ts
@@ -0,0 +1,428 @@
+export interface RenderRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+export interface StyledRenderRect extends RenderRect {
+	borderRadius: number;
+	maskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+}
+
+export interface Size {
+	width: number;
+	height: number;
+}
+
+export type WebcamLayoutPreset =
+	| "picture-in-picture"
+	| "vertical-stack"
+	| "dual-frame"
+	| "no-webcam";
+/** Webcam size as a percentage of the canvas reference dimension (10–50). */
+export type WebcamSizePreset = number;
+
+export interface WebcamLayoutShadow {
+	color: string;
+	blur: number;
+	offsetX: number;
+	offsetY: number;
+}
+
+interface BorderRadiusRule {
+	max: number;
+	min: number;
+	fraction: number;
+}
+
+interface OverlayTransform {
+	type: "overlay";
+	marginFraction: number;
+	minMargin: number;
+	minSize: number;
+}
+
+interface StackTransform {
+	type: "stack";
+	gap: number;
+}
+
+interface SplitTransform {
+	type: "split";
+	gapFraction: number;
+	minGap: number;
+	screenUnits: number;
+	webcamUnits: number;
+}
+
+export interface WebcamLayoutPresetDefinition {
+	label: string;
+	transform: OverlayTransform | StackTransform | SplitTransform;
+	borderRadius: BorderRadiusRule;
+	shadow: WebcamLayoutShadow | null;
+}
+
+export interface WebcamCompositeLayout {
+	screenRect: RenderRect;
+	webcamRect: StyledRenderRect | null;
+	screenBorderRadius?: number;
+	/** When true, the video should be scaled to cover screenRect (cropping overflow). */
+	screenCover?: boolean;
+}
+
+/** Convert a webcam size percentage (10–50) to a fraction of the reference dimension. */
+function webcamSizeToFraction(percent: number): number {
+	const safe = Number.isFinite(percent) ? percent : 25;
+	const clamped = Math.max(10, Math.min(50, safe));
+	return clamped / 100;
+}
+
+const MARGIN_FRACTION = 0.02;
+const MAX_BORDER_RADIUS = 24;
+const WEBCAM_LAYOUT_PRESET_MAP: Record<WebcamLayoutPreset, WebcamLayoutPresetDefinition> = {
+	"picture-in-picture": {
+		label: "Picture in Picture",
+		transform: {
+			type: "overlay",
+			marginFraction: MARGIN_FRACTION,
+			minMargin: 0,
+			minSize: 0,
+		},
+		borderRadius: {
+			max: MAX_BORDER_RADIUS,
+			min: 12,
+			fraction: 0.12,
+		},
+		shadow: {
+			color: "rgba(0,0,0,0.35)",
+			blur: 24,
+			offsetX: 0,
+			offsetY: 10,
+		},
+	},
+	"vertical-stack": {
+		label: "Vertical Stack",
+		transform: {
+			type: "stack",
+			gap: 0,
+		},
+		borderRadius: {
+			max: 0,
+			min: 0,
+			fraction: 0,
+		},
+		shadow: null,
+	},
+	"dual-frame": {
+		label: "Dual Frame",
+		transform: {
+			type: "split",
+			gapFraction: 0.02,
+			minGap: 12,
+			screenUnits: 2,
+			webcamUnits: 1,
+		},
+		borderRadius: {
+			max: MAX_BORDER_RADIUS,
+			min: 12,
+			fraction: 0.06,
+		},
+		shadow: null,
+	},
+	"no-webcam": {
+		label: "No Webcam",
+		transform: {
+			type: "overlay",
+			marginFraction: 0,
+			minMargin: 0,
+			minSize: 0,
+		},
+		borderRadius: {
+			max: 0,
+			min: 0,
+			fraction: 0,
+		},
+		shadow: null,
+	},
+};
+
+export const WEBCAM_LAYOUT_PRESETS = Object.entries(WEBCAM_LAYOUT_PRESET_MAP).map(
+	([value, preset]) => ({
+		value: value as WebcamLayoutPreset,
+		label: preset.label,
+	}),
+);
+
+export function getWebcamLayoutPresetDefinition(
+	preset: WebcamLayoutPreset = "picture-in-picture",
+): WebcamLayoutPresetDefinition {
+	return WEBCAM_LAYOUT_PRESET_MAP[preset];
+}
+
+export function getWebcamLayoutCssBoxShadow(
+	preset: WebcamLayoutPreset = "picture-in-picture",
+): string {
+	const shadow = getWebcamLayoutPresetDefinition(preset).shadow;
+	return shadow
+		? `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px ${shadow.color}`
+		: "none";
+}
+
+export function computeCompositeLayout(params: {
+	canvasSize: Size;
+	maxContentSize?: Size;
+	screenSize: Size;
+	webcamSize?: Size | null;
+	layoutPreset?: WebcamLayoutPreset;
+	webcamSizePreset?: WebcamSizePreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+}): WebcamCompositeLayout | null {
+	const {
+		canvasSize,
+		maxContentSize = canvasSize,
+		screenSize,
+		webcamSize,
+		layoutPreset = "picture-in-picture",
+		webcamSizePreset = 25,
+		webcamPosition,
+		webcamMaskShape = "rectangle",
+	} = params;
+	const { width: canvasWidth, height: canvasHeight } = canvasSize;
+	const { width: screenWidth, height: screenHeight } = screenSize;
+
+	// "no-webcam" preset: hide the webcam entirely, screen fills the canvas normally
+	if (layoutPreset === "no-webcam") {
+		const screenRect = centerRect({
+			canvasSize,
+			size: screenSize,
+			maxSize: maxContentSize,
+		});
+		return { screenRect, webcamRect: null };
+	}
+
+	const webcamWidth = webcamSize?.width;
+	const webcamHeight = webcamSize?.height;
+	const preset = getWebcamLayoutPresetDefinition(layoutPreset);
+
+	const MAX_STAGE_FRACTION = webcamSizeToFraction(webcamSizePreset);
+
+	if (canvasWidth <= 0 || canvasHeight <= 0 || screenWidth <= 0 || screenHeight <= 0) {
+		return null;
+	}
+
+	if (preset.transform.type === "stack") {
+		if (!webcamWidth || !webcamHeight || webcamWidth <= 0 || webcamHeight <= 0) {
+			// No webcam — screen fills the entire canvas (cover mode)
+			return {
+				screenRect: { x: 0, y: 0, width: canvasWidth, height: canvasHeight },
+				webcamRect: null,
+				screenCover: true,
+			};
+		}
+
+		// Webcam: full width at the bottom, maintaining its aspect ratio
+		const webcamAspect = webcamWidth / webcamHeight;
+		const resolvedWebcamWidth = canvasWidth;
+		const resolvedWebcamHeight = Math.round(canvasWidth / webcamAspect);
+
+		// Screen: fills remaining space at the top (cover mode — may crop sides)
+		const screenRectHeight = canvasHeight - resolvedWebcamHeight;
+
+		return {
+			screenRect: {
+				x: 0,
+				y: 0,
+				width: canvasWidth,
+				height: Math.max(0, screenRectHeight),
+			},
+			webcamRect: {
+				x: 0,
+				y: Math.max(0, screenRectHeight),
+				width: resolvedWebcamWidth,
+				height: resolvedWebcamHeight,
+				borderRadius: 0,
+			},
+			screenCover: true,
+		};
+	}
+
+	if (preset.transform.type === "split") {
+		const screenRect = centerRect({
+			canvasSize,
+			size: screenSize,
+			maxSize: maxContentSize,
+		});
+
+		if (!webcamWidth || !webcamHeight || webcamWidth <= 0 || webcamHeight <= 0) {
+			return { screenRect, webcamRect: null };
+		}
+
+		const contentWidth = Math.min(canvasWidth, Math.max(1, Math.round(maxContentSize.width)));
+		const contentHeight = Math.min(canvasHeight, Math.max(1, Math.round(maxContentSize.height)));
+		const contentX = Math.max(0, Math.floor((canvasWidth - contentWidth) / 2));
+		const contentY = Math.max(0, Math.floor((canvasHeight - contentHeight) / 2));
+		const gap = Math.max(
+			preset.transform.minGap,
+			Math.round(contentWidth * preset.transform.gapFraction),
+		);
+		const totalUnits = preset.transform.screenUnits + preset.transform.webcamUnits;
+		const availableWidth = Math.max(1, contentWidth - gap);
+		const screenSlotWidth = Math.max(
+			1,
+			Math.round((availableWidth * preset.transform.screenUnits) / totalUnits),
+		);
+		const webcamSlotWidth = Math.max(1, availableWidth - screenSlotWidth);
+
+		const screenSlot = {
+			x: contentX,
+			y: contentY,
+			width: screenSlotWidth,
+			height: contentHeight,
+		};
+		const webcamSlot = {
+			x: contentX + screenSlotWidth + gap,
+			y: contentY,
+			width: webcamSlotWidth,
+			height: contentHeight,
+		};
+
+		const webcamBorderRadius = Math.min(
+			preset.borderRadius.max,
+			Math.max(
+				preset.borderRadius.min,
+				Math.round(Math.min(webcamSlot.width, webcamSlot.height) * preset.borderRadius.fraction),
+			),
+		);
+
+		return {
+			screenRect: screenSlot,
+			screenBorderRadius: webcamBorderRadius,
+			webcamRect: {
+				x: webcamSlot.x,
+				y: webcamSlot.y,
+				width: webcamSlot.width,
+				height: webcamSlot.height,
+				borderRadius: webcamBorderRadius,
+				maskShape: "rectangle",
+			},
+			screenCover: true,
+		};
+	}
+
+	const transform = preset.transform;
+	const screenRect = centerRect({
+		canvasSize,
+		size: screenSize,
+		maxSize: maxContentSize,
+	});
+
+	if (!webcamWidth || !webcamHeight || webcamWidth <= 0 || webcamHeight <= 0) {
+		return { screenRect, webcamRect: null };
+	}
+
+	const margin = Math.max(
+		transform.minMargin,
+		Math.round(Math.min(canvasWidth, canvasHeight) * transform.marginFraction),
+	);
+	// Use geometric mean so the webcam occupies a consistent visual proportion
+	// regardless of whether the canvas is portrait or landscape.
+	const referenceDim = Math.sqrt(canvasWidth * canvasHeight);
+	const maxWidth = Math.max(transform.minSize, referenceDim * MAX_STAGE_FRACTION);
+	const maxHeight = Math.max(transform.minSize, referenceDim * MAX_STAGE_FRACTION);
+	const scale = Math.min(maxWidth / webcamWidth, maxHeight / webcamHeight);
+	let width = Math.round(webcamWidth * scale);
+	let height = Math.round(webcamHeight * scale);
+
+	// Shape-specific dimension adjustments
+	if (webcamMaskShape === "circle" || webcamMaskShape === "square") {
+		const side = Math.min(width, height);
+		width = side;
+		height = side;
+	}
+
+	let webcamX: number;
+	let webcamY: number;
+
+	if (webcamPosition) {
+		// Custom position: cx/cy represent the center of the webcam as a fraction of the canvas
+		webcamX = Math.round(webcamPosition.cx * canvasWidth - width / 2);
+		webcamY = Math.round(webcamPosition.cy * canvasHeight - height / 2);
+		// Clamp to stay within canvas bounds
+		webcamX = Math.max(0, Math.min(canvasWidth - width, webcamX));
+		webcamY = Math.max(0, Math.min(canvasHeight - height, webcamY));
+	} else {
+		// Default: bottom-right with margin
+		webcamX = Math.max(0, Math.round(canvasWidth - margin - width));
+		webcamY = Math.max(0, Math.round(canvasHeight - margin - height));
+	}
+
+	// Shape-specific border radius
+	let borderRadius: number;
+	if (webcamMaskShape === "rounded") {
+		borderRadius = Math.round(Math.min(width, height) * 0.3);
+	} else if (webcamMaskShape === "circle") {
+		borderRadius = Math.round(Math.min(width, height) / 2);
+	} else {
+		borderRadius = Math.min(
+			preset.borderRadius.max,
+			Math.max(
+				preset.borderRadius.min,
+				Math.round(Math.min(width, height) * preset.borderRadius.fraction),
+			),
+		);
+	}
+
+	return {
+		screenRect,
+		webcamRect: {
+			x: webcamX,
+			y: webcamY,
+			width,
+			height,
+			borderRadius,
+			maskShape: webcamMaskShape,
+		},
+	};
+}
+
+function centerRect(params: { canvasSize: Size; size: Size; maxSize: Size }): RenderRect {
+	const { canvasSize, size, maxSize } = params;
+	return centerRectInBounds({
+		bounds: { x: 0, y: 0, width: canvasSize.width, height: canvasSize.height },
+		size,
+		maxSize,
+	});
+}
+
+function centerRectInBounds(params: { bounds: RenderRect; size: Size; maxSize: Size }): RenderRect {
+	const { bounds, size, maxSize } = params;
+	const { x: boundsX, y: boundsY, width: boundsWidth, height: boundsHeight } = bounds;
+	const { width, height } = size;
+	const { width: maxWidth, height: maxHeight } = maxSize;
+	const scale = Math.min(maxWidth / width, maxHeight / height);
+	const resolvedWidth = Math.round(width * scale);
+	const resolvedHeight = Math.round(height * scale);
+
+	if (
+		maxWidth >= boundsWidth &&
+		maxHeight >= boundsHeight &&
+		Math.abs(boundsWidth - resolvedWidth) <= 4 &&
+		Math.abs(boundsHeight - resolvedHeight) <= 4
+	) {
+		return {
+			x: boundsX,
+			y: boundsY,
+			width: boundsWidth,
+			height: boundsHeight,
+		};
+	}
+
+	return {
+		x: boundsX + Math.max(0, Math.floor((boundsWidth - resolvedWidth) / 2)),
+		y: boundsY + Math.max(0, Math.floor((boundsHeight - resolvedHeight) / 2)),
+		width: resolvedWidth,
+		height: resolvedHeight,
+	};
+}
diff --git a/src/lib/cursor/nativeCursor.test.ts b/src/lib/cursor/nativeCursor.test.ts
new file mode 100644
index 0000000..75cdc77
--- /dev/null
+++ b/src/lib/cursor/nativeCursor.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import {
+	getNativeCursorClickBounceProgress,
+	getNativeCursorClickBounceScale,
+	hasNativeCursorRecordingData,
+	resolveInterpolatedNativeCursorFrame,
+} from "./nativeCursor";
+
+describe("native cursor click bounce", () => {
+	it("keeps click progress visible across several frames", () => {
+		const recordingData = {
+			version: 2,
+			provider: "native" as const,
+			assets: [],
+			samples: [
+				{ timeMs: 0, cx: 0.5, cy: 0.5, interactionType: "move" as const },
+				{ timeMs: 100, cx: 0.5, cy: 0.5, interactionType: "click" as const },
+				{ timeMs: 133, cx: 0.5, cy: 0.5, interactionType: "move" as const },
+				{ timeMs: 166, cx: 0.5, cy: 0.5, interactionType: "move" as const },
+				{ timeMs: 200, cx: 0.5, cy: 0.5, interactionType: "move" as const },
+				{ timeMs: 300, cx: 0.5, cy: 0.5, interactionType: "move" as const },
+			],
+		};
+
+		expect(getNativeCursorClickBounceProgress(recordingData, 133)).toBeGreaterThan(0);
+		expect(getNativeCursorClickBounceProgress(recordingData, 200)).toBeGreaterThan(0);
+		expect(getNativeCursorClickBounceProgress(recordingData, 400)).toBe(0);
+	});
+
+	it("applies a visible press and rebound scale at high intensity", () => {
+		expect(getNativeCursorClickBounceScale(5, 1)).toBe(1);
+		expect(getNativeCursorClickBounceScale(5, 0.82)).toBeLessThan(0.9);
+		expect(getNativeCursorClickBounceScale(5, 0.28)).toBeGreaterThan(1.05);
+		expect(getNativeCursorClickBounceScale(5, 0)).toBe(1);
+	});
+
+	it("uses the default cursor asset for telemetry-only macOS recordings", () => {
+		const recordingData = {
+			version: 2,
+			provider: "none" as const,
+			assets: [],
+			samples: [
+				{ timeMs: 0, cx: 0.25, cy: 0.4, visible: true },
+				{ timeMs: 100, cx: 0.75, cy: 0.6, visible: true },
+			],
+		};
+
+		expect(hasNativeCursorRecordingData(recordingData)).toBe(true);
+		const frame = resolveInterpolatedNativeCursorFrame(recordingData, 50);
+		expect(frame?.asset.cursorType).toBe("arrow");
+		expect(frame?.sample.cx).toBeCloseTo(0.5);
+		expect(frame?.sample.cy).toBeCloseTo(0.5);
+	});
+
+	it("applies click bounce to telemetry-only macOS recordings", () => {
+		const recordingData = {
+			version: 2,
+			provider: "none" as const,
+			assets: [],
+			samples: [
+				{ timeMs: 0, cx: 0.5, cy: 0.5, visible: true, interactionType: "move" as const },
+				{ timeMs: 100, cx: 0.5, cy: 0.5, visible: true, interactionType: "click" as const },
+				{ timeMs: 133, cx: 0.5, cy: 0.5, visible: true, interactionType: "move" as const },
+			],
+		};
+
+		expect(getNativeCursorClickBounceProgress(recordingData, 133)).toBeGreaterThan(0);
+	});
+});
diff --git a/src/lib/cursor/nativeCursor.ts b/src/lib/cursor/nativeCursor.ts
new file mode 100644
index 0000000..f20fd42
--- /dev/null
+++ b/src/lib/cursor/nativeCursor.ts
@@ -0,0 +1,621 @@
+import { type Container, Point } from "pixi.js";
+import appStartingUrl from "@/assets/cursors/Cursor=App-Starting.svg";
+import crosshairUrl from "@/assets/cursors/Cursor=Cross.svg";
+import arrowUrl from "@/assets/cursors/Cursor=Default.svg";
+import closedHandUrl from "@/assets/cursors/Cursor=Hand-(Grabbing).svg";
+import openHandUrl from "@/assets/cursors/Cursor=Hand-(Open).svg";
+import pointerUrl from "@/assets/cursors/Cursor=Hand-(Pointing).svg";
+import helpUrl from "@/assets/cursors/Cursor=Help.svg";
+import moveUrl from "@/assets/cursors/Cursor=Move.svg";
+import notAllowedUrl from "@/assets/cursors/Cursor=Not-Allowed.svg";
+import resizeNeswUrl from "@/assets/cursors/Cursor=Resize-North-East-South-West.svg";
+import resizeNsUrl from "@/assets/cursors/Cursor=Resize-North-South.svg";
+import resizeNwseUrl from "@/assets/cursors/Cursor=Resize-North-West-South-East.svg";
+import resizeEwUrl from "@/assets/cursors/Cursor=Resize-West-East.svg";
+import textUrl from "@/assets/cursors/Cursor=Text-Cursor.svg";
+import upArrowUrl from "@/assets/cursors/Cursor=Up-Arrow.svg";
+import waitUrl from "@/assets/cursors/Cursor=Wait.svg";
+import type { CropRegion } from "@/components/video-editor/types";
+import type {
+	CursorRecordingData,
+	CursorRecordingSample,
+	NativeCursorAsset,
+	NativeCursorType,
+} from "@/native/contracts";
+
+export interface ActiveNativeCursorFrame {
+	asset: NativeCursorAsset;
+	sample: CursorRecordingSample;
+}
+
+export interface NativeCursorSmoothingState {
+	cx: number;
+	cy: number;
+	lastTimeMs: number | null;
+	initialized: boolean;
+}
+
+export interface NativeCursorMotionBlurState {
+	x: number;
+	y: number;
+	lastTimeMs: number | null;
+	initialized: boolean;
+}
+
+interface ProjectNativeCursorOptions {
+	cropRegion: CropRegion;
+	maskRect: { x: number; y: number; width: number; height: number };
+	sample: CursorRecordingSample;
+}
+
+interface ProjectNativeCursorToStageOptions extends ProjectNativeCursorOptions {
+	cameraContainer: Container;
+	videoContainerPosition: { x: number; y: number };
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(max, Math.max(min, value));
+}
+
+const NATIVE_CURSOR_CLICK_ANIMATION_MS = 260;
+const NATIVE_CURSOR_MOTION_BLUR_MAX_PX = 6;
+const nativeCursorAssetMapCache = new WeakMap<
+	CursorRecordingData,
+	Map<string, NativeCursorAsset>
+>();
+
+function findNativeCursorSampleIndexAtOrBefore(samples: CursorRecordingSample[], timeMs: number) {
+	let low = 0;
+	let high = samples.length - 1;
+	let result = -1;
+
+	while (low <= high) {
+		const middle = low + Math.floor((high - low) / 2);
+		if (samples[middle].timeMs <= timeMs) {
+			result = middle;
+			low = middle + 1;
+		} else {
+			high = middle - 1;
+		}
+	}
+
+	return result;
+}
+
+function getNativeCursorAssetMap(recordingData: CursorRecordingData) {
+	const cached = nativeCursorAssetMapCache.get(recordingData);
+	if (cached) {
+		return cached;
+	}
+
+	const assetMap = new Map(recordingData.assets.map((asset) => [asset.id, asset]));
+	nativeCursorAssetMapCache.set(recordingData, assetMap);
+	return assetMap;
+}
+
+function getNativeCursorAsset(recordingData: CursorRecordingData, assetId: string) {
+	return getNativeCursorAssetMap(recordingData).get(assetId) ?? null;
+}
+
+interface PrettyNativeCursorAsset {
+	imageDataUrl: string;
+	width: number;
+	height: number;
+	hotspotX: number;
+	hotspotY: number;
+}
+
+const PRETTY_NATIVE_CURSOR_ASSETS: Partial<Record<NativeCursorType, PrettyNativeCursorAsset>> = {
+	arrow: {
+		imageDataUrl: arrowUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16.25,
+		hotspotY: 15.03,
+	},
+	text: {
+		imageDataUrl: textUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	pointer: {
+		imageDataUrl: pointerUrl,
+		width: 32,
+		height: 33,
+		hotspotX: 16.65,
+		hotspotY: 14.24,
+	},
+	crosshair: {
+		imageDataUrl: crosshairUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	"open-hand": {
+		imageDataUrl: openHandUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 9,
+	},
+	"closed-hand": {
+		imageDataUrl: closedHandUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 9,
+	},
+	"resize-ew": {
+		imageDataUrl: resizeEwUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	"resize-ns": {
+		imageDataUrl: resizeNsUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	"resize-nesw": {
+		imageDataUrl: resizeNeswUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	"resize-nwse": {
+		imageDataUrl: resizeNwseUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	move: {
+		imageDataUrl: moveUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	"not-allowed": {
+		imageDataUrl: notAllowedUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	wait: {
+		imageDataUrl: waitUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 16,
+	},
+	"app-starting": {
+		imageDataUrl: appStartingUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 7.25,
+		hotspotY: 4.03,
+	},
+	help: {
+		imageDataUrl: helpUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 7.25,
+		hotspotY: 4.03,
+	},
+	"up-arrow": {
+		imageDataUrl: upArrowUrl,
+		width: 32,
+		height: 32,
+		hotspotX: 16,
+		hotspotY: 3,
+	},
+};
+
+const TELEMETRY_CURSOR_ASSET: NativeCursorAsset = {
+	id: "telemetry-arrow",
+	platform: "darwin",
+	imageDataUrl: arrowUrl,
+	width: PRETTY_NATIVE_CURSOR_ASSETS.arrow?.width ?? 32,
+	height: PRETTY_NATIVE_CURSOR_ASSETS.arrow?.height ?? 32,
+	hotspotX: PRETTY_NATIVE_CURSOR_ASSETS.arrow?.hotspotX ?? 16,
+	hotspotY: PRETTY_NATIVE_CURSOR_ASSETS.arrow?.hotspotY ?? 16,
+	cursorType: "arrow",
+};
+
+function getTelemetryCursorAsset(sample?: CursorRecordingSample): NativeCursorAsset {
+	const cursorType = sample?.cursorType ?? "arrow";
+	const prettyAsset = PRETTY_NATIVE_CURSOR_ASSETS[cursorType] ?? PRETTY_NATIVE_CURSOR_ASSETS.arrow;
+
+	return {
+		...TELEMETRY_CURSOR_ASSET,
+		id: `telemetry-${cursorType}`,
+		imageDataUrl: prettyAsset?.imageDataUrl ?? TELEMETRY_CURSOR_ASSET.imageDataUrl,
+		width: prettyAsset?.width ?? TELEMETRY_CURSOR_ASSET.width,
+		height: prettyAsset?.height ?? TELEMETRY_CURSOR_ASSET.height,
+		hotspotX: prettyAsset?.hotspotX ?? TELEMETRY_CURSOR_ASSET.hotspotX,
+		hotspotY: prettyAsset?.hotspotY ?? TELEMETRY_CURSOR_ASSET.hotspotY,
+		cursorType,
+	};
+}
+
+function resolveUntypedPrettyNativeCursorAsset(asset: NativeCursorAsset) {
+	if (
+		asset.cursorType ||
+		asset.width < 24 ||
+		asset.width > 64 ||
+		asset.height < 24 ||
+		asset.height > 64
+	) {
+		return null;
+	}
+
+	const hotspotXNorm = asset.hotspotX / asset.width;
+	const hotspotYNorm = asset.hotspotY / asset.height;
+	const looksLikeChromiumGrabCursor =
+		hotspotXNorm >= 0.22 && hotspotXNorm <= 0.55 && hotspotYNorm >= 0.2 && hotspotYNorm <= 0.45;
+
+	return looksLikeChromiumGrabCursor ? (PRETTY_NATIVE_CURSOR_ASSETS["open-hand"] ?? null) : null;
+}
+
+export function hasNativeCursorRecordingData(
+	recordingData: CursorRecordingData | null | undefined,
+): recordingData is CursorRecordingData {
+	return Boolean(
+		recordingData &&
+			recordingData.samples.length > 0 &&
+			(recordingData.assets.length > 0 || recordingData.provider === "none"),
+	);
+}
+
+export function createNativeCursorSmoothingState(): NativeCursorSmoothingState {
+	return {
+		cx: 0,
+		cy: 0,
+		lastTimeMs: null,
+		initialized: false,
+	};
+}
+
+export function resetNativeCursorSmoothingState(state: NativeCursorSmoothingState) {
+	state.cx = 0;
+	state.cy = 0;
+	state.lastTimeMs = null;
+	state.initialized = false;
+}
+
+export function createNativeCursorMotionBlurState(): NativeCursorMotionBlurState {
+	return {
+		x: 0,
+		y: 0,
+		lastTimeMs: null,
+		initialized: false,
+	};
+}
+
+export function resetNativeCursorMotionBlurState(state: NativeCursorMotionBlurState) {
+	state.x = 0;
+	state.y = 0;
+	state.lastTimeMs = null;
+	state.initialized = false;
+}
+
+export function smoothNativeCursorSample({
+	forceSnap = false,
+	sample,
+	smoothing,
+	state,
+	timeMs,
+}: {
+	forceSnap?: boolean;
+	sample: CursorRecordingSample;
+	smoothing: number;
+	state: NativeCursorSmoothingState;
+	timeMs: number;
+}): CursorRecordingSample {
+	const clampedSmoothing = clamp(Number.isFinite(smoothing) ? smoothing : 0, 0, 0.98);
+	const previousTimeMs = state.lastTimeMs;
+	const shouldSnap =
+		forceSnap ||
+		clampedSmoothing <= 0 ||
+		!state.initialized ||
+		previousTimeMs === null ||
+		timeMs <= previousTimeMs;
+
+	if (shouldSnap) {
+		state.cx = sample.cx;
+		state.cy = sample.cy;
+		state.lastTimeMs = timeMs;
+		state.initialized = true;
+		return sample;
+	}
+
+	const frameCount = Math.max(1, (timeMs - previousTimeMs) / (1000 / 60));
+	const alpha = 1 - Math.pow(clampedSmoothing, frameCount);
+	state.cx += (sample.cx - state.cx) * alpha;
+	state.cy += (sample.cy - state.cy) * alpha;
+	state.lastTimeMs = timeMs;
+
+	return {
+		...sample,
+		cx: state.cx,
+		cy: state.cy,
+	};
+}
+
+export function getNativeCursorClickBounceProgress(
+	recordingData: CursorRecordingData | null | undefined,
+	timeMs: number,
+) {
+	if (!recordingData || recordingData.samples.length === 0) {
+		return 0;
+	}
+
+	for (
+		let index = findNativeCursorSampleIndexAtOrBefore(recordingData.samples, timeMs);
+		index >= 0;
+		index -= 1
+	) {
+		const sample = recordingData.samples[index];
+		const ageMs = timeMs - sample.timeMs;
+		if (ageMs > NATIVE_CURSOR_CLICK_ANIMATION_MS) {
+			return 0;
+		}
+
+		if (sample.interactionType === "click") {
+			return 1 - ageMs / NATIVE_CURSOR_CLICK_ANIMATION_MS;
+		}
+	}
+
+	return 0;
+}
+
+export function getNativeCursorClickBounceScale(clickBounce: number, progress: number) {
+	if (progress <= 0 || clickBounce <= 0) {
+		return 1;
+	}
+
+	const intensity = clamp(clickBounce, 0, 5) / 5;
+	const elapsed = 1 - clamp(progress, 0, 1);
+	if (elapsed < 0.38) {
+		const pressProgress = Math.sin((elapsed / 0.38) * Math.PI);
+		return 1 - pressProgress * intensity * 0.24;
+	}
+
+	const reboundProgress = Math.sin(((elapsed - 0.38) / 0.62) * Math.PI);
+	return 1 + reboundProgress * intensity * 0.16;
+}
+
+export function getNativeCursorMotionBlurPx({
+	motionBlur,
+	point,
+	state,
+	timeMs,
+}: {
+	motionBlur: number;
+	point: { x: number; y: number };
+	state: NativeCursorMotionBlurState;
+	timeMs: number;
+}) {
+	const clampedMotionBlur = clamp(Number.isFinite(motionBlur) ? motionBlur : 0, 0, 1);
+	const previousTimeMs = state.lastTimeMs;
+	const shouldSnap =
+		clampedMotionBlur <= 0 ||
+		!state.initialized ||
+		previousTimeMs === null ||
+		timeMs <= previousTimeMs;
+
+	if (shouldSnap) {
+		state.x = point.x;
+		state.y = point.y;
+		state.lastTimeMs = timeMs;
+		state.initialized = true;
+		return 0;
+	}
+
+	const deltaMs = Math.max(1, timeMs - previousTimeMs);
+	const distance = Math.hypot(point.x - state.x, point.y - state.y);
+	const speedPxPerSecond = (distance / deltaMs) * 1000;
+	state.x = point.x;
+	state.y = point.y;
+	state.lastTimeMs = timeMs;
+
+	return clamp(speedPxPerSecond * clampedMotionBlur * 0.004, 0, NATIVE_CURSOR_MOTION_BLUR_MAX_PX);
+}
+
+function getCroppedCursorPosition(sample: CursorRecordingSample, cropRegion: CropRegion) {
+	if (cropRegion.width <= 0 || cropRegion.height <= 0) {
+		return null;
+	}
+
+	const croppedCx = (sample.cx - cropRegion.x) / cropRegion.width;
+	const croppedCy = (sample.cy - cropRegion.y) / cropRegion.height;
+
+	if (croppedCx < 0 || croppedCx > 1 || croppedCy < 0 || croppedCy > 1) {
+		return null;
+	}
+
+	return {
+		cx: clamp(croppedCx, 0, 1),
+		cy: clamp(croppedCy, 0, 1),
+	};
+}
+
+function getNativeCursorMaskPoint(sample: CursorRecordingSample, cropRegion: CropRegion) {
+	const croppedPosition = getCroppedCursorPosition(sample, cropRegion);
+	if (!croppedPosition) {
+		return null;
+	}
+
+	return new Point(croppedPosition.cx, croppedPosition.cy);
+}
+
+export function resolveActiveNativeCursorFrame(
+	recordingData: CursorRecordingData | null | undefined,
+	timeMs: number,
+): ActiveNativeCursorFrame | null {
+	if (!hasNativeCursorRecordingData(recordingData)) {
+		return null;
+	}
+
+	const index = findNativeCursorSampleIndexAtOrBefore(recordingData.samples, timeMs);
+	if (index >= 0) {
+		const sample = recordingData.samples[index];
+
+		if (sample.visible === false) {
+			return null;
+		}
+
+		const asset = sample.assetId
+			? getNativeCursorAsset(recordingData, sample.assetId)
+			: getTelemetryCursorAsset(sample);
+		if (!asset) {
+			return null;
+		}
+
+		return { sample, asset };
+	}
+
+	return null;
+}
+
+export function resolveInterpolatedNativeCursorFrame(
+	recordingData: CursorRecordingData | null | undefined,
+	timeMs: number,
+): ActiveNativeCursorFrame | null {
+	if (!hasNativeCursorRecordingData(recordingData)) {
+		return null;
+	}
+
+	const samples = recordingData.samples;
+	const activeIndex = findNativeCursorSampleIndexAtOrBefore(samples, timeMs);
+
+	if (activeIndex < 0) {
+		return null;
+	}
+
+	const activeSample = samples[activeIndex];
+	if (activeSample.visible === false) {
+		return null;
+	}
+
+	const asset = activeSample.assetId
+		? getNativeCursorAsset(recordingData, activeSample.assetId)
+		: getTelemetryCursorAsset(activeSample);
+	if (!asset) {
+		return null;
+	}
+
+	const nextSample = samples[activeIndex + 1];
+	if (
+		!nextSample ||
+		nextSample.timeMs <= activeSample.timeMs ||
+		nextSample.visible === false ||
+		(nextSample.assetId ?? null) !== (activeSample.assetId ?? null) ||
+		timeMs <= activeSample.timeMs
+	) {
+		return { asset, sample: activeSample };
+	}
+
+	const interpolation = clamp(
+		(timeMs - activeSample.timeMs) / (nextSample.timeMs - activeSample.timeMs),
+		0,
+		1,
+	);
+
+	return {
+		asset,
+		sample: {
+			...activeSample,
+			cx: activeSample.cx + (nextSample.cx - activeSample.cx) * interpolation,
+			cy: activeSample.cy + (nextSample.cy - activeSample.cy) * interpolation,
+		},
+	};
+}
+
+export function projectNativeCursorToLocal({
+	cropRegion,
+	maskRect,
+	sample,
+}: ProjectNativeCursorOptions) {
+	const maskPoint = getNativeCursorMaskPoint(sample, cropRegion);
+	if (!maskPoint) {
+		return null;
+	}
+
+	return new Point(
+		maskRect.x + maskPoint.x * maskRect.width,
+		maskRect.y + maskPoint.y * maskRect.height,
+	);
+}
+
+export function projectNativeCursorToStage({
+	cameraContainer,
+	videoContainerPosition,
+	...options
+}: ProjectNativeCursorToStageOptions) {
+	const localPoint = projectNativeCursorToLocal(options);
+	if (!localPoint) {
+		return null;
+	}
+
+	return cameraContainer.toGlobal(
+		new Point(localPoint.x + videoContainerPosition.x, localPoint.y + videoContainerPosition.y),
+	);
+}
+
+export function getNativeCursorDisplayMetrics(asset: NativeCursorAsset, deviceScaleFactor: number) {
+	const scaleFactor = asset.scaleFactor ?? deviceScaleFactor ?? 1;
+	return {
+		width: asset.width / scaleFactor,
+		height: asset.height / scaleFactor,
+		hotspotX: asset.hotspotX / scaleFactor,
+		hotspotY: asset.hotspotY / scaleFactor,
+	};
+}
+
+export function resolvePrettyNativeCursorAsset(
+	asset: NativeCursorAsset,
+	sample?: CursorRecordingSample,
+) {
+	const cursorType = sample?.cursorType ?? asset.cursorType ?? null;
+	return cursorType
+		? (PRETTY_NATIVE_CURSOR_ASSETS[cursorType] ?? null)
+		: resolveUntypedPrettyNativeCursorAsset(asset);
+}
+
+export function resolveNativeCursorRenderAsset(
+	asset: NativeCursorAsset,
+	deviceScaleFactor: number,
+	sample?: CursorRecordingSample,
+) {
+	const prettyAsset = resolvePrettyNativeCursorAsset(asset, sample);
+	if (prettyAsset) {
+		return {
+			id: `pretty:${sample?.cursorType ?? asset.cursorType}`,
+			imageDataUrl: prettyAsset.imageDataUrl,
+			width: prettyAsset.width,
+			height: prettyAsset.height,
+			hotspotX: prettyAsset.hotspotX,
+			hotspotY: prettyAsset.hotspotY,
+		};
+	}
+
+	const metrics = getNativeCursorDisplayMetrics(asset, deviceScaleFactor);
+	return {
+		id: asset.id,
+		imageDataUrl: asset.imageDataUrl,
+		width: metrics.width,
+		height: metrics.height,
+		hotspotX: metrics.hotspotX,
+		hotspotY: metrics.hotspotY,
+	};
+}
diff --git a/src/lib/cursorTelemetryBuffer.test.ts b/src/lib/cursorTelemetryBuffer.test.ts
new file mode 100644
index 0000000..17174ac
--- /dev/null
+++ b/src/lib/cursorTelemetryBuffer.test.ts
@@ -0,0 +1,271 @@
+import { describe, expect, it, vi } from "vitest";
+import { type CursorTelemetryPoint, createCursorTelemetryBuffer } from "./cursorTelemetryBuffer";
+
+function sample(tag: number): CursorTelemetryPoint {
+	// Decouple the timestamp tag from the coordinate fixture so cursor
+	// points stay inside the normalized [0, 1] range that real samples use.
+	const normalized = (tag % 100) / 100;
+	return { timeMs: tag, cx: normalized, cy: normalized };
+}
+
+describe("createCursorTelemetryBuffer", () => {
+	it("stores samples captured during an active session", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+		buf.startSession(1);
+		for (let i = 0; i < 3; i++) buf.push(sample(i));
+		buf.endSession();
+
+		const batch = buf.takeNextBatch();
+		expect(batch?.recordingId).toBe(1);
+		expect(batch?.samples).toHaveLength(3);
+		expect(batch?.samples[0]?.timeMs).toBe(0);
+	});
+
+	it("trims active samples past maxActiveSamples (ring behaviour)", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 2 });
+		buf.startSession(1);
+		buf.push(sample(1));
+		buf.push(sample(2));
+		buf.push(sample(3));
+		buf.endSession();
+
+		const batch = buf.takeNextBatch();
+		expect(batch?.samples).toEqual([sample(2), sample(3)]);
+	});
+
+	it("preserves earlier pending batches when a new session starts before store", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+		// Recording 1
+		buf.startSession(1);
+		buf.push(sample(101));
+		buf.push(sample(102));
+		buf.endSession();
+
+		// Recording 2 starts before recording 1's batch has been consumed
+		buf.startSession(2);
+		buf.push(sample(201));
+		buf.endSession();
+
+		const batch1 = buf.takeNextBatch();
+		const batch2 = buf.takeNextBatch();
+		expect(batch1?.recordingId).toBe(1);
+		expect(batch1?.samples.map((s) => s.timeMs)).toEqual([101, 102]);
+		expect(batch2?.recordingId).toBe(2);
+		expect(batch2?.samples.map((s) => s.timeMs)).toEqual([201]);
+	});
+
+	it("returns null when nothing is pending", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+		expect(buf.takeNextBatch()).toBeNull();
+	});
+
+	it("drops empty sessions instead of queuing empty batches", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+		buf.startSession(1);
+		buf.endSession();
+		expect(buf.pendingCount).toBe(0);
+		expect(buf.takeNextBatch()).toBeNull();
+	});
+
+	it("caps the pending queue at maxPendingBatches to bound memory", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10, maxPendingBatches: 3 });
+
+		for (let round = 1; round <= 5; round++) {
+			buf.startSession(round);
+			buf.push(sample(round));
+			buf.endSession();
+		}
+
+		expect(buf.pendingCount).toBe(3);
+		// Oldest two batches (rounds 1 and 2) should have been dropped
+		expect(buf.takeNextBatch()?.recordingId).toBe(3);
+		expect(buf.takeNextBatch()?.recordingId).toBe(4);
+		expect(buf.takeNextBatch()?.recordingId).toBe(5);
+	});
+
+	it("starting a new session clears in-progress samples but keeps pending batches", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+		buf.startSession(1);
+		buf.push(sample(1));
+		buf.endSession();
+
+		buf.startSession(2);
+		buf.push(sample(99));
+		// Simulate another startSession before endSession (e.g. rapid restart)
+		buf.startSession(3);
+		expect(buf.activeCount).toBe(0);
+		expect(buf.pendingCount).toBe(1);
+
+		const batch = buf.takeNextBatch();
+		expect(batch?.recordingId).toBe(1);
+		expect(batch?.samples.map((s) => s.timeMs)).toEqual([1]);
+	});
+
+	it("discardBatch(id) drops only the batch produced by that recording id", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+		buf.startSession(1);
+		buf.push(sample(1));
+		buf.endSession();
+
+		buf.startSession(2);
+		buf.push(sample(2));
+		buf.endSession();
+
+		expect(buf.pendingCount).toBe(2);
+		expect(buf.discardBatch(1)).toBe(true);
+		expect(buf.pendingCount).toBe(1);
+		expect(buf.takeNextBatch()?.recordingId).toBe(2);
+	});
+
+	it("discardBatch(id) targets the correct batch even when a later recording sits in front of it", () => {
+		// Regression test for the rapid Stop → Record → Discard sequence:
+		// recording A's finalize callback does async work (fixWebmDuration),
+		// recording B finishes in the meantime, then A's callback resolves
+		// with discard intent. The discard must drop A — not B, which
+		// happens to be the *latest* pending batch by the time discard runs.
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+		buf.startSession(1);
+		buf.push(sample(11));
+		buf.endSession();
+
+		buf.startSession(2);
+		buf.push(sample(22));
+		buf.endSession();
+
+		expect(buf.pendingCount).toBe(2);
+		expect(buf.discardBatch(1)).toBe(true);
+
+		const remaining = buf.takeNextBatch();
+		expect(remaining?.recordingId).toBe(2);
+		expect(remaining?.samples.map((s) => s.timeMs)).toEqual([22]);
+		expect(buf.takeNextBatch()).toBeNull();
+	});
+
+	it("discardBatch(id) is a no-op (returns false) when the id is unknown or already drained", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+		expect(buf.discardBatch(42)).toBe(false);
+
+		buf.startSession(1);
+		buf.push(sample(1));
+		buf.endSession();
+		buf.takeNextBatch();
+		expect(buf.discardBatch(1)).toBe(false);
+		expect(buf.pendingCount).toBe(0);
+	});
+
+	it("prependBatch() re-inserts a batch at the front of the queue", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+		buf.startSession(1);
+		buf.push(sample(1));
+		buf.endSession();
+
+		const batch = buf.takeNextBatch();
+		expect(batch).not.toBeNull();
+		expect(buf.pendingCount).toBe(0);
+
+		if (batch) buf.prependBatch(batch);
+		expect(buf.pendingCount).toBe(1);
+		const next = buf.takeNextBatch();
+		expect(next?.recordingId).toBe(1);
+		expect(next?.samples.map((s) => s.timeMs)).toEqual([1]);
+	});
+
+	it("prependBatch() ignores empty batches", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+		buf.prependBatch({ recordingId: 1, samples: [] });
+		expect(buf.pendingCount).toBe(0);
+	});
+
+	it("endSession() returns the number of dropped batches and warns when the cap is exceeded", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10, maxPendingBatches: 2 });
+		const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+
+		for (let round = 1; round <= 2; round++) {
+			buf.startSession(round);
+			buf.push(sample(round));
+			expect(buf.endSession()).toBe(0);
+		}
+		expect(warn).not.toHaveBeenCalled();
+
+		buf.startSession(3);
+		buf.push(sample(3));
+		const dropped = buf.endSession();
+		expect(dropped).toBe(1);
+		expect(warn).toHaveBeenCalledTimes(1);
+		expect(warn.mock.calls[0]?.[0]).toMatch(/dropped 1 pending batch/);
+		expect(buf.pendingCount).toBe(2);
+
+		warn.mockRestore();
+	});
+
+	it("prependBatch() defensively trims and warns when it would exceed the cap", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10, maxPendingBatches: 2 });
+		const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+
+		// Fill the queue to the cap without dropping anything.
+		for (let round = 1; round <= 2; round++) {
+			buf.startSession(round);
+			buf.push(sample(round));
+			buf.endSession();
+		}
+		expect(buf.pendingCount).toBe(2);
+		expect(warn).not.toHaveBeenCalled();
+
+		// Simulate a misuse where a retry prepends without first draining:
+		// queue would grow to 3, so the oldest-trailing entry must be evicted.
+		buf.prependBatch({ recordingId: 99, samples: [sample(99)] });
+		expect(buf.pendingCount).toBe(2);
+		expect(warn).toHaveBeenCalledTimes(1);
+		expect(warn.mock.calls[0]?.[0]).toMatch(/prependBatch trimmed 1 trailing batch/);
+
+		// Front is the prepended batch; the preserved trailing batch is round 1.
+		expect(buf.takeNextBatch()?.recordingId).toBe(99);
+		expect(buf.takeNextBatch()?.recordingId).toBe(1);
+		expect(buf.pendingCount).toBe(0);
+
+		warn.mockRestore();
+	});
+
+	it("sanitizes non-finite or non-positive option values to safe defaults", () => {
+		// Infinity / NaN / negative would otherwise turn the trim loops
+		// into infinite loops. The buffer must fall back to defaults.
+		const buf = createCursorTelemetryBuffer({
+			maxActiveSamples: Number.POSITIVE_INFINITY,
+			maxPendingBatches: Number.NaN,
+		});
+
+		buf.startSession(1);
+		buf.push(sample(1));
+		expect(() => buf.endSession()).not.toThrow();
+		expect(buf.pendingCount).toBe(1);
+
+		const buf2 = createCursorTelemetryBuffer({
+			maxActiveSamples: -5,
+			maxPendingBatches: 0,
+		});
+		buf2.startSession(2);
+		buf2.push(sample(2));
+		expect(() => buf2.endSession()).not.toThrow();
+		expect(buf2.pendingCount).toBe(1);
+	});
+
+	it("reset() clears both active and pending state", () => {
+		const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+		buf.startSession(1);
+		buf.push(sample(1));
+		buf.endSession();
+		buf.startSession(2);
+		buf.push(sample(2));
+
+		buf.reset();
+
+		expect(buf.activeCount).toBe(0);
+		expect(buf.pendingCount).toBe(0);
+		expect(buf.takeNextBatch()).toBeNull();
+	});
+});
diff --git a/src/lib/cursorTelemetryBuffer.ts b/src/lib/cursorTelemetryBuffer.ts
new file mode 100644
index 0000000..0c7e0e1
--- /dev/null
+++ b/src/lib/cursorTelemetryBuffer.ts
@@ -0,0 +1,213 @@
+/**
+ * A single cursor telemetry sample captured during a recording session.
+ *
+ * Coordinates (`cx`, `cy`) are clamped ratios in the `[0, 1]` range,
+ * normalised against the captured surface's width and height by the
+ * main-process `sampleCursorPoint()` before being pushed. `timeMs` is the
+ * offset (in milliseconds) from the recording's start.
+ */
+export interface CursorTelemetryPoint {
+	timeMs: number;
+	cx: number;
+	cy: number;
+}
+
+/**
+ * A completed batch of cursor samples, tagged with the recording id that
+ * produced them. The id is supplied at `startSession()` time and travels
+ * with the batch through the pending queue, retries, and discards.
+ */
+export interface CursorTelemetryBatch {
+	recordingId: number;
+	samples: CursorTelemetryPoint[];
+}
+
+/**
+ * Per-session cursor telemetry buffer with bounded memory.
+ *
+ * Flow: `startSession(recordingId)` → `push(point)` N times → `endSession()`
+ * enqueues the collected samples as a completed batch tagged with that
+ * `recordingId`. The main process later drains batches in FIFO order via
+ * `takeNextBatch()` to persist them to disk, and can `prependBatch()` on
+ * write failure to retry without losing order. A discard request keys on
+ * the recording id so an asynchronous "discard recording A" decision that
+ * arrives after recording B has already enqueued its batch still drops
+ * the right one.
+ *
+ * Memory is bounded by `maxActiveSamples` (ring buffer on the in-progress
+ * batch) and `maxPendingBatches` (FIFO cap across completed batches).
+ */
+export interface CursorTelemetryBuffer {
+	/**
+	 * Begin a new recording session under the given `recordingId`. Clears
+	 * any in-progress active samples (without touching already-completed
+	 * pending batches). Safe to call repeatedly — e.g. a rapid Stop →
+	 * Record sequence — and the most recent id wins.
+	 */
+	startSession(recordingId: number): void;
+
+	/**
+	 * Append a telemetry sample to the current active session. When the
+	 * active buffer exceeds `maxActiveSamples`, the oldest sample is
+	 * dropped (ring behaviour).
+	 */
+	push(point: CursorTelemetryPoint): void;
+
+	/**
+	 * Finalize the active session, moving its samples into the pending
+	 * queue as a single batch tagged with the current recording id. Empty
+	 * sessions are dropped (no empty batch is enqueued).
+	 *
+	 * If the pending queue would exceed `maxPendingBatches`, the oldest
+	 * batches are evicted to bound memory. A `console.warn` is emitted
+	 * whenever at least one batch is dropped so that pathological rapid-
+	 * restart scenarios are observable.
+	 *
+	 * @returns the number of pending batches dropped by this call (0 under
+	 * normal operation).
+	 */
+	endSession(): number;
+
+	/**
+	 * Remove and return the oldest pending batch, or `null` if the queue
+	 * is empty.
+	 */
+	takeNextBatch(): CursorTelemetryBatch | null;
+
+	/**
+	 * Re-insert a batch at the front of the queue, preserving FIFO order
+	 * on retry paths (e.g. when persisting the batch failed and the
+	 * caller wants the next `takeNextBatch()` to yield it again).
+	 *
+	 * Empty batches are ignored. The pending cap is enforced defensively
+	 * — if prepending would push the queue past `maxPendingBatches`, the
+	 * oldest entries are evicted and a `console.warn` is emitted. In
+	 * normal retry usage this trim is a no-op because the caller has just
+	 * removed the batch via `takeNextBatch()`.
+	 */
+	prependBatch(batch: CursorTelemetryBatch): void;
+
+	/**
+	 * Drop the pending batch produced by the given `recordingId`. Used
+	 * when a recording is discarded after its `endSession()` has run but
+	 * before it has been persisted. Returns `true` if a batch was
+	 * removed, `false` otherwise (no matching id, or the batch was
+	 * already drained).
+	 *
+	 * Keying on the recording id (rather than "the latest pending batch")
+	 * avoids a real bug: when finalizing a recording does asynchronous
+	 * work like `fixWebmDuration`, a quick Stop → Record → Discard
+	 * sequence can interleave such that the latest pending batch belongs
+	 * to a *later* recording than the one being discarded.
+	 */
+	discardBatch(recordingId: number): boolean;
+
+	/**
+	 * Clear both the active and pending state. Intended for tests and
+	 * full teardown paths.
+	 */
+	reset(): void;
+
+	readonly activeCount: number;
+	readonly pendingCount: number;
+}
+
+export interface CursorTelemetryBufferOptions {
+	maxActiveSamples: number;
+	maxPendingBatches?: number;
+}
+
+const DEFAULT_MAX_PENDING_BATCHES = 8;
+const DEFAULT_MAX_ACTIVE_SAMPLES = 10_000;
+
+/** Coerce a numeric option into a safe, finite, positive integer. */
+function sanitizeLimit(value: number | undefined, fallback: number): number {
+	if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+	const floored = Math.floor(value);
+	return floored >= 1 ? floored : fallback;
+}
+
+/**
+ * Create a cursor telemetry buffer.
+ *
+ * Numeric options are sanitized: non-finite, negative, or zero values fall
+ * back to safe defaults so a bad caller cannot disable the memory bounds
+ * (which would turn the trim loops into infinite loops).
+ *
+ * @see CursorTelemetryBuffer for the full lifecycle contract.
+ */
+export function createCursorTelemetryBuffer(
+	options: CursorTelemetryBufferOptions,
+): CursorTelemetryBuffer {
+	const maxActive = sanitizeLimit(options.maxActiveSamples, DEFAULT_MAX_ACTIVE_SAMPLES);
+	const maxPending = sanitizeLimit(options.maxPendingBatches, DEFAULT_MAX_PENDING_BATCHES);
+
+	let active: CursorTelemetryPoint[] = [];
+	let activeRecordingId: number | null = null;
+	let pending: CursorTelemetryBatch[] = [];
+
+	return {
+		startSession(recordingId) {
+			active = [];
+			activeRecordingId = recordingId;
+		},
+		push(point) {
+			active.push(point);
+			if (active.length > maxActive) {
+				active.shift();
+			}
+		},
+		endSession() {
+			let dropped = 0;
+			if (active.length > 0 && activeRecordingId !== null) {
+				pending.push({ recordingId: activeRecordingId, samples: active });
+				while (pending.length > maxPending) {
+					pending.shift();
+					dropped++;
+				}
+			}
+			active = [];
+			activeRecordingId = null;
+			if (dropped > 0) {
+				console.warn(
+					`[cursorTelemetryBuffer] dropped ${dropped} pending batch(es) to stay within maxPendingBatches=${maxPending}`,
+				);
+			}
+			return dropped;
+		},
+		takeNextBatch() {
+			return pending.shift() ?? null;
+		},
+		prependBatch(batch) {
+			if (batch.samples.length === 0) return;
+			pending.unshift(batch);
+			let dropped = 0;
+			while (pending.length > maxPending) {
+				pending.pop();
+				dropped++;
+			}
+			if (dropped > 0) {
+				console.warn(
+					`[cursorTelemetryBuffer] prependBatch trimmed ${dropped} trailing batch(es) to stay within maxPendingBatches=${maxPending}`,
+				);
+			}
+		},
+		discardBatch(recordingId) {
+			const idx = pending.findIndex((b) => b.recordingId === recordingId);
+			if (idx === -1) return false;
+			pending.splice(idx, 1);
+			return true;
+		},
+		reset() {
+			active = [];
+			activeRecordingId = null;
+			pending = [];
+		},
+		get activeCount() {
+			return active.length;
+		},
+		get pendingCount() {
+			return pending.length;
+		},
+	};
+}
diff --git a/src/lib/customFonts.ts b/src/lib/customFonts.ts
new file mode 100644
index 0000000..af332c1
--- /dev/null
+++ b/src/lib/customFonts.ts
@@ -0,0 +1,181 @@
+// Google Fonts loading and management utility
+
+export interface CustomFont {
+	id: string;
+	name: string; // Display name
+	fontFamily: string; // CSS font-family value
+	importUrl: string; // Google Fonts @import URL
+}
+
+const STORAGE_KEY = "openscreen_custom_fonts";
+const loadedFonts = new Set<string>();
+
+// Load custom fonts from localStorage
+export function getCustomFonts(): CustomFont[] {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		return stored ? JSON.parse(stored) : [];
+	} catch (error) {
+		console.error("Failed to load custom fonts from storage:", error);
+		return [];
+	}
+}
+
+// Save custom fonts to localStorage
+export function saveCustomFonts(fonts: CustomFont[]): void {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(fonts));
+	} catch (error) {
+		console.error("Failed to save custom fonts to storage:", error);
+	}
+}
+
+// Add a new custom font (throws error if font fails to load)
+export async function addCustomFont(font: CustomFont): Promise<CustomFont[]> {
+	const fonts = getCustomFonts();
+	const exists = fonts.some((f) => f.id === font.id || f.fontFamily === font.fontFamily);
+
+	if (exists) {
+		return fonts;
+	}
+
+	// Try to load the font first - this will throw if it fails
+	await loadFont(font);
+
+	// Only add to storage if font loaded successfully
+	fonts.push(font);
+	saveCustomFonts(fonts);
+
+	return fonts;
+}
+
+// Remove a custom font
+export function removeCustomFont(fontId: string): CustomFont[] {
+	const fonts = getCustomFonts();
+	const filtered = fonts.filter((f) => f.id !== fontId);
+	saveCustomFonts(filtered);
+
+	// Remove the style element
+	const styleEl = document.getElementById(`custom-font-${fontId}`);
+	if (styleEl) {
+		styleEl.remove();
+	}
+
+	loadedFonts.delete(fontId);
+	return filtered;
+}
+
+// Load a Google Font into the document
+export function loadFont(font: CustomFont): Promise<void> {
+	return new Promise((resolve, reject) => {
+		// Skip if already loaded
+		if (loadedFonts.has(font.id)) {
+			resolve();
+			return;
+		}
+
+		try {
+			const styleId = `custom-font-${font.id}`;
+
+			// Remove existing style if present
+			const existing = document.getElementById(styleId);
+			if (existing) {
+				existing.remove();
+			}
+
+			// Create style element with @import
+			const style = document.createElement("style");
+			style.id = styleId;
+			style.textContent = `@import url('${font.importUrl}');`;
+			document.head.appendChild(style);
+
+			// Wait for font to load
+			waitForFont(font.fontFamily)
+				.then(() => {
+					loadedFonts.add(font.id);
+					resolve();
+				})
+				.catch(reject);
+		} catch (error) {
+			console.error("Failed to load font:", font, error);
+			reject(error);
+		}
+	});
+}
+
+// Wait for a font to be available and verify it loaded
+function waitForFont(fontFamily: string, timeout = 5000): Promise<void> {
+	return new Promise((resolve, reject) => {
+		// Use CSS Font Loading API if available
+		if ("fonts" in document) {
+			Promise.race([
+				document.fonts.load(`16px "${fontFamily}"`),
+				new Promise((_, rej) => setTimeout(() => rej(new Error("Font load timeout")), timeout)),
+			])
+				.then(() => {
+					// Verify the font actually loaded by checking if it's available
+					const isAvailable = document.fonts.check(`16px "${fontFamily}"`);
+					if (isAvailable) {
+						resolve();
+					} else {
+						reject(new Error(`Font "${fontFamily}" failed to load`));
+					}
+				})
+				.catch((error) => {
+					reject(error);
+				});
+		} else {
+			// Fallback for browsers without Font Loading API
+			// Wait a bit and hope for the best
+			setTimeout(() => resolve(), 1000);
+		}
+	});
+}
+
+// Load all stored custom fonts on app initialization
+export function loadAllCustomFonts(): Promise<void[]> {
+	const fonts = getCustomFonts();
+	return Promise.all(
+		fonts.map((font) =>
+			loadFont(font).catch((err) => {
+				console.error("Failed to load custom font:", font.name, err);
+			}),
+		),
+	);
+}
+
+// Generate a unique ID for a font
+export function generateFontId(name: string): string {
+	return `${name.toLowerCase().replace(/\s+/g, "-")}-${Date.now()}`;
+}
+
+// Parse Google Fonts @import URL to extract font family name
+export function parseFontFamilyFromImport(importUrl: string): string | null {
+	try {
+		// Extract from URL like: https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
+		const url = new URL(importUrl);
+		const familyParam = url.searchParams.get("family");
+
+		if (familyParam) {
+			// Remove weight/style info: "Roboto:wght@400;700" -> "Roboto"
+			const fontName = familyParam.split(":")[0];
+			// Replace + with spaces: "Open+Sans" -> "Open Sans"
+			return fontName.replace(/\+/g, " ");
+		}
+
+		return null;
+	} catch (error) {
+		console.error("Failed to parse font family from import URL:", error);
+		return null;
+	}
+}
+
+// Validate if a string looks like a Google Fonts import URL
+export function isValidGoogleFontsUrl(url: string): boolean {
+	try {
+		const urlObj = new URL(url);
+		return urlObj.hostname === "fonts.googleapis.com" && urlObj.searchParams.has("family");
+	} catch {
+		return false;
+	}
+}
diff --git a/src/lib/exporter/annotationRenderer.ts b/src/lib/exporter/annotationRenderer.ts
new file mode 100644
index 0000000..c0d5657
--- /dev/null
+++ b/src/lib/exporter/annotationRenderer.ts
@@ -0,0 +1,451 @@
+import { type AnnotationRegion, type ArrowDirection } from "@/components/video-editor/types";
+import {
+	applyMosaicToImageData,
+	getBlurOverlayColor,
+	getNormalizedBlurIntensity,
+	getNormalizedMosaicBlockSize,
+	normalizeBlurType,
+} from "@/lib/blurEffects";
+
+let blurScratchCanvas: HTMLCanvasElement | null = null;
+let blurScratchCtx: CanvasRenderingContext2D | null = null;
+
+// Matches a single code point whose script is Han (including non-BMP
+// Extension A-F), Hiragana, Katakana (including halfwidth forms), or
+// Hangul. Used to split CJK text at character boundaries during wrap,
+// since CJK scripts have no word-separating whitespace. Unicode script
+// property escapes require ES2018+; tsconfig target is ES2020.
+const CJK_CHAR = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+
+function tokenizeForWrap(line: string): string[] {
+	// Split Latin text on whitespace (preserving the whitespace as its own token,
+	// matching the original behavior), and split CJK runs into individual
+	// characters so each one becomes a breakable unit. This mirrors the editor's
+	// CSS `word-break: break-word` handling for CJK content.
+	const tokens: string[] = [];
+	let buffer = "";
+	const chars = Array.from(line);
+	const flushBuffer = () => {
+		if (buffer) {
+			tokens.push(...buffer.split(/(\s+)/).filter((s) => s.length > 0));
+			buffer = "";
+		}
+	};
+	for (const ch of chars) {
+		if (CJK_CHAR.test(ch)) {
+			flushBuffer();
+			tokens.push(ch);
+		} else {
+			buffer += ch;
+		}
+	}
+	flushBuffer();
+	return tokens;
+}
+
+// SVG path data for each arrow direction
+const ARROW_PATHS: Record<ArrowDirection, string[]> = {
+	up: ["M 50 20 L 50 80", "M 50 20 L 35 35", "M 50 20 L 65 35"],
+	down: ["M 50 20 L 50 80", "M 50 80 L 35 65", "M 50 80 L 65 65"],
+	left: ["M 80 50 L 20 50", "M 20 50 L 35 35", "M 20 50 L 35 65"],
+	right: ["M 20 50 L 80 50", "M 80 50 L 65 35", "M 80 50 L 65 65"],
+	"up-right": ["M 25 75 L 75 25", "M 75 25 L 60 30", "M 75 25 L 70 40"],
+	"up-left": ["M 75 75 L 25 25", "M 25 25 L 40 30", "M 25 25 L 30 40"],
+	"down-right": ["M 25 25 L 75 75", "M 75 75 L 70 60", "M 75 75 L 60 70"],
+	"down-left": ["M 75 25 L 25 75", "M 25 75 L 30 60", "M 25 75 L 40 70"],
+};
+
+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];
+		if (cmd === "M" || cmd === "L") {
+			const x = parseFloat(parts[i + 1]) * scaleX;
+			const y = parseFloat(parts[i + 2]) * scaleY;
+			commands.push({ cmd, args: [x, y] });
+			i += 3;
+		} else {
+			i++;
+		}
+	}
+
+	return commands;
+}
+
+function renderArrow(
+	ctx: CanvasRenderingContext2D,
+	direction: ArrowDirection,
+	color: string,
+	strokeWidth: number,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	_scaleFactor: number,
+) {
+	const paths = ARROW_PATHS[direction];
+	if (!paths) return;
+
+	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.shadowOffsetX = 0;
+	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") {
+				ctx.moveTo(args[0], args[1]);
+			} else if (cmd === "L") {
+				ctx.lineTo(args[0], args[1]);
+			}
+		}
+	}
+
+	ctx.stroke();
+
+	ctx.restore();
+}
+
+function drawBlurPath(
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+) {
+	const shape = annotation.blurData?.shape || "rectangle";
+	if (shape === "rectangle") {
+		ctx.beginPath();
+		ctx.rect(x, y, width, height);
+		return;
+	}
+
+	if (shape === "oval") {
+		ctx.beginPath();
+		ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
+		return;
+	}
+
+	const points = annotation.blurData?.freehandPoints;
+	if (shape === "freehand" && points && points.length >= 3) {
+		ctx.beginPath();
+		ctx.moveTo(x + (points[0].x / 100) * width, y + (points[0].y / 100) * height);
+		for (let i = 1; i < points.length; i++) {
+			ctx.lineTo(x + (points[i].x / 100) * width, y + (points[i].y / 100) * height);
+		}
+		ctx.closePath();
+		return;
+	}
+
+	ctx.beginPath();
+	ctx.rect(x, y, width, height);
+}
+
+function renderBlur(
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	scaleFactor: number,
+) {
+	const canvas = ctx.canvas;
+	const blurType = normalizeBlurType(annotation.blurData?.type);
+
+	const blurRadius = Math.max(
+		1,
+		Math.round(getNormalizedBlurIntensity(annotation.blurData) * scaleFactor),
+	);
+	const samplePadding =
+		blurType === "mosaic"
+			? Math.max(0, Math.ceil(getNormalizedMosaicBlockSize(annotation.blurData, scaleFactor)))
+			: Math.max(2, Math.ceil(blurRadius * 2));
+	const sx = Math.max(0, Math.floor(x) - samplePadding);
+	const sy = Math.max(0, Math.floor(y) - samplePadding);
+	const ex = Math.min(canvas.width, Math.ceil(x + width) + samplePadding);
+	const ey = Math.min(canvas.height, Math.ceil(y + height) + samplePadding);
+	const sw = Math.max(0, ex - sx);
+	const sh = Math.max(0, ey - sy);
+	if (sw <= 0 || sh <= 0) return;
+
+	if (!blurScratchCanvas || !blurScratchCtx) {
+		blurScratchCanvas = document.createElement("canvas");
+		blurScratchCtx = blurScratchCanvas.getContext("2d");
+	}
+	if (!blurScratchCanvas || !blurScratchCtx) return;
+
+	blurScratchCanvas.width = sw;
+	blurScratchCanvas.height = sh;
+	blurScratchCtx.clearRect(0, 0, sw, sh);
+	blurScratchCtx.drawImage(canvas, sx, sy, sw, sh, 0, 0, sw, sh);
+
+	if (blurType === "mosaic") {
+		const imageData = blurScratchCtx.getImageData(0, 0, sw, sh);
+		applyMosaicToImageData(
+			imageData,
+			getNormalizedMosaicBlockSize(annotation.blurData, scaleFactor),
+		);
+		blurScratchCtx.putImageData(imageData, 0, 0);
+	}
+
+	ctx.save();
+	drawBlurPath(ctx, annotation, x, y, width, height);
+	ctx.clip();
+	ctx.filter = blurType === "mosaic" ? "none" : `blur(${blurRadius}px)`;
+	ctx.drawImage(blurScratchCanvas, sx, sy);
+	ctx.filter = "none";
+	ctx.fillStyle = getBlurOverlayColor(annotation.blurData);
+	ctx.fillRect(sx, sy, sw, sh);
+	ctx.restore();
+}
+
+function renderText(
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	scaleFactor: number,
+) {
+	const style = annotation.style;
+
+	ctx.save();
+
+	// Clip text to annotation box bounds (matches editor's overflow: hidden)
+	ctx.beginPath();
+	ctx.rect(x, y, width, height);
+	ctx.clip();
+
+	const fontWeight = style.fontWeight === "bold" ? "bold" : "normal";
+	const fontStyle = style.fontStyle === "italic" ? "italic" : "normal";
+	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";
+	} else if (style.textAlign === "right") {
+		textX = x + width - containerPadding;
+		ctx.textAlign = "right";
+	} else {
+		textX = x + containerPadding;
+		ctx.textAlign = "left";
+	}
+
+	const availableWidth = width - containerPadding * 2;
+	const rawLines = annotation.content.split("\n");
+	const lines: string[] = [];
+	for (const rawLine of rawLines) {
+		if (!rawLine) {
+			lines.push("");
+			continue;
+		}
+		const tokens = tokenizeForWrap(rawLine);
+		let current = "";
+		for (const token of tokens) {
+			const test = current + token;
+			if (current && ctx.measureText(test).width > availableWidth) {
+				lines.push(current);
+				current = token.trimStart();
+			} else {
+				current = test;
+			}
+		}
+		if (current) lines.push(current);
+	}
+	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();
+			ctx.moveTo(underlineX, underlineY);
+			ctx.lineTo(underlineX + metrics.width, underlineY);
+			ctx.stroke();
+		}
+	});
+
+	ctx.restore();
+}
+
+async function renderImage(
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+): Promise<void> {
+	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;
+				drawY = y + (height - drawHeight) / 2;
+			} else {
+				drawWidth = height * imgAspect;
+				drawX = x + (width - drawWidth) / 2;
+			}
+
+			ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+			resolve();
+		};
+		img.onerror = () => {
+			console.error("[AnnotationRenderer] Failed to load image annotation");
+			resolve();
+		};
+		img.src = annotation.content;
+	});
+}
+
+export async function renderAnnotations(
+	ctx: CanvasRenderingContext2D,
+	annotations: AnnotationRegion[],
+	canvasWidth: number,
+	canvasHeight: number,
+	currentTimeMs: number,
+	scaleFactor: number = 1.0,
+): Promise<void> {
+	// Filter active annotations at current time
+	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(
+						ctx,
+						annotation.figureData.arrowDirection,
+						annotation.figureData.color,
+						annotation.figureData.strokeWidth,
+						x,
+						y,
+						width,
+						height,
+						scaleFactor,
+					);
+				}
+				break;
+
+			case "blur":
+				renderBlur(ctx, annotation, x, y, width, height, scaleFactor);
+				break;
+		}
+	}
+}
diff --git a/src/lib/exporter/asyncVideoFrameQueue.ts b/src/lib/exporter/asyncVideoFrameQueue.ts
new file mode 100644
index 0000000..4cab191
--- /dev/null
+++ b/src/lib/exporter/asyncVideoFrameQueue.ts
@@ -0,0 +1,77 @@
+type PendingConsumer = {
+	resolve: (frame: VideoFrame | null) => void;
+	reject: (error: Error) => void;
+};
+
+export class AsyncVideoFrameQueue {
+	private frames: VideoFrame[] = [];
+	private consumers: PendingConsumer[] = [];
+	private error: Error | null = null;
+	private closed = false;
+
+	get length() {
+		return this.frames.length;
+	}
+
+	enqueue(frame: VideoFrame) {
+		if (this.closed) {
+			frame.close();
+			return;
+		}
+
+		const consumer = this.consumers.shift();
+		if (consumer) {
+			consumer.resolve(frame);
+			return;
+		}
+
+		this.frames.push(frame);
+	}
+
+	fail(error: Error) {
+		this.error = error;
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.reject(error);
+		}
+		for (const frame of this.frames) {
+			frame.close();
+		}
+		this.frames = [];
+	}
+
+	close() {
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.resolve(null);
+		}
+	}
+
+	async dequeue(): Promise<VideoFrame | null> {
+		if (this.error) {
+			throw this.error;
+		}
+
+		if (this.frames.length > 0) {
+			return this.frames.shift() ?? null;
+		}
+
+		if (this.closed) {
+			return null;
+		}
+
+		return await new Promise<VideoFrame | null>((resolve, reject) => {
+			this.consumers.push({ resolve, reject });
+		});
+	}
+
+	destroy() {
+		this.close();
+		for (const frame of this.frames) {
+			frame.close();
+		}
+		this.frames = [];
+	}
+}
diff --git a/src/lib/exporter/audioEncoder.test.ts b/src/lib/exporter/audioEncoder.test.ts
new file mode 100644
index 0000000..0fb3708
--- /dev/null
+++ b/src/lib/exporter/audioEncoder.test.ts
@@ -0,0 +1,72 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AudioProcessor, downmixPlanarChannelsForExport } from "./audioEncoder";
+
+describe("AudioProcessor.selectSupportedExportCodec", () => {
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it("falls back to stereo when the source channel count cannot be encoded", async () => {
+		const isConfigSupported = vi.fn(async (config: AudioEncoderConfig) => ({
+			config,
+			supported:
+				config.codec === "mp4a.40.2" &&
+				config.sampleRate === 44100 &&
+				config.numberOfChannels === 2,
+		}));
+		vi.stubGlobal("AudioEncoder", { isConfigSupported });
+
+		const codec = await AudioProcessor.selectSupportedExportCodec(44100, 8);
+
+		expect(codec).toMatchObject({
+			encoderCodec: "mp4a.40.2",
+			muxerCodec: "aac",
+			sampleRate: 44100,
+			numberOfChannels: 2,
+		});
+		expect(isConfigSupported).toHaveBeenCalledWith({
+			codec: "mp4a.40.2",
+			sampleRate: 44100,
+			numberOfChannels: 8,
+			bitrate: 128000,
+		});
+		expect(isConfigSupported).toHaveBeenCalledWith({
+			codec: "mp4a.40.2",
+			sampleRate: 44100,
+			numberOfChannels: 2,
+			bitrate: 128000,
+		});
+	});
+});
+
+describe("downmixPlanarChannelsForExport", () => {
+	it("preserves non-front Windows system audio channels when exporting stereo", () => {
+		const sourcePlanes = Array.from({ length: 8 }, (_, channel) => {
+			const plane = new Float32Array(2);
+			if (channel === 2) {
+				plane[0] = 0.8;
+				plane[1] = 0.4;
+			}
+			if (channel === 6) {
+				plane[0] = 0.2;
+				plane[1] = 0.1;
+			}
+			return plane;
+		});
+
+		const stereo = downmixPlanarChannelsForExport(sourcePlanes, 2);
+
+		expect(stereo[0]).toBeGreaterThan(0);
+		expect(stereo[1]).toBeGreaterThan(0);
+		expect(stereo[2]).toBeGreaterThan(0);
+		expect(stereo[3]).toBeGreaterThan(0);
+	});
+
+	it("duplicates mono microphone audio when exporting stereo", () => {
+		const mono = new Float32Array([0.25, -0.5]);
+
+		const stereo = downmixPlanarChannelsForExport([mono], 2);
+
+		expect(Array.from(stereo)).toEqual([0.25, -0.5, 0.25, -0.5]);
+	});
+});
diff --git a/src/lib/exporter/audioEncoder.ts b/src/lib/exporter/audioEncoder.ts
new file mode 100644
index 0000000..9522784
--- /dev/null
+++ b/src/lib/exporter/audioEncoder.ts
@@ -0,0 +1,829 @@
+import { WebDemuxer } from "web-demuxer";
+import type { SpeedRegion, TrimRegion } from "@/components/video-editor/types";
+import type { ExportAudioMuxerCodec, VideoMuxer } from "./muxer";
+
+const AUDIO_BITRATE = 128_000;
+const DECODE_BACKPRESSURE_LIMIT = 20;
+const MIN_SPEED_REGION_DELTA_MS = 0.0001;
+const SEEK_TIMEOUT_MS = 5_000;
+
+export interface ExportAudioCodec {
+	encoderCodec: string;
+	muxerCodec: ExportAudioMuxerCodec;
+	label: string;
+	sampleRate: number;
+	numberOfChannels: number;
+}
+
+type ExportAudioCodecCandidate = Omit<ExportAudioCodec, "sampleRate" | "numberOfChannels">;
+
+const EXPORT_AUDIO_CODECS: ExportAudioCodecCandidate[] = [
+	{ encoderCodec: "mp4a.40.2", muxerCodec: "aac", label: "AAC" },
+	{ encoderCodec: "opus", muxerCodec: "opus", label: "Opus" },
+];
+
+function averageChannels(sourcePlanes: Float32Array[], frame: number) {
+	let mixed = 0;
+	for (const plane of sourcePlanes) {
+		mixed += plane[frame] ?? 0;
+	}
+	return mixed / Math.max(1, sourcePlanes.length);
+}
+
+function weightedSample(
+	sourcePlanes: Float32Array[],
+	frame: number,
+	weights: Array<[channel: number, weight: number]>,
+) {
+	let mixed = 0;
+	let weightSum = 0;
+	for (const [channel, weight] of weights) {
+		const sample = sourcePlanes[channel]?.[frame];
+		if (typeof sample !== "number") {
+			continue;
+		}
+		mixed += sample * weight;
+		weightSum += weight;
+	}
+	return weightSum > 0 ? mixed / weightSum : averageChannels(sourcePlanes, frame);
+}
+
+function getStereoDownmixWeights(sourceChannels: number) {
+	const centerWeight = Math.SQRT1_2;
+	const surroundWeight = Math.SQRT1_2;
+	const lfeWeight = 0.5;
+
+	if (sourceChannels >= 8) {
+		// Windows 7.1 order: FL, FR, FC, LFE, BL, BR, SL, SR.
+		return {
+			left: [
+				[0, 1],
+				[2, centerWeight],
+				[3, lfeWeight],
+				[4, surroundWeight],
+				[6, surroundWeight],
+			] satisfies Array<[number, number]>,
+			right: [
+				[1, 1],
+				[2, centerWeight],
+				[3, lfeWeight],
+				[5, surroundWeight],
+				[7, surroundWeight],
+			] satisfies Array<[number, number]>,
+		};
+	}
+
+	if (sourceChannels >= 6) {
+		// Windows 5.1 order: FL, FR, FC, LFE, BL, BR.
+		return {
+			left: [
+				[0, 1],
+				[2, centerWeight],
+				[3, lfeWeight],
+				[4, surroundWeight],
+			] satisfies Array<[number, number]>,
+			right: [
+				[1, 1],
+				[2, centerWeight],
+				[3, lfeWeight],
+				[5, surroundWeight],
+			] satisfies Array<[number, number]>,
+		};
+	}
+
+	if (sourceChannels >= 4) {
+		return {
+			left: [
+				[0, 1],
+				[2, surroundWeight],
+			] satisfies Array<[number, number]>,
+			right: [
+				[1, 1],
+				[3, surroundWeight],
+			] satisfies Array<[number, number]>,
+		};
+	}
+
+	return {
+		left: [
+			[0, 1],
+			[2, centerWeight],
+		] satisfies Array<[number, number]>,
+		right: [
+			[1, 1],
+			[2, centerWeight],
+		] satisfies Array<[number, number]>,
+	};
+}
+
+export function downmixPlanarChannelsForExport(
+	sourcePlanes: Float32Array[],
+	targetChannels: number,
+): Float32Array {
+	const frameCount = sourcePlanes[0]?.length ?? 0;
+	const output = new Float32Array(frameCount * targetChannels);
+
+	if (targetChannels === 1) {
+		for (let frame = 0; frame < frameCount; frame++) {
+			output[frame] = averageChannels(sourcePlanes, frame);
+		}
+		return output;
+	}
+
+	if (targetChannels !== 2) {
+		throw new Error(`Unsupported target channel count: ${targetChannels}`);
+	}
+
+	if (sourcePlanes.length === 1) {
+		output.set(sourcePlanes[0], 0);
+		output.set(sourcePlanes[0], frameCount);
+		return output;
+	}
+
+	if (sourcePlanes.length === 2) {
+		output.set(sourcePlanes[0], 0);
+		output.set(sourcePlanes[1], frameCount);
+		return output;
+	}
+
+	const weights = getStereoDownmixWeights(sourcePlanes.length);
+	for (let frame = 0; frame < frameCount; frame++) {
+		output[frame] = weightedSample(sourcePlanes, frame, weights.left);
+		output[frameCount + frame] = weightedSample(sourcePlanes, frame, weights.right);
+	}
+	return output;
+}
+
+export class AudioProcessor {
+	private cancelled = false;
+
+	static async selectSupportedExportCodec(
+		sampleRate: number,
+		numberOfChannels: number,
+	): Promise<ExportAudioCodec | null> {
+		const channelOptions = [numberOfChannels];
+		if (numberOfChannels > 2) {
+			channelOptions.push(2);
+		}
+
+		if (!channelOptions.includes(1)) {
+			channelOptions.push(1);
+		}
+
+		for (const codec of EXPORT_AUDIO_CODECS) {
+			for (const channels of channelOptions) {
+				const support = await AudioEncoder.isConfigSupported({
+					codec: codec.encoderCodec,
+					sampleRate,
+					numberOfChannels: channels,
+					bitrate: AUDIO_BITRATE,
+				});
+				if (support.supported) {
+					return { ...codec, sampleRate, numberOfChannels: channels };
+				}
+			}
+		}
+
+		return null;
+	}
+
+	static async selectSupportedExportCodecForSource(
+		demuxer: WebDemuxer,
+	): Promise<ExportAudioCodec | null> {
+		let audioConfig: AudioDecoderConfig;
+		try {
+			audioConfig = await demuxer.getDecoderConfig("audio");
+		} catch {
+			return null;
+		}
+
+		const codecCheck = await AudioDecoder.isConfigSupported(audioConfig);
+		if (!codecCheck.supported) {
+			console.warn("[AudioProcessor] Audio codec not supported:", audioConfig.codec);
+			return null;
+		}
+
+		return AudioProcessor.selectSupportedExportCodec(
+			audioConfig.sampleRate || 48000,
+			audioConfig.numberOfChannels || 2,
+		);
+	}
+
+	/**
+	 * Audio export has two modes:
+	 * 1) no speed regions -> fast WebCodecs trim-only pipeline
+	 * 2) speed regions present -> pitch-preserving rendered timeline pipeline
+	 */
+	async process(
+		demuxer: WebDemuxer,
+		muxer: VideoMuxer,
+		videoUrl: string,
+		trimRegions: TrimRegion[] | undefined,
+		speedRegions: SpeedRegion[] | undefined,
+		validatedDurationSec: number,
+		exportCodec: ExportAudioCodec,
+	): Promise<void> {
+		const sortedTrims = trimRegions ? [...trimRegions].sort((a, b) => a.startMs - b.startMs) : [];
+		const sortedSpeedRegions = speedRegions
+			? [...speedRegions]
+					.filter((region) => region.endMs - region.startMs > MIN_SPEED_REGION_DELTA_MS)
+					.sort((a, b) => a.startMs - b.startMs)
+			: [];
+
+		// Speed edits must use timeline playback to preserve pitch
+		if (sortedSpeedRegions.length > 0) {
+			const renderedAudioBlob = await this.renderPitchPreservedTimelineAudio(
+				videoUrl,
+				sortedTrims,
+				sortedSpeedRegions,
+				validatedDurationSec,
+			);
+			if (!this.cancelled && renderedAudioBlob.size > 0) {
+				await this.muxRenderedAudioBlob(renderedAudioBlob, muxer, exportCodec);
+				return;
+			}
+			return;
+		}
+
+		// No speed edits: keep the original demux/decode/encode path with trim timestamp remap.
+		// The +0.5s buffer mirrors streamingDecoder.decodeAll's read window so the trim-only
+		// and speed-aware paths agree on how far to read past the validated duration boundary.
+		const readEndSec = validatedDurationSec + 0.5;
+		await this.processTrimOnlyAudio(demuxer, muxer, sortedTrims, readEndSec, exportCodec);
+	}
+
+	// Legacy trim-only path. This is still used for projects without speed regions.
+	private async processTrimOnlyAudio(
+		demuxer: WebDemuxer,
+		muxer: VideoMuxer,
+		sortedTrims: TrimRegion[],
+		readEndSec?: number,
+		exportCodec?: ExportAudioCodec,
+	): Promise<void> {
+		let audioConfig: AudioDecoderConfig;
+		try {
+			audioConfig = await demuxer.getDecoderConfig("audio");
+		} catch {
+			console.warn("[AudioProcessor] No audio track found, skipping");
+			return;
+		}
+
+		const codecCheck = await AudioDecoder.isConfigSupported(audioConfig);
+		if (!codecCheck.supported) {
+			console.warn("[AudioProcessor] Audio codec not supported:", audioConfig.codec);
+			return;
+		}
+
+		// Phase 1: Decode audio from source, skipping trimmed regions
+		const decodedFrames: AudioData[] = [];
+
+		const decoder = new AudioDecoder({
+			output: (data: AudioData) => decodedFrames.push(data),
+			error: (e: DOMException) => console.error("[AudioProcessor] Decode error:", e),
+		});
+		decoder.configure(audioConfig);
+
+		const safeReadEndSec =
+			typeof readEndSec === "number" && Number.isFinite(readEndSec)
+				? Math.max(0, readEndSec)
+				: undefined;
+		const audioStream =
+			safeReadEndSec !== undefined
+				? demuxer.read("audio", 0, safeReadEndSec)
+				: demuxer.read("audio");
+		const reader = audioStream.getReader();
+
+		try {
+			while (!this.cancelled) {
+				const { done, value: chunk } = await reader.read();
+				if (done || !chunk) break;
+
+				const timestampMs = chunk.timestamp / 1000;
+				if (this.isInTrimRegion(timestampMs, sortedTrims)) continue;
+
+				decoder.decode(chunk);
+
+				while (decoder.decodeQueueSize > DECODE_BACKPRESSURE_LIMIT && !this.cancelled) {
+					await new Promise((resolve) => setTimeout(resolve, 1));
+				}
+			}
+		} finally {
+			try {
+				await reader.cancel();
+			} catch {
+				/* reader already closed */
+			}
+		}
+
+		if (decoder.state === "configured") {
+			await decoder.flush();
+			decoder.close();
+		}
+
+		if (this.cancelled || decodedFrames.length === 0) {
+			for (const frame of decodedFrames) frame.close();
+			return;
+		}
+
+		// Phase 2: Re-encode with timestamps adjusted for trim gaps
+		const encodedChunks: { chunk: EncodedAudioChunk; meta?: EncodedAudioChunkMetadata }[] = [];
+
+		const encoder = new AudioEncoder({
+			output: (chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata) => {
+				encodedChunks.push({ chunk, meta });
+			},
+			error: (e: DOMException) => console.error("[AudioProcessor] Encode error:", e),
+		});
+
+		const sampleRate = audioConfig.sampleRate || 48000;
+		const channels = audioConfig.numberOfChannels || 2;
+		const selectedCodec =
+			exportCodec ?? (await AudioProcessor.selectSupportedExportCodec(sampleRate, channels));
+		if (!selectedCodec) {
+			console.warn("[AudioProcessor] No supported audio export codec, skipping audio");
+			for (const frame of decodedFrames) frame.close();
+			return;
+		}
+
+		const outputSampleRate = selectedCodec.sampleRate || sampleRate;
+		const outputChannels = selectedCodec.numberOfChannels || channels;
+		const encodeConfig: AudioEncoderConfig = {
+			codec: selectedCodec.encoderCodec,
+			sampleRate: outputSampleRate,
+			numberOfChannels: outputChannels,
+			bitrate: AUDIO_BITRATE,
+		};
+
+		const encodeSupport = await AudioEncoder.isConfigSupported(encodeConfig);
+		if (!encodeSupport.supported) {
+			console.warn(
+				`[AudioProcessor] ${selectedCodec.label} encoding not supported, skipping audio`,
+			);
+			for (const frame of decodedFrames) frame.close();
+			return;
+		}
+
+		encoder.configure(encodeConfig);
+
+		for (const audioData of decodedFrames) {
+			if (this.cancelled) {
+				audioData.close();
+				continue;
+			}
+
+			const timestampMs = audioData.timestamp / 1000;
+			const trimOffsetMs = this.computeTrimOffset(timestampMs, sortedTrims);
+			const adjustedTimestampUs = audioData.timestamp - trimOffsetMs * 1000;
+
+			const adjusted = this.cloneForEncoding(
+				audioData,
+				Math.max(0, adjustedTimestampUs),
+				outputChannels,
+			);
+			audioData.close();
+
+			encoder.encode(adjusted);
+			adjusted.close();
+		}
+
+		if (encoder.state === "configured") {
+			await encoder.flush();
+			encoder.close();
+		}
+
+		// Phase 3: Flush encoded chunks to muxer
+		for (const { chunk, meta } of encodedChunks) {
+			if (this.cancelled) break;
+			await muxer.addAudioChunk(chunk, meta);
+		}
+
+		console.log(
+			`[AudioProcessor] Processed ${decodedFrames.length} audio frames, encoded ${encodedChunks.length} chunks`,
+		);
+	}
+
+	// Speed-aware path that mirrors preview semantics (trim skipping + playbackRate regions)
+	// preserve pitch through browser media playback behavior to avoid chipmunk effect.
+	private async renderPitchPreservedTimelineAudio(
+		videoUrl: string,
+		trimRegions: TrimRegion[],
+		speedRegions: SpeedRegion[],
+		validatedDurationSec: number,
+	): Promise<Blob> {
+		const media = document.createElement("audio");
+		media.src = videoUrl;
+		media.preload = "auto";
+
+		const pitchMedia = media as HTMLMediaElement & {
+			preservesPitch?: boolean;
+			mozPreservesPitch?: boolean;
+			webkitPreservesPitch?: boolean;
+		};
+		pitchMedia.preservesPitch = true;
+		pitchMedia.mozPreservesPitch = true;
+		pitchMedia.webkitPreservesPitch = true;
+
+		await this.waitForLoadedMetadata(media);
+		if (this.cancelled) {
+			throw new Error("Export cancelled");
+		}
+
+		const audioContext = new AudioContext();
+		const sourceNode = audioContext.createMediaElementSource(media);
+		const destinationNode = audioContext.createMediaStreamDestination();
+		sourceNode.connect(destinationNode);
+
+		let rafId: number | null = null;
+		let recorder: MediaRecorder | null = null;
+		let recordedBlobPromise: Promise<Blob> | null = null;
+
+		try {
+			if (audioContext.state === "suspended") {
+				await audioContext.resume();
+			}
+
+			// Skip past any initial trim region(s) before recording starts to avoid
+			// capturing trimmed audio during the first rAF frames of playback.
+			// Loops to handle back-to-back or overlapping trims at t=0.
+			const effectiveEnd = validatedDurationSec;
+			let startPosition = 0;
+			for (let i = 0; i <= trimRegions.length; i++) {
+				const activeTrim = this.findActiveTrimRegion(startPosition * 1000, trimRegions);
+				if (!activeTrim) break;
+				startPosition = activeTrim.endMs / 1000;
+				if (startPosition >= effectiveEnd) break;
+			}
+
+			if (startPosition >= effectiveEnd) {
+				// All content is trimmed — return silent blob
+				return new Blob([], { type: "audio/webm" });
+			}
+
+			await this.seekTo(media, startPosition);
+
+			// Set initial playback rate for the starting position
+			const initialSpeedRegion = this.findActiveSpeedRegion(startPosition * 1000, speedRegions);
+			if (initialSpeedRegion) {
+				media.playbackRate = initialSpeedRegion.speed;
+			}
+
+			// Start recording only AFTER seeking past trims
+			const recording = this.startAudioRecording(destinationNode.stream);
+			recorder = recording.recorder;
+			recordedBlobPromise = recording.recordedBlobPromise;
+			await media.play();
+
+			await new Promise<void>((resolve, reject) => {
+				const cleanup = () => {
+					if (rafId !== null) {
+						cancelAnimationFrame(rafId);
+						rafId = null;
+					}
+					media.removeEventListener("error", onError);
+					media.removeEventListener("ended", onEnded);
+				};
+
+				const onError = () => {
+					cleanup();
+					reject(new Error("Failed while rendering speed-adjusted audio timeline"));
+				};
+
+				const onEnded = () => {
+					cleanup();
+					resolve();
+				};
+
+				const tick = () => {
+					if (this.cancelled) {
+						cleanup();
+						resolve();
+						return;
+					}
+
+					// Stop playback at validated duration — browser's media.duration
+					// may be inflated from bad container metadata.
+					if (media.currentTime >= validatedDurationSec) {
+						media.pause();
+						cleanup();
+						resolve();
+						return;
+					}
+
+					const currentTimeMs = media.currentTime * 1000;
+					const activeTrimRegion = this.findActiveTrimRegion(currentTimeMs, trimRegions);
+
+					if (activeTrimRegion && !media.paused && !media.ended) {
+						const skipToTime = activeTrimRegion.endMs / 1000;
+						if (skipToTime >= media.duration || skipToTime >= validatedDurationSec) {
+							media.pause();
+							cleanup();
+							resolve();
+							return;
+						}
+						// Pause recording during trim seek to prevent capturing
+						// silence/noise as the audio element seeks.
+						media.pause();
+						if (recorder?.state === "recording") recorder.pause();
+						const onSeeked = () => {
+							clearTimeout(seekTimer);
+							if (this.cancelled) {
+								cleanup();
+								resolve();
+								return;
+							}
+							if (recorder?.state === "paused") recorder.resume();
+							media
+								.play()
+								.then(() => {
+									if (!this.cancelled) rafId = requestAnimationFrame(tick);
+								})
+								.catch((err) => {
+									cleanup();
+									reject(
+										new Error(
+											`Failed to resume playback after trim seek: ${err instanceof Error ? err.message : String(err)}`,
+										),
+									);
+								});
+						};
+						const seekTimer = window.setTimeout(() => {
+							media.removeEventListener("seeked", onSeeked);
+							cleanup();
+							reject(new Error("Audio seek timed out while skipping trim region"));
+						}, SEEK_TIMEOUT_MS);
+						media.addEventListener("seeked", onSeeked, { once: true });
+						media.currentTime = skipToTime;
+						return;
+					}
+
+					const activeSpeedRegion = this.findActiveSpeedRegion(currentTimeMs, speedRegions);
+					const playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+					if (Math.abs(media.playbackRate - playbackRate) > 0.0001) {
+						media.playbackRate = playbackRate;
+					}
+
+					if (!media.paused && !media.ended) {
+						rafId = requestAnimationFrame(tick);
+					} else {
+						cleanup();
+						resolve();
+					}
+				};
+
+				media.addEventListener("error", onError, { once: true });
+				media.addEventListener("ended", onEnded, { once: true });
+				rafId = requestAnimationFrame(tick);
+			});
+		} finally {
+			if (rafId !== null) {
+				cancelAnimationFrame(rafId);
+			}
+			media.pause();
+			if (recorder && recorder.state !== "inactive") {
+				recorder.stop();
+			}
+			destinationNode.stream.getTracks().forEach((track) => track.stop());
+			sourceNode.disconnect();
+			destinationNode.disconnect();
+			await audioContext.close();
+			media.src = "";
+			media.load();
+		}
+
+		if (!recordedBlobPromise) {
+			// Invariant: either an early return above fires, or startAudioRecording ran and
+			// populated recordedBlobPromise before the playback Promise resolved. Reaching
+			// here means that contract was broken — fail loud instead of returning silence.
+			throw new Error("Audio recorder finished without assigning recordedBlobPromise");
+		}
+		const recordedBlob = await recordedBlobPromise;
+		if (this.cancelled) {
+			throw new Error("Export cancelled");
+		}
+		return recordedBlob;
+	}
+
+	// Demuxes the rendered speed-adjusted blob and feeds encoded chunks into the MP4 muxer.
+	private async muxRenderedAudioBlob(
+		blob: Blob,
+		muxer: VideoMuxer,
+		exportCodec: ExportAudioCodec,
+	): Promise<void> {
+		if (this.cancelled) return;
+
+		const file = new File([blob], "speed-audio.webm", { type: blob.type || "audio/webm" });
+		const wasmUrl = new URL("./wasm/web-demuxer.wasm", window.location.href).href;
+		const demuxer = new WebDemuxer({ wasmFilePath: wasmUrl });
+
+		try {
+			await demuxer.load(file);
+			await this.processTrimOnlyAudio(demuxer, muxer, [], undefined, exportCodec);
+		} finally {
+			try {
+				demuxer.destroy();
+			} catch {
+				/* ignore */
+			}
+		}
+	}
+
+	private startAudioRecording(stream: MediaStream): {
+		recorder: MediaRecorder;
+		recordedBlobPromise: Promise<Blob>;
+	} {
+		const mimeType = this.getSupportedAudioMimeType();
+		const options: MediaRecorderOptions = {
+			audioBitsPerSecond: AUDIO_BITRATE,
+			...(mimeType ? { mimeType } : {}),
+		};
+
+		const recorder = new MediaRecorder(stream, options);
+		const chunks: Blob[] = [];
+
+		const recordedBlobPromise = new Promise<Blob>((resolve, reject) => {
+			recorder.ondataavailable = (event: BlobEvent) => {
+				if (event.data && event.data.size > 0) {
+					chunks.push(event.data);
+				}
+			};
+			recorder.onerror = () => {
+				reject(new Error("MediaRecorder failed while capturing speed-adjusted audio"));
+			};
+			recorder.onstop = () => {
+				const type = mimeType || chunks[0]?.type || "audio/webm";
+				resolve(new Blob(chunks, { type }));
+			};
+		});
+
+		recorder.start();
+		return { recorder, recordedBlobPromise };
+	}
+
+	private getSupportedAudioMimeType(): string | undefined {
+		const candidates = ["audio/webm;codecs=opus", "audio/webm"];
+		for (const candidate of candidates) {
+			if (MediaRecorder.isTypeSupported(candidate)) {
+				return candidate;
+			}
+		}
+		return undefined;
+	}
+
+	private waitForLoadedMetadata(media: HTMLMediaElement): Promise<void> {
+		if (Number.isFinite(media.duration) && media.readyState >= HTMLMediaElement.HAVE_METADATA) {
+			return Promise.resolve();
+		}
+
+		return new Promise<void>((resolve, reject) => {
+			const onLoaded = () => {
+				cleanup();
+				resolve();
+			};
+			const onError = () => {
+				cleanup();
+				reject(new Error("Failed to load media metadata for speed-adjusted audio"));
+			};
+			const cleanup = () => {
+				media.removeEventListener("loadedmetadata", onLoaded);
+				media.removeEventListener("error", onError);
+			};
+
+			media.addEventListener("loadedmetadata", onLoaded);
+			media.addEventListener("error", onError, { once: true });
+		});
+	}
+
+	private seekTo(media: HTMLMediaElement, targetSec: number): Promise<void> {
+		if (Math.abs(media.currentTime - targetSec) < 0.0001) {
+			return Promise.resolve();
+		}
+
+		return new Promise<void>((resolve, reject) => {
+			const onSeeked = () => {
+				cleanup();
+				resolve();
+			};
+			const onError = () => {
+				cleanup();
+				reject(new Error("Failed to seek media for speed-adjusted audio"));
+			};
+			const cleanup = () => {
+				media.removeEventListener("seeked", onSeeked);
+				media.removeEventListener("error", onError);
+			};
+
+			media.addEventListener("seeked", onSeeked, { once: true });
+			media.addEventListener("error", onError, { once: true });
+			media.currentTime = targetSec;
+		});
+	}
+
+	private findActiveTrimRegion(
+		currentTimeMs: number,
+		trimRegions: TrimRegion[],
+	): TrimRegion | null {
+		return (
+			trimRegions.find(
+				(region) => currentTimeMs >= region.startMs && currentTimeMs < region.endMs,
+			) || null
+		);
+	}
+
+	private findActiveSpeedRegion(
+		currentTimeMs: number,
+		speedRegions: SpeedRegion[],
+	): SpeedRegion | null {
+		return (
+			speedRegions.find(
+				(region) => currentTimeMs >= region.startMs && currentTimeMs < region.endMs,
+			) || null
+		);
+	}
+
+	private cloneForEncoding(
+		src: AudioData,
+		newTimestamp: number,
+		targetChannels: number,
+	): AudioData {
+		if (targetChannels !== src.numberOfChannels) {
+			return this.downmixWithTimestamp(src, newTimestamp, targetChannels);
+		}
+
+		if (!src.format) {
+			throw new Error("AudioData format is required for cloning");
+		}
+		const isPlanar = src.format.includes("planar");
+		const numPlanes = isPlanar ? src.numberOfChannels : 1;
+
+		let totalSize = 0;
+		for (let planeIndex = 0; planeIndex < numPlanes; planeIndex++) {
+			totalSize += src.allocationSize({ planeIndex });
+		}
+
+		const buffer = new ArrayBuffer(totalSize);
+		let offset = 0;
+		for (let planeIndex = 0; planeIndex < numPlanes; planeIndex++) {
+			const planeSize = src.allocationSize({ planeIndex });
+			src.copyTo(new Uint8Array(buffer, offset, planeSize), { planeIndex });
+			offset += planeSize;
+		}
+
+		return new AudioData({
+			format: src.format,
+			sampleRate: src.sampleRate,
+			numberOfFrames: src.numberOfFrames,
+			numberOfChannels: src.numberOfChannels,
+			timestamp: newTimestamp,
+			data: buffer,
+		});
+	}
+
+	private downmixWithTimestamp(
+		src: AudioData,
+		newTimestamp: number,
+		targetChannels: number,
+	): AudioData {
+		const sourceChannels = src.numberOfChannels;
+		const frameCount = src.numberOfFrames;
+		if (targetChannels < 1 || targetChannels > 2) {
+			throw new Error(`Unsupported target channel count: ${targetChannels}`);
+		}
+
+		const sourcePlanes = Array.from({ length: sourceChannels }, () => new Float32Array(frameCount));
+		for (let channel = 0; channel < sourceChannels; channel++) {
+			src.copyTo(sourcePlanes[channel], {
+				format: "f32-planar",
+				planeIndex: channel,
+			});
+		}
+
+		const output = downmixPlanarChannelsForExport(sourcePlanes, targetChannels);
+
+		return new AudioData({
+			format: "f32-planar",
+			sampleRate: src.sampleRate,
+			numberOfFrames: frameCount,
+			numberOfChannels: targetChannels,
+			timestamp: newTimestamp,
+			data: output.buffer instanceof ArrayBuffer ? output.buffer : output.slice().buffer,
+		});
+	}
+
+	private isInTrimRegion(timestampMs: number, trims: TrimRegion[]): boolean {
+		return trims.some((trim) => timestampMs >= trim.startMs && timestampMs < trim.endMs);
+	}
+
+	private computeTrimOffset(timestampMs: number, trims: TrimRegion[]): number {
+		let offset = 0;
+		for (const trim of trims) {
+			if (trim.endMs <= timestampMs) {
+				offset += trim.endMs - trim.startMs;
+			}
+		}
+		return offset;
+	}
+
+	cancel(): void {
+		this.cancelled = true;
+	}
+}
diff --git a/src/lib/exporter/frameRenderer.ts b/src/lib/exporter/frameRenderer.ts
new file mode 100644
index 0000000..8582158
--- /dev/null
+++ b/src/lib/exporter/frameRenderer.ts
@@ -0,0 +1,1167 @@
+import {
+	Application,
+	BlurFilter,
+	Container,
+	Graphics,
+	Sprite,
+	Texture,
+	type TextureSourceLike,
+} from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
+import type {
+	AnnotationRegion,
+	CropRegion,
+	Rotation3D,
+	SpeedRegion,
+	WebcamLayoutPreset,
+	WebcamSizePreset,
+	ZoomRegion,
+} from "@/components/video-editor/types";
+import {
+	DEFAULT_ROTATION_3D,
+	getZoomScale,
+	isRotation3DIdentity,
+	lerpRotation3D,
+} from "@/components/video-editor/types";
+import {
+	AUTO_FOLLOW_RAMP_DISTANCE,
+	AUTO_FOLLOW_SMOOTHING_FACTOR,
+	AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+	DEFAULT_FOCUS,
+	ZOOM_SCALE_DEADZONE,
+	ZOOM_TRANSLATION_DEADZONE_PX,
+} from "@/components/video-editor/videoPlayback/constants";
+import {
+	adaptiveSmoothFactor,
+	smoothCursorFocus,
+} from "@/components/video-editor/videoPlayback/cursorFollowUtils";
+import { clampFocusToScale } from "@/components/video-editor/videoPlayback/focusUtils";
+import { findDominantRegion } from "@/components/video-editor/videoPlayback/zoomRegionUtils";
+import {
+	applyZoomTransform,
+	computeFocusFromTransform,
+	computeZoomTransform,
+	createMotionBlurState,
+	type MotionBlurState,
+} from "@/components/video-editor/videoPlayback/zoomTransform";
+import {
+	computeCompositeLayout,
+	getWebcamLayoutPresetDefinition,
+	type Size,
+	type StyledRenderRect,
+} from "@/lib/compositeLayout";
+import {
+	createNativeCursorMotionBlurState,
+	createNativeCursorSmoothingState,
+	getNativeCursorClickBounceProgress,
+	getNativeCursorClickBounceScale,
+	getNativeCursorMotionBlurPx,
+	projectNativeCursorToLocal,
+	resetNativeCursorMotionBlurState,
+	resetNativeCursorSmoothingState,
+	resolveInterpolatedNativeCursorFrame,
+	resolveNativeCursorRenderAsset,
+	smoothNativeCursorSample,
+} from "@/lib/cursor/nativeCursor";
+import { BackgroundLoadError, classifyWallpaper, resolveImageWallpaperUrl } from "@/lib/wallpaper";
+import { drawCanvasClipPath } from "@/lib/webcamMaskShapes";
+import type { CursorRecordingData } from "@/native/contracts";
+import { renderAnnotations } from "./annotationRenderer";
+import {
+	getLinearGradientPoints,
+	getRadialGradientShape,
+	parseCssGradient,
+	resolveLinearGradientAngle,
+} from "./gradientParser";
+import { createThreeDPass, type ThreeDPass } from "./threeDPass";
+
+interface FrameRenderConfig {
+	width: number;
+	height: number;
+	wallpaper: string;
+	zoomRegions: ZoomRegion[];
+	showShadow: boolean;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount?: number;
+	borderRadius?: number;
+	padding?: number;
+	cropRegion: CropRegion;
+	cursorRecordingData?: CursorRecordingData | null;
+	cursorScale?: number;
+	cursorSmoothing?: number;
+	cursorMotionBlur?: number;
+	cursorClickBounce?: number;
+	cursorClipToBounds?: boolean;
+	videoWidth: number;
+	videoHeight: number;
+	webcamSize?: Size | null;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+	webcamSizePreset?: WebcamSizePreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	annotationRegions?: AnnotationRegion[];
+	speedRegions?: SpeedRegion[];
+	previewWidth?: number;
+	previewHeight?: number;
+	cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+	cursorClickTimestamps?: number[];
+	platform: string;
+}
+
+interface AnimationState {
+	scale: number;
+	focusX: number;
+	focusY: number;
+	progress: number;
+	x: number;
+	y: number;
+	appliedScale: number;
+}
+
+interface LayoutCache {
+	stageSize: { width: number; height: number };
+	videoSize: { width: number; height: number };
+	baseScale: number;
+	baseOffset: { x: number; y: number };
+	maskRect: { x: number; y: number; width: number; height: number };
+	maskBorderRadius: number;
+	webcamRect: StyledRenderRect | null;
+}
+
+// Renders video frames with all effects (background, zoom, crop, blur, shadow) to an offscreen canvas for export.
+
+export class FrameRenderer {
+	private app: Application | null = null;
+	private cameraContainer: Container | null = null;
+	private videoContainer: Container | null = null;
+	private videoSprite: Sprite | null = null;
+	private backgroundSprite: HTMLCanvasElement | null = null;
+	private maskGraphics: Graphics | null = null;
+	private blurFilter: BlurFilter | null = null;
+	private motionBlurFilter: MotionBlurFilter | null = null;
+	private shadowCanvas: HTMLCanvasElement | null = null;
+	private shadowCtx: CanvasRenderingContext2D | null = null;
+	private compositeCanvas: HTMLCanvasElement | null = null;
+	private compositeCtx: CanvasRenderingContext2D | null = null;
+	private foregroundCanvas: HTMLCanvasElement | null = null;
+	private foregroundCtx: CanvasRenderingContext2D | null = null;
+	private rasterCanvas: HTMLCanvasElement | null = null;
+	private rasterCtx: CanvasRenderingContext2D | null = null;
+	private threeDPass: ThreeDPass | null = null;
+	private currentRotation3D: Rotation3D = { ...DEFAULT_ROTATION_3D };
+	private cursorImageCache = new Map<string, HTMLImageElement>();
+	private warnedKeys = new Set<string>();
+	private config: FrameRenderConfig;
+	private animationState: AnimationState;
+	private layoutCache: LayoutCache | null = null;
+	private currentVideoTime = 0;
+	private motionBlurState: MotionBlurState = createMotionBlurState();
+	private nativeCursorSmoothingState = createNativeCursorSmoothingState();
+	private nativeCursorMotionBlurState = createNativeCursorMotionBlurState();
+	private smoothedAutoFocus: { cx: number; cy: number } | null = null;
+	private prevAnimationTimeMs: number | null = null;
+	private prevTargetProgress = 0;
+	private isLinux = false;
+
+	constructor(config: FrameRenderConfig) {
+		this.config = config;
+		this.isLinux = config.platform === "linux";
+		this.animationState = {
+			scale: 1,
+			focusX: DEFAULT_FOCUS.cx,
+			focusY: DEFAULT_FOCUS.cy,
+			progress: 0,
+			x: 0,
+			y: 0,
+			appliedScale: 1,
+		};
+	}
+
+	async initialize(): Promise<void> {
+		// Create canvas for rendering
+		const canvas = document.createElement("canvas");
+		canvas.width = this.config.width;
+		canvas.height = this.config.height;
+
+		// Try to set colorSpace if supported (may not be available on all platforms)
+		try {
+			if (canvas && "colorSpace" in canvas) {
+				canvas.colorSpace = "srgb";
+			}
+		} catch (error) {
+			// Silently ignore colorSpace errors on platforms that don't support it
+			console.warn("[FrameRenderer] colorSpace not supported on this platform:", error);
+		}
+
+		// Initialize PixiJS with optimized settings for export performance
+		this.app = new Application();
+		await this.app.init({
+			canvas,
+			width: this.config.width,
+			height: this.config.height,
+			backgroundAlpha: 0,
+			antialias: true,
+			resolution: 1,
+			autoDensity: true,
+		});
+
+		// Setup containers
+		this.cameraContainer = new Container();
+		this.videoContainer = new Container();
+		this.app.stage.addChild(this.cameraContainer);
+		this.cameraContainer.addChild(this.videoContainer);
+
+		// Setup background (render separately, not in PixiJS)
+		await this.setupBackground();
+
+		// Setup blur filter for video container
+		this.blurFilter = new BlurFilter();
+		this.blurFilter.quality = 5;
+		this.blurFilter.resolution = this.app.renderer.resolution;
+		this.blurFilter.blur = 0;
+		this.motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
+		this.videoContainer.filters = [this.blurFilter, this.motionBlurFilter];
+
+		// Setup composite canvas for final output with shadows
+		this.compositeCanvas = document.createElement("canvas");
+		this.compositeCanvas.width = this.config.width;
+		this.compositeCanvas.height = this.config.height;
+
+		// On Linux, getImageData() is called frequently causing frequent CPU readback
+		this.compositeCtx = this.compositeCanvas.getContext("2d", {
+			willReadFrequently: this.isLinux,
+		});
+
+		if (!this.compositeCtx) {
+			throw new Error("Failed to get 2D context for composite canvas");
+		}
+
+		this.rasterCanvas = document.createElement("canvas");
+		this.rasterCanvas.width = this.config.width;
+		this.rasterCanvas.height = this.config.height;
+		this.rasterCtx = this.rasterCanvas.getContext("2d");
+		if (!this.rasterCtx) {
+			throw new Error("Failed to get 2D context for raster canvas");
+		}
+
+		// Foreground canvas: holds recording + shadow + webcam + cursor + annotations,
+		// transparent background. The 3D rotation pass operates only on this layer so
+		// the wallpaper stays flat behind the rotated content (matching preview).
+		this.foregroundCanvas = document.createElement("canvas");
+		this.foregroundCanvas.width = this.config.width;
+		this.foregroundCanvas.height = this.config.height;
+		this.foregroundCtx = this.foregroundCanvas.getContext("2d", {
+			willReadFrequently: this.isLinux,
+		});
+		if (!this.foregroundCtx) {
+			throw new Error("Failed to get 2D context for foreground canvas");
+		}
+
+		// Setup shadow canvas if needed
+		if (this.config.showShadow) {
+			this.shadowCanvas = document.createElement("canvas");
+			this.shadowCanvas.width = this.config.width;
+			this.shadowCanvas.height = this.config.height;
+			this.shadowCtx = this.shadowCanvas.getContext("2d", {
+				willReadFrequently: false,
+			});
+
+			if (!this.shadowCtx) {
+				throw new Error("Failed to get 2D context for shadow canvas");
+			}
+		}
+
+		// Setup mask
+		this.maskGraphics = new Graphics();
+		this.videoContainer.addChild(this.maskGraphics);
+		this.videoContainer.mask = this.maskGraphics;
+
+		try {
+			this.threeDPass = createThreeDPass(this.config.width, this.config.height);
+		} catch (error) {
+			console.warn("[FrameRenderer] 3D pass unavailable, rotation fields will be ignored:", error);
+			this.threeDPass = null;
+		}
+	}
+
+	private async setupBackground(): Promise<void> {
+		const wallpaper = this.config.wallpaper;
+
+		const bgCanvas = document.createElement("canvas");
+		bgCanvas.width = this.config.width;
+		bgCanvas.height = this.config.height;
+		const bgCtx = bgCanvas.getContext("2d")!;
+
+		const classified = classifyWallpaper(wallpaper);
+
+		if (classified.kind === "color") {
+			bgCtx.fillStyle = classified.value;
+			bgCtx.fillRect(0, 0, this.config.width, this.config.height);
+		} else if (classified.kind === "gradient") {
+			const parsedGradient = parseCssGradient(classified.value);
+			if (!parsedGradient) {
+				throw new BackgroundLoadError(classified.value);
+			}
+			const gradient =
+				parsedGradient.type === "linear"
+					? (() => {
+							const points = getLinearGradientPoints(
+								resolveLinearGradientAngle(parsedGradient.descriptor),
+								this.config.width,
+								this.config.height,
+							);
+							return bgCtx.createLinearGradient(points.x0, points.y0, points.x1, points.y1);
+						})()
+					: (() => {
+							const shape = getRadialGradientShape(
+								parsedGradient.descriptor,
+								this.config.width,
+								this.config.height,
+							);
+							return bgCtx.createRadialGradient(
+								shape.cx,
+								shape.cy,
+								0,
+								shape.cx,
+								shape.cy,
+								shape.radius,
+							);
+						})();
+
+			parsedGradient.stops.forEach((stop) => {
+				gradient.addColorStop(stop.offset, stop.color);
+			});
+
+			bgCtx.fillStyle = gradient;
+			bgCtx.fillRect(0, 0, this.config.width, this.config.height);
+		} else {
+			const imageUrl = resolveImageWallpaperUrl(classified.path);
+			const img = new Image();
+			if (imageUrl.startsWith("http") && !imageUrl.startsWith(window.location.origin)) {
+				img.crossOrigin = "anonymous";
+			}
+
+			try {
+				await new Promise<void>((resolve, reject) => {
+					img.onload = () => resolve();
+					img.onerror = (err) => reject(err);
+					img.src = imageUrl;
+				});
+			} catch (err) {
+				throw new BackgroundLoadError(imageUrl, err);
+			}
+
+			const imgAspect = img.width / img.height;
+			const canvasAspect = this.config.width / this.config.height;
+
+			let drawWidth: number;
+			let drawHeight: number;
+			let drawX: number;
+			let drawY: number;
+
+			if (imgAspect > canvasAspect) {
+				drawHeight = this.config.height;
+				drawWidth = drawHeight * imgAspect;
+				drawX = (this.config.width - drawWidth) / 2;
+				drawY = 0;
+			} else {
+				drawWidth = this.config.width;
+				drawHeight = drawWidth / imgAspect;
+				drawX = 0;
+				drawY = (this.config.height - drawHeight) / 2;
+			}
+
+			bgCtx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+		}
+
+		this.backgroundSprite = bgCanvas;
+	}
+
+	async renderFrame(
+		videoFrame: VideoFrame,
+		timestamp: number,
+		webcamFrame?: VideoFrame | null,
+	): Promise<void> {
+		if (!this.app || !this.videoContainer || !this.cameraContainer) {
+			throw new Error("Renderer not initialized");
+		}
+
+		this.currentVideoTime = timestamp / 1000000;
+
+		// Create or update video sprite from VideoFrame
+		if (!this.videoSprite) {
+			const texture = Texture.from(videoFrame as unknown as TextureSourceLike);
+			this.videoSprite = new Sprite(texture);
+			this.videoContainer.addChild(this.videoSprite);
+		} else {
+			// Destroy old texture to avoid memory leaks, then create new one
+			const oldTexture = this.videoSprite.texture;
+			const newTexture = Texture.from(videoFrame as unknown as TextureSourceLike);
+			this.videoSprite.texture = newTexture;
+			oldTexture.destroy(true);
+		}
+
+		// Apply layout
+		this.updateLayout(webcamFrame);
+
+		const timeMs = this.currentVideoTime * 1000;
+		const TICKS_PER_FRAME = 1;
+
+		let maxMotionIntensity = 0;
+		for (let i = 0; i < TICKS_PER_FRAME; i++) {
+			const motionIntensity = this.updateAnimationState(timeMs);
+			maxMotionIntensity = Math.max(maxMotionIntensity, motionIntensity);
+		}
+
+		const layoutCache = this.layoutCache;
+		if (!layoutCache) {
+			throw new Error("Layout cache not initialized");
+		}
+
+		// Apply transform once with maximum motion intensity from all ticks
+		applyZoomTransform({
+			cameraContainer: this.cameraContainer,
+			blurFilter: this.blurFilter,
+			motionBlurFilter: this.motionBlurFilter,
+			stageSize: layoutCache.stageSize,
+			baseMask: layoutCache.maskRect,
+			zoomScale: this.animationState.scale,
+			zoomProgress: this.animationState.progress,
+			focusX: this.animationState.focusX,
+			focusY: this.animationState.focusY,
+			motionIntensity: maxMotionIntensity,
+			isPlaying: true,
+			motionBlurAmount: this.config.motionBlurAmount ?? 0,
+			motionBlurState: this.motionBlurState,
+			frameTimeMs: timeMs,
+		});
+
+		// Render the PixiJS stage to its canvas (video only, transparent background)
+		this.app.renderer.render(this.app.stage);
+
+		// Skip baking the shadow when the WebGL rotation pass will run — it'd alias to
+		// a hard edge through bilinear sampling. We re-apply shadow fresh after rotation.
+		const willRotate = !isRotation3DIdentity(this.currentRotation3D);
+		this.compositeWithShadows(webcamFrame, !willRotate);
+
+		await this.drawNativeCursor(timeMs);
+
+		// Render annotations on top of foreground (so they rotate with recording).
+		if (
+			this.config.annotationRegions &&
+			this.config.annotationRegions.length > 0 &&
+			this.foregroundCtx
+		) {
+			const previewWidth = this.config.previewWidth ?? this.config.width;
+			const previewHeight = this.config.previewHeight ?? this.config.height;
+			const scaleX = this.config.width / previewWidth;
+			const scaleY = this.config.height / previewHeight;
+			const scaleFactor = (scaleX + scaleY) / 2;
+
+			await renderAnnotations(
+				this.foregroundCtx,
+				this.config.annotationRegions,
+				this.config.width,
+				this.config.height,
+				timeMs,
+				scaleFactor,
+			);
+		}
+
+		// Apply 3D rotation to foreground only. Wallpaper (on compositeCanvas) is untouched.
+		if (willRotate && this.threeDPass && this.foregroundCanvas && this.foregroundCtx) {
+			const passCanvas = this.threeDPass.apply(this.foregroundCanvas, this.currentRotation3D);
+			const w = this.foregroundCanvas.width;
+			const h = this.foregroundCanvas.height;
+			this.foregroundCtx.clearRect(0, 0, w, h);
+			if (this.isLinux) {
+				// drawImage(webglCanvas) is unreliable on Linux/Wayland — use readPixels.
+				const pixels = this.threeDPass.readPixels();
+				const imageData = this.foregroundCtx.createImageData(w, h);
+				imageData.data.set(pixels);
+				this.foregroundCtx.putImageData(imageData, 0, 0);
+			} else {
+				this.foregroundCtx.drawImage(passCanvas, 0, 0);
+			}
+		}
+
+		// Apply shadow fresh on the rotated silhouette (flat path already baked it
+		// in compositeWithShadows, so guard on willRotate to avoid doubling).
+		// Same 3-layer filter chain as `main` — keeps the soft Gaussian intact.
+		if (
+			willRotate &&
+			this.config.showShadow &&
+			this.config.shadowIntensity > 0 &&
+			this.shadowCanvas &&
+			this.shadowCtx &&
+			this.foregroundCanvas
+		) {
+			const shadowCtx = this.shadowCtx;
+			const w = this.foregroundCanvas.width;
+			const h = this.foregroundCanvas.height;
+			shadowCtx.clearRect(0, 0, w, h);
+			shadowCtx.save();
+			const intensity = this.config.shadowIntensity;
+			const baseBlur1 = 48 * intensity;
+			const baseBlur2 = 16 * intensity;
+			const baseBlur3 = 8 * intensity;
+			const baseAlpha1 = 0.7 * intensity;
+			const baseAlpha2 = 0.5 * intensity;
+			const baseAlpha3 = 0.3 * intensity;
+			const baseOffset = 12 * intensity;
+			shadowCtx.filter = `drop-shadow(0 ${baseOffset}px ${baseBlur1}px rgba(0,0,0,${baseAlpha1})) drop-shadow(0 ${baseOffset / 3}px ${baseBlur2}px rgba(0,0,0,${baseAlpha2})) drop-shadow(0 ${baseOffset / 6}px ${baseBlur3}px rgba(0,0,0,${baseAlpha3}))`;
+			shadowCtx.drawImage(this.foregroundCanvas, 0, 0, w, h);
+			shadowCtx.restore();
+			if (this.compositeCtx) {
+				this.compositeCtx.drawImage(this.shadowCanvas, 0, 0);
+			}
+		} else if (this.compositeCtx && this.foregroundCanvas) {
+			// Flat path or 3D-without-shadow: stamp foreground directly.
+			this.compositeCtx.drawImage(this.foregroundCanvas, 0, 0);
+		}
+	}
+
+	// The video's actual on-screen boundary, accounting for the zoom camera
+	// transform. The PIXI mask lives inside cameraContainer, so during zoom the
+	// visible video extends beyond the static maskRect — a static clip would crop
+	// it. Mirrors the preview, which clips via the same camera-scaled bounds.
+	private cameraAwareMaskRect() {
+		if (!this.layoutCache) return null;
+		const { x: maskX, y: maskY, width: maskW, height: maskH } = this.layoutCache.maskRect;
+		const camS = this.animationState.appliedScale;
+		const camX = this.animationState.x;
+		const camY = this.animationState.y;
+		// No stage clamping: canvas naturally clips to its bounds, matching CSS inset() behavior.
+		// Clamping x/y would shift rounded corners to the stage edge rather than the true mask
+		// boundary, causing preview/export mismatch when zoom/pan pushes the mask off-stage.
+		return {
+			x: camX + camS * maskX,
+			y: camY + camS * maskY,
+			width: camS * maskW,
+			height: camS * maskH,
+			br: this.layoutCache.maskBorderRadius * camS,
+		};
+	}
+
+	private async drawNativeCursor(timeMs: number) {
+		if (!this.foregroundCtx || !this.layoutCache) {
+			return;
+		}
+
+		if ((this.config.cursorScale ?? 1) <= 0) {
+			resetNativeCursorSmoothingState(this.nativeCursorSmoothingState);
+			resetNativeCursorMotionBlurState(this.nativeCursorMotionBlurState);
+			return;
+		}
+
+		const activeNativeCursor = resolveInterpolatedNativeCursorFrame(
+			this.config.cursorRecordingData,
+			timeMs,
+		);
+		if (!activeNativeCursor) {
+			resetNativeCursorSmoothingState(this.nativeCursorSmoothingState);
+			resetNativeCursorMotionBlurState(this.nativeCursorMotionBlurState);
+			return;
+		}
+		const displaySample = smoothNativeCursorSample({
+			sample: activeNativeCursor.sample,
+			smoothing: this.config.cursorSmoothing ?? 0,
+			state: this.nativeCursorSmoothingState,
+			timeMs,
+		});
+
+		const projectedPoint = projectNativeCursorToLocal({
+			cropRegion: this.config.cropRegion,
+			maskRect: this.layoutCache.maskRect,
+			sample: displaySample,
+		});
+		if (!projectedPoint) {
+			resetNativeCursorSmoothingState(this.nativeCursorSmoothingState);
+			resetNativeCursorMotionBlurState(this.nativeCursorMotionBlurState);
+			return;
+		}
+
+		const renderAsset = resolveNativeCursorRenderAsset(activeNativeCursor.asset, 1, displaySample);
+		let image: HTMLImageElement;
+		try {
+			image = await this.getCursorImage(renderAsset);
+		} catch (error) {
+			this.warnOnce("native-cursor-image-load", "Failed to load native cursor asset", error);
+			return;
+		}
+		const scale =
+			Math.max(0, this.config.cursorScale ?? 1) *
+			getNativeCursorClickBounceScale(
+				this.config.cursorClickBounce ?? 0,
+				getNativeCursorClickBounceProgress(this.config.cursorRecordingData, timeMs),
+			);
+		const appliedScale = this.animationState.appliedScale;
+		// Normalize cursor size so it appears at the same fraction of the video width
+		// as in the preview — both paths now use maskRect.width / croppedVideoWidth.
+		const sizeNorm =
+			this.layoutCache.videoSize.width > 0
+				? this.layoutCache.maskRect.width / this.layoutCache.videoSize.width
+				: 1;
+		const canvasX = projectedPoint.x * appliedScale + this.animationState.x;
+		const canvasY = projectedPoint.y * appliedScale + this.animationState.y;
+		const blurPx = getNativeCursorMotionBlurPx({
+			motionBlur: this.config.cursorMotionBlur ?? 0,
+			point: { x: canvasX, y: canvasY },
+			state: this.nativeCursorMotionBlurState,
+			timeMs,
+		});
+		// Clip only when explicitly enabled; by default the cursor may overflow the canvas.
+		const cursorClip = this.config.cursorClipToBounds === true ? this.cameraAwareMaskRect() : null;
+		this.foregroundCtx.save();
+		this.foregroundCtx.beginPath();
+		if (cursorClip) {
+			this.foregroundCtx.roundRect(
+				cursorClip.x,
+				cursorClip.y,
+				cursorClip.width,
+				cursorClip.height,
+				cursorClip.br,
+			);
+			this.foregroundCtx.clip();
+		}
+		const previousFilter = this.foregroundCtx.filter;
+		if (blurPx > 0) {
+			this.foregroundCtx.filter = `blur(${blurPx.toFixed(2)}px)`;
+		}
+		this.foregroundCtx.drawImage(
+			image,
+			canvasX - renderAsset.hotspotX * scale * appliedScale * sizeNorm,
+			canvasY - renderAsset.hotspotY * scale * appliedScale * sizeNorm,
+			renderAsset.width * scale * appliedScale * sizeNorm,
+			renderAsset.height * scale * appliedScale * sizeNorm,
+		);
+		this.foregroundCtx.filter = previousFilter;
+		this.foregroundCtx.restore();
+	}
+
+	private async getCursorImage(asset: { id: string; imageDataUrl: string }) {
+		const cachedImage = this.cursorImageCache.get(asset.id);
+		if (cachedImage) {
+			return cachedImage;
+		}
+
+		const image = new Image();
+		await new Promise<void>((resolve, reject) => {
+			image.onload = () => resolve();
+			image.onerror = () => reject(new Error(`Failed to load cursor asset ${asset.id}`));
+			image.src = asset.imageDataUrl;
+		});
+
+		this.cursorImageCache.set(asset.id, image);
+		return image;
+	}
+
+	private warnOnce(key: string, message: string, error: unknown) {
+		if (this.warnedKeys.has(key)) {
+			return;
+		}
+		this.warnedKeys.add(key);
+		console.warn(`[FrameRenderer] ${message}:`, error);
+	}
+
+	private updateLayout(webcamFrame?: VideoFrame | null): void {
+		if (!this.app || !this.videoSprite || !this.maskGraphics || !this.videoContainer) return;
+
+		const { width, height } = this.config;
+		const { cropRegion, borderRadius = 0, padding = 0 } = this.config;
+		const videoWidth = this.config.videoWidth;
+		const videoHeight = this.config.videoHeight;
+
+		// Calculate cropped video dimensions
+		const cropStartX = cropRegion.x;
+		const cropStartY = cropRegion.y;
+		const cropEndX = cropRegion.x + cropRegion.width;
+		const cropEndY = cropRegion.y + cropRegion.height;
+
+		const croppedVideoWidth = videoWidth * (cropEndX - cropStartX);
+		const croppedVideoHeight = videoHeight * (cropEndY - cropStartY);
+
+		// Calculate scale to fit in viewport
+		// Padding is a percentage (0-100), where 50% ~ 0.8 scale
+		// Vertical stack ignores padding — it's full-bleed
+		const effectivePadding = this.config.webcamLayoutPreset === "vertical-stack" ? 0 : padding;
+		const paddingScale = 1.0 - (effectivePadding / 100) * 0.4;
+		const viewportWidth = width * paddingScale;
+		const viewportHeight = height * paddingScale;
+		const compositeLayout = computeCompositeLayout({
+			canvasSize: { width, height },
+			maxContentSize: { width: viewportWidth, height: viewportHeight },
+			screenSize: { width: croppedVideoWidth, height: croppedVideoHeight },
+			webcamSize: webcamFrame ? this.config.webcamSize : null,
+			layoutPreset: this.config.webcamLayoutPreset,
+			webcamSizePreset: this.config.webcamSizePreset,
+			webcamPosition: this.config.webcamPosition,
+			webcamMaskShape: this.config.webcamMaskShape,
+		});
+		if (!compositeLayout) return;
+
+		const screenRect = compositeLayout.screenRect;
+
+		// Cover mode: scale to fill the rect (may crop), otherwise fit-to-width
+		let scale: number;
+		if (compositeLayout.screenCover) {
+			scale = Math.max(
+				screenRect.width / croppedVideoWidth,
+				screenRect.height / croppedVideoHeight,
+			);
+		} else {
+			scale = screenRect.width / croppedVideoWidth;
+		}
+
+		// Position video sprite
+		this.videoSprite.width = videoWidth * scale;
+		this.videoSprite.height = videoHeight * scale;
+
+		// Center the cropped region within the screenRect
+		const croppedDisplayWidth = croppedVideoWidth * scale;
+		const croppedDisplayHeight = croppedVideoHeight * scale;
+		const coverOffsetX = (screenRect.width - croppedDisplayWidth) / 2;
+		const coverOffsetY = (screenRect.height - croppedDisplayHeight) / 2;
+
+		const cropPixelX = cropStartX * videoWidth * scale;
+		const cropPixelY = cropStartY * videoHeight * scale;
+		this.videoSprite.x = -cropPixelX + coverOffsetX;
+		this.videoSprite.y = -cropPixelY + coverOffsetY;
+
+		// Position video container
+		this.videoContainer.x = screenRect.x;
+		this.videoContainer.y = screenRect.y;
+
+		// scale border radius by export/preview canvas ratio
+		const previewWidth = this.config.previewWidth ?? this.config.width;
+		const previewHeight = this.config.previewHeight ?? this.config.height;
+		const canvasScaleFactor = Math.min(width / previewWidth, height / previewHeight);
+		const scaledBorderRadius =
+			compositeLayout.screenBorderRadius != null
+				? compositeLayout.screenBorderRadius
+				: compositeLayout.screenCover
+					? 0
+					: borderRadius * canvasScaleFactor;
+
+		this.maskGraphics.clear();
+		this.maskGraphics.roundRect(0, 0, screenRect.width, screenRect.height, scaledBorderRadius);
+		this.maskGraphics.fill({ color: 0xffffff });
+
+		// Cache layout info. baseOffset is the stage position of the FULL
+		// (uncropped) video sprite's top-left — matches preview semantics so
+		// downstream consumers (e.g. cursor highlight) can map normalized
+		// recording-space coordinates to stage coordinates uniformly:
+		//   stagePos = baseOffset + (cx, cy) * (videoWidth, videoHeight) * baseScale
+		this.layoutCache = {
+			stageSize: { width, height },
+			videoSize: { width: croppedVideoWidth, height: croppedVideoHeight },
+			baseScale: scale,
+			baseOffset: {
+				x: compositeLayout.screenRect.x + coverOffsetX - cropPixelX,
+				y: compositeLayout.screenRect.y + coverOffsetY - cropPixelY,
+			},
+			maskRect: compositeLayout.screenRect,
+			maskBorderRadius: scaledBorderRadius,
+			webcamRect: compositeLayout.webcamRect,
+		};
+	}
+
+	private updateAnimationState(timeMs: number): number {
+		if (!this.cameraContainer || !this.layoutCache) return 0;
+
+		const { region, strength, blendedScale, rotation3D, transition } = findDominantRegion(
+			this.config.zoomRegions,
+			timeMs,
+			{ connectZooms: true, cursorTelemetry: this.config.cursorTelemetry },
+		);
+
+		const defaultFocus = DEFAULT_FOCUS;
+		let targetScaleFactor = 1;
+		let targetFocus = { ...defaultFocus };
+		let targetProgress = 0;
+
+		this.currentRotation3D =
+			region && strength > 0
+				? lerpRotation3D(DEFAULT_ROTATION_3D, rotation3D, strength)
+				: { ...DEFAULT_ROTATION_3D };
+
+		if (region && strength > 0) {
+			const zoomScale = blendedScale ?? getZoomScale(region);
+			const regionFocus = clampFocusToScale(region.focus, zoomScale);
+
+			targetScaleFactor = zoomScale;
+			targetFocus = regionFocus;
+			targetProgress = strength;
+
+			// Apply adaptive smoothing for auto-follow mode
+			if (region.focusMode === "auto" && !transition) {
+				const raw = targetFocus;
+				const dtMs = this.prevAnimationTimeMs != null ? timeMs - this.prevAnimationTimeMs : 0;
+				const framesElapsed = dtMs > 0 ? dtMs / (1000 / 60) : 1;
+				const isZoomingIn = targetProgress < 0.999 && targetProgress >= this.prevTargetProgress;
+				if (targetProgress >= 0.999) {
+					// Full zoom: adaptive smoothing — moves faster when far, decelerates when close
+					const prev = this.smoothedAutoFocus ?? raw;
+					const baseFactor = adaptiveSmoothFactor(
+						raw,
+						prev,
+						AUTO_FOLLOW_SMOOTHING_FACTOR,
+						AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+						AUTO_FOLLOW_RAMP_DISTANCE,
+					);
+					const factor = 1 - Math.pow(1 - baseFactor, Math.max(1, framesElapsed));
+					const smoothed = smoothCursorFocus(raw, prev, factor);
+					this.smoothedAutoFocus = smoothed;
+					targetFocus = smoothed;
+				} else if (isZoomingIn) {
+					// Zoom-in: track cursor directly so zoom always aims at current cursor
+					// position; keep ref in sync to avoid snap when full-zoom begins
+					this.smoothedAutoFocus = raw;
+				} else {
+					// Zoom-out: keep smoothing for continuity — avoids snap at zoom-out start
+					const prev = this.smoothedAutoFocus ?? raw;
+					const baseFactor = adaptiveSmoothFactor(
+						raw,
+						prev,
+						AUTO_FOLLOW_SMOOTHING_FACTOR,
+						AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+						AUTO_FOLLOW_RAMP_DISTANCE,
+					);
+					const factor = 1 - Math.pow(1 - baseFactor, Math.max(1, framesElapsed));
+					const smoothed = smoothCursorFocus(raw, prev, factor);
+					this.smoothedAutoFocus = smoothed;
+					targetFocus = smoothed;
+				}
+			} else if (region.focusMode !== "auto") {
+				this.smoothedAutoFocus = null;
+			}
+			this.prevTargetProgress = targetProgress;
+
+			if (transition) {
+				const startTransform = computeZoomTransform({
+					stageSize: this.layoutCache.stageSize,
+					baseMask: this.layoutCache.maskRect,
+					zoomScale: transition.startScale,
+					zoomProgress: 1,
+					focusX: transition.startFocus.cx,
+					focusY: transition.startFocus.cy,
+				});
+				const endTransform = computeZoomTransform({
+					stageSize: this.layoutCache.stageSize,
+					baseMask: this.layoutCache.maskRect,
+					zoomScale: transition.endScale,
+					zoomProgress: 1,
+					focusX: transition.endFocus.cx,
+					focusY: transition.endFocus.cy,
+				});
+
+				const interpolatedTransform = {
+					scale:
+						startTransform.scale +
+						(endTransform.scale - startTransform.scale) * transition.progress,
+					x: startTransform.x + (endTransform.x - startTransform.x) * transition.progress,
+					y: startTransform.y + (endTransform.y - startTransform.y) * transition.progress,
+				};
+
+				targetScaleFactor = interpolatedTransform.scale;
+				targetFocus = computeFocusFromTransform({
+					stageSize: this.layoutCache.stageSize,
+					baseMask: this.layoutCache.maskRect,
+					zoomScale: interpolatedTransform.scale,
+					x: interpolatedTransform.x,
+					y: interpolatedTransform.y,
+				});
+				targetProgress = 1;
+			}
+		}
+
+		const state = this.animationState;
+
+		const prevScale = state.appliedScale;
+		const prevX = state.x;
+		const prevY = state.y;
+
+		state.scale = targetScaleFactor;
+		state.focusX = targetFocus.cx;
+		state.focusY = targetFocus.cy;
+		state.progress = targetProgress;
+
+		const projectedTransform = computeZoomTransform({
+			stageSize: this.layoutCache.stageSize,
+			baseMask: this.layoutCache.maskRect,
+			zoomScale: state.scale,
+			zoomProgress: state.progress,
+			focusX: state.focusX,
+			focusY: state.focusY,
+		});
+
+		const appliedScale =
+			Math.abs(projectedTransform.scale - prevScale) < ZOOM_SCALE_DEADZONE
+				? projectedTransform.scale
+				: projectedTransform.scale;
+		const appliedX =
+			Math.abs(projectedTransform.x - prevX) < ZOOM_TRANSLATION_DEADZONE_PX
+				? projectedTransform.x
+				: projectedTransform.x;
+		const appliedY =
+			Math.abs(projectedTransform.y - prevY) < ZOOM_TRANSLATION_DEADZONE_PX
+				? projectedTransform.y
+				: projectedTransform.y;
+
+		state.x = appliedX;
+		state.y = appliedY;
+		state.appliedScale = appliedScale;
+
+		this.prevAnimationTimeMs = timeMs;
+
+		return Math.max(
+			Math.abs(appliedScale - prevScale),
+			Math.abs(appliedX - prevX) / Math.max(1, this.layoutCache.stageSize.width),
+			Math.abs(appliedY - prevY) / Math.max(1, this.layoutCache.stageSize.height),
+		);
+	}
+
+	// On Linux/Wayland the implicit GPU→2D texture-sharing path
+	// used by drawImage(webglCanvas) can fail silently (EGL/Ozone),
+	// producing green/empty frames. Explicit gl.readPixels always
+	// copies from GPU to CPU memory, bypassing that path.
+	private readbackVideoCanvas(): HTMLCanvasElement {
+		const glCanvas = this.app!.canvas as HTMLCanvasElement;
+		const gl =
+			(glCanvas.getContext("webgl2") as WebGL2RenderingContext | null) ??
+			(glCanvas.getContext("webgl") as WebGLRenderingContext | null);
+
+		if (!gl || !this.rasterCanvas || !this.rasterCtx) {
+			return glCanvas;
+		}
+
+		const w = glCanvas.width;
+		const h = glCanvas.height;
+		const buf = new Uint8Array(w * h * 4);
+		gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, buf);
+
+		// readPixels returns rows bottom-to-top; flip vertically
+		const rowSize = w * 4;
+		const temp = new Uint8Array(rowSize);
+		for (let top = 0, bot = h - 1; top < bot; top++, bot--) {
+			const tOff = top * rowSize;
+			const bOff = bot * rowSize;
+			temp.set(buf.subarray(tOff, tOff + rowSize));
+			buf.copyWithin(tOff, bOff, bOff + rowSize);
+			buf.set(temp, bOff);
+		}
+
+		const imageData = new ImageData(new Uint8ClampedArray(buf.buffer), w, h);
+		this.rasterCtx.putImageData(imageData, 0, 0);
+
+		return this.rasterCanvas;
+	}
+
+	// `applyShadowToRecording` is false when the 3D pass will rotate this canvas
+	// next — the shadow gets re-applied after rotation to avoid aliasing.
+	private compositeWithShadows(
+		webcamFrame: VideoFrame | null | undefined,
+		applyShadowToRecording: boolean,
+	): void {
+		if (
+			!this.compositeCanvas ||
+			!this.compositeCtx ||
+			!this.foregroundCanvas ||
+			!this.foregroundCtx ||
+			!this.app
+		)
+			return;
+
+		const videoCanvas = this.isLinux
+			? this.readbackVideoCanvas()
+			: (this.app.canvas as HTMLCanvasElement);
+
+		const bgCtx = this.compositeCtx;
+		const fgCtx = this.foregroundCtx;
+		const w = this.compositeCanvas.width;
+		const h = this.compositeCanvas.height;
+
+		// Background layer (compositeCanvas): wallpaper only. Stays flat — never
+		// touched by the 3D rotation pass, matching preview behavior.
+		bgCtx.clearRect(0, 0, w, h);
+		if (this.backgroundSprite) {
+			const bgCanvas = this.backgroundSprite;
+			if (this.config.showBlur) {
+				bgCtx.save();
+				bgCtx.filter = "blur(6px)"; // Canvas blur is weaker than CSS
+				bgCtx.drawImage(bgCanvas, 0, 0, w, h);
+				bgCtx.restore();
+			} else {
+				bgCtx.drawImage(bgCanvas, 0, 0, w, h);
+			}
+		} else {
+			console.warn("[FrameRenderer] No background sprite found during compositing!");
+		}
+
+		// Foreground (transparent): recording + webcam. Shadow only baked here on
+		// the flat path; the 3D path applies it after rotation (see renderFrame).
+		fgCtx.clearRect(0, 0, w, h);
+		if (
+			applyShadowToRecording &&
+			this.config.showShadow &&
+			this.config.shadowIntensity > 0 &&
+			this.shadowCanvas &&
+			this.shadowCtx
+		) {
+			const shadowCtx = this.shadowCtx;
+			shadowCtx.clearRect(0, 0, w, h);
+			shadowCtx.save();
+
+			const intensity = this.config.shadowIntensity;
+			const baseBlur1 = 48 * intensity;
+			const baseBlur2 = 16 * intensity;
+			const baseBlur3 = 8 * intensity;
+			const baseAlpha1 = 0.7 * intensity;
+			const baseAlpha2 = 0.5 * intensity;
+			const baseAlpha3 = 0.3 * intensity;
+			const baseOffset = 12 * intensity;
+
+			shadowCtx.filter = `drop-shadow(0 ${baseOffset}px ${baseBlur1}px rgba(0,0,0,${baseAlpha1})) drop-shadow(0 ${baseOffset / 3}px ${baseBlur2}px rgba(0,0,0,${baseAlpha2})) drop-shadow(0 ${baseOffset / 6}px ${baseBlur3}px rgba(0,0,0,${baseAlpha3}))`;
+			shadowCtx.drawImage(videoCanvas, 0, 0, w, h);
+			shadowCtx.restore();
+			fgCtx.drawImage(this.shadowCanvas, 0, 0, w, h);
+			// Erase square corners left by PIXI WebGL alpha, then redraw video with explicit
+			// 2D clip so shadow extends beyond the rounded area but video is precisely clipped.
+			// The clip is camera-aware so zoom doesn't crop the magnified video.
+			const shadowClip =
+				(this.layoutCache?.maskBorderRadius ?? 0) > 0 ? this.cameraAwareMaskRect() : null;
+			if (shadowClip) {
+				const { x: smx, y: smy, width: smw, height: smh, br: sbr } = shadowClip;
+				fgCtx.save();
+				fgCtx.globalCompositeOperation = "destination-out";
+				fgCtx.beginPath();
+				fgCtx.rect(smx, smy, smw, smh);
+				fgCtx.roundRect(smx, smy, smw, smh, sbr);
+				fgCtx.fill("evenodd");
+				fgCtx.restore();
+				fgCtx.save();
+				fgCtx.beginPath();
+				fgCtx.roundRect(smx, smy, smw, smh, sbr);
+				fgCtx.clip();
+				fgCtx.drawImage(videoCanvas, 0, 0, w, h);
+				fgCtx.restore();
+			}
+		} else {
+			// Direct path: explicit 2D clip guarantees rounded corners regardless of PIXI
+			// WebGL alpha. Camera-aware so zoom doesn't crop the magnified video.
+			const directClip =
+				(this.layoutCache?.maskBorderRadius ?? 0) > 0 ? this.cameraAwareMaskRect() : null;
+			if (directClip) {
+				fgCtx.save();
+				fgCtx.beginPath();
+				fgCtx.roundRect(
+					directClip.x,
+					directClip.y,
+					directClip.width,
+					directClip.height,
+					directClip.br,
+				);
+				fgCtx.clip();
+				fgCtx.drawImage(videoCanvas, 0, 0, w, h);
+				fgCtx.restore();
+			} else {
+				fgCtx.drawImage(videoCanvas, 0, 0, w, h);
+			}
+		}
+
+		const webcamRect = this.layoutCache?.webcamRect ?? null;
+		if (webcamFrame && webcamRect) {
+			const preset = getWebcamLayoutPresetDefinition(this.config.webcamLayoutPreset);
+			const shape = webcamRect.maskShape ?? this.config.webcamMaskShape ?? "rectangle";
+			const sourceWidth =
+				("displayWidth" in webcamFrame && webcamFrame.displayWidth > 0
+					? webcamFrame.displayWidth
+					: webcamFrame.codedWidth) || webcamRect.width;
+			const sourceHeight =
+				("displayHeight" in webcamFrame && webcamFrame.displayHeight > 0
+					? webcamFrame.displayHeight
+					: webcamFrame.codedHeight) || webcamRect.height;
+			const sourceAspect = sourceWidth / sourceHeight;
+			const targetAspect = webcamRect.width / webcamRect.height;
+			const sourceCropWidth =
+				sourceAspect > targetAspect ? Math.round(sourceHeight * targetAspect) : sourceWidth;
+			const sourceCropHeight =
+				sourceAspect > targetAspect ? sourceHeight : Math.round(sourceWidth / targetAspect);
+			const sourceCropX = Math.max(0, Math.round((sourceWidth - sourceCropWidth) / 2));
+			const sourceCropY = Math.max(0, Math.round((sourceHeight - sourceCropHeight) / 2));
+			fgCtx.save();
+			drawCanvasClipPath(
+				fgCtx,
+				webcamRect.x,
+				webcamRect.y,
+				webcamRect.width,
+				webcamRect.height,
+				shape,
+				webcamRect.borderRadius,
+			);
+			if (preset.shadow) {
+				fgCtx.shadowColor = preset.shadow.color;
+				fgCtx.shadowBlur = preset.shadow.blur;
+				fgCtx.shadowOffsetX = preset.shadow.offsetX;
+				fgCtx.shadowOffsetY = preset.shadow.offsetY;
+			}
+			fgCtx.fillStyle = "#000000";
+			fgCtx.fill();
+			fgCtx.clip();
+			fgCtx.drawImage(
+				webcamFrame as unknown as CanvasImageSource,
+				sourceCropX,
+				sourceCropY,
+				sourceCropWidth,
+				sourceCropHeight,
+				webcamRect.x,
+				webcamRect.y,
+				webcamRect.width,
+				webcamRect.height,
+			);
+			fgCtx.restore();
+		}
+	}
+
+	getCanvas(): HTMLCanvasElement {
+		if (!this.compositeCanvas) {
+			throw new Error("Renderer not initialized");
+		}
+		return this.compositeCanvas;
+	}
+
+	destroy(): void {
+		if (this.videoSprite) {
+			this.videoSprite.destroy();
+			this.videoSprite = null;
+		}
+		this.backgroundSprite = null;
+		if (this.app) {
+			this.app.destroy(true, {
+				children: true,
+				texture: true,
+				textureSource: true,
+			});
+			this.app = null;
+		}
+		this.cameraContainer = null;
+		this.videoContainer = null;
+		this.maskGraphics = null;
+		this.blurFilter = null;
+		this.motionBlurFilter = null;
+		this.shadowCanvas = null;
+		this.shadowCtx = null;
+		this.compositeCanvas = null;
+		this.compositeCtx = null;
+		this.foregroundCanvas = null;
+		this.foregroundCtx = null;
+		this.rasterCanvas = null;
+		this.rasterCtx = null;
+		if (this.threeDPass) {
+			this.threeDPass.destroy();
+			this.threeDPass = null;
+		}
+		this.cursorImageCache.clear();
+	}
+}
diff --git a/src/lib/exporter/gifExporter.browser.test.ts b/src/lib/exporter/gifExporter.browser.test.ts
new file mode 100644
index 0000000..1d96076
--- /dev/null
+++ b/src/lib/exporter/gifExporter.browser.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { BackgroundLoadError } from "../wallpaper";
+import { GifExporter } from "./gifExporter";
+import type { ExportProgress } from "./types";
+
+describe("GifExporter (real browser)", () => {
+	it("exports a valid GIF blob from a real video", async () => {
+		const progressEvents: ExportProgress[] = [];
+
+		const exporter = new GifExporter({
+			videoUrl: sampleVideoUrl,
+			width: 320,
+			height: 180,
+			frameRate: 15,
+			loop: true,
+			sizePreset: "medium",
+			wallpaper: "#1a1a2e",
+			zoomRegions: [],
+			showShadow: false,
+			shadowIntensity: 0,
+			showBlur: false,
+			cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+			onProgress: (p) => progressEvents.push(p),
+		});
+
+		const result = await exporter.export();
+
+		expect(result.success, result.error).toBe(true);
+		expect(result.blob).toBeInstanceOf(Blob);
+
+		const buf = await result.blob!.arrayBuffer();
+		const header = new TextDecoder().decode(new Uint8Array(buf, 0, 6));
+		expect(header).toMatch(/^GIF8[79]a/);
+
+		expect(result.blob!.size).toBeGreaterThan(1024);
+
+		expect(progressEvents.length).toBeGreaterThan(0);
+
+		const finalizing = progressEvents.filter((p) => p.phase === "finalizing");
+		expect(finalizing.length).toBeGreaterThan(0);
+		expect(finalizing.at(-1)!.percentage).toBe(100);
+	});
+
+	it("exports successfully with an image wallpaper (served by Vite dev server)", async () => {
+		const exporter = new GifExporter({
+			videoUrl: sampleVideoUrl,
+			width: 320,
+			height: 180,
+			frameRate: 15,
+			loop: true,
+			sizePreset: "medium",
+			wallpaper: "/wallpapers/wallpaper1.jpg",
+			zoomRegions: [],
+			showShadow: false,
+			shadowIntensity: 0,
+			showBlur: false,
+			cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		});
+
+		const result = await exporter.export();
+		expect(result.success, result.error).toBe(true);
+		expect(result.blob!.size).toBeGreaterThan(1024);
+	});
+
+	it("throws BackgroundLoadError when wallpaper fails to load (no silent black fallback)", async () => {
+		const exporter = new GifExporter({
+			videoUrl: sampleVideoUrl,
+			width: 320,
+			height: 180,
+			frameRate: 15,
+			loop: true,
+			sizePreset: "medium",
+			wallpaper: "/wallpapers/does-not-exist.jpg",
+			zoomRegions: [],
+			showShadow: false,
+			shadowIntensity: 0,
+			showBlur: false,
+			cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		});
+
+		const rejection = exporter.export();
+		await expect(rejection).rejects.toBeInstanceOf(BackgroundLoadError);
+		await expect(rejection).rejects.toMatchObject({
+			url: expect.stringContaining("does-not-exist"),
+		});
+	});
+});
diff --git a/src/lib/exporter/gifExporter.test.ts b/src/lib/exporter/gifExporter.test.ts
new file mode 100644
index 0000000..1ad1671
--- /dev/null
+++ b/src/lib/exporter/gifExporter.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { calculateOutputDimensions } from "./gifExporter";
+import { GIF_SIZE_PRESETS } from "./types";
+
+describe("calculateOutputDimensions", () => {
+	it("uses the selected aspect ratio for scaled GIF exports", () => {
+		expect(calculateOutputDimensions(1080, 1920, "medium", GIF_SIZE_PRESETS, 16 / 9)).toEqual({
+			width: 1280,
+			height: 720,
+		});
+	});
+
+	it("fits original-size GIF exports within the source bounds at the selected aspect ratio", () => {
+		expect(calculateOutputDimensions(1080, 1920, "original", GIF_SIZE_PRESETS, 16 / 9)).toEqual({
+			width: 1080,
+			height: 606,
+		});
+	});
+});
diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
new file mode 100644
index 0000000..7c0d2a6
--- /dev/null
+++ b/src/lib/exporter/gifExporter.ts
@@ -0,0 +1,410 @@
+import GIF from "gif.js";
+import type {
+	AnnotationRegion,
+	CropRegion,
+	SpeedRegion,
+	TrimRegion,
+	WebcamLayoutPreset,
+	WebcamSizePreset,
+	ZoomRegion,
+} from "@/components/video-editor/types";
+import { BackgroundLoadError } from "@/lib/wallpaper";
+import type { CursorRecordingData } from "@/native/contracts";
+import { getPlatform } from "@/utils/platformUtils";
+import { FrameRenderer } from "./frameRenderer";
+import { StreamingVideoDecoder } from "./streamingDecoder";
+import { TimestampedVideoFrameQueue } from "./timestampedVideoFrameQueue";
+import type {
+	ExportProgress,
+	ExportResult,
+	GIF_SIZE_PRESETS,
+	GifFrameRate,
+	GifSizePreset,
+} from "./types";
+
+const GIF_WORKER_URL = new URL("gif.js/dist/gif.worker.js", import.meta.url).toString();
+
+interface GifExporterConfig {
+	videoUrl: string;
+	webcamVideoUrl?: string;
+	width: number;
+	height: number;
+	frameRate: GifFrameRate;
+	loop: boolean;
+	sizePreset: GifSizePreset;
+	wallpaper: string;
+	zoomRegions: ZoomRegion[];
+	trimRegions?: TrimRegion[];
+	speedRegions?: SpeedRegion[];
+	showShadow: boolean;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount?: number;
+	borderRadius?: number;
+	padding?: number;
+	videoPadding?: number;
+	cropRegion: CropRegion;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+	webcamSizePreset?: WebcamSizePreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	cursorRecordingData?: CursorRecordingData | null;
+	cursorScale?: number;
+	cursorSmoothing?: number;
+	cursorMotionBlur?: number;
+	cursorClickBounce?: number;
+	cursorClipToBounds?: boolean;
+	annotationRegions?: AnnotationRegion[];
+	previewWidth?: number;
+	previewHeight?: number;
+	cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+	cursorClickTimestamps?: number[];
+	onProgress?: (progress: ExportProgress) => void;
+}
+
+/**
+ * Calculate output dimensions based on size preset and source dimensions while preserving aspect ratio.
+ * @param sourceWidth - Original video width
+ * @param sourceHeight - Original video height
+ * @param sizePreset - The size preset to use
+ * @param sizePresets - The size presets configuration
+ * @returns The calculated output dimensions
+ */
+export function calculateOutputDimensions(
+	sourceWidth: number,
+	sourceHeight: number,
+	sizePreset: GifSizePreset,
+	sizePresets: typeof GIF_SIZE_PRESETS,
+	targetAspectRatio = sourceWidth / sourceHeight,
+): { width: number; height: number } {
+	const preset = sizePresets[sizePreset];
+	const maxHeight = preset.maxHeight;
+	const aspectRatio =
+		Number.isFinite(targetAspectRatio) && targetAspectRatio > 0
+			? targetAspectRatio
+			: sourceWidth / sourceHeight;
+
+	const toEven = (value: number) => {
+		const evenValue = Math.max(2, Math.floor(value / 2) * 2);
+		return evenValue;
+	};
+
+	if (sizePreset === "original") {
+		const sourceAspect = sourceWidth / sourceHeight;
+		if (aspectRatio >= sourceAspect) {
+			const width = toEven(sourceWidth);
+			const height = toEven(width / aspectRatio);
+			return { width, height };
+		}
+
+		const height = toEven(sourceHeight);
+		const width = toEven(height * aspectRatio);
+		return { width, height };
+	}
+
+	const targetHeight = maxHeight;
+	const targetWidth = Math.round(targetHeight * aspectRatio);
+
+	return {
+		width: toEven(targetWidth),
+		height: toEven(targetHeight),
+	};
+}
+
+export class GifExporter {
+	private config: GifExporterConfig;
+	private streamingDecoder: StreamingVideoDecoder | null = null;
+	private webcamDecoder: StreamingVideoDecoder | null = null;
+	private renderer: FrameRenderer | null = null;
+	private gif: GIF | null = null;
+	private cancelled = false;
+
+	constructor(config: GifExporterConfig) {
+		this.config = config;
+	}
+
+	async export(): Promise<ExportResult> {
+		let webcamFrameQueue: TimestampedVideoFrameQueue | null = null;
+
+		const warnings: string[] = [];
+		const onWarning = (message: string) => warnings.push(message);
+
+		try {
+			const platform = await getPlatform();
+
+			this.cleanup();
+			this.cancelled = false;
+
+			// Initialize streaming decoder and load video metadata
+			this.streamingDecoder = new StreamingVideoDecoder();
+			const videoInfo = await this.streamingDecoder.loadMetadata(this.config.videoUrl);
+			let webcamInfo: Awaited<ReturnType<StreamingVideoDecoder["loadMetadata"]>> | null = null;
+			if (this.config.webcamVideoUrl) {
+				this.webcamDecoder = new StreamingVideoDecoder();
+				webcamInfo = await this.webcamDecoder.loadMetadata(this.config.webcamVideoUrl);
+			}
+
+			// Initialize frame renderer
+			this.renderer = new FrameRenderer({
+				width: this.config.width,
+				height: this.config.height,
+				wallpaper: this.config.wallpaper,
+				zoomRegions: this.config.zoomRegions,
+				showShadow: this.config.showShadow,
+				shadowIntensity: this.config.shadowIntensity,
+				showBlur: this.config.showBlur,
+				motionBlurAmount: this.config.motionBlurAmount,
+				borderRadius: this.config.borderRadius,
+				padding: this.config.padding,
+				cropRegion: this.config.cropRegion,
+				cursorRecordingData: this.config.cursorRecordingData,
+				cursorScale: this.config.cursorScale,
+				cursorSmoothing: this.config.cursorSmoothing,
+				cursorMotionBlur: this.config.cursorMotionBlur,
+				cursorClickBounce: this.config.cursorClickBounce,
+				cursorClipToBounds: this.config.cursorClipToBounds,
+				videoWidth: videoInfo.width,
+				videoHeight: videoInfo.height,
+				webcamSize: webcamInfo ? { width: webcamInfo.width, height: webcamInfo.height } : null,
+				webcamLayoutPreset: this.config.webcamLayoutPreset,
+				webcamMaskShape: this.config.webcamMaskShape,
+				webcamSizePreset: this.config.webcamSizePreset,
+				webcamPosition: this.config.webcamPosition,
+				annotationRegions: this.config.annotationRegions,
+				speedRegions: this.config.speedRegions,
+				previewWidth: this.config.previewWidth,
+				previewHeight: this.config.previewHeight,
+				cursorTelemetry: this.config.cursorTelemetry,
+				cursorClickTimestamps: this.config.cursorClickTimestamps,
+				platform,
+			});
+			await this.renderer.initialize();
+
+			// Initialize GIF encoder
+			// Loop: 0 = infinite loop, 1 = play once (no loop)
+			const repeat = this.config.loop ? 0 : 1;
+			const cores = navigator.hardwareConcurrency || 4;
+			const WORKER_COUNT = Math.max(1, Math.min(8, cores - 1));
+			this.gif = new GIF({
+				workers: WORKER_COUNT,
+				quality: 10,
+				width: this.config.width,
+				height: this.config.height,
+				workerScript: GIF_WORKER_URL,
+				repeat,
+				background: "#000000",
+				transparent: null,
+				dither: "FloydSteinberg",
+			});
+
+			// Calculate effective duration and frame count (excluding trim regions)
+			const { effectiveDuration, totalFrames } = this.streamingDecoder.getExportMetrics(
+				this.config.frameRate,
+				this.config.trimRegions,
+				this.config.speedRegions,
+			);
+
+			// Calculate frame delay in milliseconds (gif.js uses ms)
+			const frameDelay = Math.round(1000 / this.config.frameRate);
+
+			console.log("[GifExporter] Original duration:", videoInfo.duration, "s");
+			console.log("[GifExporter] Effective duration:", effectiveDuration, "s");
+			console.log("[GifExporter] Total frames to export:", totalFrames);
+			console.log("[GifExporter] Frame rate:", this.config.frameRate, "FPS");
+			console.log("[GifExporter] Frame delay:", frameDelay, "ms");
+			console.log("[GifExporter] Loop:", this.config.loop ? "infinite" : "once");
+			console.log("[GifExporter] Using streaming decode (web-demuxer + VideoDecoder)");
+
+			let frameIndex = 0;
+			webcamFrameQueue = this.config.webcamVideoUrl ? new TimestampedVideoFrameQueue() : null;
+			let stopWebcamDecode = false;
+			let webcamDecodeError: Error | null = null;
+			const webcamDecodePromise =
+				this.webcamDecoder && webcamFrameQueue
+					? (() => {
+							const queue = webcamFrameQueue;
+							return this.webcamDecoder
+								.decodeAll(
+									this.config.frameRate,
+									this.config.trimRegions,
+									this.config.speedRegions,
+									async (webcamFrame, _exportTimestampUs, webcamSourceTimestampMs) => {
+										while (queue.length >= 12 && !this.cancelled && !stopWebcamDecode) {
+											await new Promise((resolve) => setTimeout(resolve, 2));
+										}
+										if (this.cancelled || stopWebcamDecode) {
+											webcamFrame.close();
+											return;
+										}
+										queue.enqueue(webcamFrame, webcamSourceTimestampMs);
+									},
+									onWarning,
+								)
+								.catch((error) => {
+									webcamDecodeError = error instanceof Error ? error : new Error(String(error));
+									throw error;
+								})
+								.finally(() => {
+									if (webcamDecodeError) {
+										queue.fail(webcamDecodeError);
+									} else {
+										queue.close();
+									}
+								});
+						})()
+					: null;
+
+			// Stream decode and process frames — no seeking!
+			await this.streamingDecoder.decodeAll(
+				this.config.frameRate,
+				this.config.trimRegions,
+				this.config.speedRegions,
+				async (videoFrame, _exportTimestampUs, sourceTimestampMs) => {
+					let webcamFrame: VideoFrame | null = null;
+					try {
+						if (this.cancelled) {
+							return;
+						}
+
+						webcamFrame = webcamFrameQueue
+							? await webcamFrameQueue.frameAt(sourceTimestampMs)
+							: null;
+						const renderer = this.renderer;
+						if (this.cancelled || !renderer) {
+							return;
+						}
+
+						// Render the frame with all effects using source timestamp
+						const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
+						await renderer.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
+
+						// Get the rendered canvas and add to GIF
+						const canvas = renderer.getCanvas();
+
+						// Add frame to GIF encoder with delay
+						this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
+
+						frameIndex++;
+
+						// Update progress
+						if (this.config.onProgress) {
+							this.config.onProgress({
+								currentFrame: frameIndex,
+								totalFrames,
+								percentage: (frameIndex / totalFrames) * 100,
+								estimatedTimeRemaining: 0,
+							});
+						}
+					} finally {
+						videoFrame.close();
+						webcamFrame?.close();
+					}
+				},
+				onWarning,
+			);
+
+			if (this.cancelled) {
+				return { success: false, error: "Export cancelled" };
+			}
+
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			this.webcamDecoder?.cancel();
+			await webcamDecodePromise;
+
+			// Update progress to show we're now in the finalizing phase
+			if (this.config.onProgress) {
+				this.config.onProgress({
+					currentFrame: totalFrames,
+					totalFrames,
+					percentage: 100,
+					estimatedTimeRemaining: 0,
+					phase: "finalizing",
+				});
+			}
+
+			// Render the GIF
+			const blob = await new Promise<Blob>((resolve, _reject) => {
+				this.gif!.on("finished", (blob: Blob) => {
+					resolve(blob);
+				});
+
+				// Track rendering progress
+				this.gif!.on("progress", (progress: number) => {
+					if (this.config.onProgress) {
+						this.config.onProgress({
+							currentFrame: totalFrames,
+							totalFrames,
+							percentage: 100,
+							estimatedTimeRemaining: 0,
+							phase: "finalizing",
+							renderProgress: Math.round(progress * 100),
+						});
+					}
+				});
+
+				// gif.js doesn't have a typed 'error' event, but we can catch errors in the try/catch
+				this.gif!.render();
+			});
+
+			return { success: true, blob, warnings: warnings.length > 0 ? warnings : undefined };
+		} catch (error) {
+			if (error instanceof BackgroundLoadError) {
+				throw error;
+			}
+			console.error("GIF Export error:", error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error),
+			};
+		} finally {
+			webcamFrameQueue?.destroy();
+			this.cleanup();
+		}
+	}
+
+	cancel(): void {
+		this.cancelled = true;
+		if (this.streamingDecoder) {
+			this.streamingDecoder.cancel();
+		}
+		if (this.webcamDecoder) {
+			this.webcamDecoder.cancel();
+		}
+		if (this.gif) {
+			this.gif.abort();
+		}
+		this.cleanup();
+	}
+
+	private cleanup(): void {
+		if (this.streamingDecoder) {
+			try {
+				this.streamingDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying streaming decoder:", e);
+			}
+			this.streamingDecoder = null;
+		}
+
+		if (this.webcamDecoder) {
+			try {
+				this.webcamDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying webcam decoder:", e);
+			}
+			this.webcamDecoder = null;
+		}
+
+		if (this.renderer) {
+			try {
+				this.renderer.destroy();
+			} catch (e) {
+				console.warn("Error destroying renderer:", e);
+			}
+			this.renderer = null;
+		}
+
+		this.gif = null;
+	}
+}
diff --git a/src/lib/exporter/gradientParser.test.ts b/src/lib/exporter/gradientParser.test.ts
new file mode 100644
index 0000000..a2c0ef0
--- /dev/null
+++ b/src/lib/exporter/gradientParser.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import {
+	getLinearGradientPoints,
+	getRadialGradientShape,
+	parseCssGradient,
+	resolveLinearGradientAngle,
+} from "./gradientParser";
+
+describe("parseCssGradient", () => {
+	it("parses rgba-based gradient presets without splitting inside color functions", () => {
+		const parsed = parseCssGradient(
+			"linear-gradient( 111.6deg,  rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
+		);
+
+		expect(parsed?.type).toBe("linear");
+		expect(parsed?.descriptor).toBe("111.6deg");
+		expect(parsed?.stops).toHaveLength(4);
+		expect(parsed?.stops.map((stop) => stop.color)).toEqual([
+			"rgba(114,167,232,1)",
+			"rgba(253,129,82,1)",
+			"rgba(253,129,82,1)",
+			"rgba(249,202,86,1)",
+		]);
+		expect(parsed?.stops[0]?.offset).toBeCloseTo(0.094);
+		expect(parsed?.stops[1]?.offset).toBeCloseTo(0.439);
+		expect(parsed?.stops[2]?.offset).toBeCloseTo(0.548);
+		expect(parsed?.stops[3]?.offset).toBeCloseTo(0.863);
+	});
+
+	it("fills missing stop positions for simple hex gradients", () => {
+		const parsed = parseCssGradient("linear-gradient(135deg, #FBC8B4, #2447B1)");
+
+		expect(parsed?.stops).toEqual([
+			{ color: "#FBC8B4", offset: 0 },
+			{ color: "#2447B1", offset: 1 },
+		]);
+	});
+});
+
+describe("gradient geometry", () => {
+	it("maps linear directions to canvas endpoints", () => {
+		const angle = resolveLinearGradientAngle("to right");
+		const points = getLinearGradientPoints(angle, 1920, 1080);
+
+		expect(points.x0).toBeCloseTo(0);
+		expect(points.y0).toBeCloseTo(540);
+		expect(points.x1).toBeCloseTo(1920);
+		expect(points.y1).toBeCloseTo(540);
+	});
+
+	it("uses radial positions from the descriptor", () => {
+		const shape = getRadialGradientShape("circle farthest-corner at 10% 20%", 1000, 500);
+
+		expect(shape.cx).toBe(100);
+		expect(shape.cy).toBe(100);
+		expect(shape.radius).toBeCloseTo(Math.hypot(900, 400));
+	});
+});
diff --git a/src/lib/exporter/gradientParser.ts b/src/lib/exporter/gradientParser.ts
new file mode 100644
index 0000000..c643edc
--- /dev/null
+++ b/src/lib/exporter/gradientParser.ts
@@ -0,0 +1,236 @@
+export interface ParsedGradientStop {
+	color: string;
+	offset: number;
+}
+
+export interface ParsedGradient {
+	type: "linear" | "radial";
+	descriptor: string | null;
+	stops: ParsedGradientStop[];
+}
+
+const COLOR_TOKEN_RE = /^(#[0-9a-fA-F]{3,8}|(?:rgba?|hsla?)$[^)]*$|[a-zA-Z-]+)/;
+
+export function parseCssGradient(input: string): ParsedGradient | null {
+	const gradientMatch = input.match(/^(linear|radial)-gradient$(.*)$$/i);
+	if (!gradientMatch) {
+		return null;
+	}
+
+	const type = gradientMatch[1].toLowerCase() as ParsedGradient["type"];
+	const rawArgs = splitGradientArgs(gradientMatch[2]);
+	if (rawArgs.length === 0) {
+		return null;
+	}
+
+	let descriptor: string | null = null;
+	let stopArgs = rawArgs;
+
+	if (isGradientDescriptor(type, rawArgs[0])) {
+		descriptor = rawArgs[0];
+		stopArgs = rawArgs.slice(1);
+	}
+
+	const parsedStops = stopArgs
+		.map((part) => parseColorStop(part))
+		.filter((stop): stop is { color: string; offset: number | null } => stop !== null);
+
+	if (parsedStops.length === 0) {
+		return null;
+	}
+
+	return {
+		type,
+		descriptor,
+		stops: normalizeStopOffsets(parsedStops),
+	};
+}
+
+export function getLinearGradientPoints(angleDeg: number, width: number, height: number) {
+	const radians = (angleDeg * Math.PI) / 180;
+	const vx = Math.sin(radians);
+	const vy = -Math.cos(radians);
+	const halfSpan = (Math.abs(vx) * width + Math.abs(vy) * height) / 2;
+	const cx = width / 2;
+	const cy = height / 2;
+
+	return {
+		x0: cx - vx * halfSpan,
+		y0: cy - vy * halfSpan,
+		x1: cx + vx * halfSpan,
+		y1: cy + vy * halfSpan,
+	};
+}
+
+export function resolveLinearGradientAngle(descriptor: string | null): number {
+	if (!descriptor) {
+		return 180;
+	}
+
+	const angleMatch = descriptor.match(/(-?\d*\.?\d+)deg/i);
+	if (angleMatch) {
+		return Number.parseFloat(angleMatch[1]);
+	}
+
+	const normalized = descriptor.trim().toLowerCase().replace(/\s+/g, " ");
+	const directionMap: Record<string, number> = {
+		"to top": 0,
+		"to top right": 45,
+		"to right": 90,
+		"to bottom right": 135,
+		"to bottom": 180,
+		"to bottom left": 225,
+		"to left": 270,
+		"to top left": 315,
+	};
+
+	return directionMap[normalized] ?? 180;
+}
+
+export function getRadialGradientShape(descriptor: string | null, width: number, height: number) {
+	const atMatch = descriptor?.match(/at\s+(-?\d*\.?\d+)%\s+(-?\d*\.?\d+)%/i);
+	const cx = atMatch ? (Number.parseFloat(atMatch[1]) / 100) * width : width / 2;
+	const cy = atMatch ? (Number.parseFloat(atMatch[2]) / 100) * height : height / 2;
+
+	const distances = [
+		Math.hypot(cx, cy),
+		Math.hypot(width - cx, cy),
+		Math.hypot(cx, height - cy),
+		Math.hypot(width - cx, height - cy),
+	];
+
+	return {
+		cx,
+		cy,
+		radius: Math.max(...distances),
+	};
+}
+
+function splitGradientArgs(input: string): string[] {
+	const parts: string[] = [];
+	let current = "";
+	let depth = 0;
+
+	for (const char of input) {
+		if (char === "(") {
+			depth += 1;
+			current += char;
+			continue;
+		}
+
+		if (char === ")") {
+			depth = Math.max(0, depth - 1);
+			current += char;
+			continue;
+		}
+
+		if (char === "," && depth === 0) {
+			const trimmed = current.trim();
+			if (trimmed) {
+				parts.push(trimmed);
+			}
+			current = "";
+			continue;
+		}
+
+		current += char;
+	}
+
+	const trimmed = current.trim();
+	if (trimmed) {
+		parts.push(trimmed);
+	}
+
+	return parts;
+}
+
+function isGradientDescriptor(type: ParsedGradient["type"], part: string) {
+	if (type === "linear") {
+		return /^\s*to\s+/i.test(part) || /-?\d*\.?\d+deg/i.test(part);
+	}
+
+	return /\b(circle|ellipse|closest|farthest)\b/i.test(part) || /\bat\b/i.test(part);
+}
+
+function parseColorStop(part: string): { color: string; offset: number | null } | null {
+	const match = part.trim().match(COLOR_TOKEN_RE);
+	if (!match) {
+		return null;
+	}
+
+	const color = match[1];
+	const rest = part.slice(match[0].length);
+	const percentMatch = rest.match(/(-?\d*\.?\d+)%/);
+	const offset = percentMatch ? clamp(Number.parseFloat(percentMatch[1]) / 100, 0, 1) : null;
+
+	return { color, offset };
+}
+
+function normalizeStopOffsets(
+	stops: Array<{ color: string; offset: number | null }>,
+): ParsedGradientStop[] {
+	const explicitCount = stops.filter((stop) => stop.offset !== null).length;
+	if (explicitCount === 0) {
+		if (stops.length === 1) {
+			return [{ color: stops[0].color, offset: 0 }];
+		}
+
+		return stops.map((stop, index) => ({
+			color: stop.color,
+			offset: index / (stops.length - 1),
+		}));
+	}
+
+	const resolved = stops.map((stop) => stop.offset);
+	const firstExplicit = resolved.findIndex((offset) => offset !== null);
+	const lastExplicit = findLastDefinedIndex(resolved);
+
+	for (let index = 0; index < firstExplicit; index += 1) {
+		const end = resolved[firstExplicit] ?? 0;
+		resolved[index] = firstExplicit === 0 ? end : (end * index) / firstExplicit;
+	}
+
+	for (let index = lastExplicit + 1; index < resolved.length; index += 1) {
+		const start = resolved[lastExplicit] ?? 1;
+		const denominator = resolved.length - 1 - lastExplicit;
+		resolved[index] =
+			denominator <= 0 ? start : start + ((1 - start) * (index - lastExplicit)) / denominator;
+	}
+
+	let runStart = firstExplicit;
+	while (runStart < lastExplicit) {
+		const nextExplicit = resolved.findIndex((offset, index) => index > runStart && offset !== null);
+		if (nextExplicit === -1) {
+			break;
+		}
+
+		const start = resolved[runStart] ?? 0;
+		const end = resolved[nextExplicit] ?? start;
+		const gap = nextExplicit - runStart;
+
+		for (let index = runStart + 1; index < nextExplicit; index += 1) {
+			resolved[index] = start + ((end - start) * (index - runStart)) / gap;
+		}
+
+		runStart = nextExplicit;
+	}
+
+	return stops.map((stop, index) => ({
+		color: stop.color,
+		offset: clamp(resolved[index] ?? 0, 0, 1),
+	}));
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(max, Math.max(min, value));
+}
+
+function findLastDefinedIndex(values: Array<number | null>) {
+	for (let index = values.length - 1; index >= 0; index -= 1) {
+		if (values[index] !== null) {
+			return index;
+		}
+	}
+
+	return -1;
+}
diff --git a/src/lib/exporter/index.ts b/src/lib/exporter/index.ts
new file mode 100644
index 0000000..8ac404f
--- /dev/null
+++ b/src/lib/exporter/index.ts
@@ -0,0 +1,29 @@
+export { FrameRenderer } from "./frameRenderer";
+export { calculateOutputDimensions, GifExporter } from "./gifExporter";
+export {
+	calculateEffectiveSourceDimensions,
+	calculateMp4ExportSettings,
+	type Mp4ExportSettings,
+} from "./mp4ExportSettings";
+export { VideoMuxer } from "./muxer";
+export { StreamingVideoDecoder } from "./streamingDecoder";
+export type {
+	ExportConfig,
+	ExportFormat,
+	ExportProgress,
+	ExportQuality,
+	ExportResult,
+	ExportSettings,
+	GifExportConfig,
+	GifFrameRate,
+	GifSizePreset,
+	VideoFrameData,
+} from "./types";
+export {
+	GIF_FRAME_RATES,
+	GIF_SIZE_PRESETS,
+	isValidGifFrameRate,
+	VALID_GIF_FRAME_RATES,
+} from "./types";
+export { VideoFileDecoder } from "./videoDecoder";
+export { VideoExporter } from "./videoExporter";
diff --git a/src/lib/exporter/mp4ExportSettings.test.ts b/src/lib/exporter/mp4ExportSettings.test.ts
new file mode 100644
index 0000000..2a94154
--- /dev/null
+++ b/src/lib/exporter/mp4ExportSettings.test.ts
@@ -0,0 +1,148 @@
+import { describe, expect, it } from "vitest";
+import {
+	calculateEffectiveSourceDimensions,
+	calculateMp4ExportSettings,
+} from "./mp4ExportSettings";
+
+describe("calculateMp4ExportSettings", () => {
+	it("keeps 1080p explicit even when it upscales short native captures", () => {
+		const aspectRatioValue = 1920 / 1032;
+
+		expect(
+			calculateMp4ExportSettings({
+				quality: "good",
+				sourceWidth: 1920,
+				sourceHeight: 1032,
+				aspectRatioValue,
+			}),
+		).toMatchObject({
+			width: 2008,
+			height: 1080,
+			bitrate: 30_000_000,
+		});
+
+		expect(
+			calculateMp4ExportSettings({
+				quality: "source",
+				sourceWidth: 1920,
+				sourceHeight: 1032,
+				aspectRatioValue,
+			}),
+		).toMatchObject({
+			width: 1920,
+			height: 1032,
+			bitrate: 30_000_000,
+		});
+	});
+
+	it("keeps lower quality presets below the source size when downscaling is useful", () => {
+		expect(
+			calculateMp4ExportSettings({
+				quality: "medium",
+				sourceWidth: 1920,
+				sourceHeight: 1032,
+				aspectRatioValue: 1920 / 1032,
+			}),
+		).toMatchObject({
+			width: 1338,
+			height: 720,
+			bitrate: 20_000_000,
+		});
+	});
+
+	it("keeps 1080p explicit even for 720p source dimensions", () => {
+		expect(
+			calculateMp4ExportSettings({
+				quality: "good",
+				sourceWidth: 1280,
+				sourceHeight: 720,
+				aspectRatioValue: 16 / 9,
+			}),
+		).toMatchObject({
+			width: 1920,
+			height: 1080,
+			bitrate: 20_000_000,
+		});
+	});
+
+	it("preserves source-sized High exports when the source is already 1080p or larger", () => {
+		expect(
+			calculateMp4ExportSettings({
+				quality: "source",
+				sourceWidth: 1920,
+				sourceHeight: 1080,
+				aspectRatioValue: 16 / 9,
+			}),
+		).toMatchObject({
+			width: 1920,
+			height: 1080,
+			bitrate: 30_000_000,
+		});
+
+		expect(
+			calculateMp4ExportSettings({
+				quality: "source",
+				sourceWidth: 3840,
+				sourceHeight: 2160,
+				aspectRatioValue: 16 / 9,
+			}),
+		).toMatchObject({
+			width: 3840,
+			height: 2160,
+			bitrate: 80_000_000,
+		});
+	});
+
+	it("keeps portrait presets on the short side", () => {
+		expect(
+			calculateMp4ExportSettings({
+				quality: "good",
+				sourceWidth: 1080,
+				sourceHeight: 1920,
+				aspectRatioValue: 9 / 16,
+			}),
+		).toMatchObject({
+			width: 1080,
+			height: 1920,
+			bitrate: 20_000_000,
+		});
+	});
+
+	it("uses the cropped area as the effective source size", () => {
+		const effectiveSource = calculateEffectiveSourceDimensions(3840, 2160, {
+			width: 854 / 3840,
+			height: 480 / 2160,
+		});
+
+		expect(effectiveSource).toEqual({
+			width: 854,
+			height: 480,
+		});
+
+		expect(
+			calculateMp4ExportSettings({
+				quality: "source",
+				sourceWidth: effectiveSource.width,
+				sourceHeight: effectiveSource.height,
+				aspectRatioValue: effectiveSource.width / effectiveSource.height,
+			}),
+		).toMatchObject({
+			width: 854,
+			height: 480,
+			bitrate: 30_000_000,
+		});
+
+		expect(
+			calculateMp4ExportSettings({
+				quality: "good",
+				sourceWidth: effectiveSource.width,
+				sourceHeight: effectiveSource.height,
+				aspectRatioValue: effectiveSource.width / effectiveSource.height,
+			}),
+		).toMatchObject({
+			width: 1920,
+			height: 1080,
+			bitrate: 20_000_000,
+		});
+	});
+});
diff --git a/src/lib/exporter/mp4ExportSettings.ts b/src/lib/exporter/mp4ExportSettings.ts
new file mode 100644
index 0000000..b75193f
--- /dev/null
+++ b/src/lib/exporter/mp4ExportSettings.ts
@@ -0,0 +1,143 @@
+import type { ExportQuality } from "./types";
+
+export interface Mp4ExportSettings {
+	width: number;
+	height: number;
+	bitrate: number;
+}
+
+interface SourceCropRegion {
+	width: number;
+	height: number;
+}
+
+const MEDIUM_SHORT_SIDE = 720;
+const HIGH_SHORT_SIDE = 1080;
+
+function even(value: number) {
+	return Math.floor(value / 2) * 2;
+}
+
+function atLeastEven(value: number) {
+	return Math.max(2, even(value));
+}
+
+export function calculateEffectiveSourceDimensions(
+	sourceWidth: number,
+	sourceHeight: number,
+	cropRegion?: SourceCropRegion,
+) {
+	const cropWidth = cropRegion?.width ?? 1;
+	const cropHeight = cropRegion?.height ?? 1;
+
+	return {
+		width: atLeastEven(Math.round(sourceWidth * cropWidth)),
+		height: atLeastEven(Math.round(sourceHeight * cropHeight)),
+	};
+}
+
+function calculateDimensionsForShortSide(targetShortSide: number, aspectRatioValue: number) {
+	if (aspectRatioValue >= 1) {
+		const height = even(targetShortSide);
+		return {
+			width: even(height * aspectRatioValue),
+			height,
+		};
+	}
+
+	const width = even(targetShortSide);
+	return {
+		width,
+		height: even(width / aspectRatioValue),
+	};
+}
+
+function calculateSourceDimensions(
+	sourceWidth: number,
+	sourceHeight: number,
+	aspectRatioValue: number,
+) {
+	const sourceLongDim = Math.max(sourceWidth, sourceHeight);
+
+	if (aspectRatioValue === 1) {
+		const baseDimension = even(Math.min(sourceWidth, sourceHeight));
+		return {
+			width: baseDimension,
+			height: baseDimension,
+		};
+	}
+
+	if (aspectRatioValue > 1) {
+		const baseWidth = even(sourceLongDim);
+		for (let width = baseWidth; width >= 100; width -= 2) {
+			const height = Math.round(width / aspectRatioValue);
+			if (height % 2 === 0 && Math.abs(width / height - aspectRatioValue) < 0.0001) {
+				return { width, height };
+			}
+		}
+		return {
+			width: baseWidth,
+			height: even(baseWidth / aspectRatioValue),
+		};
+	}
+
+	const baseHeight = even(sourceLongDim);
+	for (let height = baseHeight; height >= 100; height -= 2) {
+		const width = Math.round(height * aspectRatioValue);
+		if (width % 2 === 0 && Math.abs(width / height - aspectRatioValue) < 0.0001) {
+			return { width, height };
+		}
+	}
+	return {
+		width: even(baseHeight * aspectRatioValue),
+		height: baseHeight,
+	};
+}
+
+function calculateBitrate(width: number, height: number, quality: ExportQuality) {
+	const totalPixels = width * height;
+
+	if (quality === "source") {
+		if (totalPixels > 2560 * 1440) return 80_000_000;
+		if (totalPixels > 1920 * 1080) return 50_000_000;
+		return 30_000_000;
+	}
+
+	if (totalPixels <= 1280 * 720) return 10_000_000;
+	if (totalPixels <= 1920 * 1080) return 20_000_000;
+	return 30_000_000;
+}
+
+export function calculateMp4ExportSettings({
+	quality,
+	sourceWidth,
+	sourceHeight,
+	aspectRatioValue,
+}: {
+	quality: ExportQuality;
+	sourceWidth: number;
+	sourceHeight: number;
+	aspectRatioValue: number;
+}): Mp4ExportSettings {
+	if (quality === "medium") {
+		const dimensions = calculateDimensionsForShortSide(MEDIUM_SHORT_SIDE, aspectRatioValue);
+		return {
+			...dimensions,
+			bitrate: calculateBitrate(dimensions.width, dimensions.height, quality),
+		};
+	}
+
+	if (quality === "good") {
+		const dimensions = calculateDimensionsForShortSide(HIGH_SHORT_SIDE, aspectRatioValue);
+		return {
+			...dimensions,
+			bitrate: calculateBitrate(dimensions.width, dimensions.height, quality),
+		};
+	}
+
+	const sourceDimensions = calculateSourceDimensions(sourceWidth, sourceHeight, aspectRatioValue);
+	return {
+		...sourceDimensions,
+		bitrate: calculateBitrate(sourceDimensions.width, sourceDimensions.height, quality),
+	};
+}
diff --git a/src/lib/exporter/muxer.ts b/src/lib/exporter/muxer.ts
new file mode 100644
index 0000000..95d41ad
--- /dev/null
+++ b/src/lib/exporter/muxer.ts
@@ -0,0 +1,93 @@
+import {
+	BufferTarget,
+	EncodedAudioPacketSource,
+	EncodedPacket,
+	EncodedVideoPacketSource,
+	Mp4OutputFormat,
+	Output,
+} from "mediabunny";
+import type { ExportConfig } from "./types";
+
+export type ExportAudioMuxerCodec = "aac" | "opus";
+
+export class VideoMuxer {
+	private output: Output | null = null;
+	private videoSource: EncodedVideoPacketSource | null = null;
+	private audioSource: EncodedAudioPacketSource | null = null;
+	private hasAudio: boolean;
+	private target: BufferTarget | null = null;
+	private config: ExportConfig;
+	private audioCodec: ExportAudioMuxerCodec;
+
+	constructor(config: ExportConfig, hasAudio = false, audioCodec: ExportAudioMuxerCodec = "aac") {
+		this.config = config;
+		this.hasAudio = hasAudio;
+		this.audioCodec = audioCodec;
+	}
+
+	async initialize(): Promise<void> {
+		// Create the buffer target
+		this.target = new BufferTarget();
+
+		this.output = new Output({
+			format: new Mp4OutputFormat({
+				fastStart: "in-memory",
+			}),
+			target: this.target,
+		});
+
+		// Create video source - codec will be deduced from metadata
+		this.videoSource = new EncodedVideoPacketSource("avc");
+		this.output.addVideoTrack(this.videoSource, {
+			frameRate: this.config.frameRate,
+		});
+
+		// Create audio source if needed
+		if (this.hasAudio) {
+			this.audioSource = new EncodedAudioPacketSource(this.audioCodec);
+			this.output.addAudioTrack(this.audioSource);
+		}
+
+		// Start the output to begin accepting media data
+		await this.output.start();
+	}
+
+	async addVideoChunk(chunk: EncodedVideoChunk, meta?: EncodedVideoChunkMetadata): Promise<void> {
+		if (!this.videoSource) {
+			throw new Error("Muxer not initialized");
+		}
+
+		// Convert WebCodecs chunk to Mediabunny packet
+		const packet = EncodedPacket.fromEncodedChunk(chunk);
+
+		// Add metadata with the first chunk
+		await this.videoSource.add(packet, meta);
+	}
+
+	async addAudioChunk(chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata): Promise<void> {
+		if (!this.audioSource) {
+			throw new Error("Audio not configured for this muxer");
+		}
+
+		// Convert WebCodecs chunk to Mediabunny packet
+		const packet = EncodedPacket.fromEncodedChunk(chunk);
+
+		// Add metadata with the first chunk
+		await this.audioSource.add(packet, meta);
+	}
+
+	async finalize(): Promise<Blob> {
+		if (!this.output || !this.target) {
+			throw new Error("Muxer not initialized");
+		}
+
+		await this.output.finalize();
+		const buffer = this.target.buffer;
+
+		if (!buffer) {
+			throw new Error("Failed to finalize output");
+		}
+
+		return new Blob([buffer], { type: "video/mp4" });
+	}
+}
diff --git a/src/lib/exporter/streamingDecoder.test.ts b/src/lib/exporter/streamingDecoder.test.ts
new file mode 100644
index 0000000..55b9123
--- /dev/null
+++ b/src/lib/exporter/streamingDecoder.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { shouldFailDecodeEndedEarly, validateDuration } from "./streamingDecoder";
+
+describe("validateDuration", () => {
+	it("returns scanned duration when container reports Infinity", () => {
+		expect(validateDuration(Infinity, 15.3)).toBe(15.3);
+	});
+
+	it("returns scanned duration when container reports 0", () => {
+		expect(validateDuration(0, 15.3)).toBe(15.3);
+	});
+
+	it("returns scanned duration when container reports NaN", () => {
+		expect(validateDuration(NaN, 15.3)).toBe(15.3);
+	});
+
+	it("returns scanned duration when container is inflated beyond threshold", () => {
+		expect(validateDuration(42, 15.3)).toBe(15.3);
+	});
+
+	it("returns container duration when values are close", () => {
+		expect(validateDuration(15.5, 15.3)).toBe(15.5);
+	});
+
+	it("returns container duration when scanned is slightly higher", () => {
+		// container < scanned (scanned overshoot from last frame duration)
+		expect(validateDuration(15.0, 15.3)).toBe(15.0);
+	});
+
+	it("returns scanned duration when container under-reports beyond threshold", () => {
+		expect(validateDuration(10, 15.3)).toBe(15.3);
+	});
+
+	it("returns container duration when scanned is zero (corrupted/empty file)", () => {
+		expect(validateDuration(10, 0)).toBe(10);
+	});
+
+	it("returns 0 when both container is NaN and scanned is zero", () => {
+		expect(validateDuration(NaN, 0)).toBe(0);
+	});
+});
+
+describe("shouldFailDecodeEndedEarly", () => {
+	it("does not fail once every segment has been satisfied", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: 5.33,
+				requiredEndSec: 6.498,
+				streamDurationSec: 5.33,
+			}),
+		).toBe(false);
+	});
+
+	it("fails when decode stops far before the required end", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: 5.33,
+				requiredEndSec: 10,
+				streamDurationSec: 5.33,
+			}),
+		).toBe(true);
+	});
+
+	it("fails when no frame could be decoded for a non-empty timeline", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: null,
+				requiredEndSec: 1,
+			}),
+		).toBe(true);
+	});
+
+	it("fails when the decoder has not reached the reported stream end", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: 4.9,
+				requiredEndSec: 6.498,
+				streamDurationSec: 5.33,
+			}),
+		).toBe(true);
+	});
+});
diff --git a/src/lib/exporter/streamingDecoder.ts b/src/lib/exporter/streamingDecoder.ts
new file mode 100644
index 0000000..e8093df
--- /dev/null
+++ b/src/lib/exporter/streamingDecoder.ts
@@ -0,0 +1,748 @@
+import { WebDemuxer } from "web-demuxer";
+import type { SpeedRegion, TrimRegion } from "@/components/video-editor/types";
+
+const SOURCE_LOAD_TIMEOUT_MS = 60_000;
+const EPSILON_SEC = 0.001;
+/**
+ * Build a full WebCodecs-compatible AV1 codec string from the AV1CodecConfigurationRecord.
+ * web-demuxer may return a bare "av01" when the WASM-side parser fails to read
+ * the extradata (e.g. raw OBU sequence header from WebM instead of ISOBMFF av1C box).
+ * This function parses the record if present, otherwise returns a safe default.
+ *
+ * @see https://aomediacodec.github.io/av1-isobmff/#av1codecconfigurationbox-section
+ */
+function buildAV1CodecString(description?: BufferSource): string {
+	const fallback = "av01.0.01M.08";
+
+	if (!description) return fallback;
+
+	const bytes =
+		description instanceof ArrayBuffer
+			? new Uint8Array(description)
+			: new Uint8Array(description.buffer, description.byteOffset, description.byteLength);
+
+	// AV1CodecConfigurationRecord layout (4+ bytes):
+	//   Byte 0: marker (1) | version (7)
+	//   Byte 1: seq_profile (3) | seq_level_idx_0 (5)
+	//   Byte 2: seq_tier_0 (1) | high_bitdepth (1) | twelve_bit (1) | ...
+	// The spec says version should be 1, but Chrome/Electron's MediaRecorder
+	// may write version 127 (0xFF first byte). We accept any version as long
+	// as the marker bit is set and the record is long enough.
+	if (bytes.length < 4) return fallback;
+	if (!(bytes[0] & 0x80)) return fallback; // marker bit must be 1
+
+	// Byte 1: seq_profile (3) | seq_level_idx_0 (5)
+	const profile = (bytes[1] >> 5) & 0x07;
+	const level = bytes[1] & 0x1f;
+
+	// Byte 2: seq_tier_0 (1) | high_bitdepth (1) | twelve_bit (1) | monochrome (1) | ...
+	const tier = (bytes[2] >> 7) & 0x01;
+	const highBitdepth = (bytes[2] >> 6) & 0x01;
+	const twelveBit = (bytes[2] >> 5) & 0x01;
+	let bitdepth = 8;
+	if (highBitdepth) bitdepth = twelveBit ? 12 : 10;
+
+	const tierChar = tier ? "H" : "M";
+	const levelStr = level.toString().padStart(2, "0");
+	const bitdepthStr = bitdepth.toString().padStart(2, "0");
+
+	return `av01.${profile}.${levelStr}${tierChar}.${bitdepthStr}`;
+}
+
+export interface DecodedVideoInfo {
+	width: number;
+	height: number;
+	duration: number; // seconds
+	streamDuration?: number; // seconds
+	frameRate: number;
+	codec: string;
+	hasAudio: boolean;
+	audioCodec?: string;
+}
+
+type EarlyDecodeEndCheck = {
+	cancelled: boolean;
+	lastDecodedFrameSec: number | null;
+	requiredEndSec: number;
+	streamDurationSec?: number;
+};
+
+const EARLY_DECODE_END_THRESHOLD_SEC = 1;
+const METADATA_TAIL_TOLERANCE_SEC = 2;
+const STREAM_DURATION_MATCH_TOLERANCE_SEC = 0.25;
+const DURATION_DIVERGENCE_THRESHOLD_SEC = 1.5;
+// Fallback upper bound for the packet scan when no reliable duration hint is
+// available. Explicit end is required (some containers are truncated without
+// one), but the hint-derived bound would cap the scan prematurely when
+// container/stream duration are missing or corrupt.
+const SCAN_UNBOUNDED_FALLBACK_SEC = 24 * 60 * 60;
+
+/**
+ * Validate container duration against actual packet timestamps.
+ *
+ * Chrome/Electron's MediaRecorder writes WebM containers with unreliable
+ * Duration fields (often Infinity, 0, or inflated) — especially on Linux.
+ * This function picks the most trustworthy duration value.
+ *
+ * @param containerDuration  Duration from the container-level metadata
+ * @param scannedDuration    Duration derived from actual packet timestamps (ground truth)
+ */
+export function validateDuration(containerDuration: number, scannedDuration: number): number {
+	if (scannedDuration <= 0) {
+		// Zero scanned duration means corrupted/empty file — fall back to container
+		// (downstream shouldFailDecodeEndedEarly will catch truly empty files)
+		return Number.isFinite(containerDuration) ? Math.max(containerDuration, 0) : 0;
+	}
+	if (!Number.isFinite(containerDuration) || containerDuration <= 0) {
+		return scannedDuration;
+	}
+	if (Math.abs(containerDuration - scannedDuration) > DURATION_DIVERGENCE_THRESHOLD_SEC) {
+		return scannedDuration;
+	}
+	return containerDuration;
+}
+
+export function shouldFailDecodeEndedEarly({
+	cancelled,
+	lastDecodedFrameSec,
+	requiredEndSec,
+	streamDurationSec,
+}: EarlyDecodeEndCheck): boolean {
+	if (cancelled || requiredEndSec <= 0) {
+		return false;
+	}
+
+	if (lastDecodedFrameSec === null) {
+		return true;
+	}
+
+	const decodeGapSec = requiredEndSec - lastDecodedFrameSec;
+	if (decodeGapSec <= EARLY_DECODE_END_THRESHOLD_SEC) {
+		return false;
+	}
+
+	if (typeof streamDurationSec !== "number" || !Number.isFinite(streamDurationSec)) {
+		return true;
+	}
+
+	const metadataTailSec = requiredEndSec - streamDurationSec;
+	const decodedNearStreamEnd =
+		Math.abs(lastDecodedFrameSec - streamDurationSec) <= STREAM_DURATION_MATCH_TOLERANCE_SEC;
+
+	const maxTailSec = Math.max(METADATA_TAIL_TOLERANCE_SEC, requiredEndSec * 0.01);
+	if (decodedNearStreamEnd && metadataTailSec > 0 && metadataTailSec <= maxTailSec) {
+		return false;
+	}
+
+	return true;
+}
+
+/** Caller must close the VideoFrame after use. */
+type OnFrameCallback = (
+	frame: VideoFrame,
+	exportTimestampUs: number,
+	sourceTimestampMs: number,
+) => Promise<void>;
+
+/**
+ * Decodes video frames via web-demuxer + VideoDecoder in a single forward pass.
+ * Way faster than seeking an HTMLVideoElement per frame.
+ *
+ * Frames in trimmed regions are decoded (needed for P/B-frame state) but discarded.
+ * Kept frames are resampled to the target frame rate in a streaming pass.
+ */
+export class StreamingVideoDecoder {
+	private demuxer: WebDemuxer | null = null;
+	private decoder: VideoDecoder | null = null;
+	private cancelled = false;
+	private metadata: DecodedVideoInfo | null = null;
+
+	private async loadSourceFile(videoUrl: string): Promise<{ file: File; blob: Blob }> {
+		const isRemoteUrl = /^(https?:|blob:|data:)/i.test(videoUrl);
+
+		if (!isRemoteUrl && window.electronAPI?.readBinaryFile) {
+			const result = await this.withTimeout(
+				window.electronAPI.readBinaryFile(videoUrl),
+				SOURCE_LOAD_TIMEOUT_MS,
+				"Timed out while loading the source video.",
+			);
+			if (!result.success || !result.data) {
+				throw new Error(result.message || result.error || "Failed to read source video");
+			}
+
+			const filename = (result.path || videoUrl).split(/[\\/]/).pop() || "video";
+			const blob = new Blob([result.data]);
+			return {
+				blob,
+				file: new File([blob], filename, { type: blob.type || "application/octet-stream" }),
+			};
+		}
+
+		const response = await this.withTimeout(
+			fetch(videoUrl),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while loading the source video.",
+		);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch source video: ${response.status} ${response.statusText}`);
+		}
+		const blob = await this.withTimeout(
+			response.blob(),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while reading the source video.",
+		);
+		const filename = videoUrl.split("/").pop() || "video";
+		return {
+			blob,
+			file: new File([blob], filename, { type: blob.type }),
+		};
+	}
+
+	async loadMetadata(videoUrl: string): Promise<DecodedVideoInfo> {
+		const { file } = await this.loadSourceFile(videoUrl);
+
+		// Relative URL so it resolves correctly in both dev (http) and packaged (file://) builds
+		const wasmUrl = new URL("./wasm/web-demuxer.wasm", window.location.href).href;
+		this.demuxer = new WebDemuxer({ wasmFilePath: wasmUrl });
+		await this.withTimeout(
+			this.demuxer.load(file),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while parsing the source video.",
+		);
+
+		const mediaInfo = await this.withTimeout(
+			this.demuxer.getMediaInfo(),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while reading video metadata.",
+		);
+		const videoStream = mediaInfo.streams.find((s) => s.codec_type_string === "video");
+
+		let frameRate = 60;
+		if (videoStream?.avg_frame_rate) {
+			const parts = videoStream.avg_frame_rate.split("/");
+			if (parts.length === 2) {
+				const num = parseInt(parts[0], 10);
+				const den = parseInt(parts[1], 10);
+				if (den > 0 && num > 0) frameRate = num / den;
+			}
+		}
+
+		const audioStream = mediaInfo.streams.find((s) => s.codec_type_string === "audio");
+
+		// Scan video packets to find the true content boundary.
+		// MediaRecorder (especially on Linux) writes unreliable container durations.
+		// Packet timestamps are ground truth — no decode needed, just timestamp reads.
+		// Pass explicit range because some containers are truncated without one.
+		// Sanitize because mediaInfo.duration can be NaN/Infinity (Chromium Linux bug),
+		// which would propagate into demuxer.read() as an invalid endpoint.
+		const containerDurationSec = Number.isFinite(mediaInfo.duration) ? mediaInfo.duration : 0;
+		const streamDurationSec =
+			typeof videoStream?.duration === "number" && Number.isFinite(videoStream.duration)
+				? videoStream.duration
+				: 0;
+		const hintedDurationSec = Math.max(containerDurationSec, streamDurationSec, 0);
+		const scanEndSec =
+			hintedDurationSec > 0 ? hintedDurationSec + 0.5 : SCAN_UNBOUNDED_FALLBACK_SEC;
+		let maxPacketEndUs = 0;
+		const scanReader = this.demuxer.read("video", 0, scanEndSec).getReader();
+		try {
+			while (true) {
+				const { done, value } = await scanReader.read();
+				if (done || !value) break;
+				const endUs = value.timestamp + (value.duration ?? 0);
+				if (endUs > maxPacketEndUs) maxPacketEndUs = endUs;
+			}
+		} finally {
+			try {
+				await scanReader.cancel();
+			} catch {
+				/* already closed */
+			}
+		}
+		const scannedDuration = maxPacketEndUs / 1_000_000;
+		const validatedDuration = validateDuration(mediaInfo.duration, scannedDuration);
+
+		this.metadata = {
+			width: videoStream?.width || 1920,
+			height: videoStream?.height || 1080,
+			duration: validatedDuration,
+			streamDuration:
+				typeof videoStream?.duration === "number" && Number.isFinite(videoStream.duration)
+					? videoStream.duration
+					: undefined,
+			frameRate,
+			codec: videoStream?.codec_string || "unknown",
+			hasAudio: !!audioStream,
+			audioCodec: audioStream?.codec_string,
+		};
+
+		return this.metadata;
+	}
+	/**
+	 * Decodes all video frames from the loaded source and invokes a callback for each.
+	 * Handles trimming and speed adjustments, and resamples to the target frame rate.
+	 * On Windows, early decode termination is tolerated to work around driver quirks.
+	 * @param targetFrameRate - Desired output frame rate.
+	 * @param trimRegions - Array of time regions to keep (others discarded).
+	 * @param speedRegions - Array of speed adjustments for specific time ranges.
+	 * @param onFrame - Async callback receiving each decoded VideoFrame.
+	 */
+	async decodeAll(
+		targetFrameRate: number,
+		trimRegions: TrimRegion[] | undefined,
+		speedRegions: SpeedRegion[] | undefined,
+		onFrame: OnFrameCallback,
+		onWarning?: (message: string) => void,
+	): Promise<void> {
+		if (!this.demuxer || !this.metadata) {
+			throw new Error("Must call loadMetadata() before decodeAll()");
+		}
+
+		const decoderConfig = await this.demuxer.getDecoderConfig("video");
+
+		console.log("[StreamingVideoDecoder] decoderConfig.codec:", decoderConfig.codec);
+		console.log("[StreamingVideoDecoder] decoderConfig.description:", decoderConfig.description);
+
+		// web-demuxer may return bare four-character code strings ("av01", "vp08",
+		// "vp09", "avc1") that WebCodecs rejects. Normalize them to the short or
+		// full parametrized forms that VideoDecoder accepts.
+		if (/^av01$/i.test(decoderConfig.codec)) {
+			decoderConfig.codec = buildAV1CodecString(
+				decoderConfig.description as BufferSource | undefined,
+			);
+		}
+
+		if (/^vp08$/i.test(decoderConfig.codec)) {
+			decoderConfig.codec = "vp8";
+		}
+		if (/^vp09$/i.test(decoderConfig.codec)) {
+			decoderConfig.codec = "vp9";
+		}
+
+		if (/^avc1$/i.test(decoderConfig.codec)) {
+			decoderConfig.codec = "avc1.640033";
+		}
+		if (/^h264$/i.test(decoderConfig.codec)) {
+			decoderConfig.codec = "avc1.640033";
+		}
+
+		const codec = decoderConfig.codec.toLowerCase();
+		const shouldPreferSoftwareDecode =
+			codec.includes("av01") ||
+			codec.includes("av1") ||
+			codec.includes("vp09") ||
+			codec.includes("vp9");
+		const segments = this.splitBySpeed(
+			this.computeSegments(this.metadata.duration, trimRegions),
+			speedRegions,
+		);
+		const requiredEndSec = segments[segments.length - 1]?.endSec ?? 0;
+
+		const segmentOutputFrameCounts = segments.map((segment) =>
+			Math.ceil(
+				((segment.endSec - segment.startSec - EPSILON_SEC) / segment.speed) * targetFrameRate,
+			),
+		);
+		const frameDurationUs = 1_000_000 / targetFrameRate;
+
+		// Async frame queue — decoder pushes, consumer pulls
+		const pendingFrames: VideoFrame[] = [];
+		let frameResolve: ((frame: VideoFrame | null) => void) | null = null;
+		let decodeError: Error | null = null;
+		let decodeDone = false;
+
+		this.decoder = new VideoDecoder({
+			output: (frame: VideoFrame) => {
+				if (frameResolve) {
+					const resolve = frameResolve;
+					frameResolve = null;
+					resolve(frame);
+				} else {
+					pendingFrames.push(frame);
+				}
+			},
+			error: (e: DOMException) => {
+				console.warn(
+					`[StreamingVideoDecoder] decoder error for codec "${decoderConfig.codec}":`,
+					e.message,
+				);
+				decodeError = new Error(`VideoDecoder error: ${e.message}`);
+				if (frameResolve) {
+					const resolve = frameResolve;
+					frameResolve = null;
+					resolve(null);
+				}
+			},
+		});
+		const preferredDecoderConfig = shouldPreferSoftwareDecode
+			? {
+					...decoderConfig,
+					hardwareAcceleration: "prefer-software" as const,
+				}
+			: decoderConfig;
+
+		try {
+			const support = await VideoDecoder.isConfigSupported(preferredDecoderConfig);
+			console.log(
+				`[StreamingVideoDecoder] isConfigSupported for "${preferredDecoderConfig.codec}":`,
+				support.supported,
+			);
+			if (!support.supported) {
+				throw new Error(`Unsupported codec: ${preferredDecoderConfig.codec}`);
+			}
+			this.decoder.configure(preferredDecoderConfig);
+		} catch (error) {
+			if (shouldPreferSoftwareDecode) {
+				this.decoder.configure(decoderConfig);
+			} else if (/^avc1/i.test(codec)) {
+				const fallback = { ...decoderConfig, codec: "avc1.640033" };
+				console.warn(
+					`[StreamingVideoDecoder] codec "${codec}" unsupported, ` +
+						`falling back to "${fallback.codec}"`,
+				);
+				this.decoder.configure(fallback);
+			} else {
+				throw error;
+			}
+		}
+
+		const getNextFrame = (): Promise<VideoFrame | null> => {
+			if (decodeError) throw decodeError;
+			if (pendingFrames.length > 0) return Promise.resolve(pendingFrames.shift()!);
+			if (decodeDone) return Promise.resolve(null);
+			return new Promise((resolve) => {
+				frameResolve = resolve;
+			});
+		};
+
+		// One forward stream through the whole file.
+		// Pass explicit range because some containers are truncated when no end is provided.
+		const readEndSec = this.metadata.duration + 0.5;
+		const reader = this.demuxer.read("video", 0, readEndSec).getReader();
+
+		// Feed chunks to decoder in background with backpressure
+		const feedPromise = (async () => {
+			try {
+				while (!this.cancelled) {
+					const { done, value: chunk } = await reader.read();
+					if (done || !chunk) break;
+
+					// Backpressure on both decode queue and decoded frame backlog.
+					while (
+						(this.decoder!.decodeQueueSize > 10 || pendingFrames.length > 24) &&
+						!this.cancelled
+					) {
+						await new Promise((resolve) => setTimeout(resolve, 1));
+					}
+					if (this.cancelled) break;
+
+					this.decoder!.decode(chunk);
+				}
+
+				if (!this.cancelled && this.decoder!.state === "configured") {
+					await this.decoder!.flush();
+				}
+			} catch (e) {
+				decodeError = e instanceof Error ? e : new Error(String(e));
+			} finally {
+				decodeDone = true;
+				if (frameResolve) {
+					const resolve = frameResolve;
+					frameResolve = null;
+					resolve(null);
+				}
+			}
+		})();
+
+		// Route decoded frames into segments by timestamp, then deliver with VFR→CFR resampling
+		let segmentIdx = 0;
+		let segmentFrameIndex = 0;
+		let exportFrameIndex = 0;
+		let lastDecodedFrameSec: number | null = null;
+		let heldFrame: VideoFrame | null = null;
+		let heldFrameSec = 0;
+
+		const emitHeldFrameForTarget = async (segment: {
+			startSec: number;
+			endSec: number;
+			speed: number;
+		}) => {
+			if (!heldFrame) return false;
+			const segmentFrameCount = segmentOutputFrameCounts[segmentIdx];
+			if (segmentFrameIndex >= segmentFrameCount) return false;
+
+			const sourceTimeSec =
+				segment.startSec + (segmentFrameIndex / targetFrameRate) * segment.speed;
+			if (sourceTimeSec >= segment.endSec - EPSILON_SEC) return false;
+
+			const clone = new VideoFrame(heldFrame, { timestamp: heldFrame.timestamp });
+			await onFrame(clone, exportFrameIndex * frameDurationUs, sourceTimeSec * 1000);
+			segmentFrameIndex++;
+			exportFrameIndex++;
+			return true;
+		};
+
+		while (!this.cancelled && segmentIdx < segments.length) {
+			const frame = await getNextFrame();
+			if (!frame) break;
+
+			const frameTimeSec = frame.timestamp / 1_000_000;
+			lastDecodedFrameSec = frameTimeSec;
+
+			// Finalize completed segments before handling this frame.
+			while (
+				segmentIdx < segments.length &&
+				frameTimeSec >= segments[segmentIdx].endSec - EPSILON_SEC
+			) {
+				const segment = segments[segmentIdx];
+				while (!this.cancelled && (await emitHeldFrameForTarget(segment))) {
+					// Keep emitting remaining output frames for this segment from the last known frame.
+				}
+
+				segmentIdx++;
+				segmentFrameIndex = 0;
+				if (
+					heldFrame &&
+					segmentIdx < segments.length &&
+					heldFrameSec < segments[segmentIdx].startSec - EPSILON_SEC
+				) {
+					heldFrame.close();
+					heldFrame = null;
+				}
+			}
+
+			if (segmentIdx >= segments.length) {
+				frame.close();
+				continue;
+			}
+
+			const currentSegment = segments[segmentIdx];
+
+			// Before current segment (trimmed region or pre-roll).
+			if (frameTimeSec < currentSegment.startSec - EPSILON_SEC) {
+				frame.close();
+				continue;
+			}
+
+			if (!heldFrame) {
+				heldFrame = frame;
+				heldFrameSec = frameTimeSec;
+				continue;
+			}
+
+			// Any target timestamp before this midpoint is closer to heldFrame than current frame.
+			const handoffBoundarySec = (heldFrameSec + frameTimeSec) / 2;
+			while (!this.cancelled) {
+				const segmentFrameCount = segmentOutputFrameCounts[segmentIdx];
+				if (segmentFrameIndex >= segmentFrameCount) {
+					break;
+				}
+
+				const sourceTimeSec =
+					currentSegment.startSec + (segmentFrameIndex / targetFrameRate) * currentSegment.speed;
+				if (sourceTimeSec >= currentSegment.endSec - EPSILON_SEC) {
+					break;
+				}
+				if (sourceTimeSec > handoffBoundarySec) {
+					break;
+				}
+
+				const clone = new VideoFrame(heldFrame, { timestamp: heldFrame.timestamp });
+				await onFrame(clone, exportFrameIndex * frameDurationUs, sourceTimeSec * 1000);
+				segmentFrameIndex++;
+				exportFrameIndex++;
+			}
+
+			heldFrame.close();
+			heldFrame = frame;
+			heldFrameSec = frameTimeSec;
+		}
+
+		// Flush remaining output frames for the last decoded frame.
+		if (heldFrame && segmentIdx < segments.length) {
+			while (!this.cancelled && segmentIdx < segments.length) {
+				const segment = segments[segmentIdx];
+				if (heldFrameSec < segment.startSec - EPSILON_SEC) {
+					break;
+				}
+
+				while (!this.cancelled && (await emitHeldFrameForTarget(segment))) {
+					// Keep emitting output frames for the active segment.
+				}
+
+				segmentIdx++;
+				segmentFrameIndex = 0;
+				if (
+					segmentIdx < segments.length &&
+					heldFrameSec < segments[segmentIdx].startSec - EPSILON_SEC
+				) {
+					break;
+				}
+			}
+			heldFrame.close();
+			heldFrame = null;
+		}
+
+		// Drain leftover decoded frames
+		while (!decodeDone) {
+			const frame = await getNextFrame();
+			if (!frame) break;
+			frame.close();
+		}
+
+		try {
+			reader.cancel();
+		} catch {
+			/* already closed */
+		}
+		await feedPromise;
+		for (const f of pendingFrames) f.close();
+		pendingFrames.length = 0;
+
+		if (this.decoder?.state === "configured") {
+			this.decoder.close();
+		}
+		this.decoder = null;
+
+		if (
+			shouldFailDecodeEndedEarly({
+				cancelled: this.cancelled,
+				lastDecodedFrameSec,
+				requiredEndSec,
+				streamDurationSec: this.metadata.streamDuration,
+			})
+		) {
+			const decodedAtLabel =
+				lastDecodedFrameSec === null ? "no decoded frame" : `${lastDecodedFrameSec.toFixed(3)}s`;
+			const message = `Decode ended early at ${decodedAtLabel} (needed ${requiredEndSec.toFixed(3)}s) – export may be slightly shorter than expected.`;
+			console.warn(`[StreamingVideoDecoder] ${message}`);
+			onWarning?.(message);
+		}
+	}
+
+	private computeSegments(
+		totalDuration: number,
+		trimRegions?: TrimRegion[],
+	): Array<{ startSec: number; endSec: number }> {
+		if (!trimRegions || trimRegions.length === 0) {
+			return [{ startSec: 0, endSec: totalDuration }];
+		}
+
+		const sorted = [...trimRegions].sort((a, b) => a.startMs - b.startMs);
+		const segments: Array<{ startSec: number; endSec: number }> = [];
+		let cursor = 0;
+
+		for (const trim of sorted) {
+			const trimStart = trim.startMs / 1000;
+			const trimEnd = trim.endMs / 1000;
+			if (cursor < trimStart) {
+				segments.push({ startSec: cursor, endSec: trimStart });
+			}
+			cursor = trimEnd;
+		}
+
+		if (cursor < totalDuration) {
+			segments.push({ startSec: cursor, endSec: totalDuration });
+		}
+
+		return segments;
+	}
+
+	getExportMetrics(
+		targetFrameRate: number,
+		trimRegions?: TrimRegion[],
+		speedRegions?: SpeedRegion[],
+	): { effectiveDuration: number; totalFrames: number } {
+		if (!this.metadata) throw new Error("Must call loadMetadata() first");
+		const trimSegments = this.computeSegments(this.metadata.duration, trimRegions);
+		const segments = this.splitBySpeed(trimSegments, speedRegions);
+		return {
+			effectiveDuration: segments.reduce(
+				(sum, seg) => sum + (seg.endSec - seg.startSec) / seg.speed,
+				0,
+			),
+			totalFrames: segments.reduce((sum, seg) => {
+				const segDur = seg.endSec - seg.startSec - EPSILON_SEC;
+				return sum + Math.max(0, Math.ceil((segDur / seg.speed) * targetFrameRate));
+			}, 0),
+		};
+	}
+
+	private splitBySpeed(
+		segments: Array<{ startSec: number; endSec: number }>,
+		speedRegions?: SpeedRegion[],
+	): Array<{ startSec: number; endSec: number; speed: number }> {
+		if (!speedRegions || speedRegions.length === 0)
+			return segments.map((s) => ({ ...s, speed: 1 }));
+
+		const result: Array<{ startSec: number; endSec: number; speed: number }> = [];
+		for (const segment of segments) {
+			const overlapping = speedRegions
+				.filter((sr) => sr.startMs / 1000 < segment.endSec && sr.endMs / 1000 > segment.startSec)
+				.sort((a, b) => a.startMs - b.startMs);
+
+			if (overlapping.length === 0) {
+				result.push({ ...segment, speed: 1 });
+				continue;
+			}
+
+			let cursor = segment.startSec;
+			for (const sr of overlapping) {
+				const srStart = Math.max(sr.startMs / 1000, segment.startSec);
+				const srEnd = Math.min(sr.endMs / 1000, segment.endSec);
+				if (cursor < srStart) result.push({ startSec: cursor, endSec: srStart, speed: 1 });
+				result.push({ startSec: srStart, endSec: srEnd, speed: sr.speed });
+				cursor = srEnd;
+			}
+			if (cursor < segment.endSec)
+				result.push({ startSec: cursor, endSec: segment.endSec, speed: 1 });
+		}
+		return result.filter((s) => s.endSec - s.startSec > 0.0001);
+	}
+
+	getDemuxer(): WebDemuxer | null {
+		return this.demuxer;
+	}
+
+	cancel(): void {
+		this.cancelled = true;
+	}
+
+	destroy(): void {
+		this.cancelled = true;
+
+		if (this.decoder) {
+			try {
+				if (this.decoder.state === "configured") this.decoder.close();
+			} catch {
+				/* ignore */
+			}
+			this.decoder = null;
+		}
+
+		if (this.demuxer) {
+			try {
+				this.demuxer.destroy();
+			} catch {
+				/* ignore */
+			}
+			this.demuxer = null;
+		}
+	}
+
+	private withTimeout<T>(promise: Promise<T>, timeoutMs: number, message: string): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			const timer = window.setTimeout(() => reject(new Error(message)), timeoutMs);
+			promise.then(
+				(value) => {
+					window.clearTimeout(timer);
+					resolve(value);
+				},
+				(error) => {
+					window.clearTimeout(timer);
+					reject(error);
+				},
+			);
+		});
+	}
+}
diff --git a/src/lib/exporter/threeDPass.ts b/src/lib/exporter/threeDPass.ts
new file mode 100644
index 0000000..5733bd0
--- /dev/null
+++ b/src/lib/exporter/threeDPass.ts
@@ -0,0 +1,356 @@
+import type { Rotation3D } from "@/components/video-editor/types";
+import {
+	computeRotation3DContainScale,
+	isRotation3DIdentity,
+	rotation3DPerspective,
+} from "@/components/video-editor/types";
+
+// CSS uses +y down, WebGL clip space uses +y up. We do all rotation math in CSS
+// convention (top-left origin, +y down) to match the preview, then flip
+// gl_Position.y at the end so WebGL's clip space lands the input's top edge at
+// the top of the output viewport.
+const VERTEX_SHADER = `#version 300 es
+in vec2 aPos;
+in vec2 aUV;
+out vec2 vUV;
+uniform mat4 uMvp;
+uniform vec2 uSize;
+void main() {
+	vUV = aUV;
+	vec2 px = (aPos - 0.5) * uSize;
+	vec4 clip = uMvp * vec4(px, 0.0, 1.0);
+	clip.y = -clip.y;
+	gl_Position = clip;
+}
+`;
+
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUV;
+out vec4 fragColor;
+uniform sampler2D uTex;
+void main() {
+	fragColor = texture(uTex, vUV);
+}
+`;
+
+function deg2rad(deg: number): number {
+	return (deg * Math.PI) / 180;
+}
+
+function multiplyMat4(a: Float32Array, b: Float32Array): Float32Array {
+	const out = new Float32Array(16);
+	for (let i = 0; i < 4; i += 1) {
+		for (let j = 0; j < 4; j += 1) {
+			let s = 0;
+			for (let k = 0; k < 4; k += 1) {
+				s += a[k * 4 + j] * b[i * 4 + k];
+			}
+			out[i * 4 + j] = s;
+		}
+	}
+	return out;
+}
+
+function rotationXMat(rad: number): Float32Array {
+	const c = Math.cos(rad);
+	const s = Math.sin(rad);
+	return new Float32Array([1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1]);
+}
+
+function rotationYMat(rad: number): Float32Array {
+	const c = Math.cos(rad);
+	const s = Math.sin(rad);
+	return new Float32Array([c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1]);
+}
+
+function rotationZMat(rad: number): Float32Array {
+	const c = Math.cos(rad);
+	const s = Math.sin(rad);
+	return new Float32Array([c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+}
+
+function translationMat(x: number, y: number, z: number): Float32Array {
+	return new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1]);
+}
+
+function perspectiveMat(fovY: number, aspect: number, near: number, far: number): Float32Array {
+	const f = 1 / Math.tan(fovY / 2);
+	const nf = 1 / (near - far);
+	return new Float32Array([
+		f / aspect,
+		0,
+		0,
+		0,
+		0,
+		f,
+		0,
+		0,
+		0,
+		0,
+		(far + near) * nf,
+		-1,
+		0,
+		0,
+		2 * far * near * nf,
+		0,
+	]);
+}
+
+function scaleMat(s: number): Float32Array {
+	return new Float32Array([s, 0, 0, 0, 0, s, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+}
+
+export function buildMvpMatrix(rot: Rotation3D, w: number, h: number): Float32Array {
+	const rx = rotationXMat(deg2rad(rot.rotationX));
+	const ry = rotationYMat(deg2rad(rot.rotationY));
+	const rz = rotationZMat(deg2rad(rot.rotationZ));
+	const rotMat = multiplyMat4(rz, multiplyMat4(ry, rx));
+
+	const perspective = rotation3DPerspective(w, h);
+	const containScale = computeRotation3DContainScale(rot, w, h, perspective);
+	const rotScaled = multiplyMat4(rotMat, scaleMat(containScale));
+
+	const d = perspective;
+	const fovY = 2 * Math.atan2(h / 2, d);
+	const proj = perspectiveMat(fovY, w / h, 0.1, d * 4 + Math.max(w, h));
+	const view = translationMat(0, 0, -d);
+	return multiplyMat4(proj, multiplyMat4(view, rotScaled));
+}
+
+function compileShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader {
+	const shader = gl.createShader(type);
+	if (!shader) throw new Error("Failed to create shader");
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		const info = gl.getShaderInfoLog(shader);
+		gl.deleteShader(shader);
+		throw new Error(`Shader compile failed: ${info}`);
+	}
+	return shader;
+}
+
+function createProgram(gl: WebGL2RenderingContext): WebGLProgram {
+	const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+	const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+	const program = gl.createProgram();
+	if (!program) throw new Error("Failed to create program");
+	gl.attachShader(program, vs);
+	gl.attachShader(program, fs);
+	gl.linkProgram(program);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		const info = gl.getProgramInfoLog(program);
+		gl.deleteProgram(program);
+		throw new Error(`Program link failed: ${info}`);
+	}
+	gl.deleteShader(vs);
+	gl.deleteShader(fs);
+	return program;
+}
+
+export interface ThreeDPass {
+	apply(srcCanvas: HTMLCanvasElement | OffscreenCanvas, rot: Rotation3D): HTMLCanvasElement;
+	/**
+	 * Reads back the most recent apply() result into a Uint8ClampedArray suitable
+	 * for ImageData. Use this on platforms where drawImage(webglCanvas) is unreliable.
+	 */
+	readPixels(): Uint8ClampedArray;
+	resize(width: number, height: number): void;
+	destroy(): void;
+}
+
+export function createThreeDPass(width: number, height: number): ThreeDPass {
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const gl = canvas.getContext("webgl2", { premultipliedAlpha: true, alpha: true });
+	if (!gl) throw new Error("WebGL2 not available for 3D pass");
+
+	const program = createProgram(gl);
+	// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API, not a React hook
+	gl.useProgram(program);
+
+	const aPos = gl.getAttribLocation(program, "aPos");
+	const aUV = gl.getAttribLocation(program, "aUV");
+	const uMvp = gl.getUniformLocation(program, "uMvp");
+	const uSize = gl.getUniformLocation(program, "uSize");
+	const uTex = gl.getUniformLocation(program, "uTex");
+
+	const vao = gl.createVertexArray();
+	gl.bindVertexArray(vao);
+
+	// Quad: two triangles sharing UVs consistently per corner.
+	// pos.y ranges 0 (top of input) → 1 (bottom of input) following CSS convention.
+	// UV.y is inverted (1 - pos.y) so that with UNPACK_FLIP_Y_WEBGL the texture
+	// sample at the top of the input lands at the top of the rendered quad.
+	//   TL: pos(0,0) uv(0,1)   TR: pos(1,0) uv(1,1)
+	//   BL: pos(0,1) uv(0,0)   BR: pos(1,1) uv(1,0)
+	const verts = new Float32Array([
+		// aPos.x, aPos.y, aUV.x, aUV.y
+		0,
+		0,
+		0,
+		1, // TL
+		1,
+		0,
+		1,
+		1, // TR
+		0,
+		1,
+		0,
+		0, // BL
+		0,
+		1,
+		0,
+		0, // BL
+		1,
+		0,
+		1,
+		1, // TR (was 1,0,1,0 — broken)
+		1,
+		1,
+		1,
+		0, // BR
+	]);
+	const vbo = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+	gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
+	gl.enableVertexAttribArray(aPos);
+	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+	gl.enableVertexAttribArray(aUV);
+	gl.vertexAttribPointer(aUV, 2, gl.FLOAT, false, 16, 8);
+
+	const texture = gl.createTexture();
+	gl.activeTexture(gl.TEXTURE0);
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	// Plain bilinear, NO mipmaps. Mipmaps pre-blur the texture for downsampling, but
+	// at our moderate rotation angles (≤22°) the receding edge would still pick a
+	// smaller mipmap level, which softens fine details — specifically the few-pixel
+	// rounded-corner anti-alias ramp and the shadow's Gaussian falloff. The result
+	// is "rounding looks like a hard corner / shadow looks grimy". Sampling level 0
+	// directly preserves the source crispness.
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+	// Anisotropic filtering still helps without mipmaps: at oblique viewing angles
+	// it samples multiple texels along the gradient direction at level 0, recovering
+	// detail that plain bilinear would lose. Cap to the device max (16× typical).
+	const anisoExt =
+		gl.getExtension("EXT_texture_filter_anisotropic") ||
+		gl.getExtension("MOZ_EXT_texture_filter_anisotropic") ||
+		gl.getExtension("WEBKIT_EXT_texture_filter_anisotropic");
+	if (anisoExt) {
+		const maxAniso = gl.getParameter(anisoExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT) as number;
+		gl.texParameterf(gl.TEXTURE_2D, anisoExt.TEXTURE_MAX_ANISOTROPY_EXT, Math.min(16, maxAniso));
+	}
+	gl.uniform1i(uTex, 0);
+
+	let currentSize = { width, height };
+
+	const apply = (
+		srcCanvas: HTMLCanvasElement | OffscreenCanvas,
+		rot: Rotation3D,
+	): HTMLCanvasElement => {
+		gl.viewport(0, 0, currentSize.width, currentSize.height);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		gl.useProgram(program);
+		gl.bindVertexArray(vao);
+
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+		// CRITICAL: premultiply on upload. The source 2D canvas stores non-premultiplied
+		// RGBA (alpha=0 areas have RGB=0). Bilinear filtering between an inside-the-shape
+		// texel (alpha=1, RGB=color) and an outside texel (alpha=0, RGB=0) in
+		// non-premultiplied space yields (color/2, alpha=0.5), which the
+		// premultipliedAlpha:true canvas then interprets as half-strength color — visible
+		// as a dark halo around rounded corners and softened/grimy shadows. Premultiplying
+		// at upload time makes the bilinear math operate in linear-light premultiplied
+		// space, which is exactly the math used for compositing. Edges and shadows then
+		// reproduce the source crisply.
+		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+		gl.texImage2D(
+			gl.TEXTURE_2D,
+			0,
+			gl.RGBA,
+			gl.RGBA,
+			gl.UNSIGNED_BYTE,
+			srcCanvas as TexImageSource,
+		);
+
+		const mvp = isRotation3DIdentity(rot)
+			? buildMvpMatrix(
+					{ rotationX: 0, rotationY: 0, rotationZ: 0 },
+					currentSize.width,
+					currentSize.height,
+				)
+			: buildMvpMatrix(rot, currentSize.width, currentSize.height);
+		gl.uniformMatrix4fv(uMvp, false, mvp);
+		gl.uniform2f(uSize, currentSize.width, currentSize.height);
+
+		gl.drawArrays(gl.TRIANGLES, 0, 6);
+		return canvas;
+	};
+
+	const resize = (w: number, h: number) => {
+		if (w === currentSize.width && h === currentSize.height) return;
+		canvas.width = w;
+		canvas.height = h;
+		currentSize = { width: w, height: h };
+	};
+
+	const readPixels = (): Uint8ClampedArray => {
+		const w = currentSize.width;
+		const h = currentSize.height;
+		const buf = new Uint8Array(w * h * 4);
+		gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, buf);
+		// gl.readPixels is bottom-up; flip to top-down for ImageData. We also need
+		// to un-premultiply the alpha here: the framebuffer holds premultiplied RGBA
+		// (we set UNPACK_PREMULTIPLY_ALPHA_WEBGL=true on upload), but ImageData /
+		// putImageData expect non-premultiplied. Without this divide, semi-transparent
+		// pixels get interpreted as darker than they should be.
+		const rowSize = w * 4;
+		const out = new Uint8ClampedArray(buf.length);
+		for (let row = 0; row < h; row += 1) {
+			const src = (h - 1 - row) * rowSize;
+			const dst = row * rowSize;
+			for (let col = 0; col < rowSize; col += 4) {
+				const r = buf[src + col];
+				const g = buf[src + col + 1];
+				const b = buf[src + col + 2];
+				const a = buf[src + col + 3];
+				if (a === 0) {
+					out[dst + col] = 0;
+					out[dst + col + 1] = 0;
+					out[dst + col + 2] = 0;
+					out[dst + col + 3] = 0;
+				} else if (a === 255) {
+					out[dst + col] = r;
+					out[dst + col + 1] = g;
+					out[dst + col + 2] = b;
+					out[dst + col + 3] = 255;
+				} else {
+					const inv = 255 / a;
+					out[dst + col] = Math.min(255, Math.round(r * inv));
+					out[dst + col + 1] = Math.min(255, Math.round(g * inv));
+					out[dst + col + 2] = Math.min(255, Math.round(b * inv));
+					out[dst + col + 3] = a;
+				}
+			}
+		}
+		return out;
+	};
+
+	const destroy = () => {
+		gl.deleteProgram(program);
+		gl.deleteBuffer(vbo);
+		gl.deleteVertexArray(vao);
+		gl.deleteTexture(texture);
+	};
+
+	return { apply, readPixels, resize, destroy };
+}
diff --git a/src/lib/exporter/timestampedVideoFrameQueue.test.ts b/src/lib/exporter/timestampedVideoFrameQueue.test.ts
new file mode 100644
index 0000000..9645c98
--- /dev/null
+++ b/src/lib/exporter/timestampedVideoFrameQueue.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, it, vi } from "vitest";
+import { TimestampedVideoFrameQueue } from "./timestampedVideoFrameQueue";
+
+class MockVideoFrame {
+	timestamp: number;
+	closed = false;
+
+	constructor(source: MockVideoFrame | number) {
+		this.timestamp = typeof source === "number" ? source : source.timestamp;
+	}
+
+	close() {
+		this.closed = true;
+	}
+}
+
+function restoreVideoFrame(originalVideoFrame: typeof globalThis.VideoFrame | undefined) {
+	if (originalVideoFrame === undefined) {
+		delete (globalThis as { VideoFrame?: typeof globalThis.VideoFrame }).VideoFrame;
+		return;
+	}
+
+	vi.stubGlobal("VideoFrame", originalVideoFrame);
+}
+
+describe("TimestampedVideoFrameQueue", () => {
+	it("samples the latest webcam frame at or before the requested source timestamp", async () => {
+		const originalVideoFrame = globalThis.VideoFrame;
+		vi.stubGlobal("VideoFrame", MockVideoFrame);
+		try {
+			const queue = new TimestampedVideoFrameQueue();
+			const frame0 = new MockVideoFrame(0) as unknown as VideoFrame;
+			const frame33 = new MockVideoFrame(33_000) as unknown as VideoFrame;
+			const frame66 = new MockVideoFrame(66_000) as unknown as VideoFrame;
+
+			queue.enqueue(frame0, 0);
+			queue.enqueue(frame33, 33);
+			queue.enqueue(frame66, 66);
+			queue.close();
+
+			const sampled0 = await queue.frameAt(0);
+			const sampled20 = await queue.frameAt(20);
+			const sampled40 = await queue.frameAt(40);
+			const sampled80 = await queue.frameAt(80);
+
+			expect(sampled0?.timestamp).toBe(0);
+			expect(sampled20?.timestamp).toBe(0);
+			expect(sampled40?.timestamp).toBe(33_000);
+			expect(sampled80?.timestamp).toBe(66_000);
+
+			sampled0?.close();
+			sampled20?.close();
+			sampled40?.close();
+			sampled80?.close();
+			queue.destroy();
+		} finally {
+			restoreVideoFrame(originalVideoFrame);
+		}
+	});
+
+	it("waits for a newer frame before falling back to the held frame while open", async () => {
+		const originalVideoFrame = globalThis.VideoFrame;
+		vi.stubGlobal("VideoFrame", MockVideoFrame);
+		try {
+			const queue = new TimestampedVideoFrameQueue();
+			const frame0 = new MockVideoFrame(0) as unknown as VideoFrame;
+			const frame33 = new MockVideoFrame(33_000) as unknown as VideoFrame;
+
+			queue.enqueue(frame0, 0);
+			const sampled0 = await queue.frameAt(0);
+			let resolved = false;
+			const pending = queue.frameAt(33).then((frame) => {
+				resolved = true;
+				return frame;
+			});
+
+			await Promise.resolve();
+			expect(resolved).toBe(false);
+
+			queue.enqueue(frame33, 33);
+			const sampled33 = await pending;
+
+			expect(sampled0?.timestamp).toBe(0);
+			expect(sampled33?.timestamp).toBe(33_000);
+
+			sampled0?.close();
+			sampled33?.close();
+			queue.destroy();
+		} finally {
+			restoreVideoFrame(originalVideoFrame);
+		}
+	});
+});
diff --git a/src/lib/exporter/timestampedVideoFrameQueue.ts b/src/lib/exporter/timestampedVideoFrameQueue.ts
new file mode 100644
index 0000000..86c0fe9
--- /dev/null
+++ b/src/lib/exporter/timestampedVideoFrameQueue.ts
@@ -0,0 +1,110 @@
+type TimestampedVideoFrame = {
+	frame: VideoFrame;
+	sourceTimestampMs: number;
+};
+
+type PendingConsumer = {
+	resolve: () => void;
+	reject: (error: Error) => void;
+};
+
+const TIMESTAMP_EPSILON_MS = 0.5;
+
+export class TimestampedVideoFrameQueue {
+	private frames: TimestampedVideoFrame[] = [];
+	private consumers: PendingConsumer[] = [];
+	private error: Error | null = null;
+	private closed = false;
+	private heldFrame: TimestampedVideoFrame | null = null;
+
+	get length() {
+		return this.frames.length;
+	}
+
+	enqueue(frame: VideoFrame, sourceTimestampMs: number) {
+		if (this.closed) {
+			frame.close();
+			return;
+		}
+
+		this.frames.push({ frame, sourceTimestampMs });
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.resolve();
+		}
+	}
+
+	fail(error: Error) {
+		this.error = error;
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.reject(error);
+		}
+		this.closeOwnedFrames();
+	}
+
+	close() {
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.resolve();
+		}
+	}
+
+	async frameAt(sourceTimestampMs: number): Promise<VideoFrame | null> {
+		for (;;) {
+			if (this.error) {
+				throw this.error;
+			}
+
+			const next = this.frames[0] ?? null;
+			if (next && next.sourceTimestampMs <= sourceTimestampMs + TIMESTAMP_EPSILON_MS) {
+				this.replaceHeldFrame(this.frames.shift() ?? null);
+				continue;
+			}
+
+			if (
+				this.heldFrame &&
+				(next ||
+					this.closed ||
+					this.heldFrame.sourceTimestampMs >= sourceTimestampMs - TIMESTAMP_EPSILON_MS)
+			) {
+				return new VideoFrame(this.heldFrame.frame, {
+					timestamp: this.heldFrame.frame.timestamp,
+				});
+			}
+
+			if (next || this.closed) {
+				return null;
+			}
+
+			await new Promise<void>((resolve, reject) => {
+				this.consumers.push({ resolve, reject });
+			});
+		}
+	}
+
+	destroy() {
+		this.close();
+		this.closeOwnedFrames();
+	}
+
+	private replaceHeldFrame(frame: TimestampedVideoFrame | null) {
+		if (this.heldFrame) {
+			this.heldFrame.frame.close();
+		}
+		this.heldFrame = frame;
+	}
+
+	private closeOwnedFrames() {
+		if (this.heldFrame) {
+			this.heldFrame.frame.close();
+			this.heldFrame = null;
+		}
+		for (const item of this.frames) {
+			item.frame.close();
+		}
+		this.frames = [];
+	}
+}
diff --git a/src/lib/exporter/types.ts b/src/lib/exporter/types.ts
new file mode 100644
index 0000000..3873341
--- /dev/null
+++ b/src/lib/exporter/types.ts
@@ -0,0 +1,74 @@
+export interface ExportConfig {
+	width: number;
+	height: number;
+	frameRate: number;
+	bitrate: number;
+	codec?: string;
+}
+
+export interface ExportProgress {
+	currentFrame: number;
+	totalFrames: number;
+	percentage: number;
+	estimatedTimeRemaining: number; // in seconds
+	phase?: "extracting" | "finalizing"; // Phase of export
+	renderProgress?: number; // 0-100, progress of GIF rendering phase
+}
+
+export interface ExportResult {
+	success: boolean;
+	blob?: Blob;
+	error?: string;
+	warnings?: string[];
+}
+
+export interface VideoFrameData {
+	frame: VideoFrame;
+	timestamp: number; // in microseconds
+	duration: number; // in microseconds
+}
+
+export type ExportQuality = "medium" | "good" | "source";
+
+// GIF Export Types
+export type ExportFormat = "mp4" | "gif";
+
+export type GifFrameRate = 15 | 20 | 25 | 30;
+
+export type GifSizePreset = "medium" | "large" | "original";
+
+export interface GifExportConfig {
+	frameRate: GifFrameRate;
+	loop: boolean;
+	sizePreset: GifSizePreset;
+	width: number;
+	height: number;
+}
+
+export interface ExportSettings {
+	format: ExportFormat;
+	// MP4 settings
+	quality?: ExportQuality;
+	// GIF settings
+	gifConfig?: GifExportConfig;
+}
+
+export const GIF_SIZE_PRESETS: Record<GifSizePreset, { maxHeight: number; label: string }> = {
+	medium: { maxHeight: 720, label: "Medium (720p)" },
+	large: { maxHeight: 1080, label: "Large (1080p)" },
+	original: { maxHeight: Infinity, label: "Original" },
+};
+
+export const GIF_FRAME_RATES: { value: GifFrameRate; label: string }[] = [
+	{ value: 15, label: "15 FPS - Balanced" },
+	{ value: 20, label: "20 FPS - Smooth" },
+	{ value: 25, label: "25 FPS - Very smooth" },
+	{ value: 30, label: "30 FPS - Maximum" },
+];
+
+// Valid frame rates for validation
+export const VALID_GIF_FRAME_RATES: readonly GifFrameRate[] = [15, 20, 25, 30] as const;
+
+export function isValidGifFrameRate(rate: number): rate is GifFrameRate {
+	return VALID_GIF_FRAME_RATES.includes(rate as GifFrameRate);
+}
diff --git a/src/lib/exporter/videoDecoder.ts b/src/lib/exporter/videoDecoder.ts
new file mode 100644
index 0000000..4ed1157
--- /dev/null
+++ b/src/lib/exporter/videoDecoder.ts
@@ -0,0 +1,57 @@
+export interface DecodedVideoInfo {
+	width: number;
+	height: number;
+	duration: number; // in seconds
+	frameRate: number;
+	codec: string;
+}
+
+export class VideoFileDecoder {
+	private info: DecodedVideoInfo | null = null;
+	private videoElement: HTMLVideoElement | null = null;
+
+	async loadVideo(videoUrl: string): Promise<DecodedVideoInfo> {
+		this.videoElement = document.createElement("video");
+		this.videoElement.src = videoUrl;
+		this.videoElement.preload = "metadata";
+
+		return new Promise((resolve, reject) => {
+			this.videoElement!.addEventListener("loadedmetadata", () => {
+				const video = this.videoElement!;
+
+				this.info = {
+					width: video.videoWidth,
+					height: video.videoHeight,
+					duration: video.duration,
+					frameRate: 60,
+					codec: "avc1.640033",
+				};
+
+				resolve(this.info);
+			});
+
+			this.videoElement!.addEventListener("error", (e) => {
+				reject(new Error(`Failed to load video: ${e}`));
+			});
+		});
+	}
+
+	/**
+	 * Get video element for seeking
+	 */
+	getVideoElement(): HTMLVideoElement | null {
+		return this.videoElement;
+	}
+
+	getInfo(): DecodedVideoInfo | null {
+		return this.info;
+	}
+
+	destroy(): void {
+		if (this.videoElement) {
+			this.videoElement.pause();
+			this.videoElement.src = "";
+			this.videoElement = null;
+		}
+	}
+}
diff --git a/src/lib/exporter/videoExporter.browser.test.ts b/src/lib/exporter/videoExporter.browser.test.ts
new file mode 100644
index 0000000..cca896f
--- /dev/null
+++ b/src/lib/exporter/videoExporter.browser.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { BackgroundLoadError } from "../wallpaper";
+import type { ExportProgress } from "./types";
+import { VideoExporter } from "./videoExporter";
+
+describe("VideoExporter (real browser)", () => {
+	it("exports a valid MP4 blob from a real video", async () => {
+		const progressEvents: ExportProgress[] = [];
+
+		const exporter = new VideoExporter({
+			videoUrl: sampleVideoUrl,
+			width: 320,
+			height: 180,
+			frameRate: 15,
+			bitrate: 1_000_000,
+			wallpaper: "#1a1a2e",
+			zoomRegions: [],
+			showShadow: false,
+			shadowIntensity: 0,
+			showBlur: false,
+			cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+			onProgress: (p) => progressEvents.push(p),
+		});
+
+		const result = await exporter.export();
+
+		expect(result.success, result.error).toBe(true);
+		expect(result.blob).toBeInstanceOf(Blob);
+
+		const buf = await result.blob!.arrayBuffer();
+		const bytes = new Uint8Array(buf);
+		const ftyp = new TextDecoder().decode(bytes.slice(4, 8));
+		expect(ftyp).toBe("ftyp");
+
+		expect(result.blob!.size).toBeGreaterThan(1024);
+
+		expect(progressEvents.length).toBeGreaterThan(0);
+
+		const finalizing = progressEvents.filter((p) => p.phase === "finalizing");
+		expect(finalizing.length).toBeGreaterThan(0);
+		expect(finalizing.at(-1)!.percentage).toBe(100);
+	});
+
+	it("exports successfully with an image wallpaper (served by Vite dev server)", async () => {
+		const exporter = new VideoExporter({
+			videoUrl: sampleVideoUrl,
+			width: 320,
+			height: 180,
+			frameRate: 15,
+			bitrate: 1_000_000,
+			wallpaper: "/wallpapers/wallpaper1.jpg",
+			zoomRegions: [],
+			showShadow: false,
+			shadowIntensity: 0,
+			showBlur: false,
+			cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		});
+
+		const result = await exporter.export();
+		expect(result.success, result.error).toBe(true);
+		expect(result.blob!.size).toBeGreaterThan(1024);
+	});
+
+	it("throws BackgroundLoadError when wallpaper fails to load (no silent black fallback)", async () => {
+		const exporter = new VideoExporter({
+			videoUrl: sampleVideoUrl,
+			width: 320,
+			height: 180,
+			frameRate: 15,
+			bitrate: 1_000_000,
+			wallpaper: "/wallpapers/does-not-exist.jpg",
+			zoomRegions: [],
+			showShadow: false,
+			shadowIntensity: 0,
+			showBlur: false,
+			cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		});
+
+		const rejection = exporter.export();
+		await expect(rejection).rejects.toBeInstanceOf(BackgroundLoadError);
+		await expect(rejection).rejects.toMatchObject({
+			url: expect.stringContaining("does-not-exist"),
+		});
+	});
+});
diff --git a/src/lib/exporter/videoExporter.test.ts b/src/lib/exporter/videoExporter.test.ts
new file mode 100644
index 0000000..1b64255
--- /dev/null
+++ b/src/lib/exporter/videoExporter.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it } from "vitest";
+import {
+	getSourceCopyFastPathBlockers,
+	isSourceCopyFastPathEligible,
+	type VideoExporterConfig,
+} from "./videoExporter";
+
+function createConfig(overrides: Partial<VideoExporterConfig> = {}): VideoExporterConfig {
+	return {
+		videoUrl: "recording.mp4",
+		width: 1920,
+		height: 1080,
+		frameRate: 60,
+		bitrate: 30_000_000,
+		wallpaper: "#000000",
+		zoomRegions: [],
+		trimRegions: [],
+		speedRegions: [],
+		showShadow: false,
+		shadowIntensity: 0,
+		showBlur: false,
+		cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		...overrides,
+	};
+}
+
+describe("isSourceCopyFastPathEligible", () => {
+	it("allows a no-op MP4 export at source dimensions", () => {
+		expect(
+			isSourceCopyFastPathEligible(createConfig(), {
+				width: 1920,
+				height: 1080,
+			}),
+		).toBe(true);
+	});
+
+	it("rejects timeline edits and frame-level effects", () => {
+		const videoInfo = { width: 1920, height: 1080 };
+
+		expect(
+			isSourceCopyFastPathEligible(
+				createConfig({ trimRegions: [{ id: "trim", startMs: 100, endMs: 200 }] }),
+				videoInfo,
+			),
+		).toBe(false);
+		expect(
+			isSourceCopyFastPathEligible(
+				createConfig({
+					speedRegions: [{ id: "speed", startMs: 100, endMs: 200, speed: 1.5 }],
+				}),
+				videoInfo,
+			),
+		).toBe(false);
+		expect(
+			isSourceCopyFastPathEligible(
+				createConfig({
+					zoomRegions: [
+						{
+							id: "zoom",
+							startMs: 100,
+							endMs: 200,
+							depth: 2,
+							focus: { cx: 0.5, cy: 0.5 },
+						},
+					],
+				}),
+				videoInfo,
+			),
+		).toBe(false);
+		expect(isSourceCopyFastPathEligible(createConfig({ showBlur: true }), videoInfo)).toBe(false);
+	});
+
+	it("rejects resizing and overlays", () => {
+		const videoInfo = { width: 1920, height: 1080 };
+
+		expect(isSourceCopyFastPathEligible(createConfig({ width: 1280 }), videoInfo)).toBe(false);
+		expect(
+			isSourceCopyFastPathEligible(
+				createConfig({
+					cursorScale: 2,
+				}),
+				videoInfo,
+			),
+		).toBe(false);
+		expect(
+			isSourceCopyFastPathEligible(
+				createConfig({
+					cursorScale: 2,
+					cursorRecordingData: {
+						version: 2,
+						provider: "native",
+						assets: [
+							{
+								id: "cursor",
+								platform: "win32",
+								imageDataUrl: "data:image/png;base64,AA==",
+								width: 32,
+								height: 32,
+								hotspotX: 0,
+								hotspotY: 0,
+							},
+						],
+						samples: [{ timeMs: 0, cx: 0.5, cy: 0.5, visible: true, assetId: "cursor" }],
+					},
+				}),
+				videoInfo,
+			),
+		).toBe(false);
+	});
+});
+
+describe("getSourceCopyFastPathBlockers", () => {
+	it("reports the source-size mismatch that blocks copy-only export", () => {
+		expect(
+			getSourceCopyFastPathBlockers(createConfig({ height: 1080 }), {
+				width: 1920,
+				height: 1032,
+			}),
+		).toContain("output-size 1920x1080 differs from source 1920x1032");
+	});
+});
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
new file mode 100644
index 0000000..35c3d55
--- /dev/null
+++ b/src/lib/exporter/videoExporter.ts
@@ -0,0 +1,739 @@
+import type {
+	AnnotationRegion,
+	CropRegion,
+	SpeedRegion,
+	TrimRegion,
+	WebcamLayoutPreset,
+	WebcamSizePreset,
+	ZoomRegion,
+} from "@/components/video-editor/types";
+import { BackgroundLoadError } from "@/lib/wallpaper";
+import type { CursorRecordingData } from "@/native/contracts";
+import { getPlatform } from "@/utils/platformUtils";
+import { AudioProcessor } from "./audioEncoder";
+import { FrameRenderer } from "./frameRenderer";
+import { VideoMuxer } from "./muxer";
+import { StreamingVideoDecoder } from "./streamingDecoder";
+import { TimestampedVideoFrameQueue } from "./timestampedVideoFrameQueue";
+import type { ExportConfig, ExportProgress, ExportResult } from "./types";
+
+const ENCODER_STALL_TIMEOUT_MS = 15_000;
+const ENCODER_FLUSH_TIMEOUT_MS = 20_000;
+
+export interface VideoExporterConfig extends ExportConfig {
+	videoUrl: string;
+	webcamVideoUrl?: string;
+	wallpaper: string;
+	zoomRegions: ZoomRegion[];
+	trimRegions?: TrimRegion[];
+	speedRegions?: SpeedRegion[];
+	showShadow: boolean;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount?: number;
+	borderRadius?: number;
+	padding?: number;
+	videoPadding?: number;
+	cropRegion: CropRegion;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+	webcamSizePreset?: WebcamSizePreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	cursorRecordingData?: CursorRecordingData | null;
+	cursorScale?: number;
+	cursorSmoothing?: number;
+	cursorMotionBlur?: number;
+	cursorClickBounce?: number;
+	cursorClipToBounds?: boolean;
+	annotationRegions?: AnnotationRegion[];
+	previewWidth?: number;
+	previewHeight?: number;
+	cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+	cursorClickTimestamps?: number[];
+	onProgress?: (progress: ExportProgress) => void;
+}
+
+const SOURCE_COPY_EPSILON = 0.0001;
+
+function hasActiveTimeRegions(regions?: Array<{ startMs: number; endMs: number }>) {
+	return Boolean(regions?.some((region) => region.endMs - region.startMs > SOURCE_COPY_EPSILON));
+}
+
+function hasActiveSpeedRegions(regions?: SpeedRegion[]) {
+	return Boolean(
+		regions?.some(
+			(region) =>
+				region.endMs - region.startMs > SOURCE_COPY_EPSILON &&
+				Math.abs(region.speed - 1) > SOURCE_COPY_EPSILON,
+		),
+	);
+}
+
+function hasNativeCursorOverlay(config: VideoExporterConfig) {
+	return (config.cursorScale ?? 0) > 0;
+}
+
+function isDefaultCrop(cropRegion: CropRegion) {
+	return (
+		Math.abs(cropRegion.x) <= SOURCE_COPY_EPSILON &&
+		Math.abs(cropRegion.y) <= SOURCE_COPY_EPSILON &&
+		Math.abs(cropRegion.width - 1) <= SOURCE_COPY_EPSILON &&
+		Math.abs(cropRegion.height - 1) <= SOURCE_COPY_EPSILON
+	);
+}
+
+export function isSourceCopyFastPathEligible(
+	config: VideoExporterConfig,
+	videoInfo: { width: number; height: number },
+) {
+	return getSourceCopyFastPathBlockers(config, videoInfo).length === 0;
+}
+
+export function getSourceCopyFastPathBlockers(
+	config: VideoExporterConfig,
+	videoInfo: { width: number; height: number },
+) {
+	const blockers: string[] = [];
+
+	if (config.width !== videoInfo.width || config.height !== videoInfo.height) {
+		blockers.push(
+			`output-size ${config.width}x${config.height} differs from source ${videoInfo.width}x${videoInfo.height}`,
+		);
+	}
+	if (config.webcamVideoUrl) blockers.push("webcam overlay is enabled");
+	if (hasActiveTimeRegions(config.trimRegions)) blockers.push("trim regions are present");
+	if (hasActiveSpeedRegions(config.speedRegions)) blockers.push("speed regions are present");
+	if (hasActiveTimeRegions(config.zoomRegions)) blockers.push("zoom regions are present");
+	if (hasActiveTimeRegions(config.annotationRegions))
+		blockers.push("annotation regions are present");
+	if (hasNativeCursorOverlay(config)) blockers.push("editable cursor overlay is enabled");
+	if (!isDefaultCrop(config.cropRegion)) blockers.push("crop is not default");
+	if ((config.padding ?? 0) > SOURCE_COPY_EPSILON) blockers.push("padding is not zero");
+	if ((config.videoPadding ?? 0) > SOURCE_COPY_EPSILON) blockers.push("video padding is not zero");
+	if ((config.borderRadius ?? 0) > SOURCE_COPY_EPSILON) blockers.push("roundness is not zero");
+	if (config.showShadow || config.shadowIntensity > SOURCE_COPY_EPSILON) {
+		blockers.push("shadow is enabled");
+	}
+	if (config.showBlur) blockers.push("background blur is enabled");
+	if ((config.motionBlurAmount ?? 0) > SOURCE_COPY_EPSILON) blockers.push("motion blur is enabled");
+
+	return blockers;
+}
+
+function isMp4Source(videoUrl: string, blob: Blob) {
+	if (blob.type.toLowerCase().includes("mp4")) {
+		return true;
+	}
+
+	try {
+		const path = new URL(videoUrl, window.location.href).pathname;
+		return path.toLowerCase().endsWith(".mp4");
+	} catch {
+		return videoUrl.toLowerCase().split(/[?#]/, 1)[0].endsWith(".mp4");
+	}
+}
+
+export class VideoExporter {
+	private config: VideoExporterConfig;
+	private streamingDecoder: StreamingVideoDecoder | null = null;
+	private renderer: FrameRenderer | null = null;
+	private encoder: VideoEncoder | null = null;
+	private muxer: VideoMuxer | null = null;
+	private audioProcessor: AudioProcessor | null = null;
+	private webcamDecoder: StreamingVideoDecoder | null = null;
+	private cancelled = false;
+	private encodeQueue = 0;
+	// Keep a smaller queue for software encoding so Windows does not balloon memory.
+	private readonly MAX_ENCODE_QUEUE = 120;
+	private videoDescription: Uint8Array | undefined;
+	private videoColorSpace: VideoColorSpaceInit | undefined;
+	private muxingPromises: Promise<void>[] = [];
+	private chunkCount = 0;
+	private lastEncoderOutputAt = 0;
+	private fatalEncoderError: Error | null = null;
+
+	constructor(config: VideoExporterConfig) {
+		this.config = config;
+	}
+
+	async export(): Promise<ExportResult> {
+		const encoderPreferences = this.getEncoderPreferences();
+		let lastError: Error | null = null;
+
+		for (const encoderPreference of encoderPreferences) {
+			try {
+				return await this.exportWithEncoderPreference(encoderPreference);
+			} catch (error) {
+				const normalizedError = error instanceof Error ? error : new Error(String(error));
+				lastError = normalizedError;
+
+				if (this.cancelled) {
+					return { success: false, error: "Export cancelled" };
+				}
+
+				if (normalizedError instanceof BackgroundLoadError) {
+					throw normalizedError;
+				}
+
+				if (encoderPreferences.length > 1) {
+					console.warn(
+						`[VideoExporter] ${encoderPreference} export attempt failed:`,
+						normalizedError,
+					);
+				}
+			} finally {
+				this.cleanup();
+			}
+		}
+
+		return {
+			success: false,
+			error: lastError?.message || "Export failed",
+		};
+	}
+
+	private async exportWithEncoderPreference(
+		encoderPreference: HardwareAcceleration,
+	): Promise<ExportResult> {
+		let webcamFrameQueue: TimestampedVideoFrameQueue | null = null;
+		let stopWebcamDecode = false;
+		let webcamDecodeError: Error | null = null;
+		let webcamDecodePromise: Promise<void> | null = null;
+		let webcamDecoder: StreamingVideoDecoder | null = null;
+		const warnings: string[] = [];
+		const onWarning = (message: string) => warnings.push(message);
+
+		this.cleanup();
+		this.cancelled = false;
+		this.fatalEncoderError = null;
+
+		try {
+			const platform = await getPlatform();
+
+			const streamingDecoder = new StreamingVideoDecoder();
+			this.streamingDecoder = streamingDecoder;
+			const videoInfo = await streamingDecoder.loadMetadata(this.config.videoUrl);
+			const sourceCopyResult = await this.trySourceCopyFastPath(videoInfo);
+			if (sourceCopyResult) {
+				return sourceCopyResult;
+			}
+
+			let webcamInfo: Awaited<ReturnType<StreamingVideoDecoder["loadMetadata"]>> | null = null;
+			if (this.config.webcamVideoUrl) {
+				webcamDecoder = new StreamingVideoDecoder();
+				this.webcamDecoder = webcamDecoder;
+				webcamInfo = await webcamDecoder.loadMetadata(this.config.webcamVideoUrl);
+			}
+
+			const renderer = new FrameRenderer({
+				width: this.config.width,
+				height: this.config.height,
+				wallpaper: this.config.wallpaper,
+				zoomRegions: this.config.zoomRegions,
+				showShadow: this.config.showShadow,
+				shadowIntensity: this.config.shadowIntensity,
+				showBlur: this.config.showBlur,
+				motionBlurAmount: this.config.motionBlurAmount,
+				borderRadius: this.config.borderRadius,
+				padding: this.config.padding,
+				cropRegion: this.config.cropRegion,
+				cursorRecordingData: this.config.cursorRecordingData,
+				cursorScale: this.config.cursorScale,
+				cursorSmoothing: this.config.cursorSmoothing,
+				cursorMotionBlur: this.config.cursorMotionBlur,
+				cursorClickBounce: this.config.cursorClickBounce,
+				cursorClipToBounds: this.config.cursorClipToBounds,
+				videoWidth: videoInfo.width,
+				videoHeight: videoInfo.height,
+				webcamSize: webcamInfo ? { width: webcamInfo.width, height: webcamInfo.height } : null,
+				webcamLayoutPreset: this.config.webcamLayoutPreset,
+				webcamMaskShape: this.config.webcamMaskShape,
+				webcamSizePreset: this.config.webcamSizePreset,
+				webcamPosition: this.config.webcamPosition,
+				annotationRegions: this.config.annotationRegions,
+				speedRegions: this.config.speedRegions,
+				previewWidth: this.config.previewWidth,
+				previewHeight: this.config.previewHeight,
+				cursorTelemetry: this.config.cursorTelemetry,
+				cursorClickTimestamps: this.config.cursorClickTimestamps,
+				platform,
+			});
+			this.renderer = renderer;
+			await renderer.initialize();
+
+			await this.initializeEncoder(encoderPreference);
+
+			const sourceDemuxer = streamingDecoder.getDemuxer();
+			const audioExportCodec =
+				videoInfo.hasAudio && sourceDemuxer
+					? await AudioProcessor.selectSupportedExportCodecForSource(sourceDemuxer)
+					: null;
+			if (videoInfo.hasAudio && !audioExportCodec) {
+				console.warn("[VideoExporter] No supported audio export codec, exporting video-only.");
+			}
+
+			const hasAudio = Boolean(audioExportCodec);
+			const muxer = new VideoMuxer(this.config, hasAudio, audioExportCodec?.muxerCodec);
+			this.muxer = muxer;
+			await muxer.initialize();
+
+			const { totalFrames } = streamingDecoder.getExportMetrics(
+				this.config.frameRate,
+				this.config.trimRegions,
+				this.config.speedRegions,
+			);
+
+			const frameDuration = 1_000_000 / this.config.frameRate;
+			let frameIndex = 0;
+			const maxEncodeQueue =
+				encoderPreference === "prefer-software"
+					? Math.min(this.MAX_ENCODE_QUEUE, 32)
+					: this.MAX_ENCODE_QUEUE;
+
+			webcamFrameQueue = this.config.webcamVideoUrl ? new TimestampedVideoFrameQueue() : null;
+			webcamDecodePromise =
+				webcamDecoder && webcamFrameQueue
+					? (() => {
+							const queue = webcamFrameQueue;
+							return webcamDecoder
+								.decodeAll(
+									this.config.frameRate,
+									this.config.trimRegions,
+									this.config.speedRegions,
+									async (webcamFrame, _exportTimestampUs, webcamSourceTimestampMs) => {
+										while (queue.length >= 12 && !this.cancelled && !stopWebcamDecode) {
+											await new Promise((resolve) => setTimeout(resolve, 2));
+										}
+										if (this.cancelled || stopWebcamDecode) {
+											webcamFrame.close();
+											return;
+										}
+										queue.enqueue(webcamFrame, webcamSourceTimestampMs);
+									},
+									onWarning,
+								)
+								.catch((error) => {
+									webcamDecodeError = error instanceof Error ? error : new Error(String(error));
+									throw webcamDecodeError;
+								})
+								.finally(() => {
+									if (webcamDecodeError) {
+										queue.fail(webcamDecodeError);
+									} else {
+										queue.close();
+									}
+								});
+						})()
+					: null;
+
+			await streamingDecoder.decodeAll(
+				this.config.frameRate,
+				this.config.trimRegions,
+				this.config.speedRegions,
+				async (videoFrame, _exportTimestampUs, sourceTimestampMs) => {
+					let webcamFrame: VideoFrame | null = null;
+					try {
+						if (this.cancelled) {
+							return;
+						}
+
+						if (this.fatalEncoderError) {
+							throw this.fatalEncoderError;
+						}
+
+						const timestamp = frameIndex * frameDuration;
+						webcamFrame = webcamFrameQueue
+							? await webcamFrameQueue.frameAt(sourceTimestampMs)
+							: null;
+						if (this.cancelled) {
+							return;
+						}
+
+						const sourceTimestampUs = sourceTimestampMs * 1000;
+						await renderer.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
+
+						const canvas = renderer.getCanvas();
+
+						let exportFrame: VideoFrame;
+
+						// On some Linux systems the GPU shared-image path (EGL/Ozone) fails
+						// silently, producing empty frames, so we force a CPU readback instead.
+						if (platform === "linux") {
+							const canvasCtx = canvas.getContext("2d")!;
+							const imageData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height);
+							exportFrame = new VideoFrame(imageData.data.buffer, {
+								format: "RGBA",
+								codedWidth: canvas.width,
+								codedHeight: canvas.height,
+								timestamp,
+								duration: frameDuration,
+								colorSpace: {
+									primaries: "bt709",
+									transfer: "iec61966-2-1",
+									matrix: "rgb",
+									fullRange: true,
+								},
+							});
+						} else {
+							exportFrame = new VideoFrame(canvas, { timestamp, duration: frameDuration });
+						}
+
+						while (
+							this.encoder &&
+							this.encoder.encodeQueueSize >= maxEncodeQueue &&
+							!this.cancelled
+						) {
+							if (Date.now() - this.lastEncoderOutputAt > ENCODER_STALL_TIMEOUT_MS) {
+								exportFrame.close();
+								throw new Error(
+									encoderPreference === "prefer-hardware"
+										? "The hardware video encoder stopped responding. Retrying with a safer encoder."
+										: "The video encoder stopped responding during export.",
+								);
+							}
+							await new Promise((resolve) => setTimeout(resolve, 5));
+						}
+
+						if (this.encoder && this.encoder.state === "configured") {
+							this.encodeQueue++;
+							this.encoder.encode(exportFrame, { keyFrame: frameIndex % 150 === 0 });
+						} else {
+							console.warn(
+								`[Frame ${frameIndex}] Encoder not ready! State: ${this.encoder?.state}`,
+							);
+						}
+
+						exportFrame.close();
+						frameIndex++;
+
+						this.reportProgress({
+							currentFrame: frameIndex,
+							totalFrames,
+							percentage: (frameIndex / totalFrames) * 100,
+							estimatedTimeRemaining: 0,
+						});
+					} finally {
+						videoFrame.close();
+						webcamFrame?.close();
+					}
+				},
+				onWarning,
+			);
+
+			if (this.cancelled) {
+				return { success: false, error: "Export cancelled" };
+			}
+
+			if (this.fatalEncoderError) {
+				throw this.fatalEncoderError;
+			}
+
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			webcamDecoder?.cancel();
+			await webcamDecodePromise;
+
+			if (this.encoder && this.encoder.state === "configured") {
+				await this.withTimeout(
+					this.encoder.flush(),
+					ENCODER_FLUSH_TIMEOUT_MS,
+					encoderPreference === "prefer-hardware"
+						? "The hardware video encoder stopped responding while finalizing the export."
+						: "The video encoder stopped responding while finalizing the export.",
+				);
+			}
+
+			if (this.fatalEncoderError) {
+				throw this.fatalEncoderError;
+			}
+
+			await Promise.all(this.muxingPromises);
+
+			this.reportProgress({
+				currentFrame: totalFrames,
+				totalFrames,
+				percentage: 100,
+				estimatedTimeRemaining: 0,
+				phase: "finalizing",
+			});
+
+			if (hasAudio && audioExportCodec && !this.cancelled) {
+				const demuxer = streamingDecoder.getDemuxer();
+				if (demuxer) {
+					console.log("[VideoExporter] Processing audio track...");
+					this.audioProcessor = new AudioProcessor();
+					await this.audioProcessor.process(
+						demuxer,
+						muxer,
+						this.config.videoUrl,
+						this.config.trimRegions,
+						this.config.speedRegions,
+						videoInfo.duration,
+						audioExportCodec,
+					);
+				}
+			}
+
+			const blob = await muxer.finalize();
+			return { success: true, blob, warnings: warnings.length > 0 ? warnings : undefined };
+		} finally {
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			webcamDecoder?.cancel();
+			if (webcamDecodePromise) {
+				await webcamDecodePromise.catch(() => undefined);
+			}
+		}
+	}
+
+	private async initializeEncoder(hardwareAcceleration: HardwareAcceleration): Promise<void> {
+		this.encodeQueue = 0;
+		this.muxingPromises = [];
+		this.chunkCount = 0;
+		this.lastEncoderOutputAt = Date.now();
+		this.fatalEncoderError = null;
+		let videoDescription: Uint8Array | undefined;
+
+		this.encoder = new VideoEncoder({
+			output: (chunk, meta) => {
+				this.lastEncoderOutputAt = Date.now();
+
+				if (meta?.decoderConfig?.description && !videoDescription) {
+					const desc = meta.decoderConfig.description;
+					if (desc instanceof ArrayBuffer || desc instanceof SharedArrayBuffer) {
+						videoDescription = new Uint8Array(desc);
+					} else if (ArrayBuffer.isView(desc)) {
+						videoDescription = new Uint8Array(desc.buffer, desc.byteOffset, desc.byteLength);
+					}
+					this.videoDescription = videoDescription;
+				}
+
+				if (meta?.decoderConfig?.colorSpace && !this.videoColorSpace) {
+					this.videoColorSpace = meta.decoderConfig.colorSpace;
+				}
+
+				const isFirstChunk = this.chunkCount === 0;
+				this.chunkCount++;
+
+				const muxingPromise = (async () => {
+					try {
+						if (isFirstChunk && this.videoDescription) {
+							const colorSpace = this.videoColorSpace || {
+								primaries: "bt709",
+								transfer: "iec61966-2-1",
+								matrix: "rgb",
+								fullRange: true,
+							};
+
+							const metadata: EncodedVideoChunkMetadata = {
+								decoderConfig: {
+									codec: this.config.codec || "avc1.640033",
+									codedWidth: this.config.width,
+									codedHeight: this.config.height,
+									description: this.videoDescription,
+									colorSpace,
+								},
+							};
+
+							await this.muxer!.addVideoChunk(chunk, metadata);
+						} else {
+							await this.muxer!.addVideoChunk(chunk, meta);
+						}
+					} catch (error) {
+						console.error("Muxing error:", error);
+					}
+				})();
+
+				this.muxingPromises.push(muxingPromise);
+				this.encodeQueue = Math.max(0, this.encodeQueue - 1);
+			},
+			error: (error) => {
+				console.error("[VideoExporter] Encoder error:", error);
+				this.fatalEncoderError =
+					error instanceof Error ? error : new Error(`Video encoder error: ${String(error)}`);
+				this.streamingDecoder?.cancel();
+				this.webcamDecoder?.cancel();
+			},
+		});
+
+		const encoderConfig: VideoEncoderConfig = {
+			codec: this.config.codec || "avc1.640033",
+			width: this.config.width,
+			height: this.config.height,
+			bitrate: this.config.bitrate,
+			framerate: this.config.frameRate,
+			latencyMode: "quality",
+			bitrateMode: "variable",
+			hardwareAcceleration,
+		};
+
+		const support = await VideoEncoder.isConfigSupported(encoderConfig);
+		if (!support.supported) {
+			throw new Error(
+				hardwareAcceleration === "prefer-hardware"
+					? "Hardware video encoding is not supported on this system."
+					: "Software video encoding is not supported on this system.",
+			);
+		}
+
+		console.log(
+			`[VideoExporter] Using ${hardwareAcceleration === "prefer-hardware" ? "hardware" : "software"} acceleration`,
+		);
+		this.encoder.configure(encoderConfig);
+	}
+
+	cancel(): void {
+		this.cancelled = true;
+		if (this.streamingDecoder) {
+			this.streamingDecoder.cancel();
+		}
+		if (this.webcamDecoder) {
+			this.webcamDecoder.cancel();
+		}
+		if (this.audioProcessor) {
+			this.audioProcessor.cancel();
+		}
+		this.cleanup();
+	}
+
+	private cleanup(): void {
+		if (this.encoder) {
+			try {
+				if (this.encoder.state === "configured") {
+					this.encoder.close();
+				}
+			} catch (e) {
+				console.warn("Error closing encoder:", e);
+			}
+			this.encoder = null;
+		}
+
+		if (this.streamingDecoder) {
+			try {
+				this.streamingDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying streaming decoder:", e);
+			}
+			this.streamingDecoder = null;
+		}
+
+		if (this.webcamDecoder) {
+			try {
+				this.webcamDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying webcam decoder:", e);
+			}
+			this.webcamDecoder = null;
+		}
+
+		if (this.renderer) {
+			try {
+				this.renderer.destroy();
+			} catch (e) {
+				console.warn("Error destroying renderer:", e);
+			}
+			this.renderer = null;
+		}
+
+		this.audioProcessor = null;
+		this.muxer = null;
+		this.encodeQueue = 0;
+		this.muxingPromises = [];
+		this.chunkCount = 0;
+		this.videoDescription = undefined;
+		this.videoColorSpace = undefined;
+		this.lastEncoderOutputAt = 0;
+		this.fatalEncoderError = null;
+	}
+
+	private getEncoderPreferences(): HardwareAcceleration[] {
+		if (typeof navigator !== "undefined" && /\bWindows\b/i.test(navigator.userAgent)) {
+			return ["prefer-software", "prefer-hardware"];
+		}
+		return ["prefer-hardware", "prefer-software"];
+	}
+
+	private async trySourceCopyFastPath(videoInfo: { width: number; height: number }) {
+		const blockers = getSourceCopyFastPathBlockers(this.config, videoInfo);
+		if (blockers.length > 0) {
+			console.info("[VideoExporter] source-copy fast path disabled", {
+				blockers,
+				output: { width: this.config.width, height: this.config.height },
+				source: videoInfo,
+			});
+			return null;
+		}
+
+		const sourceBlob = await this.loadSourceBlob();
+		if (!sourceBlob || !isMp4Source(this.config.videoUrl, sourceBlob)) {
+			console.info("[VideoExporter] source-copy fast path disabled", {
+				blockers: ["source is not a readable MP4"],
+				source: videoInfo,
+			});
+			return null;
+		}
+
+		if (this.cancelled) {
+			return { success: false, error: "Export cancelled" };
+		}
+
+		this.reportProgress({
+			currentFrame: 1,
+			totalFrames: 1,
+			percentage: 100,
+			estimatedTimeRemaining: 0,
+			phase: "finalizing",
+		});
+		console.info("[VideoExporter] using source-copy fast path", {
+			source: videoInfo,
+			bytes: sourceBlob.size,
+		});
+
+		return {
+			success: true,
+			blob: sourceBlob.type ? sourceBlob : new Blob([sourceBlob], { type: "video/mp4" }),
+		} satisfies ExportResult;
+	}
+
+	private async loadSourceBlob() {
+		const videoUrl = this.config.videoUrl;
+		const isRemoteUrl = /^(https?:|blob:|data:)/i.test(videoUrl);
+
+		if (!isRemoteUrl && window.electronAPI?.readBinaryFile) {
+			const result = await window.electronAPI.readBinaryFile(videoUrl);
+			if (!result.success || !result.data) {
+				return null;
+			}
+
+			const type = videoUrl.toLowerCase().split(/[?#]/, 1)[0].endsWith(".mp4") ? "video/mp4" : "";
+			return new Blob([result.data], type ? { type } : undefined);
+		}
+
+		const response = await fetch(videoUrl);
+		if (!response.ok) {
+			return null;
+		}
+
+		return response.blob();
+	}
+
+	private reportProgress(progress: ExportProgress): void {
+		this.config.onProgress?.(progress);
+	}
+
+	private withTimeout<T>(promise: Promise<T>, timeoutMs: number, message: string): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			const timer = window.setTimeout(() => reject(new Error(message)), timeoutMs);
+			promise.then(
+				(value) => {
+					window.clearTimeout(timer);
+					resolve(value);
+				},
+				(error) => {
+					window.clearTimeout(timer);
+					reject(error);
+				},
+			);
+		});
+	}
+}
diff --git a/src/lib/frameStep.ts b/src/lib/frameStep.ts
new file mode 100644
index 0000000..dc42d78
--- /dev/null
+++ b/src/lib/frameStep.ts
@@ -0,0 +1,15 @@
+/** Duration of a single frame in seconds at 60 FPS (~16.67ms). */
+export const FRAME_DURATION_SEC = 1 / 60;
+
+/**
+ * Compute the new playhead time after stepping one frame forward or backward.
+ * The result is clamped to the range [0, duration].
+ */
+export function computeFrameStepTime(
+	currentTime: number,
+	duration: number,
+	direction: "forward" | "backward",
+): number {
+	const delta = direction === "forward" ? FRAME_DURATION_SEC : -FRAME_DURATION_SEC;
+	return Math.min(duration, Math.max(0, currentTime + delta));
+}
diff --git a/src/lib/nativeMacRecording.test.ts b/src/lib/nativeMacRecording.test.ts
new file mode 100644
index 0000000..fce88f6
--- /dev/null
+++ b/src/lib/nativeMacRecording.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { parseMacDisplayIdFromSourceId, parseMacWindowIdFromSourceId } from "./nativeMacRecording";
+
+describe("nativeMacRecording source parsing", () => {
+	it("parses Electron window source ids into ScreenCaptureKit window ids", () => {
+		expect(parseMacWindowIdFromSourceId("window:12345:0")).toBe(12345);
+		expect(parseMacWindowIdFromSourceId("window:987")).toBe(987);
+	});
+
+	it("rejects non-window source ids for window parsing", () => {
+		expect(parseMacWindowIdFromSourceId("screen:1:0")).toBeNull();
+		expect(parseMacWindowIdFromSourceId("window:not-a-number:0")).toBeNull();
+		expect(parseMacWindowIdFromSourceId(null)).toBeNull();
+	});
+
+	it("parses Electron display source ids into ScreenCaptureKit display ids", () => {
+		expect(parseMacDisplayIdFromSourceId("screen:1:0")).toBe(1);
+		expect(parseMacDisplayIdFromSourceId("screen:69733248")).toBe(69733248);
+	});
+
+	it("rejects non-display source ids for display parsing", () => {
+		expect(parseMacDisplayIdFromSourceId("window:123:0")).toBeNull();
+		expect(parseMacDisplayIdFromSourceId("screen:not-a-number:0")).toBeNull();
+		expect(parseMacDisplayIdFromSourceId(undefined)).toBeNull();
+	});
+});
diff --git a/src/lib/nativeMacRecording.ts b/src/lib/nativeMacRecording.ts
new file mode 100644
index 0000000..4202132
--- /dev/null
+++ b/src/lib/nativeMacRecording.ts
@@ -0,0 +1,117 @@
+import type { Rectangle } from "electron";
+import type { CursorCaptureMode } from "./recordingSession";
+
+export type NativeMacSourceType = "display" | "window";
+
+export type NativeMacRecordingRequest = {
+	schemaVersion: 1;
+	recordingId?: number;
+	source: {
+		type: NativeMacSourceType;
+		sourceId: string;
+		displayId?: number;
+		windowId?: number;
+		bounds?: Rectangle;
+	};
+	video: {
+		fps: number;
+		width: number;
+		height: number;
+		bitrate?: number;
+		hideSystemCursor: boolean;
+	};
+	audio: {
+		system: {
+			enabled: boolean;
+		};
+		microphone: {
+			enabled: boolean;
+			deviceId?: string;
+			deviceName?: string;
+			gain: number;
+		};
+	};
+	webcam: {
+		enabled: boolean;
+		deviceId?: string;
+		deviceName?: string;
+		width: number;
+		height: number;
+		fps: number;
+	};
+	cursor: {
+		mode: CursorCaptureMode;
+	};
+	outputs: {
+		screenPath: string;
+		manifestPath?: string;
+	};
+};
+
+export type NativeMacHelperReadyEvent = {
+	event: "ready";
+	schemaVersion: 1;
+};
+
+export type NativeMacHelperRecordingStartedEvent = {
+	event: "recording-started";
+	timestampMs: number;
+};
+
+export type NativeMacHelperRecordingStoppedEvent = {
+	event: "recording-stopped";
+	screenPath: string;
+};
+
+export type NativeMacHelperWarningEvent = {
+	event: "warning";
+	code: string;
+	message: string;
+};
+
+export type NativeMacHelperErrorEvent = {
+	event: "error";
+	code: string;
+	message: string;
+};
+
+export type NativeMacHelperEvent =
+	| NativeMacHelperReadyEvent
+	| NativeMacHelperRecordingStartedEvent
+	| NativeMacHelperRecordingStoppedEvent
+	| NativeMacHelperWarningEvent
+	| NativeMacHelperErrorEvent;
+
+export type NativeMacRecordingStartResult = {
+	success: boolean;
+	recordingId?: number;
+	path?: string;
+	helperPath?: string;
+	error?: string;
+};
+
+export function parseMacWindowIdFromSourceId(sourceId?: string | null) {
+	if (!sourceId?.startsWith("window:")) {
+		return null;
+	}
+
+	const windowIdPart = sourceId.split(":")[1];
+	if (!windowIdPart || !/^\d+$/.test(windowIdPart)) {
+		return null;
+	}
+
+	return Number(windowIdPart);
+}
+
+export function parseMacDisplayIdFromSourceId(sourceId?: string | null) {
+	if (!sourceId?.startsWith("screen:")) {
+		return null;
+	}
+
+	const displayIdPart = sourceId.split(":")[1];
+	if (!displayIdPart || !/^\d+$/.test(displayIdPart)) {
+		return null;
+	}
+
+	return Number(displayIdPart);
+}
diff --git a/src/lib/nativeWindowsRecording.ts b/src/lib/nativeWindowsRecording.ts
new file mode 100644
index 0000000..58ce6d8
--- /dev/null
+++ b/src/lib/nativeWindowsRecording.ts
@@ -0,0 +1,66 @@
+export type NativeWindowsSourceType = "display" | "window";
+
+export type NativeWindowsRecordingRequest = {
+	recordingId?: number;
+	source: {
+		type: NativeWindowsSourceType;
+		sourceId: string;
+		displayId?: number;
+		bounds?: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		};
+		windowHandle?: string;
+	};
+	video: {
+		fps: number;
+		width: number;
+		height: number;
+	};
+	audio: {
+		system: {
+			enabled: boolean;
+		};
+		microphone: {
+			enabled: boolean;
+			deviceId?: string;
+			deviceName?: string;
+			gain: number;
+		};
+	};
+	webcam: {
+		enabled: boolean;
+		deviceId?: string;
+		deviceName?: string;
+		directShowClsid?: string;
+		width: number;
+		height: number;
+		fps: number;
+	};
+	cursor: {
+		mode: import("./recordingSession").CursorCaptureMode;
+	};
+};
+
+export type NativeWindowsRecordingStartResult = {
+	success: boolean;
+	recordingId?: number;
+	path?: string;
+	helperPath?: string;
+	error?: string;
+};
+
+export function parseWindowHandleFromSourceId(sourceId?: string | null) {
+	if (!sourceId?.startsWith("window:")) {
+		return null;
+	}
+
+	const handlePart = sourceId.split(":")[1];
+	if (!handlePart || !/^\d+$/.test(handlePart)) {
+		return null;
+	}
+
+	return handlePart;
+}
diff --git a/src/lib/recordingSession.ts b/src/lib/recordingSession.ts
new file mode 100644
index 0000000..12a6afd
--- /dev/null
+++ b/src/lib/recordingSession.ts
@@ -0,0 +1,86 @@
+export interface ProjectMedia {
+	screenVideoPath: string;
+	webcamVideoPath?: string;
+	cursorCaptureMode?: CursorCaptureMode;
+}
+
+export type CursorCaptureMode = "editable-overlay" | "system";
+
+export interface RecordingSession extends ProjectMedia {
+	createdAt: number;
+}
+
+export interface RecordedVideoAssetInput {
+	fileName: string;
+	videoData: ArrayBuffer;
+}
+
+export interface StoreRecordedSessionInput {
+	screen: RecordedVideoAssetInput;
+	webcam?: RecordedVideoAssetInput;
+	createdAt?: number;
+	cursorCaptureMode?: CursorCaptureMode;
+	/**
+	 * Recording wall-clock duration in milliseconds. Used by the main process
+	 * to patch the WebM Duration header on streamed recordings, since the
+	 * renderer no longer holds the bytes. Browser MediaRecorder writes WebM
+	 * with no/zero duration; without this patch, the editor's seek bar and
+	 * timeline break for any recording that took the streaming path.
+	 */
+	durationMs?: number;
+}
+
+export function normalizeCursorCaptureMode(value: unknown): CursorCaptureMode | undefined {
+	return value === "editable-overlay" || value === "system" ? value : undefined;
+}
+
+function normalizePath(value: unknown): string | undefined {
+	if (typeof value !== "string") {
+		return undefined;
+	}
+
+	const trimmed = value.trim();
+	return trimmed ? trimmed : undefined;
+}
+
+export function normalizeProjectMedia(candidate: unknown): ProjectMedia | null {
+	if (!candidate || typeof candidate !== "object") {
+		return null;
+	}
+
+	const raw = candidate as Partial<ProjectMedia>;
+	const screenVideoPath = normalizePath(raw.screenVideoPath);
+
+	if (!screenVideoPath) {
+		return null;
+	}
+
+	const webcamVideoPath = normalizePath(raw.webcamVideoPath);
+	const cursorCaptureMode = normalizeCursorCaptureMode(raw.cursorCaptureMode);
+
+	return {
+		screenVideoPath,
+		...(webcamVideoPath ? { webcamVideoPath } : {}),
+		...(cursorCaptureMode ? { cursorCaptureMode } : {}),
+	};
+}
+
+export function normalizeRecordingSession(candidate: unknown): RecordingSession | null {
+	if (!candidate || typeof candidate !== "object") {
+		return null;
+	}
+
+	const raw = candidate as Partial<RecordingSession>;
+	const media = normalizeProjectMedia(raw);
+	if (!media) {
+		return null;
+	}
+
+	return {
+		...media,
+		createdAt:
+			typeof raw.createdAt === "number" && Number.isFinite(raw.createdAt)
+				? raw.createdAt
+				: Date.now(),
+	};
+}
diff --git a/src/lib/requestCameraAccess.ts b/src/lib/requestCameraAccess.ts
new file mode 100644
index 0000000..cfcd4d1
--- /dev/null
+++ b/src/lib/requestCameraAccess.ts
@@ -0,0 +1,55 @@
+export type CameraAccessResult = {
+	success: boolean;
+	granted: boolean;
+	status: string;
+	error?: string;
+};
+
+function getDeniedStatus(error: unknown) {
+	if (error instanceof DOMException) {
+		return error.name;
+	}
+
+	return "unknown";
+}
+
+export async function requestCameraAccess(): Promise<CameraAccessResult> {
+	if (window.electronAPI?.requestCameraAccess) {
+		try {
+			const electronResult = await window.electronAPI.requestCameraAccess();
+			return electronResult;
+		} catch (error) {
+			return {
+				success: false,
+				granted: false,
+				status: "error",
+				error: String(error),
+			};
+		}
+	}
+
+	if (!navigator.mediaDevices?.getUserMedia) {
+		return {
+			success: false,
+			granted: false,
+			status: "unsupported",
+			error: "Camera access is not supported in this runtime.",
+		};
+	}
+
+	try {
+		const stream = await navigator.mediaDevices.getUserMedia({
+			audio: false,
+			video: true,
+		});
+		stream.getTracks().forEach((track) => track.stop());
+		return { success: true, granted: true, status: "granted" };
+	} catch (error) {
+		return {
+			success: true,
+			granted: false,
+			status: getDeniedStatus(error),
+			error: String(error),
+		};
+	}
+}
diff --git a/src/lib/shortcuts.ts b/src/lib/shortcuts.ts
new file mode 100644
index 0000000..96592a4
--- /dev/null
+++ b/src/lib/shortcuts.ts
@@ -0,0 +1,173 @@
+export const SHORTCUT_ACTIONS = [
+	"addZoom",
+	"addTrim",
+	"addSpeed",
+	"addAnnotation",
+	"addBlur",
+	"addKeyframe",
+	"deleteSelected",
+	"playPause",
+] as const;
+
+export type ShortcutAction = (typeof SHORTCUT_ACTIONS)[number];
+
+export interface ShortcutBinding {
+	key: string;
+	/** Maps to Cmd on macOS, Ctrl on Windows/Linux */
+	ctrl?: boolean;
+	shift?: boolean;
+	alt?: boolean;
+}
+
+export type ShortcutsConfig = Record<ShortcutAction, ShortcutBinding>;
+
+export interface FixedShortcut {
+	i18nKey: string;
+	label: string;
+	display: string;
+	bindings: ShortcutBinding[];
+}
+
+export const FIXED_SHORTCUTS: FixedShortcut[] = [
+	{ i18nKey: "undo", label: "Undo", display: "Ctrl + Z", bindings: [{ key: "z", ctrl: true }] },
+	{
+		i18nKey: "redo",
+		label: "Redo",
+		display: "Ctrl + Shift + Z / Ctrl + Y",
+		bindings: [
+			{ key: "z", ctrl: true, shift: true },
+			{ key: "y", ctrl: true },
+		],
+	},
+	{
+		i18nKey: "cycleAnnotationsForward",
+		label: "Cycle Annotations Forward",
+		display: "Tab",
+		bindings: [{ key: "tab" }],
+	},
+	{
+		i18nKey: "cycleAnnotationsBackward",
+		label: "Cycle Annotations Backward",
+		display: "Shift + Tab",
+		bindings: [{ key: "tab", shift: true }],
+	},
+	{
+		i18nKey: "deleteSelectedAlt",
+		label: "Delete Selected (alt)",
+		display: "Del / ⌫",
+		bindings: [{ key: "delete" }, { key: "backspace" }],
+	},
+	{
+		i18nKey: "panTimeline",
+		label: "Pan Timeline",
+		display: "Shift + Ctrl + Scroll",
+		bindings: [],
+	},
+	{ i18nKey: "zoomTimeline", label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
+	{ i18nKey: "frameBack", label: "Frame Back", display: "←", bindings: [{ key: "arrowleft" }] },
+	{
+		i18nKey: "frameForward",
+		label: "Frame Forward",
+		display: "→",
+		bindings: [{ key: "arrowright" }],
+	},
+];
+
+export type ShortcutConflict =
+	| { type: "configurable"; action: ShortcutAction }
+	| { type: "fixed"; label: string };
+
+export function bindingsEqual(a: ShortcutBinding, b: ShortcutBinding): boolean {
+	return (
+		a.key.toLowerCase() === b.key.toLowerCase() &&
+		!!a.ctrl === !!b.ctrl &&
+		!!a.shift === !!b.shift &&
+		!!a.alt === !!b.alt
+	);
+}
+
+export function findConflict(
+	binding: ShortcutBinding,
+	forAction: ShortcutAction,
+	config: ShortcutsConfig,
+): ShortcutConflict | null {
+	for (const fixed of FIXED_SHORTCUTS) {
+		if (fixed.bindings.some((b) => bindingsEqual(b, binding))) {
+			return { type: "fixed", label: fixed.label };
+		}
+	}
+	for (const action of SHORTCUT_ACTIONS) {
+		if (action !== forAction && bindingsEqual(config[action], binding)) {
+			return { type: "configurable", action };
+		}
+	}
+	return null;
+}
+
+export const DEFAULT_SHORTCUTS: ShortcutsConfig = {
+	addZoom: { key: "z" },
+	addTrim: { key: "t" },
+	addSpeed: { key: "s" },
+	addAnnotation: { key: "a" },
+	addBlur: { key: "b" },
+	addKeyframe: { key: "f" },
+	deleteSelected: { key: "d", ctrl: true },
+	playPause: { key: " " },
+};
+
+export const SHORTCUT_LABELS: Record<ShortcutAction, string> = {
+	addZoom: "Add Zoom",
+	addTrim: "Add Trim",
+	addSpeed: "Add Speed",
+	addAnnotation: "Add Annotation",
+	addBlur: "Add Blur",
+	addKeyframe: "Add Keyframe",
+	deleteSelected: "Delete Selected",
+	playPause: "Play / Pause",
+};
+
+export function matchesShortcut(
+	e: KeyboardEvent,
+	binding: ShortcutBinding | undefined,
+	isMacPlatform: boolean,
+): boolean {
+	if (!binding) return false;
+	if (e.key.toLowerCase() !== binding.key.toLowerCase()) return false;
+
+	const primaryMod = isMacPlatform ? e.metaKey : e.ctrlKey;
+	if (primaryMod !== !!binding.ctrl) return false;
+	if (e.shiftKey !== !!binding.shift) return false;
+	if (e.altKey !== !!binding.alt) return false;
+
+	return true;
+}
+
+const KEY_LABELS: Record<string, string> = {
+	" ": "Space",
+	delete: "Del",
+	backspace: "⌫",
+	escape: "Esc",
+	arrowup: "↑",
+	arrowdown: "↓",
+	arrowleft: "←",
+	arrowright: "→",
+};
+
+export function formatBinding(binding: ShortcutBinding, isMac: boolean): string {
+	const parts: string[] = [];
+	if (binding.ctrl) parts.push(isMac ? "⌘" : "Ctrl");
+	if (binding.shift) parts.push(isMac ? "⇧" : "Shift");
+	if (binding.alt) parts.push(isMac ? "⌥" : "Alt");
+	parts.push(KEY_LABELS[binding.key] ?? binding.key.toUpperCase());
+	return parts.join(" + ");
+}
+
+export function mergeWithDefaults(partial: Partial<ShortcutsConfig>): ShortcutsConfig {
+	const merged = { ...DEFAULT_SHORTCUTS };
+	for (const action of SHORTCUT_ACTIONS) {
+		if (partial[action]) {
+			merged[action] = partial[action] as ShortcutBinding;
+		}
+	}
+	return merged;
+}
diff --git a/src/lib/userPreferences.test.ts b/src/lib/userPreferences.test.ts
new file mode 100644
index 0000000..5ba9fce
--- /dev/null
+++ b/src/lib/userPreferences.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { parentDirectoryOf } from "./userPreferences";
+
+describe("parentDirectoryOf", () => {
+	it("returns the directory for a POSIX path", () => {
+		expect(parentDirectoryOf("/Users/me/Movies/clip.mp4")).toBe("/Users/me/Movies");
+	});
+
+	it("returns the directory for a Windows path", () => {
+		expect(parentDirectoryOf("C:\\Users\\me\\Movies\\clip.mp4")).toBe("C:\\Users\\me\\Movies");
+	});
+
+	it("preserves the POSIX root when the file is at /", () => {
+		expect(parentDirectoryOf("/video.mp4")).toBe("/");
+	});
+
+	it("preserves the Windows drive root with its trailing separator", () => {
+		expect(parentDirectoryOf("C:\\video.mp4")).toBe("C:\\");
+		expect(parentDirectoryOf("D:/video.mp4")).toBe("D:/");
+	});
+
+	it("returns null when no separator is present", () => {
+		expect(parentDirectoryOf("video.mp4")).toBeNull();
+		expect(parentDirectoryOf("")).toBeNull();
+	});
+});
diff --git a/src/lib/userPreferences.ts b/src/lib/userPreferences.ts
new file mode 100644
index 0000000..28a4506
--- /dev/null
+++ b/src/lib/userPreferences.ts
@@ -0,0 +1,139 @@
+import {
+	DEFAULT_EDITOR_LAYOUT_SETTINGS,
+	DEFAULT_EXPORT_SETTINGS,
+} from "@/components/video-editor/editorDefaults";
+import type { ExportFormat, ExportQuality } from "@/lib/exporter";
+import type { AspectRatio } from "@/utils/aspectRatioUtils";
+
+const PREFS_KEY = "openscreen_user_preferences";
+
+const VALID_ASPECT_RATIOS: readonly string[] = [
+	"16:9",
+	"9:16",
+	"1:1",
+	"4:3",
+	"4:5",
+	"16:10",
+	"10:16",
+	"native",
+];
+
+export interface UserPreferences {
+	/** Default padding % */
+	padding: number;
+	/** Default aspect ratio */
+	aspectRatio: AspectRatio;
+	/** Default export quality */
+	exportQuality: ExportQuality;
+	/** Default export format */
+	exportFormat: ExportFormat;
+	/** Folder used for the most recent successful export, if any */
+	exportFolder: string | null;
+}
+
+export const DEFAULT_PREFS: UserPreferences = {
+	padding: DEFAULT_EDITOR_LAYOUT_SETTINGS.padding,
+	aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
+	exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
+	exportFormat: DEFAULT_EXPORT_SETTINGS.format,
+	exportFolder: null,
+};
+
+function safeJsonParse(text: string | null): Record<string, unknown> | null {
+	if (!text) return null;
+	try {
+		return JSON.parse(text);
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Load persisted user preferences from localStorage.
+ * Returns defaults for any missing or invalid fields.
+ */
+export function loadUserPreferences(): UserPreferences {
+	let raw: Record<string, unknown> | null = null;
+	try {
+		raw = safeJsonParse(localStorage.getItem(PREFS_KEY));
+	} catch {
+		return { ...DEFAULT_PREFS };
+	}
+	if (!raw || typeof raw !== "object") return { ...DEFAULT_PREFS };
+
+	return {
+		padding:
+			typeof raw.padding === "number" &&
+			Number.isFinite(raw.padding) &&
+			raw.padding >= 0 &&
+			raw.padding <= 100
+				? raw.padding
+				: DEFAULT_PREFS.padding,
+		aspectRatio:
+			typeof raw.aspectRatio === "string" && VALID_ASPECT_RATIOS.includes(raw.aspectRatio)
+				? (raw.aspectRatio as AspectRatio)
+				: DEFAULT_PREFS.aspectRatio,
+		exportQuality:
+			raw.exportQuality === "medium" ||
+			raw.exportQuality === "good" ||
+			raw.exportQuality === "source"
+				? (raw.exportQuality as ExportQuality)
+				: DEFAULT_PREFS.exportQuality,
+		exportFormat:
+			raw.exportFormat === "gif" || raw.exportFormat === "mp4"
+				? (raw.exportFormat as ExportFormat)
+				: DEFAULT_PREFS.exportFormat,
+		exportFolder:
+			typeof raw.exportFolder === "string" && raw.exportFolder.length > 0
+				? raw.exportFolder
+				: DEFAULT_PREFS.exportFolder,
+	};
+}
+
+/**
+ * Extracts the parent directory from a saved file path. Handles both POSIX
+ * and Windows separators since the path comes from the OS save dialog.
+ *
+ * Root directories are preserved with their trailing separator so that the
+ * value is still a valid directory path:
+ *   "/video.mp4"      -> "/"
+ *   "C:\\video.mp4"   -> "C:\\"
+ *
+ * Returns null if no separator is found.
+ */
+export function parentDirectoryOf(filePath: string): string | null {
+	const lastSep = Math.max(filePath.lastIndexOf("/"), filePath.lastIndexOf("\\"));
+	if (lastSep < 0) return null;
+
+	// POSIX root, e.g. "/video.mp4" -> "/"
+	if (lastSep === 0) return filePath[0];
+
+	// Windows drive root, e.g. "C:\\video.mp4" -> "C:\\"
+	if (lastSep === 2 && /^[A-Za-z]:[/\\]/.test(filePath)) {
+		return filePath.slice(0, lastSep + 1);
+	}
+
+	return filePath.slice(0, lastSep);
+}
+
+/**
+ * Returns the remembered export folder as `string | undefined`, suitable for
+ * passing directly to IPC handlers that treat absence as "use the default".
+ */
+export function getExportFolder(): string | undefined {
+	return loadUserPreferences().exportFolder ?? undefined;
+}
+
+/**
+ * Persist user preferences to localStorage.
+ * Only the explicitly provided fields are updated.
+ */
+export function saveUserPreferences(partial: Partial<UserPreferences>): void {
+	const current = loadUserPreferences();
+	const merged = { ...current, ...partial };
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(merged));
+	} catch {
+		// localStorage may be unavailable (e.g. private browsing quota exceeded)
+	}
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..ac680b3
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
diff --git a/src/lib/wallpaper.test.ts b/src/lib/wallpaper.test.ts
new file mode 100644
index 0000000..02596aa
--- /dev/null
+++ b/src/lib/wallpaper.test.ts
@@ -0,0 +1,276 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AssetBaseUnavailableError, UnsafeAssetPathError } from "./assetPath";
+import {
+	BackgroundLoadError,
+	classifyWallpaper,
+	DEFAULT_WALLPAPER,
+	resolveImageWallpaperUrl,
+	UnsafeImagePrefixError,
+	WALLPAPER_COUNT,
+	WALLPAPER_PATHS,
+} from "./wallpaper";
+
+describe("WALLPAPER_PATHS", () => {
+	it("contains WALLPAPER_COUNT entries", () => {
+		expect(WALLPAPER_PATHS).toHaveLength(WALLPAPER_COUNT);
+	});
+
+	it("DEFAULT_WALLPAPER is WALLPAPER_PATHS[0]", () => {
+		expect(DEFAULT_WALLPAPER).toBe(WALLPAPER_PATHS[0]);
+	});
+});
+
+describe("classifyWallpaper", () => {
+	it("hex color", () => {
+		expect(classifyWallpaper("#1a1a2e")).toEqual({ kind: "color", value: "#1a1a2e" });
+	});
+
+	it("rgb() color", () => {
+		expect(classifyWallpaper("rgb(1, 2, 3)")).toEqual({ kind: "color", value: "rgb(1, 2, 3)" });
+	});
+
+	it("rgba() color", () => {
+		expect(classifyWallpaper("rgba(1, 2, 3, 0.5)")).toEqual({
+			kind: "color",
+			value: "rgba(1, 2, 3, 0.5)",
+		});
+	});
+
+	it("hsl() color", () => {
+		expect(classifyWallpaper("hsl(180, 50%, 50%)")).toEqual({
+			kind: "color",
+			value: "hsl(180, 50%, 50%)",
+		});
+	});
+
+	it("oklch() color", () => {
+		expect(classifyWallpaper("oklch(50% 0.1 180)")).toEqual({
+			kind: "color",
+			value: "oklch(50% 0.1 180)",
+		});
+	});
+
+	it("linear gradient", () => {
+		const v = "linear-gradient(90deg, red, blue)";
+		expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+	});
+
+	it("radial gradient", () => {
+		const v = "radial-gradient(circle, red, blue)";
+		expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+	});
+
+	it("conic gradient", () => {
+		const v = "conic-gradient(red, blue)";
+		expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+	});
+
+	it("repeating-linear gradient", () => {
+		const v = "repeating-linear-gradient(45deg, red 0 10px, blue 10px 20px)";
+		expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+	});
+
+	it("repeating-radial gradient", () => {
+		const v = "repeating-radial-gradient(circle, red, blue 20px)";
+		expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+	});
+
+	it("leading-slash image path", () => {
+		expect(classifyWallpaper("/wallpapers/wallpaper1.jpg")).toEqual({
+			kind: "image",
+			path: "/wallpapers/wallpaper1.jpg",
+		});
+	});
+
+	it("http URL as image", () => {
+		expect(classifyWallpaper("https://example.com/bg.jpg")).toEqual({
+			kind: "image",
+			path: "https://example.com/bg.jpg",
+		});
+	});
+
+	it("file:// URL as image", () => {
+		expect(classifyWallpaper("file:///tmp/bg.jpg")).toEqual({
+			kind: "image",
+			path: "file:///tmp/bg.jpg",
+		});
+	});
+
+	it("data URI as image", () => {
+		expect(classifyWallpaper("data:image/png;base64,AAA")).toEqual({
+			kind: "image",
+			path: "data:image/png;base64,AAA",
+		});
+	});
+
+	it("named color falls back to color", () => {
+		expect(classifyWallpaper("red")).toEqual({ kind: "color", value: "red" });
+	});
+
+	it("empty string falls back to black", () => {
+		expect(classifyWallpaper("")).toEqual({ kind: "color", value: "#000000" });
+	});
+
+	it("trims whitespace", () => {
+		expect(classifyWallpaper("  #abcdef  ")).toEqual({ kind: "color", value: "#abcdef" });
+	});
+
+	it("DEFAULT_WALLPAPER classifies as image", () => {
+		expect(classifyWallpaper(DEFAULT_WALLPAPER)).toEqual({
+			kind: "image",
+			path: DEFAULT_WALLPAPER,
+		});
+	});
+});
+
+describe("resolveImageWallpaperUrl", () => {
+	beforeEach(() => {
+		vi.stubGlobal("window", {
+			...globalThis.window,
+			location: { protocol: "http:" },
+			electronAPI: undefined,
+		});
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it("passes through http URL", () => {
+		expect(resolveImageWallpaperUrl("http://example.com/bg.jpg")).toBe("http://example.com/bg.jpg");
+	});
+
+	it("passes through https URL", () => {
+		expect(resolveImageWallpaperUrl("https://example.com/bg.jpg")).toBe(
+			"https://example.com/bg.jpg",
+		);
+	});
+
+	it("passes through file:// URL", () => {
+		expect(resolveImageWallpaperUrl("file:///tmp/bg.jpg")).toBe("file:///tmp/bg.jpg");
+	});
+
+	it("passes through data URI", () => {
+		const uri = "data:image/png;base64,AAAA";
+		expect(resolveImageWallpaperUrl(uri)).toBe(uri);
+	});
+
+	it("resolves leading-slash wallpaper path via http fallback", () => {
+		expect(resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg")).toBe(
+			"/wallpapers/wallpaper1.jpg",
+		);
+	});
+
+	it("resolves bare relative wallpaper path", () => {
+		expect(resolveImageWallpaperUrl("wallpapers/wallpaper1.jpg")).toBe(
+			"/wallpapers/wallpaper1.jpg",
+		);
+	});
+
+	it("encodes special characters in path segments", () => {
+		expect(resolveImageWallpaperUrl("/wallpapers/my image.jpg")).toBe("/wallpapers/my%20image.jpg");
+	});
+
+	it("rejects image paths outside /wallpapers/ with UnsafeImagePrefixError as cause", () => {
+		try {
+			resolveImageWallpaperUrl("/etc/passwd");
+			expect.fail("should have thrown");
+		} catch (err) {
+			if (!(err instanceof BackgroundLoadError)) throw err;
+			expect(err.cause).toBeInstanceOf(UnsafeImagePrefixError);
+		}
+	});
+
+	it("wraps traversal attempts in BackgroundLoadError (preserves UnsafeAssetPathError as cause)", () => {
+		try {
+			resolveImageWallpaperUrl("/wallpapers/../etc/passwd");
+			expect.fail("should have thrown");
+		} catch (err) {
+			if (!(err instanceof BackgroundLoadError)) throw err;
+			expect(err.cause).toBeInstanceOf(UnsafeAssetPathError);
+		}
+	});
+
+	it("wraps percent-encoded traversal in BackgroundLoadError", () => {
+		try {
+			resolveImageWallpaperUrl("/wallpapers/%2e%2e/app.asar");
+			expect.fail("should have thrown");
+		} catch (err) {
+			if (!(err instanceof BackgroundLoadError)) throw err;
+			expect(err.cause).toBeInstanceOf(UnsafeAssetPathError);
+		}
+	});
+
+	it("resolves via electronAPI.assetBaseUrl when not http", () => {
+		vi.stubGlobal("window", {
+			...globalThis.window,
+			location: { protocol: "file:" },
+			electronAPI: { assetBaseUrl: "file:///opt/app/public/" },
+		});
+		expect(resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg")).toBe(
+			"file:///opt/app/public/wallpapers/wallpaper1.jpg",
+		);
+	});
+
+	it("appends trailing slash to assetBaseUrl if missing", () => {
+		vi.stubGlobal("window", {
+			...globalThis.window,
+			location: { protocol: "file:" },
+			electronAPI: { assetBaseUrl: "file:///opt/app/public" },
+		});
+		expect(resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg")).toBe(
+			"file:///opt/app/public/wallpapers/wallpaper1.jpg",
+		);
+	});
+
+	it("wraps AssetBaseUnavailableError in BackgroundLoadError when assetBaseUrl is empty", () => {
+		vi.stubGlobal("window", {
+			...globalThis.window,
+			location: { protocol: "file:" },
+			electronAPI: { assetBaseUrl: "" },
+		});
+		try {
+			resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg");
+			expect.fail("should have thrown");
+		} catch (err) {
+			if (!(err instanceof BackgroundLoadError)) throw err;
+			expect(err.cause).toBeInstanceOf(AssetBaseUnavailableError);
+		}
+	});
+});
+
+describe("BackgroundLoadError", () => {
+	it("carries the failing URL and is instanceof Error", () => {
+		const err = new BackgroundLoadError("/home/user/secret/wallpaper.jpg");
+		expect(err).toBeInstanceOf(Error);
+		expect(err).toBeInstanceOf(BackgroundLoadError);
+		expect(err.url).toBe("/home/user/secret/wallpaper.jpg");
+		expect(err.name).toBe("BackgroundLoadError");
+	});
+
+	it("displayUrl hides parent directories to avoid leaking PII", () => {
+		const err = new BackgroundLoadError("file:///home/enrique/projects/openscreen/wallpaper1.jpg");
+		expect(err.displayUrl).toBe("wallpaper1.jpg");
+	});
+
+	it("displayUrl abbreviates data URIs", () => {
+		const err = new BackgroundLoadError("data:image/png;base64,AAA");
+		expect(err.displayUrl).toBe("data:…");
+	});
+
+	it("displayUrl returns sentinel for empty-basename URLs", () => {
+		const err = new BackgroundLoadError("file:///");
+		expect(err.displayUrl).toBe("(unknown)");
+	});
+
+	it("displayUrl returns sentinel for unparseable bare slash", () => {
+		const err = new BackgroundLoadError("/");
+		expect(err.displayUrl).toBe("(unknown)");
+	});
+
+	it("preserves cause when provided", () => {
+		const cause = new Error("inner");
+		const err = new BackgroundLoadError("file:///missing.jpg", cause);
+		expect(err.cause).toBe(cause);
+	});
+});
diff --git a/src/lib/wallpaper.ts b/src/lib/wallpaper.ts
new file mode 100644
index 0000000..6974a04
--- /dev/null
+++ b/src/lib/wallpaper.ts
@@ -0,0 +1,96 @@
+import { getAssetPath } from "@/lib/assetPath";
+
+export const WALLPAPER_COUNT = 18;
+
+export const WALLPAPER_PATHS: readonly string[] = Array.from(
+	{ length: WALLPAPER_COUNT },
+	(_, i) => `/wallpapers/wallpaper${i + 1}.jpg`,
+);
+
+export const DEFAULT_WALLPAPER = WALLPAPER_PATHS[0];
+
+export type WallpaperClassification =
+	| { kind: "color"; value: string }
+	| { kind: "gradient"; value: string }
+	| { kind: "image"; path: string };
+
+const GRADIENT_RE = /^(repeating-)?(linear|radial|conic)-gradient\(/;
+const COLOR_FUNC_RE = /^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color)\(/;
+const IMAGE_URL_RE = /^(\/|https?:\/\/|file:\/\/|data:)/;
+
+export function classifyWallpaper(value: string): WallpaperClassification {
+	const trimmed = value.trim();
+	if (trimmed === "") {
+		return { kind: "color", value: "#000000" };
+	}
+	if (trimmed.startsWith("#") || COLOR_FUNC_RE.test(trimmed)) {
+		return { kind: "color", value: trimmed };
+	}
+	if (GRADIENT_RE.test(trimmed)) {
+		return { kind: "gradient", value: trimmed };
+	}
+	if (IMAGE_URL_RE.test(trimmed)) {
+		return { kind: "image", path: trimmed };
+	}
+	return { kind: "color", value: trimmed };
+}
+
+const ALLOWED_IMAGE_PREFIX = "/wallpapers/";
+
+export class UnsafeImagePrefixError extends Error {
+	constructor(prefix: string) {
+		super(`Image wallpaper path must live under ${prefix}`);
+		this.name = "UnsafeImagePrefixError";
+	}
+}
+
+export function resolveImageWallpaperUrl(imagePath: string): string {
+	if (
+		imagePath.startsWith("http://") ||
+		imagePath.startsWith("https://") ||
+		imagePath.startsWith("file://") ||
+		imagePath.startsWith("data:")
+	) {
+		return imagePath;
+	}
+	const withLeadingSlash = imagePath.startsWith("/") ? imagePath : `/${imagePath}`;
+	if (!withLeadingSlash.startsWith(ALLOWED_IMAGE_PREFIX)) {
+		throw new BackgroundLoadError(imagePath, new UnsafeImagePrefixError(ALLOWED_IMAGE_PREFIX));
+	}
+	try {
+		return getAssetPath(withLeadingSlash.slice(1));
+	} catch (cause) {
+		if (cause instanceof BackgroundLoadError) throw cause;
+		throw new BackgroundLoadError(imagePath, cause);
+	}
+}
+
+export class BackgroundLoadError extends Error {
+	readonly url: string;
+	readonly cause?: unknown;
+
+	constructor(url: string, cause?: unknown) {
+		super(`Failed to load background image: ${displayBasename(url)}`);
+		this.name = "BackgroundLoadError";
+		this.url = url;
+		this.cause = cause;
+	}
+
+	get displayUrl(): string {
+		return displayBasename(this.url);
+	}
+}
+
+function displayBasename(url: string): string {
+	if (url.startsWith("data:")) {
+		return "data:…";
+	}
+	try {
+		const parsed = new URL(url);
+		const last = parsed.pathname.split("/").filter(Boolean).pop();
+		return last ? decodeURIComponent(last) : "(unknown)";
+	} catch {
+		const last = url.split("/").filter(Boolean).pop();
+		return last ?? "(unknown)";
+	}
+}
diff --git a/src/lib/webcamMaskShapes.ts b/src/lib/webcamMaskShapes.ts
new file mode 100644
index 0000000..f90e727
--- /dev/null
+++ b/src/lib/webcamMaskShapes.ts
@@ -0,0 +1,48 @@
+import type { WebcamMaskShape } from "@/components/video-editor/types";
+
+/**
+ * Returns a CSS clip-path value for the given shape, or null if borderRadius alone suffices.
+ */
+export function getCssClipPath(shape: WebcamMaskShape): string | null {
+	switch (shape) {
+		case "circle":
+			return "circle(50% at 50% 50%)";
+		case "rectangle":
+		case "rounded":
+		case "square":
+		default:
+			return null;
+	}
+}
+
+/**
+ * Draws a Canvas 2D clip path for the given webcam mask shape.
+ * Call ctx.beginPath() is handled internally; caller should call ctx.clip() after.
+ */
+export function drawCanvasClipPath(
+	ctx: CanvasRenderingContext2D,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+	shape: WebcamMaskShape,
+	borderRadius: number,
+): void {
+	ctx.beginPath();
+	switch (shape) {
+		case "circle": {
+			const cx = x + w / 2;
+			const cy = y + h / 2;
+			const r = Math.min(w, h) / 2;
+			ctx.arc(cx, cy, r, 0, Math.PI * 2);
+			break;
+		}
+		case "rectangle":
+		case "rounded":
+		case "square":
+		default:
+			ctx.roundRect(x, y, w, h, borderRadius);
+			break;
+	}
+	ctx.closePath();
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..365bdc7
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { I18nProvider } from "./contexts/I18nContext";
+import "./index.css";
+
+const windowType = new URLSearchParams(window.location.search).get("windowType") || "";
+if (
+	windowType === "hud-overlay" ||
+	windowType === "source-selector" ||
+	windowType === "countdown-overlay"
+) {
+	document.body.style.background = "transparent";
+	document.documentElement.style.background = "transparent";
+	document.getElementById("root")?.style.setProperty("background", "transparent");
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<I18nProvider>
+			<App />
+		</I18nProvider>
+	</React.StrictMode>,
+);
diff --git a/src/native/client.ts b/src/native/client.ts
new file mode 100644
index 0000000..3f53ce4
--- /dev/null
+++ b/src/native/client.ts
@@ -0,0 +1,133 @@
+import {
+	type CursorCapabilities,
+	type CursorRecordingData,
+	type CursorTelemetryPoint,
+	NATIVE_BRIDGE_CHANNEL,
+	type NativeBridgeRequest,
+	type NativeBridgeResponse,
+	type NativePlatform,
+	type ProjectContext,
+	type ProjectFileResult,
+	type ProjectPathResult,
+	type SystemCapabilities,
+} from "./contracts";
+
+function createRequestId() {
+	if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+		return crypto.randomUUID();
+	}
+
+	return `req-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function getElectronBridge() {
+	if (!window.electronAPI?.invokeNativeBridge) {
+		throw new Error(
+			`Native bridge unavailable. Expected ${NATIVE_BRIDGE_CHANNEL} transport in preload.`,
+		);
+	}
+
+	return window.electronAPI.invokeNativeBridge;
+}
+
+export async function invokeNativeBridge<TData = unknown>(
+	request: NativeBridgeRequest,
+): Promise<NativeBridgeResponse<TData>> {
+	const invoke = getElectronBridge();
+	return invoke({
+		...request,
+		requestId: request.requestId ?? createRequestId(),
+	});
+}
+
+export async function requireNativeBridgeData<TData>(request: NativeBridgeRequest): Promise<TData> {
+	const response = await invokeNativeBridge<TData>(request);
+	if (!response.ok) {
+		throw new Error(response.error.message);
+	}
+
+	return response.data;
+}
+
+export const nativeBridgeClient = {
+	rawInvoke: invokeNativeBridge,
+	system: {
+		getPlatform: () =>
+			requireNativeBridgeData<NativePlatform>({
+				domain: "system",
+				action: "getPlatform",
+			}),
+		getAssetBasePath: () =>
+			requireNativeBridgeData<string | null>({
+				domain: "system",
+				action: "getAssetBasePath",
+			}),
+		getCapabilities: () =>
+			requireNativeBridgeData<SystemCapabilities>({
+				domain: "system",
+				action: "getCapabilities",
+			}),
+	},
+	project: {
+		getCurrentContext: () =>
+			requireNativeBridgeData<ProjectContext>({
+				domain: "project",
+				action: "getCurrentContext",
+			}),
+		saveProjectFile: (projectData: unknown, suggestedName?: string, existingProjectPath?: string) =>
+			requireNativeBridgeData<ProjectFileResult>({
+				domain: "project",
+				action: "saveProjectFile",
+				payload: {
+					projectData,
+					suggestedName,
+					existingProjectPath,
+				},
+			}),
+		loadProjectFile: () =>
+			requireNativeBridgeData<ProjectFileResult>({
+				domain: "project",
+				action: "loadProjectFile",
+			}),
+		loadCurrentProjectFile: () =>
+			requireNativeBridgeData<ProjectFileResult>({
+				domain: "project",
+				action: "loadCurrentProjectFile",
+			}),
+		setCurrentVideoPath: (path: string) =>
+			requireNativeBridgeData<ProjectPathResult>({
+				domain: "project",
+				action: "setCurrentVideoPath",
+				payload: { path },
+			}),
+		getCurrentVideoPath: () =>
+			requireNativeBridgeData<ProjectPathResult>({
+				domain: "project",
+				action: "getCurrentVideoPath",
+			}),
+		clearCurrentVideoPath: () =>
+			requireNativeBridgeData<ProjectPathResult>({
+				domain: "project",
+				action: "clearCurrentVideoPath",
+			}),
+	},
+	cursor: {
+		getCapabilities: () =>
+			requireNativeBridgeData<CursorCapabilities>({
+				domain: "cursor",
+				action: "getCapabilities",
+			}),
+		getRecordingData: (videoPath?: string) =>
+			requireNativeBridgeData<CursorRecordingData>({
+				domain: "cursor",
+				action: "getRecordingData",
+				payload: videoPath ? { videoPath } : {},
+			}),
+		getTelemetry: (videoPath?: string) =>
+			requireNativeBridgeData<CursorTelemetryPoint[]>({
+				domain: "cursor",
+				action: "getTelemetry",
+				payload: videoPath ? { videoPath } : {},
+			}),
+	},
+};
diff --git a/src/native/contracts.ts b/src/native/contracts.ts
new file mode 100644
index 0000000..6836095
--- /dev/null
+++ b/src/native/contracts.ts
@@ -0,0 +1,229 @@
+export const NATIVE_BRIDGE_CHANNEL = "native-bridge:invoke";
+export const NATIVE_BRIDGE_VERSION = 1;
+
+export type NativePlatform = "darwin" | "win32" | "linux";
+export type CursorProviderKind = "native" | "none";
+export type NativeCursorType =
+	| "arrow"
+	| "text"
+	| "pointer"
+	| "crosshair"
+	| "open-hand"
+	| "closed-hand"
+	| "resize-ew"
+	| "resize-ns"
+	| "resize-nesw"
+	| "resize-nwse"
+	| "move"
+	| "not-allowed"
+	| "wait"
+	| "app-starting"
+	| "help"
+	| "up-arrow";
+
+export interface CursorTelemetryPoint {
+	timeMs: number;
+	cx: number;
+	cy: number;
+}
+
+export interface CursorRecordingSample extends CursorTelemetryPoint {
+	assetId?: string | null;
+	visible?: boolean;
+	cursorType?: NativeCursorType | null;
+	interactionType?: "move" | "click" | "mouseup";
+}
+
+export interface NativeCursorAsset {
+	id: string;
+	platform: NativePlatform;
+	imageDataUrl: string;
+	width: number;
+	height: number;
+	hotspotX: number;
+	hotspotY: number;
+	scaleFactor?: number;
+	cursorType?: NativeCursorType | null;
+}
+
+export interface CursorRecordingData {
+	version: number;
+	provider: CursorProviderKind;
+	samples: CursorRecordingSample[];
+	assets: NativeCursorAsset[];
+}
+
+export interface CursorCapabilities {
+	telemetry: boolean;
+	systemAssets: boolean;
+	provider: CursorProviderKind;
+}
+
+export interface SystemCapabilities {
+	bridgeVersion: typeof NATIVE_BRIDGE_VERSION;
+	platform: NativePlatform;
+	cursor: CursorCapabilities;
+	project: {
+		currentContext: boolean;
+	};
+}
+
+export interface ProjectContext {
+	currentProjectPath: string | null;
+	currentVideoPath: string | null;
+}
+
+export interface ProjectPathResult {
+	success: boolean;
+	path?: string;
+	message?: string;
+	canceled?: boolean;
+	error?: string;
+}
+
+export interface ProjectFileResult {
+	success: boolean;
+	path?: string;
+	project?: unknown;
+	message?: string;
+	canceled?: boolean;
+	error?: string;
+}
+
+export type NativeBridgeErrorCode =
+	| "INVALID_REQUEST"
+	| "UNSUPPORTED_ACTION"
+	| "NOT_FOUND"
+	| "UNAVAILABLE"
+	| "INTERNAL_ERROR";
+
+export interface NativeBridgeError {
+	code: NativeBridgeErrorCode;
+	message: string;
+	retryable: boolean;
+}
+
+export interface NativeBridgeMeta {
+	version: typeof NATIVE_BRIDGE_VERSION;
+	requestId: string;
+	timestampMs: number;
+}
+
+export interface NativeBridgeSuccess<TData> {
+	ok: true;
+	data: TData;
+	meta: NativeBridgeMeta;
+}
+
+export interface NativeBridgeFailure {
+	ok: false;
+	error: NativeBridgeError;
+	meta: NativeBridgeMeta;
+}
+
+export type NativeBridgeResponse<TData = unknown> =
+	| NativeBridgeSuccess<TData>
+	| NativeBridgeFailure;
+
+type EmptyPayload = Record<string, never>;
+
+export type NativeBridgeRequest =
+	| {
+			domain: "system";
+			action: "getPlatform";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "system";
+			action: "getAssetBasePath";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "system";
+			action: "getCapabilities";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "getCurrentContext";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "saveProjectFile";
+			payload: {
+				projectData: unknown;
+				suggestedName?: string;
+				existingProjectPath?: string;
+			};
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "loadProjectFile";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "loadCurrentProjectFile";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "setCurrentVideoPath";
+			payload: {
+				path: string;
+			};
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "getCurrentVideoPath";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "project";
+			action: "clearCurrentVideoPath";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "cursor";
+			action: "getCapabilities";
+			payload?: EmptyPayload;
+			requestId?: string;
+	  }
+	| {
+			domain: "cursor";
+			action: "getTelemetry";
+			payload?: {
+				videoPath?: string;
+			};
+			requestId?: string;
+	  }
+	| {
+			domain: "cursor";
+			action: "getRecordingData";
+			payload?: {
+				videoPath?: string;
+			};
+			requestId?: string;
+	  };
+
+export type NativeBridgeEventName =
+	| "project.contextChanged"
+	| "cursor.providerChanged"
+	| "cursor.telemetryLoaded";
+
+export interface NativeBridgeEvent<TPayload = unknown> {
+	name: NativeBridgeEventName;
+	payload: TPayload;
+	meta: NativeBridgeMeta;
+}
diff --git a/src/native/hooks/useCursorRecordingData.ts b/src/native/hooks/useCursorRecordingData.ts
new file mode 100644
index 0000000..6b3451a
--- /dev/null
+++ b/src/native/hooks/useCursorRecordingData.ts
@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import type { CursorRecordingData } from "@/native/contracts";
+import { nativeBridgeClient } from "../client";
+
+interface UseCursorRecordingDataResult {
+	data: CursorRecordingData | null;
+	loading: boolean;
+	error: string | null;
+}
+
+export function useCursorRecordingData(videoPath: string | null): UseCursorRecordingDataResult {
+	const [data, setData] = useState<CursorRecordingData | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		async function loadCursorRecordingData() {
+			if (!videoPath) {
+				setData(null);
+				setLoading(false);
+				setError(null);
+				return;
+			}
+
+			setLoading(true);
+			setError(null);
+
+			try {
+				const nextData = await nativeBridgeClient.cursor.getRecordingData(videoPath);
+				if (!cancelled) {
+					setData(nextData);
+				}
+			} catch (nextError) {
+				if (!cancelled) {
+					setData(null);
+					setError(
+						nextError instanceof Error ? nextError.message : "Failed to load cursor recording data",
+					);
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false);
+				}
+			}
+		}
+
+		loadCursorRecordingData();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [videoPath]);
+
+	return {
+		data,
+		loading,
+		error,
+	};
+}
diff --git a/src/native/hooks/useCursorTelemetry.ts b/src/native/hooks/useCursorTelemetry.ts
new file mode 100644
index 0000000..1617680
--- /dev/null
+++ b/src/native/hooks/useCursorTelemetry.ts
@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import type { CursorTelemetryPoint } from "@/components/video-editor/types";
+import { nativeBridgeClient } from "../client";
+
+interface UseCursorTelemetryResult {
+	samples: CursorTelemetryPoint[];
+	loading: boolean;
+	error: string | null;
+}
+
+export function useCursorTelemetry(videoPath: string | null): UseCursorTelemetryResult {
+	const [samples, setSamples] = useState<CursorTelemetryPoint[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		async function loadCursorTelemetry() {
+			if (!videoPath) {
+				setSamples([]);
+				setLoading(false);
+				setError(null);
+				return;
+			}
+
+			setLoading(true);
+			setError(null);
+
+			try {
+				const nextSamples = await nativeBridgeClient.cursor.getTelemetry(videoPath);
+				if (!cancelled) {
+					setSamples(nextSamples);
+				}
+			} catch (nextError) {
+				if (!cancelled) {
+					setSamples([]);
+					setError(
+						nextError instanceof Error ? nextError.message : "Failed to load cursor telemetry",
+					);
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false);
+				}
+			}
+		}
+
+		loadCursorTelemetry();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [videoPath]);
+
+	return {
+		samples,
+		loading,
+		error,
+	};
+}
diff --git a/src/native/index.ts b/src/native/index.ts
new file mode 100644
index 0000000..817d1cf
--- /dev/null
+++ b/src/native/index.ts
@@ -0,0 +1,4 @@
+export * from "./client";
+export * from "./contracts";
+export * from "./hooks/useCursorRecordingData";
+export * from "./hooks/useCursorTelemetry";
diff --git a/src/utils/aspectRatioUtils.test.ts b/src/utils/aspectRatioUtils.test.ts
new file mode 100644
index 0000000..6909f3d
--- /dev/null
+++ b/src/utils/aspectRatioUtils.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { getNativeAspectRatioValue } from "./aspectRatioUtils";
+
+const FALLBACK_RATIO = 16 / 9;
+
+describe("getNativeAspectRatioValue", () => {
+	it("returns the video ratio when no crop region is provided", () => {
+		expect(getNativeAspectRatioValue(1920, 1080)).toBe(16 / 9);
+	});
+
+	it("applies crop width and height to the video ratio", () => {
+		expect(getNativeAspectRatioValue(1920, 1080, { x: 0, y: 0, width: 0.5, height: 1 })).toBe(
+			8 / 9,
+		);
+	});
+
+	it("falls back when video metadata is zero or non-finite", () => {
+		expect(getNativeAspectRatioValue(0, 1080)).toBe(FALLBACK_RATIO);
+		expect(getNativeAspectRatioValue(1920, 0)).toBe(FALLBACK_RATIO);
+		expect(getNativeAspectRatioValue(Number.NaN, 1080)).toBe(FALLBACK_RATIO);
+		expect(getNativeAspectRatioValue(1920, Number.POSITIVE_INFINITY)).toBe(FALLBACK_RATIO);
+	});
+
+	it("falls back when crop dimensions are non-positive or non-finite", () => {
+		expect(getNativeAspectRatioValue(1920, 1080, { x: 0, y: 0, width: 0, height: 1 })).toBe(
+			FALLBACK_RATIO,
+		);
+		expect(getNativeAspectRatioValue(1920, 1080, { x: 0, y: 0, width: 1, height: -1 })).toBe(
+			FALLBACK_RATIO,
+		);
+		expect(
+			getNativeAspectRatioValue(1920, 1080, {
+				x: 0,
+				y: 0,
+				width: Number.POSITIVE_INFINITY,
+				height: 1,
+			}),
+		).toBe(FALLBACK_RATIO);
+	});
+});
diff --git a/src/utils/aspectRatioUtils.ts b/src/utils/aspectRatioUtils.ts
new file mode 100644
index 0000000..5e174ab
--- /dev/null
+++ b/src/utils/aspectRatioUtils.ts
@@ -0,0 +1,93 @@
+export const ASPECT_RATIOS = [
+	"16:9",
+	"9:16",
+	"1:1",
+	"4:3",
+	"4:5",
+	"16:10",
+	"10:16",
+	"native",
+] as const;
+
+export type AspectRatio = (typeof ASPECT_RATIOS)[number];
+
+const NATIVE_ASPECT_RATIO_FALLBACK = 16 / 9;
+
+/**
+ * Returns the numeric value of an aspect ratio.
+ * For "native", returns a fallback ratio of 16/9.
+ * Callers with source/crop context should use getNativeAspectRatioValue().
+ */
+export function getAspectRatioValue(aspectRatio: AspectRatio): number {
+	switch (aspectRatio) {
+		case "16:9":
+			return 16 / 9;
+		case "9:16":
+			return 9 / 16;
+		case "1:1":
+			return 1;
+		case "4:3":
+			return 4 / 3;
+		case "4:5":
+			return 4 / 5;
+		case "16:10":
+			return 16 / 10;
+		case "10:16":
+			return 10 / 16;
+		case "native":
+			return NATIVE_ASPECT_RATIO_FALLBACK;
+		default: {
+			const _exhaustiveCheck: never = aspectRatio;
+			return _exhaustiveCheck;
+		}
+	}
+}
+
+export function getNativeAspectRatioValue(
+	videoWidth: number,
+	videoHeight: number,
+	cropRegion?: { x: number; y: number; width: number; height: number },
+): number {
+	const cropW = cropRegion?.width ?? 1;
+	const cropH = cropRegion?.height ?? 1;
+	if (
+		!Number.isFinite(videoWidth) ||
+		!Number.isFinite(videoHeight) ||
+		!Number.isFinite(cropW) ||
+		!Number.isFinite(cropH) ||
+		videoWidth <= 0 ||
+		videoHeight <= 0 ||
+		cropW <= 0 ||
+		cropH <= 0
+	) {
+		return NATIVE_ASPECT_RATIO_FALLBACK;
+	}
+
+	const ratio = (videoWidth * cropW) / (videoHeight * cropH);
+	return Number.isFinite(ratio) && ratio > 0 ? ratio : NATIVE_ASPECT_RATIO_FALLBACK;
+}
+
+export function getAspectRatioDimensions(
+	aspectRatio: AspectRatio,
+	baseWidth: number,
+): { width: number; height: number } {
+	const ratio = getAspectRatioValue(aspectRatio);
+	return {
+		width: baseWidth,
+		height: baseWidth / ratio,
+	};
+}
+
+export function getAspectRatioLabel(aspectRatio: AspectRatio): string {
+	if (aspectRatio === "native") return "Original";
+	return aspectRatio;
+}
+
+export function isPortraitAspectRatio(aspectRatio: AspectRatio): boolean {
+	return getAspectRatioValue(aspectRatio) < 1;
+}
+
+export function formatAspectRatioForCSS(aspectRatio: AspectRatio, nativeRatio?: number): string {
+	if (aspectRatio === "native") return String(nativeRatio ?? NATIVE_ASPECT_RATIO_FALLBACK);
+	return aspectRatio.replace(":", "/");
+}
diff --git a/src/utils/getTestId.ts b/src/utils/getTestId.ts
new file mode 100644
index 0000000..07454e4
--- /dev/null
+++ b/src/utils/getTestId.ts
@@ -0,0 +1,10 @@
+export type TestId =
+	| `gif-size-button-${string}`
+	| "export-button"
+	| "export-panel-button"
+	| "gif-format-button"
+	| "mp4-format-button";
+
+export function getTestId(testId: TestId) {
+	return `testId-${testId}`;
+}
diff --git a/src/utils/platformUtils.ts b/src/utils/platformUtils.ts
new file mode 100644
index 0000000..2fb57e1
--- /dev/null
+++ b/src/utils/platformUtils.ts
@@ -0,0 +1,65 @@
+let cachedPlatform: string | null = null;
+
+/**
+ * Gets the current platform from Electron
+ */
+export const getPlatform = async (): Promise<string> => {
+	if (cachedPlatform) return cachedPlatform;
+
+	try {
+		const platform = await window.electronAPI.getPlatform();
+		cachedPlatform = platform;
+		return platform;
+	} catch (error) {
+		console.warn("Failed to get platform from Electron, falling back to navigator:", error);
+		// Fallback for development/testing
+		let fallbackPlatform = "win32";
+		if (typeof navigator !== "undefined") {
+			if (/Mac|iPhone|iPad|iPod/.test(navigator.platform)) {
+				fallbackPlatform = "darwin";
+			} else if (/Linux/.test(navigator.platform)) {
+				fallbackPlatform = "linux";
+			}
+		}
+
+		cachedPlatform = fallbackPlatform;
+		return fallbackPlatform;
+	}
+};
+
+/**
+ * Detects if the current platform is macOS
+ */
+export const isMac = async (): Promise<boolean> => {
+	const platform = await getPlatform();
+	return platform === "darwin";
+};
+
+/**
+ * Gets the modifier key symbol based on the platform
+ */
+export const getModifierKey = async (): Promise<string> => {
+	return (await isMac()) ? "⌘" : "Ctrl";
+};
+
+/**
+ * Gets the shift key symbol based on the platform
+ */
+export const getShiftKey = async (): Promise<string> => {
+	return (await isMac()) ? "⇧" : "Shift";
+};
+
+/**
+ * Formats a keyboard shortcut for display based on the platform
+ * @param keys Array of key combinations (e.g., ['mod', 'D'] or ['shift', 'mod', 'Scroll'])
+ */
+export const formatShortcut = async (keys: string[]): Promise<string> => {
+	const isMacPlatform = await isMac();
+	return keys
+		.map((key) => {
+			if (key.toLowerCase() === "mod") return isMacPlatform ? "⌘" : "Ctrl";
+			if (key.toLowerCase() === "shift") return isMacPlatform ? "⇧" : "Shift";
+			return key;
+		})
+		.join(" + ");
+};
diff --git a/src/utils/timeUtils.ts b/src/utils/timeUtils.ts
new file mode 100644
index 0000000..b56fb2a
--- /dev/null
+++ b/src/utils/timeUtils.ts
@@ -0,0 +1,7 @@
+export function formatTimePadded(seconds: number) {
+	const m = Math.floor(seconds / 60)
+		.toString()
+		.padStart(2, "0");
+	const s = (seconds % 60).toString().padStart(2, "0");
+	return `${m}:${s}`;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..b7a0735
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="../electron/electron-env" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..83f9126
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,85 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: ["class"],
+	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	theme: {
+		extend: {
+			keyframes: {
+				"accordion-down": {
+					from: { height: "0" },
+					to: { height: "var(--radix-accordion-content-height)" },
+				},
+				"accordion-up": {
+					from: { height: "var(--radix-accordion-content-height)" },
+					to: { height: "0" },
+				},
+				"record-pulse": {
+					"0%, 100%": { boxShadow: "0 0 8px rgba(239, 68, 68, 0.15)" },
+					"50%": { boxShadow: "0 0 16px rgba(239, 68, 68, 0.4)" },
+				},
+				"mic-panel-in": {
+					from: { opacity: "0", transform: "translateY(4px)" },
+					to: { opacity: "1", transform: "translateY(0)" },
+				},
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+				"record-pulse": "record-pulse 1.5s ease-in-out infinite",
+				"mic-panel-in": "mic-panel-in 0.15s ease-out",
+			},
+			boxShadow: {
+				"hud-bar": "0 2px 16px rgba(0, 0, 0, 0.25), 0 0 40px rgba(100, 80, 200, 0.08)",
+				"mic-panel": "0 2px 12px rgba(0, 0, 0, 0.2), 0 0 30px rgba(100, 80, 200, 0.06)",
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+			colors: {
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))",
+				},
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
+				},
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				chart: {
+					1: "hsl(var(--chart-1))",
+					2: "hsl(var(--chart-2))",
+					3: "hsl(var(--chart-3))",
+					4: "hsl(var(--chart-4))",
+					5: "hsl(var(--chart-5))",
+				},
+			},
+		},
+	},
+	plugins: [require("tailwindcss-animate")],
+};
diff --git a/tests/e2e/gif-export.spec.ts b/tests/e2e/gif-export.spec.ts
new file mode 100644
index 0000000..18277cc
--- /dev/null
+++ b/tests/e2e/gif-export.spec.ts
@@ -0,0 +1,158 @@
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { _electron as electron, expect, test } from "@playwright/test";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, "../..");
+const MAIN_JS = path.join(ROOT, "dist-electron/main.js");
+const TEST_VIDEO = path.join(__dirname, "../fixtures/sample.webm");
+
+async function exportFromLoadedVideo(format: "gif" | "mp4"): Promise<Buffer> {
+	const outputPath = path.join(os.tmpdir(), `test-${format}-export-${Date.now()}.${format}`);
+	let testVideoInRecordings = "";
+
+	const app = await electron.launch({
+		args: [
+			MAIN_JS,
+			// Required in CI sandbox environments (GitHub Actions, Docker, etc.)
+			"--no-sandbox",
+			// Force software WebGL in headless CI to avoid GPU framebuffer errors.
+			"--enable-unsafe-swiftshader",
+		],
+		env: {
+			...process.env,
+			// Set HEADLESS=false to show windows while debugging.
+			HEADLESS: process.env["HEADLESS"] ?? "true",
+		},
+	});
+	const electronProcess = app.process();
+
+	app.process().stdout?.on("data", (d) => process.stdout.write(`[electron] ${d}`));
+	app.process().stderr?.on("data", (d) => process.stderr.write(`[electron] ${d}`));
+
+	try {
+		const hudWindow = await app.firstWindow({ timeout: 60_000 });
+		await hudWindow.waitForLoadState("domcontentloaded");
+
+		await app.evaluate(({ ipcMain }, targetPath: string) => {
+			ipcMain.removeHandler("pick-export-save-path");
+			ipcMain.removeHandler("write-export-to-path");
+			ipcMain.handle("pick-export-save-path", () => ({
+				success: true,
+				path: targetPath,
+				canceled: false,
+			}));
+			ipcMain.handle(
+				"write-export-to-path",
+				(_event: Electron.IpcMainInvokeEvent, buffer: ArrayBuffer, filePath: string) => {
+					if (filePath !== targetPath) {
+						return {
+							success: false,
+							error: `Unexpected export path: ${filePath}`,
+						};
+					}
+					(globalThis as Record<string, unknown>)["__testExportData"] =
+						Buffer.from(buffer).toString("base64");
+					return { success: true, path: filePath };
+				},
+			);
+		}, outputPath);
+
+		const userDataDir = await app.evaluate(({ app: electronApp }) => {
+			return electronApp.getPath("userData");
+		});
+		const recordingsDir = path.join(userDataDir, "recordings");
+		testVideoInRecordings = path.join(recordingsDir, "test-sample.webm");
+		fs.mkdirSync(recordingsDir, { recursive: true });
+		fs.copyFileSync(TEST_VIDEO, testVideoInRecordings);
+
+		await hudWindow.evaluate(
+			(videoPath: string) => window.electronAPI.setCurrentVideoPath(videoPath),
+			testVideoInRecordings,
+		);
+		try {
+			await hudWindow.evaluate(() => window.electronAPI.switchToEditor());
+		} catch (error) {
+			if (
+				!(error instanceof Error) ||
+				!/closed|destroyed|target page|target closed/i.test(error.message)
+			) {
+				throw error;
+			}
+		}
+
+		const editorWindow = await app.waitForEvent("window", {
+			predicate: (w) => w.url().includes("windowType=editor"),
+			timeout: 15_000,
+		});
+
+		// WebCodecs may not be registered in the renderer on first load.
+		await editorWindow.reload();
+		await editorWindow.waitForLoadState("domcontentloaded");
+		await expect(editorWindow.getByText("Loading video...")).not.toBeVisible({
+			timeout: 15_000,
+		});
+
+		await editorWindow.getByTestId("testId-export-panel-button").click();
+		await editorWindow.getByTestId(`testId-${format}-format-button`).click();
+		await editorWindow.getByTestId("testId-export-button").click();
+
+		await expect
+			.poll(
+				() =>
+					app.evaluate(() => Boolean((globalThis as Record<string, unknown>)["__testExportData"])),
+				{ timeout: 90_000 },
+			)
+			.toBe(true);
+
+		const base64 = await app.evaluate(
+			() => (globalThis as Record<string, unknown>)["__testExportData"] as string,
+		);
+		fs.writeFileSync(outputPath, Buffer.from(base64, "base64"));
+
+		expect(fs.existsSync(outputPath), `${format.toUpperCase()} not found at ${outputPath}`).toBe(
+			true,
+		);
+		const stats = fs.statSync(outputPath);
+		expect(stats.size).toBeGreaterThan(1024);
+		return fs.readFileSync(outputPath);
+	} finally {
+		await app
+			.evaluate(({ app: electronApp }) => {
+				electronApp.exit(0);
+			})
+			.catch(() => {
+				// The process may already be gone after export completes.
+			});
+		if (electronProcess.pid) {
+			if (process.platform === "win32") {
+				spawnSync("taskkill", ["/PID", String(electronProcess.pid), "/T", "/F"], {
+					stdio: "ignore",
+				});
+			} else if (!electronProcess.killed) {
+				electronProcess.kill("SIGKILL");
+			}
+		}
+		if (fs.existsSync(outputPath)) {
+			fs.unlinkSync(outputPath);
+		}
+		if (testVideoInRecordings && fs.existsSync(testVideoInRecordings)) {
+			fs.unlinkSync(testVideoInRecordings);
+		}
+	}
+}
+
+test("exports an MP4 from a loaded video", async () => {
+	const exported = await exportFromLoadedVideo("mp4");
+
+	expect(exported.subarray(4, 8).toString("ascii")).toBe("ftyp");
+});
+
+test("exports a GIF from a loaded video", async () => {
+	const exported = await exportFromLoadedVideo("gif");
+
+	expect(exported.subarray(0, 6).toString("ascii")).toMatch(/^GIF8[79]a/);
+});
diff --git a/tests/e2e/windows-native-checklist.spec.ts b/tests/e2e/windows-native-checklist.spec.ts
new file mode 100644
index 0000000..d19a1fd
--- /dev/null
+++ b/tests/e2e/windows-native-checklist.spec.ts
@@ -0,0 +1,322 @@
+import { once } from "node:events";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import type { Page } from "@playwright/test";
+import { _electron as electron, expect, test } from "@playwright/test";
+import { NATIVE_BRIDGE_CHANNEL, NATIVE_BRIDGE_VERSION } from "../../src/native/contracts";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, "../..");
+const MAIN_JS = path.join(ROOT, "dist-electron/main.js");
+const TEST_VIDEO = path.join(__dirname, "../fixtures/sample.webm");
+
+async function launchApp() {
+	const testUserDataDir = fs.mkdtempSync(path.join(os.tmpdir(), "openscreen-e2e-"));
+	const app = await electron.launch({
+		args: [
+			MAIN_JS,
+			"--no-sandbox",
+			"--enable-unsafe-swiftshader",
+			"--lang=en-US",
+			`--user-data-dir=${testUserDataDir}`,
+		],
+		env: {
+			...process.env,
+			ELECTRON_USER_DATA_DIR: testUserDataDir,
+			HEADLESS: process.env["HEADLESS"] ?? "true",
+			LANG: "en_US.UTF-8",
+			LC_ALL: "en_US.UTF-8",
+			LANGUAGE: "en_US",
+		},
+	});
+
+	const childProcess = app.process();
+	childProcess.stdout?.on("data", (d) => process.stdout.write(`[electron] ${d}`));
+	childProcess.stderr?.on("data", (d) => process.stderr.write(`[electron] ${d}`));
+	(
+		app as ElectronApplication & {
+			__testUserDataDir?: string;
+			__childProcess?: ReturnType<ElectronApplication["process"]>;
+		}
+	).__testUserDataDir = testUserDataDir;
+	(
+		app as ElectronApplication & {
+			__testUserDataDir?: string;
+			__childProcess?: ReturnType<ElectronApplication["process"]>;
+		}
+	).__childProcess = childProcess;
+
+	return app;
+}
+
+async function closeApp(app: ElectronApplication) {
+	const childProcess = (
+		app as ElectronApplication & {
+			__childProcess?: ReturnType<ElectronApplication["process"]>;
+		}
+	).__childProcess;
+	await Promise.race([app.close(), new Promise<void>((resolve) => setTimeout(resolve, 5_000))]);
+	if (childProcess && childProcess.exitCode === null && childProcess.signalCode === null) {
+		if (!childProcess.killed) {
+			childProcess.kill();
+		}
+		await Promise.race([
+			once(childProcess, "close"),
+			new Promise<void>((resolve) => setTimeout(resolve, 5_000)),
+		]);
+	}
+	const testUserDataDir = (app as ElectronApplication & { __testUserDataDir?: string })
+		.__testUserDataDir;
+	if (testUserDataDir && fs.existsSync(testUserDataDir)) {
+		fs.rmSync(testUserDataDir, {
+			recursive: true,
+			force: true,
+			maxRetries: 5,
+			retryDelay: 100,
+		});
+	}
+}
+
+async function copyFixtureToRecordings(app: ElectronApplication, fileName: string) {
+	const userDataDir = await app.evaluate(({ app: electronApp }) => {
+		return electronApp.getPath("userData");
+	});
+	const recordingsDir = path.join(userDataDir, "recordings");
+	const targetPath = path.join(recordingsDir, fileName);
+	fs.mkdirSync(recordingsDir, { recursive: true });
+	fs.copyFileSync(TEST_VIDEO, targetPath);
+	return targetPath;
+}
+
+async function dismissLanguagePrompt(page: Page) {
+	const keepCurrentLanguage = page
+		.getByRole("button")
+		.filter({ hasText: /Keep current language|Conserver la langue actuelle/ });
+	if ((await keepCurrentLanguage.count()) > 0) {
+		await keepCurrentLanguage.click();
+	}
+}
+
+type ElectronApplication = Awaited<ReturnType<typeof electron.launch>>;
+
+test.describe("Windows native checklist smoke tests", () => {
+	test.skip(process.platform !== "win32", "Windows native capture is Windows-only.");
+
+	test("source selector opens, lists thumbnails, and selects a screen/window source", async () => {
+		const app = await launchApp();
+
+		try {
+			const hudWindow = await app.firstWindow({ timeout: 60_000 });
+			await hudWindow.waitForLoadState("domcontentloaded");
+			await dismissLanguagePrompt(hudWindow);
+
+			await expect(hudWindow.getByTestId("launch-record-button")).toBeDisabled();
+			await expect(hudWindow.getByTestId("launch-source-selector-button")).toBeVisible();
+			await expect(hudWindow.getByTestId("launch-system-audio-button")).toBeEnabled();
+			await expect(hudWindow.getByTestId("launch-microphone-button")).toBeEnabled();
+
+			await hudWindow.getByTestId("launch-source-selector-button").click();
+			const sourceWindow = await app.waitForEvent("window", {
+				predicate: (w) => w.url().includes("windowType=source-selector"),
+				timeout: 15_000,
+			});
+			await sourceWindow.waitForLoadState("domcontentloaded");
+
+			const cards = sourceWindow.getByTestId("source-selector-card");
+			await expect.poll(() => cards.count(), { timeout: 15_000 }).toBeGreaterThan(0);
+
+			const thumbnails = await cards.locator("img").evaluateAll((imgs) =>
+				imgs.map((img) => ({
+					alt: img.getAttribute("alt"),
+					src: img.getAttribute("src"),
+				})),
+			);
+			expect(thumbnails.some((item) => item.alt && item.src?.startsWith("data:image"))).toBe(true);
+
+			const hasScreen = await sourceWindow
+				.locator('[data-testid="source-selector-card"][data-source-kind="screen"]')
+				.count()
+				.then((count) => count > 0);
+			const hasWindow = await sourceWindow
+				.locator('[data-testid="source-selector-card"][data-source-kind="window"]')
+				.count()
+				.then((count) => count > 0);
+			expect(hasScreen || hasWindow).toBe(true);
+
+			await expect(sourceWindow.getByTestId("source-selector-share-button")).toBeDisabled();
+			await cards.first().click();
+			await expect(sourceWindow.getByTestId("source-selector-share-button")).toBeEnabled();
+			await sourceWindow.getByTestId("source-selector-share-button").click();
+
+			await expect
+				.poll(
+					() =>
+						hudWindow.evaluate(async () => {
+							return await window.electronAPI.getSelectedSource();
+						}),
+					{ timeout: 10_000 },
+				)
+				.not.toBeNull();
+			await expect(hudWindow.getByTestId("launch-record-button")).toBeEnabled();
+		} finally {
+			await closeApp(app);
+		}
+	});
+
+	test("launch window opens an existing video into the editor and playback controls respond", async () => {
+		const app = await launchApp();
+		let testVideoInRecordings = "";
+
+		try {
+			const hudWindow = await app.firstWindow({ timeout: 60_000 });
+			await hudWindow.waitForLoadState("domcontentloaded");
+			await dismissLanguagePrompt(hudWindow);
+			testVideoInRecordings = await copyFixtureToRecordings(app, "checklist-sample.webm");
+
+			await app.evaluate(({ ipcMain }, videoPath) => {
+				ipcMain.removeHandler("open-video-file-picker");
+				ipcMain.handle("open-video-file-picker", () => ({
+					success: true,
+					path: videoPath,
+				}));
+			}, testVideoInRecordings);
+
+			await hudWindow.getByTestId("launch-open-video-button").click();
+			const editorWindow = await app.waitForEvent("window", {
+				predicate: (w) => w.url().includes("windowType=editor"),
+				timeout: 15_000,
+			});
+			await editorWindow.waitForLoadState("domcontentloaded");
+			await expect(editorWindow.getByText("Loading video...")).not.toBeVisible({ timeout: 20_000 });
+
+			const playButton = editorWindow.locator(
+				'button[aria-label="Play"], button[aria-label="Lire"]',
+			);
+			await expect(playButton).toBeVisible({ timeout: 10_000 });
+			await playButton.click();
+
+			const seekInput = editorWindow.locator('input[type="range"]').first();
+			await expect(seekInput).toBeVisible();
+			await seekInput.evaluate((input) => {
+				const range = input as HTMLInputElement;
+				range.value = "0.25";
+				range.dispatchEvent(new Event("input", { bubbles: true }));
+				range.dispatchEvent(new Event("change", { bubbles: true }));
+			});
+			await expect.poll(() => seekInput.inputValue(), { timeout: 10_000 }).not.toBe("0");
+
+			await expect(
+				editorWindow.getByText("Background").or(editorWindow.getByText("Arrière-plan")),
+			).toBeVisible();
+			await expect(editorWindow.getByTestId("testId-export-button")).toBeVisible();
+		} finally {
+			await closeApp(app);
+			if (testVideoInRecordings && fs.existsSync(testVideoInRecordings)) {
+				fs.unlinkSync(testVideoInRecordings);
+			}
+		}
+	});
+
+	test("launch window opens an existing project into the editor", async () => {
+		const app = await launchApp();
+		let testVideoInRecordings = "";
+		let projectPath = "";
+
+		try {
+			const hudWindow = await app.firstWindow({ timeout: 60_000 });
+			await hudWindow.waitForLoadState("domcontentloaded");
+			await dismissLanguagePrompt(hudWindow);
+			testVideoInRecordings = await copyFixtureToRecordings(app, "checklist-project-sample.webm");
+			projectPath = path.join(os.tmpdir(), `openscreen-checklist-${Date.now()}.openscreen`);
+			const project = {
+				version: 2,
+				videoPath: testVideoInRecordings,
+				editor: {},
+			};
+			fs.writeFileSync(projectPath, JSON.stringify(project), "utf-8");
+
+			await app.evaluate(
+				({ ipcMain }, payload) => {
+					ipcMain.removeHandler(payload.nativeBridgeChannel);
+					ipcMain.handle(payload.nativeBridgeChannel, (_event, request) => {
+						const success = (data: unknown) => ({
+							ok: true,
+							data,
+							meta: {
+								version: payload.nativeBridgeVersion,
+								requestId: request.requestId ?? "checklist-project-load",
+								timestampMs: Date.now(),
+							},
+						});
+
+						if (request.domain === "project" && request.action === "loadProjectFile") {
+							return success({
+								success: true,
+								path: payload.projectPath,
+								project: payload.project,
+							});
+						}
+						if (request.domain === "project" && request.action === "loadCurrentProjectFile") {
+							return success({ success: false, canceled: true });
+						}
+						if (request.domain === "project" && request.action === "getCurrentVideoPath") {
+							return success({ success: true, path: payload.videoPath });
+						}
+						if (request.domain === "system" && request.action === "getPlatform") {
+							return success("win32");
+						}
+						if (request.domain === "system" && request.action === "getAssetBasePath") {
+							return success(null);
+						}
+						if (request.domain === "cursor" && request.action === "getRecordingData") {
+							return success({ version: 2, provider: "none", samples: [], assets: [] });
+						}
+						if (request.domain === "cursor" && request.action === "getTelemetry") {
+							return success([]);
+						}
+
+						return {
+							ok: false,
+							error: {
+								code: "UNSUPPORTED_ACTION",
+								message: `Unexpected native bridge request in test: ${request.domain}.${request.action}`,
+								retryable: false,
+							},
+							meta: {
+								version: payload.nativeBridgeVersion,
+								requestId: request.requestId ?? "checklist-project-load",
+								timestampMs: Date.now(),
+							},
+						};
+					});
+				},
+				{
+					projectPath,
+					project,
+					videoPath: testVideoInRecordings,
+					nativeBridgeChannel: NATIVE_BRIDGE_CHANNEL,
+					nativeBridgeVersion: NATIVE_BRIDGE_VERSION,
+				},
+			);
+
+			await hudWindow.getByTestId("launch-open-project-button").click();
+			const editorWindow = await app.waitForEvent("window", {
+				predicate: (w) => w.url().includes("windowType=editor"),
+				timeout: 15_000,
+			});
+			await editorWindow.waitForLoadState("domcontentloaded");
+			await expect(editorWindow.getByText("Loading video...")).not.toBeVisible({ timeout: 20_000 });
+			await expect(editorWindow.getByTestId("testId-export-button")).toBeVisible();
+		} finally {
+			await closeApp(app);
+			if (testVideoInRecordings && fs.existsSync(testVideoInRecordings)) {
+				fs.unlinkSync(testVideoInRecordings);
+			}
+			if (projectPath && fs.existsSync(projectPath)) {
+				fs.unlinkSync(projectPath);
+			}
+		}
+	});
+});
diff --git a/tests/fixtures/sample-inflated-duration.webm b/tests/fixtures/sample-inflated-duration.webm
new file mode 100644
index 0000000..a90d19e
Binary files /dev/null and b/tests/fixtures/sample-inflated-duration.webm differ
diff --git a/tests/fixtures/sample.webm b/tests/fixtures/sample.webm
new file mode 100644
index 0000000..0da6282
Binary files /dev/null and b/tests/fixtures/sample.webm differ
diff --git a/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/config.json b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/config.json
new file mode 100644
index 0000000..4fc190d
--- /dev/null
+++ b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/config.json
@@ -0,0 +1,111 @@
+{
+    "Global": {
+        "model_name": "PP-OCRv5_mobile_det"
+    },
+    "Hpi": {
+        "backend_configs": {
+            "paddle_infer": {
+                "trt_dynamic_shapes": {
+                    "x": [
+                        [
+                            1,
+                            3,
+                            32,
+                            32
+                        ],
+                        [
+                            1,
+                            3,
+                            736,
+                            736
+                        ],
+                        [
+                            1,
+                            3,
+                            4000,
+                            4000
+                        ]
+                    ]
+                }
+            },
+            "tensorrt": {
+                "dynamic_shapes": {
+                    "x": [
+                        [
+                            1,
+                            3,
+                            32,
+                            32
+                        ],
+                        [
+                            1,
+                            3,
+                            736,
+                            736
+                        ],
+                        [
+                            1,
+                            3,
+                            4000,
+                            4000
+                        ]
+                    ]
+                }
+            }
+        }
+    },
+    "PreProcess": {
+        "transform_ops": [
+            {
+                "DecodeImage": {
+                    "channel_first": false,
+                    "img_mode": "BGR"
+                }
+            },
+            {
+                "DetLabelEncode": null
+            },
+            {
+                "DetResizeForTest": {
+                    "resize_long": 960
+                }
+            },
+            {
+                "NormalizeImage": {
+                    "mean": [
+                        0.485,
+                        0.456,
+                        0.406
+                    ],
+                    "order": "hwc",
+                    "scale": "1./255.",
+                    "std": [
+                        0.229,
+                        0.224,
+                        0.225
+                    ]
+                }
+            },
+            {
+                "ToCHWImage": null
+            },
+            {
+                "KeepKeys": {
+                    "keep_keys": [
+                        "image",
+                        "shape",
+                        "polys",
+                        "ignore_tags"
+                    ]
+                }
+            }
+        ]
+    },
+    "PostProcess": {
+        "name": "DBPostProcess",
+        "thresh": 0.3,
+        "box_thresh": 0.6,
+        "max_candidates": 1000,
+        "unclip_ratio": 1.5
+    }
+}
\ No newline at end of file
diff --git a/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.json b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.json
new file mode 100644
index 0000000..6cd678f
--- /dev/null
+++ b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.json
@@ -0,0 +1 @@
+{"base_code":{"magic":"pir","trainable":true,"version":1},"program":{"regions":[{"#":"region_0","blocks":[{"#":"block_0","args":[],"ops":[{"#":"p","A":[0,1,1,"conv2d_transpose_1.b_0"],"DA":[],"O":{"%":1,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_transpose_1.w_0"],"DA":[],"O":{"%":2,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,1,2,2],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_1.w_2"],"DA":[],"O":{"%":3,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_1.w_1"],"DA":[],"O":{"%":4,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_1.b_0"],"DA":[],"O":{"%":5,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_1.w_0"],"DA":[],"O":{"%":6,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_transpose_0.b_0"],"DA":[],"O":{"%":7,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_transpose_0.w_0"],"DA":[],"O":{"%":8,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,24,2,2],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_0.w_2"],"DA":[],"O":{"%":9,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_0.w_1"],"DA":[],"O":{"%":10,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_0.b_0"],"DA":[],"O":{"%":11,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm_0.w_0"],"DA":[],"O":{"%":12,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_159.w_0"],"DA":[],"O":{"%":13,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_158.b_0"],"DA":[],"O":{"%":14,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_158.w_0"],"DA":[],"O":{"%":15,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,6,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_157.b_0"],"DA":[],"O":{"%":16,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_157.w_0"],"DA":[],"O":{"%":17,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_156.w_0"],"DA":[],"O":{"%":18,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_152.b_0"],"DA":[],"O":{"%":19,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_152.w_0"],"DA":[],"O":{"%":20,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,6,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_151.b_0"],"DA":[],"O":{"%":21,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_151.w_0"],"DA":[],"O":{"%":22,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_150.w_0"],"DA":[],"O":{"%":23,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_146.b_0"],"DA":[],"O":{"%":24,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_146.w_0"],"DA":[],"O":{"%":25,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,6,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_145.b_0"],"DA":[],"O":{"%":26,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_145.w_0"],"DA":[],"O":{"%":27,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_144.w_0"],"DA":[],"O":{"%":28,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_140.b_0"],"DA":[],"O":{"%":29,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_140.w_0"],"DA":[],"O":{"%":30,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,6,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_139.b_0"],"DA":[],"O":{"%":31,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_139.w_0"],"DA":[],"O":{"%":32,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[6,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_138.w_0"],"DA":[],"O":{"%":33,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_155.b_0"],"DA":[],"O":{"%":34,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_155.w_0"],"DA":[],"O":{"%":35,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_154.b_0"],"DA":[],"O":{"%":36,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_154.w_0"],"DA":[],"O":{"%":37,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_153.w_0"],"DA":[],"O":{"%":38,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,360,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_149.b_0"],"DA":[],"O":{"%":39,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_149.w_0"],"DA":[],"O":{"%":40,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_148.b_0"],"DA":[],"O":{"%":41,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_148.w_0"],"DA":[],"O":{"%":42,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_147.w_0"],"DA":[],"O":{"%":43,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,42,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_143.b_0"],"DA":[],"O":{"%":44,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_143.w_0"],"DA":[],"O":{"%":45,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_142.b_0"],"DA":[],"O":{"%":46,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_142.w_0"],"DA":[],"O":{"%":47,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_141.w_0"],"DA":[],"O":{"%":48,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,18,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_137.b_0"],"DA":[],"O":{"%":49,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_137.w_0"],"DA":[],"O":{"%":50,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,24,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_136.b_0"],"DA":[],"O":{"%":51,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_136.w_0"],"DA":[],"O":{"%":52,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_135.w_0"],"DA":[],"O":{"%":53,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,12,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_134.b_0"],"DA":[],"O":{"%":54,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[360],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_134.w_0"],"DA":[],"O":{"%":55,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[360,384,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_133.b_0"],"DA":[],"O":{"%":56,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[42],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_133.w_0"],"DA":[],"O":{"%":57,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[42,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_132.b_0"],"DA":[],"O":{"%":58,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[18],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_132.w_0"],"DA":[],"O":{"%":59,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[18,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_131.b_0"],"DA":[],"O":{"%":60,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[12],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_131.w_0"],"DA":[],"O":{"%":61,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[12,48,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_188.b_0"],"DA":[],"O":{"%":62,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_188.w_0"],"DA":[],"O":{"%":63,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,384,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_55.w_1"],"DA":[],"O":{"%":64,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_55.w_0"],"DA":[],"O":{"%":65,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_54.w_1"],"DA":[],"O":{"%":66,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_54.w_0"],"DA":[],"O":{"%":67,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_187.b_0"],"DA":[],"O":{"%":68,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_187.w_0"],"DA":[],"O":{"%":69,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_53.w_1"],"DA":[],"O":{"%":70,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_53.w_0"],"DA":[],"O":{"%":71,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_52.w_1"],"DA":[],"O":{"%":72,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_52.w_0"],"DA":[],"O":{"%":73,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_186.b_0"],"DA":[],"O":{"%":74,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_186.w_0"],"DA":[],"O":{"%":75,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,384,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_51.w_1"],"DA":[],"O":{"%":76,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_51.w_0"],"DA":[],"O":{"%":77,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_50.w_1"],"DA":[],"O":{"%":78,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_50.w_0"],"DA":[],"O":{"%":79,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_185.b_0"],"DA":[],"O":{"%":80,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_185.w_0"],"DA":[],"O":{"%":81,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_49.w_1"],"DA":[],"O":{"%":82,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_49.w_0"],"DA":[],"O":{"%":83,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_48.w_1"],"DA":[],"O":{"%":84,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_48.w_0"],"DA":[],"O":{"%":85,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_184.b_0"],"DA":[],"O":{"%":86,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_184.w_0"],"DA":[],"O":{"%":87,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,384,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_47.w_1"],"DA":[],"O":{"%":88,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_47.w_0"],"DA":[],"O":{"%":89,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_46.w_1"],"DA":[],"O":{"%":90,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_46.w_0"],"DA":[],"O":{"%":91,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_108.b_0"],"DA":[],"O":{"%":92,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_108.w_0"],"DA":[],"O":{"%":93,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_107.b_0"],"DA":[],"O":{"%":94,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_107.w_0"],"DA":[],"O":{"%":95,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,384,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_183.b_0"],"DA":[],"O":{"%":96,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_183.w_0"],"DA":[],"O":{"%":97,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_45.w_1"],"DA":[],"O":{"%":98,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_45.w_0"],"DA":[],"O":{"%":99,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_44.w_1"],"DA":[],"O":{"%":100,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_44.w_0"],"DA":[],"O":{"%":101,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_182.b_0"],"DA":[],"O":{"%":102,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_182.w_0"],"DA":[],"O":{"%":103,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[384,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_43.w_1"],"DA":[],"O":{"%":104,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_43.w_0"],"DA":[],"O":{"%":105,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_42.w_1"],"DA":[],"O":{"%":106,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_42.w_0"],"DA":[],"O":{"%":107,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_97.b_0"],"DA":[],"O":{"%":108,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_97.w_0"],"DA":[],"O":{"%":109,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,48,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_96.b_0"],"DA":[],"O":{"%":110,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_96.w_0"],"DA":[],"O":{"%":111,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_181.b_0"],"DA":[],"O":{"%":112,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_181.w_0"],"DA":[],"O":{"%":113,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_40.w_1"],"DA":[],"O":{"%":114,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_40.w_0"],"DA":[],"O":{"%":115,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_180.b_0"],"DA":[],"O":{"%":116,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_180.w_0"],"DA":[],"O":{"%":117,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_39.w_1"],"DA":[],"O":{"%":118,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_39.w_0"],"DA":[],"O":{"%":119,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_38.w_1"],"DA":[],"O":{"%":120,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_38.w_0"],"DA":[],"O":{"%":121,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_179.b_0"],"DA":[],"O":{"%":122,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_179.w_0"],"DA":[],"O":{"%":123,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_37.w_1"],"DA":[],"O":{"%":124,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_37.w_0"],"DA":[],"O":{"%":125,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_36.w_1"],"DA":[],"O":{"%":126,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_36.w_0"],"DA":[],"O":{"%":127,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_178.b_0"],"DA":[],"O":{"%":128,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_178.w_0"],"DA":[],"O":{"%":129,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_35.w_1"],"DA":[],"O":{"%":130,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_35.w_0"],"DA":[],"O":{"%":131,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_34.w_1"],"DA":[],"O":{"%":132,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_34.w_0"],"DA":[],"O":{"%":133,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_177.b_0"],"DA":[],"O":{"%":134,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_177.w_0"],"DA":[],"O":{"%":135,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_33.w_1"],"DA":[],"O":{"%":136,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_33.w_0"],"DA":[],"O":{"%":137,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_32.w_1"],"DA":[],"O":{"%":138,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_32.w_0"],"DA":[],"O":{"%":139,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_176.b_0"],"DA":[],"O":{"%":140,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_176.w_0"],"DA":[],"O":{"%":141,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_31.w_1"],"DA":[],"O":{"%":142,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_31.w_0"],"DA":[],"O":{"%":143,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_30.w_1"],"DA":[],"O":{"%":144,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_30.w_0"],"DA":[],"O":{"%":145,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_175.b_0"],"DA":[],"O":{"%":146,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_175.w_0"],"DA":[],"O":{"%":147,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_29.w_1"],"DA":[],"O":{"%":148,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_29.w_0"],"DA":[],"O":{"%":149,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_28.w_1"],"DA":[],"O":{"%":150,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_28.w_0"],"DA":[],"O":{"%":151,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_174.b_0"],"DA":[],"O":{"%":152,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_174.w_0"],"DA":[],"O":{"%":153,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,192,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_27.w_1"],"DA":[],"O":{"%":154,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_27.w_0"],"DA":[],"O":{"%":155,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_26.w_1"],"DA":[],"O":{"%":156,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_26.w_0"],"DA":[],"O":{"%":157,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_173.b_0"],"DA":[],"O":{"%":158,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_173.w_0"],"DA":[],"O":{"%":159,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_25.w_1"],"DA":[],"O":{"%":160,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_25.w_0"],"DA":[],"O":{"%":161,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_24.w_1"],"DA":[],"O":{"%":162,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_24.w_0"],"DA":[],"O":{"%":163,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_172.b_0"],"DA":[],"O":{"%":164,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_172.w_0"],"DA":[],"O":{"%":165,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[192,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_23.w_1"],"DA":[],"O":{"%":166,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_23.w_0"],"DA":[],"O":{"%":167,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_22.w_1"],"DA":[],"O":{"%":168,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_22.w_0"],"DA":[],"O":{"%":169,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_171.b_0"],"DA":[],"O":{"%":170,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_171.w_0"],"DA":[],"O":{"%":171,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_20.w_1"],"DA":[],"O":{"%":172,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_20.w_0"],"DA":[],"O":{"%":173,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_170.b_0"],"DA":[],"O":{"%":174,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_170.w_0"],"DA":[],"O":{"%":175,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,96,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_19.w_1"],"DA":[],"O":{"%":176,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_19.w_0"],"DA":[],"O":{"%":177,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_18.w_1"],"DA":[],"O":{"%":178,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_18.w_0"],"DA":[],"O":{"%":179,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_169.b_0"],"DA":[],"O":{"%":180,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_169.w_0"],"DA":[],"O":{"%":181,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_17.w_1"],"DA":[],"O":{"%":182,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_17.w_0"],"DA":[],"O":{"%":183,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_16.w_1"],"DA":[],"O":{"%":184,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_16.w_0"],"DA":[],"O":{"%":185,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_168.b_0"],"DA":[],"O":{"%":186,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_168.w_0"],"DA":[],"O":{"%":187,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[96,48,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_15.w_1"],"DA":[],"O":{"%":188,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_15.w_0"],"DA":[],"O":{"%":189,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_14.w_1"],"DA":[],"O":{"%":190,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_14.w_0"],"DA":[],"O":{"%":191,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_167.b_0"],"DA":[],"O":{"%":192,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_167.w_0"],"DA":[],"O":{"%":193,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_12.w_1"],"DA":[],"O":{"%":194,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_12.w_0"],"DA":[],"O":{"%":195,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_166.b_0"],"DA":[],"O":{"%":196,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_166.w_0"],"DA":[],"O":{"%":197,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48,48,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_11.w_1"],"DA":[],"O":{"%":198,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_11.w_0"],"DA":[],"O":{"%":199,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_10.w_1"],"DA":[],"O":{"%":200,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_10.w_0"],"DA":[],"O":{"%":201,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_165.b_0"],"DA":[],"O":{"%":202,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_165.w_0"],"DA":[],"O":{"%":203,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_9.w_1"],"DA":[],"O":{"%":204,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_9.w_0"],"DA":[],"O":{"%":205,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_8.w_1"],"DA":[],"O":{"%":206,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_8.w_0"],"DA":[],"O":{"%":207,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_164.b_0"],"DA":[],"O":{"%":208,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_164.w_0"],"DA":[],"O":{"%":209,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[48,32,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_7.w_1"],"DA":[],"O":{"%":210,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_7.w_0"],"DA":[],"O":{"%":211,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_6.w_1"],"DA":[],"O":{"%":212,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_6.w_0"],"DA":[],"O":{"%":213,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_163.b_0"],"DA":[],"O":{"%":214,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_163.w_0"],"DA":[],"O":{"%":215,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_4.w_1"],"DA":[],"O":{"%":216,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_4.w_0"],"DA":[],"O":{"%":217,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_162.b_0"],"DA":[],"O":{"%":218,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_162.w_0"],"DA":[],"O":{"%":219,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32,16,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_3.w_1"],"DA":[],"O":{"%":220,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_3.w_0"],"DA":[],"O":{"%":221,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_2.w_1"],"DA":[],"O":{"%":222,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_2.w_0"],"DA":[],"O":{"%":223,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_161.b_0"],"DA":[],"O":{"%":224,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_161.w_0"],"DA":[],"O":{"%":225,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_1.w_1"],"DA":[],"O":{"%":226,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_1.w_0"],"DA":[],"O":{"%":227,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_0.w_1"],"DA":[],"O":{"%":228,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_0.w_0"],"DA":[],"O":{"%":229,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.w_2"],"DA":[],"O":{"%":230,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.w_1"],"DA":[],"O":{"%":231,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.b_0"],"DA":[],"O":{"%":232,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.w_0"],"DA":[],"O":{"%":233,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_0.w_0"],"DA":[],"O":{"%":234,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16,3,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"1.data","A":[{"AT":{"#":"0.a_str","D":"x"},"N":"name"},{"AT":{"#":"1.a_intarray","D":[-1,3,-1,-1]},"N":"shape"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[0,0,""]},"N":"place"}],"I":[],"O":[{"%":235,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,3,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/ConvBNLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":235},{"%":234}],"O":[{"%":236,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/ConvBNLayer/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":236},{"%":231},{"%":230},{"%":233},{"%":232}],"O":[{"%":237,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}},{"%":238,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":239,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":240,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":241,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":242,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":16},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":237},{"%":225}],"O":[{"%":243,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":244,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":224},{"%":244}],"O":[{"%":245,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,16,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":243},{"%":245}],"O":[{"%":246,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":229},{"%":246}],"O":[{"%":247,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":247},{"%":228}],"O":[{"%":248,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":248}],"O":[{"%":249,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":227},{"%":249}],"O":[{"%":250,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":250},{"%":226}],"O":[{"%":251,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":251},{"%":219}],"O":[{"%":252,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":253,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":218},{"%":253}],"O":[{"%":254,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,32,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":252},{"%":254}],"O":[{"%":255,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":223},{"%":255}],"O":[{"%":256,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":256},{"%":222}],"O":[{"%":257,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":257}],"O":[{"%":258,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":221},{"%":258}],"O":[{"%":259,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":259},{"%":220}],"O":[{"%":260,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":32},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":260},{"%":215}],"O":[{"%":261,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":262,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":214},{"%":262}],"O":[{"%":263,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,32,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":261},{"%":263}],"O":[{"%":264,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":217},{"%":264}],"O":[{"%":265,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":265},{"%":216}],"O":[{"%":266,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":266},{"%":209}],"O":[{"%":267,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":268,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":208},{"%":268}],"O":[{"%":269,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":267},{"%":269}],"O":[{"%":270,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":213},{"%":270}],"O":[{"%":271,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":271},{"%":212}],"O":[{"%":272,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":272}],"O":[{"%":273,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":211},{"%":273}],"O":[{"%":274,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":274},{"%":210}],"O":[{"%":275,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":48},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":275},{"%":203}],"O":[{"%":276,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":277,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":202},{"%":277}],"O":[{"%":278,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":276},{"%":278}],"O":[{"%":279,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":207},{"%":279}],"O":[{"%":280,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":280},{"%":206}],"O":[{"%":281,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":281}],"O":[{"%":282,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":205},{"%":282}],"O":[{"%":283,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":283},{"%":204}],"O":[{"%":284,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":284},{"%":197}],"O":[{"%":285,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":286,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":196},{"%":286}],"O":[{"%":287,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":285},{"%":287}],"O":[{"%":288,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":201},{"%":288}],"O":[{"%":289,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":289},{"%":200}],"O":[{"%":290,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":290}],"O":[{"%":291,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":199},{"%":291}],"O":[{"%":292,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":292},{"%":198}],"O":[{"%":293,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":48},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":293},{"%":193}],"O":[{"%":294,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":295,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":192},{"%":295}],"O":[{"%":296,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":294},{"%":296}],"O":[{"%":297,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":195},{"%":297}],"O":[{"%":298,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":298},{"%":194}],"O":[{"%":299,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":299},{"%":187}],"O":[{"%":300,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":301,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":186},{"%":301}],"O":[{"%":302,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":300},{"%":302}],"O":[{"%":303,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":191},{"%":303}],"O":[{"%":304,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":304},{"%":190}],"O":[{"%":305,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":305}],"O":[{"%":306,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":189},{"%":306}],"O":[{"%":307,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":307},{"%":188}],"O":[{"%":308,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":96},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":308},{"%":181}],"O":[{"%":309,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":310,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":180},{"%":310}],"O":[{"%":311,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":309},{"%":311}],"O":[{"%":312,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":185},{"%":312}],"O":[{"%":313,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":313},{"%":184}],"O":[{"%":314,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":314}],"O":[{"%":315,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":183},{"%":315}],"O":[{"%":316,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":316},{"%":182}],"O":[{"%":317,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":317},{"%":175}],"O":[{"%":318,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":319,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":174},{"%":319}],"O":[{"%":320,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":318},{"%":320}],"O":[{"%":321,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":179},{"%":321}],"O":[{"%":322,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":322},{"%":178}],"O":[{"%":323,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":323}],"O":[{"%":324,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":177},{"%":324}],"O":[{"%":325,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":325},{"%":176}],"O":[{"%":326,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":96},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":326},{"%":171}],"O":[{"%":327,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":328,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":170},{"%":328}],"O":[{"%":329,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":327},{"%":329}],"O":[{"%":330,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":173},{"%":330}],"O":[{"%":331,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":331},{"%":172}],"O":[{"%":332,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":332},{"%":165}],"O":[{"%":333,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":334,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":164},{"%":334}],"O":[{"%":335,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":333},{"%":335}],"O":[{"%":336,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":169},{"%":336}],"O":[{"%":337,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":337},{"%":168}],"O":[{"%":338,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":338}],"O":[{"%":339,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":167},{"%":339}],"O":[{"%":340,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":340},{"%":166}],"O":[{"%":341,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":192},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":341},{"%":159}],"O":[{"%":342,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":343,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":158},{"%":343}],"O":[{"%":344,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":342},{"%":344}],"O":[{"%":345,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":163},{"%":345}],"O":[{"%":346,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":346},{"%":162}],"O":[{"%":347,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":347}],"O":[{"%":348,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":161},{"%":348}],"O":[{"%":349,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":349},{"%":160}],"O":[{"%":350,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":350},{"%":153}],"O":[{"%":351,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":352,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":152},{"%":352}],"O":[{"%":353,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":351},{"%":353}],"O":[{"%":354,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":157},{"%":354}],"O":[{"%":355,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":355},{"%":156}],"O":[{"%":356,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":356}],"O":[{"%":357,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":155},{"%":357}],"O":[{"%":358,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":358},{"%":154}],"O":[{"%":359,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":192},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":359},{"%":147}],"O":[{"%":360,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":361,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":146},{"%":361}],"O":[{"%":362,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":360},{"%":362}],"O":[{"%":363,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":151},{"%":363}],"O":[{"%":364,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":364},{"%":150}],"O":[{"%":365,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":365}],"O":[{"%":366,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":149},{"%":366}],"O":[{"%":367,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":367},{"%":148}],"O":[{"%":368,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":368},{"%":141}],"O":[{"%":369,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":370,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":140},{"%":370}],"O":[{"%":371,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":369},{"%":371}],"O":[{"%":372,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":145},{"%":372}],"O":[{"%":373,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":373},{"%":144}],"O":[{"%":374,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":374}],"O":[{"%":375,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":143},{"%":375}],"O":[{"%":376,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":376},{"%":142}],"O":[{"%":377,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":192},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":377},{"%":135}],"O":[{"%":378,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":379,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":134},{"%":379}],"O":[{"%":380,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":378},{"%":380}],"O":[{"%":381,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":139},{"%":381}],"O":[{"%":382,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":382},{"%":138}],"O":[{"%":383,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":383}],"O":[{"%":384,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":137},{"%":384}],"O":[{"%":385,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":385},{"%":136}],"O":[{"%":386,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":386},{"%":129}],"O":[{"%":387,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":388,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":128},{"%":388}],"O":[{"%":389,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":387},{"%":389}],"O":[{"%":390,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":133},{"%":390}],"O":[{"%":391,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":391},{"%":132}],"O":[{"%":392,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":392}],"O":[{"%":393,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":131},{"%":393}],"O":[{"%":394,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":394},{"%":130}],"O":[{"%":395,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":192},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":395},{"%":123}],"O":[{"%":396,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":397,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":122},{"%":397}],"O":[{"%":398,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":396},{"%":398}],"O":[{"%":399,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":127},{"%":399}],"O":[{"%":400,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":400},{"%":126}],"O":[{"%":401,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":401}],"O":[{"%":402,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":125},{"%":402}],"O":[{"%":403,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":403},{"%":124}],"O":[{"%":404,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":404},{"%":117}],"O":[{"%":405,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":406,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":116},{"%":406}],"O":[{"%":407,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":405},{"%":407}],"O":[{"%":408,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":121},{"%":408}],"O":[{"%":409,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":409},{"%":120}],"O":[{"%":410,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":410}],"O":[{"%":411,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":119},{"%":411}],"O":[{"%":412,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":412},{"%":118}],"O":[{"%":413,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":192},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":413},{"%":113}],"O":[{"%":414,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":415,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":112},{"%":415}],"O":[{"%":416,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":414},{"%":416}],"O":[{"%":417,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":115},{"%":417}],"O":[{"%":418,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":418},{"%":114}],"O":[{"%":419,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":420,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":419},{"%":420}],"O":[{"%":421,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":421},{"%":111}],"O":[{"%":422,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":423,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":110},{"%":423}],"O":[{"%":424,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":422},{"%":424}],"O":[{"%":425,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/ReLU/"},"N":"struct_name"}],"I":[{"%":425}],"O":[{"%":426,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,48,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":426},{"%":109}],"O":[{"%":427,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":428,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":108},{"%":428}],"O":[{"%":429,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":427},{"%":429}],"O":[{"%":430,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.16666670143604279},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Hardsigmoid/"},"N":"struct_name"}],"I":[{"%":430}],"O":[{"%":431,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/"},"N":"struct_name"}],"I":[{"%":419},{"%":431}],"O":[{"%":432,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,192,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":432},{"%":103}],"O":[{"%":433,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":434,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":102},{"%":434}],"O":[{"%":435,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":433},{"%":435}],"O":[{"%":436,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":107},{"%":436}],"O":[{"%":437,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":437},{"%":106}],"O":[{"%":438,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":438}],"O":[{"%":439,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":105},{"%":439}],"O":[{"%":440,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":440},{"%":104}],"O":[{"%":441,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":384},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":441},{"%":97}],"O":[{"%":442,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":443,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":96},{"%":443}],"O":[{"%":444,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":442},{"%":444}],"O":[{"%":445,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":101},{"%":445}],"O":[{"%":446,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":446},{"%":100}],"O":[{"%":447,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":447}],"O":[{"%":448,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":99},{"%":448}],"O":[{"%":449,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":449},{"%":98}],"O":[{"%":450,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":451,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":450},{"%":451}],"O":[{"%":452,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":452},{"%":95}],"O":[{"%":453,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":454,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":94},{"%":454}],"O":[{"%":455,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":453},{"%":455}],"O":[{"%":456,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/ReLU/"},"N":"struct_name"}],"I":[{"%":456}],"O":[{"%":457,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":457},{"%":93}],"O":[{"%":458,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":459,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":92},{"%":459}],"O":[{"%":460,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":458},{"%":460}],"O":[{"%":461,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.16666670143604279},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Hardsigmoid/"},"N":"struct_name"}],"I":[{"%":461}],"O":[{"%":462,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/"},"N":"struct_name"}],"I":[{"%":450},{"%":462}],"O":[{"%":463,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":463},{"%":87}],"O":[{"%":464,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":465,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":86},{"%":465}],"O":[{"%":466,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":464},{"%":466}],"O":[{"%":467,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":91},{"%":467}],"O":[{"%":468,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":468},{"%":90}],"O":[{"%":469,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":469}],"O":[{"%":470,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":89},{"%":470}],"O":[{"%":471,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":471},{"%":88}],"O":[{"%":472,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":384},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":472},{"%":81}],"O":[{"%":473,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":474,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":80},{"%":474}],"O":[{"%":475,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":473},{"%":475}],"O":[{"%":476,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":85},{"%":476}],"O":[{"%":477,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":477},{"%":84}],"O":[{"%":478,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":478}],"O":[{"%":479,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":83},{"%":479}],"O":[{"%":480,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":480},{"%":82}],"O":[{"%":481,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":481},{"%":75}],"O":[{"%":482,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":483,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":74},{"%":483}],"O":[{"%":484,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":482},{"%":484}],"O":[{"%":485,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":79},{"%":485}],"O":[{"%":486,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":486},{"%":78}],"O":[{"%":487,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":487}],"O":[{"%":488,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":77},{"%":488}],"O":[{"%":489,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":489},{"%":76}],"O":[{"%":490,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":384},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":490},{"%":69}],"O":[{"%":491,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":492,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":68},{"%":492}],"O":[{"%":493,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":491},{"%":493}],"O":[{"%":494,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":73},{"%":494}],"O":[{"%":495,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":495},{"%":72}],"O":[{"%":496,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":496}],"O":[{"%":497,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":71},{"%":497}],"O":[{"%":498,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":498},{"%":70}],"O":[{"%":499,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":499},{"%":63}],"O":[{"%":500,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":501,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":62},{"%":501}],"O":[{"%":502,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,384,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":500},{"%":502}],"O":[{"%":503,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":67},{"%":503}],"O":[{"%":504,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":504},{"%":66}],"O":[{"%":505,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":505}],"O":[{"%":506,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":65},{"%":506}],"O":[{"%":507,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":507},{"%":64}],"O":[{"%":508,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,384,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D/"},"N":"struct_name"}],"I":[{"%":293},{"%":61}],"O":[{"%":509,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,12,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":510,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D/"},"N":"struct_name"}],"I":[{"%":60},{"%":510}],"O":[{"%":511,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,12,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D/"},"N":"struct_name"}],"I":[{"%":509},{"%":511}],"O":[{"%":512,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,12,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":326},{"%":59}],"O":[{"%":513,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,18,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":514,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":58},{"%":514}],"O":[{"%":515,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,18,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":513},{"%":515}],"O":[{"%":516,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,18,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_2/"},"N":"struct_name"}],"I":[{"%":413},{"%":57}],"O":[{"%":517,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,42,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_2/"},"N":"struct_name"}],"I":[],"O":[{"%":518,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_2/"},"N":"struct_name"}],"I":[{"%":56},{"%":518}],"O":[{"%":519,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,42,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_2/"},"N":"struct_name"}],"I":[{"%":517},{"%":519}],"O":[{"%":520,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,42,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_3/"},"N":"struct_name"}],"I":[{"%":508},{"%":55}],"O":[{"%":521,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,360,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_3/"},"N":"struct_name"}],"I":[],"O":[{"%":522,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_3/"},"N":"struct_name"}],"I":[{"%":54},{"%":522}],"O":[{"%":523,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,360,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Conv2D_3/"},"N":"struct_name"}],"I":[{"%":521},{"%":523}],"O":[{"%":524,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,360,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":524},{"%":38}],"O":[{"%":525,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":526,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":525},{"%":526}],"O":[{"%":527,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":527},{"%":37}],"O":[{"%":528,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":529,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":36},{"%":529}],"O":[{"%":530,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":528},{"%":530}],"O":[{"%":531,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/"},"N":"struct_name"}],"I":[{"%":531}],"O":[{"%":532,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":532},{"%":35}],"O":[{"%":533,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":534,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":34},{"%":534}],"O":[{"%":535,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":533},{"%":535}],"O":[{"%":536,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/"},"N":"struct_name"}],"I":[{"%":536}],"O":[{"%":537,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/SEModule/"},"N":"struct_name"}],"I":[{"%":525},{"%":537}],"O":[{"%":538,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer/"},"N":"struct_name"}],"I":[{"%":525},{"%":538}],"O":[{"%":539,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":520},{"%":43}],"O":[{"%":540,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":541,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":540},{"%":541}],"O":[{"%":542,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":542},{"%":42}],"O":[{"%":543,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":544,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":41},{"%":544}],"O":[{"%":545,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":543},{"%":545}],"O":[{"%":546,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/"},"N":"struct_name"}],"I":[{"%":546}],"O":[{"%":547,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":547},{"%":40}],"O":[{"%":548,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":549,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":39},{"%":549}],"O":[{"%":550,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":548},{"%":550}],"O":[{"%":551,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/"},"N":"struct_name"}],"I":[{"%":551}],"O":[{"%":552,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/SEModule/"},"N":"struct_name"}],"I":[{"%":540},{"%":552}],"O":[{"%":553,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_1/"},"N":"struct_name"}],"I":[{"%":540},{"%":553}],"O":[{"%":554,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/Conv2D/"},"N":"struct_name"}],"I":[{"%":516},{"%":48}],"O":[{"%":555,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":556,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":555},{"%":556}],"O":[{"%":557,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":557},{"%":47}],"O":[{"%":558,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":559,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":46},{"%":559}],"O":[{"%":560,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":558},{"%":560}],"O":[{"%":561,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/"},"N":"struct_name"}],"I":[{"%":561}],"O":[{"%":562,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":562},{"%":45}],"O":[{"%":563,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":564,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":44},{"%":564}],"O":[{"%":565,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":563},{"%":565}],"O":[{"%":566,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/"},"N":"struct_name"}],"I":[{"%":566}],"O":[{"%":567,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/SEModule/"},"N":"struct_name"}],"I":[{"%":555},{"%":567}],"O":[{"%":568,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_2/"},"N":"struct_name"}],"I":[{"%":555},{"%":568}],"O":[{"%":569,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/Conv2D/"},"N":"struct_name"}],"I":[{"%":512},{"%":53}],"O":[{"%":570,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":571,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":570},{"%":571}],"O":[{"%":572,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":572},{"%":52}],"O":[{"%":573,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":574,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":51},{"%":574}],"O":[{"%":575,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":573},{"%":575}],"O":[{"%":576,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/"},"N":"struct_name"}],"I":[{"%":576}],"O":[{"%":577,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":577},{"%":50}],"O":[{"%":578,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":579,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":49},{"%":579}],"O":[{"%":580,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":578},{"%":580}],"O":[{"%":581,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/"},"N":"struct_name"}],"I":[{"%":581}],"O":[{"%":582,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/SEModule/"},"N":"struct_name"}],"I":[{"%":570},{"%":582}],"O":[{"%":583,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_3/"},"N":"struct_name"}],"I":[{"%":570},{"%":583}],"O":[{"%":584,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.nearest_interp","A":[{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_d"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_h"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_w"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_f32","D":2.0},{"#":"0.a_f32","D":2.0}]},"N":"scale"},{"AT":{"#":"0.a_str","D":"nearest"},"N":"interp_method"},{"AT":{"#":"0.a_bool","D":false},"N":"align_corners"},{"AT":{"#":"0.a_i32","D":1},"N":"align_mode"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":539},{"%":0},{"%":0},{"%":0}],"O":[{"%":585,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":554},{"%":585}],"O":[{"%":586,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.nearest_interp","A":[{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_d"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_h"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_w"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_f32","D":2.0},{"#":"0.a_f32","D":2.0}]},"N":"scale"},{"AT":{"#":"0.a_str","D":"nearest"},"N":"interp_method"},{"AT":{"#":"0.a_bool","D":false},"N":"align_corners"},{"AT":{"#":"0.a_i32","D":1},"N":"align_mode"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":586},{"%":0},{"%":0},{"%":0}],"O":[{"%":587,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":569},{"%":587}],"O":[{"%":588,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.nearest_interp","A":[{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_d"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_h"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_w"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_f32","D":2.0},{"#":"0.a_f32","D":2.0}]},"N":"scale"},{"AT":{"#":"0.a_str","D":"nearest"},"N":"interp_method"},{"AT":{"#":"0.a_bool","D":false},"N":"align_corners"},{"AT":{"#":"0.a_i32","D":1},"N":"align_mode"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":588},{"%":0},{"%":0},{"%":0}],"O":[{"%":589,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":584},{"%":589}],"O":[{"%":590,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/Conv2D/"},"N":"struct_name"}],"I":[{"%":539},{"%":18}],"O":[{"%":591,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":592,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":591},{"%":592}],"O":[{"%":593,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":593},{"%":17}],"O":[{"%":594,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":595,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":16},{"%":595}],"O":[{"%":596,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":594},{"%":596}],"O":[{"%":597,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/"},"N":"struct_name"}],"I":[{"%":597}],"O":[{"%":598,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":598},{"%":15}],"O":[{"%":599,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":600,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":14},{"%":600}],"O":[{"%":601,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":599},{"%":601}],"O":[{"%":602,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/"},"N":"struct_name"}],"I":[{"%":602}],"O":[{"%":603,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/SEModule/"},"N":"struct_name"}],"I":[{"%":591},{"%":603}],"O":[{"%":604,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_4/"},"N":"struct_name"}],"I":[{"%":591},{"%":604}],"O":[{"%":605,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/Conv2D/"},"N":"struct_name"}],"I":[{"%":586},{"%":23}],"O":[{"%":606,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":607,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":606},{"%":607}],"O":[{"%":608,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":608},{"%":22}],"O":[{"%":609,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":610,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":21},{"%":610}],"O":[{"%":611,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":609},{"%":611}],"O":[{"%":612,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/"},"N":"struct_name"}],"I":[{"%":612}],"O":[{"%":613,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":613},{"%":20}],"O":[{"%":614,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":615,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":19},{"%":615}],"O":[{"%":616,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":614},{"%":616}],"O":[{"%":617,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/"},"N":"struct_name"}],"I":[{"%":617}],"O":[{"%":618,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/SEModule/"},"N":"struct_name"}],"I":[{"%":606},{"%":618}],"O":[{"%":619,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_5/"},"N":"struct_name"}],"I":[{"%":606},{"%":619}],"O":[{"%":620,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/Conv2D/"},"N":"struct_name"}],"I":[{"%":588},{"%":28}],"O":[{"%":621,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":622,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":621},{"%":622}],"O":[{"%":623,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":623},{"%":27}],"O":[{"%":624,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":625,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":26},{"%":625}],"O":[{"%":626,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":624},{"%":626}],"O":[{"%":627,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/"},"N":"struct_name"}],"I":[{"%":627}],"O":[{"%":628,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":628},{"%":25}],"O":[{"%":629,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":630,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":24},{"%":630}],"O":[{"%":631,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":629},{"%":631}],"O":[{"%":632,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/"},"N":"struct_name"}],"I":[{"%":632}],"O":[{"%":633,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/SEModule/"},"N":"struct_name"}],"I":[{"%":621},{"%":633}],"O":[{"%":634,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_6/"},"N":"struct_name"}],"I":[{"%":621},{"%":634}],"O":[{"%":635,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/Conv2D/"},"N":"struct_name"}],"I":[{"%":590},{"%":33}],"O":[{"%":636,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":637,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":636},{"%":637}],"O":[{"%":638,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":638},{"%":32}],"O":[{"%":639,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":640,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":31},{"%":640}],"O":[{"%":641,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D/"},"N":"struct_name"}],"I":[{"%":639},{"%":641}],"O":[{"%":642,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/"},"N":"struct_name"}],"I":[{"%":642}],"O":[{"%":643,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,6,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":643},{"%":30}],"O":[{"%":644,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":645,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":29},{"%":645}],"O":[{"%":646,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":644},{"%":646}],"O":[{"%":647,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.20000000298023224},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/"},"N":"struct_name"}],"I":[{"%":647}],"O":[{"%":648,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/SEModule/"},"N":"struct_name"}],"I":[{"%":636},{"%":648}],"O":[{"%":649,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/RSELayer_7/"},"N":"struct_name"}],"I":[{"%":636},{"%":649}],"O":[{"%":650,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.nearest_interp","A":[{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_d"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_h"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_w"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_f32","D":8.0},{"#":"0.a_f32","D":8.0}]},"N":"scale"},{"AT":{"#":"0.a_str","D":"nearest"},"N":"interp_method"},{"AT":{"#":"0.a_bool","D":false},"N":"align_corners"},{"AT":{"#":"0.a_i32","D":1},"N":"align_mode"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":605},{"%":0},{"%":0},{"%":0}],"O":[{"%":651,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.nearest_interp","A":[{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_d"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_h"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_w"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_f32","D":4.0},{"#":"0.a_f32","D":4.0}]},"N":"scale"},{"AT":{"#":"0.a_str","D":"nearest"},"N":"interp_method"},{"AT":{"#":"0.a_bool","D":false},"N":"align_corners"},{"AT":{"#":"0.a_i32","D":1},"N":"align_mode"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":620},{"%":0},{"%":0},{"%":0}],"O":[{"%":652,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.nearest_interp","A":[{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_d"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_h"},{"AT":{"#":"0.a_i32","D":-1},"N":"out_w"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_f32","D":2.0},{"#":"0.a_f32","D":2.0}]},"N":"scale"},{"AT":{"#":"0.a_str","D":"nearest"},"N":"interp_method"},{"AT":{"#":"0.a_bool","D":false},"N":"align_corners"},{"AT":{"#":"0.a_i32","D":1},"N":"align_mode"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":635},{"%":0},{"%":0},{"%":0}],"O":[{"%":653,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":1.0},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[],"O":[{"%":654,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"0.combine","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":651},{"%":652},{"%":653},{"%":650}],"O":[{"%":655,"TT":{"#":"0.t_vec","D":[{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.concat","A":[{"AT":{"#":"0.a_str","D":"/RSEFPN/"},"N":"struct_name"}],"I":[{"%":655},{"%":654}],"O":[{"%":656,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,96,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2D/"},"N":"struct_name"}],"I":[{"%":656},{"%":13}],"O":[{"%":657,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":false},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/BatchNorm/"},"N":"struct_name"}],"I":[{"%":657},{"%":10},{"%":9},{"%":12},{"%":11}],"O":[{"%":658,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}},{"%":659,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":660,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":661,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":662,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":663,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/BatchNorm/"},"N":"struct_name"}],"I":[{"%":658}],"O":[{"%":664,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose/"},"N":"struct_name"}],"I":[],"O":[{"%":665,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[0],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.conv2d_transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_array","D":[]},"N":"output_padding"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose/"},"N":"struct_name"}],"I":[{"%":664},{"%":8},{"%":665}],"O":[{"%":666,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":24},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose/"},"N":"struct_name"}],"I":[],"O":[{"%":667,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose/"},"N":"struct_name"}],"I":[{"%":7},{"%":667}],"O":[{"%":668,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,24,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose/"},"N":"struct_name"}],"I":[{"%":666},{"%":668}],"O":[{"%":669,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":false},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/BatchNorm_1/"},"N":"struct_name"}],"I":[{"%":669},{"%":4},{"%":3},{"%":6},{"%":5}],"O":[{"%":670,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}},{"%":671,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":672,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":673,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":674,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[24],"NCHW",[],0]}},{"%":675,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/BatchNorm_1/"},"N":"struct_name"}],"I":[{"%":670}],"O":[{"%":676,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,24,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose_1/"},"N":"struct_name"}],"I":[],"O":[{"%":677,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[0],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.conv2d_transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_array","D":[]},"N":"output_padding"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose_1/"},"N":"struct_name"}],"I":[{"%":676},{"%":2},{"%":677}],"O":[{"%":678,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,1,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose_1/"},"N":"struct_name"}],"I":[],"O":[{"%":679,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose_1/"},"N":"struct_name"}],"I":[{"%":1},{"%":679}],"O":[{"%":680,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,1,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/Conv2DTranspose_1/"},"N":"struct_name"}],"I":[{"%":678},{"%":680}],"O":[{"%":681,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,1,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.sigmoid","A":[{"AT":{"#":"0.a_str","D":"/DBHead/Head/"},"N":"struct_name"}],"I":[{"%":681}],"O":[{"%":682,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,1,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.fetch","A":[{"AT":{"#":"0.a_str","D":"fetch_name_0"},"N":"name"},{"AT":{"#":"0.a_i32","D":0},"N":"col"}],"I":[{"%":682}],"O":[{"%":683,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,1,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"persistable"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]}]}]}]}}
\ No newline at end of file
diff --git a/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.pdiparams b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.pdiparams
new file mode 100644
index 0000000..f59956d
Binary files /dev/null and b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.pdiparams differ
diff --git a/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.yml b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.yml
new file mode 100644
index 0000000..579d106
--- /dev/null
+++ b/tools/ocr/models/paddlex/official_models/PP-OCRv5_mobile_det/inference.yml
@@ -0,0 +1,53 @@
+Global:
+  model_name: PP-OCRv5_mobile_det
+Hpi:
+  backend_configs:
+    paddle_infer:
+      trt_dynamic_shapes: &id001
+        x:
+        - - 1
+          - 3
+          - 32
+          - 32
+        - - 1
+          - 3
+          - 736
+          - 736
+        - - 1
+          - 3
+          - 4000
+          - 4000
+    tensorrt:
+      dynamic_shapes: *id001
+PreProcess:
+  transform_ops:
+  - DecodeImage:
+      channel_first: false
+      img_mode: BGR
+  - DetLabelEncode: null
+  - DetResizeForTest:
+      resize_long: 960
+  - NormalizeImage:
+      mean:
+      - 0.485
+      - 0.456
+      - 0.406
+      order: hwc
+      scale: 1./255.
+      std:
+      - 0.229
+      - 0.224
+      - 0.225
+  - ToCHWImage: null
+  - KeepKeys:
+      keep_keys:
+      - image
+      - shape
+      - polys
+      - ignore_tags
+PostProcess:
+  name: DBPostProcess
+  thresh: 0.3
+  box_thresh: 0.6
+  max_candidates: 1000
+  unclip_ratio: 1.5
diff --git a/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/config.json b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/config.json
new file mode 100644
index 0000000..c8a5c7f
--- /dev/null
+++ b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/config.json
@@ -0,0 +1,935 @@
+{
+    "Global": {
+        "model_name": "latin_PP-OCRv5_mobile_rec"
+    },
+    "Hpi": {
+        "backend_configs": {
+            "paddle_infer": {
+                "trt_dynamic_shapes": {
+                    "x": [
+                        [
+                            1,
+                            3,
+                            48,
+                            160
+                        ],
+                        [
+                            1,
+                            3,
+                            48,
+                            320
+                        ],
+                        [
+                            8,
+                            3,
+                            48,
+                            3200
+                        ]
+                    ]
+                }
+            },
+            "tensorrt": {
+                "dynamic_shapes": {
+                    "x": [
+                        [
+                            1,
+                            3,
+                            48,
+                            160
+                        ],
+                        [
+                            1,
+                            3,
+                            48,
+                            320
+                        ],
+                        [
+                            8,
+                            3,
+                            48,
+                            3200
+                        ]
+                    ]
+                }
+            }
+        }
+    },
+    "PreProcess": {
+        "transform_ops": [
+            {
+                "DecodeImage": {
+                    "channel_first": false,
+                    "img_mode": "BGR"
+                }
+            },
+            {
+                "MultiLabelEncode": {
+                    "gtc_encode": "NRTRLabelEncode",
+                    "max_text_length": 1000
+                }
+            },
+            {
+                "RecResizeImg": {
+                    "eval_mode": true,
+                    "image_shape": [
+                        3,
+                        48,
+                        320
+                    ]
+                }
+            },
+            {
+                "KeepKeys": {
+                    "keep_keys": [
+                        "image",
+                        "label_ctc",
+                        "label_gtc",
+                        "length",
+                        "valid_ratio"
+                    ]
+                }
+            }
+        ]
+    },
+    "PostProcess": {
+        "name": "CTCLabelDecode",
+        "character_dict": [
+            "0",
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "A",
+            "B",
+            "C",
+            "D",
+            "E",
+            "F",
+            "G",
+            "H",
+            "I",
+            "J",
+            "K",
+            "L",
+            "M",
+            "N",
+            "O",
+            "P",
+            "Q",
+            "R",
+            "S",
+            "T",
+            "U",
+            "V",
+            "W",
+            "X",
+            "Y",
+            "Z",
+            "a",
+            "b",
+            "c",
+            "d",
+            "e",
+            "f",
+            "g",
+            "h",
+            "i",
+            "j",
+            "k",
+            "l",
+            "m",
+            "n",
+            "o",
+            "p",
+            "q",
+            "r",
+            "s",
+            "t",
+            "u",
+            "v",
+            "w",
+            "x",
+            "y",
+            "z",
+            "À",
+            "Á",
+            "Â",
+            "Ã",
+            "Ä",
+            "Å",
+            "Æ",
+            "Ç",
+            "È",
+            "É",
+            "Ê",
+            "Ë",
+            "Ì",
+            "Í",
+            "Î",
+            "Ï",
+            "Ð",
+            "Ñ",
+            "Ò",
+            "Ó",
+            "Ô",
+            "Õ",
+            "Ö",
+            "×",
+            "Ø",
+            "Ù",
+            "Ú",
+            "Û",
+            "Ü",
+            "Ý",
+            "Þ",
+            "ß",
+            "à",
+            "á",
+            "â",
+            "ã",
+            "ä",
+            "å",
+            "æ",
+            "ç",
+            "è",
+            "é",
+            "ê",
+            "ë",
+            "ì",
+            "í",
+            "î",
+            "ï",
+            "ð",
+            "ñ",
+            "ò",
+            "ó",
+            "ô",
+            "õ",
+            "ö",
+            "÷",
+            "ø",
+            "ù",
+            "ú",
+            "û",
+            "ü",
+            "ý",
+            "þ",
+            "ÿ",
+            "Ā",
+            "ā",
+            "Ă",
+            "ă",
+            "Ą",
+            "ą",
+            "Ć",
+            "ć",
+            "Ĉ",
+            "ĉ",
+            "Ċ",
+            "ċ",
+            "Č",
+            "č",
+            "Ď",
+            "ď",
+            "Đ",
+            "đ",
+            "Ē",
+            "ē",
+            "Ĕ",
+            "ĕ",
+            "Ė",
+            "ė",
+            "Ę",
+            "ę",
+            "Ě",
+            "ě",
+            "Ĝ",
+            "ĝ",
+            "Ğ",
+            "ğ",
+            "Ġ",
+            "ġ",
+            "Ģ",
+            "ģ",
+            "Ĥ",
+            "ĥ",
+            "Ħ",
+            "ħ",
+            "Ĩ",
+            "ĩ",
+            "Ī",
+            "ī",
+            "Ĭ",
+            "ĭ",
+            "Į",
+            "į",
+            "İ",
+            "ı",
+            "Ĳ",
+            "ĳ",
+            "Ĵ",
+            "ĵ",
+            "Ķ",
+            "ķ",
+            "ĸ",
+            "Ĺ",
+            "ĺ",
+            "Ļ",
+            "ļ",
+            "Ľ",
+            "ľ",
+            "Ŀ",
+            "ŀ",
+            "Ł",
+            "ł",
+            "Ń",
+            "ń",
+            "Ņ",
+            "ņ",
+            "Ň",
+            "ň",
+            "ŉ",
+            "Ŋ",
+            "ŋ",
+            "Ō",
+            "ō",
+            "Ŏ",
+            "ŏ",
+            "Ő",
+            "ő",
+            "Œ",
+            "œ",
+            "Ŕ",
+            "ŕ",
+            "Ŗ",
+            "ŗ",
+            "Ř",
+            "ř",
+            "Ś",
+            "ś",
+            "Ŝ",
+            "ŝ",
+            "Ş",
+            "ş",
+            "Š",
+            "š",
+            "Ţ",
+            "ţ",
+            "Ť",
+            "ť",
+            "Ŧ",
+            "ŧ",
+            "Ũ",
+            "ũ",
+            "Ū",
+            "ū",
+            "Ŭ",
+            "ŭ",
+            "Ů",
+            "ů",
+            "Ű",
+            "ű",
+            "Ų",
+            "ų",
+            "Ŵ",
+            "ŵ",
+            "Ŷ",
+            "ŷ",
+            "Ÿ",
+            "Ź",
+            "ź",
+            "Ż",
+            "ż",
+            "Ž",
+            "ž",
+            "ſ",
+            "ƀ",
+            "Ɓ",
+            "Ƃ",
+            "ƃ",
+            "Ƅ",
+            "ƅ",
+            "Ɔ",
+            "Ƈ",
+            "ƈ",
+            "Ɖ",
+            "Ɗ",
+            "Ƌ",
+            "ƌ",
+            "ƍ",
+            "Ǝ",
+            "Ə",
+            "Ɛ",
+            "Ƒ",
+            "ƒ",
+            "Ɠ",
+            "Ɣ",
+            "ƕ",
+            "Ɩ",
+            "Ɨ",
+            "Ƙ",
+            "ƙ",
+            "ƚ",
+            "ƛ",
+            "Ɯ",
+            "Ɲ",
+            "ƞ",
+            "Ɵ",
+            "Ơ",
+            "ơ",
+            "Ƣ",
+            "ƣ",
+            "Ƥ",
+            "ƥ",
+            "Ʀ",
+            "Ƨ",
+            "ƨ",
+            "Ʃ",
+            "ƪ",
+            "ƫ",
+            "Ƭ",
+            "ƭ",
+            "Ʈ",
+            "Ư",
+            "ư",
+            "Ʊ",
+            "Ʋ",
+            "Ƴ",
+            "ƴ",
+            "Ƶ",
+            "ƶ",
+            "Ʒ",
+            "Ƹ",
+            "ƹ",
+            "ƺ",
+            "ƻ",
+            "Ƽ",
+            "ƽ",
+            "ƾ",
+            "ƿ",
+            "ǀ",
+            "ǁ",
+            "ǂ",
+            "ǃ",
+            "Ǆ",
+            "ǅ",
+            "ǆ",
+            "Ǉ",
+            "ǈ",
+            "ǉ",
+            "Ǌ",
+            "ǋ",
+            "ǌ",
+            "Ǎ",
+            "ǎ",
+            "Ǐ",
+            "ǐ",
+            "Ǒ",
+            "ǒ",
+            "Ǔ",
+            "ǔ",
+            "Ǖ",
+            "ǖ",
+            "Ǘ",
+            "ǘ",
+            "Ǚ",
+            "ǚ",
+            "Ǜ",
+            "ǜ",
+            "ǝ",
+            "Ǟ",
+            "ǟ",
+            "Ǡ",
+            "ǡ",
+            "Ǣ",
+            "ǣ",
+            "Ǥ",
+            "ǥ",
+            "Ǧ",
+            "ǧ",
+            "Ǩ",
+            "ǩ",
+            "Ǫ",
+            "ǫ",
+            "Ǭ",
+            "ǭ",
+            "Ǯ",
+            "ǯ",
+            "ǰ",
+            "Ǳ",
+            "ǲ",
+            "ǳ",
+            "Ǵ",
+            "ǵ",
+            "Ƕ",
+            "Ƿ",
+            "Ǹ",
+            "ǹ",
+            "Ǻ",
+            "ǻ",
+            "Ǽ",
+            "ǽ",
+            "Ǿ",
+            "ǿ",
+            "Ȁ",
+            "ȁ",
+            "Ȃ",
+            "ȃ",
+            "Ȅ",
+            "ȅ",
+            "Ȇ",
+            "ȇ",
+            "Ȉ",
+            "ȉ",
+            "Ȋ",
+            "ȋ",
+            "Ȍ",
+            "ȍ",
+            "Ȏ",
+            "ȏ",
+            "Ȑ",
+            "ȑ",
+            "Ȓ",
+            "ȓ",
+            "Ȕ",
+            "ȕ",
+            "Ȗ",
+            "ȗ",
+            "Ș",
+            "ș",
+            "Ț",
+            "ț",
+            "Ȝ",
+            "ȝ",
+            "Ȟ",
+            "ȟ",
+            "Ƞ",
+            "ȡ",
+            "Ȣ",
+            "ȣ",
+            "Ȥ",
+            "ȥ",
+            "Ȧ",
+            "ȧ",
+            "Ȩ",
+            "ȩ",
+            "Ȫ",
+            "ȫ",
+            "Ȭ",
+            "ȭ",
+            "Ȯ",
+            "ȯ",
+            "Ȱ",
+            "ȱ",
+            "Ȳ",
+            "ȳ",
+            "ȴ",
+            "ȵ",
+            "ȶ",
+            "ȷ",
+            "ȸ",
+            "ȹ",
+            "Ⱥ",
+            "Ȼ",
+            "ȼ",
+            "Ƚ",
+            "Ⱦ",
+            "ȿ",
+            "ɀ",
+            "Ɂ",
+            "ɂ",
+            "Ƀ",
+            "Ʉ",
+            "Ʌ",
+            "Ɇ",
+            "ɇ",
+            "Ɉ",
+            "ɉ",
+            "Ɋ",
+            "ɋ",
+            "Ɍ",
+            "ɍ",
+            "Ɏ",
+            "ɏ",
+            "!",
+            "\"",
+            "#",
+            "$",
+            "%",
+            "&",
+            "'",
+            "(",
+            ")",
+            "*",
+            "+",
+            ",",
+            "-",
+            ".",
+            "/",
+            ":",
+            ";",
+            "<",
+            "=",
+            ">",
+            "?",
+            "@",
+            "[",
+            "\\",
+            "]",
+            "_",
+            "`",
+            "{",
+            "|",
+            "}",
+            "^",
+            "~",
+            "©",
+            "®",
+            "℉",
+            "№",
+            "Ω",
+            "℮",
+            "™",
+            "∆",
+            "✓",
+            "✔",
+            "✗",
+            "✘",
+            "✕",
+            "☑",
+            "☒",
+            "●",
+            "▪",
+            "▫",
+            "◼",
+            "▶",
+            "◀",
+            "⬆",
+            "¤",
+            "¦",
+            "§",
+            "¨",
+            "ª",
+            "«",
+            "¬",
+            "¯",
+            "°",
+            "²",
+            "³",
+            "´",
+            "µ",
+            "¶",
+            "¸",
+            "¹",
+            "º",
+            "»",
+            "¼",
+            "½",
+            "¾",
+            "¿",
+            "×",
+            "‐",
+            "‑",
+            "‒",
+            "—",
+            "―",
+            "‖",
+            "‗",
+            "‘",
+            "’",
+            "‚",
+            "‛",
+            "“",
+            "”",
+            "„",
+            "‟",
+            "†",
+            "‡",
+            "‣",
+            "․",
+            "…",
+            "‧",
+            "‰",
+            "‴",
+            "‵",
+            "‶",
+            "‷",
+            "‸",
+            "‹",
+            "›",
+            "※",
+            "‼",
+            "‽",
+            "‾",
+            "−",
+            "₤",
+            "₡",
+            "₹",
+            "₽",
+            "₴",
+            "₿",
+            "¢",
+            "€",
+            "£",
+            "¥",
+            "Ⅰ",
+            "Ⅱ",
+            "Ⅲ",
+            "Ⅳ",
+            "Ⅴ",
+            "Ⅵ",
+            "Ⅶ",
+            "Ⅷ",
+            "Ⅸ",
+            "Ⅹ",
+            "Ⅺ",
+            "Ⅻ",
+            "ⅰ",
+            "ⅱ",
+            "ⅲ",
+            "ⅳ",
+            "ⅴ",
+            "ⅵ",
+            "ⅶ",
+            "ⅷ",
+            "ⅸ",
+            "ⅹ",
+            "ⅺ",
+            "ⅻ",
+            "➀",
+            "➁",
+            "➂",
+            "➃",
+            "➄",
+            "➅",
+            "➆",
+            "➇",
+            "➈",
+            "➉",
+            "➊",
+            "➋",
+            "➌",
+            "➍",
+            "➎",
+            "➏",
+            "➐",
+            "➑",
+            "➒",
+            "➓",
+            "❶",
+            "❷",
+            "❸",
+            "❹",
+            "❺",
+            "❻",
+            "❼",
+            "❽",
+            "❾",
+            "❿",
+            "①",
+            "②",
+            "③",
+            "④",
+            "⑤",
+            "⑥",
+            "⑦",
+            "⑧",
+            "⑨",
+            "⑩",
+            "↑",
+            "→",
+            "↓",
+            "↕",
+            "←",
+            "↔",
+            "⇒",
+            "⇐",
+            "⇔",
+            "∀",
+            "∃",
+            "∄",
+            "∴",
+            "∵",
+            "∝",
+            "∞",
+            "∩",
+            "∪",
+            "∂",
+            "∫",
+            "∬",
+            "∭",
+            "∮",
+            "∯",
+            "∰",
+            "∑",
+            "∏",
+            "√",
+            "∛",
+            "∜",
+            "∱",
+            "∲",
+            "∳",
+            "∶",
+            "∷",
+            "∼",
+            "∖",
+            "∗",
+            "≈",
+            "≠",
+            "≡",
+            "≤",
+            "≥",
+            "⊂",
+            "⊃",
+            "⊥",
+            "⊾",
+            "⊿",
+            "□",
+            "∥",
+            "∋",
+            "ƒ",
+            "′",
+            "″",
+            "À",
+            "Á",
+            "Â",
+            "Ã",
+            "Ä",
+            "Å",
+            "Æ",
+            "Ç",
+            "È",
+            "É",
+            "Ê",
+            "Ë",
+            "Ì",
+            "Í",
+            "Î",
+            "Ï",
+            "Ð",
+            "Ñ",
+            "Ò",
+            "Ó",
+            "Ô",
+            "Õ",
+            "Ö",
+            "Ø",
+            "Ù",
+            "Ú",
+            "Û",
+            "Ü",
+            "Ý",
+            "Þ",
+            "à",
+            "á",
+            "â",
+            "ã",
+            "ä",
+            "å",
+            "æ",
+            "ç",
+            "è",
+            "é",
+            "ê",
+            "ë",
+            "ì",
+            "í",
+            "î",
+            "ï",
+            "ð",
+            "ñ",
+            "ò",
+            "ó",
+            "ô",
+            "õ",
+            "ö",
+            "ø",
+            "ù",
+            "ú",
+            "û",
+            "ü",
+            "ý",
+            "þ",
+            "ÿ",
+            "Α",
+            "Β",
+            "Γ",
+            "Δ",
+            "Ε",
+            "Ζ",
+            "Η",
+            "Θ",
+            "Ι",
+            "Κ",
+            "Λ",
+            "Μ",
+            "Ν",
+            "Ξ",
+            "Ο",
+            "Π",
+            "Ρ",
+            "Σ",
+            "Τ",
+            "Υ",
+            "Φ",
+            "Χ",
+            "Ψ",
+            "Ω",
+            "α",
+            "β",
+            "γ",
+            "δ",
+            "ε",
+            "ζ",
+            "η",
+            "θ",
+            "ι",
+            "κ",
+            "λ",
+            "μ",
+            "ν",
+            "ξ",
+            "ο",
+            "π",
+            "ρ",
+            "σ",
+            "ς",
+            "τ",
+            "υ",
+            "φ",
+            "χ",
+            "ψ",
+            "ω",
+            "Å",
+            "ℏ",
+            "⌀",
+            "⍺",
+            "⍵",
+            "𝑢",
+            "𝜓",
+            "०",
+            "‥",
+            "︽",
+            "﹥",
+            "•",
+            "÷",
+            "∕",
+            "∙",
+            "⋅",
+            "·",
+            "±",
+            "∓",
+            "∟",
+            "∠",
+            "∡",
+            "∢",
+            "℧",
+            "☺"
+        ]
+    }
+}
\ No newline at end of file
diff --git a/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.json b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.json
new file mode 100644
index 0000000..c3e40e4
--- /dev/null
+++ b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.json
@@ -0,0 +1 @@
+{"base_code":{"magic":"pir","trainable":true,"version":1},"program":{"regions":[{"#":"region_0","blocks":[{"#":"block_0","args":[],"ops":[{"#":"p","A":[0,1,1,"linear_8.b_0"],"DA":[],"O":{"%":1,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[838],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_8.w_0"],"DA":[],"O":{"%":2,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,838],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_150.w_2"],"DA":[],"O":{"%":3,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_150.w_1"],"DA":[],"O":{"%":4,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_150.b_0"],"DA":[],"O":{"%":5,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_150.w_0"],"DA":[],"O":{"%":6,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_135.w_0"],"DA":[],"O":{"%":7,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,60,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_149.w_2"],"DA":[],"O":{"%":8,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_149.w_1"],"DA":[],"O":{"%":9,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_149.b_0"],"DA":[],"O":{"%":10,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_149.w_0"],"DA":[],"O":{"%":11,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_134.w_0"],"DA":[],"O":{"%":12,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60,960,1,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_148.w_2"],"DA":[],"O":{"%":13,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_148.w_1"],"DA":[],"O":{"%":14,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_148.b_0"],"DA":[],"O":{"%":15,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_148.w_0"],"DA":[],"O":{"%":16,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_133.w_0"],"DA":[],"O":{"%":17,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,120,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_4.b_0"],"DA":[],"O":{"%":18,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_4.w_0"],"DA":[],"O":{"%":19,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_7.b_0"],"DA":[],"O":{"%":20,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_7.w_0"],"DA":[],"O":{"%":21,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_6.b_0"],"DA":[],"O":{"%":22,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_6.w_0"],"DA":[],"O":{"%":23,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_3.b_0"],"DA":[],"O":{"%":24,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_3.w_0"],"DA":[],"O":{"%":25,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_5.b_0"],"DA":[],"O":{"%":26,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_5.w_0"],"DA":[],"O":{"%":27,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_4.b_0"],"DA":[],"O":{"%":28,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[360],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_4.w_0"],"DA":[],"O":{"%":29,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,360],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_2.b_0"],"DA":[],"O":{"%":30,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_2.w_0"],"DA":[],"O":{"%":31,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_3.b_0"],"DA":[],"O":{"%":32,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_3.w_0"],"DA":[],"O":{"%":33,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_2.b_0"],"DA":[],"O":{"%":34,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_2.w_0"],"DA":[],"O":{"%":35,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_1.b_0"],"DA":[],"O":{"%":36,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_1.w_0"],"DA":[],"O":{"%":37,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_1.b_0"],"DA":[],"O":{"%":38,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_1.w_0"],"DA":[],"O":{"%":39,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_0.b_0"],"DA":[],"O":{"%":40,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[360],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"linear_0.w_0"],"DA":[],"O":{"%":41,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,360],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_0.b_0"],"DA":[],"O":{"%":42,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"layer_norm_0.w_0"],"DA":[],"O":{"%":43,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_147.w_2"],"DA":[],"O":{"%":44,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_147.w_1"],"DA":[],"O":{"%":45,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_147.b_0"],"DA":[],"O":{"%":46,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_147.w_0"],"DA":[],"O":{"%":47,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_132.w_0"],"DA":[],"O":{"%":48,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,60,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_146.w_2"],"DA":[],"O":{"%":49,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_146.w_1"],"DA":[],"O":{"%":50,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_146.b_0"],"DA":[],"O":{"%":51,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_146.w_0"],"DA":[],"O":{"%":52,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_131.w_0"],"DA":[],"O":{"%":53,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60,480,1,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_163.b_0"],"DA":[],"O":{"%":54,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_163.w_0"],"DA":[],"O":{"%":55,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,480,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_55.w_1"],"DA":[],"O":{"%":56,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_55.w_0"],"DA":[],"O":{"%":57,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_54.w_1"],"DA":[],"O":{"%":58,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_54.w_0"],"DA":[],"O":{"%":59,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_162.b_0"],"DA":[],"O":{"%":60,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_162.w_0"],"DA":[],"O":{"%":61,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_53.w_1"],"DA":[],"O":{"%":62,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_53.w_0"],"DA":[],"O":{"%":63,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_52.w_1"],"DA":[],"O":{"%":64,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_52.w_0"],"DA":[],"O":{"%":65,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_161.b_0"],"DA":[],"O":{"%":66,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_161.w_0"],"DA":[],"O":{"%":67,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,480,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_51.w_1"],"DA":[],"O":{"%":68,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_51.w_0"],"DA":[],"O":{"%":69,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_50.w_1"],"DA":[],"O":{"%":70,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_50.w_0"],"DA":[],"O":{"%":71,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_160.b_0"],"DA":[],"O":{"%":72,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_160.w_0"],"DA":[],"O":{"%":73,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_49.w_1"],"DA":[],"O":{"%":74,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_49.w_0"],"DA":[],"O":{"%":75,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_48.w_1"],"DA":[],"O":{"%":76,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_48.w_0"],"DA":[],"O":{"%":77,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_159.b_0"],"DA":[],"O":{"%":78,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_159.w_0"],"DA":[],"O":{"%":79,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,480,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_47.w_1"],"DA":[],"O":{"%":80,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_47.w_0"],"DA":[],"O":{"%":81,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_46.w_1"],"DA":[],"O":{"%":82,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_46.w_0"],"DA":[],"O":{"%":83,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_108.b_0"],"DA":[],"O":{"%":84,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_108.w_0"],"DA":[],"O":{"%":85,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,120,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_107.b_0"],"DA":[],"O":{"%":86,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_107.w_0"],"DA":[],"O":{"%":87,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120,480,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_158.b_0"],"DA":[],"O":{"%":88,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_158.w_0"],"DA":[],"O":{"%":89,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_45.w_1"],"DA":[],"O":{"%":90,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_45.w_0"],"DA":[],"O":{"%":91,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_44.w_1"],"DA":[],"O":{"%":92,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_44.w_0"],"DA":[],"O":{"%":93,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_157.b_0"],"DA":[],"O":{"%":94,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_157.w_0"],"DA":[],"O":{"%":95,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480,240,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_43.w_1"],"DA":[],"O":{"%":96,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_43.w_0"],"DA":[],"O":{"%":97,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_42.w_1"],"DA":[],"O":{"%":98,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_42.w_0"],"DA":[],"O":{"%":99,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_97.b_0"],"DA":[],"O":{"%":100,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_97.w_0"],"DA":[],"O":{"%":101,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,60,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_96.b_0"],"DA":[],"O":{"%":102,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_96.w_0"],"DA":[],"O":{"%":103,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60,240,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_156.b_0"],"DA":[],"O":{"%":104,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_156.w_0"],"DA":[],"O":{"%":105,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_41.w_1"],"DA":[],"O":{"%":106,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_41.w_0"],"DA":[],"O":{"%":107,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_40.w_1"],"DA":[],"O":{"%":108,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_40.w_0"],"DA":[],"O":{"%":109,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_155.b_0"],"DA":[],"O":{"%":110,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_155.w_0"],"DA":[],"O":{"%":111,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,240,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_39.w_1"],"DA":[],"O":{"%":112,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_39.w_0"],"DA":[],"O":{"%":113,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_38.w_1"],"DA":[],"O":{"%":114,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_38.w_0"],"DA":[],"O":{"%":115,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_154.b_0"],"DA":[],"O":{"%":116,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_154.w_0"],"DA":[],"O":{"%":117,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_37.w_1"],"DA":[],"O":{"%":118,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_37.w_0"],"DA":[],"O":{"%":119,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_36.w_1"],"DA":[],"O":{"%":120,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_36.w_0"],"DA":[],"O":{"%":121,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_153.b_0"],"DA":[],"O":{"%":122,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_153.w_0"],"DA":[],"O":{"%":123,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,240,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_35.w_1"],"DA":[],"O":{"%":124,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_35.w_0"],"DA":[],"O":{"%":125,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_34.w_1"],"DA":[],"O":{"%":126,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_34.w_0"],"DA":[],"O":{"%":127,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_152.b_0"],"DA":[],"O":{"%":128,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_152.w_0"],"DA":[],"O":{"%":129,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_33.w_1"],"DA":[],"O":{"%":130,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_33.w_0"],"DA":[],"O":{"%":131,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_32.w_1"],"DA":[],"O":{"%":132,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_32.w_0"],"DA":[],"O":{"%":133,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_151.b_0"],"DA":[],"O":{"%":134,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_151.w_0"],"DA":[],"O":{"%":135,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,240,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_31.w_1"],"DA":[],"O":{"%":136,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_31.w_0"],"DA":[],"O":{"%":137,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_30.w_1"],"DA":[],"O":{"%":138,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_30.w_0"],"DA":[],"O":{"%":139,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_150.b_0"],"DA":[],"O":{"%":140,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_150.w_0"],"DA":[],"O":{"%":141,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_29.w_1"],"DA":[],"O":{"%":142,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_29.w_0"],"DA":[],"O":{"%":143,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_28.w_1"],"DA":[],"O":{"%":144,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_28.w_0"],"DA":[],"O":{"%":145,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_149.b_0"],"DA":[],"O":{"%":146,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_149.w_0"],"DA":[],"O":{"%":147,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,240,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_27.w_1"],"DA":[],"O":{"%":148,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_27.w_0"],"DA":[],"O":{"%":149,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_26.w_1"],"DA":[],"O":{"%":150,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_26.w_0"],"DA":[],"O":{"%":151,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_148.b_0"],"DA":[],"O":{"%":152,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_148.w_0"],"DA":[],"O":{"%":153,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,1,5,5],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_25.w_1"],"DA":[],"O":{"%":154,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_25.w_0"],"DA":[],"O":{"%":155,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_24.w_1"],"DA":[],"O":{"%":156,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_24.w_0"],"DA":[],"O":{"%":157,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_147.b_0"],"DA":[],"O":{"%":158,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_147.w_0"],"DA":[],"O":{"%":159,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[240,128,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_23.w_1"],"DA":[],"O":{"%":160,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_23.w_0"],"DA":[],"O":{"%":161,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_22.w_1"],"DA":[],"O":{"%":162,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_22.w_0"],"DA":[],"O":{"%":163,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_146.b_0"],"DA":[],"O":{"%":164,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_146.w_0"],"DA":[],"O":{"%":165,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_21.w_1"],"DA":[],"O":{"%":166,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_21.w_0"],"DA":[],"O":{"%":167,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_20.w_1"],"DA":[],"O":{"%":168,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_20.w_0"],"DA":[],"O":{"%":169,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_145.b_0"],"DA":[],"O":{"%":170,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_145.w_0"],"DA":[],"O":{"%":171,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128,128,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_19.w_1"],"DA":[],"O":{"%":172,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_19.w_0"],"DA":[],"O":{"%":173,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_18.w_1"],"DA":[],"O":{"%":174,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_18.w_0"],"DA":[],"O":{"%":175,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_144.b_0"],"DA":[],"O":{"%":176,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_144.w_0"],"DA":[],"O":{"%":177,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_17.w_1"],"DA":[],"O":{"%":178,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_17.w_0"],"DA":[],"O":{"%":179,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_16.w_1"],"DA":[],"O":{"%":180,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_16.w_0"],"DA":[],"O":{"%":181,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_143.b_0"],"DA":[],"O":{"%":182,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_143.w_0"],"DA":[],"O":{"%":183,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[128,64,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_15.w_1"],"DA":[],"O":{"%":184,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_15.w_0"],"DA":[],"O":{"%":185,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_14.w_1"],"DA":[],"O":{"%":186,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_14.w_0"],"DA":[],"O":{"%":187,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_142.b_0"],"DA":[],"O":{"%":188,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_142.w_0"],"DA":[],"O":{"%":189,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_13.w_1"],"DA":[],"O":{"%":190,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_13.w_0"],"DA":[],"O":{"%":191,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_12.w_1"],"DA":[],"O":{"%":192,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_12.w_0"],"DA":[],"O":{"%":193,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_141.b_0"],"DA":[],"O":{"%":194,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_141.w_0"],"DA":[],"O":{"%":195,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64,64,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_11.w_1"],"DA":[],"O":{"%":196,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_11.w_0"],"DA":[],"O":{"%":197,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_10.w_1"],"DA":[],"O":{"%":198,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_10.w_0"],"DA":[],"O":{"%":199,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_140.b_0"],"DA":[],"O":{"%":200,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_140.w_0"],"DA":[],"O":{"%":201,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_9.w_1"],"DA":[],"O":{"%":202,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_9.w_0"],"DA":[],"O":{"%":203,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_8.w_1"],"DA":[],"O":{"%":204,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_8.w_0"],"DA":[],"O":{"%":205,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_139.b_0"],"DA":[],"O":{"%":206,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_139.w_0"],"DA":[],"O":{"%":207,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[64,32,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_7.w_1"],"DA":[],"O":{"%":208,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_7.w_0"],"DA":[],"O":{"%":209,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_6.w_1"],"DA":[],"O":{"%":210,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_6.w_0"],"DA":[],"O":{"%":211,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_138.b_0"],"DA":[],"O":{"%":212,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_138.w_0"],"DA":[],"O":{"%":213,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_5.w_1"],"DA":[],"O":{"%":214,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_5.w_0"],"DA":[],"O":{"%":215,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_4.w_1"],"DA":[],"O":{"%":216,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_4.w_0"],"DA":[],"O":{"%":217,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_137.b_0"],"DA":[],"O":{"%":218,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_137.w_0"],"DA":[],"O":{"%":219,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[32,16,1,1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_3.w_1"],"DA":[],"O":{"%":220,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_3.w_0"],"DA":[],"O":{"%":221,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_2.w_1"],"DA":[],"O":{"%":222,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_2.w_0"],"DA":[],"O":{"%":223,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_136.b_0"],"DA":[],"O":{"%":224,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_136.w_0"],"DA":[],"O":{"%":225,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16,1,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_1.w_1"],"DA":[],"O":{"%":226,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_1.w_0"],"DA":[],"O":{"%":227,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_0.w_1"],"DA":[],"O":{"%":228,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"learnable_affine_block_0.w_0"],"DA":[],"O":{"%":229,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.w_2"],"DA":[],"O":{"%":230,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.w_1"],"DA":[],"O":{"%":231,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,1,0],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.b_0"],"DA":[],"O":{"%":232,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"batch_norm2d_0.w_0"],"DA":[],"O":{"%":233,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"p","A":[0,1,1,"conv2d_0.w_0"],"DA":[],"O":{"%":234,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16,3,3,3],"NCHW",[],0]}},"OA":[1,0,1],"QA":[]},{"#":"1.data","A":[{"AT":{"#":"0.a_str","D":"x"},"N":"name"},{"AT":{"#":"1.a_intarray","D":[-1,3,48,-1]},"N":"shape"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[0,0,""]},"N":"place"}],"I":[],"O":[{"%":235,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,3,48,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/ConvBNLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":235},{"%":234}],"O":[{"%":236,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/ConvBNLayer/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":236},{"%":231},{"%":230},{"%":233},{"%":232}],"O":[{"%":237,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}},{"%":238,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":239,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":240,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":241,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[16],"NCHW",[],0]}},{"%":242,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":16},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":237},{"%":225}],"O":[{"%":243,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":244,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":224},{"%":244}],"O":[{"%":245,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,16,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":243},{"%":245}],"O":[{"%":246,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":229},{"%":246}],"O":[{"%":247,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":247},{"%":228}],"O":[{"%":248,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":248}],"O":[{"%":249,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":227},{"%":249}],"O":[{"%":250,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":250},{"%":226}],"O":[{"%":251,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,16,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":251},{"%":219}],"O":[{"%":252,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":253,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":218},{"%":253}],"O":[{"%":254,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,32,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":252},{"%":254}],"O":[{"%":255,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":223},{"%":255}],"O":[{"%":256,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":256},{"%":222}],"O":[{"%":257,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":257}],"O":[{"%":258,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":221},{"%":258}],"O":[{"%":259,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":259},{"%":220}],"O":[{"%":260,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":32},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":260},{"%":213}],"O":[{"%":261,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":262,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":212},{"%":262}],"O":[{"%":263,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,32,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":261},{"%":263}],"O":[{"%":264,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":217},{"%":264}],"O":[{"%":265,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":265},{"%":216}],"O":[{"%":266,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":266}],"O":[{"%":267,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":215},{"%":267}],"O":[{"%":268,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":268},{"%":214}],"O":[{"%":269,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,32,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":269},{"%":207}],"O":[{"%":270,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":271,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":206},{"%":271}],"O":[{"%":272,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,64,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":270},{"%":272}],"O":[{"%":273,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":211},{"%":273}],"O":[{"%":274,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":274},{"%":210}],"O":[{"%":275,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":275}],"O":[{"%":276,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":209},{"%":276}],"O":[{"%":277,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":277},{"%":208}],"O":[{"%":278,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":64},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":278},{"%":201}],"O":[{"%":279,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":280,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":200},{"%":280}],"O":[{"%":281,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,64,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":279},{"%":281}],"O":[{"%":282,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":205},{"%":282}],"O":[{"%":283,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":283},{"%":204}],"O":[{"%":284,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":284}],"O":[{"%":285,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":203},{"%":285}],"O":[{"%":286,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":286},{"%":202}],"O":[{"%":287,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":287},{"%":195}],"O":[{"%":288,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":289,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":194},{"%":289}],"O":[{"%":290,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,64,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":288},{"%":290}],"O":[{"%":291,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":199},{"%":291}],"O":[{"%":292,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":292},{"%":198}],"O":[{"%":293,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":293}],"O":[{"%":294,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":197},{"%":294}],"O":[{"%":295,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_1/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":295},{"%":196}],"O":[{"%":296,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,24,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":64},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":296},{"%":189}],"O":[{"%":297,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":298,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":188},{"%":298}],"O":[{"%":299,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,64,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":297},{"%":299}],"O":[{"%":300,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":193},{"%":300}],"O":[{"%":301,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":301},{"%":192}],"O":[{"%":302,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":302}],"O":[{"%":303,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":191},{"%":303}],"O":[{"%":304,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":304},{"%":190}],"O":[{"%":305,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,64,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":305},{"%":183}],"O":[{"%":306,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":307,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":182},{"%":307}],"O":[{"%":308,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,128,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":306},{"%":308}],"O":[{"%":309,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":187},{"%":309}],"O":[{"%":310,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":310},{"%":186}],"O":[{"%":311,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":311}],"O":[{"%":312,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":185},{"%":312}],"O":[{"%":313,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":313},{"%":184}],"O":[{"%":314,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":128},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":314},{"%":177}],"O":[{"%":315,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":316,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":176},{"%":316}],"O":[{"%":317,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,128,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":315},{"%":317}],"O":[{"%":318,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":181},{"%":318}],"O":[{"%":319,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":319},{"%":180}],"O":[{"%":320,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":320}],"O":[{"%":321,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":179},{"%":321}],"O":[{"%":322,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":322},{"%":178}],"O":[{"%":323,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":323},{"%":171}],"O":[{"%":324,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":325,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":170},{"%":325}],"O":[{"%":326,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,128,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":324},{"%":326}],"O":[{"%":327,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":175},{"%":327}],"O":[{"%":328,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":328},{"%":174}],"O":[{"%":329,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":329}],"O":[{"%":330,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":173},{"%":330}],"O":[{"%":331,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_2/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":331},{"%":172}],"O":[{"%":332,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":128},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":332},{"%":165}],"O":[{"%":333,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":334,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":164},{"%":334}],"O":[{"%":335,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,128,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":333},{"%":335}],"O":[{"%":336,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":169},{"%":336}],"O":[{"%":337,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":337},{"%":168}],"O":[{"%":338,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":338}],"O":[{"%":339,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":167},{"%":339}],"O":[{"%":340,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":340},{"%":166}],"O":[{"%":341,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,128,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":341},{"%":159}],"O":[{"%":342,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":343,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":158},{"%":343}],"O":[{"%":344,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":342},{"%":344}],"O":[{"%":345,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":163},{"%":345}],"O":[{"%":346,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":346},{"%":162}],"O":[{"%":347,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":347}],"O":[{"%":348,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":161},{"%":348}],"O":[{"%":349,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":349},{"%":160}],"O":[{"%":350,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":240},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":350},{"%":153}],"O":[{"%":351,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":352,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":152},{"%":352}],"O":[{"%":353,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":351},{"%":353}],"O":[{"%":354,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":157},{"%":354}],"O":[{"%":355,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":355},{"%":156}],"O":[{"%":356,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":356}],"O":[{"%":357,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":155},{"%":357}],"O":[{"%":358,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":358},{"%":154}],"O":[{"%":359,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":359},{"%":147}],"O":[{"%":360,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":361,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":146},{"%":361}],"O":[{"%":362,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":360},{"%":362}],"O":[{"%":363,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":151},{"%":363}],"O":[{"%":364,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":364},{"%":150}],"O":[{"%":365,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":365}],"O":[{"%":366,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":149},{"%":366}],"O":[{"%":367,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":367},{"%":148}],"O":[{"%":368,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":240},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":368},{"%":141}],"O":[{"%":369,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":370,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":140},{"%":370}],"O":[{"%":371,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":369},{"%":371}],"O":[{"%":372,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":145},{"%":372}],"O":[{"%":373,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":373},{"%":144}],"O":[{"%":374,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":374}],"O":[{"%":375,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":143},{"%":375}],"O":[{"%":376,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":376},{"%":142}],"O":[{"%":377,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":377},{"%":135}],"O":[{"%":378,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":379,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":134},{"%":379}],"O":[{"%":380,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":378},{"%":380}],"O":[{"%":381,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":139},{"%":381}],"O":[{"%":382,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":382},{"%":138}],"O":[{"%":383,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":383}],"O":[{"%":384,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":137},{"%":384}],"O":[{"%":385,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":385},{"%":136}],"O":[{"%":386,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":240},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":386},{"%":129}],"O":[{"%":387,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":388,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":128},{"%":388}],"O":[{"%":389,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":387},{"%":389}],"O":[{"%":390,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":133},{"%":390}],"O":[{"%":391,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":391},{"%":132}],"O":[{"%":392,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":392}],"O":[{"%":393,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":131},{"%":393}],"O":[{"%":394,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":394},{"%":130}],"O":[{"%":395,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":395},{"%":123}],"O":[{"%":396,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":397,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":122},{"%":397}],"O":[{"%":398,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":396},{"%":398}],"O":[{"%":399,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":127},{"%":399}],"O":[{"%":400,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":400},{"%":126}],"O":[{"%":401,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":401}],"O":[{"%":402,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":125},{"%":402}],"O":[{"%":403,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":403},{"%":124}],"O":[{"%":404,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":240},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":404},{"%":117}],"O":[{"%":405,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":406,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":116},{"%":406}],"O":[{"%":407,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":405},{"%":407}],"O":[{"%":408,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":121},{"%":408}],"O":[{"%":409,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":409},{"%":120}],"O":[{"%":410,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":410}],"O":[{"%":411,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":119},{"%":411}],"O":[{"%":412,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":412},{"%":118}],"O":[{"%":413,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":413},{"%":111}],"O":[{"%":414,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":415,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":110},{"%":415}],"O":[{"%":416,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":414},{"%":416}],"O":[{"%":417,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":115},{"%":417}],"O":[{"%":418,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":418},{"%":114}],"O":[{"%":419,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":419}],"O":[{"%":420,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":113},{"%":420}],"O":[{"%":421,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_3/LCNetV3Block_4/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":421},{"%":112}],"O":[{"%":422,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,12,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":240},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":422},{"%":105}],"O":[{"%":423,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":424,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":104},{"%":424}],"O":[{"%":425,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":423},{"%":425}],"O":[{"%":426,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":109},{"%":426}],"O":[{"%":427,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":427},{"%":108}],"O":[{"%":428,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":428}],"O":[{"%":429,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":107},{"%":429}],"O":[{"%":430,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":430},{"%":106}],"O":[{"%":431,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":432,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":431},{"%":432}],"O":[{"%":433,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":433},{"%":103}],"O":[{"%":434,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":435,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":102},{"%":435}],"O":[{"%":436,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,60,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":434},{"%":436}],"O":[{"%":437,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/ReLU/"},"N":"struct_name"}],"I":[{"%":437}],"O":[{"%":438,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":438},{"%":101}],"O":[{"%":439,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":440,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":100},{"%":440}],"O":[{"%":441,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":439},{"%":441}],"O":[{"%":442,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.16666670143604279},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/Hardsigmoid/"},"N":"struct_name"}],"I":[{"%":442}],"O":[{"%":443,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/SELayer/"},"N":"struct_name"}],"I":[{"%":431},{"%":443}],"O":[{"%":444,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,240,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":444},{"%":95}],"O":[{"%":445,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":446,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":94},{"%":446}],"O":[{"%":447,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":445},{"%":447}],"O":[{"%":448,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":99},{"%":448}],"O":[{"%":449,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":449},{"%":98}],"O":[{"%":450,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":450}],"O":[{"%":451,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":97},{"%":451}],"O":[{"%":452,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":452},{"%":96}],"O":[{"%":453,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":480},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":453},{"%":89}],"O":[{"%":454,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":455,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":88},{"%":455}],"O":[{"%":456,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":454},{"%":456}],"O":[{"%":457,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":93},{"%":457}],"O":[{"%":458,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":458},{"%":92}],"O":[{"%":459,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":459}],"O":[{"%":460,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":91},{"%":460}],"O":[{"%":461,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":461},{"%":90}],"O":[{"%":462,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[],"O":[{"%":463,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":true},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/AdaptiveAvgPool2D/"},"N":"struct_name"}],"I":[{"%":462},{"%":463}],"O":[{"%":464,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":464},{"%":87}],"O":[{"%":465,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":466,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":86},{"%":466}],"O":[{"%":467,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,120,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":465},{"%":467}],"O":[{"%":468,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.relu","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/ReLU/"},"N":"struct_name"}],"I":[{"%":468}],"O":[{"%":469,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":469},{"%":85}],"O":[{"%":470,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[],"O":[{"%":471,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":84},{"%":471}],"O":[{"%":472,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Conv2D_1/"},"N":"struct_name"}],"I":[{"%":470},{"%":472}],"O":[{"%":473,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardsigmoid","A":[{"AT":{"#":"0.a_f32","D":0.16666670143604279},"N":"slope"},{"AT":{"#":"0.a_f32","D":0.5},"N":"offset"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/Hardsigmoid/"},"N":"struct_name"}],"I":[{"%":473}],"O":[{"%":474,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/SELayer/"},"N":"struct_name"}],"I":[{"%":462},{"%":474}],"O":[{"%":475,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":475},{"%":79}],"O":[{"%":476,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":477,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":78},{"%":477}],"O":[{"%":478,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":476},{"%":478}],"O":[{"%":479,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":83},{"%":479}],"O":[{"%":480,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":480},{"%":82}],"O":[{"%":481,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":481}],"O":[{"%":482,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":81},{"%":482}],"O":[{"%":483,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_1/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":483},{"%":80}],"O":[{"%":484,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,6,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":480},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":484},{"%":73}],"O":[{"%":485,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":486,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":72},{"%":486}],"O":[{"%":487,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":485},{"%":487}],"O":[{"%":488,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":77},{"%":488}],"O":[{"%":489,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":489},{"%":76}],"O":[{"%":490,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":490}],"O":[{"%":491,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":75},{"%":491}],"O":[{"%":492,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":492},{"%":74}],"O":[{"%":493,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":493},{"%":67}],"O":[{"%":494,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":495,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":66},{"%":495}],"O":[{"%":496,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":494},{"%":496}],"O":[{"%":497,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":71},{"%":497}],"O":[{"%":498,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":498},{"%":70}],"O":[{"%":499,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":499}],"O":[{"%":500,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":69},{"%":500}],"O":[{"%":501,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_2/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":501},{"%":68}],"O":[{"%":502,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.depthwise_conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":2}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_i32","D":480},"N":"groups"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":502},{"%":61}],"O":[{"%":503,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":504,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":60},{"%":504}],"O":[{"%":505,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":503},{"%":505}],"O":[{"%":506,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":65},{"%":506}],"O":[{"%":507,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":507},{"%":64}],"O":[{"%":508,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":508}],"O":[{"%":509,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":63},{"%":509}],"O":[{"%":510,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":510},{"%":62}],"O":[{"%":511,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":511},{"%":55}],"O":[{"%":512,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":1},{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[],"O":[{"%":513,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":54},{"%":513}],"O":[{"%":514,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1,480,1,1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":512},{"%":514}],"O":[{"%":515,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":59},{"%":515}],"O":[{"%":516,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":516},{"%":58}],"O":[{"%":517,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.hardswish","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Act/Hardswish/"},"N":"struct_name"}],"I":[{"%":517}],"O":[{"%":518,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.multiply","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":57},{"%":518}],"O":[{"%":519,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/PPLCNetV3/Sequential_4/LCNetV3Block_3/LearnableRepLayer_1/Act/LearnableAffineBlock/"},"N":"struct_name"}],"I":[{"%":519},{"%":56}],"O":[{"%":520,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,3,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":3},{"#":"0.a_i64","D":2}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/"},"N":"struct_name"}],"I":[],"O":[{"%":521,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[2],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.pool2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":3},{"#":"0.a_i32","D":2}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_bool","D":false},"N":"ceil_mode"},{"AT":{"#":"0.a_bool","D":true},"N":"exclusive"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"avg"},"N":"pooling_type"},{"AT":{"#":"0.a_bool","D":false},"N":"global_pooling"},{"AT":{"#":"0.a_bool","D":false},"N":"adaptive"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_str","D":"/PPLCNetV3/"},"N":"struct_name"}],"I":[{"%":520},{"%":521}],"O":[{"%":522,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.assign","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":522}],"O":[{"%":523,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer/Conv2D/"},"N":"struct_name"}],"I":[{"%":523},{"%":53}],"O":[{"%":524,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":524},{"%":50},{"%":49},{"%":52},{"%":51}],"O":[{"%":525,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,-1],"NCHW",[],0]}},{"%":526,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":527,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":528,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":529,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":530,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer/Swish/"},"N":"struct_name"}],"I":[{"%":525}],"O":[{"%":531,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_1/Conv2D/"},"N":"struct_name"}],"I":[{"%":531},{"%":48}],"O":[{"%":532,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_1/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":532},{"%":45},{"%":44},{"%":47},{"%":46}],"O":[{"%":533,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}},{"%":534,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":535,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":536,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":537,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":538,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_1/Swish/"},"N":"struct_name"}],"I":[{"%":533}],"O":[{"%":539,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.shape64","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":539}],"O":[{"%":540,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":3}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[],"O":[{"%":541,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":4}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[],"O":[{"%":542,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":540},{"%":541},{"%":542}],"O":[{"%":543,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.flatten","A":[{"AT":{"#":"0.a_i32","D":2},"N":"start_axis"},{"AT":{"#":"0.a_i32","D":3},"N":"stop_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":539}],"O":[{"%":544,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":544}],"O":[{"%":545,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.layer_norm","A":[{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_i32","D":2},"N":"begin_norm_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/LayerNorm/"},"N":"struct_name"}],"I":[{"%":545},{"%":43},{"%":42}],"O":[{"%":546,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":547,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}},{"%":548,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Linear/"},"N":"struct_name"}],"I":[{"%":546},{"%":41}],"O":[{"%":549,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,360],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Linear/"},"N":"struct_name"}],"I":[{"%":549},{"%":40}],"O":[{"%":550,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,360],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":3},{"#":"0.a_i64","D":8},{"#":"0.a_i64","D":15}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":551,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[5],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":550},{"%":551}],"O":[{"%":552,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,3,8,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":3},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":4}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":552}],"O":[{"%":553,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[3,-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":554,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":555,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":553},{"%":554},{"%":555}],"O":[{"%":556,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.25819888710975647},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":557,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.scale","A":[{"AT":{"#":"0.a_f32","D":0.0},"N":"bias"},{"AT":{"#":"0.a_bool","D":true},"N":"bias_after_scale"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":556},{"%":557}],"O":[{"%":558,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":559,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":2}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":560,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":553},{"%":559},{"%":560}],"O":[{"%":561,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":2}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":562,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":3}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":563,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":553},{"%":562},{"%":563}],"O":[{"%":564,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":3},{"#":"0.a_i32","D":2}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":561}],"O":[{"%":565,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,15,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":558},{"%":565}],"O":[{"%":566,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.softmax","A":[{"AT":{"#":"0.a_i32","D":-1},"N":"axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":566}],"O":[{"%":567,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Dropout/"},"N":"struct_name"}],"I":[],"O":[{"%":568,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Dropout/"},"N":"struct_name"}],"I":[{"%":567},{"%":0},{"%":568}],"O":[{"%":569,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,-1],"NCHW",[],0]}},{"%":570,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,8,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":569},{"%":564}],"O":[{"%":571,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":3}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":571}],"O":[{"%":572,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,8,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":120}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":573,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[3],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/"},"N":"struct_name"}],"I":[{"%":572},{"%":573}],"O":[{"%":574,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Linear_1/"},"N":"struct_name"}],"I":[{"%":574},{"%":39}],"O":[{"%":575,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Linear_1/"},"N":"struct_name"}],"I":[{"%":575},{"%":38}],"O":[{"%":576,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Dropout_1/"},"N":"struct_name"}],"I":[],"O":[{"%":577,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Attention/Dropout_1/"},"N":"struct_name"}],"I":[{"%":576},{"%":0},{"%":577}],"O":[{"%":578,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":579,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/"},"N":"struct_name"}],"I":[{"%":545},{"%":578}],"O":[{"%":580,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.layer_norm","A":[{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_i32","D":2},"N":"begin_norm_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/LayerNorm_1/"},"N":"struct_name"}],"I":[{"%":580},{"%":37},{"%":36}],"O":[{"%":581,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":582,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}},{"%":583,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Linear/"},"N":"struct_name"}],"I":[{"%":581},{"%":35}],"O":[{"%":584,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Linear/"},"N":"struct_name"}],"I":[{"%":584},{"%":34}],"O":[{"%":585,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Swish/"},"N":"struct_name"}],"I":[{"%":585}],"O":[{"%":586,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Dropout/"},"N":"struct_name"}],"I":[],"O":[{"%":587,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Dropout/"},"N":"struct_name"}],"I":[{"%":586},{"%":0},{"%":587}],"O":[{"%":588,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}},{"%":589,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Linear_1/"},"N":"struct_name"}],"I":[{"%":588},{"%":33}],"O":[{"%":590,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Linear_1/"},"N":"struct_name"}],"I":[{"%":590},{"%":32}],"O":[{"%":591,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Dropout_1/"},"N":"struct_name"}],"I":[],"O":[{"%":592,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/Mlp/Dropout_1/"},"N":"struct_name"}],"I":[{"%":591},{"%":0},{"%":592}],"O":[{"%":593,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":594,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block/"},"N":"struct_name"}],"I":[{"%":580},{"%":593}],"O":[{"%":595,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.layer_norm","A":[{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_i32","D":2},"N":"begin_norm_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/LayerNorm/"},"N":"struct_name"}],"I":[{"%":595},{"%":31},{"%":30}],"O":[{"%":596,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":597,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}},{"%":598,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Linear/"},"N":"struct_name"}],"I":[{"%":596},{"%":29}],"O":[{"%":599,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,360],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Linear/"},"N":"struct_name"}],"I":[{"%":599},{"%":28}],"O":[{"%":600,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,360],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":3},{"#":"0.a_i64","D":8},{"#":"0.a_i64","D":15}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":601,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[5],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":600},{"%":601}],"O":[{"%":602,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,3,8,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":3},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":4}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":602}],"O":[{"%":603,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[3,-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":604,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":605,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":603},{"%":604},{"%":605}],"O":[{"%":606,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.25819888710975647},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":607,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.scale","A":[{"AT":{"#":"0.a_f32","D":0.0},"N":"bias"},{"AT":{"#":"0.a_bool","D":true},"N":"bias_after_scale"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":606},{"%":607}],"O":[{"%":608,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":609,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":2}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":610,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":603},{"%":609},{"%":610}],"O":[{"%":611,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":2}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":612,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":3}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":613,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.slice","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"axes"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":1}]},"N":"infer_flags"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0}]},"N":"decrease_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":603},{"%":612},{"%":613}],"O":[{"%":614,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":3},{"#":"0.a_i32","D":2}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":611}],"O":[{"%":615,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,15,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":608},{"%":615}],"O":[{"%":616,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.softmax","A":[{"AT":{"#":"0.a_i32","D":-1},"N":"axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":616}],"O":[{"%":617,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Dropout/"},"N":"struct_name"}],"I":[],"O":[{"%":618,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Dropout/"},"N":"struct_name"}],"I":[{"%":617},{"%":0},{"%":618}],"O":[{"%":619,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,-1],"NCHW",[],0]}},{"%":620,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,8,-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":619},{"%":614}],"O":[{"%":621,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,8,-1,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":3}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":621}],"O":[{"%":622,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,8,15],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":0},{"#":"0.a_i64","D":-1},{"#":"0.a_i64","D":120}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[],"O":[{"%":623,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[3],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/"},"N":"struct_name"}],"I":[{"%":622},{"%":623}],"O":[{"%":624,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Linear_1/"},"N":"struct_name"}],"I":[{"%":624},{"%":27}],"O":[{"%":625,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Linear_1/"},"N":"struct_name"}],"I":[{"%":625},{"%":26}],"O":[{"%":626,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Dropout_1/"},"N":"struct_name"}],"I":[],"O":[{"%":627,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Attention/Dropout_1/"},"N":"struct_name"}],"I":[{"%":626},{"%":0},{"%":627}],"O":[{"%":628,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":629,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/"},"N":"struct_name"}],"I":[{"%":595},{"%":628}],"O":[{"%":630,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.layer_norm","A":[{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_i32","D":2},"N":"begin_norm_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/LayerNorm_1/"},"N":"struct_name"}],"I":[{"%":630},{"%":25},{"%":24}],"O":[{"%":631,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":632,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}},{"%":633,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Linear/"},"N":"struct_name"}],"I":[{"%":631},{"%":23}],"O":[{"%":634,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Linear/"},"N":"struct_name"}],"I":[{"%":634},{"%":22}],"O":[{"%":635,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Swish/"},"N":"struct_name"}],"I":[{"%":635}],"O":[{"%":636,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Dropout/"},"N":"struct_name"}],"I":[],"O":[{"%":637,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Dropout/"},"N":"struct_name"}],"I":[{"%":636},{"%":0},{"%":637}],"O":[{"%":638,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,240],"NCHW",[],0]}},{"%":639,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,-1,240],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Linear_1/"},"N":"struct_name"}],"I":[{"%":638},{"%":21}],"O":[{"%":640,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Linear_1/"},"N":"struct_name"}],"I":[{"%":640},{"%":20}],"O":[{"%":641,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.10000000149011612},"N":"value"},{"AT":{"#":"1.a_dtype","D":"float32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Dropout_1/"},"N":"struct_name"}],"I":[],"O":[{"%":642,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.dropout","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_str","D":"upscale_in_train"},"N":"mode"},{"AT":{"#":"0.a_i32","D":0},"N":"seed"},{"AT":{"#":"0.a_bool","D":false},"N":"fix_seed"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/Mlp/Dropout_1/"},"N":"struct_name"}],"I":[{"%":641},{"%":0},{"%":642}],"O":[{"%":643,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":644,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/Block_1/"},"N":"struct_name"}],"I":[{"%":630},{"%":643}],"O":[{"%":645,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.layer_norm","A":[{"AT":{"#":"0.a_f32","D":9.999999974752427e-07},"N":"epsilon"},{"AT":{"#":"0.a_i32","D":2},"N":"begin_norm_axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/LayerNorm/"},"N":"struct_name"}],"I":[{"%":645},{"%":19},{"%":18}],"O":[{"%":646,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}},{"%":647,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}},{"%":648,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[]},"N":"shape"},{"AT":{"#":"0.a_f64","D":0.0},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[],"O":[{"%":649,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[]},"N":"shape"},{"AT":{"#":"0.a_f64","D":1.0},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[],"O":[{"%":650,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[]},"N":"shape"},{"AT":{"#":"0.a_f64","D":120.0},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[],"O":[{"%":651,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"0.combine","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":649},{"%":650},{"%":543},{"%":651}],"O":[{"%":652,"TT":{"#":"0.t_vec","D":[{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[],"NCHW",[],0]}]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.stack","A":[{"AT":{"#":"0.a_i32","D":0},"N":"axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":652}],"O":[{"%":653,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[4],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.reshape","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":646},{"%":653}],"O":[{"%":654,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":3},{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":2}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":654}],"O":[{"%":655,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_2/Conv2D/"},"N":"struct_name"}],"I":[{"%":655},{"%":17}],"O":[{"%":656,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_2/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":656},{"%":14},{"%":13},{"%":16},{"%":15}],"O":[{"%":657,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]}},{"%":658,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},{"%":659,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},{"%":660,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},{"%":661,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[480],"NCHW",[],0]}},{"%":662,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_2/Swish/"},"N":"struct_name"}],"I":[{"%":657}],"O":[{"%":663,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full","A":[{"AT":{"#":"1.a_intarray","D":[1]},"N":"shape"},{"AT":{"#":"0.a_f64","D":1.0},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int32"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[],"O":[{"%":664,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i32"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"0.combine","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":523},{"%":663}],"O":[{"%":665,"TT":{"#":"0.t_vec","D":[{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]},{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,480,1,-1],"NCHW",[],0]}]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.concat","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/"},"N":"struct_name"}],"I":[{"%":665},{"%":664}],"O":[{"%":666,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,960,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":1}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_3/Conv2D/"},"N":"struct_name"}],"I":[{"%":666},{"%":12}],"O":[{"%":667,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_3/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":667},{"%":9},{"%":8},{"%":11},{"%":10}],"O":[{"%":668,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,-1],"NCHW",[],0]}},{"%":669,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":670,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":671,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":672,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[60],"NCHW",[],0]}},{"%":673,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_3/Swish/"},"N":"struct_name"}],"I":[{"%":668}],"O":[{"%":674,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,60,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.conv2d","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"strides"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":0}]},"N":"paddings"},{"AT":{"#":"0.a_str","D":"EXPLICIT"},"N":"padding_algorithm"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":1},{"#":"0.a_i32","D":1}]},"N":"dilations"},{"AT":{"#":"0.a_i32","D":1},"N":"groups"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_4/Conv2D/"},"N":"struct_name"}],"I":[{"%":674},{"%":7}],"O":[{"%":675,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.batch_norm_","A":[{"AT":{"#":"0.a_bool","D":true},"N":"is_test"},{"AT":{"#":"0.a_f32","D":0.8999999761581421},"N":"momentum"},{"AT":{"#":"0.a_f32","D":9.999999747378752e-06},"N":"epsilon"},{"AT":{"#":"0.a_str","D":"NCHW"},"N":"data_format"},{"AT":{"#":"0.a_bool","D":true},"N":"use_global_stats"},{"AT":{"#":"0.a_bool","D":false},"N":"trainable_statistics"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_4/BatchNorm2D/"},"N":"struct_name"}],"I":[{"%":675},{"%":4},{"%":3},{"%":6},{"%":5}],"O":[{"%":676,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}},{"%":677,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":678,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":679,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":680,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[120],"NCHW",[],0]}},{"%":681,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_ui8"},[-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false},{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.swish","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/EncoderWithSVTR/ConvBNLayer_4/Swish/"},"N":"struct_name"}],"I":[{"%":676}],"O":[{"%":682,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,1,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.full_int_array","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i64","D":2}]},"N":"value"},{"AT":{"#":"1.a_dtype","D":"int64"},"N":"dtype"},{"AT":{"#":"1.a_place","D":[1,0,""]},"N":"place"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/Im2Seq/"},"N":"struct_name"}],"I":[],"O":[{"%":683,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_i64"},[1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"stop_gradient"}]},{"#":"1.squeeze","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/Im2Seq/"},"N":"struct_name"}],"I":[{"%":682},{"%":683}],"O":[{"%":684,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,120,-1],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.transpose","A":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_i32","D":0},{"#":"0.a_i32","D":2},{"#":"0.a_i32","D":1}]},"N":"perm"},{"AT":{"#":"0.a_str","D":"/MultiHead/SequenceEncoder/Im2Seq/"},"N":"struct_name"}],"I":[{"%":684}],"O":[{"%":685,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,120],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.matmul","A":[{"AT":{"#":"0.a_bool","D":false},"N":"transpose_x"},{"AT":{"#":"0.a_bool","D":false},"N":"transpose_y"},{"AT":{"#":"0.a_str","D":"/MultiHead/CTCHead/Linear/"},"N":"struct_name"}],"I":[{"%":685},{"%":2}],"O":[{"%":686,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,838],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.add","A":[{"AT":{"#":"0.a_str","D":"/MultiHead/CTCHead/Linear/"},"N":"struct_name"}],"I":[{"%":686},{"%":1}],"O":[{"%":687,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,838],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.softmax","A":[{"AT":{"#":"0.a_i32","D":2},"N":"axis"},{"AT":{"#":"0.a_str","D":"/MultiHead/CTCHead/"},"N":"struct_name"}],"I":[{"%":687}],"O":[{"%":688,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,838],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]},{"#":"1.fetch","A":[{"AT":{"#":"0.a_str","D":"fetch_name_0"},"N":"name"},{"AT":{"#":"0.a_i32","D":0},"N":"col"}],"I":[{"%":688}],"O":[{"%":689,"TT":{"#":"0.t_dtensor","D":[{"#":"0.t_f32"},[-1,-1,838],"NCHW",[],0]}}],"OA":[{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":true}]},"N":"persistable"},{"AT":{"#":"0.a_array","D":[{"#":"0.a_bool","D":false}]},"N":"stop_gradient"}]}]}]}]}}
\ No newline at end of file
diff --git a/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.pdiparams b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.pdiparams
new file mode 100644
index 0000000..e216da1
Binary files /dev/null and b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.pdiparams differ
diff --git a/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.yml b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.yml
new file mode 100644
index 0000000..89550cd
--- /dev/null
+++ b/tools/ocr/models/paddlex/official_models/latin_PP-OCRv5_mobile_rec/inference.yml
@@ -0,0 +1,881 @@
+Global:
+  model_name: latin_PP-OCRv5_mobile_rec
+Hpi:
+  backend_configs:
+    paddle_infer:
+      trt_dynamic_shapes: &id001
+        x:
+        - - 1
+          - 3
+          - 48
+          - 160
+        - - 1
+          - 3
+          - 48
+          - 320
+        - - 8
+          - 3
+          - 48
+          - 3200
+    tensorrt:
+      dynamic_shapes: *id001
+PreProcess:
+  transform_ops:
+  - DecodeImage:
+      channel_first: false
+      img_mode: BGR
+  - MultiLabelEncode:
+      gtc_encode: NRTRLabelEncode
+      max_text_length: 1000
+  - RecResizeImg:
+      eval_mode: true
+      image_shape:
+      - 3
+      - 48
+      - 320
+  - KeepKeys:
+      keep_keys:
+      - image
+      - label_ctc
+      - label_gtc
+      - length
+      - valid_ratio
+PostProcess:
+  name: CTCLabelDecode
+  character_dict:
+  - '0'
+  - '1'
+  - '2'
+  - '3'
+  - '4'
+  - '5'
+  - '6'
+  - '7'
+  - '8'
+  - '9'
+  - A
+  - B
+  - C
+  - D
+  - E
+  - F
+  - G
+  - H
+  - I
+  - J
+  - K
+  - L
+  - M
+  - N
+  - O
+  - P
+  - Q
+  - R
+  - S
+  - T
+  - U
+  - V
+  - W
+  - X
+  - Y
+  - Z
+  - a
+  - b
+  - c
+  - d
+  - e
+  - f
+  - g
+  - h
+  - i
+  - j
+  - k
+  - l
+  - m
+  - n
+  - o
+  - p
+  - q
+  - r
+  - s
+  - t
+  - u
+  - v
+  - w
+  - x
+  - y
+  - z
+  - À
+  - Á
+  - Â
+  - Ã
+  - Ä
+  - Å
+  - Æ
+  - Ç
+  - È
+  - É
+  - Ê
+  - Ë
+  - Ì
+  - Í
+  - Î
+  - Ï
+  - Ð
+  - Ñ
+  - Ò
+  - Ó
+  - Ô
+  - Õ
+  - Ö
+  - ×
+  - Ø
+  - Ù
+  - Ú
+  - Û
+  - Ü
+  - Ý
+  - Þ
+  - ß
+  - à
+  - á
+  - â
+  - ã
+  - ä
+  - å
+  - æ
+  - ç
+  - è
+  - é
+  - ê
+  - ë
+  - ì
+  - í
+  - î
+  - ï
+  - ð
+  - ñ
+  - ò
+  - ó
+  - ô
+  - õ
+  - ö
+  - ÷
+  - ø
+  - ù
+  - ú
+  - û
+  - ü
+  - ý
+  - þ
+  - ÿ
+  - Ā
+  - ā
+  - Ă
+  - ă
+  - Ą
+  - ą
+  - Ć
+  - ć
+  - Ĉ
+  - ĉ
+  - Ċ
+  - ċ
+  - Č
+  - č
+  - Ď
+  - ď
+  - Đ
+  - đ
+  - Ē
+  - ē
+  - Ĕ
+  - ĕ
+  - Ė
+  - ė
+  - Ę
+  - ę
+  - Ě
+  - ě
+  - Ĝ
+  - ĝ
+  - Ğ
+  - ğ
+  - Ġ
+  - ġ
+  - Ģ
+  - ģ
+  - Ĥ
+  - ĥ
+  - Ħ
+  - ħ
+  - Ĩ
+  - ĩ
+  - Ī
+  - ī
+  - Ĭ
+  - ĭ
+  - Į
+  - į
+  - İ
+  - ı
+  - Ĳ
+  - ĳ
+  - Ĵ
+  - ĵ
+  - Ķ
+  - ķ
+  - ĸ
+  - Ĺ
+  - ĺ
+  - Ļ
+  - ļ
+  - Ľ
+  - ľ
+  - Ŀ
+  - ŀ
+  - Ł
+  - ł
+  - Ń
+  - ń
+  - Ņ
+  - ņ
+  - Ň
+  - ň
+  - ŉ
+  - Ŋ
+  - ŋ
+  - Ō
+  - ō
+  - Ŏ
+  - ŏ
+  - Ő
+  - ő
+  - Œ
+  - œ
+  - Ŕ
+  - ŕ
+  - Ŗ
+  - ŗ
+  - Ř
+  - ř
+  - Ś
+  - ś
+  - Ŝ
+  - ŝ
+  - Ş
+  - ş
+  - Š
+  - š
+  - Ţ
+  - ţ
+  - Ť
+  - ť
+  - Ŧ
+  - ŧ
+  - Ũ
+  - ũ
+  - Ū
+  - ū
+  - Ŭ
+  - ŭ
+  - Ů
+  - ů
+  - Ű
+  - ű
+  - Ų
+  - ų
+  - Ŵ
+  - ŵ
+  - Ŷ
+  - ŷ
+  - Ÿ
+  - Ź
+  - ź
+  - Ż
+  - ż
+  - Ž
+  - ž
+  - ſ
+  - ƀ
+  - Ɓ
+  - Ƃ
+  - ƃ
+  - Ƅ
+  - ƅ
+  - Ɔ
+  - Ƈ
+  - ƈ
+  - Ɖ
+  - Ɗ
+  - Ƌ
+  - ƌ
+  - ƍ
+  - Ǝ
+  - Ə
+  - Ɛ
+  - Ƒ
+  - ƒ
+  - Ɠ
+  - Ɣ
+  - ƕ
+  - Ɩ
+  - Ɨ
+  - Ƙ
+  - ƙ
+  - ƚ
+  - ƛ
+  - Ɯ
+  - Ɲ
+  - ƞ
+  - Ɵ
+  - Ơ
+  - ơ
+  - Ƣ
+  - ƣ
+  - Ƥ
+  - ƥ
+  - Ʀ
+  - Ƨ
+  - ƨ
+  - Ʃ
+  - ƪ
+  - ƫ
+  - Ƭ
+  - ƭ
+  - Ʈ
+  - Ư
+  - ư
+  - Ʊ
+  - Ʋ
+  - Ƴ
+  - ƴ
+  - Ƶ
+  - ƶ
+  - Ʒ
+  - Ƹ
+  - ƹ
+  - ƺ
+  - ƻ
+  - Ƽ
+  - ƽ
+  - ƾ
+  - ƿ
+  - ǀ
+  - ǁ
+  - ǂ
+  - ǃ
+  - Ǆ
+  - ǅ
+  - ǆ
+  - Ǉ
+  - ǈ
+  - ǉ
+  - Ǌ
+  - ǋ
+  - ǌ
+  - Ǎ
+  - ǎ
+  - Ǐ
+  - ǐ
+  - Ǒ
+  - ǒ
+  - Ǔ
+  - ǔ
+  - Ǖ
+  - ǖ
+  - Ǘ
+  - ǘ
+  - Ǚ
+  - ǚ
+  - Ǜ
+  - ǜ
+  - ǝ
+  - Ǟ
+  - ǟ
+  - Ǡ
+  - ǡ
+  - Ǣ
+  - ǣ
+  - Ǥ
+  - ǥ
+  - Ǧ
+  - ǧ
+  - Ǩ
+  - ǩ
+  - Ǫ
+  - ǫ
+  - Ǭ
+  - ǭ
+  - Ǯ
+  - ǯ
+  - ǰ
+  - Ǳ
+  - ǲ
+  - ǳ
+  - Ǵ
+  - ǵ
+  - Ƕ
+  - Ƿ
+  - Ǹ
+  - ǹ
+  - Ǻ
+  - ǻ
+  - Ǽ
+  - ǽ
+  - Ǿ
+  - ǿ
+  - Ȁ
+  - ȁ
+  - Ȃ
+  - ȃ
+  - Ȅ
+  - ȅ
+  - Ȇ
+  - ȇ
+  - Ȉ
+  - ȉ
+  - Ȋ
+  - ȋ
+  - Ȍ
+  - ȍ
+  - Ȏ
+  - ȏ
+  - Ȑ
+  - ȑ
+  - Ȓ
+  - ȓ
+  - Ȕ
+  - ȕ
+  - Ȗ
+  - ȗ
+  - Ș
+  - ș
+  - Ț
+  - ț
+  - Ȝ
+  - ȝ
+  - Ȟ
+  - ȟ
+  - Ƞ
+  - ȡ
+  - Ȣ
+  - ȣ
+  - Ȥ
+  - ȥ
+  - Ȧ
+  - ȧ
+  - Ȩ
+  - ȩ
+  - Ȫ
+  - ȫ
+  - Ȭ
+  - ȭ
+  - Ȯ
+  - ȯ
+  - Ȱ
+  - ȱ
+  - Ȳ
+  - ȳ
+  - ȴ
+  - ȵ
+  - ȶ
+  - ȷ
+  - ȸ
+  - ȹ
+  - Ⱥ
+  - Ȼ
+  - ȼ
+  - Ƚ
+  - Ⱦ
+  - ȿ
+  - ɀ
+  - Ɂ
+  - ɂ
+  - Ƀ
+  - Ʉ
+  - Ʌ
+  - Ɇ
+  - ɇ
+  - Ɉ
+  - ɉ
+  - Ɋ
+  - ɋ
+  - Ɍ
+  - ɍ
+  - Ɏ
+  - ɏ
+  - '!'
+  - '"'
+  - '#'
+  - $
+  - '%'
+  - '&'
+  - ''''
+  - (
+  - )
+  - '*'
+  - +
+  - ','
+  - '-'
+  - .
+  - /
+  - ':'
+  - ;
+  - <
+  - '='
+  - '>'
+  - '?'
+  - '@'
+  - '['
+  - \
+  - ']'
+  - _
+  - '`'
+  - '{'
+  - '|'
+  - '}'
+  - ^
+  - '~'
+  - ©
+  - ®
+  - ℉
+  - №
+  - Ω
+  - ℮
+  - ™
+  - ∆
+  - ✓
+  - ✔
+  - ✗
+  - ✘
+  - ✕
+  - ☑
+  - ☒
+  - ●
+  - ▪
+  - ▫
+  - ◼
+  - ▶
+  - ◀
+  - ⬆
+  - ¤
+  - ¦
+  - §
+  - ¨
+  - ª
+  - «
+  - ¬
+  - ¯
+  - °
+  - ²
+  - ³
+  - ´
+  - µ
+  - ¶
+  - ¸
+  - ¹
+  - º
+  - »
+  - ¼
+  - ½
+  - ¾
+  - ¿
+  - ×
+  - ‐
+  - ‑
+  - ‒
+  - —
+  - ―
+  - ‖
+  - ‗
+  - ‘
+  - ’
+  - ‚
+  - ‛
+  - “
+  - ”
+  - „
+  - ‟
+  - †
+  - ‡
+  - ‣
+  - ․
+  - …
+  - ‧
+  - ‰
+  - ‴
+  - ‵
+  - ‶
+  - ‷
+  - ‸
+  - ‹
+  - ›
+  - ※
+  - ‼
+  - ‽
+  - ‾
+  - −
+  - ₤
+  - ₡
+  - ₹
+  - ₽
+  - ₴
+  - ₿
+  - ¢
+  - €
+  - £
+  - ¥
+  - Ⅰ
+  - Ⅱ
+  - Ⅲ
+  - Ⅳ
+  - Ⅴ
+  - Ⅵ
+  - Ⅶ
+  - Ⅷ
+  - Ⅸ
+  - Ⅹ
+  - Ⅺ
+  - Ⅻ
+  - ⅰ
+  - ⅱ
+  - ⅲ
+  - ⅳ
+  - ⅴ
+  - ⅵ
+  - ⅶ
+  - ⅷ
+  - ⅸ
+  - ⅹ
+  - ⅺ
+  - ⅻ
+  - ➀
+  - ➁
+  - ➂
+  - ➃
+  - ➄
+  - ➅
+  - ➆
+  - ➇
+  - ➈
+  - ➉
+  - ➊
+  - ➋
+  - ➌
+  - ➍
+  - ➎
+  - ➏
+  - ➐
+  - ➑
+  - ➒
+  - ➓
+  - ❶
+  - ❷
+  - ❸
+  - ❹
+  - ❺
+  - ❻
+  - ❼
+  - ❽
+  - ❾
+  - ❿
+  - ①
+  - ②
+  - ③
+  - ④
+  - ⑤
+  - ⑥
+  - ⑦
+  - ⑧
+  - ⑨
+  - ⑩
+  - ↑
+  - →
+  - ↓
+  - ↕
+  - ←
+  - ↔
+  - ⇒
+  - ⇐
+  - ⇔
+  - ∀
+  - ∃
+  - ∄
+  - ∴
+  - ∵
+  - ∝
+  - ∞
+  - ∩
+  - ∪
+  - ∂
+  - ∫
+  - ∬
+  - ∭
+  - ∮
+  - ∯
+  - ∰
+  - ∑
+  - ∏
+  - √
+  - ∛
+  - ∜
+  - ∱
+  - ∲
+  - ∳
+  - ∶
+  - ∷
+  - ∼
+  - ∖
+  - ∗
+  - ≈
+  - ≠
+  - ≡
+  - ≤
+  - ≥
+  - ⊂
+  - ⊃
+  - ⊥
+  - ⊾
+  - ⊿
+  - □
+  - ∥
+  - ∋
+  - ƒ
+  - ′
+  - ″
+  - À
+  - Á
+  - Â
+  - Ã
+  - Ä
+  - Å
+  - Æ
+  - Ç
+  - È
+  - É
+  - Ê
+  - Ë
+  - Ì
+  - Í
+  - Î
+  - Ï
+  - Ð
+  - Ñ
+  - Ò
+  - Ó
+  - Ô
+  - Õ
+  - Ö
+  - Ø
+  - Ù
+  - Ú
+  - Û
+  - Ü
+  - Ý
+  - Þ
+  - à
+  - á
+  - â
+  - ã
+  - ä
+  - å
+  - æ
+  - ç
+  - è
+  - é
+  - ê
+  - ë
+  - ì
+  - í
+  - î
+  - ï
+  - ð
+  - ñ
+  - ò
+  - ó
+  - ô
+  - õ
+  - ö
+  - ø
+  - ù
+  - ú
+  - û
+  - ü
+  - ý
+  - þ
+  - ÿ
+  - Α
+  - Β
+  - Γ
+  - Δ
+  - Ε
+  - Ζ
+  - Η
+  - Θ
+  - Ι
+  - Κ
+  - Λ
+  - Μ
+  - Ν
+  - Ξ
+  - Ο
+  - Π
+  - Ρ
+  - Σ
+  - Τ
+  - Υ
+  - Φ
+  - Χ
+  - Ψ
+  - Ω
+  - α
+  - β
+  - γ
+  - δ
+  - ε
+  - ζ
+  - η
+  - θ
+  - ι
+  - κ
+  - λ
+  - μ
+  - ν
+  - ξ
+  - ο
+  - π
+  - ρ
+  - σ
+  - ς
+  - τ
+  - υ
+  - φ
+  - χ
+  - ψ
+  - ω
+  - Å
+  - ℏ
+  - ⌀
+  - ⍺
+  - ⍵
+  - 𝑢
+  - 𝜓
+  - ०
+  - ‥
+  - ︽
+  - ﹥
+  - •
+  - ÷
+  - ∕
+  - ∙
+  - ⋅
+  - ·
+  - ±
+  - ∓
+  - ∟
+  - ∠
+  - ∡
+  - ∢
+  - ℧
+  - ☺
diff --git a/tools/ocr/openscreen_ocr_service_entry.py b/tools/ocr/openscreen_ocr_service_entry.py
new file mode 100644
index 0000000..c0f18ec
--- /dev/null
+++ b/tools/ocr/openscreen_ocr_service_entry.py
@@ -0,0 +1,17 @@
+from __future__ import annotations
+
+import os
+
+import uvicorn
+
+from paddle_ocr_service import app
+
+
+def main() -> None:
+    host = os.getenv("OPENSCREEN_OCR_HOST", "127.0.0.1")
+    port = int(os.getenv("OPENSCREEN_OCR_PORT", "8866"))
+    uvicorn.run(app, host=host, port=port, log_level=os.getenv("OPENSCREEN_OCR_LOG_LEVEL", "warning"))
+
+
+if __name__ == "__main__":
+    main()
diff --git a/tools/ocr/paddle_ocr_service.py b/tools/ocr/paddle_ocr_service.py
new file mode 100644
index 0000000..6fbc264
--- /dev/null
+++ b/tools/ocr/paddle_ocr_service.py
@@ -0,0 +1,634 @@
+from __future__ import annotations
+
+import base64
+import importlib.util
+import os
+import sys
+import tempfile
+from dataclasses import dataclass
+from pathlib import Path
+from threading import Lock, Thread
+from typing import Any
+
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel
+from starlette.concurrency import run_in_threadpool
+
+app = FastAPI(title="OpenScreen PaddleOCR service")
+
+_engines: dict[str, Any] = {}
+_engine_lock = Lock()
+_warmup_lock = Lock()
+_warmup_started = False
+_LATIN_RECOGNITION_LANGS = {
+    "af",
+    "az",
+    "bs",
+    "ca",
+    "cs",
+    "cy",
+    "da",
+    "de",
+    "en",
+    "es",
+    "et",
+    "eu",
+    "fi",
+    "fr",
+    "ga",
+    "gl",
+    "hr",
+    "hu",
+    "id",
+    "is",
+    "it",
+    "ku",
+    "la",
+    "latin",
+    "lb",
+    "lt",
+    "lv",
+    "mi",
+    "ms",
+    "mt",
+    "nl",
+    "no",
+    "oc",
+    "pi",
+    "pl",
+    "pt",
+    "qu",
+    "rm",
+    "ro",
+    "rs_latin",
+    "rslatin",
+    "sk",
+    "sl",
+    "sq",
+    "sv",
+    "sw",
+    "tl",
+    "tr",
+    "uz",
+    "vi",
+}
+
+
+@dataclass(frozen=True)
+class PreparedImage:
+    path: str
+    scale: float = 1.0
+    should_delete: bool = False
+
+
+class OcrRequest(BaseModel):
+    imageBase64: str | None = None
+    path: str | None = None
+    imagePath: str | None = None
+    language: str | None = None
+    profile: str | None = None
+
+
+@app.on_event("startup")
+def start_ocr_warmup() -> None:
+    if os.getenv("OPENSCREEN_OCR_WARMUP", "0") != "1":
+        return
+
+    global _warmup_started
+    with _warmup_lock:
+        if _warmup_started:
+            return
+        _warmup_started = True
+
+    Thread(target=_warmup_default_engines, name="openscreen-ocr-warmup", daemon=True).start()
+
+
+@app.get("/health")
+def health() -> dict[str, Any]:
+    return {
+        "ok": True,
+        "paddleocrInstalled": importlib.util.find_spec("paddleocr") is not None,
+        "paddleInstalled": importlib.util.find_spec("paddle") is not None,
+        "engineReady": bool(_engines),
+        "defaultLanguage": os.getenv("PADDLEOCR_LANG") or "vi,en",
+        "defaultProfile": os.getenv("OPENSCREEN_OCR_PROFILE") or "vietnamese",
+        "loadedEngines": sorted(_engines.keys()),
+    }
+
+
+def _warmup_default_engines() -> None:
+    try:
+        profile = _resolve_ocr_profile(None)
+        for paddle_lang in _resolve_paddle_languages(None, profile):
+            _get_engine(paddle_lang)
+    except Exception as error:
+        print(f"OpenScreen OCR warmup failed: {error}", file=sys.stderr, flush=True)
+
+
+@app.post("/ocr")
+async def ocr(request: OcrRequest) -> dict[str, Any]:
+    image_path, should_delete = _resolve_image_path(request)
+    try:
+        blocks = await run_in_threadpool(
+            _recognize_profile_blocks,
+            image_path,
+            request.language,
+            request.profile,
+        )
+        return {"blocks": blocks}
+    finally:
+        if should_delete:
+            Path(image_path).unlink(missing_ok=True)
+
+
+def _resolve_image_path(request: OcrRequest) -> tuple[str, bool]:
+    path_value = request.path or request.imagePath
+    if path_value:
+        path = Path(path_value)
+        if not path.exists():
+            raise HTTPException(status_code=400, detail=f"Image path does not exist: {path}")
+        return str(path), False
+
+    if not request.imageBase64:
+        raise HTTPException(status_code=400, detail="Request must include imageBase64 or path.")
+
+    try:
+        image_bytes = base64.b64decode(request.imageBase64, validate=True)
+    except Exception as error:
+        raise HTTPException(status_code=400, detail="imageBase64 is invalid.") from error
+
+    handle = tempfile.NamedTemporaryFile(prefix="openscreen-ocr-", suffix=".png", delete=False)
+    try:
+        handle.write(image_bytes)
+    finally:
+        handle.close()
+    return handle.name, True
+
+
+def _get_engine(paddle_lang: str) -> Any:
+    cache_key = f"{paddle_lang}|{os.getenv('PADDLEOCR_DEVICE', 'cpu')}"
+    with _engine_lock:
+        if cache_key not in _engines:
+            _engines[cache_key] = _create_engine(paddle_lang)
+        return _engines[cache_key]
+
+
+def _create_engine(paddle_lang: str) -> Any:
+    try:
+        _patch_paddlex_frozen_ocr_extra_gate()
+        from paddleocr import PaddleOCR
+    except ImportError as error:
+        raise HTTPException(
+            status_code=503,
+            detail=(
+                "PaddleOCR is not installed. Run: "
+                "python -m pip install -r tools/ocr/requirements.txt"
+            ),
+        ) from error
+
+    device = os.getenv("PADDLEOCR_DEVICE", "cpu")
+    ocr_version = os.getenv("PADDLEOCR_VERSION", "PP-OCRv5")
+
+    modern_kwargs: dict[str, Any] = {
+        "lang": paddle_lang,
+        "ocr_version": ocr_version,
+        "device": device,
+        "enable_mkldnn": os.getenv("PADDLEOCR_ENABLE_MKLDNN", "0") == "1",
+        "use_doc_orientation_classify": False,
+        "use_doc_unwarping": False,
+        "use_textline_orientation": os.getenv("PADDLEOCR_USE_TEXTLINE_ORIENTATION", "0") == "1",
+    }
+    if os.getenv("PADDLEOCR_USE_MOBILE", "1") != "0":
+        modern_kwargs.update(
+            {
+                "text_detection_model_name": os.getenv(
+                    "PADDLEOCR_DET_MODEL",
+                    "PP-OCRv5_mobile_det",
+                ),
+                "text_recognition_model_name": os.getenv("PADDLEOCR_REC_MODEL")
+                or _mobile_recognition_model(paddle_lang),
+            }
+        )
+
+    try:
+        return PaddleOCR(**modern_kwargs)
+    except TypeError:
+        legacy_lang = "en" if paddle_lang == "latin" else paddle_lang
+        return PaddleOCR(lang=legacy_lang, use_angle_cls=False, show_log=False)
+
+
+def _patch_paddlex_frozen_ocr_extra_gate() -> None:
+    if not getattr(sys, "frozen", False):
+        return
+    try:
+        import paddlex.utils.deps as deps
+    except Exception:
+        return
+    if getattr(deps, "_openscreen_ocr_extra_patch", False):
+        return
+
+    original_is_extra_available = deps.is_extra_available
+    original_require_extra = deps.require_extra
+
+    def is_extra_available(extra: str) -> bool:
+        if extra in {"ocr", "ocr-core"}:
+            return True
+        return original_is_extra_available(extra)
+
+    def require_extra(extra: str, *, obj_name: str | None = None, alt: str | None = None) -> None:
+        if extra in {"ocr", "ocr-core"} or alt in {"ocr", "ocr-core"}:
+            return
+        original_require_extra(extra, obj_name=obj_name, alt=alt)
+
+    deps.is_extra_available = is_extra_available
+    deps.require_extra = require_extra
+    deps._openscreen_ocr_extra_patch = True
+
+
+def _recognize_profile_blocks(
+    image_path: str,
+    language: str | None,
+    profile: str | None,
+) -> list[dict[str, Any]]:
+    ocr_profile = _resolve_ocr_profile(profile)
+    languages = _resolve_paddle_languages(language, ocr_profile)
+    prepared = _prepare_image_for_profile(image_path, ocr_profile)
+    try:
+        blocks: list[dict[str, Any]] = []
+        for paddle_lang in languages:
+            engine = _get_engine(paddle_lang)
+            recognized = _recognize_blocks(engine, prepared.path)
+            blocks.extend(_scale_blocks(recognized, prepared.scale))
+        return _merge_blocks(blocks)
+    finally:
+        if prepared.should_delete:
+            Path(prepared.path).unlink(missing_ok=True)
+
+
+def _resolve_ocr_profile(profile: str | None) -> str:
+    explicit = (os.getenv("OPENSCREEN_OCR_PROFILE") or "").strip().lower()
+    value = explicit or (profile or "").strip().lower()
+    if value in {"fast", "vietnamese", "hybrid"}:
+        return value
+    return "vietnamese"
+
+
+def _resolve_paddle_languages(language: str | None, profile: str) -> list[str]:
+    explicit = (os.getenv("PADDLEOCR_LANG") or "").strip().lower()
+    if explicit:
+        return [explicit]
+
+    language_value = (language or "vi,en").lower()
+    has_vietnamese = "vi" in _split_language_tags(language_value)
+    if profile == "fast":
+        return [_resolve_primary_paddle_language(language_value, prefer_vietnamese=False)]
+    if profile == "hybrid":
+        languages = ["vi"] if has_vietnamese else []
+        languages.append("latin")
+        return _dedupe_languages(languages)
+    return [_resolve_primary_paddle_language(language_value, prefer_vietnamese=True)]
+
+
+def _split_language_tags(language: str) -> set[str]:
+    return {part.strip().lower() for part in language.split(",") if part.strip()}
+
+
+def _dedupe_languages(languages: list[str]) -> list[str]:
+    seen: set[str] = set()
+    result: list[str] = []
+    for language in languages:
+        if language not in seen:
+            seen.add(language)
+            result.append(language)
+    return result
+
+
+def _resolve_primary_paddle_language(language_value: str, *, prefer_vietnamese: bool) -> str:
+    tags = _split_language_tags(language_value)
+    if prefer_vietnamese and "vi" in tags:
+        return "vi"
+    if "latin" in tags or "vi" in tags or "en" in tags:
+        return "latin"
+    for tag in tags:
+        return tag
+    return "latin"
+
+
+def _prepare_image_for_profile(image_path: str, profile: str) -> PreparedImage:
+    if profile == "fast":
+        return PreparedImage(image_path)
+
+    try:
+        from PIL import Image, ImageEnhance, ImageOps
+    except Exception:
+        return PreparedImage(image_path)
+
+    try:
+        with Image.open(image_path) as source:
+            image = source.convert("RGB")
+    except Exception:
+        return PreparedImage(image_path)
+
+    scale = _resolve_enhancement_scale(image.width, image.height)
+    if scale <= 1:
+        return PreparedImage(image_path)
+
+    resampling = getattr(getattr(Image, "Resampling", Image), "LANCZOS")
+    enhanced = image.resize((round(image.width * scale), round(image.height * scale)), resampling)
+    enhanced = ImageOps.autocontrast(enhanced)
+    enhanced = ImageEnhance.Contrast(enhanced).enhance(1.25)
+    enhanced = ImageEnhance.Sharpness(enhanced).enhance(1.35)
+
+    handle = tempfile.NamedTemporaryFile(prefix="openscreen-ocr-enhanced-", suffix=".png", delete=False)
+    try:
+        handle.close()
+        enhanced.save(handle.name, format="PNG")
+        return PreparedImage(handle.name, scale=scale, should_delete=True)
+    except Exception:
+        Path(handle.name).unlink(missing_ok=True)
+        return PreparedImage(image_path)
+
+
+def _resolve_enhancement_scale(width: int, height: int) -> float:
+    try:
+        requested_scale = float(os.getenv("OPENSCREEN_OCR_ENHANCE_SCALE", "2"))
+    except ValueError:
+        requested_scale = 2.0
+    scale = max(1.0, min(3.0, requested_scale))
+    try:
+        max_side = int(os.getenv("OPENSCREEN_OCR_ENHANCE_MAX_SIDE", "2400"))
+    except ValueError:
+        max_side = 2400
+    largest_side = max(width, height)
+    if largest_side <= 0:
+        return 1.0
+    return max(1.0, min(scale, max_side / largest_side))
+
+
+def _scale_blocks(blocks: list[dict[str, Any]], scale: float) -> list[dict[str, Any]]:
+    if scale <= 1:
+        return blocks
+
+    scaled_blocks: list[dict[str, Any]] = []
+    for block in blocks:
+        box = block.get("box")
+        if not isinstance(box, dict) or not _box_uses_pixels(box):
+            scaled_blocks.append(block)
+            continue
+        scaled_box = {
+            "x": float(box["x"]) / scale,
+            "y": float(box["y"]) / scale,
+            "width": float(box["width"]) / scale,
+            "height": float(box["height"]) / scale,
+        }
+        scaled_blocks.append({**block, "box": scaled_box})
+    return scaled_blocks
+
+
+def _box_uses_pixels(box: dict[str, Any]) -> bool:
+    try:
+        x = float(box["x"])
+        y = float(box["y"])
+        width = float(box["width"])
+        height = float(box["height"])
+    except (KeyError, TypeError, ValueError):
+        return False
+    return x > 1 or y > 1 or width > 1 or height > 1 or x + width > 1 or y + height > 1
+
+
+def _merge_blocks(blocks: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    merged: list[dict[str, Any]] = []
+    for block in sorted(blocks, key=_block_quality, reverse=True):
+        box = block.get("box")
+        if not isinstance(box, dict):
+            continue
+        overlapping_index = next(
+            (
+                index
+                for index, existing in enumerate(merged)
+                if _box_iou(box, existing.get("box")) >= 0.62
+            ),
+            None,
+        )
+        if overlapping_index is None:
+            merged.append(block)
+            continue
+        if _block_quality(block) > _block_quality(merged[overlapping_index]):
+            merged[overlapping_index] = block
+    return sorted(merged, key=lambda block: _box_sort_key(block.get("box")))
+
+
+def _block_quality(block: dict[str, Any]) -> float:
+    text = str(block.get("text") or "")
+    score = _score_to_float(block.get("confidence"))
+    if _has_vietnamese_diacritics(text):
+        score += 0.08
+    if len(text) >= 2:
+        score += min(0.04, len(text) * 0.002)
+    return score
+
+
+def _has_vietnamese_diacritics(text: str) -> bool:
+    return any(
+        character
+        in "ăâđêôơưĂÂĐÊÔƠƯáàảãạắằẳẵặấầẩẫậéèẻẽẹếềểễệíìỉĩịóòỏõọốồổỗộớờởỡợúùủũụứừửữựýỳỷỹỵ"
+        for character in text
+    )
+
+
+def _box_iou(left: Any, right: Any) -> float:
+    if not isinstance(left, dict) or not isinstance(right, dict):
+        return 0.0
+    try:
+        left_x = float(left["x"])
+        left_y = float(left["y"])
+        left_width = float(left["width"])
+        left_height = float(left["height"])
+        right_x = float(right["x"])
+        right_y = float(right["y"])
+        right_width = float(right["width"])
+        right_height = float(right["height"])
+    except (KeyError, TypeError, ValueError):
+        return 0.0
+
+    intersection_left = max(left_x, right_x)
+    intersection_top = max(left_y, right_y)
+    intersection_right = min(left_x + left_width, right_x + right_width)
+    intersection_bottom = min(left_y + left_height, right_y + right_height)
+    intersection_width = max(0.0, intersection_right - intersection_left)
+    intersection_height = max(0.0, intersection_bottom - intersection_top)
+    intersection_area = intersection_width * intersection_height
+    if intersection_area <= 0:
+        return 0.0
+    union_area = left_width * left_height + right_width * right_height - intersection_area
+    return intersection_area / union_area if union_area > 0 else 0.0
+
+
+def _box_sort_key(box: Any) -> tuple[float, float]:
+    if not isinstance(box, dict):
+        return (0.0, 0.0)
+    try:
+        return (float(box["y"]), float(box["x"]))
+    except (KeyError, TypeError, ValueError):
+        return (0.0, 0.0)
+
+
+def _mobile_recognition_model(paddle_lang: str) -> str:
+    if paddle_lang in _LATIN_RECOGNITION_LANGS:
+        return "latin_PP-OCRv5_mobile_rec"
+    return "PP-OCRv5_mobile_rec"
+
+
+def _recognize_blocks(engine: Any, image_path: str) -> list[dict[str, Any]]:
+    if hasattr(engine, "predict"):
+        result = engine.predict(image_path)
+        blocks = _blocks_from_v3_result(result)
+        if blocks:
+            return blocks
+
+    result = engine.ocr(image_path, cls=False)
+    return _blocks_from_legacy_result(result)
+
+
+def _blocks_from_v3_result(result: Any) -> list[dict[str, Any]]:
+    blocks: list[dict[str, Any]] = []
+    for item in _as_list(result):
+        data = _result_to_dict(item)
+        if not data:
+            continue
+
+        texts = _as_list(_first_present(data, ("rec_texts", "texts")))
+        scores = _as_list(_first_present(data, ("rec_scores", "scores")))
+        boxes = _as_list(_first_present(data, ("rec_boxes", "rec_polys", "dt_polys")))
+        for index, text_value in enumerate(texts):
+            text = str(text_value).strip()
+            if not text:
+                continue
+            box = _box_to_rect(boxes[index] if index < len(boxes) else None)
+            if not box:
+                continue
+            blocks.append(
+                {
+                    "text": text,
+                    "confidence": _score_to_float(scores[index] if index < len(scores) else None),
+                    "box": box,
+                }
+            )
+    return blocks
+
+
+def _first_present(data: dict[str, Any], keys: tuple[str, ...]) -> Any:
+    for key in keys:
+        if key in data and data[key] is not None:
+            return data[key]
+    return None
+
+
+def _blocks_from_legacy_result(result: Any) -> list[dict[str, Any]]:
+    blocks: list[dict[str, Any]] = []
+    _collect_legacy_blocks(result, blocks)
+    return blocks
+
+
+def _collect_legacy_blocks(value: Any, blocks: list[dict[str, Any]]) -> None:
+    if not isinstance(value, (list, tuple)):
+        return
+
+    if len(value) >= 2 and _looks_like_box(value[0]):
+        rec = value[1]
+        if isinstance(rec, (list, tuple)) and rec:
+            text = str(rec[0]).strip()
+            if text:
+                box = _box_to_rect(value[0])
+                if box:
+                    blocks.append(
+                        {
+                            "text": text,
+                            "confidence": _score_to_float(rec[1] if len(rec) > 1 else None),
+                            "box": box,
+                        }
+                    )
+        return
+
+    for item in value:
+        _collect_legacy_blocks(item, blocks)
+
+
+def _result_to_dict(item: Any) -> dict[str, Any]:
+    if isinstance(item, dict):
+        data = item
+    elif hasattr(item, "res") and isinstance(item.res, dict):
+        data = item.res
+    elif hasattr(item, "to_dict"):
+        data = item.to_dict()
+    elif hasattr(item, "json") and isinstance(item.json, dict):
+        data = item.json
+    elif hasattr(item, "__dict__"):
+        data = dict(item.__dict__)
+    else:
+        return {}
+
+    nested = data.get("res")
+    return nested if isinstance(nested, dict) else data
+
+
+def _as_list(value: Any) -> list[Any]:
+    if value is None:
+        return []
+    if hasattr(value, "tolist"):
+        return value.tolist()
+    if isinstance(value, list):
+        return value
+    if isinstance(value, tuple):
+        return list(value)
+    return [value]
+
+
+def _looks_like_box(value: Any) -> bool:
+    box = _as_list(value)
+    if len(box) == 4 and all(_is_number(item) for item in box):
+        return True
+    return bool(box) and all(isinstance(point, (list, tuple)) for point in box)
+
+
+def _box_to_rect(value: Any) -> dict[str, float] | None:
+    if value is None:
+        return None
+
+    box = _as_list(value)
+    if len(box) == 4 and all(_is_number(item) for item in box):
+        left, top, right, bottom = [float(item) for item in box]
+        return _rect(left, top, right, bottom)
+
+    points = [_as_list(point) for point in box]
+    coordinates = [
+        (float(point[0]), float(point[1]))
+        for point in points
+        if len(point) >= 2 and _is_number(point[0]) and _is_number(point[1])
+    ]
+    if not coordinates:
+        return None
+
+    xs = [point[0] for point in coordinates]
+    ys = [point[1] for point in coordinates]
+    return _rect(min(xs), min(ys), max(xs), max(ys))
+
+
+def _rect(left: float, top: float, right: float, bottom: float) -> dict[str, float] | None:
+    width = max(0.0, right - left)
+    height = max(0.0, bottom - top)
+    if width == 0 or height == 0:
+        return None
+    return {"x": left, "y": top, "width": width, "height": height}
+
+
+def _score_to_float(value: Any) -> float:
+    try:
+        score = float(value)
+    except (TypeError, ValueError):
+        return 0.5
+    return max(0.0, min(1.0, score / 100 if score > 1 else score))
+
+
+def _is_number(value: Any) -> bool:
+    return isinstance(value, (int, float)) and not isinstance(value, bool)
diff --git a/tools/ocr/requirements.txt b/tools/ocr/requirements.txt
new file mode 100644
index 0000000..e5eb736
--- /dev/null
+++ b/tools/ocr/requirements.txt
@@ -0,0 +1,10 @@
+fastapi>=0.115
+uvicorn[standard]>=0.30
+pillow>=10
+paddlepaddle>=3.0
+paddlex[ocr]>=3.5,<3.6
+paddleocr>=3.0
+pyclipper>=1.3
+pypdfium2>=4
+python-bidi>=0.6
+shapely>=2.0
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f9acd4a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["src/*"]
+		},
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src", "electron"],
+	"exclude": ["**/*.test.ts", "**/*.test.tsx"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..3be14b6
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"strict": true
+	},
+	"include": [
+		"vite.config.ts",
+		"electron-builder.json5",
+		"playwright.config.ts",
+		"vitest.config.ts"
+	]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..0779e13
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,60 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import electron from "vite-plugin-electron/simple";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+		electron({
+			main: {
+				entry: "electron/main.ts",
+				onstart({ startup }) {
+					const env = { ...process.env };
+					delete env.ELECTRON_RUN_AS_NODE;
+					return startup(["."], { env });
+				},
+				vite: {
+					build: {},
+				},
+			},
+			preload: {
+				input: path.join(__dirname, "electron/preload.ts"),
+			},
+			renderer: process.env.NODE_ENV === "test" ? undefined : {},
+		}),
+	],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src"),
+		},
+	},
+	build: {
+		target: "esnext",
+		minify: "terser",
+		terserOptions: {
+			compress: {
+				drop_console: true,
+				drop_debugger: true,
+				pure_funcs: ["console.log", "console.debug"],
+			},
+		},
+		rollupOptions: {
+			output: {
+				manualChunks(id) {
+					if (id.includes("pixi.js") || id.includes("pixi-filters") || id.includes("@pixi/"))
+						return "pixi";
+					if (id.includes("react-dom") || id.includes("/react/")) return "react-vendor";
+					if (
+						id.includes("mediabunny") ||
+						id.includes("mp4box") ||
+						id.includes("fix-webm-duration")
+					)
+						return "video-processing";
+				},
+			},
+		},
+		chunkSizeWarningLimit: 1000,
+	},
+});
diff --git a/vitest.browser.config.ts b/vitest.browser.config.ts
new file mode 100644
index 0000000..ba5cc42
--- /dev/null
+++ b/vitest.browser.config.ts
@@ -0,0 +1,28 @@
+import path from "node:path";
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		include: ["src/**/*.browser.test.{ts,tsx}"],
+		browser: {
+			enabled: true,
+			provider: playwright({
+				launch: {
+					// Software WebGL so Pixi.js works in headless CI without a GPU.
+					args: ["--enable-unsafe-swiftshader", "--use-gl=swiftshader"],
+				},
+			}),
+			headless: true,
+			instances: [{ browser: "chromium" }],
+		},
+		testTimeout: 120_000,
+		hookTimeout: 30_000,
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src"),
+		},
+	},
+	assetsInclude: ["**/*.webm"],
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..5a52a9b
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,16 @@
+import path from "node:path";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		globals: true,
+		environment: "jsdom",
+		include: ["{src,electron}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+		exclude: ["src/**/*.browser.test.{ts,tsx}"],
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src"),
+		},
+	},
+});

OpenScreen native cursor diagnostic

Real screen capture + reconstructed native cursor

OpenScreen desktop app