captions.js 0.4.0 → 0.4.1

package/dist/index.mjs

@@ -1,10 +1,1758 @@
+// src/fonts/googleFonts.config.ts
+var googleFontsList = [
+  "Roboto",
+  "Open Sans",
+  "Lato",
+  "Montserrat",
+  "Nunito",
+  "Poppins",
+  "Ubuntu",
+  "PT Sans",
+  "Merriweather Sans",
+  "Lobster",
+  "Amatic SC",
+  "Pacifico",
+  "Raleway",
+  "Cinzel",
+  "Quicksand",
+  "Zilla Slab",
+  "Caveat",
+  "Crimson Pro",
+  "Bebas Neue",
+  "Comfortaa",
+  "Satisfy",
+  "Permanent Marker",
+  "Oswald",
+  "Onset",
+  "Bangers",
+  "Kanit",
+  "Work Sans",
+  "Fira Sans",
+  "Anton",
+  "Playfair Display",
+  "Rubik",
+  "Alumni Sans",
+  "Righteous",
+  "Comico",
+  "Excon",
+  "Kalam",
+  "Tanker",
+  "Arsenal",
+  "Balsamiq Sans",
+  "Bona Nova SC"
+];
+
+// src/stylePresets/stylePresets.config.ts
+var stylePresets = [
+  {
+    id: 1,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#ffffffFF",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "black",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Karaoke",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/karaoke_preview.png",
+        aplifiedWordColor: "#04f827FF"
+      },
+      position: "bottom",
+      animation: "bounce",
+      linesPerPage: 3
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 2,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 25,
+          fontColor: "#ffffffFF",
+          underline: false,
+          fontFamily: "Permanent Marker",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Beasty",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/beasty_preview.png",
+        aplifiedWordColor: "#ff0000ff"
+      },
+      position: "bottom",
+      animation: "pop",
+      linesPerPage: 1
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 3,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 23,
+          fontColor: "#C6C6C6FF",
+          underline: false,
+          fontFamily: "Poppins",
+          fontWeight: "bold",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Safari",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/safari_preview.png",
+        aplifiedWordColor: "#000000FF"
+      },
+      position: "bottom",
+      animation: "box",
+      linesPerPage: 1
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 4,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 24,
+          fontColor: "#817B81FF",
+          underline: false,
+          fontFamily: "PT Sans",
+          fontWeight: "black",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Acid",
+        backgroundColor: "#00000000",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/aciv_preview.png",
+        aplifiedWordColor: "#6BF5C7FF"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 1,
+      positionTopOffset: 42
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 5,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 26,
+          fontColor: "#F43FE0FF",
+          underline: false,
+          fontFamily: "Raleway",
+          fontWeight: "bold",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 8
+        },
+        name: "Popline",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/popline_preview.png",
+        aplifiedWordColor: "#F43FE0FF"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 1
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 6,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Desert",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/desert_preview.png",
+        aplifiedWordColor: "#8F2EEDFF"
+      },
+      position: "bottom",
+      animation: "bounce",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 7,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 26,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Lato",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Hook",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/hook_preview.png",
+        aplifiedWordColor: "#8F2EEDFF"
+      },
+      position: "bottom",
+      animation: "underline",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 8,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Sky",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/sky_preview.png",
+        aplifiedWordColor: "#FFFFFFFF"
+      },
+      position: "bottom",
+      animation: "slide-left",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 9,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Flamingo",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/flamingo_preview.png",
+        aplifiedWordColor: "#ff0000ff"
+      },
+      position: "bottom",
+      animation: "scale",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 10,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 26,
+          fontColor: "#8a8a8aff",
+          underline: false,
+          fontFamily: "Raleway",
+          fontWeight: "bold",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Deep Diver B&W",
+        backgroundColor: "#000000ff",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/captions-deep-diver-b&w.png",
+        aplifiedWordColor: "#ffffffff"
+      },
+      position: "bottom",
+      animation: "box",
+      linesPerPage: 1
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 11,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#b0b0b0ff",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "bold",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "New",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/flamingo_preview.png",
+        aplifiedWordColor: "#dbff00ff"
+      },
+      position: "middle",
+      animation: "pop",
+      linesPerPage: 3
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 12,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 30,
+          fontColor: "#ffffffFF",
+          underline: false,
+          fontFamily: "Bangers",
+          fontWeight: "bold",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000ff",
+          fontStrokeWidth: 60
+        },
+        name: "Banger",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/beasty_preview.png",
+        aplifiedWordColor: "#fdfa14ff"
+      },
+      position: "bottom",
+      animation: "pop",
+      linesPerPage: 1
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 13,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 30
+        },
+        name: "Catchy",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/desert_preview.png",
+        aplifiedWordColor: "#ff5700ff"
+      },
+      position: "bottom",
+      animation: "bounce",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 14,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 25,
+          fontColor: "#ffffffFF",
+          underline: false,
+          fontFamily: "Rubik",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 40
+        },
+        name: "Karaoke 2",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/karaoke_preview.png",
+        aplifiedWordColor: "#2bf82aff"
+      },
+      position: "bottom",
+      animation: "bounce",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 15,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 25,
+          fontColor: "#ffffffFF",
+          underline: false,
+          fontFamily: "Rubik",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 60
+        },
+        name: "Karaoke 3",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/karaoke_preview.png",
+        aplifiedWordColor: "#2bf82aff"
+      },
+      position: "bottom",
+      animation: "bounce",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 16,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          shadow: {
+            fontShadowBlur: 0,
+            fontShadowColor: "#000000ff",
+            fontShadowOffsetX: 2,
+            fontShadowOffsetY: 2
+          },
+          fontSize: 25,
+          fontColor: "#ffffffFF",
+          underline: false,
+          fontFamily: "Kanit",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 40
+        },
+        name: "From",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/karaoke_preview.png",
+        aplifiedWordColor: "#ffdd03ff"
+      },
+      position: "bottom",
+      animation: "pop",
+      linesPerPage: 1
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 17,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 15,
+          fontColor: "#ffffffff",
+          underline: false,
+          fontFamily: "Roboto",
+          fontWeight: "bold",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 20
+        },
+        name: "Classic",
+        backgroundColor: "#000000ff",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/safari_preview.png",
+        aplifiedWordColor: "#ffffffff"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 18,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 30,
+          fontColor: "#ffffffff",
+          underline: false,
+          fontFamily: "Roboto",
+          fontWeight: "medium",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 40
+        },
+        name: "Classic Big",
+        backgroundColor: "#000000ff",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/safari_preview.png",
+        aplifiedWordColor: "#ffffffff"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 19,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 25,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Montserrat",
+          fontWeight: "black",
+          fontCapitalize: true,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 80
+        },
+        name: "Crazy",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/desert_preview.png",
+        aplifiedWordColor: "#ebf901ff"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 2,
+      positionTopOffset: 0
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 20,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 30,
+          fontColor: "#ffffffff",
+          underline: false,
+          fontFamily: "PT Sans",
+          fontWeight: "black",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 40
+        },
+        name: "Acid 2",
+        backgroundColor: "#00000000",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/aciv_preview.png",
+        aplifiedWordColor: "#6BF5C7FF"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 1,
+      positionTopOffset: 42
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 21,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 20,
+          fontColor: "#ffffffff",
+          underline: false,
+          fontFamily: "Oswald",
+          fontWeight: "medium",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 40
+        },
+        name: "Marvel",
+        backgroundColor: "#00000000",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/aciv_preview.png",
+        aplifiedWordColor: "#a76dffff"
+      },
+      position: "bottom",
+      animation: "scale",
+      linesPerPage: 2,
+      positionTopOffset: 0
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 22,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          shadow: {
+            fontShadowBlur: 1,
+            fontShadowColor: "0",
+            fontShadowOffsetX: 2,
+            fontShadowOffsetY: 2
+          },
+          fontSize: 25,
+          fontColor: "#ffffffff",
+          underline: false,
+          fontFamily: "Pacifico",
+          fontWeight: "medium",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Lovly",
+        backgroundColor: "#00000000",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/aciv_preview.png",
+        aplifiedWordColor: "#f866cfff"
+      },
+      position: "bottom",
+      animation: "scale",
+      linesPerPage: 2,
+      positionTopOffset: 0
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 23,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          shadow: {
+            fontShadowBlur: 0,
+            fontShadowColor: "#023210ff",
+            fontShadowOffsetX: 2,
+            fontShadowOffsetY: 2
+          },
+          fontSize: 25,
+          fontColor: "#ffffffff",
+          underline: false,
+          fontFamily: "Playfair Display",
+          fontWeight: "regular",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Old Money",
+        backgroundColor: "#00000000",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/aciv_preview.png",
+        aplifiedWordColor: "#ffffffff"
+      },
+      position: "bottom",
+      animation: "slide-up",
+      linesPerPage: 3,
+      positionTopOffset: 0
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 24,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          fontSize: 14,
+          fontColor: "#e4e900ff",
+          underline: false,
+          fontFamily: "Lato",
+          fontWeight: "bold",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 20
+        },
+        name: "Cinema",
+        backgroundColor: "#000000ff",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/safari_preview.png",
+        aplifiedWordColor: "#e4e900ff"
+      },
+      position: "bottom",
+      animation: "none",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  },
+  {
+    id: 25,
+    captionsSettings: {
+      style: {
+        font: {
+          italic: false,
+          shadow: {
+            fontShadowBlur: 10,
+            fontShadowColor: "#000000ff",
+            fontShadowOffsetX: 2,
+            fontShadowOffsetY: 2
+          },
+          fontSize: 20,
+          fontColor: "#FFFFFFFF",
+          underline: false,
+          fontFamily: "Raleway",
+          fontWeight: "black",
+          fontCapitalize: false,
+          fontStrokeColor: "#000000FF",
+          fontStrokeWidth: 0
+        },
+        name: "Marker",
+        backgroundColor: "#E4E4E4FF",
+        verticalCoverImg: "https://storage.googleapis.com/loomz-front-static/video-editor/img/flamingo_preview.png",
+        aplifiedWordColor: "#6f0eecff"
+      },
+      position: "bottom",
+      animation: "underline",
+      linesPerPage: 2
+    },
+    layoutSettings: {
+      aspectRatio: "9:16",
+      aIAutoLayout: ["fill", "fit", "split", "three", "four", "screenShare"],
+      fitLayoutAspectRatio: "original"
+    }
+  }
+];
+
+// src/fonts/googleFonts.helpers.ts
+import Konva from "konva";
+async function loadGoogleFont2(fontFamily) {
+  const fontNameForUrl = fontFamily.replace(/\s+/g, "+");
+  const fontUrl = `https://fonts.googleapis.com/css2?family=${fontNameForUrl}:wght@400;700&display=swap`;
+  if (!document.querySelector(`link[href="${fontUrl}"]`)) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = fontUrl;
+    document.head.appendChild(link);
+  }
+  try {
+    await document.fonts.load(`16px "${fontFamily}"`);
+    await document.fonts.ready;
+  } catch (err) {
+    console.warn(`[loadGoogleFont] failed to load font "${fontFamily}":`, err);
+  }
+  Konva.stages?.forEach((stage) => stage.batchDraw());
+  console.log(
+    `[loadGoogleFont] Font "${fontFamily}" loaded and ready for Konva.`
+  );
+}
+
+// src/render/renderString.ts
+import Konva2 from "konva";
+async function renderString(canvas, text, options) {
+  const { preset } = options;
+  const width = parseInt(canvas.style.width);
+  const height = parseInt(canvas.style.height);
+  const container = document.createElement("div");
+  var stage = new Konva2.Stage({
+    container,
+    width,
+    height
+  });
+  console.log("width, height", width, height);
+  var layer = new Konva2.Layer();
+  stage.add(layer);
+  await loadGoogleFont2(
+    preset.captionsSettings.style.font.fontFamily
+  );
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  const background = new Konva2.Rect({
+    x: 0,
+    y: 0,
+    width,
+    height,
+    fill: "black"
+  });
+  layer.add(background);
+  const textOptions = {
+    x: width / 2,
+    y: height / 2,
+    text,
+    fontSize: preset.captionsSettings.style.font.fontSize,
+    fontFamily: preset.captionsSettings.style.font.fontFamily,
+    fill: preset.captionsSettings.style.font.fontColor,
+    align: "center",
+    offsetX: 0,
+    offsetY: 0
+  };
+  console.log("textOptions", textOptions);
+  const konvaText = new Konva2.Text(textOptions);
+  konvaText.offsetX(konvaText.width() / 2);
+  konvaText.offsetY(konvaText.height() / 2);
+  layer.add(konvaText);
+  layer.draw();
+  const konvaCanvas = layer.getCanvas()._canvas;
+  const konvaContext = konvaCanvas.getContext("2d");
+  if (konvaContext) {
+    const targetContext = canvas.getContext("2d");
+    if (targetContext) {
+      targetContext.setTransform(
+        Konva2.pixelRatio,
+        0,
+        0,
+        Konva2.pixelRatio,
+        0,
+        0
+      );
+      targetContext.drawImage(konvaCanvas, 0, 0, width, height);
+    }
+  }
+  return true;
+}
+
+// src/captions/Captions.ts
+import Konva5 from "konva";
+
+// src/canvas-captions/index.ts
+import Konva4 from "konva";
+
+// src/canvas-captions/animate.ts
+import Konva3 from "konva";
+
+// src/canvas-captions/easing.ts
+var mapEaseToFn = {
+  ["linear" /* linear */]: linear,
+  ["easeInSine" /* inSine */]: easeInSine,
+  ["easeOutSine" /* outSine */]: easeOutSine,
+  ["easeInOutSine" /* inOutSine */]: easeInOutSine,
+  ["easeInQuad" /* inQuad */]: easeInQuad,
+  ["easeOutQuad" /* outQuad */]: easeOutQuad,
+  ["easeInOutQuad" /* inOutQuad */]: easeInOutQuad,
+  ["easeInCubic" /* inCubic */]: easeInCubic,
+  ["easeOutCubic" /* outCubic */]: easeOutCubic,
+  ["easeInOutCubic" /* inOutCubic */]: easeInOutCubic,
+  ["easeInQuart" /* inQuart */]: easeInQuart,
+  ["easeOutQuart" /* outQuart */]: easeOutQuart,
+  ["easeInOutQuart" /* inOutQuart */]: easeInOutQuart,
+  ["easeInQuint" /* inQuint */]: easeInQuint,
+  ["easeOutQuint" /* outQuint */]: easeOutQuint,
+  ["easeInOutQuint" /* inOutQuint */]: easeInOutQuint,
+  ["easeInExpo" /* inExpo */]: easeInExpo,
+  ["easeOutExpo" /* outExpo */]: easeOutExpo,
+  ["easeInOutExpo" /* inOutExpo */]: easeInOutExpo,
+  ["easeInCirc" /* inCirc */]: easeInCirc,
+  ["easeOutCirc" /* outCirc */]: easeOutCirc,
+  ["easeInOutCirc" /* inOutCirc */]: easeInOutCirc,
+  ["easeInBack" /* inBack */]: easeInBack,
+  ["easeOutBack" /* outBack */]: easeOutBack,
+  ["easeInOutBack" /* inOutBack */]: easeInOutBack,
+  ["easeInElastic" /* inElastic */]: easeInElastic,
+  ["easeOutElastic" /* outElastic */]: easeOutElastic,
+  ["easeInOutElastic" /* inOutElastic */]: easeInOutElastic,
+  ["easeInBounce" /* inBounce */]: easeInBounce,
+  ["easeOutBounce" /* outBounce */]: easeOutBounce,
+  ["easeInOutBounce" /* inOutBounce */]: easeInOutBounce
+};
+function linear(x) {
+  return x;
+}
+function easeInSine(x) {
+  return 1 - Math.cos(x * Math.PI / 2);
+}
+function easeOutSine(x) {
+  return Math.sin(x * Math.PI / 2);
+}
+function easeInOutSine(x) {
+  return -(Math.cos(Math.PI * x) - 1) / 2;
+}
+function easeInQuad(x) {
+  return x * x;
+}
+function easeOutQuad(x) {
+  return 1 - (1 - x) * (1 - x);
+}
+function easeInOutQuad(x) {
+  return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+}
+function easeInCubic(x) {
+  return x * x * x;
+}
+function easeOutCubic(x) {
+  return 1 - Math.pow(1 - x, 3);
+}
+function easeInOutCubic(x) {
+  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+function easeInQuart(x) {
+  return x * x * x * x;
+}
+function easeOutQuart(x) {
+  return 1 - Math.pow(1 - x, 4);
+}
+function easeInOutQuart(x) {
+  return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
+}
+function easeInQuint(x) {
+  return x * x * x * x * x;
+}
+function easeOutQuint(x) {
+  return 1 - Math.pow(1 - x, 5);
+}
+function easeInOutQuint(x) {
+  return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
+}
+function easeInExpo(x) {
+  return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
+}
+function easeOutExpo(x) {
+  return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+}
+function easeInOutExpo(x) {
+  return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2;
+}
+function easeInCirc(x) {
+  return 1 - Math.sqrt(1 - Math.pow(x, 2));
+}
+function easeOutCirc(x) {
+  return Math.sqrt(1 - Math.pow(x - 1, 2));
+}
+function easeInOutCirc(x) {
+  return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
+}
+function easeInBack(x) {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return c3 * x * x * x - c1 * x * x;
+}
+function easeOutBack(x) {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+}
+function easeInOutBack(x) {
+  const c1 = 1.70158;
+  const c2 = c1 * 1.525;
+  return x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+}
+function easeInElastic(x) {
+  const c4 = 2 * Math.PI / 3;
+  return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);
+}
+function easeOutElastic(x) {
+  const c4 = 2 * Math.PI / 3;
+  return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
+}
+function easeInOutElastic(x) {
+  const c5 = 2 * Math.PI / 4.5;
+  return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
+}
+function easeInBounce(x) {
+  return 1 - easeOutBounce(1 - x);
+}
+function easeOutBounce(x) {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (x < 1 / d1) {
+    return n1 * x * x;
+  } else if (x < 2 / d1) {
+    return n1 * (x -= 1.5 / d1) * x + 0.75;
+  } else if (x < 2.5 / d1) {
+    return n1 * (x -= 2.25 / d1) * x + 0.9375;
+  } else {
+    return n1 * (x -= 2.625 / d1) * x + 0.984375;
+  }
+}
+function easeInOutBounce(x) {
+  return x < 0.5 ? (1 - easeOutBounce(1 - 2 * x)) / 2 : (1 + easeOutBounce(2 * x - 1)) / 2;
+}
+
+// src/canvas-captions/animate.ts
+var animate = (captionsSettings, progress, chunk, current) => {
+  const easeFn = mapEaseToFn["easeInQuint" /* inQuint */];
+  const slideOffset = 7;
+  switch (captionsSettings.animation) {
+    case "bounce":
+      if (current) {
+        current.text.offsetX(current.text.width() / 2);
+        current.text.offsetY(current.text.height() / 2);
+        current.text.x(current.text.x() + current.text.width() / 2);
+        current.text.y(current.text.y() + current.text.height() / 2);
+        current.text.scale({
+          x: 1 + 0.3 * easeFn(1),
+          y: 1 + 0.3 * easeFn(1)
+        });
+        const offsetModule = captionsSettings.style.font.fontSize * 0.3;
+        const curreentChildIndex = current.text.parent?.children.indexOf(current.text) || 0;
+        current.text.parent?.children.forEach((child, index) => {
+          if (index !== curreentChildIndex) {
+            const offset = index < curreentChildIndex ? -offsetModule : offsetModule;
+            child.x(child.x() + offset * easeFn(1));
+          }
+        });
+      }
+      break;
+    case "underline":
+      if (current) {
+        const underline = new Konva3.Line({
+          points: [
+            current.text.x(),
+            current.text.height(),
+            current.text.x() + current.text.width() * easeFn(1),
+            current.text.height()
+          ],
+          lineCap: "round",
+          stroke: current.caption.highlightColor ? current.caption.highlightColor : captionsSettings.style.aplifiedWordColor,
+          strokeWidth: 5
+          //opacity: easeFn(current.progress),
+        });
+        current.text.parent?.add(underline);
+      }
+      break;
+    case "box":
+      const xOffset = 12;
+      const yOffset = 5;
+      const cornerRadius = 6;
+      const box = new Konva3.Rect({
+        x: -xOffset,
+        y: -yOffset - 2,
+        width: chunk.width + 2 * xOffset,
+        height: chunk.height + 2 * yOffset + 2,
+        fill: captionsSettings.style.backgroundColor,
+        cornerRadius
+      });
+      chunk.group.add(box);
+      box.moveToBottom();
+      break;
+    case "box-word":
+      if (current) {
+        const underline = new Konva3.Line({
+          id: "box-word",
+          points: [
+            current.text.x() + 6,
+            current.text.height() - current.text.height() / 2,
+            current.text.x() + (current.textTrim.width() - 6) * easeFn(1),
+            current.text.height() - current.text.height() / 2
+          ],
+          lineCap: "round",
+          stroke: captionsSettings.style.backgroundColor,
+          strokeWidth: current.textTrim.height() + 2
+        });
+        underline.zIndex(4);
+        current.text?.parent?.add(underline);
+      }
+      break;
+    case "pop":
+      const scaleFactor = 0.5 + 0.5 * mapEaseToFn["easeOutBack" /* outBack */](progress);
+      chunk.group.scale({
+        x: scaleFactor,
+        y: scaleFactor
+      });
+      break;
+    case "scale":
+      const scaleFactor2 = 0.4 + 0.6 * mapEaseToFn["linear" /* linear */](progress);
+      chunk.group.scale({
+        x: scaleFactor2,
+        y: scaleFactor2
+      });
+      break;
+    case "slide-down":
+      chunk.group.y(
+        chunk.group.y() - slideOffset + slideOffset * mapEaseToFn["linear" /* linear */](progress)
+      );
+      break;
+    case "slide-up":
+      chunk.group.y(
+        chunk.group.y() + slideOffset - slideOffset * mapEaseToFn["linear" /* linear */](progress)
+      );
+      break;
+    case "slide-left":
+      chunk.group.x(
+        chunk.group.x() + slideOffset - slideOffset * mapEaseToFn["linear" /* linear */](progress)
+      );
+      break;
+    default:
+      break;
+  }
+};
+
+// src/canvas-captions/utils.ts
+var SOCIAL_NETWORK_OFFSET = 70;
+var splitCaptionsBytotalWordsToDisplay = (captions, totalWordsToDisplay, linesPerPage) => {
+  const result = [];
+  let currentCaptionIndex = 0;
+  let currentSymbolsLength = 0;
+  let currentBlock = [];
+  let currentLine = 1;
+  const maxWordGapSec = 1;
+  const isValidBlockGap = (currentBlock2, caption) => {
+    return true;
+    return currentBlock2.length > 0 && caption.startTime - currentBlock2[currentBlock2.length - 1].endTime < maxWordGapSec || currentBlock2.length === 0;
+  };
+  while (currentCaptionIndex < captions.length) {
+    const caption = captions[currentCaptionIndex];
+    if (currentSymbolsLength + caption.word.length + 1 <= totalWordsToDisplay && isValidBlockGap(currentBlock, caption)) {
+      currentBlock.push(caption);
+      currentSymbolsLength += caption.word.length + 1;
+      currentCaptionIndex++;
+    } else if (linesPerPage > currentLine && isValidBlockGap(currentBlock, caption)) {
+      currentBlock.push(caption);
+      currentCaptionIndex++;
+      currentSymbolsLength = caption.word.length;
+      currentLine++;
+    } else {
+      if (currentBlock.length > 0) {
+        result.push(currentBlock);
+      }
+      currentBlock = [];
+      currentBlock.push(caption);
+      currentSymbolsLength = caption.word.length;
+      currentCaptionIndex++;
+      currentLine = 1;
+    }
+  }
+  if (currentBlock.length > 0) {
+    result.push(currentBlock);
+  }
+  return result;
+};
+var fontWeightToFontStyle = (fontWeight, isItalic) => {
+  return (isItalic ? "italic " : "") + fontWeightToNumber(fontWeight);
+};
+var fontWeightToNumber = (fontWeight) => {
+  switch (fontWeight) {
+    case "thin":
+      return 100;
+    case "light":
+      return 300;
+    case "regular":
+      return 400;
+    case "medium":
+      return 500;
+    case "bold":
+      return 700;
+    case "black":
+      return 900;
+    default:
+      return 400;
+  }
+};
+var getFillColor = (caption, isCurrentCaption, isPastCaption, captionsSettings) => {
+  if (captionsSettings.animation === "underline") {
+    return captionsSettings.style.font.fontColor;
+  }
+  if (captionsSettings.animation === "box" && (isCurrentCaption || isPastCaption)) {
+    return caption.highlightColor || captionsSettings.style.aplifiedWordColor;
+  }
+  if (isCurrentCaption) {
+    return caption.highlightColor || captionsSettings.style.aplifiedWordColor;
+  }
+  return captionsSettings.style.font.fontColor;
+};
+var getCaptionsGroupY = (groupHeight, canvasWidth, canvasHeight, position, offset, toCoef) => {
+  const aspectRatio = canvasWidth / canvasHeight;
+  const socialOffset = aspectRatio <= 1 ? SOCIAL_NETWORK_OFFSET * toCoef : 0;
+  switch (position) {
+    case "top":
+      return (offset + 20) * toCoef + groupHeight / 2;
+    case "middle":
+      return canvasHeight / 2 + offset * toCoef;
+    default:
+      return canvasHeight - groupHeight / 2 - (20 + offset) * toCoef - socialOffset;
+  }
+};
+var alignLinesInGroup = (group, maxGroupWidth, xOffset) => {
+  return group.children.map((line) => {
+    const lineWords = line.children;
+    const lineWordsWidth = lineWords.reduce(
+      (acc, word, currentIndex) => acc + word.width() + (currentIndex > 0 ? xOffset : 0),
+      0
+    );
+    const lineHeight = lineWords.reduce(
+      (acc, word) => Math.max(acc, word.height()),
+      0
+    );
+    const lineX = (maxGroupWidth - lineWordsWidth) / 2;
+    line.x(lineX);
+    return {
+      line,
+      width: lineWordsWidth,
+      height: lineHeight
+    };
+  });
+};
+var alphabetEN = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+var alphabetRU = "\u0410\u0411\u0412\u0413\u0414\u0415\u0401\u0416\u0417\u0418\u0419\u041A\u041B\u041C\u041D\u041E\u041F\u0420\u0421\u0422\u0423\u0424\u0425\u0426\u0427\u0428\u0429\u042A\u042B\u042C\u042D\u042E\u042F\u0430\u0431\u0432\u0433\u0434\u0435\u0451\u0436\u0437\u0438\u0439\u043A\u043B\u043C\u043D\u043E\u043F\u0440\u0441\u0442\u0443\u0444\u0445\u0446\u0447\u0448\u0449\u044A\u044B\u044C\u044D\u044E\u044F";
+var alphabetArabic = "\u0627 \u0628 \u062A \u062B \u062C \u062D \u062E \u062F \u0630 \u0631 \u0632 \u0633 \u0634 \u0635 \u0636 \u0637 \u0638 \u0639 \u063A \u0641 \u0642 \u0643 \u0644 \u0645 \u0646 \u0647 \u0648 \u064A";
+var getAverageSymbolsInLine = (targetWidth, textWidth, alphabetLength, captionsSettings) => {
+  const offset = captionsSettings.animation === "box" || captionsSettings.animation === "bounce" ? 4 : 2;
+  const avg = Math.round(targetWidth / (textWidth / alphabetLength)) - offset;
+  return avg > 0 ? avg : 0;
+};
+var getAlphabet = (kind) => {
+  switch (kind) {
+    case "cyrillic" /* Cyrillic */:
+      return alphabetRU;
+    case "latin" /* Latin */:
+      return alphabetEN;
+    case "arabic" /* Arabic */:
+      return alphabetArabic;
+    default:
+      return "latin" /* Latin */;
+  }
+};
+var detectAlphabetKind = (text) => {
+  if (isCyrillic(text)) {
+    return "cyrillic" /* Cyrillic */;
+  }
+  if (isLatin(text)) {
+    return "latin" /* Latin */;
+  }
+  if (isArabic(text)) {
+    return "arabic" /* Arabic */;
+  }
+  return "latin" /* Latin */;
+};
+function isCyrillic(text) {
+  return /[\u0400-\u04FF]/.test(text);
+}
+function isLatin(text) {
+  return /[A-Za-z]/.test(text);
+}
+function isArabic(text) {
+  return /[\u0600-\u06FF]/.test(text);
+}
+
+// src/canvas-captions/index.ts
+import objectHash from "object-hash";
+var memo = {};
+var drawDebugBoundingBox = (parent, width, height, stroke, dash = [6, 4]) => {
+  const rect = new Konva4.Rect({
+    x: 0,
+    y: 0,
+    width,
+    height,
+    stroke,
+    strokeWidth: 4,
+    dash,
+    listening: false
+  });
+  parent.add(rect);
+  rect.moveToTop();
+};
+var renderFrame = (captionsSettings, layoutSettings, captions, currentTime, targetSize, layer, toCoef, debug) => {
+  const [width, height] = targetSize;
+  const targetFontSize = captionsSettings.style.font.fontSize * (toCoef ?? 1);
+  const showDebugBoundingBoxes = Boolean(debug);
+  let totalSymbolInLine = 0;
+  const hash = objectHash({ captionsSettings });
+  if (memo[hash]) {
+    totalSymbolInLine = memo[hash];
+  } else {
+    const textForDetectAlphabet = captions.slice(0, 10).map((x) => x.word).join("");
+    const alphabetKind = detectAlphabetKind(textForDetectAlphabet);
+    const alphabet = getAlphabet(alphabetKind);
+    const alphabetText = new Konva4.Text({
+      text: captionsSettings.style.font.fontCapitalize ? alphabet.toUpperCase() : alphabet,
+      x: 0,
+      y: 0,
+      fontSize: targetFontSize,
+      fontFamily: captionsSettings.style.font.fontFamily,
+      fontStyle: fontWeightToFontStyle(
+        captionsSettings.style.font.fontWeight,
+        captionsSettings.style.font.italic
+      ),
+      stroke: captionsSettings.style.font.fontStrokeColor,
+      strokeWidth: captionsSettings.style.font.fontStrokeWidth ? captionsSettings.style.font.fontStrokeWidth / 10 : 0,
+      textDecoration: captionsSettings.style.font.underline ? "underline" : "",
+      fill: "black"
+    });
+    alphabetText.fillAfterStrokeEnabled(true);
+    totalSymbolInLine = getAverageSymbolsInLine(
+      layer.getWidth(),
+      alphabetText.getWidth(),
+      alphabet.length,
+      captionsSettings
+    );
+    memo[hash] = totalSymbolInLine;
+  }
+  const chunks = splitCaptionsBytotalWordsToDisplay(
+    captions,
+    totalSymbolInLine,
+    captionsSettings.linesPerPage
+  );
+  const currentChunk = chunks.find(
+    (chunk) => chunk[0].startTime <= currentTime && chunk[chunk.length - 1].endTime >= currentTime
+  );
+  const xOffset = targetFontSize * 0.1;
+  const wordSpacing = xOffset + (captionsSettings.animation === "bounce" ? 8 : 0) + (captionsSettings.style.font.fontCapitalize ? 2 : 0);
+  const yOffset = captionsSettings.lineSpacing ?? 4;
+  if (currentChunk) {
+    const group = new Konva4.Group({
+      drawBorder: true
+    });
+    let x = 0;
+    let y = 0;
+    let maxGroupWidth = 0;
+    let groupWidth = 0;
+    let groupHeight = 0;
+    let line = new Konva4.Group({
+      drawBorder: true
+    });
+    let currentSymbolsLength = 0;
+    let current = void 0;
+    currentChunk.forEach((caption, index) => {
+      const isCurrentCaption = caption.startTime <= currentTime && caption.endTime >= currentTime;
+      const isPastCaption = caption.endTime < currentTime;
+      const fillColor = getFillColor(
+        caption,
+        isCurrentCaption,
+        isPastCaption,
+        captionsSettings
+      );
+      const isLastWordInLine = currentSymbolsLength + caption.word.length + (index < currentChunk.length - 1 ? currentChunk[index + 1].word.length : 0) > totalSymbolInLine || currentChunk.length - 1 === index;
+      let word = captionsSettings.style.font.fontCapitalize ? caption.word.toUpperCase() : caption.word;
+      word = isLastWordInLine ? word.trim() : word;
+      const createKonvaText = (word2, x2, targetFontSize2, captionsSettings2, fillColor2, trim) => {
+        return new Konva4.Text({
+          text: trim ? word2?.trim() : word2,
+          x: x2,
+          y: 0,
+          drawBorder: true,
+          fontSize: targetFontSize2,
+          fontFamily: captionsSettings2.style.font.fontFamily,
+          fontStyle: fontWeightToFontStyle(
+            captionsSettings2.style.font.fontWeight,
+            captionsSettings2.style.font.italic
+          ),
+          stroke: captionsSettings2.style.font.fontStrokeColor,
+          strokeWidth: captionsSettings2.style.font.fontStrokeWidth ? captionsSettings2.style.font.fontStrokeWidth / 10 : 0,
+          textDecoration: captionsSettings2.style.font.underline ? "underline" : "",
+          fill: fillColor2,
+          shadowColor: captionsSettings2.style.font.shadow?.fontShadowColor,
+          shadowBlur: captionsSettings2.style.font.shadow?.fontShadowBlur ?? 0,
+          shadowOffset: captionsSettings2.style.font.shadow ? {
+            x: captionsSettings2.style.font.shadow?.fontShadowOffsetX ?? 0,
+            y: captionsSettings2.style.font.shadow?.fontShadowOffsetY ?? 0
+          } : void 0,
+          listening: false,
+          perfectDrawEnabled: false
+        });
+      };
+      const text = createKonvaText(
+        word,
+        x,
+        targetFontSize,
+        captionsSettings,
+        fillColor,
+        false
+      );
+      text.fillAfterStrokeEnabled(true);
+      const textTrim = captionsSettings.animation === "box-word" ? createKonvaText(
+        word,
+        x,
+        targetFontSize,
+        captionsSettings,
+        fillColor,
+        true
+      ) : null;
+      if (isCurrentCaption) {
+        current = {
+          caption,
+          text,
+          progress: (currentTime - caption.startTime) / (caption.endTime - caption.startTime),
+          textTrim
+          //progress: Math.min(1, (currentTime - caption.start_time) / 0.5),
+        };
+      }
+      x += text.width() + wordSpacing;
+      groupWidth += text.width() + (isLastWordInLine ? 0 : wordSpacing);
+      line.y(y);
+      line.add(text);
+      if (isLastWordInLine) {
+        group.add(line);
+        x = 0;
+        const isLastLine = index + 1 === currentChunk.length;
+        y += text.height() + yOffset;
+        groupHeight += text.height() + (isLastLine ? 0 : yOffset);
+        if (groupWidth > maxGroupWidth) {
+          maxGroupWidth = groupWidth;
+        }
+        groupWidth = 0;
+        line = new Konva4.Group({
+          drawBorder: true
+        });
+        currentSymbolsLength = 0;
+      } else {
+        currentSymbolsLength += caption.word.length + 1;
+      }
+    });
+    const lineMetrics = alignLinesInGroup(group, maxGroupWidth, wordSpacing);
+    const progress = Math.min(
+      1,
+      (currentTime - currentChunk[0].startTime) / 0.2
+    );
+    group.offsetX(maxGroupWidth / 2);
+    group.offsetY(groupHeight / 2);
+    group.x(width / 2);
+    group.y(
+      getCaptionsGroupY(
+        groupHeight,
+        width,
+        height,
+        captionsSettings.position,
+        captionsSettings.positionTopOffset ?? 0,
+        toCoef ?? 1
+      )
+    );
+    animate(
+      captionsSettings,
+      progress,
+      {
+        group,
+        width: maxGroupWidth,
+        height: groupHeight
+      },
+      current
+    );
+    if (showDebugBoundingBoxes) {
+      drawDebugBoundingBox(group, maxGroupWidth, groupHeight, "#ff4081");
+      lineMetrics.forEach(({ line: line2, width: width2, height: height2 }) => {
+        drawDebugBoundingBox(line2, width2, height2, "#2196f3", [4, 3]);
+      });
+    }
+    if (current?.text && captionsSettings.animation === "box-word") {
+      current.text?.zIndex(10);
+    }
+    layer.add(group);
+  }
+  layer.draw();
+};
+
+// src/captions/Captions.ts
+var Captions = class {
+  /**
+   * Create a controller bound to the provided video element and preset.
+   *
+   * @param options - Complete configuration for the controller.
+   */
+  constructor(options) {
+    this.enabled = false;
+    this.ownsContainer = false;
+    this.stage = null;
+    this.layer = null;
+    this.animationFrameId = null;
+    this.videoWidth = 0;
+    this.videoHeight = 0;
+    this.handleResize = () => {
+      this.syncStageDimensions();
+    };
+    this.handleMetadata = () => {
+      this.syncStageDimensions();
+    };
+    this.animationLoop = () => {
+      this.updateFrame();
+      this.animationFrameId = requestAnimationFrame(this.animationLoop);
+    };
+    if (!options.video) {
+      throw new Error("captionsjs requires a video element");
+    }
+    this.video = options.video;
+    this.providedContainer = options.container;
+    this.presetState = options.preset;
+    this.captionsState = options.captions ?? null;
+    this.debug = options.debug ?? false;
+    if (options.autoEnable ?? true) {
+      this.enable();
+    }
+  }
+  /**
+   * Mount caption overlays onto the configured video if they are not active yet.
+   */
+  enable() {
+    if (this.enabled) {
+      return;
+    }
+    this.containerElement = this.providedContainer ?? this.createOverlay();
+    this.ownsContainer = !this.providedContainer;
+    this.stage = new Konva5.Stage({
+      container: this.containerElement
+    });
+    this.layer = new Konva5.Layer({ listening: false });
+    this.stage.add(this.layer);
+    this.videoWidth = this.video.videoWidth;
+    this.videoHeight = this.video.videoHeight;
+    window.addEventListener("resize", this.handleResize);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(this.handleResize);
+      this.resizeObserver.observe(this.video);
+    }
+    this.video.addEventListener("loadedmetadata", this.handleMetadata);
+    this.syncStageDimensions();
+    this.animationFrameId = requestAnimationFrame(this.animationLoop);
+    this.enabled = true;
+    void this.refreshFrame();
+  }
+  /**
+   * Tear down overlays, observers and animation loops to free resources.
+   */
+  disable() {
+    if (!this.enabled) {
+      return;
+    }
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    window.removeEventListener("resize", this.handleResize);
+    this.video.removeEventListener("loadedmetadata", this.handleMetadata);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+    if (this.ownsContainer && this.containerElement?.parentElement) {
+      this.containerElement.parentElement.removeChild(this.containerElement);
+    }
+    this.stage?.destroy();
+    this.stage = null;
+    this.layer = null;
+    this.containerElement = void 0;
+    this.ownsContainer = false;
+    this.enabled = false;
+  }
+  /**
+   * Alias for {@link Captions.disable | disable()} to match typical imperative controller APIs.
+   */
+  destroy() {
+    this.disable();
+  }
+  /**
+   * Swap the active preset and re-render with updated typography/colors.
+   *
+   * @param nextPreset - Preset that becomes the new render baseline.
+   */
+  preset(nextPreset) {
+    this.presetState = nextPreset;
+    if (!this.enabled) {
+      return;
+    }
+    void this.refreshFrame();
+  }
+  /**
+   * Replace the current caption track and repaint without reloading fonts.
+   *
+   * @param nextCaptions - Timed words that should drive the overlay.
+   */
+  captions(nextCaptions) {
+    this.captionsState = nextCaptions;
+    if (!this.enabled) {
+      return;
+    }
+    void this.refreshFrame(false);
+  }
+  /**
+   * Whether the Konva overlay is currently attached to the video element.
+   *
+   * @returns `true` when the overlay is mounted on top of the video.
+   */
+  isEnabled() {
+    return this.enabled;
+  }
+  async refreshFrame(loadFont = true) {
+    if (!this.layer || !this.stage) {
+      return;
+    }
+    if (loadFont) {
+      await this.loadFontForCurrentPreset();
+    }
+    this.updateFrame();
+  }
+  async loadFontForCurrentPreset() {
+    const fontFamily = this.presetState.captionsSettings.style.font.fontFamily;
+    await loadGoogleFont2(fontFamily);
+  }
+  updateFrame() {
+    if (!this.layer || !this.stage) {
+      return;
+    }
+    if (!this.videoWidth || !this.videoHeight) {
+      return;
+    }
+    this.layer.destroyChildren();
+    renderFrame(
+      this.presetState.captionsSettings,
+      void 0,
+      this.captionsState || [],
+      this.video.currentTime,
+      [this.videoWidth, this.videoHeight],
+      this.layer,
+      2,
+      this.debug
+    );
+  }
+  syncStageDimensions() {
+    if (!this.stage) {
+      return;
+    }
+    const currentVideoWidth = this.video.videoWidth || this.videoWidth;
+    const currentVideoHeight = this.video.videoHeight || this.videoHeight;
+    if (!currentVideoWidth || !currentVideoHeight) {
+      return;
+    }
+    this.videoWidth = currentVideoWidth;
+    this.videoHeight = currentVideoHeight;
+    this.stage.width(this.videoWidth);
+    this.stage.height(this.videoHeight);
+    const rect = this.video.getBoundingClientRect();
+    const stageContainer = this.stage.container();
+    const displayWidth = rect.width || stageContainer.offsetWidth || this.videoWidth;
+    const displayHeight = rect.height || stageContainer.offsetHeight || this.videoHeight;
+    if (displayWidth && displayHeight) {
+      stageContainer.style.width = `${displayWidth}px`;
+      stageContainer.style.height = `${displayHeight}px`;
+      const scaleX = displayWidth / this.videoWidth;
+      const scaleY = displayHeight / this.videoHeight;
+      this.stage.scale({ x: scaleX, y: scaleY });
+    } else {
+      this.stage.scale({ x: 1, y: 1 });
+      stageContainer.style.width = `${this.videoWidth}px`;
+      stageContainer.style.height = `${this.videoHeight}px`;
+    }
+    this.stage.batchDraw();
+  }
+  createOverlay() {
+    const container = document.createElement("div");
+    container.style.position = "absolute";
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.pointerEvents = "none";
+    const parent = this.video.parentElement;
+    parent?.appendChild(container);
+    if (parent) {
+      parent.style.position = "relative";
+    }
+    return container;
+  }
+};
+function captionsjs(options) {
+  return new Captions(options);
+}
+
 // src/index.ts
 function renderCaptions(ctx, text) {
-  ctx.font = "24px sans-serif";
-  ctx.fillStyle = "#17c499ff";
+  ctx.font = "48px sans-serif";
+  ctx.fillStyle = "red";
   ctx.fillText(text, 150, 50);
   return true;
 }
+var index_default = captionsjs;
 export {
-  renderCaptions
+  Captions,
+  captionsjs,
+  index_default as default,
+  googleFontsList,
+  renderCaptions,
+  renderString,
+  stylePresets
 };