@dataverse-kit/calendar-kit 0.1.0

package/dist/types-u3Gpxk53.d.ts

@@ -0,0 +1,108 @@
+/**
+ * The calendar's data contract. Framework-agnostic: nothing here may import React, FullCalendar
+ * or Fluent (enforced by .eslintrc.cjs and verified on the built bundle).
+ *
+ * ★★ A date-time value is ISO-8601 TEXT, and its SHAPE carries its meaning:
+ *
+ *   | shape                              | kind       | means                                          |
+ *   |------------------------------------|------------|------------------------------------------------|
+ *   | `2026-09-29`                       | `date`     | a calendar day (all-day)                       |
+ *   | `2026-09-29T23:30` / `…T23:30:00`  | `floating` | a wall-clock time, the same face in every zone |
+ *   | `2026-09-30T06:30:00Z` / `…+09:00` | `instant`  | one moment, shown in the viewer's zone         |
+ *
+ * That is not an invention: it is exactly how ISO-8601 already distinguishes the three, and they
+ * map one-to-one onto Dataverse's DateOnly, TimeZoneIndependent and UserLocal behaviours
+ * (see ./dataverse.ts). An event keeps its kind through a drag — a floating event moved on the
+ * calendar comes back floating — so a host never has to remember which kind it sent.
+ *
+ * A `Date` is accepted wherever a value is read, and always means an instant.
+ */
+type CalendarValue = string;
+type ValueKind = 'date' | 'floating' | 'instant';
+/**
+ * Minutes EAST of UTC for the zone the calendar is shown in, at a given instant.
+ *
+ * ★ East-positive, matching PCF's `userSettings.getTimeZoneOffsetMinutes()` (Pacific → -420,
+ *   Tokyo → +540, MEASURED) and the OPPOSITE sign to JS `Date#getTimezoneOffset()`.
+ * ★ A FUNCTION of the instant rather than a number, so daylight-saving changes inside the
+ *   visible range are handled: the offset for 1 March and 1 April can differ.
+ */
+type ZoneOffset = (instant: Date) => number;
+interface CalendarEvent {
+    /** Stable id. The calendar hands it back on every callback. */
+    id: string;
+    /** See {@link CalendarValue}. A date-shaped start makes the event all-day. */
+    start: CalendarValue | Date;
+    /**
+     * Same kind as `start`. For an all-day event this is EXCLUSIVE — the day AFTER the last day
+     * shown — as in iCalendar and FullCalendar. (Dataverse stores it inclusive; the Dataverse
+     * helpers convert.) Omitted means a default-length event.
+     */
+    end?: CalendarValue | Date;
+    title: string;
+    /** Any CSS colour. Omitted means the calendar's primary colour. */
+    color?: string;
+    /** Opaque grouping key — a location, a staff member. Used for colour and filtering. */
+    resourceId?: string;
+    /** Forces all-day. Normally inferred from a date-shaped `start`. */
+    allDay?: boolean;
+    /** This event cannot be dragged or resized even when the calendar is editable. */
+    readOnly?: boolean;
+    /** Anything the host wants back in callbacks. The calendar never reads it. */
+    data?: unknown;
+}
+/** A moved or resized event, in the SAME kind as the event's original `start`. */
+interface CalendarEventChange {
+    event: CalendarEvent;
+    kind: 'move' | 'resize';
+    start: CalendarValue;
+    /** Exclusive for all-day, as on {@link CalendarEvent.end}. */
+    end: CalendarValue | undefined;
+    allDay: boolean;
+}
+/**
+ * An empty range the user selected. `allDay` selections are `date` values with an EXCLUSIVE
+ * end; timed selections are `instant` values (UTC `Z`), converted from the calendar's zone.
+ */
+interface SlotSelection {
+    start: CalendarValue;
+    end: CalendarValue;
+    allDay: boolean;
+}
+/** The visible range, as instants (UTC `Z`). `start` inclusive, `end` exclusive. */
+interface VisibleRange {
+    start: CalendarValue;
+    end: CalendarValue;
+    /** The FullCalendar view name, e.g. `timeGridWeek`. */
+    view: string;
+    /** The same range as calendar DAYS in the calendar's zone, end exclusive. */
+    startDate: CalendarValue;
+    endDate: CalendarValue;
+}
+interface BusinessHours {
+    /** 0 = Sunday. */
+    daysOfWeek: number[];
+    /** `HH:mm`, wall-clock in the calendar's zone. */
+    startTime: string;
+    endTime: string;
+}
+/**
+ * The seam between the calendar and a data source that is PULLED (a code app's data service,
+ * a Power Pages `/_api` table). A PCF dataset is PUSHED by the host instead and does not use
+ * this — see `./adapters/pcf-dataset`.
+ */
+interface CalendarDataSource {
+    readonly capabilities: {
+        readonly update: boolean;
+        readonly create: boolean;
+        readonly open: boolean;
+    };
+    /** Events overlapping the range. Honour `signal`: ranges change faster than networks answer. */
+    load(range: VisibleRange, signal?: AbortSignal): Promise<CalendarEvent[]>;
+    /** Persist a move/resize. Reject to make the calendar put the event back. */
+    update?(change: CalendarEventChange): Promise<void>;
+    create?(slot: SlotSelection): Promise<void> | void;
+    open?(event: CalendarEvent): void;
+}
+
+export type { BusinessHours as B, CalendarDataSource as C, SlotSelection as S, ValueKind as V, ZoneOffset as Z, CalendarEvent as a, CalendarEventChange as b, CalendarValue as c, VisibleRange as d };

