vectis-ui 0.1.0 → 0.8.0

package/dist/components/VCalendar/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","names":[],"sources":["../../../src/components/VCalendar/keyboard.ts"],"sourcesContent":["// @keyboard @a11y\n/**\n * The pure half of VCalendar's keyboard: it answers the single question \"what does this\n * key mean here?\", and does nothing else. Moving the focus, writing to the model, calling\n * `preventDefault` and announcing the result all stay in the component, where the reactive\n * state lives.\n *\n * It sits in VCalendar's own folder rather than in `utils/` because it has exactly one\n * consumer, which fails the admission rule for shared code (the same reasoning as\n * `VDatePicker/keyboard.ts` and `VHotkeys/platform.ts`). Being pure is also what makes the\n * whole keyboard testable without mounting anything, since the environment the tests run\n * in lays nothing out and the handlers in the component only ever move DOM focus.\n *\n * `utils/arrowNav` is deliberately not used. It navigates a flat DOM list of controls; this\n * navigates a two-dimensional space of DATES AND TIMES whose edges are a domain clamp, not\n * a list end — the same reason VDatePicker, VCombobox and VTimePicker stay out of it.\n *\n * WHY A GRAB MODE, and not arrows that move an event outright. Every gesture the pointer\n * offers has to have a keyboard equivalent (WCAG 2.1.1), and a card is reached by the\n * arrows in the first place — so if the arrows also moved it, arriving at an event and\n * nudging it would be the same keystroke, and there would be no way to pass over one\n * without dragging it. Entering a mode separates the two, and Escape gives back the one\n * thing a pointer drag has that a keypress does not: the chance to change your mind.\n */\n\n/** What one key means, given where the focus is. */\nexport type CalendarIntent =\n  /** Move the focused cell by whole days and whole hours. */\n  | { kind: 'moveFocus'; days: number; minutes: number }\n  /** Jump to the first or last day of the row. */\n  | { kind: 'rowEdge'; edge: 'start' | 'end' }\n  /** Show the previous or next period, as the toolbar's buttons do. */\n  | { kind: 'period'; delta: -1 | 1 }\n  /** Take up what is focused: create here, open a card, or commit a move under way. */\n  | { kind: 'activate' }\n  /** Back out: leave a card for its cell, or abandon a move and put the event back. */\n  | { kind: 'cancel' }\n  /** Move the grabbed event. */\n  | { kind: 'grabMove'; days: number; minutes: number }\n  /** Change how long the grabbed event lasts. */\n  | { kind: 'grabResize'; minutes: number }\n\n/**\n * Where the focus is when the key arrives, which is what decides the answer:\n *\n * - `cell` — an empty part of the grid. The arrows travel, Enter creates.\n * - `event` — a card, at rest. Enter takes hold of it, Escape goes back to the grid.\n * - `grabbed` — a card being moved. The arrows now move the EVENT, Enter commits, Escape\n *   puts it back where it was.\n */\nexport type CalendarFocus = 'cell' | 'event' | 'grabbed'\n\n/** How far one press of an arrow travels vertically in the grid: one hour. */\nconst MINUTES_PER_ROW = 60\n\n/**\n * What a key means. Returning nothing says the key is none of this table's business and\n * the event must be left entirely alone — which is what keeps Tab, the browser's own\n * shortcuts and anything a consumer has bound working.\n *\n * `rtl` is passed in rather than read here: which way is \"forward\" is a property of the\n * document, and a pure table has no business consulting one.\n */\nexport function calendarIntent(\n  key: string,\n  shiftKey: boolean,\n  focus: CalendarFocus,\n  slotMinutes: number,\n  rtl: boolean,\n): CalendarIntent | undefined {\n  const step = slotMinutes > 0 ? slotMinutes : 1\n  // The inline arrows follow the reading direction; the block ones never do, because down\n  // is later in the day in every script.\n  const inline = rtl ? -1 : 1\n\n  if (focus === 'grabbed') {\n    switch (key) {\n      case 'ArrowLeft':\n        return { kind: 'grabMove', days: -inline, minutes: 0 }\n      case 'ArrowRight':\n        return { kind: 'grabMove', days: inline, minutes: 0 }\n      case 'ArrowUp':\n        return shiftKey\n          ? { kind: 'grabResize', minutes: -step }\n          : { kind: 'grabMove', days: 0, minutes: -step }\n      case 'ArrowDown':\n        return shiftKey\n          ? { kind: 'grabResize', minutes: step }\n          : { kind: 'grabMove', days: 0, minutes: step }\n      case 'Enter':\n      case ' ':\n        return { kind: 'activate' }\n      case 'Escape':\n        return { kind: 'cancel' }\n      default:\n        return undefined\n    }\n  }\n\n  if (focus === 'event') {\n    switch (key) {\n      case 'Enter':\n      case ' ':\n        return { kind: 'activate' }\n      case 'Escape':\n        return { kind: 'cancel' }\n      default:\n        return undefined\n    }\n  }\n\n  switch (key) {\n    case 'ArrowLeft':\n      return { kind: 'moveFocus', days: -inline, minutes: 0 }\n    case 'ArrowRight':\n      return { kind: 'moveFocus', days: inline, minutes: 0 }\n    case 'ArrowUp':\n      return { kind: 'moveFocus', days: 0, minutes: -MINUTES_PER_ROW }\n    case 'ArrowDown':\n      return { kind: 'moveFocus', days: 0, minutes: MINUTES_PER_ROW }\n    case 'Home':\n      return { kind: 'rowEdge', edge: 'start' }\n    case 'End':\n      return { kind: 'rowEdge', edge: 'end' }\n    case 'PageUp':\n      return { kind: 'period', delta: -1 }\n    case 'PageDown':\n      return { kind: 'period', delta: 1 }\n    case 'Enter':\n    case ' ':\n      return { kind: 'activate' }\n    default:\n      return undefined\n  }\n}\n"],"mappings":"AA+DA,SAAgB,EACd,GACA,GACA,GACA,GACA,GAC4B;CAC5B,IAAM,IAAO,IAAc,IAAI,IAAc,GAGvC,IAAS,IAAM,KAAK;CAE1B,IAAI,MAAU,WACZ,QAAQ,GAAR;EACE,KAAK,aACH,OAAO;GAAE,MAAM;GAAY,MAAM,CAAC;GAAQ,SAAS;EAAE;EACvD,KAAK,cACH,OAAO;GAAE,MAAM;GAAY,MAAM;GAAQ,SAAS;EAAE;EACtD,KAAK,WACH,OAAO,IACH;GAAE,MAAM;GAAc,SAAS,CAAC;EAAK,IACrC;GAAE,MAAM;GAAY,MAAM;GAAG,SAAS,CAAC;EAAK;EAClD,KAAK,aACH,OAAO,IACH;GAAE,MAAM;GAAc,SAAS;EAAK,IACpC;GAAE,MAAM;GAAY,MAAM;GAAG,SAAS;EAAK;EACjD,KAAK;EACL,KAAK,KACH,OAAO,EAAE,MAAM,WAAW;EAC5B,KAAK,UACH,OAAO,EAAE,MAAM,SAAS;EAC1B,SACE;CACJ;CAGF,IAAI,MAAU,SACZ,QAAQ,GAAR;EACE,KAAK;EACL,KAAK,KACH,OAAO,EAAE,MAAM,WAAW;EAC5B,KAAK,UACH,OAAO,EAAE,MAAM,SAAS;EAC1B,SACE;CACJ;CAGF,QAAQ,GAAR;EACE,KAAK,aACH,OAAO;GAAE,MAAM;GAAa,MAAM,CAAC;GAAQ,SAAS;EAAE;EACxD,KAAK,cACH,OAAO;GAAE,MAAM;GAAa,MAAM;GAAQ,SAAS;EAAE;EACvD,KAAK,WACH,OAAO;GAAE,MAAM;GAAa,MAAM;GAAG,SAAS;EAAiB;EACjE,KAAK,aACH,OAAO;GAAE,MAAM;GAAa,MAAM;GAAG,SAAS;EAAgB;EAChE,KAAK,QACH,OAAO;GAAE,MAAM;GAAW,MAAM;EAAQ;EAC1C,KAAK,OACH,OAAO;GAAE,MAAM;GAAW,MAAM;EAAM;EACxC,KAAK,UACH,OAAO;GAAE,MAAM;GAAU,OAAO;EAAG;EACrC,KAAK,YACH,OAAO;GAAE,MAAM;GAAU,OAAO;EAAE;EACpC,KAAK;EACL,KAAK,KACH,OAAO,EAAE,MAAM,WAAW;EAC5B,SACE;CACJ;AACF"}
+{"version":3,"file":"keyboard.js","names":[],"sources":["../../../src/components/VCalendar/keyboard.ts"],"sourcesContent":["// @keyboard @a11y\n/**\n * The pure half of VCalendar's keyboard: it answers the single question \"what does this\n * key mean here?\", and does nothing else. Moving the focus, writing to the model, calling\n * `preventDefault` and announcing the result all stay in the component, where the reactive\n * state lives.\n *\n * It sits in VCalendar's own folder rather than in `utils/` because it has exactly one\n * consumer, which fails the admission rule for shared code (the same reasoning as\n * `VDatePicker/keyboard.ts` and `VHotkeys/platform.ts`). Being pure is also what makes the\n * whole keyboard testable without mounting anything, since the environment the tests run\n * in lays nothing out and the handlers in the component only ever move DOM focus.\n *\n * `utils/arrowNav` is deliberately not used. It navigates a flat DOM list of controls; this\n * navigates a two-dimensional space of DATES AND TIMES whose edges are a domain clamp, not\n * a list end — the same reason VDatePicker, VCombobox and VTimePicker stay out of it.\n *\n * WHY A GRAB MODE, and not arrows that move an event outright. Every gesture the pointer\n * offers has to have a keyboard equivalent (WCAG 2.1.1), and a card is reached by the\n * arrows in the first place — so if the arrows also moved it, arriving at an event and\n * nudging it would be the same keystroke, and there would be no way to pass over one\n * without dragging it. Entering a mode separates the two, and Escape gives back the one\n * thing a pointer drag has that a keypress does not: the chance to change your mind.\n */\n\nimport { MINUTES_PER_HOUR } from './layout'\n\n/** What one key means, given where the focus is. */\nexport type CalendarIntent =\n  /** Move the focused cell by whole days and whole hours. */\n  | { kind: 'moveFocus'; days: number; minutes: number }\n  /** Jump to the first or last day of the row. */\n  | { kind: 'rowEdge'; edge: 'start' | 'end' }\n  /** Show the previous or next period, as the toolbar's buttons do. */\n  | { kind: 'period'; delta: -1 | 1 }\n  /** Take up what is focused: report an empty cell, or commit a move under way. */\n  | { kind: 'activate' }\n  /** Take hold of a card, so the arrows move it. */\n  | { kind: 'grab' }\n  /** Abandon a move under way and put the event back. */\n  | { kind: 'cancel' }\n  /** Move the grabbed event. */\n  | { kind: 'grabMove'; days: number; minutes: number }\n  /** Change how long the grabbed event lasts. */\n  | { kind: 'grabResize'; minutes: number }\n\n/**\n * Where the focus is when the key arrives, which is what decides the answer:\n *\n * - `cell` — an empty part of the grid. The arrows travel, Enter creates.\n * - `event` — a card, at rest. Space takes hold of it; every other key is the browser's,\n *   Enter included, which presses the card as a button and so opens the event. Enter is the\n *   one a reader tries first on a button, and `event-activate` has no other keyboard route.\n * - `grabbed` — a card being moved. The arrows now move the EVENT, Enter commits, Escape\n *   puts it back where it was.\n */\nexport type CalendarFocus = 'cell' | 'event' | 'grabbed'\n\n/**\n * What a key means. Returning nothing says the key is none of this table's business and\n * the event must be left entirely alone — which is what keeps Tab, the browser's own\n * shortcuts and anything a consumer has bound working.\n *\n * `rtl` is passed in rather than read here: which way is \"forward\" is a property of the\n * document, and a pure table has no business consulting one.\n */\nexport function calendarIntent(\n  key: string,\n  shiftKey: boolean,\n  focus: CalendarFocus,\n  slotMinutes: number,\n  rtl: boolean,\n): CalendarIntent | undefined {\n  const step = slotMinutes > 0 ? slotMinutes : 1\n  // The inline arrows follow the reading direction; the block ones never do, because down\n  // is later in the day in every script.\n  const inline = rtl ? -1 : 1\n\n  if (focus === 'grabbed') {\n    switch (key) {\n      case 'ArrowLeft':\n        return { kind: 'grabMove', days: -inline, minutes: 0 }\n      case 'ArrowRight':\n        return { kind: 'grabMove', days: inline, minutes: 0 }\n      case 'ArrowUp':\n        return shiftKey\n          ? { kind: 'grabResize', minutes: -step }\n          : { kind: 'grabMove', days: 0, minutes: -step }\n      case 'ArrowDown':\n        return shiftKey\n          ? { kind: 'grabResize', minutes: step }\n          : { kind: 'grabMove', days: 0, minutes: step }\n      case 'Enter':\n      case ' ':\n        return { kind: 'activate' }\n      case 'Escape':\n        return { kind: 'cancel' }\n      default:\n        return undefined\n    }\n  }\n\n  if (focus === 'event') return key === ' ' ? { kind: 'grab' } : undefined\n\n  switch (key) {\n    case 'ArrowLeft':\n      return { kind: 'moveFocus', days: -inline, minutes: 0 }\n    case 'ArrowRight':\n      return { kind: 'moveFocus', days: inline, minutes: 0 }\n    case 'ArrowUp':\n      return { kind: 'moveFocus', days: 0, minutes: -MINUTES_PER_HOUR }\n    case 'ArrowDown':\n      return { kind: 'moveFocus', days: 0, minutes: MINUTES_PER_HOUR }\n    case 'Home':\n      return { kind: 'rowEdge', edge: 'start' }\n    case 'End':\n      return { kind: 'rowEdge', edge: 'end' }\n    case 'PageUp':\n      return { kind: 'period', delta: -1 }\n    case 'PageDown':\n      return { kind: 'period', delta: 1 }\n    case 'Enter':\n    case ' ':\n      return { kind: 'activate' }\n    default:\n      return undefined\n  }\n}\n"],"mappings":";AAkEA,SAAgB,EACd,GACA,GACA,GACA,GACA,GAC4B;CAC5B,IAAM,IAAO,IAAc,IAAI,IAAc,GAGvC,IAAS,IAAM,KAAK;CAE1B,IAAI,MAAU,WACZ,QAAQ,GAAR;EACE,KAAK,aACH,OAAO;GAAE,MAAM;GAAY,MAAM,CAAC;GAAQ,SAAS;EAAE;EACvD,KAAK,cACH,OAAO;GAAE,MAAM;GAAY,MAAM;GAAQ,SAAS;EAAE;EACtD,KAAK,WACH,OAAO,IACH;GAAE,MAAM;GAAc,SAAS,CAAC;EAAK,IACrC;GAAE,MAAM;GAAY,MAAM;GAAG,SAAS,CAAC;EAAK;EAClD,KAAK,aACH,OAAO,IACH;GAAE,MAAM;GAAc,SAAS;EAAK,IACpC;GAAE,MAAM;GAAY,MAAM;GAAG,SAAS;EAAK;EACjD,KAAK;EACL,KAAK,KACH,OAAO,EAAE,MAAM,WAAW;EAC5B,KAAK,UACH,OAAO,EAAE,MAAM,SAAS;EAC1B,SACE;CACJ;CAGF,IAAI,MAAU,SAAS,OAAO,MAAQ,MAAM,EAAE,MAAM,OAAO,IAAI,KAAA;CAE/D,QAAQ,GAAR;EACE,KAAK,aACH,OAAO;GAAE,MAAM;GAAa,MAAM,CAAC;GAAQ,SAAS;EAAE;EACxD,KAAK,cACH,OAAO;GAAE,MAAM;GAAa,MAAM;GAAQ,SAAS;EAAE;EACvD,KAAK,WACH,OAAO;GAAE,MAAM;GAAa,MAAM;GAAG,SAAS;EAAkB;EAClE,KAAK,aACH,OAAO;GAAE,MAAM;GAAa,MAAM;GAAG,SAAA;EAA0B;EACjE,KAAK,QACH,OAAO;GAAE,MAAM;GAAW,MAAM;EAAQ;EAC1C,KAAK,OACH,OAAO;GAAE,MAAM;GAAW,MAAM;EAAM;EACxC,KAAK,UACH,OAAO;GAAE,MAAM;GAAU,OAAO;EAAG;EACrC,KAAK,YACH,OAAO;GAAE,MAAM;GAAU,OAAO;EAAE;EACpC,KAAK;EACL,KAAK,KACH,OAAO,EAAE,MAAM,WAAW;EAC5B,SACE;CACJ;AACF"}

