@pcampus/reward-widget 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pcampus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# @pcampus/reward-widget
+
+Public UI components and theme types for Pcampus Reward Widget integrations.
+
+## Relationship to the Reward Widget service
+
+`Pcampus-reward-widget` is the private runtime and source of truth for campaign
+configuration, eligibility, server draw, inventory, claims, webhooks, and the
+hosted Player/Embed experience.
+
+`Pcampus-reward-widget-library` is the public UI layer: reusable components,
+theme tokens, and TypeScript types that consumer apps can render and style. It
+does not contain API clients, draw or eligibility logic, campaign state,
+secrets, claims, webhooks, or coupon data.
+
+This package is UI-only. It never contains draw/eligibility clients, campaign
+secrets, coupon codes, or authoritative server logic.
+
+## Status
+
+Initial public scaffold. Component exports and registry publishing will be added
+in the next implementation phase.
+
+## Public support matrix
+
+The UI catalog targets `spin`, `scratch`, `pick-card`, `mystery-box`, `slot`,
+and `quiz`. This package exports presentation primitives, theme configuration,
+and public types only. Reward service APIs, server-side authority, claims,
+webhooks, secrets, and coupon data remain outside the package.
+
+## Installation & Usage
+
+```bash
+npm install @pcampus/reward-widget
+```
+
+### SSR / String Markup
+
+```typescript
+import { renderRewardWidgetMarkup } from '@pcampus/reward-widget';
+
+const html = renderRewardWidgetMarkup({
+  widgetType: 'spin',
+  state: 'eligible',
+  title: 'Daily Wheel of Fortune',
+  message: 'Spin now to win exclusive points!',
+  actionLabel: 'Spin Now',
+  theme: { brandPrimaryColor: '#2952a3' },
+});
+```
+
+### Client DOM Mount
+
+```typescript
+import { mountRewardWidget } from '@pcampus/reward-widget';
+
+const container = document.getElementById('widget-root');
+mountRewardWidget(container, {
+  widgetType: 'mystery-box',
+  state: 'eligible',
+  title: 'Special Mystery Box',
+  onAction: () => {
+    console.log('Action clicked');
+  },
+});
+```
+
+## Theme Tokens & Customization
+
+Consumers can customize widget styling using typed tokens and CSS custom properties:
+
+```typescript
+import { createRewardWidgetTheme, rewardWidgetThemeCss } from '@pcampus/reward-widget';
+
+// Create custom theme with fallbacks to defaults
+const theme = createRewardWidgetTheme({
+  primary: '#2952a3',
+  background: '#0f172a',
+  radius: '0.5rem',
+});
+
+// Generate scoped CSS variables
+const css = rewardWidgetThemeCss({ primary: '#2952a3' });
+```
+
+### Supported Tokens
+
+| Token | Default | Purpose |
+|---|---|---|
+| `primary` | `#2952a3` | Primary brand color |
+| `primaryHover` | `#1e3a8a` | Interactive hover state |
+| `surface` | `#ffffff` | Component card/surface |
+| `background` | `#0f172a` | Container background |
+| `border` | `#cbd5e1` | Border and outline |
+| `focus` | `#f59e0b` | Focus ring indicator |
+| `disabled` | `#64748b` | Disabled control state |
+| `warning` | `#f59e0b` | Warning message/badge |
+| `blocked` | `#9f1239` | Ineligible / limit reached |
+| `success` | `#047857` | Reward won / success |
+| `radius` | `0.75rem` | Border radius |
+| `spacing` | `1rem` | Component padding |
+| `motion` | `160ms` | Transition duration |
+
+## Build
+
+```bash
+npm install
+npm run build
+npm test
+```
+
+The package build emits JavaScript and TypeScript declarations under `dist/`.
+
+## Public release policy
+
+Releases use the public npm registry only after human review. Before publishing,
+run `npm test`, `npm pack --dry-run`, and `npm audit --omit=dev`. The published
+artifact is limited to `dist/`, this README, and the MIT license.

package/dist/components.d.ts

