pandorga 1.13.0 → 1.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c03095737ae31747d865ba734912bb725e2d88586405dd847c63d340b42bbfa3
-  data.tar.gz: 764bc60f9ef00c00e33391511a7cb5680438660dd5a622af0801add004670f31
+  metadata.gz: 9f6585d9644f2c5715b1c18088443f0a17d57f65783b0805899ad2882cc57643
+  data.tar.gz: f749368069fe9166d3f483292abed8f8da5b32b0c5f7c1da0b2e798241f859ed
 SHA512:
-  metadata.gz: 392a4fbde9ea59d1b7dfea8206f45c81f6d104d3b70efcb9a6c67afa21fc9738eefc589b537c8e045bdf7cdb13527ade3ec8c3a1d5683ff0c4f5134a72743dbc
-  data.tar.gz: 44b0d25b56e010e2ce1d2106c3a2c688a5b3ee61c322b55f39c89beca4d9821c31f5942de335f351289bab176a6752c809205ae7aae97f517351003eb71ce0a5
+  metadata.gz: 81fff53869d080e555aa8cb77e19c8d8882da7855d23786ec01d255ae0e0d47c9b357f26fba11d8ca663dd697778fe7d8f3315bbff59ecdbd64820e90b4cc385
+  data.tar.gz: dba781ffd7ee1879bdd6676d45117a72b3dbdc8582b9c76cf45e04b9757889d36a0345282226602a7d2350398e7eb2b4089b0d7468d0c81185e92d3983cfec3c

data/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## [Unreleased]
 
+## [1.14.0] — 2026-10-20
+
+### Changed
+
+- Pills, tags, facets, filters, and buttons use a borderless felt-pen highlighter wash with deterministic nth-child geometry variants, quiet and strong mark strengths, solid fill on hover, and section-accented active rail links (PLT-AC-46).
+- The CV timeline pans in time: drag the chart, use the ‹ Today › controls, or focus it and use the arrow keys, Page Up/Down, Home and End. Zoom, resize and lane toggles keep the date at the center in view. Selecting a period now takes Shift+drag (a plain drag pans) (PLT-AC-47).
+
+### Fixed
+
+- The CV timeline no longer handles an input twice when the inline placeholder boots before the timeline data loads; zoom buttons and resize were affected before this change (PLT-AC-47).
+
 ## [1.13.0] — 2026-10-19
 
 ### Added

data/_includes/page/timeline-section.html

@@ -21,6 +21,10 @@
             </ul>
           </div>
 
+          <div class="cv-timeline-control-group">
+            <p class="cv-timeline-hint font-body text-xs text-on-surface-variant">Shift+drag to select a period</p>
+          </div>
+
           <div class="cv-timeline-control-group" id="timeline-selection-panel" hidden>
             <h3 class="cv-timeline-control-title card-meta">Selected period</h3>
             <p id="timeline-selection-range" class="cv-timeline-range code-technical"></p>
@@ -58,9 +62,12 @@
       </div>
 
       <div class="cv-timeline-canvas">
-        <div id="timeline-chart-wrapper" class="applet-canvas relative w-full overflow-x-auto">
+        <div id="timeline-chart-wrapper" class="applet-canvas relative w-full overflow-x-auto" tabindex="0" role="region" aria-label="Career timeline, use arrow keys to move in time">
           <div id="timeline-chart" class="relative"></div>
           <div id="timeline-zoom-controls" class="timeline-applet-control cv-timeline-zoom sticky left-0 z-10 flex items-center gap-2 border px-2 py-1.5 w-fit ml-2 mt-4 mb-4 pointer-events-auto">
+            <button type="button" id="timeline-pan-prev" class="timeline-zoom-btn timeline-applet-control font-label text-sm leading-none w-8 h-8 border text-on-surface-variant hover:border-primary hover:text-primary transition-colors" aria-label="Pan left">‹</button>
+            <button type="button" id="timeline-pan-today" class="timeline-zoom-btn timeline-applet-control font-label text-sm leading-none h-8 px-2 border text-on-surface-variant hover:border-primary hover:text-primary transition-colors" aria-label="Scroll to today">Today</button>
+            <button type="button" id="timeline-pan-next" class="timeline-zoom-btn timeline-applet-control font-label text-sm leading-none w-8 h-8 border text-on-surface-variant hover:border-primary hover:text-primary transition-colors" aria-label="Pan right">›</button>
             <button type="button" id="timeline-zoom-out" class="timeline-zoom-btn timeline-applet-control font-label text-sm leading-none w-8 h-8 border text-on-surface-variant hover:border-primary hover:text-primary transition-colors" aria-label="Zoom out">−</button>
             <span id="timeline-zoom-label" class="cv-timeline-zoom-label code-technical min-w-[3.5rem] text-center">2 yr</span>
             <button type="button" id="timeline-zoom-in" class="timeline-zoom-btn timeline-applet-control font-label text-sm leading-none w-8 h-8 border text-on-surface-variant hover:border-primary hover:text-primary transition-colors" aria-label="Zoom in">+</button>
