@remotion/promo-pages 4.0.430 → 4.0.432

package/dist/components/icons/undo.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const UndoIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/undo.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const UndoIcon = (props) => (_jsx("svg", { viewBox: "0 0 512 512", ...props, children: _jsx("path", { fill: "currentcolor", d: "M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z" }) }));

package/dist/components/icons/vercel.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const VercelIcon: React.FC<{
-    readonly style: React.CSSProperties;
-}>;

package/dist/components/icons/vercel.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const VercelIcon = ({ style }) => {
-    return (_jsx("svg", { fill: "currentcolor", viewBox: "0 0 76 65", style: style, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M37.5274 0L75.0548 65H0L37.5274 0Z" }) }));
-};

package/dist/components/icons/waveform.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const Waveform: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/waveform.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Waveform = (props) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M224 96C215.2 96 208 103.2 208 111.1v288C208 408.8 215.2 416 223.1 416C232.8 416 240 408.8 240 400V111.1C240 103.2 232.8 96 224 96zM128 192C119.2 192 112 199.2 112 207.1V304C112 312.8 119.2 320 127.1 320S144 312.8 144 304V207.1C144 199.2 136.8 192 128 192zM32 224C23.2 224 16 231.2 16 239.1V272C16 280.8 23.2 288 31.1 288S48 280.8 48 272V239.1C48 231.2 40.8 224 32 224zM416 128C407.2 128 400 135.2 400 143.1v224C400 376.8 407.2 384 415.1 384S432 376.8 432 368V143.1C432 135.2 424.8 128 416 128zM608 224c-8.8 0-16 7.2-16 15.1V272C592 280.8 599.2 288 608 288s16-7.2 16-15.1V239.1C624 231.2 616.8 224 608 224zM512 64c-8.8 0-16 7.2-16 15.1V432C496 440.8 503.2 448 511.1 448C520.8 448 528 440.8 528 432V79.1C528 71.2 520.8 64 512 64zM320 0C311.2 0 304 7.2 304 15.1V496C304 504.8 311.2 512 319.1 512S336 504.8 336 496V15.1C336 7.2 328.8 0 320 0z" }) }));
-};

package/dist/components/prompts/CardLikeButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CardLikeButton: React.FC<{
-    readonly submissionId: string;
-    readonly initialLikeCount: number;
-}>;

package/dist/components/prompts/CardLikeButton.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heart } from '@remotion/shapes';
-import { useCallback, useEffect, useState } from 'react';
-import { REMOTION_PRO_ORIGIN } from './config';
-import { formatLikeCount, getLikedIds, removeLikedId, saveLikedId, } from './prompt-helpers';
-import { useHeartAnimation } from './use-heart-animation';
-export const CardLikeButton = ({ submissionId, initialLikeCount }) => {
-    const [liked, setLiked] = useState(false);
-    const [likeCount, setLikeCount] = useState(initialLikeCount);
-    const { scale, roundness, animate } = useHeartAnimation();
-    useEffect(() => {
-        setLiked(getLikedIds().has(submissionId));
-    }, [submissionId]);
-    const onClick = useCallback(async (e) => {
-        e.preventDefault();
-        if (liked) {
-            setLiked(false);
-            setLikeCount((c) => c - 1);
-            removeLikedId(submissionId);
-            try {
-                await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/unlike`, {
-                    method: 'POST',
-                    headers: { 'content-type': 'application/json' },
-                    body: JSON.stringify({ submissionId }),
-                });
-            }
-            catch (_a) {
-                // Optimistic
-            }
-        }
-        else {
-            animate();
-            setLiked(true);
-            setLikeCount((c) => c + 1);
-            saveLikedId(submissionId);
-            try {
-                await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/like`, {
-                    method: 'POST',
-                    headers: { 'content-type': 'application/json' },
-                    body: JSON.stringify({ submissionId }),
-                });
-            }
-            catch (_b) {
-                // Optimistic
-            }
-        }
-    }, [liked, submissionId, animate]);
-    return (_jsxs("button", { onClick: onClick, className: "flex items-center bg-transparent border-none cursor-pointer p-0", type: "button", children: [_jsx(Heart, { height: 16, fill: liked ? 'var(--color-brand)' : 'none', stroke: liked ? 'var(--color-brand)' : 'var(--text-color)', strokeWidth: 2, bottomRoundnessAdjustment: roundness, style: { transform: `scale(${scale})`, marginTop: 2 } }), _jsx("span", { className: "font-brand font-medium data-[liked=true]:text-brand data-[liked=false]:text-text", "data-liked": liked, style: { marginLeft: 8, flex: 1 }, children: formatLikeCount(likeCount) })] }));
-};

