dialkit 1.4.0 → 1.4.2

package/dist/index.js

@@ -1038,6 +1038,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",
@@ -1834,6 +1838,7 @@ function Slider({
             onChange: handleInputChange,
             onKeyDown: handleInputKeyDown,
             onBlur: handleInputBlur,
+            onPointerDown: (e) => e.stopPropagation(),
             onClick: (e) => e.stopPropagation(),
             onMouseDown: (e) => e.stopPropagation()
           }
@@ -1845,6 +1850,7 @@ function Slider({
             onMouseEnter: () => setIsValueHovered(true),
             onMouseLeave: () => setIsValueHovered(false),
             onClick: handleValueClick,
+            onPointerDown: (e) => isValueEditable && e.stopPropagation(),
             onMouseDown: (e) => isValueEditable && e.stopPropagation(),
             style: { cursor: isValueEditable ? "text" : "default" },
             children: displayValue
@@ -4235,8 +4241,11 @@ var SECOND_TICK_STEPS = [
 ];
 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;
 var subscribeGlobalTimelines = (callback) => TimelineStore.subscribeGlobal(callback);
 var getTimelines = () => TimelineStore.getTimelines();
 var subscribeTimelineVisibility = (callback) => TimelineUiStore.subscribe(callback);
@@ -4269,7 +4278,10 @@ function DialTimelineDock({
   defaultOpen
 }) {
   const [mounted, setMounted] = useState11(false);
+  const [dockMaxHeight, setDockMaxHeight] = useState11(DEFAULT_DOCK_MAX_HEIGHT);
   const visibilityControllerId = useRef14(/* @__PURE__ */ Symbol("dialkit-timeline-visibility"));
+  const dockRef = useRef14(null);
+  const resizeCleanupRef = useRef14(null);
   useEffect11(() => TimelineUiStore.registerController(visibilityControllerId.current, {
     visible,
     defaultVisible,
@@ -4285,6 +4297,31 @@ function DialTimelineDock({
   useEffect11(() => {
     setMounted(true);
   }, []);
+  useEffect11(() => () => resizeCleanupRef.current?.(), []);
+  const handleResizePointerDown = useCallback14((e) => {
+    const dock = dockRef.current;
+    if (!dock) return;
+    e.preventDefault();
+    e.stopPropagation();
+    resizeCleanupRef.current?.();
+    const pointerY = e.clientY;
+    const startHeight = dock.getBoundingClientRect().height;
+    const handlePointerMove = (event) => {
+      event.preventDefault();
+      const viewportMax = Math.max(MIN_DOCK_MAX_HEIGHT, window.innerHeight - 24);
+      setDockMaxHeight(clamp(startHeight + pointerY - event.clientY, MIN_DOCK_MAX_HEIGHT, viewportMax));
+    };
+    const finishResize = () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", finishResize);
+      window.removeEventListener("pointercancel", finishResize);
+      resizeCleanupRef.current = null;
+    };
+    window.addEventListener("pointermove", handlePointerMove, { passive: false });
+    window.addEventListener("pointerup", finishResize);
+    window.addEventListener("pointercancel", finishResize);
+    resizeCleanupRef.current = finishResize;
+  }, []);
   const timelines = useSyncExternalStore7(subscribeGlobalTimelines, getTimelines, getTimelines);
   const dockVisible = useSyncExternalStore7(
     subscribeTimelineVisibility,
@@ -4295,16 +4332,37 @@ function DialTimelineDock({
     return null;
   }
   return createPortal4(
-    /* @__PURE__ */ jsx18("div", { className: "dialkit-root dialkit-timeline", "data-theme": theme, hidden: !dockVisible, children: /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-dock", children: timelines.map((timeline) => /* @__PURE__ */ jsx18(
-      TimelineSection,
-      {
-        meta: timeline,
-        defaultOpen,
-        theme,
-        dockVisible
-      },
-      timeline.id
-    )) }) }),
+    /* @__PURE__ */ jsxs14("div", { className: "dialkit-root dialkit-timeline", "data-theme": theme, hidden: !dockVisible, children: [
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: "dialkit-timeline-resize-handle",
+          onPointerDown: handleResizePointerDown,
+          role: "separator",
+          "aria-label": "Resize timeline height",
+          "aria-orientation": "horizontal",
+          title: "Drag to resize timeline"
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          ref: dockRef,
+          className: "dialkit-timeline-dock",
+          style: { maxHeight: `min(${dockMaxHeight}px, calc(100vh - 24px))` },
+          children: timelines.map((timeline) => /* @__PURE__ */ jsx18(
+            TimelineSection,
+            {
+              meta: timeline,
+              defaultOpen,
+              theme,
+              dockVisible
+            },
+            timeline.id
+          ))
+        }
+      )
+    ] }),
     document.body
   );
 }
@@ -4356,6 +4414,20 @@ function PlayPauseButton({ id }) {
     }
   );
 }
+function ReplayButton({ onReplay }) {
+  return /* @__PURE__ */ jsx18(
+    motion7.button,
+    {
+      className: "dialkit-toolbar-add",
+      onClick: onReplay,
+      title: "Replay",
+      "aria-label": "Replay",
+      whileTap: { scale: 0.9 },
+      transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+      children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: ICON_REPLAY.map((d, i) => /* @__PURE__ */ jsx18("path", { d, fill: "currentColor" }, i)) })
+    }
+  );
+}
 function TimelinePlayheadFlag({
   id,
   duration,
@@ -4364,8 +4436,6 @@ function TimelinePlayheadFlag({
   viewEnd,
   laneWidth,
   rulerRef,
-  headerClearStart,
-  headerClearEnd,
   onResetView
 }) {
   const subscribe = useTransportSubscribe(id);
@@ -4425,16 +4495,22 @@ function TimelinePlayheadFlag({
     0,
     laneWidth
   );
-  const flagLeft = x - PLAYHEAD_FLAG_WIDTH / 2;
-  const flagRight = flagLeft + PLAYHEAD_FLAG_WIDTH;
-  const placement = flagLeft >= headerClearStart && flagRight <= headerClearEnd ? "raised" : "lowered";
+  const flagCenter = clamp(
+    x,
+    PLAYHEAD_FLAG_WIDTH / 2 - PLAYHEAD_FLAG_EDGE_OVERHANG,
+    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 /* @__PURE__ */ jsxs14(
     "div",
     {
       className: "dialkit-timeline-playhead-control",
-      "data-edge": "center",
-      "data-placement": placement,
-      style: { left: `calc(var(--dial-timeline-label-w) + ${x}px)` },
+      "data-edge": edge,
+      style: {
+        left: `calc(var(--dial-timeline-label-w) + ${x}px)`,
+        "--dial-timeline-playhead-flag-offset": `${flagOffset}px`
+      },
       onPointerDown: handlePointerDown,
       role: "slider",
       "aria-label": "Timeline current time",
@@ -4443,8 +4519,8 @@ function TimelinePlayheadFlag({
       "aria-valuenow": time,
       title: "Drag to scrub the timeline",
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-flag", children: time.toFixed(2) }),
-        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-stem" })
+        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-stem" }),
+        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-anchor", children: /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-flag", children: time.toFixed(2) }) })
       ]
     }
   );
@@ -4542,30 +4618,18 @@ var TimelineSection = memo(function TimelineSection2({
   const presets = DialStore.getPresets(meta.id);
   const activePresetId = DialStore.getActivePresetId(meta.id);
   const laneAreaRef = useRef14(null);
-  const titleRef = useRef14(null);
-  const actionsRef = useRef14(null);
+  const horizontalScrollRef = useRef14(null);
   const [laneWidth, setLaneWidth] = useState11(0);
-  const [flagClearRange, setFlagClearRange] = useState11({ start: 0, end: 0 });
   useLayoutEffect2(() => {
     if (!open) return;
     const ruler = laneAreaRef.current;
-    const title = titleRef.current;
-    const actions = actionsRef.current;
-    if (!ruler || !title || !actions) return;
+    if (!ruler) return;
     const measure = () => {
-      const rulerRect = ruler.getBoundingClientRect();
-      const titleRect = title.getBoundingClientRect();
-      const actionsRect = actions.getBoundingClientRect();
-      setLaneWidth(rulerRect.width);
-      const start = Math.round(titleRect.right + 10 - rulerRect.left);
-      const end = Math.round(actionsRect.left - 10 - rulerRect.left);
-      setFlagClearRange((current) => current.start === start && current.end === end ? current : { start, end });
+      setLaneWidth(ruler.getBoundingClientRect().width);
     };
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(ruler);
-    observer.observe(title);
-    observer.observe(actions);
     return () => observer.disconnect();
   }, [open]);
   const visibleDuration = meta.duration > 0 ? meta.duration / zoom : meta.duration;
@@ -4580,6 +4644,14 @@ var TimelineSection = memo(function TimelineSection2({
   useEffect11(() => {
     setViewStart((current) => clampViewStart(current, meta.duration, meta.duration / zoom));
   }, [meta.duration, zoom]);
+  useLayoutEffect2(() => {
+    const scroller = horizontalScrollRef.current;
+    if (!scroller || pxPerSecond <= 0) return;
+    const nextScrollLeft = safeViewStart * pxPerSecond;
+    if (Math.abs(scroller.scrollLeft - nextScrollLeft) > 0.5) {
+      scroller.scrollLeft = nextScrollLeft;
+    }
+  }, [open, pxPerSecond, safeViewStart]);
   useEffect11(() => {
     if (!dockVisible) setPopover(null);
   }, [dockVisible]);
@@ -4592,6 +4664,26 @@ var TimelineSection = memo(function TimelineSection2({
     setZoom(1);
     setViewStart(0);
   }, []);
+  const handleReplay = useCallback14(() => {
+    setViewStart(0);
+    TimelineStore.replay(meta.id);
+  }, [meta.id]);
+  const handleHorizontalScroll = useCallback14((e) => {
+    if (pxPerSecond <= 0) return;
+    setViewStart(clampViewStart(
+      e.currentTarget.scrollLeft / pxPerSecond,
+      meta.duration,
+      visibleDuration
+    ));
+  }, [meta.duration, pxPerSecond, visibleDuration]);
+  const handleTimelineWheel = useCallback14((e) => {
+    const scroller = horizontalScrollRef.current;
+    if (!scroller || zoom <= 1) return;
+    const horizontalDelta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.shiftKey ? e.deltaY : 0;
+    if (horizontalDelta === 0) return;
+    e.preventDefault();
+    scroller.scrollLeft += horizontalDelta;
+  }, [zoom]);
   const zoomDragRef = useRef14(null);
   const rulerScrubRef = useRef14(null);
   const seekRulerFromClientX = useCallback14((clientX) => {
@@ -4914,7 +5006,7 @@ var TimelineSection = memo(function TimelineSection2({
   }
   return /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-section", children: [
     /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-header", "data-open": open || void 0, children: [
-      /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-identity", children: /* @__PURE__ */ jsx18("span", { ref: titleRef, className: "dialkit-timeline-title", children: meta.name }) }),
+      /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-identity", children: /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-title", children: meta.name }) }),
       !open && /* @__PURE__ */ jsx18(
         TimelineOverview,
         {
@@ -4925,8 +5017,9 @@ var TimelineSection = memo(function TimelineSection2({
           onNavigate: centerViewAt
         }
       ),
-      /* @__PURE__ */ jsxs14("div", { ref: actionsRef, className: "dialkit-timeline-actions", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-actions", children: [
         /* @__PURE__ */ jsx18(PlayPauseButton, { id: meta.id }),
+        /* @__PURE__ */ jsx18(ReplayButton, { onReplay: handleReplay }),
         /* @__PURE__ */ jsx18(
           motion7.button,
           {
@@ -5009,54 +5102,68 @@ var TimelineSection = memo(function TimelineSection2({
         )
       ] })
     ] }),
-    open && /* @__PURE__ */ jsx18(
+    open && /* @__PURE__ */ jsxs14(
       "div",
       {
         className: "dialkit-timeline-body",
+        onWheel: handleTimelineWheel,
         onPointerDown: handleTrackPointerDown,
         onPointerMove: handleTrackPointerMove,
         onPointerUp: finishTrackScrub,
         onPointerCancel: finishTrackScrub,
         onLostPointerCapture: finishTrackScrub,
-        children: /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-grid", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-row dialkit-timeline-ruler-row", children: [
+        children: [
+          /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-grid", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-row dialkit-timeline-ruler-row", children: [
+              /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-label" }),
+              /* @__PURE__ */ jsxs14(
+                "div",
+                {
+                  ref: laneAreaRef,
+                  className: "dialkit-timeline-ruler",
+                  onPointerDown: handleRulerPointerDown,
+                  onPointerMove: handleRulerPointerMove,
+                  onPointerUp: handleRulerPointerUp,
+                  onPointerCancel: handleRulerPointerCancel,
+                  onLostPointerCapture: handleRulerPointerCancel,
+                  title: "Drag to seek \xB7 Option-drag to zoom \xB7 Shift-drag to reset zoom",
+                  children: [
+                    fineTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: (t - safeViewStart) * pxPerSecond } }, `fine:${t}`)),
+                    mediumTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: (t - safeViewStart) * pxPerSecond } }, `medium:${t}`)),
+                    majorTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick", style: { left: (t - safeViewStart) * pxPerSecond }, children: /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-tick-label", children: formatRulerSeconds(t, majorStep) }) }, t))
+                  ]
+                }
+              )
+            ] }),
+            rows,
+            pxPerSecond > 0 && /* @__PURE__ */ jsx18(
+              TimelinePlayheadFlag,
+              {
+                id: meta.id,
+                duration: meta.duration,
+                pxPerSecond,
+                viewStart: safeViewStart,
+                viewEnd,
+                laneWidth,
+                rulerRef: laneAreaRef,
+                onResetView: resetView
+              }
+            )
+          ] }),
+          zoom > 1 && /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-scroll-row", children: [
             /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-label" }),
