@diagrammo/dgmo 0.50.2 → 0.51.0

package/dist/clock.js

@@ -1,4 +1,32 @@
 // src/clock/resolve.ts
+var CLOCK_RAMP = [
+  [0, "#3d478f"],
+  [4, "#4a4d8c"],
+  [6, "#c98a6b"],
+  [8, "#d9a441"],
+  [11, "#e0b23c"],
+  [13, "#4f96c4"],
+  [16, "#cc7a33"],
+  [19, "#8a5aa0"],
+  [24, "#3d478f"]
+];
+function hexLerp(a, b, t) {
+  const pa = [1, 3, 5].map((i) => parseInt(a.slice(i, i + 2), 16));
+  const pb = [1, 3, 5].map((i) => parseInt(b.slice(i, i + 2), 16));
+  const c = pa.map(
+    (v, i) => Math.round(v + (pb[i] - v) * t).toString(16).padStart(2, "0")
+  );
+  return `#${c.join("")}`;
+}
+function rampColor(h) {
+  const hh = (h % 24 + 24) % 24;
+  for (let i = 0; i < CLOCK_RAMP.length - 1; i++) {
+    const [h0, c0] = CLOCK_RAMP[i];
+    const [h1, c1] = CLOCK_RAMP[i + 1];
+    if (hh >= h0 && hh <= h1) return hexLerp(c0, c1, (hh - h0) / (h1 - h0));
+  }
+  return CLOCK_RAMP[0][1];
+}
 var SOON_MIN = 60;
 var RAD = Math.PI / 180;
 var DAY_MS = 864e5;