package/dist/components/prompts/ClipboardIcon.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const ClipboardIcon: React.FC<{
-    readonly size?: number;
-    readonly color?: string;
-}>;

package/dist/components/prompts/ClipboardIcon.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ClipboardIcon = ({ size = 16, color = 'currentColor' }) => {
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 448 512", fill: color, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M193.8 57.5c4.5-33.1 42.1-29 51 2 3.1 11.3 4.6 23.4 5.2 36.5l-60.1 0c.8-13.8 2.1-27.5 3.9-38.5zM303.1 32.4c-28.6-78.7-141.6-84.6-168.4-2-1-.1-52.9 .6-53.9 .6-83.2 4.6-88.7 75.4-86.5 143l0 1.5c-.8 85.3-5.3 182.8 8.1 262.5 1.6 36.1 28.4 68.6 66.9 71.6 86.7 9.3 178.9 6.3 266.1 .3 55 3.5 106.6-13.8 106.2-76.2-.7-18.9-.6-35.3 1-47.3 5.8-92.7 3.3-165.2-.5-267.9-1.7-46.5-39.3-83.6-85.8-84.8l-53.2-1.3zm10.9 64.3c20.6 2.3 62.6-7.6 64.1 24.2 3.8 102.5 6.2 171.9 .7 260.5-3.9 17.9 2 43.3-3.2 61.1-10.9 4.9-24.9 1.6-38.4 3.2-87.3 5.5-171.5 9.8-262.7 0-3.3-.3-7.2-3.2-7.7-8.6-13.6-84.2-9.3-175.1-8.5-260.2 5-25.2-12.6-79.3 23.2-82l44.4-.5c-2.6 27.2-4.4 64.6 31.1 65.5l125.3 0c34.4-.6 33.8-37 31.7-63.3z" }) }));
-};

package/dist/components/prompts/CopyPromptButton.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const CopyPromptButton: React.FC<{
-    readonly prompt: string;
-}>;

package/dist/components/prompts/CopyPromptButton.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@remotion/design';
-import { useCallback, useState } from 'react';
-import { ClipboardIcon } from './ClipboardIcon';
-export const CopyPromptButton = ({ prompt }) => {
-    const [copied, setCopied] = useState(false);
-    const onCopy = useCallback(() => {
-        navigator.clipboard.writeText(prompt);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    }, [prompt]);
-    return (_jsx(Button, { className: "font-brand rounded-full flex items-center ", onClick: onCopy, style: { width: 160 }, depth: 0.6, children: _jsxs("div", { className: "flex items-center flex-row flex-1 w-[130px]", children: [_jsx(ClipboardIcon, { size: 20 }), _jsx("div", { className: "w-2" }), _jsx("div", { style: { fontSize: 14, flex: 1, textAlign: 'center' }, children: copied ? 'Copied prompt!' : 'Copy prompt' })] }) }));
-};

package/dist/components/prompts/LikeButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const LikeButton: React.FC<{
-    readonly submissionId: string;
-    readonly initialLikeCount: number;
-}>;

