@tikagent/video-editor-cli 0.0.0-stage → 1.5.0-preview.2

package/dist/runtime/library/svg/countdown-ring.svg

@@ -0,0 +1,92 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <!-- FableCut animated SVG · one-shot (~3s) · countdown ring 3 → 2 → 1
+       Useful for video intros, transitions, and "ready" cues. -->
+  <style>
+    /* Ring sweep — draws a circular arc over 1s per digit */
+    .ring {
+      fill: none;
+      stroke-width: 8;
+      stroke-linecap: round;
+      stroke-dasharray: 502.65;
+      stroke-dashoffset: 502.65;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: sweep 1s cubic-bezier(.4,0,.2,1) both;
+      animation-delay: var(--d, 0s);
+    }
+    @keyframes sweep {
+      0%   { stroke-dashoffset: 502.65; opacity: 0.3; }
+      10%  { opacity: 1; }
+      100% { stroke-dashoffset: 0; opacity: 1; }
+    }
+
+    /* Digit pop-in */
+    .digit {
+      font-family: 'Helvetica Neue', Arial, sans-serif;
+      font-weight: 700;
+      font-size: 120px;
+      text-anchor: middle;
+      dominant-baseline: central;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: pop 0.4s cubic-bezier(.34,1.56,.64,1) both,
+                 hideAtEnd 0.01s linear 1s both;
+      animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.99s);
+      opacity: 0;
+    }
+    @keyframes pop {
+      0%   { transform: scale(0.3); opacity: 0; }
+      60%  { transform: scale(1.1); opacity: 1; }
+      100% { transform: scale(1);   opacity: 1; }
+    }
+    @keyframes hideAtEnd {
+      to { opacity: 0; }
+    }
+
+    /* Digit fade-out at end of each second */
+    .digit-out {
+      animation: fadeOut 0.25s ease-in both;
+    }
+    @keyframes fadeOut {
+      0%   { opacity: 1; transform: scale(1); }
+      100% { opacity: 0; transform: scale(0.8); }
+    }
+
+    /* Outer glow pulse */
+    .glow {
+      fill: none;
+      stroke-width: 2;
+      opacity: 0;
+      animation: glowPulse 1s ease-out both;
+      animation-delay: var(--d, 0s);
+    }
+    @keyframes glowPulse {
+      0%   { opacity: 0.6; stroke-width: 8; }
+      100% { opacity: 0;   stroke-width: 30; }
+    }
+  </style>
+
+  <!-- "3" group — 0s to 1s -->
+  <g>
+    <!-- glow -->
+    <circle class="glow" style="--d:0s" cx="200" cy="200" r="150" stroke="#ff6b6b"/>
+    <!-- ring -->
+    <circle class="ring" style="--d:0s" cx="200" cy="200" r="80" stroke="#ff6b6b"/>
+    <!-- digit -->
+    <text class="digit" style="--d:0s" x="200" y="200" fill="#ff6b6b">3</text>
+  </g>
+
+  <!-- "2" group — 1s to 2s -->
+  <g>
+    <circle class="glow" style="--d:1s" cx="200" cy="200" r="150" stroke="#ffd166"/>
+    <circle class="ring" style="--d:1s" cx="200" cy="200" r="80" stroke="#ffd166"/>
+    <text class="digit" style="--d:1s" x="200" y="200" fill="#ffd166">2</text>
+  </g>
+
+  <!-- "1" group — 2s to 3s -->
+  <g>
+    <circle class="glow" style="--d:2s" cx="200" cy="200" r="150" stroke="#6ee7b7"/>
+    <circle class="ring" style="--d:2s" cx="200" cy="200" r="80" stroke="#6ee7b7"/>
+    <text class="digit" style="--d:2s" x="200" y="200" fill="#6ee7b7">1</text>
+  </g>
+</svg>