package/dist/components/VCalendar/layout.d.ts

@@ -1,10 +1,14 @@
 import { MonthCell } from '../../utils/date.js';
 import { CalendarEvent, CalendarEventId, CalendarEventTimes, CalendarView } from './types.js';
+/** An hour, in the minutes every time here is counted in: one row of a time grid. */
+export declare const MINUTES_PER_HOUR = 60;
+/** How many minutes a day holds. The upper bound of every time computed here. */
+export declare const MINUTES_PER_DAY: number;
 /**
  * How far the pointer must travel before a press becomes a drag rather than a click.
  *
- * It is what keeps click-to-create and click-to-open alive: a press that never moves this
- * far writes nothing on release and is handled as a plain activation. Without it, the
+ * It is what keeps a click a click, on a card as on an empty cell: a press that never moves
+ * this far writes nothing on release and is handled as a plain activation. Without it, the
  * hand's natural tremor during a click would register as a one-pixel drag and every click
  * would silently move its event.
  */
@@ -22,9 +26,9 @@ export declare function windowOf(startHour: number, endHour: number): TimeWindow
  * TRAP — the value is held one minute short of midnight rather than allowed to reach it.
  * A day's last moment is 1440 in this arithmetic, but `24:00` is not a time any of the
  * design system's helpers accept (`isValidTime` rejects it), and the alternative — writing
