@limeade-labs/sparkui 1.0.0

package/templates/checkout.js

@@ -0,0 +1,271 @@
+'use strict';
+
+const base = require('./base');
+
+/**
+ * Fake Stripe-style checkout template.
+ * 100% cosmetic — no real payment processing. Demo only.
+ *
+ * Expected data shape:
+ * {
+ *   product: { name, description, price, image?, imageUrl? },
+ *   shipping: 0,
+ *   tax: 2.40,
+ *   currency: "USD"  // optional, defaults to USD
+ * }
+ */
+function checkout(data = {}) {
+  const pageId = data._pageId || 'unknown';
+  const _og = data._og || {};
+
+  const product = data.product || {};
+  const productName = product.name || 'Product';
+  const productDesc = product.description || '';
+  const productPrice = typeof product.price === 'number' ? product.price : 29.99;
+  const productImage = product.imageUrl || product.image || '📦';
+  const isEmoji = !product.imageUrl && productImage.length <= 4;
+
+  const shipping = typeof data.shipping === 'number' ? data.shipping : 0;
+  const tax = typeof data.tax === 'number' ? data.tax : 0;
+  const currency = data.currency || 'USD';
+  const currencySymbol = currency === 'USD' ? '$' : currency;
+
+  const subtotal = productPrice;
+  const total = (subtotal + shipping + tax).toFixed(2);
+
+  const body = `
+    <!-- DEMO Watermark -->
+    <div style="position:fixed;top:0;left:0;right:0;z-index:1000;background:linear-gradient(90deg,#ff6b00,#ff8c00);color:#fff;text-align:center;font-size:0.75rem;padding:4px 0;font-weight:700;letter-spacing:2px">
+      ⚠️ DEMO MODE — No real charges will be made
+    </div>
+
+    <!-- Security Banner -->
+    <div style="margin-top:28px;background:#0a2a1a;border:1px solid #00ff8840;border-radius:8px;padding:12px 16px;text-align:center;font-size:0.85rem;color:#00ff88;margin-bottom:24px">
+      🔒 Secure checkout — card details never touch your chat
+    </div>
+
+    <!-- Product Card -->
+    <div style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:20px;margin-bottom:24px;display:flex;align-items:center;gap:16px">
+      <div style="${isEmoji
+        ? 'font-size:3rem;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:#111;border-radius:12px;flex-shrink:0'
+        : 'width:72px;height:72px;border-radius:12px;overflow:hidden;flex-shrink:0;background:#111'}">
+        ${isEmoji ? productImage : `<img src="${productImage}" alt="${productName}" style="width:100%;height:100%;object-fit:cover">`}
+      </div>
+      <div style="flex:1;min-width:0">
+        <div style="font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:4px">${productName}</div>
+        <div style="font-size:0.85rem;color:#888;line-height:1.4">${productDesc}</div>
+      </div>
+      <div style="font-size:1.25rem;font-weight:700;color:#fff;flex-shrink:0">${currencySymbol}${productPrice.toFixed(2)}</div>
+    </div>
+
+    <!-- Quantity -->
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding:0 4px">
+      <span style="color:#aaa;font-size:0.9rem">Quantity</span>
+      <div style="display:flex;align-items:center;gap:12px">
+        <button id="qty-minus" type="button" style="width:32px;height:32px;border-radius:6px;border:1px solid #333;background:#1a1a1a;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center">−</button>
+        <span id="qty-display" style="font-size:1rem;font-weight:600;color:#fff;min-width:20px;text-align:center">1</span>
+        <button id="qty-plus" type="button" style="width:32px;height:32px;border-radius:6px;border:1px solid #333;background:#1a1a1a;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center">+</button>
+      </div>
+    </div>
+
+    <!-- Payment Section -->
+    <div style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:20px;margin-bottom:24px">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+        <h2 style="font-size:1rem;font-weight:600;color:#fff;margin:0">Payment details</h2>
+        <div style="display:flex;gap:6px;align-items:center">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+          <span style="font-size:0.75rem;color:#00ff88;font-weight:500">Secure</span>
+        </div>
+      </div>
+
+      <!-- Card Number -->
+      <label style="display:block;font-size:0.8rem;color:#888;margin-bottom:6px">Card number</label>
+      <div style="position:relative;margin-bottom:14px">
+        <input id="card-number" type="text" value="4242 4242 4242 4242" maxlength="19" style="width:100%;padding:12px 14px;padding-right:48px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;font-size:1rem;font-family:monospace;outline:none;transition:border-color 0.2s" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='#333'">
+        <div style="position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;gap:4px">
+          <svg width="24" height="16" viewBox="0 0 24 16" fill="none"><rect width="24" height="16" rx="2" fill="#1a1f71"/><circle cx="9" cy="8" r="5" fill="#eb001b"/><circle cx="15" cy="8" r="5" fill="#f79e1b" opacity="0.8"/></svg>
+        </div>
+      </div>
+
+      <!-- Expiry + CVC row -->
+      <div style="display:flex;gap:12px;margin-bottom:14px">
+        <div style="flex:1">
+          <label style="display:block;font-size:0.8rem;color:#888;margin-bottom:6px">Expiry</label>
+          <input id="card-expiry" type="text" value="12/28" maxlength="5" style="width:100%;padding:12px 14px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;font-size:1rem;font-family:monospace;outline:none;transition:border-color 0.2s" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='#333'">
+        </div>
+        <div style="flex:1">
+          <label style="display:block;font-size:0.8rem;color:#888;margin-bottom:6px">CVC</label>
+          <input id="card-cvc" type="text" value="123" maxlength="4" style="width:100%;padding:12px 14px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;font-size:1rem;font-family:monospace;outline:none;transition:border-color 0.2s" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='#333'">
+        </div>
+      </div>
+
+      <!-- Cardholder Name -->
+      <label style="display:block;font-size:0.8rem;color:#888;margin-bottom:6px">Cardholder name</label>
+      <input id="card-name" type="text" placeholder="Full name on card" style="width:100%;padding:12px 14px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;font-size:1rem;outline:none;transition:border-color 0.2s" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='#333'">
+    </div>
+
+    <!-- Order Summary -->
+    <div style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:20px;margin-bottom:24px">
+      <h2 style="font-size:1rem;font-weight:600;color:#fff;margin-bottom:16px">Order summary</h2>
+      <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:0.9rem">
+        <span style="color:#aaa">Subtotal</span>
+        <span id="summary-subtotal" style="color:#ccc">${currencySymbol}${subtotal.toFixed(2)}</span>
+      </div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:0.9rem">
+        <span style="color:#aaa">Shipping</span>
+        <span style="color:#ccc">${shipping === 0 ? 'Free' : currencySymbol + shipping.toFixed(2)}</span>
+      </div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:12px;font-size:0.9rem">
+        <span style="color:#aaa">Tax</span>
+        <span style="color:#ccc">${currencySymbol}${tax.toFixed(2)}</span>
+      </div>
+
+      <!-- Promo Code -->
+      <div style="display:flex;gap:8px;margin-bottom:16px">
+        <input type="text" placeholder="Promo code" style="flex:1;padding:8px 12px;border-radius:6px;border:1px solid #333;background:#222;color:#fff;font-size:0.85rem;outline:none" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='#333'">
+        <button type="button" style="padding:8px 16px;border-radius:6px;border:1px solid #333;background:#222;color:#888;font-size:0.85rem;cursor:pointer" onclick="this.textContent='Coming soon';this.style.color='#00ff88';setTimeout(()=>{this.textContent='Apply';this.style.color='#888'},2000)">Apply</button>
+      </div>
+
+      <div style="border-top:1px solid #333;padding-top:12px;display:flex;justify-content:space-between;align-items:center">
+        <span style="font-size:1rem;font-weight:600;color:#fff">Total</span>
+        <span id="summary-total" style="font-size:1.25rem;font-weight:700;color:#fff">${currencySymbol}${total}</span>
+      </div>
+    </div>
+
+    <!-- Pay Button -->
+    <button id="pay-btn" type="button" style="width:100%;padding:16px;border-radius:10px;border:none;background:linear-gradient(135deg,#00cc6a,#00ff88);color:#000;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden" onmouseover="this.style.transform='translateY(-1px)';this.style.boxShadow='0 4px 20px #00ff8840'" onmouseout="this.style.transform='';this.style.boxShadow=''">
+      <span id="pay-text">Pay ${currencySymbol}${total}</span>
+      <div id="pay-spinner" style="display:none;position:absolute;inset:0;background:inherit;display:none;align-items:center;justify-content:center">
+        <div style="width:24px;height:24px;border:3px solid rgba(0,0,0,0.2);border-top-color:#000;border-radius:50%;animation:spin 0.8s linear infinite"></div>
+      </div>
+    </button>
+
+    <!-- Success State (hidden) -->
+    <div id="success-overlay" style="display:none;position:fixed;inset:0;background:#111;z-index:2000;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px">
+      <div id="checkmark-container" style="width:80px;height:80px;margin-bottom:24px">
+        <svg viewBox="0 0 80 80" style="width:80px;height:80px">
+          <circle cx="40" cy="40" r="36" fill="none" stroke="#00ff88" stroke-width="3" stroke-dasharray="226" stroke-dashoffset="226" style="animation:circle-draw 0.6s ease forwards"/>
+          <path d="M24 42 L35 53 L56 28" fill="none" stroke="#00ff88" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="60" stroke-dashoffset="60" style="animation:check-draw 0.4s ease 0.5s forwards"/>
+        </svg>
+      </div>
+      <h2 style="font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:8px">Payment successful!</h2>
+      <p id="success-order-id" style="color:#00ff88;font-size:0.9rem;margin-bottom:8px"></p>
+      <p style="color:#888;font-size:0.9rem;margin-bottom:32px">Your agent has been notified. You can close this page.</p>
+      <div style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:16px 24px;display:inline-flex;align-items:center;gap:12px">
+        <span style="font-size:1.5rem">${isEmoji ? productImage : '✅'}</span>
+        <div style="text-align:left">
+          <div style="font-size:0.95rem;font-weight:600;color:#fff">${productName}</div>
+          <div id="success-total" style="font-size:0.85rem;color:#00ff88"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div style="text-align:center;margin-top:20px;padding:16px 0">
+      <span style="font-size:0.8rem;color:#555">Powered by SparkUI ⚡</span>
+    </div>
+
+    <style>
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+      @keyframes circle-draw {
+        to { stroke-dashoffset: 0; }
+      }
+      @keyframes check-draw {
+        to { stroke-dashoffset: 0; }
+      }
+      input::placeholder { color: #555; }
+    </style>
+  `;
+
+  const extraHead = `
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      var quantity = 1;
+      var unitPrice = ${productPrice};
+      var shipping = ${shipping};
+      var tax = ${tax};
+      var symbol = '${currencySymbol}';
+      var productName = ${JSON.stringify(productName)};
+
+      var qtyDisplay = document.getElementById('qty-display');
+      var summarySubtotal = document.getElementById('summary-subtotal');
+      var summaryTotal = document.getElementById('summary-total');
+      var payText = document.getElementById('pay-text');
+
+      function updateTotals() {
+        var sub = (unitPrice * quantity);
+        var tot = (sub + shipping + tax).toFixed(2);
+        summarySubtotal.textContent = symbol + sub.toFixed(2);
+        summaryTotal.textContent = symbol + tot;
+        payText.textContent = 'Pay ' + symbol + tot;
+        qtyDisplay.textContent = quantity;
+      }
+
+      document.getElementById('qty-minus').addEventListener('click', function() {
+        if (quantity > 1) { quantity--; updateTotals(); }
+      });
+      document.getElementById('qty-plus').addEventListener('click', function() {
+        if (quantity < 99) { quantity++; updateTotals(); }
+      });
+
+      // Pay button
+      document.getElementById('pay-btn').addEventListener('click', function() {
+        var btn = this;
+        var spinner = document.getElementById('pay-spinner');
+        var text = document.getElementById('pay-text');
+
+        // Disable + show spinner
+        btn.disabled = true;
+        btn.style.cursor = 'not-allowed';
+        text.style.visibility = 'hidden';
+        spinner.style.display = 'flex';
+
+        // Simulate processing
+        setTimeout(function() {
+          var orderId = 'ORD-' + Math.random().toString(36).slice(2, 8).toUpperCase();
+          var sub = (unitPrice * quantity);
+          var tot = (sub + shipping + tax).toFixed(2);
+
+          // Send completion event via WS
+          if (window.sparkui && sparkui.sendCompletion) {
+            sparkui.sendCompletion({
+              action: 'checkout_complete',
+              orderId: orderId,
+              product: productName,
+              quantity: quantity,
+              total: parseFloat(tot),
+              status: 'success',
+              completedAt: new Date().toISOString()
+            });
+          }
+
+          // Show success
+          document.getElementById('success-order-id').textContent = 'Order ' + orderId;
+          document.getElementById('success-total').textContent = symbol + tot;
+          var overlay = document.getElementById('success-overlay');
+          overlay.style.display = 'flex';
+        }, 2000);
+      });
+    });
+    </script>
+  `;
+
+  const og = {
+    title: `Secure Checkout — ${productName}`,
+    description: 'Complete your purchase securely',
+    image: _og.image,
+    url: _og.url,
+  };
+
+  return base({
+    title: `Checkout — ${productName}`,
+    body,
+    id: pageId,
+    extraHead,
+    og,
+  });
+}
+
+module.exports = checkout;

