@c15t/nextjs 2.2.0-canary-20260727202135 → 2.2.0

package/dist/version.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_,r)=>{var o=(_,r)=>{for(var o in _)__webpack_require__.o(_,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[r]:_[o]})};o(_,"get"),o(r,"value")},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__);const version="2.2.0-canary-20260727202135";for(var __rspack_i in __webpack_require__.d(__webpack_exports__,{},{version:"2.2.0-canary-20260727202135"}),exports.version=__webpack_exports__.version,__webpack_exports__)-1===["version"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_,r)=>{var o=(_,r)=>{for(var o in _)__webpack_require__.o(_,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[r]:_[o]})};o(_,"get"),o(r,"value")},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__);const version="2.2.0";for(var __rspack_i in __webpack_require__.d(__webpack_exports__,{},{version:"2.2.0"}),exports.version=__webpack_exports__.version,__webpack_exports__)-1===["version"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/version.js

@@ -1 +1 @@
-let e="2.2.0-canary-20260727202135";export{e as version};
+let e="2.2.0";export{e as version};

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.2.0-canary-20260727202135";
+export declare const version = "2.2.0";

package/docs/frameworks/next/components/consent-manager-provider.md

@@ -75,6 +75,105 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
 
 See [Client Modes](/docs/frameworks/next/concepts/client-modes) for a detailed comparison.
 
+## Content Security Policy
+
+c15t injects a `<style id="c15t-theme">` element for your theme tokens, and the script loader injects a `<script>` element per consented vendor. Under a nonce-based Content Security Policy, both are blocked unless they carry your nonce.
+
+Pass it once through the `nonce` option and c15t applies it to everything it injects:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    mode: 'offline',
+    nonce: yourRequestNonce,
+  }}
+>
+  {children}
+</ConsentManagerProvider>
+```
+
+A `nonce` set on an individual script definition still wins, so you can override a single vendor without changing the provider.
+
+> 📝 **Note:**
+> Browsers hide the nonce content attribute once a policy is active. Inspecting the element shows no nonce="", but element.nonce still returns the value — this is expected and not a sign that c15t dropped it.
+
+### Inline style attributes
+
+The `nonce` option covers the elements c15t injects. It cannot cover inline `style="..."` attributes, which several components rely on — a nonce never authorizes a style attribute, because nonces apply to elements only.
+
+Style attributes are governed by `style-src-attr`, and when that directive is absent CSP falls back to `style-src`. A nonce-based style policy therefore blocks them:
+
+```http
+style-src 'self' 'nonce-abc123';
+```
+
+To keep the nonce requirement for stylesheets while still allowing style attributes, set `style-src-attr` explicitly:
+
+```http
+style-src 'self' 'nonce-abc123';
+style-src-attr 'unsafe-inline';
+```
+
+> ⚠️ **Warning:**
+> 'unsafe-inline' on style-src-attr permits any inline style attribute on the page. That is weaker than a nonce, but far narrower than replacing your nonce-based style-src with 'unsafe-inline', which would additionally authorize arbitrary injected \<style> elements. Note that adding 'unsafe-inline' alongside a nonce achieves nothing — a directive that specifies a nonce ignores it. If your threat model does not allow this, expect components that use inline styles to render unstyled.
+
+### Reading the nonce in the App Router
+
+Next.js does not expose the request nonce to client components, so read it in a server component and pass it down. Generate the nonce in middleware, forward it on a request header, then hand it to the provider from your layout:
+
+```ts title="middleware.ts"
+import { NextResponse, type NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const nonce = crypto.randomUUID();
+  const isDev = process.env.NODE_ENV === 'development';
+
+  const csp = [
+    `default-src 'self'`,
+    // Next.js dev tooling (React Refresh and HMR) requires 'unsafe-eval'.
+    `script-src 'self' 'nonce-${nonce}'${isDev ? " 'unsafe-eval'" : ''}`,
+    `style-src 'self' 'nonce-${nonce}'`,
+    // Nonces cannot authorize inline style attributes — see above.
+    `style-src-attr 'unsafe-inline'`,
+  ].join('; ');
+
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set('x-nonce', nonce);
+  requestHeaders.set('Content-Security-Policy', csp);
+
+  const response = NextResponse.next({ request: { headers: requestHeaders } });
+  response.headers.set('Content-Security-Policy', csp);
+
+  return response;
+}
+```
+
+> ⚠️ **Warning:**
+> Set the same policy on both the forwarded request headers and the response. Next.js reads the nonce for its own runtime and hydration scripts from the Content-Security-Policy request header during rendering. Setting it only on the response leaves those scripts without a nonce, and the enforced policy then blocks them, so the page never hydrates.
+
+```tsx title="app/layout.tsx"
+import { headers } from 'next/headers';
+import { ConsentManagerProvider } from '@c15t/nextjs';
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const nonce = (await headers()).get('x-nonce') ?? undefined;
+
+  return (
+    <html lang="en">
+      <body>
+        <ConsentManagerProvider options={{ mode: 'offline', nonce }}>
+          {children}
+        </ConsentManagerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
 ## Legal Links
 
 `legalLinks` defines the URLs shown in consent UI text (banner, dialog, and widget where applicable).

package/docs/frameworks/next/script-loader.md

@@ -298,6 +298,8 @@ Control where the script is injected and whether the element id is anonymized:
 
 Set `anonymizeId: false` only when another script or test needs a stable DOM id. Pass `nonce` when your CSP requires it; c15t applies it directly to the generated `<script>` element.
 
+You usually do not need a per-script `nonce`. Setting `nonce` once on the provider covers every injected script (and the theme stylesheet); a per-script value overrides it for that script alone.
+
 ## Dynamic Management
 
 Framework packages expose script-manager methods so integrations can be added, removed, or inspected at runtime. Use this for tenant-specific tools, feature-flagged scripts, or vendors that are configured after sign-in:
@@ -487,7 +489,7 @@ For iframe-only embeds, use the [iframe blocking](/docs/frameworks/next/iframe-b
 * The provider and any component that calls `useConsentManager()` must be client components.
 * Keep vendor ids out of static examples when they differ per environment — read them from `process.env.NEXT_PUBLIC_*` or runtime config.
 * If a script must be available before a page becomes interactive, prefer a built-in helper that models denied-consent defaults rather than adding a separate `next/script` tag.
-* If you use CSP nonces, pass the nonce through the `Script` object so c15t applies it to the generated script element.
+* If you use CSP nonces, set `nonce` on the provider options so c15t applies it to every injected script element and the theme stylesheet. See [Content Security Policy](/docs/frameworks/next/components/consent-manager-provider#content-security-policy) for reading the nonce in the App Router.
 
 ## API Reference
 

package/docs/integrations/posthog.md

@@ -83,7 +83,7 @@ This is the recommended approach if you're using the PostHog JS SDK; it's common
 
 If you want to load PostHog via a script tag, it's recommended to use this approach.
 
-1. **Choose a region and loading mode** The c15t helper loads PostHog's bootstrap script, calls `posthog.init()` for you, and then synchronizes consent through `posthog.opt_in_capturing()` / `posthog.opt_out_capturing()`. You do not need to call `posthog.init()` separately.
+1. **Choose a region and loading mode** The c15t helper seeds PostHog's initialization queue, loads the bootstrap script, and synchronizes consent through `posthog.opt_in_capturing()` / `posthog.opt_out_capturing()`. You do not need to call `posthog.init()` separately.
 
    Use region to keep PostHog's API, UI, and bootstrap script hosts aligned. c15t defaults to region: 'eu'; set region: 'us' for PostHog Cloud US. You can still pass apiHost, uiHost, or scriptUrl for self-hosted or proxied setups.
 
@@ -221,7 +221,7 @@ posthog({
 The behavior depends on which pattern you chose:
 
 * **SDK Implementation** — your app loaded `posthog-js` itself, so `posthog.capture(...)` is available once your SDK setup has run. c15t calls `opt_in_capturing()` / `opt_out_capturing()` for you. Pending events before c15t syncs consent may be dropped; after denial, PostHog captures cookieless events.
-* **Script Implementation with `loadMode: 'always'`** — `window.posthog` is defined early. c15t calls `opt_in_capturing()` / `opt_out_capturing()` based on consent. Pending events before the PostHog bootstrap finishes may be dropped; after denial, PostHog captures cookieless events when your PostHog project supports cookieless mode.
+* **Script Implementation with `loadMode: 'always'`** — `window.posthog` is defined early as a queue. Calls to `posthog.capture(...)` before the bootstrap finishes are replayed after the SDK installs instead of being dropped. c15t queues the current consent decision ahead of those calls, then keeps calling `opt_in_capturing()` / `opt_out_capturing()` as consent changes. After denial, PostHog captures cookieless events when your PostHog project supports cookieless mode.
 * **Script Implementation with `loadMode: 'after-consent'`** — PostHog is unavailable until measurement consent is granted. Guard `posthog.capture(...)` calls or call them only after consent.
 
 > ⚠️ **Warning:**

package/docs/shared/react/components/consent-manager-provider.md

@@ -30,6 +30,48 @@ Every other c15t component and hook must be rendered inside this provider.
 
 \*ExtractedTypeTable: Could not extract "UIOptions" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
 
+## Content Security Policy
+
+c15t injects a `<style id="c15t-theme">` element for your theme tokens, and the script loader injects a `<script>` element per consented vendor. Under a nonce-based Content Security Policy, both are blocked unless they carry your nonce.
+
+Pass it once through the `nonce` option and c15t applies it to everything it injects:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    mode: 'offline',
+    nonce: yourRequestNonce,
+  }}
+>
+  {children}
+</ConsentManagerProvider>
+```
+
+A `nonce` set on an individual script definition still wins, so you can override a single vendor without changing the provider.
+
+> 📝 **Note:**
+> Browsers hide the nonce content attribute once a policy is active. Inspecting the element shows no nonce="", but element.nonce still returns the value — this is expected and not a sign that c15t dropped it.
+
+### Inline style attributes
+
+The `nonce` option covers the elements c15t injects. It cannot cover inline `style="..."` attributes, which several components rely on — a nonce never authorizes a style attribute, because nonces apply to elements only.
+
+Style attributes are governed by `style-src-attr`, and when that directive is absent CSP falls back to `style-src`. A nonce-based style policy therefore blocks them:
+
+```http
+style-src 'self' 'nonce-abc123';
+```
+
+To keep the nonce requirement for stylesheets while still allowing style attributes, set `style-src-attr` explicitly:
+
+```http
+style-src 'self' 'nonce-abc123';
+style-src-attr 'unsafe-inline';
+```
+
+> ⚠️ **Warning:**
+> 'unsafe-inline' on style-src-attr permits any inline style attribute on the page. That is weaker than a nonce, but far narrower than replacing your nonce-based style-src with 'unsafe-inline', which would additionally authorize arbitrary injected \<style> elements. Note that adding 'unsafe-inline' alongside a nonce achieves nothing — a directive that specifies a nonce ignores it. If your threat model does not allow this, expect components that use inline styles to render unstyled.
+
 ## Legal Links
 
 `legalLinks` defines the URLs shown in consent UI text (banner, dialog, and widget where applicable).

package/docs/shared/react/guides/script-loader.md

@@ -229,6 +229,8 @@ Control where the script is injected and whether the element id is anonymized:
 
 Set `anonymizeId: false` only when another script or test needs a stable DOM id. Pass `nonce` when your CSP requires it; c15t applies it directly to the generated `<script>` element.
 
+You usually do not need a per-script `nonce`. Setting `nonce` once on the provider covers every injected script (and the theme stylesheet); a per-script value overrides it for that script alone.
+
 ## Dynamic Management
 
 Framework packages expose script-manager methods so integrations can be added, removed, or inspected at runtime. Use this for tenant-specific tools, feature-flagged scripts, or vendors that are configured after sign-in:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/nextjs",
-	"version": "2.2.0-canary-20260727202135",
+	"version": "2.2.0",
 	"description": "Next.js cookie banner and consent management platform for App Router, Pages Router, SSR, IAB TCF, and Consent Mode.",
 	"keywords": [
 		"nextjs",
@@ -106,9 +106,9 @@
 		"test:watch": "bun prebuild && vitest --passWithNoTests"
 	},
 	"dependencies": {
-		"@c15t/react": "2.2.0-canary-20260727202135",
-		"@c15t/translations": "2.2.0-canary-20260727202135",
-		"c15t": "2.2.0-canary-20260727202135"
+		"@c15t/react": "2.2.0",
+		"@c15t/translations": "2.2.0",
+		"c15t": "2.2.0"
 	},
 	"devDependencies": {
 		"@c15t/typescript-config": "0.0.1",