@crediball/elements 0.3.0 → 0.4.1

package/dist/{chunk-AEVAHMRY.js → chunk-WUPVPARI.js}

@@ -1,5 +1,9 @@
 // src/base.ts
-import { getCrediballClient } from "@crediball/core";
+import {
+  getCrediballClient,
+  loadRemoteFont,
+  themeToCssVars
+} from "@crediball/core";
 var _CrediballElement = class _CrediballElement extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -42,9 +46,29 @@ var _CrediballElement = class _CrediballElement extends HTMLElement {
     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.unsubscribe = this.client.subscribe(() => {
+      this.applyRemoteTheme();
+      this.render();
+    });
+    this.applyRemoteTheme();
     this.render();
   }
+  /**
+   * Apply the developer-published theme (served alongside packages) as
+   * `--crediball-*` custom properties on this element — custom properties pierce
+   * the shadow boundary, so the shadow-DOM styles pick them up. On by default;
+   * set `apply-remote-theme="false"` to theme from your own CSS instead. The
+   * published theme takes precedence over host `--crediball-*` vars (dashboard wins).
+   */
+  applyRemoteTheme() {
+    if (this.getAttribute("apply-remote-theme") === "false") return;
+    const theme = this.getSnapshot()?.packages?.ui?.theme;
+    if (!theme) return;
+    for (const [cssVar, value] of Object.entries(themeToCssVars(theme))) {
+      this.style.setProperty(cssVar, value);
+    }
+    if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
+  }
   teardownClient() {
     this.client?.stop();
     this.unsubscribe?.();
@@ -64,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 {
@@ -126,6 +148,8 @@ var CrediballTopUpButtonElement = class extends CrediballElement {
     this.button.addEventListener("click", () => this.handleClick());
   }
   render() {
+    const slot = this.button.querySelector("slot");
+    if (slot) slot.textContent = this.getSnapshot()?.packages?.ui?.content?.topUpButtonText ?? "Add credits";
   }
   handleClick() {
     const paywall = document.querySelector("crediball-paywall");
@@ -138,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"];
@@ -149,21 +174,18 @@ var CrediballLowCreditWarningElement = class extends CrediballElement {
   }
   render() {
     const snapshot = this.getSnapshot();
+    const content = snapshot?.packages?.ui?.content;
     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;
+    const threshold = thresholdAttr != null ? Number(thresholdAttr) : content?.lowCreditThreshold;
+    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.";
   }
 };
 
 // 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;
@@ -285,9 +307,11 @@ var CrediballPaywallElement = class extends CrediballElement {
     }
     const snapshot = this.getSnapshot();
     const pkgs = snapshot?.packages;
+    const uiContent = pkgs?.ui?.content;
     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 title = this.getAttribute("title") ?? uiContent?.paywallTitle ?? "You need more credits to continue.";
+    const description = this.getAttribute("description") ?? uiContent?.paywallDescription ?? "Top up to keep using this feature.";
+    const addButtonText = uiContent?.paywallButtonText ?? "Add";
     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 ?? [];
@@ -330,7 +354,7 @@ var CrediballPaywallElement = class extends CrediballElement {
           ${showCustom ? `<div class="custom-row">
                    <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
-                   <button class="custom-add" type="button">Add</button>
+                   <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>` : ""}
           <p class="error" hidden></p>
           <button class="close" part="close" type="button">Not now</button>

package/dist/crediball-elements.iife.js

@@ -68,8 +68,21 @@ var Crediball = (() => {
     return () => window.removeEventListener(BALANCE_CHANGED_EVENT, listener);
   }
 
+  // ../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_API_URL = "https://crediball.app/api";
   var DEFAULT_POLL_MS = 3e4;
   var SSE_HEALTHY_POLL_MULTIPLIER = 2;
   var MAX_SSE_FAILURES = 2;
@@ -85,15 +98,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 +138,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 +192,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,6 +301,60 @@ var Crediball = (() => {
     return client;
   }
 
+  // ../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],
+    ["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 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;
+    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);
+    }
+  }
+
   // src/base.ts
   var _CrediballElement = class _CrediballElement extends HTMLElement {
     constructor() {
@@ -346,9 +398,29 @@ var Crediball = (() => {
       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.unsubscribe = this.client.subscribe(() => {
+        this.applyRemoteTheme();
+        this.render();
+      });
+      this.applyRemoteTheme();
       this.render();
     }
+    /**
+     * Apply the developer-published theme (served alongside packages) as
+     * `--crediball-*` custom properties on this element — custom properties pierce
+     * the shadow boundary, so the shadow-DOM styles pick them up. On by default;
+     * set `apply-remote-theme="false"` to theme from your own CSS instead. The
+     * published theme takes precedence over host `--crediball-*` vars (dashboard wins).
+     */
+    applyRemoteTheme() {
+      if (this.getAttribute("apply-remote-theme") === "false") return;
+      const theme = this.getSnapshot()?.packages?.ui?.theme;
+      if (!theme) return;
+      for (const [cssVar, value] of Object.entries(themeToCssVars(theme))) {
+        this.style.setProperty(cssVar, value);
+      }
+      if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
+    }
     teardownClient() {
       this.client?.stop();
       this.unsubscribe?.();
@@ -367,11 +439,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() {
@@ -430,6 +497,8 @@ var Crediball = (() => {
       this.button.addEventListener("click", () => this.handleClick());
     }
     render() {
+      const slot = this.button.querySelector("slot");
+      if (slot) slot.textContent = this.getSnapshot()?.packages?.ui?.content?.topUpButtonText ?? "Add credits";
     }
     handleClick() {
       const paywall = document.querySelector("crediball-paywall");
@@ -453,21 +522,17 @@ var Crediball = (() => {
     }
     render() {
       const snapshot = this.getSnapshot();
+      const content = snapshot?.packages?.ui?.content;
       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;
+      const threshold = thresholdAttr != null ? Number(thresholdAttr) : content?.lowCreditThreshold;
+      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.";
     }
   };
 
   // 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;
@@ -589,9 +654,11 @@ var Crediball = (() => {
       }
       const snapshot = this.getSnapshot();
       const pkgs = snapshot?.packages;
+      const uiContent = pkgs?.ui?.content;
       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 title = this.getAttribute("title") ?? uiContent?.paywallTitle ?? "You need more credits to continue.";
+      const description = this.getAttribute("description") ?? uiContent?.paywallDescription ?? "Top up to keep using this feature.";
+      const addButtonText = uiContent?.paywallButtonText ?? "Add";
       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 ?? [];
@@ -634,7 +701,7 @@ var Crediball = (() => {
           ${showCustom ? `<div class="custom-row">
                    <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
-                   <button class="custom-add" type="button">Add</button>
+                   <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>` : ""}
           <p class="error" hidden></p>
           <button class="close" part="close" type="button">Not now</button>

package/dist/index.d.ts

@@ -24,6 +24,14 @@ declare abstract class CrediballElement extends HTMLElement {
      */
     attributeChangedCallback(name: string): void;
     private connectClient;
+    /**
+     * Apply the developer-published theme (served alongside packages) as
+     * `--crediball-*` custom properties on this element — custom properties pierce
+     * the shadow boundary, so the shadow-DOM styles pick them up. On by default;
+     * set `apply-remote-theme="false"` to theme from your own CSS instead. The
+     * published theme takes precedence over host `--crediball-*` vars (dashboard wins).
+     */
+    private applyRemoteTheme;
     private teardownClient;
     protected getSnapshot(): CrediballSnapshot | null;
     /** Called on connect, on relevant attribute changes, and on every data update. */

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   CrediballPaywallElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-AEVAHMRY.js";
+} from "./chunk-WUPVPARI.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

@@ -4,7 +4,7 @@ import {
   CrediballPaywallElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-AEVAHMRY.js";
+} from "./chunk-WUPVPARI.js";
 
 // src/register.ts
 function define(name, ctor) {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@crediball/elements",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "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",
+  "homepage": "https://crediball.ai",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/filipporezzadore/Crediball.git",
@@ -56,7 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@crediball/core": "^0.2.0"
+    "@crediball/core": "^0.4.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",