@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/timer/timer.presentation.d.ts

@@ -0,0 +1,248 @@
+import { Time, TimePart, TimerArgs, TimerContext, TimerState } from "./timer.state.js";
+import { TimerEvents } from "./timer.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+/**
+ * Timer definition: the DOM contract as data.
+ *
+ * The clock is not here: a `use:autoplay` action on the root owns the
+ * interval and reports `onTick`; the handler measures the span since the
+ * last send (`settled` captures the epoch per bridge).
+ */
+/** One row of the display: the unit, its caption, and whether a separator
+ * follows it. */
+export interface TimerUnit {
+  readonly type: TimePart;
+  readonly label: string;
+  readonly last: boolean;
+}
+/** An item part, as Zag types it: the unit the part renders. */
+export interface TimerItem {
+  readonly type: TimePart;
+}
+/** A separator part, addressed by the unit it follows so a hidden unit
+ * leaves no dangling separator behind it. `last` hides the trailing
+ * separator — `show=` on a second row root misplaces (framework bug), so
+ * the bag owns it. */
+export interface TimerSeparator {
+  readonly after: TimePart;
+  readonly last?: boolean | undefined;
+}
+export type TimerAction = "start" | "pause" | "resume" | "reset" | "restart";
+export interface TimerActionTrigger {
+  readonly action: TimerAction;
+}
+export interface TimerTickChange {
+  readonly value: number;
+  readonly time: Time;
+  readonly formattedTime: Time<string>;
+}
+type ScopeLike = ViewFor<TimerContext, TimerEvents, TimerState>;
+type SlotLike<R> = SlotViewFor<R, TimerContext, TimerEvents, TimerState>;
+export declare const def: {
+  name: string;
+  machine: (props: TimerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TimerContext, TimerEvents, TimerState>;
+  start: (raw: Record<string, unknown>) => "idle" | "running";
+  mounted: ({ root }: {
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+  }) => void;
+  settled: ({ root }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: TimerContext;
+      readonly state: TimerState;
+    };
+    readonly after: {
+      readonly context: TimerContext;
+      readonly state: TimerState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": TimerState;
+        "use:autoplay": {
+          interval: number;
+          enabled: boolean;
+          onTick: () => void;
+        };
+      };
+    };
+    area: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, TimerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<TimerEvents>, TimerState>) => {
+        id: string;
+        role: string;
+        "data-state": TimerState;
+        "aria-label": string;
+      };
+    };
+    progress: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        "data-state": TimerState;
+        style: {
+          width: string;
+        };
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        "data-state": TimerState;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: TimerContext) => readonly TimerUnit[];
+      attrs: (scope: SlotLike<Pick<TimerUnit, "type">>) => {
+        hidden?: boolean | undefined;
+        id: string;
+        "data-state": TimerState;
+        "data-type": TimePart;
+        "data-value": number;
+      };
+    };
+    itemValue: {
+      id: string;
+      indexes: (context: TimerContext) => readonly TimerUnit[];
+      attrs: (scope: SlotLike<Pick<TimerUnit, "type">>) => {
+        id: string;
+        "data-state": TimerState;
+        "data-type": TimePart;
+      };
+    };
+    itemLabel: {
+      id: string;
+      indexes: (context: TimerContext) => readonly TimerUnit[];
+      attrs: (scope: SlotLike<Pick<TimerUnit, "type">>) => {
+        id: string;
+        "data-state": TimerState;
+        "data-type": TimePart;
+      };
+    };
+    separator: {
+      indexes: (context: TimerContext) => readonly TimerUnit[];
+      attrs: (scope: SlotLike<TimerSeparator>) => {
+        "data-after": TimePart;
+        hidden: boolean;
+      };
+    };
+    actionTrigger: {
+      id: string;
+      indexes: () => readonly TimerActionTrigger[];
+      attrs: (scope: SlotLike<TimerActionTrigger>) => {
+        id: string;
+        type: string;
+        "data-action": TimerAction;
+        "data-state": TimerState;
+        hidden: boolean;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+  };
+  methods: {
+    getUnits: {
+      call: (context: TimerContext) => TimerUnit[];
+    };
+  };
+  commands: {
+    start: {
+      event: () => {
+        type: "START";
+      };
+    };
+    pause: {
+      event: () => {
+        type: "PAUSE";
+      };
+    };
+    resume: {
+      event: () => {
+        type: "RESUME";
+      };
+    };
+    reset: {
+      event: () => {
+        type: "RESET";
+      };
+    };
+    restart: {
+      event: () => {
+        type: "RESTART";
+      };
+    };
+  };
+  readers: {
+    running: {
+      read: (_context: TimerContext, state: TimerState) => state is "running";
+    };
+    paused: {
+      read: (_context: TimerContext, state: TimerState) => state is "paused";
+    };
+    time: {
+      read: (context: TimerContext) => {
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+      };
+    };
+    formattedTime: {
+      read: (context: TimerContext) => {
+        days: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        milliseconds: string;
+      };
+    };
+    progressPercent: {
+      read: (context: TimerContext) => number;
+    };
+  };
+  events: {
+    tick: {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly unknown[]) => {
+        value: number;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: TimerContext, after: TimerContext, states: {
+        readonly was: string;
+        readonly is: string;
+      } | undefined) => {
+        value: number;
+        time: Time<number>;
+        formattedTime: Time<string>;
+      } | null;
+    };
+    complete: {
+      prop: string;
+      watch: () => never[];
+      detail: () => {};
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: TimerContext, _after: TimerContext, states: {
+        readonly was: string;
+        readonly is: string;
+      } | undefined) => {} | null;
+    };
+  };
+};
+export type TimerApi = ApiOf<typeof def>;
+export declare const timer: import("@spinjs/runtime").DefinedComponent<TimerApi, TimerArgs>;
+export {};
+//# sourceMappingURL=timer.presentation.d.ts.map

