@twick/video-editor 0.15.13 → 0.15.15

package/dist/video-editor.css

@@ -61,6 +61,34 @@
     
     /* Transitions */
     --transition-all: all 0.2s ease;
+
+    /* Elevation system */
+    --elevation-panel: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-canvas: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-scrubber: 0 0 8px rgba(139,92,246,0.8);
+
+    /* Motion */
+    --duration-fast: 120ms;
+    --duration-normal: 150ms;
+    --duration-medium: 180ms;
+    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Muted purple for hover (reduce primary purple overuse) */
+    --color-purple-muted: rgba(139, 92, 246, 0.15);
+
+    /* Typography – Level 1 Section Headers */
+    --typography-h1: 16px;
+    --typography-h1-weight: 600;
+    --typography-h1-spacing: 0.3px;
+    --typography-h1-margin: 8px 0 12px 0;
+
+    /* Typography – Level 2 Sub Labels */
+    --typography-label: 13px;
+    --typography-label-opacity: 0.8;
+
+    /* Typography – Level 3 Values */
+    --typography-value: 13px;
+    --typography-value-weight: 500;
   }
 /* ========================================
    LAYOUT UTILITIES
@@ -238,7 +266,11 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
@@ -259,7 +291,7 @@
   box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.15);
 }
 .btn:active {
-  transform: translateY(1px);
+  transform: scale(0.98);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }
 .btn:disabled {
@@ -282,7 +314,9 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease;
   background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700), var(--color-purple-800));
   color: white;
   border: 1px solid var(--color-purple-500);
@@ -291,11 +325,12 @@
 .btn-primary:hover {
   background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600), var(--color-purple-700));
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 .btn-primary:active {
   background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
   box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: scale(0.98);
 }
 .btn-primary:disabled {
   opacity: 0.6;
@@ -346,7 +381,11 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   background: rgba(64, 64, 64, 0.3);
   color: var(--color-neutral-300);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -358,7 +397,10 @@
   color: white;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
+}
+.btn-ghost:active {
+  transform: scale(0.98);
 }
 .btn-ghost:disabled {
   opacity: 0.6;
@@ -466,8 +508,8 @@
 }
 .input:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 .input-dark {
   width: 100%;
@@ -481,8 +523,8 @@
 }
 .input-dark:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 /* ========================================
    CARD UTILITIES
@@ -499,6 +541,7 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
+  background-color: var(--color-neutral-900);
   gap: 6px;
 }
 .twick-editor-view-section {
@@ -514,8 +557,8 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: #252525;
-  border-radius: 10px;
+  background-color: #141419;
+  border-radius: 0.75rem;
   overflow-x: hidden;
 }
 .twick-editor-container {
@@ -565,6 +608,45 @@
 @keyframes twick-editor-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
+}
+/* Canvas context menu (z-order: Bring to Front / Send to Back) */
+.twick-canvas-context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 160px;
+  padding: 4px 0;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+}
+.twick-canvas-context-menu-item {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  color: #e5e5e5;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+}
+.twick-canvas-context-menu-item:hover {
+  background: #3a3a3a;
+}
+.twick-canvas-context-menu-separator {
+  height: 1px;
+  margin: 4px 8px;
+  background: #444;
+}
+.twick-canvas-context-menu-item-danger:hover {
+  background: #7f1d1d;
+}
+.twick-canvas-context-menu-item.twick-canvas-context-menu-item-danger {
+  color: #fca5a5;
 }.twick-timeline-scroll-container {
   display: flex;
   flex-direction: column;
@@ -624,9 +706,9 @@
 .twick-seek-track {
   position: relative;
   width: 100%;
-  border-top: 1px solid #262626;
-  border-bottom: 1px solid #262626;
-  background-color: #171717;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background-color: #0f0f14;
 }
 
 .twick-seek-track-canvas {
@@ -647,8 +729,9 @@
   top: 0;
   left: 0;
   z-index: 30;
-  width: 1.5px;
-  background-color: #FFFFFF;
+  width: 2px;
+  background-color: var(--color-purple-400);
+  box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
 }
 
 .twick-seek-track-handle {
@@ -660,6 +743,7 @@
   transform: translate(-50%, -50%);
   background-color: #FFFFFF;
   border-radius: 25%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 
 .twick-track-element {
@@ -796,6 +880,17 @@
   margin-top: 2px;
   background-color: #474747;
 }
+
+/* Drop preview - ghost placeholder when dragging files over timeline */
+.twick-drop-preview {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+  background: rgba(96, 165, 250, 0.35);
+  border: 2px dashed rgba(96, 165, 250, 0.8);
+  border-radius: 6px;
+  transition: left 0.05s ease-out, top 0.05s ease-out;
+}
 :root {
     /* Colors */
     --color-purple-100: #f3e8ff;
@@ -846,6 +941,34 @@
     
     /* Transitions */
     --transition-all: all 0.2s ease;
+
+    /* Elevation system */
+    --elevation-panel: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-canvas: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-scrubber: 0 0 8px rgba(139,92,246,0.8);
+
+    /* Motion */
+    --duration-fast: 120ms;
+    --duration-normal: 150ms;
+    --duration-medium: 180ms;
+    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Muted purple for hover (reduce primary purple overuse) */
+    --color-purple-muted: rgba(139, 92, 246, 0.15);
+
+    /* Typography – Level 1 Section Headers */
+    --typography-h1: 16px;
+    --typography-h1-weight: 600;
+    --typography-h1-spacing: 0.3px;
+    --typography-h1-margin: 8px 0 12px 0;
+
+    /* Typography – Level 2 Sub Labels */
+    --typography-label: 13px;
+    --typography-label-opacity: 0.8;
+
+    /* Typography – Level 3 Values */
+    --typography-value: 13px;
+    --typography-value-weight: 500;
   }
 
 /* ========================================
@@ -1073,7 +1196,11 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
@@ -1097,7 +1224,7 @@
 }
 
 .btn:active {
-  transform: translateY(1px);
+  transform: scale(0.98);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -1123,7 +1250,9 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease;
   background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700), var(--color-purple-800));
   color: white;
   border: 1px solid var(--color-purple-500);
@@ -1133,12 +1262,13 @@
 .btn-primary:hover {
   background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600), var(--color-purple-700));
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .btn-primary:active {
   background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
   box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: scale(0.98);
 }
 
 .btn-primary:disabled {
@@ -1194,7 +1324,11 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   background: rgba(64, 64, 64, 0.3);
   color: var(--color-neutral-300);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1207,7 +1341,11 @@
   color: white;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
+}
+
+.btn-ghost:active {
+  transform: scale(0.98);
 }
 
 .btn-ghost:disabled {
@@ -1330,8 +1468,8 @@
 
 .input:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .input-dark {
@@ -1347,8 +1485,8 @@
 
 .input-dark:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 /* ========================================
@@ -1367,8 +1505,8 @@
 
 .player-controls {
   height: 3rem;
-  background-color: var(--color-neutral-800);
-  border-top: 1px solid var(--color-neutral-600);
+  background-color: #141419;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 0 0.5rem;
   display: flex;
   align-items: center;
@@ -1400,17 +1538,20 @@
   background: transparent;
   border: none;
   color: var(--color-neutral-400);
-  transition: var(--transition-all);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 150ms ease,
+    background-color 150ms ease;
   cursor: pointer;
 }
 
 .control-btn:hover {
   color: var(--color-neutral-100);
   background-color: var(--color-neutral-700);
+  transform: translateY(-1px);
 }
 
 .control-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.98);
   background-color: var(--color-neutral-600);
 }
 
@@ -1439,6 +1580,14 @@
   color: var(--color-purple-300);
 }
 
+.follow-btn-active {
+  color: var(--color-purple-400);
+}
+
+.follow-btn-active:hover {
+  color: var(--color-purple-300);
+}
+
 .play-pause-btn {
   padding: 0.75rem;
   color: white;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/video-editor",
-  "version": "0.15.13",
+  "version": "0.15.15",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.2",
-    "@twick/canvas": "0.15.13",
-    "@twick/live-player": "0.15.13",
-    "@twick/timeline": "0.15.13",
+    "@twick/canvas": "0.15.15",
+    "@twick/live-player": "0.15.15",
+    "@twick/timeline": "0.15.15",
     "@react-spring/web": "^10.0.1",
     "@use-gesture/react": "^10.3.0",
-    "@twick/media-utils": "0.15.13",
+    "@twick/media-utils": "0.15.15",
     "framer-motion": "^11.0.3",
     "lucide-react": "^0.511.0"
   },