package/dist/runtime/library/svg/equalizer.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
+  <!-- FableCut animated SVG · loops · audio equalizer bars (music sections / podcast) -->
+  <style>
+    .bar { transform-box: fill-box; transform-origin: center bottom;
+           animation: eq 0.8s ease-in-out infinite; }
+    @keyframes eq {
+      0%, 100% { transform: scaleY(0.25); }
+      50%      { transform: scaleY(1); }
+    }
+  </style>
+  <g fill="#4f8cff">
+    <rect class="bar" style="--d:0s"    x="40"  y="40" width="34" height="220" rx="8"/>
+    <rect class="bar" style="--d:0.25s" x="104" y="40" width="34" height="220" rx="8" fill="#7b6cff"/>
+    <rect class="bar" style="--d:0.5s"  x="168" y="40" width="34" height="220" rx="8" fill="#6ee7b7"/>
+    <rect class="bar" style="--d:0.15s" x="232" y="40" width="34" height="220" rx="8" fill="#ffd166"/>
+    <rect class="bar" style="--d:0.4s"  x="296" y="40" width="34" height="220" rx="8" fill="#ff5d73"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/glow-orbs.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut animated SVG · loops · floating bokeh orbs. Use on V4 with props {blend:"screen", opacity:0.7, fit:"cover"} -->
+  <style>
+    .o { transform-box: fill-box; transform-origin: center;
+         animation: drift 9s ease-in-out infinite; }
+    @keyframes drift {
+      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
+      50%      { transform: translate(30px,-50px) scale(1.25); opacity: 0.85; }
+    }
+    .p { animation: puff 5s ease-in-out infinite; }
+    @keyframes puff { 0%,100% { opacity: 0.2; } 50% { opacity: 0.7; } }
+  </style>
+  <defs>
+    <radialGradient id="g" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#fff" stop-opacity="0.95"/>
+      <stop offset="45%" stop-color="#bfa8ff" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#7b6cff" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g fill="url(#g)">
+    <circle class="o" style="--d:0s"   cx="220" cy="180" r="120"/>
+    <circle class="o" style="--d:2.5s" cx="980" cy="230" r="160"/>
+    <circle class="o" style="--d:1.2s" cx="640" cy="520" r="100"/>
+    <circle class="o" style="--d:4s"   cx="1120" cy="560" r="90"/>
+    <circle class="p" style="--d:3s"   cx="430" cy="600" r="60"/>
+    <circle class="p" style="--d:1.8s" cx="820" cy="120" r="50"/>
+    <circle class="o" style="--d:5.5s" cx="120" cy="480" r="70"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/heart-pop.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="600" viewBox="0 0 500 600">
+  <!-- FableCut animated SVG · loops · beating heart with floating hearts (like / reaction) -->
+  <style>
+    .beat { transform-box: fill-box; transform-origin: center;
+            animation: beat 1.2s ease-in-out infinite; }
+    @keyframes beat {
+      0%, 100% { transform: scale(1); }
+      15%      { transform: scale(1.18); }
+      30%      { transform: scale(1); }
+      45%      { transform: scale(1.12); }
+    }
+    .float { transform-box: fill-box; transform-origin: center;
+             animation: rise 3s ease-in infinite; }
+    @keyframes rise {
+      0%   { transform: translate(0,0) scale(0.3); opacity: 0; }
+      20%  { opacity: 0.9; }
+      100% { transform: translate(var(--tx,0px),-360px) scale(1); opacity: 0; }
+    }
+  </style>
+  <g fill="#ff4d6d">
+    <path class="beat" style="--d:0s" d="M250 470 C120 380 70 300 70 220 C70 150 120 110 175 110 C215 110 240 135 250 160 C260 135 285 110 325 110 C380 110 430 150 430 220 C430 300 380 380 250 470z"/>
+    <path class="float" style="--d:0s; --tx:-70px" opacity="0.8" d="M150 460 c-40 -28 -56 -52 -56 -78 c0 -22 16 -34 33 -34 c12 0 20 8 23 15 c3 -7 11 -15 23 -15 c17 0 33 12 33 34 c0 26 -16 50 -56 78z"/>
+    <path class="float" style="--d:1s; --tx:60px"  opacity="0.7" d="M330 470 c-40 -28 -56 -52 -56 -78 c0 -22 16 -34 33 -34 c12 0 20 8 23 15 c3 -7 11 -15 23 -15 c17 0 33 12 33 34 c0 26 -16 50 -56 78z"/>
+    <path class="float" style="--d:2s; --tx:15px"  opacity="0.6" d="M250 480 c-30 -21 -42 -39 -42 -58 c0 -16 12 -26 25 -26 c9 0 15 6 17 11 c2 -5 8 -11 17 -11 c13 0 25 10 25 26 c0 19 -12 37 -42 58z"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/loading-dots.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120" viewBox="0 0 300 120">
+  <!-- FableCut animated SVG · loops · three bouncing dots (loading / buffering) -->
+  <style>
+    .d { transform-box: fill-box; transform-origin: center;
+         animation: bob 0.9s cubic-bezier(.4,0,.6,1) infinite; }
+    @keyframes bob {
+      0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
+      40%           { transform: translateY(-26px) scale(1.15); opacity: 1; }
+    }
+  </style>
+  <g fill="#7b6cff">
+    <circle class="d" style="--d:0s"    cx="80"  cy="60" r="18"/>
+    <circle class="d" style="--d:0.15s" cx="150" cy="60" r="18"/>
+    <circle class="d" style="--d:0.3s"  cx="220" cy="60" r="18"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/location-pin.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500">
+  <!-- FableCut animated SVG · pin drops in once (~0.9s), then ground ring pulses forever (map / travel) -->
+  <style>
+    .pin { transform-box: fill-box; transform-origin: center bottom;
+           animation: drop 0.8s cubic-bezier(.5,1.6,.5,1) both; }
+    @keyframes drop {
+      0%   { transform: translateY(-320px) scale(0.6); opacity: 0; }
+      60%  { opacity: 1; }
+      80%  { transform: translateY(0) scaleY(0.82) scaleX(1.12); }
+      100% { transform: translateY(0) scale(1); opacity: 1; }
+    }
+    .ping { transform-box: fill-box; transform-origin: center;
+            animation: ping 1.8s ease-out infinite; }
+    @keyframes ping {
+      0%   { transform: scale(0.3); opacity: 0.8; }
+      100% { transform: scale(1.6); opacity: 0; }
+    }
+  </style>
+  <ellipse class="ping" style="--d:0.9s" cx="200" cy="430" rx="90" ry="26" fill="none" stroke="#ff5d73" stroke-width="6"/>
+  <g class="pin" style="--d:0s">
+    <path d="M200 90 C120 90 70 150 70 220 C70 300 160 380 200 430 C240 380 330 300 330 220 C330 150 280 90 200 90z" fill="#ff5d73"/>
+    <circle cx="200" cy="215" r="46" fill="#fff"/>
+    <circle cx="200" cy="215" r="22" fill="#ff5d73"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/lower-third.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut animated SVG · one-shot (~1.2s in) · lower-third bar.
+       Put your name/role with FableCut TEXT clips on top of this. -->
+  <style>
+    .bar  { animation: slide 0.7s cubic-bezier(.2,.9,.25,1) both; }
+    .rule { animation: grow 0.6s cubic-bezier(.2,.9,.25,1) both; transform-origin: left center; }
+    .dot  { transform-box: fill-box; transform-origin: center; animation: pop 0.45s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes slide { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    @keyframes grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+    @keyframes pop   { from { transform: scale(0); } to { transform: scale(1); } }
+  </style>
+  <g>
+    <rect class="bar" style="--d:0s" x="60" y="540" width="520" height="86" rx="14" fill="#101018" opacity="0.85"/>
+    <rect class="rule" style="--d:0.35s" x="60" y="632" width="520" height="6" rx="3" fill="#7b6cff"/>
+    <circle class="dot" style="--d:0.55s" cx="96" cy="583" r="14" fill="#7b6cff"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/new-badge.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" viewBox="0 0 360 360">
+  <!-- FableCut animated SVG · badge pops + starburst spins forever (sticker / "NEW" / sale).
+       Add your own TEXT clip on top for the label. -->
+  <style>
+    .burst { transform-box: fill-box; transform-origin: center;
+             animation: spin 14s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .in { transform-box: fill-box; transform-origin: center;
+          animation: pop 0.6s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes pop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0deg); } }
+  </style>
+  <g class="in" style="--d:0s">
+    <path class="burst" style="--d:0s" fill="#ff5d73" d="M180 20
+      l26 34 40 -18 6 44 44 6 -18 40 34 26 -34 26 18 40 -44 6 -6 44 -40 -18 -26 34 -26 -34 -40 18 -6 -44 -44 -6 18 -40 -34 -26 34 -26 -18 -40 44 -6 6 -44 40 18z"/>
+    <circle cx="180" cy="180" r="96" fill="#ffd166"/>
+    <circle cx="180" cy="180" r="96" fill="none" stroke="#fff" stroke-width="5" stroke-dasharray="10 12"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/progress-bar.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="120" viewBox="0 0 800 120">
+  <!-- FableCut animated SVG · one-shot (~2s) · progress bar fills left→right with a moving shine -->
+  <style>
+    .fill { transform-box: fill-box; transform-origin: left center;
+            animation: grow 2s cubic-bezier(.5,.05,.2,1) both; }
+    @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+    .knob { animation: run 2s cubic-bezier(.5,.05,.2,1) both; }
+    @keyframes run { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateX(720px); opacity: 1; } }
+  </style>
+  <rect x="40" y="46" width="720" height="28" rx="14" fill="#2a2a3a"/>
+  <clipPath id="track"><rect x="40" y="46" width="720" height="28" rx="14"/></clipPath>
+  <g clip-path="url(#track)">
+    <rect class="fill" style="--d:0s" x="40" y="46" width="720" height="28" fill="#7b6cff"/>
+  </g>
+  <circle class="knob" style="--d:0s" cx="40" cy="60" r="22" fill="#fff"/>
+</svg>

