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/preview/components/toolbar.tsx | 55 ++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

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

diff --git a/apps/web/src/preview/components/toolbar.tsx b/apps/web/src/preview/components/toolbar.tsx
index 1a5ce1bc..5f50e581 100644
--- a/apps/web/src/preview/components/toolbar.tsx
+++ b/apps/web/src/preview/components/toolbar.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useSyncExternalStore } from "react";
 import { useEditor } from "@/editor/use-editor";
 import { formatTimecode } from "opencut-wasm";
 import { invokeAction } from "@/actions";
 import { EditableTimecode } from "@/components/editable-timecode";
 import { Button } from "@/components/ui/button";
 import {
+	ArrowExpandDiagonal01Icon,
 	FullScreenIcon,
+	Minimize01Icon,
 	PauseIcon,
 	PlayIcon,
 } from "@hugeicons/core-free-icons";
@@ -21,6 +23,12 @@ import {
 	SelectSeparator,
 } from "@/components/ui/select";
 import { PREVIEW_ZOOM_PRESETS } from "@/preview/zoom";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { usePreviewPopoutStore } from "@/preview/popout-store";
 import { usePreviewViewport } from "./preview-viewport";
 import { GridPopover } from "./guide-popover";
 import { usePreviewStore } from "@/preview/preview-store";
@@ -51,6 +59,7 @@ export function PreviewToolbar({
 						)}
 					</Button>
 				</GridPopover> */}
+				<PopoutButton />
 				<Button variant="text" onClick={onToggleFullscreen}>
 					<HugeiconsIcon icon={FullScreenIcon} />
 				</Button>
@@ -59,6 +68,50 @@ export function PreviewToolbar({
 	);
 }
 
+function PopoutButton() {
+	const isPoppedOut = usePreviewPopoutStore(
+		(state) => state.container !== null,
+	);
+	const openPopout = usePreviewPopoutStore((state) => state.openPopout);
+	const dockPopout = usePreviewPopoutStore((state) => state.dockPopout);
+	const isSupported = useSyncExternalStore(
+		() => () => {},
+		() => "documentPictureInPicture" in window,
+		() => false,
+	);
+
+	if (!isSupported) {
+		return null;
+	}
+
+	const togglePopout = () => {
+		if (isPoppedOut) {
+			dockPopout();
+		} else {
+			openPopout();
+		}
+	};
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="text"
+					onClick={togglePopout}
+					aria-label={isPoppedOut ? "Dock preview" : "Pop out preview"}
+				>
+					<HugeiconsIcon
+						icon={isPoppedOut ? Minimize01Icon : ArrowExpandDiagonal01Icon}
+					/>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				{isPoppedOut ? "Dock preview" : "Pop out preview"}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
 function TimecodeDisplay() {
 	const editor = useEditor();
 	const totalDuration = useEditor((e) => e.timeline.getTotalDuration());
-- 
cgit v1.3.1