@base316/react 0.1.0

package/dist/index.js

@@ -0,0 +1,1208 @@
+"use client";
+
+// src/provider.tsx
+import { Base316Browser } from "@base316/sdk";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/appearance.ts
+var VARIABLES = {
+  colorPrimary: "--b316-color-primary",
+  colorPrimaryText: "--b316-color-primary-text",
+  colorText: "--b316-color-text",
+  colorMuted: "--b316-color-muted",
+  colorBackground: "--b316-color-background",
+  colorBorder: "--b316-color-border",
+  colorDanger: "--b316-color-danger",
+  colorDangerBackground: "--b316-color-danger-bg",
+  colorSuccess: "--b316-color-success",
+  borderRadius: "--b316-radius",
+  fontFamily: "--b316-font",
+  fontSize: "--b316-font-size",
+  spacing: "--b316-spacing"
+};
+function appearanceToStyle(appearance) {
+  if (!appearance) {
+    return {};
+  }
+  const style = {};
+  for (const [key, variable] of Object.entries(VARIABLES)) {
+    const value = appearance[key];
+    if (value !== void 0) {
+      style[variable] = value;
+    }
+  }
+  return style;
+}
+var STYLE_ELEMENT_ID = "base316-components";
+var STYLESHEET = `
+.b316-root {
+  --b316-color-primary: #111827;
+  --b316-color-primary-text: #ffffff;
+  --b316-color-text: #111827;
+  --b316-color-muted: #6b7280;
+  --b316-color-background: #ffffff;
+  --b316-color-border: #e5e7eb;
+  --b316-color-danger: #991b1b;
+  --b316-color-danger-bg: #fef2f2;
+  --b316-color-success: #166534;
+  --b316-radius: 12px;
+  --b316-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --b316-font-size: 15px;
+  --b316-spacing: 12px;
+
+  font-family: var(--b316-font);
+  font-size: var(--b316-font-size);
+  line-height: 1.5;
+  color: var(--b316-color-text);
+}
+
+.b316-card {
+  border: 1px solid var(--b316-color-border);
+  border-radius: var(--b316-radius);
+  padding: calc(var(--b316-spacing) * 1.6);
+  background: var(--b316-color-background);
+}
+
+.b316-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--b316-spacing); }
+.b316-label { font-size: 0.87em; color: var(--b316-color-muted); }
+
+.b316-input {
+  padding: 9px 11px;
+  border: 1px solid var(--b316-color-border);
+  border-radius: calc(var(--b316-radius) / 1.6);
+  font: inherit;
+  color: inherit;
+  background: var(--b316-color-background);
+}
+.b316-input:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 1px; }
+
+.b316-button {
+  width: 100%;
+  padding: 10px 14px;
+  border: 0;
+  border-radius: calc(var(--b316-radius) / 1.6);
+  background: var(--b316-color-primary);
+  color: var(--b316-color-primary-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.b316-button:hover:not([disabled]) { filter: brightness(1.12); }
+.b316-button:active:not([disabled]) { transform: translateY(1px); }
+.b316-button:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }
+.b316-button[disabled] { opacity: .55; cursor: not-allowed; }
+
+.b316-button-secondary {
+  width: auto;
+  transition: background-color .12s ease;
+  background: var(--b316-color-background);
+  color: var(--b316-color-text);
+  border: 1px solid var(--b316-color-border);
+  font-weight: 500;
+}
+
+.b316-button-link {
+  width: auto;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--b316-color-primary);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.b316-error {
+  background: var(--b316-color-danger-bg);
+  color: var(--b316-color-danger);
+  padding: 8px 10px;
+  border-radius: calc(var(--b316-radius) / 2);
+  font-size: 0.9em;
+  margin-bottom: var(--b316-spacing);
+}
+
+.b316-muted { color: var(--b316-color-muted); font-size: 0.87em; }
+.b316-success { color: var(--b316-color-success); }
+
+.b316-plans {
+  display: grid;
+  gap: calc(var(--b316-spacing) * 1.3);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  align-items: stretch;
+}
+
+.b316-plan {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* The recommended plan. Lifted rather than merely tinted: on a pricing table
+   the eye needs one obvious default, and colour alone does not survive being
+   viewed in greyscale or by someone who cannot distinguish the accent. */
+.b316-plan-featured {
+  border-color: var(--b316-color-primary);
+  box-shadow: 0 0 0 1px var(--b316-color-primary);
+}
+
+.b316-plan-badge {
+  display: inline-block;
+  background: var(--b316-color-primary);
+  color: var(--b316-color-primary-text);
+  border-radius: 999px;
+  padding: 2px 9px;
+  font-size: 0.75em;
+  font-weight: 600;
+  letter-spacing: .02em;
+  margin-bottom: 8px;
+}
+
+/* Occupies the badge's height without drawing anything, so a featured card
+   does not push its own price and features out of line with the others. */
+.b316-plan-badge-spacer {
+  display: inline-block;
+  padding: 2px 9px;
+  font-size: 0.75em;
+  margin-bottom: 8px;
+  visibility: hidden;
+}
+
+.b316-plan-head { padding: calc(var(--b316-spacing) * 1.6); padding-bottom: 0; }
+.b316-plan-name { font-weight: 600; font-size: 1.06em; }
+.b316-plan-desc { color: var(--b316-color-muted); font-size: 0.87em; margin-top: 2px; }
+
+.b316-plan-pricing { padding: 0 calc(var(--b316-spacing) * 1.6) calc(var(--b316-spacing) * 1.4); }
+
+.b316-plan-price {
+  font-size: 2.1em;
+  font-weight: 640;
+  letter-spacing: -.02em;
+  margin-top: calc(var(--b316-spacing) * 0.7);
+  /* Lining figures of even width, so prices do not shimmer between cards. */
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.b316-plan-cadence { color: var(--b316-color-muted); font-size: 0.87em; min-height: 1.35em; }
+.b316-plan-trial { color: var(--b316-color-success); font-size: 0.87em; min-height: 1.35em; }
+
+.b316-plan-features {
+  list-style: none;
+  padding: calc(var(--b316-spacing) * 1.2) calc(var(--b316-spacing) * 1.6);
+  margin: 0;
+  flex: 1;
+  border-top: 1px solid var(--b316-color-border);
+}
+.b316-plan-feature {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 5px 0;
+  font-size: 0.94em;
+}
+.b316-plan-feature-value { color: var(--b316-color-muted); font-variant-numeric: tabular-nums; }
+
+.b316-plan-action {
+  padding: calc(var(--b316-spacing) * 1.2) calc(var(--b316-spacing) * 1.6);
+  border-top: 1px solid var(--b316-color-border);
+}
+
+/* The plan already held. A faded primary button reads as broken rather than
+   as "you are here", so this is a flat, quiet, genuinely inert surface. */
+.b316-button-current,
+.b316-button-current[disabled] {
+  background: transparent;
+  color: var(--b316-color-muted);
+  border: 1px solid var(--b316-color-border);
+  font-weight: 500;
+  opacity: 1;
+  cursor: default;
+}
+
+.b316-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
+`;
+function cls(base, extra) {
+  return extra ? `${base} ${extra}` : base;
+}
+var STYLESHEET_EXTRA = `
+.b316-branding { display: flex; flex-direction: column; gap: 4px; }
+.b316-branding-logo { max-height: 40px; width: auto; align-self: flex-start; }
+.b316-branding-name { font-size: 1.5em; font-weight: 650; letter-spacing: -.01em; }
+.b316-branding-tagline { color: var(--b316-color-muted); }
+
+.b316-invoice-table { width: 100%; border-collapse: collapse; font-size: 0.94em; }
+.b316-invoice-table th {
+  text-align: left;
+  font-weight: 500;
+  color: var(--b316-color-muted);
+  font-size: 0.85em;
+  padding: 0 0 6px;
+  border-bottom: 1px solid var(--b316-color-border);
+}
+.b316-invoice-table td { padding: 9px 0; border-bottom: 1px solid var(--b316-color-border); }
+/* Columns need breathing room or the amount runs straight into the action \u2014
+   "$49.00View" \u2014 which is what happens when only the row has padding. */
+.b316-invoice-table th + th,
+.b316-invoice-table td + td { padding-left: 16px; }
+.b316-invoice-table td:last-child,
+.b316-invoice-table th:last-child { text-align: right; width: 1%; white-space: nowrap; }
+.b316-invoice-table tr:last-child td { border-bottom: 0; }
+.b316-num { text-align: right; font-variant-numeric: tabular-nums; }
+
+.b316-invoice-view {
+  margin-top: calc(var(--b316-spacing) * 1.4);
+  border-top: 1px solid var(--b316-color-border);
+  padding-top: calc(var(--b316-spacing) * 1.4);
+}
+.b316-invoice-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: var(--b316-spacing); }
+.b316-invoice-doc { display: flex; flex-direction: column; gap: calc(var(--b316-spacing) * 1.4); }
+.b316-invoice-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b316-spacing); }
+.b316-invoice-totals { display: flex; flex-direction: column; gap: 6px; margin-left: auto; min-width: 240px; }
+.b316-invoice-total { font-weight: 650; border-top: 1px solid var(--b316-color-border); padding-top: 6px; }
+
+/* Printing emits the invoice alone. Without this the browser would paginate the
+   whole application around it, which is not something anyone wants to file. */
+@media print {
+  body * { visibility: hidden; }
+  .b316-invoice-doc, .b316-invoice-doc * { visibility: visible; }
+  .b316-invoice-doc {
+    position: absolute;
+    inset: 0 auto auto 0;
+    width: 100%;
+    padding: 24px;
+  }
+  .b316-invoice-actions { display: none; }
+}
+`;
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var Base316Context = createContext(null);
+var STORAGE_KEY = "base316.session";
+function readStoredToken() {
+  try {
+    return window.localStorage.getItem(STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+function writeStoredToken(token) {
+  try {
+    if (token === null) {
+      window.localStorage.removeItem(STORAGE_KEY);
+    } else {
+      window.localStorage.setItem(STORAGE_KEY, token);
+    }
+  } catch {
+  }
+}
+function Base316Provider({
+  publishableKey,
+  baseUrl,
+  token: controlledToken,
+  onTokenChange,
+  appearance,
+  className,
+  children
+}) {
+  const client = useMemo(
+    () => new Base316Browser({ publishableKey, baseUrl }),
+    [publishableKey, baseUrl]
+  );
+  useEffect(() => {
+    if (document.getElementById(STYLE_ELEMENT_ID)) {
+      return;
+    }
+    const element = document.createElement("style");
+    element.id = STYLE_ELEMENT_ID;
+    element.textContent = STYLESHEET + STYLESHEET_EXTRA;
+    document.head.appendChild(element);
+  }, []);
+  const controlled = controlledToken !== void 0;
+  const [internalToken, setInternalToken] = useState(null);
+  const [session, setSession] = useState(null);
+  const [branding, setBranding] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const token = controlled ? controlledToken : internalToken;
+  useEffect(() => {
+    if (controlled) {
+      return;
+    }
+    setInternalToken(readStoredToken());
+  }, [controlled]);
+  useEffect(() => {
+    let cancelled = false;
+    client.billing.branding().then((result) => {
+      if (!cancelled) setBranding(result);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+  const setToken = useCallback(
+    (next) => {
+      if (controlled) {
+        onTokenChange?.(next);
+        return;
+      }
+      writeStoredToken(next);
+      setInternalToken(next);
+      onTokenChange?.(next);
+    },
+    [controlled, onTokenChange]
+  );
+  const refresh = useCallback(async () => {
+    if (!token) {
+      setSession(null);
+      setLoading(false);
+      return;
+    }
+    try {
+      setSession(await client.auth.session(token));
+    } catch {
+      setSession(null);
+      setToken(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, token, setToken]);
+  useEffect(() => {
+    setLoading(true);
+    void refresh();
+  }, [refresh]);
+  const signOut = useCallback(async () => {
+    if (token) {
+      await client.auth.signOut(token).catch(() => {
+      });
+    }
+    setToken(null);
+    setSession(null);
+  }, [client, token, setToken]);
+  const value = useMemo(
+    () => ({ client, branding, token, setToken, session, loading, refresh, signOut }),
+    [client, branding, token, setToken, session, loading, refresh, signOut]
+  );
+  return /* @__PURE__ */ jsx(Base316Context.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: className ? `b316-root ${className}` : "b316-root",
+      style: appearanceToStyle({
+        // Whatever was set in the sign-in designer arrives here, so a
+        // customer styles their login once on Base316 and the embedded
+        // components follow — rather than configuring the same colours
+        // twice and watching them drift apart.
+        //
+        // An explicit `appearance` still wins, because a host that has
+        // gone to the trouble of passing tokens means them.
+        ...branding ? {
+          colorPrimary: branding.primaryColor,
+          colorBackground: branding.backgroundColor
+        } : {},
+        ...appearance
+      }),
+      children
+    }
+  ) });
+}
+function useBase316() {
+  const value = useContext(Base316Context);
+  if (!value) {
+    throw new Error("Base316 components must be rendered inside <Base316Provider>.");
+  }
+  return value;
+}
+function useSession() {
+  const { session, loading } = useBase316();
+  return { session, loading };
+}
+
+// src/Branding.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Branding({
+  showTagline = true,
+  className,
+  style
+}) {
+  const { branding } = useBase316();
+  if (!branding) {
+    return null;
+  }
+  const showLogo = branding.logoUrl && branding.brandDisplay !== "NAME";
+  const showName = branding.brandDisplay !== "LOGO" || !branding.logoUrl;
+  return /* @__PURE__ */ jsxs("div", { className: cls("b316-branding", className), style, children: [
+    showLogo ? /* @__PURE__ */ jsx2("img", { className: "b316-branding-logo", src: branding.logoUrl, alt: branding.brandName }) : null,
+    showName ? /* @__PURE__ */ jsx2("div", { className: "b316-branding-name", children: branding.brandName }) : null,
+    showTagline && branding.tagline ? /* @__PURE__ */ jsx2("div", { className: "b316-branding-tagline", children: branding.tagline }) : null
+  ] });
+}
+
+// src/Invoices.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function money(amount, currency) {
+  const value = Number(amount);
+  if (!Number.isFinite(value)) {
+    return `${amount} ${currency}`;
+  }
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(value);
+  } catch {
+    return `${value} ${currency}`;
+  }
+}
+function day(value) {
+  return value ? new Date(value).toLocaleDateString() : "\u2014";
+}
+function Invoices({ className, style }) {
+  const { client, token, loading: sessionLoading } = useBase316();
+  const [invoices, setInvoices] = useState2(null);
+  const [open, setOpen] = useState2(null);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    if (!token) {
+      setInvoices([]);
+      return;
+    }
+    let cancelled = false;
+    client.billing.invoices(token).then((result) => {
+      if (!cancelled) setInvoices(result.data);
+    }).catch((cause) => {
+      console.error("[base316] could not load invoices", cause);
+      if (!cancelled) setError("Could not load your invoices.");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token]);
+  const view = useCallback2(
+    async (id) => {
+      if (!token) return;
+      try {
+        setOpen(await client.billing.invoice(token, id));
+      } catch (cause) {
+        console.error("[base316] could not load the invoice", cause);
+        setError("Could not open that invoice.");
+      }
+    },
+    [client, token]
+  );
+  if (sessionLoading || invoices === null) {
+    return /* @__PURE__ */ jsx3("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  if (!token) {
+    return /* @__PURE__ */ jsx3("div", { className: cls("b316-card", className), style, children: "Sign in to see your invoices." });
+  }
+  if (invoices.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className: cls("b316-card", className), style, children: "No invoices yet." });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: cls("b316-card b316-invoices", className), style, children: [
+    error ? /* @__PURE__ */ jsx3("div", { className: "b316-error", children: error }) : null,
+    /* @__PURE__ */ jsxs2("table", { className: "b316-invoice-table", children: [
+      /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx3("th", { children: "Invoice" }),
+        /* @__PURE__ */ jsx3("th", { children: "Period" }),
+        /* @__PURE__ */ jsx3("th", { children: "Status" }),
+        /* @__PURE__ */ jsx3("th", { className: "b316-num", children: "Total" }),
+        /* @__PURE__ */ jsx3("th", {})
+      ] }) }),
+      /* @__PURE__ */ jsx3("tbody", { children: invoices.map((invoice) => /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx3("td", { children: invoice.number }),
+        /* @__PURE__ */ jsxs2("td", { className: "b316-muted", children: [
+          day(invoice.periodStart),
+          " \u2013 ",
+          day(invoice.periodEnd)
+        ] }),
+        /* @__PURE__ */ jsx3("td", { className: "b316-muted", children: invoice.status.toLowerCase() }),
+        /* @__PURE__ */ jsx3("td", { className: "b316-num", children: money(invoice.total, invoice.currency) }),
+        /* @__PURE__ */ jsx3("td", { children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "b316-button b316-button-link",
+            onClick: () => void view(invoice.id),
+            children: "View"
+          }
+        ) })
+      ] }, invoice.id)) })
+    ] }),
+    open ? /* @__PURE__ */ jsx3(InvoiceView, { invoice: open, onClose: () => setOpen(null) }) : null
+  ] });
+}
+function InvoiceView({ invoice, onClose }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "b316-invoice-view", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "b316-invoice-actions", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onClose, children: "Close" }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          onClick: () => window.print(),
+          children: "Download PDF"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "b316-invoice-doc", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "b316-row", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3("div", { className: "b316-plan-name", children: invoice.issuer.brandName }),
+          invoice.issuer.supportEmail ? /* @__PURE__ */ jsx3("div", { className: "b316-muted", children: invoice.issuer.supportEmail }) : null
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: { textAlign: "right" }, children: [
+          /* @__PURE__ */ jsx3("div", { className: "b316-plan-name", children: invoice.number }),
+          /* @__PURE__ */ jsx3("div", { className: "b316-muted", children: invoice.status.toLowerCase() })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "b316-invoice-meta", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3("div", { className: "b316-label", children: "Billed to" }),
+          /* @__PURE__ */ jsx3("div", { children: invoice.customer.name ?? invoice.customer.email ?? "\u2014" }),
+          invoice.customer.name && invoice.customer.email ? /* @__PURE__ */ jsx3("div", { className: "b316-muted", children: invoice.customer.email }) : null
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3("div", { className: "b316-label", children: "Period" }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            day(invoice.periodStart),
+            " \u2013 ",
+            day(invoice.periodEnd)
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "b316-muted", children: [
+            "Issued ",
+            day(invoice.issuedAt)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("table", { className: "b316-invoice-table", children: [
+        /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx3("th", { children: "Description" }),
+          /* @__PURE__ */ jsx3("th", { className: "b316-num", children: "Qty" }),
+          /* @__PURE__ */ jsx3("th", { className: "b316-num", children: "Unit" }),
+          /* @__PURE__ */ jsx3("th", { className: "b316-num", children: "Amount" })
+        ] }) }),
+        /* @__PURE__ */ jsx3("tbody", { children: invoice.lineItems.map((line) => /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx3("td", { children: line.description }),
+          /* @__PURE__ */ jsxs2("td", { className: "b316-num b316-muted", children: [
+            line.billable,
+            line.unit ? ` ${line.unit}` : ""
+          ] }),
+          /* @__PURE__ */ jsx3("td", { className: "b316-num b316-muted", children: line.unitAmount === null ? "\u2014" : money(line.unitAmount, invoice.currency) }),
+          /* @__PURE__ */ jsx3("td", { className: "b316-num", children: money(line.amount, invoice.currency) })
+        ] }, line.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "b316-invoice-totals", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsx3("span", { className: "b316-muted", children: "Subtotal" }),
+          /* @__PURE__ */ jsx3("span", { className: "b316-num", children: money(invoice.subtotal, invoice.currency) })
+        ] }),
+        Number(invoice.discountTotal) > 0 ? /* @__PURE__ */ jsxs2("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsx3("span", { className: "b316-muted", children: "Discount" }),
+          /* @__PURE__ */ jsxs2("span", { className: "b316-num", children: [
+            "\u2212",
+            money(invoice.discountTotal, invoice.currency)
+          ] })
+        ] }) : null,
+        Number(invoice.taxTotal) > 0 ? /* @__PURE__ */ jsxs2("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsx3("span", { className: "b316-muted", children: "Tax" }),
+          /* @__PURE__ */ jsx3("span", { className: "b316-num", children: money(invoice.taxTotal, invoice.currency) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs2("div", { className: "b316-row b316-invoice-total", children: [
+          /* @__PURE__ */ jsx3("span", { children: "Total" }),
+          /* @__PURE__ */ jsx3("span", { className: "b316-num", children: money(invoice.total, invoice.currency) })
+        ] }),
+        Number(invoice.amountPaid) > 0 ? /* @__PURE__ */ jsxs2("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsx3("span", { className: "b316-muted", children: "Paid" }),
+          /* @__PURE__ */ jsx3("span", { className: "b316-num", children: money(invoice.amountPaid, invoice.currency) })
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+
+// src/SignIn.tsx
+import {
+  isPasskeyAutofillAvailable,
+  isPasskeySupported,
+  needsSecondFactor
+} from "@base316/sdk";
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SignIn({
+  onSignedIn,
+  passkeys = true,
+  className,
+  style
+}) {
+  const { client, setToken } = useBase316();
+  const [email, setEmail] = useState3("");
+  const [password, setPassword] = useState3("");
+  const [code, setCode] = useState3("");
+  const [pendingUserId, setPendingUserId] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [busy, setBusy] = useState3(false);
+  const [passkeyReady, setPasskeyReady] = useState3(false);
+  const abortRef = useRef(null);
+  const signInWithPasskey = async (conditional, signal) => {
+    if (!conditional) {
+      setBusy(true);
+      setError(null);
+    }
+    try {
+      const result = await client.auth.passkeys.signIn({ conditional, signal });
+      setToken(result.token);
+      onSignedIn?.();
+    } catch (cause) {
+      if (cause instanceof DOMException && (cause.name === "NotAllowedError" || cause.name === "AbortError")) {
+        return;
+      }
+      if (!conditional) {
+        console.error("[base316] passkey sign-in failed", cause);
+        setError("That passkey did not work.");
+      }
+    } finally {
+      if (!conditional) {
+        setBusy(false);
+      }
+    }
+  };
+  useEffect3(() => {
+    if (!passkeys || !isPasskeySupported() || pendingUserId) {
+      return;
+    }
+    setPasskeyReady(true);
+    const controller = new AbortController();
+    abortRef.current = controller;
+    void isPasskeyAutofillAvailable().then((available) => {
+      if (available && !controller.signal.aborted) {
+        void signInWithPasskey(true, controller.signal);
+      }
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [passkeys, pendingUserId]);
+  async function submit(event) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      if (pendingUserId) {
+        const verified = await client.auth.verifyMfa({ userId: pendingUserId, code });
+        setToken(verified.token);
+        onSignedIn?.();
+        return;
+      }
+      const result = await client.auth.signIn({ email, password });
+      if (needsSecondFactor(result)) {
+        setPendingUserId(result.userId);
+        return;
+      }
+      setToken(result.token);
+      onSignedIn?.();
+    } catch (cause) {
+      console.error("[base316] sign-in failed", cause);
+      setError(
+        pendingUserId ? "That code was not accepted." : "That email and password did not match."
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx4("div", { className: "b316-error", children: error }) : null,
+    pendingUserId ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-code", children: "Authentication code" }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "b316-code",
+          className: "b316-input",
+          value: code,
+          onChange: (event) => setCode(event.target.value),
+          autoComplete: "one-time-code",
+          inputMode: "numeric",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: "From your authenticator app, or one of your recovery codes." })
+    ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-email", children: "Email" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            id: "b316-email",
+            className: "b316-input",
+            type: "email",
+            value: email,
+            onChange: (event) => setEmail(event.target.value),
+            autoComplete: passkeyReady ? "email webauthn" : "email",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-password", children: "Password" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            id: "b316-password",
+            className: "b316-input",
+            type: "password",
+            value: password,
+            onChange: (event) => setPassword(event.target.value),
+            autoComplete: "current-password",
+            required: true
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingUserId ? "Verify" : "Sign in" }),
+    passkeyReady && !pendingUserId ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx4("div", { className: "b316-muted", style: { textAlign: "center", margin: "10px 0" }, children: "or" }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          disabled: busy,
+          onClick: () => {
+            abortRef.current?.abort();
+            void signInWithPasskey(false);
+          },
+          children: "Sign in with a passkey"
+        }
+      )
+    ] }) : null
+  ] });
+}
+
+// src/SignUp.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function SignUp({
+  onSignedUp,
+  className,
+  style
+}) {
+  const { client, setToken } = useBase316();
+  const [name, setName] = useState4("");
+  const [email, setEmail] = useState4("");
+  const [password, setPassword] = useState4("");
+  const [error, setError] = useState4(null);
+  const [busy, setBusy] = useState4(false);
+  async function submit(event) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.signUp({ email, password, name: name || void 0 });
+      const signedIn = await client.auth.signIn({ email, password });
+      if ("token" in signedIn && signedIn.token) {
+        setToken(signedIn.token);
+      }
+      onSignedUp?.();
+    } catch (cause) {
+      console.error("[base316] sign-up failed", cause);
+      setError("We could not create that account. The email may already be registered.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs4("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx5("div", { className: "b316-error", children: error }) : null,
+    /* @__PURE__ */ jsxs4("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "b316-label", htmlFor: "b316-name", children: "Name" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          id: "b316-name",
+          className: "b316-input",
+          value: name,
+          onChange: (event) => setName(event.target.value),
+          autoComplete: "name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "b316-label", htmlFor: "b316-signup-email", children: "Email" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          id: "b316-signup-email",
+          className: "b316-input",
+          type: "email",
+          value: email,
+          onChange: (event) => setEmail(event.target.value),
+          autoComplete: "email",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "b316-label", htmlFor: "b316-signup-password", children: "Password" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          id: "b316-signup-password",
+          className: "b316-input",
+          type: "password",
+          value: password,
+          onChange: (event) => setPassword(event.target.value),
+          autoComplete: "new-password",
+          minLength: 8,
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx5("span", { className: "b316-muted", children: "At least 8 characters." })
+    ] }),
+    /* @__PURE__ */ jsx5("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Creating\u2026" : "Create account" })
+  ] });
+}
+
+// src/UserProfile.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function UserProfile({ className, style }) {
+  const { session, loading, signOut } = useBase316();
+  if (loading) {
+    return /* @__PURE__ */ jsx6("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  if (!session) {
+    return /* @__PURE__ */ jsx6("div", { className: cls("b316-card", className), style, children: "Not signed in." });
+  }
+  const user = session.user ?? {};
+  return /* @__PURE__ */ jsx6("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs5("div", { className: "b316-row", children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx6("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
+      user.name && user.email ? /* @__PURE__ */ jsx6("div", { className: "b316-muted", children: user.email }) : null,
+      user.emailVerified === false ? /* @__PURE__ */ jsx6("div", { className: "b316-muted", children: "Email not verified" }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "b316-button b316-button-secondary",
+        onClick: () => void signOut(),
+        children: "Sign out"
+      }
+    )
+  ] }) });
+}
+
+// src/PasskeyManager.tsx
+import { isPasskeySupported as isPasskeySupported2 } from "@base316/sdk";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function PasskeyManager({
+  className,
+  style,
+  title = "Passkeys"
+}) {
+  const { client, token, session } = useBase316();
+  const [passkeys, setPasskeys] = useState5(null);
+  const [busy, setBusy] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [name, setName] = useState5("");
+  const [supported, setSupported] = useState5(false);
+  const load = useCallback3(async () => {
+    if (!token) {
+      return;
+    }
+    try {
+      const result = await client.auth.passkeys.list(token);
+      setPasskeys(result.data);
+    } catch {
+      setPasskeys([]);
+    }
+  }, [client, token]);
+  useEffect4(() => {
+    if (!isPasskeySupported2()) {
+      return;
+    }
+    setSupported(true);
+    void load();
+  }, [load]);
+  if (!session || !token || !supported) {
+    return null;
+  }
+  const add = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.passkeys.register(token, { name: name.trim() || void 0 });
+      setName("");
+      await load();
+    } catch (caught) {
+      if (caught instanceof DOMException && caught.name === "NotAllowedError") {
+        setError(null);
+      } else {
+        setError(caught instanceof Error ? caught.message : "That did not work.");
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+  const remove = async (id) => {
+    setError(null);
+    try {
+      await client.auth.passkeys.remove(token, id);
+      await load();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "That did not work.");
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: cls("b316-card", className), style, children: [
+    /* @__PURE__ */ jsx7("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ jsx7("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
+    passkeys === null ? /* @__PURE__ */ jsx7("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx7("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs6("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ jsxs6("div", { className: "b316-muted", children: [
+          passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
+          passkey.backedUp ? "" : " \xB7 this device only"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          onClick: () => void remove(passkey.id),
+          children: "Remove"
+        }
+      )
+    ] }, passkey.id)) }),
+    error ? /* @__PURE__ */ jsx7("div", { className: "b316-error", style: { marginTop: 12 }, children: error }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          className: "b316-input",
+          placeholder: "Name this passkey (optional)",
+          value: name,
+          onChange: (event) => setName(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "b316-button",
+          disabled: busy,
+          onClick: () => void add(),
+          children: busy ? "Waiting\u2026" : "Add a passkey"
+        }
+      )
+    ] })
+  ] });
+}
+function formatDate(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString();
+}
+
+// src/PricingTable.tsx
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function formatAmount(amount, currency) {
+  if (amount === null) return "Free";
+  const value = Number(amount);
+  if (!Number.isFinite(value)) return "Free";
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(value);
+  } catch {
+    return `${value} ${currency}`;
+  }
+}
+function cadence(plan, amount) {
+  if (amount === null) {
+    return "\xA0";
+  }
+  const unit = plan.interval.toLowerCase();
+  return plan.intervalCount === 1 ? `per ${unit}` : `every ${plan.intervalCount} ${unit}s`;
+}
+function PricingTable({
+  onSelectPlan,
+  currentPlanVersionId,
+  featuredPlanKey,
+  className,
+  style
+}) {
+  const { client } = useBase316();
+  const [plans, setPlans] = useState6(null);
+  const [error, setError] = useState6(false);
+  const [busy, setBusy] = useState6(null);
+  useEffect5(() => {
+    let cancelled = false;
+    client.billing.plans().then((result) => {
+      if (!cancelled) setPlans(result.data);
+    }).catch((cause) => {
+      console.error("[base316] could not load plans", cause);
+      if (!cancelled) setError(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+  if (error) {
+    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+  }
+  if (!plans) {
+    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+  }
+  if (plans.length === 0) {
+    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+  }
+  const anyTrial = plans.some((plan) => Boolean(plan.trialDays));
+  const anyDescription = plans.some((plan) => Boolean(plan.description));
+  const anyFeatured = plans.some((plan) => plan.key === featuredPlanKey);
+  return /* @__PURE__ */ jsx8("div", { className: cls("b316-plans", className), style, children: plans.map((plan) => {
+    const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
+    const current = currentPlanVersionId === plan.planVersionId;
+    const featured = featuredPlanKey === plan.key;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
+        children: [
+          /* @__PURE__ */ jsxs7("div", { className: "b316-plan-head", children: [
+            anyFeatured ? /* @__PURE__ */ jsx8("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+            /* @__PURE__ */ jsx8("div", { className: "b316-plan-name", children: plan.name }),
+            anyDescription ? /* @__PURE__ */ jsx8("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "b316-plan-pricing", children: [
+            /* @__PURE__ */ jsx8("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+            /* @__PURE__ */ jsx8("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+            anyTrial ? /* @__PURE__ */ jsx8("div", { className: "b316-plan-trial", children: plan.trialDays ? `${plan.trialDays}-day free trial` : "\xA0" }) : null
+          ] }),
+          /* @__PURE__ */ jsx8("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs7("li", { className: "b316-plan-feature", children: [
+            /* @__PURE__ */ jsx8("span", { children: entitlement.featureName }),
+            /* @__PURE__ */ jsx8("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : entitlement.limit })
+          ] }, entitlement.featureId)) }),
+          /* @__PURE__ */ jsx8("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: current ? "b316-button b316-button-current" : "b316-button",
+              disabled: current || busy !== null,
+              onClick: async () => {
+                setBusy(plan.planVersionId);
+                try {
+                  await onSelectPlan(plan.planVersionId, plan);
+                } finally {
+                  setBusy(null);
+                }
+              },
+              children: current ? "Current plan" : busy === plan.planVersionId ? "Working\u2026" : "Choose"
+            }
+          ) })
+        ]
+      },
+      plan.id
+    );
+  }) });
+}
+
+// src/SubscriptionManager.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function statusLabel(status) {
+  const words = status.toLowerCase().split("_");
+  return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
+}
+function SubscriptionManager({
+  className,
+  style
+}) {
+  const { client, token, loading: sessionLoading } = useBase316();
+  const [subscription, setSubscription] = useState7(null);
+  const [loading, setLoading] = useState7(true);
+  const [busy, setBusy] = useState7(false);
+  const [error, setError] = useState7(null);
+  const load = useCallback4(async () => {
+    if (!token) {
+      setSubscription(null);
+      setLoading(false);
+      return;
+    }
+    try {
+      const result = await client.billing.subscription(token);
+      setSubscription(result.subscription);
+    } catch (cause) {
+      console.error("[base316] could not load the subscription", cause);
+      setError("Could not load your subscription.");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, token]);
+  useEffect6(() => {
+    void load();
+  }, [load]);
+  if (sessionLoading || loading) {
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  if (!token) {
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+  }
+  if (!subscription) {
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+  }
+  const renews = new Date(subscription.currentPeriodEnd).toLocaleDateString();
+  return /* @__PURE__ */ jsxs8("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx9("div", { className: "b316-error", children: error }) : null,
+    /* @__PURE__ */ jsx9("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ jsxs8("div", { className: "b316-muted", children: [
+      statusLabel(subscription.status),
+      " \xB7 ",
+      subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
+    ] }),
+    subscription.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs8("p", { className: "b316-muted", children: [
+      "This subscription will not renew. You keep access until ",
+      renews,
+      "."
+    ] }) : /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: "b316-button b316-button-secondary",
+        style: { marginTop: 14 },
+        disabled: busy,
+        onClick: async () => {
+          setBusy(true);
+          setError(null);
+          try {
+            await client.billing.cancel(token);
+            await load();
+          } catch (cause) {
+            console.error("[base316] cancel failed", cause);
+            setError("Could not cancel. Try again.");
+          } finally {
+            setBusy(false);
+          }
+        },
+        children: busy ? "Working\u2026" : "Cancel subscription"
+      }
+    )
+  ] });
+}
+export {
+  Base316Provider,
+  Branding,
+  Invoices,
+  PasskeyManager,
+  PricingTable,
+  SignIn,
+  SignUp,
+  SubscriptionManager,
+  UserProfile,
+  useBase316,
+  useSession
+};
+//# sourceMappingURL=index.js.map