@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/Calendar/types.d.ts

@@ -0,0 +1,430 @@
+import type { PaletteColor } from '../../palette/index.js';
+export type CalendarEventTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+/**
+ * One event to render on the Calendar.
+ *
+ * - `startsAt` is the local-time start instant. `endsAt` (optional) is the
+ *   local-time end instant. For multi-day events, the bar extends from the
+ *   start day through the end day inclusive; week boundaries split it into
+ *   continuous bars with flattened edges.
+ * - `allDay: true` renders a tone-filled band without a time prefix
+ *   (birthdays, vacations). Default `false` renders a tone-tinted bar with
+ *   a hour-formatted time prefix.
+ */
+export interface CalendarEvent {
+    /** Stable unique ID. Used as React key and as the `onEventClick` argument. */
+    id: string;
+    /**
+     * Which resource column this event belongs to, matched against
+     * `CalendarResource.id`. Only meaningful when `<Calendar>` is given
+     * `resources` and rendered in `view="day"` — every other view ignores it.
+     *
+     * A timed event whose `resourceId` matches no supplied resource — or that
+     * omits it entirely — lands in the trailing "unassigned" column, which is
+     * only rendered when at least one such event exists. All-day events with no
+     * `resourceId` are treated as day-wide and span every column.
+     */
+    resourceId?: string;
+    /** Display title. Single line; ellipses on overflow. */
+    title: string;
+    /** When the event starts (local time). */
+    startsAt: Date;
+    /** When the event ends (local time). Defaults to the start day for `allDay`, or to a point-in-time for timed events. */
+    endsAt?: Date;
+    /**
+     * Semantic state of the event — what is going on with it. Defaults to
+     * `'neutral'`.
+     *
+     * Independent of `color`, and the two do not compete for the same pixels:
+     * when `color` is also set it takes the fill and `tone` moves to a stripe on
+     * the event's leading edge, so a category-coloured event can still show a
+     * state that must not be missed. See `color`.
+     */
+    tone?: CalendarEventTone;
+    /**
+     * Category identity — WHICH kind of thing this event is, as one of the 30
+     * `PaletteColor`s. Use it when your events belong to a colour-bearing
+     * category the tenant chose (an appointment type, a calendar, a resource
+     * class).
+     *
+     * Paints the block itself: the palette's tinted background with its saturated
+     * colour for text and border. That is deliberate — in a calendar the natural
+     * reading is that the block IS the colour, rather than that it carries a
+     * small coloured dot.
+     *
+     * `color` and `tone` are different axes and are shown together rather than
+     * one overriding the other: `color` takes the fill, and a non-`neutral`
+     * `tone` becomes a saturated stripe down the event's leading edge. So a
+     * "consultation" that is also "masked" reads as both. With no `color`, tone
+     * behaves exactly as before and paints the whole block.
+     *
+     * In the agenda view, where the row is not filled, `color` sets the leading
+     * dot and `tone` the band.
+     *
+     * **Unlike `Badge`**, where `color` overrides `tone` entirely, Calendar
+     * renders both. The reason is that a calendar tone can carry states closer to
+     * safety than decoration — a masked hour, a released slot — and silently
+     * dropping one would make a free hour read as a booked one.
+     *
+     * **Pick category colours that contrast with the semantic tones you use.**
+     * The band and the category fill are different colours by design, but some
+     * pairs land almost on top of each other. Measured RGB distance between each
+     * band colour and the category's own saturated colour — the worst pairs,
+     * grouped by tone and ordered within each group:
+     *
+     * - `tone: 'success'` — `mint` (11), `emerald` (15), `teal` (35), `green` (41)
+     * - `tone: 'danger'` — `red` (17), `coral` (44)
+     * - `tone: 'warning'` — `orange` (16), `coral` (25), `red` (43), `amber` (44)
+     * - `tone: 'accent'` — `blue` (40)
+     *
+     * Read it as a threshold, not a ranking. The worst pair is `success` +
+     * `mint` at 11, and anything under about 20 is effectively invisible at the
+     * rendered 4px — a 3px band plus the 1px border painted the same colour.
+     * (The agenda row has no border, so its stripe is the 3px alone.) The low 20s
+     * are detectable side-by-side but unreliable in isolation, and the low 40s
+     * are where this list stops rather than where the problem does: the pair just
+     * off the end is no safer than the last one on it.
+     *
+     * These numbers moved when `danger`, `success`, and `accent` were raised
+     * to clear WCAG AA as text. The bands got closer to their neighbouring
+     * category colours as a result: `success` + `mint` went 18 → 11 and `danger`
+     * + `red` went 36 → 17. `Calendar.collisions.test.ts` recomputes this list
+     * from the shipped tokens so it cannot drift again.
+     *
+     * Nothing enforces this — if a tenant picks `mint` for a category whose
+     * events can be `success`, keep that state in the title too.
+     *
+     * **Both axes are visual only.** Neither sets ARIA, and a 3px band is not an
+     * accessible signal — same contract as `Badge`, whose tone is also decoration.
+     * If a state must reach assistive tech, keep it in the event `title` (or wrap
+     * your own live region); do not rely on the band alone.
+     *
+     * On a multi-day bar the band repeats on every segment, including ones that
+     * continue from a previous week. It marks the event's state, not its start.
+     *
+     * @example
+     * // A booked consultation: category violet, no special state.
+     * { id: '1', title: 'Consultation', startsAt, color: 'violet' }
+     *
+     * @example
+     * // Same category, but the slot was released — colour AND state, both visible.
+     * { id: '2', title: 'Consultation', startsAt, color: 'violet', tone: 'success' }
+     */
+    color?: PaletteColor;
+    /** Renders as a full-band, time-prefix-free bar. Defaults to false. */
+    allDay?: boolean;
+}
+/**
+ * One bookable subject rendered as its own column in the resource day view:
+ * a practitioner, a chair, a room, a bay. Pass an array of these as
+ * `<Calendar resources={…} view="day">` to split the day into lanes that
+ * share one time axis and one scroll container.
+ */
+export interface CalendarResource {
+    /** Stable id. Matched against `CalendarEvent.resourceId`. */
+    id: string;
+    /** Column header text. Not translated by the library — pass it localized. */
+    label: string;
+}
+/**
+ * Shading intent for a `CalendarBackgroundInterval`.
+ *
+ * - `'unavailable'` — outside working hours / closed / blocked. Shaded, so
+ *   the user can see that the row exists and is not bookable.
+ * - `'available'` — working and free. Lightly tinted, so bookable space
+ *   reads differently from closed space.
+ */
+export type CalendarBackgroundTone = 'available' | 'unavailable';
+/**
+ * A non-interactive band painted behind the hour grid — the availability
+ * underlay. Use it to distinguish "closed" from "open and free"; "open and
+ * busy" is already expressed by the event blocks themselves.
+ *
+ * Intervals are an interval list rather than a weekly-hours object on
+ * purpose: working hours vary per day (a lunch break, a Tuesday late
+ * evening), per date (a public holiday, a short day) and per column (each
+ * practitioner has their own shift), and only an interval list expresses all
+ * three.
+ */
+export interface CalendarBackgroundInterval {
+    /** Start instant (local time). */
+    startsAt: Date;
+    /** End instant (local time). Must be after `startsAt`; equal/inverted intervals are dropped. */
+    endsAt: Date;
+    /**
+     * Restrict this band to one resource column. Ignored unless the view
+     * actually has resource columns — in week view and in a resource-less day
+     * view every interval applies to whichever columns its dates cover.
+     *
+     * Note that dropping the `resourceId` filter does NOT make an interval
+     * span the week: intervals are always clipped to each column's own date,
+     * so shading 08:00–09:00 across a week takes seven intervals, one per day.
+     */
+    resourceId?: string;
+    /** Shading intent. Defaults to `'unavailable'`. */
+    tone?: CalendarBackgroundTone;
+}
+/**
+ * The new placement proposed by a drag. Passed to `onEventMove`.
+ *
+ * The event's wall-clock duration is preserved: a 90-minute booking stays 90
+ * minutes on the clock. On a daylight-saving transition day that is not the
+ * same as preserving elapsed time — the proposal keeps the clock duration,
+ * which is what a calendar means by "the same appointment, an hour later" —
+ * and a start that lands in a skipped hour normalizes forward (02:30 → 03:30).
+ */
+export interface CalendarEventMove {
+    /** Proposed new start instant (local time), snapped to `dragSnapMinutes`. */
+    startsAt: Date;
+    /**
+     * Proposed new end instant (local time). Always present, even for an event
+     * that omitted `endsAt` — such an event has zero duration, so `endsAt`
+     * equals `startsAt`. Committing the proposal verbatim therefore turns an
+     * open-ended event into an explicitly zero-length one; keep `endsAt`
+     * undefined in your own state if that distinction matters to you.
+     */
+    endsAt: Date;
+    /**
+     * The resource column the event was dropped on, when the view has resource
+     * columns. `undefined` means the unassigned column (or a view without
+     * resource columns at all).
+     */
+    resourceId?: string;
+}
+/**
+ * The new duration proposed by a resize. Passed to `onEventResize`;
+ * `startsAt` is unchanged from the original event.
+ */
+export interface CalendarEventResize {
+    /** Unchanged start instant. */
+    startsAt: Date;
+    /** Proposed new end instant (local time), snapped to `dragSnapMinutes`. */
+    endsAt: Date;
+}
+/**
+ * The placement `canDropEvent` is asked to judge, discriminated by which
+ * gesture produced it.
+ *
+ * A move and a resize are different questions — "may this booking be
+ * relocated (possibly to another practitioner)?" versus "may it run longer?" —
+ * and ordinary rules distinguish them. Without the tag they are
+ * indistinguishable: the predicate fires continuously *during* the drag,
+ * including while the pointer is still at the origin, where both gestures
+ * report the event's own start.
+ *
+ * `mode` narrows the payload, so `resourceId` is only reachable on the branch
+ * where a drag can actually change it.
+ */
+export type CalendarDropCandidate = ({
+    mode: 'move';
+} & CalendarEventMove) | ({
+    mode: 'resize';
+    /**
+     * The lane the event is already in. Present on this branch too — a
+     * resize cannot CHANGE the column, but per-resource rules ("Ben's shift
+     * ends at 14:00") still need to know which one they are judging.
+     */
+    resourceId?: string;
+} & CalendarEventResize);
+/**
+ * What a drag handler may return. Returning `false` — or a promise that
+ * resolves to `false` or rejects — rejects the drop and the block snaps back
+ * to where it started. Returning nothing accepts it.
+ *
+ * Accepting does NOT move the event on its own: `events` stays the source of
+ * truth, so the consumer must commit the change to their own state.
+ */
+export type CalendarDropResult = void | boolean | Promise<void | boolean>;
+/**
+ * Active Calendar view. Month / week / day render a grid; agenda is a
+ * scannable list of events grouped by day for the cursor's current week.
+ */
+export type CalendarView = 'month' | 'week' | 'day' | 'agenda';
+/**
+ * One placed event bar inside the month grid. Produced by
+ * `layoutEventsForMonth` and consumed by `MonthView`.
+ */
+export interface EventBar {
+    event: CalendarEvent;
+    /** Index into `MonthGrid.weeks`. */
+    weekIndex: number;
+    /** 1..7, inclusive — first day this bar covers within the week. */
+    startCol: number;
+    /** 1..7, inclusive — last day this bar covers within the week. */
+    endCol: number;
+    /** 0..N — lane row assignment for stacking within the week. */
+    lane: number;
+    /** True when the event began in a previous week — the bar's left edge is flattened. */
+    continuesLeft: boolean;
+    /** True when the event continues into a later week — the bar's right edge is flattened. */
+    continuesRight: boolean;
+}
+/** Result of `layoutEventsForMonth`. */
+export interface MonthLayout {
+    /** Visible bars (lane < `maxLanes`) ordered by (weekIndex, lane, startCol). */
+    bars: readonly EventBar[];
+    /**
+     * Per-cell count of events hidden because their lane is >= `maxLanes`.
+     * Keyed by `toDateKey(day)`. Used by `DayCell` to render "+N more".
+     */
+    hiddenCounts: ReadonlyMap<string, number>;
+}
+/**
+ * One positioned timed-event block inside an `<HourGrid>` column. Produced
+ * by `layoutEventsForHourGrid` and consumed by `WeekView`/`DayView`.
+ *
+ * Horizontal placement (Google-Calendar-style cascade):
+ * - Lanes are offset to the right by a small constant step per lane
+ *   (`LANE_OFFSET_PERCENT` in TimedEvent.tsx — currently 10% of the column
+ *   width). Every block still extends to the column's right edge.
+ * - Higher lanes overlay earlier ones via `z-index = lane + 1`, so the
+ *   later/right-side event partially covers the one beneath while keeping
+ *   the predecessor's left edge visible.
+ * - On hover or keyboard focus, a block lifts to `left: 0; width: 100%`
+ *   above all neighbours — see TimedEvent.module.scss.
+ */
+export interface TimedEventBlock {
+    event: CalendarEvent;
+    /**
+     * Column index within the rendered view (0..N-1). One per weekday in week
+     * view; `0` in a plain day view; one per resource (plus the trailing
+     * unassigned column, when present) in a resource day view.
+     */
+    dayIndex: number;
+    /** Minutes from `hourRange[0] * 60`. May be negative if the event started earlier. */
+    startMinutes: number;
+    /** Minutes from `hourRange[0] * 60`. May exceed `(hourRange[1] - hourRange[0]) * 60`. */
+    endMinutes: number;
+    /** Cascade lane within the collision group (0..N). Drives both left offset and z-index. */
+    lane: number;
+}
+/**
+ * One bar in the AllDayBand (above the hour grid in WeekView/DayView).
+ * Multi-day events span columns as a single visual element.
+ */
+export interface AllDayBar {
+    event: CalendarEvent;
+    /** First column the bar covers (inclusive, 0-indexed within the view). */
+    startCol: number;
+    /** Last column the bar covers (inclusive). */
+    endCol: number;
+    /** 0..N — row position within the band stack. */
+    lane: number;
+    /** True when the event begins before the view's first day. */
+    continuesLeft: boolean;
+    /** True when the event continues past the view's last day. */
+    continuesRight: boolean;
+}
+/**
+ * One painted band of the availability underlay, positioned inside a single
+ * hour-grid column. Produced by `layoutBackgroundIntervals`.
+ */
+export interface BackgroundBlock {
+    /** Stable React key (interval index + column index). */
+    key: string;
+    /** Column index within the rendered view. */
+    dayIndex: number;
+    /** Minutes from `hourRange[0] * 60`, clamped to the visible range. */
+    startMinutes: number;
+    /** Minutes from `hourRange[0] * 60`, clamped to the visible range. */
+    endMinutes: number;
+    /** Resolved tone (defaults applied). */
+    tone: CalendarBackgroundTone;
+}
+/** Result of `layoutEventsForHourGrid`. */
+export interface HourGridLayout {
+    /** Positioned timed-event blocks, one per non-allDay event placed in the view. */
+    timedBlocks: readonly TimedEventBlock[];
+    /** Continuous bars in the all-day band above the hour grid. */
+    allDayBars: readonly AllDayBar[];
+}
+/**
+ * Context passed to a `renderEvent` callback. The chip wrapper (button +
+ * tone background + tooltip + click handler + positioning) stays default;
+ * the consumer's returned ReactNode replaces the inner content (time + title
+ * labels). To override the chip's background fully, wrap your content in an
+ * element with `position: absolute; inset: 0; background: ...` so it covers
+ * the default tone fill.
+ */
+export interface RenderEventContext {
+    /** Which view is rendering this chip. */
+    view: CalendarView;
+    /** True when the chip is in the all-day band (week/day) or `event.allDay` (month). */
+    asAllDay: boolean;
+    /** True when the bar continues from a previous week (multi-day events). */
+    continuesLeft?: boolean;
+    /** True when the bar continues into a next week (multi-day events). */
+    continuesRight?: boolean;
+    /** Pre-formatted time label. Single time (e.g., "9:00 AM") for zero-duration; range otherwise. Absent for all-day. */
+    timeLabel?: string;
+    /** Pre-formatted human duration ("30m" / "1h 30m" / "2d 5h"). */
+    duration: string;
+}
+/**
+ * Custom event renderer. When provided on `<Calendar>`, it's called for every
+ * event chip across views; the returned ReactNode replaces the inner content
+ * of the default chip. The chip wrapper still handles positioning, click,
+ * tooltip, and tone background — return content with inline `background` /
+ * `style` to override colors.
+ *
+ * Note on truncation. The rule, rather than the per-view markup, because the
+ * markup differs. A flex item gets an automatic minimum size — a floor at its
+ * own content's min-content width — while its computed `overflow` is
+ * NON-SCROLLABLE (CSS Flexbox §4.5). The non-scrollable values are `visible`
+ * and `clip`, which keep the floor; the scrollable ones (`hidden` / `auto` /
+ * `scroll`) drop it to `0`. So wherever your
+ * content lands in a flex ROW, anything you put there that is not a scroll
+ * container is floored, and a long `<Text truncate>` inside it never
+ * ellipsizes.
+ *
+ * That is the whole difference between your content and the DS default title.
+ * The default title's span sets `overflow: hidden`, making it a scroll
+ * container, so it has no automatic minimum to begin with — not because it is a
+ * direct child, and not because of the `min-width: 0` it also carries. A
+ * `Cluster` sets no `overflow` at all, so it is floored, and `minWidth0` is how
+ * you release it.
+ *
+ * `<Text truncate>` sets both `overflow: hidden` and `min-width: 0`, which is
+ * why the inner text is fine either way. What it cannot do is release the floor
+ * on a WRAPPER around it — and you need a wrapper as soon as your content has a
+ * leading element (a `Dot`, an icon). Inside the button the only valid wrapper
+ * among the DS layout primitives is `<Cluster as="span">` (`Stack` and `Constrain`
+ * render a `<div>`), so that is where `minWidth0` goes:
+ *
+ * ```tsx
+ * <Cluster as="span" gap="xs" align="center" wrap={false} minWidth0>
+ * ```
+ *
+ * Where that applies: the event chip — month cells AND the all-day band, so in
+ * month, week and day — and short hour-grid blocks, where the button itself is
+ * the row; plus the agenda row, where the row is an inner span rather than the
+ * button.
+ *
+ * What happens to the overflow is decided by the ELEMENT, not the view:
+ * `EventChip`'s chip and `TimedEvent`'s block set `overflow: hidden` on
+ * themselves, so they cut it. The agenda row sets none anywhere up the tree, so
+ * an unguarded wrapper there does not clip — it widens the document and gives
+ * the whole page a horizontal scrollbar, which is the louder failure of the
+ * two.
+ *
+ * Where it does NOT: a tall hour-grid block is `flex-direction: column` (see
+ * the layout note below), and the automatic minimum size applies only on the
+ * main axis, so there is no horizontal floor to release and `minWidth0` is a
+ * no-op.
+ *
+ * ```tsx
+ * renderEvent={(event) => (
+ *   <Cluster as="span" gap="xs" align="center" wrap={false} minWidth0>
+ *     <Dot color="violet" />
+ *     <Text as="span" size="inherit" truncate>{event.title}</Text>
+ *   </Cluster>
+ * )}
+ * ```
+ *
+ * Note on layout: for hour-grid blocks shorter than ~30px tall (`isShort`),
+ * the wrapping `<button>` switches from `flex-direction: column` to `row`
+ * to keep the start time visible alongside the title. Author your inner
+ * content so it works in both layouts (e.g., let text shrink with
+ * `min-width: 0; overflow: hidden` instead of pinning a fixed width).
+ */
+export type RenderEvent = (event: CalendarEvent, ctx: RenderEventContext) => import('react').ReactNode;

