@convex-internal/web-analytics 1.1.1 → 2.0.1

package/README.md

@@ -1,20 +1,12 @@
 # @convex-internal/web-analytics
 
 Shared consent state, consent banner, and analytics setup for Convex websites.
-Wrap the app in `WebAnalyticsProvider`. It renders the consent banner. Wrap
-other tracking, such as GA or an ad pixel, in `Consented` so it loads only
-after consent is confirmed. Use `useConsent` when you need the consent status
-itself.
 
-## Usage
+## Core
 
-Install the package, then render `WebAnalyticsProvider` at the root of the
-app. It is a client component. `useConsent` throws if called outside that
-provider.
-
-The provider starts analytics in production, except on localhost, syncs
-consent to PostHog, and shows the consent banner when the visitor has not
-chosen yet.
+Mount a framework entry at the root ([React](#react) or [Svelte](#svelte)).
+Analytics start in production, except on localhost. Consent is synced to
+PostHog. The banner shows when the visitor has not chosen yet.
 
 PostHog already copies standard campaign params (UTMs, `gclid`, `rdt_cid`,
 `fbclid`, and other common click IDs) from the landing URL onto events. This
@@ -24,7 +16,8 @@ person profile. Campaign params still available at that point can be stored as
 
 ### `capture`
 
-Record an event from client code. The optional third argument is
+Record an event from client code through the framework-neutral root entry.
+The optional third argument is
 [PostHog's capture options](https://posthog.com/docs/libraries/js/usage).
 
 ```tsx
@@ -38,7 +31,7 @@ capture("www-login", undefined, {
 
 ### Consent banner
 
-The provider shows the banner when `consent` is `"undecided"`. It records
+The banner shows when `consent` is `"undecided"`. It records
 `cookie_consent_shown` when it appears and `cookie_consent_decided` with
 `{ decision: "accepted" | "declined" }` just before the choice is saved.
 
@@ -66,13 +59,45 @@ Theme with `--wa-banner-*` variables on `.wa-banner`:
 - Link and focus: `--wa-banner-link-color`, `--wa-banner-focus-color`
 - Buttons: `--wa-banner-button-border-radius`, `--wa-banner-button-padding`,
   `--wa-banner-button-min-height`, `--wa-banner-button-font-size`,
-  `--wa-banner-button-font-weight`, `--wa-banner-button-line-height`
+  `--wa-banner-button-font-weight`
 - Accept button: `--wa-banner-accept-background-color`, `--wa-banner-accept-text-color`
 - Decline button: `--wa-banner-decline-background-color`,
   `--wa-banner-decline-text-color`
 
 Buttons default to 80% opacity and go to 100% on hover or keyboard focus.
 
+### Cookie behavior
+
+Once the cookie has been read, `consent` is resolved in this order:
+
+1. **Global Privacy Control.** If `navigator.globalPrivacyControl === true`,
+   `consent` is `"declined"`. GPC is not stored: the cookie is not written or
+   changed. Turn GPC off and the stored cookie (if set) applies again.
+2. **Cookie.** `true` is `"consented"`, `false` is `"declined"`, and a missing
+   or unrecognized value is `"undecided"`.
+
+The cookie is stored with `path=/` and a max-age of one year. On `convex.dev`
+and `*.convex.dev` it is also set with `domain=.convex.dev` so the website,
+Docs, Stack, and other subdomains share one choice. The cookie is marked
+`Secure` everywhere except localhost.
+
+Changes made through `setConsent` update immediately. Changes made
+elsewhere, such as in another tab or DevTools, are synchronized through cookie
+change events when available, and when the window regains focus or its
+visibility changes as a fallback.
+
+## React
+
+Import from `@convex-internal/web-analytics/react`.
+`WebAnalyticsProvider` is a client component. `useConsent` throws if called
+outside that provider.
+
+```tsx
+import { WebAnalyticsProvider } from "@convex-internal/web-analytics/react";
+
+<WebAnalyticsProvider>{children}</WebAnalyticsProvider>;
+```
+
 ### `Consented`
 
 Renders children only when `consent` is `"consented"`. It renders nothing during
@@ -80,7 +105,7 @@ SSR, while consent is still `"unknown"` or `"undecided"`, if the visitor
 declined, or while Global Privacy Control is on.
 
 ```tsx
-import { Consented } from "@convex-internal/web-analytics";
+import { Consented } from "@convex-internal/web-analytics/react";
 
 <Consented>
   <YourAnalyticsScripts />
@@ -101,25 +126,20 @@ import { Consented } from "@convex-internal/web-analytics";
 Use the hook when you need `consent` or `setConsent` directly. Enable tracking
 only when `consent === "consented"`.
 
-### Cookie behavior
+## Svelte
 
-Once the cookie has been read, `consent` is resolved in this order:
-
-1. **Global Privacy Control.** If `navigator.globalPrivacyControl === true`,
-   `consent` is `"declined"`. GPC is not stored: the cookie is not written or
-   changed. Turn GPC off and the stored cookie (if set) applies again.
-2. **Cookie.** `true` is `"consented"`, `false` is `"declined"`, and a missing
-   or unrecognized value is `"undecided"`.
+The Svelte entry exports only `WebAnalytics`. Render it once in the root
+layout. It has no props and no snippet: it starts PostHog and shows the banner.
+There is no `Consented` wrapper or consent store. Those can be added later;
+nothing using the Svelte entry has needed them yet.
 
-The cookie is stored with `path=/` and a max-age of one year. On `convex.dev`
-and `*.convex.dev` it is also set with `domain=.convex.dev` so the website,
-Docs, Stack, and other subdomains share one choice. The cookie is marked
-`Secure` everywhere except localhost.
+```svelte
+<script>
+  import { WebAnalytics } from "@convex-internal/web-analytics/svelte";
+</script>
 
-Changes made through `setConsent` update immediately. Changes made
-elsewhere, such as in another tab or DevTools, are synchronized through cookie
-change events when available, and when the window regains focus or its
-visibility changes as a fallback.
+<WebAnalytics />
+```
 
 ## Test in-development changes
 

package/dist/banner.css

@@ -14,6 +14,7 @@
   color: var(--wa-banner-text-color, black);
   font-family: var(--wa-banner-font-family, inherit);
   font-size: var(--wa-banner-font-size, 1rem);
+  line-height: 1.25;
 
   .wa-banner-text {
     margin: 0 0 0.5rem;
@@ -44,7 +45,7 @@
     font-family: inherit;
     font-size: var(--wa-banner-button-font-size, inherit);
     font-weight: var(--wa-banner-button-font-weight, inherit);
-    line-height: var(--wa-banner-button-line-height, inherit);
+    line-height: 1;
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 0.15s;

package/dist/capture.js

@@ -1,4 +1,3 @@
-"use client";
 import { posthog } from "posthog-js";
 export function capture(event, properties, options) {
     posthog.capture(event, properties, options);

package/dist/consent.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `"unknown"` until the cookie has been read (SSR and first client render).
+ * `"undecided"` when it has been read and there is no recognized choice.
+ * `"consented"` when the cookie is `true` and Global Privacy Control is off.
+ * `"declined"` when the cookie is `false`, or while GPC is on.
+ */
+export type ConsentStatus = "unknown" | "undecided" | "consented" | "declined";
+export declare function resolveConsent(isReady: boolean, cookieValue: boolean | undefined, gpcOptOut: boolean): ConsentStatus;
+export declare const COOKIE_NAME = "allowsCookies";
+export declare function hasGPC(): boolean;

package/dist/consent.js

@@ -0,0 +1,22 @@
+// GPC wins over the stored cookie and does not write it, so turning GPC off
+// restores the saved choice (or the banner if there is none). A missing or
+// unrecognized cookie after the read defaults to `"undecided"`.
+export function resolveConsent(isReady, cookieValue, gpcOptOut) {
+    if (!isReady) {
+        return "unknown";
+    }
+    if (gpcOptOut) {
+        return "declined";
+    }
+    if (cookieValue === true) {
+        return "consented";
+    }
+    if (cookieValue === false) {
+        return "declined";
+    }
+    return "undecided";
+}
+export const COOKIE_NAME = "allowsCookies";
+export function hasGPC() {
+    return (typeof navigator !== "undefined" && navigator.globalPrivacyControl === true);
+}

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+export { capture, type CaptureOptions } from "../capture.js";
+export type { ConsentStatus } from "../consent.js";

package/dist/core/index.js

@@ -0,0 +1 @@
+export { capture } from "../capture.js";

package/dist/index.d.ts

@@ -1,4 +1,2 @@
-export { WebAnalyticsProvider, type WebAnalyticsProviderProps, type ConsentStatus, } from "./WebAnalyticsProvider.js";
-export { Consented, type ConsentedProps } from "./Consented.js";
-export { useConsent } from "./useConsent.js";
 export { capture, type CaptureOptions } from "./capture.js";
+export type { ConsentStatus } from "./consent.js";

package/dist/index.js

@@ -1,4 +1 @@
-export { WebAnalyticsProvider, } from "./WebAnalyticsProvider.js";
-export { Consented } from "./Consented.js";
-export { useConsent } from "./useConsent.js";
 export { capture } from "./capture.js";

package/dist/posthog.d.ts

@@ -0,0 +1,4 @@
+import type { ConsentStatus } from "./consent.js";
+export declare const POSTHOG_PUBLIC_PROJECT_TOKEN = "phc_JDNTRxeh2li2sQTRO0IcOYMJcp8fPs5nTK9TU751nQK";
+export declare function initPostHog(): void;
+export declare function syncPostHogConsent(consent: ConsentStatus): void;

package/dist/posthog.js

@@ -0,0 +1,56 @@
+import { posthog } from "posthog-js";
+// PostHog project token for event ingest and feature flags. `phc_` tokens are
+// public by design (browser JS, no env var) and cannot read private project data.
+// https://posthog.com/docs/privacy#is-it-ok-for-my-api-key-to-be-exposed-and-public
+export const POSTHOG_PUBLIC_PROJECT_TOKEN = "phc_JDNTRxeh2li2sQTRO0IcOYMJcp8fPs5nTK9TU751nQK";
+const POSTHOG_HOST = "https://ap.convex.dev";
+export function initPostHog() {
+    if (posthog.__loaded) {
+        return;
+    }
+    // Keep local/dev sessions out of production PostHog data.
+    if (process.env.NODE_ENV !== "production" ||
+        window.location.hostname === "localhost" ||
+        window.location.hostname === "127.0.0.1" ||
+        window.location.hostname === "[::1]") {
+        return;
+    }
+    posthog.init(POSTHOG_PUBLIC_PROJECT_TOKEN, {
+        api_host: POSTHOG_HOST,
+        ui_host: "https://us.posthog.com/",
+        // Automatically capture navigations using the History API.
+        capture_pageview: "history_change",
+        // Together, these two settings capture cookieless events before the user
+        // chooses and continue doing so if they decline. Accepting enables persistent
+        // tracking. See more: https://posthog.com/tutorials/cookieless-tracking
+        opt_out_capturing_by_default: true,
+        cookieless_mode: "on_reject",
+        // Extends PostHog's built-in campaign params (gclid, rdt_cid, UTMs, etc.)
+        // onto events.
+        custom_campaign_params: ["dub_id"],
+        // Person profiles are enabled later, after consent is received.
+        person_profiles: "identified_only",
+    });
+}
+export function syncPostHogConsent(consent) {
+    if (!posthog.__loaded) {
+        return;
+    }
+    // Skip until there's a real choice made.
+    if (consent === "unknown" || consent === "undecided") {
+        return;
+    }
+    // Skip opt-in/out when already in sync so returning visitors don't get a
+    // duplicate `$opt_in`.
+    if (consent === "consented") {
+        if (posthog.get_explicit_consent_status() !== "granted") {
+            posthog.opt_in_capturing();
+        }
+        // Opting in replaces the cookieless identity with a persistent one, so we
+        // create the profile afterward. This is a no-op if it already exists.
+        posthog.createPersonProfile();
+    }
+    else if (posthog.get_explicit_consent_status() !== "denied") {
+        posthog.opt_out_capturing();
+    }
+}

package/dist/{ConsentBanner.d.ts → react/ConsentBanner.d.ts}

@@ -1,2 +1,2 @@
-import "./banner.css";
+import "../banner.css";
 export declare function ConsentBanner(): import("react").JSX.Element | null;

package/dist/{ConsentBanner.js → react/ConsentBanner.js}

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { capture } from "./capture.js";
+import { bannerCopy } from "../strings.js";
+import { capture } from "../capture.js";
 import { useConsent } from "./useConsent.js";
-import "./banner.css";
+import "../banner.css";
 export function ConsentBanner() {
     const { consent, setConsent } = useConsent();
     const shouldShow = consent === "undecided";
@@ -27,5 +28,5 @@ export function ConsentBanner() {
             setConsent(decision === "accepted" ? "consented" : "declined");
         }
     };
-    return (_jsxs("aside", { "aria-label": "Privacy choices", className: "wa-banner", children: [_jsx("p", { className: "wa-banner-text", children: "We use third-party cookies to understand how people interact with our site." }), _jsxs("p", { className: "wa-banner-text wa-banner-policy", children: ["See our", " ", _jsx("a", { className: "wa-banner-link", href: "https://www.convex.dev/legal/privacy", rel: "noopener noreferrer", target: "_blank", children: "Privacy Policy" }), " ", "to learn more."] }), _jsxs("div", { className: "wa-banner-actions", children: [_jsx("button", { className: "wa-banner-button wa-banner-decline", onClick: () => decide("declined"), type: "button", children: "Decline" }), _jsx("button", { className: "wa-banner-button wa-banner-accept", onClick: () => decide("accepted"), type: "button", children: "Accept" })] })] }));
+    return (_jsxs("aside", { "aria-label": bannerCopy.ariaLabel, className: "wa-banner", children: [_jsx("p", { className: "wa-banner-text", children: bannerCopy.body }), _jsxs("p", { className: "wa-banner-text wa-banner-policy", children: [bannerCopy.policyBeforeLink, " ", _jsx("a", { className: "wa-banner-link", href: bannerCopy.privacyPolicyHref, rel: "noopener noreferrer", target: "_blank", children: bannerCopy.policyLinkText }), " ", bannerCopy.policyAfterLink] }), _jsxs("div", { className: "wa-banner-actions", children: [_jsx("button", { className: "wa-banner-button wa-banner-decline", onClick: () => decide("declined"), type: "button", children: bannerCopy.declineLabel }), _jsx("button", { className: "wa-banner-button wa-banner-accept", onClick: () => decide("accepted"), type: "button", children: bannerCopy.acceptLabel })] })] }));
 }

package/dist/react/WebAnalyticsProvider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type ConsentStatus } from "../consent.js";
+export type { ConsentStatus };
+export interface WebAnalyticsProviderProps {
+    children: ReactNode;
+}
+export declare const ConsentContext: import("react").Context<{
+    consent: ConsentStatus;
+    setConsent: (status: "consented" | "declined") => void;
+} | null>;
+export declare function WebAnalyticsProvider({ children }: WebAnalyticsProviderProps): import("react").JSX.Element;

package/dist/react/WebAnalyticsProvider.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useEffect } from "react";
+import { COOKIE_NAME, hasGPC, resolveConsent, } from "../consent.js";
+import { initPostHog, syncPostHogConsent } from "../posthog.js";
+import { ConsentBanner } from "./ConsentBanner.js";
+import { useBooleanCookie } from "./useCookie.js";
+export const ConsentContext = createContext(null);
+export function WebAnalyticsProvider({ children }) {
+    const { value, isReady, setValue } = useBooleanCookie(COOKIE_NAME);
+    const consent = resolveConsent(isReady, value, hasGPC());
+    useEffect(() => {
+        initPostHog();
+    }, []);
+    useEffect(() => {
+        syncPostHogConsent(consent);
+    }, [consent]);
+    return (_jsxs(ConsentContext.Provider, { value: {
+            consent,
+            setConsent: (status) => {
+                setValue(status === "consented" ? "true" : "false");
+            },
+        }, children: [children, _jsx(ConsentBanner, {})] }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export { WebAnalyticsProvider, type WebAnalyticsProviderProps, } from "./WebAnalyticsProvider.js";
+export { Consented, type ConsentedProps } from "./Consented.js";
+export { useConsent } from "./useConsent.js";

package/dist/react/index.js

@@ -0,0 +1,3 @@
+export { WebAnalyticsProvider, } from "./WebAnalyticsProvider.js";
+export { Consented } from "./Consented.js";
+export { useConsent } from "./useConsent.js";

package/dist/{useCookie.js → react/useCookie.js}

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useEffect, useState } from "react";
-import { getCookie, setCookie } from "./cookie.js";
+import { getCookie, setCookie } from "../cookie.js";
 export function useCookie(name) {
     const [value, setValueState] = useState(undefined);
     const [isReady, setIsReady] = useState(false);

package/dist/strings.d.ts

@@ -0,0 +1,10 @@
+export declare const bannerCopy: {
+    readonly ariaLabel: "Privacy choices";
+    readonly body: "We use third-party cookies to understand how people interact with our site.";
+    readonly policyBeforeLink: "See our";
+    readonly policyLinkText: "Privacy Policy";
+    readonly policyAfterLink: "to learn more.";
+    readonly privacyPolicyHref: "https://www.convex.dev/legal/privacy";
+    readonly declineLabel: "Decline";
+    readonly acceptLabel: "Accept";
+};

package/dist/strings.js

@@ -0,0 +1,10 @@
+export const bannerCopy = {
+    ariaLabel: "Privacy choices",
+    body: "We use third-party cookies to understand how people interact with our site.",
+    policyBeforeLink: "See our",
+    policyLinkText: "Privacy Policy",
+    policyAfterLink: "to learn more.",
+    privacyPolicyHref: "https://www.convex.dev/legal/privacy",
+    declineLabel: "Decline",
+    acceptLabel: "Accept",
+};

package/dist/svelte/WebAnalytics.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { capture } from "../capture.js";
+  import { COOKIE_NAME, hasGPC, resolveConsent } from "../consent.js";
+  import { getCookie, setCookie } from "../cookie.js";
+  import { initPostHog, syncPostHogConsent } from "../posthog.js";
+  import { bannerCopy } from "../strings.js";
+  import "../banner.css";
+
+  let isReady = $state(false);
+  let cookieValue = $state<boolean | undefined>(undefined);
+
+  const consent = $derived(resolveConsent(isReady, cookieValue, hasGPC()));
+  const shouldShowBanner = $derived(consent === "undecided");
+
+  function readCookieValue(): boolean | undefined {
+    const raw = getCookie(COOKIE_NAME);
+    return raw === "true" ? true : raw === "false" ? false : undefined;
+  }
+
+  function syncCookie() {
+    cookieValue = readCookieValue();
+    isReady = true;
+  }
+
+  onMount(() => {
+    initPostHog();
+    syncCookie();
+
+    const handleCookieChange = (event: CookieChangeEvent) => {
+      const changed = [...event.changed, ...event.deleted].some(
+        (cookie) => cookie.name === COOKIE_NAME
+      );
+      if (changed) {
+        syncCookie();
+      }
+    };
+
+    window.addEventListener("focus", syncCookie);
+    document.addEventListener("visibilitychange", syncCookie);
+    window.cookieStore?.addEventListener("change", handleCookieChange);
+
+    return () => {
+      window.removeEventListener("focus", syncCookie);
+      document.removeEventListener("visibilitychange", syncCookie);
+      window.cookieStore?.removeEventListener("change", handleCookieChange);
+    };
+  });
+
+  $effect(() => {
+    syncPostHogConsent(consent);
+  });
+
+  let wasShowingBanner = false;
+  $effect(() => {
+    if (shouldShowBanner && !wasShowingBanner) {
+      // Captures once when the banner becomes visible, not on later renders.
+      capture("cookie_consent_shown");
+    }
+    wasShowingBanner = shouldShowBanner;
+  });
+
+  function setConsent(status: "consented" | "declined") {
+    setCookie(COOKIE_NAME, status === "consented" ? "true" : "false");
+    cookieValue = status === "consented";
+  }
+
+  function decide(decision: "accepted" | "declined") {
+    try {
+      // Captures before the cookie write so decline is captured cookieless.
+      capture("cookie_consent_decided", { decision });
+    } finally {
+      setConsent(decision === "accepted" ? "consented" : "declined");
+    }
+  }
+</script>
+
+{#if shouldShowBanner}
+  <aside aria-label={bannerCopy.ariaLabel} class="wa-banner">
+    <p class="wa-banner-text">{bannerCopy.body}</p>
+    <p class="wa-banner-text wa-banner-policy">
+      {bannerCopy.policyBeforeLink}{" "}
+      <a
+        class="wa-banner-link"
+        href={bannerCopy.privacyPolicyHref}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {bannerCopy.policyLinkText}
+      </a>{" "}
+      {bannerCopy.policyAfterLink}
+    </p>
+    <div class="wa-banner-actions">
+      <button
+        class="wa-banner-button wa-banner-decline"
+        onclick={() => decide("declined")}
+        type="button"
+      >
+        {bannerCopy.declineLabel}
+      </button>
+      <button
+        class="wa-banner-button wa-banner-accept"
+        onclick={() => decide("accepted")}
+        type="button"
+      >
+        {bannerCopy.acceptLabel}
+      </button>
+    </div>
+  </aside>
+{/if}

package/dist/svelte/index.d.ts

@@ -0,0 +1 @@
+export { default as WebAnalytics } from "./WebAnalytics.svelte";

package/dist/svelte/index.js

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+export { default as WebAnalytics } from "./WebAnalytics.svelte";

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@convex-internal/web-analytics",
-  "version": "1.1.1",
+  "version": "2.0.1",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "default": "./dist/svelte/index.js"
+    },
     "./banner.css": "./dist/banner.css"
   },
   "files": [
@@ -16,9 +25,13 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc && cp src/banner.css dist/banner.css",
+    "build": "npm run check:svelte && tsc && cp src/banner.css dist/banner.css && cp src/svelte/WebAnalytics.svelte dist/svelte/WebAnalytics.svelte",
+    "check:svelte": "svelte-check --tsconfig ./src/svelte/tsconfig.json",
     "prepack": "npm run build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "dev:apps:react": "npm run build && vite --config test-apps/react/vite.config.ts",
+    "dev:apps:svelte": "npm run build && vite --config test-apps/svelte/vite.config.ts"
   },
   "sideEffects": [
     "**/*.css"
@@ -27,17 +40,33 @@
     "posthog-js": "^1.211.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/svelte": "^5.3.1",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.10",
     "jsdom": "^30.0.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.8",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.6",
     "typescript": "^5.9.2",
+    "vite": "^8.2.1",
     "vitest": "^4.1.10"
   }
 }

package/dist/WebAnalyticsProvider.d.ts

@@ -1,17 +0,0 @@
-import { type ReactNode } from "react";
-export declare const POSTHOG_PUBLIC_PROJECT_TOKEN = "phc_JDNTRxeh2li2sQTRO0IcOYMJcp8fPs5nTK9TU751nQK";
-/**
- * `"unknown"` until the cookie has been read (SSR and first client render).
- * `"undecided"` when it has been read and there is no recognized choice.
- * `"consented"` when the cookie is `true` and Global Privacy Control is off.
- * `"declined"` when the cookie is `false`, or while GPC is on.
- */
-export type ConsentStatus = "unknown" | "undecided" | "consented" | "declined";
-export interface WebAnalyticsProviderProps {
-    children: ReactNode;
-}
-export declare const ConsentContext: import("react").Context<{
-    consent: ConsentStatus;
-    setConsent: (status: "consented" | "declined") => void;
-} | null>;
-export declare function WebAnalyticsProvider({ children }: WebAnalyticsProviderProps): import("react").JSX.Element;

package/dist/WebAnalyticsProvider.js

@@ -1,94 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { posthog } from "posthog-js";
-import { createContext, useEffect } from "react";
-import { ConsentBanner } from "./ConsentBanner.js";
-import { useBooleanCookie } from "./useCookie.js";
-// PostHog project token for event ingest and feature flags. `phc_` tokens are
-// public by design (browser JS, no env var) and cannot read private project data.
-// https://posthog.com/docs/privacy#is-it-ok-for-my-api-key-to-be-exposed-and-public
-export const POSTHOG_PUBLIC_PROJECT_TOKEN = "phc_JDNTRxeh2li2sQTRO0IcOYMJcp8fPs5nTK9TU751nQK";
-const POSTHOG_HOST = "https://ap.convex.dev";
-const COOKIE_NAME = "allowsCookies";
-// GPC wins over the stored cookie and does not write it, so turning GPC off
-// restores the saved choice (or the banner if there is none). A missing or
-// unrecognized cookie after the read defaults to `"undecided"`.
-function resolveConsent(isReady, cookieValue, gpcOptOut) {
-    if (!isReady) {
-        return "unknown";
-    }
-    if (gpcOptOut) {
-        return "declined";
-    }
-    if (cookieValue === true) {
-        return "consented";
-    }
-    if (cookieValue === false) {
-        return "declined";
-    }
-    return "undecided";
-}
-export const ConsentContext = createContext(null);
-export function WebAnalyticsProvider({ children }) {
-    const { value, isReady, setValue } = useBooleanCookie(COOKIE_NAME);
-    const gpcOptOut = typeof navigator !== "undefined" && navigator.globalPrivacyControl === true;
-    const consent = resolveConsent(isReady, value, gpcOptOut);
-    // Initialize PostHog once, in cookieless mode. Consent is applied below.
-    useEffect(() => {
-        if (posthog.__loaded) {
-            return;
-        }
-        // Keep local/dev sessions out of production PostHog data.
-        if (process.env.NODE_ENV !== "production" ||
-            window.location.hostname === "localhost" ||
-            window.location.hostname === "127.0.0.1" ||
-            window.location.hostname === "[::1]") {
-            return;
-        }
-        posthog.init(POSTHOG_PUBLIC_PROJECT_TOKEN, {
-            api_host: POSTHOG_HOST,
-            ui_host: "https://us.posthog.com/",
-            // Automatically capture navigations using the History API.
-            capture_pageview: "history_change",
-            // Together, these two settings capture cookieless events before the user
-            // chooses and continue doing so if they decline. Accepting enables persistent
-            // tracking. See more: https://posthog.com/tutorials/cookieless-tracking
-            opt_out_capturing_by_default: true,
-            cookieless_mode: "on_reject",
-            // Extends PostHog's built-in campaign params (gclid, rdt_cid, UTMs, etc.)
-            // onto events.
-            custom_campaign_params: ["dub_id"],
-            // Person profiles are enabled later, after consent is received.
-            person_profiles: "identified_only",
-        });
-    }, []);
-    // Keep PostHog capturing in sync with consent.
-    useEffect(() => {
-        if (!posthog.__loaded) {
-            return;
-        }
-        // Skip until there's a real choice made.
-        if (consent === "unknown" || consent === "undecided") {
-            return;
-        }
-        // Skip opt-in/out when already in sync so returning visitors don't get a
-        // duplicate `$opt_in`.
-        if (consent === "consented") {
-            if (posthog.get_explicit_consent_status() !== "granted") {
-                posthog.opt_in_capturing();
-            }
-            // Opting in replaces the cookieless identity with a persistent one, so we
-            // create the profile afterward. This is a no-op if it already exists.
-            posthog.createPersonProfile();
-        }
-        else if (posthog.get_explicit_consent_status() !== "denied") {
-            posthog.opt_out_capturing();
-        }
-    }, [consent]);
-    return (_jsxs(ConsentContext.Provider, { value: {
-            consent,
-            setConsent: (status) => {
-                setValue(status === "consented" ? "true" : "false");
-            },
-        }, children: [children, _jsx(ConsentBanner, {})] }));
-}