@codingfactory/mediables-vue 2.5.0 → 2.6.1

package/dist/render-page/assets/{index-ZZVWF3LA.js → index-y90zwXpc.js}

@@ -63773,7 +63773,7 @@ __publicField$1(_TwistFilter, "DEFAULT_OPTIONS", {
   angle: 4,
   offset: { x: 0, y: 0 }
 });
-let TwistFilter = _TwistFilter;
+let TwistFilter$1 = _TwistFilter;
 var fragment = "precision highp float;\nin vec2 vTextureCoord;\nout vec4 finalColor;\n\nuniform sampler2D uTexture;\nuniform float uStrength;\nuniform vec2 uCenter;\nuniform vec2 uRadii;\n\nuniform vec4 uInputSize;\n\nconst float MAX_KERNEL_SIZE = ${MAX_KERNEL_SIZE};\n\n// author: http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/\nhighp float rand(vec2 co, float seed) {\n    const highp float a = 12.9898, b = 78.233, c = 43758.5453;\n    highp float dt = dot(co + seed, vec2(a, b)), sn = mod(dt, 3.14159);\n    return fract(sin(sn) * c + seed);\n}\n\nvoid main() {\n    float minGradient = uRadii[0] * 0.3;\n    float innerRadius = (uRadii[0] + minGradient * 0.5) / uInputSize.x;\n\n    float gradient = uRadii[1] * 0.3;\n    float radius = (uRadii[1] - gradient * 0.5) / uInputSize.x;\n\n    float countLimit = MAX_KERNEL_SIZE;\n\n    vec2 dir = vec2(uCenter.xy / uInputSize.xy - vTextureCoord);\n    float dist = length(vec2(dir.x, dir.y * uInputSize.y / uInputSize.x));\n\n    float strength = uStrength;\n\n    float delta = 0.0;\n    float gap;\n    if (dist < innerRadius) {\n        delta = innerRadius - dist;\n        gap = minGradient;\n    } else if (radius >= 0.0 && dist > radius) { // radius < 0 means it's infinity\n        delta = dist - radius;\n        gap = gradient;\n    }\n\n    if (delta > 0.0) {\n        float normalCount = gap / uInputSize.x;\n        delta = (normalCount - delta) / normalCount;\n        countLimit *= delta;\n        strength *= delta;\n        if (countLimit < 1.0)\n        {\n            gl_FragColor = texture(uTexture, vTextureCoord);\n            return;\n        }\n    }\n\n    // randomize the lookup values to hide the fixed number of samples\n    float offset = rand(vTextureCoord, 0.0);\n\n    float total = 0.0;\n    vec4 color = vec4(0.0);\n\n    dir *= strength;\n\n    for (float t = 0.0; t < MAX_KERNEL_SIZE; t++) {\n        float percent = (t + offset) / MAX_KERNEL_SIZE;\n        float weight = 4.0 * (percent - percent * percent);\n        vec2 p = vTextureCoord + dir * percent;\n        vec4 sample = texture(uTexture, p);\n\n        // switch to pre-multiplied alpha to correctly blur transparent images\n        // sample.rgb *= sample.a;\n\n        color += sample * weight;\n        total += weight;\n\n        if (t > countLimit){\n            break;\n        }\n    }\n\n    color /= total;\n    // switch back from pre-multiplied alpha\n    // color.rgb /= color.a + 0.00001;\n\n    gl_FragColor = color;\n}\n";
 var source = "struct ZoomBlurUniforms {\n    uStrength:f32,\n    uCenter:vec2<f32>,\n    uRadii:vec2<f32>,\n};\n\nstruct GlobalFilterUniforms {\n  uInputSize:vec4<f32>,\n  uInputPixel:vec4<f32>,\n  uInputClamp:vec4<f32>,\n  uOutputFrame:vec4<f32>,\n  uGlobalFrame:vec4<f32>,\n  uOutputTexture:vec4<f32>,\n};\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n\n@group(0) @binding(1) var uTexture: texture_2d<f32>; \n@group(0) @binding(2) var uSampler: sampler;\n@group(1) @binding(0) var<uniform> zoomBlurUniforms : ZoomBlurUniforms;\n\n@fragment\nfn mainFragment(\n    @builtin(position) position: vec4<f32>,\n    @location(0) uv : vec2<f32>\n) -> @location(0) vec4<f32> {\n  let uStrength = zoomBlurUniforms.uStrength;\n  let uCenter = zoomBlurUniforms.uCenter;\n  let uRadii = zoomBlurUniforms.uRadii;\n\n  let minGradient: f32 = uRadii[0] * 0.3;\n  let innerRadius: f32 = (uRadii[0] + minGradient * 0.5) / gfu.uInputSize.x;\n\n  let gradient: f32 = uRadii[1] * 0.3;\n  let radius: f32 = (uRadii[1] - gradient * 0.5) / gfu.uInputSize.x;\n\n  let MAX_KERNEL_SIZE: f32 = ${MAX_KERNEL_SIZE};\n\n  var countLimit: f32 = MAX_KERNEL_SIZE;\n\n  var dir: vec2<f32> = vec2<f32>(uCenter / gfu.uInputSize.xy - uv);\n  let dist: f32 = length(vec2<f32>(dir.x, dir.y * gfu.uInputSize.y / gfu.uInputSize.x));\n\n  var strength: f32 = uStrength;\n\n  var delta: f32 = 0.0;\n  var gap: f32;\n\n  if (dist < innerRadius) {\n      delta = innerRadius - dist;\n      gap = minGradient;\n  } else if (radius >= 0.0 && dist > radius) { // radius < 0 means it's infinity\n      delta = dist - radius;\n      gap = gradient;\n  }\n\n  var returnColorOnly: bool = false;\n\n  if (delta > 0.0) {\n    let normalCount: f32 = gap / gfu.uInputSize.x;\n    delta = (normalCount - delta) / normalCount;\n    countLimit *= delta;\n    strength *= delta;\n    \n    if (countLimit < 1.0)\n    {\n      returnColorOnly = true;;\n    }\n  }\n\n  // randomize the lookup values to hide the fixed number of samples\n  let offset: f32 = rand(uv, 0.0);\n\n  var total: f32 = 0.0;\n  var color: vec4<f32> = vec4<f32>(0.);\n\n  dir *= strength;\n\n  for (var t = 0.0; t < MAX_KERNEL_SIZE; t += 1.0) {\n    let percent: f32 = (t + offset) / MAX_KERNEL_SIZE;\n    let weight: f32 = 4.0 * (percent - percent * percent);\n    let p: vec2<f32> = uv + dir * percent;\n    let sample: vec4<f32> = textureSample(uTexture, uSampler, p);\n    \n    if (t < countLimit)\n    {\n      color += sample * weight;\n      total += weight;\n    }\n  }\n\n  color /= total;\n\n  return select(color, textureSample(uTexture, uSampler, uv), returnColorOnly);\n}\n\nfn modulo(x: f32, y: f32) -> f32\n{\n  return x - y * floor(x/y);\n}\n\n// author: http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/\nfn rand(co: vec2<f32>, seed: f32) -> f32\n{\n  let a: f32 = 12.9898;\n  let b: f32 = 78.233;\n  let c: f32 = 43758.5453;\n  let dt: f32 = dot(co + seed, vec2<f32>(a, b));\n  let sn: f32 = modulo(dt, 3.14159);\n  return fract(sin(sn) * c + seed);\n}";
 var __defProp = Object.defineProperty;
@@ -63929,7 +63929,7 @@ const PixiFilters = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   SimplexNoiseFilter: SimplexNoiseFilter$1,
   TiltShiftAxisFilter,
   TiltShiftFilter: TiltShiftFilter$1,
-  TwistFilter,
+  TwistFilter: TwistFilter$1,
   ZoomBlurFilter: ZoomBlurFilter$1,
   angleFromCssOrientation,
   angleFromDirectionalValue,
@@ -64472,60 +64472,30 @@ registerFilter({
     }
   ]
 });
