@andymcloid/trakk 1.0.2 → 1.0.4

package/src/trakk.css

@@ -1,16 +1,42 @@
 /* Trakk - Timeline Editor Styles */
+
+/* CSS Custom Properties - Override these to customize Trakk */
 .timeline-editor {
+  /* Core colors */
+  --trakk-bg: #191b1d;
+  --trakk-text: #ffffff;
+  --trakk-accent: #5297FF;
+
+  /* Block colors */
+  --trakk-block-bg: #2f3134;
+  --trakk-block-bg-hover: #3a3d40;
+  --trakk-block-bg-selected: #4a7ba7;
+
+  /* Border & subtle elements */
+  --trakk-border: rgba(255, 255, 255, 0.1);
+  --trakk-border-strong: rgba(255, 255, 255, 0.3);
+
+  /* Text variations */
+  --trakk-text-muted: rgba(255, 255, 255, 0.6);
+  --trakk-text-subtle: rgba(255, 255, 255, 0.4);
+
+  /* State colors */
+  --trakk-danger: #ff6464;
+  --trakk-disabled-opacity: 0.6;
+  --trakk-locked-opacity: 0.7;
+
+  /* Base styles */
   height: 100%;
   width: 100%;
   min-height: 100px;
   position: relative;
   font-size: 12px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background-color: #191b1d;
+  background-color: var(--trakk-bg);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  color: #ffffff;
+  color: var(--trakk-text);
   box-sizing: border-box;
   user-select: none;
 }
@@ -20,7 +46,7 @@
   position: relative;
   height: 32px;
   flex: 0 0 auto;
-  background-color: #191b1d;
+  background-color: var(--trakk-bg);
   overflow: hidden;
   z-index: 150;
 }
@@ -41,7 +67,7 @@
 }
 
 .timeline-editor-time-unit {
-  border-right: 1px solid rgba(255, 255, 255, 0.15);
+  border-right: 1px solid var(--trakk-border);
   position: relative;
   box-sizing: border-box;
   height: 6px;
@@ -51,11 +77,11 @@
 
 .timeline-editor-time-unit-big {
   height: 12px;
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
+  border-right: 1px solid var(--trakk-border-strong);
 }
 
 .timeline-editor-time-unit-scale {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--trakk-text-muted);
   position: absolute;
   right: 0;
   top: 0;
@@ -84,7 +110,7 @@
 
 /* Scrollbar - Firefox fallback */
 .timeline-editor-edit-area {
-  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
+  scrollbar-color: var(--trakk-border-strong) rgba(0, 0, 0, 0.2);
   scrollbar-width: auto;
 }
 
@@ -100,12 +126,12 @@
 }
 
 .timeline-editor-edit-area::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--trakk-border-strong);
   border-radius: 10px;
 }
 
 .timeline-editor-edit-area::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.45);
+  background-color: var(--trakk-text-subtle);
 }
 
 .timeline-editor-edit-area::-webkit-scrollbar-corner {
@@ -116,18 +142,18 @@
 .timeline-editor-edit-row {
   --timeline-scale-width: 160px; /* fallback, overridden by JS */
   background-repeat: no-repeat, repeat;
-  background-image: linear-gradient(#191b1d, #191b1d), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 0);
+  background-image: linear-gradient(var(--trakk-bg), var(--trakk-bg)), linear-gradient(90deg, var(--trakk-border) 1px, transparent 0);
   background-size: var(--timeline-scale-width) 100%;
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   position: relative;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--trakk-border);
   min-height: 32px;
 }
 
 .timeline-editor-edit-row:first-child {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid var(--trakk-border);
 }
 
 .timeline-editor-edit-row::before {
@@ -154,17 +180,17 @@
   display: flex;
   align-items: center;
   padding: 0 8px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--trakk-text-muted);
   font-size: 12px;
   font-weight: 500;
-  background-color: #191b1d;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: var(--trakk-bg);
+  border-right: 1px solid var(--trakk-border);
   z-index: 2;
   pointer-events: auto;
 }
 
 .timeline-editor-row-label:hover {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--trakk-text);
 }
 
 .timeline-editor-row-label-locked::after {
@@ -207,11 +233,11 @@
 }
 
 .timeline-editor-row-delete:hover {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,100,100,0.9)'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6464'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
 }
 
 .timeline-editor-action-locked {
-  opacity: 0.7;
+  opacity: var(--trakk-locked-opacity);
 }
 
 .timeline-editor-action-delete {
@@ -235,7 +261,7 @@
 }
 
 .timeline-editor-action-delete:hover {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,100,100,0.9)'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6464'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
 }
 
 /* Action Block */
