@mevdragon/vidfarm-devcli 0.2.8 → 0.2.10

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } 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 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 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 PrimaryNav({ account }) {
+    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, {}) }
+        ];
+    return (_jsx("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))) }));
+}
+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 LazyVideo({ src, controls = true }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const video = ref.current;
+        if (!video || video.src) {
+            return;
+        }
+        const load = () => {
+            if (!video.dataset.src || video.getAttribute("src")) {
+                return;
+            }
+            video.setAttribute("src", video.dataset.src);
+            video.load();
+        };
+        if (!("IntersectionObserver" in window)) {
+            load();
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting) {
+                    continue;
+                }
+                load();
+                observer.unobserve(entry.target);
+            }
+        }, {
+            rootMargin: "240px 0px"
+        });
+        observer.observe(video);
+        return () => observer.disconnect();
+    }, []);
+    return _jsx("video", { ref: ref, className: "preview", "data-src": src, preload: "metadata", muted: true, playsInline: true, controls: controls });
+}
+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 CreateButton({ templateId, accountUserId }) {
+    const href = withAccountQuery(`/templates/${encodeURIComponent(templateId)}/editor/docs`, accountUserId);
+    return _jsx("a", { className: "cta-button", href: href, children: "Create" });
+}
+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 TemplateCard(input) {
+    const { template } = input;
+    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: "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: template.previewUrl ? "1 preview asset with editable handoff." : "Reference format with editable handoff." })] }), _jsxs("div", { className: "discover-card-actions", children: [_jsx(BookmarkButton, { templateId: template.templateId, title: template.title, isBookmarked: input.isBookmarked, onToggleBookmark: input.onToggleBookmark }), _jsx(CreateButton, { templateId: template.templateId, accountUserId: input.accountUserId })] })] }), _jsx("div", { className: "discover-card-body", children: _jsx("p", { children: String(template.viralDna || "").trim() || "No summary provided for this format yet." }) }), _jsxs("div", { className: "discover-card-tags", children: [_jsx("div", { className: "pill-tag", children: isVideoPreview(template.previewUrl) ? "Video" : "Slideshow" }), _jsx(CopyInlineButton, { text: template.templateId, label: template.templateId }), _jsx(CopyInlineButton, { text: template.slugId, label: template.slugId })] })] })] }));
+}
+function PreviewModal(input) {
+    const { onClose, template } = input;
+    const previewUrl = template.previewUrl || "";
+    const isVideo = isVideoPreview(previewUrl);
+    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 }), _jsx("button", { className: "discover-media-modal-close", type: "button", "aria-label": "Close preview", 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" })) : (_jsx("img", { src: previewUrl, alt: `${template.title} preview` })) })] }) }));
+}
+export function HomepageShell(input) {
+    const countLabel = input.error || `${input.visibleTemplates.length} visible`;
+    const showEmpty = !input.loading && !input.error && input.templates.length > 0 && input.visibleTemplates.length === 0;
+    const [previewTemplate, setPreviewTemplate] = useState(null);
+    useEffect(() => {
+        const phoneQuery = window.matchMedia("(max-width: 767px)");
+        const syncFilterPanelState = () => {
+            document.querySelectorAll(".discover-filter-panel").forEach((panel) => {
+                panel.open = !phoneQuery.matches;
+            });
+        };
+        syncFilterPanelState();
+        phoneQuery.addEventListener("change", syncFilterPanelState);
+        return () => phoneQuery.removeEventListener("change", syncFilterPanelState);
+    }, []);
+    return (_jsxs("section", { className: "frame discover-frame", 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: [_jsx("aside", { className: "discover-sidebar", children: _jsxs("details", { className: "discover-filter-panel", open: true, children: [_jsx("summary", { children: _jsx("span", { children: "Filters" }) }), _jsxs("div", { className: "discover-filter-panel-body", children: [_jsxs("div", { className: "discover-filter-block", children: [_jsx("div", { className: "label", children: "Filters" }), _jsx("p", { children: "Keep the controls pinned here and use the extra height to roam the catalog." })] }), _jsxs("div", { className: "discover-filter-group", children: [_jsx("label", { className: "label", htmlFor: "search", children: "Search formats" }), _jsxs("div", { className: "search-field", children: [_jsx("span", { className: "search-icon", "aria-hidden": "true", children: _jsx(SearchIcon, {}) }), _jsx("input", { id: "search", type: "search", placeholder: "Search templates, hooks, media styles", autoComplete: "off", value: input.searchQuery, onChange: (event) => input.onSearchQueryChange?.(event.target.value) })] })] }), _jsxs("div", { className: "discover-filter-group", children: [_jsx("label", { className: "label", htmlFor: "media-filter", children: "Media type" }), _jsx("select", { id: "media-filter", disabled: true, children: _jsx("option", { children: "All formats" }) })] }), _jsxs("div", { className: "discover-filter-group", children: [_jsx("label", { className: "label", children: "Shortlist" }), _jsxs("div", { className: "bookmarks-row", children: [_jsx("label", { className: "switch-label", htmlFor: "bookmarks-only", children: "Bookmarks only" }), _jsxs("label", { className: "switch-shell", htmlFor: "bookmarks-only", "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" })] })] })] })] })] }) }), _jsx("section", { className: "discover-results", children: _jsxs("div", { className: "discover-results-scroll", children: [_jsx("div", { className: "discover-count", id: "count", children: input.loading ? "Loading formats..." : countLabel }), _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 formats..." })) : input.error ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Unable to load formats." })) : input.templates.length === 0 ? (_jsx("li", { className: "empty-state discover-loading-card", children: "No formats available." })) : (input.visibleTemplates.map((template) => (_jsx(TemplateCard, { template: template, isBookmarked: input.bookmarks.has(template.templateId), onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, accountUserId: input.account.userId }, template.templateId)))) }), _jsx("div", { className: "empty-state empty", id: "empty-state", "data-visible": showEmpty ? "true" : "false", children: "No formats match the current search and filter combination." })] })] }) })] }) }), previewTemplate ? _jsx(PreviewModal, { template: previewTemplate, onClose: () => setPreviewTemplate(null) }) : null] }));
+}

