@teaui/core 1.7.8 → 1.9.8

package/.dist/components/Calendar.js

@@ -2,6 +2,7 @@ import { View } from '../View.js';
 import { Point, Rect, Size } from '../geometry.js';
 import { isMouseClicked, } from '../events/index.js';
 import { Style } from '../Style.js';
+import { lineWidth } from '@teaui/term';
 const MONTH_NAMES = [
     'January',
     'February',
@@ -32,15 +33,21 @@ const MONTH_SHORT = [
 ];
 const DAY_HEADERS_SUN = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const DAY_HEADERS_MON = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const CLOSE = '×';
+const ARROW_UP = ' [ ↑ ] ';
+const ARROW_DOWN = ' [ ↓ ] ';
 // Width: " Su Mo Tu We Th Fr Sa " = 1 + 7*3 = 22
 const CALENDAR_WIDTH = 22;
-const NAV_BUTTON_WIDTH = 2;
+const NAV_BUTTON_WIDTH = 3;
 const CLOSE_BUTTON_WIDTH = 3;
 const MONTH_LABEL_X = 3;
 // Height: header + weekday row + 6 week rows = 8
 const CALENDAR_HEIGHT = 8;
 export class Calendar extends View {
+    // configurable so that tests can test 'today' rendering
+    #today;
     #date;
+    #cursorDate;
     #visibleDate;
     #onChangeVisible;
     #onChange;
@@ -51,30 +58,39 @@ export class Calendar extends View {
     // Range selection state
     #rangeStart;
     #rangeEnd;
+    #rangeNextSelection = 'start';
+    #shiftSelecting = false;
     // Year picker state
     #yearScrollOffset = 0;
     #yearSearch = '';
     // Mouse drag tracking
     #dragStartDate;
     // Mouse hover tracking
-    #hoverPrevMonth = false;
-    #hoverNextMonth = false;
-    #hoverMonthLabel = false;
-    #hoverYearLabel = false;
+    #hoverClose = false;
+    #hoverPrevButton = false;
+    #hoverNextButton = false;
+    #hoverMonthLabel;
+    #hoverYearLabel;
+    #hoverDate;
     constructor(props = {}) {
         super(props);
-        const now = new Date();
-        this.#date = props.date ?? now;
+        const now = props.now ?? new Date();
+        this.#today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+        const date = props.date ?? this.#today;
+        this.#date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        this.#cursorDate = this.#date;
         this.#visibleDate =
-            props.visibleDate ?? new Date(now.getFullYear(), now.getMonth(), 1);
+            props.visibleDate ??
+                new Date(this.#today.getFullYear(), this.#today.getMonth(), 1);
         this.#onChangeVisible = props.onChangeVisible;
         this.#onChange = props.onChange;
         this.#selection = props.selection ?? 'single';
         this.#firstDayOfWeek = props.firstDayOfWeek ?? 0;
     }
     update(props) {
-        if (props.date !== undefined)
-            this.#date = props.date;
+        if (props.date !== undefined) {
+            this.#date = new Date(props.date.getFullYear(), props.date.getMonth(), props.date.getDate(), 0, 0, 0, 0);
+        }
         if (props.visibleDate !== undefined)
             this.#visibleDate = props.visibleDate;
         if (props.onChangeVisible !== undefined)
@@ -94,6 +110,13 @@ export class Calendar extends View {
         this.#date = value;
         this.invalidateRender();
     }
+    get cursorDate() {
+        return this.#cursorDate;
+    }
+    set cursorDate(value) {
+        this.#cursorDate = value;
+        this.invalidateRender();
+    }
     get visibleDate() {
         return this.#visibleDate;
     }
@@ -107,16 +130,65 @@ export class Calendar extends View {
     naturalSize() {
         return new Size(CALENDAR_WIDTH, CALENDAR_HEIGHT);
     }
+    get #hoverStyle() {
+        return new Style({
+            foreground: this.theme.text().foreground,
+            background: this.theme.darkenColor,
+        });
+    }
+    get #buttonHoverStyle() {
+        return this.theme.ui({ isHover: true });
+    }
+    get #rangeGapStyle() {
+        return new Style({ background: this.theme.darkenColor });
+    }
+    get #weekdayStyle() {
+        return new Style({
+            bold: true,
+            foreground: this.theme.highlightColor,
+            background: this.theme.text().background,
+        });
+    }
+    get #rangeEndpointStyle() {
+        return new Style({
+            bold: true,
+            foreground: this.theme.textColor,
+            background: this.theme.darkenColor,
+        });
+    }
+    get #inRangeStyle() {
+        return new Style({
+            foreground: this.theme.highlightColor,
+            background: this.theme.darkenColor,
+        });
+    }
+    get #todayStyle() {
+        return new Style({
+            bold: true,
+            foreground: this.theme.contrastTextColor,
+            background: this.theme.text().background,
+        });
+    }
+    get #cursorStyle() {
+        return new Style({
+            bold: true,
+            foreground: this.theme.text().foreground,
+            background: this.theme.darkenColor,
+        });
+    }
+    get #selectedStyle() {
+        return new Style({
+            bold: true,
+            foreground: this.theme.textColor,
+            background: this.theme.highlightColor,
+        });
+    }
     #widgetRect(viewport) {
         return new Rect(Point.zero, [
             Math.min(CALENDAR_WIDTH, viewport.contentSize.width),
             Math.min(CALENDAR_HEIGHT, viewport.contentSize.height),
         ]);
     }
