@crediball/elements 0.2.0 → 0.4.0

package/dist/{chunk-VW5SGSLN.js → chunk-KXVW7PIU.js}

@@ -1,5 +1,30 @@
 // src/base.ts
-import { getCrediballClient } from "@crediball/core";
+import {
+  getCrediballClient
+} 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);
@@ -42,9 +67,30 @@ 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 [key, cssVar, fmt] of THEME_VARS) {
+      const value = theme[key];
+      if (value != null && value !== "") this.style.setProperty(cssVar, fmt(value));
+    }
+    if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
+  }
   teardownClient() {
     this.client?.stop();
     this.unsubscribe?.();
@@ -126,6 +172,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");
@@ -149,10 +197,13 @@ 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 threshold = thresholdAttr != null ? Number(thresholdAttr) : content?.lowCreditThreshold;
     const isLow = threshold != null && snapshot?.balance != null ? snapshot.balance < 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.";
   }
 };
 
@@ -285,9 +336,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,9 +383,9 @@ 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>
-                 </div>
-                 <p class="error" hidden></p>` : ""}
+                   <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>
         </div>
       </div>
@@ -352,7 +405,9 @@ var CrediballPaywallElement = class extends CrediballElement {
           }
         } else if (kind === "plan") {
           const plan = plans.find((p) => p.id === btn.dataset.id);
-          if (plan) this.emit("crediball-select-plan", plan);
+          if (plan && this.emit("crediball-select-plan", plan)) {
+            void this.startSubscriptionCheckout(plan.id);
+          }
         } else if (kind === "amount") {
           const amount = Number(btn.dataset.amount);
           if (this.emit("crediball-topup", { amount })) {
@@ -394,12 +449,24 @@ var CrediballPaywallElement = class extends CrediballElement {
     this.dispatchEvent(ev);
     return !ev.defaultPrevented;
   }
-  /** Start the built-in Stripe Checkout and redirect. Errors are surfaced in the dialog. */
-  async startCheckout(input) {
-    if (!this.client) return;
+  returnPath() {
+    return typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
+  }
+  /** Start the built-in top-up Checkout and redirect. Errors are surfaced in the dialog. */
+  startCheckout(input) {
+    if (!this.client) return Promise.resolve();
+    return this.redirect(this.client.createCheckout({ ...input, returnPath: this.returnPath() }));
+  }
+  /** Start the built-in recurring subscription Checkout and redirect. */
+  startSubscriptionCheckout(planId) {
+    if (!this.client) return Promise.resolve();
+    return this.redirect(
+      this.client.createSubscriptionCheckout({ planId, returnPath: this.returnPath() })
+    );
+  }
+  async redirect(session) {
     try {
-      const returnPath = typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
-      const { url } = await this.client.createCheckout({ ...input, returnPath });
+      const { url } = await session;
       if (typeof window !== "undefined") window.location.assign(url);
     } catch (err) {
       const errEl = this.shadow.querySelector(".error");

package/dist/crediball-elements.iife.js

@@ -69,7 +69,7 @@ var Crediball = (() => {
   }
 
   // ../core/dist/client.js
-  var DEFAULT_API_URL = "https://crediball.app/api";
+  var DEFAULT_API_URL = "https://www.crediball.ai/api";
   var DEFAULT_POLL_MS = 3e4;
   var SSE_HEALTHY_POLL_MULTIPLIER = 2;
   var MAX_SSE_FAILURES = 2;
@@ -122,22 +122,11 @@ var Crediball = (() => {
       this.costOf = (event) => {
         return this.store.get().costs[event]?.costCredits;
       };
-      this.createCheckout = async (input) => {
-        const { publishableKey, userId } = this.config;
-        const res = await fetch(`${this.apiUrl}/public/topup/checkout`, {
-          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();
+      this.createCheckout = (input) => {
+        return this.postCheckout("/public/topup/checkout", input);
+      };
+      this.createSubscriptionCheckout = (input) => {
+        return this.postCheckout("/public/subscriptions/checkout", input);
       };
       this.refresh = async () => {
         const { publishableKey, userId } = this.config;
@@ -199,6 +188,23 @@ var Crediball = (() => {
       this.apiUrl = (config.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, "");
       this.pollIntervalMs = config.pollIntervalMs ?? DEFAULT_POLL_MS;
     }
+    async postCheckout(path, input) {
+      const { publishableKey, userId } = this.config;
+      const res = await fetch(`${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();
+    }
     pause() {
       this.stopPolling();
       this.disconnectSse();
@@ -298,6 +304,29 @@ var Crediball = (() => {
   }
 
   // src/base.ts
+  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);
@@ -340,9 +369,30 @@ 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 [key, cssVar, fmt] of THEME_VARS) {
+        const value = theme[key];
+        if (value != null && value !== "") this.style.setProperty(cssVar, fmt(value));
+      }
+      if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
+    }
     teardownClient() {
       this.client?.stop();
       this.unsubscribe?.();
@@ -424,6 +474,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");
@@ -447,10 +499,13 @@ 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 threshold = thresholdAttr != null ? Number(thresholdAttr) : content?.lowCreditThreshold;
       const isLow = threshold != null && snapshot?.balance != null ? snapshot.balance < 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.";
     }
   };
 