package/dist/components/prompts/LikeButton.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@remotion/design';
-import { Heart } from '@remotion/shapes';
-import { useCallback, useEffect, useState } from 'react';
-import { REMOTION_PRO_ORIGIN } from './config';
-import { formatLikeCount, getLikedIds, removeLikedId, saveLikedId, } from './prompt-helpers';
-import { useHeartAnimation } from './use-heart-animation';
-export const LikeButton = ({ submissionId, initialLikeCount }) => {
-    const [liked, setLiked] = useState(false);
-    const [likeCount, setLikeCount] = useState(initialLikeCount);
-    const { scale, roundness, animate } = useHeartAnimation();
-    useEffect(() => {
-        setLiked(getLikedIds().has(submissionId));
-    }, [submissionId]);
-    const onClick = useCallback(async () => {
-        if (liked) {
-            setLiked(false);
-            setLikeCount((c) => c - 1);
-            removeLikedId(submissionId);
-            try {
-                await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/unlike`, {
-                    method: 'POST',
-                    headers: { 'content-type': 'application/json' },
-                    body: JSON.stringify({ submissionId }),
-                });
-            }
-            catch (_a) {
-                // Optimistic
-            }
-        }
-        else {
-            animate();
-            setLiked(true);
-            setLikeCount((c) => c + 1);
-            saveLikedId(submissionId);
-            try {
-                await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/like`, {
-                    method: 'POST',
-                    headers: { 'content-type': 'application/json' },
-                    body: JSON.stringify({ submissionId }),
-                });
-            }
-            catch (_b) {
-                // Optimistic
-            }
-        }
-    }, [liked, submissionId, animate]);
-    return (_jsx(Button, { className: `font-brand rounded-full flex items-center ${liked ? 'bg-brand text-white' : ''}`, onClick: onClick, style: { width: 90 }, children: _jsxs("div", { className: "flex items-center flex-row flex-1 w-[40px] justify-center", children: [_jsx(Heart, { height: 14, fill: liked ? 'white' : 'none', stroke: liked ? 'white' : 'var(--text-color)', strokeWidth: 2, bottomRoundnessAdjustment: roundness, style: { transform: `scale(${scale})` } }), _jsx("span", { style: { fontSize: 15, marginLeft: 10 }, children: formatLikeCount(likeCount) })] }) }));
-};

package/dist/components/prompts/MuxPlayer.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import '@vidstack/react/player/styles/default/layouts/video.css';
-import '@vidstack/react/player/styles/default/theme.css';
-export declare const MuxPlayer: React.FC<{
-    readonly playbackId: string;
-    readonly title?: string;
-    readonly rounded?: boolean;
-}>;

package/dist/components/prompts/MuxPlayer.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isHLSProvider, MediaPlayer, MediaProvider, } from '@vidstack/react';
-import { defaultLayoutIcons, DefaultVideoLayout, } from '@vidstack/react/player/layouts/default';
-import { useCallback } from 'react';
-import '@vidstack/react/player/styles/default/layouts/video.css';
-import '@vidstack/react/player/styles/default/theme.css';
-export const MuxPlayer = ({ playbackId, title, rounded = true }) => {
-    const onProviderChange = useCallback((provider, _e) => {
-        if (isHLSProvider(provider)) {
-            // @ts-expect-error - hls.js is not typed
-            provider.library = () => import('hls.js');
-        }
-    }, []);
-    return (_jsxs(MediaPlayer, { src: `https://stream.mux.com/${playbackId}.m3u8`, crossOrigin: true, playsInline: true, autoPlay: true, muted: true, title: title, className: `w-full aspect-video bg-black overflow-hidden ${rounded ? 'rounded' : ''}`, onProviderChange: onProviderChange, children: [_jsx(MediaProvider, {}), _jsx(DefaultVideoLayout, { icons: defaultLayoutIcons, slots: {
-                    captionButton: null,
-                    pipButton: null,
-                    airPlayButton: null,
-                    googleCastButton: null,
-                    settingsMenu: null,
-                } })] }));
-};

package/dist/components/prompts/NewBackButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const NewBackButton: React.FC<{
-    readonly text: string;
-    readonly link: string;
-}>;

package/dist/components/prompts/NewBackButton.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@remotion/design';
-export const NewBackButton = ({ text, link }) => {
-    return (_jsx("div", { className: "justify-center items-center font-medium mb-4 block text-text", style: {
-            fontFamily: 'GTPlanar',
-            fontWeight: 500,
-        }, children: _jsx(Button, { href: link, className: "px-8 rounded-full text-sm h-10", children: _jsxs("div", { className: "flex row items-center justify-start font-normal", children: [_jsx("svg", { className: "h-4 mr-[8px] inline-block text-text", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentcolor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }) }), text] }) }) }));
-};

