framefields 2.0.2 → 2.0.5

package/README.md

@@ -32,18 +32,18 @@ Every frame of these films is rendered by framefields from TypeScript in [`examp
 <table>
   <tr>
     <td width="33%" align="center">
-      <a href="https://youtu.be/w6IQNrhJJek"><img src="https://raw.githubusercontent.com/gatewai-dev/framefields/main/assets/showcase/framefields-launch.jpg" alt="Framefields launch film" width="100%"></a>
-      <br><a href="https://youtu.be/w6IQNrhJJek"><b>Framefields launch</b></a>
+      <a href="https://youtu.be/FVXTqAozAv8"><img src="https://raw.githubusercontent.com/gatewai-dev/framefields/main/assets/showcase/framefields-launch.jpg" alt="Framefields launch film" width="100%"></a>
+      <br><a href="https://youtu.be/FVXTqAozAv8"><b>Framefields launch</b></a>
       <br><sub><a href="https://github.com/gatewai-dev/framefields/blob/main/examples/22_framefields_launch"><code>22_framefields_launch</code></a></sub>
     </td>
     <td width="33%" align="center">
-      <a href="https://youtu.be/YeIpp4xf_j8"><img src="https://raw.githubusercontent.com/gatewai-dev/framefields/main/assets/showcase/full-circle.jpg" alt="Full Circle film" width="100%"></a>
-      <br><a href="https://youtu.be/YeIpp4xf_j8"><b>Full Circle</b></a>
+      <a href="https://youtu.be/9BF1snfmg3o"><img src="https://raw.githubusercontent.com/gatewai-dev/framefields/main/assets/showcase/full-circle.jpg" alt="Full Circle film" width="100%"></a>
+      <br><a href="https://youtu.be/9BF1snfmg3o"><b>Full Circle</b></a>
       <br><sub><a href="https://github.com/gatewai-dev/framefields/blob/main/examples/21_full_circle"><code>21_full_circle</code></a></sub>
     </td>
     <td width="33%" align="center">
-      <a href="https://youtu.be/R5Zug49FTTQ"><img src="https://raw.githubusercontent.com/gatewai-dev/framefields/main/assets/showcase/dancer.jpg" alt="Dancer showcase film" width="100%"></a>
-      <br><a href="https://youtu.be/R5Zug49FTTQ"><b>Dancer showcase</b></a>
+      <a href="https://youtu.be/RQ3yi_lzPqI"><img src="https://raw.githubusercontent.com/gatewai-dev/framefields/main/assets/showcase/dancer.jpg" alt="Dancer showcase film" width="100%"></a>
+      <br><a href="https://youtu.be/RQ3yi_lzPqI"><b>Dancer showcase</b></a>
       <br><sub><a href="https://github.com/gatewai-dev/framefields/blob/main/examples/19_framefields_film"><code>19_framefields_film</code></a></sub>
     </td>
   </tr>
@@ -52,6 +52,8 @@ Every frame of these films is rendered by framefields from TypeScript in [`examp
 > [!NOTE]
 > **Using an AI coding agent?** Install the framefields skills in one line.
 >
+> **Note:** Framefields plugin review in claude takes a bit long... Please use the alternative skills installation for now.
+>
 > **Claude Code**
 > ```text
 > /plugin install framefields
@@ -69,7 +71,6 @@ Every frame of these films is rendered by framefields from TypeScript in [`examp
 ## Table of Contents
 
 - [Why Framefields](#why-framefields)
-- [Architectural Comparison](#architectural-comparison-framefields-vs-remotion-vs-hyperframes)
 - [Key Features & Capabilities](#key-features--capabilities)
   - [1. Slug GPU Vector Typography & After Effects Animators](#1-slug-gpu-vector-typography--after-effects-animators)
   - [2. Photoshop-Inspired WebGPU 2D VFX](#2-photoshop-inspired-webgpu-2d-vfx-50-shaders)
@@ -113,30 +114,6 @@ Modern automated video generation is usually constrained by the architectures of
 
 ---
 
-## Architectural Comparison: Framefields vs. Remotion vs. Hyperframes
-
-Developers generating video programmatically commonly weigh **Remotion** (React/Chromium) or **Hyperframes** (Canvas2D/SVG web animation). The matrix below compares the fundamental engineering dimensions.
-
-### Detailed Comparison Matrix
-
-| Capability / Dimension | **Framefields** | **Remotion** | **Hyperframes** |
-|---|---|---|---|
-| **Underlying Engine** | **Native WebGPU** (WGSL compute & render pipelines via Dawn / Metal / Vulkan) | **Chromium / Puppeteer** (React DOM, HTML/CSS layout) | **Canvas2D / WebGL / SVG** (browser or Node Skia) |
-| **Rendering Architecture** | Direct hardware framebuffer rendering & hardware video encoding (`@napi-rs/webcodecs`) | Spawns headless Chrome; captures frames via CDP / `page.screenshot()` | Software or hardware 2D canvas context |
-| **Throughput** | **60–120+ FPS** (real-time to faster-than-real-time GPU execution) | **5–20 FPS** (DOM reflow, IPC, rasterization) | **20–40 FPS** (CPU draw commands / JS) |
-| **Memory Footprint** | **~200–400 MB** per render (zero browser) | **1.5–4.0 GB+** per worker (Chromium + V8 DOM heap) | **~500 MB–1 GB** (Skia/Canvas bindings) |
-| **Typography Engine** | **Slug GPU** — analytic Bézier evaluation in WGSL, infinite zoom, After Effects selectors | Browser DOM text (CSS fonts, rasterized, blurry under 3D transforms) | Canvas2D / path text (CPU-rasterized glyphs) |
-| **2D VFX & Post-Processing** | **50+ WebGPU shaders** (Curves, Levels, Selective Color, 3D LUT, Film Grain, Halftone, Liquify, PBR Glass, Relight) | CSS Filters or custom WebGL canvas wrappers | Basic Canvas2D composites and 2D filters |
-| **3D Graphics & Depth** | **Native 3D scene graph** — LookAt/Turntable camera, multiplane, skinning (OBJ/FBX/glTF), SSAO, PCSS, DoF | None built-in (embed Three.js/Fiber inside React DOM) | Minimal 2.5D layers; no unified mesh pipeline |
-| **Motion Blur & Physics** | Physical 180° shutter velocity buffers in MRT + closed-form spring kinematics | CSS transitions / JS interpolation; synthetic blur hacks | Frame interpolation or manual multipass |
-| **Audio Engine & DSP** | Native audio DSP & procedural SFX (multi-track mixing, beat grids, reactive signals) | `<Audio>` playback; basic volume curves | Basic static audio playback |
-| **Charts & Data Viz** | **`Layer.chart`** — line, area, bar, scatter, candlestick, pie and donut charts built from native vector nodes, with staggered reveal animations | DOM chart libraries (Recharts, Chart.js) | Custom canvas draw operations |
-| **AI & Computer Vision** | **On-device ONNX vision** — COCO-80 detection + instance masks (RTMDet-Ins), COCO-17 pose (RTMO), person mattes (Selfie Segmenter); WebGPU tensor conditioning (Canny, depth-to-normals, optical flow, deflicker) | External pre-rendered assets; no native GPU tensor conditioning | External pre-rendered assets |
-| **Headless Verification** | **FrameGrid contact sheets**, single-frame snapshots, Skia MSE pixel-invariant assertions | Playwright/Puppeteer visual snapshots | Manual frame inspection / canvas diffing |
-| **Docker / Cloud Portability** | **Compact** (~500 MB slim image with native GPU/Vulkan drivers) | **Heavy** (~2–3 GB with Chromium, fonts, X11/Mesa) | Moderate container size |
-
----
-
 ## Key Features & Capabilities
 
 ### 1. Slug GPU Vector Typography & After Effects Animators
@@ -262,12 +239,13 @@ Project normalized landmarks to screen space with a configurable camera FOV, the
 - **FrameGrid contact sheets** — `comp.renderFrameGrid(...)` outputs sequential-frame contact sheets for instant review of easing, kinetic type, and transitions.
 
 ### 8. Live Preview in the Browser
-- **Runs your composition, not a video** — `startPreview({ entry, export })` serves a localhost WebGPU player that loads the composition's own module and renders every frame live in the browser. Nothing is streamed: the server only hands over the bundle, the project's assets, and the soundtrack mixed by the export engine.
+- **Runs your composition, not a video** — `startPreview({ entry, export })` serves a localhost WebGPU player that loads the composition's own module and renders its frames live in the browser. Nothing is streamed: the server only hands over the bundle, the project's assets, and the soundtrack mixed by the export engine.
 - **Timeline, waveform & frame stepping** — play/pause, scrub, step frame by frame, and read resolution, FPS, duration, and audio status at a glance.
 - **One stable URL per project** — the port is derived from the working directory, so re-running the preview replaces the running server and any open tab reloads into the new version by itself. Close the tab and the server shuts down about five seconds later. A reload comes back at the same moment, and `#t=12.5` links to one.
 - **Notes pinned on the picture** — pause, click a spot (or drag an area) and write what should change. Each note keeps its moment, its spot and a picture of the frame with the spot marked, in `.framefields/preview-notes/`, and prints where the preview runs, so an agent can apply exactly what you meant. Tick notes off as you check them.
 - **Tells you what happened** — the page's errors (a failed build, a frame that threw, a missing font) and why the server stopped are printed where the preview runs, so whoever started it, person or agent, sees them without opening devtools. Scripts can drive the page through `window.framefieldsPreview` (`seek`, `play`, `pause`, `state`).
 - **Shown where you are** — `startPreview` serves the page and returns its URL instead of opening a browser, so an agent can show it in its own pane (Claude Code, Codex); pass `open: true` to open the system browser.
+- **Plays in real time, even on a slow device** — Play draws the frame due on the soundtrack's clock and skips the ones it missed, so playback starts at once and the sound never waits. A device that can't keep up shows fewer frames, and the page shows the frame rate it reaches.
 
 ```typescript
 import { startPreview } from "framefields";

package/dist/audio/index.d.mts

@@ -1,5 +1,5 @@
-import { P as WebGPUAudioProcessor } from "../index-D2jDC7O5.mjs";
-import { a as SfxTrigger, c as softLimit, d as _default$5, f as _default$4, g as mixAudioTracks, h as _default$2, i as SfxRenderContext, l as _default$7, m as _default$3, n as encodeStereoWav, o as mixSfxInto, p as _default, r as RenderedSfx, s as renderSfx, t as EncodeWavOptions, u as _default$6 } from "../index-D2wJqSl5.mjs";
-import "../index-BMVVmc4G.mjs";
-import { t as _default$1 } from "../renderer-DDp7_TUi.mjs";
+import { P as WebGPUAudioProcessor } from "../index-ogL8Y-Ng.mjs";
+import { a as SfxTrigger, c as softLimit, d as _default$5, f as _default$4, g as mixAudioTracks, h as _default$2, i as SfxRenderContext, l as _default$7, m as _default$3, n as encodeStereoWav, o as mixSfxInto, p as _default, r as RenderedSfx, s as renderSfx, t as EncodeWavOptions, u as _default$6 } from "../index-CAGDH7l6.mjs";
+import "../index-DY3mLoPO.mjs";
+import { t as _default$1 } from "../renderer-DcPOsAVu.mjs";
 export { EncodeWavOptions, RenderedSfx, SfxRenderContext, SfxTrigger, WebGPUAudioProcessor, _default as audioFadeRenderer, _default$1 as audioSignalExtractorRenderer, _default$2 as compressorRenderer, _default$3 as delayRenderer, encodeStereoWav, mixAudioTracks, mixSfxInto, _default$4 as noiseGateRenderer, _default$5 as parametricEqRenderer, renderSfx, _default$6 as reverbRenderer, softLimit, _default$7 as stereoPanningRenderer };

package/dist/audio/index.mjs

@@ -1,14 +1,14 @@
-import { C as WebGPUAudioProcessor } from "../dist-gjHmorxL.mjs";
-import { t as renderers_default$1 } from "../renderers-BWg16W-V-BXG_cjhM.mjs";
-import { i as mixAudioTracks } from "../dist-1iUYuPct.mjs";
-import { t as renderers_default$2 } from "../renderer-Tp6OXWNZ.mjs";
-import { t as renderers_default$3 } from "../renderer-vCFTm0oe.mjs";
-import { t as renderers_default } from "../renderer-C17wL9QX.mjs";
-import { t as renderers_default$4 } from "../renderer-7DOcIxFG.mjs";
-import { t as renderers_default$5 } from "../renderer-BGXU6vcW.mjs";
-import { t as renderers_default$6 } from "../renderer-vvpdx1vk.mjs";
+import { C as WebGPUAudioProcessor } from "../dist-DgIKXWZ1.mjs";
+import { t as renderers_default$1 } from "../renderers-BWg16W-V-jhdCp6Vd.mjs";
+import { i as mixAudioTracks } from "../dist-55MP0aN4.mjs";
+import { t as renderers_default$2 } from "../renderer-D54yO_M_.mjs";
+import { t as renderers_default$3 } from "../renderer-C28Bab-M.mjs";
+import { t as renderers_default } from "../renderer-COkFM1KL.mjs";
+import { t as renderers_default$4 } from "../renderer-2r4EgfdZ.mjs";
+import { t as renderers_default$5 } from "../renderer-bebAt6Dz.mjs";
+import { t as renderers_default$6 } from "../renderer-DI2RcpKU.mjs";
 import "../renderer-C2n-EHxg.mjs";
-import { t as renderers_default$7 } from "../renderer-WkVrkCVA.mjs";
+import { t as renderers_default$7 } from "../renderer-DjiUZ0Vs.mjs";
 import { i as softLimit, n as mixSfxInto, r as renderSfx, t as encodeStereoWav } from "../audio-TAvPwzLR.mjs";
 
 export { WebGPUAudioProcessor, renderers_default as audioFadeRenderer, renderers_default$1 as audioSignalExtractorRenderer, renderers_default$2 as compressorRenderer, renderers_default$3 as delayRenderer, encodeStereoWav, mixAudioTracks, mixSfxInto, renderers_default$4 as noiseGateRenderer, renderers_default$5 as parametricEqRenderer, renderSfx, renderers_default$6 as reverbRenderer, softLimit, renderers_default$7 as stereoPanningRenderer };

package/dist/{audio-x28ZgQBP.mjs → audio-COkiXyDb.mjs}

@@ -1,6 +1,6 @@
 import { _t as frameArraySignal } from "./dist-Bx6J0VcM.mjs";
-import { F as ensureDevice, i as AudioSignalComputePipeline } from "./dist-gjHmorxL.mjs";
-import { n as decodeAudioSource } from "./dist-1iUYuPct.mjs";
+import { F as ensureDevice, i as AudioSignalComputePipeline } from "./dist-DgIKXWZ1.mjs";
+import { n as decodeAudioSource } from "./dist-55MP0aN4.mjs";
 
 //#region src/signals/audio.ts
 const AudioSignal = {
@@ -82,4 +82,4 @@ const AudioSignal = {
 
 //#endregion
 export { AudioSignal as t };
-//# sourceMappingURL=audio-x28ZgQBP.mjs.map
+//# sourceMappingURL=audio-COkiXyDb.mjs.map

package/dist/{audio-x28ZgQBP.mjs.map → audio-COkiXyDb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"audio-x28ZgQBP.mjs","names":[],"sources":["../src/signals/audio.ts"],"sourcesContent":["import { decodeAudioSource } from \"@framefields/compositions\";\nimport {\n\ttype FrameSignal,\n\tframeArraySignal,\n\ttype GPUTextureBinding,\n} from \"@framefields/core\";\nimport {\n\ttype AudioSignalComputeConfig,\n\tAudioSignalComputePipeline,\n\tensureDevice,\n} from \"@framefields/webgpu-renderers\";\n\nexport interface AudioSignalOptions extends AudioSignalComputeConfig {\n\tfps?: number;\n\ttargetWidth?: number;\n\tpreviewMode?: \"waveform\" | \"envelope\" | \"beat_markers\" | \"spectrum\";\n}\n\nexport interface ExtractedAudioSignalsBundle {\n\tprimary: FrameSignal<number>;\n\tbeat: FrameSignal<number>;\n\tbass: FrameSignal<number>;\n\tenergy: FrameSignal<number>;\n\tdurationSec: number;\n\tnumFrames: number;\n\tsampleRate: number;\n\ttextureView: unknown;\n\ttexture: unknown;\n\tprimaryBuffer: unknown;\n\tbeatBuffer: unknown;\n\tbassBuffer: unknown;\n\tenergyBuffer: unknown;\n\tseekFrame(frame: number): void;\n}\n\nexport const AudioSignal = {\n\tasync extractFromChannels(\n\t\tchannels: Float32Array[],\n\t\tsampleRate: number,\n\t\toptions: AudioSignalOptions = {},\n\t): Promise<ExtractedAudioSignalsBundle> {\n\t\tconst device = await ensureDevice();\n\t\tconst fps = options.fps ?? 24;\n\t\tconst targetWidth = options.targetWidth ?? 512;\n\n\t\tconst extracted = await AudioSignalComputePipeline.extractFeatures(\n\t\t\tdevice,\n\t\t\tchannels,\n\t\t\tsampleRate,\n\t\t\tfps,\n\t\t\toptions,\n\t\t\ttargetWidth,\n\t\t);\n\n\t\tconst samples = extracted.channelSamples ?? {\n\t\t\tprimary: new Float32Array(extracted.numFrames),\n\t\t\tbeat: new Float32Array(extracted.numFrames),\n\t\t\tbass: new Float32Array(extracted.numFrames),\n\t\t\tenergy: new Float32Array(extracted.numFrames),\n\t\t};\n\n\t\tconst primaryBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_primary\",\n\t\t\tchannel: \"primary\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.primaryBuffer,\n\t\t\tstats: extracted.stats.primary,\n\t\t};\n\t\tconst beatBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_beat\",\n\t\t\tchannel: \"beat\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.beatBuffer,\n\t\t\tstats: extracted.stats.beat,\n\t\t};\n\t\tconst bassBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_bass\",\n\t\t\tchannel: \"bass\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.bassBuffer,\n\t\t\tstats: extracted.stats.bass,\n\t\t};\n\t\tconst energyBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_energy\",\n\t\t\tchannel: \"energy\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.energyBuffer,\n\t\t\tstats: extracted.stats.energy,\n\t\t};\n\n\t\tconst primary = frameArraySignal(samples.primary, fps, primaryBinding);\n\t\tconst beat = frameArraySignal(samples.beat, fps, beatBinding);\n\t\tconst bass = frameArraySignal(samples.bass, fps, bassBinding);\n\t\tconst energy = frameArraySignal(samples.energy, fps, energyBinding);\n\n\t\treturn {\n\t\t\tprimary,\n\t\t\tbeat,\n\t\t\tbass,\n\t\t\tenergy,\n\t\t\tdurationSec: extracted.durationSec,\n\t\t\tnumFrames: extracted.numFrames,\n\t\t\tsampleRate,\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tprimaryBuffer: extracted.primaryBuffer,\n\t\t\tbeatBuffer: extracted.beatBuffer,\n\t\t\tbassBuffer: extracted.bassBuffer,\n\t\t\tenergyBuffer: extracted.energyBuffer,\n\t\t\tseekFrame(frame: number) {\n\t\t\t\tprimary.seekFrame?.(frame);\n\t\t\t\tbeat.seekFrame?.(frame);\n\t\t\t\tbass.seekFrame?.(frame);\n\t\t\t\tenergy.seekFrame?.(frame);\n\t\t\t},\n\t\t};\n\t},\n\n\tasync extract(\n\t\tsource: string,\n\t\toptions: AudioSignalOptions = {},\n\t): Promise<ExtractedAudioSignalsBundle> {\n\t\tconst decoded = await decodeAudioSource(source);\n\t\tif (!decoded || decoded.channels.length === 0) {\n\t\t\tthrow new Error(\n\t\t\t\t`Failed to decode audio source for feature extraction: ${source}`,\n\t\t\t);\n\t\t}\n\t\treturn AudioSignal.extractFromChannels(\n\t\t\tdecoded.channels,\n\t\t\tdecoded.sampleRate,\n\t\t\toptions,\n\t\t);\n\t},\n};\n"],"mappings":";;;;;AAmCA,MAAa,cAAc;CAC1B,MAAM,oBACL,UACA,YACA,UAA8B,EAAE,EACO;EACvC,MAAM,SAAS,MAAM,cAAc;EACnC,MAAM,MAAM,QAAQ,OAAO;EAC3B,MAAM,cAAc,QAAQ,eAAe;EAE3C,MAAM,YAAY,MAAM,2BAA2B,gBAClD,QACA,UACA,YACA,KACA,SACA,YACA;EAED,MAAM,UAAU,UAAU,kBAAkB;GAC3C,SAAS,IAAI,aAAa,UAAU,UAAU;GAC9C,MAAM,IAAI,aAAa,UAAU,UAAU;GAC3C,MAAM,IAAI,aAAa,UAAU,UAAU;GAC3C,QAAQ,IAAI,aAAa,UAAU,UAAU;GAC7C;EAED,MAAM,iBAAoC;GACzC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EACD,MAAM,cAAiC;GACtC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EACD,MAAM,cAAiC;GACtC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EACD,MAAM,gBAAmC;GACxC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EAED,MAAM,UAAU,iBAAiB,QAAQ,SAAS,KAAK,eAAe;EACtE,MAAM,OAAO,iBAAiB,QAAQ,MAAM,KAAK,YAAY;EAC7D,MAAM,OAAO,iBAAiB,QAAQ,MAAM,KAAK,YAAY;EAC7D,MAAM,SAAS,iBAAiB,QAAQ,QAAQ,KAAK,cAAc;AAEnE,SAAO;GACN;GACA;GACA;GACA;GACA,aAAa,UAAU;GACvB,WAAW,UAAU;GACrB;GACA,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,eAAe,UAAU;GACzB,YAAY,UAAU;GACtB,YAAY,UAAU;GACtB,cAAc,UAAU;GACxB,UAAU,OAAe;AACxB,YAAQ,YAAY,MAAM;AAC1B,SAAK,YAAY,MAAM;AACvB,SAAK,YAAY,MAAM;AACvB,WAAO,YAAY,MAAM;;GAE1B;;CAGF,MAAM,QACL,QACA,UAA8B,EAAE,EACO;EACvC,MAAM,UAAU,MAAM,kBAAkB,OAAO;AAC/C,MAAI,CAAC,WAAW,QAAQ,SAAS,WAAW,EAC3C,OAAM,IAAI,MACT,yDAAyD,SACzD;AAEF,SAAO,YAAY,oBAClB,QAAQ,UACR,QAAQ,YACR,QACA;;CAEF"}
+{"version":3,"file":"audio-COkiXyDb.mjs","names":[],"sources":["../src/signals/audio.ts"],"sourcesContent":["import { decodeAudioSource } from \"@framefields/compositions\";\nimport {\n\ttype FrameSignal,\n\tframeArraySignal,\n\ttype GPUTextureBinding,\n} from \"@framefields/core\";\nimport {\n\ttype AudioSignalComputeConfig,\n\tAudioSignalComputePipeline,\n\tensureDevice,\n} from \"@framefields/webgpu-renderers\";\n\nexport interface AudioSignalOptions extends AudioSignalComputeConfig {\n\tfps?: number;\n\ttargetWidth?: number;\n\tpreviewMode?: \"waveform\" | \"envelope\" | \"beat_markers\" | \"spectrum\";\n}\n\nexport interface ExtractedAudioSignalsBundle {\n\tprimary: FrameSignal<number>;\n\tbeat: FrameSignal<number>;\n\tbass: FrameSignal<number>;\n\tenergy: FrameSignal<number>;\n\tdurationSec: number;\n\tnumFrames: number;\n\tsampleRate: number;\n\ttextureView: unknown;\n\ttexture: unknown;\n\tprimaryBuffer: unknown;\n\tbeatBuffer: unknown;\n\tbassBuffer: unknown;\n\tenergyBuffer: unknown;\n\tseekFrame(frame: number): void;\n}\n\nexport const AudioSignal = {\n\tasync extractFromChannels(\n\t\tchannels: Float32Array[],\n\t\tsampleRate: number,\n\t\toptions: AudioSignalOptions = {},\n\t): Promise<ExtractedAudioSignalsBundle> {\n\t\tconst device = await ensureDevice();\n\t\tconst fps = options.fps ?? 24;\n\t\tconst targetWidth = options.targetWidth ?? 512;\n\n\t\tconst extracted = await AudioSignalComputePipeline.extractFeatures(\n\t\t\tdevice,\n\t\t\tchannels,\n\t\t\tsampleRate,\n\t\t\tfps,\n\t\t\toptions,\n\t\t\ttargetWidth,\n\t\t);\n\n\t\tconst samples = extracted.channelSamples ?? {\n\t\t\tprimary: new Float32Array(extracted.numFrames),\n\t\t\tbeat: new Float32Array(extracted.numFrames),\n\t\t\tbass: new Float32Array(extracted.numFrames),\n\t\t\tenergy: new Float32Array(extracted.numFrames),\n\t\t};\n\n\t\tconst primaryBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_primary\",\n\t\t\tchannel: \"primary\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.primaryBuffer,\n\t\t\tstats: extracted.stats.primary,\n\t\t};\n\t\tconst beatBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_beat\",\n\t\t\tchannel: \"beat\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.beatBuffer,\n\t\t\tstats: extracted.stats.beat,\n\t\t};\n\t\tconst bassBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_bass\",\n\t\t\tchannel: \"bass\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.bassBuffer,\n\t\t\tstats: extracted.stats.bass,\n\t\t};\n\t\tconst energyBinding: GPUTextureBinding = {\n\t\t\tnodeId: \"audio_energy\",\n\t\t\tchannel: \"energy\",\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tbuffer: extracted.energyBuffer,\n\t\t\tstats: extracted.stats.energy,\n\t\t};\n\n\t\tconst primary = frameArraySignal(samples.primary, fps, primaryBinding);\n\t\tconst beat = frameArraySignal(samples.beat, fps, beatBinding);\n\t\tconst bass = frameArraySignal(samples.bass, fps, bassBinding);\n\t\tconst energy = frameArraySignal(samples.energy, fps, energyBinding);\n\n\t\treturn {\n\t\t\tprimary,\n\t\t\tbeat,\n\t\t\tbass,\n\t\t\tenergy,\n\t\t\tdurationSec: extracted.durationSec,\n\t\t\tnumFrames: extracted.numFrames,\n\t\t\tsampleRate,\n\t\t\ttextureView: extracted.textureView,\n\t\t\ttexture: extracted.texture,\n\t\t\tprimaryBuffer: extracted.primaryBuffer,\n\t\t\tbeatBuffer: extracted.beatBuffer,\n\t\t\tbassBuffer: extracted.bassBuffer,\n\t\t\tenergyBuffer: extracted.energyBuffer,\n\t\t\tseekFrame(frame: number) {\n\t\t\t\tprimary.seekFrame?.(frame);\n\t\t\t\tbeat.seekFrame?.(frame);\n\t\t\t\tbass.seekFrame?.(frame);\n\t\t\t\tenergy.seekFrame?.(frame);\n\t\t\t},\n\t\t};\n\t},\n\n\tasync extract(\n\t\tsource: string,\n\t\toptions: AudioSignalOptions = {},\n\t): Promise<ExtractedAudioSignalsBundle> {\n\t\tconst decoded = await decodeAudioSource(source);\n\t\tif (!decoded || decoded.channels.length === 0) {\n\t\t\tthrow new Error(\n\t\t\t\t`Failed to decode audio source for feature extraction: ${source}`,\n\t\t\t);\n\t\t}\n\t\treturn AudioSignal.extractFromChannels(\n\t\t\tdecoded.channels,\n\t\t\tdecoded.sampleRate,\n\t\t\toptions,\n\t\t);\n\t},\n};\n"],"mappings":";;;;;AAmCA,MAAa,cAAc;CAC1B,MAAM,oBACL,UACA,YACA,UAA8B,EAAE,EACO;EACvC,MAAM,SAAS,MAAM,cAAc;EACnC,MAAM,MAAM,QAAQ,OAAO;EAC3B,MAAM,cAAc,QAAQ,eAAe;EAE3C,MAAM,YAAY,MAAM,2BAA2B,gBAClD,QACA,UACA,YACA,KACA,SACA,YACA;EAED,MAAM,UAAU,UAAU,kBAAkB;GAC3C,SAAS,IAAI,aAAa,UAAU,UAAU;GAC9C,MAAM,IAAI,aAAa,UAAU,UAAU;GAC3C,MAAM,IAAI,aAAa,UAAU,UAAU;GAC3C,QAAQ,IAAI,aAAa,UAAU,UAAU;GAC7C;EAED,MAAM,iBAAoC;GACzC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EACD,MAAM,cAAiC;GACtC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EACD,MAAM,cAAiC;GACtC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EACD,MAAM,gBAAmC;GACxC,QAAQ;GACR,SAAS;GACT,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,QAAQ,UAAU;GAClB,OAAO,UAAU,MAAM;GACvB;EAED,MAAM,UAAU,iBAAiB,QAAQ,SAAS,KAAK,eAAe;EACtE,MAAM,OAAO,iBAAiB,QAAQ,MAAM,KAAK,YAAY;EAC7D,MAAM,OAAO,iBAAiB,QAAQ,MAAM,KAAK,YAAY;EAC7D,MAAM,SAAS,iBAAiB,QAAQ,QAAQ,KAAK,cAAc;AAEnE,SAAO;GACN;GACA;GACA;GACA;GACA,aAAa,UAAU;GACvB,WAAW,UAAU;GACrB;GACA,aAAa,UAAU;GACvB,SAAS,UAAU;GACnB,eAAe,UAAU;GACzB,YAAY,UAAU;GACtB,YAAY,UAAU;GACtB,cAAc,UAAU;GACxB,UAAU,OAAe;AACxB,YAAQ,YAAY,MAAM;AAC1B,SAAK,YAAY,MAAM;AACvB,SAAK,YAAY,MAAM;AACvB,WAAO,YAAY,MAAM;;GAE1B;;CAGF,MAAM,QACL,QACA,UAA8B,EAAE,EACO;EACvC,MAAM,UAAU,MAAM,kBAAkB,OAAO;AAC/C,MAAI,CAAC,WAAW,QAAQ,SAAS,WAAW,EAC3C,OAAM,IAAI,MACT,yDAAyD,SACzD;AAEF,SAAO,YAAY,oBAClB,QAAQ,UACR,QAAQ,YACR,QACA;;CAEF"}

package/dist/{audio-Dvwwz8xU.d.mts → audio-nmU-BWxI.d.mts}

@@ -1,5 +1,5 @@
-import { o as AudioSignalComputeConfig, zt as FrameSignal } from "./index-D2jDC7O5.mjs";
-import { n as NodeRendererPlugin } from "./index-BMVVmc4G.mjs";
+import { o as AudioSignalComputeConfig, zt as FrameSignal } from "./index-ogL8Y-Ng.mjs";
+import { n as NodeRendererPlugin } from "./index-DY3mLoPO.mjs";
 
 //#region ../../nodes/node-modulate/dist/renderer.d.mts
 //#region src/renderers/index.d.ts
@@ -34,4 +34,4 @@ declare const AudioSignal: {
 };
 //#endregion
 export { _default as i, AudioSignalOptions as n, ExtractedAudioSignalsBundle as r, AudioSignal as t };
-//# sourceMappingURL=audio-Dvwwz8xU.d.mts.map
+//# sourceMappingURL=audio-nmU-BWxI.d.mts.map

package/dist/{audio-Dvwwz8xU.d.mts.map → audio-nmU-BWxI.d.mts.map}

@@ -1 +1 @@
-{"version":3,"file":"audio-Dvwwz8xU.d.mts","names":["_framefields_node_sdk_renderer0","_default","NodeRendererPlugin","Readonly","default"],"sources":["../../../nodes/node-modulate/dist/renderer.d.mts","../src/signals/audio.ts"],"sourcesContent":["import * as _framefields_node_sdk_renderer0 from \"@framefields/node-sdk/renderer\";\n\n//#region src/renderers/index.d.ts\ndeclare const _default: Readonly<_framefields_node_sdk_renderer0.NodeRendererPlugin>;\n//#endregion\nexport { _default as default };\n//# sourceMappingURL=renderer.d.mts.map"],"mappings":";;;;;cAGcC,UAAUE,SAASH;AAHiD;;;UCYjE,kBAAA,SAA2B;;EDT9BC,WAAsE,CAAA,EAAA,MAAA;;;UCenE,2BAAA;EANA,OAAA,EAOP,WAPO,CAAmB,MAAA,CAAA;EAMnB,IAAA,EAEV,WAFU,CAAA,MAAA,CAAA;EACP,IAAA,EAEH,WAFG,CAAA,MAAA,CAAA;EACH,MAAA,EAEE,WAFF,CAAA,MAAA,CAAA;EACA,WAAA,EAAA,MAAA;EACE,SAAA,EAAA,MAAA;EAAW,UAAA,EAAA,MAAA;EAaP,WAAA,EAAA,OAuGZ;EArGW,OAAA,EAAA,OAAA;EAED,aAAA,EAAA,OAAA;EACC,UAAA,EAAA,OAAA;EAAR,UAAA,EAAA,OAAA;EAoFO,YAAA,EAAA,OAAA;EACC,SAAA,CAAA,KAAA,EAAA,MAAA,CAAA,EAAA,IAAA;;AAAD,cA1FE,WA0FF,EAAA;gCAxFC,8CAED,qBACP,QAAQ;oCAoFD,qBACP,QAAQ"}
+{"version":3,"file":"audio-nmU-BWxI.d.mts","names":["_framefields_node_sdk_renderer0","_default","NodeRendererPlugin","Readonly","default"],"sources":["../../../nodes/node-modulate/dist/renderer.d.mts","../src/signals/audio.ts"],"sourcesContent":["import * as _framefields_node_sdk_renderer0 from \"@framefields/node-sdk/renderer\";\n\n//#region src/renderers/index.d.ts\ndeclare const _default: Readonly<_framefields_node_sdk_renderer0.NodeRendererPlugin>;\n//#endregion\nexport { _default as default };\n//# sourceMappingURL=renderer.d.mts.map"],"mappings":";;;;;cAGcC,UAAUE,SAASH;AAHiD;;;UCYjE,kBAAA,SAA2B;;EDT9BC,WAAsE,CAAA,EAAA,MAAA;;;UCenE,2BAAA;EANA,OAAA,EAOP,WAPO,CAAmB,MAAA,CAAA;EAMnB,IAAA,EAEV,WAFU,CAAA,MAAA,CAAA;EACP,IAAA,EAEH,WAFG,CAAA,MAAA,CAAA;EACH,MAAA,EAEE,WAFF,CAAA,MAAA,CAAA;EACA,WAAA,EAAA,MAAA;EACE,SAAA,EAAA,MAAA;EAAW,UAAA,EAAA,MAAA;EAaP,WAAA,EAAA,OAuGZ;EArGW,OAAA,EAAA,OAAA;EAED,aAAA,EAAA,OAAA;EACC,UAAA,EAAA,OAAA;EAAR,UAAA,EAAA,OAAA;EAoFO,YAAA,EAAA,OAAA;EACC,SAAA,CAAA,KAAA,EAAA,MAAA,CAAA,EAAA,IAAA;;AAAD,cA1FE,WA0FF,EAAA;gCAxFC,8CAED,qBACP,QAAQ;oCAoFD,qBACP,QAAQ"}

package/dist/{dist-1iUYuPct.mjs → dist-55MP0aN4.mjs}

@@ -1,6 +1,6 @@
 import { Ht as updateClockSignals, Ot as isSignal, Pt as resolveMediaMimeType, bt as getActiveMediaMetadata, f as DEFAULT_DURATION_MS, wt as getMediaType } from "./dist-Bx6J0VcM.mjs";
 import { i as webgpuRegistry, t as audioRegistry } from "./renderer-CtVkU_GA.mjs";
-import { $ as registerHeadlessFont, A as drawLottieNode, B as inputStore, D as drawCaptionNode, M as drawSignalNode, N as drawSvgNode, O as drawGifNode, P as drawVideoNode, b as SlugGeometry, et as shaderStore, it as GetFontAssetUrl, j as drawParagraphNode, k as drawImageNode, ot as getEnv, st as resolveMediaSourceUrl, tt as signalRegistry, y as SlugFontCache } from "./dist-gjHmorxL.mjs";
+import { $ as registerHeadlessFont, A as drawLottieNode, B as inputStore, D as drawCaptionNode, L as getHeadlessFontPath, M as drawSignalNode, N as drawSvgNode, O as drawGifNode, P as drawVideoNode, at as getEnv, b as SlugGeometry, et as shaderStore, it as GetFontAssetUrl, j as drawParagraphNode, k as drawImageNode, ot as resolveMediaSourceUrl, tt as signalRegistry, y as SlugFontCache } from "./dist-DgIKXWZ1.mjs";
 import { AudioSampleSink } from "mediabunny";
 
 //#region ../renderers/dist/index.mjs
@@ -691,6 +691,62 @@ function hslToRgb(h, s, l) {
 		hue2rgb(p, q, h - 1 / 3)
 	];
 }
+/**
+* Preloads a font into the browser or headless environment.
+*/
+async function preloadFont(family, url) {
+	if (typeof window !== "undefined" && typeof FontFace !== "undefined") try {
+		const loadedFace = await new FontFace(family, `url(${url})`).load();
+		document.fonts.add(loadedFace);
+		await document.fonts.ready;
+	} catch (e) {
+		console.warn(`[preloadFont] Failed to load font "${family}" from ${url}:`, e);
+	}
+	else await registerHeadlessFont(family, url);
+}
+const EMOJI_REGEX = /\p{Extended_Pictographic}/gu;
+let warnedNoEmojiFont = false;
+/**
+* Loads every font a composition's text uses (for layout and for drawing) and
+* the emoji it draws. The browser preview and the export both call this, so
+* they start each render from the same glyphs.
+*/
+async function preloadCompositionFonts(media, device, onError = (err, what) => console.warn(`[framefields] ${what}`, err)) {
+	const families = /* @__PURE__ */ new Set();
+	const emoji = /* @__PURE__ */ new Map();
+	(function walk(node) {
+		const op = node.operation;
+		if (op) {
+			const isText = op.op === "text" || op.kind === "text" || op.op === "caption" || op.kind === "caption" || typeof op.text === "string";
+			const family = op.fontFamily || (isText ? "Inter" : "");
+			if (family) families.add(family);
+			if (op.op === "text" && typeof op.text === "string") {
+				const fontSize = op.fontSize ?? 48;
+				for (const char of op.text.match(EMOJI_REGEX) ?? []) emoji.set(`${char}-${fontSize}`, fontSize);
+			}
+		}
+		for (const child of node.children ?? []) walk(child);
+	})(media);
+	const tasks = [];
+	for (const family of families) {
+		const url = getHeadlessFontPath(family) ?? GetFontAssetUrl(family);
+		tasks.push(preloadFont(family, url).catch((err) => onError(err, `font "${family}" from ${url}`)));
+		if (device) tasks.push(SlugFontCache.preloadSlugFont(device, family, url).catch((err) => onError(err, `Slug font "${family}" from ${url}`)));
+	}
+	if (device && emoji.size > 0) {
+		if (!SlugFontCache.hasEmojiFont() && !warnedNoEmojiFont) {
+			warnedNoEmojiFont = true;
+			console.warn("[framefields] Text uses emoji but no emoji font is registered, so exports draw nothing for them. Register a color emoji font (e.g. Noto Color Emoji) with FontManager.registerEmojiFont(path).");
+		}
+		for (const [key, fontSize] of emoji) {
+			const char = key.slice(0, key.lastIndexOf("-"));
+			tasks.push(SlugFontCache.preloadEmoji(device, char, fontSize).catch((err) => {
+				if (SlugFontCache.hasEmojiFont()) onError(err, `emoji "${char}"`);
+			}));
+		}
+	}
+	await Promise.all(tasks);
+}
 const defaultSpringConfig = {
 	damping: 10,
 	mass: 1,
@@ -910,19 +966,6 @@ function measureTextAsync(text, style) {
 	const fontUrl = GetFontAssetUrl(fontFamily);
 	return SlugFontCache.preloadSlugFont(null, fontFamily, fontUrl).then(() => measureText(text, style)).catch(() => measureText(text, style));
 }
-/**
-* Preloads a font into the browser or headless environment.
-*/
-async function preloadFont(family, url) {
-	if (typeof window !== "undefined" && typeof FontFace !== "undefined") try {
-		const loadedFace = await new FontFace(family, `url(${url})`).load();
-		document.fonts.add(loadedFace);
-		await document.fonts.ready;
-	} catch (e) {
-		console.warn(`[preloadFont] Failed to load font "${family}" from ${url}:`, e);
-	}
-	else await registerHeadlessFont(family, url);
-}
 
 //#endregion
 //#region ../compositions/dist/layer-logic-DBs4NHoi.mjs
@@ -1855,5 +1898,5 @@ async function mixAudioTracks(virtualMedia, fps, targetSampleRate = 48e3, device
 }
 
 //#endregion
-export { springCalculation as S, measureTextAsync as _, resolveLayerDuration as a, requiresIsolation as b, MAX_LIGHTS as c, bezier as d, computeStrokeRect as f, measureText as g, measureSpring as h, mixAudioTracks as i, Matrix4Math as l, mapBlendModeToSkia as m, decodeAudioSource as n, Easing as o, interpolate as p, drawCompositionTree as r, LIGHT_UNIFORM_SIZE_BYTES as s, compositionStateStore as t, Vector3Math as u, parseColorToRgb as v, spring as x, preloadFont as y };
-//# sourceMappingURL=dist-1iUYuPct.mjs.map
+export { springCalculation as C, spring as S, measureTextAsync as _, resolveLayerDuration as a, preloadFont as b, MAX_LIGHTS as c, bezier as d, computeStrokeRect as f, measureText as g, measureSpring as h, mixAudioTracks as i, Matrix4Math as l, mapBlendModeToSkia as m, decodeAudioSource as n, Easing as o, interpolate as p, drawCompositionTree as r, LIGHT_UNIFORM_SIZE_BYTES as s, compositionStateStore as t, Vector3Math as u, parseColorToRgb as v, requiresIsolation as x, preloadCompositionFonts as y };
+//# sourceMappingURL=dist-55MP0aN4.mjs.map