@@ -182,6 +189,13 @@
     var el = document.getElementById('timeline-data');
 
     function bootTimeline(payload) {
+    /* The inline stub can boot before the runtime JSON arrives, and the JSON
+       then boots again. Abort the earlier boot's listeners on persistent
+       elements so each input is handled once, by the current data. */
+    if (bootTimeline.listeners) bootTimeline.listeners.abort();
+    var listeners = new AbortController();
+    bootTimeline.listeners = listeners;
+    var bootScope = { signal: listeners.signal };
     var meta = payload.meta || {};
     var events = payload.events || [];
     var buckets = Array.isArray(payload.writing_buckets) ? payload.writing_buckets : [];
@@ -255,7 +269,25 @@
     var zoomLabel = document.getElementById('timeline-zoom-label');
     var selectionLayer = null;
     var selectionBand = null;
-    var dragState = { active: false, anchorMs: 0 };
+    var registeredTracks = new Set();
+    var isSelecting = false;
+    var isPanCandidate = false;
+    var isPanning = false;
+    var pointerId = null;
+    var anchorMs = 0;
+    var startX = 0;
+    var startScroll = 0;
+
+    function panTarget(scrollLeft, visibleW, maxScroll, step) {
+      // step is a signed fraction of the visible width (e.g. 0.1, -0.9)
+      return Math.round(Math.min(maxScroll, Math.max(0, scrollLeft + step * visibleW)));
+    }
+
+    function centerPreservingScroll(centerMs, xPosMs, visibleW, maxScroll) {
+      // xPosMs maps a timestamp to an x pixel within the scroll content
+      var target = xPosMs(centerMs) - visibleW / 2;
+      return Math.round(Math.min(maxScroll, Math.max(0, target)));
+    }
 
     function parseDate(s) {
       var p = s.split('-');
@@ -287,12 +319,14 @@
     var maxYear = new Date(maxT).getFullYear();
     var rangeMs = maxT - minT || MS_DAY;
     var chartW = 720;
+    var renderedClientW = 0;
 
     function visibleChartWidth() {
       return Math.max(480, (wrapper.clientWidth || 720) - LABEL_W);
     }
 
     function updateChartWidth() {
+      renderedClientW = wrapper.clientWidth;
       var visibleW = visibleChartWidth();
       var maxZoomYears = Math.max(MIN_ZOOM_YEARS, rangeMs / MS_YEAR);
       if (zoomYears > maxZoomYears) zoomYears = maxZoomYears;
@@ -311,13 +345,26 @@
       if (zoomLabel) zoomLabel.textContent = formatZoomLabel();
     }
 
+    function centerTimeMs() {
+      /* Use the width the chart was last rendered at: on resize the wrapper
+         is already at its new width while chartW still maps the old one. */
+      var x = wrapper.scrollLeft + (renderedClientW || wrapper.clientWidth) / 2;
+      return minT + ((x - LABEL_W) / chartW) * rangeMs;
+    }
+
+    function renderKeepingCenter() {
+      var c = centerTimeMs();
+      render();
+      wrapper.scrollLeft = centerPreservingScroll(c, xPosMs, wrapper.clientWidth, Math.max(0, container.offsetWidth - wrapper.clientWidth));
+      if (typeof updatePanButtons === 'function') updatePanButtons();
+    }
+
     function changeZoom(direction) {
       var maxZoomYears = Math.max(MIN_ZOOM_YEARS, rangeMs / MS_YEAR);
       var factor = direction > 0 ? 0.75 : 1.33;
       zoomYears = Math.max(MIN_ZOOM_YEARS, Math.min(maxZoomYears, zoomYears * factor));
       updateZoomLabel();
-      render();
-      scrollToToday();
+      renderKeepingCenter();
     }
 
     function scrollToToday() {
@@ -606,23 +653,82 @@
     }
 
     function setupSelectionDrag(track) {
-      track.addEventListener('mousedown', function (e) {
-        if (e.button !== 0 || e.target !== track) return;
-        dragState.active = true;
-        dragState.anchorMs = timeFromClientX(e.clientX);
-        setSelection(dragState.anchorMs, dragState.anchorMs);
-        e.preventDefault();
-      });
+      registeredTracks.add(track);
     }
 
-    window.addEventListener('mousemove', function (e) {
-      if (!dragState.active) return;
-      setSelection(dragState.anchorMs, timeFromClientX(e.clientX));
-    });
+    if (wrapper) {
+      wrapper.addEventListener('pointerdown', function (e) {
+        if (e.button !== 0) return;
+        if (e.pointerType === 'touch') return;
+
+        if (e.shiftKey && registeredTracks.has(e.target)) {
+          isSelecting = true;
+          pointerId = e.pointerId;
+          anchorMs = timeFromClientX(e.clientX);
+          setSelection(anchorMs, anchorMs);
+          if (wrapper.setPointerCapture) {
+            try { wrapper.setPointerCapture(e.pointerId); } catch (err) {}
+          }
+          e.preventDefault();
+        } else {
+          isPanCandidate = true;
+          isPanning = false;
+          pointerId = e.pointerId;
+          startX = e.clientX;
+          startScroll = wrapper.scrollLeft;
+        }
+      }, bootScope);
+
+      wrapper.addEventListener('pointermove', function (e) {
+        if (isSelecting) {
+          setSelection(anchorMs, timeFromClientX(e.clientX));
+        } else if (isPanCandidate) {
+          var dx = e.clientX - startX;
+          if (!isPanning && Math.abs(dx) >= 4) {
+            isPanning = true;
+            if (wrapper.setPointerCapture) {
+              try { wrapper.setPointerCapture(e.pointerId); } catch (err) {}
+            }
+            wrapper.classList.add('is-dragging');
+            hideTip();
+          }
+          if (isPanning) {
+            wrapper.scrollLeft = startScroll - dx;
+          }
+        }
+      }, bootScope);
 
-    window.addEventListener('mouseup', function () {
-      dragState.active = false;
-    });
+      var endPointerDrag = function () {
+        if (!isSelecting && !isPanCandidate) return;
+
+        if (pointerId !== null && wrapper.hasPointerCapture && wrapper.hasPointerCapture(pointerId)) {
+          try { wrapper.releasePointerCapture(pointerId); } catch (err) {}
+        }
+        wrapper.classList.remove('is-dragging');
+
+        var panned = isPanning;
+
+        isSelecting = false;
+        isPanCandidate = false;
+        isPanning = false;
+        pointerId = null;
+
+        if (panned) {
+          var suppressClick = function (clickEvent) {
+            clickEvent.stopPropagation();
+            clickEvent.preventDefault();
+            window.removeEventListener('click', suppressClick, true);
+          };
+          window.addEventListener('click', suppressClick, true);
+          setTimeout(function () {
+            window.removeEventListener('click', suppressClick, true);
+          }, 100);
+        }
+      };
+
+      wrapper.addEventListener('pointerup', endPointerDrag, bootScope);
+      wrapper.addEventListener('pointercancel', endPointerDrag, bootScope);
+    }
 
     function renderBars(track, items, color, barHeight, ongoingAllowed, laneH, gap) {
       items.forEach(function (ev) {
@@ -639,6 +745,7 @@
     }
 
     function render() {
+      registeredTracks.clear();
       updateChartWidth();
       container.innerHTML = '';
       barRegistry = [];
@@ -798,16 +905,16 @@
       container.style.height = y + 'px';
       container.style.minHeight = '';
       applySelectionHighlight();
+      updatePanButtons();
     }
 
     var resizeTimer;
     window.addEventListener('resize', function () {
       clearTimeout(resizeTimer);
       resizeTimer = setTimeout(function () {
-        render();
-        scrollToToday();
+        renderKeepingCenter();
       }, 150);
-    });
+    }, bootScope);
 
     /* The bars carry their colour as an inline style, so a palette swap has to
        redraw them — the CSS variables alone cannot reach an already-painted
@@ -815,37 +922,129 @@
     document.addEventListener('shell-theme-change', function () {
       refreshColors();
       render();
-    });
+    }, bootScope);
 
     document.querySelectorAll('.timeline-lane-toggle').forEach(function (cb) {
       cb.addEventListener('change', function () {
         laneVisible[cb.dataset.lane] = cb.checked;
-        render();
-      });
+        renderKeepingCenter();
+      }, bootScope);
     });
 
     var expandCb = document.getElementById('timeline-writing-expanded');
     if (expandCb) {
       expandCb.addEventListener('change', function () {
         writingExpanded = expandCb.checked;
-        render();
-      });
+        renderKeepingCenter();
+      }, bootScope);
     }
 
     if (selectionClear) {
-      selectionClear.addEventListener('click', clearSelection);
+      selectionClear.addEventListener('click', clearSelection, bootScope);
+    }
+
+    function maxScrollLeft() {
+      return Math.max(0, container.offsetWidth - wrapper.clientWidth);
+    }
+
+    var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    function scrollBehavior() {
+      return reduceMotion && reduceMotion.matches ? 'auto' : 'smooth';
+    }
+
+    function panBy(step) {
+      wrapper.scrollTo({
+        left: panTarget(wrapper.scrollLeft, wrapper.clientWidth, maxScrollLeft(), step),
+        behavior: scrollBehavior()
+      });
+    }
+
+    var panPrevBtn = document.getElementById('timeline-pan-prev');
+    if (panPrevBtn) {
+      panPrevBtn.addEventListener('click', function () { panBy(-0.9); }, bootScope);
+    }
+
+    var panNextBtn = document.getElementById('timeline-pan-next');
+    if (panNextBtn) {
+      panNextBtn.addEventListener('click', function () { panBy(0.9); }, bootScope);
+    }
+
+    var panTodayBtn = document.getElementById('timeline-pan-today');
+    if (panTodayBtn) {
+      panTodayBtn.addEventListener('click', function () {
+        var todayX = xPosMs(todayT);
+        var target = Math.max(0, Math.min(maxScrollLeft(), todayX - wrapper.clientWidth + 24));
+        wrapper.scrollTo({ left: target, behavior: scrollBehavior() });
+      }, bootScope);
+    }
+
+    function setPanButtonDisabled(btn, disabled) {
+      if (!btn) return;
+      btn.disabled = disabled;
+      btn.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    }
+
+    function updatePanButtons() {
+      setPanButtonDisabled(panPrevBtn, wrapper.scrollLeft <= 0);
+      setPanButtonDisabled(panNextBtn, wrapper.scrollLeft >= maxScrollLeft() - 1);
+    }
+
+    if (wrapper) {
+      wrapper.addEventListener('scroll', updatePanButtons, { passive: true, signal: listeners.signal });
+      wrapper.addEventListener('keydown', function (e) {
+        if (e.target !== wrapper || e.ctrlKey || e.metaKey || e.altKey) return;
+        var handled = true;
+        switch (e.key) {
+          case 'ArrowLeft':
+            panBy(e.shiftKey ? -0.9 : -0.1);
+            break;
+          case 'ArrowRight':
+            panBy(e.shiftKey ? 0.9 : 0.1);
+            break;
+          case 'PageUp':
+            panBy(-0.9);
+            break;
+          case 'PageDown':
+            panBy(0.9);
+            break;
+          case 'Home':
+            wrapper.scrollTo({ left: 0, behavior: scrollBehavior() });
+            break;
+          case 'End':
+            var todayX = xPosMs(todayT);
+            var target = Math.max(0, Math.min(maxScrollLeft(), todayX - wrapper.clientWidth + 24));
+            wrapper.scrollTo({ left: target, behavior: scrollBehavior() });
+            break;
+          case '+':
+          case '=':
+            changeZoom(1);
+            break;
+          case '-':
+          case '−':
+            changeZoom(-1);
+            break;
+          default:
+            handled = false;
+            break;
+        }
+        if (handled) {
+          e.preventDefault();
+        }
+      }, bootScope);
     }
 
     if (zoomInBtn) {
-      zoomInBtn.addEventListener('click', function () { changeZoom(1); });
+      zoomInBtn.addEventListener('click', function () { changeZoom(1); }, bootScope);
     }
     if (zoomOutBtn) {
-      zoomOutBtn.addEventListener('click', function () { changeZoom(-1); });
+      zoomOutBtn.addEventListener('click', function () { changeZoom(-1); }, bootScope);
     }
 
     updateZoomLabel();
     render();
     scrollToToday();
+    updatePanButtons();
     }
 
     function loadTimeline() {

data/_layouts/shell.html

@@ -240,7 +240,7 @@
         {%- for _item in _group.pages -%}
         {%- assign _key = _item.key -%}
         {%- assign _p = _all_pages | where: "key", _key | first -%}
-        <a href="{{ _p.url }}" class="site-rail-link{% if nav_active == _key %} is-active{% endif %}"
+        <a href="{{ _p.url }}" class="site-rail-link{% if nav_active == _key %} is-active{% if _p.accent and _p.accent != 'blue' %} page-accent--{{ _p.accent }}{% endif %}{% endif %}"
           {% if nav_active == _key %}aria-current="page"{% endif %}>{{ _p.title }}</a>
         {%- endfor -%}
         {%- endfor -%}