histropediajs 1.5.1 → 1.6.0

package/dist/histropedia.umd.js

@@ -1,5 +1,5 @@
 /*!
-HistropediaJS v1.5.1 | Histropedia Ltd. (c) 2026 | https://js.histropedia.com
+HistropediaJS v1.6.0 | Histropedia Ltd. (c) 2026 | https://js.histropedia.com
 Use of this software is subject to our End User Licence Agreement: https://js.histropedia.com/licence.html
 */
 (function(global, factory) {
@@ -202,8 +202,17 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     8: "decade",
     9: "year",
     10: "month",
-    11: "day"
-  };
+    11: "day",
+    12: "hour",
+    13: "minute",
+    14: "second",
+    15: "millisecond"
+  };
+  const DMY_STRING_PATTERN = /^(-?\d+)(?:-(\d{1,2}))?(?:-(\d{1,2}))?(?:[T ](\d{1,2})(?::(\d{1,2}))?(?::(\d{1,2})(?:\.(\d{1,3}))?)?)?$/;
+  const MILLISECONDS_PER_SECOND = 1e3;
+  const MILLISECONDS_PER_MINUTE = 60 * MILLISECONDS_PER_SECOND;
+  const MILLISECONDS_PER_HOUR = 60 * MILLISECONDS_PER_MINUTE;
+  const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR;
   function normalizePrecision(precision) {
     return Object.prototype.hasOwnProperty.call(LEGACY_PRECISIONS, precision) ? LEGACY_PRECISIONS[precision] : precision || "day";
   }
@@ -216,16 +225,60 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     };
   }
   __name(getHistoricalPeriodBounds, "getHistoricalPeriodBounds");
-  function Dmy(year, month, day) {
+  function clampInteger(value, fallback, minimum, maximum) {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) {
+      return fallback;
+    }
+    return Math.min(maximum, Math.max(minimum, Math.trunc(parsed)));
+  }
+  __name(clampInteger, "clampInteger");
+  function setTimeParts(target, hour, minute, second, millisecond) {
+    const values = {
+      hour: clampInteger(hour, 0, 0, 23),
+      minute: clampInteger(minute, 0, 0, 59),
+      second: clampInteger(second, 0, 0, 59),
+      millisecond: clampInteger(millisecond, 0, 0, 999)
+    };
+    for (const [key, value] of Object.entries(values)) {
+      Object.defineProperty(target, key, {
+        value,
+        enumerable: value !== 0,
+        configurable: true,
+        writable: true
+      });
+    }
+  }
+  __name(setTimeParts, "setTimeParts");
+  function setPrecision(target, precision) {
+    if (precision === void 0) {
+      return;
+    }
+    Object.defineProperty(target, "precision", {
+      value: precision,
+      enumerable: false,
+      configurable: true,
+      writable: true
+    });
+  }
+  __name(setPrecision, "setPrecision");
+  function createAdjustedDmy(source, values) {
+    return new Dmy(__spreadProps(__spreadValues({}, values), { precision: source.precision }));
+  }
+  __name(createAdjustedDmy, "createAdjustedDmy");
+  function Dmy(year, month, day, hour, minute, second, millisecond) {
     if (typeof year === "object") {
       const options = year;
       this.year = options.year;
       this.month = options.month;
       this.day = getCorrectDay(options.year, options.month, options.day);
+      setTimeParts(this, options.hour, options.minute, options.second, options.millisecond);
+      setPrecision(this, options.precision);
     } else {
       this.year = year;
       this.month = month;
       this.day = getCorrectDay(year, month, day);
+      setTimeParts(this, hour, minute, second, millisecond);
     }
   }
   __name(Dmy, "Dmy");
@@ -252,14 +305,19 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   }
   __name(digitGroupedNumber, "digitGroupedNumber");
   Dmy.prototype.getDaysTo = function(other) {
-    return other.getDaysSinceYearZero() - this.getDaysSinceYearZero();
+    const dayDifference = other.getDaysSinceYearZero() - this.getDaysSinceYearZero();
+    const timeDifference = other.getMillisecondsOfDay() - this.getMillisecondsOfDay();
+    return dayDifference + timeDifference / MILLISECONDS_PER_DAY;
+  };
+  Dmy.prototype.getMillisecondsOfDay = function() {
+    return this.hour * MILLISECONDS_PER_HOUR + this.minute * MILLISECONDS_PER_MINUTE + this.second * MILLISECONDS_PER_SECOND + this.millisecond;
   };
   Dmy.prototype.getMonthsTo = function(other) {
     return this.getYearsTo(other) * 12;
   };
   Dmy.prototype.getYearsTo = function(other) {
     let yearDiff = other.year - this.year;
-    yearDiff += (other.month - this.month) / 12 + (other.day - this.day) / 365.2422;
+    yearDiff += (other.month - this.month) / 12 + (other.day - this.day) / 365.2422 + (other.getMillisecondsOfDay() - this.getMillisecondsOfDay()) / (MILLISECONDS_PER_DAY * 365.2422);
     return yearDiff;
   };
   Dmy.prototype.getLeapYearsSinceYearZero = function() {
@@ -279,14 +337,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return days;
   };
   Dmy.prototype.getDayOfYear = function() {
-    if (isUndefined(this._dayOfYear)) {
-      this._dayOfYear = 0;
-      for (let m = 1; m < this.month; m++) {
-        this._dayOfYear += daysInMonth(this.year, m);
-      }
-      this._dayOfYear += this.day;
+    let dayOfYear = this.day;
+    for (let m = 1; m < this.month; m++) {
+      dayOfYear += daysInMonth(this.year, m);
     }
-    return this._dayOfYear;
+    return dayOfYear;
   };
   Dmy.getByDayOfYear = function(year, dayOfYear) {
     const dmy = new Dmy(year, 1, 1);
@@ -312,18 +367,77 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     let day = this.day;
     let month = this.month;
     let year = this.year;
-    for (let i = 0; i < amount; i++) {
-      day++;
-      if (day > daysInMonth(year, month)) {
-        day = 1;
-        month++;
-        if (month > 12) {
-          month = 1;
-          year++;
+    const direction = amount < 0 ? -1 : 1;
+    let remaining = Math.abs(Math.trunc(amount));
+    while (remaining > 0) {
+      if (direction > 0) {
+        day++;
+        if (day > daysInMonth(year, month)) {
+          day = 1;
+          month++;
+          if (month > 12) {
+            month = 1;
+            year++;
+          }
+        }
+      } else {
+        day--;
+        if (day < 1) {
+          month--;
+          if (month < 1) {
+            month = 12;
+            year--;
+          }
+          day = daysInMonth(year, month);
         }
       }
+      remaining--;
     }
-    return new Dmy(year, month, day);
+    return createAdjustedDmy(this, {
+      year,
+      month,
+      day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      millisecond: this.millisecond
+    });
+  };
+  Dmy.prototype.addMilliseconds = function(amount) {
+    let date = this;
+    let milliseconds = this.getMillisecondsOfDay() + Math.trunc(amount);
+    while (milliseconds < 0) {
+      date = date.addDays(-1);
+      milliseconds += MILLISECONDS_PER_DAY;
+    }
+    while (milliseconds >= MILLISECONDS_PER_DAY) {
+      date = date.addDays(1);
+      milliseconds -= MILLISECONDS_PER_DAY;
+    }
+    const hour = Math.floor(milliseconds / MILLISECONDS_PER_HOUR);
+    milliseconds -= hour * MILLISECONDS_PER_HOUR;
+    const minute = Math.floor(milliseconds / MILLISECONDS_PER_MINUTE);
+    milliseconds -= minute * MILLISECONDS_PER_MINUTE;
+    const second = Math.floor(milliseconds / MILLISECONDS_PER_SECOND);
+    const millisecond = milliseconds - second * MILLISECONDS_PER_SECOND;
+    return createAdjustedDmy(this, {
+      year: date.year,
+      month: date.month,
+      day: date.day,
+      hour,
+      minute,
+      second,
+      millisecond
+    });
+  };
+  Dmy.prototype.addSeconds = function(amount) {
+    return this.addMilliseconds(amount * MILLISECONDS_PER_SECOND);
+  };
+  Dmy.prototype.addMinutes = function(amount) {
+    return this.addMilliseconds(amount * MILLISECONDS_PER_MINUTE);
+  };
+  Dmy.prototype.addHours = function(amount) {
+    return this.addMilliseconds(amount * MILLISECONDS_PER_HOUR);
   };
   Dmy.prototype.addMonths = function(amount) {
     let month = this.month;
@@ -335,22 +449,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         year++;
       }
     }
-    return new Dmy(year, month, 1);
+    return createAdjustedDmy(this, { year, month, day: 1 });
   };
   Dmy.prototype.getPreviousDay = function() {
-    let day = this.day;
-    let month = this.month;
-    let year = this.year;
-    day--;
-    if (day < 1) {
-      month--;
-      if (month < 1) {
-        month = 12;
-        year--;
-      }
-      day = daysInMonth(year, month);
-    }
-    return new Dmy(year, month, day);
+    return this.addDays(-1);
   };
   Dmy.prototype.getNextMonth = function() {
     let month = this.month;
@@ -360,7 +462,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       month = 1;
       year++;
     }
-    return new Dmy(year, month, 1);
+    return createAdjustedDmy(this, { year, month, day: 1 });
   };
   Dmy.prototype.getPreviousMonth = function() {
     let month = this.month;
@@ -370,11 +472,15 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       month = 12;
       year--;
     }
-    return new Dmy(year, month, 1);
+    return createAdjustedDmy(this, { year, month, day: 1 });
   };
   Dmy.prototype.addYears = function(amount) {
-    return new Dmy(this.year + amount, 1, 1);
+    return createAdjustedDmy(this, { year: this.year + amount, month: 1, day: 1 });
   };
