@dmthepm/commune 0.1.0 → 0.2.0

package/src/components/SlidingPanes.astro

@@ -0,0 +1,782 @@
+---
+/**
+ * The sliding-pane reading surface.
+ *
+ * Two pages render notes into panes: the site root (`src/pages/index.astro`)
+ * and every note (`src/pages/notes/[...slug].astro`). They carried separate
+ * copies of this script and this stylesheet, and the copies drifted in both
+ * directions: the note page grew pane widths that respond at 1600px and
+ * 1280px, a fallback layout for when the script does not run, and a container
+ * that positions against `var(--header-height)` rather than a literal `64px`;
+ * the home page grew the pane's own scrollbar and lost the rest. This is the
+ * one implementation both of them use, and where they disagreed the note
+ * page's version is the one kept.
+ *
+ * Expects the page to render `<main id="pane-container">` containing a first
+ * `.pane > .body-wrapper > .body > .pane-content`. Page-specific typography —
+ * `.prose`, the note metadata, the home page's cards — stays on the page.
+ *
+ * The per-pane initialisers it calls (`window.initializeBacklinks`,
+ * `initializeStarredLinks`, `initializeHeaderStar`, `updateRelativeDates`,
+ * and the home page's `updateRecentUpdateDates`) are all optional: each is
+ * checked for before it is called, so a page that does not render backlinks or
+ * dates simply does not define one.
+ */
+---
+<script is:inline>
+// === CLEAN WIKI ARCHITECTURE ===
+// Single initialization, event delegation, no duplicates
+
+if (window.wikiInitialized) {
+  console.log('Wiki already initialized, skipping...');
+} else {
+  console.log('Initializing wiki with clean architecture...');
+
+  // --- Global State ---
+  const previewCache = new Map();
+  let isInitialized = false;
+
+  // --- Utility Functions ---
+  const normalizeUrl = (url) => new URL(url, window.location.origin).pathname;
+  // scroll-behavior in CSS does not reach scrollIntoView/scrollTo options.
+  const reducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  // Note titles are the vault author's prose and go into markup below; a stray
+  // <, & or " in one should read as that character rather than break the card.
+  const escapeHtml = (value) => String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+  const showPreview = (el, html, x, y) => {
+    try {
+      let card = document.getElementById('note-hover');
+      if(!card){
+        card = document.createElement('div');
+        card.id = 'note-hover';
+        card.style.position = 'fixed';
+        card.style.maxWidth = '380px';
+        card.style.background = 'var(--c-bg)';
+        card.style.boxShadow = 'var(--c-shadow-xl)';
+        card.style.border = '1px solid var(--c-border)';
+        card.style.borderRadius = 'var(--c-radius-lg)';
+        card.style.padding = '1rem 1.2rem';
+        card.style.zIndex = 'var(--z-hover)';
+        card.style.pointerEvents = 'none';
+        document.body.appendChild(card);
+      }
+      card.innerHTML = html;
+
+      // Viewport-aware positioning
+      const padding = 16;
+      const offsetFromCursor = 16;
+
+      // Measure card dimensions
+      card.style.opacity = '0';
+      card.hidden = false;
+      const rect = card.getBoundingClientRect();
+      const cardWidth = rect.width;
+      const cardHeight = rect.height;
+      card.style.opacity = '1';
+
+      // Calculate position with edge detection
+      let left = x + offsetFromCursor;
+      let top = y + offsetFromCursor;
+
+      // Check right edge
+      if (left + cardWidth + padding > window.innerWidth) {
+        left = x - cardWidth - offsetFromCursor;
+        if (left < padding) left = window.innerWidth - cardWidth - padding;
+      }
+      if (left < padding) left = padding;
+
+      // Check bottom edge
+      if (top + cardHeight + padding > window.innerHeight) {
+        top = y - cardHeight - offsetFromCursor;
+        if (top < padding) top = window.innerHeight - cardHeight - padding;
+      }
+      if (top < padding) top = padding;
+
+      card.style.left = left + 'px';
+      card.style.top = top + 'px';
+      card.hidden = false;
+    } catch (error) {
+      console.error('Error showing hover card:', error);
+    }
+  };
+
+  const hidePreview = () => {
+    try {
+      const card = document.getElementById('note-hover');
+      if (card) card.hidden = true;
+    } catch (error) {
+      console.error('Error hiding hover card:', error);
+    }
+  };
+
+
+  // --- Preview Event Handler ---
+  const handlePreviewHover = async (e) => {
+    // Declared outside the try: the catch below needs it to place the failure
+    // card, and a `const` inside the block is not in scope there.
+    const a = e.target?.closest?.('a[href^="/notes/"]');
+    if(!a) return;
+    try {
+      const url = a.getAttribute('href');
+      if(previewCache.has(url)){
+        showPreview(a, previewCache.get(url), e.clientX, e.clientY);
+        return;
+      }
+
+      // Show immediate loading state
+      showPreview(a, '<div style="font-weight:600;color:var(--c-text-muted)">Loading preview...</div>', e.clientX, e.clientY);
+
+      // Reduced timeout for faster response
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 2000);
+
+      const r = await fetch(url, {
+        signal: controller.signal,
+        headers: { 'Accept': 'text/html' }
+      });
+      clearTimeout(timeoutId);
+
+      if (!r.ok) {
+        showPreview(a, '<div style="color:var(--c-text-muted)">Preview unavailable</div>', e.clientX, e.clientY);
+        return;
+      }
+
+      const t = await r.text();
+      const doc = new DOMParser().parseFromString(t, 'text/html');
+      const content = doc.querySelector('.pane .pane-content') ?? doc.body;
+      const paras = Array.from(content.querySelectorAll('p')).slice(0,3).map(p => p.outerHTML).join('');
+      const title = escapeHtml(doc.title?.replace(/ \|.*/, '') || 'Untitled');
+      const heading = `<div style="font-size:1.1rem;font-weight:600;line-height:1.3">${title}</div>`;
+      // A note with nothing to quote is not a broken preview. Show the title
+      // on its own rather than a heading above an empty box.
+      const html = paras
+        ? `<div style="font-size:1.1rem;font-weight:600;margin-bottom:.5rem;line-height:1.3">${title}</div><div style="font-size:0.85rem;line-height:1.5;color:var(--c-text-accent)">${paras}</div>`
+        : heading;
+      previewCache.set(url, html);
+      showPreview(a, html, e.clientX, e.clientY);
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        showPreview(a, '<div style="color:var(--c-text-muted)">Preview failed</div>', e.clientX, e.clientY);
+      }
+    }
+  };
+
+  const handlePreviewLeave = (e) => {
+    try {
+      const a = e.target?.closest?.('a[href^="/notes/"]');
+      if(a) setTimeout(hidePreview, 100);
+    } catch (error) {
+      console.error('Error in mouseleave handler:', error);
+    }
+  };
+
+  // --- Pane Management Functions ---
+  const container = document.getElementById('pane-container');
+  if (!container) {
+    console.error('Pane container not found!');
+  } else {
+
+  const updateContainerLayout = () => {
+    const paneCount = container.querySelectorAll('.pane').length;
+    container.classList.toggle('multi-pane', paneCount > 1);
+  };
+
+  const openPane = async (url) => {
+    const normalizedUrl = normalizeUrl(url);
+    // The address bar may only claim the note once the pane holding it
+    // actually exists. Anything that stops that — a dead wikilink, a truncated
+    // response, a timeout — hands the URL to the browser so the reader lands
+    // on the real 404 instead of on a page that lies about which note it is
+    // showing.
+    const recordVisit = () => history.pushState({ pane: normalizedUrl }, '', normalizedUrl);
+    const giveUp = () => { window.location.href = url; };
+
+    try {
+      console.log(`Opening pane for: ${url}`);
+
+      // Check for existing pane to prevent duplicates
+      const existingPane = container.querySelector(`[data-url="${normalizedUrl}"]`);
+      if (existingPane) {
+        console.log('Pane already exists, focusing existing pane');
+        focusPane(existingPane);
+        recordVisit();
+        return;
+      }
+
+      // Fetch content
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 10000);
+
+      const res = await fetch(url, {
+        headers: { 'Accept': 'text/html;charset=utf-8' },
+        signal: controller.signal
+      });
+      clearTimeout(timeoutId);
+
+      if (!res.ok) {
+        console.error(`Failed to fetch pane content: ${res.status}`);
+        giveUp();
+        return;
+      }
+
+      const html = await res.text();
+      const doc = new DOMParser().parseFromString(html, 'text/html');
+      const fetchedContent = doc.querySelector('.pane .pane-content');
+
+      if (!fetchedContent) {
+        console.error('No .pane-content found in fetched page');
+        giveUp();
+        return;
+      }
+
+      // Create new pane
+      const pane = document.createElement('div');
+      pane.className = 'pane';
+      pane.dataset.url = normalizedUrl;
+      pane.setAttribute('tabindex', '-1');
+
+      pane.innerHTML = `
+          <button class="close" aria-label="Close">×</button>
+          <div class="body-wrapper">
+              <div class="body">
+                  <div class="pane-content">${fetchedContent.innerHTML}</div>
+              </div>
+          </div>
+      `;
+
+      // Attach close listener
+      pane.querySelector('.close').addEventListener('click', (e) => {
+          e.stopPropagation();
+          closePane(pane);
+      });
+
+      // Append and focus
+      container.appendChild(pane);
+      void pane.offsetHeight;
+      updateContainerLayout();
+
+      // Record the visit here, before the per-pane initialisers run:
+      // initializeHeaderStar decides whether to star the pane's title by
+      // reading window.location.pathname, so the URL has to be the new note's
+      // by the time it looks.
+      recordVisit();
+
+      // Initialize backlinks, starred links, and header star for the new pane
+      if (typeof window.initializeBacklinks === 'function') {
+        window.initializeBacklinks(pane);
+      }
+      if (typeof window.initializeStarredLinks === 'function') {
+        window.initializeStarredLinks(pane);
+      }
+      if (typeof window.initializeHeaderStar === 'function') {
+        window.initializeHeaderStar(pane);
+      }
+      // Update relative dates for the new pane
+      if (typeof window.updateRelativeDates === 'function') {
+        window.updateRelativeDates();
+      }
+      // Home page only: its recent-updates card carries relative dates too.
+      // Undefined on note pages, so this is a no-op there.
+      if (typeof window.updateRecentUpdateDates === 'function') {
+        window.updateRecentUpdateDates();
+      }
+
+      setTimeout(() => focusPane(pane), 0);
+      console.log('Pane opened successfully');
+    } catch (error) {
+      // Includes the 10s AbortError: a click that produced nothing at all is
+      // worse than a full navigation the browser can report on.
+      console.error('Error opening pane:', error);
+      giveUp();
+    }
+  };
+
+  const focusPane = (pane) => {
+    requestAnimationFrame(() => {
+      if (document.activeElement && document.activeElement !== pane && document.activeElement.blur) {
+        document.activeElement.blur();
+      }
+      pane.focus({ preventScroll: true });
+      // Only scroll pane into view on desktop (>= 1024px)
+      // On mobile, panes fill the viewport so scrollIntoView is not needed
+      if (window.innerWidth >= 1024) {
+        requestAnimationFrame(() => {
+          pane.scrollIntoView({ behavior: reducedMotion() ? 'auto' : 'smooth', block: 'nearest', inline: 'start' });
+        });
+      }
+    });
+  };
+
+  const closePane = (pane) => {
+    if (pane === container.firstElementChild) return;
+    const previousPane = pane.previousElementSibling;
+    pane.remove();
+    updateContainerLayout();
+    if (previousPane && previousPane.classList.contains('pane')) {
+      focusPane(previousPane);
+      if (previousPane.dataset.url) {
+        history.replaceState({ pane: previousPane.dataset.url }, '', previousPane.dataset.url);
+      }
+    }
+  };
+
+  // --- Single Event Delegation Handler ---
+  const handleWikiClick = (e) => {
+    // Handle link clicks within content
+    const inContent = e.target?.closest?.('article.prose, aside.backlinks');
+    if (inContent) {
+      const a = e.target?.closest?.('a[href^="/notes/"]');
+      if (a) {
+        // Don't intercept if modifier keys are pressed
+        if (e.ctrlKey || e.metaKey || e.shiftKey) return;
+
+        // On desktop (>= 1024px), intercept. On mobile, allow normal navigation.
+        if (window.innerWidth < 1024) return;
+
+        // Intercept the link and open in a pane. openPane owns the history
+        // entry, so the URL only changes if the pane opened.
+        e.preventDefault();
+        openPane(a.href);
+        return;
+      }
+    }
+
+    // Handle pane focusing (only if we didn't handle a content link)
+    if (e.target?.closest('a, button, input, textarea')) {
+      return;
+    }
+
+    const clickedPane = e.target?.closest?.('.pane');
+    if (clickedPane && document.activeElement !== clickedPane) {
+      focusPane(clickedPane);
+      if (clickedPane.dataset.url) {
+        history.pushState({ pane: clickedPane.dataset.url }, '', clickedPane.dataset.url);
+      }
+    }
+  };
+
+  // Handle popstate (browser history navigation)
+  const handlePopstate = () => {
+    const targetUrl = normalizeUrl(window.location.href);
+    const panes = Array.from(container.querySelectorAll('.pane'));
+    const targetIndex = panes.findLastIndex(p => p.dataset.url === targetUrl);
+
+    if (targetIndex !== -1) {
+      for (let i = panes.length - 1; i > targetIndex; i--) {
+        panes[i].remove();
+      }
+      updateContainerLayout();
+      focusPane(panes[targetIndex]);
+    } else {
+      window.location.reload();
+    }
+  };
+
+  // Initialize the first pane
+  const firstPane = container.querySelector('.pane');
+  if (firstPane) {
+    firstPane.dataset.url = normalizeUrl(window.location.href);
+    // Deliberately not focused: focusing the pane on load put the first tab
+    // stop inside the note, so the skip link and the header controls were only
+    // reachable by tabbing backwards.
+    updateContainerLayout();
+  }
+
+  // --- SINGLE EVENT DELEGATION SETUP ---
+  // Remove any existing listeners to prevent duplicates
+  document.removeEventListener('mouseenter', handlePreviewHover, true);
+  document.removeEventListener('mouseleave', handlePreviewLeave, true);
+  container.removeEventListener('click', handleWikiClick);
+  window.removeEventListener('popstate', handlePopstate);
+
+  // Add hover preview listeners ONLY on desktop (>= 1024px)
+  // This prevents the brief preview flash on mobile/tablet when tapping links
+  if (window.innerWidth >= 1024) {
+    document.addEventListener('mouseenter', handlePreviewHover, true);
+    document.addEventListener('mouseleave', handlePreviewLeave, true);
+  }
+
+  // Add navigation listeners on all devices
+  container.addEventListener('click', handleWikiClick);
+  window.addEventListener('popstate', handlePopstate);
+
+  // Mark as successfully initialized
+  window.wikiInitialized = true;
+  console.log('Wiki initialized with clean architecture');
+  } // Close the else block for container check
+}
+
+
+</script>
+
+<style is:global>
+  /* Ensure body scroll is locked on desktop as the pane container handles it */
+  @media (min-width: 1024px) {
+    body {
+      overflow: hidden;
+    }
+  }
+
+  /* Define variables and responsive adjustments */
+  :root {
+      --header-height: 73px; /* first paint only; Header.astro measures it */
+      --transition-timing: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+      --container-padding-h: 3vw; /* Horizontal padding when left-aligned */
+
+      /* Default (Large Desktop > 1600px): Optimized for readability, aims for ~3 panes */
+      --pane-width: clamp(500px, 40vw, 700px);
+      --collapsed-visible-width: 120px;
+  }
+
+  /* Medium Desktop (e.g., 1440px laptop) - Adjust for better multi-pane view, aims for ~2-3 panes */
+  @media (max-width: 1600px) {
+      :root {
+          --pane-width: clamp(480px, 45vw, 680px);
+          --collapsed-visible-width: 100px;
+      }
+  }
+
+  /* Small Desktop (e.g., 1280px) - Aims for ~2 panes */
+   @media (max-width: 1280px) {
+      :root {
+          --pane-width: clamp(450px, 50vw, 650px);
+          --collapsed-visible-width: 80px;
+      }
+  }
+
+  /* --- Pane Container --- */
+  #pane-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start; 
+    overflow-x: auto; 
+    /* Position absolutely to cover the viewport below the header */
+    position: absolute;
+    top: var(--header-height);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1.5rem 0; /* Vertical padding for the container */
+    scroll-behavior: smooth;
+
+    /* FIX: Ensure pane area sits above page content but below header */
+    z-index: var(--z-panes);
+
+    /* Default (Single Pane): Center the pane */
+    /* Calculates required padding to center the pane, ensuring a minimum standard padding */
+    padding-left: max(var(--container-padding-h), calc(50vw - var(--pane-width) / 2));
+    
+    /* Add transition for the alignment shift */
+    transition: padding-left var(--transition-timing);
+  }
+
+  /* When multiple panes are open (via JS class), shift alignment to the left */
+  #pane-container.multi-pane {
+    padding-left: var(--container-padding-h);
+  }
+
+
+  /* Hide the horizontal scrollbar on the main container */
+  #pane-container::-webkit-scrollbar {
+      display: none;
+  }
+  #pane-container {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+  }
+
+
+  /* --- Individual Pane Styling & Cascading Logic --- */
+  .pane {
+    /* FIX: flex-basis is more reliable than width for flex children */
+    flex: 0 0 var(--pane-width);
+    width: var(--pane-width);
+    min-width: 0;
+    max-width: var(--pane-width);
+    
+    background: var(--c-bg);
+    
+    /* Height management */
+    height: calc(100vh - var(--header-height) - 3rem); 
+
+    /* Clip content that overflows the pane boundary horizontally */
+    overflow: hidden; 
+
+    /* FIX: Set position relative so the absolute close button anchors to it */
+    position: relative;
+    outline: none; /* Remove default focus outline */
+    
+    /* FIX: Z-index layering ensures active pane always paints on top with negative margin stack */
+    z-index: 1; /* Baseline for all panes */
+    
+    /* Cascading effect: Negative margin pulls the next pane closer */
+    margin-right: calc(var(--pane-width) * -1 + var(--collapsed-visible-width));
+
+    /* Smooth transition for the sliding/collapsing effect */
+    transition: margin-right var(--transition-timing), 
+                box-shadow 0.3s ease, 
+                border-color 0.3s ease;
+    
+    /* Default styles for subsequent panes (cards) */
+    border-radius: var(--c-radius-md);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Softer shadow when collapsed */
+    border: 1px solid var(--c-border);
+  }
+
+  /* FIX: Bump z-index on hover and focus to ensure proper paint order */
+  .pane:hover {
+    z-index: 2;
+  }
+  
+  .pane:focus-within {
+    z-index: 3;
+  }
+
+  /* Differentiate the first pane: Make it look like the main page content (no card styles) */
+  .pane:first-child {
+      box-shadow: none;
+      border: none;
+      border-radius: 0;
+  }
+
+  /* When a pane is focused (clicked or scrolled to), expand it */
+  .pane:focus-within {
+      /* Expand the focused pane to have normal spacing */
+      margin-right: 1.5rem; 
+      border-color: var(--c-accent-border);
+      /* Stronger shadow when focused (for depth) */
+      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Ensure the first pane doesn't get card styles even when focused */
+   .pane:first-child:focus-within {
+      box-shadow: none;
+      border: none;
+   }
+
+  /* The last pane should always have spacing on the right edge of the screen */
+  /* Default (Single Pane): Needs centering margin on the right */
+  .pane:last-child {
+      margin-right: max(var(--container-padding-h), calc(50vw - var(--pane-width) / 2));
+      transition: margin-right var(--transition-timing); /* Animate the margin shift */
+  }
+
+  /* When multiple panes are open, the last pane only needs standard spacing */
+  #pane-container.multi-pane .pane:last-child {
+     margin-right: var(--container-padding-h);
+  }
+
+  
+  /* --- Pane Content Wrapper (Handles internal scrolling) --- */
+  .pane .body-wrapper {
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      /* Optional: Style the vertical scrollbar inside the pane */
+      scrollbar-width: thin;
+      scrollbar-color: var(--c-border) var(--c-bg-soft);
+  }
+
+  /* --- Pane Content --- */
+  .pane .body {
+    /* FIX: Adjusted padding. Increased right padding slightly to ensure text doesn't run under the absolute button. */
+    padding: 2rem 2.5rem 4rem 1.5rem;
+    max-width: 65ch;
+    margin: 0 auto;
+  }
+
+  /* --- Close Button --- */
+  /* Hide close button on the first pane */
+  .pane:first-child .close {
+    display: none;
+  }
+
+  .pane .close { 
+    /* FIX: Revert to absolute positioning, anchored to the .pane */
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 10; /* Ensure it's above content */
+
+    /* Reset float styles that caused the issue */
+    float: none;
+    margin: 0;
+
+    width: 32px;
+    height: 32px;
+    background: var(--c-bg-soft);
+    border: 1px solid var(--c-border);
+    border-radius: 50%; /* Circular button */
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 1.3rem; 
+    line-height: 1;
+    color: var(--c-text-muted);
+    transition: all 0.15s ease;
+    opacity: 0.8;
+    flex-shrink: 0;
+  }
+  
+  .pane .close:hover { 
+    background: var(--c-bg-muted); 
+    color: var(--c-text);
+    opacity: 1;
+  }
+
+  /* The pane's own scrollbar, so a long note does not paint a stock grey bar
+     down the middle of the reading column. WebKit needs the pseudo-elements;
+     Firefox takes the two standard properties above. */
+  .pane .body-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+  .pane .body-wrapper::-webkit-scrollbar-track {
+    background: var(--c-bg-soft);
+  }
+  .pane .body-wrapper::-webkit-scrollbar-thumb {
+    background: var(--c-border);
+    border-radius: 4px;
+  }
+  .pane .body-wrapper::-webkit-scrollbar-thumb:hover {
+    background: var(--c-text-muted);
+  }
+
+
+  /* --- Fallback mode when JavaScript fails --- */
+  body.wiki-fallback-mode #pane-container {
+    padding-left: 0 !important;
+    flex-direction: column;
+    position: relative;
+    top: 0;
+    overflow-x: hidden;
+  }
+  
+  body.wiki-fallback-mode .pane {
+    width: 100%;
+    margin-right: 0 !important;
+    height: auto;
+    min-height: auto;
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+  }
+  
+  body.wiki-fallback-mode .pane .body-wrapper {
+    height: auto;
+    overflow-y: visible;
+  }
+
+  /* --- Mobile/Tablet Breakpoint (<= 1023px) --- */
+  @media (max-width: 1023px) {
+    /* Switch to optimized single column layout on mobile */
+    #pane-container {
+      position: static;
+      padding: 0;
+      flex-direction: column;
+      align-items: stretch;
+      overflow-x: hidden;
+    }
+    .pane {
+      width: 100vw;
+      --pane-width: 100vw;
+      margin-right: 0 !important;
+      height: auto;
+      overflow: visible;
+      box-shadow: none !important;
+      border: none !important;
+      border-radius: 0 !important;
+    }
+    /* Ensure the wrapper doesn't constrain height on mobile */
+    .pane .body-wrapper {
+        height: auto;
+        overflow: visible;
+    }
+    .pane .body {
+        padding: 2rem 1.5rem;
+    }
+    /* Hide dynamically loaded panes on mobile. */
+    .pane:not(:first-child) {
+      display: none;
+    }
+  }
+  /* --- Print ---
+     The pane layout is a fixed-height viewport widget: the container is
+     absolutely positioned, body scroll is locked, and each pane's text lives
+     inside an `overflow: auto` wrapper. Printed as-is, a note stops at
+     whatever fitted on one screen. This unwinds the widget back into document
+     flow so the whole note prints, and starts each open pane on its own sheet
+     so the reader gets exactly the trail they had open. */
+  @media print {
+    body {
+      overflow: visible !important;
+    }
+
+    #pane-container {
+      position: static;
+      display: block;
+      height: auto;
+      padding: 0 !important;
+      overflow: visible;
+    }
+
+    .pane {
+      display: block;
+      flex: none;
+      width: auto !important;
+      max-width: none !important;
+      height: auto !important;
+      margin: 0 !important;
+      overflow: visible !important;
+      border: none !important;
+      border-radius: 0 !important;
+      box-shadow: none !important;
+      break-inside: auto;
+    }
+
+    /* Paper is narrower than 1024px, so the mobile rules apply while printing
+       and would drop every pane but the first. The reader asked to print what
+       they had open, so each open pane prints, one per sheet. */
+    .pane:not(:first-child) {
+      display: block;
+    }
+
+    .pane + .pane {
+      break-before: page;
+    }
+
+    .pane .body-wrapper {
+      height: auto !important;
+      overflow: visible !important;
+    }
+
+    .pane .body {
+      max-width: none;
+      padding: 0;
+    }
+
+    .pane .close {
+      display: none !important;
+    }
+
+    .prose h1,
+    .prose h2,
+    .prose h3 {
+      break-after: avoid;
+    }
+
+    .prose pre,
+    .prose blockquote,
+    .prose li {
+      break-inside: avoid;
+    }
+  }
+</style>