@elizaos/plugin-simple-views 2.0.3-beta.5

package/dist/views/bundle.js

@@ -0,0 +1,1159 @@
+import { AgentButton as e, useAgentElement as t } from "@elizaos/ui/agent-surface";
+import { CalendarDays as n, ChevronLeft as r, ChevronRight as i, Plus as a, Settings as o, StickyNote as s, Trash2 as c } from "lucide-react";
+import { useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/storage.ts
+var g = "eliza:simple-views:update", _ = "eliza.simpleViews.notes.v2", v = "eliza.simpleViews.calendar.events.v2", y = "eliza.simpleViews.calendar.cursor.v2", b = [], x = [], S = /^(\d{4})-(\d{2})-(\d{2})$/, C = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Map();
+function T() {
+	if (typeof window > "u") return null;
+	try {
+		return window.localStorage ?? null;
+	} catch {
+		return null;
+	}
+}
+function E(e) {
+	typeof window > "u" || window.dispatchEvent(new CustomEvent(g, { detail: { key: e } }));
+}
+function D(e, t, n) {
+	let r = T();
+	if (!r) {
+		let r = C.get(e);
+		return n(r) ? r : t;
+	}
+	try {
+		let i = r.getItem(e);
+		if (!i) return t;
+		let a = JSON.parse(i);
+		return n(a) ? a : t;
+	} catch {
+		return t;
+	}
+}
+function O(e, t) {
+	let n = T();
+	if (!n) {
+		C.set(e, t);
+		return;
+	}
+	try {
+		n.setItem(e, JSON.stringify(t)), E(e);
+	} catch {}
+}
+function k(e, t) {
+	let n = T();
+	if (!n) return w.get(e) ?? t;
+	try {
+		return n.getItem(e) ?? t;
+	} catch {
+		return t;
+	}
+}
+function ee(e, t) {
+	let n = T();
+	if (!n) {
+		w.set(e, t);
+		return;
+	}
+	try {
+		n.setItem(e, t), E(e);
+	} catch {}
+}
+function A(e) {
+	return !!e && typeof e == "object" && !Array.isArray(e);
+}
+function j(e) {
+	return e === "green" || e === "rose" || e === "pink" || e === "slate" ? e === "pink" ? "rose" : e : "yellow";
+}
+function M(e) {
+	return A(e) ? typeof e.id == "string" && typeof e.title == "string" && typeof e.body == "string" && typeof e.createdAt == "string" && typeof e.updatedAt == "string" && j(e.color) === e.color : !1;
+}
+function te(e) {
+	return A(e) ? typeof e.id == "string" && typeof e.title == "string" && V(e.date) === e.date && typeof e.time == "string" && typeof e.notes == "string" && typeof e.createdAt == "string" && j(e.color) === e.color : !1;
+}
+function N(e) {
+	return Array.isArray(e) && e.every(M);
+}
+function P(e) {
+	return Array.isArray(e) && e.every(te);
+}
+function F() {
+	return D(_, b, N);
+}
+function I(e) {
+	O(_, e);
+}
+function L() {
+	return D(v, x, P);
+}
+function R(e) {
+	O(v, e);
+}
+function z() {
+	return (/* @__PURE__ */ new Date()).toISOString();
+}
+function ne(e) {
+	let t = globalThis.crypto;
+	return typeof t?.randomUUID == "function" ? `${e}-${t.randomUUID()}` : `${e}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function B(e = /* @__PURE__ */ new Date()) {
+	return e.toISOString().slice(0, 10);
+}
+function V(e) {
+	if (typeof e != "string") return null;
+	let t = S.exec(e.trim());
+	if (!t) return null;
+	let n = Number(t[1]), r = Number(t[2]), i = Number(t[3]);
+	if (n < 1e3 || r < 1 || r > 12 || i < 1 || i > 31) return null;
+	let a = new Date(Date.UTC(n, r - 1, i));
+	return a.getUTCFullYear() !== n || a.getUTCMonth() !== r - 1 || a.getUTCDate() !== i ? null : a.toISOString().slice(0, 10);
+}
+function H() {
+	return V(k("eliza.simpleViews.calendar.cursor.v2", "")) ?? B();
+}
+function U(e) {
+	ee(y, e);
+}
+function W() {
+	return {
+		notes: F(),
+		events: L(),
+		selectedDate: H()
+	};
+}
+function re(e, t = {}) {
+	let n = F().length > 0 || L().length > 0;
+	t.preserveLocalDataOnEmpty && n && e.notes.length === 0 && e.events.length === 0 || (I(e.notes), R(e.events), U(e.selectedDate));
+}
+function ie(e) {
+	return A(e) ? N(e.notes) && P(e.events) && V(e.selectedDate) === e.selectedDate : !1;
+}
+//#endregion
+//#region src/simple-views.interact.ts
+function G(e, t) {
+	let n = e?.[t];
+	return typeof n == "string" ? n.trim() : "";
+}
+function K(e) {
+	return e.toLowerCase().replace(/\s+/g, " ").trim();
+}
+function ae(e) {
+	return e.length === 0 ? "No sticky notes yet." : e.map((e) => `${e.title}: ${e.body}`).join("\n");
+}
+function oe(e, t) {
+	let n = t ? e.filter((e) => e.date === t) : e;
+	return n.length === 0 ? t ? `No calendar events for ${t}.` : "No calendar events yet." : n.map((e) => `${e.date} ${e.time} - ${e.title}${e.notes ? `: ${e.notes}` : ""}`).join("\n");
+}
+function se(e, t) {
+	let n = K(t);
+	if (!n) return null;
+	let r = e.filter((e) => K(e.id) === n || K(e.title) === n);
+	if (r.length === 1) return r[0];
+	if (r.length > 1) return { ambiguous: r };
+	let i = e.filter((e) => K(e.title).includes(n));
+	if (i.length === 1) return i[0];
+	if (i.length > 1) return { ambiguous: i };
+	let a = e.filter((e) => K(e.body).includes(n));
+	return a.length === 1 ? a[0] : a.length > 1 ? { ambiguous: a } : null;
+}
+function q(e) {
+	return {
+		...e,
+		state: W()
+	};
+}
+async function ce(e, t) {
+	if (e === "get-notes") {
+		let e = F();
+		return q({
+			success: !0,
+			text: ae(e),
+			notes: e
+		});
+	}
+	if (e === "create-note") {
+		let e = z(), n = {
+			id: ne("note"),
+			title: G(t, "title") || "Untitled",
+			body: G(t, "body") || G(t, "content") || "New note",
+			color: j(t?.color),
+			createdAt: e,
+			updatedAt: e
+		};
+		return I([n, ...F()]), q({
+			success: !0,
+			text: `Created sticky note "${n.title}".`,
+			created: !0,
+			note: n
+		});
+	}
+	if (e === "delete-note") {
+		let e = G(t, "id") || G(t, "title") || G(t, "query") || G(t, "name");
+		if (!e) return q({
+			success: !1,
+			text: "Note id, title, or query is required.",
+			deleted: !1,
+			reason: "target is required"
+		});
+		let n = F(), r = se(n, e);
+		return r ? "ambiguous" in r ? q({
+			success: !1,
+			text: `"${e}" matches multiple sticky notes: ${r.ambiguous.map((e) => e.title).join(", ")}.`,
+			deleted: !1,
+			target: e,
+			candidates: r.ambiguous
+		}) : (I(n.filter((e) => e.id !== r.id)), q({
+			success: !0,
+			text: `Deleted sticky note "${r.title}".`,
+			deleted: !0,
+			id: r.id,
+			note: r
+		})) : q({
+			success: !1,
+			text: `No sticky note found for "${e}".`,
+			deleted: !1,
+			target: e
+		});
+	}
+	if (e === "clear-notes") return I([]), q({
+		success: !0,
+		text: "Cleared all sticky notes.",
+		cleared: !0
+	});
+	if (e === "get-calendar-state") {
+		let e = G(t, "date"), n = e ? V(e) : H();
+		if (!n) return q({
+			success: !1,
+			text: "Date must be YYYY-MM-DD.",
+			reason: "date must be YYYY-MM-DD"
+		});
+		let r = L();
+		return q({
+			success: !0,
+			text: oe(r, n),
+			selectedDate: n,
+			events: r
+		});
+	}
+	if (e === "select-calendar-date") {
+		let e = V(G(t, "date"));
+		return e ? (U(e), q({
+			success: !0,
+			text: `Selected ${e}.`,
+			selected: !0,
+			date: e
+		})) : q({
+			success: !1,
+			text: "Date must be YYYY-MM-DD.",
+			selected: !1,
+			reason: "date must be YYYY-MM-DD"
+		});
+	}
+	if (e === "create-calendar-event") {
+		let e = G(t, "date"), n = e ? V(e) : H() || B();
+		if (!n) return q({
+			success: !1,
+			text: "Date must be YYYY-MM-DD.",
+			created: !1,
+			reason: "date must be YYYY-MM-DD"
+		});
+		let r = {
+			id: ne("event"),
+			title: G(t, "title") || "Untitled event",
+			date: n,
+			time: G(t, "time") || "09:00",
+			notes: G(t, "notes"),
+			color: j(t?.color),
+			createdAt: z()
+		};
+		return R([...L(), r]), U(n), q({
+			success: !0,
+			text: `Created calendar event "${r.title}" for ${r.date} at ${r.time}.`,
+			created: !0,
+			event: r
+		});
+	}
+	if (e === "delete-calendar-event") {
+		let e = G(t, "id");
+		if (!e) return q({
+			success: !1,
+			text: "Event id is required.",
+			deleted: !1,
+			reason: "id is required"
+		});
+		let n = L(), r = n.find((t) => t.id === e);
+		return r ? (R(n.filter((t) => t.id !== e)), q({
+			success: !0,
+			text: `Deleted calendar event "${r.title}".`,
+			deleted: !0,
+			id: e,
+			event: r
+		})) : q({
+			success: !1,
+			text: `No calendar event found for "${e}".`,
+			deleted: !1,
+			id: e
+		});
+	}
+	throw Error(`Simple views do not support capability "${e}".`);
+}
+//#endregion
+//#region src/ui.tsx
+var le = [
+	"yellow",
+	"green",
+	"rose",
+	"slate"
+], J = {
+	yellow: {
+		background: "#fff5bf",
+		borderColor: "#d9b84b"
+	},
+	green: {
+		background: "#dff6df",
+		borderColor: "#7dbb77"
+	},
+	rose: {
+		background: "#ffe4ec",
+		borderColor: "#d991aa"
+	},
+	slate: {
+		background: "#e8edf2",
+		borderColor: "#9aa8b5"
+	}
+}, ue = {
+	yellow: "#b88719",
+	green: "#2f7d46",
+	rose: "#b84065",
+	slate: "#586879"
+}, de = {
+	display: "flex",
+	flexDirection: "column",
+	minHeight: "100%",
+	color: "#15171c",
+	background: "#f6f7f4",
+	fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+}, fe = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: 16,
+	padding: "18px 20px 14px",
+	borderBottom: "1px solid #dde1d8",
+	background: "#ffffff"
+}, pe = {
+	display: "flex",
+	alignItems: "center",
+	gap: 10,
+	minWidth: 0
+}, me = {
+	display: "grid",
+	placeItems: "center",
+	width: 34,
+	height: 34,
+	border: "1px solid #d6dbd2",
+	borderRadius: 8,
+	background: "#f2f4ef",
+	color: "#263326"
+}, he = {
+	margin: 0,
+	fontSize: 20,
+	lineHeight: "26px",
+	fontWeight: 700,
+	letterSpacing: 0
+}, ge = {
+	margin: 0,
+	color: "#60695d",
+	fontSize: 13,
+	lineHeight: "18px"
+}, _e = {
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	gap: 8,
+	justifyContent: "flex-end"
+}, Y = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: 7,
+	minHeight: 34,
+	border: "1px solid #c9d0c4",
+	borderRadius: 8,
+	padding: "0 12px",
+	background: "#ffffff",
+	color: "#1f271e",
+	fontSize: 13,
+	fontWeight: 600,
+	cursor: "pointer"
+}, X = {
+	...Y,
+	width: 34,
+	padding: 0
+}, ve = {
+	...Y,
+	borderColor: "#476b3b",
+	background: "#476b3b",
+	color: "#ffffff"
+}, ye = {
+	width: "100%",
+	minHeight: 36,
+	border: "1px solid #c9d0c4",
+	borderRadius: 8,
+	padding: "8px 10px",
+	background: "#ffffff",
+	color: "#15171c",
+	font: "inherit",
+	fontSize: 14,
+	lineHeight: "20px",
+	boxSizing: "border-box"
+}, be = {
+	border: "1px solid #dde1d8",
+	borderRadius: 8,
+	background: "#ffffff"
+};
+async function xe() {
+	if (typeof fetch != "function") return null;
+	try {
+		let e = await fetch("/api/simple-views/state", { headers: { Accept: "application/json" } });
+		if (!e.ok) return null;
+		let t = await e.json();
+		return ie(t) ? t : null;
+	} catch {
+		return null;
+	}
+}
+async function Z(e, t) {
+	if (typeof fetch == "function") try {
+		let n = await fetch("/api/simple-views/interact", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json"
+			},
+			body: JSON.stringify({
+				capability: e,
+				params: t
+			})
+		});
+		if (n.ok) {
+			let e = await n.json();
+			if (e && typeof e == "object" && "state" in e && ie(e.state)) {
+				re(e.state);
+				return;
+			}
+		}
+	} catch {}
+	await ce(e, t);
+}
+function Se() {
+	let [e, t] = p(() => W());
+	return u(() => {
+		let e = () => t(W()), n = () => e(), r = () => e(), i = (t) => {
+			let n = t.detail;
+			(n?.type === "simple-views:update" || n?.type === "view:notes:updated" || n?.type === "view:simple-calendar:updated") && e();
+		};
+		return window.addEventListener(g, r), window.addEventListener("storage", n), window.addEventListener("elizaos-view-event", i), xe().then((t) => {
+			t && (re(t, { preserveLocalDataOnEmpty: !0 }), e());
+		}), () => {
+			window.removeEventListener(g, r), window.removeEventListener("storage", n), window.removeEventListener("elizaos-view-event", i);
+		};
+	}, []), e;
+}
+function Q({ id: e, label: n, value: r, onFill: i, group: a, placeholder: o, style: s }) {
+	let { ref: c, agentProps: l } = t({
+		id: e,
+		label: n,
+		role: "text-input",
+		group: a,
+		fillable: !0,
+		getValue: () => r,
+		onFill: i
+	});
+	return /* @__PURE__ */ m("input", {
+		ref: c,
+		"aria-label": n,
+		...l,
+		value: r,
+		onChange: (e) => i(e.target.value),
+		placeholder: o,
+		style: {
+			...ye,
+			...s
+		}
+	});
+}
+function Ce({ id: e, label: n, value: r, onFill: i, group: a }) {
+	let { ref: o, agentProps: s } = t({
+		id: e,
+		label: n,
+		role: "textarea",
+		group: a,
+		fillable: !0,
+		getValue: () => r,
+		onFill: i
+	});
+	return /* @__PURE__ */ m("textarea", {
+		ref: o,
+		"aria-label": n,
+		...s,
+		value: r,
+		onChange: (e) => i(e.target.value),
+		rows: 5,
+		style: {
+			...ye,
+			minHeight: 112,
+			resize: "vertical"
+		}
+	});
+}
+function we() {
+	typeof window > "u" || (window.history.pushState(null, "", "/settings"), window.dispatchEvent(new PopStateEvent("popstate")));
+}
+function Te({ note: e, onDelete: n }) {
+	let r = t({
+		id: `note-card-${e.id}`,
+		label: `Note: ${e.title}`,
+		role: "card",
+		group: "notes-list",
+		description: e.body,
+		status: e.color
+	}), i = t({
+		id: `delete-note-${e.id}`,
+		label: `Delete note ${e.title}`,
+		role: "button",
+		group: "notes-list",
+		onActivate: () => n(e.id)
+	});
+	return /* @__PURE__ */ h("div", {
+		ref: r.ref,
+		...r.agentProps,
+		style: {
+			...J[e.color],
+			minHeight: 180,
+			border: "1px solid",
+			borderRadius: 8,
+			padding: 16,
+			display: "flex",
+			flexDirection: "column",
+			gap: 12,
+			boxShadow: "0 8px 20px rgba(31, 39, 30, 0.08)"
+		},
+		children: [/* @__PURE__ */ h("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				gap: 10
+			},
+			children: [/* @__PURE__ */ m("h2", {
+				style: {
+					margin: 0,
+					fontSize: 16,
+					lineHeight: "22px",
+					fontWeight: 700,
+					overflowWrap: "anywhere"
+				},
+				children: e.title
+			}), /* @__PURE__ */ m("button", {
+				ref: i.ref,
+				type: "button",
+				...i.agentProps,
+				onClick: () => n(e.id),
+				style: {
+					...X,
+					width: 30,
+					height: 30,
+					minHeight: 30,
+					background: "rgba(255,255,255,0.68)"
+				},
+				title: "Delete note",
+				children: /* @__PURE__ */ m(c, {
+					size: 16,
+					"aria-hidden": !0
+				})
+			})]
+		}), /* @__PURE__ */ m("p", {
+			style: {
+				margin: 0,
+				color: "#253025",
+				fontSize: 14,
+				lineHeight: "21px",
+				whiteSpace: "pre-wrap",
+				overflowWrap: "anywhere"
+			},
+			children: e.body
+		})]
+	});
+}
+function Ee() {
+	let { notes: t } = Se(), [n, r] = p(""), [i, c] = p(""), [u, d] = p("yellow"), g = f(n), _ = f(i), v = l((e) => {
+		g.current = e, r(e);
+	}, []), y = l((e) => {
+		_.current = e, c(e);
+	}, []), b = l(async () => {
+		let e = g.current.trim(), t = _.current.trim();
+		!e && !t || (await Z("create-note", {
+			title: e || "Untitled",
+			body: t || "New note",
+			color: u
+		}), v(""), y(""));
+	}, [
+		u,
+		y,
+		v
+	]), x = l((e) => {
+		Z("delete-note", { id: e });
+	}, []), S = l(() => {
+		Z("clear-notes");
+	}, []);
+	return /* @__PURE__ */ h("main", {
+		"data-testid": "simple-notes-view",
+		style: de,
+		children: [/* @__PURE__ */ h("header", {
+			style: fe,
+			children: [/* @__PURE__ */ h("div", {
+				style: pe,
+				children: [/* @__PURE__ */ m("div", {
+					style: me,
+					children: /* @__PURE__ */ m(s, {
+						size: 18,
+						"aria-hidden": !0
+					})
+				}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
+					style: he,
+					children: "Notes"
+				}), /* @__PURE__ */ h("p", {
+					style: ge,
+					children: [t.length, " sticky notes"]
+				})] })]
+			}), /* @__PURE__ */ h("div", {
+				style: _e,
+				children: [/* @__PURE__ */ m(e, {
+					agentId: "notes-clear",
+					agentLabel: "Clear notes",
+					onClick: S,
+					style: Y,
+					children: "Clear"
+				}), /* @__PURE__ */ m(e, {
+					agentId: "notes-open-settings",
+					agentLabel: "Open settings",
+					onClick: we,
+					style: X,
+					title: "Open settings",
+					children: /* @__PURE__ */ m(o, {
+						size: 16,
+						"aria-hidden": !0
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ h("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 1fr))",
+				gap: 18,
+				padding: 20,
+				alignItems: "start"
+			},
+			children: [/* @__PURE__ */ h("form", {
+				onSubmit: (e) => {
+					e.preventDefault(), b();
+				},
+				style: {
+					...be,
+					display: "flex",
+					flexDirection: "column",
+					gap: 12,
+					padding: 16
+				},
+				children: [
+					/* @__PURE__ */ m(Q, {
+						id: "note-title",
+						label: "Note title",
+						value: n,
+						onFill: v,
+						placeholder: "Title",
+						group: "note-compose"
+					}),
+					/* @__PURE__ */ m(Ce, {
+						id: "note-body",
+						label: "Note body",
+						value: i,
+						onFill: y,
+						group: "note-compose"
+					}),
+					/* @__PURE__ */ m("div", {
+						style: {
+							display: "flex",
+							gap: 8,
+							flexWrap: "wrap"
+						},
+						children: le.map((t) => /* @__PURE__ */ m(e, {
+							agentId: `note-color-${t}`,
+							agentLabel: `Set note color ${t}`,
+							agentRole: "toggle",
+							agentStatus: u === t ? "active" : void 0,
+							onClick: () => d(t),
+							style: {
+								...Y,
+								background: J[t].background,
+								borderColor: u === t ? "#15171c" : J[t].borderColor,
+								minWidth: 72,
+								textTransform: "capitalize"
+							},
+							children: t
+						}, t))
+					}),
+					/* @__PURE__ */ h(e, {
+						agentId: "add-note",
+						agentLabel: "Add note",
+						onClick: b,
+						style: ve,
+						children: [/* @__PURE__ */ m(a, {
+							size: 16,
+							"aria-hidden": !0
+						}), "Add note"]
+					})
+				]
+			}), /* @__PURE__ */ m("section", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+					gap: 16
+				},
+				"aria-label": "Sticky note wall",
+				children: t.map((e) => /* @__PURE__ */ m(Te, {
+					note: e,
+					onDelete: x
+				}, e.id))
+			})]
+		})]
+	});
+}
+function $(e) {
+	return B(e);
+}
+function De(e) {
+	let [t, n, r] = (V(e) ?? B()).split("-").map((e) => Number(e));
+	return new Date(Date.UTC(t, n - 1, r));
+}
+function Oe(e) {
+	return new Intl.DateTimeFormat("en", {
+		month: "long",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(e);
+}
+function ke(e) {
+	return new Date(Date.UTC(e.getUTCFullYear(), e.getUTCMonth(), 1));
+}
+function Ae(e, t) {
+	return new Date(Date.UTC(e.getUTCFullYear(), e.getUTCMonth() + t, 1));
+}
+function je(e) {
+	let t = ke(e), n = t.getUTCDay(), r = new Date(t);
+	return r.setUTCDate(t.getUTCDate() - n), Array.from({ length: 42 }, (e, t) => {
+		let n = new Date(r);
+		return n.setUTCDate(r.getUTCDate() + t), n;
+	});
+}
+function Me(e, t) {
+	return e.filter((e) => e.date === t).sort((e, t) => `${e.time} ${e.title}`.localeCompare(`${t.time} ${t.title}`));
+}
+function Ne({ day: e, selectedDate: n, cursorMonth: r, events: i, onSelect: a }) {
+	let o = $(e), s = o === n, c = e.getUTCMonth() === r, l = Me(i, o), u = t({
+		id: `calendar-day-${o}`,
+		label: `Select ${o}`,
+		role: "button",
+		group: "simple-calendar-grid",
+		description: l.length > 0 ? `${l.length} event${l.length === 1 ? "" : "s"}` : "No events",
+		status: s ? "selected" : c ? "current-month" : "outside-month",
+		onActivate: () => a(o)
+	});
+	return /* @__PURE__ */ h("button", {
+		ref: u.ref,
+		type: "button",
+		...u.agentProps,
+		onClick: () => a(o),
+		style: {
+			minWidth: 0,
+			minHeight: 78,
+			border: s ? "2px solid #476b3b" : "1px solid #dde1d8",
+			borderRadius: 8,
+			padding: 6,
+			background: c ? "#ffffff" : "#eef1eb",
+			color: c ? "#15171c" : "#687264",
+			textAlign: "left",
+			cursor: "pointer",
+			display: "flex",
+			flexDirection: "column",
+			gap: 6
+		},
+		children: [
+			/* @__PURE__ */ m("span", {
+				style: {
+					fontWeight: 700,
+					fontSize: 13
+				},
+				children: e.getUTCDate()
+			}),
+			/* @__PURE__ */ m("span", {
+				style: {
+					display: "flex",
+					gap: 4,
+					flexWrap: "wrap"
+				},
+				children: l.slice(0, 4).map((e) => /* @__PURE__ */ m("span", { style: {
+					width: 7,
+					height: 7,
+					borderRadius: 999,
+					background: ue[e.color]
+				} }, e.id))
+			}),
+			l[0] ? /* @__PURE__ */ m("span", {
+				style: {
+					fontSize: 11,
+					lineHeight: "15px",
+					color: "#505b4d",
+					overflowWrap: "anywhere"
+				},
+				children: l[0].title
+			}) : null
+		]
+	});
+}
+function Pe({ event: e, onDelete: n }) {
+	let r = t({
+		id: `calendar-event-${e.id}`,
+		label: `Event: ${e.title}`,
+		role: "card",
+		group: "simple-calendar-events",
+		description: `${e.date} ${e.time}. ${e.notes}`,
+		status: e.color
+	}), i = t({
+		id: `delete-calendar-event-${e.id}`,
+		label: `Delete calendar event ${e.title}`,
+		role: "button",
+		group: "simple-calendar-events",
+		onActivate: () => n(e.id)
+	});
+	return /* @__PURE__ */ h("div", {
+		ref: r.ref,
+		...r.agentProps,
+		style: {
+			display: "grid",
+			gridTemplateColumns: "10px minmax(0, 1fr) 32px",
+			gap: 10,
+			alignItems: "center",
+			padding: "10px 0",
+			borderBottom: "1px solid #ecefe9"
+		},
+		children: [
+			/* @__PURE__ */ m("span", { style: {
+				width: 8,
+				height: 34,
+				borderRadius: 999,
+				background: ue[e.color]
+			} }),
+			/* @__PURE__ */ h("div", {
+				style: { minWidth: 0 },
+				children: [/* @__PURE__ */ h("div", {
+					style: {
+						fontWeight: 700,
+						fontSize: 14,
+						lineHeight: "20px",
+						overflowWrap: "anywhere"
+					},
+					children: [
+						e.time,
+						" - ",
+						e.title
+					]
+				}), e.notes ? /* @__PURE__ */ m("div", {
+					style: {
+						color: "#60695d",
+						fontSize: 12,
+						lineHeight: "17px",
+						overflowWrap: "anywhere"
+					},
+					children: e.notes
+				}) : null]
+			}),
+			/* @__PURE__ */ m("button", {
+				ref: i.ref,
+				type: "button",
+				...i.agentProps,
+				onClick: () => n(e.id),
+				style: X,
+				title: "Delete event",
+				children: /* @__PURE__ */ m(c, {
+					size: 16,
+					"aria-hidden": !0
+				})
+			})
+		]
+	});
+}
+function Fe() {
+	let t = Se(), [s, c] = p(() => H()), [g, _] = p(""), [v, y] = p("09:00"), [b, x] = p(""), [S, C] = p("green"), w = f(s), T = f(g), E = f(v), D = f(b), O = f(S);
+	u(() => {
+		w.current = t.selectedDate, c(t.selectedDate);
+	}, [t.selectedDate]);
+	let k = l((e) => {
+		T.current = e, _(e);
+	}, []), ee = l((e) => {
+		E.current = e, y(e);
+	}, []), A = l((e) => {
+		D.current = e, x(e);
+	}, []), j = l((e) => {
+		O.current = e, C(e);
+	}, []), M = d(() => ke(De(s)), [s]), te = d(() => je(M), [M]), N = d(() => Me(t.events, s), [t.events, s]), P = l((e) => {
+		let t = V(e);
+		t && (w.current = t, c(t), Z("select-calendar-date", { date: t }));
+	}, []), F = l((e) => {
+		P($(Ae(M, e)));
+	}, [M, P]), I = l(() => {
+		P($(/* @__PURE__ */ new Date()));
+	}, [P]), L = l(async () => {
+		let e = T.current.trim();
+		e && (await Z("create-calendar-event", {
+			title: e,
+			date: w.current,
+			time: E.current || "09:00",
+			notes: D.current.trim(),
+			color: O.current
+		}), k(""), A(""));
+	}, [A, k]), R = l((e) => {
+		Z("delete-calendar-event", { id: e });
+	}, []), z = (e) => {
+		e.preventDefault(), L();
+	};
+	return /* @__PURE__ */ h("main", {
+		"data-testid": "simple-calendar-view",
+		style: de,
+		children: [/* @__PURE__ */ h("header", {
+			style: fe,
+			children: [/* @__PURE__ */ h("div", {
+				style: pe,
+				children: [/* @__PURE__ */ m("div", {
+					style: me,
+					children: /* @__PURE__ */ m(n, {
+						size: 18,
+						"aria-hidden": !0
+					})
+				}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
+					style: he,
+					children: "Simple Calendar"
+				}), /* @__PURE__ */ h("p", {
+					style: ge,
+					children: [
+						Oe(M),
+						" - ",
+						t.events.length,
+						" events"
+					]
+				})] })]
+			}), /* @__PURE__ */ h("div", {
+				style: _e,
+				children: [
+					/* @__PURE__ */ m(e, {
+						agentId: "calendar-prev-month",
+						agentLabel: "Previous month",
+						onClick: () => F(-1),
+						style: X,
+						title: "Previous month",
+						children: /* @__PURE__ */ m(r, {
+							size: 16,
+							"aria-hidden": !0
+						})
+					}),
+					/* @__PURE__ */ m(e, {
+						agentId: "calendar-today",
+						agentLabel: "Go to today",
+						onClick: I,
+						style: Y,
+						children: "Today"
+					}),
+					/* @__PURE__ */ m(e, {
+						agentId: "calendar-next-month",
+						agentLabel: "Next month",
+						onClick: () => F(1),
+						style: X,
+						title: "Next month",
+						children: /* @__PURE__ */ m(i, {
+							size: 16,
+							"aria-hidden": !0
+						})
+					}),
+					/* @__PURE__ */ m(e, {
+						agentId: "calendar-open-settings",
+						agentLabel: "Open settings",
+						onClick: we,
+						style: X,
+						title: "Open settings",
+						children: /* @__PURE__ */ m(o, {
+							size: 16,
+							"aria-hidden": !0
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ h("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))",
+				gap: 18,
+				padding: 20,
+				alignItems: "start"
+			},
+			children: [/* @__PURE__ */ h("section", {
+				style: {
+					...be,
+					padding: 14
+				},
+				children: [/* @__PURE__ */ m("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+						gap: 8,
+						marginBottom: 8,
+						color: "#60695d",
+						fontSize: 12,
+						fontWeight: 700,
+						textAlign: "center"
+					},
+					children: [
+						"Sun",
+						"Mon",
+						"Tue",
+						"Wed",
+						"Thu",
+						"Fri",
+						"Sat"
+					].map((e) => /* @__PURE__ */ m("div", { children: e }, e))
+				}), /* @__PURE__ */ m("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+						gap: 8
+					},
+					children: te.map((e) => /* @__PURE__ */ m(Ne, {
+						day: e,
+						selectedDate: s,
+						cursorMonth: M.getUTCMonth(),
+						events: t.events,
+						onSelect: P
+					}, $(e)))
+				})]
+			}), /* @__PURE__ */ h("aside", {
+				style: {
+					...be,
+					display: "flex",
+					flexDirection: "column",
+					gap: 16,
+					padding: 16
+				},
+				children: [
+					/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
+						style: {
+							...he,
+							fontSize: 17,
+							lineHeight: "23px"
+						},
+						children: s
+					}), /* @__PURE__ */ h("p", {
+						style: ge,
+						children: [
+							N.length,
+							" event",
+							N.length === 1 ? "" : "s"
+						]
+					})] }),
+					/* @__PURE__ */ h("form", {
+						onSubmit: z,
+						style: {
+							display: "grid",
+							gap: 10
+						},
+						children: [
+							/* @__PURE__ */ m(Q, {
+								id: "calendar-event-title",
+								label: "Calendar event title",
+								value: g,
+								onFill: k,
+								placeholder: "Event title",
+								group: "simple-calendar-compose"
+							}),
+							/* @__PURE__ */ h("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: "minmax(0, 1fr) minmax(88px, 112px)",
+									gap: 8
+								},
+								children: [/* @__PURE__ */ m(Q, {
+									id: "calendar-event-date",
+									label: "Calendar event date",
+									value: s,
+									onFill: P,
+									group: "simple-calendar-compose"
+								}), /* @__PURE__ */ m(Q, {
+									id: "calendar-event-time",
+									label: "Calendar event time",
+									value: v,
+									onFill: ee,
+									group: "simple-calendar-compose"
+								})]
+							}),
+							/* @__PURE__ */ m(Ce, {
+								id: "calendar-event-notes",
+								label: "Calendar event notes",
+								value: b,
+								onFill: A,
+								group: "simple-calendar-compose"
+							}),
+							/* @__PURE__ */ m("div", {
+								style: {
+									display: "flex",
+									gap: 8,
+									flexWrap: "wrap"
+								},
+								children: le.map((t) => /* @__PURE__ */ m(e, {
+									agentId: `calendar-event-color-${t}`,
+									agentLabel: `Set calendar event color ${t}`,
+									agentRole: "toggle",
+									agentStatus: S === t ? "active" : void 0,
+									onClick: () => j(t),
+									style: {
+										...Y,
+										background: J[t].background,
+										borderColor: S === t ? "#15171c" : J[t].borderColor,
+										minWidth: 72,
+										textTransform: "capitalize"
+									},
+									children: t
+								}, t))
+							}),
+							/* @__PURE__ */ h(e, {
+								agentId: "add-calendar-event",
+								agentLabel: "Add calendar event",
+								onClick: L,
+								style: ve,
+								children: [/* @__PURE__ */ m(a, {
+									size: 16,
+									"aria-hidden": !0
+								}), "Add event"]
+							})
+						]
+					}),
+					/* @__PURE__ */ m("div", { children: N.map((e) => /* @__PURE__ */ m(Pe, {
+						event: e,
+						onDelete: R
+					}, e.id)) })
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { Ee as NotesView, Fe as SimpleCalendarView };
+
+//# sourceMappingURL=bundle.js.map