@mevdragon/vidfarm-devcli 0.7.0 → 0.7.1

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

@@ -425,6 +425,8 @@ function PreviewModal(input) {
 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);
@@ -445,13 +447,17 @@ function AddTemplateModal(input) {
     }, [onClose]);
     const handleSubmit = async () => {
         const trimmedUrl = sourceUrl.trim();
-        if (!trimmedUrl) {
-            setError("Paste a TikTok, YouTube, Twitter/X, or Instagram video URL.");
+        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: trimmedUrl, tagline: tagline.trim(), notes: notes.trim() })
+        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) {
@@ -464,7 +470,14 @@ function AddTemplateModal(input) {
     return (_jsx("div", { className: "discover-media-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "discover-media-modal discover-add-template-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "discover-add-template-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "discover-media-modal-head", children: [_jsx("h2", { id: "discover-add-template-title", children: "Add Template" }), _jsx("div", { className: "discover-media-modal-actions", children: _jsx("button", { className: "discover-media-modal-action", type: "button", "aria-label": "Close", title: "Close", onClick: onClose, children: _jsx(CloseIcon, {}) }) })] }), _jsxs("form", { className: "discover-add-template-form", onSubmit: (event) => {
                         event.preventDefault();
                         void handleSubmit();
-                    }, children: [_jsx("p", { className: "discover-add-template-hint", children: "Paste a link to a TikTok, YouTube, Twitter/X, or Instagram video. We download it and add it to your Discover feed \u2014 visible only to your account." }), _jsxs("div", { className: "discover-add-template-field", children: [_jsx("label", { className: "label", htmlFor: "add-template-url", children: "Video URL" }), _jsx("input", { id: "add-template-url", type: "url", required: true, placeholder: "https://www.tiktok.com/@creator/video/\u2026", autoComplete: "off", value: sourceUrl, onChange: (event) => setSourceUrl(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-tagline", children: ["Tagline ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("input", { id: "add-template-tagline", type: "text", placeholder: "What makes this video work?", autoComplete: "off", maxLength: 140, value: tagline, onChange: (event) => setTagline(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-notes", children: ["Notes ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("textarea", { id: "add-template-notes", rows: 4, placeholder: "Ideas for how you want to remix this\u2026", maxLength: 2000, value: notes, onChange: (event) => setNotes(event.target.value) })] }), error ? _jsx("p", { className: "discover-add-template-error", role: "alert", children: error }) : null, _jsxs("div", { className: "toolbar discover-add-template-actions", children: [_jsx("button", { type: "button", className: "secondary", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx("button", { type: "submit", className: "cta-button discover-add-template-submit", disabled: submitting, children: submitting ? "Adding…" : "Add Template" })] })] })] }) }));
+                    }, 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" })] })] })] }) }));
 }
 export function HomepageShell(input) {
     const showEmpty = !input.loading && !input.error && input.templates.length > 0 && input.visibleTemplates.length === 0;

package/dist/src/homepage.js

@@ -205,6 +205,52 @@ export function renderHomepage(input) {
         letter-spacing: normal;
       }
 
+      .discover-add-template-field input[type="file"] {
+        padding: 8px 10px;
+        cursor: pointer;
+      }
+
+      .discover-add-template-file-chip {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        border: 1px solid rgba(209, 219, 233, 0.96);
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.94);
+        color: #2d3748;
+        font-size: 0.94rem;
+      }
+
+      .discover-add-template-file-name {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .discover-add-template-file-size {
+        color: #9aa6ba;
+        font-size: 0.86rem;
+        white-space: nowrap;
+      }
+
+      .discover-add-template-file-clear {
+        border: none;
+        background: none;
+        color: #6a7890;
+        font-size: 0.9rem;
+        cursor: pointer;
+        padding: 2px 6px;
+        border-radius: 8px;
+      }
+
+      .discover-add-template-file-clear:hover {
+        background: rgba(209, 219, 233, 0.5);
+        color: #2d3748;
+      }
+
       .discover-add-template-error {
         margin: 0;
         color: #a14444;

package/dist/src/hyperframes/composition.js

@@ -1,3 +1,80 @@
+export const KEN_BURNS_PRESETS = [
+    "zoom-in",
+    "zoom-out",
+    "pan-left",
+    "pan-right",
+    "pan-up",
+    "pan-down",
+    "zoom-in-left",
+    "zoom-in-right"
+];
+// Ken Burns is stored declaratively: the still-image layer element (the <img>
+// that carries data-start) also carries data-kenburns="<preset>" plus optional
+// inline vars (--vf-kb-amount / --vf-kb-origin / --vf-kb-dur). The animation
+// runs directly on that <img> via CSS transform, so the ONE element that owns
+// the timeline (data-start/duration) is also the one that animates — which is
+// exactly what the render's per-frame CSS-animation adapter keys off (it seeks
+// each animation by time-minus-that-element's-data-start). No wrapper, so every
+// existing "image layer is an <img>" invariant in the editor and timeline holds.
+// This static stylesheet supplies the keyframes; any surface that toggles the
+// attribute (builder, editor, chat agent, devcli) gets identical motion in the
+// preview runtime and both render pipelines. The marker comment is the
+// idempotency key for serve/publish-time injection into stored HTML.
+export const KEN_BURNS_STYLE_MARKER = "__VF_KENBURNS_V1__";
+export const KEN_BURNS_CSS = `/*${KEN_BURNS_STYLE_MARKER}*/
+@keyframes vf-kb-zoom-in { from { transform: translate(0%, 0%) scale(1); } to { transform: translate(0%, 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-zoom-out { from { transform: translate(0%, 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(0%, 0%) scale(1); } }
+@keyframes vf-kb-pan-left { from { transform: translate(calc(var(--vf-kb-amount, 0.18) * 45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * -45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-pan-right { from { transform: translate(calc(var(--vf-kb-amount, 0.18) * -45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * 45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-pan-up { from { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * 45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * -45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-pan-down { from { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * -45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * 45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-zoom-in-left { from { transform: translate(0%, 0%) scale(1); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * -45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-zoom-in-right { from { transform: translate(0%, 0%) scale(1); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * 45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+[data-kenburns] {
+  transform-origin: var(--vf-kb-origin, 50% 50%);
+  animation-duration: var(--vf-kb-dur, 5s);
+  animation-timing-function: var(--vf-kb-ease, linear);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  will-change: transform;
+  backface-visibility: hidden;
+}
+[data-kenburns="zoom-in"] { animation-name: vf-kb-zoom-in; }
+[data-kenburns="zoom-out"] { animation-name: vf-kb-zoom-out; }
+[data-kenburns="pan-left"] { animation-name: vf-kb-pan-left; }
+[data-kenburns="pan-right"] { animation-name: vf-kb-pan-right; }
+[data-kenburns="pan-up"] { animation-name: vf-kb-pan-up; }
+[data-kenburns="pan-down"] { animation-name: vf-kb-pan-down; }
+[data-kenburns="zoom-in-left"] { animation-name: vf-kb-zoom-in-left; }
+[data-kenburns="zoom-in-right"] { animation-name: vf-kb-zoom-in-right; }
+`;
+// Serializes a Ken Burns config into the inline CSS custom properties the
+// stylesheet reads. Kept next to the CSS so presets and vars never drift.
+export function kenBurnsInlineVars(kenBurns, durationSeconds) {
+    const vars = [];
+    if (durationSeconds !== undefined && Number.isFinite(durationSeconds) && durationSeconds > 0) {
+        vars.push(`--vf-kb-dur:${Number(durationSeconds.toFixed(3))}s`);
+    }
+    if (kenBurns.intensity !== undefined)
+        vars.push(`--vf-kb-amount:${Number(kenBurns.intensity.toFixed(4))}`);
+    if (kenBurns.origin)
+        vars.push(`--vf-kb-origin:${kenBurns.origin}`);
+    return vars.join(";");
+}
+export function normalizeKenBurns(value) {
+    if (!value)
+        return null;
+    const raw = typeof value === "string" ? { preset: value } : value;
+    if (!KEN_BURNS_PRESETS.includes(raw.preset))
+        return null;
+    const intensity = Number(raw.intensity);
+    const origin = typeof raw.origin === "string" && raw.origin.trim() ? raw.origin.trim() : undefined;
+    return {
+        preset: raw.preset,
+        intensity: Number.isFinite(intensity) ? Math.max(0.04, Math.min(0.5, intensity)) : undefined,
+        origin
+    };
+}
 export function buildHyperframeCompositionHtml(input) {
     const duration = positiveNumber(input.duration, inferDuration(input.layers));
     const width = positiveInteger(input.width, 720);
@@ -15,6 +92,7 @@ export function buildHyperframeCompositionHtml(input) {
     html, body { width:100%; height:100%; margin:0; overflow:hidden; background:${background}; }
     [data-composition-id] { position:relative; width:100vw; height:100vh; overflow:hidden; background:${background}; }
     audio { display:none; }
+    ${KEN_BURNS_CSS}
     ${input.css ?? ""}
   </style>
 </head>
@@ -50,6 +128,15 @@ function renderLayer(layer) {
         return `<audio ${attrs} src="${escapeAttr(layer.src || "")}" data-timeline-role="music" data-volume="${num(positiveNumber(layer.volume, 1))}" preload="metadata"></audio>`;
     }
     if (layer.kind === "image") {
+        const kenBurns = normalizeKenBurns(layer.kenBurns);
+        if (kenBurns) {
+            // The animation lives directly on the <img> — the same node that carries
+            // data-start — so the render's CSS adapter seeks it by (frameTime -
+            // data-start) and it plays across exactly the clip's span.
+            const vars = kenBurnsInlineVars(kenBurns, positiveNumber(layer.duration, 0));
+            const kbStyle = vars ? `${style};${vars}` : style;
+            return `<img ${attrs} data-kenburns="${escapeAttr(kenBurns.preset)}" src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(kbStyle)}" />`;
+        }
         return `<img ${attrs} src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(style)}" />`;
     }
     if (layer.kind === "html") {

package/dist/src/primitive-registry.js

@@ -412,6 +412,14 @@ const downloadVideoPayloadSchema = z.preprocess((raw) => {
     quality: z.enum(["best", "hd", "full_hd"]).default("best"),
     save_manifest: z.boolean().default(true)
 }));
+// Ingest of an already-uploaded video file (Add Template → upload). The URL is
+// server-minted (our own storage), so no social-host restrictions apply.
+const ingestVideoPayloadSchema = z.object({
+    source_video_url: z.string().url(),
+    title: z.string().min(1).max(300).optional(),
+    file_name: z.string().min(1).max(300).optional(),
+    save_manifest: z.boolean().default(true)
+});
 const brainstormHooksPayloadSchema = z.preprocess(normalizeOfferDescriptionPayload, z.object({
     offer_description: z.string().min(10).max(12_000),
     count: brainstormCountSchema,
@@ -480,6 +488,7 @@ const PRIMITIVE_VIDEO_GENERATE_ID = "primitive:video_generate";
 const PRIMITIVE_VIDEO_RENDER_SLIDES_ID = "primitive:video_render_slides";
 const PRIMITIVE_VIDEO_NORMALIZE_ID = "primitive:video_normalize";
 const PRIMITIVE_VIDEO_DOWNLOAD_ID = "primitive:video_download";
+const PRIMITIVE_VIDEO_INGEST_ID = "primitive:video_ingest";
 const PRIMITIVE_VIDEO_TRIM_ID = "primitive:video_trim";
 const PRIMITIVE_VIDEO_REMOVE_CAPTIONS_ID = "primitive:video_remove_captions";
 const PRIMITIVE_VIDEO_EXTRACT_AUDIO_ID = "primitive:video_extract_audio";
@@ -1188,6 +1197,132 @@ const videoDownloadPrimitive = definePrimitive({
         }
     }
 });
+// Upload-based sibling of video_download: the source video already sits in our
+// storage (uploaded via the Add Template flow), so there is no social lookup —
+// just mirror it into a durable job artifact, probe duration, and grab a
+// thumbnail frame. Output shape matches video_download so the inspiration
+// finalizer treats both identically.
+const videoIngestPrimitive = definePrimitive({
+    id: PRIMITIVE_VIDEO_INGEST_ID,
+    kind: "video_ingest",
+    operations: {
+        run: {
+            description: "Ingest an uploaded source video file into a durable reusable platform MP4 with probed metadata and a thumbnail.",
+            inputSchema: ingestVideoPayloadSchema,
+            workflow: "run"
+        }
+    },
+    jobs: {
+        async run(ctx, input) {
+            const payload = ingestVideoPayloadSchema.parse(input);
+            const sourceUrl = payload.source_video_url;
+            const sourceHost = safeUrlHost(sourceUrl);
+            ctx.logger.progress(0.12, "Fetching uploaded source video", { sourceUrl, sourceHost });
+            const remoteVideo = await fetchRemoteBinary(sourceUrl, "video/mp4");
+            const contentType = normalizeVideoContentType(remoteVideo.contentType);
+            const extension = videoExtensionForContentType(contentType);
+            const storedVideo = await storePrimitiveVideo(ctx, {
+                key: `source-video.${extension}`,
+                bytes: remoteVideo.bytes,
+                contentType,
+                metadata: {
+                    primitive: "video_ingest",
+                    operation: "ingest-video",
+                    source_url: sourceUrl,
+                    source_host: sourceHost,
+                    file_name: payload.file_name ?? null
+                }
+            });
+            // Best-effort enrichment: a probe past the duration cap or a failed
+            // thumbnail must not sink the ingest — the card still finalizes and the
+            // template can decompose later.
+            let durationSeconds = null;
+            ctx.logger.progress(0.55, "Probing uploaded video metadata");
+            try {
+                const probed = await executePrimitiveMediaOperation(ctx, {
+                    operation: "video_probe",
+                    payload: { source_video_url: storedVideo.url },
+                    outputKey: "probe.json"
+                });
+                const probedDuration = Number(probed.metadata?.durationSeconds);
+                durationSeconds = Number.isFinite(probedDuration) && probedDuration > 0 ? probedDuration : null;
+            }
+            catch (error) {
+                ctx.logger.progress(0.6, "Video probe skipped", {
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            let thumbnailUrl = null;
+            ctx.logger.progress(0.7, "Extracting thumbnail frame");
+            try {
+                const frame = await executePrimitiveMediaOperation(ctx, {
+                    operation: "video_extract_frame",
+                    payload: { source_video_url: storedVideo.url, at_ms: 0, output_format: "jpeg" },
+                    outputKey: "thumbnail.jpg"
+                });
+                thumbnailUrl = frame.publicUrl;
+            }
+            catch (error) {
+                ctx.logger.progress(0.75, "Thumbnail extraction skipped", {
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            const manifest = {
+                primitive: "video_ingest",
+                operation: "ingest-video",
+                sourceUrl,
+                sourceHost,
+                // Caller-chosen title only — never the file name. Untitled ingests
+                // finalize with title null so the template displays as its id.
+                title: payload.title ?? null,
+                thumbnail: thumbnailUrl,
+                duration: durationSeconds,
+                source: "upload",
+                videoUrl: storedVideo.url
+            };
+            const manifestArtifact = payload.save_manifest
+                ? await ctx.storage.putJson("manifest.json", manifest)
+                : null;
+            await ctx.billing.record({
+                type: "cpu_estimate",
+                costUsd: config.RAPIDAPI_VIDEO_DOWNLOAD_LAMBDA_COST_USD,
+                costCenterSlug: "video_ingest_lambda",
+                idempotencyKey: `video_ingest_lambda:${sourceUrl}:${storedVideo.key}`,
+                occurredAtMs: Date.now(),
+                metadata: {
+                    operation: "ingest-video",
+                    source_url: sourceUrl,
+                    source_host: sourceHost,
+                    output_key: storedVideo.key,
+                    content_type: contentType,
+                    bytes: remoteVideo.bytes.length
+                }
+            });
+            ctx.logger.progress(1, "Video ingest complete", {
+                videoUrl: storedVideo.url,
+                durationSeconds,
+                thumbnailUrl
+            });
+            return {
+                progress: 1,
+                output: {
+                    files: compactUrls([storedVideo.url, thumbnailUrl, manifestArtifact?.url]),
+                    sourceUrl,
+                    sourceHost,
+                    videoUrl: storedVideo.url,
+                    sourceVideoUrl: storedVideo.url,
+                    primary_file_url: storedVideo.url,
+                    title: manifest.title,
+                    thumbnail: thumbnailUrl,
+                    duration: durationSeconds,
+                    // Manifest CONTENT (not the artifact record) so the inspiration
+                    // finalizer can read thumbnail/title/duration directly.
+                    manifest
+                }
+            };
+        }
+    }
+});
 const videoTrimPrimitive = definePrimitive({
     id: PRIMITIVE_VIDEO_TRIM_ID,
     kind: "video_trim",
@@ -1987,6 +2122,7 @@ class PrimitiveRegistry {
         [mediaDedupePrimitive.id, mediaDedupePrimitive],
         [videoNormalizePrimitive.id, videoNormalizePrimitive],
         [videoDownloadPrimitive.id, videoDownloadPrimitive],
+        [videoIngestPrimitive.id, videoIngestPrimitive],
         [videoTrimPrimitive.id, videoTrimPrimitive],
         [videoRemoveCaptionsPrimitive.id, videoRemoveCaptionsPrimitive],
         [videoExtractAudioPrimitive.id, videoExtractAudioPrimitive],

package/dist/src/services/billing.js

@@ -162,6 +162,7 @@ function resolveCostCenterSlug(input) {
             || explicitSlug === "video_normalization"
             || explicitSlug === "rapidapi_video_download"
             || explicitSlug === "video_download_lambda"
+            || explicitSlug === "video_ingest_lambda"
             || explicitSlug === "rapidapi_remove_background"
             || explicitSlug === "primitive_media_lambda"
             || explicitSlug === "job_runner_lambda"

package/dist/src/services/hyperframes.js

@@ -13,7 +13,7 @@ import ffprobeStatic from "ffprobe-static";
 import { parseHTML } from "linkedom";
 import { config } from "../config.js";
 import { devErrorFields, devLog } from "../lib/dev-log.js";
-import { buildHyperframeCompositionHtml } from "../hyperframes/composition.js";
+import { KEN_BURNS_CSS, KEN_BURNS_STYLE_MARKER, buildHyperframeCompositionHtml } from "../hyperframes/composition.js";
 import { applyMarkupUsd } from "./billing-pricing.js";
 let stackCache = null;
 const SMART_DECOMPOSE_TEMP_PREFIX = "vidfarm-smart-decompose-";
@@ -2027,6 +2027,31 @@ export function normalizePublishHtml(html) {
             continue;
         html.style.zIndex = String(trackIndex);
     }
+    // Ken Burns motion must span exactly the clip: timeline edits touch
+    // data-duration only, so re-derive the inline --vf-kb-dur (which drives
+    // animation-duration) from data-duration on every [data-kenburns] layer.
+    // Also make sure the shared keyframes stylesheet travels with compositions
+    // stored before the builder started embedding it.
+    const kenBurnsLayers = Array.from(document.querySelectorAll("[data-kenburns]"));
+    for (const el of kenBurnsLayers) {
+        const duration = Number.parseFloat(el.getAttribute("data-duration") || "");
+        if (!Number.isFinite(duration) || duration <= 0)
+            continue;
+        const styleValue = el.getAttribute("style") || "";
+        const durDecl = `--vf-kb-dur:${Number(duration.toFixed(3))}s`;
+        const nextStyle = /(^|;)\s*--vf-kb-dur\s*:[^;]*/i.test(styleValue)
+            ? styleValue.replace(/(^|;)\s*--vf-kb-dur\s*:[^;]*/i, (_match, lead) => `${lead}${durDecl}`)
+            : styleValue.length === 0 || styleValue.endsWith(";")
+                ? `${styleValue}${durDecl}`
+                : `${styleValue};${durDecl}`;
+        if (nextStyle !== styleValue)
+            el.setAttribute("style", nextStyle);
+    }
+    if (kenBurnsLayers.length > 0 && !html.includes(KEN_BURNS_STYLE_MARKER)) {
+        const styleEl = document.createElement("style");
+        styleEl.textContent = KEN_BURNS_CSS;
+        (document.head ?? document.documentElement)?.appendChild(styleEl);
+    }
     // Editor sessions occasionally leave inline style attributes with double
     // quotes inside CSS values (font-family: "TikTok Sans"). When serialized into
     // an HTML attribute, those quotes become &quot; entities. The render lambda

package/dist/src/services/storage.js

@@ -30,6 +30,12 @@ export class StorageService {
     legacyUserAttachmentKey(customerId, attachmentId, fileName) {
         return joinStorageKey("users", customerId, attachmentId, fileName);
     }
+    // Add Template → upload a video file: staging area for uploaded inspiration
+    // sources. Lives under users/ so the bucket's public-read policy covers it —
+    // the video_ingest job and the editor fetch it by plain URL.
+    inspirationUploadKey(customerId, uploadId, fileName) {
+        return joinStorageKey("users", customerId, "inspiration-uploads", uploadId, fileName);
+    }
     userTemporaryFileKey(customerId, fileId, fileName, folderPath) {
         return joinStorageKey("users", customerId, "temporary", folderPath || "", fileId, fileName);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mevdragon/vidfarm-devcli",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Local bridge for the Vidfarm Trackpad Editor. `vidfarm serve <template_id>` boots the FULL editor on localhost (disk-backed records/storage, free in-process render); edit composition.html on disk (Claude Code, Codex, etc.) and the browser live-morphs it.",
   "type": "module",
   "bin": {