@twick/studio 0.14.5 → 0.14.6

package/dist/index.js

@@ -471,20 +471,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const handleToolSelect = (toolId) => {
       setSelectedTool(toolId);
     };
-    return /* @__PURE__ */ jsxRuntime.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) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sidebar", children: toolCategories.map((tool) => {
       const Icon2 = getIcon$1(tool.icon);
       const isSelected = selectedTool === tool.id;
       return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        "div",
         {
           onClick: () => handleToolSelect(tool.id),
-          className: `
-              toolbar-btn group ${isSelected ? "active" : ""}
-            `,
+          className: `toolbar-btn ${isSelected ? "active" : ""}`,
           title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-4 h-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] mt-1 transition-opacity duration-200", children: tool.name })
+            /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "icon-sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toolbar-label", children: tool.name })
           ]
         },
         tool.id
@@ -515,20 +513,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         setVideoResolution({ width: 720, height: 1280 });
       }
     }, [orientation]);
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Clapperboard, { className: "w-8 h-8 text-purple-400" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-bold text-gradient-purple", children: "Twick Studio" })
+    return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Clapperboard, { className: "icon-lg accent-purple" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-gradient", children: "Twick Studio" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            className: "btn btn-ghost w-32",
+            className: "btn-ghost",
             title: "Load Project",
             onClick: onLoadProject,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(File, { className: "w-4 h-4 mr-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx(File, { className: "icon-sm" }),
               "Load Project"
             ]
           }
@@ -536,11 +534,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            className: "btn btn-ghost w-32",
+            className: "btn-ghost",
             title: "Save Draft",
             onClick: onSaveProject,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Save, { className: "w-4 h-4 mr-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Save, { className: "icon-sm" }),
               "Save Draft"
             ]
           }
@@ -548,11 +546,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            className: "btn btn-primary w-32",
+            className: "btn-primary",
             title: "Export",
             onClick: onExportVideo,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Download, { className: "w-4 h-4 mr-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Download, { className: "icon-sm" }),
               "Export"
             ]
           }
@@ -629,14 +627,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         (sub) => sub.id === id ? { ...sub, [field]: value } : sub
       ));
     };
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-white mb-6", children: "Subtitles" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 mb-6", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: "Subtitles" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
         /* @__PURE__ */ jsxRuntime.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",
+            className: "btn-primary",
             children: "Generate"
           }
         ),
@@ -644,19 +642,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           "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",
+            className: "btn-primary",
             children: "Add"
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: subtitles.map((subtitle) => /* @__PURE__ */ jsxRuntime.jsxs(
+      ] }) }),
+      subtitles.map((subtitle) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "bg-neutral-700/50 border border-gray-600 rounded-lg p-3",
+          className: "panel-section",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 mb-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Start" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Start" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
@@ -665,12 +663,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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"
+                    className: "input-dark"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "End" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "End" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
@@ -679,56 +677,61 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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"
+                    className: "input-dark"
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Subtitle Text" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Enter subtitle text",
+                  value: subtitle.text,
+                  onChange: (e) => handleUpdateSubtitle(subtitle.id, "text", e.target.value),
+                  className: "input-dark"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container justify-between", children: [
               /* @__PURE__ */ jsxRuntime.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",
+                  className: "btn-danger",
                   title: "Delete subtitle",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-sm" })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.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",
+                  className: "btn-primary",
                   title: "Save subtitle",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Check, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Check, { className: "icon-sm" })
                 }
               )
             ] })
           ]
         },
         subtitle.id
