@c15t/react 3.0.0-alpha.1 → 3.0.0-alpha.3

package/dist-types/module-hooks/network-hold.d.ts

@@ -0,0 +1,47 @@
+import type { NetworkBlockerRule } from '@c15t/core/modules/network-blocker';
+import type { NetworkHold } from '@c15t/core/modules/network-hold';
+/**
+ * How long a hold started during render waits for its component to commit.
+ * A render React throws away never commits, so nothing else would end its
+ * hold. When this runs out the hold ends, and since nothing checked consent
+ * for the requests it held, they get the blocker's answer for a blocked
+ * request instead of being sent.
+ * @internal
+ */
+export declare const UNCOMMITTED_HOLD_MS = 10000;
+/**
+ * The render-time hold behind one network blocker mount.
+ * @internal
+ */
+export interface EarlyNetworkHold {
+    /**
+     * Call from the mount effect, before loading the blocker. Keeps the hold
+     * from expiring, starts a new one if it already ended (a StrictMode or
+     * kernel re-run after the blocker took over, or a commit that came after
+     * the expiry), and returns it for `createNetworkBlocker({ hold })`. A
+     * disabled blocker gets a hold that holds nothing, so it cannot end
+     * another caller's hold.
+     */
+    claim: (rules: readonly NetworkBlockerRule[], enabled: boolean | undefined) => NetworkHold;
+    /**
+     * Call from the mount effect's cleanup. Ends a hold no blocker took
+     * over, unless the effect runs again first (StrictMode, a kernel change).
+     * Nothing checked consent for what that hold held, so those requests get
+     * the blocker's answer for a blocked request instead of being sent.
+     */
+    unmount: () => void;
+}
+/**
+ * Hold requests matching `rules` from this component's first render in the
+ * browser, before any child renders or runs an effect. The network blocker
+ * loads after mount and takes the hold over.
+ *
+ * Rendering is not side-effect free: the first render patches `fetch` and
+ * `XMLHttpRequest`. That is safe because the hold only delays matching
+ * requests, a render React discards ends its hold after
+ * {@link UNCOMMITTED_HOLD_MS} (failing what it held as blocked), and on the
+ * server it does nothing.
+ *
+ * @internal
+ */
+export declare const useEarlyNetworkHold: (rules: readonly NetworkBlockerRule[], enabled: boolean | undefined) => EarlyNetworkHold;

package/dist-types/module-hooks.d.ts

@@ -1,4 +1,4 @@
-export { type IframeBlockerHandle, type UseIframeBlockerOptions, useIframeBlocker, } from './module-hooks/iframe-blocker';
-export { type BlockedRequestInfo, type NetworkBlockerHandle, type NetworkBlockerRule, type UseNetworkBlockerOptions, useNetworkBlocker, } from './module-hooks/network-blocker';
-export { type PersistenceHandle, type PersistenceOptions, type UsePersistenceOptions, usePersistence, } from './module-hooks/persistence';
-export { type Script, type ScriptLoaderDebugEvent, type ScriptLoaderHandle, type UseScriptLoaderOptions, useScriptLoader, } from './module-hooks/script-loader';
+export { type IframeBlockerHandle, type UseIframeBlockerOptions, useIframeBlocker, } from './module-hooks/iframe-blocker.js';
+export { type BlockedRequestInfo, type NetworkBlockerHandle, type NetworkBlockerRule, type UseNetworkBlockerOptions, useNetworkBlocker, } from './module-hooks/network-blocker.js';
+export { type PersistenceHandle, type PersistenceOptions, type UsePersistenceOptions, usePersistence, } from './module-hooks/persistence.js';
+export { type Script, type ScriptLoaderDebugEvent, type ScriptLoaderHandle, type UseScriptLoaderOptions, useScriptLoader, } from './module-hooks/script-loader.js';

package/dist-types/panel-link.d.ts

@@ -1 +1 @@
-export * from './components/panel-link';
+export * from './components/panel-link/index.js';

package/dist-types/panel-trigger.d.ts

@@ -1 +1 @@
-export * from './components/panel-trigger';
+export * from './components/panel-trigger/index.js';

package/dist-types/panel.d.ts