@@ -243,7 +269,7 @@
   position: absolute;
   left: 0;
   top: 4px;
-  background-color: #2f3134;
+  background-color: var(--trakk-block-bg);
   border-radius: 4px;
   cursor: move;
   user-select: none;
@@ -251,18 +277,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--trakk-border);
   box-sizing: border-box;
   transition: background-color 0.2s;
 }
 
 .timeline-editor-action:hover {
-  background-color: #3a3d40;
+  background-color: var(--trakk-block-bg-hover);
 }
 
 .timeline-editor-action.selected {
-  background-color: #4a7ba7;
-  border-color: #5297FF;
+  background-color: var(--trakk-block-bg-selected);
+  border-color: var(--trakk-accent);
 }
 
 .timeline-editor-action-left-stretch,
@@ -295,7 +321,7 @@
 
 .timeline-editor-action-left-stretch::after {
   left: 0;
-  border-left: 7px solid rgba(255, 255, 255, 0.1);
+  border-left: 7px solid var(--trakk-border);
   border-right: 7px solid transparent;
 }
 
@@ -305,7 +331,7 @@
 
 .timeline-editor-action-right-stretch::after {
   right: 0;
-  border-right: 7px solid rgba(255, 255, 255, 0.1);
+  border-right: 7px solid var(--trakk-border);
   border-left: 7px solid transparent;
 }
 
@@ -316,8 +342,8 @@
   top: 32px;
   height: calc(100% - 32px);
   box-sizing: border-box;
-  border-left: 1px solid #5297FF;
-  border-right: 1px solid #5297FF;
+  border-left: 1px solid var(--trakk-accent);
+  border-right: 1px solid var(--trakk-accent);
   transform: translateX(-50%);
   pointer-events: none;
   z-index: 100;
@@ -341,7 +367,7 @@
   left: 0;
   width: 8px;
   height: 12px;
-  background: #5297FF;
+  background: var(--trakk-accent);
   clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
 }
 
@@ -359,7 +385,7 @@
 /* Disabled state */
 .timeline-editor-disable .timeline-editor-action {
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: var(--trakk-disabled-opacity);
 }
 
 .timeline-editor-disable .timeline-editor-cursor {

package/src/trakk.js

@@ -1264,7 +1264,7 @@ export class Trakk extends HTMLElement {
         // Edit area starts at 0, account for contentPadding, add startLeft for correct time conversion
         const x = e.clientX - rect.left + this._scrollX - contentPadding + this.config.startLeft;
         const time = parserPixelToTime(x, this.config);
-        this.callbacks.onClickAction(e, { action, row, time });
+        this.callbacks.onClickAction(e, { action, row, time, button: e.button });
       }
     });
 
@@ -1288,7 +1288,7 @@ export class Trakk extends HTMLElement {
       }
     });
 
-    // Context menu event
+    // Context menu event (right-click)
     actionEl.addEventListener('contextmenu', (e) => {
       if (this.callbacks.onContextMenuAction) {
         e.preventDefault();
@@ -1296,7 +1296,7 @@ export class Trakk extends HTMLElement {
         // Edit area starts at 0, account for contentPadding, add startLeft for correct time conversion
         const x = e.clientX - rect.left + this._scrollX - contentPadding + this.config.startLeft;
         const time = parserPixelToTime(x, this.config);
-        this.callbacks.onContextMenuAction(e, { action, row, time });
+        this.callbacks.onContextMenuAction(e, { action, row, time, button: e.button });
       }
     });