dialkit 1.4.0 → 1.4.1

package/dist/solid/index.js

@@ -2449,6 +2449,10 @@ var ICON_PAUSE = [
   "M16.75 3C15.2312 3 14 4.23122 14 5.75V18.25C14 19.7688 15.2312 21 16.75 21H17.25C18.7688 21 20 19.7688 20 18.25V5.75C20 4.23122 18.7688 3 17.25 3H16.75Z"
 ];
 var ICON_PLAY = "M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z";
+var ICON_REPLAY = [
+  "M12 2.5C17.2466 2.50016 21.5 6.7534 21.5 12C21.5 17.2466 17.2466 21.4998 12 21.5C7.52191 21.5 3.76987 18.4025 2.76465 14.2344C2.63517 13.6975 2.96508 13.1578 3.50195 13.0283C4.03883 12.8988 4.57851 13.2288 4.70801 13.7656C5.5016 17.0563 8.46701 19.5 12 19.5C16.142 19.4998 19.5 16.142 19.5 12C19.5 7.85796 16.142 4.50016 12 4.5C9.32981 4.5 6.98389 5.89541 5.6543 8H7.5C8.05228 8 8.5 8.44772 8.5 9C8.5 9.55228 8.05228 10 7.5 10H3.5C2.94772 10 2.5 9.55228 2.5 9V5C2.5 4.44772 2.94772 4 3.5 4C4.05228 4 4.5 4.44772 4.5 5V6.16797C6.2376 3.93677 8.95063 2.5 12 2.5Z",
+  "M10 9.94043C10 9.33379 10.6826 8.97849 11.1797 9.32617L14.1221 11.3857C14.5486 11.6843 14.5486 12.3157 14.1221 12.6143L11.1797 14.6738C10.6826 15.0215 10 14.6662 10 14.0596V9.94043Z"
+];
 var ICON_TIMELINE = [
   "M18.868 10C20.8517 10.0003 22.2886 11.8914 21.7577 13.8027L20.369 18.8027C20.0083 20.1012 18.826 20.9999 17.4784 21H6.51941C5.17179 21 3.98948 20.1012 3.62878 18.8027L2.24011 13.8027C1.7092 11.8913 3.14603 10.0003 5.12976 10H18.868Z",
   "M18.9989 6.5C19.5511 6.50007 19.9989 6.94776 19.9989 7.5C19.9989 8.05224 19.5511 8.49993 18.9989 8.5H4.9989C4.44661 8.5 3.9989 8.05228 3.9989 7.5C3.9989 6.94772 4.44661 6.5 4.9989 6.5H18.9989Z",
@@ -5127,12 +5131,12 @@ _$delegateEvents12(["pointerdown", "pointermove", "pointerup"]);
 import { template as _$template18 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents14 } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
-import { use as _$use10 } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty6 } from "solid-js/web";
 import { style as _$style3 } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty6 } from "solid-js/web";
 import { setAttribute as _$setAttribute14 } from "solid-js/web";
 import { effect as _$effect16 } from "solid-js/web";
 import { insert as _$insert17 } from "solid-js/web";
+import { use as _$use10 } from "solid-js/web";
 import { memo as _$memo11 } from "solid-js/web";
 import { createComponent as _$createComponent16 } from "solid-js/web";
 import { For as For8, Show as Show11, createEffect as createEffect11, createMemo as createMemo2, createSignal as createSignal14, onCleanup as onCleanup12, onMount as onMount10 } from "solid-js";
@@ -5301,44 +5305,49 @@ function ControlRenderer(props) {
 _$delegateEvents13(["click"]);
 
 // src/solid/components/Timeline/DialTimeline.tsx
-var _tmpl$39 = /* @__PURE__ */ _$template18(`<div class="dialkit-root dialkit-timeline"><div class=dialkit-timeline-dock>`);
+var _tmpl$39 = /* @__PURE__ */ _$template18(`<div class="dialkit-root dialkit-timeline"><div class=dialkit-timeline-resize-handle role=separator aria-label="Resize timeline height"aria-orientation=horizontal title="Drag to resize timeline"></div><div class=dialkit-timeline-dock>`);
 var _tmpl$214 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none aria-hidden=true>`);
 var _tmpl$310 = /* @__PURE__ */ _$template18(`<button class=dialkit-toolbar-add><span style=position:relative;width:16px;height:16px>`);
 var _tmpl$44 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none aria-hidden=true><path fill=currentColor>`);
 var _tmpl$53 = /* @__PURE__ */ _$template18(`<svg><path fill=currentColor></svg>`, false, true, false);
