From f2cd7b4a97a28f1df58d3258f17d01b6f142e5a2 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Sun, 12 Jul 2026 20:44:16 -0500
Subject: feat(gallery): card IDs in prose link to their card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every R##/N## token in a note or spec sheet becomes a jump link to that card, which lights a gold ring when targeted — comparisons are one click. Cards carry anchor ids; the linkifier only wraps tokens whose card exists.
---
 docs/prototypes/panel-widget-gallery.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'docs/prototypes')

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index cb558bc..1ffd302 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -132,6 +132,9 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 .igrid .iv b{color:var(--silver);font-weight:400}
 .igrid .iv a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}
 .igrid .iv a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
+.card a.xref{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}
+.card a.xref:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
+.card:target{border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px var(--gold),0 6px 14px rgba(0,0,0,.4)}
 
 /* ---- shared primitives ---- */
 .lamp{width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 6px 1px rgba(116,147,47,.55)}
@@ -1536,7 +1539,7 @@ const INFO_FIELDS=[['input','input'],['solves','solves'],['use','use'],['limits'
   ['origin','origin'],['difficulty','difficulty'],['prefer','prefer when'],['period','period']];
 const VLAMP_TITLES={off:'validation: not done',amber:'validation: in progress',green:'validation: done'};
 function card(host, no, name, html, note){
-  const c=document.createElement('div'); c.className='card';
+  const c=document.createElement('div'); c.className='card'; c.id='card-'+no;
   c.innerHTML=`<div class="wname"><span class="no">${no}</span>${name}<span class="vlamp" data-v="off"></span></div>`+
     `<div class="stagew">${html}</div><div class="wrd" id="rd-${no}">—</div>`+
     `<div class="opts"></div><div class="wnote">${note}</div>`;
@@ -4248,6 +4251,13 @@ screenChips('N11',$('scopep').closest('.scope'),['green','amber','red','blue','v
 BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
   if(rd)rd.closest('.card').querySelector('.stagew').classList.add('boost');});
 
+/* cross-reference links: card IDs mentioned in notes and spec sheets jump to that card */
+(function(){const ids=new Set([...document.querySelectorAll('.card .no')].map(n=>n.textContent));
+  document.querySelectorAll('.wnote,.igrid .iv').forEach(el=>{
+    if(el.querySelector('a[href^="reference/"]'))return;   // leave the photo-link rows alone
+    el.innerHTML=el.innerHTML.replace(/\b(R\d{2}|N\d{2})\b/g,
+      m=>ids.has(m)?`<a class="xref" href="#card-${m}">${m}</a>`:m);});})();
+
 /* slide-toggle color choices: track color per state, thumb never changes */
 (function(){const sw=document.querySelector('.switch');if(!sw)return;
   const cardEl=sw.closest('.card');
-- 
cgit v1.2.3