@@ -42,6 +70,33 @@ function zoneParts(zone, nowMs) {
 function pad2(n) {
   return n < 10 ? "0" + n : String(n);
 }
+var WEEKDAY_SHORT = [
+  "Sun",
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat"
+];
+function formatOffsetLabel(offsetMin) {
+  if (offsetMin === 0) return "UTC";
+  const sign = offsetMin < 0 ? "-" : "+";
+  const abs = Math.abs(offsetMin);
+  const h = Math.floor(abs / 60);
+  const mm = abs % 60;
+  return `UTC${sign}${h}${mm ? ":" + pad2(mm) : ""}`;
+}
+function fixedParts(offsetMin, nowMs) {
+  const d = new Date(nowMs + offsetMin * 6e4);
+  return {
+    h: d.getUTCHours(),
+    m: d.getUTCMinutes(),
+    s: d.getUTCSeconds(),
+    weekday: WEEKDAY_SHORT[d.getUTCDay()],
+    offsetLabel: formatOffsetLabel(offsetMin)
+  };
+}
 function formatTime(h, m, s, hours12) {
   const sec = pad2(s);
   if (hours12) {
@@ -129,6 +184,22 @@ function handAngles(h, m, s) {
   };
 }
 
+// src/palettes/color-utils.ts
+function mix(a, b, pct) {
+  const parse = (h) => {
+    const r = h.replace("#", "");
+    const f = r.length === 3 ? [...r].map((c2) => c2 + c2).join("") : r;
+    return [
+      parseInt(f.substring(0, 2), 16),
+      parseInt(f.substring(2, 4), 16),
+      parseInt(f.substring(4, 6), 16)
+    ];
+  };
+  const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+  const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
+
 // src/clock/ticker.ts
 function readWork(node) {
   const start = node.getAttribute("data-dgmo-clock-work-start");
@@ -151,7 +222,8 @@ function setPart(group, sel, textContent) {
 function updateRow(group, now) {
   const zone = group.getAttribute("data-dgmo-clock-zone");
   if (!zone) return;
-  const parts = zoneParts(zone, now);
+  const fixedAttr = group.getAttribute("data-dgmo-clock-fixed-offset");
+  const parts = fixedAttr !== null ? fixedParts(Number(fixedAttr), now) : zoneParts(zone, now);
   const latAttr = group.getAttribute("data-dgmo-clock-lat");
   const lonAttr = group.getAttribute("data-dgmo-clock-lon");
   const sunOn = group.getAttribute("data-dgmo-clock-sun") === "1";
@@ -167,9 +239,13 @@ function updateRow(group, now) {
   setHand(group, "h", ang.hour);
   setHand(group, "m", ang.minute);
   setHand(group, "s", ang.second);
-  const autoSolid = group.getAttribute("data-dgmo-clock-auto-solid");
-  const autoFace = group.getAttribute("data-dgmo-clock-auto-face");
-  const faceFill = autoFace ?? stTint;
+  const mode = group.getAttribute("data-dgmo-clock-auto-mode");
+  const cardFill = group.getAttribute("data-dgmo-clock-cardfill");
+  let autoSolid = null;
+  if (mode === "daylight") autoSolid = up ? c("day") : c("night");
+  else if (mode === "time") autoSolid = rampColor(parts.h);
+  else if (mode) autoSolid = group.getAttribute("data-dgmo-clock-auto-solid");
+  const faceFill = autoSolid && cardFill ? mix(autoSolid, cardFill, 20) : group.getAttribute("data-dgmo-clock-auto-face") ?? stTint;
   const handColor = autoSolid ?? stColor;
   const face = group.querySelector("[data-dgmo-clock-facebg]");
   if (face) face.setAttribute("fill", faceFill);
@@ -181,7 +257,7 @@ function updateRow(group, now) {
   if (secondHand) secondHand.setAttribute("stroke", handColor);
   setPart(group, '[data-dgmo-clock-digital-part="main"]', ts.main);
   setPart(group, '[data-dgmo-clock-digital-part="sec"]', `:${ts.sec}`);
-  setPart(group, '[data-dgmo-clock-digital-part="ap"]', ` ${ts.ap}`);
+  setPart(group, '[data-dgmo-clock-digital-part="ap"]', ts.ap);
   setPart(group, "[data-dgmo-clock-ampm]", ts.ap.toUpperCase());
   const work = readWork(group);
   const status = workStatus(parts, work);
@@ -203,6 +279,16 @@ function updateRow(group, now) {
       }
     }
   }
+  const lane = group.querySelector("[data-dgmo-clock-lane]");
+  if (lane && mode) {
+    let laneFill = null;
+    if (mode === "daylight") laneFill = stTint;
+    else if (mode === "time" && cardFill)
+      laneFill = mix(rampColor(parts.h), cardFill, 14);
+    else if (mode === "work" && status)
+      laneFill = status.cls === "ok" ? c("ok-soft") : status.cls === "soon" ? c("soon-soft") : c("off-soft");
+    if (laneFill) lane.setAttribute("fill", laneFill);
+  }
   const sunEl = group.querySelector("[data-dgmo-clock-sun-line]");
   if (sun && sunEl) {
     if (sunEl.textContent !== sun.text) sunEl.textContent = sun.text;

package/dist/countdown.js

@@ -1,6 +1,102 @@
 // src/countdown/resolve.ts
 var DAY_MS = 864e5;
 var WEEK_MS = 7 * DAY_MS;
+var ZONE_WD = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function zoneFields(ms, tz) {
+  const d = new Date(ms);
+  if (!tz) {
+    return {
+      year: d.getFullYear(),
+      month: d.getMonth(),
+      day: d.getDate(),
+      hour: d.getHours(),
+      minute: d.getMinutes(),
+      second: d.getSeconds(),
+      weekday: d.getDay()
+    };
+  }
+  try {
+    const o = {};
+    new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      hour12: false,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      weekday: "short"
+    }).formatToParts(d).forEach((x) => {
+      o[x.type] = x.value;
+    });
+    return {
+      year: Number(o["year"]),
+      month: Number(o["month"]) - 1,
+      day: Number(o["day"]),
+      hour: Number(o["hour"]) % 24,
+      minute: Number(o["minute"]),
+      second: Number(o["second"]),
+      weekday: Math.max(0, ZONE_WD.indexOf(o["weekday"] ?? "Sun"))
+    };
+  } catch {
+    return {
+      year: d.getUTCFullYear(),
+      month: d.getUTCMonth(),
+      day: d.getUTCDate(),
+      hour: d.getUTCHours(),
+      minute: d.getUTCMinutes(),
+      second: d.getUTCSeconds(),
+      weekday: d.getUTCDay()
+    };
+  }
+}
+function zoneOffsetMs(tz, ms) {
+  const f = zoneFields(ms, tz);
+  const asUTC = Date.UTC(f.year, f.month, f.day, f.hour, f.minute, f.second);
+  return asUTC - Math.floor(ms / 1e3) * 1e3;
+}
+function wallToMs(y, mo, d, h, mi, tz) {
+  if (!tz) return new Date(y, mo, d, h, mi).getTime();
+  const guess = Date.UTC(y, mo, d, h, mi);
+  const off1 = zoneOffsetMs(tz, guess);
+  const ms = guess - off1;
+  const off2 = zoneOffsetMs(tz, ms);
+  return off2 === off1 ? ms : guess - off2;
+}
+function zoneOffsetLabel(ms, tz) {
+  if (!tz) return "";
+  try {
+    const off = new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      timeZoneName: "shortOffset"
+    }).formatToParts(new Date(ms)).find((x) => x.type === "timeZoneName");
+    return off ? off.value.replace("GMT", "UTC") : "";
+  } catch {
+    return "";
+  }
+}
+var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+var LOCAL_DT_RE = /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2}))?$/;
+function targetToMs(target, tz = null) {
+  const s = target.trim();
+  if (DATE_ONLY_RE.test(s)) {
+    const [y, m, d] = s.split("-").map(Number);
+    return wallToMs(y, m - 1, d, 0, 0, tz);
+  }
+  const dt = LOCAL_DT_RE.exec(s);
+  if (dt) {
+    return wallToMs(
+      Number(dt[1]),
+      Number(dt[2]) - 1,
+      Number(dt[3]),
+      Number(dt[4]),
+      Number(dt[5]),
+      tz
+    );
+  }
+  return new Date(s).getTime();
+}
 function ordinalWord(n) {
   const abs = Math.abs(n);
   const tens = abs % 100;
@@ -14,16 +110,24 @@ function ordinalWord(n) {
 function applyOrdinalTemplate(template, n) {
   return template.replace(/\bNth\b/g, ordinalWord(n)).replace(/\bN\b/g, String(n));
 }
-function dayStart(ms) {
-  const d = new Date(ms);
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+function dayStart(ms, tz = null) {
+  const f = zoneFields(ms, tz);
+  return wallToMs(f.year, f.month, f.day, 0, 0, tz);
 }
-function nthWeekdayOfMonth(year, month, weekday, nth, hour, minute) {
+function dayDelta(a, b, tz = null) {
+  return Math.round((dayStart(b, tz) - dayStart(a, tz)) / DAY_MS);
+}
+function sameDay(a, b, tz = null) {
+  const x = zoneFields(a, tz);
+  const y = zoneFields(b, tz);
+  return x.year === y.year && x.month === y.month && x.day === y.day;
+}
+function nthWeekdayOfMonth(year, month, weekday, nth, hour, minute, tz) {
   if (nth < 0) {
     const last = new Date(year, month + 1, 0).getDate();
     for (let d = last; d >= 1; d--) {
       if (new Date(year, month, d).getDay() === weekday) {
-        return new Date(year, month, d, hour, minute).getTime();
+        return wallToMs(year, month, d, hour, minute, tz);
       }
     }
     return null;
@@ -32,20 +136,21 @@ function nthWeekdayOfMonth(year, month, weekday, nth, hour, minute) {
   const offset = (weekday - firstDow + 7) % 7;
   const day = 1 + offset + (nth - 1) * 7;
   if (day > new Date(year, month + 1, 0).getDate()) return null;
-  return new Date(year, month, day, hour, minute).getTime();
+  return wallToMs(year, month, day, hour, minute, tz);
 }
 function resolveNext(rule, now) {
-  const nowD = new Date(now);
+  const tz = rule.tz ?? null;
+  const nowF = zoneFields(now, tz);
   const { hour, minute } = rule;
-  const passes = rule.allDay ? (t) => dayStart(t) >= dayStart(now) : (t) => t > now;
+  const passes = rule.allDay ? (t) => dayStart(t, tz) >= dayStart(now, tz) : (t) => t > now;
   const dayExists = (y, m, d) => new Date(y, m, d).getMonth() === m;
   switch (rule.kind) {
     case "month-day": {
       const month = rule.month;
       const day = rule.day;
-      for (let y = nowD.getFullYear(); ; y++) {
+      for (let y = nowF.year; ; y++) {
         if (!dayExists(y, month, day)) continue;
-        const t = new Date(y, month, day, hour, minute).getTime();
+        const t = wallToMs(y, month, day, hour, minute, tz);
         if (passes(t)) return t;
       }
     }
@@ -53,10 +158,10 @@ function resolveNext(rule, now) {
     case "last-weekday": {
       const weekday = rule.weekday;
       const nth = rule.kind === "last-weekday" ? -1 : rule.nth;
-      let y = nowD.getFullYear();
-      let m = nowD.getMonth();
+      let y = nowF.year;
+      let m = nowF.month;
       for (let i = 0; i < 24; i++) {
-        const t = nthWeekdayOfMonth(y, m, weekday, nth, hour, minute);
+        const t = nthWeekdayOfMonth(y, m, weekday, nth, hour, minute, tz);
         if (t !== null && passes(t)) return t;
         m++;
         if (m > 11) {
@@ -69,14 +174,17 @@ function resolveNext(rule, now) {
     case "weekly": {
       const weekday = rule.weekday;
       for (let i = 0; i < 8; i++) {
-        const d = new Date(
-          nowD.getFullYear(),
-          nowD.getMonth(),
-          nowD.getDate() + i,
+        const cal = new Date(nowF.year, nowF.month, nowF.day + i);
+        if (cal.getDay() !== weekday) continue;
+        const t = wallToMs(
+          cal.getFullYear(),
+          cal.getMonth(),
+          cal.getDate(),
           hour,
-          minute
+          minute,
+          tz
         );
-        if (d.getDay() === weekday && passes(d.getTime())) return d.getTime();
+        if (passes(t)) return t;
       }
       return now + WEEK_MS;
     }
@@ -84,15 +192,15 @@ function resolveNext(rule, now) {
       const n = rule.intervalN ?? 1;
       const anchor = rule.anchorMs ?? now;
       if (rule.intervalUnit === "month") {
-        const a = new Date(anchor);
-        const day = a.getDate();
+        const a = zoneFields(anchor, tz);
+        const day = a.day;
         for (let k = 0; ; k++) {
-          const y = a.getFullYear();
-          const m = a.getMonth() + k * n;
+          const y = a.year;
+          const m = a.month + k * n;
           const yy = y + Math.floor(m / 12);
           const mm = (m % 12 + 12) % 12;
           if (!dayExists(yy, mm, day)) continue;
-          const t2 = new Date(yy, mm, day, hour, minute).getTime();
+          const t2 = wallToMs(yy, mm, day, hour, minute, tz);
           if (passes(t2)) return t2;
         }
       }
@@ -153,6 +261,10 @@ function formatCount(remainingMs, opts) {
   const dayPrefix = has("d") && days > 0 ? `${days}d${clock ? " " : ""}` : "";
   return dayPrefix + clock || plural(days, "day");
 }
+function splitClockSeconds(s) {
+  const m = /^(.+:\d{2}):(\d{2})$/.exec(s);
+  return m ? { lead: m[1], sec: ":" + m[2] } : { lead: s, sec: null };
+}
 function formatWordsDetail(remainingMs) {
   const totalMin = Math.floor(Math.max(0, remainingMs) / 6e4);
   const d = Math.floor(totalMin / 1440);
@@ -164,15 +276,15 @@ function formatWordsDetail(remainingMs) {
   parts.push(`${m} minute${m === 1 ? "" : "s"}`);
   return parts.join(" ");
 }
-function breakdown(nowMs, targetMs) {
-  const n = new Date(nowMs);
-  const t = new Date(targetMs);
-  let y = t.getFullYear() - n.getFullYear();
-  let mo = t.getMonth() - n.getMonth();
-  let d = t.getDate() - n.getDate();
-  let h = t.getHours() - n.getHours();
-  let mi = t.getMinutes() - n.getMinutes();
-  let s = t.getSeconds() - n.getSeconds();
+function breakdown(nowMs, targetMs, tz = null) {
+  const n = zoneFields(nowMs, tz);
+  const t = zoneFields(targetMs, tz);
+  let y = t.year - n.year;
+  let mo = t.month - n.month;
+  let d = t.day - n.day;
+  let h = t.hour - n.hour;
+  let mi = t.minute - n.minute;
+  let s = t.second - n.second;
   if (s < 0) {
     s += 60;
     mi--;
@@ -186,7 +298,7 @@ function breakdown(nowMs, targetMs) {
     d--;
   }
   if (d < 0) {
-    d += new Date(t.getFullYear(), t.getMonth(), 0).getDate();
+    d += new Date(t.year, t.month, 0).getDate();
     mo--;
   }
   if (mo < 0) {
@@ -195,8 +307,8 @@ function breakdown(nowMs, targetMs) {
   }
   return { years: y, months: mo, days: d, hours: h, minutes: mi, seconds: s };
 }
-function humanUnits(nowMs, targetMs) {
-  const b = breakdown(nowMs, targetMs);
+function humanUnits(nowMs, targetMs, tz = null) {
+  const b = breakdown(nowMs, targetMs, tz);
   return [
     [b.years, "year"],
     [b.months, "month"],
@@ -205,8 +317,8 @@ function humanUnits(nowMs, targetMs) {
     [b.minutes, "minute"]
   ];
 }
-function formatHuman(nowMs, targetMs) {
-  const units = humanUnits(nowMs, targetMs);
+function formatHuman(nowMs, targetMs, tz = null) {
+  const units = humanUnits(nowMs, targetMs, tz);
   let i = 0;
   while (i < units.length - 1 && units[i][0] === 0) i++;
   const rest = units.slice(i);
@@ -215,8 +327,8 @@ function formatHuman(nowMs, targetMs) {
   const secondary = rest.slice(2).filter((p) => p[0] > 0);
   return { big: say(primary) || "now", sub: say(secondary) };
 }
-function formatCompound(nowMs, targetMs, maxUnits = 2) {
-  const all = humanUnits(nowMs, targetMs);
+function formatCompound(nowMs, targetMs, maxUnits = 2, tz = null) {
+  const all = humanUnits(nowMs, targetMs, tz);
   let i = 0;
   while (i < all.length - 1 && all[i][0] === 0) i++;
   const chosen = all.slice(i, i + maxUnits).filter((p, idx) => p[0] > 0 || idx === 0);
@@ -238,35 +350,54 @@ var MONTH_ABBR = [
   "Nov",
   "Dec"
 ];
-function formatDate(ms) {
-  const d = new Date(ms);
-  return `${WEEKDAY_ABBR[d.getDay()]} ${MONTH_ABBR[d.getMonth()]} ${d.getDate()} ${d.getFullYear()}`;
+function formatDate(ms, tz = null) {
+  const f = zoneFields(ms, tz);
+  return `${WEEKDAY_ABBR[f.weekday]} ${MONTH_ABBR[f.month]} ${f.day} ${f.year}`;
 }
-function formatFooter(resolvedMs, hasTime) {
-  const parts = [formatDate(resolvedMs)];
+function formatFooter(resolvedMs, hasTime, tz = null) {
+  const parts = [formatDate(resolvedMs, tz)];
   if (hasTime) {
-    const d = new Date(resolvedMs);
-    parts.push(`${pad2(d.getHours())}:${pad2(d.getMinutes())}`);
+    const f = zoneFields(resolvedMs, tz);
+    parts.push(`${pad2(f.hour)}:${pad2(f.minute)}`);
+    const label = zoneOffsetLabel(resolvedMs, tz);
+    if (label) parts.push(label);
   }
   return parts.join(" \xB7 ");
 }
 
 // src/countdown/ticker.ts
-var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
-function dayStartLocal(ms) {
-  const d = new Date(ms);
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-}
-function dayDeltaLocal(aMs, bMs) {
-  const a = new Date(aMs);
-  const b = new Date(bMs);
-  const a0 = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
-  const b0 = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
-  return Math.round((b0 - a0) / DAY_MS);
-}
 function pad22(n) {
   return n < 10 ? "0" + n : String(n);
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+function setClockText(el, str) {
+  if (el.hasAttribute("data-dgmo-cd-clock")) {
+    const { lead, sec } = splitClockSeconds(str);
+    if (sec !== null) {
+      let leadT = el.querySelector("[data-cd-lead]");
+      let secT = el.querySelector("[data-cd-sec]");
+      if (!leadT || !secT) {
+        while (el.firstChild) el.removeChild(el.firstChild);
+        const doc = el.ownerDocument;
+        leadT = doc.createElementNS(SVG_NS, "tspan");
+        leadT.setAttribute("data-cd-lead", "");
+        secT = doc.createElementNS(SVG_NS, "tspan");
+        secT.setAttribute("data-cd-sec", "");
+        const size = el.getAttribute("data-dgmo-cd-sec-size");
+        const fill = el.getAttribute("data-dgmo-cd-sec-fill");
+        if (size) secT.setAttribute("font-size", size);
+        if (fill) secT.setAttribute("fill", fill);
+        secT.setAttribute("font-weight", "700");
+        el.appendChild(leadT);
+        el.appendChild(secT);
+      }
+      if (leadT.textContent !== lead) leadT.textContent = lead;
+      if (secT.textContent !== sec) secT.textContent = sec;
+      return;
+    }
+  }
+  if (el.textContent !== str) el.textContent = str;
+}
 function polar(cx, cy, r, deg) {
   const a = (deg - 90) * Math.PI / 180;
   return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
@@ -308,13 +439,8 @@ function updateGauges(svg, remaining) {
     if (cap.textContent !== t) cap.textContent = t;
   }
 }
-function targetToMs(target) {
-  const s = target.trim();
-  if (DATE_ONLY_RE.test(s)) {
-    const p = s.split("-").map(Number);
-    return new Date(p[0], p[1] - 1, p[2]).getTime();
-  }
-  const t = new Date(s).getTime();
+function targetToMs2(target, tz) {
+  const t = targetToMs(target, tz);
   return Number.isFinite(t) ? t : null;
 }
 function readRule(node) {
@@ -335,14 +461,10 @@ function readRule(node) {
     allDay: node.getAttribute("data-dgmo-recur-allday") !== "0",
     intervalN: num("data-dgmo-recur-interval-n"),
     intervalUnit: node.getAttribute("data-dgmo-recur-interval-unit") ?? void 0,
-    anchorMs: num("data-dgmo-recur-anchor")
+    anchorMs: num("data-dgmo-recur-anchor"),
+    tz: node.getAttribute("data-dgmo-recur-tz") ?? void 0
   };
 }
-function sameLocalDay(a, b) {
-  const x = new Date(a);
-  const y = new Date(b);
-  return x.getFullYear() === y.getFullYear() && x.getMonth() === y.getMonth() && x.getDate() === y.getDate();
-}
 function readFields(node) {
   const raw = node.getAttribute("data-dgmo-countdown-fields");
   if (!raw) return ["d", "h", "m", "s"];
@@ -355,13 +477,14 @@ function updateNode(node, now) {
   const fields = readFields(node);
   const onDay = node.getAttribute("data-dgmo-countdown-onday");
   const title = node.getAttribute("data-dgmo-countdown-title");
+  const tz = node.getAttribute("data-dgmo-countdown-tz");
   let resolvedMs;
   let expiredNow = false;
   if (rule) {
     resolvedMs = resolveNext(rule, now);
   } else {
     const target = node.getAttribute("data-dgmo-countdown");
-    resolvedMs = target ? targetToMs(target) : null;
+    resolvedMs = target ? targetToMs2(target, tz) : null;
     if (resolvedMs !== null && resolvedMs - now <= 0) expiredNow = true;
   }
   if (resolvedMs === null) return;
@@ -370,7 +493,7 @@ function updateNode(node, now) {
   const custom = node.getAttribute("data-dgmo-countdown-expired");
   const hasTime = node.getAttribute("data-dgmo-countdown-hastime") === "1";
   const frozen = expiredNow && custom !== null;
-  const clockFinale = hasTime && !frozen && dayDeltaLocal(now, resolvedMs) <= 0;
+  const clockFinale = hasTime && !frozen && dayDelta(now, resolvedMs, tz) <= 0;
   let text;
   if (frozen) {
     text = custom;
@@ -383,21 +506,21 @@ function updateNode(node, now) {
     text = remaining < 0 ? `${clock} ago` : clock;
   } else if (expiredNow) {
     if (units === "compound" || units === "human")
-      text = `${formatCompound(resolvedMs, now)} ago`;
+      text = `${formatCompound(resolvedMs, now, 2, tz)} ago`;
     else {
       const elapsed = -remaining;
       text = elapsed <= 0 ? "Now!" : `${formatCount(elapsed, { units, round, fields })} ago`;
     }
-  } else if (rule && sameLocalDay(resolvedMs, now)) {
+  } else if (rule && sameDay(resolvedMs, now, tz)) {
     text = onDay ?? "Today!";
   } else if (units === "human") {
-    text = hasTime ? formatHuman(now, resolvedMs).big : formatHuman(dayStartLocal(now), dayStartLocal(resolvedMs)).big;
+    text = hasTime ? formatHuman(now, resolvedMs, tz).big : formatHuman(dayStart(now, tz), dayStart(resolvedMs, tz), tz).big;
   } else if (units === "compound") {
-    text = formatCompound(now, resolvedMs);
+    text = formatCompound(now, resolvedMs, 2, tz);
   } else {
     text = formatCount(Math.max(0, remaining), { units, round, fields });
   }
-  if (node.textContent !== text) node.textContent = text;
+  setClockText(node, text);
   node.setAttribute(
     "aria-label",
     title ? `${title}: ${text}` : expiredNow ? text : `${text} remaining`
@@ -407,7 +530,7 @@ function updateNode(node, now) {
   const footer = svg.querySelector("[data-dgmo-countdown-footer]");
   if (footer && !expiredNow) {
     const hasTime2 = node.getAttribute("data-dgmo-countdown-hastime") === "1";
-    footer.textContent = formatFooter(resolvedMs, hasTime2);
+    footer.textContent = formatFooter(resolvedMs, hasTime2, tz);
   }
   const eyebrowEl = svg.querySelector("[data-dgmo-countdown-eyebrow]");
   if (eyebrowEl && sinceAttr) {
@@ -420,9 +543,12 @@ function updateNode(node, now) {
   const detail = svg.querySelector("[data-dgmo-countdown-detail]");
   if (detail && !expiredNow && !clockFinale) {
     if (units === "words") {
-      detail.textContent = formatWordsDetail(Math.max(0, remaining));
+      setClockText(detail, formatWordsDetail(Math.max(0, remaining)));
     } else if (units === "human" && remaining > 0) {
-      detail.textContent = hasTime ? formatCount(remaining, { units: "clock", round, fields }) : formatHuman(dayStartLocal(now), dayStartLocal(resolvedMs)).sub;
+      setClockText(
+        detail,
+        hasTime ? formatCount(remaining, { units: "clock", round, fields }) : formatHuman(dayStart(now, tz), dayStart(resolvedMs, tz), tz).sub
+      );
     }
   }
   if (clockFinale) updateGauges(svg, remaining);