@c15t/nextjs 2.2.1 → 3.0.0-alpha.1

package/docs/frameworks/next/network-blocker.md

@@ -1,140 +0,0 @@
----
-title: Network Blocker
-description: Block outgoing network requests to third-party domains until the
-  user grants consent for the appropriate category.
-group: frameworks
----
-The network blocker intercepts outgoing `fetch` and `XMLHttpRequest` calls and blocks them based on consent state and domain rules. This catches tracking requests that happen outside of script loading - for example, beacon calls, API requests to analytics endpoints, or pixel fires from already-loaded scripts.
-
-## Configuration
-
-Add `networkBlocker` to your provider options:
-
-```tsx
-import { type ReactNode } from 'react';
-import { ConsentManagerProvider } from '@c15t/nextjs';
-
-export function ConsentManager({ children }: { children: ReactNode }) {
-  return (
-    <ConsentManagerProvider
-      options={{
-        mode: 'hosted',
-        backendURL: '/api/c15t',
-        networkBlocker: {
-          rules: [
-            {
-              id: 'google-analytics',
-              domain: 'google-analytics.com',
-              category: 'measurement',
-            },
-            {
-              id: 'facebook-pixel',
-              domain: 'facebook.com',
-              pathIncludes: '/tr',
-              category: 'marketing',
-            },
-            {
-              id: 'analytics-post',
-              domain: 'analytics.example.com',
-              methods: ['POST'],
-              category: 'measurement',
-            },
-          ],
-        },
-      }}
-    >
-      {children}
-    </ConsentManagerProvider>
-  );
-}
-```
-
-## Rule Matching
-
-Rules match requests using three criteria:
-
-### Domain matching
-
-The `domain` field matches the request hostname. Subdomains are automatically included - a rule for `google-analytics.com` also matches `www.google-analytics.com` and `stats.google-analytics.com`.
-
-### Path matching
-
-The optional `pathIncludes` field requires the request URL path to contain the specified substring. This lets you target specific endpoints without blocking the entire domain.
-
-### Method matching
-
-The optional `methods` array restricts the rule to specific HTTP methods. If omitted, the rule applies to all methods.
-
-## Consent Conditions
-
-Like the script loader, `category` accepts a `HasCondition`:
-
-```tsx
-// Simple
-{ category: 'measurement' }
-
-// Must have both
-{ category: { and: ['measurement', 'marketing'] } }
-
-// Must have either
-{ category: { or: ['measurement', 'marketing'] } }
-```
-
-## Monitoring Blocked Requests
-
-### Console logging
-
-Blocked requests are logged to the console by default. Disable with `logBlockedRequests: false`.
-
-### Callback
-
-Use `onRequestBlocked` to handle blocked requests programmatically:
-
-```tsx
-networkBlocker: {
-  rules: [...],
-  onRequestBlocked: ({ method, url, rule }) => {
-    console.log(`Blocked ${method} ${url} (rule: ${rule?.id})`);
-  },
-}
-```
-
-## Runtime Updates
-
-Update the network blocker configuration at runtime:
-
-```tsx
-import { useConsentManager } from '@c15t/nextjs';
-
-function NetworkBlockerManager() {
-  const { setNetworkBlocker } = useConsentManager();
-
-  const addRule = () => {
-    setNetworkBlocker({
-      rules: [
-        {
-          id: 'new-tracker',
-          domain: 'tracker.example.com',
-          category: 'marketing',
-        },
-      ],
-    });
-  };
-}
-```
-
-## API Reference
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`NetworkBlockerRule\`|
-|Source Path|\`./packages/core/src/libs/network-blocker/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "NetworkBlockerRule" from "./packages/core/src/libs/network-blocker/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`NetworkBlockerConfig\`|
-|Source Path|\`./packages/core/src/libs/network-blocker/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "NetworkBlockerConfig" from "./packages/core/src/libs/network-blocker/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/frameworks/next/policy-packs.md

@@ -1,248 +0,0 @@
----
-title: Policy Packs
-description: Configure regional consent policies in Next.js — hosted mode,
-  presets, and offline fallback.
-group: frameworks
----
-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, automated tests, or as a resilience fallback during a temporary outage — 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 inth.com 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 (Development and Fallback)
-
-Use offline presets mainly for local development, Storybook, deterministic tests, or temporary backend outages:
-
-```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, previews, automated tests, or when the backend is temporarily 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 local previews or fallback behavior 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 deterministic preview or fallback 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 during testing or preview work (for example, 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/frameworks/next/styling/classnames.md

@@ -1,94 +0,0 @@
----
-title: Class Names
-description: Style consent components using className props and per-slot
-  className targeting via the theme.
-group: frameworks
----
-## Prefer Slots for Stock Components
-
-There is no single top-level `className` contract across every pre-built consent component.
-
-For the stock `ConsentBanner`, `ConsentDialog`, and `ConsentWidget`, prefer `theme.slots` first. That keeps the markup intact and lets you target the exact part you need.
-
-## Per-Slot className
-
-Target individual component parts via the theme's `slots` object. Each slot accepts a string (className) or an object with `className` and `style`:
-
-```tsx
-const theme = {
-  slots: {
-    consentBannerTitle: 'text-xl font-semibold',
-    consentBannerDescription: 'text-sm text-gray-600',
-    consentBannerFooter: 'flex gap-3',
-    buttonPrimary: 'rounded-full px-6',
-  },
-} satisfies Theme;
-```
-
-## Combining with CSS Modules
-
-```tsx
-import styles from './consent.module.css';
-
-const theme = {
-  slots: {
-    consentBannerCard: styles.bannerCard,
-    consentBannerTitle: styles.bannerTitle,
-    buttonPrimary: styles.primaryButton,
-  },
-} satisfies Theme;
-```
-
-```css title="consent.module.css"
-.bannerCard {
-  backdrop-filter: blur(12px);
-  background: rgba(255, 255, 255, 0.9);
-}
-
-.bannerTitle {
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.primaryButton {
-  border-radius: 9999px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-```
-
-## When to Use Raw className
-
-Use raw className-level styling when:
-
-* your styling system is already class-driven
-* tokens are too broad for the change
-* slots already identify the correct element
-
-If the request is "make the banner footer darker", prefer `theme.colors.surfaceHover` first. If the request is "add a border and spacing only to the footer", prefer `theme.slots.consentBannerFooter`.
-
-## Advanced: `noStyle`
-
-Use `noStyle` only when you want to remove defaults and style from scratch while still keeping c15t's component structure:
-
-```tsx
-{/* Remove all styles from a specific component */}
-<ConsentBanner noStyle />
-
-{/* Remove all styles globally */}
-<ConsentManagerProvider options={{ noStyle: true, ... }}>
-```
-
-You can also set `noStyle` per-slot:
-
-```tsx
-const theme = {
-  slots: {
-    consentBannerCard: { noStyle: true, className: 'my-custom-card' },
-  },
-} satisfies Theme;
-```
-
-Treat `noStyle` as an advanced escape hatch. Do not jump to it just because a token or slot needs debugging.
-
-For full custom markup and behavior, continue to [Headless Mode](../headless).

package/docs/frameworks/next/styling/color-scheme.md

@@ -1,84 +0,0 @@
----
-title: Color Scheme
-description: Support light mode, dark mode, and system preference detection in
-  consent components.
-group: frameworks
----
-c15t supports light and dark mode through the theme's `colors` and `dark` token groups. The active color scheme is determined by one of three methods:
-
-1. **Explicit setting** via the `colorScheme` option
-2. **CSS class detection** - c15t checks for `.dark` on the document element
-3. **System preference** - matches `prefers-color-scheme` media query
-
-## Configuration
-
-Set the color scheme on the provider:
-
-```tsx
-import { type ReactNode } from 'react';
-import { ConsentManagerProvider } from '@c15t/nextjs';
-
-function ConsentManager({ children }: { children: ReactNode }) {
-  return (
-    <ConsentManagerProvider
-      options={{
-        mode: 'hosted',
-        backendURL: '/api/c15t',
-        colorScheme: 'system', // 'light' | 'dark' | 'system'
-        theme: {
-          colors: {
-            primary: '#6366f1',
-            surface: '#ffffff',
-            text: '#1f2937',
-          },
-          dark: {
-            primary: '#818cf8',
-            surface: '#1f2937',
-            text: '#f9fafb',
-          },
-        },
-      }}
-    >
-      {children}
-    </ConsentManagerProvider>
-  );
-}
-```
-
-## useColorScheme Hook
-
-For programmatic control over the color scheme:
-
-```tsx
-import { useColorScheme } from '@c15t/nextjs';
-
-function ThemeToggle() {
-  // Pass the desired scheme - 'light', 'dark', 'system', or null (disable)
-  useColorScheme('system');
-}
-```
-
-|Value|Behavior|
-|--|--|
-|`'light'`|Force light mode|
-|`'dark'`|Force dark mode|
-|`'system'`|Follow `prefers-color-scheme` media query|
-|`null`|Disable - c15t won't manage color scheme|
-
-## How Dark Mode Works
-
-When dark mode is active, c15t applies the `dark` token values as CSS variable overrides. Only tokens specified in `dark` are overridden - unset tokens fall back to the `colors` values. This also applies to `textOnPrimary`: if you omit it, c15t derives a readable foreground from the active `primary` color in that scheme.
-
-```tsx
-const theme = {
-  colors: {
-    surface: '#ffffff',     // Light mode
-    text: '#1f2937',        // Light mode
-  },
-  dark: {
-    surface: '#1f2937',     // Dark mode override
-    text: '#f9fafb',        // Dark mode override
-    // primary is NOT set - inherits from colors.primary
-  },
-} satisfies Theme;
-```

package/docs/frameworks/next/styling/css-variables.md

@@ -1,53 +0,0 @@
----
-title: CSS Variables
-description: Reference for all --c15t-* CSS custom properties generated by the theme system.
-group: frameworks
----
-Every theme token is converted to a `--c15t-*` CSS custom property at runtime. You can override these variables in your stylesheet without using the JavaScript theme API.
-
-## Variable Reference
-
-|Property|Value|
-|:--|:--|
-|Type Name|\`ThemeCSSVariables\`|
-|Source Path|\`./packages/ui/src/theme/types.ts\`|
-
-\*ExtractedTypeTable: Could not extract "ThemeCSSVariables" 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.\*
-
-## Overriding Variables
-
-Override in your stylesheet:
-
-```css
-:root {
-  --c15t-primary: #8b5cf6;
-  --c15t-surface: #fafafa;
-  --c15t-radius-md: 1rem;
-}
-
-/* Dark mode overrides */
-.dark,
-.c15t-dark {
-  --c15t-primary: #a78bfa;
-  --c15t-surface: #18181b;
-  --c15t-text: #fafafa;
-}
-```
-
-## Scoped Overrides
-
-Target specific components by scoping variables:
-
-```tsx
-<div className="checkout-consent">
-  <ConsentBanner />
-</div>
-```
-
-```css
-/* Only affect c15t components inside .checkout-consent */
-.checkout-consent {
-  --c15t-surface: #f0f9ff;
-  --c15t-radius-lg: 1.5rem;
-}
-```