@@ -0,0 +1,15 @@
+import type { RewardWidgetTheme, WidgetType } from "./index.js";
+export type RewardWidgetState = "pending" | "eligible" | "blocked" | "error" | "complete";
+export type RewardWidgetProps = {
+    widgetType: WidgetType;
+    state: RewardWidgetState;
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    theme?: RewardWidgetTheme;
+    onAction?: () => void;
+};
+/** Render a safe, UI-only Widget shell. It performs no draw or service work. */
+export declare function renderRewardWidgetMarkup(props: RewardWidgetProps): string;
+/** Mount the UI shell into a DOM element; event wiring remains consumer-owned. */
+export declare function mountRewardWidget(target: Element, props: RewardWidgetProps): void;

package/dist/components.js

@@ -0,0 +1,26 @@
+const text = (value) => (value ?? "").replace(/[&<>"']/g, (character) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+})[character]);
+/** Render a safe, UI-only Widget shell. It performs no draw or service work. */
+export function renderRewardWidgetMarkup(props) {
+    const title = props.title ?? "Reward Widget";
+    const message = props.message ?? "";
+    const action = props.actionLabel ?? "Continue";
+    const primary = props.theme?.brandPrimaryColor ?? "#2952a3";
+    const background = props.theme?.pageBackgroundColor ?? "transparent";
+    const actionMarkup = props.onAction
+        ? `<button type="button" data-reward-widget-action>${text(action)}</button>`
+        : "";
+    return `<section class="pcampus-reward-widget" data-widget-type="${text(props.widgetType)}" data-state="${text(props.state)}" style="--pcampus-widget-primary:${text(primary)};--pcampus-widget-background:${text(background)}" aria-live="polite"><h2>${text(title)}</h2><p>${text(message)}</p>${actionMarkup}</section>`;
+}
+/** Mount the UI shell into a DOM element; event wiring remains consumer-owned. */
+export function mountRewardWidget(target, props) {
+    target.innerHTML = renderRewardWidgetMarkup(props);
+    const action = target.querySelector("[data-reward-widget-action]");
+    if (action && props.onAction)
+        action.addEventListener("click", props.onAction);
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export declare const WIDGET_TYPES: readonly ["spin", "scratch", "pick-card", "mystery-box", "quiz"];
+export type WidgetType = (typeof WIDGET_TYPES)[number];
+export type RewardWidgetTheme = {
+    brandName?: string;
+    brandLogoUrl?: string;
+    brandFont?: string;
+    brandPrimaryColor?: string;
+    pageBackgroundColor?: string;
+    wheelBorderColor?: string;
+    sliceColors?: readonly string[];
+};
+export { mountRewardWidget, renderRewardWidgetMarkup } from "./components.js";
+export type { RewardWidgetProps, RewardWidgetState } from "./components.js";
+export { createRewardWidgetTheme, defaultRewardWidgetTheme, rewardWidgetThemeCss, } from "./theme.js";
+export type { RewardWidgetThemeTokens } from "./theme.js";
+export * from "./widgets/index.js";

package/dist/index.js

@@ -0,0 +1,10 @@
+export const WIDGET_TYPES = [
+    "spin",
+    "scratch",
+    "pick-card",
+    "mystery-box",
+    "quiz",
+];
+export { mountRewardWidget, renderRewardWidgetMarkup } from "./components.js";
+export { createRewardWidgetTheme, defaultRewardWidgetTheme, rewardWidgetThemeCss, } from "./theme.js";
+export * from "./widgets/index.js";

package/dist/theme.d.ts

@@ -0,0 +1,18 @@
+export type RewardWidgetThemeTokens = {
+    primary: string;
+    primaryHover: string;
+    surface: string;
+    background: string;
+    border: string;
+    focus: string;
+    disabled: string;
+    warning: string;
+    blocked: string;
+    success: string;
+    radius: string;
+    spacing: string;
+    motion: string;
+};
+export declare const defaultRewardWidgetTheme: RewardWidgetThemeTokens;
+export declare function createRewardWidgetTheme(overrides?: Partial<RewardWidgetThemeTokens>): RewardWidgetThemeTokens;
+export declare function rewardWidgetThemeCss(overrides?: Partial<RewardWidgetThemeTokens>): string;

package/dist/theme.js

@@ -0,0 +1,22 @@
+export const defaultRewardWidgetTheme = {
+    primary: "#2952a3",
+    primaryHover: "#1e3a8a",
+    surface: "#ffffff",
+    background: "#0f172a",
+    border: "#cbd5e1",
+    focus: "#f59e0b",
+    disabled: "#64748b",
+    warning: "#f59e0b",
+    blocked: "#9f1239",
+    success: "#047857",
+    radius: "0.75rem",
+    spacing: "1rem",
+    motion: "160ms",
+};
+export function createRewardWidgetTheme(overrides = {}) {
+    return { ...defaultRewardWidgetTheme, ...overrides };
+}
+export function rewardWidgetThemeCss(overrides = {}) {
+    const theme = createRewardWidgetTheme(overrides);
+    return `:root{--pcampus-widget-primary:${theme.primary};--pcampus-widget-primary-hover:${theme.primaryHover};--pcampus-widget-surface:${theme.surface};--pcampus-widget-background:${theme.background};--pcampus-widget-border:${theme.border};--pcampus-widget-focus:${theme.focus};--pcampus-widget-disabled:${theme.disabled};--pcampus-widget-warning:${theme.warning};--pcampus-widget-blocked:${theme.blocked};--pcampus-widget-success:${theme.success};--pcampus-widget-radius:${theme.radius};--pcampus-widget-spacing:${theme.spacing};--pcampus-widget-motion:${theme.motion}}`;
+}

package/dist/widgets/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./types.js";
+export * from "./spin.js";
+export * from "./scratch.js";
+export * from "./pick-card.js";
+export * from "./mystery-box.js";
+export * from "./quiz.js";
+import type { InteractiveWidgetOptions } from "./types.js";
+export declare function renderInteractiveWidgetMarkup(options: InteractiveWidgetOptions): string;
+export declare function mountInteractiveWidget(target: Element, options: InteractiveWidgetOptions): void;

package/dist/widgets/index.js

@@ -0,0 +1,50 @@
+export * from "./types.js";
+export * from "./spin.js";
+export * from "./scratch.js";
+export * from "./pick-card.js";
+export * from "./mystery-box.js";
+export * from "./quiz.js";
+import { renderSpinWheelMarkup, mountSpinWheel } from "./spin.js";
+import { renderScratchCardMarkup, mountScratchCard } from "./scratch.js";
+import { renderPickCardMarkup, mountPickCard } from "./pick-card.js";
+import { renderMysteryBoxMarkup, mountMysteryBox } from "./mystery-box.js";
+import { renderQuizMarkup, mountQuiz } from "./quiz.js";
+export function renderInteractiveWidgetMarkup(options) {
+    const { widgetType, rewards = [], theme } = options;
+    switch (widgetType) {
+        case "spin":
+            return renderSpinWheelMarkup(rewards, theme);
+        case "scratch":
+            return renderScratchCardMarkup(rewards, theme);
+        case "pick-card":
+            return renderPickCardMarkup(rewards, theme);
+        case "mystery-box":
+            return renderMysteryBoxMarkup(rewards, theme);
+        case "quiz":
+            return renderQuizMarkup(rewards, theme);
+        default:
+            return `<div class="pcampus-unknown-widget">Unsupported widget type: ${widgetType}</div>`;
+    }
+}
+export function mountInteractiveWidget(target, options) {
+    const { widgetType, rewards = [], theme, onAction } = options;
+    switch (widgetType) {
+        case "spin":
+            mountSpinWheel(target, rewards, theme, onAction);
+            break;
+        case "scratch":
+            mountScratchCard(target, rewards, theme, onAction);
+            break;
+        case "pick-card":
+            mountPickCard(target, rewards, theme, onAction);
+            break;
+        case "mystery-box":
+            mountMysteryBox(target, rewards, theme, onAction);
+            break;
+        case "quiz":
+            mountQuiz(target, rewards, theme, onAction);
+            break;
+        default:
+            target.innerHTML = `<div class="pcampus-unknown-widget">Unsupported widget type: ${widgetType}</div>`;
+    }
+}

package/dist/widgets/mystery-box.d.ts

@@ -0,0 +1,4 @@
+import type { RewardWidgetTheme } from "../index.js";
+import { type WidgetRewardItem } from "./types.js";
+export declare function renderMysteryBoxMarkup(rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme): string;
+export declare function mountMysteryBox(target: Element, rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme, onAction?: (reward?: WidgetRewardItem) => void): void;

package/dist/widgets/mystery-box.js

@@ -0,0 +1,32 @@
+export function renderMysteryBoxMarkup(rewards = [], theme) {
+    const primary = theme?.brandPrimaryColor || "#7c3aed";
+    return `
+    <div class="pcampus-mystery-box-wrap" style="position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:12rem;height:12rem;user-select:none;">
+      <div style="position:absolute;inset:1rem;border-radius:1.5rem;background:${primary};opacity:0.35;filter:blur(20px);"></div>
+
+      <div class="pcampus-mystery-box" style="position:relative;width:8rem;height:8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:1rem;border:3px solid rgba(252,211,77,0.8);background:#0f172a;box-shadow:0 20px 40px rgba(0,0,0,0.6);cursor:pointer;transition:transform 200ms ease;">
+        <div style="position:absolute;top:4px;left:4px;width:10px;height:10px;border-top:2px solid #fde68a;border-left:2px solid #fde68a;"></div>
+        <div style="position:absolute;top:4px;right:4px;width:10px;height:10px;border-top:2px solid #fde68a;border-right:2px solid #fde68a;"></div>
+        <div style="position:absolute;bottom:4px;left:4px;width:10px;height:10px;border-bottom:2px solid #fde68a;border-left:2px solid #fde68a;"></div>
+        <div style="position:absolute;bottom:4px;right:4px;width:10px;height:10px;border-bottom:2px solid #fde68a;border-right:2px solid #fde68a;"></div>
+
+        <span style="font-size:2.5rem;font-weight:900;color:#fcd34d;filter:drop-shadow(0 0 10px rgba(252,211,77,0.8));">?</span>
+        <span style="margin-top:4px;font-size:9px;font-weight:800;letter-spacing:0.1em;color:#fde68a;text-transform:uppercase;">MYSTERY CHEST</span>
+      </div>
+    </div>
+  `;
+}
+export function mountMysteryBox(target, rewards = [], theme, onAction) {
+    target.innerHTML = renderMysteryBoxMarkup(rewards, theme);
+    const box = target.querySelector(".pcampus-mystery-box");
+    if (box) {
+        box.addEventListener("click", () => {
+            box.style.transform = "scale(1.1) rotate(-3deg)";
+            setTimeout(() => {
+                box.style.transform = "scale(1)";
+                if (onAction)
+                    onAction(rewards[0]);
+            }, 300);
+        });
+    }
+}

package/dist/widgets/pick-card.d.ts

@@ -0,0 +1,4 @@
+import type { RewardWidgetTheme } from "../index.js";
+import { type WidgetRewardItem } from "./types.js";
+export declare function renderPickCardMarkup(rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme): string;
+export declare function mountPickCard(target: Element, rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme, onAction?: (reward?: WidgetRewardItem) => void): void;

package/dist/widgets/pick-card.js

@@ -0,0 +1,51 @@
+export function renderPickCardMarkup(rewards = [], theme) {
+    const primary = theme?.brandPrimaryColor || "#1e40af";
+    const items = rewards.length >= 3
+        ? rewards.slice(0, 3)
+        : [
+            rewards[0] || { name: "1st Prize" },
+            rewards[1] || { name: "2nd Prize" },
+            rewards[2] || { name: "3rd Prize" },
+        ];
+    const cardsHtml = items
+        .map((item, idx) => `
+      <div class="pcampus-pick-card" data-card-index="${idx}" style="position:relative;width:5rem;height:8.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0.5rem;border-radius:0.75rem;border:2px solid rgba(252,211,77,0.6);background:${primary};box-shadow:0 12px 24px rgba(0,0,0,0.4);cursor:pointer;user-select:none;transition:transform 200ms ease, box-shadow 200ms ease;">
+        <div style="display:flex;width:100%;justify-content:space-between;color:#fde68a;">
+          <svg style="width:8px;height:8px;fill:currentColor;" viewBox="0 0 24 24"><path d="M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z"/></svg>
+          <svg style="width:8px;height:8px;fill:currentColor;" viewBox="0 0 24 24"><path d="M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z"/></svg>
+        </div>
+
+        <div class="pcampus-card-center" style="display:flex;flex-direction:column;align-items:center;gap:2px;">
+          <svg style="width:24px;height:24px;color:#fde68a;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <rect x="5" y="3" width="14" height="18" rx="2" stroke-width="1.5" fill="rgba(255,255,255,0.15)"/>
+            <path d="M12 8l1.5 2.5L16 12l-2.5 1.5L12 16l-1.5-2.5L8 12l2.5-1.5z" fill="currentColor"/>
+          </svg>
+          <span style="font-size:9px;font-weight:900;letter-spacing:0.05em;color:#ffffff;text-transform:uppercase;">PICK</span>
+        </div>
+
+        <div style="display:flex;width:100%;justify-content:space-between;color:#fde68a;">
+          <svg style="width:8px;height:8px;fill:currentColor;" viewBox="0 0 24 24"><path d="M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z"/></svg>
+          <svg style="width:8px;height:8px;fill:currentColor;" viewBox="0 0 24 24"><path d="M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z"/></svg>
+        </div>
+      </div>
+    `)
+        .join("");
+    return `
+    <div class="pcampus-pick-card-wrap" style="display:flex;align-items:center;justify-content:center;gap:0.6rem;padding:0.5rem;">
+      ${cardsHtml}
+    </div>
+  `;
+}
+export function mountPickCard(target, rewards = [], theme, onAction) {
+    target.innerHTML = renderPickCardMarkup(rewards, theme);
+    const cards = target.querySelectorAll(".pcampus-pick-card");
+    cards.forEach((card, idx) => {
+        card.addEventListener("click", () => {
+            card.style.transform = "translateY(-10px) scale(1.05)";
+            card.style.borderColor = "#fcd34d";
+            const chosen = rewards[idx] || rewards[0];
+            if (onAction)
+                onAction(chosen);
+        });
+    });
+}

package/dist/widgets/quiz.d.ts

@@ -0,0 +1,4 @@
+import type { RewardWidgetTheme } from "../index.js";
+import { type WidgetRewardItem } from "./types.js";
+export declare function renderQuizMarkup(rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme): string;
+export declare function mountQuiz(target: Element, rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme, onAction?: (reward?: WidgetRewardItem) => void): void;

package/dist/widgets/quiz.js

@@ -0,0 +1,61 @@
+export function renderQuizMarkup(rewards = [], theme) {
+    const primary = theme?.brandPrimaryColor || "#0284c7";
+    return `
+    <div class="pcampus-quiz-widget-wrap" style="position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:270px;padding:1rem;border-radius:1rem;border:1px solid rgba(255,255,255,0.15);background:#ffffff;color:#0f172a;box-shadow:0 20px 40px rgba(0,0,0,0.5);">
+      <div style="display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:9999px;background:#f1f5f9;font-size:10px;font-weight:700;color:#475569;margin-bottom:0.6rem;">
+        <svg style="width:12px;height:12px;color:#64748b;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+        </svg>
+        <span>แบบสอบถามเพื่อรับรางวัล</span>
+      </div>
+
+      <div style="width:100%;display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:#64748b;margin-bottom:4px;">
+        <span>คำถามที่ 1</span>
+        <span style="color:${primary};">1 / 3</span>
+      </div>
+      <div style="width:100%;height:6px;border-radius:9999px;background:#f1f5f9;border:1px solid #e2e8f0;overflow:hidden;margin-bottom:0.75rem;">
+        <div style="width:33%;height:100%;background:${primary};border-radius:9999px;"></div>
+      </div>
+
+      <p style="width:100%;text-align:left;font-size:12px;font-weight:800;color:#0f172a;margin:0 0 0.6rem 0;">
+        คุณพึงพอใจกับบริการในระดับใด?
+      </p>
+
+      <div style="width:100%;display:flex;flex-direction:column;gap:6px;">
+        <button type="button" class="pcampus-quiz-opt" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:0.75rem;background:${primary};color:#ffffff;border:none;font-size:11px;font-weight:600;cursor:pointer;">
+          <div style="display:flex;align-items:center;gap:6px;">
+            <span style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,0.2);font-size:10px;font-weight:700;">A</span>
+            <span>พึงพอใจมากที่สุด</span>
+          </div>
+          <svg style="width:14px;height:14px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
+          </svg>
+        </button>
+
+        <button type="button" class="pcampus-quiz-opt" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:0.75rem;background:#f8fafc;color:#334155;border:1px solid #e2e8f0;font-size:11px;font-weight:500;cursor:pointer;">
+          <div style="display:flex;align-items:center;gap:6px;">
+            <span style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;background:#ffffff;border:1px solid #cbd5e1;font-size:10px;font-weight:700;color:#64748b;">B</span>
+            <span>ปานกลาง</span>
+          </div>
+        </button>
+      </div>
+
+      <div style="margin-top:0.75rem;display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px dashed #e2e8f0;padding-top:6px;font-size:10px;font-weight:600;color:#d97706;">
+        <svg style="width:12px;height:12px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V6a2 2 0 10-2 2h2zm-7 5h14v7a2 2 0 01-2 2H7a2 2 0 01-2-2v-7zM3 10h18v3H3v-3z"/>
+        </svg>
+        <span>ตอบครบ 3 ข้อรับรางวัลทันที</span>
+      </div>
+    </div>
+  `;
+}
+export function mountQuiz(target, rewards = [], theme, onAction) {
+    target.innerHTML = renderQuizMarkup(rewards, theme);
+    const opts = target.querySelectorAll(".pcampus-quiz-opt");
+    opts.forEach((btn) => {
+        btn.addEventListener("click", () => {
+            if (onAction)
+                onAction(rewards[0]);
+        });
+    });
+}

package/dist/widgets/scratch.d.ts

@@ -0,0 +1,4 @@
+import type { RewardWidgetTheme } from "../index.js";
+import { type WidgetRewardItem } from "./types.js";
+export declare function renderScratchCardMarkup(rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme): string;
+export declare function mountScratchCard(target: Element, rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme, onAction?: (reward?: WidgetRewardItem) => void): void;

package/dist/widgets/scratch.js

@@ -0,0 +1,96 @@
+import { textEscape } from "./types.js";
+export function renderScratchCardMarkup(rewards = [], theme) {
+    const topReward = rewards[0]?.name || "Lucky Special Reward";
+    const primary = theme?.brandPrimaryColor || "#2563eb";
+    return `
+    <div class="pcampus-scratch-widget-wrap" style="position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:260px;padding:1rem;border-radius:1.25rem;border:2px solid rgba(255,255,255,0.15);background:rgba(15,23,42,0.85);box-shadow:0 20px 40px rgba(0,0,0,0.5);text-align:center;">
+      <div style="position:relative;width:100%;height:7.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0.875rem;border:1px solid #475569;background:linear-gradient(135deg, #94a3b8 0%, #cbd5e1 50%, #64748b 100%);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,0.3);">
+        <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e293b;color:#f8fafc;padding:0.5rem;z-index:1;">
+          <span style="font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;">YOU WON</span>
+          <span style="font-size:14px;font-weight:900;color:#fcd34d;margin-top:2px;">${textEscape(topReward)}</span>
+        </div>
+
+        <canvas class="pcampus-scratch-canvas" width="240" height="120" style="position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:crosshair;"></canvas>
+
+        <div class="pcampus-scratch-overlay-hint" style="position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;">
+          <svg style="width:28px;height:28px;color:#f59e0b;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));" viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5"/>
+            <circle cx="12" cy="12" r="6" stroke="#b45309" stroke-width="1" stroke-dasharray="2 2"/>
+            <path d="M12 8v8m-3-5h6" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <span style="font-size:11px;font-weight:800;letter-spacing:0.05em;color:#0f172a;text-transform:uppercase;">SCRATCH HERE</span>
+        </div>
+      </div>
+      <span style="margin-top:0.6rem;font-size:11px;font-weight:500;color:#94a3b8;">Scratch to reveal your lucky prize!</span>
+    </div>
+  `;
+}
+export function mountScratchCard(target, rewards = [], theme, onAction) {
+    target.innerHTML = renderScratchCardMarkup(rewards, theme);
+    const canvas = target.querySelector(".pcampus-scratch-canvas");
+    const hint = target.querySelector(".pcampus-scratch-overlay-hint");
+    if (!canvas)
+        return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return;
+    // Fill foil
+    ctx.fillStyle = "#94a3b8";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    let isDrawing = false;
+    let scratched = false;
+    const scratch = (x, y) => {
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.beginPath();
+        ctx.arc(x, y, 16, 0, Math.PI * 2);
+        ctx.fill();
+        if (hint && !scratched) {
+            hint.style.opacity = "0";
+            hint.style.transition = "opacity 200ms ease";
+        }
+        if (!scratched) {
+            scratched = true;
+            if (onAction)
+                onAction(rewards[0]);
+        }
+    };
+    const getPos = (e) => {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        return {
+            x: (e.clientX - rect.left) * scaleX,
+            y: (e.clientY - rect.top) * scaleY,
+        };
+    };
+    canvas.addEventListener("mousedown", (e) => {
+        isDrawing = true;
+        const pos = getPos(e);
+        scratch(pos.x, pos.y);
+    });
+    window.addEventListener("mousemove", (e) => {
+        if (!isDrawing)
+            return;
+        const pos = getPos(e);
+        scratch(pos.x, pos.y);
+    });
+    window.addEventListener("mouseup", () => {
+        isDrawing = false;
+    });
+    canvas.addEventListener("touchstart", (e) => {
+        if (e.touches[0]) {
+            isDrawing = true;
+            const pos = getPos(e.touches[0]);
+            scratch(pos.x, pos.y);
+        }
+    });
+    canvas.addEventListener("touchmove", (e) => {
+        if (!isDrawing || !e.touches[0])
+            return;
+        const pos = getPos(e.touches[0]);
+        scratch(pos.x, pos.y);
+    });
+    canvas.addEventListener("touchend", () => {
+        isDrawing = false;
+    });
+}

package/dist/widgets/spin.d.ts

@@ -0,0 +1,22 @@
+import type { RewardWidgetTheme } from "../index.js";
+import { type WidgetRewardItem } from "./types.js";
+export declare const MIN_WHEEL_SLICES = 6;
+export declare const WHEEL_CX = 160;
+export declare const WHEEL_CY = 160;
+export declare const WHEEL_R = 160;
+export declare const WHEEL_LABEL_RADIUS = 104;
+export interface WheelSlice {
+    id?: string;
+    name: string;
+    weight?: number;
+    fillIndex: number;
+    startDeg: number;
+    endDeg: number;
+    midDeg: number;
+}
+export declare function polar(cx: number, cy: number, r: number, deg: number): [number, number];
+export declare function slicePath(cx: number, cy: number, r: number, startDeg: number, endDeg: number): string;
+export declare function visualSliceCounts(rewardCount: number): number[];
+export declare function wheelSlices(rewards: WidgetRewardItem[]): WheelSlice[];
+export declare function renderSpinWheelMarkup(rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme): string;
+export declare function mountSpinWheel(target: Element, rewards?: WidgetRewardItem[], theme?: RewardWidgetTheme, onAction?: (reward?: WidgetRewardItem) => void): void;

package/dist/widgets/spin.js

@@ -0,0 +1,171 @@
+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;
+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)];
+}
+export function slicePath(cx, cy, r, startDeg, endDeg) {
+    const sweep = endDeg - startDeg;
+    if (sweep <= 0 || sweep >= 359.999)
+        return "";
+    const [x1, y1] = polar(cx, cy, r, startDeg);
+    const [x2, y2] = polar(cx, cy, r, endDeg);
+    const large = sweep > 180 ? 1 : 0;
+    return `M ${cx} ${cy} L ${x1.toFixed(3)} ${y1.toFixed(3)} A ${r} ${r} 0 ${large} 1 ${x2.toFixed(3)} ${y2.toFixed(3)} Z`;
+}
+export function visualSliceCounts(rewardCount) {
+    if (rewardCount <= 0)
+        return [];
+    if (rewardCount >= MIN_WHEEL_SLICES) {
+        return Array.from({ length: rewardCount }, () => 1);
+    }
+    const base = Math.floor(MIN_WHEEL_SLICES / rewardCount);
+    const counts = Array.from({ length: rewardCount }, () => base);
+    let extras = MIN_WHEEL_SLICES - base * rewardCount;
+    for (let i = 0; extras > 0; i++) {
+        counts[i] += 1;
+        extras -= 1;
+    }
+    return counts;
+}
+export function wheelSlices(rewards) {
+    const valid = rewards.filter((r) => (r.name ?? "").trim().length > 0);
+    const list = valid.length > 0
+        ? valid
+        : [
+            { name: "Special Reward" },
+            { name: "Lucky Bonus" },
+            { name: "100 Points" },
+            { name: "50% Discount" },
+        ];
+    const counts = visualSliceCounts(list.length);
+    const remaining = [...counts];
+    const total = counts.reduce((sum, n) => sum + n, 0);
+    const expanded = [];
+    while (expanded.length < total) {
+        for (let i = 0; i < list.length; i++) {
+            if (remaining[i] > 0) {
+                expanded.push({ item: list[i], fillIndex: i });
+                remaining[i]--;
+            }
+        }
+    }
+    const sweep = 360 / expanded.length;
+    return expanded.map((entry, i) => ({
+        id: entry.item.id,
+        name: entry.item.name,
+        weight: entry.item.weight,
+        fillIndex: entry.fillIndex,
+        startDeg: i * sweep,
+        endDeg: (i + 1) * sweep,
+        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"/>`);
+    }
+    return parts.join("");
+}
+export function renderSpinWheelMarkup(rewards = [], theme) {
+    const slices = wheelSlices(rewards);
+    const colors = theme?.sliceColors && theme.sliceColors.length === 3
+        ? theme.sliceColors
+        : ["#ffffff", "#dbeafe", "#1e3a8a"];
+    const borderColor = theme?.wheelBorderColor || "#233044";
+    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 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;
+        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>
+          </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;">
+          <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">
+            <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>
+            </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)"/>
+          </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>
+        </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>
+    </div>
+  `;
+}
+export function mountSpinWheel(target, rewards = [], theme, onAction) {
+    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");
+    let isSpinning = false;
+    let rotation = 0;
+    if (btn && disc) {
+        btn.addEventListener("click", () => {
+            if (isSpinning)
+                return;
+            isSpinning = true;
+            btn.disabled = true;
+            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)`;
+            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>`;
+                }
+                if (onAction) {
+                    onAction(winningSlice ? { name: winningSlice.name, id: winningSlice.id } : undefined);
+                }
+            }, 4600);
+        });
+    }
+}

package/dist/widgets/types.d.ts

@@ -0,0 +1,18 @@
+import type { RewardWidgetTheme, WidgetType } from "../index.js";
+export interface WidgetRewardItem {
+    id?: string;
+    name: string;
+    weight?: number;
+    icon?: string;
+    description?: string;
+    couponCode?: string;
+}
+export interface InteractiveWidgetOptions {
+    widgetType: WidgetType;
+    rewards?: WidgetRewardItem[];
+    theme?: RewardWidgetTheme;
+    title?: string;
+    disabled?: boolean;
+    onAction?: (reward?: WidgetRewardItem) => void;
+}
+export declare const textEscape: (value: string | undefined) => string;

package/dist/widgets/types.js

@@ -0,0 +1,7 @@
+export const textEscape = (value) => (value ?? "").replace(/[&<>"']/g, (character) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+})[character]);

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@pcampus/reward-widget",
+  "version": "0.1.0",
+  "description": "Public UI components and theme types for Pcampus Reward Widget integrations.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && node --test",
+    "pack:dry-run": "npm pack --dry-run"
+  },
+  "keywords": ["pcampus", "reward", "widget", "embed"],
+  "devDependencies": {
+    "typescript": "^5.7.0"
+  }
+}