@crediball/elements 0.1.0

package/dist/chunk-RBGPXBOH.js

@@ -0,0 +1,341 @@
+// src/base.ts
+import { getCrediballClient } from "@crediball/core";
+var _CrediballElement = class _CrediballElement extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.client = null;
+    this.unsubscribe = null;
+  }
+  static get observedAttributes() {
+    return [..._CrediballElement.CLIENT_ATTRS];
+  }
+  connectedCallback() {
+    this.connectClient();
+  }
+  disconnectedCallback() {
+    this.teardownClient();
+  }
+  /**
+   * Only reconnect the shared client when a connection-relevant attribute
+   * changes (publishable-key/user-id/api-url/low-credit-threshold). Subclasses
+   * add their own observed attributes (e.g. "show", "threshold", "open") —
+   * those should just re-render, not tear down and refetch the client.
+   */
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (_CrediballElement.CLIENT_ATTRS.has(name)) {
+      this.connectClient();
+    } else {
+      this.render();
+    }
+  }
+  connectClient() {
+    this.teardownClient();
+    const publishableKey = this.getAttribute("publishable-key");
+    const userId = this.getAttribute("user-id");
+    if (!publishableKey || !userId) {
+      this.render();
+      return;
+    }
+    const apiUrl = this.getAttribute("api-url") ?? void 0;
+    const thresholdAttr = this.getAttribute("low-credit-threshold");
+    const lowCreditThreshold = thresholdAttr != null ? Number(thresholdAttr) : void 0;
+    this.client = getCrediballClient({ publishableKey, userId, apiUrl, lowCreditThreshold });
+    this.client.start();
+    this.unsubscribe = this.client.subscribe(() => this.render());
+    this.render();
+  }
+  teardownClient() {
+    this.client?.stop();
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    this.client = null;
+  }
+  getSnapshot() {
+    return this.client?.getSnapshot() ?? null;
+  }
+};
+_CrediballElement.CLIENT_ATTRS = /* @__PURE__ */ new Set([
+  "publishable-key",
+  "user-id",
+  "api-url",
+  "low-credit-threshold"
+]);
+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() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<style>:host{font:inherit;color:inherit;}</style><span part="value"></span>`;
+    this.valueEl = shadow.querySelector("span");
+  }
+  render() {
+    const snapshot = this.getSnapshot();
+    this.valueEl.textContent = snapshot?.balance == null ? "\u2014" : formatCredits(snapshot.balance);
+  }
+};
+
+// src/usage.ts
+var CrediballUsageElement = class extends CrediballElement {
+  static get observedAttributes() {
+    return [...CrediballElement.observedAttributes, "show"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<style>:host{font:inherit;color:inherit;}</style><span part="value"></span>`;
+    this.valueEl = shadow.querySelector("span");
+  }
+  render() {
+    const snapshot = this.getSnapshot();
+    const show = this.getAttribute("show") === "remaining" ? "remaining" : "used";
+    const value = show === "remaining" ? snapshot?.remaining : snapshot?.usage?.usedCredits ?? null;
+    this.valueEl.textContent = value == null ? "\u2014" : formatCredits(value);
+  }
+};
+
+// src/topup-button.ts
+var CrediballTopUpButtonElement = class extends CrediballElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = `
+      <style>
+        :host { font: inherit; }
+        button {
+          font: inherit;
+          appearance: none;
+          border: none;
+          cursor: pointer;
+          color: var(--crediball-on-accent, #ffffff);
+          background: var(--crediball-accent, #0066cc);
+          border-radius: var(--crediball-radius, 9999px);
+          padding: 0.5em 1.1em;
+        }
+      </style>
+      <button part="button" type="button"><slot>Add credits</slot></button>
+    `;
+    this.button = shadow.querySelector("button");
+    this.button.addEventListener("click", () => this.handleClick());
+  }
+  render() {
+  }
+  handleClick() {
+    const paywall = document.querySelector("crediball-paywall");
+    if (paywall?.open) {
+      paywall.open();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("crediball-topup-click", { bubbles: true, composed: true }));
+  }
+};
+
+// src/low-credit-warning.ts
+var CrediballLowCreditWarningElement = class extends CrediballElement {
+  static get observedAttributes() {
+    return [...CrediballElement.observedAttributes, "threshold"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<style>:host{font:inherit;color:inherit;}</style><span part="value"><slot>Low credit balance \u2014 top up to keep going.</slot></span>`;
+  }
+  render() {
+    const snapshot = this.getSnapshot();
+    const thresholdAttr = this.getAttribute("threshold");
+    const threshold = thresholdAttr != null ? Number(thresholdAttr) : void 0;
+    const isLow = threshold != null && snapshot?.balance != null ? snapshot.balance < threshold : !!snapshot?.isLow;
+    this.style.display = isLow ? "" : "none";
+  }
+};
+
+// 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 HTML_ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c] ?? c);
+}
+var STYLE = `
+  :host { font: var(--crediball-font, system-ui, -apple-system, sans-serif); }
+  .overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 2147483647;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: var(--crediball-overlay, rgba(0, 0, 0, 0.4));
+  }
+  :host([open]) .overlay { display: flex; }
+  .card {
+    width: 100%;
+    max-width: 420px;
+    padding: 32px;
+    border-radius: var(--crediball-radius-card, 18px);
+    background: var(--crediball-canvas, #ffffff);
+    color: var(--crediball-ink, #1d1d1f);
+  }
+  .balance-row { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--crediball-hairline, #e0e0e0); }
+  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crediball-ink-muted, #7a7a7a); margin-bottom: 4px; }
+  .balance-value { font-size: 22px; font-weight: 600; }
+  h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
+  p.desc { margin: 8px 0 0; font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
+  button.option {
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--crediball-accent, #0066cc);
+    color: var(--crediball-on-accent, #ffffff);
+    font: inherit;
+    font-size: 17px;
+    padding: 11px 22px;
+    border-radius: var(--crediball-radius, 9999px);
+  }
+  button.option .meta { opacity: 0.85; font-size: 14px; }
+  button.close {
+    width: 100%;
+    margin-top: 12px;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    color: var(--crediball-ink-muted, #7a7a7a);
+    font: inherit;
+    font-size: 14px;
+    padding: 11px 22px;
+    border-radius: var(--crediball-radius, 9999px);
+  }
+`;
+var CrediballPaywallElement = class extends CrediballElement {
+  static get observedAttributes() {
+    return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("crediball-close", { bubbles: true, composed: true }));
+  }
+  render() {
+    const isOpen = this.hasAttribute("open");
+    if (!isOpen) {
+      this.shadow.innerHTML = "";
+      return;
+    }
+    const snapshot = this.getSnapshot();
+    const pkgs = snapshot?.packages;
+    const currency = pkgs?.currency ?? "EUR";
+    const title = this.getAttribute("title") ?? "You need more credits to continue.";
+    const description = this.getAttribute("description") ?? "Top up to keep using this feature.";
+    const amountsAttr = this.getAttribute("amounts");
+    const legacyAmounts = amountsAttr ? amountsAttr.split(",").map((s) => Number(s.trim())).filter((n) => Number.isFinite(n)) : [5, 10];
+    const packages = pkgs?.packages ?? [];
+    const plans = pkgs?.activeSubscription ? [] : pkgs?.subscriptionPlans ?? [];
+    this.shadow.innerHTML = `
+      <style>${STYLE}</style>
+      <div class="overlay" part="overlay">
+        <div class="card" part="card">
+          ${snapshot?.balance != null ? `<div class="balance-row">
+                   <div class="eyebrow">Your balance</div>
+                   <div class="balance-value">${formatCredits(snapshot.balance)} credits</div>
+                 </div>` : ""}
+          <h3>${escapeHtml(title)}</h3>
+          <p class="desc">${escapeHtml(description)}</p>
+          ${plans.length ? `<div class="list">
+                   ${plans.map(
+      (p) => `
+                     <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
+                       <span>${escapeHtml(p.name)}</span>
+                       <span class="meta">${formatMoney(p.price, currency)}/${p.period === "monthly" ? "mo" : "yr"} \xB7 ${formatCredits(p.credits)} cr</span>
+                     </button>`
+    ).join("")}
+                 </div>` : ""}
+          <div class="list">
+            ${packages.length ? packages.map(
+      (p) => `
+                  <button class="option" data-kind="package" data-id="${escapeHtml(p.id)}">
+                    <span>${escapeHtml(p.name)}</span>
+                    <span class="meta">${formatMoney(p.price, currency)} \xB7 ${formatCredits(p.credits)} cr</span>
+                  </button>`
+    ).join("") : legacyAmounts.map(
+      (a) => `
+                  <button class="option" data-kind="amount" data-amount="${a}">
+                    <span>Add ${a}</span>
+                  </button>`
+    ).join("")}
+          </div>
+          <button class="close" part="close" type="button">Not now</button>
+        </div>
+      </div>
+    `;
+    this.shadow.querySelector(".overlay")?.addEventListener("click", (e) => {
+      if (e.target === e.currentTarget) this.close();
+    });
+    this.shadow.querySelector(".close")?.addEventListener("click", () => this.close());
+    this.shadow.querySelectorAll("button.option").forEach((el) => {
+      const btn = el;
+      btn.addEventListener("click", () => {
+        const kind = btn.dataset.kind;
+        if (kind === "package") {
+          const pkg = packages.find((p) => p.id === btn.dataset.id);
+          if (pkg) {
+            this.dispatchEvent(
+              new CustomEvent("crediball-select-package", { detail: pkg, bubbles: true, composed: true })
+            );
+          }
+        } else if (kind === "plan") {
+          const plan = plans.find((p) => p.id === btn.dataset.id);
+          if (plan) {
+            this.dispatchEvent(
+              new CustomEvent("crediball-select-plan", { detail: plan, bubbles: true, composed: true })
+            );
+          }
+        } else if (kind === "amount") {
+          const amount = Number(btn.dataset.amount);
+          this.dispatchEvent(
+            new CustomEvent("crediball-topup", { detail: { amount }, bubbles: true, composed: true })
+          );
+        }
+      });
+    });
+  }
+};
+
+export {
+  CrediballElement,
+  CrediballBalanceElement,
+  CrediballUsageElement,
+  CrediballTopUpButtonElement,
+  CrediballLowCreditWarningElement,
+  CrediballPaywallElement
+};

package/dist/crediball-elements.iife.js

@@ -0,0 +1,625 @@
+"use strict";
+var Crediball = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/iife.ts
+  var iife_exports = {};
+  __export(iife_exports, {
+    CrediballBalanceElement: () => CrediballBalanceElement,
+    CrediballElement: () => CrediballElement,
+    CrediballLowCreditWarningElement: () => CrediballLowCreditWarningElement,
+    CrediballPaywallElement: () => CrediballPaywallElement,
+    CrediballTopUpButtonElement: () => CrediballTopUpButtonElement,
+    CrediballUsageElement: () => CrediballUsageElement
+  });
+
+  // ../core/dist/store.js
+  function createStore(initial) {
+    let snapshot = initial;
+    const listeners = /* @__PURE__ */ new Set();
+    return {
+      get: () => snapshot,
+      set(next) {
+        snapshot = next;
+        listeners.forEach((fn) => fn());
+      },
+      update(fn) {
+        snapshot = fn(snapshot);
+        listeners.forEach((listener) => listener());
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      }
+    };
+  }
+
+  // ../core/dist/events.js
+  var INSUFFICIENT_CREDITS_EVENT = "crediball:insufficient-credits";
+  var BALANCE_CHANGED_EVENT = "crediball:balance-changed";
+  function subscribeInsufficientCredits(listener) {
+    if (typeof window === "undefined")
+      return () => {
+      };
+    window.addEventListener(INSUFFICIENT_CREDITS_EVENT, listener);
+    return () => window.removeEventListener(INSUFFICIENT_CREDITS_EVENT, listener);
+  }
+  function subscribeBalanceChanged(listener) {
+    if (typeof window === "undefined")
+      return () => {
+      };
+    window.addEventListener(BALANCE_CHANGED_EVENT, listener);
+    return () => window.removeEventListener(BALANCE_CHANGED_EVENT, listener);
+  }
+
+  // ../core/dist/client.js
+  var DEFAULT_API_URL = "https://crediball.app/api";
+  var DEFAULT_POLL_MS = 3e4;
+  var SSE_HEALTHY_POLL_MULTIPLIER = 2;
+  var MAX_SSE_FAILURES = 2;
+  function emptySnapshot() {
+    return {
+      balance: null,
+      usage: null,
+      remaining: null,
+      costs: {},
+      packages: null,
+      isLow: false,
+      loading: true,
+      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;
+    const threshold = explicitThreshold ?? Object.values(costs).reduce((max, c) => Math.max(max, c.costCredits), 0);
+    if (threshold <= 0)
+      return false;
+    return balance < threshold;
+  }
+  var CrediballClientImpl = class {
+    constructor(config, onDestroy) {
+      this.config = config;
+      this.onDestroy = onDestroy;
+      this.store = createStore(emptySnapshot());
+      this.refCount = 0;
+      this.pollTimer = null;
+      this.eventSource = null;
+      this.sseFailures = 0;
+      this.sseHealthy = false;
+      this.teardownListeners = [];
+      this.getSnapshot = () => {
+        return this.store.get();
+      };
+      this.subscribe = (fn) => {
+        return this.store.subscribe(fn);
+      };
+      this.costOf = (event) => {
+        return this.store.get().costs[event]?.costCredits;
+      };
+      this.refresh = async () => {
+        const { publishableKey, userId } = this.config;
+        const headers = { Authorization: `Bearer ${publishableKey}` };
+        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)
+          ]);
+          const costs = {};
+          for (const e of costsRes.events)
+            costs[e.key] = { label: e.label, costCredits: e.costCredits };
+          const balance = balanceRes.balance;
+          this.store.set({
+            balance,
+            usage: usageRes,
+            remaining: balance,
+            costs,
+            packages: packagesRes,
+            isLow: computeIsLow(balance, costs, this.config.lowCreditThreshold),
+            loading: false,
+            error: null
+          });
+        } catch (err) {
+          this.store.update((prev) => ({
+            ...prev,
+            loading: false,
+            error: err instanceof Error ? err : new Error(String(err))
+          }));
+        }
+      };
+      this.start = () => {
+        this.refCount += 1;
+        if (this.refCount > 1)
+          return;
+        void this.refresh();
+        this.startPolling();
+        if ((this.config.realtime ?? "sse") !== "off")
+          this.connectSse();
+        this.teardownListeners = [
+          subscribeInsufficientCredits(() => void this.refresh()),
+          subscribeBalanceChanged(() => void this.refresh()),
+          ...this.visibilityListeners()
+        ];
+      };
+      this.stop = () => {
+        this.refCount = Math.max(0, this.refCount - 1);
+        if (this.refCount === 0)
+          this.pause();
+      };
+      this.destroy = () => {
+        this.refCount = 0;
+        this.pause();
+        this.onDestroy();
+      };
+      this.apiUrl = (config.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, "");
+      this.pollIntervalMs = config.pollIntervalMs ?? DEFAULT_POLL_MS;
+    }
+    pause() {
+      this.stopPolling();
+      this.disconnectSse();
+      this.teardownListeners.forEach((fn) => fn());
+      this.teardownListeners = [];
+    }
+    effectivePollIntervalMs() {
+      return this.sseHealthy ? this.pollIntervalMs * SSE_HEALTHY_POLL_MULTIPLIER : this.pollIntervalMs;
+    }
+    startPolling() {
+      this.stopPolling();
+      if (typeof document !== "undefined" && document.visibilityState === "hidden")
+        return;
+      this.pollTimer = setInterval(() => void this.refresh(), this.effectivePollIntervalMs());
+    }
+    stopPolling() {
+      if (this.pollTimer) {
+        clearInterval(this.pollTimer);
+        this.pollTimer = null;
+      }
+    }
+    visibilityListeners() {
+      if (typeof document === "undefined" || typeof window === "undefined")
+        return [];
+      const onVisibilityChange = () => {
+        if (document.visibilityState === "hidden") {
+          this.stopPolling();
+        } else {
+          void this.refresh();
+          this.startPolling();
+        }
+      };
+      const onOnline = () => void this.refresh();
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      window.addEventListener("online", onOnline);
+      return [
+        () => document.removeEventListener("visibilitychange", onVisibilityChange),
+        () => window.removeEventListener("online", onOnline)
+      ];
+    }
+    connectSse() {
+      if (typeof EventSource === "undefined")
+        return;
+      const { publishableKey, userId } = this.config;
+      const url = `${this.apiUrl}/public/stream?key=${encodeURIComponent(publishableKey)}&userId=${encodeURIComponent(userId)}`;
+      const es = new EventSource(url);
+      this.eventSource = es;
+      es.addEventListener("update", (ev) => {
+        this.sseFailures = 0;
+        if (!this.sseHealthy) {
+          this.sseHealthy = true;
+          this.startPolling();
+        }
+        try {
+          const data = JSON.parse(ev.data);
+          this.store.update((prev) => {
+            const balance = data.balance ?? prev.balance;
+            const usage = data.usage ?? prev.usage;
+            return {
+              ...prev,
+              balance,
+              usage,
+              remaining: balance,
+              isLow: computeIsLow(balance, prev.costs, this.config.lowCreditThreshold)
+            };
+          });
+        } catch {
+        }
+      });
+      es.onerror = () => {
+        this.sseFailures += 1;
+        this.sseHealthy = false;
+        this.startPolling();
+        if (this.sseFailures >= MAX_SSE_FAILURES) {
+          this.disconnectSse();
+        }
+      };
+    }
+    disconnectSse() {
+      this.eventSource?.close();
+      this.eventSource = null;
+      this.sseHealthy = false;
+    }
+  };
+  var registry = /* @__PURE__ */ new Map();
+  function registryKey(config) {
+    return `${config.apiUrl ?? DEFAULT_API_URL}::${config.publishableKey}::${config.userId}`;
+  }
+  function getCrediballClient(config) {
+    const key = registryKey(config);
+    const existing = registry.get(key);
+    if (existing)
+      return existing;
+    const client = new CrediballClientImpl(config, () => registry.delete(key));
+    registry.set(key, client);
+    return client;
+  }
+
+  // src/base.ts
+  var _CrediballElement = class _CrediballElement extends HTMLElement {
+    constructor() {
+      super(...arguments);
+      this.client = null;
+      this.unsubscribe = null;
+    }
+    static get observedAttributes() {
+      return [..._CrediballElement.CLIENT_ATTRS];
+    }
+    connectedCallback() {
+      this.connectClient();
+    }
+    disconnectedCallback() {
+      this.teardownClient();
+    }
+    /**
+     * Only reconnect the shared client when a connection-relevant attribute
+     * changes (publishable-key/user-id/api-url/low-credit-threshold). Subclasses
+     * add their own observed attributes (e.g. "show", "threshold", "open") —
+     * those should just re-render, not tear down and refetch the client.
+     */
+    attributeChangedCallback(name) {
+      if (!this.isConnected) return;
+      if (_CrediballElement.CLIENT_ATTRS.has(name)) {
+        this.connectClient();
+      } else {
+        this.render();
+      }
+    }
+    connectClient() {
+      this.teardownClient();
+      const publishableKey = this.getAttribute("publishable-key");
+      const userId = this.getAttribute("user-id");
+      if (!publishableKey || !userId) {
+        this.render();
+        return;
+      }
+      const apiUrl = this.getAttribute("api-url") ?? void 0;
+      const thresholdAttr = this.getAttribute("low-credit-threshold");
+      const lowCreditThreshold = thresholdAttr != null ? Number(thresholdAttr) : void 0;
+      this.client = getCrediballClient({ publishableKey, userId, apiUrl, lowCreditThreshold });
+      this.client.start();
+      this.unsubscribe = this.client.subscribe(() => this.render());
+      this.render();
+    }
+    teardownClient() {
+      this.client?.stop();
+      this.unsubscribe?.();
+      this.unsubscribe = null;
+      this.client = null;
+    }
+    getSnapshot() {
+      return this.client?.getSnapshot() ?? null;
+    }
+  };
+  _CrediballElement.CLIENT_ATTRS = /* @__PURE__ */ new Set([
+    "publishable-key",
+    "user-id",
+    "api-url",
+    "low-credit-threshold"
+  ]);
+  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() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `<style>:host{font:inherit;color:inherit;}</style><span part="value"></span>`;
+      this.valueEl = shadow.querySelector("span");
+    }
+    render() {
+      const snapshot = this.getSnapshot();
+      this.valueEl.textContent = snapshot?.balance == null ? "\u2014" : formatCredits(snapshot.balance);
+    }
+  };
+
+  // src/usage.ts
+  var CrediballUsageElement = class extends CrediballElement {
+    static get observedAttributes() {
+      return [...CrediballElement.observedAttributes, "show"];
+    }
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `<style>:host{font:inherit;color:inherit;}</style><span part="value"></span>`;
+      this.valueEl = shadow.querySelector("span");
+    }
+    render() {
+      const snapshot = this.getSnapshot();
+      const show = this.getAttribute("show") === "remaining" ? "remaining" : "used";
+      const value = show === "remaining" ? snapshot?.remaining : snapshot?.usage?.usedCredits ?? null;
+      this.valueEl.textContent = value == null ? "\u2014" : formatCredits(value);
+    }
+  };
+
+  // src/topup-button.ts
+  var CrediballTopUpButtonElement = class extends CrediballElement {
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+      <style>
+        :host { font: inherit; }
+        button {
+          font: inherit;
+          appearance: none;
+          border: none;
+          cursor: pointer;
+          color: var(--crediball-on-accent, #ffffff);
+          background: var(--crediball-accent, #0066cc);
+          border-radius: var(--crediball-radius, 9999px);
+          padding: 0.5em 1.1em;
+        }
+      </style>
+      <button part="button" type="button"><slot>Add credits</slot></button>
+    `;
+      this.button = shadow.querySelector("button");
+      this.button.addEventListener("click", () => this.handleClick());
+    }
+    render() {
+    }
+    handleClick() {
+      const paywall = document.querySelector("crediball-paywall");
+      if (paywall?.open) {
+        paywall.open();
+        return;
+      }
+      this.dispatchEvent(new CustomEvent("crediball-topup-click", { bubbles: true, composed: true }));
+    }
+  };
+
+  // src/low-credit-warning.ts
+  var CrediballLowCreditWarningElement = class extends CrediballElement {
+    static get observedAttributes() {
+      return [...CrediballElement.observedAttributes, "threshold"];
+    }
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `<style>:host{font:inherit;color:inherit;}</style><span part="value"><slot>Low credit balance \u2014 top up to keep going.</slot></span>`;
+    }
+    render() {
+      const snapshot = this.getSnapshot();
+      const thresholdAttr = this.getAttribute("threshold");
+      const threshold = thresholdAttr != null ? Number(thresholdAttr) : void 0;
+      const isLow = threshold != null && snapshot?.balance != null ? snapshot.balance < threshold : !!snapshot?.isLow;
+      this.style.display = isLow ? "" : "none";
+    }
+  };
+
+  // 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 HTML_ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c] ?? c);
+  }
+  var STYLE = `
+  :host { font: var(--crediball-font, system-ui, -apple-system, sans-serif); }
+  .overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 2147483647;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: var(--crediball-overlay, rgba(0, 0, 0, 0.4));
+  }
+  :host([open]) .overlay { display: flex; }
+  .card {
+    width: 100%;
+    max-width: 420px;
+    padding: 32px;
+    border-radius: var(--crediball-radius-card, 18px);
+    background: var(--crediball-canvas, #ffffff);
+    color: var(--crediball-ink, #1d1d1f);
+  }
+  .balance-row { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--crediball-hairline, #e0e0e0); }
+  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crediball-ink-muted, #7a7a7a); margin-bottom: 4px; }
+  .balance-value { font-size: 22px; font-weight: 600; }
+  h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
+  p.desc { margin: 8px 0 0; font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
+  button.option {
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--crediball-accent, #0066cc);
+    color: var(--crediball-on-accent, #ffffff);
+    font: inherit;
+    font-size: 17px;
+    padding: 11px 22px;
+    border-radius: var(--crediball-radius, 9999px);
+  }
+  button.option .meta { opacity: 0.85; font-size: 14px; }
+  button.close {
+    width: 100%;
+    margin-top: 12px;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    color: var(--crediball-ink-muted, #7a7a7a);
+    font: inherit;
+    font-size: 14px;
+    padding: 11px 22px;
+    border-radius: var(--crediball-radius, 9999px);
+  }
+`;
+  var CrediballPaywallElement = class extends CrediballElement {
+    static get observedAttributes() {
+      return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
+    }
+    constructor() {
+      super();
+      this.shadow = this.attachShadow({ mode: "open" });
+    }
+    open() {
+      this.setAttribute("open", "");
+    }
+    close() {
+      this.removeAttribute("open");
+      this.dispatchEvent(new CustomEvent("crediball-close", { bubbles: true, composed: true }));
+    }
+    render() {
+      const isOpen = this.hasAttribute("open");
+      if (!isOpen) {
+        this.shadow.innerHTML = "";
+        return;
+      }
+      const snapshot = this.getSnapshot();
+      const pkgs = snapshot?.packages;
+      const currency = pkgs?.currency ?? "EUR";
+      const title = this.getAttribute("title") ?? "You need more credits to continue.";
+      const description = this.getAttribute("description") ?? "Top up to keep using this feature.";
+      const amountsAttr = this.getAttribute("amounts");
+      const legacyAmounts = amountsAttr ? amountsAttr.split(",").map((s) => Number(s.trim())).filter((n) => Number.isFinite(n)) : [5, 10];
+      const packages = pkgs?.packages ?? [];
+      const plans = pkgs?.activeSubscription ? [] : pkgs?.subscriptionPlans ?? [];
+      this.shadow.innerHTML = `
+      <style>${STYLE}</style>
+      <div class="overlay" part="overlay">
+        <div class="card" part="card">
+          ${snapshot?.balance != null ? `<div class="balance-row">
+                   <div class="eyebrow">Your balance</div>
+                   <div class="balance-value">${formatCredits(snapshot.balance)} credits</div>
+                 </div>` : ""}
+          <h3>${escapeHtml(title)}</h3>
+          <p class="desc">${escapeHtml(description)}</p>
+          ${plans.length ? `<div class="list">
+                   ${plans.map(
+        (p) => `
+                     <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
+                       <span>${escapeHtml(p.name)}</span>
+                       <span class="meta">${formatMoney(p.price, currency)}/${p.period === "monthly" ? "mo" : "yr"} \xB7 ${formatCredits(p.credits)} cr</span>
+                     </button>`
+      ).join("")}
+                 </div>` : ""}
+          <div class="list">
+            ${packages.length ? packages.map(
+        (p) => `
+                  <button class="option" data-kind="package" data-id="${escapeHtml(p.id)}">
+                    <span>${escapeHtml(p.name)}</span>
+                    <span class="meta">${formatMoney(p.price, currency)} \xB7 ${formatCredits(p.credits)} cr</span>
+                  </button>`
+      ).join("") : legacyAmounts.map(
+        (a) => `
+                  <button class="option" data-kind="amount" data-amount="${a}">
+                    <span>Add ${a}</span>
+                  </button>`
+      ).join("")}
+          </div>
+          <button class="close" part="close" type="button">Not now</button>
+        </div>
+      </div>
+    `;
+      this.shadow.querySelector(".overlay")?.addEventListener("click", (e) => {
+        if (e.target === e.currentTarget) this.close();
+      });
+      this.shadow.querySelector(".close")?.addEventListener("click", () => this.close());
+      this.shadow.querySelectorAll("button.option").forEach((el) => {
+        const btn = el;
+        btn.addEventListener("click", () => {
+          const kind = btn.dataset.kind;
+          if (kind === "package") {
+            const pkg = packages.find((p) => p.id === btn.dataset.id);
+            if (pkg) {
+              this.dispatchEvent(
+                new CustomEvent("crediball-select-package", { detail: pkg, bubbles: true, composed: true })
+              );
+            }
+          } else if (kind === "plan") {
+            const plan = plans.find((p) => p.id === btn.dataset.id);
+            if (plan) {
+              this.dispatchEvent(
+                new CustomEvent("crediball-select-plan", { detail: plan, bubbles: true, composed: true })
+              );
+            }
+          } else if (kind === "amount") {
+            const amount = Number(btn.dataset.amount);
+            this.dispatchEvent(
+              new CustomEvent("crediball-topup", { detail: { amount }, bubbles: true, composed: true })
+            );
+          }
+        });
+      });
+    }
+  };
+
+  // src/register.ts
+  function define(name, ctor) {
+    if (!customElements.get(name)) customElements.define(name, ctor);
+  }
+  define("crediball-balance", CrediballBalanceElement);
+  define("crediball-usage", CrediballUsageElement);
+  define("crediball-topup-button", CrediballTopUpButtonElement);
+  define("crediball-low-credit-warning", CrediballLowCreditWarningElement);
+  define("crediball-paywall", CrediballPaywallElement);
+  return __toCommonJS(iife_exports);
+})();

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+import { CrediballClient, CrediballSnapshot } from '@crediball/core';
+
+/**
+ * Shared base for every <crediball-*> element: reads config from attributes,
+ * gets (or reuses) the shared CrediballClient for that publishable-key +
+ * user-id, and re-renders on every snapshot change. Multiple elements on a
+ * page with the same publishable-key/user-id/api-url share one poller —
+ * see getCrediballClient() in @crediball/core.
+ *
+ *   <crediball-balance publishable-key="cb_pub_..." user-id="u123"></crediball-balance>
+ */
+declare abstract class CrediballElement extends HTMLElement {
+    protected client: CrediballClient | null;
+    private unsubscribe;
+    private static readonly CLIENT_ATTRS;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Only reconnect the shared client when a connection-relevant attribute
+     * changes (publishable-key/user-id/api-url/low-credit-threshold). Subclasses
+     * add their own observed attributes (e.g. "show", "threshold", "open") —
+     * those should just re-render, not tear down and refetch the client.
+     */
+    attributeChangedCallback(name: string): void;
+    private connectClient;
+    private teardownClient;
+    protected getSnapshot(): CrediballSnapshot | null;
+    /** Called on connect, on relevant attribute changes, and on every data update. */
+    protected abstract render(): void;
+}
+
+/**
+ * <crediball-balance publishable-key="cb_pub_..." user-id="u123"></crediball-balance>
+ *
+ * Inherits the surrounding font and color (`:host { font: inherit; color: inherit }`)
+ * so it looks native wherever it's placed.
+ */
+declare class CrediballBalanceElement extends CrediballElement {
+    private valueEl;
+    constructor();
+    protected render(): void;
+}
+
+/**
+ * <crediball-usage publishable-key="cb_pub_..." user-id="u123"></crediball-usage>
+ *
+ * Credits consumed in the user's current period by default. Set
+ * `show="remaining"` to render the balance instead.
+ */
+declare class CrediballUsageElement extends CrediballElement {
+    private valueEl;
+    static get observedAttributes(): string[];
+    constructor();
+    protected render(): void;
+}
+
+/**
+ * <crediball-topup-button publishable-key="cb_pub_..." user-id="u123">
+ *   Add credits
+ * </crediball-topup-button>
+ *
+ * Clicking it opens the nearest <crediball-paywall> in the document. If none
+ * is present, it dispatches a bubbling `crediball-topup-click` event so the
+ * host page can handle it itself.
+ */
+declare class CrediballTopUpButtonElement extends CrediballElement {
+    private button;
+    constructor();
+    protected render(): void;
+    private handleClick;
+}
+
+/**
+ * <crediball-low-credit-warning publishable-key="cb_pub_..." user-id="u123">
+ *   Low credit balance — top up to keep going.
+ * </crediball-low-credit-warning>
+ *
+ * Hidden until the user's balance drops below the threshold (the highest-cost
+ * active event by default, or the `threshold` attribute).
+ */
+declare class CrediballLowCreditWarningElement extends CrediballElement {
+    static get observedAttributes(): string[];
+    constructor();
+    protected render(): void;
+}
+
+/**
+ * <crediball-paywall publishable-key="cb_pub_..." user-id="u123" title="..." description="..."></crediball-paywall>
+ *
+ * A themeable top-up dialog driven by the live packages/subscription-plans
+ * catalog. Call `.open()` / `.close()`, or toggle the `open` attribute.
+ * Purchases are never made client-side (the publishable key can't authorize
+ * money movement) — selecting an option dispatches a bubbling event
+ * (`crediball-select-package`, `crediball-select-plan`, or `crediball-topup`
+ * for the legacy `amounts` fallback) that the host page listens for and
+ * fulfils server-side, then calls `.close()`.
+ */
+declare class CrediballPaywallElement extends CrediballElement {
+    private shadow;
+    static get observedAttributes(): string[];
+    constructor();
+    open(): void;
+    close(): void;
+    protected render(): void;
+}
+
+export { CrediballBalanceElement, CrediballElement, CrediballLowCreditWarningElement, CrediballPaywallElement, CrediballTopUpButtonElement, CrediballUsageElement };

package/dist/index.js

@@ -0,0 +1,16 @@
+import {
+  CrediballBalanceElement,
+  CrediballElement,
+  CrediballLowCreditWarningElement,
+  CrediballPaywallElement,
+  CrediballTopUpButtonElement,
+  CrediballUsageElement
+} from "./chunk-RBGPXBOH.js";
+export {
+  CrediballBalanceElement,
+  CrediballElement,
+  CrediballLowCreditWarningElement,
+  CrediballPaywallElement,
+  CrediballTopUpButtonElement,
+  CrediballUsageElement
+};

package/dist/register.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/register.js

@@ -0,0 +1,17 @@
+import {
+  CrediballBalanceElement,
+  CrediballLowCreditWarningElement,
+  CrediballPaywallElement,
+  CrediballTopUpButtonElement,
+  CrediballUsageElement
+} from "./chunk-RBGPXBOH.js";
+
+// src/register.ts
+function define(name, ctor) {
+  if (!customElements.get(name)) customElements.define(name, ctor);
+}
+define("crediball-balance", CrediballBalanceElement);
+define("crediball-usage", CrediballUsageElement);
+define("crediball-topup-button", CrediballTopUpButtonElement);
+define("crediball-low-credit-warning", CrediballLowCreditWarningElement);
+define("crediball-paywall", CrediballPaywallElement);

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@crediball/elements",
+  "version": "0.1.0",
+  "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
+  "license": "MIT",
+  "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
+  "homepage": "https://crediball.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/filipporezzadore/Crediball.git",
+    "directory": "packages/elements"
+  },
+  "bugs": {
+    "url": "https://github.com/filipporezzadore/Crediball/issues"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "credits",
+    "billing",
+    "ui",
+    "ai"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./src/register.ts",
+    "./src/iife.ts",
+    "./dist/register.js",
+    "./dist/crediball-elements.iife.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "import": "./dist/register.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@crediball/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  }
+}