@twick/studio 0.15.26 → 0.15.28

package/dist/index.js

@@ -8,6 +8,7 @@ const react = require("react");
 const timeline = require("@twick/timeline");
 const VideoEditor = require("@twick/video-editor");
 const livePlayer = require("@twick/live-player");
+const mediaUtils = require("@twick/media-utils");
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -113,103 +114,103 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$A = [
+const __iconNode$C = [
   ["path", { d: "M17 12H7", key: "16if0g" }],
   ["path", { d: "M19 18H5", key: "18s9l3" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignCenter = createLucideIcon("align-center", __iconNode$A);
+const AlignCenter = createLucideIcon("align-center", __iconNode$C);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$z = [
+const __iconNode$B = [
   ["path", { d: "M15 12H3", key: "6jk70r" }],
   ["path", { d: "M17 18H3", key: "1amg6g" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignLeft = createLucideIcon("align-left", __iconNode$z);
+const AlignLeft = createLucideIcon("align-left", __iconNode$B);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$y = [
+const __iconNode$A = [
   ["path", { d: "M21 12H9", key: "dn1m92" }],
   ["path", { d: "M21 18H7", key: "1ygte8" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignRight = createLucideIcon("align-right", __iconNode$y);
+const AlignRight = createLucideIcon("align-right", __iconNode$A);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$x = [
+const __iconNode$z = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold = createLucideIcon("bold", __iconNode$x);
+const Bold = createLucideIcon("bold", __iconNode$z);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$w = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$w);
+const __iconNode$y = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$y);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$v);
+const __iconNode$x = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$x);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [
+const __iconNode$w = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$u);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$w);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [
+const __iconNode$v = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-const CircleX = createLucideIcon("circle-x", __iconNode$t);
+const CircleX = createLucideIcon("circle-x", __iconNode$v);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$s);
+const __iconNode$u = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$u);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [
+const __iconNode$t = [
   [
     "path",
     { d: "M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z", key: "1tn4o7" }
@@ -218,102 +219,118 @@ const __iconNode$r = [
   ["path", { d: "m12.4 3.4 3.1 4", key: "6hsd6n" }],
   ["path", { d: "M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z", key: "ltgou9" }]
 ];
-const Clapperboard = createLucideIcon("clapperboard", __iconNode$r);
+const Clapperboard = createLucideIcon("clapperboard", __iconNode$t);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$s = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$q);
+const Download = createLucideIcon("download", __iconNode$s);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$r = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
 ];
-const File = createLucideIcon("file", __iconNode$p);
+const File = createLucideIcon("file", __iconNode$r);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$q = [
+  [
+    "path",
+    {
+      d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
+      key: "sc7q7i"
+    }
+  ]
+];
+const Funnel = createLucideIcon("funnel", __iconNode$q);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$p = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image = createLucideIcon("image", __iconNode$o);
+const Image$1 = createLucideIcon("image", __iconNode$p);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$o = [
   ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
   ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
   ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
 ];
-const Italic = createLucideIcon("italic", __iconNode$n);
+const Italic = createLucideIcon("italic", __iconNode$o);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$m);
+const __iconNode$n = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$n);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$m = [
   ["path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", key: "1lielz" }]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$l);
+const MessageSquare = createLucideIcon("message-square", __iconNode$m);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$l = [
   ["circle", { cx: "8", cy: "18", r: "4", key: "1fc0mg" }],
   ["path", { d: "M12 18V2l7 4", key: "g04rme" }]
 ];
-const Music2 = createLucideIcon("music-2", __iconNode$k);
+const Music2 = createLucideIcon("music-2", __iconNode$l);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$k = [
   ["path", { d: "M9 18V5l12-2v13", key: "1jmyc2" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["circle", { cx: "18", cy: "16", r: "3", key: "1hluhg" }]
 ];
-const Music = createLucideIcon("music", __iconNode$j);
+const Music = createLucideIcon("music", __iconNode$k);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$j = [
   [
     "path",
     {
@@ -326,64 +343,64 @@ const __iconNode$i = [
   ["circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor", key: "qy21gx" }],
   ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }]
 ];
-const Palette = createLucideIcon("palette", __iconNode$i);
+const Palette = createLucideIcon("palette", __iconNode$j);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$i = [
   ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
   ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
 ];
-const Pause = createLucideIcon("pause", __iconNode$h);
+const Pause = createLucideIcon("pause", __iconNode$i);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$g);
+const __iconNode$h = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __iconNode$h);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$g = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$f);
+const Plus = createLucideIcon("plus", __iconNode$g);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$f = [
   ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
 ];
-const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$e);
+const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$f);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$e = [
   ["rect", { width: "12", height: "20", x: "6", y: "2", rx: "2", key: "1oxtiu" }]
 ];
-const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$d);
+const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$e);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -396,14 +413,14 @@ const __iconNode$c = [
   ["path", { d: "m8.5 6.5 2-2", key: "vc6u1g" }],
   ["path", { d: "m17.5 15.5 2-2", key: "wo5hmg" }]
 ];
