@khipu/design-system 0.2.0-alpha.117 → 0.2.0-alpha.119

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-07-09T20:18:21.242Z
+ * Generated: 2026-07-14T13:18:31.041Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -6735,8 +6735,6 @@ div.kds-invoice-header,
     place-items: center;
     color: #fff;
     flex-shrink: 0;
-    /* Clip the slightly-oversized logo (see `.kds-invoice-merchant img`) to the
-       rounded square so it can fully cover the deep-purple background. */
     overflow: hidden;
 }
 
@@ -6750,6 +6748,12 @@ div.kds-invoice-header,
     color: var(--kds-color-text-primary);
 }
 
+/* Neutro oscuro para logos claros (detección de luminancia — KTUF-204). */
+.kds-invoice-merchant-neutral.dark {
+    background: var(--kds-color-gray-800);
+    border-color: var(--kds-color-gray-700);
+}
+
 .kds-invoice-merchant.initials {
     font-weight: 700;
     font-size: 11px;
@@ -6757,13 +6761,12 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-merchant img {
-    /* Slightly larger than the container (+2px, centered by the grid) so the
-       logo overflows under the parent's rounded clip and the deep-purple
-       background never peeks through at the corners when the logo shrinks. */
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
-    object-fit: cover;
-    border-radius: var(--kds-radius-md);
+    /* `contain` sobre el fondo neutro: el logo se muestra completo y las
+       transparencias no quedan sobre el color de marca (KTUF-204). */
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: var(--kds-spacing-0-5);
 }
 
 /* -- Card Title -- */

package/dist/beercss/khipu-beercss.js

@@ -894,10 +894,85 @@ const ui = _context.ui;
         initStickyInvoice();
         initHideOnScroll();
         initBankModal();
+        initMerchantLogoBackdrop();
 
         console.log('Material Design initialization complete!');
     }
 
+    /**
+     * Initialize merchant logo backdrop (KTUF-204)
+     * Los logos de comercio van sobre el fondo neutro, no sobre el color de marca (los PNG
+     * con transparencia se ahogan contra su propio color). La luminancia decide entre los
+     * dos neutros: paper para logos oscuros, gray-800 para logos claros. Espejo vanilla de
+     * KdsInvoiceMerchant/logoLuminance.ts para las vistas server-side (payment).
+     * @param {Element} root - Root element to scope the query (default: document)
+     */
+    function initMerchantLogoBackdrop(root) {
+        root = root || document;
+        var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
+        var SAMPLE_SIZE = 16;
+        var ALPHA_THRESHOLD = 128;
+        var MIN_OPAQUE_RATIO = 0.02;
+
+        root.querySelectorAll('.kds-invoice-merchant').forEach(function(tile) {
+            var img = tile.querySelector('img');
+            if (!img) return;
+
+            /* Con logo: fondo neutro; el color de marca queda solo para el fallback. */
+            var brandBackground = tile.style.background;
+            tile.style.background = '';
+            tile.classList.add('kds-invoice-merchant-neutral');
+
+            /* Si el logo falla (el onerror server-side lo reemplaza por el ícono),
+               restaurar el tile de color de marca. */
+            img.addEventListener('error', function() {
+                tile.classList.remove('kds-invoice-merchant-neutral', 'dark');
+                tile.style.background = brandBackground;
+            });
+
+            measureLogoLuminance(img.getAttribute('src'), function(luminance) {
+                if (luminance != null && luminance > LIGHT_LOGO_LUMINANCE_THRESHOLD &&
+                        tile.classList.contains('kds-invoice-merchant-neutral')) {
+                    tile.classList.add('dark');
+                }
+            });
+        });
+
+        function measureLogoLuminance(url, callback) {
+            if (!url) { callback(null); return; }
+            var probe = new Image();
+            probe.crossOrigin = 'anonymous';
+            probe.onload = function() {
+                try {
+                    var canvas = document.createElement('canvas');
+                    canvas.width = SAMPLE_SIZE;
+                    canvas.height = SAMPLE_SIZE;
+                    var context = canvas.getContext('2d');
+                    if (!context) { callback(null); return; }
+                    context.drawImage(probe, 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+                    var data = context.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE).data;
+                    var sum = 0;
+                    var opaquePixels = 0;
+                    for (var i = 0; i < data.length; i += 4) {
+                        if (data[i + 3] < ALPHA_THRESHOLD) continue;
+                        sum += (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255;
+                        opaquePixels++;
+                    }
+                    if (opaquePixels < SAMPLE_SIZE * SAMPLE_SIZE * MIN_OPAQUE_RATIO) {
+                        callback(null);
+                        return;
+                    }
+                    callback(sum / opaquePixels);
+                } catch (e) {
+                    /* canvas tainted: el origen no permite CORS — no medible */
+                    callback(null);
+                }
+            };
+            probe.onerror = function() { callback(null); };
+            probe.src = url;
+        }
+    }
+
     /**
      * Initialize sidenav for mobile navigation
      */