fablecut 0.0.0-stage → 1.12.0

package/library/svg/spawning-hearts.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="540" height="960" viewBox="0 0 540 960">
+  <!-- FableCut animated SVG: looping hearts from the lower right. -->
+  <style>
+    .heart { animation-timing-function: cubic-bezier(.25,.46,.45,.94); }
+    @keyframes floatA {
+      0%   { transform: translate(432px,930px) scale(0.3) rotate(0deg); opacity: 0; }
+      12%  { transform: translate(420px,810px) scale(1) rotate(-8deg); opacity: 0.95; }
+      50%  { transform: translate(372px,510px) scale(1.1) rotate(6deg); }
+      80%  { transform: translate(408px,210px) scale(0.95) rotate(-5deg); opacity: 0.85; }
+      100% { transform: translate(360px,-90px) scale(0.8) rotate(10deg); opacity: 0; }
+    }
+    @keyframes floatB {
+      0%   { transform: translate(444px,930px) scale(0.25) rotate(0deg); opacity: 0; }
+      15%  { transform: translate(432px,780px) scale(0.9) rotate(7deg); opacity: 0.95; }
+      45%  { transform: translate(330px,480px) scale(1.05) rotate(-9deg); }
+      80%  { transform: translate(372px,180px) scale(0.9) rotate(5deg); opacity: 0.8; }
+      100% { transform: translate(300px,-90px) scale(0.75) rotate(-6deg); opacity: 0; }
+    }
+    @keyframes floatC {
+      0%   { transform: translate(420px,930px) scale(0.3) rotate(0deg); opacity: 0; }
+      15%  { transform: translate(396px,792px) scale(0.95) rotate(-5deg); opacity: 0.95; }
+      50%  { transform: translate(288px,450px) scale(1.15) rotate(8deg); }
+      85%  { transform: translate(252px,150px) scale(0.9) rotate(-7deg); opacity: 0.8; }
+      100% { transform: translate(228px,-90px) scale(0.7) rotate(4deg); opacity: 0; }
+    }
+    .h1 { fill: #FE2C55; animation: floatA 4.2s infinite both; }
+    .h2 { fill: #25F4EE; animation: floatB 4.6s infinite both; }
+    .h3 { fill: #FF007F; animation: floatC 4.4s infinite both; }
+    .h4 { fill: #FFAA00; animation: floatA 4.8s infinite both; }
+    .h5 { fill: #FE2C55; animation: floatC 4.3s infinite both; }
+    .h6 { fill: #FFFFFF; animation: floatB 4.5s infinite both; }
+  </style>
+  <path class="heart h1" style="--d:0s"   transform="translate(270 430) scale(3.2)" d="M0,-18 C-15,-48 -48,-27 -48,3 C-48,30 0,60 0,66 C0,60 48,30 48,3 C48,-27 15,-48 0,-18 Z"/>
+  <path class="heart h2" style="--d:0.8s" transform="translate(390 560) scale(2.2) rotate(-18)" d="M0,-18 C-15,-48 -48,-27 -48,3 C-48,30 0,60 0,66 C0,60 48,30 48,3 C48,-27 15,-48 0,-18 Z"/>
+  <path class="heart h3" style="--d:1.6s" transform="translate(155 540) scale(2.1) rotate(16)" d="M0,-18 C-15,-48 -48,-27 -48,3 C-48,30 0,60 0,66 C0,60 48,30 48,3 C48,-27 15,-48 0,-18 Z"/>
+  <path class="heart h4" style="--d:2.4s" transform="translate(360 300) scale(1.8) rotate(12)" d="M0,-18 C-15,-48 -48,-27 -48,3 C-48,30 0,60 0,66 C0,60 48,30 48,3 C48,-27 15,-48 0,-18 Z"/>
+  <path class="heart h5" style="--d:3.1s" transform="translate(180 310) scale(1.6) rotate(-10)" d="M0,-18 C-15,-48 -48,-27 -48,3 C-48,30 0,60 0,66 C0,60 48,30 48,3 C48,-27 15,-48 0,-18 Z"/>
+  <path class="heart h6" style="--d:3.7s" transform="translate(270 620) scale(1.7)" d="M0,-18 C-15,-48 -48,-27 -48,3 C-48,30 0,60 0,66 C0,60 48,30 48,3 C48,-27 15,-48 0,-18 Z"/>
+</svg>

package/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/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/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/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/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/loudness.js

@@ -0,0 +1,135 @@
+/* FableCut loudness measurement — ITU-R BS.1770-4 integrated loudness (LUFS,
+   EBU R128 gating) and sample peak. Zero dependencies. Loaded by the editor as
+   a plain script (global `FableCutLoudness`) and required by the MCP server,
+   so Normalize in the UI and `fablecut_normalize_audio` measure identically.
+
+   A clip is measured AFTER its channel routing (audioChannel / channelMode)
+   and BEFORE gain, volume and pan: equal-power pan keeps BS.1770 loudness, so
+   the reading holds wherever the clip is panned. */
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else root.FableCutLoudness = api;
+})(typeof self !== "undefined" ? self : this, function () {
+  "use strict";
+
+  /* K-weighting: stage 1 high shelf + stage 2 RLB high-pass, with the
+     BS.1770 analog prototypes re-derived for any sample rate (same values the
+     meter worklet uses). */
+  function shelfCoeffs(fs) {
+    const f0 = 1681.974450955533, G = 3.999843853973347, Q = 0.7071752369554196;
+    const K = Math.tan(Math.PI * f0 / fs);
+    const Vh = Math.pow(10, G / 20), Vb = Math.pow(Vh, 0.5);
+    const a0 = 1 + K / Q + K * K;
+    return {
+      b0: (Vh + Vb * K / Q + K * K) / a0, b1: 2 * (K * K - Vh) / a0,
+      b2: (Vh - Vb * K / Q + K * K) / a0, a1: 2 * (K * K - 1) / a0, a2: (1 - K / Q + K * K) / a0,
+    };
+  }
+  function hpfCoeffs(fs) {
+    const f0 = 38.13547087613982, Q = 0.5003270373238773;
+    const K = Math.tan(Math.PI * f0 / fs);
+    const a0 = 1 + K / Q + K * K;
+    return { b0: 1 / a0, b1: -2 / a0, b2: 1 / a0, a1: 2 * (K * K - 1) / a0, a2: (1 - K / Q + K * K) / a0 };
+  }
+  function biquad(c) { return { ...c, z1: 0, z2: 0 }; }
+
+  const ABS_GATE = -70;     // LUFS
+  const REL_GATE = -10;     // LU below the abs-gated mean
+  const loud = (ms) => -0.691 + 10 * Math.log10(ms);
+
+  /** Streaming meter: push() channel arrays of equal length as audio arrives,
+   *  then result(). Every channel is weighted 1 (mono / stereo programme). */
+  class LoudnessMeter {
+    constructor(channels, sampleRate) {
+      this.fs = sampleRate;
+      this.step = Math.max(1, Math.round(sampleRate * 0.1)); // 100 ms hop, 400 ms blocks (75% overlap)
+      this.filters = [];
+      for (let i = 0; i < channels; i++)
+        this.filters.push([biquad(shelfCoeffs(sampleRate)), biquad(hpfCoeffs(sampleRate))]);
+      this.sub = [];      // K-weighted energy per 100 ms step, summed over channels
+      this.acc = 0;       // energy of the step being filled
+      this.fill = 0;      // samples in the step being filled
+      this.tail = 0;      // energy of everything (fallback for < 400 ms)
+      this.n = 0;
+      this.peak = 0;
+    }
+    push(chs) {
+      const len = chs.length ? chs[0].length : 0;
+      for (let i = 0; i < len; i++) {
+        let e = 0;
+        for (let c = 0; c < chs.length && c < this.filters.length; c++) {
+          const x = chs[c][i];
+          const a = x < 0 ? -x : x;
+          if (a > this.peak) this.peak = a;
+          const [s, h] = this.filters[c];
+          let y = s.b0 * x + s.z1;
+          s.z1 = s.b1 * x - s.a1 * y + s.z2; s.z2 = s.b2 * x - s.a2 * y;
+          const x2 = y;
+          y = h.b0 * x2 + h.z1;
+          h.z1 = h.b1 * x2 - h.a1 * y + h.z2; h.z2 = h.b2 * x2 - h.a2 * y;
+          e += y * y;
+        }
+        this.acc += e;
+        this.tail += e;
+        if (++this.fill === this.step) { this.sub.push(this.acc); this.acc = 0; this.fill = 0; }
+      }
+      this.n += len;
+    }
+    /** {lufs, peak, peakDb}: lufs is -Infinity for silence, peak is linear. */
+    result() {
+      const blocks = [];
+      for (let j = 0; j + 4 <= this.sub.length; j++)
+        blocks.push((this.sub[j] + this.sub[j + 1] + this.sub[j + 2] + this.sub[j + 3]) / (4 * this.step));
+      // Shorter than one 400 ms block: gate the whole clip as a single block.
+      if (!blocks.length && this.n > 0) blocks.push(this.tail / this.n);
+      const absGated = blocks.filter((z) => z > 0 && loud(z) > ABS_GATE);
+      let lufs = -Infinity;
+      if (absGated.length) {
+        const rel = loud(absGated.reduce((a, b) => a + b, 0) / absGated.length) + REL_GATE;
+        const gated = absGated.filter((z) => loud(z) > rel);
+        if (gated.length) lufs = loud(gated.reduce((a, b) => a + b, 0) / gated.length);
+      }
+      const peakDb = this.peak > 0 ? 20 * Math.log10(this.peak) : -Infinity;
+      return { lufs, peak: this.peak, peakDb };
+    }
+  }
+
+  function measure(chs, sampleRate) {
+    const m = new LoudnessMeter(chs.length, sampleRate);
+    m.push(chs);
+    return m.result();
+  }
+
+  const CHANNEL_MODES = ["stereo", "mono", "left", "right", "swap"];
+
+  /** What a clip sends into its gain stage, as channel arrays. Mirrors the
+   *  editor's audio graph: an isolated stem (audioChannel) or a mono mode is
+   *  one channel (pan places it with equal power); stereo/swap keep them all. */
+  function routeChannels(chs, { audioChannel, channelMode } = {}) {
+    if (!chs.length) return [];
+    if (Number.isInteger(audioChannel) && audioChannel >= 0)
+      return audioChannel < chs.length ? [chs[audioChannel]] : [];
+    const mode = CHANNEL_MODES.includes(channelMode) ? channelMode : "stereo";
+    if (chs.length === 1) return [chs[0]];
+    if (mode === "left") return [chs[0]];
+    if (mode === "right") return [chs[1]];
+    if (mode === "swap") return [chs[1], chs[0], ...chs.slice(2)];
+    if (mode === "mono") {
+      const n = chs[0].length, out = new Float32Array(n), k = 1 / chs.length;
+      for (const x of chs) for (let i = 0; i < n; i++) out[i] += x[i] * k;
+      return [out];
+    }
+    return chs;
+  }
+
+  /** Gain (dB) that brings a measurement to `target` ({mode:"lufs"|"peak", value}).
+   *  null when the clip is silent — nothing to normalize. */
+  function normalizeGainDb(m, target) {
+    const level = target.mode === "peak" ? m.peakDb : m.lufs;
+    if (!Number.isFinite(level)) return null;
+    return target.value - level;
+  }
+
+  return { LoudnessMeter, measure, routeChannels, normalizeGainDb, CHANNEL_MODES, shelfCoeffs, hpfCoeffs };
+});