-const Ruler = createLucideIcon("ruler", __iconNode$c);
+const Ruler = createLucideIcon("ruler", __iconNode$d);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$c = [
   [
     "path",
     {
@@ -414,32 +431,45 @@ const __iconNode$b = [
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
 ];
-const Save = createLucideIcon("save", __iconNode$b);
+const Save = createLucideIcon("save", __iconNode$c);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
   ["path", { d: "M8.12 8.12 12 12", key: "1alkpv" }],
   ["path", { d: "M20 4 8.12 15.88", key: "xgtan2" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M14.8 14.8 20 20", key: "ptml3r" }]
 ];
-const Scissors = createLucideIcon("scissors", __iconNode$a);
+const Scissors = createLucideIcon("scissors", __iconNode$b);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$a = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$9);
+const Search = createLucideIcon("search", __iconNode$a);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M8 14s1.5 2 4 2 4-2 4-2", key: "1y1vjs" }],
+  ["line", { x1: "9", x2: "9.01", y1: "9", y2: "9", key: "yxxnd0" }],
+  ["line", { x1: "15", x2: "15.01", y1: "9", y2: "9", key: "1p4y9e" }]
+];
+const Smile = createLucideIcon("smile", __iconNode$9);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -591,6 +621,7 @@ const defaultToolCategories = [
   { id: "image", name: "Image", icon: "Image", description: "Add an image element" },
   { id: "audio", name: "Audio", icon: "Audio", description: "Add an audio element" },
   { id: "text", name: "Text", icon: "Type", description: "Add text elements" },
+  { id: "emoji", name: "Emoji", icon: "Smile", description: "Add emoji stickers" },
   { id: "text-style", name: "Text Style", icon: "Type", description: "Apply text style presets" },
   { id: "effect", name: "Effect", icon: "Wand2", description: "Apply GL video effects" },
   { id: "shape", name: "Shape", icon: "Square", description: "Add lines, arrows, boxes, and circles" },
@@ -610,7 +641,7 @@ const getIcon = (iconName) => {
     case "Square":
       return Square;
     case "Image":
-      return Image;
+      return Image$1;
     case "Video":
       return Video;
     case "Audio":
@@ -625,6 +656,8 @@ const getIcon = (iconName) => {
       return WandSparkles;
     case "File":
       return File;
+    case "Smile":
+      return Smile;
     default:
       return Plus;
   }
@@ -2999,6 +3032,155 @@ function TextPanelContainer(props) {
   const textPanelProps = useTextPanel(props);
   return /* @__PURE__ */ jsxRuntime.jsx(TextPanel, { ...textPanelProps });
 }
+const SUPPORTED_EMOJIS = [
+  { emoji: "😀", category: "Smileys" },
+  { emoji: "😁", category: "Smileys" },
+  { emoji: "😂", category: "Smileys" },
+  { emoji: "🤣", category: "Smileys" },
+  { emoji: "😍", category: "Smileys" },
+  { emoji: "🤩", category: "Smileys" },
+  { emoji: "😎", category: "Smileys" },
+  { emoji: "🥳", category: "Smileys" },
+  { emoji: "🤯", category: "Smileys" },
+  { emoji: "🤔", category: "Smileys" },
+  { emoji: "😅", category: "Smileys" },
+  { emoji: "😮", category: "Smileys" },
+  { emoji: "🥹", category: "Smileys" },
+  { emoji: "🔥", category: "Symbols" },
+  { emoji: "✨", category: "Symbols" },
+  { emoji: "⭐", category: "Symbols" },
+  { emoji: "💥", category: "Symbols" },
+  { emoji: "💯", category: "Symbols" },
+  { emoji: "✅", category: "Symbols" },
+  { emoji: "❌", category: "Symbols" },
+  { emoji: "⚡", category: "Symbols" },
+  { emoji: "❤️", category: "Symbols" },
+  { emoji: "🏆", category: "Objects" },
+  { emoji: "💡", category: "Objects" },
+  { emoji: "📈", category: "Objects" },
+  { emoji: "📣", category: "Objects" },
+  { emoji: "🧠", category: "Objects" },
+  { emoji: "👀", category: "Objects" },
+  { emoji: "🤖", category: "Objects" },
+  { emoji: "👍", category: "Hands" },
+  { emoji: "👏", category: "Hands" },
+  { emoji: "🙌", category: "Hands" },
+  { emoji: "🤝", category: "Hands" },
+  { emoji: "🙏", category: "Hands" },
+  { emoji: "🚀", category: "Media" },
+  { emoji: "🎯", category: "Media" },
+  { emoji: "🎉", category: "Media" },
+  { emoji: "🎬", category: "Media" },
+  { emoji: "🎥", category: "Media" },
+  { emoji: "🎧", category: "Media" }
+];
+const CDN_BASE = "https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72";
+function toCodePointString(emoji) {
+  return Array.from(emoji).map((char) => {
+    var _a;
+    return (_a = char.codePointAt(0)) == null ? void 0 : _a.toString(16);
+  }).filter(Boolean).join("-");
+}
+const EMOJI_CATEGORIES = [
+  "All",
+  "Smileys",
+  "Symbols",
+  "Objects",
+  "Hands",
+  "Media"
+];
+const EMOJI_CATALOG = SUPPORTED_EMOJIS.map(
+  ({ emoji, category }) => ({
+    emoji,
+    category,
+    label: emoji,
+    imageUrl: `${CDN_BASE}/${toCodePointString(emoji)}.png`
+  })
+);
+function EmojiPanel({ items, onItemSelect }) {
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [activeCategory, setActiveCategory] = react.useState("All");
+  const filteredItems = react.useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    return items.filter((item) => {
+      const categoryMatch = activeCategory === "All" ? true : item.category === activeCategory;
+      if (!categoryMatch) return false;
+      if (!query) return true;
+      return item.emoji.includes(query) || item.label.toLowerCase().includes(query) || item.category.toLowerCase().includes(query);
+    });
+  }, [items, searchQuery, activeCategory]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Emoji Stickers" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search emoji...",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        className: "input-dark"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "emoji-categories", children: EMOJI_CATEGORIES.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: `emoji-category-chip ${activeCategory === category ? "emoji-category-chip-active" : ""}`,
+        onClick: () => setActiveCategory(category),
+        children: category
+      },
+      category
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "emoji-grid", children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "emoji-item",
+        title: item.label,
+        onClick: () => onItemSelect(item),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: item.imageUrl,
+            alt: item.label,
+            className: "emoji-item-image",
+            loading: "lazy"
+          }
+        )
+      },
+      `${item.emoji}-${item.imageUrl}`
+    )) }),
+    filteredItems.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state-content", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No emoji found" }) }) })
+  ] });
+}
+function EmojiPanelContainer({ addElement, videoResolution }) {
+  const emojiFallbackFont = "Poppins, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji, sans-serif";
+  const canLoadEmojiImage = async (url) => new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+    };
+    const img = new Image();
+    img.onload = () => done(true);
+    img.onerror = () => done(false);
+    img.src = url;
+    window.setTimeout(() => done(false), 3e3);
+  });
+  const handleSelection = async (item) => {
+    if (!addElement) return;
+    const canUseImage = await canLoadEmojiImage(item.imageUrl);
+    if (canUseImage) {
+      const element = new timeline.EmojiElement(item.emoji, item.imageUrl, videoResolution).setName(`Emoji ${item.emoji}`).setEnd(5);
+      await addElement(element);
+      return;
+    }
+    const fallbackText = new timeline.TextElement(item.emoji).setName(`Emoji ${item.emoji} (fallback)`).setFontFamily(emojiFallbackFont).setFontSize(Math.round(videoResolution.height * 0.12)).setFill("#FFFFFF").setLineWidth(0).setEnd(5);
+    await addElement(fallbackText);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPanel, { items: EMOJI_CATALOG, onItemSelect: handleSelection });
+}
 const TEXT_STYLE_PRESETS = [
   // Utility / captions
   {
@@ -4724,7 +4906,15 @@ function CaptionsPanel({
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "captions-panel-item-header", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "captions-panel-time captions-panel-time-start", children: formatTime(caption.s) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "captions-panel-time captions-panel-time-end", children: formatTime(caption.e) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "captions-panel-time captions-panel-time-end", children: formatTime(caption.e) }),
+              caption.isCustom ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "captions-panel-custom",
+                  title: "This caption overrides track defaults",
+                  children: "Custom"
+                }
+              ) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "captions-panel-item-body", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4893,11 +5083,15 @@ const useCaptionsPanel = () => {
     }
     captionsTrack.current = editorCaptionsTrack;
     setCaptions(
-      editorCaptionsTrack.getElements().map((element) => ({
-        s: element.getStart(),
-        e: element.getEnd(),
-        t: element.getText()
-      }))
+      editorCaptionsTrack.getElements().map((element) => {
+        var _a;
+        return {
+          s: element.getStart(),
+          e: element.getEnd(),
+          t: element.getText(),
+          isCustom: ((_a = element.getProps()) == null ? void 0 : _a.useTrackDefaults) === false
+        };
+      })
     );
   };
   react.useEffect(() => {
@@ -4911,14 +5105,13 @@ const useCaptionsPanel = () => {
         capStyle: timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT,
         ...CAPTION_PROPS[timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT],
         x: 0,
-        y: 200,
-        applyToAll: true
+        y: 200
       };
       (_a = captionsTrack.current) == null ? void 0 : _a.setProps(props);
     }
   };
   const addCaption = () => {
-    const newCaption = { s: 0, e: 0, t: "New Caption" };
+    const newCaption = { s: 0, e: 0, t: "New Caption", isCustom: false };
     if (captions.length > 0) {
       newCaption.s = captions[captions.length - 1].e;
     }
@@ -5811,6 +6004,16 @@ const ElementPanelContainer = ({
             updateElement
           }
         );
+      case "emoji":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EmojiPanelContainer,
+          {
+            selectedElement,
+            videoResolution,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
       case "text-style":
         return /* @__PURE__ */ jsxRuntime.jsx(
           TextStylePanelContainer,
@@ -6496,8 +6699,10 @@ const DEFAULT_COLOR_META = {
 const CAPTION_FONTS = Object.values(VideoEditor.AVAILABLE_TEXT_FONTS);
 function CaptionPropPanel({
   selectedElement,
-  updateElement
+  updateElement,
+  setApplyPropsToAllCaption
 }) {
+  var _a;
   const { editor, changeLog } = timeline.useTimelineContext();
   const captionRef = react.useRef(null);
   const [capStyle, setCapStyle] = react.useState(
@@ -6515,16 +6720,14 @@ function CaptionPropPanel({
   const [useOutline, setUseOutline] = react.useState(true);
   const track = selectedElement instanceof timeline.CaptionElement ? editor.getTrackById(selectedElement.getTrackId()) : null;
   const trackProps = (track == null ? void 0 : track.getProps()) ?? {};
-  const applyToAll = (trackProps == null ? void 0 : trackProps.applyToAll) ?? false;
-  const handleUpdateCaption = (updates) => {
-    const captionElement = selectedElement;
-    if (!captionElement) return;
-    const nextFontSize = updates.fontSize ?? fontSize;
-    const geometry = timeline.computeCaptionGeometry(nextFontSize, updates.style ?? (capStyle == null ? void 0 : capStyle.value) ?? "");
-    const highlightEnabled = updates.useHighlightOverride ?? useHighlight;
-    const outlineEnabled = updates.useOutlineOverride ?? useOutline;
-    const rawNextColors = updates.colors ?? colors;
-    let effectiveColors = { ...rawNextColors };
+  const elementProps = ((_a = selectedElement == null ? void 0 : selectedElement.getProps) == null ? void 0 : _a.call(selectedElement)) ?? {};
+  const useTrackDefaults = (elementProps == null ? void 0 : elementProps.useTrackDefaults) ?? true;
+  const getEffectiveColors = ({
+    nextColors,
+    highlightEnabled,
+    outlineEnabled
+  }) => {
+    let effectiveColors = { ...nextColors };
     if (!highlightEnabled) {
       const { highlight, ...rest } = effectiveColors;
       effectiveColors = rest;
@@ -6533,26 +6736,73 @@ function CaptionPropPanel({
       const { outlineColor, ...rest } = effectiveColors;
       effectiveColors = rest;
     }
-    if (applyToAll && track) {
+    return effectiveColors;
+  };
+  const handleUseTrackDefaultsChange = (enabled) => {
+    const captionElement = selectedElement;
+    if (!captionElement) return;
+    const prev = captionElement.getProps() ?? {};
+    const next = { ...prev, useTrackDefaults: enabled };
+    if (enabled) {
+      const keysToClear = [
+        "capStyle",
+        "x",
+        "y",
+        "width",
+        "maxWidth",
+        "textAlign",
+        "rotation",
+        "opacity",
+        "colors",
+        "font",
+        "lineWidth",
+        "rectProps",
+        "shadowColor",
+        "shadowBlur",
+        "shadowOffset",
+        "fill",
+        "stroke"
+      ];
+      for (const k of keysToClear) {
+        delete next[k];
+      }
+    }
+    captionElement.setProps(next);
+    updateElement == null ? void 0 : updateElement(captionElement);
+    setApplyPropsToAllCaption == null ? void 0 : setApplyPropsToAllCaption(enabled);
+  };
+  const handleUpdateCaption = (updates) => {
+    const captionElement = selectedElement;
+    if (!captionElement) return;
+    const nextFontSize = updates.fontSize ?? fontSize;
+    const geometry = timeline.computeCaptionGeometry(nextFontSize, updates.style ?? (capStyle == null ? void 0 : capStyle.value) ?? "");
+    const highlightEnabled = updates.useHighlightOverride ?? useHighlight;
+    const outlineEnabled = updates.useOutlineOverride ?? useOutline;
+    const rawNextColors = updates.colors ?? colors;
+    const effectiveColors = getEffectiveColors({
+      nextColors: rawNextColors,
+      highlightEnabled,
+      outlineEnabled
+    });
+    if (useTrackDefaults && track) {
       const nextFont = {
         size: nextFontSize,
         family: updates.fontFamily ?? fontFamily
       };
       const nextColors = effectiveColors;
       const nextCapStyle = updates.style ?? (capStyle == null ? void 0 : capStyle.value);
-      track.setProps({
-        ...trackProps,
+      editor.updateTrackProps(track.getId(), {
         capStyle: nextCapStyle,
         font: { ...(trackProps == null ? void 0 : trackProps.font) ?? {}, ...nextFont },
         colors: nextColors,
         lineWidth: geometry.lineWidth,
         rectProps: geometry.rectProps
       });
-      editor.refresh();
     } else {
-      const elementProps = captionElement.getProps() ?? {};
+      const elementProps2 = captionElement.getProps() ?? {};
       captionElement.setProps({
-        ...elementProps,
+        ...elementProps2,
+        useTrackDefaults: false,
         capStyle: updates.style ?? (capStyle == null ? void 0 : capStyle.value),
         font: {
           size: nextFontSize,
@@ -6565,20 +6815,29 @@ function CaptionPropPanel({
     }
   };
   react.useEffect(() => {
-    var _a, _b;
     const captionElement = selectedElement;
     if (captionElement) {
       if (captionRef.current) {
         captionRef.current.value = captionElement == null ? void 0 : captionElement.getText();
       }
-      const props = applyToAll ? trackProps : captionElement.getProps() ?? {};
-      const _capStyle = props == null ? void 0 : props.capStyle;
+      const elementProps2 = captionElement.getProps() ?? {};
+      const elementUseTrackDefaults = (elementProps2 == null ? void 0 : elementProps2.useTrackDefaults) ?? true;
+      const resolvedCapStyle = elementUseTrackDefaults ? trackProps == null ? void 0 : trackProps.capStyle : (elementProps2 == null ? void 0 : elementProps2.capStyle) ?? (trackProps == null ? void 0 : trackProps.capStyle);
+      const resolvedFont = elementUseTrackDefaults ? trackProps == null ? void 0 : trackProps.font : {
+        ...(trackProps == null ? void 0 : trackProps.font) ?? {},
+        ...(elementProps2 == null ? void 0 : elementProps2.font) ?? {}
+      };
+      const resolvedColors = elementUseTrackDefaults ? trackProps == null ? void 0 : trackProps.colors : {
+        ...(trackProps == null ? void 0 : trackProps.colors) ?? {},
+        ...(elementProps2 == null ? void 0 : elementProps2.colors) ?? {}
+      };
+      const _capStyle = resolvedCapStyle;
       if (_capStyle && _capStyle in timeline.CAPTION_STYLE_OPTIONS) {
         setCapStyle(timeline.CAPTION_STYLE_OPTIONS[_capStyle]);
       }
-      setFontSize(((_a = props == null ? void 0 : props.font) == null ? void 0 : _a.size) ?? CAPTION_FONT.size);
-      setFontFamily(((_b = props == null ? void 0 : props.font) == null ? void 0 : _b.family) ?? CAPTION_FONT.family);
-      const c = props == null ? void 0 : props.colors;
+      setFontSize((resolvedFont == null ? void 0 : resolvedFont.size) ?? CAPTION_FONT.size);
+      setFontFamily((resolvedFont == null ? void 0 : resolvedFont.family) ?? CAPTION_FONT.family);
+      const c = resolvedColors;
       setColors({
         text: (c == null ? void 0 : c.text) ?? CAPTION_COLOR.text,
         highlight: (c == null ? void 0 : c.highlight) ?? CAPTION_COLOR.highlight,
@@ -6588,7 +6847,7 @@ function CaptionPropPanel({
       setUseHighlight((c == null ? void 0 : c.highlight) != null);
       setUseOutline((c == null ? void 0 : c.outlineColor) != null);
     }
-  }, [selectedElement, applyToAll, changeLog]);
+  }, [selectedElement, track, changeLog]);
   if (!(selectedElement instanceof timeline.CaptionElement)) {
     return null;
   }
@@ -6642,6 +6901,18 @@ function CaptionPropPanel({
     ] }, key);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "checkbox-label", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: useTrackDefaults,
+          onChange: (e) => handleUseTrackDefaultsChange(e.target.checked),
+          className: "checkbox-purple"
+        }
+      ),
+      "Use track defaults"
+    ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Caption Style" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -6845,92 +7116,82 @@ function PlaybackPropsPanel({
     )
   ] });
 }
-const hasAudio = async (src) => {
-  if (!src) return false;
-  const isSafeUrl = /^(https?:|blob:|data:)/i.test(src);
-  if (!isSafeUrl) return false;
-  try {
-    const audioBuffer = await fetchAndDecodeAudio(src);
-    if (audioBuffer.duration === 0 || audioBuffer.length === 0) {
-      return false;
-    }
-    if (isAudioSilent(audioBuffer)) {
-      return false;
-    }
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
-const fetchAndDecodeAudio = async (src) => {
-  const response = await fetch(src);
-  if (!response.ok) throw new Error(`Failed to fetch source: ${response.status}`);
-  const arrayBuffer = await response.arrayBuffer();
-  return decodeAudioData(arrayBuffer);
+const NONE_VALUE = "none";
+const FILTER_LABELS = {
+  [NONE_VALUE]: "None",
+  [mediaUtils.COLOR_FILTERS.SATURATED]: "Saturated",
+  [mediaUtils.COLOR_FILTERS.BRIGHT]: "Bright",
+  [mediaUtils.COLOR_FILTERS.VIBRANT]: "Vibrant",
+  [mediaUtils.COLOR_FILTERS.RETRO]: "Retro",
+  [mediaUtils.COLOR_FILTERS.BLACK_WHITE]: "Black & white",
+  [mediaUtils.COLOR_FILTERS.SEPIA]: "Sepia",
+  [mediaUtils.COLOR_FILTERS.COOL]: "Cool",
+  [mediaUtils.COLOR_FILTERS.WARM]: "Warm",
+  [mediaUtils.COLOR_FILTERS.CINEMATIC]: "Cinematic",
+  [mediaUtils.COLOR_FILTERS.SOFT_GLOW]: "Soft glow",
+  [mediaUtils.COLOR_FILTERS.MOODY]: "Moody",
+  [mediaUtils.COLOR_FILTERS.DREAMY]: "Dreamy",
+  [mediaUtils.COLOR_FILTERS.INVERTED]: "Inverted",
+  [mediaUtils.COLOR_FILTERS.VINTAGE]: "Vintage",
+  [mediaUtils.COLOR_FILTERS.DRAMATIC]: "Dramatic",
+  [mediaUtils.COLOR_FILTERS.FADED]: "Faded"
 };
-const decodeAudioData = async (arrayBuffer) => {
-  const AudioContextCtor = window.AudioContext || window.webkitAudioContext;
-  if (!AudioContextCtor) throw new Error("Web Audio API not supported");
-  const audioContext = new AudioContextCtor();
-  try {
-    return await new Promise((resolve, reject) => {
-      audioContext.decodeAudioData(
-        arrayBuffer.slice(0),
-        (buf) => resolve(buf),
-        (err) => reject(err || new Error("Failed to decode audio: no audio track found or unsupported format"))
-      );
-    });
-  } finally {
-    audioContext.close();
+function isMediaFilterElement(el) {
+  return el instanceof timeline.VideoElement || el instanceof timeline.ImageElement;
+}
+function ColorFilterPropsPanel({
+  selectedElement,
+  updateElement
+}) {
+  const mediaEl = isMediaFilterElement(selectedElement) ? selectedElement : null;
+  const options = react.useMemo(() => {
+    const entries = Object.values(mediaUtils.COLOR_FILTERS).map(
+      (value) => ({
+        value,
+        label: FILTER_LABELS[value] ?? value
+      })
+    );
+    return [{ value: NONE_VALUE, label: FILTER_LABELS[NONE_VALUE] }, ...entries];
+  }, []);
+  const elementProps = (mediaEl == null ? void 0 : mediaEl.getProps()) ?? {};
+  const mediaFilter = elementProps.mediaFilter ?? NONE_VALUE;
+  const handleFilterChange = (value) => {
+    if (!mediaEl || !updateElement) return;
+    const allowed = Object.values(mediaUtils.COLOR_FILTERS);
+    const next = value === NONE_VALUE ? NONE_VALUE : allowed.includes(value) ? value : NONE_VALUE;
+    updateElement(
+      mediaEl.setProps({
+        ...elementProps,
+        mediaFilter: next
+      })
+    );
+  };
+  const [isOpen, setIsOpen] = react.useState(false);
+  if (!mediaEl) {
+    return null;
   }
-};
-const isAudioSilent = (buffer, threshold = 1e-3) => {
-  for (let channel = 0; channel < buffer.numberOfChannels; channel++) {
-    const channelData = buffer.getChannelData(channel);
-    for (let i = 0; i < channelData.length; i += 100) {
-      if (Math.abs(channelData[i]) > threshold) {
-        return false;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Look" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionItem,
+      {
+        title: "Color filter",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Funnel, { className: "icon-sm" }),
+        isOpen,
+        onToggle: () => setIsOpen((open) => !open),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "properties-group", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "property-section", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { label: "Preset", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: options.some((o) => o.value === mediaFilter) ? mediaFilter : NONE_VALUE,
+            onChange: (e) => handleFilterChange(e.target.value),
+            className: "select-dark w-full",
+            children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        ) }) }) })
       }
-    }
-  }
-  return true;
-};
-const loadFile = (accept) => {
-  return new Promise((resolve, reject) => {
-    try {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = accept;
-      input.style.display = "none";
-      document.body.appendChild(input);
-      const cleanup = () => {
-        input.value = "";
-        document.body.removeChild(input);
-      };
-      input.onchange = () => {
-        const file = input.files && input.files[0];
-        cleanup();
-        if (!file) {
-          reject(new Error("No file selected"));
-          return;
-        }
-        resolve(file);
-      };
-      input.click();
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
-const saveAsFile = (content, type, name) => {
-  const blob = typeof content === "string" ? new Blob([content], { type }) : content;
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = name;
-  a.click();
-  URL.revokeObjectURL(url);
-};
+    )
+  ] });
+}
 function GenerateCaptionsPanel({
   selectedElement,
   addCaptionsToTimeline,
@@ -6944,7 +7205,7 @@ function GenerateCaptionsPanel({
   const [pollingStatus, setPollingStatus] = react.useState("idle");
   const [errorMessage, setErrorMessage] = react.useState(null);
   const [selectedLanguage, setSelectedLanguage] = react.useState("auto");
-  const [wordsPerPhrase, setWordsPerPhrase] = react.useState(4);
+  const [phraseLength, setPhraseLength] = react.useState("medium");
   const pollingIntervalRef = react.useRef(null);
   const currentReqIdRef = react.useRef(null);
   react.useEffect(() => {
@@ -7009,7 +7270,7 @@ function GenerateCaptionsPanel({
       const reqId = await onGenerateCaptions(
         videoElement,
         language,
-        wordsPerPhrase
+        phraseLength
       );
       if (!reqId) {
         setPollingStatus("error");
@@ -7034,7 +7295,7 @@ function GenerateCaptionsPanel({
       const videoUrl = videoElement.getSrc();
       if (videoUrl) {
         try {
-          const hasAudioTrack = await hasAudio(videoUrl);
+          const hasAudioTrack = await mediaUtils.hasAudio(videoUrl);
           setContainsAudio(hasAudioTrack);
         } catch (error) {
           console.error("Error checking audio:", error);
@@ -7094,18 +7355,19 @@ function GenerateCaptionsPanel({
       )
     ] }),
     !isLoading && containsAudio === true && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", htmlFor: "caption-words-per-phrase", children: "Words per phrase" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", htmlFor: "caption-phrase-length", children: "Caption length" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
-          id: "caption-words-per-phrase",
+          id: "caption-phrase-length",
           className: "select-dark",
-          value: String(wordsPerPhrase),
-          onChange: (e) => setWordsPerPhrase(Number(e.target.value) || 4),
-          children: Array.from({ length: 10 }).map((_, index) => {
-            const value = index + 1;
-            return /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: value }, value);
-          })
+          value: phraseLength,
+          onChange: (e) => setPhraseLength(e.target.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "short", children: "Short" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "medium", children: "Medium" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "long", children: "Long" })
+          ]
         }
       )
     ] }),
@@ -7502,6 +7764,7 @@ function PropertiesPanelContainer({
       selectedElement && !(selectedElement instanceof timeline.CaptionElement) && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
         const isText = selectedElement instanceof timeline.TextElement;
         const isVideo = selectedElement instanceof timeline.VideoElement;
+        const isImage = selectedElement instanceof timeline.ImageElement;
         const isAudio = selectedElement instanceof timeline.AudioElement;
         const isAnnotation = selectedElement instanceof timeline.ArrowElement || selectedElement instanceof timeline.LineElement || selectedElement instanceof timeline.RectElement || selectedElement instanceof timeline.CircleElement;
         return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -7533,6 +7796,13 @@ function PropertiesPanelContainer({
               updateElement
             }
           ),
+          (isVideo || isImage) && /* @__PURE__ */ jsxRuntime.jsx(
+            ColorFilterPropsPanel,
+            {
+              selectedElement,
+              updateElement
+            }
+          ),
           isText && /* @__PURE__ */ jsxRuntime.jsx(
             TextEffects,
             {
@@ -7580,7 +7850,7 @@ const useStudioOperation = (studioConfig) => {
     if (studioConfig == null ? void 0 : studioConfig.loadProject) {
       project = await studioConfig.loadProject();
     } else {
-      const file = await loadFile("application/json");
+      const file = await mediaUtils.loadFile("application/json");
       const text = await file.text();
       setProjectName(file.name);
       project = JSON.parse(text);
@@ -7600,7 +7870,7 @@ const useStudioOperation = (studioConfig) => {
     if ((studioConfig == null ? void 0 : studioConfig.saveProject) && present) {
       await studioConfig.saveProject(present, fileName);
     } else {
-      const file = await saveAsFile(
+      const file = await mediaUtils.saveAsFile(
         JSON.stringify(present),
         "application/json",
         fileName
@@ -7630,19 +7900,19 @@ const useStudioOperation = (studioConfig) => {
     const languages = timeline.getCaptionLanguages(present);
     if (languages.length <= 1) {
       const content = format === "srt" ? timeline.exportCaptionsAsSRT(present, languages[0]) : timeline.exportCaptionsAsVTT(present, languages[0]);
-      await saveAsFile(content, "text/plain", `${baseName}.${format}`);
+      await mediaUtils.saveAsFile(content, "text/plain", `${baseName}.${format}`);
       return;
     }
     for (const language of languages) {
       const content = format === "srt" ? timeline.exportCaptionsAsSRT(present, language) : timeline.exportCaptionsAsVTT(present, language);
-      await saveAsFile(content, "text/plain", `${baseName}.${language}.${format}`);
+      await mediaUtils.saveAsFile(content, "text/plain", `${baseName}.${language}.${format}`);
     }
   };
   const onExportChapters = async (format) => {
     if (!present) return;
     const content = format === "youtube" ? timeline.exportChaptersAsYouTube(present) : timeline.exportChaptersAsJSON(present);
     const fileName = `${(projectName || "chapters").replace(/\.json$/i, "")}.${format === "youtube" ? "txt" : "json"}`;
-    await saveAsFile(content, "text/plain", fileName);
+    await mediaUtils.saveAsFile(content, "text/plain", fileName);
   };
   const addCaptionsToTimeline = (captions) => {
     var _a;
@@ -7776,14 +8046,14 @@ function TwickStudio({ studioConfig }) {
 const useGenerateCaptions = (studioConfig) => {
   var _a;
   const { editor, present } = timeline.useTimelineContext();
-  const onGenerateCaptions = async (videoElement, language, wordsPerPhrase) => {
+  const onGenerateCaptions = async (videoElement, language, phraseLength) => {
     if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
       const service = studioConfig.captionGenerationService;
       const reqId = await service.generateCaptions(
         videoElement,
         present,
         language,
-        wordsPerPhrase
+        phraseLength
       );
       return reqId;
     }
@@ -8147,6 +8417,10 @@ Object.defineProperty(exports, "ElementValidator", {
   enumerable: true,
   get: () => timeline.ElementValidator
 });
+Object.defineProperty(exports, "EmojiElement", {
+  enumerable: true,
+  get: () => timeline.EmojiElement
+});
 Object.defineProperty(exports, "INITIAL_TIMELINE_DATA", {
   enumerable: true,
   get: () => timeline.INITIAL_TIMELINE_DATA
@@ -8311,6 +8585,7 @@ exports.DEFAULT_PROJECT_TEMPLATES = DEFAULT_PROJECT_TEMPLATES;
 exports.DEFAULT_STUDIO_CONFIG = DEFAULT_STUDIO_CONFIG;
 exports.DEMO_STUDIO_CONFIG = DEMO_STUDIO_CONFIG;
 exports.EDU_STUDIO_CONFIG = EDU_STUDIO_CONFIG;
+exports.EmojiPanel = EmojiPanel;
 exports.ImagePanel = ImagePanel;
 exports.MARKETING_STUDIO_CONFIG = MARKETING_STUDIO_CONFIG;
 exports.RecordPanel = RecordPanel;