@mevdragon/vidfarm-devcli 0.20.6 → 0.20.8

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

@@ -1,705 +0,0 @@
-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: "tools", href: withAccountQuery("/tools/image", account.userId), label: "Tools" },
-            { 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 (_jsx("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, {}) }));
-}
-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), target: "_blank", rel: "noopener", 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), target: "_blank", rel: "noopener", 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.origin === "raw" ? (_jsx("div", { className: "pill-tag origin-pill", title: "Your own project \u2014 created from a prompt or your raw clips, not an imported inspiration", children: "Your project" })) : null, 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 [file, setFile] = useState(null);
-    const [title, setTitle] = 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 && !file) {
-            setError("Paste a TikTok, YouTube, Twitter/X, or Instagram video URL — or upload a video file.");
-            return;
-        }
-        if (file && file.size > 200 * 1024 * 1024) {
-            setError("Video uploads can be at most 200 MB.");
-            return;
-        }
-        setSubmitting(true);
-        setError(null);
-        const result = await (input.onAddTemplate?.({ sourceUrl: file ? "" : trimmedUrl, file, title: title.trim(), 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 \u2014 or upload a video file from your computer. We add it to your Discover feed, 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: !file, disabled: Boolean(file), 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-file", children: ["Or upload a video ", _jsx("span", { className: "discover-add-template-optional", children: "MP4 / MOV / WebM, up to 200 MB" })] }), file ? (_jsxs("div", { className: "discover-add-template-file-chip", children: [_jsx("span", { className: "discover-add-template-file-name", children: file.name }), _jsxs("span", { className: "discover-add-template-file-size", children: [(file.size / (1024 * 1024)).toFixed(1), " MB"] }), _jsx("button", { type: "button", className: "discover-add-template-file-clear", "aria-label": "Remove selected file", onClick: () => setFile(null), children: "\u2715" })] })) : (_jsx("input", { id: "add-template-file", type: "file", accept: "video/mp4,video/quicktime,video/webm,.mp4,.m4v,.mov,.webm", onChange: (event) => {
-                                        const selected = event.target.files?.[0] ?? null;
-                                        if (selected) {
-                                            setFile(selected);
-                                            setSourceUrl("");
-                                            setError(null);
-                                        }
-                                    } }))] }), file ? (_jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-title", children: ["Title ", _jsx("span", { className: "discover-add-template-optional", children: "optional \u2014 defaults to the template id" })] }), _jsx("input", { id: "add-template-title", type: "text", placeholder: "Name this template\u2026", autoComplete: "off", maxLength: 140, value: title, onChange: (event) => setTitle(event.target.value) })] })) : null, _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 ? (file ? "Uploading…" : "Adding…") : "Add Template" })] })] })] }) }));
-}
-// The curated "Popular" picks. They are real public templates (seeded once from
-// POPULAR_INSPIRATION_GROUPS), so they render with the exact same TemplateCard
-// as the Feed — inline autoplay video that obeys the page mute toggle — just
-// grouped under their editorial category headings and ordered by the server.
-function PopularTemplates(input) {
-    if (input.loading) {
-        return _jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: "Loading categories\u2026" }) });
-    }
-    if (input.error) {
-        return _jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: input.error }) });
-    }
-    const query = input.searchQuery.trim().toLowerCase();
-    const filtered = query
-        ? input.templates.filter((template) => `${template.title} ${template.templateId} ${template.popularGroup ?? ""}`.toLowerCase().includes(query))
-        : input.templates;
-    if (filtered.length === 0) {
-        return (_jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: query ? "No categories match your search." : "No categories yet." }) }));
-    }
-    // Group by popularGroup, preserving the server's rank order (already sorted).
-    const groups = [];
-    for (const template of filtered) {
-        const label = (template.popularGroup || "Popular").trim() || "Popular";
-        let group = groups.find((entry) => entry.label === label);
-        if (!group) {
-            group = { label, items: [] };
-            groups.push(group);
-        }
-        group.items.push(template);
-    }
-    return (_jsx("div", { className: "discover-popular", children: groups.map((group) => (_jsxs("section", { className: "discover-popular-group", children: [_jsx("h3", { className: "discover-popular-group-label", children: group.label }), _jsx("ul", { className: "discover-list", children: group.items.map((template) => (_jsx(TemplateCard, { template: template, isBookmarked: input.bookmarks.has(template.templateId), onToggleBookmark: input.onToggleBookmark, onOpenPreview: input.onOpenPreview, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.accountUserId }, template.templateId))) })] }, group.label))) }));
-}
-// Tinder-style deck of the customer's own product, auto-recut from decomposed
-// templates. Previews are LIVE HyperFrames compositions in an iframe (no baked
-// MP4) — only the top two cards mount an iframe (the concurrent-decoder ceiling);
-// the rest are static placeholders. Drag or tap the buttons to approve/reject.
-function SwipeDeck(input) {
-    const [drag, setDrag] = useState(null);
-    const [flyOut, setFlyOut] = useState(null);
-    const [busy, setBusy] = useState(false);
-    const [actionError, setActionError] = useState(null);
-    // Deck previews start muted (the only autoplay browsers allow); this toggle
-    // is the user gesture that unlocks audio. The same-origin preview iframes
-    // poll these window flags (see injectSwipePreviewFit) — the top-card id gate
-    // keeps the preloaded second iframe silent so audio never doubles.
-    const [soundOn, setSoundOn] = useState(false);
-    const topCardId = input.stack.length ? input.stack[0].id : null;
-    useEffect(() => {
-        window.__VF_SWIPE_SOUND__ = soundOn;
-        window.__VF_SWIPE_SOUND_TOP__ = topCardId;
-        return () => {
-            window.__VF_SWIPE_SOUND__ = false;
-            window.__VF_SWIPE_SOUND_TOP__ = null;
-        };
-    }, [soundOn, topCardId]);
-    const startRef = useRef(null);
-    const THRESHOLD = 110;
-    const decide = (card, dir) => {
-        if (!card || busy)
-            return;
-        setBusy(true);
-        setActionError(null);
-        setFlyOut({ id: card.id, dir });
-        // Let the fly-out animation play, then commit (parent removes the card and
-        // refills the deck).
-        window.setTimeout(async () => {
-            const action = dir === "right" ? input.onApprove : input.onReject;
-            try {
-                const result = await action?.(card.id);
-                if (result && !result.ok)
-                    setActionError(result.error ?? "Action failed.");
-            }
-            finally {
-                setFlyOut(null);
-                setDrag(null);
-                startRef.current = null;
-                setBusy(false);
-            }
-        }, 260);
-    };
-    if (!input.isLoggedIn) {
-        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "Swipe is for your product" }), _jsx("p", { className: "swipe-empty-sub", children: "Log in to auto-generate ads from viral templates and swipe to approve." }), _jsx("a", { className: "swipe-empty-cta", href: "/login", children: "Log in" })] }));
-    }
-    if (!input.productSet) {
-        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "Tell us about your product" }), _jsx("p", { className: "swipe-empty-sub", children: "Swipe auto-recuts viral templates into ads for your product. Add a product / offer description in Settings to start the deck." }), _jsx("a", { className: "swipe-empty-cta", href: "/settings", children: "Open Settings" })] }));
-    }
-    if (input.error) {
-        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "Couldn't load your deck" }), _jsx("p", { className: "swipe-empty-sub", children: input.error })] }));
-    }
-    if (input.stack.length === 0) {
-        if (input.loading || input.customizing > 0 || input.refilling) {
-            return (_jsxs("div", { className: "swipe-empty", children: [_jsx("div", { className: "swipe-spinner", "aria-hidden": "true" }), _jsx("p", { className: "swipe-empty-title", children: "Customizing fresh clips\u2026" }), _jsx("p", { className: "swipe-empty-sub", children: "Recutting viral templates into ads for your product." })] }));
-        }
-        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "You're all caught up" }), _jsx("p", { className: "swipe-empty-sub", children: "No more templates to customize right now. Check back as new ones are added." })] }));
-    }
-    const visible = input.stack.slice(0, 4);
-    const top = visible[0];
-    return (_jsxs("div", { className: "swipe-deck-wrap", children: [_jsxs("div", { className: "swipe-deck-row", children: [_jsx("button", { type: "button", className: "swipe-action swipe-action-reject", disabled: busy, onClick: () => decide(top, "left"), "aria-label": "Reject", children: "\u2715" }), _jsxs("div", { className: "swipe-deck", children: [_jsx("button", { type: "button", className: "swipe-sound", onClick: () => setSoundOn((value) => !value), "aria-label": soundOn ? "Mute preview" : "Play preview with sound", "aria-pressed": soundOn, title: soundOn ? "Mute" : "Sound on", children: soundOn ? "🔊" : "🔇" }), visible.map((card, index) => {
-                                const isTop = index === 0;
-                                const isFlying = flyOut?.id === card.id;
-                                const isDragging = isTop && drag?.id === card.id;
-                                const useIframe = index <= 1 && Boolean(card.previewUrl);
-                                const dx = isDragging ? drag.dx : 0;
-                                const dy = isDragging ? drag.dy : 0;
-                                let transform;
-                                let transition;
-                                if (isFlying) {
-                                    transform = `translate(${flyOut.dir === "right" ? 130 : -130}%, ${dy}px) rotate(${flyOut.dir === "right" ? 22 : -22}deg)`;
-                                    transition = "transform 0.26s ease-in";
-                                }
-                                else if (isTop) {
-                                    transform = `translate(${dx}px, ${dy * 0.25}px) rotate(${dx / 22}deg)`;
-                                    transition = isDragging ? "none" : "transform 0.2s ease";
-                                }
-                                else {
-                                    transform = `translateY(${index * 12}px) scale(${1 - index * 0.04})`;
-                                    transition = "transform 0.2s ease";
-                                }
-                                const hint = isDragging ? (drag.dx > 40 ? "approve" : drag.dx < -40 ? "reject" : null) : null;
-                                return (_jsxs("div", { className: "swipe-card", style: { transform, transition, zIndex: 100 - index }, onPointerDown: isTop && !busy ? (event) => {
-                                        startRef.current = { x: event.clientX, y: event.clientY };
-                                        event.currentTarget.setPointerCapture?.(event.pointerId);
-                                    } : undefined, onPointerMove: isTop && !busy ? (event) => {
-                                        if (!startRef.current)
-                                            return;
-                                        setDrag({ id: card.id, dx: event.clientX - startRef.current.x, dy: event.clientY - startRef.current.y });
-                                    } : undefined, onPointerUp: isTop && !busy ? () => {
-                                        const moved = drag?.id === card.id ? drag.dx : 0;
-                                        startRef.current = null;
-                                        if (moved > THRESHOLD)
-                                            decide(card, "right");
-                                        else if (moved < -THRESHOLD)
-                                            decide(card, "left");
-                                        else
-                                            setDrag(null);
-                                    } : undefined, onPointerCancel: isTop ? () => { startRef.current = null; setDrag(null); } : undefined, children: [useIframe ? (_jsx("iframe", { className: "swipe-card-preview", src: card.previewUrl ?? undefined, title: card.title, loading: "lazy", scrolling: "no", allow: "autoplay", style: { pointerEvents: "none" } })) : (_jsx("div", { className: "swipe-card-fallback", children: _jsx("span", { children: card.title }) })), _jsxs("div", { className: "swipe-card-overlay", children: [_jsx("div", { className: "swipe-card-title", children: card.title }), card.caption ? _jsx("div", { className: "swipe-card-caption", children: card.caption }) : null] }), hint === "approve" ? _jsx("div", { className: "swipe-stamp swipe-stamp-yes", children: "Approve" }) : null, hint === "reject" ? _jsx("div", { className: "swipe-stamp swipe-stamp-no", children: "Reject" }) : null] }, card.id));
-                            })] }), _jsx("button", { type: "button", className: "swipe-action swipe-action-approve", disabled: busy, onClick: () => decide(top, "right"), "aria-label": "Approve", children: "\u2713" })] }), _jsx("div", { className: "swipe-status", children: input.customizing > 0 || input.refilling ? "Customizing more…" : `${input.stack.length} ready` }), actionError ? _jsx("div", { className: "swipe-action-error", children: actionError }) : null] }));
-}
-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);
-    // "feed" = the live inspirations catalog (continuously grown); "popular" = the
-    // curated static picks fetched from /discover/popular. View state lives in the
-    // store so the client can lazily load the Popular set on first open.
-    const isPopular = input.view === "popular";
-    const isSwipe = input.view === "swipe";
-    const setView = (value) => input.onViewChange?.(value);
-    const searchPlaceholder = isPopular
-        ? "Search categories"
-        : 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: "view-toggle discover-view-toggle", role: "tablist", "aria-label": "Discover view", children: [_jsx("button", { type: "button", className: `view-toggle-tab${!isPopular && !isSwipe ? " is-active" : ""}`, role: "tab", "aria-selected": !isPopular && !isSwipe, onClick: () => setView("feed"), children: "Feed" }), _jsx("button", { type: "button", className: `view-toggle-tab${isSwipe ? " is-active" : ""}`, role: "tab", "aria-selected": isSwipe, onClick: () => setView("swipe"), children: "Swipe" }), _jsx("button", { type: "button", className: `view-toggle-tab${isPopular ? " is-active" : ""}`, role: "tab", "aria-selected": isPopular, onClick: () => setView("popular"), children: "Category" })] }), _jsx(DiscoverMuteToggle, {}), _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) })] }), !isPopular && !isSwipe ? (_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" })] })] })) : null, 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("section", { className: "discover-results", children: _jsx("div", { className: "discover-results-scroll", children: _jsx("div", { className: "discover-list-scroll", children: isSwipe ? (_jsx(SwipeDeck, { stack: input.swipeStack, loading: input.swipeLoading, loaded: input.swipeLoaded, error: input.swipeError, customizing: input.swipeCustomizing, targetDepth: input.swipeTargetDepth, productSet: input.swipeProductSet, refilling: input.swipeRefilling, isLoggedIn: input.account.isLoggedIn, onApprove: input.onSwipeApprove, onReject: input.onSwipeReject })) : isPopular ? (_jsx(PopularTemplates, { templates: input.popularTemplates, loading: input.popularLoading, error: input.popularError, searchQuery: input.searchQuery, bookmarks: input.bookmarks, onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.account.userId })) : (_jsxs(_Fragment, { 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