@mintplayer/ng-bootstrap 21.30.0 → 21.31.0

package/fesm2022/mintplayer-ng-bootstrap-web-components-scheduler.mjs

@@ -1,4 +1,5 @@
 import { unsafeCSS, LitElement, html } from 'lit';
+import { LiveAnnouncerController } from '@mintplayer/ng-bootstrap/web-components/a11y';
 import { DEFAULT_OPTIONS, dateService, timelineService, getContrastColor, resourceService, isResourceGroup, isResource, generateEventId } from '@mintplayer/ng-bootstrap/web-components/scheduler-core';
 
 /**
@@ -20,6 +21,13 @@ function createInitialState(options = {}) {
         collapsedGroups: new Set(),
         isMouseDown: false,
         isLoading: false,
+        focusedCell: null,
+        focusedResourceId: null,
+        selectionAnchor: null,
+        selectionExtent: null,
+        selectionResourceId: null,
+        keyboardMoveEventId: null,
+        focusedDate: null,
     };
 }
 /**
@@ -252,8 +260,154 @@ class SchedulerStateManager {
     gotoDate(date) {
         this.setState({ date });
     }
+    /**
+     * Move the keyboard focus to a cell. Setting `clearSelection` (default)
+     * also drops any active range selection — used for plain Arrow nav, where
+     * Shift would have stayed held to keep the range alive.
+     */
+    setFocusedCell(cell, resourceId = null, clearSelection = true) {
+        if (clearSelection) {
+            this.setState({
+                focusedCell: cell,
+                focusedResourceId: resourceId,
+                selectionAnchor: null,
+                selectionExtent: null,
+                selectionResourceId: null,
+            });
+        }
+        else {
+            this.setState({
+                focusedCell: cell,
+                focusedResourceId: resourceId,
+            });
+        }
+    }
+    /**
+     * Begin or extend a range selection. Anchor is set on first call (when
+     * Shift is first held), pinned at the *previously-focused* cell. Extent
+     * moves with each subsequent Shift+Arrow.
+     */
+    extendSelection(extent, resourceId = null) {
+        this.setState((state) => {
+            const anchor = state.selectionAnchor ?? state.focusedCell ?? extent;
+            const pinnedResource = state.selectionResourceId ?? state.focusedResourceId ?? resourceId;
+            return {
+                selectionAnchor: anchor,
+                selectionExtent: extent,
+                selectionResourceId: pinnedResource,
+            };
+        });
+    }
+    /**
+     * Clear any active range selection without touching the focused cell.
+     */
+    clearSelection() {
+        this.setState({
+            selectionAnchor: null,
+            selectionExtent: null,
+            selectionResourceId: null,
+        });
+    }
+    /**
+     * Move the keyboard focus to a calendar date — used by month and year views
+     * (PRD scheduler-controlled-selection §5). Pass `null` to clear.
+     */
+    setFocusedDate(date) {
+        this.setState({ focusedDate: date });
+    }
 }
 
+/**
+ * Build the descriptive aria-label for an event block. Used by every view.
+ * Format: "{title}, {start}–{end} on {resource}". Resource is omitted when
+ * the event has no resource or the caller doesn't have it (week/day views).
+ */
+function formatEventAriaLabel(event, resourceTitle, timeFormat = '24h') {
+    const start = dateService.formatTime(event.start, timeFormat);
+    const end = dateService.formatTime(event.end, timeFormat);
+    const day = event.start.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' });
+    const parts = [`${event.title}, ${start}–${end}`, day];
+    if (resourceTitle)
+        parts.push(`on ${resourceTitle}`);
+    return parts.join(', ');
+}
+/**
+ * Normalised selection range — covers anchor.start through extent.end (or
+ * the reverse if the user shift-arrowed backwards), with the resource pinned
+ * at the anchor (timeline only).
+ */
+function selectionRange(state) {
+    const { selectionAnchor, selectionExtent, selectionResourceId } = state;
+    if (!selectionAnchor || !selectionExtent)
+        return null;
+    const startTime = Math.min(selectionAnchor.start.getTime(), selectionExtent.start.getTime());
+    const endTime = Math.max(selectionAnchor.end.getTime(), selectionExtent.end.getTime());
+    return {
+        start: new Date(startTime),
+        end: new Date(endTime),
+        resourceId: selectionResourceId,
+    };
+}
+/**
+ * Whether a slot's [start, end) interval intersects the active selection range.
+ * Used by every time-grid view to drive the `.selected` / aria-selected styling
+ * on slot DOM. Cross-day spans (D1) light up naturally because intersection
+ * holds for every slot inside the linear time-range.
+ */
+function isSlotInSelection(slot, state, resourceId = null) {
+    const range = selectionRange(state);
+    if (!range)
+        return false;
+    if (range.resourceId && resourceId && range.resourceId !== resourceId)
+        return false;
+    return slot.start.getTime() < range.end.getTime() && slot.end.getTime() > range.start.getTime();
+}
+/**
+ * Live-region announcement for a focused cell. Read after each Arrow nav.
+ * Includes weekday + date so screen readers don't lose the user across
+ * cross-day moves.
+ */
+function formatCellAnnouncement(slot, timeFormat = '24h', resourceTitle = null) {
+    const day = slot.start.toLocaleDateString(undefined, {
+        weekday: 'long',
+        month: 'short',
+        day: 'numeric',
+    });
+    const time = dateService.formatTime(slot.start, timeFormat);
+    const parts = [`${day}, ${time}`];
+    if (resourceTitle)
+        parts.push(resourceTitle);
+    return parts.join(', ');
+}
+/**
+ * Live-region announcement after Shift+Arrow grows or shrinks the range.
+ * Reads "Selection: {start time, day} to {end time, day}, {N} slots".
+ */
+function formatSelectionAnnouncement(state, slotDuration, timeFormat = '24h') {
+    const range = selectionRange(state);
+    if (!range)
+        return '';
+    const startStr = `${dateService.formatTime(range.start, timeFormat)} ${range.start.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })}`;
+    const endStr = `${dateService.formatTime(range.end, timeFormat)} ${range.end.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })}`;
+    const slotMs = slotDuration * 1000;
+    const slotCount = Math.max(1, Math.round((range.end.getTime() - range.start.getTime()) / slotMs));
+    return `Selection: ${startStr} to ${endStr}, ${slotCount} slot${slotCount === 1 ? '' : 's'}`;
+}
+/**
+ * Live-region announcement for an in-progress keyboard event move.
+ */
+function formatMoveAnnouncement(start, end, timeFormat = '24h') {
+    const day = start.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+    return `Moved to ${dateService.formatTime(start, timeFormat)}–${dateService.formatTime(end, timeFormat)}, ${day}`;
+}
+/**
+ * Live-region announcement for an in-progress keyboard event resize. The
+ * `edge` field tells the user which side they're stretching, so they can
+ * tell Shift+ArrowDown (end edge) from Alt+Shift+ArrowDown (start edge).
+ */
+function formatResizeAnnouncement(start, end, edge, timeFormat = '24h') {
+    return `Resized ${edge} edge to ${dateService.formatTime(start, timeFormat)}–${dateService.formatTime(end, timeFormat)}`;
+}
 /**
  * Base class for scheduler views
  */
