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/popout-store.ts | 76 ++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 apps/web/src/preview/popout-store.ts

(limited to 'apps/web/src/preview/popout-store.ts')

diff --git a/apps/web/src/preview/popout-store.ts b/apps/web/src/preview/popout-store.ts
new file mode 100644
index 00000000..1b91f6a2
--- /dev/null
+++ b/apps/web/src/preview/popout-store.ts
@@ -0,0 +1,76 @@
+import { create } from "zustand";
+
+interface PreviewPopoutState {
+	pipWindow: Window | null;
+	container: HTMLElement | null;
+	openPopout: () => Promise<void>;
+	dockPopout: () => void;
+}
+
+function copyStylesInto({ pipWindow }: { pipWindow: Window }) {
+	const styleNodes = document.head.querySelectorAll(
+		"style, link[rel='stylesheet']",
+	);
+	for (const node of styleNodes) {
+		if (node instanceof HTMLStyleElement) {
+			pipWindow.document.head.appendChild(node.cloneNode(true));
+		} else if (node instanceof HTMLLinkElement) {
+			const link = pipWindow.document.createElement("link");
+			link.rel = "stylesheet";
+			link.href = node.href;
+			pipWindow.document.head.appendChild(link);
+		}
+	}
+}
+
+function preparePipDocument({ pipWindow }: { pipWindow: Window }) {
+	pipWindow.document.documentElement.className =
+		document.documentElement.className;
+	pipWindow.document.documentElement.style.height = "100%";
+	pipWindow.document.body.className = document.body.className;
+	pipWindow.document.body.style.margin = "0";
+	pipWindow.document.body.style.height = "100%";
+	pipWindow.document.body.style.overflow = "hidden";
+	pipWindow.document.title = "Preview";
+	copyStylesInto({ pipWindow });
+}
+
+export const usePreviewPopoutStore = create<PreviewPopoutState>()(
+	(set, get) => ({
+		pipWindow: null,
+		container: null,
+		openPopout: async () => {
+			if (get().container !== null) {
+				return;
+			}
+			if (!("documentPictureInPicture" in window)) {
+				return;
+			}
+			const pip = window.documentPictureInPicture;
+			if (!pip) {
+				return;
+			}
+			const pipWindow = await pip.requestWindow();
+			preparePipDocument({ pipWindow });
+			const container = pipWindow.document.createElement("div");
+			container.style.width = "100%";
+			container.style.height = "100%";
+			pipWindow.document.body.appendChild(container);
+			pipWindow.addEventListener(
+				"pagehide",
+				() => {
+					set({ pipWindow: null, container: null });
+				},
+				{ once: true },
+			);
+			set({ pipWindow, container });
+		},
+		dockPopout: () => {
+			const { pipWindow } = get();
+			if (pipWindow && !pipWindow.closed) {
+				pipWindow.close();
+			}
+			set({ pipWindow: null, container: null });
+		},
+	}),
+);
-- 
cgit v1.3.1