@algenium/blocks 1.19.1 → 1.21.0

package/dist/index.js

@@ -14,7 +14,7 @@ import { Drawer as Drawer$1 } from 'vaul';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { startOfMonth, endOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, format, isSameDay, subMonths, addMonths } from 'date-fns';
+import { startOfMonth, endOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, format, isSameDay, startOfDay, subMonths, addMonths, addDays, addHours, setMinutes, setHours } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
 import { Command as Command$1 } from 'cmdk';
 import valid from 'card-validator';
@@ -6522,6 +6522,271 @@ function CalendarView({
     ] })
   ] });
 }
+var TIME_SLOTS = Array.from({ length: 24 * 4 }, (_, i) => {
+  const hours = Math.floor(i / 4);
+  const minutes = i % 4 * 15;
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+});
+function formatTimeDisplay(value) {
+  const parsed = parseTimeInput(value);
+  if (!parsed) return value;
+  const [h, m] = parsed.split(":").map(Number);
+  const period = h >= 12 ? "pm" : "am";
+  const hour12 = h % 12 === 0 ? 12 : h % 12;
+  return `${hour12}:${String(m).padStart(2, "0")}${period}`;
+}
+function parseTimeInput(raw) {
+  const cleaned = raw.trim().toLowerCase().replace(/\s+/g, "");
+  if (!cleaned) return null;
+  const ampmMatch = cleaned.match(/^(\d{1,2})(?::(\d{2}))?(am|pm)$/);
+  if (ampmMatch) {
+    let hours = Number(ampmMatch[1]);
+    const minutes = Number(ampmMatch[2] ?? "0");
+    const period = ampmMatch[3];
+    if (hours < 1 || hours > 12 || minutes > 59) return null;
+    if (period === "am") {
+      if (hours === 12) hours = 0;
+    } else if (hours !== 12) {
+      hours += 12;
+    }
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  }
+  const colonMatch = cleaned.match(/^(\d{1,2}):(\d{2})$/);
+  if (colonMatch) {
+    const hours = Number(colonMatch[1]);
+    const minutes = Number(colonMatch[2]);
+    if (hours > 23 || minutes > 59) return null;
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  }
+  const compactMatch = cleaned.match(/^(\d{1,2})(\d{2})$/);
+  if (compactMatch) {
+    const hours = Number(compactMatch[1]);
+    const minutes = Number(compactMatch[2]);
+    if (hours > 23 || minutes > 59) return null;
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  }
+  const hourOnly = cleaned.match(/^(\d{1,2})$/);
+  if (hourOnly) {
+    const hours = Number(hourOnly[1]);
+    if (hours > 23) return null;
+    return `${String(hours).padStart(2, "0")}:00`;
+  }
+  return null;
+}
+function minutesFromMidnight(value) {
+  const [h, m] = value.split(":").map(Number);
+  return h * 60 + m;
+}
+function formatDurationHintClean(start, end) {
+  let mins = minutesFromMidnight(end) - minutesFromMidnight(start);
+  if (mins <= 0) mins += 24 * 60;
+  if (mins < 60) return `${mins} mins`;
+  const hours = Math.floor(mins / 60);
+  const rem = mins % 60;
+  if (rem === 0) return hours === 1 ? "1 hr" : `${hours} hrs`;
+  if (rem === 30) return `${hours}.5 hrs`;
+  return `${hours} hr ${rem} mins`;
+}
+function TimeCombobox({
+  value,
+  onChange,
+  disabled,
+  durationFrom,
+  className,
+  placeholder = "Time",
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(formatTimeDisplay(value));
+  const listRef = useRef(null);
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      setDraft(formatTimeDisplay(value));
+    }
+  }, [value, open]);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => {
+        selectedRef.current?.scrollIntoView({ block: "center" });
+      });
+    }
+  }, [open]);
+  const filtered = useMemo(() => {
+    const q = draft.trim().toLowerCase().replace(/\s+/g, "");
+    if (!q || parseTimeInput(draft) === value) return TIME_SLOTS;
+    return TIME_SLOTS.filter((slot) => {
+      const display = formatTimeDisplay(slot).toLowerCase();
+      return display.includes(q) || slot.includes(q);
+    });
+  }, [draft, value]);
+  const commitDraft = () => {
+    const parsed = parseTimeInput(draft);
+    if (parsed) {
+      onChange(parsed);
+      setDraft(formatTimeDisplay(parsed));
+    } else {
+      setDraft(formatTimeDisplay(value));
+    }
+  };
+  const handleListWheel = (e) => {
+    e.currentTarget.scrollTop += e.deltaY;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex h-9 min-w-[5.5rem] items-center justify-center rounded-md border border-input bg-background px-2 text-sm tabular-nums ring-offset-background transition-colors",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        onClick: () => setOpen(true),
+        children: formatTimeDisplay(value) || placeholder
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: "z-[100] w-40 p-0",
+        align: "start",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          const input = e.currentTarget?.querySelector(
+            "input"
+          );
+          input?.focus();
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b p-1.5", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commitDraft();
+                  setOpen(false);
+                } else if (e.key === "Escape") {
+                  setDraft(formatTimeDisplay(value));
+                  setOpen(false);
+                }
+              },
+              onBlur: commitDraft,
+              placeholder,
+              className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "aria-label": ariaLabel
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: listRef,
+              className: "max-h-56 overflow-y-auto py-1",
+              onWheel: handleListWheel,
+              children: [
+                filtered.map((slot) => {
+                  const selected = slot === value;
+                  const label = formatTimeDisplay(slot);
+                  const hint = durationFrom != null ? formatDurationHintClean(durationFrom, slot) : null;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: selected ? selectedRef : void 0,
+                      type: "button",
+                      className: cn(
+                        "flex w-full items-center justify-between px-3 py-1.5 text-left text-sm tabular-nums hover:bg-accent",
+                        selected && "bg-accent font-medium"
+                      ),
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                      },
+                      onClick: () => {
+                        onChange(slot);
+                        setDraft(formatTimeDisplay(slot));
+                        setOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: label }),
+                        hint && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: hint })
+                      ]
+                    },
+                    slot
+                  );
+                }),
+                filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No matching times" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function toTimeValue(date) {
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+function dateKey(date) {
+  return format(date, "yyyy-MM-dd");
+}
+function combineDateAndTime(date, time) {
+  const [h, m] = time.split(":").map(Number);
+  return setMinutes(setHours(startOfDay(date), h), m);
+}
+function defaultTimes(from) {
+  const base = /* @__PURE__ */ new Date();
+  const nextHour = addHours(setMinutes(setHours(base, base.getHours()), 0), 1);
+  const end = addHours(nextHour, 1);
+  return {
+    date: startOfDay(nextHour),
+    startTime: toTimeValue(nextHour),
+    endTime: toTimeValue(end)
+  };
+}
+function splitEventTimes(event) {
+  if (event?.dtstart) {
+    const start = new Date(event.dtstart);
+    const end = event.dtend ? new Date(event.dtend) : addHours(start, 1);
+    return {
+      date: startOfDay(start),
+      startTime: toTimeValue(start),
+      endTime: toTimeValue(end),
+      allDay: event.allDay ?? false
+    };
+  }
+  const defaults = defaultTimes();
+  return { ...defaults, allDay: event?.allDay ?? false };
+}
+var dayPickerClassNames = {
+  months: "flex flex-col",
+  month: "space-y-2",
+  month_caption: "flex justify-center relative items-center pt-1",
+  caption_label: "text-sm font-medium",
+  nav: "space-x-1 flex items-center",
+  button_previous: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-1 inline-flex items-center justify-center rounded-md hover:bg-accent",
+  button_next: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-1 inline-flex items-center justify-center rounded-md hover:bg-accent",
+  month_grid: "w-full border-collapse space-y-1",
+  weekdays: "flex",
+  weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+  week: "flex w-full mt-1",
+  day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+  day_button: cn(
+    "h-8 w-8 p-0 font-normal",
+    "hover:bg-accent hover:text-accent-foreground rounded-md"
+  ),
+  selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground rounded-md",
+  today: "bg-accent text-accent-foreground rounded-md",
+  outside: "text-muted-foreground opacity-50",
+  disabled: "text-muted-foreground opacity-50"
+};
 function EventDialog({
   open,
   onOpenChange,
@@ -6541,13 +6806,11 @@ function EventDialog({
   const [summary, setSummary] = useState(event?.summary ?? "");
   const [description, setDescription] = useState(event?.description ?? "");
   const [location, setLocation] = useState(event?.location ?? "");
-  const [dtstart, setDtstart] = useState(
-    event?.dtstart ? new Date(event.dtstart).toISOString().slice(0, 16) : ""
-  );
-  const [dtend, setDtend] = useState(
-    event?.dtend ? new Date(event.dtend).toISOString().slice(0, 16) : ""
-  );
-  const [allDay, setAllDay] = useState(event?.allDay ?? false);
+  const initialTimes = splitEventTimes(event);
+  const [date, setDate] = useState(initialTimes.date);
+  const [startTime, setStartTime] = useState(initialTimes.startTime);
+  const [endTime, setEndTime] = useState(initialTimes.endTime);
+  const [allDay, setAllDay] = useState(initialTimes.allDay);
   const [categoryId, setCategoryId] = useState(event?.categoryId ?? "");
   const [referenceType, setReferenceType] = useState(
     event?.referenceType ?? ""
@@ -6558,20 +6821,47 @@ function EventDialog({
   const [linkOptions, setLinkOptions] = useState([]);
   const [saving, setSaving] = useState(false);
   const [completing, setCompleting] = useState(false);
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+  const [discardIntent, setDiscardIntent] = useState(
+    "close"
+  );
+  const snapshotRef = useRef(null);
+  const allowCloseRef = useRef(false);
   const linkTimer = useRef(null);
+  const requestDiscard = (intent) => {
+    setDiscardIntent(intent);
+    setConfirmDiscard(true);
+  };
+  const revertToSnapshot = () => {
+    const snap = snapshotRef.current;
+    if (!snap) return;
+    setSummary(snap.summary);
+    setDescription(snap.description);
+    setLocation(snap.location);
+    setDate(startOfDay(/* @__PURE__ */ new Date(`${snap.dateKey}T00:00:00`)));
+    setStartTime(snap.startTime);
+    setEndTime(snap.endTime);
+    setAllDay(snap.allDay);
+    setCategoryId(snap.categoryId);
+    setReferenceType(snap.referenceType);
+    setReferenceId(snap.referenceId);
+  };
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      setConfirmDiscard(false);
+      allowCloseRef.current = false;
+      return;
+    }
     setMode(event?.id ? "preview" : "edit");
     setSummary(event?.summary ?? "");
     setDescription(event?.description ?? "");
     setLocation(event?.location ?? "");
-    setDtstart(
-      event?.dtstart ? new Date(event.dtstart).toISOString().slice(0, 16) : ""
-    );
-    setDtend(
-      event?.dtend ? new Date(event.dtend).toISOString().slice(0, 16) : ""
-    );
-    setAllDay(event?.allDay ?? false);
+    const times = splitEventTimes(event);
+    setDate(times.date);
+    setStartTime(times.startTime);
+    setEndTime(times.endTime);
+    setAllDay(times.allDay);
     setCategoryId(event?.categoryId ?? "");
     setReferenceType(event?.referenceType ?? "");
     setReferenceId(event?.referenceId ?? "");
@@ -6580,6 +6870,21 @@ function EventDialog({
     );
     setLinkQuery("");
     setLinkOptions([]);
+    setConfirmDiscard(false);
+    allowCloseRef.current = false;
+    const snap = {
+      summary: (event?.summary ?? "").trim(),
+      description: (event?.description ?? "").trim(),
+      location: (event?.location ?? "").trim(),
+      dateKey: dateKey(times.date),
+      startTime: times.startTime,
+      endTime: times.endTime,
+      allDay: times.allDay,
+      categoryId: event?.categoryId ?? "",
+      referenceType: event?.referenceType ?? "",
+      referenceId: event?.referenceId ?? ""
+    };
+    snapshotRef.current = snap;
   }, [open, event]);
   useEffect(() => {
     if (!linkSearch || !linkQuery.trim()) {
@@ -6599,25 +6904,67 @@ function EventDialog({
       if (linkTimer.current) clearTimeout(linkTimer.current);
     };
   }, [linkQuery, linkSearch]);
+  const isDirty = useMemo(() => {
+    const snap = snapshotRef.current;
+    if (!snap) return false;
+    return summary.trim() !== snap.summary || description.trim() !== snap.description || location.trim() !== snap.location || dateKey(date) !== snap.dateKey || startTime !== snap.startTime || endTime !== snap.endTime || allDay !== snap.allDay || categoryId !== snap.categoryId || referenceType !== snap.referenceType || referenceId !== snap.referenceId;
+  }, [
+    summary,
+    description,
+    location,
+    date,
+    startTime,
+    endTime,
+    allDay,
+    categoryId,
+    referenceType,
+    referenceId
+  ]);
   const selectedCategory = categories.find((c) => c.id === categoryId) ?? event?.category ?? null;
+  const handleOpenChange = (nextOpen) => {
+    if (nextOpen) {
+      onOpenChange(true);
+      return;
+    }
+    if (allowCloseRef.current || saving) {
+      allowCloseRef.current = false;
+      onOpenChange(false);
+      return;
+    }
+    if (mode === "edit" && isDirty) {
+      requestDiscard("close");
+      return;
+    }
+    onOpenChange(false);
+  };
+  const forceClose = () => {
+    allowCloseRef.current = true;
+    setConfirmDiscard(false);
+    onOpenChange(false);
+  };
   const handleSave = async () => {
-    if (!summary.trim() || !dtstart || !dtend) return;
+    if (!summary.trim() || !date || !startTime || !endTime) return;
     setSaving(true);
     try {
+      const start = allDay ? startOfDay(date) : combineDateAndTime(date, startTime);
+      let end = allDay ? startOfDay(addDays(date, 1)) : combineDateAndTime(date, endTime);
+      if (!allDay && end.getTime() <= start.getTime()) {
+        end = addDays(end, 1);
+      }
       await onSave({
         ...event?.id ? { id: event.id } : {},
         summary: summary.trim(),
         description: description.trim() || null,
         location: location.trim() || null,
-        dtstart: new Date(dtstart).toISOString(),
-        dtend: new Date(dtend).toISOString(),
+        dtstart: start.toISOString(),
+        dtend: end.toISOString(),
         allDay,
         categoryId: categoryId || null,
         category: selectedCategory,
         referenceType: referenceType || null,
         referenceId: referenceId || null
       });
-      onOpenChange(false);
+      forceClose();
     } catch (err) {
       console.error("[EventDialog] Failed to save event:", err);
     } finally {
@@ -6629,275 +6976,379 @@ function EventDialog({
     setCompleting(true);
     try {
       await onComplete();
-      onOpenChange(false);
+      forceClose();
     } finally {
       setCompleting(false);
     }
   };
+  const handleStartTimeChange = (value) => {
+    setStartTime(value);
+    const [sh, sm] = value.split(":").map(Number);
+    const [eh, em] = endTime.split(":").map(Number);
+    if (eh * 60 + em <= sh * 60 + sm) {
+      const next = addHours(combineDateAndTime(date, value), 1);
+      setEndTime(toTimeValue(next));
+    }
+  };
   const CategoryIcon = getCategoryIcon(selectedCategory?.alias);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[520px]", children: [
-    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: mode === "preview" ? labels.previewTitle ?? "Event details" : isExisting ? labels.editTitle ?? "Edit event" : labels.createTitle ?? "New event" }) }),
-    mode === "preview" ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: event?.summary }),
-        isCompleted && /* @__PURE__ */ jsxs("p", { className: "mt-1 inline-flex items-center gap-1 text-sm text-emerald-600", children: [
-          /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5" }),
-          labels.completed ?? "Completed"
-        ] })
-      ] }),
-      event?.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: event.description }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
-          event?.dtstart ? new Date(event.dtstart).toLocaleString() : "\u2014",
-          event?.dtend ? ` \u2013 ${new Date(event.dtend).toLocaleString()}` : ""
+  const dateLabel = format(date, "EEEE, d MMMM");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[520px]", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: mode === "preview" ? labels.previewTitle ?? "Event details" : isExisting ? labels.editTitle ?? "Edit event" : labels.createTitle ?? "New event" }) }),
+      mode === "preview" ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: event?.summary }),
+          isCompleted && /* @__PURE__ */ jsxs("p", { className: "mt-1 inline-flex items-center gap-1 text-sm text-emerald-600", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5" }),
+            labels.completed ?? "Completed"
+          ] })
         ] }),
