@crediball/elements 0.4.0 → 0.5.0

package/dist/{chunk-KXVW7PIU.js → chunk-6CNCZGCF.js}

@@ -1,30 +1,9 @@
 // src/base.ts
 import {
-  getCrediballClient
+  getCrediballClient,
+  loadRemoteFont,
+  themeToCssVars
 } from "@crediball/core";
-var THEME_VARS = [
-  ["accent", "--crediball-accent", String],
-  ["onAccent", "--crediball-on-accent", String],
-  ["ink", "--crediball-ink", String],
-  ["canvas", "--crediball-canvas", String],
-  ["hairline", "--crediball-hairline", String],
-  ["radius", "--crediball-radius", (v) => `${v}px`],
-  ["radiusCard", "--crediball-radius-card", (v) => `${v}px`],
-  ["fontStack", "--crediball-font", String]
-];
-function loadRemoteFont(url) {
-  if (typeof document === "undefined") return;
-  const existing = document.querySelector("link[data-crediball-font]");
-  if (existing?.href === url) return;
-  if (existing) existing.href = url;
-  else {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = url;
-    link.setAttribute("data-crediball-font", "");
-    document.head.appendChild(link);
-  }
-}
 var _CrediballElement = class _CrediballElement extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -85,9 +64,8 @@ var _CrediballElement = class _CrediballElement extends HTMLElement {
     if (this.getAttribute("apply-remote-theme") === "false") return;
     const theme = this.getSnapshot()?.packages?.ui?.theme;
     if (!theme) return;
-    for (const [key, cssVar, fmt] of THEME_VARS) {
-      const value = theme[key];
-      if (value != null && value !== "") this.style.setProperty(cssVar, fmt(value));
+    for (const [cssVar, value] of Object.entries(themeToCssVars(theme))) {
+      this.style.setProperty(cssVar, value);
     }
     if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
   }
@@ -110,9 +88,7 @@ _CrediballElement.CLIENT_ATTRS = /* @__PURE__ */ new Set([
 var CrediballElement = _CrediballElement;
 
 // src/format.ts
-function formatCredits(credits) {
-  return new Intl.NumberFormat(void 0).format(Math.round(credits));
-}
+import { formatCredits } from "@crediball/core";
 
 // src/balance.ts
 var CrediballBalanceElement = class extends CrediballElement {
@@ -186,6 +162,7 @@ var CrediballTopUpButtonElement = class extends CrediballElement {
 };
 
 // src/low-credit-warning.ts
+import { isBalanceLow } from "@crediball/core";
 var CrediballLowCreditWarningElement = class extends CrediballElement {
   static get observedAttributes() {
     return [...CrediballElement.observedAttributes, "threshold"];
@@ -200,7 +177,7 @@ var CrediballLowCreditWarningElement = class extends CrediballElement {
     const content = snapshot?.packages?.ui?.content;
     const thresholdAttr = this.getAttribute("threshold");
     const threshold = thresholdAttr != null ? Number(thresholdAttr) : content?.lowCreditThreshold;
-    const isLow = threshold != null && snapshot?.balance != null ? snapshot.balance < threshold : !!snapshot?.isLow;
+    const isLow = isBalanceLow(snapshot?.balance ?? null, threshold, !!snapshot?.isLow);
     this.style.display = isLow ? "" : "none";
     const slot = this.shadowRoot?.querySelector("slot");
     if (slot) slot.textContent = content?.lowCreditMessage ?? "Low credit balance \u2014 top up to keep going.";
@@ -208,13 +185,7 @@ var CrediballLowCreditWarningElement = class extends CrediballElement {
 };
 
 // src/paywall.ts
-function formatMoney(amount, currency) {
-  try {
-    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
-  } catch {
-    return `${amount.toFixed(2)} ${currency}`;
-  }
-}
+import { formatMoney } from "@crediball/core";
 var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
 function currencySymbolFor(currency) {
   return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
@@ -485,11 +456,191 @@ function showError(el, message) {
   }
 }
 
+// src/referral-card.ts
+import {
+  fetchReferral,
+  captureReferral,
+  completeStoredReferral
+} from "@crediball/core";
+var HTML_ESCAPES2 = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml2(s) {
+  return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES2[c] ?? c);
+}
+var STYLE2 = `
+  :host { font: var(--crediball-font, system-ui, -apple-system, sans-serif); color: var(--crediball-ink, #1d1d1f); }
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding: 24px;
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    border-radius: var(--crediball-radius-card, 18px);
+    background: var(--crediball-canvas, #ffffff);
+  }
+  .title { font-size: 16px; font-weight: 600; }
+  .desc { font-size: 13px; color: var(--crediball-ink-muted, #7a7a7a); margin-top: 2px; }
+  .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .link {
+    flex: 1 1 180px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    border-radius: var(--crediball-radius, 9999px);
+    padding: 8px 14px;
+  }
+  button {
+    appearance: none;
+    cursor: pointer;
+    font: inherit;
+    font-size: 14px;
+    padding: 8px 16px;
+    border-radius: var(--crediball-radius, 9999px);
+    white-space: nowrap;
+  }
+  button.copy { border: 1px solid var(--crediball-hairline, #e0e0e0); background: transparent; color: var(--crediball-ink, #1d1d1f); }
+  button.share { border: none; background: var(--crediball-accent, #0066cc); color: var(--crediball-on-accent, #ffffff); }
+  .stats { display: flex; gap: 16px; font-size: 13px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .stats strong { color: var(--crediball-ink, #1d1d1f); font-weight: 600; }
+`;
+var CrediballReferralCardElement = class extends CrediballElement {
+  constructor() {
+    super();
+    this.data = null;
+    this.copied = false;
+    this.copiedTimer = null;
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      ...CrediballElement.observedAttributes,
+      "title",
+      "description",
+      "copy-label",
+      "share-label",
+      "hide-stats"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this.loadReferral();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.copiedTimer) clearTimeout(this.copiedTimer);
+  }
+  attributeChangedCallback(name) {
+    super.attributeChangedCallback(name);
+    if (!this.isConnected) return;
+    if (name === "publishable-key" || name === "user-id" || name === "api-url") {
+      void this.loadReferral();
+    }
+  }
+  /** Auto-capture ?ref=, auto-complete once a user is known, then fetch the card data. */
+  async loadReferral() {
+    const publishableKey = this.getAttribute("publishable-key");
+    const userId = this.getAttribute("user-id");
+    const apiUrl = this.getAttribute("api-url") ?? void 0;
+    if (!publishableKey) return;
+    if (this.getAttribute("capture-referrals") !== "false") {
+      captureReferral({ publishableKey, apiUrl });
+      if (userId) {
+        void completeStoredReferral({ publishableKey, userId, apiUrl }).catch(() => {
+        });
+      }
+    }
+    if (!userId) {
+      this.data = null;
+      this.render();
+      return;
+    }
+    try {
+      this.data = await fetchReferral({ publishableKey, userId, apiUrl });
+    } catch {
+      this.data = null;
+    }
+    this.render();
+  }
+  render() {
+    const d = this.data;
+    if (!d || !d.enabled || !d.code) {
+      this.shadow.innerHTML = "";
+      return;
+    }
+    const title = this.getAttribute("title") ?? "Invite friends";
+    const copyLabel = this.getAttribute("copy-label") ?? "Copy";
+    const shareLabel = this.getAttribute("share-label") ?? "Share";
+    const hideStats = this.getAttribute("hide-stats") != null;
+    const reward = d.rewardCredits ?? 0;
+    const referredReward = d.referredRewardCredits ?? 0;
+    const description = this.getAttribute("description") ?? (reward > 0 ? referredReward > 0 ? `Earn ${formatCredits(reward)} credits for every friend who joins \u2014 they get ${formatCredits(referredReward)} credits too.` : `Earn ${formatCredits(reward)} credits for every friend who joins.` : null);
+    const shown = d.link ?? d.code;
+    const rewards = d.rewards ?? { pending: 0, converted: 0, creditsEarned: 0 };
+    const canShare = typeof navigator !== "undefined" && typeof navigator.share === "function";
+    this.shadow.innerHTML = `
+      <style>${STYLE2}</style>
+      <div class="card" part="card">
+        <div>
+          <div class="title">${escapeHtml2(title)}</div>
+          ${description ? `<div class="desc">${escapeHtml2(description)}</div>` : ""}
+        </div>
+        <div class="row">
+          <div class="link" part="link" title="${escapeHtml2(shown)}">${escapeHtml2(shown)}</div>
+          <button class="copy" part="copy-button" type="button">${escapeHtml2(this.copied ? "Copied!" : copyLabel)}</button>
+          ${canShare ? `<button class="share" part="share-button" type="button">${escapeHtml2(shareLabel)}</button>` : ""}
+        </div>
+        ${hideStats ? "" : `<div class="stats">
+                 <span><strong>${d.clicks ?? 0}</strong> clicks</span>
+                 <span><strong>${rewards.converted}</strong> joined</span>
+                 ${rewards.creditsEarned > 0 ? `<span><strong>${formatCredits(rewards.creditsEarned)}</strong> credits earned</span>` : ""}
+               </div>`}
+      </div>
+    `;
+    this.shadow.querySelector("button.copy")?.addEventListener("click", () => void this.copy());
+    this.shadow.querySelector("button.share")?.addEventListener("click", () => void this.share());
+  }
+  linkOrCode() {
+    return this.data?.link ?? this.data?.code ?? null;
+  }
+  async copy() {
+    const text = this.linkOrCode();
+    if (!text || typeof navigator === "undefined" || !navigator.clipboard) return;
+    await navigator.clipboard.writeText(text);
+    this.copied = true;
+    this.render();
+    if (this.copiedTimer) clearTimeout(this.copiedTimer);
+    this.copiedTimer = setTimeout(() => {
+      this.copied = false;
+      this.render();
+    }, 2e3);
+  }
+  async share() {
+    const url = this.data?.link ?? void 0;
+    if (url && typeof navigator !== "undefined" && typeof navigator.share === "function") {
+      try {
+        await navigator.share({ url });
+        return;
+      } catch {
+      }
+    }
+    await this.copy();
+  }
+};
+
 export {
   CrediballElement,
   CrediballBalanceElement,
   CrediballUsageElement,
   CrediballTopUpButtonElement,
   CrediballLowCreditWarningElement,
-  CrediballPaywallElement
+  CrediballPaywallElement,
+  CrediballReferralCardElement
 };

package/dist/crediball-elements.iife.js

@@ -25,6 +25,7 @@ var Crediball = (() => {
     CrediballElement: () => CrediballElement,
     CrediballLowCreditWarningElement: () => CrediballLowCreditWarningElement,
     CrediballPaywallElement: () => CrediballPaywallElement,
+    CrediballReferralCardElement: () => CrediballReferralCardElement,
     CrediballTopUpButtonElement: () => CrediballTopUpButtonElement,
     CrediballUsageElement: () => CrediballUsageElement
   });
@@ -68,8 +69,21 @@ var Crediball = (() => {
     return () => window.removeEventListener(BALANCE_CHANGED_EVENT, listener);
   }
 
-  // ../core/dist/client.js
+  // ../core/dist/http.js
   var DEFAULT_API_URL = "https://www.crediball.ai/api";
+  async function errorMessage(res, fallback) {
+    const body = await res.json().catch(() => null);
+    return body && typeof body === "object" && "error" in body && String(body.error) || fallback;
+  }
+  async function fetchJson(url, init, failureLabel = `Request to ${url}`) {
+    const res = await fetch(url, init);
+    if (!res.ok) {
+      throw new Error(await errorMessage(res, `${failureLabel} failed with ${res.status}`));
+    }
+    return res.json();
+  }
+
+  // ../core/dist/client.js
   var DEFAULT_POLL_MS = 3e4;
   var SSE_HEALTHY_POLL_MULTIPLIER = 2;
   var MAX_SSE_FAILURES = 2;
@@ -85,15 +99,6 @@ var Crediball = (() => {
       error: null
     };
   }
-  async function fetchJson(url, headers) {
-    const res = await fetch(url, { headers });
-    if (!res.ok) {
-      const body = await res.json().catch(() => null);
-      const message = body && typeof body === "object" && "error" in body && String(body.error) || `Request to ${url} failed with ${res.status}`;
-      throw new Error(message);
-    }
-    return res.json();
-  }
   function computeIsLow(balance, costs, explicitThreshold) {
     if (balance == null)
       return false;
@@ -134,10 +139,10 @@ var Crediball = (() => {
         const qs = `userId=${encodeURIComponent(userId)}`;
         try {
           const [balanceRes, usageRes, costsRes, packagesRes] = await Promise.all([
-            fetchJson(`${this.apiUrl}/public/balance?${qs}`, headers),
-            fetchJson(`${this.apiUrl}/public/usage?${qs}`, headers),
-            fetchJson(`${this.apiUrl}/public/costs`, headers),
-            fetchJson(`${this.apiUrl}/public/packages?${qs}`, headers)
+            fetchJson(`${this.apiUrl}/public/balance?${qs}`, { headers }),
+            fetchJson(`${this.apiUrl}/public/usage?${qs}`, { headers }),
+            fetchJson(`${this.apiUrl}/public/costs`, { headers }),
+            fetchJson(`${this.apiUrl}/public/packages?${qs}`, { headers })
           ]);
           const costs = {};
           for (const e of costsRes.events)
@@ -188,22 +193,16 @@ var Crediball = (() => {
       this.apiUrl = (config.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, "");
       this.pollIntervalMs = config.pollIntervalMs ?? DEFAULT_POLL_MS;
     }
-    async postCheckout(path, input) {
+    postCheckout(path, input) {
       const { publishableKey, userId } = this.config;
-      const res = await fetch(`${this.apiUrl}${path}`, {
+      return fetchJson(`${this.apiUrl}${path}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${publishableKey}`
         },
         body: JSON.stringify({ userId, ...input })
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => null);
-        const message = body && typeof body === "object" && "error" in body && String(body.error) || `Checkout request failed with ${res.status}`;
-        throw new Error(message);
-      }
-      return res.json();
+      }, "Checkout request");
     }
     pause() {
       this.stopPolling();
@@ -303,8 +302,86 @@ var Crediball = (() => {
     return client;
   }
 
-  // src/base.ts
-  var THEME_VARS = [
+  // ../core/dist/referral.js
+  var storageKey = (publishableKey) => `crediball_ref_${publishableKey}`;
+  function apiBase(config) {
+    return (config.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, "");
+  }
+  function authHeaders(config) {
+    return { Authorization: `Bearer ${config.publishableKey}` };
+  }
+  function getStoredReferralCode(publishableKey) {
+    try {
+      return window.localStorage.getItem(storageKey(publishableKey));
+    } catch {
+      return null;
+    }
+  }
+  function clearStoredReferralCode(publishableKey) {
+    try {
+      window.localStorage.removeItem(storageKey(publishableKey));
+    } catch {
+    }
+  }
+  function captureReferral(config, code) {
+    let captured = code?.trim();
+    if (!captured && typeof window !== "undefined") {
+      captured = new URLSearchParams(window.location.search).get("ref")?.trim() ?? void 0;
+    }
+    if (!captured)
+      return;
+    captured = captured.toUpperCase();
+    const already = getStoredReferralCode(config.publishableKey);
+    try {
+      window.localStorage.setItem(storageKey(config.publishableKey), captured);
+    } catch {
+      return;
+    }
+    if (already === captured)
+      return;
+    void fetchJson(`${apiBase(config)}/public/referral/click`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...authHeaders(config) },
+      body: JSON.stringify({ code: captured })
+    }, "Referral click").catch(() => {
+    });
+  }
+  async function completeStoredReferral(config) {
+    const code = getStoredReferralCode(config.publishableKey);
+    if (!code || !config.userId)
+      return;
+    await fetchJson(`${apiBase(config)}/public/referral/complete`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...authHeaders(config) },
+      body: JSON.stringify({ code, userId: config.userId })
+    }, "Referral completion");
+    clearStoredReferralCode(config.publishableKey);
+  }
+  async function fetchReferral(config) {
+    const data = await fetchJson(`${apiBase(config)}/public/referral?userId=${encodeURIComponent(config.userId)}`, { headers: authHeaders(config) }, "Referral fetch");
+    if (data.enabled && data.code && !data.link && typeof window !== "undefined") {
+      data.link = `${window.location.origin}/?ref=${data.code}`;
+    }
+    return data;
+  }
+
+  // ../core/dist/format.js
+  function formatCredits(credits) {
+    return new Intl.NumberFormat(void 0).format(Math.round(credits));
+  }
+  function formatMoney(amount, currency) {
+    try {
+      return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
+    } catch {
+      return `${amount.toFixed(2)} ${currency}`;
+    }
+  }
+  function isBalanceLow(balance, threshold, fallback) {
+    return threshold != null && balance != null ? balance < threshold : fallback;
+  }
+
+  // ../core/dist/theme.js
+  var THEME_CSS_VAR_ENTRIES = [
     ["accent", "--crediball-accent", String],
     ["onAccent", "--crediball-on-accent", String],
     ["ink", "--crediball-ink", String],
@@ -314,11 +391,25 @@ var Crediball = (() => {
     ["radiusCard", "--crediball-radius-card", (v) => `${v}px`],
     ["fontStack", "--crediball-font", String]
   ];
+  function themeToCssVars(theme) {
+    const vars = {};
+    if (!theme)
+      return vars;
+    for (const [key, cssVar, fmt] of THEME_CSS_VAR_ENTRIES) {
+      const value = theme[key];
+      if (value != null && value !== "")
+        vars[cssVar] = fmt(value);
+    }
+    return vars;
+  }
   function loadRemoteFont(url) {
-    if (typeof document === "undefined") return;
+    if (typeof document === "undefined")
+      return;
     const existing = document.querySelector("link[data-crediball-font]");
-    if (existing?.href === url) return;
-    if (existing) existing.href = url;
+    if (existing?.href === url)
+      return;
+    if (existing)
+      existing.href = url;
     else {
       const link = document.createElement("link");
       link.rel = "stylesheet";
@@ -327,6 +418,8 @@ var Crediball = (() => {
       document.head.appendChild(link);
     }
   }
+
+  // src/base.ts
   var _CrediballElement = class _CrediballElement extends HTMLElement {
     constructor() {
       super(...arguments);
@@ -387,9 +480,8 @@ var Crediball = (() => {
       if (this.getAttribute("apply-remote-theme") === "false") return;
       const theme = this.getSnapshot()?.packages?.ui?.theme;
       if (!theme) return;
-      for (const [key, cssVar, fmt] of THEME_VARS) {
-        const value = theme[key];
-        if (value != null && value !== "") this.style.setProperty(cssVar, fmt(value));
+      for (const [cssVar, value] of Object.entries(themeToCssVars(theme))) {
+        this.style.setProperty(cssVar, value);
       }
       if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
     }
@@ -411,11 +503,6 @@ var Crediball = (() => {
   ]);
   var CrediballElement = _CrediballElement;
 
-  // src/format.ts
-  function formatCredits(credits) {
-    return new Intl.NumberFormat(void 0).format(Math.round(credits));
-  }
-
   // src/balance.ts
   var CrediballBalanceElement = class extends CrediballElement {
     constructor() {
@@ -502,7 +589,7 @@ var Crediball = (() => {
       const content = snapshot?.packages?.ui?.content;
       const thresholdAttr = this.getAttribute("threshold");
       const threshold = thresholdAttr != null ? Number(thresholdAttr) : content?.lowCreditThreshold;
-      const isLow = threshold != null && snapshot?.balance != null ? snapshot.balance < threshold : !!snapshot?.isLow;
+      const isLow = isBalanceLow(snapshot?.balance ?? null, threshold, !!snapshot?.isLow);
       this.style.display = isLow ? "" : "none";
       const slot = this.shadowRoot?.querySelector("slot");
       if (slot) slot.textContent = content?.lowCreditMessage ?? "Low credit balance \u2014 top up to keep going.";
@@ -510,13 +597,6 @@ var Crediball = (() => {
   };
 
   // src/paywall.ts
-  function formatMoney(amount, currency) {
-    try {
-      return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
-    } catch {
-      return `${amount.toFixed(2)} ${currency}`;
-    }
-  }
   var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
   function currencySymbolFor(currency) {
     return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
@@ -787,6 +867,180 @@ var Crediball = (() => {
     }
   }
 
+  // src/referral-card.ts
+  var HTML_ESCAPES2 = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  function escapeHtml2(s) {
+    return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES2[c] ?? c);
+  }
+  var STYLE2 = `
+  :host { font: var(--crediball-font, system-ui, -apple-system, sans-serif); color: var(--crediball-ink, #1d1d1f); }
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding: 24px;
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    border-radius: var(--crediball-radius-card, 18px);
+    background: var(--crediball-canvas, #ffffff);
+  }
+  .title { font-size: 16px; font-weight: 600; }
+  .desc { font-size: 13px; color: var(--crediball-ink-muted, #7a7a7a); margin-top: 2px; }
+  .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .link {
+    flex: 1 1 180px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    border-radius: var(--crediball-radius, 9999px);
+    padding: 8px 14px;
+  }
+  button {
+    appearance: none;
+    cursor: pointer;
+    font: inherit;
+    font-size: 14px;
+    padding: 8px 16px;
+    border-radius: var(--crediball-radius, 9999px);
+    white-space: nowrap;
+  }
+  button.copy { border: 1px solid var(--crediball-hairline, #e0e0e0); background: transparent; color: var(--crediball-ink, #1d1d1f); }
+  button.share { border: none; background: var(--crediball-accent, #0066cc); color: var(--crediball-on-accent, #ffffff); }
+  .stats { display: flex; gap: 16px; font-size: 13px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .stats strong { color: var(--crediball-ink, #1d1d1f); font-weight: 600; }
+`;
+  var CrediballReferralCardElement = class extends CrediballElement {
+    constructor() {
+      super();
+      this.data = null;
+      this.copied = false;
+      this.copiedTimer = null;
+      this.shadow = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+      return [
+        ...CrediballElement.observedAttributes,
+        "title",
+        "description",
+        "copy-label",
+        "share-label",
+        "hide-stats"
+      ];
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      void this.loadReferral();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      if (this.copiedTimer) clearTimeout(this.copiedTimer);
+    }
+    attributeChangedCallback(name) {
+      super.attributeChangedCallback(name);
+      if (!this.isConnected) return;
+      if (name === "publishable-key" || name === "user-id" || name === "api-url") {
+        void this.loadReferral();
+      }
+    }
+    /** Auto-capture ?ref=, auto-complete once a user is known, then fetch the card data. */
+    async loadReferral() {
+      const publishableKey = this.getAttribute("publishable-key");
+      const userId = this.getAttribute("user-id");
+      const apiUrl = this.getAttribute("api-url") ?? void 0;
+      if (!publishableKey) return;
+      if (this.getAttribute("capture-referrals") !== "false") {
+        captureReferral({ publishableKey, apiUrl });
+        if (userId) {
+          void completeStoredReferral({ publishableKey, userId, apiUrl }).catch(() => {
+          });
+        }
+      }
+      if (!userId) {
+        this.data = null;
+        this.render();
+        return;
+      }
+      try {
+        this.data = await fetchReferral({ publishableKey, userId, apiUrl });
+      } catch {
+        this.data = null;
+      }
+      this.render();
+    }
+    render() {
+      const d = this.data;
+      if (!d || !d.enabled || !d.code) {
+        this.shadow.innerHTML = "";
+        return;
+      }
+      const title = this.getAttribute("title") ?? "Invite friends";
+      const copyLabel = this.getAttribute("copy-label") ?? "Copy";
+      const shareLabel = this.getAttribute("share-label") ?? "Share";
+      const hideStats = this.getAttribute("hide-stats") != null;
+      const reward = d.rewardCredits ?? 0;
+      const referredReward = d.referredRewardCredits ?? 0;
+      const description = this.getAttribute("description") ?? (reward > 0 ? referredReward > 0 ? `Earn ${formatCredits(reward)} credits for every friend who joins \u2014 they get ${formatCredits(referredReward)} credits too.` : `Earn ${formatCredits(reward)} credits for every friend who joins.` : null);
+      const shown = d.link ?? d.code;
+      const rewards = d.rewards ?? { pending: 0, converted: 0, creditsEarned: 0 };
+      const canShare = typeof navigator !== "undefined" && typeof navigator.share === "function";
+      this.shadow.innerHTML = `
+      <style>${STYLE2}</style>
+      <div class="card" part="card">
+        <div>
+          <div class="title">${escapeHtml2(title)}</div>
+          ${description ? `<div class="desc">${escapeHtml2(description)}</div>` : ""}
+        </div>
+        <div class="row">
+          <div class="link" part="link" title="${escapeHtml2(shown)}">${escapeHtml2(shown)}</div>
+          <button class="copy" part="copy-button" type="button">${escapeHtml2(this.copied ? "Copied!" : copyLabel)}</button>
+          ${canShare ? `<button class="share" part="share-button" type="button">${escapeHtml2(shareLabel)}</button>` : ""}
+        </div>
+        ${hideStats ? "" : `<div class="stats">
+                 <span><strong>${d.clicks ?? 0}</strong> clicks</span>
+                 <span><strong>${rewards.converted}</strong> joined</span>
+                 ${rewards.creditsEarned > 0 ? `<span><strong>${formatCredits(rewards.creditsEarned)}</strong> credits earned</span>` : ""}
+               </div>`}
+      </div>
+    `;
+      this.shadow.querySelector("button.copy")?.addEventListener("click", () => void this.copy());
+      this.shadow.querySelector("button.share")?.addEventListener("click", () => void this.share());
+    }
+    linkOrCode() {
+      return this.data?.link ?? this.data?.code ?? null;
+    }
+    async copy() {
+      const text = this.linkOrCode();
+      if (!text || typeof navigator === "undefined" || !navigator.clipboard) return;
+      await navigator.clipboard.writeText(text);
+      this.copied = true;
+      this.render();
+      if (this.copiedTimer) clearTimeout(this.copiedTimer);
+      this.copiedTimer = setTimeout(() => {
+        this.copied = false;
+        this.render();
+      }, 2e3);
+    }
+    async share() {
+      const url = this.data?.link ?? void 0;
+      if (url && typeof navigator !== "undefined" && typeof navigator.share === "function") {
+        try {
+          await navigator.share({ url });
+          return;
+        } catch {
+        }
+      }
+      await this.copy();
+    }
+  };
+
   // src/register.ts
   function define(name, ctor) {
     if (!customElements.get(name)) customElements.define(name, ctor);
@@ -796,5 +1050,6 @@ var Crediball = (() => {
   define("crediball-topup-button", CrediballTopUpButtonElement);
   define("crediball-low-credit-warning", CrediballLowCreditWarningElement);
   define("crediball-paywall", CrediballPaywallElement);
+  define("crediball-referral-card", CrediballReferralCardElement);
   return __toCommonJS(iife_exports);
 })();

package/dist/index.d.ts

@@ -125,4 +125,39 @@ declare class CrediballPaywallElement extends CrediballElement {
     private redirect;
 }
 
-export { CrediballBalanceElement, CrediballElement, CrediballLowCreditWarningElement, CrediballPaywallElement, CrediballTopUpButtonElement, CrediballUsageElement };
+/**
+ * <crediball-referral-card publishable-key="cb_pub_..." user-id="u123"></crediball-referral-card>
+ *
+ * Drop-in invite card — the web-component sibling of @crediball/react's
+ * <ReferralCard/>, wrapping the same @crediball/core referral functions:
+ *  - lazily creates + fetches the user's referral code/link/stats,
+ *  - AUTO-CAPTURES a `?ref=CODE` visit into localStorage and, once a user-id is
+ *    present, attaches it as a pending referral (set `capture-referrals="false"`
+ *    to opt out and drive capture/completion yourself),
+ *  - renders nothing while loading or when the referral program is disabled in
+ *    the dashboard.
+ *
+ * Rewards are only ever granted server-side, when the dashboard-configured
+ * conversion condition is observed on a secret-key call — a browser can't
+ * trigger a payout. Optional attributes: title, description, copy-label,
+ * share-label, hide-stats.
+ */
+declare class CrediballReferralCardElement extends CrediballElement {
+    private shadow;
+    private data;
+    private copied;
+    private copiedTimer;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Auto-capture ?ref=, auto-complete once a user is known, then fetch the card data. */
+    private loadReferral;
+    protected render(): void;
+    private linkOrCode;
+    private copy;
+    private share;
+}
+
+export { CrediballBalanceElement, CrediballElement, CrediballLowCreditWarningElement, CrediballPaywallElement, CrediballReferralCardElement, CrediballTopUpButtonElement, CrediballUsageElement };

package/dist/index.js

@@ -3,14 +3,16 @@ import {
   CrediballElement,
   CrediballLowCreditWarningElement,
   CrediballPaywallElement,
+  CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-KXVW7PIU.js";
+} from "./chunk-6CNCZGCF.js";
 export {
   CrediballBalanceElement,
   CrediballElement,
   CrediballLowCreditWarningElement,
   CrediballPaywallElement,
+  CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
 };

package/dist/register.js

@@ -2,9 +2,10 @@ import {
   CrediballBalanceElement,
   CrediballLowCreditWarningElement,
   CrediballPaywallElement,
+  CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-KXVW7PIU.js";
+} from "./chunk-6CNCZGCF.js";
 
 // src/register.ts
 function define(name, ctor) {
@@ -15,3 +16,4 @@ define("crediball-usage", CrediballUsageElement);
 define("crediball-topup-button", CrediballTopUpButtonElement);
 define("crediball-low-credit-warning", CrediballLowCreditWarningElement);
 define("crediball-paywall", CrediballPaywallElement);
+define("crediball-referral-card", CrediballReferralCardElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -56,7 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@crediball/core": "^0.3.0"
+    "@crediball/core": "^0.4.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",