@@ -305,21 +459,47 @@ class BaseView {
  * Year view renderer
  */
 class YearView extends BaseView {
+    constructor() {
+        super(...arguments);
+        /** Cache of `.scheduler-year-month` cards keyed by `YYYY-MM`. */
+        this.monthCards = new Map();
+    }
     render() {
         this.clearContainer();
         this.container.classList.add('scheduler-year-view');
         const { date, options } = this.state;
         const months = dateService.getYearMonths(date);
         const grid = this.createElement('div', 'scheduler-year-grid');
+        this.monthCards.clear();
         for (const month of months) {
             const monthEl = this.createMonthCard(month);
             grid.appendChild(monthEl);
         }
         this.container.appendChild(grid);
+        // Phase B: apply roving tabindex once cards are in place.
+        this.updateMonthCardFocus();
+    }
+    /**
+     * Build a `YYYY-MM` key from a Date, which is the unit of focus on year
+     * view (PRD scheduler-controlled-selection §5.2 — year cells are months,
+     * not days).
+     */
+    static monthKey(d) {
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
     }
     createMonthCard(month) {
         const { events, options } = this.state;
         const card = this.createElement('div', 'scheduler-year-month');
+        // Phase B keyboard nav: the *card* is the focusable cell on year view —
+        // not the inner day cells, which stay non-tabbable so screen readers
+        // describe months, not days.
+        const monthKey = YearView.monthKey(month);
+        card.setAttribute('role', 'gridcell');
+        card.setAttribute('tabindex', '-1');
+        card.setAttribute('aria-selected', 'false');
+        card.id = `scheduler-cell-y-${monthKey}`;
+        this.setData(card, { month: month.toISOString() });
+        this.monthCards.set(monthKey, card);
         // Month header
         const header = this.createElement('div', 'scheduler-year-month-header');
         header.textContent = dateService.getMonthName(month, options.locale);
@@ -372,12 +552,39 @@ class YearView extends BaseView {
         card.appendChild(miniMonth);
         return card;
     }
+    /**
+     * Apply roving tabindex based on `state.focusedDate`'s month. Year-view's
+     * focus unit is a month, so we strip down `focusedDate` to its `YYYY-MM`
+     * key. Falls back to the displayed year's first month if no focus yet.
+     */
+    updateMonthCardFocus() {
+        const focused = this.state.focusedDate;
+        let promoted = false;
+        const focusedKey = focused ? YearView.monthKey(focused) : null;
+        for (const [key, card] of this.monthCards) {
+            const isFocused = key === focusedKey;
+            card.setAttribute('tabindex', isFocused ? '0' : '-1');
+            card.setAttribute('aria-selected', isFocused ? 'true' : 'false');
+            if (isFocused)
+                promoted = true;
+        }
+        if (!promoted) {
+            this.monthCards.values().next().value?.setAttribute('tabindex', '0');
+        }
+    }
     update(state) {
+        const yearChanged = this.state.date.getFullYear() !== state.date.getFullYear();
         this.state = state;
-        // Year view is mostly static, re-render fully
-        this.render();
+        if (yearChanged) {
+            this.render();
+            return;
+        }
+        // Same year displayed — pick up focused-date changes without re-rendering
+        // the whole grid (avoids losing focus mid-keypress).
+        this.updateMonthCardFocus();
     }
     destroy() {
+        this.monthCards.clear();
         this.clearContainer();
     }
 }
@@ -415,6 +622,17 @@ class MonthView extends BaseView {
         this.container.appendChild(grid);
         // Render events
         this.renderEvents();
+        // Apply roving tabindex now that all cells are in place.
+        this.updateDayCellFocus();
+    }
+    /**
+     * Build a `YYYY-MM-DD` key from a Date using *local* components. Using
+     * `toISOString()` here would shift the key in any non-UTC timezone (a
+     * local midnight on May 12 in CEST is May 11 22:00 UTC), and the resulting
+     * cell IDs would not match the visible day numbers.
+     */
+    static dayKey(d) {
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
     }
     createDayCell(day) {
         const { date } = this.state;
@@ -425,6 +643,14 @@ class MonthView extends BaseView {
         if (dateService.isToday(day)) {
             cell.classList.add('today');
         }
+        // Phase B keyboard nav: each day cell is a roving-tabindex `gridcell`
+        // with a stable id keyed off the local ISO date. `updateDayCellFocus()`
+        // picks the focused cell out of the cache and promotes its tabindex to 0.
+        const key = MonthView.dayKey(day);
+        cell.setAttribute('role', 'gridcell');
+        cell.setAttribute('tabindex', '-1');
+        cell.setAttribute('aria-selected', 'false');
+        cell.id = `scheduler-cell-m-${key}`;
         // Day number
         const dayNumber = this.createElement('div', 'day-number');
         dayNumber.textContent = String(day.getDate());
@@ -433,11 +659,36 @@ class MonthView extends BaseView {
         const eventsContainer = this.createElement('div', 'month-events');
         cell.appendChild(eventsContainer);
         // Store reference
-        const key = day.toISOString().split('T')[0];
         this.dayCells.set(key, cell);
         this.setData(cell, { date: key });
         return cell;
     }
+    /**
+     * Apply roving tabindex based on `state.focusedDate`. The grid must always
+     * have exactly one tab-reachable cell, so when no date is focused yet we
+     * fall back to today (if visible) or the first day of the displayed month.
+     */
+    updateDayCellFocus() {
+        const focused = this.state.focusedDate;
+        let promoted = false;
+        const focusedKey = focused ? MonthView.dayKey(focused) : null;
+        for (const [key, cell] of this.dayCells) {
+            const isFocused = key === focusedKey;
+            cell.setAttribute('tabindex', isFocused ? '0' : '-1');
+            cell.setAttribute('aria-selected', isFocused ? 'true' : 'false');
+            if (isFocused)
+                promoted = true;
+        }
+        if (!promoted) {
+            // Fallback: today's cell if it's in the displayed month, else the first
+            // cell that belongs to the displayed month (skip leading other-month
+            // spillover).
+            const fallback = Array.from(this.dayCells.values()).find((c) => c.classList.contains('today') && !c.classList.contains('other-month')) ||
+                Array.from(this.dayCells.values()).find((c) => !c.classList.contains('other-month')) ||
+                this.dayCells.values().next().value;
+            fallback?.setAttribute('tabindex', '0');
+        }
+    }
     renderEvents() {
         const { date, events, options } = this.state;
         const monthStart = dateService.getMonthStart(date);
@@ -458,7 +709,7 @@ class MonthView extends BaseView {
             const current = new Date(eventStart);
             current.setHours(0, 0, 0, 0);
             while (current <= eventEnd) {
-                const key = current.toISOString().split('T')[0];
+                const key = MonthView.dayKey(current);
                 if (!eventsByDay.has(key)) {
                     eventsByDay.set(key, []);
                 }
@@ -508,6 +759,8 @@ class MonthView extends BaseView {
             return;
         }
         this.renderEvents();
+        // Pick up focused-date changes that don't require a re-render (within month).
+        this.updateDayCellFocus();
     }
     optionsRequireRerender(oldOpts, newOpts) {
         return oldOpts.firstDayOfWeek !== newOpts.firstDayOfWeek ||
@@ -581,6 +834,10 @@ class WeekView extends BaseView {
                 const slotEnd = new Date(day);
                 slotEnd.setHours(slotTemplate.end.getHours(), slotTemplate.end.getMinutes(), 0, 0);
                 const slotEl = this.createElement('div', 'scheduler-time-slot');
+                slotEl.setAttribute('role', 'gridcell');
+                slotEl.setAttribute('tabindex', '-1');
+                slotEl.setAttribute('aria-selected', 'false');
+                slotEl.id = `scheduler-cell-w-${dayIndex}-${slotIndex}`;
                 this.setData(slotEl, {
                     dayIndex,
                     slotIndex,
@@ -601,6 +858,8 @@ class WeekView extends BaseView {
         this.container.appendChild(timeGrid);
         // Render events
         this.renderEvents();
+        // Reflect any pre-existing focused cell / selection (e.g. after view switch).
+        this.updateCellFocusAndSelection();
         // Render now indicator
         this.renderNowIndicator(days, slots);
     }
@@ -623,9 +882,44 @@ class WeekView extends BaseView {
         else {
             this.renderEvents();
         }
+        // Reflect focusedCell + selection range into per-slot ARIA + tabindex.
+        this.updateCellFocusAndSelection();
         // Render preview event
         this.renderPreviewEvent();
     }
+    /**
+     * Apply roving tabindex and aria-selected to each cached slot element. Also
+     * toggles the `.selected` class so the existing `.scheduler-time-slot.selected`
+     * styling lights up cells in the keyboard-driven range. A linear time-range
+     * selection (PRD D1) lights up every slot whose [start, end) intersects
+     * the range, including across day boundaries on week view.
+     */
+    updateCellFocusAndSelection() {
+        const focused = this.state.focusedCell;
+        let foundFocused = false;
+        let firstEl = null;
+        for (const [, slotEl] of this.slotElements) {
+            if (!firstEl)
+                firstEl = slotEl;
+            const startStr = slotEl.dataset['start'];
+            const endStr = slotEl.dataset['end'];
+            if (!startStr || !endStr)
+                continue;
+            const slot = { start: new Date(startStr), end: new Date(endStr) };
+            const isFocused = !!focused && slot.start.getTime() === focused.start.getTime();
+            slotEl.setAttribute('tabindex', isFocused ? '0' : '-1');
+            const inSelection = isSlotInSelection(slot, this.state, null);
+            slotEl.setAttribute('aria-selected', inSelection ? 'true' : 'false');
+            slotEl.classList.toggle('selected', inSelection);
+            if (isFocused)
+                foundFocused = true;
+        }
+        // Grid must be Tab-reachable: if focusedCell hasn't been set yet (first
+        // mount, or focused cell isn't visible after a date change), fall back
+        // to the top-left cell so Tab from the header lands somewhere.
+        if (!foundFocused && firstEl)
+            firstEl.setAttribute('tabindex', '0');
+    }
     optionsRequireRerender(oldOpts, newOpts) {
         return oldOpts.slotDuration !== newOpts.slotDuration ||
             oldOpts.timeFormat !== newOpts.timeFormat ||
@@ -674,8 +968,17 @@ class WeekView extends BaseView {
     createEventElement(part, trackIndex, totalTracks, colspan, slotDuration) {
         const event = part.event;
         const eventEl = this.createElement('div', 'scheduler-event');
-        // Mark as selected if this is the selected event
-        if (this.state.selectedEvent?.id === event.id) {
+        const isSelected = this.state.selectedEvent?.id === event.id;
+        const inMoveMode = this.state.keyboardMoveEventId === event.id;
+        eventEl.setAttribute('role', 'button');
+        // Every event is in the Tab order (PRD §6.1) — Tab cycles through events
+        // in document order. Selected event still gets aria-current for SR cue.
+        eventEl.setAttribute('tabindex', '0');
+        eventEl.setAttribute('aria-label', formatEventAriaLabel(event, null, this.state.options.timeFormat));
+        if (inMoveMode)
+            eventEl.setAttribute('aria-pressed', 'true');
+        if (isSelected) {
+            eventEl.setAttribute('aria-current', 'true');
             eventEl.classList.add('selected');
         }
         // Calculate position
@@ -903,6 +1206,10 @@ class DayView extends BaseView {
         for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
             const slot = slots[slotIndex];
             const slotEl = this.createElement('div', 'scheduler-time-slot');
+            slotEl.setAttribute('role', 'gridcell');
+            slotEl.setAttribute('tabindex', '-1');
+            slotEl.setAttribute('aria-selected', 'false');
+            slotEl.id = `scheduler-cell-d-${slotIndex}`;
             this.setData(slotEl, {
                 slotIndex,
                 start: slot.start.toISOString(),
@@ -919,11 +1226,41 @@ class DayView extends BaseView {
         this.container.appendChild(timeGrid);
         // Render events
         this.renderEvents();
+        // Reflect any pre-existing focused cell / selection.
+        this.updateCellFocusAndSelection();
         // Render now indicator
         if (dateService.isToday(date) && options.nowIndicator) {
             this.renderNowIndicator(dayColumn);
         }
     }
+    /**
+     * Apply roving tabindex + aria-selected + `.selected` class to each cached
+     * slot element based on focusedCell and selection range.
+     */
+    updateCellFocusAndSelection() {
+        const focused = this.state.focusedCell;
+        let foundFocused = false;
+        let firstEl = null;
+        for (const [, slotEl] of this.slotElements) {
+            if (!firstEl)
+                firstEl = slotEl;
+            const startStr = slotEl.dataset['start'];
+            const endStr = slotEl.dataset['end'];
+            if (!startStr || !endStr)
+                continue;
+            const slot = { start: new Date(startStr), end: new Date(endStr) };
+            const isFocused = !!focused && slot.start.getTime() === focused.start.getTime();
+            slotEl.setAttribute('tabindex', isFocused ? '0' : '-1');
+            const inSelection = isSlotInSelection(slot, this.state, null);
+            slotEl.setAttribute('aria-selected', inSelection ? 'true' : 'false');
+            slotEl.classList.toggle('selected', inSelection);
+            if (isFocused)
+                foundFocused = true;
+        }
+        // Fallback so the grid is always Tab-reachable (see week-view note).
+        if (!foundFocused && firstEl)
+            firstEl.setAttribute('tabindex', '0');
+    }
     renderEvents() {
         if (!this.eventsContainer)
             return;
@@ -955,8 +1292,16 @@ class DayView extends BaseView {
     createEventElement(part, trackIndex, totalTracks, colspan, slotDuration) {
         const event = part.event;
         const eventEl = this.createElement('div', 'scheduler-event');
-        // Mark as selected if this is the selected event
-        if (this.state.selectedEvent?.id === event.id) {
+        const isSelected = this.state.selectedEvent?.id === event.id;
+        const inMoveMode = this.state.keyboardMoveEventId === event.id;
+        eventEl.setAttribute('role', 'button');
+        // Every event is Tab-reachable (PRD §6.1).
+        eventEl.setAttribute('tabindex', '0');
+        eventEl.setAttribute('aria-label', formatEventAriaLabel(event, null, this.state.options.timeFormat));
+        if (inMoveMode)
+            eventEl.setAttribute('aria-pressed', 'true');
+        if (isSelected) {
+            eventEl.setAttribute('aria-current', 'true');
             eventEl.classList.add('selected');
         }
         // Calculate position
@@ -1051,6 +1396,8 @@ class DayView extends BaseView {
         this.updateGreyedSlots();
         // Re-render events
         this.renderEvents();
+        // Refresh cell focus + selection styling.
+        this.updateCellFocusAndSelection();
         // Render preview event
         this.renderPreviewEvent();
     }
@@ -1131,12 +1478,20 @@ class TimelineView extends BaseView {
         this.container.classList.add('scheduler-timeline-view');
         const { date, options, resources, collapsedGroups } = this.state;
         const days = dateService.getWeekDays(date, options.firstDayOfWeek);
-        // Create timeline structure
+        const flattenedPreview = resourceService.flatten(resources, collapsedGroups);
+        const visibleRowCount = flattenedPreview.filter((f) => f.visible).length + 1; // +1 for the day-header row
+        // Create timeline structure with role=grid (APG Grid pattern, PRD §10 Q5)
         const timeline = this.createElement('div', 'scheduler-timeline');
-        // Header
+        timeline.setAttribute('role', 'grid');
+        timeline.setAttribute('aria-label', `Resource timeline for week starting ${dateService.formatDateWithWeekday(days[0], options.locale)}`);
+        timeline.setAttribute('aria-rowcount', String(visibleRowCount));
+        // Header (row containing day labels)
         const header = this.createElement('div', 'scheduler-timeline-header');
-        // Resource column header
+        header.setAttribute('role', 'row');
+        header.setAttribute('aria-rowindex', '1');
+        // Resource column header (top-left corner)
         const resourceHeader = this.createElement('div', 'scheduler-resource-header');
+        resourceHeader.setAttribute('role', 'columnheader');
         resourceHeader.textContent = 'Resources';
         header.appendChild(resourceHeader);
         // Time slots header
@@ -1146,6 +1501,7 @@ class TimelineView extends BaseView {
             // Day header spanning multiple slots
             const daySlots = slots.length;
             const dayHeader = this.createElement('div', 'scheduler-timeline-slot-header');
+            dayHeader.setAttribute('role', 'columnheader');
             dayHeader.style.width = `${daySlots * this.slotWidth}px`;
             dayHeader.textContent = dateService.formatDateWithWeekday(day, options.locale);
             dayHeader.style.borderBottom = '1px solid var(--scheduler-border-color)';
@@ -1163,6 +1519,7 @@ class TimelineView extends BaseView {
             const slots = dateService.getTimeSlots(day, options.slotDuration, options.slotMinTime, options.slotMaxTime);
             for (const slot of slots) {
                 const slotHeader = this.createElement('div', 'scheduler-timeline-slot-header');
+                slotHeader.setAttribute('role', 'columnheader');
                 slotHeader.style.width = `${this.slotWidth}px`;
                 slotHeader.textContent = dateService.formatTime(slot.start, options.timeFormat);
                 slotHeader.style.fontSize = '10px';
@@ -1175,29 +1532,75 @@ class TimelineView extends BaseView {
         const body = this.createElement('div', 'scheduler-timeline-body');
         // Flatten resources
         const flattened = resourceService.flatten(resources, collapsedGroups);
+        let rowIndex = 2; // 1 = header row above
         for (const flat of flattened) {
             if (!flat.visible)
                 continue;
             const row = this.createResourceRow(flat, days);
+            row.setAttribute('aria-rowindex', String(rowIndex));
             body.appendChild(row);
+            rowIndex++;
         }
         timeline.appendChild(body);
         this.container.appendChild(timeline);
         // Render events
         this.renderEvents(days);
+        // Reflect any pre-existing focused cell / selection.
+        this.updateCellFocusAndSelection();
+    }
+    /**
+     * Apply roving tabindex + aria-selected + `.selected` class to each
+     * timeline-slot element. Selection is constrained to the resource pinned
+     * at the anchor (PRD D1: cross-resource selection ignored).
+     */
+    updateCellFocusAndSelection() {
+        const focused = this.state.focusedCell;
+        const focusedResourceId = this.state.focusedResourceId;
+        const slots = this.container.querySelectorAll('.scheduler-timeline-slot');
+        let foundFocused = false;
+        let firstEl = null;
+        slots.forEach((slotEl) => {
+            if (!firstEl)
+                firstEl = slotEl;
+            const startStr = slotEl.dataset['start'];
+            const endStr = slotEl.dataset['end'];
+            const resourceId = slotEl.dataset['resourceId'] ?? null;
+            if (!startStr || !endStr)
+                return;
+            const slot = { start: new Date(startStr), end: new Date(endStr) };
+            const isFocused = !!focused &&
+                slot.start.getTime() === focused.start.getTime() &&
+                focusedResourceId === resourceId;
+            slotEl.setAttribute('tabindex', isFocused ? '0' : '-1');
+            const inSelection = isSlotInSelection(slot, this.state, resourceId);
+            slotEl.setAttribute('aria-selected', inSelection ? 'true' : 'false');
+            slotEl.classList.toggle('selected', inSelection);
+            if (isFocused)
+                foundFocused = true;
+        });
+        if (!foundFocused && firstEl)
+            firstEl.setAttribute('tabindex', '0');
     }
     createResourceRow(flat, days) {
         const { options } = this.state;
         const row = this.createElement('div', 'scheduler-timeline-row');
+        row.setAttribute('role', 'row');
         if (isResourceGroup(flat.item)) {
             row.classList.add('group');
         }
-        // Resource cell
+        // Resource cell — role="rowheader" labels the row for SR users.
         const resourceCell = this.createElement('div', 'scheduler-resource-cell');
+        resourceCell.setAttribute('role', 'rowheader');
         resourceCell.style.paddingLeft = `${8 + flat.depth * 16}px`;
         if (isResourceGroup(flat.item)) {
-            const toggle = this.createElement('span', 'expand-toggle');
-            toggle.textContent = this.state.collapsedGroups.has(flat.item.id) ? '▶' : '▼';
+            // Native <button> for the expand/collapse — gets keyboard activation
+            // (Enter/Space) for free, plus aria-expanded reflects collapsed state.
+            const toggle = this.createElement('button', 'expand-toggle');
+            toggle.type = 'button';
+            const isCollapsed = this.state.collapsedGroups.has(flat.item.id);
+            toggle.textContent = isCollapsed ? '▶' : '▼';
+            toggle.setAttribute('aria-expanded', String(!isCollapsed));
+            toggle.setAttribute('aria-label', `${isCollapsed ? 'Expand' : 'Collapse'} ${flat.item.title}`);
             this.setData(toggle, { groupId: flat.item.id });
             resourceCell.appendChild(toggle);
         }
@@ -1211,6 +1614,10 @@ class TimelineView extends BaseView {
             const slots = dateService.getTimeSlots(day, options.slotDuration, options.slotMinTime, options.slotMaxTime);
             for (const slot of slots) {
                 const slotEl = this.createElement('div', 'scheduler-timeline-slot');
+                slotEl.setAttribute('role', 'gridcell');
+                slotEl.setAttribute('tabindex', '-1');
+                slotEl.setAttribute('aria-selected', 'false');
+                slotEl.id = `scheduler-cell-t-${flat.item.id}-${slot.start.getTime()}`;
                 slotEl.style.width = `${this.slotWidth}px`;
                 this.setData(slotEl, {
                     resourceId: flat.item.id,
@@ -1269,15 +1676,24 @@ class TimelineView extends BaseView {
             for (const { part, trackIndex, totalTracks, colspan } of timelinedParts) {
                 if (!part.event)
                     continue;
-                const eventEl = this.createEventElement(part.event, trackIndex, totalTracks, colspan, weekStart, totalWidth, options.slotDuration ?? 1800);
+                const eventEl = this.createEventElement(part.event, trackIndex, totalTracks, colspan, weekStart, totalWidth, options.slotDuration ?? 1800, resource.title);
                 eventsContainer.appendChild(eventEl);
             }
         }
     }
-    createEventElement(event, trackIndex, totalTracks, colspan, viewStart, totalWidth, slotDuration) {
+    createEventElement(event, trackIndex, totalTracks, colspan, viewStart, totalWidth, slotDuration, resourceTitle = null) {
         const eventEl = this.createElement('div', 'scheduler-timeline-event');
-        // Mark as selected if this is the selected event
-        if (this.state.selectedEvent?.id === event.id) {
+        const isSelected = this.state.selectedEvent?.id === event.id;
+        const inMoveMode = this.state.keyboardMoveEventId === event.id;
+        eventEl.setAttribute('role', 'button');
+        // Every event is Tab-reachable (PRD §6.1) — flipped from roving tabindex
+        // so users can Tab through events in document order.
+        eventEl.setAttribute('tabindex', '0');
+        eventEl.setAttribute('aria-label', formatEventAriaLabel(event, resourceTitle, this.state.options.timeFormat));
+        if (inMoveMode)
+            eventEl.setAttribute('aria-pressed', 'true');
+        if (isSelected) {
+            eventEl.setAttribute('aria-current', 'true');
             eventEl.classList.add('selected');
         }
         // Clamp event to view bounds
@@ -1318,6 +1734,8 @@ class TimelineView extends BaseView {
         // Re-render events
         const days = dateService.getWeekDays(state.date, state.options.firstDayOfWeek);
         this.renderEvents(days);
+        // Refresh cell focus + selection styling.
+        this.updateCellFocusAndSelection();
     }
     optionsRequireRerender(oldOpts, newOpts) {
         return oldOpts.slotDuration !== newOpts.slotDuration ||
@@ -1564,6 +1982,17 @@ const schedulerStyles = unsafeCSS(`:host {
   background: var(--scheduler-greyed-slot-bg);
 }
 
+.scheduler-time-slot.selected {
+  background: var(--scheduler-preview-bg);
+}
+
+.scheduler-time-slot:focus-visible,
+.scheduler-time-slot:focus {
+  outline: 2px solid #0d6efd;
+  outline-offset: -2px;
+  z-index: 1;
+}
+
 /* Events */
 .scheduler-events-container {
   position: absolute;
@@ -1872,6 +2301,17 @@ const schedulerStyles = unsafeCSS(`:host {
   background: var(--scheduler-greyed-slot-bg);
 }
 
+.scheduler-timeline-slot.selected {
+  background: var(--scheduler-preview-bg);
+}
+
+.scheduler-timeline-slot:focus-visible,
+.scheduler-timeline-slot:focus {
+  outline: 2px solid #0d6efd;
+  outline-offset: -2px;
+  z-index: 1;
+}
+
 .scheduler-timeline-events {
   position: absolute;
   top: 0;
@@ -1995,6 +2435,14 @@ const schedulerStyles = unsafeCSS(`:host {
 
 .scheduler-content::-webkit-scrollbar-thumb:hover {
   background: #a1a1a1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scheduler-event,
+  .scheduler-timeline-event {
+    animation: none !important;
+    transition: none !important;
+  }
 }`);
 
 /**
@@ -3168,10 +3616,11 @@ class SchedulerEventEmitter {
         }));
     }
     /**
-     * Emit an event-click event.
+     * Emit an event-selected event. Fired both by mouse click and by keyboard
+     * Tab landing on an event (mouse-parity, PRD scheduler-keyboard-grid-nav D3).
      */
-    emitEventClick(event, originalEvent) {
-        this.emit({ type: 'event-click', event, originalEvent });
+    emitEventSelected(event, originalEvent) {
+        this.emit({ type: 'event-selected', event, originalEvent });
     }
     /**
      * Emit an event-dblclick event.
@@ -3180,10 +3629,12 @@ class SchedulerEventEmitter {
         this.emit({ type: 'event-dblclick', event, originalEvent });
     }
     /**
-     * Emit an event-create event.
+     * Emit an `event-create` *request*. Per PRD scheduler-controlled-selection,
+     * the scheduler does not mutate its internal events list — the consumer
+     * receives the range and decides whether to construct an event from it.
      */
-    emitEventCreate(event, originalEvent) {
-        this.emit({ type: 'event-create', event, originalEvent });
+    emitEventCreate(range, view, originalEvent, resourceId) {
+        this.emit({ type: 'event-create', range, view, resourceId, originalEvent });
     }
     /**
      * Emit an event-update event.
@@ -3210,10 +3661,12 @@ class SchedulerEventEmitter {
         this.emit({ type: 'view-change', view, date });
     }
     /**
-     * Emit a selection-change event.
+     * Emit a selection-change event. Carries both the single-event focus and
+     * the time-range selection — either may be null. Fires on every transition
+     * so consumers can react to the selection clearing without polling.
      */
-    emitSelectionChange(selectedEvent) {
-        this.emit({ type: 'selection-change', selectedEvent });
+    emitSelectionChange(selectedEvent, range, view, resourceId) {
+        this.emit({ type: 'selection-change', selectedEvent, range, view, resourceId });
     }
 }
 
@@ -3251,11 +3704,23 @@ class MpScheduler extends LitElement {
         this.previousView = null;
         this.previousDate = null;
         this.previousSelectedEventId = null;
+        // Sentinel-keyed previous range so we can fire selection-change when the
+        // time-range selection mutates (anchor/extent/resourceId). `__init__`
+        // distinguishes "haven't observed yet" from "currently null" so the very
+        // first emission isn't suppressed.
+        this.previousRangeKey = '__init__';
         // RAF scheduling for drag updates
         this.pendingDragUpdate = null;
         this.latestDragState = null;
         // Now indicator update timer
         this.nowIndicatorTimer = null;
+        this.liveAnnouncer = new LiveAnnouncerController(this);
+        /**
+         * Active keyboard-driven event move. Captures the original time range and
+         * (timeline) resource so Escape can revert; the working copy is mutated in
+         * place by arrow keys and committed or rolled back on Enter / Escape.
+         */
+        this.keyboardMove = null;
         this.stateManager = new SchedulerStateManager();
         this.eventEmitter = new SchedulerEventEmitter(this);
         // Initialize drag manager (input handler is deferred to firstUpdated()
@@ -3264,6 +3729,7 @@ class MpScheduler extends LitElement {
         this.dragManager.setSlotResolver((x, y) => this.getSlotAtPosition(x, y));
         // Bind keyboard handler
         this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+        this.boundHandleFocusIn = this.handleFocusIn.bind(this);
         // Subscribe to state changes
         this.stateManager.subscribe((state) => this.onStateChange(state));
     }
@@ -3273,12 +3739,14 @@ class MpScheduler extends LitElement {
             this.inputHandler.attach();
         }
         this.addEventListener('keydown', this.boundHandleKeyDown);
+        // focusin listener is registered in firstUpdated() once the shadowRoot exists.
         // Start now indicator update timer (every minute)
         this.startNowIndicatorTimer();
     }
     disconnectedCallback() {
         this.inputHandler?.detach();
         this.removeEventListener('keydown', this.boundHandleKeyDown);
+        this.shadowRoot?.removeEventListener('focusin', this.boundHandleFocusIn);
         this.currentView?.destroy();
         this.dragManager.destroy();
         // Stop now indicator timer
@@ -3399,15 +3867,30 @@ class MpScheduler extends LitElement {
     }
     changeView(view) {
         this.stateManager.setView(view);
+        this.liveAnnouncer.announce(`View changed to ${view}.`);
+    }
+    /**
+     * Clear the time-range selection and the focused-cell selection. Public
+     * because — per PRD scheduler-controlled-selection — the WC no longer
+     * auto-clears on commit; consumers call this from their `event-create`
+     * handler if they want the post-create selection cleared.
+     */
+    clearSelection() {
+        this.stateManager.clearSelection();
     }
     addEvent(event) {
         this.stateManager.addEvent(event);
+        this.liveAnnouncer.announce(`Event ${event.title} added.`);
     }
     updateEvent(event) {
         this.stateManager.updateEvent(event);
+        this.liveAnnouncer.announce(`Event ${event.title} updated.`);
     }
     removeEvent(eventId) {
+        const ev = this.getEventById(eventId);
         this.stateManager.removeEvent(eventId);
+        if (ev)
+            this.liveAnnouncer.announce(`Event ${ev.title} removed.`);
     }
     getEventById(eventId) {
         return this.events.find((e) => e.id === eventId) ?? null;
@@ -3424,6 +3907,7 @@ class MpScheduler extends LitElement {
         <header class="scheduler-header"></header>
         <div class="scheduler-content"></div>
       </div>
+      ${this.liveAnnouncer.template()}
     `;
     }
     firstUpdated() {
@@ -3445,33 +3929,48 @@ class MpScheduler extends LitElement {
             getScrollContainer: () => this.contentContainer,
         });
         this.inputHandler.attach();
+        // focusin on shadowRoot so e.target is the actual focused element
+        // (avoids cross-shadow retargeting back to the host). Cast — focusin
+        // isn't in the typed ShadowRootEventMap but the runtime supports it.
+        this.shadowRoot.addEventListener('focusin', this.boundHandleFocusIn);
         this.renderView();
     }
     populateHeader(header) {
         // Navigation
         const nav = document.createElement('nav');
         nav.className = 'scheduler-nav';
+        nav.setAttribute('aria-label', 'Scheduler navigation');
         const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
         prevBtn.textContent = '‹';
+        prevBtn.setAttribute('aria-label', 'Previous period');
         prevBtn.title = 'Previous';
         prevBtn.addEventListener('click', () => this.prev());
         const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
         nextBtn.textContent = '›';
+        nextBtn.setAttribute('aria-label', 'Next period');
         nextBtn.title = 'Next';
         nextBtn.addEventListener('click', () => this.next());
         const todayBtn = document.createElement('button');
+        todayBtn.type = 'button';
         todayBtn.textContent = 'Today';
+        todayBtn.setAttribute('aria-label', 'Jump to today');
         todayBtn.addEventListener('click', () => this.today());
         nav.appendChild(prevBtn);
         nav.appendChild(nextBtn);
         nav.appendChild(todayBtn);
-        // Title
+        // Title — assertive live region so navigation announces the new period.
         const title = document.createElement('div');
         title.className = 'scheduler-title';
+        title.setAttribute('aria-live', 'polite');
+        title.setAttribute('aria-atomic', 'true');
         this.updateTitle(title);
-        // View switcher
+        // View switcher — toolbar of toggle-buttons; aria-pressed mirrors active state.
         const viewSwitcher = document.createElement('div');
         viewSwitcher.className = 'scheduler-view-switcher';
+        viewSwitcher.setAttribute('role', 'group');
+        viewSwitcher.setAttribute('aria-label', 'Switch view');
         const views = [
             { key: 'year', label: 'Year' },
             { key: 'month', label: 'Month' },
@@ -3481,9 +3980,12 @@ class MpScheduler extends LitElement {
         ];
         for (const { key, label } of views) {
             const btn = document.createElement('button');
+            btn.type = 'button';
             btn.textContent = label;
             btn.dataset['view'] = key;
-            if (key === this.view) {
+            const isActive = key === this.view;
+            btn.setAttribute('aria-pressed', String(isActive));
+            if (isActive) {
                 btn.classList.add('active');
             }
             btn.addEventListener('click', () => this.changeView(key));
@@ -3576,25 +4078,35 @@ class MpScheduler extends LitElement {
         const dateChanged = this.previousDate !== null &&
             this.previousDate.getTime() !== state.date.getTime();
         const selectedEventId = state.selectedEvent?.id ?? null;
-        const selectionChanged = this.previousSelectedEventId !== null &&
-            this.previousSelectedEventId !== selectedEventId;
+        const range = selectionRange(state);
+        // Encode the range + resource into a single key so we fire selection-change
+        // on any movement of anchor/extent/resourceId, including the transition
+        // back to null (per PRD: consumers shouldn't have to poll).
+        const rangeKey = range
+            ? `${range.start.getTime()}-${range.end.getTime()}-${state.selectionResourceId ?? ''}`
+            : null;
+        const selectionChanged = this.previousSelectedEventId !== selectedEventId ||
+            this.previousRangeKey !== rangeKey;
         if (viewChanged || dateChanged) {
             this.eventEmitter.emitViewChange(state.view, state.date);
         }
         if (selectionChanged) {
-            this.eventEmitter.emitSelectionChange(state.selectedEvent);
+            this.eventEmitter.emitSelectionChange(state.selectedEvent, range, state.view, state.selectionResourceId ?? undefined);
         }
         this.previousView = state.view;
         this.previousDate = new Date(state.date);
         this.previousSelectedEventId = selectedEventId;
+        this.previousRangeKey = rangeKey;
     }
     updateUI(state) {
         this.updateTitle();
-        // Update view switcher active state
+        // Update view switcher active state — visual class + aria-pressed in lockstep.
         const buttons = this.shadowRoot.querySelectorAll('.scheduler-view-switcher button');
         buttons.forEach((btn) => {
             const btnEl = btn;
-            btnEl.classList.toggle('active', btnEl.dataset['view'] === state.view);
+            const isActive = btnEl.dataset['view'] === state.view;
+            btnEl.classList.toggle('active', isActive);
+            btnEl.setAttribute('aria-pressed', String(isActive));
         });
         // Update or re-render view
         if (this.currentView) {
@@ -3643,22 +4155,18 @@ class MpScheduler extends LitElement {
             // It was a click, not a drag
             if (result.event) {
                 this.stateManager.setSelectedEvent(result.event);
-                this.eventEmitter.emitEventClick(result.event, originalEvent);
+                this.eventEmitter.emitEventSelected(result.event, originalEvent);
             }
             return;
         }
         // Handle actual drag completion
         switch (result.type) {
             case 'create': {
-                const newEvent = {
-                    id: generateEventId(),
-                    title: 'New Event',
-                    start: result.preview.start,
-                    end: result.preview.end,
-                    color: '#3788d8',
-                };
-                this.stateManager.addEvent(newEvent);
-                this.eventEmitter.emitEventCreate(newEvent, originalEvent);
+                // Per PRD scheduler-controlled-selection: the scheduler does not
+                // construct or store the event itself — it emits the range as a
+                // request, the consumer constructs the SchedulerEvent.
+                const state = this.stateManager.getState();
+                this.eventEmitter.emitEventCreate({ start: result.preview.start, end: result.preview.end }, state.view, originalEvent, result.preview.resourceId);
                 break;
             }
             case 'move':
@@ -3715,59 +4223,956 @@ class MpScheduler extends LitElement {
                 this.stateManager.setView('day');
             }
         }
+        // Event click — also drives the keyboard-move tab stop. The drag flow
+        // already calls setSelectedEvent on commit, but a plain click on an
+        // event needs to select it too so the focus model can land on it.
+        if (target.type === 'event' && target.event) {
+            this.stateManager.setSelectedEvent(target.event);
+        }
     }
     handleDoubleClick(pointer, target) {
         if (target.type === 'event' && target.event) {
             this.eventEmitter.emitEventDblClick(target.event, pointer.originalEvent);
         }
     }
+    /**
+     * When focus lands on an event block (Tab, programmatic, or click), select
+     * the event and emit `event-selected` for mouse-parity (PRD §6.5 D3). The
+     * subsequent setSelectedEvent call routes through detectAndEmitChanges
+     * which fires `selection-change`.
+     *
+     * `focusin` bubbles across shadow boundaries but `e.target` is retargeted
+     * to the host. Use composedPath()[0] for the actual focused element.
+     */
+    handleFocusIn(e) {
+        const path = (e.composedPath?.() ?? []);
+        const target = (path[0] ?? e.target);
+        if (!target || !target.dataset)
+            return;
+        const eventId = target.dataset['eventId'];
+        if (!eventId)
+            return;
+        if (!target.classList.contains('scheduler-event') &&
+            !target.classList.contains('scheduler-timeline-event')) {
+            return;
+        }
+        const ev = this.getEventById(eventId);
+        if (!ev)
+            return;
+        if (this.stateManager.getState().selectedEvent?.id === ev.id) {
+            // Already selected — Tab landed on the same event again. Don't re-emit
+            // event-selected to avoid noise from programmatic focus restoration
+            // (e.g. after move-mode commit re-focuses the moved event).
+            return;
+        }
+        this.stateManager.setSelectedEvent(ev);
+        this.eventEmitter.emitEventSelected(ev, e);
+        // setSelectedEvent triggers a re-render that destroys the event's DOM
+        // node (renderEvents tears down + rebuilds). Restore focus so subsequent
+        // keypresses (Enter to enter move-mode, Delete to delete) still see the
+        // event as the active element.
+        requestAnimationFrame(() => {
+            const sel = `[data-event-id="${this.cssEscape(ev.id)}"]`;
+            const newEl = this.shadowRoot?.querySelector(sel);
+            newEl?.focus({ preventScroll: true });
+        });
+    }
     handleKeyDown(e) {
-        const state = this.stateManager.getState();
-        switch (e.key) {
-            case 'ArrowLeft':
-                this.prev();
-                e.preventDefault();
-                break;
-            case 'ArrowRight':
-                this.next();
-                e.preventDefault();
-                break;
+        // Move-mode owns every key while active so arrows/Enter/Esc go to it.
+        if (this.keyboardMove) {
+            this.handleKeyboardMove(e);
+            return;
+        }
+        // Cancel pointer drag with Escape regardless of focus.
+        if (e.key === 'Escape' && this.dragManager.isDragging()) {
+            this.dragManager.cancel();
+            return;
+        }
+        // Alt+letter view shortcuts work from any focus (PRD D2). Bare letters
+        // are no longer hot-keys — that frees them for future input surfaces.
+        if (e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
+            if (this.handleAltShortcut(e))
+                return;
+        }
+        const kind = this.getFocusedKind();
+        if (kind === 'cell') {
+            this.handleCellKeyDown(e);
+        }
+        else if (kind === 'event') {
+            this.handleEventKeyDown(e);
+        }
+    }
+    getFocusedKind() {
+        const active = this.shadowRoot?.activeElement;
+        if (!active)
+            return 'other';
+        if (active.classList.contains('scheduler-time-slot') ||
+            active.classList.contains('scheduler-timeline-slot') ||
+            active.classList.contains('scheduler-month-day') ||
+            active.classList.contains('scheduler-year-month')) {
+            return 'cell';
+        }
+        if (active.classList.contains('scheduler-event') ||
+            active.classList.contains('scheduler-timeline-event')) {
+            return 'event';
+        }
+        return 'other';
+    }
+    handleAltShortcut(e) {
+        switch (e.key.toLowerCase()) {
             case 't':
-            case 'T':
                 this.today();
                 e.preventDefault();
-                break;
+                return true;
             case 'y':
-            case 'Y':
                 this.changeView('year');
                 e.preventDefault();
-                break;
+                return true;
             case 'm':
-            case 'M':
                 this.changeView('month');
                 e.preventDefault();
-                break;
+                return true;
             case 'w':
-            case 'W':
                 this.changeView('week');
                 e.preventDefault();
-                break;
+                return true;
             case 'd':
-            case 'D':
                 this.changeView('day');
                 e.preventDefault();
-                break;
+                return true;
+        }
+        return false;
+    }
+    handleEventKeyDown(e) {
+        const state = this.stateManager.getState();
+        const ev = state.selectedEvent;
+        if (!ev)
+            return;
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                this.enterEventMoveMode(ev);
+                return;
             case 'Delete':
             case 'Backspace':
-                if (state.selectedEvent) {
-                    this.eventEmitter.emitEventDelete(state.selectedEvent);
-                }
+                e.preventDefault();
+                this.eventEmitter.emitEventDelete(ev);
+                return;
+            case 'Escape':
+                e.preventDefault();
+                this.focusFocusedCell();
+                return;
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.focusAdjacentEvent(ev, -1);
+                return;
+            case 'ArrowRight':
+                e.preventDefault();
+                this.focusAdjacentEvent(ev, +1);
+                return;
+        }
+    }
+    /**
+     * Inter-event arrow nav (PRD scheduler-controlled-selection §5.3): walk
+     * the events in document order (start time, with id as tiebreaker) by ±1.
+     * No wrap at the ends — matches the APG list/feed pattern.
+     */
+    focusAdjacentEvent(current, direction) {
+        const state = this.stateManager.getState();
+        const ordered = [...state.events].sort((a, b) => {
+            const dt = a.start.getTime() - b.start.getTime();
+            return dt !== 0 ? dt : a.id.localeCompare(b.id);
+        });
+        const idx = ordered.findIndex((e) => e.id === current.id);
+        if (idx < 0)
+            return;
+        const target = ordered[idx + direction];
+        if (!target)
+            return; // boundary — no wrap.
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const el = root.querySelector(`[data-event-id="${this.cssEscape(target.id)}"]`);
+        el?.focus({ preventScroll: false });
+    }
+    handleCellKeyDown(e) {
+        const state = this.stateManager.getState();
+        // Month + year views have their own focus model — `focusedDate` (a whole
+        // day or month) rather than `focusedCell` (a time slot) — and route
+        // through dedicated handlers per PRD scheduler-controlled-selection §5.
+        if (state.view === 'month') {
+            this.handleMonthCellKeyDown(e);
+            return;
+        }
+        if (state.view === 'year') {
+            this.handleYearCellKeyDown(e);
+            return;
+        }
+        if (!state.focusedCell)
+            this.initFocusedCellFromActive();
+        const shift = e.shiftKey;
+        const ctrl = e.ctrlKey || e.metaKey;
+        // Arrow mapping is physical-direction-aware:
+        //   week/day: time is vertical → ArrowUp/Down nudge time, ArrowLeft/Right
+        //             walk days (week only).
+        //   timeline: time is horizontal → ArrowLeft/Right nudge time,
+        //             ArrowUp/Down walk resources (rows).
+        const timelineLayout = state.view === 'timeline';
+        switch (e.key) {
+            case 'ArrowUp':
+                e.preventDefault();
+                timelineLayout ? this.moveCellByResource(-1, shift) : this.moveCellByTime(-1, shift);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                timelineLayout ? this.moveCellByResource(+1, shift) : this.moveCellByTime(+1, shift);
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                timelineLayout ? this.moveCellByTime(-1, shift) : this.moveCellByDay(-1, shift);
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                timelineLayout ? this.moveCellByTime(+1, shift) : this.moveCellByDay(+1, shift);
+                break;
+            case 'Home':
+                e.preventDefault();
+                ctrl ? this.moveCellToViewExtreme('start', shift) : this.moveCellToColumnExtreme('start', shift);
+                break;
+            case 'End':
+                e.preventDefault();
+                ctrl ? this.moveCellToViewExtreme('end', shift) : this.moveCellToColumnExtreme('end', shift);
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                this.moveCellByPeriod(-1);
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                this.moveCellByPeriod(+1);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                this.createEventFromCellOrSelection(e);
                 break;
             case 'Escape':
-                if (this.dragManager.isDragging()) {
-                    this.dragManager.cancel();
-                }
+                e.preventDefault();
+                this.stateManager.clearSelection();
+                break;
+        }
+    }
+    /**
+     * If a cell is the active element but state.focusedCell is empty (e.g.
+     * Tab landed on the fallback first cell), seed the state from the
+     * active element's data attributes.
+     */
+    initFocusedCellFromActive() {
+        const active = this.shadowRoot?.activeElement;
+        if (!active)
+            return;
+        const startStr = active.dataset['start'];
+        const endStr = active.dataset['end'];
+        if (!startStr || !endStr)
+            return;
+        const cell = { start: new Date(startStr), end: new Date(endStr) };
+        const resourceId = active.dataset['resourceId'] ?? null;
+        this.stateManager.setFocusedCell(cell, resourceId, true);
+    }
+    /**
+     * Month-view keyboard handler (PRD scheduler-controlled-selection §5.1).
+     * Arrows walk days; ArrowUp/Down ± one week; cross-month moves auto-
+     * advance the displayed date so the new month renders. Enter emits
+     * `event-create` for the focused day's full range.
+     */
+    handleMonthCellKeyDown(e) {
+        // Always re-seed from the active element so click / programmatic-focus
+        // moves win over any stale `focusedDate` that lingered from a prior
+        // view. (Cheap; the alternative would be to clear `focusedDate` on
+        // view-change, which loses the user's last position when they bounce
+        // back.)
+        this.syncFocusedDateFromActive();
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.moveFocusedDateByDays(-1);
+                return;
+            case 'ArrowRight':
+                e.preventDefault();
+                this.moveFocusedDateByDays(+1);
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.moveFocusedDateByDays(-7);
+                return;
+            case 'ArrowDown':
+                e.preventDefault();
+                this.moveFocusedDateByDays(+7);
+                return;
+            case 'Enter':
+                e.preventDefault();
+                this.commitFocusedDateAsCreate(e, 'day');
+                return;
+        }
+    }
+    /**
+     * Year-view keyboard handler (PRD scheduler-controlled-selection §5.2).
+     * The focus unit is a month — ArrowLeft/Right ± 1, ArrowUp/Down ± 3 to
+     * mirror the visual 4×3 layout. Cross-year auto-advances. Enter emits
+     * `event-create` for the focused month's full range.
+     */
+    handleYearCellKeyDown(e) {
+        this.syncFocusedDateFromActive();
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.moveFocusedDateByMonths(-1);
+                return;
+            case 'ArrowRight':
+                e.preventDefault();
+                this.moveFocusedDateByMonths(+1);
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.moveFocusedDateByMonths(-3);
+                return;
+            case 'ArrowDown':
+                e.preventDefault();
+                this.moveFocusedDateByMonths(+3);
+                return;
+            case 'Enter':
+                e.preventDefault();
+                this.commitFocusedDateAsCreate(e, 'month');
+                return;
+        }
+    }
+    /**
+     * Sync `focusedDate` from the currently-active month/year cell. Runs at
+     * the top of every Phase B keydown so click-driven and Tab-driven focus
+     * moves are reflected in state before arrow keys read it.
+     */
+    syncFocusedDateFromActive() {
+        const active = this.shadowRoot?.activeElement;
+        if (!active)
+            return;
+        const dateStr = active.dataset['date'] ?? active.dataset['month'];
+        if (!dateStr)
+            return;
+        this.stateManager.setFocusedDate(new Date(dateStr));
+    }
+    moveFocusedDateByDays(deltaDays) {
+        const state = this.stateManager.getState();
+        const current = state.focusedDate ?? state.date;
+        const next = new Date(current);
+        next.setDate(next.getDate() + deltaDays);
+        this.commitFocusedDate(next);
+    }
+    moveFocusedDateByMonths(deltaMonths) {
+        const state = this.stateManager.getState();
+        const current = state.focusedDate ?? state.date;
+        const next = new Date(current);
+        next.setMonth(next.getMonth() + deltaMonths);
+        this.commitFocusedDate(next);
+    }
+    /**
+     * Apply a focused-date update. If the new date crosses the displayed
+     * period (different month on month view; different year on year view),
+     * also bump `state.date` so the view re-renders to the new period —
+     * APG date-picker auto-advance behaviour. Then schedule a focus
+     * restoration on the matching cell after the next render.
+     */
+    commitFocusedDate(next) {
+        const state = this.stateManager.getState();
+        let advanceTo = null;
+        if (state.view === 'month') {
+            const sameMonth = next.getFullYear() === state.date.getFullYear() &&
+                next.getMonth() === state.date.getMonth();
+            if (!sameMonth)
+                advanceTo = next;
+        }
+        else if (state.view === 'year') {
+            if (next.getFullYear() !== state.date.getFullYear())
+                advanceTo = next;
+        }
+        if (advanceTo) {
+            // setDate triggers the view to re-render with the new month/year, then
+            // we set the focused date so the renderer's tabindex update catches it.
+            this.stateManager.setDate(new Date(advanceTo));
+        }
+        this.stateManager.setFocusedDate(next);
+        // Within-period nav: the target cell is already in the DOM, focus it
+        // synchronously so the next keydown sees the right `activeElement`.
+        // Cross-period nav: the cell only exists after Lit re-renders, so the
+        // rAF re-tries focus on the next frame. The two together cover both
+        // cases without flicker.
+        this.scrollAndFocusDateCell(next);
+        if (advanceTo) {
+            requestAnimationFrame(() => this.scrollAndFocusDateCell(next));
+        }
+    }
+    /**
+     * Find the month/year date-cell DOM element by id and focus it. Keys are
+     * built from *local* date components to match `MonthView.dayKey()` /
+     * `YearView.monthKey()` — see those helpers for why ISO is unsafe across
+     * non-UTC timezones.
+     */
+    scrollAndFocusDateCell(date) {
+        const state = this.stateManager.getState();
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const yyyymm = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+        const id = state.view === 'year'
+            ? `scheduler-cell-y-${yyyymm}`
+            : `scheduler-cell-m-${yyyymm}-${String(date.getDate()).padStart(2, '0')}`;
+        const el = root.getElementById(id);
+        if (!el)
+            return;
+        el.focus({ preventScroll: true });
+        if (typeof el.scrollIntoView === 'function') {
+            el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }
+    /**
+     * Emit `event-create` covering the focused day (month view) or focused
+     * month (year view). No internal mutation per PRD
+     * scheduler-controlled-selection — consumer constructs the actual event.
+     */
+    commitFocusedDateAsCreate(originalEvent, unit) {
+        const state = this.stateManager.getState();
+        const focused = state.focusedDate;
+        if (!focused)
+            return;
+        const start = new Date(focused);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(start);
+        if (unit === 'day') {
+            end.setDate(end.getDate() + 1);
+        }
+        else {
+            end.setMonth(end.getMonth() + 1);
+        }
+        this.eventEmitter.emitEventCreate({ start, end }, state.view, originalEvent);
+    }
+    moveCellByTime(direction, extend) {
+        const state = this.stateManager.getState();
+        const f = state.focusedCell;
+        if (!f)
+            return;
+        const slotMs = (state.options.slotDuration ?? 1800) * 1000;
+        const newStart = new Date(f.start.getTime() + direction * slotMs);
+        const newEnd = new Date(newStart.getTime() + slotMs);
+        if (!this.cellIsWithinView(newStart, state))
+            return;
+        this.commitFocusMove({ start: newStart, end: newEnd }, state.focusedResourceId, extend);
+    }
+    /** Week view ArrowLeft/Right: ±1 day, same time-of-day. No-op on day view. */
+    moveCellByDay(direction, extend) {
+        const state = this.stateManager.getState();
+        const f = state.focusedCell;
+        if (!f)
+            return;
+        if (state.view !== 'week')
+            return;
+        const slotMs = (state.options.slotDuration ?? 1800) * 1000;
+        const newStart = new Date(f.start);
+        newStart.setDate(newStart.getDate() + direction);
+        const newEnd = new Date(newStart.getTime() + slotMs);
+        if (!this.cellIsWithinView(newStart, state))
+            return;
+        this.commitFocusMove({ start: newStart, end: newEnd }, null, extend);
+    }
+    /** Timeline ArrowUp/Down: ±1 resource, same time-of-day. PRD D1: cross-resource
+     *  Shift+Arrow is intentionally ignored (resource is categorical). */
+    moveCellByResource(direction, extend) {
+        const state = this.stateManager.getState();
+        const f = state.focusedCell;
+        if (!f)
+            return;
+        if (state.view !== 'timeline')
+            return;
+        if (extend)
+            return;
+        const next = this.adjacentResource(state.focusedResourceId, direction, state);
+        if (!next)
+            return;
+        this.commitFocusMove(f, next, false);
+    }
+    moveCellToColumnExtreme(end, extend) {
+        const state = this.stateManager.getState();
+        const f = state.focusedCell;
+        if (!f)
+            return;
+        const day = new Date(f.start);
+        day.setHours(0, 0, 0, 0);
+        const slots = dateService.getTimeSlots(day, state.options.slotDuration, state.options.slotMinTime, state.options.slotMaxTime);
+        const target = end === 'start' ? slots[0] : slots[slots.length - 1];
+        if (target)
+            this.commitFocusMove(target, state.focusedResourceId, extend);
+    }
+    moveCellToViewExtreme(end, extend) {
+        const state = this.stateManager.getState();
+        let target = null;
+        let resourceId = state.focusedResourceId;
+        switch (state.view) {
+            case 'day': {
+                const slots = dateService.getTimeSlots(state.date, state.options.slotDuration, state.options.slotMinTime, state.options.slotMaxTime);
+                target = end === 'start' ? slots[0] : slots[slots.length - 1];
                 break;
+            }
+            case 'week': {
+                const days = dateService.getWeekDays(state.date, state.options.firstDayOfWeek);
+                const day = end === 'start' ? days[0] : days[6];
+                const slots = dateService.getTimeSlots(day, state.options.slotDuration, state.options.slotMinTime, state.options.slotMaxTime);
+                target = end === 'start' ? slots[0] : slots[slots.length - 1];
+                break;
+            }
+            case 'timeline': {
+                const flattened = resourceService.flatten(state.resources, state.collapsedGroups);
+                const visible = flattened.filter((f) => f.visible && isResource(f.item));
+                if (visible.length === 0)
+                    return;
+                resourceId = end === 'start' ? visible[0].item.id : visible[visible.length - 1].item.id;
+                const days = dateService.getWeekDays(state.date, state.options.firstDayOfWeek);
+                const day = end === 'start' ? days[0] : days[6];
+                const slots = dateService.getTimeSlots(day, state.options.slotDuration, state.options.slotMinTime, state.options.slotMaxTime);
+                target = end === 'start' ? slots[0] : slots[slots.length - 1];
+                break;
+            }
+        }
+        if (target)
+            this.commitFocusMove(target, resourceId, extend);
+    }
+    /**
+     * PageUp/PageDown — advance one period (week or day) and re-focus the same
+     * day-of-week + time-of-day in the new period. Selection is cleared since
+     * crossing a period boundary breaks the linear-range invariant.
+     */
+    moveCellByPeriod(direction) {
+        const state = this.stateManager.getState();
+        const f = state.focusedCell;
+        const oldDate = state.date;
+        if (direction > 0)
+            this.next();
+        else
+            this.prev();
+        if (!f)
+            return;
+        const newState = this.stateManager.getState();
+        let newStart;
+        if (newState.view === 'day') {
+            newStart = new Date(newState.date);
+            newStart.setHours(f.start.getHours(), f.start.getMinutes(), f.start.getSeconds(), 0);
+        }
+        else {
+            // week / timeline — preserve day-of-week index.
+            const oldDays = dateService.getWeekDays(oldDate, state.options.firstDayOfWeek);
+            const newDays = dateService.getWeekDays(newState.date, newState.options.firstDayOfWeek);
+            const oldIdx = oldDays.findIndex((d) => dateService.isSameDay(d, f.start));
+            const targetDay = newDays[Math.max(0, oldIdx)] ?? newDays[0];
+            newStart = new Date(targetDay);
+            newStart.setHours(f.start.getHours(), f.start.getMinutes(), f.start.getSeconds(), 0);
+        }
+        const slotMs = (newState.options.slotDuration ?? 1800) * 1000;
+        const cell = { start: newStart, end: new Date(newStart.getTime() + slotMs) };
+        this.commitFocusMove(cell, state.focusedResourceId, false);
+    }
+    /**
+     * Apply the focus move to state and DOM. `extend` grows the selection
+     * range; otherwise selection is cleared. Live-region announces the new
+     * focused cell or selection range.
+     */
+    commitFocusMove(cell, resourceId, extend) {
+        const state = this.stateManager.getState();
+        const slotDuration = state.options.slotDuration ?? 1800;
+        if (extend) {
+            this.stateManager.extendSelection(cell, resourceId);
+            this.stateManager.setFocusedCell(cell, resourceId, false);
+            const newState = this.stateManager.getState();
+            this.liveAnnouncer.announce(formatSelectionAnnouncement(newState, slotDuration, state.options.timeFormat));
+        }
+        else {
+            this.stateManager.setFocusedCell(cell, resourceId, true);
+            const resourceTitle = this.getResourceTitle(resourceId);
+            this.liveAnnouncer.announce(formatCellAnnouncement(cell, state.options.timeFormat, resourceTitle));
+        }
+        this.scrollAndFocusCell(cell, resourceId);
+    }
+    cellIsWithinView(start, state) {
+        switch (state.view) {
+            case 'day': {
+                const dayStart = this.parseTimeOnDay(state.date, state.options.slotMinTime);
+                const dayEnd = this.parseTimeOnDay(state.date, state.options.slotMaxTime);
+                return start.getTime() >= dayStart.getTime() && start.getTime() < dayEnd.getTime();
+            }
+            case 'week':
+            case 'timeline': {
+                const days = dateService.getWeekDays(state.date, state.options.firstDayOfWeek);
+                const viewStart = this.parseTimeOnDay(days[0], state.options.slotMinTime);
+                const viewEnd = this.parseTimeOnDay(days[6], state.options.slotMaxTime);
+                return start.getTime() >= viewStart.getTime() && start.getTime() < viewEnd.getTime();
+            }
+            default:
+                return false;
+        }
+    }
+    parseTimeOnDay(day, timeStr) {
+        const [h, m, s] = (timeStr ?? '00:00:00').split(':').map(Number);
+        const d = new Date(day);
+        d.setHours(0, 0, 0, 0);
+        d.setSeconds((h ?? 0) * 3600 + (m ?? 0) * 60 + (s ?? 0));
+        return d;
+    }
+    adjacentResource(currentId, direction, state) {
+        const flattened = resourceService.flatten(state.resources, state.collapsedGroups);
+        const visible = flattened.filter((f) => f.visible && isResource(f.item));
+        if (visible.length === 0)
+            return null;
+        if (!currentId)
+            return visible[0].item.id;
+        const idx = visible.findIndex((f) => f.item.id === currentId);
+        if (idx < 0)
+            return visible[0].item.id;
+        const next = idx + direction;
+        if (next < 0 || next >= visible.length)
+            return null;
+        return visible[next].item.id;
+    }
+    getResourceTitle(id) {
+        if (!id)
+            return null;
+        for (const r of resourceService.getAllResources(this.stateManager.getState().resources)) {
+            if (r.id === id)
+                return r.title;
+        }
+        return null;
+    }
+    /**
+     * Find the cell DOM element for a (slot, resource) pair and call .focus()
+     * on it. scrollIntoView with block:nearest provides parity with mouse
+     * drag-near-edge auto-pan (PRD D6).
+     */
+    scrollAndFocusCell(cell, resourceId) {
+        const startIso = cell.start.toISOString();
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const sel = resourceId
+            ? `.scheduler-timeline-slot[data-resource-id="${this.cssEscape(resourceId)}"][data-start="${startIso}"]`
+            : `.scheduler-time-slot[data-start="${startIso}"]`;
+        const el = root.querySelector(sel);
+        if (!el)
+            return;
+        el.focus({ preventScroll: true });
+        // jsdom doesn't implement scrollIntoView — guard so unit tests don't crash.
+        if (typeof el.scrollIntoView === 'function') {
+            el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }
+    /** Re-focus whatever cell the keyboard model currently considers focused. */
+    focusFocusedCell() {
+        const state = this.stateManager.getState();
+        if (state.focusedCell) {
+            this.scrollAndFocusCell(state.focusedCell, state.focusedResourceId);
+        }
+    }
+    cssEscape(value) {
+        // Lightweight CSS.escape polyfill — sufficient for resource ids that are
+        // ULID/UUIDs or simple strings. Falls back to the native API where it exists.
+        if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function')
+            return CSS.escape(value);
+        return value.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+    }
+    /**
+     * Emit `event-create` covering the active selection range, or a single
+     * cell when no selection is active. Per PRD scheduler-controlled-selection,
+     * this is a *request* — no internal state mutation, no auto-clear, no
+     * auto-focus. The consumer constructs the SchedulerEvent and decides
+     * whether/when to clear the selection.
+     */
+    createEventFromCellOrSelection(originalEvent) {
+        const state = this.stateManager.getState();
+        const range = selectionRange(state);
+        let start;
+        let end;
+        let resourceId;
+        if (range) {
+            start = range.start;
+            end = range.end;
+            resourceId = state.selectionResourceId ?? undefined;
+        }
+        else if (state.focusedCell) {
+            start = state.focusedCell.start;
+            end = state.focusedCell.end;
+            resourceId = state.focusedResourceId ?? undefined;
+        }
+        else {
+            return;
+        }
+        this.eventEmitter.emitEventCreate({ start, end }, state.view, originalEvent, resourceId);
+        this.liveAnnouncer.announce(`Selection committed: ${dateService.formatTime(start, state.options.timeFormat)}–${dateService.formatTime(end, state.options.timeFormat)}.`);
+    }
+    /**
+     * Enter keyboard event-move mode. Captures the working copy and a snapshot
+     * of the resource (timeline). Visual feedback is provided by routing the
+     * working start/end through the existing previewEvent state — the same
+     * channel used for mouse drag — so the event renders at the projected
+     * destination as the user nudges.
+     */
+    enterEventMoveMode(event) {
+        const resourceId = event.resourceId ?? null;
+        this.keyboardMove = {
+            eventId: event.id,
+            originalStart: new Date(event.start),
+            originalEnd: new Date(event.end),
+            workingStart: new Date(event.start),
+            workingEnd: new Date(event.end),
+            workingResourceId: resourceId,
+        };
+        this.stateManager.setState({
+            keyboardMoveEventId: event.id,
+            previewEvent: {
+                start: new Date(event.start),
+                end: new Date(event.end),
+                ...(resourceId ? { resourceId } : {}),
+            },
+        });
+        const minutes = this.minutesPerSlot();
+        this.liveAnnouncer.announce(`Move mode for ${event.title}. Arrow keys nudge by ${minutes} minutes; Shift with arrow keys resizes the end edge; Alt with Shift resizes the start edge; Enter commits, Escape cancels.`);
+        // setState above tore down and rebuilt the focused event element. Re-focus
+        // the new node so subsequent arrow keystrokes still reach our keydown
+        // listener (otherwise focus falls back to <body> and our listener is
+        // bypassed).
+        requestAnimationFrame(() => {
+            const sel = `[data-event-id="${this.cssEscape(event.id)}"]`;
+            const el = this.shadowRoot?.querySelector(sel);
+            el?.focus({ preventScroll: true });
+        });
+    }
+    /**
+     * Move-mode keymap. Layered on the existing M-mode foundation:
+     *   - bare Arrow keys nudge the event
+     *   - Shift+Arrow resizes the end edge
+     *   - Alt+Shift+Arrow resizes the start edge
+     *   - on week view, Shift+ArrowLeft/Right pushes the end edge across the
+     *     day boundary (PRD D5) — symmetric with Shift+ArrowDown for time.
+     *   - Enter commits, Escape reverts.
+     */
+    handleKeyboardMove(e) {
+        if (!this.keyboardMove)
+            return;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancelEventMoveMode();
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.commitEventMoveMode();
+            return;
+        }
+        const view = this.stateManager.getState().view;
+        const timelineLayout = view === 'timeline';
+        const slotMs = this.minutesPerSlot() * 60 * 1000;
+        const dayMs = 24 * 60 * 60 * 1000;
+        const shift = e.shiftKey;
+        const alt = e.altKey;
+        switch (e.key) {
+            case 'ArrowUp':
+                e.preventDefault();
+                if (timelineLayout) {
+                    if (!shift && !alt)
+                        this.nudgeKeyboardMoveResource(-1);
+                }
+                else if (shift && alt) {
+                    this.resizeKeyboardMoveEdge('start', -slotMs);
+                }
+                else if (shift) {
+                    this.resizeKeyboardMoveEdge('end', -slotMs);
+                }
+                else {
+                    this.nudgeKeyboardMove(-slotMs);
+                }
+                return;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (timelineLayout) {
+                    if (!shift && !alt)
+                        this.nudgeKeyboardMoveResource(+1);
+                }
+                else if (shift && alt) {
+                    this.resizeKeyboardMoveEdge('start', +slotMs);
+                }
+                else if (shift) {
+                    this.resizeKeyboardMoveEdge('end', +slotMs);
+                }
+                else {
+                    this.nudgeKeyboardMove(+slotMs);
+                }
+                return;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (timelineLayout) {
+                    if (shift && alt)
+                        this.resizeKeyboardMoveEdge('start', -slotMs);
+                    else if (shift)
+                        this.resizeKeyboardMoveEdge('end', -slotMs);
+                    else
+                        this.nudgeKeyboardMove(-slotMs);
+                }
+                else if (view === 'week') {
+                    // Week view (D5): Shift+Arrow on the column axis resizes the end edge
+                    // across the day boundary by 24h. Alt+Shift moves the start edge.
+                    if (shift && alt)
+                        this.resizeKeyboardMoveEdge('start', -dayMs);
+                    else if (shift)
+                        this.resizeKeyboardMoveEdge('end', -dayMs);
+                    else
+                        this.nudgeKeyboardMove(-dayMs);
+                }
+                return;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (timelineLayout) {
+                    if (shift && alt)
+                        this.resizeKeyboardMoveEdge('start', +slotMs);
+                    else if (shift)
+                        this.resizeKeyboardMoveEdge('end', +slotMs);
+                    else
+                        this.nudgeKeyboardMove(+slotMs);
+                }
+                else if (view === 'week') {
+                    if (shift && alt)
+                        this.resizeKeyboardMoveEdge('start', +dayMs);
+                    else if (shift)
+                        this.resizeKeyboardMoveEdge('end', +dayMs);
+                    else
+                        this.nudgeKeyboardMove(+dayMs);
+                }
+                return;
+        }
+    }
+    minutesPerSlot() {
+        const seconds = this.stateManager.getState().options.slotDuration ?? 1800;
+        return Math.max(1, Math.round(seconds / 60));
+    }
+    /** Shift the working event by `deltaMs` along the time axis (preserves duration). */
+    nudgeKeyboardMove(deltaMs) {
+        if (!this.keyboardMove)
+            return;
+        const newStart = new Date(this.keyboardMove.workingStart.getTime() + deltaMs);
+        const newEnd = new Date(this.keyboardMove.workingEnd.getTime() + deltaMs);
+        this.keyboardMove.workingStart = newStart;
+        this.keyboardMove.workingEnd = newEnd;
+        this.applyKeyboardMovePreview();
+        this.liveAnnouncer.announce(formatMoveAnnouncement(newStart, newEnd, this.stateManager.getState().options.timeFormat));
+    }
+    /** Walk to the next/previous resource (timeline only). Updates the preview's resourceId. */
+    nudgeKeyboardMoveResource(direction) {
+        if (!this.keyboardMove)
+            return;
+        const next = this.adjacentResource(this.keyboardMove.workingResourceId, direction, this.stateManager.getState());
+        if (!next)
+            return;
+        this.keyboardMove.workingResourceId = next;
+        this.applyKeyboardMovePreview();
+        const title = this.getResourceTitle(next) ?? next;
+        this.liveAnnouncer.announce(`Moved to resource ${title}.`);
+    }
+    /**
+     * Resize one edge of the working event. Clamps to a minimum duration of
+     * one slot to keep the event valid, and refuses to invert (start ≤ end).
+     */
+    resizeKeyboardMoveEdge(edge, deltaMs) {
+        if (!this.keyboardMove)
+            return;
+        const minDurationMs = this.minutesPerSlot() * 60 * 1000;
+        let newStart = this.keyboardMove.workingStart;
+        let newEnd = this.keyboardMove.workingEnd;
+        if (edge === 'end') {
+            newEnd = new Date(newEnd.getTime() + deltaMs);
+            if (newEnd.getTime() - newStart.getTime() < minDurationMs)
+                return;
+        }
+        else {
+            newStart = new Date(newStart.getTime() + deltaMs);
+            if (newEnd.getTime() - newStart.getTime() < minDurationMs)
+                return;
+        }
+        this.keyboardMove.workingStart = newStart;
+        this.keyboardMove.workingEnd = newEnd;
+        this.applyKeyboardMovePreview();
+        this.liveAnnouncer.announce(formatResizeAnnouncement(newStart, newEnd, edge, this.stateManager.getState().options.timeFormat));
+    }
+    /** Mirror keyboardMove.working* into state.previewEvent so views render the destination,
+     *  then scroll the destination into view so the sighted-keyboard user can see it (PRD D6). */
+    applyKeyboardMovePreview() {
+        if (!this.keyboardMove)
+            return;
+        const { eventId, workingStart, workingEnd, workingResourceId } = this.keyboardMove;
+        this.stateManager.setState({
+            previewEvent: {
+                start: workingStart,
+                end: workingEnd,
+                ...(workingResourceId ? { resourceId: workingResourceId } : {}),
+            },
+        });
+        // Each move-mode update tears down + rebuilds event elements (renderEvents
+        // is unconditional in week/day/timeline). Re-focus the event so subsequent
+        // arrow keystrokes still reach our keydown listener instead of falling
+        // through to <body>. Also scroll the preview cell into view.
+        requestAnimationFrame(() => {
+            const root = this.shadowRoot;
+            if (!root)
+                return;
+            const eventEl = root.querySelector(`[data-event-id="${this.cssEscape(eventId)}"]`);
+            eventEl?.focus({ preventScroll: true });
+            const startIso = workingStart.toISOString();
+            const sel = workingResourceId
+                ? `.scheduler-timeline-slot[data-resource-id="${this.cssEscape(workingResourceId)}"][data-start="${startIso}"]`
+                : `.scheduler-time-slot[data-start="${startIso}"]`;
+            const cellEl = root.querySelector(sel);
+            if (cellEl && typeof cellEl.scrollIntoView === 'function') {
+                cellEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        });
+    }
+    commitEventMoveMode() {
+        if (!this.keyboardMove)
+            return;
+        const original = this.getEventById(this.keyboardMove.eventId);
+        if (original) {
+            const updated = {
+                ...original,
+                start: this.keyboardMove.workingStart,
+                end: this.keyboardMove.workingEnd,
+                ...(this.keyboardMove.workingResourceId
+                    ? { resourceId: this.keyboardMove.workingResourceId }
+                    : {}),
+            };
+            this.stateManager.updateEvent(updated);
+            this.eventEmitter.emitEventUpdate(updated, original, new CustomEvent('keyboard-move'));
+            this.liveAnnouncer.announce('Move committed.');
+        }
+        this.keyboardMove = null;
+        this.stateManager.setState({ keyboardMoveEventId: null, previewEvent: null });
+        // Re-focus the moved event after re-render.
+        requestAnimationFrame(() => {
+            const sel = `[data-event-id="${this.cssEscape(original?.id ?? '')}"]`;
+            const el = this.shadowRoot?.querySelector(sel);
+            el?.focus({ preventScroll: false });
+        });
+    }
+    cancelEventMoveMode() {
+        const id = this.keyboardMove?.eventId ?? null;
+        this.keyboardMove = null;
+        this.stateManager.setState({ keyboardMoveEventId: null, previewEvent: null });
+        this.liveAnnouncer.announce('Move cancelled.');
+        if (id) {
+            requestAnimationFrame(() => {
+                const sel = `[data-event-id="${this.cssEscape(id)}"]`;
+                const el = this.shadowRoot?.querySelector(sel);
+                el?.focus({ preventScroll: false });
+            });
         }
     }
     // ============================================