package/dist/timer/timer.presentation.js

@@ -0,0 +1,265 @@
+import { formatTime, msToTime } from "./timer.state.js";
+import { timer as timer$1 } from "./timer.machine.js";
+import { ariaHidden, defineComponent, isRecord, liveRegion } from "@spinjs/runtime";
+// src/timer/timer.presentation.ts
+const timeOf = (context) => msToTime(context.currentMs);
+/** A countdown runs from full to empty, a stopwatch from empty to full. A
+* targetless stopwatch stays at zero progress (Zag's default target is
+* zero). */
+const progressOf = (context) => {
+	const { currentMs, startMs, targetMs, countdown } = context;
+	const target = targetMs ?? 0;
+	const range = target - startMs;
+	if (range === 0) return 0;
+	const fraction = countdown ? (target - currentMs) / range : (currentMs - startMs) / range;
+	return Math.min(Math.max(fraction, 0), 1);
+};
+/** The clock's epoch per bridge: the tick's delta is the span since the
+* last send, and `settled` runs after every transmit. */
+const epochByRoot = /* @__PURE__ */ new WeakMap();
+const separatorAfter = (slot) => {
+	if (!isRecord(slot)) return "seconds";
+	const after = slot["after"];
+	return after === "days" || after === "hours" || after === "minutes" || after === "seconds" || after === "milliseconds" ? after : "seconds";
+};
+const isLast = (slot) => isRecord(slot) && slot["last"] === true;
+const isAction = (value) => typeof value === "string" && VALID_ACTIONS[value] === true;
+/** An action trigger's action: the five valid verbs. Anything else is a
+* host bug, refused loudly — never a silent default. */
+const actionOf = (slot) => {
+	const action = isRecord(slot) ? slot["action"] : void 0;
+	if (isAction(action)) return action;
+	throw new Error(`[timer] Invalid action: ${typeof action === "string" ? action : ""}. Must be one of: ${Object.keys(VALID_ACTIONS).join(", ")}`);
+};
+/** Canonical rows: the `for` iterates these identities, and a countdown
+* crossing a day boundary swaps which array (never which row) is live. */
+const DAY_UNIT = {
+	type: "days",
+	label: "days",
+	last: false
+};
+const HOUR_UNIT = {
+	type: "hours",
+	label: "hrs",
+	last: false
+};
+const MINUTE_UNIT = {
+	type: "minutes",
+	label: "min",
+	last: false
+};
+const SECOND_UNIT = {
+	type: "seconds",
+	label: "sec",
+	last: true
+};
+const UNITS_WITH_DAYS = [
+	DAY_UNIT,
+	HOUR_UNIT,
+	MINUTE_UNIT,
+	SECOND_UNIT
+];
+const UNITS_WITHOUT_DAYS = [
+	HOUR_UNIT,
+	MINUTE_UNIT,
+	SECOND_UNIT
+];
+/** The days row shows when the current time has one, or the run's
+* start/target reaches a day — both fixed for the run, so no mid-run row
+* flip. */
+function showDays(context) {
+	const ctx = context;
+	if (timeOf(context).days > 0) return true;
+	const day = 864e5;
+	return ctx.startMs >= day || (ctx.targetMs ?? 0) >= day;
+}
+const ACTIONS = [
+	{ action: "start" },
+	{ action: "pause" },
+	{ action: "resume" },
+	{ action: "reset" },
+	{ action: "restart" }
+];
+/** Zag's `validActions`. */
+const VALID_ACTIONS = {
+	start: true,
+	pause: true,
+	resume: true,
+	reset: true,
+	restart: true
+};
+const def = {
+	name: "timer",
+	machine: (props, authored) => timer$1(props, authored),
+	start: (raw) => raw["autoStart"] === true ? "running" : "idle",
+	mounted: ({ root }) => {
+		epochByRoot.set(root(), Date.now());
+	},
+	settled: ({ root }) => {
+		epochByRoot.set(root(), Date.now());
+	},
+	parts: {
+		root: { attrs: (scope) => ({
+			"data-state": scope.state,
+			"use:autoplay": {
+				interval: scope.context.interval,
+				enabled: scope.state === "running",
+				onTick: () => {
+					const interval = scope.context.interval;
+					const epoch = epochByRoot.get(scope.root());
+					const elapsed = epoch === void 0 ? interval : Date.now() - epoch;
+					scope.send({
+						type: "TICK",
+						deltaMs: Math.max(elapsed, interval)
+					});
+				}
+			}
+		}) },
+		area: { attrs: (scope) => {
+			const t = timeOf(scope.context);
+			const f = formatTime(t);
+			return {
+				id: scope.id("area"),
+				role: "timer",
+				"data-state": scope.state,
+				"aria-label": `${t.days} days ${f.hours}:${f.minutes}:${f.seconds}`,
+				...liveRegion({ atomic: true })
+			};
+		} },
+		progress: { attrs: (scope) => ({
+			id: scope.id("progress"),
+			"data-state": scope.state,
+			style: { width: `${(progressOf(scope.context) * 100).toFixed(3)}%` }
+		}) },
+		control: { attrs: (scope) => ({
+			id: scope.id("control"),
+			"data-state": scope.state
+		}) }
+	},
+	slots: {
+		item: {
+			indexes: (context) => showDays(context) ? UNITS_WITH_DAYS : UNITS_WITHOUT_DAYS,
+			attrs: (scope) => {
+				const unit = scope.slot.type;
+				const value = timeOf(scope.context)[unit];
+				return {
+					id: scope.id("item", unit),
+					"data-state": scope.state,
+					"data-type": unit,
+					"data-value": value,
+					...unit === "days" && value === 0 ? { hidden: true } : {}
+				};
+			}
+		},
+		itemValue: {
+			id: "item-value",
+			indexes: (context) => showDays(context) ? UNITS_WITH_DAYS : UNITS_WITHOUT_DAYS,
+			attrs: (scope) => {
+				const unit = scope.slot.type;
+				return {
+					id: scope.id("itemValue", unit),
+					"data-state": scope.state,
+					"data-type": unit
+				};
+			}
+		},
+		itemLabel: {
+			id: "item-label",
+			indexes: (context) => showDays(context) ? UNITS_WITH_DAYS : UNITS_WITHOUT_DAYS,
+			attrs: (scope) => {
+				const unit = scope.slot.type;
+				return {
+					id: scope.id("itemLabel", unit),
+					"data-state": scope.state,
+					"data-type": unit
+				};
+			}
+		},
+		separator: {
+			indexes: (context) => showDays(context) ? UNITS_WITH_DAYS : UNITS_WITHOUT_DAYS,
+			attrs: (scope) => {
+				const slot = scope.slot;
+				const unit = separatorAfter(slot);
+				const followsHiddenDays = unit === "days" && timeOf(scope.context).days === 0;
+				return {
+					...ariaHidden(true),
+					"data-after": unit,
+					hidden: followsHiddenDays || isLast(slot)
+				};
+			}
+		},
+		actionTrigger: {
+			id: "action-trigger",
+			indexes: () => ACTIONS,
+			attrs: (scope) => {
+				const action = actionOf(scope.slot);
+				if (VALID_ACTIONS[action] !== true) throw new Error(`[timer] Invalid action: ${action}. Must be one of: ${Object.keys(VALID_ACTIONS).join(", ")}`);
+				const running = scope.state === "running";
+				const paused = scope.state === "paused";
+				const ctx = scope.context;
+				const atStart = ctx.countdown ? ctx.currentMs >= ctx.startMs : ctx.currentMs <= 0;
+				const hidden = action === "start" ? running || paused : action === "pause" ? !running : action === "resume" ? !paused : action === "reset" ? atStart && !running && !paused : false;
+				return {
+					id: scope.id("actionTrigger", action),
+					type: "button",
+					"data-action": action,
+					"data-state": scope.state,
+					hidden,
+					onClick: (event) => {
+						if (event.defaultPrevented) return;
+						scope.send({ type: action === "start" ? "START" : action === "pause" ? "PAUSE" : action === "resume" ? "RESUME" : action === "reset" ? "RESET" : "RESTART" });
+					}
+				};
+			}
+		}
+	},
+	methods: { getUnits: { call: (context) => {
+		return [...showDays(context) ? UNITS_WITH_DAYS : UNITS_WITHOUT_DAYS];
+	} } },
+	commands: {
+		start: { event: () => ({ type: "START" }) },
+		pause: { event: () => ({ type: "PAUSE" }) },
+		resume: { event: () => ({ type: "RESUME" }) },
+		reset: { event: () => ({ type: "RESET" }) },
+		restart: { event: () => ({ type: "RESTART" }) }
+	},
+	readers: {
+		running: { read: (_context, state) => state === "running" },
+		paused: { read: (_context, state) => state === "paused" },
+		time: { read: (context) => ({ ...timeOf(context) }) },
+		formattedTime: { read: (context) => ({ ...formatTime(timeOf(context)) }) },
+		progressPercent: { read: (context) => progressOf(context) }
+	},
+	events: {
+		tick: {
+			prop: "onTick",
+			watch: () => [],
+			detail: (watched) => {
+				const value = watched[0];
+				return { value: typeof value === "number" ? value : 0 };
+			},
+			select: (event, _before, after, states) => {
+				if (event.type !== "TICK" || states?.was !== "running") return null;
+				const time = msToTime(after.currentMs);
+				return {
+					value: after.currentMs,
+					time,
+					formattedTime: formatTime(time)
+				};
+			}
+		},
+		complete: {
+			prop: "onComplete",
+			watch: () => [],
+			detail: () => ({}),
+			select: (event, _before, _after, states) => {
+				if (event.type !== "TICK" || states?.was !== "running" || states?.is !== "idle") return null;
+				return {};
+			}
+		}
+	}
+};
+const timer = defineComponent(def);
+export { def, timer };
+
+//# sourceMappingURL=timer.presentation.js.map

