← back to Consulting Designerwallcoverings Com
fix Newest concept sort restoring natural order
133ec4279a5bc4ed462f4a5046d15febc43bd974 · 2026-08-30 09:40:16 -0700 · Steve Abrams
Files touched
M build.mjsM public/versions/atelier.htmlM public/versions/gallery.htmlM public/versions/heritage.htmlM public/versions/maison.htmlM public/versions/studio.htmlM public/versions/texture.htmlA verification/e2e-proof.jsonA verification/sort-reset.e2e.cjs
Diff
commit 133ec4279a5bc4ed462f4a5046d15febc43bd974
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sun Aug 30 09:40:16 2026 -0700
fix Newest concept sort restoring natural order
---
build.mjs | 4 ++--
public/versions/atelier.html | 22 +++++++++++-----------
public/versions/gallery.html | 22 +++++++++++-----------
public/versions/heritage.html | 22 +++++++++++-----------
public/versions/maison.html | 22 +++++++++++-----------
public/versions/studio.html | 22 +++++++++++-----------
public/versions/texture.html | 22 +++++++++++-----------
verification/e2e-proof.json | 32 ++++++++++++++++++++++++++++++++
verification/sort-reset.e2e.cjs | 30 ++++++++++++++++++++++++++++++
9 files changed, 130 insertions(+), 68 deletions(-)
diff --git a/build.mjs b/build.mjs
index 53b756c..96b8890 100644
--- a/build.mjs
+++ b/build.mjs
@@ -703,7 +703,7 @@ function versionPage(h, conceptIdx = 0) {
const img = g
? `<div class="gimg"><img src="${g.image}&width=540" loading="lazy" alt="${String(title).replace(/"/g, '"')}"></div>`
: `<div class="gimg" style="background:linear-gradient(135deg,hsl(${hue},22%,${h.dark ? 24 : 78}%),hsl(${(hue + 40) % 360},30%,${h.dark ? 14 : 64}%))"></div>`;
- return `<article class="gcard" data-title="${String(title).replace(/"/g, '"')}" data-vendor="${String(vendor).replace(/"/g, '"')}" data-type="${String(ptype).replace(/"/g, '"')}">
+ return `<article class="gcard" data-order="${i}" data-title="${String(title).replace(/"/g, '"')}" data-vendor="${String(vendor).replace(/"/g, '"')}" data-type="${String(ptype).replace(/"/g, '"')}">
${img}
<h4>${title}</h4><div class="gmeta"><span>${vendor}</span><span class="tier">${ptype}</span></div>
</article>`;
@@ -800,7 +800,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/public/versions/atelier.html b/public/versions/atelier.html
index 46e8e9c..3b1d7b2 100644
--- a/public/versions/atelier.html
+++ b/public/versions/atelier.html
@@ -76,34 +76,34 @@ footer .in{max-width:1240px;margin:0 auto;padding:36px 22px;display:flex;justify
<input type="range" id="dens" min="2" max="6" step="1" value="4">
</div>
</div>
- <div class="grid" id="grid"><article class="gcard" data-title="Willow Pearl - Cream" data-vendor="1838 Wallcoverings" data-type="Wallcovering">
+ <div class="grid" id="grid"><article class="gcard" data-order="0" data-title="Willow Pearl - Cream" data-vendor="1838 Wallcoverings" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2008-148-04-Willow-Pearl-scaled_27cc3134-1291-4605-85ca-d870cd905b85.jpg?v=1773305872&width=540" loading="lazy" alt="Willow Pearl - Cream"></div>
<h4>Willow Pearl - Cream</h4><div class="gmeta"><span>1838 Wallcoverings</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Designdrop - Colourful" data-vendor="A.S. Création" data-type="Wallcovering">
+ </article><article class="gcard" data-order="1" data-title="Designdrop - Colourful" data-vendor="A.S. Création" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/66e3a5f29fd1fd50090f5d5fce9b4ddc.jpg?v=1773629119&width=540" loading="lazy" alt="Designdrop - Colourful"></div>
<h4>Designdrop - Colourful</h4><div class="gmeta"><span>A.S. Création</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Brown on Tint" data-vendor="Alan Campbell" data-type="Fabric">
+ </article><article class="gcard" data-order="2" data-title="Brown on Tint" data-vendor="Alan Campbell" data-type="Fabric">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Criss-Cross-Brown-on-Tint-AC403-16_015244-sm-thumb.jpg?v=1783597230&width=540" loading="lazy" alt="Brown on Tint"></div>
<h4>Brown on Tint</h4><div class="gmeta"><span>Alan Campbell</span><span class="tier">Fabric</span></div>
- </article><article class="gcard" data-title="Riviera" data-vendor="Ananbo" data-type="Wallcovering">
+ </article><article class="gcard" data-order="3" data-title="Riviera" data-vendor="Ananbo" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/riviera.webp?v=1761541180&width=540" loading="lazy" alt="Riviera"></div>
<h4>Riviera</h4><div class="gmeta"><span>Ananbo</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Ark - Parchment - beige" data-vendor="Andrew Martin" data-type="Wallcovering">
+ </article><article class="gcard" data-order="4" data-title="Ark - Parchment - beige" data-vendor="Andrew Martin" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AMW10001_1611_11959302-5997-4bcd-9a99-c54a9b0919e8.jpg?v=1775761440&width=540" loading="lazy" alt="Ark - Parchment - beige"></div>
<h4>Ark - Parchment - beige</h4><div class="gmeta"><span>Andrew Martin</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Gibson, Navy" data-vendor="Anna French" data-type="Wallcovering">
+ </article><article class="gcard" data-order="5" data-title="Gibson, Navy" data-vendor="Anna French" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AT78793_4d4910ee-a9f9-4534-ae47-bed6b7d9942d.jpg?v=1782985244&width=540" loading="lazy" alt="Gibson, Navy"></div>
<h4>Gibson, Navy</h4><div class="gmeta"><span>Anna French</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Anthology - Stria Stone/Amber/Plum" data-vendor="Anthology" data-type="Wallcovering">
+ </article><article class="gcard" data-order="6" data-title="Anthology - Stria Stone/Amber/Plum" data-vendor="Anthology" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ESHE131796.jpg?v=1784735551&width=540" loading="lazy" alt="Anthology - Stria Stone/Amber/Plum"></div>
<h4>Anthology - Stria Stone/Amber/Plum</h4><div class="gmeta"><span>Anthology</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Caswell Sage Green" data-vendor="Apartment Wallpaper" data-type="Wallcovering">
+ </article><article class="gcard" data-order="7" data-title="Caswell Sage Green" data-vendor="Apartment Wallpaper" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/PSW1213RL.jpg?v=1740775136&width=540" loading="lazy" alt="Caswell Sage Green"></div>
<h4>Caswell Sage Green</h4><div class="gmeta"><span>Apartment Wallpaper</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Atlantic Cay - Verdant" data-vendor="Architectural Fabrics" data-type="Wallcovering">
+ </article><article class="gcard" data-order="8" data-title="Atlantic Cay - Verdant" data-vendor="Architectural Fabrics" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Skintex-SF_Aspect_Teal.jpg?v=1773218078&width=540" loading="lazy" alt="Atlantic Cay - Verdant"></div>
<h4>Atlantic Cay - Verdant</h4><div class="gmeta"><span>Architectural Fabrics</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Agra Okra" data-vendor="Arte International" data-type="Wallcovering">
+ </article><article class="gcard" data-order="9" data-title="Agra Okra" data-vendor="Arte International" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Agra_18310_Roomshot_Web_LR-medium-two-thirds.jpg?v=1775694511&width=540" loading="lazy" alt="Agra Okra"></div>
<h4>Agra Okra</h4><div class="gmeta"><span>Arte International</span><span class="tier">Wallcovering</span></div>
</article></div>
@@ -120,7 +120,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/public/versions/gallery.html b/public/versions/gallery.html
index df43d1f..cbfbd51 100644
--- a/public/versions/gallery.html
+++ b/public/versions/gallery.html
@@ -76,34 +76,34 @@ footer .in{max-width:1240px;margin:0 auto;padding:36px 22px;display:flex;justify
<input type="range" id="dens" min="2" max="6" step="1" value="4">
</div>
</div>
- <div class="grid" id="grid"><article class="gcard" data-title="Asolo Pecan Grasscloth" data-vendor="Fentucci" data-type="Wallcovering">
+ <div class="grid" id="grid"><article class="gcard" data-order="0" data-title="Asolo Pecan Grasscloth" data-vendor="Fentucci" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWNAT-100190.jpg?v=1782322040&width=540" loading="lazy" alt="Asolo Pecan Grasscloth"></div>
<h4>Asolo Pecan Grasscloth</h4><div class="gmeta"><span>Fentucci</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Terracina Amber V" data-vendor="Fentucci Naturals" data-type="Wallcovering">
+ </article><article class="gcard" data-order="1" data-title="Terracina Amber V" data-vendor="Fentucci Naturals" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/FE-WD027.jpg?v=1784808561&width=540" loading="lazy" alt="Terracina Amber V"></div>
<h4>Terracina Amber V</h4><div class="gmeta"><span>Fentucci Naturals</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Java Slate Blue" data-vendor="Franquemont London" data-type="Wallcovering">
+ </article><article class="gcard" data-order="2" data-title="Java Slate Blue" data-vendor="Franquemont London" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Java_SlateBlue_WallpaperSample_Franquemont_948a1aaa-ae30-4eb1-85ab-0e00b2144f5f.webp?v=1771008254&width=540" loading="lazy" alt="Java Slate Blue"></div>
<h4>Java Slate Blue</h4><div class="gmeta"><span>Franquemont London</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Tall Trees Delft Blue" data-vendor="G P & J Baker" data-type="Wallcovering">
+ </article><article class="gcard" data-order="3" data-title="Tall Trees Delft Blue" data-vendor="G P & J Baker" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/tall-trees-delft-blue-g-p-j-baker-37222264569907.jpg?v=1785463623&width=540" loading="lazy" alt="Tall Trees Delft Blue"></div>
<h4>Tall Trees Delft Blue</h4><div class="gmeta"><span>G P & J Baker</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Elefantes Agua" data-vendor="Gaston Y Daniela" data-type="Wallcovering">
+ </article><article class="gcard" data-order="4" data-title="Elefantes Agua" data-vendor="Gaston Y Daniela" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GDW5772_007_1ab582ac-1f6b-4e40-b3ed-45e30b5c120c.jpg?v=1776795809&width=540" loading="lazy" alt="Elefantes Agua"></div>
<h4>Elefantes Agua</h4><div class="gmeta"><span>Gaston Y Daniela</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Glambeads Phro Stone Glass Bead" data-vendor="Glambeads by DW" data-type="Wallcovering">
+ </article><article class="gcard" data-order="5" data-title="Glambeads Phro Stone Glass Bead" data-vendor="Glambeads by DW" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/copy-of-glambeads-duos-stone-glass-bead-wallpaper-8-30331885387827.jpg?v=1785455474&width=540" loading="lazy" alt="Glambeads Phro Stone Glass Bead"></div>
<h4>Glambeads Phro Stone Glass Bead</h4><div class="gmeta"><span>Glambeads by DW</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Crystalabra Shards Small" data-vendor="Glass Beaded" data-type="Wallcovering">
+ </article><article class="gcard" data-order="6" data-title="Crystalabra Shards Small" data-vendor="Glass Beaded" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-03-28at12.16.42PM.png?v=1648497345&width=540" loading="lazy" alt="Crystalabra Shards Small"></div>
<h4>Crystalabra Shards Small</h4><div class="gmeta"><span>Glass Beaded</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Hollywood Glamour Glitter - Sapphire Blue" data-vendor="Glitter Walls" data-type="Wallcovering">
+ </article><article class="gcard" data-order="7" data-title="Hollywood Glamour Glitter - Sapphire Blue" data-vendor="Glitter Walls" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2026-05-27at12.55.58PM.png?v=1779911785&width=540" loading="lazy" alt="Hollywood Glamour Glitter - Sapphire Blue"></div>
<h4>Hollywood Glamour Glitter - Sapphire Blue</h4><div class="gmeta"><span>Glitter Walls</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Malatesta Damask - Aubergine" data-vendor="GP & J Baker" data-type="Wallcovering">
+ </article><article class="gcard" data-order="8" data-title="Malatesta Damask - Aubergine" data-vendor="GP & J Baker" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/BW45056_6.jpg?v=1775941520&width=540" loading="lazy" alt="Malatesta Damask - Aubergine"></div>
<h4>Malatesta Damask - Aubergine</h4><div class="gmeta"><span>GP & J Baker</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Leopard Brown" data-vendor="Graduate Collection" data-type="Wallcovering">
+ </article><article class="gcard" data-order="9" data-title="Leopard Brown" data-vendor="Graduate Collection" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/leopard-brown-graduate-collection-37140643217459.jpg?v=1785458198&width=540" loading="lazy" alt="Leopard Brown"></div>
<h4>Leopard Brown</h4><div class="gmeta"><span>Graduate Collection</span><span class="tier">Wallcovering</span></div>
</article></div>
@@ -120,7 +120,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/public/versions/heritage.html b/public/versions/heritage.html
index f9dfaae..7e000fe 100644
--- a/public/versions/heritage.html
+++ b/public/versions/heritage.html
@@ -76,34 +76,34 @@ footer .in{max-width:1240px;margin:0 auto;padding:36px 22px;display:flex;justify
<input type="range" id="dens" min="2" max="6" step="1" value="4">
</div>
</div>
- <div class="grid" id="grid"><article class="gcard" data-title="Mens Bomber Jacket" data-vendor="Contrado" data-type="Others">
+ <div class="grid" id="grid"><article class="gcard" data-order="0" data-title="Mens Bomber Jacket" data-vendor="Contrado" data-type="Others">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2643921_mens-bomber-jacket_0.jpg?v=1742242131&width=540" loading="lazy" alt="Mens Bomber Jacket"></div>
<h4>Mens Bomber Jacket</h4><div class="gmeta"><span>Contrado</span><span class="tier">Others</span></div>
- </article><article class="gcard" data-title="Manor-Gardens Winter" data-vendor="Coordonné" data-type="Mural">
+ </article><article class="gcard" data-order="1" data-title="Manor-Gardens Winter" data-vendor="Coordonné" data-type="Mural">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/YSP0546_01.jpg?v=1784738420&width=540" loading="lazy" alt="Manor-Gardens Winter"></div>
<h4>Manor-Gardens Winter</h4><div class="gmeta"><span>Coordonné</span><span class="tier">Mural</span></div>
- </article><article class="gcard" data-title="Allure - Bronzy Taupe" data-vendor="Daisy Bennett" data-type="Wallcovering">
+ </article><article class="gcard" data-order="2" data-title="Allure - Bronzy Taupe" data-vendor="Daisy Bennett" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/products/db11526.jpg?v=1602006818&width=540" loading="lazy" alt="Allure - Bronzy Taupe"></div>
<h4>Allure - Bronzy Taupe</h4><div class="gmeta"><span>Daisy Bennett</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Coutts — Deep Rich Gold gilded Xuan paper" data-vendor="De Gournay" data-type="Wallpaper">
+ </article><article class="gcard" data-order="3" data-title="Coutts — Deep Rich Gold gilded Xuan paper" data-vendor="De Gournay" data-type="Wallpaper">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/06052020101555.jpg?v=1784731138&width=540" loading="lazy" alt="Coutts — Deep Rich Gold gilded Xuan paper"></div>
<h4>Coutts — Deep Rich Gold gilded Xuan paper</h4><div class="gmeta"><span>De Gournay</span><span class="tier">Wallpaper</span></div>
- </article><article class="gcard" data-title="Bambù Strié Wall - 002" data-vendor="Dedar" data-type="Wallcovering">
+ </article><article class="gcard" data-order="4" data-title="Bambù Strié Wall - 002" data-vendor="Dedar" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/1__74269.1773625470.jpg?v=1773712278&width=540" loading="lazy" alt="Bambù Strié Wall - 002"></div>
<h4>Bambù Strié Wall - 002</h4><div class="gmeta"><span>Dedar</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Madagascar Cloth 3 Raffia" data-vendor="Designer Wallcoverings" data-type="Wallcovering">
+ </article><article class="gcard" data-order="5" data-title="Madagascar Cloth 3 Raffia" data-vendor="Designer Wallcoverings" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWC-278566-DesignerWallcoverings-Los-Angeles-1_a3bede8c-b94d-477d-b0c2-97ad23dba752.png?v=1741881338&width=540" loading="lazy" alt="Madagascar Cloth 3 Raffia"></div>
<h4>Madagascar Cloth 3 Raffia</h4><div class="gmeta"><span>Designer Wallcoverings</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Huerta Gitana Piedra - Piedra" data-vendor="Designers Guild" data-type="Wallcovering">
+ </article><article class="gcard" data-order="6" data-title="Huerta Gitana Piedra - Piedra" data-vendor="Designers Guild" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/huerta-gitana-piedra.webp?v=1761090551&width=540" loading="lazy" alt="Huerta Gitana Piedra - Piedra"></div>
<h4>Huerta Gitana Piedra - Piedra</h4><div class="gmeta"><span>Designers Guild</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Color Bars, Olive" data-vendor="Designtex" data-type="Wallcovering">
+ </article><article class="gcard" data-order="7" data-title="Color Bars, Olive" data-vendor="Designtex" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/6727501__26889.1730829023.jpg?v=1783690828&width=540" loading="lazy" alt="Color Bars, Olive"></div>
<h4>Color Bars, Olive</h4><div class="gmeta"><span>Designtex</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Sol Carretto Mural Rocco By Dolce & Gabbana" data-vendor="Dolce & Gabbana" data-type="Wallcovering">
+ </article><article class="gcard" data-order="8" data-title="Sol Carretto Mural Rocco By Dolce & Gabbana" data-vendor="Dolce & Gabbana" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TCW011TCAHPUC092.jpg?v=1711558473&width=540" loading="lazy" alt="Sol Carretto Mural Rocco By Dolce & Gabbana"></div>
<h4>Sol Carretto Mural Rocco By Dolce & Gabbana</h4><div class="gmeta"><span>Dolce & Gabbana</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Gallery Walls - White" data-vendor="Donghia" data-type="Wallcovering">
+ </article><article class="gcard" data-order="9" data-title="Gallery Walls - White" data-vendor="Donghia" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DG-09703_010.jpg?v=1772819030&width=540" loading="lazy" alt="Gallery Walls - White"></div>
<h4>Gallery Walls - White</h4><div class="gmeta"><span>Donghia</span><span class="tier">Wallcovering</span></div>
</article></div>
@@ -120,7 +120,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/public/versions/maison.html b/public/versions/maison.html
index 942a73c..7a17d6a 100644
--- a/public/versions/maison.html
+++ b/public/versions/maison.html
@@ -76,34 +76,34 @@ footer .in{max-width:1240px;margin:0 auto;padding:36px 22px;display:flex;justify
<input type="range" id="dens" min="2" max="6" step="1" value="4">
</div>
</div>
- <div class="grid" id="grid"><article class="gcard" data-title="Tabula Wax Yellow" data-vendor="Artmura" data-type="Wallcovering">
+ <div class="grid" id="grid"><article class="gcard" data-order="0" data-title="Tabula Wax Yellow" data-vendor="Artmura" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TABW-002.jpg?v=1781283018&width=540" loading="lazy" alt="Tabula Wax Yellow"></div>
<h4>Tabula Wax Yellow</h4><div class="gmeta"><span>Artmura</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="History of Art 2 - Green" data-vendor="AS Creation" data-type="Wallcovering">
+ </article><article class="gcard" data-order="1" data-title="History of Art 2 - Green" data-vendor="AS Creation" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/792889b95340fba909e80a1654dba520_26de4b84-bada-44c9-8ff0-d634e951ba3c.jpg?v=1776187521&width=540" loading="lazy" alt="History of Art 2 - Green"></div>
<h4>History of Art 2 - Green</h4><div class="gmeta"><span>AS Creation</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="AT50-04 Unfinished" data-vendor="Atomic 50 Ceilings" data-type="Tin Ceiling Tile">
+ </article><article class="gcard" data-order="2" data-title="AT50-04 Unfinished" data-vendor="Atomic 50 Ceilings" data-type="Tin Ceiling Tile">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/36-raw.webp?v=1773709468&width=540" loading="lazy" alt="AT50-04 Unfinished"></div>
<h4>AT50-04 Unfinished</h4><div class="gmeta"><span>Atomic 50 Ceilings</span><span class="tier">Tin Ceiling Tile</span></div>
- </article><article class="gcard" data-title="Puntini Sisal - Tanlines" data-vendor="Backdrop" data-type="Wallcovering">
+ </article><article class="gcard" data-order="3" data-title="Puntini Sisal - Tanlines" data-vendor="Backdrop" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/puntini-sisal-tanlines.jpg?v=1761078002&width=540" loading="lazy" alt="Puntini Sisal - Tanlines"></div>
<h4>Puntini Sisal - Tanlines</h4><div class="gmeta"><span>Backdrop</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Parvani Linen" data-vendor="Baker Lifestyle" data-type="Wallcovering">
+ </article><article class="gcard" data-order="4" data-title="Parvani Linen" data-vendor="Baker Lifestyle" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/PW78034_5_3f924781-0c2e-438b-9846-83f79e437024.jpg?v=1777019988&width=540" loading="lazy" alt="Parvani Linen"></div>
<h4>Parvani Linen</h4><div class="gmeta"><span>Baker Lifestyle</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Otoko Pewter" data-vendor="Black Edition" data-type="Wallcovering">
+ </article><article class="gcard" data-order="5" data-title="Otoko Pewter" data-vendor="Black Edition" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W930-03-otoko-wallcovering-pewter_01_5832ae5f-061c-4ca9-a0fd-a2cfae71fd80.jpg?v=1775598526&width=540" loading="lazy" alt="Otoko Pewter"></div>
<h4>Otoko Pewter</h4><div class="gmeta"><span>Black Edition</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Tiger Lily Midnight" data-vendor="Brand McKenzie" data-type="Wallcovering">
+ </article><article class="gcard" data-order="6" data-title="Tiger Lily Midnight" data-vendor="Brand McKenzie" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWBM-260149.jpg?v=1773968873&width=540" loading="lazy" alt="Tiger Lily Midnight"></div>
<h4>Tiger Lily Midnight</h4><div class="gmeta"><span>Brand McKenzie</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Wild Meadow - Plaster Pink" data-vendor="British Walls" data-type="Wallcovering">
+ </article><article class="gcard" data-order="7" data-title="Wild Meadow - Plaster Pink" data-vendor="British Walls" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/0146f618c045458f55fde3938e24a872_8d33407f-805e-4aaa-ac25-b833e713ab71.jpg?v=1688757110&width=540" loading="lazy" alt="Wild Meadow - Plaster Pink"></div>
<h4>Wild Meadow - Plaster Pink</h4><div class="gmeta"><span>British Walls</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Yasu Silver" data-vendor="Brunschwig & Fils" data-type="Wallcovering">
+ </article><article class="gcard" data-order="8" data-title="Yasu Silver" data-vendor="Brunschwig & Fils" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/P8015111_11_926bf78a-0113-4b3d-a601-d75cad06b09c.jpg?v=1777019993&width=540" loading="lazy" alt="Yasu Silver"></div>
<h4>Yasu Silver</h4><div class="gmeta"><span>Brunschwig & Fils</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Carnegie Casa 478" data-vendor="Carnegie" data-type="Upholstery">
+ </article><article class="gcard" data-order="9" data-title="Carnegie Casa 478" data-vendor="Carnegie" data-type="Upholstery">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/21104478_puf_2.jpg?v=1787114221&width=540" loading="lazy" alt="Carnegie Casa 478"></div>
<h4>Carnegie Casa 478</h4><div class="gmeta"><span>Carnegie</span><span class="tier">Upholstery</span></div>
</article></div>
@@ -120,7 +120,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/public/versions/studio.html b/public/versions/studio.html
index faf0efc..d4037e5 100644
--- a/public/versions/studio.html
+++ b/public/versions/studio.html
@@ -76,34 +76,34 @@ footer .in{max-width:1240px;margin:0 auto;padding:36px 22px;display:flex;justify
<input type="range" id="dens" min="2" max="6" step="1" value="4">
</div>
</div>
- <div class="grid" id="grid"><article class="gcard" data-title="Titik Wp Linen" data-vendor="Caroline Cecil Textiles" data-type="Wallcovering">
+ <div class="grid" id="grid"><article class="gcard" data-order="0" data-title="Titik Wp Linen" data-vendor="Caroline Cecil Textiles" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/titik-wp-linen-caroline-cecil-textiles-37235619921971.jpg?v=1785463834&width=540" loading="lazy" alt="Titik Wp Linen"></div>
<h4>Titik Wp Linen</h4><div class="gmeta"><span>Caroline Cecil Textiles</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Posh Snakes Green" data-vendor="Catchii Netherlands Europe" data-type="Wallcovering">
+ </article><article class="gcard" data-order="1" data-title="Posh Snakes Green" data-vendor="Catchii Netherlands Europe" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Wallpaper-Behang-Posh-Snakes-gray-green-groen-grijs-Catchii-mockup_328e2e61-4b16-43d9-bf54-c100543af4bd.jpg?v=1744999054&width=540" loading="lazy" alt="Posh Snakes Green"></div>
<h4>Posh Snakes Green</h4><div class="gmeta"><span>Catchii Netherlands Europe</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Tortoise" data-vendor="Celerie Kemble" data-type="Wallcovering">
+ </article><article class="gcard" data-order="2" data-title="Tortoise" data-vendor="Celerie Kemble" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/tortoise.jpg?v=1760721667&width=540" loading="lazy" alt="Tortoise"></div>
<h4>Tortoise</h4><div class="gmeta"><span>Celerie Kemble</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Diva Poplin, Vert" data-vendor="Charles Burger" data-type="Fabric">
+ </article><article class="gcard" data-order="3" data-title="Diva Poplin, Vert" data-vendor="Charles Burger" data-type="Fabric">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/vert-1904_1_134404.jpg?v=1782672048&width=540" loading="lazy" alt="Diva Poplin, Vert"></div>
<h4>Diva Poplin, Vert</h4><div class="gmeta"><span>Charles Burger</span><span class="tier">Fabric</span></div>
- </article><article class="gcard" data-title="Lulu Stripe Navy on White Linen Screen Printed" data-vendor="China Seas" data-type="Fabric">
+ </article><article class="gcard" data-order="4" data-title="Lulu Stripe Navy on White Linen Screen Printed" data-vendor="China Seas" data-type="Fabric">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/navy-on-white-linen-1781_1_214246.jpg?v=1781635420&width=540" loading="lazy" alt="Lulu Stripe Navy on White Linen Screen Printed"></div>
<h4>Lulu Stripe Navy on White Linen Screen Printed</h4><div class="gmeta"><span>China Seas</span><span class="tier">Fabric</span></div>
- </article><article class="gcard" data-title="Fretwork Garden 04 Gold" data-vendor="Christian Lacroix Europe" data-type="Wallcovering">
+ </article><article class="gcard" data-order="5" data-title="Fretwork Garden 04 Gold" data-vendor="Christian Lacroix Europe" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/153103_97480d3b-9d8e-4f48-9143-fc26d0b57d45.webp?v=1738951194&width=540" loading="lazy" alt="Fretwork Garden 04 Gold"></div>
<h4>Fretwork Garden 04 Gold</h4><div class="gmeta"><span>Christian Lacroix Europe</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Highland Wonder/Lagoon Wp" data-vendor="Clarke and Clarke" data-type="Wallcovering">
+ </article><article class="gcard" data-order="6" data-title="Highland Wonder/Lagoon Wp" data-vendor="Clarke and Clarke" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W0202_01_CAC.jpg?v=1777020004&width=540" loading="lazy" alt="Highland Wonder/Lagoon Wp"></div>
<h4>Highland Wonder/Lagoon Wp</h4><div class="gmeta"><span>Clarke and Clarke</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Gray" data-vendor="Cloth and Paper" data-type="Fabric">
+ </article><article class="gcard" data-order="7" data-title="Gray" data-vendor="Cloth and Paper" data-type="Fabric">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gray-313_1_155301.jpg?v=1782479480&width=540" loading="lazy" alt="Gray"></div>
<h4>Gray</h4><div class="gmeta"><span>Cloth and Paper</span><span class="tier">Fabric</span></div>
- </article><article class="gcard" data-title="Soie Bois Tresse Epicéa" data-vendor="CMO Paris" data-type="Wallcovering">
+ </article><article class="gcard" data-order="8" data-title="Soie Bois Tresse Epicéa" data-vendor="CMO Paris" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/cmo-soie-bois-mural-wso-03-68.jpg?v=1785007404&width=540" loading="lazy" alt="Soie Bois Tresse Epicéa"></div>
<h4>Soie Bois Tresse Epicéa</h4><div class="gmeta"><span>CMO Paris</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Palm Jungle - Olive Green On White" data-vendor="Cole & Son" data-type="Wallcovering">
+ </article><article class="gcard" data-order="9" data-title="Palm Jungle - Olive Green On White" data-vendor="Cole & Son" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/PalmJungle_Image_Flatshot_Item_95-1001.jpg?v=1779809928&width=540" loading="lazy" alt="Palm Jungle - Olive Green On White"></div>
<h4>Palm Jungle - Olive Green On White</h4><div class="gmeta"><span>Cole & Son</span><span class="tier">Wallcovering</span></div>
</article></div>
@@ -120,7 +120,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/public/versions/texture.html b/public/versions/texture.html
index f3a0642..2bbe78b 100644
--- a/public/versions/texture.html
+++ b/public/versions/texture.html
@@ -76,34 +76,34 @@ footer .in{max-width:1240px;margin:0 auto;padding:36px 22px;display:flex;justify
<input type="range" id="dens" min="2" max="6" step="1" value="4">
</div>
</div>
- <div class="grid" id="grid"><article class="gcard" data-title="Accessorise Type Ii Vinyl Cadillac" data-vendor="Dupenny" data-type="Wallcovering">
+ <div class="grid" id="grid"><article class="gcard" data-order="0" data-title="Accessorise Type Ii Vinyl Cadillac" data-vendor="Dupenny" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Accessorise-CADILLAC-WP-Thumb-Shop.jpg?v=1775598529&width=540" loading="lazy" alt="Accessorise Type Ii Vinyl Cadillac"></div>
<h4>Accessorise Type Ii Vinyl Cadillac</h4><div class="gmeta"><span>Dupenny</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Anemone Opera - Powder Tide - Whimsical" data-vendor="DW Bespoke Studio" data-type="Wallcovering">
+ </article><article class="gcard" data-order="1" data-title="Anemone Opera - Powder Tide - Whimsical" data-vendor="DW Bespoke Studio" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/anemone-opera-powder-tide-whimsical-wallcoverings-37749450014771.jpg?v=1785449411&width=540" loading="lazy" alt="Anemone Opera - Powder Tide - Whimsical"></div>
<h4>Anemone Opera - Powder Tide - Whimsical</h4><div class="gmeta"><span>DW Bespoke Studio</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Courtright Cranes Red and Cream" data-vendor="DW Exclusive Wallpaper" data-type="Wallcovering">
+ </article><article class="gcard" data-order="2" data-title="Courtright Cranes Red and Cream" data-vendor="DW Exclusive Wallpaper" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWC-211497-DesignerWallcoverings-Los-Angeles-4_7be9edb9-4fa6-4932-befb-1ff3ea511732.jpg?v=1694028327&width=540" loading="lazy" alt="Courtright Cranes Red and Cream"></div>
<h4>Courtright Cranes Red and Cream</h4><div class="gmeta"><span>DW Exclusive Wallpaper</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Chiba Bay Blue Throw Blanket on Vitali Velvet" data-vendor="DW Home" data-type="Others">
+ </article><article class="gcard" data-order="3" data-title="Chiba Bay Blue Throw Blanket on Vitali Velvet" data-vendor="DW Home" data-type="Others">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/products/11859510-dig-762164-chibabay-blue-by-designerwallcoverings_19-1_a3ea7102-1f49-4d97-9c9b-15dd0926b182.jpg?v=1630525797&width=540" loading="lazy" alt="Chiba Bay Blue Throw Blanket on Vitali Velvet"></div>
<h4>Chiba Bay Blue Throw Blanket on Vitali Velvet</h4><div class="gmeta"><span>DW Home</span><span class="tier">Others</span></div>
- </article><article class="gcard" data-title="Mission Beach Polaris" data-vendor="DWHD" data-type="Wallcovering">
+ </article><article class="gcard" data-order="4" data-title="Mission Beach Polaris" data-vendor="DWHD" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/akasha-polaris.jpg?v=1775660108&width=540" loading="lazy" alt="Mission Beach Polaris"></div>
<h4>Mission Beach Polaris</h4><div class="gmeta"><span>DWHD</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Big Croco Métal Golden Brown" data-vendor="Elitis" data-type="Wallcovering">
+ </article><article class="gcard" data-order="5" data-title="Big Croco Métal Golden Brown" data-vendor="Elitis" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mural-vibrations-big-croco-metal-fd3224e33b74b3b7acf840edd721.jpg?v=1783791056&width=540" loading="lazy" alt="Big Croco Métal Golden Brown"></div>
<h4>Big Croco Métal Golden Brown</h4><div class="gmeta"><span>Elitis</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Emiliana Parati, Valentin Yudashkin 5" data-vendor="Emiliana Parati" data-type="Wallcovering">
+ </article><article class="gcard" data-order="6" data-title="Emiliana Parati, Valentin Yudashkin 5" data-vendor="Emiliana Parati" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/emiliana-parati-valentin-yudashkin-5.jpg?v=1761090561&width=540" loading="lazy" alt="Emiliana Parati, Valentin Yudashkin 5"></div>
<h4>Emiliana Parati, Valentin Yudashkin 5</h4><div class="gmeta"><span>Emiliana Parati</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Raden Ecru01" data-vendor="Fabricut" data-type="Wallcovering">
+ </article><article class="gcard" data-order="7" data-title="Raden Ecru01" data-vendor="Fabricut" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/de9f750ac1c642327c28f3548da0ef5d.jpg?v=1787151546&width=540" loading="lazy" alt="Raden Ecru01"></div>
<h4>Raden Ecru01</h4><div class="gmeta"><span>Fabricut</span><span class="tier">Wallcovering</span></div>
- </article><article class="gcard" data-title="Harlequin Cool Blue" data-vendor="FallingStar Studio" data-type="Wallcoverings">
+ </article><article class="gcard" data-order="8" data-title="Harlequin Cool Blue" data-vendor="FallingStar Studio" data-type="Wallcoverings">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/harlequin-cool-blue-wallcovering-fallingstar-studio-37558561308723.jpg?v=1785455814&width=540" loading="lazy" alt="Harlequin Cool Blue"></div>
<h4>Harlequin Cool Blue</h4><div class="gmeta"><span>FallingStar Studio</span><span class="tier">Wallcoverings</span></div>
- </article><article class="gcard" data-title="Purnon" data-vendor="Farrow & Ball" data-type="Wallcovering">
+ </article><article class="gcard" data-order="9" data-title="Purnon" data-vendor="Farrow & Ball" data-type="Wallcovering">
<div class="gimg"><img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/purnon.jpg?v=1761344027&width=540" loading="lazy" alt="Purnon"></div>
<h4>Purnon</h4><div class="gmeta"><span>Farrow & Ball</span><span class="tier">Wallcovering</span></div>
</article></div>
@@ -120,7 +120,7 @@ function apply(){var v=sel.value,cards=[].slice.call(grid.children);
cards.sort(function(a,b){if(v==='title')return a.dataset.title.localeCompare(b.dataset.title);
if(v==='vendor')return a.dataset.vendor.localeCompare(b.dataset.vendor);
if(v==='type')return (a.dataset.type||'').localeCompare(b.dataset.type||'')||a.dataset.title.localeCompare(b.dataset.title);
- return 0;});
+ return (+a.dataset.order)-(+b.dataset.order);});
cards.forEach(function(c){grid.appendChild(c);});localStorage.setItem(KS,v);}
function densFill(){var mn=+dens.min||2,mx=+dens.max||6;dens.style.setProperty('--fill',((dens.value-mn)/(mx-mn)*100)+'%');}
sel.addEventListener('change',apply);
diff --git a/verification/e2e-proof.json b/verification/e2e-proof.json
new file mode 100644
index 0000000..58c3500
--- /dev/null
+++ b/verification/e2e-proof.json
@@ -0,0 +1,32 @@
+{
+ "intent": "Selecting Newest after another concept-grid sort restores the server-generated natural order.",
+ "risk_tier": "R2",
+ "environment": "local isolated Express portal at http://127.0.0.1:19622; no deploy or external writes",
+ "timestamp": "2026-08-30T09:38:00-07:00",
+ "baseline": "The Newest comparator returned 0 for every card, so the DOM stayed in the previously selected order.",
+ "commands": [
+ "npm run build",
+ "node ~/.claude/skills/3x/run.js --url http://127.0.0.1:19622/versions/atelier.html --user admin --pass *** --expect 'Curated This Week' --selector '.gcard' --paths '/api/health,/portal' --no-open",
+ "node verification/sort-reset.e2e.cjs"
+ ],
+ "assertions": [
+ { "boundary": "generator", "verdict": "PASS", "evidence": "build.mjs regenerated all six concept pages with data-order=0..9" },
+ { "boundary": "HTTP", "verdict": "PASS", "evidence": "/3x M1 returned 200 text/html; /api/health and /portal responded under auth" },
+ { "boundary": "render", "verdict": "PASS", "evidence": "/3x M2 produced a 1034KB screenshot; Chrome parity render passed" },
+ { "boundary": "interaction", "verdict": "PASS", "evidence": "Focused Playwright test proved title sort changes order and Newest restores the exact original 10-card sequence" },
+ { "boundary": "auth", "verdict": "PASS", "evidence": "Test context used the portal's local Basic Auth credentials; no credential or customer data changed" },
+ { "boundary": "generic_3x_automation", "verdict": "FAIL", "evidence": "Generic /3x M3 reported one JS error without detail; focused Playwright captured zero page/application console errors and passed the changed control path" },
+ { "boundary": "scaffold_backport_comparison", "verdict": "PASS", "evidence": "Fresh /private/tmp/tk22-codex-guard-fixture-5716 scaffold contains the credential-safe fetch guard in both gated portal and admin outputs and auto-committed its scaffold" }
+ ],
+ "artifacts": [
+ "/var/folders/rq/j8g1f7nn6jv6_lr1cfmqym6w0000gn/T/3x-khbSKF/render.png",
+ "verification/sort-reset.e2e.cjs"
+ ],
+ "negative_checks": [
+ "A title sort must materially change the natural card sequence.",
+ "Returning to Newest must reproduce the exact initial sequence.",
+ "Application console/page errors must remain empty."
+ ],
+ "cleanup": "Local fixture retained under /private/tmp for audit; no production, deploy, DNS, social, spend, or customer-facing action performed.",
+ "verdict": "PASS for the changed Newest-sort journey; generic /3x diagnostic failure is disclosed above."
+}
diff --git a/verification/sort-reset.e2e.cjs b/verification/sort-reset.e2e.cjs
new file mode 100644
index 0000000..25b5b0f
--- /dev/null
+++ b/verification/sort-reset.e2e.cjs
@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+const { chromium } = require('/Users/macstudio3/Projects/Designer-Wallcoverings/node_modules/playwright');
+
+(async () => {
+ const base = process.env.BASE_URL || 'http://127.0.0.1:19622';
+ const browser = await chromium.launch({
+ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+ headless: true,
+ });
+ const context = await browser.newContext({ httpCredentials: { username: 'admin', password: 'DW2024!' } });
+ const page = await context.newPage();
+ const errors = [];
+ page.on('pageerror', error => errors.push(error.message));
+ page.on('console', message => message.type() === 'error' && errors.push(message.text()));
+ await page.goto(`${base}/versions/atelier.html`, { waitUntil: 'domcontentloaded' });
+ await page.waitForSelector('.gcard');
+ const titles = () => page.locator('.gcard').evaluateAll(cards => cards.map(card => card.dataset.title));
+ const natural = await titles();
+ await page.selectOption('#sortsel', 'title');
+ const sorted = await titles();
+ await page.selectOption('#sortsel', 'newest');
+ const restored = await titles();
+ const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+ if (same(natural, sorted)) throw new Error('Title sort did not change the natural order');
+ if (!same(natural, restored)) throw new Error('Newest did not restore the natural order');
+ const appErrors = errors.filter(message => !/favicon|ERR_FAILED|fonts\.googleapis/i.test(message));
+ if (appErrors.length) throw new Error(`Application errors: ${appErrors.join(' | ')}`);
+ console.log(JSON.stringify({ ok: true, cards: natural.length, title_sort_changed: true, newest_restored: true, ignored_external_errors: errors.length - appErrors.length }));
+ await browser.close();
+})().catch(error => { console.error(error.stack || error.message); process.exit(1); });
← 3dab9db add creds-in-URL fetch guard to gated portal + admin pages (
·
back to Consulting Designerwallcoverings Com
·
weekly snapshot refresh: dw-analysis + build + work-orders ( 79a998a →