-    #today() {
-        const now = new Date();
-        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    }
     #isSameDay(a, b) {
         return (a.getFullYear() === b.getFullYear() &&
             a.getMonth() === b.getMonth() &&
@@ -152,8 +224,10 @@ export class Calendar extends View {
     }
     #startRangeSelection(date, syncVisibleDate = true) {
         this.#rangeStart = date;
-        this.#rangeEnd = undefined;
+        this.#rangeEnd = date;
+        this.#rangeNextSelection = 'end';
         this.#date = date;
+        this.#cursorDate = date;
         if (syncVisibleDate) {
             this.#syncVisibleDate(date);
         }
@@ -165,7 +239,9 @@ export class Calendar extends View {
             return;
         }
         this.#rangeEnd = date;
+        this.#rangeNextSelection = 'start';
         this.#date = date;
+        this.#cursorDate = date;
         if (syncVisibleDate) {
             this.#syncVisibleDate(date);
         }
@@ -176,7 +252,7 @@ export class Calendar extends View {
     }
     #selectDate(date) {
         if (this.#selection === 'range') {
-            if (!this.#rangeStart || this.#rangeEnd) {
+            if (this.#rangeNextSelection === 'start') {
                 this.#startRangeSelection(date);
             }
             else {
@@ -185,24 +261,59 @@ export class Calendar extends View {
             return;
         }
         this.#date = date;
+        this.#cursorDate = date;
         this.#onChange?.(date, date);
         this.#syncVisibleDate(date);
         this.invalidateRender();
     }
+    #selectCursorDate(date) {
+        this.#cursorDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        this.#syncVisibleDate(date);
+        this.invalidateRender();
+    }
+    #moveCursorDateBy(days) {
+        this.#shiftSelecting = false;
+        const nextDate = new Date(this.#cursorDate);
+        nextDate.setDate(nextDate.getDate() + days);
+        this.#cursorDate = nextDate;
+        // Navigate months if needed
+        if (nextDate.getMonth() !== this.#visibleDate.getMonth() ||
+            nextDate.getFullYear() !== this.#visibleDate.getFullYear()) {
+            const vis = new Date(nextDate.getFullYear(), nextDate.getMonth(), 1);
+            this.#visibleDate = vis;
+            this.#onChangeVisible?.(vis);
+        }
+        this.invalidateRender();
+    }
+    #shiftSelectBy(days) {
+        if (!this.#shiftSelecting) {
+            this.#rangeStart = new Date(this.#cursorDate);
+        }
+        this.#moveCursorDateBy(days);
+        this.#shiftSelecting = true;
+        this.#rangeEnd = new Date(this.#cursorDate);
+        this.#rangeNextSelection = 'start';
+    }
     #selectMonth(month) {
         const d = new Date(this.#visibleDate.getFullYear(), month, 1);
         this.#visibleDate = d;
-        this.#displayMode = 'days';
+        this.#selectDisplayMode('days');
         this.#onChangeVisible?.(d);
         this.invalidateRender();
     }
     #selectYear(year) {
         const d = new Date(year, this.#visibleDate.getMonth(), 1);
         this.#visibleDate = d;
-        this.#displayMode = 'days';
+        this.#selectDisplayMode('days');
         this.#onChangeVisible?.(d);
         this.invalidateRender();
     }
+    #selectDisplayMode(mode) {
+        this.#displayMode = mode;
+        this.#hoverClose = false;
+        this.#hoverMonthLabel = undefined;
+        this.#hoverYearLabel = undefined;
+    }
     #getDateAtPosition(x, y) {
         if (y < 2 || y > 7)
             return undefined;