- * `00:00` on the following day — would turn an ordinary evening appointment into a
- * two-day event and send it to the all-day band. One minute is invisible at every zoom
- * this component offers; a card in the wrong place is not.
+ * `00:00` on the following day — would turn an ordinary evening appointment into one that
+ * runs past midnight, which every gesture then treats differently. One minute is invisible at
+ * every zoom this component offers; an event that changed kind under the pointer is not.
  */
 export declare function timeOf(minutes: number): string;
 /** An `HH:mm` string into minutes since midnight; `fallback` when it is not one. */
@@ -32,10 +36,10 @@ export declare function minutesAt(time: string | undefined, fallback: number): n
 /**
  * The weekdays a calendar shows, in reading order.
  *
- * The array does double duty, which is why there is no separate "first day of week" prop:
- * it says which days are VISIBLE — `[1,2,3,4,5]` hides the weekend everywhere — and its
- * first entry is the day a week starts on. Given nothing, the seven days rotated to the
- * locale's own first day.
+ * The array does double duty: it says which days are VISIBLE — `[1,2,3,4,5]` hides the
+ * weekend everywhere — and its first entry is the day a week starts on. Given nothing, the
+ * seven days rotated to `firstDayOfWeek`, which the calendar takes from its prop of that
+ * name or from the locale.
  */
 export declare function normalizeWeekdays(weekdays: readonly number[] | undefined, firstDayOfWeek: number): number[];
 /** Whether a date falls on one of the visible weekdays. */
