@tasknotes/calendar 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.1.2
+
+### Changed
+
+- Year views narrower than 520px (phones, sidebars) show two compact months a row. Days are shaded by how busy they are, with no dots, and any day with items is visibly shaded.
+
+### Fixed
+
+- Clicking or tapping a day in the year view reports it through `onDateClick`. Before, only Enter or Space on a focused day did.
+- The calendar keeps its sticky headers and popovers in its own stacking context, so host overlays such as side sheets and dialogs draw above the week header and all-day row.
+
 ## 0.1.1
 
 ### Fixed

package/dist/calendar.css

@@ -40,6 +40,8 @@
 	--tnc-item-c: var(--tnc-accent);
 
 	position: relative;
+	/* Keep the calendar's own layers (sticky headers, popovers) below host overlays. */
+	isolation: isolate;
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
@@ -878,6 +880,8 @@
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
+	/* Narrow calendars (phones, sidebars) use the compact year below. */
+	container-type: inline-size;
 }
 .tnc-year-scroll {
 	flex: 1 1 auto;
@@ -948,6 +952,35 @@
 	background: var(--tnc-c, var(--tnc-accent));
 }
 
+/* Two months a row: each day is a shaded square, and its count is in its label. */
+@container (max-width: 520px) {
+	.tnc-year-scroll {
+		padding: 8px 4px;
+	}
+	.tnc-year-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 14px 12px;
+	}
+	.tnc-ym-title {
+		font-size: 12px;
+		padding-bottom: 4px;
+	}
+	.tnc-ym-days {
+		gap: 1px;
+	}
+	.tnc-ym-day {
+		border-radius: 4px;
+		font-size: 10px;
+	}
+	/* Without dots, one item must still read as busy. */
+	.tnc-ym-day.has-items {
+		background: color-mix(in srgb, var(--tnc-accent) calc((0.3 + var(--tnc-heat) * 0.7) * 50%), transparent);
+	}
+	.tnc-ym-dots {
+		display: none;
+	}
+}
+
 /* -------------------------------------------------------------- timeline */
 .tnc-tl {
 	display: flex;

package/dist/cjs/index.cjs

@@ -3934,6 +3934,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const yearDay = ev.target.closest?.(".tnc-ym-day");
+    if (yearDay && this.root.contains(yearDay)) {
+      const day = parseDay(yearDay.dataset.date ?? "");
+      if (day !== null) this.clickSlot({ kind: "day", day }, ev, true);
+      return;
+    }
     const el = this.itemElFrom(ev.target);
     if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
     const meta = this.meta.get(el);
@@ -3993,7 +3999,7 @@ var Calendar = class {
       return;
     }
     const target = ev.target;
-    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-dg-day[tabindex]")) {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();

package/dist/cjs/react.cjs

@@ -3842,6 +3842,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const yearDay = ev.target.closest?.(".tnc-ym-day");
+    if (yearDay && this.root.contains(yearDay)) {
+      const day = parseDay(yearDay.dataset.date ?? "");
+      if (day !== null) this.clickSlot({ kind: "day", day }, ev, true);
+      return;
+    }
     const el = this.itemElFrom(ev.target);
     if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
     const meta = this.meta.get(el);
@@ -3901,7 +3907,7 @@ var Calendar = class {
       return;
     }
     const target = ev.target;
-    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-dg-day[tabindex]")) {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();

package/dist/esm/{chunk-6RRDNLZM.js → chunk-ZJQMMA6W.js}

@@ -3236,6 +3236,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const yearDay = ev.target.closest?.(".tnc-ym-day");
+    if (yearDay && this.root.contains(yearDay)) {
+      const day = parseDay(yearDay.dataset.date ?? "");
+      if (day !== null) this.clickSlot({ kind: "day", day }, ev, true);
+      return;
+    }
     const el = this.itemElFrom(ev.target);
     if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
     const meta = this.meta.get(el);
@@ -3295,7 +3301,7 @@ var Calendar = class {
       return;
     }
     const target = ev.target;
-    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-dg-day[tabindex]")) {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();

package/dist/esm/index.js

@@ -7,7 +7,7 @@ import {
   TIMELINE_UNIT_DAYS,
   defaultOptions,
   localeFirstDay
-} from "./chunk-6RRDNLZM.js";
+} from "./chunk-ZJQMMA6W.js";
 import {
   DAY_MS,
   ItemStore,

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-6RRDNLZM.js";
+} from "./chunk-ZJQMMA6W.js";
 import "./chunk-DVMZ5OXN.js";
 
 // src/react/index.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tasknotes/calendar",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",