@nozle-js/react 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,9 +1,238 @@
-import React, { createContext, useState, useRef, useId, useEffect, useMemo, useContext, useCallback } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+"use client";import { T, border, mergeAppearance, toCssVars, text, buttonStyle, table, surface, buttonRadius, primaryButtonBorder } from './chunk-NLPONQ5O.js';
+import React2, { createContext, useContext, useMemo, useState, useRef, useId, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { QueryClient, useQuery, useInfiniteQuery } from '@tanstack/react-query';
 import { EmbeddedCheckoutProvider, EmbeddedCheckout, Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 
-// src/components/portal/BillingPortal.tsx
+var AppearanceContext = createContext(void 0);
+function AppearanceProvider({
+  appearance,
+  children
+}) {
+  return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value: appearance, children });
+}
+function useAppearance(appearance) {
+  const inherited = useContext(AppearanceContext);
+  return useMemo(() => {
+    const { variables, elements, planCardLayout = "card" } = mergeAppearance(inherited, appearance);
+    const vars = toCssVars(variables);
+    const el = (key, style, className) => {
+      const override = elements[key];
+      return {
+        className: ["nozle-" + key, className, override?.className].filter(Boolean).join(" "),
+        style: { ...style, ...override?.style }
+      };
+    };
+    return {
+      el,
+      planCardLayout,
+      vars,
+      root: (key, style, className) => {
+        const props = el(key, style, className);
+        return { ...props, style: { ...vars, ...props.style } };
+      }
+    };
+  }, [inherited, appearance]);
+}
+function createClient(publishableKey, baseUrl) {
+  let end = baseUrl.length;
+  while (end > 0 && baseUrl[end - 1] === "/") end--;
+  const base = baseUrl.slice(0, end);
+  return {
+    publishableKey,
+    baseUrl: base,
+    catalogFetch(path, init) {
+      return fetch(`${base}${path}`, {
+        ...init,
+        headers: {
+          Authorization: `Bearer ${publishableKey}`,
+          "Content-Type": "application/json",
+          ...init?.headers
+        }
+      });
+    }
+  };
+}
+var BillingRequestError = class extends Error {
+  constructor(status, code, requestId) {
+    super(`Billing request failed: ${status}${code ? ` ${code}` : ""}`);
+    this.status = status;
+    this.code = code;
+    this.requestId = requestId;
+    this.name = "BillingRequestError";
+  }
+  status;
+  code;
+  requestId;
+};
+function createBillingFetch(endpoint, headers) {
+  let end = endpoint.length;
+  while (end > 0 && endpoint[end - 1] === "/") end--;
+  const base = endpoint.slice(0, end);
+  return async (route, params = {}) => {
+    const query = new URLSearchParams();
+    for (const [key, value] of Object.entries(params)) {
+      if (value !== void 0 && value !== "") query.set(key, String(value));
+    }
+    const search = query.toString();
+    const response = await fetch(`${base}/${route}${search ? `?${search}` : ""}`, {
+      credentials: "same-origin",
+      headers: { Accept: "application/json", ...headers ? await headers() : {} }
+    });
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      throw new BillingRequestError(response.status, body.code, body.request_id);
+    }
+    return await response.json();
+  };
+}
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 3e4,
+        // Retry only failures that may pass on a second try; a 4xx will not.
+        retry: (count, error) => count < 2 && !(error instanceof BillingRequestError && error.status < 500)
+      }
+    }
+  });
+}
+var BillingContext = createContext(null);
+function BillingProvider({
+  publishableKey,
+  createCheckout,
+  verifyCheckout,
+  getCheckoutStatus,
+  baseUrl = "https://api.nozle.app/engine",
+  billingEndpoint,
+  billingHeaders,
+  queryClient,
+  appearance,
+  children
+}) {
+  if (!publishableKey.startsWith("pk_")) {
+    throw new Error(
+      "BillingProvider publishableKey must be a publishable key (pk_)"
+    );
+  }
+  const client = useMemo(
+    () => createClient(publishableKey, baseUrl),
+    [publishableKey, baseUrl]
+  );
+  const [ownQueryClient] = useState(createQueryClient);
+  const activeQueryClient = queryClient ?? ownQueryClient;
+  const billingFetch = useMemo(
+    () => billingEndpoint ? createBillingFetch(billingEndpoint, billingHeaders) : void 0,
+    [billingEndpoint, billingHeaders]
+  );
+  const contextValue = useMemo(
+    () => ({
+      client,
+      createCheckout,
+      verifyCheckout,
+      getCheckoutStatus,
+      queryClient: activeQueryClient,
+      billingFetch,
+      billingEndpoint
+    }),
+    [client, createCheckout, verifyCheckout, getCheckoutStatus, activeQueryClient, billingFetch, billingEndpoint]
+  );
+  return React2.createElement(
+    BillingContext.Provider,
+    { value: contextValue },
+    React2.createElement(AppearanceProvider, { appearance, children })
+  );
+}
+function useOptionalBillingContext() {
+  return useContext(BillingContext);
+}
+function useBillingContext() {
+  const context = useOptionalBillingContext();
+  if (!context) {
+    throw new Error("useBillingContext must be used within a BillingProvider");
+  }
+  return context;
+}
+function useNozleClient() {
+  return useBillingContext().client;
+}
+var idleQueryClient = new QueryClient();
+function catalogQuery(client) {
+  return {
+    queryKey: ["nozle", "plans", client?.baseUrl, client?.publishableKey],
+    queryFn: async ({ signal }) => {
+      const response = await client.catalogFetch("/api/v1/plans", { signal });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = await response.json();
+      return { plans: data.plans ?? [], nozleBranding: data.meta?.nozle_branding === true };
+    },
+    staleTime: 5 * 6e4,
+    // The pricing page shows a load error at once; the app can call refetch().
+    retry: false
+  };
+}
+function usePlans() {
+  const { client, queryClient } = useBillingContext();
+  const query = useQuery(catalogQuery(client), queryClient);
+  return {
+    plans: query.data?.plans ?? [],
+    isLoading: query.isPending,
+    error: query.error ?? null,
+    refetch: query.refetch
+  };
+}
+
+// src/components/branding/logo.ts
+var LOGO_VIEW_BOX = "0 0 3208 1122";
+var LOGO_MARK_PATH = "M 1108.89 330.512 C 1131.49 326.989 1184.16 334.391 1207.63 338.298 L 1207.63 511.329 C 1203.66 515.246 1199.46 519.132 1195.4 522.972 L 1286.52 523.006 C 1282.75 519.093 1278.87 515.284 1274.89 511.585 L 1274.92 358.597 C 1311.02 374.213 1344.6 395.09 1374.58 420.548 C 1451.3 486.571 1498.83 580.231 1506.81 681.131 C 1515 782.133 1482.24 882.187 1415.89 958.782 C 1362.73 1020.34 1289.84 1065.92 1209.97 1082.75 C 1185.45 1087.92 1168.82 1089.01 1144.24 1090.82 C 1092.37 1092.55 1040.69 1083.81 992.278 1065.1 C 899.111 1029.72 824.189 955.46 783.642 864.858 C 743.243 772.802 740.63 668.558 776.367 574.594 C 807.572 492.815 865.841 424.187 941.477 380.133 C 955.897 371.807 970.834 365.19 986.004 358.415 L 986.997 511.83 C 982.504 514.698 977.232 518.881 972.988 522.219 C 982.441 521.793 993.966 522.74 1003.69 522.843 L 1066.51 523.012 C 1062.58 519.054 1058.6 514.702 1054 511.616 C 1053.71 494.114 1055.01 476.198 1054.99 458.475 L 1054 337.726 C 1074.93 333.524 1088.73 333.1 1108.89 330.512 z M 1136.49 834.878 C 1198.61 831.142 1246.02 777.893 1242.55 715.759 C 1239.08 653.625 1186.03 605.989 1123.88 609.196 C 1061.36 612.423 1013.37 665.861 1016.87 728.369 C 1020.36 790.878 1074 838.637 1136.49 834.878 z";
+var LOGO_WORDMARK_PATH = "M2807.48 317.546C2812.82 316.693 2819.27 316.959 2824.49 316.891 3043.76 314.061 3223.51 517.798 3205.41 733.935 3204.36 746.553 3203.33 760.715 3203.2 773.228 3175.25 773.336 3148.36 772.242 3120.74 772.167L2889.16 773.329C2863.8 773.347 2650.02 771.22 2643.56 776.302 2643.49 776.742 2643.33 778.022 2643.41 778.366 2650.33 808.489 2668.08 838.036 2690.04 858.674 2726.37 892.826 2776.29 910.3 2825.39 908.765 2887.65 906.818 2929.65 884.535 2971.8 840.731L3187.64 841.821C3176.73 876.79 3145.09 927.003 3121.73 956.25 3057.95 1036.16 2965.03 1087.46 2863.43 1098.86 2764.86 1109.46 2666.11 1080.6 2588.77 1018.59 2504.68 952.597 2450.51 855.672 2438.38 749.464 2415.16 540.793 2579.74 336.515 2790.2 318.706 2795.97 318.218 2801.75 318.181 2807.48 317.546zM2836.5 625.92 3004.04 625.92C2976.56 571.597 2937.23 529.14 2878.08 508.386 2862.06 502.767 2834.68 498.432 2817.69 499.447 2811.66 500.426 2805.72 500.948 2799.66 501.626 2736.71 508.675 2678.99 552.56 2653.08 609.964 2650.95 614.667 2649.24 618.489 2648.22 623.618L2648.73 625.573C2666.65 626.805 2695.47 625.951 2714.08 625.95L2836.5 625.92zM350.026 327.534C351.059 327.376 351.817 327.251 352.866 327.196 440.33 322.588 528.279 352.28 593.965 409.932 660.794 468.083 703.294 549.252 713.018 637.303 717.397 678.934 715.385 718.263 715.162 759.723L714.249 949.463C714.221 978.726 713.328 1009.12 714.526 1038.31 715.585 1064.08 724.618 1074.23 742.925 1090.23 655.133 1089.48 574.896 1088.28 486.53 1091.14 506.936 1074.25 516.198 1062.6 516.991 1034.69 517.509 1016.48 517.681 998.316 517.701 980.062L517.678 871.454 518.327 744.743C518.417 708.921 519.234 677.156 513.6 641.605 504.197 582.258 457.155 536.074 396.911 528.341 387.723 526.897 378.419 526.337 369.124 526.669 330.893 527.948 296.354 540.985 270.002 569.309 252.159 588.394 239.802 611.944 234.238 637.471 228.538 663.791 228.617 711.497 228.796 738.55L229.47 833.874 229.051 964.879C229.043 985.892 228.914 1006.79 229.398 1027.79 230.072 1057 235.364 1070.31 256.803 1090.19 210.541 1092.85 167.594 1091.93 121.604 1091.28L2.29567 1090.29C23.4576 1071.55 31.3577 1057.22 32.9306 1028.58 34.6194 997.827 33.8844 967.966 33.5542 937.249L33.0591 779.859C32.8532 653.775 26.6617 550.025 115.68 447.849 180 374.022 252.997 336.686 350.026 327.534zM1552.98 329.783C1585.23 341.06 1694.79 336.137 1732.02 336.28L1987.95 337.925C2031.97 338.036 2076.24 335.822 2120.7 337.349 2118.21 357.823 2118.97 389.029 2118.96 410.256 2118.6 445.944 2118.97 481.634 2120.07 517.306L1961.06 704.338C1908.01 766.03 1851.33 830.755 1801.51 894.952 1819.57 894.053 1845.55 894.949 1864.37 894.958L1989.79 895.045C2037.99 895.176 2070.48 897.452 2119.04 886.152 2118.97 952.443 2120.33 1018.73 2118.99 1085 2118.85 1091.75 2120.17 1104.35 2118.4 1110.48L2115.98 1111.17C2070.03 1077.75 2034.35 1081.57 1981.3 1081.89L1888.49 1081.97 1544.82 1082.03C1545.37 1024.58 1544.47 968.65 1544.02 911.354 1563.44 886.164 1589.99 857.395 1611.19 832.365L1782.61 629.927C1814.21 592.718 1847.38 556.886 1876.98 518.016L1552 517.984C1551.65 496.963 1554.2 471.241 1553.87 449.778 1553.69 437.667 1553.18 425.595 1553.07 413.5L1552.98 329.783zM2373.44 4.75901C2374.2 55.5907 2372.32 106.262 2372.3 157.309L2372.39 599.153 2373.25 737.25C2373.29 771.822 2369.91 823.05 2379.51 856.818 2384.04 872.719 2405.1 883.099 2420.05 889.245L2420.03 1090.04C2375.69 1091.15 2312.39 1065.98 2279.04 1037.28 2271.95 1032.7 2261.78 1023.12 2255.56 1016.95 2219.14 980.786 2191.86 928.49 2181.81 878.203 2174.98 844.049 2176.85 799.114 2176.92 763.235L2177.02 625.401 2176.97 73.7487C2189.94 73.6898 2202.93 74.1053 2215.89 73.9192 2264.74 73.2173 2312.58 61.8792 2349.93 28.7315 2357.84 21.7113 2365.92 12.4727 2373.44 4.75901z";
+var BrandingScope = createContext(false);
+function useNozleBranding() {
+  const billing = useOptionalBillingContext();
+  const { data } = useQuery(
+    // Reads the catalog request the components already make: mounting this must not refetch a
+    // failed catalog, or a table that shows the error would loop back into loading.
+    { ...catalogQuery(billing?.client), enabled: Boolean(billing), refetchOnMount: false, retryOnMount: false },
+    billing?.queryClient ?? idleQueryClient
+  );
+  return data?.nozleBranding === true;
+}
+function PoweredByNozle() {
+  const { root } = useAppearance();
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: "https://nozle.dev",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      ...root("poweredBy", {
+        ...text.meta,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        marginTop: "1rem",
+        textDecoration: "none"
+      }),
+      children: [
+        "Powered by",
+        /* @__PURE__ */ jsxs("svg", { viewBox: LOGO_VIEW_BOX, height: "14", width: "40", role: "img", "aria-label": "Nozle", style: { color: T.foreground }, children: [
+          /* @__PURE__ */ jsx("path", { fill: "#F34213", d: LOGO_MARK_PATH }),
+          /* @__PURE__ */ jsx("path", { fill: "currentColor", d: LOGO_WORDMARK_PATH })
+        ] })
+      ]
+    }
+  );
+}
+function NozleBranding({ show, children }) {
+  const nested = useContext(BrandingScope);
+  const fromCatalog = useNozleBranding();
+  return /* @__PURE__ */ jsxs(BrandingScope.Provider, { value: true, children: [
+    children,
+    !nested && (show ?? fromCatalog) && /* @__PURE__ */ jsx(PoweredByNozle, {})
+  ] });
+}
 
 // src/components/portal/client.ts
 var BillingPortalError = class extends Error {
@@ -96,7 +325,7 @@ var identityQuery = `query SdkPortalIdentity {
     addressLine1 addressLine2 city state zipcode country
     shippingAddress { addressLine1 addressLine2 city state zipcode country }
   }
-  customerPortalOrganization { id name }
+  customerPortalOrganization { id name nozleBranding }
 }`;
 var subscriptionsQuery = `query SdkPortalSubscriptions($page: Int) {
   customerPortalSubscriptions(status: [active], limit: 20, page: $page) {
@@ -145,40 +374,55 @@ var topUpMutation = `mutation SdkPortalTopUp($input: CreateCustomerPortalWalletT
 }`;
 
 // src/components/portal/styles.ts
+var line = `${T.borderWidth} solid ${T.border}`;
+var r = (factor) => `calc(${T.radius} * ${factor})`;
 var portalStyles = `
-.nozle-billing-portal{color:var(--nozle-portal-text,#202922);background:var(--nozle-portal-background,#fff);font:14px/1.55 system-ui,sans-serif;box-sizing:border-box;width:100%;min-width:0;padding:clamp(18px,4vw,40px);border-radius:12px}
+.nozle-billing-portal{color:${T.foreground};background:${T.background};font:${T.fontBody};box-sizing:border-box;width:100%;min-width:0;padding:clamp(18px,4vw,40px);border-radius:${T.radius}}
 .nozle-billing-portal *{box-sizing:border-box}
 .nozle-billing-portal h2,.nozle-billing-portal h3,.nozle-billing-portal p{margin:0}
-.nozle-billing-portal h2{font-size:24px;letter-spacing:-.6px;line-height:1.3}
-.nozle-billing-portal h3{font-size:16px;line-height:1.4}
+.nozle-billing-portal h2{font:${T.fontTitle}}
+.nozle-billing-portal h3{font:${T.fontHeading}}
 .nozle-billing-portal header{margin-bottom:30px}
-.nozle-billing-portal section{margin-top:28px;padding-top:24px;border-top:1px solid var(--nozle-portal-border,#e6e9e5)}
-.nozle-billing-portal button,.nozle-billing-portal .nzp-link{appearance:none;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:550;line-height:1.4;border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:7px;background:var(--nozle-portal-background,#fff);color:var(--nozle-portal-text,#202922);padding:9px 14px;cursor:pointer;text-decoration:none;white-space:normal}
-.nozle-billing-portal button:hover,.nozle-billing-portal .nzp-link:hover{background:var(--nozle-portal-muted-background,#f4f6f2)}
+.nozle-billing-portal section{margin-top:28px;padding-top:24px;border-top:${line}}
+.nozle-billing-portal button,.nozle-billing-portal .nzp-link{appearance:none;display:inline-flex;align-items:center;justify-content:center;font:${T.fontAction};border:var(--nozle-button-border-width, ${T.borderWidth}) solid ${T.input};border-radius:var(--nozle-button-radius, ${r(0.6)});background:${T.card};color:${T.foreground};padding:9px 14px;cursor:pointer;text-decoration:none;white-space:normal}
+.nozle-billing-portal button:hover,.nozle-billing-portal .nzp-link:hover{background:${T.muted}}
 .nozle-billing-portal button:disabled{opacity:.55;cursor:wait}
-.nozle-billing-portal :focus-visible{outline:2px solid var(--nozle-portal-accent,#526949);outline-offset:3px}
-.nozle-billing-portal .nzp-primary{background:var(--nozle-portal-accent,#526949);border-color:var(--nozle-portal-accent,#526949);color:#fff}
-.nozle-billing-portal .nzp-primary:hover{filter:brightness(.92);background:var(--nozle-portal-accent,#526949)}
-.nozle-billing-portal .nzp-muted{color:var(--nozle-portal-muted,#687166);font-size:13px}
+.nozle-billing-portal :focus-visible{outline:2px solid ${T.primary};outline-offset:3px}
+.nozle-billing-portal .nzp-primary{background:${T.primary};border-color:var(--nozle-button-border, ${T.primary});box-shadow:var(--nozle-button-shadow, none);color:${T.primaryForeground}}
+.nozle-billing-portal .nzp-primary:hover{filter:brightness(.92);background:${T.primary}}
+.nozle-billing-portal .nzp-muted{color:${T.mutedForeground}}
+.nozle-billing-portal .nzp-notice{color:${T.successText}}
 .nozle-billing-portal .nzp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
 .nozle-billing-portal .nzp-stack{display:grid;gap:12px;margin-top:16px}
-.nozle-billing-portal .nzp-card{border:1px solid var(--nozle-portal-border,#e0e6dc);border-radius:10px;padding:20px;min-width:0}
-.nozle-billing-portal .nzp-price{font-size:26px;letter-spacing:-.5px;margin:12px 0 4px}
-.nozle-billing-portal .nzp-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.3px;border-radius:5px;background:var(--nozle-portal-muted-background,#edf3e8);padding:3px 7px}
-.nozle-billing-portal .nzp-empty{border:1px dashed var(--nozle-portal-border,#dce2d9);border-radius:8px;padding:22px;text-align:center;color:var(--nozle-portal-muted,#687166);margin-top:16px}
-.nozle-billing-portal .nzp-error{color:#922e25;background:#fff4f2;border:1px solid #f2d2ce;border-radius:8px;padding:14px;margin:16px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
-.nozle-billing-portal .nzp-table{overflow-x:auto;margin-top:16px}
-.nozle-billing-portal table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
-.nozle-billing-portal th{font-weight:500;color:var(--nozle-portal-muted,#687166);background:var(--nozle-portal-muted-background,#f7f8f5)}
-.nozle-billing-portal th,.nozle-billing-portal td{padding:12px 10px;border-bottom:1px solid var(--nozle-portal-border,#e6e9e5);white-space:nowrap}
-.nozle-billing-portal label{display:grid;gap:6px;font-size:13px;font-weight:500;min-width:0}
-.nozle-billing-portal input,.nozle-billing-portal select{width:100%;min-width:0;font:inherit;color:inherit;background:var(--nozle-portal-background,#fff);border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:6px;padding:9px 10px}
+.nozle-billing-portal .nzp-card{background:${T.card};border:${line};border-radius:${r(0.85)};box-shadow:${T.shadow};padding:20px;min-width:0}
+.nozle-billing-portal .nzp-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:${line}}
+.nozle-billing-portal .nzp-card-actions>.nozle-plan-change,.nozle-billing-portal .nzp-card-actions>.nozle-cancellation,.nozle-billing-portal .nzp-card-actions .nzpc-actions{display:contents}
+.nozle-billing-portal .nzp-card-actions>.nozle-plan-change>:not(.nzpc-actions),.nozle-billing-portal .nzp-card-actions>.nozle-cancellation>:not(button){flex-basis:100%;margin:0}
+.nozle-billing-portal .nzp-card-actions>.nozle-cancellation>button{margin-left:auto}
+.nozle-billing-portal .nzp-price{font:${T.fontMetric};font-variant-numeric:tabular-nums;margin:12px 0 4px}
+.nozle-billing-portal .nzp-price .nzp-muted{font:${T.fontMeta}}
+.nozle-billing-portal .nzp-badge{display:inline-block;font:${T.labelFont};letter-spacing:${T.labelSpacing};text-transform:${T.labelTransform};border-radius:${r(0.4)};background:${T.accent};color:${T.accentForeground};padding:3px 7px}
+.nozle-billing-portal .nzp-empty{border:${T.borderWidth} dashed ${T.border};border-radius:${r(0.65)};padding:22px;text-align:center;color:${T.mutedForeground};margin-top:16px}
+.nozle-billing-portal .nzp-error{color:${T.dangerText};background:${T.dangerSoft};border:${T.borderWidth} solid ${T.dangerBorder};border-radius:${r(0.65)};padding:14px;margin:16px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
+.nozle-billing-portal .nzp-table{overflow-x:auto;margin-top:16px;background:${T.card};border:${line};border-radius:${T.radius}}
+.nozle-billing-portal table{width:100%;border-collapse:collapse;text-align:left;font:inherit}
+.nozle-billing-portal th{height:44px;padding:0 20px;font:${T.labelFont};letter-spacing:${T.labelSpacing};text-transform:${T.labelTransform};color:${T.mutedForeground};background:${T.tableHeader};border-bottom:${line};white-space:nowrap}
+.nozle-billing-portal td{height:48px;padding:14px 20px;border-bottom:${T.borderWidth} solid ${T.rowLine};white-space:nowrap}
+.nozle-billing-portal tbody tr:last-child td{border-bottom:0}
+.nozle-billing-portal .nzp-num{text-align:right}
+.nozle-billing-portal td.nzp-num{font-family:${T.fontNumbers};font-variant-numeric:tabular-nums}
+.nozle-billing-portal .nzp-search{display:flex;font-weight:400;align-items:center;gap:8px;flex:1;min-width:min(100%,200px);height:40px;padding:0 12px;background:${T.card};border:${T.borderWidth} solid ${T.input};border-radius:${r(0.7)};color:${T.mutedForeground}}
+.nozle-billing-portal .nzp-search:focus-within{border-color:${T.foreground}}
+.nozle-billing-portal .nzp-search input{flex:1;height:100%;border:0;padding:0;background:transparent;color:${T.foreground};outline:none}
+.nozle-billing-portal .nzp-search input::placeholder{color:${T.mutedForeground}}
+.nozle-billing-portal label{display:grid;gap:6px;font-weight:500;min-width:0}
+.nozle-billing-portal input,.nozle-billing-portal select{width:100%;min-width:0;font:inherit;color:inherit;background:${T.card};border:${line};border-radius:${r(0.5)};padding:9px 10px}
 .nozle-billing-portal .nzp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:20px 0}
 .nozle-billing-portal .nzp-actions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}
 .nozle-billing-portal dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:18px;margin:16px 0 0}
-.nozle-billing-portal dt{font-size:12px;color:var(--nozle-portal-muted,#687166)}
+.nozle-billing-portal dt{font:${T.fontMeta};color:${T.mutedForeground}}
 .nozle-billing-portal dd{margin:3px 0 0;overflow-wrap:anywhere}
-.nozle-billing-portal footer{margin-top:30px;text-align:center;color:var(--nozle-portal-muted,#687166);font-size:12px}
+.nozle-billing-portal footer{margin-top:30px;text-align:center;color:${T.mutedForeground};font:${T.fontMeta}}
 `;
 
 // src/components/portal/timezones.ts
@@ -362,6 +606,25 @@ function compareDecimalStrings(left, right) {
   }
   return magnitude * a.sign;
 }
+function formatDecimalString(value, maximumFractionDigits = 12) {
+  const parsed = parseDecimal(value);
+  if (!parsed) return value;
+  const fractionLimit = Math.max(
+    0,
+    Math.min(30, Math.trunc(maximumFractionDigits))
+  );
+  const firstGroupLength = parsed.integer.length % 3 || 3;
+  const groups = [parsed.integer.slice(0, firstGroupLength)];
+  for (let index = firstGroupLength; index < parsed.integer.length; index += 3) {
+    groups.push(parsed.integer.slice(index, index + 3));
+  }
+  const groupedInteger = groups.join(",");
+  const fraction = parsed.fraction.slice(0, fractionLimit);
+  return `${parsed.sign < 0 ? "-" : ""}${groupedInteger}${fraction ? `.${fraction}` : ""}`;
+}
+function creditUnitLabel(value, unitName) {
+  return compareDecimalStrings(value, "1") === 0 ? unitName : `${unitName}s`;
+}
 
 // src/components/portal/amounts.ts
 function walletAmountCents(credits, rate, currencyDigits) {
@@ -382,16 +645,16 @@ function walletAmountCents(credits, rate, currencyDigits) {
   return `${padded.slice(0, -scale)}.${padded.slice(-scale)}`;
 }
 var styles = `
-.nozle-cancellation{font:inherit;color:var(--nozle-portal-text,#202922)}
-.nozle-cancellation button{font:inherit;padding:9px 14px;border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:7px;background:var(--nozle-portal-background,#fff);color:inherit;cursor:pointer}
+.nozle-cancellation{font:${T.fontBody};color:${T.foreground}}
+.nozle-cancellation button{font:${T.fontAction};padding:9px 14px;border:var(--nozle-button-border-width, ${T.borderWidth}) solid ${T.input};border-radius:var(--nozle-button-radius, calc(${T.radius} * 0.6));background:${T.card};color:inherit;cursor:pointer}
 .nozle-cancellation button:disabled{opacity:.55;cursor:wait}
-.nozle-cancellation :focus-visible{outline:2px solid var(--nozle-portal-accent,#526949);outline-offset:3px}
+.nozle-cancellation :focus-visible{outline:2px solid ${T.primary};outline-offset:3px}
 .nozle-cancellation .nzc-backdrop{position:fixed;inset:0;background:#0006;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
-.nozle-cancellation .nzc-dialog{box-sizing:border-box;background:var(--nozle-portal-background,#fff);border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:12px;padding:24px;width:100%;max-width:440px;max-height:90dvh;overflow:auto;box-shadow:0 12px 48px #0003}
-.nozle-cancellation .nzc-dialog h3{margin:0 0 16px;font-size:20px}
-.nozle-cancellation .nzc-dialog p{margin:12px 0;line-height:1.55}
+.nozle-cancellation .nzc-dialog{box-sizing:border-box;background:${T.card};border:${T.borderWidth} solid ${T.border};border-radius:${T.radius};padding:24px;width:100%;max-width:440px;max-height:90dvh;overflow:auto;box-shadow:${T.shadow},0 12px 48px #0003}
+.nozle-cancellation .nzc-dialog h3{margin:0 0 16px;font:${T.fontTitle};letter-spacing:normal;color:${T.foreground}}
+.nozle-cancellation .nzc-dialog p{margin:12px 0}
 .nozle-cancellation .nzc-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px}
-.nozle-cancellation [role=alert]{color:#922e25}
+.nozle-cancellation [role=alert],.nozle-cancellation .nzc-danger{color:${T.dangerText}}
 `;
 function formatDate(value, locale, timezone) {
   const timeZone = timezone.startsWith("TZ_") ? portalTimezones[timezone] ?? "UTC" : timezone;
@@ -421,8 +684,10 @@ function CancellationFlow({
   onError,
   locale = "en-US",
   timezone = "UTC",
-  nonce
+  nonce,
+  appearance
 }) {
+  const { root } = useAppearance(appearance);
   const [open, setOpen] = useState(false);
   const [busy, setBusy] = useState(false);
   const [preview, setPreview] = useState();
@@ -609,7 +874,7 @@ function CancellationFlow({
         );
     });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "nozle-cancellation", children: [
+  return /* @__PURE__ */ jsxs("div", { ...root("cancellationControl", void 0, "nozle-cancellation"), children: [
     /* @__PURE__ */ jsx("style", { nonce, children: styles }),
     notice && /* @__PURE__ */ jsx("p", { role: "status", children: notice }),
     active && !expired && /* @__PURE__ */ jsx("button", { ref: trigger, type: "button", onClick: () => void loadPreview(), children: ending ? "Keep my subscription" : "Cancel subscription" }),
@@ -694,6 +959,7 @@ function CancellationFlow({
               "button",
               {
                 type: "button",
+                className: preview.operation === "cancel" ? "nzc-danger" : void 0,
                 disabled: busy,
                 onClick: () => void confirm(),
                 children: request.current ? "Check status / retry" : preview.operation === "cancel" ? "Confirm cancellation" : "Confirm keep subscription"
@@ -705,66 +971,6 @@ function CancellationFlow({
     ) })
   ] });
 }
-function createClient(publishableKey, baseUrl) {
-  let end = baseUrl.length;
-  while (end > 0 && baseUrl[end - 1] === "/") end--;
-  const base = baseUrl.slice(0, end);
-  return {
-    publishableKey,
-    baseUrl: base,
-    catalogFetch(path, init) {
-      return fetch(`${base}${path}`, {
-        ...init,
-        headers: {
-          Authorization: `Bearer ${publishableKey}`,
-          "Content-Type": "application/json",
-          ...init?.headers
-        }
-      });
-    }
-  };
-}
-var BillingContext = createContext(null);
-function BillingProvider({
-  publishableKey,
-  createCheckout,
-  verifyCheckout,
-  getCheckoutStatus,
-  baseUrl = "https://api.nozle.app/engine",
-  children
-}) {
-  if (!publishableKey.startsWith("pk_")) {
-    throw new Error(
-      "BillingProvider publishableKey must be a publishable key (pk_)"
-    );
-  }
-  const client = useMemo(
-    () => createClient(publishableKey, baseUrl),
-    [publishableKey, baseUrl]
-  );
-  const contextValue = useMemo(
-    () => ({ client, createCheckout, verifyCheckout, getCheckoutStatus }),
-    [client, createCheckout, verifyCheckout, getCheckoutStatus]
-  );
-  return React.createElement(
-    BillingContext.Provider,
-    { value: contextValue },
-    children
-  );
-}
-function useOptionalBillingContext() {
-  return useContext(BillingContext);
-}
-function useBillingContext() {
-  const context = useOptionalBillingContext();
-  if (!context) {
-    throw new Error("useBillingContext must be used within a BillingProvider");
-  }
-  return context;
-}
-function useNozleClient() {
-  return useBillingContext().client;
-}
 
 // src/components/billing/razorpay-checkout.ts
 var loadingScript;
@@ -979,8 +1185,10 @@ function CheckoutButton({
   onStripeClientSecret,
   onSuccess,
   onComplete,
-  onScheduled
+  onScheduled,
+  appearance
 }) {
+  const { root, vars } = useAppearance(appearance);
   const { createCheckout, verifyCheckout, getCheckoutStatus } = useBillingContext();
   const attempt = useRef(void 0);
   const inFlight = useRef(false);
@@ -1043,24 +1251,13 @@ function CheckoutButton({
         type: "button",
         onClick: () => void handleClick(),
         disabled: loading,
-        className,
-        style: {
-          padding: "0.75rem 1.5rem",
-          borderRadius: "var(--nozle-radius, 0.5rem)",
-          border: "none",
-          background: "var(--nozle-primary, var(--primary))",
-          color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-          cursor: loading ? "not-allowed" : "pointer",
-          fontWeight: 500,
-          opacity: loading ? 0.7 : 1,
-          ...style
-        },
+        ...root("checkoutButton", { ...buttonStyle("primary", loading), ...style }, className),
         "aria-busy": loading,
         children: loading ? "Loading..." : label
       }
     ),
-    processing && /* @__PURE__ */ jsx("span", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
-    error && /* @__PURE__ */ jsx("span", { role: "alert", children: error.message })
+    processing && /* @__PURE__ */ jsx("span", { role: "status", style: { ...vars, ...text.body }, children: "Payment is processing. Confirmation may take a little while." }),
+    error && /* @__PURE__ */ jsx("span", { role: "alert", style: { ...vars, ...text.body, color: T.dangerText }, children: error.message })
   ] });
 }
 var CheckoutContext = createContext(null);
@@ -1071,23 +1268,62 @@ function useCheckout() {
   }
   return ctx;
 }
-function buildStripeAppearance() {
-  if (typeof document === "undefined") {
-    return { theme: "stripe" };
-  }
-  const style = getComputedStyle(document.documentElement);
-  const get = (prop, fallback) => style.getPropertyValue(prop).trim() || fallback;
-  return {
-    theme: "stripe",
-    variables: {
-      colorPrimary: get("--nozle-primary", "#16a34a"),
-      colorBackground: get("--nozle-background", "#f8fafc"),
-      colorText: get("--nozle-foreground", "#1e293b"),
-      colorDanger: get("--nozle-destructive", "#dc2626"),
-      borderRadius: get("--nozle-radius", "0.5rem"),
-      fontFamily: "inherit"
+function rgb(color) {
+  const match = color?.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+  return match ? [Number(match[1]), Number(match[2]), Number(match[3])] : null;
+}
+function stripeColor(color) {
+  return rgb(color) ? color : color?.startsWith("#") ? color : void 0;
+}
+function toStripeAppearance(colors) {
+  const background = rgb(colors.background);
+  const dark = background ? (0.2126 * background[0] + 0.7152 * background[1] + 0.0722 * background[2]) / 255 < 0.5 : false;
+  const variables = Object.fromEntries(
+    Object.entries({
+      colorPrimary: stripeColor(colors.primary),
+      colorBackground: stripeColor(colors.background),
+      colorText: stripeColor(colors.foreground),
+      colorDanger: stripeColor(colors.danger),
+      borderRadius: colors.radius,
+      fontFamily: colors.font
+    }).filter(([, value]) => value)
+  );
+  return { theme: dark ? "night" : "stripe", variables };
+}
+function useStripeAppearance(appearanceKey) {
+  const probe = useRef(null);
+  const [stripeAppearance, setStripeAppearance] = useState(null);
+  useEffect(() => {
+    if (!probe.current) return;
+    const style = getComputedStyle(probe.current);
+    setStripeAppearance(
+      toStripeAppearance({
+        primary: style.color,
+        background: style.backgroundColor,
+        foreground: style.borderTopColor,
+        danger: style.borderBottomColor,
+        radius: style.borderTopLeftRadius,
+        font: style.fontFamily
+      })
+    );
+  }, [appearanceKey]);
+  const probeElement = /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: probe,
+      "aria-hidden": "true",
+      style: {
+        display: "none",
+        color: T.primary,
+        backgroundColor: T.card,
+        borderTop: `1px solid ${T.foreground}`,
+        borderBottom: `1px solid ${T.danger}`,
+        borderRadius: T.radius,
+        fontFamily: T.font
+      }
     }
-  };
+  );
+  return { probeElement, stripeAppearance };
 }
 function CheckoutInner({
   submitLabel,
@@ -1097,10 +1333,12 @@ function CheckoutInner({
   className,
   style,
   returnUrl,
-  children
+  children,
+  appearance
 }) {
   const stripe = useStripe();
   const elements = useElements();
+  const { el } = useAppearance(appearance);
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState(null);
   const [isReady, setIsReady] = useState(false);
@@ -1134,7 +1372,7 @@ function CheckoutInner({
       setIsProcessing(false);
     }
   }
-  return /* @__PURE__ */ jsx(CheckoutContext.Provider, { value: { confirmPayment, isProcessing, error }, children: /* @__PURE__ */ jsxs("div", { className, style, children: [
+  return /* @__PURE__ */ jsx(CheckoutContext.Provider, { value: { confirmPayment, isProcessing, error }, children: /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("style", { children: `@keyframes nozle-skeleton-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }` }),
     !isReady && /* @__PURE__ */ jsx(
       "div",
@@ -1142,8 +1380,8 @@ function CheckoutInner({
         "data-testid": "checkout-skeleton",
         style: {
           height: "200px",
-          borderRadius: "var(--nozle-radius, 0.5rem)",
-          background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+          borderRadius: T.radius,
+          background: `linear-gradient(90deg, ${T.muted} 25%, ${T.skeleton} 50%, ${T.muted} 75%)`,
           backgroundSize: "200% 100%",
           animation: "nozle-skeleton-pulse 1.5s ease-in-out infinite"
         }
@@ -1158,16 +1396,7 @@ function CheckoutInner({
         }
       }
     ),
-    error !== null && /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          color: "var(--nozle-destructive, #dc2626)",
-          margin: "0.5rem 0 0"
-        },
-        children: error.message
-      }
-    ),
+    error !== null && /* @__PURE__ */ jsx("p", { ...el("checkout__error", { color: T.dangerText, margin: "0.5rem 0 0" }), children: error.message }),
     children ?? /* @__PURE__ */ jsx(
       "button",
       {
@@ -1175,18 +1404,7 @@ function CheckoutInner({
         onClick: () => void confirmPayment(),
         disabled: isProcessing || !stripe,
         "aria-busy": isProcessing,
-        style: {
-          padding: "0.75rem 1.5rem",
-          borderRadius: "var(--nozle-radius, 0.5rem)",
-          border: "none",
-          background: "var(--nozle-primary, var(--primary))",
-          color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-          cursor: isProcessing ? "not-allowed" : "pointer",
-          fontWeight: 500,
-          opacity: isProcessing ? 0.7 : 1,
-          marginTop: "1rem",
-          width: "100%"
-        },
+        ...el("checkout__submit", { ...buttonStyle("primary", isProcessing), marginTop: "1rem", width: "100%" }),
         children: isProcessing ? "Processing..." : submitLabel ?? "Pay now"
       }
     )
@@ -1204,19 +1422,21 @@ function StripeCheckout({
   onReady,
   className,
   style,
-  children
+  children,
+  appearance: themeAppearance
 }) {
+  const { root } = useAppearance(themeAppearance);
+  const { probeElement, stripeAppearance } = useStripeAppearance(JSON.stringify(root("checkout").style));
   const stripePromise = useMemo(
     () => loadStripe(publishableKey, stripeAccount ? { stripeAccount } : void 0),
     [publishableKey, stripeAccount]
   );
-  const appearance = useMemo(() => buildStripeAppearance(), []);
   const embeddedOptions = useMemo(
     () => ({ clientSecret, onComplete }),
     [clientSecret, onComplete]
   );
   if (clientSecret.startsWith("cs_")) {
-    return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { ...root("checkout", { ...text.body, ...style }, className), children: /* @__PURE__ */ jsx(
       EmbeddedCheckoutProvider,
       {
         stripe: stripePromise,
@@ -1225,23 +1445,26 @@ function StripeCheckout({
       }
     ) });
   }
-  const options = { clientSecret, appearance };
-  return /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options, children: /* @__PURE__ */ jsx(
-    CheckoutInner,
-    {
-      submitLabel,
-      onSuccess,
-      onError,
-      onReady,
-      className,
-      style,
-      returnUrl,
-      children
-    }
-  ) }, clientSecret);
+  const options = stripeAppearance && { clientSecret, appearance: stripeAppearance };
+  return /* @__PURE__ */ jsxs("div", { ...root("checkout", { ...text.body, ...style }, className), children: [
+    probeElement,
+    options && /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options, children: /* @__PURE__ */ jsx(
+      CheckoutInner,
+      {
+        submitLabel,
+        onSuccess,
+        onError,
+        onReady,
+        returnUrl,
+        children,
+        appearance: themeAppearance
+      }
+    ) }, clientSecret)
+  ] });
 }
 function ProviderCheckout(props) {
   const billing = useOptionalBillingContext();
+  const { root, el } = useAppearance(props.appearance);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(null);
   const [processing, setProcessing] = useState(false);
@@ -1291,17 +1514,19 @@ function ProviderCheckout(props) {
           submitLabel: props.submitLabel,
           onSuccess: props.onSuccess,
           onComplete: props.onComplete,
-          onError: props.onError
+          onError: props.onError,
+          className: props.className,
+          appearance: props.appearance
         }
       );
     }
-    return /* @__PURE__ */ jsx("p", { role: "alert", children: "Payment setup is incomplete. Contact support to continue." });
+    return /* @__PURE__ */ jsx("p", { ...root("checkout", { ...text.body, color: T.dangerText }, props.className), role: "alert", children: "Payment setup is incomplete. Contact support to continue." });
   }
   return /* @__PURE__ */ jsx(
     CheckoutContext.Provider,
     {
       value: { confirmPayment: pay, isProcessing: busy, error },
-      children: /* @__PURE__ */ jsxs("div", { className: props.className, children: [
+      children: /* @__PURE__ */ jsxs("div", { ...root("checkout", text.body, props.className), children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1309,28 +1534,30 @@ function ProviderCheckout(props) {
             disabled: busy,
             "aria-busy": busy,
             onClick: () => void pay(),
+            ...el("checkout__submit", buttonStyle("primary", busy)),
             children: busy ? "Processing\u2026" : props.submitLabel || "Pay now"
           }
         ),
         processing && /* @__PURE__ */ jsx("p", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error.message })
+        error && /* @__PURE__ */ jsx("p", { role: "alert", ...el("checkout__error", { color: T.dangerText }), children: error.message })
       ] })
     }
   );
 }
 function Checkout(props) {
-  return "checkout" in props ? /* @__PURE__ */ jsx(ProviderCheckout, { ...props }) : /* @__PURE__ */ jsx(StripeCheckout, { ...props });
+  return /* @__PURE__ */ jsx(NozleBranding, { children: "checkout" in props ? /* @__PURE__ */ jsx(ProviderCheckout, { ...props }) : /* @__PURE__ */ jsx(StripeCheckout, { ...props }) });
 }
 var styles2 = `
-.nozle-upgrade-modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;color:var(--nozle-portal-text,#202922);font:inherit}
-.nozle-upgrade-modal .nzu-dialog{box-sizing:border-box;background:var(--nozle-portal-background,#fff);border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:12px;padding:24px;max-width:480px;width:100%;max-height:90dvh;overflow:auto;box-shadow:0 12px 48px #0003}
-.nozle-upgrade-modal h2{font-size:20px;margin:0 0 16px}
-.nozle-upgrade-modal p{line-height:1.55}
-.nozle-upgrade-modal button{font:inherit;padding:9px 14px;border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:7px;background:var(--nozle-portal-background,#fff);color:inherit;cursor:pointer}
-.nozle-upgrade-modal button:disabled{opacity:.55;cursor:wait}
-.nozle-upgrade-modal :focus-visible{outline:2px solid var(--nozle-portal-accent,#526949);outline-offset:3px}
-.nozle-upgrade-modal .nzu-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:20px}
-.nozle-upgrade-modal [role=alert]{color:#922e25}
+.nozle-upgradeModal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;color:${T.foreground};font:${T.fontBody}}
+.nozle-upgradeModal .nozle-upgradeModal__dialog{box-sizing:border-box;background:${T.card};border:${T.borderWidth} solid ${T.border};border-radius:${T.radius};padding:24px;max-width:480px;width:100%;max-height:90dvh;overflow:auto;box-shadow:${T.shadow},0 12px 48px #0003}
+.nozle-upgradeModal h2{font:${T.fontTitle};letter-spacing:normal;color:${T.foreground};margin:0 0 16px}
+.nozle-upgradeModal button{font:${T.fontAction};padding:9px 14px;border:var(--nozle-button-border-width, ${T.borderWidth}) solid ${T.input};border-radius:var(--nozle-button-radius, calc(${T.radius} * 0.6));background:${T.card};color:inherit;cursor:pointer}
+.nozle-upgradeModal button.nzu-primary{background:${T.primary};border-color:var(--nozle-button-border, ${T.primary});box-shadow:var(--nozle-button-shadow, none);color:${T.primaryForeground}}
+.nozle-upgradeModal button:disabled{opacity:.55;cursor:wait}
+.nozle-upgradeModal :focus-visible{outline:2px solid ${T.primary};outline-offset:3px}
+.nozle-upgradeModal .nozle-upgradeModal__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:20px}
+.nozle-upgradeModal .nzu-back{margin-right:auto}
+.nozle-upgradeModal [role=alert]{color:${T.dangerText}}
 `;
 function UpgradeModal(props) {
   const billing = useOptionalBillingContext();
@@ -1341,6 +1568,7 @@ function UpgradeModal(props) {
   const dialog = useRef(null);
   const titleId = useId();
   const busy = Boolean(props.busy || confirming);
+  const { root, el } = useAppearance(props.appearance);
   useEffect(() => {
     if (!props.isOpen) return;
     const previous = document.activeElement;
@@ -1400,17 +1628,17 @@ function UpgradeModal(props) {
     }
   }
   if (!props.isOpen) return null;
-  const money2 = (value) => new Intl.NumberFormat(props.locale ?? "en-US", {
+  const money3 = (value) => new Intl.NumberFormat(props.locale ?? "en-US", {
     style: "currency",
     currency: props.preview?.currency ?? "USD"
   }).format(value);
-  return /* @__PURE__ */ jsxs("div", { className: "nozle-upgrade-modal", children: [
+  return /* @__PURE__ */ jsxs("div", { ...root("upgradeModal", void 0, "nozle-upgrade-modal"), children: [
     /* @__PURE__ */ jsx("style", { nonce: props.nonce, children: styles2 }),
     /* @__PURE__ */ jsxs(
       "div",
       {
         ref: dialog,
-        className: "nzu-dialog",
+        ...el("upgradeModal__dialog"),
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": titleId,
@@ -1448,15 +1676,15 @@ function UpgradeModal(props) {
           props.preview && /* @__PURE__ */ jsxs("div", { children: [
             props.preview.credit > 0 && /* @__PURE__ */ jsxs("p", { children: [
               "Credits applied: ",
-              money2(-props.preview.credit)
+              money3(-props.preview.credit)
             ] }),
             /* @__PURE__ */ jsxs("p", { children: [
               "New plan charge: ",
-              money2(props.preview.debit)
+              money3(props.preview.debit)
             ] }),
             /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsxs("strong", { children: [
               "Due today: ",
-              money2(props.preview.net)
+              money3(props.preview.net)
             ] }) }),
             /* @__PURE__ */ jsxs("p", { children: [
               "Next billing date:",
@@ -1468,18 +1696,21 @@ function UpgradeModal(props) {
             ] })
           ] }),
           props.children,
-          /* @__PURE__ */ jsxs("div", { className: "nzu-buttons", children: [
+          /* @__PURE__ */ jsxs("div", { ...el("upgradeModal__actions"), children: [
+            props.onBack && /* @__PURE__ */ jsx("button", { type: "button", className: "nzu-back", onClick: props.onBack, disabled: busy, children: "Back" }),
             /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onCancel, disabled: busy, children: "Close" }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
+                className: "nzu-primary",
                 onClick: () => void handleConfirm(),
                 disabled: busy || props.confirmDisabled,
                 children: busy ? "Checking subscription\u2026" : props.confirmLabel ?? "Confirm"
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx(NozleBranding, {})
         ]
       }
     )
@@ -1527,17 +1758,181 @@ function formatBillingDate(value, locale = "en-US", timezone) {
     }).format(new Date(value));
   }
 }
+
+// src/components/pricing/plan-features.ts
+function number(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed.toLocaleString("en-US", { maximumFractionDigits: 6 }) : String(value);
+}
+function money(amount, currency) {
+  const parsed = Number(amount);
+  if (!Number.isFinite(parsed)) return `${amount} ${currency}`;
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 6 }).format(parsed);
+  } catch {
+    return `${currency} ${number(amount)}`;
+  }
+}
+function words(code) {
+  return code.replace(/_/g, " ");
+}
+function entitlementRows(entitlement) {
+  if (entitlement.feature_type === "config") {
+    return (entitlement.privileges ?? []).flatMap((privilege) => {
+      if (privilege.value === null || privilege.value === false) return [];
+      if (privilege.value === true) return [`${entitlement.name}: ${privilege.name}`];
+      return [`${entitlement.name}: ${privilege.value}`];
+    });
+  }
+  if (entitlement.feature_type === "metered" && entitlement.usage_limit != null) {
+    return [`${number(entitlement.usage_limit)} ${entitlement.name}`];
+  }
+  return [entitlement.name];
+}
+function creditGrantRow(rule) {
+  const credits = `${number(rule.amount)} ${words(rule.credit_system_code)}`;
+  if (rule.interval === "lifetime") return `${credits} (one time)`;
+  const count = rule.interval_count ?? 1;
+  return count === 1 ? `${credits} every ${rule.interval}` : `${credits} every ${count} ${rule.interval}s`;
+}
+function isZero(amount) {
+  return amount === void 0 || Number(amount) === 0;
+}
+function rangeLabel(range, unit) {
+  const from = number(range.from_value);
+  return range.to_value === null ? `${from}+ ${unit}` : `${from} to ${number(range.to_value)} ${unit}`;
+}
+function rangeRows(ranges, unit, currency) {
+  return ranges.map((range) => {
+    const parts = [];
+    if (!isZero(range.flat_amount)) parts.push(`${money(range.flat_amount, currency)} flat`);
+    if (!isZero(range.per_unit_amount)) parts.push(`${money(range.per_unit_amount, currency)} each`);
+    if (!isZero(range.rate)) parts.push(`${number(range.rate)}%`);
+    return `${rangeLabel(range, unit)}: ${parts.length ? parts.join(" + ") : "free"}`;
+  });
+}
+function chargeRows(charge, currency) {
+  const properties = charge.properties ?? {};
+  const unit = charge.feature_code ? words(charge.feature_code) : "unit";
+  switch (charge.charge_model) {
+    case "standard":
+      return properties.amount === void 0 ? [] : [`${money(properties.amount, currency)} per ${unit}`];
+    case "package": {
+      if (properties.amount === void 0 || !properties.package_size) return [];
+      const free = properties.free_units ? `, first ${number(properties.free_units)} free` : "";
+      return [`${money(properties.amount, currency)} per ${number(properties.package_size)} ${unit}${free}`];
+    }
+    case "graduated":
+      return rangeRows(properties.graduated_ranges ?? [], unit, currency);
+    case "volume":
+      return rangeRows(properties.volume_ranges ?? [], unit, currency);
+    case "graduated_percentage":
+      return rangeRows(properties.graduated_percentage_ranges ?? [], unit, currency);
+    case "percentage": {
+      if (properties.rate === void 0) return [];
+      const fixed = isZero(properties.fixed_amount) ? "" : ` + ${money(properties.fixed_amount, currency)} per ${unit}`;
+      return [`${number(properties.rate)}% of each ${unit}${fixed}`];
+    }
+    default:
+      return [];
+  }
+}
+function planFeatures(plan) {
+  const rows = (plan.entitlements ?? []).flatMap(entitlementRows);
+  rows.push(...(plan.credit_grant_rules ?? []).map(creditGrantRow));
+  for (const charge of plan.charges ?? []) rows.push(...chargeRows(charge, plan.amount_currency));
+  return rows;
+}
+var INTERVAL_LABELS = {
+  weekly: "week",
+  monthly: "month",
+  quarterly: "quarter",
+  semiannual: "6 months",
+  yearly: "year"
+};
+function intervalLabel(interval) {
+  return INTERVAL_LABELS[interval] ?? interval;
+}
+function formatPlanPrice(amountCents, currency) {
+  const amount = amountCents / 100;
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency,
+      minimumFractionDigits: Number.isInteger(amount) ? 0 : 2,
+      maximumFractionDigits: 2
+    }).format(amount);
+  } catch {
+    return `${currency} ${amount}`;
+  }
+}
+function entitlementValue(entitlement) {
+  if (entitlement.feature_type === "config") {
+    const values = (entitlement.privileges ?? []).filter((privilege) => privilege.value !== null && privilege.value !== false).map((privilege) => privilege.value === true ? privilege.name : String(privilege.value));
+    return values.length ? values.join(", ") : false;
+  }
+  if (entitlement.feature_type === "metered" && entitlement.usage_limit != null) {
+    return number(entitlement.usage_limit);
+  }
+  return true;
+}
+function comparisonRows(plans) {
+  const rows = /* @__PURE__ */ new Map();
+  const row = (key, label) => {
+    let existing = rows.get(key);
+    if (!existing) {
+      existing = { key, label, values: {} };
+      rows.set(key, existing);
+    }
+    return existing;
+  };
+  for (const plan of plans) {
+    for (const entitlement of plan.entitlements ?? []) {
+      row(`entitlement:${entitlement.code}`, entitlement.name).values[plan.code] = entitlementValue(entitlement);
+    }
+    for (const rule of plan.credit_grant_rules ?? []) {
+      row(`credit:${rule.credit_system_code}`, words(rule.credit_system_code)).values[plan.code] = creditGrantRow(rule);
+    }
+  }
+  const all = [...rows.values()];
+  for (const item of all) {
+    for (const plan of plans) item.values[plan.code] ??= false;
+  }
+  return all;
+}
+function sortPlansByPrice(plans) {
+  const currencyRank = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    if (!currencyRank.has(plan.amount_currency)) currencyRank.set(plan.amount_currency, currencyRank.size);
+  }
+  return plans.map((plan, index) => ({ plan, index })).sort(
+    (a, b) => currencyRank.get(a.plan.amount_currency) - currencyRank.get(b.plan.amount_currency) || a.plan.amount_cents - b.plan.amount_cents || a.index - b.index
+  ).map(({ plan }) => plan);
+}
 var styles3 = `
-.nozle-plan-change{font:inherit;color:var(--nozle-portal-text,#202922);margin-top:12px}
-.nozle-plan-change button{font:inherit;padding:9px 14px;border:1px solid var(--nozle-portal-border,#dce2d9);border-radius:7px;background:var(--nozle-portal-background,#fff);color:inherit;cursor:pointer}
+.nozle-plan-change{font:${T.fontBody};color:${T.foreground};margin-top:12px}
+.nozle-plan-change button{font:${T.fontAction};padding:9px 14px;border:var(--nozle-button-border-width, ${T.borderWidth}) solid ${T.input};border-radius:var(--nozle-button-radius, calc(${T.radius} * 0.6));background:${T.card};color:inherit;cursor:pointer}
 .nozle-plan-change button:disabled{opacity:.55;cursor:wait}
-.nozle-plan-change :focus-visible{outline:2px solid var(--nozle-portal-accent,#526949);outline-offset:3px}
-.nozle-plan-change [role=alert]{color:#922e25}
+.nozle-plan-change :focus-visible{outline:2px solid ${T.primary};outline-offset:3px}
+.nozle-plan-change [role=alert]{color:${T.dangerText}}
 .nozle-plan-change .nzpc-actions{display:flex;gap:10px;flex-wrap:wrap}
-.nozle-upgrade-modal select{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:10px;margin:8px 0;border:1px solid #dce2d9;border-radius:7px;background:var(--nozle-portal-background,#fff)}
+.nozle-upgrade-modal select{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:10px;margin:8px 0;border:${T.borderWidth} solid ${T.border};border-radius:calc(${T.radius} * 0.6);background:${T.card}}
 .nozle-upgrade-modal dl{display:block;margin:16px 0;padding:0}
 .nozle-upgrade-modal dl div{display:flex;justify-content:space-between;gap:16px;margin:12px 0}
+.nozle-upgrade-modal dt{font:${T.fontMeta};color:${T.mutedForeground}}
 .nozle-upgrade-modal dd{margin:0;text-align:right}
+.nozle-upgrade-modal label{font:${T.fontBody};font-weight:500}
+.nozle-plan-change .nzpc-plans{display:grid;gap:10px}
+.nozle-plan-change label.nzpc-plan{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:${T.borderWidth} solid ${T.border};border-radius:calc(${T.radius} * 0.75);background:${T.card};cursor:pointer;font:${T.fontBody};color:${T.foreground}}
+.nozle-plan-change label.nzpc-plan[data-selected]{border-color:${T.primary};background:${T.primarySoft}}
+.nozle-plan-change label.nzpc-plan input{flex:none;width:auto;margin:4px 0 0;padding:0;accent-color:${T.primary}}
+.nozle-plan-change .nzpc-plan-body{display:grid;gap:4px;min-width:0;flex:1}
+.nozle-plan-change .nzpc-plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
+.nozle-plan-change .nzpc-plan-name{font:${T.fontHeading}}
+.nozle-plan-change .nzpc-plan-op{font:${T.labelFont};letter-spacing:${T.labelSpacing};text-transform:${T.labelTransform};color:${T.mutedForeground}}
+.nozle-plan-change .nzpc-plan-price{font-variant-numeric:tabular-nums}
+.nozle-plan-change .nzpc-plan-muted{font:${T.fontMeta};color:${T.mutedForeground};margin:0}
+.nozle-plan-change .nzpc-plan ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:2px;font:${T.fontMeta};color:${T.mutedForeground}}
 `;
 var paymentPending = (state) => ["awaiting_payment", "processing", "needs_review"].includes(
   state.checkoutStatus
@@ -1564,8 +1959,10 @@ function PlanChangeFlow({
   returnUrl,
   locale = "en-US",
   timezone = "UTC",
-  nonce
+  nonce,
+  appearance
 }) {
+  const { root } = useAppearance(appearance);
   const owner = useMemo(
     () => ({ controller: new AbortController() }),
     [subscriptionId, actions]
@@ -1580,6 +1977,11 @@ function PlanChangeFlow({
     null
   );
   const [target, setTarget] = useState("");
+  const billing = useOptionalBillingContext();
+  const catalog = useQuery(
+    { ...catalogQuery(billing?.client), enabled: Boolean(billing) },
+    billing?.queryClient ?? idleQueryClient
+  );
   const [quote, setQuote] = useState();
   const [checkout, setCheckout] = useState(null);
   const [withdrawTarget, setWithdrawTarget] = useState();
@@ -1847,7 +2249,7 @@ function PlanChangeFlow({
     await reconcile(signal);
   });
   const selected = state?.eligiblePlans.find((plan) => plan.code === target);
-  const money2 = (amount) => formatMinorAmount(
+  const money3 = (amount) => formatMinorAmount(
     amount,
     quote?.currency ?? state?.currentPlan.currency ?? "USD",
     locale
@@ -1855,7 +2257,7 @@ function PlanChangeFlow({
   const blocked = Boolean(
     state?.endingAt || state?.pendingChange || state && paymentPending(state) || state?.blockedReason || pending.current?.accepted
   );
-  return /* @__PURE__ */ jsxs("div", { className: "nozle-plan-change", children: [
+  return /* @__PURE__ */ jsxs("div", { ...root("planChangeControl", void 0, "nozle-plan-change"), children: [
     /* @__PURE__ */ jsx("style", { nonce, children: styles3 }),
     !state ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("p", { role: "status", children: "Loading plan changes\u2026" }),
@@ -1953,6 +2355,7 @@ function PlanChangeFlow({
       /* @__PURE__ */ jsxs(
         UpgradeModal,
         {
+          appearance,
           isOpen: mode !== null,
           planCode: target,
           title: mode === "withdraw" ? "Keep your current plan?" : mode === "choose" ? "Change plan" : `Confirm ${quote?.operation ?? "plan change"}`,
@@ -1961,42 +2364,55 @@ function PlanChangeFlow({
           confirmDisabled: mode === "choose" && (!target || blocked) || mode === "confirm" && !quote,
           confirmLabel: pending.current?.attempted ? "Check status / retry" : mode === "choose" ? "Review change" : mode === "withdraw" ? "Confirm keep current plan" : quote?.operation === "downgrade" ? "Confirm downgrade" : "Confirm upgrade",
           onCancel: () => setMode(null),
+          onBack: mode === "confirm" ? () => {
+            setMode("choose");
+            setQuote(void 0);
+            setFailure(void 0);
+          } : void 0,
           onSubmit: confirm,
           children: [
             failure && /* @__PURE__ */ jsx("p", { role: "alert", children: failure }),
-            mode === "choose" && /* @__PURE__ */ jsxs("label", { children: [
-              "Choose a plan",
-              /* @__PURE__ */ jsxs(
-                "select",
+            mode === "choose" && /* @__PURE__ */ jsx("div", { className: "nzpc-plans", role: "radiogroup", "aria-label": "Choose a plan", children: state.eligiblePlans.map((plan) => {
+              const details = catalog.data?.plans.find((entry) => entry.code === plan.code);
+              const features = details ? planFeatures(details) : [];
+              return /* @__PURE__ */ jsxs(
+                "label",
                 {
-                  value: target,
-                  onChange: (event) => {
-                    setTarget(event.target.value);
-                    setQuote(void 0);
-                  },
-                  disabled: busy,
+                  className: "nzpc-plan",
+                  "data-selected": target === plan.code ? "" : void 0,
                   children: [
-                    /* @__PURE__ */ jsx("option", { value: "", children: "Select a plan" }),
-                    state.eligiblePlans.map((plan) => /* @__PURE__ */ jsxs("option", { value: plan.code, children: [
-                      plan.name,
-                      " \u2014",
-                      " ",
-                      formatMinorAmount(
-                        plan.amountCents,
-                        plan.currency,
-                        locale
-                      ),
-                      " ",
-                      "/ ",
-                      plan.interval,
-                      " (",
-                      plan.operation,
-                      ")"
-                    ] }, plan.code))
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: `nozle-plan-${subscriptionId}`,
+                        value: plan.code,
+                        checked: target === plan.code,
+                        disabled: busy,
+                        onChange: () => {
+                          setTarget(plan.code);
+                          setQuote(void 0);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "nzpc-plan-body", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "nzpc-plan-head", children: [
+                        /* @__PURE__ */ jsx("span", { className: "nzpc-plan-name", children: plan.name }),
+                        /* @__PURE__ */ jsx("span", { className: "nzpc-plan-op", children: plan.operation === "upgrade" ? "Upgrade" : "Downgrade" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "nzpc-plan-price", children: [
+                        formatMinorAmount(plan.amountCents, plan.currency, locale),
+                        " / ",
+                        plan.interval
+                      ] }),
+                      details?.description && /* @__PURE__ */ jsx("p", { className: "nzpc-plan-muted", children: details.description }),
+                      features.length > 0 && /* @__PURE__ */ jsx("ul", { children: features.map((feature) => /* @__PURE__ */ jsx("li", { children: feature }, feature)) })
+                    ] })
                   ]
-                }
-              )
-            ] }),
+                },
+                plan.code
+              );
+            }) }),
             mode === "withdraw" && /* @__PURE__ */ jsxs("p", { children: [
               "Remove the scheduled change to ",
               withdrawTarget?.name,
@@ -2025,19 +2441,19 @@ function PlanChangeFlow({
               /* @__PURE__ */ jsxs("dl", { children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("dt", { children: "New plan charge" }),
-                  /* @__PURE__ */ jsx("dd", { children: money2(quote.debitAmountCents) })
+                  /* @__PURE__ */ jsx("dd", { children: money3(quote.debitAmountCents) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("dt", { children: "Credits applied" }),
-                  /* @__PURE__ */ jsx("dd", { children: money2(quote.creditAmountCents) })
+                  /* @__PURE__ */ jsx("dd", { children: money3(quote.creditAmountCents) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("dt", { children: "Due now" }),
-                  /* @__PURE__ */ jsx("dd", { children: money2(quote.amountDueNowCents) })
+                  /* @__PURE__ */ jsx("dd", { children: money3(quote.amountDueNowCents) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("dt", { children: "Due at effective date" }),
-                  /* @__PURE__ */ jsx("dd", { children: money2(quote.amountDueAtEffectiveCents) })
+                  /* @__PURE__ */ jsx("dd", { children: money3(quote.amountDueAtEffectiveCents) })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("p", { children: [
@@ -2056,6 +2472,19 @@ function PlanChangeFlow({
     ] })
   ] });
 }
+var PortalAppearance = createContext({
+  el: (key) => ({ className: "nozle-" + key })
+});
+function Part({
+  as: Tag = "div",
+  part,
+  className,
+  style,
+  ...rest
+}) {
+  const themed = useContext(PortalAppearance).el(part, style, className);
+  return /* @__PURE__ */ jsx(Tag, { ...rest, ...themed });
+}
 function asError(error) {
   return error instanceof BillingPortalError ? error : new BillingPortalError("request");
 }
@@ -2067,8 +2496,10 @@ function BillingPortal({
   className = "",
   style,
   nonce,
-  onError
+  onError,
+  appearance
 }) {
+  const { root, el } = useAppearance(appearance);
   const [attempt, setAttempt] = useState(0);
   const [state, setState] = useState();
   const errorCallback = useRef(onError);
@@ -2105,11 +2536,10 @@ function BillingPortal({
   }, [createSession, attempt]);
   const current = state?.source === createSession && state.attempt === attempt ? state : void 0;
   const reconnect = () => setAttempt((value) => value + 1);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(PortalAppearance.Provider, { value: { el, appearance }, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `nozle-billing-portal ${className}`,
-      style,
+      ...root("billingPortal", style, `nozle-billing-portal ${className}`),
       "aria-label": "Nozle billing portal",
       children: [
         /* @__PURE__ */ jsx("style", { nonce, children: portalStyles }),
@@ -2128,9 +2558,9 @@ function BillingPortal({
         ) : current?.error ? /* @__PURE__ */ jsx(Failure, { error: current.error, retry: reconnect }) : /* @__PURE__ */ jsx(Loading, { label: "Starting billing session\u2026" })
       ]
     }
-  );
+  ) });
 }
-function useQuery(client, query, variables, onError, retainDuringRefresh = false) {
+function useQuery4(client, query, variables, onError, retainDuringRefresh = false) {
   const [attempt, setAttempt] = useState(0);
   const key = JSON.stringify(variables);
   const [state, setState] = useState();
@@ -2195,12 +2625,12 @@ function Failure({
   reconnect
 }) {
   const action = error.code === "unauthorized" ? reconnect ?? retry : retry;
-  return /* @__PURE__ */ jsxs("div", { role: "alert", className: "nzp-error", children: [
+  return /* @__PURE__ */ jsxs(Part, { role: "alert", className: "nzp-error", part: "billingPortal__error", children: [
     /* @__PURE__ */ jsx("span", { children: error.message }),
     action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action, children: error.code === "unauthorized" ? "Reconnect" : "Try again" })
   ] });
 }
-function money(cents, currency, locale) {
+function money2(cents, currency, locale) {
   const formatter = new Intl.NumberFormat(locale, {
     style: "currency",
     currency
@@ -2227,7 +2657,7 @@ var intervals = {
 };
 function Portal(props) {
   const { client, locale, reconnect, onError } = props;
-  const { data, error, retry } = useQuery(
+  const { data, error, retry } = useQuery4(
     client,
     identityQuery,
     {},
@@ -2240,7 +2670,7 @@ function Portal(props) {
     return /* @__PURE__ */ jsx(Failure, { error, retry, reconnect });
   if (!data) return /* @__PURE__ */ jsx(Loading, {});
   const customer = data.customerPortalUser;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(NozleBranding, { show: data.customerPortalOrganization.nozleBranding === true, children: [
     /* @__PURE__ */ jsxs("header", { children: [
       /* @__PURE__ */ jsxs("div", { className: "nzp-row", children: [
         /* @__PURE__ */ jsx("span", { className: "nzp-muted", children: data.customerPortalOrganization.name }),
@@ -2249,7 +2679,7 @@ function Portal(props) {
       /* @__PURE__ */ jsx("h2", { children: "Billing portal" }),
       /* @__PURE__ */ jsx("p", { className: "nzp-muted", children: customer.name || [customer.firstname, customer.lastname].filter(Boolean).join(" ") || customer.email || "Your account" })
     ] }),
-    notice && /* @__PURE__ */ jsx("p", { role: "status", children: notice }),
+    notice && /* @__PURE__ */ jsx("p", { className: "nzp-notice", role: "status", children: notice }),
     view.kind !== "overview" && /* @__PURE__ */ jsx("button", { type: "button", onClick: back, children: "\u2190 Back to overview" }),
     view.kind === "overview" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -2267,7 +2697,7 @@ function Portal(props) {
           onWallet: (wallet) => setView({ kind: "wallet", wallet })
         }
       ),
-      /* @__PURE__ */ jsxs("section", { "aria-label": "Billing information", children: [
+      /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Billing information", children: [
         /* @__PURE__ */ jsxs("div", { className: "nzp-row", children: [
           /* @__PURE__ */ jsx("h3", { children: "Billing information" }),
           /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setView({ kind: "edit" }), children: "Edit billing information" })
@@ -2337,8 +2767,7 @@ function Portal(props) {
           back();
         }
       }
-    ),
-    /* @__PURE__ */ jsx("footer", { children: "Powered by Nozle" })
+    )
   ] });
 }
 function Pager({
@@ -2385,17 +2814,20 @@ function Subscriptions({
   planChangeActions,
   nonce
 }) {
+  const portalAppearance = useContext(PortalAppearance).appearance;
   const [page, setPage] = useState(1);
   const [updated, setUpdated] = useState({});
-  const { data, error, retry } = useQuery(client, subscriptionsQuery, { page }, onError, true);
+  const { data, error, retry } = useQuery4(client, subscriptionsQuery, { page }, onError, true);
   const result = data?.customerPortalSubscriptions;
   useEffect(() => setUpdated({}), [result]);
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Subscriptions", children: [
+  return /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Subscriptions", children: [
     /* @__PURE__ */ jsx("h3", { children: "Subscriptions" }),
     error ? /* @__PURE__ */ jsx(Failure, { error, retry, reconnect }) : !result ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
       result.collection.length === 0 ? /* @__PURE__ */ jsx("p", { className: "nzp-empty", children: "No active subscriptions." }) : /* @__PURE__ */ jsx("div", { className: "nzp-stack", children: result.collection.map((item) => updated[item.id] ?? item).map((subscription) => /* @__PURE__ */ jsxs(
-        "article",
+        Part,
         {
+          as: "article",
+          part: "billingPortal__card",
           className: "nzp-card",
           "data-subscription-id": subscription.externalId,
           children: [
@@ -2404,7 +2836,7 @@ function Subscriptions({
               /* @__PURE__ */ jsx("span", { className: "nzp-badge", children: subscription.endingAt ? "Scheduled to end" : "Active" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "nzp-price", children: [
-              money(
+              money2(
                 subscription.plan.amountCents,
                 subscription.plan.amountCurrency,
                 locale
@@ -2416,25 +2848,15 @@ function Subscriptions({
                 intervals[subscription.plan.interval] || subscription.plan.interval
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "nzp-row", children: [
-              /* @__PURE__ */ jsxs("p", { className: "nzp-muted", children: [
-                "Base price, excluding tax and usage",
-                /* @__PURE__ */ jsx("br", {}),
-                "Current period ends",
-                " ",
-                date(
-                  subscription.currentBillingPeriodEndingAt,
-                  locale,
-                  timezone
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onUsage(subscription),
-                  children: "View usage"
-                }
+            /* @__PURE__ */ jsxs("p", { className: "nzp-muted", children: [
+              "Base price, excluding tax and usage",
+              /* @__PURE__ */ jsx("br", {}),
+              "Current period ends",
+              " ",
+              date(
+                subscription.currentBillingPeriodEndingAt,
+                locale,
+                timezone
               )
             ] }),
             subscription.endingAt && /* @__PURE__ */ jsxs("p", { children: [
@@ -2447,48 +2869,60 @@ function Subscriptions({
               " ",
               subscription.nextSubscription.plan.name
             ] }),
-            cancellationActions && subscription.externalId && /* @__PURE__ */ jsx(
-              CancellationControl,
-              {
-                subscription: cancellationState(subscription),
-                actions: cancellationActions,
-                locale,
-                timezone,
-                nonce,
-                onError,
-                onChanged: retry,
-                refresh: async (signal) => {
-                  const result2 = await client.request(
-                    subscriptionQuery,
-                    { id: subscription.id },
-                    signal
-                  );
-                  if (!signal.aborted && result2.customerPortalSubscription) {
-                    const fresh = result2.customerPortalSubscription;
-                    setUpdated((previous) => ({
-                      ...previous,
-                      [fresh.id]: fresh
-                    }));
+            /* @__PURE__ */ jsxs("div", { className: "nzp-card-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onUsage(subscription),
+                  children: "View usage"
+                }
+              ),
+              planChangeActions && subscription.externalId && /* @__PURE__ */ jsx(
+                PlanChangeControl,
+                {
+                  subscriptionId: subscription.externalId,
+                  refreshKey: `${subscription.id}:${subscription.endingAt ?? ""}:${subscription.nextSubscription?.id ?? ""}:${subscription.plan.code}`,
+                  actions: planChangeActions,
+                  appearance: portalAppearance,
+                  locale,
+                  timezone,
+                  nonce,
+                  onError,
+                  onChanged: retry
+                }
+              ),
+              cancellationActions && subscription.externalId && /* @__PURE__ */ jsx(
+                CancellationControl,
+                {
+                  subscription: cancellationState(subscription),
+                  actions: cancellationActions,
+                  appearance: portalAppearance,
+                  locale,
+                  timezone,
+                  nonce,
+                  onError,
+                  onChanged: retry,
+                  refresh: async (signal) => {
+                    const result2 = await client.request(
+                      subscriptionQuery,
+                      { id: subscription.id },
+                      signal
+                    );
+                    if (!signal.aborted && result2.customerPortalSubscription) {
+                      const fresh = result2.customerPortalSubscription;
+                      setUpdated((previous) => ({
+                        ...previous,
+                        [fresh.id]: fresh
+                      }));
+                    }
+                    return result2.customerPortalSubscription ? cancellationState(
+                      result2.customerPortalSubscription
+                    ) : null;
                   }
-                  return result2.customerPortalSubscription ? cancellationState(
-                    result2.customerPortalSubscription
-                  ) : null;
                 }
-              }
-            ),
-            planChangeActions && subscription.externalId && /* @__PURE__ */ jsx(
-              PlanChangeControl,
-              {
-                subscriptionId: subscription.externalId,
-                refreshKey: `${subscription.id}:${subscription.endingAt ?? ""}:${subscription.nextSubscription?.id ?? ""}:${subscription.plan.code}`,
-                actions: planChangeActions,
-                locale,
-                timezone,
-                nonce,
-                onError,
-                onChanged: retry
-              }
-            )
+              )
+            ] })
           ]
         },
         subscription.externalId || subscription.id
@@ -2522,9 +2956,9 @@ function UsageDetails({
   subscription,
   timezone
 }) {
-  const { data, error, retry } = useQuery(client, usageQuery, { subscriptionId: subscription.id }, onError);
+  const { data, error, retry } = useQuery4(client, usageQuery, { subscriptionId: subscription.id }, onError);
   const usage = data?.customerPortalCustomerUsage;
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Subscription usage", children: [
+  return /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Subscription usage", children: [
     /* @__PURE__ */ jsxs("h3", { children: [
       planName(subscription),
       " \xB7 Usage"
@@ -2536,18 +2970,18 @@ function UsageDetails({
         " ",
         date(usage.toDatetime, locale, timezone)
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "nzp-price", children: money(usage.amountCents, usage.currency, locale) }),
+      /* @__PURE__ */ jsx("p", { className: "nzp-price", children: money2(usage.amountCents, usage.currency, locale) }),
       /* @__PURE__ */ jsx("p", { className: "nzp-muted", children: "Current usage, excluding tax" }),
-      usage.chargesUsage.length ? /* @__PURE__ */ jsx("div", { className: "nzp-table", children: /* @__PURE__ */ jsxs("table", { children: [
+      usage.chargesUsage.length ? /* @__PURE__ */ jsx(Part, { className: "nzp-table", part: "billingPortal__table", children: /* @__PURE__ */ jsxs("table", { children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("th", { children: "Feature" }),
-          /* @__PURE__ */ jsx("th", { children: "Units" }),
-          /* @__PURE__ */ jsx("th", { children: "Amount" })
+          /* @__PURE__ */ jsx("th", { className: "nzp-num", children: "Units" }),
+          /* @__PURE__ */ jsx("th", { className: "nzp-num", children: "Amount" })
         ] }) }),
         /* @__PURE__ */ jsx("tbody", { children: usage.chargesUsage.map((charge, index) => /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("td", { children: charge.charge?.invoiceDisplayName || charge.feature?.name || charge.feature?.code || "Usage" }),
-          /* @__PURE__ */ jsx("td", { children: charge.units }),
-          /* @__PURE__ */ jsx("td", { children: money(charge.amountCents, usage.currency, locale) })
+          /* @__PURE__ */ jsx("td", { className: "nzp-num", children: charge.units }),
+          /* @__PURE__ */ jsx("td", { className: "nzp-num", children: money2(charge.amountCents, usage.currency, locale) })
         ] }, `${charge.id}-${index}`)) })
       ] }) }) : /* @__PURE__ */ jsx("p", { className: "nzp-empty", children: "No usage recorded for this billing period." })
     ] })
@@ -2557,25 +2991,31 @@ function Invoices(props) {
   const { client, locale, reconnect, onError } = props;
   const [search, setSearch] = useState("");
   const [filter, setFilter] = useState({ page: 1, searchTerm: "" });
-  const { data, error, retry } = useQuery(client, invoicesQuery, filter, onError);
+  const { data, error, retry } = useQuery4(client, invoicesQuery, filter, onError);
   const result = data?.customerPortalInvoices;
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Invoice history", children: [
+  return /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Invoice history", children: [
     /* @__PURE__ */ jsx("h3", { children: "Invoice history" }),
     /* @__PURE__ */ jsxs(
       "form",
       {
         className: "nzp-actions",
+        role: "search",
         onSubmit: (event) => {
           event.preventDefault();
           setFilter({ page: 1, searchTerm: search.trim() });
         },
         children: [
-          /* @__PURE__ */ jsxs("label", { children: [
-            "Search invoices",
+          /* @__PURE__ */ jsxs("label", { className: "nzp-search", children: [
+            /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+              /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
+            ] }),
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "search",
+                "aria-label": "Search invoices",
+                placeholder: "Search invoices",
                 value: search,
                 onChange: (event) => setSearch(event.target.value)
               }
@@ -2586,18 +3026,18 @@ function Invoices(props) {
       }
     ),
     error ? /* @__PURE__ */ jsx(Failure, { error, retry, reconnect }) : !result ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      !result.collection.length ? /* @__PURE__ */ jsx("p", { className: "nzp-empty", children: filter.searchTerm ? "No invoices match your search." : "No invoices yet." }) : /* @__PURE__ */ jsx("div", { className: "nzp-table", children: /* @__PURE__ */ jsxs("table", { children: [
+      !result.collection.length ? /* @__PURE__ */ jsx("p", { className: "nzp-empty", children: filter.searchTerm ? "No invoices match your search." : "No invoices yet." }) : /* @__PURE__ */ jsx(Part, { className: "nzp-table", part: "billingPortal__table", children: /* @__PURE__ */ jsxs("table", { children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("th", { children: "Invoice" }),
           /* @__PURE__ */ jsx("th", { children: "Date" }),
-          /* @__PURE__ */ jsx("th", { children: "Amount" }),
+          /* @__PURE__ */ jsx("th", { className: "nzp-num", children: "Amount" }),
           /* @__PURE__ */ jsx("th", { children: "Status" }),
           /* @__PURE__ */ jsx("th", { children: "PDF" })
         ] }) }),
         /* @__PURE__ */ jsx("tbody", { children: result.collection.map((invoice) => /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("td", { children: invoice.number }),
           /* @__PURE__ */ jsx("td", { children: date(invoice.issuingDate, locale) }),
-          /* @__PURE__ */ jsx("td", { children: money(
+          /* @__PURE__ */ jsx("td", { className: "nzp-num", children: money2(
             invoice.totalAmountCents,
             invoice.currency,
             locale
@@ -2701,7 +3141,7 @@ function CustomerForm({
       if (!signal.aborted) onSaved();
     });
   };
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Edit billing information", children: [
+  return /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Edit billing information", children: [
     /* @__PURE__ */ jsx("h3", { children: "Edit billing information" }),
     /* @__PURE__ */ jsxs("form", { onSubmit: submit, children: [
       /* @__PURE__ */ jsx("div", { className: "nzp-fields", children: customerFields.map(([key, label]) => /* @__PURE__ */ jsxs("label", { children: [
@@ -2743,15 +3183,15 @@ function Wallets({
   onWallet
 }) {
   const [page, setPage] = useState(1);
-  const { data, error, retry } = useQuery(client, walletsQuery, { page }, onError);
+  const { data, error, retry } = useQuery4(client, walletsQuery, { page }, onError);
   const result = data?.customerPortalWallets;
   if (result && !result.collection.length) return null;
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Wallets", children: [
+  return /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Wallets", children: [
     /* @__PURE__ */ jsx("h3", { children: "Wallets" }),
     error ? /* @__PURE__ */ jsx(Failure, { error, retry, reconnect }) : !result ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "nzp-stack", children: result.collection.map((wallet) => /* @__PURE__ */ jsxs("article", { className: "nzp-card", children: [
+      /* @__PURE__ */ jsx("div", { className: "nzp-stack", children: result.collection.map((wallet) => /* @__PURE__ */ jsxs(Part, { as: "article", part: "billingPortal__card", className: "nzp-card", children: [
         /* @__PURE__ */ jsx("h3", { children: wallet.name || "Prepaid credits" }),
-        /* @__PURE__ */ jsx("div", { className: "nzp-price", children: money(wallet.balanceCents, wallet.currency, locale) }),
+        /* @__PURE__ */ jsx("div", { className: "nzp-price", children: money2(wallet.balanceCents, wallet.currency, locale) }),
         /* @__PURE__ */ jsxs("div", { className: "nzp-row", children: [
           /* @__PURE__ */ jsxs("p", { className: "nzp-muted", children: [
             wallet.creditsBalance,
@@ -2796,7 +3236,7 @@ function WalletTopUp({
     amountCents,
     String(wallet.paidTopUpMaxAmountCents)
   ) <= 0);
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Add credits", children: [
+  return /* @__PURE__ */ jsxs(Part, { as: "section", part: "billingPortal__section", "aria-label": "Add credits", children: [
     /* @__PURE__ */ jsxs("h3", { children: [
       "Add credits \xB7 ",
       wallet.name || "Wallet"
@@ -2833,19 +3273,19 @@ function WalletTopUp({
             )
           ] }) }),
           /* @__PURE__ */ jsxs("p", { children: [
-            amountCents !== null ? money(amountCents, wallet.currency, locale) : "\u2014",
+            amountCents !== null ? money2(amountCents, wallet.currency, locale) : "\u2014",
             " ",
             "excluding tax"
           ] }),
           wallet.paidTopUpMinAmountCents != null && /* @__PURE__ */ jsxs("p", { className: "nzp-muted", children: [
             "Minimum",
             " ",
-            money(wallet.paidTopUpMinAmountCents, wallet.currency, locale)
+            money2(wallet.paidTopUpMinAmountCents, wallet.currency, locale)
           ] }),
           wallet.paidTopUpMaxAmountCents != null && /* @__PURE__ */ jsxs("p", { className: "nzp-muted", children: [
             "Maximum",
             " ",
-            money(wallet.paidTopUpMaxAmountCents, wallet.currency, locale)
+            money2(wallet.paidTopUpMaxAmountCents, wallet.currency, locale)
           ] }),
           action.error && /* @__PURE__ */ jsx(Failure, { error: action.error, reconnect }),
           /* @__PURE__ */ jsx("div", { className: "nzp-actions", children: /* @__PURE__ */ jsx(
@@ -2862,38 +3302,112 @@ function WalletTopUp({
     )
   ] });
 }
-function usePlans() {
-  const { client } = useBillingContext();
-  const [plans, setPlans] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    setError(null);
-    setPlans([]);
-    if (!client) {
-      setIsLoading(false);
-      return;
-    }
-    void client.catalogFetch("/api/v1/plans").then(async (response) => {
-      if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      const data = await response.json();
-      if (!cancelled) setPlans(data.plans ?? []);
-    }).catch((cause) => {
-      if (!cancelled) {
-        setError(
-          cause instanceof Error ? cause : new Error("Failed to load plans")
-        );
+function useBilling() {
+  const { billingFetch, billingEndpoint, queryClient } = useBillingContext();
+  if (!billingFetch || !billingEndpoint) {
+    throw new Error("Billing hooks need BillingProvider billingEndpoint, a backend route served by createBillingHandler");
+  }
+  return { fetchRoute: billingFetch, queryClient, endpoint: billingEndpoint };
+}
+function useSubscription() {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  return useQuery(
+    { queryKey: ["nozle", endpoint, "subscription"], queryFn: () => fetchRoute("subscription") },
+    queryClient
+  );
+}
+function useEntitlement(featureCode, options = {}) {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  return useQuery(
+    {
+      queryKey: ["nozle", endpoint, "entitlement", featureCode],
+      queryFn: () => fetchRoute("entitlement", { feature: featureCode }),
+      enabled: Boolean(featureCode) && options.enabled !== false,
+      staleTime: 1e4
+    },
+    queryClient
+  );
+}
+function useCreditBalance(creditSystemCode) {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  return useQuery(
+    {
+      queryKey: ["nozle", endpoint, "credits"],
+      queryFn: () => fetchRoute("credits"),
+      select: (data) => {
+        const balances = data.balances ?? [];
+        if (creditSystemCode) return balances.find((b) => b.credit_system === creditSystemCode) ?? null;
+        return balances.find((b) => Number(b.available) > 0) ?? balances[0] ?? null;
       }
-    }).finally(() => {
-      if (!cancelled) setIsLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
-  return { plans, isLoading, error };
+    },
+    queryClient
+  );
+}
+function useCreditHistory(options = {}) {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  const query = useInfiniteQuery(
+    {
+      queryKey: ["nozle", endpoint, "credit-history", options.creditSystemCode, options.limit],
+      queryFn: ({ pageParam }) => fetchRoute("credit-history", {
+        credit_system: options.creditSystemCode,
+        limit: options.limit,
+        cursor: pageParam
+      }),
+      initialPageParam: void 0,
+      getNextPageParam: (page) => page.next_cursor ?? void 0
+    },
+    queryClient
+  );
+  return { ...query, operations: query.data?.pages.flatMap((page) => page.operations) ?? [] };
+}
+function useUsage(options = {}) {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  const period = options.period ?? "current";
+  return useQuery(
+    {
+      queryKey: ["nozle", endpoint, "usage", period, options.periods],
+      queryFn: () => fetchRoute("usage", {
+        period,
+        periods: options.periods
+      }),
+      select: (data) => period === "past" ? data.periods ?? [] : data.usage ?? null
+    },
+    queryClient
+  );
+}
+function useInvoices(options = {}) {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  const page = options.page ?? 1;
+  return useQuery(
+    {
+      queryKey: ["nozle", endpoint, "invoices", page],
+      queryFn: () => fetchRoute("invoices", { page })
+    },
+    queryClient
+  );
+}
+function useInvoiceDownload() {
+  const { fetchRoute } = useBilling();
+  return useCallback(
+    async (invoiceId) => (await fetchRoute("invoice-download", { id: invoiceId })).url,
+    [fetchRoute]
+  );
+}
+function useUpgradePreview(planCode) {
+  const { fetchRoute, queryClient, endpoint } = useBilling();
+  return useQuery(
+    {
+      queryKey: ["nozle", endpoint, "preview", planCode],
+      queryFn: () => fetchRoute("preview", { plan: planCode }),
+      enabled: Boolean(planCode),
+      staleTime: 0
+    },
+    queryClient
+  );
+}
+function useBillingRefresh() {
+  const { queryClient } = useBillingContext();
+  return useCallback(() => queryClient.invalidateQueries({ queryKey: ["nozle"] }), [queryClient]);
 }
 function useCheckout2() {
   const { createCheckout } = useBillingContext();
@@ -2941,33 +3455,126 @@ function useCheckout2() {
   );
   return { fetchClientSecret, checkout, isLoading, error };
 }
+function PanelPlanCard({
+  frame,
+  el,
+  name,
+  description,
+  price,
+  interval,
+  features,
+  isCurrent,
+  isHighlighted,
+  filled: filledStyle,
+  highlightLabel,
+  children
+}) {
+  const filled = isHighlighted && filledStyle;
+  const text2 = filled ? T.highlightForeground : T.foreground;
+  const muted5 = filled ? `color-mix(in srgb, ${T.highlightForeground} 75%, ${T.highlight})` : T.mutedForeground;
+  const edge = isHighlighted ? T.highlight : isCurrent ? T.foreground : T.border;
+  const label = isCurrent ? "Active" : isHighlighted ? highlightLabel : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...frame({
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...text.body,
+        background: filled ? T.highlight : T.card,
+        color: text2,
+        border: border(edge),
+        borderRadius: T.radius,
+        boxShadow: T.shadow
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...el("planCard__header", {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "0.75rem",
+              padding: "0.875rem 1.25rem",
+              borderBottom: border(filled ? `color-mix(in srgb, ${T.highlightForeground} 30%, ${T.highlight})` : T.border)
+            }),
+            children: [
+              /* @__PURE__ */ jsx("h3", { ...el("planCard__name", { ...text.heading, color: text2, margin: 0 }), children: name }),
+              label && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...el("planCard__badge", {
+                    ...text.label,
+                    whiteSpace: "nowrap",
+                    // The current plan's label takes the colour of its button.
+                    color: filled ? text2 : isCurrent ? T.mutedForeground : T.highlight
+                  }),
+                  children: label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", padding: "1.25rem", flex: 1 }, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("p", { ...el("planCard__price", { ...text.metric, color: text2, margin: 0 }), children: [
+              price,
+              interval && /* @__PURE__ */ jsxs("span", { style: { ...text.meta, color: muted5 }, children: [
+                " / ",
+                interval
+              ] })
+            ] }),
+            description && /* @__PURE__ */ jsx("p", { ...el("planCard__description", { ...text.secondary, color: muted5, margin: "0.25rem 0 0" }), children: description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              ...el("planCard__features", {
+                listStyle: "none",
+                margin: 0,
+                padding: 0,
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.375rem",
+                flex: 1,
+                ...text.secondary,
+                color: muted5
+              }),
+              children: features.map((feature) => /* @__PURE__ */ jsx("li", { ...el("planCard__feature"), children: feature }, feature))
+            }
+          ),
+          children
+        ] })
+      ]
+    }
+  );
+}
+function featureLines(override, plan, index) {
+  const given = Array.isArray(override) ? override[index] : override?.[plan.code];
+  return given ?? planFeatures(plan);
+}
 var SYMBOLS = { USD: "$", EUR: "\u20AC", GBP: "\xA3", JPY: "\xA5" };
 function fmtPrice(cents, cur) {
   const s = SYMBOLS[cur] ?? cur + " ";
   const val = cents % 100 === 0 ? String(cents / 100) : (cents / 100).toFixed(2);
   return `${s}${val}`;
 }
-function isEnterprise(p) {
-  return /enterprise|custom/i.test(p.name + p.code);
-}
-function v(name, fb) {
-  return `var(${name}, ${fb})`;
-}
 var C = {
-  bg: v("--nozle-pricing-bg", v("--nozle-background", "#ffffff")),
-  cardBg: v("--nozle-pricing-card-bg", v("--nozle-card", "#ffffff")),
-  hl: v("--nozle-pricing-highlight", v("--nozle-primary", "#6366f1")),
-  border: v("--nozle-pricing-border", v("--nozle-border", "#e5e7eb")),
-  radius: v("--nozle-pricing-radius", v("--nozle-radius", "12px")),
-  text: v("--nozle-foreground", "#111827"),
-  muted: v("--nozle-muted-foreground", "#6b7280"),
-  mutedBg: v("--nozle-muted", "#f3f4f6"),
-  hlFg: v("--nozle-primary-foreground", "#ffffff")
+  cardBg: T.card,
+  hl: T.primary,
+  border: T.border,
+  radius: T.radius,
+  text: T.foreground,
+  muted: T.mutedForeground,
+  mutedBg: T.muted,
+  hlFg: T.primaryForeground
 };
 function Check() {
   return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Toggle({ isAnnual, onChange }) {
+function Toggle({ isAnnual, onChange, el }) {
   const pill = {
     display: "inline-flex",
     borderRadius: "9999px",
@@ -2980,24 +3587,15 @@ function Toggle({ isAnnual, onChange }) {
     borderRadius: "9999px",
     border: "none",
     background: active ? C.cardBg : "transparent",
+    ...text.action,
     color: active ? C.text : C.muted,
-    fontWeight: active ? 600 : 400,
-    fontSize: "0.875rem",
     cursor: "pointer",
-    boxShadow: active ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
+    boxShadow: active ? T.shadow : "none",
     transition: "all 0.15s ease"
   });
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "2.5rem" }, children: /* @__PURE__ */ jsxs("div", { style: pill, children: [
-    /* @__PURE__ */ jsx("button", { onClick: () => onChange(false), style: tab(!isAnnual), "aria-pressed": !isAnnual, children: "Monthly" }),
-    /* @__PURE__ */ jsxs("button", { onClick: () => onChange(true), style: tab(isAnnual), "aria-pressed": isAnnual, children: [
-      "Annual",
-      /* @__PURE__ */ jsx("span", { style: {
-        marginLeft: "6px",
-        fontSize: "0.7rem",
-        fontWeight: 600,
-        color: isAnnual ? C.hl : C.muted
-      }, children: "Save 20%" })
-    ] })
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "2.5rem" }, children: /* @__PURE__ */ jsxs("div", { ...el("pricingTable__toggle", pill), children: [
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange(false), ...el("pricingTable__toggleButton", tab(!isAnnual)), "aria-pressed": !isAnnual, children: "Monthly" }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange(true), ...el("pricingTable__toggleButton", tab(isAnnual)), "aria-pressed": isAnnual, children: "Annual" })
   ] }) });
 }
 function Card({
@@ -3005,13 +3603,22 @@ function Card({
   features,
   isCurrent,
   isHighlighted,
+  filled: filledStyle,
+  highlightLabel,
   isEnt,
   enterpriseEmail,
-  onSelect
+  onSelect,
+  el,
+  panel,
+  isUpgrade
 }) {
   const [hover, setHover] = useState(false);
-  const shadow = isHighlighted ? "0 8px 28px rgba(99,102,241,0.12), 0 2px 8px rgba(99,102,241,0.06)" : hover ? "0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03)" : "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03)";
-  const interval = plan.interval === "yearly" ? "/year" : "/month";
+  const filled = isHighlighted && filledStyle;
+  const text2 = filled ? T.highlightForeground : C.text;
+  const muted5 = filled ? `color-mix(in srgb, ${T.highlightForeground} 75%, ${T.highlight})` : C.muted;
+  const accent = filled ? T.highlightForeground : C.hl;
+  const badgeLabel = isCurrent ? "Current Plan" : highlightLabel;
+  const interval = `/${intervalLabel(plan.interval)}`;
   const handleClick = () => {
     if (isCurrent) return;
     if (isEnt && enterpriseEmail) {
@@ -3020,75 +3627,97 @@ function Card({
     }
     onSelect?.();
   };
+  const emphasised = isUpgrade ?? isHighlighted;
+  const cta = onSelect && /* @__PURE__ */ jsx(
+    CTAButton,
+    {
+      onClick: handleClick,
+      disabled: isCurrent,
+      variant: isCurrent ? "current" : isEnt ? "outline" : !emphasised ? "secondary" : filled ? "inverse" : isHighlighted ? "highlight" : "primary",
+      el,
+      children: isCurrent ? "Current Plan" : isEnt ? "Contact Sales" : `Get ${plan.name}`
+    }
+  );
+  if (panel) {
+    return /* @__PURE__ */ jsx(
+      PanelPlanCard,
+      {
+        frame: (style) => el("planCard", style),
+        el,
+        name: plan.name,
+        description: plan.description,
+        price: isEnt ? "Custom" : fmtPrice(plan.amount_cents, plan.amount_currency),
+        interval: isEnt ? void 0 : intervalLabel(plan.interval),
+        features: features ?? [],
+        isCurrent,
+        isHighlighted,
+        filled: filledStyle,
+        highlightLabel,
+        children: cta
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
-      style: {
+      ...el("planCard", {
         position: "relative",
         display: "flex",
         flexDirection: "column",
-        background: C.cardBg,
-        border: `1px solid ${isHighlighted ? C.hl : C.border}`,
-        borderTopWidth: isHighlighted ? "3px" : "1px",
+        background: filled ? T.highlight : C.cardBg,
+        color: text2,
+        border: border(isHighlighted ? T.highlight : C.border),
+        borderTopWidth: isHighlighted && !filled ? `calc(${T.borderWidth} + 2px)` : T.borderWidth,
         borderRadius: C.radius,
         padding: "2rem",
         transition: "box-shadow 0.2s ease, transform 0.2s ease",
-        boxShadow: shadow,
+        boxShadow: T.shadow,
         transform: hover && !isCurrent ? "translateY(-2px)" : "none"
-      },
+      }),
       children: [
-        isHighlighted && /* @__PURE__ */ jsx("div", { style: {
+        isHighlighted && badgeLabel && /* @__PURE__ */ jsx("div", { ...el("planCard__badge", {
           position: "absolute",
           top: "-1px",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          background: C.hl,
-          color: C.hlFg,
-          fontSize: "0.7rem",
-          fontWeight: 700,
+          background: filled ? T.highlightForeground : T.highlight,
+          border: filled ? border(T.highlight) : void 0,
+          ...text.label,
+          color: filled ? T.highlight : T.highlightForeground,
           padding: "4px 12px",
           borderRadius: "9999px",
-          letterSpacing: "0.025em",
-          textTransform: "uppercase",
           whiteSpace: "nowrap"
-        }, children: isCurrent ? "Current Plan" : "Most Popular" }),
-        isCurrent && !isHighlighted && /* @__PURE__ */ jsx("div", { style: {
+        }), children: badgeLabel }),
+        isCurrent && !isHighlighted && /* @__PURE__ */ jsx("div", { ...el("planCard__badge", {
           position: "absolute",
           top: "0",
           left: "50%",
           transform: "translate(-50%, -50%)",
           background: C.mutedBg,
-          color: C.muted,
-          fontSize: "0.7rem",
-          fontWeight: 700,
+          ...text.label,
           padding: "4px 12px",
           borderRadius: "9999px",
-          letterSpacing: "0.025em",
-          textTransform: "uppercase",
           whiteSpace: "nowrap"
-        }, children: "Current Plan" }),
-        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.25rem", marginTop: isHighlighted || isCurrent ? "0.5rem" : 0 }, children: [
-          /* @__PURE__ */ jsx("h3", { style: {
-            fontSize: "1.25rem",
-            fontWeight: 700,
-            color: C.text,
-            margin: 0,
-            lineHeight: 1.3
-          }, children: plan.name }),
-          plan.description && /* @__PURE__ */ jsx("p", { style: {
-            fontSize: "0.875rem",
-            color: C.muted,
-            margin: "6px 0 0",
-            lineHeight: 1.5
-          }, children: plan.description })
+        }), children: "Current Plan" }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.25rem", marginTop: isHighlighted && badgeLabel || isCurrent ? "0.5rem" : 0 }, children: [
+          /* @__PURE__ */ jsx("h3", { ...el("planCard__name", {
+            ...text.heading,
+            color: text2,
+            margin: 0
+          }), children: plan.name }),
+          plan.description && /* @__PURE__ */ jsx("p", { ...el("planCard__description", {
+            ...text.secondary,
+            color: muted5,
+            margin: "6px 0 0"
+          }), children: plan.description })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { marginBottom: "1.5rem" }, children: isEnt ? /* @__PURE__ */ jsx("span", { style: { fontSize: "2.25rem", fontWeight: 700, color: C.text, lineHeight: 1 }, children: "Custom" }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "2px" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "2.75rem", fontWeight: 700, color: C.text, lineHeight: 1, letterSpacing: "-0.025em" }, children: fmtPrice(plan.amount_cents, plan.amount_currency) }),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", color: C.muted, marginLeft: "4px" }, children: interval })
+        /* @__PURE__ */ jsx("div", { ...el("planCard__price", { marginBottom: "1.5rem" }), children: isEnt ? /* @__PURE__ */ jsx("span", { style: { ...text.metric, color: text2 }, children: "Custom" }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "2px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { ...text.metric, color: text2 }, children: fmtPrice(plan.amount_cents, plan.amount_currency) }),
+          /* @__PURE__ */ jsx("span", { style: { ...text.meta, color: muted5, marginLeft: "4px" }, children: interval })
         ] }) }),
-        features && features.length > 0 && /* @__PURE__ */ jsx("ul", { style: {
+        features && features.length > 0 && /* @__PURE__ */ jsx("ul", { ...el("planCard__features", {
           listStyle: "none",
           padding: 0,
           margin: "0 0 2rem",
@@ -3096,27 +3725,18 @@ function Card({
           flexDirection: "column",
           gap: "0.75rem",
           flex: 1
-        }, children: features.map((feat) => /* @__PURE__ */ jsxs("li", { style: {
+        }), children: features.map((feat) => /* @__PURE__ */ jsxs("li", { ...el("planCard__feature", {
           display: "flex",
           alignItems: "flex-start",
           gap: "10px",
-          fontSize: "0.875rem",
-          color: C.text,
-          lineHeight: 1.5
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: { color: C.hl, marginTop: "2px" }, children: /* @__PURE__ */ jsx(Check, {}) }),
+          ...text.body,
+          color: text2
+        }), children: [
+          /* @__PURE__ */ jsx("span", { style: { color: accent, marginTop: "2px" }, children: /* @__PURE__ */ jsx(Check, {}) }),
           /* @__PURE__ */ jsx("span", { children: feat })
         ] }, feat)) }),
         (!features || features.length === 0) && /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-        onSelect && /* @__PURE__ */ jsx(
-          CTAButton,
-          {
-            onClick: handleClick,
-            disabled: isCurrent,
-            variant: isCurrent ? "current" : isEnt ? "outline" : isHighlighted ? "primary" : "secondary",
-            children: isCurrent ? "Current Plan" : isEnt ? "Contact Sales" : `Get ${plan.name}`
-          }
-        )
+        cta
       ]
     }
   );
@@ -3125,75 +3745,53 @@ function CTAButton({
   children,
   onClick,
   disabled,
-  variant
+  variant,
+  el
 }) {
   const [hover, setHover] = useState(false);
-  const base = {
-    width: "100%",
-    padding: "12px 24px",
-    borderRadius: "10px",
-    fontSize: "0.9375rem",
-    fontWeight: 600,
-    cursor: disabled ? "default" : "pointer",
-    border: "none",
-    transition: "all 0.15s ease",
-    lineHeight: 1.4
-  };
-  const variants = {
-    primary: {
-      background: hover && !disabled ? "#4f46e5" : C.hl,
-      color: C.hlFg
-    },
-    secondary: {
-      background: hover && !disabled ? "#f0f0f3" : C.mutedBg,
-      color: C.text,
-      border: `1px solid ${C.border}`
-    },
-    outline: {
-      background: hover && !disabled ? "rgba(99,102,241,0.04)" : "transparent",
-      color: C.hl,
-      border: `1.5px solid ${C.hl}`
-    },
-    current: {
-      background: C.mutedBg,
-      color: C.muted
-    }
-  };
+  const look = variant === "current" ? { ...buttonStyle("secondary"), background: C.mutedBg, color: C.muted, cursor: "default" } : variant === "highlight" ? { ...buttonStyle("primary"), background: T.highlight, color: T.highlightForeground, border: primaryButtonBorder(T.highlight) } : variant === "inverse" ? { ...buttonStyle("primary"), background: T.highlightForeground, color: T.highlight, border: primaryButtonBorder(T.highlightForeground) } : buttonStyle(variant);
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick: disabled ? void 0 : onClick,
       disabled,
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
-      style: { ...base, ...variants[variant] },
+      ...el("planCard__cta", {
+        ...look,
+        width: "100%",
+        filter: hover && !disabled ? "brightness(0.95)" : void 0
+      }),
       children
     }
   );
 }
-function Skeleton() {
-  return /* @__PURE__ */ jsx("div", { style: {
+function Skeleton({ rootProps }) {
+  return /* @__PURE__ */ jsx("div", { ...rootProps, "aria-busy": "true", style: {
+    ...rootProps.style,
     display: "grid",
     gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
     gap: "1.5rem"
   }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { style: {
     background: C.cardBg,
-    border: `1px solid ${C.border}`,
+    border: border(),
     borderRadius: C.radius,
     padding: "2rem",
     height: "380px"
   }, children: [
-    /* @__PURE__ */ jsx("div", { style: { height: 20, width: "40%", borderRadius: 6, background: "#f0f0f0", marginBottom: 12 } }),
-    /* @__PURE__ */ jsx("div", { style: { height: 40, width: "50%", borderRadius: 6, background: "#f0f0f0", marginBottom: 24 } }),
-    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "80%", borderRadius: 6, background: "#f0f0f0", marginBottom: 10 } }),
-    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "70%", borderRadius: 6, background: "#f0f0f0", marginBottom: 10 } }),
-    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "60%", borderRadius: 6, background: "#f0f0f0" } })
+    /* @__PURE__ */ jsx("div", { style: { height: 20, width: "40%", borderRadius: 6, background: T.skeleton, marginBottom: 12 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 40, width: "50%", borderRadius: 6, background: T.skeleton, marginBottom: 24 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "80%", borderRadius: 6, background: T.skeleton, marginBottom: 10 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "70%", borderRadius: 6, background: T.skeleton, marginBottom: 10 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "60%", borderRadius: 6, background: T.skeleton } })
   ] }, i)) });
 }
 function PricingTable({
   currentPlanCode,
   plans: propPlans,
   features,
+  sort,
   onSelect,
   returnUrl,
   onStripeClientSecret,
@@ -3201,40 +3799,28 @@ function PricingTable({
   onCheckoutError,
   showToggle = true,
   highlightPlan,
+  highlightStyle = "outline",
+  highlightLabel = "Most Popular",
   className,
-  enterpriseEmail
+  contactSalesPlans,
+  enterpriseEmail,
+  appearance
 }) {
+  const { root, el, planCardLayout } = useAppearance(appearance);
+  const isEnterprise = (p) => contactSalesPlans?.includes(p.code) ?? false;
   const billing = useOptionalBillingContext();
   const client = billing?.client;
-  const [plans, setPlans] = useState(propPlans ?? []);
+  const catalog = useQuery(
+    { ...catalogQuery(client), enabled: !propPlans && Boolean(client) },
+    billing?.queryClient ?? idleQueryClient
+  );
+  const plans = propPlans ?? catalog.data?.plans ?? [];
+  const loading = !propPlans && Boolean(client) && catalog.isPending;
+  const loadError = propPlans ? null : !client ? "BillingProvider with a publishableKey is required to load plans" : catalog.error ? `Plans could not be loaded: ${catalog.error.message}` : null;
   const [currentPlan, setCurrentPlan] = useState(currentPlanCode ?? null);
   const [isAnnual, setIsAnnual] = useState(false);
-  const [loading, setLoading] = useState(!propPlans);
   const [processing, setProcessing] = useState(false);
   const [checkoutError, setCheckoutError] = useState(null);
-  useEffect(() => {
-    if (propPlans) {
-      setPlans(propPlans);
-      return;
-    }
-    if (!client) {
-      setLoading(false);
-      setCheckoutError("BillingProvider with a publishableKey is required to load plans");
-      return;
-    }
-    let cancelled = false;
-    client.catalogFetch("/api/v1/plans").then(async (res) => {
-      if (!cancelled && res.ok) {
-        const data = await res.json();
-        setPlans(data.plans || []);
-      }
-    }).finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [client, propPlans]);
   useEffect(() => {
     if (currentPlanCode !== void 0) setCurrentPlan(currentPlanCode);
   }, [currentPlanCode]);
@@ -3267,124 +3853,123 @@ function PricingTable({
       onCheckoutError?.(error);
     }
   }
-  const hasAnnual = plans.some((p) => p.interval === "yearly");
-  const filtered = showToggle && hasAnnual ? plans.filter((p) => p.interval === (isAnnual ? "yearly" : "monthly") || isEnterprise(p)) : plans;
-  if (loading) return /* @__PURE__ */ jsx(Skeleton, {});
-  return /* @__PURE__ */ jsxs("div", { className, style: {
-    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-    color: C.text,
-    background: C.bg
-  }, children: [
-    showToggle && hasAnnual && /* @__PURE__ */ jsx(Toggle, { isAnnual, onChange: setIsAnnual }),
+  const ordered = sort ? [...plans].sort(sort) : [...sortPlansByPrice(plans.filter((p) => !isEnterprise(p))), ...plans.filter(isEnterprise)];
+  const hasAnnual = ordered.some((p) => p.interval === "yearly");
+  const current = plans.find((p) => p.code === currentPlan);
+  const filtered = showToggle && hasAnnual ? ordered.filter((p) => p.interval === (isAnnual ? "yearly" : "monthly") || isEnterprise(p)) : ordered;
+  const rootProps = root("pricingTable", text.body, className);
+  if (loading) return /* @__PURE__ */ jsx(Skeleton, { rootProps });
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    showToggle && hasAnnual && /* @__PURE__ */ jsx(Toggle, { isAnnual, onChange: setIsAnnual, el }),
     processing && /* @__PURE__ */ jsx("p", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
-    checkoutError && /* @__PURE__ */ jsx("p", { role: "alert", children: checkoutError }),
-    /* @__PURE__ */ jsx("div", { style: {
+    (checkoutError ?? loadError) && /* @__PURE__ */ jsx("p", { role: "alert", style: { color: T.dangerText }, children: checkoutError ?? loadError }),
+    /* @__PURE__ */ jsx("div", { ...el("pricingTable__grid", {
       display: "grid",
       gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
       gap: "1.5rem"
-    }, children: filtered.map((plan, i) => /* @__PURE__ */ jsx(
+    }), children: filtered.map((plan, i) => /* @__PURE__ */ jsx(
       Card,
       {
         plan,
-        features: features?.[i],
+        features: featureLines(features, plan, i),
         isCurrent: currentPlan === plan.code,
+        isUpgrade: current && current.amount_currency === plan.amount_currency ? plan.amount_cents > current.amount_cents : void 0,
         isHighlighted: highlightPlan === plan.code,
+        filled: highlightStyle === "filled",
+        highlightLabel,
         isEnt: isEnterprise(plan),
         enterpriseEmail,
-        onSelect: () => void selectPlan(plan)
+        onSelect: () => void selectPlan(plan),
+        el,
+        panel: planCardLayout === "panel"
       },
       plan.code
-    )) })
+    )) }),
+    /* @__PURE__ */ jsx(NozleBranding, {})
   ] });
 }
 function PlanCard({
-  id,
-  name,
-  monthlyPrice,
-  annualPrice,
-  features,
-  description,
-  isAnnual,
+  plan,
+  features: featureOverride,
   isCurrent,
   returnUrl,
-  onSelect
+  onSelect,
+  appearance
 }) {
-  const price = isAnnual ? annualPrice : monthlyPrice;
-  const interval = isAnnual ? "year" : "month";
+  const { root, el, planCardLayout } = useAppearance(appearance);
+  const { code: id, name, description } = plan;
+  const price = formatPlanPrice(plan.amount_cents, plan.amount_currency);
+  const interval = intervalLabel(plan.interval);
+  const features = featureOverride ?? planFeatures(plan);
+  const cta = onSelect && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect?.({
+        planCode: id,
+        returnUrl: returnUrl ?? window.location.href
+      }),
+      ...el("planCard__cta", {
+        ...buttonStyle(isCurrent ? "secondary" : "primary"),
+        ...isCurrent && { background: T.muted, color: T.mutedForeground, cursor: "default" },
+        width: "100%"
+      }),
+      disabled: isCurrent,
+      "aria-label": isCurrent ? `Current plan: ${name}` : `Select ${name}`,
+      children: isCurrent ? "Current Plan" : "Get Started"
+    }
+  );
+  if (planCardLayout === "panel") {
+    return /* @__PURE__ */ jsx(
+      PanelPlanCard,
+      {
+        frame: (style) => ({ "data-testid": `plan-card-${id}`, "aria-current": isCurrent ? "true" : void 0, ...root("planCard", style) }),
+        el,
+        name,
+        description,
+        price,
+        interval,
+        features,
+        isCurrent: Boolean(isCurrent),
+        isHighlighted: false,
+        filled: false,
+        children: cta
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-testid": `plan-card-${id}`,
       "aria-current": isCurrent ? "true" : void 0,
-      style: {
-        background: "var(--nozle-background, var(--background))",
-        border: isCurrent ? "2px solid var(--nozle-primary, var(--primary))" : "1px solid var(--nozle-border, var(--border))",
-        borderRadius: "var(--nozle-radius, 0.5rem)",
+      ...root("planCard", {
+        ...text.body,
+        background: T.card,
+        border: border(isCurrent ? T.primary : T.border),
+        outline: isCurrent ? `1px solid ${T.primary}` : void 0,
+        borderRadius: T.radius,
+        boxShadow: T.shadow,
         padding: "1.5rem",
         display: "flex",
         flexDirection: "column",
         gap: "1rem"
-      },
-      className: isCurrent ? "border-primary" : "",
+      }),
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            "h3",
-            {
-              style: {
-                fontSize: "1.25rem",
-                fontWeight: 600,
-                color: "var(--nozle-foreground, var(--foreground))",
-                margin: 0
-              },
-              children: name
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                fontSize: "0.875rem",
-                margin: "0.25rem 0 0"
-              },
-              children: description
-            }
-          )
+          /* @__PURE__ */ jsx("h3", { ...el("planCard__name", { ...text.heading, margin: 0 }), children: name }),
+          description && /* @__PURE__ */ jsx("p", { ...el("planCard__description", { ...text.secondary, margin: "0.25rem 0 0" }), children: description })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                fontSize: "2rem",
-                fontWeight: 700,
-                color: "var(--nozle-foreground, var(--foreground))"
-              },
-              children: [
-                "$",
-                price
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                marginLeft: "0.25rem"
-              },
-              children: [
-                "/",
-                interval
-              ]
-            }
-          )
+        /* @__PURE__ */ jsxs("div", { ...el("planCard__price"), children: [
+          /* @__PURE__ */ jsx("span", { style: text.metric, children: price }),
+          /* @__PURE__ */ jsxs("span", { style: { ...text.meta, marginLeft: "0.25rem" }, children: [
+            "/",
+            interval
+          ] })
         ] }),
         /* @__PURE__ */ jsx(
           "ul",
           {
-            style: {
+            ...el("planCard__features", {
               listStyle: "none",
               padding: 0,
               margin: 0,
@@ -3392,160 +3977,51 @@ function PlanCard({
               flexDirection: "column",
               gap: "0.5rem",
               flex: 1
-            },
-            children: features.map((feature) => /* @__PURE__ */ jsxs(
-              "li",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5rem",
-                  color: "var(--nozle-foreground, var(--foreground))",
-                  fontSize: "0.875rem"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: { color: "var(--nozle-primary, var(--primary))" },
-                      "aria-hidden": "true",
-                      children: "\u2713"
-                    }
-                  ),
-                  feature
-                ]
-              },
+            }),
+            children: features.map((feature) => /* @__PURE__ */ jsxs("li", { ...el("planCard__feature", { display: "flex", alignItems: "center", gap: "0.5rem", ...text.body }), children: [
+              /* @__PURE__ */ jsx("span", { style: { color: T.primary }, "aria-hidden": "true", children: "\u2713" }),
               feature
-            ))
+            ] }, feature))
           }
         ),
-        onSelect && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onSelect?.({
-              planCode: id,
-              returnUrl: returnUrl ?? window.location.href
-            }),
-            style: {
-              background: isCurrent ? "var(--nozle-muted, var(--muted))" : "var(--nozle-primary, var(--primary))",
-              color: isCurrent ? "var(--nozle-muted-foreground, var(--muted-foreground))" : "var(--nozle-primary-foreground, var(--primary-foreground))",
-              border: "none",
-              borderRadius: "var(--nozle-radius, 0.5rem)",
-              padding: "0.75rem 1.5rem",
-              cursor: isCurrent ? "default" : "pointer",
-              fontWeight: 500,
-              width: "100%"
-            },
-            disabled: isCurrent,
-            "aria-label": isCurrent ? `Current plan: ${name}` : `Select ${name}`,
-            children: isCurrent ? "Current Plan" : "Get Started"
-          }
-        )
+        cta
       ]
     }
   );
 }
 function PlanComparison({
-  plans,
-  features
+  plans: catalogPlans,
+  features: featureOverride,
+  sort,
+  appearance
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        overflowX: "auto",
-        background: "var(--nozle-background, var(--background))"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "table",
-        {
-          style: {
-            width: "100%",
-            borderCollapse: "collapse",
-            fontSize: "0.875rem",
-            color: "var(--nozle-foreground, var(--foreground))"
-          },
-          children: [
-            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  style: {
-                    padding: "0.75rem 1rem",
-                    textAlign: "left",
-                    borderBottom: "1px solid var(--nozle-border, var(--border))",
-                    color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                    fontWeight: 500
-                  },
-                  children: "Feature"
-                }
-              ),
-              plans.map((plan) => /* @__PURE__ */ jsx(
-                "th",
-                {
-                  style: {
-                    padding: "0.75rem 1rem",
-                    textAlign: "center",
-                    borderBottom: "1px solid var(--nozle-border, var(--border))",
-                    fontWeight: 600,
-                    color: "var(--nozle-foreground, var(--foreground))"
-                  },
-                  children: plan.name
-                },
-                plan.id
-              ))
-            ] }) }),
-            /* @__PURE__ */ jsx("tbody", { children: features.map((feature) => /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx(
-                "td",
-                {
-                  style: {
-                    padding: "0.75rem 1rem",
-                    borderBottom: "1px solid var(--nozle-border, var(--border))",
-                    color: "var(--nozle-foreground, var(--foreground))"
-                  },
-                  children: feature.label
-                }
-              ),
-              plans.map((plan) => {
-                const value = feature.values[plan.id];
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    style: {
-                      padding: "0.75rem 1rem",
-                      textAlign: "center",
-                      borderBottom: "1px solid var(--nozle-border, var(--border))"
-                    },
-                    children: typeof value === "boolean" ? value ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          color: "var(--nozle-primary, var(--primary))"
-                        },
-                        "aria-label": "Included",
-                        children: "\u2713"
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-                        },
-                        "aria-label": "Not included",
-                        children: "\u2715"
-                      }
-                    ) : /* @__PURE__ */ jsx("span", { children: value ?? "\u2014" })
-                  },
-                  plan.id
-                );
-              })
-            ] }, feature.key)) })
-          ]
-        }
-      )
-    }
-  );
+  const { root, el } = useAppearance(appearance);
+  const plans = sort ? [...catalogPlans].sort(sort) : sortPlansByPrice(catalogPlans);
+  const features = featureOverride ?? comparisonRows(plans);
+  const cell = (style) => el("planComparison__cell", style);
+  return /* @__PURE__ */ jsxs("div", { ...root("planComparison", { minWidth: 0 }), children: [
+    /* @__PURE__ */ jsx("div", { style: table.frame, children: /* @__PURE__ */ jsxs("table", { ...el("planComparison__table", table.table), children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { ...cell(table.head()), children: "Feature" }),
+        plans.map((plan) => /* @__PURE__ */ jsxs("th", { ...cell({ ...table.head(), textAlign: "center", padding: "10px 20px" }), children: [
+          plan.name,
+          /* @__PURE__ */ jsxs("div", { style: { ...text.meta, letterSpacing: "normal", textTransform: "none" }, children: [
+            formatPlanPrice(plan.amount_cents, plan.amount_currency),
+            " / ",
+            intervalLabel(plan.interval)
+          ] })
+        ] }, plan.code))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: features.map((feature, index) => /* @__PURE__ */ jsxs("tr", { ...el("planComparison__row"), children: [
+        /* @__PURE__ */ jsx("td", { ...cell(table.cell(false, index === features.length - 1)), children: feature.label }),
+        plans.map((plan) => {
+          const value = feature.values[plan.code];
+          return /* @__PURE__ */ jsx("td", { ...cell({ ...table.cell(false, index === features.length - 1), textAlign: "center" }), children: typeof value === "boolean" ? value ? /* @__PURE__ */ jsx("span", { style: { color: T.primary }, "aria-label": "Included", children: "\u2713" }) : /* @__PURE__ */ jsx("span", { style: { color: T.mutedForeground }, "aria-label": "Not included", children: "\u2715" }) : /* @__PURE__ */ jsx("span", { children: value ?? "\u2014" }) }, plan.code);
+        })
+      ] }, feature.key)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(NozleBranding, {})
+  ] });
 }
 function UpgradeButton({
   planCode,
@@ -3561,26 +4037,18 @@ function UpgradeButton({
   onCheckoutStarted,
   onDowngradeScheduled,
   onUpgraded,
-  onError
+  onError,
+  appearance
 }) {
   const [isOpen, setIsOpen] = useState(false);
+  const { root } = useAppearance(appearance);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setIsOpen(true),
-        className,
-        style: {
-          padding: "0.75rem 1.5rem",
-          borderRadius: "var(--nozle-radius, 0.5rem)",
-          border: "none",
-          background: "var(--nozle-primary, var(--primary))",
-          color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-          cursor: "pointer",
-          fontWeight: 500,
-          ...style
-        },
+        ...root("upgradeButton", { ...buttonStyle(), ...style }, className),
         children: label
       }
     ),
@@ -3588,6 +4056,7 @@ function UpgradeButton({
       UpgradeModal,
       {
         isOpen,
+        appearance,
         planCode,
         returnUrl,
         subscriptionId,
@@ -3646,11 +4115,13 @@ function PlanGate({
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function UpgradePrompt({
-  text = "Upgrade to access this feature",
+  text: text2 = "Upgrade to access this feature",
   planName: planName2,
-  onUpgrade
+  onUpgrade,
+  appearance
 }) {
-  const displayText = planName2 ? `Upgrade to ${planName2} to access this feature` : text;
+  const { root } = useAppearance(appearance);
+  const displayText = planName2 ? `Upgrade to ${planName2} to access this feature` : text2;
   function handleUpgrade() {
     if (onUpgrade) {
       onUpgrade();
@@ -3661,40 +4132,23 @@ function UpgradePrompt({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      style: {
+      ...root("upgradePrompt", {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         gap: "0.75rem",
         padding: "1rem",
-        textAlign: "center"
-      },
+        textAlign: "center",
+        ...text.body
+      }),
       children: [
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              color: "var(--nozle-foreground, var(--foreground))",
-              fontSize: "0.875rem",
-              margin: 0
-            },
-            children: displayText
-          }
-        ),
+        /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: displayText }),
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: handleUpgrade,
-            style: {
-              padding: "0.5rem 1.25rem",
-              borderRadius: "var(--nozle-radius, 0.5rem)",
-              border: "none",
-              background: "var(--nozle-primary, var(--primary))",
-              color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-              cursor: "pointer",
-              fontWeight: 500,
-              fontSize: "0.875rem"
-            },
+            style: { ...buttonStyle(), padding: "0.5rem 1.25rem" },
             children: "Upgrade"
           }
         )
@@ -3707,12 +4161,14 @@ function LockedOverlay({
   upgradeText,
   upgradePlanName,
   onUpgrade,
-  children
+  children,
+  appearance
 }) {
+  const { root, el } = useAppearance(appearance);
   if (!locked) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+  return /* @__PURE__ */ jsxs("div", { ...root("lockedOverlay", { position: "relative", display: "inline-block" }), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -3728,16 +4184,15 @@ function LockedOverlay({
     /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
+        ...el("lockedOverlay__panel", {
           position: "absolute",
           inset: 0,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "var(--nozle-background, var(--background))",
-          opacity: 0.92,
-          borderRadius: "var(--nozle-radius, 0.5rem)"
-        },
+          background: `color-mix(in srgb, ${T.background} 92%, transparent)`,
+          borderRadius: T.radius
+        }),
         role: "dialog",
         "aria-label": "Feature locked \u2014 upgrade required",
         children: /* @__PURE__ */ jsx(
@@ -3745,7 +4200,8 @@ function LockedOverlay({
           {
             text: upgradeText,
             planName: upgradePlanName,
-            onUpgrade
+            onUpgrade,
+            appearance
           }
         )
       }
@@ -3753,68 +4209,109 @@ function LockedOverlay({
   ] });
 }
 function getUsageMeterColor(percentage) {
-  if (percentage >= 95) return "var(--nozle-destructive, var(--destructive))";
-  if (percentage >= 80) return "var(--nozle-warning, var(--warning))";
-  return "var(--nozle-primary, var(--primary))";
+  if (percentage >= 95) return T.danger;
+  if (percentage >= 80) return T.warning;
+  return T.primary;
 }
 function UsageMeter({
   used,
   limit,
   label,
-  showText = true
+  showText = true,
+  appearance
 }) {
-  const percentage = limit > 0 ? Math.min(100, used / limit * 100) : 0;
+  const { root, el } = useAppearance(appearance);
+  const unlimited = limit == null;
+  const percentage = !unlimited && limit > 0 ? Math.min(100, used / limit * 100) : 0;
   const color = getUsageMeterColor(percentage);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", children: [
-    label && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      showText && /* @__PURE__ */ jsxs("span", { style: { color }, children: [
-        used.toLocaleString(),
-        " / ",
-        limit.toLocaleString()
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-2 rounded-full overflow-hidden",
-        style: { background: "var(--nozle-border, var(--border))" },
-        children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...root("usageMeter", {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.25rem",
+        ...text.body
+      }),
+      children: [
+        label && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx("span", { ...el("usageMeter__label"), children: label }),
+          showText && /* @__PURE__ */ jsxs("span", { ...el("usageMeter__value", { color: percentage >= 95 ? T.dangerText : percentage >= 80 ? T.warningText : T.foreground }), children: [
+            used.toLocaleString(),
+            " / ",
+            unlimited ? "Unlimited" : limit.toLocaleString()
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full rounded-full",
-            style: {
-              width: `${percentage}%`,
-              background: color,
-              transition: "width 0.3s ease"
-            }
+            ...el("usageMeter__track", {
+              height: "0.5rem",
+              borderRadius: "9999px",
+              overflow: "hidden",
+              background: T.muted
+            }),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...el("usageMeter__fill", {
+                  height: "100%",
+                  borderRadius: "9999px",
+                  width: `${percentage}%`,
+                  background: color,
+                  transition: "width 0.3s ease"
+                })
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
+}
+function usageItems(entitlements, results) {
+  return entitlements.flatMap((entitlement) => {
+    const result = results[entitlement.code];
+    if (entitlement.feature_type !== "metered" || !result) return [];
+    return [{ key: entitlement.code, label: entitlement.name, used: result.used, limit: result.limit ?? null }];
+  });
 }
 function UsageDashboard({
   features = [],
-  loading = false
+  loading = false,
+  error = null,
+  emptyMessage = "No usage to show yet.",
+  appearance
 }) {
+  const { root } = useAppearance(appearance);
+  const props = root("usageDashboard", {
+    ...surface,
+    margin: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: loading ? "0.75rem" : "1rem",
+    // Errors and the empty message take the same colours as in the other components.
+    ...error ? { color: T.dangerText } : features.length === 0 && !loading && text.secondary
+  });
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "animate-pulse space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-8 rounded",
-        style: { background: "var(--nozle-border, var(--border))" }
-      },
-      i
-    )) });
+    return /* @__PURE__ */ jsx("div", { ...props, "aria-busy": "true", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { style: { height: "2rem", borderRadius: `calc(${T.radius} / 3)`, background: T.skeleton } }, i)) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("p", { ...props, role: "alert", children: typeof error === "string" ? error : error.message });
+  }
+  if (features.length === 0) {
+    return /* @__PURE__ */ jsx("p", { ...props, role: "status", children: emptyMessage });
   }
-  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: features.map((f) => /* @__PURE__ */ jsx(UsageMeter, { used: f.used, limit: f.limit, label: f.label }, f.key)) });
+  return /* @__PURE__ */ jsx("div", { ...props, children: features.map((f) => /* @__PURE__ */ jsx(UsageMeter, { used: f.used, limit: f.limit, label: f.label, appearance }, f.key)) });
 }
 function UsageAlert({
   features,
   threshold = 80,
-  upgradeHref = "/plans"
+  upgradeHref = "/plans",
+  appearance
 }) {
+  const { root, el } = useAppearance(appearance);
   const [dismissed, setDismissed] = useState(/* @__PURE__ */ new Set());
   const alertFeatures = features.filter(
     (f) => f.percentage >= threshold && !dismissed.has(f.key)
@@ -3825,15 +4322,19 @@ function UsageAlert({
   const handleDismiss = (key) => {
     setDismissed((prev) => new Set(prev).add(key));
   };
-  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: alertFeatures.map((f) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { ...root("usageAlert", { display: "flex", flexDirection: "column", gap: "0.5rem", ...text.body }), children: alertFeatures.map((f) => /* @__PURE__ */ jsxs(
     "div",
     {
       role: "alert",
-      className: "flex items-center justify-between rounded-md px-4 py-3 text-sm",
       style: {
-        background: "var(--nozle-warning-bg, var(--warning-bg, #fef9c3))",
-        color: "var(--nozle-warning-text, var(--warning-text, #854d0e))",
-        border: "1px solid var(--nozle-warning-border, var(--warning-border, #fde047))"
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderRadius: `calc(${T.radius} / 2)`,
+        padding: "0.75rem 1rem",
+        background: T.warningSoft,
+        color: T.warningText,
+        border: border(T.warningBorder)
       },
       children: [
         /* @__PURE__ */ jsxs("span", { children: [
@@ -3856,8 +4357,8 @@ function UsageAlert({
             {
               href: upgradeHref,
               style: {
+                ...text.action,
                 color: "inherit",
-                fontWeight: 600,
                 textDecoration: "underline"
               },
               children: "Upgrade"
@@ -3867,16 +4368,17 @@ function UsageAlert({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => handleDismiss(f.key),
             "aria-label": `Dismiss ${f.label} alert`,
-            style: {
+            ...el("usageAlert__dismiss", {
               background: "none",
               border: "none",
               cursor: "pointer",
               padding: "0 0 0 0.75rem",
-              fontSize: "1rem",
+              ...text.action,
               color: "inherit"
-            },
+            }),
             children: "\xD7"
           }
         )
@@ -3885,44 +4387,247 @@ function UsageAlert({
     f.key
   )) });
 }
-var TIER_STYLES = {
-  free: {
-    background: "var(--nozle-muted, var(--muted, #f1f5f9))",
-    color: "var(--nozle-muted-foreground, var(--muted-foreground, #64748b))",
-    border: "1px solid var(--nozle-border, var(--border, #e2e8f0))"
-  },
-  starter: {
-    background: "color-mix(in srgb, var(--nozle-primary, var(--primary, #3b82f6)) 10%, transparent)",
-    color: "var(--nozle-primary, var(--primary, #3b82f6))",
-    border: "1px solid color-mix(in srgb, var(--nozle-primary, var(--primary, #3b82f6)) 30%, transparent)"
-  },
-  pro: {
-    background: "var(--nozle-primary, var(--primary, #3b82f6))",
-    color: "var(--nozle-primary-foreground, var(--primary-foreground, #ffffff))",
-    border: "1px solid transparent"
-  },
-  enterprise: {
-    background: "var(--nozle-accent, var(--accent, #8b5cf6))",
-    color: "var(--nozle-accent-foreground, var(--accent-foreground, #ffffff))",
-    border: "1px solid transparent"
+var STATUS_LABELS = {
+  active: "Active",
+  pending: "Pending",
+  incomplete: "Awaiting payment",
+  canceled: "Canceled",
+  terminated: "Ended"
+};
+function statusColors(status, ending) {
+  if (status === "active" && !ending) return { background: T.successSoft, color: T.successText };
+  if (status === "active" || status === "pending" || status === "incomplete") {
+    return { background: T.warningSoft, color: T.warningText };
+  }
+  return { background: T.muted, color: T.mutedForeground };
+}
+function day(value, locale) {
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString(locale, { dateStyle: "medium" });
+}
+function currentPlanMeters(entitlements, usage) {
+  const units = /* @__PURE__ */ new Map();
+  for (const charge of usage?.charges_usage ?? []) {
+    units.set(charge.feature.code, (units.get(charge.feature.code) ?? 0) + (Number(charge.units) || 0));
+  }
+  return (entitlements ?? []).filter((entitlement) => entitlement.feature_type === "metered").map((entitlement) => ({
+    key: entitlement.code,
+    label: entitlement.name,
+    used: units.get(entitlement.code) ?? 0,
+    limit: entitlement.usage_limit ?? null
+  }));
+}
+function CurrentPlan(props) {
+  return props.subscription === void 0 ? /* @__PURE__ */ jsx(CurrentPlanFromBackend, { ...props }) : /* @__PURE__ */ jsx(CurrentPlanView, { ...props });
+}
+function CurrentPlanFromBackend(props) {
+  const subscription = useSubscription();
+  const plans = usePlans();
+  const usage = useUsage();
+  const planCode = subscription.data?.subscription?.plan_code;
+  const meters = props.usage ?? currentPlanMeters(plans.plans.find((plan) => plan.code === planCode)?.entitlements, usage.data);
+  return /* @__PURE__ */ jsx(
+    CurrentPlanView,
+    {
+      ...props,
+      subscription: subscription.data ?? null,
+      usage: meters,
+      isLoading: props.isLoading || subscription.isPending,
+      error: props.error ?? subscription.error
+    }
+  );
+}
+function CurrentPlanView({
+  subscription,
+  usage = [],
+  details = [],
+  actions,
+  warningPercent = 80,
+  title = "Current plan",
+  isLoading = false,
+  error = null,
+  emptyMessage = "No active plan.",
+  pastDueMessage = "A payment is overdue. Pay the open invoice to keep your plan active.",
+  locale = "en-US",
+  appearance
+}) {
+  const { root, el } = useAppearance(appearance);
+  const frame = { ...surface, padding: 0, overflow: "hidden" };
+  const header = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "0.875rem 1.25rem",
+        borderBottom: border()
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: text.heading, children: title }),
+        actions
+      ]
+    }
+  );
+  const body = (children) => /* @__PURE__ */ jsx("div", { style: { padding: "1.25rem", display: "grid", gap: "1rem" }, children });
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("section", { ...root("currentPlan", frame), "aria-busy": "true", children: [
+      header,
+      body(/* @__PURE__ */ jsx("div", { style: { height: 72, borderRadius: `calc(${T.radius} / 2)`, background: T.skeleton } }))
+    ] });
   }
+  if (error) {
+    return /* @__PURE__ */ jsxs("section", { ...root("currentPlan", frame), children: [
+      header,
+      body(/* @__PURE__ */ jsx("p", { role: "alert", style: { margin: 0, color: T.dangerText }, children: typeof error === "string" ? error : error.message }))
+    ] });
+  }
+  const current = subscription?.subscription;
+  if (!current) {
+    return /* @__PURE__ */ jsxs("section", { ...root("currentPlan", frame), children: [
+      header,
+      body(/* @__PURE__ */ jsx("p", { role: "status", style: { ...text.secondary, margin: 0 }, children: emptyMessage }))
+    ] });
+  }
+  const pending = subscription?.pending_change;
+  const ending = Boolean(current.ending_at);
+  const near = warningPercent === null ? [] : usage.filter((meter) => meter.limit != null && meter.limit > 0 && meter.used / meter.limit * 100 >= warningPercent);
+  const statusLabel = ending && current.ending_at ? `Ends ${day(current.ending_at, locale)}` : STATUS_LABELS[current.status] ?? current.status;
+  return /* @__PURE__ */ jsxs("section", { ...root("currentPlan", frame), "aria-label": title, children: [
+    header,
+    body(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        subscription?.past_due && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "alert",
+            ...el("currentPlan__notice", {
+              margin: 0,
+              padding: "0.625rem 0.875rem",
+              ...text.body,
+              borderRadius: `calc(${T.radius} / 2)`,
+              background: T.dangerSoft,
+              color: T.dangerText,
+              border: border(T.dangerBorder)
+            }),
+            children: pastDueMessage
+          }
+        ),
+        near.map((meter) => /* @__PURE__ */ jsxs(
+          "p",
+          {
+            role: "status",
+            ...el("currentPlan__notice", {
+              margin: 0,
+              padding: "0.625rem 0.875rem",
+              ...text.body,
+              borderRadius: `calc(${T.radius} / 2)`,
+              background: T.warningSoft,
+              color: T.warningText,
+              border: border(T.warningBorder)
+            }),
+            children: [
+              "You have used ",
+              Math.round(meter.used / meter.limit * 100),
+              "% of the ",
+              meter.label,
+              " included in",
+              " ",
+              current.plan.name,
+              "."
+            ]
+          },
+          meter.key
+        )),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.625rem" }, children: [
+          /* @__PURE__ */ jsx("span", { ...el("currentPlan__name", text.heading), children: current.plan.name }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...el("currentPlan__status", {
+                ...text.label,
+                ...statusColors(current.status, ending),
+                padding: "0.125rem 0.625rem",
+                borderRadius: 9999
+              }),
+              children: statusLabel
+            }
+          ),
+          pending && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              ...el("currentPlan__scheduled", {
+                ...text.label,
+                padding: "0.125rem 0.625rem",
+                borderRadius: 9999,
+                border: border()
+              }),
+              children: [
+                "Changes to ",
+                pending.name,
+                " on ",
+                day(pending.effective_at, locale)
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { ...el("currentPlan__price", { ...text.secondary, marginLeft: "auto" }), children: [
+            formatPlanPrice(Number(current.plan.amount_cents), current.plan.currency),
+            " / ",
+            intervalLabel(current.plan.interval)
+          ] })
+        ] }),
+        usage.length > 0 && /* @__PURE__ */ jsx("div", { ...el("currentPlan__usage", { display: "grid", gap: "0.875rem" }), children: usage.map((meter) => /* @__PURE__ */ jsx(
+          UsageMeter,
+          {
+            label: `${meter.label} used this period`,
+            used: meter.used,
+            limit: meter.limit,
+            appearance
+          },
+          meter.key
+        )) }),
+        details.length > 0 && /* @__PURE__ */ jsx(
+          "dl",
+          {
+            ...el("currentPlan__details", {
+              margin: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
+              gap: "0.75rem"
+            }),
+            children: details.map((detail) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { style: text.meta, children: detail.label }),
+              /* @__PURE__ */ jsx("dd", { style: { margin: "0.125rem 0 0", fontWeight: 600 }, children: detail.value })
+            ] }, detail.label))
+          }
+        )
+      ] })
+    ),
+    /* @__PURE__ */ jsx(NozleBranding, {})
+  ] });
+}
+var TIER_STYLES = {
+  free: { background: T.muted, color: T.mutedForeground, border: border() },
+  starter: { background: T.primarySoft, color: T.primary, border: border(`color-mix(in srgb, ${T.primary} 30%, transparent)`) },
+  pro: { background: T.primary, color: T.primaryForeground, border: border("transparent") },
+  enterprise: { background: T.accent, color: T.accentForeground, border: border("transparent") }
 };
-function PlanBadge({ plan, tier = "free" }) {
+function PlanBadge({ plan, tier = "free", appearance }) {
+  const { root } = useAppearance(appearance);
   const style = TIER_STYLES[tier] ?? TIER_STYLES.free;
   return /* @__PURE__ */ jsx(
     "span",
     {
-      style: {
+      ...root("planBadge", {
+        ...text.label,
         ...style,
         display: "inline-flex",
         alignItems: "center",
         padding: "0.125rem 0.5rem",
         borderRadius: "9999px",
-        fontSize: "0.75rem",
-        fontWeight: 600,
-        lineHeight: "1.25rem",
         whiteSpace: "nowrap"
-      },
+      }),
       children: plan
     }
   );
@@ -3939,8 +4644,10 @@ var BRAND_LABELS = {
 function PaymentMethodDisplay({
   paymentMethod,
   onUpdatePaymentMethod,
-  updateHref = "/billing/update-payment"
+  updateHref = "/billing/update-payment",
+  appearance
 }) {
+  const { root } = useAppearance(appearance);
   const handleUpdate = () => {
     if (onUpdatePaymentMethod) {
       onUpdatePaymentMethod();
@@ -3948,7 +4655,7 @@ function PaymentMethodDisplay({
       window.location.href = updateHref;
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+  return /* @__PURE__ */ jsxs("div", { ...root("paymentMethod", { ...surface, display: "flex", flexDirection: "column", gap: "0.75rem" }), children: [
     paymentMethod ? /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3957,80 +4664,245 @@ function PaymentMethodDisplay({
           alignItems: "center",
           gap: "0.75rem",
           padding: "0.75rem 1rem",
-          border: "1px solid var(--nozle-border, var(--border))",
-          borderRadius: "0.5rem",
-          fontSize: "0.875rem"
+          border: border(),
+          borderRadius: `calc(${T.radius} * 0.6)`
         },
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontWeight: 600,
-                color: "var(--nozle-foreground, var(--foreground))"
-              },
-              children: BRAND_LABELS[paymentMethod.brand.toLowerCase()] ?? paymentMethod.brand
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-              },
-              children: [
-                "\u2022\u2022\u2022\u2022 ",
-                paymentMethod.last4
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                fontSize: "0.75rem"
-              },
-              children: [
-                "Expires ",
-                String(paymentMethod.expMonth).padStart(2, "0"),
-                "/",
-                String(paymentMethod.expYear).slice(-2)
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: T.foreground }, children: BRAND_LABELS[paymentMethod.brand.toLowerCase()] ?? paymentMethod.brand }),
+          /* @__PURE__ */ jsxs("span", { style: text.secondary, children: [
+            "\u2022\u2022\u2022\u2022 ",
+            paymentMethod.last4
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: text.meta, children: [
+            "Expires ",
+            String(paymentMethod.expMonth).padStart(2, "0"),
+            "/",
+            String(paymentMethod.expYear).slice(-2)
+          ] })
         ]
       }
-    ) : /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-          fontSize: "0.875rem"
-        },
-        children: "No payment method on file."
-      }
-    ),
+    ) : /* @__PURE__ */ jsx("p", { style: { ...text.secondary, margin: 0 }, children: "No payment method on file." }),
     /* @__PURE__ */ jsx(
       "button",
       {
+        type: "button",
         onClick: handleUpdate,
         style: {
-          background: "transparent",
-          border: "1px solid var(--nozle-primary, var(--primary))",
-          color: "var(--nozle-primary, var(--primary))",
+          ...buttonStyle("outline"),
+          alignSelf: "flex-start",
           padding: "0.375rem 0.875rem",
-          borderRadius: "0.375rem",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          cursor: "pointer"
+          borderRadius: buttonRadius(`calc(${T.radius} / 2)`)
         },
         children: "Update Payment Method"
       }
     )
   ] });
 }
+var SOURCE_LABELS = {
+  subscription_grant: "Plan grant",
+  top_up: "Top-up",
+  manual_grant: "Granted",
+  adjustment: "Adjustment",
+  allocated_top_up: "Allocated top-up"
+};
+var muted = T.mutedForeground;
+function date2(value) {
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString("en-US", { dateStyle: "medium" });
+}
+function CreditBalance({
+  balance,
+  isLoading = false,
+  error = null,
+  emptyMessage = "No credit balance yet.",
+  appearance
+}) {
+  const { root, el } = useAppearance(appearance);
+  if (isLoading) return /* @__PURE__ */ jsx("div", { ...root("creditBalance", { ...surface, height: 96, background: T.skeleton }), role: "status", "aria-label": "Loading credit balance" });
+  if (error) return /* @__PURE__ */ jsx("p", { ...root("creditBalance", { ...surface, color: T.dangerText }), role: "alert", children: typeof error === "string" ? error : error.message });
+  if (!balance) return /* @__PURE__ */ jsx("p", { ...root("creditBalance", { ...surface, color: muted }), role: "status", children: emptyMessage });
+  const sources = (balance.sources ?? []).filter((source) => source.remaining !== "0");
+  return /* @__PURE__ */ jsxs("section", { "aria-label": balance.credit_system_name, ...root("creditBalance", surface), children: [
+    /* @__PURE__ */ jsx("h3", { style: { ...text.heading, margin: 0 }, children: balance.credit_system_name }),
+    /* @__PURE__ */ jsxs("p", { style: { margin: "0.25rem 0 0" }, children: [
+      /* @__PURE__ */ jsx("span", { ...el("creditBalance__amount", text.metric), children: formatDecimalString(balance.available) }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { style: text.secondary, children: [
+        creditUnitLabel(balance.available, balance.unit_name),
+        " available"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { style: { ...text.meta, margin: "0.25rem 0 0" }, children: [
+      "As of ",
+      date2(balance.as_of)
+    ] }),
+    sources.length > 0 && /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: "1rem 0 0" }, children: sources.map((source) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", justifyContent: "space-between", padding: "0.25rem 0" }, children: [
+      /* @__PURE__ */ jsx("span", { children: SOURCE_LABELS[source.type] ?? source.type }),
+      /* @__PURE__ */ jsxs("span", { style: text.secondary, children: [
+        formatDecimalString(source.remaining),
+        source.expires_at ? ` \xB7 expires ${date2(source.expires_at)}` : ""
+      ] })
+    ] }, source.id)) })
+  ] });
+}
+var TYPE_LABELS = {
+  consume: "Used",
+  grant: "Granted",
+  adjustment: "Adjustment",
+  expire: "Expired",
+  revoke: "Revoked",
+  refund: "Refunded",
+  transfer: "Transfer"
+};
+var muted2 = T.mutedForeground;
+function when(value) {
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" });
+}
+function CreditHistory({
+  operations = [],
+  isLoading = false,
+  error = null,
+  emptyMessage = "No credit activity yet.",
+  hasMore = false,
+  onLoadMore,
+  appearance
+}) {
+  const { root, el } = useAppearance(appearance);
+  if (error) return /* @__PURE__ */ jsx("p", { ...root("creditHistory", { ...surface, color: T.dangerText }), role: "alert", children: typeof error === "string" ? error : error.message });
+  if (isLoading && operations.length === 0) return /* @__PURE__ */ jsx("div", { ...root("creditHistory", { ...surface, height: 120, background: T.skeleton }), role: "status", "aria-label": "Loading credit history" });
+  if (operations.length === 0) return /* @__PURE__ */ jsx("p", { ...root("creditHistory", { ...surface, color: muted2 }), role: "status", children: emptyMessage });
+  return /* @__PURE__ */ jsxs("div", { ...root("creditHistory", { ...text.body, minWidth: 0 }), children: [
+    /* @__PURE__ */ jsx("div", { style: table.frame, children: /* @__PURE__ */ jsxs("table", { ...el("creditHistory__table", table.table), children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: ["When", "Type", "Feature", "Credits", "Status"].map((heading) => /* @__PURE__ */ jsx("th", { style: table.head(heading === "Credits"), children: heading }, heading)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: operations.map((operation, index) => {
+        const last = index === operations.length - 1;
+        return /* @__PURE__ */ jsxs("tr", { ...el("creditHistory__row"), children: [
+          /* @__PURE__ */ jsx("td", { style: table.cell(false, last), children: when(operation.occurred_at) }),
+          /* @__PURE__ */ jsx("td", { style: table.cell(false, last), children: TYPE_LABELS[operation.type] ?? operation.type }),
+          /* @__PURE__ */ jsx("td", { style: table.cell(false, last), children: operation.feature_code ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { style: table.cell(true, last), children: formatDecimalString(operation.credit_amount) }),
+          /* @__PURE__ */ jsx("td", { style: { ...table.cell(false, last), color: operation.status === "succeeded" ? void 0 : muted2 }, children: operation.status })
+        ] }, operation.id);
+      }) })
+    ] }) }),
+    hasMore && onLoadMore && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onLoadMore,
+        disabled: isLoading,
+        style: {
+          ...buttonStyle("secondary", isLoading),
+          marginTop: "0.75rem",
+          padding: "0.5rem 0.875rem",
+          borderRadius: buttonRadius(`calc(${T.radius} / 2)`),
+          opacity: 1
+        },
+        children: isLoading ? "Loading\u2026" : "Load more"
+      }
+    )
+  ] });
+}
+
+// src/components/usage/usage-data.ts
+function formatAmount(amountCents, currency) {
+  const amount = amountCents / 100;
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
+  } catch {
+    return `${currency} ${amount.toFixed(2)}`;
+  }
+}
+function formatDay(value) {
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString("en-US", { dateStyle: "medium", timeZone: "UTC" });
+}
+var muted3 = T.mutedForeground;
+function UsageBreakdown({
+  usage,
+  isLoading = false,
+  error = null,
+  emptyMessage = "No usage in this period yet.",
+  appearance
+}) {
+  const { root, el } = useAppearance(appearance);
+  if (isLoading) return /* @__PURE__ */ jsx("div", { ...root("usageBreakdown", { ...surface, height: 120, background: T.skeleton }), role: "status", "aria-label": "Loading usage" });
+  if (error) return /* @__PURE__ */ jsx("p", { ...root("usageBreakdown", { ...surface, color: T.dangerText }), role: "alert", children: typeof error === "string" ? error : error.message });
+  if (!usage || usage.charges_usage.length === 0) return /* @__PURE__ */ jsx("p", { ...root("usageBreakdown", { ...surface, color: muted3 }), role: "status", children: emptyMessage });
+  const rows = [...usage.charges_usage].sort((a, b) => b.amount_cents - a.amount_cents);
+  return /* @__PURE__ */ jsxs("section", { ...root("usageBreakdown", { ...text.body, minWidth: 0 }), children: [
+    /* @__PURE__ */ jsxs("p", { style: { ...text.secondary, margin: "0 0 0.5rem" }, children: [
+      formatDay(usage.from_datetime),
+      " to ",
+      formatDay(usage.to_datetime)
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: table.frame, children: /* @__PURE__ */ jsxs("table", { style: table.table, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { style: table.head(), children: "Feature" }),
+        /* @__PURE__ */ jsx("th", { style: table.head(true), children: "Units" }),
+        /* @__PURE__ */ jsx("th", { style: table.head(true), children: "Amount" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+        const last = index === rows.length - 1;
+        return /* @__PURE__ */ jsxs("tr", { ...el("usageBreakdown__row"), children: [
+          /* @__PURE__ */ jsx("td", { style: table.cell(false, last), children: row.charge.invoice_display_name || row.feature.name }),
+          /* @__PURE__ */ jsx("td", { style: table.cell(true, last), children: formatDecimalString(row.units, 6) }),
+          /* @__PURE__ */ jsx("td", { style: table.cell(true, last), children: formatAmount(row.amount_cents, row.amount_currency) })
+        ] }, row.charge.nozle_id);
+      }) }),
+      /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { style: table.foot(), colSpan: 2, children: "Total" }),
+        /* @__PURE__ */ jsx("td", { style: table.foot(true), children: formatAmount(usage.amount_cents, usage.currency) })
+      ] }) })
+    ] }) })
+  ] });
+}
+var muted4 = T.mutedForeground;
+var BAR_AREA = 120;
+function unitsFor(period, featureCode) {
+  return period.charges_usage.filter((charge) => charge.feature.code === featureCode).reduce((sum, charge) => sum + (Number(charge.units) || 0), 0);
+}
+function UsageTrend({
+  periods,
+  featureCode,
+  isLoading = false,
+  error = null,
+  emptyMessage = "No past usage yet.",
+  appearance
+}) {
+  const { root, el } = useAppearance(appearance);
+  if (isLoading) return /* @__PURE__ */ jsx("div", { ...root("usageTrend", { ...surface, height: 160, background: T.skeleton }), role: "status", "aria-label": "Loading usage trend" });
+  if (error) return /* @__PURE__ */ jsx("p", { ...root("usageTrend", { ...surface, color: T.dangerText }), role: "alert", children: typeof error === "string" ? error : error.message });
+  if (!periods || periods.length === 0) return /* @__PURE__ */ jsx("p", { ...root("usageTrend", { ...surface, color: muted4 }), role: "status", children: emptyMessage });
+  const ordered = [...periods].sort((a, b) => Date.parse(a.from_datetime) - Date.parse(b.from_datetime));
+  const points = ordered.map((period) => ({
+    key: period.from_datetime,
+    label: formatDay(period.from_datetime),
+    value: featureCode ? unitsFor(period, featureCode) : period.amount_cents,
+    text: featureCode ? `${unitsFor(period, featureCode).toLocaleString("en-US")} ${featureCode}` : formatAmount(period.amount_cents, period.currency)
+  }));
+  const max = Math.max(...points.map((point) => point.value), 0);
+  return /* @__PURE__ */ jsx("figure", { ...root("usageTrend", { ...surface, margin: 0 }), children: /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", height: BAR_AREA + 40 }, children: points.map((point) => /* @__PURE__ */ jsxs("div", { style: { ...text.meta, flex: 1, minWidth: 0, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx("div", { children: point.text }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "img",
+        "aria-label": `${point.label}: ${point.text}`,
+        title: `${point.label}: ${point.text}`,
+        ...el("usageTrend__bar", {
+          height: max > 0 ? Math.max(2, point.value / max * BAR_AREA) : 2,
+          marginTop: 4,
+          borderRadius: `min(4px, ${T.radius}) min(4px, ${T.radius}) 0 0`,
+          background: T.primary
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: point.label })
+  ] }, point.key)) }) });
+}
 
-export { BillingContext, BillingPortal, BillingPortalError, BillingProvider, CancellationControl, Checkout, CheckoutButton, FeatureGate, LockedOverlay, PaymentMethodDisplay, PlanBadge, PlanCard, PlanChangeControl, PlanComparison, PlanGate, PricingTable, UpgradeButton, UpgradeModal, UpgradePrompt, UsageAlert, UsageDashboard, UsageGate, UsageMeter, getUsageMeterColor, useBillingContext, useCheckout, useCheckout2 as useCheckoutSession, useNozleClient, useOptionalBillingContext, usePlans };
+export { BillingContext, BillingPortal, BillingPortalError, BillingProvider, BillingRequestError, CancellationControl, Checkout, CheckoutButton, CreditBalance, CreditHistory, CurrentPlan, FeatureGate, LockedOverlay, PaymentMethodDisplay, PlanBadge, PlanCard, PlanChangeControl, PlanComparison, PlanGate, PoweredByNozle, PricingTable, UpgradeButton, UpgradeModal, UpgradePrompt, UsageAlert, UsageBreakdown, UsageDashboard, UsageGate, UsageMeter, UsageTrend, comparisonRows, currentPlanMeters, getUsageMeterColor, planFeatures, sortPlansByPrice, usageItems, useAppearance, useBillingContext, useBillingRefresh, useCheckout, useCheckout2 as useCheckoutSession, useCreditBalance, useCreditHistory, useEntitlement, useInvoiceDownload, useInvoices, useNozleBranding, useNozleClient, useOptionalBillingContext, usePlans, useSubscription, useUpgradePreview, useUsage };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map