-var _tmpl$62 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-overview title="Drag to scrub the full timeline"><div class=dialkit-timeline-overview-viewport></div><div class=dialkit-timeline-overview-progress></div><div class=dialkit-timeline-overview-playhead>`);
-var _tmpl$72 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-playhead-control data-edge=center role=slider aria-label="Timeline current time"aria-valuemin=0 title="Drag to scrub the timeline"><div class=dialkit-timeline-playhead-flag></div><div class=dialkit-timeline-playhead-stem>`);
-var _tmpl$82 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-row dialkit-timeline-group-row"><div class=dialkit-timeline-label><button class=dialkit-timeline-group-toggle></button><span></span></div><div class=dialkit-timeline-lane>`);
-var _tmpl$92 = /* @__PURE__ */ _$template18(`<button class=dialkit-timeline-group-toggle>`);
-var _tmpl$0 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-row><div class=dialkit-timeline-label></div><div class=dialkit-timeline-lane>`);
-var _tmpl$1 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-row dialkit-timeline-track-row"><div class=dialkit-timeline-label></div><div class=dialkit-timeline-lane>`);
-var _tmpl$102 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$112 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-body><div class=dialkit-timeline-grid><div class="dialkit-timeline-row dialkit-timeline-ruler-row"><div class=dialkit-timeline-label></div><div class=dialkit-timeline-ruler title="Drag to seek \xB7 Option-drag to zoom \xB7 Shift-drag to reset zoom">`);
-var _tmpl$122 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-section><div class=dialkit-timeline-header><div class=dialkit-timeline-identity><span class=dialkit-timeline-title></span></div><div class=dialkit-timeline-actions><button class=dialkit-toolbar-add title="Add timeline version"aria-label="Add timeline version"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true></svg></button><button class=dialkit-toolbar-add title="Copy parameters"><span style=position:relative;width:16px;height:16px></span></button><button class=dialkit-timeline-chevron>`);
-var _tmpl$132 = /* @__PURE__ */ _$template18(`<svg><path></svg>`, false, true, false);
-var _tmpl$142 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none aria-hidden=true><path stroke=currentColor stroke-width=2 stroke-linejoin=round></path><path fill=currentColor></path><path stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
-var _tmpl$152 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-tick dialkit-timeline-tick-fine">`);
-var _tmpl$162 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-tick dialkit-timeline-tick-medium">`);
-var _tmpl$172 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-tick><span class=dialkit-timeline-tick-label>`);
-var _tmpl$182 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path>`);
-var _tmpl$192 = /* @__PURE__ */ _$template18(`<div class=dialkit-root><div class=dialkit-timeline-popover role=dialog><div class=dialkit-timeline-popover-header><span class=dialkit-timeline-popover-title></span><button class=dialkit-timeline-popover-close title="Close editor"aria-label="Close editor"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M6 6L18 18M18 6L6 18"></path></svg></button></div><div class=dialkit-timeline-popover-body>`);
-var _tmpl$202 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-handle data-edge=start>`);
-var _tmpl$215 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip>`);
-var _tmpl$222 = /* @__PURE__ */ _$template18(`<span class=dialkit-timeline-loop-infinity aria-hidden=true title="Repeats indefinitely">\u221E`);
-var _tmpl$232 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-ghost aria-hidden=true>`);
-var _tmpl$242 = /* @__PURE__ */ _$template18(`<span class=dialkit-timeline-clip-ghost-segment>`);
-var _tmpl$252 = /* @__PURE__ */ _$template18(`<span class=dialkit-timeline-clip-duration>`);
-var _tmpl$262 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-handle data-edge=end>`);
-var _tmpl$272 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-segment>`);
-var _tmpl$282 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-handle>`);
+var _tmpl$62 = /* @__PURE__ */ _$template18(`<button class=dialkit-toolbar-add title=Replay aria-label=Replay><svg viewBox="0 0 24 24"fill=none aria-hidden=true>`);
+var _tmpl$72 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-overview title="Drag to scrub the full timeline"><div class=dialkit-timeline-overview-viewport></div><div class=dialkit-timeline-overview-progress></div><div class=dialkit-timeline-overview-playhead>`);
+var _tmpl$82 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-playhead-control role=slider aria-label="Timeline current time"aria-valuemin=0 title="Drag to scrub the timeline"><div class=dialkit-timeline-playhead-stem></div><div class=dialkit-timeline-playhead-anchor><div class=dialkit-timeline-playhead-flag>`);
+var _tmpl$92 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-row dialkit-timeline-group-row"><div class=dialkit-timeline-label><button class=dialkit-timeline-group-toggle></button><span></span></div><div class=dialkit-timeline-lane>`);
+var _tmpl$0 = /* @__PURE__ */ _$template18(`<button class=dialkit-timeline-group-toggle>`);
+var _tmpl$1 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-row><div class=dialkit-timeline-label></div><div class=dialkit-timeline-lane>`);
+var _tmpl$102 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-row dialkit-timeline-track-row"><div class=dialkit-timeline-label></div><div class=dialkit-timeline-lane>`);
+var _tmpl$112 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$122 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-scroll-row><div class=dialkit-timeline-label></div><div class=dialkit-timeline-horizontal-scroll aria-label="Timeline horizontal scroll"><div>`);
+var _tmpl$132 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-body><div class=dialkit-timeline-grid><div class="dialkit-timeline-row dialkit-timeline-ruler-row"><div class=dialkit-timeline-label></div><div class=dialkit-timeline-ruler title="Drag to seek \xB7 Option-drag to zoom \xB7 Shift-drag to reset zoom">`);
+var _tmpl$142 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-section><div class=dialkit-timeline-header><div class=dialkit-timeline-identity><span class=dialkit-timeline-title></span></div><div class=dialkit-timeline-actions><button class=dialkit-toolbar-add title="Add timeline version"aria-label="Add timeline version"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true></svg></button><button class=dialkit-toolbar-add title="Copy parameters"><span style=position:relative;width:16px;height:16px></span></button><button class=dialkit-timeline-chevron>`);
+var _tmpl$152 = /* @__PURE__ */ _$template18(`<svg><path></svg>`, false, true, false);
+var _tmpl$162 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none aria-hidden=true><path stroke=currentColor stroke-width=2 stroke-linejoin=round></path><path fill=currentColor></path><path stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
+var _tmpl$172 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-tick dialkit-timeline-tick-fine">`);
+var _tmpl$182 = /* @__PURE__ */ _$template18(`<div class="dialkit-timeline-tick dialkit-timeline-tick-medium">`);
+var _tmpl$192 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-tick><span class=dialkit-timeline-tick-label>`);
+var _tmpl$202 = /* @__PURE__ */ _$template18(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path>`);
+var _tmpl$215 = /* @__PURE__ */ _$template18(`<div class=dialkit-root><div class=dialkit-timeline-popover role=dialog><div class=dialkit-timeline-popover-header><span class=dialkit-timeline-popover-title></span><button class=dialkit-timeline-popover-close title="Close editor"aria-label="Close editor"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M6 6L18 18M18 6L6 18"></path></svg></button></div><div class=dialkit-timeline-popover-body>`);
+var _tmpl$222 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-handle data-edge=start>`);
+var _tmpl$232 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip>`);
+var _tmpl$242 = /* @__PURE__ */ _$template18(`<span class=dialkit-timeline-loop-infinity aria-hidden=true title="Repeats indefinitely">\u221E`);
+var _tmpl$252 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-ghost aria-hidden=true>`);
+var _tmpl$262 = /* @__PURE__ */ _$template18(`<span class=dialkit-timeline-clip-ghost-segment>`);
+var _tmpl$272 = /* @__PURE__ */ _$template18(`<span class=dialkit-timeline-clip-duration>`);
+var _tmpl$282 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-handle data-edge=end>`);
+var _tmpl$292 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-segment>`);
+var _tmpl$302 = /* @__PURE__ */ _$template18(`<div class=dialkit-timeline-clip-handle>`);
 var DRAG_THRESHOLD_PX = 3;
 var MAJOR_TICK_TARGET_PX = 140;
 var MILLISECOND_STEP = 1e-3;
 var SECOND_TICK_STEPS = [1e-3, 2e-3, 5e-3, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
 var MIN_TIMELINE_MAX_ZOOM = 8;
 var PLAYHEAD_FLAG_WIDTH = 52;
+var PLAYHEAD_FLAG_EDGE_OVERHANG = 1;
 var POPOVER_WIDTH = 280;
 var ZOOM_DRAG_DISTANCE = 180;
+var DEFAULT_DOCK_MAX_HEIGHT = 400;
+var MIN_DOCK_MAX_HEIGHT = 120;
 function DialTimeline(props) {
   const enabled = () => (props.productionEnabled ?? isDevDefault) !== false;
   return _$createComponent16(Show11, {
@@ -5354,7 +5363,10 @@ function DialTimelineDock(props) {
   const timelines = fromStore(() => TimelineStore.getTimelines(), (notify) => TimelineStore.subscribeGlobal(notify));
   const visible = fromStore(() => TimelineUiStore.getVisible(), (notify) => TimelineUiStore.subscribe(notify));
   const [mounted, setMounted] = createSignal14(false);
+  const [dockMaxHeight, setDockMaxHeight] = createSignal14(DEFAULT_DOCK_MAX_HEIGHT);
   const controllerId = /* @__PURE__ */ Symbol("dialkit-timeline-visibility");
+  let dockRef;
+  let resizeCleanup = null;
   onMount10(() => {
     setMounted(true);
     const unregister = TimelineUiStore.registerController(controllerId, {
@@ -5371,6 +5383,32 @@ function DialTimelineDock(props) {
       onVisibilityChange: props.onVisibilityChange
     });
   });
+  onCleanup12(() => resizeCleanup?.());
+  const handleResizePointerDown = (event) => {
+    if (!dockRef) return;
+    event.preventDefault();
+    event.stopPropagation();
+    resizeCleanup?.();
+    const pointerY = event.clientY;
+    const startHeight = dockRef.getBoundingClientRect().height;
+    const move = (next) => {
+      next.preventDefault();
+      const viewportMax = Math.max(MIN_DOCK_MAX_HEIGHT, window.innerHeight - 24);
+      setDockMaxHeight(clamp(startHeight + pointerY - next.clientY, MIN_DOCK_MAX_HEIGHT, viewportMax));
+    };
+    const finish = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+      resizeCleanup = null;
+    };
+    window.addEventListener("pointermove", move, {
+      passive: false
+    });
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+    resizeCleanup = finish;
+  };
   return _$createComponent16(Show11, {
     get when() {
       return _$memo11(() => !!mounted())() && timelines().length > 0;
@@ -5381,8 +5419,11 @@ function DialTimelineDock(props) {
           return document.body;
         },
         get children() {
-          var _el$ = _tmpl$39(), _el$2 = _el$.firstChild;
-          _$insert17(_el$2, _$createComponent16(For8, {
+          var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+          _el$2.$$pointerdown = handleResizePointerDown;
+          var _ref$ = dockRef;
+          typeof _ref$ === "function" ? _$use10(_ref$, _el$3) : dockRef = _el$3;
+          _$insert17(_el$3, _$createComponent16(For8, {
             get each() {
               return timelines();
             },
@@ -5400,13 +5441,15 @@ function DialTimelineDock(props) {
             })
           }));
           _$effect16((_p$) => {
-            var _v$ = props.theme ?? "system", _v$2 = !visible();
+            var _v$ = props.theme ?? "system", _v$2 = !visible(), _v$3 = `min(${dockMaxHeight()}px, calc(100vh - 24px))`;
             _v$ !== _p$.e && _$setAttribute14(_el$, "data-theme", _p$.e = _v$);
             _v$2 !== _p$.t && (_el$.hidden = _p$.t = _v$2);
+            _v$3 !== _p$.a && _$setStyleProperty6(_el$3, "max-height", _p$.a = _v$3);
             return _p$;
           }, {
             e: void 0,
-            t: void 0
+            t: void 0,
+            a: void 0
           });
           return _el$;
         }
@@ -5418,44 +5461,59 @@ function PlayPauseButton(props) {
   const playing = fromStore(() => TimelineStore.getTransport(props.id).playing, (notify) => TimelineStore.subscribe(props.id, notify));
   const label = () => playing() ? "Pause" : "Play";
   return (() => {
-    var _el$3 = _tmpl$310(), _el$4 = _el$3.firstChild;
-    _el$3.$$click = () => playing() ? TimelineStore.pause(props.id) : TimelineStore.play(props.id);
-    _$insert17(_el$4, _$createComponent16(Show11, {
+    var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild;
+    _el$4.$$click = () => playing() ? TimelineStore.pause(props.id) : TimelineStore.play(props.id);
+    _$insert17(_el$5, _$createComponent16(Show11, {
       get when() {
         return playing();
       },
       get fallback() {
         return (() => {
-          var _el$6 = _tmpl$44(), _el$7 = _el$6.firstChild;
-          _$setAttribute14(_el$7, "d", ICON_PLAY);
-          _$effect16((_$p) => _$style3(_el$6, iconStyle, _$p));
-          return _el$6;
+          var _el$7 = _tmpl$44(), _el$8 = _el$7.firstChild;
+          _$setAttribute14(_el$8, "d", ICON_PLAY);
+          _$effect16((_$p) => _$style3(_el$7, iconStyle, _$p));
+          return _el$7;
         })();
       },
       get children() {
-        var _el$5 = _tmpl$214();
-        _$insert17(_el$5, _$createComponent16(For8, {
+        var _el$6 = _tmpl$214();
+        _$insert17(_el$6, _$createComponent16(For8, {
           each: ICON_PAUSE,
           children: (path) => (() => {
-            var _el$8 = _tmpl$53();
-            _$setAttribute14(_el$8, "d", path);
-            return _el$8;
+            var _el$9 = _tmpl$53();
+            _$setAttribute14(_el$9, "d", path);
+            return _el$9;
           })()
         }));
-        _$effect16((_$p) => _$style3(_el$5, iconStyle, _$p));
-        return _el$5;
+        _$effect16((_$p) => _$style3(_el$6, iconStyle, _$p));
+        return _el$6;
       }
     }));
     _$effect16((_p$) => {
-      var _v$3 = label(), _v$4 = label();
-      _v$3 !== _p$.e && _$setAttribute14(_el$3, "title", _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute14(_el$3, "aria-label", _p$.t = _v$4);
+      var _v$4 = label(), _v$5 = label();
+      _v$4 !== _p$.e && _$setAttribute14(_el$4, "title", _p$.e = _v$4);
+      _v$5 !== _p$.t && _$setAttribute14(_el$4, "aria-label", _p$.t = _v$5);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$3;
+    return _el$4;
+  })();
+}
+function ReplayButton(props) {
+  return (() => {
+    var _el$0 = _tmpl$62(), _el$1 = _el$0.firstChild;
+    _$addEventListener(_el$0, "click", props.onReplay, true);
+    _$insert17(_el$1, _$createComponent16(For8, {
+      each: ICON_REPLAY,
+      children: (path) => (() => {
+        var _el$10 = _tmpl$53();
+        _$setAttribute14(_el$10, "d", path);
+        return _el$10;
+      })()
+    }));
+    return _el$0;
   })();
 }
 var iconStyle = {
@@ -5479,12 +5537,12 @@ function TimelineOverview(props) {
     scrub = null;
   };
   return (() => {
-    var _el$9 = _tmpl$62(), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling;
-    _el$9.addEventListener("lostpointercapture", finish);
-    _el$9.addEventListener("pointercancel", finish);
-    _el$9.$$pointerup = finish;
-    _el$9.$$pointermove = (event) => scrub && seekFromClientX(event.clientX);
-    _el$9.$$pointerdown = (event) => {
+    var _el$11 = _tmpl$72(), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling;
+    _el$11.addEventListener("lostpointercapture", finish);
+    _el$11.addEventListener("pointercancel", finish);
+    _el$11.$$pointerup = finish;
+    _el$11.$$pointermove = (event) => scrub && seekFromClientX(event.clientX);
+    _el$11.$$pointerdown = (event) => {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
       scrub = {
@@ -5495,12 +5553,12 @@ function TimelineOverview(props) {
       seekFromClientX(event.clientX);
     };
     _$effect16((_p$) => {
-      var _v$5 = (props.duration > 0 ? (props.viewEnd - props.viewStart) / props.duration * 100 : 100) < 99.999 || void 0, _v$6 = `${props.duration > 0 ? props.viewStart / props.duration * 100 : 0}%`, _v$7 = `${props.duration > 0 ? (props.viewEnd - props.viewStart) / props.duration * 100 : 100}%`, _v$8 = `${props.duration > 0 ? time() / props.duration * 100 : 0}%`, _v$9 = `${props.duration > 0 ? time() / props.duration * 100 : 0}%`;
-      _v$5 !== _p$.e && _$setAttribute14(_el$0, "data-zoomed", _p$.e = _v$5);
-      _v$6 !== _p$.t && _$setStyleProperty6(_el$0, "left", _p$.t = _v$6);
-      _v$7 !== _p$.a && _$setStyleProperty6(_el$0, "width", _p$.a = _v$7);
-      _v$8 !== _p$.o && _$setStyleProperty6(_el$1, "width", _p$.o = _v$8);
-      _v$9 !== _p$.i && _$setStyleProperty6(_el$10, "left", _p$.i = _v$9);
+      var _v$6 = (props.duration > 0 ? (props.viewEnd - props.viewStart) / props.duration * 100 : 100) < 99.999 || void 0, _v$7 = `${props.duration > 0 ? props.viewStart / props.duration * 100 : 0}%`, _v$8 = `${props.duration > 0 ? (props.viewEnd - props.viewStart) / props.duration * 100 : 100}%`, _v$9 = `${props.duration > 0 ? time() / props.duration * 100 : 0}%`, _v$0 = `${props.duration > 0 ? time() / props.duration * 100 : 0}%`;
+      _v$6 !== _p$.e && _$setAttribute14(_el$12, "data-zoomed", _p$.e = _v$6);
+      _v$7 !== _p$.t && _$setStyleProperty6(_el$12, "left", _p$.t = _v$7);
+      _v$8 !== _p$.a && _$setStyleProperty6(_el$12, "width", _p$.a = _v$8);
+      _v$9 !== _p$.o && _$setStyleProperty6(_el$13, "width", _p$.o = _v$9);
+      _v$0 !== _p$.i && _$setStyleProperty6(_el$14, "left", _p$.i = _v$0);
       return _p$;
     }, {
       e: void 0,
@@ -5509,7 +5567,7 @@ function TimelineOverview(props) {
       o: void 0,
       i: void 0
     });
-    return _el$9;
+    return _el$11;
   })();
 }
 function TimelinePlayheadFlag(props) {
@@ -5522,17 +5580,16 @@ function TimelinePlayheadFlag(props) {
   };
   onCleanup12(() => cleanup?.());
   const x = () => clamp((time() - props.viewStart) * props.pxPerSecond, 0, props.laneWidth);
-  const placement = () => {
-    const left = x() - PLAYHEAD_FLAG_WIDTH / 2;
-    return left >= props.headerClearStart && left + PLAYHEAD_FLAG_WIDTH <= props.headerClearEnd ? "raised" : "lowered";
-  };
+  const flagCenter = () => clamp(x(), PLAYHEAD_FLAG_WIDTH / 2 - PLAYHEAD_FLAG_EDGE_OVERHANG, props.laneWidth - PLAYHEAD_FLAG_WIDTH / 2 + PLAYHEAD_FLAG_EDGE_OVERHANG);
+  const flagOffset = () => flagCenter() - x();
+  const edge = () => flagOffset() > 0.5 ? "start" : flagOffset() < -0.5 ? "end" : "center";
   return _$createComponent16(Show11, {
     get when() {
       return _$memo11(() => !!(time() >= props.viewStart && time() <= props.viewEnd))() && props.laneWidth > 0;
     },
     get children() {
-      var _el$11 = _tmpl$72(), _el$12 = _el$11.firstChild;
-      _el$11.$$pointerdown = (event) => {
+      var _el$15 = _tmpl$82(), _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$17.firstChild;
+      _el$15.$$pointerdown = (event) => {
         const rect = props.ruler?.getBoundingClientRect();
         if (!rect) return;
         event.preventDefault();
@@ -5567,21 +5624,23 @@ function TimelinePlayheadFlag(props) {
         window.addEventListener("pointercancel", finish);
         cleanup = finish;
       };
-      _$insert17(_el$12, () => time().toFixed(2));
+      _$insert17(_el$18, () => time().toFixed(2));
       _$effect16((_p$) => {
-        var _v$0 = placement(), _v$1 = `calc(var(--dial-timeline-label-w) + ${x()}px)`, _v$10 = props.duration, _v$11 = time();
-        _v$0 !== _p$.e && _$setAttribute14(_el$11, "data-placement", _p$.e = _v$0);
-        _v$1 !== _p$.t && _$setStyleProperty6(_el$11, "left", _p$.t = _v$1);
-        _v$10 !== _p$.a && _$setAttribute14(_el$11, "aria-valuemax", _p$.a = _v$10);
-        _v$11 !== _p$.o && _$setAttribute14(_el$11, "aria-valuenow", _p$.o = _v$11);
+        var _v$1 = edge(), _v$10 = `calc(var(--dial-timeline-label-w) + ${x()}px)`, _v$11 = `${flagOffset()}px`, _v$12 = props.duration, _v$13 = time();
+        _v$1 !== _p$.e && _$setAttribute14(_el$15, "data-edge", _p$.e = _v$1);
+        _v$10 !== _p$.t && _$setStyleProperty6(_el$15, "left", _p$.t = _v$10);
+        _v$11 !== _p$.a && _$setStyleProperty6(_el$15, "--dial-timeline-playhead-flag-offset", _p$.a = _v$11);
+        _v$12 !== _p$.o && _$setAttribute14(_el$15, "aria-valuemax", _p$.o = _v$12);
+        _v$13 !== _p$.i && _$setAttribute14(_el$15, "aria-valuenow", _p$.i = _v$13);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0,
-        o: void 0
+        o: void 0,
+        i: void 0
       });
-      return _el$11;
+      return _el$15;
     }
   });
 }
@@ -5611,31 +5670,16 @@ function TimelineSection(props) {
     return DialStore.getActivePresetId(props.meta.id);
   };
   let laneAreaRef;
-  let titleRef;
-  let actionsRef;
+  let horizontalScrollRef;
   const [laneWidth, setLaneWidth] = createSignal14(0);
-  const [flagClearRange, setFlagClearRange] = createSignal14({
-    start: 0,
-    end: 0
-  });
   createEffect11(() => {
-    if (!open() || !laneAreaRef || !titleRef || !actionsRef) return;
+    if (!open() || !laneAreaRef) return;
     const measure = () => {
-      if (!laneAreaRef || !titleRef || !actionsRef) return;
-      const rulerRect = laneAreaRef.getBoundingClientRect();
-      const titleRect = titleRef.getBoundingClientRect();
-      const actionsRect = actionsRef.getBoundingClientRect();
-      setLaneWidth(rulerRect.width);
-      setFlagClearRange({
-        start: Math.round(titleRect.right + 10 - rulerRect.left),
-        end: Math.round(actionsRect.left - 10 - rulerRect.left)
-      });
+      if (laneAreaRef) setLaneWidth(laneAreaRef.getBoundingClientRect().width);
     };
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(laneAreaRef);
-    observer.observe(titleRef);
-    observer.observe(actionsRef);
     onCleanup12(() => observer.disconnect());
   });
   const visibleDuration = () => props.meta.duration > 0 ? props.meta.duration / zoom() : props.meta.duration;
@@ -5645,6 +5689,12 @@ function TimelineSection(props) {
   const maxZoom = () => Math.max(MIN_TIMELINE_MAX_ZOOM, laneWidth() > 0 && props.meta.duration > 0 ? MAJOR_TICK_TARGET_PX * props.meta.duration / (MILLISECOND_STEP * 10 * laneWidth()) : MIN_TIMELINE_MAX_ZOOM);
   createEffect11(() => setZoom((current) => clamp(current, 1, maxZoom())));
   createEffect11(() => setViewStart((current) => clampViewStart(current, props.meta.duration, props.meta.duration / zoom())));
+  createEffect11(() => {
+    const scroller = horizontalScrollRef;
+    const next = safeViewStart() * pxPerSecond();
+    if (!scroller || pxPerSecond() <= 0) return;
+    if (Math.abs(scroller.scrollLeft - next) > 0.5) scroller.scrollLeft = next;
+  });
   createEffect11(() => {
     if (!props.dockVisible) setPopover(null);
   });
@@ -5657,6 +5707,21 @@ function TimelineSection(props) {
     setZoom(1);
     setViewStart(0);
   };
+  const handleReplay = () => {
+    setViewStart(0);
+    TimelineStore.replay(props.meta.id);
+  };
+  const handleHorizontalScroll = (event) => {
+    if (pxPerSecond() <= 0) return;
+    setViewStart(clampViewStart(event.currentTarget.scrollLeft / pxPerSecond(), props.meta.duration, visibleDuration()));
+  };
+  const handleTimelineWheel = (event) => {
+    if (!horizontalScrollRef || zoom() <= 1) return;
+    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.shiftKey ? event.deltaY : 0;
+    if (delta === 0) return;
+    event.preventDefault();
+    horizontalScrollRef.scrollLeft += delta;
+  };
   let zoomDrag = null;
   let rulerScrub = null;
   let trackScrub = null;
@@ -5819,13 +5884,13 @@ function TimelineSection(props) {
           const group = clip.group;
           const collapsed = collapsedGroups().has(group);
           result.push((() => {
-            var _el$13 = _tmpl$82(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
-            _el$15.$$click = () => toggleGroup(group);
-            _$setAttribute14(_el$15, "data-open", !collapsed);
-            _$setAttribute14(_el$15, "title", collapsed ? "Expand layer" : "Collapse layer");
-            _$insert17(_el$15, _$createComponent16(ChevronIcon, {}));
-            _$insert17(_el$16, () => formatLabel(group));
-            return _el$13;
+            var _el$19 = _tmpl$92(), _el$20 = _el$19.firstChild, _el$21 = _el$20.firstChild, _el$22 = _el$21.nextSibling;
+            _el$21.$$click = () => toggleGroup(group);
+            _$setAttribute14(_el$21, "data-open", !collapsed);
+            _$setAttribute14(_el$21, "title", collapsed ? "Expand layer" : "Collapse layer");
+            _$insert17(_el$21, _$createComponent16(ChevronIcon, {}));
+            _$insert17(_el$22, () => formatLabel(group));
+            return _el$19;
           })());
         }
       }
@@ -5835,23 +5900,23 @@ function TimelineSection(props) {
       const stat = computeClipStaticFromValues(currentValues, clip, props.meta.duration);
       const selected = popover()?.clip.key === clip.key;
       result.push((() => {
-        var _el$17 = _tmpl$0(), _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling;
-        _$insert17(_el$18, _$createComponent16(Show11, {
+        var _el$23 = _tmpl$1(), _el$24 = _el$23.firstChild, _el$26 = _el$24.nextSibling;
+        _$insert17(_el$24, _$createComponent16(Show11, {
           when: isProps,
           get children() {
-            var _el$19 = _tmpl$92();
-            _el$19.$$click = (event) => {
+            var _el$25 = _tmpl$0();
+            _el$25.$$click = (event) => {
               event.stopPropagation();
               toggleTracks(clip.key);
             };
-            _$setAttribute14(_el$19, "data-open", tracksOpen);
-            _$setAttribute14(_el$19, "title", tracksOpen ? "Collapse properties" : "Expand properties");
-            _$insert17(_el$19, _$createComponent16(ChevronIcon, {}));
-            return _el$19;
+            _$setAttribute14(_el$25, "data-open", tracksOpen);
+            _$setAttribute14(_el$25, "title", tracksOpen ? "Collapse properties" : "Expand properties");
+            _$insert17(_el$25, _$createComponent16(ChevronIcon, {}));
+            return _el$25;
           }
         }), null);
-        _$insert17(_el$18, () => clip.label, null);
-        _$insert17(_el$20, _$createComponent16(TimelineClip, {
+        _$insert17(_el$24, () => clip.label, null);
+        _$insert17(_el$26, _$createComponent16(TimelineClip, {
           get timelineId() {
             return props.meta.id;
           },
@@ -5888,8 +5953,8 @@ function TimelineSection(props) {
           onClick: handleBarClick,
           onDrag: closePopover
         }));
-        _$effect16(() => _$setAttribute14(_el$17, "data-grouped", clip.group ? "" : void 0));
-        return _el$17;
+        _$effect16(() => _$setAttribute14(_el$23, "data-grouped", clip.group ? "" : void 0));
+        return _el$23;
       })());
       if (!tracksOpen) continue;
       for (const trackRef of clip.tracks ?? []) {
@@ -5906,9 +5971,9 @@ function TimelineSection(props) {
         };
         const trackSelected = popover()?.clip.key === trackKey;
         result.push((() => {
-          var _el$21 = _tmpl$1(), _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling;
-          _$insert17(_el$22, () => formatLabel(trackRef.prop));
-          _$insert17(_el$23, _$createComponent16(TimelineClip, {
+          var _el$27 = _tmpl$102(), _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling;
+          _$insert17(_el$28, () => formatLabel(trackRef.prop));
+          _$insert17(_el$29, _$createComponent16(TimelineClip, {
             get timelineId() {
               return props.meta.id;
             },
@@ -5948,19 +6013,17 @@ function TimelineSection(props) {
             onClick: openClipPopover,
             onDrag: closePopover
           }));
-          _$effect16(() => _$setAttribute14(_el$21, "data-grouped", clip.group ? "" : void 0));
-          return _el$21;
+          _$effect16(() => _$setAttribute14(_el$27, "data-grouped", clip.group ? "" : void 0));
+          return _el$27;
         })());
       }
     }
     return result;
   });
   return (() => {
-    var _el$24 = _tmpl$122(), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$31 = _el$29.nextSibling, _el$32 = _el$31.firstChild, _el$35 = _el$31.nextSibling;
-    var _ref$ = titleRef;
-    typeof _ref$ === "function" ? _$use10(_ref$, _el$27) : titleRef = _el$27;
-    _$insert17(_el$27, () => props.meta.name);
-    _$insert17(_el$25, _$createComponent16(Show11, {
+    var _el$30 = _tmpl$142(), _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$41 = _el$37.nextSibling;
+    _$insert17(_el$33, () => props.meta.name);
+    _$insert17(_el$31, _$createComponent16(Show11, {
       get when() {
         return !open();
       },
@@ -5981,24 +6044,25 @@ function TimelineSection(props) {
           onNavigate: centerViewAt
         });
       }
-    }), _el$28);
-    var _ref$2 = actionsRef;
-    typeof _ref$2 === "function" ? _$use10(_ref$2, _el$28) : actionsRef = _el$28;
-    _$insert17(_el$28, _$createComponent16(PlayPauseButton, {
+    }), _el$34);
+    _$insert17(_el$34, _$createComponent16(PlayPauseButton, {
       get id() {
         return props.meta.id;
       }
-    }), _el$29);
-    _el$29.$$click = handleAddPreset;
-    _$insert17(_el$30, _$createComponent16(For8, {
+    }), _el$35);
+    _$insert17(_el$34, _$createComponent16(ReplayButton, {
+      onReplay: handleReplay
+    }), _el$35);
+    _el$35.$$click = handleAddPreset;
+    _$insert17(_el$36, _$createComponent16(For8, {
       each: ICON_ADD_PRESET,
       children: (path) => (() => {
-        var _el$41 = _tmpl$132();
-        _$setAttribute14(_el$41, "d", path);
-        return _el$41;
+        var _el$51 = _tmpl$152();
+        _$setAttribute14(_el$51, "d", path);
+        return _el$51;
       })()
     }));
-    _$insert17(_el$28, _$createComponent16(PresetManager, {
+    _$insert17(_el$34, _$createComponent16(PresetManager, {
       get panelId() {
         return props.meta.id;
       },
@@ -6009,21 +6073,21 @@ function TimelineSection(props) {
         return activePresetId();
       },
       onAdd: handleAddPreset
-    }), _el$31);
-    _el$31.$$click = handleCopy;
-    _$insert17(_el$32, _$createComponent16(Show11, {
+    }), _el$37);
+    _el$37.$$click = handleCopy;
+    _$insert17(_el$38, _$createComponent16(Show11, {
       get when() {
         return copied();
       },
       get fallback() {
         return (() => {
-          var _el$42 = _tmpl$142(), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling, _el$45 = _el$44.nextSibling;
+          var _el$52 = _tmpl$162(), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling;
           _$effect16((_p$) => {
-            var _v$17 = iconStyle, _v$18 = ICON_CLIPBOARD.board, _v$19 = ICON_CLIPBOARD.sparkle, _v$20 = ICON_CLIPBOARD.body;
-            _p$.e = _$style3(_el$42, _v$17, _p$.e);
-            _v$18 !== _p$.t && _$setAttribute14(_el$43, "d", _p$.t = _v$18);
-            _v$19 !== _p$.a && _$setAttribute14(_el$44, "d", _p$.a = _v$19);
-            _v$20 !== _p$.o && _$setAttribute14(_el$45, "d", _p$.o = _v$20);
+            var _v$19 = iconStyle, _v$20 = ICON_CLIPBOARD.board, _v$21 = ICON_CLIPBOARD.sparkle, _v$22 = ICON_CLIPBOARD.body;
+            _p$.e = _$style3(_el$52, _v$19, _p$.e);
+            _v$20 !== _p$.t && _$setAttribute14(_el$53, "d", _p$.t = _v$20);
+            _v$21 !== _p$.a && _$setAttribute14(_el$54, "d", _p$.a = _v$21);
+            _v$22 !== _p$.o && _$setAttribute14(_el$55, "d", _p$.o = _v$22);
             return _p$;
           }, {
             e: void 0,
@@ -6031,69 +6095,70 @@ function TimelineSection(props) {
             a: void 0,
             o: void 0
           });
-          return _el$42;
+          return _el$52;
         })();
       },
       get children() {
-        var _el$33 = _tmpl$102(), _el$34 = _el$33.firstChild;
-        _$setAttribute14(_el$34, "d", ICON_CHECK);
-        _$effect16((_$p) => _$style3(_el$33, iconStyle, _$p));
-        return _el$33;
+        var _el$39 = _tmpl$112(), _el$40 = _el$39.firstChild;
+        _$setAttribute14(_el$40, "d", ICON_CHECK);
+        _$effect16((_$p) => _$style3(_el$39, iconStyle, _$p));
+        return _el$39;
       }
     }));
-    _el$35.$$click = () => setOpen((current) => !current);
-    _$insert17(_el$35, _$createComponent16(ChevronIcon, {}));
-    _$insert17(_el$24, _$createComponent16(Show11, {
+    _el$41.$$click = () => setOpen((current) => !current);
+    _$insert17(_el$41, _$createComponent16(ChevronIcon, {}));
+    _$insert17(_el$30, _$createComponent16(Show11, {
       get when() {
         return open();
       },
       get children() {
-        var _el$36 = _tmpl$112(), _el$37 = _el$36.firstChild, _el$38 = _el$37.firstChild, _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
-        _el$36.addEventListener("lostpointercapture", finishTrack);
-        _el$36.addEventListener("pointercancel", finishTrack);
-        _el$36.$$pointerup = finishTrack;
-        _el$36.$$pointermove = (event) => trackScrub && seekTrack(event.clientX);
-        _el$36.$$pointerdown = handleTrackPointerDown;
-        _el$40.addEventListener("lostpointercapture", finishRuler);
-        _el$40.addEventListener("pointercancel", finishRuler);
-        _el$40.$$pointerup = finishRuler;
-        _el$40.$$pointermove = handleRulerPointerMove;
-        _el$40.$$pointerdown = handleRulerPointerDown;
-        var _ref$3 = laneAreaRef;
-        typeof _ref$3 === "function" ? _$use10(_ref$3, _el$40) : laneAreaRef = _el$40;
-        _$insert17(_el$40, _$createComponent16(For8, {
+        var _el$42 = _tmpl$132(), _el$43 = _el$42.firstChild, _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling;
+        _el$42.addEventListener("lostpointercapture", finishTrack);
+        _el$42.addEventListener("pointercancel", finishTrack);
+        _el$42.$$pointerup = finishTrack;
+        _el$42.$$pointermove = (event) => trackScrub && seekTrack(event.clientX);
+        _el$42.$$pointerdown = handleTrackPointerDown;
+        _el$42.addEventListener("wheel", handleTimelineWheel);
+        _el$46.addEventListener("lostpointercapture", finishRuler);
+        _el$46.addEventListener("pointercancel", finishRuler);
+        _el$46.$$pointerup = finishRuler;
+        _el$46.$$pointermove = handleRulerPointerMove;
+        _el$46.$$pointerdown = handleRulerPointerDown;
+        var _ref$2 = laneAreaRef;
+        typeof _ref$2 === "function" ? _$use10(_ref$2, _el$46) : laneAreaRef = _el$46;
+        _$insert17(_el$46, _$createComponent16(For8, {
           get each() {
             return ticks().fine;
           },
           children: (time) => (() => {
-            var _el$46 = _tmpl$152();
-            _$effect16((_$p) => _$setStyleProperty6(_el$46, "left", `${(time - safeViewStart()) * pxPerSecond()}px`));
-            return _el$46;
+            var _el$56 = _tmpl$172();
+            _$effect16((_$p) => _$setStyleProperty6(_el$56, "left", `${(time - safeViewStart()) * pxPerSecond()}px`));
+            return _el$56;
           })()
         }), null);
-        _$insert17(_el$40, _$createComponent16(For8, {
+        _$insert17(_el$46, _$createComponent16(For8, {
           get each() {
             return ticks().medium;
           },
           children: (time) => (() => {
-            var _el$47 = _tmpl$162();
-            _$effect16((_$p) => _$setStyleProperty6(_el$47, "left", `${(time - safeViewStart()) * pxPerSecond()}px`));
-            return _el$47;
+            var _el$57 = _tmpl$182();
+            _$effect16((_$p) => _$setStyleProperty6(_el$57, "left", `${(time - safeViewStart()) * pxPerSecond()}px`));
+            return _el$57;
           })()
         }), null);
-        _$insert17(_el$40, _$createComponent16(For8, {
+        _$insert17(_el$46, _$createComponent16(For8, {
           get each() {
             return ticks().major;
           },
           children: (time) => (() => {
-            var _el$48 = _tmpl$172(), _el$49 = _el$48.firstChild;
-            _$insert17(_el$49, () => formatRulerSeconds(time, ticks().majorStep));
-            _$effect16((_$p) => _$setStyleProperty6(_el$48, "left", `${(time - safeViewStart()) * pxPerSecond()}px`));
-            return _el$48;
+            var _el$58 = _tmpl$192(), _el$59 = _el$58.firstChild;
+            _$insert17(_el$59, () => formatRulerSeconds(time, ticks().majorStep));
+            _$effect16((_$p) => _$setStyleProperty6(_el$58, "left", `${(time - safeViewStart()) * pxPerSecond()}px`));
+            return _el$58;
           })()
         }), null);
-        _$insert17(_el$37, rows, null);
-        _$insert17(_el$37, _$createComponent16(Show11, {
+        _$insert17(_el$43, rows, null);
+        _$insert17(_el$43, _$createComponent16(Show11, {
           get when() {
             return pxPerSecond() > 0;
           },
@@ -6118,20 +6183,27 @@ function TimelineSection(props) {
                 return laneWidth();
               },
               ruler: laneAreaRef,
-              get headerClearStart() {
-                return flagClearRange().start;
-              },
-              get headerClearEnd() {
-                return flagClearRange().end;
-              },
               onResetView: resetView
             });
           }
         }), null);
-        return _el$36;
+        _$insert17(_el$42, _$createComponent16(Show11, {
+          get when() {
+            return zoom() > 1;
+          },
+          get children() {
+            var _el$47 = _tmpl$122(), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling, _el$50 = _el$49.firstChild;
+            _el$49.addEventListener("scroll", handleHorizontalScroll);
+            var _ref$3 = horizontalScrollRef;
+            typeof _ref$3 === "function" ? _$use10(_ref$3, _el$49) : horizontalScrollRef = _el$49;
+            _$effect16((_$p) => _$setStyleProperty6(_el$50, "width", `${laneWidth() * zoom()}px`));
+            return _el$47;
+          }
+        }), null);
+        return _el$42;
       }
     }), null);
-    _$insert17(_el$24, _$createComponent16(Show11, {
+    _$insert17(_el$30, _$createComponent16(Show11, {
       get when() {
         return popover();
       },
@@ -6152,12 +6224,12 @@ function TimelineSection(props) {
       })
     }), null);
     _$effect16((_p$) => {
-      var _v$12 = open() || void 0, _v$13 = copied() ? "Copied parameters" : "Copy parameters", _v$14 = open(), _v$15 = open(), _v$16 = open() ? "Collapse timeline" : "Expand timeline";
-      _v$12 !== _p$.e && _$setAttribute14(_el$25, "data-open", _p$.e = _v$12);
-      _v$13 !== _p$.t && _$setAttribute14(_el$31, "aria-label", _p$.t = _v$13);
-      _v$14 !== _p$.a && _$setAttribute14(_el$35, "data-open", _p$.a = _v$14);
-      _v$15 !== _p$.o && _$setAttribute14(_el$35, "aria-expanded", _p$.o = _v$15);
-      _v$16 !== _p$.i && _$setAttribute14(_el$35, "title", _p$.i = _v$16);
+      var _v$14 = open() || void 0, _v$15 = copied() ? "Copied parameters" : "Copy parameters", _v$16 = open(), _v$17 = open(), _v$18 = open() ? "Collapse timeline" : "Expand timeline";
+      _v$14 !== _p$.e && _$setAttribute14(_el$31, "data-open", _p$.e = _v$14);
+      _v$15 !== _p$.t && _$setAttribute14(_el$37, "aria-label", _p$.t = _v$15);
+      _v$16 !== _p$.a && _$setAttribute14(_el$41, "data-open", _p$.a = _v$16);
+      _v$17 !== _p$.o && _$setAttribute14(_el$41, "aria-expanded", _p$.o = _v$17);
+      _v$18 !== _p$.i && _$setAttribute14(_el$41, "title", _p$.i = _v$18);
       return _p$;
     }, {
       e: void 0,
@@ -6166,14 +6238,14 @@ function TimelineSection(props) {
       o: void 0,
       i: void 0
     });
-    return _el$24;
+    return _el$30;
   })();
 }
 function ChevronIcon() {
   return (() => {
-    var _el$50 = _tmpl$182(), _el$51 = _el$50.firstChild;
-    _$setAttribute14(_el$51, "d", ICON_CHEVRON);
-    return _el$50;
+    var _el$60 = _tmpl$202(), _el$61 = _el$60.firstChild;
+    _$setAttribute14(_el$61, "d", ICON_CHEVRON);
+    return _el$60;
   })();
 }
 function ClipPopover(props) {
@@ -6277,12 +6349,12 @@ function ClipPopover(props) {
           return document.body;
         },
         get children() {
-          var _el$52 = _tmpl$192(), _el$53 = _el$52.firstChild, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$55.nextSibling, _el$57 = _el$54.nextSibling;
+          var _el$62 = _tmpl$215(), _el$63 = _el$62.firstChild, _el$64 = _el$63.firstChild, _el$65 = _el$64.firstChild, _el$66 = _el$65.nextSibling, _el$67 = _el$64.nextSibling;
           var _ref$4 = ref;
-          typeof _ref$4 === "function" ? _$use10(_ref$4, _el$53) : ref = _el$53;
-          _$insert17(_el$55, () => presentation().title);
-          _$addEventListener(_el$56, "click", props.onClose, true);
-          _$insert17(_el$57, _$createComponent16(ControlRenderer, {
+          typeof _ref$4 === "function" ? _$use10(_ref$4, _el$63) : ref = _el$63;
+          _$insert17(_el$65, () => presentation().title);
+          _$addEventListener(_el$66, "click", props.onClose, true);
+          _$insert17(_el$67, _$createComponent16(ControlRenderer, {
             get panelId() {
               return props.panelId;
             },
@@ -6297,15 +6369,15 @@ function ClipPopover(props) {
             }
           }));
           _$effect16((_p$) => {
-            var _v$21 = props.theme, _v$22 = position().placeAbove ? "above" : "below", _v$23 = `${position().left}px`, _v$24 = `${position().top}px`, _v$25 = `${position().width}px`, _v$26 = `${position().availableHeight}px`, _v$27 = naturalHeight() > 0 ? "visible" : "hidden", _v$28 = `Edit ${presentation().title}`;
-            _v$21 !== _p$.e && _$setAttribute14(_el$52, "data-theme", _p$.e = _v$21);
-            _v$22 !== _p$.t && _$setAttribute14(_el$53, "data-placement", _p$.t = _v$22);
-            _v$23 !== _p$.a && _$setStyleProperty6(_el$53, "left", _p$.a = _v$23);
-            _v$24 !== _p$.o && _$setStyleProperty6(_el$53, "top", _p$.o = _v$24);
-            _v$25 !== _p$.i && _$setStyleProperty6(_el$53, "width", _p$.i = _v$25);
-            _v$26 !== _p$.n && _$setStyleProperty6(_el$53, "max-height", _p$.n = _v$26);
-            _v$27 !== _p$.s && _$setStyleProperty6(_el$53, "visibility", _p$.s = _v$27);
-            _v$28 !== _p$.h && _$setAttribute14(_el$53, "aria-label", _p$.h = _v$28);
+            var _v$23 = props.theme, _v$24 = position().placeAbove ? "above" : "below", _v$25 = `${position().left}px`, _v$26 = `${position().top}px`, _v$27 = `${position().width}px`, _v$28 = `${position().availableHeight}px`, _v$29 = naturalHeight() > 0 ? "visible" : "hidden", _v$30 = `Edit ${presentation().title}`;
+            _v$23 !== _p$.e && _$setAttribute14(_el$62, "data-theme", _p$.e = _v$23);
+            _v$24 !== _p$.t && _$setAttribute14(_el$63, "data-placement", _p$.t = _v$24);
+            _v$25 !== _p$.a && _$setStyleProperty6(_el$63, "left", _p$.a = _v$25);
+            _v$26 !== _p$.o && _$setStyleProperty6(_el$63, "top", _p$.o = _v$26);
+            _v$27 !== _p$.i && _$setStyleProperty6(_el$63, "width", _p$.i = _v$27);
+            _v$28 !== _p$.n && _$setStyleProperty6(_el$63, "max-height", _p$.n = _v$28);
+            _v$29 !== _p$.s && _$setStyleProperty6(_el$63, "visibility", _p$.s = _v$29);
+            _v$30 !== _p$.h && _$setAttribute14(_el$63, "aria-label", _p$.h = _v$30);
             return _p$;
           }, {
             e: void 0,
@@ -6317,7 +6389,7 @@ function ClipPopover(props) {
             s: void 0,
             h: void 0
           });
-          return _el$52;
+          return _el$62;
         }
       });
     }
@@ -6452,23 +6524,23 @@ function TimelineClip(props) {
       return ghostCycles();
     },
     children: (cycle) => (() => {
-      var _el$61 = _tmpl$232();
-      _$insert17(_el$61, _$createComponent16(For8, {
+      var _el$71 = _tmpl$252();
+      _$insert17(_el$71, _$createComponent16(For8, {
         get each() {
           return props.steps;
         },
         children: (step) => (() => {
-          var _el$62 = _tmpl$242();
-          _$effect16((_$p) => _$setStyleProperty6(_el$62, "width", `${step.duration * props.pxPerSecond}px`));
-          return _el$62;
+          var _el$72 = _tmpl$262();
+          _$effect16((_$p) => _$setStyleProperty6(_el$72, "width", `${step.duration * props.pxPerSecond}px`));
+          return _el$72;
         })()
       }));
       _$effect16((_p$) => {
-        var _v$37 = isSteps() || void 0, _v$38 = `${(cycle.start - props.viewStart) * props.pxPerSecond + 1}px`, _v$39 = `${Math.max(1, cycle.duration * props.pxPerSecond - 2)}px`, _v$40 = props.clip.color;
-        _v$37 !== _p$.e && _$setAttribute14(_el$61, "data-steps", _p$.e = _v$37);
-        _v$38 !== _p$.t && _$setStyleProperty6(_el$61, "left", _p$.t = _v$38);
-        _v$39 !== _p$.a && _$setStyleProperty6(_el$61, "width", _p$.a = _v$39);
-        _v$40 !== _p$.o && _$setStyleProperty6(_el$61, "background", _p$.o = _v$40);
+        var _v$39 = isSteps() || void 0, _v$40 = `${(cycle.start - props.viewStart) * props.pxPerSecond + 1}px`, _v$41 = `${Math.max(1, cycle.duration * props.pxPerSecond - 2)}px`, _v$42 = props.clip.color;
+        _v$39 !== _p$.e && _$setAttribute14(_el$71, "data-steps", _p$.e = _v$39);
+        _v$40 !== _p$.t && _$setStyleProperty6(_el$71, "left", _p$.t = _v$40);
+        _v$41 !== _p$.a && _$setStyleProperty6(_el$71, "width", _p$.a = _v$41);
+        _v$42 !== _p$.o && _$setStyleProperty6(_el$71, "background", _p$.o = _v$42);
         return _p$;
       }, {
         e: void 0,
@@ -6476,16 +6548,16 @@ function TimelineClip(props) {
         a: void 0,
         o: void 0
       });
-      return _el$61;
+      return _el$71;
     })()
   }), (() => {
-    var _el$58 = _tmpl$215();
-    _el$58.addEventListener("lostpointercapture", () => finish());
-    _el$58.addEventListener("pointercancel", () => finish());
-    _el$58.$$pointerup = (event) => finish(event);
-    _el$58.$$pointermove = handlePointerMove;
-    _el$58.$$pointerdown = handlePointerDown;
-    _$insert17(_el$58, _$createComponent16(Show11, {
+    var _el$68 = _tmpl$232();
+    _el$68.addEventListener("lostpointercapture", () => finish());
+    _el$68.addEventListener("pointercancel", () => finish());
+    _el$68.$$pointerup = (event) => finish(event);
+    _el$68.$$pointermove = handlePointerMove;
+    _el$68.$$pointerdown = handlePointerDown;
+    _$insert17(_el$68, _$createComponent16(Show11, {
       get when() {
         return !props.composite;
       },
@@ -6495,9 +6567,9 @@ function TimelineClip(props) {
             return width() > 56;
           },
           get children() {
-            var _el$63 = _tmpl$252();
-            _$insert17(_el$63, durationText);
-            return _el$63;
+            var _el$73 = _tmpl$272();
+            _$insert17(_el$73, durationText);
+            return _el$73;
           }
         });
       },
@@ -6512,23 +6584,23 @@ function TimelineClip(props) {
                 return resizable();
               },
               get children() {
-                return _tmpl$202();
+                return _tmpl$222();
               }
             }), _$createComponent16(Show11, {
               get when() {
                 return width() > 56;
               },
               get children() {
-                var _el$65 = _tmpl$252();
-                _$insert17(_el$65, durationText);
-                return _el$65;
+                var _el$75 = _tmpl$272();
+                _$insert17(_el$75, durationText);
+                return _el$75;
               }
             }), _$createComponent16(Show11, {
               get when() {
                 return resizable();
               },
               get children() {
-                return _tmpl$262();
+                return _tmpl$282();
               }
             })];
           },
@@ -6540,29 +6612,29 @@ function TimelineClip(props) {
               children: (step) => {
                 const segmentWidth = () => step.duration * props.pxPerSecond;
                 return (() => {
-                  var _el$67 = _tmpl$272();
-                  _$insert17(_el$67, _$createComponent16(Show11, {
+                  var _el$77 = _tmpl$292();
+                  _$insert17(_el$77, _$createComponent16(Show11, {
                     get when() {
                       return segmentWidth() > 52;
                     },
                     get children() {
-                      var _el$68 = _tmpl$252();
-                      _$insert17(_el$68, () => formatSeconds(step.duration));
-                      return _el$68;
+                      var _el$78 = _tmpl$272();
+                      _$insert17(_el$78, () => formatSeconds(step.duration));
+                      return _el$78;
                     }
                   }));
                   _$effect16((_p$) => {
-                    var _v$41 = step.key ?? void 0, _v$42 = props.selectedStepKey === step.key || void 0, _v$43 = `${segmentWidth()}px`;
-                    _v$41 !== _p$.e && _$setAttribute14(_el$67, "data-step", _p$.e = _v$41);
-                    _v$42 !== _p$.t && _$setAttribute14(_el$67, "data-selected", _p$.t = _v$42);
-                    _v$43 !== _p$.a && _$setStyleProperty6(_el$67, "width", _p$.a = _v$43);
+                    var _v$43 = step.key ?? void 0, _v$44 = props.selectedStepKey === step.key || void 0, _v$45 = `${segmentWidth()}px`;
+                    _v$43 !== _p$.e && _$setAttribute14(_el$77, "data-step", _p$.e = _v$43);
+                    _v$44 !== _p$.t && _$setAttribute14(_el$77, "data-selected", _p$.t = _v$44);
+                    _v$45 !== _p$.a && _$setStyleProperty6(_el$77, "width", _p$.a = _v$45);
                     return _p$;
                   }, {
                     e: void 0,
                     t: void 0,
                     a: void 0
                   });
-                  return _el$67;
+                  return _el$77;
                 })();
               }
             }), _$createComponent16(For8, {
@@ -6574,17 +6646,17 @@ function TimelineClip(props) {
                   return !step.isPhysics;
                 },
                 get children() {
-                  var _el$69 = _tmpl$282();
+                  var _el$79 = _tmpl$302();
                   _$effect16((_p$) => {
-                    var _v$44 = index(), _v$45 = `${boundaries()[index()] * props.pxPerSecond - 4}px`;
-                    _v$44 !== _p$.e && _$setAttribute14(_el$69, "data-boundary", _p$.e = _v$44);
-                    _v$45 !== _p$.t && _$setStyleProperty6(_el$69, "left", _p$.t = _v$45);
+                    var _v$46 = index(), _v$47 = `${boundaries()[index()] * props.pxPerSecond - 4}px`;
+                    _v$46 !== _p$.e && _$setAttribute14(_el$79, "data-boundary", _p$.e = _v$46);
+                    _v$47 !== _p$.t && _$setStyleProperty6(_el$79, "left", _p$.t = _v$47);
                     return _p$;
                   }, {
                     e: void 0,
                     t: void 0
                   });
-                  return _el$69;
+                  return _el$79;
                 }
               })
             }), _$createComponent16(Show11, {
@@ -6592,7 +6664,7 @@ function TimelineClip(props) {
                 return !props.steps?.[0]?.isPhysics;
               },
               get children() {
-                return _tmpl$202();
+                return _tmpl$222();
               }
             })];
           }
@@ -6600,15 +6672,15 @@ function TimelineClip(props) {
       }
     }));
     _$effect16((_p$) => {
-      var _v$29 = isSteps() || void 0, _v$30 = props.composite || void 0, _v$31 = props.selected || void 0, _v$32 = dragging() || void 0, _v$33 = `${(props.at - props.viewStart) * props.pxPerSecond}px`, _v$34 = `${width()}px`, _v$35 = props.composite ? `${props.clip.color}80` : props.clip.color, _v$36 = title();
-      _v$29 !== _p$.e && _$setAttribute14(_el$58, "data-steps", _p$.e = _v$29);
-      _v$30 !== _p$.t && _$setAttribute14(_el$58, "data-composite", _p$.t = _v$30);
-      _v$31 !== _p$.a && _$setAttribute14(_el$58, "data-selected", _p$.a = _v$31);
-      _v$32 !== _p$.o && _$setAttribute14(_el$58, "data-dragging", _p$.o = _v$32);
-      _v$33 !== _p$.i && _$setStyleProperty6(_el$58, "left", _p$.i = _v$33);
-      _v$34 !== _p$.n && _$setStyleProperty6(_el$58, "width", _p$.n = _v$34);
-      _v$35 !== _p$.s && _$setStyleProperty6(_el$58, "background", _p$.s = _v$35);
-      _v$36 !== _p$.h && _$setAttribute14(_el$58, "title", _p$.h = _v$36);
+      var _v$31 = isSteps() || void 0, _v$32 = props.composite || void 0, _v$33 = props.selected || void 0, _v$34 = dragging() || void 0, _v$35 = `${(props.at - props.viewStart) * props.pxPerSecond}px`, _v$36 = `${width()}px`, _v$37 = props.composite ? `${props.clip.color}80` : props.clip.color, _v$38 = title();
+      _v$31 !== _p$.e && _$setAttribute14(_el$68, "data-steps", _p$.e = _v$31);
+      _v$32 !== _p$.t && _$setAttribute14(_el$68, "data-composite", _p$.t = _v$32);
+      _v$33 !== _p$.a && _$setAttribute14(_el$68, "data-selected", _p$.a = _v$33);
+      _v$34 !== _p$.o && _$setAttribute14(_el$68, "data-dragging", _p$.o = _v$34);
+      _v$35 !== _p$.i && _$setStyleProperty6(_el$68, "left", _p$.i = _v$35);
+      _v$36 !== _p$.n && _$setStyleProperty6(_el$68, "width", _p$.n = _v$36);
+      _v$37 !== _p$.s && _$setStyleProperty6(_el$68, "background", _p$.s = _v$37);
+      _v$38 !== _p$.h && _$setAttribute14(_el$68, "title", _p$.h = _v$38);
       return _p$;
     }, {
       e: void 0,
@@ -6620,17 +6692,17 @@ function TimelineClip(props) {
       s: void 0,
       h: void 0
     });
-    return _el$58;
+    return _el$68;
   })(), _$createComponent16(Show11, {
     get when() {
       return looping();
     },
     get children() {
-      return _tmpl$222();
+      return _tmpl$242();
     }
   })];
 }
-_$delegateEvents14(["click", "pointerdown", "pointermove", "pointerup"]);
+_$delegateEvents14(["pointerdown", "click", "pointermove", "pointerup"]);
 
 // src/solid/components/ButtonGroup.tsx
 import { template as _$template19 } from "solid-js/web";