package/dist/components/prompts/Page.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const pageRef: React.RefObject<HTMLDivElement | null>;
-export declare const Page: React.FC<{
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly onDrop?: React.DragEventHandler<HTMLDivElement>;
-    readonly onDragOver?: React.DragEventHandler<HTMLDivElement>;
-}>;

package/dist/components/prompts/Page.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import React from 'react';
-export const pageRef = React.createRef();
-export const Page = ({ children, className, onDrop, onDragOver }) => {
-    return (_jsx("div", { ref: pageRef, onDrop: onDrop, onDragOver: onDragOver, className: clsx('overflow-y-auto w-full bg-[var(--background)] min-h-screen', className), children: children }));
-};

package/dist/components/prompts/PromptsGallery.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { PromptSubmission } from './prompt-types';
-export declare const PromptsGalleryPage: React.FC<{
-    readonly promptSubmissions: PromptSubmission[];
-    readonly currentPage: number;
-    readonly totalPages: number;
-}>;

package/dist/components/prompts/PromptsGallery.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Card } from '@remotion/design';
-import { useEffect, useRef, useState } from 'react';
-import { CardLikeButton } from './CardLikeButton';
-import { Page } from './Page';
-import { getAuthorName, getAvatarUrl } from './prompt-helpers';
-const PromptSubmissionCard = ({ promptSubmission }) => {
-    const [hovered, setHovered] = useState(false);
-    const [inView, setInView] = useState(false);
-    const cardRef = useRef(null);
-    const avatarUrl = getAvatarUrl(promptSubmission);
-    useEffect(() => {
-        const el = cardRef.current;
-        if (!el)
-            return;
-        const observer = new IntersectionObserver(([entry]) => {
-            setInView(entry.isIntersecting);
-        }, { rootMargin: '-30% 0px -30% 0px' });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, []);
-    const isTouchDevice = typeof window !== 'undefined' && window.matchMedia('(hover: none)').matches;
-    const showGif = hovered || (isTouchDevice && inView);
-    return (_jsx("a", { ref: cardRef, href: `/prompts/${promptSubmission.slug}`, className: "block no-underline hover:no-underline", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: _jsxs(Card, { className: "overflow-hidden hover:shadow-md transition-shadow", children: [_jsx("div", { className: "w-full aspect-video bg-black flex items-center justify-center overflow-hidden", children: _jsx("img", { src: showGif
-                            ? `https://image.mux.com/${promptSubmission.muxPlaybackId}/animated.gif?height=225&fit_mode=smartcrop`
-                            : `https://image.mux.com/${promptSubmission.muxPlaybackId}/thumbnail.png?width=400&height=225&fit_mode=smartcrop`, className: showGif ? 'h-full' : 'w-full h-full object-cover', alt: promptSubmission.title }) }), _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "font-brand font-bold text-lg truncate", children: promptSubmission.title }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [avatarUrl && (_jsx("img", { src: avatarUrl, width: 20, height: 20, className: "rounded-full", alt: `${getAuthorName(promptSubmission)}'s avatar` })), _jsx("span", { className: "text-sm font-brand text-text", children: getAuthorName(promptSubmission) })] }), _jsx(CardLikeButton, { submissionId: promptSubmission.id, initialLikeCount: promptSubmission.likeCount })] })] })] }) }));
-};
-const Pagination = ({ currentPage, totalPages }) => {
-    if (totalPages <= 1) {
-        return null;
-    }
-    const getPageUrl = (page) => {
-        return page === 1 ? '/prompts' : `/prompts/${page}`;
-    };
-    const getVisiblePages = () => {
-        const pages = [];
-        pages.push(1);
-        if (currentPage > 3) {
-            pages.push('ellipsis-start');
-        }
-        for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
-            if (!pages.includes(i)) {
-                pages.push(i);
-            }
-        }
-        if (currentPage < totalPages - 2) {
-            pages.push('ellipsis-end');
-        }
-        if (totalPages > 1 && !pages.includes(totalPages)) {
-            pages.push(totalPages);
-        }
-        return pages;
-    };
-    return (_jsxs("div", { className: "flex items-center justify-center gap-4 mt-12 font-brand text-sm", children: [currentPage > 1 ? (_jsx("a", { href: getPageUrl(currentPage - 1), className: "text-muted-foreground hover:text-text no-underline hover:no-underline", children: "\u2190 Previous" })) : (_jsx("span", { className: "text-gray-300 cursor-not-allowed", children: "\u2190 Previous" })), _jsx("span", { className: "flex items-center gap-1", children: getVisiblePages().map((page) => typeof page === 'string' ? (_jsx("span", { className: "px-1 text-muted-foreground", children: "..." }, page)) : (_jsx("a", { href: getPageUrl(page), style: { fontFeatureSettings: "'ss03' on" }, className: `px-2 py-1 no-underline hover:no-underline ${page === currentPage
-                        ? 'text-text font-bold'
-                        : 'text-muted-foreground hover:text-text'}`, children: page }, page))) }), currentPage < totalPages ? (_jsx("a", { href: getPageUrl(currentPage + 1), className: "text-muted-foreground hover:text-text no-underline hover:no-underline", children: "Next \u2192" })) : (_jsx("span", { className: "text-gray-300 cursor-not-allowed", children: "Next \u2192" }))] }));
-};
-export const PromptsGalleryPage = ({ promptSubmissions, currentPage, totalPages }) => {
-    return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Create a video with just a prompt" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["With", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ", you can create videos simply by giving a prompt to your coding agent, whether it's Claude Code, Codex, or OpenCode. Browse the gallery for inspiration!"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { href: "/docs/ai/claude-code", className: "font-brand rounded-full bg-[#D97757] flex items-center text-white", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 149 149", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginRight: 8 }, children: _jsx("path", { d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z", fill: "#fff" }) }), _jsx("div", { className: "text-sm", children: "Create your own video" })] }), _jsx(Button, { href: "/prompts/submit", className: "font-brand rounded-full text-sm", children: "Submit a prompt" })] }), _jsx("div", { className: "h-12" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: promptSubmissions.map((p) => (_jsx(PromptSubmissionCard, { promptSubmission: p }, p.id))) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages })] }) }));
-};