-        event?.location && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(MapPin, { className: "h-3.5 w-3.5" }),
-          event.location
-        ] })
-      ] }),
-      selectedCategory && /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
-          style: {
-            backgroundColor: selectedCategory.bgColor,
-            color: selectedCategory.iconColor
-          },
-          children: [
-            /* @__PURE__ */ jsx(CategoryIcon, { className: "h-3.5 w-3.5" }),
-            selectedCategory.name
-          ]
-        }
-      ),
-      (event?.referenceId || linkLabel) && /* @__PURE__ */ jsxs("p", { className: "inline-flex items-center gap-1.5 text-sm", children: [
-        /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
-          linkSearch?.label ?? labels.link ?? "Linked case",
-          ":"
+        event?.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: event.description }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
+            event?.dtstart ? new Date(event.dtstart).toLocaleString() : "\u2014",
+            event?.dtend ? ` \u2013 ${new Date(event.dtend).toLocaleString()}` : ""
+          ] }),
+          event?.location && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(MapPin, { className: "h-3.5 w-3.5" }),
+            event.location
+          ] })
         ] }),
-        linkLabel || event?.referenceId
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
-        !isCompleted && onComplete && /* @__PURE__ */ jsxs(
-          Button,
+        selectedCategory && /* @__PURE__ */ jsxs(
+          "span",
           {
-            variant: "secondary",
-            size: "sm",
-            onClick: handleComplete,
-            disabled: completing,
+            className: "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+            style: {
+              backgroundColor: selectedCategory.bgColor,
+              color: selectedCategory.iconColor
+            },
             children: [
-              completing && /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3.5 w-3.5 animate-spin" }),
-              labels.markComplete ?? "Mark as completed"
+              /* @__PURE__ */ jsx(CategoryIcon, { className: "h-3.5 w-3.5" }),
+              selectedCategory.name
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        isExisting && onDelete && !isCompleted && /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDelete, children: labels.delete ?? "Delete" }),
-        /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: labels.cancel ?? "Close" }) }),
-        !isCompleted && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: () => setMode("edit"), children: [
-          /* @__PURE__ */ jsx(Pencil, { className: "mr-1 h-3.5 w-3.5" }),
-          labels.edit ?? "Edit"
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.summary ?? "Summary" }),
-          /* @__PURE__ */ jsx(
-            "input",
+        (event?.referenceId || linkLabel) && /* @__PURE__ */ jsxs("p", { className: "inline-flex items-center gap-1.5 text-sm", children: [
+          /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            linkSearch?.label ?? labels.link ?? "Linked case",
+            ":"
+          ] }),
+          linkLabel || event?.referenceId
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+          !isCompleted && onComplete && /* @__PURE__ */ jsxs(
+            Button,
             {
-              value: summary,
-              onChange: (e) => setSummary(e.target.value),
-              className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              placeholder: "Event name",
-              disabled: isCompleted
+              variant: "secondary",
+              size: "sm",
+              onClick: handleComplete,
+              disabled: completing,
+              children: [
+                completing && /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3.5 w-3.5 animate-spin" }),
+                labels.markComplete ?? "Mark as completed"
+              ]
             }
-          )
-        ] }),
-        categories.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-sm font-medium", children: labels.category ?? "Category" }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: categories.map((cat) => {
-            const Icon = getCategoryIcon(cat.alias);
-            const selected = categoryId === cat.id;
-            return /* @__PURE__ */ jsxs(
-              "button",
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          isExisting && onDelete && !isCompleted && /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDelete, children: labels.delete ?? "Delete" }),
+          /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: labels.cancel ?? "Close" }) }),
+          !isCompleted && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: () => setMode("edit"), children: [
+            /* @__PURE__ */ jsx(Pencil, { className: "mr-1 h-3.5 w-3.5" }),
+            labels.edit ?? "Edit"
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.summary ?? "Summary" }),
+            /* @__PURE__ */ jsx(
+              "input",
               {
-                type: "button",
-                disabled: isCompleted,
-                onClick: () => setCategoryId(selected ? "" : cat.id),
-                className: cn(
-                  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-all",
-                  selected ? "ring-2 ring-offset-1 ring-primary" : "opacity-80 hover:opacity-100"
-                ),
-                style: {
-                  backgroundColor: cat.bgColor,
-                  color: cat.iconColor,
-                  borderColor: cat.iconColor
+                value: summary,
+                onChange: (e) => setSummary(e.target.value),
+                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                placeholder: "Event name",
+                disabled: isCompleted
+              }
+            )
+          ] }),
+          categories.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-sm font-medium", children: labels.category ?? "Category" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: categories.map((cat) => {
+              const Icon = getCategoryIcon(cat.alias);
+              const selected = categoryId === cat.id;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: isCompleted,
+                  onClick: () => setCategoryId(selected ? "" : cat.id),
+                  className: cn(
+                    "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-all",
+                    selected ? "ring-2 ring-offset-1 ring-primary" : "opacity-80 hover:opacity-100"
+                  ),
+                  style: {
+                    backgroundColor: cat.bgColor,
+                    color: cat.iconColor,
+                    borderColor: cat.iconColor
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+                    cat.name
+                  ]
                 },
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
-                  cat.name
-                ]
-              },
-              cat.id
-            );
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                cat.id
+              );
+            }) })
+          ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
+            /* @__PURE__ */ jsxs("label", { className: "mb-1.5 block text-sm font-medium", children: [
               /* @__PURE__ */ jsx(Clock, { className: "mr-1 inline h-3.5 w-3.5" }),
-              labels.startDate ?? "Start"
+              labels.date ?? labels.startDate ?? "Date & time"
             ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                Popover,
+                {
+                  open: datePickerOpen,
+                  onOpenChange: setDatePickerOpen,
+                  children: [
+                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: isCompleted,
+                        className: cn(
+                          "inline-flex h-9 items-center rounded-md border border-input bg-background px-3 text-sm",
+                          "hover:bg-accent hover:text-accent-foreground",
+                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          "disabled:cursor-not-allowed disabled:opacity-50"
+                        ),
+                        children: dateLabel
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      PopoverContent,
+                      {
+                        className: "z-[100] w-auto p-2",
+                        align: "start",
+                        children: /* @__PURE__ */ jsx(
+                          DayPicker,
+                          {
+                            mode: "single",
+                            selected: date,
+                            onSelect: (d) => {
+                              if (d) {
+                                setDate(startOfDay(d));
+                                setDatePickerOpen(false);
+                              }
+                            },
+                            showOutsideDays: true,
+                            classNames: dayPickerClassNames
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              !allDay && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  TimeCombobox,
+                  {
+                    value: startTime,
+                    onChange: handleStartTimeChange,
+                    disabled: isCompleted,
+                    "aria-label": labels.startTime ?? "Start time"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2013" }),
+                /* @__PURE__ */ jsx(
+                  TimeCombobox,
+                  {
+                    value: endTime,
+                    onChange: setEndTime,
+                    disabled: isCompleted,
+                    durationFrom: startTime,
+                    "aria-label": labels.endTime ?? "End time"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "datetime-local",
-                value: dtstart,
-                onChange: (e) => setDtstart(e.target.value),
+                type: "checkbox",
+                checked: allDay,
+                onChange: (e) => setAllDay(e.target.checked),
                 disabled: isCompleted,
-                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className: "rounded border-input"
               }
-            )
+            ),
+            labels.allDay ?? "All day"
+          ] }),
+          (linkSearch || referenceId) && !isExisting && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
+              /* @__PURE__ */ jsx(Link2, { className: "mr-1 inline h-3.5 w-3.5" }),
+              linkSearch?.label ?? labels.link ?? "Link to case"
+            ] }),
+            referenceId ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { children: linkLabel || referenceId }),
+              linkSearch && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-xs text-muted-foreground hover:text-foreground",
+                  onClick: () => {
+                    setReferenceId("");
+                    setReferenceType("");
+                    setLinkLabel("");
+                  },
+                  children: "Clear"
+                }
+              )
+            ] }) : linkSearch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: linkQuery,
+                  onChange: (e) => setLinkQuery(e.target.value),
+                  placeholder: labels.linkPlaceholder ?? "Search cases\u2026",
+                  className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                }
+              ),
+              linkOptions.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-1 max-h-40 overflow-auto rounded-md border bg-popover text-sm shadow-md", children: linkOptions.map((opt) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full flex-col px-3 py-2 text-left hover:bg-accent",
+                  onClick: () => {
+                    setReferenceId(opt.id);
+                    setReferenceType("cases-svc");
+                    setLinkLabel(opt.label);
+                    setLinkQuery("");
+                    setLinkOptions([]);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: opt.label }),
+                    opt.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: opt.description })
+                  ]
+                }
+              ) }, opt.id)) })
+            ] }) : null
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.endDate ?? "End" }),
+            /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
+              /* @__PURE__ */ jsx(MapPin, { className: "mr-1 inline h-3.5 w-3.5" }),
+              labels.location ?? "Location"
+            ] }),
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "datetime-local",
-                value: dtend,
-                onChange: (e) => setDtend(e.target.value),
+                value: location,
+                onChange: (e) => setLocation(e.target.value),
                 disabled: isCompleted,