@@ -239,6 +350,9 @@ export class Calendar extends View {
     }
     receiveMouse(event, system) {
         super.receiveMouse(event, system);
+        if (event.name === 'mouse.button.down') {
+            system.requestFocus();
+        }
         if (this.#displayMode === 'days') {
             this.#receiveMouseDays(event);
         }
@@ -249,40 +363,55 @@ export class Calendar extends View {
             this.#receiveMouseYears(event);
         }
     }
+    #formatMonthTitle(date) {
+        const totalWidth = 10;
+        const textWidth = lineWidth(MONTH_NAMES[date.getMonth()]);
+        const pad = Math.max(0, totalWidth - textWidth);
+        return (' '.repeat(Math.floor(pad / 2)) +
+            MONTH_NAMES[date.getMonth()] +
+            ' '.repeat(Math.ceil(pad / 2)));
+    }
+    #formatYearTitle(date) {
+        return ` ${String(date.getFullYear())} `;
+    }
+    #yearLabelX(yearStr) {
+        return CALENDAR_WIDTH - NAV_BUTTON_WIDTH - lineWidth(yearStr);
+    }
     #receiveMouseDays(event) {
         const x = event.position.x;
         const y = event.position.y;
         // Reset hover states
-        this.#hoverPrevMonth = false;
-        this.#hoverNextMonth = false;
-        this.#hoverMonthLabel = false;
-        this.#hoverYearLabel = false;
+        this.#hoverPrevButton = false;
+        this.#hoverNextButton = false;
+        this.#hoverMonthLabel = undefined;
+        this.#hoverYearLabel = undefined;
         if (y === 0) {
-            const monthName = MONTH_NAMES[this.#visibleDate.getMonth()];
-            const yearStr = String(this.#visibleDate.getFullYear());
-            const yearStart = CALENDAR_WIDTH - NAV_BUTTON_WIDTH - 1 - yearStr.length;
+            const monthName = this.#formatMonthTitle(this.#visibleDate);
+            const yearStr = this.#formatYearTitle(this.#visibleDate);
+            const yearStart = this.#yearLabelX(yearStr);
             if (x < NAV_BUTTON_WIDTH) {
-                this.#hoverPrevMonth = true;
+                this.#hoverPrevButton = true;
                 if (isMouseClicked(event)) {
                     this.#navigateMonth(-1);
                 }
             }
             else if (x >= CALENDAR_WIDTH - NAV_BUTTON_WIDTH) {
-                this.#hoverNextMonth = true;
+                this.#hoverNextButton = true;
                 if (isMouseClicked(event)) {
                     this.#navigateMonth(1);
                 }
             }
-            else if (x >= MONTH_LABEL_X && x < MONTH_LABEL_X + monthName.length) {
-                this.#hoverMonthLabel = true;
+            else if (x >= MONTH_LABEL_X &&
+                x < MONTH_LABEL_X + lineWidth(monthName)) {
+                this.#hoverMonthLabel = 'true';
                 if (isMouseClicked(event)) {
-                    this.#displayMode = 'months';
+                    this.#selectDisplayMode('months');
                 }
             }
-            else if (x >= yearStart && x < yearStart + yearStr.length) {
-                this.#hoverYearLabel = true;
+            else if (x >= yearStart && x < yearStart + lineWidth(yearStr)) {
+                this.#hoverYearLabel = 'true';
                 if (isMouseClicked(event)) {
-                    this.#displayMode = 'years';
+                    this.#selectDisplayMode('years');
                     this.#yearScrollOffset = 0;
                     this.#yearSearch = '';
                 }
@@ -290,6 +419,7 @@ export class Calendar extends View {
             return;
         }
         const date = this.#getDateAtPosition(x, y);
+        this.#hoverDate = date;
         if (!date) {
             if (event.name === 'mouse.button.cancel' ||
                 event.name === 'mouse.button.up') {
@@ -300,9 +430,7 @@ export class Calendar extends View {
         if (this.#selection === 'range') {
             switch (event.name) {
                 case 'mouse.button.down':
-                    if (this.#rangeStart &&
-                        !this.#rangeEnd &&
-                        !this.#isSameDay(this.#rangeStart, date)) {
+                    if (this.#rangeNextSelection === 'end' && this.#rangeStart) {
                         this.#dragStartDate = undefined;
                         this.#finishRangeSelection(date);
                     }
@@ -317,6 +445,7 @@ export class Calendar extends View {
                         this.#rangeStart = this.#dragStartDate;
                         this.#rangeEnd = date;
                         this.#date = date;
+                        this.#cursorDate = date;
                         this.invalidateRender();
                     }
                     break;
@@ -342,50 +471,72 @@ export class Calendar extends View {
     #receiveMouseMonths(event) {
         const x = event.position.x;
         const y = event.position.y;
-        if (isMouseClicked(event)) {
-            if (y === 0 && x >= CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH) {
-                // Close button
-                this.#displayMode = 'days';
+        // Reset hover states
+        this.#hoverClose = false;
+        this.#hoverMonthLabel = undefined;
+        if (y === 0 && x >= CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH) {
+            this.#hoverClose = true;
+            if (isMouseClicked(event)) {
+                this.#selectDisplayMode('days');
                 this.invalidateRender();
                 return;
             }
-            // Month grid: 4 rows × 3 columns, starting at y=2
-            if (y >= 2 && y <= 5) {
-                const col = Math.floor(x / 7);
-                const row = y - 2;
-                if (col >= 0 && col < 3 && row >= 0 && row < 4) {
-                    const month = row * 3 + col;
+        }
+        // Month grid: 4 rows × 3 columns, starting at y=2
+        if (y >= 2 && y <= 5) {
+            const col = Math.floor(x / 7);
+            const row = y - 2;
+            if (col >= 0 && col < 3 && row >= 0 && row < 4) {
+                const month = row * 3 + col;
+                this.#hoverMonthLabel = MONTH_SHORT[month];
+                if (isMouseClicked(event)) {
                     this.#selectMonth(month);
                 }
             }
         }
+        this.invalidateRender();
     }
     #receiveMouseYears(event) {
         const x = event.position.x;
         const y = event.position.y;
-        if (isMouseClicked(event)) {
-            if (y === 0 && x >= CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH) {
-                // Close button
-                this.#displayMode = 'days';
+        // Reset hover states
+        this.#hoverClose = false;
+        this.#hoverPrevButton = false;
+        this.#hoverNextButton = false;
+        this.#hoverYearLabel = undefined;
+        if (y === 0 && x >= CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH) {
+            this.#hoverClose = true;
+            if (isMouseClicked(event)) {
+                this.#selectDisplayMode('days');
                 this.invalidateRender();
                 return;
             }
-            // Year rows at y=2..6 (5 visible years)
-            if (y >= 2 && y <= 6) {
-                const yearIndex = y - 2;
-                const baseYear = this.#visibleDate.getFullYear() - 2 + this.#yearScrollOffset;
-                this.#selectYear(baseYear + yearIndex);
-            }
-            // Scroll arrows
-            if (y === 1) {
+        }
+        // Scroll arrows
+        if (y === 1) {
+            this.#hoverPrevButton = true;
+            if (isMouseClicked(event)) {
                 this.#yearScrollOffset -= 5;
                 this.invalidateRender();
             }
-            else if (y === 7) {
+        }
+        else if (y === 7) {
+            this.#hoverNextButton = true;
+            if (isMouseClicked(event)) {
                 this.#yearScrollOffset += 5;
                 this.invalidateRender();
             }
         }
+        // Year rows at y=2..6 (5 visible years)
+        if (y >= 2 && y <= 6) {
+            const yearIndex = y - 2;
+            const baseYear = this.#visibleDate.getFullYear() - 2 + this.#yearScrollOffset;
+            const year = baseYear + yearIndex;
+            this.#hoverYearLabel = String(year);
+            if (isMouseClicked(event)) {
+                this.#selectYear(year);
+            }
+        }
         // Scroll wheel
         if (event.name === 'mouse.wheel.up') {
             this.#yearScrollOffset -= 1;
@@ -395,6 +546,7 @@ export class Calendar extends View {
             this.#yearScrollOffset += 1;
             this.invalidateRender();
         }
+        this.invalidateRender();
     }
     receiveKey(event) {
         if (this.#displayMode === 'days') {
@@ -409,20 +561,43 @@ export class Calendar extends View {
     }
     #receiveKeyDays(event) {
         switch (event.name) {
+            case 't':
+                this.#selectCursorDate(new Date());
+                break;
             case 'left':
-                this.#moveDateBy(-1);
+                if (event.shift) {
+                    this.#shiftSelectBy(-1);
+                }
+                else {
+                    this.#moveCursorDateBy(-1);
+                }
                 break;
             case 'right':
-                this.#moveDateBy(1);
+                if (event.shift) {
+                    this.#shiftSelectBy(1);
+                }
+                else {
+                    this.#moveCursorDateBy(1);
+                }
                 break;
             case 'up':
-                this.#moveDateBy(-7);
+                if (event.shift) {
+                    this.#shiftSelectBy(-7);
+                }
+                else {
+                    this.#moveCursorDateBy(-7);
+                }
                 break;
             case 'down':
-                this.#moveDateBy(7);
+                if (event.shift) {
+                    this.#shiftSelectBy(7);
+                }
+                else {
+                    this.#moveCursorDateBy(7);
+                }
                 break;
             case 'return':
-                this.#selectDate(this.#date);
+                this.#selectDate(this.#cursorDate);
                 break;
             case 'escape':
                 // Do nothing in day view
@@ -434,14 +609,14 @@ export class Calendar extends View {
                 this.#navigateMonth(1);
                 break;
             case 'home': {
-                const d = new Date(this.#visibleDate.getFullYear(), this.#visibleDate.getMonth(), 1);
-                this.#date = d;
+                const nextDate = new Date(this.#visibleDate.getFullYear(), this.#visibleDate.getMonth(), 1);
+                this.#cursorDate = nextDate;
                 this.invalidateRender();
                 break;
             }
             case 'end': {
-                const d = new Date(this.#visibleDate.getFullYear(), this.#visibleDate.getMonth() + 1, 0);
-                this.#date = d;
+                const nextDate = new Date(this.#visibleDate.getFullYear(), this.#visibleDate.getMonth() + 1, 0);
+                this.#cursorDate = nextDate;
                 this.invalidateRender();
                 break;
             }
@@ -450,7 +625,7 @@ export class Calendar extends View {
     #receiveKeyMonths(event) {
         switch (event.name) {
             case 'escape':
-                this.#displayMode = 'days';
+                this.#selectDisplayMode('days');
                 this.invalidateRender();
                 break;
             case 'return':
@@ -493,7 +668,7 @@ export class Calendar extends View {
     #receiveKeyYears(event) {
         switch (event.name) {
             case 'escape':
-                this.#displayMode = 'days';
+                this.#selectDisplayMode('days');
                 this.#yearSearch = '';
                 this.invalidateRender();
                 break;
@@ -542,19 +717,6 @@ export class Calendar extends View {
         }
         this.invalidateRender();
     }
-    #moveDateBy(days) {
-        const d = new Date(this.#date);
-        d.setDate(d.getDate() + days);
-        this.#date = d;
-        // Navigate months if needed
-        if (d.getMonth() !== this.#visibleDate.getMonth() ||
-            d.getFullYear() !== this.#visibleDate.getFullYear()) {
-            const vis = new Date(d.getFullYear(), d.getMonth(), 1);
-            this.#visibleDate = vis;
-            this.#onChangeVisible?.(vis);
-        }
-        this.invalidateRender();
-    }
     render(viewport) {
         const hasFocus = viewport.registerFocus();
         this.#hasFocus = hasFocus;
@@ -574,54 +736,37 @@ export class Calendar extends View {
                 break;
         }
     }
-    get #selectedStyle() {
-        return new Style({
-            bold: true,
-            foreground: this.theme.textColor,
-            background: this.theme.highlightColor,
-        });
-    }
     #renderDays(viewport) {
-        const today = this.#today();
-        const year = this.#visibleDate.getFullYear();
+        const today = this.#today;
         const month = this.#visibleDate.getMonth();
-        const monthName = MONTH_NAMES[month];
-        const yearStr = String(year);
+        const monthName = this.#formatMonthTitle(this.#visibleDate);
+        const yearStr = this.#formatYearTitle(this.#visibleDate);
         const textStyle = this.theme.text();
         const dimStyle = this.theme.text({ isPlaceholder: true });
+        const hoverStyle = this.#hoverStyle;
         const headerStyle = this.theme.ui({ isHover: false });
         const selectedStyle = this.#selectedStyle;
-        const todayStyle = new Style({
-            bold: true,
-            foreground: this.theme.brightTextColor,
-            background: textStyle.background,
-        });
-        const rangeStyle = new Style({
-            foreground: this.theme.highlightColor,
-            background: textStyle.background,
-        });
+        const todayStyle = this.#todayStyle;
+        const inRangeStyle = this.#inRangeStyle;
+        const rangeEndpointStyle = this.#rangeEndpointStyle;
         viewport.paint(textStyle, this.#widgetRect(viewport));
         // Header: "◃  June     2026  ▹"
-        const prevArrow = this.#hoverPrevMonth ? '◂ ' : '◃ ';
-        const nextArrow = this.#hoverNextMonth ? ' ▸' : ' ▹';
+        const prevArrow = this.#hoverPrevButton ? ' ◂ ' : ' ◃ ';
+        const nextArrow = this.#hoverNextButton ? ' ▸ ' : ' ▹ ';
         const monthLabelStyle = this.#hoverMonthLabel
-            ? this.theme.ui({ isHover: true })
+            ? this.#buttonHoverStyle
             : headerStyle;
         const yearLabelStyle = this.#hoverYearLabel
-            ? this.theme.ui({ isHover: true })
+            ? this.#buttonHoverStyle
             : headerStyle;
-        const yearX = CALENDAR_WIDTH - NAV_BUTTON_WIDTH - 1 - yearStr.length;
-        viewport.write(prevArrow, new Point(0, 0), headerStyle);
+        const yearStart = this.#yearLabelX(yearStr);
+        viewport.write(prevArrow, new Point(0, 0), this.#hoverPrevButton ? this.#buttonHoverStyle : headerStyle);
         viewport.write(monthName, new Point(MONTH_LABEL_X, 0), monthLabelStyle);
-        viewport.write(yearStr, new Point(yearX, 0), yearLabelStyle);
-        viewport.write(nextArrow, new Point(CALENDAR_WIDTH - NAV_BUTTON_WIDTH, 0), headerStyle);
+        viewport.write(yearStr, new Point(yearStart, 0), yearLabelStyle);
+        viewport.write(nextArrow, new Point(CALENDAR_WIDTH - NAV_BUTTON_WIDTH, 0), this.#hoverNextButton ? this.#buttonHoverStyle : headerStyle);
         // Weekday headers
         const dayHeaders = this.#firstDayOfWeek === 1 ? DAY_HEADERS_MON : DAY_HEADERS_SUN;
-        const weekdayStyle = new Style({
-            bold: true,
-            foreground: this.theme.highlightColor,
-            background: textStyle.background,
-        });
+        const weekdayStyle = this.#weekdayStyle;
         for (let i = 0; i < 7; i++) {
             viewport.write(dayHeaders[i], new Point(1 + i * 3, 1), weekdayStyle);
         }
@@ -630,17 +775,30 @@ export class Calendar extends View {
         for (let week = 0; week < 6; week++) {
             for (let day = 0; day < 7; day++) {
                 const date = grid[week][day];
+                const isHover = this.#hoverDate && this.#isSameDay(date, this.#hoverDate);
                 const isCurrentMonth = date.getMonth() === month;
                 const isToday = this.#isSameDay(date, today);
-                const isSelected = this.#isSameDay(date, this.#date);
+                const isSelected = this.#isSameDay(date, this.#date) && this.#selection === 'single';
+                const isCursor = !this.#isSameDay(this.#cursorDate, this.#date) &&
+                    this.#isSameDay(date, this.#cursorDate);
                 const isInRange = this.#isInRange(date);
                 const dayNum = String(date.getDate()).padStart(2, ' ');
+                const isRangeEndpoint = this.#rangeStart &&
+                    this.#rangeEnd &&
+                    (this.#isSameDay(date, this.#rangeStart) ||
+                        this.#isSameDay(date, this.#rangeEnd));
                 let style;
-                if (isSelected) {
+                if (isRangeEndpoint) {
+                    style = rangeEndpointStyle;
+                }
+                else if (isSelected) {
                     style = selectedStyle;
                 }
+                else if (isCursor) {
+                    style = this.#cursorStyle;
+                }
                 else if (isInRange) {
-                    style = rangeStyle;
+                    style = inRangeStyle;
                 }
                 else if (isToday) {
                     style = todayStyle;
@@ -648,32 +806,96 @@ export class Calendar extends View {
                 else if (!isCurrentMonth) {
                     style = dimStyle;
                 }
+                else if (isHover) {
+                    style = hoverStyle;
+                }
                 else {
                     style = textStyle;
                 }
                 viewport.write(dayNum, new Point(1 + day * 3, 2 + week), style);
+                // Paint the gap between consecutive in-range days
+                if (day < 6) {
+                    const nextDate = grid[week][day + 1];
+                    const thisInRange = isSelected || isInRange;
+                    const nextInRange = this.#isSameDay(nextDate, this.#date) || this.#isInRange(nextDate);
+                    if (thisInRange && nextInRange) {
+                        const gapStyle = this.#rangeGapStyle;
+                        viewport.write(' ', new Point(1 + day * 3 + 2, 2 + week), gapStyle);
+                    }
+                }
+            }
+            if (this.#selection === 'range' &&
+                this.#rangeStart &&
+                this.#rangeEnd &&
+                !this.#isSameDay(this.#rangeStart, this.#rangeEnd)) {
+                // Paint the leading gap before the first in-range day of each row
+                // (the space at position 0 on the row, before the first day column)
+                const firstDate = grid[week][0];
+                const firstInRange = this.#isSameDay(firstDate, this.#date) || this.#isInRange(firstDate);
+                if (firstInRange) {
+                    const gapStyle = this.#rangeGapStyle;
+                    viewport.write(' ', new Point(0, 2 + week), gapStyle);
+                }
+                // Paint the trailing gap after the last in-range day of each row
+                const lastDate = grid[week][6];
+                const lastInRange = this.#isSameDay(lastDate, this.#date) || this.#isInRange(lastDate);
+                if (lastInRange) {
+                    const gapStyle = this.#rangeGapStyle;
+                    viewport.write(' ', new Point(1 + 6 * 3 + 2, 2 + week), gapStyle);
+                }
+            }
+        }
+        // Focus border
+        if (this.#hasFocus) {
+            const borderStyle = weekdayStyle;
+            // Top row (weekday header row): ╭...╮ with ─ between headers
+            viewport.write('╭', new Point(0, 1), borderStyle);
+            viewport.write('╮', new Point(CALENDAR_WIDTH - 1, 1), borderStyle);
+            for (let i = 0; i < 6; i++) {
+                viewport.write('─', new Point(3 + i * 3, 1), borderStyle);
+            }
+            // Middle rows: │...│
+            for (let week = 0; week < 5; week++) {
+                viewport.write('│', new Point(0, 2 + week), borderStyle);
+                viewport.write('│', new Point(CALENDAR_WIDTH - 1, 2 + week), borderStyle);
+            }
+            // Bottom row (last week row): ╰...╯ with ─ between days
+            viewport.write('╰', new Point(0, 7), borderStyle);
+            viewport.write('╯', new Point(CALENDAR_WIDTH - 1, 7), borderStyle);
+            for (let i = 0; i < 6; i++) {
+                viewport.write('─', new Point(3 + i * 3, 7), borderStyle);
             }
         }
     }
     #renderMonths(viewport) {
         const textStyle = this.theme.text();
         const headerStyle = this.theme.ui({ isHover: false });
-        const selectedStyle = this.#selectedStyle;
         const currentMonth = this.#visibleDate.getMonth();
         viewport.paint(textStyle, this.#widgetRect(viewport));
         // Header
-        const monthName = MONTH_NAMES[currentMonth];
+        const monthName = this.#formatMonthTitle(this.#visibleDate);
         const headerText = monthName;
-        const headerX = Math.max(0, Math.floor((CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH - headerText.length) / 2) + 1);
+        const headerX = Math.max(0, Math.floor((CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH - lineWidth(headerText)) / 2) + 1);
         viewport.write(headerText, new Point(headerX, 0), headerStyle);
-        viewport.write(' × ', new Point(CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH, 0), headerStyle);
+        const closeStyle = this.#hoverClose ? this.#buttonHoverStyle : headerStyle;
+        viewport.write(` ${CLOSE} `, new Point(CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH, 0), closeStyle);
         // Month grid: 4 rows × 3 columns
         for (let row = 0; row < 4; row++) {
             for (let col = 0; col < 3; col++) {
                 const m = row * 3 + col;
                 const name = MONTH_SHORT[m];
                 const isSelected = m === currentMonth;
-                const style = isSelected ? selectedStyle : textStyle;
+                const isHover = this.#hoverMonthLabel === name;
+                let style;
+                if (isSelected) {
+                    style = this.#selectedStyle;
+                }
+                else if (isHover) {
+                    style = this.#hoverStyle;
+                }
+                else {
+                    style = textStyle;
+                }
                 // Each column is ~7 chars wide (fits in 22 width: 7*3=21 + 1 padding)
                 const x = 1 + col * 7;
                 const y = 2 + row;
@@ -685,36 +907,48 @@ export class Calendar extends View {
     #renderYears(viewport) {
         const textStyle = this.theme.text();
         const headerStyle = this.theme.ui({ isHover: false });
-        const selectedStyle = this.#selectedStyle;
         const currentYear = this.#visibleDate.getFullYear();
         viewport.paint(textStyle, this.#widgetRect(viewport));
         // Header
         const headerText = 'Year';
-        const headerX = Math.max(0, Math.floor((CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH - headerText.length) / 2) + 1);
+        const headerX = Math.max(0, Math.floor((CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH - lineWidth(headerText)) / 2) + 1);
         viewport.write(headerText, new Point(headerX, 0), headerStyle);
-        viewport.write(' × ', new Point(CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH, 0), headerStyle);
+        const closeStyle = this.#hoverClose ? this.#buttonHoverStyle : headerStyle;
+        viewport.write(` ${CLOSE} `, new Point(CALENDAR_WIDTH - CLOSE_BUTTON_WIDTH, 0), closeStyle);
         // Scroll indicator
-        viewport.write('↑', new Point(Math.floor(CALENDAR_WIDTH / 2), 1), headerStyle);
+        const prevStyle = this.#hoverPrevButton
+            ? this.#buttonHoverStyle
+            : headerStyle;
+        viewport.write(ARROW_UP, new Point(Math.floor((CALENDAR_WIDTH - lineWidth(ARROW_UP)) / 2), 1), prevStyle);
         // 5 visible years
         const baseYear = currentYear - 2 + this.#yearScrollOffset;
         for (let i = 0; i < 5; i++) {
             const year = baseYear + i;
-            const isSelected = year === currentYear;
-            const style = isSelected ? selectedStyle : textStyle;
             const yearStr = String(year);
-            const x = Math.floor((CALENDAR_WIDTH - yearStr.length) / 2);
+            const isSelected = year === currentYear;
+            const isHover = this.#hoverYearLabel === yearStr;
+            let style;
+            if (isSelected) {
+                style = this.#selectedStyle;
+            }
+            else if (isHover) {
+                style = this.#hoverStyle;
+            }
+            else {
+                style = textStyle;
+            }
+            const x = Math.floor((CALENDAR_WIDTH - lineWidth(yearStr)) / 2);
             viewport.write(yearStr, new Point(x, 2 + i), style);
         }
         // Down arrow
-        viewport.write('↓', new Point(Math.floor(CALENDAR_WIDTH / 2), 7), headerStyle);
+        const nextStyle = this.#hoverNextButton
+            ? this.#buttonHoverStyle
+            : headerStyle;
+        viewport.write(ARROW_DOWN, new Point(Math.floor((CALENDAR_WIDTH - lineWidth(ARROW_DOWN)) / 2), 7), nextStyle);
         // Search line (if searching)
         if (this.#yearSearch) {
             const searchLabel = `Search: ${this.#yearSearch}`;
-            viewport.write(searchLabel, new Point(0, 7), new Style({
-                dim: true,
-                foreground: textStyle.foreground,
-                background: textStyle.background,
-            }));
+            viewport.write(searchLabel, new Point(0, 7), textStyle.merge({ dim: true }));
         }
     }
 }