hs-uix 2.1.0 → 2.2.0

package/dist/calendar.mjs

@@ -2,8 +2,10 @@
 import React5, { useCallback, useEffect, useMemo, useState as useState2 } from "react";
 import {
   Alert,
+  AutoGrid,
   Box as Box2,
   Button as Button3,
+  DateInput as DateInput2,
   Divider,
   EmptyState,
   Flex as Flex4,
@@ -91,7 +93,6 @@ import React2 from "react";
 import { Image, Icon as HsIcon, Link } from "@hubspot/ui-extensions";
 
 // src/common-components/svgDefaults.js
-var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
 var HS_TEXT_COLOR = "#33475b";
 
 // src/common-components/icons.generated.js
@@ -346,7 +347,7 @@ var GENERATED_ICONS = {
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
 
-// src/common-components/Icon.js
+// src/common-components/nativeIconNames.js
 var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "add",
   "appointment",
@@ -358,12 +359,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -392,13 +393,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -539,6 +540,8 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "zoomIn",
   "zoomOut"
 ]);
+
+// src/common-components/Icon.js
 var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
 var NATIVE_SIZE_TOKENS = {
   sm: "sm",
@@ -751,6 +754,7 @@ var CollectionFilterControl = ({
       { key: name, direction: "row", align: "center", gap: "xs" },
       h2(DateInput, {
         name: `${controlName}-from`,
+        label: filter.fromLabel ?? labels.dateFrom,
         placeholder: filter.fromLabel ?? labels.dateFrom,
         format: "medium",
         value: rangeValue.from ?? null,
@@ -759,6 +763,7 @@ var CollectionFilterControl = ({
       h2(Icon, { name: "right", size: "sm" }),
       h2(DateInput, {
         name: `${controlName}-to`,
+        label: filter.toLabel ?? labels.dateTo,
         placeholder: filter.toLabel ?? labels.dateTo,
         format: "medium",
         value: rangeValue.to ?? null,
@@ -1213,21 +1218,6 @@ var formatTimeZoneLabel = (tz, atDate = /* @__PURE__ */ new Date()) => {
 
 // src/calendar/svgChips.js
 var toDataUri = (svg) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
-var escapeXml = (s) => String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-var truncateLabel = (value, max) => {
-  const s = String(value == null ? "" : value);
-  if (!max || s.length <= max) return s;
-  return s.slice(0, Math.max(1, max - 1)).trimEnd() + "\u2026";
-};
-var CHIP_PALETTE = {
-  default: { fill: "#7FD1DE", text: HS_TEXT_COLOR },
-  info: { fill: "#00A4BD", text: "#FFFFFF" },
-  success: { fill: "#00BDA5", text: "#FFFFFF" },
-  warning: { fill: "#F5C26B", text: HS_TEXT_COLOR },
-  error: { fill: "#F2545B", text: "#FFFFFF" },
-  danger: { fill: "#F2545B", text: "#FFFFFF" }
-  // StatusTag spells red "danger"; accept both
-};
 var DOT_FILL = {
   default: "#7C98B6",
   info: "#00A4BD",
@@ -1242,31 +1232,177 @@ var makeDotDataUri = (variant = "default", size = 8) => {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"><circle cx="${r}" cy="${r}" r="${r}" fill="${fill}" /></svg>`;
   return { src: toDataUri(svg), width: size, height: size };
 };
-var makeEventChipDataUri = (opts) => {
-  const { label, width, height = 24, variant = "default" } = opts;
-  const palette = CHIP_PALETTE[variant] || CHIP_PALETTE.default;
-  const accentX = 5;
-  const accentW = 3;
-  const textX = accentX + accentW + 6;
-  const rightPad = 8;
-  const maxChars = Math.max(1, Math.floor((width - textX - rightPad) / 6));
-  const text = truncateLabel(label, maxChars);
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect x="0.5" y="0.5" width="${width - 1}" height="${height - 1}" rx="4" ry="4" fill="#FFFFFF" stroke="#CBD6E2" stroke-width="1" /><rect x="${accentX}" y="5" width="${accentW}" height="${height - 10}" rx="1.5" ry="1.5" fill="${palette.fill}" /><text x="${textX}" y="${height / 2}" font-family='${HS_FONT_FAMILY}' font-size="12" font-weight="500" fill="${HS_TEXT_COLOR}" text-anchor="start" dominant-baseline="central">${escapeXml(text)}</text></svg>`;
-  return { src: toDataUri(svg), width, height };
-};
-var makeMoreDataUri = (opts) => {
-  const { label, width, height = 24 } = opts;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><text x="3" y="${height / 2}" font-family='${HS_FONT_FAMILY}' font-size="13" font-weight="700" fill="#0091AE" text-anchor="start" dominant-baseline="central">${escapeXml(label)}</text></svg>`;
-  return { src: toDataUri(svg), width, height };
-};
 var makeSpacerDataUri = (height = 24, width = 4) => {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect x="0" y="0" width="${width}" height="${height}" fill="#FFFFFF" fill-opacity="0" /></svg>`;
   return { src: toDataUri(svg), width, height };
 };
 
+// src/calendar/rescheduleUtils.js
+var shiftDate = (date, shift) => {
+  const d = toDate(date);
+  if (!d) return null;
+  if (!shift || typeof shift !== "object") return new Date(d);
+  const days = (shift.days || 0) + (shift.weeks || 0) * 7;
+  let next = days ? addDays(d, days) : new Date(d);
+  const ms = (shift.hours || 0) * 36e5 + (shift.minutes || 0) * 6e4;
+  if (ms) next = new Date(next.getTime() + ms);
+  return next;
+};
+var shiftEvent = (range, shift) => {
+  const start = toDate(range && range.start);
+  if (!start) return null;
+  const end = toDate(range && range.end) || start;
+  return { start: shiftDate(start, shift), end: shiftDate(end, shift) };
+};
+var calendarDayDelta = (a, b) => Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / MS_PER_DAY);
+var msIntoDay = (d) => ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1e3 + d.getMilliseconds();
+var rescheduleToStart = (range, newStart) => {
+  const start = toDate(range && range.start);
+  const target = toDate(newStart);
+  if (!start || !target) return null;
+  const end = toDate(range && range.end) || start;
+  const dayDelta = calendarDayDelta(start, target);
+  const timeDelta = msIntoDay(target) - msIntoDay(start);
+  const endOnDay = addDays(end, dayDelta);
+  if (!timeDelta) return { start: target, end: endOnDay };
+  return {
+    start: target,
+    end: new Date(
+      endOnDay.getFullYear(),
+      endOnDay.getMonth(),
+      endOnDay.getDate(),
+      0,
+      0,
+      0,
+      msIntoDay(endOnDay) + timeDelta
+    )
+  };
+};
+var applyDatePick = (start, value) => {
+  if (!isDateValueObject(value)) return null;
+  const s = toDate(start);
+  return new Date(
+    value.year,
+    value.month,
+    value.date,
+    s ? s.getHours() : 0,
+    s ? s.getMinutes() : 0,
+    s ? s.getSeconds() : 0,
+    s ? s.getMilliseconds() : 0
+  );
+};
+var DEFAULT_RESCHEDULE_PRESETS = [
+  { label: "+1 hour", shift: { hours: 1 } },
+  { label: "+1 day", shift: { days: 1 } },
+  { label: "Next week", shift: { weeks: 1 } }
+];
+var normalizeRescheduleOptions = (options) => {
+  if (!options) return [];
+  if (options === true) return DEFAULT_RESCHEDULE_PRESETS;
+  if (!Array.isArray(options)) return [];
+  const out = [];
+  for (const opt of options) {
+    if (typeof opt === "function") {
+      out.push({ label: opt.label || opt.name || "Reschedule", getStart: opt });
+    } else if (opt && typeof opt === "object" && opt.label != null) {
+      if (typeof opt.shift === "function") {
+        out.push({ label: opt.label, getStart: opt.shift });
+      } else if (typeof opt.getStart === "function") {
+        out.push({ label: opt.label, getStart: opt.getStart });
+      } else if (opt.shift && typeof opt.shift === "object") {
+        out.push({ label: opt.label, shift: opt.shift });
+      }
+    }
+  }
+  return out;
+};
+var resolveRescheduleTarget = (range, option, fnArg) => {
+  if (!range || !toDate(range.start) || !option) return null;
+  if (typeof option.getStart === "function") {
+    const next = toDate(option.getStart(fnArg !== void 0 ? fnArg : range));
+    return next ? rescheduleToStart(range, next) : null;
+  }
+  if (option.shift && typeof option.shift === "object") {
+    return shiftEvent(range, option.shift);
+  }
+  return null;
+};
+
+// src/calendar/resourceLanes.js
+var resolveResourceId = (record, spec) => {
+  if (record == null || spec == null) return null;
+  const value = typeof spec === "function" ? spec(record) : record[spec];
+  if (value == null || value === "") return null;
+  return value;
+};
+var buildResourceLanes = (events, options = {}) => {
+  const {
+    resources,
+    resourceLabels,
+    getId,
+    showUnassignedLane = true,
+    unassignedLabel = "Unassigned"
+  } = options;
+  const labelFor = (id) => {
+    if (resourceLabels && resourceLabels[id] != null) return resourceLabels[id];
+    return String(id);
+  };
+  const lanes = [];
+  const byKey = /* @__PURE__ */ new Map();
+  const addLane = (id, label, declared) => {
+    const key = String(id);
+    if (byKey.has(key)) return byKey.get(key);
+    const lane = { id, key, label, events: [], unassigned: false, declared };
+    byKey.set(key, lane);
+    lanes.push(lane);
+    return lane;
+  };
+  (resources || []).forEach((resource) => {
+    if (resource == null) return;
+    if (typeof resource === "object") {
+      addLane(resource.id, resource.label != null ? resource.label : labelFor(resource.id), true);
+    } else {
+      addLane(resource, labelFor(resource), true);
+    }
+  });
+  const unassigned = {
+    id: null,
+    key: "__unassigned__",
+    label: unassignedLabel,
+    events: [],
+    unassigned: true,
+    declared: false
+  };
+  (events || []).forEach((event) => {
+    const id = getId ? getId(event) : null;
+    if (id == null || id === "") {
+      unassigned.events.push(event);
+      return;
+    }
+    const lane = byKey.get(String(id)) || addLane(id, labelFor(id), false);
+    lane.events.push(event);
+  });
+  if (showUnassignedLane && unassigned.events.length > 0) lanes.push(unassigned);
+  return lanes;
+};
+var eventsIntersectingRange = (events, rangeStart, rangeEnd) => {
+  const rs = rangeStart.getTime();
+  const re = rangeEnd.getTime();
+  return (events || []).filter((event) => {
+    if (!event || !event.start) return false;
+    const es = event.start.getTime();
+    const ee = (event.end || event.start).getTime();
+    return es <= re && ee >= rs;
+  });
+};
+var laneEventsForDay = (events, day) => eventsIntersectingRange(events, startOfDay(day), endOfDay(day)).sort(
+  (a, b) => a.start.getTime() - b.start.getTime()
+);
+
 // src/calendar/Calendar.jsx
 var DEFAULT_MAX_EVENTS_PER_DAY = 3;
 var ALL_VIEWS = ["month", "week", "day", "agenda"];
+var ALL_VIEWS_WITH_RESOURCE = ["month", "week", "day", "resource", "agenda"];
 var DEFAULT_DAY_START_HOUR = 8;
 var DEFAULT_DAY_END_HOUR = 20;
 var DEFAULT_TIME_ZONES = [
@@ -1302,7 +1438,8 @@ var VIEW_LABELS = {
   month: "Month",
   week: "Week",
   day: "Day",
-  agenda: "Agenda"
+  agenda: "Agenda",
+  resource: "Resource"
 };
 var DEFAULT_LABELS3 = {
   today: "Today",
@@ -1319,7 +1456,11 @@ var DEFAULT_LABELS3 = {
   errorMessage: "An error occurred while loading events.",
   dayDetailTitle: (label) => label,
   open: "Open",
-  allDay: "All day"
+  allDay: "All day",
+  reschedule: "Reschedule",
+  pickDate: "Pick date",
+  unassigned: "Unassigned",
+  resource: "Resource"
 };
 var DEFAULT_EVENT_FIELDS = {
   id: "id",
@@ -1354,11 +1495,30 @@ var STATUS_VARIANT = {
   error: "danger",
   danger: "danger"
 };
+var TAG_VARIANT = {
+  default: "default",
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "error",
+  danger: "error"
+};
+var MONTH_EVENT_STYLES = /* @__PURE__ */ new Set(["statusTag", "tag"]);
+var monthLabelMaxChars = (style) => {
+  const overhead = style === "tag" ? 34 : 46;
+  return Math.max(6, Math.floor((MONTH_COL_WIDTH - overhead) / 6.6));
+};
+var truncateMonthLabel = (value, max) => {
+  const s = String(value == null ? "" : value);
+  if (!max || s.length <= max) return s;
+  return s.slice(0, max).trimEnd();
+};
 var MONTH_COL_WIDTH = 160;
 var TIMEGRID_DAY_COL = 150;
 var TIMEGRID_DAY_COL_SINGLE = 560;
+var RESOURCE_LABEL_COL_WIDTH = "min";
 var HOUR_SLOT_HEIGHT = 64;
-var EventDetail = ({ event, labels }) => {
+var EventDetail = ({ event, labels, reschedule, idSuffix = "" }) => {
   const { start, end, title, subtitle, href } = event;
   let when = "";
   if (start) {
@@ -1372,11 +1532,27 @@ var EventDetail = ({ event, labels }) => {
       when = `${formatDayTitle(start)} \u2013 ${formatDayTitle(end)}`;
     }
   }
-  return /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "demibold" } }, title || "--"), when ? /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy" }, when) : null, subtitle ? /* @__PURE__ */ React5.createElement(Text, null, subtitle) : null, href ? /* @__PURE__ */ React5.createElement(Link2, { href: href.url, external: href.external }, labels.open) : null);
+  return /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "demibold" }, truncate: true }, title || "--"), when ? /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy", truncate: true }, when) : null, subtitle ? /* @__PURE__ */ React5.createElement(Text, { truncate: true }, subtitle) : null, href ? /* @__PURE__ */ React5.createElement(Link2, { href: href.url, external: href.external }, labels.open) : null, reschedule ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Divider, null), /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy", format: { fontWeight: "demibold" } }, labels.reschedule), reschedule.options.length > 0 ? /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", gap: "xs", wrap: "wrap" }, reschedule.options.map((option, i) => /* @__PURE__ */ React5.createElement(
+    Button3,
+    {
+      key: `${option.label}-${i}`,
+      size: "xs",
+      variant: "secondary",
+      onClick: () => reschedule.onPreset(event, option)
+    },
+    option.label
+  ))) : null, /* @__PURE__ */ React5.createElement(
+    DateInput2,
+    {
+      name: `cal-resched-${event.key}${idSuffix}`,
+      label: labels.pickDate,
+      onChange: (value) => reschedule.onPick(event, value)
+    }
+  )) : null);
 };
-var buildOverlay = (event, mode, renderEventDetail, labels, idSuffix = "") => {
+var buildOverlay = (event, mode, renderEventDetail, labels, idSuffix = "", reschedule = null) => {
   if (mode === "none") return void 0;
-  const body = renderEventDetail ? renderEventDetail(event) : /* @__PURE__ */ React5.createElement(EventDetail, { event, labels });
+  const body = renderEventDetail ? renderEventDetail(event) : /* @__PURE__ */ React5.createElement(EventDetail, { event, labels, reschedule, idSuffix });
   const id = `cal-evt-${event.key}${idSuffix}`;
   if (mode === "modal") {
     return /* @__PURE__ */ React5.createElement(Modal, { id, title: event.title || labels.open, width: "small" }, /* @__PURE__ */ React5.createElement(ModalBody, null, body));
@@ -1384,46 +1560,34 @@ var buildOverlay = (event, mode, renderEventDetail, labels, idSuffix = "") => {
   if (mode === "panel") {
     return /* @__PURE__ */ React5.createElement(Panel, { id, title: event.title || labels.open, width: "small", variant: "modal" }, /* @__PURE__ */ React5.createElement(PanelBody, null, body));
   }
-  return /* @__PURE__ */ React5.createElement(Popover, { id, placement: "bottom" }, /* @__PURE__ */ React5.createElement(Tile, { compact: true }, body));
+  return /* @__PURE__ */ React5.createElement(Popover, { id, placement: "bottom", variant: "longform" }, /* @__PURE__ */ React5.createElement(Tile, { compact: true }, body));
 };
-var AgendaEventRow = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels }) => {
+var AgendaEventRow = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, reschedule }) => {
   const variant = VALID_VARIANTS.has(event.color) ? event.color : "default";
-  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-ag${day.getTime()}` : "");
+  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-ag${day.getTime()}` : "", reschedule);
   const handleClick = onEventClick ? () => onEventClick(event.raw, event) : void 0;
   const timeLabel = isAllDayEvent(event) ? labels.allDay : formatTime(event.start);
   return /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center", gap: "sm" }, /* @__PURE__ */ React5.createElement(Box2, { flex: 2 }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center" }, /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy", format: { fontWeight: "demibold" } }, timeLabel))), /* @__PURE__ */ React5.createElement(Box2, { flex: 11 }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React5.createElement(ColorDot, { variant }), /* @__PURE__ */ React5.createElement(Text, { truncate: true }, /* @__PURE__ */ React5.createElement(Link2, { overlay, onClick: handleClick }, event.title || "--")))), event.subtitle ? /* @__PURE__ */ React5.createElement(Box2, { flex: 4 }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center" }, /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy", truncate: true }, event.subtitle))) : null);
 };
-var MONTH_CHIP_WIDTH = MONTH_COL_WIDTH - 8;
-var MONTH_CHIP_HEIGHT = 24;
-var MonthChip = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels }) => {
+var MONTH_SLOT_HEIGHT = 24;
+var MonthChip = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, monthEventStyle, monthEventMaxChars, reschedule, idScope = "" }) => {
   const isStartDay = !day || !event.start || isSameDay(event.start, day);
-  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-m${day.getTime()}` : "");
+  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-m${idScope}${day.getTime()}` : "", reschedule);
   const handleClick = onEventClick ? () => onEventClick(event.raw, event) : void 0;
   const variant = VALID_VARIANTS.has(event.color) ? event.color : "default";
   const startHasTime = event.start && (event.start.getHours() !== 0 || event.start.getMinutes() !== 0);
   const time = isStartDay && startHasTime ? `${formatTime(event.start)} ` : "";
   const prefix = isStartDay ? "" : "\u2192 ";
-  const chip = makeEventChipDataUri({
-    label: `${prefix}${time}${event.title || "--"}`,
-    width: MONTH_CHIP_WIDTH,
-    height: MONTH_CHIP_HEIGHT,
-    variant
-  });
-  return /* @__PURE__ */ React5.createElement(
-    Image2,
-    {
-      src: chip.src,
-      width: chip.width,
-      height: chip.height,
-      alt: event.title || "",
-      overlay,
-      onClick: handleClick
-    }
-  );
+  const maxChars = monthEventMaxChars != null ? monthEventMaxChars : monthLabelMaxChars(monthEventStyle);
+  const label = truncateMonthLabel(`${prefix}${time}${event.title || "--"}`, maxChars);
+  if (monthEventStyle === "tag") {
+    return /* @__PURE__ */ React5.createElement(Tag2, { variant: TAG_VARIANT[variant] || "default", overlay, onClick: handleClick }, label);
+  }
+  return /* @__PURE__ */ React5.createElement(Link2, { overlay, onClick: handleClick }, /* @__PURE__ */ React5.createElement(StatusTag, { variant: STATUS_VARIANT[variant] || "default" }, label));
 };
-var DayListItem = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels }) => {
+var DayListItem = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, reschedule, idScope = "" }) => {
   const handleClick = onEventClick ? () => onEventClick(event.raw, event) : void 0;
-  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-more${day.getTime()}` : "-more");
+  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-more${idScope}${day.getTime()}` : "-more", reschedule);
   const href = event.href;
   return /* @__PURE__ */ React5.createElement(Button3, { variant: "transparent", size: "sm", href: href ? href.url : void 0, overlay, onClick: handleClick }, event.title || "--");
 };
@@ -1488,6 +1652,40 @@ var Toolbar = ({
     }
   ));
 };
+var DayChipStack = ({ day, events, maxEventsPerDay, chipProps, labels, idScope = "" }) => {
+  const slotSpacer = makeSpacerDataUri(MONTH_SLOT_HEIGHT, 1);
+  const shown = events.slice(0, maxEventsPerDay);
+  const hasOverflow = events.length > maxEventsPerDay;
+  const heightSpacer = /* @__PURE__ */ React5.createElement(Image2, { src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" });
+  const slotRow = (key, content) => /* @__PURE__ */ React5.createElement(Flex4, { key, direction: "row", align: "center", gap: "flush" }, heightSpacer, content);
+  const slots = [];
+  for (let i = 0; i < maxEventsPerDay; i++) {
+    if (i < shown.length) {
+      slots.push(slotRow(shown[i].key, /* @__PURE__ */ React5.createElement(MonthChip, { event: shown[i], day, idScope, ...chipProps })));
+    } else {
+      slots.push(/* @__PURE__ */ React5.createElement(Image2, { key: `sp-${i}`, src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" }));
+    }
+  }
+  if (hasOverflow) {
+    slots.push(
+      slotRow(
+        "more",
+        /* @__PURE__ */ React5.createElement(
+          Link2,
+          {
+            overlay: /* @__PURE__ */ React5.createElement(Popover, { id: `cal-day-${idScope}${day.getTime()}`, placement: "top", variant: "longform" }, /* @__PURE__ */ React5.createElement(Tile, { compact: true }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "sm" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", justify: "center", align: "center", gap: "xs" }, /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "bold" } }, String(events.length)), /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "demibold" } }, labels.onThisDate)), /* @__PURE__ */ React5.createElement(Divider, null), events.map((event, i) => /* @__PURE__ */ React5.createElement(React5.Fragment, { key: event.key }, /* @__PURE__ */ React5.createElement(DayListItem, { event, day, idScope, ...chipProps }), i < events.length - 1 ? /* @__PURE__ */ React5.createElement(Divider, null) : null)))))
+          },
+          labels.more(events.length - maxEventsPerDay)
+        )
+      )
+    );
+  } else {
+    slots.push(
+      /* @__PURE__ */ React5.createElement(Image2, { key: "more-sp", src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" })
+    );
+  }
+  return /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, slots);
+};
 var MonthView = ({
   refDate,
   now,
@@ -1502,49 +1700,21 @@ var MonthView = ({
 }) => {
   const headers = weekdayLabels(weekStartsOn, hideWeekends, true);
   const today = now || /* @__PURE__ */ new Date();
-  const spacer24 = makeSpacerDataUri(MONTH_CHIP_HEIGHT, MONTH_COL_WIDTH);
   const renderCell = (day) => {
     const dayEvents = eventsForDay(day);
     const inMonth = isSameMonth(day, refDate);
     const isToday = isSameDay(day, today);
     if (renderDayCell) return renderDayCell(day, dayEvents);
-    const shown = dayEvents.slice(0, maxEventsPerDay);
-    const hasOverflow = dayEvents.length > maxEventsPerDay;
-    const slots = [];
-    for (let i = 0; i < maxEventsPerDay; i++) {
-      if (i < shown.length) {
-        slots.push(/* @__PURE__ */ React5.createElement(MonthChip, { key: shown[i].key, event: shown[i], day, ...chipProps }));
-      } else {
-        slots.push(
-          /* @__PURE__ */ React5.createElement(Image2, { key: `sp-${i}`, src: spacer24.src, width: spacer24.width, height: spacer24.height, alt: "" })
-        );
+    return /* @__PURE__ */ React5.createElement(AutoGrid, { columnWidth: MONTH_COL_WIDTH, gap: "flush" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, isToday ? /* @__PURE__ */ React5.createElement(ColorDot, { variant: "info" }) : null, /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy", format: { fontWeight: inMonth ? "demibold" : "regular" } }, String(day.getDate()))), /* @__PURE__ */ React5.createElement(
+      DayChipStack,
+      {
+        day,
+        events: dayEvents,
+        maxEventsPerDay,
+        chipProps,
+        labels
       }
-    }
-    if (hasOverflow) {
-      const more = makeMoreDataUri({
-        label: labels.more(dayEvents.length - maxEventsPerDay),
-        width: MONTH_COL_WIDTH,
-        height: MONTH_CHIP_HEIGHT
-      });
-      slots.push(
-        /* @__PURE__ */ React5.createElement(
-          Image2,
-          {
-            key: "more",
-            src: more.src,
-            width: more.width,
-            height: more.height,
-            alt: labels.more(dayEvents.length - maxEventsPerDay),
-            overlay: /* @__PURE__ */ React5.createElement(Popover, { id: `cal-day-${day.getTime()}`, placement: "top", variant: "longform" }, /* @__PURE__ */ React5.createElement(Tile, { compact: true }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "sm" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center", gap: "sm" }, /* @__PURE__ */ React5.createElement(Heading, null, String(dayEvents.length)), /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "demibold" } }, labels.onThisDate)), /* @__PURE__ */ React5.createElement(Divider, null), dayEvents.map((event, i) => /* @__PURE__ */ React5.createElement(React5.Fragment, { key: event.key }, /* @__PURE__ */ React5.createElement(DayListItem, { event, day, ...chipProps }), i < dayEvents.length - 1 ? /* @__PURE__ */ React5.createElement(Divider, null) : null)))))
-          }
-        )
-      );
-    } else {
-      slots.push(
-        /* @__PURE__ */ React5.createElement(Image2, { key: "more-sp", src: spacer24.src, width: spacer24.width, height: spacer24.height, alt: "" })
-      );
-    }
-    return /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, isToday ? /* @__PURE__ */ React5.createElement(ColorDot, { variant: "info" }) : null, /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy", format: { fontWeight: inMonth ? "demibold" : "regular" } }, String(day.getDate()))), slots);
+    )));
   };
   return /* @__PURE__ */ React5.createElement(Table, { bordered: true, flush: true }, /* @__PURE__ */ React5.createElement(TableHead, null, /* @__PURE__ */ React5.createElement(TableRow, null, headers.map((h4) => /* @__PURE__ */ React5.createElement(TableHeader, { key: h4, width: "min", align: "center" }, h4.toUpperCase())))), /* @__PURE__ */ React5.createElement(TableBody, null, weeks.map((week, wi) => {
     const days = hideWeekends ? week.filter((d) => d.getDay() !== 0 && d.getDay() !== 6) : week;
@@ -1566,6 +1736,33 @@ var AgendaView = ({ rangeStart, rangeEnd, eventsForDay, chipProps, labels, rende
   }
   return /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "lg" }, days.map(({ day, events }) => /* @__PURE__ */ React5.createElement(Flex4, { key: day.getTime(), direction: "column", gap: "sm" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", justify: "between", align: "end" }, /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "demibold" } }, formatDayTitle(day)), /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy" }, `${events.length} ${events.length === 1 ? "event" : "events"}`)), /* @__PURE__ */ React5.createElement(Divider, null), events.map((event) => /* @__PURE__ */ React5.createElement(AgendaEventRow, { key: event.key, event, day, ...chipProps })))));
 };
+var ResourceView = ({ days, now, lanes, maxEventsPerDay, chipProps, labels, renderEmptyState }) => {
+  const today = now || /* @__PURE__ */ new Date();
+  if (!lanes || lanes.length === 0) {
+    if (renderEmptyState) return renderEmptyState({});
+    return /* @__PURE__ */ React5.createElement(EmptyState, { title: labels.noEventsTitle }, /* @__PURE__ */ React5.createElement(Text, null, labels.noEventsMessage));
+  }
+  const rangeStart = startOfDay(days[0]);
+  const rangeEnd = endOfDay(days[days.length - 1]);
+  return /* @__PURE__ */ React5.createElement(Table, { bordered: true, flush: true }, /* @__PURE__ */ React5.createElement(TableHead, null, /* @__PURE__ */ React5.createElement(TableRow, null, /* @__PURE__ */ React5.createElement(TableHeader, { width: RESOURCE_LABEL_COL_WIDTH }, String(labels.resource).toUpperCase()), days.map((day) => {
+    const isToday = isSameDay(day, today);
+    const label = `${formatWeekdayShort(day)} ${formatMonthShort(day)} ${day.getDate()}`;
+    return /* @__PURE__ */ React5.createElement(TableHeader, { key: day.getTime(), width: "min", align: "center" }, isToday ? `${label} \xB7 Today` : label);
+  }))), /* @__PURE__ */ React5.createElement(TableBody, null, lanes.map((lane, laneIndex) => {
+    const visible = eventsIntersectingRange(lane.events, rangeStart, rangeEnd);
+    return /* @__PURE__ */ React5.createElement(TableRow, { key: lane.key }, /* @__PURE__ */ React5.createElement(TableCell, { width: RESOURCE_LABEL_COL_WIDTH }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "flush" }, /* @__PURE__ */ React5.createElement(Text, { format: { fontWeight: "demibold" } }, lane.label), /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy" }, `${visible.length} ${visible.length === 1 ? "event" : "events"}`))), days.map((day) => /* @__PURE__ */ React5.createElement(TableCell, { key: day.getTime(), width: "min" }, /* @__PURE__ */ React5.createElement(AutoGrid, { columnWidth: MONTH_COL_WIDTH, gap: "flush" }, /* @__PURE__ */ React5.createElement(
+      DayChipStack,
+      {
+        day,
+        events: laneEventsForDay(visible, day),
+        maxEventsPerDay,
+        chipProps,
+        labels,
+        idScope: `r${laneIndex}-`
+      }
+    )))));
+  })));
+};
 var formatTimedDuration = (start, end) => {
   const mins = Math.max(0, Math.round(((end || start).getTime() - start.getTime()) / 6e4));
   const h4 = Math.floor(mins / 60);
@@ -1587,6 +1784,7 @@ var TimeGridView = ({ days, now, hours, dayStartHour, dayEndHour, eventsForDay,
   const today = now || /* @__PURE__ */ new Date();
   const centerDays = days.length === 1;
   const dayColWidth = days.length === 1 ? TIMEGRID_DAY_COL_SINGLE : TIMEGRID_DAY_COL;
+  const weekTitleMaxChars = Math.max(6, Math.floor((TIMEGRID_DAY_COL - 46) / 6.6));
   const todayInView = days.some((d) => isSameDay(d, today));
   const nowHour = today.getHours();
   const dayData = days.map((day) => {
@@ -1612,7 +1810,8 @@ var TimeGridView = ({ days, now, hours, dayStartHour, dayEndHour, eventsForDay,
       chipProps.overlayMode,
       chipProps.renderEventDetail,
       chipProps.labels,
-      `-tg${mode}${hour}-${dayMs}`
+      `-tg${mode}${hour}-${dayMs}`,
+      chipProps.reschedule
     );
     const handleClick = chipProps.onEventClick ? () => chipProps.onEventClick(e.raw, e) : void 0;
     const variant = VALID_VARIANTS.has(e.color) ? e.color : "default";
@@ -1631,10 +1830,10 @@ var TimeGridView = ({ days, now, hours, dayStartHour, dayEndHour, eventsForDay,
     } else if (mode === "cont") {
       sub = `\u2191 cont. through ${endLabel}`;
     }
-    return /* @__PURE__ */ React5.createElement(Flex4, { key: `${e.key}-${mode}-${hour}`, direction: "column", gap: "flush" }, /* @__PURE__ */ React5.createElement(Link2, { overlay, onClick: handleClick }, /* @__PURE__ */ React5.createElement(StatusTag, { variant: STATUS_VARIANT[variant] || "default" }, e.title || "--")), sub ? /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy" }, sub) : null);
+    const titleLabel = centerDays ? e.title || "--" : truncateMonthLabel(e.title || "--", weekTitleMaxChars);
+    return /* @__PURE__ */ React5.createElement(Flex4, { key: `${e.key}-${mode}-${hour}`, direction: "column", gap: "flush" }, /* @__PURE__ */ React5.createElement(Link2, { overlay, onClick: handleClick }, /* @__PURE__ */ React5.createElement(StatusTag, { variant: STATUS_VARIANT[variant] || "default" }, titleLabel)), sub ? /* @__PURE__ */ React5.createElement(Text, { variant: "microcopy" }, sub) : null);
   };
-  const daySpacer = makeSpacerDataUri(1, dayColWidth);
-  const dayCell = (key, content) => /* @__PURE__ */ React5.createElement(TableCell, { key, width: centerDays ? "max" : "min", align: "left" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, content, centerDays ? null : /* @__PURE__ */ React5.createElement(Image2, { src: daySpacer.src, width: daySpacer.width, height: daySpacer.height, alt: "" })));
+  const dayCell = (key, content) => /* @__PURE__ */ React5.createElement(TableCell, { key, width: centerDays ? "max" : "min", align: "left" }, centerDays ? /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, content) : /* @__PURE__ */ React5.createElement(AutoGrid, { columnWidth: dayColWidth, gap: "flush" }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "xs" }, content)));
   const slotSpacer = makeSpacerDataUri(HOUR_SLOT_HEIGHT, 1);
   const emptyCell = null;
   return /* @__PURE__ */ React5.createElement(Table, { bordered: true, flush: true, density: "compact" }, /* @__PURE__ */ React5.createElement(TableHead, null, /* @__PURE__ */ React5.createElement(TableRow, null, /* @__PURE__ */ React5.createElement(TableHeader, { width: "min" }, "TIME"), dayData.map(({ day }) => {
@@ -1690,9 +1889,21 @@ var Calendar = (props) => {
     weekStartsOn = 0,
     hideWeekends = false,
     maxEventsPerDay = DEFAULT_MAX_EVENTS_PER_DAY,
+    // month-grid event token style: "statusTag" (dot + text, default) | "tag" (pill)
+    monthEventStyle = "statusTag",
+    // max characters for a month-cell label before "…" (default derived per style)
+    monthEventMaxChars,
     // time grid (week / day)
     dayStartHour = DEFAULT_DAY_START_HOUR,
     dayEndHour = DEFAULT_DAY_END_HOUR,
+    // resource / lane view (rows = resources, columns = the focused week's days)
+    resources,
+    resourceField,
+    resourceLabels,
+    showUnassignedLane = true,
+    // drag-free reschedule (presets + date picker in the event-detail overlay)
+    rescheduleOptions,
+    onEventReschedule,
     // timezone
     timeZone: controlledTimeZone,
     defaultTimeZone,
@@ -1731,10 +1942,12 @@ var Calendar = (props) => {
   const fields = useMemo(() => ({ ...DEFAULT_EVENT_FIELDS, ...eventFields || {} }), [eventFields]);
   const [internalView, setInternalView] = useState2(defaultView);
   const view = controlledView != null ? controlledView : internalView;
+  const resourceEnabled = resources && resources.length > 0 || resourceField != null;
   const enabledViews = useMemo(() => {
-    const base = viewsProp && viewsProp.length > 0 ? viewsProp : ALL_VIEWS;
-    return base.filter((v) => ALL_VIEWS.includes(v));
-  }, [viewsProp]);
+    const all = resourceEnabled ? ALL_VIEWS_WITH_RESOURCE : ALL_VIEWS;
+    const base = viewsProp && viewsProp.length > 0 ? viewsProp : all;
+    return base.filter((v) => all.includes(v));
+  }, [viewsProp, resourceEnabled]);
   const setView = useCallback(
     (next) => {
       if (controlledView == null) setInternalView(next);
@@ -1759,7 +1972,9 @@ var Calendar = (props) => {
   const focusedDate = (controlledFocusedDate != null ? toDate(controlledFocusedDate) : internalDate) || startOfDay(nowWall);
   const stepFor = useCallback(
     (dir) => {
-      if (view === "week" || view === "agenda") return addDays(focusedDate, dir * 7);
+      if (view === "week" || view === "agenda" || view === "resource") {
+        return addDays(focusedDate, dir * 7);
+      }
       if (view === "day") return addDays(focusedDate, dir);
       return addMonths(focusedDate, dir);
     },
@@ -1786,7 +2001,7 @@ var Calendar = (props) => {
         rangeEnd: endOfDay(flat[flat.length - 1])
       };
     }
-    if (view === "week") {
+    if (view === "week" || view === "resource") {
       const days = buildWeekDays(focusedDate, weekStartsOn, hideWeekends);
       return {
         weeks: null,
@@ -1859,14 +2074,18 @@ var Calendar = (props) => {
   );
   const normalized = useMemo(
     () => (events || []).map((raw, index) => {
-      const start = toWallClock(toDate(resolveField(raw, fields.start)), timeZone);
-      const endRaw = toWallClock(toDate(resolveField(raw, fields.end)), timeZone);
+      const sourceStart = toDate(resolveField(raw, fields.start));
+      const sourceEnd = toDate(resolveField(raw, fields.end));
+      const start = toWallClock(sourceStart, timeZone);
+      const endRaw = toWallClock(sourceEnd, timeZone);
       const id = resolveField(raw, fields.id);
       return {
         key: id != null ? String(id) : `evt-${index}`,
         id,
         start,
         end: endRaw || start,
+        sourceStart,
+        sourceEnd: sourceEnd || sourceStart,
         title: resolveField(raw, fields.title),
         subtitle: resolveField(raw, fields.subtitle),
         color: resolveField(raw, fields.color),
@@ -1903,13 +2122,60 @@ var Calendar = (props) => {
   }, [rangeKey]);
   const title = useMemo(() => {
     if (view === "day") return formatDayTitle(focusedDate);
-    if (view === "week" || view === "agenda") {
-      const days = buildWeekDays(focusedDate, weekStartsOn, view === "week" && hideWeekends);
+    if (view === "week" || view === "agenda" || view === "resource") {
+      const days = buildWeekDays(focusedDate, weekStartsOn, view !== "agenda" && hideWeekends);
       return formatRangeTitle(days[0], days[days.length - 1]);
     }
     return formatMonthTitle(focusedDate);
   }, [view, focusedDate, weekStartsOn, hideWeekends]);
-  const chipProps = { overlayMode, renderEventDetail, onEventClick, labels };
+  const handleReschedulePreset = useCallback(
+    (event, option) => {
+      const target = resolveRescheduleTarget(
+        { start: event.sourceStart, end: event.sourceEnd },
+        option,
+        event
+      );
+      if (target && onEventReschedule) onEventReschedule(event.raw, target, event);
+    },
+    [onEventReschedule]
+  );
+  const handleReschedulePick = useCallback(
+    (event, value) => {
+      const newStart = applyDatePick(event.sourceStart, value);
+      if (!newStart) return;
+      const target = rescheduleToStart({ start: event.sourceStart, end: event.sourceEnd }, newStart);
+      if (target && onEventReschedule) onEventReschedule(event.raw, target, event);
+    },
+    [onEventReschedule]
+  );
+  const reschedule = useMemo(() => {
+    if (!rescheduleOptions) return null;
+    return {
+      options: normalizeRescheduleOptions(rescheduleOptions),
+      onPreset: handleReschedulePreset,
+      onPick: handleReschedulePick
+    };
+  }, [rescheduleOptions, handleReschedulePreset, handleReschedulePick]);
+  const safeMonthEventStyle = MONTH_EVENT_STYLES.has(monthEventStyle) ? monthEventStyle : "statusTag";
+  const chipProps = {
+    overlayMode,
+    renderEventDetail,
+    onEventClick,
+    labels,
+    monthEventStyle: safeMonthEventStyle,
+    monthEventMaxChars,
+    reschedule
+  };
+  const resourceLaneData = useMemo(() => {
+    if (view !== "resource") return null;
+    return buildResourceLanes(queried, {
+      resources,
+      resourceLabels,
+      getId: (e) => resolveResourceId(e.raw, resourceField),
+      showUnassignedLane,
+      unassignedLabel: labels.unassigned
+    });
+  }, [view, queried, resources, resourceLabels, resourceField, showUnassignedLane, labels]);
   const timeZoneOptions = useMemo(() => {
     if (!showTimeZoneSelect) return null;
     const base = (timeZoneOptionsProp && timeZoneOptionsProp.length ? timeZoneOptionsProp : DEFAULT_TIME_ZONES).map(
@@ -1970,6 +2236,19 @@ var Calendar = (props) => {
         labels
       }
     );
+  } else if (view === "resource") {
+    body = /* @__PURE__ */ React5.createElement(
+      ResourceView,
+      {
+        days: gridDays,
+        now: nowWall,
+        lanes: resourceLaneData,
+        maxEventsPerDay,
+        chipProps,
+        labels,
+        renderEmptyState
+      }
+    );
   } else if (view === "week" || view === "day") {
     body = /* @__PURE__ */ React5.createElement(
       TimeGridView,
@@ -1999,6 +2278,7 @@ var Calendar = (props) => {
   }
   return /* @__PURE__ */ React5.createElement(Flex4, { direction: "column", gap: "sm" }, toolbar, body);
 };
+Calendar.displayName = "Calendar";
 export {
   Calendar
 };