@agent-native/core 0.154.5 → 0.157.0

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

@@ -107,6 +107,7 @@ interface WeekViewProps {
   ) => void;
   onDraftDiscard?: (eventId: string) => void;
   isLoading?: boolean;
+  weekStartsOn?: 0 | 1;
 }
 
 // [startHour, startMin, durationMin, widthPct] per day column (Sun–Sat)
@@ -559,6 +560,7 @@ export const WeekView = memo(function WeekView({
   onDraftCreate,
   onDraftDiscard,
   isLoading = false,
+  weekStartsOn = 0,
 }: WeekViewProps) {
   const t = useT();
   const workingLocationLabels = useMemo(
@@ -606,8 +608,14 @@ export const WeekView = memo(function WeekView({
   }, []);
 
   const { prefs } = useViewPreferences();
-  const weekStart = useMemo(() => startOfWeek(selectedDate), [selectedDate]);
-  const weekEnd = useMemo(() => endOfWeek(selectedDate), [selectedDate]);
+  const weekStart = useMemo(
+    () => startOfWeek(selectedDate, { weekStartsOn }),
+    [selectedDate, weekStartsOn],
+  );
+  const weekEnd = useMemo(
+    () => endOfWeek(selectedDate, { weekStartsOn }),
+    [selectedDate, weekStartsOn],
+  );
   // 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.
@@ -1408,7 +1416,7 @@ export const WeekView = memo(function WeekView({
 
                 {/* Skeleton events when loading */}
                 {isLoading &&
-                  WEEK_SKELETONS[dayIndex]?.map(
+                  WEEK_SKELETONS[day.getDay()]?.map(
                     ([startHour, startMin, duration, widthPct], i) => {
                       const topPx =
                         ((startHour - START_HOUR) * 60 + startMin) *

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

@@ -5,6 +5,7 @@ import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
+import { getWeekdayOrder, getWeekStartsOn } from "@shared/calendar-week";
 import {
   IconCalendar,
   IconSettings,
@@ -77,6 +78,7 @@ import {
   useRemoveOverlayPerson,
   useUpdateOverlayPersonColor,
 } from "@/hooks/use-overlay-people";
+import { useSettings } from "@/hooks/use-settings";
 import { useViewPreferences } from "@/hooks/use-view-preferences";
 import {
   CALENDAR_COLORS,
@@ -200,6 +202,8 @@ function MiniCalendar({
 }) {
   const [viewMonth, setViewMonth] = useState(() => startOfMonth(selectedDate));
   const [pickerOpen, setPickerOpen] = useState(false);
+  const { data: settings } = useSettings();
+  const weekStartsOn = getWeekStartsOn(settings?.weekStart);
 
   // Sync viewMonth when selectedDate changes to a different month
   useEffect(() => {
@@ -211,8 +215,8 @@ function MiniCalendar({
   const days = useMemo(() => {
     const monthStart = startOfMonth(viewMonth);
     const monthEnd = endOfMonth(viewMonth);
-    const calStart = startOfWeek(monthStart);
-    const calEnd = endOfWeek(monthEnd);
+    const calStart = startOfWeek(monthStart, { weekStartsOn });
+    const calEnd = endOfWeek(monthEnd, { weekStartsOn });
 
     const result: Date[] = [];
     let current = calStart;
@@ -221,9 +225,11 @@ function MiniCalendar({
       current = addDays(current, 1);
     }
     return result;
-  }, [viewMonth]);
+  }, [viewMonth, weekStartsOn]);
 
-  const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const weekdays = getWeekdayOrder(weekStartsOn).map(
+    (day) => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][day],
+  );
 
   return (
     <div className="px-3 py-3">

package/corpus/templates/calendar/app/i18n-data.ts

@@ -265,6 +265,9 @@ const enUS = {
     defaultDurationLabel: "Default event duration (minutes)",
     defaultDurationHelp:
       "Default length for new calendar events and booking slots. Booking links can override this per link.",
+    weekStartLabel: "Week starts on",
+    weekStartSunday: "Sunday - Saturday",
+    weekStartMonday: "Monday - Sunday",
   },
   eventDialog: {
     eventUpdated: "Event updated",
@@ -4303,6 +4306,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "默认事件时长（分钟）",
       defaultDurationHelp:
         "新日历事件和预约时段的默认长度。预约链接可按链接覆盖此设置。",
+      weekStartLabel: "每周从哪天开始",
+      weekStartSunday: "周日 - 周六",
+      weekStartMonday: "周一 - 周日",
     },
     eventDialog: {
       eventUpdated: "事件已更新",
@@ -4372,6 +4378,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Duración predeterminada del evento (minutos)",
       defaultDurationHelp:
         "Duración predeterminada para eventos nuevos y franjas de reserva. Cada enlace de reserva puede anularla.",
+      weekStartLabel: "La semana empieza el",
+      weekStartSunday: "Domingo - sábado",
+      weekStartMonday: "Lunes - domingo",
     },
     eventDialog: {
       eventUpdated: "Evento actualizado",
@@ -4442,6 +4451,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Durée d'événement par défaut (minutes)",
       defaultDurationHelp:
         "Durée par défaut des nouveaux événements et créneaux de réservation. Chaque lien de réservation peut la remplacer.",
+      weekStartLabel: "La semaine commence le",
+      weekStartSunday: "Dimanche - samedi",
+      weekStartMonday: "Lundi - dimanche",
     },
     eventDialog: {
       eventUpdated: "Événement mis à jour",
@@ -4512,6 +4524,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Standarddauer für Ereignisse (Minuten)",
       defaultDurationHelp:
         "Standardlänge für neue Kalenderereignisse und Buchungsslots. Buchungslinks können sie pro Link überschreiben.",
+      weekStartLabel: "Wochenbeginn",
+      weekStartSunday: "Sonntag - Samstag",
+      weekStartMonday: "Montag - Sonntag",
     },
     eventDialog: {
       eventUpdated: "Ereignis aktualisiert",
@@ -4581,6 +4596,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "デフォルトのイベント時間（分）",
       defaultDurationHelp:
         "新しいカレンダーイベントと予約枠のデフォルト時間です。予約リンクごとに上書きできます。",
+      weekStartLabel: "週の開始日",
+      weekStartSunday: "日曜日 - 土曜日",
+      weekStartMonday: "月曜日 - 日曜日",
     },
     eventDialog: {
       eventUpdated: "イベントを更新しました",
@@ -4647,6 +4665,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "기본 이벤트 시간(분)",
       defaultDurationHelp:
         "새 캘린더 이벤트와 예약 슬롯의 기본 길이입니다. 예약 링크별로 재정의할 수 있습니다.",
+      weekStartLabel: "주 시작일",
+      weekStartSunday: "일요일 - 토요일",
+      weekStartMonday: "월요일 - 일요일",
     },
     eventDialog: {
       eventUpdated: "이벤트가 업데이트되었습니다",
@@ -4716,6 +4737,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "Duração padrão do evento (minutos)",
       defaultDurationHelp:
         "Duração padrão para novos eventos e horários de agendamento. Links de agendamento podem substituir isso por link.",
+      weekStartLabel: "A semana começa no",
+      weekStartSunday: "Domingo - sábado",
+      weekStartMonday: "Segunda-feira - domingo",
     },
     eventDialog: {
       eventUpdated: "Evento atualizado",
@@ -4784,6 +4808,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "डिफ़ॉल्ट इवेंट अवधि (मिनट)",
       defaultDurationHelp:
         "नए कैलेंडर इवेंट और बुकिंग स्लॉट की डिफ़ॉल्ट लंबाई। बुकिंग लिंक इसे प्रति लिंक बदल सकते हैं।",
+      weekStartLabel: "सप्ताह की शुरुआत",
+      weekStartSunday: "रविवार - शनिवार",
+      weekStartMonday: "सोमवार - रविवार",
     },
     eventDialog: {
       eventUpdated: "इवेंट अपडेट हो गया",
@@ -4851,6 +4878,9 @@ const translatedCalendarExtras = {
       defaultDurationLabel: "مدة الحدث الافتراضية (بالدقائق)",
       defaultDurationHelp:
         "المدة الافتراضية لأحداث التقويم الجديدة وفتحات الحجز. يمكن لروابط الحجز تجاوزها لكل رابط.",
+      weekStartLabel: "يبدأ الأسبوع يوم",
+      weekStartSunday: "الأحد - السبت",
+      weekStartMonday: "الاثنين - الأحد",
     },
     eventDialog: {
       eventUpdated: "تم تحديث الحدث",

package/corpus/templates/calendar/app/lib/availability-schedule.ts

@@ -0,0 +1,53 @@
+import type { DaySchedule, TimeSlot } from "../../shared/api";
+
+export const DEFAULT_TIME_SLOT: TimeSlot = {
+  start: "09:00",
+  end: "17:00",
+};
+
+export function getEditableTimeSlots(day: DaySchedule): TimeSlot[] {
+  return day.slots.length > 0 ? day.slots : [{ ...DEFAULT_TIME_SLOT }];
+}
+
+export function setDayEnabled(day: DaySchedule, enabled: boolean): DaySchedule {
+  return {
+    ...day,
+    enabled,
+    slots: enabled ? getEditableTimeSlots(day) : day.slots,
+  };
+}
+
+export function updateTimeSlot(
+  day: DaySchedule,
+  slotIndex: number,
+  field: "start" | "end",
+  value: string,
+): DaySchedule {
+  return {
+    ...day,
+    slots: getEditableTimeSlots(day).map((slot, index) =>
+      index === slotIndex ? { ...slot, [field]: value } : slot,
+    ),
+  };
+}
+
+export function addTimeSlot(day: DaySchedule): DaySchedule {
+  return {
+    ...day,
+    slots: [...getEditableTimeSlots(day), { ...DEFAULT_TIME_SLOT }],
+  };
+}
+
+export function removeTimeSlot(
+  day: DaySchedule,
+  slotIndex: number,
+): DaySchedule {
+  const slots = getEditableTimeSlots(day).filter(
+    (_, index) => index !== slotIndex,
+  );
+
+  return {
+    ...day,
+    slots: slots.length > 0 ? slots : [{ ...DEFAULT_TIME_SLOT }],
+  };
+}

package/corpus/templates/calendar/app/lib/event-form-utils.ts

@@ -230,6 +230,11 @@ export function getLocalTimezone() {
   return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
 }
 
+/** New event drafts follow the viewer's browser zone unless they name one. */
+export function resolveEventTimezone(timezone?: string | null) {
+  return timezone?.trim() || getLocalTimezone();
+}
+
 function getTimezoneOffsetMs(date: Date, timezone: string) {
   const parts = new Intl.DateTimeFormat("en-US", {
     timeZone: timezone,

package/corpus/templates/calendar/app/pages/AvailabilitySettings.tsx

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client/i18n";
 import type { AvailabilityConfig, DaySchedule } from "@shared/api";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import { toast } from "sonner";
 
@@ -21,6 +22,14 @@ import {
   useUpdateAvailability,
 } from "@/hooks/use-availability";
 import { useDbStatus } from "@/hooks/use-db-status";
+import {
+  DEFAULT_TIME_SLOT,
+  addTimeSlot,
+  getEditableTimeSlots,
+  removeTimeSlot,
+  setDayEnabled,
+  updateTimeSlot,
+} from "@/lib/availability-schedule";
 import { copyTextToClipboard } from "@/lib/clipboard";
 
 type DayName = keyof AvailabilityConfig["weeklySchedule"];
@@ -37,7 +46,7 @@ const DAYS: { key: DayName }[] = [
 
 const DEFAULT_SCHEDULE: DaySchedule = {
   enabled: false,
-  slots: [{ start: "09:00", end: "17:00" }],
+  slots: [{ ...DEFAULT_TIME_SLOT }],
 };
 
 export default function AvailabilitySettings() {
@@ -93,17 +102,36 @@ export default function AvailabilitySettings() {
   function updateDay(day: DayName, updates: Partial<DaySchedule>) {
     setSchedule((prev) => ({
       ...prev,
-      [day]: { ...prev[day], ...updates },
+      [day]:
+        typeof updates.enabled === "boolean"
+          ? setDayEnabled(prev[day], updates.enabled)
+          : { ...prev[day], ...updates },
     }));
   }
 
-  function updateDaySlot(day: DayName, field: "start" | "end", value: string) {
+  function updateDaySlot(
+    day: DayName,
+    slotIndex: number,
+    field: "start" | "end",
+    value: string,
+  ) {
     setSchedule((prev) => ({
       ...prev,
-      [day]: {
-        ...prev[day],
-        slots: [{ ...prev[day].slots[0], [field]: value }],
-      },
+      [day]: updateTimeSlot(prev[day], slotIndex, field, value),
+    }));
+  }
+
+  function addDaySlot(day: DayName) {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: addTimeSlot(prev[day]),
+    }));
+  }
+
+  function removeDaySlot(day: DayName, slotIndex: number) {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: removeTimeSlot(prev[day], slotIndex),
     }));
   }
 
@@ -181,7 +209,7 @@ export default function AvailabilitySettings() {
           </div>
           {DAYS.map(({ key }) => {
             const day = schedule[key];
-            const slot = day.slots[0] ?? { start: "09:00", end: "17:00" };
+            const slots = getEditableTimeSlots(day);
             return (
               <div
                 key={key}
@@ -198,26 +226,60 @@ export default function AvailabilitySettings() {
                 </div>
 
                 {day.enabled ? (
-                  <div className="flex items-center gap-2">
-                    <Input
-                      type="time"
-                      value={slot.start}
-                      onChange={(e) =>
-                        updateDaySlot(key, "start", e.target.value)
-                      }
-                      className="w-28 sm:w-32"
-                    />
-                    <span className="text-muted-foreground">
-                      {t("bookingLinks.to")}
-                    </span>
-                    <Input
-                      type="time"
-                      value={slot.end}
-                      onChange={(e) =>
-                        updateDaySlot(key, "end", e.target.value)
-                      }
-                      className="w-28 sm:w-32"
-                    />
+                  <div className="min-w-0 flex-1 space-y-2">
+                    {slots.map((slot, slotIndex) => (
+                      <div
+                        key={`${key}-${slotIndex}`}
+                        className="flex flex-wrap items-center gap-2"
+                      >
+                        <Input
+                          type="time"
+                          value={slot.start}
+                          onChange={(e) =>
+                            updateDaySlot(
+                              key,
+                              slotIndex,
+                              "start",
+                              e.target.value,
+                            )
+                          }
+                          className="w-28 sm:w-32"
+                        />
+                        <span className="text-muted-foreground">
+                          {t("bookingLinks.to")}
+                        </span>
+                        <Input
+                          type="time"
+                          value={slot.end}
+                          onChange={(e) =>
+                            updateDaySlot(key, slotIndex, "end", e.target.value)
+                          }
+                          className="w-28 sm:w-32"
+                        />
+                        {slots.length > 1 && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 px-2 text-muted-foreground hover:text-destructive"
+                            onClick={() => removeDaySlot(key, slotIndex)}
+                          >
+                            <IconTrash className="mr-1.5 h-3.5 w-3.5" />
+                            {t("eventForm.delete")}
+                          </Button>
+                        )}
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 px-2"
+                      onClick={() => addDaySlot(key)}
+                    >
+                      <IconPlus className="mr-1.5 h-3.5 w-3.5" />
+                      {t("bookingLinks.add")}
+                    </Button>
                   </div>
                 ) : (
                   <span className="text-sm text-muted-foreground">