@mmailaender/convex-creem 0.1.0

package/dist/react/widgets/types.d.ts

@@ -0,0 +1,171 @@
+import type { FunctionReference } from "convex/server";
+import type { BillingSnapshot, RecurringCycle } from "../../core/types.js";
+export type { CheckoutIntent } from "../../core/types.js";
+/**
+ * UI-side permission flags for billing widgets.
+ * Controls which buttons are enabled/visible. This is **cosmetic gating only** —
+ * enforce real permissions server-side in your Convex functions.
+ *
+ * When a permission is `false`, the corresponding button renders as disabled.
+ * When omitted or `undefined`, all actions default to enabled.
+ */
+export type BillingPermissions = {
+    /** Allow creating new checkouts (subscribe / buy buttons). */
+    canCheckout?: boolean;
+    /** Allow switching plans or billing intervals. */
+    canChangeSubscription?: boolean;
+    /** Allow cancelling the active subscription. */
+    canCancelSubscription?: boolean;
+    /** Allow resuming a paused or scheduled-cancel subscription. */
+    canResumeSubscription?: boolean;
+    /** Allow changing the seat count on seat-based plans. */
+    canUpdateSeats?: boolean;
+    /** Allow opening the Creem customer billing portal. */
+    canAccessPortal?: boolean;
+};
+/**
+ * Backend function references for connected billing widgets.
+ * Created once in your layout/page and passed to `<Subscription.Root>`, `<Product.Root>`, and `<BillingPortal>`.
+ *
+ * All references point to Convex functions generated by `creem.api({ resolve })`
+ * or your own custom wrappers.
+ *
+ * @example
+ * ```ts
+ * const billingApi: ConnectedBillingApi = {
+ *   uiModel: api.billing.uiModel,
+ *   checkouts: { create: api.billing.checkoutsCreate },
+ *   subscriptions: {
+ *     update: api.billing.subscriptionsUpdate,
+ *     cancel: api.billing.subscriptionsCancel,
+ *     resume: api.billing.subscriptionsResume,
+ *   },
+ *   customers: { portalUrl: api.billing.customersPortalUrl },
+ * };
+ * ```
+ */
+export type ConnectedBillingApi = {
+    /** Query that returns the `ConnectedBillingModel` — called by all widgets to load billing state. */
+    uiModel: FunctionReference<"query">;
+    /** Checkout actions. */
+    checkouts: {
+        /** Create a checkout session and return `{ url }`. */
+        create: FunctionReference<"action">;
+    };
+    /** Subscription mutation references. All optional — omit to hide the corresponding UI controls. */
+    subscriptions?: {
+        /** Plan switch or seat update mutation. */
+        update?: FunctionReference<"mutation">;
+        /** Cancel subscription mutation. */
+        cancel?: FunctionReference<"mutation">;
+        /** Resume paused/scheduled-cancel subscription mutation. */
+        resume?: FunctionReference<"mutation">;
+    };
+    /** Customer actions. */
+    customers?: {
+        /** Action that returns `{ url }` for the Creem billing portal. */
+        portalUrl?: FunctionReference<"action">;
+    };
+};
+/** Product data as returned by the billing model query. Mirrors the Convex DB product schema. */
+export type ConnectedProduct = {
+    id: string;
+    name?: string;
+    description?: string;
+    price?: number;
+    currency?: string;
+    billingType?: string;
+    billingPeriod?: string;
+    status?: string;
+    taxMode?: string;
+    taxCategory?: string;
+    imageUrl?: string;
+    features?: Array<{
+        id: string;
+        description: string;
+    }>;
+};
+/**
+ * Complete billing state returned by the `uiModel` query.
+ * Consumed internally by all connected widgets — you typically don't need to access this directly.
+ */
+export type ConnectedBillingModel = {
+    /** Authenticated user info, or `null` when unauthenticated (public pricing page). */
+    user: {
+        _id: string;
+        email: string;
+        isFree?: boolean;
+        isTrialing?: boolean;
+        trialEnd?: string | null;
+    } | null;
+    /** Resolved billing state (plan, status, available actions). `null` when unauthenticated. */
+    billingSnapshot: BillingSnapshot | null;
+    /** All synced products from the Creem dashboard. */
+    allProducts: ConnectedProduct[];
+    /** Product IDs the entity has purchased (one-time orders). */
+    ownedProductIds: string[];
+    /** Product ID of the current subscription, or `null`. */
+    subscriptionProductId: string | null;
+    /** All active subscriptions with full details. */
+    activeSubscriptions?: Array<{
+        id: string;
+        productId: string;
+        status: string;
+        cancelAtPeriodEnd: boolean;
+        currentPeriodEnd: string | null;
+        currentPeriodStart: string;
+        seats: number | null;
+        recurringInterval: string | null;
+        trialEnd?: string | null;
+    }>;
+    /** Whether this entity has a Creem customer record (needed for billing portal). */
+    hasCreemCustomer?: boolean;
+    /** Reserved for future billing policy data. */
+    policy?: unknown;
+};
+/**
+ * Plan type for `<Subscription.Item>`.
+ * - `"free"` — free tier, no checkout
+ * - `"single"` — standard paid plan (flat pricing)
+ * - `"seat-based"` — per-seat pricing with optional seat picker
+ * - `"enterprise"` — "Contact sales" CTA, no checkout
+ */
+export type SubscriptionPlanType = "free" | "single" | "seat-based" | "enterprise";
+export type SubscriptionPlanRegistration = {
+    planId: string;
+    type: SubscriptionPlanType;
+    title?: string;
+    description?: string;
+    contactUrl?: string;
+    recommended?: boolean;
+    productIds?: Partial<Record<RecurringCycle, string>>;
+};
+/**
+ * Product type for `<Product.Item>`.
+ * - `"one-time"` — purchased once, shows "Owned" badge after purchase
+ * - `"recurring"` — can be purchased multiple times (consumable), no "Owned" badge
+ */
+export type ProductType = "one-time" | "recurring";
+/**
+ * Upgrade path rule for `<Product.Root transition={[...]}>`.
+ * - `"direct"` — checkout uses the target product directly
+ * - `"via_product"` — checkout uses a dedicated upgrade product (delta pricing)
+ */
+export type Transition = {
+    from: string;
+    to: string;
+    kind: "direct";
+} | {
+    from: string;
+    to: string;
+    kind: "via_product";
+    /** Creem product ID for the upgrade (e.g. a delta-priced "Basic → Premium" product). */
+    viaProductId: string;
+};
+export type ProductItemRegistration = {
+    productId: string;
+    type: ProductType;
+    title?: string;
+    description?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/react/widgets/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react/widgets/types.ts"],"names":[],"mappings":"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"}

package/dist/react/widgets/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/react/widgets/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/react/widgets/types.ts"],"names":[],"mappings":""}

package/dist/svelte/index.d.ts

@@ -0,0 +1,22 @@
+export { parseCheckoutSuccessParams, hasCheckoutSuccessParams, } from "../core/payments.js";
+export { pendingCheckout } from "../core/pendingCheckout.js";
+export { default as BillingToggle } from "./primitives/BillingToggle.svelte";
+export { default as SegmentGroup } from "./primitives/SegmentGroup.svelte";
+export { default as SegmentControl } from "./primitives/SegmentControl.svelte";
+export { default as NumberInput } from "./primitives/NumberInput.svelte";
+export { default as CheckoutButton } from "./primitives/CheckoutButton.svelte";
+export { default as CustomerPortalButton } from "./primitives/CustomerPortalButton.svelte";
+export { default as PricingCard } from "./primitives/PricingCard.svelte";
+export { default as PricingSection } from "./primitives/PricingSection.svelte";
+export { default as BillingGate } from "./primitives/BillingGate.svelte";
+export { default as ScheduledChangeBanner } from "./primitives/ScheduledChangeBanner.svelte";
+export { default as PaymentWarningBanner } from "./primitives/PaymentWarningBanner.svelte";
+export { default as TrialLimitBanner } from "./primitives/TrialLimitBanner.svelte";
+export { default as OneTimeCheckoutButton } from "./primitives/OneTimeCheckoutButton.svelte";
+export { default as OneTimePaymentStatusBadge } from "./primitives/OneTimePaymentStatusBadge.svelte";
+export { default as CheckoutSuccessSummary } from "./primitives/CheckoutSuccessSummary.svelte";
+export { Subscription, Product, BillingPortal } from "./widgets/index.js";
+export type { BillingSnapshot, CheckoutSuccessParams, OneTimePaymentStatus, RecurringCycle, } from "../core/types.js";
+export { hasBillingAction, isEnterpriseBilling, isOneTimeBilling, isTerminalPaymentStatus, shouldShowBillingCycleToggle, } from "../core/selectors.js";
+export type { BillingPermissions, CheckoutIntent, ConnectedBillingApi, ConnectedBillingModel, ProductType, SubscriptionPlanType, Transition, } from "./widgets/types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,+CAA+C,CAAC;AACrG,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,uBAAuB,EACvB,4BAA4B,GAC7B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,oBAAoB,EACpB,UAAU,GACX,MAAM,oBAAoB,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,20 @@
+export { parseCheckoutSuccessParams, hasCheckoutSuccessParams, } from "../core/payments.js";
+export { pendingCheckout } from "../core/pendingCheckout.js";
+export { default as BillingToggle } from "./primitives/BillingToggle.svelte";
+export { default as SegmentGroup } from "./primitives/SegmentGroup.svelte";
+export { default as SegmentControl } from "./primitives/SegmentControl.svelte";
+export { default as NumberInput } from "./primitives/NumberInput.svelte";
+export { default as CheckoutButton } from "./primitives/CheckoutButton.svelte";
+export { default as CustomerPortalButton } from "./primitives/CustomerPortalButton.svelte";
+export { default as PricingCard } from "./primitives/PricingCard.svelte";
+export { default as PricingSection } from "./primitives/PricingSection.svelte";
+export { default as BillingGate } from "./primitives/BillingGate.svelte";
+export { default as ScheduledChangeBanner } from "./primitives/ScheduledChangeBanner.svelte";
+export { default as PaymentWarningBanner } from "./primitives/PaymentWarningBanner.svelte";
+export { default as TrialLimitBanner } from "./primitives/TrialLimitBanner.svelte";
+export { default as OneTimeCheckoutButton } from "./primitives/OneTimeCheckoutButton.svelte";
+export { default as OneTimePaymentStatusBadge } from "./primitives/OneTimePaymentStatusBadge.svelte";
+export { default as CheckoutSuccessSummary } from "./primitives/CheckoutSuccessSummary.svelte";
+export { Subscription, Product, BillingPortal } from "./widgets/index.js";
+export { hasBillingAction, isEnterpriseBilling, isOneTimeBilling, isTerminalPaymentStatus, shouldShowBillingCycleToggle, } from "../core/selectors.js";
+//# sourceMappingURL=index.js.map

package/dist/svelte/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,+CAA+C,CAAC;AACrG,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAO1E,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,uBAAuB,EACvB,4BAA4B,GAC7B,MAAM,sBAAsB,CAAC"}

package/dist/svelte/primitives/BillingGate.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  /* global $props, $derived */
+  import type { Snippet } from "svelte";
+  import type { AvailableAction, BillingSnapshot } from "../../core/types.js";
+  import { hasBillingActionLocal } from "./shared.js";
+
+  interface Props {
+    snapshot?: BillingSnapshot | null;
+    requiredActions: AvailableAction | AvailableAction[];
+    children?: Snippet;
+    fallback?: Snippet;
+  }
+
+  let { snapshot, requiredActions, children, fallback }: Props = $props();
+
+  const actions = $derived(
+    Array.isArray(requiredActions) ? requiredActions : [requiredActions],
+  );
+  const canRender = $derived(
+    snapshot != null && actions.every((action) => hasBillingActionLocal(snapshot, action)),
+  );
+</script>
+
+{#if canRender}
+  {@render children?.()}
+{:else}
+  {@render fallback?.()}
+{/if}

package/dist/svelte/primitives/BillingToggle.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  /* global $props */
+  import type { RecurringCycle } from "../../core/types.js";
+  import { formatRecurringCycle } from "./shared.js";
+  import SegmentGroup from "./SegmentGroup.svelte";
+
+  interface Props {
+    cycles?: RecurringCycle[];
+    value?: RecurringCycle;
+    onValueChange?: (cycle: RecurringCycle) => void;
+    className?: string;
+  }
+
+  let { cycles = [], value, onValueChange, className = "" }: Props = $props();
+</script>
+
+{#if cycles.length > 1}
+  <SegmentGroup
+    items={cycles.map((cycle) => ({
+      value: cycle,
+      label: formatRecurringCycle(cycle),
+    }))}
+    value={value}
+    onValueChange={(segment) => onValueChange?.(segment as RecurringCycle)}
+    className={className}
+  />
+{/if}

package/dist/svelte/primitives/CheckoutButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /* global $props, $state */
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    productId: string;
+    href?: string;
+    disabled?: boolean;
+    className?: string;
+    onCheckout?: (payload: { productId: string }) => Promise<void> | void;
+    children?: Snippet;
+  }
+
+  let {
+    productId,
+    href = undefined,
+    disabled = false,
+    className = "",
+    onCheckout,
+    children,
+  }: Props = $props();
+
+  let isLoading = $state(false);
+
+  const handleClick = async () => {
+    if (disabled || isLoading || !onCheckout) return;
+    isLoading = true;
+    try {
+      await onCheckout({ productId });
+    } finally {
+      isLoading = false;
+    }
+  };
+</script>
+
+{#if onCheckout}
+  <button
+    type="button"
+    class={`button-filled disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
+    {disabled}
+    onclick={handleClick}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      {isLoading ? "Loading..." : "Checkout"}
+    {/if}
+  </button>
+{:else}
+  <a
+    href={href}
+    class={`button-filled ${className}`}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      Checkout
+    {/if}
+  </a>
+{/if}

package/dist/svelte/primitives/CheckoutSuccessSummary.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  /* global $props, $derived */
+  import {
+    hasCheckoutSuccessParams,
+    parseCheckoutSuccessParams,
+  } from "../../core/payments.js";
+  import type { CheckoutSuccessParams } from "../../core/types.js";
+
+  interface Props {
+    params?: CheckoutSuccessParams;
+    search?: string;
+    class?: string;
+  }
+
+  let { params = undefined, search = "", class: className = "" }: Props = $props();
+
+  const parsed = $derived(params ?? parseCheckoutSuccessParams(search));
+  const show = $derived(hasCheckoutSuccessParams(parsed));
+</script>
+
+{#if show}
+  <div
+    class={`rounded-lg border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200 ${className}`}
+  >
+    <p class="font-medium">Checkout completed successfully.</p>
+    <ul class="mt-2 space-y-1">
+      {#if parsed.checkoutId}<li>Checkout: {parsed.checkoutId}</li>{/if}
+      {#if parsed.orderId}<li>Order: {parsed.orderId}</li>{/if}
+      {#if parsed.customerId}<li>Customer: {parsed.customerId}</li>{/if}
+      {#if parsed.productId}<li>Product: {parsed.productId}</li>{/if}
+      {#if parsed.requestId}<li>Request: {parsed.requestId}</li>{/if}
+    </ul>
+  </div>
+{/if}

package/dist/svelte/primitives/CustomerPortalButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /* global $props, $state */
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    href?: string;
+    disabled?: boolean;
+    className?: string;
+    onOpenPortal?: () => Promise<void> | void;
+    children?: Snippet;
+  }
+
+  let {
+    href = undefined,
+    disabled = false,
+    className = "",
+    onOpenPortal,
+    children,
+  }: Props = $props();
+
+  let isLoading = $state(false);
+
+  const handleClick = async () => {
+    if (disabled || isLoading || !onOpenPortal) return;
+    isLoading = true;
+    try {
+      await onOpenPortal();
+    } finally {
+      isLoading = false;
+    }
+  };
+</script>
+
+{#if onOpenPortal}
+  <button
+    type="button"
+    class={`${className || "button-outline"} disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer`}
+    {disabled}
+    onclick={handleClick}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      {isLoading ? "Loading..." : "Manage billing"}
+    {/if}
+  </button>
+{:else}
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    class={`${className || "button-outline"}`}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      Manage billing
+    {/if}
+  </a>
+{/if}

package/dist/svelte/primitives/NumberInput.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    compact?: boolean;
+    disabled?: boolean;
+    className?: string;
+    onValueChange?: (value: number) => void | Promise<void>;
+  }
+
+  let {
+    value = 1,
+    min = Number.NEGATIVE_INFINITY,
+    max = Number.POSITIVE_INFINITY,
+    step = 1,
+    compact = false,
+    disabled = false,
+    className = "",
+    onValueChange,
+  }: Props = $props();
+
+  const clamp = (candidate: number) => Math.min(max, Math.max(min, candidate));
+
+  const setValue = (candidate: number) => {
+    const next = clamp(candidate);
+    onValueChange?.(next);
+  };
+
+  const decrement = () => setValue((value ?? 0) - step);
+  const increment = () => setValue((value ?? 0) + step);
+</script>
+
+<div class={`number-input ${className}`}>
+  <button
+    type="button"
+    aria-label="Decrease value"
+    {disabled}
+    class="icon-button-sm"
+    onclick={decrement}
+  >
+    <svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor" class="h-4 w-4 text-foreground-on-tonal">
+      <path d="M216,128a12,12,0,0,1-12,12H52a12,12,0,0,1,0-24H204A12,12,0,0,1,216,128Z" />
+    </svg>
+  </button>
+
+  <input
+    type="number"
+    class={`input-ghost ${compact ? "number-input-value-compact" : "number-input-value"} max-w-12 input-no-spinner`}
+    value={value}
+    {disabled}
+    oninput={(event) => {
+      const parsed = Number((event.currentTarget as HTMLInputElement).value);
+      if (!Number.isFinite(parsed)) return;
+      setValue(parsed);
+    }}
+  />
+
+  <button
+    type="button"
+    aria-label="Increase value"
+    {disabled}
+    class="icon-button-sm"
+    onclick={increment}
+  >
+    <svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor" class="h-4 w-4 text-foreground-on-tonal">
+      <path d="M216,128a12,12,0,0,1-12,12H140v64a12,12,0,0,1-24,0V140H52a12,12,0,0,1,0-24h64V52a12,12,0,0,1,24,0v64h64A12,12,0,0,1,216,128Z" />
+    </svg>
+  </button>
+</div>

package/dist/svelte/primitives/OneTimeCheckoutButton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  /* global $props */
+  import type { Snippet } from "svelte";
+  import CheckoutButton from "./CheckoutButton.svelte";
+
+  interface Props {
+    productId: string;
+    href?: string;
+    disabled?: boolean;
+    className?: string;
+    onCheckout?: (payload: { productId: string }) => Promise<void> | void;
+    children?: Snippet;
+  }
+
+  let {
+    productId,
+    href = undefined,
+    disabled = false,
+    className = "",
+    onCheckout,
+    children,
+  }: Props = $props();
+</script>
+
+<CheckoutButton
+  {productId}
+  {href}
+  {disabled}
+  {className}
+  {onCheckout}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    Buy now
+  {/if}
+</CheckoutButton>

package/dist/svelte/primitives/OneTimePaymentStatusBadge.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  /* global $props */
+  import type { OneTimePaymentStatus } from "../../core/types.js";
+
+  interface Props {
+    status: OneTimePaymentStatus;
+    className?: string;
+  }
+
+  let { status, className = "" }: Props = $props();
+
+  const labels: Record<OneTimePaymentStatus, string> = {
+    pending: "Pending",
+    paid: "Paid",
+    refunded: "Refunded",
+    partially_refunded: "Partially refunded",
+  };
+</script>
+
+<span class={className}>{labels[status]}</span>

package/dist/svelte/primitives/PaymentWarningBanner.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  /* global $props, $derived */
+  import type { BillingSnapshot, PaymentSnapshot } from "../../core/types.js";
+
+  interface Props {
+    snapshot?: BillingSnapshot | null;
+    payment?: PaymentSnapshot | null;
+    className?: string;
+  }
+
+  let { snapshot = null, payment = null, className = "" }: Props = $props();
+
+  const activePayment = $derived(payment ?? snapshot?.payment ?? null);
+  const show = $derived(activePayment != null && activePayment.status !== "paid");
+  const message = $derived(
+    activePayment?.status === "pending"
+      ? "Your payment is pending confirmation. Wait for webhook confirmation before granting permanent access."
+      : activePayment?.status === "partially_refunded"
+        ? "This payment was partially refunded. Review entitlements that depend on purchase amount."
+        : "This payment was refunded. Access should generally be revoked or downgraded.",
+  );
+</script>
+
+{#if show}
+  <div
+    class={`rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-900 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-200 ${className}`}
+  >
+    {message}
+  </div>
+{/if}