package/templates/feedback-form.js

@@ -0,0 +1,140 @@
+'use strict';
+
+const base = require('./base');
+
+/**
+ * Feedback form template.
+ * Simple form: rating 1-5, text feedback, submit.
+ * Sends a completion event with form data on submit.
+ */
+function feedbackForm(data = {}) {
+  const pageId = data._pageId || 'unknown';
+  const title = data.title || 'Feedback';
+  const subtitle = data.subtitle || 'We\'d love to hear from you.';
+  const questions = data.questions || null; // optional array of extra text fields
+  const _og = data._og || {};
+
+  let extraFields = '';
+  let extraFieldsJs = '';
+  if (questions && Array.isArray(questions)) {
+    questions.forEach((q, i) => {
+      const fieldId = `extra-field-${i}`;
+      extraFields += `
+        <label style="display:block;margin-bottom:6px;color:#aaa;font-size:0.9rem">${q}</label>
+        <input id="${fieldId}" type="text" placeholder="Your answer" style="width:100%;padding:10px 12px;border-radius:6px;border:1px solid #333;background:#1a1a1a;color:#eee;font-size:1rem;margin-bottom:16px;outline:none" onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#333'">
+      `;
+      extraFieldsJs += `formData['${q.replace(/'/g, "\\'")}'] = document.getElementById('${fieldId}').value;\n`;
+    });
+  }
+
+  const body = `
+    <div style="text-align:center;margin-bottom:24px">
+      <h1 style="font-size:1.5rem;margin-bottom:6px">📝 ${title}</h1>
+      <p style="color:#888;font-size:0.95rem">${subtitle}</p>
+    </div>
+
+    <form id="feedback-form" style="background:#1a1a1a;padding:20px;border-radius:12px;border:1px solid #222">
+      <!-- Rating -->
+      <label style="display:block;margin-bottom:10px;color:#aaa;font-size:0.9rem">Rating</label>
+      <div id="star-rating" style="display:flex;gap:8px;margin-bottom:20px;justify-content:center">
+        <button type="button" class="star-btn" data-value="1" style="font-size:2rem;background:none;border:none;cursor:pointer;opacity:0.3;transition:opacity 0.2s">⭐</button>
+        <button type="button" class="star-btn" data-value="2" style="font-size:2rem;background:none;border:none;cursor:pointer;opacity:0.3;transition:opacity 0.2s">⭐</button>
+        <button type="button" class="star-btn" data-value="3" style="font-size:2rem;background:none;border:none;cursor:pointer;opacity:0.3;transition:opacity 0.2s">⭐</button>
+        <button type="button" class="star-btn" data-value="4" style="font-size:2rem;background:none;border:none;cursor:pointer;opacity:0.3;transition:opacity 0.2s">⭐</button>
+        <button type="button" class="star-btn" data-value="5" style="font-size:2rem;background:none;border:none;cursor:pointer;opacity:0.3;transition:opacity 0.2s">⭐</button>
+      </div>
+      <input type="hidden" id="rating-value" value="0">
+
+      <!-- Feedback text -->
+      <label style="display:block;margin-bottom:6px;color:#aaa;font-size:0.9rem">Feedback</label>
+      <textarea id="feedback-text" rows="4" placeholder="Tell us what you think..." style="width:100%;padding:10px 12px;border-radius:6px;border:1px solid #333;background:#111;color:#eee;font-size:1rem;margin-bottom:16px;resize:vertical;outline:none;font-family:inherit" onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#333'"></textarea>
+
+      ${extraFields}
+
+      <!-- Submit -->
+      <button type="submit" id="submit-btn" style="width:100%;padding:12px;border-radius:8px;border:none;background:#059669;color:#fff;font-size:1.05rem;cursor:pointer;font-weight:600;transition:background 0.2s" onmouseover="this.style.background='#047857'" onmouseout="this.style.background='#059669'">
+        Submit Feedback
+      </button>
+    </form>
+
+    <!-- Success state (hidden) -->
+    <div id="success-msg" style="display:none;text-align:center;padding:40px 20px">
+      <div style="font-size:3rem;margin-bottom:12px">✅</div>
+      <h2 style="font-size:1.3rem;margin-bottom:8px">Thank you!</h2>
+      <p style="color:#888">Your feedback has been submitted.</p>
+    </div>
+  `;
+
+  const extraHead = `
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      var selectedRating = 0;
+      var stars = document.querySelectorAll('.star-btn');
+
+      function updateStars(value) {
+        stars.forEach(function(s) {
+          s.style.opacity = parseInt(s.getAttribute('data-value')) <= value ? '1' : '0.3';
+        });
+      }
+
+      stars.forEach(function(star) {
+        star.addEventListener('click', function() {
+          selectedRating = parseInt(this.getAttribute('data-value'));
+          document.getElementById('rating-value').value = selectedRating;
+          updateStars(selectedRating);
+        });
+        star.addEventListener('mouseenter', function() {
+          updateStars(parseInt(this.getAttribute('data-value')));
+        });
+        star.addEventListener('mouseleave', function() {
+          updateStars(selectedRating);
+        });
+      });
+
+      document.getElementById('feedback-form').addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        var rating = parseInt(document.getElementById('rating-value').value);
+        if (rating === 0) {
+          alert('Please select a rating');
+          return;
+        }
+
+        var formData = {
+          rating: rating,
+          feedback: document.getElementById('feedback-text').value,
+          submittedAt: new Date().toISOString()
+        };
+
+        ${extraFieldsJs}
+
+        // Send completion via WS
+        if (window.sparkui) {
+          sparkui.sendCompletion(formData);
+        }
+
+        // Show success
+        document.getElementById('feedback-form').style.display = 'none';
+        document.getElementById('success-msg').style.display = 'block';
+      });
+    });
+    </script>
+  `;
+
+  const og = {
+    title: _og.title || title,
+    description: _og.description || 'Quick feedback form — share your thoughts ⚡',
+    image: _og.image,
+    url: _og.url,
+  };
+
+  return base({
+    title,
+    body,
+    id: pageId,
+    extraHead,
+    og,
+  });
+}
+
+module.exports = feedbackForm;