@@ -1 +1,13 @@
-export * from './components/panel';
+/**
+ * `@c15t/react/consent-dialog`: the deferred `ConsentDialog`, the same
+ * component the `@c15t/react` entry exports. Its implementation and styles
+ * load when the dialog first opens, or earlier when something preloads it,
+ * so importing this entry adds nothing heavy to the first load.
+ *
+ * The eager dialog and its individual parts (`Card`, `Header`, `Overlay`,
+ * ...) are in `@c15t/react/components/consent-dialog`.
+ *
+ * @packageDocumentation
+ */
+export { ConsentDialog } from './aggregate-components.js';
+export type { ConsentDialogCompoundComponent, ConsentDialogProps, } from './components/panel/index.js';

package/dist-types/preferences.d.ts

@@ -1 +1,12 @@
-export * from './components/preferences';
+/**
+ * `@c15t/react/consent-widget`: the deferred `ConsentWidget`, the same
+ * component the `@c15t/react` entry exports. Its implementation and styles
+ * load when the widget first renders.
+ *
+ * The eager widget and its individual parts (`Accordion`, `Switch`, `Footer`,
+ * ...) are in `@c15t/react/components/consent-widget`.
+ *
+ * @packageDocumentation
+ */
+export { ConsentWidget } from './aggregate-components.js';
+export type { ConsentWidgetCompoundComponent, ConsentWidgetProps, } from './components/preferences/index.js';

package/dist-types/primitives/accordion.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/accordion';
+export * from '../components/shared/ui/accordion/index.js';

package/dist-types/primitives/button.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/button';
+export * from '../components/shared/ui/button/index.js';

package/dist-types/primitives/collapsible.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/collapsible';
+export * from '../components/shared/ui/collapsible/index.js';

package/dist-types/primitives/dialog.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/dialog';
+export * from '../components/shared/ui/dialog/index.js';

package/dist-types/primitives/preference-item.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/preference-item';
+export * from '../components/shared/ui/preference-item/index.js';

package/dist-types/primitives/switch.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/switch';
+export * from '../components/shared/ui/switch/index.js';

package/dist-types/primitives/tabs.d.ts

@@ -1 +1 @@
-export * from '../components/shared/ui/tabs';
+export * from '../components/shared/ui/tabs/index.js';

package/dist-types/primitives.d.ts

@@ -1,7 +1,7 @@
-export * as Accordion from './components/shared/ui/accordion';
-export * as Button from './components/shared/ui/button';
-export * as Collapsible from './components/shared/ui/collapsible';
-export * as Dialog from './components/shared/ui/dialog';
-export * as PreferenceItem from './components/shared/ui/preference-item';
-export * as Switch from './components/shared/ui/switch';
-export * as Tabs from './components/shared/ui/tabs';
+export * as Accordion from './components/shared/ui/accordion/index.js';
+export * as Button from './components/shared/ui/button/index.js';
+export * as Collapsible from './components/shared/ui/collapsible/index.js';
+export * as Dialog from './components/shared/ui/dialog/index.js';
+export * as PreferenceItem from './components/shared/ui/preference-item/index.js';
+export * as Switch from './components/shared/ui/switch/index.js';
+export * as Tabs from './components/shared/ui/tabs/index.js';

package/dist-types/prompt.d.ts

@@ -1 +1 @@
-export * from './components/prompt';
+export * from './components/prompt/index.js';

package/dist-types/provider.d.ts

@@ -1,15 +1,17 @@
-import type { AllConsentNames, ClearOnRevocationConfig, ConsentPresentation, Callbacks, I18nConfig, KernelConfig, KernelOverrides, KernelUser, LegalLinks, ProviderTransportFactory, StorageConfig, User } from '@c15t/core';
+import type { AllConsentNames, ClearOnRevocationConfig, ConsentPresentation, Callbacks, I18nConfig, KernelConfig, KernelOverrides, KernelUser, LegalLinks, ProviderTransportFactory, StorageConfig, User, Vendor } from '@c15t/core';
 import type { Script } from '@c15t/core/modules/script-loader';
-import type { ConsentRuntime } from '@c15t/core/runtime';
+import type { ConsentControlOptions, ConsentRuntime } from '@c15t/core/runtime';
 import type { ReactNode } from 'react';
-import type { UseNetworkBlockerOptions, UsePersistenceOptions, UseScriptLoaderOptions } from './module-hooks';
-import type { ReactUIOptions } from './types/manager';
-import type { ReactComponentSlots } from './types/slots';
+import type { DialogPreload } from './chunk-warming.js';
+import type { UseNetworkBlockerOptions, UsePersistenceOptions, UseScriptLoaderOptions } from './module-hooks.js';
+import type { UseIframeBlockerOptions } from './module-hooks/iframe-blocker.js';
+import type { ReactUIOptions } from './types/manager.js';
+import type { ReactComponentSlots } from './types/slots.js';
 /** Events emitted by the mounted provider without snapshot-derived consent aliases. */
