framewebworker 0.1.2 → 0.1.4

package/dist/react/index.d.ts

@@ -75,7 +75,32 @@ interface RenderOptions {
     /** AbortSignal to cancel rendering */
     signal?: AbortSignal;
 }
-type ClipStatus = 'queued' | 'rendering' | 'done' | 'failed';
+interface ClipMetrics {
+    clipId: string;
+    extractionMs: number;
+    encodingMs: number;
+    totalMs: number;
+    framesExtracted: number;
+}
+interface RenderMetrics {
+    totalMs: number;
+    extractionMs: number;
+    encodingMs: number;
+    stitchMs: number;
+    clips: ClipMetrics[];
+    framesPerSecond: number;
+}
+interface Segment {
+    start: number;
+    end: number;
+    captions?: CaptionSegment[];
+}
+/** Options for the render()/renderToUrl() single-video API */
+interface SingleVideoRenderOptions extends Omit<StitchOptions, 'onProgress' | 'onComplete'> {
+    onProgress?: (progress: RichProgress) => void;
+    onComplete?: (metrics: RenderMetrics) => void;
+}
+type ClipStatus = 'pending' | 'rendering' | 'encoding' | 'done' | 'error';
 interface ClipProgress {
     index: number;
     status: ClipStatus;
@@ -85,8 +110,10 @@ interface RichProgress {
     overall: number;
     clips: ClipProgress[];
 }
+/** Extends RenderOptions with rich per-clip progress reporting and completion metrics */
 interface StitchOptions extends Omit<RenderOptions, 'onProgress'> {
     onProgress?: (progress: RichProgress) => void;
+    onComplete?: (metrics: RenderMetrics) => void;
 }
 interface FrameWorker {
     /** Render a single clip to a Blob */
@@ -94,39 +121,56 @@ interface FrameWorker {
     /** Render a single clip and return an object URL */
     renderToUrl(clip: ClipInput, options?: RenderOptions): Promise<string>;
     /** Stitch multiple clips into one Blob */
-    stitch(clips: ClipInput[], options?: StitchOptions): Promise<Blob>;
+    stitch(clips: ClipInput[], options?: StitchOptions): Promise<{
+        blob: Blob;
+        metrics: RenderMetrics;
+    }>;
     /** Stitch multiple clips and return an object URL */
-    stitchToUrl(clips: ClipInput[], options?: StitchOptions): Promise<string>;
+    stitchToUrl(clips: ClipInput[], options?: StitchOptions): Promise<{
+        url: string;
+        metrics: RenderMetrics;
+    }>;
 }
 
-interface UseRenderState {
+interface UseClipRenderState {
     progress: number;
     isRendering: boolean;
     error: Error | null;
     blob: Blob | null;
     url: string | null;
 }
-interface UseRenderActions {
+interface UseClipRenderActions {
     render: (clip: ClipInput, options?: Omit<RenderOptions, 'onProgress' | 'signal'>) => Promise<Blob | null>;
     cancel: () => void;
     reset: () => void;
 }
-type UseRenderResult = UseRenderState & UseRenderActions;
-declare function useRender(frameWorker: FrameWorker): UseRenderResult;
+type UseClipRenderResult = UseClipRenderState & UseClipRenderActions;
+declare function useClipRender(frameWorker: FrameWorker): UseClipRenderResult;
+interface UseRenderResult {
+    start: () => void;
+    cancel: () => void;
+    progress: RichProgress | null;
+    metrics: RenderMetrics | null;
+    url: string | null;
+    error: Error | null;
+    isRendering: boolean;
+}
+declare function useRender(videoUrl: string | null, segments: Segment[], options?: Omit<SingleVideoRenderOptions, 'onProgress' | 'onComplete' | 'signal'>): UseRenderResult;
 
 interface UseStitchState {
-    progress: number;
+    progress: RichProgress;
     isRendering: boolean;
     error: Error | null;
     blob: Blob | null;
     url: string | null;
+    metrics: RenderMetrics | null;
 }
 interface UseStitchActions {
-    stitch: (clips: ClipInput[], options?: Omit<StitchOptions, 'onProgress' | 'signal'>) => Promise<Blob | null>;
+    stitch: (clips: ClipInput[], options?: Omit<StitchOptions, 'onProgress' | 'onComplete' | 'signal'>) => Promise<Blob | null>;
     cancel: () => void;
     reset: () => void;
 }
 type UseStitchResult = UseStitchState & UseStitchActions;
 declare function useStitch(frameWorker: FrameWorker): UseStitchResult;
 
-export { type UseRenderActions, type UseRenderResult, type UseRenderState, type UseStitchActions, type UseStitchResult, type UseStitchState, useRender, useStitch };
+export { type UseClipRenderActions, type UseClipRenderResult, type UseClipRenderState, type UseRenderResult, type UseStitchActions, type UseStitchResult, type UseStitchState, useClipRender, useRender, useStitch };

package/dist/react/index.js

@@ -1,7 +1,8 @@
 import { useState, useRef, useCallback } from 'react';
+import { render } from '../render.js';
 
 // src/react/useRender.ts
-function useRender(frameWorker) {
+function useClipRender(frameWorker) {
   const [state, setState] = useState({
     progress: 0,
     isRendering: false,
@@ -56,13 +57,60 @@ function useRender(frameWorker) {
   );
   return { ...state, render, cancel, reset };
 }
+function useRender(videoUrl, segments, options) {
+  const [isRendering, setIsRendering] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [metrics, setMetrics] = useState(null);
+  const [url, setUrl] = useState(null);
+  const [error, setError] = useState(null);
+  const abortRef = useRef(null);
+  const urlRef = useRef(null);
+  const cancel = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const start = useCallback(() => {
+    if (!videoUrl || isRendering) return;
+    if (urlRef.current) {
+      URL.revokeObjectURL(urlRef.current);
+      urlRef.current = null;
+    }
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setIsRendering(true);
+    setProgress(null);
+    setMetrics(null);
+    setUrl(null);
+    setError(null);
+    render(videoUrl, segments, {
+      ...options,
+      signal: controller.signal,
+      onProgress: (p) => setProgress(p),
+      onComplete: (m) => setMetrics(m)
+    }).then(({ blob }) => {
+      const objectUrl = URL.createObjectURL(blob);
+      urlRef.current = objectUrl;
+      setUrl(objectUrl);
+      setIsRendering(false);
+    }).catch((err) => {
+      if (err instanceof DOMException && err.name === "AbortError") {
+        setIsRendering(false);
+        return;
+      }
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsRendering(false);
+    });
+  }, [videoUrl, segments, options, isRendering]);
+  return { start, cancel, progress, metrics, url, error, isRendering };
+}
+var INITIAL_PROGRESS = { overall: 0, clips: [] };
 function useStitch(frameWorker) {
   const [state, setState] = useState({
-    progress: 0,
+    progress: INITIAL_PROGRESS,
     isRendering: false,
     error: null,
     blob: null,
-    url: null
+    url: null,
+    metrics: null
   });
   const abortRef = useRef(null);
   const urlRef = useRef(null);
@@ -74,7 +122,7 @@ function useStitch(frameWorker) {
       URL.revokeObjectURL(urlRef.current);
       urlRef.current = null;
     }
-    setState({ progress: 0, isRendering: false, error: null, blob: null, url: null });
+    setState({ progress: INITIAL_PROGRESS, isRendering: false, error: null, blob: null, url: null, metrics: null });
   }, []);
   const stitch = useCallback(
     async (clips, options) => {
@@ -84,18 +132,25 @@ function useStitch(frameWorker) {
       }
       const controller = new AbortController();
       abortRef.current = controller;
-      setState({ progress: 0, isRendering: true, error: null, blob: null, url: null });
+      setState({ progress: INITIAL_PROGRESS, isRendering: true, error: null, blob: null, url: null, metrics: null });
       try {
-        const blob = await frameWorker.stitch(clips, {
+        const { blob, metrics } = await frameWorker.stitch(clips, {
           ...options,
           signal: controller.signal,
           onProgress: (p) => {
-            setState((prev) => ({ ...prev, progress: p.overall }));
+            setState((prev) => ({ ...prev, progress: p }));
+          },
+          onComplete: (m) => {
+            setState((prev) => ({ ...prev, metrics: m }));
           }
         });
         const url = URL.createObjectURL(blob);
         urlRef.current = url;
-        setState({ progress: 1, isRendering: false, error: null, blob, url });
+        const doneProgress = {
+          overall: 1,
+          clips: clips.map((_, i) => ({ index: i, status: "done", progress: 1 }))
+        };
+        setState((prev) => ({ ...prev, progress: doneProgress, isRendering: false, blob, url }));
         return blob;
       } catch (err) {
         if (err instanceof DOMException && err.name === "AbortError") {
@@ -112,6 +167,6 @@ function useStitch(frameWorker) {
   return { ...state, stitch, cancel, reset };
 }
 
-export { useRender, useStitch };
+export { useClipRender, useRender, useStitch };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/useRender.ts","../../src/react/useStitch.ts"],"names":["useState","useRef","useCallback"],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { useState, useCallback, useRef } from 'react';\nimport type { ClipInput, RenderOptions, FrameWorker } from '../types.js';\n\nexport interface UseRenderState {\n  progress: number;\n  isRendering: boolean;\n  error: Error | null;\n  blob: Blob | null;\n  url: string | null;\n}\n\nexport interface UseRenderActions {\n  render: (clip: ClipInput, options?: Omit<RenderOptions, 'onProgress' | 'signal'>) => Promise<Blob | null>;\n  cancel: () => void;\n  reset: () => void;\n}\n\nexport type UseRenderResult = UseRenderState & UseRenderActions;\n\nexport function useRender(frameWorker: FrameWorker): UseRenderResult {\n  const [state, setState] = useState<UseRenderState>({\n    progress: 0,\n    isRendering: false,\n    error: null,\n    blob: null,\n    url: null,\n  });\n\n  const abortRef = useRef<AbortController | null>(null);\n  const urlRef = useRef<string | null>(null);\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const reset = useCallback(() => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n    setState({ progress: 0, isRendering: false, error: null, blob: null, url: null });\n  }, []);\n\n  const render = useCallback(\n    async (\n      clip: ClipInput,\n      options?: Omit<RenderOptions, 'onProgress' | 'signal'>\n    ): Promise<Blob | null> => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      }\n\n      const controller = new AbortController();\n      abortRef.current = controller;\n\n      setState({ progress: 0, isRendering: true, error: null, blob: null, url: null });\n\n      try {\n        const blob = await frameWorker.render(clip, {\n          ...options,\n          signal: controller.signal,\n          onProgress: (p) => {\n            setState((prev) => ({ ...prev, progress: p }));\n          },\n        });\n\n        const url = URL.createObjectURL(blob);\n        urlRef.current = url;\n        setState({ progress: 1, isRendering: false, error: null, blob, url });\n        return blob;\n      } catch (err) {\n        if (err instanceof DOMException && err.name === 'AbortError') {\n          setState((prev) => ({ ...prev, isRendering: false, error: null }));\n          return null;\n        }\n        const error = err instanceof Error ? err : new Error(String(err));\n        setState((prev) => ({ ...prev, isRendering: false, error }));\n        return null;\n      }\n    },\n    [frameWorker]\n  );\n\n  return { ...state, render, cancel, reset };\n}\n","'use client';\n\nimport { useState, useCallback, useRef } from 'react';\nimport type { ClipInput, StitchOptions, FrameWorker } from '../types.js';\n\nexport interface UseStitchState {\n  progress: number;\n  isRendering: boolean;\n  error: Error | null;\n  blob: Blob | null;\n  url: string | null;\n}\n\nexport interface UseStitchActions {\n  stitch: (clips: ClipInput[], options?: Omit<StitchOptions, 'onProgress' | 'signal'>) => Promise<Blob | null>;\n  cancel: () => void;\n  reset: () => void;\n}\n\nexport type UseStitchResult = UseStitchState & UseStitchActions;\n\nexport function useStitch(frameWorker: FrameWorker): UseStitchResult {\n  const [state, setState] = useState<UseStitchState>({\n    progress: 0,\n    isRendering: false,\n    error: null,\n    blob: null,\n    url: null,\n  });\n\n  const abortRef = useRef<AbortController | null>(null);\n  const urlRef = useRef<string | null>(null);\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const reset = useCallback(() => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n    setState({ progress: 0, isRendering: false, error: null, blob: null, url: null });\n  }, []);\n\n  const stitch = useCallback(\n    async (\n      clips: ClipInput[],\n      options?: Omit<StitchOptions, 'onProgress' | 'signal'>\n    ): Promise<Blob | null> => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      }\n\n      const controller = new AbortController();\n      abortRef.current = controller;\n\n      setState({ progress: 0, isRendering: true, error: null, blob: null, url: null });\n\n      try {\n        const blob = await frameWorker.stitch(clips, {\n          ...options,\n          signal: controller.signal,\n          onProgress: (p) => {\n            setState((prev) => ({ ...prev, progress: p.overall }));\n          },\n        });\n\n        const url = URL.createObjectURL(blob);\n        urlRef.current = url;\n        setState({ progress: 1, isRendering: false, error: null, blob, url });\n        return blob;\n      } catch (err) {\n        if (err instanceof DOMException && err.name === 'AbortError') {\n          setState((prev) => ({ ...prev, isRendering: false, error: null }));\n          return null;\n        }\n        const error = err instanceof Error ? err : new Error(String(err));\n        setState((prev) => ({ ...prev, isRendering: false, error }));\n        return null;\n      }\n    },\n    [frameWorker]\n  );\n\n  return { ...state, stitch, cancel, reset };\n}\n"]}
+{"version":3,"sources":["../../src/react/useRender.ts","../../src/react/useStitch.ts"],"names":["renderSegments","useState","useRef","useCallback"],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { useState, useCallback, useRef } from 'react';\nimport type { ClipInput, RenderOptions, FrameWorker } from '../types.js';\nimport type { Segment, SingleVideoRenderOptions, RichProgress, RenderMetrics } from '../types.js';\nimport { render as renderSegments } from '../render.js';\n\n// ── useClipRender — wraps FrameWorker.render(clip) ───────────────────────────\n\nexport interface UseClipRenderState {\n  progress: number;\n  isRendering: boolean;\n  error: Error | null;\n  blob: Blob | null;\n  url: string | null;\n}\n\nexport interface UseClipRenderActions {\n  render: (clip: ClipInput, options?: Omit<RenderOptions, 'onProgress' | 'signal'>) => Promise<Blob | null>;\n  cancel: () => void;\n  reset: () => void;\n}\n\nexport type UseClipRenderResult = UseClipRenderState & UseClipRenderActions;\n\nexport function useClipRender(frameWorker: FrameWorker): UseClipRenderResult {\n  const [state, setState] = useState<UseClipRenderState>({\n    progress: 0,\n    isRendering: false,\n    error: null,\n    blob: null,\n    url: null,\n  });\n\n  const abortRef = useRef<AbortController | null>(null);\n  const urlRef = useRef<string | null>(null);\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const reset = useCallback(() => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n    setState({ progress: 0, isRendering: false, error: null, blob: null, url: null });\n  }, []);\n\n  const render = useCallback(\n    async (\n      clip: ClipInput,\n      options?: Omit<RenderOptions, 'onProgress' | 'signal'>\n    ): Promise<Blob | null> => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      }\n\n      const controller = new AbortController();\n      abortRef.current = controller;\n\n      setState({ progress: 0, isRendering: true, error: null, blob: null, url: null });\n\n      try {\n        const blob = await frameWorker.render(clip, {\n          ...options,\n          signal: controller.signal,\n          onProgress: (p) => {\n            setState((prev) => ({ ...prev, progress: p }));\n          },\n        });\n\n        const url = URL.createObjectURL(blob);\n        urlRef.current = url;\n        setState({ progress: 1, isRendering: false, error: null, blob, url });\n        return blob;\n      } catch (err) {\n        if (err instanceof DOMException && err.name === 'AbortError') {\n          setState((prev) => ({ ...prev, isRendering: false, error: null }));\n          return null;\n        }\n        const error = err instanceof Error ? err : new Error(String(err));\n        setState((prev) => ({ ...prev, isRendering: false, error }));\n        return null;\n      }\n    },\n    [frameWorker]\n  );\n\n  return { ...state, render, cancel, reset };\n}\n\n// ── useRender — single-video multi-segment API ────────────────────────────────\n\nexport interface UseRenderResult {\n  start: () => void;\n  cancel: () => void;\n  progress: RichProgress | null;\n  metrics: RenderMetrics | null;\n  url: string | null;\n  error: Error | null;\n  isRendering: boolean;\n}\n\nexport function useRender(\n  videoUrl: string | null,\n  segments: Segment[],\n  options?: Omit<SingleVideoRenderOptions, 'onProgress' | 'onComplete' | 'signal'>\n): UseRenderResult {\n  const [isRendering, setIsRendering] = useState(false);\n  const [progress, setProgress] = useState<RichProgress | null>(null);\n  const [metrics, setMetrics] = useState<RenderMetrics | null>(null);\n  const [url, setUrl] = useState<string | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n\n  const abortRef = useRef<AbortController | null>(null);\n  const urlRef = useRef<string | null>(null);\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const start = useCallback(() => {\n    if (!videoUrl || isRendering) return;\n\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    setIsRendering(true);\n    setProgress(null);\n    setMetrics(null);\n    setUrl(null);\n    setError(null);\n\n    renderSegments(videoUrl, segments, {\n      ...options,\n      signal: controller.signal,\n      onProgress: (p) => setProgress(p),\n      onComplete: (m) => setMetrics(m),\n    }).then(({ blob }) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n      setIsRendering(false);\n    }).catch((err) => {\n      if (err instanceof DOMException && err.name === 'AbortError') {\n        setIsRendering(false);\n        return;\n      }\n      setError(err instanceof Error ? err : new Error(String(err)));\n      setIsRendering(false);\n    });\n  }, [videoUrl, segments, options, isRendering]);\n\n  return { start, cancel, progress, metrics, url, error, isRendering };\n}\n","'use client';\n\nimport { useState, useCallback, useRef } from 'react';\nimport type { ClipInput, StitchOptions, RichProgress, RenderMetrics, FrameWorker } from '../types.js';\n\nexport interface UseStitchState {\n  progress: RichProgress;\n  isRendering: boolean;\n  error: Error | null;\n  blob: Blob | null;\n  url: string | null;\n  metrics: RenderMetrics | null;\n}\n\nexport interface UseStitchActions {\n  stitch: (clips: ClipInput[], options?: Omit<StitchOptions, 'onProgress' | 'onComplete' | 'signal'>) => Promise<Blob | null>;\n  cancel: () => void;\n  reset: () => void;\n}\n\nexport type UseStitchResult = UseStitchState & UseStitchActions;\n\nconst INITIAL_PROGRESS: RichProgress = { overall: 0, clips: [] };\n\nexport function useStitch(frameWorker: FrameWorker): UseStitchResult {\n  const [state, setState] = useState<UseStitchState>({\n    progress: INITIAL_PROGRESS,\n    isRendering: false,\n    error: null,\n    blob: null,\n    url: null,\n    metrics: null,\n  });\n\n  const abortRef = useRef<AbortController | null>(null);\n  const urlRef = useRef<string | null>(null);\n\n  const cancel = useCallback(() => {\n    abortRef.current?.abort();\n  }, []);\n\n  const reset = useCallback(() => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n    setState({ progress: INITIAL_PROGRESS, isRendering: false, error: null, blob: null, url: null, metrics: null });\n  }, []);\n\n  const stitch = useCallback(\n    async (\n      clips: ClipInput[],\n      options?: Omit<StitchOptions, 'onProgress' | 'onComplete' | 'signal'>\n    ): Promise<Blob | null> => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      }\n\n      const controller = new AbortController();\n      abortRef.current = controller;\n\n      setState({ progress: INITIAL_PROGRESS, isRendering: true, error: null, blob: null, url: null, metrics: null });\n\n      try {\n        const { blob, metrics } = await frameWorker.stitch(clips, {\n          ...options,\n          signal: controller.signal,\n          onProgress: (p) => {\n            setState((prev) => ({ ...prev, progress: p }));\n          },\n          onComplete: (m) => {\n            setState((prev) => ({ ...prev, metrics: m }));\n          },\n        });\n\n        const url = URL.createObjectURL(blob);\n        urlRef.current = url;\n        const doneProgress: RichProgress = {\n          overall: 1,\n          clips: clips.map((_, i) => ({ index: i, status: 'done', progress: 1 })),\n        };\n        setState((prev) => ({ ...prev, progress: doneProgress, isRendering: false, blob, url }));\n        return blob;\n      } catch (err) {\n        if (err instanceof DOMException && err.name === 'AbortError') {\n          setState((prev) => ({ ...prev, isRendering: false, error: null }));\n          return null;\n        }\n        const error = err instanceof Error ? err : new Error(String(err));\n        setState((prev) => ({ ...prev, isRendering: false, error }));\n        return null;\n      }\n    },\n    [frameWorker]\n  );\n\n  return { ...state, stitch, cancel, reset };\n}\n"]}

package/dist/worker/render-worker.js

@@ -0,0 +1,256 @@
+// src/captions.ts
+var STYLE_PRESETS = {
+  hormozi: {
+    preset: "hormozi",
+    fontFamily: 'Impact, "Arial Black", sans-serif',
+    fontSize: 64,
+    fontWeight: "900",
+    color: "#FFFFFF",
+    strokeColor: "#000000",
+    strokeWidth: 4,
+    backgroundColor: "transparent",
+    backgroundPadding: 0,
+    backgroundRadius: 0,
+    position: "bottom",
+    textAlign: "center",
+    lineHeight: 1.1,
+    maxWidth: 0.9,
+    shadow: true,
+    shadowColor: "rgba(0,0,0,0.9)",
+    shadowBlur: 6,
+    shadowOffsetX: 2,
+    shadowOffsetY: 2,
+    uppercase: true,
+    wordHighlight: true,
+    wordHighlightColor: "#FFD700",
+    wordHighlightTextColor: "#000000"
+  },
+  modern: {
+    preset: "modern",
+    fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
+    fontSize: 42,
+    fontWeight: "700",
+    color: "#FFFFFF",
+    strokeColor: "transparent",
+    strokeWidth: 0,
+    backgroundColor: "rgba(0,0,0,0.65)",
+    backgroundPadding: 12,
+    backgroundRadius: 8,
+    position: "bottom",
+    textAlign: "center",
+    lineHeight: 1.3,
+    maxWidth: 0.85,
+    shadow: false,
+    shadowColor: "transparent",
+    shadowBlur: 0,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    uppercase: false,
+    wordHighlight: false,
+    wordHighlightColor: "#3B82F6",
+    wordHighlightTextColor: "#FFFFFF"
+  },
+  minimal: {
+    preset: "minimal",
+    fontFamily: '"Helvetica Neue", Arial, sans-serif',
+    fontSize: 36,
+    fontWeight: "400",
+    color: "#FFFFFF",
+    strokeColor: "transparent",
+    strokeWidth: 0,
+    backgroundColor: "transparent",
+    backgroundPadding: 0,
+    backgroundRadius: 0,
+    position: "bottom",
+    textAlign: "center",
+    lineHeight: 1.4,
+    maxWidth: 0.8,
+    shadow: true,
+    shadowColor: "rgba(0,0,0,0.8)",
+    shadowBlur: 8,
+    shadowOffsetX: 0,
+    shadowOffsetY: 2,
+    uppercase: false,
+    wordHighlight: false,
+    wordHighlightColor: "#FFFFFF",
+    wordHighlightTextColor: "#000000"
+  },
+  bold: {
+    preset: "bold",
+    fontFamily: '"Arial Black", "Helvetica Neue", Arial, sans-serif',
+    fontSize: 56,
+    fontWeight: "900",
+    color: "#FFFF00",
+    strokeColor: "#000000",
+    strokeWidth: 5,
+    backgroundColor: "transparent",
+    backgroundPadding: 0,
+    backgroundRadius: 0,
+    position: "center",
+    textAlign: "center",
+    lineHeight: 1.2,
+    maxWidth: 0.88,
+    shadow: true,
+    shadowColor: "rgba(0,0,0,1)",
+    shadowBlur: 4,
+    shadowOffsetX: 3,
+    shadowOffsetY: 3,
+    uppercase: true,
+    wordHighlight: false,
+    wordHighlightColor: "#FF0000",
+    wordHighlightTextColor: "#FFFFFF"
+  }
+};
+function mergeStyle(base, overrides) {
+  return overrides ? { ...base, ...overrides } : base;
+}
+function getActiveCaptions(segments, currentTime) {
+  return segments.filter(
+    (seg) => currentTime >= seg.startTime && currentTime < seg.endTime
+  );
+}
+function wrapText(ctx2, text, maxWidth) {
+  const words = text.split(" ");
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const test = current ? `${current} ${word}` : word;
+    if (ctx2.measureText(test).width > maxWidth && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = test;
+    }
+  }
+  if (current) lines.push(current);
+  return lines;
+}
+function renderCaption(ctx2, segment, resolvedStyle, canvasWidth, canvasHeight) {
+  const style = resolvedStyle;
+  const text = style.uppercase ? segment.text.toUpperCase() : segment.text;
+  ctx2.save();
+  const scaledFontSize = style.fontSize / 1080 * canvasHeight;
+  ctx2.font = `${style.fontWeight} ${scaledFontSize}px ${style.fontFamily}`;
+  ctx2.textAlign = style.textAlign;
+  ctx2.textBaseline = "bottom";
+  const maxPx = style.maxWidth * canvasWidth;
+  const lines = wrapText(ctx2, text, maxPx);
+  const lineH = scaledFontSize * style.lineHeight;
+  const totalH = lines.length * lineH;
+  let baseY;
+  if (style.position === "top") {
+    baseY = scaledFontSize * 1.5;
+  } else if (style.position === "center") {
+    baseY = canvasHeight / 2 - totalH / 2 + lineH;
+  } else {
+    baseY = canvasHeight - scaledFontSize * 1.2;
+  }
+  const cx = canvasWidth / 2;
+  lines.forEach((line, i) => {
+    const y = baseY + i * lineH;
+    if (style.backgroundColor && style.backgroundColor !== "transparent") {
+      const metrics = ctx2.measureText(line);
+      const bw = metrics.width + style.backgroundPadding * 2;
+      const bh = lineH + style.backgroundPadding;
+      const bx = cx - bw / 2;
+      const by = y - lineH;
+      ctx2.fillStyle = style.backgroundColor;
+      if (style.backgroundRadius > 0) {
+        roundRect(ctx2, bx, by, bw, bh, style.backgroundRadius);
+        ctx2.fill();
+      } else {
+        ctx2.fillRect(bx, by, bw, bh);
+      }
+    }
+    if (style.shadow) {
+      ctx2.shadowColor = style.shadowColor;
+      ctx2.shadowBlur = style.shadowBlur;
+      ctx2.shadowOffsetX = style.shadowOffsetX;
+      ctx2.shadowOffsetY = style.shadowOffsetY;
+    }
+    if (style.strokeWidth > 0 && style.strokeColor !== "transparent") {
+      ctx2.lineWidth = style.strokeWidth;
+      ctx2.strokeStyle = style.strokeColor;
+      ctx2.strokeText(line, cx, y);
+    }
+    ctx2.shadowColor = "transparent";
+    ctx2.shadowBlur = 0;
+    ctx2.fillStyle = style.color;
+    ctx2.fillText(line, cx, y);
+  });
+  ctx2.restore();
+}
+function roundRect(ctx2, x, y, w, h, r) {
+  ctx2.beginPath();
+  ctx2.moveTo(x + r, y);
+  ctx2.lineTo(x + w - r, y);
+  ctx2.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx2.lineTo(x + w, y + h - r);
+  ctx2.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx2.lineTo(x + r, y + h);
+  ctx2.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx2.lineTo(x, y + r);
+  ctx2.quadraticCurveTo(x, y, x + r, y);
+  ctx2.closePath();
+}
+
+// src/worker/render-worker.ts
+var meta = null;
+var canvas = null;
+var ctx = null;
+var collected = [];
+self.onmessage = (event) => {
+  const msg = event.data;
+  switch (msg.type) {
+    case "init": {
+      meta = msg.meta;
+      canvas = new OffscreenCanvas(meta.width, meta.height);
+      ctx = canvas.getContext("2d");
+      collected.length = 0;
+      break;
+    }
+    case "frame": {
+      if (!meta || !ctx) return;
+      const { bitmap, timestamp, index } = msg;
+      ctx.clearRect(0, 0, meta.width, meta.height);
+      ctx.drawImage(bitmap, 0, 0, meta.width, meta.height);
+      bitmap.close();
+      if (meta.captions?.segments?.length) {
+        const baseStylePreset = meta.captions.style?.preset ?? "modern";
+        const baseStyle = mergeStyle(STYLE_PRESETS[baseStylePreset], meta.captions.style);
+        const active = getActiveCaptions(meta.captions.segments, timestamp);
+        for (const seg of active) {
+          const segStyle = mergeStyle(baseStyle, seg.style);
+          renderCaption(
+            ctx,
+            seg,
+            segStyle,
+            meta.width,
+            meta.height
+          );
+        }
+      }
+      const imageData = ctx.getImageData(0, 0, meta.width, meta.height);
+      const buffer = imageData.data.buffer.slice(
+        imageData.data.byteOffset,
+        imageData.data.byteOffset + imageData.data.byteLength
+      );
+      collected.push({ buffer, timestamp, width: meta.width, height: meta.height });
+      const progress = { type: "progress", value: (index + 1) / meta.totalFrames };
+      self.postMessage(progress);
+      break;
+    }
+    case "end": {
+      const frames = collected.slice();
+      const transferables = frames.map((f) => f.buffer);
+      const done = { type: "done", frames };
+      self.postMessage(done, transferables);
+      collected.length = 0;
+      break;
+    }
+    case "abort": {
+      collected.length = 0;
+      break;
+    }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framewebworker",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Browser-native video rendering and clip export library. Trim, caption, and export MP4 Blobs in the browser — no server needed.",
   "keywords": [
     "video",