From 2883dc858e5c379cdffa68c84580d34f20bea1da Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Fri, 10 Apr 2026 14:01:54 +0200
Subject: [PATCH] Extract ingredientCard

---
 index.html              |   6 +-
 js/ui/ingredientCard.js | 501 ++++++++++++++++++++++++++++++++++++++++
 js/ui/mealPlanEditor.js | 237 ++-----------------
 js/views/Pantry.js      | 420 ++-------------------------------
 4 files changed, 544 insertions(+), 620 deletions(-)
 create mode 100644 js/ui/ingredientCard.js

diff --git a/index.html b/index.html
index 91bfa1f..15caea0 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title>Recipe App - Modular</title>
-    <link rel="manifest" href="./manifest.webmanifest?v=20260408-97">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260410-99">
     <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -600,7 +600,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260408-97';
+        const APP_ASSET_VERSION = '20260410-99';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
@@ -634,7 +634,7 @@
         })();
     </script>
     <script type="module">
-        const appVersion = window.__APP_ASSET_VERSION__ || '20260408-97';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260410-99';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {
diff --git a/js/ui/ingredientCard.js b/js/ui/ingredientCard.js
new file mode 100644
index 0000000..a7e1940
--- /dev/null
+++ b/js/ui/ingredientCard.js
@@ -0,0 +1,501 @@
+import {
+    INGREDIENTS,
+    PRODUCTS,
+    CATEGORY_LABELS,
+    getProductsForIngredient,
+    ingredientHasProducts,
+    pantryQtyStep,
+} from '../data/catalog.js?v=8';
+import {
+    addOrMergeShoppingLines,
+    loadPantry,
+    setPantryQty,
+    setPantryProductQty,
+    getPantryTotal,
+    getPantryProducts,
+} from '../services/pantryShopping.js?v=2';
+import { showAppToast } from './toast.js';
+
+const CATEGORY_ICONS = {
+    pieczywo: 'fa-bread-slice',
+    nabial: 'fa-cheese',
+    mieso_ryby: 'fa-drumstick-bite',
+    warzywa: 'fa-carrot',
+    owoce: 'fa-apple-whole',
+    suche: 'fa-wheat-awn',
+    przyprawy: 'fa-leaf',
+    inne: 'fa-jar',
+};
+
+function esc(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function unitLabel(u) {
+    return u === 'szt' ? 'szt.' : u;
+}
+
+function formatQty(n) {
+    const rounded = Math.round((Number(n) || 0) * 10) / 10;
+    return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
+}
+
+function formatQtyWithUnit(qty, unit) {
+    return `${formatQty(qty)} ${unitLabel(unit)}`;
+}
+
+function productCountLabel(count) {
+    if (count === 1) return '1 produkt';
+    const mod10 = count % 10;
+    const mod100 = count % 100;
+    if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return `${count} produkty`;
+    return `${count} produktów`;
+}
+
+function nutritionForQty(def, qty, nutrition = def?.nutritionPer100g) {
+    if (!def || !nutrition || !Number.isFinite(qty) || qty <= 0) return null;
+    let grams = qty;
+    if (def.pantryUnit === 'szt' && def.weightPerPiece) grams = qty * def.weightPerPiece;
+    const factor = grams / 100;
+    return {
+        kcal: Math.round(nutrition.kcal * factor),
+        protein: Math.round(nutrition.protein * factor * 10) / 10,
+        fat: Math.round(nutrition.fat * factor * 10) / 10,
+        carbs: Math.round(nutrition.carbs * factor * 10) / 10,
+    };
+}
+
+function macroLine(n) {
+    if (!n) return '';
+    return `${n.kcal} kcal · ${formatQty(n.protein)}g B · ${formatQty(n.fat)}g T · ${formatQty(n.carbs)}g W`;
+}
+
+function mediaHtml(image, icon, sizeClass = 'w-9 h-9', radiusClass = 'rounded-lg') {
+    if (image) {
+        return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
+    }
+    return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
+}
+
+function compactMetaText(text, tone = 'default') {
+    const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
+    return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
+}
+
+function sortProductsByStock(products, pantryItems) {
+    return [...products].sort((a, b) => {
+        const aq = pantryItems.find((i) => i.productId === a.id)?.qty || 0;
+        const bq = pantryItems.find((i) => i.productId === b.id)?.qty || 0;
+        if (bq !== aq) return bq - aq;
+        return a.name.localeCompare(b.name, 'pl');
+    });
+}
+
+export function getIngredientCardHTML({
+    idBase,
+    overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
+    overlayStyle = 'pointer-events:none; background:rgba(0,0,0,0.5);',
+    cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
+    cardStyle = 'background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
+    heroHeightClass = 'h-[180px]',
+} = {}) {
+    if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
+    return `
+    <div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
+        <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
+            <div class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
+                <img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" />
+                <div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center">
+                    <i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
+                </div>
+                <button type="button" id="${idBase}-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
+                    <i class="fas fa-chevron-left text-sm"></i>
+                </button>
+                <button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
+                    <i class="fas fa-times text-sm"></i>
+                </button>
+            </div>
+            <div class="px-4 pt-3 pb-4 space-y-3">
+                <div>
+                    <p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#6ee7b7;"></p>
+                    <h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
+                    <p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
+                </div>
+                <div id="${idBase}-nutrition"></div>
+                <div id="${idBase}-stock"></div>
+                <div id="${idBase}-products"></div>
+                <div id="${idBase}-shop"></div>
+            </div>
+        </div>
+    </div>`;
+}
+
+export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze spiżarni' } = {}) {
+    if (!idBase) throw new Error('createIngredientCardController requires idBase');
+
+    const state = {
+        ingredientId: null,
+        productId: null,
+        selectedProductId: null,
+        sourceNote: defaultSourceNote,
+        onProductChange: null,
+        onAfterChange: null,
+        closeTimer: null,
+    };
+    let bound = false;
+
+    const el = (suffix = '') => document.getElementById(suffix ? `${idBase}-${suffix}` : idBase);
+
+    function renderHeader(def, product, pantry) {
+        const hasProducts = ingredientHasProducts(def.id);
+        const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
+        const image = product?.image || def.image;
+        const img = el('img');
+        const fallback = el('fallback');
+        const fallbackIcon = el('fallback-icon');
+        if (img && fallback) {
+            if (image) {
+                img.src = image;
+                img.alt = product?.name || def.name;
+                img.classList.remove('hidden');
+                fallback.classList.add('hidden');
+            } else {
+                img.classList.add('hidden');
+                fallback.classList.remove('hidden');
+                if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
+            }
+        }
+
+        const totalQty = getPantryTotal(def.id, pantry);
+        const categoryEl = el('category');
+        const nameEl = el('name');
+        const subtitleEl = el('subtitle');
+        const backBtn = el('back');
+
+        if (categoryEl) categoryEl.textContent = product?.brand || CATEGORY_LABELS[def.category] || def.category;
+        if (nameEl) nameEl.textContent = product?.name || def.name;
+
+        if (subtitleEl) {
+            let subtitle = '';
+            if (product) {
+                subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
+            } else if (hasProducts) {
+                subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
+            } else if (def.purchasePack?.label) {
+                subtitle = def.purchasePack.label;
+            }
+
+            if (subtitle) {
+                subtitleEl.textContent = subtitle;
+                subtitleEl.classList.remove('hidden');
+            } else {
+                subtitleEl.classList.add('hidden');
+            }
+        }
+
+        if (backBtn) {
+            backBtn.classList.toggle('hidden', !(hasProducts && state.productId));
+        }
+    }
+
+    function renderNutrition(def, product) {
+        const wrap = el('nutrition');
+        if (!wrap) return;
+        const nutrition = product?.nutritionPer100g || def.nutritionPer100g;
+        if (!nutrition) {
+            wrap.innerHTML = '';
+            return;
+        }
+
+        const hasProducts = ingredientHasProducts(def.id);
+        const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
+        const hint = product
+            ? 'dokładne dla produktu'
+            : hasProducts
+                ? 'orientacyjnie dla składnika'
+                : 'bazowe wartości';
+
+        wrap.innerHTML = `
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
+            <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(unitScope)} • ${esc(hint)}</p>
+            <div class="grid grid-cols-4 gap-1.5">
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                    <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${nutrition.kcal}</p>
+                    <p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
+                </div>
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                    <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${formatQty(nutrition.protein)}g</p>
+                    <p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
+                </div>
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                    <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${formatQty(nutrition.fat)}g</p>
+                    <p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
+                </div>
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                    <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${formatQty(nutrition.carbs)}g</p>
+                    <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
+                </div>
+            </div>`;
+    }
+
+    function renderStock() {
+        const wrap = el('stock');
+        if (!wrap || !state.ingredientId) return;
+        const def = INGREDIENTS[state.ingredientId];
+        if (!def) return;
+
+        const pantry = loadPantry();
+        const hasProducts = ingredientHasProducts(state.ingredientId);
+        const product = state.productId ? PRODUCTS[state.productId] : null;
+        const totalQty = getPantryTotal(state.ingredientId, pantry);
+        const unit = unitLabel(def.pantryUnit);
+
+        if (hasProducts && !product) {
+            const stockedCount = getPantryProducts(state.ingredientId, pantry).filter((i) => i.qty > 0).length;
+            const summaryNutrition = nutritionForQty(def, totalQty);
+            wrap.innerHTML = `
+                <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
+                <div class="rounded-xl px-3 py-2.5" style="background:#393937;">
+                    <div class="flex items-center justify-between gap-3">
+                        <div>
+                            <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(unit)}</p>
+                            <p class="text-[11px] mt-0.5" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(state.ingredientId).length} produktów ma stan</p>
+                        </div>
+                        <span class="text-[10px] text-right max-w-[92px]" style="color:#9b978f;">Wybierz produkt niżej, aby zmienić stan</span>
+                    </div>
+                    ${summaryNutrition ? `<p class="text-[10px] mt-2 tabular-nums" style="color:#9b978f;">${esc(macroLine(summaryNutrition))}</p>` : ''}
+                </div>`;
+            return;
+        }
+
+        const qty = product
+            ? (getPantryProducts(state.ingredientId, pantry).find((i) => i.productId === state.productId)?.qty || 0)
+            : totalQty;
+        const step = product ? (product.packSize || pantryQtyStep(state.ingredientId)) : pantryQtyStep(state.ingredientId);
+        const stockNutrition = nutritionForQty(def, qty, product?.nutritionPer100g || def.nutritionPer100g);
+
+        wrap.innerHTML = `
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
+            <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
+                <button type="button" class="ingredient-card-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(state.productId || '_generic')}" data-step="${step}" data-dir="-1" aria-label="Zmniejsz stan">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <div class="flex-1 text-center">
+                    <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(qty))} ${esc(unit)}</p>
+                    <p class="text-[10px] mt-0.5" style="color:#9b978f;">Krok: ${esc(formatQty(step))} ${esc(unit)}</p>
+                </div>
+                <button type="button" class="ingredient-card-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(state.productId || '_generic')}" data-step="${step}" data-dir="1" aria-label="Zwiększ stan">
+                    <i class="fas fa-plus text-xs"></i>
+                </button>
+            </div>
+            ${stockNutrition ? `<p class="text-[10px] mt-1.5 tabular-nums" style="color:#9b978f;">${esc(macroLine(stockNutrition))} na stanie</p>` : ''}`;
+
+        wrap.querySelectorAll('.ingredient-card-stock-btn').forEach((btn) => {
+            btn.addEventListener('click', () => {
+                const pid = btn.dataset.pid;
+                const stepVal = Number(btn.dataset.step) || 1;
+                const dir = Number(btn.dataset.dir) || 1;
+                const pantryState = loadPantry();
+                if (pid === '_generic') {
+                    const current = getPantryTotal(state.ingredientId, pantryState);
+                    setPantryQty(state.ingredientId, Math.max(0, current + stepVal * dir));
+                } else {
+                    const items = getPantryProducts(state.ingredientId, pantryState);
+                    const current = items.find((i) => i.productId === pid)?.qty || 0;
+                    setPantryProductQty(state.ingredientId, pid, Math.max(0, current + stepVal * dir));
+                }
+                render();
+                state.onAfterChange?.();
+            });
+        });
+    }
+
+    function productRowHtml(ingredientId, productId, pantry, selectedProductId) {
+        const def = INGREDIENTS[ingredientId];
+        const product = PRODUCTS[productId];
+        const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
+        const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
+        const isSelected = selectedProductId === productId;
+        return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
+            ${mediaHtml(product.image || def.image, icon)}
+            <div class="flex-1 min-w-0">
+                <div class="flex items-center justify-between gap-2">
+                    <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
+                    <span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
+                </div>
+                <div class="flex items-center gap-2 mt-0.5">
+                    ${compactMetaText(product.packLabel || '', 'muted')}
+                    ${isSelected ? compactMetaText('wybrany', 'success') : ''}
+                </div>
+            </div>
+            <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
+        </button>`;
+    }
+
+    function renderProducts() {
+        const wrap = el('products');
+        if (!wrap || !state.ingredientId) return;
+        if (!ingredientHasProducts(state.ingredientId)) {
+            wrap.innerHTML = '';
+            return;
+        }
+
+        const pantry = loadPantry();
+        const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
+        const selectedProductId = state.selectedProductId || state.productId;
+        const subtitle = state.productId
+            ? 'Wróć lub wybierz inny wariant.'
+            : 'Wybierz wariant, aby zobaczyć szczegóły.';
+
+        wrap.innerHTML = `
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
+            <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
+            <div class="space-y-1.5">
+                ${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, selectedProductId)).join('')}
+            </div>`;
+
+        wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
+            btn.addEventListener('click', () => {
+                const nextProductId = btn.dataset.productId || null;
+                state.productId = nextProductId;
+                state.selectedProductId = nextProductId;
+                if (nextProductId) state.onProductChange?.(nextProductId);
+                render();
+                state.onAfterChange?.();
+            });
+        });
+    }
+
+    function renderShop() {
+        const wrap = el('shop');
+        if (!wrap || !state.ingredientId) return;
+        const def = INGREDIENTS[state.ingredientId];
+        if (!def) return;
+
+        const hasProducts = ingredientHasProducts(state.ingredientId);
+        const product = state.productId ? PRODUCTS[state.productId] : null;
+        const packSize = product?.packSize || def.purchasePack?.amount;
+        const packLabel = product?.packLabel || def.purchasePack?.label;
+        const usesPacks = Boolean(packSize && packSize > 0);
+        const btnLabel = usesPacks
+            ? `Dodaj na listę (${packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`})`
+            : 'Dodaj na listę';
+        const helperText = hasProducts && !product
+            ? 'Doda składnik bez wskazanej marki. Jeśli chcesz konkretny produkt, wybierz go wyżej.'
+            : product
+                ? 'Pozycja trafi na listę zakupów z dokładnym produktem.'
+                : `Szybki skrót do listy zakupów ${defaultSourceNote === 'Ze spiżarni' ? 'ze spiżarni' : 'z planera'}.`;
+
+        wrap.innerHTML = `
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
+            <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(helperText)}</p>
+            <button type="button" class="ingredient-card-add-list w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
+                <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
+            </button>`;
+
+        wrap.querySelector('.ingredient-card-add-list')?.addEventListener('click', () => {
+            const amount = usesPacks ? packSize : pantryQtyStep(state.ingredientId);
+            const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`) : undefined;
+            const line = {
+                ingredientId: state.ingredientId,
+                amount,
+                unit: unitLabel(def.pantryUnit),
+                name: product?.name || def.name,
+                category: def.category,
+                sourceNote: note || state.sourceNote || defaultSourceNote,
+            };
+            if (state.productId) line.productId = state.productId;
+            addOrMergeShoppingLines([line]);
+            showAppToast(`Dodano ${product?.name || def.name} na listę.`);
+            window.refreshShopping?.();
+        });
+    }
+
+    function render() {
+        if (!state.ingredientId) return;
+        const def = INGREDIENTS[state.ingredientId];
+        if (!def) return;
+        const product = state.productId ? PRODUCTS[state.productId] : null;
+        const pantry = loadPantry();
+
+        renderHeader(def, product, pantry);
+        renderNutrition(def, product);
+        renderStock();
+        renderProducts();
+        renderShop();
+    }
+
+    function open({
+        ingredientId,
+        productId = null,
+        selectedProductId = productId,
+        sourceNote = defaultSourceNote,
+        onProductChange = null,
+        onAfterChange = null,
+    } = {}) {
+        const def = ingredientId ? INGREDIENTS[ingredientId] : null;
+        const overlay = el('overlay');
+        const card = el();
+        if (!def || !overlay || !card) return;
+
+        state.ingredientId = ingredientId;
+        state.productId = productId && PRODUCTS[productId] ? productId : null;
+        state.selectedProductId = selectedProductId && PRODUCTS[selectedProductId] ? selectedProductId : state.productId;
+        state.sourceNote = sourceNote;
+        state.onProductChange = onProductChange;
+        state.onAfterChange = onAfterChange;
+        render();
+
+        clearTimeout(state.closeTimer);
+        overlay.classList.remove('hidden');
+        overlay.style.pointerEvents = 'auto';
+        requestAnimationFrame(() => {
+            overlay.classList.add('opacity-100');
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        });
+    }
+
+    function close() {
+        const overlay = el('overlay');
+        const card = el();
+        if (overlay && card) {
+            overlay.classList.remove('opacity-100');
+            overlay.style.pointerEvents = 'none';
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(1.5rem)';
+            state.closeTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
+        }
+        state.ingredientId = null;
+        state.productId = null;
+        state.selectedProductId = null;
+        state.onProductChange = null;
+        state.onAfterChange = null;
+        state.sourceNote = defaultSourceNote;
+    }
+
+    function bind() {
+        if (bound) return;
+        bound = true;
+        el('close')?.addEventListener('click', close);
+        el('back')?.addEventListener('click', () => {
+            state.productId = null;
+            render();
+        });
+        el('overlay')?.addEventListener('click', (event) => {
+            if (event.target.id === `${idBase}-overlay`) close();
+        });
+    }
+
+    function refresh() {
+        if (state.ingredientId) render();
+    }
+
+    return {
+        bind,
+        open,
+        close,
+        refresh,
+        isOpen: () => Boolean(state.ingredientId),
+    };
+}
diff --git a/js/ui/mealPlanEditor.js b/js/ui/mealPlanEditor.js
index cbe2a1b..59f0ea1 100644
--- a/js/ui/mealPlanEditor.js
+++ b/js/ui/mealPlanEditor.js
@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES, PRODUCTS, CATEGORY_LABELS, getProductsForIngredient } from '../data/catalog.js?v=8';
+import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=8';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
     addDays,
@@ -15,8 +15,7 @@ import {
     savePlans,
 } from '../services/planStore.js?v=2';
 import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=4';
-import { loadPantry, getPantryTotal, getPantryProducts, setPantryQty, setPantryProductQty, addOrMergeShoppingLines } from '../services/pantryShopping.js?v=2';
-import { showAppToast } from './toast.js';
+import { loadPantry } from '../services/pantryShopping.js?v=2';
 import {
     bindCalendarDayClicks,
     createCalendarTopbarHTML,
@@ -27,6 +26,7 @@ import {
     renderCalendarGrid,
     syncCalendarTodayButton,
 } from './mealCalendar.js?v=1';
+import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260410-99';
 
 function esc(s) {
     return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
@@ -34,207 +34,6 @@ function esc(s) {
 
 const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 
-/* ── Product Card Popup ────────────────────────────── */
-
-function getProductCardHTML() {
-    return `
-    <div id="mpe-product-card-overlay" class="fixed inset-0 z-[70] bg-black/50 hidden flex items-center justify-center p-6" style="pointer-events:none">
-        <div id="mpe-product-card" class="relative w-full max-w-xs bg-[#2d2e2b] rounded-2xl shadow-2xl overflow-hidden" style="pointer-events:auto; max-height:80vh; overflow-y:auto;">
-            <div id="mpe-pc-hero" class="relative w-full h-[180px] bg-gray-800 overflow-hidden">
-                <img id="mpe-pc-img" class="w-full h-full object-cover hidden" alt="" />
-                <div id="mpe-pc-fallback" class="w-full h-full flex items-center justify-center">
-                    <i class="fas fa-box-open text-3xl text-gray-600"></i>
-                </div>
-                <button type="button" id="mpe-pc-close" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors">
-                    <i class="fas fa-times text-sm"></i>
-                </button>
-            </div>
-            <div class="px-4 pt-3 pb-4 space-y-3">
-                <div>
-                    <p id="mpe-pc-brand" class="text-[10px] font-semibold uppercase tracking-wider text-emerald-400"></p>
-                    <h3 id="mpe-pc-name" class="text-[15px] font-bold text-gray-100 leading-snug mt-0.5"></h3>
-                    <p id="mpe-pc-category" class="text-[11px] text-gray-500 mt-0.5"></p>
-                </div>
-                <div id="mpe-pc-pack" class="hidden">
-                    <span class="text-[10px] font-semibold uppercase tracking-wider text-gray-500">Opakowanie</span>
-                    <p id="mpe-pc-pack-val" class="text-[13px] font-semibold text-gray-300 mt-0.5"></p>
-                </div>
-                <div>
-                    <span id="mpe-pc-nut-label" class="text-[10px] font-semibold uppercase tracking-wider text-gray-500">Wartości odżywcze na 100 g</span>
-                    <div class="grid grid-cols-4 gap-2 mt-1.5">
-                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
-                            <p id="mpe-pc-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums"></p>
-                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">kcal</p>
-                        </div>
-                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
-                            <p id="mpe-pc-protein" class="text-[15px] font-bold text-blue-400 tabular-nums"></p>
-                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">białko</p>
-                        </div>
-                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
-                            <p id="mpe-pc-fat" class="text-[15px] font-bold text-amber-400 tabular-nums"></p>
-                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">tłuszcz</p>
-                        </div>
-                        <div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
-                            <p id="mpe-pc-carbs" class="text-[15px] font-bold text-orange-400 tabular-nums"></p>
-                            <p class="text-[9px] text-gray-500 font-medium mt-0.5">węgl.</p>
-                        </div>
-                    </div>
-                </div>
-                <div id="mpe-pc-stock" class="space-y-1.5"></div>
-                <div id="mpe-pc-shop"></div>
-            </div>
-        </div>
-    </div>`;
-}
-
-function openProductCard(ingredientId, productId) {
-    const overlay = document.getElementById('mpe-product-card-overlay');
-    if (!overlay) return;
-
-    const def = INGREDIENTS[ingredientId];
-    const product = productId ? PRODUCTS[productId] : null;
-    const name = product?.name || def?.name || ingredientId;
-    const brand = product?.brand || '';
-    const category = CATEGORY_LABELS[def?.category] || '';
-    const nutrition = product?.nutritionPer100g || def?.nutritionPer100g;
-    const image = product?.image || def?.image;
-    const packLabel = product?.packLabel || def?.purchasePack?.label || '';
-    const nutUnit = def?.pantryUnit === 'ml' ? '100 ml' : '100 g';
-
-    document.getElementById('mpe-pc-name').textContent = name;
-    document.getElementById('mpe-pc-brand').textContent = brand;
-    document.getElementById('mpe-pc-category').textContent = category;
-    document.getElementById('mpe-pc-nut-label').textContent = `Wartości odżywcze na ${nutUnit}`;
-
-    const img = document.getElementById('mpe-pc-img');
-    const fallback = document.getElementById('mpe-pc-fallback');
-    if (image) {
-        img.src = image;
-        img.alt = name;
-        img.classList.remove('hidden');
-        fallback.classList.add('hidden');
-    } else {
-        img.classList.add('hidden');
-        fallback.classList.remove('hidden');
-    }
-
-    const packWrap = document.getElementById('mpe-pc-pack');
-    if (packLabel) {
-        packWrap.classList.remove('hidden');
-        document.getElementById('mpe-pc-pack-val').textContent = packLabel;
-    } else {
-        packWrap.classList.add('hidden');
-    }
-
-    if (nutrition) {
-        document.getElementById('mpe-pc-kcal').textContent = nutrition.kcal;
-        document.getElementById('mpe-pc-protein').textContent = nutrition.protein + 'g';
-        document.getElementById('mpe-pc-fat').textContent = nutrition.fat + 'g';
-        document.getElementById('mpe-pc-carbs').textContent = nutrition.carbs + 'g';
-    }
-
-    // Stock section
-    renderPlannerCardStock(ingredientId, productId);
-
-    // Shop section
-    renderPlannerCardShop(ingredientId, productId);
-
-    overlay.classList.remove('hidden');
-    overlay.style.pointerEvents = 'auto';
-}
-
-function renderPlannerCardStock(ingredientId, productId) {
-    const wrap = document.getElementById('mpe-pc-stock');
-    if (!wrap) return;
-    const def = INGREDIENTS[ingredientId];
-    if (!def) return;
-    const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
-    const pantry = loadPantry();
-    const product = productId ? PRODUCTS[productId] : null;
-
-    let qty, step, pid;
-    if (product) {
-        const items = getPantryProducts(ingredientId, pantry);
-        qty = items.find(i => i.productId === productId)?.qty || 0;
-        step = product.packSize || 1;
-        pid = productId;
-    } else {
-        qty = getPantryTotal(ingredientId, pantry);
-        step = def.purchasePack?.amount || (def.pantryUnit === 'szt' ? 1 : 10);
-        pid = '_generic';
-    }
-
-    wrap.innerHTML = `
-        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5 text-gray-500">Zapas</p>
-        <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2 bg-[#393937]">
-            <button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
-            <span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span>
-            <button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
-        </div>`;
-
-    wrap.querySelectorAll('.mpe-pc-stock-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const bpid = btn.dataset.pid;
-            const bstep = Number(btn.dataset.step) || 1;
-            const dir = Number(btn.dataset.dir);
-            const p = loadPantry();
-            if (bpid === '_generic') {
-                const cur = getPantryTotal(ingredientId, p);
-                setPantryQty(ingredientId, Math.max(0, cur + bstep * dir));
-            } else {
-                const items = getPantryProducts(ingredientId, p);
-                const cur = items.find(i => i.productId === bpid)?.qty || 0;
-                setPantryProductQty(ingredientId, bpid, Math.max(0, cur + bstep * dir));
-            }
-            renderPlannerCardStock(ingredientId, productId);
-        });
-    });
-}
-
-function renderPlannerCardShop(ingredientId, productId) {
-    const wrap = document.getElementById('mpe-pc-shop');
-    if (!wrap) return;
-    const def = INGREDIENTS[ingredientId];
-    if (!def) return;
-    const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
-    const product = productId ? PRODUCTS[productId] : null;
-    const packSize = product?.packSize || def.purchasePack?.amount;
-    const packLabel = product?.packLabel || def.purchasePack?.label;
-    const usesPacks = Boolean(packSize && packSize > 0);
-    const btnLabel = usesPacks ? `Dodaj na listę (${packLabel || `${packSize} ${u}`})` : 'Dodaj na listę';
-
-    wrap.innerHTML = `
-        <button type="button" id="mpe-pc-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
-            <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
-        </button>`;
-
-    document.getElementById('mpe-pc-add-list')?.addEventListener('click', () => {
-        const amt = usesPacks ? packSize : (def.pantryUnit === 'szt' ? 1 : 10);
-        const line = {
-            ingredientId,
-            amount: amt,
-            unit: u,
-            name: product?.name || def.name,
-            category: def.category,
-            sourceNote: packLabel || 'Z planera',
-        };
-        if (productId) line.productId = productId;
-        addOrMergeShoppingLines([line]);
-        // Quick visual feedback
-        const btn = document.getElementById('mpe-pc-add-list');
-        if (btn) { btn.textContent = '✓ Dodano'; setTimeout(() => { btn.innerHTML = `<i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}`; }, 1200); }
-        window.refreshShopping?.();
-    });
-}
-
-function closeProductCard() {
-    const overlay = document.getElementById('mpe-product-card-overlay');
-    if (overlay) {
-        overlay.classList.add('hidden');
-        overlay.style.pointerEvents = 'none';
-    }
-}
-
 /* ── HTML template ──────────────────────────────────── */
 
 export function getMealPlanEditorHTML() {
@@ -286,7 +85,7 @@ export function getMealPlanEditorHTML() {
             </div>
         </div>
     </div>
-    ${getProductCardHTML()}`;
+    ${getIngredientCardHTML({ idBase: 'mpe-pc' })}`;
 }
 
 /* ── Setup ──────────────────────────────────────────── */
@@ -295,6 +94,8 @@ export function setupMealPlanEditor() {
     const overlay = document.getElementById('mpe-overlay');
     const sheet = document.getElementById('mpe-sheet');
     if (!overlay || !sheet) return;
+    const ingredientCard = createIngredientCardController({ idBase: 'mpe-pc', defaultSourceNote: 'Z planera' });
+    ingredientCard.bind();
 
     const S = {
         mode: null,
@@ -715,6 +516,7 @@ export function setupMealPlanEditor() {
     }
 
     function closeEditor() {
+        ingredientCard.close();
         sheet.style.transform = 'translateY(100%)';
         setTimeout(() => { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }, 300);
     }
@@ -856,13 +658,6 @@ export function setupMealPlanEditor() {
         renderNutrition();
     });
 
-    /* ── Product card ────────────────────────────── */
-
-    document.getElementById('mpe-pc-close')?.addEventListener('click', closeProductCard);
-    document.getElementById('mpe-product-card-overlay')?.addEventListener('click', (e) => {
-        if (e.target.id === 'mpe-product-card-overlay') closeProductCard();
-    });
-
     /* ── Ingredient section delegation ────────────── */
 
     const ingSec = document.getElementById('mpe-ing-section');
@@ -873,7 +668,23 @@ export function setupMealPlanEditor() {
         if (!changeProdEarly) {
             const cardBtn = e.target.closest('.mpe-open-product-card');
             if (cardBtn) {
-                openProductCard(cardBtn.dataset.eid, cardBtn.dataset.pid || null);
+                const eid = cardBtn.dataset.eid;
+                if (!eid) return;
+                ingredientCard.open({
+                    ingredientId: eid,
+                    productId: cardBtn.dataset.pid || null,
+                    selectedProductId: cardBtn.dataset.pid || null,
+                    sourceNote: 'Z planera',
+                    onProductChange: (nextProductId) => {
+                        if (!nextProductId) return;
+                        S.productSelections[eid] = nextProductId;
+                        saveLastProductSelection(eid, nextProductId);
+                    },
+                    onAfterChange: () => {
+                        renderIngList();
+                        renderNutrition();
+                    },
+                });
                 return;
             }
         }
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index c9175d0..18b8d63 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -1,21 +1,15 @@
 import {
     INGREDIENTS,
     CATEGORY_LABELS,
-    PRODUCTS,
-    pantryQtyStep,
     getProductsForIngredient,
     ingredientHasProducts,
 } from '../data/catalog.js?v=8';
 import {
-    addOrMergeShoppingLines,
     categoryLabel,
     loadPantry,
-    setPantryQty,
-    setPantryProductQty,
     getPantryTotal,
-    getPantryProducts,
 } from '../services/pantryShopping.js?v=2';
-import { showAppToast } from '../ui/toast.js';
+import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260410-99';
 
 /* ── helpers ── */
 
@@ -40,36 +34,10 @@ function formatQtyWithUnit(qty, unit) {
     return `${formatQty(qty)} ${unitLabel(unit)}`;
 }
 
-function productCountLabel(count) {
-    if (count === 1) return '1 produkt';
-    const mod10 = count % 10;
-    const mod100 = count % 100;
-    if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return `${count} produkty`;
-    return `${count} produktów`;
-}
-
 function productCountShortLabel(count) {
     return `${count} prod.`;
 }
 
-function nutritionForQty(def, qty, nutrition = def?.nutritionPer100g) {
-    if (!def || !nutrition || !Number.isFinite(qty) || qty <= 0) return null;
-    let grams = qty;
-    if (def.pantryUnit === 'szt' && def.weightPerPiece) grams = qty * def.weightPerPiece;
-    const f = grams / 100;
-    return {
-        kcal: Math.round(nutrition.kcal * f),
-        protein: Math.round(nutrition.protein * f * 10) / 10,
-        fat: Math.round(nutrition.fat * f * 10) / 10,
-        carbs: Math.round(nutrition.carbs * f * 10) / 10,
-    };
-}
-
-function macroLine(n) {
-    if (!n) return '';
-    return `${n.kcal} kcal · ${formatQty(n.protein)}g B · ${formatQty(n.fat)}g T · ${formatQty(n.carbs)}g W`;
-}
-
 function mediaHtml(image, icon, sizeClass = 'w-11 h-11', radiusClass = 'rounded-2xl') {
     if (image) {
         return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
@@ -77,20 +45,6 @@ function mediaHtml(image, icon, sizeClass = 'w-11 h-11', radiusClass = 'rounded-
     return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
 }
 
-function compactMetaText(text, tone = 'default') {
-    const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
-    return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
-}
-
-function sortProductsByStock(products, pantryItems) {
-    return [...products].sort((a, b) => {
-        const aq = pantryItems.find((i) => i.productId === a.id)?.qty || 0;
-        const bq = pantryItems.find((i) => i.productId === b.id)?.qty || 0;
-        if (bq !== aq) return bq - aq;
-        return a.name.localeCompare(b.name, 'pl');
-    });
-}
-
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
     nabial: 'fa-cheese',
@@ -106,9 +60,7 @@ const SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0
 
 /* ── state ── */
 
-let editingId = null;
-let editingProductId = null;
-let cardCloseTimer = null;
+let ingredientCard = null;
 
 /* ══════════════════════ HTML SHELL ══════════════════════ */
 
@@ -129,34 +81,10 @@ export function getPantryHTML() {
             <div id="pantry-board" class="space-y-4"></div>
         </div>
 
-        <!-- ── ingredient card popup ── -->
-        <div id="pv2-card-overlay" class="absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5" style="pointer-events:none; background:rgba(0,0,0,0.5);">
-            <div id="pv2-card" class="relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden" style="background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;">
-                <div id="pv2-card-hero" class="relative w-full h-[160px] overflow-hidden" style="background:#393937;">
-                    <img id="pv2-card-img" class="w-full h-full object-cover hidden" alt="" />
-                    <div id="pv2-card-fallback" class="w-full h-full flex items-center justify-center">
-                        <i id="pv2-card-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
-                    </div>
-                    <button type="button" id="pv2-card-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
-                        <i class="fas fa-chevron-left text-sm"></i>
-                    </button>
-                    <button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
-                        <i class="fas fa-times text-sm"></i>
-                    </button>
-                </div>
-                <div class="px-4 pt-3 pb-4 space-y-3">
-                    <div>
-                        <p id="pv2-card-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#9b978f;"></p>
-                        <h3 id="pv2-card-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
-                        <p id="pv2-card-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
-                    </div>
-                    <div id="pv2-card-nutrition"></div>
-                    <div id="pv2-card-stock-section"></div>
-                    <div id="pv2-card-products-section"></div>
-                    <div id="pv2-card-shop-section"></div>
-                </div>
-            </div>
-        </div>
+        ${getIngredientCardHTML({
+        idBase: 'pv2-card',
+        overlayClass: 'absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
+    })}
     </div>`;
 }
 
@@ -261,331 +189,12 @@ function renderBoard() {
 
 /* ══════════════════════ INGREDIENT SHEET ══════════════════════ */
 
-function renderCardHeader(def, product, pantry) {
-    const hasProducts = ingredientHasProducts(def.id);
-    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-    const image = product?.image || def.image;
-    const img = document.getElementById('pv2-card-img');
-    const fallback = document.getElementById('pv2-card-fallback');
-    const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
-    if (img && fallback) {
-        if (image) {
-            img.src = image;
-            img.alt = product?.name || def.name;
-            img.classList.remove('hidden');
-            fallback.classList.add('hidden');
-        } else {
-            img.classList.add('hidden');
-            fallback.classList.remove('hidden');
-            if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
-        }
-    }
-
-    const totalQty = getPantryTotal(def.id, pantry);
-    const productQty = product
-        ? (getPantryProducts(def.id, pantry).find((i) => i.productId === product.id)?.qty || 0)
-        : totalQty;
-    const stockNut = nutritionForQty(def, productQty, product?.nutritionPer100g || def.nutritionPer100g);
-
-    const categoryEl = document.getElementById('pv2-card-category');
-    const nameEl = document.getElementById('pv2-card-name');
-    const subtitleEl = document.getElementById('pv2-card-subtitle');
-    const backBtn = document.getElementById('pv2-card-back');
-
-    if (categoryEl) categoryEl.textContent = product?.brand || categoryLabel(def.category);
-    if (nameEl) nameEl.textContent = product?.name || def.name;
-
-    if (subtitleEl) {
-        let subtitle = '';
-        if (product) {
-            subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
-        } else if (hasProducts) {
-            subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
-        } else if (def.purchasePack?.label) {
-            subtitle = def.purchasePack.label;
-        }
-
-        if (subtitle) {
-            subtitleEl.textContent = subtitle;
-            subtitleEl.classList.remove('hidden');
-        } else {
-            subtitleEl.classList.add('hidden');
-        }
-    }
-
-    if (backBtn) {
-        backBtn.classList.toggle('hidden', !(hasProducts && product));
-    }
-}
-
-function renderCardNutrition(def, product) {
-    const wrap = document.getElementById('pv2-card-nutrition');
-    if (!wrap) return;
-    const n = product?.nutritionPer100g || def.nutritionPer100g;
-    if (!n) {
-        wrap.innerHTML = '';
-        return;
-    }
-    const hasProducts = ingredientHasProducts(def.id);
-    const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
-    const hint = product
-        ? 'dokładne dla produktu'
-        : hasProducts
-            ? 'orientacyjnie dla składnika'
-            : 'bazowe wartości';
-
-    wrap.innerHTML = `
-        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
-        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(unitScope)} • ${esc(hint)}</p>
-        <div class="grid grid-cols-4 gap-1.5">
-            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${n.kcal}</p>
-                <p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
-            </div>
-            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${formatQty(n.protein)}g</p>
-                <p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
-            </div>
-            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${formatQty(n.fat)}g</p>
-                <p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
-            </div>
-            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${formatQty(n.carbs)}g</p>
-                <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
-            </div>
-        </div>`;
-}
-
-function renderCardStock(ingredientId, productId, pantry) {
-    const wrap = document.getElementById('pv2-card-stock-section');
-    if (!wrap) return;
-    const def = INGREDIENTS[ingredientId];
-    if (!def) return;
-
-    const hasProducts = ingredientHasProducts(ingredientId);
-    const product = productId ? PRODUCTS[productId] : null;
-    const totalQty = getPantryTotal(ingredientId, pantry);
-    const u = unitLabel(def.pantryUnit);
-
-    if (hasProducts && !product) {
-        const stockedCount = getPantryProducts(ingredientId, pantry).filter((i) => i.qty > 0).length;
-        const summaryNutrition = nutritionForQty(def, totalQty);
-        wrap.innerHTML = `
-            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
-            <div class="rounded-xl px-3 py-2.5" style="background:#393937;">
-                <div class="flex items-center justify-between gap-3">
-                    <div>
-                        <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(u)}</p>
-                        <p class="text-[11px] mt-0.5" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(ingredientId).length} produktów ma stan</p>
-                    </div>
-                    <span class="text-[10px] text-right max-w-[92px]" style="color:#9b978f;">Wybierz produkt niżej, aby zmienić stan</span>
-                </div>
-                ${summaryNutrition ? `<p class="text-[10px] mt-2 tabular-nums" style="color:#9b978f;">${esc(macroLine(summaryNutrition))}</p>` : ''}
-            </div>`;
-        return;
-    }
-
-    const qty = product
-        ? (getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0)
-        : totalQty;
-    const step = product ? (product.packSize || pantryQtyStep(ingredientId)) : pantryQtyStep(ingredientId);
-    const stockNut = nutritionForQty(def, qty, product?.nutritionPer100g || def.nutritionPer100g);
-
-    wrap.innerHTML = `
-        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
-        <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
-            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(productId || '_generic')}" data-step="${step}" data-dir="-1" aria-label="Zmniejsz stan">
-                <i class="fas fa-minus text-xs"></i>
-            </button>
-            <div class="flex-1 text-center">
-                <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(qty))} ${esc(u)}</p>
-                <p class="text-[10px] mt-0.5" style="color:#9b978f;">Krok: ${esc(formatQty(step))} ${esc(u)}</p>
-            </div>
-            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(productId || '_generic')}" data-step="${step}" data-dir="1" aria-label="Zwiększ stan">
-                <i class="fas fa-plus text-xs"></i>
-            </button>
-        </div>
-        ${stockNut ? `<p class="text-[10px] mt-1.5 tabular-nums" style="color:#9b978f;">${esc(macroLine(stockNut))} na stanie</p>` : ''}`;
-
-    wrap.querySelectorAll('.pv2-stock-btn').forEach((btn) => {
-        btn.addEventListener('click', () => {
-            if (!editingId) return;
-            const pid = btn.dataset.pid;
-            const stepVal = Number(btn.dataset.step) || 1;
-            const dir = Number(btn.dataset.dir) || 1;
-            const currentPantry = loadPantry();
-            if (pid === '_generic') {
-                const cur = getPantryTotal(editingId, currentPantry);
-                setPantryQty(editingId, Math.max(0, cur + stepVal * dir));
-            } else {
-                const items = getPantryProducts(editingId, currentPantry);
-                const cur = items.find((i) => i.productId === pid)?.qty || 0;
-                setPantryProductQty(editingId, pid, Math.max(0, cur + stepVal * dir));
-            }
-            renderBoard();
-            renderIngredientCard();
-        });
-    });
-}
-
-function productSwitcherRowHtml(ingredientId, productId, pantry, selectedProductId) {
-    const def = INGREDIENTS[ingredientId];
-    const product = PRODUCTS[productId];
-    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-    const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
-    const isSelected = selectedProductId === productId;
-    return `<button type="button" class="pv2-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
-        ${mediaHtml(product.image || def.image, icon, 'w-9 h-9', 'rounded-lg')}
-        <div class="flex-1 min-w-0">
-            <div class="flex items-center justify-between gap-2">
-                <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
-                <span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
-            </div>
-            <div class="flex items-center gap-2 mt-0.5">
-                ${compactMetaText(product.packLabel || '', 'muted')}
-                ${isSelected ? compactMetaText('wybrany', 'success') : ''}
-            </div>
-        </div>
-        <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
-    </button>`;
-}
-
-function renderCardProducts(ingredientId, productId, pantry) {
-    const wrap = document.getElementById('pv2-card-products-section');
-    if (!wrap) return;
-    if (!ingredientHasProducts(ingredientId)) {
-        wrap.innerHTML = '';
-        return;
-    }
-
-    const products = sortProductsByStock(getProductsForIngredient(ingredientId), getPantryProducts(ingredientId, pantry));
-    const title = 'Produkty';
-    const subtitle = productId
-        ? 'Wróć lub wybierz inny wariant.'
-        : 'Wybierz wariant, aby zobaczyć szczegóły.';
-
-    wrap.innerHTML = `
-        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(title)}</p>
-        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
-        <div class="space-y-1.5">
-            ${products.map((p) => productSwitcherRowHtml(ingredientId, p.id, pantry, productId)).join('')}
-        </div>`;
-
-    wrap.querySelectorAll('.pv2-card-product-row').forEach((btn) => {
-        btn.addEventListener('click', () => {
-            editingProductId = btn.dataset.productId || null;
-            renderIngredientCard();
-        });
-    });
-}
-
-function renderCardShop(ingredientId, productId) {
-    const wrap = document.getElementById('pv2-card-shop-section');
-    if (!wrap) return;
-    const def = INGREDIENTS[ingredientId];
-    if (!def) return;
-
-    const hasProducts = ingredientHasProducts(ingredientId);
-    const product = productId ? PRODUCTS[productId] : null;
-    const packSize = product?.packSize || def.purchasePack?.amount;
-    const packLabel = product?.packLabel || def.purchasePack?.label;
-    const usesPacks = Boolean(packSize && packSize > 0);
-    const btnLabel = usesPacks
-        ? `Dodaj na listę (${packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`})`
-        : 'Dodaj na listę';
-    const helperText = hasProducts && !product
-        ? 'Doda składnik bez wskazanej marki. Jeśli chcesz konkretny produkt, wybierz go wyżej.'
-        : product
-            ? 'Pozycja trafi na listę zakupów z dokładnym produktem.'
-            : 'Szybki skrót do listy zakupów ze spiżarni.';
-
-    wrap.innerHTML = `
-        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
-        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(helperText)}</p>
-        <button type="button" id="pv2-card-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
-            <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
-        </button>`;
-
-    document.getElementById('pv2-card-add-list')?.addEventListener('click', () => {
-        if (!editingId) return;
-        const d = INGREDIENTS[editingId];
-        if (!d) return;
-        const uLabel = unitLabel(d.pantryUnit);
-        const amt = usesPacks ? packSize : pantryQtyStep(editingId);
-        const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${uLabel}`) : undefined;
-        const line = {
-            ingredientId: editingId,
-            amount: amt,
-            unit: uLabel,
-            name: product?.name || d.name,
-            category: d.category,
-            sourceNote: note || 'Ze spiżarni',
-        };
-        if (productId) line.productId = productId;
-        addOrMergeShoppingLines([line]);
-        showAppToast(`Dodano ${product?.name || d.name} na listę.`);
-        window.refreshShopping?.();
-    });
-}
-
-function renderIngredientCard() {
-    if (!editingId) return;
-    const def = INGREDIENTS[editingId];
-    if (!def) return;
-    const product = editingProductId ? PRODUCTS[editingProductId] : null;
-    const pantry = loadPantry();
-
-    renderCardHeader(def, product, pantry);
-    renderCardNutrition(def, product);
-    renderCardStock(editingId, editingProductId, pantry);
-    renderCardProducts(editingId, editingProductId, pantry);
-    renderCardShop(editingId, editingProductId);
-}
-
 function openIngredientCard(ingredientId, productId) {
-    const def = INGREDIENTS[ingredientId];
-    if (!def) return;
-    editingId = ingredientId;
-    editingProductId = productId && PRODUCTS[productId] ? productId : null;
-    renderIngredientCard();
-
-    const overlay = document.getElementById('pv2-card-overlay');
-    const card = document.getElementById('pv2-card');
-    if (!overlay || !card) return;
-    clearTimeout(cardCloseTimer);
-    overlay.classList.remove('hidden');
-    overlay.style.pointerEvents = 'auto';
-    requestAnimationFrame(() => {
-        overlay.classList.add('opacity-100');
-        card.style.opacity = '1';
-        card.style.transform = 'translateY(0)';
-    });
-}
-
-function closeIngredientCard() {
-    const overlay = document.getElementById('pv2-card-overlay');
-    const card = document.getElementById('pv2-card');
-    if (overlay && card) {
-        overlay.classList.remove('opacity-100');
-        overlay.style.pointerEvents = 'none';
-        card.style.opacity = '0';
-        card.style.transform = 'translateY(1.5rem)';
-        cardCloseTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
-    }
-    editingId = null;
-    editingProductId = null;
-    renderBoard();
-}
-
-function bindEditSheet() {
-    document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
-    document.getElementById('pv2-card-back')?.addEventListener('click', () => {
-        editingProductId = null;
-        renderIngredientCard();
-    });
-    document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
-        if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
+    ingredientCard?.open({
+        ingredientId,
+        productId,
+        sourceNote: 'Ze spiżarni',
+        onAfterChange: () => renderBoard(),
     });
 }
 
@@ -593,12 +202,15 @@ function bindEditSheet() {
 
 export function refreshPantry() {
     renderBoard();
-    if (editingId) renderIngredientCard();
+    ingredientCard?.refresh();
 }
 
 export function setupPantry() {
+    if (!ingredientCard) {
+        ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
+        ingredientCard.bind();
+    }
     renderBoard();
-    bindEditSheet();
 
     document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());