package/dist/v9.cjs

@@ -0,0 +1,555 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v9/index.ts
+var v9_exports = {};
+__export(v9_exports, {
+  FluentCalendar: () => FluentCalendar,
+  fluentCalendarTheme: () => fluentCalendarTheme
+});
+module.exports = __toCommonJS(v9_exports);
+
+// src/v9/FluentCalendar.tsx
+var React3 = __toESM(require("react"), 1);
+var import_react_components = require("@fluentui/react-components");
+
+// src/view/CalendarView.tsx
+var React2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("@fullcalendar/react"), 1);
+var import_daygrid = __toESM(require("@fullcalendar/react/daygrid"), 1);
+var import_timegrid = __toESM(require("@fullcalendar/react/timegrid"), 1);
+var import_list = __toESM(require("@fullcalendar/react/list"), 1);
+var import_interaction = __toESM(require("@fullcalendar/react/interaction"), 1);
+var import_classic = __toESM(require("@fullcalendar/react/themes/classic"), 1);
+var import_skeleton = require("@fullcalendar/react/skeleton.css");
+var import_theme = require("@fullcalendar/react/themes/classic/theme.css");
+var import_palette = require("@fullcalendar/react/themes/classic/palette.css");
+
+// src/core/datetime.ts
+var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+var FLOATING_RE = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,9})?)?$/;
+var INSTANT_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})$/i;
+var pad = (n, w = 2) => String(n).padStart(w, "0");
+var browserZone = (instant) => -instant.getTimezoneOffset();
+function kindOf(value) {
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) throw new RangeError("Invalid Date");
+    return "instant";
+  }
+  const local = DATE_RE.test(value) ? "date" : FLOATING_RE.test(value) ? "floating" : null;
+  if (local) {
+    const m = FLOATING_RE.exec(value) ?? DATE_RE.exec(value);
+    const [, y, mo, d, h = "0", mi = "0", sec = "0"] = m;
+    const t = new Date(Date.UTC(+y, +mo - 1, +d, +h, +mi, +sec));
+    if (t.getUTCFullYear() !== +y || t.getUTCMonth() !== +mo - 1 || t.getUTCDate() !== +d || +h > 23 || +mi > 59 || +sec > 59) {
+      throw new RangeError(`Not a real calendar date or time: ${JSON.stringify(value)}`);
+    }
+    return local;
+  }
+  if (INSTANT_RE.test(value) && !Number.isNaN(new Date(value).getTime())) return "instant";
+  throw new RangeError(`Not an ISO-8601 date, wall-clock time or instant: ${JSON.stringify(value)}`);
+}
+function toInstant(value) {
+  if (value instanceof Date) return value.toISOString();
+  if (kindOf(value) !== "instant") throw new RangeError(`Not an instant: ${value}`);
+  return new Date(value).toISOString();
+}
+function wallMillis(wall) {
+  const m = FLOATING_RE.exec(wall) ?? DATE_RE.exec(wall);
+  if (!m) throw new RangeError(`Not a date or wall-clock time: ${wall}`);
+  const [, y, mo, d, h = "0", mi = "0", s = "0"] = m;
+  return Date.UTC(+y, +mo - 1, +d, +h, +mi, +s);
+}
+function formatWall(ms) {
+  const d = new Date(ms);
+  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+}
+function toWall(instant, zone) {
+  const at = instant instanceof Date ? instant : new Date(toInstant(instant));
+  return formatWall(at.getTime() + zone(at) * 6e4);
+}
+function fromWall(wall, zone) {
+  const w = wallMillis(wall);
+  const before = zone(new Date(w - 864e5));
+  const after = zone(new Date(w + 864e5));
+  const fits = (offset) => {
+    const t2 = w - offset * 6e4;
+    return zone(new Date(t2)) === offset ? t2 : null;
+  };
+  const candidates = [fits(before), fits(after)].filter((t2) => t2 !== null);
+  const t = candidates.length > 0 ? Math.min(...candidates) : w - before * 6e4;
+  return new Date(t).toISOString();
+}
+function addDays(date, days) {
+  if (kindOf(date) !== "date") throw new RangeError(`addDays needs a date, got ${date}`);
+  return formatWall(wallMillis(date) + days * 864e5).slice(0, 10);
+}
+function utcFieldsToWall(d) {
+  return formatWall(d.getTime());
+}
+function normaliseFloating(value) {
+  return formatWall(wallMillis(value));
+}
+
+// src/core/colors.ts
+function parseHex(color) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+}
+function luminance([r, g, b]) {
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrastRatio(a, b) {
+  const pa = parseHex(a);
+  const pb = parseHex(b);
+  if (!pa || !pb) return null;
+  const [hi, lo] = [luminance(pa), luminance(pb)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function readableTextOn(background) {
+  const onWhite = contrastRatio(background, "#ffffff");
+  const onBlack = contrastRatio(background, "#000000");
+  if (onWhite === null || onBlack === null) return void 0;
+  return onWhite >= onBlack ? "#ffffff" : "#000000";
+}
+
+// src/view/fcBridge.ts
+function toFcValue(value, zone) {
+  const k = kindOf(value);
+  if (k === "instant") return toWall(value, zone);
+  if (k === "floating") return normaliseFloating(value);
+  return value;
+}
+function exclusiveAllDayEnd(end, zone) {
+  const wall = toFcValue(end, zone);
+  if (wall.length === 10) return wall;
+  return wall.slice(11, 19) === "00:00:00" ? wall.slice(0, 10) : addDays(wall.slice(0, 10), 1);
+}
+function toFcEvent(event, zone) {
+  const originalKind = kindOf(event.start);
+  const allDay = event.allDay ?? originalKind === "date";
+  const start = allDay ? toFcValue(event.start, zone).slice(0, 10) : toFcValue(event.start, zone);
+  const out = {
+    id: event.id,
+    title: event.title,
+    start,
+    allDay,
+    extendedProps: { source: event, kind: allDay ? "date" : originalKind, originalKind }
+  };
+  if (event.end !== void 0) out.end = allDay ? exclusiveAllDayEnd(event.end, zone) : toFcValue(event.end, zone);
+  if (event.color) {
+    out.color = event.color;
+    const text = readableTextOn(event.color);
+    if (text) out.textColor = text;
+  }
+  if (event.readOnly) out.editable = false;
+  else if (event.end === void 0) out.durationEditable = false;
+  return out;
+}
+function fromFcDate(d, kind, zone) {
+  const wall = utcFieldsToWall(d);
+  if (kind === "date") return wall.slice(0, 10);
+  if (kind === "floating") return wall;
+  return fromWall(wall, zone);
+}
+function asKind(value, from, target, zone) {
+  if (from === target || from !== "date") return value;
+  return target === "instant" ? fromWall(`${value}T00:00:00`, zone) : `${value}T00:00:00`;
+}
+function canonical(value) {
+  const k = kindOf(value);
+  return k === "instant" ? toInstant(value) : k === "floating" ? normaliseFloating(value) : value;
+}
+function toChange(fcEvent, kind, zone) {
+  const { source, kind: valueKind, originalKind } = fcEvent.extendedProps;
+  if (!fcEvent.start) throw new Error(`FullCalendar returned no start for event ${source.id}`);
+  const back = (d) => asKind(fromFcDate(d, valueKind, zone), valueKind, originalKind ?? valueKind, zone);
+  return {
+    event: source,
+    kind,
+    // ★ A RESIZE never moves the start. Recomputing it from FullCalendar's wall-clock Date is
+    //   lossy on the fall-back day (the second 01:30 reads back as the first), and toWebApiPatch
+    //   writes `start` unconditionally — so resizing an end silently moved the start an hour.
+    start: kind === "resize" ? canonical(source.start) : back(fcEvent.start),
+    end: fcEvent.end ? back(fcEvent.end) : void 0,
+    allDay: fcEvent.allDay
+  };
+}
+function toSelection(start, end, allDay, zone) {
+  const kind = allDay ? "date" : "instant";
+  return { start: fromFcDate(start, kind, zone), end: fromFcDate(end, kind, zone), allDay };
+}
+function toVisibleRange(start, end, view, zone) {
+  return {
+    start: fromFcDate(start, "instant", zone),
+    end: fromFcDate(end, "instant", zone),
+    view,
+    startDate: utcFieldsToWall(start).slice(0, 10),
+    endDate: utcFieldsToWall(end).slice(0, 10)
+  };
+}
+var nowWall = (zone) => toWall(/* @__PURE__ */ new Date(), zone);
+var sameAllDayness = (spanAllDay, eventAllDay) => spanAllDay === eventAllDay;
+var same = (a, b) => {
+  if (a === void 0 || b === void 0) return a === b;
+  const ka = kindOf(a);
+  if (ka !== kindOf(b)) return false;
+  if (ka === "instant") return new Date(a).getTime() === new Date(b).getTime();
+  return ka === "floating" ? normaliseFloating(a) === normaliseFloating(b) : a === b;
+};
+function applyPending(events, pending) {
+  if (pending.size === 0) return events;
+  return events.map((e) => {
+    const p = pending.get(e.id);
+    return p ? { ...e, start: p.start, end: p.end, allDay: p.allDay } : e;
+  });
+}
+function settledIds(events, pending) {
+  const byId = new Map(events.map((e) => [e.id, e]));
+  const done = [];
+  for (const [id, p] of pending) {
+    const e = byId.get(id);
+    if (!e || same(e.start, p.start) && same(e.end, p.end) || p.savedWith !== void 0 && p.savedWith !== events) done.push(id);
+  }
+  return done;
+}
+
+// src/view/useOptimisticChanges.ts
+var React = __toESM(require("react"), 1);
+function describe(error) {
+  const m = error?.message;
+  return typeof m === "string" && m ? m : String(error);
+}
+function useOptimisticChanges(events, onEventChange, onChangeError, zoneRef) {
+  const [pending, setPending] = React.useState(() => /* @__PURE__ */ new Map());
+  const [error, setError] = React.useState(null);
+  const eventsRef = React.useRef(events);
+  eventsRef.current = events;
+  const latest = React.useRef(/* @__PURE__ */ new Map());
+  const seq = React.useRef(0);
+  const mounted = React.useRef(true);
+  React.useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  React.useEffect(() => {
+    const done = settledIds(events, pending);
+    if (done.length === 0) return;
+    for (const id of done) if (latest.current.get(id) === pending.get(id)?.token) latest.current.delete(id);
+    setPending((prev) => {
+      const next = new Map(prev);
+      for (const id of done) next.delete(id);
+      return next;
+    });
+  }, [events, pending]);
+  const handleChange = React.useCallback(
+    (kind) => (info) => {
+      if (!onEventChange) {
+        info.revert();
+        return;
+      }
+      let change;
+      try {
+        change = toChange(info.event, kind, zoneRef.current);
+      } catch (e) {
+        info.revert();
+        setError(describe(e));
+        return;
+      }
+      setError(null);
+      const id = change.event.id;
+      const token = ++seq.current;
+      const fail = (err) => {
+        const current = latest.current.get(id) === token;
+        if (current) latest.current.delete(id);
+        onChangeError?.(err, change);
+        if (!mounted.current) return;
+        setError(`Could not save "${change.event.title}": ${describe(err)}`);
+        if (!current) return;
+        setPending((prev) => {
+          if (!prev.has(id)) return prev;
+          const next = new Map(prev);
+          next.delete(id);
+          return next;
+        });
+        try {
+          info.revert();
+        } catch {
+        }
+      };
+      latest.current.set(id, token);
+      let result;
+      try {
+        result = onEventChange(change);
+      } catch (err) {
+        fail(err);
+        return;
+      }
+      if (!result || typeof result.then !== "function") {
+        if (latest.current.get(id) === token) latest.current.delete(id);
+        return;
+      }
+      setPending((prev) => new Map(prev).set(id, { start: change.start, end: change.end, allDay: change.allDay, token }));
+      result.then(
+        () => {
+          if (!mounted.current || latest.current.get(id) !== token) return;
+          const savedWith = eventsRef.current;
+          setPending((prev) => {
+            const p = prev.get(id);
+            if (!p || p.token !== token) return prev;
+            return new Map(prev).set(id, { ...p, savedWith });
+          });
+        },
+        fail
+      );
+    },
+    [onEventChange, onChangeError, zoneRef]
+  );
+  return { pending, error, dismissError: React.useCallback(() => setError(null), []), handleChange };
+}
+
+// src/view/theme.ts
+var VAR = {
+  primary: "--fc-classic-primary",
+  primaryForeground: "--fc-classic-primary-foreground",
+  background: "--fc-classic-background",
+  foreground: "--fc-classic-foreground",
+  mutedForeground: "--fc-classic-muted-foreground",
+  faint: "--fc-classic-faint",
+  muted: "--fc-classic-muted",
+  strong: "--fc-classic-strong",
+  border: "--fc-classic-border",
+  strongBorder: "--fc-classic-strong-border",
+  today: "--fc-classic-today",
+  highlight: "--fc-classic-highlight",
+  now: "--fc-classic-now",
+  button: "--fc-classic-button",
+  buttonForeground: "--fc-classic-button-foreground",
+  buttonBorder: "--fc-classic-button-border",
+  buttonStrong: "--fc-classic-button-strong",
+  buttonStrongBorder: "--fc-classic-button-strong-border"
+};
+function themeStyle(theme) {
+  const style = {};
+  if (!theme) return style;
+  for (const [key, cssVar] of Object.entries(VAR)) {
+    const v = theme[key];
+    if (v) style[cssVar] = v;
+  }
+  if (theme.fontFamily) style.fontFamily = theme.fontFamily;
+  if (theme.fontSize) style.fontSize = theme.fontSize;
+  if (theme.background) style.background = theme.background;
+  if (theme.foreground) style.color = theme.foreground;
+  return style;
+}
+
+// src/view/CalendarView.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FC_VIEW = {
+  month: "dayGridMonth",
+  week: "timeGridWeek",
+  workWeek: "timeGridWorkWeek",
+  day: "timeGridDay",
+  list: "listWeek"
+};
+var VIEW_LABEL = {
+  month: "Month",
+  week: "Week",
+  workWeek: "Work week",
+  day: "Day",
+  list: "List"
+};
+var asChangeInfo = (info) => ({
+  event: {
+    start: info.event.start,
+    end: info.event.end,
+    allDay: info.event.allDay,
+    extendedProps: info.event.extendedProps
+  },
+  revert: () => info.revert()
+});
+var bannerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "6px 10px",
+  marginBottom: 6,
+  borderRadius: 4,
+  border: "1px solid currentColor"
+};
+function CalendarView(props) {
+  const zone = props.zone ?? browserZone;
+  const zoneRef = React2.useRef(zone);
+  zoneRef.current = zone;
+  const { pending, error, dismissError, handleChange } = useOptimisticChanges(
+    props.events,
+    props.onEventChange,
+    props.onChangeError,
+    zoneRef
+  );
+  const fcEvents = React2.useMemo(
+    () => applyPending(props.events, pending).map((e) => toFcEvent(e, zone)),
+    [props.events, pending, zone]
+  );
+  const views = props.views ?? ["month", "week", "day", "list"];
+  const optional = {};
+  if (props.firstDay !== void 0) optional.firstDay = props.firstDay;
+  if (props.slotMinTime !== void 0) optional.slotMinTime = props.slotMinTime;
+  if (props.slotMaxTime !== void 0) optional.slotMaxTime = props.slotMaxTime;
+  if (props.initialDate !== void 0) optional.initialDate = props.initialDate;
+  if (props.classNames?.button) optional.buttonClass = props.classNames.button;
+  if (props.classNames?.toolbar) optional.headerToolbarClass = props.classNames.toolbar;
+  if (props.businessHours) optional.businessHours = props.businessHours.map((b) => ({ ...b, daysOfWeek: [...b.daysOfWeek] }));
+  const selectable = props.selectable ?? !!props.onSelectRange;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: props.className,
+      style: themeStyle(props.theme),
+      role: "region",
+      "aria-label": props["aria-label"] ?? "Calendar",
+      "aria-busy": props.loading || void 0,
+      "data-calendar-kit": "",
+      children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "alert", style: { ...bannerStyle, color: props.theme?.error ?? "#a4262c" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 }, children: error }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: dismissError, "aria-label": "Dismiss", style: { font: "inherit" }, children: "\xD7" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react.default,
+          {
+            plugins: [import_daygrid.default, import_timegrid.default, import_list.default, import_interaction.default, import_classic.default],
+            timeZone: "UTC",
+            now: () => nowWall(zoneRef.current),
+            initialView: FC_VIEW[props.view ?? "week"],
+            views: { timeGridWorkWeek: { type: "timeGridWeek", hiddenDays: [0, 6] } },
+            headerToolbar: {
+              start: "today prev,next",
+              center: "title",
+              end: views.map((v) => FC_VIEW[v]).join(",")
+            },
+            buttons: {
+              today: { text: "Today" },
+              ...Object.fromEntries(views.map((v) => [FC_VIEW[v], { text: VIEW_LABEL[v] }]))
+            },
+            height: props.height ?? "auto",
+            events: fcEvents,
+            editable: !!props.editable && !!props.onEventChange,
+            selectable,
+            selectMirror: true,
+            nowIndicator: true,
+            dayMaxEvents: true,
+            ...optional,
+            scrollTime: props.scrollTime ?? "08:00:00",
+            eventAllow: (span, moving) => moving ? sameAllDayness(span.allDay, moving.allDay) : true,
+            datesSet: (info) => props.onRangeChange?.(toVisibleRange(info.start, info.end, info.view.type, zoneRef.current)),
+            eventClick: (info) => {
+              info.jsEvent.preventDefault();
+              const source = info.event.extendedProps.source;
+              if (source) props.onEventClick?.(source);
+            },
+            select: (info) => {
+              props.onSelectRange?.(toSelection(info.start, info.end, info.allDay, zoneRef.current));
+              info.view.calendar.unselect();
+            },
+            eventDrop: (info) => handleChange("move")(asChangeInfo(info)),
+            eventResize: (info) => handleChange("resize")(asChangeInfo(info))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/v9/FluentCalendar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var fluentCalendarTheme = {
+  primary: import_react_components.tokens.colorBrandBackground,
+  primaryForeground: import_react_components.tokens.colorNeutralForegroundOnBrand,
+  background: import_react_components.tokens.colorNeutralBackground1,
+  foreground: import_react_components.tokens.colorNeutralForeground1,
+  mutedForeground: import_react_components.tokens.colorNeutralForeground3,
+  faint: import_react_components.tokens.colorNeutralBackground2,
+  muted: import_react_components.tokens.colorNeutralBackground3,
+  strong: import_react_components.tokens.colorNeutralBackground5,
+  border: import_react_components.tokens.colorNeutralStroke2,
+  strongBorder: import_react_components.tokens.colorNeutralStroke1,
+  today: import_react_components.tokens.colorBrandBackground2,
+  highlight: import_react_components.tokens.colorBrandBackground2Hover,
+  now: import_react_components.tokens.colorPaletteRedBorder2,
+  button: import_react_components.tokens.colorNeutralBackground1,
+  buttonForeground: import_react_components.tokens.colorNeutralForeground1,
+  buttonBorder: import_react_components.tokens.colorNeutralStroke1,
+  buttonStrong: import_react_components.tokens.colorNeutralBackground1Selected,
+  buttonStrongBorder: import_react_components.tokens.colorNeutralStroke1Pressed,
+  fontFamily: import_react_components.tokens.fontFamilyBase,
+  fontSize: import_react_components.tokens.fontSizeBase300,
+  error: import_react_components.tokens.colorPaletteRedForeground1
+};
+var useStyles = (0, import_react_components.makeStyles)({
+  // ★ Applied through FullCalendar's `buttonClass` option, NOT a `& .fc-button` selector: v7
+  //   hashes its class names and that selector matched 0 buttons (measured).
+  button: {
+    borderRadius: import_react_components.tokens.borderRadiusMedium,
+    fontFamily: import_react_components.tokens.fontFamilyBase,
+    fontWeight: import_react_components.tokens.fontWeightSemibold
+  },
+  toolbar: {
+    gap: import_react_components.tokens.spacingHorizontalS
+  }
+});
+function FluentCalendar(props) {
+  const styles = useStyles();
+  const theme = React3.useMemo(() => ({ ...fluentCalendarTheme, ...props.theme }), [props.theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    CalendarView,
+    {
+      ...props,
+      theme,
+      classNames: {
+        button: (0, import_react_components.mergeClasses)(styles.button, props.classNames?.button),
+        toolbar: (0, import_react_components.mergeClasses)(styles.toolbar, props.classNames?.toolbar)
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FluentCalendar,
+  fluentCalendarTheme
+});
+//# sourceMappingURL=v9.cjs.map