frameyard 0.4.0 → 0.6.0

package/dist/server/timeline-preview-data.js

@@ -0,0 +1,97 @@
+import { FrameyardError } from "../errors.js";
+import { resolveProjectTimeline } from "../timeline/resolve.js";
+import { resolveTimelineAudio } from "../renderer/timeline.js";
+function projectUrl(relative) {
+    return `/${relative
+        .split("/")
+        .map((segment) => encodeURIComponent(segment))
+        .join("/")}`;
+}
+function previewSource(source) {
+    if (source.kind === "composition") {
+        return {
+            kind: "composition",
+            id: source.id,
+            url: `${projectUrl(source.entry)}?__fy-manual=1`,
+            width: source.metadata.width,
+            height: source.metadata.height,
+            durationInFrames: source.metadata.durationInFrames,
+        };
+    }
+    if (source.kind === "timeline") {
+        return {
+            kind: "timeline",
+            id: source.id,
+            url: `/__frameyard/timeline/${encodeURIComponent(source.id)}?__fy-embed=1`,
+            width: source.timeline.format.width,
+            height: source.timeline.format.height,
+            durationInFrames: source.durationInFrames,
+        };
+    }
+    return {
+        kind: source.kind,
+        src: source.src,
+        url: projectUrl(source.src),
+        ...(source.width !== undefined ? { width: source.width } : {}),
+        ...(source.height !== undefined ? { height: source.height } : {}),
+        ...(source.durationInFrames !== undefined ? { durationInFrames: source.durationInFrames } : {}),
+        ...(source.kind === "image" ? {} : { hasAudio: source.hasAudio }),
+    };
+}
+export async function buildTimelinePreviewData(project, timelineId, signal) {
+    const projectTimeline = project.timelines.get(timelineId);
+    if (!projectTimeline) {
+        throw new FrameyardError("TIMELINE_NOT_FOUND", `Timeline "${timelineId}" is not listed in video.config.js.`);
+    }
+    const resolved = await resolveProjectTimeline({
+        project,
+        timeline: projectTimeline,
+        ...(signal ? { signal } : {}),
+    });
+    if (!resolved.timeline) {
+        const first = resolved.diagnostics.find((diagnostic) => diagnostic.severity === "error");
+        throw new FrameyardError(first?.code ?? "TIMELINE_INVALID", first?.message ?? "Timeline resolution failed.", {
+            diagnostics: resolved.diagnostics,
+        });
+    }
+    const timeline = resolved.timeline;
+    const audio = resolveTimelineAudio(timeline);
+    const clips = timeline.clips.map((clip) => ({
+        id: clip.id,
+        track: clip.track,
+        source: previewSource(clip.source),
+        start: clip.start,
+        duration: clip.duration,
+        end: clip.end,
+        sourceIn: clip.sourceIn,
+        ...(clip.props !== undefined ? { props: clip.props } : {}),
+        transform: clip.transform ?? { fit: "contain", x: 0, y: 0, scale: 1, rotation: 0, opacity: 1 },
+        audio: clip.audio ?? { muted: false, gain: 1 },
+    }));
+    const audioClips = audio.clips.map((clip) => ({
+        src: clip.src,
+        url: projectUrl(clip.src),
+        startFrame: clip.startFrame,
+        trimStart: clip.trimStart,
+        ...(clip.trimDuration !== undefined ? { trimDuration: clip.trimDuration } : {}),
+        volume: clip.volume,
+    }));
+    return {
+        timeline: timeline.id,
+        entry: timeline.entry,
+        format: { ...timeline.format },
+        durationInFrames: timeline.durationInFrames,
+        ...(timeline.background !== undefined ? { background: timeline.background } : {}),
+        tracks: timeline.tracks.map((track) => ({
+            id: track.id,
+            kind: track.kind,
+            ...(track.name !== undefined ? { name: track.name } : {}),
+            ...(track.gain !== undefined ? { gain: track.gain } : {}),
+            ...(track.muted !== undefined ? { muted: track.muted } : {}),
+        })),
+        clips,
+        audioClips,
+        diagnostics: resolved.diagnostics,
+    };
+}
+//# sourceMappingURL=timeline-preview-data.js.map

package/dist/server/timeline-preview-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-preview-data.js","sourceRoot":"","sources":["../../src/server/timeline-preview-data.ts"],"names":[],"mappings":"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"}

package/dist/server/timeline-preview-html.d.ts

@@ -0,0 +1,4 @@
+export declare function renderTimelinePreviewHtml(timelineId: string, options?: {
+    embed?: boolean;
+}): string;
+//# sourceMappingURL=timeline-preview-html.d.ts.map