-                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                placeholder: "Add location"
               }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              checked: allDay,
-              onChange: (e) => setAllDay(e.target.checked),
-              disabled: isCompleted,
-              className: "rounded border-input"
-            }
-          ),
-          labels.allDay ?? "All day"
-        ] }),
-        (linkSearch || referenceId) && !isExisting && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
-            /* @__PURE__ */ jsx(Link2, { className: "mr-1 inline h-3.5 w-3.5" }),
-            linkSearch?.label ?? labels.link ?? "Link to case"
           ] }),
-          referenceId ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2 text-sm", children: [
-            /* @__PURE__ */ jsx("span", { children: linkLabel || referenceId }),
-            linkSearch && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "text-xs text-muted-foreground hover:text-foreground",
-                onClick: () => {
-                  setReferenceId("");
-                  setReferenceType("");
-                  setLinkLabel("");
-                },
-                children: "Clear"
-              }
-            )
-          ] }) : linkSearch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.description ?? "Description" }),
             /* @__PURE__ */ jsx(
-              "input",
-              {
-                value: linkQuery,
-                onChange: (e) => setLinkQuery(e.target.value),
-                placeholder: labels.linkPlaceholder ?? "Search cases\u2026",
-                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              }
-            ),
-            linkOptions.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-1 max-h-40 overflow-auto rounded-md border bg-popover text-sm shadow-md", children: linkOptions.map((opt) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-              "button",
+              "textarea",
               {
-                type: "button",
-                className: "flex w-full flex-col px-3 py-2 text-left hover:bg-accent",
-                onClick: () => {
-                  setReferenceId(opt.id);
-                  setReferenceType("cases-svc");
-                  setLinkLabel(opt.label);
-                  setLinkQuery("");
-                  setLinkOptions([]);
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: opt.label }),
-                  opt.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: opt.description })
-                ]
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                disabled: isCompleted,
+                rows: 3,
+                className: "w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                placeholder: "Add description"
               }
