@qwanyx/carousel 0.1.8 → 0.1.9

package/dist/index.js

@@ -2063,15 +2063,15 @@ function LayerItemRow({
     "div",
     {
       className: `
-        flex items-center h-8 px-2 cursor-pointer select-none
-        ${isSelected ? "bg-blue-500/20" : "hover:bg-neutral-100"}
+        flex items-center h-8 px-2 cursor-pointer select-none group
+        ${isSelected ? "bg-[#4a6fa5]/40" : "hover:bg-[#3a3a3a]"}
         ${!layer.visible ? "opacity-50" : ""}
       `,
       style: { paddingLeft: `${depth * 16 + 8}px` },
       onClick: (e) => onSelect(layer.id, e.shiftKey || e.ctrlKey || e.metaKey),
       onDoubleClick: handleDoubleClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-400 mr-2", style: { fontSize: 16 }, children: getObjectIcon() }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500 mr-2", style: { fontSize: 16 }, children: getObjectIcon() }),
         isEditing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "input",
           {
@@ -2081,10 +2081,10 @@ function LayerItemRow({
             onChange: (e) => setEditName(e.target.value),
             onBlur: handleNameSubmit,
             onKeyDown: handleKeyDown,
-            className: "flex-1 px-1 text-sm bg-white border border-blue-500 rounded outline-none",
+            className: "flex-1 px-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-blue-500 rounded outline-none",
             onClick: (e) => e.stopPropagation()
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 text-sm text-neutral-700 truncate", children: layer.name }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 text-sm text-neutral-300 truncate", children: layer.name }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
@@ -2093,9 +2093,9 @@ function LayerItemRow({
                 e.stopPropagation();
                 onToggleVisibility(layer.id);
               },
-              className: "p-0.5 hover:bg-neutral-200 rounded",
+              className: "p-0.5 hover:bg-[#4a4a4a] rounded",
               title: layer.visible ? "Hide" : "Show",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 14 }, children: layer.visible ? "visibility" : "visibility_off" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: layer.visible ? "visibility" : "visibility_off" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2105,9 +2105,9 @@ function LayerItemRow({
                 e.stopPropagation();
                 onToggleLock(layer.id);
               },
-              className: "p-0.5 hover:bg-neutral-200 rounded",
+              className: "p-0.5 hover:bg-[#4a4a4a] rounded",
               title: layer.locked ? "Unlock" : "Lock",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 14 }, children: layer.locked ? "lock" : "lock_open" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: layer.locked ? "lock" : "lock_open" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2117,9 +2117,9 @@ function LayerItemRow({
                 e.stopPropagation();
                 onDelete(layer.id);
               },
-              className: "p-0.5 hover:bg-red-100 rounded",
+              className: "p-0.5 hover:bg-red-900/50 rounded",
               title: "Delete",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-400 hover:text-red-500", style: { fontSize: 14 }, children: "delete" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500 hover:text-red-400", style: { fontSize: 14 }, children: "delete" })
             }
           )
         ] })
