dialkit 1.4.0 → 1.4.1

package/dist/icons.d.ts

@@ -2,6 +2,7 @@ declare const ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
 declare const ICON_CHECK = "M5 12.75L10 19L19 5";
 declare const ICON_PAUSE: string[];
 declare const 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";
+declare const ICON_REPLAY: string[];
 declare const ICON_TIMELINE: string[];
 declare const ICON_CLIPBOARD: {
     board: string;
@@ -19,4 +20,4 @@ declare const ICON_PANEL: {
     }[];
 };
 
-export { ICON_ADD_PRESET, ICON_CHECK, ICON_CHEVRON, ICON_CLIPBOARD, ICON_PANEL, ICON_PAUSE, ICON_PLAY, ICON_TIMELINE, ICON_TRASH };
+export { ICON_ADD_PRESET, ICON_CHECK, ICON_CHEVRON, ICON_CLIPBOARD, ICON_PANEL, ICON_PAUSE, ICON_PLAY, ICON_REPLAY, ICON_TIMELINE, ICON_TRASH };

package/dist/icons.js

@@ -6,6 +6,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",
@@ -46,6 +50,7 @@ export {
   ICON_PANEL,
   ICON_PAUSE,
   ICON_PLAY,
+  ICON_REPLAY,
   ICON_TIMELINE,
   ICON_TRASH
 };

package/dist/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icons.ts"],"sourcesContent":["// Shared SVG icon geometry — single source of truth across all framework adapters.\n\nexport const ICON_CHEVRON = 'M6 9.5L12 15.5L18 9.5';\n\nexport const ICON_CHECK = 'M5 12.75L10 19L19 5';\n\nexport const ICON_PAUSE = [\n  'M6.75 3C5.23122 3 4 4.23122 4 5.75V18.25C4 19.7688 5.23122 21 6.75 21H7.25C8.76878 21 10 19.7688 10 18.25V5.75C10 4.23122 8.76878 3 7.25 3H6.75Z',\n  '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',\n];\n\nexport const 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';\n\nexport const ICON_TIMELINE = [\n  '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',\n  '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',\n  'M16.9989 3C17.5511 3.00007 17.9989 3.44776 17.9989 4C17.9989 4.55224 17.5511 4.99993 16.9989 5H6.9989C6.44661 5 5.9989 4.55228 5.9989 4C5.9989 3.44772 6.44661 3 6.9989 3H16.9989Z',\n];\n\nexport const ICON_CLIPBOARD = {\n  board: 'M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z',\n  sparkle: 'M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z',\n  body: 'M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12',\n};\n\nexport const ICON_ADD_PRESET = [\n  'M4 6H20',\n  'M4 12H10',\n  'M15 15L21 15',\n  'M18 12V18',\n  'M4 18H10',\n];\n\nexport const ICON_TRASH = [\n  'M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5',\n  'M10 11V16',\n  'M14 11V16',\n  'M3.5 6H20.5',\n  'M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621',\n];\n\nexport const ICON_PANEL = {\n  path: 'M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z',\n  circles: [\n    { cx: '6', cy: '8', r: '0.998596' },\n    { cx: '10.4999', cy: '3.5', r: '0.998657' },\n    { cx: '9.75015', cy: '12.5', r: '0.997986' },\n  ],\n};\n"],"mappings":";AAEO,IAAM,eAAe;AAErB,IAAM,aAAa;AAEnB,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AACF;AAEO,IAAM,YAAY;AAElB,IAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,SAAS;AAAA,IACP,EAAE,IAAI,KAAK,IAAI,KAAK,GAAG,WAAW;AAAA,IAClC,EAAE,IAAI,WAAW,IAAI,OAAO,GAAG,WAAW;AAAA,IAC1C,EAAE,IAAI,WAAW,IAAI,QAAQ,GAAG,WAAW;AAAA,EAC7C;AACF;","names":[]}
+{"version":3,"sources":["../src/icons.ts"],"sourcesContent":["// Shared SVG icon geometry — single source of truth across all framework adapters.\n\nexport const ICON_CHEVRON = 'M6 9.5L12 15.5L18 9.5';\n\nexport const ICON_CHECK = 'M5 12.75L10 19L19 5';\n\nexport const ICON_PAUSE = [\n  'M6.75 3C5.23122 3 4 4.23122 4 5.75V18.25C4 19.7688 5.23122 21 6.75 21H7.25C8.76878 21 10 19.7688 10 18.25V5.75C10 4.23122 8.76878 3 7.25 3H6.75Z',\n  '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',\n];\n\nexport const 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';\n\nexport const ICON_REPLAY = [\n  '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',\n  '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',\n];\n\nexport const ICON_TIMELINE = [\n  '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',\n  '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',\n  'M16.9989 3C17.5511 3.00007 17.9989 3.44776 17.9989 4C17.9989 4.55224 17.5511 4.99993 16.9989 5H6.9989C6.44661 5 5.9989 4.55228 5.9989 4C5.9989 3.44772 6.44661 3 6.9989 3H16.9989Z',\n];\n\nexport const ICON_CLIPBOARD = {\n  board: 'M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z',\n  sparkle: 'M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z',\n  body: 'M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12',\n};\n\nexport const ICON_ADD_PRESET = [\n  'M4 6H20',\n  'M4 12H10',\n  'M15 15L21 15',\n  'M18 12V18',\n  'M4 18H10',\n];\n\nexport const ICON_TRASH = [\n  'M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5',\n  'M10 11V16',\n  'M14 11V16',\n  'M3.5 6H20.5',\n  'M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621',\n];\n\nexport const ICON_PANEL = {\n  path: 'M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z',\n  circles: [\n    { cx: '6', cy: '8', r: '0.998596' },\n    { cx: '10.4999', cy: '3.5', r: '0.998657' },\n    { cx: '9.75015', cy: '12.5', r: '0.997986' },\n  ],\n};\n"],"mappings":";AAEO,IAAM,eAAe;AAErB,IAAM,aAAa;AAEnB,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AACF;AAEO,IAAM,YAAY;AAElB,IAAM,cAAc;AAAA,EACzB;AAAA,EACA;AACF;AAEO,IAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,SAAS;AAAA,IACP,EAAE,IAAI,KAAK,IAAI,KAAK,GAAG,WAAW;AAAA,IAClC,EAAE,IAAI,WAAW,IAAI,OAAO,GAAG,WAAW;AAAA,IAC1C,EAAE,IAAI,WAAW,IAAI,QAAQ,GAAG,WAAW;AAAA,EAC7C;AACF;","names":[]}