-export type ConsentProviderCallbacks = Pick<Callbacks, 'onChoiceRecorded' | 'onPermissionsChanged' | 'onError'>;
+export type ConsentProviderCallbacks = Pick<Callbacks, 'onChoiceRecorded' | 'onPermissionsChanged' | 'onError' | 'onBeforeConsentRevocationReload'>;
 /** Prepared policy and records; legacy consent projections are not provider inputs. */
 export type ConsentProviderPrefetch = Omit<KernelConfig, 'initialDraft' | 'transport'>;
-export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorScheme' | 'disableAnimation' | 'noStyle' | 'scrollLock' | 'theme' | 'trapFocus'> {
+export interface ConsentProviderOptions extends ConsentControlOptions, Pick<ReactUIOptions, 'colorScheme' | 'disableAnimation' | 'noStyle' | 'scrollLock' | 'theme' | 'trapFocus'> {
     enabled?: boolean;
     presentation?: ConsentPresentation;
     /**
@@ -17,9 +19,10 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
      *
      * @remarks
      * Set this when your CSP uses a nonce-based policy instead of
-     * `'unsafe-inline'`. The provider forwards it to the injected theme
-     * `<style>` element and to every `<script>` element created by the
-     * script loader. A per-script `nonce` still takes precedence.
+     * `'unsafe-inline'`. The provider forwards it to every `<script>`
+     * element created by the script loader. A per-script `nonce` still takes
+     * precedence. Pass the same nonce to `ConsentTheme`, which renders the
+     * theme `<style>` element.
      */
     nonce?: string;
     /**
@@ -82,15 +85,55 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
      * Initial-only: remount the provider to replace its cleanup configuration.
      */
     clearOnRevocation?: ClearOnRevocationConfig;
+    /**
+     * Reload the page after an accept, reject or save turns off a category or
+     * vendor that was granted, or after a `consentSource` withdraws one.
+     * Removing a script cannot stop code that already ran, so the reload
+     * starts a document with only permitted code. Waits for the save request.
+     * Set `false` to handle revocation yourself.
+     * @default true
+     */
+    reloadOnConsentRevoked?: boolean;
     scripts?: Script[];
+    /**
+     * Vendors offered for vendor-level consent outside IAB. Each sits inside a
+     * category; a visitor can grant the category and still turn one vendor
+     * off. Scripts, network rules and iframes name a vendor through `vendor`
+     * or `data-vendor`. Merged with vendors the backend returns and with slugs
+     * found on scripts and rules; presentation declared here wins.
+     */
+    vendors?: Vendor[];
     scriptLoader?: UseScriptLoaderOptions;
     networkBlocker?: UseNetworkBlockerOptions | false;
+    /**
+     * Discover and gate DOM iframes with data-category. Enabled by default.
+     * The blocker loads when the first gated iframe is on the page; until it
+     * runs, a gated iframe that arrives with a `src` consent does not allow
+     * is paused.
+     */
+    iframeBlocker?: UseIframeBlockerOptions | false;
     persistence?: boolean | UsePersistenceOptions;
     i18n?: Partial<I18nConfig>;
+    /** Categories to offer alongside discovered integration categories, within policy scope. */
     consentCategories?: AllConsentNames[];
     /** Per-component slot attribute overrides (shared contract with @c15t/vue). */
     components?: ReactComponentSlots;
     legalLinks?: LegalLinks;
+    /**
+     * When the deferred `<ConsentDialog />` starts loading before it opens.
+     *
+     * - `'idle'` (default): after the page's load event, in browser idle time,
+     *   while the banner is shown or a button that opens the dialog is
+     *   mounted, and on hover or focus of such a button. Skipped when the
+     *   visitor has Save-Data on or a 2G-class connection.
+     * - `'intent'`: only on hover or focus of a button that opens the dialog.
+     *
+     * Neither loads the dialog on a visit that shows no banner and has no
+     * dialog trigger.
+     *
+     * @default 'idle'
+     */
+    preloadDialog?: DialogPreload;
     /**
      * Adapter package name reported by `window.c15t`.
      * @internal
@@ -104,8 +147,13 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
  * Everything the component tree still owns — theme, slots, legal links —
  * is unchanged.
  */
-export type ExternalRuntimeProviderOptions = Omit<ConsentProviderOptions, 'mode'> & {
+export type ExternalRuntimeProviderOptions = Omit<ConsentProviderOptions, 'mode' | 'vendors'> & {
     mode?: ConsentProviderOptions['mode'];
+    /**
+     * Not accepted here: the runtime owner declares vendors through
+     * `createConsentRuntime({ vendors })`, and the kernel carries them.
+     */
+    vendors?: never;
 };
 /** The provider builds and owns its own kernel. */
 export interface OwnedRuntimeProviderProps {
@@ -132,7 +180,9 @@ export type ConsentProviderProps = OwnedRuntimeProviderProps | ExternalRuntimePr
  * Pass `runtime` to render a runtime someone else created. The provider
  * then borrows its kernel and mounts none of the side-effecting modules —
  * no second `init()`, no second persistence handle, no second `window.c15t`
- * — and does not dispose it on unmount.
+ * — and does not dispose it on unmount. Handing it a different runtime
+ * switches the tree to that runtime's kernel; switching between a borrowed
+ * runtime and a provider-built kernel still needs a remount.
  *
  * @example
  * ```tsx

package/dist-types/server/fetch-ssr-data.d.ts

@@ -1,5 +1,5 @@
 import type { SSRInitialData } from '@c15t/core';
-import type { FetchSSRDataOptions } from './types';
+import type { FetchSSRDataOptions } from './types.js';
 /**
  * Fetches initial consent data on the server for SSR hydration.
  *

package/dist-types/server/index.d.ts

@@ -24,8 +24,8 @@
  *
  * @packageDocumentation
  */
-export { fetchSSRData } from './fetch-ssr-data';
-export { extractRelevantHeaders } from './headers';
-export { createSSRInitCacheKey } from './init-cache-key';
-export { normalizeBackendURL, validateBackendURL } from './normalize-url';
-export type { FetchSSRDataOptions, FetchSSRDataOptionsBase, FetchSSRDataResult, } from './types';
+export { fetchSSRData } from './fetch-ssr-data.js';
+export { extractRelevantHeaders } from './headers.js';
+export { createSSRInitCacheKey } from './init-cache-key.js';
+export { normalizeBackendURL, validateBackendURL } from './normalize-url.js';
+export type { FetchSSRDataOptions, FetchSSRDataOptionsBase, FetchSSRDataResult, } from './types.js';

package/dist-types/theme-provider.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { ThemeContextValue } from './context/theme-context';
-import type { V3UIConfigValue } from './ui-config-context';
+import type { ThemeContextValue } from './context/theme-context.js';
+import type { V3UIConfigValue } from './ui-config-context.js';
 interface V3ThemeProviderProps {
     themeConfig: ThemeContextValue;
     uiConfig: V3UIConfigValue;

package/dist-types/types/index.d.ts

@@ -1,3 +1,3 @@
-export * from './manager';
-export * from './slots';
-export * from './theme';
+export * from './manager.js';
+export * from './slots.js';
+export * from './theme/index.js';

package/dist-types/types/manager.d.ts

@@ -1,5 +1,5 @@
 import type { UIOptions } from '@c15t/ui/theme';
-import type { ReactComponentSlots } from './slots';
+import type { ReactComponentSlots } from './slots.js';
 /**
  * React-specific UI configuration options.
  *

package/dist-types/types/theme/index.d.ts

@@ -1 +1 @@
-export * from './style-types';
+export * from './style-types.js';

package/dist-types/ui-config-context.d.ts

@@ -1,9 +1,11 @@
 import type { LegalLinks, ConsentPresentation } from '@c15t/core';
-import type { ReactComponentSlots } from './types/slots';
+import type { DialogPreload } from './chunk-warming.js';
+import type { ReactComponentSlots } from './types/slots.js';
 export interface V3UIConfigValue {
     components?: ReactComponentSlots;
     presentation?: ConsentPresentation;
     legalLinks?: LegalLinks;
+    preloadDialog?: DialogPreload;
 }
 export declare const V3UIConfigContext: import("react").Context<V3UIConfigValue>;
 export declare const useUIConfig: () => V3UIConfigValue;

package/dist-types/ui-save.d.ts

@@ -1,5 +1,25 @@
 import type { ConsentKernel, SaveResult } from '@c15t/core';
 /** Explicit navigation supersedes a pending UI action, even to the same dialog. */
 export declare const invalidateConsentUIAction: (kernel: ConsentKernel) => void;
-/** Keep an open preferences dialog available until its own save succeeds. */
+/**
+ * Close the preferences dialog as soon as its choice is recorded locally.
+ *
+ * The kernel commits the receipt and updates permissions synchronously, so
+ * the dialog closes in the task that handled the click. Storage is written
+ * one task later, still ahead of the request, and the request runs after:
+ * its outcome never reopens the dialog, and a failed request stays queued
+ * for replay by the kernel. A save that recorded nothing (an unchanged
+ * selection) closes when it resolves successfully, unless explicit
+ * navigation or a newer action came first.
+ */
 export declare const saveConsentUI: (kernel: ConsentKernel, save: () => Promise<SaveResult>, canClose: () => boolean) => Promise<SaveResult>;
+/**
+ * Close an IAB surface in the task that handled the click.
+ *
+ * An IAB choice commits once its TC string is encoded, which can wait on the
+ * TCF library chunk but never on the backend. The surface closes first and
+ * comes back only when that local step recorded nothing (the vendor list
+ * failed to load, or the policy changed underneath), so the visitor can try
+ * again. A failed backend request never reopens it.
+ */
+export declare const saveIABConsentUI: (kernel: ConsentKernel, save: () => Promise<void> | void) => Promise<void>;

package/dist-types/utils/deferred-module.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react';
+/**
+ * Share an on-demand module across exports and preloading. Ready client
+ * retries run synchronously; Suspense retains server rendering and hydration.
+ * A failed import is cached for rendered exports only, so a failed preload
+ * does not stop a later open from retrying.
+ *
+ * @internal
+ */
+export declare const createDeferredModule: <ModuleType>(importModule: () => Promise<ModuleType>) => {
+    component<Props extends object>(select: (module: ModuleType) => ComponentType<Props>): ComponentType<Props>;
+    preload(): Promise<void>;
+};

package/dist-types/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from './cn';
-export * from './default-translation-config';
-export * from './merge-styles';
-export * from './theme-utils';
+export * from './cn.js';
+export * from './default-translation-config.js';
+export * from './merge-styles.js';
+export * from './theme-utils.js';

package/dist-types/utils/merge-slot-props.d.ts

@@ -1,7 +1,7 @@
 import type { ConsentComponentSlotKey } from '@c15t/schema/config';
 import type { ClassValue } from '@c15t/ui/utils';
-import type { ReactComponentSlots, ReactSlotProps } from '../types/slots';
-import type { CSSPropertiesWithVars } from '../types/theme';
+import type { ReactComponentSlots, ReactSlotProps } from '../types/slots.js';
+import type { CSSPropertiesWithVars } from '../types/theme/index.js';
 type MergeSlotPropsInput = ReactSlotProps & {
     baseClassName?: ClassValue;
     noStyle?: boolean;

package/dist-types/utils/merge-styles.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameStyle, ThemeValue } from '../types/theme';
+import type { ClassNameStyle, ThemeValue } from '../types/theme/index.js';
 /**
  * Merges two styles objects, handling theme values and style properties.
  * This React version uses React-specific types but uses the core logic from @c15t/ui.

package/dist-types/utils/theme-utils.d.ts

@@ -3,7 +3,7 @@
  * Handles token-to-CSS variable conversion and dark mode overrides.
  */
 import type { ThemeCSSVariables } from '@c15t/ui/theme';
-import type { Theme } from '../types/theme/style-types';
+import type { Theme } from '../types/theme/style-types.js';
 /**
  * Default design tokens for the v2 theme system.
  */

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.0.0-alpha.1";
+export declare const version = "3.0.0-alpha.3";

package/docs/README.md

@@ -25,15 +25,16 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [ConsentDialog](./frameworks/react/components/consent-dialog.md): Open the c15t preference center as a modal ConsentDialog in a React app, wire its triggers and control blocking, focus and policy gating.
 - [ConsentDialogLink](./frameworks/react/components/consent-dialog-link.md): Add a ConsentDialogLink to a React footer so visitors reopen the c15t preference center from your own text link, with asChild and rights data.
 - [ConsentDialogTrigger](./frameworks/react/components/consent-dialog-trigger.md): Floating button and toolbar that reopen the preference center after the first prompt.
+- [ConsentGate](./frameworks/react/components/consent-gate.md): Gate a YouTube or map iframe behind consent with ConsentGate in React, showing a placeholder that opens the preference center until the category is allowed.
 - [ConsentProvider](./frameworks/react/components/consent-manager-provider.md): Configure the v3 consent runtime and share its state with child components.
 - [ConsentWidget](./frameworks/react/components/consent-widget.md): Embed the c15t preference center inline with ConsentWidget on a React privacy page, with draft toggles that record a choice only on Save.
 - [DevTools](./frameworks/react/components/dev-tools.md): A development tool for inspecting consent state, geolocation, loaded scripts, and consent events in real time.
-- [Frame](./frameworks/react/components/frame.md): Gate a YouTube or map iframe behind consent with Frame in React, showing a placeholder that opens the preference center until the category is allowed.
 - [Consent categories](./frameworks/react/concepts/consent-categories.md): Assign optional features to categories and understand how policy scope affects permission.
 - [Policy presets](./frameworks/react/concepts/policy-presets.md): Understand how policy rules affect React prompts, permissions and persistent privacy controls.
 - [Headless](./frameworks/react/headless.md): Build a custom consent banner in React with the c15t/react/headless hooks inside your ConsentProvider.
-- [Hooks](./frameworks/react/hooks/use-consent-manager/overview.md): Gate features and save consent choices in React components with the focused hooks exported from c15t/react.
+- [Hooks](./frameworks/react/hooks/overview.md): Gate features and save consent choices in React components with the focused hooks exported from c15t/react.
 - [IAB TCF](./frameworks/react/iab/overview.md): Mount the IAB TCF banner and dialog inside a React ConsentProvider and configure the CMP ID, policy and vendor data.
+- [Block network requests](./frameworks/react/network-blocker.md): Block fetch and XHR calls to third-party domains in a React app until the visitor grants their consent category.
 - [Quickstart](./frameworks/react/quickstart.md): Connect a React application to Inth and add consent UI, persistence and a preferences link.
 - [Load scripts with consent](./frameworks/react/script-loader.md): Register vendor scripts once and let effective permissions control loading.
 - [Styling](./frameworks/react/styling/overview.md): Import the React stylesheet and theme c15t components with tokens, slots, and class names on ConsentProvider.
@@ -44,6 +45,7 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Understand consent state](./guides/consent-state.md): Distinguish policy resolution, effective permissions, explicit choices, notices and privacy signals.
 - [Data fetching and transports](./guides/data-fetching.md): Choose cached manifests, backend init or offline policy resolution, and understand where consent records are saved.
 - [Choose a deployment mode](./guides/deployment-modes.md): Choose who runs your consent backend, then select manifest, init or offline resolution for your deployment.
+- [Share consent controls across frameworks](./guides/shared-consent-controls.md): Use the same c15t script lifecycle, external consent source, and event controls in every framework.
 - [Troubleshoot consent](./guides/troubleshooting.md): Diagnose missing banners, early vendor requests, lost choices and hydration differences.
 - [Verify consent before shipping](./guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
 
@@ -64,12 +66,15 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Clear on revocation](./integrations/clear-on-revocation.md): Remove configured first-party cookies and Web Storage keys when their consent category is denied.
 - [Clearbit](./integrations/clearbit.md): Configure Clearbit with c15t v3, understand marketing permission and verify loading and revocation.
 - [Cloudflare Web Analytics](./integrations/cloudflare-web-analytics.md): Configure Cloudflare Web Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Cloudflare Zaraz](./integrations/cloudflare-zaraz.md): Synchronize c15t permissions with Zaraz purposes while Cloudflare manages your tools.
 - [Crisp](./integrations/crisp.md): Configure Crisp with c15t v3, understand functionality permission and verify loading and revocation.
 - [Databuddy](./integrations/databuddy.md): Configure Databuddy's initial and updated consent state with c15t v3.
 - [Fathom Analytics](./integrations/fathom-analytics.md): Configure Fathom Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Front Chat](./integrations/front-chat.md): Load the Front Chat widget with functionality permission, forward CSP nonces and clear the session on revocation.
 - [Google Maps](./integrations/google-maps.md): Prevent a map iframe from mounting before the required permission.
 - [Google Tag](./integrations/google-tag.md): Configure gtag with c15t Consent Mode signals and understand its loading behavior.
 - [Google Tag Manager](./integrations/google-tag-manager.md): Load GTM with c15t consent signals and verify the tags inside your container.
+- [Granular consent](./integrations/granular-consent.md): Let visitors grant a category and still turn one vendor off, without adopting IAB TCF.
 - [Heap](./integrations/heap.md): Configure Heap with c15t v3, understand measurement permission and verify loading and revocation.
 - [Hightouch](./integrations/hightouch.md): Configure Hightouch with c15t v3, understand measurement permission and verify loading and revocation.
 - [Hotjar](./integrations/hotjar.md): Configure Hotjar with c15t v3, understand measurement permission and verify loading and revocation.
@@ -81,8 +86,10 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Microsoft Clarity](./integrations/microsoft-clarity.md): Configure Microsoft Clarity with c15t v3, understand measurement permission and verify loading and revocation.
 - [Microsoft UET](./integrations/microsoft-uet.md): Configure Microsoft UET with c15t v3, understand marketing permission and verify loading and revocation.
 - [Mixpanel](./integrations/mixpanel-analytics.md): Configure Mixpanel with c15t v3, understand measurement permission and verify loading and revocation.
+- [OneDollarStats](./integrations/one-dollar-stats.md): Load the OneDollarStats tracker with measurement permission, forward its settings and verify loading and revocation.
 - [OpenAI Pixel](./integrations/openai-pixel.md): Configure the OpenAI Measurement Pixel for ChatGPT Ads with c15t v3, manage marketing permission and verify conversion delivery.
 - [Overview](./integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, chat and embedded content.
+- [Pinterest Tag](./integrations/pinterest-tag.md): Configure the Pinterest Tag with c15t v3, track typed events and verify marketing permission, revocation and reload.
 - [Pirsch](./integrations/pirsch.md): Configure Pirsch with c15t v3, understand measurement permission and verify loading and revocation.
 - [Plausible Analytics](./integrations/plausible-analytics.md): Configure Plausible Analytics with c15t v3, understand measurement permission and verify loading and revocation.
 - [PostHog](./integrations/posthog.md): Choose PostHog loading and cookieless behavior, configure the region, and synchronize v3 permissions.

package/docs/customization/overview.md

@@ -34,10 +34,11 @@ layout can be restored by the policy renderer.
 ## Use the adapter's configuration shape
 
 React and Next.js accept provider `theme`, `presentation` and `components`
-options. Vue and Nuxt expose their own shared configuration, including CSS
+options, and render theme tokens with `ConsentTheme` on the server. Vue and Nuxt expose their own shared configuration, including CSS
 `tokens` and component slots. Svelte accepts its provider options and theme
-contract. Astro serializes integration options and uses the selected adapter for
-dialogs. Do not move a configuration object between frameworks without checking
+slots; SvelteKit renders the token CSS from a server `load`. Astro serializes
+integration options, renders the theme tokens on the server and uses the
+selected adapter for dialogs. Do not move a configuration object between frameworks without checking
 the target types.
 
 Read [tokens and CSS](./tokens.md),

package/docs/customization/recipes.md

@@ -26,8 +26,10 @@ export const brandTheme = defineTheme({
 
 ```
 
-Install `@c15t/ui` to use `defineTheme` directly. Pass `brandTheme` as `theme` in
-your existing React or Next.js provider options. Keep your Inth mode and script
+Install `@c15t/ui` to use `defineTheme` directly. Render
+`<ConsentTheme theme={brandTheme} />` on the server for the tokens, and pass
+`brandTheme` as `theme` in your existing React or Next.js provider options for
+the action styles. Keep your Inth mode and script
 configuration. The theme source above is also imported by the runnable example,
 so the rendered result and the documentation use the same values.
 

package/docs/customization/tokens.md

@@ -11,10 +11,53 @@ React, Next.js and Svelte provide `styles.css`. Import the adapter's stylesheet
 at the app's global entry point. Vue includes styles in its components; Astro
 adds styles through its integration.
 
+The stylesheet blocks rendering, so it carries only what a first paint can
+show: the default tokens, every c15t CSS variable, and the rules for the
+banner, `ConsentDialogTrigger` and the `ConsentGate` placeholder. The consent
+dialog and preference widget bring their own rules. Each rule reaches the page
+once.
+
 ```tsx
 import 'c15t/react/styles.css';
 ```
 
+| File                             | Holds                                                                  | Loaded by                                                         |
+| -------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `styles.css` or `styles.tw3.css` | Default tokens, all variables, banner, trigger and `ConsentGate` rules | Your app, once                                                    |
+| `@c15t/ui/styles/dialog.css`     | Dialog and preference widget rules                                     | The dialog component, with its lazy chunk                         |
+| `@c15t/ui/styles/primitives.css` | Rules for the `@c15t/ui/styles/primitives` class maps                  | Svelte's `styles.css`, or your app if it renders those class maps |
+| `iab/styles.css`                 | IAB TCF banner and dialog rules and variables                          | Your app, after `styles.css`                                      |
+
+In React, Next.js and TanStack Start, the dialog's module imports
+`@c15t/ui/styles/dialog.css`. The bundler emits it with the dialog's chunk and
+loads it before that chunk runs, so the dialog never renders unstyled. The
+chunk loads after first paint, by the time the dialog first opens. Do not
+import `dialog.css` yourself. The `@c15t/react/components/consent-dialog`,
+`/components/consent-widget`, `/primitives`, `/primitives/*` and `/iab` entry
+points import it as soon as you import them, because they render dialog parts
+outside the lazy chunk.
+
+These modules import the stylesheet through `@c15t/ui/styles/dialog`. Under
+the `node` export condition that module imports nothing, so server code that
+loads `@c15t/react` with plain Node, such as the Pages Router or an SSR build
+that keeps dependencies external, does not fail on the `.css` file. In your
+own components, import `@c15t/ui/styles/dialog` rather than the `.css` file
+if the module can run on the server.
+
+Svelte loads its dialog with the page, so `c15t/svelte/styles.css` also
+imports the dialog and primitive rules. Astro injects the banner rules; the
+React and Svelte dialog islands import the rest, and Astro links those
+stylesheets on every page, so in Astro the dialog rules still block rendering.
+Vue components import their own stylesheets.
+
+The dialog rules sit in `@layer components` and declare no variables, so
+tokens from `theme`, variables you override in your own CSS, and Tailwind 4
+utilities still win over them even though they load later. If you import
+`styles.css` into a named layer, such as `@import 'c15t/react/styles.css'
+layer(c15t)`, the dialog rules still join the top-level `components` layer.
+List `components` in your layer order statement, for example
+`@layer c15t, components, app;`, so it does not land after your own layers.
+
 The standard stylesheet places rules in `@layer components`. For Tailwind 3,
 use the `styles.tw3.css` entry instead of the standard stylesheet, between the
 components and utilities directives in your Tailwind entry:
@@ -26,6 +69,18 @@ components and utilities directives in your Tailwind entry:
 @tailwind utilities;
 ```
 
+Tailwind 3 also processes the dialog stylesheet the bundler loads, and it
+rejects a stylesheet that uses `@layer components` without its own
+`@tailwind components` directive. Add the c15t plugin before `tailwindcss` in
+your PostCSS config. It removes the layer wrapper from c15t's stylesheets so
+Tailwind 3 accepts them and its preflight does not override them:
+
+```js title="postcss.config.mjs"
+export default {
+  plugins: ['@c15t/ui/postcss-tailwind3', 'tailwindcss', 'autoprefixer'],
+};
+```
+
 Do not load both c15t stylesheet variants. For Tailwind 4 or unlayered CSS,
 inspect layer order before reaching for `!important`.
 
@@ -48,9 +103,17 @@ export const theme = defineTheme({
 });
 ```
 
-Install `@c15t/ui` if importing its theme helper directly. Pass `theme` in your
-provider options. `consentActions` selects styling by action role. A per-action
-entry overrides `primary`, which overrides `default`.
+Install `@c15t/ui` if importing its theme helper directly. The browser does
+not turn tokens into CSS. In React and Next.js, render
+`<ConsentTheme theme={theme} />` where the app renders on the server, and pass
+`theme` in your provider options for `consentActions`. Elsewhere, call
+`generateThemeCSS(theme)` from `@c15t/ui/theme` on the server or at build time
+and put the result in a `<style>` element or your stylesheet. See
+[React styling](../frameworks/react/styling/overview.md) and
+[Next.js styling](https://c15t.com/docs/frameworks/next/styling/overview).
+
+`consentActions` selects styling by action role. A per-action entry overrides
+`primary`, which overrides `default`.
 
 ## Target a prompt with CSS