package/dist/runtime/library/svg/radial-pulse.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
+  <!-- FableCut animated SVG · loops · concentric pulse rings (attention / notify / sonar) -->
+  <style>
+    .r { transform-box: fill-box; transform-origin: center;
+         animation: pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
+    @keyframes pulse {
+      0%   { transform: scale(0.1); opacity: 0; }
+      15%  { opacity: 0.9; }
+      100% { transform: scale(1); opacity: 0; }
+    }
+  </style>
+  <g fill="none" stroke="#7b6cff" stroke-width="5">
+    <circle class="r" style="--d:0s"   cx="300" cy="300" r="290"/>
+    <circle class="r" style="--d:0.6s" cx="300" cy="300" r="290"/>
+    <circle class="r" style="--d:1.2s" cx="300" cy="300" r="290"/>
+    <circle class="r" style="--d:1.8s" cx="300" cy="300" r="290"/>
+  </g>
+  <circle cx="300" cy="300" r="30" fill="#7b6cff"/>
+</svg>

package/dist/runtime/library/svg/rating-stars.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="240" viewBox="0 0 800 240">
+  <!-- FableCut animated SVG · one-shot (~1.1s) · 5 stars pop in sequence (review / rating) -->
+  <style>
+    .st { transform-box: fill-box; transform-origin: center;
+          animation: pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes pop {
+      0%   { transform: scale(0) rotate(-60deg); opacity: 0; }
+      100% { transform: scale(1) rotate(0deg);   opacity: 1; }
+    }
+    .shine { transform-box: fill-box; transform-origin: center;
+             animation: gl 0.4s ease-out both; }
+    @keyframes gl { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.4); } }
+  </style>
+  <g fill="#ffd166">
+    <path class="st" style="--d:0s"    d="M110 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.12s" d="M255 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.24s" d="M400 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.36s" d="M545 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.48s" d="M690 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+  </g>
+  <g fill="#fffbe6">
+    <circle class="shine" style="--d:0.62s" cx="110" cy="120" r="30"/>
+    <circle class="shine" style="--d:0.74s" cx="700" cy="120" r="30"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/rec-indicator.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="80" viewBox="0 0 200 80">
+  <!-- FableCut animated SVG · loop · live-recording REC indicator
+       Pulsing red dot + "REC" label. Great for "live" overlays. -->
+  <style>
+    .dot {
+      fill: #ff3b30;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%      { opacity: 0.4; transform: scale(0.75); }
+    }
+    .ring {
+      fill: none;
+      stroke: #ff3b30;
+      stroke-width: 2;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: ringPulse 1.2s ease-out infinite;
+    }
+    @keyframes ringPulse {
+      0%   { opacity: 0.8; r: 14; }
+      100% { opacity: 0;   r: 28; }
+    }
+    .label {
+      font-family: 'Helvetica Neue', Arial, sans-serif;
+      font-weight: 700;
+      font-size: 28px;
+      fill: #ff3b30;
+      letter-spacing: 3px;
+    }
+  </style>
+  <!-- Pulsing ring -->
+  <circle class="ring" style="--d:0s" cx="30" cy="40" r="14"/>
+  <!-- Solid dot -->
+  <circle class="dot" style="--d:0s" cx="30" cy="40" r="10"/>
+  <!-- REC text -->
+  <text class="label" x="58" y="48">REC</text>
+</svg>