+const clamp01 = (n2) => Math.max(0, Math.min(1, n2));
 registerFilter({
   id: "alpha",
   name: "Alpha",
   category: "adjust",
-  description: "Adjust the transparency of the image",
-  // Create an instance of the ColorMatrixFilter with alpha adjustment
+  description: "Adjust the opacity of the image",
   createFilter: (params) => {
-    try {
-      console.log("Creating Alpha filter with params:", params);
-      const alpha = params.alpha !== void 0 ? params.alpha : 1;
-      const filter = new ColorMatrixFilter$3();
-      filter.alpha = alpha;
-      filter._customParams = {
-        alpha
-      };
-      filter.updateUIParam = function(key, value) {
-        try {
-          console.log(`Alpha filter updateUIParam called: ${key} = ${value}`);
-          const customParams = this._customParams || {};
-          this._customParams = customParams;
-          if (key === "alpha") {
-            const numValue = Number(value);
-            this.alpha = numValue;
-            customParams.alpha = numValue;
-            console.log(`Updated alpha to ${numValue}`);
-          } else {
-            if (key in this) {
-              this[key] = value;
-              console.log(`Updated ${key} to ${value}`);
-            } else {
-              console.warn(`Unknown parameter for Alpha filter: ${key}`);
-            }
-          }
-        } catch (error) {
-          console.error(`Error updating Alpha filter parameter ${key}:`, error);
-        }
-      };
-      console.log("Alpha filter created successfully");
-      return filter;
-    } catch (error) {
-      console.error("Failed to create Alpha filter:", error);
-      return null;
-    }
+    const alpha = clamp01(params.alpha !== void 0 ? Number(params.alpha) : 1);
+    const filter = new AlphaFilter(alpha);
+    filter.updateUIParam = function(key, value) {
+      if (key === "alpha") {
+        this.alpha = clamp01(Number(value));
+      }
+    };
+    return filter;
   },
-  // Default parameter values
   defaultParams: {
     alpha: 1
   },
-  // UI controls for the filter
   controls: [
     {
       id: "alpha",
       type: "slider",
-      label: "Transparency",
+      label: "Opacity",
       property: "alpha",
       min: 0,
       max: 1,
@@ -64611,57 +64581,80 @@ registerFilter({
     }
   ]
 });
+function applyColorMatrixParams(filter, params) {
+  if (typeof filter.reset === "function") {
+    filter.reset();
+  }
+  if (params.brightness !== 1) {
+    filter.brightness(params.brightness, false);
+  }
+  if (params.contrast !== 1) {
+    filter.contrast(params.contrast, false);
+  }
+  if (params.saturation !== 1) {
+    filter.saturate(params.saturation, false);
+  }
+  if (params.hue !== 0) {
+    filter.hue(params.hue, false);
+  }
+  if (params.sepia) {
+    filter.sepia(false);
+  }
+  if (params.negative) {
+    filter.negative(false);
+  }
+}
+function normalizeParams(raw) {
+  return {
+    brightness: Number(raw.brightness ?? 1),
+    contrast: Number(raw.contrast ?? 1),
+    saturation: Number(raw.saturation ?? 1),
+    hue: Number(raw.hue ?? 0),
+    sepia: Boolean(raw.sepia),
+    negative: Boolean(raw.negative)
+  };
+}
 registerFilter({
   id: "color-matrix",
   name: "Color Matrix",
   category: "advanced",
-  description: "Advanced color adjustments including sepia, hue rotation, and more",
-  // Create an instance of the ColorMatrixFilter with the provided parameters
+  description: "Advanced color adjustments including sepia, hue rotation, and negative",
   createFilter: (params) => {
     const MatrixFilterClass = ColorMatrixFilter$3;
-    if (!MatrixFilterClass) {
-      console.error("ColorMatrixFilter not available in PIXI");
-      return null;
-    }
+    if (!MatrixFilterClass) return null;
     const filter = new MatrixFilterClass();
-    try {
-      if (typeof filter.reset === "function") {
-        filter.reset();
-      }
-      if (params.brightness !== 1 && typeof filter.brightness === "function") {
-        filter.brightness(params.brightness, false);
-      }
-      if (params.contrast !== 1 && typeof filter.contrast === "function") {
-        filter.contrast(params.contrast, false);
-      }
-      if (params.saturation !== 1 && typeof filter.saturate === "function") {
-        filter.saturate(params.saturation, false);
-      }
-      if (params.hue !== 0 && typeof filter.hue === "function") {
-        filter.hue(params.hue, false);
-      }
-      if (params.sepia > 0 && typeof filter.sepia === "function") {
-        filter.sepia(params.sepia);
-      }
-      if (params.negative && typeof filter.negative === "function") {
-        filter.negative(false);
+    const normalized = normalizeParams(params);
+    filter._customParams = { ...normalized };
+    applyColorMatrixParams(filter, normalized);
+    filter.updateUIParam = function(key, value) {
+      const stored = this._customParams ?? normalizeParams({});
+      switch (key) {
+        case "brightness":
+        case "contrast":
+        case "saturation":
+        case "hue":
+          stored[key] = Number(value);
+          break;
+        case "sepia":
+        case "negative":
+          stored[key] = Boolean(value);
+          break;
+        default:
+          return;
       }
-      return filter;
-    } catch (error) {
-      console.error("Error configuring ColorMatrixFilter:", error);
-      return filter;
-    }
+      this._customParams = stored;
+      applyColorMatrixParams(this, stored);
+    };
+    return filter;
   },
-  // Default parameter values
   defaultParams: {
     brightness: 1,
     contrast: 1,
     saturation: 1,
     hue: 0,
-    sepia: 0,
+    sepia: false,
     negative: false
   },
-  // UI controls for the filter
   controls: [
     {
       id: "brightness",
@@ -64703,15 +64696,14 @@ registerFilter({
       step: 1,
       default: 0
     },
+    // Sepia is a toggle in phase 1 — PIXI v8's ColorMatrixFilter.sepia()
+    // doesn't accept a smooth intensity, so a slider here would be misleading.
     {
       id: "sepia",
-      type: "slider",
+      type: "toggle",
       label: "Sepia",
       property: "sepia",
-      min: 0,
-      max: 1,
-      step: 0.01,
-      default: 0
+      default: false
     },
     {
       id: "negative",
@@ -64829,10 +64821,11 @@ registerFilter({
    */
   createFilter: (params) => {
     try {
-      console.log("Creating Drop Shadow filter with params:", params);
       const color = params.color ? params.color.replace("#", "0x") : "0x000000";
       const distance = params.distance !== void 0 ? params.distance : 5;
       const angle = params.angle !== void 0 ? params.angle : 90;
+      const blur = params.blur !== void 0 ? params.blur : 2;
+      const quality = params.quality !== void 0 ? params.quality : 3;
       const offset = {
         x: distance * Math.cos(angle * Math.PI / 180),
         y: distance * Math.sin(angle * Math.PI / 180)
@@ -64841,14 +64834,21 @@ registerFilter({
         offset,
         color: parseInt(color, 16),
         alpha: params.alpha !== void 0 ? params.alpha : 0.5,
-        blur: params.blur !== void 0 ? params.blur : 2,
-        quality: params.quality !== void 0 ? params.quality : 3,
+        blur,
+        quality,
         shadowOnly: params.shadowOnly !== void 0 ? params.shadowOnly : false,
         pixelSize: {
           x: params.pixelSizeX !== void 0 ? params.pixelSizeX : 1,
           y: params.pixelSizeY !== void 0 ? params.pixelSizeY : 1
         }
       });
+      const computePadding = (b2, q, offX, offY) => {
+        const kernel = b2 * q * 2;
+        const mag = Math.sqrt(offX * offX + offY * offY);
+        return Math.ceil(kernel + mag + 2);
+      };
+      filter._exportPadding = computePadding(blur, quality, offset.x, offset.y);
+      filter.padding = Math.max(filter.padding ?? 0, filter._exportPadding);
       filter._customParams = {
         ...params,
         // Also store the calculated offset for use in updateUIParam
@@ -64856,6 +64856,50 @@ registerFilter({
         _distance: distance,
         _angle: angle
       };
+      const createScaledForExport = (rawParams, scale) => {
+        const dist = Number(rawParams._distance ?? rawParams.distance ?? 5) * scale;
+        const ang = Number(rawParams._angle ?? rawParams.angle ?? 90);
+        const blr = Number(rawParams.blur ?? 2) * scale;
+        const qual = Number(rawParams.quality ?? 3);
+        const off = {
+          x: dist * Math.cos(ang * Math.PI / 180),
+          y: dist * Math.sin(ang * Math.PI / 180)
+        };
+        const colorStr = rawParams.color ? String(rawParams.color).replace("#", "0x") : "0x000000";
+        const next = new DropShadowFilter({
+          offset: off,
+          color: parseInt(colorStr, 16),
+          alpha: rawParams.alpha !== void 0 ? Number(rawParams.alpha) : 0.5,
+          blur: blr,
+          quality: qual,
+          shadowOnly: rawParams.shadowOnly !== void 0 ? Boolean(rawParams.shadowOnly) : false,
+          pixelSize: {
+            x: rawParams.pixelSizeX !== void 0 ? Number(rawParams.pixelSizeX) : 1,
+            y: rawParams.pixelSizeY !== void 0 ? Number(rawParams.pixelSizeY) : 1
+          }
+        });
+        const padding = computePadding(blr, qual, off.x, off.y);
+        next._exportPadding = padding;
+        next.padding = Math.max(next.padding ?? 0, padding);
+        return next;
+      };
+      filter.createExportFilter = function(options = {}) {
+        const scale = Number.isFinite(options.previewToNativeScale) ? Math.max(1, Number(options.previewToNativeScale)) : 1;
+        const stored = this._customParams || params;
+        return createScaledForExport(stored, scale);
+      };
+      filter.getExportPadding = function() {
+        return Number(this._exportPadding || this.padding || 0);
+      };
+      const refreshPadding = (f2) => {
+        var _a;
+        const off = ((_a = f2._customParams) == null ? void 0 : _a._offset) ?? { x: 0, y: 0 };
+        const b2 = Number(f2.blur ?? 0);
+        const q = Number(f2.quality ?? 1);
+        const p2 = computePadding(b2, q, off.x, off.y);
+        f2._exportPadding = p2;
+        f2.padding = Math.max(f2.padding ?? 0, p2);
+      };
       filter.updateUIParam = function(key, value) {
         try {
           const customParams = this._customParams || {};
@@ -64864,43 +64908,39 @@ registerFilter({
           switch (key) {
             case "color":
               if (typeof value === "string") {
-                const colorNum = parseInt(value.replace("#", "0x"), 16);
-                this.color = colorNum;
-                console.log(`Updated color to ${value} (${colorNum})`);
+                this.color = parseInt(value.replace("#", "0x"), 16);
               }
               break;
             case "alpha":
               this.alpha = Number(value);
-              console.log(`Updated alpha to ${value}`);
               break;
             case "blur":
               this.blur = Number(value);
-              console.log(`Updated blur to ${value}`);
+              refreshPadding(this);
               break;
             case "quality":
               this.quality = Number(value);
-              console.log(`Updated quality to ${value}`);
+              refreshPadding(this);
               break;
             case "shadowOnly":
               this.shadowOnly = Boolean(value);
-              console.log(`Updated shadowOnly to ${value}`);
               break;
             case "pixelSizeX":
               this.pixelSizeX = Number(value);
               customParams.pixelSizeX = Number(value);
-              console.log(`Updated pixelSizeX to ${value}`);
               break;
             case "pixelSizeY":
               this.pixelSizeY = Number(value);
               customParams.pixelSizeY = Number(value);
-              console.log(`Updated pixelSizeY to ${value}`);
               break;
             case "distance":
-            case "angle":
+            case "angle": {
               if (key === "distance") {
                 customParams._distance = Number(value);
+                customParams.distance = Number(value);
               } else {
                 customParams._angle = Number(value);
+                customParams.angle = Number(value);
               }
               const newOffset = {
                 x: customParams._distance * Math.cos(customParams._angle * Math.PI / 180),
@@ -64908,27 +64948,23 @@ registerFilter({
               };
               customParams._offset = newOffset;
               this.offset = newOffset;
-              console.log(`Updated offset to (${newOffset.x}, ${newOffset.y}) from ${key}=${value}`);
+              refreshPadding(this);
               break;
+            }
             default:
               if (key in this) {
                 this[key] = value;
-                console.log(`Updated ${key} to ${value}`);
-              } else {
-                console.warn(`Attempted to update unknown property ${key}`);
               }
               break;
           }
           return true;
-        } catch (error) {
-          console.error(`Failed to update parameter ${key} using updateUIParam:`, error);
+        } catch {
           if (this._customParams) {
             this._customParams[key] = value;
           }
           return false;
         }
       };
-      console.log("Drop Shadow filter created successfully");
       return filter;
     } catch (error) {
       console.error("Failed to create Drop Shadow filter:", error);
@@ -65955,261 +65991,200 @@ registerFilter({
   ]
 });
 const { ColorGradientFilter } = PixiFilters;
+function hexToInt(hex) {
+  return parseInt(hex.replace("#", "0x"), 16);
+}
+function intToHex(num) {
+  return "#" + num.toString(16).padStart(6, "0");
+}
+function normalizeStopForFilter(stop) {
+  return {
+    offset: Number(stop.offset),
+    color: typeof stop.color === "string" ? hexToInt(stop.color) : Number(stop.color),
+    alpha: Number(stop.alpha)
+  };
+}
+function hexStopFromFilter(stop) {
+  return {
+    offset: stop.offset,
+    color: typeof stop.color === "number" ? intToHex(stop.color) : stop.color,
+    alpha: stop.alpha
+  };
+}
 registerFilter({
   id: "color-gradient",
   name: "Color Gradient",
   category: "color",
   description: "Applies a linear, radial or conic color gradient over the image with multiple color stops",
-  /**
-   * Create an instance of the ColorGradientFilter with the provided parameters
-   * This implementation supports unlimited color stops like the PixiJS example app
-   */
   createFilter: (params) => {
-    try {
-      console.log("Creating ColorGradientFilter with params:", params);
-      let stops = [];
-      stops = (params.colorStops || [
-        { offset: 0, color: "#ff0000", alpha: 1 },
-        { offset: 1, color: "#0000ff", alpha: 1 }
-      ]).map((stop) => ({
-        offset: stop.offset,
-        color: typeof stop.color === "string" ? parseInt(stop.color.replace("#", "0x")) : stop.color,
-        alpha: stop.alpha
-      }));
-      if (stops.length < 2) {
-        console.warn("ColorGradientFilter requires at least 2 stops, adding default stops");
-        stops = [
-          { offset: 0, color: 16711680, alpha: 1 },
-          { offset: 1, color: 255, alpha: 1 }
-        ];
-      }
-      stops.sort((a2, b2) => a2.offset - b2.offset);
-      const filter = new ColorGradientFilter({
-        type: params.gradientType,
-        // 0: linear, 1: radial, 2: conic
-        stops,
-        angle: params.angle,
-        alpha: params.alpha,
-        maxColors: params.maxColors || 0,
-        replace: params.replace
-      });
-      filter._customParams = { ...params };
-      filter.getColorStopsForUI = function() {
-        console.log("FILTER getColorStopsForUI - Called", {
-          hasStops: !!this.stops,
-          stopsLength: this.stops ? this.stops.length : 0,
-          firstStop: this.stops && this.stops.length > 0 ? this.stops[0] : null
-        });
-        if (!this.stops || !Array.isArray(this.stops)) {
-          console.error("FILTER getColorStopsForUI - No stops array found on filter instance!");
-          return [];
-        }
-        const result = this.stops.map((stop) => ({
-          offset: stop.offset,
-          color: typeof stop.color === "number" ? "#" + stop.color.toString(16).padStart(6, "0") : stop.color,
-          alpha: stop.alpha
-        }));
-        console.log("FILTER getColorStopsForUI - Returning formatted stops:", result);
-        return result;
+    const incomingStops = params.colorStops || [
+      { offset: 0, color: "#ff0000", alpha: 1 },
+      { offset: 1, color: "#0000ff", alpha: 1 }
+    ];
+    let stops = incomingStops.map(normalizeStopForFilter);
+    if (stops.length < 2) {
+      stops = [
+        { offset: 0, color: 16711680, alpha: 1 },
+        { offset: 1, color: 255, alpha: 1 }
+      ];
+    }
+    stops.sort((a2, b2) => a2.offset - b2.offset);
+    const filter = new ColorGradientFilter({
+      type: params.gradientType,
+      stops,
+      angle: params.angle,
+      alpha: params.alpha,
+      maxColors: params.maxColors || 0,
+      replace: params.replace
+    });
+    filter._customParams = {
+      cssGradient: params.cssGradient || ""
+    };
+    filter.getSerializableParams = function() {
+      var _a;
+      const stopsHex = Array.isArray(this.stops) ? this.stops.map(hexStopFromFilter) : [];
+      return {
+        gradientType: this.type,
+        colorStops: stopsHex,
+        angle: this.angle,
+        alpha: this.alpha,
+        maxColors: this.maxColors,
+        replace: this.replace,
+        cssGradient: ((_a = this._customParams) == null ? void 0 : _a.cssGradient) ?? ""
       };
-      filter.getDynamicControls = function() {
-        console.log("FILTER getDynamicControls - Called on filter instance", this);
-        const colorStops = this.getColorStopsForUI();
-        console.log("FILTER getDynamicControls - Retrieved colorStops:", colorStops);
-        const controls = [];
-        colorStops.forEach((stop, index) => {
-          console.log(`FILTER getDynamicControls - Creating controls for stop ${index}:`, stop);
-          controls.push({
-            id: `colorStop-${index}-color`,
-            type: "color",
-            label: `Stop ${index + 1} Color`,
-            property: `colorStops[${index}].color`,
-            default: stop.color
-          });
-          controls.push({
-            id: `colorStop-${index}-offset`,
-            type: "slider",
-            label: `Stop ${index + 1} Position`,
-            property: `colorStops[${index}].offset`,
-            min: 0,
-            max: 1,
-            step: 0.01,
-            default: stop.offset
-          });
-          controls.push({
-            id: `colorStop-${index}-alpha`,
-            type: "slider",
-            label: `Stop ${index + 1} Alpha`,
-            property: `colorStops[${index}].alpha`,
-            min: 0,
-            max: 1,
-            step: 0.01,
-            default: stop.alpha
-          });
+    };
+    filter.getColorStopsForUI = function() {
+      if (!Array.isArray(this.stops)) return [];
+      return this.stops.map(hexStopFromFilter);
+    };
+    filter.getDynamicControls = function() {
+      const colorStops = this.getColorStopsForUI();
+      const controls = [];
+      colorStops.forEach((stop, index) => {
+        controls.push({
+          id: `colorStop-${index}-color`,
+          type: "color",
+          label: `Stop ${index + 1} Color`,
+          property: `colorStops[${index}].color`,
+          default: stop.color
         });
-        console.log("FILTER getDynamicControls - Returning controls array:", controls.length, "items");
-        return controls;
-      };
-      filter.handleButtonAction = function(action) {
-        console.log(`Handling button action: ${action}`);
-        if (action === "addColorStop" || action === "removeColorStop") {
-          this.updateUIParam(action, true);
-        }
-      };
-      filter.updateUIParam = function(key, value) {
-        const customParams = this._customParams || {};
-        this._customParams = customParams;
-        customParams[key] = value;
-        switch (key) {
-          case "gradientType":
-            this.type = value;
-            break;
-          case "angle":
-          case "alpha":
-          case "maxColors":
-          case "replace":
-            if (key in this) {
-              this[key] = value;
-            }
-            break;
-          case "addColorStop":
-            console.log("Add color stop command received");
-            const currentStopsForAdd = [...this.stops];
-            const getRandomColor = () => {
-              const r2 = Math.floor(Math.random() * 255);
-              const g2 = Math.floor(Math.random() * 255);
-              const b2 = Math.floor(Math.random() * 255);
-              return r2 << 16 | g2 << 8 | b2;
-            };
-            const randomColor = getRandomColor();
-            const newColorStop = {
-              offset: 1,
-              // Will be adjusted later
-              alpha: 1,
-              color: randomColor
-            };
-            if (currentStopsForAdd.length > 0) {
-              const scaleFactor = 0.8;
-              for (let i2 = 0; i2 < currentStopsForAdd.length; i2++) {
-                currentStopsForAdd[i2].offset *= scaleFactor;
-              }
-              newColorStop.offset = 1;
-            }
-            currentStopsForAdd.push(newColorStop);
-            this.stops = currentStopsForAdd;
-            customParams.colorStops = this.stops.map((stop) => ({
-              offset: stop.offset,
-              color: typeof stop.color === "number" ? "#" + stop.color.toString(16).padStart(6, "0") : stop.color,
-              alpha: stop.alpha
-            }));
-            console.log("Added new color stop, total stops:", this.stops.length, "Updated colorStops:", customParams.colorStops);
-            break;
-          case "removeColorStop":
-            console.log("Remove color stop command received");
-            const currentStopsForRemove = [...this.stops];
-            if (currentStopsForRemove.length > 2) {
-              currentStopsForRemove.pop();
-              this.stops = currentStopsForRemove;
-              customParams.colorStops = this.stops.map((stop) => ({
-                offset: stop.offset,
-                color: typeof stop.color === "number" ? "#" + stop.color.toString(16).padStart(6, "0") : stop.color,
-                alpha: stop.alpha
-              }));
-              console.log("Removed last color stop, remaining stops:", this.stops.length, "Updated colorStops:", customParams.colorStops);
-            } else {
-              console.warn("Cannot remove stop - minimum of 2 stops required");
-            }
-            break;
-          case "cssGradient":
-            if (value && typeof value === "string" && value.trim() !== "") {
-              try {
-                const tempFilter = new ColorGradientFilter({ css: value });
-                this.type = tempFilter.type;
-                this.angle = tempFilter.angle;
-                this.stops = [...tempFilter.stops];
-                customParams.colorStops = this.stops.map((stop) => ({
-                  offset: stop.offset,
-                  color: typeof stop.color === "number" ? "#" + stop.color.toString(16).padStart(6, "0") : stop.color,
-                  alpha: stop.alpha
-                }));
-                console.log("Applied CSS gradient, new stops:", this.stops.length, "Updated colorStops:", customParams.colorStops);
-              } catch (error) {
-                console.error("Failed to parse CSS gradient:", error);
-              }
-            }
-            break;
-          case "colorStops":
-            if (Array.isArray(value)) {
-              const processedStops = value.map((stop) => ({
-                offset: stop.offset,
-                color: typeof stop.color === "string" ? parseInt(stop.color.replace("#", "0x")) : stop.color,
-                alpha: stop.alpha
-              }));
-              processedStops.sort((a2, b2) => a2.offset - b2.offset);
-              this.stops = processedStops;
+        controls.push({
+          id: `colorStop-${index}-offset`,
+          type: "slider",
+          label: `Stop ${index + 1} Position`,
+          property: `colorStops[${index}].offset`,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          default: stop.offset
+        });
+        controls.push({
+          id: `colorStop-${index}-alpha`,
+          type: "slider",
+          label: `Stop ${index + 1} Alpha`,
+          property: `colorStops[${index}].alpha`,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          default: stop.alpha
+        });
+      });
+      return controls;
+    };
+    filter.handleButtonAction = function(action) {
+      if (action === "addColorStop" || action === "removeColorStop") {
+        this.updateUIParam(action, true);
+      }
+    };
+    filter.updateUIParam = function(key, value) {
+      const customParams = this._customParams ?? {};
+      this._customParams = customParams;
+      switch (key) {
+        case "gradientType":
+          this.type = Number(value);
+          return;
+        case "angle":
+        case "alpha":
+        case "maxColors":
+          this[key] = Number(value);
+          return;
+        case "replace":
+          this.replace = Boolean(value);
+          return;
+        case "addColorStop": {
+          const current = Array.isArray(this.stops) ? [...this.stops] : [];
+          const randomColor = Math.floor(Math.random() * 255) << 16 | Math.floor(Math.random() * 255) << 8 | Math.floor(Math.random() * 255);
+          if (current.length > 0) {
+            const scale = 0.8;
+            for (const stop of current) {
+              stop.offset *= scale;
             }
-            break;
-          default:
-            if (/colorStops\[\d+\]\..*/.test(key)) {
-              const match = key.match(/colorStops\[(\d+)\]\.(.*)/);
-              if (match) {
-                const [_, indexStr, prop] = match;
-                const index = parseInt(indexStr);
-                const updatedStops = [...this.stops];
-                if (index >= 0 && index < updatedStops.length) {
-                  if (prop === "color" && typeof value === "string") {
-                    updatedStops[index].color = parseInt(value.replace("#", "0x"));
-                    console.log(`Converting color ${value} to ${updatedStops[index].color}`);
-                  } else if (prop === "offset" || prop === "alpha") {
-                    updatedStops[index][prop] = value;
-                  }
-                  this.stops = updatedStops;
-                  this.stops.sort((a2, b2) => a2.offset - b2.offset);
-                  customParams.colorStops = this.getColorStopsForUI();
-                  console.log(`Updated color stop ${index}.${prop} to ${value}`);
-                  console.log("New stops array:", this.stops);
-                  console.log("New colorStops for UI:", customParams.colorStops);
-                  return true;
-                } else {
-                  console.warn(`Color stop index out of range: ${index}, stops length: ${updatedStops.length}`);
-                }
-              }
-            } else if (key in this) {
-              this[key] = value;
+          }
+          current.push({ offset: 1, color: randomColor, alpha: 1 });
+          current.sort((a2, b2) => a2.offset - b2.offset);
+          this.stops = current;
+          return;
+        }
+        case "removeColorStop": {
+          const current = Array.isArray(this.stops) ? [...this.stops] : [];
+          if (current.length > 2) {
+            current.pop();
+            this.stops = current;
+          }
+          return;
+        }
+        case "cssGradient": {
+          const str = typeof value === "string" ? value.trim() : "";
+          customParams.cssGradient = str;
+          if (!str) return;
+          try {
+            const parsed = new ColorGradientFilter({ css: str });
+            this.type = parsed.type;
+            this.angle = parsed.angle;
+            this.stops = [...parsed.stops];
+          } catch {
+          }
+          return;
+        }
+        case "colorStops": {
+          if (!Array.isArray(value)) return;
+          const normalized = value.map(normalizeStopForFilter);
+          normalized.sort((a2, b2) => a2.offset - b2.offset);
+          this.stops = normalized;
+          return;
+        }
+        default: {
+          const dynamicMatch = /^colorStops\[(\d+)\]\.(offset|color|alpha)$/.exec(key);
+          if (dynamicMatch) {
+            const [, indexStr, prop] = dynamicMatch;
+            const index = Number(indexStr);
+            const stops2 = Array.isArray(this.stops) ? [...this.stops] : [];
+            if (index < 0 || index >= stops2.length) return;
+            if (prop === "color") {
+              stops2[index].color = typeof value === "string" ? hexToInt(value) : Number(value);
+            } else if (prop === "offset" || prop === "alpha") {
+              stops2[index][prop] = Number(value);
             }
-            break;
+            this.stops = stops2;
+          }
         }
-      };
-      console.log("Enhanced ColorGradientFilter created successfully");
-      return filter;
-    } catch (error) {
-      console.error("Failed to create ColorGradientFilter:", error);
-      return null;
-    }
+      }
+    };
+    return filter;
   },
-  // Default parameter values - matching the example app
   defaultParams: {
     gradientType: 0,
-    // 0: linear, 1: radial, 2: conic
     colorStops: [
       { offset: 0, color: "#ff0000", alpha: 1 },
       { offset: 1, color: "#0000ff", alpha: 1 }
     ],
-    // Controls for adding/removing stops
-    addColorStop: false,
-    // Button trigger for adding a color stop
-    removeColorStop: false,
-    // Button trigger for removing a color stop
     cssGradient: "",
-    // CSS gradient string input
     angle: 90,
     alpha: 0.75,
     maxColors: 0,
     replace: false
   },
-  // UI controls for the filter
   controls: [
-    // Basic gradient controls
     {
       id: "gradientType",
       type: "select",
@@ -66259,7 +66234,6 @@ registerFilter({
       property: "replace",
       default: false
     },
-    // Advanced color stop management - simpler approach
     {
       id: "addColorStop",
       type: "button",
@@ -66278,7 +66252,7 @@ registerFilter({
       label: "CSS Gradient",
       property: "cssGradient",
       default: "",
-      tooltip: 'Enter a CSS gradient like "linear-gradient(to right, red, blue)"'
+      placeholder: "e.g. linear-gradient(to right, red, blue)"
     }
   ]
 });
@@ -67549,29 +67523,37 @@ registerFilter({
   ]
 });
 const { BulgePinchFilter } = PixiFilters;
+const computeBulgePadding = (radius) => {
+  const r2 = Math.max(0, Number(radius) || 0);
+  return Math.ceil(r2 + 2);
+};
 registerFilter({
   id: "bulge-pinch",
-  // ID must match what the application expects
   name: "Bulge/Pinch",
   category: "distortion",
   description: "Creates a bulge or pinch effect in a circular area",
-  // Create an instance of the BulgePinchFilter with the provided parameters
   createFilter: (params) => {
     try {
-      console.log("Creating BulgePinchFilter with params:", params);
       const centerX = params.centerX ?? 0.5;
       const centerY = params.centerY ?? 0.5;
       const radius = params.radius ?? 100;
       const strength = params.strength ?? 1;
       const filter = new BulgePinchFilter({
-        center: {
-          x: centerX,
-          y: centerY
-        },
+        center: { x: centerX, y: centerY },
         radius,
         strength
       });
+      const padding = computeBulgePadding(radius);
+      filter.padding = Math.max(filter.padding ?? 0, padding);
+      filter._exportPadding = padding;
       filter._customParams = { ...params };
+      const refreshPadding = (f2) => {
+        var _a;
+        const r2 = Number(((_a = f2._customParams) == null ? void 0 : _a.radius) ?? f2.radius ?? 0);
+        const p2 = computeBulgePadding(r2);
+        f2._exportPadding = p2;
+        f2.padding = Math.max(f2.padding ?? 0, p2);
+      };
       filter.updateUIParam = function(key, value) {
         const customParams = this._customParams || {};
         this._customParams = customParams;
@@ -67580,44 +67562,58 @@ registerFilter({
           case "centerX":
             if (!this.center) this.center = { x: 0.5, y: 0.5 };
             this.center.x = value;
-            console.log(`Updated center.x to ${value}`);
             break;
           case "centerY":
             if (!this.center) this.center = { x: 0.5, y: 0.5 };
             this.center.y = value;
-            console.log(`Updated center.y to ${value}`);
             break;
           case "radius":
+            this.radius = Number(value);
+            refreshPadding(this);
+            break;
           case "strength":
-            this[key] = value;
-            console.log(`Updated ${key} to ${value}`);
+            this.strength = Number(value);
             break;
           default:
             if (key in this) {
               this[key] = value;
-              console.log(`Updated ${key} to ${value}`);
-            } else {
-              console.warn(`Attempted to update unknown property ${key}`);
             }
             break;
         }
         return true;
       };
-      console.log("BulgePinchFilter created successfully with updateUIParam method");
+      filter.createExportFilter = function(options = {}) {
+        const scale = Number.isFinite(options.previewToNativeScale) ? Math.max(1, Number(options.previewToNativeScale)) : 1;
+        const stored = this._customParams || params;
+        const scaledRadius = Number(stored.radius ?? 100) * scale;
+        const next = new BulgePinchFilter({
+          center: {
+            x: Number(stored.centerX ?? 0.5),
+            y: Number(stored.centerY ?? 0.5)
+          },
+          radius: scaledRadius,
+          strength: Number(stored.strength ?? 1)
+        });
+        const padding2 = computeBulgePadding(scaledRadius);
+        next._exportPadding = padding2;
+        next.padding = Math.max(next.padding ?? 0, padding2);
+        return next;
+      };
+      filter.getExportPadding = function() {
+        return Number(this._exportPadding || this.padding || 0);
+      };
       return filter;
     } catch (error) {
       console.error("Failed to create BulgePinchFilter:", error);
       return null;
     }
   },
-  // Default parameter values
   defaultParams: {
     centerX: 0.5,
     centerY: 0.5,
     radius: 100,
     strength: 1
   },
-  // UI controls for the filter
   controls: [
     {
       id: "centerX",
@@ -70454,131 +70450,31 @@ registerFilter({
     }
   ]
 });
-class NormalizedTwistFilter extends Filter {
-  constructor(params) {
-    const glProgram2 = GlProgram.from({
-      vertex: `
-        attribute vec2 aPosition;
-        varying vec2 vTextureCoord;
-        uniform mat3 projectionMatrix;
-
-        void main() {
-          vTextureCoord = aPosition;
-          gl_Position = vec4((projectionMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
-        }
-      `,
-      fragment: `
-        precision mediump float;
-
-        varying vec2 vTextureCoord;
-        uniform sampler2D uSampler;
-
-        uniform vec2 uCenter;
-        uniform float uRadius;
-        uniform float uAngle;
-
-        void main() {
-          vec2 coord = vTextureCoord;
-          vec2 dir = coord - uCenter;
-          float dist = length(dir);
-
-          if (dist < uRadius) {
-            float percent = (uRadius - dist) / uRadius;
-            float theta = percent * percent * uAngle;
-            float s = sin(theta);
-            float c = cos(theta);
-
-            dir = vec2(
-              dir.x * c - dir.y * s,
-              dir.x * s + dir.y * c
-            );
-
-            coord = dir + uCenter;
-          }
-
-          gl_FragColor = texture2D(uSampler, coord);
-        }
-      `
-    });
-    super({
-      glProgram: glProgram2,
-      resources: {
-        twistUniforms: {
-          uCenter: { type: "vec2<f32>", value: [0.5, 0.5] },
-          uRadius: { type: "f32", value: 0.25 },
-          uAngle: { type: "f32", value: 4 }
-        }
-      }
-    });
-    this._centerX = 0.5;
-    this._centerY = 0.5;
-    this._radius = 0.25;
-    this._angle = 4;
-    if (params) {
-      if (params.centerX !== void 0) this._centerX = params.centerX;
-      if (params.centerY !== void 0) this._centerY = params.centerY;
-      if (params.radius !== void 0) this._radius = params.radius;
-      if (params.angle !== void 0) this._angle = params.angle;
-    }
-    this._updateUniforms();
-  }
-  _updateUniforms() {
-    if (this.uniforms) {
-      this.uniforms.uCenter = [this._centerX, this._centerY];
-      this.uniforms.uRadius = this._radius;
-      this.uniforms.uAngle = this._angle;
-    }
-  }
-  get centerX() {
-    return this._centerX;
-  }
-  set centerX(value) {
-    this._centerX = value;
-    this._updateUniforms();
-  }
-  get centerY() {
-    return this._centerY;
-  }
-  set centerY(value) {
-    this._centerY = value;
-    this._updateUniforms();
-  }
-  get radius() {
-    return this._radius;
-  }
-  set radius(value) {
-    this._radius = value;
-    this._updateUniforms();
-  }
-  get angle() {
-    return this._angle;
-  }
-  set angle(value) {
-    this._angle = value;
-    this._updateUniforms();
-  }
-  /**
-   * Handle UI parameter updates
-   */
-  updateUIParam(key, value) {
-    switch (key) {
-      case "centerX":
-        this.centerX = value;
-        break;
-      case "centerY":
-        this.centerY = value;
-        break;
-      case "radius":
-        this.radius = value;
-        break;
-      case "angle":
-        this.angle = value;
-        break;
-      default:
-        console.warn(`Unknown parameter '${key}' for TwistFilter`);
-    }
-  }
-}
+const { TwistFilter } = PixiFilters;
+const computeTwistPadding = (radiusPx) => {
+  return Math.ceil(Math.max(0, Number(radiusPx) || 0) + 2);
+};
+const buildTwistFilter = (raw, previewToNativeScale = 1) => {
+  const width = Math.max(1, Number(raw._sourceWidth ?? 0));
+  const height = Math.max(1, Number(raw._sourceHeight ?? 0));
+  const minEdge = Math.min(width, height);
+  const centerX = Number(raw.centerX ?? 0.5);
+  const centerY = Number(raw.centerY ?? 0.5);
+  const normalizedRadius = Number(raw.radius ?? 0.25);
+  const angle = Number(raw.angle ?? 4);
+  const offsetX = centerX * width * previewToNativeScale;
+  const offsetY = centerY * height * previewToNativeScale;
+  const radiusPx = normalizedRadius * minEdge * previewToNativeScale;
+  const filter = new TwistFilter({
+    offset: { x: offsetX, y: offsetY },
+    radius: radiusPx,
+    angle
+  });
+  const padding = computeTwistPadding(radiusPx);
+  filter.padding = Math.max(filter.padding ?? 0, padding);
+  filter._exportPadding = padding;
+  return filter;
+};
 registerFilter({
   id: "twist",
   name: "Twist",
@@ -70586,33 +70482,59 @@ registerFilter({
   description: "Creates a twisting distortion effect around a central point",
   createFilter: (params) => {
     try {
-      console.log("Creating TwistFilter with params:", params);
-      const filter = new NormalizedTwistFilter({
+      const raw = {
         centerX: params.centerX ?? 0.5,
         centerY: params.centerY ?? 0.5,
         radius: params.radius ?? 0.25,
-        angle: params.angle ?? 4
-      });
-      filter._customParams = { ...params };
-      console.log("TwistFilter created successfully");
+        angle: params.angle ?? 4,
+        _sourceWidth: params._sourceWidth,
+        _sourceHeight: params._sourceHeight
+      };
+      const filter = buildTwistFilter(raw, 1);
+      filter._customParams = { ...raw };
+      filter.updateUIParam = function(key, value) {
+        const customParams = this._customParams || {};
+        this._customParams = customParams;
+        customParams[key] = value;
+        const width = Math.max(1, Number(customParams._sourceWidth ?? 0));
+        const height = Math.max(1, Number(customParams._sourceHeight ?? 0));
+        const minEdge = Math.min(width, height);
+        const centerX = Number(customParams.centerX ?? 0.5);
+        const centerY = Number(customParams.centerY ?? 0.5);
+        const normalizedRadius = Number(customParams.radius ?? 0.25);
+        const angle = Number(customParams.angle ?? 4);
+        if (this.offset) {
+          this.offset.x = centerX * width;
+          this.offset.y = centerY * height;
+        }
+        this.radius = normalizedRadius * minEdge;
+        this.angle = angle;
+        const padding = computeTwistPadding(this.radius);
+        this._exportPadding = padding;
+        this.padding = Math.max(this.padding ?? 0, padding);
+        return true;
+      };
+      filter.createExportFilter = function(options = {}) {
+        const scale = Number.isFinite(options.previewToNativeScale) ? Math.max(1, Number(options.previewToNativeScale)) : 1;
+        const stored = this._customParams || raw;
+        return buildTwistFilter(stored, scale);
+      };
+      filter.getExportPadding = function() {
+        return Number(this._exportPadding || this.padding || 0);
+      };
       return filter;
     } catch (error) {
       console.error("Failed to create TwistFilter:", error);
       return null;
     }
   },
-  // Default parameter values - all normalized (0-1) for intuitive slider use
+  // Default parameter values — normalized (0-1) for intuitive slider use.
   defaultParams: {
     centerX: 0.5,
-    // Center of image
     centerY: 0.5,
-    // Center of image
     radius: 0.25,
-    // 25% of image size
     angle: 4
-    // Twist amount in radians
   },
-  // UI controls for the filter
   controls: [
     {
       id: "angle",
@@ -70634,7 +70556,7 @@ registerFilter({
       max: 0.75,
       step: 0.01,
       default: 0.25,
-      tooltip: "Size of the twist effect (0-1, relative to image)"
+      tooltip: "Size of the twist effect (relative to image)"
     },
     {
       id: "centerX",
@@ -71008,6 +70930,124 @@ function createChunkWriteQueue() {
     }
   };
 }
+const DEFAULT_SEEK_TIMEOUT_MS = 4e3;
+const DEFAULT_SEEK_RETRY_ATTEMPTS = 3;
+const MAX_SEEK_RETRY_ATTEMPTS = 6;
+const MIN_SEEK_TIMEOUT_MS = 250;
+const MAX_SEEK_NUDGE_SECONDS = 0.25;
+const MIN_SEEK_EPSILON_SECONDS = 1e-3;
+function normalizeSeekTimeoutMs(value) {
+  if (!Number.isFinite(value) || value === void 0 || value < MIN_SEEK_TIMEOUT_MS) {
+    return DEFAULT_SEEK_TIMEOUT_MS;
+  }
+  return Math.floor(value);
+}
+function normalizeSeekRetryAttempts(value) {
+  if (!Number.isFinite(value) || value === void 0 || value < 1) {
+    return DEFAULT_SEEK_RETRY_ATTEMPTS;
+  }
+  return Math.min(MAX_SEEK_RETRY_ATTEMPTS, Math.floor(value));
+}
+function clampSeekTime(targetTime, videoDuration) {
+  const normalizedTarget = Number.isFinite(targetTime) ? Math.max(0, targetTime) : 0;
+  if (videoDuration === null || !Number.isFinite(videoDuration) || videoDuration <= 0) {
+    return normalizedTarget;
+  }
+  const maxSeekTime = Math.max(0, videoDuration - MIN_SEEK_EPSILON_SECONDS);
+  return Math.min(normalizedTarget, maxSeekTime);
+}
+function resolveSeekAttemptPlan(targetTime, { attempt, fps, videoDuration }) {
+  const normalizedAttempt = Math.max(1, Math.floor(attempt));
+  const normalizedFps = Number.isFinite(fps) && fps > 0 ? fps : 30;
+  const clampedTarget = clampSeekTime(targetTime, videoDuration);
+  if (normalizedAttempt === 1) {
+    return [clampedTarget];
+  }
+  const retryIndex = normalizedAttempt - 1;
+  const preferredDirection = retryIndex % 2 === 1 ? 1 : -1;
+  const nudgeMagnitude = Math.min(
+    Math.max(1 / normalizedFps, 0.05) * Math.ceil(retryIndex / 2),
+    MAX_SEEK_NUDGE_SECONDS
+  );
+  for (const direction of [preferredDirection, -preferredDirection]) {
+    const nudgedTarget = clampSeekTime(
+      clampedTarget + direction * nudgeMagnitude,
+      videoDuration
+    );
+    if (Math.abs(nudgedTarget - clampedTarget) < MIN_SEEK_EPSILON_SECONDS) {
+      continue;
+    }
+    return [nudgedTarget, clampedTarget];
+  }
+  return [clampedTarget];
+}
+const PROBE_TIMEOUT_MS = 5e3;
+const PROBE_SEEK_TARGET = 1e9;
+async function resolveVideoDuration(video, recipe) {
+  var _a;
+  const initial = video.duration;
+  if (Number.isFinite(initial) && initial > 0) {
+    return initial;
+  }
+  console.warn(
+    `[Render] video.duration=${initial}; attempting seek-past-end workaround`
+  );
+  const probed = await probeDurationViaSeek(video);
+  if (Number.isFinite(probed) && probed > 0) {
+    resetTime(video);
+    return probed;
+  }
+  const fallback = (_a = recipe.source) == null ? void 0 : _a.duration;
+  if (typeof fallback === "number" && Number.isFinite(fallback) && fallback > 0) {
+    console.warn(
+      `[Render] seek probe did not yield a valid duration; falling back to recipe.source.duration=${fallback}`
+    );
+    resetTime(video);
+    return fallback;
+  }
+  throw new Error(`Invalid video duration: ${video.duration}`);
+}
+function probeDurationViaSeek(video) {
+  return new Promise((resolve) => {
+    let done = false;
+    const cleanup = () => {
+      video.removeEventListener("seeked", onSeeked);
+      video.removeEventListener("durationchange", onDurationChange);
+      video.removeEventListener("error", onError);
+      window.clearTimeout(timeoutId);
+    };
+    const finish = (value) => {
+      if (done) return;
+      done = true;
+      cleanup();
+      resolve(value);
+    };
+    const onSeeked = () => finish(video.duration);
+    const onDurationChange = () => {
+      if (Number.isFinite(video.duration) && video.duration > 0) {
+        finish(video.duration);
+      }
+    };
+    const onError = () => finish(Number.NaN);
+    const timeoutId = window.setTimeout(() => finish(Number.NaN), PROBE_TIMEOUT_MS);
+    video.addEventListener("seeked", onSeeked);
+    video.addEventListener("durationchange", onDurationChange);
+    video.addEventListener("error", onError);
+    try {
+      video.currentTime = PROBE_SEEK_TARGET;
+    } catch {
+      finish(Number.NaN);
+    }
+  });
+}
+function resetTime(video) {
+  try {
+    video.currentTime = 0;
+  } catch {
+  }
+}
+const HAVE_CURRENT_DATA = 2;
+const PENDING_SEEK_DRAIN_TIMEOUT_MS = 1e3;
 function resolveFitMode(recipe) {
   var _a;
   const mode = (_a = recipe.metadata) == null ? void 0 : _a.fit_mode;
@@ -71062,47 +71102,181 @@ function toBase64(buffer) {
   }
   return btoa(binary);
 }
-async function ensureFrameDecoded(video) {
+function waitForMilliseconds(milliseconds) {
   return new Promise((resolve) => {
-    let resolved = false;
-    const rvfcId = video.requestVideoFrameCallback(() => {
-      if (!resolved) {
-        resolved = true;
-        resolve();
+    window.setTimeout(resolve, milliseconds);
+  });
+}
+function touchRenderHeartbeat(stage) {
+  window.__RENDER_HEARTBEAT__ = Date.now();
+  if (stage !== void 0) {
+    window.__RENDER_STAGE__ = stage;
+  }
+}
+async function waitForPendingSeekToSettle(video, timeoutMs) {
+  if (!video.seeking) {
+    return true;
+  }
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (result) => {
+      if (settled) {
+        return;
       }
-    });
+      settled = true;
+      window.clearTimeout(timeoutId);
+      video.removeEventListener("seeked", onSeeked);
+      video.removeEventListener("error", onError);
+      resolve(result);
+    };
+    const onSeeked = () => finish(true);
+    const onError = () => finish(false);
+    const timeoutId = window.setTimeout(() => finish(false), timeoutMs);
+    video.addEventListener("seeked", onSeeked);
+    video.addEventListener("error", onError);
+  });
+}
+async function drawCurrentVideoFrameToCanvas(video, sourceCtx, sourceWidth, sourceHeight) {
+  if (video.readyState < HAVE_CURRENT_DATA) {
+    throw new Error(
+      `Video frame data unavailable before source copy (readyState=${video.readyState}, seeking=${video.seeking}, currentTime=${video.currentTime.toFixed(4)}, duration=${video.duration}, networkState=${video.networkState})`
+    );
+  }
+  if (typeof createImageBitmap === "function") {
+    const bitmap = await createImageBitmap(video);
+    try {
+      sourceCtx.clearRect(0, 0, sourceWidth, sourceHeight);
+      sourceCtx.drawImage(bitmap, 0, 0, sourceWidth, sourceHeight);
+    } finally {
+      bitmap.close();
+    }
+    return;
+  }
+  sourceCtx.clearRect(0, 0, sourceWidth, sourceHeight);
+  sourceCtx.drawImage(video, 0, 0, sourceWidth, sourceHeight);
+}
+async function ensureFrameDecoded(video, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let rvfcId = null;
+    const finish = (error) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      window.clearTimeout(timeoutId);
+      if (rvfcId !== null && typeof video.cancelVideoFrameCallback === "function") {
+        video.cancelVideoFrameCallback(rvfcId);
+      }
+      if (error !== void 0) {
+        reject(error);
+        return;
+      }
+      resolve();
+    };
+    const timeoutId = window.setTimeout(() => {
+      finish(new Error(`Frame decode timed out after ${timeoutMs}ms`));
+    }, timeoutMs);
+    if (typeof video.requestVideoFrameCallback === "function") {
+      rvfcId = video.requestVideoFrameCallback(() => {
+        finish();
+      });
+    }
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        if (!resolved) {
-          resolved = true;
-          video.cancelVideoFrameCallback(rvfcId);
-          resolve();
-        }
+        finish();
       });
     });
   });
 }
-function seekVideo(video, timeSec) {
+function seekVideoOnce(video, timeSec, timeoutMs) {
   return new Promise((resolve, reject) => {
-    if (Math.abs(video.currentTime - timeSec) < 1e-3) {
-      ensureFrameDecoded(video).then(resolve, resolve);
-      return;
-    }
-    const onSeeked = () => {
+    let settled = false;
+    const finish = (error) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      window.clearTimeout(timeoutId);
       video.removeEventListener("seeked", onSeeked);
       video.removeEventListener("error", onError);
-      ensureFrameDecoded(video).then(resolve, resolve);
+      if (error !== void 0) {
+        reject(error);
+        return;
+      }
+      resolve();
+    };
+    const onSeeked = () => {
+      ensureFrameDecoded(video, timeoutMs).then(() => finish()).catch((error) => {
+        const message = error instanceof Error ? error.message : String(error);
+        finish(new Error(`Frame decode failed at ${timeSec}s: ${message}`));
+      });
     };
     const onError = () => {
-      video.removeEventListener("seeked", onSeeked);
-      video.removeEventListener("error", onError);
-      reject(new Error(`Video seek failed at ${timeSec}s`));
+      finish(new Error(`Video seek failed at ${timeSec}s`));
     };
+    const timeoutId = window.setTimeout(() => {
+      finish(new Error(
+        `Video seek timed out at ${timeSec}s after ${timeoutMs}ms (readyState=${video.readyState}, seeking=${video.seeking}, currentTime=${video.currentTime.toFixed(4)}, duration=${video.duration}, networkState=${video.networkState}, paused=${video.paused}, ended=${video.ended})`
+      ));
+    }, timeoutMs);
+    if (!video.seeking && Math.abs(video.currentTime - timeSec) < 1e-3) {
+      ensureFrameDecoded(video, timeoutMs).then(() => finish()).catch((error) => {
+        const message = error instanceof Error ? error.message : String(error);
+        finish(new Error(`Frame decode failed at ${timeSec}s: ${message}`));
+      });
+      return;
+    }
     video.addEventListener("seeked", onSeeked);
     video.addEventListener("error", onError);
-    video.currentTime = timeSec;
+    try {
+      video.currentTime = timeSec;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      finish(new Error(`Unable to start video seek at ${timeSec}s: ${message}`));
+    }
   });
 }
+async function seekVideo(video, timeSec, timeoutMs, retryAttempts, fps) {
+  const normalizedTimeoutMs = normalizeSeekTimeoutMs(timeoutMs);
+  const normalizedRetryAttempts = normalizeSeekRetryAttempts(retryAttempts);
+  const normalizedDuration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : null;
+  let lastError = null;
+  for (let attempt = 1; attempt <= normalizedRetryAttempts; attempt += 1) {
+    const targets = resolveSeekAttemptPlan(timeSec, {
+      attempt,
+      fps,
+      videoDuration: normalizedDuration
+    });
+    try {
+      for (const target of targets) {
+        touchRenderHeartbeat("seeking");
+        await seekVideoOnce(video, target, normalizedTimeoutMs);
+      }
+      return;
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+      console.warn("[RenderVideo] seek attempt failed", {
+        attempt,
+        targets,
+        error: lastError.message
+      });
+      if (attempt < normalizedRetryAttempts) {
+        const pendingSeekSettled = await waitForPendingSeekToSettle(
+          video,
+          Math.min(PENDING_SEEK_DRAIN_TIMEOUT_MS, normalizedTimeoutMs)
+        );
+        if (!pendingSeekSettled) {
+          break;
+        }
+        await waitForMilliseconds(Math.min(250 * attempt, 1e3));
+      }
+    }
+  }
+  throw new Error(
+    `Video seek failed at ${timeSec}s after ${normalizedRetryAttempts} attempts: ${(lastError == null ? void 0 : lastError.message) ?? "unknown error"}`
+  );
+}
 function waitForVideoReady(video) {
   return new Promise((resolve, reject) => {
     if (video.readyState >= 1) {
@@ -71178,6 +71352,8 @@ async function main() {
   window.__RENDER_PROGRESS__ = 0;
   window.__RENDER_ERROR__ = null;
   window.__RENDER_AUDIO_STATUS__ = null;
+  window.__RENDER_HEARTBEAT__ = Date.now();
+  window.__RENDER_STAGE__ = "initializing";
   try {
     const config = window.__RENDER_CONFIG__;
     if (!config) throw new Error("No __RENDER_CONFIG__ found on window");
@@ -71192,13 +71368,12 @@ async function main() {
     } = config;
     const trimStart = resolveTrimStart(recipe);
     const video = document.getElementById("source-video");
+    touchRenderHeartbeat("loading-source");
     video.src = sourceUrl;
     video.load();
     await waitForVideoReady(video);
-    const videoDuration = video.duration;
-    if (!Number.isFinite(videoDuration) || videoDuration <= 0) {
-      throw new Error(`Invalid video duration: ${videoDuration}`);
-    }
+    touchRenderHeartbeat("probing-duration");
+    const videoDuration = await resolveVideoDuration(video, recipe);
     const trimEnd = resolveTrimEnd(recipe, videoDuration);
     const exportDuration = Math.max(0, trimEnd - trimStart);
     const totalFrames = Math.max(1, Math.ceil(exportDuration * fps));
@@ -71208,6 +71383,7 @@ async function main() {
       window.__RENDER_AUDIO_STATUS__ = "skipped:AudioEncoder-unavailable";
     }
     const audioPromise = hasAudioEncoder ? decodeAudioFromSource(sourceUrl) : Promise.resolve(null);
+    touchRenderHeartbeat("initializing-pixi");
     const app = new Application();
     await app.init({
       width,
@@ -71335,26 +71511,24 @@ async function main() {
       }
     });
     encoder.configure(encoderConfig);
-    const targetCanvas = document.createElement("canvas");
-    targetCanvas.width = width;
-    targetCanvas.height = height;
-    const targetCtx = targetCanvas.getContext("2d");
-    if (!targetCtx) throw new Error("Failed to create 2D context for export");
     for (let frame = 0; frame < totalFrames; frame++) {
       const timeSec = trimStart + frame / fps;
-      await seekVideo(video, timeSec);
-      sourceCtx.drawImage(video, 0, 0, sourceWidth, sourceHeight);
+      await seekVideo(
+        video,
+        timeSec,
+        config.seekTimeoutMs ?? 4e3,
+        config.seekRetryAttempts ?? 3,
+        fps
+      );
+      await drawCurrentVideoFrameToCanvas(video, sourceCtx, sourceWidth, sourceHeight);
       videoTexture.source.update();
       app.render();
-      const gl = app.renderer.gl;
-      if (gl) {
-        gl.finish();
-      }
-      targetCtx.clearRect(0, 0, width, height);
-      targetCtx.drawImage(app.canvas, 0, 0, width, height);
       const timestamp = Math.floor(frame / fps * 1e6);
       const frameDuration = Math.floor(1e6 / fps);
-      const videoFrame = new VideoFrame(targetCanvas, { timestamp, duration: frameDuration });
+      const videoFrame = new VideoFrame(
+        app.canvas,
+        { timestamp, duration: frameDuration }
+      );
       const keyFrame = frame % (fps * 2) === 0;
       encoder.encode(videoFrame, { keyFrame });
       videoFrame.close();
@@ -71364,11 +71538,14 @@ async function main() {
         });
       }
       window.__RENDER_PROGRESS__ = Math.round((frame + 1) / totalFrames * 90);
+      touchRenderHeartbeat("encoding-video");
     }
+    touchRenderHeartbeat("flushing-video");
     await encoder.flush();
     encoder.close();
     if (hasAudio) {
       window.__RENDER_PROGRESS__ = 91;
+      touchRenderHeartbeat("encoding-audio");
       const trimmed = trimAudioBuffer(audioBuffer, trimStart, trimEnd);
       const audioEncoderConfig = {
         codec: "mp4a.40.2",
@@ -71414,7 +71591,9 @@ async function main() {
               audioEncoder.addEventListener("dequeue", () => resolve(), { once: true });
             });
           }
+          touchRenderHeartbeat("encoding-audio");
         }
+        touchRenderHeartbeat("flushing-audio");
         await audioEncoder.flush();
         audioEncoder.close();
         console.log("[RenderAudio] Audio encoding complete");
@@ -71425,15 +71604,18 @@ async function main() {
       }
       window.__RENDER_PROGRESS__ = 99;
     }
+    touchRenderHeartbeat("finalizing-muxer");
     muxer.finalize();
     await chunkWriteQueue.flush();
     window.__RENDER_PROGRESS__ = 100;
     window.__RENDER_STATUS__ = "done";
+    touchRenderHeartbeat("done");
     app.destroy(true);
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
     window.__RENDER_ERROR__ = message;
     window.__RENDER_STATUS__ = "error";
+    touchRenderHeartbeat("error");
     throw err;
   }
 }