+  function pad(value, length) {
+    return String(value).padStart(length, "0");
+  }
+  __name(pad, "pad");
   Dmy.prototype.format = function(format, options) {
     options = options || {};
     format = format || "D MMM YYYY";
@@ -397,24 +503,26 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return format.replace(
       "YYYY",
       isBc ? digitGroupedNumber(-this.year + 1, thousandsSeparator) + bceText : digitGroupedNumber(this.year, thousandsSeparator)
-    ).replace("D", this.day).replace("MMM", MONTH_NAMES[this.month - 1]);
+    ).replace("D", this.day).replace("MMM", MONTH_NAMES[this.month - 1]).replace("HH", pad(this.hour, 2)).replace("mm", pad(this.minute, 2)).replace("ss", pad(this.second, 2)).replace("SSS", pad(this.millisecond, 3));
   };
   Dmy.prototype.isSame = function(other) {
-    return other.year === this.year && other.month === this.month && other.day === this.day;
+    return other.year === this.year && other.month === this.month && other.day === this.day && (other.hour || 0) === this.hour && (other.minute || 0) === this.minute && (other.second || 0) === this.second && (other.millisecond || 0) === this.millisecond;
   };
   Dmy.prototype.toKeyString = function() {
-    return `${this.year}|${this.month}|${this.day}`;
+    const dateKey = `${this.year}|${this.month}|${this.day}`;
+    if (this.getMillisecondsOfDay() === 0) {
+      return dateKey;
+    }
+    return `${dateKey}|${this.hour}|${this.minute}|${this.second}|${this.millisecond}`;
   };
   Dmy.prototype.isAfter = function(other) {
-    if (this.year > other.year) {
-      return true;
-    }
-    if (this.year === other.year) {
-      if (this.month > other.month) {
-        return true;
-      }
-      if (this.month === other.month) {
-        return this.day > other.day;
+    const fields = ["year", "month", "day", "hour", "minute", "second", "millisecond"];
+    for (let i = 0; i < fields.length; i++) {
+      const field = fields[i];
+      const thisValue = this[field] || 0;
+      const otherValue = other[field] || 0;
+      if (thisValue !== otherValue) {
+        return thisValue > otherValue;
       }
     }
     return false;
@@ -434,15 +542,24 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   Dmy.prototype.asFloat = function() {
     const m = this.month - 1;
     const d = this.day - 1;
-    if (m === 0 && d === 0) {
+    const dayFraction = this.getMillisecondsOfDay() / MILLISECONDS_PER_DAY;
+    if (m === 0 && d === 0 && dayFraction === 0) {
       return this.year;
     }
-    return Math.round((this.year + (m * 31 + d) / 371) * 100) / 100;
+    return Math.round((this.year + (m * 31 + d + dayFraction) / 371) * 100) / 100;
   };
   Dmy.prototype.isInFuture = function() {
     const date = /* @__PURE__ */ new Date();
-    const today = new Dmy(date.getFullYear(), date.getMonth() + 1, date.getDate());
-    return this.isAfter(today);
+    const now = new Dmy(
+      date.getFullYear(),
+      date.getMonth() + 1,
+      date.getDate(),
+      date.getHours(),
+      date.getMinutes(),
+      date.getSeconds(),
+      date.getMilliseconds()
+    );
+    return this.isAfter(now);
   };
   Dmy.prototype.convertToIso = function() {
     if (this.year < 0) {
@@ -455,6 +572,18 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const month = isoDmy.month || 1;
     const day = isoDmy.day || 1;
     precision = normalizePrecision(precision);
+    if (precision === "millisecond") {
+      return new Dmy(isoDmy);
+    }
+    if (precision === "second") {
+      return new Dmy(isoYear, month, day, isoDmy.hour, isoDmy.minute, isoDmy.second, 0);
+    }
+    if (precision === "minute") {
+      return new Dmy(isoYear, month, day, isoDmy.hour, isoDmy.minute, 0, 0);
+    }
+    if (precision === "hour") {
+      return new Dmy(isoYear, month, day, isoDmy.hour, 0, 0, 0);
+    }
     if (precision === "day") {
       return new Dmy(isoYear, month, day);
     }
@@ -480,6 +609,18 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const month = isoDmy.month || 1;
     const day = isoDmy.day || 1;
     precision = normalizePrecision(precision);
+    if (precision === "millisecond") {
+      return new Dmy(isoDmy);
+    }
+    if (precision === "second") {
+      return new Dmy(isoYear, month, day, isoDmy.hour, isoDmy.minute, isoDmy.second, 999);
+    }
+    if (precision === "minute") {
+      return new Dmy(isoYear, month, day, isoDmy.hour, isoDmy.minute, 59, 999);
+    }
+    if (precision === "hour") {
+      return new Dmy(isoYear, month, day, isoDmy.hour, 59, 59, 999);
+    }
     if (precision === "day") {
       return new Dmy(isoYear, month, day);
     }
@@ -507,6 +648,26 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     Logger.error("precision is not implemented");
     return new Dmy(isoYear, month, day);
   };
+  Dmy.CreateAsExclusiveEndOfPeriod = function(isoDmy, precision) {
+    precision = normalizePrecision(precision);
+    const start = Dmy.CreateAsStartOfPeriod(isoDmy, precision);
+    if (precision === "millisecond") {
+      return start.addMilliseconds(1);
+    }
+    if (precision === "second") {
+      return start.addSeconds(1);
+    }
+    if (precision === "minute") {
+      return start.addMinutes(1);
+    }
+    if (precision === "hour") {
+      return start.addHours(1);
+    }
+    if (precision === "day") {
+      return start.addDays(1);
+    }
+    return Dmy.CreateAsEndOfPeriod(isoDmy, precision).addDays(1);
+  };
   Dmy.now = function() {
     const now = /* @__PURE__ */ new Date();
     return new Dmy({
@@ -515,21 +676,37 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       day: now.getDate()
     });
   };
+  function parseDmyString(dateString) {
+    const match = String(dateString).match(DMY_STRING_PATTERN);
+    if (!match) {
+      return null;
+    }
+    const year = parseInt(match[1], 10);
+    const month = match[2] == null ? 1 : parseInt(match[2], 10);
+    const day = match[3] == null ? 1 : parseInt(match[3], 10);
+    const hour = match[4] == null ? 0 : parseInt(match[4], 10);
+    const minute = match[5] == null ? 0 : parseInt(match[5], 10);
+    const second = match[6] == null ? 0 : parseInt(match[6], 10);
+    const millisecond = match[7] ? parseInt(match[7].padEnd(3, "0"), 10) : 0;
+    return {
+      date: new Dmy({
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second,
+        millisecond
+      }),
+      hasMonth: match[2] != null,
+      hasDay: match[3] != null,
+      hasTime: match[4] != null
+    };
+  }
+  __name(parseDmyString, "parseDmyString");
   Dmy.fromString = function(dateString) {
-    const dateParts = dateString.split("-");
-    const isBc = dateParts[0] === "";
-    if (isBc) {
-      dateParts.shift();
-      dateParts[0] = `-${dateParts[0]}`;
-    }
-    const year = parseInt(dateParts[0]);
-    const month = parseInt(dateParts[1]) || 1;
-    const day = parseInt(dateParts[2]) || 1;
-    return new Dmy({
-      year: parseInt(year),
-      month: parseInt(month),
-      day: parseInt(day)
-    });
+    const parsed = parseDmyString(dateString);
+    return parsed ? parsed.date : new Dmy(NaN, 1, 1);
   };
   function merge(target, ...sources) {
     return Object.assign(target, ...sources);
@@ -617,10 +794,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     });
   }
   __name(defineValueOrFunctionProperty, "defineValueOrFunctionProperty");
-  function isUndefined$1(value) {
+  function isUndefined(value) {
     return typeof value === "undefined";
   }
-  __name(isUndefined$1, "isUndefined$1");
+  __name(isUndefined, "isUndefined");
   const propertyAbbreviations = {
     id: "i",
     title: "t",
@@ -629,10 +806,18 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     "from.year": "fy",
     "from.month": "fm",
     "from.day": "fd",
+    "from.hour": "fhr",
+    "from.minute": "fmi",
+    "from.second": "fs",
+    "from.millisecond": "fms",
     "from.precision": "fp",
     "to.year": "ty",
     "to.month": "tm",
     "to.day": "td",
+    "to.hour": "thr",
+    "to.minute": "tmi",
+    "to.second": "ts",
+    "to.millisecond": "tms",
     "to.precision": "tp",
     isToPresent: "p",
     isStarred: "v",
@@ -651,7 +836,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   __name(extractProperty, "extractProperty");
   function extractPropertyFromPath(data, path) {
     const pathParts = path.split(".");
-    return pathParts.reduce((curr, next) => curr ? curr[next] : void 0, data);
+    const value = pathParts.reduce((curr, next) => curr ? curr[next] : void 0, data);
+    return isUndefined(value) ? data[propertyAbbreviations[path]] : value;
   }
   __name(extractPropertyFromPath, "extractPropertyFromPath");
   function isPath(property) {
@@ -667,9 +853,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   __name(getPropertyFromData, "getPropertyFromData");
   function existsInData(data, property) {
     if (isPath(property)) {
-      return !isUndefined$1(extractPropertyFromPath(data, property));
+      return !isUndefined(extractPropertyFromPath(data, property));
     }
-    return !isUndefined$1(extractProperty(data, property));
+    return !isUndefined(extractProperty(data, property));
   }
   __name(existsInData, "existsInData");
   defineValueOrFunctionProperty(Article.prototype, "hidePeriodLine");
@@ -745,12 +931,16 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     this.isImageInfoLoaded = false;
   };
   Article.prototype._setupArticlePeriod = function(data) {
-    const fromDmy = new Dmy(
+    let fromDmy = new Dmy(
       parseInt(getPropertyFromData(data, "from.year")),
       parseInt(getPropertyFromData(data, "from.month")),
-      parseInt(getPropertyFromData(data, "from.day"))
+      parseInt(getPropertyFromData(data, "from.day")),
+      parseInt(getPropertyFromData(data, "from.hour")),
+      parseInt(getPropertyFromData(data, "from.minute")),
+      parseInt(getPropertyFromData(data, "from.second")),
+      parseInt(getPropertyFromData(data, "from.millisecond"))
     );
-    this.owner.getDmyFromInput(fromDmy);
+    fromDmy = this.owner.getDmyFromInput(fromDmy);
     const fromPrecision = getPropertyFromData(data, "from.precision");
     const isToPresentProp = getPropertyFromData(data, "isToPresent");
     const isToPresent = isToPresentProp === true || isToPresentProp === 1;
@@ -761,17 +951,21 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       toDmy = new Dmy(
         parseInt(getPropertyFromData(data, "to.year")),
         parseInt(getPropertyFromData(data, "to.month")),
-        parseInt(getPropertyFromData(data, "to.day"))
+        parseInt(getPropertyFromData(data, "to.day")),
+        parseInt(getPropertyFromData(data, "to.hour")),
+        parseInt(getPropertyFromData(data, "to.minute")),
+        parseInt(getPropertyFromData(data, "to.second")),
+        parseInt(getPropertyFromData(data, "to.millisecond"))
       );
-      this.owner.getDmyFromInput(toDmy);
+      toDmy = this.owner.getDmyFromInput(toDmy);
       toPrecision = getPropertyFromData(data, "to.precision");
     } else {
       toDmy = fromDmy;
       toPrecision = fromPrecision;
     }
     const from = Dmy.CreateAsStartOfPeriod(fromDmy, fromPrecision);
-    const to = Dmy.CreateAsEndOfPeriod(toDmy, toPrecision);
-    this.period = { from, to: to.getNextDay(), isToPresent };
+    const to = Dmy.CreateAsExclusiveEndOfPeriod(toDmy, toPrecision);
+    this.period = { from, to, isToPresent };
     this.period.years = this.period.to.asFloat() - this.period.from.asFloat();
   };
   Article.prototype.setImage = function() {
@@ -886,7 +1080,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return otherRight >= thisLeft && thisRight >= otherLeft;
   };
   Article.prototype._getWidth = function() {
-    return this._getCurrentStyle().width;
+    return this.getCurrentStyle().width;
   };
   Article.prototype.getWidth = function() {
     this._ensureSizeCache();
@@ -947,29 +1141,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const styleChanged = existsInData(option, "style");
     const activeStyleChanged = existsInData(option, "activeStyle");
     const hoverStyleChanged = existsInData(option, "hoverStyle");
-    let activeHoverStyleUpdated = false;
-    if (styleChanged) {
+    if (styleChanged || hoverStyleChanged || activeStyleChanged) {
       this.initialiseStyles(this.data);
-      this.invalidateCaches();
-    } else {
-      if (hoverStyleChanged) {
-        deepMerge(this.hoverStyle, option.hoverStyle);
-        this.activeHoverStyle = deepMerge(
-          {},
-          this.hoverStyle,
-          this.owner._getResolvedArticleOptions(this).defaultActiveStyle,
-          this.data.activeStyle
-        );
-        activeHoverStyleUpdated = true;
-      }
-      if (activeStyleChanged) {
-        this.activeStyle = deepMerge(this.activeStyle, option.activeStyle);
-        if (!activeHoverStyleUpdated) {
-          deepMerge(this.activeHoverStyle, option.activeStyle);
-        }
-      }
-      this.invalidateCaches();
     }
+    this.invalidateCaches();
     const cardLayoutChanged = existsInData(option, "cardLayout");
     if (cardLayoutChanged) {
       this.setCardLayout(option.cardLayout);
@@ -984,35 +1159,27 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
   };
   Article.prototype.initialiseStyles = function(data = this.data) {
-    const articleOptions = this.owner._getResolvedArticleOptions(this);
     const resolvedDefaultCardLayout = this.owner._resolveDefaultCardLayoutName(this);
     const explicitCardLayout = this.owner._getExplicitArticleCardLayout(this);
     const cardLayout = explicitCardLayout || resolvedDefaultCardLayout;
     this._resolvedDefaultCardLayout = resolvedDefaultCardLayout;
     this._resolvedCardLayoutName = cardLayout;
-    const layoutStyles = articleOptions.layoutStyles[cardLayout] || {};
-    const style = deepMerge(
-      {},
-      articleOptions.defaultStyle,
-      layoutStyles.style || {},
-      getPropertyFromData(data, "style") || {}
-    );
+    const styleOverrides = this.owner._getResolvedArticleStyleOverrides(this, cardLayout);
+    const style = deepMerge({}, styleOverrides.style, getPropertyFromData(data, "style") || {});
     const activeStyle = deepMerge(
       {},
-      articleOptions.defaultActiveStyle,
-      layoutStyles.activeStyle || {},
+      styleOverrides.activeStyle,
       getPropertyFromData(data, "activeStyle") || {}
     );
     const hoverStyle = deepMerge(
       {},
-      articleOptions.defaultHoverStyle,
-      layoutStyles.hoverStyle || {},
+      styleOverrides.hoverStyle,
       getPropertyFromData(data, "hoverStyle") || {}
     );
     this.style = style;
     this.activeStyle = deepMerge({}, style, activeStyle);
     this.hoverStyle = deepMerge({}, style, hoverStyle);
-    this.activeHoverStyle = deepMerge({}, this.hoverStyle, activeStyle);
+    this.activeHoverStyle = deepMerge({}, style, hoverStyle, activeStyle);
   };
   Article.prototype.setStyle = function(option, value) {
     if (typeof option === "string") {
@@ -1034,13 +1201,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       option = buildObjectFromPath(option, value);
     }
     this.data.hoverStyle = deepMerge(this.data.hoverStyle || {}, option);
-    deepMerge(this.hoverStyle, option);
-    this.activeHoverStyle = deepMerge(
-      {},
-      this.hoverStyle,
-      this.owner._getResolvedArticleOptions(this).defaultActiveStyle,
-      this.data.activeStyle
-    );
+    this.initialiseStyles(this.data);
     this.owner.requestRedraw();
   };
   Article.prototype.setActiveStyle = function(option, value) {
@@ -1051,8 +1212,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       option = buildObjectFromPath(option, value);
     }
     this.data.activeStyle = deepMerge(this.data.activeStyle || {}, option);
-    deepMerge(this.activeStyle, option);
-    deepMerge(this.activeHoverStyle, option);
+    this.initialiseStyles(this.data);
     this.owner.requestRedraw();
   };
   Article.prototype.activated = function() {
@@ -1217,6 +1377,57 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     });
     moveAnimation.dummyElement = moveTween;
   };
+  function roundPixel(value) {
+    return Math.round(value);
+  }
+  __name(roundPixel, "roundPixel");
+  function snapPixel(value, dpr = 1) {
+    const ratio = typeof dpr === "number" && isFinite(dpr) && dpr > 0 ? dpr : 1;
+    return Math.round(value * ratio) / ratio;
+  }
+  __name(snapPixel, "snapPixel");
+  function retainPixel(value) {
+    return value;
+  }
+  __name(retainPixel, "retainPixel");
+  function createPixelSnap(dpr = 1, mode = "device") {
+    if (mode === false || mode === "none") {
+      return retainPixel;
+    }
+    if (mode === "css") {
+      return roundPixel;
+    }
+    return /* @__PURE__ */ __name(function snapToDevicePixel(value) {
+      return snapPixel(value, dpr);
+    }, "snapToDevicePixel");
+  }
+  __name(createPixelSnap, "createPixelSnap");
+  function createStrokePixelSnap(dpr = 1, mode = "device", lineWidth = 1) {
+    if (mode === false || mode === "none") {
+      return retainPixel;
+    }
+    const deviceRatio = typeof dpr === "number" && isFinite(dpr) && dpr > 0 ? dpr : 1;
+    const ratio = mode === "css" ? 1 : deviceRatio;
+    const width = typeof lineWidth === "number" && isFinite(lineWidth) && lineWidth > 0 ? lineWidth : 1;
+    const halfPhysicalWidth = width * ratio / 2;
+    return /* @__PURE__ */ __name(function snapStrokeCentre(value) {
+      return (Math.round(value * ratio - halfPhysicalWidth) + halfPhysicalWidth) / ratio;
+    }, "snapStrokeCentre");
+  }
+  __name(createStrokePixelSnap, "createStrokePixelSnap");
+  function createInnerSpace(outerSpace, borderWidth, snap) {
+    if (!snap) {
+      snap = roundPixel;
+    }
+    const halfBorder = borderWidth / 2;
+    return {
+      left: snap(outerSpace.left + halfBorder),
+      top: snap(outerSpace.top + halfBorder),
+      width: snap(outerSpace.width - borderWidth),
+      height: snap(outerSpace.height - borderWidth)
+    };
+  }
+  __name(createInnerSpace, "createInnerSpace");
   Article.prototype.draw = function(ctx) {
     if (!this.isDataLoaded || isNaN(this.position.left)) {
       return;
@@ -1226,12 +1437,15 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const cardLayout = this._getCurrentCardLayout();
     cardLayout.draw.call(this, ctx);
   };
-  Article.prototype._getCurrentStyle = function() {
+  Article.prototype.getCurrentStyle = function() {
     if (this.isActive) {
       return this.isMouseover ? this.activeHoverStyle : this.activeStyle;
     }
     return this.isMouseover ? this.hoverStyle : this.style;
   };
+  Article.prototype._getCurrentStyle = function() {
+    return this.getCurrentStyle();
+  };
   Article.prototype._getPeriodLineRenderGeometry = function(axisY) {
     const resolvedArticleOptions = this.owner._getResolvedArticleOptions(this);
     const periodLineOptions = resolvedArticleOptions.periodLine || {};
@@ -1262,8 +1476,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     };
   };
   Article.prototype.drawPeriodLinesAndConnectors = function(ctx, axisY) {
+    var _a, _b, _c, _d, _e, _f;
     ctx.globalAlpha = this.opacity;
-    const style = this._getCurrentStyle();
+    const style = this.getCurrentStyle();
     const geometry = this._getPeriodLineRenderGeometry(axisY);
     const y = geometry.y;
     if (!this.hidePeriodLine) {
@@ -1295,16 +1510,26 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const y1 = y;
     const x2 = connectorEnd.left;
     const y2 = connectorEnd.top;
+    const isVertical = Math.abs(x1 - x2) < Number.EPSILON;
+    const pixelSnapMode = (_d = (_c = (_b = (_a = this.owner) == null ? void 0 : _a.options) == null ? void 0 : _b.article) == null ? void 0 : _c.rendering) == null ? void 0 : _d.pixelSnap;
+    const snapStroke = createStrokePixelSnap(
+      ((_f = (_e = this.owner) == null ? void 0 : _e.getCanvasDpr) == null ? void 0 : _f.call(_e)) || 1,
+      pixelSnapMode,
+      style.connectorLine.thickness
+    );
+    const connectorX = isVertical ? snapStroke(x2) : null;
+    const drawX1 = connectorX != null ? connectorX : x1;
+    const drawX2 = connectorX != null ? connectorX : x2;
     ctx.strokeStyle = ctx.fillStyle = style.color;
     ctx.lineWidth = style.connectorLine.thickness;
     ctx.beginPath();
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y2);
+    ctx.moveTo(drawX1, y1);
+    ctx.lineTo(drawX2, y2);
     ctx.stroke();
-    const radians = Math.atan((y2 - y1) / (x2 - x1)) + (x2 >= x1 ? -90 : 90) * Math.PI / 180;
+    const radians = Math.atan((y2 - y1) / (drawX2 - drawX1)) + (drawX2 >= drawX1 ? -90 : 90) * Math.PI / 180;
     ctx.save();
     ctx.beginPath();
-    ctx.translate(x2, y2);
+    ctx.translate(drawX2, y2);
     ctx.rotate(radians);
     ctx.moveTo(-style.connectorLine.arrow.width, 0);
     ctx.lineTo(style.connectorLine.arrow.width, 0);
@@ -1378,7 +1603,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   Article.prototype._getSizeCacheKey = function() {
     var _a, _b;
-    const style = typeof this._getCurrentStyle === "function" ? this._getCurrentStyle() : null;
+    const style = typeof this.getCurrentStyle === "function" ? this.getCurrentStyle() : null;
     const imageStyle = style && style.image || {};
     const header = style && style.header || {};
     const subheader = style && style.subheader || {};
@@ -1614,6 +1839,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   const MINOR_MARKER = 0;
   const MAJOR_MARKER = 1;
   const ERA_MARKER = 2;
+  const ZOOM_MILLISECOND = -4;
+  const ZOOM_SECOND = -3;
+  const ZOOM_MINUTE = -2;
+  const ZOOM_HOUR = -1;
   const ZOOM_DAY = 0;
   const ZOOM_MONTH = 1;
   const ZOOM_YEAR = 2;
@@ -1626,6 +1855,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   const ZOOM_10_MILLION_YEARS = 9;
   const ZOOM_100_MILLION_YEARS = 10;
   const ZOOM_BILLION_YEARS = 11;
+  const PRECISION_MILLISECOND = "millisecond";
+  const PRECISION_SECOND = "second";
+  const PRECISION_MINUTE = "minute";
+  const PRECISION_HOUR = "hour";
   const PRECISION_DAY = "day";
   const PRECISION_MONTH = "month";
   const PRECISION_YEAR = "year";
@@ -1647,6 +1880,249 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   const RANGE_ALL = "all";
   const RANGE_SCREEN = "screen";
   const DENSITY_SETTINGS = [
+    {
+      region: -26,
+      zoom: { from: Number.NEGATIVE_INFINITY, to: -80.86 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 134217728 }
+    },
+    {
+      region: -25,
+      zoom: { from: -80.86, to: -77.75 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 67108864 }
+    },
+    {
+      region: -24,
+      zoom: { from: -77.75, to: -74.64 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 33554432 }
+    },
+    {
+      region: -23,
+      zoom: { from: -74.64, to: -71.53 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 16777216 }
+    },
+    {
+      region: -22,
+      zoom: { from: -71.53, to: -68.42 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 8388608 }
+    },
+    {
+      region: -21,
+      zoom: { from: -68.42, to: -65.31 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 4194304 }
+    },
+    {
+      region: -20,
+      zoom: { from: -65.31, to: -62.2 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 2097152 }
+    },
+    {
+      region: -19,
+      zoom: { from: -62.2, to: -59.09 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 1048576 }
+    },
+    {
+      region: -18,
+      zoom: { from: -59.09, to: -55.98 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 524288 }
+    },
+    {
+      region: -17,
+      zoom: { from: -55.98, to: -52.87 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 262144 }
+    },
+    {
+      region: -16,
+      zoom: { from: -52.87, to: -49.76 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 131072 }
+    },
+    {
+      region: -15,
+      zoom: { from: -49.76, to: -46.65 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 65536 }
+    },
+    {
+      region: -14,
+      zoom: { from: -46.65, to: -43.54 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 32768 }
+    },
+    {
+      region: -13,
+      zoom: { from: -43.54, to: -40.43 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 16384 }
+    },
+    {
+      region: -12,
+      zoom: { from: -40.43, to: -37.32 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 8192 }
+    },
+    {
+      region: -11,
+      zoom: { from: -37.32, to: -34.21 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 4096 }
+    },
+    {
+      region: -10,
+      zoom: { from: -34.21, to: -31.1 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 2048 }
+    },
+    {
+      region: -9,
+      zoom: { from: -31.1, to: -27.99 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 1024 }
+    },
+    {
+      region: -8,
+      zoom: { from: -27.99, to: -24.88 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 512 }
+    },
+    {
+      region: -7,
+      zoom: { from: -24.88, to: -21.77 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 256 }
+    },
+    {
+      region: -6,
+      zoom: { from: -21.77, to: -18.66 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 128 }
+    },
+    {
+      region: -5,
+      zoom: { from: -18.66, to: -15.55 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 64 }
+    },
+    {
+      region: -4,
+      zoom: { from: -15.55, to: -12.44 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 32 }
+    },
+    {
+      region: -3,
+      zoom: { from: -12.44, to: -9.33 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 16 }
+    },
+    {
+      region: -2,
+      zoom: { from: -9.33, to: -6.22 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 8 }
+    },
+    {
+      region: -1,
+      zoom: { from: -6.22, to: -3.11 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 4 }
+    },
+    {
+      region: 0,
+      zoom: { from: -3.11, to: 0 },
+      low: 1,
+      medium: 2,
+      high: 3,
+      all: 25,
+      step: { months: 0, days: 0, divisionsPerDay: 2 }
+    },
     {
       region: 1,
       zoom: { from: 0, to: 3.11 },
@@ -2022,9 +2498,13 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     PRECISION_CENTURY,
     PRECISION_DAY,
     PRECISION_DECADE,
+    PRECISION_HOUR,
     PRECISION_MILLENNIUM,
     PRECISION_MILLION_YEARS,
+    PRECISION_MILLISECOND,
+    PRECISION_MINUTE,
     PRECISION_MONTH,
+    PRECISION_SECOND,
     PRECISION_YEAR,
     RANGE_ALL,
     RANGE_SCREEN,
@@ -2037,9 +2517,13 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     ZOOM_CENTURY,
     ZOOM_DAY,
     ZOOM_DECADE,
+    ZOOM_HOUR,
     ZOOM_MILLENNIUM,
     ZOOM_MILLION_YEARS,
+    ZOOM_MILLISECOND,
+    ZOOM_MINUTE,
     ZOOM_MONTH,
+    ZOOM_SECOND,
     ZOOM_YEAR
   }, Symbol.toStringTag, { value: "Module" }));
   const CHART_RENDERERS = /* @__PURE__ */ new Map();
@@ -2112,7 +2596,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         minor: {
           visible: true,
           color: "rgba(0, 0, 0, 0.035)",
-          thickness: 2,
+          thickness: 1,
           minimumSpacing: 20
         }
       },
@@ -2731,10 +3215,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return plot.bottom - (value - domain.min) / (domain.max - domain.min) * plot.height;
   }
   __name(getValueY, "getValueY");
-  function clamp$2(value, min, max) {
+  function clamp$1(value, min, max) {
     return Math.max(min, Math.min(max, value));
   }
-  __name(clamp$2, "clamp$2");
+  __name(clamp$1, "clamp$1");
   function getViewportRange(points, drawCycleContext) {
     const tokens = drawCycleContext && drawCycleContext.tokens ? drawCycleContext.tokens : null;
     if (!tokens || !tokens.start || !tokens.end || points.length === 0) {
@@ -2781,6 +3265,126 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     ctx.clip();
   }
   __name(clipToRect, "clipToRect");
+  function clipLineSegmentToRect(from, to, rect) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    let startRatio = 0;
+    let endRatio = 1;
+    let startBoundary = null;
+    let endBoundary = null;
+    const boundaries = [
+      [-dx, from.x - rect.left],
+      [dx, rect.right - from.x],
+      [-dy, from.y - rect.top],
+      [dy, rect.bottom - from.y]
+    ];
+    for (let i = 0; i < boundaries.length; i++) {
+      const [direction, distance] = boundaries[i];
+      if (direction === 0) {
+        if (distance < 0) {
+          return null;
+        }
+        continue;
+      }
+      const ratio = distance / direction;
+      if (direction < 0) {
+        if (ratio > startRatio) {
+          startRatio = ratio;
+          startBoundary = i;
+        }
+      } else if (ratio < endRatio) {
+        endRatio = ratio;
+        endBoundary = i;
+      }
+      if (startRatio > endRatio) {
+        return null;
+      }
+    }
+    const getClippedPoint = /* @__PURE__ */ __name((ratio, boundary) => {
+      if (ratio === 0) {
+        return from;
+      }
+      if (ratio === 1) {
+        return to;
+      }
+      const point = {
+        x: clamp$1(from.x + dx * ratio, rect.left, rect.right),
+        y: clamp$1(from.y + dy * ratio, rect.top, rect.bottom)
+      };
+      if (boundary === 0) {
+        point.x = rect.left;
+      } else if (boundary === 1) {
+        point.x = rect.right;
+      } else if (boundary === 2) {
+        point.y = rect.top;
+      } else if (boundary === 3) {
+        point.y = rect.bottom;
+      }
+      return point;
+    }, "getClippedPoint");
+    return {
+      from: getClippedPoint(startRatio, startBoundary),
+      to: getClippedPoint(endRatio, endBoundary)
+    };
+  }
+  __name(clipLineSegmentToRect, "clipLineSegmentToRect");
+  function pointsEqual(left, right) {
+    return left && right && left.x === right.x && left.y === right.y;
+  }
+  __name(pointsEqual, "pointsEqual");
+  function clipPolygonAgainstBoundary(points, isInside2, getIntersection) {
+    if (points.length === 0) {
+      return points;
+    }
+    const clipped = [];
+    let previous = points[points.length - 1];
+    let previousInside = isInside2(previous);
+    for (let i = 0; i < points.length; i++) {
+      const current = points[i];
+      const currentInside = isInside2(current);
+      if (currentInside) {
+        if (!previousInside) {
+          clipped.push(getIntersection(previous, current));
+        }
+        clipped.push(current);
+      } else if (previousInside) {
+        clipped.push(getIntersection(previous, current));
+      }
+      previous = current;
+      previousInside = currentInside;
+    }
+    return clipped;
+  }
+  __name(clipPolygonAgainstBoundary, "clipPolygonAgainstBoundary");
+  function clipPolygonToRect(points, rect) {
+    const clipVertical = /* @__PURE__ */ __name((polygon, boundary, keepGreater) => clipPolygonAgainstBoundary(
+      polygon,
+      (point) => keepGreater ? point.x >= boundary : point.x <= boundary,
+      (from, to) => {
+        const ratio = (boundary - from.x) / (to.x - from.x);
+        return {
+          x: boundary,
+          y: clamp$1(from.y + (to.y - from.y) * ratio, rect.top, rect.bottom)
+        };
+      }
+    ), "clipVertical");
+    const clipHorizontal = /* @__PURE__ */ __name((polygon, boundary, keepGreater) => clipPolygonAgainstBoundary(
+      polygon,
+      (point) => keepGreater ? point.y >= boundary : point.y <= boundary,
+      (from, to) => {
+        const ratio = (boundary - from.y) / (to.y - from.y);
+        return {
+          x: clamp$1(from.x + (to.x - from.x) * ratio, rect.left, rect.right),
+          y: boundary
+        };
+      }
+    ), "clipHorizontal");
+    let clipped = clipVertical(points, rect.left, true);
+    clipped = clipVertical(clipped, rect.right, false);
+    clipped = clipHorizontal(clipped, rect.top, true);
+    return clipHorizontal(clipped, rect.bottom, false);
+  }
+  __name(clipPolygonToRect, "clipPolygonToRect");
   function drawBackground(ctx, geometry, style) {
     if (!style.backgroundColor) {
       return;
@@ -2852,7 +3456,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return unitSizeInPixels >= minimumSpacing;
   }
   __name(shouldDrawMinorXGridLines, "shouldDrawMinorXGridLines");
-  function drawXGridLineGroup(ctx, plot, markerTokens, options) {
+  function drawXGridLineGroup(ctx, plot, markerTokens, options, minimumSpacing = 0) {
     if (!options || options.visible !== true || markerTokens.length === 0) {
       return;
     }
@@ -2861,6 +3465,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     ctx.strokeStyle = options.color || "rgba(0, 0, 0, 0.08)";
     for (let i = 0; i < markerTokens.length; i++) {
       const token = markerTokens[i];
+      if (token.adaptive && token.markerSpacingInPixels < minimumSpacing) {
+        continue;
+      }
       if (typeof token.drawX !== "number" || !Number.isFinite(token.drawX)) {
         continue;
       }
@@ -2878,10 +3485,16 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const xGrid = gridLine.x || {};
     const major = xGrid.major || {};
     const minor = xGrid.minor || {};
-    const minorMinimumSpacing = Math.max(0, getNumber(minor.minimumSpacing, 40));
+    const minorMinimumSpacing = Math.max(0, getNumber(minor.minimumSpacing, 20));
     drawXGridLineGroup(ctx, plot, getMarkers(drawCycleContext, MAJOR_MARKER), major);
     if (shouldDrawMinorXGridLines(timeline, minorMinimumSpacing)) {
-      drawXGridLineGroup(ctx, plot, getMarkers(drawCycleContext, MINOR_MARKER), minor);
+      drawXGridLineGroup(
+        ctx,
+        plot,
+        getMarkers(drawCycleContext, MINOR_MARKER),
+        minor,
+        minorMinimumSpacing
+      );
     }
   }
   __name(drawXGridLines, "drawXGridLines");
@@ -2942,22 +3555,32 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (Array.isArray(style.lineDash) && typeof ctx.setLineDash === "function") {
       ctx.setLineDash(style.lineDash);
     }
-    let hasPath = false;
+    let previousPoint = null;
+    let pathEnd = null;
     const range = getViewportRange(points, drawCycleContext);
     for (let i = range.start; i <= range.end; i++) {
       const point = points[i];
       if (typeof point.value !== "number" || !Number.isFinite(point.value)) {
-        hasPath = false;
+        previousPoint = null;
+        pathEnd = null;
         continue;
       }
       const x = timeline.getPixel(point.date, drawCycleContext);
       const y = getValueY(point.value, domain, plot);
-      if (!hasPath) {
-        ctx.moveTo(x, y);
-        hasPath = true;
-      } else {
-        ctx.lineTo(x, y);
+      const currentPoint = { x, y };
+      if (previousPoint && Number.isFinite(previousPoint.x) && Number.isFinite(previousPoint.y) && Number.isFinite(currentPoint.x) && Number.isFinite(currentPoint.y)) {
+        const clippedSegment = clipLineSegmentToRect(previousPoint, currentPoint, plot);
+        if (clippedSegment) {
+          if (!pointsEqual(pathEnd, clippedSegment.from)) {
+            ctx.moveTo(clippedSegment.from.x, clippedSegment.from.y);
+          }
+          ctx.lineTo(clippedSegment.to.x, clippedSegment.to.y);
+          pathEnd = clippedSegment.to;
+        } else {
+          pathEnd = null;
+        }
       }
+      previousPoint = currentPoint;
     }
     ctx.stroke();
     if (typeof ctx.setLineDash === "function") {
@@ -2971,7 +3594,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const points = stackedSeries.points || [];
     const style = series.style || {};
     const areaStyle = style.area || {};
-    const opacity = clamp$2(getNumber(areaStyle.opacity, 0.2), 0, 1);
+    const opacity = clamp$1(getNumber(areaStyle.opacity, 0.2), 0, 1);
     ctx.save();
     clipToRect(ctx, plot);
     ctx.fillStyle = areaStyle.fillColor || style.color || "#2563eb";
@@ -2982,11 +3605,23 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (segment.length === 0) {
         return;
       }
+      const polygon = [];
+      for (let i = 0; i < segment.length; i++) {
+        polygon.push({ x: segment[i].x, y: segment[i].y });
+      }
       for (let i = segment.length - 1; i >= 0; i--) {
-        ctx.lineTo(segment[i].x, segment[i].baseY);
+        polygon.push({ x: segment[i].x, y: segment[i].baseY });
+      }
+      const clippedPolygon = clipPolygonToRect(polygon, plot);
+      if (clippedPolygon.length >= 3) {
+        ctx.beginPath();
+        ctx.moveTo(clippedPolygon[0].x, clippedPolygon[0].y);
+        for (let i = 1; i < clippedPolygon.length; i++) {
+          ctx.lineTo(clippedPolygon[i].x, clippedPolygon[i].y);
+        }
+        ctx.closePath();
+        ctx.fill();
       }
-      ctx.closePath();
-      ctx.fill();
       segment = [];
     }, "closeSegment");
     for (let i = range.start; i <= range.end; i++) {
@@ -2997,15 +3632,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       }
       const x = timeline.getPixel(point.date, drawCycleContext);
       const y = getValueY(point.value, domain, plot);
-      const baseY = clamp$2(getValueY(point.baseValue, domain, plot), plot.top, plot.bottom);
-      if (segment.length === 0) {
-        ctx.beginPath();
-        ctx.moveTo(x, baseY);
-        ctx.lineTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
-      }
-      segment.push({ x, baseY });
+      const baseY = clamp$1(getValueY(point.baseValue, domain, plot), plot.top, plot.bottom);
+      segment.push({ x, y, baseY });
     }
     closeSegment();
     ctx.restore();
@@ -3122,8 +3750,16 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const month = parseFiniteInteger(input.month, 1);
     const day = parseFiniteInteger(input.day, 1);
     const precision = input.precision;
-    const dmy = new Dmy(year, month, day);
-    owner.getDmyFromInput(dmy);
+    let dmy = new Dmy(
+      year,
+      month,
+      day,
+      parseFiniteInteger(input.hour, 0),
+      parseFiniteInteger(input.minute, 0),
+      parseFiniteInteger(input.second, 0),
+      parseFiniteInteger(input.millisecond, 0)
+    );
+    dmy = owner.getDmyFromInput(dmy);
     return Dmy.CreateAsStartOfPeriod(dmy, precision);
   }
   __name(normalizeDate, "normalizeDate");
@@ -3180,11 +3816,20 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     chart._seriesColors.push({ id, color });
   }
   __name(setAssignedSeriesColor, "setAssignedSeriesColor");
-  function normalizeSeries(owner, chartStyle, seriesInput, index, assignedColor) {
+  function getSeriesPalette(chartOptions) {
+    const configuredColors = chartOptions && chartOptions.seriesColors;
+    if (!Array.isArray(configuredColors)) {
+      return CHART_DEFAULT_PALETTE;
+    }
+    const palette = configuredColors.filter((color) => typeof color === "string" && color.length > 0);
+    return palette.length > 0 ? palette : CHART_DEFAULT_PALETTE;
+  }
+  __name(getSeriesPalette, "getSeriesPalette");
+  function normalizeSeries(owner, chartStyle, seriesInput, index, assignedColor, palette) {
     const input = seriesInput || {};
     const baseStyle = deepMerge({}, CHART_DEFAULT_SERIES_STYLE, chartStyle.series || {});
     if (!baseStyle.color) {
-      baseStyle.color = assignedColor || CHART_DEFAULT_PALETTE[index % CHART_DEFAULT_PALETTE.length];
+      baseStyle.color = assignedColor || palette[index % palette.length];
     }
     const points = Array.isArray(input.points) ? input.points.map((point) => normalizePoint(owner, point)).filter(Boolean) : [];
     points.sort((a, b) => a.date.compare(b.date));
@@ -3265,14 +3910,21 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       {},
       CHART_DEFAULT_STYLE,
       chartOptions.defaultStyle || {},
-      { gridLine: chartOptions.gridLine || {} },
       getPropertyFromData(resolvedData, "style") || {}
     );
     const seriesInput = Array.isArray(resolvedData.series) ? resolvedData.series : [];
+    const seriesPalette = getSeriesPalette(chartOptions);
     this.series = seriesInput.map((series, index) => {
       const seriesId = getSeriesId(series, index);
       const assignedColor = getAssignedSeriesColor(this, seriesId);
-      const normalizedSeries = normalizeSeries(this.owner, this.style, series, index, assignedColor);
+      const normalizedSeries = normalizeSeries(
+        this.owner,
+        this.style,
+        series,
+        index,
+        assignedColor,
+        seriesPalette
+      );
       if (hasSeriesInputColor(series) || !hasChartSeriesColor(this.style)) {
         setAssignedSeriesColor(this, seriesId, normalizedSeries.style.color);
       }
@@ -3430,10 +4082,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return typeof value === "number" && Number.isFinite(value);
   }
   __name(isFiniteNumber, "isFiniteNumber");
-  function clamp$1(value, min, max) {
+  function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
   }
-  __name(clamp$1, "clamp$1");
+  __name(clamp, "clamp");
   function getLaneArticleOptionImpact(articleOption) {
     const styleChanged = hasLaneArticlePath(articleOption, LANE_ARTICLE_STYLE_PATHS);
     const cacheChanged = styleChanged || hasLaneArticlePath(articleOption, LANE_ARTICLE_CACHE_ONLY_PATHS);
@@ -3504,10 +4156,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const rawMax = isFiniteNumber(layoutOptions.max) ? layoutOptions.max : Number.POSITIVE_INFINITY;
     const min = Math.max(0, Math.min(rawMin, rawMax));
     const max = Math.max(min, rawMax);
-    const boundedMin = clamp$1(min, 0, safeAvailableHeight);
-    const boundedMax = clamp$1(max, boundedMin, safeAvailableHeight);
+    const boundedMin = clamp(min, 0, safeAvailableHeight);
+    const boundedMax = clamp(max, boundedMin, safeAvailableHeight);
     const scaledDistance = Math.round(safeAvailableHeight * ratio);
-    return clamp$1(scaledDistance, boundedMin, boundedMax);
+    return clamp(scaledDistance, boundedMin, boundedMax);
   }
   __name(computeResponsiveDistanceToBaseline, "computeResponsiveDistanceToBaseline");
   function resolveDistanceToBaselineValue(distanceToBaseline, availableHeight, laneLayoutActive, cardLayoutName) {
@@ -3537,7 +4189,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   const DEFAULT_STYLE = {
     width: 150,
-    color: "#e9e9e9",
+    color: "#e5e5e5",
     backgroundColor: "#fff",
     topRadius: 3,
     // portrait card layout only
@@ -3662,6 +4314,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       offsetY: 0
     }
   };
+  const DEFAULT_MAIN_LINE_COLOR = "#cdd2d8";
   const ENGINE_DEFAULTS = {
     width: 1e3,
     height: 500,
@@ -3697,7 +4350,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         // density region size
         initial: 200,
         showMinorLabels: 48,
-        minimum: 8
+        minimum: 8,
+        minimumMajor: 120
       }
     },
     initialDate: {
@@ -3727,7 +4381,22 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         visible: true,
         position: "bottom",
         size: 8,
-        showDateIndicators: true
+        color: DEFAULT_MAIN_LINE_COLOR,
+        opacity: 0.75,
+        dateIndicators: {
+          visible: true,
+          shape: "rectangle",
+          size: 4,
+          color: "#666",
+          opacity: 1,
+          hiddenStyle: {
+            opacity: 0.25
+          },
+          activeStyle: {
+            color: "article",
+            opacity: 1
+          }
+        }
       },
       draggingHighlight: {
         visible: true,
@@ -3778,6 +4447,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
             x: 4,
             y: 0
           },
+          sticky: {
+            enabled: "auto",
+            offsetX: 4
+          },
           bceText: " ʙᴄᴇ",
           thousandsSeparator: ",",
           yearPrefixes: {
@@ -3785,6 +4458,23 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
             Ma: { label: "Ma", value: 1e6, minDivision: 1e6 },
             Ga: { label: "Ga", value: 1e9, minDivision: 1e9 }
           }
+        },
+        parent: {
+          visible: false,
+          levels: "all",
+          height: 20,
+          font: "normal 14px Calibri",
+          color: "#444",
+          futureColor: "#ccc",
+          textAlign: "start",
+          offset: {
+            x: 4,
+            y: 0
+          },
+          sticky: {
+            enabled: true,
+            offsetX: 4
+          }
         }
       },
       cursor: {
@@ -3812,6 +4502,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         up: "edge",
         down: 0
       },
+      seriesColors: [...CHART_DEFAULT_PALETTE],
       defaultData: {},
       defaultStyle: deepMerge({}, CHART_DEFAULT_STYLE),
       data: []
@@ -3906,6 +4597,47 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     Logger.warn(`DEPRECATION WARNING: ${fromPath} is deprecated. Use ${toPath} instead.`);
   }
   __name(warnDeprecatedOptionPath, "warnDeprecatedOptionPath");
+  const DATE_INDICATOR_SHAPES = /* @__PURE__ */ new Set(["rectangle", "circle"]);
+  function validateDateIndicatorStyle(style, optionPath, { allowVisible = false } = {}) {
+    if (style === void 0) {
+      return;
+    }
+    if (!style || typeof style !== "object" || Array.isArray(style)) {
+      throw new TypeError(`${optionPath} must be an object`);
+    }
+    if (allowVisible && style.visible !== void 0 && typeof style.visible !== "boolean") {
+      throw new TypeError(`${optionPath}.visible must be a boolean`);
+    }
+    if (style.shape !== void 0 && !DATE_INDICATOR_SHAPES.has(style.shape)) {
+      throw new TypeError(`${optionPath}.shape must be "rectangle" or "circle"`);
+    }
+    if (style.size !== void 0 && (typeof style.size !== "number" || !Number.isFinite(style.size) || style.size <= 0)) {
+      throw new TypeError(`${optionPath}.size must be a positive finite number`);
+    }
+    if (style.color !== void 0 && typeof style.color !== "string") {
+      throw new TypeError(`${optionPath}.color must be a CSS colour string or "article"`);
+    }
+    if (style.opacity !== void 0 && (typeof style.opacity !== "number" || !Number.isFinite(style.opacity) || style.opacity < 0 || style.opacity > 1)) {
+      throw new TypeError(`${optionPath}.opacity must be a finite number between 0 and 1`);
+    }
+  }
+  __name(validateDateIndicatorStyle, "validateDateIndicatorStyle");
+  function validateDateIndicatorOptions(inputOptions) {
+    var _a, _b;
+    const dateIndicators = (_b = (_a = inputOptions == null ? void 0 : inputOptions.style) == null ? void 0 : _a.mainLine) == null ? void 0 : _b.dateIndicators;
+    validateDateIndicatorStyle(dateIndicators, "style.mainLine.dateIndicators", {
+      allowVisible: true
+    });
+    validateDateIndicatorStyle(
+      dateIndicators == null ? void 0 : dateIndicators.hiddenStyle,
+      "style.mainLine.dateIndicators.hiddenStyle"
+    );
+    validateDateIndicatorStyle(
+      dateIndicators == null ? void 0 : dateIndicators.activeStyle,
+      "style.mainLine.dateIndicators.activeStyle"
+    );
+  }
+  __name(validateDateIndicatorOptions, "validateDateIndicatorOptions");
   function migrateArticleDistanceToBaseline(inputArticleOptions, processedArticleOptions, optionPath) {
     if ((inputArticleOptions == null ? void 0 : inputArticleOptions.distanceToMainLine) === void 0) {
       return;
@@ -3930,10 +4662,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (typeof path !== "string") {
       return path;
     }
-    const normalizedPath = path.replace(
-      /(^article\.|\.article\.)distanceToMainLine$/,
-      "$1distanceToBaseline.value"
-    );
+    const normalizedPath = path.replace(/(^article\.|\.article\.)distanceToMainLine$/, "$1distanceToBaseline.value").replace(/^chart\.gridLine(?=\.|$)/, "chart.defaultStyle.gridLine");
     if (normalizedPath !== path) {
       warnDeprecatedOptionPath(path, normalizedPath);
     }
@@ -3960,18 +4689,31 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   }
   __name(handleDeprecatedLaneOptions, "handleDeprecatedLaneOptions");
   function handleDeprecatedOptions(inputOptions) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (!inputOptions) {
       return inputOptions;
     }
+    validateDateIndicatorOptions(inputOptions);
     const processedOptions = deepMerge({}, inputOptions);
-    if (((_a = inputOptions.article) == null ? void 0 : _a.distanceToMainLine) !== void 0) {
+    if (((_a = inputOptions.chart) == null ? void 0 : _a.gridLine) !== void 0) {
+      warnDeprecatedOptionPath("chart.gridLine", "chart.defaultStyle.gridLine");
+      if (!processedOptions.chart.defaultStyle) {
+        processedOptions.chart.defaultStyle = {};
+      }
+      processedOptions.chart.defaultStyle.gridLine = deepMerge(
+        {},
+        inputOptions.chart.gridLine,
+        ((_b = inputOptions.chart.defaultStyle) == null ? void 0 : _b.gridLine) || {}
+      );
+      delete processedOptions.chart.gridLine;
+    }
+    if (((_c = inputOptions.article) == null ? void 0 : _c.distanceToMainLine) !== void 0) {
       if (!processedOptions.article) {
         processedOptions.article = {};
       }
       migrateArticleDistanceToBaseline(inputOptions.article, processedOptions.article, "article");
     }
-    if (Array.isArray((_b = inputOptions.lane) == null ? void 0 : _b.data)) {
+    if (Array.isArray((_d = inputOptions.lane) == null ? void 0 : _d.data)) {
       if (!processedOptions.lane) {
         processedOptions.lane = {};
       }
@@ -3980,7 +4722,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         processedOptions.lane.data[i] = handleDeprecatedLaneOptions(inputOptions.lane.data[i]);
       }
     }
-    if (((_d = (_c = inputOptions.article) == null ? void 0 : _c.periodLine) == null ? void 0 : _d.defaultHide) !== void 0) {
+    if (((_f = (_e = inputOptions.article) == null ? void 0 : _e.periodLine) == null ? void 0 : _f.defaultHide) !== void 0) {
       Logger.warn(
         "DEPRECATION WARNING: article.periodLine.defaultHide is deprecated. Use article.defaultData.hidePeriodLine instead."
       );
@@ -4242,12 +4984,16 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     this.isDataLoaded = true;
   };
   TimeBand.prototype._setupPeriod = function(data) {
-    const fromDmy = new Dmy(
+    let fromDmy = new Dmy(
       parseInt(getPropertyFromData(data, "from.year")),
       parseInt(getPropertyFromData(data, "from.month")),
-      parseInt(getPropertyFromData(data, "from.day"))
+      parseInt(getPropertyFromData(data, "from.day")),
+      parseInt(getPropertyFromData(data, "from.hour")),
+      parseInt(getPropertyFromData(data, "from.minute")),
+      parseInt(getPropertyFromData(data, "from.second")),
+      parseInt(getPropertyFromData(data, "from.millisecond"))
     );
-    this.owner.getDmyFromInput(fromDmy);
+    fromDmy = this.owner.getDmyFromInput(fromDmy);
     const fromPrecision = getPropertyFromData(data, "from.precision");
     const isToPresentProp = getPropertyFromData(data, "isToPresent");
     const isToPresent = isToPresentProp === true || isToPresentProp === 1;
@@ -4259,17 +5005,21 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       toDmy = new Dmy(
         parseInt(getPropertyFromData(data, "to.year")),
         parseInt(getPropertyFromData(data, "to.month")),
-        parseInt(getPropertyFromData(data, "to.day"))
+        parseInt(getPropertyFromData(data, "to.day")),
+        parseInt(getPropertyFromData(data, "to.hour")),
+        parseInt(getPropertyFromData(data, "to.minute")),
+        parseInt(getPropertyFromData(data, "to.second")),
+        parseInt(getPropertyFromData(data, "to.millisecond"))
       );
-      this.owner.getDmyFromInput(toDmy);
+      toDmy = this.owner.getDmyFromInput(toDmy);
       toPrecision = getPropertyFromData(data, "to.precision");
     } else {
       toDmy = fromDmy;
       toPrecision = fromPrecision;
     }
     const from = Dmy.CreateAsStartOfPeriod(fromDmy, fromPrecision);
-    const to = Dmy.CreateAsEndOfPeriod(toDmy, toPrecision);
-    this.period = { from, to: to.getNextDay(), isToPresent };
+    const to = Dmy.CreateAsExclusiveEndOfPeriod(toDmy, toPrecision);
+    this.period = { from, to, isToPresent };
   };
   TimeBand.prototype.overlapsInclusiveWithDates = function(from, to) {
     return !(this.period.from.isAfter(to) || from.isAfter(this.period.to));
@@ -4366,16 +5116,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return minIndex;
   }
   __name(findMinIndex, "findMinIndex");
-  function clamp(value, min, max) {
-    if (value < min) {
-      return min;
-    }
-    if (value > max) {
-      return max;
-    }
-    return value;
-  }
-  __name(clamp, "clamp");
   function isScreenAutoStackingRange(range) {
     return range === "screen" || range === 1;
   }
@@ -5055,6 +5795,151 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   __name(_ImageLoader, "ImageLoader");
   let ImageLoader = _ImageLoader;
+  const SUBDAY_UNIT_MILLISECONDS = {
+    [ZOOM_MILLISECOND]: 1,
+    [ZOOM_SECOND]: MILLISECONDS_PER_SECOND,
+    [ZOOM_MINUTE]: MILLISECONDS_PER_MINUTE,
+    [ZOOM_HOUR]: MILLISECONDS_PER_HOUR
+  };
+  const ADAPTIVE_MINOR_INTERVALS = {
+    [ZOOM_HOUR]: [12, 6, 3, 1],
+    [ZOOM_MINUTE]: [30, 10, 5, 1],
+    [ZOOM_SECOND]: [30, 10, 5, 1],
+    [ZOOM_MILLISECOND]: [500, 100, 50, 10, 5, 1]
+  };
+  const SUBDAY_VISUAL_SCALES = [
+    {
+      majorUnit: ZOOM_DAY,
+      majorMilliseconds: MILLISECONDS_PER_DAY,
+      minorUnit: ZOOM_HOUR
+    },
+    {
+      majorUnit: ZOOM_HOUR,
+      majorMilliseconds: MILLISECONDS_PER_HOUR,
+      minorUnit: ZOOM_MINUTE
+    },
+    {
+      majorUnit: ZOOM_MINUTE,
+      majorMilliseconds: MILLISECONDS_PER_MINUTE,
+      minorUnit: ZOOM_SECOND
+    },
+    {
+      majorUnit: ZOOM_SECOND,
+      majorMilliseconds: MILLISECONDS_PER_SECOND,
+      minorUnit: ZOOM_MILLISECOND
+    }
+  ];
+  const PARENT_CONTEXT_MAXIMUM_LEVEL = ZOOM_CENTURY;
+  function getZoomUnitLengthInDays(unit) {
+    if (unit < ZOOM_DAY) {
+      return SUBDAY_UNIT_MILLISECONDS[unit] / MILLISECONDS_PER_DAY;
+    }
+    return unit === ZOOM_DAY ? 1 : null;
+  }
+  __name(getZoomUnitLengthInDays, "getZoomUnitLengthInDays");
+  function formatSubdayVisualMajorLabel(dmy, unit, options) {
+    if (unit === ZOOM_DAY) {
+      return dmy.format("D MMM YYYY", options);
+    }
+    if (unit === ZOOM_SECOND) {
+      return dmy.format("HH:mm:ss");
+    }
+    return dmy.format("HH:mm");
+  }
+  __name(formatSubdayVisualMajorLabel, "formatSubdayVisualMajorLabel");
+  function formatSubdayMinorLabel(dmy, unit) {
+    if (unit === ZOOM_HOUR || unit === ZOOM_MINUTE) {
+      return dmy.format("HH:mm");
+    }
+    if (unit === ZOOM_SECOND) {
+      return `:${dmy.format("ss")}`;
+    }
+    return `.${dmy.format("SSS")}`;
+  }
+  __name(formatSubdayMinorLabel, "formatSubdayMinorLabel");
+  function ordinal(value, thousandsSeparator) {
+    const lastTwoDigits = value % 100;
+    let suffix;
+    if (lastTwoDigits >= 11 && lastTwoDigits <= 13) {
+      suffix = "th";
+    } else {
+      switch (value % 10) {
+        case 1:
+          suffix = "st";
+          break;
+        case 2:
+          suffix = "nd";
+          break;
+        case 3:
+          suffix = "rd";
+          break;
+        default:
+          suffix = "th";
+      }
+    }
+    const formattedValue = new Dmy(value, 1, 1).format("YYYY", {
+      thousandsSeparator,
+      bceText: ""
+    });
+    return `${formattedValue}${suffix}`;
+  }
+  __name(ordinal, "ordinal");
+  function getParentIntervalStart(value, unit) {
+    switch (unit) {
+      case ZOOM_SECOND:
+        return new Dmy(value.year, value.month, value.day, value.hour, value.minute, value.second);
+      case ZOOM_MINUTE:
+        return new Dmy(value.year, value.month, value.day, value.hour, value.minute);
+      case ZOOM_HOUR:
+        return new Dmy(value.year, value.month, value.day, value.hour);
+      case ZOOM_DAY:
+        return new Dmy(value.year, value.month, value.day);
+      case ZOOM_MONTH:
+        return new Dmy(value.year, value.month, 1);
+      case ZOOM_YEAR:
+        return new Dmy(value.year, 1, 1);
+      case ZOOM_DECADE: {
+        if (value.year > 0) {
+          return new Dmy(Math.floor(value.year / 10) * 10, 1, 1);
+        }
+        const displayedYear = 1 - value.year;
+        const displayedDecade = Math.floor(displayedYear / 10) * 10;
+        return new Dmy(1 - (displayedDecade + 9), 1, 1);
+      }
+      case ZOOM_CENTURY:
+        return Dmy.CreateAsStartOfPeriod(value, "century");
+      case ZOOM_MILLENNIUM:
+        return Dmy.CreateAsStartOfPeriod(value, "millennium");
+      default:
+        return null;
+    }
+  }
+  __name(getParentIntervalStart, "getParentIntervalStart");
+  function getNextParentInterval(start, unit) {
+    switch (unit) {
+      case ZOOM_SECOND:
+        return start.addSeconds(1);
+      case ZOOM_MINUTE:
+        return start.addMinutes(1);
+      case ZOOM_HOUR:
+        return start.addHours(1);
+      case ZOOM_DAY:
+        return start.getNextDay();
+      case ZOOM_MONTH:
+        return start.getNextMonth();
+      case ZOOM_YEAR:
+        return start.addYears(1);
+      case ZOOM_DECADE:
+        return start.addYears(10);
+      case ZOOM_CENTURY:
+        return Dmy.CreateAsExclusiveEndOfPeriod(start, "century");
+      case ZOOM_MILLENNIUM:
+        return Dmy.CreateAsExclusiveEndOfPeriod(start, "millennium");
+      default:
+        return null;
+    }
+  }
+  __name(getNextParentInterval, "getNextParentInterval");
   const _TimescaleManager = class _TimescaleManager {
     constructor(owner, zoomOptions) {
       this.owner = owner;
@@ -5063,6 +5948,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       this.startToken = null;
       this.unit = ZOOM_DAY;
       this.unitSizeInPixels = 100;
+      this.adaptiveMinorUnit = null;
+      this.adaptiveMinorInterval = null;
+      this.adaptiveMinorMarkerSpacingInPixels = null;
       this.unitLengthInYears = 1;
       this.zoomChangedHandlers = [];
       this.yearPrefix = {
@@ -5071,14 +5959,16 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         major: false
       };
       this.unitLevels = [];
+      this.unitOrder = [];
     }
   };
   __name(_TimescaleManager, "TimescaleManager");
   let TimescaleManager = _TimescaleManager;
   TimescaleManager.prototype.getUnitSizeInPixelsForZoom = function(zoom) {
+    var _a;
     const zoomRatio = this.zoomOptions.ratio;
     const currentUnitSettings = this.unitLevels[this.unit];
-    const zoomStart = currentUnitSettings.zoomStart;
+    const zoomStart = (_a = currentUnitSettings.referenceZoom) != null ? _a : currentUnitSettings.zoomStart;
     const startUnitSize = currentUnitSettings.startUnitSize;
     return startUnitSize * Math.pow(zoomRatio, zoom - zoomStart);
   };
@@ -5086,14 +5976,290 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return this.unitLevels[this.unit].zoomStart;
   };
   TimescaleManager.prototype.getUnitFromZoom = function(zoom) {
-    const unitLevels = this.unitLevels;
-    for (let i = unitLevels.length - 1; i >= 0; i--) {
-      if (zoom >= unitLevels[i].zoomStart) {
-        return i;
+    for (let i = this.unitOrder.length - 1; i >= 0; i--) {
+      const unit = this.unitOrder[i];
+      if (zoom >= this.unitLevels[unit].zoomStart) {
+        return unit;
       }
     }
     throw new Error(`Zoom ${zoom} is out of range`);
   };
+  TimescaleManager.prototype.getAdaptiveMinorInterval = function(unit = this.unit, unitSizeInPixels = this.unitSizeInPixels) {
+    var _a;
+    const intervals = ADAPTIVE_MINOR_INTERVALS[unit];
+    if (!intervals) {
+      return 1;
+    }
+    const minimumMarkerSpacing = this.zoomOptions.unitSize.minimum;
+    const minimumLabelSpacing = (_a = this.zoomOptions.unitSize.showMinorLabels) != null ? _a : minimumMarkerSpacing;
+    const minimumSpacing = Math.max(minimumMarkerSpacing, minimumLabelSpacing);
+    for (let i = intervals.length - 1; i >= 0; i--) {
+      if (unitSizeInPixels * intervals[i] >= minimumSpacing) {
+        return intervals[i];
+      }
+    }
+    return null;
+  };
+  TimescaleManager.prototype.getSubdayVisualMarkerLayout = function() {
+    var _a;
+    if (this.zoomOptions.minimum >= ZOOM_DAY || this.zoom > ZOOM_DAY || this.unit > ZOOM_DAY) {
+      return null;
+    }
+    const unitMilliseconds = this.unit === ZOOM_DAY ? MILLISECONDS_PER_DAY : SUBDAY_UNIT_MILLISECONDS[this.unit];
+    const pixelsPerMillisecond = this.unitSizeInPixels / unitMilliseconds;
+    const minimumMajorSpacing = (_a = this.zoomOptions.unitSize.minimumMajor) != null ? _a : 120;
+    let scale = null;
+    for (let i = SUBDAY_VISUAL_SCALES.length - 1; i >= 0; i--) {
+      const candidate = SUBDAY_VISUAL_SCALES[i];
+      if (candidate.majorMilliseconds * pixelsPerMillisecond >= minimumMajorSpacing) {
+        scale = candidate;
+        break;
+      }
+    }
+    if (!scale) {
+      return null;
+    }
+    const minorUnitSizeInPixels = SUBDAY_UNIT_MILLISECONDS[scale.minorUnit] * pixelsPerMillisecond;
+    const minorInterval = this.getAdaptiveMinorInterval(scale.minorUnit, minorUnitSizeInPixels);
+    return __spreadProps(__spreadValues({}, scale), {
+      majorMarkerSpacingInPixels: scale.majorMilliseconds * pixelsPerMillisecond,
+      minorInterval,
+      minorMarkerSpacingInPixels: minorInterval ? minorUnitSizeInPixels * minorInterval : null,
+      minorMilliseconds: minorInterval ? SUBDAY_UNIT_MILLISECONDS[scale.minorUnit] * minorInterval : null,
+      pixelsPerMillisecond
+    });
+  };
+  TimescaleManager.prototype.getParentContextScale = function() {
+    const visualLayout = this.getSubdayVisualMarkerLayout();
+    const levelUnit = visualLayout ? visualLayout.majorUnit : this.unit + 1;
+    if (levelUnit < ZOOM_MILLISECOND || levelUnit > PARENT_CONTEXT_MAXIMUM_LEVEL) {
+      return null;
+    }
+    return {
+      level: this.zoomUnitToString(levelUnit),
+      levelUnit,
+      parentUnit: levelUnit <= ZOOM_HOUR ? ZOOM_DAY : levelUnit + 1
+    };
+  };
+  TimescaleManager.prototype.isParentContextTextVisible = function(options) {
+    if ((options == null ? void 0 : options.visible) !== true) {
+      return false;
+    }
+    const scale = this.getParentContextScale();
+    if (!scale) {
+      return false;
+    }
+    if (options.levels === "all") {
+      return true;
+    }
+    return Array.isArray(options.levels) && options.levels.includes(scale.level);
+  };
+  TimescaleManager.prototype.formatParentContextLabel = function(value, unit) {
+    const options = this.getDateLabelFormatOptions(MAJOR_MARKER);
+    switch (unit) {
+      case ZOOM_SECOND:
+      case ZOOM_MINUTE:
+      case ZOOM_HOUR:
+      case ZOOM_DAY:
+        return value.format("D MMM YYYY", options);
+      case ZOOM_MONTH:
+        return value.format("MMM YYYY", options);
+      case ZOOM_YEAR:
+        return value.format("YYYY", options);
+      case ZOOM_DECADE: {
+        const displayedYear = value.year <= 0 ? 1 - value.year : value.year;
+        const decade = Math.floor(displayedYear / 10) * 10;
+        const formattedDecade = new Dmy(decade, 1, 1).format("YYYY", {
+          thousandsSeparator: options.thousandsSeparator,
+          bceText: ""
+        });
+        return `${formattedDecade}s${value.year <= 0 ? options.bceText : ""}`;
+      }
+      case ZOOM_CENTURY:
+      case ZOOM_MILLENNIUM: {
+        const displayedYear = value.year <= 0 ? 1 - value.year : value.year;
+        const periodSize = unit === ZOOM_CENTURY ? 100 : 1e3;
+        const period = Math.ceil(displayedYear / periodSize);
+        const periodName = unit === ZOOM_CENTURY ? "century" : "millennium";
+        return `${ordinal(period, options.thousandsSeparator)} ${periodName}${value.year <= 0 ? options.bceText : ""}`;
+      }
+      default:
+        return "";
+    }
+  };
+  TimescaleManager.prototype.createParentContextTokens = function(visibleStart, width, repositionWindow) {
+    const scale = this.getParentContextScale();
+    if (!scale || !visibleStart || !this.startToken) {
+      return [];
+    }
+    const tokens = [];
+    let value = getParentIntervalStart(visibleStart, scale.parentUnit);
+    let drawX = repositionWindow + this.getPixelsBetween(this.startToken.value, value);
+    do {
+      const nextValue = getNextParentInterval(value, scale.parentUnit);
+      if (!nextValue) {
+        break;
+      }
+      const nextDrawX = repositionWindow + this.getPixelsBetween(this.startToken.value, nextValue);
+      tokens.push({
+        drawX,
+        label: this.formatParentContextLabel(value, scale.parentUnit),
+        length: nextDrawX - drawX,
+        unit: scale.parentUnit,
+        value
+      });
+      value = nextValue;
+      drawX = nextDrawX;
+    } while (tokens.length < 1e3 && tokens[tokens.length - 1].drawX <= width);
+    return tokens;
+  };
+  TimescaleManager.prototype.setAdaptiveMinorInterval = function() {
+    const layout = this.getSubdayVisualMarkerLayout();
+    if (!layout) {
+      this.adaptiveMinorUnit = null;
+      this.adaptiveMinorInterval = null;
+      this.adaptiveMinorMarkerSpacingInPixels = null;
+      return;
+    }
+    this.adaptiveMinorUnit = layout.minorUnit;
+    this.adaptiveMinorInterval = layout.minorInterval;
+    this.adaptiveMinorMarkerSpacingInPixels = layout.minorMarkerSpacingInPixels;
+  };
+  TimescaleManager.prototype.createSubdayVisualMarkers = function(width, repositionWindow, layout = this.getSubdayVisualMarkerLayout()) {
+    const markers = {
+      [MAJOR_MARKER]: [],
+      [MINOR_MARKER]: []
+    };
+    if (!layout || !this.startToken) {
+      return markers;
+    }
+    const buffer = 150;
+    const stepMilliseconds = layout.minorMilliseconds || layout.majorMilliseconds;
+    const millisecondsToLeftEdge = Math.floor(
+      (-buffer - repositionWindow) / layout.pixelsPerMillisecond
+    );
+    const approximateStart = this.startToken.value.addMilliseconds(millisecondsToLeftEdge);
+    const dayStart = new Dmy(approximateStart.year, approximateStart.month, approximateStart.day);
+    const firstOffset = Math.floor(approximateStart.getMillisecondsOfDay() / stepMilliseconds) * stepMilliseconds;
+    let value = dayStart.addMilliseconds(firstOffset);
+    const showMinorLabels = layout.minorMarkerSpacingInPixels >= this.zoomOptions.unitSize.showMinorLabels;
+    const createMajorMarker = /* @__PURE__ */ __name((majorValue) => ({
+      drawX: repositionWindow + this.getPixelsBetween(this.startToken.value, majorValue),
+      label: formatSubdayVisualMajorLabel(
+        majorValue,
+        layout.majorUnit,
+        this.getDateLabelFormatOptions(MAJOR_MARKER)
+      ),
+      length: layout.majorMarkerSpacingInPixels,
+      markerSpacingInPixels: layout.majorMarkerSpacingInPixels,
+      type: MAJOR_MARKER,
+      unit: layout.majorUnit,
+      value: majorValue,
+      visual: true
+    }), "createMajorMarker");
+    const owningMajorOffset = Math.floor(approximateStart.getMillisecondsOfDay() / layout.majorMilliseconds) * layout.majorMilliseconds;
+    const owningMajorValue = dayStart.addMilliseconds(owningMajorOffset);
+    if (owningMajorValue.isAfter(value) === false && !owningMajorValue.isSame(value)) {
+      markers[MAJOR_MARKER].push(createMajorMarker(owningMajorValue));
+    }
+    while (true) {
+      const drawX = repositionWindow + this.getPixelsBetween(this.startToken.value, value);
+      if (drawX > width + buffer) {
+        break;
+      }
+      const millisecondsOfDay = value.getMillisecondsOfDay();
+      const isMajor = millisecondsOfDay % layout.majorMilliseconds === 0;
+      if (isMajor) {
+        markers[MAJOR_MARKER].push(createMajorMarker(value));
+      } else if (layout.minorMilliseconds) {
+        markers[MINOR_MARKER].push({
+          adaptive: layout.minorInterval !== 1,
+          drawX,
+          label: showMinorLabels ? formatSubdayMinorLabel(value, layout.minorUnit) : void 0,
+          length: layout.minorMarkerSpacingInPixels,
+          markerSpacingInPixels: layout.minorMarkerSpacingInPixels,
+          type: MINOR_MARKER,
+          unit: layout.minorUnit,
+          value,
+          visual: true
+        });
+      }
+      value = value.addMilliseconds(stepMilliseconds);
+    }
+    return markers;
+  };
+  TimescaleManager.prototype.createHourToken = function(dmy) {
+    const token = {
+      unit: ZOOM_HOUR,
+      value: dmy,
+      length: this.unitSizeInPixels
+    };
+    const unitSettings = this.unitLevels[ZOOM_HOUR];
+    if (dmy.hour === 0) {
+      token.label = dmy.format("D MMM YYYY", this.getDateLabelFormatOptions(MAJOR_MARKER));
+      token.type = MAJOR_MARKER;
+    } else {
+      token.type = MINOR_MARKER;
+      if (this.zoom < unitSettings.zoomHideMinorLabels) {
+        token.label = formatSubdayMinorLabel(dmy, ZOOM_HOUR);
+      }
+    }
+    return token;
+  };
+  TimescaleManager.prototype.createMinuteToken = function(dmy) {
+    const token = {
+      unit: ZOOM_MINUTE,
+      value: dmy,
+      length: this.unitSizeInPixels
+    };
+    const unitSettings = this.unitLevels[ZOOM_MINUTE];
+    if (dmy.minute === 0) {
+      token.label = dmy.format("HH:mm");
+      token.type = MAJOR_MARKER;
+    } else {
+      token.type = MINOR_MARKER;
+      if (this.zoom < unitSettings.zoomHideMinorLabels) {
+        token.label = formatSubdayMinorLabel(dmy, ZOOM_MINUTE);
+      }
+    }
+    return token;
+  };
+  TimescaleManager.prototype.createSecondToken = function(dmy) {
+    const token = {
+      unit: ZOOM_SECOND,
+      value: dmy,
+      length: this.unitSizeInPixels
+    };
+    const unitSettings = this.unitLevels[ZOOM_SECOND];
+    if (dmy.second === 0) {
+      token.label = dmy.format("HH:mm:ss");
+      token.type = MAJOR_MARKER;
+    } else {
+      token.type = MINOR_MARKER;
+      if (this.zoom < unitSettings.zoomHideMinorLabels) {
+        token.label = formatSubdayMinorLabel(dmy, ZOOM_SECOND);
+      }
+    }
+    return token;
+  };
+  TimescaleManager.prototype.createMillisecondToken = function(dmy) {
+    const token = {
+      unit: ZOOM_MILLISECOND,
+      value: dmy,
+      length: this.unitSizeInPixels
+    };
+    const unitSettings = this.unitLevels[ZOOM_MILLISECOND];
+    if (dmy.millisecond === 0) {
+      token.label = dmy.format("HH:mm:ss.SSS");
+      token.type = MAJOR_MARKER;
+    } else {
+      token.type = MINOR_MARKER;
+      if (this.zoom < unitSettings.zoomHideMinorLabels) {
+        token.label = formatSubdayMinorLabel(dmy, ZOOM_MILLISECOND);
+      }
+    }
+    return token;
+  };
   TimescaleManager.prototype.getDateLabelFormatOptions = function(tokenType) {
     tokenType = tokenType === MAJOR_MARKER ? "major" : "minor";
     const dateLabelFormatOptions = this.owner.options.style.dateLabel[tokenType];
@@ -5184,6 +6350,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     this.zoom = nextZoom;
     this.unit = this.getUnitFromZoom(this.zoom);
     this.unitSizeInPixels = this.getUnitSizeInPixelsForZoom(this.zoom);
+    this.setAdaptiveMinorInterval();
     let unitLengthInYears = 0;
     if (this.unit >= ZOOM_YEAR) {
       const unitYearPowerOfTen = this.unit - ZOOM_YEAR;
@@ -5202,7 +6369,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   TimescaleManager.prototype.getPixelsBetween = function(a, b) {
     const unit = this.unit;
     if (unit <= ZOOM_DAY) {
-      return a.getDaysTo(b) * this.unitSizeInPixels;
+      return a.getDaysTo(b) * this.unitSizeInPixels / getZoomUnitLengthInDays(unit);
     }
     if (unit === ZOOM_MONTH) {
       return a.getMonthsTo(b) * this.unitSizeInPixels;
@@ -5219,9 +6386,27 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       bcMove = 1;
     }
     switch (this.unit) {
-      case ZOOM_DAY:
-        this.startToken = this.createDayToken(from);
+      case ZOOM_MILLISECOND:
+        this.startToken = this.createMillisecondToken(new Dmy(from));
         return 0;
+      case ZOOM_SECOND: {
+        const start = new Dmy(from.year, from.month, from.day, from.hour, from.minute, from.second);
+        this.startToken = this.createSecondToken(start);
+        return -this.getPixelsBetween(start, from);
+      }
+      case ZOOM_MINUTE: {
+        const start = new Dmy(from.year, from.month, from.day, from.hour, from.minute);
+        this.startToken = this.createMinuteToken(start);
+        return -this.getPixelsBetween(start, from);
+      }
+      case ZOOM_HOUR: {
+        const start = new Dmy(from.year, from.month, from.day, from.hour);
+        this.startToken = this.createHourToken(start);
+        return -this.getPixelsBetween(start, from);
+      }
+      case ZOOM_DAY:
+        this.startToken = this.createDayToken(new Dmy(from.year, from.month, from.day));
+        return -this.getPixelsBetween(this.startToken.value, from);
       case ZOOM_MONTH: {
         this.startToken = this.createMonthToken(new Dmy(from.year, from.month, 1));
         const unitSizeForDays = this.unitSizeInPixels / 30.44;
@@ -5244,6 +6429,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   TimescaleManager.prototype.getStartTokenCloned = function() {
     switch (this.startToken.unit) {
+      case ZOOM_MILLISECOND:
+        return this.createMillisecondToken(this.startToken.value);
+      case ZOOM_SECOND:
+        return this.createSecondToken(this.startToken.value);
+      case ZOOM_MINUTE:
+        return this.createMinuteToken(this.startToken.value);
+      case ZOOM_HOUR:
+        return this.createHourToken(this.startToken.value);
       case ZOOM_DAY:
         return this.createDayToken(this.startToken.value);
       case ZOOM_MONTH:
@@ -5254,6 +6447,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   TimescaleManager.prototype.getNext = function(token) {
     switch (token.unit) {
+      case ZOOM_MILLISECOND:
+        return this.createMillisecondToken(token.value.addMilliseconds(1));
+      case ZOOM_SECOND:
+        return this.createSecondToken(token.value.addSeconds(1));
+      case ZOOM_MINUTE:
+        return this.createMinuteToken(token.value.addMinutes(1));
+      case ZOOM_HOUR:
+        return this.createHourToken(token.value.addHours(1));
       case ZOOM_DAY:
         return this.createDayToken(token.value.getNextDay());
       case ZOOM_MONTH:
@@ -5272,6 +6473,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   TimescaleManager.prototype.getPrevious = function(token) {
     switch (token.unit) {
+      case ZOOM_MILLISECOND:
+        return this.createMillisecondToken(token.value.addMilliseconds(-1));
+      case ZOOM_SECOND:
+        return this.createSecondToken(token.value.addSeconds(-1));
+      case ZOOM_MINUTE:
+        return this.createMinuteToken(token.value.addMinutes(-1));
+      case ZOOM_HOUR:
+        return this.createHourToken(token.value.addHours(-1));
       case ZOOM_DAY:
         return this.createDayToken(token.value.getPreviousDay());
       case ZOOM_MONTH:
@@ -5294,6 +6503,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   TimescaleManager.prototype.zoomUnitToString = function(unit) {
     switch (unit) {
+      case ZOOM_MILLISECOND:
+        return "millisecond";
+      case ZOOM_SECOND:
+        return "second";
+      case ZOOM_MINUTE:
+        return "minute";
+      case ZOOM_HOUR:
+        return "hour";
       case ZOOM_DAY:
         return "day";
       case ZOOM_MONTH:
@@ -5324,9 +6541,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   TimescaleManager.prototype.setUnitLevels = function() {
     this.unitLevels = [];
+    this.unitOrder = [];
     const minUnitSize = this.zoomOptions.unitSize.minimum;
     const showMinorLabelUnitSize = this.zoomOptions.unitSize.showMinorLabels;
     const dayZoomStart = 0;
+    const addUnit = /* @__PURE__ */ __name((unit, settings) => {
+      this.unitLevels[unit] = settings;
+      this.unitOrder.push(unit);
+    }, "addUnit");
     const hideLabelsZoomChangeFromEnd = this.getZoomChangeByDistance(
       showMinorLabelUnitSize,
       minUnitSize
@@ -5341,12 +6563,41 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       zoomHideMinorLabels: dayZoomHideMinorLabels,
       zoomEnd: dayZoomEnd
     };
-    this.unitLevels.push(daySettings);
+    addUnit(ZOOM_DAY, daySettings);
+    const hourSizeAtDayBoundary = dayStartUnitSize / 24;
+    const hourZoomStart = this.getZoomChangeByDistance(hourSizeAtDayBoundary, minUnitSize * 60);
+    addUnit(ZOOM_HOUR, {
+      startUnitSize: minUnitSize * 60,
+      zoomStart: hourZoomStart,
+      zoomEnd: dayZoomStart,
+      zoomHideMinorLabels: hourZoomStart + this.getZoomChangeByDistance(minUnitSize * 60, showMinorLabelUnitSize)
+    });
+    const minuteZoomStart = hourZoomStart + this.getZoomChangeByDistance(minUnitSize, minUnitSize * 60);
+    addUnit(ZOOM_MINUTE, {
+      startUnitSize: minUnitSize * 60,
+      zoomStart: minuteZoomStart,
+      zoomEnd: hourZoomStart,
+      zoomHideMinorLabels: minuteZoomStart + this.getZoomChangeByDistance(minUnitSize * 60, showMinorLabelUnitSize)
+    });
+    const secondZoomStart = minuteZoomStart + this.getZoomChangeByDistance(minUnitSize, minUnitSize * 1e3);
+    addUnit(ZOOM_SECOND, {
+      startUnitSize: minUnitSize * 1e3,
+      zoomStart: secondZoomStart,
+      zoomEnd: minuteZoomStart,
+      zoomHideMinorLabels: secondZoomStart + this.getZoomChangeByDistance(minUnitSize * 1e3, showMinorLabelUnitSize)
+    });
+    addUnit(ZOOM_MILLISECOND, {
+      startUnitSize: minUnitSize,
+      referenceZoom: secondZoomStart,
+      zoomStart: Number.NEGATIVE_INFINITY,
+      zoomEnd: secondZoomStart,
+      zoomHideMinorLabels: secondZoomStart + this.getZoomChangeByDistance(minUnitSize, showMinorLabelUnitSize)
+    });
     const monthStartUnitSize = minUnitSize * 31;
     const monthZoomSpan = this.getZoomChangeByDistance(monthStartUnitSize, minUnitSize);
     const monthZoomEnd = dayZoomEnd + monthZoomSpan;
     const monthZoomHideMinorLabels = monthZoomEnd - hideLabelsZoomChangeFromEnd;
-    this.unitLevels.push({
+    addUnit(ZOOM_MONTH, {
       startUnitSize: monthStartUnitSize,
       zoomStart: dayZoomEnd,
       zoomHideMinorLabels: monthZoomHideMinorLabels,
@@ -5356,7 +6607,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const yearZoomSpan = this.getZoomChangeByDistance(yearStartUnitSize, minUnitSize);
     const yearZoomEnd = monthZoomEnd + yearZoomSpan;
     const yearZoomHideMinorLabels = yearZoomEnd - hideLabelsZoomChangeFromEnd;
-    this.unitLevels.push({
+    addUnit(ZOOM_YEAR, {
       startUnitSize: yearStartUnitSize,
       zoomStart: monthZoomEnd,
       zoomHideMinorLabels: yearZoomHideMinorLabels,
@@ -5373,7 +6624,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       zoomSpan = this.getZoomChangeByDistance(startUnitSize, minUnitSize);
       zoomEnd = zoomStart + zoomSpan;
       zoomHideMinorLabels = zoomEnd - hideLabelsZoomChangeFromEnd;
-      this.unitLevels.push({
+      addUnit(ZOOM_YEAR + i, {
         startUnitSize,
         zoomStart,
         zoomHideMinorLabels,
@@ -5384,6 +6635,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         this.zoomOptions.maximum = Math.min(this.zoomOptions.maximum, zoomEnd);
       }
     }
+    this.unitOrder.sort((a, b) => a - b);
   };
   TimescaleManager.prototype.getZoomChangeByDistance = function(startDistance, endDistance) {
     const zoomRatio = this.zoomOptions.ratio;
@@ -5830,6 +7082,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   function Timeline(container, inputOptions) {
     var _a;
     const processedInputOptions = handleDeprecatedOptions(inputOptions);
+    this._registeredArticleLayoutStyles = deepMerge({}, DEFAULT_OPTIONS.article.layoutStyles || {});
+    this._explicitArticleOptions = deepMerge({}, (processedInputOptions == null ? void 0 : processedInputOptions.article) || {});
     this.options = deepMerge({}, DEFAULT_OPTIONS, processedInputOptions);
     if (isCanvas(container)) {
       this.canvas = container;
@@ -5908,7 +7162,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
     this._isInitialized = false;
     this._hasPendingTimelineStateChange = false;
-    const zoom = this.options.zoom, startDate = this.getDmyFromInput(new Dmy(this.options.initialDate));
+    const zoom = this.options.zoom, startDate = this.getDmyFromInput(this.options.initialDate);
     this.timescaleManager = new TimescaleManager(this, zoom);
     this.timescaleManager.setUnitLevels();
     this.timescaleManager.addZoomChangedHandler(this.zoomChanged, this);
@@ -5960,7 +7214,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       return vicinityParameters;
     }
     const pos = relativePosition || this.getRelativePosition(event);
-    return pos.top > this.top - vicinityParameters.up && pos.top < this.top + vicinityParameters.down;
+    const isWithinUpperBound = vicinityParameters.up === void 0 || pos.top > this.top - vicinityParameters.up;
+    const isWithinLowerBound = vicinityParameters.down === void 0 || pos.top < this.top + vicinityParameters.down;
+    return isWithinUpperBound && isWithinLowerBound;
   };
   Timeline.prototype.getPixel = function(dmy, drawCycleContext) {
     let cache;
@@ -6198,7 +7454,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   };
   Timeline.prototype._getArticleImageTargetSpec = function(article) {
     const layout = article._getCurrentCardLayoutName();
-    const style = article._getCurrentStyle();
+    const style = article.getCurrentStyle();
     const imageStyle = style && style.image ? style.image : {};
     const shape = imageStyle.shape || (layout === "portrait" ? "square" : "square");
     let cssTargetW = null, cssTargetH = null;
@@ -6244,6 +7500,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       option = buildObjectFromPath(normalizedOptionPath, value);
     }
     option = handleDeprecatedOptions(option);
+    if (existsInData(option, "article")) {
+      deepMerge(this._explicitArticleOptions, option.article || {});
+    }
     deepMerge(this.options, option);
     const sizeChanged = option.width || option.height;
     if (sizeChanged) {
@@ -6266,6 +7525,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (timeBandsSpaceChanged) {
       this.top = this.options.height - this._getEffectiveVerticalOffset();
     }
+    const parentContextSpaceChanged = existsInData(option, "style.dateLabel.parent.visible") || existsInData(option, "style.dateLabel.parent.height");
+    if (parentContextSpaceChanged) {
+      this.top = this.options.height - this._getEffectiveVerticalOffset();
+    }
     const articleImpact = getLaneArticleOptionImpact(getPropertyFromData(option, "article"));
     const timeBandsDefaultStyleChanged = existsInData(option, "timeBand.defaultStyle");
     if (timeBandsDefaultStyleChanged && Array.isArray(this.timeBands) && this.timeBands.length > 0) {
@@ -6280,11 +7543,15 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (Array.isArray(chartData) && typeof this.addCharts === "function") {
       this.addCharts(chartData);
     }
-    const chartDefaultsChanged = existsInData(option, "chart.defaultData") || existsInData(option, "chart.defaultStyle");
+    const chartSeriesColorsChanged = existsInData(option, "chart.seriesColors");
+    const chartDefaultsChanged = chartSeriesColorsChanged || existsInData(option, "chart.defaultData") || existsInData(option, "chart.defaultStyle");
     if (chartDefaultsChanged && Array.isArray(this.charts) && this.charts.length > 0) {
       let chartLaneChanged = false;
       for (let i = 0; i < this.charts.length; i++) {
         const previousLaneId = this.charts[i].laneId;
+        if (chartSeriesColorsChanged) {
+          this.charts[i]._seriesColors = [];
+        }
         this.charts[i]._resolveFromData();
         if (existsInData(option, "chart.defaultData") && this.charts[i].laneId != null) {
           this._ensureChartLane(this.charts[i].laneId);
@@ -6337,22 +7604,43 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     this.requestRedraw();
   };
   Timeline.prototype._getEffectiveVerticalOffset = function() {
+    var _a, _b;
     const base = this.options.verticalOffset || 0;
     const tb = this.options.timeBand || {};
     const hasLoadedBands = Array.isArray(this.timeBands) && this.timeBands.length > 0;
     const reserve = !!tb.reserveSpace;
-    const extra = reserve && tb.visible && hasLoadedBands ? tb.reserveSpacePixels || 0 : 0;
-    return base + extra;
+    const timeBandExtra = reserve && tb.visible && hasLoadedBands ? tb.reserveSpacePixels || 0 : 0;
+    const parent = ((_b = (_a = this.options.style) == null ? void 0 : _a.dateLabel) == null ? void 0 : _b.parent) || {};
+    const parentExtra = parent.visible === true ? parent.height || 0 : 0;
+    return base + timeBandExtra + parentExtra;
   };
   Timeline.prototype.generateDensitySettings = function() {
     const zoomRatio = this.timescaleManager.zoomOptions.ratio;
-    Logger.log(this.timescaleManager);
     const newSettings = [];
-    const halfZoom = Math.round(Math.log(0.5) / Math.log(zoomRatio) * 100) / 100;
-    for (let i = 0; i < 19; i++) {
+    const roundZoom = /* @__PURE__ */ __name((value) => Math.round(value * 100) / 100, "roundZoom");
+    const halfZoom = roundZoom(Math.log(0.5) / Math.log(zoomRatio));
+    const finestSubdayPower = Math.ceil(Math.log2(MILLISECONDS_PER_DAY));
+    for (let power = finestSubdayPower; power >= 1; power--) {
+      newSettings.push({
+        region: 1 - power,
+        zoom: {
+          from: power === finestSubdayPower ? Number.NEGATIVE_INFINITY : roundZoom(-power * halfZoom),
+          to: roundZoom(-(power - 1) * halfZoom)
+        },
+        low: 1,
+        medium: 2,
+        high: 3,
+        all: 25,
+        step: { months: 0, days: 0, divisionsPerDay: Math.pow(2, power) }
+      });
+    }
+    const positiveRegionCount = Math.ceil(this.timescaleManager.zoomOptions.maximum / halfZoom);
+    for (let i = 0; i < positiveRegionCount; i++) {
+      const from = roundZoom(i * halfZoom);
+      const to = roundZoom((i + 1) * halfZoom);
       const nextRegion = {
         region: i + 1,
-        zoom: { from: i * halfZoom, to: (i + 1) * halfZoom },
+        zoom: { from, to },
         low: 1,
         medium: 2,
         high: 3,
@@ -6361,12 +7649,109 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       };
       newSettings.push(nextRegion);
     }
-    Logger.log(JSON.stringify(newSettings));
-  };
+    const output = JSON.stringify(
+      newSettings,
+      (_key, value) => value === Number.NEGATIVE_INFINITY ? "__DENSITY_NEGATIVE_INFINITY__" : value,
+      2
+    ).replace('"__DENSITY_NEGATIVE_INFINITY__"', "Number.NEGATIVE_INFINITY");
+    Logger.log(output);
+  };
+  function isSubdayDensityGroupIndex(index) {
+    return index != null && typeof index === "object";
+  }
+  __name(isSubdayDensityGroupIndex, "isSubdayDensityGroupIndex");
+  function createSubdayDensityGroupIndex(date, divisionsPerDay) {
+    return {
+      day: date.getDaysSinceYearZero(),
+      division: Math.floor(date.getMillisecondsOfDay() * divisionsPerDay / MILLISECONDS_PER_DAY),
+      divisionsPerDay
+    };
+  }
+  __name(createSubdayDensityGroupIndex, "createSubdayDensityGroupIndex");
+  function compareDensityGroupIndexes(left, right) {
+    if (!isSubdayDensityGroupIndex(left) && !isSubdayDensityGroupIndex(right)) {
+      return left === right ? 0 : left < right ? -1 : 1;
+    }
+    if (left.day !== right.day) {
+      return left.day < right.day ? -1 : 1;
+    }
+    if (left.division !== right.division) {
+      return left.division < right.division ? -1 : 1;
+    }
+    return 0;
+  }
+  __name(compareDensityGroupIndexes, "compareDensityGroupIndexes");
+  function shiftDensityGroupIndex(index, offset) {
+    if (!isSubdayDensityGroupIndex(index)) {
+      return index + offset;
+    }
+    const unnormalisedDivision = index.division + offset;
+    const dayOffset = Math.floor(unnormalisedDivision / index.divisionsPerDay);
+    return {
+      day: index.day + dayOffset,
+      division: unnormalisedDivision - dayOffset * index.divisionsPerDay,
+      divisionsPerDay: index.divisionsPerDay
+    };
+  }
+  __name(shiftDensityGroupIndex, "shiftDensityGroupIndex");
+  function clampDensityGroupIndex(index, minimum, maximum) {
+    if (compareDensityGroupIndexes(index, minimum) < 0) {
+      return minimum;
+    }
+    if (compareDensityGroupIndexes(index, maximum) > 0) {
+      return maximum;
+    }
+    return index;
+  }
+  __name(clampDensityGroupIndex, "clampDensityGroupIndex");
+  function getDensityGroupKey(index) {
+    if (!isSubdayDensityGroupIndex(index)) {
+      return String(index);
+    }
+    return `${index.day}:${index.division}`;
+  }
+  __name(getDensityGroupKey, "getDensityGroupKey");
+  function getSubdayDensityGroupBoundary(index) {
+    return {
+      dayNumber: index.day,
+      dayFraction: index.division / index.divisionsPerDay
+    };
+  }
+  __name(getSubdayDensityGroupBoundary, "getSubdayDensityGroupBoundary");
   function getLaneGroupKey(laneId, groupIndex) {
-    return `${laneId}::${groupIndex}`;
+    return `${laneId}::${getDensityGroupKey(groupIndex)}`;
   }
   __name(getLaneGroupKey, "getLaneGroupKey");
+  const STARRED_INCREASE_CONSTANT = 1e7;
+  const ACTIVE_INCREASE_CONSTANT = 2e7;
+  function getArticleEffectiveRank(article) {
+    if (article.isActive) {
+      return article.rank + ACTIVE_INCREASE_CONSTANT;
+    }
+    return article.rank + (article.isStarred ? STARRED_INCREASE_CONSTANT : 0);
+  }
+  __name(getArticleEffectiveRank, "getArticleEffectiveRank");
+  function selectRankedArticles(articles, pick) {
+    const topArticles = [];
+    let minRankIndex = 0;
+    for (let i = 0; i < articles.length; i++) {
+      const article = articles[i];
+      article.effectiveRank = getArticleEffectiveRank(article);
+      if (topArticles.length < pick) {
+        topArticles.push(article);
+        if (article.effectiveRank < topArticles[minRankIndex].effectiveRank) {
+          minRankIndex = topArticles.length - 1;
+        }
+        continue;
+      }
+      if (article.effectiveRank > topArticles[minRankIndex].effectiveRank) {
+        topArticles[minRankIndex] = article;
+        minRankIndex = findMinIndex(topArticles, "effectiveRank");
+      }
+    }
+    return topArticles;
+  }
+  __name(selectRankedArticles, "selectRankedArticles");
   Timeline.prototype.updateArticlesGroupIndex = function() {
     this.forLoadedArticles(function(article) {
       article.groupIndex = this.calculateGroupIndex(article.period.from);
@@ -6376,15 +7761,21 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (this._isLaneLayoutActive()) {
       this.groups = {};
       const groupIndexExtension2 = isScreenAutoStackingRange(this.options.article.autoStacking.range) ? 1 : 20;
-      const leftmostGroupIndex2 = this.calculateGroupIndex(drawCycleContext.tokens.start) - groupIndexExtension2;
-      const rightmostGroupIndex2 = this.calculateGroupIndex(drawCycleContext.tokens.end) + groupIndexExtension2;
+      const leftmostGroupIndex2 = shiftDensityGroupIndex(
+        this.calculateGroupIndex(drawCycleContext.tokens.start),
+        -groupIndexExtension2
+      );
+      const rightmostGroupIndex2 = shiftDensityGroupIndex(
+        this.calculateGroupIndex(drawCycleContext.tokens.end),
+        groupIndexExtension2
+      );
       const activeLanes = this._getActiveLanesForLayout();
       this.forLoadedArticles(function(article) {
         article.isVisibleInGroup = false;
       });
       for (let l = 0; l < activeLanes.length; l++) {
         const lane = activeLanes[l];
-        for (let index = leftmostGroupIndex2; index <= rightmostGroupIndex2; index++) {
+        for (let index = leftmostGroupIndex2; compareDensityGroupIndexes(index, rightmostGroupIndex2) <= 0; index = shiftDensityGroupIndex(index, 1)) {
           const key = getLaneGroupKey(lane.id, index);
           this.groups[key] = this.getArticlesInGroup(
             index,
@@ -6401,13 +7792,19 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
     this.groups = {};
     const groupIndexExtension = isScreenAutoStackingRange(this.options.article.autoStacking.range) ? 1 : 20;
-    const leftmostGroupIndex = this.calculateGroupIndex(drawCycleContext.tokens.start) - groupIndexExtension;
-    const rightmostGroupIndex = this.calculateGroupIndex(drawCycleContext.tokens.end) + groupIndexExtension;
+    const leftmostGroupIndex = shiftDensityGroupIndex(
+      this.calculateGroupIndex(drawCycleContext.tokens.start),
+      -groupIndexExtension
+    );
+    const rightmostGroupIndex = shiftDensityGroupIndex(
+      this.calculateGroupIndex(drawCycleContext.tokens.end),
+      groupIndexExtension
+    );
     this.forLoadedArticles(function(article) {
       article.isVisibleInGroup = false;
     });
-    for (let index = leftmostGroupIndex; index <= rightmostGroupIndex; index++) {
-      this.groups[index] = this.getArticlesInGroup(
+    for (let index = leftmostGroupIndex; compareDensityGroupIndexes(index, rightmostGroupIndex) <= 0; index = shiftDensityGroupIndex(index, 1)) {
+      this.groups[getDensityGroupKey(index)] = this.getArticlesInGroup(
         index,
         leftmostGroupIndex,
         rightmostGroupIndex
@@ -6417,26 +7814,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       });
     }
   };
-  const STARRED_INCREASE_CONSTANT = 1e7;
-  const ACTIVE_INCREASE_CONSTANT = 2e7;
   Timeline.prototype.getArticlesInGroup = function(index, leftmostGroupIndex, rightmostGroupIndex, laneId) {
-    function getArticleEffectiveRank(article) {
-      let effectiveRank = article.rank;
-      if (article.isActive) {
-        effectiveRank += ACTIVE_INCREASE_CONSTANT;
-      } else {
-        if (article.isStarred) {
-          effectiveRank += STARRED_INCREASE_CONSTANT;
-        }
-      }
-      return effectiveRank;
-    }
-    __name(getArticleEffectiveRank, "getArticleEffectiveRank");
     const lane = typeof laneId !== "undefined" ? this.getLaneById(laneId) : null;
     const density = lane && lane.resolvedArticleOptions ? lane.resolvedArticleOptions.density : this.options.article.density;
     const pick = this.getDensityPick(density);
-    const topArticles = [];
-    let minRankIndex = 0;
+    const articlesInGroup = [];
     for (let i = 0; i < this.articles.length; i++) {
       const article = this.articles[i];
       if (!article.isDataLoaded || article.isHiddenByFilter) {
@@ -6445,26 +7827,21 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (typeof laneId !== "undefined" && article.laneId !== laneId) {
         continue;
       }
-      const belongsToThisGroup = clamp(article.groupIndex, leftmostGroupIndex, rightmostGroupIndex) === index;
+      const belongsToThisGroup = compareDensityGroupIndexes(
+        clampDensityGroupIndex(article.groupIndex, leftmostGroupIndex, rightmostGroupIndex),
+        index
+      ) === 0;
       if (!belongsToThisGroup) {
         continue;
       }
-      article.effectiveRank = getArticleEffectiveRank(article);
-      if (topArticles.length < pick) {
-        topArticles.push(article);
-        if (article.effectiveRank < topArticles[minRankIndex].effectiveRank) {
-          minRankIndex = topArticles.length - 1;
-        }
-        continue;
-      }
-      if (article.effectiveRank > topArticles[minRankIndex].effectiveRank) {
-        topArticles[minRankIndex] = article;
-        minRankIndex = findMinIndex(topArticles, "effectiveRank");
-      }
+      articlesInGroup.push(article);
     }
-    return topArticles;
+    return selectRankedArticles(articlesInGroup, pick);
   };
   Timeline.prototype.calculateGroupIndex = function(date) {
+    if (this.currentDensitySetting.step.divisionsPerDay) {
+      return createSubdayDensityGroupIndex(date, this.currentDensitySetting.step.divisionsPerDay);
+    }
     if (this.timescaleManager.unit >= ZOOM_MONTH && this.currentDensitySetting.step.months !== 0) {
       const g2 = date.year * 12 + (date.month - 1);
       return Math.floor(g2 / this.currentDensitySetting.step.months);
@@ -6481,17 +7858,18 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
     startToken = startToken || this.timescaleManager.startToken;
     endToken = endToken || this.calculateEndToken();
-    const leftmostGroupIndex = this.calculateGroupIndex(startToken.value) - 1;
-    const rightmostGroupIndex = this.calculateGroupIndex(endToken.value) + 1;
-    const effectiveArticleGroupIndex = clamp(
+    const leftmostGroupIndex = shiftDensityGroupIndex(this.calculateGroupIndex(startToken.value), -1);
+    const rightmostGroupIndex = shiftDensityGroupIndex(this.calculateGroupIndex(endToken.value), 1);
+    const effectiveArticleGroupIndex = clampDensityGroupIndex(
       article.groupIndex,
       leftmostGroupIndex,
       rightmostGroupIndex
     );
-    if (!Object.prototype.hasOwnProperty.call(this.groups, effectiveArticleGroupIndex)) {
+    const effectiveGroupKey = getDensityGroupKey(effectiveArticleGroupIndex);
+    if (!Object.prototype.hasOwnProperty.call(this.groups, effectiveGroupKey)) {
       return false;
     }
-    return this.groups[effectiveArticleGroupIndex].indexOf(article.id) >= 0;
+    return this.groups[effectiveGroupKey].indexOf(article.id) >= 0;
   };
   const DEFAULT_MAX_FRAME_DELTA = 64;
   function startInertia({
@@ -6569,17 +7947,77 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   }
   __name(normalisePadding, "normalisePadding");
   function normaliseDateInput(date) {
-    var _a, _b;
-    if (!date || !Number.isFinite(date.year)) {
-      throw new Error("fitDateRange requires start and end dates with a numeric year");
+    var _a, _b, _c, _d, _e, _f, _g;
+    const parsed = typeof date === "string" ? (_a = parseDmyString(date)) == null ? void 0 : _a.date : date;
+    if (!parsed || !Number.isFinite(parsed.year)) {
+      throw new Error("Date input requires a numeric year or canonical Histropedia date string");
     }
     return new Dmy({
-      year: date.year,
-      month: (_a = date.month) != null ? _a : 1,
-      day: (_b = date.day) != null ? _b : 1
+      year: parsed.year,
+      month: (_b = parsed.month) != null ? _b : 1,
+      day: (_c = parsed.day) != null ? _c : 1,
+      hour: (_d = parsed.hour) != null ? _d : 0,
+      minute: (_e = parsed.minute) != null ? _e : 0,
+      second: (_f = parsed.second) != null ? _f : 0,
+      millisecond: (_g = parsed.millisecond) != null ? _g : 0
     });
   }
   __name(normaliseDateInput, "normaliseDateInput");
+  function normaliseDayPoint(point) {
+    const dayOffset = Math.floor(point.millisecond / MILLISECONDS_PER_DAY);
+    return {
+      dayNumber: point.dayNumber + dayOffset,
+      millisecond: point.millisecond - dayOffset * MILLISECONDS_PER_DAY
+    };
+  }
+  __name(normaliseDayPoint, "normaliseDayPoint");
+  function getDayPoint(dmy) {
+    return {
+      dayNumber: dmy.getDaysSinceYearZero(),
+      millisecond: dmy.getMillisecondsOfDay()
+    };
+  }
+  __name(getDayPoint, "getDayPoint");
+  function compareDayPoints(left, right) {
+    if (left.dayNumber !== right.dayNumber) {
+      return left.dayNumber < right.dayNumber ? -1 : 1;
+    }
+    if (left.millisecond !== right.millisecond) {
+      return left.millisecond < right.millisecond ? -1 : 1;
+    }
+    return 0;
+  }
+  __name(compareDayPoints, "compareDayPoints");
+  function getDayPointDifference(start, end) {
+    const wholeDays = end.dayNumber - start.dayNumber;
+    const milliseconds = end.millisecond - start.millisecond;
+    return wholeDays + milliseconds / MILLISECONDS_PER_DAY;
+  }
+  __name(getDayPointDifference, "getDayPointDifference");
+  function addDaysToDayPoint(point, days) {
+    const wholeDays = Math.floor(days);
+    return normaliseDayPoint({
+      dayNumber: point.dayNumber + wholeDays,
+      millisecond: point.millisecond + (days - wholeDays) * MILLISECONDS_PER_DAY
+    });
+  }
+  __name(addDaysToDayPoint, "addDaysToDayPoint");
+  function interpolateDayPoints(start, end, progress) {
+    if (progress <= 0) {
+      return __spreadValues({}, start);
+    }
+    if (progress >= 1) {
+      return __spreadValues({}, end);
+    }
+    const scaledWholeDayDifference = (end.dayNumber - start.dayNumber) * progress;
+    const wholeDays = Math.floor(scaledWholeDayDifference);
+    const milliseconds = start.millisecond + (scaledWholeDayDifference - wholeDays) * MILLISECONDS_PER_DAY + (end.millisecond - start.millisecond) * progress;
+    return normaliseDayPoint({
+      dayNumber: start.dayNumber + wholeDays,
+      millisecond: milliseconds
+    });
+  }
+  __name(interpolateDayPoints, "interpolateDayPoints");
   function getNextYearStart(year) {
     return new Dmy(year === -1 ? 1 : year + 1, 1, 1);
   }
@@ -6593,18 +8031,20 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   __name(getNextMonthStart, "getNextMonthStart");
   function normaliseDateRangeInput(date) {
     const start = normaliseDateInput(date);
-    const hasMonth = date.month != null;
-    const hasDay = date.day != null;
-    if (!hasMonth) {
+    const parsedString = typeof date === "string" ? parseDmyString(date) : null;
+    const hasMonth = parsedString ? parsedString.hasMonth : date.month != null;
+    const hasDay = parsedString ? parsedString.hasDay : date.day != null;
+    const hasTime = parsedString ? parsedString.hasTime : date.hour != null || date.minute != null || date.second != null || date.millisecond != null;
+    if (!hasMonth && !hasTime) {
       return {
         start,
-        end: getNextYearStart(date.year)
+        end: getNextYearStart(start.year)
       };
     }
-    if (!hasDay) {
+    if (!hasDay && !hasTime) {
       return {
         start,
-        end: getNextMonthStart(date.year, date.month)
+        end: getNextMonthStart(start.year, start.month)
       };
     }
     return {
@@ -6639,24 +8079,29 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   }
   __name(normaliseZoomForManager, "normaliseZoomForManager");
   function getUnitFromZoom(manager, zoom) {
+    if (typeof manager.getUnitFromZoom === "function") {
+      return manager.getUnitFromZoom(zoom);
+    }
     const unitLevels = manager.unitLevels;
     if (!Array.isArray(unitLevels) || unitLevels.length === 0) {
       return manager.unit;
     }
-    for (let i = unitLevels.length - 1; i >= 0; i--) {
-      if (zoom >= unitLevels[i].zoomStart) {
-        return i;
+    const unitOrder = manager.unitOrder || unitLevels.map((_settings, unit) => unit);
+    for (let i = unitOrder.length - 1; i >= 0; i--) {
+      const unit = unitOrder[i];
+      if (zoom >= unitLevels[unit].zoomStart) {
+        return unit;
       }
     }
     return manager.unit;
   }
   __name(getUnitFromZoom, "getUnitFromZoom");
   function getUnitSizeInPixelsForZoom(manager, unit, zoom) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const unitSettings = (_a = manager.unitLevels) == null ? void 0 : _a[unit];
     const zoomRatio = (_b = manager.zoomOptions) == null ? void 0 : _b.ratio;
-    if (unitSettings && Number.isFinite(unitSettings.startUnitSize) && Number.isFinite(unitSettings.zoomStart) && Number.isFinite(zoomRatio) && zoomRatio > 0) {
-      return unitSettings.startUnitSize * Math.pow(zoomRatio, zoom - unitSettings.zoomStart);
+    if (unitSettings && Number.isFinite(unitSettings.startUnitSize) && Number.isFinite((_c = unitSettings.referenceZoom) != null ? _c : unitSettings.zoomStart) && Number.isFinite(zoomRatio) && zoomRatio > 0) {
+      return unitSettings.startUnitSize * Math.pow(zoomRatio, zoom - ((_d = unitSettings.referenceZoom) != null ? _d : unitSettings.zoomStart));
     }
     if (!Number.isFinite(manager.unitSizeInPixels)) {
       return NaN;
@@ -6677,7 +8122,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       return NaN;
     }
     if (unit <= ZOOM_DAY) {
-      return startDate.getDaysTo(endDate) * unitSizeInPixels;
+      return startDate.getDaysTo(endDate) * unitSizeInPixels / getZoomUnitLengthInDays(unit);
     }
     if (unit === ZOOM_MONTH) {
       return startDate.getMonthsTo(endDate) * unitSizeInPixels;
@@ -6685,23 +8130,23 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return startDate.getYearsTo(endDate) * unitSizeInPixels / getUnitLengthInYears(unit);
   }
   __name(getPixelsBetweenAtZoom, "getPixelsBetweenAtZoom");
-  function getPixelsBetweenDayNumbersAtZoom(manager, startDayNumber, endDayNumber, zoom) {
+  function getPixelsBetweenDayPointsAtZoom(manager, startPoint, endPoint, zoom) {
     const normalisedZoom = normaliseZoomForManager(manager, zoom);
     const unit = getUnitFromZoom(manager, normalisedZoom);
     const unitSizeInPixels = getUnitSizeInPixelsForZoom(manager, unit, normalisedZoom);
     if (!Number.isFinite(unitSizeInPixels) || unitSizeInPixels <= 0) {
       return NaN;
     }
-    const daySpan = endDayNumber - startDayNumber;
+    const daySpan = getDayPointDifference(startPoint, endPoint);
     if (unit <= ZOOM_DAY) {
-      return daySpan * unitSizeInPixels;
+      return daySpan * unitSizeInPixels / getZoomUnitLengthInDays(unit);
     }
     if (unit === ZOOM_MONTH) {
       return daySpan * unitSizeInPixels / 30.44;
     }
     return daySpan * unitSizeInPixels / (365.2422 * getUnitLengthInYears(unit));
   }
-  __name(getPixelsBetweenDayNumbersAtZoom, "getPixelsBetweenDayNumbersAtZoom");
+  __name(getPixelsBetweenDayPointsAtZoom, "getPixelsBetweenDayPointsAtZoom");
   function getFitZoomForInternalDates(timeline, internalStart, internalEnd, padding) {
     const manager = timeline.timescaleManager;
     const currentPixelSpan = manager.getPixelsBetween(internalStart, internalEnd);
@@ -6749,14 +8194,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (date == null) {
       return null;
     }
-    const normalised = normaliseDateInput(typeof date === "string" ? Dmy.fromString(date) : date);
-    return timeline.getDmyFromInput(
-      new Dmy({
-        year: normalised.year,
-        month: normalised.month,
-        day: normalised.day
-      })
-    );
+    return timeline.getDmyFromInput(normaliseDateInput(date));
   }
   __name(normaliseBoundDate, "normaliseBoundDate");
   function getTimelineDateBounds(timeline) {
@@ -6776,24 +8214,27 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return {
       minDate,
       maxDate,
+      minPoint: minDate ? getDayPoint(minDate) : null,
+      maxPoint: maxDate ? getDayPoint(maxDate) : null,
       minDay: minDate ? getDayNumber(minDate) : null,
       maxDay: maxDate ? getDayNumber(maxDate) : null,
       overflow: bounds.overflow === "clamp" ? "clamp" : "elastic"
     };
   }
   __name(getTimelineDateBounds, "getTimelineDateBounds");
-  function getViewportDayRange(timeline) {
-    const start = getDayNumberAtPixel(timeline, 0);
-    const end = getDayNumberAtPixel(timeline, timeline.getWidth());
-    return start <= end ? { start, end } : { start: end, end: start };
+  function getViewportDayPointRange(timeline) {
+    const start = getDayPointAtPixel(timeline, 0);
+    const end = getDayPointAtPixel(timeline, timeline.getWidth());
+    return compareDayPoints(start, end) <= 0 ? { start, end } : { start: end, end: start };
   }
-  __name(getViewportDayRange, "getViewportDayRange");
+  __name(getViewportDayPointRange, "getViewportDayPointRange");
   function getDateBoundSideCorrection(bounds, viewport, width) {
-    const minOverflow = bounds.minDay != null ? bounds.minDay - viewport.start : 0;
-    const maxOverflow = bounds.maxDay != null ? viewport.end - bounds.maxDay : 0;
+    const minOverflow = bounds.minPoint ? getDayPointDifference(viewport.start, bounds.minPoint) : 0;
+    const maxOverflow = bounds.maxPoint ? getDayPointDifference(bounds.maxPoint, viewport.end) : 0;
     if (minOverflow > 0 && minOverflow >= maxOverflow) {
       return {
         type: "min",
+        dayPoint: bounds.minPoint,
         dayNumber: bounds.minDay,
         pixelOffset: 0,
         overflowDays: minOverflow
@@ -6802,6 +8243,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (maxOverflow > 0) {
       return {
         type: "max",
+        dayPoint: bounds.maxPoint,
         dayNumber: bounds.maxDay,
         pixelOffset: width,
         overflowDays: maxOverflow
@@ -6814,22 +8256,23 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (!bounds) {
       return null;
     }
-    const viewport = getViewportDayRange(timeline);
+    const viewport = getViewportDayPointRange(timeline);
     const width = timeline.getWidth();
     const sideCorrection = getDateBoundSideCorrection(bounds, viewport, width);
     if (options.mode === "elastic" && bounds.overflow === "elastic" && sideCorrection) {
       return sideCorrection;
     }
-    if (bounds.minDay != null && bounds.maxDay != null && viewport.end - viewport.start > bounds.maxDay - bounds.minDay) {
+    if (bounds.minPoint && bounds.maxPoint && getDayPointDifference(viewport.start, viewport.end) > getDayPointDifference(bounds.minPoint, bounds.maxPoint)) {
       return {
         type: "range",
-        zoom: getFitZoomForDayNumbers(
+        zoom: getFitZoomForDayPoints(
           timeline,
-          bounds.minDay,
-          bounds.maxDay,
+          bounds.minPoint,
+          bounds.maxPoint,
           { left: 0, right: 0 },
           timeline.timescaleManager.zoom
         ),
+        dayPoint: bounds.minPoint,
         dayNumber: bounds.minDay,
         pixelOffset: 0
       };
@@ -6863,22 +8306,30 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return maxElasticPixels * resistedPixels / (maxElasticPixels - resistedPixels) / pixelsPerDay;
   }
   __name(getUnresistedElasticOverflowDays, "getUnresistedElasticOverflowDays");
-  function setElasticBoundedViewportStartDay(timeline, targetStartDayNumber, viewportSpanDays) {
+  function setElasticBoundedViewportStartPoint(timeline, targetStartPoint, viewportSpanDays) {
     const bounds = getTimelineDateBounds(timeline);
-    let nextStartDayNumber = targetStartDayNumber;
+    let nextStartPoint = targetStartPoint;
     if ((bounds == null ? void 0 : bounds.overflow) === "elastic" && Number.isFinite(viewportSpanDays)) {
-      const targetEndDayNumber = targetStartDayNumber + viewportSpanDays;
-      if (bounds.minDay != null && targetStartDayNumber < bounds.minDay) {
-        nextStartDayNumber = bounds.minDay - getElasticOverflowDays(timeline, bounds.minDay - targetStartDayNumber);
-      } else if (bounds.maxDay != null && targetEndDayNumber > bounds.maxDay) {
-        nextStartDayNumber = bounds.maxDay + getElasticOverflowDays(timeline, targetEndDayNumber - bounds.maxDay) - viewportSpanDays;
+      const targetEndPoint = addDaysToDayPoint(targetStartPoint, viewportSpanDays);
+      if (bounds.minPoint && compareDayPoints(targetStartPoint, bounds.minPoint) < 0) {
+        const overflow = getDayPointDifference(targetStartPoint, bounds.minPoint);
+        nextStartPoint = addDaysToDayPoint(
+          bounds.minPoint,
+          -getElasticOverflowDays(timeline, overflow)
+        );
+      } else if (bounds.maxPoint && compareDayPoints(targetEndPoint, bounds.maxPoint) > 0) {
+        const overflow = getDayPointDifference(bounds.maxPoint, targetEndPoint);
+        nextStartPoint = addDaysToDayPoint(
+          bounds.maxPoint,
+          getElasticOverflowDays(timeline, overflow) - viewportSpanDays
+        );
       }
     }
-    setInternalStartDayNumber(timeline, nextStartDayNumber, 0, false, {
+    setInternalStartDayPoint(timeline, nextStartPoint, 0, false, {
       skipDateBounds: true
     });
   }
-  __name(setElasticBoundedViewportStartDay, "setElasticBoundedViewportStartDay");
+  __name(setElasticBoundedViewportStartPoint, "setElasticBoundedViewportStartPoint");
   function applyTimelineDateBounds(timeline, options = {}) {
     const bounds = getTimelineDateBounds(timeline);
     if (!bounds) {
@@ -6893,7 +8344,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (correction.zoom !== timeline.timescaleManager.zoom) {
         timeline.timescaleManager.setZoom(correction.zoom);
       }
-      setInternalStartDayNumber(timeline, correction.dayNumber, correction.pixelOffset, false, {
+      setInternalStartDayPoint(timeline, correction.dayPoint, correction.pixelOffset, false, {
         skipDateBounds: true
       });
       return true;
@@ -6901,13 +8352,17 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (mode === "elastic" && bounds.overflow === "elastic") {
       const elasticOverflowDays = getElasticOverflowDays(timeline, correction.overflowDays);
       if (correction.type === "min") {
-        setInternalStartDayNumber(timeline, correction.dayNumber - elasticOverflowDays, 0, false, {
-          skipDateBounds: true
-        });
+        setInternalStartDayPoint(
+          timeline,
+          addDaysToDayPoint(correction.dayPoint, -elasticOverflowDays),
+          0,
+          false,
+          { skipDateBounds: true }
+        );
       } else {
-        setInternalStartDayNumber(
+        setInternalStartDayPoint(
           timeline,
-          correction.dayNumber + elasticOverflowDays,
+          addDaysToDayPoint(correction.dayPoint, elasticOverflowDays),
           correction.pixelOffset,
           false,
           { skipDateBounds: true }
@@ -6915,7 +8370,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       }
       return true;
     }
-    setInternalStartDayNumber(timeline, correction.dayNumber, correction.pixelOffset, false, {
+    setInternalStartDayPoint(timeline, correction.dayPoint, correction.pixelOffset, false, {
       skipDateBounds: true
     });
     return true;
@@ -6926,13 +8381,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   }
   __name(isViewportOutsideDateBounds, "isViewportOutsideDateBounds");
   function getPixelsPerDay(timeline) {
+    var _a;
     const manager = timeline.timescaleManager;
     const unitSize = manager.unitSizeInPixels;
     if (!Number.isFinite(unitSize) || unitSize <= 0) {
       return 0;
     }
     if (manager.unit == null || manager.unit <= ZOOM_DAY) {
-      return unitSize;
+      return unitSize / getZoomUnitLengthInDays((_a = manager.unit) != null ? _a : ZOOM_DAY);
     }
     if (manager.unit === ZOOM_MONTH) {
       return unitSize / 30.44;
@@ -6941,11 +8397,13 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return unitSize / (365.2422 * unitLengthInYears);
   }
   __name(getPixelsPerDay, "getPixelsPerDay");
-  function setInternalStartDayNumber(timeline, dayNumber, pixelOffset, emitStateChange = false, options = {}) {
+  function setInternalStartDayPoint(timeline, dayPoint, pixelOffset, emitStateChange = false, options = {}) {
     var _a;
-    const startDayNumber = Math.floor(dayNumber);
-    const startDmy = getDmyFromDayNumber(startDayNumber);
-    const partialDayPixels = (dayNumber - startDayNumber) * getPixelsPerDay(timeline);
+    const normalisedPoint = normaliseDayPoint(dayPoint);
+    const milliseconds = Math.floor(normalisedPoint.millisecond);
+    const millisecondFraction = normalisedPoint.millisecond - milliseconds;
+    const startDmy = getDmyFromDayNumber(normalisedPoint.dayNumber).addMilliseconds(milliseconds);
+    const partialDayPixels = millisecondFraction * getPixelsPerDay(timeline) / MILLISECONDS_PER_DAY;
     const dateFraction = timeline.timescaleManager.setStartDate(startDmy);
     timeline.repositionWindow = dateFraction - partialDayPixels;
     if (pixelOffset) {
@@ -6960,26 +8418,26 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       timeline._emitTimelineStateChange();
     }
   }
-  __name(setInternalStartDayNumber, "setInternalStartDayNumber");
+  __name(setInternalStartDayPoint, "setInternalStartDayPoint");
   function setInternalStartDate(timeline, dmy, pixelOffset, emitStateChange = false, options = {}) {
-    const dayNumber = getDayNumber(dmy);
-    setInternalStartDayNumber(timeline, dayNumber, pixelOffset, emitStateChange, options);
+    setInternalStartDayPoint(timeline, getDayPoint(dmy), pixelOffset, emitStateChange, options);
   }
   __name(setInternalStartDate, "setInternalStartDate");
-  function getDayNumberFromPivotPoint(timeline, pivotPoint) {
+  function getDayPointFromPivotPoint(timeline, pivotPoint) {
     const pixelsPerDay = getPixelsPerDay(timeline);
+    const point = getDayPoint(pivotPoint.date);
     if (!pixelsPerDay) {
-      return getDayNumber(pivotPoint.date);
+      return point;
     }
-    return getDayNumber(pivotPoint.date) + pivotPoint.fraction / pixelsPerDay;
+    return addDaysToDayPoint(point, pivotPoint.fraction / pixelsPerDay);
   }
-  __name(getDayNumberFromPivotPoint, "getDayNumberFromPivotPoint");
-  function getDayNumberAtPixel(timeline, pixel) {
-    return getDayNumberFromPivotPoint(timeline, timeline.getPivotPoint(pixel));
+  __name(getDayPointFromPivotPoint, "getDayPointFromPivotPoint");
+  function getDayPointAtPixel(timeline, pixel) {
+    return getDayPointFromPivotPoint(timeline, timeline.getPivotPoint(pixel));
   }
-  __name(getDayNumberAtPixel, "getDayNumberAtPixel");
+  __name(getDayPointAtPixel, "getDayPointAtPixel");
   function getDayNumber(dmy) {
-    return dmy.getDaysSinceYearZero();
+    return dmy.getDaysSinceYearZero() + dmy.getMillisecondsOfDay() / MILLISECONDS_PER_DAY;
   }
   __name(getDayNumber, "getDayNumber");
   function getDmyFromDayNumber(dayNumber) {
@@ -7004,12 +8462,12 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     return start + (end - start) * progress;
   }
   __name(interpolate, "interpolate");
-  function getFitZoomForDayNumbers(timeline, startDayNumber, endDayNumber, padding, fallbackZoom) {
-    if (endDayNumber <= startDayNumber) {
+  function getFitZoomForDayPoints(timeline, startPoint, endPoint, padding, fallbackZoom) {
+    if (compareDayPoints(endPoint, startPoint) <= 0) {
       return fallbackZoom;
     }
     const manager = timeline.timescaleManager;
-    const currentPixelSpan = (endDayNumber - startDayNumber) * getPixelsPerDay(timeline);
+    const currentPixelSpan = getDayPointDifference(startPoint, endPoint) * getPixelsPerDay(timeline);
     if (!Number.isFinite(currentPixelSpan) || currentPixelSpan <= 0) {
       return fallbackZoom;
     }
@@ -7020,10 +8478,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
     let targetZoom = manager.zoom + zoomChange;
     for (let i = 0; i < 4; i++) {
-      const predictedPixelSpan = getPixelsBetweenDayNumbersAtZoom(
+      const predictedPixelSpan = getPixelsBetweenDayPointsAtZoom(
         manager,
-        startDayNumber,
-        endDayNumber,
+        startPoint,
+        endPoint,
         targetZoom
       );
       if (!Number.isFinite(predictedPixelSpan) || predictedPixelSpan <= 0) {
@@ -7040,7 +8498,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
     return normaliseZoomForManager(manager, targetZoom);
   }
-  __name(getFitZoomForDayNumbers, "getFitZoomForDayNumbers");
+  __name(getFitZoomForDayPoints, "getFitZoomForDayPoints");
   function stopNavigationAnimations(timeline) {
     var _a, _b, _c, _d, _e;
     if (typeof timeline.stopPanAnimation === "function") {
@@ -7079,13 +8537,13 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     timeline.startAnimation();
     const startZoom = timeline.timescaleManager.zoom;
     const fitPixelSpan = getFitPixelSpan(timeline, padding);
-    const startDayNumberAtPadding = getDayNumberAtPixel(timeline, padding.left);
-    const startEndDayNumberAtPadding = getDayNumberAtPixel(timeline, padding.left + fitPixelSpan);
+    const startPointAtPadding = getDayPointAtPixel(timeline, padding.left);
+    const startEndPointAtPadding = getDayPointAtPixel(timeline, padding.left + fitPixelSpan);
     const targetInternalStart = timeline.getDmyFromInput(normaliseDateInput(targetStartDate));
     const targetInternalEnd = timeline.getDmyFromInput(normaliseDateInput(targetEndDate));
-    const targetDayNumber = getDayNumber(targetInternalStart);
-    const targetEndDayNumber = getDayNumber(targetInternalEnd);
-    const canInterpolateBoundaries = startEndDayNumberAtPadding > startDayNumberAtPadding && targetEndDayNumber > targetDayNumber;
+    const targetPoint = getDayPoint(targetInternalStart);
+    const targetEndPoint = getDayPoint(targetInternalEnd);
+    const canInterpolateBoundaries = compareDayPoints(startEndPointAtPadding, startPointAtPadding) > 0 && compareDayPoints(targetEndPoint, targetPoint) > 0;
     const rangeTween = tween({
       from: 0,
       to: 1,
@@ -7097,13 +8555,13 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
           rangeTween.stop();
           return;
         }
-        const nextDayNumber = interpolate(startDayNumberAtPadding, targetDayNumber, progress);
+        const nextPoint = interpolateDayPoints(startPointAtPadding, targetPoint, progress);
         let nextZoom = startZoom;
         if (progress > 0) {
-          nextZoom = canInterpolateBoundaries ? getFitZoomForDayNumbers(
+          nextZoom = canInterpolateBoundaries ? getFitZoomForDayPoints(
             timeline,
-            nextDayNumber,
-            interpolate(startEndDayNumberAtPadding, targetEndDayNumber, progress),
+            nextPoint,
+            interpolateDayPoints(startEndPointAtPadding, targetEndPoint, progress),
             padding,
             timeline.timescaleManager.zoom
           ) : interpolate(startZoom, targetZoom, progress);
@@ -7111,7 +8569,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         if (nextZoom !== timeline.timescaleManager.zoom) {
           timeline.timescaleManager.setZoom(nextZoom);
         }
-        setInternalStartDayNumber(timeline, nextDayNumber, padding.left);
+        setInternalStartDayPoint(timeline, nextPoint, padding.left);
       },
       onComplete() {
         if (targetZoom !== timeline.timescaleManager.zoom) {
@@ -7143,7 +8601,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (!latest || from.compare(latest) > 0) {
         latest = from;
       }
-      const style = article._getCurrentStyle();
+      const style = article.getCurrentStyle();
       const connectorOffset = (_c = (_b = style.connectorLine) == null ? void 0 : _b.offsetX) != null ? _c : 0;
       const width = (_d = style.width) != null ? _d : 0;
       maxCardLeftOffset = Math.max(maxCardLeftOffset, connectorOffset);
@@ -7620,16 +9078,24 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (!pixelsPerDay) {
         return;
       }
-      const viewport = getViewportDayRange(this);
-      const viewportSpanDays = viewport.end - viewport.start;
-      let leftDayNumber = viewport.start;
-      if (bounds.minDay != null && viewport.start < bounds.minDay) {
-        leftDayNumber = bounds.minDay - getUnresistedElasticOverflowDays(this, bounds.minDay - viewport.start);
-      } else if (bounds.maxDay != null && viewport.end > bounds.maxDay) {
-        leftDayNumber = bounds.maxDay + getUnresistedElasticOverflowDays(this, viewport.end - bounds.maxDay) - viewportSpanDays;
+      const viewport = getViewportDayPointRange(this);
+      const viewportSpanDays = getDayPointDifference(viewport.start, viewport.end);
+      let leftDayPoint = viewport.start;
+      if (bounds.minPoint && compareDayPoints(viewport.start, bounds.minPoint) < 0) {
+        const overflow = getDayPointDifference(viewport.start, bounds.minPoint);
+        leftDayPoint = addDaysToDayPoint(
+          bounds.minPoint,
+          -getUnresistedElasticOverflowDays(this, overflow)
+        );
+      } else if (bounds.maxPoint && compareDayPoints(viewport.end, bounds.maxPoint) > 0) {
+        const overflow = getDayPointDifference(bounds.maxPoint, viewport.end);
+        leftDayPoint = addDaysToDayPoint(
+          bounds.maxPoint,
+          getUnresistedElasticOverflowDays(this, overflow) - viewportSpanDays
+        );
       }
       this.dragDateBoundsState = {
-        leftDayNumber,
+        leftDayPoint,
         pixelsPerDay,
         viewportSpanDays
       };
@@ -7681,10 +9147,13 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       this.animation.dragRedrawFunction = this.defaultRedraw;
     }
     if (this.dragDateBoundsState) {
-      const targetLeftDayNumber = this.dragDateBoundsState.leftDayNumber + cumulativeMovePixelsX / this.dragDateBoundsState.pixelsPerDay;
-      setElasticBoundedViewportStartDay(
+      const targetLeftDayPoint = addDaysToDayPoint(
+        this.dragDateBoundsState.leftDayPoint,
+        cumulativeMovePixelsX / this.dragDateBoundsState.pixelsPerDay
+      );
+      setElasticBoundedViewportStartPoint(
         this,
-        targetLeftDayNumber,
+        targetLeftDayPoint,
         this.dragDateBoundsState.viewportSpanDays
       );
     } else {
@@ -7873,20 +9342,27 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
   };
   Timeline.prototype.getDmyFromInput = function(dmy) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     let normalised;
     if (typeof dmy === "string") {
       normalised = Dmy.fromString(dmy);
+      if (!Number.isFinite(normalised.year)) {
+        throw new Error(`Invalid Histropedia date string: ${dmy}`);
+      }
     } else if (dmy instanceof Dmy) {
       normalised = new Dmy(dmy);
     } else {
       normalised = new Dmy({
         year: dmy.year,
         month: (_a = dmy.month) != null ? _a : 1,
-        day: (_b = dmy.day) != null ? _b : 1
+        day: (_b = dmy.day) != null ? _b : 1,
+        hour: (_c = dmy.hour) != null ? _c : 0,
+        minute: (_d = dmy.minute) != null ? _d : 0,
+        second: (_e = dmy.second) != null ? _e : 0,
+        millisecond: (_f = dmy.millisecond) != null ? _f : 0
       });
     }
-    if (!((_c = this.options) == null ? void 0 : _c.shiftBceDates)) {
+    if (!((_g = this.options) == null ? void 0 : _g.shiftBceDates)) {
       return normalised;
     }
     if (normalised.year < 0) {
@@ -7957,7 +9433,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         article = this.articles[i];
       }
     }
-    return !isUndefined$1(article);
+    return !isUndefined(article);
   };
   Timeline.prototype.reposition = function(article, drawCycleContext) {
     if (article.isDragging) {
@@ -8001,7 +9477,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         from = 0;
       }
     }
-    const style = article._getCurrentStyle();
+    const style = article.getCurrentStyle();
     const lane = this.getLaneById(article.laneId);
     if (this._isLaneLayoutActive() && lane && lane.geometry) {
       return {
@@ -8370,6 +9846,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     };
   }
   __name(resolveAreaExtents, "resolveAreaExtents");
+  const MAIN_RANGE_RIGHT_BUFFER = 150;
   Timeline.prototype.defaultRedraw = function() {
     this.redraw({
       // 1. update isVisibleInGroup and after articles IsInRange is decided
@@ -8475,7 +9952,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     });
   };
   Timeline.prototype.render = function(ctx, top, width, markers, drawCycleContext) {
-    const halfMainlineSize = this.options.style.mainLine.size >> 1;
     const effectiveVerticalOffset = this._getEffectiveVerticalOffset ? this._getEffectiveVerticalOffset() : this.options.verticalOffset;
     if (!this.owner) {
       ctx.clearRect(0, 0, width, this.top + effectiveVerticalOffset);
@@ -8487,19 +9963,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     this.drawDraggingHighlight(ctx, top, width);
     const mainLineTop = this.options.style.mainLine.position === "top" ? -effectiveVerticalOffset : top;
     this.drawMainline(ctx, mainLineTop, width, markers);
-    if (this.options.style.mainLine.showDateIndicators) {
-      ctx.beginPath();
-      this.forInRangeArticles(/* @__PURE__ */ __name(function redraw_articles_drawIndicators(article) {
-        if (!article.isHiddenByFilter && article.isInView) {
-          ctx.moveTo(article.indicator.fromX, top - halfMainlineSize);
-          ctx.lineTo(article.indicator.fromX, top + halfMainlineSize);
-        }
-      }, "redraw_articles_drawIndicators"));
-      ctx.lineWidth = 3;
-      ctx.globalAlpha = 0.75;
-      ctx.strokeStyle = "#303030";
-      ctx.stroke();
-    }
+    this.drawDateIndicators(ctx, mainLineTop);
     ctx.globalAlpha = 1;
     for (let i = 0; i < this.articles.length; i++) {
       const article = this.articles[i];
@@ -8530,7 +9994,55 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       this.drawDensityRegionBoundaries(ctx, width, drawCycleContext);
     }
   };
+  function resolveDateIndicatorColor(timeline, article, color, useActiveArticleColor) {
+    var _a, _b, _c;
+    if (color !== "article") {
+      return color;
+    }
+    if (useActiveArticleColor) {
+      return ((_a = article.activeStyle) == null ? void 0 : _a.color) || ((_b = article.style) == null ? void 0 : _b.color) || timeline.options.article.defaultStyle.color;
+    }
+    return ((_c = article.style) == null ? void 0 : _c.color) || timeline.options.article.defaultStyle.color;
+  }
+  __name(resolveDateIndicatorColor, "resolveDateIndicatorColor");
+  Timeline.prototype.drawDateIndicators = function(ctx, top) {
+    const dateIndicators = this.options.style.mainLine.dateIndicators;
+    if (!dateIndicators.visible) {
+      return;
+    }
+    const mainLineSize = this.options.style.mainLine.size;
+    const halfMainLineSize = mainLineSize / 2;
+    ctx.save();
+    ctx.globalAlpha = 1;
+    this.forInRangeArticles(/* @__PURE__ */ __name(function redraw_articles_drawIndicators(article) {
+      var _a;
+      if (article.isHiddenByFilter || !article.isInView) {
+        return;
+      }
+      const isActive = article.isActive === true;
+      const isDensityHidden = !isActive && article.isVisibleInLane !== false && article.isVisibleInGroup === false;
+      const stateStyle = isActive ? dateIndicators.activeStyle : isDensityHidden ? dateIndicators.hiddenStyle : null;
+      const style = stateStyle ? __spreadValues(__spreadValues({}, dateIndicators), stateStyle) : dateIndicators;
+      const size = style.size;
+      const halfSize = size / 2;
+      const x = article.indicator.fromX;
+      const useActiveArticleColor = isActive && (stateStyle == null ? void 0 : stateStyle.color) === "article";
+      ctx.globalAlpha = (_a = style.opacity) != null ? _a : 1;
+      ctx.fillStyle = resolveDateIndicatorColor(this, article, style.color, useActiveArticleColor);
+      if (style.shape === "circle") {
+        ctx.beginPath();
+        ctx.arc(x, top, halfSize, 0, Math.PI * 2);
+        ctx.fill();
+        return;
+      }
+      ctx.fillRect(x - halfSize, top - halfMainLineSize, size, mainLineSize);
+    }, "redraw_articles_drawIndicators"));
+    ctx.restore();
+  };
   Timeline.prototype.getDensityRegionBoundaryDate = function(groupIndex) {
+    if (isSubdayDensityGroupIndex(groupIndex)) {
+      return getDmyFromDayNumber(groupIndex.day);
+    }
     const step = this.currentDensitySetting.step;
     if (this.timescaleManager.unit >= ZOOM_MONTH && step.months !== 0) {
       const monthIndex = groupIndex * step.months;
@@ -8555,15 +10067,29 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     }
     return boundary;
   };
+  Timeline.prototype.getDensityRegionBoundaryPoint = function(groupIndex) {
+    if (isSubdayDensityGroupIndex(groupIndex)) {
+      const boundary = getSubdayDensityGroupBoundary(groupIndex);
+      return {
+        date: getDmyFromDayNumber(boundary.dayNumber),
+        dayFraction: boundary.dayFraction
+      };
+    }
+    return {
+      date: this.getDensityRegionBoundaryDate(groupIndex),
+      dayFraction: 0
+    };
+  };
   Timeline.prototype.drawDensityRegionBoundaries = function(ctx, width, drawCycleContext) {
     var _a;
     const tokens = drawCycleContext == null ? void 0 : drawCycleContext.tokens;
     if (!(tokens == null ? void 0 : tokens.start) || !(tokens == null ? void 0 : tokens.end) || !((_a = this.currentDensitySetting) == null ? void 0 : _a.step)) {
       return;
     }
-    const firstGroup = this.calculateGroupIndex(tokens.start) - 1;
-    const lastGroup = this.calculateGroupIndex(tokens.end) + 1;
+    const firstGroup = shiftDensityGroupIndex(this.calculateGroupIndex(tokens.start), -1);
+    const lastGroup = shiftDensityGroupIndex(this.calculateGroupIndex(tokens.end), 1);
     const startDate = this.timescaleManager.startToken.value;
+    const pixelsPerDay = getPixelsPerDay(this);
     const height = this.options.height;
     let previousX = null;
     ctx.save();
@@ -8572,9 +10098,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     ctx.lineWidth = 1;
     ctx.strokeStyle = "rgba(204, 0, 153, 0.8)";
     ctx.setLineDash([4, 4]);
-    for (let groupIndex = firstGroup; groupIndex <= lastGroup; groupIndex++) {
-      const boundary = this.getDensityRegionBoundaryDate(groupIndex);
-      const rawX = this.timescaleManager.getPixelsBetween(startDate, boundary) + this.repositionWindow;
+    for (let groupIndex = firstGroup; compareDensityGroupIndexes(groupIndex, lastGroup) <= 0; groupIndex = shiftDensityGroupIndex(groupIndex, 1)) {
+      const boundary = this.getDensityRegionBoundaryPoint(groupIndex);
+      const rawX = this.timescaleManager.getPixelsBetween(startDate, boundary.date) + boundary.dayFraction * pixelsPerDay + this.repositionWindow;
       const x = Math.round(rawX) + 0.5;
       if (x < 0 || x > width || x === previousX) {
         continue;
@@ -8590,23 +10116,26 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     if (this.options.style.mainLine.visible) {
       ctx.globalAlpha = 1;
       const halfMainlineSize = this.options.style.mainLine.size >> 1;
-      const mainLineGradient = ctx.createLinearGradient(
-        0,
-        top - halfMainlineSize,
-        0,
-        top + halfMainlineSize
-      );
-      mainLineGradient.addColorStop(0, "#808080");
-      mainLineGradient.addColorStop(1, "#ccc");
+      const color = this.options.style.mainLine.color;
+      let fillStyle = typeof color === "string" ? color : DEFAULT_MAIN_LINE_COLOR;
+      if ((color == null ? void 0 : color.type) === "gradient" && typeof color.topColor === "string" && typeof color.bottomColor === "string") {
+        fillStyle = ctx.createLinearGradient(0, top - halfMainlineSize, 0, top + halfMainlineSize);
+        fillStyle.addColorStop(0, color.topColor);
+        fillStyle.addColorStop(1, color.bottomColor);
+      }
       ctx.beginPath();
       ctx.lineWidth = this.options.style.mainLine.size;
-      ctx.strokeStyle = ctx.fillStyle = mainLineGradient;
+      ctx.strokeStyle = ctx.fillStyle = fillStyle;
       ctx.moveTo(0, top);
       ctx.lineTo(width, top);
       ctx.stroke();
       for (const type in markers) {
-        this.drawMarkersAndLabels(ctx, markers[type], type, top + halfMainlineSize);
+        this.drawMarkersAndLabels(ctx, markers[type], type, top + halfMainlineSize, {
+          minorTokens: markers[MINOR_MARKER],
+          viewportWidth: width
+        });
       }
+      this.drawParentDateLabels(ctx, top + halfMainlineSize, width);
     }
   };
   Timeline.prototype.drawDraggingHighlight = function(ctx, top, width) {
@@ -8676,28 +10205,204 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     ctx.restore();
   };
   Timeline.prototype.getTokensAndMarkers = function(width) {
+    var _a, _b;
     const tokens = {};
     const markers = {};
     markers[MAJOR_MARKER] = [];
     markers[MINOR_MARKER] = [];
+    const visualMarkerLayout = (_b = (_a = this.timescaleManager).getSubdayVisualMarkerLayout) == null ? void 0 : _b.call(_a);
     let x = this.repositionWindow;
     let token = this.timescaleManager.startToken;
     tokens.start = token.value;
-    let endToken = token;
-    const leftBufferNumberOfTokens = 9;
-    token = this.timescaleManager.getPreviousNth(token, leftBufferNumberOfTokens);
-    x -= token.length * leftBufferNumberOfTokens;
+    const minimumLeftBufferTokens = 9;
+    let bufferedTokenCount = 0;
+    let hasMajorBeforeViewport = token.type === MAJOR_MARKER && x <= 0;
+    while (bufferedTokenCount < minimumLeftBufferTokens || !hasMajorBeforeViewport) {
+      token = this.timescaleManager.getPrevious(token);
+      x -= token.length;
+      bufferedTokenCount++;
+      if (token.type === MAJOR_MARKER && x <= 0) {
+        hasMajorBeforeViewport = true;
+      }
+    }
     do {
-      markers[token.type].push(token);
-      tokens[token.value.toKeyString()] = token.drawX = x;
+      token.drawX = x;
+      tokens[token.value.toKeyString()] = x;
+      if (!visualMarkerLayout) {
+        markers[token.type].push(token);
+      }
       x += token.length;
-      endToken = token;
       token = this.timescaleManager.getNext(token);
-    } while (x < width + 150);
-    tokens.end = endToken.value;
+    } while (x < width + MAIN_RANGE_RIGHT_BUFFER);
+    if (visualMarkerLayout) {
+      const visualMarkers = this.timescaleManager.createSubdayVisualMarkers(
+        width,
+        this.repositionWindow,
+        visualMarkerLayout
+      );
+      markers[MAJOR_MARKER] = visualMarkers[MAJOR_MARKER];
+      markers[MINOR_MARKER] = visualMarkers[MINOR_MARKER];
+    }
+    tokens.end = this.getPivotPoint(width + MAIN_RANGE_RIGHT_BUFFER).date;
     return { tokens, markers };
   };
-  Timeline.prototype.drawMarkersAndLabels = function(ctx, tokens, tokenType, markerTop) {
+  function getLabelMetrics(ctx, token, labelStyle) {
+    var _a;
+    const width = ctx.measureText(token.label).width;
+    const offsetX = Number.isFinite((_a = labelStyle.offset) == null ? void 0 : _a.x) ? labelStyle.offset.x : 0;
+    const anchorX = Math.round(token.drawX) + offsetX;
+    let left = anchorX;
+    if (labelStyle.textAlign === "center") {
+      left -= width / 2;
+    } else if (labelStyle.textAlign === "right" || labelStyle.textAlign === "end") {
+      left -= width;
+    }
+    return { left, width };
+  }
+  __name(getLabelMetrics, "getLabelMetrics");
+  function getTextAnchorForLeft(left, width, textAlign) {
+    if (textAlign === "center") {
+      return left + width / 2;
+    }
+    if (textAlign === "right" || textAlign === "end") {
+      return left + width;
+    }
+    return left;
+  }
+  __name(getTextAnchorForLeft, "getTextAnchorForLeft");
+  function isStickyMajorLabelEnabled(stickyStyle, tokens) {
+    var _a;
+    if ((stickyStyle == null ? void 0 : stickyStyle.enabled) === true) {
+      return true;
+    }
+    if ((stickyStyle == null ? void 0 : stickyStyle.enabled) !== "auto") {
+      return false;
+    }
+    return Number.isFinite((_a = tokens[0]) == null ? void 0 : _a.unit) && tokens[0].unit <= ZOOM_MONTH;
+  }
+  __name(isStickyMajorLabelEnabled, "isStickyMajorLabelEnabled");
+  const MAJOR_LABEL_MINIMUM_GAP = 8;
+  function getStickyTextLabel(ctx, tokens, labelStyle, viewportWidth) {
+    var _a;
+    if (((_a = labelStyle.sticky) == null ? void 0 : _a.enabled) !== true || !Number.isFinite(viewportWidth)) {
+      return null;
+    }
+    const stickyLeft = Number.isFinite(labelStyle.sticky.offsetX) ? labelStyle.sticky.offsetX : 0;
+    let candidateIndex = -1;
+    let candidateMetrics;
+    for (let i = 0; i < tokens.length; i++) {
+      const metrics = getLabelMetrics(ctx, tokens[i], labelStyle);
+      if (metrics.left <= stickyLeft) {
+        candidateIndex = i;
+        candidateMetrics = metrics;
+      }
+    }
+    if (candidateIndex < 0) {
+      return null;
+    }
+    const token = tokens[candidateIndex];
+    const nextToken = tokens[candidateIndex + 1];
+    if (token.drawX > viewportWidth || !nextToken && token.drawX + token.length < 0) {
+      return null;
+    }
+    let labelLeft = stickyLeft;
+    if (nextToken) {
+      const nextMetrics = getLabelMetrics(ctx, nextToken, labelStyle);
+      labelLeft = Math.min(
+        labelLeft,
+        nextMetrics.left - candidateMetrics.width - MAJOR_LABEL_MINIMUM_GAP
+      );
+    }
+    return {
+      token,
+      labelX: getTextAnchorForLeft(labelLeft, candidateMetrics.width, labelStyle.textAlign)
+    };
+  }
+  __name(getStickyTextLabel, "getStickyTextLabel");
+  function getStickyMajorLabel(ctx, tokens, labelStyle, drawOptions) {
+    const stickyStyle = labelStyle.sticky;
+    const minorTokens = drawOptions.minorTokens || [];
+    const viewportWidth = drawOptions.viewportWidth;
+    if (!isStickyMajorLabelEnabled(stickyStyle, tokens) || !Number.isFinite(viewportWidth)) {
+      return null;
+    }
+    const stickyLeft = Number.isFinite(stickyStyle.offsetX) ? stickyStyle.offsetX : 0;
+    let candidateIndex = -1;
+    let candidateMetrics;
+    for (let i = 0; i < tokens.length; i++) {
+      const metrics = getLabelMetrics(ctx, tokens[i], labelStyle);
+      if (metrics.left <= stickyLeft) {
+        candidateIndex = i;
+        candidateMetrics = metrics;
+      }
+    }
+    if (candidateIndex < 0) {
+      return null;
+    }
+    const token = tokens[candidateIndex];
+    const nextToken = tokens[candidateIndex + 1];
+    const hasVisibleInterval = token.drawX <= viewportWidth && (nextToken ? nextToken.drawX >= 0 : token.visual === true && token.drawX + token.length >= 0 || minorTokens.some(
+      (minorToken) => minorToken.drawX >= 0 && minorToken.drawX <= viewportWidth && minorToken.drawX > token.drawX
+    ));
+    if (!hasVisibleInterval) {
+      return null;
+    }
+    let labelLeft = stickyLeft;
+    if (nextToken) {
+      const nextMetrics = getLabelMetrics(ctx, nextToken, labelStyle);
+      labelLeft = Math.min(
+        labelLeft,
+        nextMetrics.left - candidateMetrics.width - MAJOR_LABEL_MINIMUM_GAP
+      );
+    }
+    return {
+      token,
+      labelX: getTextAnchorForLeft(labelLeft, candidateMetrics.width, labelStyle.textAlign)
+    };
+  }
+  __name(getStickyMajorLabel, "getStickyMajorLabel");
+  Timeline.prototype.drawParentDateLabels = function(ctx, markerTop, viewportWidth) {
+    const labelStyle = this.options.style.dateLabel.parent;
+    if (!this.timescaleManager.isParentContextTextVisible(labelStyle)) {
+      return;
+    }
+    const visibleStart = this.getPivotPoint(0).date;
+    const tokens = this.timescaleManager.createParentContextTokens(
+      visibleStart,
+      viewportWidth,
+      this.repositionWindow
+    );
+    if (tokens.length === 0) {
+      return;
+    }
+    const markerDirection = this.options.style.mainLine.position === "top" ? -1 : 1;
+    const majorStyle = this.options.style.dateLabel.major;
+    const majorMarkerHeight = this.options.style.marker.major.height;
+    const labelY = markerTop + majorMarkerHeight * markerDirection + majorStyle.offset.y + labelStyle.height * markerDirection + labelStyle.offset.y;
+    ctx.font = labelStyle.font;
+    ctx.textAlign = labelStyle.textAlign;
+    ctx.textBaseline = markerDirection === 1 ? "alphabetic" : "top";
+    const stickyLabel = getStickyTextLabel(ctx, tokens, labelStyle, viewportWidth);
+    let previousLabelRight = Number.NEGATIVE_INFINITY;
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      const labelX = (stickyLabel == null ? void 0 : stickyLabel.token) === token ? stickyLabel.labelX : Math.round(token.drawX) + labelStyle.offset.x;
+      const labelWidth = ctx.measureText(token.label).width;
+      let labelLeft = labelX;
+      if (labelStyle.textAlign === "center") {
+        labelLeft -= labelWidth / 2;
+      } else if (labelStyle.textAlign === "right" || labelStyle.textAlign === "end") {
+        labelLeft -= labelWidth;
+      }
+      if ((stickyLabel == null ? void 0 : stickyLabel.token) !== token && labelLeft < previousLabelRight + MAJOR_LABEL_MINIMUM_GAP) {
+        continue;
+      }
+      ctx.fillStyle = token.value.isInFuture() ? labelStyle.futureColor : labelStyle.color;
+      ctx.fillText(token.label, labelX, labelY);
+      previousLabelRight = labelLeft + labelWidth;
+    }
+  };
+  Timeline.prototype.drawMarkersAndLabels = function(ctx, tokens, tokenType, markerTop, drawOptions = {}) {
     if (tokens.length === 0) {
       return;
     }
@@ -8715,7 +10420,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const isExtended = markerStyle.extend;
     const markerDirection = this.options.style.mainLine.position === "top" ? -1 : 1;
     const markerHeight = markerStyle.height;
-    const withLabel = !!tokens[0].label;
+    const withLabel = tokens.some((token) => token.label);
     let isInFuture = tokens[0].value.isInFuture();
     let wasInPast = !isInFuture;
     let labelStyle;
@@ -8730,6 +10435,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       ctx.textBaseline = markerDirection === 1 ? "alphabetic" : "top";
       labelY = markerTop + markerHeight * markerDirection + labelStyle.offset.y;
     }
+    const stickyLabel = withLabel && tokenType === "major" ? getStickyMajorLabel(ctx, tokens, labelStyle, drawOptions) : null;
     ctx.beginPath();
     for (let i = 0; i < tokens.length; i++) {
       const token = tokens[i];
@@ -8746,7 +10452,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       const markerEndY = isExtended ? markerTop + -1 * markerDirection * this.top : markerTop;
       ctx.lineTo(drawX, markerEndY);
       if (withLabel && token.label) {
-        const labelX = drawX + labelStyle.offset.x;
+        const labelX = (stickyLabel == null ? void 0 : stickyLabel.token) === token ? stickyLabel.labelX : drawX + labelStyle.offset.x;
         ctx.fillStyle = isInFuture ? labelStyle.futureColor : labelStyle.color;
         ctx.fillText(token.label, labelX, labelY);
       }
@@ -8802,6 +10508,46 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     const lane = this.getLaneById(laneId);
     return getResolvedLaneArticleOptions(this, lane);
   };
+  Timeline.prototype._getResolvedArticleStyleOverrides = function(articleOrData, cardLayout) {
+    var _a, _b, _c;
+    const laneId = articleOrData && articleOrData.laneId != null ? articleOrData.laneId : this._resolveLaneIdFromArticleData(articleOrData);
+    const lane = this.getLaneById(laneId);
+    const baseOptions = ENGINE_DEFAULTS.article || {};
+    const layoutDefaults = ((_a = this._registeredArticleLayoutStyles) == null ? void 0 : _a[cardLayout]) || {};
+    const timelineOptions = this._explicitArticleOptions || {};
+    const timelineLayoutStyles = ((_b = timelineOptions.layoutStyles) == null ? void 0 : _b[cardLayout]) || {};
+    const laneOptions = (lane == null ? void 0 : lane.articleOptions) || {};
+    const laneLayoutStyles = ((_c = laneOptions.layoutStyles) == null ? void 0 : _c[cardLayout]) || {};
+    return {
+      style: deepMerge(
+        {},
+        baseOptions.defaultStyle || {},
+        layoutDefaults.style || {},
+        timelineOptions.defaultStyle || {},
+        timelineLayoutStyles.style || {},
+        laneOptions.defaultStyle || {},
+        laneLayoutStyles.style || {}
+      ),
+      hoverStyle: deepMerge(
+        {},
+        baseOptions.defaultHoverStyle || {},
+        layoutDefaults.hoverStyle || {},
+        timelineOptions.defaultHoverStyle || {},
+        timelineLayoutStyles.hoverStyle || {},
+        laneOptions.defaultHoverStyle || {},
+        laneLayoutStyles.hoverStyle || {}
+      ),
+      activeStyle: deepMerge(
+        {},
+        baseOptions.defaultActiveStyle || {},
+        layoutDefaults.activeStyle || {},
+        timelineOptions.defaultActiveStyle || {},
+        timelineLayoutStyles.activeStyle || {},
+        laneOptions.defaultActiveStyle || {},
+        laneLayoutStyles.activeStyle || {}
+      )
+    };
+  };
   Timeline.prototype._getExplicitArticleCardLayout = function(articleOrData) {
     if (!articleOrData) {
       return null;
@@ -10156,6 +11902,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   const FRAME_MS = 1e3 / 60;
   const STANDARD_WHEEL_NOTCH_DELTA = 120;
   const MIN_BROWSER_ZOOM_SCALED_NOTCH_DELTA = 24;
+  const MILLISECOND_BOUNDARY_EPSILON = 1e-7;
   const BROWSER_ZOOM_SCALE_FACTORS = [
     0.25,
     1 / 3,
@@ -10431,7 +12178,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   Timeline.prototype.setZoomByPivotPoint = /* @__PURE__ */ __name(function setZoomByPivotPoint(newZoom, pivotPoint, pivotPixel, offsetX = 0) {
     this.timescaleManager.setZoom(newZoom);
     const compensation = this.timescaleManager.setStartDate(pivotPoint.date);
-    this.repositionWindow = compensation - pivotPoint.fraction;
+    const residualPixels = Number.isFinite(pivotPoint.millisecondFraction) ? pivotPoint.millisecondFraction * getPixelsPerDay(this) / MILLISECONDS_PER_DAY : pivotPoint.fraction;
+    this.repositionWindow = compensation - residualPixels;
     this.updateFromByPixels(-pivotPixel + offsetX);
     applyTimelineDateBounds(this, {
       mode: this.isDragging || this.isPinching ? "elastic" : "clamp"
@@ -10455,7 +12203,23 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     let fraction = pixel - (x - token.length);
     const dmy = prevToken.value;
     let { year, month, day } = dmy;
-    if (unit === ZOOM_MONTH) {
+    if (unit <= ZOOM_DAY) {
+      const pixelsPerMillisecond = getPixelsPerDay(this) / MILLISECONDS_PER_DAY;
+      let millisecondsFromToken = pixelsPerMillisecond > 0 ? fraction / pixelsPerMillisecond : 0;
+      const nearestMillisecond = Math.round(millisecondsFromToken);
+      if (Math.abs(millisecondsFromToken - nearestMillisecond) < MILLISECOND_BOUNDARY_EPSILON) {
+        millisecondsFromToken = nearestMillisecond;
+      }
+      const wholeMilliseconds = Math.floor(millisecondsFromToken);
+      const millisecondFraction = millisecondsFromToken - wholeMilliseconds;
+      prevToken.value = prevToken.value.addMilliseconds(wholeMilliseconds);
+      fraction -= wholeMilliseconds * pixelsPerMillisecond;
+      return {
+        date: prevToken.value,
+        fraction,
+        millisecondFraction
+      };
+    } else if (unit === ZOOM_MONTH) {
       day = Math.floor(fraction / len * 30.44) + 1;
       fraction -= (day - 1) * len / 30.44;
       prevToken.value = new Dmy(year, month, day);
@@ -10738,10 +12502,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     var _a;
     const settings = normaliseSetStartDateOptions(options);
     const padding = settings.padding || 0;
-    if (typeof dmy === "string") {
-      dmy = Dmy.fromString(dmy);
-    }
-    dmy = this.getDmyFromInput(dmy);
+    dmy = this.getDmyFromInput(normaliseDateInput(dmy));
     if ((_a = settings.animation) == null ? void 0 : _a.active) {
       animateStartDate(this, dmy, padding, settings.animation);
       return;
@@ -10901,44 +12662,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       this.off(event, handlers[event]);
     }
   };
-  function roundPixel(value) {
-    return Math.round(value);
-  }
-  __name(roundPixel, "roundPixel");
-  function snapPixel(value, dpr = 1) {
-    const ratio = typeof dpr === "number" && isFinite(dpr) && dpr > 0 ? dpr : 1;
-    return Math.round(value * ratio) / ratio;
-  }
-  __name(snapPixel, "snapPixel");
-  function retainPixel(value) {
-    return value;
-  }
-  __name(retainPixel, "retainPixel");
-  function createPixelSnap(dpr = 1, mode = "device") {
-    if (mode === false || mode === "none") {
-      return retainPixel;
-    }
-    if (mode === "css") {
-      return roundPixel;
-    }
-    return /* @__PURE__ */ __name(function snapToDevicePixel(value) {
-      return snapPixel(value, dpr);
-    }, "snapToDevicePixel");
-  }
-  __name(createPixelSnap, "createPixelSnap");
-  function createInnerSpace(outerSpace, borderWidth, snap) {
-    if (!snap) {
-      snap = roundPixel;
-    }
-    const halfBorder = borderWidth / 2;
-    return {
-      left: snap(outerSpace.left + halfBorder),
-      top: snap(outerSpace.top + halfBorder),
-      width: snap(outerSpace.width - borderWidth),
-      height: snap(outerSpace.height - borderWidth)
-    };
-  }
-  __name(createInnerSpace, "createInnerSpace");
   function getPixelSnap$1(article) {
     var _a, _b, _c, _d, _e, _f;
     const dpr = ((_b = (_a = article.owner) == null ? void 0 : _a.getCanvasDpr) == null ? void 0 : _b.call(_a)) || 1;
@@ -10961,7 +12684,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (!this.isDataLoaded || isNaN(this.position.left)) {
         return;
       }
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const snap = getPixelSnap$1(this);
       const articleOrigin = getSnappedArticleOrigin$1(this);
       const top = articleOrigin.top;
@@ -11137,7 +12860,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         }
       }
       if (showStar) {
-        const star = this.getIconBox();
+        const box = this.getIconBox();
+        const centreX = snap(box.left + box.width / 2);
+        const centreY = snap(box.top + box.height / 2);
+        const outerRadius = snap(Math.min(box.width, box.height) / 2);
+        const innerRadius = snap(outerRadius / 2);
         let starStroke, starFill;
         if (!this.isStarred) {
           if (this.isMouseOverStar) {
@@ -11156,26 +12883,17 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
             starFill = "#fff800";
           }
         }
-        drawStar(
-          ctx,
-          star.centreX,
-          star.centreY,
-          5,
-          star.innerRadius,
-          star.outerRadius,
-          starFill,
-          starStroke
-        );
+        drawStar(ctx, centreX, centreY, 5, innerRadius, outerRadius, starFill, starStroke);
       }
     },
     getWidth() {
-      return this._getCurrentStyle().width;
+      return this.getCurrentStyle().width;
     },
     getHeight() {
-      return this._getCurrentStyle().height;
+      return this.getCurrentStyle().height;
     },
     getConnectorEnd() {
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const articleOrigin = getSnappedArticleOrigin$1(this);
       return {
         left: articleOrigin.left + style.connectorLine.offsetX,
@@ -11187,7 +12905,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (((_d = (_c = (_b = (_a = this.owner) == null ? void 0 : _a.options) == null ? void 0 : _b.article) == null ? void 0 : _c.star) == null ? void 0 : _d.visible) === false) {
         return false;
       }
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const snap = getPixelSnap$1(this);
       const sideLength = style.star.width;
       const box = {
@@ -11198,10 +12916,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       const articleOrigin = getSnappedArticleOrigin$1(this);
       box.left = snap(articleOrigin.left - br / 4 + this._getWidth() - box.width - style.star.margin);
       box.top = snap(articleOrigin.top + br / 4 + style.star.margin);
-      box.centreX = snap(box.left + box.width / 2);
-      box.centreY = snap(box.top + box.height / 2);
-      box.outerRadius = snap(box.width / 2);
-      box.innerRadius = snap(box.outerRadius / 2);
       return box;
     },
     defaultStyle: {
@@ -11265,7 +12979,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
     name: "portrait",
     draw(ctx) {
       var _a, _b, _c, _d, _e, _f, _g, _h;
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const snap = getPixelSnap(this);
       const borderWidth = style.border.width;
       const maxBorderWidth = Math.max(
@@ -11504,7 +13218,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
         ctx.stroke();
       }
       if (((_h = (_g = (_f = (_e = this.owner) == null ? void 0 : _e.options) == null ? void 0 : _f.article) == null ? void 0 : _g.star) == null ? void 0 : _h.visible) !== false && (this.isActive || this.isStarred)) {
-        const star = getStarBox(this);
+        const box = this.getIconBox();
+        const centreX = snap(box.left + box.width / 2);
+        const centreY = snap(box.top + box.height / 2);
+        const outerRadius = snap(Math.min(box.width, box.height) / 2);
+        const innerRadius = snap(outerRadius / 2);
         let starStroke, starFill;
         if (!this.isStarred) {
           if (this.isMouseOverStar) {
@@ -11523,23 +13241,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
             starFill = "#fff800";
           }
         }
-        drawStar(
-          ctx,
-          star.centreX,
-          star.centreY,
-          5,
-          star.innerRadius,
-          star.outerRadius,
-          starFill,
-          starStroke
-        );
+        drawStar(ctx, centreX, centreY, 5, innerRadius, outerRadius, starFill, starStroke);
       }
     },
     getWidth() {
-      return this._getCurrentStyle().width;
+      return this.getCurrentStyle().width;
     },
     getHeight() {
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const snap = getPixelSnap(this);
       let imageHeight = 0;
       if (this.imageLoaded) {
@@ -11565,7 +13274,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       return imageHeight + articleTopHeight + style.border.width;
     },
     getConnectorEnd() {
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const articleOrigin = getSnappedArticleOrigin(this);
       return {
         left: articleOrigin.left + style.connectorLine.offsetX,
@@ -11577,7 +13286,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       if (((_d = (_c = (_b = (_a = this.owner) == null ? void 0 : _a.options) == null ? void 0 : _b.article) == null ? void 0 : _c.star) == null ? void 0 : _d.visible) === false) {
         return false;
       }
-      const style = this._getCurrentStyle();
+      const style = this.getCurrentStyle();
       const snap = getPixelSnap(this);
       const articleOrigin = getSnappedArticleOrigin(this);
       const sideLength = style.star.width;
@@ -11592,36 +13301,16 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       return box;
     }
   };
-  function getStarBox(article) {
-    const style = article._getCurrentStyle();
-    const snap = getPixelSnap(article);
-    const articleOrigin = getSnappedArticleOrigin(article);
-    const sideLength = style.star.width;
-    const box = {
-      width: sideLength,
-      height: sideLength
-    };
-    box.left = snap(
-      articleOrigin.left - style.topRadius / 4 + article._getWidth() - box.width - style.star.margin
-    );
-    box.top = snap(articleOrigin.top + style.topRadius / 4 + style.star.margin);
-    box.centreX = snap(box.left + box.width / 2);
-    box.centreY = snap(box.top + box.height / 2);
-    box.outerRadius = snap(box.width / 2);
-    box.innerRadius = snap(box.outerRadius / 2);
-    return box;
-  }
-  __name(getStarBox, "getStarBox");
   const _cardLayouts = /* @__PURE__ */ new Map();
   function _injectDimensionFallbacks(layout) {
     if (typeof layout.getWidth !== "function") {
       layout.getWidth = function() {
-        return this._getCurrentStyle().width;
+        return this.getCurrentStyle().width;
       };
     }
     if (typeof layout.getHeight !== "function") {
       layout.getHeight = function() {
-        return this._getCurrentStyle().height;
+        return this.getCurrentStyle().height;
       };
     }
     if (typeof layout.getIconBox !== "function") {
@@ -11683,10 +13372,23 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
   Timeline.prototype.getStatusForSave = function() {
     const from = this.timescaleManager.startToken.value;
     const articleSaveInfo = [];
+    const fromTime = {};
+    if (from.hour) {
+      fromTime.fhr = from.hour;
+    }
+    if (from.minute) {
+      fromTime.fmi = from.minute;
+    }
+    if (from.second) {
+      fromTime.fs = from.second;
+    }
+    if (from.millisecond) {
+      fromTime.fms = from.millisecond;
+    }
     for (let i = 0; i < this.articles.length; i++) {
       articleSaveInfo.push(this.articles[i].getStatusForSave());
     }
-    return JSON.stringify({
+    return JSON.stringify(__spreadProps(__spreadValues({
       t: this.title,
       o: this.ownerId,
       // set by host app if needed
@@ -11694,10 +13396,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
       // d: event spacing removed in current implementation
       fy: from.year,
       fm: from.month,
-      fd: from.day,
+      fd: from.day
+    }, fromTime), {
       w: this.repositionWindow,
       a: articleSaveInfo
-    });
+    }));
   };
   Timeline.prototype._emitTimelineStateChange = function() {
     if (this && this._isInitialized === true) {