From ec2dfa5057c0eca19474266cd81f504d71e83412 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 11:56:32 -0400
Subject: [PATCH 01/12] feat(sidebar): render month-folder children as calendar
 grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a sidebar tree node holds nothing but daily-note leaves of one
month (e.g. Daily/2026/04/2026-04-21.md … 2026-04-30.md), swap the
linear list for a 7-column calendar grid of that month. Cells with
notes link to the daily note; missing days render as muted dots.

Detection seam stays in Haskell. routeTreeSplices emits a new
node:iso-date splice (driven by Calendar.parseRouteDay) and
sidebar-tree.tpl wraps each subtree in .emanote-tree-children. The
JS module reads those data attributes — no second YYYY-MM-DD regex.

Cell palette + size constants extracted from timeline-heatmap.js
into a shared @emanote/calendar-grid module, so the two widgets
share the primary-palette / cell-size source of truth.

Closes #700.
---
 docs/guide/daily-notes.md                     |   1 +
 emanote/CHANGELOG.md                          |   1 +
 .../_emanote-static/js/calendar-grid.js       |  57 +++++++
 .../_emanote-static/js/sidebar-calendar.js    | 141 ++++++++++++++++++
 .../_emanote-static/js/timeline-heatmap.js    | 106 ++++++-------
 .../templates/components/sidebar-tree.tpl     |  15 +-
 emanote/src/Emanote/View/JsBundle.hs          |   7 +-
 emanote/src/Emanote/View/Template.hs          |   7 +
 8 files changed, 267 insertions(+), 68 deletions(-)
 create mode 100644 emanote/default/_emanote-static/js/calendar-grid.js
 create mode 100644 emanote/default/_emanote-static/js/sidebar-calendar.js