-      )) }),
-      subtitles.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-gray-400", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No subtitles yet" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: 'Click "Add" to create your first subtitle' })
-      ] })
+      )),
+      subtitles.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No subtitles yet" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: 'Click "Add" to create your first subtitle' })
+      ] }) }) })
     ] });
   }
   const FileInput = ({
     acceptFileTypes,
     onFileLoad,
     buttonText,
-    id
+    id,
+    className,
+    icon
   }) => {
     const onFileChange = (e) => {
       var _a;
@@ -757,13 +760,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "file-input-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "file",
           accept: acceptFileTypes.join(","),
-          className: "absolute w-0.1 h-0.1 opacity-0 overflow-hidden -z-10",
+          className: "file-input-hidden",
           id,
           onChange: onFileChange
         }
@@ -772,9 +775,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         "label",
         {
           htmlFor: id,
-          className: "w-full btn btn-primary flex items-center justify-center gap-2 py-2",
+          className: className || "btn-primary file-input-label",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "w-4 h-4" }),
+            icon || /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" }),
             buttonText ?? "Upload"
           ]
         }
@@ -965,7 +968,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     searchQuery,
     setSearchQuery
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "search-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -973,60 +976,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           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"
+          className: "input search-input w-full"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.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" })
+      /* @__PURE__ */ jsxRuntime.jsx(Search, { className: "search-icon" })
     ] });
   };
-  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] = react.useState(null);
     const audioRef = react.useRef(null);
@@ -1073,33 +1028,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     acceptFileTypes
   }) => {
     const { playingAudio, togglePlayPause } = useAudioPreview();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Audio Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Audio Library" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         SearchInput,
         {
           searchQuery,
           setSearchQuery: onSearchChange
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
           id: "audio-upload",
           acceptFileTypes,
           onFileLoad: onFileUpload,
-          buttonText: "Upload"
+          buttonText: "Import media",
+          className: "btn-primary w-full",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: (items || []).map((item) => {
-          var _a;
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-list", children: (items || []).map((item) => {
+          var _a, _b;
           return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              className: "media-list-item",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-list-content", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -1107,12 +1064,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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__ */ jsxRuntime.jsx(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "w-4 h-4" })
+                    className: "media-action-btn",
+                    children: playingAudio === item.id ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "icon-sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "icon-sm" })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Volume2, { className: `w-5 h-5 ${playingAudio === item.id ? "text-purple-300" : "text-purple-400"}` }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-gray-100 truncate", children: (_a = item.metadata) == null ? void 0 : _a.title }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `media-list-icon ${playingAudio === item.id ? "active" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(Volume2, { className: "icon-sm" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-list-title", children: ((_a = item.metadata) == null ? void 0 : _a.title) || ((_b = item.metadata) == null ? void 0 : _b.name) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -1120,8 +1077,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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__ */ jsxRuntime.jsx(Plus, { className: "w-3 h-3" })
+                    className: "media-action-btn",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "icon-sm" })
                   }
                 )
               ] })
@@ -1129,10 +1086,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             item.id
           );
         }) }),
-        items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.base, children: "No audio files found" }),
-          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+        items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No audio files found" }),
+          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
         ] }) })
       ] })
     ] });
@@ -1176,59 +1133,53 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onFileUpload,
     acceptFileTypes
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Image Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Image Library" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         SearchInput,
         {
           searchQuery,
           setSearchQuery: onSearchChange
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
           id: "image-upload",
           acceptFileTypes,
           onFileLoad: onFileUpload,
-          buttonText: "Upload"
+          buttonText: "Import media",
+          className: "btn-primary w-full",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 auto-rows-fr", children: (items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxRuntime.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",
+            className: "media-item",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: item.url,
-                  alt: "",
-                  className: "h-full w-full object-cover transition-transform group-hover:scale-105"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-0 transition-opacity group-hover:bg-opacity-20" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.url, alt: "", className: "media-item-content" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-actions", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Plus, { className: "w-3 h-3" })
+                  className: "media-action-btn",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "icon-sm" })
                 }
               ) })
             ]
           },
           item.id
         )) }),
-        items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.base, children: "No images found" }),
-          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+        items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No images found" }),
+          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
         ] }) })
       ] })
     ] });
@@ -1311,37 +1262,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     acceptFileTypes
   }) {
     const { playingVideo, togglePlayPause } = useVideoPreview();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Video Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Video Library" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         SearchInput,
         {
           searchQuery,
           setSearchQuery: onSearchChange
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${inputStyles.container} mb-8`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
           id: "video-upload",
           acceptFileTypes,
           onFileLoad: onFileUpload,
-          buttonText: "Upload"
+          buttonText: "Import media",
+          className: "btn-primary w-full",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 auto-rows-fr", children: (items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxRuntime.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",
+            className: "media-item",
             children: [
               /* @__PURE__ */ jsxRuntime.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"}`,
+                  className: "media-item-content",
                   ref: (el) => {
                     if (el) {
                       el.addEventListener("ended", () => {
@@ -1351,8 +1304,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute top-1 right-1 flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-duration", children: "0:13" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-actions", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -1364,8 +1317,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         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__ */ jsxRuntime.jsx(Pause, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "w-3 h-3" })
+                    className: "media-action-btn",
+                    children: playingVideo === item.id ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "icon-sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "icon-sm" })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1375,8 +1328,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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__ */ jsxRuntime.jsx(Plus, { className: "w-3 h-3" })
+                    className: "media-action-btn",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "icon-sm" })
                   }
                 )
               ] })