package/templates/macro-tracker.js

@@ -0,0 +1,205 @@
+'use strict';
+
+const base = require('./base');
+
+/**
+ * Macro Tracker template.
+ *
+ * @param {object} data
+ * @param {string} data.date - e.g. "2026-03-10"
+ * @param {object} data.calories - { current, target }
+ * @param {object} data.protein - { current, target }
+ * @param {object} data.fat - { current, target }
+ * @param {object} data.carbs - { current, target }
+ * @param {Array} [data.meals] - [{ name, calories, time }]
+ * @param {string} [data._pageId] - injected by template engine
+ * @returns {string} Full HTML page
+ */
+function macroTracker(data) {
+  const { date, calories, protein, fat, carbs, meals = [], _pageId = '', _og = {} } = data;
+
+  const macros = [
+    { label: 'Calories', ...calories, unit: 'cal', color: '#00d4aa', icon: '🔥' },
+    { label: 'Protein', ...protein, unit: 'g', color: '#6c63ff', icon: '💪' },
+    { label: 'Fat', ...fat, unit: 'g', color: '#ff6b6b', icon: '🥑' },
+    { label: 'Carbs', ...carbs, unit: 'g', color: '#ffd93d', icon: '⚡' },
+  ];
+
+  function pct(current, target) {
+    if (!target) return 0;
+    return Math.min(100, Math.round((current / target) * 100));
+  }
+
+  function formatDate(dateStr) {
+    try {
+      const d = new Date(dateStr + 'T12:00:00');
+      return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+    } catch {
+      return dateStr;
+    }
+  }
+
+  const macroCards = macros.map(m => {
+    const p = pct(m.current, m.target);
+    const isOver = m.current > m.target;
+    return `
+    <div class="macro-card">
+      <div class="macro-header">
+        <span class="macro-icon">${m.icon}</span>
+        <span class="macro-label">${m.label}</span>
+      </div>
+      <div class="macro-value">
+        <span class="macro-current" style="color:${m.color}">${m.current ?? 0}</span>
+        <span class="macro-unit">${m.unit}</span>
+      </div>
+      <div class="macro-target">of ${m.target} ${m.unit}</div>
+      <div class="progress-track">
+        <div class="progress-fill ${isOver ? 'over' : ''}" style="width:${p}%;background:${m.color}"></div>
+      </div>
+      <div class="macro-pct">${p}%</div>
+    </div>`;
+  }).join('\n');
+
+  const mealRows = meals.map(meal => `
+    <div class="meal-row">
+      <div class="meal-info">
+        <span class="meal-name">${meal.name}</span>
+        <span class="meal-time">${meal.time || ''}</span>
+      </div>
+      <div class="meal-cal">${meal.calories} cal</div>
+    </div>`).join('\n');
+
+  const mealSection = meals.length > 0 ? `
+    <div class="section-header">
+      <span class="section-icon">🍽️</span>
+      <span>Meals</span>
+    </div>
+    <div class="meals-list">
+      ${mealRows}
+    </div>` : '';
+
+  const totalCal = meals.reduce((sum, m) => sum + (m.calories || 0), 0);
+  const remaining = (calories.target || 0) - (calories.current || 0);
+
+  const summaryBar = `
+    <div class="summary-bar">
+      <div class="summary-item">
+        <div class="summary-value">${totalCal}</div>
+        <div class="summary-label">Eaten</div>
+      </div>
+      <div class="summary-divider"></div>
+      <div class="summary-item">
+        <div class="summary-value" style="color:${remaining >= 0 ? '#00d4aa' : '#ff6b6b'}">${remaining >= 0 ? remaining : Math.abs(remaining)}</div>
+        <div class="summary-label">${remaining >= 0 ? 'Remaining' : 'Over'}</div>
+      </div>
+      <div class="summary-divider"></div>
+      <div class="summary-item">
+        <div class="summary-value">${calories.target || 0}</div>
+        <div class="summary-label">Goal</div>
+      </div>
+    </div>`;
+
+  const body = `
+    <div class="tracker-header">
+      <h1>📊 Macro Tracker</h1>
+      <div class="tracker-date">${formatDate(date)}</div>
+    </div>
+    ${summaryBar}
+    <div class="macro-grid">
+      ${macroCards}
+    </div>
+    ${mealSection}
+    <div class="tracker-footer">
+      <span class="sparkui-badge">⚡ SparkUI</span>
+      <span class="update-time">Updated ${new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}</span>
+    </div>
+  `;
+
+  const extraHead = `<style>
+    .tracker-header { text-align: center; margin-bottom: 24px; }
+    .tracker-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
+    .tracker-date { color: #888; font-size: 0.9rem; }
+
+    .summary-bar {
+      display: flex; align-items: center; justify-content: center;
+      background: #1a1a1a; border-radius: 16px; padding: 16px 20px;
+      margin-bottom: 24px; gap: 20px;
+    }
+    .summary-item { text-align: center; flex: 1; }
+    .summary-value { font-size: 1.4rem; font-weight: 700; color: #fff; }
+    .summary-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
+    .summary-divider { width: 1px; height: 36px; background: #333; }
+
+    .macro-grid {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+      margin-bottom: 28px;
+    }
+    .macro-card {
+      background: #1a1a1a; border-radius: 16px; padding: 16px;
+      transition: transform 0.15s ease;
+    }
+    .macro-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
+    .macro-icon { font-size: 1.1rem; }
+    .macro-label { font-size: 0.8rem; color: #aaa; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
+    .macro-value { display: flex; align-items: baseline; gap: 4px; }
+    .macro-current { font-size: 2rem; font-weight: 800; line-height: 1.1; }
+    .macro-unit { font-size: 0.8rem; color: #666; }
+    .macro-target { font-size: 0.8rem; color: #666; margin-bottom: 10px; }
+    .progress-track {
+      width: 100%; height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%; border-radius: 3px; transition: width 0.5s ease;
+    }
+    .progress-fill.over { opacity: 0.8; animation: pulse 1.5s ease-in-out infinite; }
+    @keyframes pulse { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
+    .macro-pct { font-size: 0.75rem; color: #666; text-align: right; margin-top: 4px; }
+
+    .section-header {
+      display: flex; align-items: center; gap: 8px;
+      font-size: 1rem; font-weight: 600; margin-bottom: 12px; color: #ccc;
+    }
+    .section-icon { font-size: 1.1rem; }
+    .meals-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
+    .meal-row {
+      display: flex; justify-content: space-between; align-items: center;
+      background: #1a1a1a; border-radius: 12px; padding: 12px 16px;
+    }
+    .meal-info { display: flex; flex-direction: column; }
+    .meal-name { font-weight: 500; font-size: 0.95rem; }
+    .meal-time { font-size: 0.8rem; color: #666; }
+    .meal-cal { font-weight: 600; color: #00d4aa; font-size: 0.95rem; white-space: nowrap; }
+
+    .tracker-footer {
+      display: flex; justify-content: space-between; align-items: center;
+      padding-top: 16px; border-top: 1px solid #222;
+    }
+    .sparkui-badge {
+      font-size: 0.75rem; color: #555; font-weight: 500;
+    }
+    .update-time { font-size: 0.75rem; color: #555; }
+  </style>`;
+
+  // Template provides richer defaults than the generic ones from server.js
+  const defaultDesc = `Daily macro tracking for ${formatDate(date)} — ${calories.current || 0}/${calories.target || 0} cal`;
+  const isGenericDesc = !_og.description || _og.description === 'An ephemeral micro-app powered by SparkUI ⚡';
+  const isGenericTitle = !_og.title || _og.title === 'Macro Tracker';
+
+  const og = {
+    title: isGenericTitle ? `Macro Tracker — ${formatDate(date)}` : _og.title,
+    description: isGenericDesc ? defaultDesc : _og.description,
+    image: _og.image,
+    url: _og.url,
+  };
+
+  return base({
+    title: `Macros — ${date}`,
+    body,
+    id: _pageId,
+    refreshSeconds: 30,
+    extraHead,
+    og,
+  });
+}
+
+module.exports = macroTracker;