package/dist/components/prompts/PromptsShow.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { PromptSubmission } from './prompt-types';
-export declare const PromptsShowPage: React.FC<{
-    readonly promptSubmission: PromptSubmission;
-}>;

package/dist/components/prompts/PromptsShow.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CopyPromptButton } from './CopyPromptButton';
-import { LikeButton } from './LikeButton';
-import { MuxPlayer } from './MuxPlayer';
-import { NewBackButton } from './NewBackButton';
-import { Page } from './Page';
-import { getAuthorName, getAvatarUrl, getRelativeTime } from './prompt-helpers';
-export const PromptsShowPage = ({ promptSubmission }) => {
-    const avatarUrl = getAvatarUrl(promptSubmission);
-    const authorName = getAuthorName(promptSubmission);
-    const authorLink = promptSubmission.githubUsername
-        ? `https://github.com/${promptSubmission.githubUsername}`
-        : promptSubmission.xUsername
-            ? `https://x.com/${promptSubmission.xUsername}`
-            : null;
-    return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[800px] w-full px-4 py-12", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("div", { className: "h-1" }), _jsx("h1", { className: "text-2xl font-brand font-black", children: promptSubmission.title }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3 mt-4 mb-4", children: [avatarUrl && (_jsx("img", { src: avatarUrl, width: 32, height: 32, className: "rounded-full", alt: authorName ? `${authorName}'s avatar` : 'Author avatar' })), _jsxs("div", { children: [_jsxs("div", { className: "text-sm font-brand", children: ["Prompted by", ' ', authorLink ? (_jsx("a", { href: authorLink, target: "_blank", rel: "noopener noreferrer", className: "font-medium hover:underline", children: authorName })) : (_jsx("span", { className: "font-medium", children: authorName }))] }), _jsx("div", { className: "text-xs text-muted-foreground font-brand", title: new Date(promptSubmission.createdAt).toLocaleString(), children: getRelativeTime(promptSubmission.createdAt) })] })] }), _jsxs("div", { children: [_jsx(MuxPlayer, { playbackId: promptSubmission.muxPlaybackId, title: promptSubmission.title, rounded: false }), promptSubmission.toolUsed && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-brand font-bold mt-6 mb-2", children: "Tool used" }), _jsx("p", { className: "text-sm font-brand", children: promptSubmission.toolUsed })] })), promptSubmission.modelUsed && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-brand font-bold mt-6 mb-2", children: "Model used" }), _jsx("p", { className: "text-sm font-brand", children: promptSubmission.modelUsed })] })), _jsx("h2", { className: "font-brand font-bold mt-6 mb-2", children: "Prompt" }), _jsx("pre", { className: "whitespace-pre-wrap text-sm rounded p-4 text-white", style: { backgroundColor: '#272A36' }, children: promptSubmission.prompt }), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx(LikeButton, { submissionId: promptSubmission.id, initialLikeCount: promptSubmission.likeCount }), _jsx(CopyPromptButton, { prompt: promptSubmission.prompt })] })] })] })] }) }));
-};

