@diagrammo/dgmo 0.50.2 → 0.52.0

package/dist/{chunk-BTUTZMPT.js → chunk-FT3ZYWET.js}

@@ -1,30 +1,37 @@
 import {
   monthIndex,
   resolveNext,
+  targetToMs,
   weekdayIndex
-} from "./chunk-YNRDWYZP.js";
+} from "./chunk-OQKP2X3D.js";
+import {
+  normalizeDate
+} from "./chunk-DAOFNU6J.js";
 import {
   extractColor,
+  fillModeFromToken,
   measureIndent,
   parseFirstLine
-} from "./chunk-OTAL43EH.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   makeDgmoError,
   makeFail
 } from "./chunk-CXK4DZH3.js";
 
 // src/countdown/parser.ts
-var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
 var TIME_24H_RE = /^(\d{1,2}):(\d{2})$/;
 var AMPM_RE = /^(\d{1,2})(?::(\d{2}))?\s*([ap]m)$/i;
-function targetToMs(target) {
-  const s = target.trim();
-  if (DATE_ONLY_RE.test(s)) {
-    const [y, m, d] = s.split("-").map(Number);
-    return new Date(y, m - 1, d).getTime();
+function targetToMs2(target, tz = null) {
+  const ms = targetToMs(target, tz);
+  return Number.isFinite(ms) ? ms : null;
+}
+function isValidZone(zone) {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: zone });
+    return true;
+  } catch {
+    return false;
   }
