@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/timer/index.js

@@ -0,0 +1,323 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { H as match, l as clampValue, n as createSplitProps, tt as isObject } from "../../utils-Cht5XaHf.js";
+import { n as setRafInterval, r as setRafTimeout } from "../../timers-BRyPrXIX.js";
+import { p as memo, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/timer/anatomy.ts
+const anatomy = createAnatomy("timer").parts("root", "area", "control", "item", "itemValue", "itemLabel", "actionTrigger", "separator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/timer/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `timer:${ctx.id}:root`;
+const getAreaId = (ctx) => ctx.ids?.area ?? `timer:${ctx.id}:area`;
+//#endregion
+//#region src/machines/timer/connect.ts
+const validActions = /* @__PURE__ */ new Set([
+	"start",
+	"pause",
+	"resume",
+	"reset",
+	"restart"
+]);
+function connect(service, normalize) {
+	const { state, send, computed, scope, prop } = service;
+	const translations = prop("translations");
+	const running = state.matches("running");
+	const paused = state.matches("paused");
+	const time = computed("time");
+	const formattedTime = computed("formattedTime");
+	return {
+		running,
+		paused,
+		time,
+		formattedTime,
+		progressPercent: computed("progressPercent"),
+		start() {
+			send({ type: "START" });
+		},
+		pause() {
+			send({ type: "PAUSE" });
+		},
+		resume() {
+			send({ type: "RESUME" });
+		},
+		reset() {
+			send({ type: "RESET" });
+		},
+		restart() {
+			send({ type: "RESTART" });
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				...parts.root.attrs
+			});
+		},
+		getAreaProps() {
+			return normalize.element({
+				role: "timer",
+				id: getAreaId(scope),
+				"aria-label": translations.areaLabel?.(time, formattedTime),
+				"aria-atomic": true,
+				...parts.area.attrs
+			});
+		},
+		getControlProps() {
+			return normalize.element({ ...parts.control.attrs });
+		},
+		getItemProps(props) {
+			const value = time[props.type];
+			return normalize.element({
+				...parts.item.attrs,
+				"data-type": props.type,
+				style: { "--value": value }
+			});
+		},
+		getItemLabelProps(props) {
+			return normalize.element({
+				...parts.itemLabel.attrs,
+				"data-type": props.type
+			});
+		},
+		getItemValueProps(props) {
+			return normalize.element({
+				...parts.itemValue.attrs,
+				"data-type": props.type
+			});
+		},
+		getSeparatorProps() {
+			return normalize.element({
+				"aria-hidden": true,
+				...parts.separator.attrs
+			});
+		},
+		getActionTriggerProps(props) {
+			if (!validActions.has(props.action)) throw new Error(`[wirekyt] Invalid action: ${props.action}. Must be one of: ${Array.from(validActions).join(", ")}`);
+			return normalize.button({
+				...parts.actionTrigger.attrs,
+				hidden: match(props.action, {
+					start: () => running || paused,
+					pause: () => !running,
+					reset: () => !running && !paused,
+					resume: () => !paused,
+					restart: () => false
+				}),
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: props.action.toUpperCase() });
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/timer/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		validateProps(props);
+		return {
+			interval: 1e3,
+			startMs: 0,
+			...props,
+			translations: {
+				areaLabel: (time, formattedTime) => `${time.days} days ${formattedTime.hours}:${formattedTime.minutes}:${formattedTime.seconds}`,
+				...props.translations
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("autoStart") ? "running" : "idle";
+	},
+	context({ prop, bindable }) {
+		return { currentMs: bindable(() => ({ defaultValue: prop("startMs") })) };
+	},
+	watch({ track, send, prop }) {
+		track([() => prop("startMs")], () => {
+			send({ type: "RESTART" });
+		});
+	},
+	on: { RESTART: {
+		target: "running:temp",
+		actions: ["resetTime"]
+	} },
+	computed: {
+		time: ({ context }) => msToTime(context.get("currentMs")),
+		formattedTime: ({ computed }) => formatTime(computed("time")),
+		progressPercent: memo(({ context, prop }) => [
+			context.get("currentMs"),
+			prop("targetMs"),
+			prop("startMs"),
+			prop("countdown")
+		], ([currentMs, targetMs = 0, startMs, countdown]) => {
+			return clampValue(countdown ? toPercent(currentMs, targetMs, startMs) : toPercent(currentMs, startMs, targetMs), 0, 1);
+		})
+	},
+	states: {
+		idle: { on: {
+			START: { target: "running" },
+			RESET: { actions: ["resetTime"] }
+		} },
+		"running:temp": {
+			effects: ["waitForNextTick"],
+			on: { CONTINUE: { target: "running" } }
+		},
+		running: {
+			effects: ["keepTicking"],
+			on: {
+				PAUSE: { target: "paused" },
+				TICK: [{
+					target: "idle",
+					guard: "hasReachedTarget",
+					actions: ["invokeOnComplete"]
+				}, { actions: ["updateTime", "invokeOnTick"] }],
+				RESET: { actions: ["resetTime"] }
+			}
+		},
+		paused: { on: {
+			RESUME: { target: "running" },
+			RESET: {
+				target: "idle",
+				actions: ["resetTime"]
+			}
+		} }
+	},
+	implementations: {
+		effects: {
+			keepTicking({ prop, send }) {
+				return setRafInterval(({ deltaMs }) => {
+					send({
+						type: "TICK",
+						deltaMs
+					});
+				}, prop("interval"));
+			},
+			waitForNextTick({ send }) {
+				return setRafTimeout(() => {
+					send({ type: "CONTINUE" });
+				}, 0);
+			}
+		},
+		actions: {
+			updateTime({ context, prop, event }) {
+				const sign = prop("countdown") ? -1 : 1;
+				const deltaMs = roundToInterval(event.deltaMs, prop("interval"));
+				context.set("currentMs", (prev) => {
+					const newValue = prev + sign * deltaMs;
+					let targetMs = prop("targetMs");
+					if (targetMs == null && prop("countdown")) targetMs = 0;
+					if (prop("countdown") && targetMs != null) return Math.max(newValue, targetMs);
+					else if (!prop("countdown") && targetMs != null) return Math.min(newValue, targetMs);
+					return newValue;
+				});
+			},
+			resetTime({ context, prop }) {
+				let targetMs = prop("targetMs");
+				if (targetMs == null && prop("countdown")) targetMs = 0;
+				context.set("currentMs", prop("startMs") ?? 0);
+			},
+			invokeOnTick({ context, prop, computed }) {
+				prop("onTick")?.({
+					value: context.get("currentMs"),
+					time: computed("time"),
+					formattedTime: computed("formattedTime")
+				});
+			},
+			invokeOnComplete({ prop }) {
+				prop("onComplete")?.();
+			}
+		},
+		guards: { hasReachedTarget: ({ context, prop }) => {
+			let targetMs = prop("targetMs");
+			if (targetMs == null && prop("countdown")) targetMs = 0;
+			if (targetMs == null) return false;
+			const currentMs = context.get("currentMs");
+			return prop("countdown") ? currentMs <= targetMs : currentMs >= targetMs;
+		} }
+	}
+});
+function msToTime(ms) {
+	const time = Math.max(0, ms);
+	const milliseconds = time % 1e3;
+	const seconds = Math.floor(time / 1e3) % 60;
+	const minutes = Math.floor(time / (1e3 * 60)) % 60;
+	const hours = Math.floor(time / (1e3 * 60 * 60)) % 24;
+	return {
+		days: Math.floor(time / (1e3 * 60 * 60 * 24)),
+		hours,
+		minutes,
+		seconds,
+		milliseconds
+	};
+}
+function toPercent(value, minValue, maxValue) {
+	const range = maxValue - minValue;
+	if (range === 0) return 0;
+	return (value - minValue) / range;
+}
+function padStart(num, size = 2) {
+	return num.toString().padStart(size, "0");
+}
+function roundToInterval(value, interval) {
+	return Math.floor(value / interval) * interval;
+}
+function formatTime(time) {
+	const { days, hours, minutes, seconds } = time;
+	return {
+		days: padStart(days),
+		hours: padStart(hours),
+		minutes: padStart(minutes),
+		seconds: padStart(seconds),
+		milliseconds: padStart(time.milliseconds, 3)
+	};
+}
+function validateProps(props) {
+	const { startMs, targetMs, countdown, interval } = props;
+	if (interval != null && (typeof interval !== "number" || interval <= 0)) throw new Error(`[timer] Invalid interval: ${interval}. Must be a positive number.`);
+	if (startMs != null && (typeof startMs !== "number" || startMs < 0)) throw new Error(`[timer] Invalid startMs: ${startMs}. Must be a non-negative number.`);
+	if (targetMs != null && (typeof targetMs !== "number" || targetMs < 0)) throw new Error(`[timer] Invalid targetMs: ${targetMs}. Must be a non-negative number.`);
+	if (countdown && startMs != null && targetMs != null) {
+		if (startMs <= targetMs) throw new Error(`[timer] Invalid countdown configuration: startMs (${startMs}) must be greater than targetMs (${targetMs}).`);
+	}
+	if (!countdown && startMs != null && targetMs != null) {
+		if (startMs >= targetMs) throw new Error(`[timer] Invalid stopwatch configuration: startMs (${startMs}) must be less than targetMs (${targetMs}).`);
+	}
+	if (countdown && targetMs == null && startMs != null && startMs <= 0) throw new Error(`[timer] Invalid countdown configuration: startMs (${startMs}) must be greater than 0 when no targetMs is provided.`);
+}
+//#endregion
+//#region src/machines/timer/parse.ts
+const segments = /* @__PURE__ */ new Set([
+	"days",
+	"hours",
+	"minutes",
+	"seconds"
+]);
+function isTimeSegment(date) {
+	return isObject(date) && Object.keys(date).some((key) => segments.has(key));
+}
+function parse(date) {
+	if (typeof date === "string") return new Date(date).getTime();
+	if (isTimeSegment(date)) {
+		const { days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 } = date;
+		return (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1e3 + milliseconds;
+	}
+	throw new Error("Invalid date");
+}
+//#endregion
+//#region src/machines/timer/props.ts
+const props = createProps()([
+	"autoStart",
+	"countdown",
+	"getRootNode",
+	"id",
+	"ids",
+	"interval",
+	"onComplete",
+	"onTick",
+	"startMs",
+	"targetMs",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, parse, props, splitProps };