{"id":255,"date":"2026-07-03T00:26:34","date_gmt":"2026-07-03T00:26:34","guid":{"rendered":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/?page_id=255"},"modified":"2026-07-05T01:51:17","modified_gmt":"2026-07-05T01:51:17","slug":"explorer","status":"publish","type":"page","link":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/explorer\/","title":{"rendered":"Explorer"},"content":{"rendered":"\n\n<div id=\"idpl-root\" class=\"idpl\">\n<style>\n#idpl-root{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;font-family:inherit;}\n#idpl-root .idpl-title{font-size:1.8rem;font-weight:700;margin-bottom:4px;font-family:'Spectral',serif;color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-sub{color:var(--rad-muted,#999);margin-bottom:20px;}\n#idpl-root .idpl-layout{display:flex;gap:22px;align-items:flex-start;}\n#idpl-root .idpl-sidebar{flex:0 0 250px;max-width:250px;position:sticky;top:16px;}\n#idpl-root .idpl-results{flex:1 1 45%;min-width:0;}\n#idpl-root .idpl-detail{flex:0 0 440px;max-width:440px;position:sticky;top:16px;max-height:85vh;overflow:auto;border:1px solid var(--rad-faint,#2A2A2A);border-radius:10px;padding:20px;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);box-sizing:border-box;}\n@media (max-width: 1100px){\n  #idpl-root .idpl-layout{flex-direction:column;}\n  #idpl-root .idpl-sidebar, #idpl-root .idpl-detail{position:static;max-width:100%;flex:0 0 auto;width:100%;}\n}\n@media (max-width: 768px){\n  #idpl-root .idpl-cards{grid-template-columns:1fr;}\n  #idpl-root .idpl-detail.idpl-modal-open{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;height:100%;max-height:100%;z-index:9999;border-radius:0;margin:0;}\n  #idpl-root .idpl-detail-backdrop.idpl-modal-open{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:9998;}\n  #idpl-root .idpl-detail-close{display:none;}\n  #idpl-root .idpl-detail-close.idpl-modal-open{display:block;position:fixed;top:10px;right:16px;z-index:10000;font-size:24px;line-height:1;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);border:1px solid var(--rad-faint,#2A2A2A);border-radius:50%;width:40px;height:40px;cursor:pointer;}\n}\n#idpl-root .idpl-detail-backdrop{display:none;}\n#idpl-root .idpl-search-row{margin-bottom:16px;}\n#idpl-root .idpl-search-row input{width:100%;box-sizing:border-box;padding:10px 14px;font-size:1rem;border:1px solid var(--rad-rule,#333);border-radius:6px;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-pattern-block{background:var(--rad-bg2,#141b14);border:2px solid var(--rad-moss-lt,#6BA86B);border-radius:10px;padding:14px 16px;margin-bottom:16px;}\n#idpl-root .idpl-pattern-block label{display:block;font-weight:700;font-size:1rem;color:var(--rad-moss-lt,#6BA86B);margin-bottom:8px;}\n#idpl-root .idpl-pattern-block input{width:100%;box-sizing:border-box;padding:10px 12px;font-size:1rem;border:1px solid var(--rad-moss-lt,#6BA86B);border-radius:6px;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-filter-group{margin-bottom:16px;}\n#idpl-root .idpl-filter-group label{display:block;font-weight:600;margin-bottom:6px;font-size:0.88rem;color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-chips{display:flex;flex-wrap:wrap;gap:6px;}\n#idpl-root .idpl-chip{border:1px solid var(--rad-rule,#333);border-radius:999px;padding:5px 12px;font-size:0.82rem;cursor:pointer;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);user-select:none;}\n#idpl-root .idpl-chip.active{background:var(--rad-moss,#3D6B3D);color:#fff;border-color:var(--rad-moss,#3D6B3D);}\n#idpl-root select{width:100%;padding:9px 10px;border:1px solid var(--rad-rule,#333);border-radius:6px;font-size:0.9rem;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-reset{width:100%;padding:9px 16px;border:1px solid var(--rad-rule,#333);border-radius:6px;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);cursor:pointer;font-size:0.85rem;}\n#idpl-root .idpl-view-toggle{margin-bottom:16px;display:flex;gap:8px;}\n#idpl-root .idpl-view-toggle button{padding:7px 14px;border:1px solid var(--rad-rule,#333);border-radius:6px;background:var(--rad-card,#161616);color:var(--rad-ink,#EDE9E0);cursor:pointer;}\n#idpl-root .idpl-view-toggle button.active{background:var(--rad-moss,#3D6B3D);color:#fff;border-color:var(--rad-moss,#3D6B3D);}\n#idpl-root .idpl-chart-wrap{display:none;}\n#idpl-root .idpl-count{color:var(--rad-muted,#999);font-size:0.85rem;margin-bottom:10px;}\n#idpl-root .idpl-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}\n#idpl-root .idpl-card{border:1px solid var(--rad-faint,#2A2A2A);border-radius:8px;padding:12px;cursor:pointer;background:var(--rad-card,#161616);transition:box-shadow .15s,border-color .15s,transform .15s;}\n#idpl-root .idpl-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.4);border-color:var(--rad-rule,#333);transform:translateY(-2px);}\n#idpl-root .idpl-card.idpl-selected{border-color:var(--rad-moss-lt,#6BA86B);box-shadow:0 0 0 2px var(--rad-moss-lt,#6BA86B) inset;}\n#idpl-root .idpl-card h3{margin:0 0 6px;font-size:0.98rem;font-family:'Spectral',serif;color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-card .idpl-card-tags{font-size:0.76rem;color:var(--rad-gold-lt,#E8B84B);margin-bottom:6px;}\n#idpl-root .idpl-card p{font-size:0.83rem;color:var(--rad-muted,#999);margin:0;}\n#idpl-root table.idpl-table{width:100%;border-collapse:collapse;font-size:0.85rem;color:var(--rad-ink,#EDE9E0);}\n#idpl-root table.idpl-table th, #idpl-root table.idpl-table td{border:1px solid var(--rad-faint,#2A2A2A);padding:8px;text-align:left;cursor:pointer;}\n#idpl-root table.idpl-table th{background:var(--rad-bg2,#141b14);}\n#idpl-root table.idpl-table tr.idpl-selected td{background:rgba(107,168,107,.15);}\n#idpl-root .idpl-detail-placeholder{color:var(--rad-muted,#999);font-size:0.9rem;}\n#idpl-root .idpl-detail-id{font-size:0.78rem;color:var(--rad-muted,#999);}\n#idpl-root .idpl-detail-title{font-size:1.15rem;font-weight:700;margin:4px 0 8px;font-family:'Spectral',serif;color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-detail-pattern{margin-bottom:10px;}\n#idpl-root .idpl-detail-pattern a{font-weight:600;color:var(--rad-moss-lt,#6BA86B);text-decoration:none;cursor:pointer;}\n#idpl-root .idpl-detail-summary{margin-bottom:14px;line-height:1.5;font-size:0.9rem;color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-detail-grid{display:block;font-size:0.85rem;margin-bottom:10px;}\n#idpl-root .idpl-detail-grid>div{padding:4px 0;border-bottom:1px solid var(--rad-faint,#2A2A2A);color:var(--rad-ink,#EDE9E0);}\n#idpl-root .idpl-detail-grid a{color:var(--rad-moss-lt,#6BA86B);cursor:pointer;text-decoration:none;}\n#idpl-root .idpl-writeup-link{display:inline-block;margin-top:10px;padding:9px 16px;background:var(--rad-moss,#3D6B3D);color:#fff !important;border-radius:6px;text-decoration:none;font-weight:600;font-size:0.85rem;}\n<\/style>\n<div class=\"idpl-title\">Intervention Design Pattern Library &mdash; Explorer<\/div>\n<div class=\"idpl-sub\">Browse, search, and filter every published case.<\/div>\n\n<div class=\"idpl-layout\">\n\n  <aside class=\"idpl-sidebar\">\n    <div class=\"idpl-search-row\">\n      <input type=\"text\" id=\"idpl-search\" placeholder=\"Search title, pattern, summary...\">\n    <\/div>\n\n    <div class=\"idpl-pattern-block\">\n      <label for=\"idpl-pattern\">Browse by Pattern<\/label>\n      <input type=\"text\" id=\"idpl-pattern\" list=\"idpl-pattern-list\" placeholder=\"Type or select a pattern...\">\n      <datalist id=\"idpl-pattern-list\"><\/datalist>\n    <\/div>\n\n    <div class=\"idpl-filter-group\">\n      <label>Intervention Type<\/label>\n      <div class=\"idpl-chips\" id=\"idpl-type-chips\"><\/div>\n    <\/div>\n\n    <div class=\"idpl-filter-group\">\n      <label>Emotional Tone<\/label>\n      <div class=\"idpl-chips\" id=\"idpl-tone-chips\"><\/div>\n    <\/div>\n\n    <div class=\"idpl-filter-group\">\n      <label for=\"idpl-country\">Country<\/label>\n      <select id=\"idpl-country\"><option value=\"\">All countries<\/option><\/select>\n    <\/div>\n\n    <button class=\"idpl-reset\" id=\"idpl-reset\">Reset filters<\/button>\n  <\/aside>\n\n  <div class=\"idpl-results\">\n    <div class=\"idpl-view-toggle\">\n      <button id=\"idpl-view-cards\" class=\"active\">Cards<\/button>\n      <button id=\"idpl-view-table\">Table<\/button>\n    <\/div>\n    <div class=\"idpl-chart-wrap\"><canvas id=\"idpl-chart\" height=\"200\"><\/canvas><\/div>\n    <div class=\"idpl-count\" id=\"idpl-count\"><\/div>\n    <div class=\"idpl-cards\" id=\"idpl-cards\"><\/div>\n    <table class=\"idpl-table\" id=\"idpl-table\" style=\"display:none\">\n      <thead><tr><th>Title<\/th><th>Pattern<\/th><th>Type<\/th><th>Country<\/th><th>Love<\/th><th>Power<\/th><\/tr><\/thead>\n      <tbody id=\"idpl-table-body\"><\/tbody>\n    <\/table>\n  <\/div>\n\n  <aside class=\"idpl-detail\" id=\"idpl-detail\">\n    <div class=\"idpl-detail-placeholder\">Select a case from the list to see full details.<\/div>\n  <\/aside>\n  <button type=\"button\" class=\"idpl-detail-close\" id=\"idpl-detail-close\" aria-label=\"Close\" onclick=\"document.getElementById('idpl-detail').classList.remove('idpl-modal-open');document.getElementById('idpl-detail-backdrop').classList.remove('idpl-modal-open');document.getElementById('idpl-detail-close').classList.remove('idpl-modal-open');\">&times;<\/button>\n  <div class=\"idpl-detail-backdrop\" id=\"idpl-detail-backdrop\" onclick=\"document.getElementById('idpl-detail').classList.remove('idpl-modal-open');document.getElementById('idpl-detail-backdrop').classList.remove('idpl-modal-open');document.getElementById('idpl-detail-close').classList.remove('idpl-modal-open');\"><\/div>\n\n<\/div>\n<\/div>\n\n<script>\n(function(){\n  var CSV_URL = \"https:\/\/docs.google.com\/spreadsheets\/d\/1upAFwjl820Kjm2czKtA-Zy_udtuWQVUcDdoK6A9gOYs\/export?format=csv&gid=2052490040\";\n  var CASES = [];\n  var state = { search:'', pattern:'', types:new Set(), tones:new Set(), country:'', view:'cards' };\n  var selectedId = null;\n\n  function escapeHtml(s){\n    if (s===undefined || s===null) return '';\n    return String(s).replace(\/[&<>\"']\/g, function(c){\n      return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c];\n    });\n  }\n\n  function readStateFromURL(){\n    var p = new URLSearchParams(location.search);\n    state.search = p.get('q') || '';\n    state.pattern = p.get('pattern') || '';\n    state.country = p.get('country') || '';\n    var types = p.get('types');\n    state.types = new Set(types ? types.split(',').filter(Boolean) : []);\n    var tones = p.get('tones');\n    state.tones = new Set(tones ? tones.split(',').filter(Boolean) : []);\n    state.view = p.get('view') === 'table' ? 'table' : 'cards';\n  }\n\n  function writeStateToURL(){\n    var p = new URLSearchParams();\n    if (state.search) p.set('q', state.search);\n    if (state.pattern) p.set('pattern', state.pattern);\n    if (state.country) p.set('country', state.country);\n    if (state.types.size) p.set('types', Array.from(state.types).join(','));\n    if (state.tones.size) p.set('tones', Array.from(state.tones).join(','));\n    if (state.view === 'table') p.set('view', 'table');\n    var qs = p.toString();\n    history.replaceState(null, '', location.pathname + (qs ? '?' + qs : ''));\n  }\n\n  function syncControlsToState(){\n    document.getElementById('idpl-search').value = state.search;\n    document.getElementById('idpl-pattern').value = state.pattern;\n    document.getElementById('idpl-country').value = state.country;\n    document.querySelectorAll('#idpl-type-chips .idpl-chip').forEach(function(chip){\n      chip.classList.toggle('active', state.types.has(chip.dataset.type));\n    });\n    document.querySelectorAll('#idpl-tone-chips .idpl-chip').forEach(function(chip){\n      chip.classList.toggle('active', state.tones.has(chip.dataset.tone));\n    });\n    document.getElementById('idpl-view-cards').classList.toggle('active', state.view==='cards');\n    document.getElementById('idpl-view-table').classList.toggle('active', state.view==='table');\n    document.getElementById('idpl-cards').style.display = state.view==='cards' ? 'grid' : 'none';\n    document.getElementById('idpl-table').style.display = state.view==='table' ? 'table' : 'none';\n  }\n\n  function getFiltered(){\n    return CASES.filter(function(d){\n      if (state.search){\n        var s = state.search.toLowerCase();\n        var hay = (d.Title+' '+d.Pattern+' '+d.Summary).toLowerCase();\n        if (hay.indexOf(s) === -1) return false;\n      }\n      if (state.pattern){\n        if ((d.Pattern||'').toLowerCase().indexOf(state.pattern.toLowerCase()) === -1) return false;\n      }\n      if (state.types.size && !state.types.has(d.InterventionType)) return false;\n      if (state.tones.size && !state.tones.has(d.EmotionalTone)) return false;\n      if (state.country && d.Country !== state.country) return false;\n      return true;\n    });\n  }\n\n  function setPatternFilter(pt){\n    state.pattern = pt;\n    render();\n  }\n  function toggleTypeFilter(t){\n    if (state.types.has(t)) state.types.delete(t); else state.types.add(t);\n    render();\n  }\n  function toggleToneFilter(tone){\n    if (state.tones.has(tone)) state.tones.delete(tone); else state.tones.add(tone);\n    render();\n  }\n  function setCountryFilter(c){\n    state.country = c;\n    render();\n  }\n\n  function render(){\n    writeStateToURL();\n    syncControlsToState();\n    var filtered = getFiltered();\n    document.getElementById('idpl-count').textContent = filtered.length + ' of ' + CASES.length + ' cases';\n    renderChart(filtered);\n    renderCards(filtered);\n    renderTable(filtered);\n  }\n\n  var TYPE_COLORS = {\n    'Top-Down':'#c0392b','Bottom-Up':'#2980b9','Middle-Out':'#8e44ad','Hybrid':'#16a085','Community':'#d35400'\n  };\n\n  function renderChart(filtered){\n    var canvas = document.getElementById('idpl-chart');\n    var ctx = canvas.getContext('2d');\n    var w = canvas.width = canvas.clientWidth;\n    var h = canvas.height = 200;\n    ctx.clearRect(0,0,w,h);\n    var padding = 30;\n    var minV = -10, maxV = 10;\n    function xPos(power){ return padding + (power-minV)\/(maxV-minV) * (w-2*padding); }\n    function yPos(love){ return h-padding - (love-minV)\/(maxV-minV) * (h-2*padding); }\n    ctx.strokeStyle = '#ccc';\n    ctx.beginPath();\n    ctx.moveTo(padding, h-padding); ctx.lineTo(w-padding, h-padding);\n    ctx.moveTo(padding, padding); ctx.lineTo(padding, h-padding);\n    ctx.stroke();\n    ctx.fillStyle = '#888'; ctx.font = '10px sans-serif';\n    ctx.fillText('Power ->', w-padding-45, h-padding+18);\n    ctx.save();\n    ctx.translate(10, padding+20);\n    ctx.rotate(-Math.PI\/2);\n    ctx.fillText('Love ->', 0, 0);\n    ctx.restore();\n    filtered.forEach(function(d){\n      var love = parseFloat(d.Love), power = parseFloat(d.Power);\n      if (isNaN(love) || isNaN(power)) return;\n      ctx.beginPath();\n      ctx.arc(xPos(power), yPos(love), 4, 0, Math.PI*2);\n      ctx.fillStyle = TYPE_COLORS[d.InterventionType] || '#999';\n      ctx.globalAlpha = 0.75;\n      ctx.fill();\n      ctx.globalAlpha = 1;\n    });\n  }\n\n  function cardTagsHtml(d){\n    return '<span class=\"idpl-tag-pattern\" data-pattern=\"'+escapeHtml(d.Pattern)+'\">'+escapeHtml(d.Pattern)+'<\/span> &middot; '+escapeHtml(d.InterventionType)+' &middot; '+escapeHtml(d.Country);\n  }\n\n  function renderCards(filtered){\n    var el = document.getElementById('idpl-cards');\n    el.innerHTML = filtered.map(function(d){\n      var sel = d.CaseID === selectedId ? ' idpl-selected' : '';\n      return '<div class=\"idpl-card'+sel+'\" data-id=\"'+escapeHtml(d.CaseID)+'\">'+\n        '<h3>'+escapeHtml(d.Title)+'<\/h3>'+\n        '<div class=\"idpl-card-tags\">'+cardTagsHtml(d)+'<\/div>'+\n        '<p>'+escapeHtml(d.Summary)+'<\/p>'+\n        '<\/div>';\n    }).join('');\n    el.querySelectorAll('.idpl-card').forEach(function(card){\n      card.addEventListener('click', function(){\n        var d = CASES.find(function(c){ return c.CaseID === card.dataset.id; });\n        if (d) selectCase(d);\n      });\n    });\n  }\n\n  function renderTable(filtered){\n    var body = document.getElementById('idpl-table-body');\n    body.innerHTML = filtered.map(function(d){\n      var sel = d.CaseID === selectedId ? ' idpl-selected' : '';\n      return '<tr class=\"'+sel+'\" data-id=\"'+escapeHtml(d.CaseID)+'\">'+\n        '<td>'+escapeHtml(d.Title)+'<\/td><td>'+escapeHtml(d.Pattern)+'<\/td><td>'+escapeHtml(d.InterventionType)+'<\/td>'+\n        '<td>'+escapeHtml(d.Country)+'<\/td><td>'+escapeHtml(d.Love)+'<\/td><td>'+escapeHtml(d.Power)+'<\/td><\/tr>';\n    }).join('');\n    body.querySelectorAll('tr').forEach(function(row){\n      row.addEventListener('click', function(){\n        var d = CASES.find(function(c){ return c.CaseID === row.dataset.id; });\n        if (d) selectCase(d);\n      });\n    });\n  }\n\n  function selectCase(d){\n    selectedId = d.CaseID;\n    renderDetail(d);\n    var filtered = getFiltered();\n    renderCards(filtered);\n    renderTable(filtered);\n    if (window.matchMedia && window.matchMedia('(max-width:768px)').matches) {\n      var _det = document.getElementById('idpl-detail');\n      var _bd = document.getElementById('idpl-detail-backdrop');\n      var _cl = document.getElementById('idpl-detail-close');\n      if (_det) { _det.classList.add('idpl-modal-open'); _det.scrollTop = 0; }\n      if (_bd) _bd.classList.add('idpl-modal-open');\n      if (_cl) _cl.classList.add('idpl-modal-open');\n    }\n  }\n\n  function renderDetail(d){\n    var el = document.getElementById('idpl-detail');\n    var url = (d.WriteupURL || '').trim();\n    el.innerHTML =\n      '<div class=\"idpl-detail-id\">'+escapeHtml(d.CaseID)+'<\/div>'+\n      '<div class=\"idpl-detail-title\">'+escapeHtml(d.Title)+'<\/div>'+\n      '<div class=\"idpl-detail-pattern\"><a data-pattern=\"'+escapeHtml(d.Pattern)+'\">'+escapeHtml(d.Pattern)+'<\/a><\/div>'+\n      '<div class=\"idpl-detail-summary\">'+escapeHtml(d.Summary)+'<\/div>'+\n      '<div class=\"idpl-detail-grid\">'+\n        '<div><strong>Type:<\/strong> <a data-type=\"'+escapeHtml(d.InterventionType)+'\">'+escapeHtml(d.InterventionType)+'<\/a><\/div>'+\n        '<div><strong>Country:<\/strong> <a data-country=\"'+escapeHtml(d.Country)+'\">'+escapeHtml(d.Country)+'<\/a><\/div>'+\n        '<div><strong>Love:<\/strong> '+escapeHtml(d.Love)+'<\/div>'+\n        '<div><strong>Power:<\/strong> '+escapeHtml(d.Power)+'<\/div>'+\n        '<div><strong>Tone:<\/strong> <a data-tone=\"'+escapeHtml(d.EmotionalTone)+'\">'+escapeHtml(d.EmotionalTone)+'<\/a><\/div>'+\n        '<div><strong>Source:<\/strong> '+escapeHtml(d.Source)+'<\/div>'+\n      '<\/div>'+\n      (url ? '<a class=\"idpl-writeup-link\" href=\"'+escapeHtml(url)+'\">Read the full case study &rarr;<\/a>' : '');\n\n    el.querySelector('.idpl-detail-pattern a').addEventListener('click', function(e){\n      e.stopPropagation(); setPatternFilter(d.Pattern);\n    });\n    el.querySelectorAll('.idpl-detail-grid a').forEach(function(a){\n      a.addEventListener('click', function(e){\n        e.stopPropagation();\n        if (a.dataset.type) toggleTypeFilter(a.dataset.type);\n        if (a.dataset.country) setCountryFilter(a.dataset.country);\n        if (a.dataset.tone) toggleToneFilter(a.dataset.tone);\n      });\n    });\n  }\n\n  function populateOptions(){\n    var patterns = Array.from(new Set(CASES.map(function(d){return d.Pattern;}).filter(Boolean))).sort();\n    document.getElementById('idpl-pattern-list').innerHTML = patterns.map(function(p){ return '<option value=\"'+escapeHtml(p)+'\">'; }).join('');\n\n    var types = Array.from(new Set(CASES.map(function(d){return d.InterventionType;}).filter(Boolean))).sort();\n    document.getElementById('idpl-type-chips').innerHTML = types.map(function(t){\n      return '<div class=\"idpl-chip\" data-type=\"'+escapeHtml(t)+'\">'+escapeHtml(t)+'<\/div>';\n    }).join('');\n    document.querySelectorAll('#idpl-type-chips .idpl-chip').forEach(function(chip){\n      chip.addEventListener('click', function(){ toggleTypeFilter(chip.dataset.type); });\n    });\n\n    var tones = Array.from(new Set(CASES.map(function(d){return d.EmotionalTone;}).filter(Boolean))).sort();\n    document.getElementById('idpl-tone-chips').innerHTML = tones.map(function(t){\n      return '<div class=\"idpl-chip\" data-tone=\"'+escapeHtml(t)+'\">'+escapeHtml(t)+'<\/div>';\n    }).join('');\n    document.querySelectorAll('#idpl-tone-chips .idpl-chip').forEach(function(chip){\n      chip.addEventListener('click', function(){ toggleToneFilter(chip.dataset.tone); });\n    });\n\n    var countries = Array.from(new Set(CASES.map(function(d){return d.Country;}).filter(Boolean))).sort();\n    var countrySel = document.getElementById('idpl-country');\n    countries.forEach(function(c){\n      var opt = document.createElement('option'); opt.value = c; opt.textContent = c;\n      countrySel.appendChild(opt);\n    });\n  }\n\n  function wireEvents(){\n    document.getElementById('idpl-search').addEventListener('input', function(e){ state.search = e.target.value; render(); });\n    document.getElementById('idpl-pattern').addEventListener('input', function(e){ state.pattern = e.target.value; render(); });\n    document.getElementById('idpl-country').addEventListener('change', function(e){ state.country = e.target.value; render(); });\n    document.getElementById('idpl-reset').addEventListener('click', function(){\n      state = { search:'', pattern:'', types:new Set(), tones:new Set(), country:'', view: state.view };\n      render();\n    });\n    document.getElementById('idpl-view-cards').addEventListener('click', function(){ state.view='cards'; render(); });\n    document.getElementById('idpl-view-table').addEventListener('click', function(){ state.view='table'; render(); });\n    document.getElementById('idpl-cards').addEventListener('click', function(e){\n      var tag = e.target.closest('.idpl-tag-pattern');\n      if (tag){ e.stopPropagation(); setPatternFilter(tag.dataset.pattern); }\n    });\n  }\n\n  function loadPapaParse(cb){\n    if (window.Papa) return cb();\n    var s = document.createElement('script');\n    s.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js';\n    s.onload = cb;\n    document.head.appendChild(s);\n  }\n\n  function init(){\n    readStateFromURL();\n    wireEvents();\n    loadPapaParse(function(){\n      Papa.parse(CSV_URL, {\n        download: true,\n        header: true,\n        complete: function(results){\n          CASES = results.data.filter(function(d){ return d.Status === 'Published'; });\n          populateOptions();\n          syncControlsToState();\n          render();\n        }\n      });\n    });\n  }\n\n  if (document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', init);\n  } else { init(); }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Intervention Design Pattern Library &mdash; Explorer Browse, search, and filter every published case. Browse by Pattern Intervention Type Emotional Tone Country All countries Reset filters Cards Table Title Pattern Type Country Love Power Select a case from the list to see full details. &times;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"footnotes":""},"class_list":["post-255","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/pages\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":14,"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/pages\/255\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/pages\/255\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/rad-studio.earth\/intervention-design-pattern-library\/wp-json\/wp\/v2\/media?parent=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}