package/dist/components/Calendar/useEventDrag.d.ts

@@ -0,0 +1,112 @@
+import { type MutableRefObject, type PointerEvent } from 'react';
+import type { CalendarDropCandidate, CalendarDropResult, CalendarEvent, CalendarEventMove, CalendarEventResize, TimedEventBlock } from './types.js';
+import type { HourGridColumnRef } from './utils.js';
+/** Which gesture a drag represents. */
+export type DragMode = 'move' | 'resize';
+/**
+ * The live, uncommitted placement of the block being dragged.
+ *
+ * `startMinutes` / `endMinutes` are grid coordinates for rendering; `startsAt`
+ * / `endsAt` are the projected instants the consumer will be offered. They are
+ * computed together so the block's rendered position, its visible time label,
+ * and the payload can never disagree.
+ */
+export interface DragPreview {
+    /** `CalendarEvent.id` of the block being dragged. */
+    eventId: string;
+    mode: DragMode;
+    /** Column the block currently hovers over — may differ from where it started. */
+    columnIndex: number;
+    /** Minutes from `hourRange[0] * 60`. May sit outside the visible window (see `project`). */
+    startMinutes: number;
+    /** Minutes from `hourRange[0] * 60`. May sit outside the visible window (see `project`). */
+    endMinutes: number;
+    /** Projected start instant — `startsAt` of the proposal. */
+    startsAt: Date;
+    /** Projected end instant — `endsAt` of the proposal. */
+    endsAt: Date;
+    /** `canDropEvent` refused this placement — styled as a refused drop while the pointer rests on it. */
+    invalid: boolean;
+    /** The bounds moved the requested value — the gesture asked to go further than it may. */
+    clamped: boolean;
+}
+/**
+ * What the grid should announce in its live region. The hook reports the
+ * placement and the outcome; the caller owns the wording, because formatting a
+ * time is locale work and every user-facing string has to come from i18n.
+ */
+export interface DragAnnouncement {
+    /** The event being dragged — every message names it, as the rest of the library's drag a11y does. */
+    event: CalendarEvent;
+    mode: DragMode;
+    startsAt: Date;
+    endsAt: Date;
+    /** The placement was refused — by `canDropEvent` mid-drag, or by the handler on drop. */
+    refused: boolean;
+    /** The gesture asked to go further than the grid allows, so nothing changed. */
+    atEdge: boolean;
+    /** The gesture ended exactly where it started — nothing refused it, it simply moved nothing. */
+    unchanged: boolean;
+    /** The gesture was abandoned (pointer cancelled, window blurred) and proposed nothing. */
+    cancelled: boolean;
+    /** Monotonic, so an identical message still re-announces. */
+    seq: number;
+}
+export interface UseEventDragArgs {
+    /** The grid's columns, in render order. */
+    columns: readonly HourGridColumnRef[];
+    /** Pixel height of one hour row — the px↔minutes conversion factor. */
+    hourRowHeight: number;
+    /** Inclusive start, exclusive end of the visible hour range. */
+    hourRange: readonly [number, number];
+    /** Snap granularity in minutes. Values below 1 are treated as 1. */
+    snapMinutes: number;
+    /** Live DOM nodes of the day columns, for pointer hit-testing. */
+    columnElements: MutableRefObject<(HTMLElement | null)[]>;
+    onEventMove?: (event: CalendarEvent, next: CalendarEventMove) => CalendarDropResult;
+    onEventResize?: (event: CalendarEvent, next: CalendarEventResize) => CalendarDropResult;
+    canDropEvent?: (event: CalendarEvent, next: CalendarDropCandidate) => boolean;
+}
+export interface UseEventDragResult {
+    /** The in-flight placement, or `null` when nothing is being dragged. */
+    preview: DragPreview | null;
+    /** Latest thing worth announcing, or `null` before any gesture. */
+    announcement: DragAnnouncement | null;
+    /** True while a drag gesture owns the pointer. */
+    dragging: boolean;
+    /** Whether this grid accepts move gestures at all. */
+    canMove: boolean;
+    /** Whether this grid accepts resize gestures at all. */
+    canResize: boolean;
+    /** Begin a pointer drag from a `pointerdown` on a block (or its resize handle). */
+    startPointerDrag: (block: TimedEventBlock, mode: DragMode, e: PointerEvent) => void;
+    /** Keyboard equivalent: nudge a block by whole snap steps and/or whole columns. */
+    nudge: (block: TimedEventBlock, delta: {
+        mode: DragMode;
+        steps: number;
+        columns?: number;
+    }) => void;
+    /** True when the click that follows the drag we just finished must be swallowed. */
+    consumeClickSuppression: () => boolean;
+    /** Clear a stale suppression flag at the start of any fresh press. */
+    resetClickSuppression: () => void;
+}
+/**
+ * Pointer + keyboard drag controller for the hour grid's timed blocks.
+ *
+ * Hand-rolled on pointer events rather than built on `@dnd-kit`: the gesture
+ * is a continuous px→minutes projection onto one shared time axis, not a
+ * sortable list reorder, so the sensor/collision machinery would be pure
+ * overhead here.
+ *
+ * The consumer stays the source of truth. A drop is *proposed*, never
+ * applied: `canDropEvent` vetoes it live during the gesture, and the preview
+ * renders refused for as long as the pointer sits on a refused slot.
+ * `onEventMove` / `onEventResize` can also veto on release, by returning
+ * `false` or a promise that resolves `false` or rejects; that verdict is
+ * announced in the live region rather than styled, because by then the
+ * gesture is over and the preview is being discarded either way. The block's
+ * resting position always comes from `events`, so an accepted drop only moves
+ * anything because the consumer commits it. Nothing here mutates the event.
+ */
+export declare function useEventDrag({ columns, hourRowHeight, hourRange, snapMinutes, columnElements, onEventMove, onEventResize, canDropEvent, }: UseEventDragArgs): UseEventDragResult;