package/dist/src/frontend/page-runtime-client.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { useStore } from "zustand";
+import { createFlockPosterCacheStore, readFlockPosterCacheSnapshot } from "./flockposter-cache-store.js";
+import { createPageRuntimeStore } from "./page-runtime-store.js";
+import { TemplateEditorChat } from "./template-editor-chat.js";
+function readBoot() {
+    const element = document.getElementById("page-runtime-boot");
+    if (!element?.textContent) {
+        return null;
+    }
+    return JSON.parse(element.textContent);
+}
+function isoDaysFromNow(days) {
+    const date = new Date();
+    date.setDate(date.getDate() + days);
+    return date.toISOString();
+}
+async function hydrateFlockPosterCacheAtStartup(input) {
+    if (!input.userId) {
+        return;
+    }
+    const current = input.store.getState();
+    if (!input.force && current.channels.length && current.channelsUpdatedAt) {
+        return;
+    }
+    const params = new URLSearchParams({
+        start_date: isoDaysFromNow(-7),
+        end_date: isoDaysFromNow(30)
+    });
+    const response = await fetch(`/u/${encodeURIComponent(input.userId)}/calendar/feed?${params.toString()}`, {
+        headers: { accept: "application/json" }
+    });
+    const payload = await response.json().catch(() => null);
+    if (!response.ok || !payload) {
+        return;
+    }
+    input.store.getState().setCalendarData({
+        channels: Array.isArray(payload.channels) ? payload.channels : [],
+        posts: Array.isArray(payload.posts) ? payload.posts : [],
+        rangeStart: payload.startDate || isoDaysFromNow(-7),
+        rangeEnd: payload.endDate || isoDaysFromNow(30),
+        replaceRange: true
+    });
+    window.dispatchEvent(new CustomEvent("vidfarm:flockposter-cache-updated"));
+}
+function PageRuntimeApp({ boot }) {
+    const store = useMemo(() => createPageRuntimeStore(boot), [boot]);
+    const title = useStore(store, (state) => state.boot.title);
+    const [chatRoot, setChatRoot] = useState(null);
+    useEffect(() => {
+        store.getState().setHydratedAt(new Date().toISOString());
+        document.documentElement.dataset.reactRuntime = "true";
+        document.documentElement.dataset.reactRuntimePage = boot.pageKind;
+        document.title = title;
+    }, [boot.pageKind, store, title]);
+    useEffect(() => {
+        if (!boot.editorChat) {
+            return;
+        }
+        const nextRoot = document.querySelector("[data-template-editor-chat-root]");
+        setChatRoot(nextRoot instanceof HTMLElement ? nextRoot : null);
+    }, [boot.editorChat]);
+    return boot.editorChat && chatRoot
+        ? createPortal(_jsx(TemplateEditorChat, { boot: boot.editorChat }), chatRoot)
+        : null;
+}
+const boot = readBoot();
+const rootElement = document.getElementById("page-runtime-root");
+const flockPosterCacheStore = createFlockPosterCacheStore(boot?.userId ?? null);
+let flockPosterHydrationPromise = null;
+function ensureFlockPosterCacheHydrated(options = {}) {
+    if (!options.force && flockPosterHydrationPromise) {
+        return flockPosterHydrationPromise;
+    }
+    flockPosterHydrationPromise = hydrateFlockPosterCacheAtStartup({
+        userId: boot?.userId ?? null,
+        store: flockPosterCacheStore,
+        force: options.force
+    }).catch(() => { });
+    return flockPosterHydrationPromise;
+}
+window.__vidfarmFlockPosterCache = {
+    readSnapshot: () => readFlockPosterCacheSnapshot(boot?.userId ?? null),
+    ensureHydrated: ensureFlockPosterCacheHydrated,
+    setChannelsData: (channels) => {
+        flockPosterCacheStore.getState().setChannelsData(channels);
+        window.dispatchEvent(new CustomEvent("vidfarm:flockposter-cache-updated"));
+    },
+    setCalendarData: (input) => {
+        flockPosterCacheStore.getState().setCalendarData(input);
+        window.dispatchEvent(new CustomEvent("vidfarm:flockposter-cache-updated"));
+    }
+};
+void ensureFlockPosterCacheHydrated();
+if (boot && rootElement) {
+    createRoot(rootElement).render(_jsx(PageRuntimeApp, { boot: boot }));
+}

package/dist/src/frontend/page-runtime-store.js

@@ -0,0 +1,8 @@
+import { createStore } from "zustand/vanilla";
+export function createPageRuntimeStore(boot) {
+    return createStore((set) => ({
+        boot,
+        hydratedAt: null,
+        setHydratedAt: (hydratedAt) => set({ hydratedAt })
+    }));
+}