-            /* @__PURE__ */ jsxs14(
+            /* @__PURE__ */ jsx18(
               "div",
               {
-                ref: laneAreaRef,
-                className: "dialkit-timeline-ruler",
-                onPointerDown: handleRulerPointerDown,
-                onPointerMove: handleRulerPointerMove,
-                onPointerUp: handleRulerPointerUp,
-                onPointerCancel: handleRulerPointerCancel,
-                onLostPointerCapture: handleRulerPointerCancel,
-                title: "Drag to seek \xB7 Option-drag to zoom \xB7 Shift-drag to reset zoom",
-                children: [
-                  fineTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: (t - safeViewStart) * pxPerSecond } }, `fine:${t}`)),
-                  mediumTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: (t - safeViewStart) * pxPerSecond } }, `medium:${t}`)),
-                  majorTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick", style: { left: (t - safeViewStart) * pxPerSecond }, children: /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-tick-label", children: formatRulerSeconds(t, majorStep) }) }, t))
-                ]
+                ref: horizontalScrollRef,
+                className: "dialkit-timeline-horizontal-scroll",
+                onScroll: handleHorizontalScroll,
+                "aria-label": "Timeline horizontal scroll",
+                children: /* @__PURE__ */ jsx18("div", { style: { width: laneWidth * zoom } })
               }
             )
-          ] }),
-          rows,
-          pxPerSecond > 0 && /* @__PURE__ */ jsx18(
-            TimelinePlayheadFlag,
-            {
-              id: meta.id,
-              duration: meta.duration,
-              pxPerSecond,
-              viewStart: safeViewStart,
-              viewEnd,
-              laneWidth,
-              rulerRef: laneAreaRef,
-              headerClearStart: flagClearRange.start,
-              headerClearEnd: flagClearRange.end,
-              onResetView: resetView
-            }
-          )
-        ] })
+          ] })
+        ]
       }
     ),
     popover && /* @__PURE__ */ jsx18(