@@ -2180,7 +2180,7 @@ function LayerFolderRow({
       {
         className: `
           flex items-center h-8 px-2 cursor-pointer select-none
-          ${isSelected ? "bg-blue-500/20" : "hover:bg-neutral-100"}
+          ${isSelected ? "bg-[#4a6fa5]/40" : "hover:bg-[#3a3a3a]"}
           ${!folder.visible ? "opacity-50" : ""}
         `,
         style: { paddingLeft: `${depth * 16 + 8}px` },
@@ -2194,11 +2194,11 @@ function LayerFolderRow({
                 e.stopPropagation();
                 onToggleCollapsed(folder.id);
               },
-              className: "p-0.5 hover:bg-neutral-200 rounded mr-1",
+              className: "p-0.5 hover:bg-[#4a4a4a] rounded mr-1",
               children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "span",
                 {
-                  className: "material-icons text-neutral-400 transition-transform",
+                  className: "material-icons text-neutral-500 transition-transform",
                   style: {
                     fontSize: 14,
                     transform: folder.collapsed ? "rotate(-90deg)" : "rotate(0deg)"
@@ -2218,11 +2218,11 @@ function LayerFolderRow({
               onChange: (e) => setEditName(e.target.value),
               onBlur: handleNameSubmit,
               onKeyDown: handleKeyDown,
-              className: "flex-1 px-1 text-sm bg-white border border-blue-500 rounded outline-none",
+              className: "flex-1 px-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-blue-500 rounded outline-none",
               onClick: (e) => e.stopPropagation()
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1 text-sm font-medium text-neutral-800 truncate", children: folder.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-neutral-400 mr-2", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1 text-sm font-medium text-neutral-200 truncate", children: folder.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-neutral-500 mr-2", children: [
             "(",
             folder.children.length,
             ")"
@@ -2235,9 +2235,9 @@ function LayerFolderRow({
                   e.stopPropagation();
                   onToggleVisibility(folder.id);
                 },
-                className: "p-0.5 hover:bg-neutral-200 rounded",
+                className: "p-0.5 hover:bg-[#4a4a4a] rounded",
                 title: folder.visible ? "Hide" : "Show",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 14 }, children: folder.visible ? "visibility" : "visibility_off" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: folder.visible ? "visibility" : "visibility_off" })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2247,9 +2247,9 @@ function LayerFolderRow({
                   e.stopPropagation();
                   onToggleLock(folder.id);
                 },
-                className: "p-0.5 hover:bg-neutral-200 rounded",
+                className: "p-0.5 hover:bg-[#4a4a4a] rounded",
                 title: folder.locked ? "Unlock" : "Lock",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 14 }, children: folder.locked ? "lock" : "lock_open" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: folder.locked ? "lock" : "lock_open" })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2259,9 +2259,9 @@ function LayerFolderRow({
                   e.stopPropagation();
                   onDelete(folder.id);
                 },
-                className: "p-0.5 hover:bg-red-100 rounded",
+                className: "p-0.5 hover:bg-red-900/50 rounded",
                 title: "Delete folder",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-400 hover:text-red-500", style: { fontSize: 14 }, children: "delete" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-500 hover:text-red-400", style: { fontSize: 14 }, children: "delete" })
               }
             )
           ] })
@@ -2321,17 +2321,17 @@ function LayerPanel({
       layer.id
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col h-full bg-white border-r border-neutral-200", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-200", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-sm font-semibold text-neutral-700", children: "Layers" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col h-full bg-[#232323] border-r border-[#3a3a3a]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[#3a3a3a]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Layers" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             onClick: () => setShowAddMenu(!showAddMenu),
-            className: "p-1 hover:bg-neutral-100 rounded",
+            className: "p-1 hover:bg-[#3a3a3a] rounded",
             title: "Add layer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 18 }, children: "add" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 18 }, children: "add" })
           }
         ),
         showAddMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -2342,7 +2342,7 @@ function LayerPanel({
               onClick: () => setShowAddMenu(false)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-20 min-w-[140px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute right-0 top-full mt-1 bg-[#2a2a2a] rounded-lg shadow-lg border border-[#3a3a3a] py-1 z-20 min-w-[140px]", children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
@@ -2350,14 +2350,14 @@ function LayerPanel({
                   onAddFolder();
                   setShowAddMenu(false);
                 },
-                className: "w-full px-3 py-1.5 text-left text-sm hover:bg-neutral-100 flex items-center gap-2",
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-amber-500", style: { fontSize: 16 }, children: "create_new_folder" }),
                   "New Folder"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px bg-neutral-200 my-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px bg-[#3a3a3a] my-1" }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
@@ -2365,9 +2365,9 @@ function LayerPanel({
                   onAddItem("image");
                   setShowAddMenu(false);
                 },
-                className: "w-full px-3 py-1.5 text-left text-sm hover:bg-neutral-100 flex items-center gap-2",
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-blue-500", style: { fontSize: 16 }, children: "image" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-blue-400", style: { fontSize: 16 }, children: "image" }),
                   "Image"
                 ]
               }
@@ -2379,9 +2379,9 @@ function LayerPanel({
                   onAddItem("text");
                   setShowAddMenu(false);
                 },
-                className: "w-full px-3 py-1.5 text-left text-sm hover:bg-neutral-100 flex items-center gap-2",
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-green-500", style: { fontSize: 16 }, children: "text_fields" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-green-400", style: { fontSize: 16 }, children: "text_fields" }),
                   "Text"
                 ]
               }
