From 9844f72eaf9937fb52be7c174128f2a7765fec73 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Sat, 26 Sep 2026 01:58:04 +0000
Subject: [PATCH] Wall of People Groups: nothing leaks onto the host page (no
 Font Awesome, no window.d3)

The critic fact-check (CRITIC-9) found the Wall injecting Font Awesome 6.5.1 into the HOST
page's <head> (global .fa-* rules that can restyle a partner's own icons) and loading d3@7 (a
floating range, no SRI) as window.d3, overwriting a host's own d3.
  - The card's heart / comment / share icons are now plain SVG paths in the card itself, not
    Font Awesome <i> tags in three foreignObject/xhtml divs per card (~6,300 on the wall: lighter
    too). The dialog hearts are inline SVG; the source-picker info icons are a text glyph. No
    Font Awesome stylesheet is injected anywhere.
  - src/wallD3.js loads d3@7.9.0 exactly, with integrity + crossorigin, keeps it in the module
    (wallD3()) and puts the host's window.d3 back (or leaves none).
  - The heart used `self.$store`; `self` is the browser's window, so a prayer made in this
    session never lit it. It now reads this.$store.
Headless proof: a stubbed-DOM test of the d3 loader, 6/6 (the host's d3 restored, none leaked,
exact version + integrity + crossorigin, a failure rejects). The bundle builds and contains 0 Font
Awesome references.
needs eyes: the Wall: hearts, comments and share icons render on the cards; a card whose group has
prayers shows a red heart; a host page with its own d3 or Font Awesome is unaffected.

(cherry picked from commit 28575d60138de3e61cbae6b062aba8596593ea7c)
---
 .../src/components/PeopleGroupsWall.vue       | 129 ++++++------------
 .../src/components/PrayerDialog.vue           |   4 +-
 .../src/components/SourceSelector.vue         |   6 +-
 .../wall-of-people-groups/src/wallD3.js       |  40 ++++++
 .../wall-of-people-groups.vue                 |  26 +---
 5 files changed, 88 insertions(+), 117 deletions(-)
 create mode 100644 plugin-designs/wall-of-people-groups/src/wallD3.js

diff --git a/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue b/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue
index 2a4b39cce..a670835f3 100644
--- a/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue
+++ b/plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue
@@ -34,6 +34,7 @@
 
 <script>
 import { lodPlan } from '../wallLod.js'