package/dist/runtime/library/svg/sparkles.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
+  <!-- FableCut animated SVG · loops · twinkling sparkles overlay -->
+  <style>
+    .sp { transform-box: fill-box; transform-origin: center; animation: tw 1.6s ease-in-out infinite; }
+    @keyframes tw {
+      0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
+      50%      { transform: scale(1) rotate(90deg);  opacity: 1; }
+    }
+  </style>
+  <g fill="#fff8d8">
+    <path class="sp" style="--d:0s"    d="M120 90 l10 26 26 10 -26 10 -10 26 -10 -26 -26 -10 26 -10z"/>
+    <path class="sp" style="--d:0.35s" d="M640 70 l8 20 20 8 -20 8 -8 20 -8 -20 -20 -8 20 -8z"/>
+    <path class="sp" style="--d:0.7s"  d="M420 180 l12 30 30 12 -30 12 -12 30 -12 -30 -30 -12 30 -12z"/>
+    <path class="sp" style="--d:1.05s" d="M200 320 l8 20 20 8 -20 8 -8 20 -8 -20 -20 -8 20 -8z"/>
+    <path class="sp" style="--d:1.3s"  d="M660 330 l10 24 24 10 -24 10 -10 24 -10 -24 -24 -10 24 -10z"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/speech-bubble.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="360" viewBox="0 0 500 360">
+  <!-- FableCut animated SVG · bubble pops in (~0.5s), then typing dots loop (chat / comment) -->
+  <style>
+    .bub { transform-box: fill-box; transform-origin: 250px 280px;
+           animation: pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+    .td { transform-box: fill-box; transform-origin: center;
+          animation: type 1.2s ease-in-out infinite; }
+    @keyframes type {
+      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+      30%           { transform: translateY(-12px); opacity: 1; }
+    }
+  </style>
+  <g class="bub" style="--d:0s">
+    <rect x="60" y="50" width="380" height="200" rx="40" fill="#ffffff"/>
+    <path d="M180 245 L150 320 L250 245 Z" fill="#ffffff"/>
+  </g>
+  <g fill="#7b6cff">
+    <circle class="td" style="--d:0.5s"  cx="185" cy="150" r="20"/>
+    <circle class="td" style="--d:0.65s" cx="250" cy="150" r="20"/>
+    <circle class="td" style="--d:0.8s"  cx="315" cy="150" r="20"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/subscribe-bell.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
+  <!-- FableCut animated SVG · one-shot pop then repeated ring-swing (notification / subscribe) -->
+  <style>
+    .badge { transform-box: fill-box; transform-origin: center;
+             animation: pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
+    .bell { transform-box: fill-box; transform-origin: 250px 150px;
+            animation: swing 2.2s ease-in-out infinite; }
+    @keyframes swing {
+      0%, 60%, 100% { transform: rotate(0deg); }
+      68% { transform: rotate(16deg); }
+      76% { transform: rotate(-13deg); }
+      84% { transform: rotate(8deg); }
+      92% { transform: rotate(-4deg); }
+    }
+    .clap { transform-box: fill-box; transform-origin: 250px 150px;
+            animation: swing 2.2s ease-in-out infinite; }
+    .dot { transform-box: fill-box; transform-origin: center;
+           animation: ping 2.2s ease-out infinite; }
+    @keyframes ping { 0%,60% { transform: scale(0); opacity: 0; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
+  </style>
+  <circle class="badge" style="--d:0s" cx="250" cy="250" r="180" fill="#ff5d73"/>
+  <g class="bell" style="--d:0.5s" fill="#fff">
+    <path d="M250 150 c-58 0 -84 44 -84 104 c0 56 -20 74 -30 90 l228 0 c-10 -16 -30 -34 -30 -90 c0 -60 -26 -104 -84 -104z"/>
+    <circle cx="250" cy="146" r="16"/>
+  </g>
+  <path class="clap" style="--d:0.5s" d="M228 356 a22 22 0 0 0 44 0z" fill="#fff"/>
+  <circle class="dot" style="--d:0.5s" cx="372" cy="128" r="26" fill="#ffd166"/>
+</svg>

package/dist/runtime/library/svg/subscribe-pill.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="560" height="160" viewBox="0 0 560 160">
+  <!-- FableCut animated SVG · one-shot (~1.4s) · subscribe pill + ringing bell -->
+  <style>
+    .pill { transform-box: fill-box; transform-origin: center; animation: pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
+    .txt  { animation: fadein 0.35s ease both; }
+    .bell { transform-box: fill-box; transform-origin: 50% 15%; animation: ring 0.7s ease-in-out both; }
+    @keyframes pop    { from { transform: scale(0); } to { transform: scale(1); } }
+    @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes ring   { 0%,100% { transform: rotate(0); } 20% { transform: rotate(24deg); }
+                        45% { transform: rotate(-18deg); } 70% { transform: rotate(10deg); } }
+  </style>
+  <g class="pill" style="--d:0s">
+    <rect x="20" y="30" width="430" height="100" rx="50" fill="#e11d48"/>
+    <text class="txt" style="--d:0.35s" x="235" y="97" text-anchor="middle"
+          font-family="Arial, sans-serif" font-size="46" font-weight="800" fill="#ffffff"
+          letter-spacing="2">SUBSCRIBE</text>
+  </g>
+  <g class="bell" style="--d:0.6s">
+    <path d="M505 45 c-18 0 -30 14 -30 34 v18 l-10 14 h80 l-10 -14 v-18 c0 -20 -12 -34 -30 -34z" fill="#ffd166"/>
+    <circle cx="505" cy="118" r="8" fill="#ffd166"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/swipe-up.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="200" viewBox="0 0 120 200">
+  <!-- FableCut animated SVG · loop · "swipe up" hand gesture
+       Bouncing upward arrow/hand for social-media CTAs. -->
+  <style>
+    .hand {
+      transform-box: fill-box;
+      transform-origin: center bottom;
+      animation: bounce 1s cubic-bezier(.36,0,.66,1) infinite;
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      40%      { transform: translateY(-30px); }
+      60%      { transform: translateY(-30px); }
+    }
+    .arrow {
+      stroke: #ffffff;
+      stroke-width: 4;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+      opacity: 0.9;
+    }
+    .fade-arrow {
+      animation: fadeUp 1s ease-in-out infinite;
+      animation-delay: var(--d, 0s);
+    }
+    @keyframes fadeUp {
+      0%, 100% { opacity: 0.2; transform: translateY(10px); }
+      40%      { opacity: 0.9; transform: translateY(-10px); }
+      60%      { opacity: 0.9; transform: translateY(-10px); }
+    }
+  </style>
+  <!-- Trailing chevrons (fade up) -->
+  <g class="fade-arrow" style="--d:0s">
+    <polyline class="arrow" points="30,140 60,110 90,140"/>
+  </g>
+  <g class="fade-arrow" style="--d:0.15s">
+    <polyline class="arrow" points="30,170 60,140 90,170" opacity="0.5"/>
+  </g>
+  <!-- Hand / main chevron -->
+  <g class="hand">
+    <polyline class="arrow" points="20,100 60,55 100,100" stroke-width="5"/>
+    <!-- Palm base -->
+    <rect x="45" y="95" width="30" height="12" rx="6" fill="#ffffff" opacity="0.85"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/underline-swoosh.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="120" viewBox="0 0 600 120">
+  <!-- FableCut animated SVG · one-shot (~0.8s) · hand-drawn underline swoosh.
+       Place under a title text clip; tint via the clip's hue slider. -->
+  <style>
+    .stroke {
+      stroke-dasharray: 640; stroke-dashoffset: 640;
+      animation: draw 0.8s cubic-bezier(.3,.8,.3,1) both;
+    }
+    @keyframes draw { to { stroke-dashoffset: 0; } }
+  </style>
+  <path class="stroke" style="--d:0s" d="M20 70 C 180 40, 420 40, 580 62" fill="none"
+        stroke="#ffd166" stroke-width="14" stroke-linecap="round"/>
+  <path class="stroke" style="--d:0.18s" d="M60 96 C 220 74, 380 74, 540 90" fill="none"
+        stroke="#ffd166" stroke-width="9" stroke-linecap="round" opacity="0.7"/>
+</svg>

package/dist/runtime/manifest.json

@@ -0,0 +1,40 @@
+{
+  "manifest_version": "0.2",
+  "name": "fablecut",
+  "display_name": "FableCut",
+  "version": "1.7.0",
+  "description": "Zero-dependency browser video editor that AI agents can drive — JSON timeline, MCP tools, live-reloading UI.",
+  "long_description": "FableCut is a Premiere-style non-linear video editor that runs in the browser with zero npm dependencies. An AI agent edits video by patching a single project.json timeline (clips, keyframes, transitions, text animations, filters, speed ramps, adjustment layers) through MCP tools; the open editor UI live-reloads within ~150 ms and exports MP4 via ffmpeg. Includes reference-video analysis (shot cuts, beats, BPM, energy, drop) so agents can remake an edit with new footage.",
+  "author": {
+    "name": "Ronak Parmar",
+    "url": "https://github.com/ronak-create"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ronak-create/FableCut"
+  },
+  "homepage": "https://ronak-create.github.io/FableCut/",
+  "documentation": "https://github.com/ronak-create/FableCut/blob/main/CLAUDE.md",
+  "license": "MIT",
+  "keywords": ["video-editor", "nle", "timeline", "canvas", "mcp", "ai-agent", "ffmpeg"],
+  "server": {
+    "type": "node",
+    "entry_point": "mcp-server.js",
+    "mcp_config": {
+      "command": "node",
+      "args": ["${__dirname}/mcp-server.js"]
+    }
+  },
+  "tools": [
+    { "name": "fablecut_status", "description": "Auto-start the editor server and return its URL plus a project summary" },
+    { "name": "fablecut_docs", "description": "Return the full editor manual (project.json schema, props, recipes), optionally a single section" },
+    { "name": "fablecut_get_project", "description": "Read the timeline JSON (compact mode available for token-efficient planning)" },
+    { "name": "fablecut_set_project", "description": "Replace the timeline JSON with optimistic-concurrency conflict detection" },
+    { "name": "fablecut_patch_project", "description": "Apply targeted, merge-safe ops (add/update/remove clip or media, set project fields)" },
+    { "name": "fablecut_import_media", "description": "Copy a local file into the project's media folder and register it" },
+    { "name": "fablecut_analyze_reference", "description": "Analyze a reference video into an edit blueprint: shot cuts, beats, BPM, energy curve, drop; extracts its music" }
+  ],
+  "compatibility": {
+    "runtimes": { "node": ">=18" }
+  }
+}

package/dist/runtime/meter-worklet.js

@@ -0,0 +1 @@
+function shelfCoeffs(s){const t=.7071752369554196,h=Math.tan(1681.974450955533*Math.PI/s),e=Math.pow(10,.19999219269866736),i=Math.pow(e,.5),a=1+h/t+h*h;return{b0:(e+i*h/t+h*h)/a,b1:2*(h*h-e)/a,b2:(e-i*h/t+h*h)/a,a1:2*(h*h-1)/a,a2:(1-h/t+h*h)/a}}function hpfCoeffs(s){const t=.5003270373238773,h=Math.tan(38.13547087613982*Math.PI/s),e=1+h/t+h*h;return{b0:1/e,b1:-2/e,b2:1/e,a1:2*(h*h-1)/e,a2:(1-h/t+h*h)/e}}function makeBiquad(s){return{b0:s.b0,b1:s.b1,b2:s.b2,a1:s.a1,a2:s.a2,z1:0,z2:0}}function biquadStep(s,t){const h=s.b0*t+s.z1;return s.z1=s.b1*t-s.a1*h+s.z2,s.z2=s.b2*t-s.a2*h,h}class FableCutMeterProcessor extends AudioWorkletProcessor{constructor(s){super();const t=s&&s.processorOptions||{};this._hopBlocks=Math.max(1,t.hopBlocks||8),this._nTracks=Math.max(1,t.nTracks||1),this._ids=t.trackIds||[],this._block=0,this._sumSq=new Float64Array(this._nTracks),this._peak=new Float64Array(this._nTracks),this._sumSqK=new Float64Array(this._nTracks),this._frames=0;const h=shelfCoeffs(sampleRate),e=hpfCoeffs(sampleRate);this._shelfL=[],this._hpfL=[],this._shelfR=[],this._hpfR=[];for(let s=0;s<this._nTracks;s++)this._shelfL.push(makeBiquad(h)),this._hpfL.push(makeBiquad(e)),this._shelfR.push(makeBiquad(h)),this._hpfR.push(makeBiquad(e));const i=128*this._hopBlocks;this._lufsLen=Math.max(1,Math.round(.4*sampleRate/i)),this._lufsRing=[],this._lufsIdx=[],this._lufsFilled=[];for(let s=0;s<this._nTracks;s++)this._lufsRing.push(new Float64Array(this._lufsLen)),this._lufsIdx.push(0),this._lufsFilled.push(0)}process(s,t){const h=t[0],e=h&&h[0],i=h&&(h[1]||h[0]);e&&e.fill(0),i&&i!==e&&i.fill(0);let a=0;for(let t=0;t<this._nTracks;t++){const h=s[t],l=h&&h[0],r=l?h[0]:null,o=l?h[1]||h[0]:null,_=r?r.length:e?e.length:128;a=_;let n=this._sumSq[t],u=this._peak[t],f=this._sumSqK[t];const c=this._shelfL[t],p=this._hpfL[t],k=this._shelfR[t],m=this._hpfR[t];for(let s=0;s<_;s++){const t=r?r[s]:0,h=o?o[s]:0,a=.5*(t+h);n+=a*a;const l=t>=0?t:-t,_=h>=0?h:-h;l>u&&(u=l),_>u&&(u=_);const b=biquadStep(p,biquadStep(c,t)),d=biquadStep(m,biquadStep(k,h));f+=b*b+d*d,e&&(e[s]+=t),i&&i!==e&&(i[s]+=h)}this._sumSq[t]=n,this._peak[t]=u,this._sumSqK[t]=f}if(a&&(this._frames+=a),this._block++,this._block>=this._hopBlocks){const s=Math.max(1,this._frames),t=new Array(this._nTracks),h=new Array(this._nTracks),e=new Array(this._nTracks);for(let i=0;i<this._nTracks;i++){t[i]=Math.sqrt(this._sumSq[i]/s),h[i]=this._peak[i];const a=this._sumSqK[i]/s,l=this._lufsRing[i],r=this._lufsIdx[i];l[r]=a,this._lufsIdx[i]=(r+1)%this._lufsLen,this._lufsFilled[i]<this._lufsLen&&this._lufsFilled[i]++;let o=0;const _=this._lufsFilled[i];for(let s=0;s<_;s++)o+=l[s];const n=o/Math.max(1,_);e[i]=n>1e-12?10*Math.log10(n)-.691:-70,this._sumSq[i]=0,this._peak[i]=0,this._sumSqK[i]=0}this.port.postMessage({type:"meter",trackIds:this._ids,rms:t,peak:h,lufs:e,frames:s}),this._block=0,this._frames=0}return!0}}registerProcessor("fablecut-meter",FableCutMeterProcessor);

package/dist/runtime/optimized-encoder-worker.js

@@ -0,0 +1 @@
+"use strict";let e,t,s=Promise.resolve();self.onmessage=({data:{id:a,bitmap:i}})=>{s=s.then(async()=>{try{e&&e.width===i.width&&e.height===i.height||(e=new OffscreenCanvas(i.width,i.height),t=e.getContext("2d")),t.drawImage(i,0,0);const s=await e.convertToBlob({type:"image/jpeg",quality:.95});self.postMessage({id:a,blob:s})}catch(e){self.postMessage({id:a,error:e.message})}finally{i.close()}})};

package/dist/runtime/optimized-export.js

@@ -0,0 +1 @@
+"use strict";class OrderedFrameQueue{constructor(e,t=4,a=33554432){this.write=e,this.maxFrames=t,this.maxBytes=a,this.pending=[],this.bytes=0,this.peakBytes=0,this.error=null}async push(e){for(;this.pending.length&&(this.pending.length>=this.maxFrames||this.bytes+e.size>this.maxBytes);)await this.pending[0];if(this.error)throw this.error;this.bytes+=e.size,this.peakBytes=Math.max(this.peakBytes,this.bytes);const t=(this.pending.at(-1)||Promise.resolve()).then(()=>{if(this.error)throw this.error;return this.write(e)}).catch(e=>{this.error=e}).finally(()=>{this.bytes-=e.size,this.pending.shift()});this.pending.push(t)}async finish(){if(await Promise.all(this.pending),this.error)throw this.error}cancel(){this.error=this.error||new Error("cancelled")}}function cachedFrameIndex(e,t){let a=0,s=e.length;for(;a<s;){const r=a+s>>>1;e[r]<=t+1e-5?a=r+1:s=r}return a-1}function sourceBlockPlan(e,t){const a=[];for(const s of e){const e=Math.max(.1,Math.min(8,Number(s.props?.speed)||1)),r=s.start+s.duration;let i=Math.max(0,Math.ceil(s.start*t-1e-7));for(;i/t<r;){const r=i/t,o=s.in+(r-s.start)*e,n=Math.floor(o/5);a.push({clip:s,time:o,block:n,neededAt:r}),i=Math.max(i+1,Math.ceil((s.start+(5*(n+1)-s.in)/e)*t-1e-7))}}return a.sort((e,t)=>e.neededAt-t.neededAt)}function sourceReadAhead(e,t,a){return sourceBlockPlan(e,a).filter(e=>e.neededAt>t).slice(0,3)}class SourceReadAhead{constructor(e,t,{concurrency:a=3,syncPlan:s=async()=>{},key:r=e=>e}={}){this.load=e,this.requested=t,this.concurrency=a,this.syncPlan=s,this.key=r,this.plan=[],this.active=new Map,this.stopped=!1,this.sequence=0,this.readySequence=0,this.syncing=Promise.resolve(),this.signature=""}update(e,t=[]){if(this.stopped)return;const a=JSON.stringify([e.map(this.key),t]);if(a===this.signature)return;this.signature=a,this.plan=e;const s=++this.sequence;this.syncing=this.syncing.catch(()=>{}).then(()=>this.syncPlan(e,t,s)).then(()=>{s===this.sequence&&(this.readySequence=s,this.pump())}).catch(()=>{})}pump(){if(!this.stopped&&this.readySequence===this.sequence)for(const e of this.plan){if(this.active.size>=this.concurrency)break;const t=this.key(e);if(this.active.has(t)||this.requested(e))continue;const a=this.sequence,s=Promise.resolve().then(()=>this.load(e,a)).catch(()=>{}).finally(()=>{this.active.delete(t),this.pump()});this.active.set(t,s)}}async stop(){this.stopped=!0,this.plan=[],await this.syncing,await Promise.allSettled(this.active.values())}}class ExportWaitTracker{constructor(e,{now:t=()=>performance.now(),interval:a=500,threshold:s=250}={}){this.report=e,this.now=t,this.threshold=s,this.active=new Set,this.sequence=0,this.last=null,this.timer=setInterval(()=>this.flush(),a)}async track(e,t){const a={reason:e,started:this.now()};this.active.add(a);try{return await t()}finally{this.active.delete(a)}}flush(){const e=[...this.active].filter(e=>this.now()-e.started>=this.threshold).sort((e,t)=>["source-block","video-seek","source-image","frame-assets","audio-mix","encoder"].indexOf(e.reason)-["source-block","video-seek","source-image","frame-assets","audio-mix","encoder"].indexOf(t.reason)||e.started-t.started)[0];(e||null)!==this.last&&(this.last=e||null,Promise.resolve(this.report({sequence:++this.sequence,reason:e?.reason||null,elapsedMs:e?Math.max(0,this.now()-e.started):0})).catch(()=>{this.last===(e||null)&&(this.last=void 0)}))}stop(){clearInterval(this.timer),this.active.clear(),this.flush()}}class FrameReadAhead{constructor(e,t=2){this.load=e,this.concurrency=t,this.plan=[],this.active=new Map,this.stopped=!1}update(e){this.stopped||(this.plan=e,this.pump())}pump(){for(;!this.stopped&&this.active.size<this.concurrency&&this.plan.length;){const e=this.plan.shift();if(this.active.has(e.key))continue;const t=Promise.resolve().then(()=>this.load(e)).catch(()=>{}).finally(()=>{this.active.delete(e.key),this.pump()});this.active.set(e.key,t)}}async stop(){this.stopped=!0,this.plan=[],await Promise.all(this.active.values())}}class SnapshotPipeline{constructor(e,t,a=2){this.capture=e,this.write=t,this.depth=a,this.pending=[]}async push(e){for(;this.pending.length>=this.depth;)await this.drain();const t=await this.capture(e);t.result.catch(()=>{}),this.pending.push(t)}async drain(){const e=this.pending.shift();e&&await this.write(await e.result)}async finish(){for(;this.pending.length;)await this.drain()}async settle(){await Promise.allSettled(this.pending.splice(0).map(e=>e.result))}}function createSnapshotEncoder(e){let t,a=0;const s=new Map,r=()=>{t?.terminate(),t=null;for(const{reject:e}of s.values())e(new Error("snapshot encoder stopped"));s.clear(),e.removeEventListener("abort",r)};if("function"==typeof Worker&&"function"==typeof OffscreenCanvas&&"function"==typeof createImageBitmap)try{t=new Worker("optimized-encoder-worker.js"),t.onmessage=({data:e})=>{const t=s.get(e.id);t&&(s.delete(e.id),e.error?t.reject(new Error(e.error)):t.resolve(e.blob))},t.onerror=e=>{e.preventDefault(),r()},e.addEventListener("abort",r,{once:!0})}catch{r()}return{close:r,async capture(i){if(e.aborted)throw new Error("cancelled");if(!t)return{result:Promise.resolve(await new Promise(e=>i.toBlob(e,"image/jpeg",.95)))};const o=await createImageBitmap(i);if(e.aborted)throw o.close(),new Error("cancelled");const n=a++,c=(async()=>{const a=await createImageBitmap(o);return new Promise((r,i)=>{if(e.aborted||!t)return a.close(),void i(new Error("snapshot encoder stopped"));s.set(n,{resolve:r,reject:i});try{t.postMessage({id:n,bitmap:a},[a])}catch(e){a.close(),s.delete(n),i(e)}})})().catch(async t=>{if(e.aborted)throw t;r();const a=document.createElement("canvas");a.width=o.width,a.height=o.height;try{return a.getContext("2d").drawImage(o,0,0),await new Promise(e=>a.toBlob(e,"image/jpeg",.95))}finally{a.width=a.height=0}}).finally(()=>o.close());return c.catch(()=>{}),{result:c}}}}let optimizedSources=null,optimizedAbort=null,optimizedMaskCanvas=null;function optimizedMaskSource(e){return optimizedMaskCanvas||(optimizedMaskCanvas=document.createElement("canvas")),optimizedMaskCanvas.width!==e.width&&(optimizedMaskCanvas.width=e.width),optimizedMaskCanvas.height!==e.height&&(optimizedMaskCanvas.height=e.height),optimizedMaskCanvas.getContext("2d").drawImage(e,0,0),optimizedMaskCanvas}async function optimizedExport(e={}){if(state.exporting)return;pause(),state.exporting=!0,state.rendering=!0,renderCancelled=!1;const t=performance.now(),a=new AbortController;optimizedAbort=a;const s={engine:"optimized",frames:0,phases:{},samples:{},peakDecodedBytes:0,peakQueueBytes:0},r=(e,t)=>{const a=s.samples[e]||(s.samples[e]={count:0,totalMs:0,maxMs:0,histogram:Array(24).fill(0)});a.count++,a.totalMs+=t,a.maxMs=Math.max(a.maxMs,t),a.histogram[Math.min(23,Math.max(0,Math.ceil(Math.log2(Math.max(1,t)))))]++};let i,o=!1,n=!1;const c=()=>{if(i)throw i;if(renderCancelled||a.signal.aborted)throw new Error("cancelled")},d=async(e,t,s)=>{c();const r=await fetch(e,{method:s||(void 0===t?"GET":"POST"),body:void 0===t?void 0:t instanceof Blob?t:JSON.stringify(t),signal:a.signal}),i=await r.json();if(!r.ok||i.error)throw Object.assign(new Error(i.error||"Export request failed"),{status:r.status});return i};let p,l,h,m,u,f,w,g,y,k,x,v=0,b=new Set;const M=new Map,S=new Map,E=new Map,P=new Set,A=new Set,z=(e,t="")=>projectApi(`/api/export/cache/${e}`)+`&id=${p}${t}`,j=()=>{p&&fetch(z("release"),{method:"POST",keepalive:!0}).catch(()=>{}),l&&fetch(`/api/export/end?id=${l}&discard=1`,{method:"POST",keepalive:!0}).catch(()=>{})},C=()=>{a.abort(),j()},T=e=>{"Escape"===e.key&&(renderCancelled=!0,a.abort()),e.stopImmediatePropagation(),e.preventDefault()};window.addEventListener("pagehide",C),window.addEventListener("keydown",T,!0),els.exportOverlay.classList.remove("hidden"),els.exportProgress.style.width="0%",els.exportTitle.textContent=uiText("Preparing source frames…"),els.exportNote.textContent=uiText("Pre-decoding video and caching frames. You can switch tabs.");try{if(e.requestId&&"function"==typeof readBrowserGpu){try{runtime.browserGpu=readBrowserGpu()}catch{}fetch(projectApi("/api/export/report"),{method:"POST",body:JSON.stringify({requestId:e.requestId,diagnostic:!0,browserGpu:runtime.browserGpu})}).catch(()=>{})}const j=performance.now()+5e3;for(;;){c();const e=await d(projectApi("/api/project"));if(!runtime.saveTimer&&e.revision===project.revision)break;if(performance.now()>j)throw new Error("Project is not saved or changed externally. Reload/save before exporting.");await new Promise(e=>setTimeout(e,100))}u={...project},Object.assign(project,JSON.parse(JSON.stringify(project)));const C=await d("/api/export/ffmpeg");if(!C.available||!C.ffprobe)throw new Error("Optimized export needs ffmpeg and ffprobe");p=(await d(projectApi("/api/export/cache/begin"),{revision:project.revision})).id,x=new ExportWaitTracker(e=>d(z("wait"),e)),h=setInterval(async()=>{if(!o&&!a.signal.aborted){o=!0;try{if(f=await d(z("status")),"error"===f.state)throw Object.assign(new Error(f.error),{status:400})}catch(e){!n&&e.status>=400&&e.status<500&&(i=e,a.abort())}finally{o=!1}}},15e3);do{if(f=await d(z("status")),"error"===f.state)throw new Error(f.error);"ready"!==f.state&&await new Promise(e=>setTimeout(e,100))}while("ready"!==f.state);const T=new Set(f.clips),I=(e,t)=>{P.add(e.id),s.fallbacks||={},s.fallbacks[e.id]=t},O=(e,t,a=!1,s=0,r)=>{const i=Math.floor(t/5),o=e.id+":"+i,n=!a&&!A.has(o);if(n&&A.add(o),!S.has(o)||n){const t=E.get(o);t?.skipped&&E.delete(o);const n=d(z("block"),{clipId:e.id,block:i,priority:a?"prefetch":"demand",neededAt:s,sequence:r}).then(t=>(t.fallback&&!a&&I(e,t.fallback),S.get(o)===n&&E.set(o,t),t)).catch(t=>a?{skipped:t.message}:(I(e,t.message),{fallback:t.message}));S.set(o,n);for(const t of S.keys())t.startsWith(e.id+":")&&!a&&Number(t.slice(e.id.length+1))<i-1&&(S.delete(t),E.delete(t),A.delete(t))}return S.get(o)},q=(e,t=0)=>{for(const[a,s]of M){if(v+t<=134217728)break;!e.has(a)&&s.img&&(s.img.close(),v-=s.bytes,M.delete(a))}},B=async(e,t,i,o=!1)=>{const n=e.id+":"+Math.floor(t/5);if(o&&!E.has(n))return null;!o&&!E.has(n)&&s.frames>0&&(els.exportTitle.textContent=uiText("Preparing video frames…"),els.exportNote.textContent=uiText("Preparing the next part of your video. Export will continue automatically."));const d=!E.has(n)||E.get(n)?.skipped,p=performance.now(),l=o?E.get(n):await x.track("source-block",()=>O(e,t));if(!o&&d&&r("blockWait",performance.now()-p),l.fallback||l.skipped)return null;const h=cachedFrameIndex(l.times,t);if(h<0||t>l.times.at(-1)+(l.times.length>1?l.times[1]-l.times[0]:.1)+1e-5)return o||I(e,"source time outside cached coverage"),null;const m=l.key+":"+h;o||i.add(m);let u=M.get(m);if(u)M.delete(m),M.set(m,u);else{if(q(i,l.width*l.height*4),o&&v+l.width*l.height*4>134217728)return null;u={bytes:l.width*l.height*4,img:null},v+=u.bytes,s.peakDecodedBytes=Math.max(s.peakDecodedBytes,v),u.promise=(async()=>{let e;try{let t=performance.now();const s=await fetch(z("frame",`&key=${l.key}&index=${h}`),{signal:a.signal});if(!s.ok)throw new Error("Cached source frame unavailable");const i=await s.blob();return r("sourceFetch",performance.now()-t),t=performance.now(),e=await createImageBitmap(i),r("sourceDecode",performance.now()-t),c(),u.img=e,e}catch(t){throw e?.close(),v-=u.bytes,M.delete(m),t}})(),M.set(m,u)}return o?u.promise:x.track("source-image",()=>u.promise)},F=project.fps,R=Math.max(1/F,projDur()),N=Math.max(1,Math.round(R*F)),$=project.clips.filter(e=>"video"===e.kind&&isTrackEnabled(e.track)),W=sourceBlockPlan($.filter(e=>T.has(e.id)),F),D=e=>e.clip.id+":"+e.block;g=new SourceReadAhead((e,t)=>O(e.clip,e.time,!0,e.neededAt,t),e=>P.has(e.clip.id)||S.has(D(e)),{key:D,syncPlan:async(e,t,a)=>{const s=new Set([...e.map(D),...t.map(e=>e.clipId+":"+e.block)]);for(const e of S.keys())A.has(e)||s.has(e)||(S.delete(e),E.delete(e));await d(z("retain"),{sequence:a,blocks:e.map(e=>({clipId:e.clip.id,block:e.block})),current:t})}});const G=new Set,L=async e=>{const t=$.filter(t=>activeAt(t,e));g.update(W.filter(t=>t.neededAt>e&&!P.has(t.clip.id)).slice(0,3),t.filter(e=>T.has(e.id)&&!P.has(e.id)).map(t=>({clipId:t.id,block:Math.floor(mediaTimeAt(t,e)/5)})));const a=$.filter(t=>t.start+t.duration<=e&&!G.has(t.id));if(a.length){await d(z("drop"),{clipIds:a.map(e=>e.id)});for(const e of a)G.add(e.id)}optimizedSources=new Map;const s=b=new Set;for(const a of t)stealExportVideo(a,e);return releaseFinishedExportVideos(e),await Promise.all(t.map(async t=>{const a=mediaTimeAt(t,e);if(T.has(t.id)&&!P.has(t.id))try{const e=await B(t,a,s);if(e)return void optimizedSources.set(t.id,e)}catch(e){c(),I(t,e.message)}await x.track("video-seek",()=>prepareVideoFrame(t,acquireExportVideo(t,e),a))})),q(s),s};await L(0),s.phases.prepareMs=performance.now()-t,els.exportTitle.textContent=uiText("Mixing audio…");let J=performance.now();const Q=await x.track("audio-mix",()=>renderAudioMix(R,a.signal));c(),s.phases.audioMs=performance.now()-J;const V=e.name||project.name||"export";l=(await d(projectApi("/api/export/begin"),{fps:F,name:V,requestId:e.requestId,totalFrames:N,engine:"optimized",cacheId:p})).id,Q&&await d(`/api/export/audio?id=${l}`,Q),await document.fonts.ready,project.clips.some(e=>isTrackEnabled(e.track)&&e.props?.bgRemove)&&await ensureBgSeg(),m=new OrderedFrameQueue(async e=>{const t=performance.now();await d(`/api/export/frame?id=${l}`,e),r("upload",performance.now()-t)}),w=createSnapshotEncoder(a.signal);const U=Math.max(1,Math.min(2,Math.floor(67108864/(project.width*project.height*4))));s.snapshotDepth=U,k=new SnapshotPipeline(async e=>{const t=performance.now(),a=await w.capture(e);return r("snapshot",performance.now()-t),a.result=a.result.then(e=>(r("jpeg",performance.now()-t),e)),a},async e=>{if(!e?.size)throw new Error("Canvas returned an empty frame");const t=performance.now();await x.track("encoder",()=>m.push(e)),r("queueWait",performance.now()-t)},U),y=new FrameReadAhead(async({clip:e,time:t})=>{if(P.has(e.id)||G.has(e.id))return;const a=performance.now();await B(e,t,b,!0),r("prefetch",performance.now()-a)});const Y=performance.now();for(let e=0;e<N;e++){c();const t=e/F;state.time=t,J=performance.now();const a=await L(t);r("source",performance.now()-J),$.some(a=>a.start>(e-1)/F&&a.start<=t)&&r("cutSourceWait",performance.now()-J),J=performance.now(),await x.track("frame-assets",()=>prepareFrameAssets(t)),r("assets",performance.now()-J),J=performance.now(),drawFrame(t),r("composite",performance.now()-J),J=performance.now();const i=[];for(let t=1;t<=4&&e+t<N;t++){const a=(e+t)/F;for(const s of $)activeAt(s,a)&&T.has(s.id)&&!P.has(s.id)&&i.push({key:`${s.id}:${e+t}`,clip:s,time:mediaTimeAt(s,a)})}y.update(i),await x.track("encoder",()=>k.push(els.preview)),r("pipeline",performance.now()-J),s.frames++,q(a);const o=(e+1)/N*100;els.exportProgress.style.width=o.toFixed(1)+"%",els.exportTitle.textContent=uiText("Rendering… {percent}%",{percent:o.toFixed(0)}),els.exportNote.textContent=uiText("Cached video frames · {count} compatibility fallbacks · You can switch tabs.",{count:new Set([...Object.keys(f.stats.fallbacks),...P]).size})}await x.track("encoder",async()=>{await k.finish(),await m.finish()}),await y.stop(),s.peakQueueBytes=m.peakBytes,s.phases.renderMs=performance.now()-Y,f=await d(z("status")),s.cache=f.stats;for(const e of Object.values(s.samples)){let t=0;e.meanMs=e.totalMs/e.count;for(let a=0;a<e.histogram.length;a++)if(t+=e.histogram[a],t>=.95*e.count){e.p95UpperMs=2**a;break}}els.exportTitle.textContent=uiText("Encoding…"),J=performance.now(),s.totalMs=performance.now()-t,n=!0;const K=await d(`/api/export/end?id=${l}`,{metrics:s});if(l=null,s.phases.finalizeMs=performance.now()-J,s.totalMs=performance.now()-t,s.fps=N/(s.totalMs/1e3),!e.requestId){const e=document.createElement("a");e.href=K.src,e.download=decodeURIComponent(K.src.split("/").pop()),e.click(),toast(uiText("Optimized export complete: {seconds}s · {hits} cache hits",{seconds:(s.totalMs/1e3).toFixed(1),hits:s.cache.hits}))}console.info("Optimized export",s)}catch(t){m?.cancel(),a.abort(),await(m?.finish().catch(()=>{}));const r=i?.message||(renderCancelled||"AbortError"===t.name?"cancelled":t.message);if(e.requestId){let a;try{a=project.clips.filter(e=>activeAt(e,state.time)).map(e=>e.id).slice(0,12)}catch{}await fetch(projectApi("/api/export/report"),{method:"POST",body:JSON.stringify({requestId:e.requestId,error:r,stack:t.stack,frame:s.frames,timeSec:state.time,browserGpu:runtime.browserGpu,clipIds:a})}).catch(()=>{})}else"cancelled"!==r&&alert(uiText("Optimized export failed: ")+r)}finally{clearInterval(h),x?.stop(),j(),w?.close(),a.abort(),await(g?.stop()),await(y?.stop()),await(k?.settle()),optimizedAbort=null,optimizedSources=null;for(const e of M.values())e.img&&e.img.close();M.clear(),optimizedMaskCanvas&&(optimizedMaskCanvas.width=0,optimizedMaskCanvas.height=0,optimizedMaskCanvas=null),u&&Object.assign(project,u),state.exporting=!1,state.rendering=!1,window.removeEventListener("pagehide",C),window.removeEventListener("keydown",T,!0),els.exportOverlay.classList.add("hidden"),els.exportNote.textContent=uiText("Rendering your sequence in real time. Keep this tab focused."),runtime.pendingSync&&syncFromServer()}}"undefined"!=typeof module&&(module.exports={ExportWaitTracker,OrderedFrameQueue,cachedFrameIndex,sourceBlockPlan,sourceReadAhead,SourceReadAhead,FrameReadAhead,SnapshotPipeline,createSnapshotEncoder});