@agent-native/core 0.101.6 → 0.101.10

package/corpus/templates/calendar/app/components/calendar/DayView.tsx

@@ -30,6 +30,7 @@ import {
 } from "@/hooks/use-view-preferences";
 import { partitionAllDayEvents } from "@/lib/all-day-layout";
 import { getEventDisplayColor, allOtherDeclined } from "@/lib/event-colors";
+import { isOutOfOfficeEvent } from "@/lib/out-of-office";
 import {
   shouldSuppressAfterPopoverClose,
   shouldSuppressCreatePointerDown,
@@ -44,6 +45,7 @@ import {
 } from "@/lib/working-location";
 
 import { EventDetailPopover } from "./EventDetailPopover";
+import { OutOfOfficeEvent } from "./OutOfOfficeEvent";
 
 interface DayViewProps {
   events: CalendarEvent[];
@@ -230,6 +232,7 @@ interface DayEventCardProps {
   onDraftUpdate?: DayViewProps["onDraftUpdate"];
   onDraftCreate?: DayViewProps["onDraftCreate"];
   onDraftDiscard?: DayViewProps["onDraftDiscard"];
+  onPopoverOpenChange: (event: CalendarEvent, open: boolean) => void;
 }
 
 /**
@@ -262,6 +265,7 @@ const DayEventCard = memo(function DayEventCard({
   onDraftUpdate,
   onDraftCreate,
   onDraftDiscard,
+  onPopoverOpenChange,
 }: DayEventCardProps) {
   const t = useT();
   const workingLocationLabels = createWorkingLocationDisplayLabels(t);
@@ -488,6 +492,7 @@ const DayEventCard = memo(function DayEventCard({
       onDraftUpdate={onDraftUpdate}
       onDraftCreate={onDraftCreate}
       onDraftDiscard={onDraftDiscard}
+      onOpenChange={(open) => onPopoverOpenChange(event, open)}
     >
       {eventButton}
     </EventDetailPopover>
@@ -543,6 +548,7 @@ export const DayView = memo(function DayView({
   const { prefs } = useViewPreferences();
   const [now, setNow] = useState(new Date());
   const [focusedEventId, setFocusedEventId] = useState<string | null>(null);
+  const focusedEventIdRef = useRef<string | null>(null);
   const currentTimeRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
@@ -550,6 +556,7 @@ export const DayView = memo(function DayView({
   useEffect(() => {
     function handleKey(e: KeyboardEvent) {
       if (e.key === "Escape") {
+        focusedEventIdRef.current = null;
         setFocusedEventId(null);
         setFocusedEvent(null);
       }
@@ -594,7 +601,14 @@ export const DayView = memo(function DayView({
     () => partitionAllDayEvents(allDayEvents),
     [allDayEvents],
   );
-  const timedEvents = useMemo(() => events.filter((e) => !e.allDay), [events]);
+  const outOfOfficeEvents = useMemo(
+    () => events.filter((event) => !event.allDay && isOutOfOfficeEvent(event)),
+    [events],
+  );
+  const timedEvents = useMemo(
+    () => events.filter((event) => !event.allDay && !isOutOfOfficeEvent(event)),
+    [events],
+  );
   const layout = useMemo(() => computeLayout(timedEvents), [timedEvents]);
 
   // Timezone label: prefer the short generic name (e.g. "PT", "ET")
@@ -666,8 +680,25 @@ export const DayView = memo(function DayView({
 
   const canDrag = !!onEventTimeChange;
 
+  const handleEventPopoverOpenChange = useCallback(
+    (event: CalendarEvent, open: boolean) => {
+      if (open) {
+        focusedEventIdRef.current = event.id;
+        setFocusedEventId(event.id);
+        setFocusedEvent(event);
+        return;
+      }
+      if (focusedEventIdRef.current !== event.id) return;
+      focusedEventIdRef.current = null;
+      setFocusedEventId(null);
+      setFocusedEvent(null);
+    },
+    [setFocusedEvent],
+  );
+
   const handleEventPointerDown = useCallback(
     (e: React.PointerEvent, event: CalendarEvent, isStart: boolean) => {
+      focusedEventIdRef.current = event.id;
       setFocusedEventId(event.id);
       setFocusedEvent(event);
       if (
@@ -999,6 +1030,53 @@ export const DayView = memo(function DayView({
             </div>
           )}
 
+          {/* Native Google out-of-office context sits behind meetings. */}
+          {!isLoading &&
+            outOfOfficeEvents.map((event, markerIndex) => {
+              const isBeingDragged = dragEventId === event.id;
+              const overrides = getDragOverrides(event.id);
+              return (
+                <OutOfOfficeEvent
+                  key={event._tempId ?? event.id}
+                  event={event}
+                  day={date}
+                  hourHeight={HOUR_HEIGHT}
+                  color={
+                    getEventDisplayColor(event, prefs) ?? "hsl(var(--primary))"
+                  }
+                  label={t("eventForm.outOfOffice")}
+                  markerIndex={markerIndex}
+                  canDrag={canDrag}
+                  isBeingDragged={isBeingDragged}
+                  isDragging={isDragging}
+                  isDragTargetDay={isBeingDragged}
+                  overrideTop={overrides?.top ?? null}
+                  overrideHeight={overrides?.height ?? null}
+                  onMovePointerDown={(pointerEvent, startsOnDay) =>
+                    handleEventPointerDown(pointerEvent, event, startsOnDay)
+                  }
+                  onResizeTopPointerDown={(pointerEvent) =>
+                    handleResizeTopPointerDown(pointerEvent, event.id)
+                  }
+                  onResizeBottomPointerDown={(pointerEvent) =>
+                    handleResizeBottomPointerDown(pointerEvent, event.id)
+                  }
+                  shouldSuppressClick={shouldSuppressClick}
+                  onDelete={onDeleteEvent}
+                  isDraft={draftEventIds.includes(event.id)}
+                  defaultOpen={quickEditEventId === event.id}
+                  onTitleSave={onQuickEditSave}
+                  onDismissNew={onQuickEditCancel}
+                  onDraftUpdate={onDraftUpdate}
+                  onDraftCreate={onDraftCreate}
+                  onDraftDiscard={onDraftDiscard}
+                  onOpenChange={(open) =>
+                    handleEventPopoverOpenChange(event, open)
+                  }
+                />
+              );
+            })}
+
           {/* Skeleton events when loading */}
           {isLoading &&
             DAY_SKELETONS.map(
@@ -1053,6 +1131,7 @@ export const DayView = memo(function DayView({
                   onDraftUpdate={onDraftUpdate}
                   onDraftCreate={onDraftCreate}
                   onDraftDiscard={onDraftDiscard}
+                  onPopoverOpenChange={handleEventPopoverOpenChange}
                 />
               );
             })}

package/corpus/templates/calendar/app/components/calendar/EventCard.tsx

@@ -1,12 +1,13 @@
 import { useT } from "@agent-native/core/client";
 import type { CalendarEvent } from "@shared/api";
-import { IconAlertTriangleFilled } from "@tabler/icons-react";
+import { IconAlertTriangleFilled, IconCalendarOff } from "@tabler/icons-react";
 
 import {
   getEventDisplayColor,
   allOtherDeclined,
   type CalendarColorPreferences,
 } from "@/lib/event-colors";
+import { isOutOfOfficeEvent } from "@/lib/out-of-office";
 import { EventStatusIcon } from "@/lib/rsvp-status";
 import { cn } from "@/lib/utils";
 import {
@@ -44,6 +45,7 @@ export function EventCard({
   const title = getWorkingLocationChipLabel(event, workingLocationLabels);
   const ariaTitle = getWorkingLocationTitle(event, workingLocationLabels);
   const isWorkingLocation = isWorkingLocationEvent(event);
+  const isOutOfOffice = isOutOfOfficeEvent(event);
 
   const handleDragStart = (e: React.DragEvent) => {
     e.dataTransfer.setData("text/plain", event.id);
@@ -73,7 +75,13 @@ export function EventCard({
           backgroundColor: `${accentColor}25`,
         }}
       >
-        {allOtherDeclined(event) ? (
+        {isOutOfOffice ? (
+          <IconCalendarOff
+            aria-hidden="true"
+            className="size-3 shrink-0"
+            style={{ color: accentColor }}
+          />
+        ) : allOtherDeclined(event) ? (
           <IconAlertTriangleFilled
             size={10}
             className="shrink-0 text-current opacity-70"
@@ -91,6 +99,11 @@ export function EventCard({
             {t("eventForm.workingLocation")}
           </span>
         )}
+        {isOutOfOffice && (
+          <span className="hidden shrink-0 text-[10px] font-normal text-foreground/65 sm:inline">
+            {t("eventForm.outOfOffice")}
+          </span>
+        )}
         {event.ownerColor && (
           <span
             aria-hidden="true"
@@ -123,7 +136,14 @@ export function EventCard({
       }}
     >
       <div className="flex items-center gap-1 truncate">
-        {allOtherDeclined(event) && (
+        {isOutOfOffice && (
+          <IconCalendarOff
+            aria-hidden="true"
+            className="size-3 shrink-0"
+            style={{ color: accentColor }}
+          />
+        )}
+        {!isOutOfOffice && allOtherDeclined(event) && (
           <IconAlertTriangleFilled
             size={12}
             className="shrink-0 text-current opacity-70"
@@ -137,6 +157,11 @@ export function EventCard({
           {t("eventForm.workingLocation")}
         </span>
       )}
+      {isOutOfOffice && (
+        <span className="truncate text-foreground/70">
+          {t("eventForm.outOfOffice")}
+        </span>
+      )}
       {!event.allDay && (
         <span className="text-foreground/70">
           {new Date(event.start).toLocaleTimeString([], {

package/corpus/templates/calendar/app/components/calendar/EventDetailPanel.tsx

@@ -34,6 +34,7 @@ import {
 } from "@/components/ui/tooltip";
 import { useUpdateEvent } from "@/hooks/use-events";
 import { useViewPreferences } from "@/hooks/use-view-preferences";
+import { isOutOfOfficeEvent } from "@/lib/out-of-office";
 import { cn } from "@/lib/utils";
 import {
   buildWorkingLocationUpdate,
@@ -135,6 +136,7 @@ export function EventDetailPanel({
     useGuestNotificationPrompt();
   const isOverlay = !!event?.overlayEmail;
   const isWorkingLocation = event ? isWorkingLocationEvent(event) : false;
+  const isOutOfOffice = event ? isOutOfOfficeEvent(event) : false;
   const isRecurringEvent = !!(
     event?.recurringEventId || event?.recurrence?.length
   );
@@ -293,7 +295,9 @@ export function EventDetailPanel({
                 <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                   {isWorkingLocation
                     ? t("eventForm.workingLocation")
-                    : t("eventForm.event")}
+                    : isOutOfOffice
+                      ? t("eventForm.outOfOffice")
+                      : t("eventForm.event")}
                 </span>
                 <div className="flex items-center gap-0.5">
                   <Tooltip>

package/corpus/templates/calendar/app/components/calendar/EventDetailPopover.tsx

@@ -97,6 +97,7 @@ import {
   type ReminderMode,
   validateAttachmentDrafts,
 } from "@/lib/event-form-utils";
+import { isOutOfOfficeEvent } from "@/lib/out-of-office";
 import {
   createEventDetailPopoverToken,
   markPopoverInteractOutside,
@@ -473,6 +474,8 @@ interface EventDetailPopoverProps {
   onTitleSave?: (eventId: string, title: string, accountEmail?: string) => void;
   /** Called when the popover is dismissed for a new event (to clean up if no title was set) */
   onDismissNew?: (eventId: string, accountEmail?: string) => void;
+  /** Called after the popover's visible open state changes through its normal lifecycle. */
+  onOpenChange?: (open: boolean) => void;
   onDraftUpdate?: (
     eventId: string,
     updates: Partial<CalendarEvent> & {
@@ -500,6 +503,7 @@ export function EventDetailPopover({
   defaultOpen = false,
   onTitleSave,
   onDismissNew,
+  onOpenChange,
   onDraftUpdate,
   onDraftCreate,
   onDraftDiscard,
@@ -520,11 +524,13 @@ export function EventDetailPopover({
   }
   const {
     eventDetailSidebar,
+    sidebarEvent,
     setEventDetailSidebar,
     setSidebarEvent,
     setFocusedEvent,
   } = useCalendarContext();
   const isWorkingLocation = isWorkingLocationEvent(event);
+  const isOutOfOffice = isOutOfOfficeEvent(event);
   const isSingleDayWorkingLocation = isWorkingLocation && event.allDay;
   const editableLocationValue = event.location || "";
 
@@ -1274,6 +1280,9 @@ export function EventDetailPopover({
       (isRecurringEvent ? t("eventForm.repeats") : null);
   const handleOpenChange = useCallback(
     (newOpen: boolean) => {
+      const isPopoverSuppressed =
+        eventDetailSidebar && !isNewEventRef.current && !isDraft;
+      if (newOpen && isPopoverSuppressed) return;
       if (!newOpen && open) {
         const trimmedTitle = editingTitle.trim();
         let savedPendingChange = false;
@@ -1330,11 +1339,27 @@ export function EventDetailPopover({
       handleSaveMeetingLink,
       handleSaveReminders,
       handleSaveAttachments,
+      eventDetailSidebar,
+      isDraft,
     ],
   );
 
   const popoverOpen =
     eventDetailSidebar && !isNewEventRef.current && !isDraft ? false : open;
+  const sidebarDetailsOpen =
+    eventDetailSidebar &&
+    !isNewEventRef.current &&
+    !isDraft &&
+    sidebarEvent?.id === event.id &&
+    sidebarEvent.accountEmail === event.accountEmail;
+  const detailsOpen = popoverOpen || sidebarDetailsOpen;
+  const previousDetailsOpenRef = useRef(false);
+
+  useEffect(() => {
+    if (previousDetailsOpenRef.current === detailsOpen) return;
+    previousDetailsOpenRef.current = detailsOpen;
+    onOpenChange?.(detailsOpen);
+  }, [detailsOpen, onOpenChange]);
 
   useEffect(() => {
     const token = popoverTokenRef.current;
@@ -1386,9 +1411,11 @@ export function EventDetailPopover({
               <span>
                 {isWorkingLocation
                   ? t("eventForm.workingLocation")
-                  : isDraft
-                    ? t("eventForm.draftEvent")
-                    : t("eventForm.event")}
+                  : isOutOfOffice
+                    ? t("eventForm.outOfOffice")
+                    : isDraft
+                      ? t("eventForm.draftEvent")
+                      : t("eventForm.event")}
               </span>
             </div>
             <div className="flex items-center gap-0.5">

package/corpus/templates/calendar/app/components/calendar/OutOfOfficeEvent.tsx

@@ -0,0 +1,196 @@
+import type { CalendarEvent } from "@shared/api";
+import { IconCalendarOff } from "@tabler/icons-react";
+
+import { getOutOfOfficeSegment } from "@/lib/out-of-office";
+
+import { EventDetailPopover } from "./EventDetailPopover";
+
+interface OutOfOfficeEventProps {
+  event: CalendarEvent;
+  day: Date;
+  hourHeight: number;
+  color: string;
+  label: string;
+  markerIndex?: number;
+  compactMarker?: boolean;
+  canDrag?: boolean;
+  isBeingDragged?: boolean;
+  isDragging?: boolean;
+  isDragTargetDay?: boolean;
+  overrideTop?: number | null;
+  overrideHeight?: number | null;
+  onMovePointerDown?: (event: React.PointerEvent, startsOnDay: boolean) => void;
+  onResizeTopPointerDown?: (event: React.PointerEvent) => void;
+  onResizeBottomPointerDown?: (event: React.PointerEvent) => void;
+  shouldSuppressClick?: () => boolean;
+  onDelete: (eventId: string) => void;
+  isDraft: boolean;
+  defaultOpen: boolean;
+  onTitleSave?: (eventId: string, title: string, accountEmail?: string) => void;
+  onDismissNew?: (eventId: string, accountEmail?: string) => void;
+  onDraftUpdate?: (
+    eventId: string,
+    updates: Partial<CalendarEvent> & {
+      addGoogleMeet?: boolean;
+      addZoom?: boolean;
+      workingLocationType?: "homeOffice" | "officeLocation" | "customLocation";
+      workingLocationLabel?: string;
+    },
+  ) => void;
+  onDraftCreate?: (
+    eventId: string,
+    updates?: Partial<CalendarEvent> & {
+      addGoogleMeet?: boolean;
+      addZoom?: boolean;
+    },
+  ) => void;
+  onDraftDiscard?: (eventId: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function OutOfOfficeEvent({
+  event,
+  day,
+  hourHeight,
+  color,
+  label,
+  markerIndex = 0,
+  compactMarker = false,
+  canDrag = false,
+  isBeingDragged = false,
+  isDragging = false,
+  isDragTargetDay = false,
+  overrideTop = null,
+  overrideHeight = null,
+  onMovePointerDown,
+  onResizeTopPointerDown,
+  onResizeBottomPointerDown,
+  shouldSuppressClick,
+  onDelete,
+  isDraft,
+  defaultOpen,
+  onTitleSave,
+  onDismissNew,
+  onDraftUpdate,
+  onDraftCreate,
+  onDraftDiscard,
+  onOpenChange,
+}: OutOfOfficeEventProps) {
+  const segment = getOutOfOfficeSegment(event, day);
+  const hasDragOverride =
+    isBeingDragged &&
+    isDragTargetDay &&
+    overrideTop !== null &&
+    overrideHeight !== null;
+  if (isBeingDragged && !isDragTargetDay) return null;
+  if (!segment && !hasDragOverride) return null;
+
+  const top = hasDragOverride
+    ? overrideTop
+    : ((segment?.topMinutes ?? 0) / 60) * hourHeight;
+  const height = hasDragOverride
+    ? overrideHeight
+    : ((segment?.durationMinutes ?? 1) / 60) * hourHeight;
+  const title = event.title || label;
+  const startsOnDay = hasDragOverride || segment?.startsOnDay === true;
+  const endsOnDay = hasDragOverride || segment?.endsOnDay === true;
+  const canManipulate = canDrag && startsOnDay;
+
+  return (
+    <>
+      <div
+        data-out-of-office-event={event.id}
+        className="pointer-events-none absolute inset-x-0 z-0"
+        style={{ top: `${top}px`, height: `${height}px` }}
+      >
+        <div
+          aria-hidden="true"
+          className="absolute inset-0"
+          style={{
+            backgroundColor: `color-mix(in srgb, ${color} 7%, transparent)`,
+            boxShadow: `inset 2px 0 0 color-mix(in srgb, ${color} 28%, transparent)`,
+          }}
+        />
+      </div>
+      <div
+        data-out-of-office-trigger={event.id}
+        className={`pointer-events-auto absolute ${
+          isBeingDragged && isDragging ? "z-[100]" : "z-40"
+        }`}
+        style={{
+          top: `${top + 4}px`,
+          right: `${4 + (compactMarker ? markerIndex * 24 : 0)}px`,
+          left: compactMarker ? undefined : `${4 + markerIndex * 12}px`,
+        }}
+      >
+        <EventDetailPopover
+          event={event}
+          onDelete={onDelete}
+          isDraft={isDraft}
+          defaultOpen={defaultOpen}
+          onTitleSave={onTitleSave}
+          onDismissNew={onDismissNew}
+          onDraftUpdate={onDraftUpdate}
+          onDraftCreate={onDraftCreate}
+          onDraftDiscard={onDraftDiscard}
+          onOpenChange={onOpenChange}
+        >
+          <button
+            onPointerDown={(pointerEvent) =>
+              onMovePointerDown?.(pointerEvent, startsOnDay)
+            }
+            onClick={(clickEvent) => {
+              if (shouldSuppressClick?.()) {
+                clickEvent.preventDefault();
+                clickEvent.stopPropagation();
+              }
+            }}
+            className={`flex h-5 max-w-full items-center truncate rounded-sm text-[10px] font-medium text-foreground outline-none transition-[filter,box-shadow] hover:brightness-110 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 ${
+              compactMarker
+                ? "w-5 justify-center px-0"
+                : "gap-1 px-1.5 text-left"
+            } ${canManipulate ? "cursor-grab" : ""} ${
+              isBeingDragged && isDragging ? "cursor-grabbing shadow-lg" : ""
+            }`}
+            aria-label={`${label}: ${title}`}
+            style={{
+              backgroundColor: `color-mix(in srgb, ${color} 20%, hsl(var(--background)))`,
+              boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 34%, transparent)`,
+            }}
+          >
+            <IconCalendarOff
+              aria-hidden="true"
+              className="size-3 shrink-0"
+              style={{ color }}
+            />
+            {!compactMarker && <span className="truncate">{title}</span>}
+          </button>
+        </EventDetailPopover>
+      </div>
+      {canManipulate && (
+        <div
+          data-resize-handle="true"
+          data-out-of-office-resize="top"
+          onPointerDown={(pointerEvent) => {
+            pointerEvent.stopPropagation();
+            onResizeTopPointerDown?.(pointerEvent);
+          }}
+          className="pointer-events-auto absolute right-1 z-40 h-1.5 w-5 cursor-n-resize"
+          style={{ top: `${top}px`, touchAction: "none" }}
+        />
+      )}
+      {canManipulate && endsOnDay && (
+        <div
+          data-resize-handle="true"
+          data-out-of-office-resize="bottom"
+          onPointerDown={(pointerEvent) => {
+            pointerEvent.stopPropagation();
+            onResizeBottomPointerDown?.(pointerEvent);
+          }}
+          className="pointer-events-auto absolute right-1 z-40 h-1.5 w-5 cursor-s-resize"
+          style={{ top: `${top + height - 6}px`, touchAction: "none" }}
+        />
+      )}
+    </>
+  );
+}