+import { wallD3 } from '../wallD3.js'
 // Wall of People Groups - D3 Zoomable Whiteboard
 export default {
     name: 'PeopleGroupsWall',
@@ -98,7 +99,7 @@ export default {
                 this.canvasHeight = 4000;  // 4ft tall
             }
             
-            const container = d3.select(this.$refs.canvas);
+            const container = wallD3().select(this.$refs.canvas);
             
             // Create SVG
             this.svg = container
@@ -109,7 +110,7 @@ export default {
                 .attr('preserveAspectRatio', 'xMidYMid meet');
             
             // Create zoom behavior - start zoomed out to see everything
-            this.zoom = d3.zoom()
+            this.zoom = wallD3().zoom()
                 .scaleExtent([0.1, 20])
                 .filter(function(event) {
                     // Allow zoom/pan except when trying to select text
@@ -234,7 +235,7 @@ export default {
             
             // Add people group name - NO TRUNCATION, smaller font, with clickable link
             cardGroups.each(function(d) {
-                const group = d3.select(this);
+                const group = wallD3().select(this);
                 const peopleID3 = d.peopleID3 || d.PeopleID3;
                 const name = d.name || d.post_title || 'Unknown Group';
                 
@@ -327,7 +328,7 @@ export default {
             // href only for cards in view when zoomed in, and takes it out again when they leave.
             const imgNodes = [];
             cardGroups.each(function(d, i) {
-                const group = d3.select(this);
+                const group = wallD3().select(this);
                 
                 if (d.imageUrl) {
                     // Add SVG image element with proper aspect ratio
@@ -369,86 +370,40 @@ export default {
             const totalButtonWidth = (buttonSize * 3) + (buttonSpacing * 2);
             const startX = (cardWidth - totalButtonWidth) / 2; // Center the button group
             
-            // Heart button (using foreignObject for FontAwesome)
-            const heartButton = cardGroups
-                .append('foreignObject')
-                .attr('x', startX)
-                .attr('y', buttonY)
-                .attr('width', buttonSize)
-                .attr('height', buttonSize)
-                .style('cursor', 'pointer')
-                .style('overflow', 'visible')
-                .on('click', (event, d) => {
-                    event.stopPropagation();
-                    this.openPrayerDialog(d);
-                });
-            
-            heartButton
-                .append('xhtml:div')
-                .attr('xmlns', 'http://www.w3.org/1999/xhtml')
-                .style('width', '100%')
-                .style('height', '100%')
-                .style('display', 'flex')
-                .style('align-items', 'center')
-                .style('justify-content', 'center')
-                .html(function(d) {
-                    // Combine API prayer count with any local session prayers
-                    const apiCount = Number(d.peoplePraying || 0);
-                    const localCount = self.$store?.prayers?.[d.ID] || 0;
-                    const prayerCount = apiCount + localCount;
-                    const iconClass = prayerCount > 0 ? 'fas fa-heart' : 'far fa-heart';
-                    const iconColor = prayerCount > 0 ? '#ed4956' : '#262626';
-                    return '<i class="' + iconClass + '" style="font-size: ' + buttonSize + 'px; color: ' + iconColor + ';"></i>';
-                });
-            
-            // Comment button
-            const commentButton = cardGroups
-                .append('foreignObject')
-                .attr('x', startX + buttonSpacing)
-                .attr('y', buttonY)
-                .attr('width', buttonSize)
-                .attr('height', buttonSize)
-                .style('cursor', 'pointer')
-                .style('overflow', 'visible')
-                .on('click', (event, d) => {
-                    event.stopPropagation();
-                    this.openComments(d);
-                });
-            
-            commentButton
-                .append('xhtml:div')
-                .attr('xmlns', 'http://www.w3.org/1999/xhtml')
-                .style('width', '100%')
-                .style('height', '100%')
-                .style('display', 'flex')
-                .style('align-items', 'center')
-                .style('justify-content', 'center')
-                .html('<i class="far fa-comment" style="font-size: ' + buttonSize + 'px; color: #262626;"></i>');
-            
-            // Share button
-            const shareButton = cardGroups
-                .append('foreignObject')
-                .attr('x', startX + (buttonSpacing * 2))
-                .attr('y', buttonY)
-                .attr('width', buttonSize)
-                .attr('height', buttonSize)
-                .style('cursor', 'pointer')
-                .style('overflow', 'visible')
-                .on('click', (event, d) => {
-                    event.stopPropagation();
-                    alert('Sharing functionality coming later!');
-                });
-            
-            shareButton
-                .append('xhtml:div')
-                .attr('xmlns', 'http://www.w3.org/1999/xhtml')
-                .style('width', '100%')
-                .style('height', '100%')
-                .style('display', 'flex')
-                .style('align-items', 'center')
-                .style('justify-content', 'center')
-                .html('<i class="far fa-paper-plane" style="font-size: ' + buttonSize + 'px; color: #262626;"></i>');
-            
+            // ICONS ARE PLAIN SVG, drawn in the card itself (CRITIC-9, the critic fact-check). They used to be
+            // Font Awesome <i> tags inside three foreignObject/xhtml divs per card: ~6,300 foreignObjects on
+            // the wall, and a Font Awesome stylesheet injected into the HOST page's <head>. A <g> with a
+            // transparent hit area and one <path> per icon needs neither.
+            const ICON = {
+                heart:   'M12 20.5s-7.2-4.4-9.2-8.8C1.3 8.3 3.2 4.6 6.7 4.6c2 0 3.5 1.1 4.3 2.4.8-1.3 2.3-2.4 4.3-2.4 3.5 0 5.4 3.7 3.9 7.1-2 4.4-9.2 8.8-9.2 8.8z',
+                comment: 'M4 4.5h16v11.5H9.5L4 20.5z',
+                plane:   'M21 3.5 3 10.8l7 2.7 2.7 7 8.3-17z'
+            };
+            const iconScale = buttonSize / 24;
+            const iconButton = (dx, onClick) => {
+                const g = cardGroups
+                    .append('g')
+                    .attr('class', 'wall-icon-btn')
+                    .attr('transform', `translate(${startX + dx}, ${buttonY})`)
+                    .style('cursor', 'pointer')
+                    .on('click', onClick);
+                g.append('rect').attr('width', buttonSize).attr('height', buttonSize).attr('fill', 'transparent');
+                return g.append('path').attr('transform', `scale(${iconScale})`).attr('stroke-width', 1.8)
+                    .attr('stroke-linejoin', 'round').attr('stroke-linecap', 'round');
+            };
+            // Heart: filled red once anyone has prayed, outlined otherwise. (The old code read `self.$store`;
+            // `self` is the browser's window, so a prayer made in this session never lit the heart.)
+            iconButton(0, (event, d) => { event.stopPropagation(); this.openPrayerDialog(d); })
+                .attr('d', ICON.heart)
+                .attr('fill', (d) => (Number(d.peoplePraying || 0) + (this.$store?.prayers?.[d.ID] || 0)) > 0 ? '#ed4956' : 'none')
+                .attr('stroke', (d) => (Number(d.peoplePraying || 0) + (this.$store?.prayers?.[d.ID] || 0)) > 0 ? '#ed4956' : '#262626');
+            // Comment
+            iconButton(buttonSpacing, (event, d) => { event.stopPropagation(); this.openComments(d); })
+                .attr('d', ICON.comment).attr('fill', 'none').attr('stroke', '#262626');
+            // Share
+            iconButton(buttonSpacing * 2, (event) => { event.stopPropagation(); alert('Sharing functionality coming later!'); })
+                .attr('d', ICON.plane).attr('fill', 'none').attr('stroke', '#262626');
+
             // Add prayer count text
             cardGroups
                 .append('text')
@@ -512,14 +467,14 @@ export default {
         resetZoom() {
             this.svg.transition()
                 .duration(750)
-                .call(this.zoom.transform, d3.zoomIdentity);
+                .call(this.zoom.transform, wallD3().zoomIdentity);
         },
         
         toggleOrientation() {
             this.isLandscape = !this.isLandscape;
             
             // Clear existing canvas
-            d3.select(this.$refs.canvas).selectAll('*').remove();
+            wallD3().select(this.$refs.canvas).selectAll('*').remove();
             
             // Reinitialize with new orientation
             this.initializeCanvas();
@@ -542,7 +497,7 @@ export default {
         updateLod() {
             if (!this._lodGrid || !this.svg || !this._imgNodes || this._printing) return;
             const el = this.svg.node();
-            const t = this._lodT || d3.zoomTransform(el);
+            const t = this._lodT || wallD3().zoomTransform(el);
             const r = el.getBoundingClientRect();
             // viewBox + 'meet': one wall unit is this many CSS pixels at zoom 1
             const displayScale = Math.min(r.width / this.canvasWidth, r.height / this.canvasHeight) || 0;
diff --git a/plugin-designs/wall-of-people-groups/src/components/PrayerDialog.vue b/plugin-designs/wall-of-people-groups/src/components/PrayerDialog.vue
index e578b40a1..79c3c90f6 100644
--- a/plugin-designs/wall-of-people-groups/src/components/PrayerDialog.vue
+++ b/plugin-designs/wall-of-people-groups/src/components/PrayerDialog.vue
@@ -28,14 +28,14 @@
                     <div v-if="!hasPrayed" class="prayer-prompt">
                         <h3>{{ $t('wall.prayingNow') }}</h3>
                         <button @click="confirmPrayer" class="prayer-confirm-btn">
-                            <i class="far fa-heart"></i>
+                            <svg class="heart-icon" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.2-4.4-9.2-8.8C1.3 8.3 3.2 4.6 6.7 4.6c2 0 3.5 1.1 4.3 2.4.8-1.3 2.3-2.4 4.3-2.4 3.5 0 5.4 3.7 3.9 7.1-2 4.4-9.2 8.8-9.2 8.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                             {{ $t('wall.yesPraying') }}
                         </button>
                     </div>
                     
                     <div v-else class="prayer-confirmed">
                         <div class="confirmed-message">
-                            <i class="fas fa-heart" style="color: #ed4956;"></i>
+                            <svg class="heart-icon" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.2-4.4-9.2-8.8C1.3 8.3 3.2 4.6 6.7 4.6c2 0 3.5 1.1 4.3 2.4.8-1.3 2.3-2.4 4.3-2.4 3.5 0 5.4 3.7 3.9 7.1-2 4.4-9.2 8.8-9.2 8.8z" fill="#ed4956" stroke="#ed4956" stroke-width="1.8" stroke-linejoin="round"/></svg>
                             <span>{{ $t('wall.thankYou') }}</span>
                         </div>
                         
diff --git a/plugin-designs/wall-of-people-groups/src/components/SourceSelector.vue b/plugin-designs/wall-of-people-groups/src/components/SourceSelector.vue
index 13a84ff3e..9f7bcb100 100644
--- a/plugin-designs/wall-of-people-groups/src/components/SourceSelector.vue
+++ b/plugin-designs/wall-of-people-groups/src/components/SourceSelector.vue
@@ -27,13 +27,13 @@
                     <code>{{ currentSource.url }}</code>
                 </p>
                 <p v-if="dataSource === 'CSV'" class="csv-info">
-                    <i class="fas fa-info-circle"></i> CSV includes ~1,439 groups with images from Joshua Project
+                    <span aria-hidden="true">ⓘ</span> CSV includes ~1,439 groups with images from Joshua Project
                 </p>
                 <p v-if="dataSource === 'DOXA_API'" class="api-info">
-                    <i class="fas fa-info-circle"></i> WordPress API — descriptions & photos, no prayer data
+                    <span aria-hidden="true">ⓘ</span> WordPress API — descriptions & photos, no prayer data
                 </p>
                 <p v-if="dataSource === 'PRAY_API'" class="api-info">
-                    <i class="fas fa-info-circle"></i> Live prayer data — people praying, committed workers, adoption, images
+                    <span aria-hidden="true">ⓘ</span> Live prayer data — people praying, committed workers, adoption, images
                 </p>
             </div>
         </div>
diff --git a/plugin-designs/wall-of-people-groups/src/wallD3.js b/plugin-designs/wall-of-people-groups/src/wallD3.js
new file mode 100644
index 000000000..517ec7791
--- /dev/null
+++ b/plugin-designs/wall-of-people-groups/src/wallD3.js
@@ -0,0 +1,40 @@
+/**
+ * wallD3.js — the Wall's d3, pinned, integrity-checked and kept OFF the host page's window.
+ *
+ * CRITIC-9 / CRITIC-5 (the critic fact-check): the Wall loaded `d3@7` (a floating range, no SRI)
+ * as a script tag, so it (a) could change underneath every partner without notice and (b) became
+ * `window.d3`, overwriting a host page's own d3, or, if the host already had one, the Wall ran on
+ * whatever version the host shipped. Now: one exact version, `integrity` + `crossorigin`, and the
+ * library is captured into this module and the host's `window.d3` put back exactly as it was.
+ */
+const D3_URL = 'https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js'
+const D3_SRI = 'sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i'
+
+let lib = null
+let loading = null
+
+/** The Wall's own d3 (null until ensureD3() has resolved). */
+export function wallD3() { return lib }
+
+export function ensureD3() {
+  if (lib) return Promise.resolve(lib)
+  if (typeof window === 'undefined') return Promise.reject(new Error('no window'))
+  if (!loading) loading = new Promise((resolve, reject) => {
+    const hadOwn = Object.prototype.hasOwnProperty.call(window, 'd3')
+    const hostD3 = window.d3
+    const s = document.createElement('script')
+    s.src = D3_URL
+    s.integrity = D3_SRI
+    s.crossOrigin = 'anonymous'
+    s.onload = () => {
+      lib = window.d3
+      // give the host its own d3 back (or leave no d3 behind if it had none)
+      if (hadOwn) window.d3 = hostD3
+      else { try { delete window.d3 } catch (_) { window.d3 = undefined } }
+      resolve(lib)
+    }
+    s.onerror = () => { loading = null; reject(new Error('d3 failed to load (network or integrity)')) }
+    document.head.appendChild(s)
+  })
+  return loading
+}
diff --git a/plugin-designs/wall-of-people-groups/wall-of-people-groups.vue b/plugin-designs/wall-of-people-groups/wall-of-people-groups.vue
index 2e33fd02c..0cbe61fce 100644
--- a/plugin-designs/wall-of-people-groups/wall-of-people-groups.vue
+++ b/plugin-designs/wall-of-people-groups/wall-of-people-groups.vue
@@ -20,30 +20,7 @@ import PeopleGroupsWall from './src/components/PeopleGroupsWall.vue'
 import CommentsDialog from './src/components/CommentsDialog.vue'
 import PrayerDialog from './src/components/PrayerDialog.vue'
 import SourceSelector from './src/components/SourceSelector.vue'
-
-const D3_JS = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'
-const FA_CSS = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'
-let d3Promise = null
-function ensureD3() {
-  if (typeof window === 'undefined' || window.d3) return Promise.resolve()
-  if (!d3Promise) d3Promise = new Promise((res, rej) => {
-    const s = document.createElement('script'); s.src = D3_JS
-    s.onload = () => res(); s.onerror = () => { d3Promise = null; rej(new Error('d3 failed to load')) }
-    document.head.appendChild(s)
-  })
-  return d3Promise
-}
-// Font Awesome's @font-face only registers from the DOCUMENT; its classes must also be inside the
-// shadow root. So the stylesheet goes in both places.
-function ensureFontAwesome(root) {
-  if (typeof document === 'undefined') return
-  if (!document.head.querySelector(`link[href="${FA_CSS}"]`)) {
-    const l = document.createElement('link'); l.rel = 'stylesheet'; l.href = FA_CSS; document.head.appendChild(l)
-  }
-  if (root && root !== document && !root.querySelector(`link[href="${FA_CSS}"]`)) {
-    const l = document.createElement('link'); l.rel = 'stylesheet'; l.href = FA_CSS; root.prepend(l)
-  }
-}
+import { ensureD3 } from './src/wallD3.js'
 
 export default {
   name: 'WallOfPeopleGroups',
@@ -52,7 +29,6 @@ export default {
     return { ready: false, error: null, commentsDialogVisible: false, prayerDialogVisible: false, selectedGroup: null }
   },
   mounted() {
-    ensureFontAwesome(this.$el?.getRootNode?.())
     ensureD3().then(() => { this.ready = true }, (e) => { this.error = e.message })
   },
   methods: {