@@ -583,9 +638,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 ?? [];
@@ -628,9 +685,9 @@ 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>
-                 </div>
-                 <p class="error" hidden></p>` : ""}
+                   <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>
         </div>
       </div>
@@ -650,7 +707,9 @@ var Crediball = (() => {
             }
           } else if (kind === "plan") {
             const plan = plans.find((p) => p.id === btn.dataset.id);
-            if (plan) this.emit("crediball-select-plan", plan);
+            if (plan && this.emit("crediball-select-plan", plan)) {
+              void this.startSubscriptionCheckout(plan.id);
+            }
           } else if (kind === "amount") {
             const amount = Number(btn.dataset.amount);
             if (this.emit("crediball-topup", { amount })) {
@@ -692,12 +751,24 @@ var Crediball = (() => {
       this.dispatchEvent(ev);
       return !ev.defaultPrevented;
     }
-    /** Start the built-in Stripe Checkout and redirect. Errors are surfaced in the dialog. */
-    async startCheckout(input) {
-      if (!this.client) return;
+    returnPath() {
+      return typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
+    }
+    /** Start the built-in top-up Checkout and redirect. Errors are surfaced in the dialog. */
+    startCheckout(input) {
+      if (!this.client) return Promise.resolve();
+      return this.redirect(this.client.createCheckout({ ...input, returnPath: this.returnPath() }));
+    }
+    /** Start the built-in recurring subscription Checkout and redirect. */
+    startSubscriptionCheckout(planId) {
+      if (!this.client) return Promise.resolve();
+      return this.redirect(
+        this.client.createSubscriptionCheckout({ planId, returnPath: this.returnPath() })
+      );
+    }
+    async redirect(session) {
       try {
-        const returnPath = typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
-        const { url } = await this.client.createCheckout({ ...input, returnPath });
+        const { url } = await session;
         if (typeof window !== "undefined") window.location.assign(url);
       } catch (err) {
         const errEl = this.shadow.querySelector(".error");

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. */
@@ -92,16 +100,13 @@ declare class CrediballLowCreditWarningElement extends CrediballElement {
  * subscription-plans catalog. Call `.open()` / `.close()`, or toggle the `open`
  * attribute.
  *
- * Top-ups pay out of the box: picking a package or entering a custom amount
- * starts a Crediball-hosted Stripe Checkout (using the publishable key) and
- * redirects — the developer only has to connect payouts in the dashboard. Each
- * choice still first dispatches a bubbling, CANCELABLE event
- * (`crediball-select-package` / `crediball-topup`); call `event.preventDefault()`
- * in a listener to suppress the built-in checkout and run your own flow instead.
- *
- * Subscription plans have no built-in checkout (they need recurring billing your
- * backend sets up): picking one only dispatches `crediball-select-plan` for the
- * host to fulfil server-side.
+ * Everything pays out of the box: picking a package, entering a custom amount, or
+ * choosing a subscription plan starts a Crediball-hosted Stripe Checkout (using the
+ * publishable key) and redirects — the developer only has to connect payouts in the
+ * dashboard. Subscriptions bill recurringly and grant credits each period. Each
+ * choice first dispatches a bubbling, CANCELABLE event (`crediball-select-package` /
+ * `crediball-topup` / `crediball-select-plan`); call `event.preventDefault()` in a
+ * listener to suppress the built-in checkout and run your own flow instead.
  */
 declare class CrediballPaywallElement extends CrediballElement {
     private shadow;
@@ -112,8 +117,12 @@ declare class CrediballPaywallElement extends CrediballElement {
     protected render(): void;
     /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
     private emit;
-    /** Start the built-in Stripe Checkout and redirect. Errors are surfaced in the dialog. */
+    private returnPath;
+    /** Start the built-in top-up Checkout and redirect. Errors are surfaced in the dialog. */
     private startCheckout;
+    /** Start the built-in recurring subscription Checkout and redirect. */
+    private startSubscriptionCheckout;
+    private redirect;
 }
 
 export { CrediballBalanceElement, CrediballElement, CrediballLowCreditWarningElement, CrediballPaywallElement, CrediballTopUpButtonElement, CrediballUsageElement };

package/dist/index.js

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

package/dist/register.js

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@crediball/elements",
-  "version": "0.2.0",
+  "version": "0.4.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",
+  "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.1.1"
+    "@crediball/core": "^0.3.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",