dialkit 1.4.0 → 1.4.1

package/dist/styles.css

@@ -1453,29 +1453,52 @@
 }
 
 .dialkit-timeline-dock {
+  position: relative;
+  box-sizing: border-box;
   background: var(--dial-glass-bg);
   border: 1px solid var(--dial-border);
   border-radius: 14px;
   backdrop-filter: blur(var(--dial-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
-  padding: 10px 12px;
+  padding: 0 12px 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
-  max-height: calc(100vh - 24px);
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dial-text-tertiary) transparent;
+}
+
+.dialkit-timeline-resize-handle {
+  position: absolute;
+  top: -4px;
+  left: 0;
+  right: 0;
+  z-index: 9;
+  height: 10px;
+  cursor: ns-resize;
+  touch-action: none;
 }
 
 .dialkit-timeline-dock::-webkit-scrollbar {
-  display: none;
+  width: 8px;
+}
+
+.dialkit-timeline-dock::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dialkit-timeline-dock::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--dial-text-tertiary);
 }
 
 .dialkit-timeline-section {
   --dial-timeline-label-w: 96px;
   --dial-timeline-actions-w: 284px;
+  --dial-timeline-header-h: calc(var(--dial-row-height) + 4px);
 }
 
 .dialkit-timeline-section + .dialkit-timeline-section {
@@ -1489,10 +1512,12 @@
   align-items: center;
   gap: 12px;
   position: sticky;
-  top: -10px;
-  z-index: 4;
-  padding: 6px 0 0;
-  margin-top: -6px;
+  top: 0;
+  z-index: 7;
+  box-sizing: border-box;
+  height: var(--dial-timeline-header-h);
+  padding: 4px 0 0;
+  margin: 0;
   background: var(--dial-glass-bg);
   backdrop-filter: blur(var(--dial-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
@@ -1657,10 +1682,51 @@
 }
 
 .dialkit-timeline-body {
-  margin-top: 6px;
+  margin-top: 0;
   overflow: visible;
 }
 
+.dialkit-timeline-scroll-row {
+  position: sticky;
+  bottom: -10px;
+  z-index: 6;
+  display: grid;
+  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);
+  margin-top: 6px;
+  margin-bottom: -10px;
+  padding: 4px 0 10px;
+  background: var(--dial-glass-bg);
+  backdrop-filter: blur(var(--dial-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
+}
+
+.dialkit-timeline-horizontal-scroll {
+  min-width: 0;
+  height: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dial-text-tertiary) transparent;
+  overscroll-behavior-x: contain;
+}
+
+.dialkit-timeline-horizontal-scroll > div {
+  height: 1px;
+}
+
+.dialkit-timeline-horizontal-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+
+.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--dial-text-tertiary);
+}
+
 .dialkit-timeline-grid {
   position: relative;
   display: flex;
@@ -1704,7 +1770,13 @@
 }
 
 .dialkit-timeline-ruler-row {
+  position: sticky;
+  top: var(--dial-timeline-header-h);
+  z-index: 6;
   height: 28px;
+  background: var(--dial-glass-bg);
+  backdrop-filter: blur(var(--dial-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
 }
 
 .dialkit-timeline-tick {
@@ -1947,15 +2019,36 @@
   bottom: 0;
   width: 12px;
   margin-left: -6px;
-  z-index: 5;
   cursor: ew-resize;
   touch-action: none;
 }
 
+.dialkit-timeline-playhead-anchor {
+  position: sticky;
+  top: calc(var(--dial-timeline-header-h) + 14px);
+  z-index: 8;
+  width: 0;
+  height: 0;
+  margin-left: 6px;
+}
+
+.dialkit-timeline-playhead-anchor::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -0.75px;
+  width: 1.5px;
+  height: 14px;
+  border-radius: 1px;
+  background: var(--dial-text-root);
+  pointer-events: none;
+}
+
 .dialkit-timeline-playhead-flag {
   position: absolute;
-  top: 14px;
-  left: 50%;
+  top: 0;
+  left: calc(var(--dial-timeline-playhead-flag-offset, 0px) - 26px);
+  z-index: 1;
   width: 52px;
   height: 18px;
   padding: 0 7px;
@@ -1972,29 +2065,21 @@
   line-height: 16px;
   text-align: center;
   white-space: nowrap;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
   transition: top 0.12s ease;
 }
 
-.dialkit-timeline-playhead-control[data-placement="raised"] .dialkit-timeline-playhead-flag {
-  top: -24px;
-}
-
 .dialkit-timeline-playhead-stem {
   position: absolute;
-  top: 23px;
+  top: 28px;
   bottom: 0;
   left: 5.25px;
+  z-index: 5;
   width: 1.5px;
   border-radius: 1px;
   background: var(--dial-text-root);
   pointer-events: none;
-  transition: top 0.12s ease;
-}
-
-.dialkit-timeline-playhead-control[data-placement="raised"] .dialkit-timeline-playhead-stem {
-  top: -15px;
 }
 
 /* ── Timeline clip popover ── */
@@ -2073,13 +2158,12 @@
 
 @media (max-width: 720px) {
   .dialkit-timeline-dock {
-    padding: 10px;
+    padding: 0 10px 10px;
   }
 
   .dialkit-timeline-header {
     grid-template-columns: auto minmax(40px, 1fr) auto;
     gap: 8px;
-    top: -10px;
   }
 
   .dialkit-timeline-section {

package/dist/svelte/components/Timeline/DialTimeline.svelte

@@ -9,6 +9,9 @@
   import type { DialTheme } from '../DialRoot.svelte';
   import TimelineSection from './TimelineSection.svelte';
 
+  const DEFAULT_DOCK_MAX_HEIGHT = 400;
+  const MIN_DOCK_MAX_HEIGHT = 120;
+
   let {
     theme = 'system',
     defaultVisible = true,
@@ -29,6 +32,9 @@
   let mounted = $state(false);
   let timelines = $state<TimelineMeta[]>([]);
   let dockVisible = $state(TimelineUiStore.getVisible());
+  let dockMaxHeight = $state(DEFAULT_DOCK_MAX_HEIGHT);
+  let dockElement = $state<HTMLDivElement>();
+  let resizeCleanup: (() => void) | null = null;
 
   $effect(() => {
     if (typeof window === 'undefined') return;
@@ -61,12 +67,55 @@
       onVisibilityChange,
     });
   });
+
+  $effect(() => () => resizeCleanup?.());
+
+  function handleResizePointerDown(event: PointerEvent) {
+    if (!dockElement) return;
+    event.preventDefault();
+    event.stopPropagation();
+    resizeCleanup?.();
+
+    const pointerY = event.clientY;
+    const startHeight = dockElement.getBoundingClientRect().height;
+    const move = (next: PointerEvent) => {
+      next.preventDefault();
+      const viewportMax = Math.max(MIN_DOCK_MAX_HEIGHT, window.innerHeight - 24);
+      dockMaxHeight = Math.min(
+        viewportMax,
+        Math.max(MIN_DOCK_MAX_HEIGHT, startHeight + pointerY - next.clientY)
+      );
+    };
+    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;
+  }
 </script>
 
 {#if productionEnabled && mounted && timelines.length > 0}
   <Portal target="body">
     <div class="dialkit-root dialkit-timeline" data-theme={theme} hidden={!dockVisible}>
-      <div class="dialkit-timeline-dock">
+      <div
+        class="dialkit-timeline-resize-handle"
+        onpointerdown={handleResizePointerDown}
+        role="separator"
+        aria-label="Resize timeline height"
+        aria-orientation="horizontal"
+        title="Drag to resize timeline"
+      ></div>
+      <div
+        bind:this={dockElement}
+        class="dialkit-timeline-dock"
+        style:max-height={`min(${dockMaxHeight}px, calc(100vh - 24px))`}
+      >
         {#each timelines as timeline (timeline.id)}
           <TimelineSection meta={timeline} {defaultOpen} {theme} {dockVisible} />
         {/each}

package/dist/svelte/components/Timeline/DialTimeline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialTimeline.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/DialTimeline.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAqEJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DialTimeline.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/DialTimeline.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA2GJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/Timeline/TimelineSection.svelte

@@ -24,6 +24,7 @@
     ICON_CLIPBOARD,
     ICON_PAUSE,
     ICON_PLAY,
+    ICON_REPLAY,
   } from '../../../icons';
   import { findControl } from '../../../shortcut-utils';
   import PresetManager from '../PresetManager.svelte';
@@ -43,6 +44,7 @@
   ];
   const MIN_TIMELINE_MAX_ZOOM = 8;
   const PLAYHEAD_FLAG_WIDTH = 52;
+  const PLAYHEAD_FLAG_EDGE_OVERHANG = 1;
   const ZOOM_DRAG_DISTANCE = 180;
 
   type ZoomDragState = {
@@ -105,10 +107,8 @@
   let values = $state<Record<string, DialValue>>(DialStore.getValues(untrack(() => meta.id)));
   let transport = $state<TimelineTransport>(TimelineStore.getTransport(untrack(() => meta.id)));
   let laneArea = $state<HTMLDivElement>();
-  let titleElement = $state<HTMLSpanElement>();
-  let actionsElement = $state<HTMLDivElement>();
+  let horizontalScrollElement = $state<HTMLDivElement>();
   let laneWidth = $state(0);
-  let flagClearRange = $state({ start: 0, end: 0 });
 
   let zoomDrag: ZoomDragState | null = null;
   let rulerScrub: ScrubState | null = null;
@@ -138,12 +138,15 @@
   const playheadVisible = $derived(
     transport.time >= safeViewStart && transport.time <= viewEnd && laneWidth > 0
   );
-  const playheadPlacement = $derived.by(() => {
-    const left = playheadX - PLAYHEAD_FLAG_WIDTH / 2;
-    return left >= flagClearRange.start && left + PLAYHEAD_FLAG_WIDTH <= flagClearRange.end
-      ? 'raised'
-      : 'lowered';
-  });
+  const playheadFlagCenter = $derived(clamp(
+    playheadX,
+    PLAYHEAD_FLAG_WIDTH / 2 - PLAYHEAD_FLAG_EDGE_OVERHANG,
+    laneWidth - PLAYHEAD_FLAG_WIDTH / 2 + PLAYHEAD_FLAG_EDGE_OVERHANG
+  ));
+  const playheadFlagOffset = $derived(playheadFlagCenter - playheadX);
+  const playheadEdge = $derived(
+    playheadFlagOffset > 0.5 ? 'start' : playheadFlagOffset < -0.5 ? 'end' : 'center'
+  );
   const overviewViewportWidth = $derived(
     meta.duration > 0 ? ((viewEnd - safeViewStart) / meta.duration) * 100 : 100
   );
@@ -243,23 +246,13 @@
   });
 
   $effect(() => {
-    if (!open || !laneArea || !titleElement || !actionsElement) return;
+    if (!open || !laneArea) return;
     const measure = () => {
-      if (!laneArea || !titleElement || !actionsElement) return;
-      const rulerRect = laneArea.getBoundingClientRect();
-      const titleRect = titleElement.getBoundingClientRect();
-      const actionsRect = actionsElement.getBoundingClientRect();
-      laneWidth = rulerRect.width;
-      flagClearRange = {
-        start: Math.round(titleRect.right + 10 - rulerRect.left),
-        end: Math.round(actionsRect.left - 10 - rulerRect.left),
-      };
+      if (laneArea) laneWidth = laneArea.getBoundingClientRect().width;
     };
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(laneArea);
-    observer.observe(titleElement);
-    observer.observe(actionsElement);
     return () => observer.disconnect();
   });
 
@@ -270,6 +263,14 @@
     if (nextStart !== viewStart) viewStart = nextStart;
   });
 
