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

package/dist/ui.js

@@ -0,0 +1,1041 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AgentButton, useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  CalendarDays,
+  ChevronLeft,
+  ChevronRight,
+  Plus,
+  Settings,
+  StickyNote,
+  Trash2
+} from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { interact } from "./simple-views.interact.js";
+import {
+  applySimpleViewsSnapshot,
+  isSimpleViewsSnapshot,
+  normalizeDateKey,
+  readSelectedDate,
+  SIMPLE_VIEWS_EVENT,
+  simpleViewsSnapshot,
+  todayDateKey
+} from "./storage.js";
+const COLORS = ["yellow", "green", "rose", "slate"];
+const NOTE_COLORS = {
+  yellow: { background: "#fff5bf", borderColor: "#d9b84b" },
+  green: { background: "#dff6df", borderColor: "#7dbb77" },
+  rose: { background: "#ffe4ec", borderColor: "#d991aa" },
+  slate: { background: "#e8edf2", borderColor: "#9aa8b5" }
+};
+const EVENT_DOTS = {
+  yellow: "#b88719",
+  green: "#2f7d46",
+  rose: "#b84065",
+  slate: "#586879"
+};
+const shellStyle = {
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100%",
+  color: "#15171c",
+  background: "#f6f7f4",
+  fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+};
+const headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 16,
+  padding: "18px 20px 14px",
+  borderBottom: "1px solid #dde1d8",
+  background: "#ffffff"
+};
+const titleWrapStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  minWidth: 0
+};
+const iconBoxStyle = {
+  display: "grid",
+  placeItems: "center",
+  width: 34,
+  height: 34,
+  border: "1px solid #d6dbd2",
+  borderRadius: 8,
+  background: "#f2f4ef",
+  color: "#263326"
+};
+const h1Style = {
+  margin: 0,
+  fontSize: 20,
+  lineHeight: "26px",
+  fontWeight: 700,
+  letterSpacing: 0
+};
+const subTextStyle = {
+  margin: 0,
+  color: "#60695d",
+  fontSize: 13,
+  lineHeight: "18px"
+};
+const toolbarStyle = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: 8,
+  justifyContent: "flex-end"
+};
+const buttonStyle = {
+  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"
+};
+const iconButtonStyle = {
+  ...buttonStyle,
+  width: 34,
+  padding: 0
+};
+const primaryButtonStyle = {
+  ...buttonStyle,
+  borderColor: "#476b3b",
+  background: "#476b3b",
+  color: "#ffffff"
+};
+const fieldStyle = {
+  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"
+};
+const panelStyle = {
+  border: "1px solid #dde1d8",
+  borderRadius: 8,
+  background: "#ffffff"
+};
+async function fetchSimpleViewsSnapshot() {
+  if (typeof fetch !== "function") return null;
+  try {
+    const response = await fetch("/api/simple-views/state", {
+      headers: { Accept: "application/json" }
+    });
+    if (!response.ok) return null;
+    const body = await response.json();
+    return isSimpleViewsSnapshot(body) ? body : null;
+  } catch {
+    return null;
+  }
+}
+async function callSimpleViewsCapability(capability, params) {
+  if (typeof fetch === "function") {
+    try {
+      const response = await fetch("/api/simple-views/interact", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({ capability, params })
+      });
+      if (response.ok) {
+        const body = await response.json();
+        if (body && typeof body === "object" && "state" in body && isSimpleViewsSnapshot(body.state)) {
+          applySimpleViewsSnapshot(
+            body.state
+          );
+          return;
+        }
+      }
+    } catch {
+    }
+  }
+  await interact(capability, params);
+}
+function useSimpleViewsSnapshot() {
+  const [snapshot, setSnapshot] = useState(() => simpleViewsSnapshot());
+  useEffect(() => {
+    const refresh = () => setSnapshot(simpleViewsSnapshot());
+    const onStorage = () => refresh();
+    const onUpdate = () => refresh();
+    const onSharedViewEvent = (event) => {
+      const detail = event.detail;
+      if (detail?.type === "simple-views:update" || detail?.type === "view:notes:updated" || detail?.type === "view:simple-calendar:updated") {
+        refresh();
+      }
+    };
+    window.addEventListener(SIMPLE_VIEWS_EVENT, onUpdate);
+    window.addEventListener("storage", onStorage);
+    window.addEventListener("elizaos-view-event", onSharedViewEvent);
+    void fetchSimpleViewsSnapshot().then((next) => {
+      if (next) {
+        applySimpleViewsSnapshot(next, { preserveLocalDataOnEmpty: true });
+        refresh();
+      }
+    });
+    return () => {
+      window.removeEventListener(SIMPLE_VIEWS_EVENT, onUpdate);
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener("elizaos-view-event", onSharedViewEvent);
+    };
+  }, []);
+  return snapshot;
+}
+function AgentTextInput({
+  id,
+  label,
+  value,
+  onFill,
+  group,
+  placeholder,
+  style
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id,
+    label,
+    role: "text-input",
+    group,
+    fillable: true,
+    getValue: () => value,
+    onFill
+  });
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      "aria-label": label,
+      ...agentProps,
+      value,
+      onChange: (event) => onFill(event.target.value),
+      placeholder,
+      style: { ...fieldStyle, ...style }
+    }
+  );
+}
+function AgentTextarea({
+  id,
+  label,
+  value,
+  onFill,
+  group
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id,
+    label,
+    role: "textarea",
+    group,
+    fillable: true,
+    getValue: () => value,
+    onFill
+  });
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      "aria-label": label,
+      ...agentProps,
+      value,
+      onChange: (event) => onFill(event.target.value),
+      rows: 5,
+      style: { ...fieldStyle, minHeight: 112, resize: "vertical" }
+    }
+  );
+}
+function openSettings() {
+  if (typeof window === "undefined") return;
+  window.history.pushState(null, "", "/settings");
+  window.dispatchEvent(new PopStateEvent("popstate"));
+}
+function NoteCard({
+  note,
+  onDelete
+}) {
+  const cardElement = useAgentElement({
+    id: `note-card-${note.id}`,
+    label: `Note: ${note.title}`,
+    role: "card",
+    group: "notes-list",
+    description: note.body,
+    status: note.color
+  });
+  const deleteElement = useAgentElement({
+    id: `delete-note-${note.id}`,
+    label: `Delete note ${note.title}`,
+    role: "button",
+    group: "notes-list",
+    onActivate: () => onDelete(note.id)
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: cardElement.ref,
+      ...cardElement.agentProps,
+      style: {
+        ...NOTE_COLORS[note.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__ */ jsxs(
+          "div",
+          {
+            style: { display: "flex", justifyContent: "space-between", gap: 10 },
+            children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: 16,
+                    lineHeight: "22px",
+                    fontWeight: 700,
+                    overflowWrap: "anywhere"
+                  },
+                  children: note.title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: deleteElement.ref,
+                  type: "button",
+                  ...deleteElement.agentProps,
+                  onClick: () => onDelete(note.id),
+                  style: {
+                    ...iconButtonStyle,
+                    width: 30,
+                    height: 30,
+                    minHeight: 30,
+                    background: "rgba(255,255,255,0.68)"
+                  },
+                  title: "Delete note",
+                  children: /* @__PURE__ */ jsx(Trash2, { size: 16, "aria-hidden": true })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              color: "#253025",
+              fontSize: 14,
+              lineHeight: "21px",
+              whiteSpace: "pre-wrap",
+              overflowWrap: "anywhere"
+            },
+            children: note.body
+          }
+        )
+      ]
+    }
+  );
+}
+function NotesView() {
+  const { notes } = useSimpleViewsSnapshot();
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [color, setColor] = useState("yellow");
+  const titleRef = useRef(title);
+  const bodyRef = useRef(body);
+  const setTitleValue = useCallback((value) => {
+    titleRef.current = value;
+    setTitle(value);
+  }, []);
+  const setBodyValue = useCallback((value) => {
+    bodyRef.current = value;
+    setBody(value);
+  }, []);
+  const addNote = useCallback(async () => {
+    const nextTitle = titleRef.current.trim();
+    const nextBody = bodyRef.current.trim();
+    if (!nextTitle && !nextBody) return;
+    await callSimpleViewsCapability("create-note", {
+      title: nextTitle || "Untitled",
+      body: nextBody || "New note",
+      color
+    });
+    setTitleValue("");
+    setBodyValue("");
+  }, [color, setBodyValue, setTitleValue]);
+  const deleteNote = useCallback((id) => {
+    void callSimpleViewsCapability("delete-note", { id });
+  }, []);
+  const clearNotes = useCallback(() => {
+    void callSimpleViewsCapability("clear-notes");
+  }, []);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    void addNote();
+  };
+  return /* @__PURE__ */ jsxs("main", { "data-testid": "simple-notes-view", style: shellStyle, children: [
+    /* @__PURE__ */ jsxs("header", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: titleWrapStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: iconBoxStyle, children: /* @__PURE__ */ jsx(StickyNote, { size: 18, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { style: h1Style, children: "Notes" }),
+          /* @__PURE__ */ jsxs("p", { style: subTextStyle, children: [
+            notes.length,
+            " sticky notes"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: toolbarStyle, children: [
+        /* @__PURE__ */ jsx(
+          AgentButton,
+          {
+            agentId: "notes-clear",
+            agentLabel: "Clear notes",
+            onClick: clearNotes,
+            style: buttonStyle,
+            children: "Clear"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AgentButton,
+          {
+            agentId: "notes-open-settings",
+            agentLabel: "Open settings",
+            onClick: openSettings,
+            style: iconButtonStyle,
+            title: "Open settings",
+            children: /* @__PURE__ */ jsx(Settings, { size: 16, "aria-hidden": true })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 1fr))",
+          gap: 18,
+          padding: 20,
+          alignItems: "start"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "form",
+            {
+              onSubmit: handleSubmit,
+              style: {
+                ...panelStyle,
+                display: "flex",
+                flexDirection: "column",
+                gap: 12,
+                padding: 16
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  AgentTextInput,
+                  {
+                    id: "note-title",
+                    label: "Note title",
+                    value: title,
+                    onFill: setTitleValue,
+                    placeholder: "Title",
+                    group: "note-compose"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AgentTextarea,
+                  {
+                    id: "note-body",
+                    label: "Note body",
+                    value: body,
+                    onFill: setBodyValue,
+                    group: "note-compose"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: COLORS.map((option) => /* @__PURE__ */ jsx(
+                  AgentButton,
+                  {
+                    agentId: `note-color-${option}`,
+                    agentLabel: `Set note color ${option}`,
+                    agentRole: "toggle",
+                    agentStatus: color === option ? "active" : void 0,
+                    onClick: () => setColor(option),
+                    style: {
+                      ...buttonStyle,
+                      background: NOTE_COLORS[option].background,
+                      borderColor: color === option ? "#15171c" : NOTE_COLORS[option].borderColor,
+                      minWidth: 72,
+                      textTransform: "capitalize"
+                    },
+                    children: option
+                  },
+                  option
+                )) }),
+                /* @__PURE__ */ jsxs(
+                  AgentButton,
+                  {
+                    agentId: "add-note",
+                    agentLabel: "Add note",
+                    onClick: addNote,
+                    style: primaryButtonStyle,
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { size: 16, "aria-hidden": true }),
+                      "Add note"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "section",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+                gap: 16
+              },
+              "aria-label": "Sticky note wall",
+              children: notes.map((note) => /* @__PURE__ */ jsx(NoteCard, { note, onDelete: deleteNote }, note.id))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function dateKey(date) {
+  return todayDateKey(date);
+}
+function parseDateKey(value) {
+  const normalized = normalizeDateKey(value) ?? todayDateKey();
+  const [year, month, day] = normalized.split("-").map((part) => Number(part));
+  return new Date(Date.UTC(year, month - 1, day));
+}
+function monthLabel(date) {
+  return new Intl.DateTimeFormat("en", {
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC"
+  }).format(date);
+}
+function startOfMonth(date) {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+}
+function addMonths(date, amount) {
+  return new Date(
+    Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + amount, 1)
+  );
+}
+function buildCalendarDays(cursor) {
+  const monthStart = startOfMonth(cursor);
+  const startOffset = monthStart.getUTCDay();
+  const gridStart = new Date(monthStart);
+  gridStart.setUTCDate(monthStart.getUTCDate() - startOffset);
+  return Array.from({ length: 42 }, (_, index) => {
+    const day = new Date(gridStart);
+    day.setUTCDate(gridStart.getUTCDate() + index);
+    return day;
+  });
+}
+function eventsForDate(events, date) {
+  return events.filter((event) => event.date === date).sort(
+    (a, b) => `${a.time} ${a.title}`.localeCompare(`${b.time} ${b.title}`)
+  );
+}
+function CalendarDayButton({
+  day,
+  selectedDate,
+  cursorMonth,
+  events,
+  onSelect
+}) {
+  const key = dateKey(day);
+  const isSelected = key === selectedDate;
+  const inMonth = day.getUTCMonth() === cursorMonth;
+  const dayEvents = eventsForDate(events, key);
+  const dayElement = useAgentElement({
+    id: `calendar-day-${key}`,
+    label: `Select ${key}`,
+    role: "button",
+    group: "simple-calendar-grid",
+    description: dayEvents.length > 0 ? `${dayEvents.length} event${dayEvents.length === 1 ? "" : "s"}` : "No events",
+    status: isSelected ? "selected" : inMonth ? "current-month" : "outside-month",
+    onActivate: () => onSelect(key)
+  });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: dayElement.ref,
+      type: "button",
+      ...dayElement.agentProps,
+      onClick: () => onSelect(key),
+      style: {
+        minWidth: 0,
+        minHeight: 78,
+        border: isSelected ? "2px solid #476b3b" : "1px solid #dde1d8",
+        borderRadius: 8,
+        padding: 6,
+        background: inMonth ? "#ffffff" : "#eef1eb",
+        color: inMonth ? "#15171c" : "#687264",
+        textAlign: "left",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 13 }, children: day.getUTCDate() }),
+        /* @__PURE__ */ jsx("span", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: dayEvents.slice(0, 4).map((event) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: 999,
+              background: EVENT_DOTS[event.color]
+            }
+          },
+          event.id
+        )) }),
+        dayEvents[0] ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 11,
+              lineHeight: "15px",
+              color: "#505b4d",
+              overflowWrap: "anywhere"
+            },
+            children: dayEvents[0].title
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function EventRow({
+  event,
+  onDelete
+}) {
+  const rowElement = useAgentElement({
+    id: `calendar-event-${event.id}`,
+    label: `Event: ${event.title}`,
+    role: "card",
+    group: "simple-calendar-events",
+    description: `${event.date} ${event.time}. ${event.notes}`,
+    status: event.color
+  });
+  const deleteElement = useAgentElement({
+    id: `delete-calendar-event-${event.id}`,
+    label: `Delete calendar event ${event.title}`,
+    role: "button",
+    group: "simple-calendar-events",
+    onActivate: () => onDelete(event.id)
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rowElement.ref,
+      ...rowElement.agentProps,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "10px minmax(0, 1fr) 32px",
+        gap: 10,
+        alignItems: "center",
+        padding: "10px 0",
+        borderBottom: "1px solid #ecefe9"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 8,
+              height: 34,
+              borderRadius: 999,
+              background: EVENT_DOTS[event.color]
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                fontWeight: 700,
+                fontSize: 14,
+                lineHeight: "20px",
+                overflowWrap: "anywhere"
+              },
+              children: [
+                event.time,
+                " - ",
+                event.title
+              ]
+            }
+          ),
+          event.notes ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                color: "#60695d",
+                fontSize: 12,
+                lineHeight: "17px",
+                overflowWrap: "anywhere"
+              },
+              children: event.notes
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: deleteElement.ref,
+            type: "button",
+            ...deleteElement.agentProps,
+            onClick: () => onDelete(event.id),
+            style: iconButtonStyle,
+            title: "Delete event",
+            children: /* @__PURE__ */ jsx(Trash2, { size: 16, "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+function SimpleCalendarView() {
+  const snapshot = useSimpleViewsSnapshot();
+  const [selectedDate, setSelectedDate] = useState(() => readSelectedDate());
+  const [title, setTitle] = useState("");
+  const [time, setTime] = useState("09:00");
+  const [notes, setNotes] = useState("");
+  const [color, setColor] = useState("green");
+  const selectedDateRef = useRef(selectedDate);
+  const titleRef = useRef(title);
+  const timeRef = useRef(time);
+  const notesRef = useRef(notes);
+  const colorRef = useRef(color);
+  useEffect(() => {
+    selectedDateRef.current = snapshot.selectedDate;
+    setSelectedDate(snapshot.selectedDate);
+  }, [snapshot.selectedDate]);
+  const setTitleValue = useCallback((value) => {
+    titleRef.current = value;
+    setTitle(value);
+  }, []);
+  const setTimeValue = useCallback((value) => {
+    timeRef.current = value;
+    setTime(value);
+  }, []);
+  const setNotesValue = useCallback((value) => {
+    notesRef.current = value;
+    setNotes(value);
+  }, []);
+  const setColorValue = useCallback((value) => {
+    colorRef.current = value;
+    setColor(value);
+  }, []);
+  const cursor = useMemo(
+    () => startOfMonth(parseDateKey(selectedDate)),
+    [selectedDate]
+  );
+  const days = useMemo(() => buildCalendarDays(cursor), [cursor]);
+  const selectedEvents = useMemo(
+    () => eventsForDate(snapshot.events, selectedDate),
+    [snapshot.events, selectedDate]
+  );
+  const selectDate = useCallback((date) => {
+    const normalizedDate = normalizeDateKey(date);
+    if (!normalizedDate) return;
+    selectedDateRef.current = normalizedDate;
+    setSelectedDate(normalizedDate);
+    void callSimpleViewsCapability("select-calendar-date", {
+      date: normalizedDate
+    });
+  }, []);
+  const moveMonth = useCallback(
+    (amount) => {
+      selectDate(dateKey(addMonths(cursor, amount)));
+    },
+    [cursor, selectDate]
+  );
+  const selectToday = useCallback(() => {
+    selectDate(dateKey(/* @__PURE__ */ new Date()));
+  }, [selectDate]);
+  const addEvent = useCallback(async () => {
+    const eventTitle = titleRef.current.trim();
+    if (!eventTitle) return;
+    await callSimpleViewsCapability("create-calendar-event", {
+      title: eventTitle,
+      date: selectedDateRef.current,
+      time: timeRef.current || "09:00",
+      notes: notesRef.current.trim(),
+      color: colorRef.current
+    });
+    setTitleValue("");
+    setNotesValue("");
+  }, [setNotesValue, setTitleValue]);
+  const deleteEvent = useCallback((id) => {
+    void callSimpleViewsCapability("delete-calendar-event", { id });
+  }, []);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    void addEvent();
+  };
+  return /* @__PURE__ */ jsxs("main", { "data-testid": "simple-calendar-view", style: shellStyle, children: [
+    /* @__PURE__ */ jsxs("header", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: titleWrapStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: iconBoxStyle, children: /* @__PURE__ */ jsx(CalendarDays, { size: 18, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { style: h1Style, children: "Simple Calendar" }),
+          /* @__PURE__ */ jsxs("p", { style: subTextStyle, children: [
+            monthLabel(cursor),
+            " - ",
+            snapshot.events.length,
+            " events"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: toolbarStyle, children: [
+        /* @__PURE__ */ jsx(
+          AgentButton,
+          {
+            agentId: "calendar-prev-month",
+            agentLabel: "Previous month",
+            onClick: () => moveMonth(-1),
+            style: iconButtonStyle,
+            title: "Previous month",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AgentButton,
+          {
+            agentId: "calendar-today",
+            agentLabel: "Go to today",
+            onClick: selectToday,
+            style: buttonStyle,
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AgentButton,
+          {
+            agentId: "calendar-next-month",
+            agentLabel: "Next month",
+            onClick: () => moveMonth(1),
+            style: iconButtonStyle,
+            title: "Next month",
+            children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AgentButton,
+          {
+            agentId: "calendar-open-settings",
+            agentLabel: "Open settings",
+            onClick: openSettings,
+            style: iconButtonStyle,
+            title: "Open settings",
+            children: /* @__PURE__ */ jsx(Settings, { size: 16, "aria-hidden": true })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))",
+          gap: 18,
+          padding: 20,
+          alignItems: "start"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("section", { style: { ...panelStyle, padding: 14 }, children: [
+            /* @__PURE__ */ jsx(
+              "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((day) => /* @__PURE__ */ jsx("div", { children: day }, day))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+                  gap: 8
+                },
+                children: days.map((day) => /* @__PURE__ */ jsx(
+                  CalendarDayButton,
+                  {
+                    day,
+                    selectedDate,
+                    cursorMonth: cursor.getUTCMonth(),
+                    events: snapshot.events,
+                    onSelect: selectDate
+                  },
+                  dateKey(day)
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              style: {
+                ...panelStyle,
+                display: "flex",
+                flexDirection: "column",
+                gap: 16,
+                padding: 16
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h2", { style: { ...h1Style, fontSize: 17, lineHeight: "23px" }, children: selectedDate }),
+                  /* @__PURE__ */ jsxs("p", { style: subTextStyle, children: [
+                    selectedEvents.length,
+                    " event",
+                    selectedEvents.length === 1 ? "" : "s"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "grid", gap: 10 }, children: [
+                  /* @__PURE__ */ jsx(
+                    AgentTextInput,
+                    {
+                      id: "calendar-event-title",
+                      label: "Calendar event title",
+                      value: title,
+                      onFill: setTitleValue,
+                      placeholder: "Event title",
+                      group: "simple-calendar-compose"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "grid",
+                        gridTemplateColumns: "minmax(0, 1fr) minmax(88px, 112px)",
+                        gap: 8
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          AgentTextInput,
+                          {
+                            id: "calendar-event-date",
+                            label: "Calendar event date",
+                            value: selectedDate,
+                            onFill: selectDate,
+                            group: "simple-calendar-compose"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          AgentTextInput,
+                          {
+                            id: "calendar-event-time",
+                            label: "Calendar event time",
+                            value: time,
+                            onFill: setTimeValue,
+                            group: "simple-calendar-compose"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    AgentTextarea,
+                    {
+                      id: "calendar-event-notes",
+                      label: "Calendar event notes",
+                      value: notes,
+                      onFill: setNotesValue,
+                      group: "simple-calendar-compose"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: COLORS.map((option) => /* @__PURE__ */ jsx(
+                    AgentButton,
+                    {
+                      agentId: `calendar-event-color-${option}`,
+                      agentLabel: `Set calendar event color ${option}`,
+                      agentRole: "toggle",
+                      agentStatus: color === option ? "active" : void 0,
+                      onClick: () => setColorValue(option),
+                      style: {
+                        ...buttonStyle,
+                        background: NOTE_COLORS[option].background,
+                        borderColor: color === option ? "#15171c" : NOTE_COLORS[option].borderColor,
+                        minWidth: 72,
+                        textTransform: "capitalize"
+                      },
+                      children: option
+                    },
+                    option
+                  )) }),
+                  /* @__PURE__ */ jsxs(
+                    AgentButton,
+                    {
+                      agentId: "add-calendar-event",
+                      agentLabel: "Add calendar event",
+                      onClick: addEvent,
+                      style: primaryButtonStyle,
+                      children: [
+                        /* @__PURE__ */ jsx(Plus, { size: 16, "aria-hidden": true }),
+                        "Add event"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: selectedEvents.map((event) => /* @__PURE__ */ jsx(EventRow, { event, onDelete: deleteEvent }, event.id)) })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  NotesView,
+  SimpleCalendarView
+};
+//# sourceMappingURL=ui.js.map