package/dist/server/timeline-preview-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-preview-html.d.ts","sourceRoot":"","sources":["../../src/server/timeline-preview-html.ts"],"names":[],"mappings":"AAwBA,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CA4MvG"}

package/dist/server/timeline-preview-html.js

@@ -0,0 +1,227 @@
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (character) => {
+        switch (character) {
+            case "&":
+                return "&amp;";
+            case "<":
+                return "&lt;";
+            case ">":
+                return "&gt;";
+            case '"':
+                return "&quot;";
+            default:
+                return "&#39;";
+        }
+    });
+}
+const IMPORT_MAP = JSON.stringify({
+    imports: {
+        frameyard: "/__frameyard/framework/index.js",
+        "frameyard/runtime": "/__frameyard/framework/runtime/index.js",
+    },
+});
+export function renderTimelinePreviewHtml(timelineId, options = {}) {
+    const id = escapeHtml(timelineId);
+    if (options.embed) {
+        return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Frameyard timeline ${id}</title>
+    <style>
+      html, body { margin: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
+      #stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: transparent; }
+      .timeline-layer { position: absolute; left: 50%; top: 50%; transform-origin: center; }
+      .timeline-layer iframe, .timeline-layer video, .timeline-layer img { display: block; border: 0; }
+    </style>
+    <script type="importmap" data-fy-host>${IMPORT_MAP}</script>
+  </head>
+  <body data-timeline-id="${id}" data-embed="1">
+    <div id="stage"></div>
+    <script type="module" src="/__frameyard/framework/preview/timeline-main.js"></script>
+  </body>
+</html>`;
+    }
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Frameyard timeline ${id}</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #0b0d10;
+        --panel: #11151a;
+        --panel-2: #171c23;
+        --line: #252c35;
+        --text: #e8edf3;
+        --muted: #8a97a6;
+        --accent: #b8f36b;
+        --accent-ink: #101408;
+        --danger: #ff8a8a;
+        --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Liberation Mono", monospace;
+        --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+      }
+      * { box-sizing: border-box; }
+      html, body { height: 100%; }
+      body {
+        margin: 0;
+        background: var(--bg);
+        color: var(--text);
+        font-family: var(--sans);
+        font-size: 13px;
+        overflow: hidden;
+      }
+      #app {
+        display: grid;
+        grid-template-rows: 54px minmax(0, 1fr) 210px 58px;
+        height: 100vh;
+      }
+      header {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 0 18px;
+        border-bottom: 1px solid var(--line);
+        background: linear-gradient(180deg, #11151a, #0d1014);
+      }
+      .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; }
+      .mark {
+        width: 17px; height: 17px; border-radius: 4px;
+        background: linear-gradient(135deg, var(--accent), #5fd6ff);
+        box-shadow: 0 0 18px rgba(184, 243, 107, 0.3);
+      }
+      .tag { color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
+      a { color: var(--accent); text-decoration: none; }
+      a:hover { text-decoration: underline; }
+      .meta { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }
+      #viewport {
+        min-height: 0;
+        display: grid;
+        place-items: center;
+        padding: 20px;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 50% 20%, #141b24 0, transparent 55%),
+          #080a0d;
+      }
+      #stage-wrap {
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+        background: #000;
+      }
+      #stage {
+        position: relative;
+        transform-origin: top left;
+        overflow: hidden;
+        background: #000;
+      }
+      .timeline-layer { position: absolute; left: 50%; top: 50%; transform-origin: center; }
+      .timeline-layer iframe, .timeline-layer video, .timeline-layer img { display: block; border: 0; }
+      #timeline {
+        position: relative;
+        min-height: 0;
+        border-top: 1px solid var(--line);
+        background: var(--panel);
+        overflow: auto;
+        padding: 10px 16px 16px;
+      }
+      #tracks { position: relative; display: flex; flex-direction: column; gap: 6px; }
+      .track { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; min-height: 30px; }
+      .track-label {
+        display: flex; align-items: center; justify-content: flex-end;
+        color: var(--muted); font-family: var(--mono); font-size: 10px;
+        text-transform: uppercase; letter-spacing: 0.06em;
+      }
+      .lane {
+        position: relative; border: 1px solid var(--line); border-radius: 6px;
+        background: #0d1116; overflow: hidden;
+      }
+      .clip {
+        position: absolute; top: 3px; bottom: 3px; border-radius: 4px;
+        background: linear-gradient(180deg, #2a4058, #1d2c3d);
+        border: 1px solid #3b5672; color: #dce8f5;
+        font: 10px/1 var(--mono); padding: 6px 7px; overflow: hidden;
+        white-space: nowrap; text-overflow: ellipsis;
+      }
+      .clip.composition { background: linear-gradient(180deg, #314a33, #203120); border-color: #4d704d; }
+      .clip.audio { background: linear-gradient(180deg, #4a3b22, #302516); border-color: #6e5631; }
+      .clip.nested { background: linear-gradient(180deg, #443152, #2c2036); border-color: #63477a; }
+      #playhead {
+        position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent);
+        box-shadow: 0 0 12px rgba(184, 243, 107, 0.7); pointer-events: none;
+      }
+      #error, #diagnostics {
+        margin-top: 10px; border: 1px solid #4b3030; border-radius: 6px;
+        padding: 9px 11px; background: #1b1111; color: var(--danger);
+        font-family: var(--mono); font-size: 11px; white-space: pre-wrap;
+      }
+      #diagnostics { border-color: var(--line); background: var(--panel-2); color: var(--muted); }
+      footer {
+        display: flex; align-items: center; gap: 12px; padding: 0 18px;
+        border-top: 1px solid var(--line); background: var(--panel);
+      }
+      button {
+        border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
+        border-radius: 6px; padding: 8px 12px; cursor: pointer;
+      }
+      button:hover { border-color: #3a4654; }
+      .step {
+        width: 32px; height: 32px; padding: 0; border-radius: 6px;
+        color: var(--muted); font-size: 18px; line-height: 1;
+      }
+      .jump {
+        height: 32px; padding: 0 8px; border-radius: 6px;
+        color: var(--muted); font: 10px var(--mono);
+      }
+      .step:hover:not(:disabled), .jump:hover:not(:disabled) { color: var(--text); }
+      .play {
+        width: 38px; height: 38px; border-radius: 50%; border: 0;
+        background: var(--accent); color: var(--accent-ink);
+        font-size: 15px; font-weight: 700;
+      }
+      .scrub { flex: 1; accent-color: var(--accent); }
+      .readout { min-width: 150px; text-align: right; color: var(--muted); font-family: var(--mono); font-size: 11px; }
+      .readout b { color: var(--text); font-weight: 600; }
+      .audio { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
+      .audio input[type="range"] { width: 80px; accent-color: var(--accent); }
+      .hint { color: var(--muted); font-family: var(--mono); font-size: 10px; }
+    </style>
+    <script type="importmap" data-fy-host>${IMPORT_MAP}</script>
+  </head>
+  <body data-timeline-id="${id}" data-embed="0">
+    <div id="app">
+      <header>
+        <div class="brand"><span class="mark"></span>frameyard <span class="tag">timeline</span></div>
+        <a href="/__frameyard/">← compositions</a>
+        <span id="title" class="hint"></span>
+        <div id="meta" class="meta"></div>
+      </header>
+      <main id="viewport">
+        <div id="stage-wrap"><div id="stage"></div></div>
+      </main>
+      <section id="timeline">
+        <div id="tracks"></div>
+        <div id="playhead"></div>
+        <div id="error" role="alert" hidden></div>
+        <div id="diagnostics" hidden></div>
+      </section>
+      <footer>
+        <button id="jump-back" class="jump" type="button" aria-label="Back one second" aria-keyshortcuts="Shift+ArrowLeft" title="Back one second (Shift+←)">&#8722;1s</button>
+        <button id="step-back" class="step" type="button" aria-label="Previous frame" aria-keyshortcuts="ArrowLeft" title="Previous frame (←)">&#8249;</button>
+        <button id="play-button" class="play" type="button" aria-label="Play">&#9654;</button>
+        <button id="step-forward" class="step" type="button" aria-label="Next frame" aria-keyshortcuts="ArrowRight" title="Next frame (→)">&#8250;</button>
+        <button id="jump-forward" class="jump" type="button" aria-label="Forward one second" aria-keyshortcuts="Shift+ArrowRight" title="Forward one second (Shift+→)">+1s</button>
+        <input id="scrub" class="scrub" type="range" min="0" max="0" value="0" step="1" aria-label="Timeline frame">
+        <div class="readout"><b id="frame">0</b> / <span id="duration">0</span> f <span id="clock">0.00s</span></div>
+        <label class="audio"><input id="mute" type="checkbox"> mute <input id="volume" type="range" min="0" max="1" step="0.01" value="0.8" aria-label="Audio volume"></label>
+      </footer>
+    </div>
+    <script type="module" src="/__frameyard/framework/preview/timeline-main.js"></script>
+  </body>
+</html>`;
+}
+//# sourceMappingURL=timeline-preview-html.js.map

package/dist/server/timeline-preview-html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-preview-html.js","sourceRoot":"","sources":["../../src/server/timeline-preview-html.ts"],"names":[],"mappings":"AAAA,SAAS,UAAU,CAAC,KAAa;IAC/B,OAAO,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,EAAE;QAC7C,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,GAAG;gBACN,OAAO,OAAO,CAAC;YACjB,KAAK,GAAG;gBACN,OAAO,MAAM,CAAC;YAChB,KAAK,GAAG;gBACN,OAAO,MAAM,CAAC;YAChB,KAAK,GAAG;gBACN,OAAO,QAAQ,CAAC;YAClB;gBACE,OAAO,OAAO,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE;QACP,SAAS,EAAE,iCAAiC;QAC5C,mBAAmB,EAAE,yCAAyC;KAC/D;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,yBAAyB,CAAC,UAAkB,EAAE,UAA+B,EAAE;IAC7F,MAAM,EAAE,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,OAAO;;;;;gCAKqB,EAAE;;;;;;;4CAOU,UAAU;;4BAE1B,EAAE;;;;QAItB,CAAC;IACP,CAAC;IAED,OAAO;;;;;gCAKuB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA8IU,UAAU;;4BAE1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8BtB,CAAC;AACT,CAAC"}

package/dist/timeline/plan.d.ts

@@ -0,0 +1,32 @@
+import type { ResolvedTimeline, ResolvedTimelineClip } from "./resolve.js";
+export interface TimelineRenderLayer {
+    clip: ResolvedTimelineClip;
+    /** Source frame used at the segment's first timeline frame. */
+    sourceStart: number;
+}
+export interface TimelineRenderSegment {
+    index: number;
+    /** Inclusive first timeline frame. */
+    start: number;
+    /** Exclusive last timeline frame. */
+    end: number;
+    frames: number;
+    /** Visual layers from bottom to top. */
+    layers: TimelineRenderLayer[];
+}
+export interface TimelineRenderPlan {
+    timeline: ResolvedTimeline;
+    maxSegmentFrames: number;
+    segments: TimelineRenderSegment[];
+}
+/**
+ * Splits a resolved timeline at visual clip boundaries and a maximum segment
+ * duration. Every segment has a fixed set of visual layers; audio is mixed
+ * globally and never appears here.
+ */
+export declare function planTimelineRender(timeline: ResolvedTimeline, options?: {
+    maxSegmentFrames?: number;
+    startFrame?: number;
+    endFrame?: number;
+}): TimelineRenderPlan;
+//# sourceMappingURL=plan.d.ts.map

package/dist/timeline/plan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan.d.ts","sourceRoot":"","sources":["../../src/timeline/plan.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE3E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,EAAE,mBAAmB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;CACnC;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,GAAE;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,GAClF,kBAAkB,CAiEpB"}

package/dist/timeline/plan.js

@@ -0,0 +1,68 @@
+function isVisualClip(clip) {
+    return clip.source.kind !== "audio";
+}
+/**
+ * Splits a resolved timeline at visual clip boundaries and a maximum segment
+ * duration. Every segment has a fixed set of visual layers; audio is mixed
+ * globally and never appears here.
+ */
+export function planTimelineRender(timeline, options = {}) {
+    const maxSegmentFrames = options.maxSegmentFrames ?? Math.max(1, Math.round(timeline.format.fps * 10));
+    if (!Number.isInteger(maxSegmentFrames) || maxSegmentFrames <= 0) {
+        throw new Error("maxSegmentFrames must be a positive integer.");
+    }
+    const startFrame = options.startFrame ?? 0;
+    const endFrame = options.endFrame ?? timeline.durationInFrames;
+    if (!Number.isInteger(startFrame) ||
+        !Number.isInteger(endFrame) ||
+        startFrame < 0 ||
+        endFrame > timeline.durationInFrames ||
+        endFrame <= startFrame) {
+        throw new Error(`Invalid timeline range ${startFrame}..${endFrame}.`);
+    }
+    const visualClips = timeline.clips.filter(isVisualClip);
+    const boundaries = new Set([startFrame, endFrame]);
+    for (const clip of visualClips) {
+        if (clip.start > startFrame && clip.start < endFrame) {
+            boundaries.add(clip.start);
+        }
+        if (clip.end > startFrame && clip.end < endFrame) {
+            boundaries.add(clip.end);
+        }
+    }
+    const ordered = [...boundaries].sort((left, right) => left - right);
+    const ranges = [];
+    for (let index = 1; index < ordered.length; index += 1) {
+        const start = ordered[index - 1];
+        const end = ordered[index];
+        if (end <= start) {
+            continue;
+        }
+        for (let cursor = start; cursor < end; cursor += maxSegmentFrames) {
+            ranges.push({ start: cursor, end: Math.min(end, cursor + maxSegmentFrames) });
+        }
+    }
+    const trackOrder = new Map(timeline.tracks.map((track, index) => [track.id, index]));
+    const segments = ranges.map((range, index) => {
+        const layers = visualClips
+            .filter((clip) => clip.start <= range.start && clip.end >= range.end)
+            .sort((left, right) => {
+            const leftOrder = trackOrder.get(left.track) ?? Number.MAX_SAFE_INTEGER;
+            const rightOrder = trackOrder.get(right.track) ?? Number.MAX_SAFE_INTEGER;
+            return leftOrder - rightOrder;
+        })
+            .map((clip) => ({
+            clip,
+            sourceStart: clip.sourceIn + (range.start - clip.start),
+        }));
+        return {
+            index,
+            start: range.start,
+            end: range.end,
+            frames: range.end - range.start,
+            layers,
+        };
+    });
+    return { timeline, maxSegmentFrames, segments };
+}
+//# sourceMappingURL=plan.js.map

package/dist/timeline/plan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../src/timeline/plan.ts"],"names":[],"mappings":"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"}

package/dist/timeline/resolve.d.ts

@@ -0,0 +1,60 @@
+import type { CompositionDiagnostic, CompositionMetadata, ControllerDeclaration, ResolvedAudioClip, ResolvedTranscriptClip } from "../contracts.js";
+import type { Project, ProjectFormat, ProjectTimeline } from "../project.js";
+import { type TimelineClip, type TimelineTrack } from "./schema.js";
+export interface ResolvedCompositionSource {
+    kind: "composition";
+    id: string;
+    entry: string;
+    metadata: CompositionMetadata;
+    controller: ControllerDeclaration | null;
+    durationInFrames: number;
+    audioClips: readonly ResolvedAudioClip[];
+    embeddedAudioClips: readonly ResolvedAudioClip[];
+    transcriptClips: readonly ResolvedTranscriptClip[];
+}
+export interface ResolvedNestedTimelineSource {
+    kind: "timeline";
+    id: string;
+    entry: string;
+    durationInFrames: number;
+    timeline: ResolvedTimeline;
+}
+export interface ResolvedMediaSource {
+    kind: "video" | "image" | "audio";
+    src: string;
+    absolutePath: string;
+    durationInFrames?: number;
+    width?: number;
+    height?: number;
+    hasVideo: boolean;
+    hasAudio: boolean;
+}
+export type ResolvedTimelineSource = ResolvedCompositionSource | ResolvedNestedTimelineSource | ResolvedMediaSource;
+export interface ResolvedTimelineClip extends Omit<TimelineClip, "source" | "duration"> {
+    source: ResolvedTimelineSource;
+    duration: number;
+    end: number;
+}
+export interface ResolvedTimeline {
+    id: string;
+    entry: string;
+    name?: string;
+    background?: string;
+    format: ProjectFormat;
+    durationInFrames: number;
+    tracks: TimelineTrack[];
+    clips: ResolvedTimelineClip[];
+}
+export interface ResolveTimelineResult {
+    timeline: ResolvedTimeline | null;
+    diagnostics: CompositionDiagnostic[];
+}
+/** Resolves a project timeline, its references, media, and nested timelines. */
+export declare function resolveProjectTimeline(options: {
+    project: Project;
+    timeline: ProjectTimeline;
+    signal?: AbortSignal;
+    /** Render-time props overrides keyed by top-level composition clip ID. */
+    propsOverrides?: Record<string, unknown>;
+}): Promise<ResolveTimelineResult>;
+//# sourceMappingURL=resolve.d.ts.map

package/dist/timeline/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/timeline/resolve.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,qBAAqB,EAErB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE7E,OAAO,EAAyB,KAAK,YAAY,EAAyB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAElH,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,aAAa,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,UAAU,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACzC,kBAAkB,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACjD,eAAe,EAAE,SAAS,sBAAsB,EAAE,CAAC;CACpD;AAED,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,UAAU,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAAG,4BAA4B,GAAG,mBAAmB,CAAC;AAEpH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,YAAY,EAAE,QAAQ,GAAG,UAAU,CAAC;IACrF,MAAM,EAAE,sBAAsB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC;AAytBD,gFAAgF;AAChF,wBAAsB,sBAAsB,CAAC,OAAO,EAAE;IACpD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAUjC"}