@crediball/elements 0.4.0 → 0.4.1

package/dist/{chunk-KXVW7PIU.js → chunk-WUPVPARI.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;

package/dist/crediball-elements.iife.js

@@ -68,8 +68,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 +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,8 +301,23 @@ var Crediball = (() => {
     return client;
   }
 
-  // src/base.ts
-  var THEME_VARS = [
+  // ../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 +327,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 +354,8 @@ var Crediball = (() => {
       document.head.appendChild(link);
     }
   }
+
+  // src/base.ts
   var _CrediballElement = class _CrediballElement extends HTMLElement {
     constructor() {
       super(...arguments);
@@ -387,9 +416,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 +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() {
@@ -502,7 +525,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 +533,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;

package/dist/index.js

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

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.4.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>",
@@ -56,7 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@crediball/core": "^0.3.0"
+    "@crediball/core": "^0.4.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",