package/dist/components/prompts/PromptsSubmit.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const PromptsSubmitPage: React.FC;

package/dist/components/prompts/PromptsSubmit.js

@@ -1,173 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Input, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from '@remotion/design';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { REMOTION_PRO_ORIGIN } from './config';
-import { MuxPlayer } from './MuxPlayer';
-import { NewBackButton } from './NewBackButton';
-import { Page } from './Page';
-export const PromptsSubmitPage = () => {
-    const [title, setTitle] = useState('');
-    const [prompt, setPrompt] = useState('');
-    const [toolUsed, setToolUsed] = useState('');
-    const [modelUsed, setModelUsed] = useState('');
-    const [usernameType, setUsernameType] = useState('github');
-    const [username, setUsername] = useState('');
-    const [uploadState, setUploadState] = useState({ type: 'idle' });
-    const [submitStatus, setSubmitStatus] = useState({
-        type: 'idle',
-    });
-    const [isDragging, setIsDragging] = useState(false);
-    const pollRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            if (pollRef.current)
-                clearInterval(pollRef.current);
-        };
-    }, []);
-    const fileInputRef = useRef(null);
-    const startUpload = useCallback(async (file) => {
-        setUploadState({ type: 'uploading', progress: 0 });
-        try {
-            const res = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/upload`, {
-                method: 'POST',
-                headers: { 'content-type': 'application/json' },
-            });
-            const { id, url } = await res.json();
-            const { createUpload } = await import('@mux/upchunk');
-            const upload = createUpload({ endpoint: url, file });
-            upload.on('progress', (p) => {
-                setUploadState({ type: 'uploading', progress: p.detail });
-            });
-            upload.on('success', () => {
-                setUploadState({ type: 'processing' });
-                pollRef.current = setInterval(async () => {
-                    try {
-                        const statusRes = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/upload/${id}`);
-                        if (!statusRes.ok) {
-                            throw new Error(`Failed to fetch upload status: ${statusRes.status}`);
-                        }
-                        const data = await statusRes.json();
-                        if (data.status === 'asset_created' &&
-                            data.playback_id &&
-                            data.asset_status === 'ready') {
-                            if (pollRef.current)
-                                clearInterval(pollRef.current);
-                            setUploadState({
-                                type: 'ready',
-                                muxAssetId: data.asset_id,
-                                muxPlaybackId: data.playback_id,
-                            });
-                        }
-                    }
-                    catch (error) {
-                        // eslint-disable-next-line no-console
-                        console.error('Error while polling upload status', error);
-                    }
-                }, 2000);
-            });
-            upload.on('error', (err) => {
-                setUploadState({
-                    type: 'error',
-                    message: err.detail.message,
-                });
-            });
-        }
-        catch (err) {
-            setUploadState({
-                type: 'error',
-                message: err instanceof Error ? err.message : 'Upload failed',
-            });
-        }
-    }, []);
-    const onFileSelect = useCallback((e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return;
-        startUpload(file);
-    }, [startUpload]);
-    const onDrop = useCallback((e) => {
-        var _a, _b;
-        e.preventDefault();
-        setIsDragging(false);
-        if (uploadState.type !== 'idle')
-            return;
-        const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
-        if (!file)
-            return;
-        if (!file.type.startsWith('video/'))
-            return;
-        startUpload(file);
-    }, [startUpload, uploadState.type]);
-    const onDragOver = useCallback((e) => {
-        e.preventDefault();
-    }, []);
-    const onDragEnter = useCallback(() => {
-        if (uploadState.type === 'idle') {
-            setIsDragging(true);
-        }
-    }, [uploadState.type]);
-    const onDragLeave = useCallback((e) => {
-        if (e.currentTarget === e.target) {
-            setIsDragging(false);
-        }
-    }, []);
-    const submitPossible = title.length > 0 &&
-        title.length <= 80 &&
-        prompt.length > 0 &&
-        usernameType &&
-        username.length > 0 &&
-        uploadState.type === 'ready' &&
-        (submitStatus.type === 'idle' || submitStatus.type === 'error');
-    const submit = useCallback(async () => {
-        if (!submitPossible || uploadState.type !== 'ready')
-            return;
-        setSubmitStatus({ type: 'submitting' });
-        try {
-            const res = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/submit`, {
-                method: 'POST',
-                headers: { 'content-type': 'application/json' },
-                body: JSON.stringify({
-                    muxAssetId: uploadState.muxAssetId,
-                    muxPlaybackId: uploadState.muxPlaybackId,
-                    title,
-                    prompt,
-                    toolUsed: toolUsed || undefined,
-                    modelUsed: modelUsed || undefined,
-                    githubUsername: usernameType === 'github' ? username : undefined,
-                    xUsername: usernameType === 'x' ? username : undefined,
-                }),
-            });
-            if (!res.ok) {
-                const submissionData = await res.json();
-                throw new Error(submissionData.error || 'Submission failed');
-            }
-            const data = await res.json();
-            setSubmitStatus({ type: 'done', slug: data.slug });
-        }
-        catch (err) {
-            setSubmitStatus({ type: 'error', err: err });
-        }
-    }, [
-        submitPossible,
-        uploadState,
-        title,
-        prompt,
-        usernameType,
-        username,
-        toolUsed,
-        modelUsed,
-    ]);
-    if (submitStatus.type === 'done') {
-        return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 mt-12 pt-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Submission received!" }), _jsxs("div", { className: "mt-4 text-muted-foreground font-brand", children: ["Thanks for submitting your prompt! Your prompt submission is pending review.", _jsx("br", {}), " Once approved, it will appear on the", ' ', _jsx("a", { href: "/prompts", className: "underline", children: "prompts gallery" }), "."] }), _jsx("div", { className: "mt-4 text-muted-foreground font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx(Button, { onClick: () => {
-                                window.location.href = '/prompts';
-                            }, className: "font-brand rounded-full mt-4", children: "Back to gallery" })] }) }) }));
-    }
-    return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 pt-8", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("h1", { className: "text-3xl font-brand font-black", children: "Submit a prompt" }), _jsxs("p", { className: "text-muted-foreground text-sm font-brand", children: ["Submit a prompt to be featured in the", ' ', _jsx("a", { href: "/prompts", className: "underline hover:text-text underline-offset-4", children: "prompt gallery." })] }), _jsx("p", { className: "text-muted-foreground text-sm font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Title *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "A short title for your prompt (max 80 characters)." }), _jsx(Input, { name: "title", placeholder: "Newspaper highlighting animation", className: "font-brand mt-3", value: title, maxLength: 80, onChange: (e) => setTitle(e.target.value) }), _jsxs("p", { className: "text-muted-foreground text-xs mt-1 mb-0 font-brand", children: [title.length, "/80"] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Video *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Upload a video showing the result of your prompt." }), _jsx("input", { ref: fileInputRef, type: "file", accept: "video/*", onChange: onFileSelect, className: "hidden" }), _jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragEnter, onDragLeave: onDragLeave, className: `flex flex-col items-center py-12 mt-3 rounded-lg border-2 border-dashed transition-colors ${isDragging
-                            ? 'border-brand bg-brand/10'
-                            : 'border-muted-foreground/25'}`, children: [uploadState.type === 'idle' &&
-                                (isDragging ? (_jsx("div", { className: "font-brand text-sm text-brand font-medium", children: "Drop your video here" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { className: "font-brand rounded-full", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Choose video file" }), _jsx("div", { className: "font-brand text-sm mt-3 text-muted-foreground", children: "or drag and drop a video file here" })] }))), uploadState.type === 'uploading' && (_jsxs("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: ["Uploading ", Math.round(uploadState.progress), "%"] })), uploadState.type === 'processing' && (_jsx("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: "Processing video..." })), uploadState.type === 'ready' && (_jsxs("div", { className: "w-full flex flex-col items-center px-4 gap-4", children: [_jsx(MuxPlayer, { playbackId: uploadState.muxPlaybackId, title: title || 'Preview' }), _jsx("button", { type: "button", className: "font-brand text-sm text-muted-foreground hover:text-foreground transition-colors", onClick: () => setUploadState({ type: 'idle' }), children: "Remove video" })] })), uploadState.type === 'error' && (_jsx("div", { className: "text-red-500 font-brand font-medium text-sm", children: uploadState.message }))] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Prompt(s) *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "The prompts you used to generate this video. Separate multiple prompts with an empty line." }), _jsx(Textarea, { name: "prompt", className: "font-brand mt-3", placeholder: "Enter your full prompt here", value: prompt, onChange: (e) => setPrompt(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Tool used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which tool did you use to generate this video? (e.g. Claude Code, Cursor, Codex)" }), _jsx(Input, { name: "toolUsed", placeholder: "Claude Code", className: "font-brand mt-3", value: toolUsed, onChange: (e) => setToolUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Model used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which AI model did you use? (e.g. Opus 4.5, GPT-5.2)" }), _jsx(Input, { name: "modelUsed", placeholder: "Opus 4.5", className: "font-brand mt-3", value: modelUsed, onChange: (e) => setModelUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "How should we credit you? *" }), _jsxs(Tabs, { defaultValue: "github", className: "mt-3", onValueChange: (value) => {
-                            setUsernameType(value);
-                            setUsername('');
-                        }, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "github", children: "GitHub" }), _jsx(TabsTrigger, { value: "x", children: "X (Twitter)" })] }), _jsx(TabsContent, { value: "github", children: _jsx(Input, { name: "username", className: "font-brand", placeholder: "Your GitHub username", value: usernameType === 'github' ? username : '', onChange: (e) => setUsername(e.target.value) }) }), _jsx(TabsContent, { value: "x", children: _jsx(Input, { name: "username", className: "font-brand", placeholder: "Your X username (without @)", value: usernameType === 'x' ? username : '', onChange: (e) => setUsername(e.target.value) }) })] }), _jsx("div", { className: "h-8" }), _jsx(Button, { onClick: submit, disabled: !submitPossible, type: "submit", className: "font-brand rounded-full w-full bg-brand text-white", children: "Submit" }), submitStatus.type === 'error' && (_jsxs("p", { className: "text-red-500 mt-4 text-sm font-brand", children: ["An error occurred: ", submitStatus.err.message] }))] }) }) }));
-};

package/dist/components/prompts/config.d.ts

@@ -1 +0,0 @@
-export declare const REMOTION_PRO_ORIGIN = "https://www.remotion.pro";

package/dist/components/prompts/config.js

@@ -1 +0,0 @@
-export const REMOTION_PRO_ORIGIN = 'https://www.remotion.pro';

package/dist/components/prompts/prompt-helpers.d.ts

@@ -1,8 +0,0 @@
-import type { PromptSubmission } from './prompt-types';
-export declare const formatLikeCount: (n: number) => string;
-export declare const getLikedIds: () => Set<string>;
-export declare const saveLikedId: (id: string) => void;
-export declare const removeLikedId: (id: string) => void;
-export declare const getAvatarUrl: (s: PromptSubmission) => string | null;
-export declare const getAuthorName: (s: PromptSubmission) => string;
-export declare const getRelativeTime: (dateStr: string) => string;