pandorga 1.12.0 → 1.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f0650221add1248fcfa882ccf2557c9d73d1de757239e6e396e8cec1ddefa512
-  data.tar.gz: 2c6502ac5c6fdd2d6153490b88925e465b7c66f315502e61819b6541e530831b
+  metadata.gz: 9f6585d9644f2c5715b1c18088443f0a17d57f65783b0805899ad2882cc57643
+  data.tar.gz: f749368069fe9166d3f483292abed8f8da5b32b0c5f7c1da0b2e798241f859ed
 SHA512:
-  metadata.gz: 9123d4ada63311688340fa8da4076a898dfb362764d15030da03cd62776def8172e9be28fc9d7fe47005930c004565860f8997ca46050c7149eb76332c94fa6d
-  data.tar.gz: 6dbf48af21a4d6e56a0b21e070a951f8180424de1efbb906830d435200d736b4955781d0f04b3f7677be32cf1ce20a916bdad761faf41c6fd836ac48f06e1aa4
+  metadata.gz: 81fff53869d080e555aa8cb77e19c8d8882da7855d23786ec01d255ae0e0d47c9b357f26fba11d8ca663dd697778fe7d8f3315bbff59ecdbd64820e90b4cc385
+  data.tar.gz: dba781ffd7ee1879bdd6676d45117a72b3dbdc8582b9c76cf45e04b9757889d36a0345282226602a7d2350398e7eb2b4089b0d7468d0c81185e92d3983cfec3c

data/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## [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
+
+- `pandorga export` and the new `pandorga thumbnails [root]` command write 16:9 center-cropped width variants (`variants/<stem>-{480,960,1440}.jpg`, progressive JPEG at quality 82, stripped of metadata, never upscaled) beside each local `/media/...` project thumbnail when ImageMagick is installed (logging one warning otherwise), export `thumbnail_srcset` on project front matter and `writing_index.json`, and render `srcset` and `sizes` on project cards and the home specimen (PLT-AC-44).
+
 ## [1.12.0] — 2026-10-19
 
 ### Changed

data/_includes/content-runtime/43-blocks.html

@@ -300,7 +300,7 @@
      *
      * A video URL still renders rather than vanishing, but it downloads
      * nothing until the reader asks for it. */
-    function renderPosterMedia(src, alt) {
+    function renderPosterMedia(src, alt, options) {
       var url = String(src || '').trim();
       if (!url) return '';
       var isVideo = /\.(mp4|webm|mov)(\?|#|$)/i.test(url);
@@ -312,9 +312,15 @@
           '</div>'
         ].join('');
       }
+      var opts = options || {};
+      var srcset = String(opts.srcset || '').trim();
+      var sizes = String(opts.sizes || '').trim();
       return [
         '<div class="ledger-poster">',
-        '<img src="', escapeAttr(url), '" alt="', escapeAttr(alt || ''),
+        '<img src="', escapeAttr(url), '"',
+        srcset ? ' srcset="' + escapeAttr(srcset) + '"' : '',
+        (srcset && sizes) ? ' sizes="' + escapeAttr(sizes) + '"' : '',
+        ' alt="', escapeAttr(alt || ''),
         '" loading="lazy" decoding="async"',
         // Thumbnails are frequently hotlinked to third-party hosts. When one
         // dies, remove the frame rather than leaving an empty plate behind.
@@ -324,6 +330,16 @@
       ].join('');
     }
 
+    /* Project thumbnail sizes (PLT-AC-44):
+     * - Home specimen (home.css PLT-AC-41): >= 900px column is max(35%, 20rem)
+     *   inside max-width 80rem (1408px at html 110%), minus card padding =>
+     *   ~431 CSS px at 1440px viewport (31vw = 446px -> 480w at DPR 1, 960w at
+     *   DPR 2); below 900px full band width (390px at DPR 2 = 780px -> 960w).
+     * - Projects grid card (projects.css): 3 cols >= 1024px (~384px -> 28vw),
+     *   2 cols >= 700px (~46vw), 1 col below (92vw). */
+    var PROJECT_CARD_SIZES = '(min-width: 1024px) 28vw, (min-width: 700px) 46vw, 92vw';
+    var HOME_SPECIMEN_SIZES = '(min-width: 900px) 31vw, 92vw';
+
     function twoDigits(value) {
       var label = String(Number(value));
       return label.length < 2 ? '0' + label : label;
@@ -418,7 +434,10 @@
       if (options.frameCorners) {
         html += '<span class="ledger-frame-corners" aria-hidden="true"></span>';
       }
-      var poster = renderPosterMedia(fm.thumbnail, name);
+      var poster = renderPosterMedia(fm.thumbnail, name, {
+        srcset: fm.thumbnail_srcset,
+        sizes: options.sizes || PROJECT_CARD_SIZES
+      });
       if (poster) {
         html += poster;
       } else if (options.glyphFallback && fm.icon) {
@@ -501,7 +520,10 @@
       var mark = fm.icon
         ? { cls: 'material-symbols-outlined', text: fm.icon }
         : { cls: 'is-initial', text: String(name || '').charAt(0).toUpperCase() };
-      var poster = renderPosterMedia(fm.thumbnail, name);
+      var poster = renderPosterMedia(fm.thumbnail, name, {
+        srcset: fm.thumbnail_srcset,
+        sizes: options.sizes || HOME_SPECIMEN_SIZES
+      });
       html += '<div class="home-specimen-figure">';
       if (poster) {
         html += poster + '<span class="home-specimen-badge ' + mark.cls + '" aria-hidden="true">' +

data/_includes/content-runtime/60-fragments.html

@@ -140,6 +140,7 @@
           description: entry.description,
           excerpt: entry.excerpt,
           thumbnail: entry.thumbnail,
+          thumbnail_srcset: entry.thumbnail_srcset,
           language: entry.language,
           date: entry.date,
           last_updated: entry.last_updated,

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/projects.html

@@ -154,7 +154,13 @@ layout: shell
        imagery still reads as finished rather than as broken. */
     function plateHtml(item, modifier) {
       var fm = item.front_matter || {};
-      var poster = runtime.renderPosterMedia(fm.thumbnail, projectName(item));
+      var sizes = modifier === 'projects-plate--card'
+        ? '(min-width: 1024px) 28vw, (min-width: 700px) 46vw, 92vw'
+        : '(min-width: 900px) 38vw, 92vw';
+      var poster = runtime.renderPosterMedia(fm.thumbnail, projectName(item), {
+        srcset: fm.thumbnail_srcset,
+        sizes: sizes
+      });
       var cls = 'projects-plate' + (modifier ? ' ' + modifier : '');
       if (poster) return '<div class="' + cls + '">' + poster + '</div>';
       if (!fm.icon) return '';

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 -%}