package/dist/timer/timer.state.d.ts

@@ -0,0 +1,29 @@
+export type TimePart = "days" | "hours" | "minutes" | "seconds" | "milliseconds";
+export interface Time<T = number> {
+  readonly days: T;
+  readonly hours: T;
+  readonly minutes: T;
+  readonly seconds: T;
+  readonly milliseconds: T;
+}
+export type TimerState = "idle" | "running" | "paused";
+export interface TimerContext {
+  currentMs: number;
+  startMs: number;
+  targetMs: number | null;
+  countdown: boolean;
+  interval: number;
+}
+export interface TimerArgs {
+  readonly startMs?: string;
+  readonly targetMs?: string;
+  readonly countdown?: boolean;
+  readonly interval?: number;
+}
+export declare function parseMs(raw: unknown): number | undefined;
+export declare function validateTimer(startMs: number | undefined, targetMs: number | undefined, countdown: boolean, interval: number): void;
+export declare function initial(args: TimerArgs, authored: (name: string) => boolean): TimerContext;
+export declare function msToTime(ms: number): Time;
+export declare function formatTime(time: Time): Time<string>;
+export declare const effectiveTarget: (ctx: TimerContext) => number | null;
+//# sourceMappingURL=timer.state.d.ts.map

package/dist/timer/timer.state.js

