@pcampus/reward-widget 0.1.0 → 0.2.0

package/dist/widgets/spin.js

@@ -1,9 +1,22 @@
+import { mixPrimary, resolveWidgetChrome } from "./chrome.js";
+import { showCouponSuccess } from "./coupon-success.js";
 import { textEscape } from "./types.js";
 export const MIN_WHEEL_SLICES = 6;
 export const WHEEL_CX = 160;
 export const WHEEL_CY = 160;
 export const WHEEL_R = 160;
-export const WHEEL_LABEL_RADIUS = 104;
+// 60-30-10 Design System Palette (Pcampus Studio Minimal Dark)
+export const PCAMPUS_SURFACE_CARD = "#1c1c1b";
+export const PCAMPUS_SURFACE_SLATE = "#262624";
+export const PCAMPUS_SURFACE_ONYX = "#181817";
+export const PCAMPUS_ACCENT_BLUE = "#4b7fd4";
+export const PCAMPUS_ACCENT_GOLD = "#e8a96a";
+export const PCAMPUS_BORDER_SUBTLE = "rgba(240, 239, 237, 0.12)";
+export const DEFAULT_PCAMPUS_SLICE_COLORS = [
+    PCAMPUS_SURFACE_CARD,
+    PCAMPUS_SURFACE_SLATE,
+    PCAMPUS_SURFACE_ONYX,
+];
 export function polar(cx, cy, r, deg) {
     const rad = ((deg - 90) * Math.PI) / 180;
     return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
@@ -37,10 +50,12 @@ export function wheelSlices(rewards) {
     const list = valid.length > 0
         ? valid
         : [
-            { name: "Special Reward" },
-            { name: "Lucky Bonus" },
-            { name: "100 Points" },
-            { name: "50% Discount" },
+            { name: "ส่วนลด 50 บาท" },
+            { name: "รับโบนัส 100 คะแนน" },
+            { name: "คูปองฟรีค่าจัดส่ง" },
+            { name: "รับโบนัส 20 คะแนน" },
+            { name: "ส่วนลด 10%" },
+            { name: "ลองใหม่อีกครั้ง" },
         ];
     const counts = visualSliceCounts(list.length);
     const remaining = [...counts];
@@ -65,107 +80,317 @@ export function wheelSlices(rewards) {
         midDeg: (i + 0.5) * sweep,
     }));
 }