@@ -78,14 +82,32 @@ export declare function visibleRange(anchor: string, view: CalendarView, weekday
     start: string;
     end: string;
 };
+/**
+ * How long an event lasts, in minutes, counting the days between its dates.
+ *
+ * A time that is not one reads as the far end of its day — midnight for a start, the next
+ * midnight for an end — so a malformed event errs towards being long, and towards the band.
+ */
+export declare function durationOf(times: CalendarEventTimes): number;
+/** Whether an event runs from one day into the next without lasting a whole day. */
+export declare function spansMidnight(times: CalendarEventTimes): boolean;
 /**
  * Whether an event belongs in the band above the grid rather than in a day's column.
  *
- * The second clause is not a convenience: an event running from one day to the next cannot
- * be drawn inside a single column, so the band — where it becomes a bar with its times in
- * its label — is the only place it can honestly go.
+ * A day's column holds up to twenty-four hours, so an event running past midnight for less
+ * than that is drawn as two cards — the evening in one column, the early morning in the next —
+ * and only one lasting a whole day or more becomes a bar. Exactly twenty-four hours is a bar:
+ * two cards covering the same hours of two columns would read as two events.
+ *
+ * An event whose end comes before its start has no column to go in either, so it goes to the
+ * band, where `packAllDay` finds no day it covers and draws nothing.
  */
 export declare function isAllDayEvent(event: CalendarEvent): boolean;
