@crediball/elements 0.3.0 → 0.4.0

package/dist/{chunk-AEVAHMRY.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,7 +383,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

@@ -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;
@@ -304,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);
@@ -346,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?.();
@@ -430,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");
@@ -453,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.";
     }
   };
 
@@ -589,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 ?? [];
@@ -634,7 +685,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-KXVW7PIU.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

@@ -4,7 +4,7 @@ import {
   CrediballPaywallElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-AEVAHMRY.js";
+} from "./chunk-KXVW7PIU.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.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.2.0"
+    "@crediball/core": "^0.3.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",