+  $effect(() => {
+    if (!open || !horizontalScrollElement || pxPerSecond <= 0) return;
+    const next = safeViewStart * pxPerSecond;
+    if (Math.abs(horizontalScrollElement.scrollLeft - next) > 0.5) {
+      horizontalScrollElement.scrollLeft = next;
+    }
+  });
+
   $effect(() => {
     if (!dockVisible) popover = null;
   });
@@ -285,6 +286,32 @@
     viewStart = 0;
   }
 
+  function handleReplay() {
+    viewStart = 0;
+    TimelineStore.replay(meta.id);
+  }
+
+  function handleHorizontalScroll(event: Event) {
+    if (pxPerSecond <= 0) return;
+    viewStart = clampViewStart(
+      (event.currentTarget as HTMLDivElement).scrollLeft / pxPerSecond,
+      meta.duration,
+      visibleDuration
+    );
+  }
+
+  function handleTimelineWheel(event: WheelEvent) {
+    if (!horizontalScrollElement || 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();
+    horizontalScrollElement.scrollLeft += delta;
+  }
+
   function seek(scrub: ScrubState | null, clientX: number) {
     if (!scrub || scrub.rect.width <= 0) return;
     TimelineStore.seek(meta.id, clamp(
@@ -506,7 +533,7 @@
 <div class="dialkit-timeline-section">
   <div class="dialkit-timeline-header" data-open={open || undefined}>
     <div class="dialkit-timeline-identity">
-      <span bind:this={titleElement} class="dialkit-timeline-title">{meta.name}</span>
+      <span class="dialkit-timeline-title">{meta.name}</span>
     </div>
 
     {#if !open}
@@ -536,7 +563,7 @@
       </div>
     {/if}
 
-    <div bind:this={actionsElement} class="dialkit-timeline-actions">
+    <div class="dialkit-timeline-actions">
       <button
         class="dialkit-toolbar-add"
         onclick={() => transport.playing ? TimelineStore.pause(meta.id) : TimelineStore.play(meta.id)}
@@ -555,6 +582,11 @@
           {/if}
         </span>
       </button>
+      <button class="dialkit-toolbar-add" onclick={handleReplay} title="Replay" aria-label="Replay">
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" style="width:16px;height:16px;color:var(--dial-text-label);">
+          {#each ICON_REPLAY as path}<path d={path} fill="currentColor" />{/each}
+        </svg>
+      </button>
       <button class="dialkit-toolbar-add" onclick={handleAddPreset} 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">
           {#each ICON_ADD_PRESET as path}<path d={path} />{/each}
@@ -598,6 +630,7 @@
   {#if open}
     <div
       class="dialkit-timeline-body"
+      onwheel={handleTimelineWheel}
       onpointerdown={handleTrackPointerDown}
       onpointermove={(event) => trackScrub && seek(trackScrub, event.clientX)}
       onpointerup={finishTrack}
@@ -726,9 +759,8 @@
         {#if pxPerSecond > 0 && playheadVisible}
           <div
             class="dialkit-timeline-playhead-control"
-            data-edge="center"
-            data-placement={playheadPlacement}
-            style:left={`calc(var(--dial-timeline-label-w) + ${playheadX}px)`}
+            data-edge={playheadEdge}
+            style={`left:calc(var(--dial-timeline-label-w) + ${playheadX}px);--dial-timeline-playhead-flag-offset:${playheadFlagOffset}px;`}
             onpointerdown={handlePlayheadPointerDown}
             onpointermove={(event) => playheadScrub && seek(playheadScrub, event.clientX)}
             onpointerup={finishPlayhead}
@@ -742,11 +774,26 @@
             aria-valuenow={transport.time}
             title="Drag to scrub the timeline"
           >
-            <div class="dialkit-timeline-playhead-flag">{transport.time.toFixed(2)}</div>
             <div class="dialkit-timeline-playhead-stem"></div>
+            <div class="dialkit-timeline-playhead-anchor">
+              <div class="dialkit-timeline-playhead-flag">{transport.time.toFixed(2)}</div>
+            </div>
           </div>
         {/if}
       </div>
+      {#if zoom > 1}
+        <div class="dialkit-timeline-scroll-row">
+          <div class="dialkit-timeline-label"></div>
+          <div
+            bind:this={horizontalScrollElement}
+            class="dialkit-timeline-horizontal-scroll"
+            onscroll={handleHorizontalScroll}
+            aria-label="Timeline horizontal scroll"
+          >
+            <div style:width={`${laneWidth * zoom}px`}></div>
+          </div>
+        </div>
+      {/if}
     </div>
   {/if}
 

package/dist/svelte/components/Timeline/TimelineSection.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineSection.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/TimelineSection.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAGR,YAAY,EAGb,MAAM,kBAAkB,CAAC;AAW5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAgDnD,KAAK,gBAAgB,GAAG;IACrB,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAmkBJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TimelineSection.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/TimelineSection.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAGR,YAAY,EAGb,MAAM,kBAAkB,CAAC;AAY5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAgDnD,KAAK,gBAAgB,GAAG;IACrB,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AA4mBJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}