@@ -2393,9 +2393,9 @@ function LayerPanel({
                   onAddItem("shape");
                   setShowAddMenu(false);
                 },
-                className: "w-full px-3 py-1.5 text-left text-sm hover:bg-neutral-100 flex items-center gap-2",
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-purple-500", style: { fontSize: 16 }, children: "category" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-purple-400", style: { fontSize: 16 }, children: "category" }),
                   "Shape"
                 ]
               }
@@ -2404,12 +2404,12 @@ function LayerPanel({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 overflow-y-auto", children: layers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-neutral-400 text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 overflow-y-auto", children: layers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-neutral-500 text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons mb-2", style: { fontSize: 32 }, children: "layers" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "No layers yet" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs mt-1", children: "Click + to add a layer" })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-1", children: layers.map((layer) => renderLayer(layer, 0)) }) }),
-    selectedIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-3 py-2 border-t border-neutral-200 bg-neutral-50", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-xs text-neutral-500", children: [
+    selectedIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-3 py-2 border-t border-[#3a3a3a] bg-[#1a1a1a]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-xs text-neutral-400", children: [
       selectedIds.length,
       " layer",
       selectedIds.length > 1 ? "s" : "",
@@ -2468,7 +2468,7 @@ function TimelineRuler({
     "div",
     {
       ref: rulerRef,
-      className: "relative h-6 bg-neutral-100 border-b border-neutral-300 cursor-pointer select-none",
+      className: "relative h-6 bg-[#1a1a1a] border-b border-[#3a3a3a] cursor-pointer select-none",
       style: { width: totalWidth },
       onClick: handleClick,
       children: ticks.map(({ time, isMajor }) => {
@@ -2482,14 +2482,14 @@ function TimelineRuler({
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
-                  className: `w-px ${isMajor ? "h-4 bg-neutral-400" : "h-2 bg-neutral-300"}`,
+                  className: `w-px ${isMajor ? "h-4 bg-neutral-500" : "h-2 bg-neutral-600"}`,
                   style: { marginTop: isMajor ? 0 : 8 }
                 }
               ),
               isMajor && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "span",
                 {
-                  className: "absolute text-[10px] text-neutral-500 whitespace-nowrap",
+                  className: "absolute text-[10px] text-neutral-400 whitespace-nowrap",
                   style: {
                     top: 12,
                     left: 2
@@ -2661,8 +2661,8 @@ function KeyframeTrack({
     {
       ref: trackRef,
       className: `
-        relative h-7 border-b border-neutral-200
-        ${isLayerSelected ? "bg-blue-500/10" : "hover:bg-neutral-50"}
+        relative h-7 border-b border-[#2a2a2a]
+        ${isLayerSelected ? "bg-[#4a6fa5]/20" : "hover:bg-[#2a2a2a]"}
         ${!layer.visible ? "opacity-50" : ""}
       `,
       style: {
@@ -2676,7 +2676,7 @@ function KeyframeTrack({
           {
             className: `
           absolute top-1 bottom-1 left-0 right-0 rounded
-          ${isFolder ? "bg-amber-100/50" : "bg-neutral-100"}
+          ${isFolder ? "bg-amber-900/30" : "bg-[#2a2a2a]"}
         `,
             style: { marginLeft: depth * 16 }
           }
@@ -2884,14 +2884,14 @@ function Timeline({
   const audioHeight = 48;
   const totalHeight = 24 + // Ruler
   flatLayers.length * layerHeight + (composition.audioTracks?.length ?? 0) * audioHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col h-full bg-white border-t border-neutral-200", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-neutral-200 bg-neutral-50", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col h-full bg-[#1a1a1a] border-t border-[#3a3a3a]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[#3a3a3a] bg-[#232323]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             onClick: onStop,
-            className: "p-1.5 hover:bg-neutral-200 rounded",
+            className: "p-1.5 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
             title: "Stop (go to start)",
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 18 }, children: "stop" })
           }
@@ -2900,13 +2900,13 @@ function Timeline({
           "button",
           {
             onClick: isPlaying ? onPause : onPlay,
-            className: "p-1.5 hover:bg-neutral-200 rounded",
+            className: "p-1.5 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
             title: isPlaying ? "Pause" : "Play",
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 18 }, children: isPlaying ? "pause" : "play_arrow" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "px-2 py-1 bg-neutral-900 text-white font-mono text-sm rounded", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "px-2 py-1 bg-[#0a0a0a] text-blue-400 font-mono text-sm rounded border border-[#3a3a3a]", children: [
         formatTimecode(currentTime),
         " / ",
         formatTimecode(composition.duration)
@@ -2917,7 +2917,7 @@ function Timeline({
           "button",
           {
             onClick: () => onZoomChange(Math.max(10, zoom * 0.8)),
-            className: "p-1 hover:bg-neutral-200 rounded",
+            className: "p-1 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
             title: "Zoom out",
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 16 }, children: "remove" })
           }
@@ -2930,7 +2930,7 @@ function Timeline({
           "button",
           {
             onClick: () => onZoomChange(Math.min(500, zoom * 1.25)),
-            className: "p-1 hover:bg-neutral-200 rounded",
+            className: "p-1 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
             title: "Zoom in",
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 16 }, children: "add" })
           }
@@ -2941,29 +2941,29 @@ function Timeline({
         {
           onClick: () => {
           },
-          className: `p-1.5 rounded ${snapToGrid ? "bg-blue-100 text-blue-600" : "hover:bg-neutral-200"}`,
+          className: `p-1.5 rounded ${snapToGrid ? "bg-blue-900/50 text-blue-400" : "hover:bg-[#3a3a3a] text-neutral-400"}`,
           title: "Snap to grid",
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 16 }, children: "grid_on" })
         }
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-[150px] flex-shrink-0 border-r border-neutral-200 overflow-y-auto", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-6 bg-neutral-100 border-b border-neutral-300 px-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-500", children: "Layers" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-[150px] flex-shrink-0 border-r border-[#3a3a3a] overflow-y-auto bg-[#232323]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-6 bg-[#1a1a1a] border-b border-[#3a3a3a] px-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-500", children: "Layers" }) }),
         flatLayers.map((layer) => {
           const depth = getLayerDepth(layer, composition.layers);
           return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: `
-                  h-7 border-b border-neutral-200 px-2 flex items-center
-                  ${selectedLayerIds.includes(layer.id) ? "bg-blue-500/10" : ""}
+                  h-7 border-b border-[#2a2a2a] px-2 flex items-center
+                  ${selectedLayerIds.includes(layer.id) ? "bg-[#4a6fa5]/30" : ""}
                   ${!layer.visible ? "opacity-50" : ""}
                 `,
               style: { paddingLeft: depth * 12 + 8 },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons text-neutral-400 mr-1", style: { fontSize: 12 }, children: layer.type === "folder" ? "folder" : "lens" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-700 truncate", children: layer.name })
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons text-neutral-500 mr-1", style: { fontSize: 12 }, children: layer.type === "folder" ? "folder" : "lens" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-300 truncate", children: layer.name })
               ]
             },
             layer.id
@@ -2972,10 +2972,10 @@ function Timeline({
         composition.audioTracks?.map((track) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "div",
           {
-            className: "h-12 border-b border-neutral-200 px-2 flex items-center",
+            className: "h-12 border-b border-[#2a2a2a] px-2 flex items-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons text-blue-500 mr-1", style: { fontSize: 12 }, children: "audiotrack" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-700 truncate", children: track.name })
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons text-blue-400 mr-1", style: { fontSize: 12 }, children: "audiotrack" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-300 truncate", children: track.name })
             ]
           },
           track.id
@@ -2985,7 +2985,7 @@ function Timeline({
         "div",
         {
           ref: containerRef,
-          className: "flex-1 overflow-auto relative",
+          className: "flex-1 overflow-auto relative bg-[#1e1e1e]",
           onScroll: handleScroll,
           onWheel: handleWheel,
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { width: totalWidth, minHeight: totalHeight }, children: [
@@ -3532,16 +3532,16 @@ function PropertiesPanel({
   onAddKeyframe
 }) {
   if (selectedLayers.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-white border-l border-neutral-200 flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 py-2 border-b border-neutral-200", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-700", children: "Properties" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 flex items-center justify-center text-neutral-400 text-sm p-4 text-center", children: "Select a layer to edit its properties" })
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-[#232323] border-l border-[#3a3a3a] flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 py-2 border-b border-[#3a3a3a]", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Properties" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 flex items-center justify-center text-neutral-500 text-sm p-4 text-center", children: "Select a layer to edit its properties" })
     ] });
   }
   if (selectedLayers.length > 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-white border-l border-neutral-200 flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 py-2 border-b border-neutral-200", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-700", children: "Properties" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-xs text-neutral-400", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-[#232323] border-l border-[#3a3a3a] flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 py-2 border-b border-[#3a3a3a]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Properties" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-xs text-neutral-500", children: [
           selectedLayers.length,
           " layers selected"
         ] })
@@ -3550,10 +3550,10 @@ function PropertiesPanel({
     ] });
   }
   const layer = selectedLayers[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-white border-l border-neutral-200 flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 py-2 border-b border-neutral-200", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-700", children: "Properties" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-neutral-400 truncate", children: layer.name })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-[#232323] border-l border-[#3a3a3a] flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 py-2 border-b border-[#3a3a3a]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Properties" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-neutral-500 truncate", children: layer.name })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PropertySection, { title: "Layer", children: [
@@ -3563,7 +3563,7 @@ function PropertiesPanel({
             type: "text",
             value: layer.name,
             onChange: (e) => onUpdateLayer(layer.id, { name: e.target.value }),
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded focus:outline-none focus:border-blue-500"
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Visible", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3572,7 +3572,7 @@ function PropertiesPanel({
             type: "checkbox",
             checked: layer.visible,
             onChange: (e) => onUpdateLayer(layer.id, { visible: e.target.checked }),
-            className: "w-4 h-4"
+            className: "w-4 h-4 accent-blue-500"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Locked", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3581,7 +3581,7 @@ function PropertiesPanel({
             type: "checkbox",
             checked: layer.locked,
             onChange: (e) => onUpdateLayer(layer.id, { locked: e.target.checked }),
-            className: "w-4 h-4"
+            className: "w-4 h-4 accent-blue-500"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Opacity", keyframeable: true, onAddKeyframe: () => onAddKeyframe(layer.id, "opacity"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -3594,10 +3594,10 @@ function PropertiesPanel({
               step: 0.01,
               value: layer.opacity,
               onChange: (e) => onUpdateLayer(layer.id, { opacity: parseFloat(e.target.value) }),
-              className: "flex-1"
+              className: "flex-1 accent-blue-500"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-xs text-neutral-500 w-10 text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-xs text-neutral-400 w-10 text-right", children: [
             Math.round(layer.opacity * 100),
             "%"
           ] })
@@ -3607,7 +3607,7 @@ function PropertiesPanel({
           {
             value: layer.blendMode || "normal",
             onChange: (e) => onUpdateLayer(layer.id, { blendMode: e.target.value }),
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded focus:outline-none focus:border-blue-500",
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "normal", children: "Normal" }),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "multiply", children: "Multiply" }),
@@ -3635,10 +3635,10 @@ function PropertiesPanel({
         layer.keyframes && layer.keyframes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 space-y-1", children: layer.keyframes.map((kf) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
-            className: "text-xs px-2 py-1 bg-neutral-50 rounded flex justify-between",
+            className: "text-xs px-2 py-1 bg-[#1a1a1a] rounded flex justify-between text-neutral-300",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: formatTimecode(kf.time) }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-neutral-400", children: Object.keys(kf.properties).join(", ") })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-neutral-500", children: Object.keys(kf.properties).join(", ") })
             ]
           },
           kf.id
@@ -3649,15 +3649,15 @@ function PropertiesPanel({
 }
 function PropertySection({ title, children }) {
   const [isOpen, setIsOpen] = import_react17.default.useState(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "border-b border-neutral-200", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "border-b border-[#3a3a3a]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         onClick: () => setIsOpen(!isOpen),
-        className: "w-full px-3 py-2 flex items-center justify-between hover:bg-neutral-50",
+        className: "w-full px-3 py-2 flex items-center justify-between hover:bg-[#2a2a2a]",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-semibold text-neutral-600 uppercase", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 16 }, children: isOpen ? "expand_less" : "expand_more" })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-semibold text-neutral-400 uppercase", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 16 }, children: isOpen ? "expand_less" : "expand_more" })
         ]
       }
     ),
@@ -3676,7 +3676,7 @@ function PropertyRow({
         "button",
         {
           onClick: onAddKeyframe,
-          className: "p-0.5 hover:bg-amber-100 rounded",
+          className: "p-0.5 hover:bg-amber-900/50 rounded",
           title: "Add keyframe",
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "material-icons text-amber-500", style: { fontSize: 12 }, children: "diamond" })
         }
@@ -3701,7 +3701,7 @@ function ObjectProperties({
             type: "text",
             value: object.src,
             onChange: (e) => onUpdate({ object: { ...object, src: e.target.value } }),
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded focus:outline-none focus:border-blue-500",
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500",
             placeholder: "Image URL"
           }
         ) }),
@@ -3712,7 +3712,7 @@ function ObjectProperties({
             onChange: (e) => onUpdate({
               object: { ...object, objectFit: e.target.value }
             }),
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded",
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "contain", children: "Contain" }),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "cover", children: "Cover" }),
@@ -3730,7 +3730,7 @@ function ObjectProperties({
             value: object.content,
             onChange: (e) => onUpdate({ object: { ...object, content: e.target.value } }),
             rows: 3,
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded focus:outline-none focus:border-blue-500 resize-none"
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500 resize-none"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Size", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3739,7 +3739,7 @@ function ObjectProperties({
             type: "number",
             value: object.fontSize || 16,
             onChange: (e) => onUpdate({ object: { ...object, fontSize: parseInt(e.target.value) || 16 } }),
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded"
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Color", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3748,7 +3748,7 @@ function ObjectProperties({
             type: "color",
             value: object.color || "#000000",
             onChange: (e) => onUpdate({ object: { ...object, color: e.target.value } }),
-            className: "w-8 h-6 cursor-pointer"
+            className: "w-8 h-6 cursor-pointer bg-transparent"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Align", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -3758,7 +3758,7 @@ function ObjectProperties({
             onChange: (e) => onUpdate({
               object: { ...object, textAlign: e.target.value }
             }),
-            className: "w-full px-2 py-1 text-sm border border-neutral-200 rounded",
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "left", children: "Left" }),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "center", children: "Center" }),
@@ -3775,7 +3775,7 @@ function ObjectProperties({
             type: "color",
             value: object.fill || "#cccccc",
             onChange: (e) => onUpdate({ object: { ...object, fill: e.target.value } }),
-            className: "w-8 h-6 cursor-pointer"
+            className: "w-8 h-6 cursor-pointer bg-transparent"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Stroke", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3784,7 +3784,7 @@ function ObjectProperties({
             type: "color",
             value: object.stroke || "#000000",
             onChange: (e) => onUpdate({ object: { ...object, stroke: e.target.value } }),
-            className: "w-8 h-6 cursor-pointer"
+            className: "w-8 h-6 cursor-pointer bg-transparent"
           }
         ) })
       ] });