-            ) }, opt.id)) })
-          ] }) : null
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("label", { className: "mb-1 block text-sm font-medium", children: [
-            /* @__PURE__ */ jsx(MapPin, { className: "mr-1 inline h-3.5 w-3.5" }),
-            labels.location ?? "Location"
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+          isExisting && onDelete && !isCompleted && /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDelete, children: labels.delete ?? "Delete" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          isExisting && /* @__PURE__ */ jsx(
+            Button,
             {
-              value: location,
-              onChange: (e) => setLocation(e.target.value),
-              disabled: isCompleted,
-              className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              placeholder: "Add location"
+              variant: "outline",
+              size: "sm",
+              onClick: () => {
+                if (isDirty) {
+                  requestDiscard("preview");
+                } else {
+                  setMode("preview");
+                }
+              },
+              children: labels.cancel ?? "Cancel"
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium", children: labels.description ?? "Description" }),
-          /* @__PURE__ */ jsx(
-            "textarea",
+          ),
+          !isExisting && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => handleOpenChange(false),
+              children: labels.cancel ?? "Cancel"
+            }
+          ),
+          !isCompleted && /* @__PURE__ */ jsxs(
+            Button,
             {
-              value: description,
-              onChange: (e) => setDescription(e.target.value),
-              disabled: isCompleted,
-              rows: 3,
-              className: "w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              placeholder: "Add description"
+              size: "sm",
+              onClick: handleSave,
+              disabled: saving || !summary.trim() || !date || !startTime || !endTime,
+              children: [
+                saving && /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3.5 w-3.5 animate-spin" }),
+                labels.save ?? "Save"
+              ]
             }
           )
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: confirmDiscard, onOpenChange: setConfirmDiscard, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[400px]", showCloseButton: false, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: labels.discardTitle ?? "Discard changes?" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: labels.discardMessage ?? "You have unsaved changes. Are you sure you want to discard them?" })
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
-        isExisting && onDelete && !isCompleted && /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDelete, children: labels.delete ?? "Delete" }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        isExisting && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Button,
           {
             variant: "outline",
             size: "sm",
-            onClick: () => setMode("preview"),
-            children: labels.cancel ?? "Cancel"
+            onClick: () => setConfirmDiscard(false),
+            children: labels.discardCancel ?? "Keep editing"
           }
         ),
-        !isExisting && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: labels.cancel ?? "Cancel" }) }),
-        !isCompleted && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           Button,
           {
+            variant: "destructive",
             size: "sm",
-            onClick: handleSave,
-            disabled: saving || !summary.trim() || !dtstart || !dtend,
-            children: [
-              saving && /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3.5 w-3.5 animate-spin" }),
-              labels.save ?? "Save"
-            ]
+            onClick: () => {
+              if (discardIntent === "preview") {
+                revertToSnapshot();
+                setConfirmDiscard(false);
+                setMode("preview");
+              } else {
+                forceClose();
+              }
+            },
+            children: labels.discardConfirm ?? "Discard"
           }
         )
       ] })
-    ] })
-  ] }) });
+    ] }) })
+  ] });
 }
 function MiniCalendar({
   selected,