-function pegsMarkup() {
-    const parts = [];
-    const numPegs = 12;
-    for (let i = 0; i < numPegs; i++) {
-        const deg = (i * 360) / numPegs;
-        const rad = ((deg - 90) * Math.PI) / 180;
-        const px = WHEEL_CX + 140 * Math.cos(rad);
-        const py = WHEEL_CY + 140 * Math.sin(rad);
-        parts.push(`<circle cx="${px.toFixed(3)}" cy="${py.toFixed(3)}" r="4.5" fill="#f59e0b" stroke="#ffffff" stroke-width="1"/>`);
+export function sliceFaIcon(name) {
+    const lower = name.toLowerCase();
+    if (lower.includes("คะแนน") || lower.includes("point") || lower.includes("score")) {
+        return { style: "regular", icon: "fa-copyright" };
     }
-    return parts.join("");
+    if (lower.includes("คูปอง") ||
+        lower.includes("coupon") ||
+        lower.includes("voucher") ||
+        lower.includes("ส่วนลด")) {
+        return { style: "solid", icon: "fa-ticket" };
+    }
+    if (lower.includes("ไม่ได้") ||
+        lower.includes("miss") ||
+        lower.includes("luck") ||
+        lower.includes("sorry") ||
+        lower.includes("sad") ||
+        lower.includes("เสียใจ") ||
+        lower.includes("ลองใหม่")) {
+        return { style: "regular", icon: "fa-face-frown-open" };
+    }
+    return { style: "solid", icon: "fa-gift" };
+}
+export function sliceLabelLines(name) {
+    const trimmed = name.replace(/\r/g, "").trim();
+    if (!trimmed)
+        return [];
+    if (trimmed.includes("\n")) {
+        return trimmed.split("\n").map((line) => line.trim()).filter(Boolean).slice(0, 3);
+    }
+    const bonus = trimmed.match(/^(รับโบนัส)\s+(\d+)\s+(คะแนน)$/u);
+    if (bonus)
+        return [bonus[1], bonus[2], bonus[3]];
+    const coupon = trimmed.match(/^(คูปองส่วนลด)\s+(.+)$/u);
+    if (coupon)
+        return [coupon[1], coupon[2]];
+    const words = trimmed.split(/\s+/);
+    if (words.length <= 1)
+        return [trimmed];
+    if (words.length === 2)
+        return [words[0], words[1]];
+    return [words[0], words.slice(1).join(" ")];
+}
+function isDarkHex(hex) {
+    const clean = hex.replace("#", "");
+    if (clean.length !== 6 && clean.length !== 3)
+        return true;
+    const r = parseInt(clean.length === 3 ? clean[0] + clean[0] : clean.slice(0, 2), 16);
+    const g = parseInt(clean.length === 3 ? clean[1] + clean[1] : clean.slice(2, 4), 16);
+    const b = parseInt(clean.length === 3 ? clean[2] + clean[2] : clean.slice(4, 6), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq < 140;
 }
 export function renderSpinWheelMarkup(rewards = [], theme) {
     const slices = wheelSlices(rewards);
+    const { primary: brandPrimary, surface, border: chromeBorder } = resolveWidgetChrome(theme);
     const colors = theme?.sliceColors && theme.sliceColors.length === 3
         ? theme.sliceColors
-        : ["#ffffff", "#dbeafe", "#1e3a8a"];
-    const borderColor = theme?.wheelBorderColor || "#233044";
+        : [...DEFAULT_PCAMPUS_SLICE_COLORS];
+    const borderColor = theme?.wheelBorderColor?.trim() || chromeBorder;
+    const hubFill = theme?.hubBackgroundColor?.trim()
+        ? textEscape(theme.hubBackgroundColor.trim())
+        : "linear-gradient(145deg, #242731 0%, #1c1c1b 60%, #141413 100%)";
+    // Initial 3 o'clock (90 deg) slice
+    const initialSlice = slices.find((s) => 90 >= s.startDeg && 90 < s.endDeg) || slices[0];
+    const initialIcon = initialSlice ? sliceFaIcon(initialSlice.name) : { style: "solid", icon: "fa-gift" };
     const slicesSvg = slices
         .map((slice, i) => {
         const color = colors[i % colors.length];
-        const isDark = color === "#1e3a8a" || color === "#1e293b" || color === "#0f172a";
-        const textColor = isDark ? "#ffffff" : "#0f172a";
+        const isDark = isDarkHex(color);
+        const textColor = isDark ? "#f0efed" : "#0d0d0c";
+        const iconColor = brandPrimary;
         const d = slicePath(WHEEL_CX, WHEEL_CY, WHEEL_R, slice.startDeg, slice.endDeg);
-        const label = slice.name.length > 12 ? slice.name.slice(0, 10) + "…" : slice.name;
+        const lines = sliceLabelLines(slice.name);
+        const fa = sliceFaIcon(slice.name);
+        let textMarkup = "";
+        if (lines.length === 1) {
+            textMarkup = `<text x="94" y="0" text-anchor="middle" dominant-baseline="central" font-size="12" font-weight="700" fill="${textColor}" letter-spacing="-0.01em">${textEscape(lines[0])}</text>`;
+        }
+        else if (lines.length === 2) {
+            textMarkup = `
+          <text x="94" y="-7" text-anchor="middle" dominant-baseline="central" font-size="10" font-weight="600" fill="${textColor}" letter-spacing="-0.01em">${textEscape(lines[0])}</text>
+          <text x="94" y="7" text-anchor="middle" dominant-baseline="central" font-size="13" font-weight="800" fill="${textColor}" letter-spacing="-0.01em">${textEscape(lines[1])}</text>
+        `;
+        }
+        else {
+            textMarkup = `
+          <text x="94" y="-9" text-anchor="middle" dominant-baseline="central" font-size="9" font-weight="600" fill="${textColor}" letter-spacing="-0.01em">${textEscape(lines[0])}</text>
+          <text x="94" y="2" text-anchor="middle" dominant-baseline="central" font-size="13" font-weight="800" fill="${textColor}" letter-spacing="-0.01em">${textEscape(lines[1])}</text>
+          <text x="94" y="12" text-anchor="middle" dominant-baseline="central" font-size="9" font-weight="600" fill="${textColor}" letter-spacing="-0.01em">${textEscape(lines[2])}</text>
+        `;
+        }
         return `
         <g class="pcampus-spin-slice-group">
-          <path d="${d}" fill="${color}"/>
-          <g transform="translate(${WHEEL_CX}, ${WHEEL_CY}) rotate(${slice.midDeg}) translate(0, ${-WHEEL_LABEL_RADIUS}) rotate(${-slice.midDeg})">
-            <text x="0" y="0" text-anchor="middle" dominant-baseline="central" font-size="11" font-weight="900" fill="${textColor}" style="filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3));">
-              ${textEscape(label)}
-            </text>
+          <path d="${d}" fill="${color}" stroke="rgba(240, 239, 237, 0.06)" stroke-width="1"/>
+          <!-- Text sits directly along the radial ray pointing outward from hub to rim -->
+          <g transform="translate(${WHEEL_CX}, ${WHEEL_CY}) rotate(${slice.midDeg - 90})">
+            <g class="spin-label-radial" style="transition:opacity 350ms ease;">
+              <foreignObject x="126" y="-10" width="22" height="20">
+                <div xmlns="http://www.w3.org/1999/xhtml" class="spin-slice-icon" style="color:${iconColor};display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;width:100%;height:100%;">
+                  <i class="fa-${fa.style} ${fa.icon}"></i>
+                </div>
+              </foreignObject>
+              ${textMarkup}
+            </g>
           </g>
         </g>
       `;
     })
         .join("");
     return `
-    <div class="pcampus-reward-spin-wrap" style="position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0.5rem;box-sizing:border-box;">
-      <div class="pcampus-spin-stage" style="position:relative;width:18rem;height:18rem;max-width:90vw;user-select:none;display:flex;align-items:center;justify-content:center;">
-        <div class="pcampus-spin-wheel-disc" style="position:relative;width:100%;height:100%;border-radius:50%;border:6px solid ${borderColor};overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.6);background:#0f172a;">
+    <style>
+      @keyframes pcampus-idle-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      .pcampus-spin-wheel-disc.is-idle {
+        animation: pcampus-idle-spin 50s linear infinite;
+      }
+      .pcampus-spin-hub-btn:hover {
+        transform: translate(-50%, -50%) scale(1.06) !important;
+      }
+      .pcampus-spin-hub-btn:active {
+        transform: translate(-50%, -50%) scale(0.96) !important;
+      }
+    </style>
+    <div class="pcampus-reward-spin-wrap" style="position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:24rem;box-sizing:border-box;">
+      
+      <!-- Active Live Pointer HUD: Shows reward tracked by the right pointer -->
+      <div class="pcampus-spin-live-ticker" aria-live="polite" style="display:flex;align-items:center;gap:0.45rem;padding:0.35rem 0.95rem;border-radius:9999px;border:1px solid rgba(240, 239, 237, 0.12);background:rgba(28, 28, 27, 0.85);backdrop-filter:blur(8px);font-size:0.8rem;font-weight:600;color:#f0efed;margin-bottom:1.25rem;min-height:1.85rem;transition:all 150ms ease;">
+        <span class="pcampus-ticker-icon" style="color:${brandPrimary};font-size:0.85rem;display:flex;align-items:center;">
+          <i class="fa-${initialIcon.style} ${initialIcon.icon}"></i>
+        </span>
+        <span class="pcampus-ticker-text" style="letter-spacing:-0.01em;">${textEscape(initialSlice?.name || "พร้อมหมุนลุ้นรางวัล")}</span>
+      </div>
+
+      <div class="pcampus-spin-stage" style="position:relative;width:min(84vw, 22rem);height:min(84vw, 22rem);max-width:350px;max-height:350px;user-select:none;display:flex;align-items:center;justify-content:center;">
+        
+        <!-- Wheel Disc with Idle Slow Continuous Spin -->
+        <div class="pcampus-spin-wheel-disc is-idle" style="position:relative;width:100%;height:100%;border-radius:50%;border:2px solid ${borderColor};overflow:hidden;background:${surface};">
           <svg viewBox="0 0 320 320" style="width:100%;height:100%;display:block;">
             ${slicesSvg}
-            ${pegsMarkup()}
           </svg>
         </div>
 
-        <button type="button" class="pcampus-spin-hub-btn" aria-label="Spin wheel" style="position:absolute;top:50%;left:50%;transform:translate(-50%, calc(-50% - 0.42rem));width:6.4rem;height:7.2rem;background:transparent;border:none;padding:0;cursor:pointer;outline:none;z-index:30;display:flex;align-items:center;justify-content:center;transition:transform 160ms ease;">
-          <svg viewBox="0 0 160 180" style="width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 24px rgba(0,0,0,0.7));" fill="none">
+        <!-- Right Pin Pointer (3 o'clock position pointing left) -->
+        <div class="pcampus-spin-pointer-right" style="position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:35;display:flex;align-items:center;pointer-events:none;filter:drop-shadow(-2px 0 6px rgba(0,0,0,0.5));">
+          <svg width="30" height="36" viewBox="0 0 30 36" fill="none">
             <defs>
-              <linearGradient id="pcampus-lib-hub-grad" x1="0%" y1="0%" x2="0%" y2="100%">
-                <stop offset="0%" stop-color="#1e293b"/>
-                <stop offset="45%" stop-color="#0f172a"/>
-                <stop offset="100%" stop-color="#060911"/>
+              <linearGradient id="pointer-right-grad" x1="100%" y1="0%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${brandPrimary}"/>
+                <stop offset="50%" stop-color="${brandPrimary}"/>
+                <stop offset="100%" stop-color="${brandPrimary}"/>
               </linearGradient>
             </defs>
-            <path d="M 78.5 38 Q 80 34 81.5 38 L 100 60.17 A 50 50 0 1 1 60 60.17 Z" fill="url(#pcampus-lib-hub-grad)"/>
+            <path d="M 4 18 L 26 5 L 26 31 Z" fill="url(#pointer-right-grad)" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
+            <circle cx="20" cy="18" r="2.5" fill="#ffffff"/>
           </svg>
-          <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffffff;padding-top:1.25rem;pointer-events:none;">
-            <span style="font-size:1.1rem;font-weight:900;letter-spacing:0.05em;color:#f59e0b;text-shadow:0 2px 4px rgba(0,0,0,0.5);line-height:1.1;">SPIN</span>
-            <span style="font-size:0.55rem;font-weight:800;letter-spacing:0.12em;color:#94a3b8;text-transform:uppercase;margin-top:2px;">1 TICKET</span>
-          </div>
+        </div>
+
+        <!-- Center Circular Hub Button (Logo-Only when logo is provided, Clean & Minimal) -->
+        <button type="button" class="pcampus-spin-hub-btn" aria-label="Spin wheel" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:6.8rem;height:6.8rem;border-radius:50%;background:${hubFill};border:2.5px solid ${brandPrimary};box-shadow:0 0 0 5px ${mixPrimary(brandPrimary, 18)}, 0 8px 24px rgba(0,0,0,0.6);cursor:pointer;outline:none;z-index:30;display:flex;align-items:center;justify-content:center;transition:all 180ms cubic-bezier(0.34, 1.56, 0.64, 1);overflow:hidden;padding:0.5rem;box-sizing:border-box;">
+          ${theme?.brandLogoUrl ? `
+            <div class="pcampus-hub-logo-only" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;">
+              <img src="${textEscape(theme.brandLogoUrl)}" alt="${textEscape(theme?.brandName || 'Brand Logo')}" style="max-width:85%;max-height:85%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));" />
+            </div>
+          ` : `
+            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;">
+              <span style="font-size:1.35rem;font-weight:900;letter-spacing:0.04em;color:#ffffff;line-height:1.1;">SPIN</span>
+              <span style="font-size:0.65rem;font-weight:700;letter-spacing:0.08em;color:${brandPrimary};text-transform:uppercase;margin-top:3px;">1 TICKET</span>
+            </div>
+          `}
         </button>
       </div>
-      <div class="pcampus-spin-outcome" style="margin-top:1.2rem;font-size:0.9rem;font-weight:700;color:#ffffff;text-align:center;min-height:1.5rem;text-shadow:0 2px 4px rgba(0,0,0,0.3);">
+
+      <div class="pcampus-spin-outcome" style="margin-top:1.5rem;font-size:0.92rem;font-weight:600;color:#f0efed;text-align:center;min-height:2.25rem;padding:0.45rem 1.25rem;border-radius:9999px;border:1px solid rgba(240, 239, 237, 0.08);background:rgba(240, 239, 237, 0.03);">
         พร้อมหมุนสุ่มรางวัล!
       </div>
     </div>
   `;
 }
+function ensureFontAwesomeLoaded() {
+    if (typeof document === "undefined")
+        return;
+    const id = "pcampus-fa-cdn";
+    if (!document.getElementById(id)) {
+        const link = document.createElement("link");
+        link.id = id;
+        link.rel = "stylesheet";
+        link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css";
+        document.head.appendChild(link);
+    }
+}
 export function mountSpinWheel(target, rewards = [], theme, onAction) {
+    ensureFontAwesomeLoaded();
     target.innerHTML = renderSpinWheelMarkup(rewards, theme);
     const disc = target.querySelector(".pcampus-spin-wheel-disc");
     const btn = target.querySelector(".pcampus-spin-hub-btn");
     const outcome = target.querySelector(".pcampus-spin-outcome");
+    const tickerText = target.querySelector(".pcampus-ticker-text");
+    const tickerIcon = target.querySelector(".pcampus-ticker-icon");
+    const sliceLabels = target.querySelectorAll(".spin-label-radial");
+    const slices = wheelSlices(rewards);
+    const { primary: brandPrimary } = resolveWidgetChrome(theme);
     let isSpinning = false;
-    let rotation = 0;
+    let rafId = null;
+    let lastActiveIndex = -1;
+    function updateLiveTicker() {
+        if (!disc)
+            return;
+        try {
+            const transform = window.getComputedStyle(disc).transform;
+            if (transform && transform !== "none") {
+                const matrix = new DOMMatrix(transform);
+                const currentDeg = (Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI)) + 360) % 360;
+                // Pointer is at 3 o'clock (90 degrees)
+                const pointerDeg = (90 - currentDeg + 360) % 360;
+                const activeIndex = slices.findIndex((s) => pointerDeg >= s.startDeg && pointerDeg < s.endDeg);
+                if (activeIndex >= 0 && activeIndex !== lastActiveIndex) {
+                    lastActiveIndex = activeIndex;
+                    const currentSlice = slices[activeIndex];
+                    if (currentSlice && tickerText) {
+                        tickerText.textContent = currentSlice.name;
+                        if (tickerIcon) {
+                            const fa = sliceFaIcon(currentSlice.name);
+                            tickerIcon.innerHTML = `<i class="fa-${fa.style} ${fa.icon}"></i>`;
+                        }
+                    }
+                }
+            }
+        }
+        catch { }
+        rafId = requestAnimationFrame(updateLiveTicker);
+    }
+    // Start continuous ticker tracking during idle rotation
+    rafId = requestAnimationFrame(updateLiveTicker);
     if (btn && disc) {
         btn.addEventListener("click", () => {
             if (isSpinning)
                 return;
             isSpinning = true;
             btn.disabled = true;
+            btn.style.opacity = "0.7";
+            btn.style.cursor = "not-allowed";
             if (outcome)
                 outcome.textContent = "กำลังหมุนวงล้อ…";
-            const randomDegrees = 1800 + Math.floor(Math.random() * 1440);
-            rotation += randomDegrees;
-            disc.style.transition = "transform 4500ms cubic-bezier(0.15, 0.9, 0.2, 1)";
-            disc.style.transform = `rotate(${rotation}deg)`;
+            // 1. Capture current rotational angle seamlessly from idle spin
+            let currentDeg = 0;
+            try {
+                const transform = window.getComputedStyle(disc).transform;
+                if (transform && transform !== "none") {
+                    const matrix = new DOMMatrix(transform);
+                    currentDeg = (Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI)) + 360) % 360;
+                }
+            }
+            catch {
+                currentDeg = 0;
+            }
+            // 2. Cancel idle CSS animation seamlessly without jump
+            disc.classList.remove("is-idle");
+            disc.style.animation = "none";
+            disc.style.transform = `rotate(${currentDeg}deg)`;
+            void disc.offsetHeight;
+            // 3. Fade labels during high-speed spin
+            sliceLabels.forEach((label) => {
+                label.style.opacity = "0.35";
+            });
+            // 4. Calculate high-speed target rotation
+            const extraDegrees = 2160 + Math.floor(Math.random() * 1440);
+            const targetDeg = currentDeg + extraDegrees;
+            disc.style.transition = "transform 4800ms cubic-bezier(0.12, 0.88, 0.22, 1)";
+            disc.style.transform = `rotate(${targetDeg}deg)`;
+            // 5. Restore label opacity smoothly during deceleration
+            setTimeout(() => {
+                sliceLabels.forEach((label) => {
+                    label.style.opacity = "1";
+                });
+            }, 2800);
+            // 6. On spin finish
             setTimeout(() => {
                 isSpinning = false;
                 btn.disabled = false;
-                const slices = wheelSlices(rewards);
-                const winningSlice = slices[0];
-                if (outcome) {
-                    outcome.innerHTML = `🎉 ยินดีด้วย! คุณได้รับ: <strong style="color:#fcd34d;">${textEscape(winningSlice?.name || "รางวัลพิเศษ")}</strong>`;
+                btn.style.opacity = "1";
+                btn.style.cursor = "pointer";
+                // Determine final winning slice at 3 o'clock (90 deg)
+                const finalNormalizedDeg = (90 - (targetDeg % 360) + 360) % 360;
+                const winningSlice = slices.find((s) => finalNormalizedDeg >= s.startDeg && finalNormalizedDeg < s.endDeg) || slices[0];
+                if (tickerText && winningSlice) {
+                    tickerText.textContent = winningSlice.name;
+                    if (tickerIcon) {
+                        const fa = sliceFaIcon(winningSlice.name);
+                        tickerIcon.innerHTML = `<i class="fa-${fa.style} ${fa.icon}"></i>`;
+                    }
+                }
+                if (outcome && winningSlice) {
+                    outcome.innerHTML = `ยินดีด้วย! คุณได้รับ: <strong style="color:${brandPrimary};">${textEscape(winningSlice.name)}</strong>`;
+                }
+                if (winningSlice) {
+                    const matched = rewards.find((r) => r.id === winningSlice.id || r.name === winningSlice.name);
+                    showCouponSuccess({
+                        rewardName: winningSlice.name,
+                        couponCode: matched?.couponCode,
+                    });
                 }
-                if (onAction) {
-                    onAction(winningSlice ? { name: winningSlice.name, id: winningSlice.id } : undefined);
+                if (onAction && winningSlice) {
+                    onAction({
+                        name: winningSlice.name,
+                        id: winningSlice.id,
+                        couponCode: rewards.find((r) => r.id === winningSlice.id || r.name === winningSlice.name)?.couponCode,
+                    });
                 }
-            }, 4600);
+            }, 4900);
         });
     }
 }

