Update preview.html with better descriptions and all shapes

- Clarify shape descriptions (icon = logo mark only, rectangle = icon + text)
- Add text-only sections for both payments and socials
- Use proper 150x100 aspect ratio for rectangle/full-logo/text-only
- Add grid-wide CSS class for wider icon display

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

preview.html

@@ -67,6 +67,9 @@
             gap: 15px;
             margin-bottom: 30px;
         }
+        .grid-wide {
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        }
         .icon-box {
             background: #fff;
             border: 1px solid #ddd;
@@ -125,36 +128,42 @@
     <div id="payments" class="section active">
         <h2>Payment Icons</h2>
 
-        <h3>Icon Shape - Light Accent (la)</h3>
+        <h3>Icon (logo mark only) - Light Accent</h3>
         <div class="grid" id="payments-icon-la"></div>
 
-        <h3>Icon Shape - Dark Accent (da) - Dark Background</h3>
+        <h3>Icon (logo mark only) - Dark Accent on Dark Background</h3>
         <div class="grid" id="payments-icon-da"></div>
 
-        <h3>Icon Shape - Light Mode (lm)</h3>
+        <h3>Icon (logo mark only) - Light Mode (monochrome)</h3>
         <div class="grid" id="payments-icon-lm"></div>
 
-        <h3>Icon Shape - Dark Mode (dm) - Dark Background</h3>
+        <h3>Icon (logo mark only) - Dark Mode (monochrome) on Dark Background</h3>
         <div class="grid" id="payments-icon-dm"></div>
 
-        <h3>Square Shape - Light Accent (la)</h3>
+        <h3>Square (logo in square frame) - Light Accent</h3>
         <div class="grid" id="payments-square-la"></div>
 
-        <h3>Rectangle Shape - Light Accent (la)</h3>
+        <h3>Rectangle (icon + brand text, 150×100) - Light Accent</h3>
-        <div class="grid" id="payments-rectangle-la"></div>
+        <div class="grid grid-wide" id="payments-rectangle-la"></div>
+
+        <h3>Text Only (brand name) - Light Accent</h3>
+        <div class="grid grid-wide" id="payments-text-only-la"></div>
     </div>
 
     <div id="socials" class="section">
         <h2>Social Icons</h2>
 
-        <h3>Icon Shape - Light Accent (la)</h3>
+        <h3>Icon (logo mark only) - Light Accent</h3>
         <div class="grid" id="socials-icon-la"></div>
 
-        <h3>Icon Shape - Dark Accent (da) - Dark Background</h3>
+        <h3>Icon (logo mark only) - Dark Accent on Dark Background</h3>
         <div class="grid" id="socials-icon-da"></div>
 
-        <h3>Full Logo - Light Accent (la)</h3>
+        <h3>Full Logo (icon + brand text, 150×100) - Light Accent</h3>
-        <div class="grid" id="socials-full-logo-la"></div>
+        <div class="grid grid-wide" id="socials-full-logo-la"></div>
+
+        <h3>Text Only (brand name) - Light Accent</h3>
+        <div class="grid grid-wide" id="socials-text-only-la"></div>
     </div>
 
     <script>
@@ -249,6 +258,49 @@
                 });
         }
 
+        // Render wide icons (150x100 aspect ratio)
+        function renderIconsWide(containerId, brands, spriteFile, suffix, width, height, isDark = false) {
+            const container = document.getElementById(containerId);
+            if (!container) return;
+
+            fetch(spriteFile)
+                .then(r => r.text())
+                .then(svg => {
+                    const spriteId = `sprite-${containerId}`;
+                    const div = document.createElement('div');
+                    div.id = spriteId;
+                    div.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden;';
+                    div.innerHTML = svg;
+                    document.body.appendChild(div);
+
+                    const symbols = div.querySelectorAll('symbol');
+                    const symbolIds = Array.from(symbols).map(s => s.id);
+
+                    brands.forEach(brand => {
+                        const id = `${brand}_${suffix}`;
+                        const exists = symbolIds.includes(id);
+
+                        if (!exists) {
+                            console.warn(`[${containerId}] MISSING symbol: #${id}`);
+                        }
+
+                        const box = document.createElement('div');
+                        box.className = 'icon-box' + (isDark ? ' dark' : '') + (exists ? '' : ' missing');
+                        box.innerHTML = `
+                            <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="${exists ? '' : 'border: 2px dashed red;'}">
+                                <use href="#${id}"></use>
+                            </svg>
+                            <span>${brand}${exists ? '' : ' (MISSING)'}</span>
+                        `;
+                        container.appendChild(box);
+                    });
+                })
+                .catch(e => {
+                    console.error(`[${containerId}] Error:`, e);
+                    container.innerHTML = `<p>Error loading ${spriteFile}: ${e.message}</p>`;
+                });
+        }
+
         // Debug: Check for invisible icons after render
         function debugInvisibleIcons() {
             document.querySelectorAll('.icon-box').forEach(box => {
@@ -296,12 +348,14 @@
         renderIcons('payments-icon-lm', paymentBrands, 'sprites/payments/icon-lm.svg', 'lm', 45);
         renderIcons('payments-icon-dm', paymentBrands, 'sprites/payments/icon-dm.svg', 'dm', 45, true);
         renderIcons('payments-square-la', paymentBrands, 'sprites/payments/square-la.svg', 'la', 45);
-        renderIcons('payments-rectangle-la', paymentBrands, 'sprites/payments/rectangle-la.svg', 'la', 60);
+        renderIconsWide('payments-rectangle-la', paymentBrands, 'sprites/payments/rectangle-la.svg', 'la', 150, 100);
+        renderIconsWide('payments-text-only-la', paymentBrands, 'sprites/payments/text-only-la.svg', 'la', 150, 100);
 
         // Social icons
         renderIcons('socials-icon-la', socialBrands, 'sprites/socials/icon-la.svg', 'la', 45);
         renderIcons('socials-icon-da', socialBrands, 'sprites/socials/icon-da.svg', 'da', 45, true);
-        renderIcons('socials-full-logo-la', socialBrands, 'sprites/socials/full-logo-la.svg', 'la', 80);
+        renderIconsWide('socials-full-logo-la', socialBrands, 'sprites/socials/full-logo-la.svg', 'la', 150, 100);
+        renderIconsWide('socials-text-only-la', socialBrands, 'sprites/socials/text-only-la.svg', 'la', 150, 100);
 
         function showSection(name) {
             document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));