@nxgt/material 3.92.0 → 3.93.0

package/dist/lib/components/ui/layout/record-page/record-details.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { CardTitleElement } from '../../primitives/card/card.js';
 /** One « label date » segment of the meta line. */
 export type RecordDetailsStamp = {
@@ -7,8 +7,8 @@ export type RecordDetailsStamp = {
     /** The instant: a `Date`, an ISO string or a timestamp. */
     at: Date | string | number;
 };
-export type RecordDetailsProps = {
-    /** The card's heading. */
+export type RecordDetailsProps = Omit<ComponentProps<'div'>, 'title'> & {
+    /** The card's heading, set in `title-md` emphasized like a section title, whatever its level. */
     title?: ReactNode;
     /** The heading level of `title`, `'h2'` by default (under the page's `h1`). */
     titleAs?: CardTitleElement;
@@ -28,13 +28,13 @@ export type RecordDetailsProps = {
     maxColumns?: number;
     /** The `Description`s. */
     children?: ReactNode;
-    className?: string;
 };
 /**
  * RecordDetails - the record's facts as one card: a title and a status, the
  * `Description`s in a `DescriptionList` (one column in a side panel, up to
  * `maxColumns` once the panel is stacked and wide) and a muted
  * « Added on … · Updated on … » line under them, the dates written without
- * seconds in `timeZone`. Made for `RecordPage`'s `details`.
+ * seconds in `timeZone`. Made for `RecordPage`'s `details`. Any other `div`
+ * prop (`data-*`, `id`, `aria-*`, `className`) goes to the root.
  */
-export declare function RecordDetails({ title, titleAs, status, created, updated, timeZone, maxColumns, children, className, }: RecordDetailsProps): import("react").JSX.Element;
+export declare function RecordDetails({ title, titleAs, status, created, updated, timeZone, maxColumns, children, className, ...props }: RecordDetailsProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/backdrop.types.d.ts

@@ -0,0 +1,75 @@
+import { Tone } from '../../tones.js';
+import { CalendarEventBadge } from './types.js';
+/**
+ * A stretch of time the calendar shades behind its events, such as a holiday,
+ * a term, a closure or a half day off. It never blocks a slot: events can be
+ * made and dropped over it.
+ *
+ * `start` and `end` are ISO strings. A date-only value (`2026-12-25`) means
+ * whole days, read in the calendar's `timeZone`; `end` is always exclusive, so
+ * `2026-12-25` to `2026-12-26` is the single day of 25 December. A value with
+ * a time is an instant, which gives a half day (`2026-12-24T12:00:00` to
+ * `2026-12-25`).
+ */
+export type EventCalendarSpan = {
+    id: string;
+    start: string;
+    end: string;
+    label: string;
+    /** Default `'neutral'`. */
+    tone?: Tone;
+    /**
+     * The resource column the span belongs to. One with none shades every
+     * column; one with an unknown id shades none.
+     */
+    resourceId?: string;
+};
+/** The part of a span that falls on one day of the zone's calendar. */
+export type BackdropSegment = {
+    span: EventCalendarSpan;
+    /** The `YYYY-MM-DD` day. */
+    day: string;
+    /** Wall-clock minutes from midnight where the span starts on this day (0 for a whole day). */
+    fromMin: number;
+    /** Wall-clock minutes where it ends (1440 for a whole day or one running on). */
+    toMin: number;
+    /** The span covers the whole day, whatever its length (23 or 25 hours on a clock change). */
+    whole: boolean;
+};
+/** A span laid out as a bar over the day columns of the all-day strip. */
+export type BackdropLane = {
+    span: EventCalendarSpan;
+    /** The first column (day) of the bar. */
+    startCol: number;
+    /** The number of columns it covers. */
+    cols: number;
+    /** The lane (row) of the strip. */
+    row: number;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+};
+/** A label with a tone that marks a day or a week, keyed by date (`2026-12-24`). */
+export type EventCalendarBadges = Record<string, CalendarEventBadge>;
+/** The props that decorate the days: shaded spans and badges. */
+export type EventCalendarDayMarksProps = {
+    /**
+     * Stretches of time shaded behind the events (a holiday, a term, a half day
+     * off). They never block a slot, take no pointer event, and are read in the
+     * name of the day or column they fall on. Not a prop of `mode="template"`.
+     */
+    spans?: EventCalendarSpan[];
+    /**
+     * A badge on a day, keyed by its `YYYY-MM-DD` date (`{ '2026-12-24': { label:
+     * 'Eve', tone: 'info' } }`): in the day's header (week and day views) and
+     * next to its number (month). It is read in the name of the day. Not a prop of `mode="template"`, which has no dates. Where the
+     * room is short (a phone's week column or month cell) it becomes a short tone bar.
+     */
+    dayBadges?: EventCalendarBadges;
+    /**
+     * A badge on a week, keyed by the `YYYY-MM-DD` date of its first day, which
+     * follows `weekStartsOn` (Monday `2026-12-21` when weeks start on Monday). It
+     * is drawn in the time views' gutter corner and on the first cell of the
+     * month's row, and is read in that cell's name. Not a prop of `mode="template"`.
+     */
+    weekBadges?: EventCalendarBadges;
+};

package/dist/lib/components/ui/widgets/event-calendar/chrome.types.d.ts

@@ -0,0 +1,12 @@
+export type EventCalendarChromeState = {
+    focusedEventId: string | null;
+    query: string;
+    /** The way the last move went (-1 back, 1 forward): the view slides from it. */
+    direction: -1 | 0 | 1;
+    /** A view was picked in the switcher: `phoneView` no longer applies. */
+    viewPicked: boolean;
+    /** The keyboard moved the cursor: its day takes the focus once rendered. */
+    dayFocus: boolean;
+    /** The resource the phone's switcher shows; `null` is the first. */
+    resourceId: string | null;
+};

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-context.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { EventChipVariant } from '../../display/event-chip/event-chip.classes.js';
+import { EventCalendarBadges, EventCalendarSpan } from './backdrop.types.js';
 import { TemplateContext } from './template.types.js';
 import { CalendarEvent, EventCalendarPreviewField, EventCalendarRenderEvent, EventCalendarSlot, EventCalendarView } from './types.js';
 import { EventCalendarModel } from './use-event-calendar.js';
@@ -8,7 +9,13 @@ export type EventCalendarContextValue = EventCalendarModel & {
     sourceEvents?: CalendarEvent[];
     /** Set in `mode="template"`: the lanes, and the lane of each event. */
     template?: TemplateContext;
-    dragLabel: string;
+    /** The spans to shade behind the events (see `EventCalendarProps.spans`). */
+    spans?: EventCalendarSpan[];
+    /** Badges on days and on weeks (see `EventCalendarProps.dayBadges`). */
+    dayBadges?: EventCalendarBadges;
+    weekBadges?: EventCalendarBadges;
+    /** The hint that events can be dragged, read as the board's description; unset when they cannot (`readOnlyEvents`). */
+    dragHint?: string;
     searchable: boolean;
     /** The views the switcher offers. */
     views?: EventCalendarView[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-events.utils.d.ts

@@ -1,5 +1,5 @@
 import { closestCenter } from '@dnd-kit/core';
-import { CalendarEvent } from './types.js';
+import { CalendarEvent, CalendarEventBadge } from './types.js';
 export declare const calendarCollisionDetection: typeof closestCenter;
 export declare function snapToStep(date: Date, stepMinutes?: number): Date;
 /** `date` rounded to the nearest `stepMinutes` of the clock's epoch: right in a zone whose offset is a multiple of the step. */
@@ -15,3 +15,5 @@ export declare function moveEventToDay(event: CalendarEvent, day: Date): Calenda
 export declare function moveEventToDateTime(event: CalendarEvent, dateTime: Date, snap?: (date: Date) => Date): CalendarEvent;
 export declare function resizeEventEnd(event: CalendarEvent, end: Date, snap?: (date: Date) => Date): CalendarEvent;
 export declare function isToday(day: Date, now?: Date): boolean;
+/** Every badge of an event, `badge` first. */
+export declare function eventBadges(event: CalendarEvent): CalendarEventBadge[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-shell.d.ts

@@ -12,4 +12,4 @@ export type EventCalendarShellProps = EventCalendarProps & {
  * mini-month side panel and a phone layout of its own. Events are props; the
  * chrome (search, focus, the last move's direction) lives in a slice.
  */
-export declare function EventCalendarShell({ template, visible, onEventClick, onSlotClick, eventPreview, previewFields, onEventEdit, onEventDelete, className, renderEvent, toolbar, searchable, views, phoneView, sidebar, eventVariant, scrollToHour, ...options }: EventCalendarShellProps): import("react").JSX.Element;
+export declare function EventCalendarShell({ template, visible, onEventClick, onSlotClick, eventPreview, previewFields, onEventEdit, onEventDelete, className, renderEvent, toolbar, searchable, views, phoneView, sidebar, eventVariant, scrollToHour, spans, dayBadges, weekBadges, ...options }: EventCalendarShellProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.backdrop.d.ts

@@ -0,0 +1,38 @@
+import { BackdropLane, BackdropSegment, EventCalendarSpan } from './backdrop.types.js';
+/** Whether a span value is a date (`2026-12-25`): whole days, not an instant. */
+export declare function isDateOnly(value: string): boolean;
+/**
+ * The instants a span covers, `end` exclusive. A date-only value is the first
+ * instant of that day in the zone; a time with no offset (`2026-12-24T12:00`)
+ * is that wall-clock time in the zone; one with an offset or `Z` is the
+ * instant it names. A span
+ * with an invalid value, or that ends at or before its start, gives `null`.
+ */
+export declare function spanRange(span: EventCalendarSpan, timeZone?: string): {
+    start: Date;
+    end: Date;
+} | null;
+/**
+ * Whether a span shades a resource column. Without `resourceId` (no
+ * resources) every span counts; `null` is the unassigned column, which only
+ * the spans with no `resourceId` shade.
+ */
+export declare function spanMatchesResource(span: EventCalendarSpan, resourceId?: string | null): boolean;
+/**
+ * The part of a span on the zone's day `day`, or `null` when it does not touch
+ * it. The day runs from its first instant to the next day's, so on a clock
+ * change it is 23 or 25 hours long and a span over all of it is `whole`.
+ */
+export declare function spanOnDay(span: EventCalendarSpan, day: string, timeZone?: string): BackdropSegment | null;
+/**
+ * The spans on one day, for one resource column when given, in the order of
+ * `spans`. Spans never block anything: this only says what to draw.
+ */
+export declare function spansForDay(spans: EventCalendarSpan[] | undefined, day: string, timeZone?: string, resourceId?: string | null): BackdropSegment[];
+/**
+ * The all-day strip: each span as a bar over the consecutive `days` it covers
+ * wholly, put in the first lane with room (longest and earliest first). A
+ * span that only covers part of a day (a half day) has no bar: it is drawn as
+ * a band in the time grid, and by `spansForDay` in the month.
+ */
+export declare function layoutBackdropLanes(spans: EventCalendarSpan[] | undefined, days: string[], timeZone?: string, resourceId?: string | null): BackdropLane[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.badges.d.ts

@@ -0,0 +1,14 @@
+import { Locale } from 'date-fns';
+import { EventCalendarBadges } from './backdrop.types.js';
+import { CalendarEventBadge } from './types.js';
+type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** The badge set on a day, keyed by its `YYYY-MM-DD` date. */
+export declare function dayBadgeOf(dayBadges: EventCalendarBadges | undefined, day: Date): CalendarEventBadge | undefined;
+/**
+ * The key of the week a day falls in: the date of its first day, which follows
+ * `weekStartsOn` (the locale's when unset), whatever the view draws of it.
+ */
+export declare function weekBadgeKey(day: Date, locale?: Locale, weekStartsOn?: WeekStart): string;
+/** The badge set on the week a day falls in. */
+export declare function weekBadgeOf(weekBadges: EventCalendarBadges | undefined, day: Date, locale?: Locale, weekStartsOn?: WeekStart): CalendarEventBadge | undefined;
+export {};

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.labels.d.ts

@@ -1,5 +1,6 @@
 import { Locale } from 'date-fns';
-import { CalendarEvent } from './types.js';
+import { BackdropSegment } from './backdrop.types.js';
+import { CalendarEvent, CalendarEventBadge } from './types.js';
 /**
  * The times a chip or an agenda row shows. In a zone they are read from the
  * true instants with the zone's own clock (`wallOf`), never through the
@@ -10,9 +11,21 @@ export declare function eventTimes(drawn: CalendarEvent, source: CalendarEvent,
     time?: string;
     endTime?: string;
 };
+/**
+ * The accessible name of an event's group: its title, then its badge, then
+ * `cancelled` (the translated word) when its status says so.
+ */
+export declare function eventName(event: CalendarEvent, title: string, cancelled: string): string;
 /**
  * The range label of the popover, in the zone: the day is read at noon and
  * the time on a fixed day, so a wall time the browser's own clock skips never
  * shifts what is said.
  */
 export declare function zonedRangeLabel(event: CalendarEvent, locale: Locale, zone: string): string;
+/** A day's name with its spans' labels after it: the cell or the column reads them out, the shading is decoration. */
+export declare function nameWithSpans(date: string, segments: BackdropSegment[]): string;
+/** A day's name with its badges after it, for the cell or column that reads them out. */
+export declare function nameWithBadges(name: string, day: CalendarEventBadge | undefined, week: {
+    badge: CalendarEventBadge | undefined;
+    text: (label: string) => string;
+}): string;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.lanes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The lane (row) of each item, already in the order they should win a lane:
+ * the first lane with room over its columns, a new one when none has. An item
+ * covers `cols` columns from `startCol`; `columns` is the width of a lane.
+ */
+export declare function packLanes(items: {
+    startCol: number;
+    cols: number;
+}[], columns: number): number[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.read-only.d.ts

@@ -0,0 +1,57 @@
+import { CalendarEvent } from './types.js';
+/**
+ * What a read-only event's draggable wrapper must not say: dnd-kit marks it
+ * "draggable", points to its pick-up instructions and gives it a tab stop of
+ * its own. The chip's own button stays the one focusable, named control.
+ */
+export declare function readOnlyDragProps(readOnly: boolean): {
+    readonly 'aria-roledescription': undefined;
+    readonly 'aria-describedby': undefined;
+    readonly 'aria-disabled': undefined;
+    readonly tabIndex: undefined;
+} | {
+    readonly 'aria-roledescription'?: undefined;
+    'aria-describedby'?: undefined;
+    readonly 'aria-disabled'?: undefined;
+    readonly tabIndex?: undefined;
+};
+/**
+ * The props of an event's draggable wrapper (`Draggable`), the same in the
+ * time grid, the all-day strip and the month's overflow list: its drag
+ * switches (off with `disabled`, `readOnlyEvents` or the event's own
+ * `disabled`), a named group in place of dnd-kit's `button` (which would hold
+ * the chip's own button), and the focus that follows the event.
+ */
+export declare function useEventDragProps(event: CalendarEvent, title: string): {
+    readonly role: "group";
+    readonly 'aria-label': string;
+    readonly onFocus: () => void;
+    readonly onClick: (click: {
+        stopPropagation: () => void;
+    }) => void;
+    readonly 'aria-roledescription': undefined;
+    readonly 'aria-describedby': undefined;
+    readonly 'aria-disabled': undefined;
+    readonly tabIndex: undefined;
+    readonly id: string;
+    readonly data: {
+        readonly type: "event";
+    };
+    readonly disabled: boolean;
+} | {
+    readonly role: "group";
+    readonly 'aria-label': string;
+    readonly onFocus: () => void;
+    readonly onClick: (click: {
+        stopPropagation: () => void;
+    }) => void;
+    readonly 'aria-roledescription'?: undefined;
+    readonly 'aria-describedby'?: undefined;
+    readonly 'aria-disabled'?: undefined;
+    readonly tabIndex?: undefined;
+    readonly id: string;
+    readonly data: {
+        readonly type: "event";
+    };
+    readonly disabled: boolean;
+};

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.resources.d.ts

@@ -24,7 +24,12 @@ export declare function withColumn(event: CalendarEvent, column: string | null):
 export declare function columnKey(column: ResourceColumn): string;
 /** The resource an event belongs to; none when it has none or an unknown one. */
 export declare function ownerOf(event: CalendarEvent, resources?: EventCalendarResource[]): EventCalendarResource | undefined;
-/** The event drawn in its resource's tone when it sets no colour of its own. */
+/** The tone an event is drawn in: its own, else its resource's. */
+export declare function toneOf(event: CalendarEvent, owner?: EventCalendarResource): Tone | undefined;
+/**
+ * The event drawn in its tone when it sets no colour of its own: its `color`
+ * wins, then its `tone`, then its resource's.
+ */
 export declare function withOwnerTone(event: CalendarEvent, owner?: EventCalendarResource): CalendarEvent;
 /**
  * The column an event is dropped into, or the event itself when it is already

package/dist/lib/components/ui/widgets/event-calendar/index.d.ts

@@ -1,6 +1,7 @@
+export type { EventCalendarBadges, EventCalendarDayMarksProps, EventCalendarSpan, } from './backdrop.types.js';
 export type { EventCalendarProps } from './event-calendar.js';
 export { EventCalendar } from './event-calendar.js';
 export { EventCalendarProvider, useEventCalendarContext, } from './event-calendar-context.js';
 export type { EventCalendarLane, EventCalendarTemplateChange, EventCalendarTemplateEvent, EventCalendarTemplateProps, EventCalendarTemplateSlot, EventCalendarWeekday, } from './template.types.js';
-export type { CalendarEvent, CalendarEventBadge, EventCalendarChange, EventCalendarDensity, EventCalendarPreviewField, EventCalendarRenderEvent, EventCalendarResource, EventCalendarSlot, EventCalendarView, } from './types.js';
+export type { CalendarEvent, CalendarEventBadge, CalendarEventStatus, EventCalendarChange, EventCalendarDensity, EventCalendarPreviewField, EventCalendarRenderEvent, EventCalendarResource, EventCalendarSlot, EventCalendarView, } from './types.js';
 export { useEventCalendar } from './use-event-calendar.js';

package/dist/lib/components/ui/widgets/event-calendar/partials/all-day-bars.d.ts

@@ -0,0 +1,14 @@
+import { BackdropLane } from '../backdrop.types.js';
+import { SpanSegment } from '../event-calendar.spans.js';
+/**
+ * What the all-day strip draws: the backdrop spans as bars in the rows on
+ * top, then the multi-day events below them.
+ */
+export declare function AllDayBars({ days, segments, backdrop, }: {
+    days: Date[];
+    segments: SpanSegment[];
+    backdrop: {
+        lanes: BackdropLane[];
+        rows: number;
+    };
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-bands.d.ts

@@ -0,0 +1,11 @@
+import { BackdropSegment } from '../backdrop.types.js';
+import { DayAxis } from '../event-calendar.axis.js';
+/**
+ * The spans of one column of hours: a hatched band under the events (z-0)
+ * with its label at the top. Decoration only: `aria-hidden`, no pointer
+ * events, no tab stop; the column's name carries the text.
+ */
+export declare function BackdropBands({ segments, axis, }: {
+    segments: BackdropSegment[];
+    axis: DayAxis;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-bar.d.ts

@@ -0,0 +1,11 @@
+import { BackdropLane } from '../backdrop.types.js';
+/**
+ * A whole-day span as a bar of the all-day strip, in the rows above the
+ * events. Decoration: `aria-hidden`, no pointer events (a click reaches the
+ * day under it).
+ */
+export declare function BackdropBar({ lane, showLabel, }: {
+    lane: BackdropLane;
+    /** False where the columns are too narrow for a label (a phone's week). */
+    showLabel?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-cell.d.ts

@@ -0,0 +1,13 @@
+import { BackdropSegment } from '../backdrop.types.js';
+/**
+ * The spans of a month cell: the cell shaded (a half day shades its half),
+ * the label in its top corner from 7rem of cell width, and under that a dot.
+ * Decoration: `aria-hidden`, no pointer events; the cell's name carries the
+ * text. The cell is the `day` container and an `isolate` stacking context, so
+ * the shading sits under its content.
+ */
+export declare function BackdropCell({ segments, below, }: {
+    segments: BackdropSegment[];
+    /** The labels sit at the cell's foot: its day badge takes the top row. */
+    below?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-row.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The spans of a day in the agenda and the phone's day list: a hatched row
+ * with the label, ahead of the events. It is text, not a control: no pointer
+ * events (a click reaches the day) and no tab stop.
+ */
+export declare function BackdropRow({ day }: {
+    day: Date;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-badge.d.ts

@@ -0,0 +1,16 @@
+import { CalendarEventBadge } from '../types.js';
+/**
+ * A day's or a week's badge: a small soft pill, or with `dot` (where the room
+ * is short, such as a phone's column) a short tone bar whose label is its tooltip
+ * and, hidden visually, its text. The container that names it (a button, a
+ * cell) holds the label in its own name.
+ */
+export declare function CalendarBadge({ badge, slot, dot, wrap, className, }: {
+    badge: CalendarEventBadge;
+    /** The `data-slot` of the pill; the dot adds `-dot`. */
+    slot: string;
+    dot?: boolean;
+    /** The label may take two lines instead of one clipped (a narrow corner). */
+    wrap?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/month-day-cell.d.ts

@@ -1,5 +1,6 @@
 import { MutableRefObject } from 'react';
-export declare function MonthDayCell({ day, month, draft, draggedRef, }: {
+import { CalendarEventBadge } from '../types.js';
+export declare function MonthDayCell({ day, month, draft, draggedRef, weekBadge, }: {
     day: Date;
     month: Date;
     draft: {
@@ -7,4 +8,6 @@ export declare function MonthDayCell({ day, month, draft, draggedRef, }: {
         to: Date;
     } | null;
     draggedRef: MutableRefObject<boolean>;
+    /** The week's badge, given to the first cell of the row. */
+    weekBadge?: CalendarEventBadge;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/month-day-parts.d.ts

@@ -1,4 +1,4 @@
-import { CalendarEvent } from '../types.js';
+import { CalendarEvent, CalendarEventBadge } from '../types.js';
 /** The day number in a month cell: a filled disc today, a ring on the phone's chosen day. */
 export declare function MonthDayNumber({ day, isToday, isCursor, outside, }: {
     day: Date;
@@ -10,3 +10,14 @@ export declare function MonthDayNumber({ day, isToday, isCursor, outside, }: {
 export declare function MonthDayDots({ items }: {
     items: CalendarEvent[];
 }): import("react").JSX.Element;
+/**
+ * The day number with the day's badge: a pill beside it, or on a phone (where
+ * the cell has no room) a tone dot in the cell's top corner.
+ */
+export declare function MonthDayTop({ badge, ...number }: React.ComponentProps<typeof MonthDayNumber> & {
+    badge?: CalendarEventBadge;
+}): import("react").JSX.Element;
+/** The week's badge on the first cell of a row: a pill along its foot, or a dot on a phone. */
+export declare function MonthWeekBadge({ badge }: {
+    badge: CalendarEventBadge;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/resource-header.d.ts

@@ -5,7 +5,8 @@ import { ResourceColumn } from '../event-calendar.resources.js';
  * column, its label and description. It stays above the hours while they
  * scroll, and the gutter's corner names the zone's offset when there is one.
  */
-export declare function ResourceHeader({ columns, zoneLabel, zone, }: {
+export declare function ResourceHeader({ day, columns, zoneLabel, zone, }: {
+    day: Date;
     columns: ResourceColumn[];
     zoneLabel?: ReactNode;
     zone?: string;

package/dist/lib/components/ui/widgets/event-calendar/partials/span-event.d.ts

@@ -1,4 +1,6 @@
 import { SpanSegment } from '../event-calendar.spans.js';
-export declare function SpanEvent({ segment }: {
+export declare function SpanEvent({ segment, rowOffset, }: {
     segment: SpanSegment;
+    /** Rows above it taken by the backdrop spans of the all-day strip. */
+    rowOffset?: number;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/time-grid-header-day.d.ts

@@ -1,9 +1,6 @@
-/**
- * One day of the grid's header: the weekday and a large date, today's filled.
- * With `canOpen` (a week that offers the day view) it is a button that opens
- * that day.
- */
-export declare function HeaderDay({ day, canOpen }: {
+export declare function HeaderDay({ day, canOpen, dot, }: {
     day: Date;
     canOpen: boolean;
+    /** The day's badge is a tone dot, for a column too narrow for its pill. */
+    dot?: boolean;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/zone-corner.d.ts

@@ -1,10 +1,18 @@
 import { ReactNode } from 'react';
+import { CalendarEventBadge } from '../types.js';
 /**
  * The gutter's corner above the hours: it names the zone's offset (`UTC+1`)
- * when the calendar has a `timeZone`, and stays an empty cell otherwise.
+ * when the calendar has a `timeZone`, carries the week's badge, and stays an
+ * empty cell otherwise. The badges are tone dots where the gutter is narrow
+ * (a phone).
  */
-export declare function ZoneCorner({ zoneLabel, zone, className, }: {
+export declare function ZoneCorner({ zoneLabel, zone, badges, className, }: {
     zoneLabel?: ReactNode;
     zone?: string;
+    /** The week's badge, and in a day view with resources the day's. */
+    badges?: {
+        badge: CalendarEventBadge;
+        slot: string;
+    }[];
     className?: string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/template.types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { EventCalendarProps } from './types.js';
+import { Tone } from '../../tones.js';
+import { CalendarEventStatus, EventCalendarProps } from './types.js';
 /** ISO weekday: 1 is Monday, 7 is Sunday. */
 export type EventCalendarWeekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 /**
@@ -15,6 +16,10 @@ export type EventCalendarTemplateEvent = {
     /** The alternating week it belongs to (an `EventCalendarLane` id); none: every week. */
     lane?: string;
     color?: string;
+    /** A tone the event is drawn in: `color` wins over it. */
+    tone?: Tone;
+    /** `'cancelled'`: struck through, muted and named so. */
+    status?: CalendarEventStatus;
     description?: string;
     disabled?: boolean;
 };
@@ -41,7 +46,7 @@ export type EventCalendarTemplateChange = {
  * slots and changes are keyed by weekday and time. The month, day and agenda
  * views do not apply: `view` is `week` (the default) or `workweek`.
  */
-export type EventCalendarTemplateProps = Pick<EventCalendarProps, 'disabled' | 'className' | 'toolbar' | 'searchable' | 'density' | 'eventVariant' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'scrollToHour' | 'eventPreview' | 'previewFields'> & {
+export type EventCalendarTemplateProps = Pick<EventCalendarProps, 'disabled' | 'readOnlyEvents' | 'className' | 'toolbar' | 'searchable' | 'density' | 'eventVariant' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'scrollToHour' | 'eventPreview' | 'previewFields'> & {
     mode: 'template';
     events?: EventCalendarTemplateEvent[];
     defaultEvents?: EventCalendarTemplateEvent[];

package/dist/lib/components/ui/widgets/event-calendar/types.d.ts

@@ -2,7 +2,10 @@ import { ReactNode } from 'react';
 import { EventChipBadge } from '../../display/event-chip/event-chip.js';
 import { EventChipVariant } from '../../display/event-chip/event-chip.classes.js';
 import { Tone } from '../../tones.js';
+import { EventCalendarDayMarksProps } from './backdrop.types.js';
 export type EventCalendarView = 'month' | 'week' | 'workweek' | 'day' | 'agenda';
+/** Whether an event takes place: `cancelled` is drawn struck through and muted, and named so. */
+export type CalendarEventStatus = 'scheduled' | 'cancelled';
 export type CalendarEvent = {
     id: string;
     title: string;
@@ -25,6 +28,19 @@ export type CalendarEvent = {
      * box is too small it is hidden visually and still read.
      */
     badge?: CalendarEventBadge;
+    /**
+     * Further badges, drawn after `badge` in the same places (a status, then a
+     * priority and a progress count). Each is part of the accessible name and
+     * becomes a tone dot where the box is narrow or short.
+     */
+    badges?: CalendarEventBadge[];
+    /**
+     * A tone of the library (`'success'`, or one an app declared) the event is
+     * drawn in. Colour precedence: `color`, then `tone`, then the resource's.
+     */
+    tone?: Tone;
+    /** `'cancelled'` strikes the title, mutes the chip and adds "Cancelled" to its name; it stays draggable. */
+    status?: CalendarEventStatus;
 };
 export type CalendarEventBadge = EventChipBadge;
 /** A column of the day view: a room, a person, a team. */
@@ -53,18 +69,7 @@ export type EventCalendarSlot = {
 };
 /** `comfortable` (the default) or `compact`: shorter hours and month cells. */
 export type EventCalendarDensity = 'comfortable' | 'compact';
-export type EventCalendarChromeState = {
-    focusedEventId: string | null;
-    query: string;
-    /** The way the last move went (-1 back, 1 forward): the view slides from it. */
-    direction: -1 | 0 | 1;
-    /** A view was picked in the switcher: `phoneView` no longer applies. */
-    viewPicked: boolean;
-    /** The keyboard moved the cursor: its day takes the focus once rendered. */
-    dayFocus: boolean;
-    /** The resource the phone's switcher shows; `null` is the first. */
-    resourceId: string | null;
-};
+export type { EventCalendarChromeState } from './chrome.types.js';
 /** A field of the event preview popover. */
 export type EventCalendarPreviewField = 'title' | 'color' | 'description';
 export type EventCalendarRenderEvent = (event: CalendarEvent) => ReactNode;
@@ -107,6 +112,13 @@ export type EventCalendarProps = {
     hourHeight?: number;
     slotDurationMinutes?: number;
     disabled?: boolean;
+    /**
+     * No event can be dragged, resized, moved by key, edited or deleted, yet
+     * each stays focusable, clickable and at full strength; `onSlotClick` still
+     * fires. Not `disabled` (the whole calendar) nor `CalendarEvent.disabled`
+     * (dims one event, swallows its clicks). Default `false`.
+     */
+    readOnlyEvents?: boolean;
     className?: string;
     renderEvent?: EventCalendarRenderEvent;
     toolbar?: ReactNode;
@@ -147,7 +159,7 @@ export type EventCalendarProps = {
      * development). Without it, the machine's clock.
      */
     timeZone?: string;
-};
+} & EventCalendarDayMarksProps;
 export type LaidOutEvent = {
     event: CalendarEvent;
     column: number;

package/dist/lib/components/ui/widgets/event-calendar/use-backdrops.d.ts

@@ -0,0 +1,8 @@
+import { BackdropLane, BackdropSegment } from './backdrop.types.js';
+/** The spans on one day (of one resource column, when given), for the view to shade. */
+export declare function useDaySpans(day: Date, resourceId?: string | null): BackdropSegment[];
+/** The whole-day spans as bars over `days`, and the rows they take above the events. */
+export declare function useBackdropLanes(days: Date[], resourceId?: string | null): {
+    lanes: BackdropLane[];
+    rows: number;
+};

package/dist/lib/components/ui/widgets/event-calendar/use-badges.d.ts

@@ -0,0 +1,5 @@
+import { CalendarEventBadge } from './types.js';
+/** The badge set on a day (`dayBadges`), if any. */
+export declare function useDayBadge(day: Date): CalendarEventBadge | undefined;
+/** The badge set on the week a day falls in (`weekBadges`, keyed by the week's first day). */
+export declare function useWeekBadge(day: Date): CalendarEventBadge | undefined;