package/dist/widgets/types.d.ts

@@ -7,12 +7,31 @@ export interface WidgetRewardItem {
     description?: string;
     couponCode?: string;
 }
+export type QuizItem = {
+    question: string;
+    options: string[];
+};
+export type QuizAnswerIndex = {
+    questionIndex: number;
+    optionIndex: number;
+};
+export type QuizContent = {
+    heading?: string;
+    items?: QuizItem[];
+    question?: string;
+    options?: string[];
+    /** 0-based step to show first. Clamped to the resolved item list. */
+    initialStep?: number;
+};
 export interface InteractiveWidgetOptions {
     widgetType: WidgetType;
     rewards?: WidgetRewardItem[];
     theme?: RewardWidgetTheme;
+    quiz?: QuizContent;
     title?: string;
     disabled?: boolean;
     onAction?: (reward?: WidgetRewardItem) => void;
+    /** Quiz only. Selected indexes at complete. Presentation only — no HTTP. */
+    onQuizComplete?: (answers: QuizAnswerIndex[]) => void;
 }
 export declare const textEscape: (value: string | undefined) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pcampus/reward-widget",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Public UI components and theme types for Pcampus Reward Widget integrations.",
   "type": "module",
   "license": "MIT",
@@ -13,7 +13,11 @@
       "import": "./dist/index.js"
     }
   },
-  "files": ["dist", "README.md", "LICENSE"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +26,12 @@
     "test": "npm run build && node --test",
     "pack:dry-run": "npm pack --dry-run"
   },
-  "keywords": ["pcampus", "reward", "widget", "embed"],
+  "keywords": [
+    "pcampus",
+    "reward",
+    "widget",
+    "embed"
+  ],
   "devDependencies": {
     "typescript": "^5.7.0"
   }