-  const t = new Date(s).getTime();
-  return Number.isFinite(t) ? t : null;
 }
 function ordinalToken(tok) {
   const t = tok.toLowerCase();
@@ -71,6 +78,7 @@ function parseCountdown(content, palette) {
     rule: null,
     resolvedMs: null,
     hasTime: false,
+    tz: null,
     since: null,
     sinceLabel: null,
     units: "human",
@@ -99,12 +107,19 @@ function parseCountdown(content, palette) {
   let intervalUnit = "day";
   let onSpec = null;
   let atTime = null;
+  let targetRaw = null;
+  let targetIsNow = false;
+  let targetLine = 1;
+  let fromRaw = null;
+  let fromLine = 1;
   let anchorMs = null;
   let targetMs = null;
   let hasTargetLine = false;
   let hasEvery = false;
   const noteBody = [];
   let inNote = false;
+  let dateOrder = "mdy";
+  let baseYear = null;
   for (let i = 0; i < lines.length; i++) {
     const lineNum = i + 1;
     const raw = lines[i];
@@ -146,22 +161,14 @@ function parseCountdown(content, palette) {
       // ── One-shot target ──
       case "target": {
         hasTargetLine = true;
+        targetLine = lineNum;
         if (/^now$/i.test(rest)) {
-          targetMs = Date.now();
-          result.target = new Date(targetMs).toISOString();
+          targetIsNow = true;
           result.hasTime = true;
         } else {
-          const ms = targetToMs(rest);
-          if (ms === null) {
-            softError(
-              lineNum,
-              `"target" needs an ISO date/datetime or "now" (got "${rest}").`
-            );
-          } else {
-            result.target = rest;
-            targetMs = ms;
-            if (rest.includes("T")) result.hasTime = true;
-          }
+          targetRaw = rest;
+          result.target = rest;
+          if (rest.includes("T")) result.hasTime = true;
         }
         break;
       }
@@ -217,15 +224,8 @@ function parseCountdown(content, palette) {
         if (seg.at.length)
           atTime = parseAt(seg.at.join(" "), lineNum, softError);
         if (seg.from.length) {
-          const ms = targetToMs(seg.from.join(" "));
-          if (ms === null) {
-            softError(
-              lineNum,
-              `"from" needs an anchor date (got "${seg.from.join(" ")}").`
-            );
-          } else {
-            anchorMs = ms;
-          }
+          fromRaw = seg.from.join(" ");
+          fromLine = lineNum;
         }
         break;
       }
@@ -240,12 +240,22 @@ function parseCountdown(content, palette) {
         break;
       }
       case "from": {
-        const ms = targetToMs(rest);
-        if (ms === null) {
-          softError(lineNum, `"from" needs an anchor date (got "${rest}").`);
-        } else {
-          anchorMs = ms;
-        }
+        fromRaw = rest;
+        fromLine = lineNum;
+        break;
+      }
+      // ── Universal date directives (§ BL-121) ──
+      case "date-order": {
+        const v = rest.toLowerCase();
+        if (v === "mdy" || v === "dmy") dateOrder = v;
+        else
+          softError(lineNum, `"date-order" is "mdy" or "dmy" (got "${rest}").`);
+        break;
+      }
+      case "year": {
+        const y = parseInt(rest, 10);
+        if (Number.isInteger(y) && y > 0) baseYear = y;
+        else softError(lineNum, `"year" needs a 4-digit year (got "${rest}").`);
         break;
       }
       // ── Ordinal / since — numbers a yearly occurrence (resolvedYear − since) ──
@@ -291,6 +301,22 @@ function parseCountdown(content, palette) {
       case "lang":
         result.lang = rest.toLowerCase() || "en";
         break;
+      // ── `tz <IANA>` — pin authored wall-clock times to a zone (§36 tz slot).
+      //    Space-separated (no colon), an IANA id like `America/New_York`. ──
+      case "tz": {
+        const zone = rest.trim();
+        if (!zone) {
+          warn(lineNum, '"tz" needs an IANA zone like America/New_York.');
+        } else if (!isValidZone(zone)) {
+          warn(
+            lineNum,
+            `Unknown time zone "${zone}" \u2014 use an IANA id like America/New_York. Counting viewer-local.`
+          );
+        } else {
+          result.tz = zone;
+        }
+        break;
+      }
       case "on-day":
         result.onDay = rest || null;
         break;
@@ -301,6 +327,16 @@ function parseCountdown(content, palette) {
       case "no-visual":
         result.noVisual = true;
         break;
+      // ── §1.9 fill family — mutually exclusive bare flags, last one wins;
+      //    `fill-tint` is the explicit spelling of the default (clears it). ──
+      case "fill-tint":
+      case "fill-solid":
+      case "fill-outline": {
+        const fm = fillModeFromToken(key);
+        if (fm === "solid" || fm === "outline") result.fillMode = fm;
+        else delete result.fillMode;
+        break;
+      }
       // ── `note` — markdown caption; inline value or indented body block. ──
       case "note":
         inNote = true;
@@ -311,6 +347,35 @@ function parseCountdown(content, palette) {
     }
   }
   if (noteBody.length) result.note = noteBody.join("\n");
+  if (targetIsNow) {
+    targetMs = Date.now();
+    result.target = new Date(targetMs).toISOString();
+  } else if (targetRaw !== null) {
+    const iso = normalizeDate(targetRaw, { order: dateOrder, year: baseYear });
+    const effective = iso ?? targetRaw;
+    const ms = targetToMs2(effective, result.tz);
+    if (ms === null) {
+      softError(
+        targetLine,
+        `"target" needs a date/datetime or "now" (got "${targetRaw}").`
+      );
+    } else {
+      targetMs = ms;
+      if (iso) {
+        result.target = iso;
+        if (iso.includes(":")) result.hasTime = true;
+      }
+    }
+  }
+  if (fromRaw !== null) {
+    const iso = normalizeDate(fromRaw, { order: dateOrder, year: baseYear });
+    const ms = targetToMs2(iso ?? fromRaw, result.tz);
+    if (ms === null) {
+      softError(fromLine, `"from" needs an anchor date (got "${fromRaw}").`);
+    } else {
+      anchorMs = ms;
+    }
+  }
   if (hasEvery && hasTargetLine) {
     softError(
       result.titleLineNumber ?? 1,
@@ -333,8 +398,9 @@ function parseCountdown(content, palette) {
       softError
     );
     if (rule) {
-      result.rule = rule;
-      result.resolvedMs = resolveNext(rule, Date.now());
+      const tzRule = result.tz ? { ...rule, tz: result.tz } : rule;
+      result.rule = tzRule;
+      result.resolvedMs = resolveNext(tzRule, Date.now());
       if (atTime) result.hasTime = true;
     }
   } else if (targetMs !== null) {
@@ -476,7 +542,7 @@ function emitFreeProseError(lineNum, rest, softError) {
 }
 
 export {
-  targetToMs,
+  targetToMs2 as targetToMs,
   parseCountdown
 };
-//# sourceMappingURL=chunk-BTUTZMPT.js.map
+//# sourceMappingURL=chunk-FT3ZYWET.js.map

package/dist/{chunk-T5SHNNGP.js → chunk-FUPF2UYQ.js}

@@ -8,22 +8,26 @@ import {
 import {
   DAY_MS,
   applyOrdinalTemplate,
+  dayStart,
   formatCompound,
   formatCount,
   formatDateShort,
   formatFooter,
   formatHuman,
   formatWordsDetail,
-  ordinalFor
-} from "./chunk-YNRDWYZP.js";
+  ordinalFor,
+  sameDay,
+  splitClockSeconds
+} from "./chunk-OQKP2X3D.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
+  contrastText,
   getSeriesColors,
   mix,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveColor
 } from "./chunk-TLVIHFRO.js";
@@ -33,23 +37,24 @@ import * as d3Selection from "d3-selection";
 function bakedHero(parsed, now) {
   const resolved = parsed.resolvedMs;
   if (resolved === null) return "\u2014";
+  const tz = parsed.tz;
   const remaining = resolved - now;
   if (!parsed.rule && remaining <= 0) {
     if (parsed.expired !== null) return parsed.expired;
     const elapsed = -remaining;
     if (elapsed <= 0) return "Now!";
     if (parsed.units === "compound" || parsed.units === "human")
-      return `${formatCompound(resolved, now)} ago`;
+      return `${formatCompound(resolved, now, 2, tz)} ago`;
     const bu = parsed.units === "full" || parsed.units === "clock" ? "days" : parsed.units;
     return `${formatCount(elapsed, { units: bu, round: parsed.round, fields: parsed.fields })} ago`;
   }
-  if (parsed.rule && sameLocalDay(resolved, now))
+  if (parsed.rule && sameDay(resolved, now, tz))
     return parsed.onDay ?? "Today!";
   if (parsed.units === "human") {
-    const [hn, ht] = parsed.hasTime ? [now, resolved] : [DAY_START(now), DAY_START(resolved)];
-    return formatHuman(hn, ht).big;
+    const [hn, ht] = parsed.hasTime ? [now, resolved] : [dayStart(now, tz), dayStart(resolved, tz)];
+    return formatHuman(hn, ht, tz).big;
   }
-  if (parsed.units === "compound") return formatCompound(now, resolved);
+  if (parsed.units === "compound") return formatCompound(now, resolved, 2, tz);
   const bakeUnits = parsed.units === "full" || parsed.units === "clock" ? "days" : parsed.units;
   return formatCount(Math.max(0, remaining), {
     units: bakeUnits,
@@ -57,11 +62,6 @@ function bakedHero(parsed, now) {
     fields: parsed.fields
   });
 }
-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 stampRecur(sel, parsed) {
   const r = parsed.rule;
   if (!r) return;
@@ -78,6 +78,7 @@ function stampRecur(sel, parsed) {
   if (r.intervalUnit !== void 0)
     sel.attr("data-dgmo-recur-interval-unit", r.intervalUnit);
   if (r.anchorMs !== void 0) sel.attr("data-dgmo-recur-anchor", r.anchorMs);
+  if (r.tz !== void 0) sel.attr("data-dgmo-recur-tz", r.tz);
 }
 var MON_ABBR = [
   "Jan",
@@ -103,7 +104,7 @@ var keyOf = (ms) => {
   const d = new Date(ms);
   return d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
 };
-function bandColors(palette, accent, muted, faint) {
+function bandColors(palette, accent, muted, faint, isDark, fillMode) {
   const blue = resolveColor("blue", palette) ?? mix(palette.text, palette.bg, 45);
   const collides = accent.toLowerCase() === blue.toLowerCase();
   const now = collides ? resolveColor("teal", palette) ?? resolveColor("cyan", palette) ?? mix(palette.text, palette.bg, 55) : blue;
@@ -118,7 +119,11 @@ function bandColors(palette, accent, muted, faint) {
     event: accent,
     midSoft: mix(mid, palette.bg, 24),
     inert: mix(palette.text, palette.bg, 7),
-    inertBorder: mix(palette.text, palette.bg, 22)
+    inertBorder: mix(palette.text, palette.bg, 22),
+    fillMode,
+    baseBg: themeBaseBg(palette, isDark),
+    onLight: palette.textOnFillLight,
+    onDark: palette.textOnFillDark
   };
 }
 function roleStyle(C, role) {
@@ -128,15 +133,26 @@ function roleStyle(C, role) {
     case "future":
       return { fill: C.inert, stroke: C.inertBorder, text: C.muted };
     case "today":
-      return { fill: C.now, stroke: C.now, text: C.bg };
+      return chipStyle(C, C.now);
     case "event":
-      return { fill: C.event, stroke: C.event, text: C.bg };
+      return chipStyle(C, C.event);
   }
 }
+function chipStyle(C, color) {
+  if (C.fillMode === "outline")
+    return { fill: C.baseBg, stroke: color, text: color };
+  if (C.fillMode === "solid")
+    return {
+      fill: color,
+      stroke: color,
+      text: contrastText(color, C.onLight, C.onDark)
+    };
+  return { fill: color, stroke: color, text: C.bg };
+}
 function gradStyle(C, frac) {
   const t = Math.max(0, Math.min(1, frac));
   const f = mix(C.event, C.now, Math.round(t * 100));
-  return { fill: f, stroke: f, text: C.bg };
+  return chipStyle(C, f);
 }
 function aText(svg, x, y, size, fill, weight, anchor, txt, extra) {
   const t = svg.append("text").attr("x", x).attr("y", y).attr("text-anchor", anchor).attr("font-size", size).attr("font-weight", weight).attr("fill", fill).attr("font-family", FONT_FAMILY).attr("font-variant-numeric", "tabular-nums").text(txt);
@@ -150,7 +166,7 @@ function aLine(svg, x1, y1, x2, y2, stroke, sw, opacity) {
   const l = svg.append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("stroke", stroke).attr("stroke-width", sw);
   if (opacity != null) l.attr("opacity", opacity);
 }
-var REPEAT_ICON_PATH = "m17 2 4 4-4 4 M3 11v-1a4 4 0 0 1 4-4h14 m7 22-4-4 4-4 M21 13v1a4 4 0 0 1-4 4H3";
+var REPEAT_ICON_PATH = "m17 2 4 4-4 4 M3 11v-1a4 4 0 0 1 4-4h14 M7 22l-4-4 4-4 M21 13v1a4 4 0 0 1-4 4H3";
 function recurGlyph(svg, cx, cy, r, color) {
   const side = r * 2.4;
   const scale = side / 24;
@@ -162,7 +178,7 @@ function recurGlyph(svg, cx, cy, r, color) {
 }
 function haloRect(svg, x, y, w, h, rx, C) {
   aRect(svg, x - 1, y - 1, w + 2, h + 2, rx + 1, "none", C.bg, 2);
-  aRect(svg, x - 3, y - 3, w + 6, h + 6, rx + 3, "none", C.event, 2);
+  svg.append("rect").attr("class", "dgmo-countdown-target-ring").attr("x", x - 3).attr("y", y - 3).attr("width", w + 6).attr("height", h + 6).attr("rx", rx + 3).attr("fill", "none").attr("stroke", C.event).attr("stroke-width", 2);
 }
 function pickBand(nowMs, resolvedMs, hasTime) {
   const days = dayDelta(nowMs, resolvedMs);
@@ -658,13 +674,14 @@ function vizToday(svg, g, resolvedMs, C) {
   }
   const w = Math.min(120, g.contentW * 0.16);
   const h = g.height * 0.52;
-  aRect(svg, cx - w / 2, cy - h / 2, w, h, 18, C.event, C.event, 2);
+  const st = roleStyle(C, "event");
+  aRect(svg, cx - w / 2, cy - h / 2, w, h, 18, st.fill, st.stroke, 2);
   aText(
     svg,
     cx,
     cy - h * 0.14,
     14,
-    C.bg,
+    st.text,
     700,
     "middle",
     MON_ABBR[ev.getMonth()].toUpperCase(),
@@ -675,7 +692,7 @@ function vizToday(svg, g, resolvedMs, C) {
     cx,
     cy + h * 0.22,
     Math.min(48, h * 0.4),
-    C.bg,
+    st.text,
     800,
     "middle",
     String(ev.getDate())
@@ -826,6 +843,13 @@ function vizClock(svg, g, nowMs, targetMs, C) {
 function pad2(n) {
   return n < 10 ? "0" + n : String(n);
 }
+function paintClock(sel, str, secSize, secFill) {
+  const { lead, sec } = splitClockSeconds(str);
+  sel.attr("font-variant-numeric", "tabular-nums").attr("data-dgmo-cd-clock", "").attr("data-dgmo-cd-sec-size", secSize).attr("data-dgmo-cd-sec-fill", secFill).text(null);
+  sel.append("tspan").attr("data-cd-lead", "").text(lead);
+  if (sec !== null)
+    sel.append("tspan").attr("data-cd-sec", "").attr("font-size", secSize).attr("fill", secFill).attr("font-weight", 700).text(sec);
+}
 function drawBand(svg, kind, g, nowMs, resolvedMs, C) {
   switch (kind) {
     case "years":
@@ -874,6 +898,18 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
   const banked = resolveColor("green", palette) ?? muted;
   const faint = mix(palette.text, themeBaseBg(palette, isDark), 72);
   const svg = d3Selection.select(container).append("svg").attr("width", width).attr("preserveAspectRatio", "xMidYMid meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("role", "img").attr("aria-label", `${parsed.title ?? "Countdown"}: ${hero}`).style("font-family", FONT_FAMILY);
+  svg.append("style").text(`
+    @keyframes dgmo-countdown-flash {
+      0%, 100% { opacity: 1; stroke-width: 2; }
+      50% { opacity: 0.45; stroke-width: 3; }
+    }
+    .dgmo-countdown-target-ring {
+      animation: dgmo-countdown-flash 1.8s ease-in-out infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .dgmo-countdown-target-ring { animation: none; }
+    }
+  `);
   const bgRect = svg.append("rect").attr("width", width).attr("fill", palette.bg);
   const estWidth = (t, fs) => t.length * fs * 0.58;
   const fitFont = (t, base, maxW, min) => {
@@ -893,10 +929,12 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
     fields: parsed.fields
   }) : hero;
   const heroMaxW = contentW * 0.44;
-  const heroFont = fitFont(heroSizeStr, 96, heroMaxW, 26);
-  const heroW = Math.min(heroMaxW, estWidth(heroSizeStr, heroFont));
+  const sizeStr = estWidth(hero, 1) > estWidth(heroSizeStr, 1) ? hero : heroSizeStr;
   const gapMid = Math.max(28, Math.round(width * 0.03));
-  const leftW = Math.max(contentW * 0.42, contentW - heroW - gapMid);
+  const stacked = estWidth(sizeStr, 26) > heroMaxW;
+  const heroFont = fitFont(sizeStr, 96, stacked ? contentW : heroMaxW, 26);
+  const heroW = stacked ? contentW : Math.min(heroMaxW, estWidth(sizeStr, heroFont));
+  const leftW = stacked ? contentW : Math.max(contentW * 0.42, contentW - heroW - gapMid);
   const titleBase = 40;
   let titleFont = 0;
   let titleLines = [];
@@ -908,7 +946,7 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
   }
   const eyebrowText = ordinal !== null ? applyOrdinalTemplate(parsed.sinceLabel ?? `Nth ${label}`, ordinal) : null;
   const eyebrowFont = 16;
-  const footerText = resolved !== null ? formatFooter(resolved, parsed.hasTime) : null;
+  const footerText = resolved !== null ? formatFooter(resolved, parsed.hasTime, parsed.tz) : null;
   const footerFont = 17;
   const noteFont = 19;
   const asofFont = 13;
@@ -926,7 +964,7 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
     });
     y += Math.round(titleFont * 0.45);
     const heroLeft = width - padX - heroW;
-    const ruleRight = Math.max(leftX + 40, heroLeft - 20);
+    const ruleRight = stacked ? width - padX : Math.max(leftX + 40, heroLeft - 20);
     svg.append("line").attr("x1", leftX).attr("x2", ruleRight).attr("y1", y).attr("y2", y).attr("stroke", mix(palette.text, palette.bg, 14)).attr("stroke-width", 1.25);
     y += Math.round(titleFont * 0.5);
   }
@@ -974,8 +1012,12 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
     units: "clock",
     round: parsed.round,
     fields: parsed.fields
-  }) : formatHuman(DAY_START(now), DAY_START(resolved)).sub || null : null;
-  const heroCapTop = padY + 0.28 * titleFont;
+  }) : formatHuman(
+    dayStart(now, parsed.tz),
+    dayStart(resolved, parsed.tz),
+    parsed.tz
+  ).sub || null : null;
+  const heroCapTop = stacked ? leftBottom + Math.round(heroFont * 0.2) : padY + 0.28 * titleFont;
   const heroBaseline = heroCapTop + 0.72 * heroFont;
   const heroBlockBottom = heroBaseline + (subText ? heroFont * 0.28 + detailFont : 0);
   const contentBottom = Math.max(leftBottom, heroBlockBottom);
@@ -990,6 +1032,14 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
   );
   svg.attr("height", bannerH).attr("viewBox", `0 0 ${width} ${bannerH}`);
   bgRect.attr("height", bannerH);
+  const bandC = bandColors(
+    palette,
+    accent,
+    muted,
+    faint,
+    isDark,
+    parsed.fillMode
+  );
   if (hasBand && resolved !== null) {
     drawBand(
       svg,
@@ -997,10 +1047,11 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
       { left: leftX, top: bandTop, contentW: width - 2 * padX, height: BAND_H },
       now,
       resolved,
-      bandColors(palette, accent, muted, faint)
+      bandC
     );
   }
-  const value = svg.append("text").attr("class", "countdown-value").attr("x", width - padX).attr("y", heroBaseline).attr("text-anchor", "end").attr("dominant-baseline", "alphabetic").attr("fill", accent).attr("font-family", FONT_FAMILY).attr("font-size", heroFont).attr("font-weight", 800).attr("data-dgmo-countdown-units", parsed.units).attr("data-dgmo-countdown-round", parsed.round).attr("data-dgmo-countdown-fields", parsed.fields.join(",")).attr("data-dgmo-countdown-expired", parsed.expired).attr("aria-label", `${parsed.title ?? "Countdown"}: ${hero}`).text(hero);
+  const value = svg.append("text").attr("class", "countdown-value").attr("x", stacked ? leftX : width - padX).attr("y", heroBaseline).attr("text-anchor", stacked ? "start" : "end").attr("dominant-baseline", "alphabetic").attr("fill", accent).attr("font-family", FONT_FAMILY).attr("font-size", heroFont).attr("font-weight", 800).attr("data-dgmo-countdown-units", parsed.units).attr("data-dgmo-countdown-round", parsed.round).attr("data-dgmo-countdown-fields", parsed.fields.join(",")).attr("data-dgmo-countdown-expired", parsed.expired).attr("aria-label", `${parsed.title ?? "Countdown"}: ${hero}`);
+  paintClock(value, hero, Math.round(heroFont * 0.55), bandC.now);
   if (parsed.rule && resolved !== null) {
     value.attr("data-dgmo-countdown", new Date(resolved).toISOString());
   } else if (parsed.target) {
@@ -1009,6 +1060,7 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
   if (parsed.title) value.attr("data-dgmo-countdown-title", parsed.title);
   if (parsed.onDay) value.attr("data-dgmo-countdown-onday", parsed.onDay);
   if (parsed.hasTime) value.attr("data-dgmo-countdown-hastime", "1");
+  if (parsed.tz) value.attr("data-dgmo-countdown-tz", parsed.tz);
   if (parsed.since !== null) {
     value.attr("data-dgmo-countdown-since", parsed.since);
     value.attr(
@@ -1018,7 +1070,13 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
   }
   stampRecur(value, parsed);
   if (subText) {
-    svg.append("text").attr("x", width - padX).attr("y", heroBaseline + heroFont * 0.28 + detailFont).attr("text-anchor", "end").attr("dominant-baseline", "alphabetic").attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", detailFont).attr("font-weight", 500).attr("data-dgmo-countdown-detail", "").text(subText);
+    const detailSel = svg.append("text").attr("x", stacked ? leftX : width - padX).attr("y", heroBaseline + heroFont * 0.28 + detailFont).attr("text-anchor", stacked ? "start" : "end").attr("dominant-baseline", "alphabetic").attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", detailFont).attr("font-weight", 500).attr("data-dgmo-countdown-detail", "");
+    paintClock(
+      detailSel,
+      subText,
+      Math.round(detailFont * 0.66),
+      bandC.now
+    );
   }
 }
 function renderCountdownForExport(container, parsed, palette, isDark, exportDims) {
@@ -1029,4 +1087,4 @@ export {
   renderCountdown,
   renderCountdownForExport
 };
-//# sourceMappingURL=chunk-T5SHNNGP.js.map
+//# sourceMappingURL=chunk-FUPF2UYQ.js.map