@mevdragon/vidfarm-devcli 0.13.0 → 0.14.0

package/dist/src/hyperframes/composition.js

@@ -98,10 +98,16 @@ export function normalizeKenBurns(value) {
 export const TRANSITION_PRESETS = [
     "crossfade",
     "fade-black",
+    "fade-white",
+    "flash",
+    "smoke",
+    "blur",
     "slide-left",
     "slide-right",
     "slide-up",
     "slide-down",
+    "whip-left",
+    "whip-right",
     "wipe-left",
     "wipe-right",
     "wipe-up",
@@ -110,14 +116,49 @@ export const TRANSITION_PRESETS = [
     "zoom-out",
     "circle-open"
 ];
+// Exit transitions: the clip animates AWAY over its last data-transition-out-
+// duration seconds. Same declarative contract as the entrance presets; the
+// keyframes omit the `from` state so the animation departs from the element's
+// own inline styles, and the inline --vf-tr-out-delay var (clip duration minus
+// out duration) positions the animation window at the clip's tail so the
+// time-based scrub in the producer and preview runtimes needs no extra logic.
+export const TRANSITION_OUT_PRESETS = [
+    "fade",
+    "fade-black",
+    "fade-white",
+    "flash",
+    "smoke",
+    "blur",
+    "slide-left",
+    "slide-right",
+    "slide-up",
+    "slide-down",
+    "wipe-left",
+    "wipe-right",
+    "wipe-up",
+    "wipe-down",
+    "zoom-in",
+    "zoom-out",
+    "circle-close"
+];
 export const TRANSITION_DEFAULT_DURATION = 0.5;
 export const TRANSITION_MIN_DURATION = 0.1;
 export const TRANSITION_MAX_DURATION = 2.5;
 // Two butt-cut clips can drift by a few ms through timeline edits; treat ends
 // within this window as adjacent when granting the outgoing clip's hold.
 export const TRANSITION_ADJACENCY_EPSILON = 0.05;
-export const TRANSITION_STYLE_MARKER = "__VF_TRANSITIONS_V1__";
-export const TRANSITION_CSS = `/*${TRANSITION_STYLE_MARKER}*/
+// V2: entrance AND exit animations compose on one element via cascading custom
+// properties (--vf-tr-in-name / --vf-tr-out-name) feeding a two-slot animation
+// list — per-preset attribute selectors can't merge two animation-names, vars
+// can. The [data-kenburns] combo rules below fix a V1 latent clash where Ken
+// Burns and a transition on the same <img> fought over animation-name (equal
+// specificity, last stylesheet won); the (0,2,0) combo selectors prepend the
+// vf-kb animation to the list instead.
+export const TRANSITION_STYLE_MARKER = "__VF_TRANSITIONS_V2__";
+// The exact V1 block previous builds baked into stored compositions. Injectors
+// string-replace this with the current TRANSITION_CSS so old drafts/publishes
+// upgrade in place instead of accumulating duplicate style blocks.
+export const LEGACY_TRANSITION_CSS_V1 = `/*__VF_TRANSITIONS_V1__*/
 @keyframes vf-tr-crossfade { from { opacity: 0; } }
 @keyframes vf-tr-fade-black { 0% { opacity: 0; filter: brightness(0); } 35% { opacity: 1; filter: brightness(0); } }
 @keyframes vf-tr-slide-left { from { translate: 100% 0; } }
@@ -151,12 +192,119 @@ export const TRANSITION_CSS = `/*${TRANSITION_STYLE_MARKER}*/
 [data-transition="zoom-out"] { animation-name: vf-tr-zoom-out; }
 [data-transition="circle-open"] { animation-name: vf-tr-circle-open; }
 `;
+export const TRANSITION_CSS = `/*${TRANSITION_STYLE_MARKER}*/
+@keyframes vf-tr-crossfade { from { opacity: 0; } }
+@keyframes vf-tr-fade-black { 0% { opacity: 0; filter: brightness(0); } 35% { opacity: 1; filter: brightness(0); } }
+@keyframes vf-tr-fade-white { 0% { opacity: 0; filter: saturate(0.55) brightness(3); } 45% { opacity: 1; filter: saturate(0.7) brightness(2.1); } }
+@keyframes vf-tr-flash { 0% { filter: saturate(0.3) brightness(5); } 55% { filter: saturate(0.9) brightness(1.6); } }
+@keyframes vf-tr-smoke { 0% { opacity: 0; filter: blur(26px) saturate(0.65) brightness(1.55); } 55% { opacity: 1; } }
+@keyframes vf-tr-blur { from { opacity: 0; filter: blur(16px); } }
+@keyframes vf-tr-slide-left { from { translate: 100% 0; } }
+@keyframes vf-tr-slide-right { from { translate: -100% 0; } }
+@keyframes vf-tr-slide-up { from { translate: 0 100%; } }
+@keyframes vf-tr-slide-down { from { translate: 0 -100%; } }
+@keyframes vf-tr-whip-left { 0% { translate: 110% 0; filter: blur(14px); } 60% { filter: blur(5px); } }
+@keyframes vf-tr-whip-right { 0% { translate: -110% 0; filter: blur(14px); } 60% { filter: blur(5px); } }
+@keyframes vf-tr-wipe-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
+@keyframes vf-tr-wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
+@keyframes vf-tr-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
+@keyframes vf-tr-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
+@keyframes vf-tr-zoom-in { from { opacity: 0; scale: 1.18; } }
+@keyframes vf-tr-zoom-out { from { opacity: 0; scale: 0.82; } }
+@keyframes vf-tr-circle-open { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
+@keyframes vf-tr-out-fade { to { opacity: 0; } }
+@keyframes vf-tr-out-fade-black { to { filter: brightness(0); } }
+@keyframes vf-tr-out-fade-white { to { filter: saturate(0.35) brightness(6); } }
+@keyframes vf-tr-out-flash { 65% { filter: brightness(1); } 100% { filter: saturate(0.3) brightness(5); } }
+@keyframes vf-tr-out-smoke { to { opacity: 0; filter: blur(24px) saturate(0.7) brightness(1.5); } }
+@keyframes vf-tr-out-blur { to { opacity: 0; filter: blur(16px); } }
+@keyframes vf-tr-out-slide-left { to { translate: -100% 0; } }
+@keyframes vf-tr-out-slide-right { to { translate: 100% 0; } }
+@keyframes vf-tr-out-slide-up { to { translate: 0 -100%; } }
+@keyframes vf-tr-out-slide-down { to { translate: 0 100%; } }
+@keyframes vf-tr-out-wipe-left { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
+@keyframes vf-tr-out-wipe-right { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
+@keyframes vf-tr-out-wipe-up { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
+@keyframes vf-tr-out-wipe-down { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
+@keyframes vf-tr-out-zoom-in { to { opacity: 0; scale: 1.18; } }
+@keyframes vf-tr-out-zoom-out { to { opacity: 0; scale: 0.82; } }
+@keyframes vf-tr-out-circle-close { from { clip-path: circle(75% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
+[data-transition], [data-transition-out] {
+  animation-name: var(--vf-tr-in-name, none), var(--vf-tr-out-name, none);
+  animation-duration: var(--vf-tr-dur, 0.5s), var(--vf-tr-out-dur, 0.5s);
+  animation-delay: 0s, var(--vf-tr-out-delay, 0s);
+  animation-timing-function: var(--vf-tr-ease, ease-in-out), var(--vf-tr-out-ease, ease-in-out);
+  animation-fill-mode: both, both;
+  animation-play-state: paused, paused;
+}
+[data-kenburns][data-transition], [data-kenburns][data-transition-out] {
+  animation-name: var(--vf-kb-name, none), var(--vf-tr-in-name, none), var(--vf-tr-out-name, none);
+  animation-duration: var(--vf-kb-dur, 5s), var(--vf-tr-dur, 0.5s), var(--vf-tr-out-dur, 0.5s);
+  animation-delay: 0s, 0s, var(--vf-tr-out-delay, 0s);
+  animation-timing-function: var(--vf-kb-ease, linear), var(--vf-tr-ease, ease-in-out), var(--vf-tr-out-ease, ease-in-out);
+  animation-fill-mode: both, both, both;
+  animation-play-state: paused, paused, paused;
+}
+[data-kenburns="zoom-in"] { --vf-kb-name: vf-kb-zoom-in; }
+[data-kenburns="zoom-out"] { --vf-kb-name: vf-kb-zoom-out; }
+[data-kenburns="pan-left"] { --vf-kb-name: vf-kb-pan-left; }
+[data-kenburns="pan-right"] { --vf-kb-name: vf-kb-pan-right; }
+[data-kenburns="pan-up"] { --vf-kb-name: vf-kb-pan-up; }
+[data-kenburns="pan-down"] { --vf-kb-name: vf-kb-pan-down; }
+[data-kenburns="zoom-in-left"] { --vf-kb-name: vf-kb-zoom-in-left; }
+[data-kenburns="zoom-in-right"] { --vf-kb-name: vf-kb-zoom-in-right; }
+[data-transition="crossfade"] { --vf-tr-in-name: vf-tr-crossfade; }
+[data-transition="fade-black"] { --vf-tr-in-name: vf-tr-fade-black; }
+[data-transition="fade-white"] { --vf-tr-in-name: vf-tr-fade-white; }
+[data-transition="flash"] { --vf-tr-in-name: vf-tr-flash; --vf-tr-ease: cubic-bezier(0.3, 0, 0.55, 1); }
+[data-transition="smoke"] { --vf-tr-in-name: vf-tr-smoke; --vf-tr-ease: cubic-bezier(0.25, 0.4, 0.3, 1); }
+[data-transition="blur"] { --vf-tr-in-name: vf-tr-blur; }
+[data-transition="slide-left"] { --vf-tr-in-name: vf-tr-slide-left; --vf-tr-ease: cubic-bezier(0.22, 1, 0.36, 1); }
+[data-transition="slide-right"] { --vf-tr-in-name: vf-tr-slide-right; --vf-tr-ease: cubic-bezier(0.22, 1, 0.36, 1); }
+[data-transition="slide-up"] { --vf-tr-in-name: vf-tr-slide-up; --vf-tr-ease: cubic-bezier(0.22, 1, 0.36, 1); }
+[data-transition="slide-down"] { --vf-tr-in-name: vf-tr-slide-down; --vf-tr-ease: cubic-bezier(0.22, 1, 0.36, 1); }
+[data-transition="whip-left"] { --vf-tr-in-name: vf-tr-whip-left; --vf-tr-ease: cubic-bezier(0.16, 1, 0.3, 1); }
+[data-transition="whip-right"] { --vf-tr-in-name: vf-tr-whip-right; --vf-tr-ease: cubic-bezier(0.16, 1, 0.3, 1); }
+[data-transition="wipe-left"] { --vf-tr-in-name: vf-tr-wipe-left; --vf-tr-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition="wipe-right"] { --vf-tr-in-name: vf-tr-wipe-right; --vf-tr-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition="wipe-up"] { --vf-tr-in-name: vf-tr-wipe-up; --vf-tr-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition="wipe-down"] { --vf-tr-in-name: vf-tr-wipe-down; --vf-tr-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition="zoom-in"] { --vf-tr-in-name: vf-tr-zoom-in; --vf-tr-ease: cubic-bezier(0.16, 1, 0.3, 1); }
+[data-transition="zoom-out"] { --vf-tr-in-name: vf-tr-zoom-out; --vf-tr-ease: cubic-bezier(0.16, 1, 0.3, 1); }
+[data-transition="circle-open"] { --vf-tr-in-name: vf-tr-circle-open; --vf-tr-ease: cubic-bezier(0.3, 0.6, 0.3, 1); }
+[data-transition-out="fade"] { --vf-tr-out-name: vf-tr-out-fade; }
+[data-transition-out="fade-black"] { --vf-tr-out-name: vf-tr-out-fade-black; }
+[data-transition-out="fade-white"] { --vf-tr-out-name: vf-tr-out-fade-white; }
+[data-transition-out="flash"] { --vf-tr-out-name: vf-tr-out-flash; --vf-tr-out-ease: cubic-bezier(0.45, 0, 0.7, 0.4); }
+[data-transition-out="smoke"] { --vf-tr-out-name: vf-tr-out-smoke; --vf-tr-out-ease: cubic-bezier(0.7, 0, 0.75, 0.6); }
+[data-transition-out="blur"] { --vf-tr-out-name: vf-tr-out-blur; }
+[data-transition-out="slide-left"] { --vf-tr-out-name: vf-tr-out-slide-left; --vf-tr-out-ease: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
+[data-transition-out="slide-right"] { --vf-tr-out-name: vf-tr-out-slide-right; --vf-tr-out-ease: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
+[data-transition-out="slide-up"] { --vf-tr-out-name: vf-tr-out-slide-up; --vf-tr-out-ease: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
+[data-transition-out="slide-down"] { --vf-tr-out-name: vf-tr-out-slide-down; --vf-tr-out-ease: cubic-bezier(0.55, 0.06, 0.68, 0.19); }
+[data-transition-out="wipe-left"] { --vf-tr-out-name: vf-tr-out-wipe-left; --vf-tr-out-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition-out="wipe-right"] { --vf-tr-out-name: vf-tr-out-wipe-right; --vf-tr-out-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition-out="wipe-up"] { --vf-tr-out-name: vf-tr-out-wipe-up; --vf-tr-out-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition-out="wipe-down"] { --vf-tr-out-name: vf-tr-out-wipe-down; --vf-tr-out-ease: cubic-bezier(0.45, 0.05, 0.35, 0.95); }
+[data-transition-out="zoom-in"] { --vf-tr-out-name: vf-tr-out-zoom-in; --vf-tr-out-ease: cubic-bezier(0.5, 0, 0.75, 0.4); }
+[data-transition-out="zoom-out"] { --vf-tr-out-name: vf-tr-out-zoom-out; --vf-tr-out-ease: cubic-bezier(0.5, 0, 0.75, 0.4); }
+[data-transition-out="circle-close"] { --vf-tr-out-name: vf-tr-out-circle-close; --vf-tr-out-ease: cubic-bezier(0.6, 0, 0.7, 0.4); }
+`;
 export function clampTransitionDuration(value) {
     const next = Number(value);
     if (!Number.isFinite(next) || next <= 0)
         return TRANSITION_DEFAULT_DURATION;
     return Math.max(TRANSITION_MIN_DURATION, Math.min(TRANSITION_MAX_DURATION, next));
 }
+// Seconds into the clip at which its exit animation must start so it finishes
+// exactly at the clip's end. Written as the inline --vf-tr-out-delay var.
+export function transitionOutDelaySeconds(layerDurationSeconds, outDurationSeconds) {
+    const layerDuration = Number(layerDurationSeconds);
+    const outDuration = Number(outDurationSeconds);
+    if (!Number.isFinite(layerDuration) || !Number.isFinite(outDuration))
+        return 0;
+    return Math.max(0, Number((layerDuration - outDuration).toFixed(3)));
+}
 export function normalizeTransition(value) {
     if (!value)
         return null;
@@ -168,6 +316,28 @@ export function normalizeTransition(value) {
         duration: raw.duration !== undefined ? clampTransitionDuration(raw.duration) : undefined
     };
 }
+export function normalizeTransitionOut(value) {
+    if (!value)
+        return null;
+    const raw = typeof value === "string" ? { preset: value } : value;
+    if (!TRANSITION_OUT_PRESETS.includes(raw.preset))
+        return null;
+    return {
+        preset: raw.preset,
+        duration: raw.duration !== undefined ? clampTransitionDuration(raw.duration) : undefined
+    };
+}
+// Upgrades stored composition HTML that still carries the V1 transition
+// stylesheet: exact-replaces the legacy block with the current one. If the V1
+// marker is present but the block has drifted, callers' normal marker-guarded
+// injection appends the V2 block AFTER it, which also wins (equal-specificity
+// rules, later source order) — this replace just avoids duplicate blocks in
+// the common case.
+export function upgradeLegacyTransitionCss(html) {
+    if (!html || html.includes(TRANSITION_STYLE_MARKER) || !html.includes("__VF_TRANSITIONS_V1__"))
+        return html;
+    return html.split(LEGACY_TRANSITION_CSS_V1).join(TRANSITION_CSS);
+}
 // ---------------------------------------------------------------------------
 // Animated captions. Same declarative contract as Ken Burns: the caption layer
 // <div> (the element that owns data-start/data-duration) carries
@@ -476,6 +646,10 @@ function timedAttrs(layer) {
         if (transition) {
             attrs.push(`data-transition="${escapeAttr(transition.preset)}"`, `data-transition-duration="${num(clampTransitionDuration(transition.duration ?? TRANSITION_DEFAULT_DURATION))}"`);
         }
+        const transitionOut = normalizeTransitionOut(layer.transitionOut);
+        if (transitionOut) {
+            attrs.push(`data-transition-out="${escapeAttr(transitionOut.preset)}"`, `data-transition-out-duration="${num(clampTransitionDuration(transitionOut.duration ?? TRANSITION_DEFAULT_DURATION))}"`);
+        }
     }
     if (["caption", "text", "shape", "html"].includes(layer.kind)) {
         attrs.push(`data-text-background-style="${escapeAttr(layer.textBackgroundStyle || "plain")}"`, `data-text-background-color="${escapeAttr(layer.background || "#000000")}"`, `data-font-family="${escapeAttr(layer.fontFamily || "TikTok Sans")}"`);
@@ -504,6 +678,13 @@ function layerStyle(layer) {
         if (transition) {
             styles.push(`--vf-tr-dur:${num(clampTransitionDuration(transition.duration ?? TRANSITION_DEFAULT_DURATION))}s`);
         }
+        // Exit transitions additionally need the delay var so the animation window
+        // sits at the clip's tail (duration − out duration).
+        const transitionOut = normalizeTransitionOut(layer.transitionOut);
+        if (transitionOut) {
+            const outDur = clampTransitionDuration(transitionOut.duration ?? TRANSITION_DEFAULT_DURATION);
+            styles.push(`--vf-tr-out-dur:${num(outDur)}s`, `--vf-tr-out-delay:${num(transitionOutDelaySeconds(positiveNumber(layer.duration, 0), outDur))}s`);
+        }
     }
     if (["caption", "text", "shape", "html"].includes(layer.kind)) {
         const fontFamily = layer.fontFamily || "TikTok Sans";

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 { CAPTION_ANIM_CSS, CAPTION_STYLE_MARKER, KEN_BURNS_CSS, KEN_BURNS_STYLE_MARKER, TRANSITION_ADJACENCY_EPSILON, TRANSITION_CSS, TRANSITION_PRESETS, TRANSITION_STYLE_MARKER, buildHyperframeCompositionHtml, clampTransitionDuration } from "../hyperframes/composition.js";
+import { CAPTION_ANIM_CSS, CAPTION_STYLE_MARKER, KEN_BURNS_CSS, KEN_BURNS_STYLE_MARKER, LEGACY_TRANSITION_CSS_V1, TRANSITION_ADJACENCY_EPSILON, TRANSITION_CSS, TRANSITION_OUT_PRESETS, TRANSITION_PRESETS, TRANSITION_STYLE_MARKER, buildHyperframeCompositionHtml, clampTransitionDuration, transitionOutDelaySeconds } from "../hyperframes/composition.js";
 import { applyMarkupUsd } from "./billing-pricing.js";
 // The scene-annotation pass reuses the clip library's controlled vocabulary and
 // embedding-text recipe verbatim so a source scene's clip-match query is
@@ -2309,6 +2309,18 @@ function compositionHasCoverageGap(intervals, total, minGap = 0.2) {
 // neighbor back). Stored drafts stay butt-cut; only publish/render output
 // carries the overlap. The preview runtime applies the same window live.
 function materializeTransitionOverlaps(document) {
+    const upsertStyleVar = (el, name, value) => {
+        const styleValue = el.getAttribute("style") || "";
+        const decl = `${name}:${value}`;
+        const pattern = new RegExp(`(^|;)\\s*${name.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&")}\\s*:[^;]*`, "i");
+        const nextStyle = pattern.test(styleValue)
+            ? styleValue.replace(pattern, (_match, lead) => `${lead}${decl}`)
+            : styleValue.length === 0 || styleValue.endsWith(";")
+                ? `${styleValue}${decl}`
+                : `${styleValue};${decl}`;
+        if (nextStyle !== styleValue)
+            el.setAttribute("style", nextStyle);
+    };
     const clips = [];
     for (const el of Array.from(document.querySelectorAll("[data-start]"))) {
         if (el.hasAttribute("data-composition-id"))
@@ -2331,6 +2343,23 @@ function materializeTransitionOverlaps(document) {
         return;
     for (const clip of clips) {
         const transitionEl = clip.el;
+        const tagName = transitionEl.tagName?.toLowerCase?.() ?? "";
+        // Exit transitions: validate/clamp here; the tail-positioning delay var is
+        // re-derived in the final loop below once holds are known (the animation
+        // must end at the clip's rendered end, nominal + hold).
+        const outPreset = transitionEl.getAttribute("data-transition-out");
+        if (outPreset) {
+            if (!TRANSITION_OUT_PRESETS.includes(outPreset) || tagName === "audio") {
+                transitionEl.removeAttribute("data-transition-out");
+                transitionEl.removeAttribute("data-transition-out-duration");
+            }
+            else {
+                const outDuration = Math.min(clampTransitionDuration(transitionEl.getAttribute("data-transition-out-duration")), clip.nominal);
+                const outDurationValue = Number(outDuration.toFixed(3));
+                transitionEl.setAttribute("data-transition-out-duration", String(outDurationValue));
+                upsertStyleVar(transitionEl, "--vf-tr-out-dur", `${outDurationValue}s`);
+            }
+        }
         const preset = transitionEl.getAttribute("data-transition");
         if (!preset)
             continue;
@@ -2341,7 +2370,6 @@ function materializeTransitionOverlaps(document) {
             transitionEl.removeAttribute("data-transition-duration");
             continue;
         }
-        const tagName = transitionEl.tagName?.toLowerCase?.() ?? "";
         if (tagName === "audio") {
             transitionEl.removeAttribute("data-transition");
             transitionEl.removeAttribute("data-transition-duration");
@@ -2353,15 +2381,7 @@ function materializeTransitionOverlaps(document) {
         transitionEl.setAttribute("data-transition-duration", String(durationValue));
         // Keep the inline var (which drives animation-duration) in lockstep, same
         // as the --vf-kb-dur re-derivation above.
-        const styleValue = transitionEl.getAttribute("style") || "";
-        const durDecl = `--vf-tr-dur:${durationValue}s`;
-        const nextStyle = /(^|;)\s*--vf-tr-dur\s*:[^;]*/i.test(styleValue)
-            ? styleValue.replace(/(^|;)\s*--vf-tr-dur\s*:[^;]*/i, (_match, lead) => `${lead}${durDecl}`)
-            : styleValue.length === 0 || styleValue.endsWith(";")
-                ? `${styleValue}${durDecl}`
-                : `${styleValue};${durDecl}`;
-        if (nextStyle !== styleValue)
-            transitionEl.setAttribute("style", nextStyle);
+        upsertStyleVar(transitionEl, "--vf-tr-dur", `${durationValue}s`);
         // Grant the hold to the clip this one cuts away from: same track, nominal
         // end at (within epsilon of) this clip's start.
         for (const candidate of clips) {
@@ -2390,6 +2410,13 @@ function materializeTransitionOverlaps(document) {
         else {
             clip.el.removeAttribute("data-transition-hold");
         }
+        // Position the exit animation at the clip's rendered tail. Timeline edits
+        // touch data-duration only, so this re-derivation (like --vf-kb-dur) is
+        // what keeps stored delays honest after retimes.
+        if (clip.el.getAttribute("data-transition-out")) {
+            const outDuration = clampTransitionDuration(clip.el.getAttribute("data-transition-out-duration"));
+            upsertStyleVar(clip.el, "--vf-tr-out-delay", `${transitionOutDelaySeconds(nextDuration, outDuration)}s`);
+        }
     }
 }
 export function normalizePublishHtml(html) {
@@ -2519,10 +2546,28 @@ export function normalizePublishHtml(html) {
         (document.head ?? document.documentElement)?.appendChild(styleEl);
     }
     materializeTransitionOverlaps(document);
-    if (document.querySelector("[data-transition]") && !html.includes(TRANSITION_STYLE_MARKER)) {
-        const styleEl = document.createElement("style");
-        styleEl.textContent = TRANSITION_CSS;
-        (document.head ?? document.documentElement)?.appendChild(styleEl);
+    if (document.querySelector("[data-transition], [data-transition-out]") && !html.includes(TRANSITION_STYLE_MARKER)) {
+        // Compositions stored before V2 carry the V1 block inline: upgrade it in
+        // place (exact string swap) instead of stacking a second stylesheet. If the
+        // legacy block drifted, append after it — later source order wins the
+        // equal-specificity animation-name battle, so V2 still takes effect.
+        let upgradedLegacy = false;
+        if (html.includes("__VF_TRANSITIONS_V1__")) {
+            for (const styleEl of Array.from(document.querySelectorAll("style"))) {
+                const text = styleEl.textContent || "";
+                if (!text.includes("__VF_TRANSITIONS_V1__"))
+                    continue;
+                styleEl.textContent = text.includes(LEGACY_TRANSITION_CSS_V1)
+                    ? text.split(LEGACY_TRANSITION_CSS_V1).join(TRANSITION_CSS)
+                    : `${text}\n${TRANSITION_CSS}`;
+                upgradedLegacy = true;
+            }
+        }
+        if (!upgradedLegacy) {
+            const styleEl = document.createElement("style");
+            styleEl.textContent = TRANSITION_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

package/dist/src/services/serverless-records.js

@@ -44,6 +44,7 @@ const METHOD_COLLECTIONS = {
     createTemplateRelease: "template_release",
     createTemplateSource: "template_source",
     createUserAttachment: "user_attachment",
+    updateUserAttachmentNotes: "user_attachment",
     createUserFileFolder: "user_file_folder",
     createUserTemporaryFile: "user_temporary_file",
     deleteEmailChannel: "email_channel",
@@ -797,9 +798,15 @@ class ServerlessRecordsServiceImpl {
             storageKey: input.storageKey,
             folderPath: normalizeFolder(input.folderPath),
             publicUrl: input.publicUrl ?? null,
+            notes: input.notes ?? null,
+            notesEmbedding: input.notesEmbedding ?? null,
+            notesEmbeddingModel: input.notesEmbeddingModel ?? null,
             createdAt: input.createdAt ?? timestamp
         });
     }
+    async updateUserAttachmentNotes(customerId, attachmentId, patch) {
+        return this.mergeByIdForCustomer("user_attachment", customerId, attachmentId, patch);
+    }
     async listUserAttachments(customerId) {
         return this.listByCustomer("user_attachment", customerId);
     }

package/dist/src/template-editor-shell.js

@@ -307,6 +307,7 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
 
   .vf-editor-chat-mobile-fab,
   .vf-editor-chat-minimize,
+  .vf-editor-chat-expand,
   .vf-editor-chat-back-button--header {
     display: none;
   }
@@ -2634,18 +2635,25 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
       pointer-events: none;
     }
 
+    /* Chat opens as a floating popup card anchored above the FAB; the expand
+       toggle promotes it to a full-screen sheet (data-mobile-expanded). */
     .vf-editor-chat-thread {
       position: fixed;
-      inset: 0;
+      top: auto;
+      left: auto;
+      right: 12px;
+      bottom: calc(12px + env(safe-area-inset-bottom));
       z-index: 1;
       display: none;
-      width: 100%;
-      height: 100svh;
-      border-radius: 0;
+      width: min(430px, calc(100vw - 24px));
+      height: min(72svh, 640px);
+      border: 1px solid rgba(219, 193, 122, 0.46);
+      border-radius: 24px;
+      overflow: hidden;
       background:
         radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 30%),
         linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(252, 247, 238, 0.98));
-      box-shadow: none;
+      box-shadow: 0 30px 72px rgba(37, 45, 61, 0.34);
       pointer-events: auto;
     }
 
@@ -2653,6 +2661,22 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
       display: flex;
     }
 
+    /* Outranks the desktop brainstorm thread rule (display:grid), which has
+       higher specificity than the plain .vf-editor-chat-thread hide above. */
+    .vf-editor-chat-shell:not([data-mobile-open="true"]) .vf-editor-chat-thread {
+      display: none;
+    }
+
+    .vf-editor-chat-shell[data-mobile-expanded="true"] .vf-editor-chat-thread {
+      inset: 0;
+      width: 100%;
+      height: 100svh;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .vf-editor-chat-expand,
     .vf-editor-chat-minimize {
       all: unset;
       display: inline-flex;
@@ -2681,10 +2705,21 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
     }
 
     .vf-editor-chat-new-thread,
+    .vf-editor-chat-expand,
     .vf-editor-chat-minimize {
       flex: 0 0 auto;
     }
 
+    .vf-editor-chat-expand svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.9;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
     .vf-editor-chat-header,
     .vf-editor-chat-tracer-bar,
     .vf-editor-chat-footer {
@@ -2701,31 +2736,59 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
       max-width: 72vw;
     }
 
+    /* iOS auto-zooms the viewport when focusing sub-16px inputs; the chat
+       composer is the page's primary interaction on phones. */
+    .vf-editor-chat-input,
+    .vf-editor-upload-folder-dialog input {
+      font-size: 16px;
+    }
+
+    .vf-editor-chat-shell[data-layout="brainstorm"] .editor-chat-panel,
     .vf-editor-chat-shell[data-layout="brainstorm"] {
-      pointer-events: auto;
+      background: transparent;
     }
 
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-mobile-fab {
-      display: none;
+    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-brainstorm-layout {
+      grid-template-columns: minmax(0, 1fr);
     }
 
-    /* Minimize makes no sense when the chat IS the page (/chat); Discover
-       re-enables it (with the FAB dock pattern) via its own scoped styles. */
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-minimize {
+    /* On narrow screens the persistent history sidebar collapses; the
+       overlay history toggle in the header takes over instead. */
+    .vf-editor-chat-brainstorm-layout.has-sidebar > .vf-editor-chat-history-pane {
       display: none;
     }
 
-    /* iOS auto-zooms the viewport when focusing sub-16px inputs; the chat
-       composer is the page's primary interaction on phones. */
-    .vf-editor-chat-input,
-    .vf-editor-upload-folder-dialog input {
-      font-size: 16px;
+    /* Brainstorm surfaces (Discover/Library/Clips) use the same FAB + popup
+       dock as everything else; the thread just lays out as a grid. */
+    .vf-editor-chat-shell[data-layout="brainstorm"][data-mobile-open="true"] .vf-editor-chat-thread {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr) auto;
     }
 
-    /* On phones the /chat page has no topbar and the sidebar (with its
-       Discover link) is collapsed — surface the header back button there.
-       Discover hides it again via its own scoped styles. */
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-back-button--header {
+    .vf-editor-chat-history-close,
+    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
+      display: inline-flex;
+    }
+
+    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+
+    /* /chat is the one surface where the chat IS the page: no FAB, no
+       minimize/expand, thread pinned full-screen, with a back-to-Discover
+       escape hatch in the header (the page has no topbar on phones). */
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] {
+      pointer-events: auto;
+    }
+
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-mobile-fab,
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-minimize,
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-expand {
+      display: none;
+    }
+
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-back-button--header {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -2739,27 +2802,12 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
       color: #617087;
     }
 
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-back-button--header svg {
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-back-button--header svg {
       width: 18px;
       height: 18px;
     }
 
-    .vf-editor-chat-shell[data-layout="brainstorm"] .editor-chat-panel,
-    .vf-editor-chat-shell[data-layout="brainstorm"] {
-      background: transparent;
-    }
-
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-brainstorm-layout {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    /* On narrow screens the persistent history sidebar collapses; the
-       overlay history toggle in the header takes over instead. */
-    .vf-editor-chat-brainstorm-layout.has-sidebar > .vf-editor-chat-history-pane {
-      display: none;
-    }
-
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
+    .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
       position: relative;
       inset: auto;
       display: grid;
@@ -2767,18 +2815,9 @@ export const TEMPLATE_EDITOR_SHELL_STYLES = `
       width: 100%;
       height: 100%;
       min-height: 0;
+      border: 0;
       border-radius: 0;
-    }
-
-
-    .vf-editor-chat-history-close,
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
-      display: inline-flex;
-    }
-
-    .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
-      padding-left: 12px;
-      padding-right: 12px;
+      box-shadow: none;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mevdragon/vidfarm-devcli",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "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": {