package/dist/index.cjs

@@ -1085,6 +1085,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",
@@ -4282,8 +4286,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);
@@ -4316,7 +4323,10 @@ function DialTimelineDock({
   defaultOpen
 }) {
   const [mounted, setMounted] = (0, import_react23.useState)(false);
+  const [dockMaxHeight, setDockMaxHeight] = (0, import_react23.useState)(DEFAULT_DOCK_MAX_HEIGHT);
   const visibilityControllerId = (0, import_react23.useRef)(/* @__PURE__ */ Symbol("dialkit-timeline-visibility"));
+  const dockRef = (0, import_react23.useRef)(null);
+  const resizeCleanupRef = (0, import_react23.useRef)(null);
   (0, import_react23.useEffect)(() => TimelineUiStore.registerController(visibilityControllerId.current, {
     visible,
     defaultVisible,
@@ -4332,6 +4342,31 @@ function DialTimelineDock({
   (0, import_react23.useEffect)(() => {
     setMounted(true);
   }, []);
+  (0, import_react23.useEffect)(() => () => resizeCleanupRef.current?.(), []);
+  const handleResizePointerDown = (0, import_react23.useCallback)((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 = (0, import_react23.useSyncExternalStore)(subscribeGlobalTimelines, getTimelines, getTimelines);
   const dockVisible = (0, import_react23.useSyncExternalStore)(
     subscribeTimelineVisibility,
@@ -4342,16 +4377,37 @@ function DialTimelineDock({
     return null;
   }
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-root dialkit-timeline", "data-theme": theme, hidden: !dockVisible, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-dock", children: timelines.map((timeline) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      TimelineSection,
-      {
-        meta: timeline,
-        defaultOpen,
-        theme,
-        dockVisible
-      },
-      timeline.id
-    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-root dialkit-timeline", "data-theme": theme, hidden: !dockVisible, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: "dialkit-timeline-resize-handle",
+          onPointerDown: handleResizePointerDown,
+          role: "separator",
+          "aria-label": "Resize timeline height",
+          "aria-orientation": "horizontal",
+          title: "Drag to resize timeline"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          ref: dockRef,
+          className: "dialkit-timeline-dock",
+          style: { maxHeight: `min(${dockMaxHeight}px, calc(100vh - 24px))` },
+          children: timelines.map((timeline) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            TimelineSection,
+            {
+              meta: timeline,
+              defaultOpen,
+              theme,
+              dockVisible
+            },
+            timeline.id
+          ))
+        }
+      )
+    ] }),
     document.body
   );
 }
@@ -4403,6 +4459,20 @@ function PlayPauseButton({ id }) {
     }
   );
 }
+function ReplayButton({ onReplay }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react24.motion.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__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: ICON_REPLAY.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d, fill: "currentColor" }, i)) })
+    }
+  );
+}
 function TimelinePlayheadFlag({
   id,
   duration,
@@ -4411,8 +4481,6 @@ function TimelinePlayheadFlag({
   viewEnd,
   laneWidth,
   rulerRef,
-  headerClearStart,
-  headerClearEnd,
   onResetView
 }) {
   const subscribe = useTransportSubscribe(id);
@@ -4472,16 +4540,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__ */ (0, import_jsx_runtime18.jsxs)(
     "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",
@@ -4490,8 +4564,8 @@ function TimelinePlayheadFlag({
       "aria-valuenow": time,
       title: "Drag to scrub the timeline",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-flag", children: time.toFixed(2) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-stem" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-stem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-flag", children: time.toFixed(2) }) })
       ]
     }
   );
@@ -4589,30 +4663,18 @@ var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
   const presets = DialStore.getPresets(meta.id);
   const activePresetId = DialStore.getActivePresetId(meta.id);
   const laneAreaRef = (0, import_react23.useRef)(null);
-  const titleRef = (0, import_react23.useRef)(null);
-  const actionsRef = (0, import_react23.useRef)(null);
+  const horizontalScrollRef = (0, import_react23.useRef)(null);
   const [laneWidth, setLaneWidth] = (0, import_react23.useState)(0);
-  const [flagClearRange, setFlagClearRange] = (0, import_react23.useState)({ start: 0, end: 0 });
   (0, import_react23.useLayoutEffect)(() => {
     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;
@@ -4627,6 +4689,14 @@ var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
   (0, import_react23.useEffect)(() => {
     setViewStart((current) => clampViewStart(current, meta.duration, meta.duration / zoom));
   }, [meta.duration, zoom]);
+  (0, import_react23.useLayoutEffect)(() => {
+    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]);
   (0, import_react23.useEffect)(() => {
     if (!dockVisible) setPopover(null);
   }, [dockVisible]);
@@ -4639,6 +4709,26 @@ var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
     setZoom(1);
     setViewStart(0);
   }, []);
+  const handleReplay = (0, import_react23.useCallback)(() => {
+    setViewStart(0);
+    TimelineStore.replay(meta.id);
+  }, [meta.id]);
+  const handleHorizontalScroll = (0, import_react23.useCallback)((e) => {
+    if (pxPerSecond <= 0) return;
+    setViewStart(clampViewStart(
+      e.currentTarget.scrollLeft / pxPerSecond,
+      meta.duration,
+      visibleDuration
+    ));
+  }, [meta.duration, pxPerSecond, visibleDuration]);
+  const handleTimelineWheel = (0, import_react23.useCallback)((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 = (0, import_react23.useRef)(null);
   const rulerScrubRef = (0, import_react23.useRef)(null);
   const seekRulerFromClientX = (0, import_react23.useCallback)((clientX) => {
@@ -4961,7 +5051,7 @@ var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-section", children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-header", "data-open": open || void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-identity", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { ref: titleRef, className: "dialkit-timeline-title", children: meta.name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-identity", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-title", children: meta.name }) }),
       !open && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         TimelineOverview,
         {
@@ -4972,8 +5062,9 @@ var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
           onNavigate: centerViewAt
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: actionsRef, className: "dialkit-timeline-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-actions", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlayPauseButton, { id: meta.id }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReplayButton, { onReplay: handleReplay }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_react24.motion.button,
           {
@@ -5056,54 +5147,68 @@ var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
         )
       ] })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         className: "dialkit-timeline-body",
+        onWheel: handleTimelineWheel,
         onPointerDown: handleTrackPointerDown,
         onPointerMove: handleTrackPointerMove,
         onPointerUp: finishTrackScrub,
         onPointerCancel: finishTrackScrub,
         onLostPointerCapture: finishTrackScrub,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-grid", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-row dialkit-timeline-ruler-row", children: [
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-grid", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-row dialkit-timeline-ruler-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-label" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                "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__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: (t - safeViewStart) * pxPerSecond } }, `fine:${t}`)),
+                    mediumTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: (t - safeViewStart) * pxPerSecond } }, `medium:${t}`)),
+                    majorTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick", style: { left: (t - safeViewStart) * pxPerSecond }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-tick-label", children: formatRulerSeconds(t, majorStep) }) }, t))
+                  ]
+                }
+              )
+            ] }),
+            rows,
+            pxPerSecond > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              TimelinePlayheadFlag,
+              {
+                id: meta.id,
+                duration: meta.duration,
+                pxPerSecond,
+                viewStart: safeViewStart,
+                viewEnd,
+                laneWidth,
+                rulerRef: laneAreaRef,
+                onResetView: resetView
+              }
+            )
+          ] }),
+          zoom > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-scroll-row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-label" }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "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__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: (t - safeViewStart) * pxPerSecond } }, `fine:${t}`)),
-                  mediumTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: (t - safeViewStart) * pxPerSecond } }, `medium:${t}`)),
-                  majorTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick", style: { left: (t - safeViewStart) * pxPerSecond }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("div", { style: { width: laneWidth * zoom } })
               }
             )
-          ] }),
-          rows,
-          pxPerSecond > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            TimelinePlayheadFlag,
-            {
-              id: meta.id,
-              duration: meta.duration,
-              pxPerSecond,
-              viewStart: safeViewStart,
-              viewEnd,
-              laneWidth,
-              rulerRef: laneAreaRef,
-              headerClearStart: flagClearRange.start,
-              headerClearEnd: flagClearRange.end,
-              onResetView: resetView
-            }
-          )
-        ] })
+          ] })
+        ]
       }
     ),
     popover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(