@officexapp/vidfarm-devcli 0.21.10

package/dist/src/hyperframes/composition.js

@@ -0,0 +1,780 @@
+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
+    };
+}
+// ---------------------------------------------------------------------------
+// Scene transitions. Same declarative contract as Ken Burns: the INCOMING
+// clip (the element that owns data-start) carries data-transition="<preset>"
+// plus data-transition-duration and the inline --vf-tr-dur var, and a static
+// vf-tr-* keyframe animates the clip IN over its first data-transition-duration
+// seconds. Both preview runtimes and the render producer's CSS adapter scrub
+// the animation by (time - data-start), so the motion is identical everywhere.
+//
+// The one thing CSS cannot express is the OUTGOING clip staying on screen
+// beneath the incoming one: stored compositions keep scenes butt-cut (A ends
+// exactly where B starts) so timeline edits and agent edits stay trivial. The
+// preview runtime extends the previous same-track clip's active window live,
+// and normalizePublishHtml materializes the same overlap into data-duration at
+// publish/render time (recorded in data-transition-hold for idempotency),
+// because the render engine derives visibility strictly from data-start/
+// data-duration. Presets animate opacity / clip-path / standalone translate /
+// scale — never `transform` — so they compose with a Ken Burns transform on
+// the same element. Keyframes deliberately omit the `to` state so the
+// animation settles into the element's own inline styles instead of
+// clobbering a custom opacity.
+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",
+    "wipe-down",
+    "zoom-in",
+    "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;
+// 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; } }
+@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-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%); } }
+[data-transition] {
+  animation-duration: var(--vf-tr-dur, 0.5s);
+  animation-timing-function: var(--vf-tr-ease, ease-in-out);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+[data-transition="crossfade"] { animation-name: vf-tr-crossfade; }
+[data-transition="fade-black"] { animation-name: vf-tr-fade-black; }
+[data-transition="slide-left"] { animation-name: vf-tr-slide-left; }
+[data-transition="slide-right"] { animation-name: vf-tr-slide-right; }
+[data-transition="slide-up"] { animation-name: vf-tr-slide-up; }
+[data-transition="slide-down"] { animation-name: vf-tr-slide-down; }
+[data-transition="wipe-left"] { animation-name: vf-tr-wipe-left; }
+[data-transition="wipe-right"] { animation-name: vf-tr-wipe-right; }
+[data-transition="wipe-up"] { animation-name: vf-tr-wipe-up; }
+[data-transition="wipe-down"] { animation-name: vf-tr-wipe-down; }
+[data-transition="zoom-in"] { animation-name: vf-tr-zoom-in; }
+[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;
+    const raw = typeof value === "string" ? { preset: value } : value;
+    if (!TRANSITION_PRESETS.includes(raw.preset))
+        return null;
+    return {
+        preset: raw.preset,
+        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
+// data-caption-animation="<preset>" plus per-cue CSS vars, and each word is a
+// <span data-cap-word> whose inline animation-delay/animation-duration encode
+// that word's window RELATIVE TO THE LAYER START. The render producer's CSS
+// adapter seeks every animation to (frameTime - ancestor data-start), and both
+// preview runtimes scrub the same way, so word-level motion is deterministic
+// and identical across preview and export. Everything is pure HTML+CSS so it
+// survives sanitizeCompositionHtml. Word timings also round-trip through
+// data-word-start/data-word-end so editors can re-derive them without parsing
+// CSS.
+export const CAPTION_ANIMATIONS = [
+    "highlight-pop",
+    "karaoke-fill",
+    "word-pop",
+    "cumulative-reveal",
+    "glow-pulse",
+    "bounce-wave"
+];
+export const CAPTION_STYLE_MARKER = "__VF_CAPTIONS_V1__";
+export const CAPTION_ANIM_CSS = `/*${CAPTION_STYLE_MARKER}*/
+[data-caption-animation] [data-cap-word] {
+  display:inline-block;
+  animation-play-state:paused;
+  animation-timing-function:ease-out;
+  animation-fill-mode:none;
+  will-change:transform,opacity;
+}
+[data-caption-uppercase="1"] { text-transform:uppercase; }
+@keyframes vf-cap-highlight { 14%, 100% { background-color:var(--vf-cap-hl, #7C3AED); color:var(--vf-cap-active, #FFFFFF); transform:scale(1.06); } }
+[data-caption-animation="highlight-pop"] [data-cap-word] { animation-name:vf-cap-highlight; padding:0.08em 0.18em; margin:-0.08em -0.05em; border-radius:0.3em; }
+@keyframes vf-cap-karaoke { to { color:var(--vf-cap-active, #FFE14D); } }
+[data-caption-animation="karaoke-fill"] [data-cap-word] { animation-name:vf-cap-karaoke; animation-fill-mode:forwards; animation-timing-function:linear; }
+@keyframes vf-cap-word-pop { 0% { opacity:0; transform:scale(0.45); } 22% { opacity:1; transform:scale(1.14); } 38%, 100% { opacity:1; transform:scale(1); } }
+[data-caption-animation="word-pop"] [data-vf-text-inline] { display:grid; place-items:center; }
+[data-caption-animation="word-pop"] [data-cap-word] { animation-name:vf-cap-word-pop; opacity:0; grid-area:1 / 1; }
+@keyframes vf-cap-reveal { from { opacity:0; transform:translateY(0.4em); } 40%, 100% { opacity:1; transform:none; } }
+[data-caption-animation="cumulative-reveal"] [data-cap-word] { animation-name:vf-cap-reveal; animation-fill-mode:forwards; opacity:0; }
+@keyframes vf-cap-glow { 20%, 80% { color:var(--vf-cap-active, #9BFF57); text-shadow:0 0 0.14em var(--vf-cap-active, #9BFF57), 0 0 0.5em var(--vf-cap-active, #9BFF57); transform:scale(1.04); } }
+[data-caption-animation="glow-pulse"] [data-cap-word] { animation-name:vf-cap-glow; }
+@keyframes vf-cap-bounce { 25% { transform:translateY(-0.22em) scale(1.08); } 55% { transform:translateY(0.05em); } 75% { transform:none; } }
+[data-caption-animation="bounce-wave"] [data-cap-word] { animation-name:vf-cap-bounce; }
+`;
+export const CAPTION_STYLE_PRESETS = [
+    {
+        id: "spotlight",
+        label: "Spotlight",
+        animation: "highlight-pop",
+        color: "#ffffff",
+        background: "#000000",
+        textBackgroundStyle: "outline",
+        highlightColor: "#7C3AED",
+        activeColor: "#ffffff",
+        fontWeight: 800,
+        uppercase: true
+    },
+    {
+        id: "karaoke",
+        label: "Karaoke",
+        animation: "karaoke-fill",
+        color: "#ffffff",
+        background: "#000000",
+        textBackgroundStyle: "outline",
+        activeColor: "#FFE14D",
+        fontWeight: 800
+    },
+    {
+        id: "word-pop",
+        label: "Word Pop",
+        animation: "word-pop",
+        color: "#ffffff",
+        background: "#000000",
+        textBackgroundStyle: "outline",
+        fontWeight: 900,
+        uppercase: true
+    },
+    {
+        id: "stack-up",
+        label: "Stack Up",
+        animation: "cumulative-reveal",
+        color: "#ffffff",
+        background: "#000000",
+        textBackgroundStyle: "highlight-translucent",
+        fontWeight: 700
+    },
+    {
+        id: "neon",
+        label: "Neon Glow",
+        animation: "glow-pulse",
+        color: "#eafff1",
+        background: "#04140a",
+        textBackgroundStyle: "plain",
+        activeColor: "#9BFF57",
+        fontWeight: 800,
+        uppercase: true
+    },
+    {
+        id: "bounce",
+        label: "Bounce",
+        animation: "bounce-wave",
+        color: "#FFE14D",
+        background: "#000000",
+        textBackgroundStyle: "outline",
+        activeColor: "#FFE14D",
+        fontWeight: 900,
+        uppercase: true
+    }
+];
+export function captionStylePresetById(id) {
+    if (!id)
+        return null;
+    const clean = String(id).trim().toLowerCase();
+    return CAPTION_STYLE_PRESETS.find((preset) => preset.id === clean) || null;
+}
+export function normalizeCaptionConfig(value) {
+    if (!value)
+        return null;
+    const raw = typeof value === "string" ? { animation: value } : value;
+    if (!CAPTION_ANIMATIONS.includes(raw.animation))
+        return null;
+    const words = Array.isArray(raw.words)
+        ? raw.words
+            .map((word) => ({
+            text: String(word?.text ?? "").trim(),
+            start: Math.max(0, Number(word?.start) || 0),
+            end: Math.max(0, Number(word?.end) || 0)
+        }))
+            .filter((word) => word.text && word.end > word.start)
+        : undefined;
+    return {
+        animation: raw.animation,
+        words: words && words.length ? words : undefined,
+        activeColor: typeof raw.activeColor === "string" && raw.activeColor.trim() ? raw.activeColor.trim() : undefined,
+        highlightColor: typeof raw.highlightColor === "string" && raw.highlightColor.trim() ? raw.highlightColor.trim() : undefined,
+        uppercase: raw.uppercase === true ? true : undefined
+    };
+}
+// Char-weighted word windows across a cue when the transcript has no
+// word-level timings (Gemini segments, hand-typed text). Leaves a hair of
+// silence between words so pop/highlight transitions read as discrete.
+export function estimateCaptionWords(text, durationSeconds) {
+    const tokens = String(text || "").trim().split(/\s+/).filter(Boolean);
+    const duration = Number.isFinite(durationSeconds) && durationSeconds > 0 ? durationSeconds : tokens.length * 0.32;
+    if (!tokens.length)
+        return [];
+    const weights = tokens.map((token) => Math.max(2, token.length) + 1.5);
+    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    const words = [];
+    let cursor = 0;
+    for (let index = 0; index < tokens.length; index += 1) {
+        const span = (weights[index] / totalWeight) * duration;
+        const gap = Math.min(0.03, span * 0.1);
+        words.push({
+            text: tokens[index],
+            start: Number(cursor.toFixed(3)),
+            end: Number(Math.max(cursor + 0.05, cursor + span - gap).toFixed(3))
+        });
+        cursor += span;
+    }
+    return words;
+}
+export function captionInlineVars(config) {
+    const vars = [];
+    if (config.activeColor)
+        vars.push(`--vf-cap-active:${config.activeColor}`);
+    if (config.highlightColor)
+        vars.push(`--vf-cap-hl:${config.highlightColor}`);
+    return vars.join(";");
+}
+export function buildHyperframeCompositionHtml(input) {
+    const duration = positiveNumber(input.duration, inferDuration(input.layers));
+    const width = positiveInteger(input.width, 720);
+    const height = positiveInteger(input.height, 1280);
+    const background = input.backgroundColor || "#050604";
+    const fontImport = input.fontImportCss ?? "@import url(\"https://fonts.googleapis.com/css2?family=Abel&family=Montserrat:wght@600;700;800;900&family=Source+Code+Pro:wght@700&family=TikTok+Sans:wght@400;600;700;800;900&display=swap\");";
+    const layers = input.layers.map(renderLayer).join("\n    ");
+    return `<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    ${fontImport}
+    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}
+    ${CAPTION_ANIM_CSS}
+    ${TRANSITION_CSS}
+    ${input.css ?? ""}
+  </style>
+</head>
+<body>
+  <div data-composition-id="${escapeAttr(input.compositionId)}" data-source-folder="${escapeAttr(input.sourceFolder || "")}" data-width="${width}" data-height="${height}" data-duration="${num(duration)}">
+    ${layers}
+  </div>
+</body>
+</html>
+`;
+}
+export function inferDuration(layers) {
+    return layers.reduce((max, layer) => Math.max(max, positiveNumber(layer.start, 0) + positiveNumber(layer.duration, 0)), 0);
+}
+export function assertHyperframeTimeline(layers) {
+    const timedLayers = layers.filter((layer) => positiveNumber(layer.duration, 0) > 0);
+    for (const layer of timedLayers) {
+        if (!layer.id.trim())
+            throw new Error("HyperFrame layer id is required.");
+        if (positiveNumber(layer.start, -1) < 0)
+            throw new Error(`HyperFrame layer ${layer.id} has a negative start.`);
+        if (positiveNumber(layer.duration, 0) <= 0)
+            throw new Error(`HyperFrame layer ${layer.id} must have a positive duration.`);
+    }
+}
+// Public single-layer serializer so out-of-band builders (devcli composition
+// edits) emit byte-identical layer markup to the composition builder.
+export function renderHyperframeLayerHtml(layer) {
+    return renderLayer(layer);
+}
+// Alpha-capable media formats (mirror of the SPA editor's srcSupportsAlpha).
+// A cut-out or watermark delivered in one of these can carry real
+// transparency, so the layer is flagged data-transparent and never gets an
+// opaque backdrop painted behind it.
+const ALPHA_IMAGE_EXT = /\.(png|webp|gif|avif)(\?|#|$)/i;
+const ALPHA_VIDEO_EXT = /\.(webm|mov)(\?|#|$)/i;
+export function srcSupportsAlpha(kind, src) {
+    const clean = (src ?? "").trim();
+    if (!clean)
+        return false;
+    return kind === "image" ? ALPHA_IMAGE_EXT.test(clean) : ALPHA_VIDEO_EXT.test(clean);
+}
+function renderLayer(layer) {
+    const attrs = timedAttrs(layer);
+    const style = layerStyle(layer);
+    if (layer.kind === "video") {
+        const loop = layer.loop ? ` loop data-loop="true"` : "";
+        const alpha = srcSupportsAlpha("video", layer.src) ? ` data-transparent="true"` : "";
+        // Imported/added video keeps its native audio unless the caller explicitly
+        // mutes it (muted:true) — a persisted muted attribute silences the clip in
+        // BOTH preview unmute and the final render.
+        return `<video ${attrs}${loop}${alpha} src="${escapeAttr(layer.src || "")}" ${layer.muted === true ? "muted " : ""}playsinline preload="auto" style="${escapeAttr(style)}"></video>`;
+    }
+    if (layer.kind === "audio") {
+        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 class="clip" ${attrs} data-kenburns="${escapeAttr(kenBurns.preset)}" src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(kbStyle)}" />`;
+        }
+        return `<img class="clip" ${attrs} src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(style)}" />`;
+    }
+    if (layer.kind === "html") {
+        return `<div class="clip" ${attrs} style="${escapeAttr(style)}">${layer.html || ""}</div>`;
+    }
+    const text = layer.text ?? layer.label ?? "";
+    const inlineStyle = textInlineCss(layer.textBackgroundStyle || "plain", layer.color || "#ffffff", layer.background || "#000000", layer.fontFamily || "TikTok Sans", positiveInteger(layer.fontWeight, 700));
+    const linesStyle = [
+        "display:block",
+        "max-width:100%",
+        "text-align:inherit",
+        `line-height:${positiveNumber(layer.lineHeight, 1.18)}`,
+        "white-space:pre-wrap",
+        "overflow:visible"
+    ].join(";");
+    const captionConfig = layer.kind === "caption" || layer.kind === "text" ? normalizeCaptionConfig(layer.captionAnimation) : null;
+    if (captionConfig) {
+        const words = captionConfig.words ?? estimateCaptionWords(text, positiveNumber(layer.duration, 0));
+        if (words.length) {
+            const vars = captionInlineVars(captionConfig);
+            // text-transform must be INLINE: layerStyle already writes an inline
+            // text-transform:none, which would beat the [data-caption-uppercase]
+            // stylesheet rule. The attribute stays for round-trip state reads.
+            // overflow:visible (overriding layerStyle's hidden) because caption text
+            // wrapping past the cue box must never clip mid-glyph.
+            const upper = captionConfig.uppercase ? ";text-transform:uppercase" : "";
+            const divStyle = `${style}${vars ? `;${vars}` : ""}${upper};overflow:visible`;
+            const captionAttrs = `${attrs} data-caption-animation="${escapeAttr(captionConfig.animation)}"${captionConfig.uppercase ? " data-caption-uppercase=\"1\"" : ""}`;
+            return `<div class="clip" ${captionAttrs} style="${escapeAttr(divStyle)}"><span data-vf-text-lines="true" style="${escapeAttr(linesStyle)}"><span data-vf-text-inline="true" style="${escapeAttr(inlineStyle)}">${captionWordSpansHtml(words)}</span></span></div>`;
+        }
+    }
+    return `<div class="clip" ${attrs} style="${escapeAttr(style)}"><span data-vf-text-lines="true" style="${escapeAttr(linesStyle)}"><span data-vf-text-inline="true" style="${escapeAttr(inlineStyle)}">${escapeHtml(text)}</span></span></div>`;
+}
+// Serializes word windows into the <span data-cap-word> run that the caption
+// stylesheet animates. Delay/duration are the word window relative to the
+// layer start — the ONLY timing source the render adapter needs; the
+// data-word-* attrs exist so editing surfaces can re-derive timings without
+// parsing CSS.
+export function captionWordSpansHtml(words) {
+    return words
+        .map((word) => {
+        const start = Math.max(0, positiveNumber(word.start, 0));
+        const end = Math.max(start + 0.05, positiveNumber(word.end, start + 0.05));
+        const wordStyle = `animation-delay:${num(start)}s;animation-duration:${num(end - start)}s`;
+        return `<span data-cap-word="true" data-word-start="${num(start)}" data-word-end="${num(end)}" style="${wordStyle}">${escapeHtml(word.text)}</span>`;
+    })
+        .join(" ");
+}
+function timedAttrs(layer) {
+    const attrs = [
+        `id="${escapeAttr(layer.id)}"`,
+        `data-hf-id="${escapeAttr(layer.id)}"`,
+        `data-layer-mode="${escapeAttr(layer.mode || "publish")}"`,
+        `data-layer-kind="${escapeAttr(layer.kind)}"`,
+        `data-viral-note="${escapeAttr(layer.viralAlignment || "")}"`,
+        `data-start="${num(positiveNumber(layer.start, 0))}"`,
+        `data-duration="${num(positiveNumber(layer.duration, 0))}"`,
+        `data-track-index="${positiveInteger(layer.track, 0)}"`,
+        `data-label="${escapeAttr(layer.label || layer.id)}"`
+    ];
+    if (layer.mediaStart !== undefined || layer.playbackStart !== undefined) {
+        const mediaStart = positiveNumber(layer.playbackStart ?? layer.mediaStart, 0);
+        attrs.push(`data-media-start="${num(mediaStart)}"`, `data-playback-start="${num(mediaStart)}"`);
+    }
+    if (layer.kind !== "audio") {
+        const transition = normalizeTransition(layer.transition);
+        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")}"`);
+    }
+    return attrs.join(" ");
+}
+function layerStyle(layer) {
+    const styles = [
+        "position:absolute",
+        `left:${positiveNumber(layer.x, 0)}%`,
+        `top:${positiveNumber(layer.y, 0)}%`,
+        `width:${positiveNumber(layer.width, 100)}%`,
+        `height:${positiveNumber(layer.height, 100)}%`,
+        `z-index:${positiveInteger(layer.z, 0)}`,
+        `opacity:${positiveNumber(layer.opacity, 1)}`,
+        `border-radius:${positiveInteger(layer.radius, 0)}px`,
+        "overflow:hidden"
+    ];
+    if (layer.kind === "video" || layer.kind === "image") {
+        styles.push(`object-fit:${layer.fit || "cover"}`);
+    }
+    if (layer.kind !== "audio") {
+        // data-transition picks the keyframes; the inline var supplies the span so
+        // the animation covers exactly the transition window.
+        const transition = normalizeTransition(layer.transition);
+        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";
+        styles.push("display:flex", "align-items:center", "justify-content:center", "padding:3px", `font-family:${fontCssFamily(fontFamily)}, 'TikTok Sans', Montserrat, Abel, sans-serif`, `font-weight:${positiveInteger(layer.fontWeight, 700)}`, `line-height:${positiveNumber(layer.lineHeight, 1.18)}`, "text-align:center", "text-transform:none", `font-size:${positiveInteger(layer.fontSize, 32)}px`, `color:${layer.color || "#ffffff"}`, layer.kind === "shape" && layer.textBackgroundStyle === "panel"
+            ? `background:${layer.background || "transparent"}`
+            : "background:transparent");
+    }
+    for (const [property, value] of Object.entries(layer.style || {})) {
+        styles.push(`${property}:${value}`);
+    }
+    return styles.join(";");
+}
+function textInlineCss(style, color, background, fontFamily, fontWeight) {
+    const styles = [
+        "display:inline",
+        "box-decoration-break:clone",
+        "-webkit-box-decoration-break:clone",
+        "line-height:inherit"
+    ];
+    if (style === "plain" || style === "panel") {
+        styles.push("padding:0", "border-radius:0", "background:transparent", "text-shadow:none", "-webkit-text-stroke:0 transparent");
+    }
+    else if (style === "outline") {
+        styles.push("padding:0", "border-radius:0", "background:transparent", `text-shadow:2px 0 ${background},-2px 0 ${background},0 2px ${background},0 -2px ${background},1.5px 1.5px ${background},-1.5px 1.5px ${background},1.5px -1.5px ${background},-1.5px -1.5px ${background}`, `-webkit-text-stroke:1.5px ${background}`, "paint-order:stroke fill");
+    }
+    else if (style === "highlight-solid") {
+        styles.push("padding:0.07em 0.46em 0.09em", "border-radius:0.32em", `background:${background}`, "text-shadow:none", "-webkit-text-stroke:0 transparent");
+    }
+    else if (style === "highlight-translucent") {
+        styles.push("padding:0.07em 0.46em 0.09em", "border-radius:0.32em", `background:${rgbaFromColor(background, 0.34)}`, "text-shadow:none", "-webkit-text-stroke:0 transparent");
+    }
+    styles.push(`font-family:${fontCssFamily(fontFamily)}, 'TikTok Sans', sans-serif`);
+    styles.push(`font-weight:${fontWeight}`);
+    styles.push(`color:${color}`);
+    return styles.join(";");
+}
+function fontCssFamily(font) {
+    return font === "Georgia" ? "Georgia" : `'${font.replaceAll("'", "")}'`;
+}
+function rgbaFromColor(value, alpha) {
+    const clean = String(value || "").trim();
+    const hex = clean.startsWith("#") ? clean.slice(1) : "";
+    if (hex.length === 3 || hex.length === 6) {
+        const full = hex.length === 3 ? hex.split("").map((part) => part + part).join("") : hex;
+        const numeric = Number.parseInt(full, 16);
+        if (Number.isFinite(numeric)) {
+            const red = (numeric >> 16) & 255;
+            const green = (numeric >> 8) & 255;
+            const blue = numeric & 255;
+            return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+        }
+    }
+    return clean.startsWith("rgba(") || clean.startsWith("rgb(") ? clean : `rgba(0, 0, 0, ${alpha})`;
+}
+function positiveNumber(value, fallback) {
+    const next = Number(value);
+    return Number.isFinite(next) && next >= 0 ? next : fallback;
+}
+function positiveInteger(value, fallback) {
+    const next = Math.round(Number(value));
+    return Number.isFinite(next) && next >= 0 ? next : fallback;
+}
+function num(value) {
+    return Number(Number(value || 0).toFixed(3)).toString();
+}
+function escapeHtml(value) {
+    return String(value ?? "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+function escapeAttr(value) {
+    return escapeHtml(String(value ?? ""));
+}
+//# sourceMappingURL=composition.js.map