From c555f1eaebff90749bdc543592cfa80a060b29e2 Mon Sep 17 00:00:00 2001
From: cashmere <cashmere@autistici.org>
Date: Sun, 9 Aug 2026 02:37:37 +0200
Subject: feat: lens effects tab, standalone motion effects, clip/asset rename,
 preview popout

- New Lens category in the assets panel: Blur, Motion Blur, Zoom In/Out,
  Pan x4, Shake, Pulse, Spin, Custom Zoom. EffectDefinition gains a
  category field; tabs with an empty category are hidden, and the
  properties-panel 'Open effects' button opens the first non-empty one.
- Motion effects work standalone: dropping them on the timeline creates
  an effect-track element that animates (scale/translate/rotate) every
  track below it, computed purely in the TS frame descriptor - no wasm
  changes, identical in preview and export. supportsStandalone removed.
- Motion Blur: directional gaussian smear (amount + angle) reusing the
  existing WGSL shader with arbitrary u_direction.
- Custom Zoom: start/end scale params (keyframable clip-level).
- MotionOffset gains optional rotate, accumulated clip-level and applied
  to standalone layer quads via rotationDegrees.
- Rename clips (timeline context menu) and media assets (media panel
  context menu) via a shared RenameDialog; asset rename persists through
  storageService with rollback on error.
- Preview pops out into a Document Picture-in-Picture window and docks
  back; button hidden where the API is unsupported.
- Export keeps running when the export popover is closed; only the
  explicit Cancel button aborts.
- Captions and Adjustment tabs removed from the assets panel.
---
 .../src/timeline/components/timeline-element.tsx   | 35 +++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/timeline/components/timeline-element.tsx')

diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx
index 5c412435..70161054 100644
--- a/apps/web/src/timeline/components/timeline-element.tsx
+++ b/apps/web/src/timeline/components/timeline-element.tsx
@@ -68,6 +68,7 @@ import {
 	ScissorIcon,
 	Delete02Icon,
 	Copy01Icon,
+	Edit02Icon,
 	ViewIcon,
 	ViewOffSlashIcon,
 	VolumeHighIcon,
@@ -80,7 +81,7 @@ import {
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { uppercase } from "@/utils/string";
-import { useMemo, type ComponentProps, type ReactNode } from "react";
+import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
 import type { SelectedKeyframeRef, ElementKeyframe } from "@/animation/types";
 import { cn } from "@/utils/ui";
 import { usePropertiesStore } from "@/components/editor/panels/properties/stores/properties-store";
@@ -92,6 +93,7 @@ import {
 	getExpansionHeight,
 	type ExpandedRow,
 } from "./expanded-layout";
+import { RenameDialog } from "@/components/editor/rename-dialog";
 
 const KEYFRAME_INDICATOR_MIN_WIDTH_PX = 40;
 const ELEMENT_RING_WIDTH_PX = 1.5;
@@ -233,7 +235,9 @@ export function TimelineElement({
 	isDropTarget = false,
 }: TimelineElementProps) {
 	const mediaAssets = useEditor((e) => e.media.getAssets());
+	const editor = useEditor();
 	const { selectedElements } = useElementSelection();
+	const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
 	const requestRevealMedia = useAssetsPanelStore((s) => s.requestRevealMedia);
 	const { renderElement } = useElementPreview({
 		trackId: track.id,
@@ -348,6 +352,19 @@ export function TimelineElement({
 			: "Extract audio";
 	const isElementSourceAudioSeparated =
 		element.type === "video" && isSourceAudioSeparated({ element });
+	const handleRenameConfirm = (newName: string) => {
+		editor.timeline.updateElements({
+			updates: [
+				{
+					trackId: track.id,
+					elementId: element.id,
+					patch: { name: newName },
+				},
+			],
+		});
+		setIsRenameDialogOpen(false);
+	};
+
 	const hasKeyframes = elementKeyframes.length > 0;
 	const expansionHeight = getExpansionHeight({ rows: expandedRows });
 	const baseTrackHeight = getTrackHeight({ type: track.type });
@@ -425,6 +442,15 @@ export function TimelineElement({
 					</div>
 				</ContextMenuTrigger>
 				<ContextMenuContent className="w-64">
+					<ContextMenuItem
+						icon={<HugeiconsIcon icon={Edit02Icon} />}
+						onClick={(event: React.MouseEvent) => {
+							event.stopPropagation();
+							setIsRenameDialogOpen(true);
+						}}
+					>
+						Rename
+					</ContextMenuItem>
 					<ActionMenuItem
 						action="split"
 						icon={<HugeiconsIcon icon={ScissorIcon} />}
@@ -509,6 +535,13 @@ export function TimelineElement({
 					/>
 				</ContextMenuContent>
 			</ContextMenu>
+			<RenameDialog
+				isOpen={isRenameDialogOpen}
+				onOpenChange={setIsRenameDialogOpen}
+				onConfirm={handleRenameConfirm}
+				currentName={element.name}
+				title="Rename clip"
+			/>
 		</PixelsPerSecondContext.Provider>
 	);
 }
-- 
cgit v1.3.1