@@ -0,0 +1,64 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/timer/timer.state.ts
+function parseMs(raw) {
+	if (typeof raw === "number") return Number.isFinite(raw) ? raw : void 0;
+	if (typeof raw !== "string") return void 0;
+	const trimmed = raw.trim();
+	if (trimmed.length === 0) return void 0;
+	const numeric = Number(trimmed);
+	if (!Number.isNaN(numeric)) return numeric;
+	const at = new Date(trimmed).getTime();
+	return Number.isNaN(at) ? void 0 : at;
+}
+function validateTimer(startMs, targetMs, countdown, interval) {
+	if (typeof interval !== "number" || interval <= 0) throw new Error(`[timer] Invalid interval: ${interval}. Must be a positive number.`);
+	if (startMs !== void 0 && (typeof startMs !== "number" || startMs < 0)) throw new Error(`[timer] Invalid startMs: ${startMs}. Must be a non-negative number.`);
+	if (targetMs !== void 0 && (typeof targetMs !== "number" || targetMs < 0)) throw new Error(`[timer] Invalid targetMs: ${targetMs}. Must be a non-negative number.`);
+	if (countdown && startMs !== void 0 && targetMs !== void 0 && startMs <= targetMs) throw new Error(`[timer] Invalid countdown configuration: startMs (${startMs}) must be greater than targetMs (${targetMs}).`);
+	if (!countdown && startMs !== void 0 && targetMs !== void 0 && startMs >= targetMs) throw new Error(`[timer] Invalid stopwatch configuration: startMs (${startMs}) must be less than targetMs (${targetMs}).`);
+	if (countdown && targetMs === void 0 && startMs !== void 0 && startMs <= 0) throw new Error(`[timer] Invalid countdown configuration: startMs (${startMs}) must be greater than 0 when no targetMs is provided.`);
+}
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const startMs = written("startMs") ? parseMs(args.startMs) : void 0;
+	const targetMs = written("targetMs") ? parseMs(args.targetMs) : void 0;
+	const countdown = written("countdown") ? args.countdown === true : false;
+	const rawInterval = written("interval") ? args.interval : void 0;
+	const interval = typeof rawInterval === "number" ? Math.trunc(rawInterval) : 1e3;
+	validateTimer(startMs, targetMs, countdown, interval);
+	const start = startMs ?? 0;
+	return {
+		startMs: start,
+		targetMs: targetMs ?? null,
+		countdown,
+		interval,
+		currentMs: start
+	};
+}
+const MS_PER_SECOND = 1e3;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+function msToTime(ms) {
+	const time = Math.max(0, ms);
+	return {
+		days: Math.floor(time / MS_PER_DAY),
+		hours: Math.floor(time / MS_PER_HOUR) % 24,
+		minutes: Math.floor(time / MS_PER_MINUTE) % 60,
+		seconds: Math.floor(time / MS_PER_SECOND) % 60,
+		milliseconds: time % MS_PER_SECOND
+	};
+}
+function formatTime(time) {
+	return {
+		days: time.days.toString().padStart(2, "0"),
+		hours: time.hours.toString().padStart(2, "0"),
+		minutes: time.minutes.toString().padStart(2, "0"),
+		seconds: time.seconds.toString().padStart(2, "0"),
+		milliseconds: time.milliseconds.toString().padStart(3, "0")
+	};
+}
+const effectiveTarget = (ctx) => ctx.targetMs !== null ? ctx.targetMs : ctx.countdown ? 0 : null;
+export { effectiveTarget, formatTime, initial, msToTime, parseMs, validateTimer };
+
+//# sourceMappingURL=timer.state.js.map

