@mevdragon/vidfarm-devcli 0.5.3 → 0.6.0

package/dist/src/frontend/homepage-view.js

@@ -0,0 +1,547 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { resolveAccountDisplayName, withAccountQuery } from "../page-shell.js";
+import { isVideoPreview } from "./homepage-shared.js";
+function DiscoverIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10 3v4" }), _jsx("path", { d: "M10 13v4" }), _jsx("path", { d: "M3 10h4" }), _jsx("path", { d: "M13 10h4" }), _jsx("path", { d: "m5.8 5.8 2.3 2.3" }), _jsx("path", { d: "m11.9 11.9 2.3 2.3" }), _jsx("path", { d: "m14.2 5.8-2.3 2.3" }), _jsx("path", { d: "m8.1 11.9-2.3 2.3" })] });
+}
+function LibraryIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M4.5 4.5h3v11h-3z" }), _jsx("path", { d: "M8.7 4.5h3v11h-3z" }), _jsx("path", { d: "m13.4 5.1 2.3-.6 2.2 10.7-2.3.6z" })] });
+}
+function CalendarIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 6.3v4.1l2.8 1.7" })] });
+}
+function ChatIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M4.2 5.2a2 2 0 0 1 2-2h7.6a2 2 0 0 1 2 2v5.6a2 2 0 0 1-2 2H9.2l-4.1 3.1v-3.1a2 2 0 0 1-.9-1.7Z" }), _jsx("path", { d: "M7.3 7.1h5.4" }), _jsx("path", { d: "M7.3 9.6h3.7" })] });
+}
+function SettingsIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14.8 15.2a5.4 5.4 0 1 0-9.6 0" }), _jsx("circle", { cx: "10", cy: "6.8", r: "3.1" })] });
+}
+function MoreIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [_jsx("circle", { cx: "4.2", cy: "10", r: "1.45" }), _jsx("circle", { cx: "10", cy: "10", r: "1.45" }), _jsx("circle", { cx: "15.8", cy: "10", r: "1.45" })] });
+}
+function MenuIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", children: [_jsx("path", { d: "M3.5 5.5h13" }), _jsx("path", { d: "M3.5 10h13" }), _jsx("path", { d: "M3.5 14.5h13" })] });
+}
+function SearchIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "8.5", cy: "8.5", r: "5.8" }), _jsx("path", { d: "m13 13 4.2 4.2" })] });
+}
+function BookmarkIcon() {
+    return _jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M6 3.8h8a1 1 0 0 1 1 1v11.4l-5-2.9-5 2.9V4.8a1 1 0 0 1 1-1Z" }) });
+}
+function clearLogoutAccountCache(accountId) {
+    const account = accountId?.trim();
+    if (!account || typeof window === "undefined") {
+        return;
+    }
+    try {
+        const registryIndexKey = "vidfarm:agency:accounts:index";
+        const rawIds = window.localStorage.getItem(registryIndexKey);
+        const ids = rawIds ? JSON.parse(rawIds) : [];
+        if (Array.isArray(ids)) {
+            window.localStorage.setItem(registryIndexKey, JSON.stringify(ids.filter((value) => typeof value === "string" && value !== account)));
+        }
+        window.localStorage.removeItem(`vidfarm:agency:account_${account}`);
+        window.localStorage.removeItem(`vidfarm:flockposter-cache:v1_${account}`);
+        window.localStorage.removeItem(`vidfarm:discover-bookmarks:v1_${account}`);
+    }
+    catch {
+        // Ignore storage failures.
+    }
+}
+function PrimaryNav({ account }) {
+    const logoutDialogRef = useRef(null);
+    const items = account.isLoggedIn
+        ? [
+            { id: "discover", href: withAccountQuery("/discover", account.userId), label: "Discover", icon: _jsx(DiscoverIcon, {}) },
+            { id: "library", href: withAccountQuery("/library", account.userId), label: "Library", icon: _jsx(LibraryIcon, {}) },
+            { id: "calendar", href: withAccountQuery("/calendar", account.userId), label: "Calendar", icon: _jsx(CalendarIcon, {}) },
+            { id: "settings", href: withAccountQuery("/settings", account.userId), label: "Settings", icon: _jsx(SettingsIcon, {}) }
+        ]
+        : [
+            { id: "discover", href: "/discover", label: "Discover", icon: _jsx(DiscoverIcon, {}) },
+            { id: "login", href: "/login", label: "Login", icon: _jsx(SettingsIcon, {}) }
+        ];
+    const menuItems = account.isLoggedIn
+        ? [
+            { id: "chat", href: withAccountQuery("/chat", account.userId), label: "Chat" },
+            { id: "job-runs", href: withAccountQuery("/job-runs", account.userId), label: "Run History" },
+            { id: "inpaint", href: withAccountQuery("/inpaint", account.userId), label: "Inpaint" },
+            { id: "help", href: "/help", label: "Help" },
+            { id: "logout", action: "logout", label: "Log Out" }
+        ]
+        : [
+            { id: "help", href: "/help", label: "Help" },
+            { id: "login", href: "/login", label: "Login" }
+        ];
+    const mobileMenuPrimaryItems = items.filter((item) => !menuItems.some((menuItem) => menuItem.id === item.id));
+    return (_jsxs(_Fragment, { children: [_jsxs("nav", { className: "primary-nav", "aria-label": "Primary", children: [items.map((item) => (_jsxs("a", { className: `nav-link${item.id === "discover" ? " is-active" : ""}`, href: item.href, children: [_jsx("span", { className: "nav-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { children: item.label })] }, item.id))), menuItems.map((item) => ("href" in item ? (_jsx("a", { className: "nav-link nav-mobile-extra", href: item.href, children: _jsx("span", { children: item.label }) }, `mobile-${item.id}`)) : (_jsx("button", { type: "button", className: "nav-link nav-mobile-extra nav-action-link", onClick: () => {
+                            if (!logoutDialogRef.current?.open) {
+                                logoutDialogRef.current?.showModal();
+                            }
+                        }, children: _jsx("span", { children: item.label }) }, `mobile-${item.id}`)))), menuItems.length ? (_jsxs("details", { className: "nav-menu", children: [_jsxs("summary", { className: "nav-link nav-menu-trigger", "aria-label": "Open navigation menu", children: [_jsx("span", { className: "nav-icon nav-menu-desktop-icon", "aria-hidden": "true", children: _jsx(MoreIcon, {}) }), _jsx("span", { className: "nav-icon nav-menu-mobile-icon", "aria-hidden": "true", children: _jsx(MenuIcon, {}) }), _jsx("span", { className: "nav-menu-label", children: "Menu" })] }), _jsxs("div", { className: "nav-menu-panel", role: "menu", children: [mobileMenuPrimaryItems.map((item) => (_jsx("a", { className: `nav-menu-item nav-menu-mobile-only${item.id === "discover" ? " is-active" : ""}`, role: "menuitem", href: item.href, children: item.label }, `menu-mobile-${item.id}`))), menuItems.map((item) => ("href" in item ? (_jsx("a", { className: "nav-menu-item", role: "menuitem", href: item.href, children: item.label }, item.id)) : (_jsx("button", { type: "button", className: "nav-menu-item nav-menu-button", role: "menuitem", onClick: () => {
+                                            if (!logoutDialogRef.current?.open) {
+                                                logoutDialogRef.current?.showModal();
+                                            }
+                                        }, children: item.label }, item.id))))] })] })) : null] }), account.isLoggedIn ? (_jsxs("dialog", { className: "logout-dialog", ref: logoutDialogRef, onClick: (event) => {
+                    const dialog = logoutDialogRef.current;
+                    if (!dialog) {
+                        return;
+                    }
+                    const rect = dialog.getBoundingClientRect();
+                    const isBackdropClick = event.clientX < rect.left ||
+                        event.clientX > rect.right ||
+                        event.clientY < rect.top ||
+                        event.clientY > rect.bottom;
+                    if (isBackdropClick) {
+                        dialog.close();
+                    }
+                }, children: [_jsxs("div", { className: "logout-dialog-head", children: [_jsx("div", { className: "label logout-dialog-kicker", children: "Log out" }), _jsx("h3", { children: "Log out of this browser?" }), _jsx("p", { children: "This clears the stored developer key, workspace access, and local session state for the current browser." })] }), _jsxs("div", { className: "toolbar logout-dialog-actions", children: [_jsx("button", { type: "button", className: "secondary", onClick: () => logoutDialogRef.current?.close(), children: "Cancel" }), _jsxs("form", { method: "post", action: "/logout", onSubmit: () => clearLogoutAccountCache(account.userId), children: [_jsx("input", { type: "hidden", name: "account", value: account.userId ?? "" }), _jsx("button", { type: "submit", className: "danger", children: "Yes, log out" })] })] })] })) : null] }));
+}
+function BrandLockup({ account }) {
+    const email = account.email?.trim() || "";
+    const derivedName = resolveAccountDisplayName({ displayName: account.displayName, email: account.email });
+    const href = withAccountQuery("/discover", account.userId);
+    return (_jsxs("a", { className: "brand-lockup", href: href, children: [_jsx("img", { className: "brand-logo-image", src: "/assets/logo-vidfarm.png", alt: "VidFarm AI" }), _jsxs("div", { className: "brand-copy", children: [_jsxs("div", { className: "brand-title brand-title-static", children: ["VidFarm", _jsx("span", { className: "brand-title-mobile-hidden", children: " AI" })] }), email ? (_jsxs("div", { className: "brand-account-meta", children: [derivedName, " ", _jsxs("span", { children: ["(", email, ")"] })] })) : null] })] }));
+}
+function CloseIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: [_jsx("path", { d: "m5 5 10 10" }), _jsx("path", { d: "m15 5-10 10" })] });
+}
+function DownloadIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10 3v9" }), _jsx("path", { d: "m6.5 8.5 3.5 3.5 3.5-3.5" }), _jsx("path", { d: "M4 16h12" })] });
+}
+function LinkIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1" }), _jsx("path", { d: "M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2" })] });
+}
+function SpeakerOnIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3.5 8v4h2.8l3.5 3V5l-3.5 3Z" }), _jsx("path", { d: "M12.4 7.6a3.4 3.4 0 0 1 0 4.8" }), _jsx("path", { d: "M14.6 5.4a6.5 6.5 0 0 1 0 9.2" })] });
+}
+function SpeakerOffIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3.5 8v4h2.8l3.5 3V5l-3.5 3Z" }), _jsx("path", { d: "m12.6 8 4 4" }), _jsx("path", { d: "m16.6 8-4 4" })] });
+}
+const DISCOVER_MUTE_STORAGE_KEY = "vidfarm:discover-muted";
+let discoverMuted = typeof window !== "undefined" && window.localStorage?.getItem(DISCOVER_MUTE_STORAGE_KEY) === "1";
+const discoverMuteListeners = new Set();
+function setDiscoverMuted(muted) {
+    discoverMuted = muted;
+    try {
+        window.localStorage.setItem(DISCOVER_MUTE_STORAGE_KEY, muted ? "1" : "0");
+    }
+    catch {
+        // storage unavailable (private mode); the toggle still works for this page view
+    }
+    for (const listener of discoverMuteListeners) {
+        listener();
+    }
+}
+function subscribeDiscoverMuted(listener) {
+    discoverMuteListeners.add(listener);
+    return () => {
+        discoverMuteListeners.delete(listener);
+    };
+}
+function useDiscoverMuted() {
+    return useSyncExternalStore(subscribeDiscoverMuted, () => discoverMuted, () => false);
+}
+// While the preview modal is open, feed videos pause so their audio does not
+// compete with the modal player.
+let discoverPlaybackSuspended = false;
+const discoverSuspendListeners = new Set();
+function setDiscoverPlaybackSuspended(suspended) {
+    discoverPlaybackSuspended = suspended;
+    for (const listener of discoverSuspendListeners) {
+        listener();
+    }
+}
+function LazyVideo({ src, controls = true }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const video = ref.current;
+        if (!video) {
+            return;
+        }
+        const load = () => {
+            if (!video.dataset.src || video.getAttribute("src")) {
+                return;
+            }
+            video.setAttribute("src", video.dataset.src);
+            video.load();
+        };
+        let inView = false;
+        const attemptPlay = () => {
+            if (discoverPlaybackSuspended) {
+                return;
+            }
+            load();
+            video.muted = discoverMuted;
+            video.play().then(() => {
+                delete video.dataset.mutedFallback;
+            }).catch(() => {
+                if (video.muted) {
+                    return;
+                }
+                // Unmuted autoplay is blocked until the user interacts with the page.
+                video.dataset.mutedFallback = "1";
+                video.muted = true;
+                video.play().catch(() => { });
+            });
+        };
+        const unmuteOnGesture = () => {
+            if (!discoverMuted && video.dataset.mutedFallback === "1" && !video.paused) {
+                video.muted = false;
+                delete video.dataset.mutedFallback;
+            }
+        };
+        window.addEventListener("pointerdown", unmuteOnGesture);
+        window.addEventListener("keydown", unmuteOnGesture);
+        const applyGlobalMute = () => {
+            if (discoverMuted) {
+                delete video.dataset.mutedFallback;
+                video.muted = true;
+            }
+            else if (!video.paused) {
+                // The toggle click is a user gesture, so unmuting live playback is allowed.
+                video.muted = false;
+            }
+        };
+        const unsubscribeMute = subscribeDiscoverMuted(applyGlobalMute);
+        const applySuspend = () => {
+            if (discoverPlaybackSuspended) {
+                if (!video.paused) {
+                    video.pause();
+                }
+            }
+            else if (inView) {
+                attemptPlay();
+            }
+        };
+        discoverSuspendListeners.add(applySuspend);
+        const removeListeners = () => {
+            window.removeEventListener("pointerdown", unmuteOnGesture);
+            window.removeEventListener("keydown", unmuteOnGesture);
+            unsubscribeMute();
+            discoverSuspendListeners.delete(applySuspend);
+        };
+        if (!("IntersectionObserver" in window)) {
+            inView = true;
+            attemptPlay();
+            return removeListeners;
+        }
+        const preloadObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting) {
+                    continue;
+                }
+                load();
+                preloadObserver.unobserve(entry.target);
+            }
+        }, {
+            rootMargin: "240px 0px"
+        });
+        const playbackObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                inView = entry.isIntersecting;
+                if (entry.isIntersecting) {
+                    attemptPlay();
+                }
+                else if (!video.paused) {
+                    video.pause();
+                }
+            }
+        }, {
+            threshold: 0.5
+        });
+        preloadObserver.observe(video);
+        playbackObserver.observe(video);
+        return () => {
+            preloadObserver.disconnect();
+            playbackObserver.disconnect();
+            removeListeners();
+        };
+    }, []);
+    return _jsx("video", { ref: ref, className: "preview", "data-src": src, preload: "metadata", playsInline: true, loop: true, controls: controls });
+}
+function DiscoverMuteToggle() {
+    const muted = useDiscoverMuted();
+    return (_jsxs("button", { type: "button", className: "discover-mute-toggle", "aria-pressed": muted, "aria-label": muted ? "Unmute video previews" : "Mute video previews", title: muted ? "Unmute previews" : "Mute previews", onClick: () => setDiscoverMuted(!muted), children: [muted ? _jsx(SpeakerOffIcon, {}) : _jsx(SpeakerOnIcon, {}), _jsx("span", { className: "discover-mute-toggle-label", children: muted ? "Muted" : "Sound on" })] }));
+}
+function CopyInlineButton({ text, label }) {
+    const [status, setStatus] = useState("");
+    const handleClick = async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setStatus("done");
+        }
+        catch {
+            setStatus("error");
+        }
+        window.setTimeout(() => setStatus(""), 1600);
+    };
+    return (_jsxs("button", { className: "pill-tag copy-inline", type: "button", "data-state": status, "aria-label": status === "done" ? `${label} copied` : label, onClick: () => void handleClick(), children: [_jsx("span", { className: "copy-inline-label", children: label }), _jsx("span", { className: "copy-inline-feedback", "aria-hidden": "true", children: status === "error" ? "Couldn’t copy" : "Copied" })] }));
+}
+function editorHref(templateId, accountUserId) {
+    const usesNewEditor = templateId.startsWith("hyperframes:") || templateId.startsWith("template_");
+    return usesNewEditor
+        ? `/editor/${encodeURIComponent(templateId.replace(/^hyperframes:/, ""))}${accountUserId ? `?account=${encodeURIComponent(accountUserId)}` : ""}`
+        : withAccountQuery(`/templates/${encodeURIComponent(templateId)}/editor/docs`, accountUserId);
+}
+function CreateButton({ templateId, accountUserId }) {
+    return _jsx("a", { className: "cta-button", href: editorHref(templateId, accountUserId), children: "Editor" });
+}
+function CardMenu(input) {
+    const { template } = input;
+    const [isOpen, setIsOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const menuRef = useRef(null);
+    const isPending = template.status === "processing" || template.status === "failed";
+    const canDelete = template.visibility === "private" && Boolean(input.onDeleteTemplate);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleKey = (event) => {
+            if (event.key === "Escape")
+                setIsOpen(false);
+        };
+        window.addEventListener("mousedown", handleClickOutside);
+        window.addEventListener("keydown", handleKey);
+        return () => {
+            window.removeEventListener("mousedown", handleClickOutside);
+            window.removeEventListener("keydown", handleKey);
+        };
+    }, [isOpen]);
+    const handleCopyId = async () => {
+        try {
+            await navigator.clipboard.writeText(template.templateId);
+            setCopied(true);
+            window.setTimeout(() => {
+                setCopied(false);
+                setIsOpen(false);
+            }, 900);
+        }
+        catch {
+            setIsOpen(false);
+        }
+    };
+    const handleDelete = async () => {
+        if (!window.confirm(`Delete "${template.title}"? This removes it from your Discover feed permanently.`)) {
+            return;
+        }
+        setDeleting(true);
+        const result = await (input.onDeleteTemplate?.(template.templateId) ?? Promise.resolve({ ok: false, error: "Delete unavailable." }));
+        setDeleting(false);
+        if (result.ok) {
+            setIsOpen(false);
+        }
+        else {
+            window.alert(result.error || "Unable to delete this template.");
+        }
+    };
+    return (_jsxs("div", { className: "discover-card-menu", ref: menuRef, children: [_jsx("button", { type: "button", className: "discover-card-menu-trigger", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-label": `More actions for ${template.title}`, title: "More actions", onClick: () => setIsOpen((prev) => !prev), children: _jsx(MoreIcon, {}) }), isOpen ? (_jsxs("div", { className: "discover-card-menu-panel", role: "menu", children: [_jsx("button", { type: "button", className: "discover-card-menu-item", role: "menuitem", onClick: () => void handleCopyId(), children: copied ? "Copied!" : "Copy ID" }), isPending ? (_jsx("span", { className: "discover-card-menu-item is-disabled", role: "menuitem", "aria-disabled": "true", children: "Open in Editor" })) : (_jsx("a", { className: "discover-card-menu-item", role: "menuitem", href: editorHref(template.templateId, input.accountUserId), children: "Open in Editor" })), _jsx("button", { type: "button", className: "discover-card-menu-item", role: "menuitem", onClick: () => {
+                            input.onToggleBookmark?.(template.templateId);
+                            setIsOpen(false);
+                        }, children: input.isBookmarked ? "Remove Bookmark" : "Bookmark" }), canDelete ? (_jsx("button", { type: "button", className: "discover-card-menu-item is-danger", role: "menuitem", disabled: deleting, onClick: () => void handleDelete(), children: deleting ? "Deleting…" : "Delete" })) : null] })) : null] }));
+}
+function BookmarkButton(input) {
+    const label = `${input.isBookmarked ? "Remove bookmark for " : "Bookmark "}${input.title}`;
+    return (_jsx("button", { className: "bookmark-button", type: "button", "data-active": input.isBookmarked ? "true" : "false", "aria-label": label, "aria-pressed": input.isBookmarked, title: label, onClick: () => input.onToggleBookmark?.(input.templateId), children: _jsx(BookmarkIcon, {}) }));
+}
+function formatDifficulty(difficulty) {
+    return difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
+}
+function formatTemplateMeta(template) {
+    const layerCount = typeof template.layerCount === "number" ? template.layerCount : null;
+    const sourceCount = typeof template.sourceAssetCount === "number" ? template.sourceAssetCount : null;
+    const duration = typeof template.durationSeconds === "number" && Number.isFinite(template.durationSeconds)
+        ? template.durationSeconds >= 60
+            ? `${Math.floor(template.durationSeconds / 60)}:${String(Math.round(template.durationSeconds % 60)).padStart(2, "0")}`
+            : `${template.durationSeconds.toFixed(template.durationSeconds >= 10 ? 1 : 2)}s`
+        : null;
+    const parts = [
+        layerCount === null ? null : `${layerCount} layer${layerCount === 1 ? "" : "s"}`,
+        sourceCount === null ? null : `${sourceCount} source${sourceCount === 1 ? "" : "s"}`,
+        duration
+    ].filter(Boolean);
+    return parts.length ? parts.join(" / ") : template.previewUrl ? "Draft composition with editable layers." : "Layer recipe with editable timeline.";
+}
+function TemplateCard(input) {
+    const { template } = input;
+    const isPending = template.status === "processing" || template.status === "failed";
+    const media = template.previewUrl
+        ? isVideoPreview(template.previewUrl)
+            ? _jsx(LazyVideo, { src: template.previewUrl, controls: false })
+            : _jsx("img", { className: "preview", src: template.previewUrl, alt: `${template.title} preview`, loading: "lazy", decoding: "async" })
+        : _jsx("div", { className: "preview preview-empty", children: template.status === "processing" ? "Downloading…" : "No preview" });
+    return (_jsxs("li", { className: "discover-card row", "data-template-id": template.templateId, children: [template.previewUrl ? (_jsxs("button", { className: "discover-card-media discover-card-media-button", type: "button", "aria-label": `Open ${template.title} preview`, onClick: () => input.onOpenPreview?.(template), children: [media, _jsx("span", { className: "discover-card-media-affordance", "aria-hidden": "true", children: "View" })] })) : (_jsx("div", { className: "discover-card-media", children: media })), _jsxs("div", { className: "discover-card-copy", children: [_jsxs("div", { className: "discover-card-head", children: [_jsxs("div", { className: "discover-card-title-wrap", children: [_jsx("h2", { children: template.title }), _jsx("p", { className: "discover-card-meta", children: formatTemplateMeta(template) })] }), _jsxs("div", { className: "discover-card-actions", children: [_jsx(BookmarkButton, { templateId: template.templateId, title: template.title, isBookmarked: input.isBookmarked, onToggleBookmark: input.onToggleBookmark }), isPending ? (_jsx("span", { className: "cta-button discover-card-cta-disabled", "aria-disabled": "true", children: template.status === "failed" ? "Failed" : "Preparing…" })) : (_jsx(CreateButton, { templateId: template.templateId, accountUserId: input.accountUserId })), _jsx(CardMenu, { template: template, isBookmarked: input.isBookmarked, onToggleBookmark: input.onToggleBookmark, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.accountUserId })] })] }), _jsx("div", { className: "discover-card-body", children: _jsx("p", { children: String(template.viralDna || "").trim() || "No layer strategy provided for this composition yet." }) }), _jsxs("div", { className: "discover-card-tags", children: [template.visibility === "private" ? (_jsx("div", { className: "pill-tag private-pill", title: "Only visible to your account", children: "Only you" })) : null, template.status === "processing" ? (_jsx("div", { className: "pill-tag processing-pill", children: "Processing" })) : template.status === "failed" ? (_jsx("div", { className: "pill-tag failed-pill", children: "Download failed" })) : null, _jsx("div", { className: "pill-tag difficulty-pill", "data-difficulty": template.difficulty, children: formatDifficulty(template.difficulty) }), _jsx("div", { className: "pill-tag", children: template.sourceType || (isVideoPreview(template.previewUrl) ? "Video source" : "Image sequence") }), _jsx(CopyInlineButton, { text: template.templateId, label: template.templateId })] })] })] }));
+}
+function PreviewModal(input) {
+    const { onClose, template } = input;
+    const previewUrl = template.previewUrl || "";
+    const isVideo = isVideoPreview(previewUrl);
+    const [copyStatus, setCopyStatus] = useState("");
+    const muted = useDiscoverMuted();
+    useEffect(() => {
+        setDiscoverPlaybackSuspended(true);
+        return () => setDiscoverPlaybackSuspended(false);
+    }, []);
+    const handleCopyLink = async () => {
+        try {
+            await navigator.clipboard.writeText(previewUrl);
+            setCopyStatus("done");
+        }
+        catch {
+            setCopyStatus("error");
+        }
+        window.setTimeout(() => setCopyStatus(""), 1600);
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [onClose]);
+    return (_jsx("div", { className: "discover-media-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "discover-media-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "discover-media-modal-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "discover-media-modal-head", children: [_jsx("h2", { id: "discover-media-modal-title", children: template.title }), _jsxs("div", { className: "discover-media-modal-actions", children: [_jsx("a", { className: "discover-media-modal-action", href: previewUrl, download: true, "aria-label": `Download ${template.title} preview`, title: "Download", onClick: (event) => event.stopPropagation(), children: _jsx(DownloadIcon, {}) }), _jsx("button", { className: "discover-media-modal-action", type: "button", "data-state": copyStatus, "aria-label": copyStatus === "done" ? "Media URL copied" : copyStatus === "error" ? "Unable to copy media URL" : `Copy ${template.title} preview URL`, title: copyStatus === "done" ? "Copied" : copyStatus === "error" ? "Copy failed" : "Copy link", onClick: () => void handleCopyLink(), children: _jsx(LinkIcon, {}) }), _jsx("button", { className: "discover-media-modal-action", type: "button", "aria-label": "Close preview", title: "Close", onClick: onClose, children: _jsx(CloseIcon, {}) })] })] }), _jsx("div", { className: "discover-media-modal-stage", children: isVideo ? (_jsx("video", { src: previewUrl, controls: true, autoPlay: true, playsInline: true, preload: "metadata", muted: muted, onVolumeChange: (event) => {
+                            // The modal player's mute button doubles as the page-wide toggle.
+                            const nowMuted = event.currentTarget.muted;
+                            if (nowMuted !== discoverMuted) {
+                                setDiscoverMuted(nowMuted);
+                            }
+                        } })) : (_jsx("img", { src: previewUrl, alt: `${template.title} preview` })) })] }) }));
+}
+function AddTemplateModal(input) {
+    const { onClose } = input;
+    const [sourceUrl, setSourceUrl] = useState("");
+    const [tagline, setTagline] = useState("");
+    const [notes, setNotes] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [onClose]);
+    const handleSubmit = async () => {
+        const trimmedUrl = sourceUrl.trim();
+        if (!trimmedUrl) {
+            setError("Paste a TikTok, YouTube, Twitter/X, or Instagram video URL.");
+            return;
+        }
+        setSubmitting(true);
+        setError(null);
+        const result = await (input.onAddTemplate?.({ sourceUrl: trimmedUrl, tagline: tagline.trim(), notes: notes.trim() })
+            ?? Promise.resolve({ ok: false, error: "Adding templates is unavailable right now." }));
+        setSubmitting(false);
+        if (result.ok) {
+            onClose();
+        }
+        else {
+            setError(result.error || "Unable to add that video. Try again.");
+        }
+    };
+    return (_jsx("div", { className: "discover-media-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "discover-media-modal discover-add-template-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "discover-add-template-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "discover-media-modal-head", children: [_jsx("h2", { id: "discover-add-template-title", children: "Add Template" }), _jsx("div", { className: "discover-media-modal-actions", children: _jsx("button", { className: "discover-media-modal-action", type: "button", "aria-label": "Close", title: "Close", onClick: onClose, children: _jsx(CloseIcon, {}) }) })] }), _jsxs("form", { className: "discover-add-template-form", onSubmit: (event) => {
+                        event.preventDefault();
+                        void handleSubmit();
+                    }, children: [_jsx("p", { className: "discover-add-template-hint", children: "Paste a link to a TikTok, YouTube, Twitter/X, or Instagram video. We download it and add it to your Discover feed \u2014 visible only to your account." }), _jsxs("div", { className: "discover-add-template-field", children: [_jsx("label", { className: "label", htmlFor: "add-template-url", children: "Video URL" }), _jsx("input", { id: "add-template-url", type: "url", required: true, placeholder: "https://www.tiktok.com/@creator/video/\u2026", autoComplete: "off", value: sourceUrl, onChange: (event) => setSourceUrl(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-tagline", children: ["Tagline ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("input", { id: "add-template-tagline", type: "text", placeholder: "What makes this video work?", autoComplete: "off", maxLength: 140, value: tagline, onChange: (event) => setTagline(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-notes", children: ["Notes ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("textarea", { id: "add-template-notes", rows: 4, placeholder: "Ideas for how you want to remix this\u2026", maxLength: 2000, value: notes, onChange: (event) => setNotes(event.target.value) })] }), error ? _jsx("p", { className: "discover-add-template-error", role: "alert", children: error }) : null, _jsxs("div", { className: "toolbar discover-add-template-actions", children: [_jsx("button", { type: "button", className: "secondary", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx("button", { type: "submit", className: "cta-button discover-add-template-submit", disabled: submitting, children: submitting ? "Adding…" : "Add Template" })] })] })] }) }));
+}
+export function HomepageShell(input) {
+    const showEmpty = !input.loading && !input.error && input.templates.length > 0 && input.visibleTemplates.length === 0;
+    const [previewTemplate, setPreviewTemplate] = useState(null);
+    const [isAddTemplateOpen, setIsAddTemplateOpen] = useState(false);
+    const searchPlaceholder = input.loading || input.error
+        ? "Search Templates"
+        : `Search ${input.visibleTemplates.length} Template${input.visibleTemplates.length === 1 ? "" : "s"}`;
+    // Chat rail is always visible on /discover so logged-out visitors see the copilot
+    // affordance and understand what unlocks after login. When logged in, the real chat
+    // React tree portals into the [data-template-editor-chat-root] element (see
+    // page-runtime-client). When logged out, we render an inert placeholder with a
+    // disabled textarea and a "Log in to chat" CTA in the same slot.
+    const hasChatRail = true;
+    const isChatEnabled = input.account.isLoggedIn;
+    return (_jsxs("section", { className: `frame discover-frame${hasChatRail ? " has-chat-rail" : ""}`, children: [_jsxs("header", { className: "topbar", children: [_jsx(BrandLockup, { account: input.account }), _jsx("div", { className: "topbar-actions", children: _jsx(PrimaryNav, { account: input.account }) })] }), _jsx("div", { className: "frame-body", children: _jsxs("section", { className: "discover-shell", children: [_jsxs("div", { className: "discover-filter-bar", role: "toolbar", "aria-label": "Composition filters", children: [_jsxs("div", { className: "discover-filter-search search-field", children: [_jsx("span", { className: "search-icon", "aria-hidden": "true", children: _jsx(SearchIcon, {}) }), _jsx("input", { id: "search", type: "search", placeholder: searchPlaceholder, autoComplete: "off", value: input.searchQuery, onChange: (event) => input.onSearchQueryChange?.(event.target.value) })] }), _jsxs("label", { className: "discover-filter-toggle", htmlFor: "bookmarks-only", "data-active": input.bookmarksOnly ? "true" : "false", children: [_jsx("span", { className: "discover-filter-toggle-label", children: "Saved" }), _jsxs("span", { className: "switch-shell", "data-active": input.bookmarksOnly ? "true" : "false", children: [_jsx("input", { id: "bookmarks-only", className: "switch-input", type: "checkbox", checked: input.bookmarksOnly, onChange: (event) => input.onBookmarksOnlyChange?.(event.target.checked) }), _jsx("span", { className: "switch-knob" })] })] }), input.account.isLoggedIn ? (_jsx("button", { type: "button", className: "discover-add-template-button", onClick: () => setIsAddTemplateOpen(true), children: "Add Template" })) : (_jsx("a", { className: "discover-add-template-button", href: "/login", children: "Add Template" })), _jsx(DiscoverMuteToggle, {})] }), _jsx("section", { className: "discover-results", children: _jsx("div", { className: "discover-results-scroll", children: _jsxs("div", { className: "discover-list-scroll", children: [_jsx("ul", { className: "discover-list", id: "template-list", children: input.loading ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Loading compositions..." })) : input.error ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Unable to load compositions." })) : input.templates.length === 0 ? (_jsx("li", { className: "empty-state discover-loading-card", children: "No compositions available." })) : (input.visibleTemplates.map((template) => (_jsx(TemplateCard, { template: template, isBookmarked: input.bookmarks.has(template.templateId), onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.account.userId }, template.templateId)))) }), _jsx("div", { className: "empty-state empty", id: "empty-state", "data-visible": showEmpty ? "true" : "false", children: "No compositions match the current search and filter combination." })] }) }) })] }) }), hasChatRail ? (_jsx("aside", { className: "editor-right-rail", "aria-label": "Discover copilot", children: isChatEnabled ? (_jsx("div", { className: "editor-chat-panel", "data-template-editor-chat-root": true })) : (_jsxs(_Fragment, { children: [_jsx("a", { className: "vf-editor-chat-mobile-fab", href: "/login", "aria-label": "Log in to chat with Vidfarm", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M20 11.5a7.5 7.5 0 0 1-9.8 7.1L4 20l1.5-5.3A7.5 7.5 0 1 1 20 11.5Z" }) }) }), _jsxs("div", { className: "editor-chat-panel editor-chat-panel--logged-out", style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                height: "100%",
+                                padding: "20px",
+                                gap: "16px",
+                                boxSizing: "border-box"
+                            }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [_jsx("span", { className: "label", style: {
+                                                fontSize: "0.68rem",
+                                                fontWeight: 800,
+                                                letterSpacing: "0.14em",
+                                                textTransform: "uppercase",
+                                                color: "#a9884a"
+                                            }, children: "Vidfarm copilot" }), _jsx("h3", { style: { margin: 0, fontSize: "1.05rem", color: "#2f3748" }, children: "Chat with Vidfarm" }), _jsx("p", { style: { margin: 0, fontSize: "0.9rem", color: "#74829c" }, children: "Ask for hooks, angles, and remixes tailored to compositions in your library." })] }), _jsx("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "8px",
+                                        marginTop: "14px"
+                                    }, "aria-hidden": "true", children: [
+                                        "Give me 10 hooks for this coffee-shop template",
+                                        "Which awareness stage fits my product?",
+                                        "Remix this into an ad for my brand"
+                                    ].map((prompt) => (_jsxs("span", { style: {
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            gap: "8px",
+                                            padding: "10px 14px",
+                                            borderRadius: "14px",
+                                            border: "1px dashed rgba(191, 164, 109, 0.45)",
+                                            background: "rgba(250, 245, 234, 0.65)",
+                                            color: "#74829c",
+                                            fontSize: "0.85rem",
+                                            lineHeight: 1.35
+                                        }, children: [_jsx("span", { style: { color: "#bfa46d", fontWeight: 700 }, children: "\u201C" }), prompt] }, prompt))) }), _jsxs("div", { style: {
+                                        marginTop: "auto",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "10px"
+                                    }, children: [_jsx("textarea", { rows: 3, placeholder: "Log in to chat with Vidfarm\u2026", disabled: true, "aria-label": "Chat with Vidfarm (log in to enable)", style: {
+                                                width: "100%",
+                                                resize: "none",
+                                                padding: "10px 12px",
+                                                borderRadius: "10px",
+                                                border: "1px solid rgba(191, 164, 109, 0.36)",
+                                                background: "rgba(250, 245, 234, 0.9)",
+                                                color: "#74829c",
+                                                fontFamily: "inherit",
+                                                fontSize: "0.9rem",
+                                                cursor: "not-allowed",
+                                                boxSizing: "border-box"
+                                            } }), _jsx("a", { href: "/login", style: {
+                                                display: "inline-flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                minHeight: "38px",
+                                                padding: "0 16px",
+                                                borderRadius: "999px",
+                                                background: "#bfa46d",
+                                                color: "#1a1409",
+                                                fontWeight: 700,
+                                                fontSize: "0.9rem",
+                                                textDecoration: "none"
+                                            }, children: "Log in to chat" })] })] })] })) })) : null, previewTemplate ? _jsx(PreviewModal, { template: previewTemplate, onClose: () => setPreviewTemplate(null) }) : null, isAddTemplateOpen ? (_jsx(AddTemplateModal, { onClose: () => setIsAddTemplateOpen(false), onAddTemplate: input.onAddTemplate })) : null] }));
+}
+//# sourceMappingURL=homepage-view.js.map