diff --git a/docs/guide/daily-notes.md b/docs/guide/daily-notes.md
index dae089c9b..4155142bc 100644
--- a/docs/guide/daily-notes.md
+++ b/docs/guide/daily-notes.md
@@ -10,6 +10,7 @@ If you create notes named `YYYY-MM-DD.md`, Emanote will treat them as daily note
 
 1. The backlinks panel will render daily notes separate from regular notes. Daily notes render as a year-stacked **timeline heatmap** (see [[backlinks#timeline-backlinks]]); regular notes render as a "Linked from" chip list.
 2. Each daily note automatically gets a hierarchical tag (eg: `#calendar/2025/03`) allowing you to browse them by calendar navigation in the tag index.
+3. Sidebar tree nodes whose immediate children are all daily notes of the same month (typically a `Daily/2026/04/` folder) render as a small **7-column calendar grid** in place of the linear list — each filled cell links to that day's note, missing days are muted dots.
 
 ## Timeline backlinks demo
 
diff --git a/emanote/CHANGELOG.md b/emanote/CHANGELOG.md
index cfdfff16d..f51a18972 100644
--- a/emanote/CHANGELOG.md
+++ b/emanote/CHANGELOG.md
@@ -16,6 +16,7 @@
   - Popup footnotes as the only on-screen UI (desktop card / mobile bottom-sheet); printed output renders the footnote list ([#642](https://github.com/srid/emanote/pull/642)).
   - Site-authored interactive JS extracted from per-template `<script>` blocks into ES modules under `_emanote-static/js/` (loaded once, cached across pages). Code-copy buttons now also appear on code blocks added by the live-server's DOM patches, not only those present at first load ([#643](https://github.com/srid/emanote/issues/643)).
   - Stork search controller migrated to the same ES-module pattern. Templates expose the search trigger via `data-emanote-stork-toggle` (event delegation) instead of inline `onclick="window.emanote.stork.toggleSearch()"`; the dark-mode mirror that re-skins the search dialog moved into the module too. Closes the Stork follow-up implied by [#643](https://github.com/srid/emanote/issues/643).
+  - **Sidebar month calendar** ([#700](https://github.com/srid/emanote/issues/700)): when a sidebar tree node holds nothing but daily-note leaves of one month (e.g. `Daily/2026/04/2026-04-21.md` … `2026-04-30.md`), the children list is replaced in-place by a 7-column calendar grid for that month. Cells with notes link to the daily note; missing days render as muted dots. Date detection lives in Haskell (`Calendar.parseRouteDay` emits `data-iso-date` on each leaf via the new `node:iso-date` splice) so JS never re-implements the YYYY-MM-DD parser. Cell palette + size constants extracted from `timeline-heatmap.js` into a shared `calendar-grid` module so a Tailwind palette refresh edits one file.
   - **Default theme refresh** ([#699](https://github.com/srid/emanote/pull/699)): every panel — title, sidebar, right-panel (TOC + backlinks + timeline), bottom strip, footer — attaches inside one rounded `#container` card, so the page UI reads as a single composed unit instead of stacked stripes. Wikilinks, backlinks, queries, timeline entries, tasks index, and inline tags share one chip palette (`bg-primary-50/70 text-primary-600 font-semibold tracking-tight`); TOC drops primary entirely (entries map to plain-text headings). Heading scale tightens to a ~1.20 ratio with uniform `font-semibold`. Daily-note backlinks render as a year-stacked heatmap with cell-hover context flyouts. Special pages (`/-/all`, `/-/tags`, `/-/tasks`) pick up the same chrome plus a back-to-Home link. Tables, in-prose task lists, and the footer all get coordinated styling so the page reads as one design language. Mona Sans replaces Space Grotesk for the chrome typeface.
 - Mermaid: add `elk` layout ([#618](https://github.com/srid/emanote/pull/618))
 - Home Manager module: macOS support via launchd ([#623](https://github.com/srid/emanote/pull/623))
diff --git a/emanote/default/_emanote-static/js/calendar-grid.js b/emanote/default/_emanote-static/js/calendar-grid.js
new file mode 100644
index 000000000..e13bb9d7c
--- /dev/null
+++ b/emanote/default/_emanote-static/js/calendar-grid.js
@@ -0,0 +1,57 @@
+// Cell-level primitives shared by every calendar/heatmap widget — the
+// palette, the size variants, and the filled/empty cell builders. The
+// row/grid composition is widget-specific: timeline-heatmap stacks 31-cell
+// linear strips, sidebar-calendar lays cells out in a 7-column weekday
+// grid. Pulling the cell concept into one module keeps the primary palette
+// + sizing in one place; a Tailwind palette refresh edits one file, not N.
+
+export const MONTH_LABELS = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+
+export const CELL_BASE = 'block rounded-[1px]';
+export const CELL_FILLED_BASE = CELL_BASE + ' group relative bg-primary-500 dark:bg-primary-400 hover:bg-primary-700 dark:hover:bg-primary-300 transition-colors';
+export const CELL_EMPTY_BG = ' bg-gray-200 dark:bg-gray-800';
+
+// Two render contexts:
+//   - "narrow"  → right-panel column (~150-210px) and sidebar (~200px).
+//                 Fixed 4×4px squares (w-1 h-1).
+//   - "wide"    → bottom strip at <lg (~700-960px). flex-1 cells with
+//                 min-w + h-2.5 stretch as horizontal bars rather than
+//                 leaving 70% empty space.
+export const SIZE_NARROW = ' w-1 h-1';
+export const SIZE_WIDE = ' flex-1 min-w-[6px] h-2.5';
+
+// Hover flyout: outer wrapper with pt-1.5 acts as a transparent
+// hover-bridge so cursor traversal between cell and visible card never
+// drops `group-hover`. Positioned below the cell (top-full) so flyouts
+// near the top don't clip on the viewport edge.
+export const FLYOUT_OUTER = 'cell-flyout absolute z-50 hidden group-hover:block group-focus-within:block top-full left-1/2 -translate-x-1/2 pt-1.5';
+export const FLYOUT_CARD = 'w-64 max-w-[min(16rem,80vw)] px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-xl text-[0.8rem] leading-[1.5] text-gray-700 dark:text-gray-300 [&_p]:m-0 [&_p+p]:mt-2';
+export const FLYOUT_HEADER = 'text-[0.65rem] font-semibold uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-1.5';
+
+// Build a filled cell anchor. `sizeClass` is one of SIZE_NARROW / SIZE_WIDE.
+// `flyoutBuilder(headerText)` is optional — if supplied, its return DOM
+// node is appended inside the anchor as a CSS-only hover flyout. Widgets
+// that don't want a flyout (e.g. sidebar-calendar) just omit it.
+export function createFilledCell({ url, headerText, sizeClass, flyoutBuilder }) {
+  const a = document.createElement('a');
+  a.className = CELL_FILLED_BASE + sizeClass;
+  a.href = url;
+  // aria-label (not title) so screen readers announce the cell without
+  // the browser layering its native gray tooltip on top of any rich
+  // hover flyout.
+  a.setAttribute('aria-label', headerText);
+  if (flyoutBuilder) {
+    a.appendChild(flyoutBuilder(headerText));
+  }
+  return a;
+}
+
+export function createEmptyCell(sizeClass) {
+  const sp = document.createElement('span');
+  sp.className = CELL_BASE + sizeClass + CELL_EMPTY_BG;
+  sp.setAttribute('aria-hidden', 'true');
+  return sp;
+}
diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
new file mode 100644
index 000000000..084bf4ede
--- /dev/null
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -0,0 +1,141 @@
+// When a sidebar tree node holds nothing but daily-note leaves of one
+// month (e.g. `Daily/2026/04/` containing 2026-04-21 … 2026-04-30),
+// swap the linear list for a 7-column calendar grid for that month.
+// Cells with notes are clickable; missing days are muted dots.
+//
+// Detection seam: the sidebar tree wraps each subtree in
+// `<div class="emanote-tree-children">` and stamps every leaf anchor
+// with `data-iso-date="YYYY-MM-DD"` (empty for non-daily notes).
+// Both come from Heist; this module never re-parses dates from text.
+// See `routeTreeSplices` in `Emanote.View.Template`.
+//
+// Re-runs on @emanote/morph for live-server in-app navigation.
+
+import { ready, onMorph } from '@emanote/morph';
+import {
+  MONTH_LABELS,
+  SIZE_NARROW,
+  createFilledCell,
+  createEmptyCell,
+} from '@emanote/calendar-grid';
+
+const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+// Marker class on the calendar wrapper. Idempotence check: if the
+// tree-children wrapper's first child carries this class, skip — already
+// rendered. Idiomorph re-running on live-server nav can replace the
+// wrapper's content back to tree divs; the next render() then sees no
+// marker and re-applies. Storing the marker on the calendar element
+// (not the wrapper) means it goes away exactly when the calendar
+// goes away, so there's no stale-flag failure mode.
+const CALENDAR_MARKER_CLASS = 'emanote-sidebar-calendar';
+
+const WRAPPER_CLASSES = CALENDAR_MARKER_CLASS + ' my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
+const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1.5';
+const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 gap-1 mb-1';
+const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
+const GRID_CLASSES = 'grid grid-cols-7 gap-1';
+const CELL_WRAPPER_CLASSES = 'flex items-center justify-center h-4';
+
+// Returns { year, month, leaves: Map<day, {url, title}> } when every
+// child of `wrapper` is a leaf with a parseable iso-date in the same
+// year+month. Returns null if the wrapper holds anything else
+// (subfolder, non-daily note, mixed months).
+function classifyMonthGroup(wrapper) {
+  const childNodes = wrapper.querySelectorAll(':scope > div');
+  if (childNodes.length === 0) return null;
+  let year = null;
+  let month = null;
+  const leaves = new Map();
+  for (const child of childNodes) {
+    // A leaf has no actual nested subtree. The wrapper div may still
+    // be present (empty) when `tree:open` is true on the leaf — we
+    // care only whether the wrapper has content.
+    if (child.querySelector(':scope > .emanote-tree-children > *')) return null;
+    const a = child.querySelector(':scope > .flex a[data-iso-date]');
+    if (!a) return null;
+    const iso = a.dataset.isoDate;
+    if (!iso) return null;
+    const [y, mo, d] = iso.split('-').map(Number);
+    if (!Number.isFinite(y) || !Number.isFinite(mo) || !Number.isFinite(d)) return null;
+    if (year === null) {
+      year = y;
+      month = mo;
+    } else if (y !== year || mo !== month) {
+      return null;
+    }
+    leaves.set(d, { url: a.href, title: a.getAttribute('title') || iso });
+  }
+  return { year, month, leaves };
+}
+
+function buildCalendar({ year, month, leaves }) {
+  const wrapper = document.createElement('div');
+  wrapper.className = WRAPPER_CLASSES;
+
+  const header = document.createElement('div');
+  header.className = HEADER_CLASSES;
+  header.textContent = MONTH_LABELS[month - 1] + ' ' + year;
+  wrapper.appendChild(header);
+
+  const weekdayRow = document.createElement('div');
+  weekdayRow.className = WEEKDAY_ROW_CLASSES;
+  for (const wl of WEEKDAY_LABELS) {
+    const span = document.createElement('span');
+    span.className = WEEKDAY_LABEL_CLASSES;
+    span.textContent = wl;
+    weekdayRow.appendChild(span);
+  }
+  wrapper.appendChild(weekdayRow);
+
+  const grid = document.createElement('div');
+  grid.className = GRID_CLASSES;
+
+  // ISO weekday: Mon=1 … Sun=7. Pad leading blanks so day 1 lands in
+  // the right weekday column.
+  const firstWeekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7;
+  for (let i = 1; i < firstWeekday; i++) {
+    const blank = document.createElement('span');
+    blank.className = CELL_WRAPPER_CLASSES;
+    blank.setAttribute('aria-hidden', 'true');
+    grid.appendChild(blank);
+  }
+
+  const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  for (let day = 1; day <= lastDay; day++) {
+    const cellWrap = document.createElement('span');
+    cellWrap.className = CELL_WRAPPER_CLASSES;
+    const entry = leaves.get(day);
+    if (entry) {
+      const dStr = String(day).padStart(2, '0');
+      const moStr = String(month).padStart(2, '0');
+      const dateStr = year + '-' + moStr + '-' + dStr;
+      const cell = createFilledCell({
+        url: entry.url,
+        headerText: dateStr + ' — ' + entry.title,
+        sizeClass: SIZE_NARROW,
+      });
+      cellWrap.appendChild(cell);
+    } else {
+      cellWrap.appendChild(createEmptyCell(SIZE_NARROW));
+    }
+    grid.appendChild(cellWrap);
+  }
+  wrapper.appendChild(grid);
+
+  return wrapper;
+}
+
+function render() {
+  for (const wrapper of document.querySelectorAll('.emanote-tree-children')) {
+    if (wrapper.firstElementChild?.classList.contains(CALENDAR_MARKER_CLASS)) continue;
+    const group = classifyMonthGroup(wrapper);
+    if (!group) continue;
+    const calendar = buildCalendar(group);
+    wrapper.textContent = '';
+    wrapper.appendChild(calendar);
+  }
+}
+
+ready(render);
+onMorph(render);
diff --git a/emanote/default/_emanote-static/js/timeline-heatmap.js b/emanote/default/_emanote-static/js/timeline-heatmap.js
index 0553416e8..a21405371 100644
--- a/emanote/default/_emanote-static/js/timeline-heatmap.js
+++ b/emanote/default/_emanote-static/js/timeline-heatmap.js
@@ -13,44 +13,28 @@
 //
 // Re-renders on @emanote/morph navigation so live-server in-app nav picks
 // up new backlinks without a hard reload.
+//
+// Cell primitives (palette, sizes, filled/empty builders) live in
+// @emanote/calendar-grid; the row/grid composition is widget-specific.
 
 import { ready, onMorph } from '@emanote/morph';
+import {
+  MONTH_LABELS,
+  SIZE_NARROW,
+  SIZE_WIDE,
+  FLYOUT_OUTER,
+  FLYOUT_CARD,
+  FLYOUT_HEADER,
+  createFilledCell,
+  createEmptyCell,
+} from '@emanote/calendar-grid';
 
 const DATE_RE = /(\d{4})-(\d{2})-(\d{2})/;
-const MONTH_LABELS = [
-  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
-];
 
-// Two render contexts with different cell sizing:
-//   - "narrow"  → right-panel column (~150-210px content). Cells are
-//                 fixed 4×4px squares (w-1 h-1). Fits 31 cells in a row
-//                 at ~5px stride.
-//   - "wide"    → bottom strip at <lg (full container width, ~700-960px).
-//                 Cells are flex-1 with min-w + h-2.5 so they stretch to
-//                 fill the available row width as horizontal bars rather
-//                 than leaving the heatmap floating in 70% empty space.
-//
-// Detection: a section inside #backlinks-bottom uses the wide layout;
-// otherwise (the right-panel home) the narrow layout. Each render call
-// picks once per section.
 const ROW_CLASSES = 'flex items-center gap-1.5';
 const LABEL_CLASSES = 'w-7 text-[0.65rem] uppercase tracking-wider text-gray-500 dark:text-gray-400 select-none shrink-0';
-const CELL_BASE = 'block rounded-[1px]';
-const CELL_FILLED_BASE = CELL_BASE + ' group relative bg-primary-500 dark:bg-primary-400 hover:bg-primary-700 dark:hover:bg-primary-300 transition-colors';
-const CELL_EMPTY_BG = ' bg-gray-200 dark:bg-gray-800';
-const SIZE_NARROW = ' w-1 h-1';
-const SIZE_WIDE = ' flex-1 min-w-[6px] h-2.5';
 const YEAR_LABEL_CLASSES = 'text-xs font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1';
 
-// Hover flyout: outer wrapper with pt-1.5 acts as a transparent
-// hover-bridge so cursor traversal between cell and visible card never
-// drops `group-hover`. Positioned below the cell (top-full) so flyouts
-// near the top of the heatmap don't clip on the viewport edge.
-const FLYOUT_OUTER = 'cell-flyout absolute z-50 hidden group-hover:block group-focus-within:block top-full left-1/2 -translate-x-1/2 pt-1.5';
-const FLYOUT_CARD = 'w-64 max-w-[min(16rem,80vw)] px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-xl text-[0.8rem] leading-[1.5] text-gray-700 dark:text-gray-300 [&_p]:m-0 [&_p+p]:mt-2';
-const FLYOUT_HEADER = 'text-[0.65rem] font-semibold uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-1.5';
-
 function parseEntries(listEl) {
   const out = new Map(); // year → Map<month, Map<day, {url, title, contextHTML}>>
   for (const li of listEl.querySelectorAll('li')) {
@@ -73,6 +57,28 @@ function parseEntries(listEl) {
   return out;
 }
 
+function buildFlyout(headerText, contextHTML) {
+  // CSS-only flyout: hidden by default, shown on group-hover /
+  // group-focus-within (the cell carries `group relative`). Built up
+  // programmatically rather than via innerHTML so the cloned pandoc
+  // context HTML can't escape into outer attributes.
+  const flyout = document.createElement('div');
+  flyout.className = FLYOUT_OUTER;
+  const card = document.createElement('div');
+  card.className = FLYOUT_CARD;
+  const header = document.createElement('div');
+  header.className = FLYOUT_HEADER;
+  header.textContent = headerText;
+  card.appendChild(header);
+  if (contextHTML) {
+    const body = document.createElement('div');
+    body.innerHTML = contextHTML;
+    card.appendChild(body);
+  }
+  flyout.appendChild(card);
+  return flyout;
+}
+
 function renderMonthRow(year, month, dayMap, wide) {
   const row = document.createElement('div');
   row.className = ROW_CLASSES;
@@ -82,9 +88,7 @@ function renderMonthRow(year, month, dayMap, wide) {
   label.textContent = MONTH_LABELS[month - 1];
   row.appendChild(label);
 
-  const cellSize = wide ? SIZE_WIDE : SIZE_NARROW;
-  const cellEmptyClass = CELL_BASE + cellSize + CELL_EMPTY_BG;
-  const cellFilledClass = CELL_FILLED_BASE + cellSize;
+  const sizeClass = wide ? SIZE_WIDE : SIZE_NARROW;
 
   const cells = document.createElement('div');
   // flex-1 on the row's cells container only matters in the wide
@@ -97,42 +101,18 @@ function renderMonthRow(year, month, dayMap, wide) {
   for (let day = 1; day <= 31; day++) {
     const entry = dayMap && dayMap.get(day);
     if (entry) {
-      const a = document.createElement('a');
-      a.className = cellFilledClass;
-      a.href = entry.url;
       const dStr = String(day).padStart(2, '0');
       const moStr = String(month).padStart(2, '0');
       const dateStr = year + '-' + moStr + '-' + dStr;
       const headerText = dateStr + ' — ' + entry.title;
-      // aria-label (not title) so screen readers still announce the
-      // cell without the browser layering its native gray tooltip on
-      // top of the rich hover flyout.
-      a.setAttribute('aria-label', headerText);
-      // CSS-only flyout: hidden by default, shown on group-hover /
-      // group-focus-within (the cell carries `group relative`). Built
-      // up programmatically rather than via innerHTML so the cloned
-      // pandoc context HTML can't escape into outer attributes.
-      const flyout = document.createElement('div');
-      flyout.className = FLYOUT_OUTER;
-      const card = document.createElement('div');
-      card.className = FLYOUT_CARD;
-      const header = document.createElement('div');
-      header.className = FLYOUT_HEADER;
-      header.textContent = headerText;
-      card.appendChild(header);
-      if (entry.contextHTML) {
-        const body = document.createElement('div');
-        body.innerHTML = entry.contextHTML;
-        card.appendChild(body);
-      }
-      flyout.appendChild(card);
-      a.appendChild(flyout);
-      cells.appendChild(a);
+      cells.appendChild(createFilledCell({
+        url: entry.url,
+        headerText,
+        sizeClass,
+        flyoutBuilder: (h) => buildFlyout(h, entry.contextHTML),
+      }));
     } else {
-      const sp = document.createElement('span');
-      sp.className = cellEmptyClass;
-      sp.setAttribute('aria-hidden', 'true');
-      cells.appendChild(sp);
+      cells.appendChild(createEmptyCell(sizeClass));
     }
   }
   row.appendChild(cells);
diff --git a/emanote/default/templates/components/sidebar-tree.tpl b/emanote/default/templates/components/sidebar-tree.tpl
index 047fbf86d..6d611cadb 100644
--- a/emanote/default/templates/components/sidebar-tree.tpl
+++ b/emanote/default/templates/components/sidebar-tree.tpl
@@ -61,7 +61,7 @@
         </has-children>
       </tree:open>
     </span>
-    <a class="${link-class} rounded-md px-2 py-1 truncate flex-1" title="${node:text}" href="${node:url}">
+    <a class="${link-class} rounded-md px-2 py-1 truncate flex-1" title="${node:text}" href="${node:url}" data-iso-date="${node:iso-date}">
       <node:text />
     </a>
     <tree:open>
@@ -77,10 +77,17 @@
 
   <!-- Node's children forest, displayed only on active trees
     TODO: Use <details> to toggle visibility?
+
+    The wrapper div is the seam sidebar-calendar.js scans: when every
+    immediate child is a daily-note leaf (anchor with data-iso-date) and
+    they share a year+month, the JS swaps the children for a calendar
+    grid in place. No-op for non-month groups.
   -->
   <tree:open>
-    <children>
-      <apply template="sidebar-tree" />
-    </children>
+    <div class="emanote-tree-children">
+      <children>
+        <apply template="sidebar-tree" />
+      </children>
+    </div>
   </tree:open>
 </div>
\ No newline at end of file
diff --git a/emanote/src/Emanote/View/JsBundle.hs b/emanote/src/Emanote/View/JsBundle.hs
index 94bcb808a..7df5679e5 100644
--- a/emanote/src/Emanote/View/JsBundle.hs
+++ b/emanote/src/Emanote/View/JsBundle.hs
@@ -50,7 +50,12 @@ doesn't appear here.
 -}
 emanoteJsModuleNames :: [Text]
 emanoteJsModuleNames =
-  ["morph", "theme-toggle", "code-copy", "toc-spy", "footnote-popup", "stork", "timeline-heatmap"]
+  -- The sidebar tree is a generic API: leaves carry `data-iso-date`
+  -- and subtrees are wrapped in `.emanote-tree-children`, both emitted
+  -- by `routeTreeSplices`. Widgets like sidebar-calendar attach by
+  -- scanning that DOM. Don't push widget-specific bindings (e.g.
+  -- `node:month-group`) into the tree splice — keep the seam thin.
+  ["morph", "theme-toggle", "code-copy", "toc-spy", "footnote-popup", "stork", "calendar-grid", "timeline-heatmap", "sidebar-calendar"]
 
 {- | Render the importmap + module entry script tags. Drop into the page
 \<head\> via a Heist splice; safe to call multiple times per render
diff --git a/emanote/src/Emanote/View/Template.hs b/emanote/src/Emanote/View/Template.hs
index 586110fd6..c98e5baf4 100644
--- a/emanote/src/Emanote/View/Template.hs
+++ b/emanote/src/Emanote/View/Template.hs
@@ -6,11 +6,13 @@ import Data.List (partition)
 import Data.Map.Syntax ((##))
 import Data.Set qualified as Set
 import Data.Text qualified as T
+import Data.Time.Format (defaultTimeLocale, formatTime)
 import Data.Tree qualified as Tree
 import Ema qualified
 import Emanote.Model (Model, ModelEma)
 import Emanote.Model qualified as M
 import Emanote.Model.Calendar qualified as Calendar
+import Emanote.Model.Calendar.Parser qualified as Calendar
 import Emanote.Model.Graph qualified as G
 import Emanote.Model.Meta qualified as Meta
 import Emanote.Model.Note qualified as MN
@@ -242,6 +244,11 @@ routeTreeSplices tCtx mCurrentRoute model = do
         let shortTitle = Meta.lookupRouteMeta @(Maybe Text) Nothing ("short-title" :| []) nodeRoute model
         "node:text" ## maybe (C.titleSplice tCtx $ M.modelLookupTitle nodeRoute model) HI.textSplice shortTitle
         "node:url" ## HI.textSplice $ SR.siteRouteUrl model $ SR.lmlSiteRoute (R.LMLView_Html, nodeRoute)
+        -- ISO date for the route's basename if it parses as YYYY-MM-DD; empty
+        -- otherwise. Sole source of truth for daily-note dates on the JS side
+        -- (sidebar-calendar reads it via data-iso-date) so date detection
+        -- stays in Haskell, not duplicated as a regex per widget.
+        "node:iso-date" ## HI.textSplice (maybe "" (toText . formatTime defaultTimeLocale "%Y-%m-%d") $ Calendar.parseRouteDay nodeRoute)
         let isActiveNode = Just nodeRoute == mCurrentRoute
             isActiveTree =
               -- Active tree checking is applicable only when there is an

From 84c1a399dd048a2d6c93395790a429676cfa723c Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:01:06 -0400
Subject: [PATCH 02/12] refactor(hickey): decomplect idempotence state from DOM
 marker

Replace the firstElementChild?.classList.contains(MARKER) gate in
render() with a module-level WeakSet of processed wrappers. The
class on the rendered calendar stays as a dev-tools inspection
hint, but the rendering lifecycle is no longer encoded in CSS
class presence. WeakSet entries vanish when the wrapper detaches
(idiomorph swap on nav), so morphed-in wrappers re-render
cleanly without inferring state from DOM shape.
---
 .../_emanote-static/js/sidebar-calendar.js    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
index 084bf4ede..594ec27f0 100644
--- a/emanote/default/_emanote-static/js/sidebar-calendar.js
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -21,16 +21,15 @@ import {
 
 const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
 
-// Marker class on the calendar wrapper. Idempotence check: if the
-// tree-children wrapper's first child carries this class, skip — already
-// rendered. Idiomorph re-running on live-server nav can replace the
-// wrapper's content back to tree divs; the next render() then sees no
-// marker and re-applies. Storing the marker on the calendar element
-// (not the wrapper) means it goes away exactly when the calendar
-// goes away, so there's no stale-flag failure mode.
-const CALENDAR_MARKER_CLASS = 'emanote-sidebar-calendar';
+// Idempotence: a WeakSet of wrappers we've already rendered into. The
+// set entry vanishes when the wrapper is detached (idiomorph swap on
+// live-server nav), so a freshly-morphed wrapper is unmarked and
+// re-rendered. No CSS-class state-flag, no double-duty for the marker.
+const renderedWrappers = new WeakSet();
 
-const WRAPPER_CLASSES = CALENDAR_MARKER_CLASS + ' my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
+// Class kept for dev-tools inspection only. The render lifecycle
+// no longer reads it — the WeakSet above is the single source of truth.
+const WRAPPER_CLASSES = 'emanote-sidebar-calendar my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
 const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1.5';
 const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 gap-1 mb-1';
 const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
@@ -128,12 +127,13 @@ function buildCalendar({ year, month, leaves }) {
 
 function render() {
   for (const wrapper of document.querySelectorAll('.emanote-tree-children')) {
-    if (wrapper.firstElementChild?.classList.contains(CALENDAR_MARKER_CLASS)) continue;
+    if (renderedWrappers.has(wrapper)) continue;
     const group = classifyMonthGroup(wrapper);
     if (!group) continue;
     const calendar = buildCalendar(group);
     wrapper.textContent = '';
     wrapper.appendChild(calendar);
+    renderedWrappers.add(wrapper);
   }
 }
 

From 1002282eee81cdbcf4815e9057ad57893305ba68 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:01:28 -0400
Subject: [PATCH 03/12] refactor(lowy): name both halves of the sidebar widget
 seam

The template comment named .emanote-tree-children but not the
data-iso-date attribute. Both are required for a widget to attach;
a future author reading only the template would miss the second
half. Spell out the contract so the constraint matches the one
already documented at the JsBundle.hs registration site.
---
 .../default/templates/components/sidebar-tree.tpl    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/emanote/default/templates/components/sidebar-tree.tpl b/emanote/default/templates/components/sidebar-tree.tpl
index 6d611cadb..3b269c98f 100644
--- a/emanote/default/templates/components/sidebar-tree.tpl
+++ b/emanote/default/templates/components/sidebar-tree.tpl
@@ -78,10 +78,14 @@
   <!-- Node's children forest, displayed only on active trees
     TODO: Use <details> to toggle visibility?
 
-    The wrapper div is the seam sidebar-calendar.js scans: when every
-    immediate child is a daily-note leaf (anchor with data-iso-date) and
-    they share a year+month, the JS swaps the children for a calendar
-    grid in place. No-op for non-month groups.
+    Seam contract for sidebar-tree widgets — two pieces, both required:
+      1. `<div class="emanote-tree-children">` wraps every expanded
+         subtree (here).
+      2. Each leaf anchor carries `data-iso-date="YYYY-MM-DD"` (or
+         empty), emitted from `routeTreeSplices` via `node:iso-date`.
+    sidebar-calendar.js attaches by reading both. Future widgets do
+    the same. Do not add widget-specific bindings (e.g. `node:month-
+    group`) to `routeTreeSplices` — keep the seam thin.
   -->
   <tree:open>
     <div class="emanote-tree-children">

From 7a6c44b06950412624d5395401dc6587472aa741 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:03:47 -0400
Subject: [PATCH 04/12] =?UTF-8?q?fix(police):=20emanote-dom-over-mirror=20?=
 =?UTF-8?q?=E2=80=94=20query=20DOM,=20not=20WeakSet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The WeakSet idempotence gate added in 84c1a399 mirrored DOM state
in JS, drifting if anything outside this module touches the
calendar wrapper (devtools removal, future utility scripts).
Replace with a named isAlreadyRendered() predicate that reads
the DOM directly — Hickey's intent-legibility concern is met by
naming the predicate, not by moving state into JS.
---
 .../_emanote-static/js/sidebar-calendar.js    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
index 594ec27f0..1fb4642c1 100644
--- a/emanote/default/_emanote-static/js/sidebar-calendar.js
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -21,15 +21,13 @@ import {
 
 const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
 
-// Idempotence: a WeakSet of wrappers we've already rendered into. The
-// set entry vanishes when the wrapper is detached (idiomorph swap on
-// live-server nav), so a freshly-morphed wrapper is unmarked and
-// re-rendered. No CSS-class state-flag, no double-duty for the marker.
-const renderedWrappers = new WeakSet();
-
-// Class kept for dev-tools inspection only. The render lifecycle
-// no longer reads it — the WeakSet above is the single source of truth.
-const WRAPPER_CLASSES = 'emanote-sidebar-calendar my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
+// Marker class on the rendered calendar element. The DOM is the
+// single source of truth for "this wrapper already holds a calendar"
+// — see `isAlreadyRendered` below — so any external mutation
+// (devtools, a future utility, idiomorph dropping the subtree) leaves
+// the gate in sync with what's actually on screen.
+const CALENDAR_CLASS = 'emanote-sidebar-calendar';
+const WRAPPER_CLASSES = CALENDAR_CLASS + ' my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
 const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1.5';
 const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 gap-1 mb-1';
 const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
@@ -125,15 +123,18 @@ function buildCalendar({ year, month, leaves }) {
   return wrapper;
 }
 
+function isAlreadyRendered(wrapper) {
+  return wrapper.firstElementChild?.classList.contains(CALENDAR_CLASS) ?? false;
+}
+
 function render() {
   for (const wrapper of document.querySelectorAll('.emanote-tree-children')) {
-    if (renderedWrappers.has(wrapper)) continue;
+    if (isAlreadyRendered(wrapper)) continue;
     const group = classifyMonthGroup(wrapper);
     if (!group) continue;
     const calendar = buildCalendar(group);
     wrapper.textContent = '';
     wrapper.appendChild(calendar);
-    renderedWrappers.add(wrapper);
   }
 }
 

From 1a90dc507bb3a1ea9a65ebd5dd5bf6a5d3ed8f99 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:09:21 -0400
Subject: [PATCH 05/12] =?UTF-8?q?refactor(police):=20elegance=20=E2=80=94?=
 =?UTF-8?q?=20re-export=20parseRouteDay=20from=20Calendar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Template.hs was combining two qualifiers under one Calendar alias to
reach parseRouteDay. Add an explicit export list to Calendar.hs so
parseRouteDay is exposed alongside isDailyNote, then drop the dual
import in Template.hs. Single qualifier, single facade — matches
how Graph.hs and Query.hs already use Calendar.
---
 emanote/src/Emanote/Model/Calendar.hs | 7 ++++++-
 emanote/src/Emanote/View/Template.hs  | 1 -
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/emanote/src/Emanote/Model/Calendar.hs b/emanote/src/Emanote/Model/Calendar.hs
index 3cf1a72d0..5074128fb 100644
--- a/emanote/src/Emanote/Model/Calendar.hs
+++ b/emanote/src/Emanote/Model/Calendar.hs
@@ -1,7 +1,12 @@
 {- | A primitive module to eventually pave way towards first-class "calendar"
 (daily notes, etc.) support in Emanote; either built-in or as plugin.
 -}
-module Emanote.Model.Calendar where
+module Emanote.Model.Calendar (
+  parseRouteDay,
+  isDailyNote,
+  backlinkSortKey,
+  noteSortKey,
+) where
 
 import Emanote.Model.Calendar.Parser (parseRouteDay)
 import Emanote.Model.Note qualified as N
diff --git a/emanote/src/Emanote/View/Template.hs b/emanote/src/Emanote/View/Template.hs
index c98e5baf4..1d1b2a925 100644
--- a/emanote/src/Emanote/View/Template.hs
+++ b/emanote/src/Emanote/View/Template.hs
@@ -12,7 +12,6 @@ import Ema qualified
 import Emanote.Model (Model, ModelEma)
 import Emanote.Model qualified as M
 import Emanote.Model.Calendar qualified as Calendar
-import Emanote.Model.Calendar.Parser qualified as Calendar
 import Emanote.Model.Graph qualified as G
 import Emanote.Model.Meta qualified as Meta
 import Emanote.Model.Note qualified as MN

From 31a3d1b851dbb9ec8c431ae45e277475136f0adc Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:11:06 -0400
Subject: [PATCH 06/12] =?UTF-8?q?refactor(police):=20elegance=20=E2=80=94?=
 =?UTF-8?q?=20share=20formatCellHeader=20across=20widgets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both timeline-heatmap and sidebar-calendar were independently building
'YYYY-MM-DD — title' strings via the same five-line padStart dance.
Move into calendar-grid.js so a date-format change touches one
place — and the two widgets can't drift apart in user-facing copy.
---
 emanote/default/_emanote-static/js/calendar-grid.js    | 9 +++++++++
 emanote/default/_emanote-static/js/timeline-heatmap.js | 7 ++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/emanote/default/_emanote-static/js/calendar-grid.js b/emanote/default/_emanote-static/js/calendar-grid.js
index e13bb9d7c..6094b893e 100644
--- a/emanote/default/_emanote-static/js/calendar-grid.js
+++ b/emanote/default/_emanote-static/js/calendar-grid.js
@@ -55,3 +55,12 @@ export function createEmptyCell(sizeClass) {
   sp.setAttribute('aria-hidden', 'true');
   return sp;
 }
+
+// Header text shown by the cell's tooltip / flyout. Shared so both
+// widgets format dates identically — a drift here would surface as
+// "the timeline says 2026-04-21 but the sidebar says 21 Apr 2026".
+export function formatCellHeader(year, month, day, title) {
+  const moStr = String(month).padStart(2, '0');
+  const dStr = String(day).padStart(2, '0');
+  return year + '-' + moStr + '-' + dStr + ' — ' + title;
+}
diff --git a/emanote/default/_emanote-static/js/timeline-heatmap.js b/emanote/default/_emanote-static/js/timeline-heatmap.js
index a21405371..dd1959d97 100644
--- a/emanote/default/_emanote-static/js/timeline-heatmap.js
+++ b/emanote/default/_emanote-static/js/timeline-heatmap.js
@@ -27,6 +27,7 @@ import {
   FLYOUT_HEADER,
   createFilledCell,
   createEmptyCell,
+  formatCellHeader,
 } from '@emanote/calendar-grid';
 
 const DATE_RE = /(\d{4})-(\d{2})-(\d{2})/;
@@ -101,13 +102,9 @@ function renderMonthRow(year, month, dayMap, wide) {
   for (let day = 1; day <= 31; day++) {
     const entry = dayMap && dayMap.get(day);
     if (entry) {
-      const dStr = String(day).padStart(2, '0');
-      const moStr = String(month).padStart(2, '0');
-      const dateStr = year + '-' + moStr + '-' + dStr;
-      const headerText = dateStr + ' — ' + entry.title;
       cells.appendChild(createFilledCell({
         url: entry.url,
-        headerText,
+        headerText: formatCellHeader(year, month, day, entry.title),
         sizeClass,
         flyoutBuilder: (h) => buildFlyout(h, entry.contextHTML),
       }));

From 2936fec9cda2b67beb240a32b8be9e62cb3f7eea Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:11:17 -0400
Subject: [PATCH 07/12] =?UTF-8?q?refactor(police):=20elegance=20=E2=80=94?=
 =?UTF-8?q?=20drop=20leaky=20selector=20and=20per-cell=20wrapper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three tightening moves on sidebar-calendar.js:
 - Selector ':scope > .flex a[data-iso-date]' reached past the
   documented seam into sidebar-tree.tpl's internal layout. Drop
   to ':scope a[data-iso-date]' so the widget only depends on
   what the seam contract names.
 - The per-cell '<span class="flex items-center justify-center
   h-4">' wrapper around each day was vestigial — only there to
   give the row a 16px track. Move that to the grid container
   via auto-rows-[1rem] place-items-center; one fewer DOM node
   per day.
 - JsBundle.hs's seam comment duplicated sidebar-tree.tpl's;
   trim to a one-line pointer at the canonical contract.
---
 .../_emanote-static/js/sidebar-calendar.js    | 32 +++++++------------
 emanote/src/Emanote/View/JsBundle.hs          |  8 ++---
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
index 1fb4642c1..bd9cf6fac 100644
--- a/emanote/default/_emanote-static/js/sidebar-calendar.js
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -17,22 +17,22 @@ import {
   SIZE_NARROW,
   createFilledCell,
   createEmptyCell,
+  formatCellHeader,
 } from '@emanote/calendar-grid';
 
 const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
 
-// Marker class on the rendered calendar element. The DOM is the
-// single source of truth for "this wrapper already holds a calendar"
-// — see `isAlreadyRendered` below — so any external mutation
-// (devtools, a future utility, idiomorph dropping the subtree) leaves
-// the gate in sync with what's actually on screen.
 const CALENDAR_CLASS = 'emanote-sidebar-calendar';
 const WRAPPER_CLASSES = CALENDAR_CLASS + ' my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
 const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1.5';
 const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 gap-1 mb-1';
 const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
-const GRID_CLASSES = 'grid grid-cols-7 gap-1';
-const CELL_WRAPPER_CLASSES = 'flex items-center justify-center h-4';
+// auto-rows-[1rem] gives every day-grid row a fixed 16px track regardless
+// of cell content, so the 4×4px cells sit in a comfortable square. The
+// row height used to come from a per-cell `<span class="flex items-center
+// justify-center h-4">` wrapper; place-items-center on the grid does the
+// same centering with one fewer DOM node per day.
+const GRID_CLASSES = 'grid grid-cols-7 gap-1 auto-rows-[1rem] place-items-center';
 
 // Returns { year, month, leaves: Map<day, {url, title}> } when every
 // child of `wrapper` is a leaf with a parseable iso-date in the same
@@ -49,7 +49,7 @@ function classifyMonthGroup(wrapper) {
     // be present (empty) when `tree:open` is true on the leaf — we
     // care only whether the wrapper has content.
     if (child.querySelector(':scope > .emanote-tree-children > *')) return null;
-    const a = child.querySelector(':scope > .flex a[data-iso-date]');
+    const a = child.querySelector(':scope a[data-iso-date]');
     if (!a) return null;
     const iso = a.dataset.isoDate;
     if (!iso) return null;
@@ -93,30 +93,22 @@ function buildCalendar({ year, month, leaves }) {
   const firstWeekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7;
   for (let i = 1; i < firstWeekday; i++) {
     const blank = document.createElement('span');
-    blank.className = CELL_WRAPPER_CLASSES;
     blank.setAttribute('aria-hidden', 'true');
     grid.appendChild(blank);
   }
 
   const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
   for (let day = 1; day <= lastDay; day++) {
-    const cellWrap = document.createElement('span');
-    cellWrap.className = CELL_WRAPPER_CLASSES;
     const entry = leaves.get(day);
     if (entry) {
-      const dStr = String(day).padStart(2, '0');
-      const moStr = String(month).padStart(2, '0');
-      const dateStr = year + '-' + moStr + '-' + dStr;
-      const cell = createFilledCell({
+      grid.appendChild(createFilledCell({
         url: entry.url,
-        headerText: dateStr + ' — ' + entry.title,
+        headerText: formatCellHeader(year, month, day, entry.title),
         sizeClass: SIZE_NARROW,
-      });
-      cellWrap.appendChild(cell);
+      }));
     } else {
-      cellWrap.appendChild(createEmptyCell(SIZE_NARROW));
+      grid.appendChild(createEmptyCell(SIZE_NARROW));
     }
-    grid.appendChild(cellWrap);
   }
   wrapper.appendChild(grid);
 
diff --git a/emanote/src/Emanote/View/JsBundle.hs b/emanote/src/Emanote/View/JsBundle.hs
index 7df5679e5..4a11eaef2 100644
--- a/emanote/src/Emanote/View/JsBundle.hs
+++ b/emanote/src/Emanote/View/JsBundle.hs
@@ -50,11 +50,9 @@ doesn't appear here.
 -}
 emanoteJsModuleNames :: [Text]
 emanoteJsModuleNames =
-  -- The sidebar tree is a generic API: leaves carry `data-iso-date`
-  -- and subtrees are wrapped in `.emanote-tree-children`, both emitted
-  -- by `routeTreeSplices`. Widgets like sidebar-calendar attach by
-  -- scanning that DOM. Don't push widget-specific bindings (e.g.
-  -- `node:month-group`) into the tree splice — keep the seam thin.
+  -- Sidebar widgets (e.g. sidebar-calendar) attach by scanning the
+  -- generic tree DOM emitted by `routeTreeSplices`; see the seam
+  -- contract in `templates/components/sidebar-tree.tpl`.
   ["morph", "theme-toggle", "code-copy", "toc-spy", "footnote-popup", "stork", "calendar-grid", "timeline-heatmap", "sidebar-calendar"]
 
 {- | Render the importmap + module entry script tags. Drop into the page

From f1d17d3750e97a545222de8f520f0f521565f922 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 12:18:35 -0400
Subject: [PATCH 08/12] test(e2e): cover sidebar month-calendar widget (#700)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four cucumber scenarios exercise the user-visible paths:
 - month folder renders as 7-col calendar with the right header
   and day→note links
 - the calendar swap replaces the linear list (no plain
   "YYYY-MM-DD" anchors leak through)
 - non-month folders never mount a calendar (negative case)
 - calendar survives Ema's in-app morph navigation between two
   daily notes in the same month (@morph-tagged so static mode
   skips it)

New fixture under tests/fixtures/notebook/calendar-test/2026/04/
holds three sparse daily notes (1/15/30) so the test exercises
both filled and missing-day cells.
---
 tests/features/smoke.feature                  |  24 +++
 tests/fixtures/notebook/calendar-test.md      |   5 +
 .../calendar-test/2026/04/2026-04-01.md       |   1 +
 .../calendar-test/2026/04/2026-04-15.md       |   1 +
 .../calendar-test/2026/04/2026-04-30.md       |   1 +
 .../sidebar_calendar_steps.ts                 | 137 ++++++++++++++++++
 6 files changed, 169 insertions(+)
 create mode 100644 tests/fixtures/notebook/calendar-test.md
 create mode 100644 tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md
 create mode 100644 tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md
 create mode 100644 tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md
 create mode 100644 tests/step_definitions/sidebar_calendar_steps.ts

diff --git a/tests/features/smoke.feature b/tests/features/smoke.feature
index 9b04f233d..3abfb3478 100644
--- a/tests/features/smoke.feature
+++ b/tests/features/smoke.feature
@@ -180,3 +180,27 @@ Feature: Smoke
   Scenario: Tag declared in sibling folder YAML appears on the root tag-index page (regression: #352)
     When I fetch "/-/tags.html"
     Then the response body contains "-/tags/issue-352-cascaded.html"
+
+  Scenario: Sidebar month folder renders as a calendar grid (issue #700)
+    When I open "/calendar-test/2026/04/2026-04-15.html"
+    Then the sidebar month calendar is visible with header "Apr 2026"
+    And the sidebar month calendar links day 1 to "calendar-test/2026/04/2026-04-01"
+    And the sidebar month calendar links day 15 to "calendar-test/2026/04/2026-04-15"
+    And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
+    And the sidebar month calendar has 3 filled day cells
+
+  Scenario: Sidebar month folder swaps the linear list, not augments it (issue #700)
+    When I open "/calendar-test/2026/04/2026-04-15.html"
+    Then the sidebar has no plain link with text "2026-04-01"
+    And the sidebar has no plain link with text "2026-04-30"
+
+  Scenario: Sidebar non-month folders do not render as a calendar (issue #700)
+    When I open "/"
+    Then the sidebar tree has no calendar wrapper for non-month folders
+
+  @morph
+  Scenario: Sidebar calendar survives Ema's in-app morph navigation (issue #700)
+    When I open "/calendar-test/2026/04/2026-04-01.html"
+    And I navigate via Ema to "/calendar-test/2026/04/2026-04-30.html"
+    Then the sidebar month calendar is visible with header "Apr 2026"
+    And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
diff --git a/tests/fixtures/notebook/calendar-test.md b/tests/fixtures/notebook/calendar-test.md
new file mode 100644
index 000000000..d0897b446
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test.md
@@ -0,0 +1,5 @@
+# Calendar Test
+
+Parent of `calendar-test/2026/04/`, which holds three daily notes
+(`2026-04-01`, `2026-04-15`, `2026-04-30`). Used by the sidebar
+month-calendar scenarios — see `features/smoke.feature`.
diff --git a/tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md
new file mode 100644
index 000000000..385eeaeb0
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md
@@ -0,0 +1 @@
+# 2026-04-01
diff --git a/tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md
new file mode 100644
index 000000000..6e4da6030
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md
@@ -0,0 +1 @@
+# 2026-04-15
diff --git a/tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md
new file mode 100644
index 000000000..4a89a5274
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md
@@ -0,0 +1 @@
+# 2026-04-30
diff --git a/tests/step_definitions/sidebar_calendar_steps.ts b/tests/step_definitions/sidebar_calendar_steps.ts
new file mode 100644
index 000000000..31a9b95f1
--- /dev/null
+++ b/tests/step_definitions/sidebar_calendar_steps.ts
@@ -0,0 +1,137 @@
+/**
+ * Step definitions for the sidebar month-calendar widget (issue #700).
+ *
+ * The widget swaps a sidebar tree subtree (`<div class="emanote-tree-children">`)
+ * whose children are all daily-note leaves of one month for a 7-column
+ * calendar grid. Marker class on the rendered wrapper is
+ * `.emanote-sidebar-calendar`. Filled cells are anchors carrying
+ * `aria-label="YYYY-MM-DD — title"`; missing days are bare `<span>`s.
+ *
+ * The widget runs purely in JS post-render, so a live mode + JS-enabled
+ * page is required. In static mode the JS bundle still ships, so the
+ * scenarios run there too — only `@morph` cases are skipped statically
+ * (no WebSocket, no `window.ema`).
+ */
+
+import { Then } from "@cucumber/cucumber";
+import { EmanoteWorld } from "../support/world.ts";
+import * as assert from "node:assert";
+
+const CALENDAR_SEL = ".emanote-sidebar-calendar";
+const SIDEBAR_TREE_ROOT_SEL = "#sidebar-tree, nav";
+
+// Wait for at least one calendar wrapper to appear. The widget runs on
+// `ready`, so the wrapper materialises a frame or two after DOMContentLoaded.
+async function waitForCalendar(page: EmanoteWorld["page"]): Promise<void> {
+  await page
+    .locator(CALENDAR_SEL)
+    .first()
+    .waitFor({ state: "attached", timeout: 5_000 });
+}
+
+Then(
+  "the sidebar month calendar is visible with header {string}",
+  async function (this: EmanoteWorld, header: string) {
+    await waitForCalendar(this.page);
+    const headerText = await this.page
+      .locator(`${CALENDAR_SEL} > div`)
+      .first()
+      .textContent();
+    assert.strictEqual(
+      (headerText ?? "").trim(),
+      header,
+      `Expected sidebar calendar header ${JSON.stringify(header)}, got ${JSON.stringify(headerText)}. Either sidebar-calendar.js didn't run (importmap regression / module dropped from emanoteJsModuleNames) or buildCalendar's header text format changed.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar links day {int} to {string}",
+  async function (this: EmanoteWorld, day: number, hrefSubstring: string) {
+    await waitForCalendar(this.page);
+    // Filled cells carry aria-label "YYYY-MM-DD — title" — use the
+    // numeric day as a substring anchor since title text varies per
+    // fixture but the date prefix is deterministic.
+    const dayPadded = String(day).padStart(2, "0");
+    const cell = this.page
+      .locator(`${CALENDAR_SEL} a[aria-label*="-${dayPadded} —"]`)
+      .first();
+    await cell.waitFor({ state: "attached", timeout: 5_000 });
+    const href = await cell.getAttribute("href");
+    assert.ok(
+      href && href.includes(hrefSubstring),
+      `Expected sidebar calendar day ${day} to link to ${JSON.stringify(hrefSubstring)}, got href=${JSON.stringify(href)}. Either classifyMonthGroup misread data-iso-date or createFilledCell dropped the URL.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar has {int} filled day cells",
+  async function (this: EmanoteWorld, expected: number) {
+    await waitForCalendar(this.page);
+    // Filled cells are anchors carrying aria-label "YYYY-MM-DD — title".
+    // Counting anchors inside the calendar wrapper is the cleanest
+    // fixture-controlled assertion (3 daily notes ⇒ 3 filled cells).
+    // Empty days and leading blanks are <span>s — both ignored here.
+    const filled = await this.page.locator(`${CALENDAR_SEL} a[aria-label]`).count();
+    assert.strictEqual(
+      filled,
+      expected,
+      `Expected ${expected} filled day cells, got ${filled}. Either classifyMonthGroup dropped a leaf (data-iso-date attribute regressed in the splice) or createFilledCell stopped emitting anchors.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar has no plain link with text {string}",
+  async function (this: EmanoteWorld, linkText: string) {
+    // Once the calendar swaps in, the original `<a>2026-04-XX</a>`
+    // tree leaves are gone — replaced by aria-label-only cell anchors.
+    // `:has-text("2026-04-01")` would still match cell aria-labels
+    // because Playwright's `:has-text` checks accessible name; instead
+    // use exact textContent to find link bodies that hold the date as
+    // visible text.
+    await waitForCalendar(this.page);
+    const count = await this.page.evaluate(
+      ({ root, text }) => {
+        const sidebar = document.querySelector(root);
+        if (!sidebar) return -1;
+        return Array.from(sidebar.querySelectorAll("a")).filter(
+          (a) => (a.textContent ?? "").trim() === text,
+        ).length;
+      },
+      { root: SIDEBAR_TREE_ROOT_SEL, text: linkText },
+    );
+    assert.notStrictEqual(
+      count,
+      -1,
+      `Sidebar root (${SIDEBAR_TREE_ROOT_SEL}) not found on the page.`,
+    );
+    assert.strictEqual(
+      count,
+      0,
+      `Expected no plain sidebar link with visible text ${JSON.stringify(linkText)}; found ${count}. The calendar should replace the linear list, not augment it — render() likely failed to clear wrapper.textContent before appending.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar tree has no calendar wrapper for non-month folders",
+  async function (this: EmanoteWorld) {
+    // From `/`, the sidebar root's `<div class="emanote-tree-children">`
+    // holds the top-level entries (`calendar-test`, `dailyhost`, etc.) —
+    // none all-daily, so no calendar should mount on it. classifyMonthGroup's
+    // null-return path is exercised here.
+    const count = await this.page.locator(CALENDAR_SEL).count();
+    // `dailyhost/` itself contains 2 same-month daily notes, so when the
+    // sidebar expands it (only happens on the active path), it would also
+    // mount a calendar. From `/` the dailyhost subtree is collapsed by
+    // default, so the children HTML isn't even emitted, and no calendar
+    // mounts. Asserting zero here verifies that.
+    assert.strictEqual(
+      count,
+      0,
+      `Expected zero ${CALENDAR_SEL} elements on '/'; found ${count}. The widget mounted on a non-month-only subtree — classifyMonthGroup should reject any subtree whose children include non-daily notes (a folder, an article without data-iso-date, etc.).`,
+    );
+  },
+);

From 8c1080798c0ccf2f1c73e51e5563435592f45b49 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 13:12:46 -0400
Subject: [PATCH 09/12] fix(sidebar): show day numbers in calendar cells
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The cell builders inherited from timeline-heatmap were 4×4px
colour-only squares — fine for a year-stacked heatmap where the
unit is "did anything happen", wrong for a sidebar calendar where
a reader expects to see the date in each cell. Without the number,
the widget read as a heatmap pasted into a calendar header.

Sidebar-specific cell builders now live next to the rest of the
widget: 24×24 tiles with the day rendered as text — primary-fill
+ white text for days that have a note, muted text-only for days
that don't. timeline-heatmap is unchanged; both widgets still
share `MONTH_LABELS` and `formatCellHeader` from calendar-grid.
---
 .../_emanote-static/js/sidebar-calendar.js    | 58 +++++++++++--------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
index bd9cf6fac..5add082c6 100644
--- a/emanote/default/_emanote-static/js/sidebar-calendar.js
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -1,7 +1,8 @@
 // When a sidebar tree node holds nothing but daily-note leaves of one
 // month (e.g. `Daily/2026/04/` containing 2026-04-21 … 2026-04-30),
 // swap the linear list for a 7-column calendar grid for that month.
-// Cells with notes are clickable; missing days are muted dots.
+// Days with notes show as clickable primary-coloured cells; days
+// without are muted day-numbers; both carry the day's date as text.
 //
 // Detection seam: the sidebar tree wraps each subtree in
 // `<div class="emanote-tree-children">` and stamps every leaf anchor
@@ -9,30 +10,27 @@
 // Both come from Heist; this module never re-parses dates from text.
 // See `routeTreeSplices` in `Emanote.View.Template`.
 //
+// Cell shape is sidebar-specific (day-numbered tile), distinct from
+// the timeline-heatmap's text-less colour-only square. Both share
+// `MONTH_LABELS` and `formatCellHeader` from `@emanote/calendar-grid`,
+// but the cell builders themselves live here.
+//
 // Re-runs on @emanote/morph for live-server in-app navigation.
 
 import { ready, onMorph } from '@emanote/morph';
-import {
-  MONTH_LABELS,
-  SIZE_NARROW,
-  createFilledCell,
-  createEmptyCell,
-  formatCellHeader,
-} from '@emanote/calendar-grid';
+import { MONTH_LABELS, formatCellHeader } from '@emanote/calendar-grid';
 
 const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
 
 const CALENDAR_CLASS = 'emanote-sidebar-calendar';
 const WRAPPER_CLASSES = CALENDAR_CLASS + ' my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
 const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1.5';
-const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 gap-1 mb-1';
+const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 mb-1';
 const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
-// auto-rows-[1rem] gives every day-grid row a fixed 16px track regardless
-// of cell content, so the 4×4px cells sit in a comfortable square. The
-// row height used to come from a per-cell `<span class="flex items-center
-// justify-center h-4">` wrapper; place-items-center on the grid does the
-// same centering with one fewer DOM node per day.
-const GRID_CLASSES = 'grid grid-cols-7 gap-1 auto-rows-[1rem] place-items-center';
+const GRID_CLASSES = 'grid grid-cols-7 gap-0.5 place-items-center';
+const CELL_BASE = 'flex items-center justify-center text-[0.65rem] w-6 h-6 rounded-sm tabular-nums';
+const CELL_FILLED = CELL_BASE + ' font-semibold bg-primary-500 dark:bg-primary-400 text-white hover:bg-primary-700 dark:hover:bg-primary-300 transition-colors';
+const CELL_EMPTY = CELL_BASE + ' text-gray-400 dark:text-gray-600';
 
 // Returns { year, month, leaves: Map<day, {url, title}> } when every
 // child of `wrapper` is a leaf with a parseable iso-date in the same
@@ -66,6 +64,25 @@ function classifyMonthGroup(wrapper) {
   return { year, month, leaves };
 }
 
+// Build one day cell. `entry` is the leaves-map value for this day, or
+// undefined when no daily note exists for it. Filled cells link to the
+// note; empty cells are non-interactive but still show the day number
+// so the calendar reads as a calendar at a glance.
+function buildDayCell(year, month, day, entry) {
+  if (entry) {
+    const a = document.createElement('a');
+    a.className = CELL_FILLED;
+    a.href = entry.url;
+    a.setAttribute('aria-label', formatCellHeader(year, month, day, entry.title));
+    a.textContent = String(day);
+    return a;
+  }
+  const sp = document.createElement('span');
+  sp.className = CELL_EMPTY;
+  sp.textContent = String(day);
+  return sp;
+}
+
 function buildCalendar({ year, month, leaves }) {
   const wrapper = document.createElement('div');
   wrapper.className = WRAPPER_CLASSES;
@@ -99,16 +116,7 @@ function buildCalendar({ year, month, leaves }) {
 
   const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
   for (let day = 1; day <= lastDay; day++) {
-    const entry = leaves.get(day);
-    if (entry) {
-      grid.appendChild(createFilledCell({
-        url: entry.url,
-        headerText: formatCellHeader(year, month, day, entry.title),
-        sizeClass: SIZE_NARROW,
-      }));
-    } else {
-      grid.appendChild(createEmptyCell(SIZE_NARROW));
-    }
+    grid.appendChild(buildDayCell(year, month, day, leaves.get(day)));
   }
   wrapper.appendChild(grid);
 

From 7edd98457b9dab57c4d1ed66ec677c3b14f90e85 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 13:48:31 -0400
Subject: [PATCH 10/12] test(e2e): keep fresh-load calendar checks out of morph
 mode

---
 tests/features/smoke.feature |  3 +++
 tests/support/hooks.ts       | 11 +++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/tests/features/smoke.feature b/tests/features/smoke.feature
index ada425a74..1831881a1 100644
--- a/tests/features/smoke.feature
+++ b/tests/features/smoke.feature
@@ -191,6 +191,7 @@ Feature: Smoke
     When I fetch "/-/tags/issue-697-cascaded.html"
     Then the response body contains "issue-697/note"
 
+  @no-morph
   Scenario: Sidebar month folder renders as a calendar grid (issue #700)
     When I open "/calendar-test/2026/04/2026-04-15.html"
     Then the sidebar month calendar is visible with header "Apr 2026"
@@ -199,11 +200,13 @@ Feature: Smoke
     And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
     And the sidebar month calendar has 3 filled day cells
 
+  @no-morph
   Scenario: Sidebar month folder swaps the linear list, not augments it (issue #700)
     When I open "/calendar-test/2026/04/2026-04-15.html"
     Then the sidebar has no plain link with text "2026-04-01"
     And the sidebar has no plain link with text "2026-04-30"
 
+  @no-morph
   Scenario: Sidebar non-month folders do not render as a calendar (issue #700)
     When I open "/"
     Then the sidebar tree has no calendar wrapper for non-month folders
diff --git a/tests/support/hooks.ts b/tests/support/hooks.ts
index 1b778dcc7..e529147dc 100644
--- a/tests/support/hooks.ts
+++ b/tests/support/hooks.ts
@@ -172,6 +172,15 @@ AfterAll(async () => {
   }
 });
 
+const MORPH_TAG = "@morph";
+const NO_MORPH_TAG = "@no-morph";
+
+// Fresh-load assertions still run in live/static. Morph mode should keep
+// only the scenarios that explicitly exercise Ema route switching.
+Before({ tags: NO_MORPH_TAG }, function () {
+  if (mode === "morph") return "skipped" as const;
+});
+
 Before(async function (this: EmanoteWorld) {
   this.browser = browser;
   this.context = await browser.newContext({
@@ -181,8 +190,6 @@ Before(async function (this: EmanoteWorld) {
   this.page = await this.context.newPage();
 });
 
-const MORPH_TAG = "@morph";
-
 // Static mode has no WebSocket and `window.ema` is undefined, so any
 // `@morph` scenario would fail at the first `switchRoute` call.
 Before({ tags: MORPH_TAG }, function () {

From 1175914839c4d8503f21c58bffd67f0a98869360 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 15:08:52 -0400
Subject: [PATCH 11/12] Highlight active and today sidebar calendar days

---
 docs/guide/daily-notes.md                     |  2 +-
 emanote/CHANGELOG.md                          |  2 +-
 .../_emanote-static/js/sidebar-calendar.js    | 72 +++++++++++++--
 tests/features/smoke.feature                  |  8 ++
 .../sidebar_calendar_steps.ts                 | 92 ++++++++++++++++++-
 5 files changed, 166 insertions(+), 10 deletions(-)

diff --git a/docs/guide/daily-notes.md b/docs/guide/daily-notes.md
index 4155142bc..d9025fb02 100644
--- a/docs/guide/daily-notes.md
+++ b/docs/guide/daily-notes.md
@@ -10,7 +10,7 @@ If you create notes named `YYYY-MM-DD.md`, Emanote will treat them as daily note
 
 1. The backlinks panel will render daily notes separate from regular notes. Daily notes render as a year-stacked **timeline heatmap** (see [[backlinks#timeline-backlinks]]); regular notes render as a "Linked from" chip list.
 2. Each daily note automatically gets a hierarchical tag (eg: `#calendar/2025/03`) allowing you to browse them by calendar navigation in the tag index.
-3. Sidebar tree nodes whose immediate children are all daily notes of the same month (typically a `Daily/2026/04/` folder) render as a small **7-column calendar grid** in place of the linear list — each filled cell links to that day's note, missing days are muted dots.
+3. Sidebar tree nodes whose immediate children are all daily notes of the same month (typically a `Daily/2026/04/` folder) render as a small **7-column calendar grid** in place of the linear list — each filled cell links to that day's note, missing days are muted day numbers.
 
 ## Timeline backlinks demo
 
diff --git a/emanote/CHANGELOG.md b/emanote/CHANGELOG.md
index 77ede9c46..7d110cba4 100644
--- a/emanote/CHANGELOG.md
+++ b/emanote/CHANGELOG.md
@@ -16,7 +16,7 @@
   - Popup footnotes as the only on-screen UI (desktop card / mobile bottom-sheet); printed output renders the footnote list ([#642](https://github.com/srid/emanote/pull/642)).
   - Site-authored interactive JS extracted from per-template `<script>` blocks into ES modules under `_emanote-static/js/` (loaded once, cached across pages). Code-copy buttons now also appear on code blocks added by the live-server's DOM patches, not only those present at first load ([#643](https://github.com/srid/emanote/issues/643)).
   - Stork search controller migrated to the same ES-module pattern. Templates expose the search trigger via `data-emanote-stork-toggle` (event delegation) instead of inline `onclick="window.emanote.stork.toggleSearch()"`; the dark-mode mirror that re-skins the search dialog moved into the module too. Closes the Stork follow-up implied by [#643](https://github.com/srid/emanote/issues/643).
-  - **Sidebar month calendar** ([#700](https://github.com/srid/emanote/issues/700)): when a sidebar tree node holds nothing but daily-note leaves of one month (e.g. `Daily/2026/04/2026-04-21.md` … `2026-04-30.md`), the children list is replaced in-place by a 7-column calendar grid for that month. Cells with notes link to the daily note; missing days render as muted dots. Date detection lives in Haskell (`Calendar.parseRouteDay` emits `data-iso-date` on each leaf via the new `node:iso-date` splice) so JS never re-implements the YYYY-MM-DD parser. Cell palette + size constants extracted from `timeline-heatmap.js` into a shared `calendar-grid` module so a Tailwind palette refresh edits one file.
+  - **Sidebar month calendar** ([#700](https://github.com/srid/emanote/issues/700)): when a sidebar tree node holds nothing but daily-note leaves of one month (e.g. `Daily/2026/04/2026-04-21.md` … `2026-04-30.md`), the children list is replaced in-place by a 7-column calendar grid for that month. Cells with notes link to the daily note; missing days render as muted day numbers. Date detection lives in Haskell (`Calendar.parseRouteDay` emits `data-iso-date` on each leaf via the new `node:iso-date` splice) so JS never re-implements the YYYY-MM-DD parser. Cell palette + size constants extracted from `timeline-heatmap.js` into a shared `calendar-grid` module so a Tailwind palette refresh edits one file.
   - **Default theme refresh** ([#699](https://github.com/srid/emanote/pull/699)): every panel — title, sidebar, right-panel (TOC + backlinks + timeline), bottom strip, footer — attaches inside one rounded `#container` card, so the page UI reads as a single composed unit instead of stacked stripes. Wikilinks, backlinks, queries, timeline entries, tasks index, and inline tags share one chip palette (`bg-primary-50/70 text-primary-600 font-semibold tracking-tight`); TOC drops primary entirely (entries map to plain-text headings). Heading scale tightens to a ~1.20 ratio with uniform `font-semibold`. Daily-note backlinks render as a year-stacked heatmap with cell-hover context flyouts. Special pages (`/-/all`, `/-/tags`, `/-/tasks`) pick up the same chrome plus a back-to-Home link. Tables, in-prose task lists, and the footer all get coordinated styling so the page reads as one design language. Mona Sans replaces Space Grotesk for the chrome typeface.
 - Mermaid: add `elk` layout ([#618](https://github.com/srid/emanote/pull/618))
 - Home Manager module: macOS support via launchd ([#623](https://github.com/srid/emanote/pull/623))
diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
index 5add082c6..0dfdb77b2 100644
--- a/emanote/default/_emanote-static/js/sidebar-calendar.js
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -28,9 +28,58 @@ const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700
 const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 mb-1';
 const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
 const GRID_CLASSES = 'grid grid-cols-7 gap-0.5 place-items-center';
-const CELL_BASE = 'flex items-center justify-center text-[0.65rem] w-6 h-6 rounded-sm tabular-nums';
-const CELL_FILLED = CELL_BASE + ' font-semibold bg-primary-500 dark:bg-primary-400 text-white hover:bg-primary-700 dark:hover:bg-primary-300 transition-colors';
+const CELL_BASE = 'flex items-center justify-center text-[0.65rem] w-6 h-6 rounded-sm tabular-nums transition-colors';
+const CELL_FILLED = CELL_BASE + ' font-semibold bg-primary-500 dark:bg-primary-400 text-white hover:bg-primary-700 dark:hover:bg-primary-300';
+const CELL_TODAY_MARKER = ' underline decoration-2 underline-offset-2';
+const CELL_FILLED_TODAY = CELL_FILLED + ' ring-2 ring-primary-300/80 dark:ring-primary-500/80 ring-offset-1 ring-offset-gray-50 dark:ring-offset-gray-900' + CELL_TODAY_MARKER;
+const CELL_ACTIVE = CELL_BASE + ' font-bold bg-primary-700 dark:bg-primary-300 text-white dark:text-gray-950 ring-2 ring-primary-300/80 dark:ring-primary-500/80 ring-offset-1 ring-offset-gray-50 dark:ring-offset-gray-900 shadow-sm';
+const CELL_ACTIVE_TODAY = CELL_ACTIVE + CELL_TODAY_MARKER;
 const CELL_EMPTY = CELL_BASE + ' text-gray-400 dark:text-gray-600';
+const CELL_EMPTY_TODAY = CELL_BASE + ' font-semibold text-primary-700 dark:text-primary-300 bg-white dark:bg-gray-950 border border-primary-400/80 dark:border-primary-500/80' + CELL_TODAY_MARKER;
+
+function dateToIso(year, month, day) {
+  return [
+    String(year).padStart(4, '0'),
+    String(month).padStart(2, '0'),
+    String(day).padStart(2, '0'),
+  ].join('-');
+}
+
+function todayIso() {
+  const now = new Date();
+  return dateToIso(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+
+function isCurrentRoute(url) {
+  return new URL(url, document.baseURI).pathname === window.location.pathname;
+}
+
+function refreshDayCell(cell, today) {
+  const isToday = cell.dataset.isoDate === today;
+  cell.toggleAttribute('data-today', isToday);
+
+  if (cell.tagName === 'A') {
+    const isActive = isCurrentRoute(cell.href);
+    cell.className = isActive
+      ? (isToday ? CELL_ACTIVE_TODAY : CELL_ACTIVE)
+      : (isToday ? CELL_FILLED_TODAY : CELL_FILLED);
+    cell.toggleAttribute('data-active-route', isActive);
+    if (isActive) {
+      cell.setAttribute('aria-current', 'page');
+    } else {
+      cell.removeAttribute('aria-current');
+    }
+  } else {
+    cell.className = isToday ? CELL_EMPTY_TODAY : CELL_EMPTY;
+  }
+}
+
+function refreshCalendar(calendar) {
+  const today = todayIso();
+  for (const cell of calendar.querySelectorAll('[data-iso-date]')) {
+    refreshDayCell(cell, today);
+  }
+}
 
 // Returns { year, month, leaves: Map<day, {url, title}> } when every
 // child of `wrapper` is a leaf with a parseable iso-date in the same
@@ -68,24 +117,30 @@ function classifyMonthGroup(wrapper) {
 // undefined when no daily note exists for it. Filled cells link to the
 // note; empty cells are non-interactive but still show the day number
 // so the calendar reads as a calendar at a glance.
-function buildDayCell(year, month, day, entry) {
+function buildDayCell(year, month, day, entry, today) {
+  const iso = dateToIso(year, month, day);
   if (entry) {
     const a = document.createElement('a');
-    a.className = CELL_FILLED;
     a.href = entry.url;
+    a.dataset.day = String(day);
+    a.dataset.isoDate = iso;
     a.setAttribute('aria-label', formatCellHeader(year, month, day, entry.title));
     a.textContent = String(day);
+    refreshDayCell(a, today);
     return a;
   }
   const sp = document.createElement('span');
-  sp.className = CELL_EMPTY;
+  sp.dataset.day = String(day);
+  sp.dataset.isoDate = iso;
   sp.textContent = String(day);
+  refreshDayCell(sp, today);
   return sp;
 }
 
 function buildCalendar({ year, month, leaves }) {
   const wrapper = document.createElement('div');
   wrapper.className = WRAPPER_CLASSES;
+  const today = todayIso();
 
   const header = document.createElement('div');
   header.className = HEADER_CLASSES;
@@ -116,7 +171,7 @@ function buildCalendar({ year, month, leaves }) {
 
   const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
   for (let day = 1; day <= lastDay; day++) {
-    grid.appendChild(buildDayCell(year, month, day, leaves.get(day)));
+    grid.appendChild(buildDayCell(year, month, day, leaves.get(day), today));
   }
   wrapper.appendChild(grid);
 
@@ -129,7 +184,10 @@ function isAlreadyRendered(wrapper) {
 
 function render() {
   for (const wrapper of document.querySelectorAll('.emanote-tree-children')) {
-    if (isAlreadyRendered(wrapper)) continue;
+    if (isAlreadyRendered(wrapper)) {
+      refreshCalendar(wrapper.firstElementChild);
+      continue;
+    }
     const group = classifyMonthGroup(wrapper);
     if (!group) continue;
     const calendar = buildCalendar(group);
diff --git a/tests/features/smoke.feature b/tests/features/smoke.feature
index 1831881a1..406b5bc8d 100644
--- a/tests/features/smoke.feature
+++ b/tests/features/smoke.feature
@@ -200,6 +200,13 @@ Feature: Smoke
     And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
     And the sidebar month calendar has 3 filled day cells
 
+  @no-morph
+  Scenario: Sidebar month calendar distinguishes active route and today (issue #700)
+    Given the browser date is "2026-04-30"
+    When I open "/calendar-test/2026/04/2026-04-15.html"
+    Then the sidebar month calendar marks day 15 as the active route
+    And the sidebar month calendar marks day 30 as today
+
   @no-morph
   Scenario: Sidebar month folder swaps the linear list, not augments it (issue #700)
     When I open "/calendar-test/2026/04/2026-04-15.html"
@@ -217,3 +224,4 @@ Feature: Smoke
     And I navigate via Ema to "/calendar-test/2026/04/2026-04-30.html"
     Then the sidebar month calendar is visible with header "Apr 2026"
     And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
+    And the sidebar month calendar marks day 30 as the active route
diff --git a/tests/step_definitions/sidebar_calendar_steps.ts b/tests/step_definitions/sidebar_calendar_steps.ts
index 31a9b95f1..82fb589e2 100644
--- a/tests/step_definitions/sidebar_calendar_steps.ts
+++ b/tests/step_definitions/sidebar_calendar_steps.ts
@@ -13,7 +13,7 @@
  * (no WebSocket, no `window.ema`).
  */
 
-import { Then } from "@cucumber/cucumber";
+import { Given, Then } from "@cucumber/cucumber";
 import { EmanoteWorld } from "../support/world.ts";
 import * as assert from "node:assert";
 
@@ -29,6 +29,49 @@ async function waitForCalendar(page: EmanoteWorld["page"]): Promise<void> {
     .waitFor({ state: "attached", timeout: 5_000 });
 }
 
+async function getCalendarDay(
+  page: EmanoteWorld["page"],
+  day: number,
+): Promise<ReturnType<EmanoteWorld["page"]["locator"]>> {
+  await waitForCalendar(page);
+  const cell = page.locator(`${CALENDAR_SEL} [data-day="${day}"]`).first();
+  await cell.waitFor({ state: "attached", timeout: 5_000 });
+  return cell;
+}
+
+Given(
+  "the browser date is {string}",
+  async function (this: EmanoteWorld, isoDate: string) {
+    assert.match(
+      isoDate,
+      /^\d{4}-\d{2}-\d{2}$/,
+      "Browser date fixture must be YYYY-MM-DD.",
+    );
+    await this.page.addInitScript({
+      content: `
+        (() => {
+          const date = ${JSON.stringify(isoDate)};
+          const RealDate = Date;
+          const [year, month, day] = date.split("-").map(Number);
+          const fixedTime = new RealDate(year, month - 1, day, 12).getTime();
+          function MockDate(...args) {
+            if (new.target) {
+              return args.length === 0
+                ? new RealDate(fixedTime)
+                : new RealDate(...args);
+            }
+            return new RealDate(fixedTime).toString();
+          }
+          Object.setPrototypeOf(MockDate, RealDate);
+          MockDate.prototype = RealDate.prototype;
+          MockDate.now = () => fixedTime;
+          window.Date = MockDate;
+        })();
+      `,
+    });
+  },
+);
+
 Then(
   "the sidebar month calendar is visible with header {string}",
   async function (this: EmanoteWorld, header: string) {
@@ -45,6 +88,53 @@ Then(
   },
 );
 
+Then(
+  "the sidebar month calendar marks day {int} as the active route",
+  async function (this: EmanoteWorld, day: number) {
+    const cell = await getCalendarDay(this.page, day);
+    const active = await cell.getAttribute("data-active-route");
+    const ariaCurrent = await cell.getAttribute("aria-current");
+    const cls = (await cell.getAttribute("class")) ?? "";
+    assert.notStrictEqual(
+      active,
+      null,
+      `Expected day ${day} to carry data-active-route. Current route highlighting likely failed to compare the cell href with window.location.pathname.`,
+    );
+    assert.strictEqual(
+      ariaCurrent,
+      "page",
+      `Expected day ${day} to expose aria-current="page" for the active route.`,
+    );
+    assert.ok(
+      cls.includes("bg-primary-700"),
+      `Expected active route day ${day} to use the selected primary background; class=${JSON.stringify(cls)}.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar marks day {int} as today",
+  async function (this: EmanoteWorld, day: number) {
+    const cell = await getCalendarDay(this.page, day);
+    const today = await cell.getAttribute("data-today");
+    const iso = await cell.getAttribute("data-iso-date");
+    const cls = (await cell.getAttribute("class")) ?? "";
+    const browserDate = await this.page.evaluate(() => {
+      const now = new Date();
+      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+    });
+    assert.notStrictEqual(
+      today,
+      null,
+      `Expected day ${day} to carry data-today. cell date=${JSON.stringify(iso)}, browser date=${JSON.stringify(browserDate)}. Today highlighting likely failed to compare the cell date with the browser's local date.`,
+    );
+    assert.ok(
+      cls.includes("underline"),
+      `Expected today day ${day} to include the visual today marker; class=${JSON.stringify(cls)}.`,
+    );
+  },
+);
+
 Then(
   "the sidebar month calendar links day {int} to {string}",
   async function (this: EmanoteWorld, day: number, hrefSubstring: string) {

From 9eeaa34a818031a50d9ada63ea6c1e6c43a5a898 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 4 May 2026 15:22:47 -0400
Subject: [PATCH 12/12] Run sidebar calendar checks in morph mode

---
 tests/features/smoke.feature                  |  4 --
 .../sidebar_calendar_steps.ts                 | 48 ++++++++++---------
 tests/support/hooks.ts                        |  7 ---
 3 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/tests/features/smoke.feature b/tests/features/smoke.feature
index 406b5bc8d..ba267f1dc 100644
--- a/tests/features/smoke.feature
+++ b/tests/features/smoke.feature
@@ -191,7 +191,6 @@ Feature: Smoke
     When I fetch "/-/tags/issue-697-cascaded.html"
     Then the response body contains "issue-697/note"
 
-  @no-morph
   Scenario: Sidebar month folder renders as a calendar grid (issue #700)
     When I open "/calendar-test/2026/04/2026-04-15.html"
     Then the sidebar month calendar is visible with header "Apr 2026"
@@ -200,20 +199,17 @@ Feature: Smoke
     And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
     And the sidebar month calendar has 3 filled day cells
 
-  @no-morph
   Scenario: Sidebar month calendar distinguishes active route and today (issue #700)
     Given the browser date is "2026-04-30"
     When I open "/calendar-test/2026/04/2026-04-15.html"
     Then the sidebar month calendar marks day 15 as the active route
     And the sidebar month calendar marks day 30 as today
 
-  @no-morph
   Scenario: Sidebar month folder swaps the linear list, not augments it (issue #700)
     When I open "/calendar-test/2026/04/2026-04-15.html"
     Then the sidebar has no plain link with text "2026-04-01"
     And the sidebar has no plain link with text "2026-04-30"
 
-  @no-morph
   Scenario: Sidebar non-month folders do not render as a calendar (issue #700)
     When I open "/"
     Then the sidebar tree has no calendar wrapper for non-month folders
diff --git a/tests/step_definitions/sidebar_calendar_steps.ts b/tests/step_definitions/sidebar_calendar_steps.ts
index 82fb589e2..e061adab8 100644
--- a/tests/step_definitions/sidebar_calendar_steps.ts
+++ b/tests/step_definitions/sidebar_calendar_steps.ts
@@ -20,6 +20,29 @@ import * as assert from "node:assert";
 const CALENDAR_SEL = ".emanote-sidebar-calendar";
 const SIDEBAR_TREE_ROOT_SEL = "#sidebar-tree, nav";
 
+function mockDateScript(isoDate: string): string {
+  return `
+    (() => {
+      const date = ${JSON.stringify(isoDate)};
+      const RealDate = Date;
+      const [year, month, day] = date.split("-").map(Number);
+      const fixedTime = new RealDate(year, month - 1, day, 12).getTime();
+      function MockDate(...args) {
+        if (new.target) {
+          return args.length === 0
+            ? new RealDate(fixedTime)
+            : new RealDate(...args);
+        }
+        return new RealDate(fixedTime).toString();
+      }
+      Object.setPrototypeOf(MockDate, RealDate);
+      MockDate.prototype = RealDate.prototype;
+      MockDate.now = () => fixedTime;
+      window.Date = MockDate;
+    })();
+  `;
+}
+
 // Wait for at least one calendar wrapper to appear. The widget runs on
 // `ready`, so the wrapper materialises a frame or two after DOMContentLoaded.
 async function waitForCalendar(page: EmanoteWorld["page"]): Promise<void> {
@@ -47,28 +70,9 @@ Given(
       /^\d{4}-\d{2}-\d{2}$/,
       "Browser date fixture must be YYYY-MM-DD.",
     );
-    await this.page.addInitScript({
-      content: `
-        (() => {
-          const date = ${JSON.stringify(isoDate)};
-          const RealDate = Date;
-          const [year, month, day] = date.split("-").map(Number);
-          const fixedTime = new RealDate(year, month - 1, day, 12).getTime();
-          function MockDate(...args) {
-            if (new.target) {
-              return args.length === 0
-                ? new RealDate(fixedTime)
-                : new RealDate(...args);
-            }
-            return new RealDate(fixedTime).toString();
-          }
-          Object.setPrototypeOf(MockDate, RealDate);
-          MockDate.prototype = RealDate.prototype;
-          MockDate.now = () => fixedTime;
-          window.Date = MockDate;
-        })();
-      `,
-    });
+    const script = mockDateScript(isoDate);
+    await this.page.addInitScript({ content: script });
+    await this.page.evaluate((source) => new Function(source)(), script);
   },
 );
 
diff --git a/tests/support/hooks.ts b/tests/support/hooks.ts
index e529147dc..3e1493ce5 100644
--- a/tests/support/hooks.ts
+++ b/tests/support/hooks.ts
@@ -173,13 +173,6 @@ AfterAll(async () => {
 });
 
 const MORPH_TAG = "@morph";
-const NO_MORPH_TAG = "@no-morph";
-
-// Fresh-load assertions still run in live/static. Morph mode should keep
-// only the scenarios that explicitly exercise Ema route switching.
-Before({ tags: NO_MORPH_TAG }, function () {
-  if (mode === "morph") return "skipped" as const;
-});
 
 Before(async function (this: EmanoteWorld) {
   this.browser = browser;