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.
---
 apps/web/src/effects/components/assets-view.tsx | 54 ++++++++++++++++---------
 apps/web/src/effects/components/effects-tab.tsx |  7 +++-
 2 files changed, 40 insertions(+), 21 deletions(-)

(limited to 'apps/web/src/effects/components')

diff --git a/apps/web/src/effects/components/assets-view.tsx b/apps/web/src/effects/components/assets-view.tsx
index 8c2ec85b..54817f54 100644
--- a/apps/web/src/effects/components/assets-view.tsx
+++ b/apps/web/src/effects/components/assets-view.tsx
@@ -7,13 +7,16 @@ import { effectsRegistry, EFFECT_TARGET_ELEMENT_TYPES } from "@/effects";
 import { effectPreviewService } from "@/services/renderer/effect-preview";
 import { useEditor } from "@/editor/use-editor";
 import { buildEffectElement } from "@/timeline/element-utils";
-import type { EffectDefinition } from "@/effects/types";
+import type { EffectCategory, EffectDefinition } from "@/effects/types";
 
-export function EffectsView() {
-	const effects = effectsRegistry.getAll();
+export function EffectsView({ category }: { category?: EffectCategory }) {
+	const all = effectsRegistry.getAll();
+	const effects = category
+		? all.filter((effect) => effect.category === category)
+		: all;
 
 	return (
-		<PanelView title="Effects">
+		<PanelView title={category === "lens" ? "Lens" : "Effects"}>
 			<EffectsGrid effects={effects} />
 		</PanelView>
 	);
@@ -124,18 +127,33 @@ function MotionPreviewCanvas({ effectType }: { effectType: string }) {
 			return;
 		}
 
-		const inward = effectType === "zoom-out";
-		const spread = size * 0.16;
-		const reach = size * 0.3;
-		for (const [dx, dy] of [
-			[1, 1],
-			[-1, -1],
-		] as const) {
-			const innerX = center + dx * (inward ? reach : spread);
-			const innerY = center + dy * (inward ? reach : spread) * 0.7;
-			const outerX = center + dx * (inward ? spread : reach);
-			const outerY = center + dy * (inward ? spread : reach) * 0.7;
-			drawArrow({ context, fromX: innerX, fromY: innerY, toX: outerX, toY: outerY });
+		if (effectType === "zoom-in" || effectType === "zoom-out") {
+			const inward = effectType === "zoom-out";
+			const spread = size * 0.16;
+			const reach = size * 0.3;
+			for (const [dx, dy] of [
+				[1, 1],
+				[-1, -1],
+			] as const) {
+				const innerX = center + dx * (inward ? reach : spread);
+				const innerY = center + dy * (inward ? reach : spread) * 0.7;
+				const outerX = center + dx * (inward ? spread : reach);
+				const outerY = center + dy * (inward ? spread : reach) * 0.7;
+				drawArrow({
+					context,
+					fromX: innerX,
+					fromY: innerY,
+					toX: outerX,
+					toY: outerY,
+				});
+			}
+			return;
+		}
+
+		for (const radius of [size * 0.14, size * 0.26]) {
+			context.beginPath();
+			context.arc(center, center, radius, 0, Math.PI * 2);
+			context.stroke();
 		}
 	}, [effectType]);
 
@@ -182,9 +200,7 @@ function EffectItem({ effect }: { effect: EffectDefinition }) {
 				effectType: effect.type,
 				targetElementTypes: EFFECT_TARGET_ELEMENT_TYPES,
 			}}
-			onAddToTimeline={
-				effect.supportsStandalone === false ? undefined : handleAddToTimeline
-			}
+			onAddToTimeline={handleAddToTimeline}
 			aspectRatio={1}
 			isRounded
 			variant="card"
diff --git a/apps/web/src/effects/components/effects-tab.tsx b/apps/web/src/effects/components/effects-tab.tsx
index 102d818a..91ad1f42 100644
--- a/apps/web/src/effects/components/effects-tab.tsx
+++ b/apps/web/src/effects/components/effects-tab.tsx
@@ -25,7 +25,10 @@ import {
 } from "@hugeicons/core-free-icons";
 import { cn } from "@/utils/ui";
 import { Separator } from "@/components/ui/separator";
-import { useAssetsPanelStore } from "@/components/editor/panels/assets/assets-panel-store";
+import {
+	getDefaultEffectsTab,
+	useAssetsPanelStore,
+} from "@/components/editor/panels/assets/assets-panel-store";
 
 export function StandaloneEffectTab({
 	element,
@@ -222,7 +225,7 @@ function EmptyView() {
 			<Button
 				variant="default"
 				size="sm"
-				onClick={() => setActiveTab("effects")}
+				onClick={() => setActiveTab(getDefaultEffectsTab())}
 			>
 				Open effects
 			</Button>
-- 
cgit v1.3.1