@agent-native/core 0.180.0-nightly-20260915184036 → 0.180.0

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

@@ -8,11 +8,12 @@ import {
   startOfWeek,
   endOfWeek,
   eachDayOfInterval,
+  getWeek,
   isSameMonth,
   isSameDay,
   format,
 } from "date-fns";
-import { memo, useState, useMemo, useRef } from "react";
+import { Fragment, memo, useState, useMemo, useRef } from "react";
 
 import {
   Tooltip,
@@ -131,6 +132,7 @@ export const MonthView = memo(function MonthView({
   const headers = getWeekdayOrder(weekStartsOn)
     .filter((day) => !prefs.hideWeekends || (day !== 0 && day !== 6))
     .map((day) => headerLabels[day]);
+  const gridColumnCount = colCount + (prefs.showWeekNumbers ? 1 : 0);
 
   // Pre-group events by every day they overlap (not just their start day) so
   // multi-day events keep appearing as the grid moves past their start date.
@@ -203,8 +205,15 @@ export const MonthView = memo(function MonthView({
       {/* Weekday headers */}
       <div
         className="grid border-b border-border bg-card"
-        style={{ gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }}
+        style={{
+          gridTemplateColumns: `repeat(${gridColumnCount}, minmax(0, 1fr))`,
+        }}
       >
+        {prefs.showWeekNumbers && (
+          <div className="py-2 text-center text-[10px] font-medium tracking-wide text-muted-foreground sm:py-2.5 sm:text-xs">
+            {t("calendarView.week")}
+          </div>
+        )}
         {headers.map((day, i) => (
           <div
             key={`${day}-${i}`}
@@ -218,9 +227,11 @@ export const MonthView = memo(function MonthView({
       {/* Day grid */}
       <div
         className="grid flex-1 auto-rows-fr"
-        style={{ gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }}
+        style={{
+          gridTemplateColumns: `repeat(${gridColumnCount}, minmax(0, 1fr))`,
+        }}
       >
-        {days.map((day) => {
+        {days.map((day, index) => {
           const dayOccurrences =
             eventsByDay.get(dateToCalendarDateKey(day)) ?? [];
           const inMonth = isSameMonth(day, selectedDate);
@@ -232,154 +243,172 @@ export const MonthView = memo(function MonthView({
           const isDragTarget = dragOverDay === dayKey;
 
           return (
-            <div
-              key={dayKey}
-              data-calendar-create-surface="true"
-              onClick={(e) => {
-                if ((e.target as HTMLElement).closest("button")) return;
-                if (shouldSuppressAfterPopoverClose()) return;
-                onDateSelect(day);
-              }}
-              onDragOver={(e) => handleDragOver(e, dayKey)}
-              onDragEnter={(e) => {
-                e.preventDefault();
-                setDragOverDay(dayKey);
-              }}
-              onDragLeave={(e) => {
-                // Only clear if leaving to outside this cell
-                if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-                  setDragOverDay(null);
-                }
-              }}
-              onDrop={(e) => handleDrop(e, day)}
-              className={cn(
-                "group relative min-h-[60px] cursor-pointer border-b border-r border-border p-1 transition-colors sm:min-h-[90px] sm:p-1.5",
-                !inMonth && "opacity-35",
-                isDragTarget
-                  ? "bg-primary/10 ring-2 ring-inset ring-primary/50"
-                  : "hover:bg-accent/40",
-              )}
-            >
-              {/* Date number */}
-              <div className="flex items-center justify-between">
-                <span
-                  className={cn(
-                    "flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium sm:h-7 sm:w-7 sm:text-sm",
-                    today && "bg-primary text-primary-foreground font-semibold",
-                    selected && !today && "bg-accent text-accent-foreground",
-                    !today && !selected && "text-foreground",
-                  )}
+            <Fragment key={dayKey}>
+              {prefs.showWeekNumbers && index % colCount === 0 && (
+                <div
+                  aria-label={t("calendarView.weekNumber", {
+                    number: getWeek(day, {
+                      weekStartsOn,
+                      firstWeekContainsDate: 1,
+                    }),
+                  })}
+                  className="border-b border-r border-border bg-muted/20 px-1 py-2 text-center text-[10px] font-medium text-muted-foreground sm:text-xs"
                 >
-                  {format(day, "d")}
-                </span>
-
-                {inMonth && onCreateWorkingLocation && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        aria-label={t("calendarView.addWorkingLocation")}
-                        className="mr-0.5 flex size-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          onCreateWorkingLocation(day);
-                        }}
-                      >
-                        <IconPlus aria-hidden="true" className="size-3.5" />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">
-                      {t("calendarView.addWorkingLocation")}
-                    </TooltipContent>
-                  </Tooltip>
+                  {getWeek(day, {
+                    weekStartsOn,
+                    firstWeekContainsDate: 1,
+                  })}
+                </div>
+              )}
+              <div
+                data-calendar-create-surface="true"
+                onClick={(e) => {
+                  if ((e.target as HTMLElement).closest("button")) return;
+                  if (shouldSuppressAfterPopoverClose()) return;
+                  onDateSelect(day);
+                }}
+                onDragOver={(e) => handleDragOver(e, dayKey)}
+                onDragEnter={(e) => {
+                  e.preventDefault();
+                  setDragOverDay(dayKey);
+                }}
+                onDragLeave={(e) => {
+                  // Only clear if leaving to outside this cell
+                  if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                    setDragOverDay(null);
+                  }
+                }}
+                onDrop={(e) => handleDrop(e, day)}
+                className={cn(
+                  "group relative min-h-[60px] cursor-pointer border-b border-r border-border p-1 transition-colors sm:min-h-[90px] sm:p-1.5",
+                  !inMonth && "opacity-35",
+                  isDragTarget
+                    ? "bg-primary/10 ring-2 ring-inset ring-primary/50"
+                    : "hover:bg-accent/40",
                 )}
-              </div>
+              >
+                {/* Date number */}
+                <div className="flex items-center justify-between">
+                  <span
+                    className={cn(
+                      "flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium sm:h-7 sm:w-7 sm:text-sm",
+                      today &&
+                        "bg-primary text-primary-foreground font-semibold",
+                      selected && !today && "bg-accent text-accent-foreground",
+                      !today && !selected && "text-foreground",
+                    )}
+                  >
+                    {format(day, "d")}
+                  </span>
 
-              {/* Events / Skeleton */}
-              <div className="mt-1 space-y-0.5 overflow-hidden">
-                {isLoading &&
-                  MONTH_SKELETON_WIDTHS[day.getDay()].map((w, i) => (
-                    <div
-                      key={i}
-                      className="h-4 animate-pulse rounded bg-muted"
-                      style={{ width: w }}
-                    />
-                  ))}
-                {!isLoading &&
-                  dayOccurrences
-                    .slice(0, isMobile ? 2 : 3)
-                    .map(({ event, isStart, continuesNext }) => (
-                      <EventDetailPopover
-                        key={getCalendarEventRenderKey(event)}
-                        event={event}
-                        timezone={timezone}
-                        onDelete={onDeleteEvent ?? (() => {})}
-                        isDraft={draftEventIds.includes(event.id)}
-                        onDraftUpdate={onDraftUpdate}
-                        onDraftCreate={onDraftCreate}
-                        onDraftDiscard={onDraftDiscard}
-                      >
-                        <div
-                          onClick={(e) => e.stopPropagation()}
-                          onDragStart={(e) => {
-                            if (!isStart) return;
-                            const ghost = e.currentTarget.querySelector(
-                              "button",
-                            ) as HTMLElement | null;
-                            if (ghost) {
-                              e.dataTransfer.setDragImage(ghost, 12, 12);
-                            }
+                  {inMonth && onCreateWorkingLocation && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          aria-label={t("calendarView.addWorkingLocation")}
+                          className="mr-0.5 flex size-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onCreateWorkingLocation(day);
                           }}
-                          className={cn(
-                            "relative",
-                            !isStart &&
-                              "-ml-1 -mr-1 border-l-2 border-dashed border-current pl-[calc(0.25rem-2px)] opacity-90 sm:-ml-1.5 sm:-mr-1.5 sm:pl-[calc(0.375rem-2px)]",
-                          )}
                         >
-                          <EventCard
-                            event={event}
-                            colorPreferences={prefs}
-                            compact
-                            draggable={isStart}
-                            onDragStart={(draggedEvent) => {
-                              draggedEventRef.current = draggedEvent;
-                              setDraggingEvent(draggedEvent);
-                            }}
-                            onDragEnd={() => {
-                              draggedEventRef.current = null;
-                              setDraggingEvent(null);
-                              setDragOverDay(null);
-                            }}
-                            dimmed={
-                              draggingEvent !== null &&
-                              getCalendarEventRenderKey(draggingEvent) ===
-                                getCalendarEventRenderKey(event)
-                            }
-                          />
-                          {continuesNext && (
-                            <span
-                              aria-hidden="true"
-                              className="pointer-events-none absolute right-0.5 top-1/2 -translate-y-1/2 text-[9px] leading-none text-current opacity-60"
-                            >
-                              &rsaquo;
-                            </span>
-                          )}
-                        </div>
-                      </EventDetailPopover>
+                          <IconPlus aria-hidden="true" className="size-3.5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent side="top">
+                        {t("calendarView.addWorkingLocation")}
+                      </TooltipContent>
+                    </Tooltip>
+                  )}
+                </div>
+
+                {/* Events / Skeleton */}
+                <div className="mt-1 space-y-0.5 overflow-hidden">
+                  {isLoading &&
+                    MONTH_SKELETON_WIDTHS[day.getDay()].map((w, i) => (
+                      <div
+                        key={i}
+                        className="h-4 animate-pulse rounded bg-muted"
+                        style={{ width: w }}
+                      />
                     ))}
-                {!isLoading && dayOccurrences.length > (isMobile ? 2 : 3) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDateSelect(day);
-                    }}
-                    className="block w-full rounded px-1 py-0.5 text-left text-[10px] text-muted-foreground hover:bg-accent/50 sm:px-1.5 sm:text-xs"
-                  >
-                    +{dayOccurrences.length - (isMobile ? 2 : 3)} more
-                  </button>
-                )}
+                  {!isLoading &&
+                    dayOccurrences
+                      .slice(0, isMobile ? 2 : 3)
+                      .map(({ event, isStart, continuesNext }) => (
+                        <EventDetailPopover
+                          key={getCalendarEventRenderKey(event)}
+                          event={event}
+                          timezone={timezone}
+                          onDelete={onDeleteEvent ?? (() => {})}
+                          isDraft={draftEventIds.includes(event.id)}
+                          onDraftUpdate={onDraftUpdate}
+                          onDraftCreate={onDraftCreate}
+                          onDraftDiscard={onDraftDiscard}
+                        >
+                          <div
+                            onClick={(e) => e.stopPropagation()}
+                            onDragStart={(e) => {
+                              if (!isStart) return;
+                              const ghost = e.currentTarget.querySelector(
+                                "button",
+                              ) as HTMLElement | null;
+                              if (ghost) {
+                                e.dataTransfer.setDragImage(ghost, 12, 12);
+                              }
+                            }}
+                            className={cn(
+                              "relative",
+                              !isStart &&
+                                "-ml-1 -mr-1 border-l-2 border-dashed border-current pl-[calc(0.25rem-2px)] opacity-90 sm:-ml-1.5 sm:-mr-1.5 sm:pl-[calc(0.375rem-2px)]",
+                            )}
+                          >
+                            <EventCard
+                              event={event}
+                              colorPreferences={prefs}
+                              compact
+                              draggable={isStart}
+                              onDragStart={(draggedEvent) => {
+                                draggedEventRef.current = draggedEvent;
+                                setDraggingEvent(draggedEvent);
+                              }}
+                              onDragEnd={() => {
+                                draggedEventRef.current = null;
+                                setDraggingEvent(null);
+                                setDragOverDay(null);
+                              }}
+                              dimmed={
+                                draggingEvent !== null &&
+                                getCalendarEventRenderKey(draggingEvent) ===
+                                  getCalendarEventRenderKey(event)
+                              }
+                            />
+                            {continuesNext && (
+                              <span
+                                aria-hidden="true"
+                                className="pointer-events-none absolute right-0.5 top-1/2 -translate-y-1/2 text-[9px] leading-none text-current opacity-60"
+                              >
+                                &rsaquo;
+                              </span>
+                            )}
+                          </div>
+                        </EventDetailPopover>
+                      ))}
+                  {!isLoading && dayOccurrences.length > (isMobile ? 2 : 3) && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDateSelect(day);
+                      }}
+                      className="block w-full rounded px-1 py-0.5 text-left text-[10px] text-muted-foreground hover:bg-accent/50 sm:px-1.5 sm:text-xs"
+                    >
+                      +{dayOccurrences.length - (isMobile ? 2 : 3)} more
+                    </button>
+                  )}
+                </div>
               </div>
-            </div>
+            </Fragment>
           );
         })}
       </div>

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

@@ -10,12 +10,11 @@ import {
 } from "@tabler/icons-react";
 import {
   startOfWeek,
-  endOfWeek,
-  eachDayOfInterval,
   eachHourOfInterval,
   format,
   set,
   addMinutes,
+  addDays,
 } from "date-fns";
 import { useState, useEffect, useRef, useMemo, useCallback, memo } from "react";
 
@@ -41,6 +40,7 @@ import {
   partitionAllDayEvents,
 } from "@/lib/all-day-layout";
 import { getCalendarEventRenderKey } from "@/lib/calendar-event-identity";
+import { getVisibleCalendarDays } from "@/lib/calendar-navigation";
 import {
   dateToCalendarDateKey,
   getBrowserTimezone,
@@ -49,6 +49,7 @@ import {
   getEventSegmentForCalendarDay,
   isAllDayCalendarEvent,
 } from "@/lib/calendar-timezone";
+import { normalizeNumberOfDays } from "@/lib/calendar-view-preferences";
 import { getEventDisplayColor, allOtherDeclined } from "@/lib/event-colors";
 import {
   computeTimedEventLayout,
@@ -113,6 +114,7 @@ interface WeekViewProps {
   onDraftDiscard?: (eventId: string) => void;
   isLoading?: boolean;
   weekStartsOn?: 0 | 1;
+  numberOfDays?: number;
 }
 
 // [startHour, startMin, durationMin, widthPct] per day column (Sun–Sat)
@@ -555,6 +557,7 @@ export const WeekView = memo(function WeekView({
   onDraftDiscard,
   isLoading = false,
   weekStartsOn = 0,
+  numberOfDays = 7,
 }: WeekViewProps) {
   const t = useT();
   const workingLocationLabels = useMemo(
@@ -602,30 +605,31 @@ export const WeekView = memo(function WeekView({
   }, []);
 
   const { prefs } = useViewPreferences();
-  const weekStart = useMemo(
-    () => startOfWeek(selectedDate, { weekStartsOn }),
-    [selectedDate, weekStartsOn],
+  const displayedDayCount = normalizeNumberOfDays(numberOfDays);
+  const periodStart = useMemo(
+    () =>
+      displayedDayCount === 7
+        ? startOfWeek(selectedDate, { weekStartsOn })
+        : selectedDate,
+    [displayedDayCount, selectedDate, weekStartsOn],
   );
-  const weekEnd = useMemo(
-    () => endOfWeek(selectedDate, { weekStartsOn }),
-    [selectedDate, weekStartsOn],
+  const periodEnd = useMemo(
+    () => addDays(periodStart, displayedDayCount - 1),
+    [displayedDayCount, periodStart],
   );
   // Stable day/hour arrays — recomputed only when the week or weekend
   // visibility actually changes, so memoized children (event buttons) don't
   // see a new array identity on every drag/focus re-render.
   const days = useMemo(() => {
-    const fullWeek = eachDayOfInterval({ start: weekStart, end: weekEnd });
-    return prefs.hideWeekends
-      ? fullWeek.filter((d) => d.getDay() !== 0 && d.getDay() !== 6)
-      : fullWeek;
-  }, [weekStart, weekEnd, prefs.hideWeekends]);
+    return getVisibleCalendarDays(periodStart, periodEnd, prefs.hideWeekends);
+  }, [periodEnd, periodStart, prefs.hideWeekends]);
   const hours = useMemo(
     () =>
       eachHourOfInterval({
-        start: set(weekStart, { hours: START_HOUR, minutes: 0 }),
-        end: set(weekStart, { hours: END_HOUR - 1, minutes: 0 }),
+        start: set(periodStart, { hours: START_HOUR, minutes: 0 }),
+        end: set(periodStart, { hours: END_HOUR - 1, minutes: 0 }),
       }),
-    [weekStart],
+    [periodStart],
   );
 
   // Separate all-day and timed events

package/corpus/templates/calendar/app/components/layout/Sidebar.tsx

@@ -769,6 +769,7 @@ export function Sidebar({
         collapsed={collapsed}
         collapsible={Boolean(onCollapsedChange)}
         onCollapsedChange={onCollapsedChange}
+        overflowAffordances
         brandName={t("navigation.brand")}
         brandHref="/home"
         secondaryItems={secondaryItems}

package/corpus/templates/calendar/app/hooks/use-events.ts

@@ -15,6 +15,7 @@ import { nanoid } from "nanoid";
 import { useMemo } from "react";
 
 import type { CalendarEventSourceIdentity } from "@/lib/calendar-event-identity";
+import { isEventVisibleForDeclinedPreference } from "@/lib/calendar-view-preferences";
 import { dateTimeInTimezoneToIso } from "@/lib/event-form-utils";
 import {
   isSharedCalendarDemo,
@@ -625,6 +626,21 @@ export function findEventByCurrentOrReplacedId(
   return findCalendarEventForSelection(events, selectedEvent);
 }
 
+export function findVisibleSelectedEvent(
+  events: CalendarEvent[],
+  selectedEvent: CalendarEvent,
+  showDeclinedEvents: boolean,
+): CalendarEvent | undefined {
+  const currentEvent =
+    findEventByCurrentOrReplacedId(events, selectedEvent) ?? selectedEvent;
+  return isEventVisibleForDeclinedPreference(
+    currentEvent.responseStatus,
+    showDeclinedEvents,
+  )
+    ? currentEvent
+    : undefined;
+}
+
 export function useDeleteEvent() {
   const queryClient = useQueryClient();
   return useActionMutation<