timezone-overlap-map 0.1.1 → 0.2.0

package/README.md

@@ -2,9 +2,9 @@
 
 A web component that shows your timezone next to your visitor's on a world map, and how your working hours overlap. Built with React and TypeScript, shipped as a standard custom element, so it works in any framework or in plain HTML.
 
-- A world map with each zone's UTC-offset strip, a dot per city, and the live day/night line with the sun's position.
-- Both clocks and a zone picker that starts at the visitor's zone.
-- A 24-hour timeline in the visitor's local time, and the overlap as text for screen readers.
+- A world map read as your day, 00 to 24: your working hours stay put, the visitor's slide with their zone, and the overlap is labeled with its length ("5 h").
+- A dot per city and the live day/night line with the sun's position.
+- Both clocks, a zone picker that starts at the visitor's zone, and the overlap in the visitor's own time as text (also for screen readers).
 
 About 15 KB gzipped, map included, plus React.
 

package/dist/WorldMap.d.ts

@@ -1,5 +1,14 @@
-export declare function WorldMap({ homeZone, visitorZone, now }: {
+import { type Segment } from './overlap';
+export type WorldMapProps = {
     homeZone: string;
     visitorZone: string;
     now: Date;
-}): import("react").JSX.Element;
+    /** Working hours in the home zone's day (minutes), already split at midnight. */
+    home: Segment[];
+    visitor: Segment[];
+    both: Segment[];
+    nowMinute: number;
+    /** Written on the overlap, e.g. "4 h". */
+    label: string;
+};
+export declare function WorldMap({ homeZone, visitorZone, now, home, visitor, both, nowMinute, label }: WorldMapProps): import("react").JSX.Element;

package/dist/messages.d.ts