+/**
+ * Which piece of its event a box is: the whole of it, or one side of midnight for an event
+ * that runs from one day into the next.
+ */
+export type SegmentPart = 'whole' | 'head' | 'tail';
 /** One event's box in one day column, in minutes since midnight. */
 export interface EventSegment {
     id: CalendarEventId;
@@ -93,9 +115,17 @@ export interface EventSegment {
     dayIndex: number;
     start: number;
     end: number;
-    /** Whether the window cut it off, so the card can show that it carries on past the edge. */
+    /**
+     * Whether the card carries on past its top or bottom edge: the window cut it off, or
+     * midnight did. Both are drawn the same way.
+     */
     clippedStart: boolean;
     clippedEnd: boolean;
+    /**
+     * `head` is the evening of an event running past midnight and `tail` its morning. Only a
+     * `whole` or a `tail` holds the event's real end, which is what its resize strip drags.
+     */
+    part: SegmentPart;
 }
 /**
  * Cuts the timed events into the boxes the day columns draw. All-day events produce none —
@@ -107,7 +137,7 @@ export interface EventSegment {
  * during packing instead, two events fifteen minutes apart would be laid out as though
  * they did not overlap and then drawn as though they did.
  */
-export declare function timedSegments(events: readonly CalendarEvent[], days: readonly string[], window: TimeWindow, minDuration: number): EventSegment[];
+export declare function timedSegments(events: readonly CalendarEvent[], days: readonly string[], timeWindow: TimeWindow, minDuration: number): EventSegment[];
 /** A segment once it knows how much of its column's width it gets. */
 export interface PlacedSegment extends EventSegment {
     /** Which column of its cluster it sits in, counted from zero. */
@@ -162,26 +192,19 @@ export declare function monthsOfYear(anchor: string): string[];
 /** Whether an event covers a given day at all, all-day or timed. */
 export declare function coversDay(event: CalendarEvent, iso: string): boolean;
 /**
- * The events falling on one day, in the order a summary should list them: the all-day ones
- * first, since they frame the day rather than sit inside it, then the rest by when they
- * start. The last tie is broken by id so the list cannot reshuffle for no reason.
- */
-export declare function eventsOnDay<T extends CalendarEvent>(events: readonly T[], iso: string): T[];
-/**
- * Every visible day's events at once, in one pass over the list.
+ * Every visible day's events, in the order a summary lists them: the all-day ones first, since
+ * they frame the day rather than sit inside it, then the rest by when they start, the last tie
+ * broken by id so the list cannot reshuffle for no reason.
  *
- * WHY THIS EXISTS RATHER THAN A LOOP OVER `eventsOnDay`. The month view needs all 42 squares
- * filled, and asking `eventsOnDay` once per square walks the whole event list 42 times and
- * sorts it 42 times — `cells × events`, with a sort each. Measured on the bench: 7.8 ms per
- * render at 2000 events, and the month view re-renders on every `pointermove` of a drag, so
- * that is roughly half a frame spent rebuilding lists no gesture changed.
+ * WHY ONE PASS RATHER THAN A FILTER PER DAY. The month view needs all 42 squares filled, and
+ * filtering and sorting the list once per square walks the whole event list 42 times and sorts
+ * it 42 times — `cells × events`, with a sort each. Measured on the bench: 7.8 ms per render at
+ * 2000 events, and the month view rebuilds it every time a drag carries a chip onto another
+ * day, so that is roughly half a frame spent rebuilding lists the gesture left alone.
  *
  * Here each event is placed once, into the days it actually covers, and each day is sorted
  * once — `events × span + cells × k log k`. The walk is bounded to the grid on both ends, so
  * an event running from last year costs its visible part and nothing more.
- *
- * The ORDER is identical to `eventsOnDay`'s, because both sort with `compareForDay`. That
- * matters: it is the order chips are listed in, so a difference would be visible.
  */
 export declare function eventsByDay<T extends CalendarEvent>(events: readonly T[], days: readonly string[]): Map<string, T[]>;
 /** One bar in the all-day band: the columns it covers, and the row it sits on. */
@@ -212,7 +235,7 @@ export interface AllDaySpan {
  */
 export declare function packAllDay(events: readonly CalendarEvent[], days: readonly string[]): AllDaySpan[];
 /** Where a moment sits in the visible window, as a unitless fraction the stylesheet scales. */
-export declare function fractionOf(minutes: number, window: TimeWindow): number;
+export declare function fractionOf(minutes: number, timeWindow: TimeWindow): number;
 /** The measurements of the grid a pointer is being read against, in viewport coordinates. */
 export interface GridGeometry {
     top: number;
@@ -233,29 +256,14 @@ export interface GridGeometry {
 export declare function pointToCell(point: {
     x: number;
     y: number;
-}, geometry: GridGeometry, window: TimeWindow, rtl: boolean): {
+}, geometry: GridGeometry, timeWindow: TimeWindow, rtl: boolean): {
     columnIndex: number;
     minutes: number;
 };
 /** Rounds a moment to the nearest step the calendar allows. */
 export declare function snapToSlot(minutes: number, step: number): number;
-/** Rounds a moment DOWN to the step containing it — where a new event begins. */
+/** Rounds a moment DOWN to the step containing it — where a drawn slot begins. */
 export declare function floorToSlot(minutes: number, step: number): number;
-/**
- * Where an event lands when it is dragged or nudged: it keeps its length and moves by whole
- * days and whole steps.
- *
- * An event pushed past the end of the window is held against it rather than having its tail
- * cut off — moving something must never change how long it is, which is the other gesture's
- * job.
- */
-export declare function moveEvent(origin: CalendarEventTimes, dayDelta: number, minuteDelta: number, window: TimeWindow, weekdays?: readonly number[]): CalendarEventTimes;
-/**
- * Where the end of an event lands when its bottom edge is dragged. It can never cross the
- * start: the shortest an event may become is one step, which is also the length a new one
- * is created at.
- */
-export declare function resizeEvent(origin: CalendarEventTimes, endMinutes: number, minDuration: number, window: TimeWindow): CalendarEventTimes;
 /**
  * How many whole days an event covers beyond its first — zero for one that starts and ends
  * on the same day, two for a trip from Monday to Wednesday.
@@ -264,7 +272,7 @@ export declare function daySpan(times: CalendarEventTimes): number;
 /**
  * Moves an event to another day, KEEPING its length in days as well as its times.
  *
- * This is the counterpart of `moveEvent`, and the two must not be confused: that one is for
+ * This is the counterpart of `timeGrid.ts`'s `moveEvent`, and the two must not be confused: that one is for
  * a timed move INSIDE a single day and deliberately collapses `end` onto `start`, so putting
  * a three-day trip through it would silently squash it into one Tuesday. This one is for the
  * whole-day gestures — an all-day bar dragged along the band, a chip dragged across a month —
@@ -272,12 +280,7 @@ export declare function daySpan(times: CalendarEventTimes): number;
  */
 export declare function moveEventToDay(origin: CalendarEventTimes, target: string): CalendarEventTimes;
 /** The measurements of a month grid — the same struct, with rows where a time window was. */
-export interface MonthGeometry {
-    top: number;
-    height: number;
-    inlineStart: number;
-    inlineSize: number;
-    columns: number;
+export interface MonthGeometry extends GridGeometry {
     rows: number;
 }
 /**
@@ -351,5 +354,15 @@ export declare function pointWithin(point: {
 }): boolean;
 /** The times of an event, as the shape the move and resize events carry. */
 export declare function timesOf(event: CalendarEvent): CalendarEventTimes;
+/**
+ * Whether two placements are the same, field for field.
+ *
+ * It is what a drag asks before it writes its preview. A slot is a quarter of an hour, some
+ * sixteen pixels at the default hour height, so most pointer moves land on the times already
+ * shown — and the gesture state is deeply reactive, so an EQUAL but new object would still
+ * re-run the whole layout and re-render every cell of the grid for a picture that did not
+ * change.
+ */
+export declare function sameTimes(a: CalendarEventTimes, b: CalendarEventTimes): boolean;
 /** Today, as the calendar reads it. Kept here so the component has one place to call. */
 export declare function todayISO(): string;

package/dist/components/VCalendar/layout.js

@@ -2,7 +2,6 @@ import { clamp as e } from "../../utils/number.js";
 import { pad2 as t } from "../../utils/text.js";
 import { addDays as n, addMonths as r, buildMonthGrid as i, compareISO as a, daysInMonth as o, formatISO as s, isoOf as c, parseISO as l } from "../../utils/date.js";
 import { minutesOf as u } from "../../utils/time.js";
-//#region src/components/VCalendar/layout.ts
 var d = 1440, f = 7, p = 1440 * 60 * 1e3;
 function m(e, t) {
 	let n = String(e), r = String(t);
@@ -97,35 +96,55 @@ function T(e, t, n, r) {
 	};
 }
 function E(e) {
-	return e.allDay === !0 || a(e.start, e.end) !== 0;
-}
-function D(t, n, r, i) {
-	let a = new Map(n.map((e, t) => [e, t])), o = [];
-	for (let n of t) {
-		if (E(n)) continue;
-		let t = a.get(n.start);
-		if (t === void 0) continue;
-		let s = _(n.startTime, r.start), c = Math.max(_(n.endTime, s + i), s + 1);
-		if (c <= r.start || s >= r.end) continue;
-		let l = e(s, r.start, r.end - 1), u = e(Math.max(c, l + i), l + 1, r.end);
-		o.push({
-			id: n.id,
-			dayIndex: t,
+	return V(e) * d + _(e.endTime, d) - _(e.startTime, 0);
+}
+function D(e) {
+	return a(e.start, e.end) < 0 && E(e) < 1440;
+}
+function O(e) {
+	if (e.allDay === !0) return !0;
+	let t = a(e.start, e.end);
+	return t === 0 ? !1 : t > 0 || !D(e);
+}
+function k(t, n, r, i) {
+	let o = new Map(n.map((e, t) => [e, t])), s = [], c = (t, n, a, o, c) => {
+		if (n === void 0 || o <= r.start || a >= r.end) return;
+		let l = e(a, r.start, r.end - 1), u = e(Math.max(o, l + i), l + 1, r.end);
+		s.push({
+			id: t,
+			dayIndex: n,
 			start: l,
 			end: u,
-			clippedStart: s < r.start,
-			clippedEnd: c > r.end
+			clippedStart: c === "tail" || a < r.start,
+			clippedEnd: c === "head" || o > r.end,
+			part: c
 		});
+	};
+	for (let e of t) {
+		if (O(e)) continue;
+		let t = _(e.startTime, r.start);
+		if (a(e.start, e.end) === 0) {
+			let n = Math.max(_(e.endTime, t + i), t + 1);
+			c(e.id, o.get(e.start), t, n, "whole");
+			continue;
+		}
+		let n = _(e.endTime, 0);
+		if (n === 0) {
+			c(e.id, o.get(e.start), t, d, "whole");
+			continue;
+		}
+		c(e.id, o.get(e.start), t, d, "head"), c(e.id, o.get(e.end), 0, n, "tail");
 	}
-	return o;
+	return s;
 }
-function O(e) {
+function A(e) {
 	let t = [...e].sort((e, t) => e.start - t.start || t.end - t.start - (e.end - e.start) || m(e.id, t.id)), n = [], r = [], i = [], a = -Infinity, o = () => {
-		let e = i.length;
-		for (let t of r) {
-			let n = 1;
-			for (; t.column + n < e && !r.some((e) => e.column === t.column + n && e.start < t.end && t.start < e.end);) n++;
-			t.span = n, t.columns = e;
+		let e = i.length, t = Array.from({ length: e }, () => []);
+		for (let e of r) t[e.column].push(e);
+		for (let n of r) {
+			let r = 1;
+			for (; n.column + r < e && !t[n.column + r].some((e) => e.start < n.end && n.start < e.end);) r++;
+			n.span = r, n.columns = e;
 		}
 		n.push(...r), r = [], i = [], a = -Infinity;
 	};
@@ -141,7 +160,7 @@ function O(e) {
 	}
 	return r.length > 0 && o(), n;
 }
-function k(e, t) {
+function j(e, t) {
 	let n = l(e);
 	if (!n || t.length === 0) return [];
 	let r = i(n.getFullYear(), n.getMonth(), t[0]), a = [];
@@ -151,16 +170,16 @@ function k(e, t) {
 	}
 	return a;
 }
-function A(e) {
+function M(e) {
 	let t = l(e);
 	if (!t) return [];
 	let n = t.getFullYear();
 	return Array.from({ length: 12 }, (e, t) => c(n, t, 1));
 }
-function j(e, t) {
+function N(e, t) {
 	return a(t, e.start) >= 0 && a(t, e.end) <= 0;
 }
-function M(e, t) {
+function P(e, t) {
 	let r = /* @__PURE__ */ new Map();
 	for (let e of t) r.set(e, []);
 	if (t.length === 0) return /* @__PURE__ */ new Map();
@@ -170,25 +189,25 @@ function M(e, t) {
 		if (a(e, s) > 0) continue;
 		let c = {
 			event: t,
-			allDay: +!E(t),
+			allDay: +!O(t),
 			minutes: _(t.startTime, 0),
 			id: String(t.id)
 		};
 		for (let t = e; a(t, s) <= 0; t = n(t, 1)) r.get(t)?.push(c);
 	}
 	let s = /* @__PURE__ */ new Map();
-	for (let [e, t] of r) t.sort(N), s.set(e, t.map((e) => e.event));
+	for (let [e, t] of r) t.sort(F), s.set(e, t.map((e) => e.event));
 	return s;
 }
-function N(e, t) {
-	return e.allDay - t.allDay || e.minutes - t.minutes || (e.id < t.id ? -1 : +(e.id > t.id));
+function F(e, t) {
+	return e.allDay - t.allDay || e.minutes - t.minutes || m(e.id, t.id);
 }
-function P(e, t) {
+function I(e, t) {
 	let n = [];
 	for (let r of e) {
-		if (!E(r)) continue;
+		if (!O(r)) continue;
 		let e = -1, i = -1;
-		for (let n = 0; n < t.length; n++) j(r, t[n]) && (e === -1 && (e = n), i = n);
+		for (let n = 0; n < t.length; n++) N(r, t[n]) && (e === -1 && (e = n), i = n);
 		e !== -1 && n.push({
 			id: r.id,
 			startIndex: e,
@@ -206,43 +225,25 @@ function P(e, t) {
 	}
 	return n;
 }
-function F(t, n) {
+function L(t, n) {
 	let r = n.end - n.start;
 	return r > 0 ? e((t - n.start) / r, 0, 1) : 0;
 }
-function I(t, n, r, i) {
-	let a = Math.max(1, n.columns), o = n.inlineSize / a, s = i ? n.inlineStart - t.x : t.x - n.inlineStart, c = e(o > 0 ? Math.floor(s / o) : 0, 0, a - 1), l = n.height > 0 ? (t.y - n.top) / n.height : 0;
+function R(t, n, r, i) {
+	let a = U(t.x, n, i), o = n.height > 0 ? (t.y - n.top) / n.height : 0;
 	return {
-		columnIndex: c,
-		minutes: e(r.start + l * (r.end - r.start), r.start, r.end)
+		columnIndex: a,
+		minutes: e(r.start + o * (r.end - r.start), r.start, r.end)
 	};
 }
-function L(t, n) {
+function z(t, n) {
 	let r = n > 0 ? n : 1;
 	return e(Math.round(t / r) * r, 0, d);
 }
-function R(t, n) {
+function B(t, n) {
 	let r = n > 0 ? n : 1;
 	return e(Math.floor(t / r) * r, 0, d);
 }
-function z(t, r, i, a, o) {
-	let s = _(t.startTime, a.start), c = Math.max(_(t.endTime, s), s + 1) - s, l = o && o.length > 0 ? x(t.start, r, o) : n(t.start, r), u = e(s + i, a.start, Math.max(a.start, a.end - c));
-	return {
-		start: l,
-		end: l,
-		startTime: g(u),
-		endTime: g(u + c)
-	};
-}
-function B(t, n, r, i) {
-	let a = _(t.startTime, i.start), o = e(n, a + Math.max(r, 1), i.end);
-	return {
-		start: t.start,
-		end: t.start,
-		startTime: g(a),
-		endTime: g(o)
-	};
-}
 function V(e) {
 	let t = l(e.start), n = l(e.end);
 	return !t || !n ? 0 : Math.max(0, Math.round((n.getTime() - t.getTime()) / p));
@@ -256,26 +257,30 @@ function H(e, t) {
 	};
 }
 function U(t, n, r) {
-	let i = Math.max(1, n.columns), a = Math.max(1, n.rows), o = n.inlineSize / i, s = r ? n.inlineStart - t.x : t.x - n.inlineStart, c = e(o > 0 ? Math.floor(s / o) : 0, 0, i - 1), l = n.height / a;
+	let i = Math.max(1, n.columns), a = n.inlineSize / i, o = r ? n.inlineStart - t : t - n.inlineStart;
+	return e(a > 0 ? Math.floor(o / a) : 0, 0, i - 1);
+}
+function W(t, n, r) {
+	let i = Math.max(1, n.rows), a = U(t.x, n, r), o = n.height / i;
 	return {
-		columnIndex: c,
-		rowIndex: e(l > 0 ? Math.floor((t.y - n.top) / l) : 0, 0, a - 1)
+		columnIndex: a,
+		rowIndex: e(o > 0 ? Math.floor((t.y - n.top) / o) : 0, 0, i - 1)
 	};
 }
-function W(e, t, n, r) {
+function G(e, t, n, r) {
 	if (n <= 0 || t.inlineSize <= 0) return null;
 	let i = r ? t.inlineStart - e : e - t.inlineStart;
 	return i < n ? -1 : i > t.inlineSize - n ? 1 : null;
 }
-function G(t, n, r) {
+function K(t, n, r) {
 	if (r <= 0 || n.height <= 0) return 0;
 	let i = t - n.top, a = n.top + n.height - t;
 	return i < r ? -e((r - i) / r, 0, 1) : a < r ? e((r - a) / r, 0, 1) : 0;
 }
-function K(e, t) {
+function q(e, t) {
 	return t.width <= 0 || t.height <= 0 || e.x >= t.left && e.x <= t.left + t.width && e.y >= t.top && e.y <= t.top + t.height;
 }
-function q(e) {
+function J(e) {
 	return {
 		start: e.start,
 		end: e.end,
@@ -283,10 +288,13 @@ function q(e) {
 		endTime: e.endTime
 	};
 }
-function J() {
+function Y(e, t) {
+	return e.start === t.start && e.end === t.end && e.startTime === t.startTime && e.endTime === t.endTime;
+}
+function X() {
 	return s(/* @__PURE__ */ new Date());
 }
 //#endregion
-export { x as advanceVisibleDays, G as blockEdgeAt, S as columnCount, j as coversDay, V as daySpan, M as eventsByDay, R as floorToSlot, F as fractionOf, W as inlineEdgeAt, E as isAllDayEvent, y as isVisibleDay, _ as minutesAt, k as monthWeeks, A as monthsOfYear, z as moveEvent, H as moveEventToDay, v as normalizeWeekdays, P as packAllDay, O as packDayColumn, I as pointToCell, U as pointToMonthCell, K as pointWithin, B as resizeEvent, L as snapToSlot, b as snapToVisibleDay, w as stepAnchor, g as timeOf, D as timedSegments, q as timesOf, J as todayISO, C as visibleDays, T as visibleRange, h as windowOf };
+export { d as MINUTES_PER_DAY, x as advanceVisibleDays, K as blockEdgeAt, S as columnCount, N as coversDay, V as daySpan, E as durationOf, P as eventsByDay, B as floorToSlot, L as fractionOf, G as inlineEdgeAt, O as isAllDayEvent, y as isVisibleDay, _ as minutesAt, j as monthWeeks, M as monthsOfYear, H as moveEventToDay, v as normalizeWeekdays, I as packAllDay, A as packDayColumn, R as pointToCell, W as pointToMonthCell, q as pointWithin, Y as sameTimes, z as snapToSlot, b as snapToVisibleDay, D as spansMidnight, w as stepAnchor, g as timeOf, k as timedSegments, J as timesOf, X as todayISO, C as visibleDays, T as visibleRange, h as windowOf };
 
 //# sourceMappingURL=layout.js.map