Fix PDP inline-script escape-collapse + restore grid density slider

7f2e28e9c8670c86235296338ebd4bd94cc88365 · 2026-05-31 17:18:36 -0700 · Steve Abrams

- PDP pairings thumb (15760): url(\' collapsed to url('' + ..) at render →
  SyntaxError on every product page. Double-backslash per working idiom (6970).
- AI-designer regex (16492): /\/design\/(\d+)/ rendered to match(//design/(d+)/)
  → // became a line comment → unterminated match( → parse error killing the
  whole inline <script> for ALL visitors. Matches correct idiom at 22651.
- Restore density <input type=range> on /designs (stripped 2026-05-20) per
  Steve standing rule. Handler JS was already wired.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M server.js

Diff

commit 7f2e28e9c8670c86235296338ebd4bd94cc88365
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sun May 31 17:18:36 2026 -0700

    Fix PDP inline-script escape-collapse + restore grid density slider
    
    - PDP pairings thumb (15760): url(\' collapsed to url('' + ..) at render →
      SyntaxError on every product page. Double-backslash per working idiom (6970).
    - AI-designer regex (16492): /\/design\/(\d+)/ rendered to match(//design/(d+)/)
      → // became a line comment → unterminated match( → parse error killing the
      whole inline <script> for ALL visitors. Matches correct idiom at 22651.
    - Restore density <input type=range> on /designs (stripped 2026-05-20) per
      Steve standing rule. Handler JS was already wired.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 server.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/server.js b/server.js
index 19c3c94..23e2299 100644
--- a/server.js
+++ b/server.js
@@ -7057,8 +7057,17 @@ ${(req.query.source === 'all') ? `
             </optgroup>
           </select>
         </div>
-        <!-- 2026-05-20 Steve directive — density + spacing sliders stripped. -->
-        ${''}
+        <!-- Density slider — restored 2026-05-31 per Steve standing rule
+             (every product grid MUST have sort + density). Controls --cols on
+             #catalog-grid; the handler at the bottom of this page reads
+             #density-slider / #density-value and persists to localStorage. -->
+        <div class="density-wrap" style="display:flex;align-items:center;gap:7px">
+          <span style="font:11px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)" title="Grid density">Density</span>
+          <input type="range" id="density-slider" min="2" max="8" step="1" value="4"
+            aria-label="Grid density (columns)" aria-valuemin="2" aria-valuemax="8" aria-valuenow="4"
+            style="width:96px;accent-color:var(--accent,#1a1a1a);cursor:pointer">
+          <span id="density-value" style="font:11px var(--sans);color:var(--ink-faint);min-width:1ch">4</span>
+        </div>
         <button type="button" id="surprise-btn" class="filter-select"
           style="background:var(--gold,#c9a14b);color:var(--accent,#0d0d0d);border:0;font-weight:500;padding:8px 14px;cursor:pointer;border-radius:6px;letter-spacing:.04em"
           title="Generate one fresh design in a random palette · ~30s">✦ Surprise me</button>
@@ -15757,7 +15766,7 @@ ${(() => {
           if (!d.designs || !d.designs.length) { g.innerHTML = '<div style="grid-column:1/-1;color:var(--ink-faint);font-size:12px">No close pairings yet — catalog is still seeding.</div>'; return; }
           g.innerHTML = d.designs.map(function(p){
             return '<a href="/design/' + p.id + '" style="text-decoration:none;color:inherit;display:block">'
-              + '<div style="aspect-ratio:1;background:#0a0907 no-repeat center/cover;background-image:url(\'' + p.image_url + '\');border-radius:6px;border:1px solid var(--line);transition:transform .15s;"></div>'
+              + '<div style="aspect-ratio:1;background:#0a0907 no-repeat center/cover;background-image:url(\\'' + p.image_url + '\\');border-radius:6px;border:1px solid var(--line);transition:transform .15s;"></div>'
               + '<div style="margin-top:6px;display:flex;align-items:center;gap:6px"><span style="width:9px;height:9px;border-radius:50%;background:' + p.dominant_hex + ';border:1px solid rgba(0,0,0,.12)"></span><span style="font-size:11px;color:var(--ink-soft)">Lab Δ ' + p.distance.toFixed(1) + '</span></div>'
               + '</a>';
           }).join('');
@@ -16489,7 +16498,7 @@ ${(() => {
           }
           if (!designId) {
             // Last-ditch fallback — parse from URL
-            var m = window.location.pathname.match(/\/design\/(\d+)/);
+            var m = window.location.pathname.match(/\\/design\\/(\\d+)/);
             if (m) designId = parseInt(m[1], 10);
           }

← 03d26cf Publish luxe-v2 batch L4 image-reviewed+seed-deduped (41878, · back to Wallco Ai · designer-studio compose: async background generation — retur 606f45c →