@powerportalspro/react-calendar 0.0.0-stage → 12.0.0

package/dist/index.cjs

@@ -0,0 +1,3170 @@
+'use strict';
+
+var reactComponents = require('@fluentui/react-components');
+var reactIcons = require('@fluentui/react-icons');
+var FullCalendar = require('@fullcalendar/react');
+var dayGridPlugin = require('@fullcalendar/react/daygrid');
+var interactionPlugin = require('@fullcalendar/react/interaction');
+var listPlugin = require('@fullcalendar/react/list');
+var timeGridPlugin = require('@fullcalendar/react/timegrid');
+var formaTheme = require('@fullcalendar/react/themes/forma');
+var core = require('@powerportalspro/core');
+var react$1 = require('@powerportalspro/react');
+var reactFluent = require('@powerportalspro/react-fluent');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var FullCalendar__default = /*#__PURE__*/_interopDefault(FullCalendar);
+var dayGridPlugin__default = /*#__PURE__*/_interopDefault(dayGridPlugin);
+var interactionPlugin__default = /*#__PURE__*/_interopDefault(interactionPlugin);
+var listPlugin__default = /*#__PURE__*/_interopDefault(listPlugin);
+var timeGridPlugin__default = /*#__PURE__*/_interopDefault(timeGridPlugin);
+var formaTheme__default = /*#__PURE__*/_interopDefault(formaTheme);
+
+// src/calendar.tsx
+
+// src/appointment-click.ts
+var GUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function appointmentToOpen(event, hostAppointments) {
+  if (hostAppointments || !GUID.test(event.id)) return null;
+  return { id: event.id, subject: event.title, recurring: Boolean(event.extendedProps["recurring"]) };
+}
+var CalendarContext = react.createContext(null);
+function useCalendarContext() {
+  const context = react.useContext(CalendarContext);
+  if (!context) throw new Error("useCalendarContext must be used in a <Calendar>, among its toolbar items.");
+  return context;
+}
+
+// src/recurrence-pattern.ts
+var RecurrenceFrequency = {
+  Daily: 0,
+  Weekly: 1,
+  Monthly: 2,
+  Yearly: 3
+};
+var RecurrenceEnd = {
+  /** Never: Dataverse adds occurrences up to a year ahead, and more as time passes. */
+  Never: 1,
+  AfterOccurrences: 2,
+  /** On a date, its last occurrence on or before it. */
+  OnDate: 3
+};
+function boolColumn(value) {
+  return { $type: BOOL, value };
+}
+var SERIES_TABLE = "recurringappointmentmaster";
+var SHAPE_COLUMNS = ["daysofweekmask", "dayofmonth", "instance", "monthofyear", "occurrences", "patternenddate"];
+var WEEKDAYS = 62;
+var LAST_INSTANCE = 5;
+var BOOL = 0;
+var DATE = 2;
+var INT = 5;
+var CHOICE = 11;
+function localDay(instant, timeZone) {
+  const { year, month, day } = zonedParts(instant, timeZone);
+  return { year, month, day, weekday: new Date(Date.UTC(year, month - 1, day)).getUTCDay() };
+}
+function dayOf(weekday) {
+  return 1 << weekday;
+}
+function startingPattern(frequency, start) {
+  return {
+    frequency,
+    interval: 1,
+    weekdaysOnly: false,
+    days: dayOf(start.weekday),
+    byWeekday: false,
+    end: RecurrenceEnd.Never,
+    occurrences: 10,
+    endDate: null
+  };
+}
+function instanceOf(day) {
+  const daysInMonth = new Date(Date.UTC(day.year, day.month, 0)).getUTCDate();
+  return day.day + 7 > daysInMonth ? LAST_INSTANCE : Math.floor((day.day - 1) / 7) + 1;
+}
+function seriesColumns(pattern, start, end, timeZone, existing) {
+  const local = localDay(start, timeZone);
+  const day = dayOf(local.weekday);
+  const weekdaysOnly = pattern.frequency === RecurrenceFrequency.Daily && pattern.weekdaysOnly;
+  const yearlyOrMonthly = pattern.frequency === RecurrenceFrequency.Monthly || pattern.frequency === RecurrenceFrequency.Yearly;
+  const byWeekday = yearlyOrMonthly && pattern.byWeekday;
+  const columns = {
+    recurrencepatterntype: { $type: CHOICE, value: weekdaysOnly ? RecurrenceFrequency.Weekly : pattern.frequency },
+    interval: { $type: INT, value: weekdaysOnly ? 1 : Math.max(1, pattern.interval) },
+    starttime: { $type: DATE, value: start.toISOString() },
+    endtime: { $type: DATE, value: end.toISOString() },
+    patternstartdate: { $type: DATE, value: midnight(local, timeZone).toISOString() },
+    isweekdaypattern: { $type: BOOL, value: weekdaysOnly },
+    isnthmonthly: { $type: BOOL, value: byWeekday && pattern.frequency === RecurrenceFrequency.Monthly },
+    isnthyearly: { $type: BOOL, value: byWeekday && pattern.frequency === RecurrenceFrequency.Yearly }
+  };
+  if (weekdaysOnly) columns["daysofweekmask"] = { $type: INT, value: WEEKDAYS };
+  else if (pattern.frequency === RecurrenceFrequency.Weekly)
+    columns["daysofweekmask"] = { $type: INT, value: pattern.days === 0 ? day : pattern.days };
+  if (yearlyOrMonthly) {
+    if (byWeekday) {
+      columns["instance"] = { $type: CHOICE, value: instanceOf(local) };
+      columns["daysofweekmask"] = { $type: INT, value: day };
+    } else {
+      columns["dayofmonth"] = { $type: INT, value: local.day };
+    }
+    if (pattern.frequency === RecurrenceFrequency.Yearly) columns["monthofyear"] = { $type: CHOICE, value: local.month };
+  }
+  columns["patternendtype"] = { $type: CHOICE, value: pattern.end };
+  if (pattern.end === RecurrenceEnd.AfterOccurrences)
+    columns["occurrences"] = { $type: INT, value: Math.max(1, pattern.occurrences) };
+  else if (pattern.end === RecurrenceEnd.OnDate && pattern.endDate) {
+    const [year, month, date] = pattern.endDate.split("-").map(Number);
+    columns["patternenddate"] = {
+      $type: DATE,
+      value: midnight({ year, month, day: date }, timeZone).toISOString()
+    };
+  }
+  const held = existing?.properties ?? {};
+  const cleared = SHAPE_COLUMNS.filter((column) => !(column in columns) && held[column] != null);
+  return { ...columns, ...Object.fromEntries(cleared.map((column) => [column, null])) };
+}
+function toSeries(pattern, start, end, timeZone) {
+  return { tableName: SERIES_TABLE, properties: seriesColumns(pattern, start, end, timeZone) };
+}
+function fromSeries(series, timeZone) {
+  const properties = series.properties;
+  const value = (column) => properties[column]?.value;
+  const type = value("recurrencepatterntype");
+  if (typeof type !== "number" || !Object.values(RecurrenceFrequency).includes(type)) return null;
+  const endType = value("patternendtype");
+  const end = Object.values(RecurrenceEnd).includes(endType) ? endType : RecurrenceEnd.Never;
+  const endMoment = value("patternenddate");
+  const endDay = typeof endMoment === "string" ? localDay(new Date(endMoment), timeZone) : null;
+  const weekdaysOnly = value("isweekdaypattern") === true;
+  return {
+    frequency: weekdaysOnly ? RecurrenceFrequency.Daily : type,
+    interval: weekdaysOnly ? 1 : Math.max(1, Number(value("interval") ?? 1)),
+    weekdaysOnly,
+    days: weekdaysOnly ? 0 : Number(value("daysofweekmask") ?? 0),
+    byWeekday: value("isnthmonthly") === true || value("isnthyearly") === true,
+    end,
+    occurrences: Number(value("occurrences") ?? 10),
+    endDate: endDay ? isoDate(endDay) : null
+  };
+}
+function monthlyOn(pattern, start, locale, t, phrases = "summary") {
+  return pattern.byWeekday ? t(`${phrases}.on-the-weekday`, [t(`instances.${instanceOf(start)}`), dayName(start.weekday, locale)]) : t(`${phrases}.on-day`, [start.day]);
+}
+function yearlyOn(pattern, start, locale, t, phrases = "summary") {
+  return pattern.byWeekday ? t(`${phrases}.on-the-weekday-of`, [
+    t(`instances.${instanceOf(start)}`),
+    dayName(start.weekday, locale),
+    monthName(start.month, locale)
+  ]) : t(`${phrases}.on-date`, [
+    new Intl.DateTimeFormat(locale, { month: "long", day: "numeric", timeZone: "UTC" }).format(
+      Date.UTC(2e3, start.month - 1, start.day)
+    )
+  ]);
+}
+function describeRecurrence(pattern, start, locale, t) {
+  const interval = Math.max(1, pattern.interval);
+  const many = interval > 1;
+  const days = () => dayNames(pattern.days === 0 ? dayOf(start.weekday) : pattern.days, locale);
+  let repeats;
+  switch (pattern.frequency) {
+    case RecurrenceFrequency.Daily:
+      repeats = pattern.weekdaysOnly ? t("summary.every-weekday") : many ? t("summary.every-n-days", [interval]) : t("summary.every-day");
+      break;
+    case RecurrenceFrequency.Weekly:
+      repeats = many ? t("summary.every-n-weeks", [interval, days()]) : t("summary.every-week", [days()]);
+      break;
+    case RecurrenceFrequency.Monthly:
+      repeats = many ? t("summary.every-n-months", [interval, monthlyOn(pattern, start, locale, t)]) : t("summary.every-month", [monthlyOn(pattern, start, locale, t)]);
+      break;
+    default:
+      repeats = many ? t("summary.every-n-years", [interval, yearlyOn(pattern, start, locale, t)]) : t("summary.every-year", [yearlyOn(pattern, start, locale, t)]);
+  }
+  if (pattern.end === RecurrenceEnd.AfterOccurrences) return t("summary.times", [repeats, Math.max(1, pattern.occurrences)]);
+  if (pattern.end === RecurrenceEnd.OnDate && pattern.endDate) {
+    const [year, month, day] = pattern.endDate.split("-").map(Number);
+    return t("summary.until", [repeats, new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(Date.UTC(year, month - 1, day))]);
+  }
+  return repeats;
+}
+function firstDayOfWeek(locale) {
+  try {
+    const intlLocale = new Intl.Locale(locale);
+    const firstDay = intlLocale.getWeekInfo?.().firstDay ?? intlLocale.weekInfo?.firstDay;
+    return firstDay === void 0 ? 0 : firstDay % 7;
+  } catch {
+    return 0;
+  }
+}
+function weekOrder(locale) {
+  const first = firstDayOfWeek(locale);
+  return Array.from({ length: 7 }, (_, i) => (first + i) % 7);
+}
+function dayName(weekday, locale, width = "long") {
+  return new Intl.DateTimeFormat(locale, { weekday: width, timeZone: "UTC" }).format(Date.UTC(2026, 10, 1 + weekday));
+}
+function monthName(month, locale) {
+  return new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" }).format(Date.UTC(2e3, month - 1, 1));
+}
+function dayNames(days, locale) {
+  return weekOrder(locale).filter((weekday) => (days & dayOf(weekday)) !== 0).map((weekday) => dayName(weekday, locale)).join(", ");
+}
+function isoDate(day) {
+  return `${String(day.year).padStart(4, "0")}-${String(day.month).padStart(2, "0")}-${String(day.day).padStart(2, "0")}`;
+}
+function zonedParts(instant, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    ...timeZone ? { timeZone } : {},
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hourCycle: "h23"
+  }).formatToParts(instant);
+  const part = (type) => Number(parts.find((x) => x.type === type)?.value ?? 0);
+  return { year: part("year"), month: part("month"), day: part("day"), hour: part("hour"), minute: part("minute") };
+}
+function allDayTimes(start, end, allDay, timeZone) {
+  const first = localDay(start, timeZone);
+  if (!allDay) {
+    const at = hourOn(first, 9, timeZone);
+    return { start: at, end: new Date(at.getTime() + 30 * 60 * 1e3) };
+  }
+  const last = zonedParts(end, timeZone);
+  const endsAtMidnight = last.hour === 0 && last.minute === 0;
+  const after = addDays(last, endsAtMidnight ? 0 : 1);
+  const dayAfter = isoDate(after) > isoDate(first) ? after : addDays(first, 1);
+  return { start: midnight(first, timeZone), end: midnight(dayAfter, timeZone) };
+}
+function addDays(day, days) {
+  const moved = new Date(Date.UTC(day.year, day.month - 1, day.day + days));
+  return { year: moved.getUTCFullYear(), month: moved.getUTCMonth() + 1, day: moved.getUTCDate() };
+}
+function midnight(day, timeZone) {
+  return hourOn(day, 0, timeZone);
+}
+function hourOn(day, hour, timeZone) {
+  const target = Date.UTC(day.year, day.month - 1, day.day, hour);
+  let guess = target;
+  for (let i = 0; i < 3; i++) {
+    const p = zonedParts(new Date(guess), timeZone);
+    const shown = Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute);
+    if (shown === target) return new Date(guess);
+    guess += target - shown;
+  }
+  while (Date.UTC(...partsOf(zonedParts(new Date(guess), timeZone))) < target) guess += 30 * 60 * 1e3;
+  return new Date(guess);
+}
+function partsOf(p) {
+  return [p.year, p.month - 1, p.day, p.hour, p.minute];
+}
+var MAX_INTERVAL = 99;
+var MAX_OCCURRENCES = 999;
+var NO_REPEAT = "none";
+var FREQUENCY_NAMES = {
+  [RecurrenceFrequency.Daily]: "daily",
+  [RecurrenceFrequency.Weekly]: "weekly",
+  [RecurrenceFrequency.Monthly]: "monthly",
+  [RecurrenceFrequency.Yearly]: "yearly"
+};
+var useStyles = reactComponents.makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalM
+  },
+  // A radio with a field beside it: apart from the radios above and below, which its field would
+  // otherwise touch.
+  row: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: reactComponents.tokens.spacingHorizontalS,
+    marginTop: reactComponents.tokens.spacingVerticalS,
+    marginBottom: reactComponents.tokens.spacingVerticalS
+  },
+  every: {
+    display: "flex",
+    alignItems: "flex-end",
+    flexWrap: "wrap",
+    gap: reactComponents.tokens.spacingHorizontalS
+  },
+  number: {
+    width: "96px"
+  },
+  unit: {
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  days: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: reactComponents.tokens.spacingHorizontalXS
+  },
+  note: {
+    color: reactComponents.tokens.colorNeutralForeground3
+  }
+});
+function RecurrenceEdit({ value, onChange, start, allowNone = true, readOnly = false, locale }) {
+  const styles = useStyles();
+  const t = react$1.usePrefixedT("app.components.calendar.recurrence");
+  const id = react.useId();
+  const language = locale ?? navigator.language;
+  const startDay = react.useRef(start.weekday);
+  react.useEffect(() => {
+    const was = startDay.current;
+    startDay.current = start.weekday;
+    if (was !== start.weekday && value?.frequency === RecurrenceFrequency.Weekly && value.days === dayOf(was)) {
+      onChange({ ...value, days: dayOf(start.weekday) });
+    }
+  }, [start.weekday]);
+  const frequencies = Object.values(RecurrenceFrequency);
+  const chosen = value ? String(value.frequency) : NO_REPEAT;
+  const frequencyLabel = (option) => option === NO_REPEAT ? t("never") : t(`frequencies.${FREQUENCY_NAMES[Number(option)]}`);
+  const changeFrequency = (option) => {
+    if (option === NO_REPEAT) return onChange(null);
+    const frequency = Number(option);
+    if (value?.frequency === frequency) return;
+    const pattern = startingPattern(frequency, start);
+    onChange(value ? { ...pattern, end: value.end, occurrences: value.occurrences, endDate: value.endDate } : pattern);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: t("label"), children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Dropdown,
+      {
+        value: frequencyLabel(chosen),
+        selectedOptions: [chosen],
+        disabled: readOnly,
+        onOptionSelect: (_, data) => data.optionValue !== void 0 && changeFrequency(data.optionValue),
+        children: [...allowNone ? [NO_REPEAT] : [], ...frequencies.map(String)].map((option) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: option, children: frequencyLabel(option) }, option))
+      }
+    ) }),
+    value && /* @__PURE__ */ jsxRuntime.jsx(PatternFields, { value, onChange, start, readOnly, locale: language, id })
+  ] });
+}
+function monthOn(day) {
+  const year = day.month === 12 ? day.year + 1 : day.year;
+  const month = day.month % 12 + 1;
+  const daysInMonth = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  return isoDate({ year, month, day: Math.min(day.day, daysInMonth) });
+}
+function PatternFields({
+  value,
+  onChange,
+  start,
+  readOnly,
+  locale,
+  id
+}) {
+  const styles = useStyles();
+  const t = react$1.usePrefixedT("app.components.calendar.recurrence");
+  const clamp = (n, max) => Math.min(max, Math.max(1, Math.round(n ?? 1)));
+  const number = (displayValue, picked) => picked ?? (displayValue === void 0 ? void 0 : Number(displayValue));
+  const changeEnd = (end) => onChange({
+    ...value,
+    end,
+    endDate: end === RecurrenceEnd.OnDate ? value.endDate ?? monthOn(start) : value.endDate
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.every, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: t("every"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SpinButton,
+        {
+          className: styles.number,
+          value: value.interval,
+          min: 1,
+          max: MAX_INTERVAL,
+          disabled: readOnly || value.frequency === RecurrenceFrequency.Daily && value.weekdaysOnly,
+          onChange: (_, data) => onChange({ ...value, interval: clamp(number(data.displayValue, data.value), MAX_INTERVAL) })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { className: styles.unit, children: t(`units.${FREQUENCY_NAMES[value.frequency]}`) })
+    ] }),
+    value.frequency === RecurrenceFrequency.Daily && /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Checkbox,
+      {
+        label: t("weekdays-only"),
+        checked: value.weekdaysOnly,
+        disabled: readOnly,
+        onChange: (_, data) => onChange({ ...value, weekdaysOnly: data.checked === true })
+      }
+    ),
+    value.frequency === RecurrenceFrequency.Weekly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.days, role: "group", "aria-label": t("days"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { children: t("days") }),
+      weekOrder(locale).map((weekday) => {
+        const flag = dayOf(weekday);
+        const pressed = (value.days & flag) !== 0;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ToggleButton,
+          {
+            shape: "circular",
+            size: "small",
+            checked: pressed,
+            disabled: readOnly,
+            title: dayName(weekday, locale),
+            "aria-label": dayName(weekday, locale),
+            onClick: () => {
+              const days = value.days ^ flag;
+              if (days !== 0) onChange({ ...value, days });
+            },
+            children: dayName(weekday, locale, "narrow")
+          },
+          weekday
+        );
+      })
+    ] }),
+    (value.frequency === RecurrenceFrequency.Monthly || value.frequency === RecurrenceFrequency.Yearly) && /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.RadioGroup,
+      {
+        value: value.byWeekday ? "weekday" : "date",
+        disabled: readOnly,
+        onChange: (_, data) => onChange({ ...value, byWeekday: data.value === "weekday" }),
+        children: ["date", "weekday"].map((by) => {
+          const option = { ...value, byWeekday: by === "weekday" };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Radio,
+            {
+              value: by,
+              label: value.frequency === RecurrenceFrequency.Monthly ? monthlyOn(option, start, locale, t, "options") : yearlyOn(option, start, locale, t, "options")
+            },
+            by
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: t("ends"), children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.RadioGroup, { value: String(value.end), disabled: readOnly, onChange: (_, data) => changeEnd(Number(data.value)), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: String(RecurrenceEnd.Never), label: t("end-never") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: String(RecurrenceEnd.AfterOccurrences), label: t("end-after") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SpinButton,
+          {
+            className: styles.number,
+            "aria-label": t("end-after-unit"),
+            value: value.occurrences,
+            min: 1,
+            max: MAX_OCCURRENCES,
+            disabled: readOnly,
+            onChange: (_, data) => onChange({ ...value, end: RecurrenceEnd.AfterOccurrences, occurrences: clamp(number(data.displayValue, data.value), MAX_OCCURRENCES) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { className: styles.unit, children: t("end-after-unit") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: String(RecurrenceEnd.OnDate), label: t("end-on") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Input,
+          {
+            type: "date",
+            id: `${id}-end`,
+            "aria-label": t("end-on"),
+            value: value.endDate ?? "",
+            min: isoDate(start),
+            disabled: readOnly,
+            onChange: (_, data) => data.value && onChange({ ...value, end: RecurrenceEnd.OnDate, endDate: data.value })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { "aria-live": "polite", children: describeRecurrence(value, start, locale, t) }),
+    value.end === RecurrenceEnd.Never && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { size: 200, className: styles.note, children: t("never-ends") })
+  ] });
+}
+var APPOINTMENT_STRINGS = ["tables.appointment"];
+var SERIES_STRINGS = [`tables.${SERIES_TABLE}`];
+var OPEN_STATES = /* @__PURE__ */ new Set([0, 3]);
+var useStyles2 = reactComponents.makeStyles({
+  fields: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalM
+  },
+  // The form stays out until the appointment is read, rather than showing empty fields.
+  loading: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "160px"
+  },
+  recurring: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalXS,
+    color: reactComponents.tokens.colorNeutralForeground2
+  }
+});
+function AppointmentDetailsDialog({
+  appointment,
+  newAppointment: newAppointment2 = null,
+  editable = false,
+  regardingTables,
+  onClose,
+  onSaved,
+  children,
+  location = "center"
+}) {
+  const t = react$1.usePrefixedT("app.components.calendar");
+  const tAll = react$1.useT();
+  const open = appointment !== null || newAppointment2 !== null;
+  const isSeries = appointment?.isSeries === true;
+  const mayCreateSeries = useMayCreateSeries(open && editable && !isSeries && appointment?.recurring !== true);
+  const saved = () => {
+    onClose();
+    onSaved?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactFluent.RecordDialogShell,
+    {
+      open,
+      onOpenChange: (next) => !next && onClose(),
+      location,
+      tableName: isSeries ? SERIES_TABLE : "appointment",
+      enablePanelResizing: true,
+      children: open && /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.RecordContext,
+        {
+          table: isSeries ? SERIES_TABLE : "appointment",
+          ...appointment ? { id: appointment.id } : { initialRecord: newAppointment2 },
+          isolated: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactFluent.RecordDialogFrame,
+            {
+              location,
+              title: appointment ? appointment.subject : t("new-appointment"),
+              actions: editable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DeleteAction, { seriesId: appointment?.seriesId ?? null, onDeleted: saved }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactFluent.SaveContextButton, { appearance: "primary", onSaved: saved }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { onClick: onClose, children: tAll("app.buttons.cancel.label") })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "primary", onClick: onClose, children: t("close") }),
+              children: isSeries ? /* @__PURE__ */ jsxRuntime.jsx(SeriesRecord, { editable, regardingTables }) : /* @__PURE__ */ jsxRuntime.jsx(
+                AppointmentRecord,
+                {
+                  recurring: appointment?.recurring ?? false,
+                  editable,
+                  creating: !appointment,
+                  regardingTables,
+                  mayCreateSeries,
+                  children
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function RecurringChoiceDialog({ appointment, onChoose, onClose }) {
+  const t = react$1.usePrefixedT("app.components.calendar.open-recurring");
+  const tAll = react$1.useT();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open: appointment !== null, onOpenChange: (_, data) => !data.open && onClose(), modalType: "modal", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: t("message") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { fluid: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "primary", onClick: () => onChoose(false), children: t("occurrence") }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { onClick: () => onChoose(true), children: t("series") }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", onClick: onClose, children: tAll("app.buttons.cancel.label") })
+    ] })
+  ] }) }) });
+}
+function useMayCreateSeries(asked) {
+  const { ppp, authState } = react$1.usePowerPortalsPro();
+  const user = authState.status === "authenticated" ? authState.user?.userId : null;
+  const [answer, setAnswer] = react.useState(null);
+  const asking = react.useRef(void 0);
+  const known = answer?.user === user;
+  react.useEffect(() => {
+    if (!asked || known || asking.current === user) return;
+    asking.current = user;
+    ppp.retrieveTablePermissionsAsync(SERIES_TABLE).then((permissions) => setAnswer({ user, mayCreate: (Number(permissions) & core.TableSecurityPermission.Create) !== 0 })).catch(() => asking.current = void 0);
+  }, [asked, known, user, ppp]);
+  return answer !== null && known && answer.mayCreate;
+}
+function grants(record, permissions) {
+  return record?.permissions !== void 0 && (Number(record.permissions) & permissions) === permissions;
+}
+function useMayDeleteSeries(seriesId) {
+  const { ppp } = react$1.usePowerPortalsPro();
+  const [mayDelete, setMayDelete] = react.useState(false);
+  react.useEffect(() => {
+    setMayDelete(false);
+    if (!seriesId) return;
+    let current = true;
+    ppp.retrieveRecordAsync(SERIES_TABLE, seriesId, ["activityid"]).then((series) => current && setMayDelete(grants(series, core.TableSecurityPermission.Delete))).catch(() => current && setMayDelete(false));
+    return () => {
+      current = false;
+    };
+  }, [ppp, seriesId]);
+  return mayDelete;
+}
+function DeleteAction({ seriesId, onDeleted }) {
+  const { record } = react$1.useRecordContext();
+  const t = react$1.usePrefixedT("app.components.calendar");
+  const tAll = react$1.useT();
+  const { ppp } = react$1.usePowerPortalsPro();
+  const dialog = react$1.useDialogService();
+  const runWithOverlay = react$1.useRunWithOverlay();
+  const mayDeleteSeries = useMayDeleteSeries(seriesId);
+  const mayDelete = !!record?.id && grants(record, core.TableSecurityPermission.Delete);
+  if (!seriesId) return mayDelete ? /* @__PURE__ */ jsxRuntime.jsx(reactFluent.DeleteContextButton, { appearance: "secondary", onDeleted }) : null;
+  if (!record?.id || !mayDelete && !mayDeleteSeries) return null;
+  const remove = async (table, id, message) => {
+    const confirmation = await dialog.showConfirmationAsync(message, {
+      title: tAll("app.messages.delete-title"),
+      primaryText: tAll("app.buttons.delete.label"),
+      secondaryText: tAll("app.buttons.cancel.label")
+    });
+    if (confirmation.canceled) return;
+    try {
+      await runWithOverlay({ description: tAll("app.messages.deleting-record") }, () => ppp.deleteRecordAsync(table, id));
+      onDeleted();
+    } catch (error) {
+      await dialog.showErrorAsync(error instanceof Error ? error.message : String(error), { title: tAll("app.errors.record-delete") });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Menu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "after", children: tAll("app.buttons.delete.label") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuList, { children: [
+      mayDelete && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => void remove("appointment", record.id, tAll("app.messages.delete-record-confirmation")), children: t("delete-occurrence") }),
+      mayDeleteSeries && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => void remove(SERIES_TABLE, seriesId, t("delete-series-confirmation")), children: t("delete-series") })
+    ] }) })
+  ] });
+}
+function AppointmentRecord({
+  recurring,
+  editable,
+  creating,
+  regardingTables,
+  mayCreateSeries,
+  children
+}) {
+  const styles = useStyles2();
+  const t = react$1.usePrefixedT("app.components.calendar");
+  const { status } = react$1.useRecordContext();
+  useAllDayTimes("scheduledstart", "scheduledend");
+  react$1.useLocalization(APPOINTMENT_STRINGS);
+  const labeled = react$1.useLocalizationLoaded(APPOINTMENT_STRINGS);
+  if (status !== react$1.QueryStatus.Success || !labeled) return /* @__PURE__ */ jsxRuntime.jsx(Loading, { status });
+  if (children) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const readOnly = !editable;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fields, children: [
+    recurring && /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Text, { className: styles.recurring, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRepeatAllRegular, {}),
+      t("recurring")
+    ] }),
+    editable && /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "subject" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "scheduledstart", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "scheduledend", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "isalldayevent", readOnly }),
+    editable && !recurring && mayCreateSeries && /* @__PURE__ */ jsxRuntime.jsx(AppointmentRepeat, { creating }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "location", readOnly }),
+    !creating && /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "organizer", readOnly: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "requiredattendees", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "optionalattendees", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "regardingobjectid", readOnly, ...regardingTables && { targetTables: regardingTables } }),
+    !creating && /* @__PURE__ */ jsxRuntime.jsx(reactFluent.StatusReasonEdit, { columnName: "statuscode", allowStateChange: true, readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "description", readOnly })
+  ] });
+}
+function Loading({ status }) {
+  const styles = useStyles2();
+  const t = react$1.usePrefixedT("app.components.calendar");
+  if (status === react$1.QueryStatus.Error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: t("details-error") }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.loading, role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { label: t("details-loading") }) });
+}
+function useAllDayTimes(startColumn, endColumn) {
+  const ctx = react$1.useRecordContext();
+  const timeZone = react$1.useUserTimeZone() ?? void 0;
+  const read = valueOf(ctx.record, "isalldayevent");
+  const allDay = typeof read === "boolean" ? read : void 0;
+  const previous = react.useRef(void 0);
+  react.useEffect(() => {
+    const was = previous.current;
+    previous.current = allDay;
+    if (was === void 0 || allDay === void 0 || was === allDay) return;
+    const start = valueOf(ctx.record, startColumn);
+    const end = valueOf(ctx.record, endColumn);
+    if (typeof start !== "string") return;
+    const times = allDayTimes(new Date(start), new Date(typeof end === "string" ? end : start), allDay, timeZone);
+    ctx.setColumnValue(startColumn, { $type: 2, value: times.start.toISOString() });
+    ctx.setColumnValue(endColumn, { $type: 2, value: times.end.toISOString() });
+  }, [allDay]);
+}
+function valueOf(record, column) {
+  return record?.properties?.[column]?.value;
+}
+function AppointmentRepeat({ creating }) {
+  const ctx = react$1.useRecordContext();
+  const main = react$1.useMainContext();
+  const timeZone = react$1.useUserTimeZone() ?? void 0;
+  const [pattern, setPattern] = react.useState(null);
+  const patternRef = react.useRef(pattern);
+  patternRef.current = pattern;
+  const recordRef = react.useRef(ctx.record);
+  recordRef.current = ctx.record;
+  const timeZoneRef = react.useRef(timeZone);
+  timeZoneRef.current = timeZone;
+  const register = main?.registerDescendant;
+  react.useEffect(() => {
+    if (!register) return;
+    return register({
+      getRequests: () => seriesRequests(patternRef.current, recordRef.current, timeZoneRef.current),
+      validate: () => true,
+      refresh: async () => {
+      },
+      resetState: () => setPattern(null),
+      isDirty: () => patternRef.current !== null
+    });
+  }, [register]);
+  const notify = main?.notifyDescendantDirtyChanged;
+  react.useEffect(() => notify?.(), [notify, pattern]);
+  const record = ctx.record;
+  const state = valueOf(record, "statecode");
+  const offered = creating || grants(record, core.TableSecurityPermission.Write | core.TableSecurityPermission.Delete) && (state === void 0 || state === null || OPEN_STATES.has(Number(state)));
+  if (!offered) return null;
+  const start = valueOf(record, "scheduledstart");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RecurrenceEdit,
+    {
+      value: pattern,
+      onChange: setPattern,
+      start: localDay(typeof start === "string" ? new Date(start) : /* @__PURE__ */ new Date(), timeZone)
+    }
+  );
+}
+function seriesRequests(pattern, appointment, timeZone) {
+  const start = valueOf(appointment, "scheduledstart");
+  const end = valueOf(appointment, "scheduledend");
+  const id = core.getRecordReferenceId(appointment);
+  if (!pattern || !appointment || typeof start !== "string" || typeof end !== "string" || !id) return [];
+  const series = toSeries(pattern, new Date(start), new Date(end), timeZone);
+  if (valueOf(appointment, "isalldayevent") === true) {
+    series.properties["isalldayevent"] = boolColumn(true);
+  }
+  const request = {
+    $type: "AddRecurrenceRequest",
+    appointment: { tableName: "appointment", id },
+    series
+  };
+  return [request];
+}
+function SeriesRecord({ editable, regardingTables }) {
+  const styles = useStyles2();
+  const t = react$1.usePrefixedT("app.components.calendar");
+  const ctx = react$1.useRecordContext();
+  const timeZone = react$1.useUserTimeZone() ?? void 0;
+  react$1.useLocalization(SERIES_STRINGS);
+  const labeled = react$1.useLocalizationLoaded(SERIES_STRINGS);
+  const [pattern, setPattern] = react.useState(null);
+  const [edited, setEdited] = react.useState(false);
+  useAllDayTimes("starttime", "endtime");
+  const loaded = ctx.status === react$1.QueryStatus.Success ? ctx.record : void 0;
+  const loadedId = loaded?.id;
+  react.useEffect(() => {
+    if (loaded && !edited) setPattern(fromSeries(loaded, timeZone));
+  }, [loadedId, timeZone, edited]);
+  const start = valueOf(ctx.record, "starttime");
+  const end = valueOf(ctx.record, "endtime");
+  const write = (next) => {
+    if (typeof start !== "string" || typeof end !== "string") return;
+    for (const [column, value] of Object.entries(seriesColumns(next, new Date(start), new Date(end), timeZone, ctx.record))) {
+      ctx.setColumnValue(column, value);
+    }
+  };
+  const timesChanged = ctx.dirtyColumns.has("starttime") || ctx.dirtyColumns.has("endtime");
+  react.useEffect(() => {
+    if (timesChanged && pattern) write(pattern);
+  }, [timesChanged, start, end]);
+  if (ctx.status !== react$1.QueryStatus.Success || !labeled) return /* @__PURE__ */ jsxRuntime.jsx(Loading, { status: ctx.status });
+  const change = (next) => {
+    if (!next) return;
+    setEdited(true);
+    setPattern(next);
+    write(next);
+  };
+  const readOnly = !editable;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fields, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Text, { className: styles.recurring, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRepeatAllRegular, {}),
+      t("open-recurring.series")
+    ] }),
+    editable && /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "subject" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "starttime", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "endtime", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "isalldayevent", readOnly }),
+    pattern && /* @__PURE__ */ jsxRuntime.jsx(
+      RecurrenceEdit,
+      {
+        value: pattern,
+        onChange: change,
+        start: localDay(typeof start === "string" ? new Date(start) : /* @__PURE__ */ new Date(), timeZone),
+        allowNone: false,
+        readOnly
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "location", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "organizer", readOnly: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "requiredattendees", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "optionalattendees", readOnly }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "regardingobjectid", readOnly, ...regardingTables && { targetTables: regardingTables } }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFluent.ColumnEdit, { columnName: "description", readOnly })
+  ] });
+}
+
+// src/core/styles.ts
+var STYLE_ID = "ppp-calendar-styles";
+var calendarStyles = `
+.ppp-calendar,
+.ppp-calendar-popover {
+  --fc-forma-primary: var(--colorBrandBackground);
+  --fc-forma-primary-over: var(--colorBrandBackgroundHover);
+  --fc-forma-primary-down: var(--colorBrandBackgroundPressed);
+  --fc-forma-primary-foreground: var(--colorNeutralForegroundOnBrand);
+
+  --fc-forma-event: var(--colorBrandBackground);
+  --fc-forma-event-contrast: var(--colorNeutralForegroundOnBrand);
+  --fc-forma-background-event: var(--colorBrandBackground2);
+  --fc-forma-highlight: color-mix(in srgb, var(--colorBrandBackground) 25%, transparent);
+
+  --fc-forma-background: var(--colorNeutralBackground1);
+  --fc-forma-faint: var(--colorNeutralBackground2);
+  --fc-forma-muted: var(--colorNeutralBackground1Hover);
+  --fc-forma-strong: var(--colorNeutralBackground1Selected);
+  --fc-forma-stronger: var(--colorNeutralBackground1Pressed);
+  --fc-forma-strongest: var(--colorNeutralBackground1Pressed);
+
+  --fc-forma-foreground: var(--colorNeutralForeground1);
+  --fc-forma-muted-foreground: var(--colorNeutralForeground3);
+  --fc-forma-faint-foreground: var(--colorNeutralForeground4);
+
+  --fc-forma-border: var(--colorNeutralStroke2);
+  --fc-forma-muted-border: var(--colorNeutralStroke3);
+  --fc-forma-strong-border: var(--colorNeutralStroke1);
+  --fc-forma-ring-color: var(--colorStrokeFocus2);
+
+  color: var(--colorNeutralForeground1);
+  background-color: var(--colorNeutralBackground1);
+}
+
+/* Forma sets 16px type on its root; Fluent's body text is 14px in its own family. Doubling the
+   class outranks Forma's (hashed, single-class) rule without naming it. */
+.ppp-calendar.ppp-calendar,
+.ppp-calendar-popover.ppp-calendar-popover {
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+/* No taller than the appointment's box, which FullCalendar doesn't clip: a short appointment shows
+   what fits of its subject and place, as Outlook's do. */
+.ppp-calendar-event {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+  padding-inline: var(--spacingHorizontalXS);
+}
+
+.ppp-calendar-event-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalXXS);
+  font-weight: var(--fontWeightSemibold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ppp-calendar-event-detail {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--fontSizeBase200);
+}
+
+.ppp-calendar-event-compact {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacingHorizontalXS);
+}
+
+.ppp-calendar-event-compact .ppp-calendar-event-title {
+  font-weight: var(--fontWeightRegular);
+}
+
+.ppp-calendar-event-compact .ppp-calendar-event-detail {
+  flex: none;
+}
+
+.ppp-calendar-event-icon,
+.ppp-calendar-event-icon > svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+/* How an appointment shows its time, as Outlook draws it. Busy is FullCalendar's own drawing: a tint
+   of the appointment's color with a bar in it. Out of office is that in purple; free is the bar
+   outlined on no tint, staying free under the pointer, and tentative the tint striped. Only a block
+   has a fill to draw free and tentative in: a month's dots and the agenda's rows show the color. */
+.ppp-calendar .ppp-calendar-appointment-out-of-office,
+.ppp-calendar-popover .ppp-calendar-appointment-out-of-office {
+  /* Over the color FullCalendar sets on the appointment itself. */
+  --fc-event-color: var(--colorPalettePurpleBorderActive, #8764b8) !important;
+}
+
+.ppp-calendar .ppp-calendar-appointment-free.ppp-calendar-appointment-block,
+.ppp-calendar-popover .ppp-calendar-appointment-free.ppp-calendar-appointment-block {
+  background-color: var(--fc-forma-background);
+}
+
+.ppp-calendar .ppp-calendar-appointment-free.ppp-calendar-appointment-block:hover,
+.ppp-calendar-popover .ppp-calendar-appointment-free.ppp-calendar-appointment-block:hover {
+  background-color: color-mix(in srgb, var(--fc-event-color) 8%, var(--fc-forma-background));
+}
+
+/* A focused one keeps FullCalendar's focus outline. */
+.ppp-calendar .ppp-calendar-appointment-free.ppp-calendar-appointment-block:not(:focus-visible),
+.ppp-calendar-popover .ppp-calendar-appointment-free.ppp-calendar-appointment-block:not(:focus-visible) {
+  outline: var(--strokeWidthThin) solid color-mix(in srgb, var(--fc-event-color) 50%, transparent);
+  outline-offset: calc(var(--strokeWidthThin) * -1);
+}
+
+.ppp-calendar .ppp-calendar-appointment-tentative.ppp-calendar-appointment-block,
+.ppp-calendar-popover .ppp-calendar-appointment-tentative.ppp-calendar-appointment-block {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0 4px,
+    color-mix(in srgb, var(--fc-event-color) 30%, transparent) 4px 6px
+  );
+}
+
+.ppp-calendar-appointment-canceled .ppp-calendar-event-title {
+  text-decoration: line-through;
+}
+
+/* An appointment's tooltip: its subject, then when, where and whether it repeats. */
+.ppp-calendar-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingVerticalXXS);
+}
+
+.ppp-calendar-tooltip-subject {
+  font-weight: var(--fontWeightSemibold);
+}
+`;
+function ensureCalendarStyles(document2) {
+  ensureStyleSheet(document2, STYLE_ID, calendarStyles);
+}
+function ensureStyleSheet(document2, id, css) {
+  if (document2.getElementById(id)) return;
+  const style = document2.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document2.head.appendChild(style);
+}
+
+// src/core/events.ts
+var AppointmentShowAs = {
+  Busy: 0,
+  Free: 1,
+  Tentative: 2,
+  OutOfOffice: 3
+};
+var SHOW_AS_CLASS = {
+  [AppointmentShowAs.Busy]: "ppp-calendar-appointment-busy",
+  [AppointmentShowAs.Free]: "ppp-calendar-appointment-free",
+  [AppointmentShowAs.Tentative]: "ppp-calendar-appointment-tentative",
+  [AppointmentShowAs.OutOfOffice]: "ppp-calendar-appointment-out-of-office"
+};
+function toEventInput(appointment) {
+  return {
+    id: appointment.id,
+    title: appointment.subject,
+    start: appointment.start,
+    end: appointment.end,
+    allDay: appointment.allDay ?? false,
+    ...appointment.editable == null ? {} : { editable: appointment.editable },
+    ...appointment.durationEditable == null ? {} : { durationEditable: appointment.durationEditable },
+    ...appointment.color ? { backgroundColor: appointment.color, borderColor: appointment.color } : {},
+    extendedProps: {
+      table: appointment.table ?? null,
+      location: appointment.location ?? null,
+      recurring: appointment.recurring ?? false,
+      // Read by the calendar's eventClass, which draws it: busy when it says nothing.
+      showAs: appointment.showAs ?? null,
+      canceled: appointment.canceled ?? false,
+      record: appointment.record ?? null
+    }
+  };
+}
+function appointmentFromEvent(event) {
+  return {
+    id: event.id,
+    subject: event.title,
+    start: event.start ?? new Date(Number.NaN),
+    end: event.end ?? event.start ?? new Date(Number.NaN),
+    allDay: event.allDay,
+    location: event.extendedProps["location"] ?? null,
+    recurring: event.extendedProps["recurring"] === true,
+    showAs: event.extendedProps["showAs"] ?? null,
+    canceled: event.extendedProps["canceled"] === true,
+    record: event.extendedProps["record"] ?? null,
+    table: event.extendedProps["table"] ?? null
+  };
+}
+function appointmentClassName(appointment) {
+  const showAs = SHOW_AS_CLASS[appointment.showAs ?? AppointmentShowAs.Busy] ?? SHOW_AS_CLASS[AppointmentShowAs.Busy];
+  return appointment.canceled === true ? `${showAs} ppp-calendar-appointment-canceled` : showAs;
+}
+function toAppointmentChange(event) {
+  return {
+    id: event.id,
+    start: event.start ?? new Date(Number.NaN),
+    end: event.end,
+    allDay: event.allDay,
+    table: event.extendedProps?.["table"] ?? null
+  };
+}
+
+// src/core/options.ts
+var calendarLayouts = ["day", "workWeek", "week", "month", "agenda"];
+function offeredLayouts(layouts) {
+  const named = [...new Set((layouts ?? []).filter((layout) => calendarLayouts.includes(layout)))];
+  return named.length > 0 ? named : calendarLayouts;
+}
+function openingLayout(offered, ...preferred) {
+  return preferred.find((layout) => layout !== void 0 && offered.includes(layout)) ?? offered[0];
+}
+var fullCalendarViewNames = {
+  day: "timeGridDay",
+  workWeek: "pppWorkWeek",
+  week: "timeGridWeek",
+  month: "dayGridMonth",
+  agenda: "listWeek"
+};
+function toFullCalendarView(layout) {
+  return fullCalendarViewNames[layout];
+}
+function fromFullCalendarView(name) {
+  return calendarLayouts.find((layout) => fullCalendarViewNames[layout] === name);
+}
+function isCompactView(fullCalendarViewType) {
+  return fullCalendarViewType.startsWith("dayGrid");
+}
+function calendarOptions(input) {
+  return {
+    initialView: toFullCalendarView(input.layout),
+    timeZone: input.timeZone ?? "local",
+    ...input.date ? { initialDate: input.date } : {},
+    views: {
+      pppWorkWeek: { type: "timeGridWeek", weekends: false }
+    },
+    class: "ppp-calendar",
+    // FullCalendar draws the "+ more" popover at the end of the page, outside the calendar, so it
+    // carries the calendar's styles by a class of its own.
+    popoverClass: "ppp-calendar-popover",
+    // The toolbar is each stack's own Fluent toolbar, driven through FullCalendar's controller.
+    headerToolbar: false,
+    height: "100%",
+    locale: input.locale,
+    direction: input.direction,
+    editable: input.editable,
+    selectable: input.editable,
+    selectMirror: true,
+    nowIndicator: true,
+    dayMaxEvents: true,
+    // Appointments at the same time sit side by side, as Outlook draws them, not cascaded.
+    slotEventOverlap: false,
+    navLinks: input.layouts.includes("day"),
+    scrollTime: "08:00:00",
+    slotDuration: "00:30:00",
+    snapDuration: "00:15:00",
+    // Each appointment's class says how it shows its time; a block (not a month's dot nor the
+    // agenda's row) is marked too, for only a block has the fill free and tentative are drawn in.
+    // FullCalendar joins these with its theme's own classes.
+    eventClass: (info) => `ppp-calendar-event-host ${appointmentClassName(info.event.extendedProps)}`,
+    blockEventClass: "ppp-calendar-appointment-block",
+    allDayText: input.text.allDay,
+    noEventsText: input.text.noEvents,
+    closeHint: input.text.close,
+    moreLinkText: (count) => input.text.more(count)
+  };
+}
+
+// src/core/state.ts
+var DAY_MS = 24 * 60 * 60 * 1e3;
+function periodDate(currentStart, currentEnd, now = /* @__PURE__ */ new Date(), timeZone) {
+  if (now >= currentStart && now < currentEnd) return void 0;
+  const days = Math.round((currentEnd.getTime() - currentStart.getTime()) / DAY_MS);
+  const middle = new Date(currentStart.getTime() + Math.floor(days / 2) * DAY_MS + DAY_MS / 2);
+  return localDate(middle, timeZone);
+}
+function localDate(instant, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    ...timeZone ? { timeZone } : {},
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).formatToParts(instant);
+  const part = (type) => parts.find((x) => x.type === type)?.value ?? "";
+  return `${part("year").padStart(4, "0")}-${part("month")}-${part("day")}`;
+}
+
+// src/core/new-appointment.ts
+var MINUTE_MS = 60 * 1e3;
+var LENGTH_MINUTES = 30;
+var DAY_START_MINUTES = 8 * 60;
+function newAppointmentRange(currentStart, currentEnd, now = /* @__PURE__ */ new Date(), timeZone) {
+  let start;
+  if (now >= currentStart && now < currentEnd) {
+    const past = minutesOfDay(now, timeZone) % LENGTH_MINUTES * MINUTE_MS + now.getTime() % MINUTE_MS;
+    start = new Date(now.getTime() + (past === 0 ? 0 : LENGTH_MINUTES * MINUTE_MS - past));
+  } else {
+    const guess = new Date(currentStart.getTime() + DAY_START_MINUTES * MINUTE_MS);
+    start = new Date(guess.getTime() - (minutesOfDay(guess, timeZone) - DAY_START_MINUTES) * MINUTE_MS);
+  }
+  return { start, end: new Date(start.getTime() + LENGTH_MINUTES * MINUTE_MS), allDay: false };
+}
+function minutesOfDay(instant, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    ...timeZone ? { timeZone } : {},
+    hourCycle: "h23",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).formatToParts(instant);
+  const part = (type) => Number(parts.find((x) => x.type === type)?.value ?? 0);
+  return part("hour") * 60 + part("minute");
+}
+
+// src/core/summary.ts
+var formatters = /* @__PURE__ */ new Map();
+function formatter(locale, timeZone, allDay) {
+  const key = `${locale}|${timeZone ?? ""}|${allDay}`;
+  let format = formatters.get(key);
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, {
+      ...timeZone ? { timeZone } : {},
+      ...allDay ? { weekday: "short", month: "short", day: "numeric", year: "numeric" } : { weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }
+    });
+    formatters.set(key, format);
+  }
+  return format;
+}
+function formatAppointmentWhen(start, end, allDay, locale, timeZone) {
+  if (allDay) {
+    const last = end && end > start ? new Date(end.getTime() - 1) : start;
+    return formatter(locale, timeZone, true).formatRange(start, last);
+  }
+  const times = formatter(locale, timeZone, false);
+  return end && end > start ? times.formatRange(start, end) : times.format(start);
+}
+function summarizeAppointment(event, locale, recurringText, timeZone) {
+  return {
+    subject: event.title,
+    when: event.start ? formatAppointmentWhen(event.start, event.end, event.allDay, locale, timeZone) : "",
+    location: event.extendedProps["location"] ?? null,
+    recurring: event.extendedProps["recurring"] ? recurringText : null
+  };
+}
+var APPOINTMENT_TOOLTIP_DELAY_MS = 300;
+function AppointmentTooltip({ content, children }) {
+  const [visible, setVisible] = react.useState(false);
+  const wait = react.useRef(void 0);
+  react.useEffect(() => () => clearTimeout(wait.current), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Tooltip,
+    {
+      relationship: "description",
+      withArrow: true,
+      visible,
+      showDelay: 0,
+      hideDelay: 0,
+      onVisibleChange: (_, data) => {
+        clearTimeout(wait.current);
+        if (data.visible) wait.current = setTimeout(() => setVisible(true), APPOINTMENT_TOOLTIP_DELAY_MS);
+        else setVisible(false);
+      },
+      content: typeof content !== "function" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ppp-calendar-tooltip", children: content }) : visible ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ppp-calendar-tooltip", children: content() }) : "",
+      children
+    }
+  );
+}
+function AppointmentSummaryContent({ summary }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ppp-calendar-tooltip-subject", children: summary.subject }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: summary.when }),
+    summary.location && /* @__PURE__ */ jsxRuntime.jsx("span", { children: summary.location }),
+    summary.recurring && /* @__PURE__ */ jsxRuntime.jsx("span", { children: summary.recurring })
+  ] });
+}
+
+// src/appointment-record.ts
+function newAppointment(range, regarding) {
+  return {
+    tableName: "appointment",
+    properties: {
+      scheduledstart: { $type: 2, value: range.start.toISOString() },
+      scheduledend: { $type: 2, value: range.end.toISOString() },
+      isalldayevent: { $type: 0, value: range.allDay },
+      ...regarding?.id ? {
+        regardingobjectid: {
+          $type: 6,
+          value: regarding.id,
+          tableName: regarding.tableName,
+          ...regarding.name ? { name: regarding.name } : {}
+        }
+      } : {}
+    }
+  };
+}
+var APPOINTMENT_TABLE = "appointment";
+var EVERY_TABLE_VIEW_ID = "00000000-0000-0000-0000-000000000000";
+var SERIES_TABLE2 = "recurringappointmentmaster";
+var DEFAULT_CALENDAR_TABLES = [APPOINTMENT_TABLE, "task"];
+var CALENDAR_COLUMNS = {
+  [APPOINTMENT_TABLE]: ["location", "seriesid", "instancetypecode", "statecode", "statuscode"],
+  "*": ["statecode"]
+};
+var MINUTE_MS2 = 60 * 1e3;
+var DAY_MS2 = 24 * 60 * MINUTE_MS2;
+function valueOf2(record, column) {
+  return record?.properties?.[column]?.value;
+}
+function stateOf(item) {
+  const state = valueOf2(item.record, "statecode");
+  return typeof state === "number" ? state : null;
+}
+function isClosed(item) {
+  const state = stateOf(item);
+  return state === 1 || state === 2;
+}
+function showAsOf(statusCode, stateCode) {
+  switch (statusCode) {
+    case 1:
+    case 4:
+      return AppointmentShowAs.Free;
+    case 2:
+      return AppointmentShowAs.Tentative;
+    case 3:
+    case 5:
+      return AppointmentShowAs.Busy;
+    case 6:
+      return AppointmentShowAs.OutOfOffice;
+    default:
+      return stateCode === 0 || stateCode === 2 ? AppointmentShowAs.Free : AppointmentShowAs.Busy;
+  }
+}
+function zonedMidnight(date, timeZone) {
+  const [year, month, day] = date.split("-").map(Number);
+  const wanted = Date.UTC(year, month - 1, day);
+  let guess = wanted;
+  for (let i = 0; i < 2; i++) {
+    const parts = new Intl.DateTimeFormat("en-US", {
+      ...timeZone ? { timeZone } : {},
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).formatToParts(new Date(guess));
+    const part = (type) => Number(parts.find((x) => x.type === type)?.value ?? 0);
+    const shown = Date.UTC(part("year"), part("month") - 1, part("day"), part("hour"), part("minute"));
+    guess = wanted - (shown - guess);
+  }
+  return new Date(guess);
+}
+function drawnTimes(item, dateOnly, timeZone) {
+  const start = new Date(item.start);
+  const end = new Date(item.end);
+  if (!dateOnly) return { start, end };
+  const first = start.toISOString().slice(0, 10);
+  let after = end.toISOString().slice(0, 10);
+  if (after <= first) after = new Date(start.getTime() + DAY_MS2).toISOString().slice(0, 10);
+  return { start: zonedMidnight(first, timeZone), end: zonedMidnight(after, timeZone) };
+}
+function fromMultiTableItem(item, info, drawn) {
+  const definition = info?.definition;
+  const changeable = new Set((info?.changeableColumns ?? []).map((x) => x.toLowerCase()));
+  const movable = (Number(item.permissions ?? 0) & core.TableSecurityPermission.Write) !== 0 && !isClosed(item) && !!definition?.start && changeable.has(definition.start.toLowerCase());
+  const resizable = movable && !!definition?.end && changeable.has(definition.end.toLowerCase());
+  const isAppointment = item.table === APPOINTMENT_TABLE;
+  const state = stateOf(item);
+  const location = valueOf2(item.record, "location");
+  const status = valueOf2(item.record, "statuscode");
+  return {
+    id: item.id,
+    table: item.table,
+    subject: item.title ?? "",
+    start: drawn.start,
+    end: drawn.end,
+    allDay: item.isAllDay ?? false,
+    location: isAppointment && typeof location === "string" ? location : null,
+    recurring: item.table === SERIES_TABLE2 || isAppointment && !!valueOf2(item.record, "seriesid"),
+    editable: movable ? null : false,
+    durationEditable: resizable ? null : false,
+    showAs: isAppointment ? showAsOf(typeof status === "number" ? status : null, state) : AppointmentShowAs.Busy,
+    canceled: state === 2,
+    color: definition?.color ?? null,
+    record: item.record ?? null
+  };
+}
+function stored(moment, dateOnly, timeZone) {
+  return dateOnly ? `${localDate(moment, timeZone)}T00:00:00.000Z` : moment.toISOString();
+}
+function moveRecord(change, item, info, dateOnly, timeZone) {
+  const definition = info?.definition;
+  if (!definition?.start) return null;
+  const changeable = new Set((info?.changeableColumns ?? []).map((x) => x.toLowerCase()));
+  const allDayColumn = definition.allDay && changeable.has(definition.allDay.toLowerCase()) ? definition.allDay : null;
+  if (change.allDay !== (item.isAllDay ?? false) && !allDayColumn) return null;
+  if (dateOnly && !change.allDay) return null;
+  const end = change.end ?? new Date(change.start.getTime() + (change.allDay ? DAY_MS2 : 30 * MINUTE_MS2));
+  const drawn = drawnTimes(item, dateOnly, timeZone);
+  const lengthChanged = end.getTime() - change.start.getTime() !== drawn.end.getTime() - drawn.start.getTime();
+  const properties = {
+    [definition.start]: { $type: 2, value: stored(change.start, dateOnly, timeZone) }
+  };
+  if (definition.end && (!item.hasNoEnd || lengthChanged))
+    properties[definition.end] = { $type: 2, value: stored(end, dateOnly, timeZone) };
+  if (allDayColumn) properties[allDayColumn] = { $type: 0, value: change.allDay };
+  return { tableName: item.table, id: item.id, properties };
+}
+function tablesOf(tables, registered, allowed, stored2, isStoredView) {
+  let named;
+  if (tables) named = tables.map((x) => x.table ?? "");
+  else if (isStoredView) {
+    if (!stored2) return null;
+    named = [...stored2];
+  } else named = registered.map((x) => x.table ?? "");
+  const expanded = named.flatMap(
+    (table) => table.toLowerCase() === "activitypointer" ? registered.filter((x) => x.isActivity).map((x) => x.table ?? "") : [table.toLowerCase()]
+  );
+  return [...new Set(expanded)].filter(
+    (table) => registered.some((x) => x.table === table) && (!allowed || allowed.has(table))
+  );
+}
+function hiddenByDefault(viewId, shown, defaults) {
+  if (viewId !== EVERY_TABLE_VIEW_ID || !shown.some((table) => defaults.has(table))) return [];
+  return shown.filter((table) => !defaults.has(table));
+}
+
+// src/calendar-query.ts
+function offeredViewIds(defaultViewId2, viewIds, multiTableViewIds, customViews) {
+  const ids = [
+    ...defaultViewId2 ? [defaultViewId2] : [],
+    ...viewIds ?? [],
+    ...multiTableViewIds ?? [],
+    ...(customViews ?? []).map((view) => view.id)
+  ].map((id) => id.toLowerCase());
+  return ids.length === 0 ? [EVERY_TABLE_VIEW_ID] : [...new Set(ids)];
+}
+function findCustomView(id, customViews) {
+  if (!id) return void 0;
+  return customViews?.find((view) => view.id.toLowerCase() === id.toLowerCase());
+}
+function selectedViewId(offered, picked) {
+  return picked && offered.includes(picked.toLowerCase()) ? picked.toLowerCase() : offered[0];
+}
+function offersViews(offered) {
+  return offered.some((id) => id !== EVERY_TABLE_VIEW_ID);
+}
+function everyRow(table) {
+  return `<fetch><entity name="${table}" /></fetch>`;
+}
+function withSavedViews(pageViews, savedViews, settings, control, shown, offersSavedViews) {
+  if (!offersSavedViews) return [...pageViews];
+  let all = [...new Set([...pageViews, ...savedViews].map((id) => id.toLowerCase()))];
+  const userDefault = core.defaultViewId(settings, all, control);
+  if (userDefault) all = [userDefault, ...all.filter((id) => id !== userDefault)];
+  const offered = all.filter((id) => id === shown?.toLowerCase() || !core.isViewHidden(settings, id, control));
+  return offered.length > 0 ? offered : all;
+}
+var LAYOUTS = ["day", "workWeek", "week", "month", "agenda"];
+function readSavedLayout(json) {
+  if (!json?.trim()) return void 0;
+  try {
+    const layout = JSON.parse(json).layout;
+    return LAYOUTS.find((x) => x === layout);
+  } catch {
+    return void 0;
+  }
+}
+function writeSavedLayout(layout) {
+  return JSON.stringify({ version: 1, layout });
+}
+
+// ../../node_modules/.pnpm/@fullcalendar+react@7.1.3_react-dom@19.2.5_react@19.2.5__react@19.2.5_temporal-polyfill@1.0.6/node_modules/@fullcalendar/react/skeleton.css
+var skeleton_default = `
+:root {
+  --fc-sticky-header-footer-z: 3;
+  --fc-popover-z: 4;
+}
+
+.fc-rk {
+  z-index: var(--fc-popover-z) !important;
+}
+
+.fc-gE {
+  isolation: isolate;
+}
+
+/*
+This will prevent all ancestors from customizing their box size unless they use .contentBox
+*/
+.fc-wY,
+.fc-wY *,
+.fc-wY *:before,
+.fc-wY *:after {
+  box-sizing: border-box !important;
+}
+
+/* classes attached to <body> */
+.fc-8m,
+.fc-8m * {
+  cursor: not-allowed !important;
+}
+
+.fc-Is {
+  -ms-overflow-style: none !important; /* IE and Edge */
+  scrollbar-width: none !important; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.fc-Is::-webkit-scrollbar {
+  display: none !important;
+}
+
+.fc-Ps {
+  flex-shrink: 0 !important;
+}
+
+.fc-qC .fc-VR {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+}
+
+/* HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+   https://stackoverflow.com/a/60256345 */
+.fc-hF .fc-VR > * {
+  float: left !important;
+}
+
+[dir=rtl] .fc-hF .fc-VR > *,
+.fc-hF[dir=rtl] .fc-VR > * {
+  float: right !important;
+}
+
+.fc-hF .fc-VR::after {
+  content: "" !important;
+  display: block !important;
+  clear: both !important;
+}
+
+.fc-Zu {
+  cursor: pointer !important;
+}
+
+.fc-Hs {
+  cursor: n-resize !important;
+}
+
+.fc-J0 {
+  cursor: s-resize !important;
+}
+
+.fc-jI {
+  cursor: w-resize !important;
+}
+
+[dir=rtl] .fc-jI {
+  cursor: e-resize !important;
+}
+
+.fc-Nk {
+  cursor: e-resize !important;
+}
+
+[dir=rtl] .fc-Nk {
+  cursor: w-resize !important;
+}
+
+.fc-Mg {
+  cursor: col-resize !important;
+}
+
+.fc-0r,
+.fc-Zc,
+.fc-yR {
+  position: absolute !important;
+  box-sizing: content-box !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.fc-0r {
+  padding: 10px !important;
+  margin: -10px !important;
+}
+
+.fc-Zc {
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  margin-left: -10px !important;
+  margin-right: -10px !important;
+}
+
+.fc-yR {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+  margin-top: -10px !important;
+  margin-bottom: -10px !important;
+}
+
+/* QUESTION: why not use -left -right instead of negative margins/padding for ALL? */
+.fc-JB {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  right: -5px;
+}
+
+.fc-uv {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.fc-B9 {
+  visibility: hidden;
+}
+
+/* Border Utils */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-13 {
+  border: 0 !important;
+}
+
+.fc-MT {
+  border-left: 0 !important;
+  border-right: 0 !important;
+}
+
+.fc-60 {
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+}
+
+.fc-qy {
+  border-top: 0 !important;
+}
+
+.fc-lE {
+  border-bottom: 0 !important;
+}
+
+.fc-MR {
+  border-inline-start: 0 !important;
+}
+
+.fc-li {
+  border-inline-end: 0 !important;
+}
+
+/* Flexbox Utils */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-mN {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
+.fc-mU {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.fc-l7 {
+  flex-grow: 1 !important;
+}
+
+.fc-OV {
+  flex-grow: 1 !important;
+  flex-basis: 0 !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
+
+.fc-bW {
+  min-height: 0 !important;
+}
+
+/*
+TODO: use liquidX/Y elsewhere because frees up min other dimension; less collisions
+*/
+.fc-cq {
+  flex-grow: 1 !important;
+  flex-basis: 0 !important;
+  min-width: 0 !important;
+}
+
+/* Semantic Print Table */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-A8 {
+  width: 100% !important;
+  table-layout: fixed !important;
+  border: 0 !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+}
+
+.fc-A8 > thead {
+  /* Both properties are needed for cross-browser repeated headers across printed pages. */
+  -moz-column-break-inside: avoid !important;
+       break-inside: avoid !important;
+  page-break-inside: avoid !important;
+}
+
+.fc-A8 > tbody {
+  /* Timeline print-layout hack (resource and non-resource): lets shared absolute backgrounds show through. */
+  background: transparent !important;
+}
+
+.fc-A8 > thead > tr > th,
+.fc-A8 > tbody > tr > th,
+.fc-A8 > tbody > tr > td {
+  vertical-align: top !important;
+  font-weight: inherit;
+  text-align: inherit;
+}
+
+/* Table Utils */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-Ju {
+  padding: 0 !important;
+}
+
+.fc-Eh {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.fc-yU {
+  margin: 0 !important;
+}
+
+.fc-6S {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.fc-ve {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.fc-aG {
+  white-space: nowrap !important;
+}
+
+.fc-v9 {
+  white-space: pre !important;
+}
+
+/* Misc Utils */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-C4 {
+  overflow-anchor: none;
+}
+
+.fc-rX {
+  pointer-events: none !important;
+}
+
+.fc-mR {
+  overflow: hidden !important;
+}
+
+/*
+TODO: eventually use this on daygrid/timegrid events' inner, time, and title, FOR PRINT
+Needed to prevent wrapping to multiple lines, increasing height, throwing off print-positioning,
+which can't rely on dynamic height detection after print-flag activated.
+*/
+.fc-Kv {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+}
+
+.fc-Ru {
+  position: relative !important;
+}
+
+.fc-r6 {
+  position: absolute !important;
+}
+
+.fc-2W {
+  inset-inline-start: 0 !important;
+}
+
+.fc-0D {
+  inset-inline-end: 0 !important;
+}
+
+.fc-9b {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+}
+
+.fc-6Q,
+.fc-zm {
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+
+.fc-9F,
+.fc-Ma {
+  position: absolute !important;
+  top: 0 !important;
+  bottom: 0 !important;
+}
+
+.fc-6Q {
+  top: 0 !important;
+}
+
+.fc-Ma {
+  left: 0 !important;
+  right: 0 !important;
+  width: 0 !important;
+}
+
+@media not print {
+  .fc-Yy {
+    position: sticky !important;
+  }
+
+  .fc-DR {
+    position: sticky !important;
+    top: 0 !important;
+  }
+
+  /* Sticks to either left or right (the flex "start") depending on ltr/rtl */
+  .fc-QU {
+    position: sticky !important;
+    inset-inline-start: 0 !important;
+  }
+
+  .fc-5M {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: var(--fc-sticky-header-footer-z) !important;
+  }
+}
+
+/* Only needed when padding/border must be separate from width/height */
+.fc-qN {
+  box-sizing: content-box !important;
+}
+
+/* Out of view but keeps its real size, for measurement probes. For screen-reader text, use .srOnly.
+Hidden also means not focusable, clickable, or read by screen readers */
+.fc-rU {
+  position: absolute !important;
+  left: -10000px !important;
+  visibility: hidden !important;
+}
+
+/* Visually hidden but read by screen readers. Unlike .offscreen, never causes scroll overflow */
+.fc-og {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+}
+
+.fc-hm {
+  align-items: center !important;
+}
+
+.fc-cI {
+  align-items: flex-start !important;
+}
+
+.fc-Qq {
+  align-items: flex-end !important;
+}
+
+/* Footer Scrollbar */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-se {
+  position: sticky !important;
+  bottom: 0 !important;
+  z-index: var(--fc-sticky-header-footer-z) !important;
+}
+
+.fc-Vd > * {
+  margin-top: -1px !important;
+}
+
+.fc-Vd > * > * {
+  height: 1px !important;
+}
+
+/* Print Utils */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-or {
+  -moz-column-break-inside: avoid !important;
+       break-inside: avoid !important;
+  page-break-inside: avoid !important;
+}
+
+.fc-Lx {
+  min-height: 4em !important;
+}
+
+.fc-vn {
+  display: flow-root !important;
+}
+
+/* Z-index */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-mP {
+  z-index: 0;
+}
+
+.fc-NW {
+  z-index: 1;
+}
+
+.fc-Zs {
+  z-index: 2;
+}
+
+.fc-D7 {
+  z-index: 3;
+}
+
+.fc-Se {
+  z-index: 4;
+}
+
+.fc-kE {
+  z-index: 5;
+}
+
+.fc-Y9 {
+  z-index: 1000;
+}
+
+.fc-DP {
+  z-index: 9999;
+}
+
+.fc-Xr:focus-visible {
+  z-index: 2;
+}
+
+/* INTERNAL MARKER -- used to mark an element for internal significance */
+/* ------------------------------------------------------------------------------------------------- */
+
+.fc-8W {}
+
+.fc-Ad {}
+.fc-oG {}
+.fc-Yb {}
+.fc-JA {}
+.fc-4p {}
+.fc-IR {}
+.fc-tW {}
+.fc-8h {}
+
+.fc-Jv {}
+
+.fc-XX {}
+
+.fc-89 {}
+
+.fc-wF {}
+
+.fc-tw {}
+
+.fc-ox {}
+`;
+
+// ../../node_modules/.pnpm/@fullcalendar+react@7.1.3_react-dom@19.2.5_react@19.2.5__react@19.2.5_temporal-polyfill@1.0.6/node_modules/@fullcalendar/react/themes/forma/theme.css
+var theme_default = ".fc-forma-n5m {\n  font-size: 16px;\n  line-height: 1.5;\n  --fc-forma-border-style: solid;\n}\n\n.fc-forma-Z9U {\n  appearance: button;\n  font: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  opacity: 1;\n  background-color: #0000;\n  border-radius: 0;\n  margin: 0;\n  border: 0;\n  padding: 0\n}\n\n.fc-forma-JiE {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n.fc-forma-3Lc {\n  pointer-events: none\n}\n\n.fc-forma-1EY {\n  position: absolute\n}\n\n.fc-forma-eYX {\n  position: relative\n}\n\n.fc-forma-MaV {\n  inset-inline: 0\n}\n\n.fc-forma-AWB {\n  inset-block: 0\n}\n\n.fc-forma-0fm {\n  inset-inline-start: -8px\n}\n\n.fc-forma-Tuc {\n  inset-inline-end: -4px\n}\n\n.fc-forma-iD1 {\n  inset-inline-end: 0\n}\n\n.fc-forma-SyR {\n  inset-inline-end: 4px\n}\n\n.fc-forma-dnf {\n  inset-inline-end: -3px\n}\n\n.fc-forma-YDC {\n  top: -4px\n}\n\n.fc-forma-n9G {\n  top: 0\n}\n\n.fc-forma-2ik {\n  top: 2px\n}\n\n.fc-forma-ZnE {\n  top: 4px\n}\n\n.fc-forma-ERR {\n  top: 50%\n}\n\n.fc-forma-fJL {\n  bottom: -4px\n}\n\n.fc-forma-1V6 {\n  left: 50%\n}\n\n.fc-forma-aAW {\n  margin: -6px\n}\n\n.fc-forma-CH7 {\n  margin: -1px\n}\n\n.fc-forma-gMS {\n  margin: 4px\n}\n\n.fc-forma-bvX {\n  margin: 8px\n}\n\n.fc-forma-jD5 {\n  margin: 16px\n}\n\n.fc-forma-cKZ {\n  margin-inline: 2px\n}\n\n.fc-forma-148 {\n  margin-inline: 1px\n}\n\n.fc-forma-cJ3 {\n  margin-block: 2px\n}\n\n.fc-forma-V9v {\n  margin-block: 4px\n}\n\n.fc-forma-SEP {\n  margin-block: 1px\n}\n\n.fc-forma-Jzj {\n  margin-inline-start: 2px\n}\n\n.fc-forma-Wga {\n  margin-inline-start: 4px\n}\n\n.fc-forma-qvL {\n  margin-inline-start: 1px\n}\n\n.fc-forma-p9t {\n  margin-inline-end: -6px\n}\n\n.fc-forma-3e1 {\n  margin-inline-end: 2px\n}\n\n.fc-forma-KYn {\n  margin-inline-end: 4px\n}\n\n.fc-forma-B3G {\n  margin-inline-end: 2.5%\n}\n\n.fc-forma-9hC {\n  margin-inline-end: 1px\n}\n\n.fc-forma-Dq8 {\n  margin-top: -4px\n}\n\n.fc-forma-Ika {\n  margin-bottom: 1px\n}\n\n.fc-forma-F99 {\n  margin-left: -4px\n}\n\n.fc-forma-I48 {\n  display: block\n}\n\n.fc-forma-dl1 {\n  display: flex\n}\n\n.fc-forma-i3N {\n  display: grid\n}\n\n.fc-forma-pps {\n  display: none\n}\n\n.fc-forma-63n {\n  width: 0;\n  height: 0\n}\n\n.fc-forma-3wQ {\n  width: 8px;\n  height: 8px\n}\n\n.fc-forma-vnf {\n  width: 16px;\n  height: 16px\n}\n\n.fc-forma-XUJ {\n  width: 20px;\n  height: 20px\n}\n\n.fc-forma-uuA {\n  height: 8px\n}\n\n.fc-forma-vYi {\n  height: 10px\n}\n\n.fc-forma-oM6 {\n  height: 20px\n}\n\n.fc-forma-TFV {\n  height: 24px\n}\n\n.fc-forma-84e {\n  min-height: 2px\n}\n\n.fc-forma-jgW {\n  min-height: 16px\n}\n\n.fc-forma-toR {\n  min-height: 1px\n}\n\n.fc-forma-roZ {\n  width: 50%\n}\n\n.fc-forma-vVE {\n  width: 25%\n}\n\n.fc-forma-hza {\n  width: 8px\n}\n\n.fc-forma-79F {\n  width: 20px\n}\n\n.fc-forma-ilz {\n  width: 24px\n}\n\n.fc-forma-4Tv {\n  width: 5px\n}\n\n.fc-forma-aHX {\n  max-width: 160px\n}\n\n.fc-forma-2KU {\n  min-width: 0\n}\n\n.fc-forma-aNc {\n  min-width: 220px\n}\n\n.fc-forma-yi0 {\n  flex-shrink: 0\n}\n\n.fc-forma-1Zl {\n  flex-shrink: 1\n}\n\n.fc-forma-OLq {\n  flex-shrink: 100\n}\n\n.fc-forma-1El {\n  flex-grow: 1\n}\n\n.fc-forma-QX7 {\n  rotate: -45deg\n}\n\n.fc-forma-KxI {\n  rotate: -90deg\n}\n\n.fc-forma-ABq {\n  rotate: 45deg\n}\n\n.fc-forma-z44 {\n  rotate: 90deg\n}\n\n.fc-forma-jmT {\n  rotate: 180deg\n}\n\n.fc-forma-sgX {\n  flex-direction: column\n}\n\n.fc-forma-1sP {\n  flex-direction: row\n}\n\n.fc-forma-dNl {\n  flex-wrap: wrap\n}\n\n.fc-forma-XpK {\n  align-items: center\n}\n\n.fc-forma-RNn {\n  align-items: flex-end\n}\n\n.fc-forma-EF4 {\n  align-items: flex-start\n}\n\n.fc-forma-N2M {\n  justify-content: space-between\n}\n\n.fc-forma-E9P {\n  justify-content: center\n}\n\n.fc-forma-LMv {\n  justify-content: flex-end\n}\n\n.fc-forma-NWN {\n  gap: 4px\n}\n\n.fc-forma-tgZ {\n  gap: 8px\n}\n\n.fc-forma-wwb {\n  gap: 12px\n}\n\n.fc-forma-Pms {\n  gap: 16px\n}\n\n.fc-forma-sI7 {\n  align-self: flex-start\n}\n\n.fc-forma-pKG {\n  overflow: hidden\n}\n\n.fc-forma-AAA {\n  border-radius: 3.40282e38px\n}\n\n.fc-forma-Fvv {\n  border-radius: 4px\n}\n\n.fc-forma-kmj {\n  border-start-start-radius: 4px;\n  border-end-start-radius: 4px\n}\n\n.fc-forma-Skl {\n  border-start-end-radius: 4px;\n  border-end-end-radius: 4px\n}\n\n.fc-forma-Z7Q {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px\n}\n\n.fc-forma-2qh {\n  border-bottom-right-radius: 4px;\n  border-bottom-left-radius: 4px\n}\n\n.fc-forma-wsy,\n.fc-forma-qQW {\n  border-style: var(--fc-forma-border-style);\n  border-width: 1px\n}\n\n.fc-forma-5JF {\n  border-style: var(--fc-forma-border-style);\n  border-width: 4px\n}\n\n.fc-forma-Vpk {\n  border-style: var(--fc-forma-border-style);\n  border-width: 6px\n}\n\n.fc-forma-1Wx {\n  border-inline-style: var(--fc-forma-border-style);\n  border-inline-width: 1px\n}\n\n.fc-forma-8UH {\n  border-inline-start-style: var(--fc-forma-border-style);\n  border-inline-start-width: 1px\n}\n\n.fc-forma-iSi {\n  border-inline-start-style: var(--fc-forma-border-style);\n  border-inline-start-width: 4px\n}\n\n.fc-forma-riO {\n  border-inline-start-style: var(--fc-forma-border-style);\n  border-inline-start-width: 6px\n}\n\n.fc-forma-USt,\n.fc-forma-lzW {\n  border-inline-end-style: var(--fc-forma-border-style);\n  border-inline-end-width: 1px\n}\n\n.fc-forma-ku3,\n.fc-forma-u78 {\n  border-top-style: var(--fc-forma-border-style);\n  border-top-width: 1px\n}\n\n.fc-forma-tb8 {\n  border-top-style: var(--fc-forma-border-style);\n  border-top-width: 4px\n}\n\n.fc-forma-zi1 {\n  border-bottom-style: var(--fc-forma-border-style);\n  border-bottom-width: 1px\n}\n\n.fc-forma-TN2 {\n  --fc-forma-border-style: dotted;\n  border-style: dotted\n}\n\n.fc-forma-lNM {\n  border-color: var(--fc-event-color)\n}\n\n.fc-forma-tfB {\n  border-color: var(--fc-forma-border)\n}\n\n.fc-forma-MlZ {\n  border-color: var(--fc-forma-muted-foreground)\n}\n\n.fc-forma-Baf {\n  border-color: var(--fc-forma-primary)\n}\n\n.fc-forma-BST {\n  border-color: var(--fc-forma-strong-border)\n}\n\n.fc-forma-d0j {\n  border-color: #0000\n}\n\n.fc-forma-RJG {\n  background-color: var(--fc-forma-background)\n}\n\n.fc-forma-zNL {\n  background-color: var(--fc-forma-faint)\n}\n\n.fc-forma-rRL {\n  background-color: var(--fc-forma-highlight)\n}\n\n.fc-forma-Wv4 {\n  background-color: var(--fc-forma-muted)\n}\n\n.fc-forma-7I6 {\n  background-color: var(--fc-forma-primary)\n}\n\n@media not print {\n  @supports (color:color-mix(in lab, red, red)) {\n    .fc-forma-gTC {\n      background-color: color-mix(in oklab, var(--fc-event-color)15%, transparent)\n    }\n  }\n  @supports not (color:color-mix(in lab, red, red)) {\n    .fc-forma-gTC {\n      position: relative;\n      isolation: isolate\n    }\n    .fc-forma-gTC:before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background-color: var(--fc-event-color);\n      opacity: 0.15;\n      z-index: -1\n    }\n  }\n}\n\n.fc-forma-lrD {\n  background-color: var(--fc-event-color);\n  color: var(--fc-event-contrast-color)\n}\n\n@supports (color:color-mix(in lab, red, red)) {\n  .fc-forma-lrD {\n    background-color: color-mix(in oklab, var(--fc-event-color)20%, var(--fc-forma-background));\n    color: inherit\n  }\n}\n\n.fc-forma-i6P {\n  background-color: var(--fc-event-color);\n  color: var(--fc-event-contrast-color)\n}\n\n@supports (color:color-mix(in lab, red, red)) {\n  .fc-forma-i6P {\n    background-color: color-mix(in oklab, var(--fc-event-color)30%, var(--fc-forma-background));\n    color: inherit\n  }\n}\n\n.fc-forma-KUX {\n  padding: 2px\n}\n\n.fc-forma-iS4 {\n  padding: 4px\n}\n\n.fc-forma-3N5 {\n  padding: 8px\n}\n\n.fc-forma-IJJ {\n  padding: 12px\n}\n\n.fc-forma-lqx {\n  padding: 16px\n}\n\n.fc-forma-7A6 {\n  padding: 1px\n}\n\n.fc-forma-oQ2 {\n  padding-inline: 2px\n}\n\n.fc-forma-aCI {\n  padding-inline: 4px\n}\n\n.fc-forma-Nca {\n  padding-inline: 8px\n}\n\n.fc-forma-Apf {\n  padding-inline: 12px\n}\n\n.fc-forma-2rx {\n  padding-block: 2px\n}\n\n.fc-forma-Jhn {\n  padding-block: 4px\n}\n\n.fc-forma-End {\n  padding-block: 6px\n}\n\n.fc-forma-dl6 {\n  padding-block: 8px\n}\n\n.fc-forma-P9h {\n  padding-block: 60px\n}\n\n.fc-forma-s0x {\n  padding-block: 3px\n}\n\n.fc-forma-z5u {\n  padding-block: 1px\n}\n\n.fc-forma-a7i {\n  padding-inline-start: 2px\n}\n\n.fc-forma-C2j {\n  padding-inline-start: 4px\n}\n\n.fc-forma-166 {\n  padding-top: 2px\n}\n\n.fc-forma-4dx {\n  padding-top: 4px\n}\n\n.fc-forma-cM0 {\n  padding-bottom: 16px\n}\n\n.fc-forma-2HE {\n  text-align: end\n}\n\n.fc-forma-vQz {\n  font-size: 11px;\n  line-height: 1.09091\n}\n\n.fc-forma-9ZS {\n  font-size: 18px;\n  line-height: calc(1.75/1.125)\n}\n\n.fc-forma-1Po {\n  font-size: 16px;\n  line-height: calc(1.5/1)\n}\n\n.fc-forma-9yp {\n  font-size: 14px;\n  line-height: calc(1.25/.875)\n}\n\n.fc-forma-2rA {\n  font-size: 20px;\n  line-height: calc(1.75/1.25)\n}\n\n.fc-forma-a3B {\n  font-size: 12px;\n  line-height: calc(1/.75)\n}\n\n.fc-forma-DIS {\n  font-weight: 700\n}\n\n.fc-forma-1OT {\n  font-weight: 500\n}\n\n.fc-forma-C8a {\n  font-weight: 600\n}\n\n.fc-forma-IPx {\n  text-overflow: ellipsis\n}\n\n.fc-forma-TZ4 {\n  white-space: nowrap\n}\n\n.fc-forma-jm6 {\n  white-space: pre\n}\n\n.fc-forma-b7K {\n  color: var(--fc-forma-foreground)\n}\n\n.fc-forma-cOV {\n  color: var(--fc-forma-faint-foreground)\n}\n\n.fc-forma-V1v {\n  color: var(--fc-forma-muted-foreground)\n}\n\n.fc-forma-TSf {\n  color: var(--fc-forma-primary-foreground)\n}\n\n.fc-forma-L1Y {\n  font-style: italic\n}\n\n.fc-forma-lMo {\n  opacity: .5\n}\n\n.fc-forma-iTG {\n  opacity: .75\n}\n\n.fc-forma-1kP {\n  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\n}\n\n.fc-forma-tkw {\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\n}\n\n.fc-forma-eSM {\n  box-shadow: 0 1px 2px 0 #0000000d\n}\n\n.fc-forma-A3h {\n  box-shadow: 0 0 0 1px var(--fc-forma-ring-color, currentcolor)\n}\n\n.fc-forma-GBJ {\n  box-shadow: 0 0 0 2px var(--fc-forma-ring-color, currentcolor)\n}\n\n.fc-forma-c3P {\n  --fc-forma-ring-color: var(--fc-forma-background)\n}\n\n.fc-forma-2R2 {\n  outline-style: solid;\n  outline-width: 1px\n}\n\n.fc-forma-0Bj {\n  outline-style: solid;\n  outline-width: 2px\n}\n\n.fc-forma-07j {\n  outline-offset: -1px\n}\n\n.fc-forma-fFh {\n  outline-offset: -2px\n}\n\n.fc-forma-3Xj {\n  outline-offset: 2px\n}\n\n.fc-forma-Fmy {\n  outline-color: var(--fc-forma-primary)\n}\n\n.fc-forma-mr2 {\n  background: linear-gradient(var(--fc-forma-strong), var(--fc-forma-strong))var(--fc-forma-background)\n}\n\n.fc-forma-iCr:not(:last-child) {\n  border-bottom-style: var(--fc-forma-border-style);\n  border-bottom-width: 1px\n}\n\n@media not print {\n  .fc-forma-530 {\n    padding-block: 1px\n  }\n\n  .fc-forma-ZNR {\n    padding-inline-end: 1px\n  }\n\n  .fc-forma-jVY {\n    padding-top: 1px\n  }\n\n  .fc-forma-K3J {\n    padding-bottom: 1px\n  }\n}\n\n@media (hover:hover) {\n  .fc-forma-vs6:is(:where(.fc-forma-bCs):hover *) {\n    display: block\n  }\n\n  .fc-forma-sS4:is(:where(.fc-forma-bCs):hover *) {\n    color: var(--fc-forma-primary)\n  }\n\n  .fc-forma-Ogp:is(:where(.fc-forma-bCs):hover *) {\n    text-decoration-line: underline\n  }\n}\n\n.fc-forma-Di9:is(:where(.fc-forma-bCs):focus-visible *) {\n  color: var(--fc-forma-primary)\n}\n\n@media (hover:hover) {\n  .fc-forma-cBw:hover {\n    border-color: var(--fc-forma-strong-border)\n  }\n\n  .fc-forma-ShG:hover {\n    background-color: var(--fc-forma-muted)\n  }\n\n  .fc-forma-2Qu:hover {\n    background-color: var(--fc-forma-primary-over)\n  }\n\n  .fc-forma-mcn:hover {\n    background-color: var(--fc-forma-strong)\n  }\n\n  .fc-forma-rom:hover {\n    background-color: var(--fc-event-color)\n  }\n\n  @supports (color:color-mix(in lab, red, red)) {\n    .fc-forma-rom:hover {\n      background-color: color-mix(in oklab, var(--fc-event-color)25%, var(--fc-forma-background))\n    }\n  }\n\n  .fc-forma-SWh:hover {\n    background-color: var(--fc-event-color)\n  }\n\n  @supports (color:color-mix(in lab, red, red)) {\n    .fc-forma-SWh:hover {\n      background-color: color-mix(in oklab, var(--fc-event-color)35%, var(--fc-forma-background))\n    }\n  }\n\n  .fc-forma-Eu0:hover {\n    text-decoration-line: underline\n  }\n\n  .fc-forma-Vyz:hover {\n    background: linear-gradient(var(--fc-forma-stronger), var(--fc-forma-stronger))var(--fc-forma-background)\n  }\n}\n\n.fc-forma-nge:focus-visible {\n  background-color: var(--fc-forma-muted)\n}\n\n.fc-forma-lgp:focus-visible {\n  background-color: var(--fc-forma-primary-over)\n}\n\n.fc-forma-uqo:focus-visible {\n  outline-style: solid;\n  outline-width: 2px\n}\n\n.fc-forma-PQx:active {\n  background-color: var(--fc-forma-primary-down)\n}\n\n.fc-forma-rKU:active {\n  background-color: var(--fc-forma-strong)\n}\n\n.fc-forma-0sn:active {\n  background-color: var(--fc-forma-stronger)\n}\n\n.fc-forma-DUE:active {\n  background-color: var(--fc-event-color)\n}\n\n@supports (color:color-mix(in lab, red, red)) {\n  .fc-forma-DUE:active {\n    background-color: color-mix(in oklab, var(--fc-event-color)30%, var(--fc-forma-background))\n  }\n}\n\n.fc-forma-RHy:active {\n  background-color: var(--fc-event-color)\n}\n\n@supports (color:color-mix(in lab, red, red)) {\n  .fc-forma-RHy:active {\n    background-color: color-mix(in oklab, var(--fc-event-color)40%, var(--fc-forma-background))\n  }\n}\n\n.fc-forma-pgt:active {\n  background: linear-gradient(var(--fc-forma-strongest), var(--fc-forma-strongest))var(--fc-forma-background)\n}\n\n@media print {\n  .fc-forma-2dx {\n    border-block-style: var(--fc-forma-border-style);\n    border-block-width: 1px\n  }\n\n  .fc-forma-9wT {\n    border-inline-end-style: var(--fc-forma-border-style);\n    border-inline-end-width: 1px\n  }\n\n  .fc-forma-Qex {\n    border-top-style: var(--fc-forma-border-style);\n    border-top-width: 1px\n  }\n\n  .fc-forma-wZV {\n    border-bottom-style: var(--fc-forma-border-style);\n    border-bottom-width: 1px\n  }\n\n  .fc-forma-jsy {\n    border-width: 1px\n  }\n\n  .fc-forma-DO7 {\n    border-color: var(--fc-event-color)\n  }\n\n  .fc-forma-4MR {\n    border-color: #000\n  }\n\n  .fc-forma-vwH {\n    background-color: #fff\n  }\n}\n\n[dir=rtl] .fc-forma-qIw {\n  rotate: -45deg\n}\n\n[dir=rtl] .fc-forma-keW {\n  rotate: -90deg\n}\n\n[dir=rtl] .fc-forma-jY6 {\n  rotate: none\n}\n\n[dir=rtl] .fc-forma-vk6 {\n  rotate: 45deg\n}\n\n[dir=rtl] .fc-forma-ZW3 {\n  rotate: 90deg\n}\n\n[dir=rtl] .fc-forma-asP {\n  rotate: 180deg\n}\n";
+
+// src/fullcalendar-styles.ts
+var STYLE_ID2 = "ppp-calendar-fullcalendar-styles";
+function ensureFullCalendarStyles(document2) {
+  ensureStyleSheet(document2, STYLE_ID2, `${skeleton_default}
+${theme_default}`);
+}
+
+// src/persisted-calendar-state.ts
+var DATE2 = /^(\d{4})-(\d{2})-(\d{2})$/;
+var GUID2 = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function isDate(value) {
+  if (typeof value !== "string") return false;
+  const match = DATE2.exec(value);
+  if (!match) return false;
+  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+}
+function readPersistedCalendarState(queryParameterName) {
+  if (!queryParameterName || typeof window === "undefined") return {};
+  const raw = new URLSearchParams(window.location.search).get(queryParameterName);
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return {};
+    const { l, d, v, q } = parsed;
+    const state = {};
+    if (calendarLayouts.includes(l)) state.l = l;
+    if (isDate(d)) state.d = d;
+    if (typeof v === "string" && GUID2.test(v)) state.v = v.toLowerCase();
+    if (typeof q === "string" && q.trim()) state.q = q;
+    return state;
+  } catch {
+    return {};
+  }
+}
+function encodePersistedCalendarState(state) {
+  const compact = {};
+  if (state.l) compact.l = state.l;
+  if (state.d) compact.d = state.d;
+  if (state.v) compact.v = state.v;
+  if (state.q?.trim()) compact.q = state.q;
+  return Object.keys(compact).length > 0 ? JSON.stringify(compact) : null;
+}
+function writePersistedCalendarState(queryParameterName, state) {
+  if (!queryParameterName || typeof window === "undefined") return;
+  const encoded = encodePersistedCalendarState(state);
+  const params = new URLSearchParams(window.location.search);
+  if (params.get(queryParameterName) === encoded) return;
+  if (encoded === null) params.delete(queryParameterName);
+  else params.set(queryParameterName, encoded);
+  const query = params.toString();
+  window.history.replaceState(
+    window.history.state,
+    "",
+    `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`
+  );
+}
+var plugins = [formaTheme__default.default, dayGridPlugin__default.default, timeGridPlugin__default.default, listPlugin__default.default, interactionPlugin__default.default];
+var SEARCH_DEBOUNCE_MS = 300;
+var layoutKeys = {
+  day: "layouts.day",
+  workWeek: "layouts.work-week",
+  week: "layouts.week",
+  month: "layouts.month",
+  agenda: "layouts.agenda"
+};
+var useStyles3 = reactComponents.makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalS,
+    minHeight: 0
+  },
+  // Two groups: the views, navigation and title, then search and the rest at the end. On a narrow
+  // screen the end group wraps below the first as a whole rather than squeezing the title.
+  toolbar: {
+    alignItems: "center",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    rowGap: reactComponents.tokens.spacingVerticalXS,
+    columnGap: reactComponents.tokens.spacingHorizontalS,
+    paddingInline: 0
+  },
+  toolbarStart: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalXS,
+    flex: "1 1 auto",
+    minWidth: 0
+  },
+  toolbarEnd: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: reactComponents.tokens.spacingHorizontalXS,
+    marginInlineStart: "auto",
+    minWidth: 0
+  },
+  // The period and the moves through it, kept together.
+  navigation: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalXS,
+    minWidth: 0
+  },
+  title: {
+    flex: "0 1 auto",
+    minWidth: 0,
+    // A heading, which a page's own styles may give margins: none above or below, so it stays
+    // centered on the toolbar's buttons.
+    marginTop: 0,
+    marginBottom: 0,
+    marginInlineStart: reactComponents.tokens.spacingHorizontalS,
+    fontSize: reactComponents.tokens.fontSizeBase400,
+    fontWeight: reactComponents.tokens.fontWeightSemibold,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  // As wide as a grid's view picker.
+  viewPicker: {
+    minWidth: "220px"
+  },
+  search: {
+    width: "220px",
+    maxWidth: "100%"
+  },
+  // The appointments, and the overlay over them while a range loads.
+  body: {
+    position: "relative",
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column"
+  },
+  surface: {
+    flex: 1,
+    minHeight: 0
+  },
+  // As a grid's loading overlay: the appointments dimmed under a spinner.
+  loadingOverlay: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 4,
+    "::before": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+      opacity: 0.7,
+      zIndex: -1
+    }
+  },
+  visuallyHidden: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: 0,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    whiteSpace: "nowrap",
+    border: 0
+  }
+});
+function Calendar({
+  appointments,
+  regarding,
+  tables,
+  defaultTables = DEFAULT_CALENDAR_TABLES,
+  viewIds,
+  multiTableViewIds,
+  defaultViewId: defaultViewId2,
+  customViewDefinitions,
+  matchParties,
+  series,
+  templates,
+  forms,
+  formLocation = "center",
+  viewSort = reactFluent.ViewSort.NameAscending,
+  allowFiltering = false,
+  allowSavedViews = false,
+  savedViewsKey,
+  signInUrl = "/Account/Login",
+  allowSearch = true,
+  includeSearchInPersistedState = false,
+  defaultLayout = "week",
+  layouts,
+  editable = false,
+  regardingTables,
+  height = "600px",
+  onAppointmentClick,
+  appointmentDetails,
+  appointmentTooltip,
+  onRangeSelect,
+  onAppointmentChange,
+  onRangeChange,
+  persistedStateQueryParameter,
+  children
+}) {
+  const styles = useStyles3();
+  const dialog = react$1.useDialogService();
+  const dialogLocation = formLocation === "left" ? "panel-left" : formLocation === "right" ? "panel" : "center";
+  const t = react$1.usePrefixedT("app.components.calendar");
+  const tAll = react$1.useT();
+  const timeZone = react$1.useUserTimeZone();
+  const { locale } = react$1.useLocale();
+  const { ppp, authState, tableMetadataCache, viewMetadataCache } = react$1.usePowerPortalsPro();
+  const awaitsTimeZone = authState.status === "loading";
+  const controller = FullCalendar.useCalendarController();
+  const themeClassName = reactComponents.useThemeClassName();
+  const [direction, setDirection] = react.useState("ltr");
+  const [loading, setLoading] = react.useState(false);
+  const [failed, setFailed] = react.useState(false);
+  const [truncated, setTruncated] = react.useState(false);
+  const [persisted] = react.useState(() => readPersistedCalendarState(persistedStateQueryParameter));
+  const layoutsKey = (layouts ?? []).join(",");
+  const layoutsOffered = react.useMemo(() => offeredLayouts(layouts), [layoutsKey]);
+  const savedViewsControl = react.useMemo(
+    () => core.savedViewControl(core.SavedViewControlKind.Calendar, allowSavedViews ? savedViewsKey : void 0),
+    [allowSavedViews, savedViewsKey]
+  );
+  const saved = reactFluent.useSavedViews({
+    enabled: allowSavedViews && !appointments,
+    tableName: APPOINTMENT_TABLE,
+    control: savedViewsControl
+  });
+  const multiSaved = reactFluent.useMultiTableViews({ enabled: allowSavedViews && !appointments && saved.available, control: savedViewsControl });
+  const settledRef = react.useRef(false);
+  if (!awaitsTimeZone && !saved.loading && !multiSaved.loading) settledRef.current = true;
+  const viewSettled = settledRef.current;
+  const findSaved = (id) => id ? saved.views.find((x) => x.id.toLowerCase() === id.toLowerCase()) : void 0;
+  const findSavedMulti = (id) => id ? multiSaved.views.find((x) => x.id.toLowerCase() === id.toLowerCase()) : void 0;
+  const savedIds = react.useMemo(
+    () => [...saved.views.map((x) => x.id), ...multiSaved.views.map((x) => x.id)],
+    [saved.views, multiSaved.views]
+  );
+  const savedCalendarLayout = (id) => findSaved(id)?.calendarLayout ?? findSavedMulti(id)?.calendarLayout;
+  const viewIdsKey = (viewIds ?? []).join(",");
+  const multiTableKey = (multiTableViewIds ?? []).map((id) => id.toLowerCase()).join(",");
+  const customViewsKey = JSON.stringify(customViewDefinitions ?? []);
+  const isMultiTableView = (id) => !!id && multiTableKey.split(",").includes(id.toLowerCase());
+  const pageViews = react.useMemo(
+    () => offeredViewIds(defaultViewId2, viewIds, multiTableViewIds, customViewDefinitions),
+    // The keys cover the lists' content, so lists passed inline don't rebuild it each render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultViewId2, viewIdsKey, multiTableKey, customViewsKey]
+  );
+  const [pickedViewId, setPickedViewId] = react.useState(persisted.v);
+  const openedViewRef = react.useRef(void 0);
+  const shownViewId = pickedViewId ?? openedViewRef.current;
+  const offered = react.useMemo(
+    () => withSavedViews(pageViews, savedIds, saved.settings, savedViewsControl, shownViewId, saved.available),
+    [pageViews, savedIds, saved.settings, savedViewsControl, shownViewId, saved.available]
+  );
+  const viewId = selectedViewId(offered, shownViewId);
+  if (viewSettled) openedViewRef.current ??= viewId;
+  const openingLayoutRef = react.useRef(void 0);
+  if (openingLayoutRef.current === void 0 && viewSettled) {
+    const savedLayout = persisted.l ? void 0 : readSavedLayout(savedCalendarLayout(viewId));
+    openingLayoutRef.current = openingLayout(layoutsOffered, persisted.l ?? savedLayout, defaultLayout);
+  }
+  const initialLayout = openingLayoutRef.current ?? openingLayout(layoutsOffered, persisted.l, defaultLayout);
+  const viewOpeningLayout = (id) => openingLayout(layoutsOffered, readSavedLayout(savedCalendarLayout(id)), defaultLayout);
+  const showsSearch = !appointments && allowSearch;
+  const [searchText, setSearchText] = react.useState(() => includeSearchInPersistedState ? persisted.q ?? "" : "");
+  const [search, setSearch] = react.useState(searchText);
+  const picksViews = !appointments && offered.length > 1;
+  const namesViews = picksViews || !appointments && saved.available;
+  const namedViewIds = saved.available ? [.../* @__PURE__ */ new Set([...offered, ...pageViews])] : offered;
+  const dataverseViewIds = namedViewIds.filter(
+    (id) => id !== EVERY_TABLE_VIEW_ID && !isMultiTableView(id) && !findCustomView(id, customViewDefinitions) && !findSaved(id) && !findSavedMulti(id)
+  );
+  react$1.useLocalization(namesViews ? dataverseViewIds.map((id) => `views.${id}`) : []);
+  const [viewNames, setViewNames] = react.useState({ dataverse: /* @__PURE__ */ new Map(), multiTable: /* @__PURE__ */ new Map() });
+  const multiTableIds = namedViewIds.filter(isMultiTableView);
+  const namesKey = [...dataverseViewIds, "|", ...multiTableIds].join(",");
+  react.useEffect(() => {
+    if (!namesViews) return;
+    let current = true;
+    void (async () => {
+      const dataverse = new Map(viewNames.dataverse);
+      for (const id of dataverseViewIds.filter((x) => !dataverse.has(x)))
+        dataverse.set(id, await viewMetadataCache.getAsync(id).catch(() => null));
+      const multiTable = new Map(viewNames.multiTable);
+      const missing = multiTableIds.filter((x) => !multiTable.has(x));
+      if (missing.length > 0) {
+        const registeredViews = (await registeredAsync().catch(() => null))?.views ?? [];
+        for (const id of missing) {
+          const known2 = registeredViews.find((view2) => view2.id?.toLowerCase() === id);
+          multiTable.set(id, known2 ? known2.name ?? null : await storedViewName(id));
+        }
+      }
+      if (current) setViewNames({ dataverse, multiTable });
+    })();
+    return () => {
+      current = false;
+    };
+  }, [namesViews, namesKey, ppp]);
+  const labelOf = (id) => {
+    if (id === EVERY_TABLE_VIEW_ID) return t("every-table");
+    const custom = findCustomView(id, customViewDefinitions);
+    if (custom) return custom.displayName?.trim() ? custom.displayName : id;
+    const ownMulti = findSavedMulti(id);
+    if (ownMulti) return ownMulti.name;
+    const own = findSaved(id);
+    if (own) {
+      const key = `tables.${APPOINTMENT_TABLE}.views.${id}.label`;
+      const localized = tAll(key);
+      return localized !== key ? localized : own.name;
+    }
+    if (isMultiTableView(id)) {
+      if (!viewNames.multiTable.has(id)) return null;
+      return viewNames.multiTable.get(id) ?? id;
+    }
+    if (!viewNames.dataverse.has(id)) return null;
+    const metadata = viewNames.dataverse.get(id);
+    if (metadata) {
+      const key = `tables.${metadata.tableName}.views.${id}.label`;
+      const localized = tAll(key);
+      if (localized !== key) return localized;
+    }
+    return metadata?.displayName ?? metadata?.name ?? id;
+  };
+  const showsSavedViewsMenu = allowSavedViews && !appointments && (saved.available || saved.needsSignIn);
+  const viewOptions = react.useMemo(() => {
+    if (offered.length < (showsSavedViewsMenu ? 1 : 2)) return [];
+    const labeled = offered.map((id) => {
+      const label = labelOf(id);
+      return label === null ? null : { id, label };
+    });
+    if (labeled.some((option) => option === null)) return [];
+    const options2 = labeled;
+    if (viewSort === reactFluent.ViewSort.NameAscending) options2.sort((a, b) => a.label.localeCompare(b.label, locale));
+    if (viewSort === reactFluent.ViewSort.NameDescending) options2.sort((a, b) => b.label.localeCompare(a.label, locale));
+    return options2;
+  }, [offered, customViewsKey, saved.views, multiSaved.views, viewNames, viewSort, tAll, locale, showsSavedViewsMenu]);
+  const showsViewPicker = !appointments && viewOptions.length > (showsSavedViewsMenu ? 0 : 1);
+  react.useEffect(() => {
+    ensureFullCalendarStyles(document);
+    ensureCalendarStyles(document);
+    setDirection(document.dir === "rtl" ? "rtl" : "ltr");
+  }, []);
+  const options = react.useMemo(
+    () => calendarOptions({
+      layout: initialLayout,
+      layouts: layoutsOffered,
+      date: persisted.d,
+      timeZone,
+      editable,
+      locale,
+      direction,
+      text: {
+        allDay: t("all-day"),
+        noEvents: t("no-events"),
+        close: t("close"),
+        more: (count) => t("more", [count])
+      }
+    }),
+    [initialLayout, layoutsOffered, persisted.d, timeZone, editable, locale, direction, t]
+  );
+  const [openAppointment, setOpenAppointment] = react.useState(null);
+  const [recurringChoice, setRecurringChoice] = react.useState(null);
+  const seriesOf = react.useRef(/* @__PURE__ */ new Map());
+  const [creating, setCreating] = react.useState(null);
+  const mayCreate = react.useRef(null);
+  const regardingName = react.useRef(null);
+  const latestStart = react.useRef(0);
+  react.useEffect(() => () => void (latestStart.current = -1), []);
+  const user = authState.status === "authenticated" ? authState.user?.userId : null;
+  const tablesKey = (tables ?? []).map((table) => table.trim().toLowerCase()).join(",");
+  const allowedTables = tablesKey ? new Set(tablesKey.split(",")) : null;
+  const mayCreateAppointments = () => {
+    let asked = mayCreate.current;
+    if (!asked || asked.user !== user) {
+      asked = mayCreate.current = {
+        user,
+        // Only where the calendar may show appointments.
+        answer: (allowedTables && !allowedTables.has(APPOINTMENT_TABLE) ? Promise.resolve(core.TableSecurityPermission.None) : ppp.retrieveTablePermissionsAsync(APPOINTMENT_TABLE)).then((permissions) => (Number(permissions) & core.TableSecurityPermission.Create) !== 0).catch(() => {
+          mayCreate.current = null;
+          return false;
+        })
+      };
+    }
+    return asked.answer;
+  };
+  const startAppointment = async (range) => {
+    const start = ++latestStart.current;
+    if (!await mayCreateAppointments()) return;
+    let name = null;
+    if (regarding?.id) {
+      const key = `${regarding.tableName}:${regarding.id}`;
+      if (regardingName.current?.key !== key) {
+        regardingName.current = { key, name: readName(regarding.tableName, regarding.id) };
+      }
+      name = await regardingName.current.name;
+    }
+    if (start === latestStart.current) setCreating(newAppointment(range, regarding ? { ...regarding, name } : null));
+  };
+  const readName = async (tableName, id) => {
+    try {
+      const table = await tableMetadataCache.getAsync(tableName);
+      if (!table) return null;
+      const record = await ppp.retrieveRecordAsync(tableName, id, [table.primaryNameColumn]);
+      const value = record.properties?.[table.primaryNameColumn]?.value;
+      return typeof value === "string" ? value : null;
+    } catch {
+      return null;
+    }
+  };
+  const recurringText = t("recurring");
+  const customTooltip = appointmentTooltip !== void 0;
+  const appointmentTooltipRef = react.useRef(appointmentTooltip);
+  appointmentTooltipRef.current = appointmentTooltip;
+  const templatesRef = react.useRef(templates);
+  templatesRef.current = templates;
+  const templatedTables = Object.keys(templates ?? {}).map((x) => x.trim().toLowerCase()).sort().join();
+  const renderAppointment = react.useCallback(
+    (info) => {
+      const content = customTooltip ? () => appointmentTooltipRef.current?.(appointmentFromEvent(info.event)) : /* @__PURE__ */ jsxRuntime.jsx(AppointmentSummaryContent, { summary: summarizeAppointment(info.event, locale, recurringText, timeZone) });
+      const table = info.event.extendedProps["table"];
+      const template = table ? templateFor(templatesRef.current, table) : void 0;
+      const row = template ? rows.current.get(info.event.id) : void 0;
+      return /* @__PURE__ */ jsxRuntime.jsx(AppointmentTooltip, { content, children: template && row ? templateContent(info, template(row)) : appointmentContent(info) });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locale, recurringText, timeZone, customTooltip, templatedTables]
+  );
+  const [refreshes, setRefreshes] = react.useState(0);
+  const latestLoad = react.useRef(null);
+  react.useEffect(() => () => latestLoad.current?.abort(), []);
+  const registeredRef = react.useRef(null);
+  const [registered, setRegistered] = react.useState(null);
+  const registeredAsync = () => {
+    let asked = registeredRef.current;
+    if (!asked || asked.user !== user) {
+      const answer = ppp.getMultiTableTablesAsync();
+      asked = registeredRef.current = { user, answer };
+      answer.then(
+        (response) => registeredRef.current?.answer === answer && setRegistered(response),
+        () => {
+          if (registeredRef.current?.answer === answer) registeredRef.current = null;
+        }
+      );
+    }
+    return asked.answer;
+  };
+  const infoOf = (table) => registered?.tables?.find((x) => x.table === table);
+  const storedViewName = async (id) => {
+    try {
+      const stored2 = await ppp.retrieveRecordAsync("ppp_multitableview", id, ["ppp_name"]);
+      const name = stored2.properties?.["ppp_name"]?.value;
+      return typeof name === "string" ? name : null;
+    } catch {
+      return null;
+    }
+  };
+  const storedViewTables = react.useRef(/* @__PURE__ */ new Map());
+  const isStoredView = (id, response) => isMultiTableView(id) && !(response.views ?? []).some((view2) => view2.id?.toLowerCase() === id);
+  const viewTablesAsync = async (id) => {
+    if (id === EVERY_TABLE_VIEW_ID) return null;
+    if (isMultiTableView(id))
+      return (await registeredAsync()).views?.find((view3) => view3.id?.toLowerCase() === id)?.tables ?? null;
+    const custom = findCustomView(id, customViewDefinitions);
+    if (custom) return custom.tables;
+    const ownMulti = findSavedMulti(id);
+    if (ownMulti) return ownMulti.tables;
+    const own = findSaved(id);
+    if (own) return [{ table: APPOINTMENT_TABLE, viewType: core.MultiTableViewType.FetchXml, fetchXml: own.definition.fetchXml }];
+    const view2 = await viewMetadataCache.getAsync(id);
+    if (view2) return [{ table: view2.tableName.toLowerCase(), viewType: core.MultiTableViewType.SystemView, viewId: id }];
+    console.warn(`[Calendar] The view ${id} doesn't exist or is on a table the user may not read, so it shows nothing.`);
+    return [];
+  };
+  const defaultsKey = defaultTables.map((table) => table.trim().toLowerCase()).join(",");
+  const [knownTables, setKnownTables] = react.useState({ viewId: void 0, tables: [] });
+  const known = knownTables.viewId === viewId ? knownTables.tables : [];
+  const [hiddenChoice, setHiddenChoice] = react.useState(null);
+  const hiddenIn = (id, of) => hiddenChoice && hiddenChoice.viewId === id ? hiddenChoice.tables : hiddenByDefault(id, of, new Set(defaultsKey.split(",").filter(Boolean)));
+  const hidden = hiddenIn(viewId, known);
+  const shownIn = (id, of, byView = false) => {
+    const off = byView ? hiddenByDefault(id, of, new Set(defaultsKey.split(",").filter(Boolean))) : hiddenIn(id, of);
+    return of.length < 2 ? [...of] : of.filter((table) => !off.includes(table));
+  };
+  const shownTables = shownIn(viewId, known);
+  const kinds = known.length > 1 ? known : [];
+  const hiddenAtOpen = hiddenByDefault(viewId, known, new Set(defaultsKey.split(",").filter(Boolean)));
+  const tablesChanged = kinds.some((table) => hidden.includes(table) !== hiddenAtOpen.includes(table));
+  const showTable = (table, shown) => {
+    const next = shown ? hidden.filter((x) => x !== table) : [.../* @__PURE__ */ new Set([...hidden, table])];
+    setHiddenChoice({ viewId, tables: next });
+  };
+  react$1.useLocalization(known.map((table) => `tables.${table}`));
+  const tableLabel = (table) => {
+    const key = `tables.${table}.label`;
+    const label = tAll(key);
+    return label !== key ? label : table;
+  };
+  const rows = react.useRef(/* @__PURE__ */ new Map());
+  const dateOnly = react.useRef(/* @__PURE__ */ new Map());
+  const learnDateOnly = async (tables2, response) => {
+    for (const table of [...new Set(tables2)].filter((x) => !dateOnly.current.has(x))) {
+      const start = response.tables?.find((x) => x.table === table)?.definition?.start;
+      try {
+        const metadata = await tableMetadataCache.getAsync(table);
+        const column = metadata?.columns?.find((x) => x.columnName === start);
+        dateOnly.current.set(table, column?.dateTimeBehavior === 1);
+      } catch {
+        dateOnly.current.set(table, false);
+      }
+    }
+  };
+  const [failures, setFailures] = react.useState([]);
+  const showsFilterButton = !appointments && allowFiltering && !(registered && isStoredView(viewId, registered));
+  const [userFilter, setUserFilter] = react.useState(null);
+  react.useEffect(() => {
+    setUserFilter((current) => current && current.viewId !== viewId ? null : current);
+    setHiddenChoice((current) => current && current.viewId !== viewId ? null : current);
+  }, [viewId]);
+  const filtered = userFilter && userFilter.viewId === viewId ? userFilter : null;
+  const [filterDialog, setFilterDialog] = react.useState(null);
+  const filterTablesAsync = async (id) => {
+    const response = await registeredAsync();
+    const tablesShown = await viewTablesAsync(id) ?? (id === EVERY_TABLE_VIEW_ID ? (tablesOf(null, response.tables ?? [], allowedTables, null, false) ?? []).map((table) => ({ table })) : []);
+    return reactFluent.multiTableFilterQueries(tablesShown, async (viewOf) => (await viewMetadataCache.getAsync(viewOf))?.fetchXml);
+  };
+  const isShownTable = (table, named, shownNow, response) => {
+    const lower = (x) => x.toLowerCase();
+    return lower(table) === "activitypointer" ? shownNow.some((x) => response.tables?.find((info) => info.table === x)?.isActivity && !named.map(lower).includes(lower(x))) : shownNow.map(lower).includes(lower(table));
+  };
+  const openFilter = async () => {
+    const id = viewId;
+    if (!id) return;
+    try {
+      const response = await registeredAsync();
+      const tablesShown = await filterTablesAsync(id);
+      const knownNow = tablesOf(
+        await viewTablesAsync(id) ?? null,
+        response.tables ?? [],
+        allowedTables,
+        storedViewTables.current.get(id),
+        isStoredView(id, response)
+      ) ?? [];
+      const shownNow = shownIn(id, knownNow);
+      const named = tablesShown.map((x) => x.table.table ?? "");
+      const tabs = reactFluent.multiTableFilterTabs(
+        tablesShown,
+        (table) => isShownTable(table, named, shownNow, response),
+        tableLabel,
+        filtered?.criteria
+      );
+      const shownByView = shownIn(id, knownNow, true);
+      const viewTabs = reactFluent.multiTableFilterTabs(tablesShown, (table) => isShownTable(table, named, shownByView, response), tableLabel);
+      if (tabs.length > 0 && id === viewId) setFilterDialog({ viewId: id, tables: tablesShown, tabs, viewTabs });
+    } catch (error) {
+      console.warn("[Calendar] The filters of the view shown could not be read.", error);
+    }
+  };
+  const applyFilter = (criteria, restoreView) => {
+    const dialog2 = filterDialog;
+    setFilterDialog(null);
+    if (!dialog2 || dialog2.viewId !== viewId) return;
+    const filter = reactFluent.applyMultiTableFilter(dialog2.tables, restoreView ? dialog2.viewTabs : dialog2.tabs, criteria);
+    setUserFilter(filter ? { viewId, tables: filter.tables, criteria: filter.criteria } : null);
+    if (!restoreView) return;
+    setHiddenChoice(null);
+    const layout = viewOpeningLayout(viewId);
+    if (layout !== currentLayout && layoutsOffered.includes(layout)) controller.changeView(toFullCalendarView(layout));
+  };
+  const searched = showsSearch ? search.trim() : "";
+  const sourceKey = JSON.stringify([
+    regarding ?? null,
+    viewId ?? null,
+    findSaved(viewId)?.definition.fetchXml ?? null,
+    findSavedMulti(viewId)?.tables ?? null,
+    customViewsKey,
+    filtered?.tables ?? null,
+    searched,
+    hiddenChoice,
+    tablesKey,
+    defaultsKey,
+    matchParties ?? null,
+    series ?? null,
+    multiTableKey,
+    user ?? null
+  ]);
+  const shownState = react.useRef({});
+  const persistRef = react.useRef(() => {
+  });
+  persistRef.current = (next = {}) => {
+    const v = "viewId" in next ? next.viewId : !offersViews(offered) ? pickedViewId : viewId;
+    const q = next.search ?? search;
+    const shown = shownState.current;
+    const opens = viewOpeningLayout("viewId" in next ? next.viewId : viewId);
+    writePersistedCalendarState(persistedStateQueryParameter, {
+      ...shown.layout && shown.layout !== opens ? { l: shown.layout } : {},
+      ...shown.d ? { d: shown.d } : {},
+      ...v && v !== offered[0] ? { v } : {},
+      ...includeSearchInPersistedState && showsSearch && q.trim() ? { q } : {}
+    });
+  };
+  const persist = (next) => persistRef.current(next);
+  const openingViewRef = react.useRef(offered[0]);
+  react.useEffect(() => {
+    const previous = openingViewRef.current;
+    openingViewRef.current = offered[0];
+    if (viewSettled && previous !== void 0 && previous !== offered[0]) persist();
+  }, [offered[0]]);
+  react.useEffect(() => {
+    if (searchText === search) return;
+    const timer = setTimeout(() => {
+      setSearch(searchText);
+      persist({ search: searchText });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [searchText]);
+  const events = react.useMemo(() => {
+    if (appointments) return appointments.map(toEventInput);
+    return async (info) => {
+      latestLoad.current?.abort();
+      const load = new AbortController();
+      latestLoad.current = load;
+      const id = viewId;
+      try {
+        if (!id) return [];
+        const response = await registeredAsync();
+        const viewTables = await viewTablesAsync(id);
+        const stored2 = isStoredView(id, response);
+        let knownNow = tablesOf(viewTables, response.tables ?? [], allowedTables, storedViewTables.current.get(id), stored2);
+        if (latestLoad.current === load && knownNow) setKnownTables({ viewId: id, tables: knownNow });
+        if (knownNow?.length === 0) {
+          if (latestLoad.current === load) {
+            setFailed(false);
+            setTruncated(false);
+            setFailures([]);
+          }
+          rows.current = /* @__PURE__ */ new Map();
+          return [];
+        }
+        const request = {
+          start: info.start.toISOString(),
+          end: info.end.toISOString(),
+          viewId: filtered || !isMultiTableView(id) ? null : id,
+          tables: filtered ? [...filtered.tables] : viewTables && viewTables.length > 0 ? [...viewTables] : null,
+          // A view whose tables aren't known yet is read as the calendar allows.
+          includeTables: knownNow ? shownIn(id, knownNow) : allowedTables ? [...allowedTables] : null,
+          regarding: regarding ? { tableName: regarding.tableName, id: regarding.id } : null,
+          matchParties: matchParties ?? null,
+          series: series ?? null,
+          search: searched || null,
+          columns: CALENDAR_COLUMNS
+        };
+        const range = await ppp.loadMultiTableRangeAsync(request, load.signal);
+        if (!knownNow && stored2) {
+          storedViewTables.current.set(id, range.tables ?? []);
+          knownNow = tablesOf(null, response.tables ?? [], allowedTables, range.tables ?? [], true) ?? [];
+          if (latestLoad.current === load) setKnownTables({ viewId: id, tables: knownNow });
+        }
+        const items = range.items ?? [];
+        await learnDateOnly(items.map((item) => item.table ?? ""), response);
+        if (latestLoad.current === load) {
+          setFailed(false);
+          setTruncated((range.truncated ?? []).length > 0);
+          setFailures(range.failures ?? []);
+          rows.current = new Map(items.map((item) => [item.id, item]));
+          seriesOf.current = new Map(
+            items.flatMap((item) => {
+              const seriesId = item.record?.properties?.["seriesid"]?.value;
+              return item.table === APPOINTMENT_TABLE && typeof seriesId === "string" ? [[item.id, seriesId]] : [];
+            })
+          );
+        }
+        return items.map(
+          (item) => toEventInput(
+            fromMultiTableItem(
+              item,
+              response.tables?.find((x) => x.table === item.table),
+              drawnTimes(item, dateOnly.current.get(item.table ?? "") ?? false, timeZone)
+            )
+          )
+        );
+      } catch {
+        if (latestLoad.current === load) {
+          setFailed(true);
+          setTruncated(false);
+          setFailures([]);
+        }
+        return [];
+      }
+    };
+  }, [appointments, ppp, sourceKey, refreshes, timeZone]);
+  const handleChange = async (info) => {
+    const change = toAppointmentChange(info.event);
+    if (onAppointmentChange) {
+      if (!await onAppointmentChange(change)) info.revert();
+      return;
+    }
+    if (appointments) return;
+    const item = rows.current.get(change.id);
+    const record = item ? moveRecord(change, item, infoOf(item.table ?? ""), dateOnly.current.get(item.table ?? "") ?? false, timeZone) : null;
+    if (!record) {
+      info.revert();
+      return;
+    }
+    try {
+      await ppp.updateRecordAsync(record);
+      setRefreshes((count) => count + 1);
+    } catch (error) {
+      console.error("[Calendar] The move could not be saved.", error);
+      info.revert();
+      await dialog.showErrorAsync(t("move-failed"));
+    }
+  };
+  const [panelRow, setPanelRow] = react.useState(null);
+  const openRow = async (table, id) => {
+    try {
+      const record = await ppp.retrieveRecordAsync(table, id);
+      const permissions = Number(record.permissions ?? 0);
+      setPanelRow({
+        table,
+        id,
+        record: editable ? record : { ...record, permissions: permissions & ~(core.TableSecurityPermission.Write | core.TableSecurityPermission.Delete) }
+      });
+    } catch (error) {
+      console.error(`[Calendar] The ${table} ${id} could not be read for its form.`, error);
+      await dialog.showErrorAsync(t("open-failed"));
+    }
+  };
+  const view = controller.view;
+  const currentLayout = (view && fromFullCalendarView(view.type)) ?? initialLayout;
+  const buttons = view ? controller.getButtonState() : void 0;
+  const [mayCreateHere, setMayCreateHere] = react.useState(false);
+  const asksPermission = editable && !onRangeSelect && !appointments;
+  react.useEffect(() => {
+    if (!asksPermission) return;
+    let current = true;
+    void mayCreateAppointments().then((answer) => current && setMayCreateHere(answer));
+    return () => {
+      current = false;
+    };
+  }, [asksPermission, user]);
+  const canCreateAppointments = editable && (onRangeSelect !== void 0 || asksPermission && mayCreateHere);
+  const createAppointment = async (range) => {
+    if (!editable) return;
+    const shown = controller.view;
+    const chosen = range ?? (shown && newAppointmentRange(shown.currentStart, shown.currentEnd, /* @__PURE__ */ new Date(), timeZone));
+    if (!chosen) return;
+    if (onRangeSelect) onRangeSelect(chosen);
+    else if (!appointments) await startAppointment(chosen);
+  };
+  const calendarContext = {
+    layout: currentLayout,
+    start: view?.activeStart,
+    end: view?.activeEnd,
+    regarding,
+    canCreateAppointments,
+    createAppointment,
+    refresh: () => setRefreshes((count) => count + 1)
+  };
+  const onLayoutChecked = (_, data) => {
+    const next = data.checkedItems[0];
+    if (next && layoutsOffered.includes(next)) controller.changeView(toFullCalendarView(next));
+  };
+  const pickView = (next) => {
+    if (!next || next === viewId) return;
+    setPickedViewId(next);
+    const layout = readSavedLayout(savedCalendarLayout(next));
+    if (layout && layout !== currentLayout && layoutsOffered.includes(layout)) controller.changeView(toFullCalendarView(layout));
+    persist({ viewId: next });
+  };
+  const shownSaved = findSaved(viewId);
+  const shownSavedMulti = findSavedMulti(viewId);
+  const showsAppointmentsAlone = shownTables.length === 1 && shownTables[0] === APPOINTMENT_TABLE;
+  const canSaveView = shownTables.length > 0 && !(registered && isStoredView(viewId, registered));
+  const viewChanged = !!filtered || tablesChanged || currentLayout !== viewOpeningLayout(viewId);
+  const savedViewChanged = (!!shownSaved || !!shownSavedMulti) && canSaveView && viewChanged;
+  const isUserDefault = !!viewId && core.defaultViewId(saved.settings, offered, savedViewsControl) === viewId;
+  const [savingView, setSavingView] = react.useState(false);
+  const [nameDialog, setNameDialog] = react.useState(null);
+  const [manageViewsOpen, setManageViewsOpen] = react.useState(false);
+  const currentQuery = async () => {
+    if (!showsAppointmentsAlone || !viewId) return void 0;
+    const own = filtered?.tables.find((x) => x.table === APPOINTMENT_TABLE);
+    if (own && (own.viewType ?? core.MultiTableViewType.FetchXml) === core.MultiTableViewType.FetchXml && own.fetchXml) return own.fetchXml;
+    return (await filterTablesAsync(viewId)).find((x) => x.table.table === APPOINTMENT_TABLE)?.fetchXml ?? void 0;
+  };
+  const currentTables = async () => {
+    if (!viewId) return [];
+    const response = await registeredAsync();
+    const tablesNow = filtered ? [...filtered.tables] : (await filterTablesAsync(viewId)).map((x) => x.table);
+    return core.shownViewTables(tablesNow, known, shownTables, (table) => !!response.tables?.find((info) => info.table === table)?.isActivity);
+  };
+  const runSavedViewChange = async (change) => {
+    if (savingView) return;
+    setSavingView(true);
+    try {
+      await change();
+    } catch (error) {
+      console.warn("[Calendar] A change to the user\u2019s saved views failed.", error);
+      await dialog.showErrorAsync(tAll("app.components.grid.saved-views-error"));
+    } finally {
+      setSavingView(false);
+    }
+  };
+  const signedIn = async (action) => {
+    if (!saved.needsSignIn) {
+      await action();
+      return;
+    }
+    const result = await dialog.showConfirmationAsync(tAll("app.components.grid.saved-views-sign-in-message"), {
+      title: tAll("app.components.grid.saved-views-sign-in-title"),
+      primaryText: tAll("app.buttons.login.label"),
+      secondaryText: tAll("app.buttons.cancel.label")
+    });
+    if (result.canceled) return;
+    const returnUrl = window.location.pathname + window.location.search + window.location.hash;
+    window.location.assign(`${signInUrl}${signInUrl.includes("?") ? "&" : "?"}ReturnUrl=${encodeURIComponent(returnUrl)}`);
+  };
+  const showSavedView = (id) => {
+    setUserFilter(null);
+    setHiddenChoice(null);
+    setPickedViewId(id);
+    persist({ viewId: id });
+  };
+  const saveView = () => runSavedViewChange(async () => {
+    if (shownSavedMulti) {
+      const tables2 = await currentTables();
+      if (tables2.length === 0) return;
+      await multiSaved.update(shownSavedMulti.id, { tables: tables2, calendarLayout: writeSavedLayout(currentLayout) });
+    } else {
+      if (!shownSaved) return;
+      const fetchXml = await currentQuery();
+      if (!fetchXml) return;
+      await saved.update(shownSaved.id, { fetchXml, calendarLayout: writeSavedLayout(currentLayout) });
+    }
+    setUserFilter(null);
+    setHiddenChoice(null);
+  });
+  const saveViewAs = (name) => runSavedViewChange(async () => {
+    const fetchXml = showsAppointmentsAlone ? await currentQuery() : void 0;
+    if (fetchXml) {
+      const view3 = await saved.create(name, fetchXml, { calendarLayout: writeSavedLayout(currentLayout) });
+      showSavedView(view3.id.toLowerCase());
+      return;
+    }
+    const tables2 = await currentTables();
+    if (tables2.length === 0) return;
+    const view2 = await multiSaved.create(name, tables2, { calendarLayout: writeSavedLayout(currentLayout) });
+    showSavedView(view2.id.toLowerCase());
+  });
+  const cloneView = (id, name) => runSavedViewChange(async () => {
+    const own = findSaved(id);
+    const custom = findCustomView(id, customViewDefinitions)?.tables;
+    const only = custom?.length === 1 && custom[0].table === APPOINTMENT_TABLE && (custom[0].viewType ?? core.MultiTableViewType.FetchXml) === core.MultiTableViewType.FetchXml ? custom[0].fetchXml ?? everyRow(APPOINTMENT_TABLE) : void 0;
+    const ownMulti = findSavedMulti(id);
+    const dataverse = own || only || ownMulti || custom ? void 0 : await viewMetadataCache.getAsync(id);
+    const fetchXml = own?.definition.fetchXml ?? only ?? (dataverse?.tableName.toLowerCase() === APPOINTMENT_TABLE ? dataverse.fetchXml : void 0);
+    if (fetchXml) {
+      await saved.create(name, fetchXml, { gridLayout: own?.gridLayout, calendarLayout: own?.calendarLayout });
+      return;
+    }
+    const tables2 = ownMulti?.tables ?? await viewTablesAsync(id) ?? (id === EVERY_TABLE_VIEW_ID ? known.map((table) => ({ table })) : null);
+    if (!tables2 || tables2.length === 0) return;
+    await multiSaved.create(name, tables2, { calendarLayout: ownMulti?.calendarLayout });
+  });
+  const renameView = (id, name) => runSavedViewChange(async () => void (findSavedMulti(id) ? await multiSaved.update(id, { name }) : await saved.update(id, { name })));
+  const deleteView = async (id) => {
+    const result = await dialog.showConfirmationAsync(
+      tAll("app.components.grid.saved-views-delete-message", [findSaved(id)?.name ?? findSavedMulti(id)?.name ?? ""]),
+      {
+        title: tAll("app.components.grid.saved-views-delete-title"),
+        primaryText: tAll("app.components.grid.saved-views-delete"),
+        secondaryText: tAll("app.buttons.cancel.label")
+      }
+    );
+    if (result.canceled) return;
+    await runSavedViewChange(async () => {
+      if (findSavedMulti(id)) {
+        await multiSaved.remove(id);
+        await saved.reloadSettings();
+      } else {
+        await saved.remove(id);
+      }
+      if (id.toLowerCase() === viewId) setUserFilter(null);
+    });
+  };
+  const setDefault = (id, isDefault) => runSavedViewChange(() => saved.setDefault(id, isDefault, viewLabel(id)));
+  const setHidden = (id, isHidden) => runSavedViewChange(() => saved.setHidden(id, isHidden, viewLabel(id)));
+  function viewLabel(id) {
+    return labelOf(id.toLowerCase()) ?? findSaved(id)?.name ?? findSavedMulti(id)?.name ?? id;
+  }
+  const managedViews = react.useMemo(() => {
+    if (!manageViewsOpen) return [];
+    const all = [.../* @__PURE__ */ new Set([...pageViews, ...savedIds.map((x) => x.toLowerCase())])];
+    const userDefault = core.defaultViewId(saved.settings, all, savedViewsControl);
+    return all.map((id) => ({
+      id,
+      name: viewLabel(id),
+      isSaved: !!findSaved(id) || !!findSavedMulti(id),
+      isDefault: id === userDefault,
+      isHidden: core.isViewHidden(saved.settings, id, savedViewsControl),
+      isShown: id === viewId
+    }));
+  }, [manageViewsOpen, pageViews, savedIds, saved.settings, savedViewsControl, viewId, viewOptions, viewNames]);
+  const onNameDialogSave = (name) => {
+    const asked = nameDialog;
+    setNameDialog(null);
+    if (!asked) return;
+    if (asked.kind === "rename") void renameView(asked.viewId, name);
+    else if (asked.kind === "clone") void cloneView(asked.viewId, name);
+    else void saveViewAs(name);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root, style: { height }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Toolbar, { className: styles.toolbar, "aria-label": t("toolbar"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.toolbarStart, children: showsViewPicker && /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Dropdown,
+        {
+          className: reactComponents.mergeClasses("ppp-calendar-view-picker", styles.viewPicker),
+          "aria-label": tAll("app.components.view-selector.view-name"),
+          value: viewOptions.find((option) => option.id === viewId)?.label ?? "",
+          selectedOptions: viewId ? [viewId] : [],
+          onOptionSelect: (_, data) => pickView(data.optionValue),
+          children: viewOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: option.id, text: option.label, children: option.label }, option.id))
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.toolbarEnd, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses("ppp-calendar-navigation", styles.navigation), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ToolbarButton,
+            {
+              appearance: "subtle",
+              disabled: buttons?.today?.isDisabled ?? false,
+              onClick: () => controller.today(),
+              children: t("today")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ToolbarButton,
+            {
+              appearance: "subtle",
+              icon: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronRightRegular, {}) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronLeftRegular, {}),
+              "aria-label": t("previous"),
+              onClick: () => controller.prev()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.ToolbarButton,
+            {
+              appearance: "subtle",
+              icon: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronLeftRegular, {}) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronRightRegular, {}),
+              "aria-label": t("next"),
+              onClick: () => controller.next()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { className: styles.title, as: "h2", "aria-live": "polite", children: view?.title })
+        ] }),
+        children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.Provider, { value: calendarContext, children }),
+        layoutsOffered.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Menu, { checkedValues: { layout: [currentLayout] }, onCheckedValueChange: onLayoutChecked, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuButton, { className: "ppp-calendar-layout", appearance: "subtle", children: t(layoutKeys[currentLayout]) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuList, { children: layoutsOffered.map((layout) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "layout", value: layout, children: t(layoutKeys[layout]) }, layout)) }) })
+        ] }),
+        showsSearch && /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SearchBox,
+          {
+            className: reactComponents.mergeClasses("ppp-calendar-search", styles.search),
+            placeholder: t("search-placeholder"),
+            "aria-label": t("search-placeholder"),
+            value: searchText,
+            onChange: (_, data) => setSearchText(data.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactFluent.ViewFilterMenu,
+          {
+            changed: viewChanged,
+            onEditFilters: showsFilterButton ? () => void openFilter() : void 0,
+            tables: appointments ? void 0 : kinds.map((table) => ({ table, label: tableLabel(table), shown: !hidden.includes(table) })),
+            onTableShownChange: showTable,
+            savedViews: showsSavedViewsMenu ? {
+              canSave: savedViewChanged,
+              canSaveAs: canSaveView && viewChanged,
+              canSetDefault: !!viewId && !isUserDefault,
+              busy: savingView,
+              onSave: () => void signedIn(saveView),
+              onSaveAs: () => void signedIn(() => setNameDialog({ kind: "saveAs", viewId: viewId ?? "", name: "" })),
+              onSetDefault: () => void signedIn(() => viewId ? setDefault(viewId, true) : void 0),
+              onManage: () => void signedIn(() => setManageViewsOpen(true))
+            } : void 0
+          }
+        ),
+        !appointments && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Tooltip, { content: tAll("app.buttons.refresh.label"), relationship: "label", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.ToolbarButton,
+          {
+            className: "ppp-calendar-refresh",
+            appearance: "subtle",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowClockwiseRegular, {}),
+            disabled: loading,
+            onClick: () => setRefreshes((count) => count + 1)
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactFluent.GridSaveViewDialog,
+      {
+        open: nameDialog !== null,
+        title: tAll(
+          nameDialog?.kind === "rename" ? "app.components.grid.saved-views-rename-title" : nameDialog?.kind === "clone" ? "app.components.grid.saved-views-clone-title" : "app.components.grid.saved-views-save-as-title"
+        ),
+        name: nameDialog?.name ?? "",
+        onSave: onNameDialogSave,
+        onCancel: () => setNameDialog(null)
+      }
+    ),
+    saved.available && /* @__PURE__ */ jsxRuntime.jsx(
+      reactFluent.GridManageViewsPanel,
+      {
+        open: manageViewsOpen,
+        onOpenChange: setManageViewsOpen,
+        views: managedViews,
+        busy: savingView,
+        onOpenView: (id) => {
+          setManageViewsOpen(false);
+          pickView(id);
+        },
+        onSetDefault: (id, isDefault) => void setDefault(id, isDefault),
+        onSetHidden: (id, isHidden) => void setHidden(id, isHidden),
+        onRename: (id) => setNameDialog({ kind: "rename", viewId: id, name: findSaved(id)?.name ?? findSavedMulti(id)?.name ?? "" }),
+        onClone: (id) => setNameDialog({ kind: "clone", viewId: id, name: tAll("app.components.grid.saved-views-copy-of", [viewLabel(id)]) }),
+        onDelete: (id) => void deleteView(id)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactFluent.MultiTableFilterDialog,
+      {
+        open: filterDialog !== null,
+        tabs: filterDialog?.tabs ?? [],
+        viewTabs: filterDialog?.viewTabs,
+        onApply: applyFilter,
+        onCancel: () => setFilterDialog(null)
+      }
+    ),
+    failed ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: t("error") }) }) : failures.length > 0 && // A table that couldn't be read leaves the rest of the range as it is.
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MessageBar, { intent: "warning", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: t("failed-tables", [failures.map((x) => tableLabel(x.table ?? "")).join(", ")]) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarActions, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", onClick: () => setRefreshes((count) => count + 1), children: t("retry") }) })
+    ] }),
+    truncated && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "warning", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: t("truncated") }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.surface, children: viewSettled && /* @__PURE__ */ jsxRuntime.jsx(
+        FullCalendar__default.default,
+        {
+          ...options,
+          popoverClass: `${options.popoverClass} ${themeClassName}`,
+          plugins,
+          controller,
+          events,
+          loading: setLoading,
+          eventContent: renderAppointment,
+          eventClick: (info) => {
+            info.jsEvent.preventDefault();
+            const table = info.event.extendedProps["table"];
+            if (onAppointmentClick) onAppointmentClick(info.event.id);
+            else if (table === SERIES_TABLE2 && !appointments) {
+              latestStart.current++;
+              setOpenAppointment({ id: info.event.id, subject: info.event.title, recurring: false, isSeries: true });
+            } else if (table && table !== APPOINTMENT_TABLE && !appointments) {
+              latestStart.current++;
+              void openRow(table, info.event.id);
+            } else {
+              const opened = appointmentToOpen(info.event, appointments !== void 0);
+              if (opened) {
+                latestStart.current++;
+                const seriesId = opened.recurring ? seriesOf.current.get(opened.id) : void 0;
+                if (seriesId) setRecurringChoice({ ...opened, seriesId });
+                else setOpenAppointment(opened);
+              }
+            }
+          },
+          select: (info) => {
+            const range = { start: info.start, end: info.end, allDay: info.allDay };
+            if (onRangeSelect) onRangeSelect(range);
+            else if (!appointments) void startAppointment(range);
+            info.view.calendar.unselect();
+          },
+          eventDrop: handleChange,
+          eventResize: handleChange,
+          datesSet: (info) => {
+            const layout = fromFullCalendarView(info.view.type);
+            if (!layout) return;
+            const date = periodDate(info.view.currentStart, info.view.currentEnd, /* @__PURE__ */ new Date(), timeZone);
+            shownState.current = { layout, ...date ? { d: date } : {} };
+            persist();
+            onRangeChange?.({ start: info.start, end: info.end, layout });
+          }
+        }
+      ) }),
+      (loading || awaitsTimeZone || saved.loading || multiSaved.loading) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.loadingOverlay, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { size: "large" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.visuallyHidden, role: "status", "aria-live": "polite", children: loading ? t("loading") : "" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AppointmentDetailsDialog,
+      {
+        appointment: openAppointment,
+        newAppointment: creating,
+        editable,
+        regardingTables,
+        location: dialogLocation,
+        onClose: () => {
+          setOpenAppointment(null);
+          setCreating(null);
+        },
+        onSaved: () => setRefreshes((count) => count + 1),
+        children: appointmentDetails
+      }
+    ),
+    panelRow && infoOf(panelRow.table)?.definition && /* @__PURE__ */ jsxRuntime.jsx(
+      reactFluent.MultiTableRecordPanel,
+      {
+        title: tableLabel(panelRow.table),
+        existing: { table: panelRow.table, id: panelRow.id },
+        loaded: panelRow.record,
+        form: forms?.[panelRow.table]?.edit,
+        location: dialogLocation,
+        definition: infoOf(panelRow.table).definition,
+        onSaved: () => {
+          setPanelRow(null);
+          setRefreshes((count) => count + 1);
+        },
+        onClose: () => setPanelRow(null)
+      },
+      `${panelRow.table}:${panelRow.id}`
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RecurringChoiceDialog,
+      {
+        appointment: recurringChoice,
+        onChoose: (series2) => {
+          const chosen = recurringChoice;
+          setRecurringChoice(null);
+          if (!chosen?.seriesId) return;
+          setOpenAppointment(series2 ? { id: chosen.seriesId, subject: chosen.subject, recurring: false, isSeries: true } : chosen);
+        },
+        onClose: () => setRecurringChoice(null)
+      }
+    )
+  ] });
+}
+function templateFor(templates, table) {
+  if (!templates) return void 0;
+  const name = table.toLowerCase();
+  return templates[table] ?? Object.entries(templates).find(([key]) => key.trim().toLowerCase() === name)?.[1];
+}
+function templateContent(info, content) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: isCompactView(info.view.type) ? "ppp-calendar-event ppp-calendar-event-compact" : "ppp-calendar-event", children: content });
+}
+function appointmentContent(info) {
+  const { event } = info;
+  const location = event.extendedProps["location"];
+  const recurring = event.extendedProps["recurring"];
+  const title = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ppp-calendar-event-title", children: [
+    recurring && /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRepeatAllRegular, { className: "ppp-calendar-event-icon" }),
+    event.title
+  ] });
+  if (isCompactView(info.view.type)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ppp-calendar-event ppp-calendar-event-compact", children: [
+      info.timeText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ppp-calendar-event-detail", children: info.timeText }),
+      title
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ppp-calendar-event", children: [
+    title,
+    location && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ppp-calendar-event-detail", children: location })
+  ] });
+}
+function CalendarButton({
+  onClick,
+  label,
+  icon,
+  tooltip,
+  appearance = "subtle",
+  disabled = false,
+  className
+}) {
+  const calendar = useCalendarContext();
+  const [working, setWorking] = react.useState(false);
+  const click = async () => {
+    if (working || !onClick) return;
+    setWorking(true);
+    try {
+      await onClick(calendar);
+    } finally {
+      setWorking(false);
+    }
+  };
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.ToolbarButton,
+    {
+      className: reactComponents.mergeClasses("ppp-calendar-button", className),
+      appearance,
+      disabled: disabled || working,
+      icon: icon ?? null,
+      "aria-label": label === void 0 ? tooltip : void 0,
+      onClick: () => void click(),
+      children: label
+    }
+  );
+  return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Tooltip, { content: tooltip, relationship: label === void 0 ? "label" : "description", withArrow: true, children: button }) : button;
+}
+function NewAppointmentCalendarButton({
+  label,
+  icon,
+  tooltip,
+  appearance = "subtle"
+}) {
+  const calendar = useCalendarContext();
+  const t = react$1.useT();
+  if (!calendar.canCreateAppointments) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CalendarButton,
+    {
+      className: "ppp-calendar-new",
+      label: label ?? t("app.buttons.new.label"),
+      icon: icon ?? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}),
+      appearance,
+      ...tooltip !== void 0 && { tooltip },
+      onClick: (context) => context.createAppointment()
+    }
+  );
+}
+
+exports.AppointmentShowAs = AppointmentShowAs;
+exports.Calendar = Calendar;
+exports.CalendarButton = CalendarButton;
+exports.NewAppointmentCalendarButton = NewAppointmentCalendarButton;
+exports.calendarLayouts = calendarLayouts;
+exports.useCalendarContext = useCalendarContext;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map