package/dist/timer/timer.transitions.d.ts

@@ -0,0 +1,11 @@
+import { TimerContext } from "./timer.state.js";
+import { TimerEvents } from "./timer.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type TimerAssign<K extends keyof TimerEvents = keyof TimerEvents> = AssignFor<TimerContext, TimerEvents, K>;
+export declare const resetTime: TimerAssign<"RESTART" | "RESET">;
+export declare const restartChanged: GuardFor<TimerContext, TimerEvents, "RESTART">;
+export declare const setCurrentMs: TimerAssign<"CURRENT_MS.SET">;
+export declare const isComplete: GuardFor<TimerContext, TimerEvents>;
+export declare const tick: TimerAssign<"TICK">;
+export {};
+//# sourceMappingURL=timer.transitions.d.ts.map

package/dist/timer/timer.transitions.js

@@ -0,0 +1,35 @@
+import { effectiveTarget, parseMs } from "./timer.state.js";
+// src/timer/timer.transitions.ts
+const resetTime = (ctx, event) => {
+	if (event.type === "RESTART" && event.startMs !== void 0) {
+		const start = parseMs(event.startMs) ?? 0;
+		return {
+			startMs: start,
+			currentMs: start
+		};
+	}
+	return { currentMs: ctx.startMs };
+};
+const restartChanged = (ctx, event) => {
+	if (event.startMs === void 0) return true;
+	return (parseMs(event.startMs) ?? 0) !== ctx.startMs;
+};
+const setCurrentMs = (_ctx, event) => {
+	const currentMs = parseMs(event.currentMs);
+	return currentMs === void 0 ? {} : { currentMs };
+};
+const isComplete = (ctx) => {
+	const target = effectiveTarget(ctx);
+	if (target === null) return false;
+	return ctx.countdown ? ctx.currentMs <= target : ctx.currentMs >= target;
+};
+const tick = (ctx, event) => {
+	const deltaMs = Math.floor(event.deltaMs / ctx.interval) * ctx.interval;
+	const next = ctx.currentMs + (ctx.countdown ? -1 : 1) * deltaMs;
+	const target = effectiveTarget(ctx);
+	if (target === null) return { currentMs: next };
+	return { currentMs: ctx.countdown ? Math.max(next, target) : Math.min(next, target) };
+};
+export { isComplete, resetTime, restartChanged, setCurrentMs, tick };
+
+//# sourceMappingURL=timer.transitions.js.map

package/dist/toast/examples/action.html

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Update ready"
+  data-description="Restart to apply." data-type="info" data-duration="8000"
+  data-action="Restart"
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+      <button
+       class="secondary s-sm mt-2"
+       {...machine.getActionTriggerProps(row)}>{row.action}</button>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>