@twick/studio 0.14.5

package/dist/index.mjs

@@ -0,0 +1,3254 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, createElement, useState, useEffect, useRef, createContext, useContext, useCallback, useMemo } from "react";
+import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, IconElement, RectElement, CircleElement, CaptionElement, ElementTextEffect, ElementAnimation } from "@twick/timeline";
+import VideoEditor, { BrowserMediaManager, AVAILABLE_TEXT_FONTS, TEXT_EFFECTS, ANIMATIONS } from "@twick/video-editor";
+/**
+ * @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 toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+/**
+ * @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.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @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 Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+/**
+ * @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 createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+/**
+ * @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 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$n = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("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$m = [
+  [
+    "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" }
+  ],
+  ["path", { d: "m6.2 5.3 3.1 3.9", key: "iuk76l" }],
+  ["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$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$l = [
+  ["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$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$k = [
+  ["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$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$j = [
+  ["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$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$i = [
+  ["path", { d: "M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8", key: "18ogeb" }]
+];
+const Infinity = createLucideIcon("infinity", __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$h = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __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$g = [
+  ["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$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$f = [
+  ["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$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$e = [
+  ["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$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$d = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __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$c = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __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$b = [
+  [
+    "path",
+    {
+      d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
+      key: "1c8476"
+    }
+  ],
+  ["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);
+/**
+ * @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 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+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 = [
+  [
+    "path",
+    {
+      d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
+      key: "1qme2f"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Settings = createLucideIcon("settings", __iconNode$9);
+/**
+ * @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$8 = [
+  [
+    "path",
+    {
+      d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z",
+      key: "4pj2yx"
+    }
+  ],
+  ["path", { d: "M20 3v4", key: "1olli1" }],
+  ["path", { d: "M22 5h-4", key: "1gvqau" }],
+  ["path", { d: "M4 17v2", key: "vumght" }],
+  ["path", { d: "M5 18H3", key: "zchphs" }]
+];
+const Sparkles = createLucideIcon("sparkles", __iconNode$8);
+/**
+ * @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$7 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
+];
+const Square = createLucideIcon("square", __iconNode$7);
+/**
+ * @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$6 = [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
+  ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
+];
+const Trash2 = createLucideIcon("trash-2", __iconNode$6);
+/**
+ * @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$5 = [
+  ["path", { d: "M12 4v16", key: "1654pz" }],
+  ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
+  ["path", { d: "M9 20h6", key: "s66wpe" }]
+];
+const Type = createLucideIcon("type", __iconNode$5);
+/**
+ * @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$4 = [
+  ["path", { d: "M12 3v12", key: "1x0j5s" }],
+  ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
+];
+const Upload = createLucideIcon("upload", __iconNode$4);
+/**
+ * @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$3 = [
+  [
+    "path",
+    {
+      d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",
+      key: "ftymec"
+    }
+  ],
+  ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
+];
+const Video = createLucideIcon("video", __iconNode$3);
+/**
+ * @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$2 = [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
+  ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
+];
+const Volume2 = createLucideIcon("volume-2", __iconNode$2);
+/**
+ * @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$1 = [
+  [
+    "path",
+    {
+      d: "m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72",
+      key: "ul74o6"
+    }
+  ],
+  ["path", { d: "m14 7 3 3", key: "1r5n42" }],
+  ["path", { d: "M5 6v4", key: "ilb8ba" }],
+  ["path", { d: "M19 14v4", key: "blhpug" }],
+  ["path", { d: "M10 2v2", key: "7u0qdc" }],
+  ["path", { d: "M7 8H3", key: "zfb6yr" }],
+  ["path", { d: "M21 16h-4", key: "1cnmox" }],
+  ["path", { d: "M11 3H9", key: "1obp7u" }]
+];
+const WandSparkles = createLucideIcon("wand-sparkles", __iconNode$1);
+/**
+ * @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 = [
+  [
+    "path",
+    {
+      d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+      key: "1xq2db"
+    }
+  ]
+];
+const Zap = createLucideIcon("zap", __iconNode);
+const toolCategories = [
+  { id: "video", name: "Video", icon: "Video", description: "Video" },
+  { id: "image", name: "Image", icon: "Image", description: "Image" },
+  { id: "audio", name: "Audio", icon: "Audio", description: "Audio" },
+  { id: "text", name: "Text", icon: "Type", description: "Add text elements", shortcut: "T" },
+  { id: "icon", name: "Icons", icon: "Icon", description: "Icon Element", shortcut: "I" },
+  { id: "circle", name: "Circle", icon: "Circle", description: "Circle Element", shortcut: "C" },
+  { id: "rect", name: "Rect", icon: "Rect", description: "Rect Element" }
+  // { id: 'subtitle', name: 'Subtitles', icon: 'MessageSquare', description: 'Manage subtitles', shortcut: 'S' },
+];
+const getIcon$1 = (iconName) => {
+  switch (iconName) {
+    case "Plus":
+      return Plus;
+    case "Type":
+      return Type;
+    case "Icon":
+      return Infinity;
+    case "Upload":
+      return Upload;
+    case "Square":
+      return Square;
+    case "Image":
+      return Image;
+    case "Video":
+      return Video;
+    case "Audio":
+      return Music;
+    case "Circle":
+      return Circle;
+    case "Rect":
+      return Square;
+    case "MessageSquare":
+      return MessageSquare;
+    default:
+      return Plus;
+  }
+};
+function Toolbar({ selectedTool, setSelectedTool }) {
+  const handleToolSelect = (toolId) => {
+    setSelectedTool(toolId);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-16 bg-neutral/80 border-r border-gray-300/50 flex flex-col items-center py-4 space-y-3 justify-start backdrop-blur-md shadow-lg", children: toolCategories.map((tool) => {
+    const Icon2 = getIcon$1(tool.icon);
+    const isSelected = selectedTool === tool.id;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => handleToolSelect(tool.id),
+        className: `
+              toolbar-btn group ${isSelected ? "active" : ""}
+            `,
+        title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] mt-1 transition-opacity duration-200", children: tool.name })
+        ]
+      },
+      tool.id
+    );
+  }) });
+}
+const StudioHeader = ({
+  setVideoResolution,
+  onLoadProject,
+  onSaveProject,
+  onExportVideo
+}) => {
+  const [orientation, setOrientation] = useState(
+    "vertical"
+  );
+  useEffect(() => {
+    const orientation2 = localStorage.getItem("orientation");
+    if (orientation2) {
+      setOrientation(orientation2);
+    }
+  }, []);
+  useEffect(() => {
+    if (orientation === "horizontal") {
+      localStorage.setItem("orientation", "horizontal");
+      setVideoResolution({ width: 1280, height: 720 });
+    } else {
+      localStorage.setItem("orientation", "vertical");
+      setVideoResolution({ width: 720, height: 1280 });
+    }
+  }, [orientation]);
+  return /* @__PURE__ */ jsxs("header", { className: "h-14 bg-neutral-800/90 border-b border-gray-600/50 flex items-center justify-between px-4 backdrop-blur-md shadow-lg", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Clapperboard, { className: "w-8 h-8 text-purple-400" }),
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold text-gradient-purple", children: "Twick Studio" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "btn btn-ghost w-32",
+          title: "Load Project",
+          onClick: onLoadProject,
+          children: [
+            /* @__PURE__ */ jsx(File, { className: "w-4 h-4 mr-2" }),
+            "Load Project"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "btn btn-ghost w-32",
+          title: "Save Draft",
+          onClick: onSaveProject,
+          children: [
+            /* @__PURE__ */ jsx(Save, { className: "w-4 h-4 mr-2" }),
+            "Save Draft"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "btn btn-primary w-32",
+          title: "Export",
+          onClick: onExportVideo,
+          children: [
+            /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-2" }),
+            "Export"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const useStudioManager = () => {
+  const [selectedProp, setSelectedProp] = useState("element-props");
+  const { editor, selectedItem, setSelectedItem } = useTimelineContext();
+  const selectedElement = selectedItem instanceof TrackElement ? selectedItem : null;
+  const [selectedTool, setSelectedTool] = useState("none");
+  const isToolChanged = useRef(false);
+  const addElement = (element) => {
+    if (selectedItem instanceof Track) {
+      editor.addElementToTrack(selectedItem, element);
+    } else {
+      const newTrack = editor.addTrack("Track");
+      editor.addElementToTrack(newTrack, element);
+    }
+  };
+  const updateElement = (element) => {
+    const updatedElement = editor.updateElement(element);
+    editor.refresh();
+    setSelectedItem(updatedElement);
+  };
+  useEffect(() => {
+    if (selectedItem instanceof TrackElement) {
+      setSelectedTool(selectedItem.getType());
+      isToolChanged.current = true;
+    } else if (selectedItem instanceof Track) ;
+    else {
+      if (isToolChanged.current) {
+        setSelectedTool("none");
+      } else {
+        setSelectedTool("video");
+      }
+    }
+  }, [selectedItem]);
+  return {
+    selectedProp,
+    setSelectedProp,
+    selectedTool,
+    setSelectedTool,
+    selectedElement,
+    addElement,
+    updateElement
+  };
+};
+function SubtitlesPanel() {
+  const [subtitles, setSubtitles] = useState([]);
+  const handleGenerate = () => {
+    console.log("Generating subtitles...");
+  };
+  const handleAdd = () => {
+    const newId = (subtitles.length + 1).toString();
+    const lastEnd = subtitles.length > 0 ? subtitles[subtitles.length - 1].end : 0;
+    const newSubtitle = {
+      id: newId,
+      start: lastEnd,
+      end: lastEnd + 1,
+      text: ""
+    };
+    setSubtitles([...subtitles, newSubtitle]);
+  };
+  const handleDelete = (id) => {
+    setSubtitles(subtitles.filter((sub) => sub.id !== id));
+  };
+  const handleSave = (id) => {
+    console.log("Saving subtitle:", id);
+  };
+  const handleUpdateSubtitle = (id, field, value) => {
+    setSubtitles(subtitles.map(
+      (sub) => sub.id === id ? { ...sub, [field]: value } : sub
+    ));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-72 h-full bg-neutral-800/80 border-l border-gray-600/50 p-3 overflow-y-auto overflow-x-hidden backdrop-blur-md shadow-lg", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-white mb-6", children: "Subtitles" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mb-6", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleGenerate,
+          className: "flex-1 bg-neutral-700 hover:bg-neutral-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/20",
+          children: "Generate"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleAdd,
+          className: "flex-1 bg-neutral-700 hover:bg-neutral-600 text-white font-medium py-2 px-4 rounded-lg border-2 border-purple-500 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/20",
+          children: "Add"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: subtitles.map((subtitle) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-neutral-700/50 border border-gray-600 rounded-lg p-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Start" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  min: "0",
+                  step: "0.1",
+                  value: subtitle.start,
+                  onChange: (e) => handleUpdateSubtitle(subtitle.id, "start", Number(e.target.value)),
+                  className: "w-full bg-neutral-800/80 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "End" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  min: "0",
+                  step: "0.1",
+                  value: subtitle.end,
+                  onChange: (e) => handleUpdateSubtitle(subtitle.id, "end", Number(e.target.value)),
+                  className: "w-full bg-neutral-800/80 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "subtitle",
+              value: subtitle.text,
+              onChange: (e) => handleUpdateSubtitle(subtitle.id, "text", e.target.value),
+              className: "w-full bg-neutral-800/80 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 placeholder-gray-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleDelete(subtitle.id),
+                className: "p-2 text-red-400 hover:text-red-300 hover:bg-red-500/20 rounded-lg transition-all duration-200",
+                title: "Delete subtitle",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSave(subtitle.id),
+                className: "p-2 text-green-400 hover:text-green-300 hover:bg-green-500/20 rounded-lg transition-all duration-200",
+                title: "Save subtitle",
+                children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
+              }
+            )
+          ] })
+        ]
+      },
+      subtitle.id
+    )) }),
+    subtitles.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-gray-400", children: [
+      /* @__PURE__ */ jsx("p", { children: "No subtitles yet" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: 'Click "Add" to create your first subtitle' })
+    ] })
+  ] });
+}
+const FileInput = ({
+  acceptFileTypes,
+  onFileLoad,
+  buttonText,
+  id
+}) => {
+  const onFileChange = (e) => {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        var _a2;
+        try {
+          onFileLoad({
+            content: file.type === "application/json" ? (_a2 = event.target) == null ? void 0 : _a2.result : void 0,
+            type: file.type,
+            name: file.name,
+            file,
+            blobUrl: URL.createObjectURL(file)
+          });
+        } catch (error) {
+          console.error("Error parsing file:", error);
+        }
+      };
+      console.log("file", file);
+      if (file.type === "application/json") {
+        reader.readAsText(file);
+      } else {
+        reader.readAsDataURL(file);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        accept: acceptFileTypes.join(","),
+        className: "absolute w-0.1 h-0.1 opacity-0 overflow-hidden -z-10",
+        id,
+        onChange: onFileChange
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: "w-full btn btn-primary flex items-center justify-center gap-2 py-2",
+        children: [
+          /* @__PURE__ */ jsx(Upload, { className: "w-4 h-4" }),
+          buttonText ?? "Upload"
+        ]
+      }
+    )
+  ] });
+};
+const _MediaManagerSingleton = class _MediaManagerSingleton {
+  constructor() {
+  }
+  static getInstance() {
+    if (!_MediaManagerSingleton.instance) {
+      _MediaManagerSingleton.instance = new BrowserMediaManager();
+    }
+    return _MediaManagerSingleton.instance;
+  }
+};
+__publicField(_MediaManagerSingleton, "instance", null);
+let MediaManagerSingleton = _MediaManagerSingleton;
+const getMediaManager = () => MediaManagerSingleton.getInstance();
+const initialMediaState = {
+  items: [],
+  searchQuery: "",
+  isLoading: false
+};
+const MediaContext = createContext(null);
+function MediaProvider({ children }) {
+  const [videoState, setVideoState] = useState(initialMediaState);
+  const [audioState, setAudioState] = useState(initialMediaState);
+  const [imageState, setImageState] = useState(initialMediaState);
+  const mediaManager = getMediaManager();
+  const getStateAndSetter = (type) => {
+    switch (type) {
+      case "video":
+        return [videoState, setVideoState];
+      case "audio":
+        return [audioState, setAudioState];
+      case "image":
+        return [imageState, setImageState];
+    }
+  };
+  const loadItems = async (type, query) => {
+    const [state, setState] = getStateAndSetter(type);
+    setState({ ...state, isLoading: true });
+    try {
+      const results = await mediaManager.search({
+        query,
+        type
+      });
+      setState({
+        items: results,
+        searchQuery: query,
+        isLoading: false
+      });
+    } catch (error) {
+      console.error(`Error loading ${type} items:`, error);
+      setState({
+        ...state,
+        isLoading: false
+      });
+    }
+  };
+  useEffect(() => {
+    loadItems("video", "");
+    loadItems("audio", "");
+    loadItems("image", "");
+  }, []);
+  const setSearchQuery = (type, query) => {
+    const [state, setState] = getStateAndSetter(type);
+    setState({ ...state, searchQuery: query });
+    loadItems(type, query);
+  };
+  const addItem = (type, newItem) => {
+    const [state, setState] = getStateAndSetter(type);
+    setState({
+      ...state,
+      items: [...state.items, newItem]
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    MediaContext.Provider,
+    {
+      value: {
+        videoState,
+        audioState,
+        imageState,
+        setSearchQuery,
+        addItem
+      },
+      children
+    }
+  );
+}
+function useMedia(type) {
+  const context = useContext(MediaContext);
+  if (!context) {
+    throw new Error("useMedia must be used within a MediaProvider");
+  }
+  const state = context[`${type}State`];
+  return {
+    items: state.items,
+    searchQuery: state.searchQuery,
+    isLoading: state.isLoading,
+    setSearchQuery: (query) => context.setSearchQuery(type, query),
+    addItem: (item) => context.addItem(type, item)
+  };
+}
+const mediaConfigs = {
+  video: {
+    acceptFileTypes: ["video/*"],
+    createElement: (url, parentSize) => new VideoElement(url, parentSize),
+    updateElement: async (element, url) => {
+      if (element instanceof VideoElement) {
+        element.setSrc(url);
+        await element.updateVideoMeta();
+      }
+    }
+  },
+  audio: {
+    acceptFileTypes: ["audio/*"],
+    createElement: (url, _parentSize) => new AudioElement(url),
+    updateElement: async (element, url) => {
+      if (element instanceof AudioElement) {
+        element.setSrc(url);
+        await element.updateAudioMeta();
+      }
+    }
+  },
+  image: {
+    acceptFileTypes: ["image/*"],
+    createElement: (url, parentSize) => new ImageElement(url, parentSize),
+    updateElement: async (element, url) => {
+      if (element instanceof ImageElement) {
+        element.setSrc(url);
+        await element.updateImageMeta();
+      }
+    }
+  }
+};
+const useMediaPanel = (type, {
+  selectedElement,
+  addElement,
+  updateElement
+}, videoResolution) => {
+  const { items, searchQuery, setSearchQuery, addItem, isLoading } = useMedia(type);
+  const mediaManager = getMediaManager();
+  const handleSelection = async (item, forceAdd) => {
+    const config2 = mediaConfigs[type];
+    if (forceAdd) {
+      const element = config2.createElement(item.url, videoResolution);
+      addElement(element);
+    } else {
+      if (selectedElement) {
+        await config2.updateElement(selectedElement, item.url);
+        updateElement(selectedElement);
+      } else {
+        const element = config2.createElement(item.url, videoResolution);
+        addElement(element);
+      }
+    }
+  };
+  const handleFileUpload = async (fileData) => {
+    const arrayBuffer = await fileData.file.arrayBuffer();
+    const newItem = await mediaManager.addItem({
+      name: fileData.file.name,
+      url: fileData.blobUrl,
+      type,
+      arrayBuffer,
+      metadata: {
+        name: fileData.file.name,
+        size: fileData.file.size,
+        type: fileData.file.type
+      }
+    });
+    addItem(newItem);
+  };
+  const config = mediaConfigs[type];
+  return {
+    items,
+    searchQuery,
+    setSearchQuery,
+    handleSelection,
+    handleFileUpload,
+    isLoading,
+    acceptFileTypes: config.acceptFileTypes
+  };
+};
+const SearchInput = ({
+  searchQuery,
+  setSearchQuery
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search media...",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        className: "w-full pl-8 pr-3 py-2 bg-neutral-700/80 border border-gray-600 rounded-lg text-gray-100 text-sm placeholder-gray-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm shadow-sm"
+      }
+    ),
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 hover:text-gray-300 z-10 pointer-events-none" })
+  ] });
+};
+const inputStyles = {
+  // Base container styles for form groups
+  container: "mb-6",
+  // Label styles
+  label: {
+    base: "block text-sm font-semibold text-gray-300 mb-2",
+    small: "block text-xs text-gray-400 mb-1"
+  },
+  // Text input and select styles
+  input: {
+    base: "w-full bg-neutral-700/50 border border-gray-600 rounded-lg text-white text-sm px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm",
+    small: "bg-neutral-700/50 border border-gray-600 rounded-lg text-white text-xs px-2 py-1 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-200 backdrop-blur-sm"
+  },
+  // Range input styles
+  range: {
+    base: "flex-1 h-2 bg-neutral-600 rounded-full appearance-none cursor-pointer slider-thumb",
+    gradient: "flex-1 h-2 bg-gradient-to-r from-purple-500 to-neutral-600 rounded-full appearance-none cursor-pointer slider-thumb",
+    container: "flex items-center gap-3",
+    value: "text-white text-sm font-medium min-w-[50px]"
+  },
+  // Color input styles
+  color: {
+    container: "flex items-center gap-2",
+    picker: "w-6 h-6 rounded border border-gray-600 cursor-pointer",
+    preview: "flex-1 h-8 rounded-lg border border-gray-600"
+  },
+  // Toggle button styles
+  toggle: {
+    base: "w-10 h-10 rounded-lg border-2 transition-all duration-200 hover:bg-purple-400 hover:text-white",
+    active: "bg-purple-600 border-purple-500 text-white",
+    inactive: "bg-transparent border-gray-600 text-gray-400 hover:border-gray-500"
+  },
+  // Radio button styles
+  radio: {
+    base: "w-4 h-4 text-purple-600 bg-neutral-700 border-gray-600 focus:ring-purple-500 focus:ring-2",
+    label: "text-sm text-gray-300",
+    container: "flex items-center gap-2"
+  },
+  // Action button styles
+  button: {
+    primary: "w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/20"
+  },
+  // Panel container styles
+  panel: {
+    container: "w-72 h-full bg-neutral-800/80 border-l border-gray-600/50 p-4 overflow-y-auto overflow-x-hidden backdrop-blur-md shadow-lg",
+    title: "text-xl font-bold text-white mb-6"
+  }
+};
+const useAudioPreview = () => {
+  const [playingAudio, setPlayingAudio] = useState(null);
+  const audioRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+    };
+  }, []);
+  const stopPlayback = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setPlayingAudio(null);
+  }, []);
+  const togglePlayPause = useCallback((item) => {
+    if (playingAudio === item.id) {
+      stopPlayback();
+      return;
+    }
+    stopPlayback();
+    const audio = new Audio(item.url);
+    audio.addEventListener("ended", stopPlayback);
+    audio.play();
+    audioRef.current = audio;
+    setPlayingAudio(item.id);
+  }, [playingAudio, stopPlayback]);
+  return {
+    playingAudio,
+    audioElement: audioRef.current,
+    togglePlayPause,
+    stopPlayback
+  };
+};
+const AudioPanel = ({
+  items,
+  searchQuery,
+  onSearchChange,
+  onItemSelect,
+  onFileUpload,
+  acceptFileTypes
+}) => {
+  const { playingAudio, togglePlayPause } = useAudioPreview();
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Audio Library" }),
+    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        searchQuery,
+        setSearchQuery: onSearchChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        id: "audio-upload",
+        acceptFileTypes,
+        onFileLoad: onFileUpload,
+        buttonText: "Upload"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (items || []).map((item) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            onDoubleClick: () => onItemSelect(item),
+            className: "audio-item group relative cursor-pointer p-3 bg-neutral-700/50 rounded-lg hover:bg-neutral-700/80 transition-all duration-200 border border-transparent hover:border-purple-500/30",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    togglePlayPause(item);
+                  },
+                  className: "w-8 h-8 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white transition-all duration-200 flex-shrink-0",
+                  children: playingAudio === item.id ? /* @__PURE__ */ jsx(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Play, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: `w-10 h-10 rounded-lg ${playingAudio === item.id ? "bg-purple-500/40" : "bg-purple-500/20"} flex items-center justify-center flex-shrink-0 transition-colors duration-200`, children: /* @__PURE__ */ jsx(Volume2, { className: `w-5 h-5 ${playingAudio === item.id ? "text-purple-300" : "text-purple-400"}` }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-gray-100 truncate", children: (_a = item.metadata) == null ? void 0 : _a.title }) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onItemSelect(item, true);
+                  },
+                  className: "w-6 h-6 rounded-full bg-purple-500/60 hover:bg-purple-500 flex items-center justify-center text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex-shrink-0",
+                  children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
+                }
+              )
+            ] })
+          },
+          item.id
+        );
+      }) }),
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
+        /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "No audio files found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+      ] }) })
+    ] })
+  ] });
+};
+const AudioPanelContainer = (props) => {
+  const {
+    items,
+    searchQuery,
+    setSearchQuery,
+    handleSelection,
+    handleFileUpload,
+    isLoading,
+    acceptFileTypes
+  } = useMediaPanel(
+    "audio",
+    {
+      selectedElement: props.selectedElement ?? null,
+      addElement: props.addElement,
+      updateElement: props.updateElement
+    },
+    props.videoResolution
+  );
+  return /* @__PURE__ */ jsx(
+    AudioPanel,
+    {
+      items,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      onItemSelect: handleSelection,
+      onFileUpload: handleFileUpload,
+      isLoading,
+      acceptFileTypes
+    }
+  );
+};
+function ImagePanel({
+  items,
+  searchQuery,
+  onSearchChange,
+  onItemSelect,
+  onFileUpload,
+  acceptFileTypes
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Image Library" }),
+    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        searchQuery,
+        setSearchQuery: onSearchChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        id: "image-upload",
+        acceptFileTypes,
+        onFileLoad: onFileUpload,
+        buttonText: "Upload"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 auto-rows-fr", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDoubleClick: () => onItemSelect(item),
+          className: "media-item-compact group relative cursor-pointer overflow-hidden hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-200",
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.url,
+                alt: "",
+                className: "h-full w-full object-cover transition-transform group-hover:scale-105"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black bg-opacity-0 transition-opacity group-hover:bg-opacity-20" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onItemSelect(item, true);
+                },
+                className: "w-5 h-5 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white text-xs",
+                children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
+              }
+            ) })
+          ]
+        },
+        item.id
+      )) }),
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
+        /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "No images found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+      ] }) })
+    ] })
+  ] });
+}
+function ImagePanelContainer(props) {
+  const {
+    items,
+    searchQuery,
+    setSearchQuery,
+    handleSelection,
+    handleFileUpload,
+    isLoading,
+    acceptFileTypes
+  } = useMediaPanel(
+    "image",
+    {
+      selectedElement: props.selectedElement ?? null,
+      addElement: props.addElement,
+      updateElement: props.updateElement
+    },
+    props.videoResolution
+  );
+  return /* @__PURE__ */ jsx(
+    ImagePanel,
+    {
+      items,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      onItemSelect: handleSelection,
+      onFileUpload: handleFileUpload,
+      isLoading,
+      acceptFileTypes
+    }
+  );
+}
+const useVideoPreview = () => {
+  const [playingVideo, setPlayingVideo] = useState(null);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (videoRef.current) {
+        videoRef.current.pause();
+        videoRef.current = null;
+      }
+    };
+  }, []);
+  const stopPlayback = useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current = null;
+    }
+    setPlayingVideo(null);
+  }, []);
+  const togglePlayPause = useCallback((item, videoElement) => {
+    if (playingVideo === item.id) {
+      videoElement.pause();
+      stopPlayback();
+      return;
+    }
+    stopPlayback();
+    videoElement.currentTime = 0;
+    videoElement.play();
+    videoRef.current = videoElement;
+    setPlayingVideo(item.id);
+    videoElement.addEventListener("ended", stopPlayback, { once: true });
+  }, [playingVideo, stopPlayback]);
+  return {
+    playingVideo,
+    videoElement: videoRef.current,
+    togglePlayPause,
+    stopPlayback
+  };
+};
+function VideoPanel({
+  items,
+  searchQuery,
+  onSearchChange,
+  onItemSelect,
+  onFileUpload,
+  acceptFileTypes
+}) {
+  const { playingVideo, togglePlayPause } = useVideoPreview();
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Video Library" }),
+    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        searchQuery,
+        setSearchQuery: onSearchChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        id: "video-upload",
+        acceptFileTypes,
+        onFileLoad: onFileUpload,
+        buttonText: "Upload"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 auto-rows-fr", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDoubleClick: () => onItemSelect(item),
+          className: "media-item-compact group relative cursor-pointer overflow-hidden hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-200",
+          children: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: item.url,
+                poster: item.thumbnail,
+                className: `h-full w-full object-cover transition-transform ${playingVideo === item.id ? "scale-105" : "group-hover:scale-105"}`,
+                ref: (el) => {
+                  if (el) {
+                    el.addEventListener("ended", () => {
+                      el.currentTime = 0;
+                    }, { once: true });
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: `absolute inset-0 bg-black transition-opacity ${playingVideo === item.id ? "bg-opacity-30" : "bg-opacity-0 group-hover:bg-opacity-20"}` }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute top-1 right-1 flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    var _a, _b;
+                    e.stopPropagation();
+                    const videoEl = (_b = (_a = e.currentTarget.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.querySelector("video");
+                    if (videoEl) {
+                      togglePlayPause(item, videoEl);
+                    }
+                  },
+                  className: `w-6 h-6 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white text-xs ${playingVideo === item.id ? "opacity-100" : "opacity-0 group-hover:opacity-100"} transition-opacity duration-200`,
+                  children: playingVideo === item.id ? /* @__PURE__ */ jsx(Pause, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(Play, { className: "w-3 h-3" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onItemSelect(item, true);
+                  },
+                  className: "w-6 h-6 rounded-full bg-purple-500/80 hover:bg-purple-500 flex items-center justify-center text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+                  children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
+                }
+              )
+            ] })
+          ]
+        },
+        item.id
+      )) }),
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
+        /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "No videos found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+      ] }) })
+    ] })
+  ] });
+}
+function VideoPanelContainer(props) {
+  const {
+    items,
+    searchQuery,
+    setSearchQuery,
+    handleSelection,
+    handleFileUpload,
+    isLoading,
+    acceptFileTypes
+  } = useMediaPanel(
+    "video",
+    {
+      selectedElement: props.selectedElement ?? null,
+      addElement: props.addElement,
+      updateElement: props.updateElement
+    },
+    props.videoResolution
+  );
+  return /* @__PURE__ */ jsx(
+    VideoPanel,
+    {
+      items,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      onItemSelect: handleSelection,
+      onFileUpload: handleFileUpload,
+      isLoading,
+      acceptFileTypes
+    }
+  );
+}
+function TextPanel({
+  textContent,
+  fontSize,
+  selectedFont,
+  isBold,
+  isItalic,
+  textColor,
+  strokeColor,
+  applyShadow,
+  shadowColor,
+  strokeWidth,
+  fonts,
+  operation,
+  setTextContent,
+  setFontSize,
+  setSelectedFont,
+  setIsBold,
+  setIsItalic,
+  setTextColor,
+  setStrokeColor,
+  setApplyShadow,
+  setShadowColor,
+  setStrokeWidth,
+  handleApplyChanges
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Text Element" }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Text Content" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: textContent,
+          onChange: (e) => setTextContent(e.target.value),
+          className: inputStyles.input.base
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Font Size" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "8",
+            max: "120",
+            value: fontSize,
+            onChange: (e) => setFontSize(Number(e.target.value)),
+            className: inputStyles.range.gradient
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          fontSize,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Font" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: selectedFont,
+            onChange: (e) => setSelectedFont(e.target.value),
+            className: inputStyles.input.base,
+            children: fonts.map((font) => /* @__PURE__ */ jsx("option", { value: font, children: font }, font))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsBold(!isBold),
+            className: `${inputStyles.toggle.base} ${isBold ? inputStyles.toggle.active : inputStyles.toggle.inactive} min-w-6`,
+            children: /* @__PURE__ */ jsx("span", { className: "font-bold", children: "B" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsItalic(!isItalic),
+            className: `${inputStyles.toggle.base} ${isItalic ? inputStyles.toggle.active : inputStyles.toggle.inactive} min-w-6`,
+            children: /* @__PURE__ */ jsx("span", { className: "italic", children: "I" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Colors" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: inputStyles.label.small, children: "Text Color" }),
+          /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: textColor,
+                onChange: (e) => setTextColor(e.target.value),
+                className: inputStyles.color.picker
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: textColor,
+                onChange: (e) => setTextColor(e.target.value),
+                className: inputStyles.input.small
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: inputStyles.label.small, children: "Stroke Color" }),
+          /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: strokeColor,
+                onChange: (e) => setStrokeColor(e.target.value),
+                className: inputStyles.color.picker
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: strokeColor,
+                onChange: (e) => setStrokeColor(e.target.value),
+                className: inputStyles.input.small
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: inputStyles.radio.container, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              id: "applyShadow",
+              checked: applyShadow,
+              onChange: (e) => setApplyShadow(e.target.checked),
+              className: inputStyles.radio.base
+            }
+          ),
+          /* @__PURE__ */ jsx("label", { htmlFor: "applyShadow", className: inputStyles.radio.label, children: "Apply Shadow" })
+        ] }),
+        applyShadow && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: inputStyles.label.small, children: "Shadow Color" }),
+          /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: shadowColor,
+                onChange: (e) => setShadowColor(e.target.value),
+                className: inputStyles.color.picker
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: shadowColor,
+                onChange: (e) => setShadowColor(e.target.value),
+                className: inputStyles.input.small
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Stroke Width" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "2",
+            step: 0.1,
+            value: strokeWidth,
+            onChange: (e) => setStrokeWidth(Number(e.target.value)),
+            className: inputStyles.range.base
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: inputStyles.range.value, children: strokeWidth })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: inputStyles.button.primary, children: operation }) })
+  ] });
+}
+const DEFAULT_TEXT_PROPS = {
+  text: "Sample",
+  fontSize: 48,
+  fontFamily: "Poppins",
+  fontWeight: 400,
+  fontStyle: "normal",
+  textColor: "#ffffff",
+  strokeColor: "#4d4d4d",
+  strokeWidth: 0,
+  applyShadow: false,
+  shadowColor: "#000000",
+  textAlign: "center",
+  shadowOffset: [0, 0],
+  shadowBlur: 2,
+  shadowOpacity: 1
+};
+const useTextPanel = ({
+  selectedElement,
+  addElement,
+  updateElement
+}) => {
+  const [textContent, setTextContent] = useState(DEFAULT_TEXT_PROPS.text);
+  const [fontSize, setFontSize] = useState(DEFAULT_TEXT_PROPS.fontSize);
+  const [selectedFont, setSelectedFont] = useState(DEFAULT_TEXT_PROPS.fontFamily);
+  const [isBold, setIsBold] = useState(DEFAULT_TEXT_PROPS.fontWeight === 700);
+  const [isItalic, setIsItalic] = useState(DEFAULT_TEXT_PROPS.fontStyle === "italic");
+  const [textColor, setTextColor] = useState(DEFAULT_TEXT_PROPS.textColor);
+  const [strokeColor, setStrokeColor] = useState(DEFAULT_TEXT_PROPS.strokeColor);
+  const [applyShadow, setApplyShadow] = useState(DEFAULT_TEXT_PROPS.applyShadow);
+  const [shadowColor, setShadowColor] = useState(DEFAULT_TEXT_PROPS.shadowColor);
+  const [strokeWidth, setStrokeWidth] = useState(DEFAULT_TEXT_PROPS.strokeWidth);
+  const fonts = Object.values(AVAILABLE_TEXT_FONTS);
+  const handleApplyChanges = async () => {
+    let textElement;
+    if (selectedElement instanceof TextElement) {
+      textElement = selectedElement;
+      textElement.setText(textContent);
+      textElement.setFontSize(fontSize);
+      textElement.setFontFamily(selectedFont);
+      textElement.setFontWeight(isBold ? 700 : 400);
+      textElement.setFontStyle(isItalic ? "italic" : "normal");
+      textElement.setFill(textColor);
+      textElement.setStrokeColor(strokeColor);
+      textElement.setLineWidth(strokeWidth);
+      textElement.setTextAlign(DEFAULT_TEXT_PROPS.textAlign);
+      if (applyShadow) {
+        textElement.setProps({
+          ...textElement.getProps(),
+          shadowColor,
+          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
+          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
+          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
+        });
+      } else {
+        textElement.setProps({
+          ...textElement.getProps(),
+          shadowColor: void 0,
+          shadowOffset: void 0,
+          shadowBlur: void 0,
+          shadowOpacity: void 0
+        });
+      }
+      updateElement(textElement);
+    } else {
+      textElement = new TextElement(textContent).setFontSize(fontSize).setFontFamily(selectedFont).setFontWeight(isBold ? 700 : 400).setFontStyle(isItalic ? "italic" : "normal").setFill(textColor).setStrokeColor(strokeColor).setLineWidth(strokeWidth).setTextAlign("center");
+      if (applyShadow) {
+        textElement.setProps({
+          ...textElement.getProps(),
+          shadowColor,
+          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
+          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
+          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
+        });
+      }
+      await addElement(textElement);
+    }
+  };
+  useEffect(() => {
+    if (selectedElement instanceof TextElement) {
+      setTextContent(selectedElement.getText());
+      const textProps = selectedElement.getProps();
+      setSelectedFont(textProps.fontFamily ?? DEFAULT_TEXT_PROPS.fontFamily);
+      setFontSize(textProps.fontSize ?? DEFAULT_TEXT_PROPS.fontSize);
+      setIsBold(textProps.fontWeight === 700);
+      setIsItalic(textProps.fontStyle === "italic");
+      setTextColor(textProps.fill ?? DEFAULT_TEXT_PROPS.textColor);
+      setStrokeColor(textProps.stroke ?? DEFAULT_TEXT_PROPS.strokeColor);
+      setStrokeWidth(textProps.lineWidth ?? DEFAULT_TEXT_PROPS.strokeWidth);
+      const hasShadow = textProps.shadowColor !== void 0;
+      setApplyShadow(hasShadow);
+      if (hasShadow) {
+        setShadowColor(textProps.shadowColor ?? DEFAULT_TEXT_PROPS.shadowColor);
+      }
+    } else {
+      setTextContent(DEFAULT_TEXT_PROPS.text);
+      setFontSize(DEFAULT_TEXT_PROPS.fontSize);
+      setSelectedFont(DEFAULT_TEXT_PROPS.fontFamily);
+      setIsBold(DEFAULT_TEXT_PROPS.fontWeight === 700);
+      setIsItalic(DEFAULT_TEXT_PROPS.fontStyle === "italic");
+      setTextColor(DEFAULT_TEXT_PROPS.textColor);
+      setStrokeColor(DEFAULT_TEXT_PROPS.strokeColor);
+      setStrokeWidth(DEFAULT_TEXT_PROPS.strokeWidth);
+      setApplyShadow(DEFAULT_TEXT_PROPS.applyShadow);
+      setShadowColor(DEFAULT_TEXT_PROPS.shadowColor);
+    }
+  }, [selectedElement]);
+  return {
+    textContent,
+    fontSize,
+    selectedFont,
+    isBold,
+    isItalic,
+    textColor,
+    strokeColor,
+    applyShadow,
+    shadowColor,
+    strokeWidth,
+    fonts,
+    operation: selectedElement instanceof TextElement ? "Apply Changes" : "Add Text",
+    setTextContent,
+    setFontSize,
+    setSelectedFont,
+    setIsBold,
+    setIsItalic,
+    setTextColor,
+    setStrokeColor,
+    setApplyShadow,
+    setShadowColor,
+    setStrokeWidth,
+    handleApplyChanges
+  };
+};
+function TextPanelContainer(props) {
+  const textPanelProps = useTextPanel(props);
+  return /* @__PURE__ */ jsx(TextPanel, { ...textPanelProps });
+}
+function IconPanel({
+  icons,
+  loading,
+  hasMore,
+  totalIcons,
+  searchQuery,
+  handleSearch,
+  handleSelection,
+  handleDownloadIcon,
+  handleLoadMore
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Icon Library" }),
+    /* @__PURE__ */ jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 z-10 pointer-events-none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search icons...",
+          value: searchQuery,
+          onChange: (e) => handleSearch(e.target.value),
+          className: `${inputStyles.input.base} pl-8`
+        }
+      )
+    ] }) }),
+    loading && icons.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-purple-500" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      totalIcons > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4 text-sm text-gray-400", children: [
+        "Showing ",
+        icons.length,
+        " of ",
+        totalIcons,
+        " icons"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3 mb-2 p-2", children: (icons || []).map((icon, index) => /* @__PURE__ */ jsxs("div", { className: "group relative cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => handleSelection(icon),
+            className: "w-16 h-16 flex items-center justify-center bg-neutral-700/50 border border-gray-600 rounded-lg hover:border-purple-500 hover:bg-neutral-700/70 transition-all duration-200 p-2",
+            dangerouslySetInnerHTML: { __html: icon.svg }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSelection(icon);
+              },
+              className: "p-1.5 bg-purple-600 hover:bg-purple-700 rounded transition-colors duration-200",
+              title: "Add to timeline",
+              children: /* @__PURE__ */ jsx("span", { className: "text-white text-xs", children: "+" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleDownloadIcon(icon);
+              },
+              className: "p-1.5 bg-purple-600 hover:bg-purple-700 rounded transition-colors duration-200",
+              title: "Download SVG",
+              children: /* @__PURE__ */ jsx(Download, { className: "w-3 h-3 text-white" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-10", children: icon.name })
+      ] }, index)) }),
+      hasMore && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleLoadMore,
+          disabled: loading,
+          className: `${inputStyles.button.primary} disabled:opacity-50 disabled:cursor-not-allowed`,
+          children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }),
+            "Loading..."
+          ] }) : "Load More"
+        }
+      ),
+      !loading && icons.length === 0 && searchQuery && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-gray-400", children: [
+        /* @__PURE__ */ jsx("p", { children: "No icons found" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: "Try a different search term" })
+      ] })
+    ] })
+  ] });
+}
+const ICONS_PER_PAGE = 20;
+const useIconPanel = ({
+  selectedElement,
+  addElement,
+  updateElement
+}) => {
+  const [icons, setIcons] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [totalIcons, setTotalIcons] = useState(0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const currentQuery = useRef("");
+  const fetchIcons = async (query, reset = false) => {
+    try {
+      setLoading(true);
+      const newPage = reset ? 1 : page;
+      const start = (newPage - 1) * ICONS_PER_PAGE;
+      const url = `https://api.iconify.design/search?query=${query}&limit=${ICONS_PER_PAGE}&offset=${start}`;
+      const response = await fetch(url);
+      const data = await response.json();
+      const iconData = data.icons || [];
+      const total = data.total || 0;
+      setTotalIcons(total);
+      const formattedIcons = await Promise.all(
+        iconData.map(async (icon) => {
+          const svgUrl = `https://api.iconify.design/${icon}.svg`;
+          try {
+            const svgResponse = await fetch(svgUrl);
+            const svg = await svgResponse.text();
+            return { name: icon, svg };
+          } catch (e) {
+            console.error(`Error fetching SVG for ${icon}:`, e);
+            return null;
+          }
+        })
+      );
+      const validIcons = formattedIcons.filter((icon) => icon !== null);
+      if (reset) {
+        setIcons(validIcons);
+      } else {
+        setIcons([...icons, ...validIcons]);
+      }
+      setHasMore(start + validIcons.length < total);
+      if (!reset) {
+        setPage(newPage + 1);
+      } else {
+        setPage(2);
+      }
+    } catch (error) {
+      console.error("Error fetching icons:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchIcons("media", true);
+  }, []);
+  const handleSearch = (query) => {
+    currentQuery.current = query;
+    setSearchQuery(query);
+    fetchIcons(query, true);
+  };
+  const handleSelection = (icon) => {
+    const svgBlob = new Blob([icon.svg], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(svgBlob);
+    let iconElement;
+    if (selectedElement instanceof IconElement) {
+      iconElement = selectedElement;
+      iconElement.setSrc(url);
+      iconElement.setName(icon.name);
+      updateElement == null ? void 0 : updateElement(iconElement);
+    } else {
+      iconElement = new IconElement(url, {
+        width: 100,
+        height: 100
+      });
+      iconElement.setName(icon.name);
+      addElement == null ? void 0 : addElement(iconElement);
+    }
+    URL.revokeObjectURL(url);
+  };
+  const handleDownloadIcon = (icon) => {
+    const blob = new Blob([icon.svg], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${icon.name}.svg`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  const handleLoadMore = () => {
+    fetchIcons(currentQuery.current, false);
+  };
+  return {
+    icons,
+    loading,
+    hasMore,
+    totalIcons,
+    searchQuery,
+    handleSearch,
+    handleSelection,
+    handleDownloadIcon,
+    handleLoadMore
+  };
+};
+function IconPanelContainer(props) {
+  const iconPanelProps = useIconPanel({
+    selectedElement: props.selectedElement ?? null,
+    addElement: props.addElement,
+    updateElement: props.updateElement
+  });
+  return /* @__PURE__ */ jsx(IconPanel, { ...iconPanelProps });
+}
+function RectPanel({
+  cornerRadius,
+  fillColor,
+  opacity,
+  strokeColor,
+  lineWidth,
+  setCornerRadius,
+  setFillColor,
+  setOpacity,
+  setStrokeColor,
+  setLineWidth,
+  handleApplyChanges
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Rectangle" }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Corner Radius" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "100",
+            value: cornerRadius,
+            onChange: (e) => setCornerRadius(Number(e.target.value)),
+            className: inputStyles.range.base
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          cornerRadius,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Fill Color" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: fillColor,
+            onChange: (e) => setFillColor(e.target.value),
+            className: inputStyles.color.picker
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: inputStyles.color.preview,
+            style: { backgroundColor: fillColor }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Opacity" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "100",
+            value: opacity,
+            onChange: (e) => setOpacity(Number(e.target.value)),
+            className: inputStyles.range.gradient
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          opacity,
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Stroke Color" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: strokeColor,
+            onChange: (e) => setStrokeColor(e.target.value),
+            className: inputStyles.color.picker
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: inputStyles.color.preview,
+            style: { backgroundColor: strokeColor }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Line Width" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "20",
+            value: lineWidth,
+            onChange: (e) => setLineWidth(Number(e.target.value)),
+            className: inputStyles.range.base
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          lineWidth,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleApplyChanges,
+        className: inputStyles.button.primary,
+        children: "Apply Changes"
+      }
+    ) })
+  ] });
+}
+const DEFAULT_RECT_PROPS = {
+  cornerRadius: 0,
+  fillColor: "#3b82f6",
+  opacity: 100,
+  strokeColor: "#000000",
+  lineWidth: 0
+};
+const useRectPanel = ({
+  selectedElement,
+  addElement,
+  updateElement
+}) => {
+  const [cornerRadius, setCornerRadius] = useState(DEFAULT_RECT_PROPS.cornerRadius);
+  const [fillColor, setFillColor] = useState(DEFAULT_RECT_PROPS.fillColor);
+  const [opacity, setOpacity] = useState(DEFAULT_RECT_PROPS.opacity);
+  const [strokeColor, setStrokeColor] = useState(DEFAULT_RECT_PROPS.strokeColor);
+  const [lineWidth, setLineWidth] = useState(DEFAULT_RECT_PROPS.lineWidth);
+  const handleApplyChanges = () => {
+    let rectElement;
+    if (selectedElement instanceof RectElement) {
+      rectElement = selectedElement;
+      rectElement.setCornerRadius(cornerRadius);
+      rectElement.setOpacity(opacity);
+      rectElement.setStrokeColor(strokeColor);
+      rectElement.setLineWidth(lineWidth);
+      updateElement == null ? void 0 : updateElement(rectElement);
+    } else {
+      rectElement = new RectElement(fillColor, { width: 200, height: 200 }).setCornerRadius(cornerRadius).setOpacity(opacity).setStrokeColor(strokeColor).setLineWidth(lineWidth);
+      addElement == null ? void 0 : addElement(rectElement);
+    }
+  };
+  useEffect(() => {
+    if (selectedElement instanceof RectElement) {
+      setCornerRadius(selectedElement.getCornerRadius() ?? DEFAULT_RECT_PROPS.cornerRadius);
+      setFillColor(selectedElement.getFill() ?? DEFAULT_RECT_PROPS.fillColor);
+      setOpacity(selectedElement.getOpacity() ?? DEFAULT_RECT_PROPS.opacity);
+      setStrokeColor(selectedElement.getStrokeColor() ?? DEFAULT_RECT_PROPS.strokeColor);
+      setLineWidth(selectedElement.getLineWidth() ?? DEFAULT_RECT_PROPS.lineWidth);
+    }
+  }, [selectedElement]);
+  return {
+    cornerRadius,
+    fillColor,
+    opacity,
+    strokeColor,
+    lineWidth,
+    setCornerRadius,
+    setFillColor,
+    setOpacity,
+    setStrokeColor,
+    setLineWidth,
+    handleApplyChanges
+  };
+};
+function RectPanelContainer(props) {
+  const rectPanelProps = useRectPanel({
+    selectedElement: props.selectedElement ?? null,
+    addElement: props.addElement,
+    updateElement: props.updateElement
+  });
+  return /* @__PURE__ */ jsx(RectPanel, { ...rectPanelProps });
+}
+function CirclePanel({
+  radius,
+  fillColor,
+  opacity,
+  strokeColor,
+  lineWidth,
+  setRadius,
+  setFillColor,
+  setOpacity,
+  setStrokeColor,
+  setLineWidth,
+  handleApplyChanges
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.panel.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: inputStyles.panel.title, children: "Circle" }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Radius" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "10",
+            max: "300",
+            value: radius,
+            onChange: (e) => setRadius(Number(e.target.value)),
+            className: inputStyles.range.base
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          radius,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Fill Color" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: fillColor,
+            onChange: (e) => setFillColor(e.target.value),
+            className: inputStyles.color.picker
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: inputStyles.color.preview,
+            style: { backgroundColor: fillColor }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Opacity" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "100",
+            value: opacity,
+            onChange: (e) => setOpacity(Number(e.target.value)),
+            className: inputStyles.range.gradient
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          opacity,
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Stroke Color" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.color.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: strokeColor,
+            onChange: (e) => setStrokeColor(e.target.value),
+            className: inputStyles.color.picker
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: inputStyles.color.preview,
+            style: { backgroundColor: strokeColor }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: inputStyles.container, children: [
+      /* @__PURE__ */ jsx("label", { className: inputStyles.label.base, children: "Line Width" }),
+      /* @__PURE__ */ jsxs("div", { className: inputStyles.range.container, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "20",
+            value: lineWidth,
+            onChange: (e) => setLineWidth(Number(e.target.value)),
+            className: inputStyles.range.base
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: inputStyles.range.value, children: [
+          lineWidth,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleApplyChanges,
+        className: inputStyles.button.primary,
+        children: "Apply Changes"
+      }
+    ) })
+  ] });
+}
+const DEFAULT_CIRCLE_PROPS = {
+  radius: 50,
+  fillColor: "#3b82f6",
+  opacity: 100,
+  strokeColor: "#000000",
+  lineWidth: 0
+};
+const useCirclePanel = ({
+  selectedElement,
+  addElement,
+  updateElement
+}) => {
+  const [radius, setRadius] = useState(DEFAULT_CIRCLE_PROPS.radius);
+  const [fillColor, setFillColor] = useState(DEFAULT_CIRCLE_PROPS.fillColor);
+  const [opacity, setOpacity] = useState(DEFAULT_CIRCLE_PROPS.opacity);
+  const [strokeColor, setStrokeColor] = useState(DEFAULT_CIRCLE_PROPS.strokeColor);
+  const [lineWidth, setLineWidth] = useState(DEFAULT_CIRCLE_PROPS.lineWidth);
+  const handleApplyChanges = () => {
+    let circleElement;
+    if (selectedElement instanceof CircleElement) {
+      circleElement = selectedElement;
+      circleElement.setRadius(radius);
+      circleElement.setFill(fillColor);
+      circleElement.setOpacity(opacity);
+      circleElement.setStrokeColor(strokeColor);
+      circleElement.setLineWidth(lineWidth);
+      updateElement == null ? void 0 : updateElement(circleElement);
+    } else {
+      circleElement = new CircleElement(fillColor, radius).setOpacity(opacity).setStrokeColor(strokeColor).setLineWidth(lineWidth);
+      addElement == null ? void 0 : addElement(circleElement);
+    }
+  };
+  useEffect(() => {
+    if (selectedElement instanceof CircleElement) {
+      setRadius(selectedElement.getRadius() ?? DEFAULT_CIRCLE_PROPS.radius);
+      setFillColor(selectedElement.getFill() ?? DEFAULT_CIRCLE_PROPS.fillColor);
+      setOpacity(selectedElement.getOpacity() ?? DEFAULT_CIRCLE_PROPS.opacity);
+      setStrokeColor(selectedElement.getStrokeColor() ?? DEFAULT_CIRCLE_PROPS.strokeColor);
+      setLineWidth(selectedElement.getLineWidth() ?? DEFAULT_CIRCLE_PROPS.lineWidth);
+    }
+  }, [selectedElement]);
+  return {
+    radius,
+    fillColor,
+    opacity,
+    strokeColor,
+    lineWidth,
+    setRadius,
+    setFillColor,
+    setOpacity,
+    setStrokeColor,
+    setLineWidth,
+    handleApplyChanges
+  };
+};
+function CirclePanelContainer(props) {
+  const circlePanelProps = useCirclePanel({
+    selectedElement: props.selectedElement ?? null,
+    addElement: props.addElement,
+    updateElement: props.updateElement
+  });
+  return /* @__PURE__ */ jsx(CirclePanel, { ...circlePanelProps });
+}
+const ElementPanelContainer = ({
+  selectedTool,
+  setSelectedTool,
+  videoResolution,
+  selectedElement,
+  addElement,
+  updateElement
+}) => {
+  const addNewElement = async (element) => {
+    await addElement(element);
+    if (!["image", "video", "audio"].includes(selectedTool)) {
+      setSelectedTool("none");
+    }
+  };
+  const renderLibrary = () => {
+    switch (selectedTool) {
+      case "image":
+        return /* @__PURE__ */ jsx(
+          ImagePanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "audio":
+        return /* @__PURE__ */ jsx(
+          AudioPanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "video":
+        return /* @__PURE__ */ jsx(
+          VideoPanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "text":
+        return /* @__PURE__ */ jsx(
+          TextPanelContainer,
+          {
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "icon":
+        return /* @__PURE__ */ jsx(
+          IconPanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "rect":
+        return /* @__PURE__ */ jsx(
+          RectPanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "circle":
+        return /* @__PURE__ */ jsx(
+          CirclePanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement
+          }
+        );
+      case "subtitle":
+        return /* @__PURE__ */ jsx(SubtitlesPanel, {});
+      default:
+        return /* @__PURE__ */ jsx("div", { className: inputStyles.panel.container, children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(WandSparkles, { className: "w-12 h-12 mx-auto mb-4 text-purple-500/50" }),
+          /* @__PURE__ */ jsx("p", { className: inputStyles.label.base, children: "Select a Tool to Begin" })
+        ] }) }) });
+    }
+  };
+  return renderLibrary();
+};
+const propsCategories = /* @__PURE__ */ new Map([
+  [
+    "element-props",
+    {
+      id: "element-props",
+      name: "Properties",
+      icon: "Settings",
+      description: "Element Properties"
+    }
+  ],
+  [
+    "animations",
+    {
+      id: "animations",
+      name: "Animations",
+      icon: "Zap",
+      description: "Animations"
+    }
+  ],
+  [
+    "text-effects",
+    {
+      id: "text-effects",
+      name: "Text Effects",
+      icon: "SparklesIcon",
+      description: "Text Effects"
+    }
+  ],
+  [
+    "color-effects",
+    {
+      id: "color-effects",
+      name: "Color Effects",
+      icon: "Image",
+      description: "Color Effects"
+    }
+  ],
+  [
+    "playback-props",
+    {
+      id: "playback-props",
+      name: "Playback Props",
+      icon: "Music",
+      description: "Playback Properties"
+    }
+  ],
+  [
+    "subtitle-style",
+    {
+      id: "subtitle-style",
+      name: "Subtitle Style",
+      icon: "MessageSquare",
+      description: "Subtitle Style"
+    }
+  ]
+]);
+const getIcon = (iconName) => {
+  switch (iconName) {
+    case "Type":
+      return Type;
+    case "Infinity":
+      return Infinity;
+    case "Image":
+      return Image;
+    case "Music":
+      return Music;
+    case "MessageSquare":
+      return MessageSquare;
+    case "Settings":
+      return Settings;
+    case "SparklesIcon":
+      return Sparkles;
+    case "Zap":
+      return Zap;
+    default:
+      return Plus;
+  }
+};
+function PropsToolbar({
+  selectedElement,
+  selectedProp,
+  setSelectedProp
+}) {
+  const availableSections = useMemo(() => {
+    const sections = [];
+    if (selectedElement instanceof TextElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+      sections.push(propsCategories.get("text-effects"));
+    } else if (selectedElement instanceof ImageElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+      sections.push(propsCategories.get("color-effects"));
+    } else if (selectedElement instanceof VideoElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+      sections.push(propsCategories.get("color-effects"));
+      sections.push(propsCategories.get("playback-props"));
+    } else if (selectedElement instanceof AudioElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("playback-props"));
+    } else if (selectedElement instanceof CircleElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+    } else if (selectedElement instanceof RectElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+    } else if (selectedElement instanceof IconElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+    } else if (selectedElement instanceof CaptionElement) {
+      sections.push(propsCategories.get("element-props"));
+      sections.push(propsCategories.get("animations"));
+      sections.push(propsCategories.get("subtitle-style"));
+    }
+    return sections;
+  }, [selectedElement]);
+  if (!selectedElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-16 bg-neutral/80 border-l border-gray-300/50 flex flex-col items-center py-4 space-y-3 justify-start backdrop-blur-md shadow-lg", children: availableSections.map((tool) => {
+    const Icon2 = getIcon(tool.icon);
+    const isSelected = selectedProp === tool.id;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setSelectedProp(tool.id),
+        className: `
+              props-toolbar-btn group ${isSelected ? "active" : ""}
+            `,
+        title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] mt-1 transition-opacity duration-200", children: tool.name })
+        ]
+      },
+      tool.id
+    );
+  }) });
+}
+function ElementProps({ selectedElement, updateElement }) {
+  const elementProps = (selectedElement == null ? void 0 : selectedElement.getProps()) || {};
+  const { x, y, opacity, rotation } = elementProps;
+  const handleUpdateElement = (props) => {
+    if (selectedElement) {
+      updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Position & Size"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "X" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: x ?? 0,
+              onChange: (e) => handleUpdateElement({ x: Number(e.target.value) }),
+              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Y" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: y ?? 0,
+              onChange: (e) => handleUpdateElement({ y: Number(e.target.value) }),
+              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Opacity"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: "100",
+          value: (opacity ?? 1) * 100,
+          onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
+          className: "w-full h-1.5 bg-gradient-to-r from-purple-500/30 to-neutral-600/50 rounded-full appearance-none cursor-pointer slider-thumb"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+        /* @__PURE__ */ jsx("span", { children: "0%" }),
+        /* @__PURE__ */ jsx("span", { children: "100%" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Rotation"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: "360",
+          value: rotation ?? 0,
+          onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
+          className: "w-full h-1.5 bg-gradient-to-r from-purple-500/30 to-neutral-600/50 rounded-full appearance-none cursor-pointer slider-thumb"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+        /* @__PURE__ */ jsx("span", { children: "0°" }),
+        /* @__PURE__ */ jsx("span", { children: "360°" })
+      ] })
+    ] })
+  ] });
+}
+function TextEffects({
+  selectedElement,
+  updateElement
+}) {
+  if (!(selectedElement instanceof TextElement)) return null;
+  const currentEffect = selectedElement.getTextEffect();
+  const handleUpdateEffect = (props) => {
+    if (!selectedElement || !(selectedElement instanceof TextElement)) return;
+    let effect = currentEffect;
+    if (props.name === "") {
+      selectedElement.setTextEffect(void 0);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+      return;
+    }
+    if (!effect || props.name && props.name !== effect.getName()) {
+      effect = new ElementTextEffect(
+        props.name || (currentEffect == null ? void 0 : currentEffect.getName()) || TEXT_EFFECTS[0].name
+      );
+      effect.setDelay(0);
+      effect.setDuration(1);
+      effect.setBufferTime(0.1);
+    }
+    if (props.delay !== void 0) effect.setDelay(props.delay);
+    if (props.duration !== void 0) effect.setDuration(props.duration);
+    if (props.bufferTime !== void 0) effect.setBufferTime(props.bufferTime);
+    selectedElement.setTextEffect(effect);
+    updateElement == null ? void 0 : updateElement(selectedElement);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Text Effect Type"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: (currentEffect == null ? void 0 : currentEffect.getName()) || "",
+          onChange: (e) => handleUpdateEffect({ name: e.target.value }),
+          className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "No Effect" }),
+            TEXT_EFFECTS.map((effect) => /* @__PURE__ */ jsx("option", { value: effect.name, children: effect.name.charAt(0).toUpperCase() + effect.name.slice(1) }, effect.name))
+          ]
+        }
+      )
+    ] }),
+    currentEffect && /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Effect Options"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Delay (seconds)" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: "0",
+              max: "5",
+              step: "0.1",
+              value: currentEffect.getDelay() ?? 0,
+              onChange: (e) => handleUpdateEffect({ delay: Number(e.target.value) }),
+              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Duration (seconds)" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: "0.1",
+              max: "10",
+              step: "0.1",
+              value: currentEffect.getDuration() ?? 1,
+              onChange: (e) => handleUpdateEffect({ duration: Number(e.target.value) }),
+              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Buffer Time (seconds)" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: "0.05",
+              max: "1",
+              step: "0.05",
+              value: currentEffect.getBufferTime() ?? 0.1,
+              onChange: (e) => handleUpdateEffect({ bufferTime: Number(e.target.value) }),
+              className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Animation({
+  selectedElement,
+  updateElement
+}) {
+  if (!(selectedElement instanceof TrackElement)) return null;
+  const currentAnimation = selectedElement == null ? void 0 : selectedElement.getAnimation();
+  const handleUpdateAnimation = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!selectedElement) return;
+    let animation = currentAnimation;
+    if (props.name === "") {
+      selectedElement.setAnimation(void 0);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+      return;
+    }
+    const animationDef = ANIMATIONS.find(
+      (a) => a.name === (props.name || (currentAnimation == null ? void 0 : currentAnimation.getName()))
+    );
+    if (!animationDef) return;
+    if (!animation || props.name && props.name !== animation.getName()) {
+      animation = new ElementAnimation(
+        props.name || (currentAnimation == null ? void 0 : currentAnimation.getName()) || ANIMATIONS[0].name
+      );
+      animation.setInterval(animationDef.interval || 1);
+      animation.setDuration(animationDef.duration || 1);
+      animation.setIntensity(animationDef.intensity || 1);
+      animation.setAnimate(animationDef.animate || "enter");
+      if (animationDef.mode) animation.setMode(animationDef.mode);
+      if (animationDef.direction)
+        animation.setDirection(animationDef.direction);
+    }
+    if (props.interval !== void 0) {
+      const [min, max] = ((_a = animationDef.options) == null ? void 0 : _a.interval) || [0.1, 5];
+      animation.setInterval(Math.min(Math.max(props.interval, min), max));
+    }
+    if (props.duration !== void 0) {
+      const [min, max] = ((_b = animationDef.options) == null ? void 0 : _b.duration) || [0.1, 5];
+      animation.setDuration(Math.min(Math.max(props.duration, min), max));
+    }
+    if (props.intensity !== void 0) {
+      const [min, max] = ((_c = animationDef.options) == null ? void 0 : _c.intensity) || [0.1, 2];
+      animation.setIntensity(Math.min(Math.max(props.intensity, min), max));
+    }
+    if (props.animate && ((_e = (_d = animationDef.options) == null ? void 0 : _d.animate) == null ? void 0 : _e.includes(props.animate))) {
+      animation.setAnimate(props.animate);
+    }
+    if (props.mode && ((_g = (_f = animationDef.options) == null ? void 0 : _f.mode) == null ? void 0 : _g.includes(props.mode))) {
+      animation.setMode(props.mode);
+    }
+    if (props.direction && ((_i = (_h = animationDef.options) == null ? void 0 : _h.direction) == null ? void 0 : _i.includes(props.direction))) {
+      animation.setDirection(props.direction);
+    }
+    selectedElement.setAnimation(animation);
+    updateElement == null ? void 0 : updateElement(selectedElement);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Animation Type"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: (currentAnimation == null ? void 0 : currentAnimation.getName()) || "",
+          onChange: (e) => handleUpdateAnimation({ name: e.target.value }),
+          className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "No Animation" }),
+            ANIMATIONS.map((animation) => /* @__PURE__ */ jsx("option", { value: animation.name, children: animation.name.charAt(0).toUpperCase() + animation.name.slice(1) }, animation.name))
+          ]
+        }
+      )
+    ] }),
+    currentAnimation && /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+        "Animation Options"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+        const animationDef = ANIMATIONS.find(
+          (a) => a.name === currentAnimation.getName()
+        );
+        if (!animationDef || !animationDef.options) return null;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          ((_a = animationDef.options) == null ? void 0 : _a.animate) && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "When to Animate" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: currentAnimation.getAnimate(),
+                onChange: (e) => handleUpdateAnimation({
+                  animate: e.target.value
+                }),
+                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+                children: (_b = animationDef.options) == null ? void 0 : _b.animate.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+              }
+            )
+          ] }),
+          ((_c = animationDef.options) == null ? void 0 : _c.direction) && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Direction" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: currentAnimation.getDirection(),
+                onChange: (e) => handleUpdateAnimation({
+                  direction: e.target.value
+                }),
+                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+                children: (_d = animationDef.options) == null ? void 0 : _d.direction.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+              }
+            )
+          ] }),
+          ((_e = animationDef.options) == null ? void 0 : _e.mode) && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Mode" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: currentAnimation.getMode(),
+                onChange: (e) => handleUpdateAnimation({
+                  mode: e.target.value
+                }),
+                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200",
+                children: (_f = animationDef.options) == null ? void 0 : _f.mode.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+              }
+            )
+          ] }),
+          ((_g = animationDef.options) == null ? void 0 : _g.duration) && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Duration (seconds)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: (_h = animationDef.options) == null ? void 0 : _h.duration[0],
+                max: (_i = animationDef.options) == null ? void 0 : _i.duration[1],
+                step: "0.1",
+                value: currentAnimation.getDuration(),
+                onChange: (e) => handleUpdateAnimation({
+                  duration: Number(e.target.value)
+                }),
+                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+              }
+            )
+          ] }),
+          ((_j = animationDef.options) == null ? void 0 : _j.interval) && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Interval (seconds)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: (_k = animationDef.options) == null ? void 0 : _k.interval[0],
+                max: (_l = animationDef.options) == null ? void 0 : _l.interval[1],
+                step: "0.1",
+                value: currentAnimation.getInterval(),
+                onChange: (e) => handleUpdateAnimation({
+                  interval: Number(e.target.value)
+                }),
+                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+              }
+            )
+          ] }),
+          ((_m = animationDef.options) == null ? void 0 : _m.intensity) && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Intensity" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: (_n = animationDef.options) == null ? void 0 : _n.intensity[0],
+                max: (_o = animationDef.options) == null ? void 0 : _o.intensity[1],
+                step: "0.1",
+                value: currentAnimation.getIntensity(),
+                onChange: (e) => handleUpdateAnimation({
+                  intensity: Number(e.target.value)
+                }),
+                className: "w-full bg-neutral-700/60 border border-gray-600/40 rounded-md text-white text-xs px-2 py-1.5 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500/30 transition-all duration-200"
+              }
+            )
+          ] })
+        ] });
+      })() })
+    ] })
+  ] });
+}
+function PlaybackPropsPanel({
+  selectedElement,
+  updateElement
+}) {
+  const elementProps = (selectedElement == null ? void 0 : selectedElement.getProps()) || {};
+  const { volume } = elementProps;
+  const handleUpdateElement = (props) => {
+    if (selectedElement) {
+      updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
+    /* @__PURE__ */ jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
+      "Volume"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: "0",
+        max: "3",
+        step: 0.1,
+        value: volume ?? 0,
+        onChange: (e) => handleUpdateElement({ volume: Number(e.target.value) }),
+        className: "w-full h-1.5 bg-gradient-to-r from-purple-500/30 to-neutral-600/50 rounded-full appearance-none cursor-pointer slider-thumb"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+      /* @__PURE__ */ jsx("span", { children: "0" }),
+      /* @__PURE__ */ jsx("span", { children: "3" })
+    ] })
+  ] }) });
+}
+function PropContainer({ title, icon, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-600/30 last:border-b-0 bg-gradient-to-b from-neutral-800/40 to-neutral-800/20 backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-between px-3 py-2.5 text-left text-gray-200 hover:text-white hover:bg-gradient-to-r hover:from-purple-600/20 hover:to-purple-500/10 transition-all duration-200 rounded-none border-l-2 border-transparent hover:border-purple-500/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-purple-400/80", children: icon }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `overflow-x-hidden overflow-y-auto p-1 transition-all duration-300 ease-in-out`,
+        children
+      }
+    )
+  ] });
+}
+function PropertiesPanelContainer({
+  selectedProp,
+  selectedElement,
+  updateElement
+}) {
+  if (!selectedElement) {
+    return /* @__PURE__ */ jsx("div", { className: "w-72 h-full bg-gradient-to-b from-neutral-800/90 to-neutral-900/80 border-l border-gray-600/40 overflow-y-auto overflow-x-hidden backdrop-blur-xl shadow-2xl", children: /* @__PURE__ */ jsx("div", { className: "px-3 py-3 border-b border-gray-600/30 bg-gradient-to-r from-purple-600/10 to-transparent", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-white", children: "Select Element to see properties" }) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-72 h-full bg-gradient-to-b from-neutral-800/90 to-neutral-900/80 border-l border-gray-600/40 overflow-y-hidden overflow-x-hidden backdrop-blur-xl shadow-2xl", children: [
+    selectedProp === "element-props" && /* @__PURE__ */ jsx(
+      PropContainer,
+      {
+        title: "All Properties",
+        icon: /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4" }),
+        children: /* @__PURE__ */ jsx(
+          ElementProps,
+          {
+            selectedElement,
+            updateElement
+          }
+        )
+      }
+    ),
+    selectedProp === "playback-props" && /* @__PURE__ */ jsx(
+      PropContainer,
+      {
+        title: "Playback Properties",
+        icon: /* @__PURE__ */ jsx(Music, { className: "w-4 h-4" }),
+        children: /* @__PURE__ */ jsx(
+          PlaybackPropsPanel,
+          {
+            selectedElement,
+            updateElement
+          }
+        )
+      }
+    ),
+    selectedProp === "text-effects" && /* @__PURE__ */ jsx(
+      PropContainer,
+      {
+        title: "Text Effects",
+        icon: /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4" }),
+        children: /* @__PURE__ */ jsx(
+          TextEffects,
+          {
+            selectedElement,
+            updateElement
+          }
+        )
+      }
+    ),
+    selectedProp === "animations" && /* @__PURE__ */ jsx(PropContainer, { title: "Animations", icon: /* @__PURE__ */ jsx(Zap, { className: "w-4 h-4" }), children: /* @__PURE__ */ jsx(
+      Animation,
+      {
+        selectedElement,
+        updateElement
+      }
+    ) })
+  ] });
+}
+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);
+};
+const useStudioOperation = (studioConfig) => {
+  const { editor, present } = useTimelineContext();
+  const [projectName, setProjectName] = useState("");
+  const onLoadProject = async () => {
+    let project;
+    if (studioConfig == null ? void 0 : studioConfig.loadProject) {
+      project = await studioConfig.loadProject();
+    } else {
+      const file = await loadFile("application/json");
+      const text = await file.text();
+      setProjectName(file.name);
+      project = JSON.parse(text);
+    }
+    console.log("Editor", editor);
+    editor.loadProject(project);
+  };
+  const onSaveProject = async () => {
+    let fileName;
+    if (projectName) {
+      fileName = projectName;
+    } else {
+      fileName = prompt("Enter the name of the project") || "untitled-project";
+      fileName = fileName + ".json";
+      setProjectName(fileName);
+    }
+    if ((studioConfig == null ? void 0 : studioConfig.saveProject) && present) {
+      await studioConfig.saveProject(present, fileName);
+    } else {
+      const file = await saveAsFile(
+        JSON.stringify(present),
+        "application/json",
+        fileName
+      );
+      if (file) {
+        console.log("File saved", file);
+      }
+    }
+  };
+  const onExportVideo = async () => {
+    var _a, _b;
+    if ((studioConfig == null ? void 0 : studioConfig.exportVideo) && present) {
+      await studioConfig.exportVideo(present, {
+        outFile: "output.mp4",
+        fps: 30,
+        resolution: {
+          width: (_a = studioConfig.videoProps) == null ? void 0 : _a.width,
+          height: (_b = studioConfig.videoProps) == null ? void 0 : _b.height
+        }
+      });
+    } else {
+      alert("Export video not supported in demo mode");
+    }
+  };
+  return { onLoadProject, onSaveProject, onExportVideo };
+};
+function TwickStudio({ studioConfig }) {
+  var _a;
+  const {
+    selectedTool,
+    setSelectedTool,
+    selectedProp,
+    setSelectedProp,
+    selectedElement,
+    addElement,
+    updateElement
+  } = useStudioManager();
+  const { videoResolution, setVideoResolution } = useTimelineContext();
+  const { onLoadProject, onSaveProject, onExportVideo } = useStudioOperation(studioConfig);
+  const twickStudiConfig = useMemo(
+    () => ({
+      canvasMode: true,
+      ...studioConfig || {},
+      videoProps: {
+        ...(studioConfig == null ? void 0 : studioConfig.videoProps) || {},
+        width: videoResolution.width,
+        height: videoResolution.height
+      }
+    }),
+    [videoResolution, studioConfig]
+  );
+  return /* @__PURE__ */ jsx(MediaProvider, { children: /* @__PURE__ */ jsxs("div", { className: "h-screen w-screen overflow-hidden bg-neutral-900 text-gray-100", children: [
+    /* @__PURE__ */ jsx(
+      StudioHeader,
+      {
+        setVideoResolution,
+        onLoadProject,
+        onSaveProject,
+        onExportVideo
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100vh-56px)]", children: [
+      /* @__PURE__ */ jsx(
+        Toolbar,
+        {
+          selectedTool,
+          setSelectedTool
+        }
+      ),
+      /* @__PURE__ */ jsx("aside", { className: "border-r border-gray-600/50 backdrop-blur-md shadow-lg", children: /* @__PURE__ */ jsx(
+        ElementPanelContainer,
+        {
+          videoResolution,
+          selectedTool,
+          setSelectedTool,
+          selectedElement,
+          addElement,
+          updateElement
+        }
+      ) }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 flex flex-col bg-neutral-700 main-container", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-1", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "canvas-container",
+          style: {
+            maxWidth: ((_a = twickStudiConfig.playerProps) == null ? void 0 : _a.maxWidth) ?? 960
+          },
+          children: /* @__PURE__ */ jsx(VideoEditor, { editorConfig: twickStudiConfig })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx("aside", { className: "border-r border-gray-600/50 backdrop-blur-md shadow-lg", children: /* @__PURE__ */ jsx(
+        PropertiesPanelContainer,
+        {
+          selectedProp,
+          selectedElement,
+          updateElement
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PropsToolbar,
+        {
+          selectedElement,
+          selectedProp,
+          setSelectedProp
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  AudioPanel,
+  CirclePanel,
+  IconPanel,
+  ImagePanel,
+  RectPanel,
+  StudioHeader,
+  SubtitlesPanel,
+  TextPanel,
+  Toolbar,
+  TwickStudio,
+  VideoPanel,
+  TwickStudio as default,
+  useStudioManager
+};
+//# sourceMappingURL=index.mjs.map