@@ -4,6 +4,8 @@ export type Messages = {
     /** `duration` is already formatted ("2 h 30 min"), `ranges` is in the visitor's local time. */
     overlap: (duration: string, home: string, ranges: string) => string;
     none: (home: string) => string;
+    /** Under the map, whose clock its hours follow. */
+    axis: (home: string) => string;
 };
 export declare const MESSAGES: {
     en: Messages;

package/dist/timezone-overlap-map.js

@@ -90,12 +90,14 @@ var b = {
 	en: {
 		zoneLabel: "Your time zone",
 		overlap: (e, t, n) => `${e} of overlap with ${t}: ${n} your time.`,
-		none: (e) => `No working-hours overlap with ${e}.`
+		none: (e) => `No working-hours overlap with ${e}.`,
+		axis: (e) => `${e}’s time`
 	},
 	es: {
 		zoneLabel: "Tu zona horaria",
 		overlap: (e, t, n) => `${e} en común con ${t}: ${n} en tu horario.`,
-		none: (e) => `No hay horario laboral en común con ${e}.`
+		none: (e) => `No hay horario laboral en común con ${e}.`,
+		axis: (e) => `hora de ${e}`
 	}
 };
 function x(e) {
@@ -675,22 +677,7 @@ function k(e, t = 2) {
 	return `${i}L360 ${r}Z`;
 }
 // src/WorldMap.tsx
-function A({ zone: e, date: t, side: n }) {
-	let r = u(e, t) / 60 * 15 + 180 - 7.5;
-	return /* @__PURE__ */ a("g", {
-		className: `band ${n}`,
-		children: [
-			r - 360,
-			r,
-			r + 360
-		].map((e) => /* @__PURE__ */ a("rect", {
-			x: e,
-			y: 0,
-			width: 15,
-			height: 142
-		}, e))
-	});
-}
+var A = (e) => e / s * 360;
 function j({ zone: e, side: t }) {
 	let n = C[e];
 	if (!n) return null;
@@ -702,8 +689,19 @@ function j({ zone: e, side: t }) {
 		r: 2.5
 	});
 }
-function M({ homeZone: e, visitorZone: t, now: r }) {
-	let i = n(() => k(r), [r]), s = D(r);
+function M({ segments: e, className: t }) {
+	return /* @__PURE__ */ a("g", {
+		className: `window ${t}`,
+		children: e.map((e) => /* @__PURE__ */ a("rect", {
+			x: A(e.start),
+			y: 0,
+			width: A(e.end - e.start),
+			height: 142
+		}, e.start))
+	});
+}
+function N({ homeZone: e, visitorZone: t, now: r, home: i, visitor: s, both: c, nowMinute: l, label: u }) {
+	let d = n(() => k(r), [r]), f = D(r), p = c.reduce((e, t) => !e || t.end - t.start > e.end - e.start ? t : e, void 0);
 	return /* @__PURE__ */ o("svg", {
 		className: "map",
 		viewBox: "0 0 360 142",
@@ -713,22 +711,24 @@ function M({ homeZone: e, visitorZone: t, now: r }) {
 				className: "land",
 				d: S
 			}),
-			/* @__PURE__ */ a(A, {
-				zone: e,
-				date: r,
-				side: "home"
-			}),
-			/* @__PURE__ */ a(A, {
-				zone: t,
-				date: r,
-				side: "visitor"
-			}),
 			/* @__PURE__ */ a("path", {
 				className: "night",
-				d: i
+				d
+			}),
+			/* @__PURE__ */ a(M, {
+				segments: i,
+				className: "home"
+			}),
+			/* @__PURE__ */ a(M, {
+				segments: s,
+				className: "visitor"
+			}),
+			/* @__PURE__ */ a(M, {
+				segments: c,
+				className: "both"
 			}),
 			/* @__PURE__ */ o("g", {
-				transform: `translate(${s.lon + 180} ${84 - s.lat})`,
+				transform: `translate(${f.lon + 180} ${84 - f.lat})`,
 				children: [/* @__PURE__ */ a("circle", {
 					className: "sun-halo",
 					r: 7
@@ -744,75 +744,105 @@ function M({ homeZone: e, visitorZone: t, now: r }) {
 			/* @__PURE__ */ a(j, {
 				zone: t,
 				side: "visitor"
+			}),
+			/* @__PURE__ */ a("line", {
+				className: "now",
+				x1: A(l),
+				x2: A(l),
+				y1: 0,
+				y2: 142
+			}),
+			p && /* @__PURE__ */ a("text", {
+				className: "label",
+				x: A((p.start + p.end) / 2),
+				y: 71,
+				children: u
 			})
 		]
 	});
 }
 // src/zones.ts
-function N(e) {
+function P(e) {
 	return (e.split("/").pop() ?? e).replaceAll("_", " ");
 }
-function P() {
+function F() {
 	return Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
-function F(e = []) {
+function I(e = []) {
 	let t = Intl.supportedValuesOf("timeZone");
 	return [.../* @__PURE__ */ new Set([...t, ...e])].sort();
 }
 // src/TimezoneOverlap.tsx
-function I(e = 6e4) {
+function L(e = 6e4) {
 	let [n, i] = r(() => /* @__PURE__ */ new Date());
 	return t(() => {
 		let t = setInterval(() => i(/* @__PURE__ */ new Date()), e);
 		return () => clearInterval(t);
 	}, [e]), n;
 }
-var L = (e, t, n) => new Intl.DateTimeFormat(n, {
+var R = (e, t, n) => new Intl.DateTimeFormat(n, {
 	timeZone: t,
 	hour: "2-digit",
 	minute: "2-digit",
 	hourCycle: "h23"
-}).format(e), R = (e) => {
+}).format(e), z = (e) => {
 	let t = c(e);
 	return `${String(Math.floor(t / 60)).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}`;
-}, z = (e) => {
+}, B = (e) => {
 	let t = Math.floor(e / 60), n = e % 60;
 	return n ? `${t} h ${n} min` : `${t} h`;
-}, B = (e) => h(e).map((e) => `${R(e.start)}–${R(e.end)}`).join(", ");
-function V({ segments: e, className: t }) {
-	return /* @__PURE__ */ a("div", {
-		className: "track",
-		children: e.map((e) => /* @__PURE__ */ a("span", {
-			className: t,
-			style: {
-				left: `${e.start / s * 100}%`,
-				width: `${(e.end - e.start) / s * 100}%`
-			}
-		}, e.start))
-	});
-}
-function H({ homeZone: e, homeLabel: t, visitorZone: i, workStart: l, workEnd: d, lang: p, onVisitorZoneChange: m }) {
-	let h = b[p], g = I(), [v, y] = r(i), x = n(() => F([e, v]), [e, v]), S = n(() => _(e, v, {
-		workStart: l,
-		workEnd: d,
-		date: g
+}, V = (e) => h(e).map((e) => `${z(e.start)}–${z(e.end)}`).join(", ");
+function H({ homeZone: e, homeLabel: t, visitorZone: i, workStart: s, workEnd: l, lang: d, onVisitorZoneChange: p }) {
+	let m = b[d], h = L(), [g, v] = r(i), y = n(() => I([e, g]), [e, g]), x = n(() => _(e, g, {
+		workStart: s,
+		workEnd: l,
+		date: h
 	}), [
 		e,
-		v,
+		g,
+		s,
 		l,
-		d,
-		g
-	]), C = u(v, g), w = c(g.getUTCHours() * 60 + g.getUTCMinutes() + C), T = t || N(e);
-	function E(e) {
-		y(e), m?.(e);
+		h
+	]), S = u(e, h), C = c(h.getUTCHours() * 60 + h.getUTCMinutes() + S), w = t || P(e), T = f(x.both, S), E = f(x.both, u(g, h));
+	function D(e) {
+		v(e), p?.(e);
 	}
 	return /* @__PURE__ */ o("div", {
 		className: "widget",
 		children: [
-			/* @__PURE__ */ a(M, {
-				homeZone: e,
-				visitorZone: v,
-				now: g
+			/* @__PURE__ */ o("div", {
+				className: "chart",
+				children: [
+					/* @__PURE__ */ a(N, {
+						homeZone: e,
+						visitorZone: g,
+						now: h,
+						home: f(x.home, S),
+						visitor: f(x.visitor, S),
+						both: T,
+						nowMinute: C,
+						label: B(x.minutes)
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "ticks",
+						"aria-hidden": "true",
+						children: [
+							0,
+							6,
+							12,
+							18,
+							24
+						].map((e) => /* @__PURE__ */ a("span", {
+							style: { left: `${e / 24 * 100}%` },
+							children: z(e * 60).slice(0, 2)
+						}, e))
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "axis-name",
+						"aria-hidden": "true",
+						children: m.axis(w)
+					})
+				]
 			}),
 			/* @__PURE__ */ o("div", {
 				className: "clocks",
@@ -823,9 +853,9 @@ function H({ homeZone: e, homeLabel: t, visitorZone: i, workStart: l, workEnd: d
 							className: "swatch home",
 							"aria-hidden": "true"
 						}),
-						T,
+						w,
 						" ",
-						/* @__PURE__ */ a("time", { children: L(g, e, p) })
+						/* @__PURE__ */ a("time", { children: R(h, e, d) })
 					]
 				}), /* @__PURE__ */ o("label", {
 					className: "clock",
@@ -835,63 +865,28 @@ function H({ homeZone: e, homeLabel: t, visitorZone: i, workStart: l, workEnd: d
 							"aria-hidden": "true"
 						}),
 						/* @__PURE__ */ a("select", {
-							"aria-label": h.zoneLabel,
-							value: v,
-							onChange: (e) => E(e.target.value),
-							children: x.map((e) => /* @__PURE__ */ a("option", {
+							"aria-label": m.zoneLabel,
+							value: g,
+							onChange: (e) => D(e.target.value),
+							children: y.map((e) => /* @__PURE__ */ a("option", {
 								value: e,
 								children: e.replaceAll("_", " ")
 							}, e))
 						}),
-						/* @__PURE__ */ a("time", { children: L(g, v, p) })
+						/* @__PURE__ */ a("time", { children: R(h, g, d) })
 					]
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				className: "timeline",
-				"aria-hidden": "true",
-				children: [
-					/* @__PURE__ */ a(V, {
-						segments: f(S.home, C),
-						className: "home"
-					}),
-					/* @__PURE__ */ a(V, {
-						segments: f(S.visitor, C),
-						className: "visitor"
-					}),
-					/* @__PURE__ */ a(V, {
-						segments: f(S.both, C),
-						className: "both"
-					}),
-					/* @__PURE__ */ a("span", {
-						className: "now",
-						style: { left: `${w / s * 100}%` }
-					}),
-					/* @__PURE__ */ a("div", {
-						className: "ticks",
-						children: [
-							0,
-							6,
-							12,
-							18,
-							24
-						].map((e) => /* @__PURE__ */ a("span", {
-							style: { left: `${e / 24 * 100}%` },
-							children: R(e * 60).slice(0, 2)
-						}, e))
-					})
-				]
-			}),
 			/* @__PURE__ */ a("p", {
 				className: "summary",
 				role: "status",
-				children: S.minutes > 0 ? h.overlap(z(S.minutes), T, B(f(S.both, C))) : h.none(T)
+				children: x.minutes > 0 ? m.overlap(B(x.minutes), w, V(E)) : m.none(w)
 			})
 		]
 	});
 }
 // src/styles.css?inline
-var U = ":host{--_bg:var(--tom-bg,transparent);--_fg:var(--tom-fg,CanvasText);--_muted:var(--tom-muted,color-mix(in oklch, var(--_fg) 55%, transparent));--_track:var(--tom-track,color-mix(in oklch, var(--_fg) 10%, transparent));--_home:var(--tom-home,oklch(72% .14 200));--_visitor:var(--tom-visitor,oklch(75% .15 70));--_both:var(--tom-overlap,oklch(72% .17 145));--_land:var(--tom-land,color-mix(in oklch, var(--_fg) 22%, transparent));--_night:var(--tom-night,oklch(0% 0 0/.42));--_sun:var(--tom-sun,oklch(97% .06 95));--_radius:var(--tom-radius,4px);font:var(--tom-font,inherit);color:var(--_fg);background:var(--_bg);display:block}@supports (color:light-dark(black, white)){:host{--_night:var(--tom-night,light-dark(oklch(30% .03 260/.16),oklch(0% 0 0/.42)));--_sun:var(--tom-sun,light-dark(oklch(78% .16 75),oklch(97% .06 95)))}}:host([hidden]){display:none}.widget{gap:1rem;display:grid;container-type:inline-size}.map{block-size:auto;inline-size:100%;display:block;overflow:hidden}.land{fill:var(--_land)}.band rect{opacity:.28}.band.home rect{fill:var(--_home)}.band.visitor rect{fill:var(--_visitor)}.night{fill:var(--_night)}.sun{fill:var(--_sun)}.sun-halo{fill:var(--_sun);opacity:.22}.dot{stroke:var(--_fg);stroke-width:.75px}.dot.home{fill:var(--_home)}.dot.visitor{fill:var(--_visitor)}@container (width<480px){.dot{r:4;stroke-width:1px}.sun{r:3.5}.sun-halo{r:9}}.clocks{flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;display:flex}.clock{align-items:center;gap:.5rem;margin:0;display:flex}.clock time{font-variant-numeric:tabular-nums;color:var(--_muted)}select{font:inherit;color:inherit;border:1px solid var(--_track);border-radius:var(--_radius);background:0 0;max-width:16rem;padding:.125rem .25rem}.swatch{border-radius:50%;block-size:.75rem;inline-size:.75rem}.timeline{gap:.25rem;padding-block-end:1.25rem;display:grid;position:relative}.track{border-radius:var(--_radius);background:var(--_track);block-size:.5rem;position:relative}.track>span{border-radius:var(--_radius);position:absolute;inset-block:0}.home{background:var(--_home)}.visitor{background:var(--_visitor)}.both{background:var(--_both)}.now{background:var(--_fg);inline-size:2px;position:absolute;inset-block:-.25rem 1rem;translate:-1px}.ticks{color:var(--_muted);font-size:.75em;position:absolute;inset-block-end:0;inset-inline:0}.ticks>span{position:absolute;translate:-50%}.ticks>span:first-child{translate:0}.ticks>span:last-child{translate:-100%}.summary{margin:0}", W = "timezone-overlap-map", G = [
+var U = ":host{--_bg:var(--tom-bg,transparent);--_fg:var(--tom-fg,CanvasText);--_muted:var(--tom-muted,color-mix(in oklch, var(--_fg) 55%, transparent));--_track:var(--tom-track,color-mix(in oklch, var(--_fg) 10%, transparent));--_home:var(--tom-home,oklch(72% .14 200));--_visitor:var(--tom-visitor,oklch(75% .15 70));--_both:var(--tom-overlap,oklch(72% .17 145));--_land:var(--tom-land,color-mix(in oklch, var(--_fg) 22%, transparent));--_night:var(--tom-night,oklch(0% 0 0/.42));--_sun:var(--tom-sun,oklch(97% .06 95));--_radius:var(--tom-radius,4px);font:var(--tom-font,inherit);color:var(--_fg);background:var(--_bg);display:block}@supports (color:light-dark(black, white)){:host{--_night:var(--tom-night,light-dark(oklch(30% .03 260/.16),oklch(0% 0 0/.42)));--_sun:var(--tom-sun,light-dark(oklch(78% .16 75),oklch(97% .06 95)))}}:host([hidden]){display:none}.widget{gap:1rem;display:grid;container-type:inline-size}.map{block-size:auto;inline-size:100%;display:block;overflow:hidden}.land{fill:var(--_land)}.window rect{opacity:.22}.window.home rect{fill:var(--_home)}.window.visitor rect{fill:var(--_visitor)}.window.both rect{fill:var(--_both);opacity:.5}.map .now{stroke:var(--_fg);stroke-width:.75px;stroke-dasharray:2 2}.label{fill:var(--_fg);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--tom-bg,Canvas);stroke-width:3px;stroke-linejoin:round;font-size:14px;font-weight:700}.night{fill:var(--_night)}.sun{fill:var(--_sun)}.sun-halo{fill:var(--_sun);opacity:.22}.dot{stroke:var(--_fg);stroke-width:.75px}.dot.home{fill:var(--_home)}.dot.visitor{fill:var(--_visitor)}@container (width<480px){.dot{r:4;stroke-width:1px}.sun{r:3.5}.sun-halo{r:9}}.clocks{flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;display:flex}.clock{align-items:center;gap:.5rem;margin:0;display:flex}.clock time{font-variant-numeric:tabular-nums;color:var(--_muted)}select{font:inherit;color:inherit;border:1px solid var(--_track);border-radius:var(--_radius);background:0 0;max-width:16rem;padding:.125rem .25rem}.swatch{border-radius:50%;block-size:.75rem;inline-size:.75rem}.swatch.home{background:var(--_home)}.swatch.visitor{background:var(--_visitor)}.ticks{block-size:1.5em;color:var(--_muted);font-size:.75em;position:relative}.ticks>span{position:absolute;translate:-50%}.ticks>span:first-child{translate:0}.ticks>span:last-child{translate:-100%}.axis-name{text-align:center;color:var(--_muted);margin:0;font-size:.75em}.summary{margin:0}", W = "timezone-overlap-map", G = [
 	"home-zone",
 	"home-label",
 	"visitor-zone",
@@ -932,7 +927,7 @@ var X = class extends K {
 		this.#e && this.#n();
 	}
 	#n() {
-		let t = this.getAttribute("home-zone"), n = this.getAttribute("visitor-zone"), r = n && l(n) ? n : P();
+		let t = this.getAttribute("home-zone"), n = this.getAttribute("visitor-zone"), r = n && l(n) ? n : F();
 		this.#e?.render(/* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(H, {
 			homeZone: t && l(t) ? t : "UTC",
 			homeLabel: this.getAttribute("home-label") ?? void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "timezone-overlap-map",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A web component that shows two timezones and how their working hours overlap",
   "license": "MIT",
   "author": "Santiago Palenque",