@@ -1384,10 +1337,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           },
           item.id
         )) }),
-        items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${inputStyles.container} flex items-center justify-center h-24`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "w-10 h-10 mx-auto mb-2 text-purple-500/50" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.base, children: "No videos found" }),
-          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.small, children: "Try adjusting your search" })
+        items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No videos found" }),
+          searchQuery && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try adjusting your search" })
         ] }) })
       ] })
     ] });
@@ -1448,23 +1401,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setStrokeWidth,
     handleApplyChanges
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Text Element" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Text Content" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            value: textContent,
-            onChange: (e) => setTextContent(e.target.value),
-            className: inputStyles.input.base
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Font Size" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Text" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: textContent,
+          placeholder: "Sample",
+          onChange: (e) => setTextContent(e.target.value),
+          className: "input-dark"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Font Size" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -1473,24 +1424,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "120",
               value: fontSize,
               onChange: (e) => setFontSize(Number(e.target.value)),
-              className: inputStyles.range.gradient
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             fontSize,
             "px"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Font" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Font" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-controls", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
               value: selectedFont,
               onChange: (e) => setSelectedFont(e.target.value),
-              className: inputStyles.input.base,
+              className: "select-dark",
               children: fonts.map((font) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: font, children: font }, font))
             }
           ),
@@ -1498,33 +1449,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             "button",
             {
               onClick: () => setIsBold(!isBold),
-              className: `${inputStyles.toggle.base} ${isBold ? inputStyles.toggle.active : inputStyles.toggle.inactive} min-w-6`,
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "B" })
+              className: `btn-icon ${isBold ? "btn-icon-active" : ""}`,
+              children: "B"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: () => setIsItalic(!isItalic),
-              className: `${inputStyles.toggle.base} ${isItalic ? inputStyles.toggle.active : inputStyles.toggle.inactive} min-w-6`,
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic", children: "I" })
+              className: `btn-icon ${isItalic ? "btn-icon-active" : ""}`,
+              children: "I"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Colors" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.small, children: "Text Color" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Colors" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-section", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Text Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
                   type: "color",
                   value: textColor,
                   onChange: (e) => setTextColor(e.target.value),
-                  className: inputStyles.color.picker
+                  className: "color-picker"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1533,21 +1484,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   type: "text",
                   value: textColor,
                   onChange: (e) => setTextColor(e.target.value),
-                  className: inputStyles.input.small
+                  className: "color-text"
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.small, children: "Stroke Color" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Stroke Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
                   type: "color",
                   value: strokeColor,
                   onChange: (e) => setStrokeColor(e.target.value),
-                  className: inputStyles.color.picker
+                  className: "color-picker"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1556,34 +1507,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   type: "text",
                   value: strokeColor,
                   onChange: (e) => setStrokeColor(e.target.value),
-                  className: inputStyles.input.small
+                  className: "color-text"
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.radio.container, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "checkbox-label", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 type: "checkbox",
-                id: "applyShadow",
                 checked: applyShadow,
                 onChange: (e) => setApplyShadow(e.target.checked),
-                className: inputStyles.radio.base
+                className: "checkbox-purple"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "applyShadow", className: inputStyles.radio.label, children: "Apply Shadow" })
-          ] }),
-          applyShadow && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.small, children: "Shadow Color" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+            "Apply Shadow"
+          ] }) }),
+          applyShadow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Shadow Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
                   type: "color",
                   value: shadowColor,
                   onChange: (e) => setShadowColor(e.target.value),
-                  className: inputStyles.color.picker
+                  className: "color-picker"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1592,16 +1542,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   type: "text",
                   value: shadowColor,
                   onChange: (e) => setShadowColor(e.target.value),
-                  className: inputStyles.input.small
+                  className: "color-text"
                 }
               )
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Stroke Width" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Stroke Width" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -1611,13 +1561,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               step: 0.1,
               value: strokeWidth,
               onChange: (e) => setStrokeWidth(Number(e.target.value)),
-              className: inputStyles.range.base
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: inputStyles.range.value, children: strokeWidth })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: strokeWidth })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleApplyChanges, className: inputStyles.button.primary, children: operation }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
     ] });
   }
   const DEFAULT_TEXT_PROPS = {
@@ -1759,7 +1709,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function IconPanel({
     icons,
     loading,
-    hasMore,
     totalIcons,
     searchQuery,
     handleSearch,
@@ -1767,44 +1716,30 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     handleDownloadIcon,
     handleLoadMore
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Icon Library" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputStyles.container, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-3", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-purple-500" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        totalIcons > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 text-sm text-gray-400", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Icon Library" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { searchQuery, setSearchQuery: handleSearch }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
+        totalIcons > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-count", children: [
           "Showing ",
           icons.length,
           " of ",
           totalIcons,
           " icons"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-3 mb-2 p-2", children: (icons || []).map((icon, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative cursor-pointer", children: [
+        loading && icons.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Loading icons..." })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "icon-grid", children: (icons || []).map((icon, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "icon-item", children: [
           /* @__PURE__ */ jsxRuntime.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",
+              className: "icon-content",
               dangerouslySetInnerHTML: { __html: icon.svg }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "icon-actions", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -1812,9 +1747,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   e.stopPropagation();
                   handleSelection(icon);
                 },
-                className: "p-1.5 bg-purple-600 hover:bg-purple-700 rounded transition-colors duration-200",
+                className: "icon-action-btn",
                 title: "Add to timeline",
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-xs", children: "+" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "icon-sm" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1824,30 +1759,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   e.stopPropagation();
                   handleDownloadIcon(icon);
                 },
-                className: "p-1.5 bg-purple-600 hover:bg-purple-700 rounded transition-colors duration-200",
+                className: "icon-action-btn",
                 title: "Download SVG",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Download, { className: "w-3 h-3 text-white" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(Download, { className: "icon-sm" })
               }
             )
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.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 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "icon-name", children: icon.name })
         ] }, index)) }),
-        hasMore && /* @__PURE__ */ jsxRuntime.jsx(
+        !loading && icons.length === 0 && searchQuery && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No icons found" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: "Try a different search term" })
+        ] }) }),
+        !loading && totalIcons && icons.length < totalIcons && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleLoadMore,
             disabled: loading,
-            className: `${inputStyles.button.primary} disabled:opacity-50 disabled:cursor-not-allowed`,
-            children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }),
-              "Loading..."
-            ] }) : "Load More"
+            className: "btn-primary",
+            children: "Load More Icons"
           }
-        ),
-        !loading && icons.length === 0 && searchQuery && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-gray-400", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No icons found" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: "Try a different search term" })
-        ] })
+        ) })
       ] })
     ] });
   }
@@ -1973,6 +1905,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     opacity,
     strokeColor,
     lineWidth,
+    operation,
     setCornerRadius,
     setFillColor,
     setOpacity,
@@ -1980,11 +1913,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setLineWidth,
     handleApplyChanges
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Rectangle" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Corner Radius" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Rectangle" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Corner Radius" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -1993,39 +1926,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "100",
               value: cornerRadius,
               onChange: (e) => setCornerRadius(Number(e.target.value)),
-              className: inputStyles.range.base
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             cornerRadius,
             "px"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Fill Color" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Fill Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "color",
               value: fillColor,
               onChange: (e) => setFillColor(e.target.value),
-              className: inputStyles.color.picker
+              className: "color-picker"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            "input",
             {
-              className: inputStyles.color.preview,
-              style: { backgroundColor: fillColor }
+              type: "text",
+              value: fillColor,
+              onChange: (e) => setFillColor(e.target.value),
+              className: "color-text"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Opacity" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Opacity" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -2034,39 +1969,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "100",
               value: opacity,
               onChange: (e) => setOpacity(Number(e.target.value)),
-              className: inputStyles.range.gradient
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             opacity,
             "%"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Stroke Color" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Stroke Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "color",
               value: strokeColor,
               onChange: (e) => setStrokeColor(e.target.value),
-              className: inputStyles.color.picker
+              className: "color-picker"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            "input",
             {
-              className: inputStyles.color.preview,
-              style: { backgroundColor: strokeColor }
+              type: "text",
+              value: strokeColor,
+              onChange: (e) => setStrokeColor(e.target.value),
+              className: "color-text"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Line Width" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Line Width" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -2075,21 +2012,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "20",
               value: lineWidth,
               onChange: (e) => setLineWidth(Number(e.target.value)),
-              className: inputStyles.range.base
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             lineWidth,
             "px"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleApplyChanges,
-          className: inputStyles.button.primary,
-          children: "Apply Changes"
+          className: "btn-primary w-full",
+          children: operation
         }
       ) })
     ] });
@@ -2140,6 +2077,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       opacity,
       strokeColor,
       lineWidth,
+      operation: selectedElement instanceof timeline.RectElement ? "Apply Changes" : "Add Rectangle",
       setCornerRadius,
       setFillColor,
       setOpacity,
@@ -2162,6 +2100,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     opacity,
     strokeColor,
     lineWidth,
+    operation,
     setRadius,
     setFillColor,
     setOpacity,
@@ -2169,11 +2108,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setLineWidth,
     handleApplyChanges
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.panel.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: inputStyles.panel.title, children: "Circle" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Radius" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Circle" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Radius" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -2182,39 +2121,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "300",
               value: radius,
               onChange: (e) => setRadius(Number(e.target.value)),
-              className: inputStyles.range.base
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             radius,
             "px"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Fill Color" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Fill Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "color",
               value: fillColor,
               onChange: (e) => setFillColor(e.target.value),
-              className: inputStyles.color.picker
+              className: "color-picker"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            "input",
             {
-              className: inputStyles.color.preview,
-              style: { backgroundColor: fillColor }
+              type: "text",
+              value: fillColor,
+              onChange: (e) => setFillColor(e.target.value),
+              className: "color-text"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Opacity" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Opacity" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -2223,39 +2164,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "100",
               value: opacity,
               onChange: (e) => setOpacity(Number(e.target.value)),
-              className: inputStyles.range.gradient
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             opacity,
             "%"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Stroke Color" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.color.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Stroke Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "color",
               value: strokeColor,
               onChange: (e) => setStrokeColor(e.target.value),
-              className: inputStyles.color.picker
+              className: "color-picker"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            "input",
             {
-              className: inputStyles.color.preview,
-              style: { backgroundColor: strokeColor }
+              type: "text",
+              value: strokeColor,
+              onChange: (e) => setStrokeColor(e.target.value),
+              className: "color-text"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.container, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: inputStyles.label.base, children: "Line Width" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputStyles.range.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Line Width" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -2264,23 +2207,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               max: "20",
               value: lineWidth,
               onChange: (e) => setLineWidth(Number(e.target.value)),
-              className: inputStyles.range.base
+              className: "slider-purple"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStyles.range.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
             lineWidth,
             "px"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handleApplyChanges,
-          className: inputStyles.button.primary,
-          children: "Apply Changes"
-        }
-      ) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
     ] });
   }
   const DEFAULT_CIRCLE_PROPS = {
@@ -2330,6 +2266,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       opacity,
       strokeColor,
       lineWidth,
+      operation: selectedElement instanceof timeline.CircleElement ? "Apply Changes" : "Add Circle",
       setRadius,
       setFillColor,
       setOpacity,
@@ -2434,9 +2371,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         case "subtitle":
           return /* @__PURE__ */ jsxRuntime.jsx(SubtitlesPanel, {});
         default:
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputStyles.panel.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "w-12 h-12 mx-auto mb-4 text-purple-500/50" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: inputStyles.label.base, children: "Select a Tool to Begin" })
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Select a Tool to Begin" })
           ] }) }) });
       }
     };
@@ -2559,23 +2496,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return sections;
     }, [selectedElement]);
-    if (!selectedElement) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.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) => {
+    react.useEffect(() => {
+      if (availableSections == null ? void 0 : availableSections.length) {
+        if (availableSections.map((section) => section.id).indexOf(selectedProp) === -1) {
+          setSelectedProp(availableSections[0].id);
+        }
+      }
+    }, [availableSections]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sidebar", children: availableSections.map((tool) => {
       const Icon2 = getIcon(tool.icon);
       const isSelected = selectedProp === tool.id;
       return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        "div",
         {
           onClick: () => setSelectedProp(tool.id),
-          className: `
-              props-toolbar-btn group ${isSelected ? "active" : ""}
-            `,
+          className: `toolbar-btn ${isSelected ? "active" : ""}`,
           title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-4 h-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] mt-1 transition-opacity duration-200", children: tool.name })
+            /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "icon-sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "props-toolbar-label", children: tool.name })
           ]
         },
         tool.id
@@ -2590,79 +2529,75 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Position & Size"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "All Properties" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Position" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "X" }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "X" }),
             /* @__PURE__ */ jsxRuntime.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"
+                className: "input-dark"
               }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Y" }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Y" }),
             /* @__PURE__ */ jsxRuntime.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"
+                className: "input-dark"
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Opacity"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "0%" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "100%" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Opacity" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "100",
+              value: (opacity ?? 1) * 100,
+              onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
+              className: "slider-purple"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
+            Math.round((opacity ?? 1) * 100),
+            "%"
+          ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Rotation"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "0°" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "360°" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Rotation" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "360",
+              value: rotation ?? 0,
+              onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
+              className: "slider-purple"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
+            rotation ?? 0,
+            "°"
+          ] })
         ] })
       ] })
     ] });
@@ -2695,18 +2630,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       selectedElement.setTextEffect(effect);
       updateElement == null ? void 0 : updateElement(selectedElement);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Text Effect Type"
-        ] }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Text Effects" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Text Effect Type" }),
         /* @__PURE__ */ jsxRuntime.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",
+            className: "select-dark w-full",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "No Effect" }),
               VideoEditor.TEXT_EFFECTS.map((effect) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: effect.name, children: effect.name.charAt(0).toUpperCase() + effect.name.slice(1) }, effect.name))
@@ -2714,57 +2647,51 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         )
       ] }),
-      currentEffect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Effect Options"
+      currentEffect && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Delay (seconds)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "number",
+              min: "0",
+              max: "5",
+              step: "0.1",
+              value: currentEffect.getDelay() ?? 0,
+              onChange: (e) => handleUpdateEffect({ delay: Number(e.target.value) }),
+              className: "input-dark"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Delay (seconds)" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Duration (seconds)" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Buffer Time (seconds)" }),
-            /* @__PURE__ */ jsxRuntime.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"
-              }
-            )
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Duration (seconds)" }),
+          /* @__PURE__ */ jsxRuntime.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: "input-dark"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Buffer Time (seconds)" }),
+          /* @__PURE__ */ jsxRuntime.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: "input-dark"
+            }
+          )
         ] })
       ] })
     ] });
@@ -2824,18 +2751,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       selectedElement.setAnimation(animation);
       updateElement == null ? void 0 : updateElement(selectedElement);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Animation Type"
-        ] }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Animations" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Type" }),
         /* @__PURE__ */ jsxRuntime.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",
+            className: "select-dark w-full",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "No Animation" }),
               VideoEditor.ANIMATIONS.map((animation) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: animation.name, children: animation.name.charAt(0).toUpperCase() + animation.name.slice(1) }, animation.name))
@@ -2843,66 +2768,62 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         )
       ] }),
-      currentAnimation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-          "Animation Options"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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 = VideoEditor.ANIMATIONS.find(
-            (a) => a.name === currentAnimation.getName()
-          );
-          if (!animationDef || !animationDef.options) return null;
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            ((_a = animationDef.options) == null ? void 0 : _a.animate) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "When to Animate" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
-                }
-              )
-            ] }),
-            ((_c = animationDef.options) == null ? void 0 : _c.direction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Direction" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
-                }
-              )
-            ] }),
-            ((_e = animationDef.options) == null ? void 0 : _e.mode) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Mode" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
-                }
-              )
-            ] }),
-            ((_g = animationDef.options) == null ? void 0 : _g.duration) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Duration (seconds)" }),
+      currentAnimation && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+        const animationDef = VideoEditor.ANIMATIONS.find(
+          (a) => a.name === currentAnimation.getName()
+        );
+        if (!animationDef || !animationDef.options) return null;
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          ((_a = animationDef.options) == null ? void 0 : _a.animate) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "When to Animate" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: currentAnimation.getAnimate(),
+                onChange: (e) => handleUpdateAnimation({
+                  animate: e.target.value
+                }),
+                className: "select-dark w-full",
+                children: (_b = animationDef.options) == null ? void 0 : _b.animate.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+              }
+            )
+          ] }),
+          ((_c = animationDef.options) == null ? void 0 : _c.direction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Direction" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: currentAnimation.getDirection(),
+                onChange: (e) => handleUpdateAnimation({
+                  direction: e.target.value
+                }),
+                className: "select-dark w-full",
+                children: (_d = animationDef.options) == null ? void 0 : _d.direction.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+              }
+            )
+          ] }),
+          ((_e = animationDef.options) == null ? void 0 : _e.mode) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Mode" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: currentAnimation.getMode(),
+                onChange: (e) => handleUpdateAnimation({
+                  mode: e.target.value
+                }),
+                className: "select-dark w-full",
+                children: (_f = animationDef.options) == null ? void 0 : _f.mode.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option))
+              }
+            )
+          ] }),
+          ((_g = animationDef.options) == null ? void 0 : _g.duration) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Duration (seconds)" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
-                  type: "number",
+                  type: "range",
                   min: (_h = animationDef.options) == null ? void 0 : _h.duration[0],
                   max: (_i = animationDef.options) == null ? void 0 : _i.duration[1],
                   step: "0.1",
@@ -2910,16 +2831,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   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"
+                  className: "slider-purple"
                 }
-              )
-            ] }),
-            ((_j = animationDef.options) == null ? void 0 : _j.interval) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Interval (seconds)" }),
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: currentAnimation.getDuration() })
+            ] })
+          ] }),
+          ((_j = animationDef.options) == null ? void 0 : _j.interval) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Interval (seconds)" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
-                  type: "number",
+                  type: "range",
                   min: (_k = animationDef.options) == null ? void 0 : _k.interval[0],
                   max: (_l = animationDef.options) == null ? void 0 : _l.interval[1],
                   step: "0.1",
@@ -2927,16 +2851,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   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"
+                  className: "slider-purple"
                 }
-              )
-            ] }),
-            ((_m = animationDef.options) == null ? void 0 : _m.intensity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs text-gray-400 mb-1", children: "Intensity" }),
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: currentAnimation.getInterval() })
+            ] })
+          ] }),
+          ((_m = animationDef.options) == null ? void 0 : _m.intensity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Intensity" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
-                  type: "number",
+                  type: "range",
                   min: (_n = animationDef.options) == null ? void 0 : _n.intensity[0],
                   max: (_o = animationDef.options) == null ? void 0 : _o.intensity[1],
                   step: "0.1",
@@ -2944,13 +2871,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   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"
+                  className: "slider-purple"
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: currentAnimation.getIntensity() })
             ] })
-          ] });
-        })() })
-      ] })
+          ] })
+        ] });
+      })() })
     ] });
   }
   function PlaybackPropsPanel({
@@ -2964,42 +2892,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-800/40 rounded-lg p-2.5 border border-gray-600/20", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-xs font-semibold text-gray-200 mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-purple-400 rounded-full" }),
-        "Volume"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "3" })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Playback Properties" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Volume" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "3",
+              step: 0.1,
+              value: volume ?? 0,
+              onChange: (e) => handleUpdateElement({ volume: Number(e.target.value) }),
+              className: "slider-purple"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: volume ?? 0 })
+        ] })
       ] })
-    ] }) });
-  }
-  function PropContainer({ title, icon, children }) {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-purple-400/80", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: title })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `overflow-x-hidden overflow-y-auto p-1 transition-all duration-300 ease-in-out`,
-          children
-        }
-      )
     ] });
   }
   function PropertiesPanelContainer({
@@ -3008,58 +2920,37 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     updateElement
   }) {
     if (!selectedElement) {
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-white", children: "Select Element to see properties" }) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Select Element to see properties" }) }) });
     }
-    return /* @__PURE__ */ jsxRuntime.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: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       selectedProp === "element-props" && /* @__PURE__ */ jsxRuntime.jsx(
-        PropContainer,
+        ElementProps,
         {
-          title: "All Properties",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Settings, { className: "w-4 h-4" }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            ElementProps,
-            {
-              selectedElement,
-              updateElement
-            }
-          )
+          selectedElement,
+          updateElement
         }
       ),
       selectedProp === "playback-props" && /* @__PURE__ */ jsxRuntime.jsx(
-        PropContainer,
+        PlaybackPropsPanel,
         {
-          title: "Playback Properties",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Music, { className: "w-4 h-4" }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            PlaybackPropsPanel,
-            {
-              selectedElement,
-              updateElement
-            }
-          )
+          selectedElement,
+          updateElement
         }
       ),
       selectedProp === "text-effects" && /* @__PURE__ */ jsxRuntime.jsx(
-        PropContainer,
+        TextEffects,
         {
-          title: "Text Effects",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Sparkles, { className: "w-4 h-4" }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            TextEffects,
-            {
-              selectedElement,
-              updateElement
-            }
-          )
+          selectedElement,
+          updateElement
         }
       ),
-      selectedProp === "animations" && /* @__PURE__ */ jsxRuntime.jsx(PropContainer, { title: "Animations", icon: /* @__PURE__ */ jsxRuntime.jsx(Zap, { className: "w-4 h-4" }), children: /* @__PURE__ */ jsxRuntime.jsx(
+      selectedProp === "animations" && /* @__PURE__ */ jsxRuntime.jsx(
         Animation,
         {
           selectedElement,
           updateElement
         }
-      ) })
+      )
     ] });
   }
   const loadFile = (accept) => {
@@ -3178,7 +3069,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }),
       [videoResolution, studioConfig]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(MediaProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-screen w-screen overflow-hidden bg-neutral-900 text-gray-100", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(MediaProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "studio-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         StudioHeader,
         {
@@ -3188,7 +3079,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           onExportVideo
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[calc(100vh-56px)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "studio-content", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,
           {
@@ -3196,7 +3087,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             setSelectedTool
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-r border-gray-600/50 backdrop-blur-md shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           ElementPanelContainer,
           {
             videoResolution,
@@ -3206,8 +3097,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             addElement,
             updateElement
           }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 flex flex-col bg-neutral-700 main-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "main-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "canvas-container",
@@ -3217,14 +3108,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             children: /* @__PURE__ */ jsxRuntime.jsx(VideoEditor, { editorConfig: twickStudiConfig })
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-r border-gray-600/50 backdrop-blur-md shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           PropertiesPanelContainer,
           {
             selectedProp,
             selectedElement,
             updateElement
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           PropsToolbar,
           {