@c15t/nextjs 2.0.0-rc.4 → 2.0.0-rc.6

package/docs/policy-packs.md

@@ -0,0 +1,246 @@
+---
+title: Policy Packs
+description: Configure regional consent policies in Next.js — hosted mode, presets, and offline fallback.
+---
+Policy packs configure how c15t handles regional consent — which model (opt-in, opt-out, none), which categories, and what UI to show. The backend resolves the right policy automatically based on the visitor's location.
+
+**For most apps, you just need a `ConsentManagerProvider` pointing at your backend with presets configured there.** The frontend receives the resolved policy via the `/init` response — no client-side policy config required.
+
+When a backend isn't available — local development, static previews, Storybook, or as a resilience fallback — you can pass policies directly to the provider via `offlinePolicy.policyPacks` and c15t resolves them locally.
+
+> ℹ️ **Info:**
+> For QA and testing, use the c15t DevTools to simulate different regions and policy responses against your real backend, rather than switching to offline mode.
+
+## Hosted Mode (Recommended)
+
+When using consent.io or a self-hosted backend, the provider connects automatically. No policy configuration is needed on the frontend:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    backendURL: 'https://your-instance.c15t.dev',
+  }}
+>
+  <ConsentBanner />
+  <ConsentDialog />
+  {children}
+</ConsentManagerProvider>
+```
+
+The backend resolves the correct policy based on the visitor's geo data and returns it in the `/init` response. Configure your presets on the backend side.
+
+## Offline Presets (Fallback)
+
+When no backend is available, pass presets directly to the provider:
+
+```tsx
+import { policyPackPresets } from '@c15t/react';
+
+offlinePolicy: {
+  i18n: {
+    defaultProfile: 'default',
+    messages: {
+      default: {
+        translations: {
+          en: { cookieBanner: { title: 'Privacy choices' } },
+        },
+      },
+      eu: {
+        fallbackLanguage: 'en',
+        translations: {
+          en: { cookieBanner: { title: 'EU GDPR Consent' } },
+          fr: { cookieBanner: { title: 'Consentement RGPD' } },
+          de: { cookieBanner: { title: 'GDPR-Einwilligung' } },
+        },
+      },
+    },
+  },
+  policyPacks: [
+    {
+      ...policyPackPresets.europeOptIn(),
+      i18n: { messageProfile: 'eu' },
+    },
+    policyPackPresets.californiaOptOut(),
+    policyPackPresets.worldNoBanner(),
+  ],
+}
+```
+
+Available presets:
+
+|Preset|Model|Matches|
+|--|--|--|
+|`europeOptIn()`|`opt-in`|EEA + UK countries + geo fallback|
+|`europeIab()`|`iab`|EEA + UK countries + geo fallback (TCF 2.3)|
+|`californiaOptOut()`|`opt-out`|US-CA region|
+|`quebecOptIn()`|`opt-in`|CA-QC region|
+|`worldNoBanner()`|`none`|default fallback|
+
+## Next.js Example (Hosted)
+
+Point the provider at your backend — policy resolution happens server-side:
+
+```tsx title="components/consent-manager/provider.tsx"
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  ConsentBanner,
+  ConsentDialog,
+  ConsentManagerProvider,
+} from '@c15t/nextjs';
+
+export function ConsentManager({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider
+      options={{
+        backendURL: 'https://your-instance.c15t.dev',
+      }}
+    >
+      <ConsentBanner />
+      <ConsentDialog />
+      {children}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+For production Next.js apps, you can optionally hydrate the first `/init` response with the [server-side utilities](/docs/frameworks/next/server-side).
+
+## Offline / Fallback
+
+For local development, static sites, or when the backend is unreachable, pass policies directly:
+
+```tsx title="components/consent-manager/provider.tsx"
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  ConsentBanner,
+  ConsentDialog,
+  ConsentManagerProvider,
+  policyPackPresets,
+} from '@c15t/nextjs';
+
+export function ConsentManager({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider
+      options={{
+        mode: 'offline',
+        offlinePolicy: {
+          policyPacks: [
+            policyPackPresets.europeOptIn(),
+            policyPackPresets.californiaOptOut(),
+            policyPackPresets.worldNoBanner(),
+          ],
+        },
+        overrides: {
+          country: 'DE', // Preview as a German visitor
+        },
+      }}
+    >
+      <ConsentBanner />
+      <ConsentDialog />
+      {children}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+## Provider Shape
+
+Configure packs through `offlinePolicy.policyPacks`. Add `offlinePolicy.i18n`
+when you want offline mode to mirror hosted policy-profile language behavior:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    mode: 'offline',
+    offlinePolicy: {
+      i18n: {
+        defaultProfile: 'default',
+        messages: {
+          default: {
+            translations: {
+              en: { cookieBanner: { title: 'Privacy choices' } },
+            },
+          },
+          qc: {
+            fallbackLanguage: 'fr',
+            translations: {
+              en: { cookieBanner: { title: 'Quebec Privacy Settings' } },
+              fr: { cookieBanner: { title: 'Paramètres de confidentialité du Québec' } },
+            },
+          },
+        },
+      },
+      policyPacks: [
+        {
+          id: 'qc_opt_in',
+          match: { regions: [{ country: 'CA', region: 'QC' }] },
+          i18n: { messageProfile: 'qc' },
+          consent: { model: 'opt-in', expiryDays: 365 },
+          ui: { mode: 'banner' },
+        },
+        {
+          id: 'default',
+          match: { isDefault: true },
+          consent: { model: 'none' },
+          ui: { mode: 'none' },
+        },
+      ],
+    },
+    overrides: { country: 'CA', region: 'QC' },
+  }}
+>
+```
+
+With that setup, offline mode resolves language the same way as hosted mode:
+
+* the active policy profile defines the allowed language set
+* each profile can define its own `fallbackLanguage`
+* built-in translations only fill missing keys for the selected language
+
+## Fallback Behavior
+
+|Configuration|Result|
+|--|--|
+|`offlinePolicy.policyPacks` omitted|Synthetic opt-in fallback banner (also used for hosted network fallback)|
+|`offlinePolicy: { policyPacks: [] }`|Explicit no-banner mode|
+|Non-empty pack, no match, no default|Explicit no-banner mode|
+
+Omitting the option gives you a safe opt-in default for local development and outage scenarios. Providing it tells c15t you want policy-driven behavior exactly as configured.
+
+## QA and Debugging
+
+The best way to test regional consent behavior is with the [c15t DevTools](/docs/frameworks/react/dev-tools). The DevTools Policy panel lets you simulate different countries, regions, and GPC signals against your real backend — no code changes needed.
+
+For deeper inspection:
+
+* Read `policy` and `policyDecision` from `useConsentManager()` to see the resolved config
+* Open the DevTools Policy panel to inspect matcher resolution and fingerprints
+* Compare your frontend preview with the backend `/init` response before shipping
+
+If you need fully deterministic resolution without a backend (e.g., in automated tests or Storybook), pair `offlinePolicy.policyPacks` with `overrides`:
+
+```tsx
+options={{
+  mode: 'offline',
+  offlinePolicy: {
+    policyPacks: [
+      policyPackPresets.europeOptIn(),
+      policyPackPresets.californiaOptOut(),
+      policyPackPresets.worldNoBanner(),
+    ],
+  },
+  overrides: {
+    country: 'US',
+    region: 'CA',
+    language: 'en-US',
+    gpc: true, // Simulate Global Privacy Control
+  },
+}}
+```
+
+> ℹ️ **Info:**
+> For the full concept model (matchers, scope modes, re-prompting), see Policy Packs concepts. For backend setup, see the self-host guide.

package/docs/quickstart.md

@@ -0,0 +1,155 @@
+---
+title: Quickstart
+description: Add consent management to your Next.js app in under 5 minutes.
+lastModified: 2026-03-11
+availableIn:
+  - framework: 'javascript'
+    url: '/docs/frameworks/javascript/quickstart'
+    title: 'JavaScript'
+  - framework: 'react'
+    url: '/docs/frameworks/react/quickstart'
+    title: 'React'
+  - framework: 'next'
+    url: '/docs/frameworks/next/quickstart'
+    title: 'Next.js'
+---
+## Via CLI
+
+|Package manager|Command|
+|:--|:--|
+|npm|`npx @c15t/cli@rc`|
+|pnpm|`pnpm dlx @c15t/cli@rc`|
+|yarn|`yarn dlx @c15t/cli@rc`|
+|bun|`bunx @c15t/cli@rc`|
+
+## Manual Installation
+
+1. **Install package**
+
+   |Package manager|Command|
+   |:--|:--|
+   |npm|`npm install @c15t/nextjs`|
+   |pnpm|`pnpm add @c15t/nextjs`|
+   |yarn|`yarn add @c15t/nextjs`|
+   |bun|`bun add @c15t/nextjs`|
+
+2. **Import styles** Import the prebuilt component stylesheet in your root layout. This is required for styled components to render correctly.
+
+   ```tsx
+   import '@c15t/nextjs/styles.css';
+   ```
+
+   > ℹ️ Info:
+   >
+   > If you are using the headless API or fully custom styling, you can skip this import.
+
+3. **Create ConsentManager components** Create a provider component with the consent UI and a wrapper that re-exports it. This initializes the consent store and makes consent state available to all child components.
+
+   ```tsx
+   'use client';
+
+   import { type ReactNode } from 'react';
+   import {
+     ConsentManagerProvider,
+     ConsentBanner,
+     ConsentDialog,
+   } from '@c15t/nextjs';
+
+   export default function ConsentManagerClient({ children }: { children: ReactNode }) {
+     return (
+       <ConsentManagerProvider
+         options={{
+           mode: 'hosted',
+           backendURL: 'https://your-instance.c15t.dev',
+           consentCategories: ['necessary', 'measurement', 'marketing'],
+           // Shows banner during development. Remove for production.
+           overrides: { country: 'DE' },
+         }}
+       >
+         <ConsentBanner />
+         <ConsentDialog />
+         {children}
+       </ConsentManagerProvider>
+     );
+   }
+   ```
+
+   ```tsx
+   import type { ReactNode } from 'react';
+   import ConsentManagerProvider from './provider';
+
+   export function ConsentManager({ children }: { children: ReactNode }) {
+     return <ConsentManagerProvider>{children}</ConsentManagerProvider>;
+   }
+   ```
+
+   > ℹ️ Info:
+   >
+   > Don't have a backend yet? You can use mode: 'offline' for local-only consent storage, but review the browser-only storage consequences before choosing it for production.
+
+4. **Mount ConsentManager at the app root** Wrap your app tree with ConsentManager so all routes/components can access consent state.
+
+   ```tsx
+   import { ConsentManager } from '@/components/consent-manager';
+
+   export default function RootLayout({ children }: { children: React.ReactNode }) {
+     return (
+       <html lang="en">
+         <body>
+           <ConsentManager>{children}</ConsentManager>
+         </body>
+       </html>
+     );
+   }
+   ```
+
+5. **Verify it works** Start your development server and confirm:
+
+   A consent banner appears at the bottom of the pageClicking "Customize" opens a dialog with toggles for each consent categoryAfter accepting or rejecting, the banner dismisses and your choice persists across page reloads
+
+> ℹ️ **Info:**
+> Want better performance and static-route support? See Optimization for rewrites, prefetching, and network tuning. If you want server-side data prefetching, see Server-Side Data Fetching.
+
+## Optional: Add DevTools
+
+Install DevTools only if you want a runtime inspector while building and debugging:
+
+|Package manager|Command|
+|:--|:--|
+|npm|`npm install @c15t/dev-tools`|
+|pnpm|`pnpm add @c15t/dev-tools`|
+|yarn|`yarn add @c15t/dev-tools`|
+|bun|`bun add @c15t/dev-tools`|
+
+Then add it inside your existing provider:
+
+```tsx title="components/consent-manager/provider.tsx"
+import { DevTools } from '@c15t/dev-tools/react';
+
+// ...
+
+<ConsentManagerProvider options={...}>
+  <ConsentBanner />
+  <ConsentDialog />
+  {process.env.NODE_ENV !== 'production' && <DevTools />}
+  {children}
+</ConsentManagerProvider>
+```
+
+> ℹ️ **Info:**
+> Want to understand what's happening under the hood? See Initialization Flow for the lifecycle and Cookie Management for script/cookie behavior and revocation handling.
+
+## Optional: AI Agents
+
+Install c15t agent skills to let AI agents help with styling, i18n, scripts & other configuration.
+
+|Package manager|Command|
+|:--|:--|
+|npm|`npx @c15t/cli@rc skills`|
+|pnpm|`pnpm dlx @c15t/cli@rc skills`|
+|yarn|`yarn dlx @c15t/cli@rc skills`|
+|bun|`bunx @c15t/cli@rc skills`|
+
+See [AI Agents](/docs/ai-agents) for bundled package docs and agent skills.
+
+## Next steps

package/docs/script-loader.md

@@ -0,0 +1,300 @@
+---
+title: Script Loader
+description: Gate third-party scripts behind consent - load Google Analytics, Meta Pixel, and other tracking scripts only when users grant permission.
+---
+The script loader manages third-party scripts based on consent state. Scripts are defined in the provider's `scripts` option and are automatically loaded when their required consent category is granted, and unloaded when consent is revoked.
+
+c15t has a collection of premade scripts available on the @c15t/scripts package. It's recomended to check if a pre-built integration exists before manually creating a script, see the [integrations overview](/docs/integrations/overview).
+
+|Package manager|Command|
+|:--|:--|
+|npm|`npm install @c15t/scripts`|
+|pnpm|`pnpm add @c15t/scripts`|
+|yarn|`yarn add @c15t/scripts`|
+|bun|`bun add @c15t/scripts`|
+
+> ℹ️ **Info:**
+> We recommend using the pre-built integrations when possible.
+
+## Basic Usage
+
+Pass an array of `Script` objects to the provider:
+
+```tsx
+import { type ReactNode } from 'react';
+import { ConsentManagerProvider } from '@c15t/nextjs';
+import { metaPixel } from '@c15t/scripts/meta-pixel';
+
+export function ConsentManager({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider
+      options={{
+        mode: 'hosted',
+        backendURL: '/api/c15t',
+        scripts: [
+          metaPixel({ pixelId: '123456' }),
+          {
+            id: 'custom-analytics',
+            src: 'https://cdn.example.com/analytics.js',
+            category: 'measurement',
+          },
+        ],
+      }}
+    >
+      {children}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+## Script Types
+
+### Standard Scripts
+
+Load an external JavaScript file via a `<script>` tag. Use `src` to specify the URL.
+
+### Inline Scripts
+
+Execute inline JavaScript code. Use `textContent` instead of `src`:
+
+```tsx
+{
+  id: 'gtag-config',
+  textContent: `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-XXXXXX');
+  `,
+  category: 'measurement',
+}
+```
+
+### Callback-Only Scripts
+
+Don't inject any `<script>` tag - just execute callbacks based on consent changes. Useful for controlling libraries that are already loaded:
+
+```tsx
+{
+  id: 'posthog-consent',
+  callbackOnly: true,
+  category: 'measurement',
+  onLoad: ({ hasConsent }) => {
+    if (hasConsent) {
+      posthog.opt_in_capturing();
+    }
+  },
+  onConsentChange: ({ hasConsent }) => {
+    if (hasConsent) {
+      posthog.opt_in_capturing();
+    } else {
+      posthog.opt_out_capturing();
+    }
+  },
+}
+```
+
+## Consent Conditions
+
+The `category` field accepts a `HasCondition` - either a simple string or a logical expression:
+
+```tsx
+// Simple: requires measurement consent
+{ category: 'measurement' }
+
+// AND: requires both measurement and marketing
+{ category: { and: ['measurement', 'marketing'] } }
+
+// OR: requires either measurement or marketing
+{ category: { or: ['measurement', 'marketing'] } }
+```
+
+## Script Callbacks
+
+Every script supports four lifecycle callbacks:
+
+|Callback|When|Use Case|
+|--|--|--|
+|`onBeforeLoad`|Before the script tag is injected|Set up global variables|
+|`onLoad`|Script loaded successfully|Initialize the library|
+|`onError`|Script failed to load|Log error, load fallback|
+|`onConsentChange`|Consent state changed (script already loaded)|Toggle tracking on/off|
+
+```tsx
+{
+  id: 'analytics',
+  src: 'https://analytics.example.com/v2.js',
+  category: 'measurement',
+  onBeforeLoad: ({ id }) => {
+    console.log(`Loading script: ${id}`);
+  },
+  onLoad: ({ element }) => {
+    window.analytics.init('my-key');
+  },
+  onError: ({ error }) => {
+    console.error('Failed to load analytics:', error);
+  },
+  onConsentChange: ({ hasConsent, consents }) => {
+    window.analytics.setConsent(hasConsent);
+  },
+}
+```
+
+## Advanced Options
+
+### Always Load
+
+Scripts that manage their own consent internally (like GTM in consent mode):
+
+```tsx
+{
+  id: 'google-tag-manager',
+  src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXX',
+  category: 'measurement',
+  alwaysLoad: true, // Loads regardless of consent state
+}
+```
+
+### Persist After Revocation
+
+Keep the script loaded even after consent is revoked (the page won't reload for this script):
+
+```tsx
+{
+  id: 'error-tracking',
+  src: 'https://errors.example.com/track.js',
+  category: 'measurement',
+  persistAfterConsentRevoked: true,
+}
+```
+
+### Script Placement
+
+Control where in the DOM the script is injected:
+
+```tsx
+{
+  id: 'widget',
+  src: 'https://widget.example.com/embed.js',
+  category: 'experience',
+  target: 'body', // 'head' (default) or 'body'
+}
+```
+
+### Ad Blocker Evasion
+
+Script element IDs are anonymized by default to avoid ad blocker pattern matching:
+
+```tsx
+{
+  id: 'analytics',
+  src: '...',
+  category: 'measurement',
+  anonymizeId: true, // default: true
+}
+```
+
+## Dynamic Script Management
+
+Add, remove, or check scripts at runtime via `useConsentManager()`:
+
+```tsx
+import { useConsentManager } from '@c15t/nextjs';
+
+function ScriptManager() {
+  const { setScripts, removeScript, isScriptLoaded, getLoadedScriptIds } = useConsentManager();
+
+  // Add scripts dynamically
+  setScripts([{ id: 'dynamic', src: '...', category: 'measurement' }]);
+
+  // Remove a script
+  removeScript('dynamic');
+
+  // Check if a script is loaded
+  const loaded = isScriptLoaded('google-analytics');
+
+  // Get all loaded script IDs
+  const allLoaded = getLoadedScriptIds();
+}
+```
+
+## API Reference
+
+### Script
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|id|string|Unique identifier for the script|-|✅ Required|
+|src|string \|undefined|URL of the script to load|-|Optional|
+|textContent|string \|undefined|Inline JavaScript code to execute|-|Optional|
+|category|HasCondition\<AllConsentNames>|Consent category or condition required to load this script|-|✅ Required|
+|callbackOnly|boolean \|undefined|Whether this is a callback-only script that doesn't need to load an external resource. When true, no script tag will be added to the DOM, only callbacks will be executed.|false|Optional|
+|persistAfterConsentRevoked|boolean \|undefined|Whether the script should persist after consent is revoked.|false|Optional|
+|alwaysLoad|boolean \|undefined|Whether the script should always load regardless of consent state. This is useful for scripts like Google Tag Manager or PostHog that manage their own consent state internally. The script will load immediately and never be unloaded based on consent changes. Note: When using this option, you are responsible for ensuring the script itself respects user consent preferences through its own consent management.|false|Optional|
+|fetchPriority|"high" \|"low" \|"auto" \|undefined|Priority hint for browser resource loading|-|Optional|
+|attributes|Record\<string, string> \|undefined|Additional attributes to add to the script element|-|Optional|
+|async|boolean \|undefined|Whether to use async loading|-|Optional|
+|defer|boolean \|undefined|Whether to defer script loading|-|Optional|
+|nonce|string \|undefined|Content Security Policy nonce|-|Optional|
+|anonymizeId|boolean \|undefined|Whether to use an anonymized ID for the script element, this helps ensure the script is not blocked by ad blockers|true|Optional|
+|target|"head" \|"body" \|undefined|Where to inject the script element in the DOM. Options: \`'head'\`: Scripts are appended to \`\<head>\` (default); \`'body'\`: Scripts are appended to \`\<body>\`|'head'|Optional|
+|onBeforeLoad|Object \|undefined|Callback executed before the script is loaded|-|Optional|
+|onLoad|Object \|undefined|Callback executed when the script loads successfully|-|Optional|
+|onError|Object \|undefined|Callback executed if the script fails to load|-|Optional|
+|onConsentChange|Object \|undefined|Callback executed whenever the consent store is changed. This callback only applies to scripts already loaded.|-|Optional|
+|vendorId|string \|number \|undefined|IAB TCF vendor ID - links script to a registered vendor. When in IAB mode, the script will only load if this vendor has consent. Takes precedence over \`category\` when in IAB mode. Use custom vendor IDs (string or number) to gate non-IAB vendors too.|-|Optional|
+|iabPurposes|number\[] \|undefined|IAB TCF purpose IDs this script requires consent for. When in IAB mode and no vendorId is set, the script will only load if ALL specified purposes have consent.|-|Optional|
+|iabLegIntPurposes|number\[] \|undefined|IAB TCF legitimate interest purpose IDs. These purposes can operate under legitimate interest instead of consent. The script loads if all iabPurposes have consent OR all iabLegIntPurposes have legitimate interest established.|-|Optional|
+|iabSpecialFeatures|number\[] \|undefined|IAB TCF special feature IDs this script requires. Options: 1: Use precise geolocation data; 2: Actively scan device characteristics for identification|-|Optional|
+
+#### `onBeforeLoad`
+
+Callback executed before the script is loaded
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|id|string|The original script ID|-|✅ Required|
+|elementId|string|The actual DOM element ID used (anonymized if enabled)|-|✅ Required|
+|hasConsent|boolean|Has consent|-|✅ Required|
+|consents|ConsentState|The current consent state|-|✅ Required|
+|element|HTMLScriptElement \|undefined|The script element (for load/error callbacks) Will be undefined for callback-only scripts|-|Optional|
+|error|Error \|undefined|Error information (for error callbacks)|-|Optional|
+
+#### `onLoad`
+
+Callback executed when the script loads successfully
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|id|string|The original script ID|-|✅ Required|
+|elementId|string|The actual DOM element ID used (anonymized if enabled)|-|✅ Required|
+|hasConsent|boolean|Has consent|-|✅ Required|
+|consents|ConsentState|The current consent state|-|✅ Required|
+|element|HTMLScriptElement \|undefined|The script element (for load/error callbacks) Will be undefined for callback-only scripts|-|Optional|
+|error|Error \|undefined|Error information (for error callbacks)|-|Optional|
+
+#### `onError`
+
+Callback executed if the script fails to load
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|id|string|The original script ID|-|✅ Required|
+|elementId|string|The actual DOM element ID used (anonymized if enabled)|-|✅ Required|
+|hasConsent|boolean|Has consent|-|✅ Required|
+|consents|ConsentState|The current consent state|-|✅ Required|
+|element|HTMLScriptElement \|undefined|The script element (for load/error callbacks) Will be undefined for callback-only scripts|-|Optional|
+|error|Error \|undefined|Error information (for error callbacks)|-|Optional|
+
+#### `onConsentChange`
+
+Callback executed whenever the consent store is changed. This callback only applies to scripts already loaded.
+
+|Property|Type|Description|Default|Required|
+|:--|:--|:--|:--|:--:|
+|id|string|The original script ID|-|✅ Required|
+|elementId|string|The actual DOM element ID used (anonymized if enabled)|-|✅ Required|
+|hasConsent|boolean|Has consent|-|✅ Required|
+|consents|ConsentState|The current consent state|-|✅ Required|
+|element|HTMLScriptElement \|undefined|The script element (for load/error callbacks) Will be undefined for callback-only scripts|-|Optional|
+|error|Error \|undefined|Error information (for error callbacks)|-|Optional|